/* Huella Fría · estilos de la portada
   Sistema: la marca es fría (noche, tinta, papel frío); cada expediente trae su color (N.º 01: vino).
   Noche sale de las sombras de la foto de la sala de cubas, para que la foto se funda con el fondo. */

@font-face{font-family:"Source Serif 4";src:url("/assets/fuentes/source-serif-4.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/assets/fuentes/source-serif-4-italic.woff2") format("woff2");font-weight:400 500;font-style:italic;font-display:swap}
@font-face{font-family:"Plex Condensada";src:url("/assets/fuentes/plex-sans-condensed-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Condensada";src:url("/assets/fuentes/plex-sans-condensed-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --noche:#080e0e;
  --noche-2:#111b1a;
  --escarcha:#e6eceb;
  --niebla:#9fadaa;
  --niebla-clara:#c3cecb;
  --papel:#e8edeb;
  --tinta:#13201f;
  --acero:#4f5c5a;
  --vino:#7b2232;
  --regla:rgba(19,32,31,.16);
  --regla-noche:rgba(230,236,235,.14);

  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --ui:"Plex Condensada","Arial Narrow",system-ui,sans-serif;

  --margen:clamp(1.25rem,5vw,4rem);
  --ancho:76rem;
  --borde-izq:max(var(--margen),calc((100vw - var(--ancho)) / 2));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--serif);font-size:1.125rem;line-height:1.6;font-optical-sizing:auto;font-kerning:normal;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
p+p{margin-top:1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--vino);outline-offset:3px;border-radius:2px}
.oscuro :focus-visible{outline-color:var(--escarcha)}

.contenedor{width:min(100% - 2 * var(--margen),var(--ancho));margin-inline:auto}

.saltar{position:absolute;left:var(--margen);top:-4rem;z-index:20;background:var(--escarcha);color:var(--noche);font:600 1rem/1 var(--ui);padding:.8rem 1rem;text-decoration:none}
.saltar:focus{top:1rem}

/* ---------- Botones y enlaces ---------- */
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.75rem 1.4rem;border-radius:2px;font:600 1.0625rem/1.1 var(--ui);letter-spacing:.01em;text-decoration:none;background:var(--tinta);color:var(--papel);border:1.5px solid var(--tinta);transition:background-color .2s,color .2s}
.boton:hover{background:#24363a;border-color:#24363a}
.oscuro .boton{background:var(--escarcha);color:var(--noche);border-color:var(--escarcha)}
.oscuro .boton:hover{background:#fff;border-color:#fff}
.enlace{font:500 1.0625rem/1.4 var(--ui);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;text-decoration-color:currentColor}
.enlace:hover{text-decoration-thickness:2px}

/* ---------- Cabecera ---------- */
.cabecera{position:absolute;inset:0 0 auto;z-index:10;display:flex;align-items:center;gap:2rem;padding:1.25rem var(--borde-izq);color:var(--escarcha)}
.marca{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--serif);font-weight:600;font-size:1.3125rem;letter-spacing:.005em;font-variation-settings:"opsz" 32}
.marca svg{width:1.9rem;height:1.9rem;flex:none}
.nav{display:none;gap:1.75rem;margin-left:auto}
.nav a,.cabecera .nav-expediente{font:500 1rem/1 var(--ui);text-decoration:none;color:var(--niebla-clara)}
.nav a:hover,.cabecera .nav-expediente:hover{color:var(--escarcha)}
.cabecera .nav-expediente{margin-left:auto;padding:.65rem .9rem;border:1px solid var(--regla-noche);border-radius:2px;color:var(--escarcha)}
@media (min-width:60rem){
  .nav{display:flex}
  .cabecera .nav-expediente{margin-left:.5rem}
}

/* ---------- Portada ---------- */
.portada{position:relative;background:var(--noche);color:var(--escarcha);min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
.portada-texto{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;padding:6.25rem var(--margen) 2rem}
.portada-caso{font:500 1rem/1.3 var(--ui);color:var(--niebla-clara);margin-bottom:1rem}
.portada-caso i{font-family:var(--serif);font-style:italic;font-size:1.125rem}
.portada h1{font-size:clamp(2.5rem,1.1rem + 4.2vw,5.1rem);line-height:1.02;letter-spacing:-.018em;font-weight:400;font-variation-settings:"opsz" 60;max-width:16ch}
.portada h1 span{display:block;text-wrap:balance}
.portada h1 span+span{margin-top:.12em}
.portada-bajada{margin-top:1.4rem;font-size:1.1875rem;line-height:1.55;color:var(--niebla-clara);max-width:34rem}
.portada .acciones{margin-top:auto;padding-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.portada-foto{position:absolute;inset:0;margin:0}
.portada-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.portada-foto::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,14,14,.9) 0%,rgba(8,14,14,.78) 38%,rgba(8,14,14,.3) 58%,rgba(8,14,14,0) 66%,rgba(8,14,14,0) 74%,rgba(8,14,14,.92) 100%)}
.linterna{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity 1.6s ease-out .2s;
  background:
    radial-gradient(circle at var(--lx,40%) var(--ly,78%),rgba(255,222,180,.13) 0,rgba(255,222,180,0) 20%),
    radial-gradient(circle at var(--lx,40%) var(--ly,78%),rgba(8,14,14,0) 0,rgba(8,14,14,0) 20%,rgba(8,14,14,.42) 62%)}
.rotulo{display:none}
/* Momento de entrada: la foto aparece desde la oscuridad y después se prende la linterna. Sin JS se ve todo de inmediato. */
.js .linterna{opacity:0}
.js .portada-foto picture{opacity:0;transition:opacity 1.4s ease-out}
.lista .linterna,.lista .portada-foto picture{opacity:1}


@media (min-width:60rem){
  .portada{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
  .portada-texto{grid-column:1;justify-content:center;padding:8rem 3rem 4rem var(--borde-izq)}
  .portada .acciones{margin-top:2.4rem;padding-top:0}
  .portada-caso{display:none}
  .portada-foto{position:relative;inset:auto;grid-column:2;min-height:100svh}
  .portada-foto::after{background:
      linear-gradient(90deg,var(--noche) 0%,rgba(8,14,14,.6) 12%,rgba(8,14,14,0) 30%),
      linear-gradient(180deg,rgba(8,14,14,.5) 0%,rgba(8,14,14,0) 22%,rgba(8,14,14,0) 62%,rgba(8,14,14,.85) 100%)}
  .rotulo{display:flex;flex-direction:column;position:absolute;z-index:2;left:clamp(2rem,5vw,4.5rem);bottom:3.25rem;gap:.15rem}
  .rotulo span{font:500 .9375rem/1.3 var(--ui);color:var(--niebla)}
  .rotulo strong{font-family:var(--serif);font-style:italic;font-weight:500;font-size:2.125rem;line-height:1.15;color:var(--escarcha)}
}

/* ---------- Secciones ---------- */
.seccion{padding-block:clamp(4.5rem,9vw,8.5rem)}
.oscuro{background:var(--noche);color:var(--escarcha)}
.seccion h2{font-size:clamp(2.25rem,1rem + 3.4vw,4rem);line-height:1.04;letter-spacing:-.014em;font-variation-settings:"opsz" 60}
.lead{font-size:1.3125rem;line-height:1.5}
.dato{font:500 1rem/1.3 var(--ui);color:var(--acero)}
.oscuro .dato{color:var(--niebla)}

/* El caso */
.caso-cabeza{display:grid;gap:3rem}
.caso-texto .lead{margin-top:1.75rem;max-width:36rem}
.caso-texto p:not(.lead):not(.dato){color:var(--niebla-clara);max-width:36rem}
.caso-texto .dato{margin-bottom:.9rem}
.victima{display:flex;gap:1.1rem;align-items:center;margin:2.25rem 0 0}
.victima img{width:5.5rem;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.victima figcaption{font:500 1rem/1.4 var(--ui);color:var(--niebla)}
.victima strong{display:block;font-family:var(--serif);font-weight:600;font-size:1.125rem;color:var(--escarcha)}
.ficha{display:flex;flex-wrap:wrap;gap:1.25rem 2.5rem;margin:2.25rem 0 0;padding-top:1.5rem;border-top:1px solid var(--regla-noche)}
.ficha div{display:flex;flex-direction:column}
.ficha dt{font:500 .9375rem/1.3 var(--ui);color:var(--niebla)}
.ficha dd{margin:0;font-weight:600;font-size:1.25rem}
.caso-foto{margin:0}
.caso-foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.caso-foto figcaption{margin-top:.75rem;font:500 .9375rem/1.4 var(--ui);color:var(--niebla)}
@media (min-width:60rem){
  .caso-cabeza{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(3rem,6vw,6rem);align-items:center}
}

.involucrados{margin-top:clamp(4.5rem,9vw,7.5rem)}
.cita{margin:0;max-width:44rem}
.cita p{font-style:italic;font-weight:500;font-size:clamp(1.5rem,1rem + 1.7vw,2.25rem);line-height:1.3;text-indent:-.42em}
.cita footer{margin-top:1rem;font:500 1rem/1.3 var(--ui);color:var(--niebla)}
.retratos{list-style:none;margin:2.75rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1rem}
.retratos figure{margin:0}
.retratos img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--noche-2)}
.retratos figcaption{margin-top:.75rem;display:flex;flex-direction:column;gap:.1rem}
.retratos strong{font-weight:600;font-size:1.0625rem;line-height:1.3}
.retratos span{font:500 .9375rem/1.35 var(--ui);color:var(--niebla)}
.involucrados .dato{margin-top:2rem}
@media (min-width:40rem){.retratos{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.25rem 1.25rem}}
@media (min-width:68rem){.retratos{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* Cómo se juega */
.juego-grid{display:grid;gap:3rem}
.juego .lead{margin-top:1.5rem;max-width:34rem}
.pasos{list-style:none;margin:0;padding:0;counter-reset:paso;display:grid;gap:2rem;max-width:36rem}
.pasos li{counter-increment:paso;display:grid;grid-template-columns:3.25rem minmax(0,1fr);column-gap:.75rem}
.pasos li::before{content:counter(paso);grid-row:1 / span 2;font-size:2.5rem;line-height:1;color:var(--vino);font-variation-settings:"opsz" 60;font-weight:400}
.pasos h3{font-weight:600;font-size:1.375rem;line-height:1.3;font-variation-settings:"opsz" 24}
.pasos p{margin-top:.35rem;color:var(--tinta)}
.juego-pasos .dato{margin-top:2.5rem}
.expediente{margin:0;align-self:start}
.hojas{position:relative;aspect-ratio:1/1.04;max-width:40rem;margin-inline:auto}
.hoja{position:absolute;background:#fff;box-shadow:0 1px 1px rgba(19,32,31,.10),0 10px 26px -6px rgba(19,32,31,.28)}
.hoja-plano{width:76%;left:21%;top:0;transform:rotate(3.5deg)}
.hoja-instrucciones{width:57%;left:1%;top:10%;transform:rotate(-4deg)}
.hoja-carta{width:57%;left:41%;top:22%;transform:rotate(2.5deg)}
.expediente figcaption{margin-top:1.5rem;font:500 1rem/1.45 var(--ui);color:var(--acero);max-width:30rem;margin-inline:auto}
@media (min-width:60rem){
  .juego-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"cabeza hojas" "pasos hojas";column-gap:clamp(3rem,6vw,6rem);row-gap:2.75rem;align-items:start}
  .juego-cabeza{grid-area:cabeza}
  .juego-pasos{grid-area:pasos}
  .expediente{grid-area:hojas;position:sticky;top:3rem;margin-top:1rem}
}

/* Comprar: la oferta va en noche, para que se distinga del resto */
.oferta{display:grid;gap:3rem}
.oferta-principal .dato{margin-bottom:.9rem}
.oferta h2 i{font-style:italic}
.oferta-bajada{margin-top:1.5rem;max-width:34rem;color:var(--niebla-clara)}
.precio{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem}
.precio strong{font-weight:400;font-size:clamp(3rem,2rem + 3vw,4.25rem);line-height:1;letter-spacing:-.015em;font-variation-settings:"opsz" 60}
.precio span{font:500 1.0625rem/1.3 var(--ui);color:var(--niebla-clara)}
.oferta-principal .boton{margin-top:2rem}
.letra-chica{margin-top:1.25rem;max-width:34rem;font:500 1rem/1.5 var(--ui);color:var(--niebla-clara)}
.letra-chica+.letra-chica{margin-top:.9rem}
.letra-chica a{color:var(--escarcha)}
.incluye-titulo{font:600 1rem/1.3 var(--ui);color:var(--niebla);margin-bottom:1rem}
.incluye{list-style:none;margin:0;padding:0;border-top:1px solid var(--regla-noche)}
.incluye li{padding:1.1rem 0 1.15rem;border-bottom:1px solid var(--regla-noche);color:var(--niebla-clara)}
.incluye strong{display:block;margin-bottom:.2rem;font-weight:600;font-size:1.1875rem;color:var(--escarcha)}
@media (min-width:60rem){
  .oferta{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(3rem,6vw,6rem);align-items:start}
  .oferta-detalle{padding-top:2.4rem}
}

/* Otras formas de jugar */
.formas-lista{list-style:none;margin:3rem 0 0;padding:0;display:grid;gap:2.5rem}
.formas-lista li{border-top:2px solid var(--tinta);padding-top:1.25rem;display:flex;flex-direction:column;align-items:flex-start;scroll-margin-top:2rem}
.formas-lista h3{font-weight:600;font-size:1.5rem;line-height:1.25;font-variation-settings:"opsz" 30}
.formas-lista p{margin-top:.6rem}
.formas-lista .estado{margin-top:1.1rem;font:600 1rem/1.3 var(--ui);color:var(--acero)}
.formas-lista .boton,.formas-lista .enlace{margin-top:1.25rem}
@media (min-width:52rem){.formas-lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 3rem;max-width:58rem}}

/* Preguntas */
.preguntas{border-top:1px solid var(--regla)}
.preguntas-grid{display:grid;gap:2.5rem}
.faq{border-top:1px solid var(--regla)}
.faq details{border-bottom:1px solid var(--regla)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;padding:1.15rem 0;font-weight:600;font-size:1.1875rem;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 1.5rem/1 var(--ui);color:var(--acero);flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.35rem;max-width:40rem}
@media (min-width:60rem){.preguntas-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(3rem,6vw,6rem)}}

/* Páginas de texto, como las condiciones de compra */
.cabecera-fija{position:relative;background:var(--noche)}
.legal{padding-block:clamp(3.5rem,7vw,6rem) clamp(4.5rem,9vw,7.5rem)}
.legal-grid{display:grid;gap:2.5rem}
.legal h1{font-size:clamp(2.25rem,1rem + 3.4vw,3.75rem);line-height:1.05;letter-spacing:-.014em;font-variation-settings:"opsz" 60}
.legal-cabeza .dato{margin-top:1rem}
.legal-cabeza .lead{margin-top:1.5rem;max-width:30rem}
.indice{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--regla)}
.indice ol{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.indice a{font:500 1rem/1.35 var(--ui);color:var(--acero);text-decoration:none}
.indice a:hover{color:var(--tinta);text-decoration:underline;text-underline-offset:.2em}
.legal-texto{max-width:42rem}
.legal-texto section{scroll-margin-top:2rem}
.legal-texto section+section{margin-top:2.75rem;padding-top:2.25rem;border-top:1px solid var(--regla)}
.legal-texto h2{font-weight:600;font-size:1.5rem;line-height:1.25;font-variation-settings:"opsz" 30;margin-bottom:.8rem}
.legal-texto ul{margin:1em 0 0;padding-left:1.2rem}
.legal-texto li+li{margin-top:.5em}
.legal-texto a{text-decoration-thickness:1px;text-underline-offset:.2em}
@media (min-width:60rem){
  .legal-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(3rem,6vw,6rem)}
  .legal-cabeza{position:sticky;top:2.5rem;align-self:start}
}

/* Pie */
.pie{background:var(--noche);color:var(--escarcha);padding-block:4rem 3rem}
.pie-grid{display:grid;gap:2.25rem}
.pie .marca{font-size:1.5rem}
.pie .marca svg{width:2.2rem;height:2.2rem}
.pie-lema{margin-top:.6rem;color:var(--niebla-clara)}
.pie-enlaces{display:flex;flex-direction:column;gap:.6rem;font:500 1rem/1.4 var(--ui);color:var(--niebla-clara)}
.pie-enlaces a{color:var(--escarcha)}
.pie-legal{grid-column:1 / -1;padding-top:1.75rem;border-top:1px solid var(--regla-noche);font:500 .875rem/1.5 var(--ui);color:var(--niebla)}
.pie-legal p+p{margin-top:.3rem}
@media (min-width:52rem){.pie-grid{grid-template-columns:minmax(0,1fr) auto;align-items:end}}

/* Detalles abiertos con transición donde el navegador lo permite */
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{height:0;overflow:hidden;transition:height .25s ease,content-visibility .25s allow-discrete}
  .faq details[open]::details-content{height:auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  .js .portada-foto picture,.js .linterna{opacity:1}
}