/* ==========================================================================
   WEEM — capa «pro» del sitio público (2026-10-30).
   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 animado (solo CSS), tarjetas elevadas con foco de luz,
   botones con relieve, separadores suaves y entrada al hacer scroll
   (/shared/weem-motion.js). 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;transition:box-shadow .3s var(--pro-ease),background .3s var(--pro-ease)}
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)}
@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,#C73A08,#E8590C,#FF9A5C);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}
@media (hover:hover){body[data-site-shell] .w-btn--primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 2px 4px rgba(11,13,18,.12),0 16px 32px -14px var(--weem-glow)}}
body[data-site-shell] :is(.w-btn,.grp-link,.imp-link) .grp-icon:last-child,body[data-site-shell] :is(.w-btn,.grp-link,.imp-link) .imp-icon:last-child{transition:transform .3s var(--pro-ease)}
body[data-site-shell] :is(.w-btn,.grp-link,.imp-link):hover :is(.grp-icon,.imp-icon):last-child{transform:translateX(3px)}
body[data-site-shell] .w-btn:active{transform:translateY(0) scale(.985)}

/* --- 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 2.4s var(--pro-ease) infinite}
}
@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);will-change:transform;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent)}
@media (prefers-reduced-motion:no-preference){
  body[data-site-shell] :is(.grp-hero,.imp-hero,.kit-learning-hero,.publication-index>.document-heading,.reading-workspace>.document-heading,.sales-opening)::after{animation:pro-drift 18s ease-in-out infinite alternate}
}
@keyframes pro-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,2%,0) scale(1.06)}100%{transform:translate3d(-3%,-1%,0) scale(1.02)}}
/* Los textos del hero quedan sobre el fondo. */
body[data-site-shell] :is(.grp-hero,.imp-hero) > *{position:relative}
body[data-site-shell] .grp-hero h1,body[data-site-shell] .imp-hero h1{letter-spacing:-.045em}
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 .45s var(--pro-ease),box-shadow .45s var(--pro-ease),border-color .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{transform:translateY(-4px);box-shadow:var(--pro-lift);border-color:color-mix(in srgb,var(--weem-ember) 38%,var(--site-line))}
  body[data-site-shell] :is(.grp-rules>li):hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--weem-ember) 38%,var(--site-line))}
}
body[data-site-shell] :is(.grp-door__icon,.grp-card__icon,.imp-card__icon){transition:transform .45s var(--pro-ease),box-shadow .45s 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);box-shadow:0 10px 22px -12px var(--weem-glow)}
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-step__n,body[data-site-shell] .grp-rules__n{transition:background .3s var(--pro-ease),color .3s var(--pro-ease)}
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);transform:translateY(-2px)}}
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)}

/* --- Entrada al hacer scroll (weem-motion.js) y contadores ---------------- */
@media (prefers-reduced-motion:no-preference){
  /* Animación con relleno «backwards»: al terminar, el elemento vuelve a sus
     estilos normales y el levante de las tarjetas sigue funcionando. */
  html.pro-motion [data-pro-reveal]:not(.is-in){opacity:0}
  html.pro-motion [data-pro-reveal].is-in{animation:pro-in .8s var(--pro-ease) backwards;animation-delay:calc(var(--pro-i,0) * 70ms)}
}
@keyframes pro-in{from{opacity:0;transform:translate3d(0,18px,0);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
[data-count]{font-variant-numeric:tabular-nums}

/* --- Movimiento reducido: todo quieto ------------------------------------ */
@media (prefers-reduced-motion:reduce){
  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;transform:none!important;filter:none!important}}