/* ═══ 10-hero.css ═══ */
/* ============================================================================
   HERO
   Estructura de capas: cada pieza tiene un envoltorio con la ENTRADA (CSS
   @keyframes, duración finita, fill-mode backwards/both → el estado final es el
   estilo base, visible aunque no llegue ningún script) y un hijo `-mov` para
   lo continuo (parallax de ratón por transform, flotación por translate/rotate,
   scrub del scroll sobre el envoltorio una vez terminada la entrada).

   La retícula usa áreas con nombre porque el ORDEN VISUAL CAMBIA:
     escritorio → texto a la izquierda, composición a la derecha
     móvil      → composición (la gente) arriba del todo, y debajo el texto
   El marcado no cambia: el h1 sigue siendo el primer encabezado del documento.
   ========================================================================== */
/* Ancla del «saltar al contenido» de la barra (la portada no tiene un <main>
   propio). No ocupa sitio ni se ve; sólo recibe el foco para que el teclado y
   el lector de pantalla continúen desde el principio del contenido. */
.hero-ancla { display: block; width: 0; height: 0; }
.hero-ancla:focus { outline: none; }

.hero {
  position: relative; overflow: clip; isolation: isolate;
  display: flex; flex-direction: column; min-height: 100svh;
  padding-top: calc(var(--alto-nav) + 20px);
  background: var(--papel);
}
.hero-marco {
  flex: 1;
  display: grid; align-content: center;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "pildora comp"
    "texto   comp";
  column-gap: clamp(1rem, 3vw, 3.25rem);
  align-items: center;
  padding-block: 1.25rem 0;
}

/* ── Columna de texto ────────────────────────────────────────────────────── */
.hero-pildora { grid-area: pildora; justify-self: start; align-self: end; margin-bottom: 1.15rem; animation: hero-sube .5s var(--e-salida) .3s both; }
.hero-texto { grid-area: texto; position: relative; z-index: 3; align-self: start; max-width: 620px; }
.hero-titulo { font-size: clamp(2.5rem, 1rem + 5.2vw, 4.75rem); line-height: 1; letter-spacing: -.022em; }
/* `white-space: nowrap` es lo que impide que una unidad de dos palabras («a
   las») se parta al llegar al borde: al navegador sólo le queda partir ENTRE
   unidades, nunca dentro de una. El salto de línea sigue siendo del todo
   normal; sólo se le quitan las preposiciones sueltas como punto de corte. */
.palabra { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; padding: .04em .05em .14em; margin: -.04em -.05em -.14em; }
.palabra > span { display: inline-block; animation: hero-palabra .85s var(--e-salida) calc(.38s + var(--i, 0) * .055s) both; }

/* Acento de marca: una sola palabra del titular, en degradado turquesa, con un
   subrayado que se dibuja justo al terminar de aparecer. Nace ya trazado al
   0 %: si el CSS llega sin el JS de movimiento, el trazo se ve completo desde
   el primer fotograma con `animation-fill-mode: both` (ninguna dependencia de
   scroll ni de JavaScript). */
.palabra--acento > span {
  background: linear-gradient(100deg, var(--turquesa-800) 15%, var(--turquesa) 55%, var(--turquesa-600) 85%);
  background-clip: text; -webkit-background-clip: text; color: transparent;
}
.palabra--acento { position: relative; }
.palabra--acento::after {
  content: ''; position: absolute; left: .05em; right: .05em; bottom: .1em; height: .06em;
  border-radius: 2px; background: linear-gradient(90deg, var(--turquesa-800), var(--turquesa));
  transform: scaleX(0); transform-origin: left center;
  animation: hero-subrayado .5s var(--e-salida) calc(.38s + var(--i, 4) * .055s + .55s) both;
}
.hero-subtitulo {
  margin-top: 1.5rem; max-width: 50ch; font-size: var(--t-grande); line-height: 1.55; color: var(--tinta-2);
  animation: hero-sube .6s var(--e-salida) .7s both;
}
.hero-botones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero-boton { animation: hero-sube .5s var(--e-salida) .75s both; }
.hero-boton:nth-child(2) { animation-delay: .82s; }

/* ── Composición ─────────────────────────────────────────────────────────
   La foto está EN FLUJO y es la que da altura; todo lo demás se posiciona
   contra ella en porcentajes. Así la composición se adapta sola a los dos
   encuadres (3:2 en escritorio, vertical en el teléfono). */
.hero-comp {
  grid-area: comp; position: relative; z-index: 1; align-self: center;
  width: calc(100% + var(--margen));   /* muerde el margen derecho: doce personas necesitan sitio */
}

/* La foto del equipo: imagen LCP.
   El recorte tiene alfa, así que el grupo se apoya directamente sobre la forma
   turquesa. La última franja se desvanece con una máscara estática para que los
   doce no terminen en una silueta recortada de pies y sillas: se funden con la
   forma, como en la referencia. La máscara no anima nada y no toca la opacidad
   calculada del elemento (la sonda de visibilidad lo sigue viendo entero). */
.hero-equipo { position: relative; z-index: 3; margin: 0 -3% -1%; animation: hero-equipo .95s var(--e-salida) .35s backwards; }
.hero-equipo-mov { will-change: transform; }
.hero-equipo-img {
  width: 100%; height: auto; object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 30px 38px rgba(9, 22, 38, .17));
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, rgba(0, 0, 0, .38) 92%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 80%, rgba(0, 0, 0, .38) 92%, transparent 99%);
}
.img-pendiente.hero-equipo-img { border-radius: var(--r-xl); -webkit-mask-image: none; mask-image: none; }

/* Suelo: elipse difusa bajo el grupo. Da peso y remata el desvanecido. */
.hero-suelo {
  position: absolute; left: 6%; right: 6%; bottom: 1%; height: 12%; z-index: 2; pointer-events: none;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(23, 96, 94, .30), transparent 78%);
  filter: blur(14px);
  animation: hero-fundido 1s ease-out .6s backwards;
}

/* Tipografía gigante de fondo, cortada por el borde derecho */
.hero-fondo {
  position: absolute; right: -22%; top: -34%; z-index: 0; pointer-events: none;
  font-family: var(--f-titulo); font-weight: 700; font-size: clamp(180px, 21vw, 330px); line-height: .85; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(9, 22, 38, .09);
  animation: hero-fondo 1.4s var(--e-salida) .2s backwards;
}
.hero-fondo-mov { display: block; will-change: transform; }

/* Resplandores: dos capas difusas (blur estático) que sólo se mueven por transform */
.hero-resplandor {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  filter: blur(60px); will-change: transform;
  animation: hero-fundido 1.2s ease-out .1s backwards, hero-deriva-a 6s ease-in-out infinite;
}
.hero-resplandor--a { width: 56%; aspect-ratio: 1; top: -28%; right: -4%; background: radial-gradient(closest-side, rgba(86, 184, 171, .55), transparent 72%); }
.hero-resplandor--b { width: 46%; aspect-ratio: 1; bottom: -14%; left: -10%; background: radial-gradient(closest-side, rgba(165, 208, 208, .7), transparent 72%); animation-name: hero-fundido, hero-deriva-b; animation-duration: 1.2s, 7s; }

/* Forma orgánica «el abrazo»: ancha y abierta, sostiene a las doce personas.
   Sobresale por arriba (aparece sobre las cabezas) y sobre todo por abajo, para
   que el grupo se APOYE en ella en vez de flotar sobre nada. */
.hero-forma { position: absolute; inset: -15% -9% -7% -9%; z-index: 1; pointer-events: none; animation: hero-forma 1.4s var(--e-salida) .2s backwards; }
.hero-forma-mov { width: 100%; height: 100%; will-change: transform; }
.hero-forma-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 36px 44px rgba(35, 127, 124, .16)); }

/* El punto del isotipo, como disco flotante: cae en el valle entre los lóbulos */
.hero-disco { position: absolute; left: 51%; top: -4%; width: 4.6%; z-index: 2; pointer-events: none; animation: hero-pop .6s var(--e-rebote) 1s backwards; }
.hero-disco-mov {
  display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle at 34% 30%, #fff 0%, #DDF0EC 30%, #56B8AB 100%);
  box-shadow: inset 0 1px 0 #fff, 0 12px 26px -8px rgba(35, 127, 124, .55);
}

/* Tarjetas de vidrio: la entrada es sólo escala (sin opacidad), en el envoltorio */
.hero-tarjeta-pos { position: absolute; z-index: 4; animation: hero-pop .6s var(--e-rebote) .72s backwards; }
.hero-tarjeta-pos--1 { left: -6%; top: 34%; }
.hero-tarjeta-pos--2 { right: -3%; top: 58%; animation-delay: .84s; }
.hero-tarjeta-pos--3 { left: 8%; bottom: 0; animation-delay: .96s; }
.hero-tarjeta-pos--4 { left: 20%; top: -7%; animation-delay: 1.08s; }
.hero-tarjeta {
  display: flex; flex-direction: column; gap: 2px; min-width: 150px;
  padding: 14px 22px 14px 18px; border-radius: 22px;
}
.hero-tarjeta--icono { flex-direction: row; align-items: center; gap: 12px; padding: 12px 20px 12px 12px; }
.hero-cifra { font-family: var(--f-titulo); font-weight: 600; font-size: 2.1rem; line-height: 1; letter-spacing: -.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.hero-dato { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--turquesa-900); }
/* `min-width: min-content` garantiza que la caja nunca sea más estrecha que la
   palabra más larga: con `max-width: 8ch` «LABORATORIO» pedía 109 px, tenía 70
   y se cortaba contra el borde de la tarjeta. Así aguanta cualquier texto que
   escriba el cliente sin volver a partirse. */
.hero-dato--solo { font-size: 13px; line-height: 1.2; max-width: 13ch; min-width: min-content; }
.hero-icono { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--turquesa-100); color: var(--turquesa-800); }
.hero-icono svg { width: 22px; height: 22px; }

/* Insignia circular giratoria */
.hero-insignia { position: absolute; right: 4%; top: -22%; width: 122px; aspect-ratio: 1; z-index: 5; animation: hero-insignia .8s var(--e-rebote) 1.15s backwards; }
.hero-insignia-mov { position: relative; width: 100%; height: 100%; will-change: transform; }
.hero-anillo { width: 100%; height: 100%; animation: hero-girar 18s linear infinite; }
.hero-anillo text { font-family: var(--f-cuerpo); font-size: 8.7px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; fill: var(--navy); }
.hero-insignia:hover .hero-anillo { animation-duration: 6s; }
.hero-insignia-centro {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid var(--linea);
  box-shadow: inset 0 1px 0 #fff, 0 8px 20px -8px rgba(9, 22, 38, .25);
}
.hero-insignia-iso { height: 29px; width: auto; }
.img-pendiente.hero-insignia-iso { width: 29px; border-radius: 8px; }

/* Franja inferior */
.hero-cinta {
  margin-top: auto; padding-block: 15px; border-top: 1px solid var(--linea); background: var(--papel-2);
  font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-2);
}

/* ── Coreografía de entrada (sólo transform y opacity, duración finita) ──── */
@keyframes hero-sube { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes hero-palabra { from { transform: translate3d(0, 112%, 0); } to { transform: none; } }
@keyframes hero-subrayado { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hero-fundido { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-forma { from { opacity: 0; transform: translate3d(0, 42px, 0) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes hero-fondo { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: none; } }
@keyframes hero-equipo { from { opacity: 0; transform: translate3d(0, 48px, 0); } to { opacity: 1; transform: none; } }
@keyframes hero-pop { from { transform: scale(.4); } to { transform: none; } }
@keyframes hero-insignia { from { opacity: 0; transform: scale(0) rotate(-90deg); } to { opacity: 1; transform: none; } }
@keyframes hero-girar { to { transform: rotate(360deg); } }
/* La deriva usa translate/scale (propiedades individuales): el parallax de ratón escribe transform y no se pisan */
@keyframes hero-deriva-a { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 0 12px; scale: 1.05; } }
@keyframes hero-deriva-b { 0%, 100% { translate: 0 0; } 50% { translate: -10px -16px; } }

/* ── Móvil: primero LA GENTE ─────────────────────────────────────────────
   Orden en pantalla: barra → composición (foto del equipo sobre la forma
   turquesa, con las tarjetas y la insignia) → píldora «Cuenca · Desde 1983»
   → h1 → subtítulo → botones → cinta. Se consigue sólo con las áreas de la
   retícula: el marcado no cambia y el h1 sigue siendo el primer encabezado
   del documento. Lo primero que se ve bajo la barra son doce caras. */
@media (max-width: 899px) {
  .hero { min-height: auto; padding-top: calc(var(--alto-nav) + 14px); }
  .hero-marco {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "comp" "pildora" "texto";
    row-gap: 0; padding-block: .5rem 0;
  }

  /* La composición se lleva todo el ancho de la ventana; la FOTO no. El grupo
     va metido hacia dentro para que la forma turquesa se vea alrededor (es lo
     que convierte la foto en una composición) y para que ninguna cara quede
     pegada al borde. Debajo queda una franja de forma donde flotan la insignia
     y la tarjeta del laboratorio, sin taparle la cara a nadie. */
  .hero-comp { width: calc(100% + 2 * var(--margen)); margin-inline: calc(var(--margen) * -1); padding-bottom: 4.1rem; }
  /* Los dos encuadres se cortan en vertical por los lados (en los dos hay
     alguien pegado al borde del archivo). Como aquí la foto ya no llega al
     borde de la pantalla, ese corte quedaría a la vista: una máscara lateral
     de pocos píxeles deshace la línea recta sin llegar a ninguna cara. */
  .hero-equipo {
    margin: 0 auto; width: 94%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
  }
  .hero-equipo-img {
    margin-inline: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, rgba(0, 0, 0, .4) 93%, transparent 99%);
    mask-image: linear-gradient(to bottom, #000 82%, rgba(0, 0, 0, .4) 93%, transparent 99%);
  }
  .hero-suelo { left: 12%; right: 12%; bottom: 3.5rem; height: 9%; }
  .hero-forma { inset: 7% -7% 0 -7%; }
  .hero-resplandor--a { width: 74%; top: -4%; right: -14%; }
  .hero-resplandor--b { width: 66%; bottom: 0; left: -18%; }
  .hero-fondo { font-size: 40vw; right: -16%; top: -7%; }
  .hero-disco { left: 50%; top: 3%; width: 5.2%; }

  /* La píldora cierra la composición, centrada bajo la base turquesa */
  .hero-pildora {
    grid-area: pildora; justify-self: center; align-self: start;
    position: relative; z-index: 6; margin: .55rem 0 0;
    background: #fff; box-shadow: inset 0 1px 0 #fff, var(--sombra-2);
  }

  .hero-texto { margin-top: 1.5rem; }
  .hero-titulo { font-size: clamp(2.3rem, 1.15rem + 6.6vw, 3.4rem); }
  .hero-subtitulo { margin-top: 1.1rem; }
  .hero-botones { margin-top: 1.5rem; }
  .hero-boton { width: 100%; }

  /* Tarjetas: SIEMPRE a la altura de las batas, nunca sobre una cara. En el
     recorte de móvil las caras ocupan hasta el 50 % de la altura de la foto;
     por eso las dos tarjetas con contador empiezan por debajo de esa línea y
     la tercera baja a la franja de forma que queda bajo la foto. Son más
     opacas que en escritorio: una de ellas se apoya sobre el turquesa oscuro
     de la base y el texto tiene que leerse igual de bien. */
  .hero-tarjeta { min-width: 98px; padding: 8px 12px 8px 11px; border-radius: 15px; background: rgba(255, 255, 255, .95); }
  .hero-tarjeta--icono { padding: 7px 12px 7px 7px; gap: 8px; }
  .hero-cifra { font-size: 1.35rem; }
  .hero-dato { font-size: 9px; letter-spacing: .05em; }
  .hero-dato--solo { font-size: 9.5px; max-width: 13ch; }
  .hero-icono { width: 26px; height: 26px; }
  .hero-icono svg { width: 15px; height: 15px; }
  .hero-tarjeta-pos--1 { left: 3%; top: 50%; }
  .hero-tarjeta-pos--2 { right: 3%; top: 62%; }
  /* Laboratorio y farmacia van apiladas en la misma esquina, a tamaño
     completo (igual que las otras dos tarjetas): apilarlas deja sitio de
     sobra para crecer sin pisar ni la insignia ni ponerse encima de nadie. */
  .hero-tarjeta-pos--3 { left: 4%; bottom: 3.6rem; }
  .hero-tarjeta-pos--4 { left: 4%; right: auto; top: auto; bottom: .75rem; }
  /* La insignia baja a la base turquesa: allí el texto del anillo va en blanco
     (es decorativo, pero tiene que verse) y no le tapa la cara a nadie. */
  .hero-insignia { width: 66px; right: 13%; bottom: .05rem; top: auto; }
  .hero-anillo text { fill: #fff; font-size: 8.2px; }
  .hero-insignia-centro { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .hero-insignia-iso, .img-pendiente.hero-insignia-iso { height: 20px; width: auto; }
  .hero-cinta { padding-block: 12px; font-size: 12px; }
}

/* ── Teléfono estrecho (≤ 640 px): entra el encuadre cerrado ──────────────
   Por debajo de 640 px el <picture> sirve `equipo-hero-movil`, un recorte casi
   cuadrado con diez caras grandes. Es más alto que ancho en proporción, así
   que necesita su propia relación de aspecto, un tope de altura para que la
   gente no empuje el titular fuera de la pantalla, y algo más de margen
   lateral, porque en ese recorte hay alguien pegado a cada borde. */
@media (max-width: 640px) {
  .hero-equipo {
    width: 87%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
  }
  .hero-equipo-img { aspect-ratio: var(--rel-movil, 3 / 4); max-height: 46svh; }
}

/* ── Tabletas y teléfono apaisado (641–899 px) ────────────────────────────
   Aquí ya cabe el grupo completo en horizontal, pero la retícula sigue siendo
   la de móvil: la gente arriba y el texto debajo. */
@media (min-width: 641px) and (max-width: 899px) {
  .hero-comp { padding-bottom: 4.6rem; }
  .hero-equipo-img { max-height: 54svh; }
  .hero-forma { inset: -4% -7% 0 -7%; }
  .hero-tarjeta { min-width: 128px; padding: 11px 16px 11px 14px; }
  .hero-cifra { font-size: 1.7rem; }
  .hero-dato { font-size: 11px; }
  .hero-dato--solo { font-size: 11.5px; }
  .hero-icono { width: 34px; height: 34px; }
  .hero-icono svg { width: 19px; height: 19px; }
  .hero-tarjeta-pos--1 { left: 4%; top: 54%; }
  .hero-tarjeta-pos--2 { right: 4%; top: 66%; }
  .hero-insignia { width: 84px; right: 16%; }
  .hero-insignia-centro { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .hero-insignia-iso, .img-pendiente.hero-insignia-iso { height: 25px; width: auto; }
  .hero-titulo { font-size: clamp(2.6rem, 1rem + 5.2vw, 3.9rem); }
  .hero-boton { width: auto; }
}

@media (min-width: 900px) and (max-width: 1140px) {
  .hero-titulo { font-size: clamp(2.4rem, 1rem + 4.4vw, 4rem); }
  .hero-fondo { font-size: 24vw; }
  .hero-insignia { width: 100px; }
  .hero-tarjeta { min-width: 128px; padding: 11px 16px 11px 14px; }
  .hero-cifra { font-size: 1.7rem; }
  .hero-dato { font-size: 11px; }
}

/* ── Portátiles bajos (escritorio con poca altura) ────────────────────────
   Con menos de 780 px de alto, el titular a tamaño completo empujaba los dos
   botones por debajo de la cinta. Aquí se encoge la columna de texto —no la
   composición— para que la llamada a la acción entre en la primera pantalla. */
@media (min-width: 900px) and (max-height: 780px) {
  .hero { padding-top: calc(var(--alto-nav) + 8px); }
  .hero-marco { padding-block: .5rem 0; }
  .hero-pildora { margin-bottom: .8rem; }
  .hero-titulo { font-size: clamp(2.1rem, .4rem + 3.2vw, 3.5rem); }
  .hero-subtitulo { margin-top: 1.05rem; font-size: 1rem; }
  .hero-botones { margin-top: 1.35rem; }
  .hero-insignia { width: 92px; top: -14%; }
  .hero-fondo { font-size: clamp(150px, 17vw, 250px); }
}


/* ═══ 20-confianza.css ═══ */
/* ============================================================================
   20 · FRANJA DE CONFIANZA — cuatro cifras, líneas finas, sin gritar.
   ========================================================================== */
.confianza {
  position: relative;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--papel);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.confianza__lista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.confianza__celda {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  padding: .75rem 1rem;
  text-align: center;
}
.confianza__celda + .confianza__celda { border-left: 1px solid var(--linea-2); }
.confianza__cifra {
  font-family: var(--f-titulo);
  font-weight: 500;
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.confianza__cifra::after {                 /* punto turquesa: la firma de la casa */
  content: ''; display: inline-block; width: .22em; height: .22em; margin-left: .12em;
  border-radius: 50%; background: var(--turquesa); vertical-align: baseline;
}
.confianza__texto {
  font-size: var(--t-mini);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mudo);
}

/* Laboratorio y farmacia no son una cifra que crezca: son un servicio propio,
   así que llevan un ícono donde las demás celdas llevan un número. */
.confianza__icono {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-bottom: .15rem;
  border-radius: 50%; color: var(--turquesa-800); background: var(--turquesa-100);
}
.confianza__icono svg { width: 1.2rem; height: 1.2rem; }

@media (max-width: 760px) {
  .confianza { padding-block: 1rem; }
  .confianza__lista { grid-template-columns: repeat(2, 1fr); }
  .confianza__celda { padding: 1rem .5rem; }
  .confianza__celda:nth-child(odd) { border-left: 0; }
  .confianza__celda:nth-child(n + 3) { border-top: 1px solid var(--linea-2); }
  .confianza__texto { letter-spacing: .08em; font-size: .68rem; }
}


/* ═══ 21-router.css ═══ */
/* ============================================================================
   21 · ROUTER «¿Con qué llegas hoy?» — chips apilados + vista previa del chat.
   Estado sin JS: radio :checked ~ … muestra el panel y marca el chip.
   ========================================================================== */
.router__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

/* ── Chips (labels) ────────────────────────────────────────────────────────── */
.router__opciones { display: grid; gap: .6rem; }
.router__chip {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem;
  min-height: 64px; padding: .9rem 1.1rem .9rem .9rem;
  border-radius: var(--r-m);
  background: #fff;
  border: 1px solid var(--linea-2);
  box-shadow: inset 0 1px 0 #fff, var(--sombra-1);
  font-weight: 600; font-size: .98rem; line-height: 1.3; color: var(--navy);
  cursor: pointer; user-select: none;
  transition: transform var(--d-rapido) var(--e-salida), box-shadow var(--d-rapido) var(--e-salida),
              background-color var(--d-rapido), border-color var(--d-rapido), color var(--d-rapido);
}
.router__chip:hover { transform: translateX(4px); border-color: var(--turquesa-300); box-shadow: var(--sombra-2); }
.router__chip-indice {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font-family: var(--f-titulo); font-weight: 500; font-size: .95rem;
  color: var(--turquesa-900); background: var(--turquesa-100);
  transition: background-color var(--d-rapido), color var(--d-rapido), transform var(--d-rapido) var(--e-rebote);
}
.router__chip-flecha { display: inline-flex; color: var(--turquesa-800); opacity: .55; transition: transform var(--d-rapido) var(--e-salida), opacity var(--d-rapido); }
.router__chip-flecha svg { width: 20px; height: 20px; }
.router__chip:hover .router__chip-flecha { transform: translateX(3px); opacity: 1; }
.router__chip--orientacion { border-style: dashed; border-color: var(--turquesa-300); }

/* Estado activo: turquesa profundo, texto blanco (contraste ≥ 4.5) */
#ruta-general:checked ~ .router__opciones [for="ruta-general"],
#ruta-gineco:checked ~ .router__opciones [for="ruta-gineco"],
#ruta-lab:checked ~ .router__opciones [for="ruta-lab"],
#ruta-especialidad:checked ~ .router__opciones [for="ruta-especialidad"],
#ruta-estetica:checked ~ .router__opciones [for="ruta-estetica"],
#ruta-orientacion:checked ~ .router__opciones [for="ruta-orientacion"] {
  color: #fff;
  background: linear-gradient(135deg, var(--turquesa-800), #1D6B68);
  border-color: transparent; border-style: solid;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--sombra-turquesa);
  transform: translateX(6px);
}
.router__chip.es-activo { color: #fff; background: linear-gradient(135deg, var(--turquesa-800), #1D6B68); border-color: transparent; border-style: solid; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--sombra-turquesa); transform: translateX(6px); }
#ruta-general:checked ~ .router__opciones [for="ruta-general"] .router__chip-indice,
#ruta-gineco:checked ~ .router__opciones [for="ruta-gineco"] .router__chip-indice,
#ruta-lab:checked ~ .router__opciones [for="ruta-lab"] .router__chip-indice,
#ruta-especialidad:checked ~ .router__opciones [for="ruta-especialidad"] .router__chip-indice,
#ruta-estetica:checked ~ .router__opciones [for="ruta-estetica"] .router__chip-indice,
#ruta-orientacion:checked ~ .router__opciones [for="ruta-orientacion"] .router__chip-indice,
.router__chip.es-activo .router__chip-indice { color: var(--turquesa-900); background: #fff; transform: scale(1.08); }
#ruta-general:checked ~ .router__opciones [for="ruta-general"] .router__chip-flecha,
#ruta-gineco:checked ~ .router__opciones [for="ruta-gineco"] .router__chip-flecha,
#ruta-lab:checked ~ .router__opciones [for="ruta-lab"] .router__chip-flecha,
#ruta-especialidad:checked ~ .router__opciones [for="ruta-especialidad"] .router__chip-flecha,
#ruta-estetica:checked ~ .router__opciones [for="ruta-estetica"] .router__chip-flecha,
#ruta-orientacion:checked ~ .router__opciones [for="ruta-orientacion"] .router__chip-flecha,
.router__chip.es-activo .router__chip-flecha { color: #fff; opacity: 1; transform: translateX(3px); }

/* Foco de teclado: el radio está oculto, el anillo lo lleva el chip */
.router__radio:focus { outline: 3px solid var(--turquesa-800); outline-offset: 2px; }
#ruta-general:focus-visible ~ .router__opciones [for="ruta-general"],
#ruta-gineco:focus-visible ~ .router__opciones [for="ruta-gineco"],
#ruta-lab:focus-visible ~ .router__opciones [for="ruta-lab"],
#ruta-especialidad:focus-visible ~ .router__opciones [for="ruta-especialidad"],
#ruta-estetica:focus-visible ~ .router__opciones [for="ruta-estetica"],
#ruta-orientacion:focus-visible ~ .router__opciones [for="ruta-orientacion"] {
  outline: 3px solid var(--turquesa-800); outline-offset: 3px;
}

/* Nota bajo la última opción */
.router__nota {
  display: flex; align-items: flex-start; gap: .7rem;
  margin-top: .4rem; padding: .9rem 1rem;
  border-radius: var(--r-m);
  background: var(--turquesa-50);
  border: 1px solid var(--turquesa-200);
  font-size: var(--t-peq); line-height: 1.5; color: var(--turquesa-900);
}
.router__nota svg { width: 22px; height: 22px; flex: none; color: var(--turquesa-800); }
.router__nota .contraste { font-size: 1.1em; }

/* ── Vista previa: paneles ──────────────────────────────────────────────────── */
.router__vista { position: sticky; top: calc(var(--alto-nav) + 1.5rem); }
.router__panel { display: none; }
#ruta-general:checked ~ .router__vista [data-panel="general"],
#ruta-gineco:checked ~ .router__vista [data-panel="gineco"],
#ruta-lab:checked ~ .router__vista [data-panel="lab"],
#ruta-especialidad:checked ~ .router__vista [data-panel="especialidad"],
#ruta-estetica:checked ~ .router__vista [data-panel="estetica"],
#ruta-orientacion:checked ~ .router__vista [data-panel="orientacion"] { display: block; }

/* Ventana de chat: fondo papel-2 (empapelado), burbuja blanca con cola */
.router__chat {
  position: relative; overflow: hidden;
  border-radius: var(--r-l);
  background:
    radial-gradient(circle at 12% 18%, rgba(86, 184, 171, .10) 0 3px, transparent 4px) 0 0 / 46px 46px,
    radial-gradient(circle at 70% 62%, rgba(9, 22, 38, .05) 0 2px, transparent 3px) 0 0 / 58px 58px,
    var(--papel-3);
  border: 1px solid var(--linea-2);
  box-shadow: var(--sombra-2);
}
.router__chat-cab {
  display: flex; align-items: center; gap: .8rem;
  padding: .9rem 1.1rem;
  background: rgba(255, 255, 255, .78);
  border-bottom: 1px solid var(--linea);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.router__chat-avatar {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none;
  color: #fff; background: linear-gradient(135deg, var(--turquesa-800), #1D6B68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.router__chat-avatar svg { width: 22px; height: 22px; }
.router__chat-quien { display: grid; line-height: 1.25; }
.router__chat-quien strong { font-size: .95rem; color: var(--navy); }
.router__chat-quien span { font-size: var(--t-mini); color: var(--mudo); }

.router__burbuja {
  position: relative;
  margin: 1.5rem 1.1rem 1.5rem 2.6rem;
  padding: 1rem 1.1rem 1.35rem 1.2rem;
  border-radius: 20px 20px 4px 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(9, 22, 38, .08), 0 12px 28px -14px rgba(9, 22, 38, .28);
  transform-origin: bottom right;
}
.router__burbuja::after {                 /* cola de la burbuja */
  content: ''; position: absolute; right: -9px; bottom: 0;
  width: 0; height: 0;
  border-left: 12px solid #fff; border-top: 12px solid transparent;
}
.router__burbuja-texto {
  font-family: var(--f-cuerpo); font-size: 1.02rem; line-height: 1.55; color: var(--tinta);
}
.router__burbuja-hora {
  position: absolute; right: 1rem; bottom: .45rem;
  font-size: .68rem; font-weight: 500; color: var(--mudo);
}
.router__burbuja.es-nueva { animation: burbuja-entra 250ms var(--e-salida) both; }
@keyframes burbuja-entra {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Chips de especialidad dentro del panel */
.router__especialidades { margin-top: 1.1rem; }
.router__especialidades-titulo { font-size: var(--t-peq); font-weight: 600; color: var(--tinta-2); margin-bottom: .6rem; }
.router__especialidades-lista { display: flex; flex-wrap: wrap; gap: .45rem; }
.router__esp {
  display: inline-flex; align-items: center; min-height: 36px; padding: .35em .85em;
  border-radius: var(--r-pill);
  font-size: var(--t-peq); font-weight: 600; color: var(--turquesa-900);
  background: #fff; border: 1px solid var(--turquesa-200);
  transition: transform var(--d-rapido) var(--e-salida), background-color var(--d-rapido), color var(--d-rapido), border-color var(--d-rapido);
}
.router__esp:hover { transform: translateY(-2px); border-color: var(--turquesa); background: var(--turquesa-50); }
.router__esp.es-activo { color: #fff; background: var(--turquesa-800); border-color: var(--turquesa-800); }

.router__enviar { margin-top: 1.1rem; width: 100%; }

/* ── Móvil: opciones arriba, burbuja debajo, todo a ancho completo ─────────── */
@media (max-width: 860px) {
  .router__cuerpo { grid-template-columns: 1fr; gap: 1.5rem; }
  .router__vista { position: static; }
  .router__chip { min-height: 58px; font-size: .93rem; padding: .8rem .9rem .8rem .8rem; }
  .router__chip:hover { transform: none; }
  .router__burbuja { margin: 1.25rem .9rem 1.25rem 1.8rem; }
}


/* ═══ 22-especialidades.css ═══ */
/* ============================================================================
   22 · ESPECIALIDADES — leyenda de modalidades + retícula de 14 tarjetas con
   borde de un píxel en degradado e imagen recortada en forma orgánica.
   ========================================================================== */

/* ── Leyenda ──────────────────────────────────────────────────────────────── */
.esp-leyenda {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .75rem 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: 1.1rem 1.4rem;
  border-radius: var(--r-l);
  background: #fff; border: 1px solid var(--linea);
  box-shadow: var(--sombra-1);
}
.esp-leyenda__titulo { font-size: var(--t-mini); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mudo); }
.esp-leyenda__lista { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.esp-leyenda__item { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--t-peq); color: var(--tinta-2); }
.esp-leyenda__aclaracion {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: .6rem;
  padding-top: .9rem; border-top: 1px solid var(--linea);
  font-size: var(--t-peq); line-height: 1.55; color: var(--tinta-2);
}
.esp-leyenda__aclaracion svg { width: 20px; height: 20px; flex: none; color: var(--turquesa-800); margin-top: .1em; }

/* ── Retícula ─────────────────────────────────────────────────────────────── */
.esp-reticula {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.4rem);
}
@media (max-width: 1100px) { .esp-reticula { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .esp-reticula { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; } }

/* ── Tarjeta ──────────────────────────────────────────────────────────────── */
.esp-tarjeta {
  display: flex; flex-direction: column;
  padding: 1rem 1rem 1.1rem;
  box-shadow: var(--sombra-1);
  transition: transform var(--d-medio) var(--e-salida), box-shadow var(--d-medio) var(--e-salida);
  will-change: transform;
}
.esp-tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.esp-tarjeta:target { outline: 3px solid var(--turquesa-300); outline-offset: 4px; }

.esp-tarjeta__media { position: relative; margin-bottom: 1rem; }
.esp-tarjeta__media::before {                /* sombra de color detrás de la forma */
  content: ''; position: absolute; inset: 8% -2% -4% 6%; z-index: 0;
  border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%;
  background: linear-gradient(150deg, var(--turquesa-100), var(--turquesa-50) 70%, transparent);
}
.esp-tarjeta__forma {
  position: relative; z-index: 1; overflow: hidden; isolation: isolate;
  aspect-ratio: 1; background: var(--turquesa-50);
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  transform: translateZ(0);
}
.esp-tarjeta__forma > * { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform var(--d-lento) var(--e-salida); }
.esp-tarjeta:hover .esp-tarjeta__forma > * { transform: scale(1.04); }
/* Cada tarjeta, una forma: la retícula no parece un catálogo */
.esp-tarjeta:nth-child(7n + 2) .esp-tarjeta__forma { border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%; }
.esp-tarjeta:nth-child(7n + 3) .esp-tarjeta__forma { border-radius: 55% 45% 60% 40% / 45% 55% 45% 55%; }
.esp-tarjeta:nth-child(7n + 4) .esp-tarjeta__forma { border-radius: 40% 60% 50% 50% / 55% 40% 60% 45%; }
.esp-tarjeta:nth-child(7n + 5) .esp-tarjeta__forma { border-radius: 58% 42% 45% 55% / 42% 58% 42% 58%; }
.esp-tarjeta:nth-child(7n + 6) .esp-tarjeta__forma { border-radius: 48% 52% 62% 38% / 52% 48% 52% 48%; }
.esp-tarjeta:nth-child(7n + 7) .esp-tarjeta__forma { border-radius: 62% 38% 48% 52% / 38% 62% 38% 62%; }
.esp-tarjeta__icono {
  position: absolute; left: 4%; bottom: 2%; z-index: 2;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  color: var(--turquesa-800); background: #fff;
  box-shadow: 0 0 0 1px var(--turquesa-200), 0 8px 18px -8px rgba(9, 22, 38, .3);
}
.esp-tarjeta__icono svg { width: 24px; height: 24px; }

.esp-tarjeta__cuerpo { display: flex; flex-direction: column; flex: 1; gap: .35rem; }
.esp-tarjeta__marca { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mudo); }
.esp-tarjeta__nombre { font-size: 1.22rem; font-weight: 500; line-height: 1.15; }
.esp-tarjeta__que { font-size: var(--t-peq); line-height: 1.5; color: var(--tinta-2); }
.esp-tarjeta__pro { font-size: .8rem; font-weight: 600; line-height: 1.45; color: var(--turquesa-900); }
.esp-tarjeta__sep { color: var(--turquesa); }
.esp-tarjeta__pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem;
  margin-top: auto; padding-top: .8rem;
}
.esp-tarjeta__accion { font-size: var(--t-peq); white-space: nowrap; }
.esp-tarjeta__accion .flecha { display: inline-block; transition: transform var(--d-rapido) var(--e-salida); }
.esp-tarjeta__accion:hover .flecha { transform: translateX(3px); }

/* ── Móvil: dos columnas compactas ────────────────────────────────────────── */
@media (max-width: 700px) {
  .esp-leyenda { grid-template-columns: 1fr; gap: .6rem; padding: 1rem; }
  .esp-leyenda__lista { flex-direction: column; gap: .5rem; }
  .esp-tarjeta { padding: .7rem .7rem .85rem; border-radius: var(--r-m); }
  .esp-tarjeta:hover { transform: none; }
  .esp-tarjeta__media { margin-bottom: .7rem; }
  .esp-tarjeta__icono { width: 36px; height: 36px; }
  .esp-tarjeta__icono svg { width: 19px; height: 19px; }
  .esp-tarjeta__nombre { font-size: 1rem; }
  .esp-tarjeta__que { font-size: .76rem; }
  .esp-tarjeta__pro { font-size: .72rem; }
  .esp-tarjeta__pie { flex-direction: column; align-items: flex-start; gap: .45rem; padding-top: .6rem; }
  .esp-tarjeta__accion { font-size: .8rem; }
  .esp-tarjeta__accion, .esp-tarjeta .etiqueta { white-space: normal; }
}