/* ============================================================
   COMS · modelo 4 — "De la noche al despertar"
   Lo distintivo: el fondo es un cielo que va del anochecer al amanecer
   mientras bajás (de las 23:00 a las 07:00).
   Las secciones flotan como paneles sobre ese cielo. Títulos en serif.
   Componentes: fotos grandes de fondo que pasan de a una, tarjetas que se dan vuelta,
   carrusel 3D, círculos que se cruzan, autoevaluación de señales, pasos
   que avanzan solos, un celular con las herramientas, galería con visor
   y buscador de preguntas.
   ============================================================ */
:root {
  --bg: #e2f1ef; --bg-2: #d3e9e5; --surface: #f3f9f8;
  --text: #003b36; --text-2: #446863; --line: rgba(0, 59, 54, .12);
  --accent: #12b7a9; --accent-2: #63c7bb; --accent-ink: #006a60; --on-accent: #00221e;
  --dark: #003530; --dark-2: #0f453f; --dark-text: #e6f6f3; --dark-text-2: #90b6b0; --dark-line: rgba(164, 230, 220, .13);
  --nav-bg: #003530; --nav-line: rgba(164, 230, 220, .12); --nav-hover: rgba(255, 255, 255, .08);
  --f-display: var(--f-serif); --d-weight: 400; --d-stretch: 100%; --d-case: none; --d-track: -.025em; --d-lh: .95;
  --r: 22px; --r-sm: 14px;
  --art-bg: #09403b; --art-fg: #12b7a9;
  --pn-gap: clamp(10px, 1.2vw, 16px);
  --pn-r: clamp(24px, 3vw, 44px);
}
body { background: transparent; }
.d { font-size: clamp(50px, 7vw, 120px); }
.d em, .em { color: var(--accent-ink); }
.pre__brand { font-size: clamp(80px, 15vw, 240px); }
.giant { --giant: 30vw; letter-spacing: -.04em; }
.pn--dark, .hero4, .menu, .foot, .pre, .cf__card, .lb { --accent: #12b7a9; --accent-2: #81e5d8; --on-accent: #00221e; }
.pn--dark, .hero4 { --bg: var(--dark); --text: var(--dark-text); --text-2: var(--dark-text-2); --line: var(--dark-line); --surface: var(--dark-2); --bg-2: rgba(255, 255, 255, .07); }
.pn--dark .d em, .pn--dark .em { color: #77d4c8; }
.prog { background: linear-gradient(90deg, #12b7a9, #77d4c8); }

/* ---------- el cielo ---------- */
.sky4 { position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--sky-a, #00312d), var(--sky-b, #09403b)); }
.sky4__stars { position: absolute; inset: 0; opacity: var(--stars, 1); background-image: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 72%, #fff, transparent), radial-gradient(1.4px 1.4px at 46% 36%, #fff, transparent), radial-gradient(1px 1px at 63% 12%, #fff, transparent), radial-gradient(1.2px 1.2px at 78% 58%, #fff, transparent), radial-gradient(1px 1px at 88% 28%, #fff, transparent), radial-gradient(1px 1px at 8% 88%, #fff, transparent), radial-gradient(1.3px 1.3px at 54% 90%, #fff, transparent), radial-gradient(1px 1px at 36% 8%, #fff, transparent), radial-gradient(1px 1px at 94% 82%, #fff, transparent); background-size: 520px 520px; }

/* nav en vidrio oscuro */
.nav { --text: #e6f6f3; --text-2: rgba(230, 246, 243, .72); --bg: #003530; box-shadow: 0 10px 40px rgba(0, 36, 31, .25); }
.nav .btn--p { --ico-bg: #12b7a9; --ico-fg: #00221e; --fill: #12b7a9; }
.nav .btn--p:hover { color: #00221e; }
.brand__s { color: rgba(230, 246, 243, .6); }
.brand__n { font-family: var(--f-sans); font-weight: 700; font-stretch: 100%; text-transform: uppercase; letter-spacing: .04em; font-size: 19px; }
.iso-marca .iso-sombra { fill: #9fe2db; }
.iso-marca .iso-blanco { fill: #fff; }
.brand__mk { width: 46px; height: 46px; border-radius: 50%; background: #12b7a9; border: 1px solid #12b7a9; display: grid; place-items: center; flex: none; }
.brand__mk svg { width: 32px; height: auto; }

/* ---------- paneles que flotan sobre el cielo ---------- */
.pn { margin: var(--pn-gap); border-radius: var(--pn-r); overflow: clip; }
.pn--light { background: var(--bg); }
/* sin desenfoque de lo que queda detrás: con el panel casi opaco no se notaba y le costaba mucho a la placa de video */
.pn--dark { background: rgba(0, 53, 48, .94); color: var(--dark-text); border: 1px solid rgba(164, 230, 220, .08); }
/* el panel que sigue a la portada tapa el final de la foto: tiene que ser opaco para que no se transparente */
.hero4 + .pn--dark { background: #003530; }

/* ---------- portada ---------- */
.hero4 { position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: center; padding: 130px 0 90px; overflow: hidden; color: var(--dark-text); }
/* las fotos grandes, de a una: ocupan todo lo que deja libre el texto y se funden apenas en los bordes con una
   máscara, sin ningún velo encima, así se ven nítidas. Pasan fundiéndose, con un zoom lento */
.slides { position: absolute; z-index: -2; overflow: hidden; background: #09403b; }
/* cada foto entra nítida y fundiéndose sobre la anterior, que recién se va cuando la nueva ya está entera: así nunca
   se transparenta el fondo (--f: el tono de la foto según el modo) */
.slides img { --f: saturate(1) brightness(.96); position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); filter: var(--f); transition: opacity .3s linear .8s, transform 8s linear; }
.slides img.is-on { z-index: 1; opacity: 1; transform: scale(1); transition: opacity .8s var(--ease), transform 8s linear; }
.hero4__in { position: relative; }
.tag { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 30px; padding: 9px 16px 9px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dark-text-2); }
.tag__dot { width: 8px; height: 8px; border-radius: 50%; background: #12b7a9; animation: latido 2.6s infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(18, 183, 169, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(18, 183, 169, 0); } }
.hero4__title { margin: 0; max-width: 12ch; font-family: var(--f-serif); font-weight: 400; letter-spacing: -.03em; line-height: .9; font-size: clamp(62px, 7.4vw, 132px); }
.hero4__l1, .hero4__l2 { display: block; }
.hero4__l2 { color: #77d4c8; }
.hero4__l2 em { font-style: italic; }
.hero4__lead { margin: 18px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--text-2); }
.hero4__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.hero4__down { position: absolute; left: 50%; bottom: 26px; width: 30px; height: 50px; margin-left: -15px; border-radius: 20px; border: 1.5px solid rgba(255, 255, 255, .4); }
.hero4__down span { position: absolute; left: 50%; top: 10px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: rueda 1.8s var(--ease) infinite; }
@keyframes rueda { 0% { transform: translateY(0); opacity: 1; } 80%, 100% { transform: translateY(16px); opacity: 0; } }

/* ---------- los dos atajos que más se buscan: pedir turno y subir estudios. Cada uno tiene su ícono (el calendario
   y la flecha que sube) y su color, iguales en la portada, la barra de arriba, el menú y la barra de abajo del celular,
   así se reconocen enseguida ---------- */
.act {
  --act-bg: var(--accent); --act-fg: var(--on-accent); --act-i-bg: var(--dark); --act-i-fg: #77d4c8;
  --act-glow: rgba(0, 20, 18, .28);
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  min-height: 66px; padding: 8px 24px 8px 8px; border-radius: 999px; background: var(--act-bg); color: var(--act-fg);
  box-shadow: 0 16px 34px -14px var(--act-glow); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.act:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -14px var(--act-glow); }
.act:active { transform: scale(.97); }
.act__i { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--act-i-bg); color: var(--act-i-fg); transition: transform .5s var(--ease); }
.act__i svg { width: 22px; height: 22px; }
.act:hover .act__i { transform: scale(1.08) rotate(-6deg); }
.act__t { display: flex; flex-direction: column; gap: 3px; line-height: 1.15; }
.act__t strong { font-size: 15px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.act__t small { font-size: 12px; font-weight: 500; opacity: .75; white-space: nowrap; }
.act__go { flex: none; margin-left: auto; transition: transform .45s var(--ease); }
.act:hover .act__go { transform: translateX(4px); }
/* subir estudios va en el color opuesto al fondo: claro sobre la noche, verde oscuro sobre el día */
.act--est { --act-bg: var(--text); --act-fg: var(--bg); --act-i-bg: var(--accent); --act-i-fg: var(--on-accent); --act-glow: rgba(0, 36, 31, .4); }
.menu .act--est { --act-bg: var(--dark-text); --act-fg: var(--dark); }
/* en el menú, WhatsApp va con borde nomás, para que los dos atajos se destaquen */
.menu__foot .btn--l { background: transparent; color: var(--dark-text); border: 1px solid var(--dark-line); }
.menu__foot .btn--l:hover { color: var(--dark); }
/* la versión chica, para la barra de arriba */
.act--sm { gap: 10px; min-height: 48px; padding: 5px 18px 5px 5px; box-shadow: none; }
.act--sm:hover { transform: translateY(-2px); box-shadow: none; }
.act--sm .act__i { width: 38px; height: 38px; }
.act--sm .act__i svg { width: 18px; height: 18px; }
.act--sm .act__t strong { font-size: 13.5px; }
.nav .act--turno { --act-i-bg: rgba(255, 255, 255, .32); --act-i-fg: #00221e; }
@media (min-width: 901px) { .nav__cta { display: flex; gap: 8px; } }
/* cuestionario y diario de sueño, junto a los dos botones principales: en el mismo lugar, pero más discretos */
.atajo { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background .3s, transform .4s var(--ease); }
.atajo:hover { background: color-mix(in srgb, var(--text) 14%, transparent); transform: translateY(-2px); }
.atajo svg { display: none; flex: none; width: 18px; height: 18px; }
.nav__cta .atajo { min-height: 48px; padding: 0 14px; }
.hero4__atajos { display: grid; grid-template-columns: auto auto; gap: 8px; width: fit-content; margin-top: 8px; }
.menu__atajos { --text: var(--dark-text); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.menu__atajos .atajo { min-height: 52px; }
/* con cuatro botones, los links de secciones solo entran en pantallas grandes; si no, pasan al menú */
@media (min-width: 901px) and (max-width: 1319px) {
  .nav__links { display: none; }
  .burger { display: block; }
  .nav .nav__links + .tema { margin-left: auto; }
  .tema ~ .burger { margin-left: 0; }
  .nav { gap: 8px; padding-left: 16px; }
  .brand__s { display: none; }
}
@media (min-width: 901px) and (max-width: 1040px) {
  .nav__cta .act--sm .act__i { display: none; }
  .nav__cta .act--sm { padding: 0 14px; }
}
@media (min-width: 1320px) and (max-width: 1699px) {
  .nav { gap: 8px; padding-left: 16px; }
  .brand { gap: 8px; }
  .brand__s { display: none; }
  .nav__links { gap: 0; }
  .nav__links a { padding-left: 7px; padding-right: 7px; font-size: 13.5px; }
  .nav__cta { gap: 6px; }
  .nav__cta .atajo { padding: 0 12px; font-size: 13px; }
  .nav__cta .act--sm { padding-right: 13px; gap: 7px; }
  .nav__cta .act--sm .act__t strong { font-size: 13px; }
}
/* la barra de abajo del celular: subir estudios en claro y pedir turno en verde, los dos con su ícono */
.dock a { gap: 7px; }
.dock svg { flex: none; width: 18px; height: 18px; }
.dock .dock__est { background: var(--dark-text); color: var(--dark); }
@media (max-width: 359px) { .dock svg { display: none; } }

/* ---------- manifiesto: texto fijo y fotos que suben ---------- */
.split__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.split__txt { position: sticky; top: 140px; padding: 30px 0; }
.split__q { margin: 0; font-family: var(--f-serif); font-size: clamp(36px, 4.4vw, 76px); line-height: 1.04; letter-spacing: -.02em; }
.split__q em { font-style: italic; color: var(--accent-ink); }
.js .split__q .fw { opacity: .14; }
.split__q .fw { display: inline-block; }
.split .sign { text-align: left; }
.split__pics { position: relative; min-height: 1100px; }
.split__ph { position: absolute; margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: 0 30px 70px rgba(0, 53, 48, .2); }
.split__ph img { width: 100%; height: 100%; object-fit: cover; }
.split__ph--1 { width: 70%; aspect-ratio: 3 / 4; right: 0; top: 0; }
.split__ph--2 { width: 52%; aspect-ratio: 4 / 5; left: 0; top: 38%; z-index: 1; }
.split__ph--3 { width: 60%; aspect-ratio: 4 / 3; right: 4%; top: 70%; }

/* ---------- equipo ---------- */
/* las seis iguales, como una galería de retratos. Las fotos tienen la luz y el tono de piel emparejados en el archivo, para que se vean de una misma serie */
.eq-g .d em { display: block; }
/* --n por fila; si la última fila queda incompleta, se centra */
.eq { --n: 4; --gap: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 26px var(--gap); }
.eq article { flex: 0 0 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n)); min-width: 0; }
.eq__b { display: block; width: 100%; text-align: left; color: inherit; }
.eq__foto { position: relative; display: block; aspect-ratio: 1 / 1; margin-bottom: 11px; overflow: hidden; border-radius: 4px; background: var(--surface); }
.eq__foto img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 4%; transition: transform 1s var(--ease); }
.eq__mas { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(9, 64, 59, .18); transition: transform .5s var(--ease); }
.eq__mas::before, .eq__mas::after { content: ""; position: absolute; left: 30%; right: 30%; top: 50%; height: 1.5px; margin-top: -.75px; background: #09403b; }
.eq__mas::after { transform: rotate(90deg); }
.eq__n { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.eq__r { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.3; color: var(--text-2); }
.eq__a { font-size: 10.5px; font-weight: 600; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: #77d4c8; }
.eq__b:focus-visible .eq__foto img { transform: scale(1.04); }
.eq__ola { display: none; }
@media (hover: hover) {
  .eq article:hover .eq__foto img { transform: scale(1.04); }
  button.eq__b:hover .eq__mas { transform: rotate(90deg); }
}
/* en la compu, el título a la izquierda y las dos filas de tres a la derecha, sin pasarse de una pantalla */
@media (min-width: 1181px) {
  .eq-g { display: flex; gap: clamp(32px, 4vw, 72px); }
  .eq-g .sh { flex: 1 1 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: clamp(18px, 1.8vw, 28px); min-width: 0; margin: 0; }
  .eq-g .sh .lead { margin-bottom: 0; }
  .eq-g .d { font-size: clamp(44px, 4.6vw, 76px); }
  .eq { flex: 0 0 min(72%, calc(4 * max(190px, (100svh - 240px) / 2) + 36px)); align-self: flex-start; }
  /* y hasta el final de las fotos, una respiración tranquila: dos líneas que se deslizan despacio. Solo mueven una capa
     ya dibujada (transform), sin repintar ni usar JS, y se pausan cuando la sección no está a la vista */
  .eq__ola { position: relative; display: block; flex: 1 1 0; min-height: 30px; max-height: 150px; max-width: 540px; margin-top: auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
  .eq__ola svg { position: absolute; inset: 0 auto 0 0; width: 200%; max-width: none; height: 100%; overflow: visible; will-change: transform; animation: ola 10s linear infinite; }
  .eq__ola svg + svg { opacity: .4; animation-duration: 16s; animation-direction: reverse; }
  .eq__ola path { fill: none; stroke: var(--accent); stroke-width: 1.75px; vector-effect: non-scaling-stroke; }
}
@keyframes ola { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .eq__ola svg { animation: none; } }
/* la ventana del perfil */
.perfil { width: min(860px, calc(100% - 28px)); max-height: calc(100dvh - 28px); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: calc(var(--r) + 6px); background: var(--surface); color: var(--text); box-shadow: 0 40px 90px rgba(0, 36, 31, .45); }
.perfil[open] { display: flex; animation: lbIn .5s var(--ease); }
.perfil::backdrop { background: rgba(0, 40, 36, .72); }
.perfil__f { display: block; flex: 0 0 44%; width: 44%; height: auto; min-width: 0; min-height: 0; max-height: calc(100dvh - 28px); object-fit: cover; }
.perfil__t { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 3vw, 40px); min-width: 0; min-height: 0; max-height: calc(100dvh - 28px); overflow-y: auto; overscroll-behavior: contain; }
.perfil__n { margin: 8px 44px 0 0; font-family: var(--f-serif); font-weight: 400; font-size: clamp(32px, 3.2vw, 44px); line-height: 1.02; letter-spacing: -.02em; }
.perfil__r { margin: 12px 0 0; font-size: 15.5px; line-height: 1.45; }
.perfil__l { align-self: stretch; list-style: none; margin: 16px 0 18px; padding: 0; border-top: 1px solid var(--line); }
.perfil__l li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.4; color: var(--text-2); }
.perfil__l strong { color: var(--text); font-weight: 600; }
.perfil__a { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.perfil__ig { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--text-2); transition: color .3s; }
.perfil__ig:hover { color: var(--text); }
.perfil__x { position: absolute; z-index: 2; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); transition: transform .5s var(--ease); }
.perfil__x:hover { transform: rotate(90deg); }
.perfil__x span { position: absolute; left: 11px; right: 11px; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--text); transform: rotate(45deg); }
.perfil__x span + span { transform: rotate(-45deg); }
.pn--dark .nums .tile { background: rgba(255, 255, 255, .04); }

/* trayectoria: se iluminan los antecedentes de cada médica */
.tr { margin-top: clamp(64px, 8vw, 110px); }
.tr__bar { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.tr__t { margin: 0; font-family: var(--f-serif); font-size: clamp(36px, 4vw, 64px); line-height: .95; letter-spacing: -.02em; }
.tr__who { display: flex; flex-wrap: wrap; gap: 8px; }
.tr__who button { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 6px; border-radius: 999px; border: 1px solid var(--dark-line); font-size: 14px; font-weight: 500; color: var(--dark-text-2); transition: background .35s, color .35s, border-color .35s; }
.tr__who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.tr__who button:hover, .tr__who button[aria-pressed="true"] { background: var(--dark-text); color: var(--dark); border-color: var(--dark-text); }
.tr__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tr__cat { margin: 0 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #77d4c8; }
.tr__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tr__col li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 18px; border-radius: 16px; background: rgba(255, 255, 255, .045); border: 1px solid var(--dark-line); transition: opacity .45s, transform .6s var(--ease), border-color .4s, background .4s; }
.tr__col li strong { font-size: 15.5px; font-weight: 600; line-height: 1.3; padding-right: 70px; }
.tr__col li span { font-size: 13.5px; line-height: 1.45; color: var(--dark-text-2); }
.tr__col li em { position: absolute; top: 16px; right: 16px; display: flex; gap: 4px; }
.tr__col abbr { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(18, 183, 169, .18); color: #aaefe5; font-size: 9.5px; font-weight: 600; text-decoration: none; cursor: default; }
.tr.has-hl li.is-dim { opacity: .22; transform: scale(.98); }
.tr.has-hl li:not(.is-dim) { border-color: rgba(18, 183, 169, .6); background: rgba(18, 183, 169, .1); }

/* ---------- especialidades: carrusel 3D ---------- */
.cf { position: relative; overflow: hidden; padding: 10px 0 0; }
.cf__stage { position: relative; height: 640px; perspective: 1800px; touch-action: pan-y; user-select: none; }
.cf__card { --w: min(470px, 82vw); position: absolute; left: 50%; top: 0; width: var(--w); height: 100%; margin-left: calc(var(--w) / -2); display: flex; flex-direction: column; border-radius: 30px; overflow: hidden; background: var(--dark); color: var(--dark-text); box-shadow: 0 30px 70px rgba(0, 53, 48, .3); transition: transform .9s var(--ease), opacity .6s, filter .6s; cursor: pointer; will-change: transform; }
.cf__card.is-active { cursor: default; }
.cf__art { position: relative; height: 40%; flex: none; background: #0a4640; color: var(--art-fg); }
.cf__art .fig { position: absolute; inset: 8% 18%; width: 64%; height: 84%; overflow: visible; }
.cf__num { position: absolute; left: 22px; top: 16px; font-family: var(--f-serif); font-size: 46px; line-height: 1; color: rgba(255, 255, 255, .22); }
.cf__txt { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 24px 28px 26px; overflow-y: auto; }
.cf__k { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #77d4c8; }
.cf__t { margin: 8px 0 10px; font-family: var(--f-serif); font-weight: 400; font-size: clamp(30px, 2.6vw, 40px); line-height: 1; letter-spacing: -.02em; }
.cf__d { margin: 0; font-size: 15px; line-height: 1.5; color: var(--dark-text-2); }
.cf__txt .chips { margin-top: 14px; }
.cf__txt .chips span { background: rgba(255, 255, 255, .08); height: 28px; font-size: 11.5px; }
.cf__txt .hs__data { padding-top: 14px; }
.cf__txt .hs__data div { grid-template-columns: 110px minmax(0, 1fr); padding: 9px 0; font-size: 13.5px; border-color: var(--dark-line); }
.cf__txt .hs__data dt { color: var(--dark-text-2); }
.cf__txt .hs__data a { color: #77d4c8; }
.cf__nav { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 28px; }
.cf__dots { display: flex; gap: 8px; }
.cf__dots button { width: 10px; height: 10px; border-radius: 999px; background: var(--line); transition: width .5s var(--ease), background .4s; }
.cf__dots button[aria-current="true"] { width: 34px; background: var(--accent); }

/* ---------- cómo trabajamos: círculos que se cruzan ---------- */
.venn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.venn__fig svg { display: block; width: 100%; max-width: 560px; margin: 0 auto; overflow: visible; }
.venn__c { fill: rgba(18, 183, 169, .1); stroke: rgba(18, 183, 169, .55); stroke-width: 1.2; transform-box: fill-box; transform-origin: 50% 50%; animation: vennR 7s ease-in-out infinite; transition: fill .45s, stroke .45s, opacity .45s; mix-blend-mode: screen; }
.venn__c:nth-child(2) { animation-delay: -1.75s; } .venn__c:nth-child(3) { animation-delay: -3.5s; } .venn__c:nth-child(4) { animation-delay: -5.25s; }
@keyframes vennR { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.venn__n { font-family: var(--f-serif); font-size: 30px; fill: rgba(194, 243, 236, .55); transition: fill .4s; }
.venn__core { fill: #09978a; animation: vennR 4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.venn__vos { font-family: var(--f-serif); font-style: italic; font-size: 38px; fill: #fff; }
.venn[data-on] .venn__c { opacity: .35; }
.venn[data-on="0"] .venn__c:nth-child(1), .venn[data-on="1"] .venn__c:nth-child(2), .venn[data-on="2"] .venn__c:nth-child(3), .venn[data-on="3"] .venn__c:nth-child(4) { opacity: 1; fill: rgba(18, 183, 169, .32); stroke: #81e5d8; stroke-width: 2; }
.venn[data-on="0"] .venn__n:nth-of-type(1), .venn[data-on="1"] .venn__n:nth-of-type(2), .venn[data-on="2"] .venn__n:nth-of-type(3), .venn[data-on="3"] .venn__n:nth-of-type(4) { fill: #fff; }
.venn__txt .lead { margin-top: 24px; }
.venn__list { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--dark-line); }
.venn__it { width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px; padding: 18px 0; text-align: left; border-bottom: 1px solid var(--dark-line); color: var(--dark-text-2); font-size: 15px; line-height: 1.45; transition: color .3s, padding .5s var(--ease); }
.venn__it strong { display: block; margin-bottom: 4px; font-family: var(--f-serif); font-weight: 400; font-size: clamp(22px, 2vw, 30px); line-height: 1; color: var(--dark-text); }
.venn__in { font-size: 12px; font-weight: 600; letter-spacing: .14em; padding-top: 8px; color: #12b7a9; }
.venn__it:hover, .venn__it.is-on { color: #b4e8e0; padding-left: 10px; }

/* ---------- medicina del sueño: ¿te pasa? ---------- */
.chk { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; padding: clamp(18px, 2.4vw, 30px); border-radius: 30px; background: var(--surface); border: 1px solid var(--line); }
.chk__head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding: 4px 6px 6px; }
.chk__q { margin: 0; font-family: var(--f-serif); font-size: clamp(28px, 3vw, 46px); line-height: 1; letter-spacing: -.02em; }
.chk__hint { margin: 0; font-size: 13px; color: var(--text-2); }
.chk__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.chk__o { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px; text-align: left; border-radius: 20px; border: 1.5px solid var(--line); background: var(--bg); transition: border-color .35s, background .35s, transform .5s var(--ease), box-shadow .5s; }
.chk__o:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.chk__o[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow: 0 12px 24px rgba(0, 30, 27, .1); }
.chk__ico { width: 64px; height: 64px; margin-bottom: 14px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.chk__ico svg { width: 44px; height: 44px; overflow: visible; }
.chk__ico .t { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.chk__ico .t--f { stroke-width: 1.6; opacity: .45; }
.chk__ico .r { fill: currentColor; }
.chk__k { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.chk__o strong { font-family: var(--f-serif); font-weight: 400; font-size: 26px; line-height: 1.05; }
.chk__d { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.chk__box { position: absolute; top: 18px; right: 18px; width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--line); transition: background .3s, border-color .3s; }
.chk__box::after { content: ""; position: absolute; left: 8px; top: 3px; width: 6px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .4s var(--ease); }
.chk__o[aria-pressed="true"] .chk__box { background: var(--accent); border-color: var(--accent); }
.chk__o[aria-pressed="true"] .chk__box::after { transform: rotate(45deg) scale(1); }
.chk__res { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 20px; align-content: center; padding: 26px; border-radius: 22px; background: var(--dark); color: var(--dark-text); overflow: hidden; }
.chk__ring { grid-row: span 2; width: 96px; height: 96px; transform: rotate(-90deg); }
.chk__ring circle { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 7; }
.chk__ring .chk__fill { stroke: #12b7a9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--off, 1); transition: stroke-dashoffset .8s var(--ease); }
.chk__count { position: absolute; left: 26px; top: 26px; width: 96px; height: 96px; display: grid; place-items: center; font-size: 13px; color: var(--dark-text-2); }
.chk__count b { font-family: var(--f-serif); font-weight: 400; font-size: 34px; color: #fff; margin-right: 2px; }
.chk__count { display: flex; align-items: center; justify-content: center; }
.chk__msg p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--dark-text-2); }
.chk__msg strong { display: block; margin-bottom: 4px; font-family: var(--f-serif); font-weight: 400; font-size: 26px; line-height: 1.05; color: #fff; }
.chk__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chk__acts .btn--g { color: var(--dark-text); border-color: var(--dark-line); --ico-bg: #fff; --ico-fg: #003530; --fill: #fff; }
.chk__acts .btn--g:hover { color: #003530; }
.photo3 { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* la foto limpia arriba, sin ningún velo, y el texto abajo sobre el fondo de la tarjeta */
.photo3 li { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); color: var(--text); }
.photo3__f { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.photo3__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.photo3 li:hover .photo3__bg { transform: scale(1.07); }
.photo3__n { margin: 22px 28px 0; font-family: var(--f-serif); font-size: 34px; line-height: 1; color: var(--accent-ink); }
.photo3 h3 { margin: 8px 28px 10px; font-family: var(--f-serif); font-weight: 400; font-size: clamp(28px, 2.4vw, 38px); line-height: 1; }
.photo3 p { margin: 0 28px 28px; font-size: 15px; line-height: 1.5; color: var(--text-2); }

/* ---------- recorrido: pasos que avanzan solos ---------- */
.stp__rail { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stp__line { position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 13px; height: 2px; background: var(--dark-line); }
.stp__line i { display: block; height: 100%; background: linear-gradient(90deg, #12b7a9, #77d4c8); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.stp__b { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 4px 6px; color: var(--dark-text-2); }
.stp__dot { width: 28px; height: 28px; border-radius: 50%; background: #0b423d; border: 2px solid var(--dark-line); transition: background .4s, border-color .4s, box-shadow .6s, transform .6s var(--ease); }
.stp__b.is-done .stp__dot { background: #09978a; border-color: #09978a; }
.stp__b[aria-selected="true"] .stp__dot { background: #12b7a9; border-color: #12b7a9; box-shadow: 0 0 0 8px rgba(18, 183, 169, .18); transform: scale(1.12); }
.stp__n { font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.stp__w { font-size: 13.5px; text-align: center; transition: color .3s; }
.stp__b[aria-selected="true"] .stp__w, .stp__b:hover .stp__w { color: #fff; }
.stp__panels { position: relative; margin-top: 24px; }
.stp__p { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(14px, 2vw, 32px); align-items: center; min-height: clamp(112px, 9.3vw, 140px); padding: clamp(16px, 1.6vw, 24px) clamp(18px, 2vw, 30px); border-radius: 18px; background: rgba(255, 255, 255, .045); border: 1px solid var(--dark-line); }
.stp__big { font-family: var(--f-serif); font-size: clamp(48px, 5vw, 84px); line-height: .8; color: #12b7a9; letter-spacing: -.04em; }
.stp__p h3 { margin: 0 0 6px; font-family: var(--f-serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 36px); line-height: .95; letter-spacing: -.02em; }
.stp__p p { margin: 0; max-width: 60ch; font-size: clamp(14px, 1vw, 16px); line-height: 1.5; color: var(--dark-text-2); }
.stp__p a { color: #77d4c8; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- pacientes: el celular ---------- */
.app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.app__txt .lead { margin-top: 22px; }
.app__list { display: grid; gap: 8px; margin-top: 34px; }
.app__b { display: flex; align-items: center; gap: 16px; padding: 12px 18px 12px 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); text-align: left; font-family: var(--f-serif); font-size: clamp(21px, 1.8vw, 28px); line-height: 1.05; transition: background .35s, color .35s, border-color .35s, transform .5s var(--ease); }
.app__b:hover { transform: translateX(6px); }
.app__b[aria-selected="true"] { background: var(--dark); color: #fff; border-color: var(--dark); }
.app__ico { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); transition: background .35s, color .35s; }
.app__b[aria-selected="true"] .app__ico { background: rgba(18, 183, 169, .18); color: #77d4c8; }
.app__ico svg, .scr__ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app__dev { display: grid; place-items: center; }
.phone { position: relative; width: min(340px, 78vw); aspect-ratio: 9 / 18.6; padding: 14px; border-radius: 52px; background: linear-gradient(160deg, #11544d, #00312d); box-shadow: 0 50px 100px rgba(0, 53, 48, .35), inset 0 0 0 2px rgba(255, 255, 255, .08); transform: rotate(-3deg); transition: transform 1s var(--ease); }
.app__dev:hover .phone { transform: rotate(0deg) translateY(-6px); }
.phone__notch { position: absolute; z-index: 3; left: 50%; top: 24px; width: 96px; height: 26px; margin-left: -48px; border-radius: 20px; background: #002c27; }
.phone__bar { position: absolute; z-index: 2; left: 34px; right: 34px; top: 26px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: var(--text); }
.phone__sig { display: flex; gap: 2px; align-items: end; height: 10px; }
.phone__sig i { width: 3px; border-radius: 1px; background: currentColor; }
.phone__sig i:nth-child(1) { height: 4px; } .phone__sig i:nth-child(2) { height: 7px; } .phone__sig i:nth-child(3) { height: 10px; }
.phone__scr { position: relative; height: 100%; border-radius: 40px; overflow: hidden; background: linear-gradient(180deg, #ffffff, #e6f7f4); }
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 92px 26px 70px; }
.scr__ico { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: #09978a; color: #fff; box-shadow: 0 12px 24px rgba(0, 30, 27, .14); }
.scr__ico svg { width: 36px; height: 36px; }
.scr__k { margin: 26px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.scr__t { margin: 0; font-family: var(--f-serif); font-weight: 400; font-size: 36px; line-height: 1; letter-spacing: -.02em; }
.scr__d { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.scr__btn { margin-top: auto; display: grid; place-items: center; height: 54px; border-radius: 16px; background: #003530; color: #fff; font-weight: 600; font-size: 15px; transition: background .3s; }
.scr__btn:hover { background: #028177; }
.phone__home { position: absolute; left: 50%; bottom: 24px; width: 110px; height: 5px; margin-left: -55px; border-radius: 3px; background: rgba(0, 59, 54, .35); }

/* ---------- novedades: galería con visor ---------- */
.gal { columns: 3 280px; column-gap: 16px; }
.gal__it { display: block; width: 100%; margin: 0 0 16px; break-inside: avoid; text-align: left; position: relative; border-radius: var(--r); overflow: hidden; color: #fff; }
.gal__img { display: block; }
.gal__img img { display: block; width: 100%; height: auto; transition: transform 1.2s var(--ease), filter .6s; }
.gal__it:hover .gal__img img { transform: scale(1.06); }
.gal__cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; background: #003530; color: #e6f6f3; font-size: 15px; font-weight: 500; line-height: 1.35; transform: translateY(30%); opacity: 0; transition: transform .6s var(--ease), opacity .4s; }
.gal__cap small { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #77d4c8; }
.gal__it:hover .gal__cap, .gal__it:focus-visible .gal__cap { transform: none; opacity: 1; }
@media (hover: none) { .gal__cap { transform: none; opacity: 1; } }
.lb { width: min(1100px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: 26px; background: #003530; color: var(--dark-text); overflow: hidden; box-shadow: 0 40px 120px rgba(0, 0, 0, .6); }
.lb::backdrop { background: rgba(0, 28, 25, .88); }
.lb[open] { animation: lbIn .5s var(--ease); }
@keyframes lbIn { from { opacity: 0; transform: translateY(20px) scale(.97); } }
.lb__fig { margin: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); max-height: 92vh; }
.lb__img { width: 100%; height: 100%; max-height: 92vh; object-fit: cover; background: #0a413c; }
.lb figcaption { display: flex; flex-direction: column; gap: 10px; padding: 70px 34px 34px; overflow-y: auto; }
.lb__n { font-size: 12px; font-weight: 600; letter-spacing: .14em; color: #12b7a9; }
.lb__date { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dark-text-2); }
.lb__t { font-family: var(--f-serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.05; }
.lb__x2 { font-size: 15px; line-height: 1.55; color: var(--dark-text-2); }
.lb__x, .lb__nav { position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 53, 48, .7); border: 1px solid rgba(255, 255, 255, .18); color: #fff; transition: background .3s; }
.lb__x:hover, .lb__nav:hover { background: #09978a; }
.lb__x { top: 16px; right: 16px; }
.lb__nav--p { right: 136px; bottom: 22px; } .lb__nav--n { right: 80px; bottom: 22px; }

/* ---------- preguntas con buscador ---------- */
.qa4 .qa__head .d { font-size: clamp(44px, 5.4vw, 88px); }
.qs { display: flex; align-items: center; gap: 12px; margin-top: 30px; height: 60px; padding: 0 20px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); color: var(--text-2); transition: border-color .3s, box-shadow .3s; }
.qs:focus-within { border-color: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent); }
.qs input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: var(--text); }
.qs input::placeholder { color: var(--text-2); opacity: .8; }
.qs__none { margin: 6px 0 0; padding: 22px 24px; border-radius: var(--r-sm); background: var(--surface); border: 1px dashed var(--line); color: var(--text-2); }
.qs__none a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.qa details.is-hit summary { color: var(--accent-ink); }

/* ---------- contacto: las dos sedes unidas ---------- */
.ct4__top { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; margin-bottom: 30px; }
.ct4__top .lead { max-width: 40ch; }
.ct4__top .big { font-size: clamp(80px, 15vw, 260px); }
.route { position: relative; height: 170px; margin: 0 0 18px; }
.route svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route__base { fill: none; stroke: rgba(164, 230, 220, .14); stroke-width: 2; }
.route__flow { fill: none; stroke: #12b7a9; stroke-width: 2; stroke-dasharray: 6 12; animation: ruta 1.6s linear infinite; }
@keyframes ruta { to { stroke-dashoffset: -18; } }
.route__dot { fill: #fff; }
.route__pin { position: absolute; bottom: 0; display: flex; align-items: center; gap: 10px; translate: -50% 0; font-family: var(--f-serif); font-size: 26px; }
.route__pin i { width: 14px; height: 14px; border-radius: 50%; background: #12b7a9; box-shadow: 0 0 0 6px rgba(18, 183, 169, .2); animation: latido 2.6s infinite; }
.route__pin--a { left: 10%; } .route__pin--b { left: 90%; }
.route__mid { position: absolute; left: 50%; top: 74px; translate: -50% 0; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--dark-line); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dark-text-2); white-space: nowrap; }
.pn--dark .office:not(.is-hl) { background: rgba(255, 255, 255, .04); }
.office h3 { font-family: var(--f-serif); font-weight: 400; letter-spacing: -.02em; }
/* las tres sedes y el turno online: de a cuatro en la compu y de a dos en pantallas medianas */
@media (min-width: 901px) { .offices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1181px) {
  .offices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .office h3 { font-size: clamp(30px, 2.6vw, 44px); }
  /* la etiqueta de Capital ocupa dos renglones: así los títulos quedan alineados */
  .office__k { min-height: 2.8em; line-height: 1.4; }
}
/* que el botón de WhatsApp no tape el pie */
.foot__bot { padding-right: 104px; }

/* ============ responsive ============ */
@media (max-width: 1180px) {
}
@media (max-width: 900px) {
  /* en el celular las fotos van como en la compu: grandes, de borde a borde y fundiéndose con el fondo, pero sin nada
     encima: arrancan debajo de la barra de arriba (--top) y el título va debajo de ellas. --band: el alto de la foto,
     lo que queda de la pantalla después de la barra, el título y los botones; como mucho, lo justo para
     mostrar entera una foto vertical (133vw) */
  .hero4 { --top: 74px; --band: clamp(220px, calc(100svh - 296px - min(26vw, 190px)), 133vw); align-items: flex-start; padding: calc(var(--top) + var(--band) + 12px) 0 26px; }
  .hero4__lead { max-width: 460px; margin-top: 10px; font-size: 14.5px; line-height: 1.5; }
  .slides { --fy: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .1) 2px, rgba(0, 0, 0, .35) 5px, rgba(0, 0, 0, .65) 7px, rgba(0, 0, 0, .9) 10px, #000 12px, #000 calc(100% - 18px), rgba(0, 0, 0, .9) calc(100% - 14px), rgba(0, 0, 0, .65) calc(100% - 11px), rgba(0, 0, 0, .35) calc(100% - 7px), rgba(0, 0, 0, .1) calc(100% - 4px), rgba(0, 0, 0, 0) 100%); top: var(--top); bottom: auto; left: 0; right: 0; height: var(--band); -webkit-mask-image: var(--fy); mask-image: var(--fy); }
  /* la foto apaisada del equipo no se estira a todo el alto, así entran todas las caras */
  .slides .is-wide { inset: auto 0; top: calc(50% - 46vw); height: 92vw; object-position: 47% 30% !important; -webkit-mask-image: var(--fy); mask-image: var(--fy); }
  .hero4 .tag, .hero4__on, .hero4__cta .act__go { display: none; }
  /* los cuatro botones, un bloque de dos por dos, todos del mismo tamaño y con su ícono. Arriba los dos principales,
     en el mismo orden que en la barra de abajo, que aparece recién al bajar */
  .hero4__cta, .hero4__atajos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: auto; max-width: 460px; margin-top: 8px; }
  .hero4__cta { margin-top: clamp(14px, 3.4vw, 28px); }
  .hero4__cta .act--turno { --act-bg: #12b7a9; --act-fg: #00221e; }
  .hero4__cta .act--est { order: -1; }
  .hero4__cta .act, .hero4__atajos .atajo { justify-content: center; gap: 8px; min-width: 0; min-height: 50px; padding: 0 10px; box-shadow: none; }
  .hero4__cta .act__i { width: auto; height: auto; background: none; color: inherit; }
  .hero4__cta .act:hover .act__i { transform: none; }
  .hero4__cta .act__i svg, .hero4__atajos .atajo svg { display: block; width: 18px; height: 18px; }
  .hero4__cta .act__t strong, .hero4__atajos .atajo { font-size: 14px; font-weight: 600; }
  .hero4__title { max-width: none; font-size: clamp(28px, 8.6vw, 60px); }
  .hero4__down { display: none; }
  .tag { font-size: 10.5px; letter-spacing: .08em; }
  .split__in { grid-template-columns: 1fr; }
  .split__txt { position: static; padding: 0; }
  .split__pics { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .split__ph { position: relative; inset: auto; width: auto; transform: none !important; }
  .split__ph--1 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .tr__cols { grid-template-columns: 1fr; }
  .tr__who { width: 100%; }
  .tr__who button { flex: 1 1 auto; }
  /* especialidades: la tarjeta del frente con todo su texto a la vista; las de los costados, solo el dibujo */
  .cf__stage { height: 700px; }
  .cf__art { height: 28%; }
  .cf__txt { transition: opacity .4s; }
  .cf__card:not(.is-active) .cf__txt { opacity: 0; }
  .venn { grid-template-columns: 1fr; }
  .venn__fig { max-width: 420px; justify-self: center; width: 100%; }
  .chk { grid-template-columns: 1fr; }
  .chk__opts { grid-template-columns: 1fr; }
  .chk__o { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; }
  .chk__ico { grid-row: span 3; width: 56px; height: 56px; margin: 0; }
  .chk__ico svg { width: 38px; height: 38px; }
  .photo3 { grid-template-columns: 1fr; }
  .photo3__f { max-height: 440px; }
  .stp__rail { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stp__w { display: none; }
  .stp__p { grid-template-columns: 1fr; gap: 10px; }
  .stp__big { font-size: 44px; }
  .stp__p { min-height: 170px; align-content: start; gap: 8px; }
  .app { grid-template-columns: 1fr; }
  .app__dev { order: 2; }
  .phone { transform: none; }
  .gal { columns: 2 150px; column-gap: 10px; }
  .gal__it { margin-bottom: 10px; }
  .gal__cap { font-size: 13px; padding: 8px 12px; }
  .lb__fig { grid-template-columns: 1fr; overflow-y: auto; }
  .lb__img { max-height: 50vh; }
  .lb figcaption { padding: 24px 22px 90px; }
  .lb__nav--p { left: 18px; right: auto; } .lb__nav--n { left: 76px; right: auto; }
  /* el cartel de la videollamada va arriba de la curva: en lo angosto no entra debajo y la curva le cortaba las puntas */
  .route { height: 150px; }
  .route svg { top: 36px; bottom: 0; height: calc(100% - 36px); }
  .route__pin { font-size: 20px; }
  .route__mid { top: 0; padding: 6px 12px; font-size: 10px; letter-spacing: .08em; }
  /* sedes: sin huecos vacíos entre los datos y el botón */
  .office { min-height: 0; }
  .office .btn { margin-top: 6px; }
  /* menos aire arriba y abajo de cada sección, y la barra de abajo un poco más fina */
  :root { --sec: 68px; }
  .dock a { min-height: 44px; font-size: 13px; }
  .ct4__top .big { font-size: clamp(70px, 22vw, 120px); }
}
/* el celular acostado: como en la compu, el título a la izquierda y las fotos a la derecha, entre las dos barras */
@media (max-width: 900px) and (orientation: landscape) {
  .hero4 { align-items: center; padding: 84px 0 22px; }
  .slides { --fx: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .1) 6px, rgba(0, 0, 0, .35) 12px, rgba(0, 0, 0, .65) 18px, rgba(0, 0, 0, .9) 24px, #000 30px); top: 80px; bottom: 16px; left: 40%; height: auto; -webkit-mask-image: var(--fx); mask-image: var(--fx); }
  .slides .is-wide { inset: 0; height: 100%; -webkit-mask-image: none; mask-image: none; }
  .hero4__title { max-width: 40vw; font-size: clamp(26px, min(4.6vw, 10svh), 46px); }
  .hero4__cta, .hero4__atajos { max-width: 38vw; gap: 6px; margin-top: 6px; }
  .hero4__cta { margin-top: 10px; }
  .hero4__cta .act, .hero4__atajos .atajo { min-height: 40px; padding: 0 6px; }
  .hero4__cta .act__t strong, .hero4__atajos .atajo { font-size: 12.5px; }
  .hero4__cta .act__i, .hero4__atajos .atajo svg { display: none; }
}
@media (max-width: 600px) {
  .eq { --n: 2; --gap: 8px; row-gap: 20px; }
  .eq__n { font-size: 14.5px; }
  .eq__r { font-size: 12.5px; }
  .eq__mas { right: 6px; bottom: 6px; width: 26px; height: 26px; }
  .perfil[open] { flex-direction: column; }
  .perfil__f { flex: 0 0 auto; width: 100%; height: 70vw; object-position: 50% 20%; }
  .perfil__t { padding: 20px 22px 24px; }
  .perfil__n { font-size: 32px; margin-right: 0; }
  .perfil__r { font-size: 15px; }
  .perfil__l { margin: 12px 0 14px; }
  .perfil__l li { padding: 8px 0; font-size: 13.5px; }
  .perfil__a { margin-top: 14px; }
  .act { min-height: 60px; gap: 12px; padding: 7px 22px 7px 7px; }
  .act__i { width: 46px; height: 46px; }
}
/* celulares bajos o muy angostos: menos foto en la ventana del perfil, y lugar para que la etiqueta ocupe dos renglones sin desalinear */
@media (max-width: 600px) and (max-height: 720px) { .perfil__f { width: 126px; height: 168px; margin: 16px 0 0 22px; border-radius: var(--r); object-position: 50% 50%; } }
/* celulares bajos y acostados: sin el párrafo de la portada, así la foto conserva su tamaño y los botones entran */
@media (max-width: 900px) and (max-height: 660px) {
  .hero4 { --band: clamp(220px, calc(100svh - 230px - min(26vw, 190px)), 133vw); }
  .hero4__lead { display: none; }
}
@media (max-width: 359px) { .hero4__cta .act__i, .hero4__atajos .atajo svg { display: none; } .eq__n { min-height: 2.5em; } .perfil__t { padding: 16px 18px 20px; } .perfil__n { font-size: 28px; } }
/* en la compu la portada entra entera en la primera pantalla: en las notebooks (pantallas más bajas)
   el título y los espacios se achican según el alto, así los botones no quedan cortados abajo.
   El texto va en una columna angosta (--col: lo que ocupa el título, o lo justo para la etiqueta) y las fotos
   llenan todo el resto, hasta el borde. La portada se mete abajo del panel que sigue (lo que mide su curva), así
   la foto llena la pantalla hasta abajo y sigue detrás de las esquinas redondeadas, sin franja vacía */
@media (min-width: 901px) {
  .hero4 { --title: clamp(34px, min(3.6vw, calc((100svh - 470px) / 3)), 72px); --col: clamp(340px, 30vw, 470px); min-height: calc(100svh + var(--pn-r)); margin-bottom: calc(-1 * var(--pn-r) - var(--pn-gap)); padding: clamp(92px, 15svh, 130px) 0 calc(clamp(24px, 6svh, 90px) + var(--pn-r)); }
  .hero4__title { max-width: var(--col); font-size: var(--title); }
  .hero4 .tag { max-width: var(--col); margin-bottom: clamp(14px, 3svh, 30px); font-size: 10.5px; letter-spacing: .08em; }
  /* el nombre del centro, como antetítulo: texto suelto en vez de cápsula, así puede ocupar dos renglones */
  .hero4 .hero4__in > p.tag { padding: 0; border: 0; border-radius: 0; background: none; line-height: 1.5; }
  .hero4__lead { max-width: var(--col); margin-top: clamp(12px, 2.4svh, 22px); font-size: clamp(15px, 2.3svh, 17px); }
  .hero4__cta { display: inline-grid; margin-top: clamp(16px, 3.2svh, 32px); }
  .hero4__down { left: max(var(--gutter), calc((100vw - var(--max)) / 2)); bottom: calc(26px + var(--pn-r)); margin-left: 0; }
  /* las fotos arrancan debajo de la barra de arriba, así no les tapa nada. Solo el borde se desvanece, con una curva
     suave (un degradado recto y corto se ve como un corte): --fade es lo que ocupa hacia el texto, y arranca un poco
     antes de la columna para no comerle foto. Arriba son 16 px; abajo solo se desvanece lo que queda detrás del panel
     que sigue (fuera de la portada sobran 24 px, y 8 cubren lo que se mueve con el mouse) */
  .slides {
    --fade: clamp(44px, 4vw, 80px);
    --fx: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .03) calc(var(--fade) * .1), rgba(0, 0, 0, .1) calc(var(--fade) * .2), rgba(0, 0, 0, .22) calc(var(--fade) * .3), rgba(0, 0, 0, .35) calc(var(--fade) * .4), rgba(0, 0, 0, .5) calc(var(--fade) * .5), rgba(0, 0, 0, .65) calc(var(--fade) * .6), rgba(0, 0, 0, .78) calc(var(--fade) * .7), rgba(0, 0, 0, .9) calc(var(--fade) * .8), rgba(0, 0, 0, .97) calc(var(--fade) * .9), #000 var(--fade));
    --fy: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .1) 3px, rgba(0, 0, 0, .35) 6px, rgba(0, 0, 0, .65) 10px, rgba(0, 0, 0, .9) 13px, #000 16px, #000 calc(100% - 16px - var(--pn-r)), rgba(0, 0, 0, 0) calc(100% - 24px));
    top: 84px; bottom: -24px; right: -24px; left: calc(max(var(--gutter), calc((100vw - var(--max)) / 2)) + var(--col) - .35 * var(--fade));
    -webkit-mask-image: var(--fx), var(--fy); mask-image: var(--fx), var(--fy); -webkit-mask-composite: source-in; mask-composite: intersect;
  }
}
@media (min-width: 901px) and (max-height: 960px) { .hero4__down { display: none; } }

/* ---------- herramientas online (dentro del recorrido) ---------- */
.tools4 { margin-top: clamp(56px, 7vw, 96px); }
.tools4__t { margin: 0 0 22px; font-family: var(--f-serif); font-size: clamp(32px, 3.4vw, 54px); line-height: 1; letter-spacing: -.02em; }
.pn--dark .tools4__t .em { color: #77d4c8; }
/* arriba, grandes, los dos que más se usan (pedir turno y subir estudios); debajo, los otros cuatro en fila */
.tools4__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.tool4 { position: relative; grid-column: span 3; display: flex; flex-direction: column; gap: 6px; min-height: 200px; background: rgba(255, 255, 255, .04); }
.tool4--hl { grid-column: span 6; }
.tool4__ico { width: 52px; height: 52px; margin-bottom: 14px; border-radius: 16px; display: grid; place-items: center; background: rgba(18, 183, 169, .14); color: #77d4c8; transition: background .4s, color .4s, transform .6s var(--ease); }
.tool4__ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool4:hover .tool4__ico { background: #12b7a9; color: #003530; transform: rotate(-6deg); }
.tool4__tt { font-family: var(--f-serif); font-size: clamp(24px, 2vw, 30px); line-height: 1.05; padding-right: 50px; }
.tool4__d { font-size: 14px; line-height: 1.45; color: var(--dark-text-2); }
.tool4 .go { position: absolute; top: 22px; right: 22px; }

/* ---------- preguntas (dentro de contacto) ---------- */
.qa.ct4__faq { display: block; margin-top: clamp(56px, 7vw, 96px); }
.ct4__faq .qa__list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.pn--dark .ct4__faq details { background: rgba(255, 255, 255, .04); }
.pn--dark .ct4__faq .qa__a a { color: #77d4c8; }
.pn--dark .ct4__faq summary::after { background-color: rgba(255, 255, 255, .08); }
.pn--dark .ct4__faq .tools4__t .em { color: #77d4c8; }

@media (max-width: 1180px) { .tool4 { grid-column: span 6; } }
@media (max-width: 900px) {
  .tools4__grid, .ct4__faq .qa__list { grid-template-columns: 1fr; }
  .tool4, .tool4--hl { grid-column: auto; }
  .tool4 { min-height: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 18px 64px 18px 18px; }
  .tool4__ico { grid-row: span 2; width: 48px; height: 48px; margin: 0; }
  .tool4__tt { padding-right: 0; font-size: 23px; }
  .tool4 .go { top: 50%; margin-top: -23px; right: 16px; }
}
/* ---------- pie: el cierre. "COMS" se abre ---------- */
.sign4 { --p: 0; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(80px, 10vw, 150px) 0 clamp(56px, 6vw, 90px); }
.sign4__mark { width: 54px; height: auto; margin-bottom: 34px; }
.sign4__word { margin: 0; display: flex; justify-content: center; font-family: var(--f-sans); font-weight: 200; font-stretch: 100%; text-transform: uppercase; font-size: clamp(72px, 14vw, 230px); line-height: .9; }
.sign4__word span { display: inline-block; margin: 0 calc(.03em + var(--p) * .09em); color: var(--dark-text); }
.sign4__sub { margin: 30px 0 0; font-family: var(--f-serif); font-size: clamp(20px, 1.8vw, 28px); line-height: 1.2; color: var(--dark-text); }
.sign4__sub em { font-style: italic; color: #77d4c8; }
.sign4__hz { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(119, 212, 200, .75), transparent); transform: scaleX(calc(.2 + var(--p) * .8)); }
/* ---------- modo oscuro (botón de la barra). El sitio ya es mayormente noche: lo que cambia son los
   paneles claros, y el cielo del fondo no llega a aclarar del todo ---------- */
.tema { flex: none; position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--dark-text); border: 1px solid rgba(255, 255, 255, .18); transition: background .3s, border-color .3s, transform .5s var(--ease); }
.tema:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); }
.tema:active { transform: scale(.92); }
.tema svg { overflow: visible; }
.tema__sol { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; transform-origin: 12px 12px; transition: transform .6s var(--ease), opacity .3s; }
.tema__sol circle { fill: currentColor; stroke: none; }
.tema__luna { fill: currentColor; transform-origin: 12px 12px; transition: transform .6s var(--ease), opacity .3s; }
/* en modo claro se ofrece la luna; en oscuro, el sol */
:root:not([data-theme="dark"]) .tema__sol { opacity: 0; transform: rotate(-90deg) scale(.5); }
:root[data-theme="dark"] .tema__luna { opacity: 0; transform: rotate(90deg) scale(.5); }
.nav__links + .tema { margin-left: 0; }
.tema + .nav__cta { margin-left: 8px !important; }
@media (max-width: 1180px) { .tema { margin-left: auto; } }
@media (max-width: 900px) { .tema { width: 48px; height: 48px; } .tema + .nav__cta + .burger, .tema ~ .burger { margin-left: 8px; } }

:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] .pn--light {
  --bg: #053d38; --bg-2: rgba(255, 255, 255, .06); --surface: #104943;
  --text: #e6f6f3; --text-2: #9bbcb7; --line: rgba(164, 230, 220, .14);
  --accent: #12b7a9; --accent-2: #81e5d8; --accent-ink: #77d4c8; --on-accent: #00221e;
  border: 1px solid rgba(164, 230, 220, .08);
  color: var(--text);
}
:root[data-theme="dark"] .pn--light .d em, :root[data-theme="dark"] .pn--light .em { color: #77d4c8; }
:root[data-theme="dark"] .chk__res { background: #003530; border: 1px solid rgba(164, 230, 220, .12); }
:root[data-theme="dark"] .chk__o[aria-pressed="true"] { box-shadow: 0 16px 34px rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .cf__card { box-shadow: 0 14px 30px rgba(0, 0, 0, .25), 0 0 0 1px rgba(164, 230, 220, .1); }
:root[data-theme="dark"] .cf__dots button:not([aria-current="true"]) { background: rgba(255, 255, 255, .22); }

/* el cambio de modo: un círculo que se abre desde el botón (en navegadores que lo soportan) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
/* ---------- modo claro completo: las 7 secciones claras (en oscuro, todas oscuras).
   Las secciones que eran de noche redefinen sus colores; lo que va sobre fotos queda igual.
   Los claros son grises verdosos apagados, no blanco puro: así el fondo no encandila y las fotos resaltan ---------- */
:root:not([data-theme="dark"]) { --nav-bg: #f0f9f7; --nav-line: rgba(0, 59, 54, .08); --nav-hover: rgba(0, 59, 54, .06); }
:root:not([data-theme="dark"]) .pn--dark, :root:not([data-theme="dark"]) .hero4 {
  --bg: #e8f3f2; --bg-2: #d5ebe7; --surface: #f4faf9;
  --text: #003b36; --text-2: #446863; --line: rgba(0, 59, 54, .12);
  --dark-text: #003b36; --dark-text-2: #446863; --dark-line: rgba(0, 59, 54, .12);
  --accent: #12b7a9; --accent-2: #63c7bb; --accent-ink: #006a60; --on-accent: #00221e;
  color: var(--text);
}
:root:not([data-theme="dark"]) .pn--dark { background: var(--bg); border-color: rgba(0, 59, 54, .06); box-shadow: 0 20px 60px rgba(0, 59, 54, .05); }
:root:not([data-theme="dark"]) .pn--dark .d em, :root:not([data-theme="dark"]) .pn--dark .em, :root:not([data-theme="dark"]) .pn--dark .tools4__t .em { color: var(--accent-ink); }
:root:not([data-theme="dark"]) .sky4__stars { opacity: 0 !important; }
/* el visor de novedades sigue oscuro */
:root:not([data-theme="dark"]) .lb { --dark-text: #e6f6f3; --dark-text-2: #90b6b0; --dark-line: rgba(164, 230, 220, .13); }

/* barra y botón de tema */
:root:not([data-theme="dark"]) .nav { --text: #003b36; --text-2: rgba(0, 59, 54, .7); --bg: #ffffff; box-shadow: 0 10px 40px rgba(0, 59, 54, .08); }
:root:not([data-theme="dark"]) .brand__s { color: rgba(0, 59, 54, .55); }
:root:not([data-theme="dark"]) .tema { color: #003b36; border-color: rgba(0, 59, 54, .15); }
:root:not([data-theme="dark"]) .tema:hover { background: rgba(0, 59, 54, .06); border-color: rgba(0, 59, 54, .3); }

/* portada: las fotos de fondo, en claro */
/* las fotos, apenas más bajas de brillo y con algo más de contraste para que no encandilen */
:root:not([data-theme="dark"]) .slides { background: #b8dbd5; }
:root:not([data-theme="dark"]) .slides img { --f: saturate(1) brightness(.97) contrast(1.03); }
:root:not([data-theme="dark"]) .tag { background: rgba(255, 255, 255, .55); border-color: rgba(0, 59, 54, .1); }
:root:not([data-theme="dark"]) .tag__dot { background: #09978a; }
:root:not([data-theme="dark"]) .hero4__l2 { color: #005e56; }
:root:not([data-theme="dark"]) .hero4__down { border-color: rgba(0, 59, 54, .35); }
:root:not([data-theme="dark"]) .hero4__down span { background: #003b36; }

:root:not([data-theme="dark"]) .eq__a { color: #005e56; }

/* recorrido y herramientas online */
:root:not([data-theme="dark"]) .stp__dot { background: #ffffff; }
:root:not([data-theme="dark"]) .stp__b[aria-selected="true"] .stp__dot { background: #09978a; border-color: #09978a; box-shadow: 0 0 0 8px rgba(9, 151, 138, .14); }
:root:not([data-theme="dark"]) .stp__b[aria-selected="true"] .stp__w, :root:not([data-theme="dark"]) .stp__b:hover .stp__w { color: #003b36; }
:root:not([data-theme="dark"]) .stp__p { background: var(--surface); box-shadow: 0 20px 50px rgba(0, 59, 54, .05); }
:root:not([data-theme="dark"]) .stp__big { color: #09978a; }
:root:not([data-theme="dark"]) .stp__p a { color: #005e56; }
:root:not([data-theme="dark"]) .tool4 { background: var(--surface); }
:root:not([data-theme="dark"]) .tool4__ico { background: rgba(9, 151, 138, .1); color: #005e56; }
:root:not([data-theme="dark"]) .tool4:hover .tool4__ico { background: #09978a; color: #ffffff; }

/* contacto y preguntas */
:root:not([data-theme="dark"]) .route__base { stroke: rgba(0, 59, 54, .14); }
:root:not([data-theme="dark"]) .route__flow { stroke: #09978a; }
:root:not([data-theme="dark"]) .route__dot { fill: #09978a; }
:root:not([data-theme="dark"]) .route__pin i { background: #09978a; }
:root:not([data-theme="dark"]) .route__mid { background: var(--surface); }
:root:not([data-theme="dark"]) .pn--dark .office:not(.is-hl) { background: var(--surface); }
:root:not([data-theme="dark"]) .pn--dark .ct4__faq details { background: var(--surface); }
:root:not([data-theme="dark"]) .pn--dark .ct4__faq .qa__a a { color: #005e56; }
:root:not([data-theme="dark"]) .pn--dark .ct4__faq summary::after { background-color: #e0f2ef; }

/* pie */
:root:not([data-theme="dark"]) .foot { background: #d8ebe8; color: #446863; --dark-text: #003b36; --dark-text-2: #446863; --dark-line: rgba(0, 59, 54, .12); }
:root:not([data-theme="dark"]) .sign4__sub em { color: #005e56; }
:root:not([data-theme="dark"]) .sign4__mark .iso-blanco { fill: #003b36; }

/* ============ que la página entre bien en cualquier pantalla ============ */
/* celulares angostos: la barra entra entera (en pantallas de 360 px el botón del menú se salía por la derecha) */
@media (max-width: 900px) { .nav { gap: 10px; } }
@media (max-width: 400px) {
  .brand { gap: 10px; }
  .brand__mk { width: 42px; height: 42px; }
  .brand__mk svg { width: 29px; }
  .brand__s { letter-spacing: .14em; }
  .tema { width: 44px; height: 44px; }
}
@media (max-width: 340px) { .brand__s { display: none; } }
/* el resultado de "¿te pasa?" en el celular: el círculo arriba y el texto debajo, a todo el ancho
   (al lado del círculo quedaba una columna angosta, con una palabra por renglón) */
@media (max-width: 480px) {
  .chk { padding: 12px; border-radius: 24px; }
  .chk__res { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding: 22px; }
  .chk__ring { grid-row: auto; }
  .chk__count { left: 22px; top: 22px; }
  .chk__acts { margin-top: 4px; }
  .chk__acts .btn { flex: 1 1 100%; justify-content: space-between; }
}
@media (max-width: 360px) { .chk { padding: 0; background: none; border: 0; } }
/* pantallas grandes (1700 px o más, monitores 2K, 4K y ultra anchos): el contenido ocupa siempre el 80% del ancho
   en vez de quedar en una columna angosta al medio. --u es "un píxel del diseño" agrandado: vale 1px en una pantalla
   de 1700 × 850 y crece con la pantalla, siguiendo el lado que menos crece (así en un monitor ultra ancho, que es
   bajo, las tarjetas no quedan más altas que la pantalla). --t crece a la mitad de ese ritmo: es para los textos corridos */
@media (min-width: 1700px) {
  :root { --u: max(1px, min(calc(80vw / 1360), calc(100svh / 850))); --t: calc(.5px + var(--u) / 2); --max: 80vw; --gutter: calc(64 * var(--u)); --sec: calc(176 * var(--t)); }
  .nav { width: min(calc(100% - 24px), calc(var(--max) + 120 * var(--u))); }
  .d { font-size: calc(120 * var(--u)); }
  .lead { font-size: calc(19 * var(--t)); }
  .hero4 { --title: clamp(40px, min(calc(52 * var(--u)), calc((100svh - 520 * var(--t)) / 3)), calc(80 * var(--u))); --col: calc(470 * var(--u)); padding-top: calc(64px + 66 * var(--t)); }
  .hero4__lead { font-size: calc(17 * var(--t)); }
  .slides { top: calc(18px + 66 * var(--t)); }
  .eq-g .d { font-size: calc(76 * var(--u)); }
  .eq__ola { max-width: calc(540 * var(--u)); max-height: calc(150 * var(--u)); }
  .eq { row-gap: calc(26 * var(--t)); }
  .eq__a { font-size: calc(10.5 * var(--t)); }
  .eq__n { font-size: calc(15 * var(--t)); }
  .eq__r { font-size: calc(13.5 * var(--t)); }
  .eq__mas { width: calc(30 * var(--t)); height: calc(30 * var(--t)); }
  .tr__t { font-size: calc(64 * var(--u)); }
  .tr__col li strong { font-size: calc(15.5 * var(--t)); }
  .tr__col li span { font-size: calc(13.5 * var(--t)); }
  .cf__stage { height: calc(640 * var(--u)); }
  .cf__card { --w: calc(470 * var(--u)); }
  .cf__t { font-size: calc(40 * var(--u)); }
  .cf__num { font-size: calc(46 * var(--u)); }
  .cf__d { font-size: calc(15 * var(--t)); }
  .venn__fig svg { max-width: calc(560 * var(--u)); }
  .venn__it { font-size: calc(15 * var(--t)); }
  .venn__it strong { font-size: calc(30 * var(--u)); }
  .chk__q { font-size: calc(46 * var(--u)); }
  .chk__o strong { font-size: calc(26 * var(--u)); }
  .chk__d { font-size: calc(14 * var(--t)); }
  .chk__msg p { font-size: calc(14.5 * var(--t)); }
  .photo3__n { font-size: calc(34 * var(--u)); }
  .photo3 h3 { font-size: calc(38 * var(--u)); }
  .photo3 p { font-size: calc(15 * var(--t)); }
  .stp__big { font-size: calc(84 * var(--u)); }
  .stp__p { min-height: calc(136 * var(--u)); }
  .stp__p h3 { font-size: calc(36 * var(--u)); }
  .stp__p p { font-size: calc(16 * var(--t)); }
  .stp__w { font-size: calc(13.5 * var(--t)); }
  .tools4__t { font-size: calc(54 * var(--u)); }
  .tool4 { min-height: calc(200 * var(--u)); }
  .tool4__tt { font-size: calc(30 * var(--u)); }
  .tool4__d { font-size: calc(14 * var(--t)); }
  .app__b { font-size: calc(28 * var(--u)); }
  .phone { width: calc(340 * var(--t)); }
  .gal { column-gap: calc(16 * var(--u)); }
  .qa4 .qa__head .d { font-size: calc(88 * var(--u)); }
  .ct4__top .big { font-size: calc(260 * var(--u)); }
  .route { height: calc(170 * var(--u)); }
  .route__pin { font-size: calc(26 * var(--u)); }
  .office { min-height: calc(320 * var(--u)); }
  .office h3 { font-size: calc(44 * var(--u)); }
  .sign4__word { font-size: calc(230 * var(--u)); }
  .sign4__sub { font-size: calc(28 * var(--u)); }
}/* en pantallas grandes también crecen la barra, los botones y las etiquetas (si no, al lado de los títulos
   grandes quedaban diminutos) */
@media (min-width: 1700px) {
  .nav { height: calc(66 * var(--t)); padding: 0 calc(9 * var(--t)) 0 calc(22 * var(--t)); }
  .nav__links a { font-size: calc(14 * var(--t)); padding: calc(9 * var(--t)) calc(14 * var(--t)); }
  .brand__mk { width: calc(46 * var(--t)); height: calc(46 * var(--t)); }
  .brand__mk svg { width: calc(32 * var(--t)); }
  .brand__n { font-size: calc(19 * var(--t)); }
  .brand__s { font-size: calc(10 * var(--t)); }
  .tema { width: calc(46 * var(--t)); height: calc(46 * var(--t)); }
  .tema svg { width: calc(20 * var(--t)); height: calc(20 * var(--t)); }
  .btn { --h: calc(56 * var(--t)); gap: calc(16 * var(--t)); padding-left: calc(26 * var(--t)); font-size: calc(14.5 * var(--t)); }
  .btn--sm { --h: calc(46 * var(--t)); gap: calc(12 * var(--t)); padding-left: calc(20 * var(--t)); font-size: calc(13.5 * var(--t)); }
  .btn--plain { padding: 0 calc(26 * var(--t)); }
  .btn__i svg { width: calc(16 * var(--t)); height: calc(16 * var(--t)); }
  .hero4 .tag { font-size: calc(12 * var(--t)); padding: calc(9 * var(--t)) calc(16 * var(--t)) calc(9 * var(--t)) calc(12 * var(--t)); }
  .k { font-size: calc(12 * var(--t)); }
  .k b { min-width: calc(34 * var(--t)); height: calc(24 * var(--t)); }
  .wa__btn { width: calc(62 * var(--t)); height: calc(62 * var(--t)); }
  .wa__ico { width: calc(28 * var(--t)); height: calc(28 * var(--t)); }
  .act { min-height: calc(66 * var(--t)); gap: calc(14 * var(--t)); padding: calc(8 * var(--t)) calc(24 * var(--t)) calc(8 * var(--t)) calc(8 * var(--t)); }
  .act__i { width: calc(50 * var(--t)); height: calc(50 * var(--t)); }
  .act__i svg { width: calc(22 * var(--t)); height: calc(22 * var(--t)); }
  .act__t strong { font-size: calc(15 * var(--t)); }
  .act__t small { font-size: calc(12 * var(--t)); }
  .act__go { width: calc(16 * var(--t)); height: calc(16 * var(--t)); }
  .act--sm { min-height: calc(48 * var(--t)); gap: calc(10 * var(--t)); padding: calc(5 * var(--t)) calc(18 * var(--t)) calc(5 * var(--t)) calc(5 * var(--t)); }
  .act--sm .act__i { width: calc(38 * var(--t)); height: calc(38 * var(--t)); }
  .act--sm .act__i svg { width: calc(18 * var(--t)); height: calc(18 * var(--t)); }
  .act--sm .act__t strong { font-size: calc(13.5 * var(--t)); }
  .atajo { min-height: calc(44 * var(--t)); padding: 0 calc(16 * var(--t)); font-size: calc(13.5 * var(--t)); }
  .nav__cta .atajo { min-height: calc(48 * var(--t)); padding: 0 calc(14 * var(--t)); }
}

/* ============ herramientas online: que se note ============ */
/* pedir turno y subir estudios, grandes y con los colores de sus botones: el turno en verde y los estudios en el
   color opuesto al fondo. (Va al final para ganarle al modo claro) */
.tools4__grid .tool4--hl {
  --hl-bg: linear-gradient(140deg, #2ccabb, #12b7a9 50%, #0a9d90); --hl-fg: #00221e; --hl-d: #00221e;
  --hl-glow: rgba(0, 20, 18, .3);
  --ic-bg: rgba(255, 255, 255, .28); --ic-fg: #00221e; --go-bg: #00221e; --go-fg: #fff;
  min-height: 250px; padding: clamp(26px, 2.8vw, 40px); color: var(--hl-fg); border-color: transparent;
  box-shadow: 0 34px 60px -34px var(--hl-glow);
}
.tools4__grid .tool4.tool4--hl { background: var(--hl-bg); }
.tools4__grid .tool4--est {
  --hl-bg: linear-gradient(140deg, #ffffff, #ccefe9); --hl-fg: #003b36; --hl-d: rgba(0, 59, 54, .68);
  --hl-glow: rgba(0, 36, 31, .7);
  --ic-bg: #09978a; --ic-fg: #fff; --go-bg: #003b36; --go-fg: #fff;
}
:root:not([data-theme="dark"]) .tools4__grid .tool4--est {
  --hl-bg: linear-gradient(140deg, #126057, #003b36); --hl-fg: #fff; --hl-d: rgba(230, 246, 243, .75);
  --hl-glow: rgba(0, 59, 54, .55); --go-bg: #fff; --go-fg: #003b36;
}
.tools4__grid .tool4--hl:hover { transform: translateY(-4px); }
/* el ícono arriba y el texto abajo, como un cartel */
.tools4__grid .tool4--hl .tool4__ico, .tools4__grid .tool4--hl.tool4:hover .tool4__ico { width: 76px; height: 76px; margin-bottom: auto; border-radius: 24px; background: var(--ic-bg); color: var(--ic-fg); }
.tools4__grid .tool4--hl.tool4:hover .tool4__ico { transform: rotate(-6deg) scale(1.05); }
.tools4__grid .tool4--hl .tool4__ico svg { width: 40px; height: 40px; }
.tools4__grid .tool4--hl .tool4__tt { margin-top: 26px; font-size: clamp(34px, 3.2vw, 52px); }
.tools4__grid .tool4--hl .tool4__d { max-width: 42ch; font-size: 15px; color: var(--hl-d); }
.tools4__grid .tool4--hl .go, .tools4__grid .tool4--hl:hover .go { width: 58px; height: 58px; top: clamp(26px, 2.8vw, 40px); right: clamp(26px, 2.8vw, 40px); background: var(--go-bg); color: var(--go-fg); border-color: var(--go-bg); }

/* las tres herramientas para pacientes, de a tres, con el ícono lleno y la acción escrita, para que no pasen de largo.
   "Contanos tu experiencia" es otra cosa (dar la opinión), así que va aparte: una franja ancha con su botón */
.tools4__grid .tool4:not(.tool4--hl):not(.tool4--op) { grid-column: span 4; border-color: rgba(18, 183, 169, .32); }
.tools4__grid .tool4:not(.tool4--hl) .tool4__ico { background: #12b7a9; color: #00221e; }
.tools4__grid .tool4:not(.tool4--hl):hover { transform: translateY(-3px); border-color: #12b7a9; }
.tool4__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; font-size: 14px; font-weight: 600; color: #77d4c8; }
.tool4__cta svg { width: 16px; height: 16px; flex: none; transition: transform .4s var(--ease); }
.tool4:hover .tool4__cta svg { transform: translateX(4px); }
.tools4__grid .tool4:not(.tool4--hl) .go { display: none; }
.tools4__grid .tool4--op { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: clamp(18px, 2.4vw, 32px); row-gap: 4px; align-items: center; padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.8vw, 40px); background: rgba(18, 183, 169, .12); border-color: rgba(18, 183, 169, .45); }
.tools4__grid .tool4--op .tool4__ico { grid-row: 1 / span 2; width: 64px; height: 64px; margin: 0; border-radius: 20px; }
.tools4__grid .tool4--op .tool4__ico svg { width: 34px; height: 34px; }
.tools4__grid .tool4--op .tool4__tt { align-self: end; padding-right: 0; font-size: clamp(26px, 2.4vw, 36px); }
.tools4__grid .tool4--op .tool4__d { align-self: start; max-width: 62ch; font-size: 15px; }
.tools4__grid .tool4--op .tool4__cta { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 15px 24px; border-radius: 999px; background: #12b7a9; color: #00221e; font-size: 15px; white-space: nowrap; transition: transform .4s var(--ease); }
.tools4__grid .tool4--op:hover .tool4__cta { transform: translateY(-2px); }
:root:not([data-theme="dark"]) .tools4__grid .tool4:not(.tool4--hl):not(.tool4--op) { border-color: rgba(9, 151, 138, .3); }
:root:not([data-theme="dark"]) .tools4__grid .tool4--op { background: #dcefeb; border-color: rgba(9, 151, 138, .4); }
:root:not([data-theme="dark"]) .tool4__cta { color: #006a60; }
:root:not([data-theme="dark"]) .tools4__grid .tool4--op .tool4__cta { color: #00221e; }
@media (max-width: 900px) {
  .tool4__cta { display: none; }
  .tools4__grid .tool4:not(.tool4--hl):not(.tool4--op) { grid-column: auto; }
  .tools4__grid .tool4:not(.tool4--hl):not(.tool4--op) .go { display: grid; }
  .tools4__grid .tool4--op { grid-template-columns: 52px minmax(0, 1fr); padding: 20px 18px; row-gap: 2px; }
  .tools4__grid .tool4--op .tool4__ico { width: 52px; height: 52px; border-radius: 16px; }
  .tools4__grid .tool4--op .tool4__ico svg { width: 28px; height: 28px; }
  .tools4__grid .tool4--op .tool4__tt { font-size: 24px; }
  .tools4__grid .tool4--op .tool4__d { grid-column: 1 / -1; margin-top: 8px; font-size: 14px; }
  .tools4__grid .tool4--op .tool4__cta { display: flex; grid-column: 1 / -1; grid-row: auto; justify-content: center; margin-top: 14px; }
}
@media (min-width: 1700px) {
  .tool4__cta { font-size: calc(14 * var(--t)); }
  .tools4__grid .tool4--op .tool4__ico { width: calc(64 * var(--u)); height: calc(64 * var(--u)); }
  .tools4__grid .tool4--op .tool4__tt { font-size: calc(36 * var(--u)); }
  .tools4__grid .tool4--op .tool4__d, .tools4__grid .tool4--op .tool4__cta { font-size: calc(15 * var(--t)); }
}

/* cada ícono hace lo suyo: el tilde del turno se dibuja, la flecha de los estudios sube, las líneas de los
   formularios se escriben, la luna se mece y suelta una "z", y el globo de la opinión escribe */
.tool4__ico svg * { transform-box: fill-box; transform-origin: center; }
.ic-check, .ic-ln { stroke-dasharray: 1 2; }
.ic-check { animation: icTilde 3.6s var(--ease) infinite; }
@keyframes icTilde { 0%, 10% { stroke-dashoffset: 1; opacity: 1; } 38%, 82% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.ic-up { animation: icSube 2.8s var(--ease) infinite; }
@keyframes icSube { 0% { transform: translateY(6px); opacity: 0; } 14% { opacity: 1; } 32%, 80% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } }
.ic-ln { animation: icEscribe 4.2s ease-in-out infinite; }
.ic-ln + .ic-ln { animation-delay: .35s; }
.ic-ln + .ic-ln + .ic-ln { animation-delay: .7s; }
@keyframes icEscribe { 0%, 8% { stroke-dashoffset: 1; opacity: 1; } 30%, 80% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.ic-moon { animation: icMece 5s ease-in-out infinite; }
@keyframes icMece { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(7deg); } }
.ic-z { animation: icZ 2.8s ease-in-out infinite; }
@keyframes icZ { 0% { opacity: 0; transform: translate(-3px, 4px) scale(.6); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(3px, -5px) scale(1.15); } }
.ic-dot { animation: icTipea 1.4s ease-in-out infinite; }
.ic-dot + .ic-dot { animation-delay: .18s; }
.ic-dot + .ic-dot + .ic-dot { animation-delay: .36s; }
@keyframes icTipea { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
/* en el celular van en fila, como las otras, pero más grandes y con sus colores */
@media (max-width: 900px) {
  .tools4__grid .tool4--hl { min-height: 0; grid-template-columns: 60px minmax(0, 1fr); padding: 22px 76px 22px 20px; }
  .tools4__grid .tool4--hl .tool4__ico, .tools4__grid .tool4--hl.tool4:hover .tool4__ico { width: 60px; height: 60px; margin: 0; border-radius: 18px; }
  .tools4__grid .tool4--hl .tool4__ico svg { width: 32px; height: 32px; }
  .tools4__grid .tool4--hl .tool4__tt { margin-top: 0; font-size: 28px; }
  .tools4__grid .tool4--hl .tool4__d { font-size: 14px; }
  .tools4__grid .tool4--hl .go, .tools4__grid .tool4--hl:hover .go { width: 48px; height: 48px; top: 50%; right: 16px; margin-top: -24px; }
}
@media (min-width: 1700px) {
  .tools4__grid .tool4--hl { min-height: calc(250 * var(--u)); padding: calc(40 * var(--u)); }
  .tools4__grid .tool4--hl .tool4__ico, .tools4__grid .tool4--hl.tool4:hover .tool4__ico { width: calc(76 * var(--u)); height: calc(76 * var(--u)); border-radius: calc(24 * var(--u)); }
  .tools4__grid .tool4--hl .tool4__ico svg { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
  .tools4__grid .tool4--hl .tool4__tt { font-size: calc(52 * var(--u)); }
  .tools4__grid .tool4--hl .tool4__d { font-size: calc(15 * var(--t)); }
  .tools4__grid .tool4--hl .go, .tools4__grid .tool4--hl:hover .go { width: calc(58 * var(--u)); height: calc(58 * var(--u)); top: calc(40 * var(--u)); right: calc(40 * var(--u)); }
}
/* ============ fluidez ============ */
/* lo que se anima sin parar descansa mientras su sección no está en pantalla, y sigue al volver a verla:
   así la compu no gasta en dibujar lo que no se ve (va al final para ganarle a cada animación) */
.s:not(.is-vis) *, .s:not(.is-vis) *::before, .s:not(.is-vis) *::after,
.hero4:not(.is-vis) *, .hero4:not(.is-vis) *::before, .hero4:not(.is-vis) *::after { animation-play-state: paused; }