/* ─────────────────────────────────────────────────────
   CANASTA CAMPESINA — design system
   ───────────────────────────────────────────────────── */

:root{
  /* Color palette */
  --cream:#f7f3ec;
  --sand:#ede6d6;
  --sand-deep:#e3d9c2;
  --forest:#293523;
  --forest-deep:#1c2618;
  --sage:#8daa88;
  --sage-deep:#6f8e6a;
  --terracotta:#ae5e38;
  --terracotta-deep:#8e4929;
  --dorado:#b88c30;
  --wapp:#3aaa6a;
  --wapp-deep:#2e8a55;
  --ink:#1c2618;
  --ink-mute:#4a5347;
  --line:rgba(41,53,35,.10);
  --line-light:rgba(247,243,236,.12);

  /* Fonts */
  --serif:'Fraunces', ui-serif, Georgia, serif;
  --sans:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

  /* Spacing scale (8px base) */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:24px;
  --s-6:32px;
  --s-7:48px;
  --s-8:64px;
  --s-9:96px;
  --s-10:128px;

  /* Section rhythm — uniform vertical spacing */
  --section-py:clamp(72px, 9vw, 112px);
  --section-py-lg:clamp(96px, 12vw, 152px);

  /* Radii — only three canonical values */
  --r-sm:12px;
  --r-md:20px;
  --r-lg:32px;
  --r-pill:999px;

  /* Type scale */
  --fs-xs:12px;
  --fs-sm:13.5px;
  --fs-base:16px;
  --fs-md:18px;
  --fs-lg:22px;
  --fs-h3:clamp(22px, 2.4vw, 28px);
  --fs-h2:clamp(32px, 4.5vw, 52px);
  --fs-h1:clamp(40px, 6.8vw, 76px);
  --fs-display:clamp(64px, 12vw, 132px);

  /* Layout */
  --maxw:1200px;
  --pad:clamp(20px, 5vw, 56px);

  /* Shadows */
  --sh-sm:0 1px 2px rgba(41,53,35,.04);
  --sh-md:0 8px 24px -10px rgba(41,53,35,.18);
  --sh-lg:0 24px 48px -20px rgba(41,53,35,.28);
  --sh-cta:0 14px 30px -16px rgba(58,170,106,.55), inset 0 -2px 0 rgba(0,0,0,.08);
}

/* ─── BASE ─── */
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
  font-size:var(--fs-base);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit }
p{ margin:0; text-wrap:pretty }

/* ─── TYPOGRAPHY ─── */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:700;
  letter-spacing:-.015em;
  margin:0;
  line-height:1.1;
  text-wrap:balance;
}
h1{
  font-size:var(--fs-h1);
  font-weight:900;
  letter-spacing:-.025em;
  font-variation-settings:'opsz' 72;
}
h2{
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.1;
  font-variation-settings:'opsz' 72;
}
h3{
  font-size:var(--fs-h3);
  font-weight:700;
}

/* ─── LAYOUT ─── */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}
section{ position:relative }
.sec-cream{ background:var(--cream); color:var(--ink) }
.sec-sand{ background:var(--sand); color:var(--ink) }
.sec-forest{ background:var(--forest); color:var(--cream) }
.sec-forest p, .sec-forest .muted{ color:#cfd2c6 }
.pad-y{ padding-top:var(--section-py); padding-bottom:var(--section-py) }
.pad-y-lg{ padding-top:var(--section-py-lg); padding-bottom:var(--section-py-lg) }

/* ─── EYEBROW ─── */
.eyebrow{
  display:inline-flex; align-items:center;
  gap:var(--s-3);
  font-family:var(--sans);
  font-size:var(--fs-xs);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--dorado);
}
.eyebrow::before{
  content:""; width:24px; height:1px; background:currentColor;
}
.dark .eyebrow{ color:#d8b766 }

/* ─── BUTTONS ─── */
.btn{
  display:inline-flex; align-items:center;
  gap:var(--s-3);
  padding:18px 26px;
  border-radius:var(--r-pill);
  font-weight:600;
  font-size:16px;
  transition: transform .2s ease, background .2s ease;
  text-decoration:none;
  will-change: transform;
}
.btn-wapp{
  background:var(--wapp); color:#fff;
  box-shadow:var(--sh-cta);
}
.btn-wapp:hover{ background:var(--wapp-deep); transform:translateY(-2px) }
.btn-wapp:active{ transform:translateY(0) }
.btn .ico{ width:20px; height:20px; flex:0 0 20px }

.btn-link{
  display:inline-flex; align-items:center;
  gap:6px;
  padding:14px 4px;
  font-size:15px;
  font-weight:600;
  color:var(--sage);
  text-decoration:none;
  border-bottom:1px solid rgba(141,170,136,.4);
  transition: color .2s ease, border-color .2s ease;
}
.btn-link:hover{ color:#a8c4a4; border-color:var(--sage) }
.btn-link:focus-visible{ outline:2px solid var(--sage); outline-offset:4px; border-radius:4px }

/* ─── WAVE DIVIDERS ─── */
.wave{
  display:block;
  width:100%;
  height:clamp(48px, 7vw, 96px);
  position:relative;
  z-index:2;
}
.wave-bot{ margin-bottom:-1px }
.wave-top{ margin-top:-1px }

/* ─── HERO ─── */
.hero{
  position:relative;
  background:var(--forest);
  color:var(--cream);
  padding-top:clamp(24px, 3vw, 40px);
  overflow:hidden;
  isolation:isolate;
}
.hero::before,.hero::after{
  content:""; position:absolute;
  border-radius:50%; filter:blur(40px);
  pointer-events:none; z-index:0;
}
.hero::before{
  width:520px; height:520px;
  background:radial-gradient(circle, #4b6a3f 0%, transparent 70%);
  top:-160px; right:-120px;
  opacity:.55;
}
.hero::after{
  width:420px; height:420px;
  background:radial-gradient(circle, #ae5e38 0%, transparent 70%);
  bottom:-180px; left:-160px;
  opacity:.32;
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-5);
  position:relative; z-index:3;
}
.brand{
  display:flex; align-items:center;
  gap:var(--s-3);
  font-family:var(--serif);
  font-size:var(--fs-lg);
  font-weight:700;
  letter-spacing:-.01em;
  text-decoration:none;
}
.brand-mark{
  width:38px; height:38px;
  border-radius:var(--r-sm);
  background:var(--cream); color:var(--forest);
  display:grid; place-items:center;
  font-family:var(--serif);
  font-size:var(--fs-lg);
  font-weight:900;
  transform:rotate(-6deg);
}
.nav-cta{
  display:none;
  font-size:14px; color:var(--cream);
  text-decoration:none;
  border:1px solid rgba(247,243,236,.22);
  padding:10px 16px;
  border-radius:var(--r-pill);
}
@media (min-width:760px){
  .nav-cta{ display:inline-flex; align-items:center; gap:var(--s-2) }
}

.hero-grid{
  display:grid;
  gap:clamp(40px, 6vw, 72px);
  grid-template-columns:1fr;
  align-items:center;
  padding-top:clamp(48px, 7vw, 80px);
  padding-bottom:clamp(80px, 11vw, 128px);
  position:relative; z-index:2;
}
@media (min-width:900px){
  .hero-grid{ grid-template-columns:1fr 1fr }
}

.hero-pretitle{
  display:inline-flex; align-items:center;
  gap:var(--s-3);
  padding:8px 14px 8px 10px;
  border-radius:var(--r-pill);
  background:rgba(247,243,236,.08);
  border:1px solid rgba(247,243,236,.14);
  font-size:13px; font-weight:500;
  color:#dfe2d5;
  margin-bottom:var(--s-5);
}
.hero-pretitle .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--sage);
  box-shadow:0 0 0 4px rgba(141,170,136,.25);
}

.hero h1{ color:var(--cream) }
.hero h1 em{
  font-style:italic;
  color:var(--sage);
  font-weight:700;
  font-variation-settings:'opsz' 72;
}
.hero-lede{
  margin-top:var(--s-5);
  font-size:clamp(17px, 1.6vw, 19px);
  max-width:38ch;
  color:#d8dccd;
}

.price-block{
  display:flex; align-items:flex-end;
  gap:var(--s-5);
  margin:var(--s-7) 0 var(--s-6);
}
.price-block .price{
  font-family:var(--serif);
  font-weight:900;
  font-size:clamp(54px, 8vw, 84px);
  line-height:.95;
  letter-spacing:-.03em;
  color:var(--cream);
  font-variation-settings:'opsz' 144;
}
.price-block .price-sub{
  display:flex; flex-direction:column;
  gap:2px;
  padding-bottom:12px;
  font-size:13px;
  color:#cfd3c4;
  line-height:1.35;
}
.price-block .price-sub strong{
  color:var(--cream);
  font-weight:700;
  font-size:14px;
}
.price-compare{
  display:block;
  font-size:12.5px;
  color:#a9b09c;
  margin-top:6px;
  line-height:1.3;
}
.price-compare del{
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
  opacity:.8;
}
.price-compare strong{ color:#d8b766; font-weight:700 }

.hero-cta{
  display:flex; flex-wrap:wrap;
  gap:var(--s-4);
  align-items:center;
}
.hero-foot{
  margin-top:var(--s-6);
  display:flex; flex-wrap:wrap;
  gap:var(--s-3) var(--s-6);
  font-size:13px;
  color:#b8bdac;
}
.hero-foot span{ display:inline-flex; align-items:center; gap:var(--s-2) }
.hero-foot svg{ width:16px; height:16px; color:var(--sage) }

/* Hero photo */
.hero-photo{
  position:relative;
  aspect-ratio:4/5;
  width:100%;
  max-width:480px;
  justify-self:center;
}
.hero-photo img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
}
.hero-photo .chip{
  position:absolute;
  background:var(--cream); color:var(--forest);
  border-radius:var(--r-md);
  padding:12px 16px;
  box-shadow:0 20px 30px -18px rgba(0,0,0,.35);
  display:flex; align-items:center;
  gap:var(--s-3);
  font-size:13px; font-weight:600;
  line-height:1.2;
}
.hero-photo .chip-1{ top:4%; left:4% }
.hero-photo .chip-2{
  bottom:6%; right:4%;
  background:var(--terracotta);
  color:#fff;
}
.hero-photo .chip .num{
  font-family:var(--serif);
  font-size:22px;
  line-height:1;
  font-weight:900;
}

/* ─── MARQUEE ─── */
.marquee{
  background:var(--terracotta);
  color:#f7ece3;
  padding:var(--s-4) 0;
  overflow:hidden;
}
.marquee-track{
  display:flex;
  gap:40px;
  width:max-content;
  animation: scroll 38s linear infinite;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(18px, 2.2vw, 24px);
  letter-spacing:-.01em;
}
.marquee-track span{
  display:inline-flex; align-items:center;
  gap:40px;
  white-space:nowrap;
}
.marquee-track .sep{
  width:10px; height:10px;
  border-radius:50%;
  background:#f7ece3;
  opacity:.6;
  flex:0 0 10px;
}
@keyframes scroll{
  from{ transform:translateX(0) }
  to{ transform:translateX(-50%) }
}

/* ─── HISTORIA ─── */
.historia-grid{
  display:grid;
  gap:clamp(40px, 6vw, 72px);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:900px){
  .historia-grid{ grid-template-columns:1fr 1.1fr }
}
.historia-photo{
  position:relative;
  aspect-ratio:4/5;
  max-width:440px;
  margin:0 auto;
}
.historia-photo img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:var(--r-lg);
}
.historia-photo .stamp{
  position:absolute;
  bottom:16px; right:16px;
  width:104px; height:104px;
  border-radius:50%;
  background:var(--dorado);
  color:var(--forest);
  display:grid; place-items:center;
  text-align:center;
  font-family:var(--serif);
  font-weight:700;
  line-height:1.1;
  padding:12px;
  box-shadow:var(--sh-md);
  transform:rotate(-8deg);
}
.historia-photo .stamp small{
  display:block;
  font-size:10.5px;
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.65;
  margin-bottom:4px;
}
.historia-photo .stamp strong{ font-size:14px }

.historia-copy .eyebrow{ margin-bottom:var(--s-3) }
.historia-copy h2{ margin:var(--s-3) 0 var(--s-5) }
.historia-copy p{
  font-size:17px;
  color:#3d4738;
  max-width:54ch;
  line-height:1.55;
}
.historia-copy p + p{ margin-top:var(--s-4) }

.stats{
  margin-top:var(--s-7);
  display:grid;
  gap:var(--s-5);
  grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--line);
  padding-top:var(--s-6);
}
@media (max-width:520px){
  .stats{ grid-template-columns:1fr 1fr; gap:var(--s-4); padding-top:var(--s-5) }
  .stats .stat:nth-child(3){ grid-column:1 / -1 }
}
.stats .stat .num{
  font-family:var(--serif);
  font-size:clamp(36px, 4.5vw, 52px);
  font-weight:900;
  line-height:1;
  color:var(--forest);
  letter-spacing:-.02em;
  font-variation-settings:'opsz' 72;
}
.stats .stat .lbl{
  margin-top:var(--s-2);
  font-size:13px;
  color:var(--ink-mute);
  font-weight:500;
}

/* ─── FOUNDER ─── */
.founder-row{
  margin:var(--s-9) auto 0;
  display:grid;
  gap:var(--s-5);
  grid-template-columns:auto 1fr;
  align-items:center;
  padding:var(--s-5) var(--s-6);
  background:var(--sand);
  border-radius:var(--r-md);
  max-width:760px;
  box-shadow:var(--sh-sm);
}
.founder-row img{
  width:76px; height:76px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 10px 22px -14px rgba(0,0,0,.4);
}
.founder-row .eyebrow{ margin-bottom:var(--s-2) }
.founder-row .founder-quote{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(17px, 1.6vw, 19px);
  color:var(--forest);
  line-height:1.35;
  margin:0 0 var(--s-2);
  font-variation-settings:'opsz' 72;
}
.founder-row .founder-sig{
  font-size:13px;
  color:var(--ink-mute);
  font-weight:500;
  margin:0;
}
@media (max-width:600px){
  .founder-row{
    grid-template-columns:1fr;
    padding:var(--s-5);
  }
  .founder-row img{ width:64px; height:64px }
}

/* ─── LA CANASTA ─── */
.canasta-head{
  display:grid;
  gap:var(--s-5);
  align-items:end;
  grid-template-columns:1fr;
  margin-bottom:var(--s-8);
}
@media (min-width:780px){
  .canasta-head{ grid-template-columns:1.4fr .6fr; gap:var(--s-8) }
}
.canasta-head h2{ margin-top:var(--s-4) }
.canasta-head .note{
  color:var(--ink-mute);
  font-size:15px;
  max-width:34ch;
  padding:var(--s-5);
  background:rgba(255,255,255,.5);
  border-radius:var(--r-md);
  line-height:1.5;
}

.canasta-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--s-3);
}
@media (min-width:640px){
  .canasta-grid{ grid-template-columns:repeat(3, 1fr); gap:var(--s-4) }
}
@media (min-width:980px){
  .canasta-grid{ grid-template-columns:repeat(4, 1fr); gap:var(--s-4) }
}

.item{
  background:var(--cream);
  border-radius:var(--r-md);
  padding:var(--s-5) var(--s-4) var(--s-4);
  transition:transform .25s ease;
  display:flex; flex-direction:column;
  gap:var(--s-1);
  box-shadow:var(--sh-sm);
}
.item:hover{ transform:translateY(-3px) }
.item .emoji{
  font-size:28px;
  line-height:1;
  margin-bottom:var(--s-2);
}
.item .name{
  font-family:var(--serif);
  font-size:17px;
  font-weight:700;
  line-height:1.2;
}
.item .qty{
  font-size:12.5px;
  color:var(--ink-mute);
  font-weight:500;
}

/* ─── FULL-BLEED ─── */
.fullbleed{
  position:relative;
  height:clamp(360px, 50vw, 520px);
  overflow:hidden;
  display:grid; place-items:center;
  color:var(--cream);
  isolation:isolate;
}
.fullbleed img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-2;
}
.fullbleed::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,38,24,.5), rgba(28,38,24,.72));
  z-index:-1;
}
.fullbleed blockquote{
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(28px, 4vw, 48px);
  line-height:1.2;
  letter-spacing:-.015em;
  max-width:22ch;
  text-align:center;
  padding:0 var(--pad);
  font-variation-settings:'opsz' 72;
}
.fullbleed .cite{
  margin-top:var(--s-5);
  font-family:var(--sans);
  font-style:normal;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#d6c4a4;
  text-align:center;
}

/* ─── BENEFICIOS ─── */
.benefits-head{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-5);
  margin-bottom:var(--s-8);
  align-items:end;
}
@media (min-width:820px){
  .benefits-head{ grid-template-columns:1.3fr .7fr; gap:var(--s-8) }
}
.benefits-head h2{ margin-top:var(--s-4) }
.benefits-head p{
  color:var(--ink-mute);
  max-width:42ch;
  font-size:16px;
  line-height:1.55;
}

.benefits{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-4);
}
@media (min-width:720px){
  .benefits{ grid-template-columns:1fr 1fr; gap:var(--s-5) }
}
.benefit{
  padding:var(--s-6);
  background:var(--cream);
  border-radius:var(--r-md);
  border:1px solid var(--line);
}
.benefit .ico-wrap{
  width:48px; height:48px;
  border-radius:var(--r-sm);
  background:var(--sage); color:#fff;
  display:grid; place-items:center;
  margin-bottom:var(--s-5);
}
.benefit:nth-child(2) .ico-wrap{ background:var(--terracotta) }
.benefit:nth-child(3) .ico-wrap{ background:var(--dorado); color:var(--forest) }
.benefit:nth-child(4) .ico-wrap{ background:var(--forest) }
.benefit .ico-wrap svg{ width:22px; height:22px }
.benefit h3{ margin-bottom:var(--s-2) }
.benefit p{
  color:var(--ink-mute);
  font-size:15px;
  line-height:1.55;
}

/* ─── TESTIMONIOS ─── */
.testimonios-head{
  display:flex; flex-direction:column;
  align-items:flex-start;
  margin-bottom:var(--s-7);
}
.testimonios-head h2{ margin-top:var(--s-4) }
.testimonios-head h2 em{
  color:var(--sage);
  font-style:italic;
  font-weight:700;
  font-variation-settings:'opsz' 72;
}
.testimonios{
  display:grid;
  gap:var(--s-4);
  grid-template-columns:1fr;
}
@media (min-width:720px){
  .testimonios{ grid-template-columns:repeat(3, 1fr); gap:var(--s-5) }
}
.testimonial{
  background:#fff;
  border-radius:var(--r-md);
  padding:var(--s-6) var(--s-5) var(--s-5);
  display:flex; flex-direction:column;
  gap:var(--s-4);
  border:1px solid var(--line);
  box-shadow:var(--sh-sm);
}
.testimonial .stars{
  color:var(--dorado);
  font-size:15px;
  letter-spacing:3px;
  line-height:1;
}
.testimonial .quote{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:16.5px;
  line-height:1.4;
  color:var(--forest);
  margin:0;
  font-variation-settings:'opsz' 72;
}
.testimonial .who{
  display:flex; align-items:center;
  gap:var(--s-3);
  margin-top:auto;
  padding-top:var(--s-3);
  border-top:1px solid var(--line);
}
.testimonial .who img{
  width:40px; height:40px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 40px;
}
.testimonial .who strong{
  display:block;
  font-family:var(--serif);
  font-weight:700;
  font-size:14.5px;
  color:var(--forest);
  line-height:1.1;
}
.testimonial .who span{
  display:block;
  font-size:12px;
  color:var(--ink-mute);
  margin-top:2px;
}

/* ─── COMO FUNCIONA ─── */
.como-head{ max-width:38ch }
.como-head h2{
  color:var(--cream);
  margin-top:var(--s-4);
}
.como-head h2 em{
  color:var(--sage);
  font-style:italic;
  font-weight:700;
  font-variation-settings:'opsz' 72;
}
.como-head p{
  color:#c2c8b8;
  margin-top:var(--s-4);
  max-width:46ch;
  line-height:1.55;
}
.steps{
  display:grid;
  gap:var(--s-5);
  grid-template-columns:1fr;
  margin-top:var(--s-7);
}
@media (min-width:820px){
  .steps{ grid-template-columns:repeat(3, 1fr); gap:var(--s-5) }
}
.step{
  padding:var(--s-6);
  border-radius:var(--r-md);
  background:rgba(247,243,236,.04);
  border:1px solid var(--line-light);
}
.step .num{
  font-family:var(--serif);
  font-weight:900;
  font-size:48px;
  line-height:1;
  color:var(--sage);
  letter-spacing:-.04em;
  display:block;
  margin-bottom:var(--s-4);
  font-variation-settings:'opsz' 72;
}
.step h3{
  color:var(--cream);
  margin-bottom:var(--s-3);
}
.step p{
  color:#c2c8b8;
  font-size:15px;
  line-height:1.55;
}

/* ─── FAQ ─── */
.faq-grid{
  display:grid;
  gap:clamp(32px, 4.5vw, 64px);
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .faq-grid{ grid-template-columns:1fr 1.4fr; align-items:start }
}
.faq-intro h2{ margin:var(--s-4) 0 }
.faq-intro p{
  color:var(--ink-mute);
  max-width:32ch;
  font-size:16px;
  line-height:1.55;
}
.faq-intro .small{
  margin-top:var(--s-5);
  font-size:13px;
  color:var(--terracotta-deep);
  font-weight:600;
}
.faq-list{ border-top:1px solid var(--line) }
details{
  border-bottom:1px solid var(--line);
  padding:var(--s-5) 0;
}
details summary{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:center;
  justify-content:space-between;
  gap:var(--s-5);
  font-family:var(--serif);
  font-size:clamp(17px, 1.8vw, 20px);
  font-weight:700;
  line-height:1.2;
  color:var(--forest);
}
details summary::-webkit-details-marker{ display:none }
details summary .plus{
  flex:0 0 32px;
  width:32px; height:32px;
  border-radius:50%;
  background:var(--sand);
  color:var(--forest);
  display:grid; place-items:center;
  transition: transform .3s ease, background .2s ease;
  font-size:20px;
  line-height:1;
}
details[open] summary .plus{
  background:var(--forest);
  color:var(--cream);
  transform:rotate(45deg);
}
details .answer{
  margin-top:var(--s-3);
  color:var(--ink-mute);
  font-size:15.5px;
  max-width:58ch;
  line-height:1.6;
}

/* ─── COBERTURA ─── */
.cobertura-grid{
  display:grid;
  gap:clamp(40px, 6vw, 72px);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:860px){
  .cobertura-grid{ grid-template-columns:1fr 1fr }
}
.cobertura-grid h2{ margin-top:var(--s-4) }
.cobertura-grid > div > p{
  margin-top:var(--s-4);
  color:var(--ink-mute);
  max-width:44ch;
  font-size:16px;
  line-height:1.55;
}
.pills{
  display:flex; flex-wrap:wrap;
  gap:var(--s-3);
  margin-top:var(--s-6);
}
.pill{
  padding:10px 18px;
  background:var(--cream);
  border-radius:var(--r-pill);
  font-weight:600;
  font-size:14px;
  color:var(--forest);
  display:inline-flex; align-items:center;
  gap:var(--s-2);
  border:1px solid var(--line);
}
.pill::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--sage);
}
.cob-foot{
  margin-top:var(--s-6);
  font-size:14px;
  color:var(--ink-mute);
}
.cob-foot strong{ color:var(--forest) }

/* Map-ish illustration — labels hidden, pills below carry the names */
.cob-illu{
  position:relative;
  aspect-ratio:5/4;
  max-width:480px;
  margin:0 auto;
  background:var(--cream);
  border-radius:var(--r-lg);
  padding:var(--s-6);
  display:grid;
  border:1px solid var(--line);
}
.cob-illu svg{ width:100%; height:100% }
.cob-illu .dot{
  position:absolute;
  background:var(--terracotta);
  width:11px; height:11px;
  border-radius:50%;
  box-shadow:0 0 0 5px rgba(174,94,56,.18);
}
.cob-illu .dot label{ display:none }

/* ─── CTA FINAL ─── */
.final{
  position:relative; isolation:isolate;
  overflow:hidden;
  text-align:center;
  padding-top:var(--section-py-lg);
  padding-bottom:var(--section-py-lg);
}
.final::before,.final::after{
  content:""; position:absolute;
  border-radius:50%;
  filter:blur(60px);
  z-index:-1;
}
.final::before{
  width:560px; height:560px;
  top:-200px; left:-160px;
  background:radial-gradient(circle, #4b6a3f 0%, transparent 70%);
  opacity:.6;
}
.final::after{
  width:460px; height:460px;
  bottom:-200px; right:-140px;
  background:radial-gradient(circle, #ae5e38 0%, transparent 70%);
  opacity:.35;
}
.final .eyebrow{ margin-top:0 }
.final h2{
  margin:var(--s-5) auto 0;
  font-size:clamp(38px, 6vw, 72px);
  color:var(--cream);
  max-width:18ch;
  line-height:1.05;
  font-weight:900;
  font-variation-settings:'opsz' 72;
}
.final .big-price{
  font-family:var(--serif);
  font-weight:900;
  font-size:var(--fs-display);
  line-height:.9;
  letter-spacing:-.04em;
  color:var(--cream);
  margin:var(--s-6) 0 var(--s-3);
  font-variation-settings:'opsz' 144;
}
.final .price-foot{
  color:#c2c8b8;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  margin-bottom:var(--s-7);
}
.final .btn-wapp{
  font-size:17px;
  padding:22px 32px;
}
.final .micro{
  margin-top:var(--s-5);
  font-size:13px;
  color:#9aa18d;
}

/* Trust band — sits above the final CTA copy */
.trust-band{
  display:grid;
  gap:var(--s-4);
  grid-template-columns:1fr;
  margin:0 auto var(--s-8);
  max-width:920px;
  text-align:left;
}
@media (min-width:720px){
  .trust-band{ grid-template-columns:repeat(3, 1fr); gap:var(--s-4) }
}
.trust-item{
  display:flex;
  gap:var(--s-3);
  align-items:flex-start;
  padding:var(--s-5);
  background:rgba(247,243,236,.05);
  border-radius:var(--r-md);
  border:1px solid var(--line-light);
}
.trust-item svg{
  width:22px; height:22px;
  flex:0 0 22px;
  color:var(--sage);
  margin-top:2px;
}
.trust-item strong{
  display:block;
  font-family:var(--serif);
  font-weight:700;
  font-size:15.5px;
  color:var(--cream);
  line-height:1.2;
  margin-bottom:var(--s-1);
}
.trust-item span{
  display:block;
  font-size:13px;
  color:#b8bdac;
  line-height:1.45;
}

/* ─── FOOTER ─── */
footer{
  background:var(--forest-deep);
  color:#bfc5b6;
  padding:var(--s-6) 0;
  font-size:13px;
}
footer .wrap{
  display:flex; flex-wrap:wrap;
  gap:var(--s-4);
  justify-content:space-between;
  align-items:center;
}
footer .brand{
  color:var(--cream);
  font-size:17px;
}
footer .brand-mark{
  width:30px; height:30px;
  font-size:17px;
}

/* ─── STICKY BAR ─── */
.sticky{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  background:var(--forest);
  color:var(--cream);
  padding:var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  display:flex; align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  transform:translateY(110%);
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 -10px 30px -10px rgba(0,0,0,.35);
  border-top:1px solid var(--line-light);
}
.sticky.show{ transform:translateY(0) }
.sticky .left{
  display:flex; flex-direction:column;
  gap:2px;
  line-height:1.15;
}
.sticky .rating-pill{
  display:inline-flex; align-items:center;
  font-size:11px;
  color:#d8b766;
  font-weight:700;
  text-transform:none;
}
.sticky .val{
  font-family:var(--serif);
  font-size:22px;
  font-weight:900;
  letter-spacing:-.01em;
}
.sticky .btn-wapp{
  padding:12px 18px;
  font-size:14.5px;
}

/* ─── REVEAL ─── */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{ opacity:1; transform:none }
.reveal.d1{ transition-delay:.08s }
.reveal.d2{ transition-delay:.16s }
.reveal.d3{ transition-delay:.24s }
.reveal.d4{ transition-delay:.32s }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none }
  .marquee-track{ animation:none }
}

/* Hero entry stagger */
.hero-stagger > *{
  opacity:0;
  transform:translateY(14px);
  animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-stagger > *:nth-child(1){ animation-delay:.05s }
.hero-stagger > *:nth-child(2){ animation-delay:.18s }
.hero-stagger > *:nth-child(3){ animation-delay:.30s }
.hero-stagger > *:nth-child(4){ animation-delay:.42s }
.hero-stagger > *:nth-child(5){ animation-delay:.54s }
.hero-stagger > *:nth-child(6){ animation-delay:.66s }
.hero-photo{
  opacity:0;
  transform:scale(.96) rotate(-2deg);
  animation: rise2 1.1s cubic-bezier(.2,.7,.2,1) .25s forwards;
}
@keyframes rise{ to{ opacity:1; transform:none } }
@keyframes rise2{ to{ opacity:1; transform:scale(1) rotate(0) } }

body.has-sticky{ padding-bottom:84px }