/* ============================================================
   VISIONARIOS · MARCA DEFINITIVA
   Manual de identidad corporativa (Laura, 4/11/2026) + píxeles vivos.
   Se carga la última: manda sobre site.css y brand.css.
   Paleta oficial: amarillo #FFD200 (Pantone 109 C) · negro #101921 (Black 6)
   auxiliares: azul #3A4AF5 · lavanda #B0A6DF · coral #D95E3A · crema #F4F2EA
   Tipografías: Syne (ExtraBold títulos / Bold subtítulos) · Lato (texto).
   ============================================================ */

/* --- Tipografías corporativas, servidas desde aquí (sin terceros) --- */
@font-face{font-family:Syne;src:url('./fonts/syne-latin-wght.woff2') format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Syne;src:url('./fonts/syne-latin-ext-wght.woff2') format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lato;src:url('./fonts/lato-latin-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lato;src:url('./fonts/lato-latin-ext-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lato;src:url('./fonts/lato-latin-700.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* --- Paleta y tipografía --- */
:root{
  --ink:#101921;--cream:#f4f2ea;--yellow:#ffd200;--lime:#ffd200;--blue:#3a4af5;--lavender:#b0a6df;--coral:#d95e3a;
  --line:rgba(16,25,33,.24);
  --display:Syne,'Trebuchet MS',Arial,sans-serif;--body:Lato,'Helvetica Neue',Arial,sans-serif;
  --accent:var(--yellow);--pixel:7px;
}
html[data-start=empleo]{--accent:var(--yellow)}
html[data-start=emprender]{--accent:var(--coral)}
html[data-start=descubrir]{--accent:var(--lavender)}
body{font-family:var(--body);background:var(--cream);color:var(--ink);font-weight:400}
h1,h2,h3,h4,.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,.logos-label,.button,.metric-card strong,.art-caption,.filter,.topline{font-family:var(--display)}
h1,h2{font-weight:800;letter-spacing:-.025em}
h3,h4{font-weight:700;letter-spacing:-.015em}
.button,.chip,.filter{font-weight:700;letter-spacing:-.01em}
em{font-family:var(--display);font-style:italic;font-weight:400;letter-spacing:-.02em}
p,li,.field,.prose p,summary{font-family:var(--body)}
strong,b{font-weight:700}
.hero h1{letter-spacing:-.035em}
.footer-top h2{letter-spacing:-.03em}
::selection{background:var(--yellow);color:var(--ink)}
.dot{background:var(--blue)}
.coral{color:var(--ink)}
.button.ink:hover{box-shadow:4px 4px 0 var(--yellow)}
.button.cream:hover{box-shadow:4px 4px 0 var(--blue)}

/* --- Logotipo oficial en la cabecera: icono (píxeles vivos) + palabra --- */
.wordmark{--mk:clamp(27px,3.1vw,42px);display:inline-flex;align-items:center;padding:10px 0;text-decoration:none;line-height:0;letter-spacing:0}
.wordmark .mark-spark{width:var(--mk);height:var(--mk);flex:none}
.wordmark-text{height:calc(var(--mk) * .49);width:auto;margin-left:calc(var(--mk) * .228);display:block;transition:transform .5s var(--spring,cubic-bezier(.34,1.56,.64,1))}
.wordmark:hover .wordmark-text{transform:translateY(-2px)}
.site-header{border-bottom:1px solid var(--ink)}

/* --- La chispa: el icono oficial, píxel a píxel y vivo --- */
.spark{display:inline-block;overflow:visible;vertical-align:middle;color:var(--ink);shape-rendering:crispEdges}
.spark .pxl{fill:var(--spark-ink,currentColor);transform-box:fill-box;transform-origin:50% 50%;animation:pxl-in .5s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--i) * 32ms)}
.spark .pxl-eye{fill:var(--spark-eye,var(--yellow));translate:var(--sx,0) var(--sy,0);transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.spark .pxl-free{animation:pxl-in .5s cubic-bezier(.34,1.56,.64,1) backwards,pxl-float 4.5s ease-in-out calc(1s + var(--i) * 90ms) infinite}
@keyframes pxl-in{from{opacity:0;scale:0;rotate:-45deg}to{opacity:1;scale:1;rotate:0deg}}
@keyframes pxl-float{0%,100%{translate:0 0}50%{translate:.18px -.3px}}
.spark.is-hit .pxl{animation:pxl-hit .45s cubic-bezier(.34,1.56,.64,1);animation-delay:calc(var(--i) * 18ms)}
@keyframes pxl-hit{40%{scale:.45;rotate:35deg;fill:var(--yellow)}}
.wordmark .spark:hover{cursor:pointer}

/* Chispas decorativas: sustituyen al ojo provisional, heredan su colocación */
.page-eye,.big-eye{color:var(--ink)}
.page-hero.lime .page-eye,.page-hero.lavender .page-eye{--spark-ink:var(--ink);--spark-eye:#fff}
.page-hero.coral .page-eye{--spark-ink:var(--ink);--spark-eye:var(--yellow)}
.big-eye{--spark-ink:var(--ink);--spark-eye:var(--yellow)}
.spark.page-eye,.spark.big-eye{filter:drop-shadow(0 10px 24px rgba(16,25,33,.18))}

/* --- Pegatinas pixeladas (elemento gráfico del manual) --- */
.px-edge{--px:6px;clip-path:polygon(
  var(--px) 0,calc(100% - var(--px)) 0,calc(100% - var(--px)) var(--px),100% var(--px),
  100% calc(100% - var(--px)),calc(100% - var(--px)) calc(100% - var(--px)),calc(100% - var(--px)) 100%,
  var(--px) 100%,var(--px) calc(100% - var(--px)),0 calc(100% - var(--px)),0 var(--px),var(--px) var(--px));
  border:0!important}

/* Cabecera: las pegatinas oficiales del manual, flotando y arrastrables */
.hero-art{position:relative;min-height:470px;overflow:visible}
.hero-art img.sticker{position:absolute;display:block;height:auto;background:none;border:0;padding:0;border-radius:0;
  -webkit-user-drag:none;user-select:none;filter:drop-shadow(0 14px 26px rgba(16,25,33,.16))}
.st-empezar{width:62%;left:-2%;bottom:4%;--r:-5deg;animation-duration:6.4s}
.st-activate{width:44%;right:0;top:0;--r:7deg;animation-delay:-2.1s;animation-duration:7.2s}
.st-estrella{width:40%;right:16%;bottom:-6%;--r:-3deg;animation-delay:-4s;animation-duration:5.8s;z-index:2}
.hero-art .art-caption{bottom:-26px}
@media(max-width:900px){.hero-art{min-height:330px}.st-empezar{width:66%;bottom:6%}.st-activate{width:46%}.st-estrella{width:42%;right:6%;bottom:-2%}}
@media(max-width:520px){.hero-art{min-height:290px}}

/* --- Patrón y pixelado de marca como fondo --- */
.pattern-strip{height:58px;background:url('./marca/patron-negro.svg') repeat-x center/auto 100%;opacity:.9}
.pixel-rule{height:14px;background:
  linear-gradient(90deg,var(--ink) 0 14px,transparent 14px 28px) repeat-x 0 0/28px 14px;
  opacity:.9}

/* --- Barra de progreso de lectura, en píxeles (guiño arcade) --- */
.px-progress{position:fixed;top:0;left:0;right:0;height:6px;z-index:300;pointer-events:none;
  background:linear-gradient(90deg,var(--yellow) 0 6px,transparent 6px 12px) repeat-x 0 0/12px 6px;
  -webkit-mask:linear-gradient(90deg,#000 0 0) 0 0/var(--p,0%) 100% no-repeat;mask:linear-gradient(90deg,#000 0 0) 0 0/var(--p,0%) 100% no-repeat}

/* --- Botón de juego en el pie --- */
.play-link{display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid rgba(244,242,234,.35);color:var(--cream);
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.08em;padding:11px 15px;cursor:pointer;transition:background .25s,color .25s,transform .25s}
.play-link:hover{background:var(--yellow);color:var(--ink);transform:translateY(-2px)}
.play-link i{width:9px;height:9px;background:var(--yellow);display:block;animation:pulse 1.6s ease-in-out infinite}
.play-link:hover i{background:var(--ink)}

/* --- Mini juego "LA CHISPA" --- */
.arcade{position:fixed;inset:0;z-index:500;display:grid;place-items:center;background:rgba(16,25,33,.93);padding:16px;animation:fadeUp .35s ease}
.arcade[hidden]{display:none}
.arcade-box{width:min(680px,100%);background:var(--ink);border:2px solid var(--yellow);padding:16px;position:relative}
.arcade-head{display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--cream);font-family:var(--display);font-size:12px;letter-spacing:.1em;margin-bottom:12px}
.arcade-head b{color:var(--yellow);font-size:15px}
.arcade canvas{display:block;width:100%;height:auto;background:#0b1118;image-rendering:pixelated;touch-action:none}
.arcade-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:12px;color:rgba(244,242,234,.75);font-size:11px;font-family:var(--display);letter-spacing:.06em}
.arcade-close{background:none;border:1px solid rgba(244,242,234,.4);color:var(--cream);font-family:var(--display);font-size:11px;padding:9px 12px;cursor:pointer;letter-spacing:.08em}
.arcade-close:hover{background:var(--yellow);color:var(--ink)}
.arcade-cta{display:inline-block;background:var(--yellow);color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:700;font-size:12px;padding:11px 15px;letter-spacing:.02em}
.arcade-cta:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--blue)}

/* --- Banda de logotipos institucionales (FSE+, obligatorio) --- */
.logos-band{align-items:flex-end}
.logos-official{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;background:#fff;padding:14px 18px}
.logos-official img{height:46px;width:auto;display:block}
.logos-band.is-dark .logos-official{background:#fff}
.logos-note{font-size:10px;line-height:1.5;opacity:.75;max-width:420px;margin-top:10px;font-family:var(--body)}
@media(max-width:900px){.logos-official{gap:12px 18px;padding:12px 14px}.logos-official img{height:34px}}

/* --- Detalles de marca sueltos --- */
.badge{background:var(--accent);border-color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--yellow)}
.metric-card strong{color:var(--blue)}
.topline{background:var(--ink);color:var(--cream)}
.topline span{letter-spacing:.1em}
.review-notice{background:var(--yellow);border-color:var(--ink)}
.hero-title .outline{-webkit-text-stroke:2px var(--ink)}
.lime-text{color:var(--yellow)}
footer{background:var(--ink)}
.footer-logo{display:block;width:min(420px,70%);height:auto;margin-bottom:26px}
.ticker{background:var(--yellow);border-color:var(--ink)}
.ticker .sep{background:var(--ink);border-radius:0;animation:spin 5s linear infinite}

/* Tipografía de display: Syne es más ancha que Unbounded; afinamos los tamaños grandes */
.hero h1{font-size:clamp(40px,6vw,98px)}
.footer-top h2{font-size:clamp(46px,7.6vw,118px)}
.page-hero h1{font-size:clamp(34px,5.4vw,84px)}
.apply-intro h1{font-size:clamp(34px,4.8vw,68px)}
.sticker-blue{font-size:clamp(40px,4.8vw,74px)}
@media(max-width:520px){.hero h1{font-size:clamp(30px,9.4vw,52px)}.footer-top h2{font-size:clamp(32px,11vw,56px)}}

/* Quien prefiere menos movimiento, lo tiene */
@media(prefers-reduced-motion:reduce){
  .spark .pxl,.spark .pxl-free,.play-link i{animation:none!important}
  .spark .pxl-eye{translate:0 0!important}
  .px-progress{display:none}
}

/* --- Remates --- */
.spark.is-blink .pxl-eye{fill:#fff}
.orbit-spark{position:absolute;top:-26px;left:1%;width:clamp(56px,7vw,104px);height:auto;color:var(--ink);--spark-eye:var(--yellow);animation:spark-turn 9s ease-in-out infinite}
@keyframes spark-turn{0%,100%{rotate:-8deg;translate:0 0}50%{rotate:6deg;translate:0 -10px}}
@media(max-width:900px){.orbit-spark{width:62px;top:-14px;left:-6%}}
.page-eye.spark,.big-eye.spark{height:auto}
.hero-art .sticker{box-shadow:none}
.footer-bottom>div{align-items:center}

/* --- Equilibrio de la cabecera con la tipografía nueva (Syne es más ancha) --- */
.hero{grid-template-columns:1.05fr .88fr;column-gap:26px}
.hero-heading{min-width:0}
.hero h1{font-size:clamp(36px,4.8vw,78px)}
.wordmark{--mk:clamp(29px,3.4vw,46px)}
.st-empezar{width:58%;left:0;bottom:12%}
.st-estrella{width:34%;right:4%;bottom:-4%}
.st-activate{width:40%;right:2%;top:-2%}
@media(max-width:1100px){.hero{grid-template-columns:1fr .9fr}}
/* Solicitud recibida: la pegatina oficial da la enhorabuena */
.thanks-sticker{display:block;width:min(260px,62%);height:auto;margin-bottom:26px;animation:pxl-pop .7s cubic-bezier(.34,1.56,.64,1) both}
@keyframes pxl-pop{from{opacity:0;scale:.6;rotate:-10deg}to{opacity:1;scale:1;rotate:0deg}}

/* Accesibilidad: con «menos movimiento» los titulares tienen que verse (antes se quedaban
   fuera de su línea recortada y el H1 desaparecía). Esto va al final a propósito: manda. */
@media(prefers-reduced-motion:reduce){
  .hero-title .line-in{transform:none!important}
  .word>span{transform:none!important}
  [data-reveal],[data-reveal-stagger]>*{opacity:1!important;transform:none!important}
  .starts,.hero-bottom,.hero-art{opacity:1!important}
  .rot>span{opacity:0}.rot>span.is-on{opacity:1}
  .spark .pxl{opacity:1;scale:1;rotate:0deg}
  .thanks-sticker{opacity:1;scale:1;rotate:0deg}
}

/* --- Móvil: que el titular quepa y las pegatinas se vean enteras --- */
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero h1{font-size:clamp(34px,7.2vw,54px)}
  .hero-art{min-height:250px;margin-top:4px;width:100%;justify-self:stretch;height:auto}
  .st-empezar{width:58%;left:0;bottom:8%}
  .st-activate{width:34%;right:2%;top:0}
  .st-estrella{width:30%;right:13%;bottom:0}
}
@media(max-width:520px){
  .hero h1{font-size:clamp(29px,8.2vw,44px)}
  .hero-art{min-height:210px}
  .st-empezar{width:64%}
  .st-activate{width:36%}
  .st-estrella{width:32%;right:6%}
}

/* --- Ajustes finos (10/11): Syne es más ancha que Unbounded; que nada se corte ni ensanche la página --- */
footer{overflow-x:clip}
@media(max-width:560px){
  .hero h1{font-size:clamp(22px,7.4vw,42px)}
  .footer-top h2{font-size:clamp(24px,8.8vw,50px)}
}