/* =========================================================
   ZÉ LEMOS BOXE — DESIGN SYSTEM
   Consultoria individual de boxe
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;600;700;800;900&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  /* ---- Color: extracted from the logo + the gym itself ---- */
  --ink:        #0D1B29; /* near-black navy — anchor / dark bg */
  --navy:       #16293D; /* logo navy — surfaces on dark */
  --navy-soft:  #24405C; /* lighter navy — borders/hover on dark */
  --cyan:       #2BB8D9; /* logo cyan — primary action, motion lines */
  --cyan-strong:#1B93B0; /* pressed / accessible-on-light cyan */
  --cyan-soft:  #8FE1F0; /* tint — highlights, quiet accents */
  --canvas:     #EEF2F4; /* cool off-white — light section bg */
  --paper:      #FFFFFF; /* cards on canvas */
  --impact:     #E85D2C; /* heavy-bag orange — scarcity / signature only */
  --impact-soft:#FBD9C9;
  --ink-70:     rgba(13,27,41,.7);
  --ink-45:     rgba(13,27,41,.45);
  --line-on-dark: rgba(255,255,255,.14);
  --line-on-light: rgba(13,27,41,.12);

  /* ---- Type ---- */
  --font-display: 'Big Shoulders Display', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* fluid type scale */
  --step-caption: 0.75rem;
  --step-body:    1rem;
  --step-lead:    1.25rem;
  --step-h4:      clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
  --step-h3:      clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  --step-h2:      clamp(2.5rem, 1.9rem + 2.6vw, 4rem);
  --step-h1:      clamp(3rem, 2rem + 4.5vw, 6.5rem);

  /* ---- Space (8px base) ---- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 7rem;

  /* ---- Radius / motion ---- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: .25s;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--canvas);
  color:var(--ink);
  font-size:var(--step-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.95;
  margin:0;
}
p{ margin:0; }

.container{
  max-width:1180px;
  margin-inline:auto;
  padding-inline:var(--sp-4);
}

/* =========== DS PAGE CHROME (style guide only) =========== */
.ds-topbar{
  position:sticky; top:0; z-index:50;
  background:var(--ink); color:#fff;
  border-bottom:1px solid var(--line-on-dark);
}
.ds-topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:var(--sp-2);
}
.ds-topbar .brand{
  font-family:var(--font-display); font-weight:800; letter-spacing:.02em;
  font-size:1.05rem; text-transform:uppercase;
}
.ds-topbar .brand span{ color:var(--cyan); }
.ds-nav{ display:flex; gap:var(--sp-4); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; }
.ds-nav a{ text-decoration:none; color:rgba(255,255,255,.65); transition:color var(--dur) var(--ease); }
.ds-nav a:hover{ color:var(--cyan); }

.ds-section{ padding-block:var(--sp-7); border-bottom:1px solid var(--line-on-light); }
.ds-section.on-dark{ background:var(--ink); color:#fff; border-color:var(--line-on-dark); }
.ds-section-head{ margin-bottom:var(--sp-5); max-width:640px; }
.ds-eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cyan-strong); margin-bottom:var(--sp-2);
}
.on-dark .ds-eyebrow{ color:var(--cyan); }
.ds-eyebrow::before{ content:''; width:18px; height:2px; background:currentColor; }
.ds-section-head h2{ font-size:var(--step-h3); margin-bottom:var(--sp-2); }
.ds-section-head p{ color:var(--ink-70); font-size:var(--step-lead); }
.on-dark .ds-section-head p{ color:rgba(255,255,255,.7); }

/* =========== COLOR SWATCHES =========== */
.swatch-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--sp-3); }
.swatch{ border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line-on-light); background:var(--paper); }
.swatch-fill{ height:96px; }
.swatch-meta{ padding:var(--sp-3); }
.swatch-meta .name{ font-family:var(--font-mono); font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; }
.swatch-meta .hex{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-45); }
.swatch-meta .use{ font-size:.82rem; color:var(--ink-70); margin-top:.35em; }

/* =========== TYPE SPECIMENS =========== */
.type-row{ display:flex; align-items:baseline; gap:var(--sp-4); padding-block:var(--sp-4); border-top:1px solid var(--line-on-light); flex-wrap:wrap; }
.type-row:first-of-type{ border-top:none; }
.type-row .tag{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-45); width:150px; flex-shrink:0; text-transform:uppercase; letter-spacing:.06em; }
.type-row .sample{ flex:1; min-width:280px; }
.font-note{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-70); margin-top:var(--sp-1); }

/* =========== BUTTONS =========== */
.btn{
  font-family:var(--font-mono); font-weight:600; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.06em;
  display:inline-flex; align-items:center; gap:.6em;
  padding:.95em 1.6em; border-radius:var(--radius-sm);
  border:1.5px solid transparent; cursor:pointer;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  text-decoration:none;
}
.btn-primary{ background:linear-gradient(135deg, var(--cyan) 0%, var(--cyan-strong) 100%); color:var(--ink); }
.btn-primary:hover{ background:linear-gradient(135deg, var(--cyan-soft) 0%, var(--cyan) 100%); transform:translateY(-2px); }
.btn-ghost-dark{ border-color:var(--line-on-dark); color:#fff; }
.btn-ghost-dark:hover{ border-color:var(--cyan); color:var(--cyan); }
.btn-ghost-light{ border-color:var(--line-on-light); color:var(--ink); }
.btn-ghost-light:hover{ border-color:var(--cyan-strong); color:var(--cyan-strong); }
.btn-impact{ background:var(--impact); color:#fff; }
.btn-impact:hover{ background:#d1501f; transform:translateY(-2px); }
.btn-row{ display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:center; }

/* WhatsApp CTA: fills with WhatsApp's own green on hover (a real, recognizable
   integration point, so borrowing that brand color here is intentional). */
.btn.btn-whatsapp:hover{ background:#25D366; border-color:#25D366; color:#fff; }

/* =========== ROUND TAG / BADGE =========== */
.round-tag{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.5em .9em; border-radius:var(--radius-pill);
  border:1px solid var(--cyan-strong); color:var(--cyan-strong);
}
.on-dark .round-tag{ border-color:var(--cyan); color:var(--cyan); }
.round-tag .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-impact, .on-dark .round-tag.badge-impact{ border-color:var(--impact); color:var(--impact); }

/* =========== STAT READOUT (scoreboard) =========== */
.stat-row{ display:flex; gap:var(--sp-6); flex-wrap:wrap; }
.stat{ font-family:var(--font-mono); }
.stat .num{ font-size:2.75rem; font-weight:600; color:var(--cyan); line-height:1; }
.stat .num small{ font-size:1.1rem; font-weight:500; }
.stat .lbl{ font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-45); margin-top:.5em; }
.on-dark .stat .lbl{ color:rgba(255,255,255,.5); }
.section:not(.on-dark) .stat .num{ color:var(--cyan-strong); }

/* =========== CARDS =========== */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--sp-4); }
.card{
  background:var(--paper); color:var(--ink); border:1px solid var(--line-on-light);
  border-radius:var(--radius-md); padding:var(--sp-4);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.card .round-tag{ margin-bottom:var(--sp-3); }
.card h4{ font-size:var(--step-h4); margin-bottom:var(--sp-2); text-transform:none; letter-spacing:0; }
.card p{ color:var(--ink-70); font-size:.95rem; }

.card-dark{ background:var(--navy); border-color:var(--line-on-dark); color:#fff; }
.card-dark p{ color:rgba(255,255,255,.72); }

.card-icon{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); background:rgba(43,184,217,.1);
  color:var(--cyan-strong); margin-bottom:var(--sp-3);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.card-icon svg{ width:22px; height:22px; }
.card-dark .card-icon{ background:rgba(43,184,217,.14); color:var(--cyan); }

/* Round 01 uses the impact orange for its icons */
#round-1 .card-icon{ background:rgba(232,93,44,.14); color:var(--impact); }
#round-1 .card:hover .card-icon{ background:var(--impact); color:#fff; }

/* Hover: lift + highlight the card under the cursor, quiet the rest */
.card-grid:hover .card{ opacity:.55; transform:none; box-shadow:none; }
.card-grid .card:hover{
  opacity:1; transform:translateY(-6px);
  border-color:var(--cyan-strong); box-shadow:0 16px 32px rgba(13,27,41,.12);
}
.card-grid .card-dark:hover{ border-color:var(--cyan); }
.card:hover .card-icon{ background:var(--cyan); color:var(--ink); }
@media (prefers-reduced-motion: reduce){
  .card-grid:hover .card, .card-grid .card:hover{ transform:none; }
}

/* =========== TESTIMONIAL =========== */
.quote{
  background:var(--navy); color:#fff; border-radius:var(--radius-md);
  padding:var(--sp-5); position:relative; border-left:3px solid var(--cyan);
}
.quote p{ font-size:var(--step-lead); font-style:italic; font-family:var(--font-body); }
.quote cite{ display:block; margin-top:var(--sp-3); font-style:normal; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--cyan); }

/* =========== CORNER CLOCK — signature element =========== */
.corner-clock{
  display:inline-flex; align-items:center; gap:var(--sp-3);
  background:var(--ink); color:#fff; border:1px solid var(--line-on-dark);
  border-radius:var(--radius-pill); padding:.6em .6em .6em 1.2em;
  font-family:var(--font-mono);
}
.corner-clock .cc-label{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.corner-clock .cc-time{ font-size:1rem; font-weight:600; color:var(--cyan); }
.corner-clock .cc-ring{
  position:relative;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--cyan);
}
.corner-clock .cc-ring::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--navy-soft); border-top-color:var(--cyan);
  animation:spin 4s linear infinite;
}
.corner-clock .cc-ring svg{ width:16px; height:16px; position:relative; z-index:1; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =========== FORM ELEMENTS =========== */
.field{ display:flex; flex-direction:column; gap:.5em; max-width:420px; }
.field label{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-70); }
.field input, .field select{
  font-family:var(--font-body); font-size:1rem;
  padding:.85em 1em; border-radius:var(--radius-sm);
  border:1.5px solid var(--line-on-light); background:var(--paper); color:var(--ink);
  transition:border-color var(--dur) var(--ease);
}
.field input:focus, .field select:focus{ border-color:var(--cyan-strong); outline:none; }

/* =========== HERO PREVIEW (in-context demo) =========== */
.hero-demo{
  background:
    radial-gradient(120% 140% at 85% -10%, rgba(43,184,217,.22), transparent 55%),
    var(--ink);
  color:#fff; border-radius:var(--radius-md); overflow:hidden;
  display:grid; grid-template-columns:1.1fr .9fr; align-items:stretch;
  border:1px solid var(--line-on-dark);
}
.hero-demo .copy{ padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4); justify-content:center; }
.hero-demo h1{ font-size:clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); }
.hero-demo h1 .accent{ color:var(--cyan); }
.hero-demo .sub{ font-size:var(--step-lead); color:rgba(255,255,255,.75); max-width:46ch; }
.hero-demo .frame{ position:relative; min-height:340px; }
.hero-demo .frame img{ width:100%; height:100%; object-fit:cover; object-position:top center; filter:saturate(1.05) contrast(1.05); }
.hero-demo .frame::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--ink) 0%, transparent 22%);
}
@media (max-width: 860px){
  .hero-demo{ grid-template-columns:1fr; }
  .hero-demo .frame{ min-height:260px; order:-1; }
}

/* =========== FOOTER =========== */
.ds-footer{ padding:var(--sp-5) 0 var(--sp-7); text-align:center; }
.ds-footer p{ font-family:var(--font-mono); font-size:.75rem; color:var(--ink-45); letter-spacing:.04em; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
@media (max-width: 760px){ .grid-2{ grid-template-columns:1fr; } }

/* =========================================================
   LIVE SITE (landing page) — reuses all tokens/components above
   ========================================================= */

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(13,27,41,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-on-dark);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding-block:var(--sp-2); }
.site-logo{ font-family:var(--font-display); font-weight:800; letter-spacing:.02em; font-size:1.15rem; text-transform:uppercase; color:#fff; }
.site-logo span{ color:var(--cyan); }
.site-logo-mark{ display:inline-flex; align-items:center; }
.site-nav{
  display:flex; gap:var(--sp-4);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
}
.site-nav a{ text-decoration:none; color:rgba(255,255,255,.65); transition:color var(--dur) var(--ease); }
.site-nav a:hover{ color:var(--cyan); }
@media (max-width:700px){ .site-nav{ display:none; } }
.site-logo-mark img{ height:40px; width:auto; display:block; }
.site-logo-text{ display:none; }
@media (max-width:700px){
  .site-logo-mark img{ display:none; }
  .site-logo-text{ display:inline-flex; }
}

.section{ padding-block:var(--sp-8); border-bottom:1px solid var(--line-on-light); }
.section.on-dark{ background:var(--ink); color:#fff; border-color:var(--line-on-dark); }
.section-head{ max-width:720px; margin-bottom:var(--sp-5); }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cyan-strong); margin-bottom:var(--sp-2);
}
.on-dark .eyebrow{ color:var(--cyan); }
.eyebrow::before{ content:''; width:18px; height:2px; background:currentColor; }
.section-head h2{ font-size:var(--step-h2); margin-bottom:var(--sp-3); }
.section-head p{ color:var(--ink-70); font-size:var(--step-lead); max-width:60ch; }
.on-dark .section-head p{ color:rgba(255,255,255,.72); }

/* Round intro: framed photo as a real, responsive image beside the copy.
   (A CSS background here was cropping the photo unpredictably at wide
   viewports since the section spans full width but the frame doesn't
   share its aspect ratio — a real <img> in a grid column is exact.) */
.round-bg-intro{
  display:grid; grid-template-columns:minmax(240px, 420px) 1fr;
  gap:var(--sp-6); align-items:center;
  margin-bottom:var(--sp-6);
}
.round-bg-intro .section-head{ margin-bottom:0; max-width:none; margin-left:0; }
.round-bg-intro .framed-photo{ position:relative; }
.round-bg-intro .framed-photo img{
  width:100%; height:auto; display:block;
  border-radius:var(--radius-md);
}
@media (max-width:800px){
  .round-bg-intro{ grid-template-columns:1fr; }
  .round-bg-intro .framed-photo{ max-width:420px; margin-inline:auto; width:100%; }
}
/* Mirrored variant: text (+ any extra content, e.g. FAQ) on the left,
   photo on the right, centered in its own column (Intervalo) */
.round-bg-intro.is-reversed{
  grid-template-columns:1fr minmax(240px, 420px);
  align-items:start;
}
.round-bg-intro.is-reversed .framed-photo{ margin-inline:auto; width:100%; align-self:center; }
.intervalo-left{ display:flex; flex-direction:column; gap:var(--sp-5); }
@media (max-width:800px){
  .round-bg-intro.is-reversed{ grid-template-columns:1fr; }
}

/* Round 03 (O treino): light tint only, so the two people sparring stay
   clearly visible — the section-head text needs enough contrast (hence
   .on-dark on this section), but the photo itself should read, not disappear
   behind a heavy overlay. Cards stay `--paper` regardless, per the client's
   original "fundo Canvas, ícones ciano" spec for the 8-item grid. */
#round-3{
  background:
    linear-gradient(180deg, rgba(13,27,41,.55) 0%, rgba(13,27,41,.7) 100%),
    url('assets/ze-22-round3-bg.jpg') center 30% / cover no-repeat,
    var(--ink);
}

/* Round 04 (Quem vai te ensinar): dark navy tint, faded left-to-right so the
   face in the photo reads clearly on the right while the text on the left
   stays legible. Lighter overall than a flat tint so more photo shows through. */
#round-4{
  background:
    linear-gradient(90deg, rgba(13,27,41,.78) 0%, rgba(13,27,41,.42) 45%, rgba(13,27,41,.05) 100%),
    radial-gradient(55% 45% at 26% 12%, rgba(255,255,255,.10), transparent 60%),
    url('assets/ze-16-round3-bg.jpg') 75% 15% / cover no-repeat,
    var(--ink);
}
@media (max-width:900px){
  /* The left-to-right fade leaves the right side of the photo nearly untinted,
     which reads fine on wide desktop layouts but leaves mobile text (full-width,
     stacked over the whole photo) illegible. Flatten to a uniform dark tint. */
  #round-4{
    background:
      linear-gradient(180deg, rgba(13,27,41,.88) 0%, rgba(13,27,41,.92) 100%),
      radial-gradient(55% 45% at 26% 12%, rgba(255,255,255,.10), transparent 60%),
      url('assets/ze-16-round3-bg.jpg') 75% 15% / cover no-repeat,
      var(--ink);
  }
}

/* Round 05 (Sua vaga): flat radial + vertical dark navy tint */
#round-5{
  background:
    radial-gradient(55% 45% at 74% 10%, rgba(255,255,255,.09), transparent 60%),
    linear-gradient(180deg, rgba(13,27,41,.90) 0%, rgba(13,27,41,.95) 100%),
    url('assets/ze-15-round4-bg.jpg') center 30% / cover no-repeat,
    var(--ink);
}

/* Tape divider: decorative section break between Hero and Round 01 */
.tape-divider{
  background:var(--ink);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.tape-divider img{
  width:100%; height:auto; display:block;
}

/* Shape divider: white gradient banner with a dipped notch and a badge icon,
   used as a section break between Round 03 and Round 04 (both dark). */
.shape-divider{
  position:relative; line-height:0; background:var(--ink);
}
.shape-divider svg.shape-divider-fill{ display:block; width:100%; height:auto; }
.shape-divider-badge{
  position:absolute; left:50%; bottom:0;
  width:clamp(36px, 5vw, 48px); height:clamp(36px, 5vw, 48px);
  filter:drop-shadow(0 4px 10px rgba(13,27,41,.55));
  animation:shape-divider-bounce 1.8s ease-in-out infinite;
}
.shape-divider-badge svg{ width:100%; height:100%; display:block; }
@keyframes shape-divider-bounce{
  0%, 100%{ transform:translate(-50%, 22%); }
  50%{ transform:translate(-50%, 38%); }
}
@media (prefers-reduced-motion: reduce){
  .shape-divider-badge{ animation:none; transform:translate(-50%, 28%); }
}

/* Hero, full-bleed variant of the boxed hero-demo preview */
.hero{
  background:
    linear-gradient(to bottom, transparent 78%, var(--ink) 100%),
    linear-gradient(90deg, rgba(13,27,41,.92) 0%, rgba(13,27,41,.55) 45%, rgba(13,27,41,.05) 100%),
    radial-gradient(120% 140% at 85% -10%, rgba(43,184,217,.18), transparent 55%),
    url('assets/ze-05-hero-bg.jpg') center 30% / cover no-repeat,
    var(--ink);
  color:#fff; overflow:hidden; position:relative;
}
.hero .container{
  display:grid; grid-template-columns:1fr; align-items:stretch;
  gap:var(--sp-6); padding-block:var(--sp-6);
  min-height:calc(100vh - 61px);
}
.hero .copy{ align-self:center; padding-block:var(--sp-6); max-width:640px; }
.hero .copy .round-tag{ margin-bottom:var(--sp-4); }
.hero h1{ font-size:var(--step-h1); }
.hero h1 .accent{ color:var(--cyan); }
.hero .sub{ font-size:var(--step-lead); color:rgba(255,255,255,.75); max-width:46ch; margin-block:var(--sp-4); }
.credential-list{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.1em;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.03em;
  color:rgba(255,255,255,.65); margin-top:var(--sp-4);
  list-style:none; padding:0;
}
.credential-list li{ display:inline-flex; align-items:center; gap:.5em; }
.credential-list svg{ width:16px; height:16px; color:var(--cyan); flex-shrink:0; }
.section:not(.on-dark) .credential-list{ color:var(--ink-70); }
@media (max-width:900px){
  .hero .container{ min-height:auto; padding-block:var(--sp-5); }
  .hero .copy{ padding-block:0; }
  .hero{ background-position:0 0, 0 0, 0 0, 68% 30%; }
}

/* Impact highlight, used sparingly inside headlines/body copy */
.hl{ color:var(--impact); font-weight:600; }
.on-dark .hl{ color:var(--impact); }

/* Corner clock, fixed live variant */
.corner-clock.is-fixed{
  position:fixed; bottom:var(--sp-4); right:var(--sp-4); z-index:40;
  box-shadow:0 12px 30px rgba(13,27,41,.35);
  opacity:1; transform:translateY(0); pointer-events:auto;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.corner-clock.is-fixed.is-away{ opacity:0; transform:translateY(8px); pointer-events:none; }
@media (max-width:640px){
  .corner-clock.is-fixed{
    left:50%; right:auto; bottom:var(--sp-3);
    width:auto; max-width:calc(100% - var(--sp-3) * 2);
    transform:translateX(-50%);
  }
  .corner-clock.is-fixed.is-away{ transform:translate(-50%, 8px); }
}

/* =========== PRICING (Round 04) =========== */
.pricing-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--sp-4); align-items:start; margin-bottom:var(--sp-5);
}
.pricing-card{
  background:var(--paper); color:var(--ink); border:1px solid var(--line-on-light); border-radius:var(--radius-md);
  padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3);
  transition:opacity .55s cubic-bezier(.34,1.56,.64,1), transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow var(--dur) var(--ease);
}
.pricing-card.pop-hidden{ opacity:0; transform:translateY(28px) scale(.95); }
.pricing-card .plan-head{ display:flex; align-items:center; justify-content:space-between; gap:.75em; flex-wrap:wrap; }
.pricing-card .plan-name{
  font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-45);
}
.pricing-card .price{
  font-family:var(--font-display); font-weight:800; line-height:1;
  font-size:clamp(2.1rem, 1.7rem + 1.4vw, 2.8rem); color:var(--ink);
}
.pricing-card .price .unit{
  font-family:var(--font-mono); font-weight:500; font-size:.85rem;
  color:var(--ink-45); text-transform:none; letter-spacing:0;
}
.pricing-card .installments{
  font-family:var(--font-mono); font-size:.78rem; color:var(--ink-45);
  margin-top:-.5em;
}
.pricing-card .desc{ font-size:.9rem; color:var(--ink-70); flex:1; }
.pricing-card .btn{ justify-content:center; margin-top:var(--sp-2); }
.pricing-card .round-tag{ border-color:var(--cyan-strong); color:var(--cyan-strong); }

.pricing-card.is-featured{
  background:var(--navy); color:#fff; border-color:var(--impact);
  box-shadow:0 20px 44px rgba(232,93,44,.25);
  transform:translateY(-8px);
}
.pricing-card.is-featured .plan-name{ color:rgba(255,255,255,.6); }
.pricing-card.is-featured .price{ color:#fff; }
.pricing-card.is-featured .price .unit{ color:rgba(255,255,255,.55); }
.pricing-card.is-featured .installments{ color:rgba(255,255,255,.55); }
.pricing-card.is-featured .desc{ color:rgba(255,255,255,.78); }
.pricing-card.is-featured.pop-hidden{ transform:translateY(28px) scale(.95); }
@media (max-width:760px){
  .pricing-card.is-featured{ transform:none; }
  .pricing-card.is-featured.pop-hidden{ transform:translateY(28px) scale(.95); }
}
@media (prefers-reduced-motion: reduce){
  .pricing-card{ transition:none; }
}

/* =========== TESTIMONIAL CAROUSEL (Round 03) =========== */
.testimonial-carousel-wrap{ margin-top:var(--sp-6); }
.testimonial-carousel{
  display:flex; gap:var(--sp-4); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:var(--sp-1) var(--sp-1) var(--sp-3);
  margin:0 calc(var(--sp-1) * -1);
  scrollbar-width:none;
}
.testimonial-carousel::-webkit-scrollbar{ display:none; }
.testimonial-card{
  scroll-snap-align:start; flex:0 0 clamp(260px, 82vw, 380px);
  background:var(--navy); border:1px solid var(--line-on-dark); border-radius:var(--radius-md);
  padding:var(--sp-5); position:relative; color:#fff;
  display:flex; flex-direction:column; gap:var(--sp-4);
}
.testimonial-card .quote-mark{
  position:absolute; top:var(--sp-4); right:var(--sp-4); color:rgba(43,184,217,.16);
}
.testimonial-card .quote-mark svg{ width:36px; height:36px; }
.testimonial-card .stars{ display:flex; gap:3px; color:var(--cyan); }
.testimonial-card .stars svg{ width:15px; height:15px; }
.testimonial-card .quote{
  font-size:1.02rem; line-height:1.5; color:#fff; font-style:italic;
  position:relative; z-index:1;
}
.testimonial-person{ display:flex; align-items:center; gap:var(--sp-3); margin-top:auto; }
.testimonial-person .avatar{
  width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:1px solid var(--line-on-dark);
}
.testimonial-person .name{ font-weight:600; color:#fff; }
.testimonial-person .role{ font-family:var(--font-mono); font-size:.72rem; color:rgba(255,255,255,.55); }

.carousel-controls{ display:flex; gap:var(--sp-2); justify-content:center; margin-top:var(--sp-4); }
.carousel-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line-on-dark);
  background:transparent; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.carousel-btn svg{ width:18px; height:18px; }
.carousel-btn:hover{ border-color:var(--cyan); color:var(--cyan); }

/* =========== ROUND 03 LAYOUT: 8-card grid (4x2) + video carousel sidebar =========== */
.round3-layout{
  display:grid; grid-template-columns:1fr minmax(260px, 340px);
  gap:var(--sp-6); align-items:start; margin-bottom:var(--sp-2);
}
.round3-layout .card-grid{ order:1; }
.round3-layout .video-carousel-wrap{ order:2; }
.round3-layout .card-grid{ grid-template-columns:repeat(4, 1fr); gap:var(--sp-3); }
.round3-layout .card{ padding:var(--sp-3) var(--sp-4); }
.round3-layout .card-icon{ width:36px; height:36px; margin-bottom:var(--sp-2); }
.round3-layout .card-icon svg{ width:18px; height:18px; }
.round3-layout .card h4{ font-size:1rem; }
.round3-layout .card p{ font-size:.85rem; }
@media (max-width:1100px){
  .round3-layout .card-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:900px){
  .round3-layout{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .round3-layout .card-grid{ grid-template-columns:1fr; }
}

/* Single-slide carousel: only the active video shows, prev/next swap it
   (not a horizontal scroll strip — the sidebar is too narrow for that). */
.video-carousel{ position:relative; }
.video-card{ display:none; }
.video-card.is-active{ display:block; }
.video-card{
  border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--line-on-dark); background:var(--navy);
  box-shadow:0 12px 28px rgba(13,27,41,.3);
}
.video-card video{ width:100%; height:auto; display:block; }

.video-frame{ position:relative; }
.video-play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:56px; height:56px; border-radius:50%;
  background:rgba(13,27,41,.55); border:2px solid rgba(255,255,255,.85);
  color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.video-play-btn svg{ width:22px; height:22px; margin-left:3px; }
.video-play-btn:hover{ background:var(--cyan); border-color:var(--cyan); color:var(--ink); transform:translate(-50%, -50%) scale(1.08); }
.video-frame.is-playing .video-play-btn{ display:none; }

/* =========== FAQ ACCORDION (Intervalo) =========== */
.faq-list{ display:flex; flex-direction:column; gap:var(--sp-2); max-width:760px; }
.faq-item{
  border:1px solid var(--line-on-light); border-radius:var(--radius-md);
  background:var(--paper); overflow:hidden;
}
.faq-item summary{
  cursor:pointer; list-style:none;
  padding:var(--sp-4); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  font-family:var(--font-body); font-weight:600; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item .chev{ flex-shrink:0; color:var(--cyan-strong); transition:transform var(--dur) var(--ease); }
.faq-item[open] .chev{ transform:rotate(180deg); }
.faq-item .faq-answer{ margin:0; padding:0 var(--sp-4) var(--sp-4); color:var(--ink-70); font-size:.95rem; }
.on-dark .faq-item{ background:var(--navy); border-color:var(--line-on-dark); }
.on-dark .faq-item summary{ color:#fff; }
.on-dark .faq-item .chev{ color:var(--cyan); }
.on-dark .faq-item .faq-answer{ color:rgba(255,255,255,.72); }
@media (prefers-reduced-motion: reduce){
  .faq-item .chev{ transition:none; }
}

/* =========== SCROLL REVEAL (section heads, cards, FAQ, stats) =========== */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========== HERO ENTRANCE (page load) =========== */
.hero .copy > *{ opacity:0; transform:translateY(14px); animation:hero-in .7s cubic-bezier(.16,1,.3,1) forwards; }
.hero .copy > *:nth-child(1){ animation-delay:.05s; }
.hero .copy > *:nth-child(2){ animation-delay:.16s; }
.hero .copy > *:nth-child(3){ animation-delay:.3s; }
.hero .copy > *:nth-child(4){ animation-delay:.42s; }
.hero .copy > *:nth-child(5){ animation-delay:.52s; }
@keyframes hero-in{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .hero .copy > *{ animation:none; opacity:1; transform:none; }
}

/* =========== CLOSER (Gongo Final) =========== */
.closer{
  text-align:center;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(43,184,217,.16), transparent 60%),
    var(--ink);
}
.closer .eyebrow{ justify-content:center; }
.closer h2{ font-size:var(--step-h2); max-width:820px; margin-inline:auto; }
.closer .lead{
  max-width:560px; margin:var(--sp-3) auto 0;
  font-size:var(--step-lead); color:rgba(255,255,255,.75);
}
.closer .btn-row{ justify-content:center; margin-top:var(--sp-5); }