/* ====================================================================
   GTG MARKETING — Guilherme Tondo Guedes
   Design System tokens (mobile-first)
   ==================================================================== */
:root{
  --color-primary:#1E88E5;
  --color-primary-dark:#1565C0;
  --color-accent:#1E88E5;
  --color-bg:#F0F3F5;
  --color-surface:#FFFFFF;
  --color-dark:#181F2A;
  --color-dark-surface:#1F2837;
  --color-text:#242424;
  --color-text-light:#FFFFFF;
  --color-muted:#6B7280;
  --color-border:#E2E8F0;

  --font-heading:'Sora',system-ui,sans-serif;
  --font-body:'DM Sans',system-ui,sans-serif;

  --px:24px;              /* padding-x mobile */
  --py:64px;              /* section py mobile */
  --container:560px;      /* mobile-first content max */

  --radius-btn:24px;
  --radius-card:28px;
  --radius-img:32px;

  --shadow-sm:0 2px 8px rgba(30,136,229,.06);
  --shadow-md:0 8px 24px rgba(30,136,229,.10);
  --shadow-lg:0 16px 48px rgba(30,136,229,.14);
  --shadow-cta:0 12px 28px rgba(30,136,229,.35);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  color:var(--color-text);
  background:#0C1622;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
:is(iconify-icon,svg.ic){display:inline-block;line-height:1;}

/* ====================================================================
   STAGE + PHONE FRAME
   mobile: full-bleed · desktop: bezel on a branded backdrop
   ==================================================================== */
.stage{position:relative;width:100%;background:var(--color-surface);}
.stage-brand{display:none;}

.phone{position:relative;width:100%;background:var(--color-surface);}
.phone-island{display:none;}
.phone-screen{width:100%;background:var(--color-surface);}

/* ====================================================================
   LAYOUT PRIMITIVES
   ==================================================================== */
.section{padding:var(--py) 0;position:relative;overflow:hidden;}
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--px);position:relative;z-index:1;}
.wrap-narrow{max-width:520px;}
.br-d{display:none;}

.sec-head{margin-bottom:34px;}
.sec-title{
  font-family:var(--font-heading);font-weight:700;font-size:26px;line-height:1.18;
  letter-spacing:-.01em;text-wrap:balance;
}
.sec-intro{margin-top:14px;font-size:15px;color:var(--color-muted);max-width:42ch;}
.section-dark .sec-intro{color:rgba(255,255,255,.66);}

.eyebrow{
  display:inline-block;font-family:var(--font-heading);font-weight:700;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-primary);margin-bottom:14px;
}
.eyebrow-light{color:#7FC0FF;}

/* section backgrounds */
.section-soft{background:var(--color-bg);}
.section-surface{background:var(--color-surface);}
.section-dark{background:var(--color-dark);color:#fff;}
.section-dark .sec-title{color:#fff;}

/* ====================================================================
   BUTTONS
   ==================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-weight:700;font-size:15px;
  height:50px;padding:0 26px;border-radius:var(--radius-btn);
  border:1px solid transparent;cursor:pointer;
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),background .24s var(--ease);
  -webkit-tap-highlight-color:transparent;text-align:center;
}
.btn-block{width:100%;}
.btn-primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-md);width:100%;}
.btn-primary:hover{background:var(--color-primary-dark);box-shadow:var(--shadow-cta);transform:translateY(-2px);}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.30);width:100%;}
.btn-ghost-light:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);}
.btn-wa{background:#1FA855;color:#fff;width:100%;box-shadow:0 10px 24px rgba(31,168,85,.3);}
.btn-wa:hover{background:#178a45;transform:translateY(-2px);box-shadow:0 14px 30px rgba(31,168,85,.4);}
.btn-wa svg{flex:none;}

@media (min-width:900px){
  .hero-cta .btn,.btn-primary,.btn-ghost-light{width:100%;}
}

/* ====================================================================
   BRAND MARK
   ==================================================================== */
.brand-mark{display:inline-flex;align-items:flex-end;font-family:var(--font-heading);font-weight:800;font-size:20px;letter-spacing:-.01em;color:#fff;}
.brand-mark i{width:6px;height:6px;border-radius:50%;background:var(--color-primary);margin-left:3px;margin-bottom:5px;}

/* ====================================================================
   DOBRA 1 — HERO
   ==================================================================== */
.hero{
  position:relative;isolation:isolate;color:#fff;overflow:hidden;
  padding:0 0 56px;
  background:
    radial-gradient(130% 100% at 50% -10%, #2E97F0 0%, #1E88E5 26%, #1565C0 58%, #0D3D6B 100%);
}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.blob{position:absolute;border-radius:50%;filter:blur(6px);}
.blob-a{width:230px;height:230px;left:-70px;bottom:-40px;background:radial-gradient(circle,rgba(127,192,255,.45),transparent 68%);}
.blob-b{width:200px;height:200px;right:-60px;top:60px;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 68%);}

.hero-nav{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--px) 0;
}
.hero-nav .nav-link{font-size:14px;font-weight:500;color:rgba(255,255,255,.85);padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);transition:background .2s;}
.hero-nav .nav-link:hover{background:rgba(255,255,255,.12);}

.hero-inner{position:relative;z-index:2;padding:26px var(--px) 0;display:flex;flex-direction:column;}

.hero-photo{
  width:148px;aspect-ratio:1/1;border-radius:var(--radius-img);overflow:hidden;
  margin:6px 0 26px;box-shadow:0 16px 40px rgba(8,24,48,.45);
  border:3px solid rgba(255,255,255,.5);
}
.hero-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.03);}

.hero-title{
  font-family:var(--font-heading);font-weight:800;
  font-size:clamp(30px,8.4vw,40px);line-height:1.08;letter-spacing:-.02em;
  text-wrap:balance;
}
.hero-title mark{
  background:none;color:#fff;position:relative;white-space:nowrap;
}
.hero-title mark::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.16em;border-radius:999px;
  background:rgba(255,255,255,.55);
}
.hero-sub{margin-top:20px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.9);max-width:46ch;}
.hero-sub strong{color:#fff;font-weight:700;}
.hero-cta{display:flex;flex-direction:column;gap:12px;margin-top:28px;}

.hero-byline{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:13px;color:rgba(255,255,255,.78);}
.byline-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.5);}

/* ---- Hero variant: DECLARAÇÃO (text-forward, small avatar) ---- */
.hero[data-hero="declaracao"] .hero-photo{display:none;}
.hero[data-hero="declaracao"] .hero-inner{padding-top:40px;padding-bottom:8px;}
.hero[data-hero="declaracao"] .hero-title{font-size:clamp(34px,9.6vw,46px);}
.hero[data-hero="declaracao"] .hero-byline{order:-1;margin-top:0;margin-bottom:24px;}
.hero[data-hero="declaracao"] .byline-avatar{width:40px;height:40px;}

/* ---- Hero variant: EDITORIAL (photo as full banner with overlay) ---- */
.hero[data-hero="editorial"]{padding-bottom:48px;}
.hero[data-hero="editorial"] .hero-photo{
  width:auto;aspect-ratio:16/13;border-radius:var(--radius-img);
  margin:8px 0 0;border:none;box-shadow:0 24px 50px rgba(8,24,48,.5);
  position:relative;
}
.hero[data-hero="editorial"] .hero-photo::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius-img);
  background:linear-gradient(to top, rgba(13,61,107,.6) 0%, transparent 48%);
}
.hero[data-hero="editorial"] .hero-photo img{object-position:center 22%;}
.hero[data-hero="editorial"] .eyebrow{order:-1;}
.hero[data-hero="editorial"] .hero-title{font-size:clamp(28px,7.8vw,38px);margin-top:24px;}

/* ---- Hero theme: CLARO (light hero) ---- */
.hero[data-theme="claro"]{
  background:linear-gradient(180deg,#FFFFFF 0%,#EAF3FC 100%);color:var(--color-text);
}
.hero[data-theme="claro"] .blob-a{background:radial-gradient(circle,rgba(30,136,229,.20),transparent 68%);}
.hero[data-theme="claro"] .blob-b{background:radial-gradient(circle,rgba(30,136,229,.12),transparent 68%);}
.hero[data-theme="claro"] .brand-mark{color:var(--color-text);}
.hero[data-theme="claro"] .hero-nav .nav-link{color:var(--color-primary);border-color:rgba(30,136,229,.3);}
.hero[data-theme="claro"] .hero-nav .nav-link:hover{background:rgba(30,136,229,.08);}
.hero[data-theme="claro"] .eyebrow-light{color:var(--color-primary);}
.hero[data-theme="claro"] .hero-title mark{color:var(--color-primary);}
.hero[data-theme="claro"] .hero-title mark::after{background:rgba(30,136,229,.28);}
.hero[data-theme="claro"] .hero-sub{color:#475569;}
.hero[data-theme="claro"] .hero-sub strong{color:var(--color-text);}
.hero[data-theme="claro"] .hero-photo{border-color:#fff;box-shadow:var(--shadow-lg);}
.hero[data-theme="claro"] .btn-ghost-light{color:var(--color-primary);border-color:rgba(30,136,229,.35);}
.hero[data-theme="claro"] .btn-ghost-light:hover{background:rgba(30,136,229,.08);}
.hero[data-theme="claro"] .hero-byline{color:#475569;}
.hero[data-theme="claro"] .byline-avatar{border-color:var(--color-primary);}

/* ====================================================================
   DOBRA 2 — DIAGNÓSTICO (cards)
   ==================================================================== */
.cards{display:grid;grid-template-columns:1fr;gap:16px;}
.card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:24px;box-shadow:var(--shadow-sm);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.card-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:14px;background:rgba(30,136,229,.10);
  color:var(--color-primary);font-size:26px;margin-bottom:16px;
}
.card-title{font-family:var(--font-heading);font-weight:700;font-size:17px;line-height:1.3;margin-bottom:8px;letter-spacing:-.01em;}
.card-text{font-size:14.5px;color:var(--color-muted);line-height:1.55;}

/* ====================================================================
   DOBRA 3 — QUOTE
   ==================================================================== */
.section-quote{
  background:linear-gradient(135deg,#1E88E5 0%,#1565C0 70%,#0D3D6B 100%);
  color:#fff;
}
.quote{position:relative;padding-top:18px;}
.quote-marks{
  position:absolute;top:-26px;left:-6px;font-family:var(--font-heading);font-weight:800;
  font-size:140px;line-height:1;color:rgba(255,255,255,.16);pointer-events:none;
}
.quote blockquote{
  position:relative;z-index:1;font-family:var(--font-heading);font-weight:700;
  font-size:24px;line-height:1.32;letter-spacing:-.01em;text-wrap:balance;
}
.quote blockquote em{font-style:normal;color:#BFE0FF;}
.quote figcaption{display:flex;align-items:center;gap:13px;margin-top:26px;}
.quote figcaption img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.6);}
.quote figcaption span{display:flex;flex-direction:column;font-size:13px;color:rgba(255,255,255,.72);}
.quote figcaption strong{font-size:15px;color:#fff;font-weight:700;}

/* ====================================================================
   DOBRA 4 — TIMELINE (método)
   ==================================================================== */
.section-dark{
  background:
    radial-gradient(120% 80% at 50% 0%, #1F2837 0%, #181F2A 60%);
}
.timeline{list-style:none;position:relative;margin-top:6px;padding-left:8px;}
.timeline::before{
  content:"";position:absolute;left:31px;top:18px;bottom:24px;width:2px;
  background:linear-gradient(to bottom,var(--color-primary),rgba(30,136,229,.15));
}
.tl-item{position:relative;display:flex;gap:18px;padding-bottom:30px;}
.tl-item:last-child{padding-bottom:0;}
.tl-node{
  position:relative;z-index:1;flex:none;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;background:var(--color-dark-surface);
  border:1px solid rgba(127,192,255,.35);color:#7FC0FF;font-size:24px;
  box-shadow:0 0 0 5px var(--color-dark);
}
.tl-body{padding-top:3px;}
.tl-step{font-family:var(--font-heading);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7FC0FF;}
.tl-title{font-family:var(--font-heading);font-weight:700;font-size:18px;margin:5px 0 7px;letter-spacing:-.01em;color:#fff;}
.tl-text{font-size:14.5px;color:rgba(255,255,255,.68);line-height:1.55;}

/* ====================================================================
   DOBRA 5 — DIFERENCIAIS
   ==================================================================== */
.diffs{display:grid;grid-template-columns:1fr;gap:16px;}
.diff{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:26px 24px;box-shadow:var(--shadow-sm);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.diff:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.diff-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:16px;
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
  color:#fff;font-size:28px;margin-bottom:16px;box-shadow:var(--shadow-md);
}
.diff-title{font-family:var(--font-heading);font-weight:700;font-size:18px;line-height:1.28;margin-bottom:9px;letter-spacing:-.01em;}
.diff-text{font-size:14.5px;color:var(--color-muted);line-height:1.58;}

/* ====================================================================
   DOBRA 6 — FAQ
   ==================================================================== */
.faq{display:flex;flex-direction:column;gap:12px;}
.faq-item{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:18px;overflow:hidden;transition:box-shadow .24s,border-color .24s;
}
.faq-item[open]{box-shadow:var(--shadow-md);border-color:rgba(30,136,229,.3);}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:18px 20px;font-family:var(--font-heading);font-weight:700;font-size:15.5px;
  line-height:1.35;letter-spacing:-.01em;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary span{flex:1;}
.faq-chev{flex:none;font-size:22px;color:var(--color-primary);transition:transform .28s var(--ease);}
.faq-item[open] .faq-chev{transform:rotate(180deg);}
.faq-ans{padding:0 20px 20px;}
.faq-ans p{font-size:14.5px;color:var(--color-muted);line-height:1.6;}
.faq-foot{margin-top:24px;text-align:center;font-size:14.5px;color:var(--color-muted);}
.faq-foot a{color:var(--color-primary);font-weight:700;}

/* ====================================================================
   DOBRA 7 — CONTATO
   ==================================================================== */
.contact-card{
  position:relative;overflow:hidden;border-radius:var(--radius-img);
  background:linear-gradient(150deg,#1E88E5 0%,#1565C0 100%);
  color:#fff;padding:34px 24px 30px;box-shadow:var(--shadow-lg);
}
.contact-card .blob{filter:blur(2px);opacity:.9;}
.blob-c{width:160px;height:160px;right:-50px;top:-40px;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%);}
.blob-d{width:150px;height:150px;left:-50px;bottom:-50px;background:radial-gradient(circle,rgba(127,192,255,.4),transparent 68%);}
.contact-inner{position:relative;z-index:1;}
.contact-title{font-family:var(--font-heading);font-weight:800;font-size:25px;line-height:1.2;letter-spacing:-.01em;text-wrap:balance;}
.contact-sub{margin-top:12px;font-size:15px;color:rgba(255,255,255,.88);line-height:1.55;}
.btn-wa{margin-top:24px;}

.contact-or{display:flex;align-items:center;gap:12px;margin:22px 0 18px;color:rgba(255,255,255,.6);font-size:12.5px;letter-spacing:.04em;}
.contact-or::before,.contact-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.25);}

.form{display:flex;flex-direction:column;gap:14px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field span{font-size:13px;font-weight:700;color:rgba(255,255,255,.92);}
.field span i{font-weight:400;font-style:normal;color:rgba(255,255,255,.6);}
.field input,.field textarea{
  font-family:var(--font-body);font-size:15px;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  border-radius:12px;padding:13px 15px;min-height:48px;resize:vertical;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.55);}
.field input:focus,.field textarea:focus{
  outline:none;border-color:#fff;background:rgba(255,255,255,.18);
  box-shadow:0 0 0 3px rgba(255,255,255,.18);
}
.field.invalid input,.field.invalid textarea{border-color:#FFD2CE;box-shadow:0 0 0 3px rgba(211,47,47,.25);}
.form .btn-primary{background:#fff;color:var(--color-primary-dark);margin-top:4px;}
.form .btn-primary:hover{background:#EAF3FC;box-shadow:0 12px 28px rgba(0,0,0,.2);}
.form-hint{font-size:12.5px;color:rgba(255,255,255,.7);text-align:center;}

.contact-mail{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:22px;font-size:14px;font-weight:500;color:rgba(255,255,255,.92);
}
.contact-mail :is(iconify-icon,svg.ic){font-size:19px;}
.contact-mail:hover{color:#fff;text-decoration:underline;}

/* ====================================================================
   FOOTER
   ==================================================================== */
.footer{background:var(--color-dark);color:#fff;padding:40px 0 36px;text-align:center;}
.brand-mark-foot{margin-bottom:16px;}
.foot-name{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.9);}
.foot-meta{display:flex;flex-direction:column;align-items:center;gap:8px;margin:16px 0;font-size:13px;color:rgba(255,255,255,.6);}
.foot-meta span{display:inline-flex;align-items:center;gap:7px;}
.foot-meta :is(iconify-icon,svg.ic){font-size:17px;color:#7FC0FF;}
.foot-copy{font-size:12px;color:rgba(255,255,255,.4);margin-top:6px;}

/* ====================================================================
   REVEAL ANIMATIONS (discreet) — gated on body.motion
   ==================================================================== */
/* Base = visible END state. Hidden pre-state applies ONLY while animating
   (body.motion, added by JS only after rAF confirms the clock ticks) and
   ONLY to elements not yet revealed — so content is never trapped hidden. */
.reveal{opacity:1;transform:none;}
@media (prefers-reduced-motion:no-preference){
  body.motion .reveal{transition:opacity .6s var(--ease),transform .6s var(--ease);}
  body.motion .reveal:not(.in){opacity:0;transform:translateY(20px);}
  body.motion .reveal[data-d="1"]{transition-delay:.06s;}
  body.motion .reveal[data-d="2"]{transition-delay:.14s;}
  body.motion .reveal[data-d="3"]{transition-delay:.22s;}
  body.motion .reveal[data-d="4"]{transition-delay:.30s;}
  body.motion .reveal[data-d="5"]{transition-delay:.38s;}
}

/* ====================================================================
   WIDER PHONE / TABLET tweaks for content breathing room
   ==================================================================== */
@media (min-width:560px) and (max-width:899px){
  :root{--px:40px;}
  .cards,.diffs{grid-template-columns:1fr 1fr;}
  .br-d{display:inline;}
}

/* ====================================================================
   COMPARATIVO — agência × comigo
   ==================================================================== */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.compare-col{border-radius:var(--radius-card);padding:22px 18px;}
.compare-bad{background:var(--color-surface);border:1px solid var(--color-border);}
.compare-good{background:linear-gradient(160deg,var(--color-primary),var(--color-primary-dark));color:#fff;box-shadow:var(--shadow-md);}
.compare-head{font-family:var(--font-heading);font-weight:700;font-size:15px;margin-bottom:16px;letter-spacing:-.01em;min-height:22px;display:flex;align-items:center;}
.compare-bad .compare-head{color:var(--color-muted);}
.compare-good .compare-head .brand-mark{font-size:18px;color:#fff;}
.compare-good .compare-head .brand-mark i{background:#fff;}
.compare-list{list-style:none;display:flex;flex-direction:column;gap:14px;}
.compare-list li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.35;}
.compare-list :is(iconify-icon,svg.ic){flex:none;font-size:20px;margin-top:1px;}
.compare-bad .compare-list li{color:#475569;}
.compare-bad .compare-list :is(iconify-icon,svg.ic){color:#E11D2E;opacity:1;}
.compare-good .compare-list li{color:#fff;font-weight:500;}
.compare-good .compare-list :is(iconify-icon,svg.ic){color:#BFE0FF;}

/* ====================================================================
   SOBRE — quem te atende
   ==================================================================== */
.about-photo{border-radius:var(--radius-img);overflow:hidden;aspect-ratio:16/10;box-shadow:var(--shadow-lg);border:1px solid var(--color-border);}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%;}
.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;}
.stat{background:var(--color-bg);border:1px solid var(--color-border);border-radius:18px;padding:18px;text-align:center;}
.stat-num{display:block;font-family:var(--font-heading);font-weight:800;font-size:34px;line-height:1;color:var(--color-primary);letter-spacing:-.02em;}
.stat-label{display:block;margin-top:6px;font-size:12.5px;color:var(--color-muted);font-weight:500;}
.about-quote{margin:40px 0 8px;font-family:var(--font-heading);font-weight:600;font-size:17px;line-height:1.5;letter-spacing:-.01em;color:var(--color-text);text-wrap:pretty;}
.segments{margin-top:26px;}
.seg-label{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted);margin-bottom:12px;}
.seg-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;}
.seg-list li{font-size:13px;font-weight:500;color:var(--color-primary-dark);background:rgba(30,136,229,.09);border:1px solid rgba(30,136,229,.18);border-radius:999px;padding:7px 14px;}

/* ====================================================================
   JORNADA — do briefing à performance
   ==================================================================== */
.journey{list-style:none;position:relative;margin-top:6px;padding-left:6px;}
.journey::before{content:"";position:absolute;left:25px;top:22px;bottom:26px;width:2px;background:linear-gradient(to bottom,var(--color-primary),rgba(30,136,229,.18));}
.jstep{position:relative;display:flex;gap:18px;padding-bottom:26px;}
.jstep:last-child{padding-bottom:0;}
.jnum{position:relative;z-index:1;flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--color-surface);border:2px solid var(--color-primary);color:var(--color-primary);font-family:var(--font-heading);font-weight:800;font-size:16px;box-shadow:0 0 0 5px var(--color-surface),var(--shadow-sm);}
.jbody{padding-top:4px;}
.jtitle{font-family:var(--font-heading);font-weight:700;font-size:17px;margin-bottom:6px;letter-spacing:-.01em;}
.jtext{font-size:14px;color:var(--color-muted);line-height:1.55;}
.section-soft .jnum,.section-soft .journey::before{box-shadow:0 0 0 5px var(--color-bg),var(--shadow-sm);}

/* ====================================================================
   PLANOS
   ==================================================================== */
.plans{display:grid;grid-template-columns:1fr;gap:16px;}
.plan{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:26px 24px;box-shadow:var(--shadow-sm);transition:transform .28s var(--ease),box-shadow .28s var(--ease);}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.plan-pop{border:1.5px solid var(--color-primary);box-shadow:var(--shadow-md);}
.plan-tag{position:absolute;top:-12px;left:24px;background:var(--color-primary);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;box-shadow:var(--shadow-md);}
.plan-name{font-family:var(--font-heading);font-weight:800;font-size:20px;color:var(--color-primary);letter-spacing:-.01em;}
.plan-budget{margin-top:16px;}
.plan-budget-label,.plan-price-label,.plan-plat-label{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted);}
.plan-budget-val{display:block;margin-top:3px;font-family:var(--font-heading);font-weight:700;font-size:18px;color:var(--color-text);}
.plan-price{margin-top:16px;padding-top:16px;border-top:1px solid var(--color-border);}
.plan-price strong{font-family:var(--font-heading);font-weight:800;font-size:38px;line-height:1;color:var(--color-primary);letter-spacing:-.02em;}
.plan-price .plan-price-cycle{font-size:14px;color:var(--color-muted);font-weight:500;}
.plan-price-label{margin-bottom:8px;}
.plan-platforms{margin-top:18px;padding-top:16px;border-top:1px solid var(--color-border);}
.plat-row{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:10px;}
.plat{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--color-text);}
.plat svg{height:20px;width:auto;display:block;}
.plans-notes{margin-top:18px;font-size:12px;line-height:1.6;color:var(--color-muted);}
.setup-banner{margin-top:18px;border-radius:var(--radius-card);background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:#fff;padding:24px;box-shadow:var(--shadow-md);}
.setup-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8);}
.setup-val{display:block;margin-top:6px;font-family:var(--font-heading);font-weight:800;font-size:23px;letter-spacing:-.01em;}
.setup-desc{margin-top:10px;font-size:13.5px;color:rgba(255,255,255,.9);line-height:1.5;}

/* ====================================================================
   CONTATO — actions
   ==================================================================== */
.contact-actions{display:flex;flex-direction:column;gap:12px;margin-top:24px;}
.btn-cal{background:#fff;color:var(--color-primary-dark);width:100%;box-shadow:0 10px 24px rgba(0,0,0,.16);}
.btn-cal:hover{background:#EAF3FC;transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.22);}
.btn-cal :is(iconify-icon,svg.ic){font-size:20px;}
.btn-form{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);width:100%;}
.btn-form:hover{background:rgba(255,255,255,.12);border-color:#fff;}
.btn-form :is(iconify-icon,svg.ic){font-size:20px;}
.contact-actions .btn-wa{margin-top:0;}
.contact-hint{margin-top:16px;font-size:12.5px;color:rgba(255,255,255,.78);text-align:center;}

/* footer extra */
.foot-cnpj{font-size:12.5px;color:rgba(255,255,255,.55);margin-top:4px;}

/* ====================================================================
   TABLET breathing room for new sections
   ==================================================================== */
@media (min-width:560px) and (max-width:899px){
  .plans{grid-template-columns:1fr 1fr;}
  .plan-pop{grid-column:1 / -1;}
  .about-stats{max-width:420px;}
}

/* ====================================================================
   ░░ DESKTOP LAYOUT (≥900px) — real adaptive layout, not a phone frame ░░
   ==================================================================== */
@media (min-width:900px){
  :root{--px:64px;--py:104px;--container:1180px;}
  .br-d{display:inline;}

  .sec-title{font-size:38px;line-height:1.12;}
  .sec-intro{font-size:17px;max-width:52ch;}
  .sec-head{margin-bottom:48px;}
  .wrap-narrow{max-width:760px;}

  /* ---------- HERO: split text + portrait ---------- */
  .hero{padding-bottom:0;}
  .hero-nav{max-width:var(--container);margin:0 auto;padding:30px var(--px) 0;}
  .hero-inner{
    max-width:var(--container);margin:0 auto;
    padding:60px var(--px) 96px;
    display:grid;gap:0 64px;align-items:center;
    grid-template-columns:1.05fr .95fr;
    grid-template-areas:"eb ph" "ti ph" "sb ph" "ct ph" "by ph";
  }
  .hero .eyebrow{grid-area:eb;margin-bottom:18px;}
  .hero-title{grid-area:ti;font-size:clamp(40px,4vw,54px);line-height:1.05;}
  .hero-sub{grid-area:sb;font-size:18px;max-width:46ch;margin-top:22px;}
  .hero-cta{grid-area:ct;flex-direction:row;flex-wrap:wrap;gap:14px;margin-top:32px;}
  .hero-cta .btn,.hero-cta .btn-primary,.hero-cta .btn-ghost-light{width:auto;min-width:210px;}
  .hero-byline{grid-area:by;margin-top:34px;}
  .hero-photo,
  .hero[data-hero="editorial"] .hero-photo,
  .hero[data-hero="retrato"] .hero-photo{
    grid-area:ph;align-self:center;justify-self:end;
    width:100%;max-width:430px;aspect-ratio:4/5;margin:0;
  }
  .hero[data-hero="editorial"] .hero-photo img{object-position:center 20%;}
  .hero[data-hero="declaracao"] .hero-inner{display:block;max-width:920px;}

  /* ---------- DIAGNÓSTICO: 4 columns ---------- */
  .cards{grid-template-columns:repeat(4,1fr);gap:24px;}

  /* ---------- QUOTE ---------- */
  .quote{max-width:920px;margin:0 auto;}
  .quote blockquote{font-size:34px;line-height:1.28;}
  .quote-marks{font-size:200px;top:-46px;}

  /* ---------- COMPARATIVO ---------- */
  .compare{max-width:840px;margin:0 auto;gap:20px;}
  .compare-col{padding:30px 28px;}
  .compare-list li{font-size:15px;}

  /* ---------- SOBRE: photo left, content right ---------- */
  #sobre .wrap{
    display:grid;gap:0 60px;align-items:start;
    grid-template-columns:.92fr 1.08fr;
    grid-template-areas:"head head" "photo stats" "photo quote" "photo segs";
  }
  #sobre .sec-head{grid-area:head;}
  #sobre .about-photo{grid-area:photo;aspect-ratio:4/5;margin:0;position:sticky;top:32px;}
  #sobre .about-stats{grid-area:stats;margin-top:0;}
  #sobre .about-quote{grid-area:quote;font-size:20px;margin-top:28px;}
  #sobre .segments{grid-area:segs;margin-top:28px;}

  /* ---------- DIFERENCIAIS: 3 columns ---------- */
  .diffs{grid-template-columns:repeat(3,1fr);gap:24px;}

  /* ---------- MÉTODO: horizontal timeline ---------- */
  .timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-left:0;margin-top:20px;}
  .timeline::before{left:24px;right:24px;top:24px;bottom:auto;width:auto;height:2px;background:linear-gradient(to right,var(--color-primary),rgba(30,136,229,.18));}
  .tl-item{flex-direction:column;gap:0;padding-bottom:0;}
  .tl-node{margin-bottom:20px;}
  .tl-body{padding-top:0;}

  /* ---------- JORNADA: horizontal 5 steps ---------- */
  .journey{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;padding-left:0;margin-top:20px;}
  .journey::before{left:23px;right:23px;top:23px;bottom:auto;width:auto;height:2px;background:linear-gradient(to right,var(--color-primary),rgba(30,136,229,.18));}
  .jstep{flex-direction:column;gap:0;padding-bottom:0;}
  .jnum{margin-bottom:18px;box-shadow:0 0 0 6px var(--color-surface),var(--shadow-sm);}
  .jbody{padding-top:0;}

  /* ---------- PLANOS: 3 columns ---------- */
  .plans{grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}
  .plan{display:flex;flex-direction:column;}
  .plan-pop{transform:translateY(-10px);}
  .plan-pop:hover{transform:translateY(-14px);}
  .plans-notes{text-align:center;max-width:760px;margin:24px auto 0;}
  .setup-banner{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding:28px 36px;margin-top:24px;}
  .setup-banner .setup-eyebrow{flex-basis:100%;}
  .setup-val{font-size:26px;white-space:nowrap;}
  .setup-desc{margin-top:0;flex:1;min-width:240px;}

  /* ---------- CONTATO ---------- */
  .contact-card{padding:48px 48px 42px;}
  .contact-title{font-size:30px;}
  .contact-actions{flex-direction:row;flex-wrap:wrap;}
  .contact-actions .btn{flex:1;min-width:200px;width:auto;}

  /* ---------- FOOTER ---------- */
  .footer{padding:48px 0;}
  .footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px;text-align:left;}
  .brand-mark-foot{margin-bottom:0;}
  .foot-meta{flex-direction:row;flex-wrap:wrap;gap:8px 24px;margin:0;}
  .foot-copy{margin-top:0;flex-basis:100%;}
}

/* Large desktop: a touch more room */
@media (min-width:1280px){
  .hero-title{font-size:56px;}
}

/* ====================================================================
   ░░░░░░░░░░░░░░░░  v3 — REFINOS E NOVOS COMPONENTES  ░░░░░░░░░░░░░░░░
   (later in source = wins over earlier rules at equal specificity)
   ==================================================================== */

/* ---- Brand wordmark (no accent dot) ---- */
.brand-mark{font-weight:700;font-size:17px;letter-spacing:-.01em;align-items:center;}

/* ---- HERO: tighter name+role, more top margin, no buttons ---- */
.hero-inner{padding-top:32px;}
.hero .eyebrow{margin-bottom:18px;}
.hero-photo{margin:2px 0 24px;}
.sec-head-center{text-align:center;}

/* ---- COMPARATIVO: single column on mobile, cleaner cards ---- */
.compare{grid-template-columns:1fr;gap:14px;}
.compare-col{padding:24px 22px;border-radius:22px;}
.compare-head{font-size:15.5px;min-height:auto;display:flex;align-items:center;gap:9px;}
.compare-head :is(iconify-icon,svg.ic){font-size:22px;}
.compare-bad .compare-head{color:#64748B;}
.compare-bad .compare-head :is(iconify-icon,svg.ic){color:#94A3B8;}
.compare-good .compare-head{color:#fff;}
.compare-good .compare-head :is(iconify-icon,svg.ic){color:#fff;}
.compare-list li{font-size:14.5px;align-items:center;}
.compare-list :is(iconify-icon,svg.ic){font-size:19px;margin-top:0;}
@media (min-width:560px){ .compare{grid-template-columns:1fr 1fr;} }

/* ---- SOBRE: single column (photo removed) ---- */
.about-stats{display:flex;gap:14px;margin-top:6px;}
.stat{
  flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:4px;
  padding:22px 20px 20px;border-radius:20px;
  background:linear-gradient(160deg,#FFFFFF 0%,#EEF6FD 100%);
  border:1px solid var(--color-border);box-shadow:var(--shadow-sm);
}
.stat::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(var(--color-primary),var(--color-primary-dark));}
.stat-num{
  font-family:var(--font-heading);font-weight:800;font-size:42px;line-height:1;letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--color-primary);
  margin:0;
}
.stat-label{font-size:13px;color:var(--color-muted);font-weight:500;}

/* segments as a numbered editorial directory */
.segments{margin-top:34px;}
.seg-label{display:block;font-family:var(--font-heading);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary);margin-bottom:4px;}
.seg-list{list-style:none;counter-reset:seg;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-top:4px;}
.seg-list li{
  counter-increment:seg;display:flex;align-items:center;gap:11px;padding:13px 2px;
  border-bottom:1px solid var(--color-border);background:none;border-radius:0;
  font-family:var(--font-heading);font-weight:600;font-size:15px;color:var(--color-text);letter-spacing:-.01em;
}
.seg-list li::before{content:counter(seg,decimal-leading-zero);font-size:12px;font-weight:700;color:var(--color-primary);font-variant-numeric:tabular-nums;min-width:20px;}

/* ---- JORNADA: light-blue section + scroll-triggered nodes ---- */
.section-jornada{--jornada-ring:#E5F0FB;background:#E5F0FB;color:var(--color-text);}
.section-jornada .eyebrow{color:var(--color-primary);}
.section-jornada .sec-title{color:var(--color-text);}
.section-jornada .sec-intro{color:#52647A;}
.section-jornada .jtitle{color:var(--color-text);}
.section-jornada .jtext{color:#52647A;}
.section-jornada .journey::before{background:linear-gradient(to bottom,var(--color-primary),rgba(30,136,229,.2));}
.section-jornada .jnum{
  background:#fff;border:2px solid var(--color-primary);color:var(--color-primary);
  box-shadow:0 0 0 6px var(--jornada-ring),var(--shadow-sm);
  transition:transform .45s var(--ease),background .45s,color .45s,box-shadow .45s;
}
.section-jornada .jstep.jpass .jnum{
  background:var(--color-primary);color:#fff;transform:scale(1.14);
  box-shadow:0 10px 24px rgba(30,136,229,.42),0 0 0 6px var(--jornada-ring);
}

/* ---- PLAN PLATFORM LOGOS: small, delicate, harmonious ---- */
.plat-row{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:12px;}
.plat-logo{height:15px;width:auto;opacity:.9;}
.plat-more{font-size:12px;font-weight:600;color:var(--color-muted);}

/* ---- GOLD BANNER (acima de R$ 10k) ---- */
.gold-banner{
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-top:20px;border-radius:var(--radius-card);padding:24px 26px;
  background:linear-gradient(135deg,#C9981E 0%,#E8C25C 46%,#B5821A 100%);
  box-shadow:0 16px 38px rgba(176,128,20,.32);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.gold-banner:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(176,128,20,.42);}
.gold-banner-glow{position:absolute;width:200px;height:200px;right:-60px;top:-70px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.5),transparent 65%);pointer-events:none;}
.gold-banner-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:3px;}
.gold-banner-text strong{font-family:var(--font-heading);font-weight:800;font-size:19px;color:#2A1E04;letter-spacing:-.01em;}
.gold-banner-text span{font-size:13.5px;color:#5A4410;font-weight:500;}
.gold-banner-cta{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-heading);font-weight:700;font-size:13.5px;background:#2A1E04;color:#F4D98A;padding:12px 18px;border-radius:999px;white-space:nowrap;transition:gap .2s;}
.gold-banner:hover .gold-banner-cta{gap:12px;}
.gold-banner-cta :is(iconify-icon,svg.ic){font-size:18px;}

/* ---- PLANS TERMS (6 meses / test-drive) ---- */
.plans-terms{display:flex;align-items:flex-start;gap:12px;margin-top:18px;padding:18px 20px;border-radius:18px;background:rgba(30,136,229,.07);border:1px solid rgba(30,136,229,.16);}
.plans-terms :is(iconify-icon,svg.ic){flex:none;font-size:24px;color:var(--color-primary);margin-top:1px;}
.plans-terms p{font-size:13.5px;color:#475569;line-height:1.55;}
.plans-terms strong{color:var(--color-text);font-weight:700;}
.plans-notes{margin-top:16px;}

/* ---- SETUP BANNER (premium, redesenhado) ---- */
.setup-banner{
  position:relative;overflow:hidden;margin-top:20px;border-radius:var(--radius-card);
  padding:30px 26px;color:#fff;background:linear-gradient(150deg,#1B6FC2 0%,#0E3F71 100%);
  box-shadow:0 22px 50px rgba(13,61,107,.34);display:block;
}
.setup-glow{position:absolute;width:250px;height:250px;right:-80px;top:-90px;border-radius:50%;background:radial-gradient(circle,rgba(127,192,255,.4),transparent 65%);pointer-events:none;}
.setup-top{position:relative;z-index:1;display:flex;align-items:flex-start;gap:15px;}
.setup-ico{flex:none;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);font-size:30px;color:#fff;}
.setup-headings{flex:1;}
.setup-eyebrow{display:block;font-family:var(--font-heading);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9FCBF2;margin:0;}
.setup-title{font-family:var(--font-heading);font-weight:700;font-size:19px;line-height:1.28;letter-spacing:-.01em;margin-top:6px;text-wrap:balance;}
.setup-pricerow{position:relative;z-index:1;display:inline-flex;align-items:baseline;gap:9px;margin-top:20px;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);}
.setup-price-label{font-size:12px;font-weight:600;color:#cfe4fa;}
.setup-val{display:inline;font-family:var(--font-heading);font-weight:800;font-size:24px;letter-spacing:-.01em;color:#fff;margin:0;}
.setup-desc{position:relative;z-index:1;margin-top:18px;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.84);max-width:62ch;}
.setup-list{position:relative;z-index:1;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-top:22px;}
.setup-list li{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:#fff;}
.setup-list :is(iconify-icon,svg.ic){flex:none;font-size:19px;color:#74E3A6;}

/* ---- CONTATO: two clear action buttons ---- */
.contact-eyebrow{display:inline-block;font-family:var(--font-heading);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:12px;}
.contact-actions{display:flex;flex-direction:column;gap:14px;margin-top:26px;}
.contact-btn{display:flex;align-items:center;gap:15px;width:100%;padding:15px 17px;border-radius:18px;text-align:center;transition:transform .22s var(--ease),background .22s,border-color .22s,box-shadow .22s;}
.contact-btn-ico{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;}
.contact-btn-ico :is(iconify-icon,svg.ic){font-size:30px;}
.contact-btn-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;}
.contact-btn-body strong{font-family:var(--font-body);font-weight:500;font-size:15.5px;letter-spacing:.005em;}
.contact-btn-body small{font-size:12.5px;}
.contact-btn-arrow{flex:none;font-size:22px;transition:transform .22s;}
.contact-btn:hover .contact-btn-arrow{transform:translateX(4px);}
/* primary: WhatsApp solid white */
.contact-btn-wa{background:#fff;color:var(--color-text);box-shadow:0 12px 26px rgba(0,0,0,.16);}
.contact-btn-wa:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(0,0,0,.22);}
.contact-btn-wa .contact-btn-ico{background:#1FA855;color:#fff;}
.contact-btn-wa .contact-btn-body small{color:var(--color-muted);}
.contact-btn-wa .contact-btn-arrow{color:var(--color-primary);}
/* secondary: form, glass */
.contact-btn-form{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.3);color:#fff;}
.contact-btn-form:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);transform:translateY(-2px);}
.contact-btn-form .contact-btn-ico{background:rgba(255,255,255,.16);color:#fff;}
.contact-btn-form .contact-btn-body small{color:rgba(255,255,255,.72);}
.contact-btn-form .contact-btn-arrow{color:rgba(255,255,255,.7);}

/* ---- FOOTER: aligned, balanced ---- */
.footer{padding:44px 0 38px;text-align:center;}
.foot-main{display:flex;flex-direction:column;align-items:center;gap:22px;}
.foot-id .brand-mark-foot{display:block;margin:0 0 10px;font-size:18px;color:#fff;}
.foot-name{font-size:14px;font-weight:600;color:rgba(255,255,255,.92);}
.foot-cnpj{font-size:12.5px;color:rgba(255,255,255,.5);margin-top:3px;}
.foot-contact{display:flex;flex-direction:column;gap:10px;align-items:center;}
.foot-line{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:rgba(255,255,255,.66);}
.foot-line :is(iconify-icon,svg.ic){font-size:18px;color:#7FC0FF;flex:none;}
.foot-line span{line-height:1;}
.foot-line:hover{color:#fff;}
.foot-copy{font-size:12px;color:rgba(255,255,255,.4);margin-top:26px;}

/* ====================================================================
   DESKTOP overrides for the v3 components (≥900px)
   ==================================================================== */
@media (min-width:900px){
  /* hero: remove empty cta/by rows */
  .hero-inner{grid-template-areas:"eb ph" "ti ph" "sb ph";grid-template-columns:1.05fr .95fr;padding:58px var(--px) 88px;}
  .hero-photo{grid-area:ph;justify-self:end;align-self:center;width:100%;max-width:400px;aspect-ratio:4/5;margin:0;}
  .hero .eyebrow{grid-area:eb;}
  .hero-title{grid-area:ti;}
  .hero-sub{grid-area:sb;}

  /* sobre: single centered column */
  #sobre .wrap{display:block;}
  .about-stats{max-width:none;}
  #sobre .about-quote{font-size:20px;margin-top:44px;line-height:1.5;}
  .seg-list{grid-template-columns:repeat(2,1fr);gap:0 40px;}

  /* gold banner */
  .gold-banner{padding:26px 34px;}
  .gold-banner-text strong{font-size:21px;}

  /* setup: price top-right, 4-up checklist */
  .setup-banner{padding:36px 40px;}
  .setup-top{max-width:72%;}
  .setup-pricerow{position:absolute;top:36px;right:40px;margin-top:0;}
  .setup-list{grid-template-columns:repeat(4,1fr);}

  /* contact: two buttons side by side */
  .contact-actions{flex-direction:row;}
  .contact-btn{flex:1;}

  /* footer aligned row */
  .footer .wrap{display:block;}
  .foot-main{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:32px;text-align:left;}
  .foot-contact{align-items:flex-start;}
  .foot-copy{text-align:left;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);}
}

/* ====================================================================
   ░░░░░░░░░░░░░░░░  v4 — BATCH REFINEMENTS  ░░░░░░░░░░░░░░░░
   ==================================================================== */

/* ---- HERO: more breathing room from nav + bigger mobile portrait ---- */
.hero-nav{padding-top:28px;}
.hero-inner{padding-top:30px;}
.hero .eyebrow{margin-bottom:16px;}
.hero-photo{position:relative;width:min(248px,62vw);aspect-ratio:4/5;margin:6px auto 30px;border-radius:28px;}
.hero-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to top, rgba(13,61,107,.5) 0%, rgba(13,61,107,.12) 22%, transparent 46%);pointer-events:none;}
.hero-title{margin-top:6px;}
.hero-sub{margin-top:18px;}

@media (min-width:900px){
  .hero-nav{padding-top:34px;}
  .hero-inner{padding-top:38px;padding-bottom:88px;}
  .hero-photo,
  .hero[data-hero="editorial"] .hero-photo,
  .hero[data-hero="retrato"] .hero-photo{width:100%;max-width:400px;aspect-ratio:4/5;margin:0;}
}

/* ---- QUOTE: high-contrast highlight on the punchline ---- */
.quote blockquote em{
  font-style:normal;color:#fff;font-weight:800;
  background:linear-gradient(180deg,transparent 56%, rgba(255,206,84,.6) 56%);
  padding:0 .08em;border-radius:2px;
}

/* ---- SEGMENTS: modern icon cards ---- */
.segments{margin-top:34px;}
.seg-label{display:block;font-family:var(--font-heading);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary);margin-bottom:0;}
.seg-grid{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px;counter-reset:none;}
.seg-card{
  display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:16px;border-bottom:0;
  background:var(--color-surface);border:1px solid var(--color-border);
  box-shadow:var(--shadow-sm);transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s;
}
.seg-card::before{content:none;}
.seg-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(30,136,229,.4);}
.seg-card .seg-ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:22px;color:var(--color-primary);background:rgba(30,136,229,.10);}
.seg-card span:last-child{font-family:var(--font-heading);font-weight:600;font-size:14px;letter-spacing:-.01em;color:var(--color-text);line-height:1.2;}
@media (min-width:640px){ .seg-grid{grid-template-columns:repeat(4,1fr);} }

/* ---- PLANOS: header alignment on mobile ---- */
#planos .sec-head{text-align:left;}
#planos .sec-title{text-wrap:pretty;}

/* ---- SETUP: clean mobile formatting ---- */
@media (max-width:899px){
  .setup-banner{padding:26px 22px;}
  .setup-top{flex-direction:column;gap:14px;}
  .setup-ico{width:50px;height:50px;}
  .setup-pricerow{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;margin-top:20px;padding:15px 18px;border-radius:16px;}
  .setup-price-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9FCBF2;}
  .setup-val{font-size:30px;line-height:1;}
  .setup-list{grid-template-columns:1fr;gap:11px;}
}

/* ---- CONTATO: clean light layout (no blue block) ---- */
.section-contato{background:var(--color-bg);}
.section-contato .contact-card{background:none;box-shadow:none;padding:0;border-radius:0;overflow:visible;}
.section-contato .blob{display:none;}
.contact-inner{text-align:center;max-width:660px;margin:0 auto;}
.contact-eyebrow{color:var(--color-primary);}
.contact-title{color:var(--color-text);}
.contact-sub{color:var(--color-muted);max-width:48ch;margin-left:auto;margin-right:auto;}
.contact-actions{margin-top:30px;}
.contact-btn{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);box-shadow:var(--shadow-sm);}
.contact-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.contact-btn-body{text-align:center;}
.contact-btn-body strong{color:var(--color-text);}
.contact-btn-body small{color:var(--color-muted);}
.contact-btn-arrow{color:var(--color-primary);}
.contact-btn-wa .contact-btn-ico{background:#1FA855;color:#fff;}
.contact-btn-wa .contact-btn-body small{color:var(--color-muted);}
.contact-btn-wa .contact-btn-arrow{color:#1FA855;}
.contact-btn-form{border-color:var(--color-border);}
.contact-btn-form .contact-btn-ico{background:rgba(30,136,229,.12);color:var(--color-primary);}
.contact-btn-form .contact-btn-body small{color:var(--color-muted);}
.contact-btn-form:hover{border-color:rgba(30,136,229,.4);background:var(--color-surface);}

/* ---- FOOTER: light blue brand gradient ---- */
.footer{background:linear-gradient(160deg,#EAF4FD 0%,#D2E7FB 100%);color:var(--color-text);}
.footer .brand-mark-foot{color:var(--color-text);}
.foot-name{color:var(--color-text);}
.foot-cnpj{color:var(--color-muted);}
.foot-line{color:#3F5468;}
.foot-line :is(iconify-icon,svg.ic){color:var(--color-primary);}
.foot-line:hover{color:var(--color-primary-dark);}
.foot-copy{color:#5E7488;}
@media (min-width:900px){
  .foot-copy{border-top:1px solid rgba(30,136,229,.18);}
}

/* ====================================================================
   ░░░░░░░░░░░░░░░░  v5 — MASTHEAD · BLUR CONTÍNUO · REFINOS  ░░░░░░░░░░
   ==================================================================== */

/* HERO: background flows seamlessly into the next section (#F0F3F5),
   and decorative blobs sit fully inside so nothing gets clipped. */
.hero[data-theme="claro"]{background:linear-gradient(180deg,#FFFFFF 0%,#EEF5FC 52%,#F0F3F5 100%);}
.hero .blob-a{left:-80px;top:130px;bottom:auto;width:320px;height:320px;}
.hero .blob-b{right:-80px;top:30px;width:250px;height:250px;}

/* MASTHEAD: elegant name + role lockup in the nav */
.hero-nav .brand{display:inline-flex;flex-direction:column;gap:3px;line-height:1.1;}
.brand-name{font-family:var(--font-heading);font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--color-text);}
.brand-role{font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-primary);}
.hero-inner{padding-top:40px;}

/* HERO portrait larger on mobile */
.hero-photo{width:min(290px,76vw);}
@media (min-width:900px){
  .hero-photo,
  .hero[data-hero="editorial"] .hero-photo,
  .hero[data-hero="retrato"] .hero-photo{width:100%;max-width:400px;}
  .hero-inner{grid-template-areas:"ti ph" "sb ph";padding-top:46px;}
}

/* QUOTE: clean red underline on the punchline */
.quote blockquote em{background:none;padding:0;border-radius:0;text-decoration:underline;text-decoration-color:#FF5147;text-decoration-thickness:3px;text-underline-offset:5px;}

/* SOBRE: more breathing room, segment cards never overflow the right edge */
#sobre .sec-head{margin-bottom:30px;}
.about-stats{margin-top:8px;}
.about-quote{margin:46px 0 10px;}
.segments{margin-top:50px;}
.seg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.seg-card{min-width:0;}
.seg-card span:last-child{min-width:0;hyphens:none;overflow-wrap:normal;word-break:normal;text-wrap:balance;}
@media (min-width:640px){ .seg-grid{grid-template-columns:repeat(4,minmax(0,1fr));} }
@media (min-width:900px){ #sobre .about-quote{margin-top:48px;} .segments{margin-top:54px;} }

/* PLANS: more space between price blocks */
.plans{gap:22px;}
@media (min-width:900px){ .plans{gap:30px;} }

/* SETUP: title sits clean without the icon tile */
.setup-headings{flex:1;}
@media (min-width:900px){ .setup-top{max-width:56%;} }

/* ====================================================================
   ░░░░░░░░░░░░░░  v6 — CASCATA · DIFFS AZUL · SEGMENTOS · RODAPÉ  ░░░░░
   ==================================================================== */

/* JOURNEY: on desktop the nodes light up one-by-one (0.5s apart), driven by
   JS adding .jlit sequentially. Mobile keeps the scroll-driven jpass. */
.section-jornada .jstep.jlit .jnum{background:var(--color-primary);color:#fff;transform:scale(1.14);box-shadow:0 10px 24px rgba(30,136,229,.42),0 0 0 6px var(--jornada-ring);}
@media (prefers-reduced-motion:no-preference){
  .section-jornada .jnum{transition:transform .45s var(--ease),background .45s,color .45s,box-shadow .45s;}
}

/* DIFERENCIAIS: warmer cards + blue titles (kill the pale look) */
.diffs .diff{background:linear-gradient(165deg,#FFFFFF 0%,#E8F2FD 100%);border:1px solid rgba(30,136,229,.16);box-shadow:var(--shadow-sm);}
.diffs .diff:hover{box-shadow:var(--shadow-lg);border-color:rgba(30,136,229,.34);}
.diffs .diff-title{color:var(--color-primary-dark);}

/* SEGMENTS: text centered inside each card */
.seg-card{justify-content:center;text-align:center;padding:16px 14px;min-height:62px;gap:0;}
.seg-card span:last-child{font-family:var(--font-heading);font-weight:600;font-size:14px;letter-spacing:-.01em;color:var(--color-text);line-height:1.25;text-wrap:balance;}

/* PLANS: more separation + roomy cycle terms */
.plans{gap:26px;}
@media (min-width:900px){ .plans{gap:34px;} }
.plan{padding:30px 26px;}
.plan-term{display:block;margin-top:24px;padding-top:20px;border-top:1px solid var(--color-border);}
.plan-term :is(iconify-icon,svg.ic){flex:none;font-size:20px;color:var(--color-primary);margin-top:1px;}
.plan-term span{font-size:12.5px;line-height:1.6;color:var(--color-muted);}

/* FOOTER: same gradient & colors as the quote block */
.footer{background:linear-gradient(135deg,#1E88E5 0%,#1565C0 70%,#0D3D6B 100%);color:#fff;}
.footer .brand-mark-foot{color:#fff;}
.foot-name{color:#fff;}
.foot-cnpj{color:rgba(255,255,255,.72);}
.foot-line{color:rgba(255,255,255,.86);}
.foot-line :is(iconify-icon,svg.ic){color:#BFE0FF;}
.foot-line:hover{color:#fff;}
.foot-copy{color:rgba(255,255,255,.6);}
@media (min-width:900px){ .foot-copy{border-top:1px solid rgba(255,255,255,.16);} }

/* ====================================================================
   ░░ v7 — Instagram · diferenciais vivos · destaque azul ░░
   ==================================================================== */

/* DIFERENCIAIS: livelier section + white cards with a blue accent bar */
#diferenciais{background:linear-gradient(180deg,#E9F3FD 0%,#D7E8FB 100%);}
.diffs .diff{position:relative;overflow:hidden;background:#fff;border:1px solid rgba(30,136,229,.16);box-shadow:0 14px 32px rgba(30,136,229,.15);}
.diffs .diff::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--color-primary),var(--color-primary-dark));}
.diffs .diff:hover{box-shadow:0 20px 46px rgba(30,136,229,.24);border-color:rgba(30,136,229,.34);}
.diffs .diff-title{color:var(--color-primary-dark);}

/* ABOUT quote: bold vibrant-blue highlight */
.about-quote .hl-blue{color:#1A8CFF;font-weight:800;}

/* CONTACT: order formulário, whatsapp, instagram */
.contact-btn-form{order:1;}
.contact-btn-wa{order:2;}
.contact-btn-ig{order:3;}
/* desktop: centered clusters with a fixed body width so every icon lines up,
   and more breathing room so the block sits between the section above and the footer */
@media (min-width:900px){
  .contact-btn{justify-content:center;}
  .contact-btn-body{flex:none;width:280px;}
  .section-contato{padding-top:64px;padding-bottom:132px;}
}

/* ====================================================================
   ░░ v9 — brilho no card "Comigo" ao entrar em vista ░░
   ==================================================================== */
.compare-good{position:relative;overflow:hidden;}
.compare-good::after{
  content:"";position:absolute;top:-60%;left:-80%;width:55%;height:220%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  transform:skewX(-18deg);pointer-events:none;opacity:0;z-index:2;
}
@media (prefers-reduced-motion:no-preference){
  .compare-good.shine::after{animation:comigo-shine 1.25s cubic-bezier(.22,.61,.36,1) 1;}
  .compare-good.shine{animation:comigo-glow 1.5s ease 1;}
}
@keyframes comigo-shine{
  0%{left:-80%;opacity:0;}
  12%{opacity:1;}
  100%{left:135%;opacity:0;}
}
@keyframes comigo-glow{
  0%,100%{box-shadow:var(--shadow-md);}
  45%{box-shadow:0 0 0 3px rgba(127,192,255,.45),0 18px 44px rgba(30,136,229,.42);}
}

/* same shine on the "Setup estratégico" block */
.setup-banner::after{
  content:"";position:absolute;top:-60%;left:-80%;width:55%;height:220%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.45) 50%,transparent 100%);
  transform:skewX(-18deg);pointer-events:none;opacity:0;z-index:2;
}
@media (prefers-reduced-motion:no-preference){
  .setup-banner.shine::after{animation:comigo-shine 1.25s cubic-bezier(.22,.61,.36,1) 1;}
  .setup-banner.shine{animation:setup-glow 1.5s ease 1;}
}
@keyframes setup-glow{
  0%,100%{box-shadow:0 22px 50px rgba(13,61,107,.34);}
  45%{box-shadow:0 0 0 3px rgba(127,192,255,.4),0 24px 56px rgba(13,61,107,.5);}
}

/* setup: frosted-glass (Apple-like) — translucent panel + backdrop blur over an
   ambient colored glow placed behind it, so the glass actually reads as glass */
#planos{position:relative;}
#planos::before{
  content:"";position:absolute;left:4%;right:4%;top:42%;height:52%;z-index:0;pointer-events:none;
  background:
    radial-gradient(56% 90% at 30% 40%, rgba(30,136,229,.50), transparent 70%),
    radial-gradient(54% 90% at 78% 62%, rgba(124,92,232,.40), transparent 72%);
  filter:blur(54px);
}
.setup-banner{
  background:linear-gradient(150deg, rgba(26,98,175,.74) 0%, rgba(10,44,84,.82) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 22px 50px rgba(13,61,107,.34);
}

/* remove the blue accent bar on the +8 / +50 stat cards */
.stat::before{content:none;}

/* CONTACT: Instagram action button */
.contact-btn-ig .contact-btn-ico{background:linear-gradient(135deg,#F58529 0%,#DD2A7B 55%,#8134AF 100%);color:#fff;}
.contact-btn-ig .contact-btn-ico :is(iconify-icon,svg.ic){font-size:32px;}
.contact-btn-ig .contact-btn-arrow{color:#DD2A7B;}
@media (min-width:900px){
  .contact-actions{flex-direction:column;flex-wrap:nowrap;gap:12px;max-width:540px;margin:30px auto 0;}
  .contact-btn{flex:none;width:100%;padding:15px 24px;}
  .contact-btn-body{align-items:center;}
  .contact-btn-body strong{white-space:nowrap;font-family:var(--font-body);font-weight:500;}
}

/* ====================================================================
   ░░ v8 — mais respiro na seção "Sem papo de vendedor" ░░
   ==================================================================== */
#sobre .sec-head{margin-bottom:40px;}
.about-stats{margin-top:10px;}
.about-quote{margin:64px 0 12px;}
.segments{margin-top:68px;}
@media (min-width:900px){
  #sobre .about-quote{margin-top:72px;}
  .segments{margin-top:104px;}
}

/* ====================================================================
   ░░ v10 — HERO TELA CHEIA · SCROLL SUAVE · PLANOS NO TABLET ░░
   ==================================================================== */

/* (2) Rolagem suave nativa para links âncora (#contato etc.) — o JS também
   trata, isto é a rede de segurança caso o JS falhe em produção. */
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

/* (1) A primeira dobra ocupa a tela inteira: o usuário vê só o HERO e precisa
   rolar para revelar o resto (que entra com fade suave via .reveal). */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;}
.hero-nav,.hero-inner{width:100%;}
.hero-inner{flex:1 1 auto;justify-content:center;padding-bottom:64px;}

/* seta indicadora de rolagem, centralizada na base do hero */
.hero-scroll{
  position:absolute;left:50%;bottom:20px;z-index:3;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  color:var(--color-primary);background:rgba(255,255,255,.7);
  border:1px solid rgba(30,136,229,.28);box-shadow:var(--shadow-sm);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transform:translateX(-50%);
}
.hero-scroll svg{display:block;}
@media (prefers-reduced-motion:no-preference){
  .hero-scroll{animation:heroBob 1.8s var(--ease) infinite;}
}
@keyframes heroBob{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(6px);}
}
@media (min-width:900px){
  .hero-inner{padding-bottom:96px;}
  .hero-scroll{bottom:26px;}
}

/* (4) PLANOS no tablet: uma coluna, todos com a MESMA largura do "Mais
   escolhido" (antes o popular ocupava a linha inteira e ficava diferente). */
@media (min-width:560px) and (max-width:899px){
  .plans{grid-template-columns:1fr;}
  .plan-pop{grid-column:auto;transform:none;}
}

/* ====================================================================
   ░░ v11 — HERO: título+texto no desktop · primeira dobra no tablet ░░
   ==================================================================== */

/* Desktop: título e parágrafo mais próximos (menos respiro entre as linhas) */
@media (min-width:900px){
  .hero-inner{gap:0 64px;align-content:center;grid-template-rows:min-content min-content;}
  .hero-title{margin-bottom:0;align-self:end;}
  .hero-sub{margin-top:12px;align-self:start;}
  .hero-photo{grid-row:1 / span 2;align-self:center;}
}

/* Tablet (560–899): primeira dobra equilibrada — tudo centralizado, foto
   maior, largura limitada e título/texto alinhados (antes a foto ficava
   centralizada e o texto à esquerda, com espaçamento excessivo). */
@media (min-width:560px) and (max-width:899px){
  .hero-inner{align-items:center;text-align:center;max-width:640px;margin-left:auto;margin-right:auto;padding-bottom:72px;}
  .hero-photo{width:min(300px,42vw);margin:0 auto 30px;}
  .hero-title{font-size:clamp(38px,5.6vw,48px);line-height:1.1;}
  .hero-sub{margin:18px auto 0;max-width:52ch;}
}

/* ====================================================================
   ░░ v12 — HERO: foto do mobile 15% menor e mais quadrada ░░
   ==

/* ====================================================================
   ░░ v13/v14 — Bloco Instagram + rodapé contínuos, sem bandas brancas ░░
   tudo via override, sem tocar no plugin
   ==================================================================== */
/* (a) IG + rodapé dividem UM único degradê contínuo (sem quebra) */
.ending{background:linear-gradient(168deg,#1E88E5 0%,#1565C0 60%,#0D3D6B 100%);}
.ending .section-instagram{padding:0;background:none;}
.ending .section-instagram .ig-section{background:none;}
.ending .footer{background:none;}

/* (b) título do bloco IG na MESMA fonte do H1 da primeira dobra */
.section-instagram .ig-copy h2{font-family:var(--font-heading);font-weight:800;letter-spacing:-.02em;line-height:1.08;}
.section-instagram .ig-copy h2 em{color:#BFE0FF;}

/* (c) miniaturas do feed no formato vertical do Instagram (não quadradas) */
.section-instagram .ig-cell{aspect-ratio:3/4;}

/* (d) desktop: elementos do bloco mais próximos e centralizados */
@media (min-width:900px){
  .ending .ig-section{
    max-width:1040px;margin:0 auto;gap:56px;padding:92px 64px;
    grid-template-columns:minmax(0,1fr) minmax(0,360px);align-items:center;
  }
  .section-instagram .ig-copy{max-width:520px;}
  .section-instagram .ig-copy h2{margin-bottom:26px;}
}


/* ====================================================================
   ░░ v15 — Lote de refinos (IG mock · contato · setup · botão form) ░░
   tudo via override; plugin intacto
   ==================================================================== */

/* (1) IG MOCK realista e delicado — perfil cabe dentro do telefone
   (antes as estatísticas estouravam a margem direita) */
.section-instagram .ig-prof{gap:12px;padding:14px 14px 6px;}
.section-instagram .ig-avatar{width:58px;height:58px;}
.section-instagram .ig-avatar > div{font-size:23px;}
.section-instagram .ig-stats{gap:12px;}
.section-instagram .ig-stats b{font-size:14px;}
.section-instagram .ig-stats span{font-size:10.5px;}
@media (max-width:430px){
  .section-instagram .ig-phone{width:268px;height:546px;}
}

/* (2) CONTATO — "Pronto..." com o MESMO respiro do topo do bloco IG.
   #planos e .section-contato têm o mesmo fundo, então fundir é invisível;
   o respiro acima do título passa a ser igual ao padding-top do bloco IG. */
#planos{padding-bottom:0;}
.section-contato{padding-top:64px;}
@media (max-width:430px){ .section-contato{padding-top:48px;} }
@media (min-width:900px){ .section-contato{padding-top:92px;} }

/* (3) SETUP estratégico — fundo claro igual ao bloco "Comigo" */
#planos::before{display:none;}
.setup-banner{
  background:linear-gradient(160deg,var(--color-primary),var(--color-primary-dark));
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--shadow-md);
}

/* (4) BOTÃO do formulário — sem ícone, texto centralizado, reflexo a cada 2s */
.section-contato .contact-btn-form{position:relative;overflow:hidden;justify-content:center;}
.section-contato .contact-btn-form .contact-btn-ico{display:none;}
.section-contato .contact-btn-form .contact-btn-body{flex:none;width:auto;align-items:center;text-align:center;}
.section-contato .contact-btn-form::after{
  content:"";position:absolute;top:-60%;left:-70%;width:45%;height:220%;
  background:linear-gradient(100deg,transparent 0%,rgba(30,136,229,.20) 50%,transparent 100%);
  transform:skewX(-18deg);pointer-events:none;z-index:2;
}
@media (prefers-reduced-motion:no-preference){
  .section-contato .contact-btn-form::after{animation:formSheen 2s ease-in-out infinite;}
}
@keyframes formSheen{
  0%{left:-70%;opacity:0;}
  8%{opacity:1;}
  45%{left:130%;opacity:1;}
  46%,100%{left:130%;opacity:0;}
}

/* (5) Corrige a QUEBRA do degradê: o brilho radial do plugin existia só na
   área do IG e criava um degrau de tom na borda com o rodapé. Removido para
   o gradiente único do .ending fluir contínuo do IG ao rodapé. */
.ending .section-instagram .ig-section::before{content:none;}


/* ====================================================================
   ░░ v16 — Divisor IG/rodapé · sombra do dourado · botões contato ░░
   ==================================================================== */

/* (1) Linha branca fina dividindo o bloco IG do rodapé */
.ending .section-instagram{border-bottom:1px solid rgba(255,255,255,.5);}

/* (2) Sombra do bloco dourado não é mais cortada/sobreposta pela seção de
   baixo: #planos deixa a sombra transbordar e pinta acima do contato */
#planos{overflow:visible;z-index:2;}
.gold-banner{position:relative;z-index:1;}

/* (3) Botão "Contratar Tráfego Pago": efeito dourado + flutuação suave
   (mesmo flow dos outros elementos animados da página) */
.section-contato .contact-btn-form{
  background:linear-gradient(135deg,#C9981E 0%,#E8C25C 46%,#B5821A 100%);
  border:none;
  box-shadow:0 16px 38px rgba(176,128,20,.32);
}
.section-contato .contact-btn-form .contact-btn-body strong{color:#2A1E04;}
.section-contato .contact-btn-form::after{
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
}
@media (prefers-reduced-motion:no-preference){
  .section-contato .contact-btn-form{animation:goldFloat 3.6s var(--ease) infinite;}
}
@keyframes goldFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}

/* (4) Os dois botões (formulário + WhatsApp) mais próximos do design Apple:
   formato pill, tipografia limpa, sombra sutil */
.section-contato .contact-btn{
  border-radius:980px;
  padding:16px 26px;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}
.section-contato .contact-btn-body strong{font-weight:600;letter-spacing:.01em;}
.section-contato .contact-btn-wa{border:none;}
.section-contato .contact-btn-wa .contact-btn-ico{border-radius:50%;}


/* ====================================================================
   ░░ v17 — Grid IG: células 3:4 não esmagadas pela altura fixa ░░
   align-content:start faz cada linha respeitar a altura 3:4 das células
   (em vez de dividir a altura do telefone em linhas baixas); o feed rola.
   ==================================================================== */
.section-instagram .ig-grid{align-content:start;grid-auto-rows:max-content;}


/* ====================================================================
   ░░ v18 — Dourado sem sombra · botão form branco c/ brilho dourado ·
            linha do rodapé mais grossa ░░
   ==================================================================== */

/* (1) Remove a sombra externa do bloco dourado "Vai investir acima de R$10.000?" */
.gold-banner, .gold-banner:hover{box-shadow:none;}

/* (2) Botão "Contratar Tráfego Pago": branco com brilho (reflexo) dourado */
.section-contato .contact-btn-form{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}
.section-contato .contact-btn-form .contact-btn-body strong{color:var(--color-text);}
.section-contato .contact-btn-form::after{
  background:linear-gradient(100deg,transparent 0%,rgba(201,152,30,.55) 45%,rgba(232,194,92,.70) 55%,transparent 100%);
}

/* (3) Linha branca do rodapé um pouco mais grossa */
.ending .section-instagram{border-bottom:2px solid rgba(255,255,255,.6);}


/* ====================================================================
   ░░ v19 — Hero: subtítulo entra 1s após a página aparecer ░░
   (o hero é revelado no load pelo site.js; aqui só atrasamos o subtítulo)
   ==================================================================== */
@media (prefers-reduced-motion:no-preference){
  body.motion .hero-sub[data-d="3"]{transition-delay:1s;}
}


/* ====================================================================
   ░░ v20 — Botões mais refinados · reflexo elegante (não dourado) ░░
   ==================================================================== */

/* (1) Formato menos "infantil": cantos retos elegantes em vez de pill total */
.section-contato .contact-btn{border-radius:12px;}
.section-contato .contact-btn-wa .contact-btn-ico{border-radius:12px;}

/* (2) Reflexo do botão "Contratar Tráfego Pago": glint azul-acetinado (on-brand),
   substitui o dourado por algo mais sóbrio e elegante */
.section-contato .contact-btn-form::after{
  background:linear-gradient(100deg,transparent 0%,rgba(120,168,224,.50) 50%,transparent 100%);
}


/* ====================================================================
   ░░ v21 — "Já entreguei resultado para": dobro do espaçamento (desktop) ░░
   #sobre .segments era 28px no desktop → 56px. Mobile inalterado.
   ==================================================================== */
@media (min-width:900px){
  #sobre .segments{margin-top:88px;}
}


/* ====================================================================
   ░░ v22 — Reflexo do "Contratar Tráfego Pago": brilho de espelho ░░
   troca o glint azul por um glare de vidro claro (como o do celular)
   ==================================================================== */
.section-contato .contact-btn-form::after{
  width:60%;
  background:linear-gradient(105deg,
    transparent 0%,
    rgba(255,255,255,.15) 38%,
    rgba(255,255,255,.85) 50%,
    rgba(255,255,255,.15) 62%,
    transparent 100%);
}


/* ====================================================================
   ░░ v23 — Reflexo do botão no MESMO gingado do celular (7s, com pausa) ░░
   espelha o ig-glare do plugin: varre no início do ciclo e descansa.
   ==================================================================== */
@media (prefers-reduced-motion:no-preference){
  .section-contato .contact-btn-form::after{
    animation:formSheen 7s ease-in-out infinite;
  }
}
@keyframes formSheen{
  0%{left:-50%;}
  45%{left:130%;}
  100%{left:130%;}
}


/* ====================================================================
   ░░ v24 — Texto dos botões de contato centralizado no botão inteiro ░░
   ícone fica ancorado à esquerda (absoluto) e o texto centraliza na
   largura total — não é mais empurrado pelo ícone.
   ==================================================================== */
.section-contato .contact-btn{position:relative;justify-content:center;}
.section-contato .contact-btn .contact-btn-ico{position:absolute;left:17px;top:50%;transform:translateY(-50%);}
.section-contato .contact-btn .contact-btn-body{flex:none;width:auto;align-items:center;text-align:center;}
.section-contato .contact-btn .contact-btn-arrow{position:absolute;right:17px;top:50%;transform:translateY(-50%);}
.section-contato .contact-btn:hover .contact-btn-arrow{transform:translateY(-50%) translateX(4px);}


/* ====================================================================
   ░░ v25 — IG copy: botão WhatsApp abaixo do "Seguir no Instagram" ░░
   mesmo estilo do ig-cta; ícone verde; empilhados.
   ==================================================================== */
.section-instagram .ig-copy .ig-cta{display:inline-flex;}
.section-instagram .ig-copy{display:flex;flex-direction:column;align-items:flex-start;}
.section-instagram .ig-copy .ig-cta + .ig-cta{margin-top:12px;}
.section-instagram .ig-cta-wa .ig-ico-wa{background:#1FA855;}
.section-instagram .ig-cta-wa .ig-ico-wa svg{width:18px;height:18px;}
@media (max-width:900px){
  .section-instagram .ig-copy{align-items:center;}
}


/* ====================================================================
   ░░ v26 — Mão tocando o botão · CTAs IG/WhatsApp iguais · phone central ░░
   ==================================================================== */

/* (1) Mão animada tocando "Contratar Tráfego Pago" */
.cta-tap{position:relative;display:block;}
.tap-hand{
  position:absolute;right:16%;bottom:-12px;width:46px;height:46px;z-index:5;
  pointer-events:none;transform-origin:60% 0;
}
.tap-hand-svg{width:100%;height:100%;display:block;
  fill:#F2C29A;stroke:#C98E63;stroke-width:.5;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.28));}
.tap-ripple{
  position:absolute;top:-2px;left:50%;width:34px;height:34px;margin-left:-17px;
  border-radius:50%;background:rgba(30,136,229,.35);transform:scale(0);opacity:0;
}
@media (prefers-reduced-motion:no-preference){
  .tap-hand{animation:handTap 3s ease-in-out infinite;}
  .tap-ripple{animation:tapRipple 3s ease-in-out infinite;}
}
@keyframes handTap{
  0%,12%{transform:translateY(0) scale(1);}
  24%{transform:translateY(-7px) scale(1.03);}
  34%{transform:translateY(3px) scale(.94);}
  46%,100%{transform:translateY(0) scale(1);}
}
@keyframes tapRipple{
  0%,30%{transform:scale(0);opacity:0;}
  35%{transform:scale(.4);opacity:.55;}
  60%{transform:scale(2.6);opacity:0;}
  100%{transform:scale(2.6);opacity:0;}
}

/* (2) Botões IG e WhatsApp sempre do mesmo tamanho (largura igual) */
.section-instagram .ig-cta-stack{display:inline-grid;gap:12px;justify-items:stretch;}
.section-instagram .ig-cta-stack .ig-cta{width:100%;justify-content:center;margin-top:0;}

/* (3) Visualização vertical: celular sempre centralizado */
@media (max-width:900px){
  .section-instagram .ig-section{justify-items:center;}
  .section-instagram .ig-stage{justify-content:center;width:100%;margin:0 auto;}
  .section-instagram .ig-copy{align-items:center;}
  .section-instagram .ig-cta-stack{justify-self:center;}
}


/* ====================================================================
   ░░ v27 — Ponteiro do mouse (Windows) entra da direita e clica ·
            botão "Contratar Tráfego Pago": raio igual ao IG e menos largo ░░
   ==================================================================== */

/* (1) Cursor: estilo ponteiro branco com contorno preto */
.tap-hand{right:auto;bottom:auto;top:50%;left:50%;width:30px;height:30px;margin:-3px 0 0 0;transform-origin:0 0;}
.tap-hand-svg{fill:#fff;stroke:#1c1c1c;stroke-width:1.4;stroke-linejoin:round;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));}
.tap-ripple{top:0;left:0;margin:0;width:30px;height:30px;background:rgba(30,136,229,.4);}
@media (prefers-reduced-motion:no-preference){
  .tap-hand{animation:cursorGlide 3.6s ease-in-out infinite;}
  .tap-ripple{animation:cursorClickRipple 3.6s ease-in-out infinite;}
}
@keyframes cursorGlide{
  0%{transform:translate(150px,-2px);opacity:0;}
  9%{opacity:1;}
  42%{transform:translate(0,-2px);opacity:1;}
  50%{transform:translate(0,5px);}
  58%{transform:translate(0,-2px);}
  82%{transform:translate(0,-2px);opacity:1;}
  100%{transform:translate(-42px,-14px);opacity:0;}
}
@keyframes cursorClickRipple{
  0%,46%{transform:scale(0);opacity:0;}
  52%{transform:scale(.5);opacity:.5;}
  74%{transform:scale(2.4);opacity:0;}
  100%{transform:scale(2.4);opacity:0;}
}

/* (2) Botão "Contratar Tráfego Pago": mesmo arredondamento do "Seguir no
   Instagram" (18px) e largura ajustada ao conteúdo (não tão largo) */
.section-contato .contact-btn-form{border-radius:18px;width:auto;min-width:0;}
.contact-actions .cta-tap{display:flex;justify-content:center;}
@media (min-width:900px){
  .section-contato .contact-btn-form{padding-left:40px;padding-right:40px;}
}


/* ====================================================================
   ░░ v28 — Cursor à prova de cache: tamanho fixo (nunca 300px padrão) ░░
   ==================================================================== */
.tap-hand{width:30px !important;height:30px !important;overflow:visible;}
.tap-hand-svg{width:30px !important;height:30px !important;max-width:30px;max-height:30px;}
.tap-ripple{width:30px !important;height:30px !important;}


/* ====================================================================
   ░░ v29 — Botão WhatsApp do IG: verde oficial + glifo alinhado ░░
   ==================================================================== */
.section-instagram .ig-cta-wa .ig-ico-wa{background:#25D366;display:flex;align-items:center;justify-content:center;}
.section-instagram .ig-cta-wa .ig-ico-wa svg{width:16px;height:16px;display:block;}


/* ====================================================================
   ░░ v30 — Mobile: fundo do bloco do celular tão claro quanto o desktop ░░
   no mobile a seção fica bem mais alta, então o gradiente alcançava o
   azul-marinho escuro (#0D3D6B) na altura do telefone. Aqui mantemos
   tons claros/médios (sem o navy profundo) para igualar ao desktop.
   ==================================================================== */
@media (max-width:900px){
  .ending{background:linear-gradient(180deg,#1E88E5 0%,#1B72C6 58%,#155FB8 100%);}
}


/* ====================================================================
   ░░ v31 — CTAs IG/WhatsApp: alinhamento e respiros consistentes ░░
   ícone+texto centralizados de forma idêntica nos dois; seta ancorada
   à direita (não estica o conteúdo até a borda); mais respiro vertical.
   ==================================================================== */
.section-instagram .ig-cta-stack .ig-cta{
  position:relative;justify-content:center;gap:12px;padding:17px 48px;
}
.section-instagram .ig-cta-stack .ig-cta .ig-arrow{
  position:absolute;right:20px;top:50%;transform:translateY(-50%);margin:0;opacity:.5;
}
.section-instagram .ig-cta-stack .ig-cta:hover .ig-arrow{transform:translateY(-50%) translateX(3px);}


/* ====================================================================
   ░░ v32 — Bloco +8 / +50: margens iguais acima e abaixo ░░
   ==================================================================== */
#sobre .about-stats{margin-top:64px;margin-bottom:64px;}
#sobre .about-quote{margin-top:0;}


/* ====================================================================
   ░░ v33 — Espaçamentos da 1ª dobra · botão contato centralizado ·
            correção do "risco" no mobile (seam do #planos) ░░
   ==================================================================== */

/* (A) 1ª dobra: dobro do espaço entre o H1 e o subtítulo */
.hero-sub{margin-top:24px;}
@media (max-width:600px){ .hero-sub{margin-top:36px;} }

/* (B) 1ª dobra: dobro do respiro acima do nome (topo da nav) */
.hero-nav{padding-top:104px;}
@media (max-width:600px){ .hero-nav{padding-top:70px;} }

/* (C) Botão "Contratar Tráfego Pago" centralizado: respiro acima = abaixo */
.section-contato{padding-bottom:64px;}
@media (max-width:430px){ .section-contato{padding-bottom:48px;} }
@media (min-width:900px){ .section-contato{padding-bottom:92px;} }

/* (D) Correção do risco/linha logo após o bloco dourado no mobile:
   a sombra do dourado já foi removida (v18), então o overflow:visible do
   #planos só fazia a margem do banner escapar e desenhar um traço no
   encontro com a seção de baixo. Voltando a conter a seção. */
#planos{overflow:hidden;}
.gold-banner{margin-bottom:0;}


/* ====================================================================
   ░░ v34 — Botão "Contratar Tráfego Pago" exatamente no meio entre o
            fim do bloco dourado e o bloco azul (IG) ░░
   compensa os ~50px extra acima (margem do cluster) deslocando o padding
   ==================================================================== */
.section-contato{padding-top:39px;padding-bottom:89px;}
@media (max-width:430px){ .section-contato{padding-top:23px;padding-bottom:73px;} }
@media (min-width:900px){ .section-contato{padding-top:67px;padding-bottom:117px;} }


/* ====================================================================
   ░░ v35 — Replicar o layout desktop (texto | celular lado a lado) do
            bloco Instagram também no vertical e no mobile ░░
   ==================================================================== */
/* Tablet vertical (601–900px): texto | celular lado a lado, celular em
   tamanho natural (cabe). No MOBILE (<601) mantemos o layout empilhado,
   pois reduzir o mock quebra as proporções internas no iOS. */
@media (min-width:601px) and (max-width:900px){
  .ending .ig-section{
    grid-template-columns:minmax(0,1fr) auto;
    gap:32px;align-items:center;justify-items:stretch;
    text-align:left;padding:64px 32px;max-width:760px;margin:0 auto;
  }
  .section-instagram .ig-copy{max-width:none;margin:0;text-align:left;align-items:flex-start;}
  .section-instagram .ig-copy h2{text-align:left;margin-bottom:22px;}
  .section-instagram .ig-cta-stack{justify-self:start;justify-items:start;width:100%;max-width:300px;}
  .section-instagram .ig-stage{justify-content:flex-end;width:auto;margin:0;}
}


/* ====================================================================
   ░░ v36 — Foto da 1ª dobra: flutuação suave (estilo o do celular), lenta ░░
   anima só a <img> (o <figure> mantém o reveal de entrada); o scale base
   1.08 dá folga para o movimento não revelar as bordas da moldura
   ==================================================================== */
.hero-photo img{transform-origin:50% 45%;will-change:transform;}
@media (prefers-reduced-motion:no-preference){
  .hero-photo img{animation:heroFloat 10s ease-in-out infinite;}
}
@keyframes heroFloat{
  0%{transform:scale(1.08) translateY(0) rotate(0deg);}
  50%{transform:scale(1.08) translateY(-3.2%) rotate(-1.4deg);}
  100%{transform:scale(1.08) translateY(0) rotate(0deg);}
}

/* ====================================================================
   ░░ v39 — Mobile: o mockup flutua igual ao desktop/tablet, mantendo a
            escala (escala + float no MESMO transform, sem conflito) ░░
   ==================================================================== */
@media (max-width:600px) and (prefers-reduced-motion:no-preference){
  .section-instagram .ig-phone{animation:igPhoneFloatMobile 7s ease-in-out infinite;}
}
@keyframes igPhoneFloatMobile{
  0%{transform:scale(.56) rotateY(-13deg) rotateX(5deg) translateY(0);}
  50%{transform:scale(.56) rotateY(-7deg) rotateX(2deg) translateY(-14px);}
  100%{transform:scale(.56) rotateY(-13deg) rotateX(5deg) translateY(0);}
}


/* ====================================================================
   ░░ v37 — Correção definitiva do "risco" após o bloco dourado ░░
   linha fina = seam subpixel entre #planos e a seção de contato (mesma
   cor de fundo) em telas retina @3x. Sobrepor 1px elimina a costura.
   ==================================================================== */
.section-contato{margin-top:-1px;}
#planos{box-shadow:none;border:0;}
.section-contato{box-shadow:none;border:0;}


/* ====================================================================
   ░░ v38 — Mobile: layout lado-a-lado (igual desktop/tablet) com o
            mockup na proporção CORRETA via transform:scale ░░
   (zoom quebrava as proporções internas no iOS; transform escala o
   celular inteiro — moldura + conteúdo — de forma fiel)
   ==================================================================== */
@media (max-width:600px){
  .ending .ig-section{
    grid-template-columns:minmax(0,1fr) 150px;
    gap:14px;align-items:center;justify-items:stretch;
    text-align:left;padding:44px 16px;max-width:none;margin:0;
  }
  .section-instagram .ig-copy{max-width:none;margin:0;text-align:left;align-items:flex-start;}
  .section-instagram .ig-copy h2{text-align:left;font-size:18px;line-height:1.14;margin-bottom:14px;}

  /* coluna do celular: 150×306 (= 268×546 * .56), o phone é escalado
     dentro dela; absoluto para não inflar a coluna do grid */
  .section-instagram .ig-stage{position:relative;width:150px;height:306px;margin:0;overflow:visible;justify-content:flex-start;}
  .section-instagram .ig-phone{
    position:absolute;top:0;left:0;
    width:268px;height:546px;
    transform:scale(.56);transform-origin:top left;
  }

  /* botões do bloco IG na coluna estreita: 1 linha, iguais */
  .section-instagram .ig-cta-stack{justify-self:start;justify-items:start;width:100%;max-width:none;}
  .section-instagram .ig-cta-stack .ig-cta{padding:13px 12px;font-size:13px;gap:7px;white-space:nowrap;}
  .section-instagram .ig-cta-stack .ig-cta .ig-arrow{display:none;}
  .section-instagram .ig-cta-stack .ig-ico{width:22px;height:22px;}
}


/* ====================================================================
   ░░ v41 — Fundo IG+rodapé 100% compartilhado · celular 25% menor ░░
   - O degradê já é ÚNICO (pintado só no .ending; IG, stage e rodapé são
     transparentes). Remove-se a última linha interna (borda do copyright)
     para não restar nenhuma divisão visível entre os dois.
   - Desktop e tablet horizontal (≥900px): mockup 25% menor (escala fiel,
     conteúdo interno intacto, flutuação preservada).
   ==================================================================== */
.ending .foot-copy{border-top:0;}

@media (min-width:900px){
  .ending .ig-section{grid-template-columns:minmax(0,1fr) minmax(0,240px);}
  .section-instagram .ig-stage{position:relative;width:225px;height:459px;margin:0 auto;justify-content:flex-start;overflow:visible;}
  .section-instagram .ig-phone{
    position:absolute;top:0;left:0;width:300px;height:612px;
    transform:scale(.75);transform-origin:top left;
  }
}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .section-instagram .ig-phone{animation:igPhoneFloatD 7s ease-in-out infinite;}
}
@keyframes igPhoneFloatD{
  0%{transform:scale(.75) rotateY(-13deg) rotateX(5deg) translateY(0);}
  50%{transform:scale(.75) rotateY(-7deg) rotateX(2deg) translateY(-14px);}
  100%{transform:scale(.75) rotateY(-13deg) rotateX(5deg) translateY(0);}
}


/* ====================================================================
   ░░ v42 — Sombra do mockup que não "corta" o fundo ░░
   A sombra original (rgba(0,0,0,.55), blur 90px) criava uma poça escura
   sob o celular que, perto da junção IG/rodapé, parecia uma divisão.
   Trocada por uma sombra suave e AZULADA (tom do degradê) que se dissolve
   no fundo — mantém o relevo do celular sem criar banda escura.
   ==================================================================== */
.section-instagram .ig-phone{
  box-shadow:0 26px 60px rgba(4,28,58,.26),
             0 0 0 2px rgba(255,255,255,.05) inset;
}

/* ====================================================================
   ░░ v43 — Risco no webview do Instagram + sombra do celular ░░
   (A) RAIZ do "risco" na base do bloco dourado: #planos e #contato são
   ambos #F0F3F5, mas o fundo do BODY era #0C1622 (escuro). No Chrome as
   seções encostam perfeitas; no webview do Instagram um arredondamento de
   subpixel deixa o body escuro vazar como um traço. Fundo do body claro =
   nenhum traço escuro possível entre seções claras, em qualquer navegador.
   ==================================================================== */
body{background:var(--color-bg);}
#planos,.section-contato{background:var(--color-bg);}
.section-contato{margin-top:-1px;}
.gold-banner{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;}

/* (B) Sombra do celular: ~1cm a mais de degradê abaixo do mockup, para a
   sombra (que se movimenta) não encostar/conflitar com o rodapé. */
@media (min-width:900px){ .ending .ig-section{padding-bottom:130px;} }
@media (min-width:601px) and (max-width:900px){ .ending .ig-section{padding-bottom:102px;} }
@media (max-width:600px){ .ending .ig-section{padding-bottom:82px;} }


/* ====================================================================
   ░░ v44 — Risco do bloco dourado: margem de segurança definitiva ░░
   Causa: o dourado era o último filho de #planos com padding-bottom:0 e
   margin-bottom:0 → sua borda inferior ficava RENTE ao limite com #contato,
   e o overflow:hidden de #planos cortava a sombra do dourado exatamente
   nessa borda (aresta dura → traço no webview do Instagram).
   Correção: folga real (>=24px) abaixo do dourado, sombra não é mais
   cortada, e o limite entre seções fica longe do botão, sobre fundo igual.
   ==================================================================== */
#planos{overflow:visible;padding-bottom:40px;}
.gold-banner{margin-bottom:8px;}
@media (max-width:600px){ #planos{padding-bottom:32px;} }


/* ====================================================================
   ░░ v45 — Risco entre #planos e #contato: superfície ÚNICA contínua ░░
   Causa real: .phone-screen (wrapper) é branco; #planos e #contato
   são duas seções #F0F3F5 EMPILHADAS sobre esse branco. No webview do
   Instagram um arredondamento de subpixel deixa o branco do wrapper vazar
   entre elas = traço (no Chrome o anti-alias disfarça).
   Correção: as duas seções ficam TRANSPARENTES e o #F0F3F5 é pintado num
   único elemento contínuo (.phone-screen) — não há duas superfícies se
   encontrando, então não há costura possível em nenhum navegador.
   ==================================================================== */
.phone-screen{background:var(--color-bg);}
#planos{background:transparent;}
#contato.section-contato{background:transparent;margin-top:0;}
.gold-banner{transform:none;}


/* ====================================================================
   ░░ v40 — Ajustes tablet/celular ░░
   (1) Comparativo (tablet vertical): blocos do mesmo tamanho e tópicos
       opostos alinhados linha a linha
   (2/3) Une rodapé + bloco IG: remove o divisor branco para o degradê
       ficar contínuo (sem a "linha clara" à direita do celular)
   (5) Mais margem entre o topo do mockup e o bloco superior (tablet/cel)
   ==================================================================== */

/* (2/3) Fundo contínuo IG + rodapé — sem divisor */
.ending .section-instagram{border-bottom:0;}

/* (1) Comparativo alinhado no tablet vertical (e tablet pequeno em 2 col) */
@media (min-width:560px) and (max-width:899px){
  .compare{grid-template-columns:1fr 1fr;align-items:stretch;}
  .compare-col{display:flex;flex-direction:column;}
  /* cabeçalhos com a mesma altura (2 linhas) → as listas começam alinhadas */
  .compare-head{min-height:46px;align-items:flex-start;margin-bottom:18px;}
  /* cada tópico com a mesma altura nas duas colunas → linhas opostas alinhadas */
  .compare-list{gap:12px;}
  .compare-list li{min-height:46px;align-items:center;}
}

/* (5) Mais respiro acima do mockup (entre o topo do celular e o bloco de cima) */
@media (min-width:601px) and (max-width:900px){
  .ending .ig-section{padding-top:104px;}
}
@media (max-width:600px){
  .ending .ig-section{padding-top:72px;}
}