/* =========================================================
   WeLife Shop / Premium Wellness Commerce
   Brand: WeLife Clinic (black + gold). Ground: warm ivory.
   ========================================================= */

:root{
  /* colour roles */
  --bg:        #EDEBE7;
  --bg-2:      #F3F2F0;
  --surface:   #E1DED8;
  --surface-2: #D8D4CA;
  --ink:       #141414;
  --ink-soft:  #33302A;
  --muted:     #4B463E;
  --dark:      #111110;
  --dark-2:    #1C1B19;
  --gold:      #C9A44C;
  --gold-deep: #634610;
  --paper:     #F2F1EE;

  /* type */
  --f-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-text:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-display: clamp(36px, 5.2vw, 72px);
  --t-hero:    clamp(28px, 4.4vw, 62px);
  --t-h2:      clamp(28px, 3.9vw, 54px);
  --t-h3:      clamp(22px, 2.1vw, 28px);
  --t-body:    17px;
  --t-small:   16px;

  /* space */
  --m: clamp(20px, 5.2vw, 84px);
  --gap: clamp(56px, 7vw, 120px);
  --gap-lg: clamp(80px, 10vw, 180px);
  --radius: 2px;
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:var(--t-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit }
h1,h2,h3,p,figure,ul,fieldset{ margin:0 }
ul{ padding:0; list-style:none }
fieldset{ border:0; padding:0 }

::selection{ background:var(--gold); color:var(--ink) }

:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px }

.skip{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper);
  padding:12px 18px; z-index:200;
}
.skip:focus{ left:8px; top:8px }

/* ---------- type ---------- */
.display{
  font-family:var(--f-display);
  font-weight:600;
  font-size:var(--t-hero);
  line-height:1.04;
  letter-spacing:-0.045em;
  text-wrap:balance;
}
.display-small{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(24px,4.2vw,44px);
  line-height:1.12;
  letter-spacing:-0.035em;
}
.h2{
  font-family:var(--f-display);
  font-weight:600;
  font-size:var(--t-h2);
  line-height:1.08;
  letter-spacing:-0.04em;
}
.h3{
  font-family:var(--f-display);
  font-weight:600;
  font-size:var(--t-h3);
  line-height:1.2;
  letter-spacing:-0.025em;
}
.lead{
  font-size:17px;
  line-height:1.5;
  color:var(--ink-soft);
  max-width:44ch;
}
.section-sub{ color:var(--muted); max-width:52ch; margin-top:18px }
.note{ font-size:16px; color:var(--muted) }
.statement{
  font-family:var(--f-display);
  font-weight:500;
  font-size:28px;
  line-height:1.28;
  letter-spacing:-0.025em;
  max-width:24ch;
  margin:28px 0 22px;
}

/* ---------- grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:clamp(16px,2vw,28px);
  padding-inline:var(--m);
  max-width:1560px;
  margin-inline:auto;
}
.section{ padding-block:var(--gap-lg) }
.section-head{ grid-column:1/-1; max-width:760px }
.section-head .h2{ margin-bottom:6px }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 26px;
  border:0; border-radius:var(--radius);
  background:transparent;
  font-size:14px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  cursor:pointer; transition:background .25s ease, color .25s ease, transform .25s ease;
}
.btn-ink{ background:var(--ink); color:var(--paper) }
.btn-ink:hover{ background:#000; transform:translateY(-2px) }
.btn-gold{ background:var(--gold); color:var(--ink) }
.btn-gold:hover{ background:#D8B463; transform:translateY(-2px) }
.btn-paper{ background:var(--paper); color:var(--ink) }
.btn-paper:hover{ background:#fff; transform:translateY(-2px) }
.btn-wide{ width:100% }

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s ease;
}
.site-header.is-solid{ background:var(--bg-2) }
.bar{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px var(--m);
  max-width:1560px; margin-inline:auto;
}
.brand{ display:flex; align-items:center; gap:12px }
.brand img{ width:38px; height:38px }
.brand-name{
  font-family:var(--f-display); font-weight:600; font-size:24px; letter-spacing:-0.03em;
}
.brand-name em{ font-style:normal; color:var(--gold-deep) }
.nav{ display:flex; gap:30px }
.nav a{ font-size:16px; color:var(--ink-soft); padding-bottom:2px }
.nav a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:6px }
.nav-cta{ display:none }
.head-actions{ display:flex; align-items:center; gap:14px }
.menu-btn{
  display:none; width:44px; height:44px; background:none; border:0; cursor:pointer;
  padding:12px 8px;
}
.menu-btn span{ display:block; height:1.5px; background:var(--ink); transition:transform .25s ease, opacity .25s ease }
.menu-btn span+span{ margin-top:7px }
.menu-btn[aria-expanded="true"] span:first-child{ transform:translateY(4.25px) rotate(45deg) }
.menu-btn[aria-expanded="true"] span:last-child{ transform:translateY(-4.25px) rotate(-45deg) }

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:min(100svh,880px);
  display:flex; align-items:center;
  padding-top:132px; padding-bottom:clamp(48px,7vw,104px);
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0 }
.hero-bg img{
  width:100%; height:100%;
  object-fit:cover; object-position:72% 38%;
  filter:saturate(.86) contrast(1.02);
  animation:slow-zoom 26s ease-out both;
}
/* scrim neutro: garante a leitura do texto sobre a fotografia */
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(100deg, /* taste-skill-ignore: scrim neutro sobre a fotografia do hero */
    var(--bg) 0%,
    rgba(237,235,231,.94) 30%,
    rgba(237,235,231,.62) 46%,
    rgba(237,235,231,0) 66%);
}
.hero-grid{ position:relative; z-index:2; width:100% }
.hero-copy{ grid-column:1/9; max-width:760px }
.hero-copy .lead{ margin-top:26px; max-width:46ch }
.hero-cta{ display:flex; align-items:center; gap:28px; margin-top:38px; flex-wrap:wrap; max-width:520px }

/* ---------- catalog ---------- */
.filters{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:10px; margin-top:46px }
.filter{
  border:0; background:var(--surface); color:var(--ink-soft);
  padding:11px 18px; border-radius:var(--radius); cursor:pointer;
  font-size:14px; letter-spacing:.02em;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.filter:hover{ background:var(--surface-2); color:var(--ink) }
.filter.is-on{ background:var(--ink); color:var(--paper) }

.products{
  grid-column:1/-1; margin-top:38px;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2vw,30px);
}
.card{ position:relative; display:flex; flex-direction:column }
.card-media{
  position:relative; background:#EDEAE4; overflow:hidden;
  aspect-ratio:1/1;
}
.card-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card-media img{ transform:scale(1.04) }
.card-body{ padding-top:16px; display:flex; flex-direction:column; gap:6px; flex:1 }
.card-cat{ font-size:14px; color:var(--muted) }
.card-name{ font-family:var(--f-display); font-weight:600; font-size:24px; line-height:1.2; letter-spacing:-0.025em }
.card-desc{ font-size:16px; color:var(--muted); line-height:1.5; max-width:34ch; margin-top:14px }
.coins{
  align-self:flex-start; margin-top:12px;
  display:inline-flex; align-items:baseline; gap:8px;
  white-space:nowrap;
  background:var(--dark); color:#fff;
  padding:10px 14px;
}
.coins svg{ width:17px; height:17px; flex:none; color:var(--gold); align-self:center }
.coins strong{ font-family:var(--f-display); font-size:18px; font-weight:600; letter-spacing:-0.02em }
.coins-unit{ font-size:13px; letter-spacing:.04em; color:#BFB8A9 }
.card.is-hidden{ display:none }
.section .note{ grid-column:1/-1; margin-top:26px }
.section-cta{ grid-column:1/-1; margin-top:34px }

/* ---------- about ---------- */
.section-about{
  position:relative; overflow:hidden;
  background:var(--dark); color:var(--paper);
}
.about-mark{
  position:absolute; top:50%; right:-4%;
  transform:translateY(-50%);
  width:min(560px,40vw);
  opacity:.1; pointer-events:none;
}
.about-mark img{ width:100%; height:auto }
.about-grid{ position:relative; z-index:1; row-gap:var(--gap); align-items:start }
.about-copy{ grid-column:1/9 }
.about-copy .h2{ color:var(--paper); margin-bottom:6px }
.about-copy p{ color:#D8D2C6; max-width:46ch; margin-top:18px }

/* ---------- how it works ---------- */
.section-how{ background:var(--surface) }
.how-head{ grid-column:1/-1; display:flex; align-items:flex-end; justify-content:space-between; gap:30px }
.moments{
  grid-column:1/-1; margin-top:clamp(36px,4.4vw,64px);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(32px,5vw,72px);
}
.moment{ position:relative; display:flex; flex-direction:column; padding-top:74px }
.moment::before{
  content:""; position:absolute; top:23px; left:0;
  right:calc(-1 * clamp(32px,5vw,72px));
  height:2px; background:rgba(201,164,76,.45);
}
.moment:last-child::before{ right:0 }
.moment-num{
  position:absolute; top:0; left:0; z-index:1;
  width:46px; height:46px; display:grid; place-items:center;
  background:var(--surface);
  font-family:var(--f-display); font-weight:600; font-size:24px;
  letter-spacing:-0.02em; color:var(--gold-deep);
}
.moment-title{ font-family:var(--f-display); font-weight:600; font-size:clamp(24px,2.2vw,28px); letter-spacing:-0.03em }
.moment-value{ margin-top:16px; font-size:24px; font-weight:600; color:var(--gold-deep); letter-spacing:-0.025em; line-height:1.25 }
.moment-text{ margin-top:12px; font-size:17px; color:var(--muted); max-width:34ch; line-height:1.55 }

/* ---------- live thing ---------- */
.sim{
  grid-column:1/-1; margin-top:var(--gap-lg);
  display:grid; grid-template-columns:5fr 7fr; gap:clamp(24px,4vw,64px);
  background:var(--bg); border-radius:var(--radius);
  padding:clamp(26px,3.4vw,52px);
}
.sim-copy p{ color:var(--ink-soft); max-width:40ch; margin-top:14px }
.sim-copy .note{ margin-top:18px }
.sim-panel{ display:flex; flex-direction:column; gap:22px }
.field{ display:block }
.field-label{ display:block; font-size:16px; color:var(--muted); margin-bottom:10px }
.sim-panel .field{ display:grid; grid-template-columns:1fr auto; gap:4px 16px; align-items:center }
.sim-panel .field-label{ grid-column:1; margin-bottom:0 }
.sim-panel output{ grid-column:2; grid-row:1; font-family:var(--f-display); font-size:28px; text-align:right }
.sim-panel input[type=range]{ grid-column:1/-1; width:100%; accent-color:var(--gold-deep); height:28px }
.sim-total{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  background:var(--dark); color:var(--paper); padding:20px 24px; border-radius:var(--radius);
}
.sim-total-label{ font-size:14px; color:#BFB8A9 }
.sim-total-value{ font-family:var(--f-display); font-size:44px; line-height:1 }
.sim-unit{ font-size:16px; font-family:var(--f-text); color:#BFB8A9 }
.sim-unlocked{ font-size:16px; color:var(--ink-soft) }
.sim-unlocked strong{ color:var(--ink); font-weight:600 }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; background:#0B0B0A; color:var(--paper);
  padding-block:clamp(76px,10vw,150px);
}
@keyframes slow-zoom{ from{ transform:scale(1.09) } to{ transform:scale(1) } }
.cta-inner{
  max-width:1560px; margin-inline:auto; padding-inline:var(--m);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px;
}
.cta-inner > *{ max-width:min(820px,100%) }
.cta-inner .display-small{ max-width:min(760px,100%) }
.cta-inner p{ color:#D8D2C6; max-width:46ch }
.cta-hint{ font-size:var(--t-small); color:#B7B0A2 }

/* ---------- resgate ---------- */
.section-resgate{ background:var(--gold) }
.resgate-grid{ align-items:end; row-gap:var(--gap) }
.resgate-copy{ grid-column:1/8 }
.resgate-copy .h2{ margin-bottom:6px }
.resgate-copy .section-sub{ color:var(--ink-soft) }
.resgate-action{ grid-column:9/13; display:flex; flex-direction:column; align-items:flex-start; gap:14px }
.resgate-action .btn{ width:100% }

/* ---------- FAQ ---------- */
.faq-grid{ row-gap:var(--gap); align-items:start }
.faq-left{ grid-column:1/6; position:sticky; top:120px }
.accordion{ grid-column:6/13 }
.accordion details{ padding:2px 0 }
.accordion summary{
  cursor:pointer; list-style:none; padding:18px 0; font-size:18px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--f-display); letter-spacing:-0.005em;
}
.accordion summary::-webkit-details-marker{ display:none }
.accordion summary::after{
  content:""; width:10px; height:10px; flex:none;
  border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink);
  transform:rotate(45deg) translate(-3px,-3px); transition:transform .25s ease;
}
.accordion details[open] summary::after{ transform:rotate(225deg) translate(-3px,-3px) }
.accordion details p{ padding:0 40px 20px 0; color:var(--muted); font-size:16px; max-width:52ch }
.faq-left .btn{ margin-top:30px }

/* ---------- footer ---------- */
.site-footer{ position:relative; background:var(--dark); color:var(--paper); overflow:hidden }
.footer-inner{
  position:relative; z-index:1;
  max-width:1560px; margin-inline:auto;
  padding:clamp(40px,5vw,72px) var(--m);
  display:flex; flex-direction:column; gap:clamp(28px,3.4vw,44px);
}
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap }
.footer-brand{ display:flex; align-items:center; gap:10px }
.footer-brand img{ width:28px; height:28px }
.footer-brand .brand-name{ font-size:18px; color:var(--paper) }
.footer-brand .brand-name em{ color:var(--gold) }
.footer-links{ display:flex; flex-direction:column; gap:10px }
.footer-contact{ display:flex; flex-direction:column; gap:6px; max-width:34ch }
.footer-contact p{ font-size:16px; color:#D9D3C7; line-height:1.55 }
.footer-label{ font-weight:600; color:var(--paper); margin-top:14px }
.footer-contact .footer-label:first-child{ margin-top:0 }
.footer-links a, .footer-contact a{ font-size:16px; color:#D9D3C7 }
.footer-links a:hover, .footer-contact a:hover{ color:#fff; text-decoration:underline }
.footer-legal{ font-size:14px; color:#A79F90 }

/* ---------- modal ---------- */
.modal{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:20px }
.modal[hidden]{ display:none }
.modal-backdrop{
  position:absolute; inset:0; background:rgba(12,12,11,.72);
  opacity:0; transition:opacity .3s ease;
}
.modal-panel{
  position:relative; z-index:1; background:var(--bg-2); color:var(--ink);
  width:min(620px,100%); max-height:92vh; overflow:auto;
  padding:28px;
  box-shadow:0 24px 60px rgba(0,0,0,.28); /* taste-skill-ignore: dialog */
  border-radius:var(--radius);
  opacity:0; transform:translateY(18px);
  transition:opacity .35s ease, transform .5s cubic-bezier(.16,.9,.3,1);
}
.modal.is-open .modal-backdrop{ opacity:1 }
.modal.is-open .modal-panel{ opacity:1; transform:none }
.modal-panel .h3{ font-size:clamp(24px,2.4vw,30px); line-height:1.12; padding-right:28px }
.modal-close{
  position:absolute; top:12px; right:14px; width:40px; height:40px;
  background:none; border:0; font-size:26px; line-height:1; cursor:pointer; color:var(--ink-soft);
}
.modal-close:hover{ color:var(--ink) }
.modal-intro{ color:var(--muted); margin-top:8px; font-size:15px; line-height:1.4 }
.form-block{ margin-top:16px }
.form-legend{
  font-size:14px; color:var(--gold-deep);
  padding:0 0 7px; width:100%;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.form-grid .field:first-child{ grid-column:1/-1 }
.modal-panel .field-label{ display:block; font-size:14px; color:var(--muted); margin-bottom:4px }
.form-grid input[type=text], .form-grid input[type=tel]{
  width:100%; padding:9px 12px; font:inherit; font-size:15px;
  border:1px solid var(--surface-2); border-radius:var(--radius);
  background:#fff; color:var(--ink);
}
.form-grid input:focus{ outline:2px solid var(--gold-deep); outline-offset:0; border-color:transparent }
.form-grid .field--full{ grid-column:1/-1 }
.err{ display:block; font-size:14px; color:#A33B2A; margin-top:6px; min-height:0 }
.check{ display:flex; gap:10px; align-items:flex-start; margin-top:20px; font-size:14px; color:var(--ink-soft); line-height:1.4 }
.form-block .check{ margin-top:0 }
.check input{ width:20px; height:20px; margin-top:2px; accent-color:var(--ink); flex:none }
.success{ text-align:center; display:grid; gap:14px; justify-items:center; padding:20px 0 }
.success img{ width:64px; height:64px; margin-bottom:6px }
.success p{ color:var(--ink-soft); max-width:38ch }
.success .btn{ margin-top:12px }

/* ---------- motion ---------- */
.btn:active{ transform:translateY(1px) }
.btn, .filter, .menu-btn{ transition:transform .18s ease, background .2s ease, color .2s ease }
.sim-total-value{ transition:opacity .2s ease }
.sim-total-value.is-counting{ opacity:.35 }
.card-media img{ will-change:transform }

.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1) }
.js .reveal.is-in{ opacity:1; transform:none }

/* entrada por partes: o título entra primeiro, o texto depois */
.js .about-copy > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.js .about-copy.is-in > *{ opacity:1; transform:none }
.js .about-copy.is-in > *:nth-child(2){ transition-delay:.09s }
.js .about-copy.is-in > *:nth-child(3){ transition-delay:.18s }
.js .about-copy.is-in > *:nth-child(4){ transition-delay:.27s }

.js .moments > .moment{
  opacity:0; transform:translateY(20px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.js .moments.is-in > .moment{ opacity:1; transform:none }
.js .moments.is-in > .moment:nth-child(2){ transition-delay:.09s }
.js .moments.is-in > .moment:nth-child(3){ transition-delay:.18s }

.js .sim-panel > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.js .sim.is-in .sim-panel > *{ opacity:1; transform:none }
.js .sim.is-in .sim-panel > *:nth-child(2){ transition-delay:.08s }
.js .sim.is-in .sim-panel > *:nth-child(3){ transition-delay:.16s }
.js .sim.is-in .sim-panel > *:nth-child(4){ transition-delay:.24s }

.line > span{ display:block; }
.js .line > span{ transform:translateY(105%); transition:transform .95s cubic-bezier(.16,.9,.3,1) }
.js .hero.is-lit .line > span{ transform:none }
.js .hero.is-lit .line:nth-child(2) > span{ transition-delay:.11s }
.js .hero.is-lit .hero-copy .lead{ opacity:0; animation:fadeUp .9s ease .35s both }
.js .hero.is-lit .hero-cta{ opacity:0; animation:fadeUp .9s ease .5s both }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .products{ grid-template-columns:repeat(3,1fr) }
  .about-copy{ grid-column:1/10 }
  .faq-left{ grid-column:1/6 }
  .accordion{ grid-column:6/13 }
}

@media (max-width:860px){
  html{ scroll-padding-top:76px }
  /* sobre a foto do hero a marca fica branca; ao rolar, o fundo sólido devolve a cor escura */
  .site-header:not(.is-solid) .brand-name{ color:#fff }
  .site-header:not(.is-solid) .brand-name em{ color:#fff }
  .site-header:not(.is-solid) .menu-btn span{ background:#fff }
  .nav{
    position:fixed; inset:76px 0 auto 0; background:var(--bg-2);
    flex-direction:column; gap:0; padding:10px var(--m) 26px;
    border-bottom:2px solid rgba(201,164,76,.35);
    display:none;
  }
  .nav.is-open{ display:flex }
  .nav a{ font-size:19px; padding:14px 0; background:var(--bg-2) }
  .nav-cta{ display:none }
  .nav.is-open .nav-cta{ display:block; margin-top:20px; width:100% }
  /* menu aberto: cabeçalho sólido, contínuo com o painel, sem a faixa transparente da foto */
  .site-header.is-menu{ background:var(--bg-2) }
  .site-header.is-menu .brand-name{ color:var(--ink) }
  .site-header.is-menu .brand-name em{ color:var(--gold-deep) }
  .site-header.is-menu .menu-btn span{ background:var(--ink) }
  .menu-btn{ display:block }
  .head-actions .btn{
    position:fixed; z-index:110; display:inline-flex;
    left:var(--m); right:var(--m); bottom:calc(14px + env(safe-area-inset-bottom));
    width:calc(100% - 2 * var(--m)); min-height:52px;
    /* vidro fosco no estilo iOS: o conteúdo passa por baixo e fica desfocado */
    background:rgba(243,242,240,.72); /* taste-skill-ignore: vidro fosco pedido pelo dono */
    backdrop-filter:blur(20px) saturate(170%); /* taste-skill-ignore: vidro fosco pedido pelo dono */
    -webkit-backdrop-filter:blur(20px) saturate(170%); /* taste-skill-ignore: vidro fosco pedido pelo dono */
    color:var(--ink);
    border-radius:0;
    border:2px solid rgba(20,20,20,.10);
    opacity:0; pointer-events:none; transform:translateY(10px);
    transition:opacity .25s ease, transform .25s ease, background .25s ease;
  }
  /* o botão fixo só entra depois da hero — na hero ele é ruído */
  .site-header.has-float .head-actions .btn{ opacity:1; pointer-events:auto; transform:none }
  .site-header.is-menu .head-actions .btn{ opacity:0; pointer-events:none }
  body{ padding-bottom:82px }

  /* hero mobile: uma composição só: foto no topo, tipografia embaixo, ligada pelo gradiente */
  .hero{
    min-height:100svh; padding-top:0; padding-bottom:0;
    display:block; align-items:stretch;
  }
  .hero-bg{
    position:absolute; inset:0; z-index:0;
    height:auto; min-height:0;
  }
  .hero-bg img{ object-position:78% 22% }
  .hero-scrim{
    background:linear-gradient(to bottom, /* taste-skill-ignore: scrim neutro integrando foto e tipografia */
      rgba(237,235,231,0) 0%,
      rgba(237,235,231,0) 26%,
      rgba(237,235,231,.55) 40%,
      rgba(237,235,231,.92) 52%,
      var(--bg) 60%);
  }
  .hero-grid{
    position:relative; z-index:2;
    min-height:100svh;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding-top:118px; padding-bottom:clamp(34px,5vh,58px);
  }
  .how-head{ flex-direction:column; align-items:flex-start }
  .hero-copy{ grid-column:1/-1; max-width:none; width:100% }

  .products{ grid-template-columns:repeat(3,1fr); gap:16px }
  .card-media{ aspect-ratio:1/1 }
  .card-name{ font-size:22px }
  .card-desc{ font-size:14px }
  .coins{ padding:8px 10px; gap:5px }
  .coins svg{ width:14px; height:14px }
  .coins strong{ font-size:16px }
  .coins-unit{ font-size:13px; letter-spacing:.02em }

  .about-copy{ grid-column:1/-1 }
  .about-copy .h2{ font-size:24px }
  .about-mark{
    width:min(260px,64vw); right:-14%; top:-4%; bottom:auto;
    transform:none; opacity:.08;
  }

  .moments{ grid-template-columns:1fr; gap:44px; max-width:560px }
  .moment{ padding-top:0; padding-left:70px }
  .moment::before{
    top:0; bottom:-44px; left:22px; right:auto;
    width:2px; height:auto;
  }
  .moment:last-child::before{ display:none }

  .sim{ grid-template-columns:1fr }

  .cta-band{ padding-block:clamp(60px,12vw,90px) }

  .faq-left{ grid-column:1/-1; position:static }
  .accordion{ grid-column:1/-1 }
  .resgate-copy{ grid-column:1/-1 }
  .resgate-action{ grid-column:1/-1 }

  /* rodapé no mobile: coluna única — nada fica órfão no canto direito */
  .footer-top{ flex-direction:column; align-items:stretch; gap:26px }
  .footer-links{ flex-direction:row; flex-wrap:wrap; gap:8px 22px }
  .footer-contact{ max-width:none }
}

@media (max-width:560px){
  .statement{ font-size:24px }
  .form-grid{ grid-template-columns:1fr }
  .modal{ padding:10px }
  .modal-panel{ max-height:94vh; padding:22px 18px }
  .form-block{ margin-top:14px }
  .hero-cta{ gap:18px }
  .hero-cta .btn{ width:100% }
  .footer-legal{ flex-direction:column; gap:12px }
  .products{ grid-template-columns:repeat(2,1fr); gap:14px }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  .reveal{ opacity:1; transform:none }
  .js .about-copy > *, .js .moments > .moment, .js .sim-panel > *{ opacity:1; transform:none }
  .line > span{ transform:none }
}