/* ==========================================================================
   WEEM — capa «pro» del sitio público (2026-10-30, movimiento 2026-11-12).
   Se carga después de weem-identity.css en cada página pública (la inyecta
   src/shell/site-shell.mjs; no llega a Admin ni Operaciones). Solo usa tokens
   existentes: encabezado fijo de vidrio con barra de progreso, fondos de hero
   con rejilla y brillo, tarjetas con foco de luz, botones con relieve,
   separadores suaves y el movimiento de /shared/weem-motion.js.
   Reglas del movimiento: el contenido se ve siempre (solo se anima lo que
   entra desde abajo del pliegue), solo transform/translate/scale y opacity,
   nada dura más de 600 ms ni se repite en bucle, y con movimiento reducido
   todo queda quieto.
   ========================================================================== */
html:root{
  --pro-grid:rgba(11,13,18,.06);--pro-glow-a:rgba(232,89,12,.16);--pro-glow-b:rgba(199,58,8,.10);--pro-glow-c:rgba(255,173,120,.18);
  --pro-card-top:rgba(255,255,255,.75);--pro-spot:rgba(232,89,12,.08);--pro-lift:0 1px 2px rgba(11,13,18,.04),0 24px 48px -28px rgba(11,13,18,.28),0 18px 40px -30px rgba(199,58,8,.35);
  --pro-ease:cubic-bezier(.16,1,.3,1);
}
html:root[data-theme=dark]{
  --pro-grid:rgba(255,255,255,.055);--pro-glow-a:rgba(255,122,61,.20);--pro-glow-b:rgba(255,90,20,.12);--pro-glow-c:rgba(255,170,110,.10);
  --pro-card-top:rgba(255,255,255,.06);--pro-spot:rgba(255,122,61,.10);--pro-lift:0 1px 2px rgba(0,0,0,.4),0 28px 56px -30px rgba(0,0,0,.9),0 18px 44px -30px rgba(255,122,61,.35);
}
html:has(body[data-site-shell]){scroll-padding-top:84px}

/* --- Encabezado: fijo, vidrio, sombra al bajar y progreso de lectura ------ */
body[data-site-shell] .site-header{position:sticky;top:0;z-index:60}
body[data-site-shell] .site-header.is-scrolled{box-shadow:0 1px 0 var(--site-line),0 12px 32px -24px rgba(0,0,0,.35);background:color-mix(in srgb,var(--site-panel) 78%,transparent)}
body[data-site-shell] .site-logo{transition:transform .3s var(--pro-ease)}
body[data-site-shell] .site-logo:hover{transform:translateY(-1px)}
body[data-site-shell] .site-nav__link{position:relative}
body[data-site-shell] .site-nav__link:not([aria-current])::after{content:'';position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:var(--weem-ember);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--pro-ease)}
body[data-site-shell] .site-nav__link:not([aria-current]):hover::after{transform:scaleX(1)}
/* Subrayado que se desliza entre ítems (weem-motion.js agrega .pro-nav-ink en escritorio). */
body[data-site-shell] .site-header__bar:has(.pro-nav-ink){position:relative}
body[data-site-shell] .pro-nav-ink{position:absolute;left:0;top:0;width:100px;height:2px;border-radius:2px;background:var(--site-accent);transform-origin:left center;opacity:0;pointer-events:none;transition:transform .32s var(--pro-ease),opacity .2s ease}
body[data-site-shell] .pro-nav-ink.is-instant{transition:none}
@media (min-width:1100px){
  body[data-site-shell] .site-nav.has-ink .site-nav__link[aria-current]{box-shadow:none!important}
  body[data-site-shell] .site-nav.has-ink .site-nav__link::after{display:none}
}
@media (max-width:1099px){body[data-site-shell] .pro-nav-ink{display:none}}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    body[data-site-shell] .site-header::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--weem-sec-strong),var(--weem-sec),var(--weem-sec-bright));transform-origin:left;transform:scaleX(0);animation:pro-progress linear both;animation-timeline:scroll(root)}
  }
}
@keyframes pro-progress{to{transform:scaleX(1)}}

/* Botones: la forma vive en /shared/weem-ui.css (.w-btn); aquí solo el tamaño público,
   un levante al pasar el cursor y la flecha que avanza. */
body[data-site-shell]{--w-h:46px;--w-h-lg:52px;--w-radius:12px}
/* Botón principal: se eleva al pasar el puntero (transform) y su brillo es una capa
   que aparece por opacidad; al presionar, baja y se achica apenas. */
body[data-site-shell] .w-btn--primary::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 2px 4px rgba(11,13,18,.12),0 16px 32px -14px var(--weem-glow);opacity:0;pointer-events:none;transition:opacity .2s var(--pro-ease)}
@media (hover:hover){
  body[data-site-shell] .w-btn--primary:hover{transform:translateY(-1px)}
  body[data-site-shell] .w-btn--primary:hover::after{opacity:1}
}
body[data-site-shell] .w-btn:active{transform:translateY(0) scale(.98)}
body[data-site-shell] .w-btn--primary:active::after{opacity:0}
/* La flecha que avanza: en botones y enlaces con flecha al final. */
body[data-site-shell] :is(.w-btn,a) :is(.grp-icon,.imp-icon,.apl-ico,.inv-icon,.ini-icon,svg):has(path[d^="M5 12h14"]){transition:transform .25s var(--pro-ease)}
body[data-site-shell] :is(.w-btn,a):is(:hover,:focus-visible) :is(.grp-icon,.imp-icon,.apl-ico,.inv-icon,.ini-icon,svg):has(path[d^="M5 12h14"]){transform:translateX(3px)}

/* --- Rótulos: píldora con punto de brasa ---------------------------------- */
body[data-site-shell] :is(.grp-eyebrow,.imp-eyebrow){display:inline-flex;align-items:center;gap:8px}
body[data-site-shell] :is(.grp-hero,.imp-hero) :is(.grp-eyebrow,.imp-eyebrow):not(:is(.imp-path,.imp-card,.grp-door,.grp-card) *){padding:6px 12px 6px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--weem-ember) 28%,transparent);background:color-mix(in srgb,var(--weem-ember) 7%,transparent);line-height:1.2;color:var(--link,#A8320A)}
body[data-site-shell] :is(.grp-hero,.imp-hero) :is(.grp-eyebrow,.imp-eyebrow):not(:is(.imp-path,.imp-card,.grp-door,.grp-card) *)::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--weem-ember);box-shadow:0 0 0 0 var(--weem-glow)}
@media (prefers-reduced-motion:no-preference){
  body[data-site-shell] :is(.grp-hero,.imp-hero) :is(.grp-eyebrow,.imp-eyebrow):not(:is(.imp-path,.imp-card,.grp-door,.grp-card) *)::before{animation:pro-ping 1.2s var(--pro-ease) .4s 1 both}
}
@keyframes pro-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--weem-ember) 55%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}

/* --- Héroes: rejilla enmascarada + malla de brillo que deriva ------------- */
body[data-site-shell] :is(.grp-hero,.imp-hero,.kit-learning-hero,.publication-index>.document-heading,.reading-workspace>.document-heading,.sales-opening){position:relative;isolation:isolate;overflow:clip}
body[data-site-shell] :is(.grp-hero,.imp-hero,.publication-index>.document-heading,.reading-workspace>.document-heading,.sales-opening)::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--pro-grid) 1px,transparent 1px),linear-gradient(90deg,var(--pro-grid) 1px,transparent 1px);background-size:56px 56px;background-position:center top;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 0%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 75% 70% at 50% 0%,#000 25%,transparent 75%)}
body[data-site-shell] :is(.grp-hero,.imp-hero,.kit-learning-hero,.publication-index>.document-heading,.reading-workspace>.document-heading,.sales-opening)::after{content:'';position:absolute;z-index:-1;pointer-events:none;inset:-20% -10% auto -10%;height:120%;background:radial-gradient(38% 46% at 18% 22%,var(--pro-glow-a),transparent 70%),radial-gradient(30% 40% at 82% 12%,var(--pro-glow-c),transparent 70%),radial-gradient(34% 44% at 64% 78%,var(--pro-glow-b),transparent 70%);filter:blur(8px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent)}
/* Los textos del hero quedan sobre el fondo. */
body[data-site-shell] :is(.grp-hero,.imp-hero) > *{position:relative}
/* Titular principal de las páginas 2026: Instrument Sans 650, interletra −0,03em (DIRECCION-2026 §3). */
body[data-site-shell] .grp-hero h1,body[data-site-shell] .imp-hero h1{letter-spacing:-.03em}
html body[data-site-shell] main h1{font-weight:650!important;letter-spacing:-.03em!important}
body[data-site-shell] .grp-hero:not(.grp-hero--page){padding-bottom:72px}

/* --- Tarjetas: vidrio claro, borde fino, foco de luz y elevación ---------- */
body[data-site-shell] :is(.grp-door,.grp-proof>li,.grp-app,.grp-card,.grp-rules>li,.imp-path,.imp-card,.imp-step,.imp-fee,.kit-app-row,.article-index>li){
  --mx:-400px;--my:-400px;
  background-image:radial-gradient(420px circle at var(--mx) var(--my),var(--pro-spot),transparent 45%),linear-gradient(180deg,var(--pro-card-top),transparent 38%);
  transition:transform .3s var(--pro-ease)
}
body[data-site-shell] :is(.grp-door,.grp-app,.grp-card,.imp-path,.imp-card,.imp-step,.kit-app-row){box-shadow:0 1px 2px rgba(11,13,18,.04),0 10px 30px -24px rgba(11,13,18,.25)}
@media (hover:hover){
  body[data-site-shell] :is(.grp-door,.grp-app,.grp-card,.grp-proof>li,.imp-path,.imp-card,.imp-step,.kit-app-row):hover{box-shadow:var(--pro-lift);border-color:color-mix(in srgb,var(--weem-sec) 55%,var(--site-line))}
  /* Tarjetas de las páginas 2026: el borde se ilumina en el color de la sección. */
  /* El texto no se mueve mientras se lee: la tarjeta no se desplaza, se ilumina su borde. */
  body[data-site-shell] :is(.apl-start,.w-card--interactive):hover{transform:none;border-color:var(--weem-sec)!important}
  html:root body[data-site-shell] .ini .ini-door.grp-door:hover{border-color:color-mix(in srgb,var(--sec) 60%,var(--line))}
  body[data-site-shell] :is(.grp-rules>li):hover{border-color:color-mix(in srgb,var(--weem-sec) 55%,var(--site-line))}
}
body[data-site-shell] :is(.grp-door__icon,.grp-card__icon,.imp-card__icon){transition:transform .3s var(--pro-ease)}
body[data-site-shell] :is(.grp-door,.grp-card,.imp-card,.imp-path):hover :is(.grp-door__icon,.grp-card__icon,.imp-card__icon){transform:translateY(-2px) rotate(-4deg)}
body[data-site-shell] :is(.grp-proof__icon,.grp-rules__n,.imp-step__n){background:linear-gradient(140deg,var(--kit-ink,#0B0D12),color-mix(in srgb,var(--kit-ink,#0B0D12) 70%,var(--weem-ember)))}
body[data-site-shell] .imp-step:hover .imp-step__n,body[data-site-shell] .grp-rules>li:hover .grp-rules__n{background:var(--weem-ember);color:var(--site-accent-ink)}
body[data-site-shell] .imp-path--primary{border-color:color-mix(in srgb,var(--weem-ember) 40%,var(--site-line))}

/* --- Separadores suaves y secciones alternas con brillo ------------------- */
body[data-site-shell] :is(.grp-section,.imp-section){border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,var(--site-line) 18%,var(--site-line) 82%,transparent) 1}
body[data-site-shell] :is(.grp-section--alt,.imp-section--alt){background-image:radial-gradient(60% 50% at 100% 0%,color-mix(in srgb,var(--weem-ember) 6%,transparent),transparent 70%)}
body[data-site-shell] :is(.grp-head,.imp-head) h2{letter-spacing:-.035em}
body[data-site-shell] :is(.grp-section,.imp-section,.imp-hero,.grp-hero){scroll-margin-top:84px}

/* --- Educación (IPCC) y lecturas ----------------------------------------- */
body[data-site-shell] .kit-learning-hero::after{opacity:.9}
body[data-site-shell] .article-index>li{border-radius:16px;padding-left:16px!important;padding-right:16px!important;border:1px solid transparent}
@media (hover:hover){body[data-site-shell] .article-index>li:hover{border-color:var(--site-line);box-shadow:var(--pro-lift)}}
body[data-site-shell] .article-index>li .number{font-family:'JetBrains Mono',ui-monospace,monospace;color:var(--site-accent)}
body[data-site-shell] .article-index h2 a{text-decoration-color:color-mix(in srgb,currentColor 30%,transparent);transition:text-decoration-color .3s var(--pro-ease)}
body[data-site-shell] .article-index h2 a:hover{text-decoration-color:currentColor}
body[data-site-shell] .article-index>li{background-image:radial-gradient(420px circle at var(--mx) var(--my),var(--pro-spot),transparent 45%)}
/* Encabezados de lectura: solo el brillo, sin rejilla ni bordes duros. */
body[data-site-shell] :is(.publication-index,.reading-workspace)>.document-heading::before{content:none}
body[data-site-shell] :is(.publication-index,.reading-workspace)>.document-heading::after{inset:0;height:auto;filter:none;background:radial-gradient(closest-side at 25% 50%,var(--pro-glow-a),transparent),radial-gradient(closest-side at 72% 55%,var(--pro-glow-c),transparent)}

/* --- Pie: brillo superior ------------------------------------------------- */
body[data-site-shell] .site-prefooter{position:relative;border-top:0;background-image:radial-gradient(50% 120% at 0% 0%,color-mix(in srgb,var(--weem-ember) 7%,transparent),transparent 70%)}
body[data-site-shell] .site-prefooter::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--weem-ember) 55%,var(--site-line)),transparent)}

/* --- Primer pantallazo quieto -------------------------------------------- */
/* weem-identity.css hace subir y aparecer las tres primeras secciones al cargar
   (weem-rise, desde opacidad 0): el héroe se veía vacío un instante. En el sitio
   público lo que ya está a la vista no se anima; el movimiento empieza al bajar. */
body[data-site-shell] > main > section:nth-child(-n+3),body[data-site-shell] main > .home-opening,body[data-site-shell] .site-steps,body[data-site-shell] .oc-import-workflow,body[data-site-shell] .kit-tool>*{animation:none}

/* --- Entrada al hacer scroll, gráficos y cifras (weem-motion.js) ---------- */
/* Solo lo que el script marcó por estar debajo del pliegue arranca invisible;
   la animación usa «backwards»: al terminar, el bloque vuelve a sus estilos y
   el levante de las tarjetas sigue funcionando. 420 ms + hasta 150 ms de espera. */
@media (prefers-reduced-motion:no-preference){
  html.pro-motion [data-pro-reveal]:not(.is-in){opacity:0}
  html.pro-motion [data-pro-reveal].is-in{animation:pro-in .42s var(--pro-ease) backwards;animation-delay:calc(var(--pro-i,0) * 50ms)}
  /* Gráficos: barras que crecen (scale) y etapas que avanzan (translate + opacity),
     con su línea que se dibuja de arriba abajo. 360 ms, 40 ms entre piezas. */
  [data-draw-pending].is-drawn [data-draw-item]{transition:scale .36s var(--pro-ease),translate .36s var(--pro-ease),opacity .28s ease;transition-delay:calc(var(--draw-i,0) * 40ms)}
  [data-draw-pending].is-drawn [data-draw-item]::before{transition:scale .36s var(--pro-ease);transition-delay:calc(var(--draw-i,0) * 40ms + 80ms)}
  [data-draw=bars-x] [data-draw-item]{transform-origin:left center}
  [data-draw=bars-y] [data-draw-item]{transform-origin:center bottom}
  [data-draw=steps] [data-draw-item]::before{transform-origin:center top}
  [data-draw=bars-x][data-draw-pending]:not(.is-drawn) [data-draw-item]{scale:0 1}
  [data-draw=bars-y][data-draw-pending]:not(.is-drawn) [data-draw-item]{scale:1 0}
  [data-draw=steps][data-draw-pending]:not(.is-drawn) [data-draw-item]{opacity:0;translate:0 10px}
  [data-draw=steps][data-draw-pending]:not(.is-drawn) [data-draw-item]::before{scale:1 0}
  /* Foco: el anillo llega desde un poco más afuera. */
  body[data-site-shell] :is(a,button,summary,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{animation:pro-focus .18s var(--pro-ease)}
}
@keyframes pro-in{from{opacity:0;translate:0 12px}}
@keyframes pro-focus{from{outline-offset:6px}}
[data-count]{font-variant-numeric:tabular-nums}

/* --- Navegación entre páginas: fundido corto donde el navegador lo soporta -- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s;animation-timing-function:cubic-bezier(.4,0,.2,1)}

/* --- Movimiento reducido: todo quieto ------------------------------------ */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  body[data-site-shell] *,body[data-site-shell] *::before,body[data-site-shell] *::after{animation:none!important;transition:none!important}
  body[data-site-shell] :is(.grp-door,.grp-app,.grp-card,.grp-proof>li,.grp-rules>li,.imp-path,.imp-card,.imp-step,.kit-app-row,.article-index>li):hover{transform:none}
}
@media print{html.pro-motion [data-pro-reveal]{opacity:1!important;translate:none!important}[data-draw-pending] [data-draw-item],[data-draw-pending] [data-draw-item]::before{opacity:1!important;scale:none!important;translate:none!important}}