/* Huella Fría · páginas del Expediente N.º 01 (audios, pistas y verificación)
   Mismo sistema que la portada: la marca es fría (noche, papel, tinta) y el caso trae su color (vino).
   Tipografías propias en /assets/fuentes/. Se edita a mano; build.py no lo toca. */

@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;--escarcha:#e6eceb;--niebla:#9fadaa;
  --papel:#e8edeb;--hoja:#f6f8f7;--tinta:#13201f;--acero:#4f5c5a;
  --vino:#7b2232;--vino-2:#952c3e;--regla:rgba(19,32,31,.14);
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --ui:"Plex Condensada","Arial Narrow",system-ui,sans-serif;
}
[hidden]{display:none !important}
*{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:18px;line-height:1.6;font-optical-sizing:auto;font-kerning:normal}
a{color:inherit}
:focus-visible{outline:3px solid var(--vino);outline-offset:2px;border-radius:2px}

/* Encabezado: sello de la marca y nombre del caso */
.top{background:var(--noche);color:var(--escarcha)}
.top-in{max-width:720px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;gap:14px}
.top :focus-visible{outline-color:var(--escarcha)}
.sello{display:inline-flex;flex:none;color:var(--escarcha)}
.sello svg{width:30px;height:30px}
.marca{color:var(--escarcha);text-decoration:none;display:flex;flex-direction:column;min-width:0}
.marca .caso{font:500 13px/1.3 var(--ui);color:var(--niebla)}
.marca .nombre{font-family:var(--serif);font-style:italic;font-weight:500;font-size:21px;line-height:1.25}

main{max-width:720px;margin:0 auto;padding:28px 16px 48px}
h1{font-weight:400;font-size:40px;line-height:1.05;letter-spacing:-.012em;margin:4px 0 12px;font-variation-settings:"opsz" 60;text-wrap:balance}
h2{font-weight:600;font-size:21px;line-height:1.3;margin:2px 0 10px;font-variation-settings:"opsz" 24;text-wrap:balance}
h2.mt{margin-top:22px}
.intro{color:var(--acero);margin:0 0 24px}

.card{background:var(--hoja);border:1px solid var(--regla);border-radius:4px;padding:20px 18px;margin:0 0 16px}
.num{font:600 14px/1 var(--ui);color:var(--vino);margin-bottom:8px}
.meta{font:500 15px/1.4 var(--ui);color:var(--acero);margin:-4px 0 12px}
audio{width:100%;margin:4px 0 8px}
details summary{cursor:pointer;font:600 16px/1.4 var(--ui);color:var(--vino);padding:6px 0}
details summary .sub{font-weight:500;color:var(--acero)}
details p{margin:10px 0}

/* Pistas */
.nivel{border-top:1px solid var(--regla);padding-top:12px;margin-top:12px}
.nivel .et{font:600 14px/1 var(--ui);color:var(--acero);margin-bottom:6px}
.nivel.resp .et{color:var(--vino)}
.nivel p{margin:0}
.candado{border-color:var(--vino);border-width:1.5px}
.candado p{margin:0 0 14px}
.candado label{display:block;font:600 15px/1.3 var(--ui);color:var(--acero);margin-bottom:6px}
.fila{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.fila input{flex:1 1 12rem;min-width:0;min-height:46px;padding:10px 12px;font:400 18px/1.2 var(--serif);color:var(--tinta);background:#fff;border:1.5px solid var(--acero);border-radius:2px}
.fila input:focus-visible{outline:3px solid var(--vino);outline-offset:1px}
.fila .btn{margin-top:0}
.abiertas{font:500 15px/1.4 var(--ui);color:var(--acero);margin:-8px 0 20px}

/* Botones y opciones */
.btn{display:inline-flex;align-items:center;justify-content:center;margin-top:14px;background:var(--vino);color:#fff;border:1.5px solid var(--vino);border-radius:2px;padding:11px 18px;font:600 17px/1.1 var(--ui);cursor:pointer;min-height:46px}
.btn:hover{background:var(--vino-2);border-color:var(--vino-2)}
.btn.sec{background:transparent;color:var(--vino)}
.btn.sec:hover{background:rgba(123,34,50,.06)}
.op{display:flex;gap:10px;align-items:flex-start;padding:10px 4px;border-bottom:1px solid var(--regla);cursor:pointer;font-size:17px}
.op input{margin-top:6px;accent-color:var(--vino);width:18px;height:18px;flex:0 0 18px}
.aviso{margin-top:12px;color:var(--vino);font:600 16px/1.4 var(--ui)}
.elegido{font:500 16px/1.4 var(--ui);color:var(--acero);margin-bottom:6px}
#paso2 .btn.sec{margin-left:10px}

/* Resultado de la verificación */
#resultado h2{font-size:24px;font-weight:500;font-variation-settings:"opsz" 36}
#resultado.ok{border-color:var(--vino);border-width:2px}
#resultado .estado{font:600 15px/1.2 var(--ui);color:var(--vino);margin-bottom:10px}

/* Inicio del caso */
.hero h1{font-size:44px}
.hero p{font-size:20px;line-height:1.55}
.menu{display:grid;gap:12px;margin-top:22px}
.menu a{display:flex;flex-direction:column;gap:2px;background:var(--hoja);border:1px solid var(--regla);border-left:3px solid var(--vino);border-radius:2px;padding:16px 18px;text-decoration:none;color:var(--tinta)}
.menu a:hover{background:#fff}
.menu a b{font-weight:600;font-size:21px;line-height:1.3}
.menu a span{font:500 16px/1.4 var(--ui);color:var(--acero)}

.pie{max-width:720px;margin:0 auto;padding:0 16px 32px;font:500 14px/1.5 var(--ui);color:var(--acero)}
.pie a{color:var(--tinta)}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto !important}}