/* VISIONARIOS · capa de marca y movimiento (carga después de site.css y manda sobre él). */
@font-face{font-family:Unbounded;src:url('./fonts/unbounded-latin-wght.woff2') format('woff2');font-weight:300 900;font-display:swap}
:root{--display:Unbounded,Inter,Arial,sans-serif;--accent:var(--lime);--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1)}
html[data-start=empleo]{--accent:var(--lime)}
html[data-start=emprender]{--accent:var(--coral)}
html[data-start=descubrir]{--accent:var(--lavender)}
@view-transition{navigation:auto}

/* Tipografía de display */
h1,h2,h3,.wordmark,.sticker,.hour-stack strong,.format-grid strong,.footer-top h2,.step-number,.card-index,.eyebrow,.badge,.ticker,.chip,.success-mark,.benefits b,.mini-steps b{font-family:var(--display)}
h1,h2{font-weight:800;letter-spacing:-.03em}
h3{font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(30px,4.1vw,60px);line-height:1}
h3{font-size:24px;line-height:1.1}
.eyebrow{font-weight:600;letter-spacing:.14em;font-size:10px}
.hero h1{font-size:clamp(42px,6.5vw,106px);line-height:.95;letter-spacing:-.03em}
.page-hero h1{font-size:clamp(38px,6vw,92px);line-height:.98;letter-spacing:-.03em;max-width:860px}
.apply-intro h1{font-size:clamp(38px,5.2vw,74px);line-height:.98;letter-spacing:-.03em}
.statement-card h3{font-size:clamp(26px,3vw,44px)}
.footer-top h2{font-size:clamp(52px,8.5vw,130px);letter-spacing:-.04em}
.reading h1{font-size:clamp(34px,5vw,64px)}
.empty-state h2{font-size:clamp(28px,3.4vw,40px)}
.post-card h2{font-size:24px}
.path-card h3{font-size:clamp(24px,2.2vw,32px)}
.journey h3{font-size:clamp(22px,2.4vw,34px)}
.section-head h2 em,.hero h1 em,h2 em,h1 em{font-weight:400}

/* El ojo: marca provisional. Mira al cursor y parpadea (JS). */
.eye{display:inline-block;overflow:visible;transform-origin:50% 50%;transition:transform .1s;vertical-align:middle;color:var(--ink)}
.eye.blink{transform:scaleY(.06)}
.eye .iris{transform:translate(var(--ex,0px),var(--ey,0px));transition:transform .18s var(--ease)}
.wordmark{display:inline-flex;align-items:center;font-weight:800;letter-spacing:-.02em;font-size:clamp(20px,2.1vw,29px);line-height:1}
.wordmark .eye{width:1.06em;height:1.06em;margin:0 .01em;transition:transform .1s,translate .4s var(--spring)}
.wordmark:hover .eye{translate:0 -3px}
.page-eye{position:absolute;right:5%;top:50%;width:min(30vw,330px);height:auto;translate:0 -50%;rotate:-8deg;color:var(--ink);--eye-bg:rgba(255,255,255,.55);pointer-events:none;animation:floatEye 7s ease-in-out infinite}
.page-hero.lime .page-eye{--eye-iris:var(--blue)}.page-hero.coral .page-eye{--eye-iris:var(--ink);--eye-pupil:var(--cream)}.page-hero.lavender .page-eye{--eye-iris:var(--blue)}
.big-eye{position:absolute;right:6%;bottom:-40px;width:min(28vw,300px);height:auto;rotate:10deg;color:var(--ink);--eye-bg:var(--cream);--eye-iris:var(--ink);--eye-pupil:var(--coral);pointer-events:none;animation:floatEye 8s ease-in-out infinite}
@keyframes floatEye{0%,100%{translate:0 -50%}50%{translate:0 calc(-50% - 14px)}}
.big-eye{animation-name:floatBig}@keyframes floatBig{0%,100%{translate:0 0}50%{translate:0 -14px}}

/* Cabecera viva */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(84vh,880px);display:grid;grid-template-columns:1.15fr .85fr;align-items:center;column-gap:30px;row-gap:0;padding:48px 4% 38px}
.hero::before{content:"";position:absolute;inset:-25%;z-index:-2;background:radial-gradient(38% 46% at 18% 28%,color-mix(in srgb,var(--accent) 62%,transparent),transparent 72%),radial-gradient(34% 44% at 82% 72%,color-mix(in srgb,var(--lavender) 55%,transparent),transparent 72%),radial-gradient(26% 30% at 60% 15%,color-mix(in srgb,var(--coral) 35%,transparent),transparent 72%);animation:drift 16s ease-in-out infinite alternate;transition:background 1.2s var(--ease)}
@keyframes drift{to{transform:translate(4%,6%) rotate(5deg) scale(1.08)}}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero-heading{position:relative;z-index:1}
.badge{background:var(--accent);transition:background .8s var(--ease);font-weight:600;letter-spacing:.06em}
.badge .dot{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.5}}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}
.hero-title .line-in{display:block;transform:translateY(110%);animation:rise .9s var(--ease) forwards}
.hero-title .line:nth-child(2) .line-in{animation-delay:.12s}.hero-title .line:nth-child(3) .line-in{animation-delay:.24s}
@keyframes rise{to{transform:none}}
.hero-title .outline{color:transparent;-webkit-text-stroke:2px var(--ink)}
.rot{display:inline-grid;text-align:left;vertical-align:top}
.rot>span{grid-area:1/1;opacity:0;transform:translateY(.55em) rotate(2deg);transition:opacity .5s var(--ease),transform .65s var(--ease);white-space:nowrap}
.rot>span.is-on{opacity:1;transform:none}
.rot>span.is-out{opacity:0;transform:translateY(-.55em) rotate(-2deg)}
.starts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:30px;opacity:0;animation:fadeUp .8s .5s var(--ease) forwards}
.starts-label{font-size:10px;font-weight:600;letter-spacing:.12em;margin-right:8px}
.chip{border:1px solid var(--ink);background:rgba(244,242,233,.6);padding:10px 16px;border-radius:100px;font-weight:600;font-size:12px;cursor:pointer;transition:transform .25s var(--spring),background .25s,color .25s,box-shadow .25s;letter-spacing:.02em}
.chip:hover{transform:translateY(-2px) rotate(-1deg);box-shadow:3px 3px 0 var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--accent);transform:scale(1.04)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-bottom{grid-column:1/-1;opacity:0;animation:fadeUp .8s .7s var(--ease) forwards}
.hero-bottom p{font-family:var(--display);font-weight:600;font-size:15px}
.hero-bottom p span{font-family:Inter,Arial,sans-serif;font-weight:400}
.start-note{display:block;margin-top:6px;font-size:13px;min-height:1.4em;color:var(--ink);transition:opacity .4s}
.start-note.is-swap{opacity:0}

/* Pegatinas: flotan y se pueden arrastrar */
.hero-art{position:relative;min-height:440px;opacity:0;animation:fadeUp 1s .35s var(--ease) forwards}
.sticker{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:.95;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r,0deg));animation:float 6s ease-in-out infinite;will-change:transform;transition:box-shadow .2s,scale .2s var(--spring)}
.sticker:active{cursor:grabbing}
@media(pointer:coarse){.sticker{touch-action:auto;cursor:default}}
.sticker.is-drag{animation:none;z-index:6;scale:1.04;box-shadow:14px 14px 0 rgba(32,33,30,.25)}
.sticker-blue{--r:-7deg;font-size:clamp(46px,5.4vw,84px)}
.sticker-pink{--r:9deg;animation-delay:-2.2s;animation-duration:7s}
.sticker-lime{--r:-5deg;animation-delay:-4s;animation-duration:5.4s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}
.orbit{animation:spin 24s linear infinite;color:var(--ink);opacity:.9}
@keyframes spin{to{rotate:360deg}}
.art-caption{font-family:var(--display);letter-spacing:.14em;font-size:9px}

/* Marquesina real */
.ticker{display:block;padding:0;overflow:hidden;position:relative}
.ticker-track{display:flex;width:max-content;animation:marquee 28s linear infinite;will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-group{display:flex;align-items:center;gap:38px;padding:17px 19px 17px 19px;white-space:nowrap}
.ticker-group span{font-weight:700;font-size:13px;letter-spacing:.04em}
.ticker .sep{display:inline-block;width:12px;height:12px;background:var(--ink);border-radius:3px;animation:spin 5s linear infinite;flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Aparecer al bajar */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
[data-reveal=left]{transform:translateX(-34px)}[data-reveal=right]{transform:translateX(34px)}[data-reveal=zoom]{transform:scale(.92)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-stagger]>*{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
[data-reveal-stagger].is-in>*{opacity:1;transform:none}
[data-reveal-stagger].is-in>*:nth-child(2){transition-delay:.1s}[data-reveal-stagger].is-in>*:nth-child(3){transition-delay:.2s}[data-reveal-stagger].is-in>*:nth-child(4){transition-delay:.3s}[data-reveal-stagger].is-in>*:nth-child(5){transition-delay:.4s}[data-reveal-stagger].is-in>*:nth-child(6){transition-delay:.5s}
.word{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em 0 0;margin-right:-.04em}
.word>span{display:inline-block;transform:translateY(108%);transition:transform .8s var(--ease)}
.is-in .word>span{transform:none}
.is-in .word:nth-child(2)>span{transition-delay:.06s}.is-in .word:nth-child(3)>span{transition-delay:.12s}.is-in .word:nth-child(4)>span{transition-delay:.18s}.is-in .word:nth-child(5)>span{transition-delay:.24s}.is-in .word:nth-child(6)>span{transition-delay:.3s}

/* Tarjetas que reaccionan */
.tilt{position:relative;transform-style:preserve-3d;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.tilt::after{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.38),transparent 62%);opacity:0;transition:opacity .35s;pointer-events:none}
.tilt:hover::after{opacity:1}
.tilt.is-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);box-shadow:12px 16px 0 var(--ink);z-index:2}
.path-card .card-index{transition:transform .4s var(--spring),background .3s,color .3s}
.path-card:hover .card-index{transform:rotate(-12deg) scale(1.15);background:var(--ink);color:var(--cream)}
.path-card a span,.button span,.resource-list>a>span,.text-link{transition:transform .3s var(--spring)}
.path-card:hover a span,.button:hover span{transform:translate(4px,-4px)}
.resource-list>a{transition:padding-left .35s var(--ease),background .35s}
.resource-list>a:hover{padding-left:14px;background:rgba(255,255,255,.4)}
.resource-list>a:hover>span{transform:translate(0,4px)}
.benefits>div{transition:transform .35s var(--ease)}
.benefits>div:hover{transform:translateY(-6px)}
.benefits b{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid var(--ink);border-radius:50%;font-size:11px;margin-bottom:14px;transition:background .3s,color .3s}
.benefits>div:hover b{background:var(--ink);color:var(--accent)}

/* Recorrido que se dibuja al bajar */
.journey{position:relative}
.journey-line{position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:rgba(32,33,30,.18);pointer-events:none}
.journey-line::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(var(--p,0));transform-origin:top;transition:transform .15s linear}
.journey article{transition:transform .6s var(--ease),opacity .6s var(--ease);position:relative;border-bottom-color:rgba(32,33,30,.25)}
.journey article:not(.is-in){opacity:.3;transform:translateX(18px)}
.step-number{display:grid;place-items:center;width:56px;height:56px;border:1.5px solid var(--ink);border-radius:50%;font-weight:700;font-size:13px;background:var(--cream);position:relative;z-index:1;transition:background .45s var(--ease),color .45s,transform .45s var(--spring)}
.journey article.is-in .step-number{background:var(--ink);color:var(--accent);transform:scale(1.08)}
.journey article:hover .step-arrow{transform:translate(5px,-5px)}
.step-arrow{transition:transform .3s var(--spring);display:inline-block}

/* Números que suben, acordeón suave, pie */
.hour-stack strong,.format-grid strong{font-variant-numeric:tabular-nums}
.hour-stack>div{transition:transform .35s var(--ease)}.hour-stack>div:hover{transform:translateX(10px)}
details p{animation:fadeUp .4s var(--ease)}
summary span{transition:transform .35s var(--spring)}
details[open] summary span{transform:rotate(45deg)}
.lime-text{display:inline-block;animation:bounce 2.6s var(--ease) infinite;transform-origin:50% 100%}
@keyframes bounce{0%,100%{transform:none}10%{transform:translateY(-14%) rotate(-8deg)}20%{transform:none}}
.footer-contact a{transition:translate .3s var(--spring)}.footer-contact a:hover{translate:-6px 0}
.cta-strip{position:relative;overflow:hidden}
.cta-strip::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,255,255,.35) 80%,transparent 90%);animation:spin 14s linear infinite;pointer-events:none}
.cta-strip>*{position:relative}
.training-band,.community-preview,.campus-banner{position:relative;overflow:hidden}
.training-band::after{content:"";position:absolute;width:52vw;height:52vw;max-width:720px;max-height:720px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%);right:-18%;top:-30%;animation:drift 12s ease-in-out infinite alternate;pointer-events:none}
.training-band>*{position:relative;z-index:1}

/* Cursor propio (solo ratón) y botones magnéticos */
.cursor{display:none}
@media(pointer:fine){.cursor{display:block;position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),opacity .3s;opacity:0;will-change:left,top}
.cursor.is-on{opacity:1}.cursor.is-link{width:52px;height:52px}.cursor.is-down{width:8px;height:8px}
.button{will-change:transform}}

/* Móvil */
@media(max-width:1100px){.hero{grid-template-columns:1.1fr .9fr}.page-eye{width:min(26vw,220px);right:3%}}
@media(max-width:900px){.hero{grid-template-columns:1fr;min-height:0;padding:28px 5% 26px;row-gap:6px}.hero-art{min-height:300px;order:3}.hero-bottom{order:4}.hero::before{animation-duration:22s}.page-eye{width:130px;right:-10px;top:14px;translate:0 0;rotate:-10deg;opacity:.55;animation:none}.big-eye{width:150px;right:-10px;bottom:-30px}.journey-line{left:15px;top:20px;bottom:20px}.step-number{width:32px;height:32px;font-size:10px}.starts{margin-top:22px}.chip{padding:9px 13px;font-size:11px}.ticker-group{gap:26px;padding:14px 13px}.ticker-group span{font-size:11px}.tilt.is-tilt{transform:none;box-shadow:none}}
@media(max-width:520px){.hero h1{font-size:clamp(32px,10.2vw,56px)}.hero-art{min-height:260px}.sticker-blue{font-size:40px}.page-hero h1{font-size:clamp(32px,10vw,46px)}.footer-top h2{font-size:clamp(36px,12.5vw,60px)}h2{font-size:clamp(28px,8vw,40px)}.apply-intro h1{font-size:clamp(34px,10vw,48px)}.statement-card h3{font-size:clamp(24px,7.5vw,34px)}.reading h1{font-size:clamp(30px,8.5vw,40px)}}

/* Quien prefiere menos movimiento, lo tiene */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}[data-reveal],[data-reveal-stagger]>*{opacity:1;transform:none}.word>span{transform:none}.hero-title .line-in{transform:none}.starts,.hero-bottom,.hero-art{opacity:1}.hero-canvas,.cursor{display:none!important}.rot>span{opacity:0}.rot>span.is-on{opacity:1}.journey article:not(.is-in){opacity:1;transform:none}.ticker-track{animation:none!important}.ticker{overflow-x:auto}}

/* Marquesina en móvil: recortada, nunca desplaza la página */
@media(max-width:900px){.ticker{overflow:hidden!important;overflow-x:hidden!important}}

/* Rejillas en móvil: nada mide más que la pantalla; el ojo decorativo no pisa el titular */
.benefits>div,.two-columns>*,.format-grid>*,.path-grid>*,.post-grid>*{min-width:0}
h1,h2,h3{overflow-wrap:anywhere}
@media(max-width:900px){.benefits h3,.post-card h2{font-size:19px}.page-eye{top:-26px;right:-30px;width:150px;opacity:.38}}

@media(max-width:520px){.art-caption{display:none}}

/* Identidad institucional (logotipos oficiales), cifras, fotos de la comunidad y CTA fijo en móvil */
.logos-band{display:flex;flex-wrap:wrap;gap:28px 56px;align-items:center;justify-content:space-between;padding:34px 5%;border-top:1px solid rgba(32,33,30,.2)}
.logos-band.is-dark{border-top-color:rgba(244,242,233,.18);border-bottom:1px solid rgba(244,242,233,.18)}
.logos-group{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px}
.logos-label{font-family:var(--display);font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-right:6px}
.logos-band img{height:44px;width:auto;display:block}.logos-band a:nth-of-type(2) img{height:54px}
.logos-band a{display:inline-block;transition:transform .3s var(--spring)}.logos-band a:hover{transform:translateY(-3px)}
.logos-text{font-size:12px;line-height:1.35;max-width:220px}.logos-text strong{display:block;font-weight:600}
.home-logos{background:var(--cream);color:var(--ink)}
.cifras .metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.metric-card{border:1px solid var(--ink);padding:26px 24px;background:#fff;min-height:170px;display:flex;flex-direction:column;gap:8px}
.metric-card strong{font-family:var(--display);font-size:clamp(40px,5vw,66px);line-height:1;letter-spacing:-.03em;color:var(--blue)}
.metric-card h3{font-size:16px}.metric-card p{font-size:12px;color:#555;margin-top:auto}
.post-card.has-image{padding-top:0}.post-image{width:calc(100% + 56px);margin:0 -28px 6px;aspect-ratio:16/10;object-fit:cover;display:block;border-bottom:1px solid var(--ink)}
.post-hero-image{width:100%;max-height:460px;object-fit:cover;margin:26px 0 10px;border:1px solid var(--ink)}
.mobile-cta{display:none}
@media(max-width:900px){.mobile-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:150;justify-content:space-between;align-items:center;background:var(--ink);color:var(--cream);padding:16px 20px;font-family:var(--display);font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 10px 30px rgba(32,33,30,.35);animation:fadeUp .6s 1s var(--ease) both}.mobile-cta span{color:var(--lime)}body{padding-bottom:76px}footer{padding-bottom:20px}.logos-band{gap:22px;padding:26px 5%}.logos-band img{height:36px}.logos-band a:nth-of-type(2) img{height:44px}.post-image{width:calc(100% + 56px)}}
@media(max-width:520px){.post-image{width:calc(100% + 48px);margin:0 -24px 6px}}

/* Aviso de versión en revisión y pista de arrastre solo con ratón */
.review-notice{margin:14px 0 22px;padding:12px 16px;border:1px solid var(--ink);background:var(--lime);font-size:13px;line-height:1.5}
@media(pointer:coarse){.drag-hint{display:none}}

/* Revisión responsive 15/10/2026: cabecera pequeña, nav, desbordes al revelar, descendentes, pie, objetivos táctiles, ojos, pegatina */
main#contenido{overflow-x:clip}
.word{padding:0 .04em .15em 0;margin:0 -.04em -.15em 0}
.word>span{transform:translateY(125%)}
.hero-title .line{padding-bottom:.12em;margin-bottom:-.12em}
.hero-title .line-in{transform:translateY(120%)}
.footer-top h2{white-space:nowrap}
.topline a{display:inline-flex;align-items:center;min-height:40px;margin:-10px 0}
.footer-contact a{padding:8px 0}
.footer-bottom a{display:inline-block;padding:12px 0}
@media(min-width:901px){.big-eye{right:-2%;bottom:-30%;width:min(20vw,240px)}}
@media(min-width:901px) and (max-width:1100px){.footer-top h2{font-size:clamp(52px,7.4vw,130px)}.page-eye{width:min(20vw,170px);right:2%;top:auto;bottom:-24px;translate:0 0}.sticker-lime{font-size:24px;padding:16px 18px}}
@media(max-width:900px){[data-reveal=left]{transform:translateX(-16px)}[data-reveal=right]{transform:translateX(16px)}.chip{padding:11px 14px}.filter{padding:11px 16px}.text-link{display:inline-block;padding:10px 0}.path-card a{display:flex;align-items:center;justify-content:space-between;min-height:44px}.sticker-lime{left:0}.menu-toggle{padding:10px 12px}}
@media(max-width:520px){.site-header{padding:12px 4%;gap:10px}.wordmark{font-size:clamp(15px,4.9vw,29px)}.menu-toggle{padding:10px 10px;gap:8px}.footer-top h2{font-size:clamp(34px,11.3vw,60px)}}
/* Teléfonos estrechos: botón de menú solo icono y marca más pequeña; objetivos táctiles ≥ 40 px */
.wordmark{padding:10px 0}
.benefits p a{display:inline-block;padding:12px 0}
.footer-contact a{padding:10px 0}
.footer-bottom a{padding:13px 0}
.logos-band a{padding:4px 0}
@media(max-width:900px){.text-link{padding:11px 0}}
@media(max-width:400px){.site-header{padding:10px 4%;gap:8px}.menu-toggle{font-size:0;gap:0;padding:9px 11px;min-height:40px}.menu-toggle span{font-size:18px;line-height:1}.wordmark{font-size:clamp(13px,4.2vw,29px)}}