/* =========================================================
   CÓDIGO LUNAR · landing styles
   Paleta:
     --ink:    #0D0D0D
     --ink-2:  #14130F  (paneles)
     --ink-3:  #1A1A1A  (sutil)
     --gold:   #A88A4E
     --gold-2: #C9A969  (highlight)
     --cream:  #E7E4DE
     --cream-2:#B8B2A4  (muted)
     --green:  #383F36
   Tipo: EB Garamond (display, serif) + Sora (UI, sans)
   ========================================================= */

:root{
  --ink: #0D0D0D;
  --ink-2: #14130F;
  --ink-3: #1A1A1A;
  --gold: #A88A4E;
  --gold-2: #C9A969;
  --gold-soft: rgba(168,138,78,.22);
  --gold-line: rgba(168,138,78,.35);
  --cream: #E7E4DE;
  --cream-2: #948E80;
  --cream-3: #6B665A;
  --green: #383F36;

  --app-width: 460px;
  --radius: 14px;

  --serif: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  --sans: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body{
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* ============== Backdrop (desktop only — content app sits on top) ============== */

.backdrop{
  position: fixed; inset: 0;
  background:
    radial-gradient(1200px 800px at 80% 18%, rgba(168,138,78,.07), transparent 60%),
    radial-gradient(900px 700px at 15% 85%, rgba(56,63,54,.18), transparent 60%),
    var(--ink);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.backdrop__stars{
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 22%, rgba(231,228,222,.5), transparent 60%),
    radial-gradient(1px 1px at 78% 35%, rgba(231,228,222,.4), transparent 60%),
    radial-gradient(1.4px 1.4px at 88% 78%, rgba(201,169,105,.5), transparent 60%),
    radial-gradient(1px 1px at 5% 70%, rgba(231,228,222,.35), transparent 60%),
    radial-gradient(1.6px 1.6px at 35% 88%, rgba(231,228,222,.4), transparent 60%),
    radial-gradient(1px 1px at 60% 12%, rgba(231,228,222,.4), transparent 60%),
    radial-gradient(2px 2px at 92% 15%, rgba(201,169,105,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 22% 55%, rgba(231,228,222,.35), transparent 60%);
}
.backdrop__moon{
  position: absolute;
  right: -160px; top: 8vh;
  width: 520px; height: 520px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 40%, rgba(231,228,222,.06), rgba(168,138,78,.05) 40%, transparent 70%),
    radial-gradient(circle at 60% 50%, rgba(13,13,13,.6), transparent 60%);
  filter: blur(2px);
  opacity: .8;
}
.backdrop__brand{
  position: absolute;
  left: -8vw;
  bottom: -2vh;
  font-family: var(--serif);
  font-size: clamp(120px, 18vw, 280px);
  letter-spacing: .08em;
  color: rgba(168,138,78,.045);
  white-space: nowrap;
  font-weight: 500;
}

@media (max-width: 720px){
  .backdrop__moon, .backdrop__brand { display: none; }
}

/* ============== App column ============== */

.app{
  position: relative;
  z-index: 1;
  max-width: var(--app-width);
  margin: 0 auto;
  background: linear-gradient(180deg, #0B0B0B 0%, #0D0D0D 100%);
  box-shadow:
    0 0 0 1px rgba(168,138,78,.10),
    0 30px 80px rgba(0,0,0,.6);
  overflow: hidden;
  padding-bottom: 96px; /* space for sticky cta */
}

@media (min-width: 720px){
  .app{
    margin-top: 32px;
    margin-bottom: 32px;
    border-radius: 28px;
    overflow: hidden;
  }
}

/* ============== Topbar ============== */

.topbar{
  position: sticky; top: 0; z-index: 30;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  background: rgba(11,11,11,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gold-soft);
}
.topbar__mono img{ width: 36px; height: 36px; opacity: .95; }
.topbar__name{ display: flex; flex-direction: column; line-height: 1; }
.topbar__title{
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: .14em;
  font-size: 14px;
  color: var(--cream);
}
.topbar__sub{
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream-2);
  margin-top: 4px;
}
.topbar__cta{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-2);
  text-decoration: none;
  padding: 8px 12px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  transition: background .2s, color .2s;
}
.topbar__cta:hover{ background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* ============== Hero ============== */

.hero{
  padding: 36px 28px 48px;
  text-align: center;
  position: relative;
}
.hero__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 30px;
}
.hero__eyebrow .dot{
  width: 4px; height: 4px; background: var(--gold); border-radius: 50%;
  display: inline-block;
}
.hero__mono{
  margin: 0 auto 18px;
  width: 110px;
}
.hero__mono img{
  width: 100%;
  filter: drop-shadow(0 0 30px rgba(168,138,78,.22));
}
.hero__title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: .005em;
  margin: 0 0 22px;
  color: var(--cream);
}
.hero__title em{
  font-style: italic;
  color: var(--gold-2);
  font-weight: 400;
}
.hero__lede{
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--cream-2);
  margin: 0 auto 28px;
  max-width: 360px;
}

.hero__bullets{
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  margin: 0 auto 32px;
  max-width: 360px;
}
.hero__bullet{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 13.5px;
  color: var(--cream);
  line-height: 1.55;
}
.hb__icon{
  color: var(--gold-2);
  font-size: 12px;
  padding-top: 2px;
}

.hero__cta{ margin: 0 auto 16px; }

.hero__trust{
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-3);
  display: inline-flex;
  gap: 8px;
}
.trust-sep{ color: var(--gold); }

/* ============== CTA buttons ============== */

.cta{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px 28px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s ease, background .25s ease, box-shadow .25s ease;
  min-width: 280px;
  cursor: pointer;
}
.cta--primary{
  background: linear-gradient(180deg, #C9A969 0%, #A88A4E 60%, #8E6F38 100%);
  color: #1A1408;
  box-shadow:
    inset 0 1px 0 rgba(255,236,200,.5),
    0 8px 24px rgba(168,138,78,.25),
    0 1px 0 rgba(0,0,0,.4);
}
.cta--primary:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,236,200,.6),
    0 12px 32px rgba(168,138,78,.35),
    0 1px 0 rgba(0,0,0,.4);
}
.cta--xl{ width: 100%; padding: 20px 28px; }
.cta__main{
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cta__sub{
  font-family: var(--sans);
  font-weight: 300;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .75;
}

/* ============== Generic sections ============== */

.section{
  padding: 60px 28px;
  border-top: 1px solid var(--gold-soft);
  position: relative;
}

.kicker{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 22px;
}
.kicker__line{
  width: 36px;
  height: 1px;
  background: var(--gold-line);
}

.section__title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  text-align: center;
  margin: 0 0 16px;
  color: var(--cream);
}
.section__title em{ font-style: italic; color: var(--gold-2); }

.section__lede{
  font-size: 14px;
  line-height: 1.65;
  color: var(--cream-2);
  text-align: center;
  margin: 0 auto 32px;
  max-width: 360px;
}

.section__close{
  margin: 24px auto 0;
  text-align: center;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.45;
  color: var(--cream);
  max-width: 360px;
}
.section__close em{ color: var(--gold-2); font-style: italic; }

/* ============== Pains ============== */

.section--pain .pains{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pains li{
  padding: 16px 0 16px 28px;
  border-bottom: 1px solid rgba(168,138,78,.12);
  position: relative;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--cream);
}
.pains li::before{
  content: "✦";
  position: absolute;
  left: 4px; top: 14px;
  color: var(--gold);
  font-size: 11px;
}
.pains li:last-child{ border-bottom: none; }

/* ============== Quote section ============== */

.section--quote{
  text-align: center;
  padding: 72px 28px;
  background:
    radial-gradient(circle at 50% 50%, rgba(168,138,78,.04), transparent 70%);
}
.quote-mark{
  font-family: var(--serif);
  font-size: 96px;
  line-height: .6;
  color: var(--gold);
  opacity: .4;
  margin-bottom: 16px;
}
.quote{
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.3;
  margin: 0 auto;
  max-width: 360px;
  color: var(--cream);
}
.quote em{ color: var(--gold-2); font-style: italic; }
.quote-divider{
  margin-top: 28px;
  color: var(--gold);
}

/* ============== Product ============== */

.section--product{
  text-align: center;
}
.product-shot{
  margin: 32px -28px;
  padding: 0;
  position: relative;
}
.product-shot::before{
  content: "";
  position: absolute;
  inset: 10% 10%;
  background: radial-gradient(circle, rgba(168,138,78,.18), transparent 60%);
  z-index: 0;
}
.product-shot img{
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

.feature-strip{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.feat{
  text-align: center;
  padding: 16px 4px;
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  background: rgba(168,138,78,.03);
}
.feat__num{
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
  color: var(--gold-2);
  margin-bottom: 6px;
}
.feat__lbl{
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cream-2);
  line-height: 1.3;
}

/* ============== Steps ============== */

.steps{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.step{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding: 24px 22px;
  background: var(--ink-2);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
  position: relative;
}
.step__num{
  font-family: var(--serif);
  font-style: italic;
  font-size: 40px;
  line-height: 1;
  color: var(--gold-2);
  opacity: .85;
}
.step__title{
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--cream);
}
.step__body p{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cream-2);
}

/* ============== Phone demo ============== */

.section--demo{ text-align: center; }
.phone{
  margin: 28px auto 16px;
  width: 280px;
  background: #050505;
  border: 1.5px solid #2a2620;
  border-radius: 36px;
  padding: 8px 8px 20px;
  box-shadow:
    0 0 0 1px rgba(168,138,78,.15),
    0 30px 60px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.02);
  position: relative;
}
.phone__notch{
  position: absolute;
  top: 14px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 22px;
  background: #000;
  border-radius: 14px;
  z-index: 2;
}
.phone__screen{
  background: linear-gradient(180deg, #0a0a0a, #0d0d0d);
  border-radius: 30px;
  padding: 38px 16px 18px;
  min-height: 540px;
  position: relative;
  overflow: hidden;
}
.phone__screen::after{
  content: "";
  position: absolute;
  top: 0; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(168,138,78,.12), transparent 70%);
  pointer-events: none;
}
.phone__top{
  display: flex; justify-content: space-between;
  font-family: var(--sans);
  font-size: 10px;
  color: var(--cream-2);
  letter-spacing: .05em;
  margin-bottom: 14px;
  position: relative; z-index: 2;
}
.phone__icons{ letter-spacing: .1em; }

.phone__mono{ width: 48px; margin: 4px auto 4px; position: relative; z-index: 2; }
.phone__wordmark{
  text-align: center;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .26em;
  color: var(--cream);
  margin-bottom: 14px;
  position: relative; z-index: 2;
}

.phase-card{
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
  margin-bottom: 18px;
  background: rgba(168,138,78,.04);
  position: relative; z-index: 2;
}
.phase-card__label{
  font-family: var(--sans);
  font-size: 8.5px;
  letter-spacing: .26em;
  color: var(--gold-2);
  margin-bottom: 6px;
}
.phase-card__name{
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--cream);
  margin-bottom: 10px;
}
.phase-card__moons{
  display: flex; justify-content: center; gap: 10px;
  margin-bottom: 8px;
}
.moon{
  width: 14px; height: 14px; border-radius: 50%;
  background: #1a1a1a;
  border: 1px solid var(--gold-line);
  position: relative;
}
.moon.m1{ background: radial-gradient(circle at 70% 50%, var(--gold) 40%, #1a1a1a 41%); }
.moon.m2{ background: radial-gradient(circle at 60% 50%, var(--gold) 50%, #1a1a1a 51%); }
.moon.m3{ background: var(--gold); }
.moon.m4{ background: radial-gradient(circle at 40% 50%, var(--gold) 50%, #1a1a1a 51%); }
.moon.active{
  box-shadow: 0 0 0 2px rgba(168,138,78,.3), 0 0 12px rgba(168,138,78,.5);
}
.phase-card__tag{
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream-2);
}

.phone__q{
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--cream);
  text-align: center;
  margin-bottom: 10px;
  position: relative; z-index: 2;
}

.needs-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 14px;
  position: relative; z-index: 2;
}
.need{
  appearance: none;
  background: rgba(168,138,78,.05);
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  padding: 10px 4px;
  color: var(--cream);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--sans); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.need__icon{
  font-family: var(--serif);
  font-size: 18px;
  color: var(--gold-2);
  line-height: 1;
}
.need:hover, .need.is-active{
  background: rgba(168,138,78,.14);
  border-color: var(--gold);
}

.phone__search{
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--sans); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream-2);
  margin-bottom: 14px;
  position: relative; z-index: 2;
}
.phone__search-i{ color: var(--gold-2); font-size: 14px; }

.phone__ritual{
  border: 1px solid var(--gold-line);
  background: rgba(168,138,78,.06);
  border-radius: 10px;
  padding: 12px;
  text-align: left;
  position: relative; z-index: 2;
}
.ritual__head{
  display: flex; justify-content: space-between;
  font-family: var(--sans); font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 8px;
}
.ritual__title{
  font-family: var(--serif);
  font-size: 16px;
  color: var(--cream);
  margin-bottom: 8px;
}
.ritual__steps{
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--cream-2);
  line-height: 1.5;
}

.demo__caption{
  font-family: var(--sans);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-3);
  margin-top: 4px;
}

/* ============== Categories ============== */

.cats{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.cats li{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 9px 14px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  color: var(--cream);
  background: rgba(168,138,78,.03);
}

/* ============== Bonuses ============== */

.section--bonuses{
  background:
    linear-gradient(180deg, rgba(168,138,78,.025), transparent);
}
.bonus{
  background: var(--ink-2);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 18px;
  position: relative;
}
.bonus__img{
  background: #0a0a0a;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.bonus__img img{ width: 100%; height: 100%; object-fit: cover; }
.bonus__body{ padding: 22px 22px 24px; }
.bonus__tag{
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .3em;
  color: var(--gold-2);
  margin-bottom: 8px;
}
.bonus__title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--cream);
}
.bonus__copy{
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cream-2);
  margin: 0 0 16px;
}
.bonus__price{
  display: flex; align-items: baseline; gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(168,138,78,.15);
}
.bonus__price .strike{
  font-family: var(--serif);
  font-size: 26px;
  color: var(--cream-2);
  text-decoration: line-through;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  font-weight: 500;
}
.bonus__price .free{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: .04em;
  color: var(--gold-2);
  line-height: 1;
}

/* ============== Stack / pricing ============== */

.section--stack{
  background: linear-gradient(180deg, rgba(56,63,54,.10), transparent 80%);
}
.stack-card{
  background: var(--ink-2);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  padding: 28px 22px;
  position: relative;
}
.stack-card::before, .stack-card::after{
  content: "✦";
  position: absolute;
  color: var(--gold);
  font-size: 16px;
}
.stack-card::before{ top: -8px; left: 50%; transform: translateX(-50%); background: var(--ink); padding: 0 8px; }

.stack__title{
  font-family: var(--serif);
  font-size: 22px;
  margin: 0 0 22px;
  text-align: center;
  color: var(--cream);
}

.stack__list{ list-style: none; padding: 0; margin: 0 0 18px; }
.stack__row{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(168,138,78,.18);
}
.stack__row:last-child{ border-bottom: none; }
.stack__name{
  font-family: var(--sans);
  font-size: 13px;
  color: var(--cream);
  line-height: 1.35;
  flex: 1;
}
.stack__val{
  font-family: var(--serif);
  font-size: 18px;
  color: var(--cream);
  white-space: nowrap;
}
.stack__val s{
  color: var(--cream-2);
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  font-size: 19px;
  font-weight: 500;
  margin-right: 8px;
}
.stack__val em{
  color: var(--gold-2);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.stack__total{
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--gold-line);
  margin-bottom: 22px;
}
.stack__total-lbl{
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cream-2);
}
.stack__total-val s{
  font-family: var(--serif);
  font-size: 32px;
  color: var(--cream-2);
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  font-weight: 500;
}

.stack__price{
  text-align: center;
  padding: 22px 0 26px;
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
  margin-bottom: 22px;
  position: relative;
}
.stack__price-lbl{
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 6px;
}
.stack__price-amount{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.stack__price-amount .currency{
  font-family: var(--sans);
  font-size: 18px;
  color: var(--cream);
  letter-spacing: .08em;
}
.stack__price-amount .big{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 92px;
  line-height: 1;
  color: var(--cream);
  letter-spacing: -.02em;
}
.stack__price-note{
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream-2);
  margin-top: 8px;
}

.pay-row{
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cream-2);
}
.pay-row__brand{
  color: var(--cream);
  letter-spacing: .12em;
  font-weight: 500;
}

.trust-icons{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 22px;
}
.ti{
  text-align: center;
  padding: 12px 4px;
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
}
.ti__sym{
  font-family: var(--serif);
  font-size: 22px;
  color: var(--gold-2);
  line-height: 1;
  margin-bottom: 8px;
}
.ti__lbl{
  font-family: var(--sans);
  font-size: 8.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-2);
  line-height: 1.4;
}

/* ============== Who ============== */

.who-grid{
  display: flex; flex-direction: column; gap: 14px;
}
.who-card{
  border: 1px solid var(--gold-soft);
  background: var(--ink-2);
  border-radius: var(--radius);
  padding: 22px 20px;
}
.who-card__head{
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gold-line);
  color: var(--gold-2);
}
.who-card--no .who-card__head{ color: var(--cream-3); border-color: rgba(168,138,78,.15); }
.who-card ul{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.who-card li{
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cream);
}
.who-card--yes li::before{
  content: "✦"; position: absolute; left: 0; top: 1px;
  color: var(--gold-2);
  font-size: 11px;
}
.who-card--no li{ color: var(--cream-2); }
.who-card--no li::before{
  content: "—"; position: absolute; left: 0; top: 0;
  color: var(--cream-3);
}

/* ============== Guarantee ============== */

/* ============== Testimonios ============== */

.section--testimonios{
  background: linear-gradient(180deg, rgba(168,138,78,.03), transparent 70%);
}
.testimonios{
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.testimonio{
  margin: 0;
}
.testimonio img{
  width: 100%;
  height: auto;
  border-radius: 14px;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.45));
}

.section--guarantee{ background: rgba(56,63,54,.08); }

/* ============== Splash de carga ============== */
.splash{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #0D0D0D;
  transition: opacity .5s ease;
}
.splash.is-hidden{ opacity: 0; pointer-events: none; }
.splash__mono{
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 0 28px rgba(168,138,78,.35));
  animation: splashPulse 1.6s ease-in-out infinite;
}
.splash__name{
  font-family: var(--serif, Georgia, serif);
  letter-spacing: .32em;
  font-size: 14px;
  color: #A88A4E;
  padding-left: .32em;
}
@keyframes splashPulse{
  0%,100%{ opacity: .55; transform: scale(.97); }
  50%{ opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .splash__mono{ animation: none; }
}
.guarantee{
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  align-items: center;
  padding: 24px 20px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  background: var(--ink-2);
}
.guarantee__seal{
  position: relative;
  width: 100px; height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 18px rgba(168,138,78,.3));
}
.guarantee__seal img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.guarantee__body h3{
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--cream);
}
.guarantee__body p{
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--cream-2);
}

/* ============== FAQ ============== */

.faq{ display: flex; flex-direction: column; }
.faq details{
  border-bottom: 1px solid var(--gold-soft);
}
.faq details:first-child{ border-top: 1px solid var(--gold-soft); }
.faq summary{
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--cream);
}
.faq summary::-webkit-details-marker{ display: none; }
.faq__plus{
  font-family: var(--sans);
  font-size: 20px;
  color: var(--gold-2);
  transition: transform .25s;
  font-weight: 200;
}
.faq details[open] .faq__plus{ transform: rotate(45deg); }
.faq__a{
  padding: 0 0 20px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--cream-2);
}

/* ============== Final CTA ============== */

.section--final{
  text-align: center;
  padding: 64px 28px;
  background:
    radial-gradient(circle at 50% 30%, rgba(168,138,78,.08), transparent 60%);
}
.final__mono{ width: 80px; margin: 0 auto 20px; }
.final__mono img{ filter: drop-shadow(0 0 24px rgba(168,138,78,.3)); }
.final__title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--cream);
}
.final__title em{ color: var(--gold-2); font-style: italic; }
.final__sub{
  font-size: 14px;
  color: var(--cream-2);
  margin: 0 auto 32px;
  max-width: 320px;
}
.final__small{
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream-3);
}

/* ============== Footer ============== */

.footer{
  text-align: center;
  padding: 40px 28px 48px;
  border-top: 1px solid var(--gold-soft);
}
.footer__mono{ width: 44px; margin: 0 auto 12px; opacity: .7; }
.footer__brand{
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .26em;
  color: var(--cream);
  margin-bottom: 6px;
}
.footer__tag{
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--cream-2);
  margin-bottom: 22px;
}
.footer__links{
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream-3);
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.footer__links a{ text-decoration: none; color: var(--cream-2); }
.footer__links span{ color: var(--gold); }
.footer__copy{
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--cream-3);
}

/* ============== Sticky CTA mobile ============== */

.sticky-cta{
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 22px;
  background: linear-gradient(180deg, #C9A969, #A88A4E);
  color: #1A1408;
  border-radius: 999px;
  text-decoration: none;
  box-shadow:
    0 12px 32px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,236,200,.4) inset,
    0 6px 20px rgba(168,138,78,.3);
  width: calc(var(--app-width) - 36px);
  max-width: calc(100vw - 32px);
  font-family: var(--sans);
  transition: transform .15s;
}
.sticky-cta:hover{ transform: translateX(-50%) translateY(-2px); }
.sticky-cta__price{
  font-family: var(--serif);
  font-size: 16px;
  flex: 1;
  display: flex; align-items: baseline; gap: 8px;
}
.sticky-cta__price s{
  color: rgba(26,20,8,.6);
  font-size: 18px;
  text-decoration-color: rgba(26,20,8,.55);
  text-decoration-thickness: 2px;
  font-weight: 500;
}
.sticky-cta__price em{
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}
.sticky-cta__btn{
  background: #0D0D0D;
  color: var(--gold-2);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 500;
}

@media (min-width: 720px){
  .sticky-cta{
    bottom: 28px;
  }
}

/* ============== reduced motion ============== */
@media (prefers-reduced-motion: reduce){
  /* no-op */
}

/* ============== Phone video (tour de la app) ============== */

.phone-video{
  margin: 28px auto 24px;
  display: flex;
  justify-content: center;
}
.phone-video__bezel{
  width: 240px;
  background: #050505;
  border: 1.5px solid #2a2620;
  border-radius: 36px;
  padding: 6px;
  box-shadow:
    0 0 0 1px rgba(168,138,78,.18),
    0 30px 60px rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(255,255,255,.02);
  position: relative;
  overflow: hidden;
}
.phone-video__notch{
  position: absolute;
  top: 14px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 20px;
  background: #000;
  border-radius: 12px;
  z-index: 3;
  pointer-events: none;
}
.phone-video__bezel video{
  width: 100%;
  display: block;
  border-radius: 30px;
  background: #000;
}

/* ============== Cats as flowing prose ============== */

.cats-list{
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.45;
  text-align: center;
  color: var(--cream);
  margin: 8px auto 0;
  max-width: 380px;
  text-wrap: pretty;
}
.cats-list span{
  color: var(--gold);
  font-size: 11px;
  vertical-align: middle;
  margin: 0 2px;
  display: inline-block;
  transform: translateY(-2px);
}

.phones{
  display: flex;
  gap: 10px;
  margin: 28px -4px 8px;
  justify-content: center;
  align-items: flex-start;
}
.rp{
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.rp__frame{
  width: 100%;
  background: #050505;
  border: 1.5px solid #2a2620;
  border-radius: 18px;
  padding: 4px;
  box-shadow:
    0 0 0 1px rgba(168,138,78,.15),
    0 18px 32px rgba(0,0,0,.55);
  overflow: hidden;
}
.rp__frame img{
  width: 100%;
  display: block;
  border-radius: 14px;
  background: #000;
}
.rp figcaption{
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.4;
  color: var(--cream-2);
  text-align: center;
  padding: 0 2px;
}
.rp__step{
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--gold-2);
  line-height: 1;
  margin-bottom: 4px;
}

/* The middle phone gets a slight lift to feel intentional */
.rp:nth-child(2){
  transform: translateY(-8px);
}

@media (max-width: 380px){
  .phones{ gap: 6px; }
  .rp figcaption{ font-size: 10px; }
}

/* ============== Phases section ============== */

.section--phases{
  background: linear-gradient(180deg, rgba(168,138,78,.025), transparent 60%);
}
.phases-grid{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.phase{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 18px;
  background: var(--ink-2);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
}
.phase__moon{
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 12px rgba(168,138,78,.2));
}
.phase__moon svg{ width: 100%; height: 100%; }
.phase__name{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 6px;
}
.phase__desc{
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.35;
  color: var(--cream);
  margin: 0;
}

/* ============== Hero pains + tagline (Grimorio angle) ============== */
.hero__pains{
  list-style: none;
  padding: 0;
  margin: 0 auto 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 340px;
}
.hero__pains li{
  font-family: var(--serif);
  font-style: italic;
  font-size: 23px;
  line-height: 1.25;
  color: var(--cream);
  padding: 11px 0;
}
.hero__pains li + li{
  border-top: 1px solid rgba(168,138,78,.14);
}
.hero__tagline{
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.45;
  color: var(--gold-2);
  max-width: 340px;
  margin: 20px auto 26px;
}

/* ============== Need checklist (12 categorías) ============== */
.need-checklist{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.need-checklist li{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--gold-soft);
  border-radius: 10px;
  background: rgba(168,138,78,.03);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--cream);
  line-height: 1.2;
}
.nc__check{
  flex: none;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
}

/* ============== Además / features ============== */
.extras{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.extra{
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 18px;
  background: var(--ink-2);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
}
.extra__sym{
  width: 48px; height: 48px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  font-size: 22px;
  color: var(--gold-2);
}
.extra__sym svg{ width: 21px; height: 21px; }
.extra__title{
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--cream);
}
.extra__copy{
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cream-2);
}