/* =====================================================================
   ANDAIME — Soluções em Acesso
   Modern stylesheet (refined-industrial) — 2026 redesign
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --red:        #da251c;
  --red-dark:   #b51c14;
  --ink:        #15171a;   /* near-black charcoal */
  --ink-2:      #2c3036;
  --muted:      #6b7079;
  --line:       #e7e6e3;
  --paper:      #ffffff;
  --paper-2:    #f6f5f2;   /* warm off-white */
  --paper-3:    #efeeea;

  --display: "Archivo", system-ui, sans-serif;
  --body:    "Jost", system-ui, sans-serif;

  --maxw: 1240px;
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(20,23,26,.06);
  --shadow-md: 0 18px 40px -22px rgba(20,23,26,.35);
  --shadow-lg: 0 40px 80px -30px rgba(20,23,26,.45);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:17px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:1.05; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }

::selection{ background:var(--red); color:#fff; }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:4px; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* Section rhythm */
section{ position:relative; }
.section-pad{ padding:120px 0; }
@media (max-width:768px){ .section-pad{ padding:76px 0; } }

/* Eyebrow / kicker */
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:700;
  font-size:12.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--red);
}
.kicker::before{ content:""; width:30px; height:2px; background:var(--red); display:inline-block; }

.section-head{ max-width:720px; margin-bottom:62px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .kicker::before{ display:none; }
.section-head h2{
  font-size:clamp(30px,4.4vw,52px); margin-top:18px; letter-spacing:-.025em;
}
.section-head p{ color:var(--muted); margin-top:18px; font-size:18px; text-wrap:pretty; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--body); font-weight:700; font-size:14px; letter-spacing:.04em;
  padding:15px 28px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:all .35s var(--ease); text-transform:uppercase;
}
.btn i{ transition:transform .35s var(--ease); }
.btn-primary{ background:var(--red); color:#fff; }
.btn-primary:hover{ background:var(--red-dark); transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(218,37,28,.7); }
.btn-primary:hover i{ transform:translateX(4px); }
.btn-ghost{ border-color:rgba(255,255,255,.45); color:#fff; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.btn-ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; transform:translateY(-2px); }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  padding:18px 0; transition:all .4s var(--ease);
}
.site-header::after{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(1.3) blur(12px); backdrop-filter:saturate(1.3) blur(12px);
  opacity:0; transition:opacity .4s var(--ease); z-index:-1;
  box-shadow:0 1px 0 var(--line);
}
.site-header.scrolled{ padding:11px 0; }
.site-header.scrolled::after{ opacity:1; }
.site-header.scrolled .nav-link{ color:var(--ink); }
.site-header.scrolled .brand-logo{ filter:none; }

.header-inner{ display:flex; align-items:center; gap:24px; }
.brand-logo{ height:34px; width:auto; }
/* Header transparente sobre o hero escuro: placa branca atrás do logo
   garante contraste sem alterar as cores originais da marca */
.brand{
  display:inline-flex; align-items:center;
  background:#fff; border-radius:10px; padding:8px 14px;
  box-shadow:0 6px 18px -8px rgba(13,15,17,.45);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.site-header.scrolled .brand{
  background:transparent; box-shadow:none; padding:8px 0;
}
@media (min-width:992px){ .brand-logo{ height:38px; } }

.primary-nav{ flex:1; display:flex; align-items:center; gap:30px; }
.nav-links{ flex:1; display:flex; align-items:center; justify-content:center; gap:30px; }
.nav-link{
  font-family:var(--body); font-weight:600; font-size:13.5px; letter-spacing:.08em;
  text-transform:uppercase; color:#fff; position:relative; padding:6px 2px;
  white-space:nowrap; display:inline-block;
  transition:color .28s var(--ease), transform .28s var(--ease);
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--red);
  transition:width .3s var(--ease);
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-link.active{ color:var(--red); transform:translateY(-3px); }
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.active::after{ width:100%; }

.nav-meta{ display:flex; align-items:center; gap:18px; }
.iso-badge{ height:30px; width:auto; border-radius:4px; background:#fff; }
.social{ display:flex; gap:8px; }
.social a{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--red); color:#fff; font-size:14px; transition:all .3s var(--ease);
}
.social a:hover{ background:var(--ink); transform:translateY(-2px); }

.nav-toggle{
  display:none; width:46px; height:46px; border:none; background:transparent; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:flex-end; gap:6px;
}
.nav-toggle span{ display:block; height:2.5px; width:26px; background:#fff; border-radius:2px; transition:all .3s var(--ease); }
.site-header.scrolled .nav-toggle span{ background:var(--ink); }
.nav-toggle.open span:nth-child(1){ transform:translateY(8.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-8.5px) rotate(-45deg); }

@media (max-width:991px){
  .nav-toggle{ display:flex; }
  .primary-nav{
    position:fixed; inset:0 0 0 auto; width:min(86vw,360px);
    background:#fff; flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:104px 34px 40px; gap:6px; box-shadow:var(--shadow-lg);
    transform:translateX(105%); transition:transform .45s var(--ease);
  }
  .primary-nav.open{ transform:translateX(0); }
  .nav-links{ flex-direction:column; align-items:flex-start; gap:4px; width:100%; }
  .nav-link{ color:var(--ink); width:100%; padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; }
  .nav-link::after{ display:none; }
  .nav-link:hover, .nav-link:focus-visible, .nav-link.active{ color:var(--red); transform:translateX(6px); }
  .nav-meta{ flex-direction:column; align-items:flex-start; border-left:none; padding-left:0; margin-top:24px; gap:18px; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden;
  background:linear-gradient(90deg, rgba(13,15,17,.92) 0%, rgba(13,15,17,.72) 45%, rgba(13,15,17,.38) 100%),
             url("../images/home-bg.jpg") center/cover no-repeat;
  color:#fff;
}
.hero::after{ /* vignette + scaffold grid hint */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(13,15,17,.55), transparent 30%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 120px);
}
.hero-inner{ position:relative; z-index:2; max-width:760px; padding:130px 0 90px; }
.hero-inner > *{ opacity:0; transform:translateY(28px); animation:hero-up .9s var(--ease) forwards; }
.hero-inner > *:nth-child(2){ animation-delay:.12s; }
.hero-inner > *:nth-child(3){ animation-delay:.24s; }
.hero-inner > *:nth-child(4){ animation-delay:.36s; }
.hero-stats{ animation:hero-fade 1.2s var(--ease) .5s backwards; }
@keyframes hero-up{ to{ opacity:1; transform:none; } }
@keyframes hero-fade{ from{ opacity:0; } }
@media (prefers-reduced-motion:reduce){
  .hero-inner > *{ animation:none; opacity:1; transform:none; }
  .hero-stats{ animation:none; }
}
.hero .kicker{ color:#fff; }
.hero .kicker::before{ background:var(--red); }
.hero h1{
  color:#fff; font-size:clamp(40px,6.6vw,80px); margin-top:22px; line-height:.98;
}
.hero h1 .accent{ color:var(--red); }
.hero p{ font-size:clamp(17px,2vw,21px); color:rgba(255,255,255,.82); margin-top:26px; max-width:560px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; }

.hero-stats{
  position:absolute; right:0; bottom:0; z-index:2;
  display:flex; gap:0; background:rgba(255,255,255,.06); backdrop-filter:blur(6px);
  border-top:1px solid rgba(255,255,255,.12); border-left:1px solid rgba(255,255,255,.12);
}
.hero-stats .hs{ padding:22px 34px; border-right:1px solid rgba(255,255,255,.12); }
.hero-stats .hs:last-child{ border-right:none; }
.hero-stats .num{ font-family:var(--display); font-weight:800; font-size:30px; color:#fff; line-height:1; }
.hero-stats .lbl{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:7px; }
@media (max-width:991px){ .hero-stats{ display:none; } }

.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  color:rgba(255,255,255,.6); font-size:11px; letter-spacing:.25em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-cue .line{ width:1px; height:42px; background:linear-gradient(rgba(255,255,255,.6),transparent); animation:cue 2s var(--ease) infinite; }
@keyframes cue{ 0%{transform:scaleY(.2);transform-origin:top;opacity:0;} 40%{opacity:1;} 100%{transform:scaleY(1);transform-origin:top;opacity:0;} }
@media (max-width:768px){ .scroll-cue{ display:none; } }

/* =====================================================================
   ABOUT
   ===================================================================== */
#about{ background:var(--paper-2); }
.about-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:center; }
.about-copy .kicker{ margin-bottom:0; }
.about-copy h2{ font-size:clamp(28px,3.8vw,46px); margin-top:18px; }
.about-copy p{ color:var(--ink-2); margin-top:20px; font-size:17px; line-height:1.75; }
.about-features{ display:grid; grid-template-columns:1fr 1fr; gap:14px 26px; margin-top:32px; }
.about-features li{ display:flex; align-items:center; gap:12px; font-weight:500; }
.about-features i{ color:var(--red); width:26px; height:26px; border-radius:50%; background:rgba(218,37,28,.1); display:grid; place-items:center; font-size:12px; flex-shrink:0; }

.about-visual{ position:relative; }
.about-visual img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow-md); }
.about-visual::before{ /* red corner frame */
  content:""; position:absolute; top:-18px; left:-18px; width:120px; height:120px;
  border-top:4px solid var(--red); border-left:4px solid var(--red); border-radius:8px 0 0 0; z-index:1;
}
.about-chip{
  position:absolute; right:-14px; bottom:-22px; background:var(--ink); color:#fff;
  padding:22px 26px; border-radius:12px; box-shadow:var(--shadow-md); text-align:center;
}
.about-chip .big{ font-family:var(--display); font-weight:800; font-size:38px; line-height:1; color:var(--red); }
.about-chip .small{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-top:6px; }

@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; gap:60px; }
  .about-visual{ max-width:520px; margin:0 auto; }
}

/* =====================================================================
   SERVICES
   ===================================================================== */
#services{ background:var(--paper); }
#services .section-head{ margin-bottom:56px; }
.service-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.service-card{
  position:relative; overflow:hidden; aspect-ratio:3/4;
  display:block;
}
.service-card img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.service-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(13,15,17,.88) 0%, rgba(13,15,17,.30) 50%, rgba(13,15,17,0) 72%);
}
.service-card:hover img{ transform:scale(1.06); }
.service-info{
  position:absolute; left:0; right:0; bottom:18%; z-index:2;
  padding:0 24px; text-align:right;
  transition:transform .5s var(--ease);
}
.service-card:hover .service-info{ transform:translateY(-6px); }
.service-info::before{
  content:""; display:block; width:36px; height:2px;
  background:#fff; margin:0 0 12px auto;
  transition:width .5s var(--ease), background .5s var(--ease);
}
.service-card:hover .service-info::before{ width:56px; background:var(--red); }
.service-info h3{
  color:#fff; font-size:18px; font-weight:700;
  text-transform:uppercase; letter-spacing:.10em; line-height:1.4;
}

@media (max-width:1080px){ .service-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .service-grid{ grid-template-columns:1fr 1fr; } .service-card{ aspect-ratio:4/3; } }

/* =====================================================================
   COUNTER
   ===================================================================== */
#counter{ background:var(--ink); color:#fff; padding:96px 0; }
.counter-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.counter-item{ text-align:center; padding:18px; position:relative; }
.counter-item:not(:last-child)::after{ content:""; position:absolute; right:-10px; top:18%; height:64%; width:1px; background:rgba(255,255,255,.14); }
.counter-num{ font-family:var(--display); font-weight:800; font-size:clamp(44px,5vw,64px); line-height:1; color:#fff; font-variant-numeric:tabular-nums; }
.counter-num .plus{ color:var(--red); }
.counter-label{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:14px; }
@media (max-width:680px){
  .counter-grid{ grid-template-columns:1fr 1fr; gap:36px 12px; }
  .counter-item::after{ display:none; }
}

/* =====================================================================
   CLIENTS
   ===================================================================== */
#testimonial{ background:var(--paper-2); }

/* ----- Galeria estática de logos ----- */
.client-grid{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; }
.client-cell{
  flex:0 0 calc((100% - 5 * 18px) / 6);
  background:#fff; border:1px solid var(--line); border-radius:12px; aspect-ratio:3/2;
  display:grid; place-items:center; padding:24px;
  transition:box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.client-cell img{
  max-height:64px; max-width:100%; width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.6; transition:all .35s var(--ease);
}
.client-cell:hover{ border-color:transparent; box-shadow:var(--shadow-md); transform:translateY(-4px); }
.client-cell:hover img{ filter:none; opacity:1; }
/* Janelas de computador mais estreitas: 4 por linha, logos maiores */
@media (max-width:1280px){
  .client-cell{ flex-basis:calc((100% - 3 * 18px) / 4); }
  .client-cell img{ max-height:72px; }
}
/* Tablet: 3 por linha */
@media (max-width:980px){
  .client-cell{ flex-basis:calc((100% - 2 * 18px) / 3); }
  .client-cell img{ max-height:78px; }
}
/* Celular: 2 por linha, logos bem visíveis */
@media (max-width:640px){
  .client-grid{ gap:12px; }
  .client-cell{ flex-basis:calc((100% - 12px) / 2); padding:22px; }
  .client-cell img{ max-height:84px; }
}

/* =====================================================================
   PORTFOLIO
   ===================================================================== */
#blog{ background:var(--paper); }
.portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.project{ border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:var(--shadow-sm);
  border:1px solid var(--line); transition:transform .4s var(--ease), box-shadow .4s var(--ease); display:flex; flex-direction:column; }
.project:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }
.project-media{ position:relative; aspect-ratio:16/11; overflow:hidden; }
.project-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.project:hover .project-media img{ transform:scale(1.07); }
.project-body{ padding:24px 24px 26px; display:flex; flex-direction:column; gap:7px; flex:1; }
.project-loc{ font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); font-weight:700; display:flex; align-items:center; gap:7px; }
.project-body h3{ font-size:21px; letter-spacing:-.01em; }
.project-more{ margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:9px;
  font-weight:700; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); }
.project-more i{ color:var(--red); transition:transform .3s var(--ease); }
.project:hover .project-more i{ transform:translateX(5px); }
@media (max-width:980px){ .portfolio-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .portfolio-grid{ grid-template-columns:1fr; } }

/* =====================================================================
   CERTIFICATES
   ===================================================================== */
#certificates{ background:var(--paper-3); }
.cert-grid{
  display:flex; justify-content:center; align-items:center; gap:72px;
}
.cert-grid:hover .cert-item{ opacity:.25; }
.cert-item{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-decoration:none; transition:opacity .4s var(--ease);
}
.cert-grid:hover .cert-item:hover{ opacity:1; }
.cert-icon{
  width:110px; height:110px; border-radius:var(--radius);
  background:var(--paper); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition:box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.cert-item:hover .cert-icon{
  border-color:var(--red); box-shadow:var(--shadow-md);
}
.cert-icon img{ height:60px; width:auto; }
.cert-item--rina img{ height:80px; width:auto; mix-blend-mode:multiply; }
.cert-item--rina{ gap:6px; }
.cert-item--codigo img{ height:52px; width:auto; mix-blend-mode:multiply; transform:translateY(11px); }
.cert-item--codigo{ gap:16px; }
.cert-item--codigo span{ transform:translateY(5px); }
.cert-icon i{ font-size:46px; color:var(--ink-2); }
.cert-item span{
  font-family:var(--body); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  text-align:center; line-height:1.6; color:var(--red);
}

/* =====================================================================
   CONTACT
   ===================================================================== */
#contact{
  background:linear-gradient(rgba(13,15,17,.93),rgba(13,15,17,.93)), url("../images/contact-bg.jpg") center/cover fixed;
  color:#fff;
}
#contact .kicker{ color:#fff; }
#contact .section-head h2{ color:#fff; }
#contact .section-head p{ color:rgba(255,255,255,.65); }
.contact-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.contact-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius);
  padding:30px 26px; transition:all .35s var(--ease);
}
.contact-card:hover{ background:rgba(255,255,255,.08); transform:translateY(-4px); border-color:rgba(218,37,28,.5); }
.contact-card h4{ color:#fff; font-size:13px; letter-spacing:.16em; text-transform:uppercase; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid rgba(255,255,255,.12); }
.contact-card h4 span{ color:var(--red); }
.contact-card .row-line{ display:flex; gap:12px; align-items:flex-start; margin-bottom:13px; font-size:14.5px; color:rgba(255,255,255,.82); }
.contact-card .row-line i{ color:var(--red); width:18px; text-align:center; margin-top:4px; flex-shrink:0; }
.contact-card a{ transition:color .25s var(--ease); }
.contact-card a:hover{ color:var(--red); }

.contact-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px; margin-top:34px;
  padding:24px 28px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); }
.contact-foot .cf-item{ display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.85); font-size:15px; }
.contact-foot .cf-item i{ color:var(--red); }

@media (max-width:980px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .contact-grid{ grid-template-columns:1fr; } #contact{ background-attachment:scroll; } }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{ background:#fff; color:var(--muted); padding:42px 0; border-top:1px solid var(--line); }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; }
.footer-inner img{ height:32px; }
.footer-inner .copy{ font-size:13px; letter-spacing:.04em; color:var(--muted); }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--paper-2); color:var(--ink); border:1px solid var(--line); transition:all .3s var(--ease); }
.footer-social a:hover{ background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-2px); }

/* =====================================================================
   SCROLL REVEAL
   ===================================================================== */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; } html{ scroll-behavior:auto; } }


/* =====================================================================
   INNER PAGES — banner, gallery, lightbox, specs, CTA
   ===================================================================== */

/* Page banner / sub-hero */
.page-hero{
  position:relative; min-height:54vh; display:flex; align-items:flex-end;
  padding:150px 0 60px; color:#fff; overflow:hidden;
  background:linear-gradient(90deg, rgba(13,15,17,.92), rgba(13,15,17,.62) 60%, rgba(13,15,17,.42)),
             var(--hero-img, #15171a) center/cover no-repeat;
}
.page-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(13,15,17,.6), transparent 34%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 120px);
}
.page-hero .container{ position:relative; z-index:2; }
.breadcrumb{ display:flex; align-items:center; gap:10px; font-size:13px; letter-spacing:.05em;
  color:rgba(255,255,255,.7); text-transform:uppercase; font-weight:600; margin-bottom:18px; }
.breadcrumb a{ transition:color .25s var(--ease); }
.breadcrumb a:hover{ color:var(--red); }
.breadcrumb .sep{ color:rgba(255,255,255,.35); }
.breadcrumb .here{ color:var(--red); }
.page-hero h1{ color:#fff; font-size:clamp(34px,5.6vw,62px); line-height:1; letter-spacing:-.02em; }
.page-hero .loc{ display:inline-flex; align-items:center; gap:9px; margin-top:18px;
  font-weight:600; letter-spacing:.04em; color:#fff; font-size:16px; }
.page-hero .loc i{ color:var(--red); }
.page-hero .tagline{ margin-top:18px; max-width:620px; color:rgba(255,255,255,.82); font-size:18px; }

/* Lead text block */
.lead-block{ max-width:840px; margin:0 auto; }
.lead-block p{ font-size:19px; line-height:1.8; color:var(--ink-2); }
.lead-block p + p{ margin-top:22px; }

/* Spec rows (image + text, alternating) */
.spec-row{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.spec-row + .spec-row{ margin-top:72px; }
.spec-row:nth-child(even) .spec-media{ order:2; }
.spec-media img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow-md); }
.spec-copy .idx{ font-family:var(--display); font-weight:800; color:var(--red); font-size:14px; letter-spacing:.1em; }
.spec-copy h3{ font-size:clamp(24px,3vw,34px); margin-top:10px; }
.spec-copy p{ color:var(--ink-2); margin-top:16px; font-size:17px; line-height:1.8; }
@media (max-width:820px){
  .spec-row{ grid-template-columns:1fr; gap:28px; }
  .spec-row:nth-child(even) .spec-media{ order:0; }
}

/* Red info cards */
.info-cards{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:64px; }
.info-card{ background:linear-gradient(135deg, var(--red), var(--red-dark)); color:#fff;
  border-radius:var(--radius); padding:34px 30px; box-shadow:0 24px 50px -28px rgba(218,37,28,.7); }
.info-card .ic{ width:54px; height:54px; border-radius:14px; background:rgba(255,255,255,.16);
  display:grid; place-items:center; font-size:24px; margin-bottom:18px; }
.info-card h4{ color:#fff; font-size:20px; }
.info-card p{ color:rgba(255,255,255,.9); margin-top:10px; font-size:15px; line-height:1.65; }
@media (max-width:680px){ .info-cards{ grid-template-columns:1fr; } }

/* Gallery grid */
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.gallery-item{ position:relative; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden;
  cursor:zoom-in; box-shadow:var(--shadow-sm); background:#000; }
.gallery-item img, .gallery-item video{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.gallery-item:hover img{ transform:scale(1.07); }
.gallery-item::after{ content:"\f00e"; font-family:"FontAwesome"; position:absolute; inset:0;
  display:grid; place-items:center; color:#fff; font-size:26px; background:rgba(13,15,17,.42);
  opacity:0; transition:opacity .35s var(--ease); }
.gallery-item:hover::after{ opacity:1; }
.gallery-item.is-video::after{ content:"\f04b"; font-size:22px; opacity:1; background:rgba(13,15,17,.3);
  width:62px; height:62px; border-radius:50%; inset:auto; left:50%; top:50%; transform:translate(-50%,-50%); }
.gallery-item.is-video:hover::after{ background:var(--red); }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:2000; background:rgba(8,9,10,.95);
  display:none; align-items:center; justify-content:center; padding:32px; }
.lightbox.open{ display:flex; animation:lb-in .35s var(--ease); }
.lightbox.open .lightbox-media{ animation:lb-zoom .45s var(--ease); }
@keyframes lb-in{ from{ opacity:0; } }
@keyframes lb-zoom{ from{ opacity:0; transform:scale(.96); } }
.lightbox-media{ max-width:92vw; max-height:86vh; }
.lightbox-media img, .lightbox-media video{ max-width:92vw; max-height:86vh; border-radius:8px; display:block; }
.lb-btn{ position:absolute; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#fff; width:52px; height:52px; border-radius:50%; cursor:pointer; font-size:20px;
  display:grid; place-items:center; transition:all .25s var(--ease); }
.lb-btn:hover{ background:var(--red); border-color:var(--red); }
.lb-close{ top:24px; right:24px; }
.lb-prev{ left:24px; top:50%; transform:translateY(-50%); }
.lb-next{ right:24px; top:50%; transform:translateY(-50%); }
@media (max-width:640px){ .lb-prev,.lb-next{ top:auto; bottom:24px; transform:none; } .lb-next{ right:24px; } .lb-prev{ left:24px; } }

/* CTA band */
.cta-band{ position:relative; overflow:hidden; background:linear-gradient(120deg, var(--red), var(--red-dark)); color:#fff; text-align:center; padding:80px 0; }
.cta-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 120px);
}
.cta-band .container{ position:relative; z-index:2; }
.cta-band h2{ color:#fff; font-size:clamp(28px,4vw,46px); }
.cta-band p{ color:rgba(255,255,255,.9); margin-top:14px; font-size:18px; }
.cta-band .btn-white{ background:#fff; color:var(--ink); margin-top:30px; }
.cta-band .btn-white:hover{ background:var(--ink); color:#fff; transform:translateY(-2px); }

/* =====================================================================
   ELEVADORES — norm pills, model cards, differentials
   ===================================================================== */
.norm-pills{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:26px; }
.norm-pill{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:9px 18px; font-weight:600; font-size:13px; letter-spacing:.03em; color:var(--ink); }
.norm-pill i{ color:var(--red); }

.model-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.model-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:36px 32px;
  box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.model-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:transparent; }
.model-card .tag{ display:inline-block; background:rgba(218,37,28,.1); color:var(--red);
  font-weight:700; font-size:12px; letter-spacing:.1em; padding:6px 14px; border-radius:999px; text-transform:uppercase; }
.model-card h3{ margin-top:16px; font-size:25px; letter-spacing:-.01em; }
.model-card p{ color:var(--ink-2); margin-top:14px; font-size:15.5px; line-height:1.72; }
.spec-list{ display:grid; grid-template-columns:1fr 1fr; gap:18px 14px; margin-top:26px; padding-top:24px; border-top:1px solid var(--line); }
.spec-list .s .k{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.spec-list .s .v{ font-family:var(--display); font-weight:700; font-size:18px; color:var(--ink); margin-top:3px; }
@media (max-width:820px){ .model-grid{ grid-template-columns:1fr; } }

.diff-list{ display:grid; grid-template-columns:1fr 1fr; gap:16px 34px; max-width:900px; margin:0 auto; }
.diff-list li{ display:flex; gap:13px; align-items:flex-start; font-size:16px; color:var(--ink-2); line-height:1.55; }
.diff-list i{ color:var(--red); width:26px; height:26px; border-radius:50%; background:rgba(218,37,28,.1);
  display:grid; place-items:center; font-size:11px; flex-shrink:0; margin-top:2px; }
@media (max-width:680px){ .diff-list{ grid-template-columns:1fr; } }

/* =====================================================================
   POLISH — acabamento fino
   ===================================================================== */

/* Scrollbar discreta */
html{ scrollbar-width:thin; scrollbar-color:#c9c7c2 var(--paper-2); }
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--paper-2); }
::-webkit-scrollbar-thumb{ background:#c9c7c2; border-radius:8px; border:3px solid var(--paper-2); }
::-webkit-scrollbar-thumb:hover{ background:var(--muted); }

/* Parágrafos com quebras mais harmoniosas */
p{ text-wrap:pretty; }

/* Cartões de projeto: véu sutil sobre a foto no hover */
.project-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(13,15,17,.22), transparent 45%);
  opacity:0; transition:opacity .4s var(--ease);
}
.project:hover .project-media::after{ opacity:1; }

/* Sublinhado elegante em links de texto corrido */
.contact-card a, .contact-foot a{
  background-image:linear-gradient(currentColor, currentColor);
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .3s var(--ease), color .25s var(--ease);
}
.contact-card a:hover, .contact-foot a:hover{ background-size:100% 1px; }

/* Botões: anel de foco coerente com a marca */
.btn:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
.btn:active{ transform:translateY(0) scale(.98); }

/* Imagens da galeria: leve fade ao carregar */
.gallery-item img, .project-media img, .client-cell img{
  backface-visibility:hidden;
}

/* =====================================================================
   SKIP-TO-CONTENT (a11y)
   ===================================================================== */
.skip-link{
  position:fixed; top:-100%; left:12px; z-index:9999;
  padding:12px 24px; background:var(--ink); color:#fff;
  font-family:var(--body); font-weight:700; font-size:14px;
  border-radius:0 0 8px 8px; text-decoration:none;
  transition:top .25s var(--ease);
}
.skip-link:focus{
  top:0; outline:2px solid var(--red); outline-offset:2px;
}