:root{
  --cream:#F6F3EF;
  --pink:#FADDE4;
  --beige:#EBDCD2;
  --warm-gray:#D4CEC8;
  --sage:#B7C2B1;
  --sage-deep:#93A28C;
  --on-sage:#2C3327;
  --ink:#3A3A3A;
  --ink-soft:#7A736A;
  --line:#DCD3C9;
  --spark:#DE8570;
  --serif:"Playfair Display","Iowan Old Style",Georgia,serif;
  --sans:"Poppins","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--sage); color:var(--on-sage);}
a{color:inherit;}
img{display:block; width:100%; height:100%; object-fit:cover;}
.wrap{max-width:640px; margin:0 auto; padding:0 24px;}
@media(min-width:900px){ .wrap{max-width:980px; padding:0 40px;} }
h1,h2,h3{font-family:var(--serif); font-weight:600; margin:0; text-wrap:balance; color:var(--ink);}
p{margin:0;}
.eyebrow{
  font-family:var(--sans); font-size:12.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft);
}

.btn-cta{
  font-family:var(--sans); font-weight:500; font-size:15px;
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:16px 28px; border-radius:30px; border:none;
  background:var(--sage); color:var(--on-sage);
  cursor:pointer; text-decoration:none; width:100%;
  transition:transform .2s ease, background .2s ease;
}
@media(min-width:560px){ .btn-cta{width:auto;} }
.btn-cta:hover{background:var(--sage-deep);}
.btn-cta:active{transform:scale(.97);}
.btn-cta:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}
.btn-cta svg{flex:none;}

header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:68px;}
.logo{display:flex; align-items:center; gap:8px; text-decoration:none;}
.logo-text{font-family:var(--serif); font-weight:600; font-size:18px; letter-spacing:.01em; line-height:1; color:var(--ink);}
.logo svg{flex:none;}
.navlinks{display:none; gap:28px; font-size:14px; font-weight:400;}
.navlinks a{text-decoration:none; color:var(--ink-soft); transition:color .2s;}
.navlinks a:hover{color:var(--ink);}
@media(min-width:700px){ .navlinks{display:flex;} }

section{padding:72px 0;}
section.tight{padding:56px 0;}
.alt{background:var(--beige);}

/* HERO */
.hero-copy{text-align:center; max-width:520px; margin:0 auto;}
.hero-copy .eyebrow{justify-content:center; display:flex; margin-bottom:18px;}
.hero-copy h1{font-size:clamp(34px,7vw,50px); line-height:1.08; letter-spacing:-.01em;}
.hero-copy .sub{
  font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(18px,3vw,22px);
  color:var(--ink-soft); margin-top:14px;
}
.hero-copy .lede{margin:22px auto 32px; max-width:38ch; font-size:15.5px; color:var(--ink-soft);}
.hero-actions{display:flex; justify-content:center;}
.hero-media{margin-top:44px; border-radius:18px; overflow:hidden; aspect-ratio:4/3; box-shadow:0 30px 60px -30px rgba(58,50,42,.35);}

/* STEPS */
.section-head{max-width:440px; margin:0 auto 44px; text-align:center;}
.section-head h2{font-size:clamp(26px,4vw,34px);}
.section-head p{color:var(--ink-soft); font-size:14.5px; margin-top:10px;}
.steps{display:grid; gap:16px;}
@media(min-width:700px){ .steps{grid-template-columns:repeat(3,1fr);} }
.step{
  background:var(--cream); border:1px solid var(--line); border-radius:16px; padding:28px 24px;
  display:flex; flex-direction:column; gap:10px;
}
.step .n{
  font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ink-soft);
}
.step h3{font-size:20px;}
.step p{color:var(--ink-soft); font-size:14.5px;}

/* PRODUCTS */
.product{
  display:grid; gap:24px; padding:28px; background:var(--cream); border:1px solid var(--line); border-radius:18px;
  margin-bottom:20px;
}
.product:last-child{margin-bottom:0;}
@media(min-width:700px){ .product{grid-template-columns:1fr 1.15fr; align-items:center; padding:0; overflow:hidden;} }
.product-media{aspect-ratio:5/4; border-radius:14px; overflow:hidden; position:relative;}
@media(min-width:700px){ .product-media{aspect-ratio:auto; height:100%; border-radius:0;} }
.product-media .badge{
  position:absolute; top:14px; left:14px; background:var(--pink); color:var(--ink);
  font-size:11.5px; font-weight:500; padding:6px 12px; border-radius:20px;
}
.product-body{padding:4px;}
@media(min-width:700px){ .product-body{padding:36px 40px 36px 8px;} }
.product-body .eyebrow{margin-bottom:10px;}
.product-body h3{font-size:clamp(21px,3vw,25px); margin-bottom:10px;}
.product-body .benefit{color:var(--ink-soft); font-size:14.5px; margin-bottom:14px; max-width:42ch;}
.product-body .how{
  font-size:13px; color:var(--ink-soft); background:var(--beige); border-radius:10px; padding:12px 14px;
  margin-bottom:20px;
}
.product-body .how b{color:var(--ink); font-weight:500;}
.price-note{font-size:13px; color:var(--ink-soft); margin-bottom:14px; font-style:italic; font-family:var(--serif);}
.price-row{display:flex; align-items:baseline; gap:12px; font-variant-numeric:tabular-nums; margin-bottom:18px;}
.price-now{font-family:var(--serif); font-weight:600; font-size:22px; color:var(--ink);}
.price-was{font-size:13px; color:var(--ink-soft); text-decoration:line-through;}

/* CONFIANZA */
.trust-list{display:grid; gap:14px;}
@media(min-width:700px){ .trust-list{grid-template-columns:repeat(2,1fr);} }
.trust-item{
  background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:22px;
  display:flex; gap:14px; align-items:flex-start;
}
.trust-item .ic{
  flex:none; width:38px; height:38px; border-radius:50%; background:var(--pink);
  display:flex; align-items:center; justify-content:center;
}
.trust-item h3{font-size:16.5px; margin-bottom:4px;}
.trust-item p{font-size:14px; color:var(--ink-soft);}
.trust-note{
  margin-top:18px; text-align:center; font-family:var(--serif); font-style:italic; color:var(--ink-soft); font-size:14.5px;
}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  list-style:none; cursor:pointer; padding:20px 0; display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family:var(--serif); font-weight:600; font-size:17px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .ind{font-size:20px; color:var(--ink-soft); transition:transform .25s; flex:none;}
.faq-item[open] summary .ind{transform:rotate(45deg);}
.faq-item .a{padding:0 0 22px; max-width:56ch; color:var(--ink-soft); font-size:14.5px;}

/* CLOSE */
.close-inner{text-align:center; max-width:460px; margin:0 auto;}
.close-inner h2{font-size:clamp(26px,4vw,32px); margin-bottom:14px;}
.close-inner p{color:var(--ink-soft); font-size:14.5px; margin-bottom:28px;}

footer{border-top:1px solid var(--line); padding:44px 0 90px; text-align:center;}
.foot-logo{display:flex; justify-content:center; margin-bottom:14px;}
footer .tag{font-size:13.5px; color:var(--ink-soft); margin-bottom:18px;}
.foot-links{display:flex; justify-content:center; gap:22px; font-size:13.5px; margin-bottom:18px;}
footer a{text-decoration:none;}
.foot-links a{color:var(--ink-soft);}
.foot-links a:hover{color:var(--ink);}
.foot-legal{font-size:12px; color:var(--ink-soft); opacity:.8;}

.wa-fab{
  position:fixed; right:18px; bottom:18px; z-index:50;
  background:var(--sage); color:var(--on-sage); border-radius:50%;
  width:56px; height:56px; display:flex; align-items:center; justify-content:center;
  text-decoration:none; box-shadow:0 14px 28px -10px rgba(58,50,42,.45);
  transition:transform .2s;
}
.wa-fab:hover{transform:translateY(-3px);}
.wa-fab:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}

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