/* ==========================================================================
   Grupo Acro — consórcio em Rio Branco (AC) e Porto Velho (RO)
   Paleta tirada do logo do cliente: dourado metálico + azul escuro.
   ========================================================================== */

:root{
  --azul-900:#050F1F;
  --azul-800:#071A33;
  --azul-700:#0A2141;
  --azul-600:#0E2C55;
  --azul-500:#164074;

  --ouro-600:#B4701F;
  --ouro-500:#DC902C;
  --ouro-400:#F2B14D;
  --ouro-300:#F8C66B;
  --ouro-100:#F0D191;

  --claro:#F7F4ED;
  --claro-2:#EDE8DD;
  --branco:#FFFFFF;

  --txt-d:#E9EFF7;          /* texto sobre fundo escuro */
  --txt-d2:#A8BAD3;         /* secundário sobre escuro  */
  --txt-l:#0A1E3C;          /* texto sobre fundo claro  */
  --txt-l2:#495D79;         /* secundário sobre claro   */

  --linha-d:rgba(220,144,44,.22);
  --linha-l:rgba(10,30,60,.12);

  --wrap:1180px;
  --r:16px;
  --sh:0 18px 50px rgba(3,10,22,.28);

  --ff:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--ff);
  font-size:17px;
  line-height:1.65;
  color:var(--txt-d);
  background:var(--azul-800);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

h1,h2,h3,h4{
  margin:0;
  line-height:1.12;
  letter-spacing:-.022em;
  font-weight:800;
}

p{ margin:0; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px; }
.wrap--narrow{ max-width:800px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ouro-500); color:var(--azul-900);
  padding:12px 18px; border-radius:0 0 10px 0; font-weight:700;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--ouro-400); outline-offset:3px; border-radius:4px; }

/* ============================ HEADER ============================ */

.hdr{
  position:sticky; top:0; z-index:90;
  background:rgba(5,15,31,.86);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid rgba(220,144,44,.16);
}

.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:70px; }

.hdr__logo{ display:block; flex:none; }
.hdr__logo img{ width:auto; height:34px; }

.nav{ display:flex; align-items:center; gap:26px; }

.nav a{
  text-decoration:none;
  font-size:14.5px;
  font-weight:600;
  color:var(--txt-d2);
  transition:color .18s;
  white-space:nowrap;
}
.nav a:hover{ color:var(--ouro-300); }

.nav__cta{
  background:linear-gradient(160deg,var(--ouro-400),var(--ouro-600));
  color:var(--azul-900)!important;
  padding:10px 18px;
  border-radius:999px;
  font-weight:750;
}
.nav__cta:hover{ filter:brightness(1.08); }

.burger{
  display:none;
  width:44px; height:44px;
  background:none; border:1px solid rgba(220,144,44,.3);
  border-radius:11px; cursor:pointer;
  padding:0; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{ display:block; width:19px; height:2px; background:var(--ouro-400); border-radius:2px; transition:transform .22s, opacity .18s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================= HERO ============================= */

.hero{
  position:relative;
  background:
    radial-gradient(120% 90% at 12% 0%, #0E2C55 0%, transparent 58%),
    linear-gradient(175deg,var(--azul-800) 0%, var(--azul-900) 100%);
  overflow:hidden;
  padding:64px 0 76px;
}

.hero__glow{
  position:absolute; inset:auto -10% -46% 40%;
  height:520px;
  background:radial-gradient(circle at 50% 50%, rgba(220,144,44,.20), transparent 62%);
  pointer-events:none;
}

.hero__in{ position:relative; display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:center; }

.eyebrow{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:0 9px;
  font-size:12.5px; font-weight:750; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ouro-300);
  border:1px solid rgba(220,144,44,.34);
  border-radius:999px;
  padding:7px 15px;
  margin-bottom:24px;
  max-width:100%;
}
.eyebrow i{ font-style:normal; opacity:.6; }

.hero__t{
  font-size:clamp(40px,6.4vw,68px);
  letter-spacing:-.035em;
  color:var(--branco);
}
.hero__t em{
  font-style:normal;
  background:linear-gradient(120deg,var(--ouro-300),var(--ouro-500) 55%,var(--ouro-100));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.hero__p{
  margin-top:22px;
  max-width:52ch;
  font-size:17.5px;
  color:var(--txt-d2);
}

.hero__btns{ display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }

.hero__tags{
  list-style:none; margin:36px 0 0; padding:26px 0 0;
  border-top:1px solid var(--linha-d);
  display:flex; flex-wrap:wrap; gap:9px 10px;
}
.hero__tags li{
  font-size:13px; font-weight:600; color:var(--txt-d2);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:7px 14px;
}

.hero__fig{
  margin:0;
  position:relative;
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--sh);
  border:1px solid rgba(242,177,77,.28);
}
.hero__fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.hero__fig figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 18px 14px;
  font-size:13px; font-weight:650; color:#fff;
  background:linear-gradient(to top, rgba(5,15,31,.9), transparent);
}

/* ============================ BOTÕES ============================ */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 27px;
  border-radius:999px;
  font-size:15.5px; font-weight:750;
  text-decoration:none;
  transition:transform .16s, filter .16s, background .16s, color .16s;
  text-align:center;
}
.btn:active{ transform:translateY(1px); }

.btn--gold{
  background:linear-gradient(160deg,var(--ouro-400) 0%, var(--ouro-600) 100%);
  color:var(--azul-900);
  box-shadow:0 10px 26px rgba(220,144,44,.28);
}
.btn--gold:hover{ filter:brightness(1.08); }

.btn--ghost{
  color:var(--txt-d);
  border:1px solid rgba(255,255,255,.22);
}
.btn--ghost:hover{ border-color:var(--ouro-400); color:var(--ouro-300); }

.sec--light .btn--ghost{ color:var(--txt-l); border-color:var(--linha-l); }
.sec--light .btn--ghost:hover{ border-color:var(--ouro-600); color:var(--ouro-600); }

/* ============================ FAIXA ============================= */

.strip{ background:linear-gradient(100deg,var(--ouro-600),var(--ouro-500) 48%,var(--ouro-400)); }
.strip__in{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px 26px; padding-top:26px; padding-bottom:26px; }

.strip__i{ display:flex; flex-direction:column; }
.strip__i b{ font-size:16px; font-weight:800; color:var(--azul-900); letter-spacing:-.01em; }
.strip__i span{ font-size:13.5px; line-height:1.45; color:rgba(5,15,31,.72); }

/* ============================ SEÇÕES ============================ */

.sec{ padding:88px 0; }
.sec--tight{ padding-top:0; }

.sec--dark{ background:var(--azul-800); color:var(--txt-d); }
.sec--light{ background:var(--claro); color:var(--txt-l); }

.sec--dark + .sec--dark{ padding-top:0; }

/* Variante para quando duas seções escuras ficam vizinhas: azul mais profundo
   e um fio dourado no topo, para lerem como dois blocos e não como um só. */
.sec--deep{
  background:
    radial-gradient(80% 120% at 50% 0%, #0C2549 0%, transparent 62%),
    var(--azul-900);
  border-top:1px solid rgba(220,144,44,.22);
}
.sec--dark + .sec--deep{ padding-top:76px; }

.sec__head{ max-width:720px; margin-bottom:52px; }

.kicker{
  font-size:12.5px; font-weight:750; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ouro-600);
  margin-bottom:15px;
}
.sec--dark .kicker, .kicker--gold{ color:var(--ouro-400); }

.sec__head h2{ font-size:clamp(28px,4.1vw,42px); }
.sec--light .sec__head h2{ color:var(--txt-l); }
.sec--dark .sec__head h2{ color:var(--branco); }

.lead{ margin-top:19px; font-size:17px; }
.sec--light .lead{ color:var(--txt-l2); }
.sec--dark .lead{ color:var(--txt-d2); }

.sec__head--center{ margin-left:auto; margin-right:auto; text-align:center; }

/* --------------------------- valores ---------------------------- */

.sec--val{ padding-bottom:80px; }

.vals{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

.val{
  text-align:center;
  background:linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(242,177,77,.24);
  border-radius:var(--r);
  padding:30px 22px 28px;
}
.val__lbl{ font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-d2); }
.val__n{
  margin-top:10px;
  font-size:clamp(40px,5.2vw,54px); font-weight:850; letter-spacing:-.04em; line-height:1;
  background:linear-gradient(120deg,var(--ouro-300),var(--ouro-500) 58%,var(--ouro-100));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.val__n small{ font-size:.46em; font-weight:800; letter-spacing:-.01em; margin:0 .08em; }
.val__sub{ margin-top:10px; font-size:14.5px; color:var(--txt-d2); }

.vals__cta{ margin-top:32px; text-align:center; }
.vals__nota{ margin:18px auto 0; max-width:62ch; font-size:13px; line-height:1.6; color:#8296B2; }

.grid{ display:grid; gap:20px; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }

/* --------------------------- vantagens -------------------------- */

.vcard{
  background:var(--branco);
  border:1px solid var(--linha-l);
  border-radius:var(--r);
  padding:28px 26px 30px;
  position:relative;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.vcard:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(10,30,60,.09); border-color:rgba(220,144,44,.4); }

.vcard__n{
  display:block;
  font-size:12px; font-weight:800; letter-spacing:.1em;
  color:var(--ouro-600);
  margin-bottom:14px;
}
.vcard h3{ font-size:19px; color:var(--txt-l); }
.vcard p{ margin-top:11px; font-size:15px; line-height:1.6; color:var(--txt-l2); }

/* -------------------------- modalidades ------------------------- */

.mod{
  background:linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r);
  overflow:hidden;
  transition:border-color .2s, transform .2s;
  display:flex; flex-direction:column;
}
.mod:hover{ border-color:rgba(242,177,77,.42); transform:translateY(-3px); }

.mod__fig{ position:relative; margin:0; }
.mod__fig img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
/* Só um degradê na base, para o ícone e a borda do card assentarem.
   O miolo da foto fica limpo — as imagens são do próprio cliente. */
.mod__fig::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(7,26,51,.72) 0%, rgba(7,26,51,.06) 38%, rgba(7,26,51,0) 62%);
  pointer-events:none;
}

.mod__ic{
  position:absolute; left:22px; bottom:-26px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px;
  border-radius:15px;
  background:linear-gradient(160deg,#153059,#0B1F3C);
  border:1px solid rgba(242,177,77,.42);
  color:var(--ouro-300);
  box-shadow:0 8px 20px rgba(3,10,22,.45);
}
.mod__ic svg{ width:28px; height:28px; }

.mod__body{ padding:44px 30px 32px; flex:1; }

.mod h3{ font-size:21px; color:var(--branco); }
.mod__body > p{ margin-top:13px; font-size:15px; line-height:1.62; color:var(--txt-d2); }

.mod__selo{
  margin-top:16px!important;
  background:linear-gradient(150deg, rgba(242,177,77,.16), rgba(220,144,44,.05));
  border:1px solid rgba(242,177,77,.34);
  border-radius:11px;
  padding:13px 15px;
  font-size:14.5px!important;
  color:var(--txt-d)!important;
}
.mod__selo b{ display:block; color:var(--ouro-300); font-size:15px; margin-bottom:3px; }

.mod__l{ list-style:none; margin:22px 0 0; padding:20px 0 0; border-top:1px solid rgba(255,255,255,.09); display:grid; gap:9px; }
.mod__l li{ position:relative; padding-left:20px; font-size:14.5px; color:var(--txt-d2); }
.mod__l li::before{
  content:""; position:absolute; left:0; top:8px;
  width:7px; height:7px; border-radius:2px;
  background:linear-gradient(140deg,var(--ouro-300),var(--ouro-600));
}

.mods__foot{ margin-top:32px; font-size:15.5px; color:var(--txt-d2); }
.mods__foot a{ color:var(--ouro-300); font-weight:700; }

/* ----------------------- como funciona -------------------------- */

.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }

.step{
  display:flex; gap:20px; align-items:flex-start;
  background:var(--branco);
  border:1px solid var(--linha-l);
  border-radius:var(--r);
  padding:28px 26px;
}
/* "Como funciona" passou para fundo escuro quando o cliente pediu
   modalidades e contemplados no topo — ver LEIA-ME. */
.sec--dark .step{
  background:linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border-color:rgba(255,255,255,.09);
}
.sec--dark .step h3{ color:var(--branco); }
.sec--dark .step p{ color:var(--txt-d2); }
.step__n{
  flex:none;
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:13px;
  background:linear-gradient(160deg,var(--ouro-400),var(--ouro-600));
  color:var(--azul-900);
  font-size:17px; font-weight:850;
}
.step h3{ font-size:18.5px; color:var(--txt-l); }
.step p{ margin-top:9px; font-size:15px; line-height:1.6; color:var(--txt-l2); }

/* -------------------------- galeria ----------------------------- */

/* 3 fotos quadradas na 1ª linha + 2 artes 4:3 na 2ª — as duas linhas fecham cheias */
.gal{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.gal__i{ grid-column:span 2; }
.gal__i--wide{ grid-column:span 3; }

.gal__i{
  position:relative;
  display:block;
  padding:0; margin:0;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  overflow:hidden;
  background:var(--azul-700);
  cursor:pointer;
  transition:transform .2s, border-color .2s;
  -webkit-tap-highlight-color:transparent;
}
.gal__i:hover{ transform:translateY(-3px); border-color:rgba(242,177,77,.5); }
.gal__i img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.gal__i--wide img{ aspect-ratio:1320/955; }

.gal__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:30px 14px 12px;
  font-size:13px; font-weight:650; color:#fff; text-align:left;
  background:linear-gradient(to top, rgba(5,15,31,.88), transparent);
}

.gal__foot{ margin-top:26px; font-size:14.5px; color:var(--txt-d2); max-width:70ch; }
.gal__foot--nota{ margin-top:12px; font-size:13.5px; color:#8296B2; }
.gal__foot--nota b{ color:var(--ouro-300); font-weight:700; }

/* A galeria passou para fundo claro quando os contemplados subiram para o topo.
   As legendas continuam sobre a foto, então só muda a moldura e os textos de apoio. */
.sec--light .gal__i{ background:var(--claro-2); border-color:rgba(10,30,60,.12); }
.sec--light .gal__i:hover{ border-color:rgba(180,112,31,.55); }
.sec--light .gal__foot{ color:var(--txt-l2); }
.sec--light .gal__foot--nota{ color:#6B7C93; }
.sec--light .gal__foot--nota b{ color:var(--ouro-600); }

/* ---------------------------- FAQ ------------------------------- */

.faq{ display:grid; gap:11px; }

.faq__i{
  background:var(--branco);
  border:1px solid var(--linha-l);
  border-radius:13px;
  overflow:hidden;
}
.faq__i[open]{ border-color:rgba(220,144,44,.42); }

.faq__i summary{
  list-style:none;
  cursor:pointer;
  padding:19px 52px 19px 22px;
  font-size:16px; font-weight:700; color:var(--txt-l);
  position:relative;
}
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__i summary::after{
  content:""; position:absolute; right:22px; top:50%;
  width:9px; height:9px;
  border-right:2px solid var(--ouro-600); border-bottom:2px solid var(--ouro-600);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .2s;
}
.faq__i[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }

.faq__c{ padding:0 22px 21px; }
.faq__c p{ font-size:15.2px; line-height:1.65; color:var(--txt-l2); }
.faq__c b{ color:var(--txt-l); }

/* -------------------------- unidades ---------------------------- */

.uni{
  background:linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r);
  padding:32px 30px;
}
.uni__uf{
  font-size:12px; font-weight:750; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ouro-400); margin-bottom:9px;
}
.uni h3{ font-size:26px; color:var(--branco); }
.uni address{
  font-style:normal;
  margin-top:16px;
  font-size:15.5px; line-height:1.62; color:var(--txt-d2);
}
.uni__tel{ margin-top:18px; }
.uni__tel a{
  display:inline-block;
  font-size:20px; font-weight:800; letter-spacing:-.01em;
  color:var(--branco); text-decoration:none;
}
.uni__tel a:hover{ color:var(--ouro-300); }

.uni__map{
  display:inline-block; margin-top:16px;
  font-size:14.5px; font-weight:700; color:var(--ouro-300);
  text-decoration:none;
  border-bottom:1px solid rgba(242,177,77,.35);
  padding-bottom:2px;
}
.uni__map:hover{ color:var(--ouro-100); }

/* ---------------------------- CTA ------------------------------- */

.cta{
  background:
    radial-gradient(90% 120% at 50% 0%, #10305C 0%, transparent 60%),
    linear-gradient(180deg,var(--azul-900),var(--azul-800));
  border-top:1px solid var(--linha-d);
  padding:88px 0;
}
.cta__in{ text-align:center; max-width:720px; }
.wrap.cta__in{ margin:0 auto; }
.cta h2{ font-size:clamp(28px,4.3vw,44px); color:var(--branco); }
.cta__p{ margin:20px auto 0; max-width:56ch; font-size:17px; color:var(--txt-d2); }
.cta__btns{ display:flex; flex-wrap:wrap; gap:13px; justify-content:center; margin-top:34px; }

/* --------------------------- FOOTER ----------------------------- */

.ft{ background:var(--azul-900); border-top:1px solid rgba(255,255,255,.07); padding:62px 0 0; }

.ft__in{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px; }

.ft__brand img{ width:auto; height:48px; }
.ft__brand p{ margin-top:16px; font-size:14.5px; color:var(--txt-d2); max-width:30ch; }

.ft__col h4{ font-size:12.5px; font-weight:750; letter-spacing:.13em; text-transform:uppercase; color:var(--ouro-400); margin-bottom:16px; }
.ft__col a, .ft__col p{ display:block; font-size:14.5px; line-height:1.55; color:var(--txt-d2); text-decoration:none; margin-bottom:10px; }
.ft__col a:hover{ color:var(--ouro-300); }

.ft__legal{ margin-top:52px; padding-top:24px; padding-bottom:30px; border-top:1px solid rgba(255,255,255,.07); }
.ft__legal p{ font-size:12.6px; line-height:1.62; color:#7E90AB; max-width:88ch; }

.ft__adm{
  font-size:14px!important; line-height:1.6!important;
  color:var(--txt-d2)!important;
  margin-bottom:16px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.ft__adm b{ color:var(--branco); font-weight:750; }
.ft__cr{ margin-top:14px!important; }

/* -------------------------- LIGHTBOX ---------------------------- */

.lb{
  position:fixed; inset:0; z-index:150;
  background:rgba(3,9,19,.94);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  animation:fade .18s ease;
}
.lb[hidden]{ display:none; }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }

.lb__f{ margin:0; max-width:min(720px,92vw); }
.lb__f img{ width:100%; border-radius:12px; max-height:78vh; object-fit:contain; }
.lb__f figcaption{ margin-top:14px; text-align:center; font-size:14px; color:var(--txt-d2); }

.lb__x{
  position:absolute; top:16px; right:18px;
  width:46px; height:46px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);
  color:#fff; font-size:28px; line-height:1;
  border-radius:50%; cursor:pointer;
}
.lb__x:hover{ background:rgba(255,255,255,.14); }

/* ---------------------------- FAB ------------------------------- */

.fab{
  position:fixed; right:18px; bottom:18px; z-index:80;
  width:58px; height:58px;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  border-radius:50%;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  transition:transform .18s;
}
.fab:hover{ transform:scale(1.06); }
.fab svg{ width:31px; height:31px; }
.fab[hidden]{ display:none; }

/* ------------------------- REVEAL ------------------------------- */

/* O estado inicial só vale quando o JS assumiu o controle (classe js no <html>).
   Sem JS — ou se o script falhar — o conteúdo aparece normalmente. */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
.js .reveal.is-in{ opacity:1; transform:none; }

/* ========================= RESPONSIVO ============================ */

@media (max-width:1000px){
  /* Pedido do cliente (vídeo de 30/07): no celular a foto entra
     entre o título e o texto — título → foto → texto → botões. */
  .hero__in{ display:flex; flex-direction:column; gap:0; }
  .hero__txt{ display:contents; }
  .eyebrow  { order:1; }
  .hero__t  { order:2; }
  .hero__fig{ order:3; margin:26px 0 0; max-width:460px; }
  .hero__p  { order:4; margin-top:26px; }
  .hero__btns{ order:5; }
  .hero__tags{ order:6; }

  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .ft__in{ grid-template-columns:1fr 1fr; gap:32px; }
  .vals{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  .burger{ display:flex; }

  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--azul-900);
    border-bottom:1px solid var(--linha-d);
    padding:8px 22px 20px;
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:16px; }
  .nav__cta{ margin-top:14px; text-align:center; border-bottom:none!important; padding:14px 18px; }

  .strip__in{ grid-template-columns:repeat(2,1fr); gap:20px 22px; }
  .steps{ grid-template-columns:1fr; }
  .gal{ grid-template-columns:repeat(2,1fr); }
  .gal__i, .gal__i--wide{ grid-column:span 1; }
}

@media (max-width:680px){
  body{ font-size:16.5px; }
  .sec{ padding:64px 0; }
  .hero{ padding:44px 0 58px; }
  .hero__t{ font-size:clamp(34px,10vw,46px); }
  .sec__head{ margin-bottom:38px; }
  .grid--2, .grid--3{ grid-template-columns:1fr; }
  .hero__btns .btn, .cta__btns .btn{ flex:1 1 100%; }
  .hero__fig{ max-width:none; }
  .ft__in{ grid-template-columns:1fr; gap:30px; }
  .ft__brand img{ height:44px; }
  .uni{ padding:26px 22px 28px; }
  .mod__body{ padding:42px 22px 28px; }
  .mod__ic{ left:18px; width:50px; height:50px; bottom:-24px; }
  .vcard{ padding:24px 22px 26px; }
  .gal__cap{ font-size:12px; padding:26px 11px 10px; }
}

@media (max-width:420px){
  .gal{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
  .js .reveal{ opacity:1; transform:none; }
}