@layer organisms {
  /* Especialidades: dos tarjetas + banda interdisciplinaria */
  .specialties {
    display: flex;
    flex-direction: column;
    gap: clamp(1.75rem, 1.4rem + 1.5vw, 2.375rem);
  }

  .specialties__grid {
    --grid-min: 20rem;
    --grid-gap: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  }

  .specialties__note { font-size: 0.8125rem; font-weight: 600; color: var(--accent); }

  /* La doctora: foto + biografía */
  .doctor {
    display: grid;
    gap: var(--space-xl);
    align-items: center;

    @media (min-width: 48rem) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  }

  .doctor__photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-card);
  }


  /* Trayectoria: hitos en dos columnas en escritorio */
  .timeline {
    display: grid;
    column-gap: var(--space-2xl);
    padding: 0;
    list-style: none;

    @media (min-width: 48rem) { grid-template-columns: 1fr 1fr; }
  }

  /* Tu primera cita, paso a paso */
  .steps {
    --grid-min: 15rem;
    padding: 0;
    list-style: none;
  }

  /* Reseñas */
  .reviews__grid { --grid-min: 18rem; --grid-gap: var(--space-m); }
  .review-card blockquote { margin: 0; }

}

@layer organisms {
  /* Encabezado de páginas interiores */
  .page-hero {
    padding-block: var(--space-xl) var(--section-pad);
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);

    & h1 { max-width: 18ch; }
    & .lead { max-width: 60ch; }
  }

  .split {
    display: grid;
    gap: var(--space-xl);
    align-items: start;

    @media (min-width: 64rem) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  }

  .treatments { --grid-min: 17rem; --grid-gap: var(--space-m); }

  .narrow { max-width: 52rem; }
}