/* ===== TAROT ONLINE — Mini framework para subpáginas (paleta morado + dorado) ===== */
:root{
  --c-bg:#f8f4ff; --c-surface:#FFFFFF; --c-text:#1a0e3a; --c-muted:#5b4e7a;
  --c-primary:#2d1b5e; --c-primary-dark:#1a0e3a; --c-accent:#c9920a; --c-accent-light:#e8c06a;
  --purple-dim:rgba(45,27,94,.10); --purple-glow:rgba(45,27,94,.25); --gold-dim:rgba(201,146,10,.12); --gold-glow:rgba(201,146,10,.28);
  --dark:#1a0e3a; --dark2:#2d1b5e; --dark3:#1a0e3a;
  --r-xl:20px; --r-lg:14px; --r-md:10px;
  --sh-1:0 8px 24px rgba(26,14,58,.10); --sh-2:0 14px 36px rgba(26,14,58,.16);
  --font-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-heading:'Montserrat',sans-serif;
}
*{box-sizing:border-box}
body{margin:0; font-family:var(--font-body); color:var(--c-text); background:var(--c-bg); line-height:1.7; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:0 22px}
.prose{font-size:1.075rem; color:var(--c-muted)}
.prose h1,.prose h2,.prose h3{font-family:var(--font-heading); color:var(--c-text); line-height:1.12}
.prose h1{font-size:clamp(34px,5vw,52px); margin:0 0 10px}
.prose h2{font-size:clamp(24px,4vw,34px); margin:26px 0 10px}
.prose h3{font-size:clamp(19px,3.2vw,26px); margin:22px 0 8px}
.prose p{margin:0 0 14px}
.hl{background:linear-gradient(90deg,rgba(45,27,94,.15),rgba(45,27,94,.06)); padding:.05em .35em; border-radius:.45em; font-weight:700; color:var(--c-primary)}

/* ===== HEADER — dark theme ===== */
.header{position:sticky; top:0; z-index:100; background:rgba(26,14,58,.97); backdrop-filter:blur(8px) saturate(140%); border-bottom:1px solid rgba(201,146,10,.18)}
.header-inner{height:66px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:10px; font-weight:800}

.brand-text{color:#fff; font-size:.95rem; line-height:1.2}
.brand-sub{color:rgba(255,255,255,.6); display:block; font-size:.76rem; font-weight:600; letter-spacing:.4px}
.nav{display:flex; align-items:center; gap:4px}
.nav a{padding:8px 10px; border-radius:10px; font-weight:600; white-space:nowrap; color:#c8d0db}
.nav a:hover{background:rgba(201,146,10,.10); color:#fff}
/* Botón WhatsApp en nav */
.nav .btn-primary{background:linear-gradient(135deg,#c9920a,#a97808); color:#fff; box-shadow:0 6px 16px rgba(201,146,10,.28)}
.nav .btn-primary:hover{background:linear-gradient(135deg,#e01535,#b00d27); color:#fff}

/* Dropdown de servicios */
.nav-dropdown{position:relative}
.nav-dropdown > .nav-dropdown-toggle{
  display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:10px;
  font-weight:700; cursor:pointer; color:#c8d0db
}
.nav-dropdown > .nav-dropdown-toggle:hover{background:rgba(201,146,10,.10); color:#fff}
.nav-dropdown > .nav-dropdown-toggle svg{width:14px; height:14px; transition:transform .2s}
.nav-dropdown:hover > .nav-dropdown-toggle svg{transform:rotate(180deg)}
.nav-dropdown-menu{
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:#2d1b5e; border-radius:16px;
  box-shadow:0 20px 48px rgba(0,0,0,.45);
  padding:10px; min-width:230px; z-index:200;
  border:1px solid rgba(201,146,10,.18);
  padding-top:14px;
}
.nav-dropdown-menu::before{
  content:''; position:absolute; top:-14px; left:0; right:0; height:14px;
}
.nav-dropdown:hover .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{
  display:flex; align-items:center; gap:10px; padding:9px 14px;
  border-radius:10px; font-weight:600; font-size:.93rem; color:#c8d0db
}
.nav-dropdown-menu a:hover{background:rgba(201,146,10,.14); color:#e8c06a}
.nav-dropdown-menu a i{width:18px; text-align:center; color:#c9920a; opacity:.9}

/* ===== HERO MINI ===== */
.hero-mini{
  position:relative; padding:80px 0 60px; overflow:hidden;
  background:linear-gradient(135deg, #1a0e3a 0%, #1a0e3a 100%);
  color:#e8edf2;
}
.hero-mini::after{
  content:''; position:absolute; top:-40%; right:-8%;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,146,10,.14) 0%, transparent 70%);
  pointer-events:none;
}
.kicker{
  display:inline-block; font-weight:800; color:var(--c-accent-light);
  background:rgba(201,146,10,.14); border:1px solid rgba(201,146,10,.30);
  padding:6px 14px; border-radius:999px; letter-spacing:.3px; font-size:.88rem
}
.hero-mini h1{
  font-family:var(--font-heading);
  font-size:clamp(30px,5vw,50px);
  color:#fff; margin:14px 0 10px; line-height:1.1
}
.hero-mini .hero-sub{color:rgba(232,237,242,.72); font-size:1.08rem; max-width:640px; margin:0 0 28px; line-height:1.7}
.hero-meta{display:flex; flex-wrap:wrap; gap:16px; margin-top:8px}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(201,146,10,.10); border:1px solid rgba(201,146,10,.22);
  padding:8px 14px; border-radius:999px; font-size:.88rem; font-weight:600; color:#e8edf2
}
.hero-badge i{color:#c9920a}

/* ===== CONTENIDO GENERAL ===== */
.section{padding:64px 0}
.section-white{padding:64px 0; background:#fff}
.section-bg{padding:64px 0; background:var(--c-bg)}
.card{background:var(--c-surface); border-radius:var(--r-lg); padding:22px; box-shadow:var(--sh-1)}
.callout{border-left:5px solid var(--c-primary); background:#ffffff; padding:16px 18px; border-radius:12px; box-shadow:var(--sh-1); color:#0d1218}
.section-title{font-family:var(--font-heading); font-size:clamp(26px,4vw,36px); color:var(--c-text); margin:0 0 8px; line-height:1.1}
.section-sub{color:var(--c-muted); font-size:1.05rem; margin:0 0 40px; max-width:640px}

/* ===== BOTONES ===== */
.btn{display:inline-flex; align-items:center; gap:10px; border:0; cursor:pointer; font-weight:800;
  padding:13px 22px; border-radius:14px; font-size:1rem;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease; text-decoration:none}
.btn-primary{background:linear-gradient(135deg,#c9920a,#a97808); color:#fff; box-shadow:0 12px 26px rgba(45,27,94,.30)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 32px rgba(45,27,94,.38)}
.btn-ghost{background:rgba(45,27,94,.10); color:#c9920a; border:1px solid rgba(45,27,94,.25)}
.btn-ghost:hover{background:rgba(45,27,94,.16)}
.btn-wa{background:#25D366; color:#fff; box-shadow:0 8px 22px rgba(37,211,102,.28)}
.btn-wa:hover{transform:translateY(-2px); opacity:.93}
.btn-group{display:flex; flex-wrap:wrap; gap:14px}

/* ===== FEATURES GRID ===== */
.features-section{padding:72px 0; background:#fff}
.features-header{margin-bottom:40px}
.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.feature-card{
  border-radius:18px; padding:26px 22px;
  background:var(--c-bg); border:1px solid rgba(10,14,20,.06);
  display:flex; flex-direction:column; gap:14px;
  transition:transform .2s, box-shadow .2s
}
.feature-card:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.feature-icon{
  width:50px; height:50px; border-radius:14px;
  background:linear-gradient(135deg,rgba(45,27,94,.15),rgba(45,27,94,.05));
  display:grid; place-items:center; font-size:1.25rem; color:#c9920a; flex-shrink:0
}
.feature-card h3{font-family:var(--font-heading); font-size:1.05rem; font-weight:700; color:var(--c-text); margin:0 0 4px}
.feature-card p{font-size:.91rem; color:var(--c-muted); margin:0; line-height:1.55}

/* ===== PROCESS STEPS ===== */
.process-section{padding:72px 0; background:var(--c-bg)}
.steps-row{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px; position:relative}
.steps-row::before{
  content:''; position:absolute; top:28px; left:calc(16.66% + 14px); right:calc(16.66% + 14px);
  height:2px; background:linear-gradient(90deg,#c9920a,#1a0e3a); z-index:0;
}
.step-card{
  background:#fff; border-radius:18px; padding:28px 22px 22px;
  box-shadow:var(--sh-1); text-align:center; position:relative; z-index:1
}
.step-num{
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,#c9920a,#a97808);
  color:#fff; font-family:var(--font-heading); font-weight:800; font-size:1.3rem;
  display:grid; place-items:center; margin:0 auto 16px;
  box-shadow:0 6px 18px rgba(45,27,94,.30)
}
.step-card h3{font-family:var(--font-heading); font-size:1rem; font-weight:700; margin:0 0 6px; color:var(--c-text)}
.step-card p{font-size:.9rem; color:var(--c-muted); margin:0; line-height:1.5}

/* ===== FAQ ===== */
.faq-section{padding:72px 0; background:#fff}
.faq-list{display:flex; flex-direction:column; gap:14px; margin-top:40px}
.faq-item{
  background:var(--c-bg); border-radius:16px; overflow:hidden;
  border:1px solid rgba(10,14,20,.06)
}
.faq-q{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; font-weight:700; font-size:1rem; color:var(--c-text);
  cursor:pointer; gap:14px
}
.faq-q::after{
  content:'+'; font-size:1.4rem; font-weight:300; color:var(--c-accent-light);
  line-height:1; flex-shrink:0
}
.faq-a{padding:0 22px 18px; font-size:.95rem; color:var(--c-muted); line-height:1.65}

/* ===== SECCIÓN CARDS SERVICIOS (seccadd) ===== */
.seccadd{padding:80px 0; background:var(--c-bg)}
.seccadd-header{text-align:center; margin-bottom:48px}
.seccadd-kicker{
  display:inline-block; font-weight:800; color:var(--c-accent-light);
  background:rgba(45,27,94,.10); border:1px solid rgba(45,27,94,.20);
  padding:6px 14px; border-radius:999px; letter-spacing:.3px; font-size:.88rem; margin-bottom:14px
}
.seccadd-header h2{
  font-family:var(--font-heading); font-size:clamp(26px,4vw,38px);
  color:var(--c-text); margin:0 0 12px; line-height:1.1
}
.seccadd-sub{color:var(--c-muted); font-size:1.05rem; max-width:620px; margin:0 auto; line-height:1.6}
.seccadd-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.seccadd-card{
  background:#fff; border-radius:18px; padding:22px 20px 18px;
  box-shadow:0 4px 18px rgba(10,14,20,.07);
  border:1px solid rgba(10,14,20,.06);
  display:flex; flex-direction:column; gap:12px;
  text-decoration:none; color:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
  position:relative; overflow:hidden;
}
.seccadd-card::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(45,27,94,.08), transparent 70%);
  opacity:0; transition:opacity .2s;
}
.seccadd-card:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(10,14,20,.12)}
.seccadd-card:hover::before{opacity:1}
.seccadd-card--featured{border-color:rgba(45,27,94,.25); box-shadow:0 4px 18px rgba(45,27,94,.10)}
.seccadd-icon{
  width:46px; height:46px; border-radius:14px; flex-shrink:0;
  background:rgba(45,27,94,.10);
  display:grid; place-items:center;
  font-size:1.2rem; color:var(--c-accent-light);
  transition:transform .2s;
}
.seccadd-card:hover .seccadd-icon{transform:scale(1.08)}
.seccadd-body{flex:1}
.seccadd-body h3{font-family:var(--font-heading); font-size:1.05rem; font-weight:700; color:var(--c-text); margin:0 0 6px; line-height:1.2}
.seccadd-body p{font-size:.88rem; color:var(--c-muted); margin:0; line-height:1.55}
.seccadd-link{display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:700; color:#c9920a; margin-top:4px; transition:gap .18s}
.seccadd-card:hover .seccadd-link{gap:10px}

/* ===== TESTIMONIOS ===== */
.testimonios{padding:72px 0; background:#fff}
.testimonios h2{font-family:var(--font-heading); font-size:clamp(26px,4vw,36px); color:var(--c-text); text-align:center; margin:0 0 8px}
.testimonios .testimonios-sub{text-align:center; color:var(--c-muted); margin:0 0 40px; font-size:1.05rem}
.testimonios-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.testimonio-card{
  background:var(--c-bg); border-radius:18px; padding:26px 24px 22px;
  box-shadow:0 8px 28px rgba(10,14,20,.07);
  border:1px solid rgba(10,14,20,.05);
  display:flex; flex-direction:column; gap:14px
}
.testimonio-stars{display:flex; gap:3px; color:#f59e0b; font-size:.95rem}
.testimonio-texto{
  font-size:1rem; color:var(--c-muted); line-height:1.65; flex:1; font-style:italic
}
.testimonio-texto::before{content:'\201C'; font-size:2rem; color:#c9920a; line-height:1; display:block; margin-bottom:-8px}
.testimonio-autor{display:flex; align-items:center; gap:12px; border-top:1px solid rgba(10,14,20,.07); padding-top:14px}
.testimonio-avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#c9920a,#a97808);
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:1rem
}
.testimonio-info strong{display:block; font-weight:700; color:var(--c-text); font-size:.97rem}
.testimonio-info span{font-size:.87rem; color:var(--c-muted)}

/* ===== SECCIÓN SERVICIOS (índice SEO) ===== */
.servicios-index{padding:72px 0}
.servicios-index h2{font-family:var(--font-heading); font-size:clamp(26px,4vw,36px); color:var(--c-text); text-align:center; margin:0 0 10px}
.servicios-index-sub{text-align:center; color:var(--c-muted); margin:0 0 40px; font-size:1.05rem; max-width:680px; margin-left:auto; margin-right:auto}
.servicios-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.servicio-card{
  background:#fff; border-radius:16px; padding:22px 18px;
  box-shadow:0 6px 20px rgba(10,14,20,.08);
  border:1px solid rgba(10,14,20,.06);
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  transition:transform .18s, box-shadow .18s
}
.servicio-card:hover{transform:translateY(-3px); box-shadow:0 14px 36px rgba(10,14,20,.13)}
.servicio-card-icon{
  width:44px; height:44px; border-radius:12px;
  background:rgba(45,27,94,.10);
  display:grid; place-items:center; font-size:1.2rem; color:#c9920a
}
.servicio-card h3{font-family:var(--font-heading); font-size:1.05rem; color:var(--c-text); margin:0; line-height:1.2}
.servicio-card p{font-size:.9rem; color:var(--c-muted); margin:0; line-height:1.5}
.servicio-card-link{
  display:inline-flex; align-items:center; gap:6px; font-size:.88rem;
  font-weight:700; color:#c9920a; margin-top:auto
}
.servicio-card-link:hover{text-decoration:underline}

/* ===== CTA BAND ===== */
.cta-band{
  background:var(--dark);
  padding:72px 0; text-align:center; color:#c8d0db;
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:''; position:absolute; top:-30%; left:50%; transform:translateX(-50%);
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(45,27,94,.18) 0%, transparent 70%);
  pointer-events:none;
}
.cta-band h2{font-family:var(--font-heading); font-size:clamp(26px,4vw,38px); color:#fff; margin:0 0 12px; position:relative; z-index:1}
.cta-band p{color:rgba(200,212,224,.72); font-size:1.05rem; margin:0 0 28px; position:relative; z-index:1; max-width:580px; margin-left:auto; margin-right:auto}
.cta-band .btn-group{justify-content:center; position:relative; z-index:1}

/* ===== GRILLA DE ENLACES ===== */
.btn-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.btn-link{display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; border-radius:14px; font-weight:800; color:var(--c-text);
  background:rgba(45,27,94,.07); border:1px solid rgba(45,27,94,.14); box-shadow:var(--sh-1)}
.btn-link:hover{transform:translateY(-2px); box-shadow:var(--sh-2); background:rgba(45,27,94,.11)}

/* ===== FOOTER ===== */
.footer{background:#1a0e3a; color:#8a98a8; padding:48px 0 28px; border-top:3px solid #c9920a}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; margin-bottom:40px}
.footer-brand{display:flex; flex-direction:column; gap:14px}
.footer-brand img{height:44px; width:auto; object-fit:contain}
.footer-brand p{font-size:.9rem; line-height:1.6; margin:0}
.footer h5{
  color:#e8c06a; font-family:var(--font-heading); font-size:.88rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.6px;
  margin:0 0 14px; padding-bottom:8px;
  border-bottom:2px solid #c9920a; display:inline-block
}
.footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.footer ul li a{font-size:.9rem; color:#8a98a8; transition:color .18s}
.footer ul li a:hover{color:#c9920a}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.07); padding-top:20px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px; font-size:.85rem
}
.footer-credit a{color:#c9920a}
.footer-credit a:hover{text-decoration:underline}

/* ===== MENÚ HAMBURGUESA (mobile) ===== */
.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  padding:8px; border-radius:10px; color:#c8d0db;
  transition:background .18s;
}
.nav-toggle:hover{background:rgba(201,146,10,.10)}
.nav-toggle svg{display:block; width:24px; height:24px}

/* Panel mobile */
.nav-mobile{
  display:none; position:fixed; inset:0; z-index:999; flex-direction:column;
}
.nav-mobile-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px);
}
.nav-mobile-panel{
  position:relative; z-index:1; background:#2d1b5e;
  width:min(320px, 90vw); height:100%; overflow-y:auto;
  padding:0 0 40px; box-shadow:4px 0 32px rgba(0,0,0,.40);
  display:flex; flex-direction:column;
}
.nav-mobile-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid rgba(255,255,255,.07);
  position:sticky; top:0; background:#2d1b5e; z-index:2;
}
.nav-mobile-close{
  background:none; border:none; cursor:pointer;
  padding:8px; border-radius:10px; color:#c8d0db; transition:background .18s;
}
.nav-mobile-close:hover{background:rgba(201,146,10,.10)}
.nav-mobile-close svg{display:block; width:20px; height:20px}
.nav-mobile-body{padding:12px 12px 0; flex:1}
.nav-mobile-body a{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:12px;
  font-weight:600; font-size:.97rem; color:#c8d0db; transition:background .15s;
}
.nav-mobile-body a:hover{background:rgba(201,146,10,.12); color:#e8c06a}
.nav-mobile-body a i{width:20px; text-align:center; color:#c9920a; font-size:.95rem}
.nav-mobile-sep{
  font-size:.78rem; font-weight:800; color:rgba(200,208,219,.45);
  text-transform:uppercase; letter-spacing:.8px; padding:16px 14px 6px;
}
.nav-mobile-wa{
  margin:16px 12px 0;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px; border-radius:14px; font-weight:800; font-size:1rem;
  background:#25D366; color:#fff; box-shadow:0 8px 22px rgba(37,211,102,.28);
}
.nav-mobile-wa:hover{opacity:.92}
.nav-mobile.is-open{display:flex}
body.nav-open{overflow:hidden}

/* ===== RESPONSIVE ===== */
@media (max-width:992px){
  .btn-grid{grid-template-columns:repeat(2,1fr)}
  .testimonios-grid{grid-template-columns:1fr 1fr}
  .servicios-grid{grid-template-columns:repeat(2,1fr)}
  .seccadd-grid{grid-template-columns:repeat(3,1fr)}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .steps-row::before{display:none}
}
@media (max-width:740px){
  .nav .nav-dropdown,
  .nav > a:not(.btn-primary){display:none}
  .nav .btn-primary{display:none}
  .nav-toggle{display:flex; align-items:center; justify-content:center}
  .seccadd-grid{grid-template-columns:repeat(2,1fr)}
  .features-grid{grid-template-columns:1fr}
  .steps-row{grid-template-columns:1fr}
  .hero-mini{padding:58px 0 42px}
  .hero-meta{gap:10px}
}
@media (max-width:600px){
  .btn-grid{grid-template-columns:1fr}
  .testimonios-grid{grid-template-columns:1fr}
  .servicios-grid{grid-template-columns:1fr 1fr}
  .seccadd-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column; text-align:center}
  .nav-dropdown-menu{left:auto; right:0; transform:none}
}
@media (max-width:400px){
  .seccadd-grid{grid-template-columns:1fr}
}