/* Convergencia: la entrada en diagonal (B) con la luz y la tipografía de "Del mediodía a medianoche" (P4),
   dentro del header y el footer del sitio. Mobile-first: todo se diseña a 390 px y crece desde ahí.
   Tipografía del sitio: Newsreader para títulos y lectura, Archivo para la interfaz, IBM Plex Mono para datos. */
:root{
  --hueso:#efe8dc; --tinta:#221b16; --pizarra:#5c5046; --cobre:#a2531f; --c-dia:#24503f; --c-noche:#3a2a6e;
  --serif:'Newsreader',Georgia,'Times New Roman',serif; --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --top:calc(env(safe-area-inset-top,0px) + 56px);
  --fondo:var(--hueso); --cielo:var(--hueso); --texto:var(--tinta); --suave:var(--pizarra); --acento:var(--c-dia); --raya:rgba(34,27,22,.22); --sobre-acento:var(--hueso); --neon:#48c08a;
  --papel-foto:#fbf8f1; --tinta-foto:#3a3330;
  color-scheme:light;
}
/* Un solo sistema de color, heredado de la entrada y de la sala: todo el blog vive sobre el marfil del sitio
   y el turno se nota en lo mismo que en la sala: el panel (verde pino o azul noche) y el neón. Nada de tonos propios */
:root{--claro:var(--hueso)}
.t-gambito,.lado.gambito{--panel:var(--c-dia);--neon:#48c08a;--neon-claro:#7fe0b0}
.t-daemon,.lado.daemon{--panel:var(--c-noche);--neon:#b46cff;--neon-claro:#d5b0ff}
/* Las páginas del edificio que no son columnas (privacidad y 404) usan la misma cabecera del índice, cada una con su panel y su neón */
.t-privacidad{--panel:#1c2848;--neon:#7fa6ff;--neon-claro:#cfdcff}
.t-404{--panel:#121418;--neon:#b9c4d4;--neon-claro:#eef2f8}
.t-gambito,.t-daemon,.t-privacidad,.t-404{--fondo:var(--hueso);--cielo:var(--hueso);--texto:var(--tinta);--suave:var(--pizarra);--acento:var(--panel);--raya:rgba(34,27,22,.16);--sobre-acento:var(--hueso);
  --tinte:color-mix(in srgb,var(--neon) 11%,var(--hueso));--borde-panel:color-mix(in srgb,var(--neon) 45%,transparent)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--tinta)}
body{margin:0;background:var(--cielo);color:var(--texto);font:400 1.125rem/1.55 var(--sans);-webkit-font-smoothing:antialiased;padding-top:var(--top)}
a{color:inherit}
:focus-visible{outline:3px solid var(--cobre);outline-offset:3px}

.salto{position:fixed;left:12px;top:-60px;z-index:40;background:var(--hueso);color:var(--tinta);padding:10px 14px;border-radius:8px;font:600 16px var(--sans)}.salto:focus{top:12px}

/* ---------- Footer del sitio ---------- */
.pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:22px 16px calc(env(safe-area-inset-bottom,0px) + 28px);background:var(--tinta);color:#c8c2b8;font:400 15.5px/1.4 var(--sans)}

/* ---------- Umbral: un ambiente más del edificio sobre el marfil de la portada ----------
   La sala en corte lleva su placa de latón; a su lado, la frase de la portada es el selector. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.en-umbral{background:var(--hueso)}
.umbral{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:.9rem;min-height:calc(100svh - var(--top));padding:.75rem 16px 2rem;background:var(--hueso);color:var(--tinta);overflow:hidden}
/* El edificio continúa: la sala del blog es un piso más, y arriba y abajo se insinúan los pisos vecinos
   (fachada y losas) con trazo tenue. Solo CSS; --piso lo fija blog.js con el alto real de la sala */
.diorama{isolation:isolate;--piso:300px;--fachada:rgba(34,27,22,.32);--losa:rgba(34,27,22,.22);--cuerpo:rgba(34,27,22,.08)}
.diorama::before,.diorama::after{content:"";position:absolute;left:4.2%;right:4.6%;height:calc(var(--piso) * 2.2);z-index:-1;pointer-events:none;border-inline:1.5px solid var(--fachada)}
.diorama::before{bottom:99%;background:repeating-linear-gradient(to top,transparent 0 calc(var(--piso) - 16px),var(--losa) calc(var(--piso) - 16px) var(--piso)),var(--cuerpo);-webkit-mask-image:linear-gradient(to top,#000 45%,transparent);mask-image:linear-gradient(to top,#000 45%,transparent)}
.diorama::after{top:97%;background:repeating-linear-gradient(to bottom,transparent 0 calc(var(--piso) - 16px),var(--losa) calc(var(--piso) - 16px) var(--piso)),var(--cuerpo);-webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent);mask-image:linear-gradient(to bottom,#000 45%,transparent)}
.lead p{grid-area:1/1;margin:0;transition:opacity .3s}
.lead p:not(.on){visibility:hidden;opacity:0}
.sala{position:relative;margin:0;display:grid;justify-items:center;view-transition-name:sala}
.diorama{position:relative;width:100%;aspect-ratio:572/411;max-height:34svh}
.diorama canvas,.diorama .poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.diorama .poster{object-fit:contain;transition:opacity .4s}
.diorama canvas{opacity:0;transition:opacity .5s}
.diorama.viva canvas{opacity:1}
.diorama.viva .poster{opacity:0}
.sala .placa{margin-top:-1.2rem}
.kick{margin:0 0 .5rem;font:500 13px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cobre)}
.eleccion{width:100%;max-width:36rem;margin:0 auto}
.opciones{list-style:none;margin:0;padding:0}
.opcion{display:grid;grid-template-columns:1.7rem 1fr;align-items:center;gap:.3rem;min-height:44px;padding:0;text-decoration:none;color:rgba(34,27,22,.54);font:500 clamp(1.3rem,6.3vw,3.1rem)/1.1 var(--serif);letter-spacing:-.015em;text-wrap:balance;transition:color .2s;outline-offset:2px}
.opcion:hover{color:rgba(34,27,22,.72)}
.opcion.activa{color:var(--tinta)}
.opcion b{font-weight:600}
.opcion.activa b{color:var(--panel)}
.opcion .mano{width:1.55rem;height:auto;opacity:0;transition:opacity .15s}
.opcion.activa .mano{opacity:1;animation:apunta .6s steps(2) infinite}
@keyframes apunta{50%{transform:translateX(4px)}}
.lead{display:grid;margin:.7rem 0 0;max-width:34rem;text-wrap:pretty;padding-left:14px;border-left:3px solid var(--panel);transition:border-color .4s;font:400 17px/1.5 var(--sans);color:var(--pizarra)}
.columna{margin-top:.8rem;display:flex;justify-content:flex-end}
.que{font:500 1.0625rem/1.3 var(--sans);color:var(--tinta);background:none;border:0;padding:0;min-height:44px;cursor:pointer;text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(34,27,22,.5)}
/* "Leer blog" toma el color del turno, con el ícono claro, el latido, el brillo y el salto al pasar del botón de la portada */
.btn.ir{position:relative;isolation:isolate;overflow:hidden;margin-left:auto;min-height:56px;padding:5px 6px 5px 20px;gap:14px;border-color:var(--panel);background:var(--panel);color:var(--hueso);transition:background .45s,border-color .45s,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.btn.ir::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s ease}
.btn.ir:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px var(--neon)}
.btn.ir:hover::after{transform:translateX(120%)}
.btn.ir:hover i{animation:pulso .55s cubic-bezier(.3,1.5,.5,1) both}
.btn.ir .t{display:grid;line-height:1.15}
.btn.ir .t b{font-weight:700;font-size:17px}
.btn.ir .t small{font:500 13px/1.2 var(--mono);letter-spacing:.03em;opacity:.75}
.btn.ir i{background:var(--hueso);border-color:var(--hueso);color:var(--panel);transition:transform .35s cubic-bezier(.3,1.5,.5,1),color .45s;animation:latido 2.8s ease-in-out infinite}
@media (max-width:51.99rem){.diorama::before,.diorama::after{display:none}}
@media (min-width:52rem){
  .umbral{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;align-content:center;gap:2.5rem;min-height:calc(100svh - var(--top) - 94px);padding:1.5rem 32px}
  .eleccion{margin:0;justify-self:start}
  .kick{margin-bottom:.9rem}
  .lead{margin-top:1rem;font-size:17.5px;line-height:1.55}
  .columna{margin-top:1.1rem}
  .opcion{font-size:clamp(1.7rem,2.3vw,2.5rem)}
  .diorama{max-height:calc(100svh - var(--top) - 94px - 6rem)}
  .opcion{min-height:48px;grid-template-columns:1.9rem 1fr;gap:.35rem}
}
::view-transition-group(sala){animation-duration:.5s;animation-timing-function:cubic-bezier(.4,0,.2,1)}

/* ---------- Umbral P3, la línea entre turnos: la pantalla entera es la elección ----------
   Un corte en diagonal: el verde pino del día con el caballo y el violeta de la noche con el cursor, en neón y enfrentados.
   El lado señalado (mouse, foco o primer toque) empuja la línea y gana terreno; al elegir, se come la pantalla */
@property --x{syntax:'<percentage>';inherits:true;initial-value:50%}
.duelo{--x:50%;position:relative;height:max(calc(100svh - var(--top)),700px);overflow:hidden;background:var(--tinta);color:var(--hueso);transition:--x .6s cubic-bezier(.3,.8,.3,1)}
.duelo.g{--x:56%}.duelo.d{--x:44%}
.duelo.toma-g{--x:130%;transition-duration:.55s}.duelo.toma-d{--x:-30%;transition-duration:.55s}
.lado{position:absolute;inset:0;display:block;text-decoration:none;color:var(--hueso);-webkit-tap-highlight-color:transparent;outline-offset:-6px}
.lado:focus-visible{outline-color:var(--hueso)}
.lado.gambito{background:radial-gradient(circle at 24% 50%,color-mix(in srgb,var(--neon) 22%,var(--panel)),var(--panel) 46%,color-mix(in srgb,var(--panel) 75%,#000))}
.lado.daemon{background:radial-gradient(circle at 76% 50%,color-mix(in srgb,var(--neon) 20%,var(--panel)),var(--panel) 46%,color-mix(in srgb,var(--panel) 70%,#000));
  clip-path:polygon(calc(var(--x) + 7%) 0,100% 0,100% 100%,calc(var(--x) - 7%) 100%)}
/* El filo de la diagonal: una línea de marfil, el color del edificio que separa los dos turnos */
.filo{position:absolute;inset:0;pointer-events:none;background:var(--hueso);opacity:.9;
  clip-path:polygon(calc(var(--x) + 7% - 3px) 0,calc(var(--x) + 7% + 3px) 0,calc(var(--x) - 7% + 3px) 100%,calc(var(--x) - 7% - 3px) 100%);filter:blur(.5px)}
.lado .cont{position:absolute;top:50%;translate:0 -50%;width:34%;display:grid;gap:.7rem;transition:opacity .35s}
.lado.gambito .cont{left:5%;justify-items:start}
.lado.daemon .cont{right:5%;justify-items:end;text-align:right}
/* Los íconos de la cabecera (grilla de 12 x 12) en tubo de neón: núcleo claro y halo del color de la columna */
.icono{display:block;width:clamp(150px,17vw,250px);height:auto;overflow:visible;color:color-mix(in srgb,var(--neon-claro) 70%,transparent);filter:drop-shadow(0 0 2px var(--neon)) drop-shadow(0 0 8px color-mix(in srgb,var(--neon) 50%,transparent));transition:color .3s,filter .3s,transform .5s cubic-bezier(.3,1.5,.5,1)}
.duelo .nom,.pc .nom{font:500 clamp(2.4rem,4.6vw,4rem)/1 var(--serif);letter-spacing:-.01em;color:color-mix(in srgb,var(--neon-claro) 75%,transparent);text-shadow:0 0 6px color-mix(in srgb,var(--neon) 60%,transparent);transition:color .3s,text-shadow .3s}
.lado-t{font:600 13px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--hueso)}
.lado .frase{display:block;max-width:22rem;min-height:2.5em;font:italic 400 clamp(1.25rem,1.9vw,1.6rem)/1.25 var(--serif)}
.lado .btn.ir{margin-top:.4rem}
.lado:hover .btn.ir::after{transform:translateX(120%)}
.cab-t{display:grid;gap:.5rem}
.lado.gambito .cab-t{justify-items:start}.lado.daemon .cab-t{justify-items:end}
/* El lado que gana se enciende; el otro se apaga */
.duelo.g .gambito .icono,.duelo.d .daemon .icono{color:var(--neon-claro);filter:drop-shadow(0 0 3px var(--neon)) drop-shadow(0 0 14px var(--neon)) drop-shadow(0 0 40px var(--neon));transform:scale(1.06);animation:tubo .8s steps(1) 1}
.duelo.g .gambito .nom,.duelo.d .daemon .nom{color:var(--neon-claro);text-shadow:0 0 4px var(--neon),0 0 16px var(--neon),0 0 36px var(--neon)}
.duelo.g .daemon .cont,.duelo.d .gambito .cont{opacity:.4}
@keyframes tubo{0%{opacity:.5}15%{opacity:1}25%{opacity:.5}35%,100%{opacity:1}}
/* La placa del blog, clavada sobre la línea: la misma placa de latón de las salas */
.duelo .placa{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;margin:0;pointer-events:none;white-space:nowrap;transition:left .6s cubic-bezier(.3,.8,.3,1),opacity .3s}
.duelo.g .placa{left:56%}.duelo.d .placa{left:44%}
.duelo[class*=toma] .placa{opacity:0}
/* Teléfono: el corte pasa a ser horizontal, día arriba y noche abajo */
@media (max-width:51.99rem){
  .duelo.g{--x:55%}.duelo.d{--x:45%}
  .lado.gambito{background:radial-gradient(circle at 30% 22%,color-mix(in srgb,var(--neon) 22%,var(--panel)),var(--panel) 50%,color-mix(in srgb,var(--panel) 75%,#000))}
  .lado.daemon{background:radial-gradient(circle at 70% 78%,color-mix(in srgb,var(--neon) 20%,var(--panel)),var(--panel) 50%,color-mix(in srgb,var(--panel) 70%,#000));
    clip-path:polygon(0 calc(var(--x) + 4%),100% calc(var(--x) - 4%),100% 100%,0 100%)}
  .filo{clip-path:polygon(0 calc(var(--x) + 4% - 3px),100% calc(var(--x) - 4% - 3px),100% calc(var(--x) - 4% + 3px),0 calc(var(--x) + 4% + 3px))}
  .lado .cont{width:auto;left:16px!important;right:16px!important;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
  .lado.gambito .cont{top:22%;justify-items:start}
  .lado.daemon .cont{top:78%;justify-items:start;text-align:left}
  .lado .icono{grid-row:span 2;width:104px}
  .lado.daemon .icono{grid-column:2;grid-row:1/span 2}
  .lado.daemon .cab-t{grid-column:1;grid-row:1/span 2;justify-self:end;justify-items:end;text-align:right}
  .lado.gambito .cab-t{justify-items:start}
  .duelo .nom{font-size:2.5rem}
  .cab-t{gap:.3rem}
  .lado .frase,.lado .btn.ir{grid-column:1/-1}
  .lado.daemon .frase{text-align:right;justify-self:end}
  .lado.daemon .btn.ir{justify-self:end}
  .duelo .placa{left:50%!important;top:var(--x);transition:top .6s cubic-bezier(.3,.8,.3,1),opacity .3s}
}

/* ---------- Índice: el turno elegido se quedó con la cabecera ----------
   Su ícono gigante en neón, el nombre, la frase, de qué trata y el guiño; del otro turno queda una cuña en la esquina para cambiar */
.pc{position:relative;overflow:hidden;margin:0 -16px;padding:2.6rem 16px 7rem;color:var(--hueso);background:radial-gradient(circle at 80% 40%,color-mix(in srgb,var(--neon) 22%,var(--panel)),var(--panel) 45%,color-mix(in srgb,var(--panel) 75%,#000))}
.pc-in{position:relative;max-width:64rem;margin:0 auto;display:grid;gap:.8rem}
.pc .icono{width:clamp(128px,36vw,300px);color:var(--neon-claro);filter:drop-shadow(0 0 3px var(--neon)) drop-shadow(0 0 16px var(--neon)) drop-shadow(0 0 46px var(--neon))}
.pc .nom{color:var(--neon-claro);text-shadow:0 0 4px var(--neon),0 0 16px var(--neon),0 0 36px var(--neon)}
.pc-texto{display:grid;gap:1rem;justify-items:start}
.pc .lado-t{margin-top:-.2rem}
.pc h1{margin-top:.4rem!important}
.pc .guino{margin-top:.2rem}
.pc h1{margin:0;font:500 clamp(1.9rem,7.4vw,3.2rem)/1.08 var(--serif);letter-spacing:-.015em;text-wrap:balance;max-width:34rem}
.pc .sobre{margin:0;max-width:34rem;font:400 1.125rem/1.55 var(--sans);color:color-mix(in srgb,var(--hueso) 88%,transparent)}
.pc .guino{font-size:1.0625rem;color:color-mix(in srgb,var(--hueso) 74%,transparent)}
/* La cuña del otro turno, en su color: es la puerta para cambiar */
.cuna{position:absolute;right:0;bottom:0;width:min(78%,30rem);height:5.6rem;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 16px 14px;text-decoration:none;color:var(--hueso);background:var(--panel);clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
.cuna>span{display:inline-flex;align-items:center;gap:12px;min-height:48px;font:600 17px var(--sans)}
.cuna svg{width:44px;height:44px;border-radius:50%;color:var(--neon-claro);background:rgba(0,0,0,.25);box-shadow:0 0 0 1.5px var(--neon),0 0 16px -2px var(--neon);transition:box-shadow .3s}
.cuna:hover svg,.cuna:focus-visible svg{box-shadow:0 0 0 2px var(--neon),0 0 26px 2px var(--neon)}
.cuna:focus-visible{outline-color:var(--hueso);outline-offset:-6px}
.pc+.marco{padding-top:2.4rem}
/* De qué trata la página: va en el cuerpo, no en la cabecera, como el primer párrafo de una columna */
.intro{margin:0 0 2rem;max-width:34rem;font:400 1.25rem/1.55 var(--serif);color:var(--tinta);text-wrap:pretty}
.intro+.guino{margin:-1.2rem 0 2rem}
/* Sin cuña (privacidad y 404) la cabecera no necesita el alto extra de abajo */
.pc.sin-cuna{padding-bottom:2.6rem}
/* Desde 448 px la cabecera ya va en dos columnas (texto e ícono): apilada solo en el teléfono, sin mitad vacía en escritorio angosto */
@media (min-width:28rem){
  .pc-in{grid-template-columns:1fr auto;align-items:center;column-gap:1.5rem}
  .pc .icono{grid-column:2;grid-row:1;width:clamp(96px,26vw,300px)}
  .pc-texto{grid-column:1;grid-row:1}
}
@media (min-width:52rem){
  .pc{margin-inline:-32px;padding:3rem 32px 6.5rem}
  .pc.sin-cuna{padding-bottom:3rem}
  .pc-in{column-gap:3rem}
  .pc .icono{width:clamp(128px,36vw,300px)}
  .cuna>span{padding-right:16px}
}

/* ---------- Camino: índice y entrada, una sola plantilla con la luz de cada camino ---------- */
.camino{padding-inline:16px}
.marco{position:relative;max-width:38rem;margin:0 auto;padding-block:0 4.5rem}
.sala-indice{margin:1.2rem auto 0;max-width:30rem;view-transition-name:sala}
.sala-indice img{display:block;width:100%;height:auto}
.placa{position:relative;z-index:1;display:inline-block;margin:-1.2rem auto 0;padding:10px 26px 8px;text-align:center;background:linear-gradient(170deg,#e6cf98,#b8924f 55%,#9c7a3e);color:#241b0e;border-radius:4px;border:3px solid #6e5428;box-shadow:0 16px 30px -14px rgba(0,0,0,.7),inset 0 0 0 2px rgba(255,240,200,.6),inset 0 -3px 0 rgba(80,58,24,.35)}
.placa::before,.placa::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#7a5d2c;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.placa::before{left:9px}
.placa::after{right:9px}
.placa b{display:block;font:600 21px/1.1 var(--serif);letter-spacing:.01em;text-shadow:0 1px 0 rgba(255,240,200,.5)}
.placa span{display:block;margin-top:3px;font:500 13px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#3a2c14}
.centro{text-align:center}
.sobre{margin:.8rem 0 0;color:var(--suave);font-size:1.0625rem;max-width:32rem}
.indice{list-style:none;margin:.75rem 0 0;padding:0}
.item{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:1rem;text-decoration:none;padding-block:1.15rem;min-height:44px}
.indice>li{border-top:1px solid var(--raya)}
.indice>li.nueva,.indice>li.nueva+li,.etiqueta+.indice>li:first-child{border-top:0}
.item small{font:500 .8125rem/1 var(--mono);color:var(--suave);font-variant-numeric:tabular-nums}
.item strong{display:block;font:500 1.45rem/1.22 var(--serif);letter-spacing:-.005em;margin:.4rem 0 .2rem;text-wrap:balance}
.item-t{min-width:0}
.item-t>span{color:var(--suave);font:italic 400 1.0625rem/1.4 var(--serif)}
/* Miniatura: la misma polaroid, chica y sin fecha; se endereza al pasar */
.mini{display:block;width:4.4rem;padding:4px 4px 12px;background:var(--papel-foto);box-shadow:0 8px 14px -8px rgba(34,27,22,.55),0 1px 2px rgba(34,27,22,.2);transform:rotate(-2.5deg);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
li:nth-child(even) .mini{transform:rotate(2deg)}
.mini img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;filter:sepia(.1) saturate(1.05)}
.item:hover .mini{transform:rotate(0) scale(1.04)}
@media (min-width:40rem){.mini{width:5.6rem;padding:5px 5px 15px}}
/* En pantalla ancha la polaroid cuelga en el margen y los títulos siguen en el borde del hero */
@media (min-width:64rem){.item{grid-template-columns:6.4rem minmax(0,1fr);column-gap:1.6rem;margin-left:-8rem}.mini{justify-self:end}}
.item:hover strong{text-decoration:underline;text-decoration-color:var(--acento);text-underline-offset:5px}
/* La más reciente: misma forma que las demás, sobre el color de la pared del turno y con su etiqueta */
.nueva .item{margin-inline:calc(50% - 50vw);padding:1.2rem calc(50vw - 50%) 1.3rem;border-block:1px solid var(--borde-panel);background:var(--tinte)}
.rel{display:block;margin-bottom:.45rem;font:600 .75rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acento)}
.tag{display:table;margin-bottom:.6rem;padding:4px 9px 3px;border-radius:999px;background:var(--panel);color:var(--claro);font:600 .75rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
/* Hero de la colección: la misma ficha que el sitio pone bajo cada placa, en la columna del índice para que todo empiece en el mismo borde.
   El índice es otra sección, debajo, sobre marfil y con su propia cabecera */
.camino{overflow-x:clip}
.ficha{margin:0 -16px;padding:0 16px 2.6rem;background:var(--panel);color:var(--claro)}
.ficha .placa{margin-top:-2.1rem}
.ficha-in{max-width:38rem;margin:1.9rem auto 0;display:grid;gap:.9rem}
.ficha h1{margin:0;font:500 clamp(1.9rem,7.6vw,2.6rem)/1.08 var(--serif);letter-spacing:-.015em;text-wrap:balance;color:var(--claro)}
.ficha .sobre{margin:0;max-width:34rem;color:color-mix(in srgb,var(--claro) 84%,transparent);font:400 1.125rem/1.55 var(--sans)}
.ficha+.marco{padding-top:2.4rem}
/* El guiño: letra chica de créditos de cine, en el hero del índice y al cierre del texto */
.guino{margin:0;max-width:34rem;font:italic 400 .9375rem/1.45 var(--serif);color:var(--suave)}
.ficha .guino{color:color-mix(in srgb,var(--claro) 68%,transparent)}
.aparato+.guino{max-width:none;margin-top:1.4rem}
/* Cabecera del índice: su nombre y el total, sobre una línea firme */
.etiqueta{display:flex;justify-content:space-between;gap:1rem;margin:0 0 .4rem;padding-bottom:.7rem;border-bottom:2px solid var(--texto);font:500 .8125rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--texto)}
.etiqueta+.indice .nueva .item{margin-top:0}
@media (min-width:52rem){.ficha{margin-inline:-32px;padding:0 32px 3.2rem}.ficha-in{gap:1.1rem;margin-top:2.6rem}.ficha h1{font-size:3.1rem}.ficha .sobre{font-size:1.1875rem}}
/* Colección sin entradas: el aviso en su tono, con el botón del turno para enterarse de la primera */
.vacio{display:grid;justify-items:start;gap:.7rem;margin-top:1.6rem;padding:1.6rem 0 0}
.vacio>small{font:500 .8125rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acento)}
.vacio h2{margin:0;font:500 clamp(1.7rem,6.4vw,2.3rem)/1.15 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.indice>li.grupo{border-top:0;padding:1.4rem 0 .2rem}.indice>li.grupo h3{margin:0;font:500 .8125rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acento)}
.proximo{display:grid;gap:.3rem;margin:1rem 0 .4rem;padding:.9rem 1rem;border-left:4px solid var(--acento);background:rgba(34,27,22,.05)}
.proximo small{font:500 .75rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acento)}
.proximo span{font:500 1.1875rem/1.35 var(--serif);color:var(--texto)}
.rss{color:inherit;text-underline-offset:3px}
.vacio .o-rss{font:400 1rem/1.5 var(--sans);color:var(--suave);margin:.2rem 0 0}
.vacio p{margin:0 0 .6rem;max-width:34rem;font:400 1.1875rem/1.62 var(--serif);color:var(--texto)}
/* Paginador: los pasos en los extremos y los números al centro, todos de 44 px o más */
.paginas{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;margin-top:.5rem;border-top:1px solid var(--raya);padding-top:.6rem;font:600 .9375rem/1 var(--sans);white-space:nowrap}
.paginas .paso{min-height:48px;display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;color:var(--acento)}
.paginas .sig{justify-self:end}
.nums{display:flex;align-items:center;gap:.25rem}
.num{display:grid;place-items:center;min-width:44px;height:44px;border-radius:50%;font:500 .9375rem/1 var(--mono);text-decoration:none;color:var(--texto)}
a.num:hover{background:var(--raya)}
.num.actual{background:var(--texto);color:var(--fondo)}
.nums .salto{width:1.2rem;text-align:center;color:var(--suave);font:500 .9375rem/1 var(--mono)}
@media (max-width:30rem){.paginas .paso span{display:none}.paginas .paso{min-width:44px;justify-content:center;font-size:1.2rem}}
/* Invitación a la otra colección: un aviso de revista en el panel de esa colección (verde pino o azul noche),
   con su sala a la izquierda, el neón en la etiqueta y el botón claro, como "Contacto" en el header */
.invita{display:grid;grid-template-columns:minmax(0,1fr);border-radius:18px;overflow:hidden;text-decoration:none;background:var(--panel);color:var(--claro);box-shadow:0 24px 40px -26px rgba(34,27,22,.55);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
/* La sala del aviso va sobre marfil, como en todo el blog, y ocupa todo el alto de su lado */
.invita .inv-ic{display:grid;place-items:center;padding:2.2rem 1rem 1.4rem;background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--neon) 24%,var(--panel)),var(--panel) 60%)}
.invita .icono{width:clamp(110px,30vw,150px);color:var(--neon-claro);filter:drop-shadow(0 0 3px var(--neon)) drop-shadow(0 0 14px var(--neon))}
.invita>div{display:grid;gap:.55rem;padding:1.3rem 1.25rem 1.4rem}
.invita small{font:500 .8125rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--neon-claro)}
.invita strong{font:500 clamp(1.6rem,6vw,2rem)/1.1 var(--serif);letter-spacing:-.01em}
.invita strong em{font-style:normal;font-weight:400}
.invita p{margin:0;color:color-mix(in srgb,var(--claro) 82%,transparent);font:400 1.0625rem/1.5 var(--sans)}
.invita .ult{font:italic 400 1.0625rem/1.4 var(--serif)}
.invita .btn.ir{justify-self:end;margin-top:.4rem;border-color:var(--claro);background:var(--claro);color:var(--tinta)}
.invita .btn.ir small,.lado .btn.ir small{color:inherit;font:500 13px/1.2 var(--mono);letter-spacing:.03em;text-transform:none;opacity:.75}
.lado .btn.ir{margin-left:0;border-color:var(--claro);background:var(--claro);color:var(--tinta)}
.invita .btn.ir i,.lado .btn.ir i{background:var(--panel);border-color:var(--panel);color:var(--claro)}
.invita:hover{transform:translateY(-3px);box-shadow:0 30px 46px -26px rgba(34,27,22,.6)}
.invita:hover .btn.ir::after{transform:translateX(120%)}
@media (min-width:40rem){.invita{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}.invita img{height:100%}}

/* Franja bajo el header: la vuelta al índice. Ocupa su propio espacio para no tapar el texto */
.banda{position:sticky;top:var(--top);z-index:20;display:flex;align-items:center;min-height:48px;padding:0 16px;background:var(--fondo);box-shadow:inset 0 -1px 0 var(--raya);color:var(--texto)}
.miga{font:600 .9375rem/1 var(--sans);text-decoration:none;min-height:48px;display:inline-flex;align-items:center;color:var(--acento)}

/* ---------- Entrada como columna de opinión: la colección, el título, la bajada y la firma entre dos líneas finas ---------- */
.cab{padding-block:2.6rem 0}
/* Palabras clave, como bajo el resumen de un paper */
.claves{margin:.85rem 0 0;font:400 .9375rem/1.5 var(--sans);color:var(--suave)}
.claves i{font-style:italic;color:var(--texto)}
/* Llamadas a nota: número volado en el color del panel */
.llamada{font:600 .68em/0 var(--sans);vertical-align:super}
.llamada a{color:var(--panel);text-decoration:none}
.llamada a:hover{text-decoration:underline}
/* Aparato del texto: notas, referencias y cómo citar, en letra chica bajo una línea, como al pie de un paper */
.aparato{clear:both;margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--raya);font:400 .9375rem/1.55 var(--sans);color:var(--suave)}
.aparato h2{margin:1.3rem 0 .45rem;font:600 .75rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--texto)}
.aparato h2:first-child{margin-top:0}
.notas{margin:0;padding-left:1.4rem}
.notas li{margin:.2rem 0;scroll-margin-top:calc(var(--top) + 64px)}
.notas li::marker{color:var(--panel);font-weight:600}
.notas i{color:var(--texto)}
.volver{color:var(--panel);text-decoration:none;padding-inline:4px}
.refs{margin:0;padding:0;list-style:none}
.refs li{padding-left:2em;text-indent:-2em;scroll-margin-top:calc(var(--top) + 64px)}
.refs li:target,.refs li:focus{color:var(--texto)}
/* Cita de autor y año, enlazada a la referencia */
.cita-autor{color:inherit;text-decoration:underline;text-decoration-color:var(--raya);text-underline-offset:3px}
.cita-autor:hover{text-decoration-color:var(--panel)}
/* Figura adicional al estilo APA: número en negrita y título en cursiva arriba, nota abajo, al ancho de la columna */
.figura{clear:both;margin:2.2rem 0}
.figura figcaption{display:grid;gap:.15rem;margin-bottom:.8rem;font:400 1rem/1.35 var(--sans)}
.figura figcaption b{font-weight:700}
.figura svg{display:block;width:100%;max-width:26rem;height:auto;font-family:var(--sans)}
.figura .et{font-size:15px;font-weight:600;fill:var(--texto)}
.figura .guia{stroke:var(--raya);stroke-width:1}
.figura .sem{font-size:13px;fill:var(--suave);text-anchor:middle;font-family:var(--mono)}
.figura .fecha{stroke:var(--cobre);stroke-width:2;stroke-dasharray:4 3}
.figura .ft{font-size:13px;fill:var(--cobre);font-family:var(--mono)}
.figura rect.espera{fill:none;stroke:var(--suave);stroke-width:1.5;stroke-dasharray:5 4}
.figura rect.nuestra{fill:var(--panel)}
.figura rect.prov{fill:var(--tinte);stroke:var(--borde-panel)}
.figura .bt{font-size:14.5px;fill:var(--texto)}
.figura .bt.nuestra{fill:var(--claro)}
.fnota{margin:.6rem 0 0;font:400 .875rem/1.45 var(--sans);color:var(--suave)}
.citar{margin:0;padding-left:2em;text-indent:-2em;overflow-wrap:anywhere}
.llamada a,.volver{scroll-margin-top:calc(var(--top) + 64px)}
.kick-col{margin:0;font:600 .8125rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--panel)}
.cab h1{margin:.75rem 0 .8rem;font:500 clamp(2.3rem,9.4vw,3.5rem)/1.04 var(--serif);letter-spacing:-.018em;text-wrap:balance}
.cab .bajada{margin:0;font:italic 400 1.3rem/1.4 var(--serif);color:var(--suave);text-wrap:pretty}
.autor{margin:1.5rem 0 0;padding-block:.75rem;border-block:1px solid var(--raya);font:400 .875rem/1.5 var(--mono);color:var(--suave);font-variant-numeric:tabular-nums}
/* La primera letra, capitular de dos líneas en el color del panel (con tres, un primer párrafo corto la deja colgando) */
.texto>p:first-child::first-letter{float:left;margin:.08em .1em 0 0;font:500 3.3em/.82 var(--serif);color:var(--panel)}
@supports (initial-letter:2) or (-webkit-initial-letter:2){.texto>p:first-child::first-letter{float:none;margin:0 .12em 0 0;font-size:1em;line-height:inherit;-webkit-initial-letter:2;initial-letter:2}}
/* La polaroid del recuerdo, en el cuerpo: papel de foto, la fecha a mano y un leve giro.
   Se revela al llegar a ella, como una instantánea: de gris oscuro a la foto */
.polaroid{margin:2.2rem auto;width:min(16rem,72vw);padding:10px 10px 0;background:var(--papel-foto);box-shadow:0 18px 30px -16px rgba(34,27,22,.6),0 2px 5px rgba(34,27,22,.2);transform:rotate(-2deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.polaroid:hover{transform:rotate(0) translateY(-3px)}
.revela{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#2f332d}
.revela img{display:block;width:100%;height:100%;object-fit:cover;filter:sepia(.1) saturate(1.05) contrast(.97)}
.revela::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 36px rgba(20,14,8,.4)}
.polaroid.revelando img{animation:revela 3.2s cubic-bezier(.3,.1,.3,1) both}
@keyframes revela{0%{filter:brightness(.18) sepia(.8) saturate(.15) contrast(.6) blur(2px)}55%{filter:brightness(.8) sepia(.45) saturate(.6) contrast(.85) blur(.4px)}100%{filter:sepia(.1) saturate(1.05) contrast(.97)}}
.polaroid figcaption{padding:.55rem .3rem .8rem;text-align:center;text-wrap:balance;font:500 1.4rem/1.05 'Caveat','Bradley Hand','Segoe Print',cursive;color:var(--tinta-foto)}
/* En pantalla ancha la foto se apoya a la derecha y sale de la columna, como en el diario */
@media (min-width:64rem){.texto .polaroid{float:right;width:17rem;margin:.5rem -8rem 1.4rem 2rem;transform:rotate(2deg)}}
.texto{margin-top:2.2rem;font:400 1.1875rem/1.68 var(--serif)}
.texto p{margin:0 0 1.2rem}
.texto h2{font:500 1.5rem/1.2 var(--serif);letter-spacing:-.01em;margin:2.25rem 0 .7rem}
/* La cita lleva la misma raya del panel que el texto de la colección en la entrada al blog */
.cita{margin:2rem 0;padding-left:1.1rem;border-left:3px solid var(--panel);font:400 1.75rem/1.25 var(--serif);letter-spacing:-.01em;text-wrap:balance}
/* El concepto lleva cursiva, como un término en una columna */
.termino{font-style:italic}
/* Cierre: la pregunta y la firma en el panel del turno, a todo el ancho, con el texto en la columna */
.firma{margin:3rem calc(50% - 50vw) 0;padding:2.4rem calc(50vw - 50%) 2.6rem;background:var(--panel);color:var(--claro)}
.firma small{font:500 .8125rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--neon-claro)}
.firma h2{margin:.7rem 0 1rem;font:500 clamp(1.7rem,6.6vw,2.3rem)/1.15 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.firma p{margin:0 0 1.2rem;font-size:1.0625rem;color:color-mix(in srgb,var(--claro) 86%,transparent)}
.firma .btn{border-color:var(--claro);color:var(--claro)}
.firma .btn.pri{background:var(--claro);color:var(--tinta)}
.firma .btn.pri i{background:var(--panel);border-color:var(--panel);color:var(--claro)}
.firma .aviso{color:color-mix(in srgb,var(--claro) 75%,transparent);margin-bottom:0}
.sigue{margin-top:3.2rem}
.tambien{margin-top:5.5rem}
.tambien .invita{margin-top:1.4rem}
.paginas+.tambien{margin-top:5rem}
/* Barra de lectura: el neón del turno avanza bajo la miga */
.banda.leyendo::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--neon);box-shadow:0 0 8px var(--neon);transform-origin:left;transform:scaleX(var(--avance,0))}
.acc{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:5px 6px 5px 18px;border-radius:999px;border:1.5px solid var(--texto);background:transparent;color:var(--texto);font:600 1rem/1 var(--sans);text-decoration:none;cursor:pointer}
.btn i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid currentColor}
.btn i svg{width:16px;height:16px}
.btn.pri{background:var(--texto);color:var(--fondo)}
.btn.pri i{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
.aviso{margin:.6rem 0 0;font:400 .875rem/1.4 var(--mono);color:var(--suave);min-height:1.4em;word-break:break-all}

@media (min-width:52rem){
  .camino{padding-inline:32px}
  .banda{padding-inline:32px}
  /* Fuera del artículo, la vuelta queda en el mismo borde que la cabecera y el cuerpo */
  .banda:not(.leyendo){padding-inline:max(32px,calc((100% - 64rem) / 2))}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.hito s{transform:scaleX(1)}.hito q{transform:rotate(45deg) scale(1)}}

/* La franja de la más reciente también cuelga su polaroid en el margen (va al final para ganarle a la franja) */
@media (min-width:64rem){.nueva .item{padding-left:calc(50vw - 50% - 8rem)}}

@media (prefers-reduced-motion:reduce){.btn .ic,.btn.ir i,.btn-404 i{animation:none!important}}

/* El destino del salto recibe el foco sin dibujar un marco alrededor de toda la página */
[tabindex="-1"]:focus{outline:none}