/*
Theme Name: TarotLuz
Theme URI: https://www.tarotluz.com/
Author: Diego Texeira (TarotLuz)
Author URI: https://texeiramarketingdigital.com
Description: Landing minimalista para TarotLuz con hero, servicios, precios, FAQ y contacto por WhatsApp. Liviano y 100% editable.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tarotluz
*/

:root{
  --bg:#0b0a13;
  --bg-soft:#11101c;
  --card:#141326;
  --brand:#c69cff;
  --brand-2:#8ed1ff;
  --text:#EAEAF6;
  --muted:#A2A3B8;
  --ok:#7CF29A;
  --danger:#ff8e8e;
  --max:1200px;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:var(--text);
  background:radial-gradient(1200px 600px at 80% -10%, rgba(131,94,255,.15), transparent 60%),
             radial-gradient(800px 400px at 10% 10%, rgba(118,220,255,.08), transparent 60%), var(--bg);
}

a{color:var(--brand); text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}

/* Nav */
header.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(6px);
  background:rgba(11,10,19,.6); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:36px; height:36px; border-radius:50%; background:conic-gradient(from 210deg, var(--brand), var(--brand-2));
  display:grid; place-items:center; box-shadow:var(--shadow)}
.logo svg{width:22px; height:22px; filter:drop-shadow(0 2px 8px rgba(198,156,255,.45))}
.brand-title{font-family:'Cinzel', serif; letter-spacing:.5px; font-weight:700}
.menu-btn{display:none; background:none; border:0; color:var(--text)}

.site-menu{list-style:none; display:flex; gap:18px; padding:0; margin:0}
.site-menu a{color:var(--text); opacity:.9}
.site-menu a:hover{opacity:1}
.cta{background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#0b0a13; padding:10px 16px; border-radius:999px; font-weight:700; box-shadow:0 10px 22px rgba(140,100,255,.25);}

/* Hero */
.hero{display:grid; align-items:center; grid-template-columns:1.2fr 1fr; gap:36px; padding:56px 0}
.tag{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; background:rgba(198,156,255,.12); border:1px solid rgba(198,156,255,.25); color:#e7dcff; font-size:13px}
h1{font-family:'Cinzel', serif; font-size:44px; line-height:1.15; margin:12px 0 12px}
.lead{color:var(--muted); font-size:18px; max-width:56ch}
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.bullets{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.bullet{display:flex; gap:10px; align-items:flex-start; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); padding:10px 12px; border-radius:12px}
.bullet .dot{width:9px; height:9px; border-radius:50%; background:var(--ok); margin-top:7px}

/* Sections */
section{padding:64px 0; border-top:1px solid rgba(255,255,255,.06)}
h2{font-family:'Cinzel',serif; font-size:32px; margin:0 0 16px}
.grid{display:grid; gap:20px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.price{font-size:36px; font-weight:800}
.note{color:var(--muted); font-size:14px}
.list{display:grid; gap:8px; margin:12px 0 0; padding:0}
.list li{list-style:none; display:flex; align-items:flex-start; gap:8px}
.list li::before{content:'✦'; color:var(--brand); margin-top:2px}

/* FAQ */
details{background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:14px 16px}
summary{cursor:pointer; font-weight:700}

/* Footer */
.site-footer{padding:40px 0; color:var(--muted)}

/* Responsive */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr; padding:36px 0}
  .bullets{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .menu-btn{display:inline-flex}
  nav .site-menu{display:none; position:absolute; right:20px; top:68px; background:var(--bg-soft); padding:14px; border:1px solid rgba(255,255,255,.07); border-radius:12px; flex-direction:column; gap:10px}
  nav .site-menu.open{display:flex}
}