/* ============================================================
   Olëa Grupo Desarrollador — site stylesheet
   ------------------------------------------------------------
   Conventions
   - BEM naming: block__element--modifier
   - State classes: .is-* (toggled by JS)
   - JS-only hooks: .js-* (never styled)
   - Pages: index.html (home) + privacidad.html (body.page-legal)

   Table of contents
   01. Design tokens
   02. Base & reset
   03. Utilities (.reveal, .container, .badge, .eyebrow)
   04. Buttons
   05. Site header (+ burger, mobile menu)
   06. Hero
   07. Stats / intro
   08. Why + values
   09. Opportunities
   10. Testimonials
   11. FAQ
   12. Final CTA
   13. Site footer
   14. Legal page (privacidad.html)
   15. Responsive
   16. Print
   ============================================================ */


/* ---------- 01. Design tokens ---------- */
:root{
  --olive-dark:#3D4A1F;
  --olive:#6E7C3C;
  --olive-light:#8B9B4B;
  --sage:#EDEFE2;
  --sage-line:#e5e5db;
  --cream:#FAF9F3;
  --cream-2:#F4F4EF;
  --white:#ffffff;
  --ink:#26261f;
  --muted:#61614f;
  --faint:#6b6b58;
  --line:#e7e6dc;
  --eyebrow:#5c6b2e;

  --display:'Bricolage Grotesque',sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',sans-serif;

  --radius:16px;
  --pad-x:40px;
  --maxw:1280px;
}


/* ---------- 02. Base & reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(110,124,60,.22); }
:focus-visible{ outline:3px solid var(--olive); outline-offset:2px; border-radius:6px; }

.section{ padding:100px var(--pad-x); }
.container{ max-width:var(--maxw); margin:0 auto; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--olive-dark); color:var(--white);
  padding:12px 18px; border-radius:0 0 8px 0; font-weight:600;
}
.skip-link:focus{ left:0; }


/* ---------- 03. Utilities ---------- */
.reveal{
  transition:opacity .8s ease,
             transform .8s cubic-bezier(.16,1,.3,1);
}
body.anim-ready .reveal:not(.is-in-view){
  opacity:0; transform:translateY(28px);
}
.reveal--d1{ transition-delay:.08s; }
body.gsap-on .reveal, body.gsap-on .reveal-stagger > *{ transition:none; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px;
  font-weight:600; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--eyebrow);
}
.eyebrow--sage{ background:var(--sage); }
.eyebrow--outline{ background:var(--white); border:1px solid var(--sage-line); }

.section__head{ text-align:center; max-width:660px; margin:0 auto 56px; }
.section__title{
  font-family:var(--display); font-weight:700;
  letter-spacing:-.02em; line-height:1.06;
  font-size:clamp(30px,4.4vw,46px);
  color:var(--ink); margin:16px 0 18px;
}
.section__title--olive{ color:var(--olive); }
.section__lede{ font-size:17px; line-height:1.65; color:var(--muted); }
.accent{ color:var(--olive); }


/* ---------- 04. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:600;
  font-size:15px; line-height:1;
  padding:16px 30px;
  border-radius:8px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn__icon{ width:19px; height:19px; flex-shrink:0; }
.btn--small .btn__icon{ width:17px; height:17px; }
.btn--primary{ background:var(--olive-dark); color:var(--white); }
.btn--primary:hover{ background:#33401a; }
.btn--outline{ background:var(--white); border-color:#cfd3bf; color:var(--olive-dark); }
.btn--outline:hover{ background:var(--cream-2); }
.btn--olive{ background:var(--olive-light); color:var(--white); }
.btn--olive:hover{ background:#7d8c40; }
.btn--small{ padding:12px 22px; font-size:14px; }
.btn--large{ padding:17px 36px; font-size:16px; }


/* ---------- 05. Site header ---------- */
.site-header{ background:var(--white); position:sticky; top:0; z-index:20; }
.site-header__inner{
  max-width:var(--maxw); margin:0 auto;
  height:88px; padding:0 var(--pad-x);
  display:flex; align-items:center; justify-content:space-between;
}
.site-header__logo{ height:44px; width:auto; }
.site-header__nav{
  display:flex; align-items:center; gap:32px;
  font-size:14.5px; font-weight:500; color:#3a3a30;
}
.nav-link{ transition:color .15s ease; }
.nav-link:hover{ color:var(--olive); }
.site-header__actions{ display:flex; align-items:center; gap:12px; }

.burger{
  display:none; flex-direction:column; gap:5px;
  width:44px; height:44px; align-items:center; justify-content:center;
  background:var(--white); border:1px solid #cfd3bf;
  border-radius:8px; cursor:pointer;
}
.burger span{ width:20px; height:2px; background:var(--olive-dark); border-radius:2px; }

.mobile-menu{
  position:fixed; inset:0; z-index:40;
  background:var(--cream);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.mobile-menu.is-open{ opacity:1; pointer-events:auto; }
.mobile-menu__close{
  position:absolute; top:24px; right:22px;
  width:44px; height:44px; border:1px solid #cfd3bf;
  border-radius:8px; background:var(--white); color:var(--olive-dark);
  font-size:26px; cursor:pointer; line-height:1;
}
.mobile-menu__link{
  font-family:var(--display); font-weight:600; font-size:26px; color:var(--ink);
}
.mobile-menu__link:hover{ color:var(--olive); }
.mobile-menu .btn{ margin-top:16px; }


/* ---------- 06. Hero ---------- */
.hero{ background:var(--white); }
.hero .eyebrow{ margin-bottom:28px; }
.hero__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
  align-items:center; padding:56px var(--pad-x) 96px;
}
.hero__title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(40px,5.4vw,60px); line-height:1.03;
  letter-spacing:-.025em; color:var(--ink); margin:0 0 24px;
}
.hero__lede{
  font-size:17px; line-height:1.65; color:var(--muted);
  margin:0 0 36px; max-width:480px;
}
.hero__lede strong{ color:var(--olive-dark); }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__media{ position:relative; height:520px; }
.hero__deco{ position:absolute; border-radius:12px; }
.hero__deco--1{ right:52px; top:8px; width:58px; height:58px; background:#e6e8d8; transform:rotate(12deg); }
.hero__deco--2{ left:0; bottom:24px; width:46px; height:46px; background:var(--sage); border-radius:10px; transform:rotate(-8deg); }
.hero__photo{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  border-radius:24px 60px 24px 60px;
}


/* ---------- 07. Stats / intro ---------- */
.intro{ background:var(--cream-2); padding:88px var(--pad-x); }
.intro__head{ max-width:1000px; margin:0 auto 48px; text-align:center; }
.stats{
  max-width:1080px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.stat{ padding:40px 28px; text-align:center; border-right:1px solid #eeede4; }
.stat:last-child{ border-right:none; }
.stat--alt{ background:#FAFAF6; }
.stat__value{
  font-family:var(--display); font-weight:700;
  font-size:44px; letter-spacing:-.02em; color:var(--olive-dark);
}
.stat__label{ font-size:14px; color:var(--muted); margin-top:6px; }


/* ---------- 08. Why + values ---------- */
.why{ background:var(--white); }
.why__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:80px;
}
.why__title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(30px,3.6vw,38px); line-height:1.1; letter-spacing:-.02em;
  color:var(--ink); margin:0 0 40px;
}
.why__list{ display:flex; flex-direction:column; gap:30px; }
.feature{ display:flex; gap:18px; }
.feature__icon{
  flex:none; width:40px; height:40px; border-radius:50%;
  background:var(--olive-dark);
  display:flex; align-items:center; justify-content:center;
}
.feature__name{
  font-family:var(--display); font-weight:600;
  font-size:19px; line-height:1.3; color:var(--ink); margin-bottom:4px;
}
.feature__desc{ font-size:15px; line-height:1.55; color:var(--muted); }

.values__title{
  font-family:var(--display); font-weight:600;
  font-size:22px; line-height:1.2; color:var(--ink); margin:0 0 24px;
}
.values__list{ display:flex; flex-direction:column; gap:12px; }
.value{
  background:var(--cream-2); border-radius:12px;
  padding:20px 24px; font-size:16px; font-weight:500; color:#3a3a30;
  display:flex; align-items:center; gap:14px;
  transition:background .15s ease;
}
.value:hover{ background:var(--sage); }
.value__dot{ width:8px; height:8px; border-radius:50%; background:var(--olive-light); }


/* ---------- 09. Opportunities ---------- */
.opps{ background:var(--cream-2); }
.opps__head{ max-width:620px; margin-bottom:56px; }
.opps__title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(32px,4.2vw,44px); line-height:1.08;
  letter-spacing:-.02em; color:var(--ink); margin:16px 0 20px;
}
.opps__lede{ font-size:16.5px; line-height:1.65; color:var(--muted); }
.opps__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.opp{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:36px 32px;
}
.opp__value{
  font-family:var(--display); font-weight:700;
  font-size:42px; color:var(--olive); letter-spacing:-.02em; margin-bottom:20px;
}
.opp__name{
  font-family:var(--display); font-weight:600;
  font-size:18px; line-height:1.25; color:var(--ink); margin-bottom:10px;
}
.opp__desc{ font-size:14.5px; line-height:1.55; color:var(--muted); }
.opp--dark{
  background:var(--olive-dark);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.opp--dark .opp__name{ color:var(--white); font-size:22px; margin-bottom:12px; }
.opp--dark .opp__desc{ font-size:15px; line-height:1.6; color:rgba(255,255,255,.82); }


/* ---------- 10. Testimonials ---------- */
.testimonials{ background:var(--cream); }
.testimonials__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.testimonial{
  display:flex; flex-direction:column;
  background:linear-gradient(160deg, var(--white) 55%, #F6F7EF 100%);
  border:1px solid var(--sage-line);
  border-radius:22px; padding:36px 32px 28px;
  box-shadow:0 1px 2px rgba(38,38,31,.04), 0 12px 32px -18px rgba(61,74,31,.18);
}
.testimonial::before{
  content:""; position:absolute; top:-40px; right:-40px;
  width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle, rgba(139,155,75,.14), transparent 68%);
  pointer-events:none;
}
.testimonial__mark{
  font-family:var(--display); font-weight:700;
  font-size:64px; line-height:.8; height:34px;
  background:linear-gradient(135deg, var(--olive), var(--olive-light));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--olive);
  margin-bottom:10px;
}
.testimonial__quote{
  font-size:15.5px; line-height:1.7; color:#43433a;
  flex:1; margin-bottom:26px;
}
.testimonial__foot{
  display:flex; align-items:center; gap:14px;
  padding-top:20px; border-top:1px solid #ecebe0;
}
.testimonial__avatar{
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(135deg, var(--olive-dark), var(--olive));
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:600; font-size:15px;
  box-shadow:0 0 0 3px var(--white), 0 0 0 4.5px rgba(139,155,75,.45);
  overflow:hidden;
}
.testimonial__name{ font-family:var(--display); font-weight:600; font-size:16px; color:var(--ink); }
.testimonial__role{ font-size:13px; color:var(--olive); font-weight:500; }


/* ---------- 11. FAQ ---------- */
.faq{ background:var(--cream-2); }
.faq__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:.8fr 1.2fr; gap:64px;
}
.faq__title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(30px,3.6vw,38px); line-height:1.1; letter-spacing:-.02em;
  color:var(--ink); margin:0 0 16px;
}
.faq__intro{ font-size:16px; line-height:1.6; color:var(--muted); }
.faq__intro a{ color:var(--olive); font-weight:600; }
.faq__list{ display:flex; flex-direction:column; }
.faq__item{ padding:24px 0; border-bottom:1px solid #e2e2d6; }
.faq__q{
  font-family:var(--display); font-weight:600;
  font-size:18px; line-height:1.3; color:var(--ink); margin-bottom:10px;
}
.faq__a{ font-size:15px; line-height:1.6; color:var(--muted); }


/* ---------- 12. Final CTA ---------- */
.final-cta{ background:var(--olive-dark); padding:88px var(--pad-x); }
.final-cta__inner{ max-width:820px; margin:0 auto; text-align:center; }
.final-cta__title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(32px,4.4vw,46px); line-height:1.1;
  letter-spacing:-.02em; color:var(--white); margin:0 0 20px;
}
.final-cta__lede{ font-size:17px; line-height:1.6; color:rgba(255,255,255,.8); margin:0 0 34px; }


/* ---------- 13. Site footer ---------- */
.site-footer{ background:var(--white); padding:56px var(--pad-x) 36px; }
.site-footer__top{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
  padding-bottom:32px; border-bottom:1px solid var(--line);
}
.site-footer__logo{ height:44px; width:auto; }
.site-footer__nav{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  font-size:14.5px; font-weight:500; color:#3a3a30;
}
.site-footer__bottom{
  max-width:var(--maxw); margin:24px auto 0;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  font-size:13.5px; color:var(--faint);
}
.site-footer__credit strong{ color:var(--olive); }


/* ---------- 14. Legal page ---------- */
.page-legal{ background:var(--cream); }
.legal-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad-x); background:var(--white);
  border-bottom:1px solid var(--line);
}
.legal-bar__logo{ height:40px; width:auto; }
.legal-bar__back{ font-size:14px; font-weight:600; color:var(--olive-dark); }
.legal{ max-width:820px; margin:0 auto; padding:64px var(--pad-x) 90px; }
.legal__eyebrow{
  font-family:var(--sans); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  font-size:12px; color:var(--olive);
}
.legal h1{
  margin:14px 0 10px;
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(34px,5vw,50px); line-height:1.04; color:var(--ink);
}
.legal__meta{ font-size:14px; color:var(--faint); margin-bottom:14px; }
.legal section{ padding-top:40px; }
.legal h2{
  display:flex; align-items:baseline; gap:14px;
  font-family:var(--display); font-weight:600;
  font-size:24px; color:var(--olive-dark); margin-bottom:14px;
}
.legal__num{ font-family:var(--serif); font-size:15px; color:var(--olive); }
.legal h3{ font-family:var(--sans); font-weight:700; font-size:16px; margin:18px 0 8px; color:var(--ink); }
.legal p{ color:var(--muted); margin-bottom:12px; }
.legal ul{ padding-left:20px; margin-bottom:12px; color:var(--muted); }
.legal li{ margin-bottom:6px; }
.legal a{ color:var(--olive); text-decoration:underline; }
.controller-card{
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin-top:8px;
}
.controller-card__row{
  display:flex; gap:16px; padding:14px 20px;
  border-bottom:1px solid #eeede4;
}
.controller-card__row:last-child{ border-bottom:none; }
.controller-card__key{ flex:0 0 150px; font-family:var(--display); font-weight:600; font-size:13px; color:var(--olive-dark); }
.controller-card__value{ color:var(--ink); }
.controller-card__value--muted{ color:var(--muted); }


/* ---------- 15. Responsive ---------- */
@media (max-width:1024px){
  .opps__grid, .testimonials__grid{ grid-template-columns:1fr 1fr; }
  .opp--dark{ grid-column:1 / -1; }
}

@media (max-width:900px){
  :root{ --pad-x:22px; }
  .site-header__nav{ display:none; }
  .site-header__actions .btn{ display:none; }
  .burger{ display:flex; }
  .hero__grid{ grid-template-columns:1fr; gap:32px; padding-top:36px; padding-bottom:64px; }
  .hero__media{ height:380px; order:-1; }
  .why__grid, .faq__grid{ grid-template-columns:1fr; gap:40px; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stat{ border-right:none; border-bottom:1px solid #eeede4; }
  .stat:nth-child(odd){ border-right:1px solid #eeede4; }
  .section{ padding:64px var(--pad-x); }
  .intro, .final-cta{ padding:64px var(--pad-x); }
}

@media (max-width:640px){
  .opps__grid, .testimonials__grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .stat, .stat:nth-child(odd){ border-right:none; }
  .site-footer__top{ flex-direction:column; align-items:flex-start; gap:24px; }
  .site-footer__bottom{ flex-direction:column; align-items:flex-start; gap:8px; }
}


/* ---------- 16. Print ---------- */
@media print{
  .site-header, .burger, .mobile-menu, .hero__actions,
  .final-cta, .btn, .legal-bar__back{ display:none !important; }
  body{ background:#fff; color:#000; }
  .reveal, .reveal-stagger > *{ opacity:1 !important; transform:none !important; }
}


/* ---------- 17. Animations ---------- */

/* Scroll-in stagger (children of .reveal-stagger animate one by one) */
body.anim-ready .reveal-stagger > *{
  transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
body.anim-ready .reveal-stagger:not(.is-in-view) > *{
  opacity:0; transform:translateY(24px);
}
.reveal-stagger.is-in-view > *:nth-child(2){ transition-delay:.09s; }
.reveal-stagger.is-in-view > *:nth-child(3){ transition-delay:.18s; }
.reveal-stagger.is-in-view > *:nth-child(4){ transition-delay:.27s; }
.reveal-stagger.is-in-view > *:nth-child(5){ transition-delay:.36s; }
.reveal-stagger.is-in-view > *:nth-child(6){ transition-delay:.45s; }

/* Hover motion */
.opp, .testimonial{ transition:transform .25s ease, box-shadow .25s ease; }
.opp:hover{ transform:translateY(-5px); box-shadow:0 16px 34px rgba(38,38,31,.09); }
.testimonial:hover{ transform:translateY(-6px); box-shadow:0 2px 4px rgba(38,38,31,.05), 0 24px 48px -16px rgba(61,74,31,.26); border-color:#d9dcc6; }
.opp--dark:hover{ box-shadow:0 16px 34px rgba(61,74,31,.28); }
.feature__icon{ transition:transform .25s ease; }
.feature:hover .feature__icon{ transform:scale(1.12) rotate(-8deg); }
.value{ transition:background .15s ease, transform .2s ease; }
.value:hover{ transform:translateX(6px); }
.site-header__nav .nav-link, .site-footer__nav .nav-link{ position:relative; }
.site-header__nav .nav-link::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%;
  background:var(--olive); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.site-header__nav .nav-link:hover::after{ transform:scaleX(1); }


/* ---------- 18. Scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; z-index:60;
  width:100%; height:3px;
  background:linear-gradient(90deg, var(--olive), var(--olive-light));
  transform:scaleX(0); transform-origin:left;
}
@media print{ .scroll-progress{ display:none !important; } }


/* ---------- 19. Líneas de fondo + spotlight de cursor ---------- */
[data-lines]{ position:relative; }
[data-lines] > *:not(.lines-canvas){ position:relative; z-index:1; }
.lines-canvas{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none;
}
.opp, .testimonial, .stat, .value{ position:relative; overflow:hidden; }
.opp::after, .testimonial::after, .stat::after, .value::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity .35s ease;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(139,155,75,.16), transparent 65%);
}
.opp:hover::after, .testimonial:hover::after, .stat:hover::after, .value:hover::after{ opacity:1; }
.opp--dark::after{
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.14), transparent 65%);
}
@media print{ .lines-canvas{ display:none !important; } }


/* ---------- 20. Estilo Assurix: máscaras, odómetro, marquee, badge, acordeón ---------- */
.w-mask{ display:inline-block; overflow:hidden; vertical-align:top; }
.w{ display:inline-block; will-change:transform; }

.odo{ display:inline-flex; align-items:flex-start; line-height:1; }
.odo-col{ display:inline-block; height:1em; overflow:hidden; }
.odo-strip{ display:block; }
.odo-d{ display:block; height:1em; line-height:1; }

.marquee{ background:var(--olive-dark); overflow:hidden; padding:18px 0; }
.marquee__track{
  display:flex; align-items:center; gap:44px;
  width:max-content; white-space:nowrap;
  animation:marquee 28s linear infinite;
}
.marquee__track span{
  font-family:var(--display); font-weight:600; font-size:14px;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.88);
}
.marquee__track .dot{ color:var(--olive-light); font-size:18px; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

.hero__badge{
  position:absolute; left:-18px; bottom:44px; z-index:2;
  display:flex; align-items:center; gap:12px;
  background:var(--white); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 40px rgba(38,38,31,.16);
  padding:14px 18px;
}
.hero__badge-dot{
  flex:none; width:10px; height:10px; border-radius:50%;
  background:var(--olive-light);
  box-shadow:0 0 0 4px rgba(139,155,75,.25);
}
.hero__badge strong{ display:block; font-family:var(--display); font-weight:600; font-size:15px; line-height:1.2; color:var(--ink); }
.hero__badge .sub{ display:block; font-size:12.5px; color:var(--muted); }

.faq__q{
  cursor:pointer; user-select:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq__q::after{
  content:"+"; flex:none;
  font-family:var(--display); font-weight:600; font-size:24px; line-height:1;
  color:var(--olive);
  transition:transform .3s ease;
}
.faq__item.is-open .faq__q::after{ transform:rotate(45deg); }
.faq__a{ overflow:hidden; }