/* Terror Mickky · Proyecto Umbra */
:root {
  color-scheme: dark;
  --negro: #000; --fondo: #050203; --carbon: #0e0708; --tarjeta: #140a0b; --linea: rgba(255, 255, 255, .09);
  --sangre: #c4121c; --sangre-viva: #ff2a35; --sangre-osc: #5a0006; --umbra: #5dff8f; --oxido: #c9a15a; --oxido-osc: #6b3d1f; --concreto: #1b201e;
  --texto: #ece2e2; --texto-2: #a89494; --ancho: 1160px;
  --titulo: 'Anton', 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --maquina: 'Special Elite', 'Courier New', monospace;
  --cuerpo: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 1rem/1.6 var(--cuerpo); overflow-x: hidden; }
body.cerrado { overflow: hidden; }
a { color: var(--sangre-viva); }
h1, h2, h3 { font-family: var(--titulo); font-weight: 400; letter-spacing: .02em; margin: 0; line-height: 1; text-transform: uppercase; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- Capas de atmósfera ---------- */
.estatica { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; opacity: .045; mix-blend-mode: screen; }
.vineta { position: fixed; inset: 0; pointer-events: none; z-index: 49; background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .75) 100%); }
.lineas { position: fixed; inset: 0; pointer-events: none; z-index: 51; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); opacity: .5; }
.linterna { position: fixed; inset: 0; pointer-events: none; z-index: 48; background: radial-gradient(circle 320px at var(--x, 50%) var(--y, 40%), transparent 0, rgba(0, 0, 0, .3) 65%, rgba(0, 0, 0, .55) 100%); transition: opacity .6s; }
body.calma .linterna { opacity: 0; }
.apagon { animation: apagon .9s steps(2) 1; }
@keyframes apagon { 0% { filter: brightness(1); } 20% { filter: brightness(.05); } 30% { filter: brightness(1.4); } 45% { filter: brightness(.02); } 100% { filter: brightness(1); } }

/* ---------- Puerta ---------- */
.puerta { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px 16px; background: radial-gradient(ellipse at 50% 35%, #2a0408, #000 70%); overflow-y: auto; }
.puerta-caja { max-width: 560px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.puerta-logo { animation: latido 2.4s infinite; filter: drop-shadow(0 0 30px rgba(196, 18, 28, .6)); }
.puerta h1 { font-size: clamp(2.6rem, 10vw, 4.6rem); color: var(--sangre-viva); }
.puerta p { margin: 0; color: var(--texto-2); }
.puerta-edad { font: 1.1rem var(--maquina); color: var(--texto) !important; }
.puerta-botones { display: grid; gap: 10px; width: 100%; max-width: 380px; margin-top: 6px; }
.puerta-salir { color: var(--texto-2); font-size: .85rem; }
.puerta.fuera { animation: fuera .7s forwards; }
@keyframes fuera { to { opacity: 0; visibility: hidden; } }
@keyframes latido { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.06); } 20% { transform: scale(1); } 30% { transform: scale(1.04); } }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 2px; font: 400 1.1rem var(--titulo); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .15s, box-shadow .2s, background .2s; }
.btn-sangre { background: linear-gradient(180deg, var(--sangre-viva), var(--sangre) 60%, var(--sangre-osc)); color: #fff; box-shadow: 0 0 0 1px rgba(255, 60, 70, .4), 0 10px 30px rgba(196, 18, 28, .35); }
.btn-sangre:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 60, 70, .6), 0 14px 40px rgba(196, 18, 28, .6); }
.btn-fantasma { background: rgba(0, 0, 0, .4); color: var(--texto); border-color: rgba(255, 255, 255, .25); }
.btn-fantasma:hover { border-color: var(--sangre-viva); color: var(--sangre-viva); }
.btn:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--umbra); outline-offset: 3px; }

/* ---------- Barra ---------- */
.barra { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; gap: 18px; padding: 10px max(16px, calc((100vw - var(--ancho)) / 2)); background: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .55)); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(196, 18, 28, .25); }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 1.25rem var(--titulo); letter-spacing: .06em; }
.marca b { color: var(--sangre-viva); font-weight: 400; }
.nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav a { color: var(--texto-2); text-decoration: none; font: 400 .95rem var(--titulo); letter-spacing: .1em; text-transform: uppercase; }
.nav a:hover { color: #fff; }
.nav .nav-cta { color: #fff; padding: 8px 14px; border: 1px solid var(--sangre); background: rgba(196, 18, 28, .2); }
.sonido { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linea); background: rgba(255, 255, 255, .05); color: #fff; cursor: pointer; font-size: 1.1rem; }

/* ---------- Glitch ---------- */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after { content: attr(data-texto); position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.glitch::before { color: var(--umbra); transform: translate(-3px, 0); clip-path: inset(10% 0 55% 0); }
.glitch::after { color: var(--sangre-viva); transform: translate(3px, 0); clip-path: inset(60% 0 8% 0); }
.glitch.activo::before, .glitch.activo::after { opacity: .85; animation: corte .35s steps(3) 2; }
@keyframes corte { 0% { clip-path: inset(20% 0 50% 0); } 33% { clip-path: inset(70% 0 5% 0); } 66% { clip-path: inset(5% 0 80% 0); } 100% { clip-path: inset(40% 0 30% 0); } }

/* ---------- Portada ---------- */
.portada { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding: 110px max(16px, calc((100vw - var(--ancho)) / 2)) 60px; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse at 70% 60%, rgba(196, 18, 28, .22), transparent 55%), radial-gradient(ellipse at 20% 20%, rgba(61, 255, 210, .07), transparent 50%), linear-gradient(180deg, #000, #0b0304 70%, var(--fondo)); }
.niebla { position: absolute; inset: -20%; z-index: -1; opacity: .5; background: radial-gradient(ellipse 40% 25% at 30% 70%, rgba(200, 190, 190, .14), transparent 70%), radial-gradient(ellipse 35% 20% at 70% 80%, rgba(200, 190, 190, .12), transparent 70%), radial-gradient(ellipse 30% 18% at 50% 60%, rgba(200, 190, 190, .1), transparent 70%); filter: blur(18px); animation: niebla 26s linear infinite alternate; }
.niebla.n2 { animation-duration: 38s; animation-direction: alternate-reverse; opacity: .35; transform: scale(1.3); }
@keyframes niebla { from { transform: translateX(-8%) translateY(2%); } to { transform: translateX(8%) translateY(-3%); } }
.ojos { position: absolute; inset: 0; z-index: -1; }
.par { position: absolute; display: flex; gap: var(--sep, 18px); opacity: 0; transition: opacity 2.5s; }
.par.visible { opacity: 1; }
.par i { display: block; width: var(--t, 14px); height: calc(var(--t, 14px) * .45); border-radius: 50%; background: radial-gradient(circle at var(--px, 50%) 50%, #fff 0 18%, var(--c, #ff2a35) 30%, transparent 72%); box-shadow: 0 0 calc(var(--t, 14px) * 1.4) var(--c, #ff2a35); animation: parpadeo 7s infinite; animation-delay: var(--d, 0s); }
@keyframes parpadeo { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.05); } }
.portada-texto { max-width: 760px; display: grid; gap: 18px; }
.rec { margin: 0; font: .82rem var(--maquina); color: #ff5a62; letter-spacing: .12em; display: flex; align-items: center; gap: 8px; }
.rec i { width: 10px; height: 10px; border-radius: 50%; background: #ff1f2b; box-shadow: 0 0 10px #ff1f2b; animation: rec 1s steps(1) infinite; }
@keyframes rec { 50% { opacity: 0; } }
.presenta { margin: 0; font: 1rem var(--maquina); letter-spacing: .4em; color: var(--oxido); }
.titulo { font-size: clamp(3.4rem, 13vw, 9rem); color: #fff; text-shadow: 0 0 2px #fff, 0 0 30px rgba(196, 18, 28, .75), 0 6px 0 var(--sangre-osc); animation: luz 7s infinite; }
@keyframes luz { 0%, 89%, 100% { opacity: 1; } 90% { opacity: .2; } 91% { opacity: 1; } 93% { opacity: .1; } 94% { opacity: 1; } }
.lema { margin: 0; font: clamp(1.2rem, 3vw, 1.6rem)/1.35 var(--maquina); color: var(--texto); }
.lema span { color: var(--sangre-viva); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 4px 0; }
.chips li { padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .5); font: .78rem var(--titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--texto); }
.botones { display: flex; gap: 12px; flex-wrap: wrap; }
.aviso-chico { margin: 0; font-size: .78rem; color: var(--texto-2); }
body.calma #atreves, body.calma #aviso-susto { display: none; }
.bajar { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: var(--texto-2); text-decoration: none; animation: bajar 2s infinite; }
@keyframes bajar { 50% { transform: translate(-50%, 8px); } }

/* ---------- Secciones ---------- */
.seccion { position: relative; padding: 100px max(16px, calc((100vw - var(--ancho)) / 2)); }
.seccion-oscura { background: linear-gradient(180deg, #000, #0a0304 50%, #000); border-top: 1px solid rgba(196, 18, 28, .18); border-bottom: 1px solid rgba(196, 18, 28, .18); }
.ancho { max-width: var(--ancho); margin: 0 auto; }
.seccion h2 { font-size: clamp(2.2rem, 7vw, 4.4rem); color: #fff; margin: 6px 0 26px; }
.etiqueta { margin: 0; font: .85rem var(--maquina); letter-spacing: .25em; text-transform: uppercase; color: var(--sangre-viva); }
.dos-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.texto { color: var(--texto-2); font-size: 1.05rem; }
.rojo { color: var(--sangre-viva); font-weight: 800; }
.verde { color: var(--umbra); font-weight: 800; }

/* Historia */
.expediente { position: relative; padding: 60px 26px 28px; background: #e9e1cf; color: #1c1612; font: 1.05rem/1.7 var(--maquina); transform: rotate(-.6deg); box-shadow: 0 30px 60px rgba(0, 0, 0, .7); }
.expediente::before { content: 'CONFIDENCIAL'; position: absolute; top: 14px; right: 16px; padding: 2px 10px; border: 3px solid #a3141b; color: #a3141b; font: 1.1rem var(--titulo); letter-spacing: .1em; transform: rotate(8deg); opacity: .8; }
.expediente p { margin: 0 0 12px; }
.expediente .firma { font-size: 1.4rem; color: #8b0b12; margin: 0; }
.tachado { background: #111; color: transparent; padding: 0 4px; cursor: help; transition: color .3s, background .3s; border-radius: 1px; }
.tachado:hover, .tachado:focus, .tachado.visto { background: transparent; color: #8b0b12; text-decoration: underline wavy; }
.pista { font-size: .82rem; color: var(--texto-2); margin: 14px 0 0; }
.sujeto { display: grid; justify-items: center; gap: 10px; }
.silueta { width: min(100%, 300px); filter: drop-shadow(0 0 40px rgba(61, 255, 210, .25)); animation: respira 5s ease-in-out infinite; }
@keyframes respira { 50% { transform: scale(1.015) translateY(-4px); } }
.ojos-sujeto { animation: parpadeo 5s infinite; transform-origin: 150px 104px; }
.sujeto-texto { margin: 0; font: .9rem var(--maquina); letter-spacing: .2em; color: var(--umbra); }
.sujeto-texto b { color: var(--sangre-viva); animation: rec 1.2s steps(1) infinite; }

/* Niveles */
.niveles { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.nivel { position: relative; padding: 30px; background: linear-gradient(160deg, #150b0c, #0a0505); border: 1px solid rgba(255, 255, 255, .1); overflow: hidden; }
.nivel::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0, rgba(61, 255, 210, .08), transparent 50%); pointer-events: none; }
.nivel-extremo { padding-bottom: 64px; border-color: rgba(255, 42, 53, .55); box-shadow: 0 0 60px rgba(196, 18, 28, .25) inset; background: linear-gradient(160deg, #2a0306, #0a0102); }
.nivel-extremo::after { background: radial-gradient(circle at 100% 0, rgba(255, 42, 53, .18), transparent 55%); }
.nivel-edad { position: absolute; top: 18px; right: 22px; margin: 0; font: 3.6rem/1 var(--titulo); color: rgba(255, 255, 255, .08); }
.nivel-extremo .nivel-edad { color: rgba(255, 42, 53, .25); }
.nivel h3 { font-size: 2.8rem; color: #fff; }
.nivel-extremo h3 { color: var(--sangre-viva); text-shadow: 0 0 24px rgba(255, 42, 53, .6); }
.nivel-bajada { font: 1.05rem var(--maquina); color: var(--texto-2); margin: 6px 0 18px; }
.nivel ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.nivel li::marker { color: var(--sangre-viva); }
.sello { position: absolute; bottom: 16px; right: 18px; margin: 0; padding: 4px 12px; border: 2px solid var(--sangre-viva); color: var(--sangre-viva); font: 1rem var(--titulo); letter-spacing: .12em; transform: rotate(-8deg); }

/* Pasos */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: p; }
.pasos li { padding: 24px 20px; background: var(--tarjeta); border-top: 3px solid var(--sangre); display: grid; gap: 10px; align-content: start; }
.pasos > li > b { font: 2.4rem/1 var(--titulo); color: rgba(255, 42, 53, .45); }
.pasos p b { color: #fff; }
.pasos h3 { font-size: 1.5rem; color: #fff; }
.pasos p { margin: 0; color: var(--texto-2); }

/* Reglas */
.reglas { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.reglas li { padding: 12px 14px 12px 44px; position: relative; background: rgba(255, 255, 255, .03); border-left: 2px solid var(--sangre); }
.reglas li::before { content: '✕'; position: absolute; left: 14px; top: 11px; color: var(--sangre-viva); font-weight: 800; }
.cartel { padding: 36px 28px; background: repeating-linear-gradient(-45deg, #f3c623 0 22px, #111 22px 44px); }
.cartel p { margin: 0; padding: 22px; background: #0b0b0b; color: #f3c623; font: clamp(1.5rem, 3.5vw, 2.2rem)/1.15 var(--titulo); text-transform: uppercase; text-align: center; }
.cartel .cartel-chico { font: .95rem var(--maquina); color: #fff; padding-top: 0; text-transform: none; }

/* Tarjetas */
.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tarjetas article { padding: 26px; background: var(--tarjeta); border: 1px solid var(--linea); display: grid; gap: 8px; }
.tarjetas span { font-size: 2rem; }
.tarjetas h3 { font-size: 1.6rem; color: #fff; }
.tarjetas p { margin: 0; color: var(--texto-2); }

/* Formulario */
.form { display: grid; gap: 14px; padding: 26px; background: rgba(20, 10, 11, .9); border: 1px solid rgba(196, 18, 28, .35); }
.campo { display: grid; gap: 6px; }
.campo > span { font: .85rem var(--titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.campo input, .campo select { width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 2px; border: 1px solid rgba(255, 255, 255, .16); background: #050202; color: var(--texto); font: inherit; }
.campo input:focus, .campo select:focus { border-color: var(--sangre-viva); outline: none; box-shadow: 0 0 0 3px rgba(255, 42, 53, .2); }
select option { background: #140a0b; color: #ece2e2; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--texto-2); }
.check input { width: 20px; height: 20px; accent-color: var(--sangre); margin-top: 2px; flex: none; }
.error { margin: 0; padding: 10px 12px; background: rgba(255, 42, 53, .12); border: 1px solid rgba(255, 42, 53, .4); color: #ffb3b7; }
.exito { padding: 16px; background: rgba(61, 255, 210, .08); border: 1px solid rgba(61, 255, 210, .35); color: #c9fff1; font: 1rem var(--maquina); }
.contador { font: 1.4rem var(--titulo); letter-spacing: .06em; color: var(--sangre-viva); }

/* Preguntas */
.preguntas { display: grid; gap: 10px; }
.preguntas details { background: var(--tarjeta); border: 1px solid var(--linea); }
.preguntas summary { padding: 16px 18px; cursor: pointer; font: 1.15rem var(--titulo); letter-spacing: .05em; text-transform: uppercase; list-style: none; }
.preguntas summary::after { content: '+'; float: right; color: var(--sangre-viva); }
.preguntas details[open] summary::after { content: '−'; }
.preguntas p { margin: 0; padding: 0 18px 18px; color: var(--texto-2); }

/* Pie */
.pie { padding: 50px 16px 40px; text-align: center; display: grid; gap: 8px; justify-items: center; background: #000; border-top: 1px solid rgba(196, 18, 28, .25); }
.pie p { margin: 0; }
.pie-chico { font-size: .8rem; color: var(--texto-2); max-width: 640px; }

/* ---------- Susto ---------- */
.susto { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; background: #000; opacity: 0; visibility: hidden; pointer-events: none; }
.susto.ya { opacity: 1; visibility: visible; animation: fondoSusto 1.5s steps(1) forwards; }
.susto-cara { position: absolute; width: min(90vw, 70vh); height: auto; }
.susto.ya .susto-cara { animation: abalanza 1.5s cubic-bezier(.2, .9, .2, 1) forwards; }
.susto-texto { position: absolute; bottom: 8vh; margin: 0; font: clamp(2.4rem, 10vw, 6rem) var(--titulo); color: #ff2a35; letter-spacing: .08em; text-shadow: 0 0 30px #ff2a35; opacity: 0; }
.susto.ya .susto-texto { animation: textoSusto 1.5s forwards; }
@keyframes fondoSusto { 0% { background: #000; } 8% { background: #f2f2f2; } 14% { background: #6b0006; } 30% { background: #000; } 50% { background: #3d0004; } 92% { background: #000; opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes abalanza { 0% { transform: scale(.25) translateY(40%); filter: brightness(.4); } 12% { transform: scale(1.6) translateY(8%); filter: brightness(1); } 22% { transform: scale(1.45) translateY(10%) rotate(-2deg); } 100% { transform: scale(1.9) translateY(14%) rotate(1deg); } }
@keyframes textoSusto { 0%, 20% { opacity: 0; } 24% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.temblor { animation: temblor .5s 2; }
@keyframes temblor { 20% { transform: translate(-6px, 4px); } 40% { transform: translate(5px, -6px); } 60% { transform: translate(-4px, -3px); } 80% { transform: translate(6px, 5px); } }

/* Susurros */
.susurro { position: fixed; z-index: 60; pointer-events: none; font: 1.1rem var(--maquina); color: rgba(255, 90, 98, .85); text-shadow: 0 0 12px rgba(255, 42, 53, .6); animation: susurro 4s forwards; }
@keyframes susurro { 0% { opacity: 0; filter: blur(6px); } 20% { opacity: 1; filter: blur(0); } 80% { opacity: .9; } 100% { opacity: 0; filter: blur(4px); transform: translateY(-14px); } }

/* ---------- Celular ---------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .sonido { margin-left: auto; }
  .dos-col, .niveles { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: 1fr 1fr; }
  .tarjetas { grid-template-columns: 1fr; }
  .sujeto { order: -1; }
  .silueta { width: 200px; }
}
@media (max-width: 560px) {
  .pasos, .dos { grid-template-columns: 1fr; }
  .seccion { padding-top: 70px; padding-bottom: 70px; }
  .marca span { font-size: 1.05rem; }
  .btn { width: 100%; }
  .nivel { padding: 24px 20px 56px; }
  .nivel h3 { font-size: 2.2rem; }
  .nivel-edad { position: static; font-size: 1rem; color: var(--texto-2); letter-spacing: .2em; margin-bottom: 6px; }
  .nivel-extremo .nivel-edad { color: var(--sangre-viva); }
}

/* Sin sustos o sin movimiento */
body.calma .estatica, body.calma .lineas { display: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .estatica { display: none; }
}


/* ================= Estilo de las imágenes: metal oxidado, concreto, verde enfermizo ================= */
body { background: #0a0c0b url('/terror/img/muro.webp') center / 640px repeat; }
.seccion { background: linear-gradient(180deg, rgba(8, 10, 9, .93), rgba(12, 15, 14, .9)); }
.seccion-oscura { background: linear-gradient(180deg, rgba(3, 4, 4, .96), rgba(14, 6, 6, .94) 50%, rgba(3, 4, 4, .96)); }
/* Grietas en el concreto */
.seccion::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' opacity='.9'%3E%3Cpath d='M0 120 L60 110 L95 140 L160 128 L210 170 L260 160'/%3E%3Cpath d='M95 140 L110 200 L90 260'/%3E%3Cpath d='M600 300 L540 290 L500 320 L450 300 L400 340'/%3E%3Cpath d='M500 320 L510 380 L480 400'/%3E%3Cpath d='M330 0 L345 50 L320 90 L350 140'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 600px 400px repeat; }

/* Letras de metal oxidado (como "TERROR MICKKY" de la imagen) */
.seccion h2, .titulo, .nivel h3, .pasos h3, .tarjetas h3 {
  background: linear-gradient(180deg, #e8c39a 0%, #b5794a 38%, #7a4423 60%, #3e1f0e 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 3px 0 #120804) drop-shadow(0 0 14px rgba(0, 0, 0, .8));
}
.titulo { animation: luz 7s infinite; filter: drop-shadow(0 4px 0 #120804) drop-shadow(0 0 30px rgba(196, 18, 28, .45)); }
.nivel-extremo h3 { background: linear-gradient(180deg, #ff7a6a, #c4121c 55%, #4a0005); -webkit-background-clip: text; background-clip: text; }
.glitch::before, .glitch::after { -webkit-text-fill-color: currentColor; }

/* Letreros como cintas de metal (las etiquetas de la imagen) */
.etiqueta { display: inline-block; padding: 7px 22px 6px; color: #1a0d05; letter-spacing: .18em; font-weight: 700;
  background: linear-gradient(180deg, #d9b085, #a06a3f 55%, #6b3d1f); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), 0 4px 10px rgba(0, 0, 0, .6);
  clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); }
.presenta { display: inline-block; justify-self: start; padding: 6px 20px; color: #1a0d05; background: linear-gradient(180deg, #d9b085, #8a5432); clip-path: polygon(0 0, 100% 0, 97% 50%, 100% 100%, 0 100%, 3% 50%); }

/* Placas de metal con remaches (tarjetas) */
.nivel, .pasos li, .tarjetas article, .form, .preguntas details, .reglas li {
  background-color: #141917;
  background-image: radial-gradient(circle at 12px 12px, #8a5a35 0 3px, #2b1608 4px, transparent 5px), radial-gradient(circle at calc(100% - 12px) 12px, #8a5a35 0 3px, #2b1608 4px, transparent 5px),
    radial-gradient(circle at 12px calc(100% - 12px), #8a5a35 0 3px, #2b1608 4px, transparent 5px), radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #8a5a35 0 3px, #2b1608 4px, transparent 5px),
    linear-gradient(160deg, rgba(255, 255, 255, .04), transparent 40%), linear-gradient(180deg, #171d1b, #0d1110);
  border: 2px solid #4a2c17; box-shadow: inset 0 0 30px rgba(0, 0, 0, .7), 0 0 0 1px #000, 0 12px 30px rgba(0, 0, 0, .5);
}
.reglas li { background-image: linear-gradient(180deg, #171d1b, #0d1110); border-width: 0 0 0 3px; border-color: var(--sangre); }
.pasos li { border-top: 3px solid var(--sangre); }
.nivel-extremo { background-image: linear-gradient(180deg, rgba(40, 3, 6, .82), rgba(8, 2, 3, .95)), url('/terror/img/extremo.webp'); background-size: cover; background-position: center; border-color: #7a0b12; }
.form { border-color: #6b3d1f; }
/* Brillo verde enfermizo (las luces de la imagen) */
.nivel::after { background: radial-gradient(circle at 100% 0, rgba(93, 255, 143, .1), transparent 55%); }
.sujeto-texto { color: var(--umbra); }
.silueta { filter: drop-shadow(0 0 40px rgba(93, 255, 143, .3)); }

/* Portada con la imagen */
.portada { background: #050605; }
.portada-arte { position: absolute; inset: 0; z-index: -2; }
.portada-arte img { width: 100%; height: 100%; object-fit: cover; object-position: right center; filter: saturate(1.05) contrast(1.05); animation: acercar 30s ease-in-out infinite alternate; }
@keyframes acercar { from { transform: scale(1); } to { transform: scale(1.06); } }
.portada::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(3, 4, 4, .96) 0%, rgba(3, 4, 4, .88) 34%, rgba(3, 4, 4, .25) 62%, rgba(3, 4, 4, .1) 100%), linear-gradient(0deg, var(--fondo) 0%, transparent 25%); }
.portada .ojos { z-index: 0; }
.portada .niebla { z-index: 0; }
.portada-texto { position: relative; z-index: 1; }
.chips li { background: rgba(10, 12, 11, .8); border-color: #6b3d1f; color: #e3c9a8; }

/* Expedientes 18+ */
.expedientes { background: linear-gradient(180deg, rgba(4, 5, 5, .97), rgba(20, 3, 5, .95)); }
.velado { position: relative; overflow: hidden; border: 2px solid #4a2c17; box-shadow: 0 30px 60px rgba(0, 0, 0, .7); }
.velado img { display: block; width: 100%; height: auto; filter: blur(22px) brightness(.45) saturate(.6); transform: scale(1.08); transition: filter 1.2s, transform 1.2s; }
.velado.abierto img { filter: none; transform: none; }
.velo { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 20px; text-align: center; background: rgba(0, 0, 0, .35); transition: opacity .6s; }
.velado.abierto .velo { opacity: 0; pointer-events: none; }
.velo p { margin: 0; color: #e3d0d0; }
.velo-sello { padding: 6px 16px; border: 3px solid var(--sangre-viva); color: var(--sangre-viva) !important; font: 1.4rem var(--titulo); letter-spacing: .14em; transform: rotate(-4deg); }

@media (max-width: 760px) {
  .portada::before { background: linear-gradient(0deg, rgba(3, 4, 4, .97) 0%, rgba(3, 4, 4, .85) 45%, rgba(3, 4, 4, .35) 75%, rgba(3, 4, 4, .55) 100%); }
  .portada { align-items: end; }
  .portada-arte img { object-position: center top; }
}

.seccion h2 { display: block; width: fit-content; }
@media (max-width: 560px) { .presenta { letter-spacing: .18em; font-size: .8rem; } .etiqueta { letter-spacing: .1em; font-size: .72rem; } }