/* Collateral web. La marca y su movimiento son los de Collateral 2.0 para Mac (apertura, firma,
   cápsula, píldoras), pero las listas tienen voz propia: la app (y la PWA) muestran filas de
   Apple TV; la web las presenta como una publicación. Tapas con los carteles abiertos en abanico,
   un índice numerado y cada lista como un ranking que se lee de arriba abajo.
   Guías: tasteskill (sin carruseles, un momento de entrada, bordes iguales, hover de 2 px) y
   ui-ux-pro-max (cuadrícula editorial, contraste 4.5:1, foco visible, objetivos de 44 px). */
@font-face{font-family:Manrope;src:url('/fonts/Manrope.ttf') format('truetype');font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --bg:#07080b;--raised:#111318;--menu:#17191f;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);
  --ink:#fff;--ink-2:rgba(255,255,255,.66);--ink-3:rgba(255,255,255,.46);--ink-4:rgba(255,255,255,.22);
  --platter:rgba(255,255,255,.12);--platter-2:rgba(255,255,255,.2);--cream:#f5f4ef;--on-cream:#0b0c0f;
  --accent:#ff6257;--ok:#7fd1a6;--warn:#f1b85b;
  --ease:cubic-bezier(.2,0,0,1);--ease-out:cubic-bezier(.22,.7,.25,1);--ease-in:cubic-bezier(.4,0,1,1);
  --safe:clamp(20px,4.4vw,72px);--top:22px;
  color-scheme:dark;
  font-family:Manrope,"Helvetica Neue",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  font-size:16px;line-height:1.5;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
*,*:before,*:after{box-sizing:border-box}
/* `hidden` manda siempre: una capa oculta con display propio seguía tapando los clics. */
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg)}
body{min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
html.arrancando body{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button,a,label{cursor:pointer;-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,ol{margin:0}
:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
main{flex:1 0 auto;outline:0}
.saltar{position:fixed;left:16px;top:-80px;z-index:200;background:var(--cream);color:var(--on-cream);padding:12px 18px;border-radius:24px;font-weight:700}
.saltar:focus{top:16px}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ======================================================================= vidrio
   Lo que flota sobre el contenido (cápsula, menú, botones, campo del código, diálogos, hojas y
   avisos) es vidrio: deja ver y satura lo de atrás, su borde recibe la luz desde arriba a la
   izquierda y, con ratón, la luz sigue al puntero (js/vidrio.js). Al soltar vuelve con resorte.
   La idea viene de quickLiquid, pero su refracción real (backdrop-filter: url()) solo existe en
   Chromium; esto es solo CSS para que Safari, Firefox y Chrome vean lo mismo.
   Las listas (tapas, índice, ranking) no llevan vidrio: son el contenido, no lo que flota. */
@property --luz-a{syntax:'<angle>';inherits:true;initial-value:135deg}
@property --v-tinte{syntax:'<color>';inherits:false;initial-value:rgba(28,30,37,.55)}
:root{
  --v-fino:rgba(255,255,255,.085);--v-fino-2:rgba(255,255,255,.16);
  --v-medio:rgba(28,30,37,.55);--v-medio-2:rgba(52,55,64,.6);
  --v-espeso:rgba(24,26,32,.76);
  --v-filtro:blur(24px) saturate(1.8);
  --v-sombra:0 12px 34px rgba(0,0,0,.3);
  /* Resorte: un poco de rebote al soltar. linear() donde existe; si no, una curva que se pasa. */
  --resorte:cubic-bezier(.34,1.56,.64,1);--resorte-suave:cubic-bezier(.3,1.22,.5,1);
}
@supports (transition-timing-function:linear(0,1)){:root{
  --resorte:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);
  --resorte-suave:linear(0,.06,.24 9%,.69 21%,.92 32%,1.02 44%,1.03 52%,1.01 68%,1);
}}
.vidrio,.btn,.cerrar{
  -webkit-backdrop-filter:var(--v-filtro);backdrop-filter:var(--v-filtro);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 56%),var(--v-tinte);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 22px rgba(255,255,255,.025),var(--v-sombra);
}
/* El borde: un anillo de 1 px cuyo lado más brillante mira hacia la luz (--luz-a). */
.vidrio:before,.btn:before,.cerrar:before{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(var(--luz-a),rgba(255,255,255,.5),rgba(255,255,255,.12) 26%,rgba(255,255,255,0) 50%,rgba(255,255,255,.05) 72%,rgba(255,255,255,.24));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* El brillo que sigue al puntero; solo aparece con ratón (clase .con-luz desde js/vidrio.js). */
.vidrio:after,.btn:after,.cerrar:after{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--ease-out);
  background:radial-gradient(150px circle at var(--luz-x,50%) var(--luz-y,0%),rgba(255,255,255,.13),rgba(255,255,255,0) 70%)}
.con-luz:after{opacity:1}
.btn-crema,.btn[aria-pressed=true]{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1px 0 #fff,0 10px 28px rgba(0,0,0,.28)}
.btn-crema:before,.btn[aria-pressed=true]:before{background:linear-gradient(var(--luz-a),rgba(255,255,255,.9),rgba(255,255,255,0) 40%,rgba(0,0,0,0) 70%,rgba(0,0,0,.12))}
.btn-crema:after,.btn[aria-pressed=true]:after{background:radial-gradient(150px circle at var(--luz-x,50%) var(--luz-y,0%),rgba(255,255,255,.7),rgba(255,255,255,0) 70%)}
/* Un diálogo puede tener scroll y sus capas se irían con él: su borde va en la sombra. */
.dialogo.vidrio:before,.dialogo.vidrio:after{display:none}
.dialogo.vidrio{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.07),0 40px 120px rgba(0,0,0,.55)}
/* Sin desenfoque (navegador viejo) o con «Reducir transparencia»: vidrio casi opaco. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--v-fino:#2a2c33;--v-fino-2:#383a42;--v-medio:#1d1f25;--v-medio-2:#30333b;--v-espeso:#191b21}}
@media (prefers-reduced-transparency:reduce){
  :root{--v-fino:#2a2c33;--v-fino-2:#383a42;--v-medio:#1d1f25;--v-medio-2:#30333b;--v-espeso:#191b21}
  .vidrio,.btn,.cerrar{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ======================================================================= arranque (de la Mac) */
#boot{position:fixed;inset:0;z-index:150;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px}
#boot .collateral-mark{--mark-size:72px;width:72px;height:72px}
#boot p{font-size:15px;font-weight:600;color:var(--ink-3)}
#apertura{position:fixed;inset:0;z-index:1000;pointer-events:none;contain:strict}
#apertura .ib{position:fixed;background:var(--cream);will-change:left,top,width,height}
#apertura .word{position:fixed;color:var(--cream);opacity:0}
#apertura .word svg{display:block;width:100%;height:100%}
.apertura .firma{visibility:hidden}

/* ======================================================================= cabecera */
.cabecera-app{position:fixed;left:0;right:0;top:0;z-index:50;height:90px;pointer-events:none}
.cabecera-app>*{pointer-events:auto}
#cabecera-fondo{position:fixed;left:0;right:0;top:0;height:150px;z-index:49;pointer-events:none;opacity:0;transition:opacity .3s var(--ease-out);
  background:linear-gradient(to bottom,rgba(7,8,11,.9) 0,rgba(7,8,11,.78) 42%,rgba(7,8,11,0) 100%);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 50%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 50%,transparent 100%)}
.con-fondo #cabecera-fondo{opacity:1}
.capsula{position:absolute;left:var(--safe);top:var(--top);display:flex;align-items:center;height:46px;padding:4px 20px 4px 4px;border:0;border-radius:23px;
  --v-tinte:var(--v-medio);transition:--v-tinte .2s var(--ease-out),--luz-a .6s var(--ease-out),transform .6s var(--resorte)}
.capsula:hover,.capsula[aria-expanded=true]{--v-tinte:var(--v-medio-2)}
.capsula:active{transform:scale(.95);transition-duration:.2s,.6s,.12s}
.disco{position:relative;display:block;width:38px;height:38px;border-radius:50%;background:#0d0e12;flex-shrink:0}
.disco .collateral-mark{position:absolute;left:8px;top:8px;--mark-size:22px;width:22px;height:22px}
.capsula:hover .disco .c-tl{transform:translate(-11%,-11%)}
.capsula:hover .disco .c-br{transform:translate(11%,11%)}
.capsula-etiqueta{margin-left:11px;font-size:15px;font-weight:700;white-space:nowrap}
.firma{position:absolute;left:50%;top:calc(var(--top) + 6px);width:154px;height:34px;margin-left:-77px;color:var(--cream);opacity:.94;display:block}
.firma svg{display:block;width:100%;height:100%}
.firma-palabra{position:absolute;inset:0}
.firma-barra{position:absolute;left:0;top:0;width:0;height:0;display:block;background:currentColor}
.firma.latiendo{opacity:1}
.cabecera-der{position:absolute;right:var(--safe);top:var(--top);display:flex;gap:10px;align-items:center}
.cabecera-der .btn{height:46px;border-radius:23px}
.disco-perfil{position:relative;display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:4px;border:0;border-radius:50%;
  --v-tinte:var(--v-medio);transition:--v-tinte .2s var(--ease-out),--luz-a .6s var(--ease-out),transform .6s var(--resorte)}
.disco-perfil:hover{--v-tinte:var(--v-medio-2);transform:scale(1.05)}
.disco-perfil:active{transform:scale(.94);transition-duration:.2s,.6s,.12s}
.disco-perfil .avatar{width:38px;height:38px}

#menu-velo{position:fixed;inset:0;z-index:60;background:rgba(4,5,7,.4);opacity:0;transition:opacity .1s linear}
#menu-velo.abierto{opacity:1;transition-duration:.4s}
#menu{position:fixed;left:calc(var(--safe) - 12px);top:calc(var(--top) - 12px);z-index:61;width:300px;padding:18px 12px 12px;border-radius:32px;
  --v-tinte:var(--v-espeso);--v-sombra:0 4px 48px rgba(0,0,0,.45);transform-origin:34px 34px;transform:scale(.42);opacity:0;transition:transform .1s var(--ease-in),opacity .1s linear,--luz-a .6s var(--ease-out)}
#menu.abierto{transform:none;opacity:1;transition:transform .55s var(--resorte-suave),opacity .22s linear,--luz-a .6s var(--ease-out)}
.menu-cab{display:flex;align-items:center;gap:14px;padding:4px 8px 18px}
.menu-cab .avatar{width:52px;height:52px}
.menu-cab strong{display:block;font-size:16px;font-weight:700}
.menu-cab small{display:block;font-size:13px;font-weight:600;color:var(--ink-3)}
.menu-item{position:relative;z-index:1;display:flex;align-items:center;gap:14px;width:100%;height:48px;padding:0 16px;border:0;border-radius:24px;background:none;font-size:16px;font-weight:700;color:var(--ink-2);text-align:left;transition:background .12s,color .12s}
.menu-item:hover{color:var(--ink)}
/* La gota: una pastilla de vidrio que se desliza con resorte hasta la opción bajo el puntero. */
.menu-gota{position:absolute;left:12px;right:12px;top:0;height:48px;border-radius:24px;pointer-events:none;opacity:0;
  background:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .5s var(--resorte-suave),opacity .2s var(--ease-out)}
.menu-gota.on{opacity:1}
.menu-item[aria-current=page]{background:var(--cream);color:var(--on-cream)}
.menu-item svg{width:20px;height:20px;flex-shrink:0}
.menu-sep{height:1px;background:var(--line);margin:10px 12px}

/* ======================================================================= botones */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border:0;border-radius:24px;--v-tinte:var(--v-fino);color:var(--ink);
  --v-sombra:0 8px 24px rgba(0,0,0,.18);font-size:16px;font-weight:700;white-space:nowrap;
  transition:transform .6s var(--resorte),--v-tinte .16s var(--ease-out),color .16s var(--ease-out),--luz-a .6s var(--ease-out)}
.btn:hover{--v-tinte:var(--v-fino-2);transform:translateY(-1px)}
.btn:active{transform:scale(.95);transition-duration:.12s}
.btn svg{width:19px;height:19px;flex-shrink:0;margin-left:-4px}
.btn-crema{--v-tinte:var(--cream);color:var(--on-cream)}
.btn-crema:hover{--v-tinte:#fff}
.btn-grande{height:54px;padding:0 28px;border-radius:27px;font-size:17px}
.btn-chica{height:40px;padding:0 18px;border-radius:20px;font-size:14px}
.btn[aria-pressed=true]{--v-tinte:var(--cream);color:var(--on-cream)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.enlace{color:var(--ink);font-weight:700;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .25s var(--ease-out);padding-bottom:1px}
.enlace:hover{background-size:100% 1.5px}
.btn-texto{border:0;background:none;padding:0;font-size:13px;font-weight:700;color:var(--ink-3)}
.btn-texto:hover{color:var(--ink)}
.chip-codigo{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:13px;background:rgba(7,8,11,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:12px;font-weight:800;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}

/* ======================================================================= avatares */
.avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:linear-gradient(140deg,#e97866,#922c48);box-shadow:inset 0 1px 0 #ffffff40;overflow:hidden}
.avatar .collateral-mark{--mark-size:56%;width:56%;height:56%}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar[data-color="1"]{background:linear-gradient(140deg,#509bbb,#314086)}
.avatar[data-color="2"]{background:linear-gradient(140deg,#a18be0,#583078)}
.avatar[data-color="3"]{background:linear-gradient(140deg,#63ae95,#215866)}
.avatar[data-color="4"]{background:linear-gradient(140deg,#bd9959,#854638)}
.avatar[data-color="5"]{background:linear-gradient(140deg,#8595ab,#3a465e)}
.avatar-neutro{background:#1d2027}
.duenio{display:inline-flex;align-items:center;gap:9px;min-width:0;font-weight:700}
.duenio a{font-weight:700}
.duenio a:hover{text-decoration:underline;text-underline-offset:3px}

/* ======================================================================= ambiente (fondo difuminado) */
.ambiente{position:absolute;left:0;right:0;top:0;overflow:hidden;pointer-events:none}
.ambiente .capa{position:absolute;inset:-12%;background-size:cover;background-position:center 30%;filter:blur(70px) saturate(1.4);transform:scale(1.15);opacity:0;transition:opacity 1s var(--ease-out)}
.ambiente .capa.on{opacity:.42}
.ambiente:after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(7,8,11,.2),rgba(7,8,11,.55) 55%,var(--bg))}

/* ======================================================================= baraja: carteles en abanico */
/* La lista como objeto: sus primeros carteles abiertos como un abanico de cartas. Cada carta
   recibe su ángulo y desplazamiento por variables; al pasar el puntero, el abanico se abre. */
.baraja{position:relative}
.carta{position:absolute;left:50%;bottom:0;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:#1b1f27;box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
  transform-origin:50% 100%;transform:translateX(-50%) translateX(var(--x,0)) translateY(var(--y,0)) rotate(var(--r,0));transition:transform .5s var(--ease-out)}
.carta img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s var(--ease-out)}
.carta img.listo{opacity:1}
.carta-letra{position:absolute;inset:0;display:flex;align-items:flex-end;padding:10px;font-size:12px;font-weight:700;line-height:1.25;color:var(--ink-3);background:linear-gradient(160deg,#20242d,#14171c)}

/* tapa de una lista */
.tapa{position:relative;display:flex;flex-direction:column;min-width:0}
.tapa-arte{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:var(--raised);border:1px solid var(--line);transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.tapa:hover .tapa-arte,.tapa:focus-within .tapa-arte{transform:translateY(-2px);box-shadow:0 24px 50px rgba(0,0,0,.45)}
.tapa-fondo{position:absolute;inset:-14%;background-size:cover;background-position:center;filter:blur(30px) saturate(1.5);opacity:.5;transform:scale(1.1)}
.tapa-arte:after{content:'';position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 110%,rgba(7,8,11,0),rgba(7,8,11,.55))}
.tapa .baraja{position:absolute;left:0;right:0;bottom:-6%;height:82%;z-index:1}
.tapa .carta{width:36%}
.tapa .carta:nth-child(1){--x:-50%;--y:4%;--r:-9deg}
.tapa .carta:nth-child(2){--x:50%;--y:4%;--r:9deg}
.tapa .carta:nth-child(3){--x:0;--y:-2%;--r:0deg;z-index:2}
.tapa:hover .carta:nth-child(1){--x:-64%;--r:-13deg}
.tapa:hover .carta:nth-child(2){--x:64%;--r:13deg}
.tapa:hover .carta:nth-child(3){--y:-7%}
.tapa .chip-codigo{position:absolute;left:14px;top:14px;z-index:3}
.tapa h3{margin-top:16px;font-size:19px;font-weight:800;line-height:1.25;letter-spacing:-.018em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tapa h3 a:after{content:'';position:absolute;inset:0;z-index:2}
.tapa h3 a:focus-visible{outline:0}
.tapa:has(h3 a:focus-visible) .tapa-arte{outline:3px solid var(--cream);outline-offset:3px}
.tapa-pie{position:relative;z-index:3;display:flex;align-items:center;gap:8px;margin-top:9px;font-size:14px;font-weight:700;color:var(--ink-2);min-width:0;pointer-events:none}
.tapa-pie a{pointer-events:auto}
.tapa-pie a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.tapa-pie .avatar{width:22px;height:22px}
.tapa-pie>a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tapa-pie small{margin-left:auto;font-size:13px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.tapa-desc{margin-top:10px;font-size:15px;line-height:1.55;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tapa.destacada .tapa-arte{aspect-ratio:auto;flex:1 1 auto;min-height:360px}
.tapa.destacada .baraja{height:86%}
.tapa.destacada .carta{width:31%}
.tapa.destacada h3{font-size:28px;letter-spacing:-.025em}
.tapa.destacada .tapa-pie{font-size:15px}

/* ======================================================================= estructura */
.seccion{position:relative;padding:0 var(--safe);margin-top:120px;scroll-margin-top:100px}
.seccion-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.seccion-cab h2{font-size:clamp(28px,3vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.08}
.seccion-cab p{max-width:42ch;font-size:15px;line-height:1.55;color:var(--ink-3);text-align:right}

/* ======================================================================= inicio */
.portada{position:relative;min-height:min(100vh,980px);min-height:min(100svh,980px);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,88px);align-items:center;padding:120px var(--safe) 64px}
.portada .ambiente{bottom:0}
.portada-texto{position:relative;z-index:1}
.ceja{display:block;margin-bottom:18px;font-size:14px;font-weight:700;color:var(--ink-3);letter-spacing:.01em}
.portada h1{font-size:clamp(40px,5vw,74px);font-weight:800;line-height:1.02;letter-spacing:-.036em;max-width:15ch;text-wrap:balance}
.portada-lead{margin-top:22px;max-width:48ch;font-size:18px;line-height:1.55;color:var(--ink-2)}
.portada-lead b{color:var(--ink);font-weight:800;letter-spacing:.04em}
.portada-codigo{margin-top:34px;max-width:460px}
.portada-mas{font-size:15px;font-weight:600;color:var(--ink-3)}
.portada-obra{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.portada-obra>a{display:block;width:min(100%,560px);border-radius:24px}
.portada-obra .baraja{width:100%;aspect-ratio:1.18/1}
.portada-obra .carta{width:40%}
.portada-obra .carta:nth-child(1){--x:-62%;--y:9%;--r:-15deg}
.portada-obra .carta:nth-child(2){--x:62%;--y:9%;--r:15deg}
.portada-obra .carta:nth-child(3){--x:-32%;--y:2%;--r:-7deg;z-index:1}
.portada-obra .carta:nth-child(4){--x:32%;--y:2%;--r:7deg;z-index:1}
.portada-obra .carta:nth-child(5){--x:0;--y:-3%;--r:0deg;z-index:2}
.portada-obra .baraja:hover .carta:nth-child(1){--x:-72%;--r:-18deg}
.portada-obra .baraja:hover .carta:nth-child(2){--x:72%;--r:18deg}
.portada-obra .baraja:hover .carta:nth-child(3){--x:-38%;--r:-9deg}
.portada-obra .baraja:hover .carta:nth-child(4){--x:38%;--r:9deg}
.portada-obra .baraja:hover .carta:nth-child(5){--y:-6%}
/* El momento de la página: al terminar la apertura las cartas se reparten desde el centro. */
.baraja.por-repartir .carta{transform:translateX(-50%) translateY(14%) rotate(0deg);opacity:0;transition:none}
.baraja.repartida .carta{transition:transform .9s var(--ease-out),opacity .45s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.portada-pie{margin-top:64px;text-align:center}
.portada-pie .ceja{margin-bottom:8px}
.portada-pie a.nombre{font-size:22px;font-weight:800;letter-spacing:-.02em}
.portada-pie a.nombre:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.portada-pie .duenio{display:flex;margin-top:8px;font-size:14px;color:var(--ink-2);justify-content:center}

.campo-pildora{position:relative;display:flex;align-items:center;height:62px;padding:6px;border-radius:31px;--v-tinte:var(--v-fino);transition:--v-tinte .16s,--luz-a .6s var(--ease-out),box-shadow .16s;cursor:text}
.campo-pildora:hover{--v-tinte:rgba(255,255,255,.11)}
.campo-pildora:focus-within{--v-tinte:var(--v-fino-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 2px rgba(245,244,239,.5),var(--v-sombra)}
.campo-pildora input{flex:1 1 auto;min-width:0;height:100%;border:0;background:none;outline:0;padding:0 18px;font-size:20px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.campo-pildora input::placeholder{color:var(--ink-4);font-weight:700}
.campo-pildora .btn{height:48px;border-radius:24px;flex-shrink:0}
.campo-error{min-height:22px;margin:8px 0 0 20px;font-size:13px;font-weight:600;color:var(--warn)}

.rejilla-editorial{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px}
.rejilla-editorial .destacada{grid-column:span 2;grid-row:span 2}
.rejilla-tapas{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:40px 24px}

/* índice numerado: las recién publicadas, como el sumario de una revista */
.indice{list-style:none;padding:0;border-bottom:1px solid var(--line)}
.indice-fila{display:grid;grid-template-columns:64px 128px minmax(0,1fr) auto auto 28px;align-items:center;gap:24px;padding:20px 16px;margin:0 -16px;border-top:1px solid var(--line);border-radius:20px;transition:background .18s var(--ease-out)}
.indice li:first-child .indice-fila{border-top-color:transparent}
.indice-fila:hover{background:rgba(255,255,255,.05)}
.indice-num{font-size:40px;font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink-4);transition:color .18s}
.indice-fila:hover .indice-num{color:var(--ink)}
.indice-fila .baraja{height:76px}
.indice-fila .carta{width:46px;border-radius:7px;box-shadow:0 8px 18px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06)}
.indice-fila .carta:nth-child(1){--x:-62%;--r:-8deg}
.indice-fila .carta:nth-child(2){--x:62%;--r:8deg}
.indice-fila .carta:nth-child(3){--x:0;--y:-4%;z-index:2}
.indice-fila:hover .carta:nth-child(1){--x:-80%;--r:-11deg}
.indice-fila:hover .carta:nth-child(2){--x:80%;--r:11deg}
.indice-texto{min-width:0}
.indice-texto strong{display:block;font-size:19px;font-weight:800;letter-spacing:-.015em;line-height:1.3}
.indice-texto .duenio{margin-top:5px;font-size:14px;color:var(--ink-2)}
.indice-texto .duenio .avatar{width:20px;height:20px}
.indice-dato{font-size:14px;font-weight:600;color:var(--ink-3);white-space:nowrap;text-align:right}
.indice-dato b{display:block;font-size:15px;color:var(--ink-2);font-weight:700}
.indice-fila .chip-codigo{background:rgba(255,255,255,.06)}
.indice-flecha{width:22px;height:22px;color:var(--ink-3);transition:transform .2s var(--ease-out),color .2s}
.indice-fila:hover .indice-flecha{transform:translateX(4px);color:var(--ink)}

.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.paso{padding:28px;border-radius:24px;background:var(--raised);border:1px solid var(--line)}
.paso-num{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--platter);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.paso h3{margin:22px 0 8px;font-size:20px;font-weight:800;letter-spacing:-.015em}
.paso p{font-size:15px;color:var(--ink-2);line-height:1.6}
.paso code{font-family:inherit;font-weight:800;letter-spacing:.06em;color:var(--ink)}

/* ======================================================================= página de una lista */
.lista-pagina{position:relative}
.lista-pagina>.ambiente{height:760px}
.lista-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:clamp(40px,6vw,104px);align-items:start;padding:132px var(--safe) 0}
.lista-lado{position:sticky;top:110px}
.lista-lado h1{font-size:clamp(34px,3.6vw,54px);font-weight:800;line-height:1.04;letter-spacing:-.034em;text-wrap:balance}
.lista-desc{margin-top:16px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.lista-lado .duenio{margin-top:22px;font-size:15px}
.lista-meta{margin-top:6px;font-size:14px;font-weight:600;color:var(--ink-3)}
.lista-lado .acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.codigo-bloque{display:grid;grid-template-columns:116px minmax(0,1fr);gap:4px 20px;align-items:center;margin-top:28px;padding:18px;border-radius:24px;background:var(--raised);border:1px solid var(--line)}
.codigo-bloque .qr{grid-row:1/span 3;width:116px;height:116px;padding:8px;border-radius:14px;background:var(--cream)}
.qr svg{display:block;width:100%;height:100%}
.codigo-bloque .ceja{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.codigo-grande{display:block;font-size:27px;font-weight:800;letter-spacing:.07em;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.15}
.codigo-grande i{font-style:normal;color:var(--ink-3);font-weight:600}
.codigo-bloque .btn{justify-self:start;margin-top:6px}
.codigo-ayuda{margin-top:12px;font-size:13px;line-height:1.55;color:var(--ink-3)}
.codigo-ayuda b{color:var(--ink-2);font-weight:700}
.lista-reportar{margin-top:22px}

.ranking{list-style:none;padding:0}
.puesto{display:grid;grid-template-columns:76px 112px minmax(0,1fr);gap:28px;width:100%;padding:28px 0;border:0;border-top:1px solid var(--line);background:none;text-align:left;align-items:start}
.ranking li:first-child .puesto{border-top:0;padding-top:0}
.puesto-num{font-size:46px;font-weight:800;line-height:.95;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--ink-4);transition:color .2s}
.puesto:hover .puesto-num,.puesto:focus-visible .puesto-num{color:var(--ink)}
.puesto:focus-visible{outline:0}.puesto:focus-visible .puesto-cartel{outline:3px solid var(--cream);outline-offset:3px}
.puesto-cartel{position:relative;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:var(--raised);box-shadow:0 14px 30px rgba(0,0,0,.4);transition:transform .25s var(--ease-out)}
.puesto:hover .puesto-cartel{transform:translateY(-2px)}
.puesto-cartel img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s var(--ease-out),transform .5s var(--ease-out)}
.puesto-cartel img.listo{opacity:1}
.puesto:hover .puesto-cartel img{transform:scale(1.03)}
.puesto-cartel .carta-letra{font-size:13px}
.puesto-texto{padding-top:4px;min-width:0}
.puesto-titulo{display:block;font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.puesto-meta{display:block;margin-top:6px;font-size:14px;font-weight:700;color:var(--ink-3)}
.puesto-sinopsis{margin-top:12px;max-width:62ch;font-size:15px;line-height:1.6;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.puesto-accion{display:block;width:fit-content;margin-top:14px;font-size:14px;font-weight:700;color:var(--ink);background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .25s var(--ease-out);padding-bottom:2px}
.puesto:hover .puesto-accion{background-size:100% 1.5px}
.ranking li:first-child .puesto{grid-template-columns:76px 168px minmax(0,1fr)}
.ranking li:first-child .puesto-num{font-size:64px;color:var(--ink)}
.ranking li:first-child .puesto-titulo{font-size:30px;letter-spacing:-.028em}
.lista-cierre{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink-3)}

/* ======================================================================= usuario */
.autor{position:relative}
.autor>.ambiente{height:560px}
.autor-cab{position:relative;z-index:1;display:flex;align-items:flex-end;gap:26px;padding:150px var(--safe) 0}
.autor-cab .avatar{width:96px;height:96px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.autor-cab .avatar .collateral-mark{--mark-size:44%;width:44%;height:44%}
.autor-cab h1{font-size:clamp(36px,4.4vw,64px);font-weight:800;letter-spacing:-.035em;line-height:1.02}
.autor-cab p{margin-top:8px;font-size:16px;font-weight:600;color:var(--ink-2)}
.autor .seccion{margin-top:72px}

/* ======================================================================= formularios */
.pantalla-hoja{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:120px var(--safe) 64px}
.pantalla-hoja .ambiente{bottom:0}
.hoja{position:relative;z-index:1;width:100%;max-width:440px;padding:40px 36px 34px;border-radius:34px;--v-tinte:var(--v-espeso);--v-sombra:0 40px 120px rgba(0,0,0,.5);transition:--luz-a .6s var(--ease-out)}
.hoja-marca{display:flex;justify-content:center;margin-bottom:22px}
.hoja-marca .collateral-mark{--mark-size:40px;width:40px;height:40px}
.hoja h1{font-size:32px;font-weight:800;letter-spacing:-.03em;text-align:center}
.hoja-intro{margin-top:8px;font-size:15px;line-height:1.55;color:var(--ink-2);text-align:center}
.campo{display:block;margin-top:18px;cursor:default}
.campo>span{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px 4px;font-size:13px;font-weight:700;color:var(--ink-2)}
.campo>span small{font-weight:600;color:var(--ink-3)}
.entrada{width:100%;height:54px;padding:0 18px;border:1px solid transparent;border-radius:16px;background:rgba(255,255,255,.07);font-size:16px;font-weight:600;outline:0;transition:border-color .16s,background .16s;cursor:text}
.entrada:hover{background:rgba(255,255,255,.09)}
.entrada:focus{border-color:var(--ink-3);background:rgba(255,255,255,.1)}
.entrada[aria-invalid=true]{border-color:var(--warn)}
.entrada-codigo{height:64px;text-align:center;font-size:24px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.entrada-codigo::placeholder{color:var(--ink-4);font-weight:700}
.prefijo{position:relative;display:block}
.prefijo>i{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-style:normal;font-weight:700;color:var(--ink-3);pointer-events:none}
.prefijo .entrada{padding-left:36px}
.ayuda{min-height:18px;margin:8px 0 0 4px;font-size:12px;font-weight:600;line-height:1.5;color:var(--ink-3)}
.ayuda.mal{color:var(--warn)}.ayuda.bien{color:var(--ok)}
.casilla{display:flex;gap:12px;align-items:center;margin-top:20px;font-size:14px;font-weight:600;color:var(--ink-2)}
.casilla input{width:20px;height:20px;margin:0;accent-color:var(--cream);flex-shrink:0}
.hoja .btn-crema{width:100%;margin-top:26px}
.hoja-pie{margin-top:20px;font-size:14px;font-weight:600;color:var(--ink-3);text-align:center}
.medidor{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:10px 4px 0}
.medidor i{height:4px;border-radius:2px;background:rgba(255,255,255,.1);transition:background .2s}
.medidor[data-n="1"] i:nth-child(-n+1),.medidor[data-n="2"] i:nth-child(-n+2){background:var(--warn)}
.medidor[data-n="3"] i:nth-child(-n+3){background:var(--cream)}
.medidor[data-n="4"] i{background:var(--ok)}
.nota-ejemplo{margin-top:24px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.04);font-size:12px;font-weight:600;line-height:1.55;color:var(--ink-3);text-align:center}
.listo-icono{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:rgba(127,209,166,.14);color:var(--ok);display:flex;align-items:center;justify-content:center}
.listo-icono svg{width:30px;height:30px}

/* ======================================================================= diálogos */
.capa-dialogo{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(4,5,7,.5);opacity:0;transition:opacity .16s linear}
.capa-dialogo.abierta{opacity:1;transition-duration:.36s}
.dialogo{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 40px);overflow:auto;padding:32px;border-radius:32px;--v-tinte:var(--v-espeso);
  transform:scale(.94);opacity:0;transition:transform .16s var(--ease-in),opacity .16s linear}
.capa-dialogo.abierta .dialogo{transform:none;opacity:1;transition:transform .55s var(--resorte-suave),opacity .22s linear}
.dialogo h2{font-size:24px;font-weight:800;letter-spacing:-.025em;padding-right:44px}
.dialogo>p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.dialogo .acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.cerrar{position:absolute;top:16px;right:16px;z-index:3;width:44px;height:44px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;--v-tinte:var(--v-fino);--v-sombra:0 6px 18px rgba(0,0,0,.25);transition:--v-tinte .16s,transform .6s var(--resorte),--luz-a .6s var(--ease-out)}
.cerrar:hover{--v-tinte:var(--v-fino-2)}
.cerrar:active{transform:scale(.9);transition-duration:.16s,.12s,.6s}
.cerrar svg{width:15px;height:15px}
.perfiles{display:grid;gap:8px;margin-top:20px}
.perfil-opcion{display:flex;align-items:center;gap:14px;width:100%;padding:10px 16px 10px 10px;border:0;border-radius:24px;background:var(--platter);text-align:left;font-size:16px;font-weight:700;transition:background .16s}
.perfil-opcion:hover{background:var(--platter-2)}
.perfil-opcion .avatar{width:44px;height:44px}
.perfil-opcion small{display:block;font-size:13px;font-weight:600;color:var(--ink-3)}
.perfil-opcion[aria-pressed=true]{background:var(--cream);color:var(--on-cream)}
.perfil-opcion[aria-pressed=true] small{color:rgba(11,12,15,.6)}
.motivos{display:grid;gap:8px;margin-top:18px}
.motivos label{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--platter);font-size:15px;font-weight:600}
.motivos input{width:18px;height:18px;margin:0;accent-color:var(--cream)}
.dialogo-ficha{max-width:680px;padding:0;overflow:hidden auto}
.ficha-fondo{position:relative;aspect-ratio:16/8.4}
.ficha-imagen{position:absolute;inset:0;background:center 22%/cover;-webkit-mask-image:linear-gradient(to bottom,#000 38%,rgba(0,0,0,.55) 66%,transparent 98%);mask-image:linear-gradient(to bottom,#000 38%,rgba(0,0,0,.55) 66%,transparent 98%)}
.ficha-logo{position:absolute;left:32px;bottom:8px;z-index:1;max-width:56%;max-height:110px;object-fit:contain;object-position:left bottom}
.ficha-cuerpo{padding:16px 32px 32px}
.ficha-cuerpo h2{padding-right:0}
.ficha-meta{margin-top:6px;font-size:15px;font-weight:700;color:var(--ink-2)}
.ficha-cuerpo p{margin-top:14px;font-size:15px;line-height:1.6;color:var(--ink-2)}

/* ======================================================================= visor (firma de la marca) */
#visor{position:fixed;left:0;top:0;width:0;height:0;z-index:40;pointer-events:none;opacity:0;transition:opacity .16s var(--ease-out)}
#visor.on{opacity:1}
#visor i{position:absolute;left:0;top:0;width:28px;height:28px;transition:transform .24s var(--ease)}
#visor.rapido i{transition-duration:0ms}
#visor i b{position:absolute;display:block;background:var(--cream);border-radius:2px;box-shadow:0 2px 10px rgba(0,0,0,.4)}
#visor .tl .h{left:0;top:0;width:28px;height:4px}#visor .tl .v{left:0;top:0;width:4px;height:28px}
#visor .br .h{right:0;bottom:0;width:28px;height:4px}#visor .br .v{right:0;bottom:0;width:4px;height:28px}
#visor.pulsa i b{background:var(--accent)}
@media (hover:none),(pointer:coarse){#visor{display:none}}

/* ======================================================================= avisos y estados */
.aviso{position:fixed;right:var(--safe);top:84px;z-index:80;max-width:min(420px,calc(100vw - 40px));padding:14px 20px;border-radius:22px;--v-tinte:var(--v-espeso);
  --v-sombra:0 20px 60px rgba(0,0,0,.5);font-size:15px;font-weight:600;line-height:1.45;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .22s var(--ease-out),transform .22s var(--ease-out)}
.aviso.visible{opacity:1;transform:none;transition:opacity .22s var(--ease-out),transform .55s var(--resorte-suave)}
main.sale{opacity:0;transition:opacity .16s var(--ease-in)}
main.entra{animation:entra .42s var(--ease-out) both}
@keyframes entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.vacio{min-height:76vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px var(--safe) 40px;text-align:center}
.vacio .collateral-mark{--mark-size:56px;width:56px;height:56px;opacity:.4;margin-bottom:30px}
.vacio h1{font-size:clamp(28px,3vw,40px);font-weight:800;letter-spacing:-.03em;max-width:20ch}
.vacio p{margin-top:10px;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:44ch}
.vacio .acciones{display:flex;justify-content:center;margin-top:26px}

/* ======================================================================= pie */
.pie{margin-top:120px}
.pie-in{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:28px var(--safe) 40px;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink-3)}
.pie-marca{display:block;width:84px;height:19px;color:var(--ink-3)}
.pie-marca svg{display:block;width:100%;height:100%}
.pie-ejemplo{margin-left:auto;padding:6px 12px;border-radius:14px;background:rgba(255,255,255,.05)}

/* ======================================================================= responsive */
@media (max-width:1100px){
  .rejilla-editorial{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rejilla-editorial .destacada{grid-row:auto}
  .tapa.destacada .tapa-arte{aspect-ratio:16/9;min-height:0}
  .indice-fila{grid-template-columns:52px 112px minmax(0,1fr) auto 24px}
  .indice-dato{display:none}
}
@media (max-width:960px){
  .portada{grid-template-columns:1fr;gap:28px;padding-top:112px;min-height:0}
  .portada-obra>a{width:min(100%,440px)}
  .lista-grid{grid-template-columns:1fr;gap:48px;padding-top:120px}
  .lista-lado{position:relative;top:auto}
  .seccion-cab{flex-direction:column;align-items:flex-start;gap:8px}
  .seccion-cab p{text-align:left}
  .pasos{grid-template-columns:1fr}
}
@media (max-width:720px){
  :root{--top:14px}
  .capsula{height:42px;padding:3px}
  .capsula-etiqueta{display:none}
  .disco{width:36px;height:36px}
  .disco .collateral-mark{left:8px;top:8px;--mark-size:20px;width:20px;height:20px}
  .firma{width:118px;height:26px;margin-left:-59px;top:calc(var(--top) + 8px)}
  .disco-perfil{width:42px;height:42px;padding:3px}.disco-perfil .avatar{width:36px;height:36px}
  .cabecera-der .btn{height:42px;padding:0 16px;font-size:14px;border-radius:21px}
  .cabecera-der .btn-crema{display:none}
  .seccion{margin-top:84px}
  .portada{padding-top:96px;padding-bottom:24px}
  .portada h1{font-size:clamp(34px,9.4vw,46px)}
  .portada-lead{font-size:16px}
  .portada-obra>a{width:86%}
  .campo-pildora{height:58px}
  .campo-pildora input{font-size:17px;padding:0 12px;letter-spacing:.08em}
  .rejilla-editorial,.rejilla-tapas{grid-template-columns:1fr;gap:36px}
  .rejilla-editorial .destacada{grid-column:auto}
  .tapa.destacada h3{font-size:22px}
  .indice-fila{grid-template-columns:30px 76px minmax(0,1fr);gap:14px;padding:16px 12px;margin:0 -12px}
  .indice-num{font-size:24px}
  .indice-fila .baraja{height:56px}
  .indice-fila .carta{width:34px}
  .indice-fila .chip-codigo,.indice-flecha{display:none}
  .indice-texto strong{font-size:16px}
  .lista-grid{padding-top:100px}
  .codigo-bloque{grid-template-columns:96px minmax(0,1fr)}
  .codigo-bloque .qr{width:96px;height:96px}
  .codigo-grande{font-size:23px}
  .puesto{grid-template-columns:34px 76px minmax(0,1fr);gap:14px;padding:20px 0}
  .puesto-num{font-size:24px}
  .puesto-texto{padding-top:0}
  .puesto-titulo{font-size:17px}
  .puesto-sinopsis{-webkit-line-clamp:2;font-size:14px;margin-top:8px}
  .puesto-accion{display:none}
  .ranking li:first-child .puesto{grid-template-columns:34px 112px minmax(0,1fr)}
  .ranking li:first-child .puesto-num{font-size:34px}
  .ranking li:first-child .puesto-titulo{font-size:21px}
  .autor-cab{flex-direction:column;align-items:flex-start;gap:16px;padding-top:110px}
  .autor-cab .avatar{width:72px;height:72px}
  .hoja{padding:32px 22px 26px;border-radius:30px}
  .dialogo{padding:28px 22px}
  .ficha-cuerpo{padding:14px 22px 26px}.ficha-logo{left:22px}
  .pie-ejemplo{margin-left:0}
  .aviso{top:auto;bottom:20px;right:20px;left:20px;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}