/* Sitio publico: estilos del mock (sin Tailwind para no pisar su reset) *//* Postula Walmart Chile — implementación del handoff de Claude Design */
:root{
  --blue:#0053E2;--blue-hover:#0047C2;--navy:#001E60;--sky:#4DBDF5;--sky-light:#A9DDF7;
  --yellow:#FFC220;--mist:#DDE5ED;--mist-hover:#EEF3F8;--white:#FFFFFF;
  --shadow-kv:drop-shadow(0 8px 16px rgba(0,30,96,.28));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--mist);color:var(--navy);font-family:"Everyday Sans","Figtree",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--navy);text-decoration:underline}
a:hover{color:var(--blue)}
input::placeholder{color:#4a5a80}
img{max-width:100%}
[hidden]{display:none !important}

/* ---------- utilidades ---------- */
.ms{font-family:"Material Symbols Outlined";font-weight:300;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:"liga";font-feature-settings:"liga"}
.btn{appearance:none;border:0;margin:0;font:inherit;cursor:pointer;display:inline-block;text-decoration:none;border-radius:999px;text-align:center;line-height:normal}
.btn-primary{background:var(--blue);color:var(--white)}
.btn-primary:hover{background:var(--blue-hover);color:var(--white)}
.btn-sky{background:var(--sky);color:var(--navy)}
.btn-sky:hover{background:var(--sky-light);color:var(--navy)}
.reset-btn{appearance:none;border:0;margin:0;padding:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left}
.reset-btn.ms{font-family:"Material Symbols Outlined";font-weight:300;line-height:1;text-align:center}
.spark{display:block;flex-shrink:0}
.eyebrow{font-size:14px;font-weight:700}
.h1{margin:0;font-weight:500;font-size:clamp(44px,6vw,80px);line-height:1;letter-spacing:-.015em}
.h2{margin:0;font-weight:500;font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:-.01em}
.lead{margin:0;font-size:20px;line-height:1.3}
.circle-icon{width:44px;height:44px;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:22px;flex-shrink:0}
.photo{position:relative;overflow:hidden;background:rgba(127,127,127,.08)}
.photo>img:not(.kv){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pretty{text-wrap:pretty}
.balance{text-wrap:balance}

/* ---------- layout ---------- */
.shell{min-height:100vh;display:flex;flex-direction:column;gap:12px;padding:12px}
main{display:flex;flex-direction:column;gap:12px}
.page{display:flex;flex-direction:column;gap:12px}
.panel{border-radius:32px}
.panel-white{background:var(--white)}
.panel-blue{background:var(--blue);color:var(--white)}
.panel-navy{background:var(--navy);color:var(--white)}
.pad{padding:clamp(28px,5vw,64px)}
.split{display:grid;overflow:hidden}
.tile{background:var(--mist);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:14px}
.grid{display:grid;gap:12px}

/* ---------- header ---------- */
.site-header{position:sticky;top:12px;z-index:20;background:var(--white);border-radius:999px;padding:10px 12px 10px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;box-shadow:0 1px 0 rgba(0,30,96,.08)}
.logo-btn{display:flex;align-items:center;flex-shrink:0;padding:4px 0;text-decoration:none}
.logo-desk{height:26px;width:auto;aspect-ratio:1636/198;display:block}
.logo-mob{height:36px;width:auto;aspect-ratio:1072/452;display:none}
.nav-desk{flex:1 1 0%;order:1;min-width:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;justify-content:safe center;margin:0 -4px}
.nav-desk::-webkit-scrollbar{display:none}
.nav-link{white-space:nowrap;font-size:14.5px;padding:10px 14px;border-radius:999px;color:var(--navy);text-decoration:none}
.nav-link:hover{background:var(--mist-hover);color:var(--navy)}
.nav-link.is-active{background:var(--mist);font-weight:700}
.vacantes-desk{flex-shrink:0;order:2;font-size:15px;padding:12px 22px}
.mob-actions{display:none;align-items:center;gap:8px;order:2}
.vacantes-mob{font-size:15px;padding:12px 18px}
.menu-btn{font-family:"Material Symbols Outlined";font-weight:300;width:44px;height:44px;border-radius:50%;background:var(--mist);display:grid;place-items:center;font-size:24px;color:var(--navy);text-align:center}
.nav-mob{order:3;flex:1 1 100%;display:none;flex-direction:column;padding:8px 0 6px;border-top:1px solid var(--mist);margin-top:4px}
.nav-mob .nav-link{font-size:19px;padding:14px 8px;border-radius:16px;white-space:normal}
@media (max-width:1359px){
  .site-header{border-radius:28px}
  .nav-desk{order:3;flex:1 1 100%}
}
@media (max-width:719px){
  .logo-desk,.nav-desk,.vacantes-desk{display:none}
  .logo-mob{display:block}
  .mob-actions{display:flex}
  .site-header.menu-open .nav-mob{display:flex}
}

/* ---------- hero (inicio) ---------- */
.hero{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));min-height:560px}
.hero-copy{padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between;gap:40px;position:relative}
.hero-title{margin:0;font-weight:500;font-size:clamp(44px,6vw,84px);line-height:1;letter-spacing:-.015em;text-wrap:balance}
.hero-sub{margin:0;font-size:clamp(18px,1.6vw,22px);line-height:1.3;max-width:34ch;text-wrap:pretty}
.search{background:var(--white);border-radius:999px;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 20px;max-width:520px}
.search .ms{font-size:22px;color:var(--navy)}
.search input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:17px;color:var(--navy);background:transparent;padding:10px 0}
.search .btn{padding:12px 22px;font-size:16px}
.hero-media{min-height:420px}
.hero-patch{position:absolute;left:clamp(12px,2.5vw,32px);bottom:clamp(12px,2.5vw,32px);width:clamp(180px,22vw,300px);z-index:2;--r:-5deg}
/* logo oficial de marca empleadora: sin inclinación y con su proporción original */
.hero-patch.kv-official{--r:0deg;width:clamp(200px,24vw,340px)}

/* ---------- stats ---------- */
.stats{display:flex;flex-direction:column;gap:clamp(32px,4vw,56px)}
.stats-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:24px 48px;align-items:end}
.stats-head h2{margin:0;font-weight:500;font-size:clamp(34px,4.4vw,60px);line-height:1.05;letter-spacing:-.012em;text-wrap:balance}
.stats-aside{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.stats-aside .kv{width:clamp(96px,9vw,128px);--r:6deg}
.stats-aside p{margin:0;flex:1 1 240px;font-size:clamp(18px,1.5vw,21px);line-height:1.3;max-width:40ch;text-wrap:pretty}
.stats-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.stat{background:var(--mist);border-radius:24px;padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:240px}
.stat.end{justify-content:flex-end;gap:12px}
.stat.dark{background:var(--navy);color:var(--white)}
.stat-kicker{font-size:18px;font-weight:500}
.stat-body{display:flex;flex-direction:column;gap:12px}
.stat-num{font-size:clamp(64px,7vw,104px);font-weight:500;line-height:.95;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-text{font-size:17px;line-height:1.3;max-width:24ch}

/* ---------- atributos ---------- */
.attrs{padding:8px 8px clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px)}
.attrs-banner{position:relative;border-radius:26px;overflow:hidden;min-height:clamp(380px,40vw,580px);display:flex;align-items:flex-end}
.attrs-banner .photo{position:absolute;inset:0}
.attrs-banner .photo>img:not(.kv){object-position:50% 6%}
.attrs-banner .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,30,96,0) 0%,rgba(0,30,96,0) 45%,rgba(0,30,96,.6) 70%,rgba(0,30,96,.92) 100%);pointer-events:none}
.attrs-banner .copy{position:relative;padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;gap:14px;color:var(--white);max-width:760px}
.attrs-banner h1,.attrs-banner h2{margin:0;font-weight:500;font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
.attrs-banner p{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.3;max-width:44ch;text-wrap:pretty}
/* ---------- atributos: acordeón (escritorio) / carrusel tipo historias (mobile) ----------
   Abierta = layout editorial: columna de color con el texto + foto limpia a la derecha.
   Cerrada = franja de color con la foto teñida debajo. */
.acc{position:relative;padding:0 clamp(0px,1vw,8px);--split:44%}
.acc-track{display:flex;gap:10px;height:clamp(480px,40vw,600px)}
.acc-item{position:relative;flex:1 1 0;min-width:84px;border-radius:24px;overflow:hidden;background:var(--c);color:var(--fg);transition:flex-grow .75s cubic-bezier(.22,.9,.24,1),box-shadow .4s}
.acc-item.is-open{flex-grow:6;box-shadow:0 24px 60px rgba(0,30,96,.22)}

/* foto: ocupa toda la franja cerrada; al abrir se recoge al bloque derecho */
.acc-photo{position:absolute;inset:0;overflow:hidden;border-radius:0;transition:inset .75s cubic-bezier(.22,.9,.24,1),border-radius .75s}
.acc-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 35%);display:block;filter:saturate(.55);transform:scale(1.08);transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s}
.acc-item.is-open .acc-photo{inset:10px 10px 10px var(--split);border-radius:18px}
.acc-item.is-open .acc-photo img{filter:none;transform:scale(1);animation:acc-kenburns 12s ease-out both}
@keyframes acc-kenburns{from{transform:scale(1.07)}to{transform:scale(1)}}
/* Innovación: foto "sombreada" (duotono con el color del atributo) */
.acc-photo.is-duo img,.acc-item.is-open .acc-photo.is-duo img{filter:grayscale(1) contrast(1.12) brightness(1.04)}
.acc-photo.is-duo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,var(--blue),var(--sky));mix-blend-mode:multiply;opacity:.75;pointer-events:none}

.acc-shade{position:absolute;inset:0;background:color-mix(in srgb,var(--c) 86%,transparent);transition:opacity .5s ease,background .4s}
.acc-item:not(.is-open):hover .acc-shade{background:color-mix(in srgb,var(--c) 70%,transparent)}
.acc-item.is-open .acc-shade{opacity:0}

/* franja cerrada: número arriba, nombre vertical, ícono abajo */
.acc-tab{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:clamp(28px,4vw,48px) 0 22px;color:var(--fg);transition:opacity .35s ease}
.acc-num{font-size:14px;font-weight:700;opacity:.85}
.acc-name{writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(22px,2vw,28px);font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.acc-icon{width:48px;height:48px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-size:24px;transition:background .3s,color .3s}
.acc-item:not(.is-open):hover .acc-icon{background:var(--fg);color:var(--c)}
.acc-item.is-open .acc-tab{opacity:0;pointer-events:none}
.acc-tab:focus-visible{outline:3px solid var(--fg);outline-offset:-6px;border-radius:24px}

/* panel abierto: texto en la columna de color */
.acc-panel{position:absolute;inset:0;z-index:3;pointer-events:none}
.acc-item.is-open .acc-panel{pointer-events:auto}
.acc-content{position:absolute;left:0;top:0;bottom:0;width:var(--split);padding:clamp(28px,3vw,44px) clamp(24px,2.6vw,40px) clamp(40px,3.6vw,52px);display:flex;flex-direction:column;justify-content:flex-end;gap:16px;opacity:0;transform:translateY(24px);transition:opacity .3s ease,transform .3s ease}
.acc-item.is-open .acc-content{opacity:1;transform:none;transition:opacity .55s ease .3s,transform .7s cubic-bezier(.2,.8,.2,1) .3s}
.acc-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;margin-bottom:auto}
.acc-eyebrow .ms{width:36px;height:36px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-size:19px}
.acc-content h3{margin:0;font-size:clamp(24px,2.3vw,36px);font-weight:500;line-height:1.02;letter-spacing:-.018em;text-wrap:balance}
.acc-proof{margin:0;display:flex;align-items:flex-start;gap:12px;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.35;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--fg) 25%,transparent)}
.acc-proof>.ms{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--fg);color:var(--c);display:grid;place-items:center;font-size:21px;margin-top:-4px}
.acc-proof strong{font-weight:700}
.acc-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:4px;background:var(--fg);color:var(--c);padding:13px 22px;border-radius:999px;font-size:15.5px;font-weight:700;text-decoration:none;transition:transform .25s,box-shadow .25s}
.acc-cta:hover{color:var(--c);transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,30,96,.25)}
.acc-cta .ms{font-size:20px;transition:transform .25s}
.acc-cta:hover .ms{transform:translateX(4px)}
/* sticker montado sobre la unión color / foto */
.acc-kv{position:absolute;top:clamp(26px,3vw,40px);left:calc(var(--split) - clamp(40px,4vw,60px));z-index:4;opacity:0;transform:scale(.4) rotate(-20deg);transition:opacity .25s,transform .3s}
.acc-item.is-open .acc-kv{opacity:1;transform:none;transition:opacity .3s ease .45s,transform .7s cubic-bezier(.3,1.6,.5,1) .45s}

/* progreso de la rotación automática (bajo la columna de texto) */
.acc-progress{position:absolute;left:clamp(24px,2.6vw,40px);width:calc(var(--split) - 2 * clamp(24px,2.6vw,40px));bottom:20px;z-index:4;height:4px;border-radius:999px;background:color-mix(in srgb,var(--fg) 22%,transparent);overflow:hidden;opacity:0;transition:opacity .3s}
.acc-progress i{display:block;height:100%;width:0;background:var(--fg);border-radius:inherit}
.acc.is-auto .acc-item.is-open .acc-progress{opacity:1}
.acc.is-auto .acc-item.is-open .acc-progress i{animation:acc-fill var(--acc-dur,6s) linear forwards}
.acc.is-paused .acc-progress i,.acc.is-paused .acc-stories i{animation-play-state:paused !important}
@keyframes acc-fill{from{width:0}to{width:100%}}
.acc-stories{display:none}
@media (max-width:1180px) and (min-width:900px){
  .acc{--split:48%}
  .acc-content h3{font-size:clamp(26px,2.8vw,36px)}
}

/* ---------- mobile: carrusel con foto arriba y texto abajo, indicadores tipo historias ---------- */
@media (max-width:899px){
  .acc{padding:0}
  .acc-stories{display:flex;gap:6px;margin:0 8px 12px;pointer-events:none}
  .acc-stories span{flex:1;height:4px;border-radius:999px;background:var(--mist);overflow:hidden}
  .acc-stories i{display:block;height:100%;width:0;background:var(--navy);border-radius:inherit}
  .acc-stories span.is-done i{width:100%}
  .acc.is-auto .acc-stories span.is-now i{animation:acc-fill var(--acc-dur,6s) linear forwards}
  .acc:not(.is-auto) .acc-stories span.is-now i{width:100%}
  .acc-track{height:min(640px,82vh);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding:0 16px;margin:0 -8px;scroll-padding:0 16px}
  .acc-track::-webkit-scrollbar{display:none}
  .acc-item,.acc-item.is-open{flex:0 0 88%;min-width:0;scroll-snap-align:center;box-shadow:none}
  .acc-tab,.acc-shade,.acc-progress{display:none}
  .acc-panel{pointer-events:auto}
  .acc-item .acc-photo,.acc-item.is-open .acc-photo{inset:8px 8px auto 8px;height:46%;border-radius:18px}
  .acc-item .acc-photo img{filter:none;transform:none;animation:none}
  .acc-item .acc-photo.is-duo img{filter:grayscale(1) contrast(1.12) brightness(1.04)}
  .acc-item .acc-content{width:auto;right:0;top:46%;opacity:1;transform:none;padding:26px 22px 26px;justify-content:flex-start;gap:12px}
  .acc-eyebrow{margin-bottom:0}
  .acc-eyebrow .ms{width:30px;height:30px;font-size:17px}
  .acc-content h3{font-size:clamp(26px,7.4vw,34px)}
  .acc-proof{padding-top:12px;font-size:15px}
  .acc-proof>.ms{width:34px;height:34px;font-size:18px}
  .acc-item .acc-kv{opacity:1;transform:none;left:auto;right:18px;top:calc(46% - 46px)}
  .acc-item .acc-kv .kv{width:clamp(72px,21vw,96px) !important}
}
@media (prefers-reduced-motion:reduce){
  .acc-item,.acc-photo,.acc-photo img,.acc-shade,.acc-content,.acc-kv,.acc-tab{transition:none !important;animation:none !important}
}
.center-cta{display:flex;justify-content:center;padding:0 16px}
.center-cta .btn{padding:14px 28px;font-size:17px}

/* ---------- accesos ---------- */
.section-stack{display:flex;flex-direction:column;gap:36px}
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px}
.shortcuts{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.shortcut{background:var(--mist);border-radius:24px;padding:24px;min-height:210px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;text-decoration:none;color:var(--navy)}
.shortcut:hover{background:var(--sky-light);color:var(--navy)}
.shortcut-text{display:flex;flex-direction:column;gap:8px}
.shortcut-label{font-size:24px;font-weight:500;line-height:1.1}
.shortcut-desc{font-size:15.5px;line-height:1.3}

/* ---------- historia (inicio) ---------- */
.story{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.story-media{min-height:440px}
.story-pin{position:absolute;right:clamp(12px,2.5vw,28px);top:clamp(12px,2.5vw,28px);width:clamp(100px,10vw,150px);z-index:2;--r:-8deg}
.story-copy{padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:center;gap:24px}
.story-quote{margin:0;font-weight:500;font-size:clamp(28px,3.2vw,42px);line-height:1.15;text-wrap:pretty}

/* ---------- heroes internos ---------- */
.hero-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:40px;align-items:end}
.kv-group{display:flex;justify-content:flex-end;align-items:flex-end;gap:16px}
.hero-split{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.hero-split .hero-copy .stack{display:flex;flex-direction:column;gap:20px}

/* ---------- cultura: historia scroll ---------- */
.hist{position:relative;height:440vh}
.hist-sticky{position:sticky;top:96px;height:calc(100vh - 108px);border-radius:32px;overflow:hidden;background:var(--navy);color:var(--white)}
.hist-top{position:absolute;left:clamp(20px,3vw,40px);top:clamp(20px,3vw,36px);right:clamp(20px,3vw,40px);display:flex;justify-content:space-between;align-items:center;gap:16px;pointer-events:none}
.hist-steps{display:flex;gap:6px;align-items:center}
.hist-step{font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.12);color:var(--white)}
.hist-step.is-on{background:var(--yellow);color:var(--navy)}
.hist-card{position:absolute;bottom:clamp(16px,3vw,40px);pointer-events:none;background:var(--white);color:var(--navy);border-radius:24px;padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.hist-card .date{font-size:15px;font-weight:700;color:var(--blue)}
.hist-card p{margin:0;text-wrap:pretty}
.hist-c1{left:clamp(16px,3vw,40px);width:min(440px,calc(100% - 32px))}
.hist-c2{right:clamp(16px,3vw,40px);width:min(460px,calc(100% - 32px));opacity:0}
.hist-c3{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(16px,3vw,40px);opacity:0;pointer-events:none}
.purpose{background:var(--white);color:var(--navy);border-radius:28px;padding:clamp(24px,4vw,56px);width:min(820px,100%);display:flex;flex-direction:column;gap:clamp(18px,2.4vw,32px);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.purpose h2{margin:0;font-weight:500;font-size:clamp(30px,4.4vw,60px);line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
.purpose .rule{height:1px;background:var(--mist)}
.sam{display:flex;align-items:center;gap:clamp(16px,2vw,24px)}
.sam .photo{width:clamp(72px,8vw,104px);height:clamp(72px,8vw,104px);border-radius:50%;flex-shrink:0}

/* ---------- cultura: pilares y personas ---------- */
.pillars{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.pillar{min-height:240px}
.pillar h3,.benefit h3{margin:0;font-size:28px;font-weight:500;line-height:1.1}
.tile p{margin:0;font-size:16.5px;line-height:1.35;text-wrap:pretty}
.portraits{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.portrait{margin:0;background:var(--white);border-radius:32px;overflow:hidden;display:flex;flex-direction:column}
.portrait .photo{aspect-ratio:4/5}
.portrait figcaption{padding:24px 28px 28px;display:flex;flex-direction:column;gap:6px}
.portrait .q{font-size:22px;font-weight:500;line-height:1.15}

/* ---------- explora ---------- */
.explora-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px}
.explora-top .stack{display:flex;flex-direction:column;gap:20px;flex:1 1 320px}
.patch-precios{width:clamp(110px,13vw,190px);flex-shrink:0;--r:8deg;background:var(--white);border-radius:50%;padding:clamp(4px,.5vw,7px);box-sizing:content-box}
.pill-links{display:flex;flex-wrap:wrap;gap:12px}
.pill-light{background:var(--white);color:var(--navy);padding:14px 24px;border-radius:999px;font-size:16px;text-decoration:none}
.pill-light:hover{color:var(--blue)}
.pill-outline{border:1.5px solid var(--white);color:var(--white);padding:12.5px 24px;border-radius:999px;font-size:16px;text-decoration:none}
.pill-outline:hover{background:rgba(255,255,255,.12);color:var(--white)}
.fa{padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;gap:clamp(28px,3vw,40px)}
.fa-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 40px}
.fa-head .stack{display:flex;flex-direction:column;gap:14px;max-width:640px}
.fa-head p{margin:0;font-size:18px;line-height:1.3;text-wrap:pretty}
.tabs{display:flex;gap:4px;background:var(--mist);border-radius:999px;padding:4px}
.tab{padding:12px 26px;border-radius:999px;font-size:16px;color:var(--navy);text-align:center}
.tab[aria-selected="true"]{background:var(--navy);color:var(--white)}
.formats{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.format{background:var(--mist);border-radius:24px;overflow:hidden;display:flex;flex-direction:column}
.format-media{position:relative;aspect-ratio:16/9;margin:8px 8px 0;background:var(--white);border-radius:18px;display:grid;place-items:center;overflow:hidden}
.format-logo{width:64%;height:46%;display:grid;place-items:center;transition:transform .35s cubic-bezier(.2,.8,.2,1.2)}
.format-logo img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.format:hover .format-logo{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.format:hover .format-logo{transform:none}}
.format-body{padding:26px 26px 28px;display:flex;flex-direction:column;gap:14px;flex:1}
.format-stat{align-self:flex-start;background:var(--white);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:700}
.format h3{margin:0;font-size:28px;font-weight:500;line-height:1.1}
.format-tag{display:flex;align-items:center;gap:10px;font-size:15px}
.format-tag .circle-icon{width:30px;height:30px;font-size:17px}
.format-body>p{margin:0;font-size:16.5px;line-height:1.45;text-wrap:pretty}
.format-body>.btn{margin-top:auto}
.channels{display:flex;flex-direction:column;gap:8px}
.channel{display:flex;flex-direction:column;gap:6px;background:var(--white);border-radius:16px;padding:14px 16px}
.channel strong{font-size:16px;font-weight:700}
.channel span{font-size:14.5px;line-height:1.4}
.channel a{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;font-size:14.5px;font-weight:700;color:var(--blue);text-decoration:none}
.channel a .ms{font-size:18px;transition:transform .25s}
.channel a:hover{color:var(--navy)}
.channel a:hover .ms{transform:translate(2px,-2px)}
.format-body>p+p{margin-top:-4px}
.ger-text{display:flex;flex-direction:column;gap:12px;flex:1}
.ger-text p{margin:0;font-size:18px;line-height:1.45;max-width:56ch;text-wrap:pretty}
.format .btn{align-self:flex-start;padding:12px 24px;font-size:15.5px;margin-top:4px}
/* áreas */
.areas-desk{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px;align-items:start}
.ger-list{display:flex;flex-direction:column;gap:4px}
.ger{display:flex;align-items:center;gap:14px;padding:10px 16px 10px 10px;border-radius:999px;color:var(--navy);font-size:16.5px}
.ger:hover{background:var(--mist)}
.ger.is-on,.ger.is-on:hover{background:var(--navy);color:var(--white)}
.ger .circle-icon,.ger-acc .circle-icon{width:36px;height:36px;font-size:19px}
.ger-detail{position:sticky;top:120px;background:var(--navy);color:var(--white);border-radius:24px;padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:20px;min-height:420px}
.ger-detail .circle-icon{width:64px;height:64px;font-size:32px}
.ger-detail h3{margin:0;font-size:clamp(32px,3.4vw,46px);font-weight:500;line-height:1.05;letter-spacing:-.01em}
.ger-detail p{margin:0;font-size:18px;line-height:1.4;max-width:52ch;flex:1;text-wrap:pretty}
.ger-detail .btn,.ger-acc .btn{padding:13px 26px;font-size:16px}
.areas-mob{display:none;flex-direction:column;gap:6px}
.ger-acc{background:var(--mist);color:var(--navy);border-radius:20px;overflow:hidden}
.ger-acc.is-on{background:var(--navy);color:var(--white)}
.ger-acc>button{width:100%;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;font-size:16.5px}
.ger-acc>button .name{flex:1}
.ger-acc>button .chev{font-size:22px}
.ger-acc .panel-body{padding:4px 18px 20px;display:flex;flex-direction:column;gap:16px}
.ger-acc .panel-body p{margin:0;font-size:16.5px;line-height:1.4}
.ger-acc .btn{padding:12px 22px;font-size:15.5px}
@media (max-width:899px){
  .areas-desk{display:none}
  .areas-mob{display:flex}
}

/* ---------- beneficios / prácticas ---------- */
.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
.benefit h3,.benefit h4{margin:0;font-size:24px;font-weight:500;line-height:1.1}
.ben{display:flex;flex-direction:column;gap:12px}
/* barra de pestañas fija bajo el header */
.ben-bar{position:sticky;top:92px;z-index:15;display:flex;justify-content:center;pointer-events:none}
.ben-tabs{position:relative;pointer-events:auto;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(0,30,96,.08);box-shadow:0 12px 30px rgba(0,30,96,.14);padding:6px;gap:0}
.ben-tabs .tab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;padding:14px clamp(20px,3vw,34px);font-size:17px;font-weight:500;transition:color .35s}
.ben-tabs .tab .ms{font-size:22px}
.ben-tabs .tab[aria-selected="true"]{background:transparent;color:var(--white)}
.ben-tabs .tab .n{min-width:26px;height:26px;border-radius:999px;display:inline-grid;place-items:center;padding:0 7px;font-size:13px;font-weight:700;background:var(--mist);color:var(--navy);transition:background .35s,color .35s}
.ben-tabs .tab[aria-selected="true"] .n{background:var(--yellow)}
.ben-ind{position:absolute;z-index:0;top:6px;bottom:6px;left:0;width:0;border-radius:999px;background:var(--navy);transition:transform .5s cubic-bezier(.3,1.3,.5,1),width .5s cubic-bezier(.3,1.3,.5,1)}
html:not(.js) .ben-tabs .tab[aria-selected="true"]{background:var(--navy)}

.ben-panel{display:flex;flex-direction:column;gap:12px}
/* cada pilar: panel de color, título fijo a la izquierda y tarjetas a la derecha */
.ben-pillar{position:relative;scroll-margin-top:170px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,3vw,48px);align-items:center;background:var(--c);color:var(--fg);border-radius:32px;padding:clamp(24px,4vw,56px);overflow:hidden}
.ben-side{position:relative;align-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.ben-side-icon{width:clamp(72px,7vw,104px);height:clamp(72px,7vw,104px);border-radius:28px;display:grid;place-items:center;font-size:clamp(38px,3.8vw,56px);background:var(--fg);color:var(--c);transform:rotate(-6deg);box-shadow:0 18px 40px rgba(0,30,96,.22)}
.ben-side h3{margin:0;font-size:clamp(34px,4.2vw,62px);font-weight:500;line-height:.98;letter-spacing:-.02em;text-wrap:balance}
.ben-side .ben-count{background:var(--fg);color:var(--c);font-size:14px;font-weight:700;border-radius:999px;padding:7px 14px}
.ben-side-spark{position:absolute;width:240px;height:270px;left:-150px;bottom:-300px;opacity:.14;filter:brightness(0);pointer-events:none}
.ben-pillar[style*="--blue"] .ben-side-spark{filter:none;opacity:.2}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px}
.bcard{position:relative;background:var(--white);color:var(--navy);border-radius:24px;padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 0 rgba(0,30,96,.06);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.bcard:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 24px 48px rgba(0,30,96,.2)}
.bcard-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:28px;background:color-mix(in srgb,var(--c) 22%,var(--white));color:var(--navy);transition:background .35s,color .35s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.ben-pillar[style*="--blue"] .bcard-icon{background:color-mix(in srgb,var(--blue) 14%,var(--white));color:var(--blue)}
.bcard:hover .bcard-icon{background:var(--navy);color:var(--yellow);transform:rotate(-10deg) scale(1.08)}
.bcard h4{margin:0;font-size:clamp(20px,1.7vw,24px);font-weight:500;line-height:1.12;text-wrap:balance}
.bcard p{margin:0;font-size:15.5px;line-height:1.45;text-wrap:pretty}
.bcard strong{font-weight:700;background:linear-gradient(transparent 60%,color-mix(in srgb,var(--c) 55%,transparent) 60%);padding:0 1px}
.ben-pillar[style*="--blue"] .bcard strong{background:linear-gradient(transparent 60%,rgba(77,189,245,.45) 60%)}
/* aparición escalonada */
.js .bcard{opacity:0;transform:translateY(26px) scale(.97)}
.js .bcard.is-in{opacity:1;transform:none;transition:opacity .6s ease calc(var(--d) * 70ms),transform .7s cubic-bezier(.2,.8,.2,1) calc(var(--d) * 70ms),box-shadow .35s}
.js .bcard.is-in:hover{transform:translateY(-6px) rotate(-.4deg);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
@media (max-width:899px){
  .ben-bar{top:84px}
  .ben-tabs .tab{padding:12px 16px;font-size:15.5px}
  .ben-pillar{grid-template-columns:1fr;padding:24px 18px;border-radius:28px}
  .ben-side{position:relative;top:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px}
  .ben-side h3{font-size:clamp(28px,8vw,38px);flex:1 1 60%}
  .ben-side-icon{width:60px;height:60px;border-radius:20px;font-size:32px}
  .ben-side-spark{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .bcard{opacity:1;transform:none}
  .ben-ind{transition:none}
}
.gains{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.gains .tile{gap:12px}
.gains h3{margin:0;font-size:24px;font-weight:500;line-height:1.1}
.hero-pin-tr{position:absolute;right:clamp(12px,2.5vw,28px);top:clamp(12px,2.5vw,28px);z-index:2}
.hero-pin-bl{position:absolute;left:clamp(12px,2.5vw,28px);bottom:clamp(12px,2.5vw,28px);z-index:2}
.steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:28px}
.steps li{display:flex;flex-direction:column;gap:12px;border-top:1.5px solid currentColor;padding-top:20px}
.steps .n{font-size:15px;font-weight:700}
.steps .t{font-size:24px;font-weight:500;line-height:1.1}
.steps .d{font-size:16.5px;line-height:1.35}

/* ---------- entrevista ---------- */
.tips-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:40px}
.tip{border-top:1px solid var(--mist)}
.tip button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-size:21px;font-weight:500}
.tip button .ms{font-size:24px}
.tip p{margin:0 0 22px;font-size:17px;line-height:1.4;max-width:56ch}

/* ---------- CTA + footer ---------- */
.cta{background:var(--yellow);color:var(--navy);border-radius:32px;padding:clamp(28px,5vw,56px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.cta-left{display:flex;align-items:center;gap:clamp(16px,2.5vw,32px);flex-wrap:wrap}
.cta-left .kv{width:clamp(96px,9vw,132px);--r:-8deg}
.cta h2{margin:0;font-weight:500;font-size:clamp(30px,3.6vw,48px);line-height:1.05;letter-spacing:-.01em;max-width:18ch}
.cta .btn{padding:14px 28px;font-size:17px}
.site-footer{background:var(--navy);color:var(--white);border-radius:32px;padding:clamp(28px,5vw,56px);display:flex;flex-direction:column;gap:40px}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px}
.footer-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px 32px;flex:1 1 280px;min-width:0;max-width:720px}
.footer-nav a{font-size:16px;color:var(--white);text-decoration:none}
.footer-nav a:hover{text-decoration:underline;color:var(--white)}
.footer-logo-desk{height:36px;width:auto;aspect-ratio:1636/198;display:block;align-self:flex-end}
.footer-logo-mob{height:52px;width:auto;aspect-ratio:1072/452;display:none;align-self:flex-start}
.site-footer p{margin:0;font-size:14px;line-height:1.4}
@media (max-width:719px){
  .footer-logo-desk{display:none}
  .footer-logo-mob{display:block}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ==========================================================================
   Mi entrevista
   ========================================================================== */

/* hero */
.ent-hero{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));min-height:min(640px,78vh)}
.ent-hero-copy{padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.ent-hero-text{display:flex;flex-direction:column;gap:22px}
.ent-hero-lead{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.45;max-width:46ch;text-wrap:pretty}
.ent-hero-lead strong{font-weight:700}
.ent-hero-actions .btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font-size:16.5px;font-weight:500}
.ent-hero-actions .ms{font-size:20px;animation:ent-bounce 1.8s ease-in-out infinite}
.ent-hero-photo{min-height:420px}
.ent-hero-photo>img:not(.kv){object-position:62% 30%}
.ent-hero-photo .kv{position:absolute;left:clamp(14px,2.5vw,32px);bottom:clamp(14px,2.5vw,32px);z-index:2}

/* recorrido de pasos: sección alta + panel fijo; el scroll avanza un paso a la vez */
.journey{position:relative}
.js .journey{height:360vh}
.journey-sticky{position:relative;display:flex;flex-direction:column;gap:clamp(20px,3vh,40px);padding:clamp(28px,5vw,64px);overflow:hidden;--p:0}
.js .journey-sticky{position:sticky;top:96px;height:calc(100vh - 108px);min-height:560px}
.journey-sticky::before{content:"";position:absolute;right:-18%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--jc,var(--blue)) 45%,transparent),transparent 65%);transition:background .8s ease;pointer-events:none}
.journey-head{position:relative;display:flex;flex-direction:column;gap:14px;max-width:900px}
.journey-lead{margin:0;font-size:clamp(17px,1.5vw,21px);line-height:1.35;opacity:.92;max-width:48ch;text-wrap:pretty}
.journey-head .h2{font-size:clamp(34px,4.4vw,64px);line-height:1.02;letter-spacing:-.02em;max-width:17ch;text-wrap:balance}
.journey-stage{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:center}

/* anillo con el paso protagonista */
.jr-ring{position:relative;width:min(100%,360px,40vh);aspect-ratio:1;justify-self:center}
.jr-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.jr-ring circle{fill:none;stroke-width:6}
.jr-ring-bg{stroke:rgba(255,255,255,.12)}
.jr-ring-fg{stroke:var(--jc,var(--blue));stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p));transition:stroke .6s}
.jr-visual{position:absolute;inset:14%;border-radius:50%;background:var(--c);color:var(--fg);display:grid;place-items:center;opacity:0;transform:scale(.6) rotate(-25deg);transition:opacity .45s ease,transform .7s cubic-bezier(.3,1.5,.5,1);box-shadow:0 30px 70px rgba(0,0,0,.35)}
.jr-visual.is-on{opacity:1;transform:none}
.jr-icon{font-size:clamp(64px,9vw,120px);font-variation-settings:"wght" 300}
.jr-count{position:absolute;left:50%;bottom:-6px;transform:translate(-50%,50%);background:var(--white);color:var(--navy);border-radius:999px;padding:6px 16px;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.jr-count b{font-size:20px}

/* lista de pasos */
.jr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.jr-row{position:relative;border-radius:20px;transition:background .4s}
.jr-row button{width:100%;display:flex;align-items:center;gap:clamp(14px,2vw,24px);padding:clamp(10px,1.3vh,16px) clamp(14px,2vw,22px);color:var(--white);opacity:.42;transition:opacity .4s}
.jr-row:hover button{opacity:.7}
.jr-k{font-size:clamp(34px,4vw,56px);font-weight:700;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;min-width:1.5em;transition:color .4s}
.jr-txt{display:flex;flex-direction:column;gap:4px}
.jr-n{font-size:13.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.jr-t{font-size:clamp(19px,1.9vw,28px);font-weight:500;line-height:1.12;text-wrap:balance}
.jr-bar{position:absolute;left:clamp(14px,2vw,22px);right:clamp(14px,2vw,22px);bottom:0;height:3px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.jr-bar i{display:block;height:100%;width:calc(var(--sp,0) * 100%);background:var(--c);border-radius:inherit}
.jr-row.is-on{background:rgba(255,255,255,.08)}
.jr-row.is-on button{opacity:1}
.jr-row.is-on .jr-k,.jr-row.is-on .jr-n{color:var(--c)}
.jr-row.is-done button{opacity:.75}
.jr-row.is-done .jr-bar i{width:100%}
.journey-hint{position:absolute;right:clamp(20px,3vw,40px);top:clamp(24px,3vw,40px);display:inline-flex;align-items:center;gap:6px;font-size:13.5px;opacity:.7;transition:opacity .4s}
.journey-hint .ms{font-size:20px;animation:ent-bounce 1.8s ease-in-out infinite}
.journey.is-end .journey-hint,.journey:not(.is-live) .journey-hint{opacity:0}
@keyframes ent-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* pantallas de escritorio bajas (notebooks): todo el recorrido cabe en el panel */
@media (min-width:900px) and (max-height:860px){
  .js .journey-sticky{min-height:0;padding:28px clamp(28px,4vw,56px)}
  .journey-head{gap:8px}
  .journey-head .h2{font-size:clamp(28px,3.2vw,44px);max-width:22ch}
  .journey-lead{font-size:16px}
  .jr-ring{width:min(100%,300px,34vh)}
  .jr-k{font-size:clamp(28px,3vw,40px)}
  .jr-t{font-size:clamp(17px,1.5vw,22px)}
  .jr-row button{padding:8px 16px}
}
/* sin JS o con "reducir movimiento": todos los pasos visibles, sin panel fijo */
.journey.is-static{height:auto}
.journey.is-static .journey-sticky{position:relative;top:auto;height:auto;min-height:0}
.journey.is-static .jr-ring{display:none}
.journey.is-static .journey-stage{grid-template-columns:1fr}
.journey.is-static .jr-row button{opacity:1}
.journey.is-static .jr-bar{display:none}
html:not(.js) .jr-ring{display:none}
html:not(.js) .journey-stage{grid-template-columns:1fr}
html:not(.js) .jr-row button{opacity:1}

@media (max-width:899px){
  .js .journey{height:340vh}
  .js .journey-sticky{top:88px;height:calc(100svh - 100px);min-height:0;padding:24px 20px}
  .journey-head .h2{font-size:clamp(26px,7.4vw,34px)}
  .journey-lead{font-size:15px}
  .journey-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:26px;align-items:start}
  .jr-ring{width:min(56vw,36vh)}
  .jr-list{gap:2px}
  .jr-row button{padding:9px 12px;gap:14px}
  .jr-k{font-size:28px}
  .jr-t{font-size:17px}
  .jr-n{font-size:12px}
  .journey-hint{display:none}
}

/* mobile con pantalla baja (p. ej. iPhone SE) */
@media (max-width:899px) and (max-height:760px){
  .js .journey-sticky{padding:18px 18px}
  .journey-sticky{gap:16px}
  .journey-head .h2{font-size:24px}
  .journey-lead{font-size:14px}
  .journey-stage{gap:18px}
  .jr-ring{width:min(44vw,26vh)}
  .jr-row button{padding:6px 10px}
  .jr-k{font-size:22px}
  .jr-t{font-size:15.5px}
  .jr-n{display:none}
}

/* ¿No sabes en qué área? */
.ent-area{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;overflow:hidden;background:var(--blue);color:var(--white);min-height:clamp(480px,44vw,620px)}
.ent-area::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 78% 50%,rgba(77,189,245,.45),transparent 70%),radial-gradient(50% 70% at 0% 100%,rgba(0,30,96,.6),transparent 70%);pointer-events:none}
.ent-area-copy{position:relative;z-index:1;padding:clamp(32px,5vw,72px);display:flex;flex-direction:column;gap:20px}
.ent-area-q{width:56px;height:56px;border-radius:18px;background:var(--yellow);color:var(--navy);display:grid;place-items:center;font-size:32px;transform:rotate(-8deg)}
.ent-area-copy .h2{font-size:clamp(36px,4.4vw,64px);line-height:1;letter-spacing:-.02em;max-width:12ch;text-wrap:balance}
.ent-area-copy p{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.45;max-width:38ch;opacity:.95}
.ent-area-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;font-size:16.5px;font-weight:700;background:var(--white);color:var(--blue);box-shadow:0 16px 34px rgba(0,30,96,.3);transition:transform .25s,box-shadow .25s}
.ent-area-btn:hover{color:var(--blue);transform:translateY(-2px);box-shadow:0 22px 40px rgba(0,30,96,.35)}
.ent-area-btn .ms{font-size:20px;transition:transform .25s}
.ent-area-btn:hover .ms{transform:translateX(4px)}

/* órbita: el spark al centro y los formatos girando alrededor (siempre derechos) */
.orbit{position:relative;justify-self:center;width:min(92%,560px);aspect-ratio:1;margin:clamp(24px,3vw,40px);--r:41%;--dur:48s}
.orbit-rings span{position:absolute;inset:0;margin:auto;border-radius:50%;border:1.5px dashed rgba(255,255,255,.28)}
.orbit-rings span:nth-child(1){width:82%;height:82%}
.orbit-rings span:nth-child(2){width:56%;height:56%;border-style:solid;border-color:rgba(255,255,255,.12)}
.orbit-rings span:nth-child(3){width:100%;height:100%;border-color:rgba(255,255,255,.1)}
.orbit-core{position:absolute;inset:0;margin:auto;width:30%;height:30%;border-radius:50%;background:var(--white);display:grid;place-items:center;box-shadow:0 0 0 14px rgba(255,255,255,.12),0 0 0 32px rgba(255,255,255,.06),0 30px 60px rgba(0,30,96,.35)}
.orbit-core svg{width:56%;height:56%;animation:deco-spin 30s linear infinite reverse}
.orbit-track{list-style:none;margin:0;padding:0;position:absolute;inset:0;animation:orbit-spin var(--dur) linear infinite}
.orbit-track li{position:absolute;width:0;height:0;--a:calc(var(--i) * 60deg - 90deg);left:calc(50% + cos(var(--a)) * var(--r));top:calc(50% + sin(var(--a)) * var(--r))}
.orbit-chip{position:absolute;left:0;top:0;width:clamp(120px,13vw,168px);height:clamp(62px,6.4vw,82px);translate:-50% -50%;display:grid;place-items:center;padding:12px 16px;border-radius:20px;background:var(--white);box-shadow:0 16px 34px rgba(0,30,96,.28);animation:orbit-counter var(--dur) linear infinite;transition:scale .3s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.orbit-chip img{display:block;width:100%;height:100%;object-fit:contain}
.orbit-chip:hover,.orbit-chip:focus-visible{scale:1.12;box-shadow:0 22px 44px rgba(0,30,96,.4)}
.orbit-chip:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.orbit:hover .orbit-track,.orbit:hover .orbit-chip,.orbit:focus-within .orbit-track,.orbit:focus-within .orbit-chip{animation-play-state:paused}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
@keyframes orbit-counter{to{transform:rotate(-360deg)}}
@media (max-width:899px){
  .ent-area{grid-template-columns:1fr;min-height:0}
  .ent-area-copy{padding:28px 22px 4px}
  .ent-area-copy .h2{font-size:clamp(32px,9vw,44px)}
  .orbit{width:min(100% - 32px,380px);margin:8px auto 28px;--r:34%}
  .orbit-core{width:26%;height:26%}
  .orbit-chip{width:clamp(84px,24vw,112px);height:clamp(44px,12.5vw,58px);padding:7px 10px;border-radius:14px}
}
@media (prefers-reduced-motion:reduce){
  .orbit-track,.orbit-chip,.orbit-core svg{animation:none}
}

/* tips: bento + STAR */
.tips-bento{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px}
.tb{position:relative;overflow:hidden;border-radius:28px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:14px}
.tb h3{margin:0;font-size:clamp(26px,2.6vw,38px);font-weight:500;line-height:1.05;letter-spacing:-.01em}
.tb p{margin:0;font-size:clamp(16px,1.3vw,18px);line-height:1.45;text-wrap:pretty;max-width:52ch}
.tb-num{font-size:14px;font-weight:700;letter-spacing:.06em;opacity:.8}
.tb-icon{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font-size:34px;margin:6px 0 4px}
.tb-link{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;font-size:15.5px;font-weight:700;text-decoration:none;transition:transform .25s,box-shadow .25s}
.tb-link .ms{font-size:20px;transition:transform .25s}
.tb-link:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,30,96,.2)}
.tb-link:hover .ms{transform:translateX(4px)}
.tb-invest{background:var(--blue);color:var(--white)}
.tb-invest::after{content:"";position:absolute;right:-70px;bottom:-70px;width:260px;height:260px;border-radius:50%;border:40px solid rgba(255,255,255,.08);pointer-events:none}
.tb-invest .tb-icon{background:var(--yellow);color:var(--navy)}
.tb-invest .tb-link,.tb-invest .tb-link:hover{background:var(--white);color:var(--blue)}
.tb-prep{background:var(--mist);color:var(--navy)}
.tb-prep .tb-icon{background:var(--navy);color:var(--yellow)}
.tb-prep .tb-link,.tb-prep .tb-link:hover{background:var(--navy);color:var(--white)}
.tb-reflect{list-style:none;margin:4px 0 8px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:8px;counter-reset:rf}
.tb-reflect li{display:flex;align-items:center;gap:12px;background:var(--white);border-radius:16px;padding:12px 14px 12px 12px;font-size:15.5px;font-weight:500;line-height:1.25;transition:transform .25s,box-shadow .25s}
.tb-reflect li:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,30,96,.1)}
.tb-reflect .ms{width:40px;height:40px;border-radius:12px;background:var(--blue);color:var(--white);display:grid;place-items:center;font-size:22px;flex-shrink:0}
@media (max-width:899px){.tips-bento{grid-template-columns:1fr}}

.star{background:var(--navy);color:var(--white);border-radius:28px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px)}
.star-head{display:flex;flex-direction:column;gap:10px}
.star-head .tb-num{color:var(--yellow);opacity:1}
.star-head h3{margin:0;font-size:clamp(26px,2.8vw,40px);font-weight:500;line-height:1.05;letter-spacing:-.01em;max-width:24ch}
.star-row{list-style:none;margin:0;padding:0;display:flex;gap:10px;height:clamp(260px,24vw,320px)}
.star-item{position:relative;flex:1 1 0;min-width:0;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);overflow:hidden;transition:flex-grow .6s cubic-bezier(.22,.9,.24,1),background .4s,border-color .4s}
.star-item.is-open{flex-grow:3.2;background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.star-btn{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:clamp(18px,2vw,26px);color:inherit;text-align:left}
.star-l{font-size:clamp(84px,9vw,140px);font-weight:700;line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px var(--yellow);transition:color .4s,-webkit-text-stroke-color .4s}
.star-item.is-open .star-l{color:var(--navy);-webkit-text-stroke-color:var(--navy)}
.star-item:not(.is-open):hover .star-l{color:var(--yellow)}
.star-w{font-size:clamp(18px,1.6vw,22px);font-weight:700}
.star-p{position:absolute;left:clamp(18px,2vw,26px);right:clamp(18px,2vw,26px);bottom:clamp(18px,2vw,26px);margin:0;font-size:clamp(17px,1.5vw,21px);font-weight:500;line-height:1.3;max-width:30ch;opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s;pointer-events:none}
.star-item.is-open .star-w{margin-bottom:auto;margin-top:14px}
.star-item.is-open .star-btn{justify-content:flex-start}
.star-item.is-open .star-p{opacity:1;transform:none;transition:opacity .45s ease .25s,transform .55s cubic-bezier(.2,.8,.2,1) .25s}
.star-btn:focus-visible{outline:3px solid var(--white);outline-offset:-6px;border-radius:22px}
@media (max-width:899px){
  .star-row{flex-direction:column;height:auto}
  .star-item,.star-item.is-open{flex:none}
  .star-btn{position:relative;flex-direction:row;align-items:center;gap:16px;padding:16px 18px 0}
  .star-item.is-open .star-btn{justify-content:flex-start}
  .star-l{font-size:48px;min-width:40px}
  .star-item.is-open .star-w{margin:0}
  .star-p{position:static;padding:8px 18px 18px 74px;opacity:1;transform:none;font-size:16px;max-width:none}
}

/* ¿Qué esperamos de ti? — manifiesto tipográfico que se "pinta" con el scroll */
.manifesto{position:relative;overflow:hidden;padding:clamp(32px,6vw,96px) clamp(24px,5vw,72px);display:flex;flex-direction:column;gap:clamp(28px,4vw,56px)}
.manifesto::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 90% 10%,rgba(0,83,226,.55),transparent 70%),radial-gradient(40% 50% at 0% 100%,rgba(77,189,245,.18),transparent 70%);pointer-events:none}
.mf-spark{position:absolute;right:-8%;bottom:-18%;width:clamp(320px,42vw,620px);height:clamp(360px,47vw,700px);opacity:.1;animation:deco-spin 90s linear infinite;pointer-events:none}
.mf-head{position:relative;display:flex;align-items:center;gap:18px}
.mf-head .h2{font-size:clamp(24px,2.4vw,34px);font-weight:500;letter-spacing:-.01em}
.mf-list{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mf-line{--f:1;display:grid;grid-template-columns:clamp(64px,8vw,120px) minmax(0,1fr);align-items:center;gap:clamp(12px,2vw,32px);padding:clamp(18px,2.6vw,36px) 0;border-top:1px solid rgba(255,255,255,.14)}
.mf-line:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.mf-meta{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.mf-n{font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--c)}
.mf-icon{width:clamp(48px,5vw,72px);height:clamp(48px,5vw,72px);border-radius:50%;display:grid;place-items:center;font-size:clamp(26px,2.8vw,38px);background:color-mix(in srgb,var(--c) calc(var(--f) * 100%),rgba(255,255,255,.08));color:color-mix(in srgb,var(--navy) calc(var(--f) * 100%),var(--white));transform:scale(calc(.8 + var(--f) * .2)) rotate(calc((1 - var(--f)) * -40deg))}
.mf-text{margin:0;font-size:clamp(38px,6.6vw,108px);font-weight:500;line-height:.98;letter-spacing:-.03em;text-wrap:balance}
.mf-text em{font-style:normal;color:var(--c)}
/* con JS: la frase pasa de contorno a relleno según el avance del scroll */
.js .mf-text,.js .mf-text em{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.35);background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;background-size:calc(var(--f) * 100%) 100%}
.js .mf-text{background-image:linear-gradient(var(--white),var(--white))}
.js .mf-text em{background-image:linear-gradient(var(--c),var(--c));-webkit-text-stroke-color:color-mix(in srgb,var(--c) 55%,transparent)}
.mf-line.is-full .mf-text,.mf-line.is-full .mf-text em{-webkit-text-stroke-color:transparent}
@media (max-width:719px){
  .mf-line{grid-template-columns:1fr;gap:14px}
  .mf-meta{flex-direction:row;align-items:center}
  .mf-text{font-size:clamp(34px,10vw,48px)}
}
@media (prefers-reduced-motion:reduce){.mf-spark{animation:none}}
@media (prefers-reduced-motion:reduce){
  .ent-hero-actions .ms,.journey-hint .ms{animation:none}
  .jr-visual,.star-item,.star-p{transition:none !important}
}

/* ==========================================================================
   Mi práctica
   ========================================================================== */
.pr-hero{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));min-height:min(680px,82vh)}
.pr-hero-copy{padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.pr-hero-text{display:flex;flex-direction:column;gap:22px}
.pr-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:var(--yellow);color:var(--navy);border-radius:999px;padding:8px 16px 8px 12px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.pr-tag .ms{font-size:18px}
.pr-lead{margin:0;font-size:clamp(16.5px,1.4vw,19px);line-height:1.5;max-width:52ch;opacity:.95;text-wrap:pretty}
.pr-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font-size:16.5px;font-weight:700;transition:transform .25s,box-shadow .25s}
.pr-btn .ms{font-size:20px;transition:transform .25s}
.pr-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,30,96,.28)}
.pr-btn:hover .ms{transform:translateX(4px)}
.pr-btn-navy,.pr-btn-navy:hover{background:var(--navy);color:var(--white)}
.pr-btn-white,.pr-btn-white:hover{background:var(--white);color:var(--blue)}
.pr-hero-photo{min-height:420px}
.pr-hero-photo>img:not(.kv){object-position:55% 30%}
.pr-hero-photo .kv{position:absolute;left:clamp(14px,2.5vw,32px);bottom:clamp(14px,2.5vw,32px);z-index:2}

/* contador */
.pr-stat{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,64px);padding:clamp(32px,5vw,72px)}
.pr-stat-num{display:flex;align-items:flex-start;font-size:clamp(110px,17vw,260px);font-weight:700;line-height:.8;letter-spacing:-.06em;color:var(--blue);font-variant-numeric:tabular-nums}
.pr-plus{font-size:.45em;line-height:1;color:var(--yellow);margin-right:.04em;margin-top:.06em}
.pr-stat-text{margin:0;font-size:clamp(20px,2.3vw,34px);font-weight:500;line-height:1.25;letter-spacing:-.01em;text-wrap:pretty}
.pr-stat-text strong{font-weight:700;color:var(--blue)}
.pr-stat-text mark{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--c) 70%,transparent) 62%);color:inherit;padding:0 2px}
@media (max-width:719px){.pr-stat{grid-template-columns:1fr;gap:14px}.pr-stat-num{font-size:clamp(110px,36vw,160px)}}

/* premio */
.pr-award{position:relative;overflow:hidden;background:var(--yellow);color:var(--navy);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(32px,5vw,72px)}
.pr-award-spark{position:absolute;left:-60px;bottom:-90px;width:320px;height:360px;opacity:.18;filter:brightness(.4);animation:deco-spin 80s linear infinite;pointer-events:none}
.pr-badge{position:relative;justify-self:center;width:min(100%,440px);transform:rotate(-4deg);transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.pr-badge:hover{transform:rotate(0) scale(1.03)}
.pr-badge img{display:block;width:100%;height:auto;border-radius:18px;background:var(--navy);padding:clamp(14px,2vw,26px);box-sizing:border-box;box-shadow:0 30px 60px rgba(0,30,96,.3)}
.pr-award-copy{position:relative;display:flex;flex-direction:column;gap:18px}
.pr-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.pr-eyebrow .ms{font-size:20px}
.pr-award-copy .h2{font-size:clamp(34px,4.4vw,64px);line-height:1;letter-spacing:-.02em;text-wrap:balance}
.pr-award-copy p{margin:0;font-size:clamp(16.5px,1.4vw,19px);line-height:1.5;max-width:50ch}
@media (max-width:899px){.pr-award{grid-template-columns:1fr}.pr-badge{width:min(80%,340px)}}

/* Día del Practicante */
.pr-day{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:clamp(24px,4vw,56px);padding:clamp(12px,1.4vw,16px) clamp(24px,4vw,56px) clamp(12px,1.4vw,16px) clamp(12px,1.4vw,16px);overflow:hidden}
.pr-video{position:relative;display:block;border-radius:24px;overflow:hidden;background:var(--navy);cursor:pointer;padding:8px}
.pr-mosaic{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:repeat(3,1fr);gap:8px;aspect-ratio:16/11}
.pr-tile{position:relative;overflow:hidden;border-radius:16px;background:var(--blue)}
.pr-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s}
.pr-tile-main{grid-row:1/4}
.pr-tile-main img{object-position:50% 40%;animation:pr-ken 16s ease-in-out infinite alternate}
.pr-tile:nth-child(2) img{object-position:55% 30%}
.pr-tile:nth-child(3) img{object-position:50% 35%}
.pr-tile:nth-child(4) img{object-position:40% 30%}
@keyframes pr-ken{from{transform:scale(1.05) translateX(-2%)}to{transform:scale(1.18) translateX(2%)}}
.pr-video::after{content:"";position:absolute;inset:8px;border-radius:16px;background:radial-gradient(circle at 42% 50%,rgba(0,30,96,.55),rgba(0,30,96,.1) 55%,transparent 75%);pointer-events:none;transition:opacity .4s}
.pr-video:hover .pr-tile:not(.pr-tile-main) img{transform:scale(1.08)}
.pr-video:hover::after{opacity:.6}
.pr-year{position:absolute;top:22px;left:22px;z-index:2;display:inline-flex;align-items:center;gap:8px;background:var(--yellow);color:var(--navy);border-radius:999px;padding:8px 16px 8px 10px;font-size:15px;font-weight:700;transform:rotate(-4deg);box-shadow:0 10px 24px rgba(0,30,96,.3)}
.pr-year svg{width:20px;height:22px;filter:brightness(0) saturate(100%) invert(10%) sepia(60%) saturate(4000%) hue-rotate(215deg)}
.pr-playwrap{position:absolute;left:40%;top:50%;z-index:2;translate:-50% -50%;display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:8px 22px 8px 8px;color:var(--white);transition:scale .35s cubic-bezier(.3,1.5,.5,1),background .3s}
.pr-video:hover .pr-playwrap{scale:1.06;background:rgba(255,255,255,.24)}
.pr-play{position:relative;width:clamp(64px,6.4vw,84px);height:clamp(64px,6.4vw,84px);border-radius:50%;background:var(--yellow);color:var(--navy);display:grid;place-items:center;box-shadow:0 0 0 0 rgba(255,194,32,.6);animation:pr-pulse 2.2s infinite}
.pr-play .ms{font-size:clamp(38px,3.8vw,50px);font-variation-settings:"FILL" 1}
.pr-playlabel{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}
.pr-playlabel b{font-size:clamp(16px,1.4vw,19px)}
.pr-playlabel span{font-size:14px;opacity:.85;font-variant-numeric:tabular-nums}
.pr-video:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
@keyframes pr-pulse{70%{box-shadow:0 0 0 22px rgba(255,194,32,0)}100%{box-shadow:0 0 0 0 rgba(255,194,32,0)}}
@media (max-width:719px){
  .pr-mosaic{grid-template-columns:1fr 1fr 1fr;grid-template-rows:2fr 1fr;aspect-ratio:4/3.4}
  .pr-tile-main{grid-row:auto;grid-column:1/4}
  .pr-playwrap{left:50%;top:36%;padding:6px 16px 6px 6px}
  .pr-year{top:16px;left:16px;font-size:13px}
}
.pr-day-copy{display:flex;flex-direction:column;gap:18px;padding:clamp(12px,2vw,24px) 0}
.pr-day-copy .pr-eyebrow{color:var(--yellow)}
.pr-day-copy .h2{font-size:clamp(34px,4.2vw,60px);line-height:1;letter-spacing:-.02em}
.pr-day-copy p{margin:0;font-size:clamp(16.5px,1.4vw,19px);line-height:1.5}
@media (max-width:899px){.pr-day{grid-template-columns:1fr;padding:12px 12px 28px}.pr-day-copy{padding:8px 12px 0}}
.pr-modal{border:0;padding:0;background:transparent;width:min(1100px,calc(100% - 32px));max-width:none;overflow:visible}
.pr-modal::backdrop{background:rgba(0,20,66,.85);backdrop-filter:blur(6px)}
.pr-modal[open] .pr-modal-box{animation:entry-in .45s cubic-bezier(.2,.9,.25,1.1) both}
.pr-modal-box{position:relative;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 40px 100px rgba(0,0,0,.5)}
.pr-modal video{display:block;width:100%;max-height:80vh;background:#000}
.pr-modal-close{position:absolute;top:12px;right:12px;z-index:2;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--navy);font-size:24px}
@keyframes entry-in{from{opacity:0;transform:translateY(28px) scale(.96)}}

/* ¿Por qué Walmart Chile? — tarjetas que se apilan al hacer scroll */
.pr-why{display:flex;flex-direction:column;gap:12px}
.pr-why-head{border-radius:32px;padding:clamp(28px,4vw,52px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.pr-why-head .h2{font-size:clamp(36px,5vw,72px);line-height:1;letter-spacing:-.02em}
.pr-stack{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pr-card{--k:0;position:sticky;top:calc(100px + var(--i) * 22px);min-height:min(440px,62vh);border-radius:32px;background:var(--c);color:var(--fg);padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3vw,48px);align-items:center;overflow:hidden;transform-origin:50% 0;transform:scale(calc(1 - var(--k) * .06));filter:brightness(calc(1 - var(--k) * .25));box-shadow:0 -10px 40px rgba(0,30,96,.18)}
.pr-card-side{display:flex;align-items:center}
.pr-card-n{font-size:15px;font-weight:700;letter-spacing:.06em}
.pr-card-icon{width:clamp(64px,6vw,84px);height:clamp(64px,6vw,84px);border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-size:clamp(32px,3vw,42px)}
.pr-card-body{display:flex;flex-direction:column;gap:16px}
.pr-card h3{margin:0;font-size:clamp(32px,4vw,58px);font-weight:500;line-height:1;letter-spacing:-.02em;text-wrap:balance}
.pr-card p{margin:0;font-size:clamp(16.5px,1.4vw,19px);line-height:1.5;max-width:60ch;text-wrap:pretty}
.pr-card p strong{font-weight:700}
.pr-card-big{display:flex;flex-direction:column;align-items:center;line-height:.85;font-weight:700;letter-spacing:-.05em;padding-left:clamp(12px,2vw,24px)}
.pr-card-big b{font-size:clamp(90px,11vw,170px)}
.pr-card-big span{font-size:clamp(16px,1.5vw,20px);letter-spacing:0;font-weight:700;margin:6px 0 10px;opacity:.85}
.pr-card-big-icon .ms{font-size:clamp(110px,13vw,200px);opacity:.22;font-variation-settings:"wght" 200}
@media (max-width:899px){
  .pr-card{grid-template-columns:1fr;top:calc(88px + var(--i) * 16px);min-height:0;gap:18px;padding:26px 22px}
  .pr-card-side{flex-direction:row;align-items:center}
  .pr-card-big{flex-direction:row;gap:10px;align-items:baseline;padding:0}
  .pr-card-big b{font-size:72px}
  .pr-card-big span{margin:0}
  .pr-card-big-icon{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pr-play,.pr-award-spark,.pr-tile-main img{animation:none}
  .pr-card{position:relative;top:auto;transform:none;filter:none}
}

/* ==========================================================================
   Cómo trabajamos: explorador de formatos
   ========================================================================== */
.fx{display:flex;flex-direction:column;gap:16px}
.fx-bar{display:flex;align-items:center;gap:12px}
.fx-tabs{flex:1;min-width:0;display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px;scroll-snap-type:x mandatory}
.fx-tabs::-webkit-scrollbar{display:none}
.fx-tab{position:relative;height:78px;border-radius:20px;background:var(--white);border:2px solid var(--mist);display:flex;align-items:center;justify-content:center;padding:14px 20px;scroll-snap-align:center;overflow:hidden;transition:border-color .3s,background .3s}
.fx-tab img{width:100%;height:100%;object-fit:contain;display:block;filter:grayscale(1) opacity(.5);transition:filter .3s}
.fx-tab:hover img{filter:none}
.fx-tab:hover{border-color:color-mix(in srgb,var(--a) 40%,var(--mist))}
.fx-tab[aria-selected="true"]{border-color:var(--a);background:color-mix(in srgb,var(--a) 6%,var(--white))}
.fx-tab[aria-selected="true"] img{filter:none}
.fx-tab[aria-selected="true"]::after{content:"";position:absolute;left:20%;right:20%;bottom:0;height:4px;border-radius:4px 4px 0 0;background:var(--a)}
.fx-tab:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.fx-nav{display:flex;gap:8px}
.fx-arrow{width:48px;height:48px;border-radius:50%;background:var(--mist);color:var(--navy);font-size:22px;transition:background .25s,color .25s}
.fx-arrow:hover{background:var(--navy);color:var(--white)}

.fx-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;background:var(--mist);border-radius:28px;padding:10px;overflow:hidden}
.fx-panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--a)}
.fx-panel.is-in .fx-main>*{animation:fx-in .55s cubic-bezier(.2,.8,.2,1) both}
.fx-panel.is-in .fx-main>*:nth-child(2){animation-delay:.05s}
.fx-panel.is-in .fx-main>*:nth-child(3){animation-delay:.1s}
.fx-panel.is-in .fx-main>*:nth-child(4){animation-delay:.15s}
.fx-panel.is-in .fx-side{animation:fx-in .6s cubic-bezier(.2,.8,.2,1) .12s both}
@keyframes fx-in{from{opacity:0;transform:translateY(16px)}}
.fx-main{padding:clamp(24px,3.4vw,48px);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.fx-logo{height:clamp(56px,5vw,72px);display:flex;align-items:center}
.fx-logo img{height:100%;width:auto;max-width:260px;object-fit:contain}
.fx-main h3{margin:0;color:var(--a);font-size:clamp(32px,3.6vw,52px);font-weight:500;line-height:1;letter-spacing:-.02em}
.fx-text{display:flex;flex-direction:column;gap:12px;max-width:62ch}
.fx-text p{margin:0;font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.55;text-wrap:pretty}
.fx-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font-size:16.5px;font-weight:700;background:var(--a);color:var(--white);margin-top:auto;transition:transform .25s,box-shadow .25s,filter .25s}
.fx-btn:hover{color:var(--white);transform:translateY(-2px);box-shadow:0 14px 30px color-mix(in srgb,var(--a) 35%,transparent)}
.fx-btn .ms{font-size:20px;transition:transform .25s}
.fx-btn:hover .ms{transform:translateX(4px)}

.fx-side{display:flex;flex-direction:column;gap:10px}
.fx-ch{flex:1;background:var(--white);border-radius:22px;padding:clamp(20px,2.4vw,30px);gap:10px;justify-content:flex-start}
.fx-ch strong{font-size:clamp(20px,1.8vw,24px);font-weight:500;color:var(--a)}
.fx-ch span{font-size:15.5px;line-height:1.5}
.fx-ch a{margin-top:auto;padding-top:6px;color:var(--a);font-size:15.5px}
.fx-side-art{position:relative;background:var(--white);border-radius:22px;display:grid;place-items:center;min-height:320px;overflow:hidden}
.fx-side-art img{width:62%;max-height:40%;object-fit:contain;position:relative;z-index:1;animation:fx-float 6s ease-in-out infinite}
.fx-spark{position:absolute;width:300px;height:340px;right:-90px;bottom:-110px;opacity:.12}
@keyframes fx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (max-width:899px){
  .fx-tabs{display:flex;grid-template-columns:none}
  .fx-tab{flex:0 0 132px;height:72px;padding:10px 14px}
  .fx-nav{display:none}
  .fx-panel{grid-template-columns:1fr}
  .fx-main{padding:24px 18px}
  .fx-side-art{min-height:180px}
}
@media (prefers-reduced-motion:reduce){
  .fx-panel.is-in .fx-main>*,.fx-panel.is-in .fx-side,.fx-side-art img{animation:none}
}
.fx-panel:has(.fx-side){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.fx-panel:not(:has(.fx-side)) .fx-text{max-width:none;column-count:2;column-gap:40px;display:block}
.fx-panel:not(:has(.fx-side)) .fx-text p{break-inside:avoid;margin:0 0 12px}
@media (max-width:899px){.fx-panel:has(.fx-side){grid-template-columns:1fr}.fx-panel:not(:has(.fx-side)) .fx-text{column-count:1}}

/* logos de formatos en el hero del inicio */
.hero-logos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:560px}
.hero-logos li{display:flex}
.hero-logos a{display:grid;place-items:center;height:40px;padding:7px 12px;border-radius:12px;background:var(--white);box-shadow:0 6px 16px rgba(0,30,96,.18);transition:transform .25s}
.hero-logos a:hover{transform:translateY(-2px)}
.hero-logos img{height:100%;width:auto;max-width:96px;display:block;object-fit:contain}
@media (max-width:719px){.hero-logos a{height:34px;padding:6px 10px}.hero-logos img{max-width:78px}}
.acc-lead{margin:0;font-size:clamp(16px,1.3vw,18px);line-height:1.4;font-weight:500}
.hero-copy .hero-top{display:flex;align-items:center;flex-wrap:wrap;gap:16px 22px}
.hero-copy .hero-top .spark{flex-shrink:0;width:56px!important;height:56px!important}
@media (max-width:899px){
  .acc-item .acc-photo,.acc-item.is-open .acc-photo{height:38%}
  .acc-item .acc-content{top:38%;padding:20px 20px 22px;gap:10px}
  .acc-content h3{font-size:clamp(21px,5.8vw,26px)}
  .acc-lead{font-size:14.5px}
  .acc-item .acc-kv{top:calc(38% - 46px)}
}
@media (max-width:899px) and (max-height:760px){
  .acc-item .acc-photo,.acc-item.is-open .acc-photo{height:31%}
  .acc-item .acc-content{top:31%}
  .acc-item .acc-kv{top:calc(31% - 40px)}
  .acc-item .acc-kv .kv{width:72px!important}
}
@media (min-width:1360px){
  .hero-logos{flex-wrap:nowrap;gap:8px;max-width:none}
  .hero-logos a{height:36px;padding:6px 10px}
  .hero-logos img{max-width:80px}
}
/* pin jockey en los accesos del inicio */
.shortcuts-sec{position:relative}
.acc-jockey{position:absolute;z-index:2;top:clamp(14px,1.6vw,24px);right:clamp(120px,14vw,220px);width:clamp(100px,8.5vw,130px)}
@media (max-width:899px){.acc-jockey{left:auto;right:16px;top:14px;width:88px}.shortcuts-sec .head-row .h2{padding-right:84px}}
/* socket del footer */
.footer-socket{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16)}
.footer-socket p{margin:0}
.site-footer .powered{font-size:12px;color:rgba(255,255,255,.4);text-decoration:none;letter-spacing:.02em;transition:color .2s}
.site-footer .powered:hover{color:rgba(255,255,255,.75)}
/* ==========================================================================
   KV motion — animaciones de parches (patch) y pines (pin)
   Capas de cada .kv (cada una anima una sola cosa, así no se pisan):
     .kv        → posición del layout + rotación base (--r) + parallax (--py) + inercia de scroll (--sv)
     .kv-in     → entrada (parche: "slap" tipo sticker · pin: caída con rebote)
     .kv-float  → reposo (parche: flota · pin: se balancea)
     .kv-tilt   → interacción (tilt 3D con mouse · "jelly" al tocar/click)
     .kv-shine  → destello brillante enmascarado con la silueta del PNG
   ========================================================================== */

.kv{
  --r:0deg;--py:0px;--sv:0deg;
  display:block;flex-shrink:0;height:auto;
  filter:var(--shadow-kv);
  transform:translate3d(0,var(--py),0) rotate(calc(var(--r) + var(--sv)));
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:filter .35s ease;
}
.kv-in,.kv-float,.kv-tilt{display:block;will-change:transform}
.kv-tilt{position:relative;transform-style:preserve-3d}
.kv img{display:block;width:100%;height:auto;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none}
.kv.is-hover{filter:drop-shadow(0 22px 26px rgba(0,30,96,.38))}

/* ---------- entrada ---------- */
html.js .kv:not(.is-in) .kv-in{opacity:0}
.kv-patch.is-in .kv-in{animation:kv-slap .95s cubic-bezier(.18,.89,.32,1.15) var(--delay,0s) both}
.kv-pin.is-in .kv-in{transform-origin:50% 0;animation:kv-drop 1.05s cubic-bezier(.2,.8,.3,1) var(--delay,0s) both}

@keyframes kv-slap{
  0%  {opacity:0;transform:translate3d(0,-10%,0) scale(1.75) rotate(-16deg);filter:blur(3px)}
  40% {opacity:1;transform:translate3d(0,0,0) scale(.88) rotate(3deg);filter:blur(0)}
  60% {transform:scale(1.07) rotate(-1.8deg)}
  78% {transform:scale(.97) rotate(.8deg)}
  100%{opacity:1;transform:none}
}
@keyframes kv-drop{
  0%  {opacity:0;transform:translate3d(0,-130%,0) rotate(-38deg) scale(.8)}
  45% {opacity:1;transform:translate3d(0,7%,0) rotate(12deg) scale(1.04)}
  64% {transform:translate3d(0,-3%,0) rotate(-7deg)}
  82% {transform:translate3d(0,1%,0) rotate(3deg)}
  100%{opacity:1;transform:none}
}

/* ---------- reposo ---------- */
.kv-patch.is-in .kv-float{animation:kv-bob var(--dur,6s) ease-in-out calc(var(--delay,0s) + .95s) infinite}
.kv-pin.is-in .kv-float{transform-origin:50% 6%;animation:kv-swing calc(var(--dur,6s) * .7) ease-in-out calc(var(--delay,0s) + 1.05s) infinite}
.kv:not(.is-vis) .kv-float,.kv:not(.is-vis) .kv-shine{animation-play-state:paused}

@keyframes kv-bob{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  50%    {transform:translate3d(0,-7px,0) rotate(1.6deg)}
}
@keyframes kv-swing{
  0%,100%{transform:rotate(0)}
  25%    {transform:rotate(4deg)}
  75%    {transform:rotate(-4deg)}
}

/* ---------- destello ---------- */
.kv-shine{
  position:absolute;inset:0;pointer-events:none;opacity:.85;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.12) 42%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.12) 58%,transparent 62%);
  background-size:320% 100%;background-position:130% 0;background-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.kv.is-in .kv-shine{animation:kv-shine 7.5s ease-in-out calc(var(--delay,0s) + var(--sd,2s)) infinite}
.kv.is-hover .kv-shine{animation:none;background-position:var(--shx,50%) 0;transition:background-position .12s linear}
@keyframes kv-shine{
  0%  {background-position:130% 0}
  16% {background-position:-30% 0}
  100%{background-position:-30% 0}
}

/* ---------- toque / click ---------- */
.kv-tilt.is-jelly{animation:kv-jelly .75s cubic-bezier(.3,.7,.4,1.4)}
@keyframes kv-jelly{
  0%  {transform:scale(1,1)}
  18% {transform:scale(1.18,.84) rotate(-3deg)}
  36% {transform:scale(.9,1.12) rotate(2deg)}
  54% {transform:scale(1.06,.95)}
  72% {transform:scale(.98,1.03)}
  100%{transform:scale(1,1)}
}

/* partículas (chispas Walmart + puntos) */
.kv-particle{position:fixed;left:0;top:0;z-index:100;pointer-events:none;display:block;will-change:transform,opacity}
.kv-particle svg{display:block;width:100%;height:100%}
.kv-particle.dot{border-radius:50%;background:var(--sky)}
.kv-particle.dot.w{background:var(--white);box-shadow:0 0 0 1.5px var(--sky)}

@media (prefers-reduced-motion:reduce){
  .kv-in,.kv-float,.kv-tilt{animation:none !important}
  html.js .kv:not(.is-in) .kv-in{opacity:1}
  .kv-shine{display:none}
}

/* logos oficiales de marca: se muestran limpios (sin destello, sin tilt ni deformación) */
.kv-official .kv-shine{display:none}
.kv-official .kv-tilt{transform:none !important;animation:none !important}
.kv-official.is-hover{filter:var(--shadow-kv)}
/* dialogo de entrada de vacantes: se abre desde "Ver vacantes" del header en cualquier pagina */
/* Dialogo de entrada de vacantes (perfil + categoria), disponible en todas las paginas.
   Reglas copiadas tal cual de vacantes.css del mock (bloque "modal" + logos de picks + keyframes que usa).
   Si el mock cambia ese bloque, volver a copiarlo aqui. */
@keyframes deco-spin{to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0}}
/* ---------- modal ---------- */
.entry{border:0;padding:0;background:transparent;width:min(780px,calc(100% - 32px));max-width:none;max-height:calc(100vh - 32px);overflow:visible;color:var(--navy)}
.entry::backdrop{background:rgba(0,20,66,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.entry[open] .entry-card{animation:entry-in .5s cubic-bezier(.2,.9,.25,1.1) both}
.entry[open]::backdrop{animation:fade .3s ease both}
.entry.is-closing .entry-card{animation:entry-out .22s ease both}
.entry.is-closing::backdrop{animation:fade .22s ease reverse both}
@keyframes entry-in{from{opacity:0;transform:translateY(28px) scale(.96)}}
@keyframes entry-out{to{opacity:0;transform:translateY(16px) scale(.98)}}
.entry-card{position:relative;background:var(--white);border-radius:32px;max-height:calc(100vh - 32px);overflow-x:hidden;overflow-y:auto;box-shadow:0 40px 100px rgba(0,0,0,.35)}
.entry-close{position:absolute;top:18px;right:18px;z-index:2;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);color:var(--white);font-size:24px;transition:background .2s}
.entry-close:hover{background:rgba(255,255,255,.28)}
.entry-head{position:relative;overflow:hidden;background:var(--navy);color:var(--white);padding:clamp(28px,4vw,44px) clamp(24px,4vw,44px) clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:10px;transition:background .35s ease}
.entry.is-colab .entry-head{background:var(--blue)}
.entry-spark{position:absolute;right:-28px;bottom:-56px;width:200px;height:200px;opacity:.95;animation:deco-spin 40s linear infinite}
.entry-head>*:not(.entry-spark){position:relative}
.entry-head h2{margin:0;font-size:clamp(30px,4.2vw,48px);font-weight:500;line-height:1.02;letter-spacing:-.015em;max-width:14ch}
.entry-head p{margin:0;font-size:17px;line-height:1.35;max-width:44ch}
.entry-body{padding:clamp(20px,3vw,32px) clamp(20px,4vw,44px) clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:18px}
.perfil-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--mist);border-radius:22px;padding:6px}
.perfil-switch button{display:flex;align-items:center;gap:12px;border-radius:17px;padding:12px 14px;color:var(--navy);transition:background .25s,color .25s,box-shadow .25s}
.perfil-switch button>.ms{width:40px;height:40px;border-radius:50%;background:var(--white);display:grid;place-items:center;font-size:22px;flex-shrink:0;transition:background .25s}
.perfil-switch strong{display:block;font-size:16px;font-weight:700;line-height:1.2}
.perfil-switch small{display:block;font-size:13.5px;opacity:.8}
.perfil-switch button[aria-checked="true"]{background:var(--white);box-shadow:0 6px 18px rgba(0,30,96,.12)}
.perfil-switch button[aria-checked="true"]>.ms{background:var(--yellow)}
.id-field{display:flex;flex-direction:column;gap:8px;animation:id-in .35s cubic-bezier(.2,.8,.2,1)}
@keyframes id-in{from{opacity:0;transform:translateY(-6px)}}
.id-field label{font-size:15.5px;font-weight:500}
.id-input{display:flex;align-items:center;gap:10px;border:1.5px solid var(--navy);border-radius:16px;padding:0 16px;height:56px;background:var(--white);color:var(--navy);transition:border-color .2s,box-shadow .2s}
.id-input:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,83,226,.16)}
.id-input .ms{font-size:22px}
.id-input input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:18px;letter-spacing:.02em;color:var(--navy);font-variant-numeric:tabular-nums}
.id-msg{font-size:14px;font-weight:700;min-height:1em}
.id-msg:empty{display:none}
.id-field.is-bad .id-input{border-color:#C5221F;box-shadow:0 0 0 4px rgba(197,34,31,.12)}
.id-field.is-bad .id-msg{color:#C5221F}
.id-field.is-ok .id-input{border-color:#2A8703}
.id-field.is-ok .id-msg{color:#2A8703}
.id-help{font-size:13.5px;opacity:.8;line-height:1.35}
.colab-go{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 24px;font-size:16.5px;font-weight:500;margin-top:6px}
.colab-go .ms{font-size:20px}
.entry.is-colab .picks,.entry.is-colab .entry-all{display:none}
.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.picks{display:flex;flex-direction:column;gap:8px}
.pick{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;background:var(--mist);border-radius:22px;padding:16px 18px;color:var(--navy);transition:background .25s,color .25s,transform .25s}
.entry[open] .pick{animation:pick-in .5s cubic-bezier(.2,.8,.2,1) both}
.entry[open] .pick:nth-child(2){animation-delay:.06s}
.entry[open] .pick:nth-child(3){animation-delay:.12s}
@keyframes pick-in{from{opacity:0;transform:translateY(14px)}}
.pick:hover,.pick:focus-visible{background:var(--navy);color:var(--white);transform:translateX(4px)}
.pick-icon{width:52px;height:52px;border-radius:50%;background:var(--white);display:grid;place-items:center;font-size:26px;color:var(--navy);transition:background .25s}
.pick:hover .pick-icon,.pick:focus-visible .pick-icon{background:var(--yellow)}
.pick-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.pick-text strong{font-size:clamp(17px,1.8vw,20px);font-weight:500;line-height:1.15}
.pick-text small{font-size:14px;opacity:.8;line-height:1.3}
.pick-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.pick-n{font-size:clamp(26px,3vw,34px);font-weight:500;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pick-go{font-size:24px;transition:transform .25s}
.pick:hover .pick-go{transform:translateX(4px)}
.entry-all{align-self:center;display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-size:15.5px;font-weight:700;padding:8px 12px;border-radius:999px}
.entry-all:hover{background:var(--mist-hover)}
.entry-all .ms{font-size:20px}
@keyframes sheet-in{from{transform:translateY(100%)}}
@keyframes sheet-out{to{transform:translateY(100%)}}
@media (max-width:719px){
  .entry{width:100%;max-height:94vh;margin:auto 0 0}
  .entry-card{border-radius:28px 28px 0 0;max-height:94vh}
  .entry[open] .entry-card{animation:sheet-in .45s cubic-bezier(.2,.8,.2,1) both}
  .entry.is-closing .entry-card{animation:sheet-out .22s ease both}
  .entry-head p{font-size:15.5px}
  .entry-spark{width:140px;height:140px;right:-34px;bottom:-40px}
  .entry.is-colab .entry-head p{display:none}
  .perfil-switch{grid-template-columns:1fr}
  .pick{grid-template-columns:auto minmax(0,1fr) auto;gap:12px;padding:14px}
  .pick-icon{width:44px;height:44px;font-size:22px}
  .entry-body{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
}
.pick-logos{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pick-logos span{background:var(--white);border-radius:8px;height:26px;padding:4px 8px;display:inline-flex;align-items:center}
.pick-logos img{display:block;height:16px;width:auto}
.pick:hover .pick-logos span,.pick:focus-visible .pick-logos span{box-shadow:0 0 0 1px rgba(255,255,255,.3)}
@media (max-width:719px){.pick-logos{gap:4px}}
@media (prefers-reduced-motion:reduce){.entry[open] .entry-card,.entry[open] .pick,.entry-spark,.id-field,.shake{animation:none !important}}
html.sheet-open{overflow:hidden}