/* ==========================================================================
   Biodental MM Oral Center — sistema de diseño
   Tokens derivados del Design System de marca (turquesa, petróleo, morado,
   amarillo, neutros) y aplicados a una retícula mobile-first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Turquesa — color primario */
  --teal-50:  #EDF9F9;
  --teal-100: #D2F0EF;
  --teal-200: #A2E3E1;
  --teal-300: #5FD1CF;
  --teal-400: #20B9B8;   /* marca — superficies grandes, fotografía, decoración */
  /* Turquesa de contraste. #20B9B8 es un tono de luminancia media: ni texto
     blanco encima ni texto suyo sobre blanco llegan a 4.5:1. Este tono sí
     (4.97:1 en ambas direcciones) y se lee como la misma familia. Todo lo
     que sea texto, ícono o botón usa este; el brillante queda para paneles
     y decoración. */
  --teal-cta: #0E7D78;
  --teal-500: #17948F;
  --teal-600: #104C56;   /* petróleo — titulares y texto fuerte */
  --teal-700: #0A343B;

  /* Morado — segundo color de marca, no un adorno.
     Es el que evita que la página se lea como una institución: entra en la
     segunda mitad de los titulares, en la iconografía y en un bloque entero. */
  --purple-50:  #F3F3FB;
  --purple-100: #E7E7F6;
  --purple-200: #CFD0EE;
  --purple-300: #A9AADD;
  --purple-500: #6064AE;
  --purple-600: #4E5296;
  --purple-700: #3B3E76;

  /* Amarillo — un solo elemento por sección */
  --yellow-100: #F8F7C9;
  --yellow-500: #E9E33A;
  /* Ámbar para las estrellas de reseña. El amarillo de marca mide 1.35:1
     sobre blanco y el amarillo clásico de estrellas (#FBBC04) 1.71:1: a esa
     distancia una persona con baja visión no las ve. Este llega a 4.58:1
     incluso sobre el gris de sección. */
  --yellow-600: #8A6D00;

  /* Neutros */
  --white: #FFFFFF;
  --gray-50:  #F7F8F9;
  --gray-100: #EFF1F2;
  --gray-200: #E1E4E6;
  --gray-400: #9AA3AA;
  --gray-600: #5C666C;
  --gray-800: #3A4348;
  --ink: #1B2225;

  /* Verde WhatsApp (canal, no marca) */
  /* Verde WhatsApp oscurecido a 5.0:1 con texto blanco. */
  --wa: #15803D;
  --wa-dark: #116331;

  /* Roles */
  --bg: var(--white);
  --bg-soft: var(--gray-50);
  --text: var(--gray-800);
  --text-soft: var(--gray-600);
  /* Aqua para el titular grande (pasa 3:1, el mínimo de texto grande) y
     teal de contraste para todo lo que baja de 24 px.
     El #2ab8b9 pedido mide 2.43:1 sobre blanco —por debajo del 3:1 mínimo
     incluso para texto grande—, así que se usa el mismo tono un paso más
     oscuro: 3.27:1 y prácticamente el mismo color a la vista. */
  --teal-aqua: #1C9E9D;
  /* Gris cálido de marca, 7.53:1 sobre blanco. */
  --gray-warm: #525555;
  --heading: var(--teal-cta);
  --line: var(--gray-200);

  /* Tipografía
     NO volver a poner "Cocogoose Pro" —ni ninguna fuente sin @font-face— al
     principio de este stack. Un nombre de familia sin @font-face resuelve
     contra las fuentes INSTALADAS en la máquina de quien visita: quien tenga
     Cocogoose instalada veía Cocogoose, y quien no, la webfont. El sitio se
     veía distinto según el equipo, y en el del cliente ninguna sustitución
     de display cambiaba nada.
     Si algún día se licencia Cocogoose para web, se auto-aloja con su propio
     @font-face —igual que Poppins y Montserrat— y entonces sí aplica a todos
     por igual. La display se cambia con `npm run fuente -- "Nombre"`. */
  --font-display: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Montserrat", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* A 68 px y peso 800 cualquier familia colapsa en una mancha y deja de
     distinguirse de otra: los rasgos que separan una tipografía de otra viven
     justo en el detalle que el extra-bold cierra. La escala baja y el peso
     también; ahí es donde aparece la lectura. */
  --fs-display: clamp(2.2rem, 6.2vw, 3.5rem);
  --fs-h1:      clamp(2.72rem, 6.4vw, 3.75rem);
  --fs-h2:      clamp(1.85rem, 4.6vw, 2.75rem);
  --fs-h3:      clamp(1.2rem, 2.6vw, 1.55rem);
  --fs-lead:    clamp(1.06rem, 1.9vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-h3-card: 1.125rem;   /* título dentro de tarjeta — un solo valor */
  --fs-eyebrow: 0.75rem;

  /* Espaciado base 4 */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;
  --sp-6: 96px;
  --section-y: clamp(56px, 9vw, 112px);
  --gutter: clamp(20px, 5vw, 40px);
  --container: 1180px;
  --measure: 62ch;

  /* Radios — esquinas suaves, nunca cápsulas.
     Los botones comparten radio con los campos y las píldoras de dato para
     que todo lo accionable se lea como una misma familia. */
  --r-btn: 12px;
  --r-chip: 10px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 44px;

  /* Sombras siempre teñidas de petróleo, nunca negras */
  --sh-1: 0 1px 2px rgba(16, 76, 86, .05), 0 3px 10px rgba(16, 76, 86, .05);
  --sh-2: 0 2px 6px rgba(16, 76, 86, .05), 0 14px 32px rgba(16, 76, 86, .08);
  --sh-3: 0 30px 70px rgba(16, 76, 86, .16);
  --sh-teal: 0 10px 26px rgba(14, 125, 120, .26);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset y 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; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--heading);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.008em;
  margin: 0 0 var(--sp-2);
  text-wrap: balance;
}
/* El H1 va en 900. En Figtree el salto de 700 a 800 es de apenas 1.2% de
   ancho —a 60 px no se distingue del H2, medido: 622.5 px vs 630.3 px sobre
   la misma cadena—; el 900 sí abre diferencia (637.7 px) y da el golpe de
   entrada que el titular necesita. De H2 hacia abajo todo queda en 700, que
   es donde Figtree conserva abiertas las contraformas y sigue leyéndose.
   El tracking baja porque el peso ya cierra los espacios por sí solo. */
h1 { font-size: var(--fs-h1); font-weight: 900; letter-spacing: -0.018em; line-height: 1.12; color: var(--teal-aqua); }
h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.012em; line-height: 1.18; color: var(--teal-aqua); }
h3 { font-size: var(--fs-h3); font-weight: 800; line-height: 1.28; letter-spacing: -0.008em; }
h4 { font-size: 1.0625rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.006em; }

/* Un solo tamaño para los títulos que viven dentro de una tarjeta, sin
   importar el componente.
   Va con :where() a propósito —especificidad 0—, así ninguna regla de
   componente más abajo en el archivo la pisa por simple orden de aparición.
   Antes convivían cinco tamaños de h3 (17, 17.6, 18, 19.2 y 20 px) por
   exactamente eso. Verificable con `npm run tipografia`. */
:where(.card, .cat, .router-card, .svc__body, .deliver, .step, .compare__col) h3 {
  font-size: var(--fs-h3-card);
  letter-spacing: -0.004em;
  line-height: 1.34;
}

p { margin: 0 0 var(--sp-2); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal-cta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal-600); }

strong, b { font-weight: 700; color: var(--teal-600); }
.section--dark strong, .section--dark b,
.closer strong, .closer b,
.footer strong, .footer b { color: #FFFFFF; }

ul, ol { padding-left: 1.25em; margin: 0 0 var(--sp-2); }
li { margin-bottom: 6px; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }

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

::selection { background: var(--teal-200); color: var(--teal-700); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: var(--teal-600); color: #fff; padding: 12px 20px;
  border-radius: var(--r-btn); font-family: var(--font-display); font-weight: 700; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 800px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.section--soft { background: var(--bg-soft); }
.section--mint { background: var(--teal-50); }
.section--lilac { --teal-aqua: #17948F; background: #F3F3FA; }

.section--dark {
  background: var(--teal-600);
  color: #CFE3E6;
  --heading: #FFFFFF;
  --teal-aqua: #FFFFFF;
  --text: #CFE3E6;
  --text-soft: #9FBEC4;
  --line: rgba(255, 255, 255, .14);
}
.section--dark a:not(.btn) { color: var(--teal-200); }

/* Bloque morado. Rompe la sucesión de blanco y turquesa a media página. */
.section--purple {
  background: var(--purple-600);
  color: #E2E3F5;
  --heading: #FFFFFF;
  --teal-aqua: #FFFFFF;
  --text: #E2E3F5;
  --text-soft: #D2D3EF;
  --line: rgba(255, 255, 255, .16);
}
.section--purple .card {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: none;
}
.section--purple strong, .section--purple b { color: #fff; }
/* El bloque morado es la única banda de color saturado del home: si las
   tarjetas se vuelven blancas, vuelve a ser una rejilla más. Se queda morado
   y el amarillo hace de jerarquía dentro de la tarjeta. */
.section--purple .card h3 { color: var(--yellow-500); }
.section--purple .card__ico { background: rgba(255, 255, 255, .16); color: #fff; }

/* El arco gigante del kit se retiró: a tamaño de pantalla se leía como una
   mancha, no como un motivo. Su lugar lo ocupan los motivos pequeños del
   bloque de decoración: retícula de puntos, aro de contorno y aspa. */
.section--arc { overflow: hidden; }

.stack > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-4); }

.grid { display: grid; gap: var(--sp-3); }
@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 700px) and (max-width: 999px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   4. Tipografía de apoyo
   -------------------------------------------------------------------------- */
/* Etiqueta de sección. Es una sola pieza en todo el sitio: mismo tamaño,
   mismo color y mismo espacio debajo, para que ninguna sección parezca
   pesar más que otra. Se mantiene corta a propósito (máx. ~32 caracteres)
   para que nunca se parta en dos líneas. */
/* Sin recuadro: la etiqueta es tipografía, no un componente. Un guion corto
   del color de la etiqueta la ancla al margen y la separa del titular sin
   necesidad de caja. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--purple-600);
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 var(--sp-2);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  flex: none;
}
/* Sobre morado y sobre petróleo la etiqueta pasa a amarillo: es el único
   color de la paleta que sostiene 12 px sobre esos fondos. */
.section--purple .eyebrow,
.section--dark .eyebrow,
.closer .eyebrow { color: var(--yellow-500); }
.section--lilac .eyebrow,
.card--lilac .eyebrow { color: var(--purple-700); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text);
  max-width: 44ch;
}
.muted { color: var(--text-soft); }
.small { font-size: var(--fs-small); }
.xs { font-size: var(--fs-xs); }

.num { font-family: var(--font-text); font-variant-numeric: tabular-nums; }

/* Segunda tinta del titular. El titular deja de ser un bloque de un solo
   color: la parte que nombra el beneficio va en morado. Es el recurso que
   más levanta la página sin añadir un solo elemento. */
.hl { color: var(--purple-500); }
.section--dark .hl,
.section--purple .hl,
.closer .hl { color: var(--yellow-500); }

/* Realce de marca: una frase por página, no más.
   El subrayado amarillo del kit gráfico en lugar del bloque sólido. Sobre un
   titular grande el bloque es el objeto más pesado de la página y se come a
   la tipografía que lleva dentro; el subrayado señala igual y deja leer. */
.mark {
  background-image: linear-gradient(var(--yellow-500), var(--yellow-500));
  background-repeat: no-repeat;
  background-size: 100% .2em;
  background-position: 0 92%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* El bloque sólido sigue disponible para piezas cortas donde sí funciona. */
.mark--solid,
.mark--purple {
  background-image: none;
  background-color: var(--teal-cta);
  color: #fff;
  padding: 0 .2em .05em;
  border-radius: 10px;
}
.mark--purple { background-color: var(--purple-500); }

/* Subrayado amarillo dibujado a mano del kit de redes */
.underlined {
  background-image: linear-gradient(var(--yellow-500), var(--yellow-500));
  background-repeat: no-repeat;
  background-size: 100% .28em;
  background-position: 0 88%;
}

.section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lead { margin-inline: auto; }
/* El :not() es obligatorio: `.section-head p` tiene más especificidad que
   `.eyebrow`, así que sin esto la etiqueta heredaba el tamaño del lead y
   cada sección la mostraba de un tamaño distinto. Lo mismo en .card,
   .closer y el pie. */
.section-head p:not(.eyebrow) { color: var(--text-soft); font-size: var(--fs-lead); line-height: 1.55; }

/* --------------------------------------------------------------------------
   5. Botones
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--teal-cta);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  min-height: 52px;
  border: 2px solid transparent;
  border-radius: var(--r-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }

.btn--primary { box-shadow: var(--sh-teal); }
.btn--primary:hover { background: #0B6B67; box-shadow: 0 14px 32px rgba(14,125,120,.34); }

.btn--purple { --btn-bg: var(--purple-500); box-shadow: 0 10px 28px rgba(96,100,174,.3); }
.btn--purple:hover { --btn-bg: var(--purple-700); }

.btn--wa { --btn-bg: var(--wa); box-shadow: 0 10px 26px rgba(21,128,61,.28); }
.btn--wa:hover { --btn-bg: var(--wa-dark); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--teal-600);
  border-color: var(--teal-300);
}
.btn--ghost:hover { --btn-bg: var(--teal-50); border-color: var(--teal-400); }
.section--dark .btn--ghost { --btn-fg: #fff; border-color: rgba(255,255,255,.4); }
.section--dark .btn--ghost:hover { --btn-bg: rgba(255,255,255,.1); border-color: #fff; }

.btn--sm { padding: 10px 18px; min-height: 42px; font-size: .9375rem; border-radius: var(--r-chip); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
@media (max-width: 479px) {
  .btn-row > .btn { width: 100%; }
}

/* Enlace con flecha */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--teal-cta);
  text-decoration: none;
}
.arrow-link svg { transition: transform .2s var(--ease); flex: none; }
.arrow-link:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Píldoras, badges y el chip de precio
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--r-chip);
  background: var(--teal-50);
  color: var(--teal-600);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid var(--teal-100);
}
.badge--solid { background: var(--teal-cta); color: #fff; border-color: transparent; }
.badge--purple { background: var(--purple-100); color: var(--purple-700); border-color: #D7D8EF; }
.badge--yellow { background: var(--yellow-500); color: var(--teal-700); border-color: transparent; }
.badge--outline { background: transparent; border-color: var(--line); color: var(--text-soft); }

/* El precio siempre visible antes del botón. Es el mecanismo central
   del plan de conversión: nadie debe sorprenderse en recepción. */
.price-chip {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 12px 18px;
  border-radius: var(--r-btn);
  background: var(--teal-50);
  border: 1px solid var(--teal-100);
  color: var(--teal-600);
  font-size: var(--fs-small);
  line-height: 1.3;
}
.price-chip b {
  font-family: var(--font-text);
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--teal-600);
}
.section--dark .price-chip {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.section--dark .price-chip b { color: #fff; }

.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: var(--fs-small);
  color: var(--text-soft);
}
/* El separador se dibuja en CSS para que nunca quede huérfano al inicio
   de una línea cuando la fila se envuelve en móvil. */
.meta-row .dot { display: none; }
@media (min-width: 600px) {
  .meta-row > span:not(:last-child)::after {
    content: "·";
    margin-left: 14px;
    color: var(--teal-300);
    font-weight: 700;
  }
}
@media (max-width: 599px) {
  .meta-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .meta-row > span { position: relative; padding-left: 16px; }
  .meta-row > span::before {
    content: "";
    position: absolute; left: 0; top: .62em;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--teal-300);
  }
}

/* --------------------------------------------------------------------------
   7. Tarjetas
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3.4vw, 34px);
  box-shadow: var(--sh-1);
}
.card--flat { box-shadow: none; }
.card--mint { background: var(--teal-50); border-color: var(--teal-100); }
.card--lilac { background: #F2F2FA; border-color: #E1E2F2; }
.card--yellow { background: var(--yellow-100); border-color: #EFEDA8; }
.card h3 { margin-bottom: 10px; }
.card p:not(.eyebrow) { color: var(--text-soft); }

/* Icono de encabezado dentro de una tarjeta */
/* Mismo trato que los iconos del home: disco lavanda y trazo morado. En un
   cuadro de 44 px con el icono a 25 px, un dibujo de línea de 1.6 de grosor
   se vuelve un garabato ilegible —y en blanco sobre teal, todavía menos—.
   Homologarlo con .svc__ico hace además que el sistema se lea como uno solo
   entre el home y las landings. */
.card__ico {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--purple-50);
  color: var(--purple-500);
  margin-bottom: 16px;
}
.card__ico svg { width: 40px; height: 40px; }
.card--mint .card__ico { background: var(--white); }
.section--dark .card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   8. Ruteador de intención (la sección que clasifica al visitante)
   -------------------------------------------------------------------------- */
.router { display: grid; gap: 14px; }
@media (min-width: 640px) { .router { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .router { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

.router-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 22px;
  min-height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease);
}
.router-card::after {
  content: "";
  position: absolute;
  inset-block-end: -40%;
  inset-inline-end: -30%;
  width: 90%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--teal-50) 0%, rgba(237,249,249,0) 70%);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
  opacity: .9;
  z-index: 0;
}
.router-card > * { position: relative; z-index: 1; }
.router-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal-200);
  box-shadow: var(--sh-2);
  color: inherit;
}
.router-card:hover::after { transform: scale(1.35); }
.router-card .ico {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--teal-cta);
  color: #fff;
  margin-bottom: 4px;
}
.router-card .ico svg { width: 27px; height: 27px; }
.router-card h3 { margin: 0; }
.router-card p { font-size: var(--fs-small); color: var(--text-soft); margin: 0; }
.router-card .go {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--teal-cta);
  display: inline-flex; align-items: center; gap: 6px;
}
.router-card:nth-child(2) .ico { background: var(--purple-500); }
.router-card:nth-child(3) .ico { background: var(--teal-600); }
.router-card:nth-child(4) .ico { background: var(--yellow-500); color: var(--teal-600); }

/* --------------------------------------------------------------------------
   9. Tarjeta de servicio
   -------------------------------------------------------------------------- */
.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  overflow: hidden;
  height: 100%;
  box-shadow: var(--sh-1);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease),
              border-color .24s var(--ease);
}
a.svc { text-decoration: none; color: inherit; }
a.svc:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-2);
  border-color: var(--purple-200);
  color: inherit;
}
.svc__media { aspect-ratio: 16 / 10; background: var(--teal-400); overflow: hidden; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; }

.svc__body {
  padding: 30px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.svc__body h3 { margin: 0; color: var(--teal-cta); }
.svc__body p { font-size: var(--fs-small); color: var(--text-soft); margin: 0; }

/* El ícono es el protagonista de la tarjeta: círculo lavanda, trazo morado,
   y al pasar el cursor se invierte. */
.svc__ico {
  display: grid; place-items: center;
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--purple-50);
  color: var(--purple-500);
  margin-bottom: 6px;
  transition: background-color .24s var(--ease), color .24s var(--ease),
              transform .24s var(--ease);
}
.svc__ico svg { width: 46px; height: 46px; }
a.svc:hover .svc__ico { background: var(--purple-500); color: #fff; transform: scale(1.06); }

.svc__foot {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
}
.svc__price { font-weight: 700; color: var(--teal-cta); font-variant-numeric: tabular-nums; }
.svc__soon { color: var(--gray-600); font-size: var(--fs-xs); font-family: var(--font-display); font-weight: 700; }

/* Sin landing todavía: misma tarjeta. Lo que la distingue es el CTA, no un
   fondo distinto —que además desaparecía sobre las secciones grises. */
.svc--static .svc__ico { background: var(--teal-50); color: var(--teal-cta); }
a.svc--static:hover .svc__ico { background: var(--teal-cta); color: #fff; }

/* Router de servicios en bandas alternadas.
   La sección no lleva fondo propio: el color lo pone cada banda, a ancho
   completo, sin trucos de 100vw —las bandas viven fuera del .container y el
   .container vuelve a entrar dentro de cada una. */
.svc-router { padding-bottom: 0; }
.svc-band { position: relative; padding: clamp(34px, 4.4vw, 60px) 0; overflow: hidden; }
.svc-band--soft  { background: var(--bg-soft); }
.svc-band--lilac { background: var(--purple-50); }
.svc-band > .container { position: relative; z-index: 1; }

.svc-group__title {
  color: var(--purple-600);
  margin: 0 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-h3);
  letter-spacing: -0.004em;
}
/* El rombo hereda el color del título salvo en la banda lila, donde el
   morado sobre morado claro perdería fuerza y pasa al aqua. */
.svc-group__title::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--yellow-500);
  transform: rotate(45deg);
  flex: none;
}
.svc-group { position: relative; }

/* Ortodoncia y Reemplazo dental tienen un solo tratamiento: en una rejilla
   de tres columnas la tarjeta quedaba sola con dos huecos al lado y la banda
   parecía rota. Con una sola tarjeta la fila pasa a horizontal y ocupa el
   ancho completo; con dos, a media rejilla. */
.svc-group[data-n="1"] > .grid { grid-template-columns: 1fr; }
.svc-group[data-n="2"] > .grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) {
  .svc-group[data-n="1"] .svc__body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 28px;
  }
  .svc-group[data-n="1"] .svc__ico { grid-row: 1 / span 2; }
  .svc-group[data-n="1"] .svc__body h3 { grid-column: 2; align-self: end; }
  .svc-group[data-n="1"] .svc__body p { grid-column: 2; align-self: start; margin-top: 4px; }
  .svc-group[data-n="1"] .svc__foot { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
}

/* Lista compacta de servicios sin página propia */
.chip-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.chip-list li {
  margin: 0;
  border-radius: var(--r-chip);
  background: var(--white);
  border: 1px solid var(--line);
}
/* El relleno vive en el enlace y no en el <li>. Con el relleno en el <li>, lo
   que se podía tocar era sólo el texto: 18 px de alto en móvil, por debajo del
   mínimo de 44. Ahora el objetivo táctil es la pastilla entera, y estos son los
   enlaces que llevan de una landing a otra. */
.chip-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-size: var(--fs-small);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--teal-600);
  text-decoration: none;
}
.chip-list a:hover { color: var(--teal-cta); }

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(28px, 5vw, 56px) clamp(48px, 7vw, 92px);
  overflow: hidden;
}
/* Hero de sólo texto seguido de contenido denso (tabla de precios) */
.hero--compact { padding-bottom: clamp(24px, 3.5vw, 44px); }
/* En móvil la foto entra entre el mensaje y la acción: da respiro antes del
   CTA y evita un muro de texto. En escritorio ocupa la columna derecha. */
.hero__grid {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  grid-template-areas: "copy" "media" "cta";
}
.hero__copy { grid-area: copy; }
.hero__media { grid-area: media; position: relative; }
.hero__cta { grid-area: cta; }

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.04fr .96fr;
    /* La tercera fila está vacía a propósito: la foto ocupa las tres, y sin
       ella el alto sobrante se repartía entre mensaje y llamado, abriendo un
       hueco en medio de la columna de texto. Aquí se va abajo. */
    grid-template-areas: "copy media" "cta media" ".    media";
    grid-template-rows: auto auto 1fr;
    align-content: start;
  }
  .hero__cta { align-self: start; }
  .hero__media { align-self: center; }
  /* A 4/5 la foto medía ~820 px en una columna de 660 y dejaba un hueco de
     200 px bajo el llamado. Se recorta el retrato, no el mensaje. */
  .hero .panel { aspect-ratio: 1 / 1.06; }
}

.hero h1 { font-size: var(--fs-h1); margin-bottom: var(--sp-2); }

.hero .lead { max-width: 46ch; }
.hero__meta { margin-top: var(--sp-3); }

/* Texto fantasma del kit gráfico: el mismo titular repetido al fondo */
.ghost {
  display: none;
  position: absolute;
  inset-block-start: 4%;
  inset-inline-end: -3%;
  font-family: var(--font-display);
  font-size: clamp(6rem, 22vw, 17rem);
  font-weight: 700;
  line-height: .82;
  color: var(--teal-600);
  opacity: .042;
  letter-spacing: -.045em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
@media (min-width: 900px) { .ghost { display: block; } }
.hero > .container { position: relative; z-index: 1; }

/* Panel turquesa con la persona recortada */
.panel {
  position: relative;
  border-radius: var(--r-2xl);
  background: var(--teal-400);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--sh-3);
}
.panel img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.panel--petroleo { background: var(--teal-600); }
.panel--wide { aspect-ratio: 5 / 4; }
.panel--wide img { object-position: center; }


/* Motivos del kit gráfico. Decorativos y siempre detrás del contenido:
   retícula de puntos, cruz y aspa, en morado y amarillo. */
/* Los motivos vivían con posiciones en % del viewport y, al estrecharse la
   ventana, el canalón se comía y caían encima del eyebrow y de los botones.
   Ahora se anclan al .container: `right:100%` deja la pieza en el borde
   exterior de la caja de texto y el margen la separa todavía más, así que
   por construcción no puede solaparse. Cuando ya no hay canalón —ventana
   más angosta que el contenedor— la pieza se sale y el overflow del campo
   la recorta sola: no hace falta ningún breakpoint. */
.deco-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.deco-field > .container { position: relative; height: 100%; }
/* El ancla es el borde del TEXTO, no el del contenedor: se descuenta el
   padding lateral, que también está vacío por definición. Anclando al borde
   exterior las piezas sólo aparecían a partir de ~1300 px de ventana; así
   entran desde ~1230 px sin acercarse ni un píxel más a la columna. */
/* 34 px de separación mínima. Con menos, la pieza se alinea con el renglón
   más cercano y deja de leerse como fondo: parece una viñeta pegada a la
   línea. Verificable con la prueba de holgura (mínimo 28 px). */
.deco--gL { right: calc(100% - var(--gutter)); margin-right: 34px; }
.deco--gR { left: calc(100% - var(--gutter)); margin-left: 34px; }

.deco { position: absolute; pointer-events: none; z-index: 0; opacity: .9; }
/* Paralaje: el desplazamiento lo escribe main.js en --par (px). Va en una
   variable y no en style.transform para no pisar rotaciones propias de la
   pieza, como la del aspa. */
.deco { transform: translate3d(0, var(--par, 0px), 0); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .deco { transform: none; } }
.deco--dots {
  width: 132px; height: 76px;
  background-image: radial-gradient(var(--purple-300) 1.7px, transparent 1.7px);
  background-size: 15px 15px;
  opacity: .55;
}
.deco--cross {
  width: 34px; height: 34px;
  background:
    linear-gradient(var(--purple-500), var(--purple-500)) center/100% 7px no-repeat,
    linear-gradient(var(--purple-500), var(--purple-500)) center/7px 100% no-repeat;
  border-radius: 2px;
}
.deco--ring { width: 54px; height: 54px; border: 6px solid var(--yellow-500); border-radius: 50%; }
.deco--ring-sm { width: 26px; height: 26px; border: 5px solid var(--purple-300); border-radius: 50%; }
.deco--ring-teal { width: 38px; height: 38px; border: 5px solid var(--teal-300); border-radius: 50%; }
/* Aspa: la "tachita" del kit gráfico */
.deco--x {
  width: 30px; height: 30px;
  background:
    linear-gradient(var(--purple-500), var(--purple-500)) center/100% 6px no-repeat,
    linear-gradient(var(--purple-500), var(--purple-500)) center/6px 100% no-repeat;
  /* Compone con el paralaje: una `transform` propia aquí pisaría por completo
     la de .deco, que va antes en el archivo, y el aspa se quedaría quieta. */
  transform: translate3d(0, var(--par, 0px), 0) rotate(45deg);
  border-radius: 2px;
}
.deco--x-teal { background-image:
    linear-gradient(var(--teal-300), var(--teal-300)),
    linear-gradient(var(--teal-300), var(--teal-300)); }
.deco--dots-teal { background-image: radial-gradient(var(--teal-300) 1.7px, transparent 1.7px); }
/* El blob de 220 px se retiró del sistema: a ese tamaño dejaba de leerse
   como motivo y se convertía en una mancha detrás del texto. La decoración
   son piezas pequeñas —puntos, aros de contorno, aspas—, nunca superficies. */
.section, .hero { position: relative; }
.section > .container, .hero > .container { position: relative; z-index: 1; }

/* Confeti geométrico: nunca sobre la cara ni sobre el texto */
.confetti { position: absolute; pointer-events: none; z-index: 2; }
.confetti--ring {
  width: 62px; height: 62px; border: 7px solid var(--yellow-500);
  border-radius: 50%;
}
.confetti--dot { width: 16px; height: 16px; border-radius: 50%; background: var(--purple-500); }
.confetti--dot-teal { width: 12px; height: 12px; border-radius: 50%; background: var(--teal-400); }

/* Tarjeta flotante de dato sobre el panel */
.float-card {
  display: none;
  position: absolute;
  inset-inline-start: -14px;
  inset-block-end: 22px;
  z-index: 3;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  padding: 14px 20px;
  align-items: center; gap: 12px;
  max-width: min(84%, 300px);
}
.float-card .k {
  font-family: var(--font-text);
  font-weight: 700; font-size: 1.35rem; color: var(--teal-cta);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.float-card .v { font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.3; }
@media (min-width: 900px) { .float-card { display: flex; } }

/* --------------------------------------------------------------------------
   11. Barra de credibilidad y cifras
   -------------------------------------------------------------------------- */
.facts {
  display: grid;
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 620px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--white); padding: 24px 22px; }
.fact .k {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 700; color: var(--teal-cta);
  line-height: 1.15; letter-spacing: -.01em;
  display: block; margin-bottom: 6px; text-wrap: balance;
}
.fact .k.num { font-family: var(--font-text); font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.fact .v { font-size: var(--fs-small); color: var(--text-soft); line-height: 1.4; }

/* --------------------------------------------------------------------------
   12. Pasos numerados
   -------------------------------------------------------------------------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 18px;
  padding: 20px 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.step:first-child { border-top: 0; }
.step__n {
  font-family: var(--font-text);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--teal-cta);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.step h3 { margin-bottom: 6px; }
.step p { font-size: var(--fs-small); color: var(--text-soft); margin: 0; }

@media (min-width: 900px) {
  .steps--grid { grid-template-columns: repeat(2, 1fr); gap: 4px 40px; }
  /* En dos columnas, la primera fila son dos elementos: ninguno lleva regla. */
  .steps--grid > .step:nth-child(2) { border-top: 0; }
}

/* Variante en tarjetas para "lo que sí te llevas" */
.deliver { display: grid; gap: 14px; counter-reset: d; }
@media (min-width: 640px) { .deliver { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .deliver { grid-template-columns: repeat(4, 1fr); } }
/* Con seis pasos, cuatro columnas dejan dos huérfanos en la segunda fila.
   Tres columnas dan dos filas exactas. */
@media (min-width: 1000px) { .deliver--tres { grid-template-columns: repeat(3, 1fr); } }
.deliver > li {
  list-style: none; margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  position: relative;
}
/* El número es la jerarquía del paso: a 13 px se leía como una nota al pie.
   Sube a display y baja de opacidad para no competir con el título. */
.deliver > li::before {
  counter-increment: d;
  content: "0" counter(d);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  line-height: .9;
  letter-spacing: -0.03em;
  color: var(--purple-200);
  display: block;
  margin-bottom: 10px;
}
.deliver h3 { margin-bottom: 6px; }
.deliver p { font-size: var(--fs-small); color: var(--text-soft); margin: 0; }
/* Sobre petróleo, la tarjeta blanca heredaba los tokens de texto claro de la
   sección: título blanco sobre blanco, 1:1. Recibe el mismo trato translúcido
   que .card, que es la convención del sitio en oscuro. El número pasa a
   amarillo porque el lila de marca se apaga contra el petróleo. */
.section--dark .deliver > li {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
}
.section--dark .deliver > li::before { color: var(--yellow-500); }

/* --teal-cta sobre el lila de tarjeta mide 4.46:1, por debajo del 4.5 de AA.
   Este mide 5.46:1 y mantiene el mismo tono. */
.card--lilac { --heading: #0C6E6A; }

/* --------------------------------------------------------------------------
   13. Listas con check y listas de síntomas
   -------------------------------------------------------------------------- */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li {
  position: relative;
  padding-left: 34px;
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.5;
}
.checks li::before {
  content: "";
  position: absolute; left: 0; top: .28em;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--teal-cta);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 14px; background-repeat: no-repeat; background-position: center;
}
.checks--purple li::before { background-color: var(--purple-500); }
.checks--muted li::before {
  background-color: var(--gray-200);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C666C' stroke-width='3.2' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E");
}
@media (min-width: 760px) { .checks--2col { grid-template-columns: repeat(2, 1fr); gap: 12px 32px; } }

/* --------------------------------------------------------------------------
   14. Tablas (HTML real, responsivas por tarjetas en móvil)
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  background: var(--white);
}
table.tbl caption {
  caption-side: top;
  text-align: left;
  font-size: var(--fs-xs);
  color: var(--text-soft);
  padding: 16px 18px 14px;
  background: var(--white);
}
table.tbl th, table.tbl td {
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
table.tbl thead th {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal-600);
  background: var(--teal-50);
  border-bottom: 1px solid var(--teal-100);
  white-space: nowrap;
}
table.tbl tbody th { font-weight: 700; color: var(--teal-600); font-family: var(--font-text); }
table.tbl tbody tr:last-child th, table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl .price { font-weight: 700; color: var(--teal-600); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tbl .pending { color: var(--gray-600); font-style: normal; }

.tbl-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tbl-card > table.tbl { min-width: 100%; }
@media (min-width: 720px) { .tbl-card > table.tbl { min-width: 640px; } }

/* En móvil, cada fila se convierte en tarjeta legible */
@media (max-width: 719px) {
  /* El caption también pasa a bloque: como `table-caption` dentro de un
     `table` que ya es `block`, colapsaba al ancho mínimo y partía el texto
     palabra por palabra. */
  table.tbl, table.tbl tbody, table.tbl tr,
  table.tbl td, table.tbl th, table.tbl caption { display: block; }
  table.tbl caption { width: 100%; }
  table.tbl thead { display: none; }
  table.tbl tbody tr {
    border-bottom: 1px solid var(--line);
    padding: 6px 0 14px;
  }
  table.tbl tbody tr:last-child { border-bottom: 0; }
  table.tbl th, table.tbl td { border: 0; padding: 6px 18px; }
  table.tbl tbody th { padding-top: 16px; font-size: 1.0625rem; }
  table.tbl td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gray-400);
    margin-bottom: 2px;
  }
}

/* Comparativa a dos columnas */
.compare { display: grid; gap: 16px; }
@media (min-width: 760px) { .compare { grid-template-columns: repeat(2, 1fr); } }
.compare__col {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 26px 28px;
  background: var(--white);
}
.compare__col--a { background: var(--teal-50); border-color: var(--teal-100); }
.compare__col h3 { margin-bottom: 14px; }
.compare__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.compare__col li {
  margin: 0; padding-left: 20px; position: relative;
  font-size: var(--fs-small); line-height: 1.5; color: var(--text-soft);
}
.compare__col li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 2px; border-radius: 2px; background: var(--teal-300);
}
.compare__col--a li::before { background: var(--teal-400); }

/* --------------------------------------------------------------------------
   15. FAQ — details/summary nativo, accesible y sin JS
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 12px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.faq details[open] { background: var(--teal-50); border-color: var(--teal-100); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--teal-600);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--teal-50);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320B9B8' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
  background-size: 15px; background-repeat: no-repeat; background-position: center;
  transition: transform .25s var(--ease), background-color .2s var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
  background-color: var(--teal-cta);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}
.faq .answer { padding: 0 22px 22px; }
.faq .answer p { font-size: var(--fs-small); color: var(--text-soft); max-width: 68ch; }

/* --------------------------------------------------------------------------
   16. Bloque de cierre (CTA final)
   -------------------------------------------------------------------------- */
.closer {
  position: relative;
  border-radius: var(--r-2xl);
  background: var(--teal-600);
  color: #DDEEF0;
  padding: clamp(36px, 6vw, 72px) clamp(24px, 5vw, 64px);
  overflow: hidden;
}
/* Misma razón que el blob: donde había un círculo enorme ahora hay una
   retícula de puntos que da textura sin competir con el titular. */
.closer::before {
  content: "";
  position: absolute;
  inset-block-start: 26px;
  inset-inline-end: 26px;
  width: 168px;
  height: 104px;
  background-image: radial-gradient(rgba(255, 255, 255, .34) 1.8px, transparent 1.8px);
  background-size: 16px 16px;
}
.closer::after {
  content: "";
  position: absolute;
  inset-block-end: -34px;
  inset-inline-start: -30px;
  width: 128px;
  height: 128px;
  border: 12px solid var(--teal-400);
  border-radius: 50%;
  opacity: .3;
}
.closer > * { position: relative; z-index: 1; }
.closer h2 { color: #fff; max-width: 18ch; }
.closer { --teal-aqua: #fff; }
.closer p:not(.eyebrow) { color: #B7D4D8; max-width: 52ch; }
/* El bloque de cierre es una superficie oscura dentro de una sección clara:
   hereda el mismo trato que .section--dark para no perder contraste. */
.closer .price-chip {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .2);
  color: #DDEEF0;
}
.closer .price-chip b { color: #fff; }
/* El botón principal iba en teal sobre el petróleo del cierre: 1.93:1 de
   separación entre botón y fondo, o sea verde sobre verde. En amarillo son
   7.08:1, y el texto en petróleo sobre ese amarillo otros 7.08:1. El amarillo
   ya vive dentro del bloque —es el color del acento del titular—, así que no
   entra nada nuevo a la paleta. */
.closer .btn--primary {
  --btn-bg: var(--yellow-500);
  --btn-fg: var(--teal-600);
  box-shadow: 0 12px 30px rgba(233, 227, 58, .22);
}
.closer .btn--primary:hover {
  background: #F2ED55;
  box-shadow: 0 16px 36px rgba(233, 227, 58, .3);
}
.closer .btn--ghost { --btn-fg: #fff; border-color: rgba(255,255,255,.42); }
.closer .btn--ghost:hover { --btn-bg: rgba(255,255,255,.12); border-color: #fff; }

/* --------------------------------------------------------------------------
   17. Encabezado
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 4px 18px rgba(16,76,86,.05); }
.header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding-block: 10px;
}
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.brand img { width: auto; height: 34px; }
@media (min-width: 900px) { .brand img { height: 40px; } }

.nav { display: none; }
@media (min-width: 1150px) {
  .nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
}
.nav a {
  padding: 10px 13px;
  white-space: nowrap;
  border-radius: var(--r-chip);
  font-size: .9375rem;
  /* Display en vez de texto: la navegación es interfaz, no cuerpo de lectura.
     Además Montserrat 600 pesaba 37 KB y en todo el sitio lo usaban seis
     cadenas —los cuatro enlaces del menú, el salto de contenido y la línea
     de especialidad de la doctora—. Figtree 700 ya viene descargada. */
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--teal-600);
  text-decoration: none;
  transition: background-color .18s var(--ease);
}
.nav a:hover { background: var(--teal-50); }
.nav a[aria-current="page"] { background: var(--teal-50); color: var(--teal-cta); }

.header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
@media (min-width: 1150px) { .header__actions { margin-left: 0; } }

.tel-link {
  display: none;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--teal-600);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  padding: 8px 10px;
  border-radius: var(--r-chip);
}
.tel-link:hover { background: var(--teal-50); color: var(--teal-600); }
@media (min-width: 720px) { .tel-link { display: inline-flex; } }

.header .btn { display: none; white-space: nowrap; }
@media (min-width: 720px) { .header .btn { display: inline-flex; } }
/* Entre 1150 y 1320 px el teléfono, el menú y el botón no caben a la vez. */
@media (min-width: 1150px) and (max-width: 1319px) { .tel-link { display: none; } }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--teal-600);
  cursor: pointer;
  padding: 0;
}
@media (min-width: 1150px) { .burger { display: none; } }

/* Menú móvil */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #fff;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .32s var(--ease), visibility .32s;
  overscroll-behavior: contain;
}
.drawer.is-open { transform: translateY(0); visibility: visible; }
.drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gutter);
  min-height: 68px;
  border-bottom: 1px solid var(--line);
}
.drawer__body { padding: 22px var(--gutter) 40px; overflow-y: auto; }
.drawer nav { display: grid; gap: 2px; margin-bottom: 24px; }
.drawer nav a {
  padding: 14px 4px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--teal-600);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.drawer nav a[aria-current="page"] { color: var(--teal-400); }
.drawer .btn { width: 100%; }
.drawer__foot { margin-top: 20px; display: grid; gap: 10px; }

body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   18. Barra de acción móvil (el mecanismo de conversión en el pulgar)
   -------------------------------------------------------------------------- */
.actionbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.actionbar .btn {
  min-height: 48px;
  padding: 10px 12px;
  font-size: .9375rem;
  box-shadow: none;
  white-space: nowrap;   /* una línea siempre: es lo que mantiene baja la barra */
  gap: 8px;
}
.actionbar .btn svg { flex: none; }
@media (min-width: 900px) { .actionbar { display: none; } }
@media (max-width: 899px) { body { padding-bottom: 78px; } }

/* Botón flotante de WhatsApp en escritorio */
.wa-float {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 100;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 14px 17px;
  border-radius: var(--r-btn);
  background: var(--wa);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(21,128,61,.3);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.wa-float:hover { transform: translateY(-3px); background: var(--wa-dark); color: #fff; }
@media (min-width: 900px) { .wa-float { display: inline-flex; } }

/* --------------------------------------------------------------------------
   19. Centrado en móvil

   El bloque de mensaje —etiqueta, titular, entrada y llamado— se centra:
   en una columna de 390 px es donde mejor se lee y donde el CTA gana peso.
   El contenido estructurado (listas, pasos, tablas, tarjetas, preguntas) se
   queda alineado a la izquierda: centrar un párrafo de cuatro líneas obliga
   al ojo a buscar el inicio de cada renglón y se lee peor, no mejor.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero__copy,
  .hero__cta,
  .section-head,
  .closer,
  .grid > div:has(> .eyebrow) { text-align: center; }

  .hero__copy .lead,
  .hero__copy p,
  .section-head p,
  .closer p,
  .grid > div:has(> .eyebrow) > p { margin-inline: auto; }

  /* El titular se centra; los párrafos de cuerpo no. Centrar tres párrafos
     seguidos obliga al ojo a buscar el inicio de cada renglón. */
  .grid > div:has(> .eyebrow) > p:not(.eyebrow):not(.lead) { text-align: left; }

  .btn-row { justify-content: center; }
  .price-chip,
  .badge,
  .updated,
  .eyebrow { margin-inline: auto; }

  .meta-row { align-items: center; text-align: center; }
  .meta-row > span { padding-left: 0; }
  .meta-row > span::before { display: none; }

  /* Nada de esto se centra: la estructura manda sobre la simetría. */
  .checks, .checks li,
  .steps, .step,
  .deliver, .deliver > li,
  .chip-list,
  .compare, .compare__col,
  .card,
  .router-card,
  .svc,
  .tbl-card, table.tbl,
  .faq, .faq summary, .faq .answer,
  .facts, .fact { text-align: left; }

  .card .btn-row,
  .card .price-chip { margin-inline: 0; }
  .card .btn-row { justify-content: flex-start; }
  .card__ico, .router-card .ico { margin-inline: 0; }

  /* Los motivos viven en el margen: en una columna de 390 px no hay margen,
     así que caían encima del texto. En móvil el ritmo lo dan las bandas de
     color, no la decoración. */
  .deco { display: none; }

  /* En una columna, el panel de foto queda arriba del texto y con el ancho
     de la caja; centrarlo y limitarlo evita que se lea como una banda que
     corta la pantalla en dos. */
  .panel, .panel--wide, .doc {
    margin-inline: auto;
    max-width: 420px;
  }
  .doc__cap { text-align: center; }

  /* El bloque morado se centra completo: son cuatro tarjetas de dos líneas,
     no párrafos largos. */
  .section--purple .card { text-align: center; }
  .section--purple .card p { margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   20. Migas
   -------------------------------------------------------------------------- */
.crumbs {
  font-size: var(--fs-xs);
  color: var(--text-soft);
  padding-block: 14px 0;
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.crumbs li { margin: 0; display: flex; align-items: center; gap: 6px; }
.crumbs li + li::before { content: "/"; color: var(--gray-400); }
.crumbs a { color: var(--text-soft); text-decoration: none; }
.crumbs a:hover { color: var(--teal-500); text-decoration: underline; }

/* --------------------------------------------------------------------------
   21. Pie
   -------------------------------------------------------------------------- */
.footer {
  background: var(--teal-600);
  color: #A8C7CC;
  padding-block: clamp(48px, 7vw, 80px) 28px;
  font-size: var(--fs-small);
}
.footer a { color: #D7E8EA; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; gap: 36px; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; } }
@media (min-width: 1060px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }
.footer h3 {
  color: #fff;
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-family: var(--font-text);
  font-weight: 700;
  margin-bottom: 16px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer li { margin: 0; }
.footer .pendiente { color: #9BBCC2; }
.footer img.logo { height: 40px; width: auto; margin-bottom: 18px; }
.footer p:not(.eyebrow) { color: #A8C7CC; max-width: 34ch; }
.footer__legal {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: var(--fs-xs);
  color: #A8C7CC;
}

@media (max-width: 759px) {
  .footer { text-align: center; }
  .footer__grid { justify-items: center; }
  .footer p { margin-inline: auto; }
  .footer img.logo { margin-inline: auto; }
  .footer h3 { margin-bottom: 12px; }
  .footer__legal { justify-content: center; text-align: center; gap: 10px; margin-top: 32px; }
}

/* --------------------------------------------------------------------------
   22. Utilidades
   -------------------------------------------------------------------------- */
.center { text-align: center; }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mb-0 { margin-bottom: 0; }
.flow > * + * { margin-top: var(--sp-2); }
.wrap-narrow { max-width: 760px; }
/* Variante centrada para los bloques de declaración a ancho completo: con el
   texto pegado a la izquierda, el vacío de la derecha pesa más que la frase. */
.wrap-narrow--centro { margin-inline: auto; text-align: center; }
.wrap-narrow--centro .eyebrow { justify-content: center; }
.wrap-narrow--centro p { margin-inline: auto; }
.updated {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); color: var(--text-soft);
}
.updated::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-400);
}

/* Revelado al hacer scroll */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .btn:hover, a.svc:hover, .router-card:hover, .wa-float:hover { transform: none; }
}

@media print {
  .header, .actionbar, .wa-float, .drawer { display: none !important; }
  body { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Retrato de especialista
   Imagen (o marco de marca mientras no exista foto real) a un lado y el
   nombre inmediatamente debajo, dentro de la misma figura, para que nombre y
   rostro se lean como una sola pieza.
   -------------------------------------------------------------------------- */
.doc { margin: 0; position: relative; max-width: 380px; }
/* La columna del retrato pesa menos que la del texto: a mitad y mitad el
   marco crecía hasta 670 px de alto y se comía la sección. */
@media (min-width: 700px) {
  .doc-grid { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
}
.doc__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  /* El degradado queda debajo de la foto: es lo que se ve mientras carga,
     y evita el destello blanco de un hueco vacío. */
  background-color: var(--teal-600);
  background-image:
    radial-gradient(rgba(255, 255, 255, .3) 1.8px, transparent 1.8px),
    linear-gradient(150deg, var(--teal-500), var(--teal-600));
  background-size: 20px 20px, cover;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.doc__frame img { width: 100%; height: 100%; object-fit: cover; }
/* La ficha se monta al pie del marco y comparte su ancho y su radio: como
   tarjeta flotante dejaba asomar el marco por los costados y parecía un
   error de montaje. */
.doc__cap {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  box-shadow: var(--sh-1);
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.doc__nombre {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3-card);
  color: var(--teal-cta);
  line-height: 1.3;
}
.doc__esp {
  font-size: var(--fs-small);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--purple-600);
}

/* Crédito de agencia en el pie */
.footer__credit a { color: #EAF7F7; text-decoration: underline; text-underline-offset: 3px; }
.footer__credit a:hover { color: #fff; }

/* Redes en el pie. Sin fondo ni cápsula: son dos enlaces, no dos botones.
   Va calificado con .footer porque `.footer ul` tiene especificidad (0,1,1) y
   le ganaba a `.redes` (0,1,0): los enlaces salían apilados en vez de en fila. */
.footer .redes {
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.footer .redes li { margin: 0; }
.footer .redes a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  color: #CFE3E6;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  transition: color .18s var(--ease);
}
.footer .redes a:hover { color: #fff; }
@media (max-width: 767px) { .footer .redes { justify-content: center; } }

/* --------------------------------------------------------------------------
   Reseñas
   -------------------------------------------------------------------------- */
/* Mampostería con columnas CSS: las reseñas van de una línea a ocho y en una
   rejilla de filas iguales las cortas quedan flotando dentro de una caja
   vacía. Con columns cada tarjeta ocupa su alto real.
   Esto SÓLO compensa con muchas reseñas. Con tres, las columnas se reparten
   una por columna y el bloque queda desalineado: para ese caso está
   .resenas--fila, que vuelve a una rejilla de alturas iguales. */
.resenas { columns: 1; column-gap: var(--sp-3); }
@media (min-width: 700px)  { .resenas { columns: 2; } }
@media (min-width: 1000px) { .resenas { columns: 3; } }

.resena {
  break-inside: avoid;          /* que ninguna tarjeta se parta entre columnas */
  -webkit-column-break-inside: avoid;
  margin: 0 0 var(--sp-3);
  display: inline-block;        /* Safari necesita esto para respetar el break */
  width: 100%;
}
.resena p { color: var(--text); }
.resena__estrellas {
  display: block;
  color: var(--yellow-600);
  font-size: 1.05rem;
  letter-spacing: .12em;
  line-height: 1;
}

/* Calificación del perfil, bajo el titular de la sección */
/* Tres reseñas destacadas: rejilla normal, no mampostería. Las tarjetas se
   estiran a la misma altura y la fila queda a ras. */
.resenas--fila { columns: auto; display: grid; gap: var(--sp-3); }
@media (min-width: 700px)  { .resenas--fila { grid-template-columns: repeat(3, 1fr); } }
.resenas--fila .resena { display: flex; flex-direction: column; margin: 0; }
.resenas--fila .resena footer { margin-top: auto; padding-top: var(--sp-2); }

.rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--text-soft);
}
.rating__estrellas { color: var(--yellow-600); letter-spacing: .1em; }
.rating strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--teal-cta); }
.rating a { color: var(--teal-cta); text-decoration: underline; text-underline-offset: 3px; }
.rating a:hover { color: var(--teal-600); }

/* ======================================================================
   PÁGINA LEGAL
   El aviso de privacidad es el único documento del sitio que se lee de
   arriba abajo como texto corrido y largo. No comparte retícula con nada
   más, así que sus estilos se encierran en .legal en vez de ensuciar el
   espacio global con tres utilidades que sólo usaría una página.
   La medida se fija en ch y no en píxeles: lo que cansa al leer no es el
   ancho de la caja sino cuántos caracteres hay por renglón, y 68 es el
   techo cómodo para un texto que nadie lee por gusto.
   ====================================================================== */
.legal { max-width: 68ch; margin-inline: auto; }
.legal h2 {
  margin: 48px 0 12px;
  font-size: var(--fs-h3);
  scroll-margin-top: 90px;
}
.legal h3 { margin: 28px 0 10px; font-size: var(--fs-h3-card); }
.legal p { margin: 0 0 14px; }
.legal ul {
  margin: 0 0 18px;
  padding-left: 20px;
  display: grid;
  gap: 9px;
}
.legal li::marker { color: var(--teal-500); }
.legal a { color: var(--teal-cta); text-underline-offset: 2px; }
.legal a:hover { color: var(--teal-700); }

/* El sello de borrador. Amarillo y no rojo: no es un error del sitio, es
   un documento a medio terminar, y quien lo ve es el equipo, no un
   paciente —mientras esté incompleto la página va con noindex. */
.legal__borrador {
  margin: 28px 0;
  padding: 16px 18px;
  border-left: 4px solid var(--yellow-500);
  border-radius: var(--r-sm);
  background: var(--yellow-100);
}
.legal__borrador p { margin: 0; font-size: var(--fs-small); }