/*
Theme Name: Eternal Metal Cinematic
Theme URI: https://eternalmetal.cl/
Author: Eternal Metal
Description: Experiencia cinematográfica 3D para Eternal Metal: negro, azul profundo, lila eléctrico y blanco, con navegación, entradas y páginas con profundidad y animaciones.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: eternal-metal-cinematic
*/

:root{
 --em-black:#030307;
 --em-ink:#070812;
 --em-blue:#111a3a;
 --em-violet:#7c4dff;
 --em-violet2:#b38cff;
 --em-white:#f7f7ff;
 --em-muted:#b7b9c9;
 --em-line:rgba(179,140,255,.24);
 --em-glass:rgba(8,10,22,.72);
 --em-shadow:0 30px 90px rgba(0,0,0,.58);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;background:radial-gradient(circle at 50% -10%,#18234e 0,#070812 38%,#020205 100%);
 color:var(--em-white);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 line-height:1.65;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button,input,textarea{font:inherit}
::selection{background:var(--em-violet);color:white}
.em-noise,.em-stars,.em-grid,.em-orb{position:fixed;inset:0;pointer-events:none;z-index:-1}
.em-noise{opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%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)' opacity='.6'/%3E%3C/svg%3E")}
.em-stars{background-image:radial-gradient(circle,rgba(255,255,255,.65) 0 1px,transparent 1.5px);background-size:85px 85px;opacity:.18;transform:translateZ(0)}
.em-grid{background-image:linear-gradient(rgba(124,77,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(124,77,255,.08) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);opacity:.25}
.em-orb{inset:auto;width:55vw;height:55vw;border-radius:50%;background:radial-gradient(circle,rgba(124,77,255,.18),rgba(33,61,160,.08) 35%,transparent 70%);filter:blur(10px);top:10vh;left:22vw;animation:orb 12s ease-in-out infinite alternate}
@keyframes orb{to{transform:translate3d(4vw,8vh,0) scale(1.12)}}
.em-header{position:fixed;top:0;left:0;right:0;z-index:50;padding:18px 4vw;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(2,2,7,.92),rgba(2,2,7,.42),transparent);backdrop-filter:blur(10px)}
.em-brand{font-weight:900;letter-spacing:.14em;font-size:clamp(14px,1.5vw,20px);text-transform:uppercase}
.em-brand span{color:var(--em-violet2);text-shadow:0 0 24px rgba(124,77,255,.75)}
.em-nav{display:flex;gap:clamp(12px,2vw,30px);align-items:center}
.em-nav a{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#dfe1f0;opacity:.82;position:relative}
.em-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:2px;background:linear-gradient(90deg,var(--em-violet),#fff);box-shadow:0 0 14px var(--em-violet);transition:.35s}
.em-nav a:hover:after,.em-nav .current-menu-item a:after{right:0}
.em-menu-toggle{display:none;background:none;border:0;color:white;font-size:24px}
.em-wrap{width:min(1200px,92vw);margin:auto}
.em-hero{min-height:100svh;display:grid;place-items:center;position:relative;padding:120px 0 80px;overflow:hidden}
.em-hero-content{text-align:center;position:relative;z-index:4;max-width:900px}
.em-kicker{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--em-violet2);font-weight:900}
.em-title{font-size:clamp(58px,12vw,170px);line-height:.82;margin:18px 0 28px;font-weight:950;letter-spacing:-.065em;text-transform:uppercase;text-shadow:0 18px 60px rgba(0,0,0,.75)}
.em-title .glow{color:#fff;text-shadow:0 0 20px rgba(179,140,255,.55),0 0 70px rgba(124,77,255,.35)}
.em-subtitle{color:#d4d6e2;font-size:clamp(15px,2vw,21px);max-width:700px;margin:0 auto 34px}
.em-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.em-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border:1px solid var(--em-line);border-radius:999px;background:rgba(11,12,28,.7);font-size:12px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;transition:.35s;box-shadow:0 10px 35px rgba(0,0,0,.35)}
.em-btn.primary{background:linear-gradient(135deg,#6540d9,#9d6fff);border-color:#bda6ff;color:white;box-shadow:0 0 30px rgba(124,77,255,.28)}
.em-btn:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 18px 45px rgba(124,77,255,.24)}
.em-stage{position:absolute;width:min(700px,70vw);aspect-ratio:1;left:50%;top:52%;transform:translate(-50%,-50%);z-index:1;perspective:1100px}
.em-core{position:absolute;inset:20%;border:1px solid rgba(179,140,255,.28);border-radius:28%;transform:rotateX(62deg) rotateZ(45deg);background:linear-gradient(135deg,rgba(124,77,255,.18),rgba(17,26,58,.15));box-shadow:inset 0 0 80px rgba(124,77,255,.14),0 0 80px rgba(124,77,255,.15);animation:core 9s linear infinite}
.em-core:before,.em-core:after{content:"";position:absolute;inset:12%;border:1px solid rgba(179,140,255,.25);border-radius:28%;transform:translateZ(50px);box-shadow:0 0 35px rgba(124,77,255,.18)}
.em-core:after{inset:25%;border-color:rgba(255,255,255,.18);transform:translateZ(100px) rotate(45deg)}
.em-ring{position:absolute;inset:5%;border:1px solid rgba(179,140,255,.22);border-radius:50%;transform:rotateX(68deg);box-shadow:0 0 40px rgba(124,77,255,.12);animation:ring 12s linear infinite}
.em-ring.r2{inset:16%;animation-duration:8s;animation-direction:reverse}
.em-ring.r3{inset:28%;animation-duration:15s}
.em-sphere{position:absolute;inset:35%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff, #c7aaff 8%,#7c4dff 25%,#18215c 55%,#05050c 72%);box-shadow:0 0 50px rgba(124,77,255,.8),0 0 120px rgba(76,84,255,.35);animation:pulse 3.8s ease-in-out infinite}
@keyframes core{to{transform:rotateX(62deg) rotateZ(405deg)}}
@keyframes ring{to{transform:rotateX(68deg) rotateZ(360deg)}}
@keyframes pulse{50%{transform:scale(1.08);box-shadow:0 0 70px rgba(124,77,255,.95),0 0 150px rgba(76,84,255,.42)}}
.em-section{padding:110px 0;position:relative}
.em-section-head{display:flex;justify-content:space-between;gap:25px;align-items:end;margin-bottom:35px}
.em-section h2{font-size:clamp(34px,5vw,70px);line-height:.95;margin:0;letter-spacing:-.04em;text-transform:uppercase}
.em-label{color:var(--em-violet2);font-weight:900;font-size:11px;letter-spacing:.3em;text-transform:uppercase}
.em-grid-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.em-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:linear-gradient(145deg,rgba(20,23,45,.86),rgba(5,6,13,.9));box-shadow:var(--em-shadow);transform-style:preserve-3d;transition:transform .5s,border-color .5s}
.em-card:hover{border-color:rgba(179,140,255,.45);transform:translateY(-8px)}
.em-card-media{aspect-ratio:16/10;background:#090a12;overflow:hidden}
.em-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s;filter:saturate(.85) contrast(1.05)}
.em-card:hover img{transform:scale(1.08)}
.em-card-body{padding:22px}
.em-card h3{font-size:21px;line-height:1.1;margin:9px 0 12px}
.em-card p{color:var(--em-muted);font-size:14px;margin:0}
.em-meta{font-size:10px;color:var(--em-violet2);font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.em-content{width:min(900px,92vw);margin:0 auto;padding:160px 0 100px}
.em-content h1{font-size:clamp(42px,7vw,88px);line-height:.95;letter-spacing:-.05em;margin:0 0 28px}
.em-content h2{font-size:clamp(28px,4vw,50px)}
.em-content p,.em-content li{color:#d9dbe7;font-size:18px}
.em-featured{border-radius:28px;overflow:hidden;margin:30px 0 55px;box-shadow:var(--em-shadow);border:1px solid rgba(179,140,255,.2)}
.em-featured img{display:block;width:100%;max-height:700px;object-fit:cover}
.em-prose{background:linear-gradient(180deg,rgba(10,11,23,.72),rgba(3,3,7,.35));border:1px solid rgba(255,255,255,.07);border-radius:24px;padding:clamp(24px,5vw,55px);box-shadow:var(--em-shadow)}
.em-footer{padding:70px 0;border-top:1px solid rgba(255,255,255,.07);background:#020207}
.em-footer-grid{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.em-footer p{color:#85899d;margin:8px 0}
.em-scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#aaa;z-index:4}
.em-scroll:after{content:"";display:block;width:1px;height:45px;margin:12px auto 0;background:linear-gradient(#aaa,transparent)}
.em-loader{position:fixed;inset:0;background:#020207;z-index:100;display:grid;place-items:center;transition:opacity .8s,visibility .8s}
.em-loader.hidden{opacity:0;visibility:hidden}
.em-loader-inner{text-align:center}
.em-loader-logo{font-weight:950;letter-spacing:.2em;font-size:clamp(24px,4vw,48px)}
.em-loader-line{height:2px;width:180px;background:linear-gradient(90deg,transparent,var(--em-violet),transparent);margin:20px auto;animation:load 1.4s ease-in-out infinite}
@keyframes load{50%{transform:scaleX(.2);opacity:.4}}
@media(max-width:850px){
 .em-nav{display:none;position:absolute;top:72px;left:4vw;right:4vw;padding:20px;flex-direction:column;align-items:flex-start;background:rgba(3,3,10,.95);border:1px solid var(--em-line);border-radius:18px}
 .em-nav.open{display:flex}
 .em-menu-toggle{display:block}
 .em-grid-posts{grid-template-columns:1fr}
 .em-stage{width:110vw;top:52%}
 .em-footer-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}.em-orb,.em-core,.em-ring,.em-sphere{animation:none}.em-card,.em-btn{transition:none}
}

/* v2 accessibility/contrast + full menu */
.em-header{background:rgba(2,3,9,.94)!important;border-bottom:1px solid rgba(179,140,255,.12);min-height:72px}
.em-nav ul{list-style:none;display:flex;gap:clamp(12px,1.7vw,26px);margin:0;padding:0;align-items:center}
.em-nav li{position:relative;margin:0;padding:0}
.em-nav li a{display:block;white-space:nowrap}
.em-nav .sub-menu{position:absolute;top:calc(100% + 16px);left:0;display:none;min-width:210px;padding:10px;margin:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(3,4,12,.98);border:1px solid rgba(179,140,255,.28);border-radius:14px;box-shadow:0 22px 55px rgba(0,0,0,.7)}
.em-nav li:hover>.sub-menu,.em-nav li:focus-within>.sub-menu{display:flex}
.em-nav .sub-menu li a{padding:10px 12px;font-size:11px}
.em-nav .sub-menu li a:hover{background:rgba(124,77,255,.14)}
.em-nav .menu-item-has-children>a:after{content:" ▾";color:#b38cff}
.em-content,.em-section{isolation:isolate}
.em-content:before,.em-section:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(2,3,8,.98),rgba(4,5,14,.94) 45%,rgba(2,2,7,.99));pointer-events:none}
.em-prose,.em-card-body{position:relative;z-index:1}
.em-content h1,.em-content h2,.em-content h3,.em-section h2,.em-card h3{color:#fff!important;text-shadow:0 2px 20px rgba(0,0,0,.85)}
.em-content p,.em-content li,.em-card p,.em-subtitle{color:#e7e8f2!important;text-shadow:0 1px 12px rgba(0,0,0,.9)}
.em-content a:not(.em-btn),.em-section a:not(.em-btn){color:#c8b3ff}
.em-content a:not(.em-btn):hover,.em-section a:not(.em-btn):hover{color:#fff}
.em-page-hero{min-height:62vh;display:grid;place-items:end;padding:170px 0 70px;position:relative;overflow:hidden}
.em-page-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,3,9,.15),rgba(2,3,9,.92) 88%);z-index:0}
.em-page-hero>*{position:relative;z-index:1}
.em-floating-title{transform:translateZ(0);animation:floatTitle 5s ease-in-out infinite}
@keyframes floatTitle{50%{transform:translateY(-9px);text-shadow:0 18px 55px rgba(124,77,255,.22)}}
@media(max-width:850px){
 .em-nav ul{flex-direction:column;align-items:stretch;width:100%;gap:0}
 .em-nav .sub-menu{position:static;display:flex;box-shadow:none;background:rgba(255,255,255,.025);border:0;margin:5px 0}
 .em-nav{max-height:calc(100vh - 90px);overflow:auto}
}