/* ============================================================================
   BridgeCare — sistema visual del sitio. Lo cargan las 18 paginas.
   Va DESPUES de site.css y cinematic.css, asi que este archivo manda.
   Las reglas del hero por capas solo enganchan en .spatial-hero, que unicamente
   existe en index.html: en las demas paginas son inertes.
   ========================================================================= */

:root{
  --h-ink:#0B2448;
  --h-deep:#06162E;
  --h-blue:#1E63EA;
  --h-blue-2:#164BC0;
  --h-gold:#75540A;
  --h-gold-soft:#E4B64B;
  --h-sky:#DCEEFA;
  --h-muted:#2F4763;
  --h-glass:rgba(243,250,255,.96);
  --h-line:rgba(11,36,72,.14);
  --h-serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --h-sans:"Manrope","Segoe UI",Arial,sans-serif;
  --h-nav:78px;
  /* Estos dos venian de site.css/cinematic.css y no llegaban al minimo sobre la
     fotografia: el gris azulado a 3.0:1 y el dorado claro a 1.8:1. */
  --muted:#334F6E;
  --gold:#8A6410;
}

body{font-family:var(--h-sans);color:var(--h-ink)}
/* el cielo deja de ser un pseudo-elemento: como <div> se puede mover con el scroll */
body:before{display:none}
.spatial-sky{position:fixed;inset:0;z-index:-2;pointer-events:none;will-change:transform;
  background:url('../assets/atmosphere.webp') center/cover no-repeat}
h1,h2,h3{font-family:var(--h-serif);font-weight:600;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
.lead{color:var(--h-muted)}

/* El cierre y el pie llevan texto claro, asi que necesitan fondo oscuro. Antes lo
   daba un velo FIJO a pantalla completa que subia con el porcentaje de scroll: en
   la franja de transicion oscurecia tambien la seccion clara que seguia en
   pantalla, y su texto oscuro caia a 1.7:1. El fondo ahora va anclado al
   documento, dentro del propio cierre, asi que solo oscurece donde corresponde. */
body:after{display:none}
/* La franja lleva fondo solido y el degradado vive SOLO en los 210 px de
   antesala. Antes el degradado cubria tambien la franja, asi que su parte alta
   quedaba a medio oscurecer y el eyebrow dorado caia a 2.7:1 en movil. */
.last{position:relative;margin-top:210px;background:var(--h-deep)}
.last:before{content:'';position:absolute;left:0;right:0;top:-210px;bottom:100%;z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(6,22,46,0) 0%,rgba(6,22,46,.45) 42%,rgba(6,22,46,.88) 76%,var(--h-deep) 100%)}
/* El pie viene con class="wrap", que lo estrecha; su fondo oscuro tiene que
   llegar a los dos bordes. En vez de desbordarlo con -50vw (que agranda el
   scrollWidth del documento), se vuelve ancho completo y recupera exactamente
   la misma caja de contenido con padding lateral. */
footer,footer.wrap{position:relative;width:auto;max-width:none;margin-inline:0;
  background:var(--h-deep);padding-inline:max(32px,calc(50% - 620px))}
/* en movil .wrap deja 18px de margen: el pie tiene que coincidir */
@media(max-width:640px){footer,footer.wrap{padding-inline:18px}}

.eyebrow{font-family:var(--h-sans);font-size:.75rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--h-gold);display:flex;align-items:center;gap:12px}
/* sobre el cierre oscuro el dorado claro contrasta 8.2:1; el oscuro no se veria */
.last .eyebrow,.close-band .eyebrow,.last .eyebrow:before,.close-band .eyebrow:before{color:var(--h-gold-soft)}
.last .eyebrow:before,.close-band .eyebrow:before{background:var(--h-gold-soft)}
.eyebrow:before{content:"";width:24px;height:2px;background:var(--h-gold);flex:none}

.btn{font-family:var(--h-sans);font-weight:600;border-radius:999px;
  background:linear-gradient(125deg,var(--h-blue),var(--h-blue-2));border-color:rgba(120,170,255,.55);
  box-shadow:0 10px 26px rgba(30,99,234,.26),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(30,99,234,.32)}
.btn.ghost,.btn.white{background:rgba(247,252,255,.92);color:var(--h-ink);border-color:#fff}

/* ---------------------------------------------------------------- hero --- */
.spatial-hero{height:330vh;position:relative;padding:0;min-height:0}
.hero-pin{position:sticky;top:0;height:100svh;overflow:clip}

/* Escena por capas: cada objeto va suelto sobre la atmosfera y se mueve a su
   propia velocidad y con su propio desenfoque, para que el puente salga del
   fondo en vez de crecer como una foto dentro de un rectangulo. */
.scene{position:absolute;inset:0;z-index:2;pointer-events:none}
.scene img{position:absolute;display:block;will-change:transform,opacity,filter}
.l-bridge{left:50%;top:58%;width:min(1120px,84vw);transform:translate(-50%,-50%)}
.l-book{left:4%;bottom:-8%;width:min(540px,42vw)}
.l-case{right:6%;top:15%;width:min(290px,21vw)}

.hero-copy-wrap{position:absolute;inset:var(--h-nav) 0 0;display:grid;place-content:center;
  text-align:center;z-index:5;padding:0 24px;will-change:transform,opacity}
/* scrim: mantiene el titular legible sobre cualquier zona de la escena */
.hero-copy-wrap:before{content:"";position:absolute;inset:-10% -6%;z-index:-1;
  background:radial-gradient(56% 56% at 50% 44%,rgba(230,244,253,.97) 0%,rgba(230,244,253,.90) 48%,rgba(230,244,253,.46) 70%,rgba(230,244,253,0) 86%)}
.hero-copy-wrap .eyebrow{justify-content:center}
.hero-copy-wrap h1{margin:20px auto 0;font-size:clamp(2.1rem,5.4vw,4.5rem);max-width:17ch}
.hero-copy-wrap .lead{margin:18px auto 0;max-width:42ch;font-size:clamp(.9375rem,1.5vw,1.15rem);color:#26405f}
.hero-copy-wrap .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.hero-copy-wrap .hero-points{display:flex;justify-content:center;flex-wrap:wrap;margin-top:30px;
  font-size:.8125rem;color:#3a5474;gap:0}
.hero-copy-wrap .hero-points>span{padding:0 14px;border-left:1px solid rgba(11,36,72,.2)}
.hero-copy-wrap .hero-points>span:first-child{border-left:0}

.wordmark{position:absolute;inset:0;display:grid;place-content:center;z-index:6;
  pointer-events:none;opacity:0;will-change:transform,opacity}
.wordmark b{display:block;font-family:var(--h-serif);font-weight:700;
  font-size:clamp(2.6rem,13vw,11.5rem);line-height:.9;letter-spacing:-.035em;
  background-image:url('../assets/bridge.webp');background-size:190% auto;background-position:48% 30%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 14px 34px rgba(6,30,60,.35))}
.wordmark small{display:block;text-align:center;margin-top:10px;font-size:clamp(.7rem,1.6vw,1.25rem);
  letter-spacing:.5em;text-transform:uppercase;color:#f4fbff;text-indent:.5em;
  text-shadow:0 2px 16px rgba(6,30,60,.55)}
.wm-scrim{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(120% 80% at 50% 48%,rgba(6,22,46,.72),rgba(6,22,46,.88))}
.scroll-hint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:8;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#3a5474;opacity:.75;margin:0}

@media(max-width:820px){
  .l-bridge{width:108vw;top:56%}
  .l-book{left:-10%;bottom:-2%;width:70vw}
  .l-case{right:-4%;top:11%;width:38vw}
  .hero-copy-wrap:before{inset:-16% -12%;
    background:radial-gradient(76% 48% at 50% 40%,rgba(230,244,253,.98) 0%,rgba(230,244,253,.92) 50%,rgba(230,244,253,.45) 70%,rgba(230,244,253,0) 84%)}
  .hero-copy-wrap .hero-points>span{padding:0 9px}
  /* el eyebrow del hero se parte en dos lineas: el trazo dorado quedaba suelto
     en el margen izquierdo, lejos del texto */
  .hero-copy-wrap .eyebrow:before{display:none}
}

/* --------------------------------------------- areas: lista con cursor --- */
.area-menu{border-top:1px solid var(--h-line);margin-top:38px}
.area-row{position:relative;display:flex;align-items:center;gap:20px;padding:clamp(16px,3vw,30px) 0;
  border-bottom:1px solid var(--h-line);text-decoration:none;color:var(--h-ink);
  isolation:isolate;overflow:hidden}
.area-row .fill{position:absolute;inset:0 -50vw;background:rgba(255,255,255,.55);
  transform:translateY(101%);transition:transform .55s cubic-bezier(.2,.7,.2,1);z-index:-1}
.area-row:hover .fill,.area-row:focus-visible .fill{transform:translateY(0)}
.area-row .num{font-size:.7rem;font-weight:700;letter-spacing:.16em;color:var(--h-gold);width:30px;flex:none}
.area-row h3{font-family:var(--h-serif);font-size:clamp(1.5rem,4vw,2.9rem);font-weight:500;margin:0;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.area-row:hover h3{transform:translateX(18px)}
.area-row .say{margin-left:auto;color:#2F4763;font-size:.9375rem;text-align:right;max-width:32ch;margin-bottom:0}
/* Las filas 2 a 5 caen justo sobre el puente y la ciudad: el fondo pasa de cielo
   claro a estructura oscura dentro de la misma linea de texto, y ningun color
   pasa en los dos sitios. El velo suave detras lo resuelve sin tapar la foto. */
.area-row .say,.catalog-heading p:not(.eyebrow),.section>.wrap>p.note,.section.wrap>p.note{position:relative;z-index:1}
.area-row .say:before,.catalog-heading p:not(.eyebrow):before,.section>.wrap>p.note:before,
.section.wrap>p.note:before{content:"";position:absolute;inset:-11px -26px;z-index:-1;
  border-radius:22px;
  background:radial-gradient(farthest-side ellipse at 50% 50%,rgba(234,245,254,.97) 0%,
    rgba(234,245,254,.92) 56%,rgba(234,245,254,.52) 80%,rgba(234,245,254,0) 100%)}
/* El numero es demasiado pequeno para llevar velo sin que se vea la pastilla:
   se resuelve con un dorado mas oscuro, que pasa incluso sobre el puente. */
.area-row .num{color:#6D4E09}
.area-row .go{font-size:1.4rem;color:var(--h-muted);transition:transform .5s cubic-bezier(.2,.7,.2,1),color .3s}
.area-row:hover .go{transform:translateX(-6px);color:var(--h-blue)}
@media(max-width:820px){.area-row .say{display:none}.area-row{gap:12px}}

.cursor-img{position:fixed;top:0;left:0;width:220px;height:280px;z-index:60;pointer-events:none;
  border-radius:6px;overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.92);
  transition:opacity .3s ease,transform .5s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 30px 60px rgba(6,30,60,.35)}
.cursor-img.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cursor-img img{width:100%;height:100%;object-fit:cover;opacity:0;position:absolute;inset:0;transition:opacity .3s}
.cursor-img img.show{opacity:1}
@media(max-width:900px),(pointer:coarse){.cursor-img{display:none}}

/* --------------------------------------------------------------- rieles --- */
.rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.rail-nav{display:flex;gap:8px}
.rail-nav button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(11,36,72,.2);
  background:rgba(247,252,255,.97);color:var(--h-ink);font-size:1.05rem;cursor:pointer;
  display:grid;place-items:center;transition:background .25s,transform .25s,opacity .25s}
.rail-nav button:hover{background:#fff;transform:translateY(-2px)}
.rail-nav button[disabled]{opacity:.35;cursor:default;transform:none}
.rail{display:flex;gap:clamp(12px,1.8vw,22px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding:26px 2px 8px;margin-top:6px;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing;scroll-snap-type:none}
.rail>*{scroll-snap-align:start;flex:none}
.rail .course-card{width:clamp(216px,25vw,310px);margin:0}
.rail .course-card img{aspect-ratio:16/11;object-fit:cover;width:100%;height:auto;pointer-events:none}
.rail .course-content h3{font-family:var(--h-sans);font-weight:700;letter-spacing:0;min-height:0}

.svc-tile{width:clamp(180px,21vw,236px);border-radius:16px;padding:22px;background:var(--h-glass);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 14px 36px rgba(18,58,100,.12);
  display:flex;flex-direction:column;justify-content:space-between;min-height:158px;
  text-decoration:none;color:var(--h-ink);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s}
.svc-tile:hover{transform:translateY(-6px);border-color:rgba(30,99,234,.45)}
.svc-tile h3{font-family:var(--h-sans);font-size:1rem;font-weight:700;letter-spacing:0;margin:0}
.svc-tile .count{font-family:var(--h-serif);font-size:2rem;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;margin:0}
.svc-tile .count small{font-family:var(--h-sans);font-size:.75rem;font-weight:600;color:var(--h-muted);
  letter-spacing:.1em;text-transform:uppercase;margin-left:7px}

/* La story se alinea con la altura real del navbar (js/home.js mide y escribe --h-nav). */
.story-stage{top:var(--h-nav);height:calc(100svh - var(--h-nav))}

/* Los capitulos se declaran con data-chapters en vez de style= inline: asi la CSP
   puede prohibir todo estilo inline sin excepciones. */
.scroll-story[data-chapters="2"]{--chapters:2}
.scroll-story[data-chapters="3"]{--chapters:3}
.scroll-story[data-chapters="4"]{--chapters:4}
.scroll-story[data-chapters="5"]{--chapters:5}
.scroll-story[data-chapters="6"]{--chapters:6}
.mt-22{margin-top:22px}

/* ------------------------------------------- texto sobre fotografia ---------
   El fondo es una foto: el contraste cambia segun donde caiga el texto. Un velo
   muy suave detras de los bloques pequenos garantiza el minimo en cualquier punto
   sin tapar la imagen. */
.scroll-hint,.story-guide{position:relative;z-index:1}
/* El eyebrow es texto de 12px sobre una fotografia con zonas claras y oscuras:
   ningun color pasa en todos los puntos. Un halo suave detras lo garantiza. */
/* El halo tiene que quedar DEBAJO de las letras. Como .eyebrow es un flex de
   ancho completo, un radial centrado al 50% caia en el hueco vacio de la fila y
   dejaba el texto (alineado a la izquierda) casi sin velo: 4.0:1 medidos. Con
   width:fit-content la caja abraza el texto y el halo cae donde hace falta. */
.eyebrow{position:relative;z-index:1;width:fit-content;max-width:100%}
.hero-copy-wrap .eyebrow{margin-inline:auto}
.last .eyebrow,.close-band .eyebrow{width:100%}
.eyebrow:after{content:"";position:absolute;inset:-6px -16px;z-index:-1;border-radius:999px;
  background:radial-gradient(closest-side,rgba(234,245,254,.97),rgba(234,245,254,.86) 62%,rgba(234,245,254,0) 100%)}
/* Sobre el cierre oscuro el halo claro sobraria: ahi el dorado claro ya contrasta 8.2:1 */
.last .eyebrow:after,.close-band .eyebrow:after{display:none}
/* Dentro de las tarjetas de plan el fondo ya es plano: alli se resuelve con tinta */
.plan .eyebrow:after{display:none}
.plan .eyebrow{color:#4d5f7c}
.scroll-hint:before,.story-guide:before{content:"";position:absolute;inset:-6px -18px;z-index:-1;
  border-radius:999px;
  background:radial-gradient(60% 100% at 50% 50%,rgba(232,243,252,.92),rgba(232,243,252,.55) 62%,rgba(232,243,252,0) 100%)}
.story-copy .lead,.story-copy h2,.story-copy .eyebrow{position:relative;z-index:1}
/* z-index:-1, no 0: con 0 el velo se pintaba POR ENCIMA del boton (los
   descendientes posicionados van despues de los inline en el orden de pintado)
   y el boton azul quedaba lavado, con su texto blanco a 1.2:1 */
.story-copy:before{content:"";position:absolute;inset:-8% -6% -8% -8%;z-index:-1;pointer-events:none;
  border-radius:24px;
  background:radial-gradient(72% 78% at 34% 50%,rgba(232,243,252,.80),rgba(232,243,252,.42) 58%,rgba(232,243,252,0) 82%)}
.story-copy{position:relative}
/* un poco mas de tinta en los textos chicos que van sobre cielo */
.scroll-hint{color:#2c4763}
.story-guide{color:#24425e}

/* ------------------------------------- huecos de modelo: ahora son imagenes ---
   Las alturas siguen viniendo de cinematic.css (.page-model, .mini, .story-model).
   Aqui solo se define como se compone la imagen dentro, ya sin Three.js. */
.page-model,.auth-model,.mini,.devices-model,.story-model{
  display:grid;place-items:center;min-width:0;overflow:hidden}
.page-model img,.auth-model img,.mini img,.devices-model img,.story-model img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 22px 44px rgba(6,30,60,.24));
  -webkit-mask-image:radial-gradient(ellipse 66% 66% at 50% 50%,#000 52%,rgba(0,0,0,.6) 72%,transparent 86%);
  mask-image:radial-gradient(ellipse 66% 66% at 50% 50%,#000 52%,rgba(0,0,0,.6) 72%,transparent 86%)}
.mini img{filter:none}

/* ------------------------------------------------- story: sin 3D, imagen --- */
.story-model{display:grid;place-items:center;height:100%;min-height:0}
.story-model img{max-height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 30px 60px rgba(6,30,60,.28));
  -webkit-mask-image:radial-gradient(ellipse 66% 66% at 50% 50%,#000 52%,rgba(0,0,0,.6) 72%,transparent 86%);
  mask-image:radial-gradient(ellipse 66% 66% at 50% 50%,#000 52%,rgba(0,0,0,.6) 72%,transparent 86%)}
.story-copy h2{font-family:var(--h-serif)}

/* --------------------------------------------------------------- footer --- */
footer .logo{background:none;padding:0;border-radius:0;width:178px}

/* --------------------------------------------------------- sin animacion --- */
.motion-off .scene img{transform:none!important;filter:none!important;opacity:1!important}
.motion-off .spatial-hero{height:auto}
.motion-off .hero-pin{position:relative;height:auto;min-height:70svh;padding-block:60px}
.motion-off .wordmark,.motion-off .wm-scrim,.motion-off .scroll-hint{display:none}
@media(prefers-reduced-motion:reduce){
  .scene img{transform:none!important;filter:none!important;opacity:1!important}
  .spatial-hero{height:auto}
  .hero-pin{position:relative;height:auto;min-height:70svh;padding-block:60px}
  .wordmark,.wm-scrim,.scroll-hint{display:none}
  body:after{opacity:0}
}

/* --------------------------------------------- legibilidad sobre la foto ---
   Todo esto se midio pixel a pixel contra el fondo REAL que pinta el navegador
   (foto + velo + degradado), no contra un color plano supuesto. */
/* Las tarjetas eran translucidas al 88-92%: sobre las zonas oscuras del puente
   el texto caia a 3.6:1. Suben a 96-97% y siguen leyendose como cristal. */
.course-card{background:rgba(234,244,251,.97)}
.course-content p{color:#3A5068}
/* El azul de enlace de site.css (#215cff) da 3.3:1 sobre el cielo */
.text-link,.dark .text-link{color:#1348B8}
.text-link{border-bottom-color:rgba(19,72,184,.35)}
/* Los tres apoyos del hero caen fuera del nucleo del scrim */
.hero-copy-wrap .hero-points{color:#24405F}
.hero-copy-wrap .hero-points>span{border-left-color:rgba(11,36,72,.28)}

/* --------------------------------------------------- paginas de documento ---
   Privacidad y Terminos son muros de texto largo. Sobre la fotografia el parrafo
   caia a 1.6:1: aqui el texto va sobre una hoja legible, que ademas es como se
   lee un documento. */
.legal{background:rgba(244,251,255,.95);border:1px solid rgba(255,255,255,.9);
  border-radius:26px;padding:clamp(26px,4vw,52px);box-shadow:0 18px 50px rgba(18,58,100,.12);
  max-width:900px}
.legal p,.legal li{color:#33506E}
.legal a,.legal aside a,.form-panel a,.faq-list a{color:#1348B8}
/* .footer-link tambien se usa dentro del panel de acceso, donde el fondo es
   claro: el color claro del pie solo vale dentro del pie. */
main .footer-link{color:#1348B8}
/* numeral decorativo grande: el dorado de site.css daba 1.8:1 */
.number{color:var(--gold)}
/* Los cuatro resumenes de privacidad/terminos usaban emoji del sistema como
   iconos: en Windows se ven de un estilo, en Mac de otro, y en ninguno pegan con
   la tipografia del sitio. Un trazo dorado cumple la misma funcion y es nuestro. */
.legal-point{display:flex;gap:16px;align-items:flex-start;margin-block:22px}
.legal-point-mark{flex:none;width:26px;height:2px;margin-top:13px;border-radius:2px;
  background:linear-gradient(90deg,var(--h-gold),rgba(125,90,12,.25))}
.legal-point h3{margin:0 0 6px;font-family:var(--h-sans);font-size:1rem;font-weight:700}
.legal-point p{margin:0}
.legal-warn{display:flex;gap:16px;align-items:flex-start;
  border-left:3px solid var(--h-gold);padding:14px 0 14px 18px;margin-block:22px;
  background:linear-gradient(90deg,rgba(125,90,12,.07),rgba(125,90,12,0) 70%)}
.legal-warn .legal-point-mark{display:none}
.legal-warn p{margin:0}
/* boton-enlace: el azul de site.css se queda a 4.4:1 sobre el cielo */
.text-button{color:#1348B8}
/* -------------------------------------------------------------- movil ---
   A 390 px la atmosfera se recorta al centro: el puente y sus reflejos ocupan
   casi toda la pantalla y el texto cae justo encima. Medido a ese ancho, los
   eyebrow y varios parrafos bajaban a 3.1:1. Un velo claro sobre la foto los
   devuelve por encima del minimo sin quitarle la imagen al movil. */
/* Cuanto mas estrecha la ventana, mas se recorta la atmosfera al centro y mas
   contrastada queda detras del texto. El velo compensa ese recorte por tramos:
   medido a 1440, 1240, 1024 y 390 px. */
.spatial-sky:after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(228,242,253,.16),rgba(228,242,253,.24))}
@media(max-width:1240px){
  .spatial-sky:after{background:linear-gradient(180deg,rgba(228,242,253,.31),rgba(228,242,253,.42))}
}
@media(max-width:820px){
  .spatial-sky:after{background:linear-gradient(180deg,rgba(228,242,253,.40),rgba(228,242,253,.58))}
  /* y el eyebrow, que es el texto mas pequeno, lleva el halo algo mas cerrado */
  .eyebrow:after{inset:-6px -12px;
    background:radial-gradient(farthest-side ellipse at 50% 50%,rgba(234,245,254,.98) 0%,
      rgba(234,245,254,.94) 60%,rgba(234,245,254,.55) 82%,rgba(234,245,254,0) 100%)}
}
/* Objetivo tactil minimo (WCAG 2.5.8 pide 24x24): los enlaces que van dentro de
   una linea de texto median entre 17 y 23 px de alto. El relleno vertical no
   mueve el renglon pero si agranda la zona que responde al dedo. */
.login-link,.legal a,.check a,.form-panel a,.legal-language a{padding-block:4px}
.footer-link{padding-block:2px}
/* la casilla va dentro de su <label>, asi que el area real que responde es toda
   la linea; aun asi la casilla sube a 22 px y toma el azul de marca */
.check input[type=checkbox]{width:22px;height:22px;accent-color:var(--h-blue)}

/* ===========================================================================
   BLOQUES NUEVOS DEL HOME (contenido de septiembre)
   ======================================================================== */

/* Chips: la linea de apoyos que cierra varios bloques. Van como pastillas
   claras y no como texto suelto porque casi siempre caen sobre la fotografia,
   donde el texto pequeno sin fondo no llega al minimo de contraste. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.chips>span{font-family:var(--h-sans);font-size:.8125rem;font-weight:600;color:#2F4763;
  background:rgba(240,248,255,.92);border:1px solid rgba(255,255,255,.9);
  border-radius:999px;padding:6px 13px;line-height:1.35}
.story-copy .chips{margin-top:14px}
.story-copy .chips>span{font-size:.75rem;padding:5px 11px}
.last .chips>span,.close-band .chips>span{background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.3);color:#EAF4FF}

/* Bloques de solo texto centrados en la columna de lectura */
/* La columna de lectura se estrecha con el texto, no con la seccion: si se
   estrecha la seccion, el margen automatico la centra y deja de alinear con
   el resto de la pagina. */
.narrow-intro h2{max-width:20ch}
.narrow-intro .lead{max-width:64ch}
.narrow-intro .lead+.lead{margin-top:14px}
.story-intro{padding-bottom:0}
.story-intro h2{max-width:26ch}

/* Encabezado secundario del riel de cursos: no es un h2, es la nota + flechas */
.rail-head-sub{margin-top:34px;align-items:center}
.rail-note{margin:0;font-family:var(--h-sans);font-weight:600;color:#2F4763;
  font-size:1.0625rem;position:relative;z-index:1}
.rail-note:before{content:"";position:absolute;inset:-10px -22px;z-index:-1;border-radius:20px;
  background:radial-gradient(farthest-side ellipse at 50% 50%,rgba(234,245,254,.97) 0%,
    rgba(234,245,254,.92) 56%,rgba(234,245,254,.52) 80%,rgba(234,245,254,0) 100%)}

/* Subtitulo dentro de una seccion: va debajo del h2 y por encima del cuerpo */
.section h2+h3{font-family:var(--h-sans);font-size:1.0625rem;font-weight:700;
  letter-spacing:0;color:var(--h-ink);margin:14px 0 12px}

/* Las dos columnas de certificados y empleos */
.split{align-items:center}
.split .devices-model img{width:100%;height:auto}
@media(max-width:640px){
  /* en una sola columna el texto va primero, aunque en el HTML vaya la imagen */
  .split-invertido .devices-model{order:2}
}

/* Rejilla de categorias de servicio del home */
/* tres columnas exactas: con auto-fit salian cinco y la sexta tarjeta
   ("Y mucho mas") se quedaba sola en una fila */
.cat-grid{display:grid;gap:clamp(12px,1.6vw,18px);margin-top:30px;
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cat-grid{grid-template-columns:1fr}}
.cat-card{display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px;
  border-radius:18px;background:var(--h-glass);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 14px 36px rgba(18,58,100,.12);text-decoration:none;color:var(--h-ink);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s}
.cat-card:hover{transform:translateY(-5px);border-color:rgba(30,99,234,.45)}
.cat-card h3{font-family:var(--h-sans);font-size:1rem;font-weight:700;letter-spacing:0;margin:0}
.cat-card p{margin:0;color:#3A5068;font-size:.9375rem}
.cat-card-mas{background:linear-gradient(140deg,rgba(11,36,72,.94),rgba(22,75,192,.9));
  border-color:rgba(120,170,255,.5)}
.cat-card-mas h3{color:#fff}
.cat-card-mas p{color:#D4E5FB}

/* La nota que cierra los planes */
.plan-nota{margin:26px auto 0;max-width:46ch;text-align:center;font-weight:600;
  color:#2F4763;position:relative;z-index:1}
.plan-nota:before{content:"";position:absolute;inset:-12px -24px;z-index:-1;border-radius:22px;
  background:radial-gradient(farthest-side ellipse at 50% 50%,rgba(234,245,254,.97) 0%,
    rgba(234,245,254,.92) 56%,rgba(234,245,254,.52) 80%,rgba(234,245,254,0) 100%)}

/* El cierre del home lleva parrafo y dos botones: deja de ser una fila */
.last-amplio .wrap{display:block}
.last-amplio h2{margin:0 0 16px;max-width:22ch}
.cierre-lead{max-width:58ch;color:#D6E6F8;font-size:1.0625rem;margin:0}
.last-amplio .actions{margin-top:26px}
/* El subtitulo del plan: la frase que explica para quien es, debajo del nombre */
.plan-sub{margin:2px 0 14px;color:#3A5068;font-size:.9375rem;font-weight:500}

/* Los precios se alinean con el resto de la pagina, no centrados: ahora la
   seccion lleva eyebrow, y un eyebrow a la izquierda con el titular centrado
   se lee como un descuadre. */
.pricing-section .wrap>h2{text-align:left;margin-inline:0}
.pricing-section .wrap>.lead{margin-inline:0}

/* En la franja oscura del cierre, el boton secundario no puede ser otra
   pastilla clara igual que el principal */
.last .btn.ghost,.close-band .btn.ghost{background:transparent;color:#EAF4FF;
  border-color:rgba(255,255,255,.45)}
.last .btn.ghost:hover,.close-band .btn.ghost:hover{background:rgba(255,255,255,.1)}
/* En movil .wrap solo deja 18 px de margen: los velos que desbordan 22-26 px
   a los lados sacaban 6 px de scroll horizontal del documento. */
@media(max-width:640px){
  .rail-note:before,.plan-nota:before{inset-inline:-12px}
  .catalog-heading p:not(.eyebrow):before,.section>.wrap>p.note:before,
  .section.wrap>p.note:before{inset-inline:-12px}
}

/* ===========================================================================
   CURSOS: router de intencion, tarjetas de area y modos de aprendizaje
   ======================================================================== */

/* Entrar por intencion: cuatro frases en primera persona que llevan al
   catalogo ya filtrado. Son <button> porque actuan sobre esta misma pagina. */
.intent-grid{display:grid;gap:clamp(12px,1.6vw,16px);margin-top:30px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){.intent-grid{grid-template-columns:1fr}}
.intent-card{display:flex;align-items:center;gap:16px;text-align:left;width:100%;
  padding:20px 22px;border-radius:16px;background:var(--h-glass);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 12px 30px rgba(18,58,100,.1);
  color:var(--h-ink);text-decoration:none;cursor:pointer;font:inherit;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s}
.intent-card:hover{transform:translateY(-4px);border-color:rgba(30,99,234,.45)}
.intent-card>div,.intent-card h3{min-width:0}
.intent-card h3{font-family:var(--h-sans);font-size:1rem;font-weight:700;letter-spacing:0;
  margin:0 0 4px}
.intent-card p{margin:0;color:#3A5068;font-size:.9375rem}
.intent-card .go{margin-left:auto;flex:none;font-size:1.3rem;color:var(--h-blue);
  transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.intent-card:hover .go{transform:translateX(5px)}

/* Las cuatro areas: la tarjeta lleva el "Ideal para", que es lo que hace que
   alguien se reconozca y elija. Por eso va destacado y no como un parrafo mas. */
.area-cards{display:grid;gap:clamp(14px,2vw,20px);margin-top:32px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:820px){.area-cards{grid-template-columns:1fr}}
.area-card{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,3vw,30px);
  border-radius:20px;background:var(--h-glass);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 16px 40px rgba(18,58,100,.12)}
.area-card-tag{margin:0;font-family:var(--h-sans);font-size:.6875rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--h-gold)}
.area-card h3{font-size:1.4rem;margin:0;max-width:24ch}
.area-card>p{margin:0;color:#3A5068;font-size:.9375rem}
.area-card-ideal{padding:12px 14px;border-radius:12px;background:rgba(30,99,234,.07);
  border-left:3px solid var(--h-blue);font-size:.875rem;color:#2F4763}
.area-card-ideal b{color:var(--h-ink)}
.area-card .btn{align-self:flex-start;margin-top:auto}

/* Los cuatro modos: lista corta que responde objeciones, no tarjetas */
/* Los cuatro modos van sobre la fotografia y el texto es de 14 px: sin una
   superficie propia caian a 2.9:1 justo encima del puente. */
.modos{display:grid;gap:0;margin-top:30px;grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--h-glass);border:1px solid rgba(255,255,255,.9);border-radius:18px;
  box-shadow:0 14px 36px rgba(18,58,100,.1);overflow:hidden}
@media(max-width:820px){.modos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.modos{grid-template-columns:1fr}}
.modo{padding:22px;border-left:1px solid var(--h-line)}
.modo:first-child{border-left:0}
@media(max-width:820px){.modo:nth-child(odd){border-left:0}.modo:nth-child(n+3){border-top:1px solid var(--h-line)}}
@media(max-width:480px){.modo{border-left:0}.modo+.modo{border-top:1px solid var(--h-line)}}
.modo b{display:block;font-family:var(--h-sans);font-size:1rem;font-weight:700}
.modo span{display:block;margin-top:6px;color:#3A5068;font-size:.875rem}

/* El catalogo tiene ancla propia: al llegar desde un atajo no debe quedar
   debajo de la cabecera fija */
#catalogo{scroll-margin-top:calc(var(--h-nav) + 20px)}

/* ===========================================================================
   COMO FUNCIONA: segundo parrafo del capitulo, rejilla de cuenta y banda de planes
   ======================================================================== */

/* Cada paso lleva dos parrafos: el primero es el titular hablado y el segundo
   el detalle. El segundo va mas pequeno para que el capitulo entero quepa en la
   pantalla pineada sin desbordar. */
.story-extra{max-width:450px;font-size:.9375rem;color:#3A5068;margin:10px 0 0;
  position:relative;z-index:1}

/* Los cinco elementos de la cuenta: no son tarjetas sueltas, son las partes de
   una misma cosa, asi que van en un solo panel dividido por lineas. */
.cuenta-grid{display:grid;gap:0;margin-top:30px;grid-template-columns:repeat(5,minmax(0,1fr));
  background:var(--h-glass);border:1px solid rgba(255,255,255,.9);border-radius:18px;
  box-shadow:0 14px 36px rgba(18,58,100,.1);overflow:hidden}
@media(max-width:1100px){.cuenta-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.cuenta-grid{grid-template-columns:1fr}}
.cuenta-item{padding:22px;border-left:1px solid var(--h-line)}
.cuenta-item:first-child{border-left:0}
@media(max-width:1100px){
  .cuenta-item:nth-child(3n+1){border-left:0}
  .cuenta-item:nth-child(n+4){border-top:1px solid var(--h-line)}
}
@media(max-width:700px){.cuenta-item{border-left:0}.cuenta-item+.cuenta-item{border-top:1px solid var(--h-line)}}
.cuenta-item b{display:block;font-family:var(--h-sans);font-size:1rem;font-weight:700}
.cuenta-item span{display:block;margin-top:6px;color:#3A5068;font-size:.875rem}
.cuenta-cierre{margin:26px 0 0;max-width:58ch;font-weight:600;color:#2F4763;
  position:relative;z-index:1}
.cuenta-cierre:before{content:"";position:absolute;inset:-11px -24px;z-index:-1;border-radius:20px;
  background:radial-gradient(farthest-side ellipse at 50% 50%,rgba(234,245,254,.97) 0%,
    rgba(234,245,254,.92) 56%,rgba(234,245,254,.52) 80%,rgba(234,245,254,0) 100%)}
@media(max-width:640px){.cuenta-cierre:before{inset-inline:-12px}}

/* Banda de planes: aqui solo se anuncian. Las cifras y la comparacion completa
   viven en precios.html, en un unico archivo. */
.plan-banda{margin-top:30px;border-radius:18px;overflow:hidden;
  background:var(--h-glass);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 14px 36px rgba(18,58,100,.1)}
.plan-linea{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:20px 24px;
  border-top:1px solid var(--h-line)}
.plan-linea:first-child{border-top:0}
.plan-linea b{font-family:var(--h-serif);font-size:1.5rem;font-weight:600;flex:none;min-width:88px}
.plan-linea span{color:#3A5068;font-size:.9375rem;flex:1 1 240px;min-width:0}
.plan-linea em{font-style:normal;font-family:var(--h-sans);font-weight:700;font-size:1.35rem;
  font-variant-numeric:tabular-nums;margin-left:auto;flex:none}
.plan-linea em small{font-size:.8125rem;font-weight:500;color:#3A5068}
@media(max-width:560px){.plan-linea em{margin-left:0}}

/* ===========================================================================
   BENEFICIOS: las 12 categorias con su conteo y la comparacion sin cifras
   ======================================================================== */

/* Doce categorias necesitan una rejilla mas densa que las seis del home */
.cat-grid-12{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.cat-grid-12{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.cat-grid-12{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* en movil se quedan en dos columnas: solo llevan titulo y numero, y en una
   sola columna eran doce pantallazos de lista */
@media(max-width:360px){.cat-grid-12{grid-template-columns:1fr}}
@media(max-width:760px){.cat-grid-12 .cat-card{padding:16px 16px 18px}
  .cat-grid-12 .cat-cuenta{font-size:1.5rem}}
.cat-cuenta{font-family:var(--h-serif);font-size:1.9rem;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;margin:auto 0 0}
.cat-cuenta small{font-family:var(--h-sans);font-size:.6875rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#3A5068;margin-left:7px}

/* Comparacion de planes SIN precio: aqui se explica la diferencia, las cifras
   viven en precios.html y en ningun otro sitio */
.plan-compara{display:grid;gap:clamp(14px,2vw,20px);margin-top:30px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.plan-compara{grid-template-columns:1fr}}
.plan-col{padding:clamp(22px,3vw,30px);border-radius:20px;background:var(--h-glass);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 16px 40px rgba(18,58,100,.12)}
.plan-col-pro{border-color:rgba(30,99,234,.45);box-shadow:0 18px 46px rgba(33,98,207,.18)}
.plan-col h3{font-family:var(--h-serif);font-size:1.7rem;margin:0}
.plan-col-tag{margin:6px 0 10px;font-family:var(--h-sans);font-weight:700;color:var(--h-ink)}
.plan-col>p{margin:0;color:#3A5068;font-size:.9375rem}

/* Descargo legal: va pegado a la promesa que matiza, no escondido en el FAQ */
.nota-legal{margin:14px 0 0;font-size:.8125rem;line-height:1.5;color:#2F4763;
  max-width:46ch;position:relative;z-index:1;padding-left:13px;
  border-left:2px solid rgba(11,36,72,.28)}
/* a 13 px sobre la fotografia el texto caia a 3.5:1: lleva su propio velo,
   salvo dentro de un capitulo, que ya tiene el suyo */
.nota-legal:before{content:"";position:absolute;inset:-9px -18px -9px -6px;z-index:-1;
  border-radius:16px;
  background:radial-gradient(farthest-side ellipse at 50% 50%,rgba(234,245,254,.97) 0%,
    rgba(234,245,254,.92) 58%,rgba(234,245,254,.55) 82%,rgba(234,245,254,0) 100%)}
.story-copy .nota-legal:before{display:none}
.story-copy .nota-legal{margin-top:12px}
/* Ventanas bajas: el capitulo entero tiene que caber en el escenario pineado.
   Con el descargo anadido, el paso 04 de como-funciona se pasaba 15 px a
   1440x700, asi que en pantallas bajas se aprietan los espacios. */
@media(max-height:760px){
  .story-copy h2{font-size:clamp(1.6rem,2.4vw,2.2rem)}
  .story-copy .lead{font-size:1rem;line-height:1.5}
  .story-extra{margin-top:6px;font-size:.875rem}
  .story-copy .chips{margin-top:8px}
  .story-copy .nota-legal{margin-top:8px}
}
/* Un lead que cae sobre la zona clara del puente: mismo velo suave que usan el
   resto de textos sueltos sobre la fotografia. */
/* Los bloques de solo texto van sobre la fotografia y su lead mide 19.5 px:
   es el punto donde el contraste se cae una y otra vez segun donde caiga la
   imagen. Todos llevan el velo, no solo el que fallo al medir. */
.lead-velo,.narrow-intro .lead{position:relative;z-index:1}
.lead-velo:before,.narrow-intro .lead:before{content:"";position:absolute;
  inset:-11px -24px;z-index:-1;border-radius:20px;
  background:radial-gradient(farthest-side ellipse at 50% 50%,rgba(234,245,254,.97) 0%,
    rgba(234,245,254,.92) 56%,rgba(234,245,254,.52) 80%,rgba(234,245,254,0) 100%)}
@media(max-width:640px){.lead-velo:before,.narrow-intro .lead:before{inset-inline:-12px}}

/* ===========================================================================
   SERVICIOS: el aviso de como funcionan y la entradilla de cada grupo
   ======================================================================== */

/* No es letra pequena: es lo que alguien necesita saber ANTES de explorar, y
   por eso va arriba y con la misma superficie que el resto de paneles. */
.aviso{background:var(--h-glass);border:1px solid rgba(255,255,255,.9);
  border-left:4px solid var(--h-gold);border-radius:0 18px 18px 0;
  padding:clamp(22px,3vw,30px);box-shadow:0 14px 36px rgba(18,58,100,.1);
  max-width:820px}
.aviso-titulo{font-family:var(--h-sans);font-size:1.0625rem;font-weight:700;
  letter-spacing:0;margin:0 0 14px;color:var(--h-ink)}
.aviso-lista{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.aviso-lista li{position:relative;padding-left:20px;font-size:.9375rem;color:#2F4763;
  line-height:1.55}
.aviso-lista li:before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--h-gold)}

/* Entradilla de cada grupo del catalogo: la frase gancho en negrita y el detalle
   detras, en el mismo parrafo, para no anadir otra fila de altura por grupo. */
.grupo-intro{max-width:70ch;margin:-6px 0 22px;color:#2F4763;font-size:.9375rem;
  position:relative;z-index:1}
.grupo-intro b{color:var(--h-ink);font-weight:700}
.grupo-intro:before{content:"";position:absolute;inset:-10px -22px;z-index:-1;border-radius:20px;
  background:radial-gradient(farthest-side ellipse at 50% 50%,rgba(234,245,254,.97) 0%,
    rgba(234,245,254,.92) 56%,rgba(234,245,254,.52) 80%,rgba(234,245,254,0) 100%)}
@media(max-width:640px){.grupo-intro:before{inset-inline:-12px}}

/* ===========================================================================
   PRECIOS: la tabla de comparacion y el aviso previo
   ======================================================================== */

.plan-desc{margin:0 0 18px;color:#2F4763;font-size:.9375rem}
/* el aviso bajo las tarjetas hereda .nota-legal pero va centrado y mas ancho */
.nota-precio{max-width:70ch;margin-inline:auto;margin-top:26px}

/* La tabla se parte en dos bloques: doce filas identicas y luego las seis que
   de verdad diferencian. Asi la diferencia se ve sin bajar toda la tabla. */
.tabla-planes{min-width:560px;margin:30px 0 0;background:var(--h-glass);
  border-radius:16px;overflow:hidden}
.tabla-planes thead th{background:rgba(11,36,72,.05);font-family:var(--h-sans);
  font-size:1.0625rem;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--h-ink);padding:16px 18px;vertical-align:bottom}
.tabla-planes thead th:first-child{font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:#2F4763;font-weight:600}
.tabla-planes thead th small{display:block;margin-top:3px;font-size:.8125rem;
  font-weight:600;color:#2F4763;font-variant-numeric:tabular-nums}
/* la columna de Pro va marcada de arriba abajo, no solo en la cabecera */
.tabla-planes thead th.col-pro{background:rgba(30,99,234,.12)}
.tabla-planes tbody tr td:last-child{box-shadow:inset 0 0 0 999px rgba(30,99,234,.05)}
.tabla-planes tbody tr.tabla-seccion th{box-shadow:none}
.tabla-planes th[scope=row]{font-family:var(--h-sans);font-size:.9375rem;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--h-ink);background:none;
  padding:12px 18px;text-align:left}
.tabla-planes td{text-align:center;padding:12px 18px;width:132px;
  font-size:1.05rem;font-weight:700}
.tabla-planes td.si{color:#0B6B23}
.tabla-planes td.no{color:#5A7290}
.tabla-planes tbody tr:nth-child(odd of :not(.tabla-seccion)){background:rgba(255,255,255,.35)}
.tabla-seccion th{font-family:var(--h-sans);font-size:.6875rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--h-gold);
  background:rgba(11,36,72,.045);padding:13px 18px;text-align:left;border-top:0}
.tabla-planes tbody tr:first-child th{border-top:0}

/* El aviso previo a Pro reutiliza el panel de servicios, con parrafos */
.aviso-p{margin:0 0 12px;font-size:.9375rem;color:#2F4763;line-height:1.6;max-width:72ch}
.aviso-p:last-child{margin-bottom:0}
.aviso-p b{color:var(--h-ink);font-weight:700}
.aviso .eyebrow{margin-bottom:12px}

/* En movil la tabla NO se desplaza en horizontal: se comprime y cabe entera.
   Con min-width la pagina se podia arrastrar 152 px hacia la derecha. */
@media(max-width:640px){
  .tabla-planes{min-width:0}
  .tabla-planes td{width:52px;padding:12px 4px;font-size:1rem}
  .tabla-planes th[scope=row]{padding:12px 10px;font-size:.875rem}
  .tabla-planes thead th{padding:12px 8px;font-size:.9375rem}
  .tabla-planes thead th small{font-size:.6875rem;letter-spacing:-.01em}
  .tabla-planes thead th:first-child{font-size:.625rem}
  .tabla-seccion th{padding:11px 10px}
}

/* ===========================================================================
   EMPLEOS: el recorrido, los campos de una vacante y los estados
   ======================================================================== */

/* El recorrido de seis pasos: numerado porque el orden es la informacion */
.ruta{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--h-glass);border:1px solid rgba(255,255,255,.9);border-radius:18px;
  box-shadow:0 14px 36px rgba(18,58,100,.1);overflow:hidden}
@media(max-width:820px){.ruta{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.ruta{grid-template-columns:1fr}}
.ruta li{display:flex;align-items:baseline;gap:12px;padding:20px 22px;
  border-left:1px solid var(--h-line);border-top:1px solid var(--h-line)}
.ruta li:nth-child(-n+3){border-top:0}
.ruta li:nth-child(3n+1){border-left:0}
@media(max-width:820px){
  .ruta li:nth-child(-n+3){border-top:1px solid var(--h-line)}
  .ruta li:nth-child(-n+2){border-top:0}
  .ruta li:nth-child(3n+1){border-left:1px solid var(--h-line)}
  .ruta li:nth-child(odd){border-left:0}
}
@media(max-width:480px){.ruta li{border-left:0}.ruta li:first-child{border-top:0}}
.ruta-n{font-family:var(--h-sans);font-size:.6875rem;font-weight:700;letter-spacing:.12em;
  color:var(--h-gold);flex:none;font-variant-numeric:tabular-nums}
.ruta li b{font-family:var(--h-sans);font-size:.9375rem;font-weight:600;color:var(--h-ink)}
.ruta-cierre{margin:26px 0 0;max-width:64ch;font-weight:600;color:#2F4763;
  position:relative;z-index:1}
.ruta-cierre:before{content:"";position:absolute;inset:-11px -24px;z-index:-1;border-radius:20px;
  background:radial-gradient(farthest-side ellipse at 50% 50%,rgba(234,245,254,.97) 0%,
    rgba(234,245,254,.92) 56%,rgba(234,245,254,.52) 80%,rgba(234,245,254,0) 100%)}
@media(max-width:640px){.ruta-cierre:before{inset-inline:-12px}}

/* Los nueve campos de una vacante. Tres se despliegan porque son los que
   diferencian; los otros seis son una linea cada uno. */
.campos{display:grid;gap:clamp(12px,1.6vw,16px);margin-top:30px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.campos{grid-template-columns:1fr}}
.campo{padding:20px 22px;border-radius:16px;background:var(--h-glass);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 12px 30px rgba(18,58,100,.1)}
.campo>b{display:block;font-family:var(--h-sans);font-size:1rem;font-weight:700;color:var(--h-ink)}
.campo>span{display:block;margin-top:5px;color:#2F4763;font-size:.9375rem}
.campo-ancho{grid-column:1/-1;border-left:3px solid var(--h-blue)}
.campo-mas{margin-top:16px;padding-top:16px;border-top:1px solid var(--h-line)}
.campo-mas p{margin:0 0 10px;color:#2F4763;font-size:.9375rem;max-width:72ch}
.campo-mas p:last-child{margin-bottom:0}
.campo-mas-titulo{font-weight:700;color:var(--h-ink)!important}
.campo-lista{margin:0;padding:0;list-style:none;display:grid;gap:7px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:620px){.campo-lista{grid-template-columns:1fr}}
.campo-lista li{position:relative;padding-left:18px;font-size:.9375rem;color:#2F4763}
.campo-lista li:before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--h-gold)}
.campo-lista-def li b{color:var(--h-ink);font-weight:700;margin-right:5px}
.campo-clave{font-weight:700;color:var(--h-ink)!important;font-size:1rem!important;
  padding:12px 14px;border-radius:12px;background:rgba(30,99,234,.07);
  border-left:3px solid var(--h-blue)}

/* Los tres estados de elegibilidad: color por estado, siempre con su etiqueta */
.estados{display:grid;gap:clamp(12px,1.6vw,16px);margin-top:30px;
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:820px){.estados{grid-template-columns:1fr}}
.estado{padding:20px 22px;border-radius:16px;background:var(--h-glass);
  border:1px solid rgba(255,255,255,.9);border-top:3px solid var(--h-line);
  box-shadow:0 12px 30px rgba(18,58,100,.1)}
.estado-ok{border-top-color:#0B6B23}
.estado-medio{border-top-color:var(--h-blue)}
.estado-aviso{border-top-color:var(--h-gold)}
.estado b{display:block;font-family:var(--h-sans);font-size:1rem;font-weight:700;color:var(--h-ink)}
.estado span{display:block;margin-top:6px;color:#2F4763;font-size:.9375rem}

/* ==========================================================================
   FAQ: 33 preguntas en 7 grupos, con filtro por tema
   ========================================================================== */
/* el aviso honesto va bajo el hero: mas discreto que el de servicios */
.aviso-nota{border-left:3px solid var(--h-gold-soft)}
.intro+.section .aviso-nota{margin-top:0}

/* cada grupo: un h2 pequeno que separa sin gritar */
.faq-group{padding:0;margin-top:44px}
.faq-group:first-of-type{margin-top:26px}
.faq-group>h2{font-family:var(--h-sans);font-size:1.1875rem;font-weight:800;
  letter-spacing:-.005em;line-height:1.3;color:var(--h-ink);
  margin:0 0 14px;padding-bottom:11px;border-bottom:2px solid rgba(11,36,72,.13)}

/* el tema activo en la barra lateral */
.faq-topics button[aria-pressed=true]{color:var(--h-blue);font-weight:750}
.faq-topics button[aria-pressed=true]:before{content:"";display:inline-block;
  width:3px;height:13px;background:var(--h-gold-soft);
  margin-right:9px;vertical-align:-2px;border-radius:2px}

/* las tarjetas de pregunta */
.faq-content details{border:1px solid rgba(11,36,72,.10)}
.faq-content summary{color:var(--h-ink);font-weight:650;line-height:1.4}
.faq-content details p{color:#2F4763;line-height:1.65;max-width:70ch}
.faq-content details .text-link{margin-top:14px;font-size:.9rem}
.faq-content #faq-empty{padding:56px 24px}
.faq-content #faq-empty h2{font-family:var(--h-serif);margin-bottom:10px}
@media(max-width:640px){
  .faq-group{margin-top:34px}
  .faq-group>h2{font-size:1.0625rem}
  .faq-topics button[aria-pressed=true]:before{display:none}
}

/* ==========================================================================
   CENTRO DE AYUDA: el indice de ocho temas con dos salidas cada uno
   ========================================================================== */
.temas-grid{align-items:stretch}
.tema{display:flex;flex-direction:column}
.tema .number{margin-bottom:18px;font-size:2rem}
.tema h3{font-family:var(--h-sans);font-size:1.1875rem;font-weight:750;
  color:var(--h-ink);margin-bottom:10px;line-height:1.3}
.tema p{flex:1;font-size:.9375rem;line-height:1.6;margin-bottom:20px}
.tema-acciones{display:grid;gap:11px;margin-top:auto;align-items:start}
.tema-acciones .text-link{align-self:start;font-size:.9rem}
.text-link-suave{color:#2F4763;border-bottom-color:rgba(11,36,72,.22);font-weight:600}
.text-link-suave:hover{color:var(--h-blue)}
@media(max-width:640px){
  .tema .number{margin-bottom:12px;font-size:1.75rem}
  .tema h3{font-size:1.0625rem}
}

/* ==========================================================================
   CONTACTO: el formulario primero, la guia al lado, las alianzas aparte
   ========================================================================== */
.contacto-correo{margin:22px 0 6px;font-size:1.0625rem;font-weight:700}
.contacto-correo a{display:inline-block;color:#1348B8;border-bottom:1px solid rgba(19,72,184,.32);padding:4px 2px;min-height:26px}
.contacto-desvio{font-size:.9375rem;color:#2F4763;max-width:60ch;margin:0}
.contacto-desvio .text-link{font-size:.9375rem;margin-left:4px}

.contacto-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:34px;align-items:start;margin-top:26px}
.contacto-layout .form-panel{padding:38px}
.contacto-guia{position:sticky;top:calc(var(--h-nav) + 26px);padding:32px}
.contacto-guia h2{font-family:var(--h-sans);font-size:1.1875rem;font-weight:800;
  color:var(--h-ink);margin-bottom:12px;line-height:1.3}
.contacto-guia p{font-size:.9375rem;color:#2F4763;line-height:1.6}
.guia-lista{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.guia-lista li{position:relative;padding-left:20px;font-size:.9375rem;
  color:#2F4763;line-height:1.55}
.guia-lista li:before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--h-gold-soft)}
.guia-pie{margin-top:18px;padding-top:16px;border-top:1px solid var(--h-line);
  font-size:.9rem;font-style:italic}

.campo-aviso{margin:10px 0 0;font-size:.875rem;line-height:1.55;color:#75540A;
  background:rgba(228,182,75,.13);border-left:3px solid var(--h-gold-soft);
  border-radius:0 10px 10px 0;padding:11px 14px}
.form-nota{margin:16px 0 0;font-size:.875rem;color:#2F4763;line-height:1.6}
.form-nota a{color:#1348B8;border-bottom:1px solid rgba(19,72,184,.32)}

.caso h3{font-family:var(--h-sans);font-size:1.0625rem;font-weight:750;
  color:var(--h-ink);margin-bottom:9px;line-height:1.35}
.caso p{font-size:.9375rem;line-height:1.6;margin:0}

@media(max-width:1000px){
  .contacto-layout{grid-template-columns:1fr;gap:24px}
  .contacto-guia{position:static}
}
@media(max-width:640px){
  .contacto-layout .form-panel{padding:24px}
  .contacto-guia{padding:24px}
  .contacto-correo{font-size:.9375rem;word-break:break-all}
}

/* ==========================================================================
   CERTIFICADOS: el bloque para quien ya tiene el suyo
   ========================================================================== */
.cert-puntos{align-items:stretch}
.cert-punto{display:flex;flex-direction:column}
.cert-punto h3{font-family:var(--h-sans);font-size:1.0625rem;font-weight:750;
  color:var(--h-ink);margin-bottom:10px;line-height:1.35}
.cert-punto p{flex:1;font-size:.9375rem;line-height:1.65;margin-bottom:0}
.cert-punto .text-link{margin-top:16px;align-self:start;font-size:.9rem}

/* ==========================================================================
   APP: la etiqueta de "todavia no se puede descargar" junto a los badges
   ========================================================================== */
.store-pronto{display:inline-flex;align-items:center;gap:9px;margin:0 0 12px;
  font-size:.8125rem;font-weight:650;line-height:1.45;color:#75540A;
  background:rgba(228,182,75,.16);border:1px solid rgba(117,84,10,.22);
  border-radius:999px;padding:7px 15px}
.store-pronto:before{content:"";width:7px;height:7px;flex:none;border-radius:50%;
  background:var(--h-gold-soft)}
footer .store-pronto{color:#F0D89A;background:rgba(228,182,75,.14);
  border-color:rgba(228,182,75,.34)}
.stores{margin-top:0}
@media(max-width:640px){.store-pronto{font-size:.78125rem;padding:6px 13px}}

/* ==========================================================================
   PWA: el bloque de instalacion en app.html
   ========================================================================== */
.instalar{margin-top:30px;padding:30px 32px;border-radius:22px;
  background:var(--h-glass);border:1px solid rgba(255,255,255,.9);
  border-left:3px solid var(--h-gold-soft);
  box-shadow:0 18px 48px rgba(19,46,94,.07);max-width:74ch}
.instalar h3{font-family:var(--h-sans);font-size:1.1875rem;font-weight:800;
  color:var(--h-ink);margin-bottom:10px;line-height:1.3}
.instalar p{font-size:.9375rem;line-height:1.65;color:#2F4763;margin-bottom:0}
.instalar .btn{margin-top:20px}
.instalar-pista{margin-top:16px!important;font-size:.875rem;font-weight:600;
  color:#75540A;line-height:1.55}
.instalar-pista:empty{display:none}
@media(max-width:640px){.instalar{padding:24px}}

/* ==========================================================================
   VOLVER ARRIBA: era un boton normal DESPUES del pie, sin posicionar. Al
   aparecer alargaba el documento y dejaba asomar el cielo bajo el pie oscuro.
   ========================================================================== */
.back-top{position:fixed;right:24px;bottom:24px;z-index:35;
  width:48px;height:48px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.85);border-radius:50%;
  background:var(--h-glass);color:var(--h-ink);
  font-size:1.125rem;line-height:1;cursor:pointer;
  box-shadow:0 10px 30px rgba(11,36,72,.20);
  transition:transform .2s,box-shadow .2s,background .2s}
.back-top:hover{background:#fff;transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(11,36,72,.28)}
.back-top:active{transform:translateY(0)}
/* el aviso flotante se aparta para no chocar con el boton */
@media(max-width:640px){
  .back-top{right:16px;bottom:16px;width:44px;height:44px}
  #toast{bottom:74px}
}