/* Poppins auto-hospedada 06/10/2026 */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/poppins-900.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ==========================================================================
   Nobre Demolidora, style.css
   Paleta: azul royal #012C8B + preto #111 + vermelho #EB1A10 + branco (ref. criativo 21/07)
   Fonte unica: Poppins (definida pela cliente em 29/07/2026)
   ========================================================================== */

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden;max-width:100vw}
img,video,svg,iframe{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none}

/* ---- Typography balancing (regra Bianca) ---- */
h1,h2,h3,h4,h5,h6{text-wrap:balance;line-height:1.05}
p,li,.hero-sub,.section-sub{text-wrap:pretty}

:root{
  --navy:#012472;        /* azul royal do criativo (dominante) */
  --navy-2:#01133F;      /* azul quase preto (fundo profundo) */
  --navy-3:#012C8B;      /* azul royal claro p/ gradiente/blueprint */
  --black:#111111;       /* preto do criativo */
  --ink:#141414;         /* texto escuro (preto, como no criativo) */
  --red:#EB1A10;         /* vermelho da marca (destaque) */
  --red-2:#ff3b2f;
  --red-dark:#b3120a;
  --bg:#f4f6fa;
  --surface:#ffffff;
  --cream:#e8edf5;       /* claro frio (harmoniza com navy) */
  --muted:#5a6070;
  --line:rgba(1,36,114,.14);
  --line-soft:rgba(1,36,114,.07);
  --shadow:0 24px 60px rgba(1,19,63,.16);
  --maxw:1320px;
  --pad:48px;
  --r:14px;
  /* fonte unica do site = Poppins (pedido da cliente 29/07/2026) */
  --ff-disp:'Poppins',system-ui,sans-serif;
  --ff-body:'Poppins',system-ui,sans-serif;
  --ff-mono:'Poppins',system-ui,sans-serif;
}

body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--bg);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* Poppins: titulos e numeros em 900 (Black) p/ manter o peso do criativo */
.h-disp,.section-title,.hero h1,.svc h3,.svc .num,.cta-band h2,
.footer .mark,.nav-logo .mark,.stat b,.hero-badge b{font-weight:900}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.section{padding:104px 0}
.section--tight{padding:72px 0}

/* fundos alternados */
.bg-ink{background:var(--navy);color:#eaf0fb}
.bg-ink .muted{color:#9fb0cc}
.bg-cream{background:var(--cream)}
.bg-white{background:#fff}
.bg-red{background:var(--red);color:#fff}

/* ---- Eyebrow / section head ---- */
.eyebrow{
  font-family:var(--ff-mono);font-size:12.5px;font-weight:700;letter-spacing:.05em;
  color:var(--red);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--red)}
.bg-ink .eyebrow,.bg-red .eyebrow,.hero .eyebrow{color:#fff}   /* sobre foto: traco vermelho, texto branco (legibilidade) */
.bg-ink .eyebrow::before,.bg-red .eyebrow::before{background:#fff}

.h-disp{font-family:var(--ff-disp);font-weight:700;letter-spacing:-.015em}
.section-title{font-family:var(--ff-disp);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(30px,4.6vw,54px);line-height:.98;margin:18px 0 0}
.section-sub{color:var(--muted);font-size:clamp(16px,1.5vw,19px);margin-top:18px;max-width:60ch}
.bg-ink .section-sub{color:#aebdd6}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;background:rgba(1,19,63,.92);
  backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.09);transition:background .35s,border-color .35s}
/* transparente sobre o hero (home), sólida ao rolar */
.nav--transparent{background:transparent;border-bottom-color:transparent;backdrop-filter:none}
.nav--transparent::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(1,19,63,.55),transparent);pointer-events:none;transition:opacity .35s}
.nav--transparent.scrolled{background:rgba(1,19,63,.92);border-bottom-color:rgba(255,255,255,.09);backdrop-filter:blur(14px)}
.nav--transparent.scrolled::after{opacity:0}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);height:84px;
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo{display:flex;align-items:center;gap:12px;color:#fff}
.nav-logo-img{height:70px;width:auto;display:block}
.nav-logo .mark{font-family:var(--ff-disp);font-weight:700;font-size:26px;line-height:1;letter-spacing:.01em}
.nav-logo .mark b{color:var(--red-2)}
.nav-logo .tag{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.04em;color:#9fb0cc}

.nav-menu{display:flex;align-items:center;gap:4px}
.nav-menu>li>a{display:block;padding:10px 13px;font-size:15.5px;font-weight:600;color:#dfe6f2;
  border-radius:8px;transition:.18s;letter-spacing:.01em}
.nav-menu>li>a:hover{color:#fff;background:rgba(255,255,255,.08)}

/* dropdown */
.has-drop{position:relative}
.has-drop>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7}
.drop{position:absolute;top:calc(100% + 10px);left:0;min-width:260px;background:var(--surface);
  border-radius:12px;box-shadow:var(--shadow);padding:8px;opacity:0;visibility:hidden;
  transform:translateY(8px);transition:.2s;border:1px solid var(--line)}
.has-drop:hover .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:11px 14px;font-size:14px;font-weight:500;color:var(--ink);border-radius:8px;transition:.15s}
.drop a:hover{background:var(--cream);color:var(--red);padding-left:18px}

.nav-cta{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--red),var(--red-dark));
  color:#fff;font-weight:700;font-size:14px;padding:12px 22px;border-radius:10px;
  box-shadow:0 10px 26px rgba(235,26,16,.4);position:relative;overflow:hidden;letter-spacing:.01em}
.nav-cta .ico{width:17px;height:17px;fill:#fff}
.nav-cta::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:.6s}
.nav-cta:hover::after{left:130%}
.nav-cta:hover{transform:translateY(-1px)}

.nav-toggle{display:none;flex-direction:column;gap:5px;padding:8px}
/* 23/09: entre 1001 e 1259px os itens quebravam em 2 linhas e o botao Orcamento era cortado.
   Ate 1100px vira hamburguer; de 1101 a 1259px o menu fica compacto. */
.nav-menu>li>a{white-space:nowrap}
.nav-cta{flex-shrink:0}
@media(max-width:1100px){.nav-menu{display:none}.nav-toggle{display:flex}.nav-cta{margin-left:auto}}
@media(min-width:1101px) and (max-width:1259px){
  .nav-inner{gap:14px}
  .nav-logo-img{height:62px}
  .nav-menu{gap:0}
  .nav-menu>li>a{padding:10px;font-size:14.5px}
  .nav-cta{padding:11px 16px}
}
/* 24/09: PALAVRA NUNCA SE QUEBRA no site (regra Bianca). Os 9 titulos de servico da pagina Demolicao
   tem o mesmo tamanho, calculado pela largura da coluna: "Descomissionamento" ocupa 11,02em,
   entao 8.8cqi garante que ela caiba inteira em qualquer tela. Teto 46px no desktop. */
[id^="servico-"] .split-body{container-type:inline-size}
[id^="servico-"] .split-body .section-title{font-size:min(clamp(28px,4.6vw,46px),8.8cqi)}
.nav-toggle span{width:26px;height:2.5px;background:#fff;border-radius:2px;transition:.3s}

/* ==========================================================================
   HERO
   ========================================================================== */
/* conteudo CENTRALIZADO na vertical, com folga igual em cima e embaixo (pedido 30/07/2026).
   O padding-top leva os 84px da navbar fixa: assim a folga VISIVEL (abaixo da navbar)
   fica igual a de baixo. Alinhamento horizontal segue a esquerda. */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  color:#fff;overflow:hidden;padding:calc(84px + 44px) 0 44px}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media .ph{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;
  /* clareado em 30/07/2026 para mostrar mais o video. Duas camadas: a vertical
     ficou mais leve, e a horizontal segura o contraste SO atras do texto (que
     e alinhado a esquerda), liberando o lado direito da imagem. */
  background:
    linear-gradient(90deg,rgba(1,19,63,.62) 0%,rgba(1,19,63,.34) 42%,rgba(1,19,63,0) 72%),
    linear-gradient(180deg,rgba(1,19,63,.34) 0%,rgba(1,19,63,.20) 34%,rgba(1,19,63,.62) 74%,rgba(1,19,63,.86) 100%)}
.hero-inner{position:relative;z-index:2;width:100%}
.hero h1{font-family:var(--ff-disp);font-weight:700;
  font-size:clamp(29px,4.4vw,58px);line-height:1.06;letter-spacing:-.02em;margin:18px 0 0;max-width:20ch}
.hero h1 em{font-style:normal;color:var(--red)}
.hero-sub{font-size:clamp(17px,2vw,21px);color:#dfe7f4;margin-top:22px;max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;
  padding:16px 28px;border-radius:11px;transition:.2s;letter-spacing:.01em;position:relative;overflow:hidden}
.btn .ico{width:19px;height:19px}
.btn-primary{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;
  box-shadow:0 14px 34px rgba(235,26,16,.45)}
.btn-primary .ico{fill:#fff}
.btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:.6s}
.btn-primary:hover::after{left:130%}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(235,26,16,.55)}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.btn-ghost .ico{fill:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.2)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark .ico{fill:#fff}
.btn-dark:hover{background:var(--red);transform:translateY(-2px)}

/* selo strip no hero */
.hero-badges{display:flex;flex-wrap:wrap;gap:26px;margin-top:44px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.16)}
.hero-badge{display:flex;flex-direction:column;gap:2px}
.hero-badge b{font-family:var(--ff-mono);font-size:clamp(24px,3vw,34px);font-weight:700;color:#fff;line-height:1}
.hero-badge span{font-size:12.5px;color:#c5bcb3;letter-spacing:.03em}

/* ==========================================================================
   MARQUEE clientes
   ========================================================================== */
.clients{padding:34px 0;border-bottom:1px solid var(--line-soft);overflow:hidden}
.clients-label{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.05em;
  color:var(--muted);text-align:center;margin-bottom:22px}
.marquee{display:flex;gap:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:52px;padding-right:52px;align-items:center;animation:scroll 40s linear infinite;white-space:nowrap}
.clients:hover .marquee-track{animation-play-state:paused}
.client-chip{font-family:var(--ff-disp);font-size:22px;letter-spacing:.02em;color:#b3aaa1;transition:.2s}
.client-chip:hover{color:var(--red)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ==========================================================================
   STATS
   ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line)}
.stat{background:var(--navy);padding:46px 28px;text-align:center}
.stat b{font-family:var(--ff-mono);font-weight:700;font-size:clamp(34px,4vw,50px);color:#fff;display:block;line-height:1}
.stat b i{font-style:normal;color:var(--red-2)}
.stat span{color:#9fb0cc;font-size:13.5px;letter-spacing:.04em;margin-top:10px;display:block}

/* ==========================================================================
   AWARDS bar
   ========================================================================== */
.awards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}
.award{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;
  display:flex;gap:16px;align-items:flex-start;transition:.25s}
.award:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:var(--shadow)}
.award .tro{width:40px;height:40px;flex:none;fill:var(--red)}
.award h4{font-size:15px;font-weight:700;line-height:1.3}
.award span{font-family:var(--ff-mono);font-size:12px;color:var(--muted);margin-top:5px;display:block}

/* ==========================================================================
   DIFERENCIAIS (faixa escura)
   ========================================================================== */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
.feat{padding:30px 26px;border:1px solid rgba(255,255,255,.12);border-radius:14px;transition:.25s}
.feat:hover{border-color:var(--red-2);transform:translateY(-4px);background:rgba(255,255,255,.03)}
.feat .ico{width:34px;height:34px;fill:var(--red-2)}
.feat h4{color:#fff;font-size:17.5px;margin:18px 0 9px;font-weight:700}
.feat p{color:#9fb0cc;font-size:14.5px;line-height:1.6}
@media(max-width:1000px){.feats{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.feats{grid-template-columns:1fr}}

/* ==========================================================================
   SERVICES
   ========================================================================== */
/* rotulo de subgrupo dentro da secao de servicos (29/07/2026) */
.grupo-label{font-family:var(--ff-mono);font-size:13px;font-weight:700;letter-spacing:.04em;
  text-transform:none;color:var(--muted);margin-top:52px}
.grupo-label + .mod-grid,.grupo-label + .svc-grid{margin-top:20px}

/* modelos de demolicao: 8 cards em 4 colunas (4+4, linhas cheias) */
.mod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}
.mod{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:.22s;color:var(--ink)}
.mod:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:var(--shadow)}
.mod img{width:100%;height:158px;object-fit:cover;flex:none}
.mod-txt{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.mod h3{font-family:var(--ff-disp);font-weight:700;font-size:17px;line-height:1.2}
.mod p{font-size:14px;color:var(--muted);margin-top:9px;flex:1}
.mod .go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-weight:700;font-size:13.5px;color:var(--red)}
.mod .go .ico{width:16px;height:16px;fill:var(--red);transition:.2s}
.mod:hover .go .ico{transform:translateX(4px)}

.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:56px}
.svc{position:relative;border-radius:18px;overflow:hidden;min-height:340px;
  display:flex;flex-direction:column;justify-content:flex-end;color:#fff;padding:34px;isolation:isolate}
.svc .ph{position:absolute;inset:0;z-index:-2}
.svc::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(1,19,63,.15),rgba(1,19,63,.9))}
.svc:hover::after{background:linear-gradient(180deg,rgba(235,26,16,.25),rgba(1,19,63,.92))}
.svc h3{font-family:var(--ff-disp);font-weight:700;letter-spacing:-.01em;font-size:28px;line-height:1}
.svc p{font-size:15px;color:#cdd7e8;margin-top:12px;max-width:42ch}
.svc .go{display:inline-flex;align-items:center;gap:9px;margin-top:20px;font-weight:700;font-size:14px;color:#fff}
.svc .go .ico{width:18px;height:18px;fill:var(--red-2);transition:.2s}
.svc:hover .go .ico{transform:translateX(5px)}
.svc .num{position:absolute;top:22px;right:26px;font-family:var(--ff-disp);font-size:64px;
  color:rgba(255,255,255,.12);z-index:-1;line-height:1}

/* ==========================================================================
   SPLIT (texto + midia)
   ========================================================================== */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split--rev .split-media,.split--rev .foto-e,.split--rev .foto-c{order:-1}
.split-media{border-radius:18px;overflow:hidden;min-height:420px;box-shadow:var(--shadow);display:grid}
.split-media>*{min-height:100%}
.split-body p{color:var(--muted);margin-top:18px}
/* variante: imagem ALTA acompanhando o texto (meio-ambiente, pedido Bianca 11/08/2026) */
.split--alto{align-items:stretch}
.split--alto .split-media{min-height:0}
@media(max-width:900px){.split--alto .split-media{min-height:420px}}
.bg-ink .split-body p{color:#aebdd6}
.list-check{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.list-check li{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.list-check .ico{width:22px;height:22px;flex:none;fill:var(--red)}

/* reportagens */
.news-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:52px}
.news{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.25s}
.news:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.news .ph{aspect-ratio:16/9}
.news-body{padding:24px}
.news-body .tag{font-family:var(--ff-mono);font-size:11px;letter-spacing:.04em;color:var(--red)}
.news-body h3{font-size:20px;margin-top:10px;line-height:1.25}
.news-body .go{display:inline-flex;gap:8px;align-items:center;margin-top:16px;font-weight:700;font-size:14px;color:var(--red)}

/* instagram */
.ig-head{display:flex;gap:18px;align-items:flex-start;margin-top:26px}
/* bio do perfil (texto do Instagram da Nobre, 30/07/2026). Sem emoji: regra da Bianca. */
.ig-bio{font-size:14.5px;line-height:1.55;color:var(--muted);margin-top:10px;max-width:56ch}
.ig-end{display:block;margin-top:6px;font-size:13.5px;color:var(--muted);opacity:.85}
/* sem titulo acima (29/07/2026): nao sobra folga dupla no topo da secao */
.ig-head:first-child{margin-top:0}
.ig-avatar{width:66px;height:66px;border-radius:50%;object-fit:cover;padding:3px;
  background:linear-gradient(135deg,var(--red),var(--red-dark));flex:none}
.ig-avatar .ph,.ig-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.ig-head b{display:block;font-size:16px;color:var(--ink)}
.ig-head span{font-size:13.5px;color:var(--muted)}
/* 10 posts: 5 em cima + 5 embaixo (regra Bianca 29/07/2026) */
.ig-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:32px}
.ig-cell{aspect-ratio:3/4;border-radius:12px;overflow:hidden;position:relative;display:block;background:var(--navy)}
.ig-cell img{width:100%;height:100%;object-fit:cover;transition:.4s}
.ig-cell:hover img{transform:scale(1.07)}
.ig-cell .ov{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:.25s;background:rgba(1,19,63,.55)}
.ig-cell:hover .ov{opacity:1}
.ig-cell .ov svg{width:32px;height:32px;fill:#fff}
.ig-follow{margin-top:36px;text-align:center}
.ig-follow-link{display:inline-block;font-weight:700;font-size:16px;color:var(--ink);
  padding-bottom:6px;border-bottom:2px solid var(--red);transition:.18s}
.ig-follow-link:hover{color:var(--red);border-bottom-color:var(--ink)}

/* CTA band */
.cta-band{position:relative;overflow:hidden;text-align:center;color:#fff;padding:96px 0}
.cta-band .ph{position:absolute;inset:0;z-index:-2}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(1,19,63,.86)}
.cta-band h2{font-family:var(--ff-disp);font-weight:700;letter-spacing:-.015em;font-size:clamp(32px,5vw,60px);line-height:1}
.cta-band p{color:#c7d1e4;margin:18px auto 32px;max-width:52ch;font-size:18px}

/* ==========================================================================
   FOOTER, 4 secoes
   ========================================================================== */
/* rodape CLARO (pedido Bianca 30/07/2026). A logo tem versao propria para fundo claro:
   a antiga (logo-nobre.png) tem DEMOLIDORA e o circulo em cinza CLARO e desaparece aqui. */
.footer{background:#fff;color:var(--muted);padding:80px 0 34px;border-top:1px solid var(--line)}
/* 4 colunas de largura IGUAL (pedido Bianca 30/07/2026) */
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
/* titulos de coluna do rodape um degrau maiores (pedido Bianca 30/07/2026) */
.footer h5{color:var(--ink);font-family:var(--ff-disp);font-size:17px;font-weight:700;
  letter-spacing:-.005em;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.footer .mark{font-family:var(--ff-disp);font-weight:700;font-size:30px;color:var(--ink);letter-spacing:.01em}
.footer .mark b{color:var(--red-2)}
.footer-logo-img{height:96px;width:auto;display:block;margin-bottom:6px}
.footer-about p{font-size:15px;margin-top:14px;color:var(--muted);line-height:1.6}
.footer-list li,.footer-contact li{margin-bottom:12px}
.footer-list a,.footer-contact li{font-size:15.5px;color:#4a5162;display:flex;align-items:flex-start;gap:9px;transition:.15s}
.footer-list a::before{content:"›";color:var(--red-2);font-weight:700}
.footer-list a:hover{color:var(--red);padding-left:4px}
.footer-contact .ico{display:none}
.footer-contact li::before{content:"›";color:var(--red-2);font-weight:700}
.footer-social{display:flex;gap:12px;margin-top:20px}
.footer-social a{width:40px;height:40px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--red),var(--red-dark));transition:.2s}
.footer-social a:hover{transform:translateY(-3px)}
.footer-social .ico{width:18px;height:18px;fill:#fff}
.footer-bottom{border-top:1px solid var(--line);margin-top:52px;padding-top:26px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#7d89a3}
.footer-bottom a:hover{color:var(--red)}

/* ==========================================================================
   WhatsApp flutuante
   ========================================================================== */
.wa-float{position:fixed;bottom:24px;right:24px;z-index:90;width:60px;height:60px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 12px 30px rgba(37,211,102,.45);transition:.2s}
.wa-float:hover{transform:scale(1.08)}
.wa-float .ico{width:32px;height:32px;fill:#fff}

/* ==========================================================================
   Placeholder de imagem (hazard stripes, sem banco gratis, marca "pendente")
   ========================================================================== */
.ph{background:
   repeating-linear-gradient(45deg,#012C8B 0 22px,#012472 22px 44px);
   position:relative;display:grid;place-items:center;min-height:100%}
.ph::before{content:attr(data-ph);position:absolute;font-family:var(--ff-mono);font-size:12px;
  letter-spacing:.03em;color:#7d89a3;text-align:center;padding:12px;max-width:80%}
.ph--red{background:repeating-linear-gradient(45deg,var(--red-dark) 0 22px,#8f1019 22px 44px)}
.ph--red::before{color:rgba(255,255,255,.7)}

/* ==========================================================================
   Animações de entrada
   ========================================================================== */
.fade-up{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.fade-up.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .fade-up{opacity:1;transform:none}
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media(max-width:1000px){
  :root{--pad:32px}
  .nav-menu{display:none}
  .nav-toggle{display:flex}
  /* minmax(0,1fr): a coluna nunca passa do container (1fr sozinho respeita o
     min-content do formulario e estourava o contato no celular, 11/08/2026) */
  .split{grid-template-columns:minmax(0,1fr);gap:32px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px 30px}
  .split--rev .split-media,.split--rev .foto-e,.split--rev .foto-c{order:0}
  .split-media{min-height:300px}
  .awards-grid{grid-template-columns:repeat(2,1fr)}
  .mod-grid{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .ig-grid{grid-template-columns:repeat(5,1fr);gap:10px}
}
@media(max-width:640px){
  :root{--pad:18px}
  body{font-size:16px}
  .nav-logo-img{height:58px}
  .section{padding:72px 0}
  /* mobile: topo, nao center (center + min-height grande esconde o H1 atras da navbar) */
  .hero{padding:104px 0 40px;align-items:flex-start;min-height:auto}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center;width:100%}
  .hero-badges{gap:18px 26px}
  .svc-grid{grid-template-columns:1fr}
  .mod-grid{grid-template-columns:1fr 1fr}
  .news-grid{grid-template-columns:1fr}
  .awards-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .ig-grid{grid-template-columns:repeat(2,1fr)}   /* 10 posts = 5 linhas de 2, sem sobra */
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px 28px}
  .footer-logo-img{height:98px}
  .footer-bottom{flex-direction:column}
}

/* menu mobile aberto */
.mobile-menu{position:fixed;inset:0;z-index:110;background:var(--navy);color:#fff;
  transform:translateX(100%);transition:.35s;padding:96px 28px 40px;overflow-y:auto}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a{display:block;padding:15px 0;font-size:19px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-menu a.sub{padding-left:18px;font-size:16px;color:#c5bcb3}
.mobile-menu .btn{margin-top:24px;width:100%;justify-content:center}
.mobile-close{position:absolute;top:26px;right:26px;width:40px;height:40px;font-size:30px;color:#fff}

/* ==========================================================================
   PAGINAS INTERNAS (page hero, prose, cards de conteudo, formulario)
   ========================================================================== */
.page-hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;
  padding:170px 0 82px}
.page-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 140% at 88% 0%,rgba(1,44,139,.95) 0%,rgba(1,19,63,.2) 60%),
             linear-gradient(180deg,rgba(1,19,63,.55),rgba(1,19,63,.9))}
.page-hero::after{content:"";position:absolute;left:0;bottom:0;width:190px;height:5px;background:var(--red)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{font-family:var(--ff-disp);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(27px,3.9vw,50px);line-height:1.06;letter-spacing:.005em;margin:16px 0 0;max-width:20ch}
.page-hero p{color:#c7d3e8;font-size:clamp(16px,1.5vw,19px);margin-top:18px;max-width:62ch}
.crumb{font-size:12.5px;letter-spacing:.04em;color:#8fa4c8;margin-bottom:6px}
.crumb a:hover{color:#fff}

.prose p{color:var(--muted);margin-top:20px;font-size:17px}
.bg-ink .prose p{color:#aebdd6}
.prose p:first-child{margin-top:0}
.prose h3{font-family:var(--ff-disp);font-weight:800;
  font-size:clamp(20px,2.2vw,26px);margin-top:40px;line-height:1.15}
.bg-ink .prose h3{color:#fff}
.prose--narrow{max-width:74ch}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--coluna{grid-template-columns:1fr;gap:18px;margin-top:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 28px;transition:.25s}
.card:hover{border-color:var(--red);transform:translateY(-4px);box-shadow:var(--shadow)}
.card .ico{width:32px;height:32px;fill:var(--red)}
.card h3{font-size:19px;font-weight:700;margin:16px 0 10px;line-height:1.25}
.card p{color:var(--muted);font-size:15px;line-height:1.65}
.card .num{font-family:var(--ff-mono);font-weight:900;font-size:34px;color:var(--line);line-height:1;display:block}
.bg-ink .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.bg-ink .card h3{color:#fff}
.bg-ink .card p{color:#9fb0cc}
.bg-ink .card .num{color:rgba(255,255,255,.16)}

.mvv{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px;align-items:start}
.mvv .card{height:100%}
.value-list{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.value-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--muted)}
.bg-ink .value-list li{color:#aebdd6}
.value-list li b{color:var(--ink);display:block;font-size:16px;margin-bottom:2px}
.bg-ink .value-list li b{color:#fff}
.value-list .ico{width:20px;height:20px;flex:none;fill:var(--red);margin-top:3px}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px}
.gallery .ph{aspect-ratio:4/3;border-radius:12px}

.logo-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:52px}
.logo-grid>*{flex:0 0 calc(25% - 12px)}
.logo-cell{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  min-height:98px;display:grid;place-items:center;padding:16px;text-align:center;
  font-weight:700;font-size:14.5px;color:var(--muted);transition:.2s}
.logo-cell:hover{border-color:var(--red);color:var(--red)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;
  padding:14px 16px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--red);border-color:transparent}
.form-note{font-size:13.5px;color:var(--muted);margin-top:16px}

.contact-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px}
.contact-card{display:flex;gap:14px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:22px}
.contact-card .ico{width:24px;height:24px;fill:var(--red);flex:none;margin-top:3px}
.contact-card b{display:block;font-size:14px;margin-bottom:4px}
.contact-card span{color:var(--muted);font-size:15px;min-width:0;overflow-wrap:anywhere}

.map-embed{margin-top:52px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.map-embed iframe{width:100%;height:380px;border:0;display:block}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.empty-state{margin-top:44px;background:var(--surface);border:1px dashed var(--line);
  border-radius:var(--r);padding:44px 32px;text-align:center;color:var(--muted)}

@media(max-width:1000px){
  .cards,.cards--2,.mvv,.gallery,.post-grid{grid-template-columns:1fr 1fr}
  .logo-grid>*{flex:0 0 calc(33.333% - 11px)}
  .page-hero{padding:140px 0 66px}
}
@media(max-width:640px){
  .cards,.cards--2,.mvv,.gallery,.post-grid,.form-grid,
  .contact-cards,.value-list{grid-template-columns:1fr}
  .logo-grid>*{flex:0 0 calc(50% - 8px)}
  .page-hero{padding:120px 0 52px}
  .map-embed iframe{height:300px}
}

/* ==========================================================================
   IMAGENS REAIS (fotos, certificados e logos vindos do site atual da Nobre)
   ========================================================================== */
.media-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc>.media-cover,.cta-band>.media-cover{z-index:-2}
.split-media img{width:100%;height:100%;object-fit:cover}
.gallery img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.news .news-media{aspect-ratio:16/9;overflow:hidden;background:var(--navy-2)}
.news .news-media img{width:100%;height:100%;object-fit:contain;padding:26px;background:#fff}

/* premios com o certificado real */
.awards-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}
.award{display:flex;flex-direction:column;padding:0;overflow:hidden;height:100%}
.award figure{background:#fff;height:300px;flex:none;display:grid;place-items:center;padding:16px;
  border-bottom:1px solid var(--line);overflow:hidden}
.award figure img{max-width:100%;max-height:268px;width:auto;height:auto;object-fit:contain}
.award .award-txt{padding:16px 18px 20px;flex:1}
.award h4{font-size:14.5px;font-weight:700;line-height:1.3}
.bg-ink .award{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.bg-ink .award h4{color:#fff}

/* ===== CERTIFICADOS: 2 carrosséis (verticais e horizontais), SEM fundo =====
   Regra Bianca 29/07/2026: certificado sem card/fundo, só a imagem e o título
   centralizado abaixo. Vertical e horizontal em carrosséis separados para não
   misturar proporções na mesma linha. */
.cert-rail{position:relative;margin-top:38px}
.cert-rail + .cert-rail{margin-top:46px}
.cert-track{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:4px 2px 6px;scrollbar-width:none;-ms-overflow-style:none}
.cert-track::-webkit-scrollbar{display:none}
.cert{flex:0 0 auto;scroll-snap-align:start;background:none;border:0;padding:0;margin:0;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.cert img{display:block;width:auto;max-width:100%;object-fit:contain}
.cert figcaption{margin-top:15px;width:100%}
.cert h4{font-size:14px;font-weight:700;line-height:1.35;text-wrap:balance}
.cert span{font-family:var(--ff-mono);font-size:11.5px;color:var(--muted);margin-top:5px;display:block}
.cert--v{width:236px}
.cert--v img{height:330px}
.cert--h{width:344px}
.cert--h img{height:244px}
  }
@media(max-width:640px){
  .cert-track{gap:20px}
  .cert--v{width:172px}
  .cert--v img{height:242px}
  .cert--h{width:250px}
  .cert--h img{height:178px}
  .cert h4{font-size:13px}
      }

/* logos de clientes */
.client-logo{height:54px;width:auto;max-width:150px;object-fit:contain;
  filter:none;opacity:1;transition:.25s}
.client-chip:hover .client-logo,.client-logo:hover{transform:scale(1.05)}
.logo-cell img{height:84px;max-height:84px;width:100%;object-fit:contain;
  filter:none;opacity:1;transition:.25s}
.logo-cell:hover img{transform:scale(1.05)}
@media(max-width:1000px){
  .award figure{height:250px}
  .award figure img{max-height:218px}
}
@media(max-width:640px){
  .awards-grid{grid-template-columns:1fr}
  .client-logo{height:40px}
  .award figure{height:280px}
  .award figure img{max-height:248px}
}

/* ==========================================================================
   REPORTAGENS NA TV: lista a esquerda + player a direita
   (formato de referencia enviado pela Bianca em 29/07/2026)
   O iframe do YouTube so e criado no clique: nao pesa no carregamento da pagina.
   ========================================================================== */
.tv{display:grid;grid-template-columns:360px 1fr;margin-top:44px;border-radius:16px;
  overflow:hidden;box-shadow:var(--shadow);background:var(--surface);border:1px solid var(--line)}
.tv-list{display:flex;flex-direction:column;background:#fff;min-width:0}
.tv-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--red);color:#fff;padding:16px 20px;font-size:15px}
.tv-list-head b{font-weight:700}
.tv-list-head span{font-size:13px;opacity:.9}
.tv-items{display:flex;flex-direction:column;overflow-y:auto;max-height:498px}
.tv-item{display:grid;grid-template-columns:1fr auto;grid-template-areas:"em dur" "tit tit";
  gap:2px 12px;text-align:left;padding:14px 20px;border-bottom:1px solid var(--line-soft);
  transition:.16s;cursor:pointer;width:100%}
.tv-item:hover{background:var(--cream)}
.tv-item.is-on{background:var(--cream);box-shadow:inset 3px 0 0 var(--red)}
.tv-em{grid-area:em;font-size:12px;font-weight:700;color:var(--red);letter-spacing:.02em}
.tv-tit{grid-area:tit;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
.tv-dur{grid-area:dur;font-size:12.5px;color:var(--muted);white-space:nowrap}
.tv-player{position:relative;background:#000;min-width:0}
.tv-poster{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;cursor:pointer}
.tv-poster img{width:100%;height:100%;object-fit:cover;transition:.4s}
.tv-poster:hover img{transform:scale(1.04)}
.tv-play{position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;
  background:var(--red);display:grid;place-items:center;box-shadow:0 12px 34px rgba(0,0,0,.45);transition:.2s}
.tv-play svg{width:34px;height:34px;fill:#fff;margin-left:3px}
.tv-poster:hover .tv-play{transform:scale(1.08)}
.tv-legenda{position:absolute;left:0;right:0;bottom:0;padding:26px 20px 16px;color:#fff;
  font-size:15px;font-weight:600;text-align:left;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.78))}
.tv-frame{position:relative;aspect-ratio:16/9}
.tv-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tv-frame video{position:absolute;inset:0;width:100%;height:100%;background:#000;display:block}
@media(max-width:1000px){
  .tv{grid-template-columns:1fr}
  .tv-list{order:2}
  .tv-items{max-height:none}
}
@media(max-width:640px){
  .tv-item{padding:13px 16px}
  .tv-tit{font-size:14px}
  .tv-play{width:60px;height:60px}
  .tv-play svg{width:28px;height:28px}
}

/* ==========================================================================
   FAIXA DE NUMEROS sobre foto de obra (30/07/2026)
   Substitui a faixa azul chapada que a Bianca mandou tirar em 29/07.
   ========================================================================== */
.numeros{position:relative;isolation:isolate;overflow:hidden;padding:64px 0}
.numeros>.media-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.numeros::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(1,19,63,.78),rgba(1,19,63,.9))}
.numeros-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.numero{color:#fff}
.numero b{display:block;font-family:var(--ff-disp);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(38px,4.6vw,60px);line-height:1}
.numero b i{font-style:normal;color:var(--red-2)}
.numero span{display:block;font-size:14.5px;color:#c6d3e8;margin-top:8px}
@media(max-width:1000px){
  .numeros{padding:52px 0}
  .numeros-grid{grid-template-columns:1fr 1fr;gap:26px 20px}
}
@media(max-width:640px){
  .numeros{padding:42px 0}
  .numero span{font-size:13.5px}
}

/* ==========================================================================
   CERTIFICADOS: rotacao infinita (30/07/2026)
   Substitui o carrossel de setas. O trilho tem a sequencia DUPLICADA e anda
   ate -50%, o que faz o loop nao ter emenda.
   ⚠️ Espacamento por margin-right, NAO por gap: com `gap` o -50% cai no meio
   de um vao e o loop da um salto visivel.
   ========================================================================== */
.cert-mq{overflow:hidden;margin-top:38px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.cert-mq + .cert-mq{margin-top:44px}
.cert-mq-track{display:flex;width:max-content;animation-name:cert-roda;
  animation-timing-function:linear;animation-iteration-count:infinite}
.cert-mq-track .cert{margin-right:28px}
.cert-mq--v{animation-duration:56s}
.cert-mq--h{animation-duration:72s}
.cert-mq:hover .cert-mq-track{animation-play-state:paused}
@keyframes cert-roda{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .cert-mq-track{animation:none}
  .cert-mq{overflow-x:auto}
}
@media(max-width:640px){
  .cert-mq-track .cert{margin-right:20px}
  .cert-mq--v{animation-duration:40s}
  .cert-mq--h{animation-duration:52s}
}

/* ==========================================================================
   MEIO AMBIENTE: banner sangrado (30/07/2026)
   Foto ocupa metade da secao e sangra ate a borda, com degrade fazendo a
   emenda com o azul do texto. Substitui o split com imagem em card.
   ========================================================================== */
.ma-banner{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--navy);color:#eaf0fb;isolation:isolate}
.ma-foto{position:relative;min-height:560px}
.ma-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* degrade que costura a foto com o bloco azul */
.ma-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(1,36,114,.34) 0%,rgba(1,36,114,0) 34%,rgba(1,36,114,.72) 82%,var(--navy) 100%)}
.ma-texto{display:flex;align-items:center;padding:88px 0}
.ma-inner{max-width:calc(var(--maxw) / 2);padding:0 var(--pad) 0 8px}
.ma-banner .section-title{color:#fff}
.ma-banner p{color:#b9c7de;margin-top:18px}
.ma-banner .eyebrow{color:#fff}
.ma-banner .eyebrow::before{background:var(--red-2)}
@media(max-width:1000px){
  .ma-banner{grid-template-columns:1fr}
  .ma-foto{min-height:340px}
  /* na vertical o degrade tem que descer, nao ir pro lado */
  .ma-foto::after{background:linear-gradient(180deg,rgba(1,36,114,.28) 0%,rgba(1,36,114,0) 42%,rgba(1,36,114,.8) 88%,var(--navy) 100%)}
  .ma-texto{padding:44px 0 64px}
  .ma-inner{max-width:none;padding:0 var(--pad)}
}

/* ==== EMISSORAS (Midias, 2a dobra): titulo a esquerda + carrossel a direita.
   Fica DENTRO do .wrap, entao a margem lateral e a mesma da 1a dobra. Fundo branco. ==== */
.emissoras{background:#fff;padding:46px 0;border-bottom:1px solid var(--line-soft)}
/* titulo menor e carrossel mais perto dele (pedido Bianca 30/07/2026) */
.emi-grid{display:grid;grid-template-columns:minmax(190px,.62fr) 1.38fr;gap:26px;align-items:center}
.emi-titulo{font-family:var(--ff-disp);font-weight:900;letter-spacing:-.015em;
  font-size:clamp(17px,1.5vw,21px);line-height:1.2;color:var(--ink);text-wrap:balance}
.emi-mq{overflow:hidden;min-width:0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 2%,#000 96%,transparent);
          mask:linear-gradient(90deg,transparent,#000 2%,#000 96%,transparent)}
.emi-mq-track{display:flex;width:max-content;align-items:center;
  animation:cert-roda 38s linear infinite}
.emi{flex:none;margin-right:44px;display:grid;place-items:center}
.emi img{height:60px;width:auto;max-width:160px;object-fit:contain}
.emi-mq:hover .emi-mq-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.emi-mq-track{animation:none}}
@media(max-width:1000px){
  .emi-grid{grid-template-columns:1fr;gap:22px}
}
@media(max-width:640px){
  .emissoras{padding:34px 0}
  .emi img{height:46px}
  .emi{margin-right:36px}
}

/* ==========================================================================
   SOLUCOES v2: cards de foto sangrada em fundo escuro (30/07/2026)
   A v1 (sanfona) foi reprovada pela Bianca. Aqui a foto ocupa o card inteiro,
   numero grande em contorno, e o card inteiro vira vermelho no hover.
   ========================================================================== */
.sec-topo{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:end}
.sec-topo .section-sub{margin-top:0;padding-bottom:6px}

.mod2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
.mod2{position:relative;isolation:isolate;overflow:hidden;border-radius:16px;min-height:390px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:26px 24px;color:#fff}
.mod2>.media-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .5s ease}
.mod2::after{content:"";position:absolute;inset:0;z-index:-1;transition:background .35s ease;
  background:linear-gradient(180deg,rgba(1,19,63,.16) 0%,rgba(1,19,63,.58) 46%,rgba(1,19,63,.95) 100%)}
.mod2:hover>.media-cover{transform:scale(1.06)}
.mod2:hover::after{background:linear-gradient(180deg,rgba(235,26,16,.34) 0%,rgba(179,18,10,.82) 48%,rgba(120,10,6,.97) 100%)}
/* numero grande em contorno, tipografia como elemento de design */
.mod2-num{position:absolute;top:18px;right:20px;font-family:var(--ff-disp);font-weight:900;
  font-size:56px;line-height:1;letter-spacing:-.03em;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.45);transition:.35s}
.mod2:hover .mod2-num{-webkit-text-stroke-color:rgba(255,255,255,.9)}
.mod2-corpo h3{font-family:var(--ff-disp);font-weight:900;font-size:21px;line-height:1.15;
  letter-spacing:-.015em}
/* descricao entra no hover; no toque fica sempre visivel (ver bloco hover:none) */
.mod2-corpo p{font-size:14px;color:#dbe4f3;margin-top:10px;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .3s ease,margin .35s ease}
.mod2:hover .mod2-corpo p{max-height:140px;opacity:1}
.mod2 .go{display:inline-flex;align-items:center;gap:9px;margin-top:14px;font-weight:700;font-size:13.5px;color:#fff}
.mod2 .go .ico{width:16px;height:16px;fill:var(--red-2);transition:.2s}
.mod2:hover .go .ico{fill:#fff;transform:translateX(5px)}
/* barra vermelha que cresce no hover */
.mod2-corpo::before{content:"";display:block;width:34px;height:3px;background:var(--red);
  margin-bottom:16px;transition:width .35s ease}
.mod2:hover .mod2-corpo::before{width:74px;background:#fff}

.grupo-label--claro{color:#9fb0cc}

@media (hover:none){                      /* celular/tablet: sem hover, texto sempre visivel */
  .mod2-corpo p{max-height:140px;opacity:1}
}
@media(max-width:1000px){
  .sec-topo{grid-template-columns:1fr;gap:18px;align-items:start}
  .mod2-grid{grid-template-columns:1fr 1fr}
  .mod2{min-height:330px}
}
@media(max-width:640px){
  .mod2-grid{grid-template-columns:1fr;gap:14px}
  .mod2{min-height:290px;padding:22px 20px}
  .mod2-num{font-size:44px}
}

/* ==== capa com foto na 1a dobra de Midias (30/07/2026) ==== */
.page-hero--capa>.media-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-hero--capa::before{background:linear-gradient(180deg,rgba(1,19,63,.9) 0%,rgba(1,19,63,.74) 45%,rgba(1,19,63,.93) 100%);z-index:1}

/* ==== carrossel UNICO de premios na home (8 principais, 30/07/2026) ====
   Vertical e horizontal no mesmo trilho: unifico a ALTURA da imagem para a
   base das legendas alinhar. Sem isso a fileira fica em degrau. */
.cert-mq--unico .cert{width:auto}
.cert-mq--unico .cert img{height:268px;width:auto;max-width:none}
.cert-mq--unico .cert figcaption{max-width:280px;margin-left:auto;margin-right:auto}
@media(max-width:640px){
  .cert-mq--unico .cert img{height:196px}
  .cert-mq--unico .cert figcaption{max-width:210px}
}

/* ==========================================================================
   MAPA DO BRASIL, abrangencia (30/07/2026)
   Fundo branco, mapa azul, estados acendendo em sequencia do Norte ao Sul,
   pino da marca em Sao Paulo (sede) e pulso nas 5 regioes.
   A animacao so roda quando a secao entra na tela (classe .ativo pelo JS).
   ========================================================================== */
.mapa-sec{background:#fff}
.mapa-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:56px;align-items:center}
.mapa-lista{margin-top:26px}
.mapa-wrap{position:relative}
.mapa-svg{width:100%;height:auto;display:block;overflow:visible}
.uf{fill:#e3e9f6;stroke:#fff;stroke-width:1.7;
    opacity:0;transform:translateY(10px);transform-box:fill-box;transform-origin:center}
.mapa-sec.ativo .uf{animation:uf-acende .55s ease forwards;animation-delay:calc(var(--i) * .045s)}
@keyframes uf-acende{to{opacity:1;transform:translateY(0);fill:var(--navy-3)}}
.mapa-sec.ativo .uf{fill:var(--navy-3)}
.uf:hover{fill:var(--navy)}

/* pino da sede */
.mapa-sede{position:absolute;transform:translate(-50%,-100%);text-align:center;
  opacity:0;pointer-events:none}
.mapa-sec.ativo .mapa-sede{animation:pino-cai .6s cubic-bezier(.2,1.5,.4,1) 1.5s forwards}
@keyframes pino-cai{from{opacity:0;transform:translate(-50%,-160%)}to{opacity:1;transform:translate(-50%,-100%)}}
.mapa-sede img{width:36px;height:auto;display:block;margin:0 auto;
  filter:drop-shadow(0 5px 10px rgba(1,19,63,.5))}
.mapa-sede b{display:inline-block;margin-top:3px;background:var(--red);color:#fff;
  font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}

/* pulso por regiao */
.mapa-reg{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;
  gap:4px;opacity:0;pointer-events:none}
.mapa-sede{z-index:3}
.mapa-reg{z-index:2}
.mapa-sec.ativo .mapa-reg{animation:reg-entra .5s ease forwards;animation-delay:var(--d)}
@keyframes reg-entra{to{opacity:1}}
.mapa-reg i{width:11px;height:11px;border-radius:50%;background:var(--red);position:relative;display:block}
.mapa-reg i::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--red);opacity:0}
.mapa-sec.ativo .mapa-reg i::after{animation:pulso 2.4s ease-out infinite;animation-delay:var(--d)}
@keyframes pulso{0%{transform:scale(.5);opacity:.85}70%{transform:scale(1.9);opacity:0}100%{opacity:0}}
.mapa-reg b{font-size:11.5px;font-weight:700;color:var(--navy);white-space:nowrap;
  background:rgba(255,255,255,.86);padding:1px 7px;border-radius:99px}

@media (prefers-reduced-motion:reduce){
  .uf,.mapa-sede,.mapa-reg{opacity:1!important;transform:translate(-50%,-50%);animation:none!important}
  .mapa-sede{transform:translate(-50%,-100%)}
  .uf{transform:none;fill:var(--navy-3)}
  .mapa-reg i::after{animation:none!important}
}
@media(max-width:1000px){
  .mapa-grid{grid-template-columns:1fr;gap:34px}
  .mapa-wrap{max-width:520px;margin:0 auto}
}
@media(max-width:640px){
  .mapa-sede img{width:36px;height:40px}
  .mapa-sede b,.mapa-reg b{font-size:10.5px}
  .mapa-reg i{width:9px;height:9px}
}

/* ==== pino por ESTADO no mapa (decisão da Bianca 30/07/2026: atuação em todo o Brasil) ====
   26 pinos pequenos + o pino grande da marca em São Paulo (sede). Usar o símbolo da logo
   nos 27 deixaria ilegível nos estados pequenos (DF, AL, SE, PB, RN), então só a sede leva o símbolo. */
.mapa-uf{position:absolute;transform:translate(-50%,-100%);width:21px;opacity:0;
  pointer-events:none;z-index:2;filter:drop-shadow(0 3px 6px rgba(1,19,63,.45))}
.mapa-uf img{width:100%;height:auto;display:block}
.mapa-sec.ativo .mapa-uf{animation:uf-pino .5s cubic-bezier(.2,1.5,.4,1) forwards;animation-delay:var(--d)}
@keyframes uf-pino{from{opacity:0;transform:translate(-50%,-190%)}
                   to{opacity:1;transform:translate(-50%,-100%)}}
/* leve flutuacao continua, como no video de referencia */
.mapa-sec.ativo .mapa-uf img{animation:pino-flutua 3.4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes pino-flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){
  .mapa-uf{opacity:1!important;transform:translate(-50%,-100%)!important;animation:none!important}
  .mapa-uf img{animation:none!important}
}
@media(max-width:1000px){.mapa-uf{width:18px}}
@media(max-width:640px){.mapa-uf{width:14px}}

/* ==========================================================================
   FOTO EM ANGULO (pagina Empresa, 30/07/2026)
   Corte diagonal + fio vermelho acompanhando a diagonal, no mesmo desenho dos
   criativos da propria Nobre. O corte fica no lado que ENCARA o texto.
   ========================================================================== */
.split-media--ang{border-radius:0;overflow:visible;box-shadow:none;position:relative}
.split-media--ang img{
  clip-path:polygon(16% 0%, 100% 0%, 100% 100%, 0% 100%);
  filter:drop-shadow(-14px 18px 34px rgba(1,19,63,.28))}
/* fio vermelho paralelo ao corte */
.split-media--ang::before{content:"";position:absolute;top:0;bottom:0;left:0;width:100%;
  clip-path:polygon(10% 0%, 12.4% 0%, 0% 100%, 0% 100%);
  background:var(--red);pointer-events:none}
/* variante espelhada: foto a esquerda, corte na direita */
.split-media--ang-rev img{clip-path:polygon(0% 0%, 100% 0%, 84% 100%, 0% 100%)}
.split-media--ang-rev::before{
  clip-path:polygon(100% 0%, 100% 0%, 90% 100%, 87.6% 100%)}
@media(max-width:1000px){
  /* em coluna unica o corte lateral corta conteudo util: passa a ser na base */
  .split-media--ang img{clip-path:polygon(0% 0%, 100% 0%, 100% 88%, 0% 100%)}
  .split-media--ang-rev img{clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 88%)}
  .split-media--ang::before,.split-media--ang-rev::before{display:none}
}

/* ==== rodape: sub-titulo e lista em 2 colunas (30/07/2026) ==== */
.footer-sub{font-family:var(--ff-mono);font-size:11.5px;font-weight:700;letter-spacing:.04em;
  color:var(--muted);margin:22px 0 12px}

/* ==== redes sociais: contorno azul, preenche no hover ====
   O manual pede azul predominante e vermelho so como destaque: tres circulos
   vermelhos cheios num rodape branco puxavam atencao demais. */
.footer-social{gap:10px}
/* redes sociais: fundo preenchido e formato RETANGULAR (pedido Bianca 30/07/2026).
   Azul da marca no fundo, porque o manual pede azul predominante e vermelho so como destaque. */
.footer-social a{width:44px;height:44px;border-radius:10px;
  background:var(--navy);border:1.5px solid var(--navy);transition:.2s}
.footer-social .ico{width:20px;height:20px;fill:#fff;transition:.2s}
.footer-social a:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(235,26,16,.34)}
.footer-social a:hover .ico{fill:#fff}

/* ==== pagina de Contato: formulario em card (30/07/2026) ==== */
.form-card{background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:38px 34px;box-shadow:var(--shadow)}
.form-card .section-title{font-size:clamp(24px,2.4vw,32px)}
.form-card .form-grid{margin-top:26px}
.form-note{font-size:13px;color:var(--muted);margin-top:16px}
@media(max-width:640px){.form-card{padding:26px 20px}}

/* contato: as duas colunas comecam na mesma altura (o card e mais alto e
   com align-items:center do .split ele descia sozinho) */
.split:has(.form-card),.split--contato{align-items:start}

@media(max-width:640px){
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .footer-logo-img{height:88px}
}

/* CTA no fim da coluna de Contato: fecha a coluna mais curta e serve conversao */
.footer-cta{display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;
  font-weight:700;font-size:14px;padding:12px 20px;border-radius:10px;
  box-shadow:0 10px 24px rgba(235,26,16,.32);transition:.2s}
.footer-cta .ico{width:17px;height:17px;fill:#fff}
.footer-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(235,26,16,.45)}

/* ==========================================================================
   COLAGEM DE FOTOS EM ANGULO (pagina Empresa, 30/07/2026)
   Duas fotos sobrepostas, cada uma com inclinacao propria e canto arredondado.
   A MOLDURA gira e a IMAGEM gira ao contrario, entao o conteudo da foto fica
   em pe (pessoa/maquina nao ficam tortas) e so o recorte parece inclinado.
   ========================================================================== */
.colagem{position:relative;aspect-ratio:1/1;min-height:420px}
.colagem-foto{position:absolute;overflow:hidden;border-radius:22px;margin:0;
  box-shadow:0 26px 54px rgba(1,19,63,.28);background:var(--navy)}
.colagem-foto img{width:100%;height:100%;object-fit:cover;
  transform:rotate(calc(var(--r) * -1)) scale(1.22)}
.colagem-a{--r:-6deg;transform:rotate(var(--r));
  left:0;top:2%;width:70%;height:74%;z-index:1}
.colagem-b{--r:5deg;transform:rotate(var(--r));
  right:0;bottom:0;width:56%;height:60%;z-index:2;
  box-shadow:0 22px 44px rgba(1,19,63,.34), 0 0 0 8px #fff}
/* variante espelhada, para o bloco em que a coluna da foto fica a esquerda */
.colagem--rev .colagem-a{--r:6deg;left:auto;right:0}
.colagem--rev .colagem-b{--r:-5deg;right:auto;left:0}
/* no fundo azul a borda branca da foto de cima nao funciona */
.bg-ink .colagem-b{box-shadow:0 22px 44px rgba(0,0,0,.42), 0 0 0 8px var(--navy)}
@media(max-width:1000px){
  .colagem{min-height:340px;aspect-ratio:4/3}
  .colagem-a{width:72%;height:76%}
  .colagem-b{width:54%;height:58%}
}
@media(max-width:640px){
  .colagem{min-height:290px}
  .colagem-foto{border-radius:16px}
  .colagem-b{box-shadow:0 16px 30px rgba(1,19,63,.3), 0 0 0 6px #fff}
}

/* ==========================================================================
   MOSAICO EM LOSANGO (pagina Empresa, 30/07/2026)
   Um losango grande no centro e seis menores ao redor. Cada losango e um
   quadrado girado 45deg com canto arredondado; a imagem dentro gira -45deg e
   recebe scale para o conteudo ficar EM PE e nao sobrar canto vazio.
   ========================================================================== */
.mosaico{position:relative;aspect-ratio:1/1;min-height:440px}
.losango{position:absolute;margin:0;overflow:hidden;border-radius:16px;
  transform:rotate(45deg);background:var(--navy);
  box-shadow:0 16px 34px rgba(1,19,63,.22)}
.losango img{width:100%;height:100%;object-fit:cover;transform:rotate(-45deg) scale(1.45)}
.losango-centro{left:21%;top:14%;width:54%;height:54%;z-index:3;
  border-radius:22px;box-shadow:0 26px 56px rgba(1,19,63,.32), 0 0 0 7px #fff}
.losango-a{left:4%;top:16%;width:19%;height:19%;z-index:2}
.losango-b{left:0;top:44%;width:13%;height:13%;z-index:1}
.losango-c{right:8%;top:7%;width:17%;height:17%;z-index:2}
.losango-d{right:0;top:26%;width:14%;height:14%;z-index:1}
.losango-e{right:1%;top:47%;width:25%;height:25%;z-index:2;
  box-shadow:0 20px 42px rgba(1,19,63,.28), 0 0 0 6px #fff}
.losango-f{right:16%;bottom:6%;width:21%;height:21%;z-index:2}
/* em fundo azul a borda branca nao funciona */
.bg-ink .losango-centro,.bg-ink .losango-e{box-shadow:0 22px 46px rgba(0,0,0,.4), 0 0 0 7px var(--navy)}
@media(max-width:1000px){
  .mosaico{min-height:400px;max-width:460px;margin:0 auto}
}
@media(max-width:640px){
  .mosaico{min-height:320px;max-width:340px}
  .losango{border-radius:11px}
  .losango-centro{border-radius:15px;box-shadow:0 16px 32px rgba(1,19,63,.3), 0 0 0 5px #fff}
  .losango-e{box-shadow:0 12px 24px rgba(1,19,63,.26), 0 0 0 4px #fff}
}

/* ==== faixa de prova (logos de cliente) DENTRO da secao do mapa, 30/07/2026 ====
   A faixa era secao propria logo acima do mapa. Unida aqui para nao repetir as
   mesmas logos duas vezes em 300px, e para amarrar cobertura + prova na mesma leitura. */
.mapa-prova{font-family:var(--ff-mono);font-size:12px;font-weight:700;letter-spacing:.04em;
  color:var(--muted);text-align:center;margin-top:18px;padding-top:30px;
  border-top:1px solid var(--line)}
.mapa-sec .marquee{margin-top:22px}
.mapa-sec .marquee-track{animation-duration:46s}
.mapa-sec:hover .marquee-track{animation-play-state:paused}
@media(max-width:640px){.mapa-prova{margin-top:8px;padding-top:24px}}

/* ==== mosaico maior (pedido Bianca 30/07/2026) ====
   A coluna da foto passa a ser a maior do split, e o mosaico ganha altura.
   Como os recortes agora sao QUADRADOS focados no assunto, o scale pode baixar
   de 1.45 para 1.42 (o minimo teorico da rotacao de 45deg e raiz de 2). */
.split:has(.mosaico){grid-template-columns:1fr 1fr;gap:56px}
.mosaico{min-height:560px}
.losango img{transform:rotate(-45deg) scale(1.42)}
.losango-centro{left:18%;top:11%;width:60%;height:60%}
.losango-a{left:2%;top:14%;width:21%;height:21%}
.losango-b{left:0;top:45%;width:15%;height:15%}
.losango-c{right:6%;top:5%;width:19%;height:19%}
.losango-d{right:0;top:26%;width:16%;height:16%}
.losango-e{right:0;top:48%;width:27%;height:27%}
.losango-f{right:15%;bottom:3%;width:23%;height:23%}
@media(max-width:1000px){
  .split:has(.mosaico){grid-template-columns:1fr}
  .mosaico{min-height:440px;max-width:500px}
}
@media(max-width:640px){
  .mosaico{min-height:340px;max-width:350px}
}

@media(max-width:640px){.footer h5{font-size:16px}}

/* rotulo do endereco no rodape (pedido Bianca 30/07/2026): titulo em cima, endereco embaixo */
.footer-contact li>span{display:block}
.footer-contact li>span b{display:block;color:var(--ink);font-weight:700;margin-bottom:2px}

/* ==== mapa em largura total acima do rodape (Contato, 30/07/2026) ==== */
.mapa-full{position:relative;line-height:0;background:var(--cream)}
.mapa-full iframe{display:block;width:100%;height:420px;border:0;filter:saturate(.92)}
@media(max-width:1000px){.mapa-full iframe{height:340px}}
@media(max-width:640px){.mapa-full iframe{height:280px}}

/* ==========================================================================
   LOSANGO: detalhe azul no lado direito + efeito de entrada e hover (30/07/2026)
   ========================================================================== */
/* No quadrado girado 45deg, `border-top` vira a aresta SUPERIOR-DIREITA do losango
   e `border-right` vira a INFERIOR-DIREITA. Juntas = o lado direito do losango. */
.losango-centro{border-top:3px solid var(--navy-3);border-right:3px solid var(--navy-3)}

/* entrada escalonada: usa o mesmo IntersectionObserver do .fade-up que ja existe no site */
.mosaico.fade-up{opacity:1;transform:none}          /* o container nao anima, os filhos animam */
.mosaico .losango{opacity:0}
.mosaico.visible .losango{animation:losango-entra .6s cubic-bezier(.2,1.1,.3,1) forwards}
.mosaico.visible .losango-centro{animation-delay:0s}
.mosaico.visible .losango-a{animation-delay:.12s}
.mosaico.visible .losango-c{animation-delay:.2s}
.mosaico.visible .losango-e{animation-delay:.28s}
.mosaico.visible .losango-f{animation-delay:.36s}
.mosaico.visible .losango-b{animation-delay:.44s}
.mosaico.visible .losango-d{animation-delay:.52s}
@keyframes losango-entra{
  from{opacity:0;transform:rotate(45deg) scale(.78)}
  to{opacity:1;transform:rotate(45deg) scale(1)}
}
/* hover: o losango sobe e a foto aproxima */
.losango{transition:box-shadow .3s ease}
.losango img{transition:transform .55s cubic-bezier(.2,.8,.3,1)}
.losango:hover img{transform:rotate(-45deg) scale(1.58)}
.losango-centro:hover{box-shadow:0 32px 64px rgba(1,19,63,.38), 0 0 0 7px #fff}
@media (prefers-reduced-motion:reduce){
  .mosaico .losango{opacity:1;animation:none!important;transform:rotate(45deg)}
  .losango img,.losango:hover img{transition:none;transform:rotate(-45deg) scale(1.42)}
}

/* ==== 2a dobra da Empresa: mais respiro lateral e alinhamento texto x mosaico (30/07/2026) ====
   O texto respeitava o padding do .wrap (48px) mas os losangos das pontas encostavam na
   borda do container, o que fazia a coluna da direita parecer mais larga que a da esquerda. */
.section:has(.mosaico) .wrap{padding-left:80px;padding-right:80px}
.split:has(.mosaico){gap:56px}
/* recua os losangos das pontas para o bloco de imagem fechar no mesmo eixo do texto */
.losango-b{left:3%}
.losango-d{right:2%}
.losango-e{right:3%}
@media(max-width:1000px){
  .section:has(.mosaico) .wrap{padding-left:var(--pad);padding-right:var(--pad)}
  .split:has(.mosaico){gap:34px}
}

/* a 2a dobra da Empresa tem texto longo: alinhar pelo TOPO em vez do centro,
   para o texto e o mosaico comecarem no mesmo eixo */
.split:has(.mosaico){align-items:start}
.split:has(.mosaico) .split-body{padding-top:4px}
.mosaico{min-height:520px}

/* ==== 2a dobra da Empresa: mosaico centralizado na coluna (30/07/2026) ====
   Medido: texto 906px x mosaico 520px. Com align-items:start toda a sobra de 386px
   caia embaixo da imagem, o que deixava o canto inferior direito vazio.
   Centralizando, a folga fica igual em cima e embaixo e a composicao fecha. */
.split:has(.mosaico) .mosaico{align-self:center}
.split:has(.mosaico){grid-template-columns:1fr .96fr;gap:52px}

/* ==========================================================================
   CORRECAO 30/07/2026: o atributo [hidden] nao escondia a capa do player.
   `.tv-poster{display:block}` do autor VENCE o `[hidden]{display:none}` da UA,
   entao a capa continuava visivel e o video entrava ABAIXO dela.
   Regra geral de seguranca, porque esse erro se repete em qualquer elemento
   que tenha display declarado e seja escondido por [hidden].
   ========================================================================== */
[hidden]{display:none!important}

/* ==== 2o mosaico, dobra "Frota e tecnologia": espelhado (30/07/2026) ==== */
.mosaico--rev .losango-centro{left:auto;right:18%}
.mosaico--rev .losango-a{left:auto;right:2%}
.mosaico--rev .losango-b{left:auto;right:3%}
.mosaico--rev .losango-c{right:auto;left:6%}
.mosaico--rev .losango-d{right:auto;left:2%}
.mosaico--rev .losango-e{right:auto;left:3%}
.mosaico--rev .losango-f{right:auto;left:15%}
/* o split invertido tambem precisa da coluna centralizada e do respiro lateral */
.section:has(.mosaico--rev) .wrap{padding-left:80px;padding-right:80px}
.split:has(.mosaico--rev){grid-template-columns:.96fr 1fr;gap:52px;align-items:start}
.split:has(.mosaico--rev) .mosaico{align-self:center}
@media(max-width:1000px){
  .section:has(.mosaico--rev) .wrap{padding-left:var(--pad);padding-right:var(--pad)}
  .split:has(.mosaico--rev){grid-template-columns:1fr;gap:34px}
}

/* ==========================================================================
   MOSAICO EM LOSANGO, UMA IMAGEM SO (30/07/2026)
   Referencia: primeassistenciatecnicasc.com.br, 6a dobra. A foto e repartida
   entre os losangos, com vao entre as pecas. Composto no servidor
   (_tools/_mosaico_unico.py) como WebP com alfa: alinhamento exato e zero
   matematica de background-position no CSS.
   ========================================================================== */
.mosaico-uni{margin:0;position:relative;justify-self:end;width:100%;max-width:560px}
.mosaico-uni img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 20px 38px rgba(1,19,63,.24));transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.mosaico-uni:hover img{transform:scale(1.025)}
.mosaico-uni--rev{justify-self:start}

/* losango MAIS A DIREITA e mais espaco para o texto (pedido Bianca 30/07/2026) */
.split:has(.mosaico-uni){grid-template-columns:1.18fr .82fr;gap:64px;align-items:center}
.split:has(.mosaico-uni--rev){grid-template-columns:.82fr 1.18fr}
.section:has(.mosaico-uni) .wrap{padding-left:80px;padding-right:80px}
@media(max-width:1000px){
  .split:has(.mosaico-uni),.split:has(.mosaico-uni--rev){grid-template-columns:1fr;gap:32px}
  .mosaico-uni{justify-self:center;max-width:440px}
  .section:has(.mosaico-uni) .wrap{padding-left:var(--pad);padding-right:var(--pad)}
}

/* ==== subtitulo de grupo maior + cards de compra no mesmo componente (30/07/2026) ==== */
.grupo-titulo{font-family:var(--ff-disp);font-weight:900;letter-spacing:-.015em;
  font-size:clamp(22px,2.4vw,30px);line-height:1.15;color:#fff;margin-top:64px}
.bg-ink .grupo-titulo{color:#fff}
.mod2-grid--2{grid-template-columns:1fr 1fr;margin-top:26px}
.mod2--largo{min-height:330px}
.mod2--largo .mod2-corpo h3{font-size:25px}
.mod2--largo .mod2-corpo p{font-size:15px}
.mod2--largo .mod2-num{font-size:64px}
/* nos cards largos a descricao fica sempre visivel: sao so dois, cabe */
.mod2--largo .mod2-corpo p{max-height:140px;opacity:1}
@media(max-width:640px){.mod2-grid--2{grid-template-columns:1fr}}

/* mosaico um pouco maior */
.mosaico-uni{max-width:620px}
.split:has(.mosaico-uni){grid-template-columns:1.1fr .9fr}
.split:has(.mosaico-uni--rev){grid-template-columns:.9fr 1.1fr}

/* ==== secao de premios: faixa de selos de reforco (30/07/2026) ==== */
.premios-selos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px;
  padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.selo b{display:block;font-family:var(--ff-disp);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(26px,2.8vw,36px);line-height:1;color:var(--navy)}
.selo b i{font-style:normal;color:var(--red)}
.selo span{display:block;font-size:13.5px;color:var(--muted);margin-top:7px}
@media(max-width:1000px){.premios-selos{grid-template-columns:1fr 1fr;gap:22px}}

/* ==== credito da agencia no rodape ==== */
.cred-stb{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);
  transition:.18s;white-space:nowrap}
.cred-stb:hover{color:var(--red);border-bottom-color:var(--red)}

/* ==========================================================================
   DOBRAS DO MOSAICO (Empresa): seção mais larga, imagem GRANDE e centralizada
   na coluna, texto com medida de leitura controlada. (30/07/2026)
   ========================================================================== */
.section:has(.mosaico-uni) .wrap{max-width:1440px;padding-left:56px;padding-right:56px}
.split:has(.mosaico-uni){grid-template-columns:1fr 1.02fr;gap:72px;align-items:center}
.split:has(.mosaico-uni--rev){grid-template-columns:1.02fr 1fr}
/* a imagem passa a ocupar a coluna toda e fica centralizada nela */
.mosaico-uni{justify-self:center;width:100%;max-width:660px}
.mosaico-uni--rev{justify-self:center}
/* medida de leitura: coluna larga com 17px daria ~85 caracteres por linha, cansativo */
.split:has(.mosaico-uni) .prose p,.split:has(.mosaico-uni) .split-body p{max-width:62ch}
@media(max-width:1200px){
  .section:has(.mosaico-uni) .wrap{max-width:100%}
}
@media(max-width:1000px){
  .split:has(.mosaico-uni),.split:has(.mosaico-uni--rev){grid-template-columns:1fr;gap:34px}
  .mosaico-uni{max-width:460px}
  .section:has(.mosaico-uni) .wrap{padding-left:var(--pad);padding-right:var(--pad)}
}

/* ==========================================================================
   CONTATO: bloco de reforco na coluna da direita (30/07/2026)
   A coluna de canais terminava cedo e sobrava um vazio grande ao lado do
   formulario. Aqui entra o que ajuda na hora da decisao: credibilidade,
   o que ter em maos para o orcamento, e o atalho para o WhatsApp.
   ========================================================================== */
.ct-reforco{margin-top:26px;background:var(--navy);color:#eaf0fb;border-radius:16px;padding:28px 26px}
.ct-reforco-tit{font-family:var(--ff-mono);font-size:12px;font-weight:700;letter-spacing:.05em;
  color:#9fb0cc;margin-bottom:18px}
.ct-numeros{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
.ct-numeros b{display:block;font-family:var(--ff-disp);font-weight:900;letter-spacing:-.02em;
  font-size:30px;line-height:1;color:#fff}
.ct-numeros b i{font-style:normal;color:var(--red-2)}
.ct-numeros span{display:block;font-size:13px;color:#aebdd6;margin-top:6px}
.ct-dica{font-size:14px;line-height:1.6;color:#c3cfe4;margin-top:24px;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.ct-dica b{color:#fff;font-weight:700}
.ct-cta{display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;
  font-weight:700;font-size:15px;padding:14px 22px;border-radius:10px;
  box-shadow:0 12px 26px rgba(235,26,16,.34);transition:.2s}
.ct-cta .ico{width:18px;height:18px;fill:#fff}
.ct-cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(235,26,16,.46)}
@media(max-width:640px){
  .ct-reforco{padding:24px 20px}
  .ct-numeros{gap:18px 14px}
  .ct-numeros b{font-size:26px}
}

/* ==== cards de compra: hover com menos vermelho e sem numero (30/07/2026) ====
   Os 8 de demolicao seguem com o hover vermelho cheio e a numeracao. */
.mod2--largo:hover::after{
  background:linear-gradient(180deg,rgba(235,26,16,.14) 0%,rgba(1,36,114,.70) 48%,rgba(1,19,63,.95) 100%)}

/* ==========================================================================
   DIFERENCIAIS "Por que Nobre": layout com mais presenca (30/07/2026)
   Eram 4 caixas iguais de contorno fino com icone solto. Agora: icone em
   moldura, fio vermelho no topo que cresce no hover e card que ganha corpo.
   ========================================================================== */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px}
.feat{position:relative;padding:34px 28px 32px;border:1px solid rgba(255,255,255,.12);
  border-radius:16px;background:rgba(255,255,255,.035);overflow:hidden;
  transition:transform .28s ease,background .28s ease,border-color .28s ease,box-shadow .28s ease}
.feat::before{content:"";position:absolute;top:0;left:0;height:3px;width:40px;
  background:var(--red);transition:width .4s cubic-bezier(.2,.8,.3,1)}
.feat:hover::before{width:100%}
.feat:hover{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.07);
  transform:translateY(-5px);box-shadow:0 24px 48px rgba(0,0,0,.32)}
.feat-ico{width:54px;height:54px;border-radius:13px;display:grid;place-items:center;
  background:rgba(235,26,16,.14);border:1px solid rgba(235,26,16,.32);transition:.28s}
.feat:hover .feat-ico{background:var(--red);border-color:var(--red);transform:scale(1.06)}
.feat .ico{width:26px;height:26px;fill:var(--red-2);transition:.28s}
.feat:hover .ico{fill:#fff}
.feat h4{color:#fff;font-family:var(--ff-disp);font-size:21px;font-weight:900;
  letter-spacing:-.01em;margin:20px 0 10px;line-height:1.2}
.feat p{color:#a9b8d2;font-size:14.5px;line-height:1.65}
/* 1a caixa (Seguranca acima de tudo) ja nasce ATIVA: linha vermelha cheia + icone
   com fundo vermelho (pedido Bianca 11/08/2026); as demais ativam no hover */
.feats .feat:first-child::before{width:100%}
.feats .feat:first-child .feat-ico{background:var(--red);border-color:var(--red)}
.feats .feat:first-child .ico{fill:#fff}
@media(max-width:1000px){.feats{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.feats{grid-template-columns:1fr;gap:16px}}

/* ==== carrossel de prêmios: 4 visíveis e sem pausa (30/07/2026) ====
   A Bianca relatou que "travou": era a pausa no hover, que com o cursor parado
   em cima parece congelado. Tirei a pausa e fixei a largura da peca para caber
   exatamente 4 no container (1320 - 96 de padding = 1224; 4x280 + 3x28 = 1204). */
.cert-mq--unico .cert{width:280px}
.cert-mq--unico .cert img{height:226px;width:100%;object-fit:contain}
.cert-mq--unico:hover .cert-mq-track{animation-play-state:running}
@media(max-width:1000px){
  .cert-mq--unico .cert{width:230px}
  .cert-mq--unico .cert img{height:188px}
}
@media(max-width:640px){
  .cert-mq--unico .cert{width:180px}
  .cert-mq--unico .cert img{height:150px}
}

/* ==== Sustentabilidade: preservar a camiseta com a marca (30/07/2026) ====
   O profissional esta na borda DIREITA da foto, exatamente onde o degradê que
   costura com o bloco azul era mais forte: "NOBRE DEMOLIDORA" e o site na
   camiseta estavam sendo apagados. Reenquadro para trazer a pessoa para dentro
   e o degradê so aperta bem no fim. */
.ma-foto img{object-position:82% center}
.ma-foto::after{
  background:linear-gradient(90deg,rgba(1,36,114,.30) 0%,rgba(1,36,114,0) 38%,
             rgba(1,36,114,.10) 74%,rgba(1,36,114,.55) 92%,var(--navy) 100%)}
@media(max-width:1000px){
  .ma-foto img{object-position:76% center}
  .ma-foto::after{background:linear-gradient(180deg,rgba(1,36,114,.24) 0%,rgba(1,36,114,0) 46%,
                  rgba(1,36,114,.72) 88%,var(--navy) 100%)}
}

/* ==== pagina Empresa, seção de prêmios reorganizada (30/07/2026) ====
   Antes: titulo ocupando a largura toda com o texto so na metade esquerda
   (lado direito vazio) e 3 paragrafos longos empilhados antes dos carrosseis,
   que nao tinham rotulo. ==== */
.premios-texto{font-size:16.5px;line-height:1.7;color:var(--muted);max-width:82ch;margin-top:34px}
.premios-rotulo{font-family:var(--ff-mono);font-size:12px;font-weight:700;letter-spacing:.05em;
  color:var(--muted);margin-top:46px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.premios-rotulo + .cert-mq{margin-top:26px}
@media(max-width:640px){.premios-texto{font-size:15.5px;margin-top:26px}}

/* ==========================================================================
   BUSCADOR DE DEMOLICOES (2a dobra de servicos/demolicao.html, 11/08/2026)
   ========================================================================== */
.svc-finder{background:#fff;padding:52px 0;border-bottom:1px solid var(--line-soft)}
.svc-finder .wrap{display:flex;align-items:center;gap:34px;max-width:1440px}
.finder-lado{display:flex;flex-direction:column;gap:14px;flex:0 0 250px}
.finder-rotulo{font-family:var(--ff-mono);font-size:13px;font-weight:700;letter-spacing:.05em;
  color:var(--red);display:inline-flex;align-items:center;gap:10px;flex:none}
.finder-rotulo::before{content:"";width:26px;height:2px;background:var(--red)}
.finder-busca{position:relative}
.finder-busca .lupa{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;fill:var(--muted);pointer-events:none}
.finder-busca input{width:100%;padding:12px 16px 12px 43px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);
  font:inherit;font-size:14.5px;transition:.18s}
.finder-busca input::placeholder{color:var(--muted)}
.finder-busca input:focus{outline:none;border-color:var(--red);background:#fff}
.finder-corpo{display:flex;flex-direction:column;gap:12px;flex:1;min-width:0}
.finder-vazio{display:none;color:var(--muted);font-size:14.5px}
.finder-vazio.ativo{display:block}
.finder-chips{display:flex;flex-wrap:wrap;gap:8px}
.finder-chips button{padding:9px 13px;border-radius:99px;font-size:13.5px;font-weight:600;
  color:var(--ink);background:var(--bg);border:1px solid var(--line);transition:.18s;white-space:nowrap}
.finder-chips button:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-1px)}
.finder-chips button.oculto{display:none}
.finder-chips button.ativo{background:var(--red);border-color:var(--red);color:#fff}
.finder-limpar{display:none;align-items:center;gap:8px;align-self:flex-start;
  font-size:14px;font-weight:700;color:var(--navy-3);padding:9px 0;border-bottom:2px solid var(--navy-3);transition:.18s}
.finder-limpar .ico{width:14px;height:14px}
.finder-limpar:hover{color:var(--red);border-bottom-color:var(--red)}
.finder-limpar.visivel{display:inline-flex}
section[id^="servico-"]{scroll-margin-top:96px}
@keyframes svcFlash{0%{background:rgba(235,26,16,.14)}100%{background:transparent}}
.svc-hit{animation:svcFlash 1.5s ease}
@media(max-width:900px){
  .svc-finder .wrap{flex-direction:column;align-items:stretch;gap:20px}
  .finder-lado{flex:none}
}
@media(max-width:640px){
  .svc-finder{padding:26px 0}
  .finder-chips button{padding:9px 14px;font-size:13.5px}
}

/* ==========================================================================
   MOLDURAS DE FOTO escolhidas pela Bianca 11/08/2026:
   .foto-e (pagina demolicao, 8 secoes): foto reta + contorno azul deslocado + faixa vermelha
   .foto-c (meio-ambiente 2a dobra): recorte diagonal + fundo azul deslocado + selo
   ========================================================================== */
.foto-e{position:relative;max-width:560px;margin:0 auto}
.foto-e .foto{border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(1,19,63,.22)}
.foto-e .foto img{width:100%;height:480px;object-fit:cover;display:block}
.foto-e::before{content:"";position:absolute;inset:-14px 14px 14px -14px;z-index:-1;
  border:3px solid var(--navy-3);border-radius:18px}
/* linha atras da foto ALTERNADA: 1a sim, 2a nao... (pedido Bianca 11/08/2026);
   as secoes pares sao as split--rev, entao a regra alterna sozinha */
.split--rev .foto-e::before{display:none}
/* faixa em AZUL ROYAL (escolha Bianca 11/08/2026; vermelho fica so nos CTAs) */
.foto-e .faixa{position:absolute;top:20px;right:-12px;background:var(--navy-3);color:#fff;
  font-family:var(--ff-disp);font-weight:900;font-size:14px;letter-spacing:.06em;
  padding:10px 26px;box-shadow:0 12px 30px rgba(1,44,139,.35)}
.foto-e .faixa::after{content:"";position:absolute;right:0;top:100%;
  border-left:12px solid transparent;border-top:10px solid var(--navy-2)}
/* foto na ESQUERDA (split--rev): faixa tambem na esquerda (pedido Bianca 11/08/2026) */
.split--rev .foto-e .faixa{right:auto;left:-12px}
.split--rev .foto-e .faixa::after{right:auto;left:0;border-left:none;
  border-right:12px solid transparent;border-top:10px solid var(--navy-2)}
@media(max-width:640px){
  .foto-e .foto img{height:340px}
  .foto-e .faixa{right:0;font-size:13px;padding:9px 20px}
  .split--rev .foto-e .faixa{left:0}
  .foto-e .faixa::after{display:none}
}

.foto-c{position:relative;display:grid}
.foto-c .foto{clip-path:polygon(0 0,100% 5%,100% 100%,0 95%);border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(1,19,63,.22)}
.foto-c .foto img{width:100%;height:100%;min-height:100%;object-fit:cover;display:block}
.foto-c::before{content:"";position:absolute;inset:18px -18px -18px 18px;z-index:-1;border-radius:18px;
  background:linear-gradient(135deg,var(--navy-3),var(--navy));clip-path:polygon(0 0,100% 5%,100% 100%,0 95%)}
.foto-c .selo{position:absolute;bottom:34px;left:-20px;background:var(--red);color:#fff;
  font-family:var(--ff-disp);font-weight:900;font-size:15px;padding:12px 22px;border-radius:10px;
  box-shadow:0 12px 30px rgba(235,26,16,.4)}
@media(max-width:900px){
  .foto-c .foto img{height:420px}
  .foto-c::before{inset:14px -10px -14px 10px}
  .foto-c .selo{left:10px}
}

/* ==========================================================================
   BLOG (artigos criados 11/08/2026 a partir do conteudo do site antigo)
   ========================================================================== */
.artigo{max-width:880px}
.artigo-capa{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:42px}
.artigo-capa img{width:100%;height:400px;object-fit:cover;display:block}
.artigo .prose h2{font-family:var(--ff-disp);font-weight:800;font-size:clamp(22px,2.6vw,29px);
  letter-spacing:-.01em;margin-top:42px;line-height:1.15}
.artigo-lista{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.artigo-lista li{position:relative;padding-left:24px;color:var(--muted);font-size:16.5px}
.artigo-lista li::before{content:"›";position:absolute;left:6px;color:var(--red);font-weight:700}
.artigo-lista li b{color:var(--ink)}
.artigo-cta{margin-top:52px;background:var(--cream);border-radius:16px;padding:30px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.artigo-cta p{color:var(--muted);max-width:52ch}
.artigo-cta b{color:var(--ink);font-size:18px}
.voltar-blog{font-weight:700;color:var(--navy-3);border-bottom:2px solid var(--navy-3);padding-bottom:2px;transition:.18s}
.voltar-blog:hover{color:var(--red);border-bottom-color:var(--red)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.post-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:.22s}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.post-card>img{width:100%;height:190px;object-fit:cover;display:block}
.post-card-corpo{padding:22px 22px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card .tag{font-family:var(--ff-mono);font-size:11.5px;font-weight:700;color:var(--red);letter-spacing:.05em}
.post-card h3{font-family:var(--ff-disp);font-weight:800;font-size:18.5px;line-height:1.25}
.post-card p{font-size:14.5px;color:var(--muted);flex:0 0 auto;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--red)}
.post-card .go .ico{fill:var(--red)}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr}.artigo-capa img{height:230px}
  .artigo-cta{flex-direction:column;align-items:flex-start}}

/* ==== Padrao Nobre: escudo + cards 2x2 (pedido Eliane 20/08/2026) ==== */
.padrao-grid{display:grid;grid-template-columns:.88fr 1.4fr;gap:56px;align-items:center;margin-top:52px}
.padrao-escudo{margin:0;display:grid;place-items:center}
.padrao-escudo img{width:100%;max-width:430px;height:auto;
  filter:drop-shadow(0 30px 52px rgba(0,0,0,.55))}
.feats.feats--escudo{grid-template-columns:1fr 1fr;margin-top:0}
.feat .ico--tr{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--red-2)}
.feat:hover .ico--tr{fill:none;color:#fff}
.feats .feat:first-child .ico--tr{fill:none;color:#fff}
@media(max-width:1000px){
  .padrao-grid{grid-template-columns:1fr;gap:42px}
  .padrao-escudo img{max-width:330px}
  .feats.feats--escudo{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .feats.feats--escudo{grid-template-columns:1fr}
  .padrao-escudo img{max-width:280px}
}

/* ==== video institucional (Empresa) ==== */
.video-inst{max-width:920px;margin:48px auto 0;border-radius:18px;overflow:hidden;
  box-shadow:0 26px 60px rgba(1,19,63,.24)}
.video-inst video{display:block;width:100%;height:auto;background:#000}

/* ==== mini-carrossel de fotos por servico (pedido Eliane 20/08/2026) ==== */
.foto.foto-multi{position:relative}
.foto-multi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .7s ease}
.foto-multi img:first-child{position:relative;inset:auto;display:block}
.foto-multi img.fm-on{opacity:1}
/* 23/09: galpoes-5 tem a escavadeira no canto esquerdo; na moldura vertical o centro cortava a maquina */
.foto-multi img.fm-esq.fm-esq{object-position:9% 80%}
.fm-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;
  gap:8px;z-index:2}
.fm-dots button{width:9px;height:9px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:rgba(255,255,255,.5);box-shadow:0 1px 4px rgba(0,0,0,.35);transition:.2s}
.fm-dots button.on{background:#fff;transform:scale(1.3)}

/* ==== icones reais do escudo nas caixas do Padrao Nobre (pedido Eliane/Bianca 24/08) ==== */
.feat-ico{width:60px;height:60px}
.feat-ico .ico-img{width:40px;height:40px;object-fit:contain;display:block;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}

/* ==== video institucional dentro da 2a dobra da Empresa (pedido Bianca 24/08) ==== */
.video-inst--split{margin:0;max-width:560px;width:100%;justify-self:end;align-self:center;
  position:relative;overflow:visible}
.video-inst--split video{border-radius:18px;overflow:hidden}
.video-inst--split .video-selo{position:absolute;top:-14px;right:-12px;background:var(--navy-3);
  color:#fff;font-family:var(--ff-disp);font-weight:900;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;padding:9px 20px;box-shadow:0 12px 30px rgba(1,44,139,.35);z-index:2}
@media(max-width:900px){.video-inst--split{justify-self:center;margin-top:8px}
  .video-inst--split .video-selo{right:0}}

.foto-multi .fm-dots{bottom:14px}


/* ==== galeria bento da Empresa (melhoria 24/08) ==== */
.gallery--bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;
  gap:14px;margin-top:52px}
.gallery--bento .g-item{position:relative;margin:0;border-radius:14px;overflow:hidden}
.gallery--bento .g-destaque{grid-column:span 2;grid-row:span 2}
.gallery--bento img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease}
.gallery--bento .g-item:hover img{transform:scale(1.06)}
.gallery--bento figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;
  color:#fff;font-size:13px;font-weight:700;letter-spacing:.03em;
  background:linear-gradient(transparent,rgba(1,10,30,.78));opacity:0;transition:.35s}
.gallery--bento .g-item:hover figcaption{opacity:1}
@media(max-width:900px){.gallery--bento{grid-template-columns:1fr 1fr;grid-auto-rows:170px}}
@media(max-width:560px){.gallery--bento{grid-auto-rows:140px;gap:10px}}

/* ==== dobra Quem somos empilhada: texto em cima, video embaixo (pedido Bianca 24/08) ==== */
.quem-somos{max-width:880px;margin:0 auto;text-align:center}
.quem-somos .eyebrow{justify-content:center}
.video-inst--stack{position:relative;overflow:visible;max-width:960px;margin:52px auto 0}
.video-inst--stack video{border-radius:18px;overflow:hidden}
.video-inst--stack .video-selo{position:absolute;top:-14px;right:-12px;background:var(--navy-3);
  color:#fff;font-family:var(--ff-disp);font-weight:900;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;padding:9px 20px;box-shadow:0 12px 30px rgba(1,44,139,.35);z-index:2}
@media(max-width:900px){.video-inst--stack{margin-top:36px}
  .video-inst--stack .video-selo{right:0}}


/* ==== lightbox da galeria da Empresa (pedido Bianca 24/08) ==== */
.lb{position:fixed;inset:0;z-index:2000;background:rgba(1,8,25,.94);
  display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none!important}
.lb figure{margin:0;max-width:min(1100px,92vw);text-align:center}
.lb img{max-width:100%;max-height:82vh;border-radius:12px;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb figcaption{color:#cfd9ee;font-size:14px;font-weight:600;letter-spacing:.03em;
  margin-top:14px}
.lb-x{position:absolute;top:18px;right:22px;width:46px;height:46px;border:0;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;
  transition:.2s}
.lb-x:hover{background:var(--red)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;
  cursor:pointer;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;
  display:grid;place-items:center;transition:.2s}
.lb-nav svg{width:20px;height:20px;fill:currentColor}
.lb-nav:hover{background:var(--red)}
.lb-prev{left:20px}
.lb-next{right:20px}
@media(max-width:640px){.lb-prev{left:8px}.lb-next{right:8px}
  .lb-nav,.lb-x{width:40px;height:40px}}

/* titulo Quem somos em UMA linha no desktop (pedido Bianca 24/08) */
.quem-somos .section-title{white-space:nowrap;text-wrap:nowrap;font-size:clamp(28px,3.35vw,45px)}
@media(max-width:760px){.quem-somos .section-title{white-space:normal;text-wrap:balance}}

/* Por que Nobre: fundo VERMELHO nos 4 icones (pedido Bianca 24/08) */
.feats .feat .feat-ico{background:var(--red);border-color:var(--red)}

/* titulo Quem somos um pouco maior (pedido Bianca 24/08) */
.quem-somos .section-title{font-size:clamp(30px,3.7vw,50px);margin-left:-140px;margin-right:-140px}
@media(max-width:1180px){.quem-somos .section-title{margin-left:0;margin-right:0}}
/* 9 servicos: grade de solucoes da home em 3 colunas (3x3) */
.mod2-grid:not(.mod2-grid--2){grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.mod2-grid:not(.mod2-grid--2){grid-template-columns:1fr 1fr}}
@media(max-width:640px){.mod2-grid:not(.mod2-grid--2){grid-template-columns:1fr}}

/* Empresa: video institucional EM CIMA, textos abaixo (pedido cliente 08/09/2026) */
.video-inst--stack{margin:0 auto}
.quem-somos{margin-top:56px}
@media(max-width:900px){.quem-somos{margin-top:40px}}

/* Empresa: titulo Quem somos em 2 linhas, quebra depois da virgula (pedido Bianca 11/09/2026) */
.quem-somos .section-title{white-space:normal;text-wrap:wrap;margin-left:0;margin-right:0}

/* carrossel com VIDEO: o video herda o mesmo tamanho das fotos (servico 08, 11/09/2026) */
.foto-e .foto video{width:100%;height:480px;object-fit:cover;display:block;background:#0b1f44}
.foto-multi video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.foto-multi video:first-child{position:relative;inset:auto;display:block}
.foto-multi video.fm-on{opacity:1}
@media(max-width:640px){.foto-e .foto video{height:340px}}

/* Compra: foto de galpao que e metade ceu, enquadrar mais embaixo no espaco vertical (11/09/2026) */
.foto-multi img.fm-baixo{object-position:center 80%}

/* Fotos dos servicos sem cortar pessoas (pedido Bianca 18/09/2026): moldura 3:2 e mais larga,
   no lugar da quase quadrada 560x480 que escondia de 35% a 50% das fotos panoramicas */
.split:has(>.foto-e){grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.split--rev:has(>.foto-e){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.foto-e{max-width:640px}
.foto-e .foto img,.foto-e .foto video{height:auto;aspect-ratio:3/2}
.foto-multi img.fm-pos-esq{object-position:20% center}
@media(max-width:900px){.split:has(>.foto-e),.split--rev:has(>.foto-e){grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.foto-e .foto img,.foto-e .foto video{height:auto}}

/* CTA "Fale com a equipe da Nobre sobre sua obra" (18/09/2026): texto longo quebra em 2 linhas
   no celular, entao as linhas saem equilibradas e o botao nunca passa da coluna */
.btn,.footer-cta{text-wrap:balance}
.footer-cta{max-width:100%}

/* Midias com 7 videos (18/09/2026): a lista passou a ser mais alta que o player e abria faixa preta
   embaixo do video. No desktop a lista acompanha a altura do player e rola por dentro */
@media(min-width:1001px){
  .tv-list{height:0;min-height:100%}
  .tv-items{max-height:none;flex:1 1 0;min-height:0}
}

/* Clientes: video de depoimentos acima das logos (18/09/2026). O arquivo e 480x268,
   entao a moldura fica menor que a do institucional para nao esticar demais a imagem */
.depo-duo{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;
  margin:40px 0 48px}
.depo-video{border-radius:18px;overflow:hidden;box-shadow:0 26px 60px rgba(1,19,63,.24);background:#000}
.depo-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#000}
.depo-duo .video-selo{position:absolute;top:-14px;right:-12px;background:var(--navy-3);
  color:#fff;font-family:var(--ff-disp);font-weight:900;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;padding:9px 20px;box-shadow:0 12px 30px rgba(1,44,139,.35);z-index:2}
@media(max-width:900px){.depo-duo{grid-template-columns:minmax(0,1fr);margin-top:36px}
  .depo-duo .video-selo{right:0}}

/* A Empresa: os 2 videos institucionais lado a lado, no lugar do .video-inst--stack (18/09/2026) */
.depo-duo--inst{margin:52px 0 0}
@media(max-width:900px){.depo-duo--inst{margin-top:36px}}

/* A Empresa: selo embaixo do video da esquerda + Quem somos em 2 colunas (21/09/2026) */
.depo-duo--inst{align-items:start}
.depo-col{position:relative;min-width:0}
.depo-col .depo-video{width:100%}
/* 21/09 (Bianca): selo volta para o canto de cima, agora no 1o video */
.depo-duo .video-selo--abaixo{position:absolute;top:-14px;right:-12px;z-index:2}
@media(max-width:900px){.depo-duo .video-selo--abaixo{right:0}}
.quem-somos-split{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:56px;align-items:center;margin-top:64px}
.quem-somos-split .eyebrow{justify-content:flex-start}
.quem-somos-split .section-title{text-align:left;font-size:clamp(28px,2.9vw,40px);margin:14px 0 0}
.quem-somos-split .qs-esq p{color:var(--muted);margin-top:20px;font-size:17px}
.quem-somos-split .qs-dir p{max-width:none}
.qs-linha{align-self:stretch;width:1px;background:rgba(1,36,114,.18)}
@media(max-width:900px){
  .quem-somos-split{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:40px}
  .qs-linha{width:64px;height:1px;align-self:auto}
}

/* Meio ambiente: fotos novas do Drive (21/09/2026) */
.ma-foto img[src*="ma-planeta-escavadeira"]{object-position:50% center}
img[src*="ma-horta.webp"]{object-position:62% center}

/* 05/10/2026: botao de texto longo no celular, texto centralizado e icone colado */
@media (max-width:429px){.btn.btn-longo{display:block;text-align:center;padding-left:20px;padding-right:20px}.btn.btn-longo .ico{display:inline-block;vertical-align:-3px;margin-left:8px}}