/* ==========================================================================
   Janelaberta — VideoCast landing page
   Real brand colors sampled from the client's own logo: chartreuse-yellow
   #E9F105 + deep navy #04044B. Halftone pop-art illustrations from the PDF
   are used only as ambient background decoration, never as content icons.
   ========================================================================== */

:root{
  --yellow:      #E9F105;
  --yellow-deep: #C7CF04;
  --navy:        #04044B;
  --navy-2:      #0B0C63;
  --navy-3:      #12137A;
  --cream:       #FAF8EF;
  --white:       #FFFFFF;
  --ink:         #14141A;
  --ink-soft:    #4A4A55;

  --f-display: 'Poppins', sans-serif;
  --f-script:  'Fraunces', serif;
  --f-body:    'Inter', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-body);
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
section{ position:relative; }

/* -------------------------------------------------------------------------
   Two-tone heading motif: bold display start + elegant italic finish.
   Script color defaults to navy (readable on light backgrounds); sections
   on a dark background opt into yellow via --light modifier.
   ------------------------------------------------------------------------- */
.two-tone{ display:inline-block; }
.two-tone__bold{
  font-family:var(--f-display);
  font-weight:800;
}
.two-tone__script{
  font-family:var(--f-script);
  font-style:italic;
  font-weight:600;
  color:var(--navy-2);
  margin-left:.12em;
}

.section-title{
  font-size:clamp(2.1rem, 5vw, 3.6rem);
  line-height:1.08;
  color:var(--navy);
  margin-bottom:1em;
}
.section-title--light{ color:var(--white); }
.section-title--light .two-tone__script{ color:var(--yellow); }
.section-title--center{ text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  color:var(--navy-2); margin-bottom:1em;
}
.section-title--light + .eyebrow,
.eyebrow--light{ color:var(--yellow); }

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.9em 1.8em;
  border-radius:100px;
  font-weight:700;
  font-size:1rem;
  font-family:var(--f-body);
  border:3px solid var(--navy);
  box-shadow:5px 5px 0 var(--navy);
  transition:transform .15s ease, box-shadow .15s ease;
  cursor:pointer;
  white-space:nowrap;
}
.btn:hover{ transform:translate(2px,2px); box-shadow:3px 3px 0 var(--navy); }
.btn--primary{ background:var(--yellow); color:var(--navy); }
.btn--ghost{ background:transparent; color:inherit; }
.btn--big{ font-size:1.15rem; padding:1.1em 2.4em; }
.btn--final{
  font-size:1.3rem; padding:1.3em 3em; text-transform:uppercase; letter-spacing:.03em;
  box-shadow:7px 7px 0 var(--navy);
  animation:btnFinalPulse 1.8s ease-in-out infinite;
}
.btn--final:hover{ box-shadow:4px 4px 0 var(--navy); animation-play-state:paused; }
.btn--final i{ font-size:1.3rem; }
@keyframes btnFinalPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.045); }
}
@media (max-width:600px){
  .btn--final{
    font-size:.95rem; padding:.9em 1.5em;
    white-space:normal; text-align:center; letter-spacing:.02em;
  }
  .btn--final i{ font-size:1rem; }
}

/* ==========================================================================
   AMBIENT DECOR — halftone PDF illustrations used only as background props
   ========================================================================== */
/* the white "cutout sticker" edge is a ring of crisp white drop-shadows —
   drop-shadow (unlike box-shadow) follows the PNG's actual alpha silhouette,
   so stacking several at small offsets in a circle traces a stroke around
   the artwork's real outline instead of its rectangular bounding box. The
   final drop-shadow is the soft floating shadow underneath it all. */
.decor{
  position:absolute;
  pointer-events:none;
  z-index:1;
  opacity:1;
  filter:
    drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(2.2px 2.2px 0 #fff) drop-shadow(-2.2px 2.2px 0 #fff)
    drop-shadow(2.2px -2.2px 0 #fff) drop-shadow(-2.2px -2.2px 0 #fff)
    drop-shadow(0 8px 14px rgba(0,0,0,.3));
  animation:decorFloat 7s ease-in-out infinite;
}
.decor:nth-of-type(even){ animation-duration:8.5s; animation-direction:reverse; }
.decor--soft{ opacity:1; }
.decor--visible{ opacity:1; }
.decor--sticker{ opacity:1; }
@keyframes decorFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-12px) rotate(1.5deg); }
}
@media (prefers-reduced-motion:reduce){
  .decor{ animation:none; }
}
/* -- on narrow screens there's no safe margin to float these in without
      sitting on top of the text column, so instead of overlapping the copy
      they get pulled small and pushed to straddle the seam between
      sections — half tucked into each section's own padding buffer, clear
      of any text line. .etapas__hero-icon is a normal in-flow element, not
      one of these absolutely-positioned corner props, so it's unaffected -- */
@media (max-width:760px){
  .decor{ width:76px !important; }
  .apresentacao__tv{ top:-24px; right:6%; }
  .apresentacao__phone{ bottom:-24px; left:4%; }
  .etapas__watch{ bottom:-24px; left:6%; }
  .etapas__hourglass{ top:-24px; right:6%; }
  .bonus__ribbon{ top:-24px; right:6%; }
  .bonus__bolt{ bottom:-24px; left:6%; }
  .cadencia__phone{ bottom:-24px; right:6%; }
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:.7em 5%;
  background:rgba(4,4,75,.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav__logo{ display:flex; align-items:center; gap:.6em; }
.nav__logo img{ height:44px; width:44px; border-radius:10px; }
.nav__links{ display:flex; gap:2em; }
.nav__links a{ color:#fff; font-size:.92rem; font-weight:500; opacity:.85; }
.nav__links a:hover{ opacity:1; }
.nav__cta{
  display:flex; align-items:center; gap:.5em;
  background:var(--yellow); color:var(--navy); font-weight:700; font-size:.88rem;
  padding:.65em 1.3em; border-radius:100px; border:2px solid var(--navy);
}
@media (max-width:900px){ .nav__links{ display:none; } }

/* floating whatsapp button */
.fab-whatsapp{
  position:fixed; right:22px; bottom:22px; z-index:300;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  border:2px solid rgba(255,255,255,.4);
  animation:fabPulse 2.6s ease-in-out infinite;
}
@keyframes fabPulse{
  0%,100%{ box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 0 0 rgba(37,211,102,.5); }
  50%{ box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 0 12px rgba(37,211,102,0); }
}

/* ==========================================================================
   HERO — scroll-driven "tape opening" reveal
   ========================================================================== */
.hero-reveal{ height:100vh; }
.hero-reveal__pin{
  position:relative; height:100vh; overflow:hidden; background:var(--navy);
}

.hero-reveal__stageB{
  position:absolute; inset:0; z-index:1;
}
.hero-reveal__photo{
  width:100%; height:100%; object-fit:cover; object-position:center 20%;
}
.hero-reveal__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,4,75,.55) 0%, rgba(4,4,75,.25) 45%, rgba(4,4,75,.85) 100%);
}
.hero-reveal__caption{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  text-align:center; padding:0 6%;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2.2rem,6vw,4.6rem);
  line-height:1.2;
  color:#fff;
  opacity:0;
  transition:opacity .2s linear;
}
.hero-reveal__caption span{ font-family:var(--f-script); font-style:italic; font-weight:600; color:var(--yellow); }
.hero-reveal__scrollcue{
  position:absolute; left:50%; bottom:5%; transform:translateX(-50%);
  color:#fff; opacity:0; transition:opacity .2s linear;
  display:flex; flex-direction:column; align-items:center; gap:.4em; font-size:.8rem; letter-spacing:.1em;
}

/* -- each group (panel + its tape) moves as one unit; the tape lives
      outside the clipped panel so its rotated ends are never truncated
      by a clip-path edge running at a different angle -- */
.hero-group{
  position:absolute; inset:0; z-index:3;
  will-change:transform;
}
/* .hero-group creates its own stacking context, so the top tape's
   z-index can't otherwise win over the bottom group's — raise the whole
   top group above it explicitly. */
#groupTop{ z-index:4; }
.hero-cut{
  position:absolute; inset:0;
  background:var(--navy);
  background-image:radial-gradient(rgba(255,255,255,.16) 1.7px, transparent 1.7px);
  background-size:22px 22px;
}
.hero-cut--top{ clip-path:polygon(0 0, 100% 0, 100% 48.5%, 0 51.5%); }
.hero-cut--bottom{ clip-path:polygon(0 51.5%, 100% 48.5%, 100% 100%, 0 100%); }

.hero-cut__content{
  position:absolute; left:0; right:0;
  display:flex;
  padding:0 15%;
}
.hero-cut--top .hero-cut__content{
  top:0; height:37%;
  align-items:flex-end; justify-content:flex-start;
}
.hero-cut--bottom .hero-cut__content{
  bottom:0; height:38%;
  align-items:flex-end; justify-content:flex-start;
  flex-direction:column; gap:1.2em;
}

.hero-cut__line{
  font-family:var(--f-display); font-weight:800; font-style:normal;
  font-size:clamp(1.8rem,4.6vw,3.4rem);
  line-height:1.18;
  color:#fff;
  max-width:12.5em;
  margin:0;
  text-align:left;
}
.hero-cut__line--script{
  font-family:var(--f-script); font-style:italic; font-weight:600;
  color:var(--yellow);
  text-align:right;
}

/* -- the two tapes — positioned safely inside each panel's guaranteed-visible
      area (i.e. never crossing the diagonal clip boundary) -- */
.tape{
  position:absolute; left:-2%; right:-2%; height:60px; z-index:4;
  background:var(--yellow);
  border-top:4px solid var(--navy); border-bottom:4px solid var(--navy);
  display:flex; align-items:center; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
/* The panel seam (.hero-cut--top/--bottom clip-path) rises 3% of the
   section's height across its full width, i.e. an angle of
   atan2(3vh, 100vw) from horizontal — that's the true angle for *any*
   viewport, since vh and vw resolve to real pixels before the trig runs.
   The tape must rotate by that same angle or it gets sliced at a mismatched
   angle where it crosses the seam. Flat -1deg fallback for browsers
   without CSS trig function support. */
.tape--top{ top:39%; transform:rotate(-1deg); transform:rotate(calc(-1 * atan2(3vh, 100vw))); }
.tape--bottom{ top:53%; transform:rotate(-1deg); transform:rotate(calc(-1 * atan2(3vh, 100vw))); }
.tape__track{
  display:inline-flex; white-space:nowrap; width:max-content;
  font-family:var(--f-display); font-weight:800; font-size:clamp(1.3rem,3.4vw,2rem);
  color:var(--navy);
  padding:.3em 0;
}
.tape--top .tape__track{ animation:tapeScrollL 14s linear infinite; }
.tape--bottom .tape__track{ animation:tapeScrollR 14s linear infinite; }
@keyframes tapeScrollL{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes tapeScrollR{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
.tape__track span{ padding:0 1em; }

/* -- standalone version of the same tape, used as a decorative divider
      between page sections instead of inside the hero -- */
.tape-divider{
  position:relative; z-index:5; height:56px;
  width:104%; margin:-1.6em 0 -1.6em -2%;
  transform:rotate(-2deg);
  background:var(--yellow);
  border-top:4px solid var(--navy); border-bottom:4px solid var(--navy);
  display:flex; align-items:center; overflow:hidden;
}
.tape-divider__track{
  display:inline-flex; white-space:nowrap; width:max-content;
  font-family:var(--f-display); font-weight:800; font-size:clamp(1.1rem,2.6vw,1.6rem);
  color:var(--navy);
  padding:.3em 0;
  animation:tapeScrollL 14s linear infinite;
}
.tape-divider__track span{ padding:0 1em; }
@media (max-width:700px){
  .tape-divider{ height:42px; margin:-1.2em 0; }
}

@media (max-width:700px){
  .tape{ height:50px; }
  .tape__track{ font-size:1rem; }
  .hero-cut__line{ font-size:1.75rem; max-width:12em; }
  .hero-cut--top .hero-cut__content{ padding-bottom:1.4em; }
  .hero-cut--bottom .hero-cut__content{ gap:.9em; padding-top:1.4em; }
}

/* ==========================================================================
   APRESENTAÇÃO
   ========================================================================== */
.apresentacao{
  background:var(--cream);
  padding:7em 5%;
  overflow:hidden;
}
.apresentacao__tv{ top:1em; right:2%; width:170px; }
.apresentacao__phone{ bottom:2em; left:1%; width:150px; }
.apresentacao__inner{
  max-width:1080px; margin:0 auto; position:relative; z-index:2;
  display:grid; grid-template-columns:.95fr 1.05fr; gap:3em; align-items:center;
}
.apresentacao__gallery{ order:-1; }
.apresentacao__lead{ font-size:1.15rem; line-height:1.75; margin-bottom:1.3em; color:var(--ink); }
.apresentacao__gallery img{
  width:100%;
  border-radius:14px; border:3px solid var(--navy); aspect-ratio:3/4; object-fit:cover; object-position:center center;
  box-shadow:10px 10px 0 rgba(4,4,75,.15);
}
@media (max-width:900px){
  .apresentacao__tv{ width:100px; }
  .apresentacao__inner{ grid-template-columns:1fr; gap:2em; }
  .apresentacao__gallery{ order:0; }
  .apresentacao__gallery img{ max-width:420px; margin:0 auto; }
}

/* ==========================================================================
   ETAPAS / TIMELINE
   ========================================================================== */
.etapas{
  background:var(--yellow);
  padding:7em 5%;
  overflow:hidden;
  clip-path:polygon(0 2.2%, 100% 0, 100% 97.8%, 0 100%);
  margin:1px 0;
}
.etapas__watch{ bottom:2em; left:2%; width:130px; }
.etapas__hourglass{ top:6em; right:3%; width:150px; }
.etapas__hero-icon{
  display:block; margin:0 auto 1em; width:190px;
  position:relative; z-index:2;
  filter:
    drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(2.2px 2.2px 0 #fff) drop-shadow(-2.2px 2.2px 0 #fff)
    drop-shadow(2.2px -2.2px 0 #fff) drop-shadow(-2.2px -2.2px 0 #fff)
    drop-shadow(0 10px 20px rgba(4,4,75,.3));
  animation:decorFloat 7s ease-in-out infinite;
}
.etapas .section-title{ max-width:900px; margin-left:auto; margin-right:auto; position:relative; z-index:2; }
.etapas__title .two-tone__script{ color:var(--navy-2); }
.etapas__lead{
  max-width:560px; margin:0 auto 2.4em; text-align:center;
  position:relative; z-index:2; opacity:.8; line-height:1.6; color:var(--navy);
}
.timeline{
  max-width:1600px; width:92%; margin:0 auto;
  display:grid; grid-template-columns:repeat(5,1fr); gap:1.6em;
  position:relative; z-index:2;
}
.step{
  background:var(--navy);
  border-radius:14px;
  padding:1.8em 1.4em;
  color:#fff;
  box-shadow:6px 6px 0 rgba(4,4,75,.3);
}
.step__icon{
  width:52px; height:52px; border-radius:12px;
  background:var(--yellow); color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin-bottom:1.1em;
}
.step h3{ font-family:var(--f-display); font-weight:700; font-size:1.1rem; margin-bottom:0; color:var(--yellow); }
@media (max-width:1000px){ .timeline{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .timeline{ grid-template-columns:1fr; } }
.etapas__cta{ text-align:center; margin-top:3em; position:relative; z-index:2; }
.etapas__cta .btn{ background:var(--navy); color:var(--yellow); border-color:var(--yellow); }
.etapas__cta .btn:hover{ box-shadow:3px 3px 0 var(--navy); }

/* ==========================================================================
   ENTREGAS / CHECKLIST
   ========================================================================== */
.entregas{
  background:var(--cream);
  padding:7em 5%;
  overflow:hidden;
}
.entregas__alarm{ top:2em; right:2%; width:170px; }
.entregas__bubbles{ bottom:1em; left:1%; width:170px; }
.entregas__inner{ max-width:680px; margin:0 auto; position:relative; z-index:2; text-align:center; }
.checklist{
  display:grid; gap:.9em; text-align:left; max-width:560px; margin:0 auto;
}
.checklist li{
  background:#fff; border:1px solid rgba(4,4,75,.12); border-radius:10px;
  padding:1em 1.3em; font-weight:600; font-size:1.02rem;
  box-shadow:4px 4px 0 rgba(4,4,75,.08);
  display:flex; align-items:center; gap:.8em;
}
.checklist li i{ color:var(--yellow-deep); font-size:1.2rem; flex-shrink:0; }

/* ==========================================================================
   BÔNUS
   ========================================================================== */
.bonus{
  background:var(--navy);
  padding:7em 5%;
  text-align:center;
  overflow:hidden;
}
.bonus__ribbon{ right:-2%; top:1em; width:220px; }
.bonus__bolt{ left:-2%; bottom:1em; width:200px; }
.bonus .section-title{ position:relative; z-index:2; }
.bonus__lead{ color:#fff; font-size:1.1rem; opacity:.85; margin-bottom:2em; position:relative; z-index:2; }
.bonus__cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4em; max-width:960px; margin:0 auto;
  position:relative; z-index:2;
}
.bonus__card{
  background:rgba(255,255,255,.06); border-radius:14px; padding:2.2em 1.4em; color:#fff;
  border:1px solid rgba(255,255,255,.12);
}
.bonus__card i{ font-size:1.8rem; color:var(--yellow); display:block; margin-bottom:.6em; }
.bonus__card p{ font-weight:600; line-height:1.5; }
@media (max-width:760px){ .bonus__cards{ grid-template-columns:1fr; } }

/* ==========================================================================
   CADÊNCIA / SUGESTÃO DE PUBLICAÇÃO
   ========================================================================== */
.cadencia{
  background:var(--cream);
  padding:7em 5%;
  text-align:center;
  overflow:hidden;
}
.cadencia__phone{ right:0; bottom:1em; width:220px; }
.cadencia__lead{ opacity:.75; max-width:520px; margin:0 auto 2.5em; font-size:1.05rem; position:relative; z-index:2; }
.cadencia__cards{
  display:flex; justify-content:center; gap:1.6em; flex-wrap:wrap; position:relative; z-index:2;
}
.cadencia__card{
  background:#fff; border:1px solid rgba(4,4,75,.15); border-radius:16px;
  padding:2.2em 2em; min-width:190px; color:var(--navy);
  box-shadow:6px 6px 0 rgba(4,4,75,.08);
}
.cadencia__card--highlight{
  background:var(--yellow); border-color:var(--navy);
  transform:scale(1.06);
  box-shadow:6px 6px 0 var(--navy);
}
.cadencia__time{ font-family:var(--f-display); font-weight:800; font-size:2.3rem; margin-bottom:.2em; }
.cadencia__time span{ font-family:var(--f-body); font-size:.95rem; font-weight:500; opacity:.7; margin-left:.2em; }
.cadencia__freq{ font-family:var(--f-script); font-style:italic; font-weight:600; font-size:1.5rem; }
.cadencia__freq span{ font-family:var(--f-body); font-style:normal; font-size:.82rem; opacity:.65; display:block; margin-top:.2em; }

/* ==========================================================================
   BASTIDORES (landscape photo band — safe crop)
   ========================================================================== */
.bastidores{ position:relative; background:#1c1c1c; padding:2.4em 0; text-align:center; }
.bastidores__frame{ position:relative; }

/* -- dark gray recording-tape bars, top and bottom, with a repeating
      punched-hole SVG (single icon, tiled by the browser — the gap between
      holes comes from transparent padding baked into the SVG's own
      viewBox, not from background-size math) -- */
.bastidores__tape{
  height:22px; background-color:#3a3a3a;
  border-top:2px solid #222; border-bottom:2px solid #222;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='22'%3E%3Crect x='8' y='6' width='10' height='10' rx='2.5' fill='%23c9c9c9'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:26px 22px;
}
@media (max-width:700px){
  .bastidores__tape{ height:16px; background-size:19px 16px; }
}

.bastidores__viewport{
  overflow:hidden; background:#000;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.bastidores__track{
  display:flex; width:max-content;
  cursor:grab; touch-action:pan-y; will-change:transform;
}
.bastidores__track.is-dragging{ cursor:grabbing; }
.bastidores__slide{
  flex:0 0 clamp(240px, 31vw, 420px);
  aspect-ratio:4/3;
  padding:.7em;
  display:flex; align-items:center; justify-content:center;
}
.bastidores__slide img{
  width:100%; height:100%; object-fit:contain;
}
.bastidores__label{
  display:inline-block; margin-bottom:1.2em; color:#fff;
  font-family:var(--f-display); font-weight:700; font-size:1.1rem;
  text-transform:uppercase; letter-spacing:.08em;
}
@media (max-width:700px){
  .bastidores__slide{ flex-basis:80vw; }
}

/* ==========================================================================
   INVESTIMENTO
   ========================================================================== */
.investimento{
  background:linear-gradient(160deg,var(--navy) 0%, var(--navy-3) 100%);
  padding:8em 5%;
  text-align:center;
  color:#fff;
  overflow:hidden;
}
.investimento__dots{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.1) 1.6px, transparent 1.6px);
  background-size:22px 22px;
}
.investimento > *{ position:relative; z-index:2; }
.investimento .section-title{ margin-bottom:.3em; }
.investimento__consult{ font-size:1.15rem; color:var(--yellow); font-weight:700; margin-bottom:.5em; }
.investimento__desc{ opacity:.8; max-width:520px; margin:0 auto 2.5em; }

/* ==========================================================================
   CLIENTES — real logo grid
   ========================================================================== */
.clientes{ background:var(--cream); padding:6em 0; text-align:center; }
.clientes__label{ font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.85rem; color:var(--navy-2); margin-bottom:2em; padding:0 5%; }
.clientes__marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.clientes__track{
  display:inline-flex; gap:1.1em; width:max-content;
  animation:clientesScroll 38s linear infinite;
}
@keyframes clientesScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.clientes__card{
  display:flex; align-items:center; justify-content:center;
  padding:1em; height:90px; width:190px; flex-shrink:0;
}
.clientes__card img{
  max-height:100%; max-width:100%; object-fit:contain;
}
@media (max-width:560px){ .clientes__card{ width:150px; height:76px; } }

/* ==========================================================================
   CONTATO
   ========================================================================== */
.contato{
  background:var(--navy); color:#fff;
  padding:6em 5%; text-align:center;
}
.contato .section-title{ margin-bottom:.4em; }
.contato__lead{ opacity:.8; max-width:480px; margin:0 auto 2.2em; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  background:#020226; color:#fff;
  padding:2.6em 5%;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1em;
  font-size:.82rem; opacity:.7;
}
.footer__logo{ display:flex; align-items:center; gap:.6em; opacity:1; }
.footer__logo img{ height:30px; width:30px; border-radius:7px; }
.footer__contacts{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.2em;
}
.footer__contacts i{ color:var(--yellow); margin-right:.4em; }

@media (max-width:700px){
  .footer{ justify-content:center; text-align:center; }
  .footer__logo{ justify-content:center; }
}

.footer-legal{
  background:#000; color:rgba(255,255,255,.55);
  text-align:center; padding:1em 5%; font-size:.78rem;
}

/* ==========================================================================
   REVEAL ON SCROLL
   ========================================================================== */
.reveal-up{ opacity:0; transform:translateY(36px); transition:opacity .7s ease, transform .7s ease; }
.reveal-up.is-visible{ opacity:1; transform:translateY(0); }