/* La Bóveda Viral · app
   Un archivo de lujo que se usa como herramienta: papel, tinta, sello ×N y marcatextos. */

/* ============ TOKENS ============ */
:root{
  --paper:#EEF0EC; --paper-2:#E4E7E1; --card:#FBFCF9; --ink:#171B22; --muted:#5A6270;
  --line:#CDD2CB; --line-strong:#7A827B;
  --stamp:#B42318; --on-stamp:#FFFFFF; --stamp-img:#B42318; --stamp-10:rgba(180,35,24,.10);
  --mark:#F2D64B; --mark-bg:#F2D64B; --mark-hl:#F2D64B; --on-mark:#171B22;
  --steel:#2F3A48; --on-steel:#EEF0EC; --ok:#2F6B4F;
  --video-bg:#0B0E12; --scrim:rgba(11,14,18,.66);
  --hover:rgba(23,27,34,.06);
  --sh-1:0 1px 2px rgba(23,27,34,.08);
  --sh-2:0 18px 40px -24px rgba(0,0,0,.35);
  --sh-sheet:0 -16px 48px -16px rgba(0,0,0,.45);
  --disp:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sten:"Stardos Stencil","Big Shoulders Display",Impact,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:16px;
  --nav-h:56px;
  --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#12161C; --paper-2:#0E1217; --card:#1B2129; --ink:#E9ECE6; --muted:#9AA3AF;
    --line:#2C343F; --line-strong:#707A88;
    --stamp:#F0645A; --on-stamp:#12161C; --stamp-10:rgba(240,100,90,.10);
    --mark:#E7C93A; --mark-bg:rgba(231,201,58,.30); --mark-hl:rgba(231,201,58,.42);
    --steel:#0B0E12; --on-steel:#E9ECE6; --ok:#6FBF95;
    --hover:rgba(233,236,230,.07);
    --sh-1:none;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#12161C; --paper-2:#0E1217; --card:#1B2129; --ink:#E9ECE6; --muted:#9AA3AF;
  --line:#2C343F; --line-strong:#707A88;
  --stamp:#F0645A; --on-stamp:#12161C; --stamp-10:rgba(240,100,90,.10);
  --mark:#E7C93A; --mark-bg:rgba(231,201,58,.30); --mark-hl:rgba(231,201,58,.42);
  --steel:#0B0E12; --on-steel:#E9ECE6; --ok:#6FBF95;
  --hover:rgba(233,236,230,.07);
  --sh-1:none;
  color-scheme:dark;
}
@media (min-width:768px){ :root{ --gut:24px } }
@media (min-width:1024px){ :root{ --gut:32px } }

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding-bottom:calc(var(--nav-h) + var(--safe-b))}
@media (min-width:1024px){ body{font-size:17px;line-height:1.6;padding-bottom:0} }
main{flex:1 0 auto;outline:none;display:block}
img{max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:inherit}
a{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
.ic{width:24px;height:24px;flex:none;display:inline-block;vertical-align:middle}
.ic-s{width:18px;height:18px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.nw{white-space:nowrap}
/* Campos: el gris por defecto del placeholder no llega a AA (3.5:1 en oscuro); --muted da 5.97:1 y 6.4:1 */
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input[type="search"]{text-overflow:ellipsis}

/* El foco del teclado nunca queda debajo de una barra fija (WCAG 2.4.11). Lo que tapa, medido:
   celular: nav inferior 56 + safe · ficha: Índice 44 arriba y acciones 60 abajo · listas: .fbar 52 ·
   Buscar: .bus-cab 64 + .fbar 52 · computadora: barra de arriba 65 (en la ficha + Índice 44).
   Con un aviso a la vista (html.con-aviso) abajo se suman 80 px. */
html{--sp-t:16px;--sp-b:calc(var(--nav-h) + var(--safe-b) + 16px);--sp-aviso:0px;scroll-padding-top:var(--sp-t);scroll-padding-bottom:calc(var(--sp-b) + var(--sp-aviso))}
html.con-aviso{--sp-aviso:80px}
html:has(.fbar){--sp-t:68px}
html:has(.pant.bus){--sp-t:132px}
html:has(body.en-ficha){--sp-t:60px;--sp-b:calc(60px + var(--safe-b) + 16px)}
@media (min-width:1024px){
  html,html:has(.fbar),html:has(.pant.bus){--sp-t:80px;--sp-b:16px}
  html:has(body.en-ficha){--sp-t:124px;--sp-b:16px}
}

:focus{outline:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px var(--mark)}
main:focus-visible,h1:focus-visible,[tabindex="-1"]:focus-visible{outline:none;box-shadow:none}

.saltar{position:fixed;left:12px;top:-80px;z-index:100;background:var(--ink);color:var(--paper);font:700 15px/1 var(--body);padding:15px 16px;border-radius:3px;text-decoration:none}
.saltar:focus{top:12px}

.wrap{width:100%;max-width:1240px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
@media (min-width:1024px){ .wrap{max-width:calc(1240px + 64px)} }

/* ============ TIPOGRAFÍA ============ */
.eyebrow{font:600 11px/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-strong)}
.eyebrow a:hover{color:var(--ink)}
/* Big Shoulders pone los acentos de Á/É/Ú y la cola del ¿ fuera de la caja: con menos de 1 chocan con el renglón de arriba o de abajo */
.h1{font:900 36px/1 var(--disp);text-transform:uppercase;letter-spacing:.005em;text-wrap:balance;margin:10px 0 0}
.h2{font:800 24px/1.02 var(--disp);text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
@media (min-width:1024px){ .h1{font-size:56px} .h2{font-size:28px} }
/* La cola del ¿ baja por debajo de la línea base: se sube un poco (Big Shoulders no trae la variante 'case') */
.q-inv{display:inline-block;transform:translateY(-.14em)}
/* Marcatextos: banda en el tercio bajo de las letras, no encima de media palabra */
.mark{background:linear-gradient(transparent 64%,var(--mark-hl) 64%,var(--mark-hl) 92%,transparent 92%);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .mark{background:linear-gradient(transparent 80%,var(--mark) 80%,var(--mark) 94%,transparent 94%)} }
:root[data-theme="dark"] .mark{background:linear-gradient(transparent 80%,var(--mark) 80%,var(--mark) 94%,transparent 94%)}
.sub{color:var(--muted);margin-top:10px;max-width:60ch}
.cuenta-m{font:400 12px/1.4 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;margin-top:10px}
.lbl-m{font:600 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--stamp)}
.num{font-variant-numeric:tabular-nums}

/* ============ BOTONES ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:3px;font:700 15px/1.15 var(--body);text-decoration:none;text-align:center;transition:background-color .2s,filter .2s,transform .12s,color .2s;user-select:none;-webkit-user-select:none}
.btn .ic{width:20px;height:20px}
.btn-p{background:var(--stamp);color:var(--on-stamp);box-shadow:0 2px 0 rgba(0,0,0,.22)}
.btn-s{background:var(--card);color:var(--ink);border:1.5px solid var(--line-strong)}
.btn-t{color:var(--ink);padding:0 8px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--line-strong)}
.btn-full{width:100%;min-height:48px}
.btn-sm{min-height:36px;padding:0 12px;font-size:14px;position:relative}
.btn-sm::after{content:"";position:absolute;inset:-4px 0}
@media (hover:hover){
  .btn-p:hover{filter:brightness(1.07)}
  .btn-s:hover,.btn-t:hover{background-image:linear-gradient(var(--hover),var(--hover))}
  .btn-t:hover{text-decoration-color:var(--ink)}
}
.btn:active,.chip:active,.tv-save:active,.tv-play:active,.nav-inf a:active{transform:scale(.97)}
[aria-disabled="true"]{color:var(--muted)!important;cursor:not-allowed;pointer-events:none;filter:none!important}
.btn-p[aria-disabled="true"]{background:var(--paper-2);box-shadow:none}
/* Botones con sombra propia: la sombra pisaba la capa amarilla del anillo de foco. Se suman las dos */
.btn-p:focus-visible{box-shadow:0 0 0 5px var(--mark),0 2px 0 rgba(0,0,0,.22)}
.btn-p[aria-disabled="true"]:focus-visible{box-shadow:0 0 0 5px var(--mark)}
.btn[aria-disabled="true"].toca{pointer-events:auto}
.ico-btn{width:44px;height:44px;display:inline-grid;place-items:center;border-radius:3px;flex:none;transition:background-color .2s}
@media (hover:hover){ .ico-btn:hover{background:var(--hover)} }
.lnk{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:600 15px/1.3 var(--body);color:var(--ink);text-decoration:none}
.lnk b{font-weight:700;text-decoration:underline;text-decoration-color:var(--stamp);text-decoration-thickness:2px;text-underline-offset:4px}
.lnk .ic{width:18px;height:18px;color:var(--stamp)}
.lnk-txt{display:flex;color:var(--muted)}
.lnk-txt b{color:var(--ink);text-decoration:none}
@media (hover:hover){ .lnk:hover b{text-decoration-color:var(--ink)} }

/* ============ BARRA SUPERIOR ============ */
.top{position:relative;z-index:30;background:var(--paper)}
.top-in{height:52px;display:flex;align-items:center;gap:12px;max-width:calc(1240px + 64px);margin:0 auto;padding:0 var(--gut)}
.logo{font:900 20px/1 var(--disp);text-transform:uppercase;letter-spacing:.02em;text-decoration:none;color:var(--ink);min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;margin-right:auto}
.logo b{color:var(--stamp);font-weight:900;margin-left:.22em}
.top-nav,.top-busca{display:none}
.top-der{display:flex;align-items:center;gap:4px}
.pill{position:relative;display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;background:var(--mark);color:var(--on-mark);font:600 12px/1 var(--mono);text-decoration:none;white-space:nowrap;margin:6px 4px}
.pill::after{content:"";position:absolute;inset:-6px -4px}
.tema-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:3px;color:var(--ink)}
@media (hover:hover){ .tema-btn:hover{background:var(--hover)} }
@media (min-width:1024px){
  .top{position:sticky;top:0;border-bottom:1px solid var(--line)}
  .top-in{height:64px;gap:24px}
  .logo{margin-right:0}
  .top-nav{display:flex;gap:4px}
  .top-nav a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;font:600 15px/1 var(--body);text-decoration:none;color:var(--muted);border-radius:3px;position:relative}
  .top-nav a:hover{color:var(--ink);background:var(--hover)}
  .top-nav a[aria-current="page"]{color:var(--ink)}
  .top-nav a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-10px;height:3px;background:var(--stamp)}
  .top-n{font:600 12px/1 var(--mono);color:var(--muted)}
  .top-busca{display:flex;align-items:center;position:relative;width:440px;max-width:100%;margin:0 auto;height:44px;background:var(--card);border:1.5px solid var(--line-strong);border-radius:3px;padding:0 10px 0 12px;gap:8px}
  .top-busca:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px var(--mark)}
  .top-busca .ic{width:20px;height:20px;color:var(--muted)}
  .top-busca input{flex:1;min-width:0;border:0;background:transparent;height:40px;font:400 15px var(--body);outline:none}
  .top-busca input::-webkit-search-cancel-button{-webkit-appearance:none}
  .top-busca kbd{font:600 12px/1 var(--mono);color:var(--muted);border:1px solid var(--line-strong);border-radius:3px;padding:3px 6px}
  .top-der{margin-left:0}
}

/* ============ NAV INFERIOR ============ */
.nav-inf{position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(var(--nav-h) + var(--safe-b));padding-bottom:var(--safe-b);background:var(--card);border-top:1px solid var(--line-strong);display:grid;grid-template-columns:repeat(4,1fr)}
.nav-inf a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:600 11px/1 var(--body);letter-spacing:.01em;color:var(--muted);text-decoration:none;transition:color .2s,transform .12s}
.nav-inf a .ic{width:22px;height:22px}
.nav-inf a[aria-current="page"]{color:var(--ink)}
.nav-inf a[aria-current="page"]::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:3px;background:var(--stamp)}
.badge{position:absolute;top:5px;left:calc(50% + 5px);min-width:18px;height:18px;border-radius:999px;background:var(--stamp);color:var(--on-stamp);font:600 11px/18px var(--mono);text-align:center;padding:0 5px}
@media (min-width:1024px){ .nav-inf{display:none} }
body.en-ficha .nav-inf{display:none}
@media (max-width:1023px){ body.en-ficha .top{display:none} }
body.en-ficha{padding-bottom:calc(60px + var(--safe-b))}
@media (min-width:1024px){ body.en-ficha{padding-bottom:0} }

/* ============ PIE ============ */
.pie{background:var(--steel);color:var(--on-steel);margin-top:64px;padding:32px 0 28px}
/* Mientras carga, el pie no se pinta bajo el esqueleto (luego lo empujaba el contenido: CLS) */
body:not(.listo) .pie{display:none}
body:not(.listo) main{min-height:100vh;min-height:100svh}
.pie-in{display:grid;gap:10px;font:400 13px/1.55 var(--mono)}
.pie-logo{font:900 20px/1 var(--disp);text-transform:uppercase;letter-spacing:.02em;margin-bottom:6px}
.pie-logo b{color:#F0645A;margin-left:.22em}
.pie-act{opacity:.85}
.pie-links{display:flex;flex-wrap:wrap;gap:0 16px;margin:0 -8px}
.pie-lnk{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--on-steel);text-decoration:underline;text-underline-offset:4px;font:600 13px var(--mono)}
.pie-legal{opacity:.8;max-width:70ch}
.pie-compra a{color:var(--on-steel);font-weight:600;display:inline-flex;min-height:44px;align-items:center}
.pie :focus-visible{outline-color:var(--on-steel)}
.solo-desk{display:none}
@media (min-width:1024px){ .solo-desk{display:inline-flex} }
body.en-ficha .pie{display:none}
@media (min-width:1024px){ body.en-ficha .pie{display:block} }

/* ============ ESQUELETO ============ */
.esq{background:var(--paper-2);border-radius:4px;position:relative;overflow:hidden}
.esq-l{height:12px;margin:8px 0}
.esq-h1{height:40px;margin-top:10px;width:88%}
.esq-ps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:24px;max-width:420px}
.esq-p{aspect-ratio:9/16}
.esq-in{height:48px;margin-top:20px;max-width:560px}
.esq-t{height:14px;margin:12px 0}
@media (prefers-reduced-motion:no-preference){
  .esq::after{content:"";position:absolute;inset:0;background:var(--hover);animation:esq 1.2s ease-in-out infinite alternate}
  @keyframes esq{from{opacity:0}to{opacity:1}}
}

/* ============ INICIO ============ */
.ini-cab{padding-top:20px}
.ini-h1{font-size:40px;margin-top:10px}
.ini-h1 .mark{white-space:nowrap}
@media (max-width:359px){ .ini-h1{font-size:38px} }
.ini-der{margin-top:24px}
.ini-prom,.ini-atajos{display:none}
@media (max-width:1023px){ .ini-der-d{display:none} }
@media (min-width:1024px){
  /* Las dos columnas cierran a la misma altura: la izquierda empuja el buscador al fondo y Mi semana se estira */
  .ini-cab{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:stretch;padding-top:48px}
  .ini-izq{display:flex;flex-direction:column;min-width:0}
  .ini-h1{font-size:72px;margin-top:14px}
  .ini-der{margin-top:0}
  .ini-der-d{display:flex;flex-direction:column}
  .ini-der-d .semana{flex:1;display:flex;flex-direction:column}
  .ini-der-d .semana-acts{margin-top:auto;padding-top:14px}
  .ini-prom{display:block;margin-top:16px;max-width:40em;font-size:18px;line-height:1.5;color:var(--muted)}
  .ini-prom b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
  .ini-bus{margin-top:auto;padding-top:4px}
  .ini-atajos{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
  .ini-atajos .eyebrow{margin-right:4px}
  .ini-atajos .chip-g{min-height:40px;padding:0 14px;font-size:14px}
}
.busca-falsa{display:flex;align-items:center;gap:10px;height:48px;margin-top:20px;padding:0 14px;background:var(--card);border:1.5px solid var(--line-strong);border-radius:3px;color:var(--muted);text-decoration:none;font:400 16px/1 var(--body);max-width:560px;width:100%}
.busca-falsa .ic{width:20px;height:20px}
.busca-falsa span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover){ .busca-falsa:hover{border-color:var(--ink)} }
.nuevos-l{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:14px;font:400 13px/1.45 var(--mono);color:var(--muted)}
.nuevos-l a{color:var(--ink);font-weight:600;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.nuevos-l .tag-new{font:600 11px/1 var(--mono)}
.ini-sec{margin-top:48px}
.fila-vir{margin-top:40px}

/* Fila horizontal de tarjetas de video (inicio: "Los más virales"). No hereda nada de .carr */
.fila-h{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(128px,40vw,200px);gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);margin:0 calc(-1 * var(--gut));padding:10px var(--gut) 14px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.fila-h > *{scroll-snap-align:start}
/* Son 10: se pintan todas. Con content-visibility las de la derecha reservaban 420 px y dejaban un hueco bajo la fila */
.fila-h .tv{content-visibility:visible;contain-intrinsic-size:none}
/* El anillo de foco sale 9 px de la tarjeta: 10 px de margen para que nunca se corte */
@media (min-width:1024px){ .fila-h{grid-auto-columns:208px;gap:16px;margin:0 -10px;padding:10px 10px 14px;scroll-padding-inline:10px} }
.fila-bts{gap:8px;align-self:center}
.fila-bt{width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--line-strong);border-radius:50%;background:var(--card);color:var(--ink);transition:background-color .2s,border-color .2s}
.fila-bt .ic{width:20px;height:20px}
.fila-bt[aria-disabled="true"]{opacity:.45}
@media (hover:hover){ .fila-bt:not([aria-disabled="true"]):hover{border-color:var(--ink);background-image:linear-gradient(var(--hover),var(--hover))} }
.fila-vir .sec-cab{align-items:center}
.sec-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.sec-cab .h2{flex:1}
.sec-cab .lnk{font-size:14px;white-space:nowrap}
.sec-cab-sub{color:var(--muted);font-size:15px;margin:-8px 0 16px;max-width:60ch}

.intro{background:var(--card);border:1px solid var(--line);border-radius:4px;box-shadow:var(--sh-2);padding:16px 16px 12px;margin-top:16px;position:relative}
.intro ol{list-style:none;counter-reset:p;display:grid;gap:6px;margin:10px 0 12px;font-size:15px;line-height:1.4}
@media (min-width:1024px){ .intro{padding:20px 24px;margin-top:24px} .intro ol{grid-template-columns:repeat(3,1fr);gap:20px;font-size:16px} }
.intro li{counter-increment:p;display:grid;grid-template-columns:26px 1fr;gap:6px;align-items:baseline}
.intro li::before{content:counter(p,decimal-leading-zero);font:600 12px var(--mono);color:var(--stamp)}
.intro .h2{margin-top:6px}

/* Mi semana */
.semana{border-top:2px solid var(--ink);padding-top:12px}
.semana-t{font:700 16px/1.35 var(--body);margin:6px 0 12px}
.semana-t b{font-weight:700;color:var(--stamp)}
.semana-ps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sp{display:block;text-decoration:none;color:inherit;min-width:0}
.sp-img{position:relative;display:block;aspect-ratio:9/16;border-radius:4px;overflow:hidden;background:var(--paper-2)}
.sp-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.sp-f{display:block;font:600 11px/1.25 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--stamp);margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover){ .sp:hover img{transform:scale(1.02)} }
.semana-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 4px;margin-top:14px}
.semana-acts .btn-t .ic{width:20px;height:20px}
.semana-nota{color:var(--muted);font-size:15px;margin:0 0 14px;max-width:52ch}
@media (min-width:1024px){
  .ini-der .semana{background:var(--card);border:1px solid var(--line);border-top:0;border-radius:4px;box-shadow:var(--sh-2);padding:20px 20px 18px;position:relative}
  .ini-der .semana::before{content:"";position:absolute;left:-1px;right:-1px;top:0;height:3px;background:var(--stamp);border-radius:4px 4px 0 0}
  .ini-der .semana-ps{grid-template-columns:repeat(3,minmax(0,120px));justify-content:space-between}
}

/* Sigue donde te quedaste */
.sigue{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:10px 12px 10px 10px;text-decoration:none;color:inherit;box-shadow:var(--sh-1);max-width:560px}
.sigue img{width:56px;height:100px;object-fit:cover;border-radius:3px;background:var(--paper-2);display:block}
.sigue-t{font:600 15px/1.3 var(--body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sigue-p{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:600 12px/1 var(--mono);color:var(--stamp)}
.sigue-p .ic{width:16px;height:16px}
.sigue > .ic{color:var(--muted)}
.sigue:focus-visible,.fh:focus-visible{box-shadow:0 0 0 5px var(--mark)}

/* Chips grandes (nicho, idioma) */
.chips-g{display:flex;flex-wrap:wrap;gap:8px}
.chip-g{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:999px;text-decoration:none;color:var(--ink);font:600 15px/1 var(--body);transition:background-color .2s}
.chip-g span{font:400 12px/1 var(--mono);color:var(--muted)}
@media (hover:hover){ .chip-g:hover{background:var(--hover)} }

.azar{margin-top:48px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:20px;background:var(--card);border:1px dashed var(--line-strong);border-radius:4px}
.azar p{flex:1 1 220px;color:var(--muted);font-size:15px}
.azar p b{display:block;color:var(--ink);font:800 22px/1 var(--disp);text-transform:uppercase;margin-bottom:6px}

/* ============ REJILLAS DE COLECCIONES / FORMATOS ============ */
.g2,.g4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
@media (min-width:768px){ .g2,.g4{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1024px){ .g2,.g4{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px} }
.carr{display:grid;grid-auto-flow:column;grid-auto-columns:248px;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gut));padding:8px var(--gut) 14px;scroll-padding:0 var(--gut);scrollbar-width:thin}
.carr > *{scroll-snap-align:start}
@media (min-width:1024px){ .carr{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;margin:0;padding:0;gap:24px 16px} }
@media (min-width:1024px){ .solo-mov{display:none!important} }
.tf.f-extra{display:none}
@media (min-width:1024px){ .tf.f-extra{display:flex} }

/* Mosaico de portadas (tarjetas de colección y de formato; se copia tal cual a la vista previa de la landing).
   Markup:
   <span class="mos mos-3" aria-hidden="true">
     <img src="thumbs/CODE1.jpg" width="360" height="640" loading="lazy" decoding="async" alt="">
     <img src="thumbs/CODE2.jpg" …><img src="thumbs/CODE3.jpg" …>
     <span class="sello-s mos-x">×748</span>
   </span>
   mos-N = número real de portadas (1 a 4): siempre llenan el ancho, sin placas de relleno.
   El gap sobre --card es el separador de 2 px del color de la tarjeta. Sólo usa tokens: --card, --paper-2, --stamp-img, --sten. */
.mos{position:relative;display:grid;grid-template-rows:minmax(0,1fr);gap:2px;background:var(--card);aspect-ratio:2/1;overflow:hidden;flex:none}
.mos-1{grid-template-columns:minmax(0,1fr)}
.mos-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mos-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mos-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mos img{width:100%;height:100%;min-width:0;min-height:0;max-width:none;object-fit:cover;object-position:50% 30%;display:block;background:var(--paper-2)}
.mos .mos-x{position:absolute;left:8px;bottom:8px;z-index:1;font:700 16px/1 var(--sten);letter-spacing:.02em;color:#fff;background:var(--stamp-img);padding:5px 6px 3px;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.25);pointer-events:none}
/* Al pasar el mouse la portada se acerca dentro de su celda: el recorte compensa la escala y el separador no se come */
@media (hover:hover){
  .mos img{transition:transform .25s cubic-bezier(.2,.8,.2,1),clip-path .25s cubic-bezier(.2,.8,.2,1);clip-path:inset(0)}
  a:hover > * > .mos img,a:hover > .mos img{transform:scale(1.02);clip-path:inset(.98%)}
}

/* TarjetaColeccion */
/* position:relative: el texto oculto (.vh) es absoluto y sin esto se sale del carrusel y ensancha la página */
.tc{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);min-width:0;transition:transform .2s}
.tc-tab{align-self:flex-start;min-width:96px;height:22px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;border-radius:4px 4px 0 0;white-space:nowrap}
.tc-especial .tc-tab{background:var(--stamp);color:var(--on-stamp)}
.tc-formato .tc-tab{background:var(--steel);color:var(--on-steel)}
.tc-hook .tc-tab{background:var(--mark);color:var(--on-mark)}
.tc-estructura .tc-tab,.tc-nicho .tc-tab,.tc-idioma .tc-tab{border:1.5px solid var(--ink);border-bottom:0;color:var(--ink);height:22px}
.tc-body{flex:1;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:0 4px 4px 4px;overflow:hidden;box-shadow:var(--sh-1)}
.tc-txt{flex:1;display:flex;flex-direction:column;gap:6px;padding:12px}
.tc-t{font:800 22px/1 var(--disp);padding-top:.14em;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.tc-s{font-size:13px;line-height:1.35;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tc-n{font:400 12px/1 var(--mono);color:var(--muted);margin-top:auto;padding-top:2px}
@media (hover:hover){ .tc:hover .tc-t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px} }

/* TarjetaFormato */
.tf{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);min-width:0}
.tf-tab{align-self:flex-start;height:22px;padding:0 10px;display:inline-flex;align-items:center;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--steel);color:var(--on-steel);border-radius:4px 4px 0 0;white-space:nowrap}
.tf-body{flex:1;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:0 4px 4px 4px;overflow:hidden;box-shadow:var(--sh-1)}
.tf-txt{flex:1;display:flex;flex-direction:column;gap:6px;min-height:86px;padding:12px}
.tf-n{font:800 20px/1 var(--disp);padding-top:.1em;text-transform:uppercase;text-wrap:balance}
.tf-en{font:600 11px/1.2 var(--mono);letter-spacing:.06em;color:var(--muted);margin-top:-3px}
/* La explicación en español se lee completa: en computadora cabe en 2 renglones; en 2 columnas de celular no
   (60-100 caracteres en ~150 px), y cortarla con «…» era justo lo que se perdía */
.tf-l{font-size:13px;line-height:1.35;color:var(--muted);white-space:normal}
.tf.cero .tf-tab{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong);border-bottom:0}
.tf.cero .tf-body{border:1.5px dashed var(--line-strong);box-shadow:none}
/* Sin videos: ocupa el mismo alto que un mosaico (2:1) para que la fila no se descuadre; no es una placa gris */
.tf-hueco{display:grid;place-items:center;aspect-ratio:2/1;flex:none;border-bottom:1.5px dashed var(--line)}
.tf-hueco span{width:64px;height:40px;display:grid;place-items:center;border:2px dashed var(--line-strong);border-radius:3px;transform:rotate(-8deg);font:700 18px/1 var(--sten);color:var(--line-strong)}
@media (hover:hover){ .tf:hover .tf-n{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px} }

/* Formatos: la misma rejilla de tarjetas en celular y en computadora */
.fr-grid{margin-top:24px}
@media (min-width:1024px){ .fr-grid{margin-top:32px} }

/* ============ CABECERA DE LISTAS ============ */
.cab{padding-top:24px}
@media (min-width:1024px){ .cab{padding-top:40px} }
.cab .sub{font-size:17px}
.cab-n{font:400 12px/1 var(--mono);color:var(--muted);margin-top:12px;font-variant-numeric:tabular-nums}
.cab-n b{color:var(--stamp);font-weight:600}
.esqueleto{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin-top:16px;font:400 12px/1.5 var(--mono);color:var(--ink);max-width:880px}
.esqueleto li{display:inline-flex;align-items:center;gap:8px}
.esqueleto li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--stamp);flex:none}
.esqueleto li + li::before{margin-left:4px}
.esqueleto li:not(:last-child)::after{content:"";width:18px;height:1px;background:var(--line-strong);margin:0 4px 0 6px}

/* Guía del formato */
.guia{margin-top:24px;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:20px;box-shadow:var(--sh-1);max-width:880px}
.guia-c{display:grid;gap:20px}
.g-b h3{font:600 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--stamp);margin-bottom:6px}
.g-b ol{list-style:none;counter-reset:g;display:grid;gap:8px}
.g-b ol li{counter-increment:g;display:grid;grid-template-columns:28px 1fr;gap:6px}
.g-b ol li::before{content:counter(g,decimal-leading-zero);font:600 12px/1.9 var(--mono);color:var(--stamp)}
.g-b ul{list-style:none;display:grid;gap:8px}
.g-b ul li{padding-left:18px;position:relative}
.g-b ul li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:2px;background:var(--stamp)}
.g-2{display:grid;gap:20px}
@media (min-width:1024px){ .g-2{grid-template-columns:1fr 1fr;gap:32px} }
.guia:not(.abierta) .g-b:not(:first-child),.guia:not(.abierta) .g-2{display:none}
.guia:not(.abierta) .g-b:first-child p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.guia .btn-t{margin:10px 0 -8px -8px}
.alcance-p{border-left:3px solid var(--mark);padding-left:12px}

/* ============ LISTAS CON FILTROS ============ */
.lst{margin-top:24px}
@media (min-width:1024px){ .lst{display:grid;grid-template-columns:264px minmax(0,1fr);gap:32px;align-items:start;margin-top:32px} }
.side{display:none}
@media (min-width:1024px){
  .side{display:block;position:sticky;top:88px;max-height:calc(100vh - 104px);overflow:auto;overscroll-behavior:contain;padding:4px 8px 24px 4px;margin-left:-4px;scrollbar-width:thin}
  .side-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
  .side-cab h2{font:800 22px/1 var(--disp);text-transform:uppercase}
}
.lst-main{min-width:0}

.fbar{position:sticky;top:0;z-index:12;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;background:var(--paper);height:52px;align-items:center;margin:0 calc(-1 * var(--gut));padding:0 var(--gut);border-bottom:1px solid var(--line)}
.fbar::-webkit-scrollbar{display:none}
.bus .fbar{top:64px}
@media (min-width:1024px){ .fbar{display:none} }
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 14px;border:1.5px solid var(--line-strong);border-radius:999px;background:var(--card);font:600 14px/1 var(--body);color:var(--ink);white-space:nowrap;position:relative;transition:background-color .2s,color .2s,border-color .2s}
.chip::after{content:"";position:absolute;inset:-4px -2px}
.chip .ic{width:16px;height:16px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip-f{padding-left:10px}
.chip-x{border-style:dashed}
@media (hover:hover){ .chip:not([aria-pressed="true"]):hover{background-image:linear-gradient(var(--hover),var(--hover))} }

.res-l{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:14px 0 16px}
.res-n{font:400 13px/1.4 var(--mono);color:var(--muted);flex:1 1 100%;font-variant-numeric:tabular-nums}
.res-n b{color:var(--ink);font-weight:600}
@media (min-width:600px){ .res-n{flex:1 1 auto} }
.res-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1 1 100%;min-width:0}
@media (min-width:600px){ .res-ctl{flex:0 1 auto} }
.sel{position:relative;display:inline-flex;align-items:center;flex:1 1 118px;min-width:0}
@media (min-width:600px){ .sel{flex:0 1 auto} }
.sel select{width:100%;min-width:0;text-overflow:ellipsis;appearance:none;-webkit-appearance:none;height:44px;padding:0 34px 0 12px;border:1.5px solid var(--line-strong);border-radius:3px;background:var(--card);font:600 14px/1 var(--body);color:var(--ink);cursor:pointer}
.sel .ic{position:absolute;right:8px;width:18px;height:18px;pointer-events:none;color:var(--muted)}
/* iOS hace zoom al enfocar un campo con letra de menos de 16 px */
@media (max-width:1023px){ .sel select{font-size:16px} }
.seg{flex:none;display:inline-flex;border:1.5px solid var(--line-strong);border-radius:3px;overflow:hidden;background:var(--card)}
.seg button{min-height:44px;padding:0 10px;font:600 14px/1.1 var(--body);color:var(--muted);transition:background-color .2s,color .2s}
.seg button + button{border-left:1.5px solid var(--line-strong)}
.res-ctl .seg{flex:1 0 auto}
.res-ctl .seg button{flex:1 1 auto;text-align:center}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
@media (hover:hover){ .seg button:not([aria-pressed="true"]):hover{background:var(--hover);color:var(--ink)} }
/* .seg recorta lo que sale de su borde: el anillo de foco va por dentro */
.seg button:focus-visible{outline-offset:-4px;box-shadow:inset 0 0 0 7px var(--mark)}

.mas{display:flex;justify-content:center;margin-top:32px}

/* Buscar */
.bus-cab{position:sticky;top:0;z-index:13;height:64px;display:flex;align-items:center;background:var(--paper);margin:0 calc(-1 * var(--gut));padding:0 var(--gut)}
.bus-f{flex:1;display:flex;align-items:center;gap:8px;height:48px;background:var(--card);border:1.5px solid var(--line-strong);border-radius:3px;padding:0 2px 0 12px}
.bus-f:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px var(--mark)}
.bus-f > .ic{color:var(--muted);width:20px;height:20px}
.bus-f input{flex:1;min-width:0;border:0;background:transparent;height:44px;font:400 16px var(--body);outline:none;-webkit-appearance:none;appearance:none;border-radius:0}
.bus-f input::-webkit-search-cancel-button{-webkit-appearance:none}
.bus-x{color:var(--muted)}
.bus .lst{margin-top:0}
@media (max-width:1023px){ .cab-bus{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0} }
@media (min-width:1024px){ .bus-cab{display:none} .bus .lst{margin-top:32px} }

/* Campos de filtros (hoja y barra lateral) */
.ff{border:0;margin:0;padding:16px 0 18px;border-bottom:1px dashed var(--line);min-width:0}
.ff:last-child{border-bottom:0}
.ff legend{font:600 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--stamp);padding:0;margin-bottom:8px;float:left;width:100%}
.ff legend + *{clear:both}
.opt{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 4px;cursor:pointer;border-radius:3px;font-size:15px;line-height:1.3}
.opt input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;flex:none;border:1.5px solid var(--line-strong);background:var(--card);border-radius:3px;display:grid;place-items:center;cursor:pointer}
.opt input[type="radio"]{border-radius:50%}
.opt input:checked{background:var(--ink);border-color:var(--ink)}
.opt input[type="checkbox"]:checked::after{content:"";width:11px;height:6px;border-left:2px solid var(--paper);border-bottom:2px solid var(--paper);transform:translateY(-1px) rotate(-45deg)}
.opt input[type="radio"]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--paper)}
.opt input:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px var(--mark)}
.opt .o-t{flex:1;min-width:0}
.opt .o-n{font:400 12px/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.opt.off{color:var(--muted);cursor:default}
.opt.off input{opacity:.5;cursor:default}
@media (hover:hover){ .opt:not(.off):hover{background:var(--hover)} }

/* Hojas (dialog) */
dialog.hoja{position:fixed;inset:0;margin:auto 0 0;width:100%;max-width:100%;max-height:88vh;max-height:88svh;padding:0;border:0;border-radius:12px 12px 0 0;background:var(--card);color:var(--ink);box-shadow:var(--sh-sheet);overflow:hidden}
dialog.hoja[open]{display:flex;flex-direction:column}
dialog.hoja::backdrop{background:rgba(11,14,18,.55)}
@media (min-width:768px){ dialog.hoja{margin:auto;max-width:560px;border-radius:12px;max-height:84vh} }
.hoja-cab{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 20px;border-bottom:1px solid var(--line);flex:none}
.hoja-cab h2{flex:1;font:800 24px/1 var(--disp);text-transform:uppercase}
.hoja-cuerpo{position:relative;overflow:auto;overscroll-behavior:contain;padding:0 20px 8px;flex:1 1 auto;-webkit-overflow-scrolling:touch}
.hoja-pie{flex:none;padding:12px 20px calc(12px + var(--safe-b));border-top:1px solid var(--line);background:var(--card)}
.hoja-txt{padding:16px 20px 20px;display:grid;gap:12px}
.hoja-txt textarea{width:100%;min-height:220px;font:14px/1.6 var(--mono);background:var(--paper-2);border:1.5px solid var(--line-strong);border-radius:3px;padding:12px;resize:vertical}
@media (max-width:1023px){ .hoja-txt textarea{font-size:16px} }
.atajos{list-style:none;display:grid;gap:10px}
.atajos li{display:flex;align-items:center;gap:12px}
.atajos kbd{min-width:30px;text-align:center;font:600 13px/1 var(--mono);border:1.5px solid var(--line-strong);border-bottom-width:3px;border-radius:4px;padding:6px 8px;background:var(--paper-2)}
.sw{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font-weight:600}
.sw input{appearance:none;-webkit-appearance:none;width:44px;height:26px;border-radius:999px;background:var(--line-strong);position:relative;margin:0;cursor:pointer;transition:background-color .2s;flex:none}
.sw input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
.sw input:checked{background:var(--ok)}
.sw input:checked::after{transform:translateX(18px)}
@media (prefers-reduced-motion:no-preference){
  dialog.hoja[open]{animation:sube .24s var(--ease)}
  dialog.hoja[open]::backdrop{animation:aparece .24s var(--ease)}
  @media (min-width:768px){ dialog.hoja[open]{animation:aparece .24s var(--ease)} }
}
@keyframes sube{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes aparece{from{opacity:0}to{opacity:1}}

/* ============ TARJETA DE VIDEO ============ */
.grid-v{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;list-style:none}
@media (min-width:600px){ .grid-v{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))} }
@media (min-width:1024px){ .grid-v{grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:24px 16px} }
/* Tamaños de reserva medidos (tarjeta real: ~416 px de alto en celular, ~481 en computadora): así no brinca al bajar ni al volver */
.tv{position:relative;min-width:0;content-visibility:auto;contain-intrinsic-size:auto 173px auto 420px;border-radius:4px}
@media (min-width:1024px){ .tv{contain-intrinsic-size:auto 224px auto 490px} }
.tv-a{display:block;text-decoration:none;color:inherit;border-radius:4px}
.tv-p{position:relative;display:block;aspect-ratio:9/16;border-radius:4px;overflow:hidden;background:var(--paper-2)}
.tv-p img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.tv-alt{display:none;position:absolute;inset:0;padding:14px 12px 48px;font:800 20px/1 var(--disp);text-transform:uppercase;color:var(--ink);align-items:center}
.tv-p.err img{display:none}
.tv-p.err .tv-alt{display:flex}
.tv-tags{position:absolute;top:8px;left:8px;display:flex;gap:4px;pointer-events:none}
.tag{display:inline-block;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 5px 3px;border-radius:2px}
.tag-new{background:var(--mark);color:var(--on-mark)}
.tag-lang{background:var(--scrim);color:#fff}
.sello-s{position:absolute;left:8px;bottom:8px;font:700 16px/1 var(--sten);letter-spacing:.02em;color:#fff;background:var(--stamp-img);padding:5px 6px 3px;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.25);pointer-events:none}
.tv-b{display:grid;gap:3px;padding-top:9px}
.tv-f{font:600 11px/1.25 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--stamp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-t{font:600 14px/1.3 var(--body);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-decoration-thickness:1px;text-underline-offset:2px}
.tv-n{font:400 12px/1.35 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.tv-n .visto{color:var(--ok);font-weight:600}
@media (hover:hover){ .tv-a:hover .tv-p img{transform:scale(1.02)} .tv-a:hover .tv-t{text-decoration:underline} }
.tv-ov{position:absolute;left:0;right:0;top:0;aspect-ratio:9/16;pointer-events:none}
.tv-ov > *{pointer-events:auto}
.tv-save{position:absolute;top:0;right:0;width:44px;height:44px;display:grid;place-items:center;transition:transform .12s}
.tv-save .c{width:32px;height:32px;border-radius:50%;background:var(--scrim);color:#fff;display:grid;place-items:center;transition:background-color .2s}
.tv-save .ic{width:18px;height:18px}
.tv-save[aria-pressed="true"] .c{background:var(--stamp-img)}
.tv-play{position:absolute;right:0;bottom:0;min-width:44px;height:44px;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 6px 6px 0;transition:transform .12s}
.tv-play span{display:inline-flex;align-items:center;gap:3px;background:var(--scrim);color:#fff;font:600 12px/1 var(--mono);padding:5px 7px 5px 5px;border-radius:3px;font-variant-numeric:tabular-nums}
.tv-play .ic{width:14px;height:14px}
@media (hover:hover){ .tv-play:hover span,.tv-save:hover .c{background:rgba(11,14,18,.85)} .tv-save[aria-pressed="true"]:hover .c{background:var(--stamp-img)} }
.tv-vid{position:absolute;inset:0;background:var(--video-bg);border-radius:4px;overflow:hidden;z-index:2}
.tv-vid video{width:100%;height:100%;object-fit:contain;display:block}
.tv-cerrar{position:absolute;top:0;right:0;width:44px;height:44px;display:grid;place-items:center;color:#fff}
.tv-cerrar span{width:32px;height:32px;border-radius:50%;background:var(--scrim);display:grid;place-items:center}
.tv-cerrar .ic{width:18px;height:18px}
.origen{outline:3px solid var(--mark);outline-offset:4px}
/* content-visibility recorta lo que pintan los hijos: el anillo de foco va en la tarjeta */
.tv-a:focus-visible{outline:none;box-shadow:none}
.tv:has(> .tv-a:focus-visible){outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px var(--mark)}
.tv-save:focus-visible,.tv-play:focus-visible,.tv-cerrar:focus-visible{outline-offset:-4px;box-shadow:inset 0 0 0 7px var(--mark)}

/* Fila "Cómo abren" */
.grid-h{display:grid;gap:8px;list-style:none}
@media (min-width:1024px){ .grid-h{grid-template-columns:1fr 1fr;gap:12px 16px} }
.fh{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start;min-height:112px;padding:6px 12px 6px 6px;background:var(--card);border:1px solid var(--line);border-radius:4px;text-decoration:none;color:inherit;box-shadow:var(--sh-1);content-visibility:auto;contain-intrinsic-size:auto 124px}
.fh img{width:56px;height:100px;object-fit:cover;border-radius:3px;background:var(--paper-2);display:block}
.fh-b{display:grid;gap:5px;min-width:0;padding-top:4px}
.fh-top{display:flex;align-items:center;gap:8px;min-width:0}
.fh-f{font:600 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--stamp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sello-i{font:700 14px/1 var(--sten);color:var(--stamp);border:1.5px solid var(--stamp);border-radius:3px;padding:3px 4px 1px;flex:none;letter-spacing:.02em}
.fh-h{font:600 15px/1.4 var(--body);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fh-c{font:400 12px/1.2 var(--mono);color:var(--muted);overflow-wrap:anywhere}
@media (hover:hover){ .fh:hover .fh-h{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px} }

/* Estado vacío y errores */
.vacio{display:grid;justify-items:start;gap:12px;padding:32px 0;max-width:560px}
.vacio-sello{width:104px;height:64px;border:3px dashed var(--line-strong);border-radius:3px;transform:rotate(-8deg);margin:0 0 8px 6px;display:grid;place-items:center;font:700 24px/1 var(--sten);color:var(--line-strong)}
.vacio h2{font:800 24px/1.02 var(--disp);text-transform:uppercase}
.vacio p{color:var(--muted)}
.vacio h2,.vacio p{overflow-wrap:anywhere;max-width:100%}
.vacio .acts{display:flex;flex-wrap:wrap;gap:8px}
.sugeridos{margin-top:8px;width:100%}
.sugeridos .g4{margin-top:12px}
.centrado{min-height:50vh;display:grid;place-content:center;justify-items:center;text-align:center;padding:48px var(--gut)}
.centrado .vacio{justify-items:center}

/* ============ FICHA ============ */
.banda{position:relative;height:min(64vh,560px);height:min(64svh,560px);background:var(--video-bg);display:flex;justify-content:center;overflow:visible}
@media (min-width:768px) and (max-width:1023px){ .banda{height:min(70vh,640px);height:min(70svh,640px)} }
.vw{position:relative;height:100%;aspect-ratio:9/16;max-width:100%;background:var(--video-bg)}
.vw video,.vw > img{width:100%;height:100%;object-fit:contain;display:block;background:var(--video-bg)}
/* Hasta que se pinta el póster nítido se ve la miniatura (ya en caché) que va de fondo en .vw, no negro */
.vw:not(.on) > video{background:transparent}
/* Video que aún no está aquí: su portada centrada sobre la banda oscura, nunca a más de 2 veces su tamaño real
   (app.js ajusta el ancho según la densidad de la pantalla; esto es el tope sin JS) */
.vw.vw-falta{display:grid;place-items:center;background:var(--video-bg);overflow:hidden;isolation:isolate}
/* Detrás, la misma portada desenfocada y oscurecida llena la banda (el desenfoque no deja ver los pixeles) */
.vw.vw-falta::before{content:"";position:absolute;inset:-24px;z-index:-1;background:var(--falta-img) center/cover no-repeat;filter:blur(22px) brightness(.42) saturate(1.2)}
.vw.vw-falta > img{position:relative;width:auto;height:auto;max-width:min(100%,360px);max-height:100%;object-fit:contain;border-radius:4px;box-shadow:0 14px 44px -10px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1)}
/* Círculo con borde fino: se lee como botón igual sobre la portada que sobre el negro de la banda */
.volver{position:absolute;top:12px;left:12px;z-index:4;width:44px;height:44px;border-radius:50%;background:rgba(11,14,18,.72);box-shadow:0 0 0 1px rgba(255,255,255,.22);color:#fff;display:grid;place-items:center}
.volver:focus-visible{outline-color:#fff;box-shadow:0 0 0 5px var(--mark)}
.v-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:2}
.v-play{display:inline-flex;align-items:center;gap:10px;height:72px;min-width:72px;padding:0 24px 0 20px;border-radius:999px;background:var(--stamp-img);color:#fff;font:600 16px/1 var(--mono);font-variant-numeric:tabular-nums;box-shadow:0 10px 30px -10px rgba(0,0,0,.7);transition:transform .12s,filter .2s}
.v-play .ic{width:26px;height:26px}
.v-play:active{transform:scale(.97)}
@media (hover:hover){ .v-play:hover{filter:brightness(1.07)} }
.v-play:focus-visible,.v-inicio:focus-visible,.mini-b:focus-visible{outline-color:#fff}
.v-play:focus-visible{box-shadow:0 0 0 5px var(--mark),0 10px 30px -10px rgba(0,0,0,.7)}
.v-inicio{min-height:44px;padding:0 14px;border-radius:3px;background:var(--scrim);color:#fff;font:600 14px/1 var(--body)}
.vw.on .v-ov{display:none}
.mini-ctl{display:none}
.vw.mini{position:fixed;top:52px;right:12px;left:auto;width:96px;height:171px;aspect-ratio:auto;z-index:35;border-radius:4px;overflow:hidden;box-shadow:var(--sh-2),0 0 0 1px rgba(255,255,255,.08)}
.vw.mini video{cursor:pointer}
.vw.mini .mini-ctl{display:flex;position:absolute;left:0;right:0;bottom:0;justify-content:space-between;z-index:3}
.mini-b{width:44px;height:44px;display:grid;place-items:center;color:#fff;background:var(--scrim)}
.mini-b .ic{width:20px;height:20px}
body.editando .vw.mini{visibility:hidden}
.v-err{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;background:rgba(11,14,18,.86);color:#fff;text-align:center}
.v-err p{font:600 16px/1.3 var(--body)}
.v-err .btn-s{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.v-err .btn-t{color:#fff;text-decoration-color:rgba(255,255,255,.6)}
.v-falta{position:absolute;left:0;right:0;bottom:0;z-index:2;background:var(--card);color:var(--ink);padding:14px 16px calc(14px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;border-top:3px solid var(--stamp)}
.v-falta p{font:600 15px/1.3 var(--body)}
.banda .v-falta{left:0;right:0}
.bt{display:flex;gap:2px;padding:0 16px;height:24px;align-items:center;background:var(--video-bg)}
/* flex-grow va en línea (proporcional al tramo); el mínimo de 24 px es para el dedo */
.bt-s{flex:1 0 24px;min-width:24px;height:24px;display:flex;align-items:center}
.bt-s span{display:block;width:100%;height:6px;border-radius:1px;background:rgba(255,255,255,.42);transition:background-color .2s}
.bt-s.on span{background:var(--mark)}
.bt-s:focus-visible{outline-color:#fff;outline-offset:0;box-shadow:0 0 0 3px var(--mark)}
@media (hover:hover){ .bt-s:hover span{background:rgba(255,255,255,.66)} .bt-s.on:hover span{background:var(--mark)} }
.bt-pie{height:8px;background:var(--video-bg)}

.fx-cab{background:var(--card);padding:20px 16px 20px;border-bottom:1px solid var(--line);position:relative;overflow:clip}
.fx-cab::after{content:"";display:table;clear:both}
.fx-eye{margin-right:0}
.fx-eye .nw{white-space:nowrap}
/* Área de toque de 44 px sin mover el renglón (el subrayado sigue pegado al texto) */
.fx-eye a{display:inline-block;padding:15px 0;margin:-15px 0;border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.fx-h1{font:900 30px/1.02 var(--disp);text-transform:uppercase;text-wrap:balance;margin:10px 0 0}
.fx-who{font:400 12px/1.45 var(--mono);color:var(--muted);margin-top:10px;overflow-wrap:anywhere}
.sello{float:right;position:relative;margin:-8px 0 8px 12px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 12px 7px;border:3px solid var(--stamp);border-radius:3px;background:var(--card);color:var(--stamp);transform:rotate(-8deg);text-align:center;shape-outside:margin-box}
/* Celular: junto al H1 el sello lo partía en renglones de una palabra. El H1 va a todo el ancho y el sello
   queda a la derecha de la cuenta (el orden del DOM sigue siendo eyebrow → sello → H1 para el teclado).
   Desde 768 flota como antes, arriba a la derecha junto al eyebrow corto. */
@media (max-width:767px){
  .fx-cab{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:start}
  .fx-cab::after{display:none}
  .fx-eye,.fx-h1,.sello-exp,.med{grid-column:1 / -1}
  .fx-h1{grid-row:2}
  .fx-who{grid-row:3;grid-column:1}
  .sello{grid-row:3;grid-column:2;float:none;margin:12px 4px 0 0}
  .sello-exp{grid-row:4}
  .vida-exp{grid-row:5}
  .med{grid-row:6}
}
@media (min-width:768px){ .sello{margin-top:-23px} }
@media (max-width:359px){ .sello{padding:8px 10px 7px} }
.sello-n{font:700 36px/1 var(--sten);letter-spacing:.02em}
.sello-l{font:600 11px/1.1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.sello .halo{position:absolute;left:50%;top:50%;width:240%;height:300%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,var(--stamp-10),transparent);opacity:0;pointer-events:none;z-index:-1}
.sello.espera{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .sello.cae{animation:sellazo .45s cubic-bezier(.2,.9,.3,1.3) both}
  .sello.cae .halo{animation:halo .6s ease-out .27s both}
}
@keyframes sellazo{0%{transform:rotate(-8deg) scale(1.8);opacity:0}60%{transform:rotate(-8deg) scale(.96);opacity:1}100%{transform:rotate(-8deg) scale(1);opacity:1}}
@keyframes halo{0%{opacity:1}100%{opacity:0}}
.sello-exp{clear:both;background:var(--paper-2);border-left:3px solid var(--stamp);padding:10px 12px;margin-top:14px;font-size:15px;line-height:1.5}

/* Medidor ×N */
.med{clear:both;margin-top:18px;height:48px;position:relative}
.med-top{display:flex;justify-content:space-between;font:400 12px/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.med-top b{color:var(--ink);font-weight:600}
.med-pista{position:relative;height:8px;margin-top:8px;background:var(--paper-2);border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.med-fill{position:absolute;left:0;top:0;bottom:0;background:var(--stamp);border-radius:999px}
.med-pin{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--card);border:3px solid var(--stamp)}
.med-m{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--line-strong)}
.med-m.p{background:none;border-left:1px dashed var(--line-strong)}
.med-lbl{position:relative;height:14px;margin-top:5px;font:400 11px/1 var(--mono);color:var(--muted)}
.med-lbl span{position:absolute;transform:translateX(-50%)}
.med-lbl span.fin{transform:translateX(-100%)}

/* Índice */
.indice{position:sticky;top:0;z-index:20;height:44px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;background:var(--card);border-bottom:1px solid var(--line);padding:0 8px}
.indice::-webkit-scrollbar{display:none}
.indice a{flex:none;display:inline-flex;align-items:center;height:44px;padding:0 10px;font:600 14px/1 var(--body);color:var(--muted);text-decoration:none;position:relative;white-space:nowrap}
.indice a[aria-current="true"]{color:var(--ink)}
.indice a[aria-current="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;background:var(--stamp)}
@media (hover:hover){ .indice a:hover{color:var(--ink)} }
.indice a:focus-visible{outline-offset:-4px;box-shadow:inset 0 0 0 7px var(--mark)}

.fx-doc{background:var(--card);min-width:0}
.sec{padding:32px 16px;border-top:1px dashed var(--line);scroll-margin-top:52px}
.sec:first-of-type{border-top:0}
.sec-t{font:800 24px/.95 var(--disp);text-transform:uppercase;margin-bottom:14px}
.sec h3{font:600 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--stamp);margin:24px 0 10px}
.sec h3:first-of-type{margin-top:4px}
.hook{margin:0;font:600 18px/1.45 var(--body);border-left:4px solid var(--mark);padding:2px 0 2px 14px}
.hook-o{margin-top:12px;padding-left:18px;font-size:15px;color:var(--muted)}
.hook-o span{display:block;font:600 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:2px}
.hook-o i{color:var(--ink)}
.sec .lnk{margin-top:10px}
.resumen{max-width:64ch}

.tramos{list-style:none;display:grid;gap:2px;border-left:2px solid var(--line);margin-left:2px}
.tr{display:grid;grid-template-columns:88px minmax(0,1fr);gap:0 10px;align-items:start;padding:0 8px 0 0;border-radius:0 3px 3px 0;position:relative;transition:background-color .2s}
.tr-t{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px 0 12px;font:600 12px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;text-align:left;border-radius:3px}
.tr-t .ic{width:12px;height:12px;color:var(--stamp);flex:none}
span.tr-t{cursor:default}
.tramos-l .tr{grid-template-columns:116px minmax(0,1fr)}
.tr-q{font-size:15px;line-height:1.5;padding:11px 0 10px}
.tr.on{background:var(--mark-bg)}
.tr.on::before{content:"";position:absolute;left:-3px;top:0;bottom:0;width:4px;background:var(--mark)}
/* En oscuro el amarillo translúcido sobre gris se ve verde olivo: fondo apenas tintado, barra y tiempo en amarillo sólido */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tr.on{background:rgba(231,201,58,.12);background:color-mix(in srgb,var(--mark) 12%,var(--card))}
  :root:not([data-theme="light"]) .tr.on .tr-t{color:var(--mark)}
}
:root[data-theme="dark"] .tr.on{background:rgba(231,201,58,.12);background:color-mix(in srgb,var(--mark) 12%,var(--card))}
:root[data-theme="dark"] .tr.on .tr-t{color:var(--mark)}
@media (hover:hover){ button.tr-t:hover{background:var(--hover)} }
.pista{font:400 12px/1.4 var(--mono);color:var(--muted);margin-top:12px}

.nums-l{list-style:none;display:grid;gap:14px}
.nums-l li{display:grid;grid-template-columns:32px 1fr;gap:8px}
.nums-l .n{font:600 12px/1.9 var(--mono);color:var(--stamp)}

.tags-n{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.tags-n li{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border:1.5px solid var(--line-strong);border-radius:999px;font-size:14px;line-height:1.3;background:var(--card)}

.check{list-style:none;display:grid;gap:2px}
.ck{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 8px 10px 4px;cursor:pointer;border-radius:3px;transition:color .2s}
.ck input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:1px 0 0;flex:none;border:1.5px solid var(--line-strong);border-radius:3px;background:var(--card);display:grid;place-items:center;cursor:pointer;transition:background-color .2s,border-color .2s}
.ck input:checked{background:var(--ok);border-color:var(--ok)}
.ck input:checked::after{content:"";width:11px;height:6px;border-left:2px solid var(--card);border-bottom:2px solid var(--card);transform:translateY(-1px) rotate(-45deg)}
.ck input:checked + span{color:var(--muted)}
@media (hover:hover){ .ck:hover{background:var(--hover)} }
.cuenta-pasos{font:400 12px/1 var(--mono);color:var(--muted);margin-top:8px}

.fijate{list-style:none;display:grid;gap:8px}
.fijate li{background:var(--paper-2);border-left:3px solid var(--mark);padding:12px 14px;font-size:15px;line-height:1.5;border-radius:0 3px 3px 0}

/* Plantilla */
.pl-hoja{margin:0;background:var(--card);border:1px solid var(--line-strong);border-radius:4px;padding:16px 16px 16px 20px;font:400 14px/1.6 var(--mono);white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;position:relative;box-shadow:var(--sh-1)}
.pl-hoja::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:1px;background:var(--stamp);opacity:.45}
.pl-hoja mark,.pl-ta-vista mark,.bh li mark{background:var(--mark-bg);color:var(--ink);border-bottom:1.5px dotted var(--ink);padding:0 1px;border-radius:2px}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pl-hoja mark,:root:not([data-theme="light"]) .pl-ta-vista mark,:root:not([data-theme="light"]) .bh li mark{background:transparent;color:var(--mark);border-bottom:2px solid var(--mark)} }
:root[data-theme="dark"] .pl-hoja mark,:root[data-theme="dark"] .pl-ta-vista mark,:root[data-theme="dark"] .bh li mark{background:transparent;color:var(--mark);border-bottom:2px solid var(--mark)}
.pl-nota{font:400 12px/1.4 var(--mono);color:var(--muted);margin:10px 0 0}
.pl-acts{display:grid;gap:8px;margin-top:12px}
@media (min-width:600px){ .pl-acts{grid-template-columns:1fr auto} }
.pl-bar{position:sticky;top:44px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 0;background:var(--card);border-bottom:1px solid var(--line);margin-bottom:10px}
.pl-bar .btn{min-height:44px;padding:0 12px;font-size:14px}
.pl-cnt{font:600 12px/1.2 var(--mono);color:var(--muted);margin-left:auto;padding:0 4px}
.pl-ta{display:block;width:100%;min-height:240px;font:400 16px/1.6 var(--mono);background:var(--paper-2);color:var(--ink);border:1.5px solid var(--line-strong);border-radius:4px;padding:14px;resize:none;overflow:hidden}
.pl-ta:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px var(--mark)}
.pl-listo{margin-top:10px}

/* Ideas por nicho */
.nicho-q{font-weight:600;margin-bottom:10px}
.seg-n{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (min-width:600px){ .seg-n{grid-template-columns:repeat(4,auto);justify-content:start} }
.seg-n button{min-height:44px;padding:0 14px;border:1.5px solid var(--line-strong);border-radius:999px;font:600 14px/1.15 var(--body);background:var(--card);transition:background-color .2s,color .2s}
.seg-n button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (hover:hover){ .seg-n button:not([aria-pressed="true"]):hover{background-image:linear-gradient(var(--hover),var(--hover))} }
.ideas{display:grid;gap:10px;margin-top:16px}
.idea{background:var(--paper-2);border-radius:3px;padding:14px 16px;font-size:15px;line-height:1.55}
.idea-n{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.idea-n .lbl-m{font-size:11px}
.idea.tuya{background:var(--card);border:1.5px solid var(--ink)}
.tag-tu{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--mark);color:var(--on-mark);padding:4px 6px 3px;border-radius:2px}

/* Details */
.det{border:1px solid var(--line-strong);border-radius:4px;background:var(--card)}
.det summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:10px 16px;cursor:pointer;font:700 16px/1.3 var(--body)}
.det summary::-webkit-details-marker{display:none}
.det summary::after{content:"+";font:400 24px/1 var(--mono);color:var(--stamp)}
.det[open] summary::after{content:"–"}
.det-c{padding:4px 16px 18px}
.guion{white-space:pre-line;font-size:16px;line-height:1.65;max-width:66ch}
.guion .g-who{font:600 12px/1 var(--mono);letter-spacing:.06em;color:var(--stamp)}
.guion-seg{margin-bottom:14px}
.entro{list-style:none;display:grid;gap:14px}
.entro li{display:grid;grid-template-columns:24px 1fr;gap:10px}
.entro .ic{color:var(--ok);width:22px;height:22px;margin-top:1px}
.entro b{font-weight:600;display:block}
.entro span{color:var(--muted);font-size:15px}

.orig-p{font:400 13px/1.5 var(--mono);color:var(--muted);margin-top:12px;overflow-wrap:anywhere}
.legal{font-size:13px;color:var(--muted);margin-top:10px;max-width:60ch}
.sig-l{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:12px 16px;background:var(--steel);color:var(--on-steel);border-radius:4px;text-decoration:none;margin-bottom:24px}
.sig-l small{display:block;font:600 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin-bottom:4px}
.sig-l b{font:800 20px/1.02 var(--disp);padding-top:.14em;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sig-l:focus-visible{outline-color:var(--ink)}
.mismo{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:600px){ .mismo{grid-template-columns:repeat(4,minmax(0,1fr))} }

.err-f{background:var(--paper-2);border-left:3px solid var(--stamp);padding:18px 16px;display:grid;gap:12px;justify-items:start}
.err-f p{font-weight:600}

/* Barra de acciones (celular) */
.acciones{position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(60px + var(--safe-b));padding:0 8px var(--safe-b);background:var(--card);border-top:1px solid var(--line-strong);display:grid;grid-template-columns:64px 1fr 64px;align-items:center;gap:8px}
.acc-l{height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:600 11px/1 var(--body);color:var(--ink);text-decoration:none;border-radius:3px;transition:transform .12s}
.acc-l .ic{width:22px;height:22px}
.acc-l[aria-pressed="true"] .ic{color:var(--stamp)}
.acciones .btn-p{min-height:46px}
body.editando .acciones{display:none}
@media (min-width:1024px){ .acciones{display:none} }

.fx-acc-d,.pasos-nav{display:none}

@media (min-width:768px) and (max-width:1023px){
  .fx-doc,.fx-cab,.indice{max-width:680px;margin-left:auto;margin-right:auto}
  .fx-der{background:var(--card)}
}

@media (min-width:1024px){
  .fx{display:grid;grid-template-columns:400px minmax(0,680px);gap:56px;justify-content:center;align-items:start;padding:24px var(--gut) 0;max-width:calc(1240px + 64px);margin:0 auto}
  .fx-izq{position:sticky;top:88px}
  .banda{height:min(calc(100vh - 250px),680px);border-radius:4px 4px 0 0;overflow:hidden}
  .volver{display:none}
  .bt{border-radius:0 0 4px 4px;padding-bottom:4px;height:28px}
  .bt-pie{height:8px;border-radius:0 0 4px 4px}
  .fx-acc-d{display:grid;grid-template-columns:auto 1fr;gap:8px;margin-top:14px}
  .pasos-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;font:400 12px/1.3 var(--mono);color:var(--muted)}
  .pasos-nav a{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 6px;color:var(--ink);text-decoration:none;font:600 13px/1 var(--body);border-radius:3px}
  .pasos-nav a:hover{background:var(--hover)}
  .pasos-nav a .ic{width:16px;height:16px}
  .pasos-nav .pn-c{text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
  /* El nombre de la lista mide 44 px de alto (antes 16) sin mover el renglón; si no cabe, se corta con … */
  .pasos-nav .pn-c{line-height:44px}
  .pasos-nav .pn-c a{display:inline-block;vertical-align:top;max-width:calc(100% - 7em);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:44px;padding:0;font:600 12px/44px var(--mono);text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
  .pasos-nav .pn-c a:hover{background:none;color:var(--stamp)}
  .fx-der{border:1px solid var(--line);border-radius:4px;background:var(--card);box-shadow:var(--sh-2);overflow:clip}
  .fx-cab{padding:28px 32px 24px}
  .fx-h1{font-size:40px}
  .indice{top:64px;padding:0 22px}
  .sec{padding:32px;scroll-margin-top:120px}
  .pl-bar{top:108px}
}

/* ============ MI LISTA ============ */
.lista-seg{margin-top:20px}
.filas{list-style:none;margin-top:16px;border-top:1px solid var(--line)}
.fila{position:relative;display:grid;grid-template-columns:56px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);min-height:112px}
.fila-th img{width:56px;height:100px;object-fit:cover;border-radius:3px;background:var(--paper-2);display:block}
.fila-th{display:block;border-radius:3px}
.fila-b{display:grid;gap:4px;min-width:0;align-content:start}
.fila-t{padding-right:36px;font:600 15px/1.3 var(--body);color:var(--ink);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover){ .fila-t:hover{text-decoration:underline} }
.fila-f{font:600 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--stamp)}
.fila-e{font:400 12px/1.4 var(--mono);color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fila-e .ok{color:var(--ok);font-weight:600;display:inline-flex;align-items:center;gap:4px}
.fila-e .ok .ic{width:16px;height:16px}
.fila-acts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:6px}
.fila-acts .btn-t{min-height:44px;font-size:14px}
.fila-acts .btn-t[aria-pressed="true"]{color:var(--ok)}
.fila-acts .ico-btn{position:absolute;top:6px;right:-8px;color:var(--muted)}
.fila-q{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 0}
.fila-q-t{flex:1;min-width:0;display:flex;align-items:baseline;gap:0;font:400 13px/1.4 var(--mono);color:var(--muted)}
.fila-q-t b{flex:none;color:var(--ink);font-weight:600}
.fila-q-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:.5em}
.fila-q-t [aria-hidden]{flex:none;margin-left:.5em}
.lista-pie{margin-top:28px;display:grid;gap:12px;justify-items:start;max-width:560px}
.lista-pie p{font-size:14px;color:var(--muted)}
@media (min-width:1024px){ .lista-w{max-width:880px} }

/* ============ AVISO ============ */
.aviso{position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--safe-b) + 16px);z-index:60;width:max-content;max-width:min(360px,calc(100vw - 32px));transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .24s var(--ease),transform .24s var(--ease)}
.aviso.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
/* Escondido, su botón no se puede enfocar (el contenedor sigue en el árbol para que la región viva funcione) */
.aviso:not(.on) .aviso-in{visibility:hidden;transition:visibility 0s linear .24s}
body.en-ficha .aviso{bottom:calc(60px + var(--safe-b) + 16px)}
@media (min-width:1024px){ .aviso,body.en-ficha .aviso{bottom:24px} }
.aviso-in{display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);padding:10px 10px 10px 16px;border-radius:4px;box-shadow:0 12px 32px -12px rgba(0,0,0,.5);font:600 14px/1.4 var(--body);min-height:48px}
.aviso-in > span:not(.copiado){flex:1}
.aviso-btn{min-height:44px;padding:0 12px;color:var(--paper);font:700 14px/1 var(--body);text-decoration:underline;text-underline-offset:4px;border-radius:3px;flex:none}
.aviso-btn:focus-visible{outline-color:var(--paper)}
.copiado{flex:none;font:700 14px/1 var(--sten);letter-spacing:.04em;color:#F0645A;border:2px solid #F0645A;border-radius:3px;padding:5px 7px 3px;transform:rotate(-6deg)}
:root[data-theme="dark"] .copiado{color:#B42318;border-color:#B42318}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .copiado{color:#B42318;border-color:#B42318} }
@media (prefers-reduced-motion:no-preference){ .aviso.on .copiado{animation:golpe .3s cubic-bezier(.2,.9,.3,1.3) both} }
@keyframes golpe{0%{transform:rotate(-6deg) scale(1.6);opacity:0}100%{transform:rotate(-6deg) scale(1);opacity:1}}

/* ============ POCA ALTURA (zoom al 400 %, celular acostado) ============
   Con menos de 500 px de alto las barras pegajosas se comían la pantalla (WCAG 1.4.10): se quedan en su lugar.
   La barra de acciones de la ficha sigue fija (ahí vive Guardar en el celular), pero más baja. */
@media (max-height:500px){
  .top{position:relative}
  .bus-cab,.fbar,.indice,.nav-inf{position:static}
  body{padding-bottom:0}
  body.en-ficha{padding-bottom:calc(48px + var(--safe-b))}
  .acciones{height:calc(48px + var(--safe-b))}
  .acc-l{height:44px}
  .acciones .btn-p{min-height:40px}
  .pl-bar{top:0}
  .aviso{bottom:calc(16px + var(--safe-b))}
  body.en-ficha .aviso{bottom:calc(48px + var(--safe-b) + 12px)}
  html,html:has(.fbar),html:has(.pant.bus),html:has(body.en-ficha){--sp-t:16px;--sp-b:16px}
  html:has(body.en-ficha){--sp-b:calc(48px + var(--safe-b) + 16px)}
}
@media (max-height:500px) and (min-width:1024px){
  html:has(body.en-ficha){--sp-b:16px}
  .aviso,body.en-ficha .aviso{bottom:24px}
}

/* ============ DERIVADOS: banco de hooks, vida, Edición ============ */
.bh-ir{margin-top:20px}
.bh-g{display:grid;gap:16px}
@media (min-width:1024px){ .bh-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;align-items:start} }
.bh{display:grid;gap:12px;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:16px;box-shadow:var(--sh-1)}
.cab .bh,.cab .regla{margin-top:20px;max-width:880px}
.bh-t{font:800 22px/1 var(--disp);text-transform:uppercase;padding-top:.14em}
.bh-d,.bh-i,.ed-pq{font-size:14px;line-height:1.45;color:var(--muted)}
.bh-acts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.bh h3:not(.bh-t),.bh h4{font:600 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--stamp);margin:12px 0 6px}
.bh .det-c > :first-child{margin-top:4px}
.bh ul{list-style:none;display:grid;gap:8px}
.bh li{padding-left:12px;border-left:2px solid var(--line)}
.regla .det-c p{color:var(--muted);max-width:66ch}
.vida{display:inline-flex;align-items:center;gap:5px;flex:none;font:600 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.vida::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line-strong)}
.vida-nuevo::before{background:var(--mark)}
.vida-vigente::before{background:var(--ok)}
.vida-clasico::before{background:var(--stamp)}
.tv-b > .vida{justify-self:start;margin-top:3px}
.bh .grid-h{grid-template-columns:minmax(0,1fr)}
.vida-b{display:flex;width:max-content;gap:12px;min-height:44px;align-items:center;text-decoration:underline dotted var(--line-strong)}
.vida-b .vida{text-decoration:inherit}
.ed-ini{border-top:2px solid var(--ink);padding-top:12px}
.ed-ini .sec-cab-sub{margin:0 0 14px}
.ed-ini .eyebrow{display:block;margin-bottom:4px}
.ed-it{display:grid;gap:6px}
.ed-pq{padding-left:12px;border-left:2px solid var(--mark)}
/* Acceso al banco de hooks en el celular (arriba, bajo el buscador) y rejilla de 3 cuando quedaría una tarjeta sola */
.ini-bh{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;margin-top:6px}
.ini-bh > span{font-size:14px;line-height:1.4;color:var(--muted)}
@media (min-width:1024px){ .carr.carr-3{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ============ MOVIMIENTO REDUCIDO ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .btn:active,.chip:active,.tv-save:active,.tv-play:active,.nav-inf a:active,.v-play:active{transform:none}
  .tv-a:hover .tv-p img,.sp:hover img{transform:none}
  a:hover > * > .mos img,a:hover > .mos img{transform:none;clip-path:none}
  .aviso{transform:translate(-50%,0);transition:opacity .12s linear!important}
  dialog.hoja[open]{animation:aparece .12s linear both!important}
}