/* Vindle Studio — estilo vieja escuela: piedra, pergamino y dorado envejecido */
:root{
  --bg:#0a0705; --bg2:#120c07;
  --stone:#1d1409; --stone2:#100b06;
  --gold:#8a6f3a; --gold-hi:#d8c08a; --gold-dim:#5a4a28;
  --blood:#8e1f1f; --blood-deep:#4a0d0d; --red:#c02727;
  --bone:#e6d9bd; --parch:#c9b183; --mut:#9a8a68;
  --line:#4a3a22;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--bone);
  font-family:Inter,system-ui,Arial,sans-serif;line-height:1.65;
  background:
    radial-gradient(1100px 500px at 50% -8%, #2b1608 0%, transparent 60%) fixed,
    repeating-linear-gradient(0deg, rgba(255,255,255,.008) 0 2px, transparent 2px 4px) fixed,
    var(--bg);
}
/* viñeta de taberna vieja */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%)}
h1,h2,h3,.brand-text{line-height:1.25}
h2{font-family:"Cinzel Decorative",Cinzel,serif;font-weight:900;letter-spacing:.01em}
h3,.card-top,.brand-text,.faq summary{font-family:Cinzel,serif}
a{color:var(--gold-hi)}
section{scroll-margin-top:72px}
img{max-width:100%;height:auto}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  padding:.7rem 1.2rem;background:linear-gradient(#17100a,#0c0805);border-bottom:2px solid var(--gold-dim);
  box-shadow:0 4px 18px rgba(0,0,0,.7)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--bone)}
.brand-logo{height:38px;width:auto}
.brand-text{font-weight:900;font-size:1.2rem;letter-spacing:.06em}
.brand-text small{display:block;font-size:.6rem;letter-spacing:.5em;color:var(--mut)}
.links{display:flex;gap:1rem;align-items:center}
.links a{color:var(--bone);text-decoration:none;opacity:.85;padding:.3rem .1rem}
.links a:hover,.links a.active{opacity:1;color:#fff}
.links a.active{border-bottom:2px solid var(--red)}
.btn-small{border:1px solid var(--gold);padding:.35rem .8rem;border-radius:4px}
.menu-btn{display:none;background:linear-gradient(#3a2a14,#1c1208);border:2px solid var(--gold-dim);color:var(--gold-hi);
  font-size:1.2rem;border-radius:6px;padding:.25rem .6rem;cursor:pointer}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;padding:3rem 5vw;align-items:center;min-height:82vh;max-width:1300px;margin:0 auto}
.hero-logo{width:min(420px,82%);filter:drop-shadow(0 0 25px rgba(180,40,20,.35)) sepia(.25)}
.hero-title-fallback{font-family:"Pirata One",Cinzel,serif;font-size:clamp(3rem,9vw,5rem);margin:0;font-weight:400;
  background:linear-gradient(#f4e6c0,#8a6f3a 45%,#3a2a14 55%,#d8c08a);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 30px rgba(180,40,20,.3)}
.hero-title-fallback span{display:block;font-family:Cinzel,serif;font-size:1rem;letter-spacing:.6em;color:var(--mut)}
.kicker{color:var(--red);letter-spacing:.28em;font-size:.72rem;font-weight:700;text-transform:uppercase}
.hero-subtitle{font-size:clamp(1.7rem,4vw,2.4rem);margin:.5rem 0;color:var(--bone)}
.hero-desc{color:var(--parch);max-width:60ch}
.badges{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.badge{border:1px solid var(--gold-dim);background:#160f08;color:var(--parch);padding:.3rem .7rem;border-radius:4px;font-size:.8rem}
.pulse{border-color:var(--red);box-shadow:0 0 12px rgba(192,39,39,.45)}
.cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1rem}

/* botones de piedra tallada */
.btn{padding:.8rem 1.3rem;border-radius:6px;text-decoration:none;font-weight:700;font-family:Cinzel,serif;letter-spacing:.03em;
  display:inline-block;text-align:center;color:var(--bone);
  border:2px solid #6b5a2e;background:linear-gradient(#3a2a14,#1c1208);
  box-shadow:inset 0 1px 0 rgba(216,192,138,.4), inset 0 -2px 0 #000, 0 3px 10px rgba(0,0,0,.6)}
.btn:hover{border-color:var(--gold-hi)}
.btn.primary{background:linear-gradient(#8e1f1f,#4a0d0d);border-color:#a03a2a;color:#ffe9c9;
  box-shadow:inset 0 1px 0 rgba(255,220,180,.35), inset 0 -2px 0 #000, 0 4px 18px rgba(142,31,31,.5)}
.btn.ghost{color:var(--bone)}

/* ---------- Tablillas de piedra ---------- */
.card{background:linear-gradient(#1d1409,#100b06);border:1px solid #6b5a2e;border-radius:8px;padding:1.2rem;
  box-shadow:inset 0 0 0 3px #0a0705, inset 0 0 0 4px rgba(138,111,58,.35), 0 10px 30px rgba(0,0,0,.6);min-width:0}
.card h3{color:var(--gold-hi);margin-top:0}
.card-top{font-size:.8rem;letter-spacing:.2em;color:var(--gold-hi);margin-bottom:.8rem;text-align:center}
.hex-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:.5rem 0 1rem}
.hex-grid span{aspect-ratio:1.1;background:#241a0e;border:1px solid #5a4a28;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.hex-grid span.a{background:radial-gradient(circle,#c0392b,#4a0d0d)}
.hex-grid span.b{background:radial-gradient(circle,#7a6fd0,#1a1440)}
.versus{display:grid;grid-template-columns:1fr auto 1fr;gap:.6rem;align-items:center;text-align:center}
.versus strong{font-family:Cinzel,serif;color:var(--gold-hi)}
.vs{font-size:1.4rem;color:var(--red)}
.small{color:var(--mut);font-size:.85rem}

/* ---------- Secciones ---------- */
.section{padding:3rem 5vw;max-width:1300px;margin:0 auto}
.section.dark{background:linear-gradient(#140d07,#0a0705);border-top:2px solid var(--gold-dim);border-bottom:2px solid var(--gold-dim);max-width:none}
.section.dark>.wrap{max-width:1300px;margin:0 auto}
.section h2{font-size:clamp(1.5rem,3.6vw,2.2rem);margin:.3rem 0 1.2rem;color:var(--gold-hi)}
.red{color:var(--red)}
.lead{max-width:90ch;color:var(--parch)}
.dropcap::first-letter{font-family:"Pirata One",Cinzel,serif;font-size:3.1em;float:left;line-height:.85;
  padding:.05em .12em 0 0;color:var(--gold-hi)}
.divider{text-align:center;color:var(--gold);letter-spacing:.6em;padding:.4rem 0;opacity:.8}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:1rem}
.check{list-style:none;padding:0;margin:.5rem 0}
.check li{padding:.35rem 0 .35rem 1.6rem;position:relative;color:#ddd2b2}
.check li::before{content:"❖";position:absolute;left:0;color:var(--red);font-size:.8em}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.9rem;min-width:340px}
.tbl th{font-family:Cinzel,serif;color:var(--gold-hi);background:#241a0e}
.tbl th,.tbl td{border:1px solid var(--line);padding:.5rem;text-align:left}
.road{list-style:none;padding:0}
.road li{padding:.25rem 0;color:#ddd2b2}

/* ---------- Preguntas (tablillas) ---------- */
.faq-list{display:grid;gap:.7rem;max-width:820px}
.faq{background:linear-gradient(#1d1409,#100b06);border:1px solid #6b5a2e;border-radius:8px;padding:.9rem 1.1rem;
  box-shadow:inset 0 0 0 3px #0a0705}
.faq summary{cursor:pointer;font-weight:700;color:var(--gold-hi)}
.faq summary::marker{color:var(--red)}
.faq p{color:var(--parch);margin:.6rem 0 0}

/* ---------- Formulario ---------- */
.form label{display:block;margin:.7rem 0;font-weight:600;color:var(--parch)}
.form input,.form textarea{width:100%;margin-top:.3rem;background:#0d0906;border:2px inset #3a2c16;color:var(--bone);
  border-radius:4px;padding:.7rem;font:inherit}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--gold)}
.form button:disabled{opacity:.6;cursor:wait}

/* ---------- Pie / volver arriba ---------- */
footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1.4rem 5vw;color:var(--mut);font-size:.85rem;max-width:1300px;margin:0 auto}
.foot-links{display:flex;gap:1rem;flex-wrap:wrap}
.foot-links a{color:var(--mut);text-decoration:none}
.foot-links a:hover{color:var(--gold-hi)}
#top-btn{position:fixed;right:1rem;bottom:1rem;z-index:30;width:44px;height:44px;border-radius:6px;
  border:2px solid #6b5a2e;background:linear-gradient(#8e1f1f,#4a0d0d);color:#ffe9c9;font-size:1.2rem;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .25s}
#top-btn.show{opacity:1;pointer-events:auto}

.embers{position:fixed;inset:0;pointer-events:none;z-index:4;
  background-image:radial-gradient(2px 2px at 20% 80%, rgba(255,120,20,.45), transparent),
  radial-gradient(1px 1px at 70% 60%, rgba(200,30,20,.4), transparent);opacity:.35}

/* ---------- Aparición ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- Responsivo ---------- */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto;padding:2rem 5vw;text-align:center}
  .hero-inner .cta,.badges{justify-content:center}
  .hero-desc{margin-left:auto;margin-right:auto}
  .hero-logo{margin:0 auto}
}
@media(max-width:760px){
  .menu-btn{display:block}
  .links{position:absolute;top:100%;right:.8rem;flex-direction:column;align-items:stretch;gap:0;
    background:#140d07;border:2px solid var(--gold-dim);border-radius:8px;padding:.5rem;min-width:210px;display:none;
    box-shadow:0 14px 40px rgba(0,0,0,.7)}
  .links.open{display:flex}
  .links a{padding:.6rem .8rem;border-radius:6px}
  .links a:hover{background:#241a0e}
  .versus{grid-template-columns:1fr;gap:.2rem}
  .vs{padding:.2rem 0}
  .section{padding:2.2rem 5vw}
  .btn{width:100%}
  .cta .btn{flex:1 1 100%}
  .divider{letter-spacing:.3em}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}