/* ============================================================
   AURA Recovery Club — Demo premium por COBIZ
   Sistema de diseño wellness/biohacking (dark, duotone)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#091321;
  --bg-2:#0C1A2B;
  --surface:#102338;
  --surface-2:#15293F;
  --line:rgba(255,255,255,0.10);
  --line-2:rgba(255,255,255,0.18);
  --teal:#E3C08D;
  --teal-deep:#B98E5A;
  --amber:#54B3C9;
  --amber-deep:#3E92A6;
  --text:#EEF4F8;
  --muted:#A2B3C3;
  --muted-2:#6F8398;
  --ui:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Fraunces',Georgia,serif;
  --maxw:1200px;
  --r:14px;
  --r-lg:22px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--ui);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.display{ font-family:var(--display); font-weight:400; letter-spacing:-0.01em; line-height:1.05; }
.eyebrow{ font-size:12px; letter-spacing:0.28em; text-transform:uppercase; color:var(--teal); font-weight:600; }
.muted{ color:var(--muted); }

/* demo badge */
.demo-badge{
  position:fixed; z-index:120; right:14px; bottom:14px;
  display:flex; align-items:center; gap:8px;
  background:rgba(9,19,33,0.82); backdrop-filter:blur(8px);
  border:1px solid var(--line-2); border-radius:999px;
  padding:8px 14px; font-size:12px; color:var(--muted);
}
.demo-badge b{ color:var(--text); font-weight:600; }
.demo-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 10px var(--teal); }

/* nav */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(9,19,33,0.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__in{ display:flex; align-items:center; justify-content:space-between; height:70px; }
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--display); font-size:21px; letter-spacing:0.02em; }
.brand__mark{ width:30px; height:30px; flex:none; }
.nav__links{ display:flex; gap:30px; font-size:14.5px; color:var(--muted); }
.nav__links a{ transition:color .2s; }
.nav__links a:hover,.nav__links a.active{ color:var(--text); }
.nav__right{ display:flex; align-items:center; gap:16px; }
.nav__cart{ position:relative; color:var(--muted); display:flex; align-items:center; gap:7px; font-size:14px; }
.nav__cart:hover{ color:var(--text); }
.nav__cart-count{ position:absolute; top:-8px; right:-12px; background:var(--teal); color:#04221C; font-size:11px; font-weight:700; min-width:17px; height:17px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.burger{ display:none; background:none; border:0; color:var(--text); font-size:24px; cursor:pointer; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--ui); font-size:14.5px; font-weight:600;
  padding:13px 24px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .15s ease, background .2s, border-color .2s, color .2s; white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--teal); color:#04221C; }
.btn--primary:hover{ background:#54e3ca; }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--text); }
.btn--amber{ background:var(--amber); color:#2A1305; }
.btn--amber:hover{ background:#f6b87e; }
.btn--block{ width:100%; }
.btn--sm{ padding:9px 16px; font-size:13px; }

/* duotone media helper */
.media{ position:relative; overflow:hidden; background:linear-gradient(135deg,#0c2334,#0a1626); }
.media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(.62); }
.media::after{ content:""; position:absolute; inset:0; background:linear-gradient(150deg, rgba(227,192,141,0.20), rgba(9,19,33,0.10) 40%, rgba(242,167,101,0.16)); mix-blend-mode:screen; }

/* hero */
.hero{ position:relative; min-height:92vh; display:flex; align-items:center; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.42) contrast(1.05); }
.hero__bg::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 70% 20%, rgba(227,192,141,0.18), transparent 55%), linear-gradient(180deg, rgba(9,19,33,0.55), rgba(9,19,33,0.92)); }
.hero__in{ position:relative; z-index:2; padding:60px 0; }
.hero h1{ font-size:clamp(40px,7vw,86px); margin:20px 0 22px; max-width:14ch; }
.hero h1 em{ font-style:italic; color:var(--teal); }
.hero__sub{ font-size:clamp(16px,2vw,20px); color:#cfdcd8; max-width:52ch; margin-bottom:34px; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__stats{ display:flex; gap:44px; margin-top:60px; flex-wrap:wrap; }
.hero__stat .n{ font-family:var(--display); font-size:34px; color:var(--text); }
.hero__stat .l{ font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }

/* sections */
section{ position:relative; }
.section{ padding:110px 0; }
.section--tight{ padding:80px 0; }
.sec-head{ max-width:680px; margin-bottom:54px; }
.sec-head h2{ font-size:clamp(30px,4.5vw,52px); margin:16px 0 14px; }
.sec-head p{ color:var(--muted); font-size:17px; }
.sec-head--center{ margin:0 auto 54px; text-align:center; }

/* experiences grid */
.exp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.exp{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:340px; display:flex; align-items:flex-end; border:1px solid var(--line); }
.exp .media{ position:absolute; inset:0; z-index:0; }
.exp::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(7,11,10,0.92)); z-index:1; }
.exp__body{ position:relative; z-index:2; padding:26px; }
.exp__tag{ font-size:11.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--teal); font-weight:600; }
.exp__body h3{ font-family:var(--display); font-size:25px; margin:8px 0 8px; }
.exp__body p{ color:var(--muted); font-size:14px; }
.exp__icon{ position:absolute; top:22px; right:22px; z-index:2; width:42px; height:42px; border-radius:50%; background:rgba(9,19,33,0.5); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; color:var(--teal); }

/* split feature */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.split__media{ border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line); }
.split ul{ list-style:none; margin:24px 0 30px; }
.split li{ display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:15.5px; }
.split li i{ color:var(--teal); flex:none; margin-top:3px; }

/* store preview / product cards */
.prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.prod-grid--3{ grid-template-columns:repeat(3,1fr); }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color .2s, transform .2s; display:flex; flex-direction:column; }
.card:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.card__media{ aspect-ratio:1/1; }
.card__b{ padding:16px 16px 18px; display:flex; flex-direction:column; flex:1; }
.card__cat{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted-2); }
.card__name{ font-size:15.5px; font-weight:600; margin:5px 0 2px; }
.card__desc{ font-size:13px; color:var(--muted); margin-bottom:14px; }
.card__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.card__price{ font-family:var(--display); font-size:21px; }
.card .btn--sm{ background:var(--surface-2); color:var(--text); border:1px solid var(--line-2); }
.card .btn--sm:hover{ background:var(--teal); color:#04221C; border-color:var(--teal); }

/* membership */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.tier{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 30px; }
.tier--feat{ border:1px solid var(--teal); background:linear-gradient(180deg, rgba(227,192,141,0.08), var(--surface)); position:relative; }
.tier__flag{ position:absolute; top:-13px; left:30px; background:var(--teal); color:#04221C; font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:5px 13px; border-radius:999px; }
.tier h3{ font-family:var(--display); font-size:25px; }
.tier__price{ font-family:var(--display); font-size:48px; margin:12px 0 2px; }
.tier__price span{ font-family:var(--ui); font-size:15px; color:var(--muted); }
.tier ul{ list-style:none; margin:22px 0 26px; }
.tier li{ display:flex; gap:10px; padding:7px 0; font-size:14.5px; color:#d6e2de; }
.tier li i{ color:var(--teal); flex:none; }

/* cta band */
.cta-band{ position:relative; border-radius:28px; overflow:hidden; padding:72px 40px; text-align:center; border:1px solid var(--line); }
.cta-band .media{ position:absolute; inset:0; z-index:0; }
.cta-band::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,11,10,0.7), rgba(7,11,10,0.86)); z-index:1; }
.cta-band > *{ position:relative; z-index:2; }
.cta-band h2{ font-family:var(--display); font-size:clamp(30px,5vw,52px); margin-bottom:16px; }
.cta-band p{ color:#cfdcd8; max-width:50ch; margin:0 auto 30px; }

/* footer */
.footer{ border-top:1px solid var(--line); padding:64px 0 36px; background:var(--bg-2); }
.footer__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px; }
.footer h4{ font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted-2); margin-bottom:16px; font-weight:600; }
.footer a{ display:block; color:var(--muted); padding:5px 0; font-size:14.5px; }
.footer a:hover{ color:var(--text); }
.footer__brand p{ color:var(--muted); font-size:14.5px; max-width:32ch; margin-top:14px; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:50px; padding-top:24px; border-top:1px solid var(--line); color:var(--muted-2); font-size:13px; flex-wrap:wrap; gap:10px; }
.footer__bottom a{ display:inline; color:var(--teal); }

/* reveal animation */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ============ SHOP page ============ */
.page-head{ padding:64px 0 18px; }
.page-head h1{ font-family:var(--display); font-size:clamp(34px,5vw,60px); }
.page-head p{ color:var(--muted); margin-top:10px; font-size:17px; max-width:56ch; }
.shop-layout{ padding:30px 0 110px; }
.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; }
.chip{ background:var(--surface); border:1px solid var(--line); color:var(--muted); border-radius:999px; padding:8px 16px; font-size:13.5px; cursor:pointer; transition:all .2s; }
.chip:hover{ color:var(--text); border-color:var(--line-2); }
.chip.active{ background:var(--teal); color:#04221C; border-color:var(--teal); font-weight:600; }

/* cart drawer */
.overlay{ position:fixed; inset:0; background:rgba(4,8,7,0.6); backdrop-filter:blur(3px); z-index:130; opacity:0; pointer-events:none; transition:opacity .25s; }
.overlay.open{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:0; right:0; height:100%; width:420px; max-width:92vw; background:var(--bg-2); border-left:1px solid var(--line-2); z-index:140; transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column; }
.drawer.open{ transform:none; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line); }
.drawer__head h3{ font-family:var(--display); font-size:22px; }
.drawer__close{ background:none; border:0; color:var(--muted); font-size:24px; cursor:pointer; }
.drawer__items{ flex:1; overflow-y:auto; padding:10px 24px; }
.citem{ display:grid; grid-template-columns:60px 1fr auto; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); align-items:center; }
.citem__media{ width:60px; height:60px; border-radius:10px; overflow:hidden; }
.citem__name{ font-size:14px; font-weight:600; }
.citem__meta{ font-size:12.5px; color:var(--muted); margin-top:2px; display:flex; align-items:center; gap:8px; }
.qty{ display:inline-flex; align-items:center; gap:8px; }
.qty button{ width:22px; height:22px; border-radius:6px; border:1px solid var(--line-2); background:var(--surface); color:var(--text); cursor:pointer; font-size:14px; line-height:1; }
.citem__price{ font-family:var(--display); font-size:16px; }
.drawer__foot{ padding:20px 24px 26px; border-top:1px solid var(--line); }
.drawer__row{ display:flex; justify-content:space-between; margin-bottom:8px; font-size:14px; color:var(--muted); }
.drawer__row--total{ color:var(--text); font-size:18px; font-family:var(--display); margin:12px 0 18px; }
.cart-empty{ text-align:center; color:var(--muted); padding:60px 20px; }

/* checkout modal */
.modal{ position:fixed; inset:0; z-index:150; display:none; align-items:center; justify-content:center; padding:20px; }
.modal.open{ display:flex; }
.modal__card{ background:#0f1817; border:1px solid var(--line-2); border-radius:20px; width:440px; max-width:96vw; max-height:92vh; overflow-y:auto; }
.modal__head{ padding:22px 26px 0; }
.modal__lock{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:7px; }
.modal__head h3{ font-family:var(--display); font-size:24px; margin:12px 0 2px; }
.modal__body{ padding:18px 26px 26px; }
.field{ margin-bottom:14px; }
.field label{ font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); display:block; margin-bottom:6px; }
.field input{ width:100%; background:#0a1211; border:1px solid var(--line-2); border-radius:10px; padding:12px 14px; color:var(--text); font-family:var(--ui); font-size:15px; }
.field input:focus{ outline:none; border-color:var(--teal); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.stripe-tag{ display:flex; align-items:center; justify-content:center; gap:7px; font-size:12px; color:var(--muted-2); margin-top:14px; }
.modal__success{ text-align:center; padding:40px 30px; }
.modal__success .ring{ width:64px; height:64px; border-radius:50%; background:rgba(227,192,141,0.14); color:var(--teal); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:30px; }

/* ============ ADMIN page ============ */
.admin-body{ background:#0b1110; }
.admin{ display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.aside{ background:#0e1615; border-right:1px solid var(--line); padding:22px 16px; display:flex; flex-direction:column; }
.aside__brand{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:18px; padding:0 8px 22px; border-bottom:1px solid var(--line); }
.aside__sec{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted-2); margin:22px 8px 8px; }
.aside__link{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; color:var(--muted); font-size:14.5px; cursor:pointer; }
.aside__link:hover{ color:var(--text); background:var(--surface); }
.aside__link.active{ background:rgba(227,192,141,0.12); color:var(--text); }
.aside__link.active i{ color:var(--teal); }
.aside__user{ margin-top:auto; display:flex; align-items:center; gap:10px; padding:12px 8px 0; border-top:1px solid var(--line); font-size:13.5px; }
.aside__avatar{ width:32px; height:32px; border-radius:50%; background:var(--teal); color:#04221C; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.amain{ padding:26px 34px; }
.atop{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.atop h1{ font-family:var(--display); font-size:30px; }
.login-pill{ display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:6px 13px; font-size:12.5px; color:var(--muted); }
.asub{ color:var(--muted); margin-bottom:24px; }
.atable{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.atable th{ text-align:left; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted-2); padding:14px 18px; border-bottom:1px solid var(--line); font-weight:600; }
.atable td{ padding:14px 18px; border-bottom:1px solid var(--line); font-size:14.5px; vertical-align:middle; }
.atable tr:last-child td{ border-bottom:0; }
.atable tr:hover td{ background:var(--surface-2); }
.aprod{ display:flex; align-items:center; gap:12px; }
.aprod__media{ width:40px; height:40px; border-radius:8px; overflow:hidden; flex:none; }
.aprod__name{ font-weight:600; font-size:14px; }
.badge{ font-size:11px; padding:3px 9px; border-radius:999px; font-weight:600; }
.badge--live{ background:rgba(227,192,141,0.16); color:var(--teal); }
.badge--draft{ background:rgba(242,167,101,0.16); color:var(--amber); }
.alink{ color:var(--teal); font-size:13.5px; cursor:pointer; }
.cards-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; }
.kpi .n{ font-family:var(--display); font-size:30px; }
.kpi .l{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.kpi .d{ font-size:12px; color:var(--teal); margin-top:8px; }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; margin-top:24px; }
.panel h3{ font-family:var(--display); font-size:20px; margin-bottom:4px; }
.panel .sub{ color:var(--muted); font-size:13.5px; margin-bottom:18px; }
.support-row{ display:flex; gap:12px; align-items:flex-start; }
.support-row textarea{ flex:1; background:#0a1211; border:1px solid var(--line-2); border-radius:10px; padding:12px 14px; color:var(--text); font-family:var(--ui); font-size:14px; resize:none; min-height:46px; }
.support-sent{ display:none; align-items:center; gap:8px; font-size:13.5px; color:var(--teal); margin-top:12px; }
.support-sent.show{ display:flex; }

/* responsive */
@media(max-width:960px){
  .exp-grid,.prod-grid,.tiers,.footer__top{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; gap:30px; }
  .admin{ grid-template-columns:1fr; }
  .aside{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px; min-height:auto; }
  .aside__sec,.aside__user{ display:none; }
}
@media(max-width:720px){
  .nav__links{ display:none; }
  .burger{ display:block; }
  .nav__links.mobile{ display:flex; position:absolute; top:70px; left:0; right:0; flex-direction:column; background:var(--bg-2); border-bottom:1px solid var(--line); padding:14px 24px; gap:6px; }
  .nav__links.mobile a{ padding:12px 0; border-bottom:1px solid var(--line); }
  .exp-grid,.prod-grid,.prod-grid--3,.tiers,.footer__top{ grid-template-columns:1fr; }
  .hero__stats{ gap:26px; }
  .cards-row{ grid-template-columns:1fr 1fr; }
  .section{ padding:72px 0; }
}

/* ============ idioma + reservas (turismo) ============ */
.lang{ display:inline-flex; align-items:center; gap:1px; border:1px solid var(--line-2); border-radius:999px; padding:2px; }
.lang-btn{ background:none; border:0; color:var(--muted); cursor:pointer; padding:5px 11px; font-family:var(--ui); font-size:12.5px; border-radius:999px; line-height:1; }
.lang-btn.active{ background:var(--teal); color:#10243a; font-weight:600; }

.booking{ display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:14px; align-items:end; background:var(--surface); border:1px solid var(--line-2); border-radius:18px; padding:18px 20px; }
.booking .bf label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-bottom:7px; }
.booking .bf input{ width:100%; background:#0a1626; border:1px solid var(--line-2); border-radius:10px; padding:12px 13px; color:var(--text); font-family:var(--ui); font-size:14.5px; }
.booking .bf input:focus{ outline:none; border-color:var(--teal); }
@media(max-width:720px){ .booking{ grid-template-columns:1fr 1fr; } .booking .btn{ grid-column:1 / -1; } }