/* ==========================================================================
   Q·RA — Sistema visual oficial · KV Campaña Opción 1 · Iconografía Propuesta 2
   ========================================================================== */

:root{
  --primary:#1D4F91;
  --secondary:#00A5DF;
  --tertiary:#E31C79;
  /* A1 — alias semanticos. Mismos hex verificados contra el logotipo oficial
     (estrategia-proyecto.md, tesis 9). Se nombran por color para que el
     sistema de interaccion no dependa de recordar que --secondary es turquesa. */
  --turquesa:#00A5DF;
  --magenta:#E31C79;
  --white:#FFFFFF;
  --bg-light:#F8FAFC;
  --outline:#E2E8F0;
  --text:#0F172A;
  --text-2:#64748B;

  --shell:1280px;
  --gutter:clamp(20px,4vw,64px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --t:280ms var(--ease);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Roboto,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.03em;line-height:1.06;font-weight:500}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

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

.skip-link{position:absolute;left:-9999px;top:0;background:var(--primary);color:#fff;padding:12px 20px;z-index:200}
.skip-link:focus{left:12px;top:12px}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{
  display:block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--secondary);margin-bottom:10px;
}
/* El tracking ancho de .eyebrow (pensado para etiquetas de varias palabras)
   abre demasiado el logotipo "Q·RA" cuando es todo el contenido del bloque. */
.eyebrow-lockup{letter-spacing:normal}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 28px;border-radius:999px;
  font-size:15px;font-weight:500;letter-spacing:.01em;
  transition:background var(--t),color var(--t),transform var(--t),box-shadow var(--t);
  cursor:pointer;border:1px solid transparent;
}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:#18437B;transform:translateY(-1px)}
.btn-magenta{background:var(--tertiary);color:#fff}
.btn-magenta:hover{background:#C41567;transform:translateY(-1px)}
.btn-light{background:#fff;color:var(--primary)}
.btn-light:hover{background:var(--bg-light);transform:translateY(-1px)}

.link-cta{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-weight:500;color:var(--primary);
}
.link-cta span{transition:transform var(--t)}
.link-cta:hover span{transform:translateX(5px)}

/* ---------- Formas orgánicas de marca (KV Opción 1) ---------- */
.shape{position:absolute;pointer-events:none;border-radius:999px}
.shape::before,.shape::after{content:"";position:absolute;border-radius:999px;background:inherit}

/* “cuenta” vertical: dos círculos unidos */
.bead{position:absolute;pointer-events:none}

.shape-a{
  width:78px;height:190px;background:var(--secondary);opacity:.16;
  top:-40px;right:8%;
  -webkit-mask:radial-gradient(circle at 50% 26%,#000 49%,transparent 50%),
        radial-gradient(circle at 50% 74%,#000 49%,transparent 50%),
        linear-gradient(#000,#000) 50% 50%/26% 60% no-repeat;
  mask:radial-gradient(circle at 50% 26%,#000 49%,transparent 50%),
        radial-gradient(circle at 50% 74%,#000 49%,transparent 50%),
        linear-gradient(#000,#000) 50% 50%/26% 60% no-repeat;
}
.shape-b{
  width:120px;height:56px;background:var(--tertiary);opacity:.14;
  right:6%;bottom:-18px;
  -webkit-mask:radial-gradient(circle at 26% 50%,#000 49%,transparent 50%),
        radial-gradient(circle at 74% 50%,#000 49%,transparent 50%),
        linear-gradient(#000,#000) 50% 50%/60% 26% no-repeat;
  mask:radial-gradient(circle at 26% 50%,#000 49%,transparent 50%),
        radial-gradient(circle at 74% 50%,#000 49%,transparent 50%),
        linear-gradient(#000,#000) 50% 50%/60% 26% no-repeat;
}
.shape-c{
  width:96px;height:236px;background:var(--secondary);opacity:.5;
  left:4%;top:-52px;
  -webkit-mask:radial-gradient(circle at 50% 22%,#000 49%,transparent 50%),
        radial-gradient(circle at 50% 78%,#000 49%,transparent 50%),
        linear-gradient(#000,#000) 50% 50%/24% 64% no-repeat;
  mask:radial-gradient(circle at 50% 22%,#000 49%,transparent 50%),
        radial-gradient(circle at 50% 78%,#000 49%,transparent 50%),
        linear-gradient(#000,#000) 50% 50%/24% 64% no-repeat;
}
.shape-d{
  width:150px;height:74px;background:var(--tertiary);opacity:.85;
  left:-46px;bottom:14%;
  -webkit-mask:radial-gradient(circle at 26% 50%,#000 49%,transparent 50%),
        radial-gradient(circle at 74% 50%,#000 49%,transparent 50%),
        linear-gradient(#000,#000) 50% 50%/60% 26% no-repeat;
  mask:radial-gradient(circle at 26% 50%,#000 49%,transparent 50%),
        radial-gradient(circle at 74% 50%,#000 49%,transparent 50%),
        linear-gradient(#000,#000) 50% 50%/60% 26% no-repeat;
}

/* ==========================================================================
   1. HEADER
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t),box-shadow var(--t);
}
.site-header.is-stuck{border-color:var(--outline)}
.header-inner{display:flex;align-items:center;gap:32px;height:88px}
.brand img{height:38px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:34px}
.nav a{
  font-size:15px;font-weight:500;color:var(--text);
  position:relative;padding:6px 0;transition:color var(--t);
}
.nav a:not(.btn):hover{color:var(--primary)}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--tertiary);transition:width var(--t);
}
.nav a:not(.btn):hover::after,
.nav a[aria-current="page"]::after{width:100%}
.nav-cta{margin-left:6px}

.nav-toggle{display:none;width:48px;height:48px;background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:6px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--text);transition:transform var(--t),opacity var(--t)}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ==========================================================================
   2. HERO — carrusel a todo el ancho
   El video es la pieza dominante del Home. Sangra a los dos bordes: no vive
   dentro de .shell ni de ninguna cuadrícula.
   ========================================================================== */
.hero{position:relative;background:var(--text);overflow:hidden}

/* ==========================================================================
   3. BLOQUE INSTITUCIONAL  (fusión de la apertura + "Qué es Q·RA")
   Tipografía sobre fondo claro y mucho aire. No debe parecerse al hero:
   allí manda la fotografía a sangre, aquí manda el texto.
   ========================================================================== */
.brand-intro{
  position:relative;overflow:hidden;background:var(--bg-light);
  padding:clamp(80px,11vw,160px) 0;
}
.brand-intro-inner{max-width:860px}
.brand-intro .eyebrow{margin-bottom:20px}
.display{font-size:clamp(48px,5.5vw,84px);font-weight:500;color:var(--text);letter-spacing:-.045em}

.home-campaign-message{
  margin:18px 0 26px;
  color:#1D4F91;
  font-size:clamp(34px,3.4vw,58px);
  line-height:.98;
  font-weight:400;
  letter-spacing:-.04em;
}
.home-campaign-message strong{font-weight:900}
.home-campaign-message .campaign-dot{color:#E31C79}

/* El punto medial de "Por·ti" es el mismo signo que separa Q·RA, y tiene que
   leerse como parte de la palabra, no como un separador suelto.

   Hereda el peso de la negra que lo rodea: en peso normal el punto sale fino
   y pequeño contra las letras de 900, y el conjunto se rompe en tres piezas.
   Sin margen propio y con el tracking del titular, las tres partes quedan
   pegadas como en el logotipo. */
.campaign-dot{font-weight:900;margin:0;letter-spacing:inherit;color:var(--tertiary)}

/* Bloque de marca "tu·solucion": mismo recurso que Por·ti y Q·RA — las dos
   palabras en el color del texto y solo el punto en magenta. */
.model .lock,
.medical-hero-copy .lock{font-style:normal;font-weight:700;color:inherit}

/* .btn-flecha se absorbio en .flecha-mov (Bloque A). */

.lead{max-width:600px;font-size:clamp(16px,1.2vw,20px);color:var(--text-2);margin-bottom:34px}
/* Introducción institucional: menor peso visual que el lead general. */
.lead-compact{max-width:52ch;font-size:clamp(16px,1.1vw,19px);line-height:1.6;margin-bottom:36px}

/* ==========================================================================
   4. SOY PACIENTE / SOY MÉDICO
   ========================================================================== */
.paths{display:grid;grid-template-columns:1fr 1fr}
.path{position:relative;min-height:clamp(420px,52vw,620px);overflow:hidden;display:flex;align-items:flex-end}
.path img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 520ms var(--ease)}
.path::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(29,79,145,0) 34%,rgba(29,79,145,.86) 100%);
}
.path:hover img{transform:scale(1.03)}
.path-copy{position:relative;z-index:1;padding:clamp(28px,3.4vw,52px);color:#fff;max-width:520px}
.path-copy h2{font-size:clamp(30px,2.8vw,44px);font-weight:500}
.path-copy p{margin:12px 0 24px;font-size:17px;color:rgba(255,255,255,.9);max-width:36ch}

/* ==========================================================================
   5. NECESITO ORIENTACIÓN
   ========================================================================== */
.guidance{position:relative;overflow:hidden;background:var(--primary);color:#fff;padding:clamp(72px,9vw,128px) 0}
.guidance-grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);
  gap:clamp(40px,6vw,80px);align-items:center;
}
.guidance-copy{max-width:600px}
.guidance-copy h2{font-size:clamp(36px,4vw,64px);font-weight:400}
.guidance-copy p{margin:24px 0 34px;font-size:clamp(16px,1.2vw,20px);color:rgba(255,255,255,.86);max-width:640px}
.guidance-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.guidance-actions .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.guidance-actions .btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff}
/* .btn declara display:inline-flex y ganaría al display:none del navegador. */
.guidance-actions .btn[hidden]{display:none}

.guidance-device{
  position:relative;justify-self:center;
  display:flex;align-items:center;justify-content:center;
  min-width:0;overflow:visible;
  width:min(100%,500px,44vh);
}
.device-img{
  display:block;width:100%;height:auto;max-height:780px;
  object-fit:contain;object-position:center;
  filter:drop-shadow(0 30px 60px rgba(8,26,49,.4));
}
.device-screen{
  position:absolute;left:16.7%;top:1.9%;width:60%;height:84.3%;
  border-radius:5%/3.4%;
  padding:6% 6% 5%;
  display:flex;flex-direction:column;
  color:var(--text);text-align:left;
  container-type:inline-size;
}
.device-logo{
  display:block;width:min(68%,230px);max-width:230px;height:auto;
  object-fit:contain;margin:0 0 8%;
}
.device-question{font-size:5.6cqw;font-weight:500;letter-spacing:-.02em;color:var(--primary);margin-bottom:6%}
.device-list{display:flex;flex-direction:column;gap:3.4%}
.device-list li{
  background:#fff;border:1px solid var(--outline);border-radius:12px;
  padding:4.4% 5%;font-size:4.4cqw;line-height:1.25;color:var(--text);
}
.device-list li:first-child{border-color:var(--secondary);box-shadow:0 0 0 1px var(--secondary)}
.device-cta{
  margin-top:auto;background:var(--tertiary);color:#fff;text-align:center;
  border-radius:999px;padding:4.6% 0;font-size:4.4cqw;font-weight:500;
}

/* ==========================================================================
   6. SERVICIOS MÉDICOS
   ========================================================================== */
.services{padding:clamp(80px,10vw,140px) 0;background:var(--white)}
.section-head{max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.section-head h2{font-size:clamp(36px,4vw,64px);font-weight:400;color:var(--text)}
/* El logotipo Q·RA dentro de un titular fino va en negrita (es marca, no
   texto corrido). El punto conserva su magenta. */
.section-head h2 .lock{font-weight:700}
.section-head .link-cta{margin-top:20px}

/* Flecha magenta a la derecha del título (Revista, Lo Nuevo, Alianzas).
   Solo la flecha navega; el texto descriptivo vive en el aria-label. */
.section-head-row{display:block}
.section-head-row h2{display:inline;margin:0}
.section-flecha{
  display:inline;color:var(--magenta);
  text-decoration:none;line-height:1;white-space:nowrap;margin-left:0.35em;
}
.section-flecha .flecha-mov{display:inline}
.section-flecha .flecha-mov::after{font-size:clamp(24px,2.2vw,30px);transition:transform 260ms var(--ease)}
.section-flecha:hover .flecha-mov::after,.section-flecha:focus-visible .flecha-mov::after{transform:translateX(8px)}
@media (max-width:640px){.section-head-row{align-items:baseline}}
@media (prefers-reduced-motion:reduce){
  .section-flecha,.section-flecha .flecha-mov::after{transition:none}
}
.section-intro{margin-top:22px;font-size:clamp(16px,1.15vw,19px);color:var(--text-2);max-width:62ch}

.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,32px)}
.service{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(30px,3vw,44px);border-radius:var(--r);
  background:var(--bg-light);border:1px solid transparent;
  min-height:clamp(280px,26vw,340px);
  transition:background var(--t),border-color var(--t),transform var(--t);
}
.service:hover{background:#fff;border-color:var(--outline);transform:translateY(-3px)}
.service-icon{width:48px;height:48px;object-fit:contain;object-position:left center;margin-bottom:28px}
/* PENDIENTE F1-C: mientras no exista icono oficial para "Conocimiento", la tarjeta
   reserva la misma altura que las demás. Sin marco ni etiqueta visible. */
.service--no-icon{padding-top:calc(clamp(30px,3vw,44px) + 48px + 28px)}
.service h3{font-size:clamp(22px,2vw,30px);font-weight:500;color:var(--primary);max-width:14ch}
.service p{margin-top:14px;font-size:16px;color:var(--text-2);max-width:34ch}
.service .arrow{margin-top:auto;padding-top:26px;font-size:22px;color:var(--tertiary);transition:transform var(--t)}


/* ==========================================================================
   6b. CÓMO OPERA Q·RA  (sección nueva · Fase 1)
   ========================================================================== */
.model{padding:clamp(80px,10vw,140px) 0;background:var(--bg-light)}
.model-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);list-style:none}
.model-item{
  position:relative;padding-top:26px;
  border-top:1px solid var(--outline);
}
.model-index{
  display:block;font-size:13px;font-weight:700;letter-spacing:.14em;
  color:var(--secondary);margin-bottom:24px;
}
.model-item h3{font-size:clamp(21px,1.8vw,27px);font-weight:500;color:var(--primary);max-width:18ch}
.model-item p{margin-top:14px;font-size:16px;color:var(--text-2);max-width:38ch}

/* ==========================================================================
   7. MAGAZINE
   ========================================================================== */
.knowledge{padding:clamp(80px,10vw,140px) 0;background:var(--bg-light)}
.knowledge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px)}
.article{display:block;transition:transform var(--t)}
.article:hover{transform:translateY(-3px)}
.article-media{overflow:hidden;border-radius:var(--r);aspect-ratio:16/10;margin-bottom:18px;background:var(--outline)}
.article-media img{width:100%;height:100%;object-fit:cover;transition:transform 460ms var(--ease)}
.article:hover .article-media img{transform:scale(1.03)}
.article h3{font-size:clamp(19px,1.5vw,24px);font-weight:500;max-width:26ch}

/* ==========================================================================
   7b. LO NUEVO EN Q·RA  (sección nueva · Fase 1)
   ========================================================================== */
.updates{padding:clamp(80px,10vw,140px) 0;background:var(--white)}

/* ---------- Alianzas ---------- */
.alliances{padding:clamp(72px,9vw,124px) 0;background:var(--bg-light)}
.alliances .section-head{max-width:760px}
.alliances .section-sub{margin-top:18px}
.alliance-grid{
  list-style:none;margin:clamp(36px,4vw,56px) 0 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);
}
.alliance{
  background:#fff;border:1px solid var(--outline);border-radius:var(--r);
  padding:clamp(24px,2.4vw,32px);
}
.alliance h3{font-size:19px;font-weight:500;color:var(--primary);margin-bottom:10px}
.alliance p{font-size:15px;line-height:1.55;color:var(--text-2)}
/* El acceso a la alianza pasa siempre por el especialista tratante. */
.alliance-access{
  margin-top:clamp(28px,3vw,40px);max-width:70ch;
  font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:var(--text);
  border-left:3px solid var(--tertiary);padding-left:20px;
}
@media (max-width:900px){ .alliance-grid{grid-template-columns:1fr} }

/* ---------- Ajustes de la revision de textos (11 ago 2026) ---------- */
/* Regla magenta bajo el claim del bloque institucional. */
.brand-rule{
  display:block;width:88px;height:4px;background:var(--tertiary);
  margin:clamp(20px,2.2vw,30px) 0 clamp(22px,2.4vw,32px);border-radius:2px;
}
/* La bajada va en dos frases separadas, no en una sola linea larga. */
.brand-intro-inner .lead-grow{margin-top:8px;color:var(--text-2)}
.brand-intro-cta{margin-top:clamp(22px,2.4vw,32px);font-size:17px}

/* Las tarjetas de ruta perdieron su boton: la invitacion al clic la da esta linea. */
/* B14 — firma de campana al cierre de "Que estamos haciendo". */
.updates-firma{
  margin:clamp(34px,4vw,52px) 0 0;
  font-size:clamp(24px,2.6vw,38px); font-weight:300;
  letter-spacing:-.03em; line-height:1; color:var(--primary);
}
.updates-firma .lock{font-weight:900}
.updates-firma strong,.updates-firma .campaign-dot{white-space:nowrap}

/* .path-go se absorbio: la flecha va junto al titulo, que ya nombra la ruta. */
.path-copy h2.flecha-mov{gap:14px}

/* El punto del logotipo tambien es magenta cuando Q·RA se escribe en un antetitulo. */
.eyebrow-brand .campaign-dot{color:var(--tertiary);font-weight:700}
.eyebrow-brand{letter-spacing:.16em}

/* CTA turquesa: tercer nivel entre el azul institucional y el magenta de campana. */
.btn-turquesa{background:var(--secondary);color:#fff}
.btn-turquesa:hover{background:#0092C4;transform:translateY(-1px)}

/* "tu·solucion" — el enfasis esta en de quien es la solucion. El color lo
   lleva el punto de marca, no la palabra. */

/* Firma de campana dentro de la tarjeta de social y alianzas. */
.update-tag{
  margin-top:8px;font-size:14px;font-weight:500;color:var(--tertiary);
}

/* .pn-item declara display:flex y ganaria al display:none del navegador. */
.pn-item[hidden]{display:none}

/* El pie cierra con la marca y su claim, no con un descriptor. */
/* No flex: en flex, "Q", el punto y "RA" son tres items y el gap se mete
   alrededor del punto, abriendo el logotipo. Inline mantiene Q·RA pegado;
   la separación con la frase la da el margen. */
.footer-claim{font-weight:700;letter-spacing:.02em}
.footer-claim .campaign-dot{font-weight:900}
.footer-claim-frase{margin-left:12px;font-weight:300;letter-spacing:0;opacity:.9}

/* ---------- Pie: la direccion abre Google Maps (E10) ---------- */
.footer-mapa{
  display:inline-flex; align-items:flex-start; gap:8px;
  text-decoration:none; color:inherit;
}
.footer-mapa-icono{flex:0 0 auto; margin-top:2px; color:var(--tertiary); transition:transform 180ms var(--ease)}
.footer-mapa:hover .footer-mapa-icono,
.footer-mapa:focus-visible .footer-mapa-icono{transform:translateY(-2px)}
.footer-mapa:hover span,
.footer-mapa:focus-visible span{text-decoration:underline; text-underline-offset:3px}

/* Flechas de los enlaces de Soy medico en magenta: el enlace sigue siendo azul,
   la flecha es la que marca el movimiento. */
.medical-page .link-cta span{color:var(--tertiary)}

/* ---------- Conversemos — pagina propia ----------
   Rediagramada: al dejar de ser una franja dentro de Contactanos y pasar a ser
   la pagina entera, la reja de dos columnas apretaba el formulario contra el
   texto. Ahora el encabezado va centrado y el formulario debajo, en tarjeta. */
.talk-page .contact-talk{padding:clamp(64px,8vw,112px) 0 clamp(72px,9vw,120px)}
.talk-page .contact-talk-grid{display:block;max-width:none}
.talk-page .contact-talk-copy{
  max-width:64ch;margin:0 auto clamp(40px,4.5vw,64px);text-align:center;
}
.talk-page .contact-talk-copy h1{max-width:none;margin-inline:auto}
.talk-page .contact-talk-copy > p{margin-inline:auto}
.talk-page .contact-talk-scope{
  margin-inline:auto;border-left:0;border-top:1px solid rgba(255,255,255,.24);
  padding:18px 0 0;max-width:56ch;
}
.talk-page .ct-form{max-width:720px;margin-inline:auto}
@media (max-width:760px){
  .talk-page .contact-talk-copy{text-align:left}
  .talk-page .contact-talk-scope{margin-inline:0}
}
.update-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px)}
.update{display:block;transition:transform var(--t)}
.update:hover{transform:translateY(-3px)}
.update-media{
  overflow:hidden;border-radius:var(--r);aspect-ratio:4/5;
  background:var(--outline);margin-bottom:18px;
}
.update-media img{width:100%;height:100%;object-fit:cover;transition:transform 460ms var(--ease)}
.update:hover .update-media img{transform:scale(1.04)}
.update-body{padding-top:18px;border-top:1px solid var(--outline);transition:border-color var(--t)}
.update:hover .update-body{border-color:var(--tertiary)}
.update-index{
  display:block;font-size:12px;font-weight:700;letter-spacing:.14em;
  color:var(--text-2);margin-bottom:12px;
}
.update-body .eyebrow{margin-bottom:8px}
.update h3{font-size:clamp(17px,1.3vw,21px);font-weight:500;max-width:22ch}

/* ==========================================================================
   8. CIERRE DE CAMPAÑA
   ========================================================================== */
.closing{position:relative;overflow:hidden;background:var(--primary);color:#fff}
.closing-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center;
  padding-block:clamp(72px,9vw,128px)}
.closing-copy{max-width:560px}
.closing-title{font-size:clamp(40px,4.6vw,72px);font-weight:400;letter-spacing:-.04em;line-height:1.06}
.closing-title strong{font-weight:900}
.closing-title .campaign-dot{color:var(--tertiary)}
/* El bloque de marca nunca se parte: el punto entre las dos palabras se leeria
   como punto final si quedara al cierre de una linea. */
.closing-title strong,.closing-title .campaign-dot,
.hero-slide-title .campaign-dot,
#model-title .lock,#model-title .campaign-dot,
#med-intro .lock,#med-intro .campaign-dot{white-space:nowrap}
.closing-copy p{margin:26px 0 34px;font-size:clamp(16px,1.2vw,20px);color:rgba(255,255,255,.86);max-width:600px}
.closing-photo{margin:0;border-radius:999px;overflow:hidden;aspect-ratio:1;width:min(100%,480px);justify-self:end}
.closing-photo img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.site-footer{background:#0E3A6E;color:#fff;padding:clamp(56px,6vw,80px) 0 34px}
.footer-inner{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.footer-logo{height:44px;width:auto}
.footer-nav{display:flex;gap:30px;flex-wrap:wrap;margin-left:auto}
.footer-nav a{font-size:15px;color:rgba(255,255,255,.86);transition:color var(--t)}
.footer-nav a:hover{color:#fff}
.footer-legal{
  margin-top:46px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13px;color:rgba(255,255,255,.62);
}
.footer-contact{display:flex;flex-wrap:wrap;gap:6px 22px;max-width:70ch}
.footer-contact a{color:rgba(255,255,255,.82);transition:color var(--t)}
.footer-contact a:hover{color:#fff}
.legal-links{display:flex;gap:22px}
.legal-links a{transition:color var(--t)}
.legal-links a:hover{color:#fff}

/* ==========================================================================
   REVEAL
   ========================================================================== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .guidance-grid{grid-template-columns:1fr;gap:52px}
  .knowledge-grid{grid-template-columns:1fr}
  .service-grid{grid-template-columns:1fr 1fr}
  .closing-grid{grid-template-columns:1fr}
  .closing-photo{justify-self:start;width:min(100%,380px)}
  .paths{grid-template-columns:1fr}
  .model-list{grid-template-columns:1fr}
  .update-grid{grid-template-columns:1fr 1fr}   /* tablet */
}

@media (max-width:820px){
  body{font-size:16px}
  .header-inner{height:72px;gap:16px}
  .brand img{height:32px}
  .nav-toggle{display:flex;margin-left:auto}
  .nav{
    position:fixed;inset:72px 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--outline);
    padding:8px 24px 24px;margin:0;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity var(--t),transform var(--t);
    max-height:calc(100vh - 72px);overflow-y:auto;
  }
  .nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav a:not(.btn){padding:16px 0;border-bottom:1px solid var(--outline);font-size:17px}
  .nav-cta{margin-top:20px}

  .service-grid{grid-template-columns:1fr}
  .service--no-icon{padding-top:clamp(30px,3vw,44px)}

  /* Lo nuevo en Q·RA: una columna. Se lee como selección ordenada. */
  .update-grid{grid-template-columns:1fr}

  .path{min-height:400px}
  .guidance-device{width:min(90vw,360px)}
  .device-img{max-height:none}
  .closing-photo{width:min(100%,320px)}
  .footer-nav{margin-left:0;width:100%;gap:18px 26px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   FASE 2 — SOY PACIENTE (paciente.html)
   Todo el bloque está namespaced bajo .patient-page. No afecta a index.html.
   ========================================================================== */

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.patient-page .section-sub{margin-top:18px;font-size:clamp(16px,1.1vw,19px);color:var(--text-2);max-width:600px}
.patient-page .btn-outline{background:transparent;color:var(--primary);border-color:var(--outline)}
.patient-page .btn-outline:hover{background:var(--bg-light);border-color:var(--primary)}

/* ---------- 1. Introducción editorial ---------- */
.patient-hero{position:relative;overflow:hidden;background:#fff;padding:clamp(44px,6vw,88px) 0 clamp(56px,7vw,104px)}
.patient-hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(36px,5vw,80px);align-items:center;
}
.patient-hero-copy{max-width:640px}
.patient-hero-copy h1{
  font-size:clamp(38px,4.4vw,68px);font-weight:400;
  color:var(--text);letter-spacing:-.04em;max-width:16ch;
}
.patient-hero-copy p{margin:24px 0 34px;font-size:clamp(16px,1.2vw,20px);color:var(--text-2);max-width:600px}
.patient-hero-photo{margin:0;border-radius:280px 280px var(--r) var(--r);overflow:hidden;aspect-ratio:4/3.4}
.patient-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%}

/* ---------- 2. ¿Qué necesitas hoy? ---------- */
.patient-needs{padding:clamp(72px,9vw,124px) 0;background:var(--bg-light)}
.needs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
/* Tarjeta-enlace: un solo clic hacia un destino real. Sin panel intermedio. */
.need{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  min-height:216px;padding:26px 24px;text-align:left;
  background:#fff;border:1px solid var(--outline);border-radius:var(--r);
  color:var(--text);position:relative;
  transition:border-color var(--t),transform var(--t),box-shadow var(--t);
}
.need:hover{border-color:var(--secondary);transform:translateY(-2px);box-shadow:0 12px 30px rgba(15,23,42,.07)}
/* PENDIENTE F1-C: cuando exista icono propio para Magazine, se retira el modificador. */
.need--no-icon{padding-top:calc(26px + 40px + 14px)}
.need-icon{width:40px;height:40px;object-fit:contain;object-position:left center}
.need-label{font-size:18px;font-weight:500;line-height:1.25;max-width:16ch;color:var(--primary)}
/* La explicación es visible desde el principio: era el contenido del antiguo panel. */
.need-desc{font-size:15px;line-height:1.5;color:var(--text-2);max-width:30ch}
.need-go{
  margin-top:auto;font-size:20px;color:var(--tertiary);
  transition:transform var(--t);
}


/* ---------- 3. Especialidades y médicos ---------- */
.patient-directory{padding:clamp(80px,10vw,132px) 0;background:#fff}
.dir-controls{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:1px solid var(--outline);
}
.dir-search{flex:1 1 300px;max-width:380px;position:relative}
.dir-search input{
  width:100%;min-height:48px;padding:0 20px;font:inherit;font-size:16px;
  color:var(--text);background:var(--bg-light);
  border:1px solid var(--outline);border-radius:999px;
  transition:border-color var(--t),background var(--t);
}
.dir-search input::placeholder{color:var(--text-2)}
.dir-search input:focus{background:#fff;border-color:var(--secondary);outline:none}

.dir-filters-toggle{display:none}
.dir-filters{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.chip{
  min-height:44px;padding:0 20px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:14px;color:var(--text-2);
  background:#fff;border:1px solid var(--outline);
  transition:color var(--t),border-color var(--t),background var(--t);
}
.chip:hover{color:var(--primary);border-color:var(--primary)}
.chip.is-active{background:var(--primary);border-color:var(--primary);color:#fff}

.dir-count{margin:24px 0 clamp(24px,3vw,36px);font-size:14px;color:var(--text-2)}

.dir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px)}
.dir-item{
  display:flex;flex-direction:column;padding:clamp(26px,2.6vw,36px);
  background:var(--bg-light);border:1px solid transparent;border-radius:var(--r);
  min-height:250px;
  transition:background var(--t),border-color var(--t),transform var(--t);
}
.dir-item:hover{background:#fff;border-color:var(--outline);transform:translateY(-2px)}
.dir-item[hidden]{display:none}
.dir-icon{width:48px;height:48px;object-fit:contain;object-position:left center;margin-bottom:22px}
.dir-item h3{font-size:clamp(20px,1.6vw,24px);font-weight:500;color:var(--primary);max-width:16ch}
.dir-item p{margin-top:12px;font-size:15px;color:var(--text-2);max-width:32ch}
.dir-action{
  margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;font-size:14px;font-weight:500;color:var(--tertiary);
}
.dir-action span{transition:transform var(--t)}
.dir-item:hover .dir-action span{transform:translateX(5px)}

.dir-empty{padding:clamp(32px,4vw,56px) 0;max-width:520px}
.dir-empty p{margin-bottom:22px;font-size:18px;color:var(--text)}
.dir-more{margin-top:clamp(32px,4vw,48px);display:flex;justify-content:center}
.dir-more[hidden]{display:none}

/* ---------- 4. Servicios médicos ---------- */
.patient-services{padding:clamp(80px,10vw,132px) 0;background:var(--bg-light)}
.patient-services-grid{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(36px,5vw,80px);align-items:start;
}
.patient-services .section-head{margin-bottom:0}
.accordion{border-top:1px solid var(--outline)}
.acc-item{border-bottom:1px solid var(--outline)}
.acc-item h3{margin:0;font-size:inherit;letter-spacing:normal}
.acc-trigger{
  display:flex;align-items:center;gap:20px;width:100%;
  min-height:88px;padding:20px 0;cursor:pointer;text-align:left;
  background:none;border:0;font:inherit;
  font-size:clamp(19px,1.6vw,26px);font-weight:500;color:var(--text);
  letter-spacing:-.02em;transition:color var(--t);
}
.acc-trigger:hover{color:var(--primary)}
.acc-icon{width:40px;height:40px;object-fit:contain;flex:none}
.acc-sign{
  margin-left:auto;width:30px;height:30px;border-radius:999px;flex:none;
  border:1px solid var(--outline);position:relative;transition:border-color var(--t),background var(--t);
}
.acc-sign::before,.acc-sign::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--primary);border-radius:2px;
  transform:translate(-50%,-50%);transition:opacity var(--t),background var(--t);
}
.acc-sign::before{width:12px;height:2px}
.acc-sign::after{width:2px;height:12px}
.acc-trigger[aria-expanded="true"] .acc-sign{background:var(--tertiary);border-color:var(--tertiary)}
.acc-trigger[aria-expanded="true"] .acc-sign::before{background:#fff}
.acc-trigger[aria-expanded="true"] .acc-sign::after{opacity:0}
.acc-panel{padding:0 0 30px 60px;max-width:560px}
.acc-panel p{margin-bottom:14px;font-size:17px;color:var(--text-2)}

/* ---------- 5. Conocimiento para pacientes ---------- */
.patient-knowledge{padding:clamp(80px,10vw,132px) 0;background:#fff}
.pk-grid{display:grid;grid-template-columns:1.24fr 1fr;gap:clamp(20px,2.6vw,36px)}
.pk-side{display:grid;gap:clamp(20px,2.6vw,36px);align-content:start}
.pk-lead .article-media{aspect-ratio:4/3.2}

/* ---------- 6. Novedades y eventos ---------- */
.patient-news{padding:clamp(80px,10vw,132px) 0;background:var(--bg-light)}
.pn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px)}
.pn-item{
  display:block;padding:clamp(28px,3vw,40px);background:#fff;
  border-radius:var(--r);border-top:3px solid var(--secondary);
  transition:transform var(--t),box-shadow var(--t);
}
.pn-item:nth-child(2){border-top-color:var(--primary)}
.pn-item:nth-child(3){border-top-color:var(--tertiary)}
.pn-item:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(15,23,42,.07)}
.pn-item h3{font-size:clamp(20px,1.6vw,25px);font-weight:500;max-width:20ch}
.pn-item p{margin-top:12px;font-size:15px;color:var(--text-2);max-width:34ch}

/* ---------- 7. Necesito orientación ---------- */
.patient-guidance{position:relative;overflow:hidden;background:var(--primary);color:#fff;padding:clamp(72px,9vw,128px) 0}
.patient-guidance-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(40px,6vw,80px);align-items:center;
}
.patient-guidance-copy{max-width:620px}
.patient-guidance-copy h2{font-size:clamp(34px,3.6vw,58px);font-weight:400;max-width:18ch}
.patient-guidance-copy p{margin:24px 0 0;font-size:clamp(16px,1.2vw,20px);color:rgba(255,255,255,.86);max-width:640px}
.patient-guidance-copy .eyebrow{color:var(--secondary)}
/* Alcance del canal: orienta y contacta, no diagnostica. */
.pform-scope{
  margin-top:28px !important;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.22);
  font-size:15px !important;color:rgba(255,255,255,.7) !important;max-width:44ch !important;
}

/* ---------- Formulario de orientación (modo prototipo) ---------- */
.pform{
  background:#fff;color:var(--text);border-radius:var(--r);
  padding:clamp(26px,3vw,40px);display:grid;gap:20px;
}
/* Mismo aviso de estado que .cf-notice, en el formulario de paciente. */
.pform-notice{
  position:relative;
  margin:0;padding:16px 18px 16px 44px;
  border-radius:var(--r);
  background:#F0FAFE;
  border:1px solid #BFE8F7;
  border-left:3px solid var(--secondary);
  font-size:14.5px;line-height:1.5;color:var(--primary);
}
.pform-notice::before{
  content:"·";
  position:absolute;left:16px;top:50%;
  transform:translateY(-52%);
  color:var(--tertiary);
  font-size:34px;line-height:0;font-weight:900;
}
.pform-field{display:grid;gap:8px}
.pform-field label,.pform-fieldset legend{font-size:15px;font-weight:500;color:var(--text)}
.pform-req{color:var(--tertiary)}
.pform-field input[type="text"],
.pform-field input[type="tel"],
.pform-field textarea{
  width:100%;font:inherit;font-size:16px;color:var(--text);
  padding:13px 15px;background:var(--bg-light);
  border:1px solid var(--outline);border-radius:10px;
  min-height:48px;transition:border-color var(--t),background var(--t);
}
.pform-field textarea{min-height:96px;resize:vertical;line-height:1.5}
.pform-field input:focus,.pform-field textarea:focus{background:#fff;border-color:var(--secondary);outline:none}
.pform-field [aria-invalid="true"]{border-color:var(--tertiary);background:#fff}
.pform-hint{font-size:13px;color:var(--text-2)}
/* Salida directa por WhatsApp. Permanece deshabilitada hasta que se marque la
   autorización de datos: al abrir el chat, Q·RA ya recibe el número de la persona. */
.pform-whatsapp{margin-top:18px;padding-top:18px;border-top:1px solid var(--outline);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pform-whatsapp[hidden]{display:none}
.btn-whatsapp[aria-disabled="true"]{opacity:.5;pointer-events:none}
.pform-err{font-size:14px;color:#C41567;font-weight:500}
.pform-err[hidden]{display:none}

.pform-fieldset{border:0;padding:0;margin:0}
.pform-radios{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.pform-radio{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px;min-height:48px;cursor:pointer;
  background:var(--bg-light);border:1px solid var(--outline);border-radius:999px;
  font-size:15px;font-weight:400 !important;transition:border-color var(--t),background var(--t);
}
.pform-radio:hover{border-color:var(--secondary)}
.pform-radio input{accent-color:var(--primary);width:18px;height:18px;margin:0}
.pform-radio:has(input:checked){border-color:var(--primary);background:#fff}

.pform-checkbox{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  font-weight:400 !important;font-size:15px !important;line-height:1.5;color:var(--text-2) !important;
}
.pform-checkbox input{accent-color:var(--primary);width:20px;height:20px;margin:2px 0 0;flex:none}

.pform-submit{width:100%;margin-top:4px}
.pform-result{
  margin:0;padding:14px 16px;border-radius:10px;font-size:15px;line-height:1.5;
  background:var(--bg-light);border:1px solid var(--outline);color:var(--text);
}
.pform-result[hidden]{display:none}
.pform-result.is-error{background:#FFF1F6;border-color:#F3C2D8;color:#C41567}

/* ---------- 8. CTA hacia Contáctanos ---------- */
.patient-cta{padding:clamp(80px,10vw,132px) 0;background:#fff;text-align:center}
.patient-cta-inner{max-width:640px;margin-inline:auto}
.patient-cta h2{font-size:clamp(36px,4vw,60px);font-weight:400;color:var(--primary)}
.patient-cta p{margin:22px auto 32px;font-size:clamp(16px,1.2vw,20px);color:var(--text-2);max-width:520px}

/* ---------- Responsive Fase 2 ---------- */
@media (max-width:1080px){
  .patient-hero-grid{grid-template-columns:1fr;gap:44px}
  .patient-hero-photo{border-radius:var(--r);aspect-ratio:16/10;max-width:600px}
  .patient-services-grid{grid-template-columns:1fr;gap:40px}
  .patient-guidance-grid{grid-template-columns:1fr;gap:48px}
  .pk-grid{grid-template-columns:1fr}
  .dir-grid{grid-template-columns:repeat(2,1fr)}
  .needs-grid{grid-template-columns:repeat(2,1fr)}
  .pn-grid{grid-template-columns:1fr}
}

@media (max-width:820px){
  .needs-grid{grid-template-columns:1fr}
  .need{min-height:0;gap:12px;padding:20px}
  .need-icon{width:34px;height:34px}
  .need-label{max-width:none}
  .need-desc{max-width:none}
  .dir-grid{grid-template-columns:1fr}
  .dir-controls{gap:12px}
  .dir-search{max-width:none;flex-basis:100%}
  .dir-filters-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:48px;padding:0 24px;width:100%;cursor:pointer;
    font:inherit;font-size:15px;color:var(--primary);
    background:#fff;border:1px solid var(--outline);border-radius:999px;
  }
  .dir-filters{display:none;margin-left:0;width:100%}
  .dir-filters.is-open{display:flex}
  .acc-panel{padding-left:0}
  .pform{padding:22px 18px}
  .pform-radio{flex:1 1 auto;justify-content:center}
}

/* ==========================================================================
   FASE 3 — SOY MÉDICO (medico.html)
   Todo bajo .medical-page. Página sin JavaScript: no hay tabs, filtros,
   acordeones ni formularios.
   ========================================================================== */
.medical-page .section-sub{margin-top:18px;font-size:clamp(16px,1.15vw,19px);color:var(--text-2);max-width:62ch}
.medical-page .btn-outline{background:transparent;color:var(--primary);border-color:var(--outline)}
.medical-page .btn-outline:hover{background:var(--bg-light);border-color:var(--primary)}
.medical-page .anchor{display:block;height:0;scroll-margin-top:110px}

/* ---------- 1. Apertura ---------- */
.medical-hero{position:relative;overflow:hidden;background:#fff;padding:clamp(44px,6vw,88px) 0 clamp(64px,8vw,110px)}
.medical-hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(40px,6vw,84px);align-items:center;
}
.medical-hero-copy{max-width:640px}
.medical-hero-copy h1{
  font-size:clamp(40px,4.6vw,72px);font-weight:500;
  letter-spacing:-.04em;line-height:1.03;color:var(--text);
}
/* Declaración humana que respalda el mensaje principal. */
.medical-hero-claim{
  margin:20px 0 0;font-size:clamp(22px,2.2vw,34px);line-height:1.2;
  font-weight:400;color:var(--primary);letter-spacing:-.025em;max-width:22ch;
}
.medical-hero-copy p{margin:22px 0 0;font-size:clamp(16px,1.2vw,19px);color:var(--text-2);max-width:56ch}
.medical-hero-support{
  margin-top:26px !important;font-size:clamp(18px,1.5vw,23px) !important;
  font-weight:500;color:var(--tertiary) !important;letter-spacing:-.02em;
}
.medical-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.medical-hero-photo{margin:0;border-radius:var(--r) 200px var(--r) 200px;overflow:hidden;aspect-ratio:4/3.4}
.medical-hero-photo img{width:100%;height:100%;object-fit:cover}

/* ---------- 2. Dos acciones ---------- */
.medical-relations{padding:clamp(72px,9vw,120px) 0;background:var(--bg-light)}
.medical-relations .section-head{margin-bottom:clamp(32px,4vw,48px)}
.medical-actions{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,30px)}
.medical-action{
  background:#fff;border:1px solid var(--outline);border-radius:var(--r);
  padding:clamp(28px,3vw,44px);transition:border-color var(--t),transform var(--t);
}
.medical-action:hover{border-color:var(--secondary);transform:translateY(-2px)}
.medical-action h3{font-size:clamp(21px,1.8vw,28px);font-weight:500;color:var(--primary);max-width:18ch}
.medical-action p{margin:14px 0 22px;font-size:16px;color:var(--text-2);max-width:40ch}

/* ---------- 3. Cómo funciona Q·RA ---------- */
/* Sin tabs: los cuatro bloques se leen sin interacción. */
.medical-model{padding:clamp(80px,10vw,132px) 0;background:#fff}
.medical-model-list{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,2.6vw,38px);margin-top:clamp(40px,5vw,60px);list-style:none;padding:0}
.mm-item{padding-top:24px;border-top:1px solid var(--outline)}
.mm-index{display:block;font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--secondary);margin-bottom:16px}
.mm-item h3{font-size:clamp(19px,1.5vw,23px);font-weight:500;color:var(--primary);max-width:18ch}
.mm-item p{margin-top:12px;font-size:15px;line-height:1.55;color:var(--text-2);max-width:34ch}

/* ---------- 4. Comunidad médica ---------- */
.medical-network{padding:clamp(80px,10vw,132px) 0;background:var(--bg-light)}
.medical-network-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(40px,6vw,80px);align-items:center;
}
.medical-network-copy{max-width:640px}
.medical-network-copy h2{font-size:clamp(32px,3.4vw,52px);font-weight:400;color:var(--text);max-width:18ch}
.medical-network-copy > p{margin:22px 0 0;font-size:clamp(16px,1.2vw,19px);color:var(--text-2);max-width:52ch}
/* Rejilla compacta de nombres: sin iconos, sin descripciones, sin CTA por ámbito. */
.medical-scopes{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:10px 18px;margin:clamp(30px,3.4vw,44px) 0 clamp(30px,3.4vw,42px);
}
.medical-scopes li{
  font-size:16px;color:var(--text);padding:11px 0;
  border-bottom:1px solid var(--outline);
}
.medical-network-photo{margin:0;border-radius:200px 200px var(--r) var(--r);overflow:hidden;aspect-ratio:3/3.6}
.medical-network-photo img{width:100%;height:100%;object-fit:cover}

/* ---------- 5. Conocimiento y actividad científica ---------- */
.medical-knowledge{padding:clamp(80px,10vw,132px) 0;background:#fff}
.medical-knowledge-grid{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(36px,5vw,72px);align-items:center;
}
.medical-knowledge-photo{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3.6}
.medical-knowledge-photo img{width:100%;height:100%;object-fit:cover}
.medical-knowledge-copy{display:grid;gap:clamp(28px,3.2vw,44px)}
.mk-block h3{font-size:clamp(22px,2vw,30px);font-weight:500;color:var(--primary);max-width:20ch}
.mk-block p{margin-top:12px;font-size:clamp(16px,1.15vw,18px);color:var(--text-2);max-width:44ch}

/* ---------- 6. Cierre ---------- */
.medical-join-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:34px}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff}

.medical-join{position:relative;overflow:hidden;background:var(--primary);color:#fff;padding:clamp(80px,10vw,140px) 0;text-align:center}
.medical-join-inner{max-width:720px;margin-inline:auto;position:relative;z-index:1}
.medical-join .eyebrow{color:var(--secondary)}
.medical-join h2{font-size:clamp(34px,3.8vw,58px);font-weight:400;max-width:20ch;margin-inline:auto}
.medical-join p{margin:24px auto 0;font-size:clamp(16px,1.2vw,20px);color:rgba(255,255,255,.86);max-width:560px}

/* ---------- Responsive Fase 3 ---------- */
@media (max-width:1080px){
  .medical-hero-grid{grid-template-columns:1fr;gap:44px}
  .medical-hero-photo{border-radius:var(--r);aspect-ratio:16/10;max-width:620px}
  .medical-model-list{grid-template-columns:1fr 1fr}
  .medical-network-grid{grid-template-columns:1fr;gap:44px}
  .medical-network-photo{border-radius:var(--r);aspect-ratio:16/10;max-width:620px}
  .medical-knowledge-grid{grid-template-columns:1fr;gap:40px}
  .medical-knowledge-photo{aspect-ratio:16/10;max-width:620px}
  .medical-scopes{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:820px){
  .medical-actions{grid-template-columns:1fr}
  .medical-model-list{grid-template-columns:1fr}
  /* Once nombres cortos: dos columnas evitan un scroll innecesario. */
  .medical-scopes{grid-template-columns:1fr 1fr;gap:6px 14px}
  .medical-scopes li{font-size:15px;padding:10px 0}
  .medical-hero-actions{flex-direction:column;align-items:stretch}
  .medical-hero-actions .btn{width:100%}
  .medical-join-actions{flex-direction:column}
  .medical-join-actions .btn{width:100%}
}

/* ==========================================================================
   FASE 4 — CONTÁCTANOS Y CONVERSEMOS (contactanos.html)
   Un solo formulario institucional y un canal de experiencia. Sin selector de
   perfiles y sin campos condicionales.
   ========================================================================== */
.contact-page .section-sub{margin-top:16px;font-size:clamp(16px,1.15vw,19px);color:var(--text-2);max-width:62ch}
.contact-page [id]{scroll-margin-top:110px}

/* ---------- 1. Apertura ---------- */
.contact-hero{position:relative;overflow:hidden;background:#fff;padding:clamp(48px,6vw,96px) 0 clamp(40px,5vw,64px)}
.contact-hero-inner{max-width:760px}
.contact-hero h1{font-size:clamp(40px,4.6vw,72px);font-weight:500;letter-spacing:-.04em;line-height:1.04;color:var(--text)}
.contact-hero > .shell > p{margin:24px 0 0;font-size:clamp(16px,1.2vw,20px);color:var(--text-2);max-width:60ch}
.contact-divert{
  margin-top:28px;padding:16px 20px;border-radius:10px;
  background:var(--bg-light);border-left:3px solid var(--secondary);
  font-size:16px;line-height:1.55;color:var(--text);max-width:64ch;
}
.contact-divert a{color:var(--primary);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.contact-divert a:hover{color:var(--tertiary)}
.contact-divert[hidden]{display:none}

/* ---------- 2. Formulario institucional ---------- */
.contact-form-section{padding:clamp(56px,7vw,96px) 0 clamp(72px,9vw,120px);background:var(--bg-light)}
.contact-form-shell{max-width:820px}
.cf-title{font-size:clamp(30px,3.2vw,46px);font-weight:400;color:var(--text)}
.cf-title:focus-visible{outline:3px solid var(--secondary);outline-offset:6px}

.contact-form{
  margin-top:clamp(30px,3.6vw,48px);background:#fff;border:1px solid var(--outline);
  border-radius:var(--r);padding:clamp(26px,3vw,44px);display:grid;gap:22px;
}
/* Aviso de estado del formulario.
   No es una advertencia de error: es información sobre el canal, así que
   no lleva el ámbar de "warning" sino el turquesa institucional. El punto
   de marca a la izquierda repite el signo que separa Q·RA. */
.cf-notice{
  position:relative;
  margin:0;padding:16px 18px 16px 44px;
  border-radius:var(--r);
  background:#F0FAFE;
  border:1px solid #BFE8F7;
  border-left:3px solid var(--secondary);
  font-size:14.5px;line-height:1.5;color:var(--primary);
}
.cf-notice::before{
  content:"·";
  position:absolute;left:16px;top:50%;
  transform:translateY(-52%);
  color:var(--tertiary);
  font-size:34px;line-height:0;font-weight:900;
}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cf-field{display:grid;gap:8px;min-width:0}
.cf-field label,.cf-fieldset legend{font-size:15px;font-weight:500;color:var(--text)}
.cf-req{color:var(--tertiary)}
.cf-optional{font-weight:400;color:var(--text-2);font-size:13px}
.cf-field input[type="text"],
.cf-field input[type="email"],
.cf-field input[type="tel"],
.cf-field select,
.cf-field textarea{
  width:100%;font:inherit;font-size:16px;color:var(--text);
  padding:13px 15px;background:var(--bg-light);
  border:1px solid var(--outline);border-radius:10px;min-height:48px;
  transition:border-color var(--t),background var(--t);
}
.cf-field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.cf-field textarea{min-height:120px;resize:vertical;line-height:1.5}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{background:#fff;border-color:var(--secondary);outline:none}
.cf-field [aria-invalid="true"]{border-color:var(--tertiary);background:#fff}
.cf-hint{font-size:13px;color:var(--text-2);margin:0}
.cf-error{font-size:14px;color:#C41567;font-weight:500;margin:0}
.cf-error[hidden]{display:none}

.cf-fieldset{border:1px solid var(--outline);border-radius:10px;padding:18px 18px 20px;margin:0;gap:12px}
.cf-fieldset legend{padding:0 8px}

.cf-checkbox{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  font-weight:400 !important;font-size:15px !important;line-height:1.5;color:var(--text-2) !important;
}
.cf-checkbox input{accent-color:var(--primary);width:20px;height:20px;margin:2px 0 0;flex:none}
.cf-actions{margin-top:4px}
.cf-actions .btn{width:100%}
.cf-result{
  margin:0;padding:14px 16px;border-radius:10px;font-size:15px;line-height:1.5;
  background:var(--bg-light);border:1px solid var(--outline);color:var(--text);
}
.cf-result[hidden]{display:none}

/* ---------- 3. Conversemos ---------- */
.contact-talk{position:relative;overflow:hidden;background:var(--primary);color:#fff;padding:clamp(72px,9vw,124px) 0}
.contact-talk-grid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(40px,5vw,72px);align-items:start;
}
.contact-talk-copy{max-width:560px}
.contact-talk-copy .eyebrow{color:var(--secondary)}
.contact-talk-copy h1,
.contact-talk-copy h2{font-size:clamp(30px,3.2vw,48px);font-weight:400;max-width:20ch;line-height:1.08}
.contact-talk-copy > p{margin:24px 0 0;font-size:clamp(16px,1.2vw,19px);color:rgba(255,255,255,.86);max-width:52ch}
.contact-talk-scope{
  margin-top:28px !important;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.22);
  font-size:15px !important;color:rgba(255,255,255,.7) !important;max-width:48ch !important;
}
.ct-form{margin-top:0}

/* ---------- 4. Qué ocurre después ---------- */
.contact-process{padding:clamp(72px,9vw,120px) 0;background:#fff}
.cp-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,38px);margin-top:clamp(36px,4vw,52px);list-style:none;padding:0}
.cp-item{padding-top:24px;border-top:1px solid var(--outline)}
.cp-index{display:block;font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--secondary);margin-bottom:16px}
.cp-item p{font-size:16px;line-height:1.55;color:var(--text-2);max-width:36ch}

/* ---------- 5. Cierre de marca ---------- */
.contact-closing{position:relative;overflow:hidden;background:var(--bg-light);padding:clamp(72px,9vw,124px) 0}
.contact-closing-inner{max-width:760px}
.contact-closing .closing-title{font-size:clamp(40px,4.6vw,72px);font-weight:400;letter-spacing:-.04em;line-height:1;color:var(--primary)}
.contact-closing .closing-title strong{font-weight:900}
.contact-closing .closing-title .campaign-dot{color:var(--tertiary)}
.contact-closing p{margin-top:26px;font-size:clamp(16px,1.2vw,20px);color:var(--text-2);max-width:60ch}

/* ---------- Responsive Fase 4 ---------- */
@media (max-width:1080px){
  .contact-talk-grid{grid-template-columns:1fr;gap:44px}
  .contact-talk-copy{max-width:none}
  .cp-list{grid-template-columns:1fr 1fr}
}

@media (max-width:820px){
  .cf-row{grid-template-columns:1fr;gap:18px}
  .contact-form{padding:22px 18px}
  .cp-list{grid-template-columns:1fr}
  .contact-divert{padding:14px 16px;font-size:15px}
}

/* ==========================================================================
   INTERACCIONES FINALES
   1. Barra utilitaria (preparada, oculta) · 2. Header con mega menús
   3. Carrusel editorial del Home
   ========================================================================== */

.anchor{display:block;position:relative;top:-104px;width:0;height:0;visibility:hidden}
section[id],div[id]{scroll-margin-top:104px}

/* ---------- 1. Barra utilitaria ---------- */
.utility-bar{background:var(--primary);color:#fff}
.utility-bar[hidden]{display:none}
.utility-inner{display:flex;justify-content:flex-end;align-items:center;height:34px}
.utility-social{display:flex;gap:18px;align-items:center}
.utility-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;color:#fff;transition:color var(--t);
}
.utility-social a:hover{color:var(--secondary)}
.utility-social svg{width:20px;height:20px;fill:currentColor}
.utility-social a:focus-visible{outline:3px solid #00A5DF;outline-offset:2px}

/* ---------- 2. Header con mega menús ---------- */
.nav-item{position:relative;display:flex;align-items:center}
.nav-direct{display:none}
.nav-caret{
  display:inline-block;width:7px;height:7px;margin-left:8px;vertical-align:1px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--t);
}
.nav-trigger{
  background:none;border:0;cursor:pointer;font:inherit;
  font-size:15px;font-weight:500;color:var(--text);
  padding:6px 0;position:relative;transition:color var(--t);
}
.nav-trigger:hover,.nav-trigger[aria-expanded="true"]{color:var(--primary)}
.nav-trigger[aria-expanded="true"] .nav-caret{transform:rotate(-135deg) translate(-3px,-3px)}
.nav-trigger::after,.nav-link::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--tertiary);transition:width var(--t);
}
.nav-trigger:hover::after,.nav-link:hover::after,
.nav-trigger.is-current::after,.nav-link[aria-current="page"]::after{width:100%}

.megamenu{
  position:absolute;left:0;right:0;top:100%;
  background:#fff;border-top:1px solid var(--outline);border-bottom:1px solid var(--outline);
  opacity:0;transform:translateY(-7px);pointer-events:none;
  transition:opacity 220ms var(--ease),transform 220ms var(--ease);
}
.megamenu[hidden]{display:none}
.megamenu.is-open{opacity:1;transform:none;pointer-events:auto}
.mega-inner{
  width:min(94vw,1600px);margin-inline:auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(32px,4vw,72px);padding:clamp(32px,3.4vw,52px) clamp(20px,4vw,64px);
}
.mega-title{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--secondary);margin-bottom:18px;
}
.mega-col ul{display:flex;flex-direction:column}
.mega-col li a{
  display:block;padding:11px 0;min-height:44px;
  font-size:17px;color:var(--text);transition:color var(--t),padding var(--t);
}
.mega-col li a:hover{color:var(--primary);padding-left:6px}
.mega-feature{border-left:1px solid var(--outline);padding-left:clamp(24px,2.6vw,44px)}
.mega-feature-title{font-size:clamp(19px,1.5vw,23px);font-weight:500;color:var(--primary);letter-spacing:-.02em}
.mega-feature-text{margin:12px 0 18px;font-size:15px;color:var(--text-2);max-width:38ch}
.mega-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;color:var(--tertiary)}
.mega-cta span{transition:transform var(--t)}
.mega-cta:hover span{transform:translateX(5px)}

/* ---------- 3. Carrusel editorial ---------- */
/* En el hero el carrusel sangra a los dos bordes: sin radio, sin caja.
   Debe leerse como una pieza única, no como un módulo dentro de una cuadrícula. */
.hero-carousel{position:relative;border-radius:0;overflow:hidden;background:var(--text)}
/* Altura editorial, no proporción rígida: a todo el ancho, 16:9 daría 1080px
   de alto en un monitor de 1920 y el bloque institucional quedaría fuera de
   pantalla. El máximo controlado permite anticipar la sección siguiente. */
.hero-track{position:relative;height:clamp(560px,72vh,780px)}
.hero-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 800ms cubic-bezier(.22,.61,.36,1),visibility 800ms cubic-bezier(.22,.61,.36,1);
}
.hero-slide.is-active{opacity:1;visibility:visible}
.hero-slide-link{display:block;position:absolute;inset:0}

/* Abstracción de medios compartida por las cuatro historias.
   Las historias con fotografía la usan sin ningún cambio de comportamiento:
   la regla .hero-slide img sigue aplicando a través del envoltorio. */
.hero-media{position:absolute;inset:0;overflow:hidden}

/* Movimiento editorial de las fotografías: zoom lento y desplazamiento mínimo
   en la MISMA propiedad transform y la misma transición. No es un efecto
   simultáneo añadido, es el mismo movimiento con una dirección. */
.hero-slide img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1) translateX(0);
  transition:transform 8.2s cubic-bezier(.22,.61,.36,1);
}
.hero-slide.is-active img{transform:scale(1.045) translateX(-.6%)}

/* Video de la historia 01. Sobre el fallback, invisible mientras no se confirme
   la reproducción. .is-video-ready es el único camino para revelarlo. */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;pointer-events:none;
  transition:opacity 600ms cubic-bezier(.22,.61,.36,1);
}
.hero-media.is-video-ready .hero-video{opacity:1}
.hero-slide-link::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,23,42,0) 46%,rgba(15,23,42,.74) 100%);
}
.hero-slide-content{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding:0 var(--gutter) clamp(56px,6vw,88px);color:#fff;
  opacity:0;transform:translateX(-14px);
  transition:opacity 520ms cubic-bezier(.22,.61,.36,1) 220ms,transform 520ms cubic-bezier(.22,.61,.36,1) 220ms;
}
.hero-slide.is-active .hero-slide-content{opacity:1;transform:none}
.hero-slide-content .eyebrow{color:#fff;opacity:.86;margin-bottom:8px}
.hero-slide-title{
  margin:0;font-size:clamp(30px,3.2vw,50px);font-weight:500;
  letter-spacing:-.03em;line-height:1.06;max-width:18ch;color:#fff;
}
.hero-slide-title strong{font-weight:900}
.hero-slide-title .campaign-dot{color:var(--tertiary)}

/* CTA de historia. No es un interactivo anidado: el slide completo ya es un enlace. */
.hero-slide-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-size:16px;font-weight:500;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.42);padding-bottom:3px;
  transition:border-color var(--t),gap var(--t);
}
.hero-slide-link:hover .hero-slide-cta,
.hero-slide-link:focus-visible .hero-slide-cta{border-color:#fff;gap:12px}

/* Indicador 01 / 04 · decorativo, aria-hidden */
.hero-count{
  position:absolute;z-index:2;
  left:max(var(--gutter), calc(50vw - var(--shell)/2 + var(--gutter)));
  top:clamp(22px,2.6vw,38px);
  font-size:13px;font-weight:500;letter-spacing:.12em;color:rgba(255,255,255,.72);
  text-shadow:0 1px 8px rgba(15,23,42,.45);
}
.hero-count #heroCount{color:#fff}

/* Línea de progreso · CSS animation sincronizada con animation-play-state.
   No introduce un segundo temporizador: la pausa la gobierna el JS existente. */
.hero-progress{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  height:2px;background:rgba(255,255,255,.24);overflow:hidden;
}
.hero-progress-bar{
  display:block;width:100%;height:100%;background:#fff;
  transform:scaleX(0);transform-origin:left center;
  animation:heroProgress 6800ms linear forwards;
}
@keyframes heroProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Controles alineados al borde derecho del .shell, no al de la pantalla. */
.hero-controls{
  position:absolute;z-index:2;
  right:max(var(--gutter), calc(50vw - var(--shell)/2 + var(--gutter)));
  top:clamp(20px,2.4vw,34px);
  display:flex;align-items:center;gap:4px;
  background:rgba(15,23,42,.36);backdrop-filter:blur(6px);border-radius:999px;padding:2px;
}
.hero-arrow,.hero-play{
  width:44px;height:44px;min-width:44px;border:0;background:none;cursor:pointer;
  color:#fff;font-size:17px;line-height:1;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--t);
}
.hero-arrow:hover,.hero-play:hover{background:rgba(255,255,255,.18)}
.hero-arrow:focus-visible,.hero-play:focus-visible,.hero-dot:focus-visible{outline:3px solid #00A5DF;outline-offset:2px}
.hero-play-icon{display:block;width:12px;height:12px;position:relative}
.hero-play-icon::before,.hero-play-icon::after{
  content:"";position:absolute;top:0;width:3.5px;height:12px;background:#fff;border-radius:1px;
}
.hero-play-icon::before{left:1px}
.hero-play-icon::after{right:1px}
.hero-play[aria-pressed="true"] .hero-play-icon::before{
  left:2px;width:0;height:0;background:none;
  border-left:11px solid #fff;border-top:6.5px solid transparent;border-bottom:6.5px solid transparent;
}
.hero-play[aria-pressed="true"] .hero-play-icon::after{display:none}
.hero-dots{display:flex;align-items:center;gap:2px}
.hero-dot{
  width:24px;height:44px;min-width:24px;border:0;background:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
}
.hero-dot::before{
  content:"";width:6px;height:6px;border-radius:999px;
  background:rgba(255,255,255,.5);transition:background var(--t),width var(--t);
}
.hero-dot.is-active::before{background:#fff;width:16px}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero-track{height:clamp(480px,62vh,620px)}
}

@media (max-width:1080px){
  .nav-toggle{display:flex;margin-left:auto}
  .nav{
    position:fixed;inset:88px 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--outline);
    padding:8px 24px 28px;margin:0;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity var(--t),transform var(--t);
    max-height:calc(100vh - 88px);overflow-y:auto;
  }
  .nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav-link{padding:16px 0;border-bottom:1px solid var(--outline);font-size:17px}
  .nav-item{display:block;border-bottom:1px solid var(--outline)}
  .nav-trigger{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;min-height:56px;padding:16px 0;font-size:17px;
  }
  .nav-trigger::after{display:none}
  .nav-caret{transform:rotate(45deg);margin-left:auto}
  .nav-trigger[aria-expanded="true"] .nav-caret{transform:rotate(-135deg) translate(-3px,-3px)}
  .nav-cta{margin:22px 0 0}

  .megamenu{
    position:static;opacity:1;transform:none;pointer-events:auto;
    border:0;background:transparent;transition:none;
  }
  .mega-inner{
    width:100%;display:block;padding:0 0 18px;
  }
  .mega-col{margin-bottom:18px}
  .mega-col:last-child{margin-bottom:0}
  .mega-title{margin-bottom:10px}
  .mega-col li a{font-size:16px;padding:10px 0 10px 14px}
  .mega-feature{border-left:2px solid var(--outline);padding-left:16px}
  .mega-feature-text{font-size:14px}
}

@media (max-width:820px){
  .nav{inset:72px 0 auto 0;max-height:calc(100vh - 72px)}
  /* Móvil: proporción 4:3 sobre la fotografía de fallback, con mínimo útil. */
  .hero-track{height:auto;aspect-ratio:4/3;min-height:440px}
  .hero-controls{right:var(--gutter);top:14px}
  .hero-count{left:var(--gutter);top:20px}
  .hero-slide-content{padding-bottom:clamp(36px,9vw,52px)}
  .hero-slide-title{font-size:clamp(26px,7vw,34px);max-width:16ch}
  /* Refuerzo declarativo del criterio móvil. El bloqueo real de la descarga
     lo hace videoAllowed() en el JS: aquí sólo se garantiza que no se vea. */
  .hero-video{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hero-slide,
  .hero-slide img,
  .hero-slide-content{
    transition:none !important;
    animation:none !important;
    transform:none !important;
  }
  /* La línea de progreso representa un autoplay que en este modo no existe.
     Se retira por completo en lugar de dejarla estática o saltando al 100%. */
  .hero-progress{display:none}
  .hero-progress-bar{animation:none !important}
  /* Sin video: queda la fotografía de fallback, que comparte composición
     con el primer frame. No depende de que el archivo poster exista. */
  .hero-video{display:none}
  .hero-media.is-video-ready .hero-video{opacity:0}
  .megamenu{transition:none !important}
}

/* ==========================================================================
   CORRECCIÓN — CTA "Conversemos" del header
   Clase real en el HTML: .nav-cta (junto a .btn .btn-primary).
   Causa del texto negro: `.nav a{color:var(--text)}` (0,1,1) vencía a
   `.btn-primary` (0,1,0). Este bloque va al final de la hoja, después de todos
   los estilos globales de enlaces y navegación.
   Sólo cambia fondo, color, peso y foco. No toca tamaño, radio, posición,
   espaciado del header, navegación, logo ni ningún otro color del sitio.
   NOTA: el enlace "Contáctanos" de la navegación NO se ve afectado.
   ========================================================================== */
.site-header .nav-cta,
.site-header .nav-cta:link,
.site-header .nav-cta:visited,
.site-header .nav-cta:hover,
.site-header .nav-cta:focus,
.site-header .nav-cta:active{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--secondary);
  color:#FFFFFF !important;
  text-decoration:none;
  font-weight:700;
  text-align:center;
}
.site-header .nav-cta:hover{
  background:#0089BA;
  color:#FFFFFF !important;
}
.site-header .nav-cta:focus-visible{
  background:#0089BA;
  color:#FFFFFF !important;
  outline:3px solid #00A5DF;
  outline-offset:3px;
}
/* El subrayado magenta de la navegación no debe alcanzar al CTA */
.site-header .nav-cta::after{content:none}

/* ============================================================
   PRUEBA DE VIDEO EN LA APERTURA
   Velo de marca sobre el clip de la historia 01. Sólo se ve cuando el
   video está visible: sobre la fotografía de fallback no aplica.
   No cambia el encuadre, la proporción ni el color de la imagen.
   ============================================================ */
.hero-video-veil{
  position:absolute;inset:0;pointer-events:none;
  background:var(--primary);
  opacity:0;
  transition:opacity 600ms cubic-bezier(.22,.61,.36,1);
}
.hero-media.is-video-ready .hero-video-veil{opacity:.12}

@media (max-width:820px){
  /* En móvil no hay video: tampoco velo. */
  .hero-video-veil{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hero-video-veil{display:none}
}

/* ============================================================
   ITERACIÓN UX — REVELADO PROGRESIVO
   Patrón único y reutilizable: los elementos .is-extra viven en el marcado
   con el atributo hidden y se muestran a petición de la persona.
   Reutiliza los tokens y botones aprobados: sin colores, tipografías ni
   formas nuevas. No interviene el sistema de video de la apertura.
   ============================================================ */

.reveal-more-wrap{display:flex;justify-content:center;margin-top:32px}
.reveal-more{min-height:44px;transition:opacity var(--t),transform var(--t)}

.is-revealed{animation:uxFadeIn 280ms ease-out both}
@keyframes uxFadeIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .is-revealed{animation:none}
}

/* Mega menús reducidos a cuatro accesos: una columna de enlaces,
   dos cuando el menú conserva su columna destacada. */
.mega-inner{grid-template-columns:minmax(0,340px)}
.mega-inner--feature{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
.mega-col--single ul{margin:0}

@media (max-width:1080px){
  .mega-inner,
  .mega-inner--feature{grid-template-columns:1fr}
}

/* ==========================================================================
   SPRINT 2 — PULIDO PREMIUM (estructura original preservada)
   Navbar · Hero · Flechas · Espaciados · Animaciones
   ========================================================================== */

/* ---------- 1. Navbar — transparente en hero, sólida al scroll ---------- */
.home-v3 .site-header.is-hero{
  background:transparent;
  backdrop-filter:none;
  border-color:transparent;
  transition:background 350ms var(--ease),backdrop-filter 350ms var(--ease),border-color 350ms var(--ease);
}
.home-v3 .site-header.is-hero .brand img{filter:brightness(10)}
.home-v3 .site-header.is-hero .nav a:not(.btn),
.home-v3 .site-header.is-hero .nav-trigger{color:rgba(255,255,255,.88)}
.home-v3 .site-header.is-hero .nav a:not(.btn):hover,
.home-v3 .site-header.is-hero .nav-trigger:hover{color:#fff}
.home-v3 .site-header.is-hero .nav-toggle span{background:#fff}
.home-v3 .site-header.is-hero .nav-caret{border-color:rgba(255,255,255,.72)}

.home-v3 .site-header.is-hero.is-solid{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-color:var(--outline);
}
.home-v3 .site-header.is-hero.is-solid .brand img{filter:none}
.home-v3 .site-header.is-hero.is-solid .nav a:not(.btn),
.home-v3 .site-header.is-hero.is-solid .nav-trigger{color:var(--text)}
.home-v3 .site-header.is-hero.is-solid .nav a:not(.btn):hover,
.home-v3 .site-header.is-hero.is-solid .nav-trigger:hover{color:var(--primary)}
.home-v3 .site-header.is-hero.is-solid .nav-toggle span{background:var(--text)}
.home-v3 .site-header.is-hero.is-solid .nav-caret{border-color:var(--text)}

/* ---------- 2. Hero — espaciado y overlay refinado ---------- */
/* El hero ocupa la pantalla entera, como en los dos benchmarks. Y sólo la
   pantalla: el margen negativo de .hero ya lo sube por detrás de la barra, así
   que sumarle además la altura de la barra lo hacía sobresalir por abajo. */
.home-v3 .hero-track{height:100svh}

/* ---------- 3. Flechas — reposicionadas a los bordes, discretas ---------- */
.home-v3 .hero-controls{
  background:transparent;backdrop-filter:none;
  border-radius:0;padding:0;
  position:static;
}
.home-v3 .hero-arrow{
  /* A pedido del cliente: se retiran de la vista. Siguen en el DOM (no
     display:none) porque script.js las toma con querySelector('.hero-prev')
     sin comprobar null — quitarlas del árbol rompe el carrusel entero. */
  display:none;
  position:absolute;top:50%;transform:translateY(-50%);
  width:56px;height:56px;min-width:56px;border-radius:999px;
  background:transparent;border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:22px;z-index:10;
  transition:background var(--t),border-color var(--t);
}
.home-v3 .hero-prev{left:clamp(16px,3vw,48px)}
.home-v3 .hero-next{right:clamp(16px,3vw,48px)}
.home-v3 .hero-arrow:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}

/* ---------- 4. Dots — centrados abajo, discretos ---------- */
.home-v3 .hero-dots{
  position:absolute;bottom:clamp(28px,4vh,44px);left:50%;transform:translateX(-50%);
  gap:10px;z-index:10;
}
.home-v3 .hero-dot{width:10px;height:10px;min-width:10px}
.home-v3 .hero-dot::before{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.35);transition:background var(--t),width var(--t)}
.home-v3 .hero-dot.is-active::before{background:#fff;width:22px;border-radius:999px}

/* ---------- 5. Play — oculto, se navega con flechas ---------- */
.home-v3 .hero-play{display:none}

/* ---------- 6. Contador — reposicionado ---------- */
.home-v3 .hero-count{
  left:clamp(16px,3vw,48px);top:clamp(22px,3vh,38px);
  font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.6);
}

/* ---------- 7. Barra de progreso — más fina ---------- */
.home-v3 .hero-progress{height:1px;background:rgba(255,255,255,.14)}
.home-v3 .hero-progress-bar{background:rgba(255,255,255,.7)}

/* ---------- 8. Espaciados — más aire entre secciones ---------- */
.home-v3 .brand-intro{padding:clamp(100px,14vw,200px) 0 clamp(90px,12vw,180px)}
.home-v3 .paths .path{min-height:clamp(460px,58vw,680px)}
.home-v3 .services{padding:clamp(100px,12vw,160px) 0}
.home-v3 .guidance{padding:clamp(90px,11vw,150px) 0}
.home-v3 .model{padding:clamp(100px,12vw,160px) 0}
.home-v3 .knowledge{padding:clamp(100px,12vw,160px) 0}
.home-v3 .updates{padding:clamp(100px,12vw,160px) 0}
.home-v3 .closing-grid{padding-block:clamp(90px,11vw,150px)}

/* ---------- 9. Microinteracciones ---------- */
.home-v3 .card:hover,.home-v3 .service:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(15,23,42,.08)}
.home-v3 .btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,23,42,.12)}
.home-v3 .btn-primary:hover{box-shadow:0 8px 24px rgba(29,79,145,.24)}
.home-v3 .btn-magenta:hover{box-shadow:0 8px 24px rgba(227,28,121,.2)}

/* ---------- 10. Reveal — refinado (GSAP lo reemplaza, fallback CSS) ---------- */
.home-v3 .reveal{opacity:0;transform:translateY(18px)}
.home-v3 .reveal.is-in{opacity:1;transform:none;transition:opacity 600ms var(--ease),transform 600ms var(--ease)}

/* ---------- 11. Tipografía — refinamiento ---------- */
.home-v3 .display{font-weight:400;line-height:1.02}
.home-v3 .home-campaign-message{font-weight:300;line-height:.96}

/* ---------- 12. Cierre — foto más grande ---------- */
.home-v3 .closing-photo{width:min(100%,520px);border-radius:999px;overflow:hidden;aspect-ratio:1}

/* ---------- 13. Responsive ---------- */
@media (max-width:1080px){
  /* el alto del hero ya es universal: 100svh + la barra medida */
}
@media (max-width:820px){
  .home-v3 .hero-arrow{width:44px;height:44px;min-width:44px}
  .home-v3 .hero-prev{left:10px}.home-v3 .hero-next{right:10px}
  .home-v3 .hero-dots{bottom:18px}
  .home-v3 .hero-count{left:10px;top:16px}
}

/* ---------- 14. Nav — barra Lithosquare, compartida por las 4 páginas ----------
   La barra lleva el logo, los accesos directos, la hamburguesa y el CTA de
   contacto. El menú a pantalla completa se abre con la hamburguesa.

   Se apoya en el mismo interruptor que ya existía para móvil (.nav.is-open,
   gobernado por script.js), así que no hace falta tocar ni el HTML ni el JS
   del menú: sólo cambia cómo se ve cada estado.

   La clase va en el <body> de las cuatro páginas: el Home la lleva junto a
   .home-v3, que además gobierna el hero y las secciones. */
.nav-v3 .nav-link{display:none !important}

/* Orden buscado: [Soy paciente] [Soy médico] ☰ [Conversemos].
   El botón vive DENTRO del <nav> y la hamburguesa FUERA, así que con orden de
   flex no se puede intercalar la hamburguesa entre ambos. Se ancla el botón a
   la derecha de la barra y se reserva su hueco con --cta-w, que el JS mide.
   La alternativa era display:contents en el <nav>, pero eso le quita al
   documento el punto de referencia de navegación para lectores de pantalla. */
.nav-v3 .header-inner{gap:20px;position:relative}
.nav-v3 .nav{margin-left:auto;order:2;gap:0}
.nav-v3 .nav-cta{
  display:inline-flex !important;margin-left:30px;
  /* .nav a le anulaba el padding lateral y el texto quedaba pegado al borde
     de la pastilla. */
  padding:0 26px;
}
/* ---- Desplegable de la barra ----
   Se reactiva: al pasar por "Soy paciente" o "Soy médico" baja una banda
   translúcida con sus secciones. El JS ya escuchaba el hover sobre el
   .nav-item (no sobre el botón, que aquí está oculto); lo único que lo
   apagaba era el display:none de esta regla.

   El enlace directo sigue siendo el que navega al hacer clic: el
   desplegable acompaña, no reemplaza. Quien llega por teclado no pierde
   nada — el enlace lleva a la página, que contiene esas mismas secciones. */
.nav-v3 .megamenu{
  background:rgba(29,79,145,.72);
  -webkit-backdrop-filter:saturate(160%) blur(20px);
  backdrop-filter:saturate(160%) blur(20px);
  border-top:1px solid rgba(255,255,255,.16);
  border-bottom:0;
  box-shadow:0 26px 50px rgba(15,23,42,.20);
}
.nav-v3 .mega-inner{
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding:20px var(--gutter) 24px;
  display:flex;gap:clamp(24px,3vw,56px);align-items:flex-start;
  justify-content:flex-end;
}
.nav-v3 .mega-col--single{flex:0 0 auto}
.nav-v3 .mega-col ul{flex-direction:row;gap:clamp(18px,2.4vw,40px)}
.nav-v3 .mega-col li a{
  position:relative;display:inline-block;
  padding:8px 0;min-height:0;font-size:16px;font-weight:400;
  color:rgba(255,255,255,.82);
}
.nav-v3 .mega-col li a::after{
  content:"";position:absolute;left:0;bottom:4px;
  width:0;height:1px;background:var(--secondary);transition:width var(--t);
}
.nav-v3 .mega-col li a:hover{color:#fff;padding-left:0}
.nav-v3 .mega-col li a:hover::after{width:100%}
/* El bloque "Destacado" no cabe en una banda compacta y repetía el acceso. */
.nav-v3 .mega-feature{display:none}

/* En pantallas donde la barra ya no tiene hover fiable, el desplegable no
   aporta: el enlace directo lleva a la misma página. */
@media (max-width:1080px){
  .nav-v3 .megamenu{display:none !important}
}

/* Los dos accesos están siempre visibles en la barra: no dependen del hover.
   Antes se desplegaban al acercar el cursor, pero el acceso quedaba escondido
   para quien no descubría el gesto. */
.nav-v3 .nav-item{
  display:flex;align-items:center;
  margin-left:30px;
  white-space:nowrap;
}
/* Se muestran los enlaces directos, no los botones desplegables: los mega
   menús no se usan en esta barra. */
.nav-v3 .nav-item .nav-trigger{display:none}
.nav-v3 .nav-item .nav-direct{display:block;font-size:15px;font-weight:500}
/* Contáctanos no se repite: ya está como botón al final de la barra. */
.nav-v3 .nav-item:nth-of-type(3){display:none}

/* ---- Barra sin hamburguesa ----
   Se retiró el botón: los accesos están visibles en todos los anchos. Estas
   reglas ganan por especificidad (.nav-v3 .nav) a las media queries de arriba,
   que convertían el <nav> en un panel desplegable dependiente del botón. Sin
   ellas, por debajo de 1080px la barra se quedaba sin navegación. */
.nav-v3 .nav{
  position:static;inset:auto;transform:none;opacity:1;pointer-events:auto;
  flex-direction:row;align-items:center;
  background:none;border:0;padding:0;margin:0 0 0 auto;
  max-height:none;overflow:visible;
}
.nav-v3 .nav a:not(.btn){padding:0;border:0}
.nav-v3 .nav-item{border:0}

@media (max-width:820px){
  .nav-v3 .header-inner{gap:12px}
  .nav-v3 .nav-item{margin-left:18px}
  .nav-v3 .nav-item .nav-direct{font-size:14px}
  .nav-v3 .nav-cta{margin-left:18px;padding:0 18px;font-size:14px}
}

/* Muy angosto: la barra pasa a dos filas —marca arriba, accesos abajo— en vez
   de esconder nada detrás de un botón. */
@media (max-width:560px){
  .nav-v3 .header-inner{
    flex-wrap:wrap;height:auto;row-gap:12px;
    padding-top:12px;padding-bottom:12px;
  }
  .nav-v3 .nav{width:100%;margin-left:0;justify-content:space-between;order:3}
  .nav-v3 .nav-item{margin-left:0}
  .nav-v3 .nav-cta{margin-left:0}
}


/* ---------- 14. Image mask — fallback visible, GSAP anima clip-path ---------- */
.home-v3 .path img,
.home-v3 .closing-photo img{clip-path:inset(0 0 0% 0)}

/* ---------- 15. Secciones — ligero solapamiento visual ---------- */
.home-v3 section{position:relative;z-index:1}
.home-v3 .hero{z-index:3}
.home-v3 .closing{z-index:2}

@media (prefers-reduced-motion:reduce){
  .home-v3 .reveal{opacity:1;transform:none;transition:none}
  .home-v3 .site-header.is-hero{transition:none}
}


/* ==========================================================================
   SPRINT 2.3 — INMERSIÓN VISUAL
   Benchmarks: Valcucine (refinamiento editorial) + Lithosquare (motion narrativo).
   Paleta y tono siguen siendo Q·RA: institucional médico, sobrio.
   Todo namespaceado bajo .home-v3 · la lógica vive en home.js.
   Regla de oro: el estado base es siempre legible. Si el JS no corre,
   no hay un solo texto invisible en la página.
   ========================================================================== */

/* --------------------------------------------------------------------------
   T1 · Titulares que suben palabra por palabra
   El splitter de home.js crea .word > .word-i. Sin JS estas clases no existen
   y el titular se renderiza tal cual: por eso aquí NO hay ningún opacity:0.
   El padding con margen negativo evita que overflow:hidden corte las
   descendentes de las letras.
   -------------------------------------------------------------------------- */
.home-v3 .word{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em;
}
.home-v3 .word-i{display:inline-block;will-change:transform}

/* --------------------------------------------------------------------------
   T2 · Frase de campaña con color scrub
   El punto magenta conserva su color: tiene regla propia y gana sobre la
   herencia de .word-i.
   -------------------------------------------------------------------------- */
.home-v3 .closing-title .word-i{color:rgba(255,255,255,.28)}
.home-v3 .closing-title .campaign-dot{color:var(--tertiary)}

/* --------------------------------------------------------------------------
   T3 · Imágenes apagadas en reposo, color pleno al hover (Valcucine 1.1.2)
   -------------------------------------------------------------------------- */
.home-v3 .path img,
.home-v3 .update-media img,
.home-v3 .article-media img,
.home-v3 .closing-photo img{
  filter:grayscale(18%) brightness(.94);
  transition:filter 500ms var(--ease),transform 460ms var(--ease);
}
.home-v3 .path:hover img,
.home-v3 .update:hover .update-media img,
.home-v3 .article:hover .article-media img,
.home-v3 .closing-photo:hover img{filter:grayscale(0) brightness(1)}

/* --------------------------------------------------------------------------
   T4 · Dim semántico en las rejillas (Lithosquare 2.3.4)
   La transición vive en la regla base para que también anime al salir.
   -------------------------------------------------------------------------- */
.home-v3 .update,
.home-v3 .service,
.home-v3 .knowledge-grid .article{transition:opacity 300ms var(--ease),transform var(--t),background var(--t),border-color var(--t)}
.home-v3 .update-grid:hover .update,
.home-v3 .service-grid:hover .service,
.home-v3 .knowledge-grid:hover .article{opacity:.45}
.home-v3 .update-grid:hover .update:hover,
.home-v3 .service-grid:hover .service:hover,
.home-v3 .knowledge-grid:hover .article:hover{opacity:1}

/* --------------------------------------------------------------------------
   T5 · Botones: el fondo se expande desde la izquierda (Lithosquare 2.3.3)
   Se resuelve con background-size sobre un gradiente, no con un pseudo-elemento:
   evita problemas de apilamiento con el texto del botón.
   -------------------------------------------------------------------------- */
.home-v3 .btn{
  background-repeat:no-repeat;
  background-position:left center;
  background-size:0% 100%;
  transition:background-color var(--t),color var(--t),transform var(--t),
             box-shadow var(--t),background-size 320ms var(--ease);
}
.home-v3 .btn-primary,
.home-v3 .btn-magenta{background-image:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18))}
.home-v3 .btn-light{background-image:linear-gradient(rgba(29,79,145,.1),rgba(29,79,145,.1))}
.home-v3 .btn:hover{background-size:100% 100%}

/* Las flechas conservan su desplazamiento lateral y nada más.
   Se probó el giro a 45° del benchmark: sobre estas tarjetas la flecha se
   salía del borde y quedaba torcida. Descartado. */

/* --------------------------------------------------------------------------
   Rutas: el botón deja de ser una pastilla blanca
   Sobre la fotografía, un bloque blanco sólido se lee como una mancha y le
   quita aire a la composición. Se convierte en texto blanco con una regla fina
   debajo, que es lo que hacen los dos benchmarks.
   -------------------------------------------------------------------------- */
.home-v3 .path .btn-light{
  background:transparent;background-image:none;
  border:0;border-bottom:1px solid rgba(255,255,255,.45);
  border-radius:0;padding:0 0 8px;min-height:0;
  color:#fff;font-size:16px;letter-spacing:.02em;
  transition:border-color var(--t),color var(--t);
}
.home-v3 .path:hover .btn-light{border-bottom-color:#fff}
/* El realce genérico de los botones no aplica aquí: no hay pastilla que elevar. */
.home-v3 .path .btn-light:hover{transform:none;box-shadow:none;background:transparent}

/* --------------------------------------------------------------------------
   T6 · Líneas divisorias que se dibujan (Lithosquare 2.1.3)
   Todas las .section-head del Home viven sobre fondo claro: la línea es
   var(--outline). El ancho lo anima GSAP desde 0.
   -------------------------------------------------------------------------- */
.home-v3 .section-head{position:relative;padding-top:30px}
.home-v3 .section-divider{
  position:absolute;top:0;left:0;height:1px;width:0;
  background:var(--outline);opacity:0;will-change:width,opacity;
}

/* --------------------------------------------------------------------------
   T7 · Fotografía que se construye y se desarma con el scroll
   El <img> original se queda en el documento (alt, SEO, fallback) y se apaga
   por opacidad sólo cuando el mosaico ya existe: nunca hay un hueco vacío.

   overflow:hidden en la pieza es OBLIGATORIO. Cada pieza contiene una copia
   de la fotografía dimensionada al contenedor entero y desplazada; sin el
   recorte, cada pieza muestra la imagen completa en miniatura y el resultado
   es una cuadrícula de fotos repetidas.
   -------------------------------------------------------------------------- */
.home-v3 .mosaic{
  position:absolute;inset:0;display:block;
  pointer-events:none;overflow:hidden;
}
/* Sin will-change. Con cientos de piezas en pantalla, will-change obliga al
   navegador a crear una capa de composición POR PIEZA: casi 900 capas entre
   los mosaicos y el hero. Eso es exactamente lo que hacía que la sección se
   arrastrara y pareciera que no estaba pasando nada. */
.home-v3 .mosaic-tile{
  position:absolute;display:block;overflow:hidden;
}
/* La copia dentro de cada pieza replica el object-fit del <img> original:
   recorta conservando la proporción en vez de estirar la fotografía. */
.home-v3 .mosaic-img{
  position:absolute;max-width:none;
  object-fit:cover;
  filter:grayscale(18%) brightness(.94);
  transition:filter 500ms var(--ease);
}
.home-v3 .path:hover .mosaic-img,
.home-v3 .closing-photo:hover .mosaic-img{filter:grayscale(0) brightness(1)}

.home-v3 .path.has-mosaic,
.home-v3 .closing-photo.has-mosaic{position:relative}
/* Fondo de marca detrás de los mosaicos: al desvanecerse la fotografía no
   asoma el blanco de la página, así el titular en blanco que va encima
   conserva contraste durante toda la deconstrucción. */
.home-v3 .path.has-mosaic{background:var(--text)}
.home-v3 .closing-photo.has-mosaic{background:rgba(255,255,255,.06)}

/* --------------------------------------------------------------------------
   T9 · Números del modelo que se encienden + borde que se dibuja
   -------------------------------------------------------------------------- */
.home-v3 .model-index{display:inline-block;will-change:transform,opacity}
.home-v3 .model-item{position:relative;padding-top:22px}
.home-v3 .model-item::before{
  content:"";position:absolute;top:0;left:0;height:2px;width:0;
  background:var(--secondary);will-change:width;
}

/* --------------------------------------------------------------------------
   T10 · Controles del hero (Valcucine: bullets hermes + arrows metis)
   El dot es un anillo de 14px que se llena de blanco desde abajo. El botón
   mide 44×44 para cumplir el área táctil mínima.
   -------------------------------------------------------------------------- */
.home-v3 .hero-dots{gap:0}
.home-v3 .hero-dot{
  width:44px;height:44px;min-width:44px;
  background:transparent;border:0;padding:0;
  position:relative;cursor:pointer;
}
.home-v3 .hero-dot::before,
.home-v3 .hero-dot::after{
  content:"";position:absolute;top:50%;left:50%;
  width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:999px;
}
.home-v3 .hero-dot::before{
  background:transparent;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75);
  transition:box-shadow var(--t);
}
.home-v3 .hero-dot::after{
  background:#fff;
  clip-path:inset(100% 0 0 0);
  transition:clip-path 300ms ease;
}
/* Se neutraliza la píldora del Sprint 2: el estado activo es el anillo que se
   llena, no un dot que se estira. */
.home-v3 .hero-dot.is-active::before{
  width:14px;background:transparent;
  box-shadow:inset 0 0 0 1.5px #fff;
}
.home-v3 .hero-dot.is-active::after{clip-path:inset(0 0 0 0)}

/* Flechas: escalan en hover, sin cambiar de fondo (skin metis) */
.home-v3 .hero-arrow{transition:transform 300ms var(--ease),background var(--t),border-color var(--t)}
.home-v3 .hero-arrow:hover{transform:translateY(-50%) scale(1.35);background:transparent}

/* --------------------------------------------------------------------------
   El enlace del hero deja de cubrir toda la diapositiva
   El <a> envuelve la diapositiva entera, así que al pasar el ratón por
   cualquier punto del hero el navegador enseñaba el destino en la barra de
   estado, todo el rato. Se le quitan los eventos de puntero y se le devuelven
   sólo al bloque de texto: el clic sigue funcionando —el evento nace en el
   texto y sube hasta el enlace— y el foco por teclado no se toca, así que no
   se pierde ninguna vía de acceso. Sólo deja de ser clicable la fotografía.
   -------------------------------------------------------------------------- */
.home-v3 .hero-slide-link{pointer-events:none}
.home-v3 .hero-slide-content{pointer-events:auto}

/* --------------------------------------------------------------------------
   Hero a sangre bajo la barra transparente
   El Sprint 2 volvió la barra transparente con el logo en blanco, pero la barra
   quedaba SOBRE el fondo blanco de la página, no sobre el hero: el logo era
   blanco sobre blanco y no se veía. El hero sube para pasar por debajo, que es
   la composición que persiguen los dos benchmarks: imagen a pantalla completa
   con la navegación flotando encima.
   flow-root en main impide que el margen negativo se colapse hacia fuera.
   -------------------------------------------------------------------------- */
.home-v3 main{display:flow-root}
.home-v3 .hero{margin-top:calc(-1 * var(--header-h,88px))}
.home-v3 .site-header.is-hero .brand img{filter:brightness(0) invert(1)}
.home-v3 .hero-count{top:calc(var(--header-h,88px) + clamp(14px,2vh,26px))}

@media (max-width:820px){
}

/* --------------------------------------------------------------------------
   T2a · La frase de apertura se fija y se llena de negro
   Misma mecánica que el cierre pero en claro: "Conocimiento que genera
   confianza." arranca en gris y el scroll la va llenando de negro palabra por
   palabra mientras el bloque queda clavado. Terminada la frase, suelta.
   -------------------------------------------------------------------------- */
.home-v3 .brand-intro{min-height:200svh;overflow:clip;padding-top:0;padding-bottom:0}
.home-v3 .brand-intro-inner{
  position:sticky;top:0;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  /* Sin esto el botón, como hijo flex, se estira a todo el ancho de la columna. */
  align-items:flex-start;
}
.home-v3 #claim .word-i{color:rgba(15,23,42,.22)}
.home-v3 .home-campaign-message .word-i{color:rgba(29,79,145,.22)}
.home-v3 .home-campaign-message .campaign-dot{color:var(--tertiary)}

@media (max-width:899px){
  .home-v3 .brand-intro{min-height:0;overflow:hidden;padding:clamp(100px,14vw,200px) 0 clamp(90px,12vw,180px)}
  .home-v3 .brand-intro-inner{position:static;min-height:0;display:block}
  .home-v3 #claim .word-i{color:var(--text)}
  .home-v3 .home-campaign-message .word-i{color:#1D4F91}
}

/* --------------------------------------------------------------------------
   T2b · La frase de campaña se fija y se sobrescribe (Lithosquare 2.2.2)
   La sección mide dos pantallas y su contenido queda pegado al viewport. En
   ese tramo el scroll no desplaza nada: sólo escribe la frase, palabra por
   palabra, de gris a blanco. Cuando termina, se suelta y la página sigue.
   Subiendo, se desescribe.

   overflow:clip y NO overflow:hidden. hidden crea un contenedor de scroll y
   position:sticky deja de pegarse; clip recorta igual sin romper el sticky.
   -------------------------------------------------------------------------- */
.home-v3 .closing{min-height:200svh;overflow:clip}
.home-v3 .closing-grid{
  position:sticky;top:0;
  min-height:100svh;align-content:center;
}
/* En pantallas pequeñas no se fija nada: el mismo umbral que usa el mosaico en
   home.js. Clavar un bloque de pantalla completa en móvil se siente como que
   la página se atascó. */
@media (max-width:899px){
  .home-v3 .closing{min-height:0;overflow:hidden}
  .home-v3 .closing-grid{position:static;min-height:0}
}

/* --------------------------------------------------------------------------
   T8 · El video del hero se alimenta con cuadritos
   La rejilla NO trocea el video: son cuadros opacos del color de fondo puestos
   encima, que se desvanecen para dejarlo ver. Va por debajo de los controles
   del carrusel (z-index 10) y no intercepta un solo clic.
   -------------------------------------------------------------------------- */
.home-v3 .hero-carousel{position:relative}
.home-v3 .hero-squares{
  position:absolute;inset:0;z-index:5;
  pointer-events:none;overflow:hidden;
}
.home-v3 .hero-square{
  position:absolute;display:block;
  background:var(--text);opacity:0;
  /* Cuadrados, sin máscara. Se probó recortarlos con el isotipo Q·RA: la
     estrella se lee bien mientras la pieza es translúcida, pero al llegar a
     negro sólido el racimo tiene huecos y no llega a cubrir. Descartado. */
}

/* --------------------------------------------------------------------------
   Movimiento reducido: todo lo anterior queda estático y completo.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .home-v3 .mosaic,
  .home-v3 .hero-squares{display:none}
  .home-v3 .closing{min-height:0}
  .home-v3 .closing-grid{position:static;min-height:0}
  .home-v3 .section-divider{width:100%;opacity:1}
  .home-v3 .model-item::before{width:100%}
  .home-v3 .closing-title .word-i{color:#fff}
  .home-v3 #claim .word-i{color:var(--text)}
  .home-v3 .home-campaign-message .word-i{color:#1D4F91}
  .home-v3 .brand-intro{min-height:0}
  .home-v3 .brand-intro-inner{position:static;min-height:0}
  .home-v3 .path img,
  .home-v3 .update-media img,
  .home-v3 .article-media img,
  .home-v3 .closing-photo img{filter:none}
}


/* ==========================================================================
   BARRA AZUL EN TODO EL SITIO — requerimiento de cliente
   Este bloque va al FINAL de la hoja a propósito: tiene que vencer a los
   estilos de barra de las cuatro páginas y a la barra transparente que el Home
   usaba sobre el hero.

   Se aplica sin namespacear: es la barra de todo el sitio, no del Home.
   El logo pasa a la versión negativa (assets/brand/logo-negativo.png) en el
   marcado, así que aquí no hace falta ningún filtro de color.
   ========================================================================== */
/* Se enumeran también las variantes con .home-v3 porque las reglas del Home
   pesan más por especificidad: sin nombrarlas, la barra del Home seguiría
   siendo transparente sobre el hero. */
.site-header,
.site-header.is-hero,
.site-header.is-hero.is-solid,
.site-header.is-stuck,
.home-v3 .site-header,
.home-v3 .site-header.is-hero,
.home-v3 .site-header.is-hero.is-solid,
.home-v3 .site-header.is-stuck{
  background:var(--primary);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
}

/* Todo el texto de la barra, en blanco */
.site-header .nav a:not(.btn),
.site-header .nav-trigger,
.home-v3 .site-header.is-hero .nav a:not(.btn),
.home-v3 .site-header.is-hero .nav-trigger,
.home-v3 .site-header.is-hero.is-solid .nav a:not(.btn),
.home-v3 .site-header.is-hero.is-solid .nav-trigger{color:rgba(255,255,255,.88)}

.site-header .nav a:not(.btn):hover,
.site-header .nav-trigger:hover,
.home-v3 .site-header.is-hero .nav a:not(.btn):hover,
.home-v3 .site-header.is-hero .nav-trigger:hover,
.home-v3 .site-header.is-hero.is-solid .nav a:not(.btn):hover,
.home-v3 .site-header.is-hero.is-solid .nav-trigger:hover{color:#fff}

/* El subrayado de la navegación pasa a turquesa: el magenta se pierde
   sobre el azul de marca. */
.site-header .nav a:not(.btn)::after,
.site-header .nav-trigger::after{background:var(--secondary)}

.site-header .nav-caret,
.home-v3 .site-header.is-hero .nav-caret,
.home-v3 .site-header.is-hero.is-solid .nav-caret{border-color:rgba(255,255,255,.75)}

.site-header .nav-toggle span,
.home-v3 .site-header.is-hero .nav-toggle span,
.home-v3 .site-header.is-hero.is-solid .nav-toggle span{background:#fff}

/* El logo negativo ya viene en blanco: se retira el filtro que usaba el Home. */
.home-v3 .site-header.is-hero .brand img,
.home-v3 .site-header.is-hero.is-solid .brand img{filter:none}

/* En móvil el panel desplegable también va en azul */
@media (max-width:820px){
  .site-header .nav{background:var(--primary);border-bottom-color:rgba(255,255,255,.18)}
  .site-header .nav a:not(.btn){border-bottom-color:rgba(255,255,255,.18)}
}

/* --------------------------------------------------------------------------
   El hero deja de meterse por debajo de la barra
   Con la barra transparente el hero subía para pasar por detrás. Ahora la barra
   es sólida y opaca: si el hero siguiera subiendo, perdería esa franja por
   debajo de ella. Arranca justo debajo y ocupa el resto de la pantalla.
   -------------------------------------------------------------------------- */
.home-v3 .hero{margin-top:0}
.home-v3 .hero-track{height:calc(100svh - var(--header-h,88px))}
.home-v3 .hero-count{top:clamp(14px,2vh,26px)}

/* ==========================================================================
   SISTEMA DE INTERACCION — Bloque A
   Decision A7 (12 ago 2026): el magenta es la marca y el movimiento; el
   turquesa es la interaccion. El punto magenta ES el logotipo, asi que no
   puede significar ademas "cliqueable" sin que el punto de Q·RA mienta.

     .accionable  linea turquesa   -> esto responde al cursor
     .flecha-mov  flecha magenta   -> esto te lleva a otra pantalla

   Nunca los dos en el mismo punto de contacto (A5).
   ========================================================================== */

/* A2 — la linea vive en un pseudo-elemento para no alterar el layout del
   elemento al aparecer. Se ancla abajo y crece desde la izquierda. */
.accionable{position:relative}
.accionable::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-4px;
  height:2px; background:var(--turquesa);
  opacity:0; transform:scaleX(.4); transform-origin:left center;
  transition:opacity 180ms var(--ease), transform 180ms var(--ease);
  pointer-events:none;
}
/* A6 — el foco por teclado revela exactamente lo mismo que el cursor. */
.accionable:hover::after,
.accionable:focus-visible::after,
a:hover .accionable::after,
a:focus-visible .accionable::after{opacity:1; transform:scaleX(1)}

/* En una tarjeta la linea se ancla al borde inferior del bloque, no al texto. */
.accionable--bloque::after{bottom:0; left:0; right:0}

/* Variante para controles redondos y pequenos. Los indicadores del hero ya
   usan su ::after para la animacion de relleno del carrusel, y ese ::after
   gana por especificidad (.home-v3 .hero-dot::after). Ademas, un subrayado
   bajo un punto de 10px no se lee. Aqui la senal turquesa es un anillo, que
   no necesita pseudo-elemento y no compite con nada. */
.accionable--punto::after{content:none}
.accionable--punto{
  transition:box-shadow 180ms var(--ease);
  border-radius:999px;
}
/* Sin aro turquesa en los puntitos: el estado activo ya se distingue por el
   ensanchado/blanco del punto. El foco de teclado conserva su outline (regla
   .hero-dot:focus-visible) para accesibilidad. */

/* A4 — flecha de navegacion. Magenta, a la derecha, se desplaza al acercarse. */
.flecha-mov{
  display:inline-flex; align-items:center; gap:8px;
  color:inherit; font-weight:500;
}
.flecha-mov::after{
  content:"\2192";
  color:var(--magenta); font-weight:700; line-height:1;
  transition:transform 180ms var(--ease);
}
a:hover .flecha-mov::after,
a:focus-visible .flecha-mov::after,
.flecha-mov:hover::after,
.flecha-mov:focus-visible::after{transform:translateX(6px)}

/* Sobre fondo oscuro la flecha necesita un magenta que no se apague. */
.guidance .flecha-mov::after,
.closing .flecha-mov::after,
.contact-talk .flecha-mov::after,
.path .flecha-mov::after{color:#FF5C9E}

@media (prefers-reduced-motion:reduce){
  .accionable::after,.flecha-mov::after{transition:none}
}

/* ==========================================================================
   FORMULARIO CONVERSEMOS — tarjeta de dos columnas (panel azul + formulario).
   Solo impacta en .talk-page (conversemos); contactanos y paciente no usan .cc-*.
   Los textos del sitio NO cambian: el panel reutiliza el copy existente.
   ========================================================================== */
body.contact-page .contact-card{display:grid;grid-template-columns:1fr;border-radius:24px;overflow:hidden;box-shadow:inset 0 0 0 1px #E2E8F0;background:#fff}
body.contact-page .cc-form{display:flex;flex-direction:column;justify-content:center;min-width:0}
body.contact-page .cc-form-body{display:flex;flex-direction:column;gap:22px;padding:clamp(30px,4vw,48px) clamp(24px,4vw,44px);min-width:0}
body.contact-page .cc-campo{display:flex;flex-direction:column;gap:8px;min-width:0;border:0;margin:0;padding:0}
body.contact-page .cc-label,body.contact-page fieldset.cc-campo legend{font-weight:600;font-size:14px;letter-spacing:.1px;color:#0F172A;padding:0}
body.contact-page .cc-hint{font-size:12px;line-height:16px;color:#64748B;margin:0}
body.contact-page .cc-fila-medio{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:2px}
body.contact-page .cc-input-wrap{position:relative;display:flex;align-items:center;height:52px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #CBD5E1;padding:0 18px;gap:10px;min-width:0;transition:box-shadow 150ms cubic-bezier(0.2,0,0,1)}
body.contact-page .cc-input-wrap:focus-within{box-shadow:inset 0 0 0 2px #1D4F91,0 0 0 3px rgba(0,165,223,.30)}
body.contact-page .cc-input-wrap.has-error{box-shadow:inset 0 0 0 1.5px #EF4444}
body.contact-page .cc-input{
  border:none;outline:none;background:#fff;font:400 15px/1.2 Roboto,sans-serif;color:#0F172A;
  height:52px;min-width:0;border-radius:999px;box-shadow:inset 0 0 0 1px #CBD5E1;padding:0 18px;width:100%;
  transition:box-shadow 150ms cubic-bezier(0.2,0,0,1);
}
body.contact-page .cc-input:focus{box-shadow:inset 0 0 0 2px #1D4F91,0 0 0 3px rgba(0,165,223,.30)}
body.contact-page .cc-input-wrap .cc-input{flex:1;height:100%;box-shadow:none;padding:0;background:none;width:auto}
body.contact-page .cc-textarea{width:100%}
body.contact-page .cc-ico{display:flex;color:#94A3B8;flex-shrink:0}
body.contact-page .cc-textarea{border-radius:18px;padding:14px 18px;height:auto;min-height:110px;line-height:22px;resize:vertical;width:100%}
body.contact-page .cc-select{appearance:none;flex:1;min-width:0;border:none;outline:none;background:none;font:400 15px/1.2 Roboto,sans-serif;color:#0F172A;cursor:pointer;height:100%}
body.contact-page .cc-select-flecha{display:flex;color:#94A3B8;flex-shrink:0;pointer-events:none}
body.contact-page .cc-error{font-size:12px;line-height:16px;color:#EF4444;margin:0}
body.contact-page .cc-error[hidden]{display:none}
body.contact-page .cc-check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;user-select:none;font-size:13px;line-height:19px;color:#475569}
body.contact-page .cc-check input{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
body.contact-page .cc-check-caja{width:22px;height:22px;border-radius:7px;flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;background:#fff;color:#fff;box-shadow:inset 0 0 0 1px #CBD5E1;transition:all 150ms cubic-bezier(0.2,0,0,1)}
body.contact-page .cc-check-caja svg{opacity:0}
body.contact-page .cc-check input:checked + .cc-check-caja{background:#1D4F91;box-shadow:inset 0 0 0 1px #1D4F91}
body.contact-page .cc-check input:checked + .cc-check-caja svg{opacity:1}
body.contact-page .cc-check input:focus-visible + .cc-check-caja{box-shadow:inset 0 0 0 2px #1D4F91,0 0 0 3px rgba(0,165,223,.30)}
body.contact-page .cc-check.has-error .cc-check-caja{box-shadow:inset 0 0 0 1.5px #EF4444}
body.contact-page .cc-check-texto{display:block}
body.contact-page .cc-boton{margin-top:4px;width:100%;height:54px;border:none;cursor:pointer;border-radius:999px;background:#E31C79;color:#fff;font-weight:600;font-size:15px;letter-spacing:.2px;display:flex;align-items:center;justify-content:center;gap:10px;transition:background 150ms cubic-bezier(0.2,0,0,1)}
body.contact-page .cc-boton:hover,body.contact-page .cc-boton:focus-visible{background:#C41567}
body.contact-page .cc-boton:disabled{opacity:.6;cursor:wait}
body.contact-page .cc-boton-ico{display:flex}
body.contact-page .cc-exito{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:clamp(30px,4vw,48px) clamp(24px,4vw,44px);animation:ccRise 350ms cubic-bezier(0.2,0,0,1)}
body.contact-page .cc-exito[hidden]{display:none}
body.contact-page .cc-exito-icono{width:72px;height:72px;border-radius:999px;background:#DCFCE7;color:#16A34A;display:flex;align-items:center;justify-content:center}
body.contact-page .cc-exito-titulo{margin:0;font-weight:600;font-size:26px;line-height:32px;color:#0F172A}
body.contact-page .cc-exito-nombre{margin:0;font-weight:500;font-size:15px;color:#1D4F91}
body.contact-page .cc-exito-texto{margin:0;font-size:15px;line-height:23px;letter-spacing:.2px;color:#475569;max-width:42ch;text-wrap:pretty}
body.contact-page .cc-exito-boton{margin-top:8px;background:none;border:none;cursor:pointer;color:#1D4F91;font-weight:600;font-size:14px;letter-spacing:.1px;height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 4px}
body.contact-page .cc-exito-boton:hover{color:#18437B;text-decoration:underline}
@keyframes ccRise{0%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:1}}
/* Panel azul (solo conversemos) */
body.talk-page .contact-talk-grid{display:grid;grid-template-columns:0.82fr 1fr;gap:0;align-items:stretch;max-width:960px;margin:0 auto;background:#fff;border-radius:24px;box-shadow:inset 0 0 0 1px #E2E8F0;overflow:hidden;padding:0}
.talk-page .contact-talk-copy{position:relative;background:#1D4F91;color:#fff;padding:40px 36px;display:flex;flex-direction:column;gap:20px;overflow:hidden;max-width:none;margin:0;text-align:left;min-height:560px}
.talk-page .contact-talk-copy h1{max-width:none;margin:0;color:#fff}
.talk-page .contact-talk-copy > p{margin:0}
.talk-page .cc-deco{position:absolute;border-radius:999px;pointer-events:none}
.talk-page .cc-deco-a{top:-40px;right:-30px;width:180px;height:180px;background:rgba(0,165,223,.18)}
.talk-page .cc-deco-b{bottom:60px;right:38px;width:14px;height:14px;background:#00A5DF}
.talk-page .cc-deco-c{bottom:100px;right:78px;width:8px;height:8px;background:rgba(255,255,255,.55)}
.talk-page .cc-deco-d{bottom:34px;left:-24px;width:120px;height:120px;background:rgba(255,255,255,.06)}
.talk-page .cc-panel-logo{display:block;position:relative;width:140px;height:49px;object-fit:contain;object-position:left}
.talk-page .cc-panel-texto{position:relative;display:flex;flex-direction:column;gap:12px;margin-top:4px}
.talk-page .cc-panel-eyebrow{font-weight:600;font-size:12px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;color:#8FD6F2;margin:0}
.talk-page .cc-panel-titulo{font-weight:600;font-size:clamp(24px,2.4vw,30px);line-height:1.25;letter-spacing:-.2px;text-wrap:pretty}
.talk-page .cc-panel-sub{margin:0;font-size:15px;line-height:23px;letter-spacing:.2px;color:#CADCF0;max-width:34ch;text-wrap:pretty}
.talk-page .cc-panel-scope{margin:0;font-size:12px;line-height:18px;color:rgba(255,255,255,.72);max-width:34ch;border-top:1px solid rgba(255,255,255,.22);padding-top:14px}
.talk-page .cc-form{display:flex;flex-direction:column;justify-content:center}
.talk-page .ct-form{max-width:none;margin:0}
@media (max-width:768px){
  body.talk-page .contact-talk-grid{grid-template-columns:1fr}
  .talk-page .contact-talk-copy{padding:32px 28px;min-height:auto}
  body.contact-page .cc-fila-medio{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){body.contact-page .cc-exito{animation:none}}

/* ==========================================================================
   CENTROS DE SERVICIO · datos de contacto
   Cada panel del acordeón cierra con los datos reales del centro. Antes solo
   había una descripción y un enlace al formulario: el paciente que ya sabe qué
   necesita no tenía cómo llamar.
   ========================================================================== */
.centro-datos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px 24px;margin:16px 0 20px;padding:16px 0 0;
  border-top:1px solid var(--outline);
}
.centro-datos dt{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--secondary);margin-bottom:4px;
}
.centro-datos dd{margin:0;font-size:15px;line-height:1.5;color:var(--text-2)}
.centro-datos a{color:var(--primary);text-decoration:none}
.centro-datos a:hover{text-decoration:underline}

/* La tarjeta de especialidad tiene dos salidas: la principal lleva a los
   médicos del área (que es lo que se está buscando) y la secundaria al
   formulario, para quien prefiere que le orienten. */
.dir-action--sec{font-size:14px;opacity:.72}
.dir-action--sec:hover{opacity:1}
.equipo-grupo{scroll-margin-top:110px}   /* el ancla no queda bajo la cabecera fija */