:root{
  --bg:#f7f8fd;
  --bg-soft:#eef1ff;
  --ink:#11152c;
  --muted:#5f6787;
  --line:rgba(39,55,255,.14);
  --brand:#2737ff;
  --brand-2:#9f86ff;
  --brand-3:#53d7c2;
  --brand-4:#f4ca7c;
  --shadow:0 22px 60px rgba(22,31,90,.12);
  --shadow-soft:0 14px 30px rgba(22,31,90,.08);
  --radius:28px;
  --radius-sm:18px;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Sora',system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top right, rgba(159,134,255,.16), transparent 30%),
    radial-gradient(circle at top left, rgba(83,215,194,.09), transparent 24%),
    linear-gradient(180deg,#f9fbff 0%, #f7f8fd 100%);
}
img{max-width:100%; display:block}
a{text-decoration:none; color:inherit}
.container{width:min(calc(100% - 32px), var(--max)); margin:0 auto}
.announcement{background:linear-gradient(90deg,#10184f,#2737ff 42%,#6b76ff); color:#fff; padding:10px 0}
.announcement-inner{width:min(calc(100% - 32px), var(--max)); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.badge-inline{padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.12); backdrop-filter:blur(8px)}
.small{font-size:.92rem; color:var(--muted)}
.announcement .small{color:rgba(255,255,255,.86)}
header{position:sticky; top:0; z-index:40; backdrop-filter:blur(18px); background:rgba(247,248,253,.82); border-bottom:1px solid rgba(39,55,255,.07)}
.header-inner{width:min(calc(100% - 32px), var(--max)); margin:0 auto; padding:16px 0; display:flex; align-items:center; justify-content:space-between; gap:18px}
.brand img{width:210px; height:auto}
nav{display:flex; gap:10px; align-items:center}
nav a{padding:12px 14px; border-radius:999px; color:var(--muted); font-weight:600; font-size:.95rem}
nav a.active, nav a:hover{background:#fff; color:var(--ink); box-shadow:var(--shadow-soft)}
.header-actions{display:flex; gap:10px; align-items:center}
.menu-btn{display:none}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 18px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  font-weight:700; font-size:.95rem; transition:.25s transform,.25s box-shadow,.25s background;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:linear-gradient(135deg,var(--brand),#5365ff); color:#fff; box-shadow:0 12px 26px rgba(39,55,255,.22)}
.btn.secondary{background:#fff; color:var(--brand); border-color:rgba(39,55,255,.16)}
.btn.gold{background:linear-gradient(135deg,#f8d78b,#f2ba57); color:#372604; box-shadow:0 12px 26px rgba(226,172,62,.22)}
.btn.ghost{background:transparent; border-color:rgba(39,55,255,.14); color:var(--ink)}
.btn.whatsapp{background:linear-gradient(135deg,#2abf74,#1f9e60); color:#fff}
.btn.wide{width:100%}
.gradient-text{background:linear-gradient(135deg,var(--brand),var(--brand-2),var(--brand-3)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero, .page-hero{padding:84px 0 34px}
.hero-grid, .page-hero-grid{display:grid; grid-template-columns:1.15fr .95fr; gap:28px; align-items:center}
.glass{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}
.hero-copy, .page-hero-card{padding:36px; border-radius:var(--radius)}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px;
  border-radius:999px; background:rgba(39,55,255,.09); color:var(--brand);
  font-size:.83rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
}
h1,h2,h3,h4{margin:0; line-height:1.06}
h1{font-size:clamp(2.7rem, 4vw, 5rem); letter-spacing:-.04em}
h2{font-size:clamp(2rem, 3vw, 3.3rem); letter-spacing:-.035em}
h3{font-size:1.35rem}
.lead{font-size:1.08rem; line-height:1.8; color:var(--muted)}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px}
.hero-stack{display:grid; gap:18px}
.hero-visual, .page-visual, .card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-soft); overflow:hidden; border:1px solid rgba(39,55,255,.08)}
.hero-visual img, .page-visual img{height:100%; width:100%; object-fit:cover}
.hero-visual{min-height:520px; position:relative}
.floating-bubble{
  position:absolute; padding:14px 18px; border-radius:999px; background:rgba(255,255,255,.85);
  box-shadow:var(--shadow-soft); font-weight:700; color:var(--ink)
}
.bubble-one{top:20px; right:20px}
.bubble-two{bottom:20px; left:20px}
.mini-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.mini-card{display:grid; grid-template-columns:96px 1fr; gap:14px; padding:14px}
.mini-card img{width:96px; height:96px; object-fit:cover; border-radius:18px}
.mini-card p{margin:8px 0 0; color:var(--muted); line-height:1.6; font-size:.95rem}
.trust-row, .kpi-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px}
.trust-pill, .kpi{
  padding:16px 18px; border-radius:22px; background:linear-gradient(180deg,#fff,#f5f7ff); border:1px solid rgba(39,55,255,.08)
}
.trust-pill strong, .kpi strong{display:block; font-size:1.1rem}
.trust-pill span, .kpi span{display:block; margin-top:6px; color:var(--muted); font-size:.92rem; line-height:1.45}
.section{padding:84px 0}
.section-tight{padding:54px 0}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:30px}
.section-head.center{display:block; text-align:center}
.three-col{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.four-col{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.service-card,.benefit-card,.plan-card,.step-card{padding:28px}
.service-card .icon{font-size:2rem; color:var(--brand); margin-bottom:18px}
.service-card p,.benefit-card p,.plan-card p,.step-card p{color:var(--muted); line-height:1.7}
.tag-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.tag{padding:10px 12px; border-radius:999px; background:var(--bg-soft); color:var(--brand); font-size:.86rem; font-weight:700}
.dark-band{
  background:
    radial-gradient(circle at top right, rgba(159,134,255,.12), transparent 34%),
    linear-gradient(180deg,#131a48 0%, #171f5f 100%);
  color:#fff;
}
.dark-band .lead, .dark-band p, .dark-band li{color:rgba(255,255,255,.82)}
.feature-split, .split-store, .aura-band-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center}
.feature-visual img, .aura-side-photo img{width:100%; height:100%; object-fit:cover}
.feature-copy h2, .aura-band-copy h2{margin-top:16px}
.feature-list{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px}
.feature-list li{
  display:flex; gap:12px; align-items:flex-start;
}
.feature-list li::before{
  content:"✓"; display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:rgba(83,215,194,.18); color:#4fe5c7; flex:0 0 22px; margin-top:2px
}
.quotes-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.quote-card{
  position:relative; padding:28px 24px 24px; border-radius:28px; background:#fff;
  box-shadow:var(--shadow-soft); overflow:hidden; border:1px solid rgba(39,55,255,.08)
}
.quote-card::after{
  content:""; position:absolute; inset:auto -20% -28% auto; width:200px; height:200px; border-radius:50%; opacity:.14
}
.quote-card.q-a::after{background:var(--brand)}
.quote-card.q-b::after{background:var(--brand-2)}
.quote-card.q-c::after{background:var(--brand-3)}
.quote-card.q-d::after{background:var(--brand-4)}
.quote-mark{font-size:4rem; line-height:.7; color:rgba(39,55,255,.18)}
.quote-card p{min-height:120px; line-height:1.8; color:var(--ink)}
.quote-foot{display:flex; justify-content:space-between; gap:12px; align-items:center; padding-top:14px; border-top:1px solid rgba(39,55,255,.08)}
.quote-foot span{color:var(--muted); font-size:.9rem}
.aura-band{
  background:
    radial-gradient(circle at top left, rgba(83,215,194,.1), transparent 32%),
    radial-gradient(circle at bottom right, rgba(159,134,255,.14), transparent 26%),
    linear-gradient(180deg,#fff,#f5f7ff);
}
.aura-benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px}
.aura-benefits > div{
  padding:18px; border-radius:22px; background:#fff; border:1px solid rgba(39,55,255,.08); box-shadow:var(--shadow-soft)
}
.aura-benefits strong{display:block; margin-bottom:8px}
.aura-benefits span{color:var(--muted); line-height:1.6}
.plan-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.plan-card{position:relative}
.plan-card.featured{
  background:linear-gradient(180deg,#ffffff,#f3f5ff);
  border:1px solid rgba(39,55,255,.16);
  transform:translateY(-6px)
}
.plan-badge{
  position:absolute; top:18px; right:18px; padding:8px 12px; border-radius:999px; background:rgba(39,55,255,.12); color:var(--brand); font-weight:800; font-size:.82rem
}
.plan-price{font-size:2rem; font-weight:800; letter-spacing:-.03em; margin:16px 0}
.reservation-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.reservation-grid.single{grid-template-columns:1fr; max-width:720px; margin:0 auto}
.booking-form{padding:28px}
.booking-form h3{margin-bottom:18px}
.booking-form label{display:grid; gap:8px; margin-bottom:14px; font-weight:600}
.booking-form input,.booking-form select,.booking-form textarea{
  width:100%; padding:14px 16px; border-radius:16px; border:1px solid rgba(39,55,255,.14);
  font:inherit; color:var(--ink); background:#fbfcff
}
.booking-form textarea{resize:vertical}
.faq-grid{display:grid; gap:14px}
.faq-item{
  background:#fff; border:1px solid rgba(39,55,255,.08); border-radius:22px; box-shadow:var(--shadow-soft); overflow:hidden
}
.faq-item summary{
  list-style:none; cursor:pointer; padding:20px 22px; font-weight:700; position:relative
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+"; position:absolute; right:22px; top:18px; font-size:1.4rem; color:var(--brand)
}
.faq-item[open] summary::after{content:"−"}
.faq-answer{padding:0 22px 20px}
.page-hero-card h1{margin-top:18px}
.steps-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.step-card span{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; font-weight:800; margin-bottom:16px
}
.aura-visual-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.aura-visual-grid .card{padding:18px}
.aura-visual-grid img{width:100%; height:220px; object-fit:contain}
.benefits-grid.four{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.pack-callout{
  margin-top:26px; padding:26px; display:flex; justify-content:space-between; gap:18px; align-items:center;
  background:linear-gradient(135deg,rgba(39,55,255,.06),rgba(159,134,255,.08))
}
.price-stack{text-align:right}
.product-grid-head{display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:24px}
.filter-tabs{display:flex; gap:10px; flex-wrap:wrap}
.filter-tabs button{
  padding:12px 14px; border-radius:999px; border:1px solid rgba(39,55,255,.12); background:#fff; color:var(--muted); font-weight:700; cursor:pointer
}
.filter-tabs button.active{background:var(--brand); color:#fff}
.products-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.product-card{padding:24px}
.product-badge{display:inline-block; margin-bottom:12px; padding:8px 11px; border-radius:999px; background:rgba(39,55,255,.08); color:var(--brand); font-size:.82rem; font-weight:800}
.product-thumb{
  min-height:150px; border-radius:22px; display:flex; align-items:end; justify-content:flex-start; padding:18px; margin-bottom:18px; color:#fff; font-weight:700
}
.product-thumb.service{background:linear-gradient(135deg,#172167,#4754ff)}
.product-thumb.candle{background:linear-gradient(135deg,#855b15,#f2ba57)}
.product-thumb.ritual{background:linear-gradient(135deg,#4d2d85,#b497ff)}
.product-thumb.essence{background:linear-gradient(135deg,#1c5c64,#53d7c2)}
.product-thumb.crystal{background:linear-gradient(135deg,#1b3774,#86a9ff)}
.product-card p{color:var(--muted); line-height:1.7}
.product-meta{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:18px}
.product-price{font-size:1.2rem; font-weight:800}
.cart-layout{display:grid; grid-template-columns:1.25fr .75fr; gap:22px}
.cart-card,.cart-summary{padding:24px}
.cart-header{display:flex; justify-content:space-between; gap:16px; align-items:end; margin-bottom:18px}
.cart-items{display:grid; gap:14px}
.cart-item{
  display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid rgba(39,55,255,.08)
}
.cart-item button{border:none; background:transparent; color:#b81f3f; font-weight:700; cursor:pointer}
.cart-total{display:flex; justify-content:space-between; align-items:center; padding:18px 0; border-top:1px solid rgba(39,55,255,.08); margin-top:18px}
.kamara-consult-card{padding:30px; display:grid; grid-template-columns:1fr .9fr; gap:20px; align-items:center}
.callout{
  padding:24px; border-radius:24px; background:linear-gradient(135deg, rgba(39,55,255,.08), rgba(159,134,255,.12));
  border:1px solid rgba(39,55,255,.1)
}
.site-footer{background:#101431; color:#dfe3ff; padding:34px 0 18px; margin-top:42px}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:28px}
.footer-logo{width:220px; margin-bottom:16px}
.footer-links{padding:0; list-style:none; display:grid; gap:10px}
.footer-links a{color:#dfe3ff}
.footer-bottom{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:18px; margin-top:18px; border-top:1px solid rgba(255,255,255,.09); font-size:.92rem}
.whatsapp-float{
  position:fixed; right:18px; bottom:18px; width:62px; height:62px; border-radius:50%;
  background:linear-gradient(135deg,#2abf74,#1f9e60); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 30px rgba(17,119,68,.24); font-weight:900; z-index:50
}

@media (max-width: 1080px){
  .hero-grid, .page-hero-grid, .feature-split, .split-store, .aura-band-grid, .kamara-consult-card, .cart-layout{grid-template-columns:1fr}
  .three-col, .products-grid, .quotes-grid, .plan-grid, .steps-grid, .aura-visual-grid, .benefits-grid.four, .four-col{grid-template-columns:repeat(2,1fr)}
  .section-head{display:block}
}
@media (max-width: 820px){
  nav{position:fixed; inset:92px 16px auto 16px; display:none; background:rgba(255,255,255,.95); padding:16px; border-radius:24px; box-shadow:var(--shadow)}
  nav.open{display:grid}
  .menu-btn{display:inline-flex}
  .header-actions .btn.primary{display:none}
  .mini-grid, .trust-row, .kpi-row, .aura-benefits{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .brand img{width:170px}
  .hero, .page-hero, .section{padding:58px 0}
  .hero-copy, .page-hero-card, .booking-form, .product-card, .benefit-card, .service-card, .plan-card, .step-card{padding:22px}
  .three-col, .products-grid, .quotes-grid, .plan-grid, .steps-grid, .aura-visual-grid, .benefits-grid.four, .four-col{grid-template-columns:1fr}
  .product-meta, .pack-callout, .cart-item, .footer-grid{grid-template-columns:1fr}
  .product-meta,.pack-callout,.cart-item,.footer-bottom{display:block}
  .product-meta > * + *, .pack-callout > * + *{margin-top:12px}
  .hero-visual{min-height:340px}
}