/* =============================================================================
 * styles.css — Landing "Catálogo Vivo · by LexusFX" · T2 (dono: lp-design)
 * Estética LexusFX: preto cálido + creme editorial · LARANJA SÓ NO CTA.
 * Dir. de arte: "editorial técnico" — Space Grotesk (display, self-hosted) +
 * serif de sistema (corpo, confiança/"empresa de verdade") + mono só p/ dados.
 * Mobile-first · WCAG AA · zero dependência externa (fontes self-hosted).
 * Anti-slop: sem gradiente roxo, sem glass, sem cian, neutros quentes, ritmo variado.
 * ========================================================================== */

/* ---- Fontes self-hosted (GDPR-safe: servidas do nosso origin) ------------- */
@font-face{ font-family:"Space Grotesk"; font-weight:500; font-style:normal;
  font-display:swap; src:url("fonts/space-grotesk-500.woff2") format("woff2"); }
@font-face{ font-family:"Space Grotesk"; font-weight:600; font-style:normal;
  font-display:swap; src:url("fonts/space-grotesk-600.woff2") format("woff2"); }
@font-face{ font-family:"Space Grotesk"; font-weight:700; font-style:normal;
  font-display:swap; src:url("fonts/space-grotesk-700.woff2") format("woff2"); }

/* ---- Tokens --------------------------------------------------------------- */
:root{
  /* cor — neutros QUENTES (tingidos p/ o hue laranja), preto não-puro */
  --bg:#100E0B;
  --bg-2:#16130F;          /* faixa alternada */
  --surface:#1B1712;
  --surface-2:#241F18;
  --border:#2E271F;
  --border-strong:#443A2E;
  --ink:#F4EFE7;           /* creme (texto alto) */
  --ink-mid:#BDB4A6;       /* creme médio */
  --ink-low:#8A8073;       /* creme baixo (AA em ≥16px) */
  /* creme da ILUSTRAÇÃO (papel/produto — neutro, não é accent) */
  --paper:#EFE9DF; --paper-2:#E1D8C9; --paper-ink:#2A2620; --paper-line:#CFC5B4;
  /* LARANJA — exclusivo do CTA */
  --cta:#F97316; --cta-hover:#FF8534; --cta-press:#E0640C; --cta-ink:#140B04;
  --cta-glow:rgba(249,115,22,.34); --cta-ring:rgba(249,115,22,.5);
  /* live (monocromático — creme, sem 2º accent) */
  --live:#EDE6DA;
  /* tipografia */
  --f-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --f-body:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,ui-serif,serif;
  --f-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
  /* escala fluida */
  --fs-display:clamp(2.4rem,6vw,4.2rem);
  --fs-h2:clamp(1.7rem,3.6vw,2.6rem);
  --fs-h3:clamp(1.15rem,2vw,1.4rem);
  --fs-lede:clamp(1.05rem,1.7vw,1.28rem);
  --fs-body:1rem; --fs-sm:.9rem; --fs-xs:.75rem;
  /* espaço / raio / motion */
  --sp-sec:clamp(3.5rem,9vw,7rem);
  --wrap:1120px; --wrap-narrow:660px;
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-full:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.24s;
}

/* ---- Reset / base --------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:var(--fs-body); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; max-width:100%;
}
/* anti-overflow global (mobile-first: nada estoura 100vw) */
img,svg,iframe,embed,object,video{ max-width:100%; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; line-height:1.06;
  letter-spacing:-.02em; margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,svg{ max-width:100%; }
s{ text-decoration-thickness:2px; }
::selection{ background:var(--cta); color:var(--cta-ink); }

:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--cta-ring); border-radius:var(--r-sm); }
/* F-05: fallback de foco em forced-colors / High Contrast (box-shadow some) */
@media (forced-colors:active){ :focus-visible{ outline:2px solid; outline-offset:2px; } }

.skip-link{ position:absolute; left:-999px; top:0; z-index:100;
  background:var(--surface-2); color:var(--ink); padding:.7em 1em; border-radius:0 0 var(--r-sm) 0; }
.skip-link:focus{ left:0; }

/* ---- Layout utils --------------------------------------------------------- */
.section{ padding:var(--sp-sec) clamp(1.15rem,5vw,2.5rem); }
.section:nth-of-type(even){ background:var(--bg-2); }
.wrap-narrow{ max-width:var(--wrap-narrow); margin-inline:auto; }
.section__title{ font-size:var(--fs-h2); max-width:20ch; }
.muestra .section__title,.oferta .section__title,.cta-final .section__title{ margin-inline:auto; text-align:center; max-width:24ch; }
.eyebrow{ font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-low); margin-bottom:1em; }
.muestra .eyebrow,.oferta .eyebrow{ text-align:center; }
.lede{ font-size:var(--fs-lede); color:var(--ink-mid); line-height:1.55; max-width:52ch; }
.lede--center{ margin-inline:auto; text-align:center; }
.tagline{ font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-mid); margin-bottom:1.4em; }
.is-gated{ opacity:.5; font-style:italic; }   /* copy [PENDENTE VoC] marcada */

/* entrada suave por seção */
@media (prefers-reduced-motion:no-preference){
  .section{ opacity:0; transform:translateY(18px); animation:rise .7s var(--ease) forwards; }
  .section:nth-child(1){ animation-delay:0s } /* hero sempre visível cedo */
  @keyframes rise{ to{ opacity:1; transform:none } }
}

/* ---- Botões (LARANJA só no --cta) ---------------------------------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--f-display); font-weight:600; font-size:1rem; line-height:1;
  padding:.95em 1.5em; border-radius:var(--r-full); border:1px solid transparent;
  cursor:pointer; transition:transform var(--dur) var(--ease),
    background var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease); min-height:44px; }
.btn--lg{ font-size:1.06rem; padding:1.05em 1.7em; }
.btn--block{ display:flex; width:100%; }
.btn--cta{ background:var(--cta); color:var(--cta-ink); box-shadow:0 1px 0 rgba(255,255,255,.12) inset; }
.btn--cta:hover{ background:var(--cta-hover); transform:translateY(-2px); box-shadow:0 10px 30px var(--cta-glow); }
.btn--cta:active{ background:var(--cta-press); transform:translateY(0); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--border-strong); }
.btn--ghost:hover{ border-color:var(--ink-mid); transform:translateY(-2px); }

.cta-group{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.cta-group--center{ justify-content:center; }

/* ---- Header --------------------------------------------------------------- */
.site-header{ position:sticky; top:0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:.7rem clamp(1.15rem,5vw,2.5rem);
  background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); }
.brand{ font-family:var(--f-display); font-weight:700; letter-spacing:-.01em;
  display:inline-flex; align-items:center; gap:.55em; font-size:1.05rem; }
.brand__mark{ width:10px; height:10px; border-radius:3px; background:var(--ink);
  box-shadow:0 0 0 3px var(--surface-2); }
.site-header__cta{ padding:.55em 1.1em; font-size:.92rem; min-height:44px; }  /* F-04: ≥44px touch */

/* ---- 1 · HERO ------------------------------------------------------------- */
.hero{ display:grid; gap:clamp(2.5rem,5vw,4rem); align-items:center;
  max-width:var(--wrap); margin-inline:auto; }
.hero__h1{ font-size:var(--fs-display); margin:.15em 0 .5em; }
.hero__sub{ max-width:40ch; }
.hero__emo{ margin-top:1rem; color:var(--ink-mid); font-style:italic; }

/* antes→depois — MOBILE-FIRST: base 1 coluna (seta vertical); lado-a-lado só em telas largas */
.beforeafter{ margin:0; display:grid; grid-template-columns:1fr; justify-items:center;
  align-items:center; gap:clamp(.9rem,3vw,1.4rem);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:clamp(1.4rem,5vw,2.4rem); }
.ba-side{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.ba-tag{ font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-low); }
.ba-tag--on{ color:var(--ink); }
.ba-arrow{ color:var(--ink-low); display:flex; transform:rotate(90deg); }

/* antes: prints tortos/soltos */
.prints{ position:relative; width:130px; height:150px; }
.print{ position:absolute; width:74px; height:92px; border-radius:4px;
  background:linear-gradient(160deg,var(--paper),var(--paper-2));
  border:1px solid var(--paper-line);
  box-shadow:0 6px 14px rgba(0,0,0,.45); }
.print::after{ content:""; position:absolute; inset:8px 8px 22px; border-radius:2px;
  background:linear-gradient(135deg,#d9cdb9,#c3b6a0); opacity:.9; }
.print--1{ left:6px; top:30px; transform:rotate(-13deg); }
.print--2{ left:44px; top:14px; transform:rotate(7deg); }
.print--3{ left:20px; top:52px; transform:rotate(-4deg); }
.print--4{ left:52px; top:48px; transform:rotate(15deg); z-index:2; }
.print--5{ left:32px; top:22px; transform:rotate(-8deg); }

/* depois: 1 catálogo limpo */
.pdfcard{ width:190px; background:var(--paper); border-radius:8px; overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.5); border:1px solid var(--paper-line); }
.pdfcard__bar{ display:flex; align-items:center; gap:.5em; padding:.5em .7em;
  background:var(--paper-2); border-bottom:1px solid var(--paper-line); }
.pdfcard__dot{ width:8px; height:8px; border-radius:50%; background:#c14a2b; box-shadow:14px 0 0 #d9a441,28px 0 0 #4f9d5a; }
.pdfcard__file{ margin-left:2.4em; font-family:var(--f-mono); font-size:10px; color:var(--paper-ink); opacity:.7; }
.pdfcard__page{ padding:.9em; color:var(--paper-ink); }
.pdfcard__title{ font-family:var(--f-display); font-weight:600; font-size:1rem; display:block; margin-bottom:.6em; }
.pdfcard__grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pdfcard__grid i{ display:block; height:44px; border-radius:4px;
  background:linear-gradient(135deg,#e7ded0,#d5c9b6); border:1px solid var(--paper-line); }

/* ---- 2 · PROBLEMA + DIFERENCIAÇÃO ---------------------------------------- */
.problema .pull{ margin-top:1.4rem; padding-left:1rem; border-left:2px solid var(--border-strong);
  font-family:var(--f-display); font-weight:500; font-size:var(--fs-h3); color:var(--ink); }
.diff{ margin-top:clamp(2.5rem,6vw,4rem); }
.diff__q{ font-size:var(--fs-h3); margin-bottom:1.1rem; }
.diff__list li{ padding:.7rem 0 .7rem 1.6rem; position:relative; color:var(--ink-mid);
  border-bottom:1px solid var(--border); }
.diff__list li::before{ content:"✕"; position:absolute; left:0; top:.7rem;
  color:var(--ink-low); font-family:var(--f-mono); }
.diff__us{ margin-top:1.3rem; font-family:var(--f-display); font-weight:600;
  font-size:var(--fs-h3); color:var(--ink); }

/* ---- 3 · MUESTRA (demo) + plan ------------------------------------------- */
.muestra{ text-align:center; }
.demo{ max-width:900px; margin:2.4rem auto 0; }
/* o que demo.js injeta (iframe/embed) fica emoldurado */
.demo :is(iframe,embed,object){ width:100%; min-height:60vh; border:0; display:block;
  border-radius:var(--r-md); background:var(--paper); }
.demo__fallback{ text-align:left; }
.demo__frame{ border:1px solid var(--border-strong); border-radius:var(--r-md);
  overflow:hidden; background:var(--surface); }
.demo__bar{ display:flex; align-items:center; gap:.6em; padding:.7em 1em;
  background:var(--surface-2); border-bottom:1px solid var(--border); }
.live-dot{ width:9px; height:9px; border-radius:50%; background:var(--live);
  box-shadow:0 0 0 0 rgba(237,230,218,.5); animation:pulse 1.9s var(--ease) infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 7px rgba(237,230,218,0) } 100%{ box-shadow:0 0 0 0 rgba(237,230,218,0) } }
.live-label{ font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.16em; color:var(--live); }
.demo__url{ margin-left:auto; font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--ink-low); }
.demo__open{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:clamp(1.4rem,5vw,2.6rem); }
.demo__manifesto{ font-family:var(--f-display); font-weight:600; font-size:var(--fs-h3); color:var(--ink); }
.demo__open-cue{ font-family:var(--f-mono); font-size:var(--fs-sm); color:var(--ink-mid); white-space:nowrap; }
.demo__open:hover .demo__open-cue{ color:var(--ink); }
.muestra__cta{ margin-top:1.8rem; }

.plan{ max-width:var(--wrap-narrow); margin:clamp(3rem,7vw,4.5rem) auto 0; text-align:left; }
.plan__title{ font-size:var(--fs-h3); text-align:center; margin-bottom:1.6rem; }
.plan__steps{ display:grid; gap:.9rem; counter-reset:step; }
.plan__step{ position:relative; padding:1.1rem 1.2rem 1.1rem 1.2rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  color:var(--ink); font-family:var(--f-body); }
.plan__close{ margin-top:1.6rem; text-align:center; font-family:var(--f-display);
  font-weight:600; font-size:var(--fs-h3); color:var(--ink); }

/* ---- 4 · OFERTA + PROVA 2 ------------------------------------------------- */
.offer-card{ max-width:640px; margin:2.4rem auto 0; background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--r-lg);
  padding:clamp(1.6rem,5vw,2.8rem); box-shadow:0 24px 60px rgba(0,0,0,.4); }
.offer-card__price{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.price-anchor s{ font-family:var(--f-mono); font-size:1.1rem; color:var(--ink-low); }
.price-now{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.6rem,7vw,3.4rem);
  line-height:1; color:var(--ink); }
.price-unit{ font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-low); }

.value-stack{ margin-top:1.6rem; padding:1.2rem 1.3rem; background:var(--bg);
  border:1px solid var(--border); border-radius:var(--r-md); }
.value-stack__title{ font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-low); margin-bottom:.8rem; }
.value-stack__list li{ display:flex; justify-content:space-between; gap:1rem;
  padding:.4rem 0; color:var(--ink-mid); border-bottom:1px dashed var(--border); }
.value-stack__foot{ display:flex; justify-content:space-between; gap:1rem; margin-top:.7rem; }
.value-stack__total{ color:var(--ink-low); text-decoration:line-through; text-decoration-color:var(--border-strong); }
.value-stack__today{ font-family:var(--f-display); font-weight:700; color:var(--ink); }

.split5050{ margin-top:1.6rem; }
.split5050__k{ display:block; font-family:var(--f-display); font-weight:600; font-size:var(--fs-h3); }
.split5050__v{ display:block; color:var(--ink-mid); margin-top:.2rem; }
.split5050__bar{ margin-top:.8rem; height:8px; border-radius:var(--r-full);
  background:var(--surface-2); overflow:hidden; }
.split5050__bar span{ display:block; width:50%; height:100%; background:var(--border-strong); }

.offer-includes{ margin-top:1.8rem; }
.offer-includes h3{ font-size:1rem; font-family:var(--f-mono); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-low); margin-bottom:.9rem; }
.check-list li{ position:relative; padding:.5rem 0 .5rem 1.8rem; color:var(--ink); border-bottom:1px solid var(--border); }
.check-list li::before{ content:"✓"; position:absolute; left:0; top:.5rem; color:var(--ink-mid); font-weight:700; }

.offer-dream{ margin-top:1.4rem; font-style:italic; color:var(--ink-mid); text-align:center; }
.offer-card .btn--block{ margin-top:1.8rem; }
.offer-social{ margin-top:1rem; text-align:center; color:var(--ink-low); font-size:var(--fs-sm); }

.guarantee{ margin-top:1.8rem; padding-top:1.6rem; border-top:1px solid var(--border); }
.guarantee h3{ font-size:1rem; font-family:var(--f-mono); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-low); margin-bottom:.9rem; }
.guarantee__list li{ padding:.55rem 0 .55rem 1.6rem; position:relative; color:var(--ink-mid); font-size:var(--fs-sm); }
.guarantee__list li::before{ content:"■"; position:absolute; left:0; top:.62rem; color:var(--border-strong); font-size:.6rem; }

/* ---- 5 · FAQ -------------------------------------------------------------- */
.faq__list{ margin-top:2rem; border-top:1px solid var(--border); }
.faq__item{ border-bottom:1px solid var(--border); }
.faq__item summary{ list-style:none; cursor:pointer; padding:1.1rem 2rem 1.1rem 0;
  position:relative; font-family:var(--f-display); font-weight:600; font-size:1.05rem; color:var(--ink); }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; position:absolute; right:.2rem; top:1rem;
  font-family:var(--f-mono); color:var(--ink-low); transition:transform var(--dur) var(--ease); }
.faq__item[open] summary::after{ content:"−"; color:var(--ink); }
.faq__a{ padding:0 0 1.2rem; color:var(--ink-mid); max-width:60ch; }
.faq__contact{ margin-top:1.6rem; color:var(--ink-mid); }

/* ---- 6 · CTA FINAL -------------------------------------------------------- */
.cta-final{ text-align:center; }
.signature{ margin-top:2.4rem; font-family:var(--f-mono); font-size:var(--fs-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-low); }

/* ---- Sticky CTA (móvel) --------------------------------------------------- */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:.7rem clamp(1rem,4vw,1.4rem) calc(.7rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(12px);
  border-top:1px solid var(--border); box-shadow:0 -10px 30px rgba(0,0,0,.5); }
.sticky-cta[hidden]{ display:none; }

/* ---- Responsive (MOBILE-FIRST: só min-width daqui p/ cima) ---------------- */
@media (min-width:640px){
  .beforeafter{ grid-template-columns:1fr auto 1fr; }
  .ba-arrow{ transform:none; }              /* seta volta a horizontal lado-a-lado */
}
@media (min-width:860px){
  .hero{ grid-template-columns:1.05fr .95fr; }
  .prints{ width:190px; height:180px; }
  .print{ width:92px; height:114px; }
  .print--1{ left:8px; top:36px } .print--2{ left:70px; top:10px }
  .print--3{ left:28px; top:64px } .print--4{ left:82px; top:58px }
  .print--5{ left:48px; top:26px }
  .pdfcard{ width:230px; }
  .sticky-cta{ display:none !important; }   /* desktop usa o CTA do header */
}

/* ---- Footer (identidade/legal) -------------------------------------------- */
.site-footer{ padding:clamp(2rem,5vw,3rem) clamp(1.15rem,5vw,2.5rem) calc(clamp(2rem,5vw,3rem) + 4.5rem);
  border-top:1px solid var(--border); background:var(--bg); color:var(--ink-low); font-size:var(--fs-sm); }
.site-footer__id{ line-height:1.7; }
.site-footer__id strong{ font-family:var(--f-display); color:var(--ink-mid); }
.site-footer .site-footer__legal{ margin-top:.9rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.site-footer__legal a{ color:var(--ink-mid); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border-strong); }
.site-footer__legal a:hover{ color:var(--ink); }
@media (min-width:860px){ .site-footer{ padding-bottom:clamp(2rem,5vw,3rem); } }

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .section{ opacity:1 !important; transform:none !important; }
  .live-dot{ box-shadow:0 0 0 3px rgba(237,230,218,.35); }
}