/* =========================================================================
   andreaespinel.com — hoja de estilos única
   Paleta, tipografía y componentes de la maqueta aprobada.
   Nota de accesibilidad: el rosa de marca (#EC407A) no alcanza contraste AA
   sobre crema para texto pequeño (3,54:1). Por eso el texto rosa usa
   --rosa-texto (#D81B60, 4,65:1) y #EC407A queda para rellenos, bordes y
   trazos decorativos, donde el contraste de texto no aplica.
   ========================================================================= */

/* ---------- Tipografías (servidas desde el propio dominio) ----------
   Son los mismos archivos que entrega Google Fonts (subconjunto latino,
   woff2), pero alojados aquí. Cargarlas desde fonts.googleapis.com bloqueaba
   el render 777 ms en cada página y provocaba saltos de maquetación al
   cambiar la tipografía; así el sitio no depende de un tercero y no envía
   la IP de las pacientes a Google.
   Para volver a Google Fonts: borra este bloque, repón los <link> en
   src/templates/layout.html y vuelve a permitir fonts.googleapis.com y
   fonts.gstatic.com en la CSP de scripts/build.mjs. */
@font-face {
  font-family: Lora;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/lora-600.woff2") format("woff2");
}

@font-face {
  font-family: Lora;
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/lora-600-italic.woff2") format("woff2");
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poppins-400.woff2") format("woff2");
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500.woff2") format("woff2");
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600.woff2") format("woff2");
}

/* ---------- Variables ---------- */
:root {
  --crema: #fcf7f3;
  --marino: #1b264d;
  --rosa: #ec407a;
  --rosa-texto: #d81b60;
  --rosa-palido: #f7dce6;
  --rosa-claro: #f7a8c4;
  --gris: #5a6078;
  --blanco: #fff;
  --linea: #e9dfd8;
  --linea-oscura: #33406e;
  --texto-sobre-marino: #d9ddea;
  --validar-fondo: #fff3b0;
  --validar-borde: #e0b800;

  --sombra: 0 8px 30px rgba(27, 38, 77, 0.06);
  --sombra-media: 0 10px 30px rgba(27, 38, 77, 0.12);
  --sombra-fuerte: 0 10px 30px rgba(27, 38, 77, 0.18);

  --radio-s: 18px;
  --radio: 24px;
  --radio-l: 32px;
  --radio-xl: 36px;

  --ancho: 1200px;
  --ancho-texto: 68ch;
  --gutter: clamp(1rem, 4vw, 2rem);

  --serif: Lora, Georgia, "Times New Roman", serif;
  --sans: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--marino);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

/* Sin esto, el atributo height del <video> gana sobre aspect-ratio y la
   portada se ve descuadrada. */
img,
video {
  height: auto;
}

a {
  color: var(--marino);
  text-decoration: none;
}

a:hover {
  color: var(--rosa-texto);
}

:focus-visible {
  outline: 3px solid var(--rosa-texto);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

em.destacado {
  color: var(--rosa-texto);
  font-style: italic;
  display: inline-block;
}

p {
  margin: 0;
}

/* Visible solo para lectores de pantalla */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenido, visible solo al tabular */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--marino);
  color: var(--blanco);
  padding: 12px 20px;
  border-radius: 0 0 var(--radio-s) 0;
}

.saltar:focus {
  left: 0;
  color: var(--blanco);
}

/* ---------- Utilidades de maquetación ---------- */
.wrap {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.seccion {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.seccion--blanca {
  background: var(--blanco);
}

.seccion--marino {
  background: var(--marino);
  color: var(--blanco);
}

.seccion--marino h1,
.seccion--marino h2,
.seccion--marino h3 {
  color: var(--blanco);
}

.encabezado-seccion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 40rem;
  margin-bottom: clamp(2rem, 4vw, 2.5rem);
}

.encabezado-seccion--ancho {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: none;
}

.encabezado-seccion--ancho > div {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 35rem;
}

.kicker {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rosa-texto);
  font-weight: 600;
  line-height: 1.4;
}

.kicker--gris {
  color: var(--gris);
}

.kicker--claro {
  color: var(--rosa-claro);
}

.titulo-1 {
  font-size: clamp(2.125rem, 5vw, 3.375rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.titulo-2 {
  font-size: clamp(1.75rem, 4.2vw, 2.625rem);
  line-height: 1.12;
}

.titulo-3 {
  font-size: clamp(1.375rem, 2.6vw, 1.625rem);
  line-height: 1.2;
}

.bajada {
  color: var(--gris);
  font-size: clamp(1rem, 1.6vw, 1.0625rem);
  line-height: 1.65;
  max-width: 34rem;
}

.seccion--marino .bajada {
  color: var(--texto-sobre-marino);
}

.muted {
  color: var(--gris);
}

.grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dos-columnas {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48px;
  padding: 0.5rem 1.625rem;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.3;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn--primario {
  background: var(--marino);
  color: var(--blanco);
}

.btn--primario:hover {
  background: var(--rosa-texto);
  color: var(--blanco);
}

.btn--fantasma {
  border-color: var(--marino);
  color: var(--marino);
  background: transparent;
}

.btn--fantasma:hover {
  border-color: var(--rosa-texto);
  color: var(--rosa-texto);
}

.btn--claro {
  border-color: var(--blanco);
  color: var(--blanco);
  background: transparent;
}

.btn--claro:hover {
  background: var(--blanco);
  color: var(--marino);
}

.btn--grande {
  min-height: 56px;
  font-size: 1rem;
}

.botonera {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
}

.enlace-flecha {
  color: var(--rosa-texto);
  font-weight: 500;
  font-size: 0.9375rem;
  margin-top: auto;
}

/* ---------- Encabezado y navegación ---------- */
.sitio-header {
  position: relative;
  z-index: 20;
  background: var(--crema);
}

.sitio-header__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.375rem;
}

.marca {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav-principal {
  display: flex;
  gap: 2rem;
}

.nav-principal a {
  font-size: 0.875rem;
  font-weight: 500;
}

.nav-principal a[aria-current="page"] {
  color: var(--rosa-texto);
}

.sitio-header__barra > .btn {
  flex: 0 0 auto;
}

/* El botón que vive dentro del menú solo existe para la vista móvil. */
.nav-principal > .btn {
  display: none;
}

.menu-boton {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1.5px solid var(--marino);
  border-radius: 999px;
  background: transparent;
  color: var(--marino);
  cursor: pointer;
}

.menu-boton svg {
  width: 22px;
  height: 22px;
}

.menu-boton .icono-cerrar {
  display: none;
}

.menu-boton[aria-expanded="true"] .icono-abrir {
  display: none;
}

.menu-boton[aria-expanded="true"] .icono-cerrar {
  display: block;
}

@media (max-width: 900px) {
  .menu-boton {
    display: inline-flex;
  }

  .sitio-header__barra > .btn {
    display: none;
  }

  .nav-principal {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--blanco);
    border-top: 1px solid var(--linea);
    box-shadow: var(--sombra-media);
    padding: 0.5rem var(--gutter) 1.5rem;
  }

  .nav-principal.abierto {
    display: flex;
  }

  .nav-principal a {
    padding-block: 0.875rem;
    border-bottom: 1px solid var(--linea);
    font-size: 1rem;
  }

  .nav-principal > .btn {
    display: inline-flex;
    margin-top: 1rem;
    border-bottom: 0;
  }
}

/* ---------- Portada (hero) ---------- */
.hero {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-top: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

.hero__texto {
  flex: 1 1 36rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}

.hero__firma {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--gris);
}

.hero__firma::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 2px;
  background: var(--rosa);
  flex: 0 0 36px;
}

.hero__figura {
  flex: 0 1 24rem;
  min-width: 16rem;
  position: relative;
  margin: 0;
}

.hero__figura::before {
  content: "";
  position: absolute;
  inset: 24px -24px -24px 24px;
  border-radius: var(--radio-l);
  background: var(--rosa-palido);
}

.hero__figura img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radio-l);
}

.hero__nota {
  position: absolute;
  left: -2.5rem;
  bottom: 1.75rem;
  background: var(--blanco);
  border-radius: var(--radio-s);
  padding: 0.875rem 1.125rem;
  box-shadow: var(--sombra-media);
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 13.5rem;
}

.hero__nota strong {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 600;
}

.hero__nota span {
  color: var(--gris);
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* ---------- Valores ---------- */
.valor {
  display: flex;
  gap: 1.125rem;
  align-items: flex-start;
}

.valor svg {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

.valor h3 {
  font-size: 1.375rem;
  margin-bottom: 0.375rem;
}

.valor p {
  color: var(--gris);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ---------- Tarjetas ---------- */
.card {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 1.75rem;
  box-shadow: var(--sombra);
}

.card-momento {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-height: 16rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card-momento:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-media);
  color: var(--marino);
}

.card-momento p {
  color: var(--gris);
  font-size: 0.9375rem;
  flex: 1;
}

.card-momento--destacada {
  background: var(--marino);
  color: var(--blanco);
}

.card-momento--destacada:hover {
  color: var(--blanco);
}

.card-momento--destacada h3 {
  color: var(--blanco);
}

.card-momento--destacada p {
  color: var(--texto-sobre-marino);
}

.card-momento--destacada .enlace-flecha {
  color: var(--rosa-claro);
}

/* ---------- Ecografías ---------- */
.card-eco {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  border-top: 4px solid var(--rosa);
}

.card-eco__semanas {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3vw, 2.125rem);
  font-weight: 600;
  color: var(--rosa-texto);
  line-height: 1.1;
}

.card-eco__semanas span {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--gris);
  font-weight: 500;
}

.card-eco h3 {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
}

.card-eco p {
  color: var(--gris);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Línea de tiempo de la página Ecografías */
.linea-tiempo {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.linea-tiempo > li {
  position: relative;
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  background: var(--blanco);
  border-radius: var(--radio);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--sombra);
  border-left: 5px solid var(--rosa);
}

.linea-tiempo__semanas {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  color: var(--rosa-texto);
  line-height: 1.05;
}

.linea-tiempo__semanas span {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gris);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.linea-tiempo h3 {
  font-size: 1.375rem;
  margin-bottom: 0.5rem;
}

.linea-tiempo p {
  color: var(--gris);
  line-height: 1.65;
}

@media (max-width: 700px) {
  .linea-tiempo > li {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* ---------- Pasos numerados ---------- */
.pasos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  counter-reset: paso;
}

.pasos > li {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  counter-increment: paso;
}

.pasos > li::before {
  content: counter(paso);
  flex: 0 0 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--rosa-palido);
  color: var(--rosa-texto);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
}

.pasos h3 {
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 0.25rem;
}

.pasos p {
  color: var(--gris);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ---------- Bloque consulta (foto + pasos) ---------- */
.consulta__texto {
  flex: 1 1 30rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.consulta__figura {
  flex: 0 1 26.25rem;
  min-width: 16.25rem;
  position: relative;
  margin: 0;
}

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

.consulta__cita {
  position: absolute;
  right: -1.25rem;
  bottom: -1.25rem;
  background: var(--marino);
  color: var(--blanco);
  border-radius: var(--radio-s);
  padding: 1rem 1.25rem;
  max-width: 15rem;
  box-shadow: var(--sombra-fuerte);
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}

/* ---------- Videos ---------- */
.grid-videos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

.video-card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 1rem;
  box-shadow: var(--sombra);
}

.seccion--marino .video-card {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.video-card video,
.video-card img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radio-s);
  background: var(--marino);
}

.video-card__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0 0.5rem 0.5rem;
}

.video-card h3 {
  font-size: 1.125rem;
  line-height: 1.3;
}

.video-card p {
  color: var(--gris);
  font-size: 0.875rem;
  line-height: 1.55;
}

.seccion--marino .video-card p {
  color: var(--texto-sobre-marino);
}

.video-card__meta {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
  font-weight: 500;
}

.seccion--marino .video-card__meta {
  color: var(--rosa-claro);
}

/* Tarjeta de video destacado del inicio: enlace con portada */
.video-destacado {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  color: var(--blanco);
}

.video-destacado:hover {
  color: var(--blanco);
}

.video-destacado img {
  width: 100%;
  aspect-ratio: 9 / 14;
  object-fit: cover;
  object-position: top;
  border-radius: 20px;
  transition: transform 0.18s ease;
}

.video-destacado:hover img {
  transform: translateY(-3px);
}

.video-destacado__titulo {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.video-destacado__meta {
  font-size: 0.875rem;
  color: var(--texto-sobre-marino);
}

.serie-videos + .serie-videos {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.serie-videos h2 {
  margin-bottom: 0.5rem;
}

/* ---------- Sobre mí ---------- */
.sobre-mi__figura {
  flex: 0 1 26.25rem;
  min-width: 16.25rem;
  margin: 0;
}

.sobre-mi__figura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radio-l);
}

.sobre-mi__texto {
  flex: 1 1 30rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sobre-mi__texto p {
  color: var(--gris);
  font-size: clamp(1rem, 1.6vw, 1.0625rem);
  line-height: 1.7;
}

.enlace-instagram {
  color: var(--rosa-texto);
  font-weight: 500;
  align-self: center;
}

/* ---------- Preguntas frecuentes ---------- */
.faq {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 5vw, 4rem);
}

.faq__intro {
  flex: 0 1 23.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq__lista {
  flex: 1 1 35rem;
  min-width: 0;
  border-top: 1px solid var(--linea);
}

.autora {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 1rem;
}

.autora img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 56px;
}

.autora__nombre {
  font-size: 0.875rem;
  font-weight: 600;
}

.autora__cargo {
  color: var(--gris);
  font-size: 0.8125rem;
}

.faq-item {
  border-bottom: 1px solid var(--linea);
}

.faq-item > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 1.375rem;
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item > summary::after {
  content: "+";
  color: var(--rosa-texto);
  font-size: 1.625rem;
  font-family: var(--sans);
  line-height: 1;
  flex: 0 0 auto;
}

.faq-item[open] > summary::after {
  content: "–";
}

.faq-item > summary:hover {
  color: var(--rosa-texto);
}

.faq-item__respuesta {
  padding-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  align-items: flex-start;
}

.faq-item__respuesta p {
  color: var(--gris);
  line-height: 1.7;
  max-width: var(--ancho-texto);
}

/* ---------- Llamado final ---------- */
.agenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(2rem, 4vw, 3rem);
  background: var(--rosa-palido);
  border-radius: var(--radio-xl);
  padding: clamp(2rem, 5vw, 4rem);
}

.agenda__texto {
  flex: 1 1 30rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.agenda__texto h2 {
  font-size: clamp(1.875rem, 4.6vw, 3rem);
  line-height: 1.05;
}

.agenda__texto p {
  color: var(--gris);
  line-height: 1.6;
  max-width: 32.5rem;
}

.agenda__texto strong {
  color: var(--marino);
  font-weight: 600;
}

.agenda__acciones {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 18.75rem;
  flex: 0 1 20rem;
}

/* No es un botón: no hay enlace directo a la agenda de la clínica. */
.agenda__como {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--blanco);
  border-radius: var(--radio-s);
  padding: 1rem 1.25rem;
  color: var(--gris);
  font-size: 0.875rem;
  line-height: 1.5;
}

.agenda__como span {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rosa-texto);
}

.agenda__como strong {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--marino);
}

.agenda__lugar {
  color: var(--gris);
  font-size: 0.8125rem;
  text-align: center;
}

/* ---------- Artículos ---------- */
.articulo {
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.articulo__encabezado {
  max-width: var(--ancho-texto);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.articulo__encabezado h1 {
  font-size: clamp(1.875rem, 4.6vw, 2.75rem);
  line-height: 1.12;
}

.miga {
  font-size: 0.875rem;
  color: var(--gris);
}

.miga a {
  color: var(--gris);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.miga a:hover {
  color: var(--rosa-texto);
}

.prosa {
  max-width: var(--ancho-texto);
  color: var(--gris);
  font-size: clamp(1rem, 1.6vw, 1.0625rem);
  line-height: 1.75;
}

.prosa > * + * {
  margin-top: 1.25rem;
}

.prosa h2 {
  color: var(--marino);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  line-height: 1.25;
  margin-top: 2.5rem;
}

.prosa h3 {
  color: var(--marino);
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 1.75rem;
}

.prosa strong {
  color: var(--marino);
  font-weight: 600;
}

.prosa a {
  color: var(--rosa-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prosa ul,
.prosa ol {
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.prosa li::marker {
  color: var(--rosa-texto);
}

.prosa li > p {
  margin: 0;
}

.prosa .destacado-parrafo {
  color: var(--marino);
  font-weight: 600;
  font-size: 1.0625rem;
  background: var(--blanco);
  border-left: 4px solid var(--rosa);
  border-radius: 0 var(--radio-s) var(--radio-s) 0;
  padding: 1rem 1.25rem;
}

/* Tablas dentro de los artículos */
.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radio-s);
  box-shadow: var(--sombra);
  background: var(--blanco);
}

.tabla-scroll table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.9375rem;
}

.tabla-scroll th,
.tabla-scroll td {
  text-align: left;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
  line-height: 1.55;
}

.tabla-scroll th {
  background: var(--rosa-palido);
  color: var(--marino);
  font-weight: 600;
  font-size: 0.875rem;
}

.tabla-scroll tr:last-child td {
  border-bottom: 0;
}

/* Bloque "cuándo consultar" */
.alerta {
  background: var(--rosa-palido);
  border-radius: var(--radio);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  color: var(--gris);
}

.alerta > h2,
.alerta > h3 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--marino);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}

.alerta > h2::before,
.alerta > h3::before {
  content: "";
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rosa);
}

.alerta > * + * {
  margin-top: 0;
}

.alerta ul {
  padding-left: 1.25rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Firma de autora al pie del artículo */
.firma-autora {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--sombra);
  max-width: var(--ancho-texto);
  margin-top: clamp(2.5rem, 5vw, 3rem);
}

.firma-autora img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 72px;
}

.firma-autora__nombre {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 600;
}

.firma-autora__cargo {
  color: var(--gris);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Cierre del artículo */
.cierre-articulo {
  max-width: var(--ancho-texto);
  margin-top: clamp(2rem, 4vw, 2.5rem);
  background: var(--rosa-palido);
  border-radius: var(--radio);
  padding: clamp(1.5rem, 4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.cierre-articulo h2 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  line-height: 1.25;
}

.cierre-articulo p {
  color: var(--gris);
}

/* Otros artículos */
.mas-articulos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.mas-articulos a {
  background: var(--blanco);
  border-radius: var(--radio-s);
  padding: 1.125rem 1.25rem;
  box-shadow: var(--sombra);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  display: block;
}

.mas-articulos a:hover {
  box-shadow: var(--sombra-media);
}

/* ---------- Marca [validar] (solo en ramas de vista previa) ---------- */
.validar {
  background: var(--validar-fondo);
  border-bottom: 2px dotted var(--validar-borde);
  color: var(--marino);
  font-weight: 600;
  padding: 0 0.25em;
  border-radius: 3px;
  cursor: help;
}

.aviso-vista-previa {
  background: var(--marino);
  color: var(--blanco);
  font-size: 0.8125rem;
  text-align: center;
  padding: 0.625rem var(--gutter);
  line-height: 1.5;
}

.aviso-vista-previa strong {
  color: var(--rosa-claro);
}

/* ---------- 404 ---------- */
.error-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  padding-block: clamp(4rem, 12vw, 8rem);
  max-width: 38rem;
  margin-inline: auto;
}

.error-404 .bajada {
  max-width: none;
}

/* ---------- Pie ---------- */
.sitio-footer {
  border-top: 1px solid var(--linea);
  background: var(--crema);
}

.sitio-footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 2.5rem;
}

.sitio-footer__marca {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-width: 24rem;
}

.sitio-footer__marca .marca {
  font-size: 1.25rem;
  white-space: normal;
}

.sitio-footer__marca span,
.sitio-footer__marca a {
  color: var(--gris);
  font-size: 0.875rem;
  line-height: 1.5;
}

.sitio-footer__marca a:hover {
  color: var(--rosa-texto);
}

.sitio-footer__enlaces {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.sitio-footer__disclaimer {
  color: var(--gris);
  font-size: 0.75rem;
  line-height: 1.6;
  max-width: 22.5rem;
}

.sitio-footer__legal {
  border-top: 1px solid var(--linea);
  padding-block: 1.25rem;
  font-size: 0.75rem;
  color: var(--gris);
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .grid--3,
  .grid-videos,
  .mas-articulos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero,
  .dos-columnas {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__figura,
  .consulta__figura,
  .sobre-mi__figura {
    flex-basis: auto;
    max-width: 26rem;
    width: 100%;
    margin-inline: auto;
  }

  .sobre-mi.dos-columnas {
    flex-direction: column-reverse;
  }

  .hero__figura::before {
    inset: 16px -16px -16px 16px;
  }

  .hero__nota {
    left: 0;
    bottom: -1.25rem;
  }

  .consulta__cita {
    right: 0;
  }

  .faq__intro,
  .faq__lista {
    flex-basis: 100%;
  }
}

@media (max-width: 640px) {
  .grid--3,
  .grid--4,
  .grid-videos,
  .mas-articulos {
    grid-template-columns: minmax(0, 1fr);
  }

  .video-card video,
  .video-card img {
    max-width: 22rem;
    margin-inline: auto;
  }

  .agenda__acciones {
    min-width: 0;
    width: 100%;
  }

  .hero__nota {
    position: static;
    margin-top: 1.5rem;
    max-width: none;
  }

  .consulta__cita {
    position: static;
    margin-top: 1rem;
    max-width: none;
  }

  .consulta__figura,
  .hero__figura {
    margin-bottom: 0;
  }
}

/* ---------- Impresión ---------- */
@media print {
  .sitio-header,
  .sitio-footer__enlaces,
  .btn,
  .menu-boton,
  video {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}