/* =========================================================================
   Escape room de Halloween — escena scroll world, app «La Vela» y bloques del post.
   Mismos tokens del tema (main.css). Sin estilos en línea (CSP style-src 'self').
   ========================================================================= */

/* ---------- Escena: estado estático (sin JS / ahorro de datos / sin WebGL) ---------- */
.hw-escena { position: relative; height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); min-height: 560px; background: #060607; }
.hw-escena__pin { position: relative; height: 100%; overflow: hidden; isolation: isolate; }
.hw-escena__poster, .hw-escena__poster img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hw-escena__poster img { object-fit: cover; object-position: 42% 50%; }
.hw-escena__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .5s ease; }
.hw-escena__velo {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(90deg, rgba(6,6,8,.9) 0%, rgba(6,6,8,.62) 30%, rgba(6,6,8,.12) 58%, transparent 72%),
    linear-gradient(180deg, rgba(6,6,8,.35) 0%, transparent 18%, transparent 78%, var(--bg) 100%);
}
.hw-acto { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; pointer-events: none; }
.hw-acto a, .hw-acto button, .hw-acto .breadcrumbs { pointer-events: auto; }
.hw-acto--1, .hw-acto--2, .hw-acto--3, .hw-acto--4 { display: none; }
.hw-acto__caja { padding-block: var(--space-3); }
.hw-acto--0 .breadcrumbs { padding-top: 0; margin-bottom: var(--space-2); }
.hw-meta { margin-bottom: 14px; }
.hw-h1 {
  font-size: clamp(2.05rem, 1.15rem + 3.6vw, 5.2rem); line-height: 1.04; max-width: 15.5ch;
  letter-spacing: -0.025em; color: var(--tiza);
  text-shadow: 0 2px 24px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.6);
}
.hw-cta { margin-top: var(--space-2); }
.hw-cta .cta-group { margin-block: var(--space-2) var(--space-1); }
.hw-cta .cta-micro { margin-top: 0; color: var(--tiza-2); text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.hw-desliza { display: none; }

/* ---------- Escena viva ---------- */
.hw-escena--viva { height: 520vh; height: 520svh; }
.hw-escena--viva .hw-escena__pin { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); }
.hw-escena--viva.hw-escena--lista .hw-escena__lienzo { opacity: 1; }
.hw-escena--viva.hw-escena--lista .hw-escena__poster { opacity: 0; transition: opacity .6s ease .1s; }
.hw-escena--viva .hw-acto--1, .hw-escena--viva .hw-acto--2, .hw-escena--viva .hw-acto--3, .hw-escena--viva .hw-acto--4 { display: flex; opacity: 0; visibility: hidden; }
.hw-escena--viva .hw-desliza { display: inline-flex; align-items: center; gap: 12px; margin-top: var(--space-3); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--tiza-2); }
.hw-desliza span { position: relative; width: 1px; height: 38px; background: rgba(255,255,255,.18); overflow: hidden; }
.hw-desliza span::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: linear-gradient(var(--luz), transparent); animation: hw-gota 1.8s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes hw-gota { to { top: 110%; } }

.hw-acto--1, .hw-acto--2, .hw-acto--3 { align-items: flex-end; justify-content: center; padding: 0 clamp(20px, 6vw, 80px) clamp(64px, 14vh, 150px); text-align: center; }
.hw-acto--1 > *, .hw-acto--2 > *, .hw-acto--3 > * { max-width: 22ch; }
.hw-acto--1, .hw-acto--2, .hw-acto--3 { flex-direction: column; justify-content: flex-end; align-items: center; }
.hw-acto--1 .hw-acto__k, .hw-acto--2 .hw-acto__k, .hw-acto--3 .hw-acto__k { max-width: none; }
.hw-acto__k { font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--luz); margin-bottom: 12px; text-shadow: 0 1px 10px rgba(0,0,0,.9); }
.hw-acto__t {
  font-size: clamp(1.55rem, 1rem + 2.4vw, 2.9rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; color: var(--tiza);
  text-shadow: 0 2px 30px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.8); text-wrap: balance;
}
.hw-acto--1 .hw-acto__t, .hw-acto--2 .hw-acto__t, .hw-acto--3 .hw-acto__t { max-width: 24ch; }
.hw-acto--4 { justify-content: center; align-items: flex-end; padding-bottom: clamp(70px, 12vh, 140px); }
.hw-acto4 { text-align: center; padding: 0 20px; }
.hw-acto4 .hw-acto__t { max-width: 20ch; margin-inline: auto; }
.hw-acto4__btns { justify-content: center; margin-top: var(--space-3); }
.hw-riel { display: none; }
.hw-escena--viva .hw-riel { display: block; position: absolute; right: clamp(14px, 2.4vw, 34px); top: 50%; width: 2px; height: 28vh; transform: translateY(-50%); background: rgba(255,255,255,.1); border-radius: 2px; z-index: 3; }
.hw-riel__barra { position: absolute; inset: 0; transform-origin: 50% 0; transform: scaleY(0); background: linear-gradient(var(--luz), var(--rojo-vivo)); box-shadow: 0 0 12px var(--rojo-vivo); border-radius: 2px; }
.hw-saltar { display: none; }
.hw-escena--viva .hw-saltar { display: block; position: absolute; right: clamp(14px, 2.4vw, 34px); bottom: 18px; z-index: 3; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tiza-2); text-decoration: none; padding: 10px 4px; }
.hw-saltar:hover, .hw-saltar:focus-visible { color: var(--luz-2); }

@media (max-aspect-ratio: 9/10), (max-width: 760px) {
  .hw-escena__poster img { object-position: 50% 50%; }
  .hw-escena__velo { background: linear-gradient(180deg, rgba(6,6,8,.55) 0%, rgba(6,6,8,.2) 26%, rgba(6,6,8,.15) 46%, rgba(6,6,8,.82) 72%, var(--bg) 100%); }
  .hw-acto--0 { align-items: flex-end; }
  .hw-acto__caja { padding-bottom: clamp(18px, 5vh, 44px); padding-right: 46px; }
  .hw-cta .cta-micro { text-align: left; }
  .hw-h1 { font-size: clamp(1.85rem, 1.1rem + 4.6vw, 2.6rem); max-width: 17ch; }
  .hw-acto--0 .breadcrumbs { display: none; }
  .hw-escena--viva { height: 440vh; height: 440svh; }
  .hw-cta .btn { min-height: 50px; }
  .hw-escena--viva .hw-desliza { margin-top: var(--space-2); }
  .hw-escena--viva .hw-riel { height: 20vh; top: 34%; }
}
@media (max-width: 760px) {
  .hw-escena--viva .hw-escena__pin { height: calc(100vh - var(--header-h) - 60px); height: calc(100svh - var(--header-h) - 60px); }
  .hw-escena { height: calc(100svh - var(--header-h) - 60px); }
  .hw-escena--viva { height: 440svh; }
  .hw-escena--viva .hw-saltar { bottom: 8px; }
  .hw-cta .cta-group { gap: 10px; }
  .hw-cta .btn { flex: 1 1 100%; }
}

/* ---------- Bloques del post ---------- */
.hw-prose { max-width: 74ch; margin-inline: auto; padding-top: var(--space-4); }
.hw-respuesta {
  position: relative; padding: 22px 24px; margin-bottom: var(--space-4);
  border: 1px solid var(--line); border-left: 3px solid var(--luz); border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255,179,107,.07), rgba(23,23,27,.6) 55%);
}
.hw-respuesta__tag { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--luz); margin-bottom: 8px; }
.hw-respuesta p:last-child { margin-bottom: 0; color: var(--tiza); }
.hw-prose > p, .hw-prose > ul, .hw-prose > ol { margin-bottom: 1.1em; }
.hw-prueba { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px 20px; margin-block: 14px; background: var(--bg-2); }
.hw-prueba__titulo { color: var(--tiza); margin-bottom: 6px; }
.hw-prueba details { margin-top: 10px; }
.hw-prueba summary { cursor: pointer; color: var(--luz); font-weight: 700; font-size: .92rem; list-style: none; }
.hw-prueba summary::-webkit-details-marker { display: none; }
.hw-prueba summary::before { content: '▸ '; display: inline-block; transition: transform .2s ease; }
.hw-prueba details[open] summary::before { transform: rotate(90deg); }
.hw-prueba details p { margin-top: 8px; padding: 12px 14px; background: var(--surface); border-radius: 10px; color: var(--tiza-2); }
.hw-espejo { display: inline-block; transform: scaleX(-1); font-family: var(--font-mono); font-weight: 700; letter-spacing: .12em; color: var(--tiza); background: var(--surface); padding: 2px 8px; border-radius: 6px; }
.hw-tabla-wrap { overflow-x: auto; margin-block: var(--space-2) var(--space-3); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.hw-tabla { font-family: var(--font-body); font-size: .93rem; }
.hw-tabla td:last-child { white-space: nowrap; color: var(--luz); font-family: var(--font-mono); }
.hw-tabla caption { padding: 12px 14px; }
.hw-faq { margin-top: var(--space-2); }

/* ---------- App «La Vela» ---------- */
.hw-app {
  position: relative; margin-block: var(--space-4) var(--space-5); padding: clamp(20px, 4vw, 40px);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 70% at 85% -10%, rgba(255,179,107,.14), transparent 60%),
    radial-gradient(90% 60% at -10% 110%, rgba(210,31,43,.16), transparent 60%),
    var(--bg-2);
  box-shadow: 0 30px 80px -40px rgba(210,31,43,.45), inset 0 1px 0 rgba(255,255,255,.04);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.hw-app::before {
  content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from 210deg, transparent 0 60%, rgba(255,46,59,.35), rgba(255,217,168,.4), transparent 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  padding: 1px;
}
.hw-app__k { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--luz); margin-bottom: 8px; }
.hw-app__h { margin: 0 0 8px; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.3rem); }
.hw-app__sub { color: var(--tiza-2); max-width: 60ch; }
.hw-app__pie { margin-top: var(--space-3); font-size: .72rem; color: var(--muted); letter-spacing: .08em; text-align: center; }
.hw-app__estatico { text-align: center; padding: var(--space-3) 0; }
.hw-pasos { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.hw-pasos li { position: relative; padding-top: 12px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; }
.hw-pasos li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 4px; background: var(--line); transition: background .4s ease, box-shadow .4s ease; }
.hw-pasos li.is-hecho::before { background: linear-gradient(90deg, var(--rojo), var(--luz)); }
.hw-pasos li.is-actual::before { background: var(--luz); box-shadow: 0 0 12px var(--luz); }
.hw-pasos li.is-hecho, .hw-pasos li.is-actual { color: var(--tiza-2); }
@media (max-width: 620px) { .hw-pasos li span { display: none; } .hw-pasos { gap: 4px; } }

.hw-pantalla { animation: hw-entra .45s var(--ease-out) both; }
@keyframes hw-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hw-pregunta { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); font-weight: 800; color: var(--tiza); margin-bottom: var(--space-2); outline: none; }
.hw-opciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hw-opcion {
  flex: 1 1 180px; max-width: calc(33.333% - 8px); min-height: 76px; padding: 14px 16px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--tiza);
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
  transition: transform .2s var(--ease-snap), border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.hw-opcion strong { font-size: 1.05rem; }
.hw-opcion small { color: var(--muted); font-size: .85rem; }
.hw-opcion:hover, .hw-opcion:focus-visible { border-color: var(--luz); transform: translateY(-2px); box-shadow: 0 10px 30px -14px rgba(255,179,107,.5); outline: none; }
.hw-opcion.is-sel { border-color: var(--rojo-vivo); background: linear-gradient(140deg, rgba(210,31,43,.22), var(--surface)); }
@media (max-width: 700px) { .hw-opcion { max-width: calc(50% - 6px); flex-basis: 140px; } }
.hw-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: var(--space-3); }
.hw-atras, .hw-link { background: none; border: 0; color: var(--tiza-2); cursor: pointer; padding: 10px 4px; font-size: .95rem; text-decoration: underline; text-decoration-color: rgba(255,255,255,.2); text-underline-offset: 4px; min-height: 44px; }
.hw-atras:hover, .hw-link:hover { color: var(--luz-2); }
.hw-nota { color: var(--muted); font-size: .9rem; margin-top: 10px; text-align: center; }
.hw-vuelta { text-align: center; margin-bottom: var(--space-2); color: var(--tiza-2); }
.hw-contador { display: flex; align-items: center; justify-content: center; gap: 22px; }
.hw-mas { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--tiza); font-size: 1.6rem; cursor: pointer; transition: border-color .2s ease, transform .2s var(--ease-snap); }
.hw-mas:hover { border-color: var(--luz); transform: scale(1.06); }
.hw-num { font-family: var(--font-mono); font-size: 3.2rem; font-weight: 700; color: var(--tiza); min-width: 2ch; text-align: center; }
.hw-campo { display: flex; gap: 10px; max-width: 520px; margin-inline: auto; }
.hw-campo input, .hw-resp input {
  flex: 1; min-height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--tiza); font-size: 1.05rem;
}
.hw-campo input:focus, .hw-resp input:focus { outline: 2px solid var(--luz); outline-offset: 2px; border-color: transparent; }
.hw-campo input::placeholder, .hw-resp input::placeholder { color: #6f6b65; }
.hw-dado { width: 52px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 1.4rem; cursor: pointer; }
.hw-dado:hover { border-color: var(--luz); }

/* La vela jugable */
.hw-vela-juego { display: grid; grid-template-columns: 110px 1fr; gap: clamp(16px, 3vw, 34px); align-items: start; }
@media (max-width: 620px) { .hw-vela-juego { grid-template-columns: 64px 1fr; } }
.hw-vela { position: sticky; top: calc(var(--header-h) + 20px); height: 240px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
@media (max-width: 620px) { .hw-vela { height: 170px; } }
.hw-vela__cera {
  --h: 1; position: relative; width: 46%; height: calc(var(--h) * 82%); min-height: 14%;
  background: linear-gradient(90deg, #d9cfbf, #f6efe2 45%, #cfc3af); border-radius: 8px 8px 4px 4px;
  box-shadow: inset 0 -12px 18px rgba(0,0,0,.18), 0 0 40px rgba(255,179,107,.25); transition: height .25s linear;
}
.hw-vela__cera::before { content: ''; position: absolute; top: -2px; left: 18%; width: 24%; height: 26px; background: #efe6d6; border-radius: 0 0 10px 10px; }
.hw-vela__llama {
  position: absolute; left: 50%; bottom: 100%; width: 22px; height: 40px; margin-left: -11px; margin-bottom: 4px; border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 78%, #fff 0 18%, #ffe7a8 32%, #ffb36b 58%, rgba(255,46,59,.0) 74%);
  filter: drop-shadow(0 0 14px rgba(255,179,107,.95)) drop-shadow(0 0 40px rgba(255,120,60,.6));
  transform-origin: 50% 90%; animation: hw-llama 1.6s ease-in-out infinite alternate;
}
.hw-vela__llama::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 2px; height: 10px; margin-left: -1px; background: #2a2018; }
@keyframes hw-llama { 0% { transform: scale(1, 1) rotate(-2deg); } 35% { transform: scale(.94, 1.08) rotate(2deg); } 70% { transform: scale(1.04, .95) rotate(-1deg); } 100% { transform: scale(.98, 1.04) rotate(1.5deg); } }
.hw-vela__plato { width: 86%; height: 12px; border-radius: 50%; background: radial-gradient(#3a3330, #17171b); margin-top: -4px; }
.hw-apagada .hw-vela__llama { opacity: 0; transition: opacity .6s ease; }
.hw-apagada .hw-vela__cera { box-shadow: inset 0 -12px 18px rgba(0,0,0,.18); }
.hw-ganada .hw-vela__llama { animation-duration: .5s; filter: drop-shadow(0 0 22px #fff) drop-shadow(0 0 60px var(--luz)); }
.hw-enunciado { margin-block: 6px 14px; color: var(--tiza-2); }
.hw-enunciado p { margin-bottom: 8px; }
.hw-q { color: var(--tiza); font-weight: 700; }
.hw-resp { display: flex; gap: 10px; flex-wrap: wrap; }
.hw-resp .btn { flex: 0 0 auto; }
.hw-temblor { animation: hw-temblor .4s ease; }
@keyframes hw-temblor { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.hw-feedback { min-height: 1.5em; margin-top: 12px; color: var(--tiza); }
.hw-feedback strong { color: var(--luz-2); }
.hw-tiempo { font-size: .8rem; color: var(--muted); letter-spacing: .08em; }
.hw-acciones-sec { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: center; margin-top: 8px; }
.hw-chuleta { margin: 8px 0 12px; }
.hw-chuleta summary { cursor: pointer; color: var(--luz); }

/* Piezas de las pruebas (pantalla e impresión) */
.hw-espejo--grande { font-size: clamp(1.6rem, 1rem + 3vw, 2.6rem); padding: 8px 18px; }
.hw-sombras { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 2.2rem; }
.hw-sombras b { font-size: 1.1rem; color: var(--muted); }
.hw-cartas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 6px; perspective: 800px; }
.hw-carta { position: relative; width: 92px; height: 118px; border: 0; padding: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform .6s var(--ease-out); }
.hw-carta span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; backface-visibility: hidden; border: 1px solid var(--line); }
.hw-carta__a { background: #0a0a0c; font-size: 2.4rem; }
.hw-carta__a small { font-size: .7rem; color: var(--muted); margin-top: 6px; }
.hw-carta__b { background: linear-gradient(140deg, var(--rojo), var(--rojo-prof)); color: #fff; font: 700 2.6rem var(--font-mono); transform: rotateY(180deg); }
.hw-carta.is-vuelta { transform: rotateY(180deg); }
.hw-lapidas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 8px 0; }
.hw-lapida { width: 120px; padding: 18px 8px 12px; text-align: center; border-radius: 60px 60px 8px 8px; background: linear-gradient(#3a3a40, #222227); border: 1px solid #44444c; display: flex; flex-direction: column; gap: 2px; color: var(--tiza); }
.hw-lapida strong { font-size: .9rem; line-height: 1.15; overflow-wrap: anywhere; }
.hw-lapida small { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hw-lapida em { font-style: normal; font-family: var(--font-mono); color: var(--tiza-2); }
.hw-lapida b { font: 700 1.6rem var(--font-mono); color: var(--luz); }
.hw-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; max-width: 330px; margin: 8px auto; font-family: var(--font-mono); font-size: .8rem; text-align: center; }
.hw-cal b { color: var(--luz); font-weight: 700; }
.hw-cal span { padding: 5px 0; border-radius: 4px; background: var(--surface); color: var(--tiza-2); }
.hw-cal span:empty { background: none; }
.hw-huesos { display: flex; gap: 10px; justify-content: center; align-items: center; margin: 10px 0; }
.hw-huesos i { display: block; height: 16px; border-radius: 10px; background: linear-gradient(#f4f1ec, #cfc8bb); box-shadow: 0 0 0 2px #0b0b0d, 0 4px 10px rgba(0,0,0,.5); }
.hw-huesos i.l { width: 64px; }
.hw-huesos i.c { width: 22px; }
.hw-morse { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 12px; font-family: var(--font-mono); font-size: .85rem; margin-top: 8px; }
.hw-morse b { color: var(--luz); }
.hw-retrato { display: flex; justify-content: center; gap: 10px; margin: 10px 0; padding: 14px; border: 6px double #6b5a3e; border-radius: 6px; background: #121014; width: fit-content; margin-inline: auto; }
.hw-cara { width: 54px; height: 66px; border-radius: 50% 50% 46% 46%; background: #d9d2c4; display: flex; justify-content: center; align-items: center; gap: 9px; }
.hw-cara i { display: block; width: 11px; height: 11px; border-radius: 50%; background: #111; }
.hw-cara.is-cerrado i { height: 3px; border-radius: 3px; }
.hw-velas3 p { margin-bottom: 6px; }
.hw-velas3 b { display: inline-block; min-width: 108px; padding: 2px 10px; margin-right: 8px; border-radius: 999px; font-size: .85rem; }
.hw-velas3 b.r { background: rgba(210,31,43,.25); color: #ffb3b8; }
.hw-velas3 b.n { background: #000; color: #ddd; border: 1px solid #444; }
.hw-velas3 b.b { background: #efe9dd; color: #111; }
.hw-cifra { font-size: clamp(1.8rem, 1rem + 3vw, 2.8rem); letter-spacing: .3em; text-align: center; color: var(--tiza); }
.hw-carta-rota p { padding: 14px 16px; border: 1px dashed #6b5a3e; border-radius: 4px; background: #17140f; color: #e8dcc3; font-style: italic; }

/* Kit y puente */
.hw-kit__cab { text-align: center; }
.hw-kit__equipo { font-size: clamp(1.6rem, 1rem + 2.6vw, 2.6rem); font-weight: 800; color: var(--tiza); outline: none; margin-bottom: 8px; }
.hw-kit__historia { max-width: 62ch; margin: 0 auto var(--space-3); color: var(--tiza-2); font-style: italic; }
.hw-kit__sobres { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: var(--space-2); }
.hw-kit__sobres li { flex: 1 1 200px; max-width: calc(33.333% - 7px); padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 2px; }
.hw-kit__sobres li span { font-size: .7rem; letter-spacing: .14em; color: var(--luz); text-transform: uppercase; }
.hw-kit__sobres li strong { color: var(--tiza); }
.hw-kit__sobres li small { color: var(--muted); }
@media (max-width: 700px) { .hw-kit__sobres li { max-width: calc(50% - 5px); flex-basis: 140px; } }
.hw-guardian { margin: 0 auto var(--space-2); max-width: 520px; text-align: center; }
.hw-guardian summary { cursor: pointer; color: var(--tiza-2); }
.hw-codigo { font-size: 2.6rem; letter-spacing: .4em; color: var(--luz-2); margin-top: 8px; }
.hw-kit__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-block: var(--space-2); }
.hw-puente { margin-top: var(--space-4); padding: clamp(18px, 3vw, 30px); border-radius: 16px; text-align: center; background: linear-gradient(160deg, rgba(210,31,43,.2), rgba(11,11,13,.6) 60%); border: 1px solid rgba(255,46,59,.35); }
.hw-puente__h { font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); font-weight: 800; color: var(--tiza); margin-bottom: 8px; }
.hw-puente__falta { color: var(--luz-2); font-size: .9rem; }
.hw-pases { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-block: var(--space-2); }
.hw-pase { min-width: 76px; min-height: 48px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--tiza); font: 700 1rem var(--font-mono); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: border-color .2s ease, background .2s ease; }
.hw-pase small { font: 400 .62rem var(--font-body); color: var(--luz); letter-spacing: .04em; }
.hw-pase.is-sel { border-color: var(--rojo-vivo); background: rgba(210,31,43,.25); box-shadow: 0 0 18px -6px var(--rojo-vivo); }
.hw-pase:hover { border-color: var(--luz); }
.hw-puente__precio { color: var(--tiza-2); }
.hw-puente__precio strong { color: var(--tiza); }

/* Modo guardián */
.hw-gm-abierto { overflow: hidden; }
.hw-guardian-modo { position: fixed; inset: 0; z-index: 500; background: radial-gradient(80% 60% at 50% 30%, #1a0d0e, #050506 70%); display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; }
.hw-gm { width: min(760px, 100%); text-align: center; position: relative; }
.hw-gm__reloj { font-size: clamp(4.5rem, 2rem + 14vw, 11rem); font-weight: 700; color: var(--tiza); line-height: 1; margin: 10px 0 20px; text-shadow: 0 0 40px rgba(255,46,59,.35); font-variant-numeric: tabular-nums; }
.hw-guardian-modo.is-final .hw-gm__reloj { color: var(--rojo-vivo); animation: hw-latido 1s ease-in-out infinite; }
.hw-guardian-modo.is-fin .hw-gm__reloj { color: var(--rojo-vivo); }
@keyframes hw-latido { 50% { transform: scale(1.03); text-shadow: 0 0 60px rgba(255,46,59,.7); } }
.hw-gm__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.hw-gm__pistas { margin-top: var(--space-3); text-align: left; display: grid; gap: 8px; }
.hw-gm__pistas details { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.hw-gm__pistas summary { cursor: pointer; color: var(--tiza); }
.hw-gm__pistas p { margin-top: 8px; color: var(--tiza-2); }
.hw-gm__cerrar { position: absolute; top: -8px; right: 0; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--tiza); font-size: 1.6rem; cursor: pointer; }

/* Movimiento reducido: equivalente suave, mismo contenido */
@media (prefers-reduced-motion: reduce) {
  .hw-desliza span::after { animation: none !important; top: 30%; }
  .hw-vela__llama { animation: none !important; }
  .hw-pantalla { animation: hw-entra-suave .3s ease both !important; }
  @keyframes hw-entra-suave { from { opacity: 0; } to { opacity: 1; } }
  .hw-carta { transition: none; }
  .hw-guardian-modo.is-final .hw-gm__reloj { animation: none !important; }
}

/* ---------- Impresión del kit ---------- */
.hw-imprimible { display: none; }
@media print {
  body.hw-imprimiendo { background: #fff !important; padding: 0 !important; }
  body.hw-imprimiendo > *:not(.hw-imprimible) { display: none !important; }
  body.hw-imprimiendo .hw-imprimible { display: block !important; color: #111; font-family: var(--font-body); font-size: 11.5pt; line-height: 1.45; }
  @page { size: A4; margin: 14mm; }
  .hw-imprimible h1, .hw-imprimible h2, .hw-imprimible h3 { color: #111; }
  .hw-imprimible .hp-hoja { break-after: page; }
  .hw-imprimible .hp-guardian, .hw-imprimible .hp-diploma { break-before: page; }
  .hw-imprimible strong, .hw-imprimible b { color: #111; }
  .hw-imprimible .hw-lapida strong { color: #111; }
  .hw-imprimible .hp-k { font-family: var(--font-mono); font-size: 8pt; letter-spacing: .18em; text-transform: uppercase; color: #8E1519; margin-bottom: 4mm; }
  .hw-imprimible .hp-portada h1 { font-size: 30pt; line-height: 1.05; margin-bottom: 3mm; }
  .hw-imprimible .hp-meta { color: #555; margin-bottom: 8mm; }
  .hw-imprimible .hp-historia { font-size: 14pt; font-style: italic; border-left: 3px solid #D21F2B; padding-left: 5mm; margin-bottom: 10mm; }
  .hw-imprimible .hp-normas ol { padding-left: 6mm; }
  .hw-imprimible .hp-sobre { break-inside: avoid; border: 1.5px dashed #999; border-radius: 4mm; padding: 7mm 8mm; margin-bottom: 8mm; }
  .hw-imprimible .hp-sobre h2 { font-size: 17pt; margin-bottom: 3mm; }
  .hw-imprimible .hp-pie { font-size: 9pt; color: #666; margin-top: 4mm; }
  .hw-imprimible .hw-q { color: #111; }
  .hw-imprimible .hw-espejo { background: #eee; color: #111; }
  .hw-imprimible .hw-lapida { background: #ddd; color: #111; border-color: #999; }
  .hw-imprimible .hw-lapida b { color: #8E1519; }
  .hw-imprimible .hw-lapida small, .hw-imprimible .hw-lapida em { color: #333; }
  .hw-imprimible .hw-cal span { background: #f1f1f1; color: #111; }
  .hw-imprimible .hw-cal b { color: #8E1519; }
  .hw-imprimible .hw-huesos i { background: #ccc; box-shadow: 0 0 0 1.5px #111; }
  .hw-imprimible .hw-retrato { background: #fff; border-color: #6b5a3e; }
  .hw-imprimible .hw-cara { background: #e9e4da; border: 1px solid #999; }
  .hw-imprimible .hw-velas3 b.r { background: #f6c9cc; color: #111; }
  .hw-imprimible .hw-cifra { color: #111; }
  .hw-imprimible .hw-carta-rota p { background: #f6efe1; color: #222; }
  .hw-imprimible .hw-morse b { color: #8E1519; }
  .hw-imprimible .hp-guardian li { margin-bottom: 3mm; }
  .hw-imprimible .hp-guardian em { display: block; color: #8E1519; font-style: normal; font-weight: 700; }
  .hw-imprimible .hp-guardian span { display: block; color: #555; font-size: 9.5pt; }
  .hw-imprimible .hp-codigo { font-size: 16pt; margin: 6mm 0; }
  .hw-imprimible .hp-codigo strong { font-family: var(--font-mono); letter-spacing: .3em; color: #8E1519; }
  .hw-imprimible .hp-consejo { font-size: 9.5pt; color: #555; }
  .hw-imprimible .hp-diploma { text-align: center; border: 3mm double #8E1519; padding: 20mm 12mm; margin-top: 10mm; }
  .hw-imprimible .hp-diploma h2 { font-size: 30pt; margin: 6mm 0; }
  .hw-imprimible .hp-linea { font-size: 20pt; margin: 10mm 0; font-family: var(--font-mono); }
  .hw-imprimible .hp-firma { margin-top: 18mm; border-top: 1px solid #999; display: inline-block; padding-top: 2mm; min-width: 70mm; color: #555; }
  .hw-imprimible .hp-marca { margin-top: 14mm; font-size: 8.5pt; color: #777; }
}

/* Prioridad frente a .prose (listas en grid y enlaces color luz del tema) */
.hw-app .hw-kit__sobres { display: flex; margin-block: 0 var(--space-2); }
.hw-app .hw-pasos { display: grid; margin-block: var(--space-3); }
.hw-app a.btn-ghost, .hw-acto a.btn-ghost { color: var(--tiza); text-decoration: none; }
.hw-app a.btn-electric, .hw-acto a.btn-electric { color: #fff; text-decoration: none; }
.hw-app p { margin-bottom: 0; }
.hw-app .hw-app__sub, .hw-app .hw-pregunta { margin-bottom: var(--space-2); }
.hw-opcion strong { overflow-wrap: anywhere; }
@media (max-width: 420px) { .hw-opcion strong { font-size: .98rem; } .hw-opciones { padding-right: 34px; } }