/* =========================================
   Base
========================================= */
html { color-scheme: dark; background:#000; }
* { box-sizing:border-box; }
html, body { height:100%; margin:0; padding:0; overflow-x:hidden; }

/* =====================
   Paleta y fuentes
===================== */
:root{
  --bg:#0a0a0a;
  --ink:#e5d2a1;
  --gold:#D4AF37;
  --crimson:#7B1E1E;
  --muted:#B5B5B5;
  --panel:#121212;
  --ring:rgba(212,175,55,.35);
  --shadow:0 0 32px rgba(212,175,55,.18);
  --logo-size-header:36px;
  --logo-size-hero:140px;
  --text-light:#f5f5f5;
}
html[data-theme="dark"]{ color-scheme:dark; background:#000; }

body{
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(212,175,55,.04), transparent 60%),
    radial-gradient(800px 500px at 90% 20%, rgba(123,30,30,.06), transparent 55%),
    #000;
  font-family:"Lora", serif;
}

/* Spotlight */
.spotlight{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(160px 160px at var(--mx,50%) var(--my,50%), rgba(212,175,55,.12), transparent 60%);
  transition:opacity .2s ease;
}
@media (prefers-reduced-motion:reduce){ .spotlight{ display:none; } }

/* =========================================
   Header (fondo en ::before para no atenuar contenido)
========================================= */
.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1.25rem;
  background:transparent;
  border-bottom:3px solid rgba(212,175,55,.15);
  isolation:isolate;
}
.site-header::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.30));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  z-index:0; pointer-events:none;
}
.site-header > *{ position:relative; z-index:1; }

.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--ink); }

.brand__seal-wrap,
.hero__seal-wrap{
  position:relative; display:inline-grid; place-items:center;
  opacity:1 !important; filter:none !important; mix-blend-mode:normal !important;
}

/* Tamaños por si se usa <img> */
.brand__seal-img{ width:var(--logo-size-header); height:var(--logo-size-header); display:block; }
.hero__seal-img { width:200px; height:auto; aspect-ratio:1/1; object-fit:contain; display:block; }

/* =======================================================
   *** RENDER INFALIBLE DEL LOGO EN BLANCO ***
   1) Si HAY soporte de máscara: usamos la DIV .logo-mask / .hero__logo-mask
   2) Si NO hay soporte: usamos <img> y la forzamos a blanco con filter
======================================================= */

/* 1) Soporte de mask → pintamos el sello con fondo blanco 100% */
@supports ( (-webkit-mask: url("")) or (mask: url("")) ) {
  /* ocultamos las <img> para que no dupliquen */
  .brand__seal-img, .hero__seal-img{ display:none !important; }

  .logo-mask,
  .hero__logo-mask{
    display:inline-block !important;
    background-color:#fff !important;    /* el color del sello */
    /* máscara con la misma SVG */
    -webkit-mask: url("assets/sello-astaroth.svg") no-repeat center / contain;
            mask: url("assets/sello-astaroth.svg") no-repeat center / contain;
    /* asegurar opacidad total (nada de “tenue”) */
    opacity:1 !important; filter:none !important; -webkit-filter:none !important;
    mix-blend-mode:normal !important; isolation:isolate;
  }
  .logo-mask{ width:var(--logo-size-header); height:var(--logo-size-header); }
  .hero__logo-mask{ width:var(--logo-size-hero); height:var(--logo-size-hero); }
}

/* 2) SIN soporte de mask → usamos <img> y la volvemos blanca por filtro */
@supports not ( (-webkit-mask: url("")) or (mask: url("")) ) {
  .logo-mask, .hero__logo-mask{ display:none !important; }
  .brand__seal-img,
  .hero__seal-img{
    display:block !important;
    filter: brightness(0) invert(1) contrast(1.05) !important;
    -webkit-filter: brightness(0) invert(1) contrast(1.05) !important;
    opacity:1 !important; mix-blend-mode:normal !important;
  }
}

.brand__title{ font-family:"Cinzel", serif; letter-spacing:.08em; font-weight:700; }

/* =========================================
   Navegación (desktop + móvil)
========================================= */
.nav a{
  color:var(--muted); text-decoration:none; margin-left:1rem;
  font-weight:600; transition:color .2s ease;
}
.nav a:hover, .nav__cta{ color:var(--ink); }
.nav__cta{ border-bottom:2px solid var(--gold); padding-bottom:2px; }

nav.nav{ display:flex; align-items:center; gap:1.5em; }
nav.nav > .menu{ position:relative; }
.nav .menu > a{ display:block; padding:.9em 1em; width:100%; box-sizing:border-box; }

/* Dropdowns (desktop) */
.nav .menu > .submenu,
.nav .submenu .subsubmenu{
  display:none; position:absolute; background-color:#000; border:1px solid #333;
  top:100%; left:0; z-index:999; min-width:220px;
}
.nav .submenu a, .nav .subsubmenu a{
  display:block; padding:.5em 1em; color:var(--ink); text-decoration:none; white-space:nowrap;
}
.nav .submenu li{ position:relative; }

/* Desktop: hover/focus abre */
@media (min-width:901px){
  .nav .menu:hover > .submenu,
  .nav .menu:has(.submenu:hover) > .submenu,
  .nav .menu:focus-within > .submenu{ display:block; }

  .nav .submenu li:hover > .subsubmenu,
  .nav .submenu li:has(.subsubmenu:hover) > .subsubmenu,
  .nav .submenu li:focus-within > .subsubmenu{
    display:block; top:0; left:calc(100% - 1px);
  }
}

/* Backdrop móvil */
.nav-backdrop{
  position:fixed; inset:0; background:transparent; z-index:900;
  opacity:0; transition:opacity .2s ease; pointer-events:none;
}
.nav-backdrop.show{ opacity:1; pointer-events:auto; }
.nav-backdrop[hidden]{ display:none; }

/* Móvil (panel lateral) */
.hamburger{ display:none; width:28px; height:22px; padding:0; border:0; background:transparent;
  cursor:pointer; flex-direction:column; justify-content:space-between; }
.hamburger span{ display:block; width:100%; height:3px; background:var(--ink); border-radius:2px; }

@media (max-width:900px){
  .hamburger{ display:flex; }

  nav.nav{
    position:fixed; top:0; right:0; left:auto;
    height:100vh; width:min(74vw,300px); padding:1rem .9rem 1rem; z-index:1200;
    background:#0e0e0e; border-left:1px solid rgba(212,175,55,.35); box-shadow:-22px 0 60px rgba(0,0,0,.55);
    display:flex; flex-direction:column; gap:0; overflow-y:auto;
    visibility:hidden; transform:translate3d(100%,0,0);
    transition:transform .26s cubic-bezier(.4,.03,.2,1), visibility 0s .26s;
    will-change:transform; contain:content; backface-visibility:hidden;
  }
  nav.nav.open{ visibility:visible; transform:translate3d(0,0,0); }

  .nav .submenu, .nav .subsubmenu{
    position:relative !important; left:0 !important; top:0 !important; min-width:0 !important;
    border:0 !important; background:none !important; box-shadow:none !important;
    display:none !important; padding-left:1rem;
  }
  .nav .menu.open > .submenu{ display:block !important; }
  .nav .submenu > li.open > .subsubmenu{ display:block !important; }

  .menu:hover > .submenu, .submenu li:hover > .subsubmenu{ display:none !important; }

  #mobileNav{ touch-action:manipulation; }
  .nav .menu > a{ -webkit-tap-highlight-color:transparent; }
}

/* =========================================
   Hero
========================================= */
.hero{ position:relative; display:grid; place-items:center; min-height:70vh; z-index:1; }
.hero__content{ text-align:center; padding:2rem; }
.hero__seal{ width:140px; height:140px; opacity:.95; }
.hero__title{
  font-family:"Cinzel", serif; font-size:clamp(2rem, 4vw, 3rem);
  margin:.75rem 0 .25rem; letter-spacing:.06em;
}
.hero__subtitle{ color:var(--muted); margin-bottom:1.25rem; }

/* =========================================
   Botones
========================================= */
.btn{
  display:inline-block; padding:.9rem 1.2rem; border-radius:10px;
  text-decoration:none; font-weight:700; letter-spacing:.05em;
  border:1px solid transparent; transition: transform .15s ease, box-shadow .15s ease, filter .2s ease;
}
.btn--primary{ background:var(--crimson); border-color:var(--gold); color:#fff; }
.btn--gold{ background:var(--gold); color:#111; }
.btn--ghost{ background:transparent; border-color:var(--gold); color:var(--ink); }
.btn:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.glow:hover{
  box-shadow:0 0 24px rgba(212,175,55,.35), inset 0 0 12px rgba(212,175,55,.15);
  filter:drop-shadow(0 0 6px rgba(212,175,55,.35));
  transform:translateY(-1px);
}

/* =========================================
   Auth / Modal
========================================= */
.auth{ display:grid; place-items:center; padding:3rem 1rem; }
.auth__card{
  width:min(560px, 92%); background:var(--panel);
  border:1px solid rgba(212,175,55,.18); border-radius:16px;
  padding:1.2rem 1.2rem 1.4rem; box-shadow:var(--shadow);
}
.auth__card h2{ font-family:"Cinzel", serif; margin-top:0; }
.auth__form label{ display:block; margin-bottom:.9rem; }
.auth__form span{ display:block; margin-bottom:.35rem; color:var(--muted); font-size:.95rem; }
.auth__form input{
  width:100%; padding:.8rem .9rem; border-radius:10px; border:1px solid rgba(212,175,55,.25);
  background:#0e0e0e; color:var(--ink);
}
.auth__actions{ display:flex; gap:.6rem; margin-top:.6rem; flex-wrap:wrap; }
.auth__help{ display:inline-block; margin-top:.6rem; color:var(--muted); text-decoration:none; }

.no-scroll{ overflow:hidden; }
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1000; }
.modal[aria-hidden="false"]{ display:flex; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(2px); }
.modal__dialog{
  position:relative; width:min(560px, 92vw); max-width:98vw; max-height:96vh;
  background:var(--panel); border:1px solid rgba(212,175,55,.25); border-radius:16px;
  padding:1.2rem 1.2rem 1.4rem; color:var(--ink);
  box-shadow:0 24px 80px rgba(0,0,0,.55), 0 0 28px rgba(212,175,55,.18);
  transform:translateY(8px) scale(.96); opacity:0;
  transition: transform .18s ease, opacity .18s ease; overflow-y:auto;
}
.modal[aria-hidden="false"] .modal__dialog{ transform:translateY(0) scale(1); opacity:1; }
.modal__close{
  position:absolute; right:.6rem; top:.4rem; width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(212,175,55,.35); background:transparent; color:var(--ink);
  font-size:1.2rem; cursor:pointer;
}
.modal__close:hover{ box-shadow:0 0 18px rgba(212,175,55,.35); }

/* =========================================
   Footer
========================================= */
.site-footer{
  text-align:center; padding:2em 1.25rem; color:var(--muted);
  border-top:3px solid rgba(212,175,55,.15);
}
.full-bleed{ width:100vw; position:left; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }

/* =========================================
   Pilares
========================================= */
.pillars{ display:grid; gap:1rem; grid-template-columns:repeat(12, 1fr); }
.pillar{
  grid-column:span 12; background:#121212; border:1px solid rgba(212,175,55,.18);
  border-radius:14px; box-shadow:0 0 22px rgba(212,175,55,.08); overflow:hidden;
}
@media (min-width:720px){ .pillar{ grid-column:span 6; } }
@media (min-width:1024px){ .pillar{ grid-column:span 4; } }
.pillar > summary{
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding:.95rem 1.05rem; cursor:pointer; user-select:none; color:var(--text-light);
  font-weight:700; letter-spacing:.02em;
}
.pillar > summary::-webkit-details-marker{ display:none; }
.pillar > summary::after{
  content:""; width:10px; height:10px;
  border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:rotate(-45deg); transition:transform .22s ease, filter .22s ease;
  filter:drop-shadow(0 0 6px rgba(212,175,55,.25));
}
.pillar[open] > summary::after{ transform:rotate(45deg); }
.pillar > summary:hover{ background:rgba(212,175,55,.06); }
.pillar > summary:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.pillar__content{
  max-height:0; overflow:hidden; padding:0 1.05rem; color:var(--muted);
  transition:max-height .24s ease, padding .24s ease;
}
.pillar[open] .pillar__content{ max-height:240px; padding:.15rem 1.05rem 1rem; }
.pillar__content p{ margin:.25rem 0 0; line-height:1.7; }

/* =========================================
   Acordeón
========================================= */
.accordion details{
  border:1px solid #333; border-radius:6px; margin:.5em 0; padding:.7em 1em; background:#000; cursor:pointer;
  transition:background .3s ease;
}
.accordion summary{
  list-style:none; color:var(--gold); font-weight:600; font-size:1.1em; cursor:pointer; position:relative; padding-right:1.5em;
}
.accordion summary::after{ content:"▸"; position:absolute; right:.3em; transition:transform .3s ease; }
.accordion[open] summary::after, .accordion details[open] summary::after{ transform:rotate(90deg); }
.accordion p{ margin:.5em 0 0; color:var(--text-light); font-family:'Lora', serif; }

/* =========================================
   Títulos
========================================= */
.section__title{ color:var(--gold); text-transform:uppercase; letter-spacing:1px; }