/* ============================================================
   BLOG · 01-portada  (#inicio)  — prefijo pt
   «La cabecera de la revista»: logotipo FITAL dorado con un barrido de luz,
   «Blog» en Fraunces itálica dorada y, detrás, 36 hojas con portadas reales
   en espiral (WebGL, js/pages/blog/portada.js). Respaldo: biblioteca de noche
   (imagen + video si existe) con viñeta de tinta.
   ============================================================ */
#inicio.pt{position:relative;background:var(--ink);color:var(--cream);isolation:isolate}
#inicio .pt__sprite{position:absolute;width:0;height:0;overflow:hidden}
#inicio .pt__track{position:relative}
#inicio .pt__stage{position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;overflow:hidden;overflow:clip;touch-action:pan-y}

/* Escritorio con hojas WebGL: la portada dura 1.45 pantallas y el escenario queda fijo (sticky, sin pin) mientras la espiral se abre */
@media (min-width:900px){
  #inicio.pt--long .pt__track{height:145vh;height:145svh}
  #inicio.pt--long .pt__stage{position:sticky;top:0;height:100vh;height:100svh}
}

/* ---------- Fondo: imagen · video · canvas ---------- */
#inicio .pt__bg{position:absolute;inset:0;z-index:0;background:var(--ink)}
#inicio .pt__bg picture{display:contents}
#inicio .pt__img,#inicio .pt__video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;
  user-select:none;-webkit-user-drag:none;pointer-events:none;color:transparent;font-size:0}
#inicio .pt__img{opacity:.62}
#inicio .pt__video{opacity:0;transition:opacity 1.4s var(--ease)}
#inicio.pt--video .pt__video{opacity:.62}
#inicio .pt__gl{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity 1.6s var(--ease)}
#inicio .pt__gl canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
#inicio.pt--gl .pt__gl{opacity:1}
/* Con las hojas, la biblioteca queda como penumbra lejana */
#inicio.pt--gl .pt__img{opacity:.16;transition:opacity 1.6s var(--ease)}

/* Viñeta de tinta: centro limpio para la mancheta y el titular */
#inicio .pt__shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(64% 58% at 50% 52%,rgba(5,9,15,.86) 0%,rgba(5,9,15,.62) 46%,rgba(5,9,15,.18) 78%,rgba(5,9,15,0) 100%),
    linear-gradient(180deg,rgba(5,9,15,.82) 0%,rgba(5,9,15,.2) calc(var(--nav-h) + 60px),rgba(5,9,15,0) 40%),
    linear-gradient(0deg,rgba(5,9,15,1) 0%,rgba(5,9,15,.7) 9%,rgba(5,9,15,0) 26%)}
#inicio.pt--gl .pt__shade{background:
    radial-gradient(40% 46% at 50% 54%,rgba(5,9,15,.82) 0%,rgba(5,9,15,.55) 52%,rgba(5,9,15,0) 100%),
    linear-gradient(180deg,rgba(5,9,15,.7) 0%,rgba(5,9,15,0) calc(var(--nav-h) + 40px)),
    linear-gradient(0deg,rgba(5,9,15,.96) 0%,rgba(5,9,15,0) 18%)}

/* ---------- Cuerpo ---------- */
#inicio .pt__body{position:relative;z-index:2;flex:1 1 auto;display:flex;align-items:center;
  padding:calc(var(--nav-h) + clamp(10px,3vh,40px)) 0 clamp(64px,10vh,110px)}
#inicio .pt__in{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}

/* Mancheta: filete · logotipo · filete */
#inicio .pt__mast{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(16px,2.2vw,34px);width:min(100%,920px)}
#inicio .pt__rule{display:block;height:1px}
#inicio .pt__rule--l{background:linear-gradient(90deg,rgba(216,166,70,0) 0%,rgba(216,166,70,.38) 55%,rgba(244,213,138,.9) 100%);transform-origin:100% 50%}
#inicio .pt__rule--r{background:linear-gradient(270deg,rgba(216,166,70,0) 0%,rgba(216,166,70,.38) 55%,rgba(244,213,138,.9) 100%);transform-origin:0 50%}
#inicio .pt__logo{position:relative;display:block;width:clamp(124px,11.5vw,184px);aspect-ratio:3048/1016}
#inicio .pt__logo img{display:block;width:100%;height:100%}
#inicio .pt__sweep{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,rgba(255,250,232,0) 38%,rgba(255,250,232,.95) 50%,rgba(255,250,232,0) 62%) 130% 0/260% 100% no-repeat;
  -webkit-mask:url(../../../assets/img/brand/fital-logo-mask.svg) center/contain no-repeat;mask:url(../../../assets/img/brand/fital-logo-mask.svg) center/contain no-repeat}

#inicio .pt__folio{display:flex;align-items:center;justify-content:center;gap:.5em;margin:clamp(12px,1.8vh,20px) 0 0;
  font:700 .78rem/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold-2)}
#inicio .pt__folio .cifra{font-size:1.08em;letter-spacing:.04em;color:var(--cream)}
#inicio .pt__dot{display:block;width:4px;height:4px;margin:0 .5em;border-radius:50%;background:var(--gold)}

/* Titular */
#inicio .pt__title{margin:clamp(2px,1vh,14px) 0 0;display:flex;flex-direction:column;align-items:center;line-height:1}
#inicio .pt__word{display:block;font:italic 500 min(22vw,36svh)/.86 var(--serif);letter-spacing:-.045em;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;font-optical-sizing:auto;
  padding:.02em .14em .22em .06em;margin:-.02em -.14em -.08em -.06em}
#inicio .pt__word .tn-char-mask{padding:.04em .12em .26em .04em;margin:-.04em -.12em -.26em -.04em}
#inicio .pt__word,#inicio .pt__word .tn-char{color:var(--gold);
  background:linear-gradient(180deg,#FBE9B4 0%,#F4D58A 22%,#D8A646 56%,#B98A35 78%,#8F6524 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#inicio .pt__word .tn-char{padding-right:.02em}
#inicio .pt__pag{display:block;margin-top:.3em;font:italic 400 clamp(1.25rem,2.2vw,2.1rem)/1.1 var(--serif);color:var(--cream-2);letter-spacing:-.01em}
#inicio .pt__pag[hidden]{display:none}

#inicio .pt__lead{margin:clamp(10px,2.4vh,28px) auto 0;max-width:46ch;font-size:clamp(1.06rem,1.3vw,1.28rem);line-height:1.55;color:var(--cream-2);text-wrap:balance}
#inicio .pt__lead .tn-line-mask{padding-bottom:.12em;margin-bottom:-.12em}

/* ---------- Lomos (4 tomos) ---------- */
#inicio .pt__tomos{margin-top:clamp(22px,4.4vh,52px);width:100%}
#inicio .pt__list{list-style:none;margin:0 auto;padding:0;display:flex;justify-content:center;max-width:1100px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  background:linear-gradient(90deg,rgba(5,9,15,0) 0%,rgba(5,9,15,.72) 14%,rgba(5,9,15,.72) 86%,rgba(5,9,15,0) 100%)}
/* Con hojas WebGL detrás: banda de tinta pareja con desenfoque ligero, los lomos siempre se leen limpios */
#inicio.pt--gl .pt__list{background:rgba(5,9,15,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#inicio .pt__li{flex:1 1 0;min-width:0;display:flex}
#inicio .pt__li + .pt__li{border-left:1px solid var(--hair)}
#inicio .pt__tomo{position:relative;flex:1;display:flex;align-items:center;gap:14px;min-height:72px;padding:14px clamp(14px,1.6vw,26px);
  text-align:left;color:var(--cream);text-decoration:none;transition:background .5s var(--ease)}
#inicio .pt__tomo:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold-grad,var(--gold));transform:scaleX(0);transform-origin:50% 50%;transition:transform .7s var(--ease)}
#inicio .pt__tomo:hover,#inicio .pt__tomo:focus-visible{background:linear-gradient(180deg,rgba(216,166,70,0) 0%,rgba(216,166,70,.08) 100%)}
#inicio .pt__tomo:hover:after,#inicio .pt__tomo:focus-visible:after{transform:scaleX(1)}
#inicio .pt__tomo:focus-visible{outline:2px solid var(--gold-2);outline-offset:-2px}
#inicio .pt__g{flex:none;width:30px;height:30px;fill:none;stroke:var(--gold-2);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .7s var(--ease)}
#inicio .pt__tomo:hover .pt__g,#inicio .pt__tomo:focus-visible .pt__g{transform:translateY(-2px) scale(1.06)}
#inicio .pt__tx{display:flex;flex-direction:column;gap:6px;min-width:0}
#inicio .pt__meta{display:flex;align-items:center;gap:8px;font:700 .75rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);white-space:nowrap}
#inicio .pt__bar{display:block;width:1px;height:10px;background:var(--hair)}
#inicio .pt__n{color:var(--cream-2);letter-spacing:.12em}
#inicio .pt__n .cifra{letter-spacing:0;color:var(--cream)}
#inicio .pt__nom{font:500 clamp(1.05rem,1.3vw,1.3rem)/1.15 var(--serif);color:var(--cream);letter-spacing:-.01em}

/* ---------- Indicador de scroll ---------- */
#inicio .pt__scroll{position:absolute;z-index:3;left:50%;bottom:clamp(14px,2.6vh,30px);transform:translateX(-50%);
  display:inline-flex;flex-direction:column;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:4px 8px;border:0;background:none;cursor:pointer;
  font:600 .75rem/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--cream-2);transition:color .4s}
#inicio .pt__scroll:hover{color:var(--gold-2)}
#inicio .pt__scroll:focus-visible{outline:2px solid var(--gold-2);outline-offset:4px;border-radius:6px}
#inicio .pt__scroll-l{position:relative;display:block;width:1px;height:34px;background:var(--line-2);overflow:hidden}
#inicio .pt__scroll-l i{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--gold-2);transform:translateY(-101%);animation:pt-scroll 2.4s var(--ease-io) infinite}
@keyframes pt-scroll{0%{transform:translateY(-101%)}55%{transform:translateY(0)}100%{transform:translateY(101%)}}
html.no-js #inicio .pt__scroll{display:none}
html.reduce #inicio .pt__scroll-l i{animation:none;transform:none}

/* ---------- Pantallas anchas y bajas (1280×720) ---------- */
@media (min-width:900px) and (max-height:780px){
  #inicio .pt__word{font-size:min(20vw,31svh)}
  #inicio .pt__tomo{min-height:62px;padding-block:10px}
  #inicio .pt__tomos{margin-top:clamp(16px,3vh,30px)}
  #inicio .pt__body{padding-bottom:70px}
}
/* Tableta horizontal / escritorio estrecho: los lomos en 2×2 si no caben en fila */
@media (min-width:900px) and (max-width:1100px){
  #inicio .pt__nom{font-size:1rem}
  #inicio .pt__g{width:26px;height:26px}
  #inicio .pt__tomo{gap:10px}
}

/* ---------- Celular y tableta vertical ---------- */
@media (max-width:899px){
  #inicio .pt__img,#inicio .pt__video{object-position:50% 40%}
  #inicio .pt__img{opacity:.5}
  #inicio.pt--video .pt__video{opacity:.5}
  #inicio .pt__shade{background:
    radial-gradient(90% 52% at 50% 46%,rgba(5,9,15,.8) 0%,rgba(5,9,15,.55) 60%,rgba(5,9,15,.25) 100%),
    linear-gradient(180deg,rgba(5,9,15,.85) 0%,rgba(5,9,15,.25) calc(var(--nav-h) + 50px),rgba(5,9,15,0) 40%),
    linear-gradient(0deg,rgba(5,9,15,1) 0%,rgba(5,9,15,.75) 22%,rgba(5,9,15,.2) 46%,rgba(5,9,15,0) 60%)}
  #inicio .pt__body{align-items:center;padding:calc(var(--nav-h) + clamp(14px,3.4svh,40px)) 0 clamp(24px,4svh,40px)}
  #inicio .pt__mast{gap:14px}
  #inicio .pt__logo{width:38vw;max-width:220px}
  #inicio .pt__folio{font-size:.75rem;letter-spacing:.26em}
  #inicio .pt__word{font-size:min(32vw,21svh)}
  #inicio .pt__lead{font-size:clamp(1rem,4.2vw,1.12rem);max-width:30ch}
  #inicio .pt__tomos{margin-top:clamp(18px,3.4svh,32px)}
  #inicio .pt__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:0;max-width:560px}
  #inicio .pt__li + .pt__li{border-left:0}
  #inicio .pt__tomo{flex-direction:column;align-items:flex-start;gap:10px;min-height:56px;padding:13px 14px;border:1px solid var(--hair);border-radius:var(--r-sm);
    background:rgba(5,9,15,.62)}
  #inicio .pt__tomo:after{left:14px;right:14px}
  #inicio .pt__g{width:24px;height:24px}
  #inicio .pt__tx{gap:5px;width:100%}
  #inicio .pt__meta{font-size:.75rem;letter-spacing:.14em;gap:7px}
  #inicio .pt__n{letter-spacing:.06em}
  #inicio .pt__nom{font-size:1.08rem}
  /* Pista mínima «Desliza» en el hueco inferior; se desvanece al primer desplazamiento */
  #inicio .pt__scroll{bottom:max(10px,env(safe-area-inset-bottom));gap:8px;font-size:.75rem;letter-spacing:.24em;transition:opacity .5s var(--ease),visibility .5s}
  #inicio .pt__scroll-l{height:24px}
  #inicio.pt--moved .pt__scroll{opacity:0!important;visibility:hidden}
}
/* Sin hueco (360×640): la pista no cabe sin tapar los lomos */
@media (max-width:899px) and (max-height:760px){
  #inicio .pt__scroll{display:none}
}
/* Celular estrecho y bajo (360×640): todo dentro del primer pantallazo */
@media (max-width:899px) and (max-height:700px){
  #inicio .pt__word{font-size:min(28vw,17svh)}
  #inicio .pt__logo{width:34vw}
  #inicio .pt__tomo{padding:10px 12px;gap:7px}
  #inicio .pt__g{width:22px;height:22px}
  #inicio .pt__lead{margin-top:8px}
}
/* ≤430 px: el nav ya lleva el logotipo; la mancheta se aligera (sin filetes, logo más chico) para que «Blog» mande */
@media (max-width:430px){
  #inicio .pt__mast{display:flex;justify-content:center}
  #inicio .pt__rule{display:none}
  #inicio .pt__logo{width:30vw}
}
@media (max-width:380px){
  #inicio .pt__meta{letter-spacing:.1em}
  #inicio .pt__n{letter-spacing:.02em}
  #inicio .pt__nom{font-size:1rem}
}
/* Celular horizontal */
@media (max-width:899px) and (max-height:500px) and (orientation:landscape){
  #inicio .pt__word{font-size:min(16vw,30svh)}
  #inicio .pt__list{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
  #inicio .pt__lead{max-width:60ch}
}

/* ---------- Sin backdrop ni filtros en gama baja: nada que quitar aquí (las superficies ya son opacas) ---------- */
html.reduce #inicio .pt__gl{display:none}