/* DETHCORE · dethcore.com
   Estilo: póster de concierto deathcore sobre muro de block. Portada fija con humo y brasas;
   el contenido sube encima como una losa. Separadores tribales entre secciones.
   La marca es oscura a propósito: no hay versión clara. */
:root{
  --bg:#0a0909;        /* negro de escenario */
  --bg-2:#141111;      /* cara del block quemada */
  --bg-3:#1c1717;
  --line:#2a2323;      /* junta */
  --fg:#ece6df;        /* hueso */
  --muted:#9e958c;     /* ceniza */
  --accent:#b3121f;    /* rojo sangre: botones y adornos */
  --accent-text:#e2333f; /* rojo para textos pequeños (más contraste) */
  --accent-ink:#fff4f4;
  --metal:"Metal Mania","Pirata One",Georgia,serif;      /* solo el logo */
  --display:"Pirata One","UnifrakturMaguntia",Georgia,serif; /* títulos */
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --tribal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60'%3E%3Cpath fill='%23b3121f' d='M300 2C312 22 318 38 300 58C282 38 288 22 300 2ZM314 30C370 14 450 20 598 30C450 40 370 46 314 30ZM286 30C230 14 150 20 2 30C150 40 230 46 286 30ZM330 24C344 10 360 4 384 2C368 10 356 18 346 27ZM330 36C344 50 360 56 384 58C368 50 356 42 346 33ZM270 24C256 10 240 4 216 2C232 10 244 18 254 27ZM270 36C256 50 240 56 216 58C232 50 244 42 254 33ZM420 26C440 16 456 12 476 12C462 18 450 22 440 28ZM180 26C160 16 144 12 124 12C138 18 150 22 160 28Z'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*{box-sizing:border-box;font-synthesis:none}
.grano{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.tribal-div{height:28px;width:min(560px,82%);margin:0 auto;background:var(--tribal) center/contain no-repeat}
section.sec{position:relative}
section.sec::before{content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:min(460px,78%);height:28px;background:var(--tribal) center/contain no-repeat}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.6;margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92;margin:0;text-wrap:balance;letter-spacing:.01em}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* idiomas (patrón blackmouthtech.com) */
html[data-lang="en"] [lang="es"]:not(html), html:not([data-lang="en"]) [lang="en"]{display:none!important}


/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:6;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.brand{font-family:var(--metal);font-weight:400;font-size:34px;letter-spacing:.02em;text-decoration:none;line-height:1}
.brand b{font-weight:400;color:var(--accent-text)}
.brand{display:block}.brand-logo{display:block;height:46px;width:auto}
.hero-logo{display:block;width:min(620px,100%);height:auto;margin:0 0 18px -1%;filter:drop-shadow(0 0 24px rgba(179,18,31,.35))}
.footer-logo{display:block;width:min(900px,92%);height:auto;margin:0 auto;opacity:.9}
.ph-logo{width:78%;height:auto}.ph-small{width:56%}
.nav-r{display:flex;gap:22px;align-items:center}
.nav-r a{text-decoration:none;font-size:14px;color:var(--muted)}
.nav-r a:hover{color:var(--fg)}
.lang{display:flex;border:1px solid var(--line)}
.lang button{background:none;border:0;color:var(--muted);font-family:var(--mono);font-size:12px;padding:7px 11px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
@media (max-width:820px){.nav-r a{display:none}}

/* botones */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:15px 22px;text-decoration:none;border:1px solid var(--fg);cursor:pointer;background:none;color:var(--fg);transition:transform .15s,background .15s}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:hover{transform:translateY(-2px)}
.btn.ghost:hover{background:var(--fg);color:var(--bg)}

/* PORTADA fija */
.portada{position:relative;z-index:0;min-height:80svh;display:flex;align-items:flex-end;overflow:hidden;
  background:
    radial-gradient(ellipse 60% 55% at 70% 35%, #3a0a10 0%, transparent 62%),
    radial-gradient(ellipse 90% 40% at 50% 110%, #1f0608 0%, transparent 70%),
    repeating-linear-gradient(0deg,transparent 0 79px,#151111 79px 81px),
    var(--bg)}
/* Solo se queda fija cuando cabe entera en la pantalla (lo decide js/site.js).
   Si es más alta, como en muchos celulares, baja normal y se ve completa. */
.portada.fija{position:sticky;top:0}
.portada canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.portada-contenido{position:relative;width:100%;padding-block:48px 64px}
.hero{display:grid;grid-template-columns:1.3fr .8fr;gap:40px;align-items:end}
@media (max-width:880px){.hero{grid-template-columns:1fr}}
.hero h1{font-size:clamp(46px,7.6vw,108px);text-transform:none;text-shadow:0 0 40px rgba(179,18,31,.35)}
.hero h1 .l2{color:var(--accent-text);display:block}
.hero-tribal{position:absolute;left:50%;top:46%;width:min(1400px,170%);transform:translate(-50%,-50%);opacity:.13;pointer-events:none}
.hero .who{margin-top:24px;font-size:clamp(17px,2vw,20px);max-width:42ch}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.foto{aspect-ratio:4/5;max-width:100%;border:1px solid var(--accent);box-shadow:0 0 0 6px var(--bg),0 0 0 7px var(--line);display:grid;place-items:center;text-align:center;padding:20px;background:rgba(26,25,24,.7)}
.foto span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (max-width:880px){.foto{aspect-ratio:16/9}}
.bajar{margin-top:26px;display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none}

/* LOSA que tapa la portada */
.hoja{position:relative;z-index:1;background:var(--bg);margin-top:-24px;border-radius:24px 24px 0 0;box-shadow:0 -14px 34px rgba(0,0,0,.5);border-top:1px solid var(--line)}

/* franja de datos */
.hilada{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.hilada > div{padding:26px 18px;border-right:1px solid var(--line);min-width:0}
.hilada > div:last-child{border-right:0}
.hilada .big{font-family:var(--body);font-weight:800;font-size:clamp(34px,4.6vw,56px);line-height:1;letter-spacing:-.02em}
.hilada .big i{font-style:normal;color:var(--accent-text)}
@media (max-width:760px){.hilada{grid-template-columns:repeat(2,1fr)}.hilada > div:nth-child(2){border-right:0}.hilada > div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

section.sec{padding-block:84px;border-bottom:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.sec-head h2{font-size:clamp(46px,7vw,96px);font-weight:900}
.sec-head p{max-width:46ch;color:var(--muted);margin:0}

/* historia */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:170px 1fr;gap:28px;padding-block:26px;border-top:1px solid var(--line)}
.timeline li:first-child{border-top:0}
.timeline .when{font-family:var(--mono);font-size:13px;color:var(--accent-text);padding-top:8px}
.timeline h3{font-size:clamp(30px,3.6vw,42px);font-weight:800;margin-bottom:8px}
.timeline p{margin:0;color:var(--muted);max-width:62ch}
@media (max-width:640px){.timeline li{grid-template-columns:1fr;gap:6px}}

/* prensa */
.prensa{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:860px){.prensa{grid-template-columns:1fr}}
.nota{display:flex;flex-direction:column;gap:14px;padding:24px;background:var(--bg-2);border:1px solid var(--line);text-decoration:none;min-width:0;transition:border-color .15s}
.nota:hover{border-color:var(--accent)}
.nota .medio{font-family:var(--display);font-weight:800;font-size:30px;text-transform:uppercase}
.nota p{margin:0;color:var(--fg)}
.nota .ir{margin-top:auto;font-family:var(--mono);font-size:12px;color:var(--accent-text);letter-spacing:.1em;text-transform:uppercase}

/* reels */
.reels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:900px){.reels{grid-template-columns:repeat(2,1fr)}}
.reel{position:relative;aspect-ratio:9/16;max-width:100%;background:var(--bg-2);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;padding:16px;text-decoration:none;overflow:hidden}
.reel::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 47px,var(--line) 47px 49px),repeating-linear-gradient(90deg,transparent 0 95px,var(--line) 95px 97px);opacity:.6}
.reel > *{position:relative}
.reel .play{position:absolute;top:14px;right:14px;width:34px;height:34px;border:1px solid var(--fg);display:grid;place-items:center;font-size:12px}
.reel strong{font-family:var(--display);font-size:26px;line-height:.95;text-transform:uppercase}
.reel .v{font-family:var(--mono);font-size:12px;color:var(--accent-text);margin-top:6px}
.reel:hover{border-color:var(--accent)}

/* media kit */
.kit{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}
@media (max-width:880px){.kit{grid-template-columns:1fr}}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line)}
th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400}
td.v{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.bar{height:6px;background:var(--accent);margin-top:8px;transform-origin:left}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{border:1px solid var(--line);padding:7px 13px;font-size:14px}
.note{font-size:13px;color:var(--muted);margin-top:14px}
.kit-side h3{font-size:30px;margin-bottom:10px}
.kit-side ul{margin:0;padding-left:18px}
.kit-side li{margin-bottom:8px}

/* programa */
.programa{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media (max-width:880px){.programa{grid-template-columns:1fr}}
.programa h2{font-size:clamp(46px,7vw,96px);font-weight:900}
.programa h2 em{font-style:normal;color:var(--accent-text)}
.fases{display:grid;gap:12px}
.fase{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:20px;background:var(--bg-2);border:1px solid var(--line)}
.fase .n{font-family:var(--metal);font-size:52px;line-height:.8;color:var(--accent-text)}
.fase h3{font-size:26px;margin-bottom:4px}
.fase p{margin:0;color:var(--muted);font-size:15px}

/* código */
.code{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;border:1px solid var(--line);background:var(--bg-2);padding:32px}
.code .c{font-family:var(--metal);font-size:clamp(54px,10vw,128px);font-weight:900;letter-spacing:.04em;line-height:.9}
.code .c small{font-family:var(--body);font-weight:800;font-size:.32em;color:var(--accent-text);margin-left:12px;vertical-align:top}

/* tienda */
.shop{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:820px){.shop{grid-template-columns:1fr}}
.item .ph{aspect-ratio:1;max-width:100%;background:radial-gradient(circle at 50% 40%,#1f0a0d,var(--bg-2) 70%);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--metal);font-size:clamp(36px,4.5vw,52px);color:#4a2a2d;text-transform:uppercase;text-align:center;padding:16px;line-height:.92}
.item h3{font-size:26px;margin-top:14px}
.item p{margin:4px 0 0;color:var(--muted);font-size:14px}

/* formularios */
form{display:grid;gap:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.row2{grid-template-columns:1fr}}
label{display:grid;gap:6px;font-size:14px;color:var(--muted)}
input,select,textarea{background:var(--bg-2);border:1px solid var(--line);color:var(--fg);font:inherit;padding:13px;width:100%;border-radius:0}
textarea{min-height:120px;resize:vertical}
.ok{font-family:var(--mono);font-size:13px;border-left:3px solid var(--accent);padding:9px 12px;background:var(--bg-2);margin:0}
.waitlist{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.waitlist input{flex:1 1 240px;width:auto}

/* preguntas */
.faq{display:grid;gap:0;max-width:860px}
.faq details{border-top:1px solid var(--line);padding-block:18px}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-family:var(--display);font-size:clamp(22px,2.6vw,30px);font-weight:800;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-text)}
.faq details[open] summary::after{content:"−"}
.faq p{color:var(--muted);margin:12px 0 0;max-width:68ch}

/* contacto */
.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px}
@media (max-width:880px){.contact{grid-template-columns:1fr}}
.contact h2{font-size:clamp(56px,9vw,120px);font-weight:900}
.mail{font-family:var(--mono);font-size:18px;word-break:break-all;margin:6px 0 0}

footer .wrap{padding-block:40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.footer-word{padding-top:44px;overflow:hidden}

/* ---- Sitio real (no estaba en la demo) ---- */
.saltar{position:absolute;left:12px;top:-60px;z-index:20;background:var(--fg);color:var(--bg);padding:10px 14px;font-family:var(--mono);font-size:13px;text-decoration:none}
.saltar:focus{top:12px}
img{max-width:100%}
.brand-logo,.hero-logo,.footer-logo,.ph-logo{aspect-ratio:1324/752}
.foto{text-decoration:none;gap:14px;align-content:center;transition:border-color .15s}
.foto img{display:block;width:min(78%,340px);height:auto;filter:drop-shadow(0 0 30px rgba(179,18,31,.45))}
.foto:hover{border-color:var(--fg)}
.mail a,.faq a,.priv a,footer a{color:inherit;text-underline-offset:3px}
.mail a{text-decoration:none}.mail a:hover{text-decoration:underline}
footer a{color:var(--fg)}
/* trampa contra robots: invisible para personas */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.priv{font-size:13px;color:var(--muted);margin:10px 0 0}
.waitlist + .ok,.waitlist ~ .ok{margin-top:14px}
.ok[data-tipo="error"]{border-left-color:var(--fg);color:var(--fg)}
[aria-invalid="true"]{border-color:var(--accent-text)}
button[disabled]{opacity:.6;cursor:wait}

/* páginas sencillas (privacidad y 404) */
.texto-legal{padding-block:56px 80px;max-width:820px}
.texto-legal h1{font-size:clamp(46px,8vw,88px)}
.texto-legal h2{font-size:clamp(28px,4vw,38px);margin:40px 0 10px}
.texto-legal p,.texto-legal li{color:var(--muted)}
.texto-legal strong{color:var(--fg)}
.texto-legal a:not(.btn){color:var(--fg)}

/* Recuadro de reel con un pedacito del video real (sin sonido). Se ve la portada quieta hasta que el video carga. */
.reel-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}
.reel.con-video::before{z-index:1;opacity:.25}
.reel.con-video::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(10,9,9,.92) 0%,rgba(10,9,9,.2) 45%,transparent 70%)}
.reel.con-video > :not(video){z-index:2}

/* Foto de Iván en la portada (redonda, como su foto de perfil) */
.foto .retrato{width:min(92%,440px);height:auto;border-radius:50%;filter:none;box-shadow:0 0 0 2px var(--accent),0 0 46px rgba(179,18,31,.38)}
@media (max-width:880px){.foto.con-retrato{aspect-ratio:auto;padding:28px 20px 22px}.foto .retrato{width:min(78%,340px)}}