/* ===== Aura Intuitiva — oro + violeta sobre noche (paleta del logo) ===== */

:root{
  --noche:#08060c;
  --carbon:#150f1e;
  --borde:rgba(216,169,79,.24);
  --oro:#d8a94f;
  --oro-cl:#f0d296;
  --oro-osc:#8a6428;
  --violeta:#b06fe8;
  --violeta-cl:#d9b4ff;
  --crema:#f4ead7;
  --texto:#ddd2c0;
  --tenue:#9a8e7f;
  --display:'Cinzel',serif;
  --script:'Great Vibes',cursive;
  --cuerpo:'Cormorant Garamond',Georgia,serif;
  --r:16px;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden}
body{
  margin:0;
  background:
    radial-gradient(900px 620px at 82% -12%, rgba(216,169,79,.13), transparent 60%),
    radial-gradient(760px 560px at -5% 28%, rgba(176,111,232,.13), transparent 62%),
    var(--noche);
  color:var(--texto);
  font-family:var(--cuerpo);
  font-size:19px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.veil{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.55;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(240,210,150,.7), transparent),
    radial-gradient(1px 1px at 70% 15%, rgba(217,180,255,.55), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(240,210,150,.45), transparent),
    radial-gradient(1.5px 1.5px at 85% 60%, rgba(240,210,150,.5), transparent),
    radial-gradient(1px 1px at 10% 85%, rgba(217,180,255,.45), transparent),
    radial-gradient(1px 1px at 55% 45%, rgba(240,210,150,.35), transparent);
}
body>*:not(.veil):not(.modal){position:relative; z-index:1}

img{max-width:100%; display:block}
a{color:inherit}

h1,h2,h3,.nav__brand span{font-family:var(--display); font-weight:600; letter-spacing:.01em; color:var(--crema); line-height:1.16; margin:0}
em{font-style:italic; color:var(--violeta-cl)}

.eyebrow{
  font-family:var(--display); font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--oro); margin:0 0 .9rem;
}

/* ---------- EMBLEMA SVG ---------- */
.em-aura{font-family:var(--display); font-weight:700; font-size:62px; letter-spacing:8px; fill:var(--oro-cl)}
.em-int {font-family:var(--script);  font-size:58px; fill:var(--violeta)}
.em-tag {font-family:var(--display); font-weight:500; font-size:12.5px; letter-spacing:2.2px; fill:var(--oro)}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.55rem clamp(1rem,4vw,2.5rem);
  background:rgba(8,6,12,.8);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--borde);
}
.nav__brand{display:flex; align-items:center; gap:.7rem; text-decoration:none}
.nav__mark{width:44px; height:44px; flex:none}
.nav__brand span{font-size:1rem; letter-spacing:.14em; text-transform:uppercase}
.nav__links{display:flex; align-items:center; gap:1.6rem; font-size:.95rem}
.nav__links a{text-decoration:none; color:var(--texto); transition:color .2s}
.nav__links a:hover{color:var(--oro-cl)}
.nav__cta{
  font-family:var(--display); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--oro); color:var(--oro-cl)!important;
  padding:.5rem 1.1rem; border-radius:999px;
}
.nav__cta:hover{background:var(--oro); color:var(--noche)!important}
@media(max-width:760px){
  .nav__links a:not(.nav__cta){display:none}
  .nav__brand span{font-size:.82rem}
}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--display); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.85rem 1.6rem; border-radius:999px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:.22s; white-space:nowrap;
}
.btn--gold{
  background:linear-gradient(150deg,var(--oro-cl),var(--oro) 55%,var(--oro-osc));
  color:#1a1206; font-weight:700;
  box-shadow:0 10px 30px -12px rgba(216,169,79,.6);
}
.btn--gold:hover{transform:translateY(-2px); box-shadow:0 16px 36px -12px rgba(216,169,79,.8)}
.btn--ghost{border-color:var(--borde); color:var(--crema)}
.btn--ghost:hover{border-color:var(--violeta); color:var(--violeta-cl)}
.btn--full{width:100%; margin-top:.4rem}
.btn--copy{padding:.42rem .9rem; font-size:.66rem; border-color:var(--borde); color:var(--oro-cl); background:transparent}
.btn--copy:hover{background:var(--oro); color:var(--noche); border-color:var(--oro)}

/* ---------- HERO ---------- */
.hero{position:relative; padding:clamp(2.5rem,7vw,5.5rem) clamp(1rem,4vw,2.5rem) clamp(3rem,7vw,5rem); overflow:hidden}
.hero__glow{
  position:absolute; width:660px; height:660px; right:-150px; top:-190px; border-radius:50%;
  background:radial-gradient(circle,rgba(216,169,79,.22),transparent 62%); filter:blur(30px);
}
.hero__inner{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center;
}
.hero h1{font-size:clamp(2.2rem,5.4vw,3.9rem)}
.lede{font-size:1.18rem; color:var(--tenue); max-width:46ch; margin:1.3rem 0 2rem}
.hero__actions{display:flex; flex-wrap:wrap; gap:.9rem}
.hero__marks{list-style:none; display:flex; flex-wrap:wrap; gap:1.4rem; padding:0; margin:2.2rem 0 0; font-size:.9rem; color:var(--tenue)}
.hero__marks li::before{content:"✦"; color:var(--oro); margin-right:.5rem}
.hero__art{display:flex; justify-content:center}
.hero__mark{
  width:min(420px,86vw); height:auto;
  filter:drop-shadow(0 0 60px rgba(216,169,79,.28)) drop-shadow(0 0 90px rgba(176,111,232,.2));
}
@media(max-width:880px){
  .hero__inner{grid-template-columns:1fr}
  .hero__art{order:-1}
  .hero__mark{width:min(300px,72vw)}
}

/* ---------- SECCIONES ---------- */
.section{padding:clamp(3.5rem,8vw,6rem) clamp(1rem,4vw,2.5rem); max-width:var(--max); margin:0 auto}
.section--alt{
  max-width:none;
  background:linear-gradient(180deg,transparent,rgba(21,15,30,.7) 12%,rgba(21,15,30,.7) 88%,transparent);
  border-top:1px solid rgba(216,169,79,.1);
  border-bottom:1px solid rgba(216,169,79,.1);
}
.section--alt>*{max-width:var(--max); margin-left:auto; margin-right:auto}
.section__head{text-align:center; margin-bottom:2.4rem}
.section__head h2{font-size:clamp(1.8rem,4vw,2.7rem)}
.sub{color:var(--tenue); margin:.9rem auto 0; max-width:56ch}
.sub b{color:var(--oro-cl); font-weight:600}

/* ---------- FILTROS ---------- */
.filtros{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:3rem}
.chip{
  font-family:var(--display); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.55rem 1.15rem; border-radius:999px; cursor:pointer; transition:.2s;
  background:transparent; border:1px solid var(--borde); color:var(--tenue);
}
.chip:hover{color:var(--oro-cl); border-color:var(--oro)}
.chip--on{background:rgba(216,169,79,.14); border-color:var(--oro); color:var(--oro-cl)}

/* ---------- BLOQUES DE CATEGORÍA ---------- */
.bloque{margin-bottom:4rem}
.bloque[hidden]{display:none}
.bloque__head{margin-bottom:1.8rem; text-align:center}
.bloque__head h3{
  font-size:1.45rem; letter-spacing:.06em;
  display:inline-flex; align-items:center; gap:1rem;
}
.bloque__head h3::before,.bloque__head h3::after{content:"✦"; color:var(--oro); font-size:.8rem}
.bloque__head p{color:var(--tenue); font-size:1rem; max-width:60ch; margin:.7rem auto 0}

/* ---------- TARJETAS ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:1.3rem}
.card{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(165deg,rgba(24,17,34,.96),rgba(10,7,15,.96));
  border:1px solid var(--borde); border-radius:var(--r);
  padding:1.9rem 1.6rem 1.6rem; transition:.25s;
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:var(--r); pointer-events:none;
  background:radial-gradient(340px 160px at 50% 0%, rgba(216,169,79,.13), transparent 70%);
  opacity:0; transition:opacity .25s;
}
.card:hover{transform:translateY(-5px); border-color:rgba(216,169,79,.55)}
.card:hover::before{opacity:1}
.card--top{border-color:rgba(176,111,232,.5)}
.card__flag{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  font-family:var(--display); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  background:linear-gradient(150deg,var(--violeta-cl),var(--violeta)); color:#1a0c26;
  padding:.28rem .9rem; border-radius:999px; white-space:nowrap;
}
.card__name{font-size:1.24rem; margin-bottom:.6rem; line-height:1.3}
.card__txt{color:var(--tenue); font-size:1rem; margin:0 0 1.1rem}
.card__list{list-style:none; padding:0; margin:0 0 1.6rem; font-size:.95rem}
.card__list li{padding-left:1.35rem; position:relative; margin-bottom:.35rem}
.card__list li::before{content:"✧"; position:absolute; left:0; color:var(--oro)}
.card__foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap}
.card__price{font-family:var(--display); font-size:1.45rem; color:var(--crema)}

/* ---------- PASOS ---------- */
.steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.6rem}
.steps li{border-top:1px solid var(--borde); padding-top:1.3rem}
.steps__n{font-family:var(--display); font-size:.9rem; letter-spacing:.2em; color:var(--oro); display:block; margin-bottom:.7rem}
.steps h3{font-size:1.18rem; margin-bottom:.5rem}
.steps p{color:var(--tenue); font-size:1rem; margin:0}

/* ---------- PAGO ---------- */
.pay{
  max-width:660px; margin:0 auto;
  border:1px solid var(--borde); border-radius:var(--r);
  background:linear-gradient(165deg,rgba(24,17,34,.96),rgba(10,7,15,.92));
  padding:1.2rem clamp(1.1rem,3vw,2rem) 1.6rem;
}
.pay__row{display:flex; align-items:center; gap:1rem; padding:1.05rem 0; border-bottom:1px dashed rgba(216,169,79,.18); flex-wrap:wrap}
.pay__label{font-family:var(--display); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tenue); min-width:92px}
.pay__value{font-family:var(--display); font-size:1.2rem; color:var(--oro-cl); flex:1 1 100%; overflow-wrap:anywhere; letter-spacing:.04em}
@media(min-width:620px){.pay__value{flex:1 1 auto}}
@media(max-width:619px){
  .pay__row{align-items:flex-start; gap:.5rem}
  .pay__label{flex:1 1 100%}
}
.pay__note{margin:1.3rem 0 0; font-size:.98rem; color:var(--tenue); text-align:center}
[data-optional]{display:none}

/* ---------- FAQ ---------- */
.faq{max-width:760px; margin:0 auto}
.faq details{border-bottom:1px solid var(--borde); padding:1.05rem 0}
.faq summary{cursor:pointer; list-style:none; font-family:var(--display); font-size:1.04rem; color:var(--crema); display:flex; justify-content:space-between; gap:1rem; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--oro); font-size:1.4rem; line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{color:var(--tenue); margin:.85rem 0 .2rem; font-size:1.02rem}

/* ---------- FOOTER ---------- */
.foot{text-align:center; padding:3.5rem 1.5rem 5.5rem; border-top:1px solid var(--borde)}
.foot__mark{width:150px; height:150px; margin:0 auto 1.2rem; opacity:.9}
.foot__links{display:flex; gap:.8rem; justify-content:center; font-size:.95rem; color:var(--tenue); margin:0 0 1.6rem}
.foot__links a{color:var(--oro-cl); text-decoration:none}
.foot__legal{font-size:.82rem; color:#6b6255; max-width:58ch; margin:0 auto; line-height:1.6}

/* ---------- BOTÓN FLOTANTE WHATSAPP ---------- */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg,#3ed17a,#1faa52);
  box-shadow:0 14px 30px -10px rgba(31,170,82,.8);
  transition:transform .2s;
}
.wa-float:hover{transform:scale(1.08)}

/* ---------- MODAL ---------- */
.modal{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:1rem}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute; inset:0; background:rgba(4,2,7,.85); backdrop-filter:blur(5px)}
.modal__box{
  position:relative; width:min(560px,100%); max-height:92vh; overflow-y:auto;
  background:linear-gradient(165deg,#1c1428,#0b0812);
  border:1px solid rgba(216,169,79,.42); border-radius:20px;
  padding:2rem clamp(1.2rem,4vw,2.2rem);
  box-shadow:0 50px 100px -30px #000;
}
.modal__x{position:absolute; top:.7rem; right:.9rem; background:none; border:none; color:var(--tenue); font-size:1.9rem; line-height:1; cursor:pointer}
.modal__x:hover{color:var(--oro-cl)}
.modal__box h3{font-size:1.5rem}
.modal__price{font-family:var(--display); color:var(--oro-cl); font-size:1.25rem; margin:.4rem 0 1.4rem}
#form label{display:block; font-size:.86rem; color:var(--tenue); margin-bottom:1rem; font-family:var(--display); letter-spacing:.06em}
#form input,#form textarea{
  width:100%; margin-top:.4rem; padding:.75rem .9rem;
  background:rgba(255,255,255,.04); border:1px solid var(--borde); border-radius:10px;
  color:var(--crema); font-family:var(--cuerpo); font-size:1.02rem; resize:vertical;
}
#form input:focus,#form textarea:focus{outline:none; border-color:var(--oro)}
#form input[aria-invalid="true"]{border-color:#c0483a}
.modal__pay{border:1px dashed rgba(216,169,79,.35); border-radius:12px; padding:1rem 1.1rem; margin:.4rem 0 1.4rem; background:rgba(216,169,79,.05)}
.modal__payTitle{font-family:var(--display); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--oro); margin:0 0 .6rem}
.modal__alias{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap}
.modal__alias strong{font-family:var(--display); font-size:1.18rem; color:var(--oro-cl); letter-spacing:.04em; overflow-wrap:anywhere}
.modal__cbu{margin:.5rem 0 0; font-size:.9rem; color:var(--tenue); overflow-wrap:anywhere}
.modal__cbu:empty{display:none}
.modal__hint{margin:.7rem 0 0; font-size:.94rem; color:var(--tenue)}
.modal__foot{text-align:center; font-size:.84rem; color:var(--tenue); margin:.9rem 0 0}

/* toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--oro); color:#1a1206; font-family:var(--display); font-size:.76rem;
  letter-spacing:.14em; text-transform:uppercase; padding:.7rem 1.4rem; border-radius:999px;
  opacity:0; pointer-events:none; transition:.28s; z-index:200;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}