/* ============================================================
   Remotos Academy · sitio v8 (2-nov-2026)
   Estilo de la versión 5: blanco y azul, mucho aire, el azul manda.
   Cada tema en su propia página. Protagonista: el Campus real.
   ============================================================ */
:root{
  --azul:#0400BC; --electrico:#0012FD; --noche:#02005A; --noche-2:#070726; --amarillo:#FFE400;
  --tinta:#10101A; --texto-2:#4A4C5C; --linea:#E4E6F0; --suave:#F4F6FF;
  --f-tit:"Poppins",system-ui,sans-serif; --f-txt:"Montserrat",system-ui,sans-serif;
  --ancho:1200px; --margen:clamp(20px,4vw,40px); --ease:cubic-bezier(.16,1,.3,1);
  --sombra:0 40px 80px -40px rgba(2,0,60,.45);
  --campo-azul:radial-gradient(80% 90% at 0% 0%,#1B1FD6 0%,var(--azul) 42%,var(--noche) 100%);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--tinta);font:400 17px/1.6 var(--f-txt);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--f-tit);font-weight:600;margin:0;letter-spacing:-.035em}
p{margin:0} ul,ol{margin:0;padding:0;list-style:none} figure{margin:0} a{color:inherit}
button{font:inherit}
:focus-visible{outline:2px solid var(--electrico);outline-offset:3px}
.caja{max-width:var(--ancho);margin:0 auto;padding:0 var(--margen)}
.nota{margin-top:20px;font-size:13.5px;color:var(--texto-2)}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- títulos de sección ---------- */
.cabeza{max-width:740px;margin-bottom:56px}
.cabeza h2{font-size:clamp(30px,3.4vw,50px);line-height:1.08}
.cabeza p{margin-top:16px;font-size:clamp(17px,1.3vw,19px);color:var(--texto-2)}

.seccion{padding:clamp(100px,13vh,150px) 0}
.seccion.suave{background:var(--suave)}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 24px;border-radius:999px;font:600 16px/1 var(--f-tit);text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s,transform .2s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-amarillo{background:var(--amarillo);color:var(--tinta)}
.btn-amarillo:hover{background:#fff}
.btn-azul{background:var(--azul);color:#fff}
.btn-azul:hover{background:var(--electrico)}
.btn-borde{box-shadow:inset 0 0 0 2px var(--azul);color:var(--azul);background:transparent}
.btn-borde:hover{background:var(--azul);color:#fff}
.btn-chico{padding:12px 18px;font-size:14px}
.btn span[aria-hidden="true"]{display:inline-block;transition:transform .25s var(--ease)}
.btn:hover span[aria-hidden="true"]{transform:translateX(4px)}
.enlace-claro{font:600 16px/1 var(--f-tit);color:#fff;text-decoration:none;padding:16px 4px}
.enlace-claro:hover{text-decoration:underline;text-underline-offset:6px}
.enlace{font:600 15px/1 var(--f-tit);color:var(--azul);text-decoration:none}
.enlace:hover{text-decoration:underline;text-underline-offset:5px}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:36px}

/* ---------- cabecera ---------- */
.cab{position:sticky;top:0;z-index:30;background:var(--noche)}
.cab-in{display:flex;align-items:center;gap:28px;height:72px}
.logo img{height:28px;width:auto}
.menu{display:flex;gap:24px;margin-left:auto}
.menu a{font:500 15px/1 var(--f-txt);color:rgba(255,255,255,.86);text-decoration:none;position:relative;padding:6px 0}
.menu a:hover,.menu a[aria-current="page"]{color:#fff}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--amarillo);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.abrir-menu{display:none;margin-left:auto;padding:10px 16px;border-radius:999px;border:0;background:rgba(255,255,255,.12);color:#fff;font:600 14px/1 var(--f-tit);cursor:pointer}

.portada-bajada{margin-top:22px;font-size:clamp(17px,1.3vw,19.5px);color:rgba(255,255,255,.9);max-width:44ch}
.portada-aval{display:flex;align-items:center;gap:14px;margin-top:44px;font-size:14.5px;color:rgba(255,255,255,.88)}
.aval-chip{display:inline-grid;place-items:center;padding:7px 11px;border-radius:10px;background:#fff}
.aval-chip img{height:26px;width:auto}

.escena{position:relative;padding:0 64px 64px 0}
.navegador{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 60px 120px -40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.14)}
.navegador-barra{display:flex;align-items:center;gap:7px;padding:11px 16px;background:#F7F8FD;border-bottom:1px solid var(--linea)}
.navegador-barra i{width:10px;height:10px;border-radius:50%;background:#DADDEA}
.navegador-barra span{margin-left:12px;padding:5px 12px;border-radius:999px;background:#fff;font-size:12px;color:var(--texto-2);box-shadow:0 0 0 1px var(--linea)}
.pantallas{position:relative;aspect-ratio:1440/900;background:#F2F3FA}
.pantallas img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transform:scale(1.025);transition:opacity .8s ease,transform 1.4s var(--ease)}
.pantallas img.activa{opacity:1;transform:none}

.selector{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.selector button{padding:9px 14px;border-radius:999px;border:0;background:rgba(255,255,255,.1);color:rgba(255,255,255,.86);font:500 14px/1 var(--f-txt);cursor:pointer;transition:background-color .25s,color .25s}
.selector button:hover{background:rgba(255,255,255,.18);color:#fff}
.selector button[aria-pressed="true"]{background:#fff;color:var(--azul);font-weight:600}
.claro-sobre-blanco .selector button{background:#fff;color:var(--texto-2);box-shadow:0 0 0 1px var(--linea)}
.claro-sobre-blanco .selector button[aria-pressed="true"]{background:var(--azul);color:#fff;box-shadow:none}

/* ---------- aval de FGU ---------- */
.aval{padding:72px 0;background:#fff;border-bottom:1px solid var(--linea)}
.aval-in{display:grid;grid-template-columns:auto minmax(0,1fr) 300px;gap:48px;align-items:center}
.aval-logo{height:84px;width:auto}
.aval-texto h2{font-size:clamp(22px,2vw,30px);line-height:1.15;max-width:24ch}
.aval-texto p{margin-top:10px;color:var(--texto-2);font-size:16px;max-width:52ch}
.aval-texto .enlace{display:inline-block;margin-top:16px}
.aval-diploma{width:100%;border-radius:10px;box-shadow:0 30px 60px -30px rgba(2,0,60,.45),0 0 0 1px var(--linea);transform:rotate(2deg);transition:transform .6s var(--ease)}
.aval-diploma:hover{transform:rotate(0) scale(1.02)}

/* ---------- lista de 6 razones ---------- */
.razones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.razon{padding:30px 28px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--linea);transition:background-color .35s,box-shadow .35s}
.razon:hover{background:var(--azul);color:#fff;box-shadow:none}
.razon:hover p{color:rgba(255,255,255,.86)}
.razon h3{font-size:21px;letter-spacing:-.02em}
.razon p{margin-top:10px;font-size:15.5px;color:var(--texto-2);transition:color .35s}

/* ---------- franja del diagnóstico ---------- */
.franja{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:48px;align-items:center;padding:56px;border-radius:32px;background:var(--amarillo)}
.franja h2{font-size:clamp(28px,3vw,44px);line-height:1.08;max-width:18ch}
.franja p{margin-top:14px;font-size:17px;max-width:46ch}
.franja .btn-azul{font-size:17px;padding:19px 28px}

/* ---------- cierre ---------- */
.cierre{padding:clamp(110px,14vh,160px) 0;background:var(--campo-azul);color:#fff;text-align:center}
.cierre h2{font-size:clamp(32px,4vw,58px);line-height:1.06;max-width:20ch;margin:0 auto}
.cierre .acciones{justify-content:center}

/* ---------- cabecera de páginas internas ---------- */
.pag{background:var(--campo-azul);color:#fff}
.pag-in{padding:clamp(80px,11vh,120px) 0 clamp(80px,10vh,110px)}
.pag h1{font-size:clamp(38px,4.6vw,66px);line-height:1.05;max-width:18ch}
.pag-bajada{margin-top:20px;max-width:56ch;font-size:clamp(17px,1.3vw,19.5px);color:rgba(255,255,255,.9)}
.miga{display:flex;gap:8px;margin-bottom:22px;font-size:14px;color:rgba(255,255,255,.75)}
.miga a{color:#fff;text-decoration:none}
.miga a:hover{text-decoration:underline}
.pag-doble{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}

/* ---------- plataforma: pestañas ---------- */
.campus-grid{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:48px;align-items:start}
.tabs{display:flex;flex-direction:column;gap:6px;position:sticky;top:100px}
.tabs button{position:relative;display:block;width:100%;text-align:left;cursor:pointer;border:0;background:transparent;padding:16px 18px 18px;border-radius:16px;color:inherit;transition:background-color .3s,box-shadow .3s}
.tabs button:hover{background:rgba(4,0,188,.05)}
.tabs button[aria-selected="true"]{background:#fff;box-shadow:0 20px 40px -26px rgba(2,0,60,.45),0 0 0 1px var(--linea)}
.tabs b{display:block;font:600 18px/1.25 var(--f-tit);letter-spacing:-.02em}
.tabs button[aria-selected="true"] b{color:var(--azul)}
.tabs span{display:block;margin-top:4px;font-size:14.5px;color:var(--texto-2)}
.tels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:760px;margin:0 auto}
.tels figure{padding:8px;border-radius:34px;background:#0d0d1a;box-shadow:var(--sombra)}
.tels img{border-radius:27px}
.tels figcaption{margin-top:16px;text-align:center;font:600 15px/1.3 var(--f-tit);color:var(--tinta)}
.tels figure:nth-child(2){transform:translateY(-36px)}

/* ---------- certificación ---------- */
.incluye{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 40px}
.incluye li{position:relative;padding:18px 0 18px 40px;border-bottom:1px solid var(--linea);font:500 17px/1.45 var(--f-tit)}
.incluye li::before{content:"";position:absolute;left:0;top:20px;width:24px;height:24px;border-radius:50%;background:#E9ECFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.2l2 2 4.4-4.6' fill='none' stroke='%230400BC' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.incluye li span{display:block;font:400 15px/1.5 var(--f-txt);color:var(--texto-2);margin-top:4px}
.precio-caja{padding:40px;border-radius:28px;background:var(--noche);color:#fff}
.precio-caja small{display:inline-block;padding:7px 12px;border-radius:999px;background:var(--amarillo);color:var(--tinta);font:600 12.5px/1 var(--f-tit)}
.precio-caja .monto{margin-top:20px;font:600 clamp(48px,5vw,68px)/1 var(--f-tit);letter-spacing:-.04em}
.precio-caja .monto span{display:block;margin-top:8px;font:400 16px/1.4 var(--f-txt);letter-spacing:0;color:rgba(255,255,255,.8)}
.precio-caja .btn{margin-top:28px}
.precio-caja p{margin-top:18px;font-size:14px;color:rgba(255,255,255,.75)}

/* ---------- precios ---------- */
.planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--linea);padding:32px 28px 30px;transition:transform .35s var(--ease),box-shadow .35s}
.plan:hover{transform:translateY(-6px);box-shadow:0 0 0 1px var(--linea),0 40px 70px -40px rgba(2,0,60,.4)}
.plan h3{font-size:23px;letter-spacing:-.02em}
.plan-precio{margin-top:12px;font-size:15px;color:var(--texto-2)}
.plan-precio b{font:600 40px/1 var(--f-tit);color:var(--tinta);letter-spacing:-.03em;margin-right:6px}
.plan-precio s{margin-right:6px}
.plan-lista{margin:22px 0 28px;display:flex;flex-direction:column;gap:10px}
.plan-lista li{position:relative;padding-left:26px;font-size:15px;line-height:1.45}
.plan-lista li::before{content:"";position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:50%;background:#E9ECFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.2l2 2 4.4-4.6' fill='none' stroke='%230400BC' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.plan .btn{margin-top:auto;align-self:flex-start}
.plan-destacado{background:var(--noche);color:#fff;box-shadow:0 40px 80px -40px rgba(2,0,90,.6)}
.plan-destacado .plan-precio{color:rgba(255,255,255,.8)}
.plan-destacado .plan-precio b{color:#fff;font-size:48px}
.plan-destacado .plan-lista li::before{background-color:rgba(255,255,255,.14);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.2l2 2 4.4-4.6' fill='none' stroke='%23FFE400' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.plan-cinta{position:absolute;top:16px;right:16px;padding:7px 12px;border-radius:999px;background:var(--amarillo);color:var(--tinta);font:600 12.5px/1 var(--f-tit)}
.pagos{margin-top:28px;font-size:15px;color:var(--texto-2)}

/* ---------- Remotos Work (su propio azul, sin adelantos) ---------- */
.rwork{background:#F7F9FB;min-height:calc(100svh - 72px);display:grid;align-items:center}
.rwork-in{max-width:760px;margin:0 auto;padding:110px var(--margen);text-align:center}
.rwork-logo{height:44px;width:auto;margin:0 auto 34px}
.rwork h1{font-size:clamp(34px,4vw,56px);line-height:1.08;color:#1D2226}
.rwork p{margin:20px auto 0;max-width:46ch;color:#56687A;font-size:18px}
.btn-rw{background:#0A66C2;color:#fff;border-radius:8px}
.btn-rw:hover{background:#084f97}
.rwork .acciones{justify-content:center}
.rwork .nota{color:#56687A}

/* ---------- nosotros ---------- */
.declaracion{font:600 clamp(26px,2.6vw,36px)/1.25 var(--f-tit);letter-spacing:-.025em;max-width:30ch}
.texto-largo{max-width:62ch;font-size:18px;line-height:1.7}
.texto-largo p+p{margin-top:18px}
.dos-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}

/* ---------- preguntas ---------- */
.faq-in{max-width:840px}
.faq-lista details{border-top:1px solid var(--linea)}
.faq-lista details:last-child{border-bottom:1px solid var(--linea)}
.faq-lista summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 4px;cursor:pointer;list-style:none;font:500 18px/1.4 var(--f-tit)}
.faq-lista summary::-webkit-details-marker{display:none}
.faq-lista summary::after{content:"+";flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--suave);font:400 22px/1 var(--f-txt);color:var(--azul);transition:transform .3s var(--ease),background-color .3s,color .3s}
.faq-lista details[open] summary::after{transform:rotate(45deg);background:var(--azul);color:#fff}
.faq-lista .resp{overflow:hidden}
.faq-lista p{padding:0 4px 24px;color:var(--texto-2);max-width:64ch}

/* ---------- contacto ---------- */
.canales{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.canal{display:flex;flex-direction:column;padding:32px 28px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px var(--linea);text-decoration:none;transition:transform .4s var(--ease),box-shadow .4s}
.canal:hover{transform:translateY(-6px);box-shadow:0 0 0 1px var(--linea),0 40px 70px -40px rgba(2,0,60,.38)}
.canal.principal{background:var(--azul);color:#fff;box-shadow:none}
.canal h2{font-size:24px;letter-spacing:-.02em}
.canal p{margin-top:10px;font-size:15.5px;color:var(--texto-2)}
.canal.principal p{color:rgba(255,255,255,.86)}
.canal .ir{margin-top:auto;padding-top:26px;font:600 15px/1 var(--f-tit);color:var(--azul)}
.canal.principal .ir{color:var(--amarillo)}
.redes{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.redes a{padding:9px 14px;border-radius:999px;background:var(--suave);color:var(--azul);font:600 14px/1 var(--f-tit);text-decoration:none}
.redes a:hover{background:var(--azul);color:#fff}

/* ---------- diagnóstico ---------- */

/* ---------- pie ---------- */
.pie{padding:64px 0 32px;background:var(--noche-2);color:rgba(255,255,255,.8)}
.pie-in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px}
.pie-logo{height:28px;width:auto;margin-bottom:16px}
.pie p{font-size:14px;max-width:34ch}
.pie .pie-tit{margin:0 0 14px;font:600 14px/1 var(--f-tit);color:#fff}
.pie ul{display:flex;flex-direction:column;gap:10px;font-size:14px}
.pie a{text-decoration:none} .pie a:hover{color:#fff}
.pie-legal{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.6)}

/* ---------- movimiento: nada queda oculto si el script no corre ---------- */
.js .sube{opacity:1;transform:translate3d(0,18px,0)}
.js .sube.en{transform:none;transition:transform .65s var(--ease);transition-delay:calc(var(--d,0) * 60ms)}

/* ---------- tableta y teléfono ---------- */
@media (max-width:1060px){
  .menu,.ingresar{display:none}
  .abrir-menu{display:block}
  .cab .btn{display:none}
  .cab.abierto .menu{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;padding:8px var(--margen) 24px;background:var(--noche)}
  .cab.abierto .menu a{padding:15px 0;font-size:17px;border-bottom:1px solid rgba(255,255,255,.08)}
  .cab.abierto .menu a::after{display:none}
  .portada-in{grid-template-columns:1fr;gap:44px;min-height:0;padding-top:56px}
  .escena{padding:0 40px 40px 0}
  .aval-in{grid-template-columns:1fr;gap:24px}
  .aval-logo{height:64px}
  .aval-diploma{max-width:360px}
  .etapas{grid-template-columns:1fr 1fr;row-gap:44px}
  .etapas-linea{display:none}
  .beneficios{grid-template-columns:1fr 1fr}
  .ben,.ben.ancha{grid-column:span 1}
  .razones{grid-template-columns:1fr 1fr}
  .programas,.esp,.planes,.canales{grid-template-columns:1fr}
  .prog,.esp-card{min-height:0}
  .franja{grid-template-columns:1fr;padding:40px 32px}
  .pag-doble,.dos-col{grid-template-columns:1fr;gap:40px}
  .campus-grid{grid-template-columns:1fr;gap:24px}
  .tabs{position:static;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .tabs li{flex:0 0 62%;scroll-snap-align:start}
  .incluye{grid-template-columns:1fr}
  .pie-in{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .cab-in{height:64px}
  .cab.abierto .menu{top:64px}
  .logo img{height:22px}
  
  .acciones .btn{width:100%;justify-content:center}
  .escena{padding:0 24px 30px 0}.razones{grid-template-columns:1fr}
  .tels{grid-template-columns:1fr 1fr;gap:16px}
  .tels figure:nth-child(2){transform:none}
  .tels figure:nth-child(3){display:none}

  .precio-caja{padding:30px 24px}
  .pie-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .sube{opacity:1;transform:none}
}
[tabindex="-1"]:focus{outline:none}

/* — */
.portada-p{position:relative;overflow:hidden;background:var(--campo-azul);color:#fff;min-height:calc(100svh - 72px);display:grid;place-items:center}
.portada-p-in{position:relative;z-index:2;text-align:center;max-width:820px;padding:96px var(--margen) 110px}
.portada-p h1{font-size:clamp(46px,6.2vw,94px);line-height:1;max-width:13ch;margin:0 auto}
.portada-p .portada-bajada{margin:26px auto 0;max-width:46ch}
.portada-p .acciones{justify-content:center}
.portada-p .portada-aval{justify-content:center;margin-top:40px}
.btn-claro{box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);color:#fff;background:transparent}
.btn-claro:hover{background:#fff;color:var(--azul);box-shadow:none}
.palabra-marco{display:inline-block;vertical-align:top}
.palabra{display:inline-block}
.js .palabra{animation:subirPalabra 1.1s var(--ease) both;animation-delay:calc(.1s + var(--i) * 70ms)}
@keyframes subirPalabra{from{transform:translateY(.28em)}to{transform:none}}
.js .aparece{animation:aparecer 1s var(--ease) both;animation-delay:calc(.35s + var(--t) * 90ms)}
@keyframes aparecer{from{transform:translateY(16px)}to{transform:none}}

.flotas{position:absolute;inset:0;z-index:1;pointer-events:none}
.flota{position:absolute;will-change:transform,opacity}
.tarjeta{width:clamp(190px,16.5vw,250px);padding:20px 20px 22px;border-radius:22px;background:#fff;color:var(--tinta);box-shadow:0 40px 70px -30px rgba(0,0,30,.65);transform:rotate(var(--r));pointer-events:auto}
.js .tarjeta{animation:llegar 1.5s var(--ease) both,flotar 7s ease-in-out infinite;animation-delay:calc(.25s + var(--t) * 110ms),calc(1.8s + var(--t) * 400ms)}
@keyframes llegar{from{transform:translate(calc(var(--dx) * .25),calc(var(--dy) * .25)) scale(.9) rotate(0deg)}to{transform:rotate(var(--r))}}
@keyframes flotar{0%,100%{translate:0 0}50%{translate:0 -14px}}
.tarjeta small{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--suave);color:var(--azul);font:600 12.5px/1 var(--f-tit)}
.tarjeta b{display:block;margin-top:12px;font:600 19px/1.2 var(--f-tit);letter-spacing:-.02em}

.f-diag{left:3.5%;top:9%}
.f-rw{left:3.5%;top:46%}
.f-esp{left:2.5%;bottom:7%}
.f-vip{right:3.5%;top:8%}
.f-lab{right:3%;top:44%}
.f-cert{right:2.5%;bottom:7%}
.f-rw .tarjeta,.f-lab .tarjeta{width:clamp(170px,13.5vw,205px);padding:16px 18px}
.f-diag .tarjeta{background:var(--amarillo)}
.f-diag small{background:rgba(255,255,255,.6)}

.f-cert .tarjeta{background:var(--noche);color:#fff;box-shadow:0 40px 70px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.12)}

.f-esp .tarjeta{background:var(--electrico);color:#fff}
.f-esp small{background:rgba(255,255,255,.18);color:#fff}

.f-rw .tarjeta{background:#F7F9FB}
.f-rw img{height:26px;width:auto}

.f-lab .tarjeta b{font-size:17px;margin-top:10px}

/* ---------- tres pasos para empezar ---------- */

/* ---------- apartado de especialidades ---------- */

/* ---------- apartado de Remotos Work (su identidad, sin adelantos) ---------- */
.rw-apartado{background:#F7F9FB;padding:clamp(100px,13vh,140px) 0}
.rw-apartado-in{text-align:center;max-width:760px}
.rw-apartado img{height:40px;width:auto;margin:0 auto 28px}
.rw-apartado h2{font-size:clamp(28px,3vw,44px);line-height:1.1;color:#1D2226;margin-bottom:32px}

.planes-dos{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;margin:0 auto}

@media (max-width:1060px){
  .portada-p{display:flex;flex-direction:column;min-height:0}
  .portada-p-in{order:1;padding:64px var(--margen) 40px}
  .flotas{order:2;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 var(--margen) 64px}
  .flota{position:relative;inset:auto;transform:none!important;opacity:1!important}
  .tarjeta,.f-rw .tarjeta,.f-lab .tarjeta{width:auto}
  .f-rw,.f-lab{display:none}.planes-dos{grid-template-columns:1fr}
}
@media (max-width:600px){
  .portada-p h1{font-size:11vw}
  .flotas{gap:10px}
  .tarjeta{padding:16px;border-radius:18px}
  .tarjeta b{font-size:16px}

}
@media (prefers-reduced-motion:reduce){
  .js .tarjeta,.js .palabra,.js .aparece{animation:none}
}
/* certificación en blanco: es el producto principal y se lee mejor sobre el azul */
.f-cert .tarjeta{background:#fff;color:var(--tinta);box-shadow:0 40px 70px -30px rgba(0,0,30,.65)}

.precio-caja p.monto{color:#fff}

/* — */
/* fondo de la portada con una luz que se mueve despacio */
.portada-p::before{content:"";position:absolute;width:70vw;height:70vw;left:15vw;top:-20vw;border-radius:50%;background:radial-gradient(circle,rgba(43,59,255,.55),transparent 62%);animation:luz 16s ease-in-out infinite alternate;pointer-events:none}
@keyframes luz{to{transform:translate(8vw,10vw) scale(1.15)}}

/* tarjetas: misma estructura, más detalle, responden al pasar el ratón */
.tarjeta{border-radius:24px;padding:18px 18px 20px;box-shadow:0 2px 0 rgba(255,255,255,.6) inset,0 50px 80px -34px rgba(0,0,30,.7);transition:box-shadow .4s}
.flota:hover{z-index:5}
.flota:hover .tarjeta{box-shadow:0 2px 0 rgba(255,255,255,.6) inset,0 60px 90px -30px rgba(0,0,30,.8)}
.tarjeta>*{transition:transform .5s var(--ease)}
.flota:hover .tarjeta{animation-play-state:paused,paused}
.flota .tarjeta{transform-origin:50% 60%}
.flota:hover .tarjeta{transform:rotate(0deg) scale(1.05)!important;transition:transform .6s var(--ease),box-shadow .4s}

/* ---------- cinta de roles ---------- */

/* ---------- títulos de sección: palabra por palabra al aparecer ---------- */
.js h2[data-palabras]:not(.en) .palabra{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .portada-p::before{animation:none}

}

/* teléfono y tableta: tarjetas derechas, enteras y con una entrada suave */
@media (max-width:1060px){
  .flotas{overflow:visible}
  .flota{min-width:0}
  .tarjeta,.flota:hover .tarjeta{transform:none!important;width:100%;min-width:0}
  .js .tarjeta{animation:aparecer .9s var(--ease) both;animation-delay:calc(.5s + var(--t) * 90ms)}
  .dias{gap:3px}
  .dias li{font-size:10.5px;border-radius:6px}
  .t-cab{flex-wrap:wrap;gap:6px}
}
@media (max-width:600px){
  .flotas{grid-template-columns:1fr 1fr}
  .tarjeta b{font-size:15px}
  
  

  
}

/* menú en una línea; se pliega antes para que nunca se parta */
.menu{gap:20px}
.menu a,.cab .btn{white-space:nowrap}
@media (max-width:1240px){
  .menu{display:none}
  .abrir-menu{display:block}
  .cab .btn{display:none}
  .cab.abierto .menu{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;padding:8px var(--margen) 24px;background:var(--noche)}
  .cab.abierto .menu a{padding:15px 0;font-size:17px;border-bottom:1px solid rgba(255,255,255,.08)}
  .cab.abierto .menu a::after{display:none}
}
.f-lab .tarjeta{width:clamp(190px,16.5vw,250px);padding:18px 18px 20px}

/* pantallas medianas o bajas: menos tarjetas para que nunca se monten */
@media (min-width:1061px) and (max-width:1380px),(min-width:1061px) and (max-height:860px){
  .f-rw{display:none}
  .f-diag{top:7%}
  .f-esp{bottom:5%}
  .f-lab{top:43%;right:6%}
}
@media (min-width:1061px) and (max-width:1380px),(min-width:1061px) and (max-height:860px){.f-lab{display:none}}

/* ============================================================
   Vuelta 5 (2-nov): sin objetos 3D, sin cinta, sin barra lateral
   y animaciones que avanzan con el scroll.
   ============================================================ */

/* tarjetas de «Elige cómo empezar»: el precio manda */

/* «Te preparamos para trabajar como …» */
.roles{background:#fff;padding:clamp(70px,10vh,110px) 0;border-bottom:1px solid var(--linea)}
.roles-frase{font:600 clamp(30px,4vw,60px)/1.12 var(--f-tit);letter-spacing:-.035em;text-align:center;max-width:22ch;margin:0 auto}
.rol-slot{display:inline-block;vertical-align:bottom;height:1.18em;overflow:hidden;color:var(--azul);position:relative}
.rol-slot::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.16em;background:var(--amarillo);z-index:-1;border-radius:4px}
.rol-lista{display:flex;flex-direction:column;transition:transform .8s var(--ease)}
.rol-lista span{display:block;height:1.18em;white-space:nowrap}
.rol-slot{isolation:isolate}

/* la ruta de 4 etapas con el scroll */

/* Remotos Work: el fondo se vuelve de su azul y el título se ilumina al bajar */
.rw-apartado{position:relative;overflow:hidden;padding:clamp(120px,18vh,190px) 0;background:#F7F9FB;transition:none}
.rw-apartado::before{content:"";position:absolute;inset:0;background:#0A66C2;opacity:var(--p-azul,0)}
.rw-apartado-in{position:relative;transform:scale(calc(.92 + var(--p,0) * .08))}
.rw-apartado h2{font-size:clamp(32px,4vw,60px);max-width:20ch;margin:0 auto 36px}
.rw-apartado.oscuro h2{color:#fff}
.rw-apartado img{transition:filter .4s}
.rw-apartado.oscuro img{filter:brightness(0) invert(1)}
.rw-apartado.oscuro .btn-rw{background:#fff;color:#0A66C2}
[data-resaltar] .pal{transition:opacity .25s linear}
.js [data-resaltar] .pal{opacity:.45}
.js [data-resaltar] .pal.on{opacity:1}

/* cierre: la frase se enciende palabra por palabra y la luz sigue al scroll */
.cierre{position:relative;overflow:hidden;padding:clamp(140px,22vh,220px) 0;background:var(--noche)}
.cierre::before{content:"";position:absolute;inset:-20%;background:radial-gradient(45% 55% at calc(20% + var(--p,0) * 60%) calc(80% - var(--p,0) * 40%),#1B1FD6 0%,var(--azul) 35%,var(--noche) 75%)}
.cierre .caja{position:relative}
.cierre h2{font-size:clamp(40px,5.6vw,88px);max-width:18ch;line-height:1.02}
.cierre .acciones{opacity:calc(.35 + var(--p,1) * .65);transform:translateY(calc((1 - var(--p,1)) * 20px))}

@media (max-width:900px){
  .rol-lista span{white-space:normal}
  .rol-slot{height:auto;display:block}
  .rol-lista{transform:none!important}
  .rol-lista span:not(:first-child){display:none}
}
@media (prefers-reduced-motion:reduce){
  .js [data-resaltar] .pal{opacity:1}
}
/* Remotos Work: su azul crece como un círculo desde el centro (efecto propio de esta sección) */
.rw-apartado::before{opacity:1;clip-path:circle(calc(var(--p-azul,0) * 80%) at 50% 55%)}
.rw-apartado.oscuro img{filter:none}
.rw-sello{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:14px;background:#fff;margin:0 auto 30px;box-shadow:0 10px 30px -18px rgba(10,40,90,.5)}
.rw-apartado .rw-sello img{height:34px;width:auto;margin:0}
.rw-apartado h2{transition:color .3s}
/* el rol que cambia: la línea amarilla solo debajo de la palabra */
.roles-frase{max-width:none}
.roles-pre{display:block}
.rol-slot{height:1.25em;line-height:1.25em}
.rol-slot::after{display:none}
.rol-lista span{height:1.25em;line-height:1.25em}
.rol-lista span b{font-weight:inherit;background:linear-gradient(transparent 72%,var(--amarillo) 72%,var(--amarillo) 90%,transparent 90%)}
/* rol que cambia: uno a la vez, sin recortes */
.rol-slot{height:auto;overflow:visible;line-height:inherit;display:inline-block}
.rol-lista{display:inline;transform:none!important;transition:none}
.rol-lista span{display:none;height:auto;line-height:inherit}
.rol-lista span:first-child{display:inline}
.js .rol-lista span{display:none}
.js .rol-lista span.activo{display:inline-block;animation:rolEntra .7s var(--ease) both}

/* — */
/* Programas: lista en letra grande; la fila se llena de azul */
.programas-lista{border-top:1px solid var(--linea)}
.programas-lista li{border-bottom:1px solid var(--linea)}
.programas-lista a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:auto auto;column-gap:28px;align-items:center;padding:26px 24px;text-decoration:none;color:var(--tinta);overflow:hidden;isolation:isolate}
.programas-lista a::before{content:"";position:absolute;inset:0;background:var(--azul);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease);z-index:-1}
.programas-lista a:hover::before,.programas-lista a:focus-visible::before{transform:scaleY(1)}
.pl-nombre{font:600 clamp(36px,5vw,76px)/1 var(--f-tit);letter-spacing:-.045em;transition:color .3s,transform .5s var(--ease)}
.pl-dato{grid-column:1;margin-top:10px;font-size:16px;color:var(--texto-2);display:flex;align-items:center;gap:10px;transition:color .3s}
.pl-dato em{font:600 12.5px/1 var(--f-tit);font-style:normal;padding:6px 10px;border-radius:999px;background:var(--amarillo);color:var(--tinta)}
.pl-precio{grid-column:2;grid-row:1 / span 2;font:600 clamp(24px,2.4vw,38px)/1 var(--f-tit);letter-spacing:-.03em;transition:color .3s}
.pl-ir{grid-column:3;grid-row:1 / span 2;padding:13px 20px;border-radius:999px;box-shadow:inset 0 0 0 2px currentColor;font:600 15px/1 var(--f-tit);opacity:0;transform:translateX(-12px);transition:opacity .3s,transform .45s var(--ease)}
.programas-lista a:hover .pl-nombre,.programas-lista a:hover .pl-precio,.programas-lista a:hover .pl-ir{color:#fff}
.programas-lista a:hover .pl-dato{color:rgba(255,255,255,.85)}
.programas-lista a:hover .pl-nombre{transform:translateX(10px)}
.programas-lista a:hover .pl-ir{opacity:1;transform:none;color:var(--amarillo)}
/* entrada propia: cada fila barre desde la izquierda */
.js .barrido{transform:translateX(-16px);transition:transform .8s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.js .barrido.en{transform:none}

/* Aval: el diploma se descubre con el scroll */
.aval-g{padding:clamp(100px,14vh,150px) 0;background:var(--suave);overflow:hidden}
.aval-g-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:center}
.aval-g .aval-logo{height:72px;width:auto;margin-bottom:26px}
.aval-g h2{font-size:clamp(28px,3vw,44px);line-height:1.1;max-width:18ch}
.aval-g p{margin-top:16px;color:var(--texto-2);max-width:46ch}
.aval-g .enlace{display:inline-block;margin-top:22px}
.diploma-revela{border-radius:12px;overflow:hidden;box-shadow:0 50px 90px -50px rgba(2,0,60,.5);transform:translateX(calc((1 - var(--r,1)) * 60px)) rotate(calc((1 - var(--r,1)) * -4deg)) scale(calc(.92 + var(--r,1) * .08))}
.diploma-revela img{width:100%}

/* Mosaico: mini pantallas que se mueven solas */
.mosaico{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.mo{grid-column:span 2;display:flex;flex-direction:column;padding:22px 22px 26px;border-radius:26px;background:var(--suave);transition:transform .5s var(--ease)}
.mo:hover{transform:translateY(-6px)}
.mo h3{margin-top:22px;font-size:22px;letter-spacing:-.02em;line-height:1.2}
.mo p{margin-top:8px;font-size:15.5px;color:var(--texto-2)}

.metas-in{position:relative;z-index:2;text-align:center;max-width:820px}

.metas-in p{margin-top:20px;font-size:18px;color:var(--texto-2)}

.blog-tarjeta{display:block;padding:24px 26px;border-radius:22px;background:var(--suave);text-decoration:none;transition:background-color .35s,transform .45s var(--ease)}
.blog-tarjeta:hover{background:var(--azul);color:#fff;transform:translateX(6px)}
.blog-tarjeta small{font:600 12.5px/1 var(--f-tit);color:var(--azul)}
.blog-tarjeta:hover small{color:var(--amarillo)}
.blog-tarjeta b{display:block;margin-top:10px;font:600 20px/1.25 var(--f-tit);letter-spacing:-.02em}
.blog-tarjeta span{display:block;margin-top:8px;font-size:15px;color:var(--texto-2)}
.blog-tarjeta:hover span{color:rgba(255,255,255,.85)}
.blog-grilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.blog-tarjeta.grande{padding:34px 32px;min-height:260px;display:flex;flex-direction:column}
.blog-tarjeta.grande b{font-size:26px}
.blog-tarjeta em{margin-top:auto;padding-top:22px;font:600 15px/1 var(--f-tit);font-style:normal;color:var(--azul)}
.blog-tarjeta:hover em{color:var(--amarillo)}
.articulo-in{max-width:720px;font-size:18px;line-height:1.75}
.articulo-in h2{font-size:clamp(24px,2.2vw,32px);margin:44px 0 14px;line-height:1.2}
.articulo-in p{margin-top:16px}
.articulo-in ul{margin:16px 0 0 20px;list-style:disc;display:grid;gap:8px}
.articulo-volver{margin-top:44px}

@media (max-width:1060px){
  .aval-g-in{grid-template-columns:1fr;gap:40px}
  .mosaico{grid-template-columns:1fr 1fr}
  .mo{grid-column:span 1}
  .blog-grilla{grid-template-columns:1fr}
}
@media (max-width:900px){
  
  
  
  
  
  
  .programas-lista a{grid-template-columns:1fr auto;padding:22px 6px}
  .pl-ir{display:none}
  
  
}
@media (max-width:600px){
  .mosaico{grid-template-columns:1fr}
  .programas-lista a{grid-template-columns:1fr}
  .pl-precio{grid-column:1;grid-row:auto;margin-top:10px;font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  
  
  .js .barrido{transform:none}
  .diploma-revela{transform:none}
}
.pl-dato em{white-space:nowrap}

/* ============================================================
   Vuelta 7 (2-nov): vista previa de programas, metas más llenas,
   pie de marca y rol siempre visible.
   ============================================================ */
/* programas: lista + vista previa */
.prog-wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;align-items:start}
.programas-lista a{grid-template-columns:minmax(0,1fr) auto}
.pl-ir{display:none}
.prog-vista{position:sticky;top:110px;height:440px;border-radius:30px;background:var(--suave);overflow:hidden}
.pv{position:absolute;inset:0;padding:34px;display:flex;flex-direction:column;opacity:0;transform:scale(.96) translateY(14px);transition:opacity .45s ease,transform .6s var(--ease);pointer-events:none}
.pv.activa{opacity:1;transform:none}
.pv small{font:600 13px/1 var(--f-tit);color:var(--azul)}
.pv b{display:block;margin-top:12px;font:600 26px/1.15 var(--f-tit);letter-spacing:-.025em;max-width:18ch}
.pv-precio{margin-top:auto;font:600 40px/1 var(--f-tit);letter-spacing:-.04em}
.pv-precio s,.pv-precio span{font:500 16px/1 var(--f-txt);letter-spacing:0;opacity:.6;margin-left:6px}
.pv-vip ol{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pv-vip li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#fff;font:500 14px/1.2 var(--f-tit);box-shadow:0 0 0 1px var(--linea)}
.pv-vip li span{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--azul);color:#fff;font-size:12px}
.pv-vip.activa li{animation:aparecer .5s var(--ease) both;animation-delay:calc(var(--i) * 60ms)}
.pv-cert{background:var(--noche);color:#fff}
.pv-cert small{color:var(--amarillo)}
.pv-cert img{border-radius:10px;width:86%;align-self:center;transform:rotate(-3deg);box-shadow:0 30px 50px -24px rgba(0,0,0,.6);margin:-6px 0 22px;transition:transform .8s var(--ease)}
.pv-cert.activa img{transform:rotate(0)}
.pv-esp{background:var(--azul);color:#fff}
.pv-esp small{color:var(--amarillo)}
.pv-esp-fila{margin-top:14px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.1)}
.pv-esp-fila b{margin:0;font-size:18px;max-width:none}
.pv-esp-fila span{display:block;margin-top:6px;font-size:13.5px;color:rgba(255,255,255,.8)}
.pv-esp.activa .pv-esp-fila{animation:aparecer .5s var(--ease) both}
.pv-esp.activa .pv-esp-fila:nth-of-type(3){animation-delay:.08s}.pv-esp.activa .pv-esp-fila:nth-of-type(4){animation-delay:.16s}
.pv-rw{background:#0A66C2;color:#fff;justify-content:center}
.pv-rw img{height:38px;width:auto;align-self:flex-start;padding:10px 14px;box-sizing:content-box;border-radius:12px;background:#fff}
.pv-rw b{margin-top:26px;font-size:30px}
.pv-rw-etq{margin-top:26px;align-self:flex-start;padding:8px 13px;border-radius:999px;background:#fff;color:#0A66C2;font:600 13px/1 var(--f-tit)}
.programas-lista a.viendo::before{transform:scaleY(1)}
.programas-lista a.viendo .pl-nombre,.programas-lista a.viendo .pl-precio{color:#fff}
.programas-lista a.viendo .pl-dato{color:rgba(255,255,255,.85)}
.programas-lista a.viendo .pl-nombre{transform:translateX(10px)}
.pl-nombre{font-size:clamp(32px,4vw,62px)}

/* pie: el nombre a todo el ancho */
.pie-legal{margin-top:28px}

/* el rol nunca queda en blanco */
@keyframes rolEntra{from{transform:translateY(.3em)}to{transform:none}}

@media (max-width:1060px){
  .prog-wrap{grid-template-columns:1fr}
  .prog-vista{display:none}
}
.pv-cert img{width:68%;margin:-4px 0 18px}
.pv-cert b{font-size:21px}
.pv-cert .pv-precio{font-size:34px}

/* ============================================================
   Vuelta 8 (2-nov): corrección y pulido integral
   ============================================================ */
.flotas a.tarjeta{display:block;text-decoration:none}
.flotas a.tarjeta:focus-visible{outline:3px solid var(--amarillo);outline-offset:4px}

/* 4 · la cinta «La más completa» va arriba del título */
.plan-cinta{position:static;align-self:flex-start;margin-bottom:12px;display:inline-block}

/* 5 · el nombre del pie, una sola regla */
.pie .pie-marca{margin:48px 0 0;max-width:100%;font:600 clamp(28px,8.2vw,118px)/.9 var(--f-tit);letter-spacing:-.055em;white-space:nowrap;text-align:center;overflow:hidden;color:#fff}

/* 7 · metas en el teléfono: las burbujas pasan a chips alrededor del título */
@media (max-width:900px){
  .metas{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:10px;padding:72px var(--margen);min-height:0}
  .metas-in{order:-1;width:100%;margin-bottom:18px}
  .metas .meta-burbuja{display:inline-block;position:static;transform:none!important;font-size:14px;padding:10px 16px}
}

/* 8 · mosaico: las 4 plantillas entran holgadas */

/* 8 · ruta en el teléfono: 4 etapas legibles, una debajo de otra */
@media (max-width:900px){
  .ruta-h-pista{flex-direction:column;overflow:visible;padding:0 var(--margen)}
  .ruta-h-panel{flex:1 1 auto;width:100%;min-height:0;background:#fff;color:var(--tinta)}
  .ruta-h-panel .ruta-h-n{color:var(--azul)}
  .ruta-h-panel p{color:var(--texto-2)}
  .ruta-h-panel li::before{background:var(--azul)}
  .ruta-h-fin{background:var(--azul);color:#fff}
  .ruta-h-fin p{color:rgba(255,255,255,.8)}
}

/* 8 · menú del teléfono con el Campus y el botón */
.menu .menu-movil{display:none}
@media (max-width:1240px){
  .cab.abierto .menu .menu-movil{display:block}
  .cab.abierto .menu .menu-movil.btn{display:inline-flex;justify-content:center;margin-top:18px;padding:15px 24px;border-bottom:0;color:var(--tinta)}
}

/* ============================================================
   Vuelta 9 (2-nov): Remotos Work suave, ruta más rica y fluida,
   mosaico con cosas reales y sin barra de desplazamiento.
   ============================================================ */
html{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}

/* Remotos Work: el círculo se abre solo, despacio, una vez */
.rw-apartado::before{clip-path:circle(0% at 50% 55%);transition:clip-path 2.2s cubic-bezier(.22,1,.36,1)}
.rw-apartado.abierto::before{clip-path:circle(78% at 50% 55%)}
.rw-apartado-in{transform:translateY(24px);transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
.rw-apartado.abierto .rw-apartado-in{transform:none}
.rw-apartado h2{transition:color 1s ease .7s}
.rw-apartado.abierto h2{color:#fff}
.rw-apartado .btn-rw{transition:background-color 1s ease .7s,color 1s ease .7s}
.rw-apartado.abierto .btn-rw{background:#fff;color:#0A66C2}
@media (prefers-reduced-motion:reduce){.rw-apartado::before{transition:none;clip-path:circle(78% at 50% 55%)}.rw-apartado h2{color:#fff}.rw-apartado .btn-rw{background:#fff;color:#0A66C2}}

/* Mosaico con recortes reales */
.mosaico.real .mo{grid-column:span 2}
.mosaico.real .mo-ancho{grid-column:span 3}
.recorte{position:relative;height:230px;border-radius:18px;overflow:hidden;background:#EEF0FA;box-shadow:0 0 0 1px var(--linea)}
.recorte img{position:absolute;left:var(--x,0);top:var(--y,0);width:var(--w,100%);max-width:none;height:auto;transition:transform 1.4s var(--ease)}
.mo:hover .recorte img{transform:scale(1.04)}

@media (max-width:1060px){.mosaico.real .mo,.mosaico.real .mo-ancho{grid-column:span 1}.mosaico.real .mo-ancho:first-child{grid-column:1 / -1}}
@media (max-width:600px){.mosaico.real .mo-ancho:first-child{grid-column:auto}.recorte{height:200px}}

/* ---------- vuelta 9: páginas del menú con contenido real ---------- */
.sesiones-linea{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.sesiones-linea::before{content:"";position:absolute;left:24px;right:24px;top:24px;height:3px;border-radius:3px;background:#E1E4F4}
.sesiones-linea li{position:relative;display:flex;flex-direction:column;gap:14px}
.sesiones-linea span{position:relative;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--azul);color:#fff;font:600 18px/1 var(--f-tit);box-shadow:0 0 0 6px #fff;transition:transform .5s var(--ease),background-color .3s}
.sesiones-linea li:hover span{transform:scale(1.12);background:var(--amarillo);color:var(--tinta)}
.sesiones-linea b{font:600 18px/1.25 var(--f-tit);letter-spacing:-.02em}

.materiales{display:flex;flex-wrap:wrap;gap:12px}
.materiales li{padding:16px 22px;border-radius:999px;background:var(--suave);font:600 16px/1 var(--f-tit);color:var(--tinta);transition:background-color .3s,color .3s,transform .4s var(--ease)}
.materiales li:hover{background:var(--azul);color:#fff;transform:translateY(-3px)}
.pagos-dos{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px}
.pago{display:flex;flex-direction:column;padding:32px 30px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px var(--linea);text-decoration:none;transition:transform .45s var(--ease),box-shadow .45s}
.pago:hover{transform:translateY(-6px);box-shadow:0 0 0 2px var(--azul)}
.pago small{font:600 13px/1 var(--f-tit);color:var(--azul)}
.pago b{margin-top:12px;font:600 26px/1.15 var(--f-tit);letter-spacing:-.02em}
.pago span{margin-top:8px;color:var(--texto-2)}
.pago em{margin-top:24px;font:600 15px/1 var(--f-tit);font-style:normal;color:var(--azul)}
.datos-tres{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dato{padding:36px 32px;border-radius:26px;background:var(--suave)}
.dato b{display:block;font:600 clamp(48px,5vw,72px)/1 var(--f-tit);letter-spacing:-.045em;color:var(--azul)}
.dato span{display:block;margin-top:12px;font-size:17px;color:var(--texto-2)}
.promesa{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.promesa h2{font-size:clamp(28px,2.8vw,40px);line-height:1.1}
.promesa-no{margin-top:20px;font-size:19px;line-height:1.6;color:var(--texto-2);max-width:40ch}
/* Remotos Work (página): su azul se abre como círculo al entrar */
.rw-pagina{position:relative;overflow:hidden}
.rw-pagina::before{content:"";position:absolute;inset:0;background:#0A66C2;clip-path:circle(0% at 50% 50%);transition:clip-path 2.2s cubic-bezier(.22,1,.36,1)}
.rw-pagina.abierto::before{clip-path:circle(80% at 50% 50%)}
.rw-pagina .rwork-in{position:relative}
.rw-pagina h1,.rw-pagina p,.rw-pagina .nota{transition:color 1s ease .7s}
.rw-pagina.abierto h1,.rw-pagina.abierto p,.rw-pagina.abierto .nota{color:#fff}
.rw-pagina .rwork-logo{padding:12px 18px;border-radius:14px;background:#fff;box-sizing:content-box}
.rw-pagina .btn-rw{transition:background-color 1s ease .7s,color 1s ease .7s}
.rw-pagina.abierto .btn-rw{background:#fff;color:#0A66C2}
@media (max-width:1060px){.sesiones-linea{grid-template-columns:repeat(3,1fr);row-gap:28px}.sesiones-linea::before{display:none}.pagos-dos,.datos-tres,.promesa{grid-template-columns:1fr}}
@media (max-width:600px){.sesiones-linea{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.rw-pagina::before{transition:none;clip-path:circle(80% at 50% 50%)}.rw-pagina h1,.rw-pagina p{color:#fff}}

/* ============================================================
   Vuelta 11 (2-nov): portada más calmada. Las tarjetas ya están
   en su lugar y solo se asientan; flotan apenas; la luz va lenta.
   ============================================================ */
@keyframes llegar{from{transform:translateY(22px) rotate(var(--r))}to{transform:rotate(var(--r))}}
@keyframes flotar{0%,100%{translate:0 0}50%{translate:0 -6px}}
.js .tarjeta{animation:llegar 1.8s cubic-bezier(.22,1,.36,1) both,flotar 11s ease-in-out infinite;animation-delay:calc(.2s + var(--t) * 90ms),calc(2s + var(--t) * 700ms)}
.js .palabra{animation:subirPalabra 1.3s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.05s + var(--i) * 45ms)}
@keyframes subirPalabra{from{transform:translateY(.16em)}to{transform:none}}
.js .aparece{animation:aparecer 1.3s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.25s + var(--t) * 70ms)}
.portada-p::before{animation-duration:30s}
@keyframes luz{to{transform:translate(3vw,4vw) scale(1.05)}}
.flota:hover .tarjeta{transform:rotate(var(--r)) scale(1.02)!important;transition:transform .8s cubic-bezier(.22,1,.36,1)}

/* ============================================================
   Vuelta 12 (2-nov): portada con profundidad y luz que sigue al
   cursor, línea del recorrido más rica y optimización para teléfono
   ============================================================ */
/* portada: una luz suave sigue al cursor (lenta) */
.portada-p::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(28vw 28vw at var(--lx,50%) var(--ly,45%),rgba(120,140,255,.22),transparent 70%)}
.portada-p-in{z-index:2}

/* — */
@media (max-width:900px){.diploma-revela{transform:translateX(calc((1 - var(--r,1)) * 18px)) rotate(calc((1 - var(--r,1)) * -2deg))}}

/* ---------- teléfono ---------- */
@media (max-width:1060px){
  /* portada: las tarjetas en una fila que se desliza con el dedo */
  .flotas{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--margen) 56px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .flotas::-webkit-scrollbar{display:none}
  .flota{flex:0 0 min(78vw,300px);scroll-snap-align:start}
  .f-rw,.f-lab{display:block}
  .flota .tarjeta{height:100%}
  .portada-p::after{display:none}
}
@media (max-width:600px){
  .portada-p-in{padding:44px var(--margen) 30px}
  .portada-p .portada-aval{margin-top:26px}
  
  .roles{padding:48px 0}
  .roles-frase{font-size:30px}
  .seccion{padding:72px 0}
  .cabeza{margin-bottom:34px}
  .aval-g{padding:72px 0}
  
  
  
  
  
  
  
  
  
  
  .mosaico.real{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--margen) * -1);padding:0 var(--margen) 8px;scrollbar-width:none}
  .mosaico.real::-webkit-scrollbar{display:none}
  .mosaico.real .mo{flex:0 0 82%;scroll-snap-align:start}
  .recorte{height:170px}
  
  
  
  .faq-lista summary{font-size:16.5px;padding:20px 2px}
  .cierre{padding:96px 0}
  .cierre h2{font-size:36px}
  .pl-nombre{font-size:34px}
  .programas-lista a{padding:20px 4px}
  .pag-in{padding:56px 0 64px}
  .pag h1{font-size:36px}
  .precio-caja .monto{font-size:52px}
  .btn{padding:15px 22px}
}
/* plataforma en el teléfono: pestañas como cuadrícula de botones, sin cortes */
@media (max-width:1060px){
  .tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:visible;flex-direction:initial}
  .tabs li{flex:initial}
  .tabs button{padding:12px 14px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--linea)}
  .tabs span{display:none}
  .tabs b{font-size:15px}
  .tabs button[aria-selected="true"]{background:var(--azul);box-shadow:none}
  .tabs button[aria-selected="true"] b{color:#fff}
}

@media (max-width:1060px){.flotas{width:100%;max-width:100vw;align-self:stretch;min-width:0;box-sizing:border-box}}
@media (max-width:1060px){.flotas{padding-left:20px!important;padding-right:20px!important;scroll-padding-inline:20px}.flotas::after{content:"";flex:0 0 1px}}

.js .rol-lista span.activo{animation-duration:.45s}

/* — */
.metas-p{position:relative;height:230vh;background:#fff}
.metas-pin{position:sticky;top:72px;height:calc(100vh - 72px);overflow:hidden;display:grid;place-items:center}
.metas-p .metas-in{position:relative;z-index:2;text-align:center;max-width:820px}
.metas-p h2{font-size:clamp(34px,4.4vw,66px);line-height:1.05;max-width:16ch;margin:0 auto}
.metas-p .metas-in p{margin-top:20px;font-size:18px;color:var(--texto-2)}
.mb{position:absolute;left:var(--x);top:var(--y);z-index:1;--q:1;
  transform:translate(calc((50vw - var(--x) - 80px) * (1 - var(--q))),calc((40vh - var(--y) * .9) * (1 - var(--q)))) scale(calc(.35 + .65 * var(--q)));
  opacity:calc(var(--q) * 1.4);will-change:transform}
.mb>span{display:inline-block;padding:16px 24px;border-radius:26px 26px 26px 6px;background:var(--azul);color:#fff;font:600 clamp(15px,1.4vw,20px)/1 var(--f-tit);white-space:nowrap;
  animation:mbFlota 6s ease-in-out infinite;animation-delay:calc(var(--k) * -.7s)}
.mb:nth-of-type(2n)>span{background:var(--amarillo);color:var(--tinta);border-radius:26px 26px 6px 26px}
.mb:nth-of-type(3n)>span{background:var(--suave);color:var(--azul)}
.mb.t-g>span{font-size:clamp(18px,1.8vw,26px);padding:20px 30px}
.mb.t-c>span{font-size:clamp(13px,1.1vw,16px);padding:12px 18px}
@keyframes mbFlota{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (max-width:900px){
  .metas-p{height:auto}
  .metas-pin{position:static;height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:64px var(--margen)}
  .metas-p .metas-in{order:-1;width:100%;margin-bottom:18px}
  .mb{position:static;transform:none;opacity:1}
  .mb>span{animation:none;font-size:14px!important;padding:10px 16px!important}
}
@media (prefers-reduced-motion:reduce){.metas-p{height:auto}.metas-pin{position:static;height:auto;padding:100px 0}.mb{transform:none;opacity:1}.mb>span{animation:none}}[data-mosaico] .caja{max-width:1520px}

/* el mosaico sobre azul noche: las pantallas blancas resaltan */
[data-mosaico]{background:#070726;color:#fff}
[data-mosaico] .cabeza h2{color:#fff}
[data-mosaico] .cabeza p,[data-mosaico] .nota{color:rgba(255,255,255,.7)}
[data-mosaico] .mo{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background-color .4s,transform .5s var(--ease)}
[data-mosaico] .mo:hover{background:rgba(255,255,255,.1)}
[data-mosaico] .mo h3{color:#fff}
[data-mosaico] .mo p{color:rgba(255,255,255,.72)}
[data-mosaico] .recorte{box-shadow:0 24px 50px -30px rgba(0,0,0,.9);background:#fff}
[data-mosaico] .btn-borde{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
[data-mosaico] .btn-borde:hover{background:#fff;color:#070726}
.mosaico.real .recorte{height:260px}

/* ---------- vuelta 25: el círculo de Remotos Work queda visible como círculo ---------- */
.rw-apartado{padding:clamp(140px,20vh,220px) 0}
.rw-apartado::before{clip-path:circle(0% at 50% 50%);transition:clip-path 2.4s cubic-bezier(.22,1,.36,1)}
.rw-apartado.abierto::before{clip-path:circle(min(46vw,560px) at 50% 50%)}
.rw-apartado-in{transition:transform 1.8s cubic-bezier(.22,1,.36,1)}
.rw-apartado h2{max-width:16ch}
@media (max-width:900px){.rw-apartado.abierto::before{clip-path:circle(90% at 50% 50%)}}

/* ============================================================
   Vuelta 26 (2-nov): Remotos Work crece con el scroll, suavizado;
   siempre redondo; cubre la sección al llegar al centro.
   ============================================================ */
.rw-apartado[data-rw-scroll]{padding:clamp(150px,22vh,240px) 0}
.rw-apartado[data-rw-scroll]::before{transition:none;clip-path:circle(var(--rad,0px) at 50% 50%)}
.rw-apartado[data-rw-scroll] .rw-apartado-in{transition:none;transform:translateY(calc((1 - var(--rp,0)) * 30px)) scale(calc(.94 + var(--rp,0) * .06))}
.rw-apartado[data-rw-scroll] h2{transition:color .6s ease}
.rw-apartado[data-rw-scroll].oscuro h2{color:#fff}
.rw-apartado[data-rw-scroll] .btn-rw{transition:background-color .6s ease,color .6s ease}
.rw-apartado[data-rw-scroll].oscuro .btn-rw{background:#fff;color:#0A66C2}
.metas-p{height:205vh}
@media (prefers-reduced-motion:reduce){.rw-apartado[data-rw-scroll]::before{clip-path:none}.rw-apartado[data-rw-scroll] h2{color:#fff}.rw-apartado[data-rw-scroll] .btn-rw{background:#fff;color:#0A66C2}}

/* ============================================================
   Vuelta 27 (2-nov): tarjetas más finas, especialidades limpias,
   preguntas y blog compactos.
   ============================================================ */
/* tarjetas en general: marco fino, radio uniforme, texto medido */
.mo,.razon,.plan,.canal,.pago,.dato,.blog-tarjeta{border-radius:20px}
[data-mosaico] .mo{padding:14px 14px 22px}
[data-mosaico] .mo h3{margin-top:18px;font-size:19px;padding:0 6px}
[data-mosaico] .mo p{margin-top:6px;font-size:14.5px;padding:0 6px}
.mosaico.real .recorte{height:auto;aspect-ratio:16/10;border-radius:12px}
.mosaico.real .recorte img{position:static;width:100%;height:100%;object-fit:cover;object-position:top left}

[data-mosaico] .cabeza{margin-bottom:40px}

/* especialidades: número + nombre a la izquierda{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px;align-items:start}

/* ============================================================
   Vuelta 28 (2-nov): correcciones de la auditoría
   ============================================================ */
/* metas: las burbujas nacen detrás del título (50vw, 44vh) y van a su lugar sin salirse */
.mb{left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);
  transform:translate(calc((50 - var(--x)) * 1vw * (1 - var(--q)) - 50% * (1 - var(--q))),calc((44 - var(--y)) * 1vh * (1 - var(--q)) - 50% * (1 - var(--q)))) scale(calc(.35 + .65 * var(--q)));
  opacity:calc(.2 + var(--q) * 1.2)}
@media (max-width:900px){.mb{transform:none;opacity:1}}

/* ---------- vuelta 28: cabecera con 5 enlaces y el botón del Campus ---------- */
.cab .menu{gap:28px}
.cab .cab-login{display:inline-flex}
@media (max-width:1240px){.cab .cab-login{display:none}}
@media (min-width:1241px){.menu .menu-movil{display:none!important}}

/* ---------- auditoría Fable (2-nov): correcciones urgentes ---------- */
/* 1 · teléfono y tableta: sin la pantalla vacía después de las metas */
@media (max-width:900px){.metas-p{height:auto!important}}
/* 2 · reducir movimiento: las metas sin tramo fijo y sin pisar el título */
@media (prefers-reduced-motion:reduce){.metas-p{height:auto!important}.metas-pin{position:static;height:auto;min-height:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:90px var(--margen)}.metas-p .metas-in{order:-1;width:100%;margin-bottom:18px}.mb{position:static;transform:none;opacity:1}}
/* 3 · páginas interiores: el título ya no queda pegado al borde */
.pag-in{padding:clamp(80px,11vh,120px) var(--margen) clamp(80px,10vh,110px)}
@media (max-width:600px){.pag-in{padding:56px var(--margen) 64px}}

/* ============================================================
   Vuelta 29 (2-nov): portada con pantallas reales y etapas en
   tarjetas alargadas (Remotos Work blanca con caritas)
   ============================================================ */
/* portada: tarjetas-foto */
.tarjeta.foto{padding:8px 8px 10px;border-radius:20px;background:#fff;width:clamp(220px,18vw,290px)}

.foto-img{display:block;border-radius:13px;overflow:hidden;aspect-ratio:16/10;background:#EEF0FA}

.foto-img img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.f-cert .foto-img img{object-fit:contain;background:#fff}
.foto-et{display:block;margin-top:9px;padding:0 6px;font:600 13px/1 var(--f-tit);color:var(--tinta)}

@media (max-width:1060px){.tarjeta.foto{width:100%}.flota.f-vip{flex-basis:min(42vw,170px)}}

.caras{position:absolute;inset:0;z-index:1;pointer-events:none}
.cara{position:absolute;width:52px;height:52px;translate:-50% -50%;animation:caraFlota 7s ease-in-out infinite;animation-delay:calc(var(--t) * -.09s)}
.cara:nth-child(odd){width:40px;height:40px}
.cara svg{width:100%;height:100%;display:block}

@keyframes caraFlota{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-12px) rotate(6deg)}}
@keyframes parpadea{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}

@media (max-width:900px){
  
  
  
  
  
  .cara{width:34px;height:34px}.cara:nth-child(odd){width:28px;height:28px}
}
@media (prefers-reduced-motion:reduce){.cara{animation:none}}
/* etapas: tarjetas más bajas{display:flex;align-items:center;min-height:0;height:clamp(220px,19vw,250px);padding:0 0 0 44px;gap:0}

.cara{width:60px;height:60px}.cara:nth-child(odd){width:46px;height:46px}
@media (max-width:900px){
  
  
  
  
  
  .cara{width:36px;height:36px}.cara:nth-child(odd){width:30px;height:30px}
}

.cara,.cara:nth-child(odd){width:var(--s);height:var(--s);animation:caraVive calc(5s + var(--k) * .37s) ease-in-out infinite;animation-delay:calc(var(--k) * -.61s)}
.cara svg{animation:caraGira calc(7s + var(--k) * .23s) ease-in-out infinite;animation-delay:calc(var(--k) * -.4s)}
.cara .cejas{transform-box:view-box;animation:cejas 3.6s ease-in-out infinite;animation-delay:calc(var(--k) * -.53s)}
.cara .ojos{transform-box:fill-box;transform-origin:center;animation:parpadea 4.2s infinite;animation-delay:calc(var(--k) * -.29s)}
.cara .boca{transform-box:fill-box;transform-origin:center;animation:boca 5.4s ease-in-out infinite;animation-delay:calc(var(--k) * -.47s)}
@keyframes caraVive{0%,100%{transform:translate(0,0)}25%{transform:translate(7px,-12px)}50%{transform:translate(-4px,-20px)}75%{transform:translate(-8px,-8px)}}
@keyframes caraGira{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
@keyframes cejas{0%,70%,100%{transform:translateY(0)}78%,88%{transform:translateY(-90px)}}
@keyframes boca{0%,60%,100%{transform:scale(1)}70%,85%{transform:scale(1.25,1.45)}}
@media (max-width:900px){.cara,.cara:nth-child(odd){width:calc(var(--s) * .62);height:calc(var(--s) * .62)}}
@media (prefers-reduced-motion:reduce){.cara,.cara svg,.cara .cejas,.cara .ojos,.cara .boca{animation:none}}

/* columna cerrada: lo esencial sigue a la vista{flex-direction:column;align-items:flex-start}

/* ============================================================
   Vuelta 29 · auditoría: accesibilidad, menú y detalles
   ============================================================ */
:focus-visible{outline:3px solid #0012FD;outline-offset:3px}
.cab :focus-visible,.portada-p :focus-visible,.pie :focus-visible,.rw-apartado.oscuro :focus-visible,[data-mosaico] :focus-visible,.cierre :focus-visible{outline-color:#FFE400}
.abrir-menu{min-height:44px;min-width:44px}
.redes a{min-height:44px;display:inline-flex;align-items:center}

/* el menú se pliega recién a 1060 px */
@media (min-width:1061px) and (max-width:1240px){
  .cab .menu{display:flex!important;position:static!important;flex-direction:row!important;padding:0!important;background:none!important;min-height:0!important;gap:18px}
  .cab .menu a{font-size:15px}
  .abrir-menu{display:none!important}
  .cab .cab-login{display:inline-flex!important}
  .menu .menu-movil{display:none!important}
}
/* menú del teléfono: cubre la pantalla y la página no se mueve detrás */
@media (max-width:1060px){
  .cab.abierto .menu{min-height:calc(100dvh - 72px);overflow-y:auto;align-content:start}
  .cab.abierto .menu .menu-movil{margin-top:22px;border-bottom:0;justify-content:center}
}
body.menu-abierto{overflow:hidden}
/* sin JS, los diez roles se leen todos */
html:not(.js) .rol-slot{display:block;height:auto}
html:not(.js) .rol-lista{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.15em .6em;font-size:.55em}
html:not(.js) .rol-lista span{height:auto}
/* portátiles bajos: la portada entra completa */
@media (min-width:1061px) and (max-height:800px){.portada-p-in{padding-top:clamp(40px,7vh,70px);padding-bottom:clamp(40px,7vh,70px)}}
.pv-esp{display:flex;flex-direction:column;justify-content:center}
/* portada: fotos verticales */
.tarjeta.foto{width:clamp(160px,12.5vw,210px);padding:7px 7px 10px}
.foto-img{aspect-ratio:4/5}
.foto-img img{object-position:center}
.f-cert .foto-img img{object-fit:cover;background:none}
@media (max-width:1060px){.tarjeta.foto{width:100%}.flota.f-vip{flex-basis:auto}}
/* portada: solo las fotos, sin marco ni texto */
.tarjeta.foto{width:clamp(132px,10.8vw,172px);padding:0;background:none;border-radius:20px;overflow:hidden;box-shadow:0 24px 60px -20px rgba(0,0,30,.6)}
.tarjeta.foto .foto-img{border-radius:20px}
.foto-et{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.f-rw{left:12%}.f-lab{right:12%}
@media (max-width:1060px){
  .flotas .flota{flex:0 0 44vw;max-width:220px}
  .tarjeta.foto{width:100%}
}
html:not(.js) .rol-lista span{display:inline-block!important}

/* ============================================================
   Vuelta 29 · auditoría del teléfono y la tableta
   ============================================================ */
/* 1 · el rol que cambia no mueve la página: siempre reserva dos líneas */
@media (max-width:900px){
  .rol-slot{display:grid;place-items:center;height:2.36em;min-height:2.36em}
  .rol-lista{display:grid;grid-template-areas:"r";place-items:center}
  .rol-lista span{grid-area:r;height:auto;text-align:center}
}

/* 3 · menú del teléfono pegado a la cabecera, con borde y sombra */
@media (max-width:1060px){
  .cab.abierto .menu{top:100%!important;min-height:calc(100dvh - 100%);border-bottom:1px solid rgba(255,255,255,.14);box-shadow:0 28px 60px rgba(0,0,0,.65)}
}
@media (max-width:600px){.cab.abierto .menu{min-height:calc(100dvh - 64px)}}
/* 4 · las seis fotos de la portada con el mismo ancho en el carrusel */
@media (max-width:1060px){.flota .tarjeta,.f-rw .tarjeta,.f-lab .tarjeta{width:100%}}
/* 5 · Remotos Work: el texto pasa a blanco enseguida y el círculo cubre la pantalla vertical */
.rw-pagina h1,.rw-pagina p,.rw-pagina .nota{transition:color .45s ease .1s}
.rw-pagina .btn-rw{transition:background-color .45s ease .1s,color .45s ease .1s}
@media (max-width:900px){.rw-pagina.abierto::before{clip-path:circle(105% at 50% 50%)}}
/* 6 · en el teléfono las filas de Programas muestran que son enlaces */
@media (max-width:1060px){.programas-lista .pl-ir{display:inline-flex;gap:6px;opacity:1;transform:none;box-shadow:none;padding:0;margin-top:8px;background:none;color:var(--azul);font:600 14.5px/1 var(--f-tit)}}
/* 7 · las tres pantallas del teléfono en Plataforma, deslizables */
@media (max-width:600px){
  .tels{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--margen) * -1);padding:0 var(--margen) 8px;scrollbar-width:none;max-width:none}
  .tels::-webkit-scrollbar{display:none}
  .tels figure,.tels figure:nth-child(3){flex:0 0 72%;scroll-snap-align:start;display:block}
}
/* 8.3 · áreas táctiles */
.abrir-menu{padding:11px 18px}
.enlace{display:inline-flex;align-items:center;gap:6px;padding:8px 0}
.pie ul a{display:inline-block;padding:3px 0}
@media (max-width:1060px){.programas-lista a{display:flex!important;flex-direction:column;align-items:flex-start;gap:8px}.programas-lista .pl-dato{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.programas-lista .pl-ir{margin-top:2px}}

/* ============================================================
   Vuelta 30 · Ruta: tarjetas alargadas que se apilan al bajar
   ============================================================ */
.ruta{background:#fff;padding:clamp(100px,13vh,150px) 0 clamp(80px,10vh,110px)}
.ruta .caja{max-width:1240px}
.ruta-cab{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:44px}
.ruta-cab h2{font:600 clamp(34px,3.8vw,56px)/1.02 var(--f-tit);letter-spacing:-.04em;color:var(--tinta);max-width:16ch}
.ruta-cab p{max-width:30ch;font-size:17px;line-height:1.5;color:#4A4F6A}
.ruta-lista{display:grid;gap:22px}
.ru{position:sticky;top:calc(104px + var(--k) * 18px)}
.ru>a{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:150px minmax(0,1.25fr) minmax(0,1fr) auto;align-items:center;gap:36px;min-height:230px;padding:34px 44px 44px 40px;border-radius:28px;text-decoration:none;transform-origin:50% 0;transform:scale(calc(1 - var(--tapada,0) * .06));transition:box-shadow .5s}
.ru-1>a{background:#EEF0FF;color:#02005A}
.ru-2>a{background:#0400BC;color:#fff}
.ru-3>a{background:#02005A;color:#fff}
.ru-4>a{background:#fff;color:#1D2226;box-shadow:inset 0 0 0 1px #E2E8F0,0 30px 60px -30px rgba(10,40,90,.25)}
.ru>a::after{content:"";position:absolute;inset:0;z-index:3;background:#02005A;opacity:calc(var(--tapada,0) * .35);pointer-events:none;border-radius:inherit}
.ru-n{position:relative;z-index:2;font:600 clamp(84px,8vw,124px)/.8 var(--f-tit);letter-spacing:-.07em;color:#0400BC}
.ru-2 .ru-n,.ru-3 .ru-n{color:var(--amarillo)}
.ru-4 .ru-n{color:#0A66C2}
.ru-texto{position:relative;z-index:2}
.ru-et{font:600 13px/1 var(--f-tit);opacity:.7}
.ru h3{margin-top:12px;font:600 clamp(24px,2.3vw,34px)/1.08 var(--f-tit);letter-spacing:-.03em}
.ru-texto p{margin-top:10px;font-size:16px;line-height:1.5;opacity:.8;max-width:34ch}
.ru-items{position:relative;z-index:2;display:grid;gap:10px}
.ru-items li{display:flex;align-items:center;gap:10px;font-size:15px;line-height:1.3}
.ru-items li::before{content:"";flex:0 0 7px;height:7px;border-radius:50%;background:currentColor;opacity:.45}
.ru-ver{position:relative;z-index:2;display:inline-flex;gap:8px;font:600 14px/1 var(--f-tit);white-space:nowrap;color:#0400BC}
.ru-2 .ru-ver,.ru-3 .ru-ver{color:var(--amarillo)}
.ru-4 .ru-ver{color:#0A66C2}
.ru-ver span{transition:transform .4s var(--ease)}
.ru>a:hover .ru-ver span{transform:translateX(5px)}

.ru-4 .caras{z-index:1}
.ruta-legal{margin-top:28px;text-align:center;font-size:13px;color:#56687A}
@media (max-width:1060px){
  .ru>a{grid-template-columns:110px minmax(0,1fr) auto;gap:24px}
  .ru-items{display:none}
}
@media (max-width:760px){
  .ruta-cab{display:block}.ruta-cab p{margin-top:14px}
  .ru{position:relative;top:auto}
  .ru>a{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-height:0;padding:26px 22px 40px;transform:none}
  .ru>a::after{display:none}
  .ru-n{font-size:64px}
  .ru-items{display:grid}
  
  .ru-4 .caras{inset:0;width:auto;height:auto;opacity:.55}
}
@media (prefers-reduced-motion:reduce){.ru{position:relative;top:auto}.ru>a{transform:none}.ru>a::after{display:none}}
@media (max-width:760px){.ru-4 .cara:nth-child(-n+3){display:none}.ru-4 .caras{opacity:.8}}
/* ruta: minimalista con fotos; sin barra de avance */
.ru>a{grid-template-columns:130px minmax(0,1.2fr) minmax(0,.9fr);gap:34px;padding:36px calc(33% + 40px) 36px 40px;min-height:250px}
.ru-foto{position:absolute;z-index:2;top:0;right:0;bottom:0;width:33%;overflow:hidden}
.ru-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.ru>a:hover .ru-foto img{transform:scale(1.04)}
.ru-texto .ru-ver{display:inline-flex;margin-top:16px}

@media (max-width:1060px){.ru>a{grid-template-columns:96px minmax(0,1fr);padding-right:calc(36% + 28px)}.ru-foto{width:36%}}
@media (max-width:760px){
  .ru>a{padding:0 22px 26px}
  .ru-foto{position:relative;width:calc(100% + 44px);height:200px;margin:0 -22px 4px;order:-1}
  .ru-4 .caras{top:200px}
}
/* Remotos Work: la tarjeta queda como estaba (sin foto) */
.ru-4>a{grid-template-columns:150px minmax(0,1.25fr) minmax(0,1fr) auto;gap:36px;padding:34px 44px 44px 40px;min-height:230px}
@media (max-width:1060px){.ru-4>a{grid-template-columns:110px minmax(0,1fr) auto;gap:24px;padding-right:44px}}
@media (max-width:760px){.ru-4>a{padding:26px 22px 40px}.ru-4 .caras{top:0}}
/* ruta: fondos vivos en las tarjetas 1 a 3 (luz de la marca que se mueve despacio) */
.ru-1>a::before,.ru-2>a::before,.ru-3>a::before{content:"";position:absolute;z-index:0;inset:-35% -10%;pointer-events:none;filter:blur(40px);animation:ruLuz 16s ease-in-out infinite alternate;will-change:transform}
.ru-1>a::before{background:radial-gradient(38% 55% at 18% 30%,rgba(0,18,253,.20),transparent 70%),radial-gradient(30% 45% at 52% 85%,rgba(255,228,0,.30),transparent 70%),radial-gradient(34% 50% at 62% 15%,rgba(255,255,255,.9),transparent 70%)}
.ru-2>a::before{background:radial-gradient(40% 60% at 15% 75%,rgba(0,18,253,.95),transparent 70%),radial-gradient(30% 50% at 55% 20%,rgba(120,140,255,.45),transparent 70%),radial-gradient(26% 40% at 40% 95%,rgba(255,228,0,.22),transparent 70%);animation-duration:19s;animation-delay:-6s}
.ru-3>a::before{background:radial-gradient(42% 60% at 20% 20%,rgba(4,0,188,.9),transparent 70%),radial-gradient(32% 50% at 58% 80%,rgba(0,18,253,.55),transparent 70%),radial-gradient(22% 36% at 45% 40%,rgba(255,228,0,.14),transparent 70%);animation-duration:22s;animation-delay:-11s}
@keyframes ruLuz{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}50%{transform:translate3d(6%,-4%,0) rotate(8deg) scale(1.08)}100%{transform:translate3d(-5%,5%,0) rotate(-6deg) scale(1.02)}}
.ru-n,.ru-texto,.ru-items,.ru-ver,.ru-foto{z-index:2}
@media (max-width:760px){.ru-4 .cara:nth-child(n+17):nth-child(-n+27){display:none}}
@media (prefers-reduced-motion:reduce){.ru>a::before{animation:none}}
@keyframes ruLuz{0%{transform:translate3d(-6%,3%,0) rotate(-6deg) scale(1)}50%{transform:translate3d(9%,-6%,0) rotate(10deg) scale(1.12)}100%{transform:translate3d(-3%,7%,0) rotate(-2deg) scale(1.04)}}
.ru-1>a::before{animation-duration:12s}.ru-2>a::before{animation-duration:14s}.ru-3>a::before{animation-duration:16s}
@media (max-width:760px){.ru-4 .cara:nth-child(28){display:none}}

/* ============================================================
   Ruta: un fondo animado que cuenta cada etapa
   ============================================================ */
.ru-1>a::before,.ru-2>a::before,.ru-3>a::before{opacity:.55}
.ru-fondo{position:absolute;z-index:1;top:0;bottom:0;left:0;right:33%;pointer-events:none}
.ru-fondo svg{width:100%;height:100%;display:block}
/* 1 · el camino */
.rf-ruta{fill:none;stroke:#0400BC;stroke-opacity:.14;stroke-width:3;stroke-linecap:round;stroke-dasharray:1 13}
.rf-ruta-viva{fill:none;stroke:#0400BC;stroke-opacity:.35;stroke-width:3;stroke-linecap:round;stroke-dasharray:1 13;animation:rfAnda 3s linear infinite}
@keyframes rfAnda{to{stroke-dashoffset:-56}}
.rf-parada{fill:#0400BC;fill-opacity:.12;transform-box:fill-box;transform-origin:center;animation:rfLate 2.6s ease-in-out infinite;animation-delay:calc(var(--i) * -1.3s)}
.rf-centro{fill:#0400BC;fill-opacity:.45}
@keyframes rfLate{0%,100%{transform:scale(1);fill-opacity:.12}50%{transform:scale(2.1);fill-opacity:.04}}
.rf-pin path{fill:#0400BC;fill-opacity:.5}.rf-pin circle{fill:#EEF0FF}
.rf-pin{animation:rfPin 2.4s ease-in-out infinite}
@keyframes rfPin{0%,100%{translate:0 0}50%{translate:0 -7px}}
.rf-viajero{fill:#FFE400;stroke:#0400BC;stroke-opacity:.35;stroke-width:2}

/* 3 · los perfiles */
.rf-perfil{animation:rfFlota 6s ease-in-out infinite;animation-delay:calc(var(--i) * -1.5s)}
@keyframes rfFlota{0%,100%{translate:0 0}50%{translate:0 -8px}}
.rf-marco{fill:#fff;fill-opacity:.05;stroke:#fff;stroke-opacity:.16;stroke-width:1.2}
.rf-foto{fill:#fff;fill-opacity:.18}
.rf-linea{fill:#fff;fill-opacity:.3;transform-box:fill-box;transform-origin:left center;animation:rfEscribe 6s cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(var(--i) * .9s)}
.rf-linea.l2{animation-delay:calc(var(--i) * .9s + .25s)}.rf-linea.l3{animation-delay:calc(var(--i) * .9s + .5s)}
@keyframes rfEscribe{0%,6%{transform:scaleX(0)}24%,80%{transform:scaleX(1)}94%,100%{transform:scaleX(0)}}
.rf-ok{fill:#FFE400;transform-box:fill-box;transform-origin:center;animation:rfOk 6s cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:calc(var(--i) * .9s + .8s)}
@keyframes rfOk{0%,20%{transform:scale(0)}30%,80%{transform:scale(1)}92%,100%{transform:scale(0)}}
@media (max-width:760px){.ru-fondo{right:0;top:200px}}
@media (prefers-reduced-motion:reduce){.ru-fondo *{animation:none!important}.rf-viajero{display:none}.rf-linea,.rf-ok{transform:none}}

@keyframes rfClase2{0%,6%{fill:#fff;fill-opacity:.1}12%,64%{fill:#FFE400;fill-opacity:1}76%,100%{fill:#fff;fill-opacity:.1}}
@keyframes rfClase2{0%,4%{fill:#fff;fill-opacity:.1}10%,32%{fill:#FFE400;fill-opacity:1}42%,100%{fill:#fff;fill-opacity:.1}}
@media (max-width:760px){
  .ru-fondo{top:200px;bottom:auto;left:0;right:0;height:calc((100vw - 40px) * .359)}
  .ru-3 .rf-perfil:nth-of-type(1),.ru-3 .rf-perfil:nth-of-type(3){display:none}
}

/* 2 · familia clara, sin amarillo; competencias que crecen */
.ru-2>a{background:#E2E6FF;color:#02005A}
.ru-2 .ru-n{color:#0012FD}
.ru-2 .ru-ver{color:#0400BC}
.ru-2>a::before{background:radial-gradient(38% 55% at 20% 25%,rgba(255,255,255,.85),transparent 70%),radial-gradient(34% 50% at 60% 80%,rgba(0,18,253,.16),transparent 70%)}

.rf-bar{fill:#0400BC;fill-opacity:.1;transform-box:fill-box;transform-origin:center bottom;animation:rfBar 9s cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(var(--i) * .09s)}
@keyframes rfBar{0%,4%{transform:scaleY(.2)}26%,82%{transform:scaleY(1)}96%,100%{transform:scaleY(.2)}}
.rf-curva{fill:none;stroke:#0400BC;stroke-opacity:.4;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:rfCurva 9s cubic-bezier(.45,0,.2,1) infinite}
@keyframes rfCurva{0%,6%{stroke-dashoffset:1}48%,84%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:1}}
.rf-meta{fill:#0012FD;fill-opacity:.14;transform-box:fill-box;transform-origin:center;animation:rfLate 2.6s ease-in-out infinite}
.rf-meta-c{fill:#0012FD;fill-opacity:.6}
.rf-sube{fill:#fff;stroke:#0012FD;stroke-width:3}
@media (prefers-reduced-motion:reduce){.rf-curva{stroke-dashoffset:0}.rf-sube{display:none}}
.rf-bar{fill-opacity:.13}
/* 2 · azul de la marca, sin amarillo: todo en blanco */
.ru-2>a{background:#0400BC;color:#fff}
.ru-2 .ru-n{color:#fff}
.ru-2 .ru-ver{color:#fff}
.ru-2>a::before{background:radial-gradient(40% 60% at 15% 75%,rgba(0,18,253,.9),transparent 70%),radial-gradient(30% 50% at 55% 20%,rgba(120,140,255,.35),transparent 70%)}
.ru-2 .rf-bar{fill:#fff;fill-opacity:.12}
.ru-2 .rf-curva{stroke:#fff;stroke-opacity:.55}
.ru-2 .rf-meta{fill:#fff;fill-opacity:.18}
.ru-2 .rf-meta-c{fill:#fff;fill-opacity:.9}
.ru-2 .rf-sube{fill:#0400BC;stroke:#fff}

/* metas: las burbujas claras pasan a azul noche para que no se pierdan en el blanco */
.mb:nth-of-type(3n)>span{background:#02005A;color:#fff}
/* blog con foto */
.blog-tarjeta.con-foto{display:flex;align-items:center;gap:18px;padding:12px;overflow:hidden}
.bt-foto{flex:0 0 132px;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#E2E6FF}
.bt-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.blog-tarjeta.con-foto:hover .bt-foto img{transform:scale(1.06)}

.blog-tarjeta.grande.con-foto{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px 12px 26px}
.blog-tarjeta.grande .bt-foto{flex:none;aspect-ratio:16/10;margin-bottom:12px}
.blog-tarjeta.grande.con-foto>small,.blog-tarjeta.grande.con-foto>b,.blog-tarjeta.grande.con-foto>span:not(.bt-foto),.blog-tarjeta.grande.con-foto>em{padding:0 14px}
.articulo-foto{margin:0 0 36px;border-radius:24px;overflow:hidden;aspect-ratio:16/9}
.articulo-foto img{width:100%;height:100%;object-fit:cover}
@media (max-width:600px){.bt-foto{flex-basis:96px}}
/* Remotos Work: sin la franja vacía bajo el botón */
.rw-apartado{padding:clamp(110px,15vh,160px) 0}
.rw-apartado[data-rw-scroll]{padding:clamp(110px,15vh,150px) 0}
.blog-tarjeta.grande em{display:inline-flex;gap:6px;white-space:nowrap}

/* ============================================================
   Especialidades: tres columnas con foto que se abren
   ============================================================ */
.esf{background:#fff;padding:clamp(100px,13vh,150px) 0}
.esf .caja{max-width:1320px}
.esf-cab{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:40px}
.esf-cab h2{font:600 clamp(36px,4vw,60px)/1 var(--f-tit);letter-spacing:-.04em;color:var(--tinta)}
.esf-cab p{max-width:40ch;font-size:17px;line-height:1.5;color:#4A4F6A}
.esf-cols{display:flex;gap:14px;height:clamp(480px,62vh,580px)}
.ef{position:relative;isolation:isolate;overflow:hidden;flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:26px 28px 28px;border-radius:26px;color:#fff;outline:none;cursor:pointer;background:#02005A;transition:flex-grow 1s cubic-bezier(.22,1,.36,1)}
.ef.activa{flex-grow:2.1;cursor:default}
.ef:focus-visible{box-shadow:0 0 0 3px var(--amarillo)}
.ef-foto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.ef.activa .ef-foto{transform:scale(1)}
.ef-velo{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(2,0,90,.15) 0%,rgba(2,0,90,.35) 45%,rgba(2,0,90,.92) 100%);transition:background-color .8s}
.ef:not(.activa) .ef-velo{background-color:rgba(2,0,90,.35)}
.ef-arriba{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ef-n{font:600 15px/1 var(--f-tit);color:#fff}
.ef-pronto{padding:6px 12px;border-radius:99px;background:var(--amarillo);color:#02005A;font:600 12px/1 var(--f-tit);white-space:nowrap}
.ef h3{font:600 clamp(22px,2.1vw,32px)/1.08 var(--f-tit);letter-spacing:-.03em;max-width:16ch;text-shadow:0 2px 20px rgba(0,0,0,.25)}
.ef-mas{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .9s cubic-bezier(.22,1,.36,1),opacity .6s}
.ef-mas>*{min-height:0}
.ef.activa .ef-mas{grid-template-rows:1fr;opacity:1}
.ef-mas-in{overflow:hidden}
.ef-roles{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;overflow:hidden}
.ef-roles li{padding:8px 13px;border-radius:99px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);font-size:14px;line-height:1;white-space:nowrap}
.ef-pie{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.22);font-size:14px;overflow:hidden}
.ef-pie>span{opacity:.8}
.ef-pie a{font:600 14px/1 var(--f-tit);color:var(--amarillo);text-decoration:none;white-space:nowrap}
.ef-pie a span{display:inline-block;transition:transform .4s var(--ease)}
.ef-pie a:hover span{transform:translateX(4px)}
.esf-pie{margin-top:22px;text-align:right}
html:not(.js) .ef-mas{grid-template-rows:1fr;opacity:1}
@media (max-width:900px){
  .esf-cab{display:block}.esf-cab p{margin-top:14px}
  .esf-cols{flex-direction:column;height:auto}
  .ef,.ef.activa{flex:none;min-height:420px}
  .ef-mas{grid-template-rows:1fr;opacity:1}
  .ef:not(.activa) .ef-velo{background-color:transparent}
  .ef-pie{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){.ef,.ef-foto,.ef-mas{transition:none}}
.ef-velo{background:linear-gradient(180deg,rgba(0,0,10,.18) 0%,rgba(0,0,10,0) 28%,rgba(0,0,10,.08) 50%,rgba(2,0,60,.86) 100%)}
.ef:not(.activa) .ef-velo{background-color:rgba(0,0,10,.22)}
@media (max-width:900px){
  .ef,.ef.activa{min-height:0;justify-content:flex-start}
  .ef-foto{height:240px;bottom:auto;transform:none}
  .ef-velo,.ef:not(.activa) .ef-velo{background:linear-gradient(180deg,rgba(0,0,10,.25) 0%,rgba(0,0,10,0) 30%,rgba(2,0,90,0) 70%,#02005A 240px,#02005A 100%)}
  .ef-abajo{margin-top:200px}
}
@media (max-width:900px){
  .ef-foto{object-position:50% 18%}
  .ef-velo,.ef:not(.activa) .ef-velo{background:linear-gradient(180deg,rgba(0,0,10,.22) 0,rgba(0,0,10,0) 70px,rgba(2,0,90,0) 170px,#02005A 240px,#02005A 100%)}
}

/* ============================================================
   Preguntas y blog del inicio{background:#F4F5FC;padding:clamp(100px,13vh,140px) 0}

/* ============================================================
   Preguntas y blog: una sola sección compacta con foto real
   ============================================================ */
.pyb{background:#fff;padding:clamp(90px,12vh,130px) 0}
.pyb-in{max-width:1240px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,90px);align-items:start}
.pyb-foto{position:sticky;top:110px;margin:0;border-radius:28px;overflow:hidden;aspect-ratio:9/11;background:#EEF0FF}
.pyb-foto img{width:100%;height:100%;object-fit:cover}
.pyb-foto figcaption{position:absolute;left:16px;right:16px;bottom:16px;display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:20px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);color:var(--tinta)}
.pyb-foto figcaption b{font:600 19px/1.2 var(--f-tit)}
.pyb-foto figcaption span{font-size:14px;color:#4A4F6A}
.pyb-foto figcaption a{margin-top:8px;font:600 14px/1 var(--f-tit);color:#0400BC;text-decoration:none}
.pyb-der h2{font:600 clamp(34px,3.6vw,52px)/1.02 var(--f-tit);letter-spacing:-.04em;color:var(--tinta)}
.pyb-lista{margin-top:28px;border-top:1px solid #E4E6F2}
.pyb-lista details{border:0;border-bottom:1px solid #E4E6F2;background:none;border-radius:0}
.pyb-lista summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;list-style:none;cursor:pointer;font:600 clamp(17px,1.4vw,20px)/1.3 var(--f-tit);color:var(--tinta);transition:color .3s}
.pyb-lista summary:hover{color:#0400BC}
.pyb-lista summary::-webkit-details-marker{display:none}
.pyb-lista summary::after{display:none}
.pq-mas{position:relative;flex:0 0 18px;height:18px}
.pq-mas::before,.pq-mas::after{content:"";position:absolute;left:0;top:50%;width:18px;height:2px;margin-top:-1px;border-radius:2px;background:#0400BC;transition:transform .5s var(--ease)}
.pq-mas::after{transform:rotate(90deg)}
details[open] .pq-mas::after{transform:rotate(0deg)}
.pyb-lista .resp{padding:0 40px 24px 0}
.pyb-lista .resp p{font-size:16px;line-height:1.6;color:#4A4F6A;max-width:60ch}
.pyb-todas{display:inline-flex;margin-top:20px}
.pyb-blog{display:grid;grid-template-columns:auto 1fr 1fr;align-items:center;gap:18px;margin-top:44px;padding-top:28px;border-top:1px solid #E4E6F2}
.pyb-blog-et{font:600 13px/1 var(--f-tit);color:#0400BC;writing-mode:vertical-rl;transform:rotate(180deg)}
.pb{display:flex;align-items:center;gap:14px;color:var(--tinta);text-decoration:none}
.pb img{flex:0 0 96px;width:96px;height:72px;border-radius:14px;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.pb:hover img{transform:scale(1.05)}
.pb span{display:flex;flex-direction:column;gap:6px}
.pb small{font:600 12px/1 var(--f-tit);color:#0400BC}
.pb b{font:600 15px/1.3 var(--f-tit)}
.pb:hover b{color:#0400BC}
@media (max-width:900px){
  .pyb-in{grid-template-columns:1fr;gap:34px}
  .pyb-foto{position:relative;top:auto;aspect-ratio:4/3}
  .pyb-blog{grid-template-columns:1fr}
  .pyb-blog-et{writing-mode:horizontal-tb;transform:none}
}
@media (max-width:900px){
  .pyb-foto{aspect-ratio:auto;overflow:visible;background:none;border-radius:0}
  .pyb-foto img{aspect-ratio:4/3;height:auto;border-radius:24px;object-position:60% 30%}
  .pyb-foto figcaption{position:static;margin-top:12px;background:#F4F5FC;backdrop-filter:none}
}

/* ============================================================
   Auditoría 2 (3-nov): accesibilidad
   ============================================================ */
.saltar{position:absolute;left:-999px;top:12px;z-index:99;padding:12px 16px;border-radius:999px;background:#fff;color:var(--azul);font:600 15px/1 var(--f-tit);text-decoration:none}
.saltar:focus{left:12px}
.ef-pie a,.pyb-foto figcaption a{display:inline-flex;align-items:center;min-height:44px}
/* ============================================================
   Auditoría 2: arreglos visibles del inicio
   ============================================================ */
/* metas: cada burbuja llega desde fuera hacia su lugar (nunca cruza el título) y el tramo es más corto */
.metas-p{height:165vh}
.mb{transform:translate(calc((var(--x) - 50) * .55vw * (1 - var(--q))),calc((var(--y) - 44) * .55vh * (1 - var(--q)))) scale(calc(.7 + .3 * var(--q)));opacity:calc(var(--q) * 1.3)}
.metas-p .metas-in{background:radial-gradient(closest-side,#fff 70%,rgba(255,255,255,0));padding:30px 40px}
@media (max-width:900px){
  .metas-p{height:auto!important}
  .metas-pin{display:flex!important;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:8px!important;padding:80px var(--margen)!important}
  .metas-pin .mb{position:static!important;display:inline-block!important;width:auto!important;transform:none!important;opacity:1!important}
  .metas-pin .mb>span{padding:10px 16px!important;font-size:14px!important}
}
/* menú completo desde 900 px */
@media (min-width:901px) and (max-width:1060px){
  .cab .menu{display:flex!important;position:static!important;flex-direction:row!important;padding:0!important;background:none!important;min-height:0!important;box-shadow:none!important;border:0!important;gap:14px}
  .cab .menu a{font-size:14px;padding:0;border:0}
  .abrir-menu{display:none!important}
  .cab .cab-login{display:inline-flex!important;padding:10px 14px;font-size:13px}
  .menu .menu-movil{display:none!important}
}
/* especialidades: sin tinte sobre las fotos cerradas, solo el degradado de abajo */
.ef:not(.activa) .ef-velo{background-color:transparent}
/* ruta: que se vea la cara en la etapa 2 */
.ru-2 .ru-foto img{object-position:50% 30%}
/* «Del blog» en una columna en pantallas medianas */
@media (max-width:1100px){.pyb-blog{grid-template-columns:1fr}.pyb-blog-et{writing-mode:horizontal-tb;transform:none}}
.metas-p .metas-in{background:none;padding:0}
.metas-p .metas-in p{max-width:34ch;margin-left:auto;margin-right:auto}
.ru-2 .ru-foto img{object-position:50% 8%}
.ru-2 .ru-foto img{object-position:50% 40%}
/* páginas interiores: portada con foto real a la derecha */
.pag-foto .pag-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,90px);align-items:center;padding-top:clamp(64px,9vh,100px);padding-bottom:clamp(64px,9vh,100px)}
.pag-fig{margin:0;justify-self:end;width:100%;max-width:460px;aspect-ratio:6/7;border-radius:28px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.55)}
.pag-fig img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .pag-foto .pag-in{grid-template-columns:1fr;gap:28px}
  .pag-fig{justify-self:stretch;max-width:none;aspect-ratio:4/3}
}
.pag-foto h1{font-size:clamp(34px,3.6vw,54px);max-width:16ch}
/* portada de Certificación: el diploma real; de Plataforma: el Campus en el teléfono */
.pag-fig.pag-diploma{aspect-ratio:auto;overflow:visible;box-shadow:none;transform:rotate(-3deg)}
.pag-fig.pag-diploma img{height:auto;border-radius:10px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.pag-fig.pag-tel{aspect-ratio:auto;overflow:visible;box-shadow:none;display:flex;justify-content:center}
.pag-fig.pag-tel span{display:block;width:min(100%,250px);padding:9px;border-radius:40px;background:#0d0d1a;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.pag-fig.pag-tel img{height:auto;border-radius:32px;display:block}
@media (max-width:900px){.pag-fig.pag-diploma{transform:none}.pag-fig.pag-tel span{width:200px}}
/* portada: video de fondo detrás de todo, bajo el mismo azul de siempre */
.portada-p{isolation:isolate}
.portada-video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;pointer-events:none}
.portada-velo{position:absolute;inset:0;z-index:-1;background:var(--campo-azul);opacity:.8;pointer-events:none}
@media (prefers-reduced-motion:reduce){.portada-video{display:none}.portada-velo{opacity:1}}
.portada-velo{opacity:.64}

/* ============================================================
   Teléfono: filas que se deslizan con el dedo (como Platzi)
   ============================================================ */
.desliza{display:none}
.pie-grupo summary{list-style:none;cursor:default}
.pie-grupo summary::-webkit-details-marker{display:none}
@media (max-width:760px){
  .desliza{display:flex;align-items:center;gap:8px;margin:-6px 0 14px;font:600 13px/1 var(--f-tit);color:#0400BC}
  .desliza span{animation:desliza 1.6s ease-in-out infinite}
  @keyframes desliza{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
  /* ruta */
  .ruta-lista{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--margen) * -1);padding:0 var(--margen) 6px;scroll-padding-inline:var(--margen);scrollbar-width:none}
  .ruta-lista::-webkit-scrollbar{display:none}
  .ru{flex:0 0 86%;scroll-snap-align:start}
  .ru>a{height:100%}
  /* especialidades */
  .esf-cols{flex-direction:row!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--margen) * -1);padding:0 var(--margen) 6px;scroll-padding-inline:var(--margen);scrollbar-width:none}
  .esf-cols::-webkit-scrollbar{display:none}
  .ef,.ef.activa{flex:0 0 84%!important;scroll-snap-align:start}
  .esf .desliza{color:#0400BC}
  /* pie plegable */
  .pie-in{gap:0}
  .pie-grupo{border-top:1px solid rgba(255,255,255,.12)}
  .pie-grupo summary{display:flex;justify-content:space-between;align-items:center;padding:16px 0;margin:0;cursor:pointer;min-height:44px}
  .pie-grupo summary::after{content:"+";font:400 22px/1 var(--f-txt);color:#fff;transition:transform .4s var(--ease)}
  .pie-grupo[open] summary::after{transform:rotate(45deg)}
  .pie-grupo ul{padding-bottom:16px}
}
@media (prefers-reduced-motion:reduce){.desliza span{animation:none}}
/* ============================================================
   Portada en el teléfono, acomodada como Platzi
   ============================================================ */
@media (max-width:760px){
  .portada-p{display:grid!important;min-height:0}
  .portada-p-in{padding:150px var(--margen) 56px!important}
  /* solo dos fotos chicas en las esquinas de arriba, junto al título */
  .flotas{position:absolute!important;inset:0!important;display:block!important;padding:0!important;margin:0!important;overflow:visible!important;width:auto!important;max-width:none!important;pointer-events:none;z-index:1}
  .flotas::after{display:none!important}
  .flotas .flota{display:none!important}
  .flotas .flota.f-diag,.flotas .flota.f-vip{display:block!important;position:absolute!important;flex:none!important;width:100px!important;max-width:none!important;transform:none!important;opacity:1!important;pointer-events:auto}
  .flotas .flota.f-diag{left:18px;top:26px}
  .flotas .flota.f-vip{right:18px;top:40px;left:auto}
  .flotas .flota .tarjeta{width:100px!important;animation:none!important;opacity:1!important;transform:rotate(-8deg)!important;border-radius:16px}
  .flotas .flota.f-vip .tarjeta{transform:rotate(7deg)!important}
  .flotas .foto-img{border-radius:16px}
  /* botones centrados, del ancho de su texto */
  .portada-p .acciones{flex-direction:column;align-items:center;gap:12px}
  .portada-p .acciones .btn{width:auto!important;min-width:240px;justify-content:center}
  /* sello de Florida: el logo arriba y el texto debajo, centrados */
  .portada-p .portada-aval{flex-direction:column;align-items:center;gap:10px;margin-top:30px;font-size:13px;text-align:center}
}
@media (max-width:760px){.portada-p-in{padding-top:168px!important}.flotas .flota.f-diag{top:22px}.flotas .flota.f-vip{top:30px}}
/* teléfono: los programas en una fila que se desliza; el logo de Florida más chico */
@media (max-width:760px){
  .programas-lista{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--margen) * -1);padding:0 var(--margen) 6px;scroll-padding-inline:var(--margen);border-top:0;scrollbar-width:none}
  .programas-lista::-webkit-scrollbar{display:none}
  .programas-lista li{flex:0 0 78%;scroll-snap-align:start;border:0}
  .programas-lista a{height:100%;justify-content:space-between;padding:24px 22px!important;border-radius:22px;background:#F4F5FC;overflow:hidden}
  .programas-lista .pl-nombre{font-size:28px}
  .programas-lista .pl-precio{font-size:24px}
  .aval-g .aval-logo{height:48px;margin-bottom:18px}
}
@media (max-width:760px){.prog-wrap{display:block}}

/* ============================================================
   Especialidades con las herramientas de cada puesto (3-nov-2026, pedido de Ronaldo)
   v3: al abrir una columna los logos CRECEN (pasan a 2 filas de 4) y la columna cuenta su historia:
   IA (Claude Code guiña, Claude «piensa», Gemini destella, n8n automatiza), Marketing (likes, WhatsApp,
   mensaje directo, llamada) y Operaciones (tarea, Slack, reunión, ticket). Solo se anima la columna que se mira.
   Fondos: .fondo-claro · .fondo-marca · .fondo-noche
   ============================================================ */
@property --t{syntax:'<number>';inherits:true;initial-value:0}
.esf-herr .ef{--t:0;transition:flex-grow 1s cubic-bezier(.22,1,.36,1),--t .9s cubic-bezier(.22,1,.36,1)}
.esf-herr .ef.activa{--t:1}
.ef-campo{position:relative;flex:1 1 auto;min-height:0;margin:8px -6px 14px;container-type:size}
.ef-campo::before{content:"";position:absolute;inset:0;pointer-events:none}
.ef-grupo{position:absolute;inset:0}
/* cada logo pasa del panal (cerrada) a la grilla grande (abierta) siguiendo --t, sin saltos */
.ef-h,.ef-avisos>*{--u0:min(1cqw,1.25cqh);--u1:min(1cqw,1.786cqh);
  --u:calc(var(--u0) + (var(--u1) - var(--u0)) * var(--t));
  --cx:calc(var(--x) + (var(--xa) - var(--x)) * var(--t));
  --cy:calc(var(--y) - 40 + (var(--ya) - 28 - var(--y) + 40) * var(--t));
  --cs:calc(var(--s) + (var(--sa) - var(--s)) * var(--t))}
.ef-h{position:absolute;left:calc(50cqw + (var(--cx) - 50 - var(--cs) / 2) * var(--u));top:calc(50cqh + (var(--cy) - var(--cs) / 2) * var(--u));width:calc(var(--cs) * var(--u));aspect-ratio:1;
  display:grid;place-items:center;border-radius:24%;background:#fff;box-shadow:0 1px 2px rgba(0,0,30,.1),0 10px 18px -12px rgba(0,0,40,.45)}
.ef-logo{display:block;width:calc(52% * var(--e,1));height:calc(52% * var(--e,1));object-fit:contain}
/* entrada: suben un poco, una sola vez */
.js .esf-herr .ef .ef-h{transform:translateY(10px)}
.js .esf-herr .ef.en .ef-h{transform:none;transition:transform .6s var(--ease) calc(.12s + var(--i) * 35ms),scale .35s var(--ease) 0s}
@media (hover:hover) and (min-width:901px){
  .esf-herr .ef.activa .ef-h:hover{scale:1.14;z-index:6}
  .ef-h::after{content:attr(data-n);position:absolute;left:50%;top:calc(100% + 7px);translate:-50% 3px;padding:5px 9px;border-radius:6px;background:#10101A;color:#fff;font:600 12px/1 var(--f-tit);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,translate .2s;z-index:7}
  .ef.activa .ef-h:hover::after{opacity:1;translate:-50% 0}
}

/* lo que pasa en la columna que se mira: avisos que llegan, corazones, insignias y gestos de los logos */
.ef-avisos{position:absolute;inset:0;z-index:10;pointer-events:none}
.ef-b,.ef-corazon,.ef-insignia{position:absolute;pointer-events:none;opacity:0}
.ef-b{z-index:5;display:flex;align-items:center;gap:6px;padding:7px 11px 7px 9px;border-radius:12px;background:#fff;color:#10101A;font:600 12px/1.2 var(--f-tit);white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,30,.12),0 14px 28px -12px rgba(2,0,60,.45);translate:0 6px}
.ef-b-ad{left:calc(50cqw + (var(--cx) - 50 + var(--cs) * .08) * var(--u));top:calc(50cqh + (var(--cy) - var(--cs) / 2) * var(--u) - 6px);transform:translateY(-100%);border-bottom-left-radius:4px}
.ef-b-ai{left:calc(50cqw + (var(--cx) - 50 - var(--cs) * .08) * var(--u));top:calc(50cqh + (var(--cy) - var(--cs) / 2) * var(--u) - 6px);transform:translate(-100%,-100%);border-bottom-right-radius:4px}
.ef-b-bi{left:calc(50cqw + (var(--cx) - 50 - var(--cs) * .08) * var(--u));top:calc(50cqh + (var(--cy) + var(--cs) / 2) * var(--u) + 6px);transform:translateX(-100%);border-top-right-radius:4px}
.ef-b-wa{background:#D9FDD3}
.ef-ok{width:14px;height:14px;flex:none}
.ef-punto{width:8px;height:8px;border-radius:50%;flex:none}
.ef-corazon{left:calc(50cqw + (var(--cx) - 50) * var(--u));top:calc(50cqh + (var(--cy) - var(--cs) / 2) * var(--u));width:calc(var(--cs) * var(--u) * .32);margin-left:calc(var(--cs) * var(--u) * -.16)}
.ef-corazon svg{display:block;width:100%;height:auto}
.ef-insignia{top:-8%;right:-8%;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#FF3B30;color:#fff;font:700 12px/22px var(--f-tit);text-align:center;z-index:5;box-shadow:0 0 0 2px #fff;scale:0}
.ef-parpado{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0)}
.esf-herr .ef.activa.en .ef-b{animation:efAviso 8s var(--ease) var(--ret,0s) infinite both}
.esf-herr .ef.activa.en .ef-corazon{animation:efCorazon 8s ease-out var(--ret,0s) infinite both}
.esf-herr .ef.activa.en .ef-insignia{animation:efInsignia 8s var(--ease) var(--ret,0s) infinite both}
.esf-herr .ef.activa.en .ef-parpado{animation:efGuino 8s linear .5s infinite both}
.esf-herr .ef.activa.en .ef-piensa{animation:efPiensa 8s var(--ease) 1.3s infinite both}
.esf-herr .ef.activa.en .ef-destello{animation:efDestello 8s var(--ease) 2s infinite both}
.esf-herr .ef .ef-guina:hover .ef-parpado{animation:efGuinoYa .45s linear both}
@keyframes efAviso{0%{opacity:0;translate:0 8px;scale:.94}4%,30%{opacity:1;translate:0 0;scale:1}35%,100%{opacity:0;translate:0 -6px;scale:1}}
@keyframes efCorazon{0%{opacity:0;transform:translate(0,0) scale(.3)}4%{opacity:1;transform:translate(calc(var(--dx) * .3),-40%) scale(1)}16%{opacity:0;transform:translate(var(--dx),-190%) scale(.8)}100%{opacity:0}}
@keyframes efInsignia{0%,2%{opacity:1;scale:0}5%{opacity:1;scale:1.2}7%,62%{opacity:1;scale:1}66%,100%{opacity:1;scale:0}}
@keyframes efGuino{0%,100%{transform:scaleY(0)}2%{transform:scaleY(1)}4%{transform:scaleY(0)}}
@keyframes efGuinoYa{0%,100%{transform:scaleY(0)}45%,60%{transform:scaleY(1)}}
@keyframes efPiensa{0%{transform:rotate(0)}14%,100%{transform:rotate(360deg)}}
@keyframes efDestello{0%,100%{transform:none}5%{transform:scale(1.22) rotate(45deg)}10%{transform:none}}

@media (max-width:900px){
  .esf-herr .ef,.esf-herr .ef.activa{--t:1;justify-content:flex-start}
  .esf-herr .ef-campo{flex:none;height:190px;margin:2px -6px 8px}
  .esf-herr .ef-abajo{margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .esf-herr .ef{transition:none}
  .js .esf-herr .ef .ef-h{transform:none;transition:none}
  .ef-b,.ef-corazon,.ef-insignia,.ef-parpado,.ef-piensa,.ef-destello{animation:none!important}
}

/* --- Fondo 1 · claro: tarjetas gris muy claro con cuadrícula de puntos; la abierta se vuelve blanca --- */
.esf-herr.fondo-claro .ef{background:#F3F4F8;color:var(--tinta);box-shadow:inset 0 0 0 1px #E3E6EF;transition:flex-grow 1s cubic-bezier(.22,1,.36,1),--t .9s cubic-bezier(.22,1,.36,1),background-color .5s,box-shadow .5s}
.esf-herr.fondo-claro .ef.activa{background:#fff;box-shadow:inset 0 0 0 1px #E3E6EF,0 44px 70px -48px rgba(2,0,60,.45)}
.esf-herr.fondo-claro .ef-campo::before{background:radial-gradient(circle,rgba(4,0,188,.2) 1px,transparent 1.6px) 0 0/16px 16px;-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent)}
.esf-herr.fondo-claro .ef-n{color:var(--azul)}
.esf-herr.fondo-claro .ef h3{color:var(--tinta);text-shadow:none}
.esf-herr.fondo-claro .ef-roles li{background:#fff;box-shadow:inset 0 0 0 1px #E1E4EE;color:#2E3047;backdrop-filter:none}
.esf-herr.fondo-claro .ef-pie{border-top-color:#E4E6F0}
.esf-herr.fondo-claro .ef-pie>span{opacity:1;color:#4A4C5C}
.esf-herr.fondo-claro .ef-pie a{color:var(--azul)}
.esf-herr.fondo-claro .ef:focus-visible{box-shadow:0 0 0 3px var(--electrico)}
.esf-herr.fondo-claro .ef-h{box-shadow:0 1px 2px rgba(0,0,30,.06),0 10px 18px -12px rgba(2,0,60,.28),inset 0 0 0 1px #ECEEF5}
@media (prefers-reduced-motion:reduce){.esf-herr.fondo-claro .ef{transition:none}}

/* --- Fondo 2 · azul de marca: azul del manual con grano y la R entera abajo --- */
.esf-herr.fondo-marca .ef{background:linear-gradient(165deg,#0B08D9 0%,var(--azul) 42%,#030094 100%)}
.esf-herr.fondo-marca .ef::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
.esf-herr.fondo-marca .ef-campo::before{background:radial-gradient(closest-side,rgba(255,255,255,.16),transparent)}
.esf-herr.fondo-marca .ef::before{content:"";position:absolute;right:7%;bottom:5%;width:min(58%,280px);aspect-ratio:360/401;z-index:-1;pointer-events:none;background:rgba(255,255,255,.07);-webkit-mask:url(marca/isotipo-r.png) center/contain no-repeat;mask:url(marca/isotipo-r.png) center/contain no-repeat}

/* --- Fondo 3 · noche con cuadrícula: lienzo de trabajo oscuro; cada logo deja el brillo de su color --- */
.esf-herr.fondo-noche .ef{background:radial-gradient(70% 50% at 50% 36%,#15158C 0%,#08083A 56%,#05051F 100%)}
.esf-herr.fondo-noche .ef-campo::before{background:radial-gradient(circle,rgba(255,255,255,.17) 1px,transparent 1.6px) 0 0/18px 18px;-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent)}
.esf-herr.fondo-noche .ef-h{box-shadow:0 1px 2px rgba(0,0,0,.25),0 16px 34px -12px color-mix(in srgb,var(--c,#000) 80%,transparent)}

/* ============================================================
   «Todo lo que necesitas para avanzar» (3-nov-2026, pedido de Ronaldo: «la C con la B, con las animaciones de la B»)
   Tarjetas de colores de la marca (C) alrededor del Campus real en laptop y teléfono (B).
   Las tarjetas se encienden una por una (o la que se señala), la pantalla cambia con la tarjeta encendida
   y el equipo llega inclinado y se endereza al bajar. La tarjeta encendida repite su dibujo animado.
   Nada del texto arranca oculto; lo que se mueve es decorativo.
   ============================================================ */
.tn{position:relative;overflow:hidden;background:var(--campo-azul);color:#fff;padding:clamp(80px,9vw,128px) 0}
.tn::before{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
.tn::after{content:"";position:absolute;right:-10%;top:-18%;width:46vw;height:46vw;max-width:620px;max-height:620px;border-radius:50%;background:radial-gradient(circle,rgba(0,18,253,.55),transparent 68%);pointer-events:none}
.tn-agua{position:absolute;right:clamp(24px,7vw,120px);top:clamp(56px,7vw,96px);width:clamp(110px,13vw,190px);aspect-ratio:360/401;background:rgba(255,255,255,.07);-webkit-mask:url(marca/isotipo-r.png) center/contain no-repeat;mask:url(marca/isotipo-r.png) center/contain no-repeat;pointer-events:none;z-index:1}
.tn-in{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:0 var(--margen)}
.tn-cab{max-width:660px;margin-bottom:clamp(30px,3.6vw,48px)}
.tn-cab h2{font:600 clamp(32px,4.2vw,56px)/1.04 var(--f-tit);letter-spacing:-.035em;margin:0 0 14px;color:#fff}
.tn-cab p{font:500 18px/1.5 var(--f-txt);margin:0;color:rgba(255,255,255,.88)}

/* rejilla: tarjetas a los lados, el equipo al centro y «365 días» abajo a lo ancho */
.tn-rej{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr);gap:16px}
.tn-equipo{grid-column:2;grid-row:1/3;display:grid;place-items:center;padding:6px 6px 44px}
.tac-a{grid-column:1;grid-row:1}
.tac-b{grid-column:1;grid-row:2}
.tac-c3{grid-column:3;grid-row:1}
.tac-d{grid-column:3;grid-row:2}
.tac-e{grid-column:1/4;grid-row:3}

/* el equipo: laptop con el Campus real y el teléfono delante (de la B) */
.tn-obj{position:relative;width:100%;max-width:620px;perspective:1600px}
.tn-lap{transform:rotateX(var(--rx,10deg)) rotateY(var(--ry,-9deg));transform-style:preserve-3d;will-change:transform}
.tn-pant{position:relative;aspect-ratio:16/10;border-radius:14px 14px 4px 4px;background:#0a0a1c;border:9px solid #0b0b20;box-shadow:0 0 0 1.5px rgba(255,255,255,.22),0 60px 80px -30px rgba(1,0,40,.85),0 20px 40px -10px rgba(1,0,40,.5);overflow:hidden}
.tn-pant>*{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(1.03);transition:opacity .7s ease,transform 1.2s var(--ease)}
.tn-pant>img{object-fit:cover;object-position:top left}
.tn-pant>.on{opacity:1;transform:none}
.tn-dip{display:grid;place-items:center;background:radial-gradient(80% 70% at 50% 40%,#fff 0%,#EEF0FA 72%)}
.tn-dip img{position:static;width:64%;height:auto;rotate:-3deg;border-radius:4px;box-shadow:0 24px 40px -18px rgba(2,0,60,.45)}
.tn-base{height:13px;margin:0 -4%;border-radius:2px 2px 14px 14px;background:linear-gradient(#d9dbe8,#9a9db4);box-shadow:0 28px 40px -14px rgba(1,0,40,.8)}
.tn-tel{position:absolute;z-index:3;right:4%;bottom:-16%;width:19%;aspect-ratio:9/19;border-radius:18px;border:5px solid #0b0b20;overflow:hidden;background:#0b0b20;box-shadow:0 0 0 1.5px rgba(255,255,255,.25),0 40px 50px -18px rgba(1,0,40,.9);transform:rotate(3deg)}
.tn-tel img{width:100%;height:100%;object-fit:cover;object-position:top}

/* tarjetas (de la C) */
.tac-c{position:relative;overflow:hidden;min-height:280px;padding:28px 28px 30px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;border-radius:26px;cursor:pointer;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 60px -38px rgba(2,0,50,.9);transition:translate .5s var(--ease),box-shadow .5s var(--ease)}
.tac-c:focus-visible{box-shadow:0 0 0 3px #fff,0 30px 60px -38px rgba(2,0,50,.9)}
/* la tarjeta encendida (como los avisos de la B): se levanta con un borde amarillo */
.tac-c.on{translate:0 -6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 3px var(--amarillo),0 44px 70px -36px rgba(2,0,50,.95)}
.tac-d.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 3px #fff,0 44px 70px -36px rgba(2,0,50,.95)}
.tac-txt{display:flex;flex-direction:column}
.tac-dato{display:block;white-space:nowrap;font:600 clamp(34px,3.1vw,46px)/1 var(--f-tit);letter-spacing:-.035em}
.tac-et{margin-top:12px;font:600 16px/1.3 var(--f-tit)}
.tac-p{margin-top:6px;font:500 16px/1.5 var(--f-txt);max-width:32ch}
.tac-ilus{position:relative;transition:transform .6s var(--ease)}
.tac-a{background:linear-gradient(155deg,#2B3CFF 0%,var(--electrico) 46%,#000FD0 100%);color:#fff}
.tac-a .tac-p{color:rgba(255,255,255,.9)}
.tac-c3{background:linear-gradient(160deg,#100E86 0%,var(--noche) 58%,#03023F 100%);color:#fff}
.tac-c3 .tac-p{color:rgba(255,255,255,.86)}
.tac-b{background:linear-gradient(180deg,#fff 0%,#F6F7FC 100%);color:var(--azul)}
.tac-b .tac-et{color:var(--tinta)}
.tac-b .tac-p{color:#475569}
.tac-d{justify-content:flex-end;background:linear-gradient(160deg,#FFEB45 0%,var(--amarillo) 50%,#FFD400 100%);color:var(--noche)}
.tac-d .tac-p{color:#1B1A40;max-width:26ch}
.tac-e{min-height:200px;background:#fff;color:var(--azul);flex-direction:row;align-items:center;justify-content:space-between;gap:32px;padding:30px 44px}
.tac-e .tac-dato{font-size:clamp(58px,6vw,88px)}
.tac-e .tac-et{color:var(--tinta)}
.tac-e .tac-p{color:#475569}
.tac-e .tac-p{max-width:none}




.ta-brillo{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.8) 50%,transparent 65%);transform:translateX(-130%)}
.tac-d.ve .ta-brillo{animation:ta-brilla 1.2s ease .85s 1}
@keyframes ta-brilla{0%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

/* 365 días: el anillo de acceso se completa alrededor de la R */
.ta-anillo{flex:none;width:clamp(124px,11vw,150px);aspect-ratio:1}
.ta-anillo svg{display:block;width:100%;height:100%;rotate:-90deg}
.ta-ab{fill:none;stroke:#E9ECF6;stroke-width:9}
.ta-al{fill:none;stroke:var(--azul);stroke-width:9;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.ta-anillo img{position:absolute;left:50%;top:50%;width:36%;height:auto;translate:-50% -50%}
.ta-js .tac-e:not(.ve) .ta-al{stroke-dashoffset:100}
.tac-e.ve .ta-al{transition:stroke-dashoffset 1.7s cubic-bezier(.22,1,.36,1) .2s}

/* el dibujo de la tarjeta encendida o señalada crece un poco (nunca se achica) */

/* botón */
.tac-enlace{display:inline-flex;gap:10px;margin-top:34px;padding:16px 26px;border-radius:999px;background:var(--amarillo);color:var(--noche);font:600 16px/1 var(--f-tit);text-decoration:none;transition:transform .3s var(--ease)}
.tac-enlace:hover{transform:translateX(4px)}
.tac-enlace:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* tableta: el equipo arriba y las tarjetas en dos columnas */
@media (max-width:999px){
  .tn-rej{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tn-equipo{grid-column:1/3;grid-row:1;padding:0 0 52px}
  .tn-obj{max-width:560px}
  .tac-a{grid-column:1;grid-row:2}.tac-b{grid-column:2;grid-row:2}
  .tac-c3{grid-column:1;grid-row:3}.tac-d{grid-column:2;grid-row:3}
  .tac-e{grid-column:1/3;grid-row:4}
}

/* teléfono: una columna, el dibujo al lado del dato */
@media (max-width:640px){
  .tn{padding:64px 0}
  .tn-agua{width:96px;top:40px;right:18px}
  .tn-cab{margin-bottom:24px;padding-right:70px}
  .tn-cab h2{font-size:31px}
  .tn-cab p{font-size:17px}
  .tn-rej{grid-template-columns:minmax(0,1fr);gap:12px}
  .tn-rej>li{grid-column:1!important;grid-row:auto!important}
  .tn-equipo{padding:0 0 16px}
  .tn-pant{border-width:6px}
  .tn-tel{display:none}
  .tac-c{min-height:0;padding:20px 20px 22px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"dato ilus" "et ilus" "p p";column-gap:12px;row-gap:0;align-items:center}
  .tac-txt{display:contents}
  .tac-dato,.tac-e .tac-dato{grid-area:dato;font-size:32px}
  .tac-et{grid-area:et;margin-top:8px}
  .tac-p{grid-area:p;margin-top:10px;max-width:none}
  .tac-ilus{grid-area:ilus}
  .ta-anillo{width:86px}
  .tac-enlace{display:flex;justify-content:center;margin-top:22px}
}
@media (prefers-reduced-motion:reduce){
  .tn *,.tac-c{transition:none!important;animation:none!important}
}

/* ---- «Todo lo que necesitas»: colores de los cuadros (3-nov-2026, Ronaldo: «no me gustan los colores de los cuadros»).
   Tres juegos para elegir, los cinco cuadros iguales entre sí: .cuadros-vidrio · .cuadros-blancos · .cuadros-noche ---- */
/* 1 · Vidrio, como los avisos de la B */
.tn.cuadros-vidrio .tac-c{background:linear-gradient(145deg,rgba(40,44,220,.62),rgba(2,0,90,.72));border:1px solid rgba(255,255,255,.26);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 24px 40px -22px rgba(1,0,40,.7)}
.tn.cuadros-vidrio .tac-c.on,.tn.cuadros-vidrio .tac-d.on{background:linear-gradient(145deg,rgba(60,66,255,.72),rgba(4,0,120,.82));border-color:rgba(255,228,0,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 2px rgba(255,228,0,.45),0 30px 50px -20px rgba(1,0,40,.85)}
/* 2 · Blancos */
.tn.cuadros-blancos .tac-c{background:#fff;color:var(--tinta);box-shadow:0 30px 60px -38px rgba(2,0,50,.9)}
.tn.cuadros-blancos .tac-c.on,.tn.cuadros-blancos .tac-d.on{box-shadow:0 0 0 3px var(--amarillo),0 44px 70px -36px rgba(2,0,50,.95)}
/* 3 · Azul noche */
.tn.cuadros-noche .tac-c{background:linear-gradient(160deg,#16149A 0%,var(--noche) 55%,#04034A 100%);border:1px solid rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 60px -38px rgba(2,0,50,.9)}
.tn.cuadros-noche .tac-c.on,.tn.cuadros-noche .tac-d.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 3px var(--amarillo),0 44px 70px -36px rgba(2,0,50,.95)}

/* textos: claros en vidrio y noche; oscuros en blancos */
.tn.cuadros-vidrio .tac-c .tac-dato,.tn.cuadros-noche .tac-c .tac-dato{color:#fff}
.tn.cuadros-vidrio .tac-c .tac-et,.tn.cuadros-noche .tac-c .tac-et{color:var(--amarillo)}
.tn.cuadros-vidrio .tac-c .tac-p,.tn.cuadros-noche .tac-c .tac-p{color:rgba(255,255,255,.9)}
.tn.cuadros-blancos .tac-c .tac-dato{color:var(--azul)}
.tn.cuadros-blancos .tac-c .tac-et{color:var(--tinta)}
.tn.cuadros-blancos .tac-c .tac-p{color:#475569}

/* dibujos sobre cuadros oscuros (vidrio y noche): chat y anillo en claro */
.tn.cuadros-vidrio .ta-ab,.tn.cuadros-noche .ta-ab{stroke:rgba(255,255,255,.18)}
.tn.cuadros-vidrio .ta-al,.tn.cuadros-noche .ta-al{stroke:var(--amarillo)}
.tn.cuadros-vidrio .ta-anillo img,.tn.cuadros-noche .ta-anillo img{filter:brightness(0) invert(1)}
/* dibujos sobre cuadros blancos: reproductor y barras en el azul de la marca */

/* ---- 4 · Blanco con el liquid glass del Campus (3-nov-2026, lo eligió Ronaldo): receta aprobada del Campus (.pv-vidrio):
   velo blanco en degradado con brillo arriba a la izquierda, filo de luz de 2 px con reflejo azul abajo a la derecha,
   grosor azulado abajo, grano mate al 7 % y sombra azulada. Sin backdrop-filter (así lo aprobó y no pesa).
   Sobre el azul de la sección va casi opaco arriba y algo traslúcido abajo, para que se lea blanco y se note el vidrio. ---- */
.tn.cuadros-cristal .tac-c{isolation:isolate;border:1px solid rgba(255,255,255,.7);color:var(--tinta);
  background:radial-gradient(140% 100% at 0% 0%,rgba(255,255,255,.96),rgba(255,255,255,0) 55%),linear-gradient(155deg,rgba(255,255,255,.97) 0%,rgba(246,248,255,.92) 52%,rgba(226,231,255,.84) 100%);
  box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px rgba(255,255,255,.4),inset 0 0 30px rgba(255,255,255,.3),inset 0 -14px 24px -16px rgba(4,0,188,.24),0 2px 8px rgba(4,0,188,.07),0 30px 60px -30px rgba(2,0,60,.7)}
.tn.cuadros-cristal .tac-c::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:url(marca/textura-mate.png);opacity:.07;mix-blend-mode:soft-light}
.tn.cuadros-cristal .tac-c::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:2px;pointer-events:none;background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.6) 14%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 62%,rgba(0,18,253,.22) 84%,rgba(0,18,253,.42) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* encendida: se levanta, el vidrio se vuelve blanco pleno y aparece el borde amarillo de la B */
.tn.cuadros-cristal .tac-c.on,.tn.cuadros-cristal .tac-d.on{background:radial-gradient(140% 100% at 0% 0%,#fff,rgba(255,255,255,0) 55%),linear-gradient(155deg,#fff 0%,#F8F9FF 60%,#EEF1FF 100%);box-shadow:inset 0 1px 1px #fff,inset 0 -14px 24px -16px rgba(4,0,188,.24),0 0 0 3px var(--amarillo),0 44px 70px -36px rgba(2,0,60,.85)}
.tn.cuadros-cristal .tac-c:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--electrico)}
/* textos y dibujos como en los cuadros blancos */
.tn.cuadros-cristal .tac-c .tac-dato{color:var(--azul)}
.tn.cuadros-cristal .tac-c .tac-et{color:var(--tinta)}
.tn.cuadros-cristal .tac-c .tac-p{color:#475569}
.tn.cuadros-cristal .ta-ab{stroke:rgba(4,0,188,.1)}

/* ---- «Todo lo que necesitas»: dibujos con piezas reales del Campus en vez de íconos genéricos (3-nov-2026, pedido de Ronaldo) ---- */
/* Clases cortas: la tarjeta «Sigue donde lo dejaste» del Campus; la barra avanza y «Reanudar clase» se presiona */
.ta-sigue,.ta-evento{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;padding:13px 14px;border-radius:16px;background:linear-gradient(115deg,#fff 0%,#F6F7FF 62%,#E9ECFF 100%);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(4,0,188,.07),0 16px 30px -20px rgba(2,0,60,.5);transform-origin:left top;transition:transform .6s var(--ease)}
.ta-chip{position:relative;overflow:hidden;padding:5px 10px;border-radius:999px;background:#ECEBFA;color:var(--azul);font:600 12px/1 var(--f-tit)}
.ta-chip::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.95) 50%,transparent 70%);transform:translateX(-120%)}
.ta-clase,.ta-ev-tit{font:600 14px/1.25 var(--f-tit);letter-spacing:-.01em;color:var(--tinta)}
.ta-barra{position:relative;width:100%;height:6px;border-radius:6px;background:#DCDEF2;overflow:hidden}
.ta-barra i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--azul) 0%,#2B3CFF 72%,var(--amarillo) 100%);transform-origin:left center;transform:scaleX(.46)}
.ta-pie{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ta-boton{position:relative;display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;background:linear-gradient(180deg,#0E0BDB,var(--azul));color:#fff;font:600 12px/1 var(--f-tit);box-shadow:0 10px 20px -10px rgba(4,0,188,.8)}
.ta-boton svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linejoin:round}
.ta-boton::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid rgba(4,0,188,.45);opacity:0}
.ta-pct{font:500 12px/1 var(--f-txt);color:#475569}
.ta-js .tac-a:not(.ve) .ta-barra i{transform:scaleX(0)}
.tac-a.ve .ta-barra i{transition:transform 1.3s cubic-bezier(.22,1,.36,1) .3s}
.tac-a.ve .ta-chip::after{animation:ta-reflejo 1.1s ease .1s 1}
.tac-a.ve .ta-boton{animation:ta-presiona .45s ease 1.6s 1}
.tac-a.ve .ta-boton::after{animation:ta-onda .8s ease-out 1.65s 1}
@keyframes ta-reflejo{to{transform:translateX(120%)}}
@keyframes ta-presiona{0%,100%{transform:none}45%{transform:scale(.92)}}
@keyframes ta-onda{0%{opacity:.8;transform:scale(.85)}100%{opacity:0;transform:scale(1.35)}}

/* En vivo: el evento del calendario del Campus; la hora pasa por varias zonas horarias y se confirma la asistencia */
.ta-vivo-et{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 var(--f-tit);color:#D61F4C}
.ta-vivo-et i{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:#E11D48}
.ta-vivo-et i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#E11D48;opacity:0}
.ta-horas{position:relative;display:block;width:100%;height:27px;overflow:hidden}
.ta-hora{position:absolute;left:0;top:0;display:flex;align-items:baseline;gap:8px;white-space:nowrap;opacity:0;transform:translateY(100%)}
.ta-hora b{font:700 21px/1.15 var(--f-tit);letter-spacing:-.02em;color:var(--azul)}
.ta-hora small{font:500 12px/1 var(--f-txt);color:#475569}
.ta-h0{opacity:1;transform:none}
.ta-confirma{display:grid;width:100%;border-radius:10px;overflow:hidden;background:linear-gradient(180deg,#0E0BDB,var(--azul));color:#fff;font:600 12px/1 var(--f-tit);box-shadow:0 10px 20px -12px rgba(4,0,188,.8)}
.ta-confirma>span{grid-area:1/1;display:grid;place-items:center;height:32px}
.ta-cf-b{opacity:0;transform:translateY(100%);background:#0E9F6E}
.tac-b.ve .ta-vivo-et i::after{animation:ta-latido-vivo 1.2s ease-out 0s 3}
.tac-b.ve .ta-h0{animation:ta-hora0 2.8s ease .15s 1 both}
.tac-b.ve .ta-h1{animation:ta-hora 2.8s ease .75s 1 both}
.tac-b.ve .ta-h2{animation:ta-hora 2.8s ease 1.35s 1 both}
.tac-b.ve .ta-h3{animation:ta-hora 2.8s ease 1.95s 1 both}
.tac-b.ve .ta-cf-a{animation:ta-sale .45s ease 3.05s 1 both}
.tac-b.ve .ta-cf-b{animation:ta-entra .45s ease 3.1s 1 both}
@keyframes ta-latido-vivo{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
@keyframes ta-hora0{0%,20%{opacity:1;transform:none}26%{opacity:0;transform:translateY(-100%)}90%{opacity:0;transform:translateY(100%)}100%{opacity:1;transform:none}}
@keyframes ta-hora{0%{opacity:0;transform:translateY(100%)}6%,20%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-100%)}}
@keyframes ta-sale{to{opacity:0;transform:translateY(-100%)}}
@keyframes ta-entra{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}

/* 9 áreas: la ruta de 9 puntos de «Mis programas»; se completan hasta el área 5 y el avance sube a 46 % */
@property --pct{syntax:'<integer>';inherits:false;initial-value:46}
.ta-ruta{display:flex;flex-direction:column;gap:10px;width:100%;transform-origin:left top;transition:transform .6s var(--ease)}
.ta-ruta-et{font:700 12px/1 var(--f-tit);letter-spacing:.1em;text-transform:uppercase;color:#475569}
.ta-ruta-fila{display:flex;align-items:center;gap:12px;width:100%}
.ta-nodos{position:relative;flex:1;display:flex;align-items:center;justify-content:space-between;min-width:0}
.ta-nodos::before{content:"";position:absolute;left:8px;right:8px;top:50%;border-top:2px dotted #B9BEE0;transform:translateY(-50%)}
.ta-linea{position:absolute;left:8px;top:50%;height:3px;width:calc(50% - 8px);margin-top:-1.5px;border-radius:3px;background:var(--azul);transform-origin:left center}
.ta-n{position:relative;z-index:1;flex:none;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #D0D4EE}
.ta-n.ok{background:var(--azul);box-shadow:none}
.ta-n.ok::after{content:"";position:absolute;left:5.5px;top:3.5px;width:4px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ta-n.ya{background:var(--amarillo);box-shadow:0 0 0 4px rgba(255,228,0,.32)}
.ta-n.ya::after{content:"";position:absolute;left:6px;top:4.5px;border-left:6px solid var(--noche);border-top:4px solid transparent;border-bottom:4px solid transparent}
.ta-ruta-pct{flex:none;font:700 26px/1 var(--f-tit);letter-spacing:-.02em;color:var(--azul);counter-reset:p var(--pct)}
.ta-ruta-pct::after{content:counter(p) "%"}
.ta-ruta-p{font:500 13px/1.3 var(--f-txt);color:#475569}
.ta-ruta-p b{font-weight:600;color:var(--azul)}
.ta-js .tac-c3:not(.ve) .ta-linea{transform:scaleX(0)}
.ta-js .tac-c3:not(.ve) .ta-n.ok,.ta-js .tac-c3:not(.ve) .ta-n.ya{background:#fff;box-shadow:inset 0 0 0 2px #D0D4EE;scale:.8}
.ta-js .tac-c3:not(.ve) .ta-n.ok::after,.ta-js .tac-c3:not(.ve) .ta-n.ya::after{opacity:0}
.ta-js .tac-c3:not(.ve) .ta-ruta-pct{--pct:0}
.tac-c3.ve .ta-linea{transition:transform 1.1s cubic-bezier(.22,1,.36,1) .2s}
.tac-c3.ve .ta-n{transition:background-color .3s ease calc(.25s + var(--k) * .2s),box-shadow .4s ease calc(.25s + var(--k) * .2s),scale .45s cubic-bezier(.34,1.56,.64,1) calc(.25s + var(--k) * .2s)}
.tac-c3.ve .ta-n::after{transition:opacity .25s ease calc(.35s + var(--k) * .2s)}
.tac-c3.ve .ta-n.ya{animation:ta-latido-area 1.2s ease 1.35s 2}
.tac-c3.ve .ta-ruta-pct{transition:--pct 1.2s cubic-bezier(.22,1,.36,1) .25s}
@keyframes ta-latido-area{0%,100%{box-shadow:0 0 0 4px rgba(255,228,0,.32)}50%{box-shadow:0 0 0 10px rgba(255,228,0,0)}}

/* Diploma: el diploma real entra girando, lo cruza un brillo y en PC se inclina siguiendo el ratón */
.ta-dip{position:absolute;right:-22px;top:-18px;width:54%;max-width:184px;rotate:-7deg;border-radius:6px;overflow:hidden;box-shadow:0 26px 40px -20px rgba(2,0,60,.45);transform-origin:top right;transform:perspective(700px) rotateX(var(--dx,0deg)) rotateY(var(--dy,0deg));transition:transform .45s var(--ease),scale .5s var(--ease)}
.ta-dip img{display:block;width:100%;height:auto}
.ta-js .tac-d:not(.ve) .ta-dip{translate:0 -36px;scale:.9;rotate:-16deg}
.tac-d.ve .ta-dip{transition:translate .9s cubic-bezier(.22,1,.36,1) .1s,scale .9s cubic-bezier(.22,1,.36,1) .1s,rotate .9s cubic-bezier(.22,1,.36,1) .1s,transform .45s var(--ease)}
.tac-d.on .ta-dip{scale:1.06}

/* el dibujo de la tarjeta encendida crece un poco (nunca se achica) */
.tac-c.on .ta-sigue,.tac-c.on .ta-evento,.tac-c.on .ta-ruta{transform:scale(1.03)}
.tac-c.on .ta-anillo{transform:scale(1.05)}

@media (max-width:640px){
  .tac-a,.tac-b,.tac-c3{grid-template-columns:minmax(0,1fr);grid-template-areas:"ilus" "dato" "et" "p"}
  .tac-a .tac-ilus,.tac-b .tac-ilus,.tac-c3 .tac-ilus{margin-bottom:14px}
  .ta-clase,.ta-ev-tit{display:none}
  .ta-dip{width:108px;right:-12px;top:-22px}
}
@media (prefers-reduced-motion:reduce){
  .tn .ta-h0{opacity:1;transform:none}
}

/* ============================================================
   Auditoría de animaciones (4-nov-2026): más fluido y arreglos
   ============================================================ */
/* 1. Lo que está fuera de pantalla no se anima: las animaciones infinitas se pausan y siguen donde iban al volver */
.fuera,.fuera *,.fuera *::before,.fuera *::after{animation-play-state:paused!important}

/* 2. Rol que cambia: más tiempo para leerlo y entrada suave (desde el segundo cambio; el primero no se oculta al cargar) */
.rol-anima .rol-lista span.activo,.rol-anima span.activo{animation:rolEntra .55s cubic-bezier(.22,1,.36,1)}
@keyframes rolEntra{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}

/* 3. Vista previa de Programas: sin cruce fantasma (la nueva entra encima y la anterior se apaga después) */
.pv{transition:opacity .2s linear .25s,transform .6s var(--ease)}
.pv.activa{z-index:2;transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .6s var(--ease)}

/* 4. Preguntas: la respuesta aparece suave al abrir (funciona también en iPhone) */
.faq-lista details[open]>:not(summary),.pyb-lista details[open]>:not(summary){animation:abreRespuesta .3s cubic-bezier(.22,1,.36,1)}
@keyframes abreRespuesta{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* 5. Ruta: la luz de fondo sin filtro de desenfoque (los degradados ya son suaves) */
.ru-1>a::before,.ru-2>a::before,.ru-3>a::before{filter:none}

/* 6. «Todo lo que necesitas»: más liviano */
/* cada tarjeta en su propia capa; el borde amarillo de la encendida es una capa que solo se enciende (no se animan sombras) */
.tn .tac-c{will-change:transform;transition:translate .5s var(--ease)}
.tac-aro{position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 3px var(--amarillo);opacity:0;transition:opacity .35s ease}
.tac-c.on .tac-aro{opacity:1}
.tn .tac-c.on,.tn .tac-d.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 60px -38px rgba(2,0,50,.9)}
.tn.cuadros-cristal .tac-c.on,.tn.cuadros-cristal .tac-d.on{box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px rgba(255,255,255,.4),inset 0 0 30px rgba(255,255,255,.3),inset 0 -14px 24px -16px rgba(4,0,188,.24),0 2px 8px rgba(4,0,188,.07),0 30px 60px -30px rgba(2,0,60,.7)}
/* pantallas de la laptop sin fantasma */
.tn-pant>*{transition:opacity .2s linear .3s,transform 1.2s var(--ease)}
.tn-pant>.on{z-index:2;transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .9s var(--ease)}
/* zonas horarias más lentas (cerca de 1 s cada una) y la confirmación después; esa tarjeta se queda 5,2 s encendida */
.tac-b.ve .ta-h0{animation:ta-hora0 3.6s ease .1s 1 both}
.tac-b.ve .ta-h1{animation:ta-hora 3.6s ease 1s 1 both}
.tac-b.ve .ta-h2{animation:ta-hora 3.6s ease 1.9s 1 both}
.tac-b.ve .ta-h3{animation:ta-hora 3.6s ease 2.8s 1 both}
.tac-b.ve .ta-cf-a{animation:ta-sale .45s ease 3.75s 1 both}
.tac-b.ve .ta-cf-b{animation:ta-entra .45s ease 3.8s 1 both}
@keyframes ta-hora0{0%,20%{opacity:1;transform:none}25%{opacity:0;transform:translateY(-100%)}95%{opacity:0;transform:translateY(100%)}100%{opacity:1;transform:none}}
@keyframes ta-hora{0%{opacity:0;transform:translateY(100%)}5%,20%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-100%)}}
/* la ruta de 9 áreas: al volver a encenderse late, no se vacía */
.tac-c3.pulso .ta-n.ya{animation:ta-latido-area 1.1s ease 0s 2}
.tac-c3.pulso .ta-linea{animation:ta-brilla-linea .9s ease 1}
@keyframes ta-brilla-linea{50%{filter:brightness(1.7)}}
/* teléfono: ninguna tarjeta queda marcada fija */
@media (max-width:640px){.tn .tac-c.on{translate:none}.tn .tac-c.on .tac-aro{opacity:0}}

/* 7. Especialidades: abrir una columna cuesta menos (más corto, sin desplegar filas cuadro a cuadro) */
.esf-herr .ef{contain:layout paint;transition:flex-grow .55s cubic-bezier(.22,1,.36,1),--t .5s cubic-bezier(.22,1,.36,1)}
.esf-herr.fondo-claro .ef{transition:flex-grow .55s cubic-bezier(.22,1,.36,1),--t .5s cubic-bezier(.22,1,.36,1),background-color .3s}
@media (min-width:901px){
  .esf-herr .ef-mas{transition:opacity .3s ease .12s}
  .esf-herr .ef-mas-in{transform:translateY(8px);transition:transform .45s var(--ease) .1s}
  .esf-herr .ef.activa .ef-mas-in{transform:none}
}
/* las historias se cuentan dos veces y terminan: nada se mueve para siempre */
.esf-herr .ef.activa.en .ef-b,.esf-herr .ef.activa.en .ef-corazon,.esf-herr .ef.activa.en .ef-insignia,.esf-herr .ef.activa.en .ef-parpado,.esf-herr .ef.activa.en .ef-piensa,.esf-herr .ef.activa.en .ef-destello{animation-iteration-count:2}

@media (prefers-reduced-motion:reduce){
  .esf-herr .ef,.esf-herr.fondo-claro .ef,.esf-herr .ef-mas,.esf-herr .ef-mas-in,.tn .tac-c,.tac-aro,.tn-pant>*,.pv{transition:none!important}
  .esf-herr .ef-mas-in{transform:none!important}
  .rol-anima span.activo,.faq-lista details[open]>:not(summary),.pyb-lista details[open]>:not(summary),.tac-c3.pulso .ta-n.ya,.tac-c3.pulso .ta-linea{animation:none!important}
}
/* 6b. «Todo lo que necesitas»: lo que más pesaba al bajar (medido el 4-nov con el procesador frenado ×4):
   el ruido SVG del fondo (23 → 34 fps al quitarlo), la mezcla soft-light del grano y la capa propia de cada tarjeta */
.tn::before{background-image:url(marca/textura-mate.png);background-size:80px 80px;opacity:.06}
.tn.cuadros-cristal .tac-c::before{mix-blend-mode:normal;opacity:.05}
.tn .tac-c{will-change:auto}
.tn.cuadros-cristal .tac-c,.tn.cuadros-cristal .tac-c.on,.tn.cuadros-cristal .tac-d.on{box-shadow:inset 0 1px 1px #fff,inset 0 -14px 24px -16px rgba(4,0,188,.24),0 30px 60px -30px rgba(2,0,60,.7)}
/* 6c. el grano va dentro del fondo de la sección (ya atenuado), no como una capa encima de todo */
.tn{background:url(marca/grano-suave.png) 0 0/80px 80px,var(--campo-azul)}
.tn::before{display:none}

/* 9. Metas en el teléfono con la MISMA animación que en PC (4-nov-2026, pedido de Ronaldo):
   tramo fijo corto; al bajar, las burbujas aparecen una tras otra y se acomodan alrededor del título; después flotan.
   Solo mueve y escala (liviano). Con «reducir movimiento» queda la lista quieta de siempre. */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .metas-p{height:150svh!important}
  .metas-pin{position:sticky!important;top:72px;height:calc(100svh - 72px)!important;display:grid!important;place-items:center;align-content:center!important;padding:0 var(--margen)!important;overflow:hidden}
  .metas-p .metas-in{order:0;width:100%;max-width:340px;margin:0!important}
  .metas-pin .mb{position:absolute!important;display:block!important;width:auto!important;left:calc(var(--xm) * 1%);top:calc(var(--ym) * 1%);
    transform:translate(calc((var(--xm) - 50) * .5vw * (1 - var(--q))),calc((var(--ym) - 48) * .4svh * (1 - var(--q)))) scale(calc(.7 + .3 * var(--q)))!important;opacity:calc(var(--q) * 1.3)!important}
  .metas-pin .mb>span{padding:8px 11px!important;font-size:12.5px!important;animation:mbFlota 6.5s ease-in-out infinite!important;animation-delay:calc(var(--k) * -.7s)!important}
}

/* ---- «Todo lo que necesitas» rediseñado (4-nov-2026). El Sr. Johnson: «las tarjetas compiten entre sí».
   Un solo protagonista (el Campus real); a la izquierda una lista tranquila que se enciende de a uno,
   con barra amarilla que avanza; sobre la laptop solo la pieza del punto encendido. ---- */
.tn2-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,5vw,88px);align-items:center}
.tn2 .tn-cab{margin-bottom:clamp(22px,2.6vw,34px)}
.tn2-lista{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.16)}
.tn2-lista li{border-bottom:1px solid rgba(255,255,255,.16)}
.tn2-it{all:unset;box-sizing:border-box;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:baseline;width:100%;padding:18px 2px 18px 0;cursor:pointer;color:#fff}
.tn2-et{font:600 19px/1.3 var(--f-tit);letter-spacing:-.01em;color:rgba(255,255,255,.6);transition:color .35s ease}
.tn2-dato{font:600 15px/1 var(--f-tit);color:rgba(255,255,255,.45);white-space:nowrap;transition:color .35s ease}
.tn2-p{grid-column:1/-1;display:grid;grid-template-rows:0fr;padding-top:0;transition:grid-template-rows .45s var(--ease),padding-top .45s var(--ease)}
.tn2-p>span{overflow:hidden;min-height:0;font:500 16px/1.5 var(--f-txt);color:rgba(255,255,255,.84);max-width:40ch}
.tn2-it:hover .tn2-et,.tn2-it.on .tn2-et{color:#fff}
.tn2-it.on .tn2-dato{color:var(--amarillo)}
.tn2-it.on .tn2-p{grid-template-rows:1fr;padding-top:8px}
.tn2-barra{position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--amarillo);transform:scaleX(0);transform-origin:left center}
.tn2-it.on .tn2-barra{animation:tn2-avanza var(--ms,3800ms) linear forwards}
.tn2.manual .tn2-it.on .tn2-barra,.tn2.quieto .tn2-it.on .tn2-barra{animation:none;transform:scaleX(1)}
@keyframes tn2-avanza{to{transform:scaleX(1)}}
.tn2-it:focus-visible{outline:3px solid var(--amarillo);outline-offset:4px;border-radius:6px}
.tn2 .tac-enlace{margin-top:30px}

.tn2-der{position:relative;padding:12px 0 64px}
.tn2 .tn-obj{max-width:none;margin:0 auto}
.tn2-piezas{position:absolute;z-index:4;left:-8%;bottom:-12%;width:min(300px,46%);display:grid;align-items:end}
.tn2 .tn2-pz{grid-area:1/1;position:relative;padding:16px 18px;border-radius:20px;color:var(--tinta);background:linear-gradient(155deg,#fff 0%,#F8F9FF 60%,#EEF1FF 100%);box-shadow:inset 0 1px 1px #fff,0 0 0 1px rgba(255,255,255,.7),0 40px 60px -28px rgba(1,0,40,.85);opacity:0;translate:0 14px;transition:opacity .3s ease,translate .5s var(--ease);pointer-events:none}
.tn2 .tn2-pz.on{opacity:1;translate:0 0}
.tn2 .tn2-vacia{visibility:hidden;padding:0;box-shadow:none;background:none}
.tn2-pz .ta-sigue,.tn2-pz .ta-evento{padding:0;background:none;box-shadow:none;transform:none}
.tn2-pz .ta-clase,.tn2-pz .ta-ev-tit{display:block}

@media (max-width:900px){
  .tn2-in{grid-template-columns:minmax(0,1fr);gap:0}
  .tn2-izq{display:contents}
  .tn2 .tn-cab{order:0}
  .tn2-der{order:1;padding:0 0 8px}
  .tn2-lista{order:2;margin-top:26px}
  .tn2 .tac-enlace{order:3}
  .tn2-piezas{position:relative;left:auto;bottom:auto;width:100%;max-width:420px;margin:22px auto 0}
  .tn2 .tn-obj{max-width:560px}
}
@media (max-width:640px){
  .tn2-et{font-size:18px}
  .tn2-it{padding:16px 0}
  .tn2 .tac-enlace{display:flex;justify-content:center;margin-top:24px}
}
@media (prefers-reduced-motion:reduce){
  .tn2-it.on .tn2-barra{transform:scaleX(1)}
  .tn2 .tn2-pz{translate:none}
}

/* ---- Programas: el cuadro de Especialidades se parece a la sección de más abajo (4-nov-2026, pedido de Ronaldo).
   Fondo claro con puntos, logos oficiales en mosaicos blancos que aparecen uno a uno y cada especialidad
   se levanta por turnos, como la columna que se abre. La sombra va en una capa que solo cambia de opacidad. ---- */
.pv-esp{background:#F4F5FA radial-gradient(rgba(4,0,188,.13) 1px,transparent 1.5px) 0 0/16px 16px;color:var(--tinta);gap:12px}
.pv-esp small{color:var(--azul);margin-bottom:4px}
.pv-esp .pv-esp-fila{position:relative;isolation:isolate;display:flex;align-items:center;gap:18px;margin:0;padding:14px 18px 14px 14px;border-radius:20px;background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(4,0,188,.06)}
.pv-esp .pv-esp-fila::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#fff;box-shadow:0 0 0 1px rgba(4,0,188,.07),0 24px 40px -24px rgba(2,0,60,.5);opacity:0}
.pv-esp .pv-esp-fila>span{margin-top:0}
.pv-esp .pv-esp-logos{display:flex;flex:none}
.pv-esp-logos i{display:grid;place-items:center;width:46px;height:46px;margin-left:-8px;border-radius:13px;background:#fff;box-shadow:0 8px 18px -10px rgba(2,0,60,.35),0 0 0 1px rgba(4,0,188,.06)}
.pv-esp-logos i:first-child{margin-left:0;position:relative;z-index:3}
.pv-esp-logos i:nth-child(2){position:relative;z-index:2}
.pv-esp-logos img{display:block;width:26px;height:26px}
.pv-esp .pv-esp-txt{display:block;min-width:0;color:var(--tinta)}
.pv-esp .pv-esp-fila b{margin:0;font-size:17px;line-height:1.2;max-width:none;color:var(--tinta)}
.pv-esp .pv-esp-txt>span{display:block;margin-top:5px;font-size:13px;line-height:1.4;color:#5B6078}
.pv-esp.activa .pv-esp-fila{animation:aparecer .5s var(--ease) both calc(var(--f) * .08s)}
.pv-esp.activa .pv-esp-fila::before{animation:pvEspTurno 6.6s ease-in-out infinite calc(.9s + var(--f) * 2.2s)}
.pv-esp.activa .pv-esp-logos i{animation:pvEspLogo .5s cubic-bezier(.22,1,.36,1) both calc(.15s + var(--f) * .1s + var(--k) * .07s)}
.pv-esp.activa .pv-esp-logos img{animation:pvEspCrece 6.6s ease-in-out infinite calc(.9s + var(--f) * 2.2s)}
@keyframes pvEspLogo{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes pvEspTurno{0%,36%,100%{opacity:0}6%,30%{opacity:1}}
@keyframes pvEspCrece{0%,36%,100%{scale:1}6%,30%{scale:1.14}}
@media (prefers-reduced-motion:reduce){
  .pv-esp.activa .pv-esp-fila,.pv-esp.activa .pv-esp-fila::before,.pv-esp.activa .pv-esp-logos i,.pv-esp.activa .pv-esp-logos img{animation:none}
}
.pv-esp{padding:28px 30px;gap:10px}
.pv-esp .pv-esp-fila{padding:12px 16px 12px 12px;gap:16px}
.pv-esp .pv-esp-fila b{font-size:16px}
.pv-esp .pv-esp-txt>span{font-size:12.5px;margin-top:4px}
.pv-esp-logos i{width:42px;height:42px;border-radius:12px}
.pv-esp-logos img{width:24px;height:24px}

/* Nosotros: título de sección que dice el tema encima de la frase de marca (copy SEO, 4-nov-2026) */
.sobre-tit{margin:0 0 16px;font:600 15px/1.3 var(--f-tit);letter-spacing:.02em;color:var(--azul)}
.sobre-tit+.declaracion{margin:0;font-size:clamp(21px,1.9vw,27px);line-height:1.3;max-width:34ch}

/* ---- Nosotros completo (4-nov-2026): cifras, por qué existimos, misión/método/comunidad, principios y equipo ---- */
.nos-cifras{padding:0 0 clamp(56px,6vw,88px)}
.nos-cifras-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.nos-cifras-lista li{padding:26px 24px;border-radius:22px;background:var(--azul);color:#fff}
.nos-cifras-lista li:nth-child(2){background:var(--noche)}
.nos-cifras-lista li:nth-child(3){background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 1px var(--linea)}
.nos-cifras-lista li:nth-child(4){background:var(--amarillo);color:var(--noche)}
.nos-cifras-lista b{display:block;font:600 clamp(30px,3vw,44px)/1 var(--f-tit);letter-spacing:-.035em}
.nos-cifras-lista li:nth-child(3) b{color:var(--azul)}
.nos-cifras-lista span{display:block;margin-top:12px;font:500 15px/1.45 var(--f-txt);opacity:.9}
.nos-porque{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start}
.nos-porque h2{margin:0;font:600 clamp(30px,3.4vw,48px)/1.05 var(--f-tit);letter-spacing:-.035em;max-width:14ch}
.nos-pilares{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.nos-pilares li{padding:28px;border-radius:22px;background:var(--suave)}
.nos-pilares h3,.nos-principios h3,.nos-equipo h3{margin:0;font:600 19px/1.25 var(--f-tit);letter-spacing:-.015em;color:var(--tinta)}
.nos-pilares p,.nos-principios p,.nos-equipo p{margin:10px 0 0;font:500 15.5px/1.55 var(--f-txt);color:#4A4F6A}
.nos-principios{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--linea)}
.nos-principios li{padding:28px 28px 30px 0;border-bottom:1px solid var(--linea)}
.nos-n{display:block;margin-bottom:14px;font:600 14px/1 var(--f-tit);color:var(--azul)}
.nos-equipo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.nos-equipo li{display:flex;gap:18px;align-items:flex-start;padding:26px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--linea)}
.nos-ini{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--azul);color:#fff;font:600 18px/1 var(--f-tit)}
.nos-ini-eq{background:var(--amarillo);color:var(--noche);font-size:24px}
.nos-equipo .nos-rol{margin-top:4px;font:600 14px/1.3 var(--f-tit);color:var(--azul)}
@media (max-width:900px){
  .nos-cifras-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nos-porque{grid-template-columns:minmax(0,1fr);gap:18px}
  .nos-pilares,.nos-equipo{grid-template-columns:minmax(0,1fr)}
  .nos-principios{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .nos-cifras-lista{gap:10px}
  .nos-cifras-lista li{padding:20px 18px}
  .nos-principios{grid-template-columns:minmax(0,1fr)}
  .nos-principios li{padding:22px 0}
}

/* ---- Diagnóstico con capturas reales de la Plataforma VIP (4-nov-2026, pedido de Ronaldo) ---- */
.ru-foto-diag{background:#F3F4FA}
.ru-foto-diag img{object-fit:cover;object-position:0 6%}
.pv-diag .pv-diag-img{margin:18px 0 0;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--linea),0 24px 40px -26px rgba(2,0,60,.45);aspect-ratio:16/8.4}
.pv-diag .pv-diag-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:100% 22%}
.pv-diag ol{margin-top:16px}
.pv-diag.activa .pv-diag-img{animation:aparecer .55s var(--ease) both .05s}
.diag-pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:none}
.diag-pasos li{position:relative;padding:0 0 4px}
.diag-pasos figure{margin:0 0 22px;aspect-ratio:16/10.5;border-radius:16px;overflow:hidden;background:#F3F4FA;box-shadow:0 0 0 1px var(--linea),0 30px 50px -34px rgba(2,0,60,.5)}
.diag-pasos img{display:block;width:100%;height:100%;object-fit:cover;object-position:0 0}
.diag-n{display:inline-grid;place-items:center;width:34px;height:34px;margin-bottom:12px;border-radius:50%;background:var(--azul);color:#fff;font:600 15px/1 var(--f-tit)}
.diag-pasos h3{margin:0;font:600 20px/1.25 var(--f-tit);letter-spacing:-.015em;color:var(--tinta)}
.diag-pasos p{margin:8px 0 0;font:500 15.5px/1.55 var(--f-txt);color:#4A4F6A;max-width:34ch}
@media (max-width:900px){.diag-pasos{grid-template-columns:minmax(0,1fr);gap:34px}}
.ru-foto-diag img{object-position:0 0}
.pv-diag .pv-diag-img{aspect-ratio:1128/338}
.pv-diag .pv-diag-img img{object-position:0 0}

/* ---- Portada BLANCA, solo como opción del visor para el Sr. Johnson (?portada=blanca y ?portada=blanca-sola), 5-nov-2026.
   Lo publicado es la portada azul de siempre. ---- */
.portada-p.blanca{background:#fff;color:var(--tinta)}
.portada-p.blanca::before,.portada-p.blanca::after{display:none}
.portada-p.blanca h1,.portada-p.blanca h1 .palabra{color:var(--tinta)}
.portada-p.blanca .portada-bajada,.portada-p.blanca .portada-aval{color:#4A4F6A}
.portada-p.blanca .aval-chip{box-shadow:0 0 0 1px var(--linea)}
.portada-p.blanca :focus-visible{outline-color:var(--electrico)}
.portada-p.blanca .portada-velo{background:#fff;opacity:.84}
.portada-p.blanca.sin-video .portada-video,.portada-p.blanca.sin-video .portada-velo{display:none}
.portada-p.blanca .tarjeta.foto{box-shadow:0 0 0 1px rgba(16,16,26,.06),0 26px 50px -26px rgba(2,0,60,.32)}
.foto-vid{display:block;width:100%;height:100%;object-fit:cover;background:#EEF0FA}

/* Portada: los videos pasan de una tarjeta a otra con un fundido (5-nov-2026) */
.foto-rota{position:relative}
.foto-rota .foto-vid{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.foto-rota .foto-vid.on{opacity:1}

/* Portada, 2.ª vuelta (5-nov-2026, «estaba forzado»): tarjetas quietas (solo llegan y acompañan el scroll, sin flotar sin fin),
   y el video que entra aparece con un fundido largo y un leve acercamiento */
.js .flota .tarjeta.foto{animation:llegar 1.5s var(--ease) both;animation-delay:calc(.25s + var(--t) * 110ms)}
.foto-rota .foto-vid{transform:scale(1.06);transition:opacity 1.4s ease,transform 2.4s cubic-bezier(.22,1,.36,1)}
.foto-rota .foto-vid.on{transform:none}
@media (prefers-reduced-motion:reduce){.foto-rota .foto-vid{transform:none;transition:none}}

/* ---- Inicio: la barra de arriba es transparente sobre la portada y se vuelve azul noche al bajar (5-nov-2026) ---- */
:root{--alto-cab:72px}
@media (max-width:600px){:root{--alto-cab:64px}}
.cab.sobre-portada{background:transparent;transition:background-color .35s ease,box-shadow .35s ease}
.cab.sobre-portada.solida,.cab.sobre-portada.abierto{background:var(--noche);box-shadow:0 10px 30px -18px rgba(0,0,30,.6)}
.cab.sobre-portada + * .portada-p,.cab.sobre-portada ~ main .portada-p,.cab.sobre-portada ~ #contenido .portada-p{margin-top:calc(-1 * var(--alto-cab));padding-top:var(--alto-cab);min-height:100svh}
@media (max-width:1060px){.cab.sobre-portada ~ main .portada-p .flotas,.cab.sobre-portada ~ #contenido .portada-p .flotas,.cab.sobre-portada + * .portada-p .flotas{inset:var(--alto-cab) 0 0 0!important}}
/* la ronda más ágil: fundido de 1 s */
.foto-rota .foto-vid{transition:opacity 1s ease,transform 1.8s cubic-bezier(.22,1,.36,1)}
@media (min-width:1061px){.cab.sobre-portada ~ #contenido .portada-p .flotas{top:var(--alto-cab)}}

/* ---- Vuelta del 5-nov-2026: portada limpia y fila de puestos montada sobre el borde azul/blanco ---- */
:root{--pu-w:clamp(150px,13vw,210px)}
.portada-p .portada-p-in{padding-bottom:calc(var(--pu-w) * .7 + 40px)}
.puestos{position:relative;z-index:4;margin-top:calc(var(--pu-w) * -.62);padding-bottom:clamp(36px,5vw,64px);background:linear-gradient(transparent calc(var(--pu-w) * .62),#fff 0)}
.puestos-pista{overflow:hidden;padding:18px 0 6px;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.puestos-mov{display:flex;width:max-content;animation:puestosAndan 70s linear infinite}
.puestos-pista:hover .puestos-mov{animation-play-state:paused}
@keyframes puestosAndan{to{transform:translateX(-50%)}}
.puestos-fila{list-style:none;margin:0;padding:0 9px;display:flex;gap:18px}
.pu{flex:none;width:var(--pu-w);text-align:center}
.pu-vid{display:block;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:#EEF0FA;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 30px 50px -26px rgba(2,0,60,.55)}
.pu-vid video{display:block;width:100%;height:100%;object-fit:cover}
.pu b{display:block;margin-top:14px;font:600 15px/1.25 var(--f-tit);color:var(--tinta)}
.puestos-tit{margin:clamp(22px,3vw,34px) auto 0;padding:0 var(--margen);text-align:center;font:600 clamp(18px,1.6vw,22px)/1.3 var(--f-tit);letter-spacing:-.01em;color:#4A4F6A}
@media (prefers-reduced-motion:reduce){.puestos-mov{animation:none}.puestos-pista{overflow-x:auto;-webkit-mask:none;mask:none}}
@media (max-width:1060px){.cab.sobre-portada ~ #contenido .portada-p .portada-p-in{padding-top:64px!important}}
@media (max-width:640px){:root{--pu-w:150px}.puestos-fila{gap:12px}.pu b{font-size:14px}}
/* cuadros de «Elige la ruta»: diagnóstico con las 3 puertas, diploma grande sin precio y especialidades solo con logos */
.pv-diag .pv-diag-img{aspect-ratio:870/390}
.pv-cert{justify-content:center}
.pv-cert img{width:100%!important;margin:0 0 26px!important;transform:rotate(-2deg)}
.pv-logos{display:grid;place-items:center;padding:30px}
.pv-logos-red{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;width:100%}
.pv-logos-red li{display:grid;place-items:center;aspect-ratio:1;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(4,0,188,.06),0 10px 22px -14px rgba(2,0,60,.35)}
.pv-logos-red img{width:52%;height:auto}
.pv-logos.activa .pv-logos-red li{animation:pvEspLogo .5s cubic-bezier(.22,1,.36,1) both calc(var(--k) * 35ms)}
@media (prefers-reduced-motion:reduce){.pv-logos.activa .pv-logos-red li{animation:none}}
/* ruta: sin los tres puntos, el texto ocupa el espacio */
@media (min-width:1061px){.ru>a{grid-template-columns:130px minmax(0,1fr)}}
.cab.sobre-portada ~ #contenido .portada-p{min-height:calc(100svh - var(--pu-w) * .85)}
.portada-p .portada-p-in{padding-top:clamp(40px,8vh,90px)}

/* ---- Puestos: sección aparte debajo del azul (5-nov-2026, referencia de función: learnwithzero.com) ---- */
.cab.sobre-portada ~ #contenido .portada-p{min-height:100svh}
.portada-p .portada-p-in{padding-bottom:110px}
.prof{background:#fff;padding:clamp(72px,9vw,120px) 0 clamp(64px,8vw,104px);overflow:hidden}
.prof-cab{text-align:center}
.prof-cab h2{margin:0 auto;font:600 clamp(32px,4vw,56px)/1.05 var(--f-tit);letter-spacing:-.035em;color:var(--tinta);max-width:20ch}
.prof-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-top:26px}
.prof-tabs button{all:unset;cursor:pointer;padding:8px 2px;font:600 15px/1 var(--f-tit);color:#6B7090;border-bottom:2px solid transparent;transition:color .25s,border-color .25s}
.prof-tabs button:hover{color:var(--tinta)}
.prof-tabs button[aria-selected="true"]{color:var(--azul);border-color:var(--azul)}
.prof-tabs button:focus-visible{outline:3px solid var(--electrico);outline-offset:4px;border-radius:4px}
.prof-marco{position:relative;margin-top:clamp(32px,4vw,52px)}
.prof-pista{list-style:none;margin:0;padding:0 max(var(--margen),calc((100vw - 1320px) / 2 + var(--margen)));display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--margen),calc((100vw - 1320px) / 2 + var(--margen)));scrollbar-width:none;scroll-behavior:smooth}
.prof-pista::-webkit-scrollbar{display:none}
.pt{position:relative;flex:0 0 clamp(250px,24vw,340px);aspect-ratio:3/4;border-radius:26px;overflow:hidden;scroll-snap-align:start;background:#E9ECF6;box-shadow:0 30px 60px -38px rgba(2,0,60,.55)}
.pt[hidden]{display:none}
.pt-vid,.pt-vid video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.pt::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(transparent,rgba(2,0,40,.78));pointer-events:none}
.pt-pie{position:absolute;z-index:2;left:20px;right:20px;bottom:20px;color:#fff}
.pt-pie b{display:block;font:600 clamp(20px,1.7vw,24px)/1.15 var(--f-tit);letter-spacing:-.02em}
.pt-logos{display:flex;gap:8px;margin-top:12px}
.pt-logos i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 4px 12px -6px rgba(0,0,0,.5)}
.pt-logos img{width:17px;height:17px}
.prof-flechas{display:flex;justify-content:center;gap:12px;margin-top:28px}
.prof-flechas button{all:unset;cursor:pointer;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--tinta);font:600 20px/1 var(--f-tit);box-shadow:0 0 0 1px var(--linea);transition:background-color .25s,color .25s}
.prof-flechas button:hover{background:var(--azul);color:#fff}
.prof-flechas button:focus-visible{outline:3px solid var(--electrico);outline-offset:3px}
@media (max-width:640px){.pt{flex-basis:74vw;border-radius:22px}.prof-pista{gap:12px}}
.prof-pista{padding-top:6px;padding-bottom:44px;margin-bottom:-30px}
/* puestos sin flechas y pegado a «Elige la ruta» (5-nov-2026) */
.prof{padding-bottom:0}
.prof + .seccion{padding-top:clamp(28px,3.5vw,48px)}
.prof{padding-top:clamp(32px,3.2vw,52px)}

/* Barra de arriba del inicio: sigue transparente al bajar, con vidrio esmerilado para que el menú se lea (5-nov-2026) */
.cab.sobre-portada.solida{background:rgba(2,0,90,.6);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 -1px 0 rgba(255,255,255,.12)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.cab.sobre-portada.solida{background:rgba(2,0,90,.82)}}

/* ---- Etapas 1 a 3: lo que se recibe de verdad en cada una, como pieza del producto sobre un fondo suave (5-nov-2026) ---- */
.ru-foto-ui{display:grid;place-items:center;padding:22px 24px;background:radial-gradient(120% 90% at 30% 20%,#fff 0%,#EEF0FF 60%,#E2E6FF 100%)}
.ru-foto-ui img{width:100%!important;height:auto!important;max-height:100%;object-fit:contain!important;border-radius:14px;box-shadow:0 0 0 1px rgba(4,0,188,.08),0 26px 40px -24px rgba(2,0,60,.45)}
.ru-ui-2{background:radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.22) 0%,rgba(255,255,255,.08) 60%,rgba(255,255,255,.04) 100%)}
.ru-ui-3 img{border-radius:6px;transform:rotate(-3deg);max-width:88%}
.ru>a:hover .ru-foto-ui img{transform:scale(1.03)}
.ru>a:hover .ru-ui-3 img{transform:rotate(-1deg) scale(1.03)}
@media (max-width:1060px){.ru-foto-ui{padding:16px}}
/* ---- «Todo lo que necesitas»: una sola laptop más grande que se acerca a la parte del Campus de la que habla cada punto ---- */
.tn2-in{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
.tn2-der{padding-bottom:20px}
.tn2 .tn-pant>*{transform-origin:var(--ox,50%) var(--oy,50%)}
.tn2 .tn-pant>.on{animation:tnAcerca 4.6s cubic-bezier(.22,1,.36,1) .25s both}
@keyframes tnAcerca{from{transform:scale(1)}to{transform:scale(var(--zz,1.4))}}
.tn2 .tn-pant>:nth-child(1){--ox:22%;--oy:30%;--zz:1.75}
.tn2 .tn-pant>:nth-child(2){--ox:30%;--oy:35%;--zz:1.45}
.tn2 .tn-pant>:nth-child(3){--ox:12%;--oy:38%;--zz:1.8}
.tn2 .tn-pant>:nth-child(4){--zz:1.06}
.tn2 .tn-pant>:nth-child(5){--ox:20%;--oy:32%;--zz:1.5}
@media (prefers-reduced-motion:reduce){.tn2 .tn-pant>.on{animation:none}}
/* ---- «Resolvemos tus dudas»: título y WhatsApp a la izquierda, preguntas a la derecha, blog en su fila ---- */
.pyb2{padding:clamp(72px,9vw,120px) 0}
.pyb2-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:start}
.pyb2-izq{position:sticky;top:110px}
.pyb2-izq h2{margin:0;font:600 clamp(34px,3.8vw,56px)/1.02 var(--f-tit);letter-spacing:-.04em;color:var(--tinta)}
.pyb2-izq p{margin:14px 0 0;font:500 17px/1.5 var(--f-txt);color:#4A4F6A}
.pyb2-wa{display:flex;align-items:center;gap:16px;margin-top:30px;padding:18px 20px;border-radius:20px;background:#F3FBF6;box-shadow:inset 0 0 0 1px rgba(37,211,102,.28);text-decoration:none;color:var(--tinta);transition:background-color .25s,box-shadow .25s}
.pyb2-wa:hover{background:#E8F8EE;box-shadow:inset 0 0 0 1px rgba(37,211,102,.5)}
.pyb2-wa:focus-visible{outline:3px solid var(--electrico);outline-offset:3px}
.pyb2-wa-ico{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 8px 18px -10px rgba(0,60,20,.4)}
.pyb2-wa-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.pyb2-wa-txt b{font:600 17px/1.2 var(--f-tit)}
.pyb2-wa-txt small{font:500 14px/1.4 var(--f-txt);color:#4A4F6A}
.pyb2-wa-ir{margin-left:auto;font:600 20px/1 var(--f-tit);color:#128C4A}
.pyb2 .pyb-lista{margin-top:0}
.pyb2 .pyb-todas{margin-top:22px}
.pyb2-blog{margin-top:clamp(56px,7vw,88px)}
.pyb2-blog-cab{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-top:28px;border-top:1px solid var(--linea)}
.pyb2-blog-cab h3{margin:0;font:600 22px/1.2 var(--f-tit);color:var(--tinta)}
.pyb2-blog-fila{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.pb2{display:grid;grid-template-columns:160px minmax(0,1fr);gap:18px;align-items:center;padding:12px;border-radius:20px;text-decoration:none;color:var(--tinta);transition:background-color .25s}
.pb2:hover{background:var(--suave)}
.pb2-img{display:block;aspect-ratio:16/11;border-radius:14px;overflow:hidden}
.pb2-img img{width:100%;height:100%;object-fit:cover;display:block}
.pb2-txt small{display:block;font:600 13px/1 var(--f-tit);color:var(--azul)}
.pb2-txt b{display:block;margin-top:8px;font:600 18px/1.3 var(--f-tit)}
@media (max-width:900px){.pyb2-in{grid-template-columns:minmax(0,1fr)}.pyb2-izq{position:static}.pyb2-blog-fila{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.pb2{grid-template-columns:110px minmax(0,1fr);gap:14px;padding:8px}.pb2-txt b{font-size:16px}}
@media (max-width:900px){.tn2-in{grid-template-columns:minmax(0,1fr)}}

/* ---- Diagnóstico gratis (la consulta), contado con diseño, sin capturas (5-nov-2026) ---- */
.diag-res{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:10px;padding:26px 28px}
.diag-chip{align-self:flex-start;padding:6px 12px;border-radius:999px;background:var(--amarillo);color:var(--noche);font:600 13px/1 var(--f-tit)}
.diag-it{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(4,0,188,.08),0 14px 26px -20px rgba(2,0,60,.45);font:600 15px/1.25 var(--f-tit);color:var(--tinta)}
.diag-it i{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--azul);color:#fff;font:600 13px/1 var(--f-tit);font-style:normal}
.ru>a:hover .diag-res .diag-it{transform:none}
.pv-diag ol{grid-template-columns:1fr 1fr}
.pv-diag-nota{margin:18px 0 0;font:500 14px/1.4 var(--f-txt);color:#4A4F6A}
@media (max-width:1060px){.diag-res{padding:18px 16px;gap:8px}.diag-it{font-size:14px;padding:10px 12px}}
@media (max-width:1060px){.ru-foto.diag-res{height:auto;min-height:0;padding:20px 16px 18px}}

/* ---- «Todo lo que necesitas» v3 (5-nov-2026): A mosaico · B una a la vez. Recuadros de vidrio blanco sobre el azul. ---- */
.tn3 .tn-cab{margin-bottom:clamp(28px,3.4vw,44px)}
.tn3 .tn3-b{display:none}
html.todo-b .tn3 .tn3-a{display:none}
html.todo-b .tn3 .tn3-b{display:block}
.bt-dato{display:block;font:600 clamp(30px,2.6vw,42px)/1 var(--f-tit);letter-spacing:-.035em;color:var(--azul)}
.bt-et{display:block;margin-top:10px;font:600 17px/1.3 var(--f-tit);color:var(--tinta)}
.bt-txt p,.sc-txt p{margin:6px 0 0;font:500 15.5px/1.5 var(--f-txt);color:#475569;max-width:34ch}
/* A · mosaico */
.tn3-a{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:auto;gap:16px}
.bt{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:22px;padding:26px 26px 0;border-radius:26px;background:linear-gradient(155deg,#fff 0%,#F8F9FF 60%,#EEF1FF 100%);box-shadow:inset 0 1px 1px #fff,0 30px 60px -34px rgba(2,0,60,.75)}
.bt-img{margin:auto 0 0;display:block}
.bt-img img{display:block;width:100%;height:auto;border-radius:16px 16px 0 0;box-shadow:0 0 0 1px rgba(4,0,188,.08),0 -10px 30px -18px rgba(2,0,60,.35)}
.bt-clases{grid-column:1/5;grid-row:1}
.bt-vivo{grid-column:5/7;grid-row:1/3}
.bt-avance{grid-column:1/3;grid-row:2}
.bt-diploma{grid-column:3/5;grid-row:2}
.bt-acceso{grid-column:1/7;grid-row:3;flex-direction:row;align-items:center;gap:40px;padding:26px 0 0 34px}
.bt-acceso .bt-txt{flex:0 0 30%;padding-bottom:26px}
.bt-acceso .bt-img{flex:1;margin:0;align-self:flex-end}
.bt-vivo .bt-img{padding:0 2px}
.bt-vivo .bt-img img{border-radius:18px 18px 0 0}
.bt-avance .bt-img img{border-radius:14px 14px 0 0}
.bt-diploma .bt-img{padding:0 10px 22px}
.bt-diploma .bt-img img{border-radius:6px;transform:rotate(-3deg);box-shadow:0 26px 40px -22px rgba(2,0,60,.5)}
.bt .bt-img img{transition:transform .8s cubic-bezier(.22,1,.36,1)}
.bt:hover .bt-img img{transform:translateY(-6px)}
.bt-diploma:hover .bt-img img{transform:rotate(-1deg) translateY(-6px)}
/* B · una a la vez */
.sc-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.sc-tab{all:unset;cursor:pointer;position:relative;overflow:hidden;padding:12px 18px;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:rgba(255,255,255,.82);font:600 15px/1 var(--f-tit);transition:background-color .3s,color .3s}
.sc-tab:hover{color:#fff}
.sc-tab.on{background:#fff;color:var(--azul)}
.sc-tab:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}
.sc-barra{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--amarillo);transform:scaleX(0);transform-origin:left}
.sc-tab.on .sc-barra{animation:tn2-avanza 4.8s linear forwards}
.tn3-b.manual .sc-tab.on .sc-barra{animation:none;transform:scaleX(1)}
.sc-panel{display:grid;border-radius:30px;background:linear-gradient(155deg,#fff 0%,#F8F9FF 60%,#EEF1FF 100%);box-shadow:inset 0 1px 1px #fff,0 40px 80px -40px rgba(2,0,60,.8);overflow:hidden}
.sc-it{grid-area:1/1;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(30px,4vw,56px);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
.sc-it.on{opacity:1;visibility:visible;transition:opacity .5s ease}
.sc-txt .bt-dato{font-size:clamp(44px,5vw,72px)}
.sc-txt .bt-et{font-size:22px}
.sc-txt p{font-size:17px}
.sc-img{margin:0;display:grid;place-items:center;min-height:clamp(260px,30vw,430px)}
.sc-img img{display:block;max-width:100%;max-height:clamp(260px,30vw,430px);width:auto;height:auto;border-radius:18px;box-shadow:0 0 0 1px rgba(4,0,188,.08),0 40px 60px -34px rgba(2,0,60,.55);transform:translateY(14px) scale(.98);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.sc-it.on .sc-img img{transform:none}
.sc-diploma .sc-img img{border-radius:6px;transform:rotate(-3deg) translateY(14px)}
.sc-it.sc-diploma.on .sc-img img{transform:rotate(-3deg)}
@media (max-width:900px){
  .tn3-a{grid-template-columns:minmax(0,1fr)}
  .bt-clases,.bt-vivo,.bt-avance,.bt-diploma,.bt-acceso{grid-column:auto;grid-row:auto}
  .bt-acceso{flex-direction:column;align-items:stretch;gap:22px;padding:26px 26px 0}
  .bt-acceso .bt-txt{padding-bottom:0}
  .bt-vivo .bt-img{max-width:360px}
  .sc-it{grid-template-columns:minmax(0,1fr);gap:20px}
  .sc-img{min-height:0}
}
@media (prefers-reduced-motion:reduce){.sc-it,.sc-img img,.bt .bt-img img{transition:none!important}.sc-tab.on .sc-barra{animation:none;transform:scaleX(1)}}
.bt-vivo{gap:18px}
.bt-vivo .bt-img{padding:0;margin-left:-8px;margin-right:-8px}
.bt-vivo .bt-img img{width:100%}
@media (min-width:901px){.bt-vivo .bt-img{flex:1;min-height:0;position:relative;margin:0 -26px}.bt-vivo .bt-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;border-radius:0}.bt-diploma .bt-img{padding:0 40px 24px}}
@media (max-width:900px){.sc-img img{max-height:280px}}
@media (min-width:901px){.bt-vivo .bt-img{margin:0;padding-bottom:24px}.bt-vivo .bt-img img{object-fit:contain;object-position:50% 40%;border-radius:18px;box-shadow:none;filter:drop-shadow(0 24px 30px rgba(2,0,60,.28))}}

/* ---- «Todo lo que necesitas» 3.ª vuelta (5-nov-2026): vitrina con el Campus en movimiento ---- */
.tn4 .tn-cab{margin-bottom:clamp(26px,3vw,40px)}
.rc-marco{margin:0;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 60px 100px -50px rgba(1,0,40,.9)}
.rc-barra{display:flex;align-items:center;gap:7px;height:34px;padding:0 16px;background:linear-gradient(#F4F5FB,#ECEEF8);border-bottom:1px solid #E2E5F2}
.rc-barra i{width:11px;height:11px;border-radius:50%;background:#D5D8E8}
.rc-barra i:first-child{background:#FF6159}.rc-barra i:nth-child(2){background:#FFBD2E}.rc-barra i:nth-child(3){background:#28C941}
.rc-vid{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#EEF1FF}
.rc-datos{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.rc-d{all:unset;box-sizing:border-box;cursor:pointer;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;width:100%;padding:16px 18px 18px;border-radius:18px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff;transition:background-color .35s,box-shadow .35s}
.rc-d b{font:600 clamp(20px,1.8vw,26px)/1 var(--f-tit);letter-spacing:-.025em}
.rc-d span{font:500 14px/1.3 var(--f-txt);color:rgba(255,255,255,.78)}
.rc-d:hover{background:rgba(255,255,255,.14)}
.rc-d.on{background:#fff;box-shadow:0 24px 40px -26px rgba(1,0,40,.8)}
.rc-d.on b{color:var(--azul)}
.rc-d.on span{color:#475569}
.rc-d:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}
.rc-prog{position:absolute;left:0;bottom:0;height:3px;width:calc(var(--p,0) * 100%);background:var(--amarillo)}
.rc-d:not(.on) .rc-prog{width:0}
@media (max-width:760px){
  .rc-marco{border-radius:18px}
  .rc-barra{height:26px;padding:0 12px}.rc-barra i{width:8px;height:8px}
  .rc-datos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:14px calc(var(--margen) * -1) 0;padding:0 var(--margen) 4px;scrollbar-width:none}
  .rc-datos::-webkit-scrollbar{display:none}
  .rc-datos li{flex:0 0 44%;scroll-snap-align:start}
  .rc-d{padding:14px 14px 16px}
}
/* vitrina en PC: los 5 datos en columna a la izquierda y el video a la derecha, todo en una sola pantalla; el dato activo abre su frase */
.rc-d small{display:none}
@media (min-width:1001px){
  .rc-cuerpo{display:grid;grid-template-columns:minmax(250px,300px) 1fr;gap:22px;align-items:center}
  .rc-marco{grid-column:2;grid-row:1}
  .rc-datos{grid-column:1;grid-row:1;grid-template-columns:1fr;gap:10px;margin:0}
  .rc-d{padding:16px 20px 18px}
  .rc-d small{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
  .rc-d small em{overflow:hidden;font:400 14px/1.45 var(--f-txt);font-style:normal;color:#475569}
  .rc-d.on small{grid-template-rows:1fr}
  .rc-d.on small em{padding-top:4px}
}
@media (min-width:1001px) and (prefers-reduced-motion:reduce){.rc-d small{transition:none}}
/* vitrina, 2.º ajuste (5-nov-2026): títulos que se entienden solos, su frase siempre visible y un letrero sobre el video que dice qué se está viendo */
.rc-marco{position:relative}
.rc-cap{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;gap:10px;max-width:calc(100% - 36px);padding:10px 18px 10px 10px;border-radius:999px;background:rgba(2,0,90,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font:600 clamp(15px,1.3vw,19px)/1.2 var(--f-tit);box-shadow:0 18px 40px -20px rgba(1,0,40,.8)}
.rc-cap i{font:700 13px/1 var(--f-txt);font-style:normal;background:var(--amarillo);color:#02005A;border-radius:999px;padding:6px 9px}
.rc-d b{font:600 clamp(17px,1.35vw,20px)/1.2 var(--f-tit);letter-spacing:-.015em}
.rc-d span{font:400 14px/1.45 var(--f-txt)}
.rc-d small{display:none!important}
@media (min-width:1001px){.rc-cuerpo{grid-template-columns:minmax(300px,360px) 1fr}.rc-d{padding:14px 20px 16px;gap:4px}}
@media (max-width:760px){.rc-datos li{flex:0 0 78%}.rc-cap{left:10px;bottom:10px;padding:7px 12px 7px 7px;font-size:13px;gap:7px}.rc-cap i{font-size:11px;padding:4px 7px}}
@media (max-width:760px){.rc-datos{scroll-padding-inline:var(--margen)}}

/* ---- «Todo lo que necesitas», 4.ª vuelta (5-nov-2026): la R al centro sobre un mapa de noche; los 6 beneficios salen
   uno por uno con el scroll (escena fija) y una bolita amarilla viaja por su línea hasta la R ---- */
.rr{--gris:#5A6078;--pop:cubic-bezier(.34,1.5,.64,1)}
/* La sección es alta y su escena se queda fija mientras se baja: así los beneficios salen uno por uno con el scroll */
.rr{position:relative;height:300vh;background:#fff;--tx:var(--tinta);--tx2:var(--gris);--r:var(--azul);--tar:#fff;--borde:var(--linea);--hilo:#C9CFF0;--hilo-on:var(--azul);--pto:#E3E7F8;--velo:#fff;--ciu:var(--azul)}
.rr.azul{background:radial-gradient(90% 80% at 50% 30%,#1B1FD6 0%,var(--azul) 45%,var(--noche) 100%);--tx:#fff;--tx2:rgba(255,255,255,.82);--r:#fff;--tar:rgba(10,14,120,.55);--borde:rgba(255,255,255,.2);--hilo:rgba(255,255,255,.3);--hilo-on:var(--amarillo);--pto:rgba(255,255,255,.2);--velo:transparent;--ciu:var(--amarillo)}
.rr-pega{position:sticky;top:0;height:100vh;min-height:760px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:84px clamp(20px,4vw,40px) 24px}

/* mapa de fondo */
.rr-mapa{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rr-mapa .puntos path{stroke:var(--pto)}
.rr-mapa .c circle{fill:var(--ciu)}
.rr-mapa .c .ping{fill:none;stroke:var(--ciu);stroke-width:.12;transform-box:fill-box;transform-origin:center;animation:ping 3.6s ease-out infinite;opacity:0}
@keyframes ping{0%{transform:scale(1);opacity:.7}75%,100%{transform:scale(3.4);opacity:0}}
.rr-mapa .c text{font:600 .95px/1 var(--f-txt);fill:var(--tx2);opacity:.75}
.rr.azul .rr-mapa .c text{font:700 1.3px/1 var(--f-txt);fill:#fff;opacity:1;paint-order:stroke;stroke:rgba(2,0,90,.65);stroke-width:.35px}
.rr.azul .rr-mapa .c circle:not(.ping){r:.62px}
.rr.azul .rr-mapa .c .ping{stroke-width:.16}

.rr-in{position:relative;z-index:1;width:100%;max-width:1240px;margin:0 auto}
.rr-cab{position:relative;text-align:center;margin:0 auto clamp(18px,2.6vh,34px)}
.rr-cab::before{content:"";position:absolute;z-index:-1;inset:-40px -120px;background:radial-gradient(closest-side,var(--velo) 62%,transparent)}
.rr-cab h2{font:600 clamp(32px,3.4vw,48px)/1.06 var(--f-tit);letter-spacing:-.035em;margin:0 0 10px;color:var(--tx)}
.rr-cab p{margin:0;font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:var(--tx2)}

.rr-esc{position:relative;display:grid;grid-template-columns:1fr minmax(260px,340px) 1fr;gap:clamp(48px,7vw,120px);align-items:center}
.rr-hilos{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.rr-hilos path{fill:none;stroke:var(--hilo);stroke-width:1.6;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);transition:stroke-dashoffset .9s var(--ease),stroke .4s,stroke-width .4s}
.rr-hilos path.sale{stroke-dashoffset:0}
.rr-hilos path.on{stroke:var(--hilo-on);stroke-width:2.4}
.rr-hilos circle{fill:var(--hilo-on);opacity:0}

.rr-col{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(16px,2.4vh,26px)}
.rr-col.izq{align-items:flex-end}
.rr-col.izq .rr-b:nth-child(2){margin-right:clamp(28px,3.4vw,56px)}
.rr-col.der .rr-b:nth-child(2){margin-left:clamp(28px,3.4vw,56px)}

/* cada beneficio sale como una ventanita desde la R */
.rr-b{width:min(100%,290px);background:var(--tar);border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px var(--borde),0 24px 48px -30px rgba(2,0,60,.5);opacity:0;transform:translateX(var(--dx,0)) scale(.72);transform-origin:var(--ox,center);transition:opacity .45s var(--ease),transform .7s var(--pop),box-shadow .35s}
.rr-col.izq .rr-b{--dx:70px;--ox:right center}.rr-col.der .rr-b{--dx:-70px;--ox:left center}
.rr.azul .rr-b{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.rr-b.sale{opacity:1;transform:none}
.rr-b.on{box-shadow:0 0 0 2px var(--hilo-on),0 26px 50px -28px rgba(2,0,60,.6)}
.rr-img{height:clamp(64px,8.6vh,88px);background:#EEF1FF;overflow:hidden;border-bottom:1px solid var(--borde)}
.rr-img img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
.rr-img.abajo img{object-position:center bottom}
.rr-img.medio img{object-position:left 44%}
.rr-img.logos{display:flex;align-items:center;justify-content:center;gap:10px;background:#F4F6FF}
.rr-img.logos img{width:38px;height:38px;object-fit:contain;padding:8px;border-radius:50%;background:#fff;box-shadow:0 6px 14px -8px rgba(2,0,60,.4)}
.rr-t{padding:14px 18px 16px}
.rr-t small{display:block;font:700 11px/1 var(--f-txt);letter-spacing:.08em;color:var(--hilo-on);margin-bottom:8px}
.rr.azul .rr-t small{color:var(--amarillo)}
.rr-t b{display:block;font:600 17px/1.2 var(--f-tit);letter-spacing:-.02em;color:var(--tx);margin-bottom:4px}
.rr-t span{display:block;font-size:13.5px;line-height:1.45;color:var(--tx2)}

.rr-centro{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.rr-r{width:100%;max-width:300px;aspect-ratio:278/266;overflow:visible}
.rr-r polygon{fill:var(--r);transition:transform 1s var(--ease),opacity .8s}
.rr-r:not(.arma) .p1{transform:translate(-50px,10px);opacity:0}
.rr-r:not(.arma) .p2{transform:translate(50px,-30px);opacity:0}
.rr-r:not(.arma) .p3{transform:translate(-30px,50px);opacity:0}
.rr-r .p2{transition-delay:.1s}.rr-r .p3{transition-delay:.2s}
.rr-nombre{margin-top:clamp(16px,2.4vh,26px);font:600 clamp(16px,1.4vw,19px)/1.25 var(--f-tit);letter-spacing:-.02em;color:var(--tx)}
.rr-sello{margin-top:6px;font-size:13.5px;color:var(--tx2)}
.rr-cta{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:14px 24px;border-radius:999px;background:var(--amarillo);color:var(--noche);font:600 15px/1 var(--f-tit);text-decoration:none;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .6s var(--ease)}
.rr-cta.sale{opacity:1;transform:none}

/* teléfono: sin escena fija; cada beneficio sale al llegar a él */
@media (max-width:900px){
  .rr{height:auto}
  .rr-pega{position:relative;height:auto;min-height:0;padding:72px 20px 80px}
  .rr-esc{grid-template-columns:1fr;gap:14px}
  .rr-centro{order:-1;margin-bottom:18px}
  .rr-r{max-width:180px}
  .rr-col{display:contents}
  .rr .rr-col .rr-b{width:auto;margin:0!important}
  .rr-col.izq .rr-b,.rr-col.der .rr-b{--dx:0px;--ox:center}
  .rr-b{transform:translateY(30px) scale(.9)}
  .rr-hilos{display:none}
  .rr-mapa{opacity:.8}
  .rr-mapa text{display:none}
}
@media (prefers-reduced-motion:reduce){.rr{height:auto}.rr-pega{position:relative;height:auto}.rr *{transition:none!important;animation:none!important}.rr-b,.rr-cta{opacity:1;transform:none}.rr-r polygon{transform:none!important;opacity:1!important}}

/* ===== Versión azul, 3.ª vuelta (5-nov-2026): de noche. Azul medianoche, el continente en puntos blancos y las ciudades
   como luces amarillas suaves; tarjetas blancas que contrastan con el fondo oscuro ===== */
.rr.azul{background:radial-gradient(75% 65% at 50% 42%,#0C1A63 0%,#071044 52%,#030823 100%);--tx:#fff;--tx2:rgba(255,255,255,.78);--pto:rgba(255,255,255,.34);--hilo:rgba(255,255,255,.26)}
.rr.azul .rr-mapa .puntos path{stroke-width:.5}
.rr.azul .rr-cab::before{inset:-50px -160px;background:radial-gradient(closest-side,rgba(6,13,58,.92) 55%,rgba(6,13,58,0))}
.rr.azul .rr-img.medio img{object-position:left center}
.rr.azul .rr-mapa .c circle:not(.ping){r:.42px;fill:#FFE400}
.rr.azul .rr-mapa .c .ping{fill:url(#luz);stroke:none;r:2.2px;opacity:.8;animation:luz 4.5s ease-in-out infinite;transform:none}
@keyframes luz{0%,100%{opacity:.45}50%{opacity:1}}
.rr.azul .rr-mapa .c text{font:600 1.05px/1 var(--f-txt);fill:rgba(255,255,255,.88);stroke:rgba(3,8,35,.8);stroke-width:.3px}
/* tarjetas blancas */
.rr.azul .rr-b{--tx:#10101A;--tx2:#59607A;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:22px;padding:8px;box-shadow:0 30px 60px -28px rgba(0,0,0,.75)}
.rr.azul .rr-img{border:0;border-radius:15px;background:#EEF1FF;box-shadow:inset 0 0 0 1px #E6E9F5}
.rr.azul .rr-img.logos{background:#F3F5FD}
.rr.azul .rr-t{padding:12px 10px 8px}
.rr.azul .rr-t small{color:var(--azul)}
.rr.azul .rr-b.on{box-shadow:0 0 0 3px #FFE400,0 30px 60px -28px rgba(0,0,0,.75);transform:translateY(-3px)}

/* ---- (5-nov-2026, tarde) mapa alejado y degradados de entrada y salida ---- */
.rr.azul{background:radial-gradient(75% 65% at 50% 42%,#0C1A63 0%,rgba(12,26,99,0) 72%),#060D3A}
.rr.azul .rr-cab::before{display:none}
.rr.azul .rr-mapa .c text{font:600 1.55px/1 var(--f-txt);fill:#fff;opacity:1;stroke:rgba(3,8,35,.85);stroke-width:.4px}
.rr.azul .rr-mapa .c circle:not(.ping){r:.5px}
.rr.azul .rr-mapa .c .ping{r:2.6px}
/* del blanco de arriba al azul de noche (los puntos del mapa van apareciendo) y del azul de vuelta al blanco */
.rr-entra,.rr-sale{position:relative;height:clamp(180px,28vh,300px);pointer-events:none}
.rr-entra{background:linear-gradient(#fff 0%,#EEF0FB 14%,#B9C0E6 36%,#5662B0 60%,#1A2577 82%,#060D3A 100%)}
.rr-sale{background:linear-gradient(#060D3A 0%,#1A2577 18%,#5662B0 40%,#B9C0E6 64%,#EEF0FB 86%,#fff 100%)}
.rr-entra::after,.rr-sale::after{content:;position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.34) 0 1.8px,transparent 2.2px);background-size:11px 11px}
.rr-entra::after{-webkit-mask-image:linear-gradient(transparent 15%,#000);mask-image:linear-gradient(transparent 15%,#000)}
.rr-sale::after{-webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%)}
/* Florida Global University: el lila entra y sale suave, sin corte */
.aval-g{background:linear-gradient(#fff 0%,#E6EAFF 30%,#E6EAFF 70%,#fff 100%)}

/* ---- (5-nov-2026, noche) barra de arriba del inicio: vidrio totalmente transparente (solo desenfoque); sobre lo claro
   las letras y el logo pasan a oscuros para que se lean ---- */
.cab.sobre-portada.solida{background:transparent;-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:inset 0 -1px 0 rgba(255,255,255,.14)}
.cab.sobre-portada .menu a,.cab.sobre-portada .abrir-menu{transition:color .3s ease,background-color .3s ease}
.cab.sobre-portada .logo img{transition:filter .3s ease}
.cab.sobre-portada.claro:not(.abierto){box-shadow:inset 0 -1px 0 rgba(16,16,26,.08)}
.cab.sobre-portada.claro:not(.abierto) .menu a{color:rgba(16,16,26,.74)}
.cab.sobre-portada.claro:not(.abierto) .menu a:hover,.cab.sobre-portada.claro:not(.abierto) .menu a[aria-current=page]{color:var(--tinta)}
.cab.sobre-portada.claro:not(.abierto) .logo img{filter:brightness(0)}
.cab.sobre-portada.claro:not(.abierto) .abrir-menu{background:rgba(16,16,26,.07);color:var(--tinta)}
.cab.sobre-portada.abierto{background:var(--noche)!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.cab.sobre-portada.solida{background:rgba(2,0,90,.85)}.cab.sobre-portada.solida.claro{background:rgba(255,255,255,.92)}}

/* ---- (5-nov-2026, noche) la barra se perdía con el fondo: vidrio esmerilado suave según lo que pase debajo y letras más firmes ---- */
.cab.sobre-portada.solida{background:rgba(4,8,40,.34)}
.cab.sobre-portada.solida.claro:not(.abierto){background:rgba(255,255,255,.66)}
.cab.sobre-portada.solida .menu a{color:#fff;font-weight:600}
.cab.sobre-portada.claro:not(.abierto) .menu a{color:var(--tinta)}
.cab.sobre-portada .cab-in{transition:none}
.cab.sobre-portada.solida{transition:background-color .3s ease,box-shadow .3s ease}

/* ---- (5-nov-2026, tarde) Puestos: cada pestaña de área muestra sus 5 puestos (también los que no salen en «Todos»)
   en una fila centrada que entra completa en la pantalla; en pantallas angostas sigue siendo la fila que se desliza ---- */
@media (min-width:1180px){
  .prof-pista.centrada{justify-content:center;overflow-x:hidden;padding-inline:var(--margen);scroll-snap-type:none}
  .prof-pista.centrada .pt{flex:0 1 calc((100% - (var(--n, 5) - 1) * 12px) / var(--n, 5));max-width:340px}
  .prof-pista.centrada .pt-pie{left:18px;right:18px;bottom:18px}
  .prof-pista.centrada .pt-pie b{font-size:clamp(19px,1.5vw,23px)}
}
.pt-pie .nw{white-space:nowrap}

/* ---- (5-nov-2026, tarde) Puestos: cada tarjeta se voltea (con ratón al quedarse encima, con el dedo al tocarla o con el
   teclado) y en el reverso dice qué hace el puesto y con qué herramientas trabaja ---- */
.pt{overflow:visible;background:none;box-shadow:none;perspective:1400px;container-type:inline-size;outline:none;cursor:pointer}
.pt::after{display:none}
.pt-in{position:absolute;inset:0;border-radius:inherit;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.pt.girada .pt-in{transform:rotateY(180deg)}
.pt-cara,.pt-dorso{position:absolute;inset:0;border-radius:inherit;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 30px 60px -38px rgba(2,0,60,.55)}
.pt-cara{background:#E9ECF6}
.pt-cara::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(transparent,rgba(2,0,40,.78));pointer-events:none}
.pt-dorso{transform:rotateY(180deg);display:flex;flex-direction:column;padding:clamp(18px,8cqi,26px);color:#fff;background:radial-gradient(120% 70% at 88% 0%,rgba(40,48,214,.9) 0%,rgba(40,48,214,0) 62%),linear-gradient(165deg,#0400BC 0%,#02005A 80%)}
.pt-dorso p{margin:0}
.pt-area,.pt-con{font:600 clamp(10.5px,3.7cqi,12px)/1 var(--f-tit);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.pt-dorso .pt-tit{margin-top:10px;font:600 clamp(18px,7.4cqi,24px)/1.12 var(--f-tit);letter-spacing:-.02em}
.pt-dorso .pt-hace{margin-top:12px;font:400 clamp(13px,5cqi,15.5px)/1.5 var(--f-txt);color:rgba(255,255,255,.86)}
.pt-dorso .pt-con{margin-top:auto;padding-top:14px}
.pt-herr{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.pt-herr li{display:flex;align-items:center;gap:10px;font:500 clamp(12.5px,4.6cqi,14.5px)/1.2 var(--f-txt)}
.pt-herr i{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#fff}
.pt-herr img{width:16px;height:16px}
.pt-mas{position:absolute;z-index:3;top:14px;right:14px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 6px 16px -8px rgba(2,0,40,.6);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.pt-mas svg{width:16px;height:16px;fill:none;stroke:#02005A;stroke-width:2.4;stroke-linecap:round}
.pt:hover .pt-mas{transform:scale(1.08)}
.pt:focus-visible .pt-cara,.pt:focus-visible .pt-dorso{outline:3px solid var(--electrico);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.pt-in{transition:none}}
/* reverso: letra que llena la tarjeta grande y versión compacta para las tarjetas angostas (fila centrada a 1280 px) */
.pt-dorso .pt-tit{font-size:clamp(18px,7.6cqi,26px)}
.pt-dorso .pt-hace{font-size:clamp(13px,5.2cqi,17px)}
.pt-dorso .nw{white-space:nowrap}
@container (max-width:270px){
  .pt-dorso{padding:16px}
  .pt-dorso .pt-tit{margin-top:8px;font-size:17px}
  .pt-dorso .pt-hace{margin-top:8px;font-size:12.5px;line-height:1.45}
  .pt-dorso .pt-con{padding-top:10px}
  .pt-herr{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:8px}
  .pt-herr li{font-size:12px;gap:6px}
  .pt-herr i{width:24px;height:24px}
  .pt-herr img{width:14px;height:14px}
}

/* ---- (5-nov-2026, tarde, 2.ª vuelta) Reverso en BLANCO, con 6 apps una al lado de la otra; se voltea solo con clic.
   Para moverse a la derecha en PC: flechas a los lados de las tarjetas (sin ocupar espacio abajo) y arrastrar con el ratón ---- */
.pt-dorso{background:#fff;color:var(--tinta);box-shadow:0 30px 60px -38px rgba(2,0,60,.5),inset 0 0 0 1px rgba(2,0,90,.08)}
.pt-area{color:var(--azul)}
.pt-dorso .pt-tit{color:var(--tinta);padding-right:40px}
.pt-dorso .pt-hace{color:#4A4E69}
.pt-con{color:#8A8FA8}
.pt-herr{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:12px 0 0}
.pt-herr li{display:grid;place-items:center;aspect-ratio:1;max-width:48px;width:100%;justify-self:center;border-radius:12px;background:#F3F5FB;box-shadow:inset 0 0 0 1px rgba(2,0,90,.05);font-size:0;gap:0}
.pt-herr img{width:52%;height:52%;object-fit:contain}
@container (max-width:300px){
  .pt-herr{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px}
  .pt-herr li{max-width:42px}
}
.pt-cerrar{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#F3F5FB}
.pt-cerrar svg{width:15px;height:15px;fill:none;stroke:#02005A;stroke-width:2.4;stroke-linecap:round}
.pt-mas{width:36px;height:36px}
/* flechas a los lados (solo con ratón y solo si hay más tarjetas hacia ese lado) */
.prof-lado{position:absolute;z-index:4;top:calc(6px + var(--alto-pt, 450px) / 2 - 27px);display:grid;place-items:center;width:54px;height:54px;padding:0;border:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.94);box-shadow:0 14px 34px -14px rgba(2,0,60,.55),0 0 0 1px rgba(2,0,90,.06);transition:transform .3s cubic-bezier(.16,1,.3,1),background-color .25s}
.prof-lado svg{width:22px;height:22px;fill:none;stroke:#02005A;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.prof-lado:hover{transform:scale(1.07);background:#fff}
.prof-lado:focus-visible{outline:3px solid var(--electrico);outline-offset:3px}
.prof-izq{left:max(10px,calc((100vw - 1320px) / 2 + var(--margen) - 27px))}
.prof-der{right:max(10px,calc((100vw - 1320px) / 2 + var(--margen) - 27px))}
.prof-lado[hidden]{display:none}
@media (hover:none),(pointer:coarse){.prof-lado{display:none!important}}
@media (hover:hover) and (pointer:fine){.prof-pista{cursor:grab}.prof-pista.arrastrando{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}.prof-pista.arrastrando .pt{cursor:grabbing}}
/* apps del reverso: dos filas de 3, grandes en la tarjeta ancha y más chicas en las angostas */
.pt-herr{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;justify-items:center}
.pt-herr li{max-width:64px;border-radius:16px}
@container (max-width:300px){.pt-herr{gap:8px 10px}.pt-herr li{max-width:52px;border-radius:14px}}
@container (max-width:240px){.pt-herr li{max-width:44px;border-radius:12px}}
/* (5-nov-2026, tarde, 3.ª vuelta) sin flechas: en PC la fila sigue al ratón; sin imán entre tarjetas para que el movimiento sea continuo */
@media (hover:hover) and (pointer:fine){.prof-pista,.prof-pista.arrastrando{cursor:auto;scroll-snap-type:none;scroll-behavior:auto}.prof-pista .pt{cursor:pointer}}

/* ---- (5-nov-2026) Regla del Sr. Johnson, por el momento: los botones sin destino (data-pronto) no llevan a ningún lado y no reaccionan;
   las filas de «Elige la ruta» siguen mostrando su vista al pasar el ratón ---- */
a[data-pronto]{cursor:default}
a[data-pronto]:not([data-vista]){pointer-events:none}

/* ---- (5-nov-2026) «Elige la ruta»: la tarjeta de la derecha llena TODO el cuadro y cada programa tiene su color propio, el mismo
   que toma su fila de la lista: Diagnóstico lila con tinta azul, Certificación azul noche con el diploma grande, Especialidades azul
   con los logos de cada camino, Remotos Work su azul con las caritas ---- */
@media (min-width:1061px){
  .prog-wrap{align-items:stretch}
  .prog-vista.pv2-caja{position:relative;top:auto;height:auto;min-height:560px;background:none;border-radius:30px;box-shadow:0 44px 80px -54px rgba(2,0,60,.5)}
}
.pv2{padding:clamp(28px,2.8vw,40px);gap:18px;border-radius:inherit}
.pv2 small{display:block;font:600 12.5px/1.2 var(--f-tit);letter-spacing:.06em;text-transform:uppercase}
.pv2 .pv2-cab b{display:block;margin-top:12px;font:600 clamp(26px,2.3vw,34px)/1.1 var(--f-tit);letter-spacing:-.03em;max-width:17ch}
.pv2-pie{margin:auto 0 0;font:500 14px/1.4 var(--f-txt)}
.pv2-diag{background:radial-gradient(120% 80% at 88% 0%,#fff 0%,rgba(255,255,255,0) 55%),linear-gradient(165deg,#EEF0FF 0%,#DCE1FF 100%);color:var(--tinta)}
.pv2-diag small{color:var(--azul)}
.pv2-pasos{list-style:none;margin:0;padding:0;display:grid;gap:12px;flex:1;align-content:center}
.pv2-pasos li{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(4,0,188,.07),0 16px 30px -22px rgba(2,0,60,.45);font:600 clamp(16px,1.3vw,19px)/1.25 var(--f-tit);color:var(--tinta)}
.pv2-pasos li span{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--azul);color:#fff;font:600 16px/1 var(--f-tit)}
.pv2-diag .pv2-pie{color:#4A4E69}
.pv2-diag.activa .pv2-pasos li{animation:aparecer .55s var(--ease) both;animation-delay:calc(var(--i) * 70ms)}
.pv2-cert{background:radial-gradient(90% 60% at 50% 55%,rgba(40,48,214,.5) 0%,rgba(40,48,214,0) 70%),#02005A;color:#fff}
.pv2-cert small{color:#FFE400}
.pv2-diploma{flex:1;display:grid;place-items:center;min-height:0;padding:4px 6px}
.pv2-diploma img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 34px 60px -30px rgba(0,0,0,.7);transform:rotate(-2deg);transition:transform .9s var(--ease)}
.pv2-cert.activa .pv2-diploma img{transform:rotate(0)}
.pv2-datos{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.pv2-datos li{display:flex;align-items:baseline;gap:6px;padding:11px 15px;border-radius:14px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font:500 14px/1 var(--f-txt);color:rgba(255,255,255,.82)}
.pv2-datos b{font:600 19px/1 var(--f-tit);color:#fff}
.pv2-esp{background:radial-gradient(110% 70% at 90% 0%,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 55%),#0400BC;color:#fff}
.pv2-esp small{color:rgba(255,255,255,.75)}
.pv2-esp-filas{list-style:none;margin:0;padding:0;display:grid;gap:12px;flex:1;align-content:center}
.pv2-esp-filas li{display:flex;align-items:center;gap:16px;padding:16px;border-radius:18px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.pv2-logos{display:flex;flex:none}
.pv2-logos i{display:grid;place-items:center;width:44px;height:44px;margin-left:-8px;border-radius:13px;background:#fff;box-shadow:0 8px 18px -10px rgba(0,0,0,.45)}
.pv2-logos i:first-child{margin-left:0}
.pv2-logos img{width:24px;height:24px}
.pv2-esp-filas b{display:block;font:600 16px/1.2 var(--f-tit)}
.pv2-esp-filas em{display:block;margin-top:4px;font:400 13px/1.35 var(--f-txt);font-style:normal;color:rgba(255,255,255,.75)}
.pv2-esp .pv2-pie{color:rgba(255,255,255,.75)}
.pv2-esp.activa .pv2-esp-filas li{animation:aparecer .55s var(--ease) both;animation-delay:calc(var(--i) * 80ms)}
.pv2-rw{background:radial-gradient(100% 70% at 85% 0%,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 55%),#0A66C2;color:#fff;justify-content:flex-end;overflow:hidden}
.pv2-rw .caras{inset:4% 4% 42% 4%;z-index:0}
.pv2-rw .pv2-cab{position:relative;z-index:1}
.pv2-rw-logo{display:block;height:38px;width:auto;padding:10px 14px;box-sizing:content-box;border-radius:12px;background:#fff}
.pv2-rw .pv2-cab b{max-width:18ch}
.pv2-rw-etq{position:relative;z-index:1;align-self:flex-start;padding:8px 13px;border-radius:999px;background:#fff;color:#0A66C2;font:600 13px/1 var(--f-tit)}
/* cada fila de la lista se llena con el color de su programa */
.programas-lista a::before{background:var(--c,var(--azul))}
.programas-lista a.fila-clara:hover .pl-nombre,.programas-lista a.fila-clara.viendo .pl-nombre{color:var(--azul)}
.programas-lista a.fila-clara:hover .pl-dato,.programas-lista a.fila-clara.viendo .pl-dato{color:#2B2F55}
.pv2-rw .caras{inset:3% 4% 52% 4%}
/* «Elige la ruta» en el teléfono (5-nov-2026): cada tarjeta que se desliza lleva el color propio de su programa */
@media (max-width:760px){
  .programas-lista a{background:var(--c,#F4F5FC)}
  .programas-lista a::before{display:none}
  .programas-lista a.fila-clara{background:radial-gradient(120% 80% at 88% 0%,#fff 0%,rgba(255,255,255,0) 55%),linear-gradient(165deg,#EEF0FF 0%,#DCE1FF 100%)}
  .programas-lista a.fila-clara .pl-nombre{color:var(--azul)}
  .programas-lista a:not(.fila-clara) .pl-nombre,.programas-lista a:not(.fila-clara) .pl-precio{color:#fff}
  .programas-lista a:not(.fila-clara) .pl-dato{color:rgba(255,255,255,.82)}
  .programas-lista a:not(.fila-clara) .pl-ir{color:#fff}
}

/* ---- (5-nov-2026) Ruta, etapa 4 en el teléfono: las caritas de Remotos Work llenan la mitad de abajo de la tarjeta (antes 13 diminutas arriba) ---- */
@media (max-width:760px){
  .ru-4 .caras{inset:0!important;opacity:1!important;z-index:0}
  .ru-4 .cara{display:block!important;width:38px!important;height:38px!important;translate:-50% -50%}
  .ru-4 .cara:nth-child(even){width:31px!important;height:31px!important}
  .ru-4 .cara:nth-child(n+21){display:none!important}
  .ru-4 .cara:nth-child(1){left:13%!important;top:50%!important}.ru-4 .cara:nth-child(2){left:39%!important;top:48%!important}.ru-4 .cara:nth-child(3){left:65%!important;top:51%!important}.ru-4 .cara:nth-child(4){left:84%!important;top:49%!important}.ru-4 .cara:nth-child(5){left:26%!important;top:56%!important}.ru-4 .cara:nth-child(6){left:52%!important;top:59%!important}.ru-4 .cara:nth-child(7){left:71%!important;top:57%!important}.ru-4 .cara:nth-child(8){left:93%!important;top:60%!important}.ru-4 .cara:nth-child(9){left:15%!important;top:67%!important}.ru-4 .cara:nth-child(10){left:41%!important;top:65%!important}.ru-4 .cara:nth-child(11){left:60%!important;top:68%!important}.ru-4 .cara:nth-child(12){left:86%!important;top:66%!important}.ru-4 .cara:nth-child(13){left:28%!important;top:78%!important}.ru-4 .cara:nth-child(14){left:47%!important;top:76%!important}.ru-4 .cara:nth-child(15){left:73%!important;top:74%!important}.ru-4 .cara:nth-child(16){left:95%!important;top:77%!important}.ru-4 .cara:nth-child(17){left:17%!important;top:84%!important}.ru-4 .cara:nth-child(18){left:36%!important;top:87%!important}.ru-4 .cara:nth-child(19){left:62%!important;top:85%!important}.ru-4 .cara:nth-child(20){left:88%!important;top:83%!important}
  .ru-4 .ru-texto,.ru-4 .ru-n,.ru-4 .ru-ver{position:relative;z-index:1}
}
@media (max-width:760px){.ru-4 .cara:nth-child(1){left:13%!important;top:60%!important}.ru-4 .cara:nth-child(2){left:39%!important;top:58%!important}.ru-4 .cara:nth-child(3){left:65%!important;top:61%!important}.ru-4 .cara:nth-child(4){left:84%!important;top:59%!important}.ru-4 .cara:nth-child(5){left:26%!important;top:65%!important}.ru-4 .cara:nth-child(6){left:52%!important;top:68%!important}.ru-4 .cara:nth-child(7){left:71%!important;top:66%!important}.ru-4 .cara:nth-child(8){left:91%!important;top:69%!important}.ru-4 .cara:nth-child(9){left:15%!important;top:75%!important}.ru-4 .cara:nth-child(10){left:41%!important;top:73%!important}.ru-4 .cara:nth-child(11){left:60%!important;top:76%!important}.ru-4 .cara:nth-child(12){left:86%!important;top:74%!important}.ru-4 .cara:nth-child(13){left:28%!important;top:85%!important}.ru-4 .cara:nth-child(14){left:47%!important;top:83%!important}.ru-4 .cara:nth-child(15){left:73%!important;top:81%!important}.ru-4 .cara:nth-child(16){left:93%!important;top:84%!important}.ru-4 .cara:nth-child(17){left:17%!important;top:90%!important}.ru-4 .cara:nth-child(18){left:36%!important;top:93%!important}.ru-4 .cara:nth-child(19){left:62%!important;top:91%!important}.ru-4 .cara:nth-child(20){left:88%!important;top:89%!important}}

/* ---- (5-nov-2026) «Todo lo que necesitas» en el teléfono con la MISMA animación de PC (pedido de Ronaldo: «¿dónde está la
   animación de PC?»): escena fija, la R al centro, 3 beneficios compactos a cada lado que salen uno por uno con su línea hacia
   la R y la bolita que la recorre. Antes en el teléfono era una columna larga sin animación ---- */
@media (max-width:900px){
  .rr{height:300svh}
  .rr-pega{position:sticky;top:0;height:100svh;min-height:0;padding:76px 12px 14px;justify-content:center}
  .rr-cab{margin:0 auto 14px}
  .rr-cab h2{font-size:clamp(23px,6.4vw,30px);margin-bottom:6px}
  .rr-cab p{font-size:13px;line-height:1.4}
  .rr-cab::before{inset:-24px -30px}
  .rr-esc{grid-template-columns:minmax(0,1fr) clamp(84px,24vw,128px) minmax(0,1fr);gap:clamp(8px,2.6vw,16px);align-items:center}
  .rr-col{display:flex;flex-direction:column;gap:10px}
  .rr-col.izq{align-items:stretch}
  .rr .rr-col .rr-b{width:100%;margin:0!important}
  .rr-col.izq .rr-b{--dx:26px;--ox:right center}
  .rr-col.der .rr-b{--dx:-26px;--ox:left center}
  .rr-b{transform:translateX(var(--dx,0)) scale(.8)}
  .rr-b.sale{transform:none}
  .rr.azul .rr-b{padding:5px;border-radius:15px}
  .rr.azul .rr-img{border-radius:11px}
  .rr-img{height:clamp(40px,6.2vh,58px)}
  .rr-img.logos{gap:4px}
  .rr-img.logos img{width:24px;height:24px;padding:4px}
  .rr-img.logos img:nth-child(n+4){display:none}
  .rr.azul .rr-t{padding:7px 6px 5px}
  .rr-t small{font-size:9.5px;margin-bottom:4px}
  .rr-t b{font-size:clamp(11.5px,3.3vw,14px);line-height:1.2;margin:0}
  .rr-t span{display:none}
  .rr-centro{order:0;margin:0}
  .rr-r{max-width:100%}
  .rr-nombre{margin-top:10px;font-size:clamp(10.5px,3vw,13px)}
  .rr-sello{display:none}
  .rr-cta{margin-top:10px;padding:9px 12px;font-size:12px;gap:6px}
  .rr-hilos{display:block}
  .rr-hilos path{stroke-width:1.3}
  .rr-hilos path.on{stroke-width:2}
  .rr-mapa text{display:block}
}
/* las franjas de degradado de entrada y salida del mapa, más cortas en el teléfono (eran huecos de media pantalla) */
@media (max-width:760px){.rr-entra,.rr-sale{height:110px}}

/* ---- (5-nov-2026) «Elige la ruta»: más ancha y 3 juegos de colores para elegir en vivo (?colores=a|b|c; A por defecto) ---- */
.caja.caja-ancha{max-width:1560px}
html.colores-a{--p0:#FFE400;--p0t:#11111A;--p1:#02005A;--p1t:#fff;--p2:#0012FD;--p2t:#fff;--p3:#0A66C2;--p3t:#fff}
html.colores-a .pv2-diag{--fondo:#FFE400;--txt:#11111A;--sub:#11111Ac4;--sup:rgba(255,255,255,.72);--supb:rgba(2,0,90,.08);--acento:#11111A;--pasos:#fff;--borde-panel:transparent;--etq-f:#11111A;--etq-t:#fff}
html.colores-a .pv2-cert{--fondo:#02005A;--txt:#fff;--sub:rgba(255,255,255,.8);--sup:rgba(255,255,255,.1);--supb:rgba(255,255,255,.15);--acento:#FFE400;--pasos:#fff;--borde-panel:transparent;--etq-f:#fff;--etq-t:#02005A}
html.colores-a .pv2-esp{--fondo:#0012FD;--txt:#fff;--sub:rgba(255,255,255,.8);--sup:rgba(255,255,255,.1);--supb:rgba(255,255,255,.15);--acento:#FFE400;--pasos:#fff;--borde-panel:transparent;--etq-f:#fff;--etq-t:#0012FD}
html.colores-a .pv2-rw{--fondo:#0A66C2;--txt:#fff;--sub:rgba(255,255,255,.8);--sup:rgba(255,255,255,.1);--supb:rgba(255,255,255,.15);--acento:#FFE400;--pasos:#fff;--borde-panel:transparent;--etq-f:#fff;--etq-t:#0A66C2}
html.colores-b{--p0:#FFFFFF;--p0t:#11111A;--p1:#11111A;--p1t:#fff;--p2:#FFE400;--p2t:#11111A;--p3:#0A66C2;--p3t:#fff}
html.colores-b .pv2-diag{--fondo:#FFFFFF;--txt:#11111A;--sub:#11111Ac4;--sup:#F2F4FB;--supb:rgba(2,0,90,.08);--acento:#0400BC;--pasos:#F2F4FB;--borde-panel:rgba(2,0,90,.12);--etq-f:#11111A;--etq-t:#fff}
html.colores-b .pv2-cert{--fondo:#11111A;--txt:#fff;--sub:rgba(255,255,255,.8);--sup:rgba(255,255,255,.1);--supb:rgba(255,255,255,.15);--acento:#FFE400;--pasos:#fff;--borde-panel:transparent;--etq-f:#fff;--etq-t:#11111A}
html.colores-b .pv2-esp{--fondo:#FFE400;--txt:#11111A;--sub:#11111Ac4;--sup:rgba(255,255,255,.72);--supb:rgba(2,0,90,.08);--acento:#11111A;--pasos:#fff;--borde-panel:transparent;--etq-f:#11111A;--etq-t:#fff}
html.colores-b .pv2-rw{--fondo:#0A66C2;--txt:#fff;--sub:rgba(255,255,255,.8);--sup:rgba(255,255,255,.1);--supb:rgba(255,255,255,.15);--acento:#FFE400;--pasos:#fff;--borde-panel:transparent;--etq-f:#fff;--etq-t:#0A66C2}
html.colores-c{--p0:#FFF3B8;--p0t:#11111A;--p1:#E5E7FF;--p1t:#02005A;--p2:#DCEFFF;--p2t:#0B2A5B;--p3:#E2EEFA;--p3t:#0A3E73}
html.colores-c .pv2-diag{--fondo:#FFF3B8;--txt:#11111A;--sub:#11111Ac4;--sup:rgba(255,255,255,.72);--supb:rgba(2,0,90,.08);--acento:#7A5C00;--pasos:#fff;--borde-panel:transparent;--etq-f:#11111A;--etq-t:#fff}
html.colores-c .pv2-cert{--fondo:#E5E7FF;--txt:#02005A;--sub:#02005Ac4;--sup:rgba(255,255,255,.72);--supb:rgba(2,0,90,.08);--acento:#0400BC;--pasos:#fff;--borde-panel:transparent;--etq-f:#02005A;--etq-t:#fff}
html.colores-c .pv2-esp{--fondo:#DCEFFF;--txt:#0B2A5B;--sub:#0B2A5Bc4;--sup:rgba(255,255,255,.72);--supb:rgba(2,0,90,.08);--acento:#0012FD;--pasos:#fff;--borde-panel:transparent;--etq-f:#0B2A5B;--etq-t:#fff}
html.colores-c .pv2-rw{--fondo:#E2EEFA;--txt:#0A3E73;--sub:#0A3E73c4;--sup:rgba(255,255,255,.72);--supb:rgba(2,0,90,.08);--acento:#0A66C2;--pasos:#fff;--borde-panel:transparent;--etq-f:#0A3E73;--etq-t:#fff}
.pv2{background:radial-gradient(110% 70% at 88% 0%,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 55%),var(--fondo);color:var(--txt);box-shadow:inset 0 0 0 1px var(--borde-panel)}
.pv2 small,.pv2-diag small,.pv2-cert small,.pv2-esp small{color:var(--acento)}
.pv2 .pv2-cab b{color:var(--txt)}
.pv2-pie,.pv2-diag .pv2-pie,.pv2-esp .pv2-pie{color:var(--sub)}
.pv2-pasos li{background:var(--pasos)}
.pv2-esp-filas li{background:var(--sup);box-shadow:inset 0 0 0 1px var(--supb)}
.pv2-esp-filas b{color:var(--txt)}
.pv2-esp-filas em{color:var(--sub)}
.pv2-datos li{background:var(--sup);box-shadow:inset 0 0 0 1px var(--supb);color:var(--sub)}
.pv2-datos b{color:var(--txt)}
.pv2-rw-etq{background:var(--etq-f);color:var(--etq-t)}
.pv2-rw-logo{box-shadow:0 0 0 1px var(--supb)}
.pv2-ir{display:none}
.prog-wrap .programas-lista a[data-vista]:hover .pl-nombre,.prog-wrap .programas-lista a[data-vista].viendo .pl-nombre,.prog-wrap .programas-lista a[data-vista]:hover .pl-precio,.prog-wrap .programas-lista a[data-vista].viendo .pl-precio{color:var(--ct)}
.prog-wrap .programas-lista a[data-vista]:hover .pl-dato,.prog-wrap .programas-lista a[data-vista].viendo .pl-dato{color:var(--ct);opacity:.85}
.prog-wrap .programas-lista a[data-vista]:hover .pl-dato em,.prog-wrap .programas-lista a[data-vista].viendo .pl-dato em{background:var(--ct);color:var(--c)}
/* teléfono y tableta: en vez de las tarjetitas, las MISMAS tarjetas grandes de la PC, con su color y contenido, en una fila que se desliza */
@media (max-width:1060px){
  .prog-wrap{display:block;position:relative}
  .prog-wrap .programas-lista{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;padding:0}
  .prog-vista.pv2-caja{display:flex!important;position:relative;height:auto;min-height:0;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--margen) * -1);padding:4px var(--margen) 26px;scroll-padding-inline:var(--margen);scrollbar-width:none;background:none;box-shadow:none;border-radius:0}
  .prog-vista.pv2-caja::-webkit-scrollbar{display:none}
  .prog-vista .pv2{position:relative;inset:auto;flex:0 0 min(86%,440px);min-height:470px;opacity:1;transform:none;pointer-events:auto;scroll-snap-align:start;border-radius:26px;box-shadow:0 30px 60px -40px rgba(2,0,60,.55),inset 0 0 0 1px var(--borde-panel)}
  .pv2 .pv2-cab b{font-size:26px}
  .pv2-pasos li{padding:13px 14px;font-size:15px}
  .pv2-pasos li span{width:32px;height:32px;font-size:14px}
  .pv2-esp-filas li{padding:12px;gap:12px}
  .pv2-logos i{width:38px;height:38px}
  .pv2-logos img{width:21px;height:21px}
  .pv2-ir{display:inline-flex;align-self:flex-start;gap:8px;margin-top:4px;padding:12px 18px;border-radius:999px;background:var(--txt);color:var(--fondo);font:600 14px/1 var(--f-tit);text-decoration:none}
  .pv2-rw .pv2-ir{background:#fff;color:#0A66C2}
}
/* teléfono: tarjetas de programas más compactas para que cada una entre en una pantalla */
@media (max-width:1060px){
  .prog-vista.pv2-caja{margin-top:0;top:auto;align-items:stretch}
  .prog-vista .pv2{min-height:0;height:auto;padding:22px 20px 22px;gap:14px}
  .pv2 small{font-size:11px}
  .pv2 .pv2-cab b{margin-top:8px;font-size:clamp(21px,6vw,25px)}
  .pv2-pasos{gap:8px}
  .pv2-pasos li{padding:10px 12px;gap:12px;font-size:14px;border-radius:14px}
  .pv2-pasos li span{width:28px;height:28px;font-size:13px}
  .pv2-diploma img{max-height:190px;width:auto;max-width:100%}
  .pv2-datos{gap:6px}
  .pv2-datos li{padding:8px 10px;font-size:12.5px}
  .pv2-datos b{font-size:15px}
  .pv2-esp-filas{gap:8px}
  .pv2-esp-filas li{padding:10px;gap:10px;border-radius:14px}
  .pv2-logos i{width:32px;height:32px;border-radius:10px;margin-left:-6px}
  .pv2-logos img{width:18px;height:18px}
  .pv2-esp-filas b{font-size:13.5px}
  .pv2-esp-filas em{font-size:11.5px}
  .pv2-rw{min-height:420px!important}
  .pv2-pie{font-size:12.5px}
}
/* (5-nov-2026) Remotos Work en el teléfono: el círculo azul arranca ya del tamaño del texto (antes, al empezar a crecer, el texto
   blanco quedaba afuera, sobre blanco, y se veía cortado) */
@media (max-width:760px){.rw-apartado[data-rw-scroll]::before{clip-path:circle(max(var(--rad,0px),min(64vw,300px)) at 50% 50%)}}
/* (5-nov-2026) puestos en el teléfono: las 4 pestañas en una sola fila que se desliza (antes se partían en 2 líneas) */
@media (max-width:760px){.prof-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-left:calc(var(--margen) * -1);margin-right:calc(var(--margen) * -1);padding:0 var(--margen);gap:6px 18px}.prof-tabs::-webkit-scrollbar{display:none}.prof-tabs button{flex:none;white-space:nowrap}}

/* ---- (5-nov-2026) «Elige la ruta»: le gustó el estilo C (suaves) pero con otros colores → D pastel, E suaves vivos, F crema ---- */
html.colores-d{--p0:#FFE3DA;--p0t:#3B1A12;--p1:#ECE7FF;--p1t:#1E1252;--p2:#DDF5EA;--p2t:#0F3B2C;--p3:#DDEEFF;--p3t:#0A3E73}
html.colores-d .pv2-diag{--fondo:#FFE3DA;--txt:#3B1A12;--sub:#3B1A12c4;--sup:rgba(255,255,255,.72);--supb:rgba(2,0,90,.07);--acento:#C2410C;--pasos:#fff;--borde-panel:transparent;--etq-f:#3B1A12;--etq-t:#fff}
html.colores-d .pv2-cert{--fondo:#ECE7FF;--txt:#1E1252;--sub:#1E1252c4;--sup:rgba(255,255,255,.72);--supb:rgba(2,0,90,.07);--acento:#4C2FD0;--pasos:#fff;--borde-panel:transparent;--etq-f:#1E1252;--etq-t:#fff}
html.colores-d .pv2-esp{--fondo:#DDF5EA;--txt:#0F3B2C;--sub:#0F3B2Cc4;--sup:rgba(255,255,255,.72);--supb:rgba(2,0,90,.07);--acento:#0E8A5F;--pasos:#fff;--borde-panel:transparent;--etq-f:#0F3B2C;--etq-t:#fff}
html.colores-d .pv2-rw{--fondo:#DDEEFF;--txt:#0A3E73;--sub:#0A3E73c4;--sup:rgba(255,255,255,.72);--supb:rgba(2,0,90,.07);--acento:#0A66C2;--pasos:#fff;--borde-panel:transparent;--etq-f:#0A3E73;--etq-t:#fff}
html.colores-e{--p0:#FFE58A;--p0t:#11111A;--p1:#D6DAFF;--p1t:#02005A;--p2:#C7E2FF;--p2t:#0B2A5B;--p3:#C9E0F5;--p3t:#0A3E73}
html.colores-e .pv2-diag{--fondo:#FFE58A;--txt:#11111A;--sub:#11111Ac4;--sup:rgba(255,255,255,.72);--supb:rgba(2,0,90,.07);--acento:#7A5C00;--pasos:#fff;--borde-panel:transparent;--etq-f:#11111A;--etq-t:#fff}
html.colores-e .pv2-cert{--fondo:#D6DAFF;--txt:#02005A;--sub:#02005Ac4;--sup:rgba(255,255,255,.72);--supb:rgba(2,0,90,.07);--acento:#0400BC;--pasos:#fff;--borde-panel:transparent;--etq-f:#02005A;--etq-t:#fff}
html.colores-e .pv2-esp{--fondo:#C7E2FF;--txt:#0B2A5B;--sub:#0B2A5Bc4;--sup:rgba(255,255,255,.72);--supb:rgba(2,0,90,.07);--acento:#0012FD;--pasos:#fff;--borde-panel:transparent;--etq-f:#0B2A5B;--etq-t:#fff}
html.colores-e .pv2-rw{--fondo:#C9E0F5;--txt:#0A3E73;--sub:#0A3E73c4;--sup:rgba(255,255,255,.72);--supb:rgba(2,0,90,.07);--acento:#0A66C2;--pasos:#fff;--borde-panel:transparent;--etq-f:#0A3E73;--etq-t:#fff}
html.colores-f{--p0:#F7F1E3;--p0t:#2A2418;--p1:#EFEFF6;--p1t:#02005A;--p2:#E6F0EB;--p2t:#1F3A30;--p3:#E8F1F8;--p3t:#0A3E73}
html.colores-f .pv2-diag{--fondo:#F7F1E3;--txt:#2A2418;--sub:#2A2418c4;--sup:rgba(255,255,255,.72);--supb:rgba(2,0,90,.07);--acento:#8A6A1F;--pasos:#fff;--borde-panel:transparent;--etq-f:#2A2418;--etq-t:#fff}
html.colores-f .pv2-cert{--fondo:#EFEFF6;--txt:#02005A;--sub:#02005Ac4;--sup:rgba(255,255,255,.72);--supb:rgba(2,0,90,.07);--acento:#0400BC;--pasos:#fff;--borde-panel:transparent;--etq-f:#02005A;--etq-t:#fff}
html.colores-f .pv2-esp{--fondo:#E6F0EB;--txt:#1F3A30;--sub:#1F3A30c4;--sup:rgba(255,255,255,.72);--supb:rgba(2,0,90,.07);--acento:#2F7D5B;--pasos:#fff;--borde-panel:transparent;--etq-f:#1F3A30;--etq-t:#fff}
html.colores-f .pv2-rw{--fondo:#E8F1F8;--txt:#0A3E73;--sub:#0A3E73c4;--sup:rgba(255,255,255,.72);--supb:rgba(2,0,90,.07);--acento:#0A66C2;--pasos:#fff;--borde-panel:transparent;--etq-f:#0A3E73;--etq-t:#fff}

/* ---- (6-nov-2026) «Elige la ruta»: 3 rumbos para mostrarle en imágenes (g = como la ruta aprobada, h = azules suaves de la marca, i = blancas con color en los detalles) ---- */
html.colores-g{--p0:#0400BC;--p0t:#fff;--p1:#0400BC;--p1t:#fff;--p2:#0400BC;--p2t:#fff;--p3:#0400BC;--p3t:#fff}
html.colores-g .pv2-diag{--fondo:radial-gradient(120% 90% at 30% 20%,#fff 0%,#EEF0FF 60%,#E2E6FF 100%);--txt:#11111A;--sub:#11111Ac4;--sup:rgba(255,255,255,.75);--supb:rgba(2,0,90,.07);--acento:#0400BC;--pasos:#fff;--borde-panel:transparent;--etq-f:#11111A;--etq-t:#fff}
html.colores-g .pv2-cert{--fondo:#0400BC;--txt:#fff;--sub:rgba(255,255,255,.8);--sup:rgba(255,255,255,.1);--supb:rgba(255,255,255,.15);--acento:#FFE400;--pasos:#fff;--borde-panel:transparent;--etq-f:#fff;--etq-t:#0400BC}
html.colores-g .pv2-esp{--fondo:#02005A;--txt:#fff;--sub:rgba(255,255,255,.8);--sup:rgba(255,255,255,.1);--supb:rgba(255,255,255,.15);--acento:#FFE400;--pasos:#fff;--borde-panel:transparent;--etq-f:#fff;--etq-t:#02005A}
html.colores-g .pv2-rw{--fondo:#fff;--txt:#1D2226;--sub:#1D2226c4;--sup:rgba(255,255,255,.75);--supb:rgba(2,0,90,.07);--acento:#0A66C2;--pasos:#fff;--borde-panel:#E2E8F0;--etq-f:#1D2226;--etq-t:#fff;--etq-f:#0A66C2}
html.colores-h{--p0:#ECEBFF;--p0t:#02005A;--p1:#E2EDFF;--p1t:#0B2A5B;--p2:#E9EBF4;--p2t:#1B1D3A;--p3:#E0EEFA;--p3t:#0A3E73}
html.colores-h .pv2-diag{--fondo:#ECEBFF;--txt:#02005A;--sub:#02005Ac4;--sup:rgba(255,255,255,.75);--supb:rgba(2,0,90,.07);--acento:#0400BC;--pasos:#fff;--borde-panel:transparent;--etq-f:#02005A;--etq-t:#fff}
html.colores-h .pv2-cert{--fondo:#E2EDFF;--txt:#0B2A5B;--sub:#0B2A5Bc4;--sup:rgba(255,255,255,.75);--supb:rgba(2,0,90,.07);--acento:#0012FD;--pasos:#fff;--borde-panel:transparent;--etq-f:#0B2A5B;--etq-t:#fff}
html.colores-h .pv2-esp{--fondo:#E9EBF4;--txt:#1B1D3A;--sub:#1B1D3Ac4;--sup:rgba(255,255,255,.75);--supb:rgba(2,0,90,.07);--acento:#02005A;--pasos:#fff;--borde-panel:transparent;--etq-f:#1B1D3A;--etq-t:#fff}
html.colores-h .pv2-rw{--fondo:#E0EEFA;--txt:#0A3E73;--sub:#0A3E73c4;--sup:rgba(255,255,255,.75);--supb:rgba(2,0,90,.07);--acento:#0A66C2;--pasos:#fff;--borde-panel:transparent;--etq-f:#0A3E73;--etq-t:#fff}
html.colores-i{--p0:#FFF8CC;--p0t:#11111A;--p1:#E9E9F5;--p1t:#02005A;--p2:#ECEBFF;--p2t:#0400BC;--p3:#E3EFFA;--p3t:#0A66C2}
html.colores-i .pv2-diag{--fondo:#fff;--txt:#11111A;--sub:#11111Ac4;--sup:rgba(255,255,255,.75);--supb:rgba(2,0,90,.07);--acento:#11111A;--pasos:#fff;--borde-panel:rgba(2,0,90,.10);--etq-f:#11111A;--etq-t:#fff;--banda:#FFE400}
html.colores-i .pv2-cert{--fondo:#fff;--txt:#11111A;--sub:#11111Ac4;--sup:rgba(255,255,255,.75);--supb:rgba(2,0,90,.07);--acento:#02005A;--pasos:#fff;--borde-panel:rgba(2,0,90,.10);--etq-f:#11111A;--etq-t:#fff;--banda:#02005A}
html.colores-i .pv2-esp{--fondo:#fff;--txt:#11111A;--sub:#11111Ac4;--sup:rgba(255,255,255,.75);--supb:rgba(2,0,90,.07);--acento:#0400BC;--pasos:#fff;--borde-panel:rgba(2,0,90,.10);--etq-f:#11111A;--etq-t:#fff;--banda:#0400BC}
html.colores-i .pv2-rw{--fondo:#fff;--txt:#11111A;--sub:#11111Ac4;--sup:rgba(255,255,255,.75);--supb:rgba(2,0,90,.07);--acento:#0A66C2;--pasos:#fff;--borde-panel:rgba(2,0,90,.10);--etq-f:#11111A;--etq-t:#fff;--banda:#0A66C2}
html.colores-i .pv2{overflow:hidden}
html.colores-i .pv2::after{content:"";position:absolute;inset:0 0 auto 0;height:10px;background:var(--banda)}
html.colores-i .pv2-diag .pv2-pasos li{background:#FFFBE0;box-shadow:0 0 0 1px rgba(17,17,26,.06)}
html.colores-i .pv2-diag .pv2-pasos li span{background:#FFE400;color:#11111A}
html.colores-i .pv2-cert .pv2-datos li,html.colores-i .pv2-esp .pv2-esp-filas li,html.colores-i .pv2-rw .pv2-rw-etq{background:#F4F5FB}
html.colores-i .pv2-esp .pv2-logos i{box-shadow:0 0 0 1px rgba(2,0,90,.08)}
html.colores-i .pv2-rw .pv2-rw-etq{color:#0A66C2}

/* ---- (6-nov-2026) «Elige la ruta», opción 2 elegida, con colores bien distintos: Diagnóstico lavanda (le gustó), Certificación
   azul noche (el programa principal resalta), Especialidades amarillo suave, Remotos Work azul claro de Remotos Work.
   Certificación sin los datos de abajo; Especialidades solo con logos; Remotos Work con lluvia de caritas ---- */
html.colores-h{--p0:#ECEBFF;--p0t:#02005A;--p1:#02005A;--p1t:#fff;--p2:#FFF4C7;--p2t:#11111A;--p3:#E2EFFB;--p3t:#0A3E73}
html.colores-h .pv2-cert{--fondo:#02005A;--txt:#fff;--sub:rgba(255,255,255,.8);--sup:rgba(255,255,255,.1);--supb:rgba(255,255,255,.15);--acento:#FFE400;--pasos:#fff;--borde-panel:transparent;--etq-f:#fff;--etq-t:#02005A}
html.colores-h .pv2-esp{--fondo:#FFF4C7;--txt:#11111A;--sub:#11111Ac4;--sup:rgba(255,255,255,.78);--supb:rgba(17,17,26,.06);--acento:#7A5C00;--pasos:#fff;--borde-panel:transparent;--etq-f:#11111A;--etq-t:#fff}
html.colores-h .pv2-rw{--fondo:#E2EFFB;--txt:#0A3E73;--sub:#0A3E73c4;--sup:rgba(255,255,255,.75);--supb:rgba(2,0,90,.07);--acento:#0A66C2;--pasos:#fff;--borde-panel:transparent;--etq-f:#0A66C2;--etq-t:#fff}
/* Certificación: sin los datos, el diploma ocupa el espacio */
.pv2-cert .pv2-diploma{flex:1;padding:6px 0 0}
.pv2-cert .pv2-diploma img{max-height:none;width:100%}
/* Especialidades: solo los logos, 6 por camino, más grandes */
.pv2-esp-filas li{justify-content:center;padding:14px}
.pv2-esp-filas .pv2-logos{gap:10px}
.pv2-esp-filas .pv2-logos i{width:52px;height:52px;margin-left:0;border-radius:15px;box-shadow:0 10px 22px -14px rgba(2,0,60,.45),0 0 0 1px rgba(2,0,90,.06)}
.pv2-esp-filas .pv2-logos img{width:28px;height:28px}
/* Remotos Work: lluvia de caritas animadas (caen despacio por la mitad de arriba y se desvanecen antes del texto) */
.pv2-rw .caras{inset:0 0 34% 0!important;container-type:size;overflow:hidden;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.pv2-rw .cara{top:-56px!important;translate:-50% 0;animation:lluviaCara var(--dur,7s) linear infinite!important;animation-delay:var(--del,0s)!important}
@keyframes lluviaCara{0%{transform:translateY(0) rotate(-10deg);opacity:0}8%{opacity:1}100%{transform:translateY(calc(100cqh + 80px)) rotate(10deg);opacity:1}}
.pv2-rw .cara:nth-child(1){left:41%!important;--dur:7.8s;--del:-1.37s;width:28px!important;height:28px!important;display:block!important}.pv2-rw .cara:nth-child(2){left:78%!important;--dur:9.6s;--del:-2.74s;width:40px!important;height:40px!important;display:block!important}.pv2-rw .cara:nth-child(3){left:23%!important;--dur:6.9s;--del:-4.11s;width:30px!important;height:30px!important;display:block!important}.pv2-rw .cara:nth-child(4){left:60%!important;--dur:8.7s;--del:-5.48s;width:36px!important;height:36px!important;display:block!important}.pv2-rw .cara:nth-child(5){left:5%!important;--dur:6.0s;--del:-6.85s;width:34px!important;height:34px!important;display:block!important}.pv2-rw .cara:nth-child(6){left:42%!important;--dur:7.8s;--del:-8.22s;width:28px!important;height:28px!important;display:block!important}.pv2-rw .cara:nth-child(7){left:79%!important;--dur:9.6s;--del:-0.59s;width:40px!important;height:40px!important;display:block!important}.pv2-rw .cara:nth-child(8){left:24%!important;--dur:6.9s;--del:-1.96s;width:30px!important;height:30px!important;display:block!important}.pv2-rw .cara:nth-child(9){left:61%!important;--dur:8.7s;--del:-3.33s;width:36px!important;height:36px!important;display:block!important}.pv2-rw .cara:nth-child(10){left:6%!important;--dur:6.0s;--del:-4.70s;width:34px!important;height:34px!important;display:block!important}.pv2-rw .cara:nth-child(11){left:43%!important;--dur:7.8s;--del:-6.07s;width:28px!important;height:28px!important;display:block!important}.pv2-rw .cara:nth-child(12){left:80%!important;--dur:9.6s;--del:-7.44s;width:40px!important;height:40px!important;display:block!important}.pv2-rw .cara:nth-child(13){left:25%!important;--dur:6.9s;--del:-8.81s;width:30px!important;height:30px!important;display:block!important}.pv2-rw .cara:nth-child(14){left:62%!important;--dur:8.7s;--del:-1.18s;width:36px!important;height:36px!important;display:block!important}.pv2-rw .cara:nth-child(15){left:7%!important;--dur:6.0s;--del:-2.55s;width:34px!important;height:34px!important;display:block!important}.pv2-rw .cara:nth-child(16){left:44%!important;--dur:7.8s;--del:-3.92s;width:28px!important;height:28px!important;display:block!important}.pv2-rw .cara:nth-child(17){left:81%!important;--dur:9.6s;--del:-5.29s;width:40px!important;height:40px!important;display:block!important}.pv2-rw .cara:nth-child(18){left:26%!important;--dur:6.9s;--del:-6.66s;width:30px!important;height:30px!important;display:block!important}.pv2-rw .cara:nth-child(19){left:63%!important;--dur:8.7s;--del:-8.03s;width:36px!important;height:36px!important;display:block!important}.pv2-rw .cara:nth-child(20){left:8%!important;--dur:6.0s;--del:-0.40s;width:34px!important;height:34px!important;display:block!important}.pv2-rw .cara:nth-child(21){left:45%!important;--dur:7.8s;--del:-1.77s;width:28px!important;height:28px!important;display:block!important}.pv2-rw .cara:nth-child(22){left:82%!important;--dur:9.6s;--del:-3.14s;width:40px!important;height:40px!important;display:block!important}.pv2-rw .cara:nth-child(23){left:27%!important;--dur:6.9s;--del:-4.51s;width:30px!important;height:30px!important;display:block!important}.pv2-rw .cara:nth-child(24){left:64%!important;--dur:8.7s;--del:-5.88s;width:36px!important;height:36px!important;display:block!important}.pv2-rw .cara:nth-child(25){left:9%!important;--dur:6.0s;--del:-7.25s;width:34px!important;height:34px!important;display:block!important}.pv2-rw .cara:nth-child(26){left:46%!important;--dur:7.8s;--del:-8.62s;width:28px!important;height:28px!important;display:block!important}.pv2-rw .cara:nth-child(27){left:83%!important;--dur:9.6s;--del:-0.99s;width:40px!important;height:40px!important;display:block!important}.pv2-rw .cara:nth-child(28){left:28%!important;--dur:6.9s;--del:-2.36s;width:30px!important;height:30px!important;display:block!important}
@media (prefers-reduced-motion:reduce){.pv2-rw .cara{animation:none!important;top:auto!important}}
/* lluvia: caritas un poco más grandes */
.pv2-rw .cara:nth-child(1){width:38px!important;height:38px!important}.pv2-rw .cara:nth-child(2){width:50px!important;height:50px!important}.pv2-rw .cara:nth-child(3){width:40px!important;height:40px!important}.pv2-rw .cara:nth-child(4){width:46px!important;height:46px!important}.pv2-rw .cara:nth-child(5){width:44px!important;height:44px!important}.pv2-rw .cara:nth-child(6){width:38px!important;height:38px!important}.pv2-rw .cara:nth-child(7){width:50px!important;height:50px!important}.pv2-rw .cara:nth-child(8){width:40px!important;height:40px!important}.pv2-rw .cara:nth-child(9){width:46px!important;height:46px!important}.pv2-rw .cara:nth-child(10){width:44px!important;height:44px!important}.pv2-rw .cara:nth-child(11){width:38px!important;height:38px!important}.pv2-rw .cara:nth-child(12){width:50px!important;height:50px!important}.pv2-rw .cara:nth-child(13){width:40px!important;height:40px!important}.pv2-rw .cara:nth-child(14){width:46px!important;height:46px!important}.pv2-rw .cara:nth-child(15){width:44px!important;height:44px!important}.pv2-rw .cara:nth-child(16){width:38px!important;height:38px!important}.pv2-rw .cara:nth-child(17){width:50px!important;height:50px!important}.pv2-rw .cara:nth-child(18){width:40px!important;height:40px!important}.pv2-rw .cara:nth-child(19){width:46px!important;height:46px!important}.pv2-rw .cara:nth-child(20){width:44px!important;height:44px!important}.pv2-rw .cara:nth-child(21){width:38px!important;height:38px!important}.pv2-rw .cara:nth-child(22){width:50px!important;height:50px!important}.pv2-rw .cara:nth-child(23){width:40px!important;height:40px!important}.pv2-rw .cara:nth-child(24){width:46px!important;height:46px!important}.pv2-rw .cara:nth-child(25){width:44px!important;height:44px!important}.pv2-rw .cara:nth-child(26){width:38px!important;height:38px!important}.pv2-rw .cara:nth-child(27){width:50px!important;height:50px!important}.pv2-rw .cara:nth-child(28){width:40px!important;height:40px!important}
@media (max-width:1060px){.pv2-rw .cara{width:34px!important;height:34px!important}}
/* (6-nov-2026) Especialidades: eligió la 3B, azul acero con puntitos (como el cuadro con puntos que aprobó el 4-nov); fuera el amarillo */
html.colores-h{--p2:#CDD5F0;--p2t:#10123A}
html.colores-h .pv2-esp{--fondo:#CDD5F0;--txt:#10123A;--sub:#10123Ac4;--sup:rgba(255,255,255,.55);--supb:rgba(2,0,90,.06);--acento:#02005A;--borde-panel:rgba(2,0,90,.08);background:radial-gradient(rgba(2,0,90,.18) 1px,transparent 1.6px) 0 0/16px 16px,#CDD5F0}
html.colores-h .pv2-esp .pv2-esp-filas li{background:transparent;box-shadow:none}

/* ---- (6-nov-2026) Puestos: carrusel 3D centrado (propuesta C elegida por Ronaldo; original en puestos-opciones/c/estilo.css) ---- */
/* ============================================================
   Puestos · Propuesta C «Carrusel 3D centrado» (5-nov-2026)
   La tarjeta activa al centro, a tamaño completo y con su video;
   a cada lado las vecinas, más chicas, giradas hacia el centro y
   un poco apagadas. Todo lo que se mueve lo pone mov.js, y solo
   con transform y opacity. Los números de abajo (--c-*) son la
   forma del carrusel: mov.js los lee y los ajusta para que nada
   se corte en los bordes de la pantalla.
   ============================================================ */

.c3d{overflow:hidden;overflow:clip}
.c3d .prof-marco{position:relative;margin-top:clamp(30px,3.6vw,50px);padding-bottom:clamp(44px,4.4vw,68px)}

.c3d .prof-pista{
  --w:clamp(300px,23.6vw,340px);   /* ancho de la tarjeta del centro */
  --c-x1:.88;   /* distancia del centro a la 1.ª vecina (en anchos de tarjeta) */
  --c-x2:.74;   /* de la 1.ª a la 2.ª vecina */
  --c-s1:.82;   /* tamaño de la 1.ª vecina */
  --c-s2:.68;   /* tamaño de la 2.ª vecina */
  --c-r1:22;    /* giro de la 1.ª vecina (grados) */
  --c-r2:30;    /* giro de la 2.ª vecina */
  --c-v1:.22;   /* cuánto se apaga la 1.ª vecina */
  --c-v2:.38;   /* cuánto se apaga la 2.ª vecina */
  --c-lados:2;  /* vecinas visibles a cada lado */
  position:relative;display:block;height:calc(var(--w) * 4 / 3);
  margin:0;padding:0;overflow:visible;gap:0;
  perspective:1800px;perspective-origin:50% 50%;
  scroll-snap-type:none;scroll-behavior:auto;
  touch-action:pan-y;-webkit-user-select:none;user-select:none;
}
.c3d .pt{
  position:absolute;top:0;left:50%;width:var(--w);margin:0 0 0 calc(var(--w) / -2);
  flex:none;scroll-snap-align:none;transform-origin:50% 50%;
  will-change:transform,opacity;-webkit-tap-highlight-color:transparent;
}
.c3d .pt.fuera{pointer-events:none}
.c3d .pt img{-webkit-user-drag:none}

/* velo que apaga un poco a las vecinas (su opacidad la pone mov.js); con el ratón encima de una vecina, se aclara un poco */
.c3d .pt-velo{position:absolute;inset:0;z-index:4;border-radius:inherit;opacity:0;pointer-events:none}
.c3d .pt-velo::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#0A0B33;transition:opacity .35s cubic-bezier(.16,1,.3,1)}
@media (hover:hover) and (pointer:fine){.c3d .pt:hover .pt-velo::before{opacity:.45}}

/* sombra azul suave solo bajo la tarjeta del centro: aparece y se va con opacidad (la sombra en sí no se anima) */
.c3d .pt::before{content:"";position:absolute;inset:6% 4% 0;border-radius:inherit;box-shadow:0 46px 70px -34px rgba(4,0,140,.42);opacity:0;transition:opacity .7s cubic-bezier(.16,1,.3,1);pointer-events:none}
.c3d .pt.activa::before{opacity:1}

/* el «+» solo en la del centro: en las de los lados, un clic la trae al centro */
.c3d .pt-mas{transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1)}
.c3d .pt:not(.activa) .pt-mas{opacity:0}
.c3d .pt:not(.activa):hover .pt-mas{transform:none}

/* tableta: la tarjeta toma más ancho de pantalla (mov.js decide si caben dos vecinas por lado o una) */
@media (max-width:1179px){
  .c3d .prof-pista{--w:clamp(270px,35vw,360px)}
}

/* teléfono: la del centro casi a lo ancho y una vecina asomando a cada lado (solo su imagen, sin pedazos de nombre) */
@media (max-width:640px){
  .c3d .prof-marco{margin-top:26px;padding-bottom:40px}
  .c3d .prof-pista{--w:min(74vw,310px);--c-x1:.2;--c-s1:.86;--c-r1:16;--c-v1:.3;--c-lados:1}
  .c3d .pt-pie{transition:opacity .45s cubic-bezier(.16,1,.3,1)}
  .c3d .pt:not(.activa) .pt-pie{opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .c3d .pt-mas,.c3d .pt-pie{transition:none}
}
/* (6-nov-2026) Certificación con el color de la tarjeta 3 de la ruta («Construye tu perfil profesional»): azul noche con luces azules */
html.colores-h .pv2-cert{background:radial-gradient(60% 55% at 22% 18%,rgba(4,0,188,.85),transparent 70%),radial-gradient(55% 50% at 70% 85%,rgba(0,18,253,.5),transparent 70%),radial-gradient(30% 30% at 55% 45%,rgba(255,228,0,.10),transparent 70%),#02005A}
html.colores-h .prog-wrap .programas-lista a[data-vista="1"]::before{background:radial-gradient(60% 140% at 18% 30%,rgba(4,0,188,.85),transparent 70%),radial-gradient(50% 120% at 75% 90%,rgba(0,18,253,.45),transparent 70%),#02005A}
/* (6-nov-2026) Diagnóstico en blanco con los números en amarillo (eligió la 2); la lavanda se confundía con Especialidades */
html.colores-h{--p0:#F6F7FC;--p0t:#11111A}
html.colores-h .pv2-diag{--fondo:#fff;--txt:#11111A;--sub:#11111Ac4;--acento:#0400BC;--borde-panel:rgba(2,0,90,.12)}
html.colores-h .pv2-diag .pv2-pasos li{background:#F6F7FC}
html.colores-h .pv2-diag .pv2-pasos li span{background:#FFE400;color:#11111A}
/* (6-nov-2026) Diagnóstico blanco con cuerpo: «se pierde con la página» → borde más marcado, sombra más profunda y franja amarilla arriba */
html.colores-h .pv2-diag{overflow:hidden;box-shadow:inset 0 0 0 1.5px rgba(2,0,90,.16),0 34px 64px -34px rgba(2,0,60,.45)!important}
html.colores-h .pv2-diag::after{content:"";position:absolute;inset:0 0 auto 0;height:10px;background:#FFE400}
html.colores-h .pv2-diag .pv2-pasos li{background:#F4F5FB;box-shadow:inset 0 0 0 1px rgba(2,0,90,.06)}
@media (min-width:1061px){html.colores-h .prog-wrap .programas-lista a[data-vista="0"]::before{background:linear-gradient(90deg,#FFE400 0 6px,#F6F7FC 6px)}}
/* (6-nov-2026) Diagnóstico, 2.ª vuelta («lo puedes hacer mejor»): recorrido de 4 pasos con números amarillos unidos por una línea,
   el último paso destacado, «10 min» con reloj, brillo amarillo suave en la esquina y botón para empezar */
html.colores-h .pv2-diag{background:radial-gradient(70% 45% at 100% 100%,rgba(255,228,0,.22),rgba(255,228,0,0) 70%),radial-gradient(60% 40% at 0% 0%,rgba(4,0,188,.05),rgba(4,0,188,0) 70%),#fff}
.pv2-diag .pv2-cab{position:relative}
.pv2-tiempo{position:absolute;top:-4px;right:0;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#FFE400;color:#11111A;font:600 13px/1 var(--f-tit)}
.pv2-tiempo svg{width:15px;height:15px;fill:none;stroke:#11111A;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html.colores-h .pv2-diag .pv2-pasos{position:relative;gap:6px;align-content:center;padding-left:0}
html.colores-h .pv2-diag .pv2-pasos::before{content:"";position:absolute;left:22px;top:26px;bottom:26px;width:2px;background:repeating-linear-gradient(#FFE400 0 6px,transparent 6px 11px)}
html.colores-h .pv2-diag .pv2-pasos li{position:relative;background:none;box-shadow:none;padding:12px 14px 12px 4px;font-size:clamp(17px,1.35vw,20px);border-radius:16px}
html.colores-h .pv2-diag .pv2-pasos li span{width:38px;height:38px;font-size:16px;background:#FFE400;color:#11111A;box-shadow:0 0 0 5px #fff}
html.colores-h .pv2-diag .pv2-pasos li:last-child{background:#FFF8CC;box-shadow:inset 0 0 0 1px rgba(255,200,0,.45)}
html.colores-h .pv2-diag .pv2-pasos li:last-child span{box-shadow:0 0 0 5px #FFF8CC}
.pv2-diag .pv2-ir{display:inline-flex;align-self:flex-start;gap:8px;margin-top:2px;padding:13px 20px;border-radius:999px;background:#11111A;color:#FFE400;font:600 14.5px/1 var(--f-tit);text-decoration:none;pointer-events:auto}
.pv2-diag .pv2-ir:hover{background:#0400BC;color:#fff}
@media (max-width:1060px){.pv2-tiempo{position:static;align-self:flex-start;margin-bottom:8px}.pv2-diag .pv2-cab{display:flex;flex-direction:column}}
/* (6-nov-2026) Diagnóstico, ajustes: la línea amarilla une solo del círculo 1 al 4 (ya no sobra arriba ni abajo) y se dibuja al entrar;
   un aro amarillo suave recorre los pasos 1→4 en bucle (el diagnóstico avanzando); en el teléfono, círculos y letra a su medida */
html.colores-h .pv2-diag .pv2-pasos{flex:none;margin-block:auto}
html.colores-h .pv2-diag .pv2-pasos::before{top:31px;bottom:31px;transform-origin:top;background:repeating-linear-gradient(#FFD400 0 6px,transparent 6px 11px)}
html.colores-h .pv2-diag .pv2-pasos li span{position:relative}
html.colores-h .pv2-diag .pv2-pasos li span::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #FFD400;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  html.colores-h .pv2-diag.activa .pv2-pasos::before{animation:trazoDiag .9s var(--ease) .2s both}
  html.colores-h .pv2-diag.activa .pv2-pasos li span::after{animation:aroDiag 4.8s ease-out infinite;animation-delay:calc(1.1s + var(--i) * 1.2s)}
}
@keyframes trazoDiag{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes aroDiag{0%{opacity:.95;transform:scale(1)}22%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
@media (max-width:1060px){
  html.colores-h .pv2-diag .pv2-pasos li{padding:9px 12px 9px 4px;font-size:15px;gap:12px}
  html.colores-h .pv2-diag .pv2-pasos li span{width:32px;height:32px;font-size:14px}
  html.colores-h .pv2-diag .pv2-pasos::before{left:19px;top:25px;bottom:25px}
}
/* (6-nov-2026) Diagnóstico en el teléfono: «10 min» en la misma fila que «Diagnóstico · Gratis» y el aro de los pasos más corto (no tapa el texto) */
@media (max-width:1060px){
  .pv2-diag .pv2-cab{display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between;gap:6px 10px}
  .pv2-diag .pv2-cab b{flex-basis:100%}
  .pv2-tiempo{position:static;margin:0;padding:6px 10px;gap:5px;font-size:12px}
  .pv2-tiempo svg{width:13px;height:13px}
  html.colores-h .pv2-diag .pv2-pasos li span::after{inset:-4px}
}
@media (max-width:1060px) and (prefers-reduced-motion:no-preference){
  html.colores-h .pv2-diag.activa .pv2-pasos li span::after{animation-name:aroDiagTel}
}
@keyframes aroDiagTel{0%{opacity:.95;transform:scale(1)}22%{opacity:0;transform:scale(1.32)}100%{opacity:0;transform:scale(1.32)}}
/* (6-nov-2026) «Elige la ruta», filas de la izquierda (pedido de Ronaldo): todas con el estilo de la del Diagnóstico, fondo clarito y
   barra de color a la izquierda, cada una con el color de su programa (amarillo, azul noche, azul acero, azul de Remotos Work).
   En reposo la barra es corta; al pasar el ratón crece a todo el alto y sube el fondo. La caja grande de la derecha no cambia. */
@media (min-width:1061px){
  html.colores-h{--p0:#F6F7FC;--p0t:#11111A;--p1:#EEF0FB;--p1t:#02005A;--p2:#F0F2FA;--p2t:#10123A;--p3:#EDF5FC;--p3t:#0A3E73}
  html.colores-h .prog-wrap .programas-lista a[data-vista]::before{background:var(--c)}
  html.colores-h .prog-wrap .programas-lista a[data-vista]::after{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--barra,#FFE400);transform:scaleY(.4);transition:transform .45s var(--ease);pointer-events:none}
  html.colores-h .prog-wrap .programas-lista a[data-vista]:hover::after,html.colores-h .prog-wrap .programas-lista a[data-vista]:focus-visible::after,html.colores-h .prog-wrap .programas-lista a[data-vista].viendo::after{transform:none}
  html.colores-h .prog-wrap .programas-lista a[data-vista="1"]{--barra:linear-gradient(#0400BC,#02005A)}
  html.colores-h .prog-wrap .programas-lista a[data-vista="2"]{--barra:#7C8DCC}
  html.colores-h .prog-wrap .programas-lista a[data-vista="3"]{--barra:#0A66C2}
}
/* (6-nov-2026) Filas de «Elige la ruta», 2.ª vuelta. Ronaldo: «se ven raros porque las especialidades y el certificado tienen el mismo color».
   Cada fila vuelve a tomar el color de su caja de la derecha (Diagnóstico casi blanco, Certificación azul noche con luces, Especialidades
   azul acero con puntitos, Remotos Work azul claro) y lleva su barra a la izquierda como la del Diagnóstico, que sube junto con el color.
   Barras: amarillo en Diagnóstico y Certificación (el amarillo de su caja), azul noche en Especialidades, azul de Remotos Work. */
@media (min-width:1061px){
  html.colores-h{--p0:#F6F7FC;--p0t:#11111A;--p1:#02005A;--p1t:#fff;--p2:#CDD5F0;--p2t:#10123A;--p3:#E2EFFB;--p3t:#0A3E73}
  html.colores-h .prog-wrap .programas-lista a[data-vista="1"]::before{background:radial-gradient(60% 140% at 18% 30%,rgba(4,0,188,.85),transparent 70%),radial-gradient(50% 120% at 75% 90%,rgba(0,18,253,.45),transparent 70%),#02005A}
  html.colores-h .prog-wrap .programas-lista a[data-vista="2"]::before{background:radial-gradient(rgba(2,0,90,.18) 1px,transparent 1.6px) 0 0/16px 16px,#CDD5F0}
  html.colores-h .prog-wrap .programas-lista a[data-vista]::after{transform:scaleY(0);transform-origin:bottom}
  html.colores-h .prog-wrap .programas-lista a[data-vista="1"]{--barra:#FFE400}
  html.colores-h .prog-wrap .programas-lista a[data-vista="2"]{--barra:#02005A}
}
/* (6-nov-2026) «Todo lo que necesitas»: la R más pequeña (Ronaldo: «no tan grande»), en medio del océano (lo pone sitio.js con OCEANO) */
@media (min-width:901px){.rr.azul .rr-r{max-width:200px}}
/* (6-nov-2026) con el mapa más alejado, los nombres de las ciudades se agrandan un poco para que se sigan leyendo igual que antes */
.rr.azul .rr-mapa .c text{font-size:1.4px}
.rr.azul .rr-mapa .c circle:not(.ping){r:.5px}
/* (6-nov-2026) teléfono: las ciudades quedan detrás de las tarjetas y sus nombres salían cortados («…nos Aires»): ahí solo los puntos */
@media (max-width:900px){.rr.azul .rr-mapa .c text{display:none}}
/* (6-nov-2026) teléfono: la R más pequeña (Ronaldo: «en teléfono es muy grande») */
@media (max-width:900px){.rr.azul .rr-r{max-width:62px}}
.rr-mapa .c.tapada{display:none} /* (6-nov-2026) ciudad debajo de una tarjeta: no se muestra (lo marca sitio.js) */
/* (6-nov-2026) «Todo lo que necesitas»: tarjetas livianas. Ronaldo: «mucha carga visual», «que si pasan el mouse se abran», «como la de
   IA desde el día 1 pero con las imágenes referentes a cada cosa», «quitar el texto, dejar solo títulos». En reposo solo número y título;
   al pasar el ratón, con el teclado o cuando les toca en el recorrido (.on) se abren hacia abajo con una fila de imágenes reales
   (insignias del Campus, logos de herramientas, Zoom y banderas). */
.rr-fichas{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:14px;background:#F3F5FD;box-shadow:inset 0 0 0 1px #E6E9F5}
.rr-fichas img{display:block;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 6px 14px -8px rgba(2,0,60,.4);object-fit:contain}
.rr-fichas img.herramientas{padding:9px}
.rr-fichas img.insignias{padding:1px}
.rr-fichas img.banderas{object-fit:cover;padding:0;box-shadow:0 0 0 2px #fff,0 6px 14px -8px rgba(2,0,60,.4)}
@keyframes fichaEntra{from{opacity:0;transform:translateY(8px) scale(.7)}to{opacity:1;transform:none}}
@media (min-width:901px){
  .rr.azul .rr-col{gap:clamp(86px,11vh,112px)}
  .rr.azul .rr-b{position:relative;isolation:isolate;overflow:visible;padding:0;width:min(100%,280px);outline:none}
  .rr.azul .rr-t{position:relative;display:flex;align-items:baseline;gap:12px;padding:17px 20px;background:#fff;border-radius:22px}
  .rr.azul .rr-t small{margin:0;flex:none}
  .rr.azul .rr-t b{margin:0;font-size:17px}
  .rr-abre{position:absolute;left:0;right:0;top:calc(100% - 22px);z-index:-1;padding:30px 8px 8px;background:#fff;border-radius:0 0 22px 22px;box-shadow:0 30px 60px -28px rgba(0,0,0,.75);clip-path:inset(0 0 100% 0);opacity:0;transition:clip-path .45s var(--ease),opacity .25s}
  .rr.azul .rr-b:is(:hover,:focus-visible,.on) .rr-abre{clip-path:inset(0 -60px -80px -60px);opacity:1}
  .rr.azul .rr-b.on .rr-abre{box-shadow:0 0 0 3px #FFE400,0 30px 60px -28px rgba(0,0,0,.75)}
  .rr.azul .rr-b:is(:hover,:focus-visible,.on) .rr-fichas img{animation:fichaEntra .45s var(--ease) both;animation-delay:calc(var(--i) * 45ms + 80ms)}
}
@media (max-width:900px){
  .rr-abre{padding-top:6px}
  .rr.azul .rr-fichas{gap:3px;padding:5px;border-radius:10px}
  .rr-fichas img{width:22px;height:22px}
  .rr-fichas img.herramientas{padding:4px}
  .rr-fichas img:nth-child(n+5){display:none}
}
@media (prefers-reduced-motion:reduce){.rr-abre{transition:none}.rr-fichas img{animation:none!important}}
/* (6-nov-2026) tarjeta abierta: contorno amarillo más fino con un brillo suave, para que no pese sobre el mapa */
@media (min-width:901px){
  .rr.azul .rr-b.on{box-shadow:0 0 0 2px #FFE400,0 0 28px rgba(255,228,0,.22),0 30px 60px -28px rgba(0,0,0,.75)}
  .rr.azul .rr-b.on .rr-abre{box-shadow:0 0 0 2px #FFE400,0 0 28px rgba(255,228,0,.22),0 30px 60px -28px rgba(0,0,0,.75)}
}
/* (6-nov-2026) HighLevel y Hotmart traen su propio margen: un poco más grandes dentro del círculo */
.rr-fichas img[src$="highlevel.svg"],.rr-fichas img[src$="hotmart.svg"]{padding:6px}
/* (6-nov-2026) Tarjetas 01, 02, 04 y 05: dos opciones para comparar (?tarjetas=a o sin nada = A; ?tarjetas=c = C). La IA y el Bono, con sus logos. */
html:not(.tarjetas-c) .rr-fichas.op-c{display:none}
html.tarjetas-c .rr-fichas.op-a{display:none}
/* A: portadas reales del Campus */
.rr-fichas .rr-v{position:relative;display:block;flex:none;width:76px;height:43px;border-radius:9px;overflow:hidden;box-shadow:0 6px 14px -8px rgba(2,0,60,.45)}
.rr-fichas .rr-v img{width:100%;height:100%;border-radius:0;padding:0;object-fit:cover;background:none;box-shadow:none}
.rr-fichas .rr-v::before{content:"";position:absolute;z-index:1;left:50%;top:50%;margin:-6px 0 0 -4px;border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.rr-fichas .rr-v em{position:absolute;z-index:1;right:4px;bottom:4px;padding:2px 5px;border-radius:5px;background:rgba(2,0,40,.8);color:#fff;font:700 9px/1 var(--f-txt);font-style:normal}
.rr-fichas .rr-ar{width:24px;height:24px;border-radius:6px;padding:0;object-fit:cover;background:#02005A;box-shadow:0 0 0 1.5px #fff,0 4px 10px -6px rgba(2,0,60,.5)}
.rr-fichas:has(.rr-ar){gap:4px}
.rr-fichas .rr-g{width:118px;height:66px;border-radius:10px;padding:0;object-fit:cover;background:#1a1405;box-shadow:0 0 0 1.5px #FFD000,0 8px 18px -10px rgba(120,90,0,.6)}
.rr-envivo{display:inline-flex;align-items:center;gap:6px;flex:none;height:30px;padding:0 11px;border-radius:999px;background:#E8193C;color:#fff;font:700 11px/1 var(--f-tit);letter-spacing:.06em}
.rr-envivo i{width:7px;height:7px;border-radius:50%;background:#fff;animation:latidoVivo 1.4s ease-in-out infinite}
@keyframes latidoVivo{0%,100%{opacity:1}50%{opacity:.25}}
/* C: capturas reales del Campus */
.rr-fichas.op-c{padding:6px}
.rr-fichas .rr-cap{width:100%;height:78px;border-radius:10px;padding:0;object-fit:cover;object-position:left top;background:#EEF1FF;box-shadow:none}
.rr-fichas .rr-cap.medio{object-position:left 44%}
.rr-fichas .rr-cap.abajo{object-position:center bottom}
@media (min-width:901px){.rr.azul .rr-b:is(:hover,:focus-visible,.on) .rr-fichas > span{animation:fichaEntra .45s var(--ease) both;animation-delay:calc(var(--i) * 45ms + 80ms)}}
@media (max-width:900px){
  .rr-fichas .rr-v{width:52px;height:30px}.rr-fichas .rr-v:nth-child(n+3){display:none}.rr-fichas .rr-v em{font-size:7.5px;padding:1px 3px}
  .rr-fichas .rr-ar{width:14px;height:14px;border-radius:4px}.rr-fichas .rr-ar:nth-child(n+7){display:none}
  .rr-fichas .rr-g{width:56px;height:32px;border-radius:6px}
  .rr-envivo{height:20px;padding:0 6px;font-size:8px;gap:4px}.rr-envivo i{width:5px;height:5px}
  .rr-fichas .rr-cap{height:46px}
}
/* (6-nov-2026, 3.ª vuelta) Tarjetas: al pararse en cada logo o imagen aparece qué gana la persona; fotos de Johnson y Yale,
   miniaturas de clases, cinta de las 9 áreas que pasa sola y despliegue sin encimarse (separación fija y la abierta por encima). */
@media (min-width:901px){
  .rr.azul .rr-col{gap:104px}
  .rr.azul .rr-b:is(:hover,:focus-within,.on){z-index:6}
  .rr.azul .rr-b:is(:hover,:focus-visible,:focus-within,.on) .rr-abre{clip-path:inset(0 -140px -140px -140px);opacity:1}
  .rr.azul .rr-b:is(:hover,:focus-visible,:focus-within,.on) .rr-fichas > *{animation:fichaEntra .45s var(--ease) both;animation-delay:calc(var(--i, 0) * 45ms + 80ms)}
  .rr.azul .rr-b:not(:hover):not(:focus-within):not(.on) .rr-cinta-in{animation-play-state:paused}
}
.rr-ch{position:relative;display:block;flex:none;border-radius:50%;outline:none;cursor:default}
.rr-ch:has(.rr-v){border-radius:9px}
.rr-ch::after{content:attr(data-tip);position:absolute;top:calc(100% + 10px);left:50%;z-index:5;width:max-content;max-width:190px;padding:7px 10px;border-radius:9px;background:#11111A;color:#fff;font:600 12px/1.3 var(--f-txt);text-align:center;white-space:normal;box-shadow:0 10px 24px -10px rgba(0,0,0,.6);opacity:0;transform:translate(-50%,4px);transition:opacity .18s,transform .18s;pointer-events:none}
.rr-ch::before{content:"";position:absolute;top:calc(100% + 5px);left:50%;z-index:5;border:5px solid transparent;border-top:0;border-bottom-color:#11111A;transform:translateX(-50%);opacity:0;transition:opacity .18s;pointer-events:none}
.rr-ch:is(:hover,:focus)::after{opacity:1;transform:translate(-50%,0)}
.rr-ch:is(:hover,:focus)::before{opacity:1}
.rr-fichas .rr-ch > img,.rr-fichas .rr-ch > .rr-v{transition:transform .2s var(--ease)}
.rr-fichas .rr-ch:is(:hover,:focus) > img,.rr-fichas .rr-ch:is(:hover,:focus) > .rr-v{transform:translateY(-3px)}
.rr-ch.rr-envivo{display:inline-flex;border-radius:999px}
.rr-fichas .rr-foto img{padding:0;object-fit:cover;box-shadow:0 0 0 2px #fff,0 6px 14px -8px rgba(2,0,60,.45)}
.rr-fichas .rr-foto + .rr-foto{margin-left:-18px}
.rr-fichas .rr-live em{background:#E8193C}
/* 02: cinta con las 9 áreas del Campus */
.rr-fichas.con-cinta{display:block;padding:10px 0}
.rr-cinta{display:block;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.rr-cinta-in{display:flex;width:max-content;animation:cintaAreas 30s linear infinite}
.rr-cinta-in > .rr-v{margin-right:8px}
.rr-cinta:hover .rr-cinta-in{animation-play-state:paused}
.rr-fichas .rr-cinta .rr-v::before{display:none}
@keyframes cintaAreas{to{transform:translateX(-50%)}}
@media (max-width:900px){
  .rr.azul .rr-b{position:relative;overflow:visible}
  .rr.azul .rr-b:focus-within{z-index:6}
  .rr-fichas .rr-v,.rr-cinta .rr-v{width:38px;height:22px;border-radius:5px}
  .rr-fichas .rr-v::before{margin:-4px 0 0 -3px;border-left-width:7px;border-top-width:4px;border-bottom-width:4px}
  .rr-fichas .rr-v em{right:2px;bottom:2px;padding:1px 2px;font-size:6px}
  .rr-fichas .rr-foto img{width:20px;height:20px}
  .rr-fichas .rr-foto + .rr-foto{margin-left:-8px}
  .rr-fichas .rr-ch:nth-child(n+5){display:none}
  .rr-ch.rr-envivo{height:20px;padding:0 6px;font-size:8px;gap:4px}
  .rr-ch::after{max-width:140px;font-size:11px}
  .rr-fichas.con-cinta{padding:5px 0}
  .rr-cinta-in > .rr-v{margin-right:4px}
}
@media (prefers-reduced-motion:reduce){.rr-cinta-in{animation:none}}
@media (min-width:901px){.rr.azul .rr-b{width:min(100%,304px)}} /* (6-nov-2026) que «CV, LinkedIn y entrevistas» quepa en una línea */
@media (max-width:900px){.rr-fichas:has(.rr-envivo) .rr-ch:nth-child(n+4){display:none}} /* (6-nov-2026) teléfono: «EN VIVO» + YouTube + Zoom, sin salirse */
/* (6-nov-2026, 4.ª vuelta) 01 Clases: Yale + portada aprobada + pieza «Estamos en vivo», más grandes; el en vivo sin botón de reproducir */
.rr-fichas .rr-v.grande{width:98px;height:55px;border-radius:10px}
.rr-fichas .rr-live::before{display:none}
.rr-fichas .rr-v.grande em{font-size:10px;padding:3px 6px}
@media (max-width:900px){.rr-fichas .rr-v.grande{width:46px;height:26px;border-radius:5px}.rr-fichas .rr-v.grande em{font-size:6px;padding:1px 3px}}
/* (6-nov-2026, 5.ª vuelta) 01 Clases: tres miniaturas iguales (10 min, 14 min y en vivo) que caben en la fila */
.rr-fichas .rr-v.grande{width:80px;height:45px}
@media (max-width:900px){.rr-fichas .rr-v.grande{width:38px;height:21px;border-radius:5px}} /* (6-nov-2026) teléfono: las 3 miniaturas de 01 caben en la tarjeta */
@media (max-width:900px){.rr-fichas .rr-v.grande em{font-size:6.5px;padding:1px 3px;right:2px;bottom:2px}.rr-fichas .rr-v.grande::before{margin:-7px 0 0 -3px}}