:root{
  --primary:#0e2a47; /* azul profundo */
  --accent:#1f7aec; /* destaque moderno */
  --amber:#e7a416;
  --dark:#0a1724; /* fundo dark */
  --text:#e5eef8; /* texto claro no dark */
  --muted:#93a4b7;
  --bg:#0b1724;
  --bg-alt:#0f1e30;
  --border:#183049;
  --banner-w: clamp(1040px, 84vw, 1480px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Source Sans 3",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
.theme-dark{background:var(--bg);color:var(--text)}

.container{width:min(1100px,92%);margin:0 auto}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(90deg,var(--dark),#081220 70%);border-bottom:1px solid var(--border)}
.home-no-header .site-header{display:none}
/* Páginas que não devem exibir cabeçalho no desktop */
.no-header .site-header{display:none}
@media (max-width:640px){
  /* Na home, mostrar cabeçalho apenas no mobile para manter logo igual às demais rotas */
  .home-no-header .site-header{display:block}
  /* Em páginas internas com no-header, exibir cabeçalho apenas no mobile */
  .no-header .site-header{display:block}
}
.site-header.wedge::before{content:"";position:absolute;left:0;top:0;height:100%;width:300px;background:linear-gradient(180deg,#123053,#0c2136);clip-path:polygon(0 0,100% 0,70% 100%,0 100%)}
.topbar{border-bottom:1px solid var(--border);background:#0d2034}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:.4rem 0}
.brand{font-family:Montserrat,Arial,sans-serif;font-weight:800;color:#fff;text-decoration:none}
.contact-top{color:#c6d2df}
.header-inner{display:flex;align-items:center;justify-content:flex-end;padding:.6rem 0}
.nav-list{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.nav-list a{color:#c6d2df;text-decoration:none;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.nav-list a:hover{color:var(--primary)}
.nav-list a.active{color:#fff}
.nav-toggle{display:none;border:0;background:none;font-size:1.4rem;cursor:pointer}

/* Logo móvel (default: oculto) */
.mobile-brand{display:none}

/* Hero */
.hero-slider{position:relative;height:100vh;overflow:hidden}
.hero-arc{position:absolute;left:0;top:0;width:100%;height:140px;z-index:1;pointer-events:none}
.hero-slide{position:absolute;inset:0;display:grid;place-items:center;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity 0.8s ease-in-out;z-index:1;pointer-events:none}
.hero-slide::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(12,33,54,.30),rgba(12,33,54,.30));opacity:.65}
.hero-sheen{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);
  mix-blend-mode: screen; opacity:.0; animation: sheenSweep 9s ease-in-out 1.2s infinite;
}
.hero-ornament{position:absolute;right:clamp(1rem,6vw,3rem);bottom:clamp(1rem,6vw,2rem);width:420px;height:420px;z-index:3;pointer-events:none;opacity:.50;filter:drop-shadow(0 6px 18px rgba(0,0,0,.22))}
.hero-ornament .layer{transform-origin:50% 50%;}
/* Desativar animações da engrenagem para evitar qualquer interferência visual */
.hero-ornament .layer.big{animation:none}
.hero-ornament .layer.mid{animation:none}
.hero-ornament .layer.small{animation:none}
/* Remove ornament/engrenagem em todas as visões */
.hero-ornament{display:none !important}
.brand-mark{position:absolute;left:-40px;bottom:20px;width:520px;height:520px;z-index:3;pointer-events:none;opacity:.45}
.brand-wordmark{display:none}
.hero-tag{display:inline-block;padding:.72rem 1.4rem;background:rgba(8,16,24,.42);backdrop-filter:saturate(1.15) blur(1.2px);border-left:3px solid var(--amber);text-transform:uppercase;letter-spacing:.18em;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.hero-content h1{font-family:Montserrat,Arial,sans-serif;font-size:3.6rem;margin:0 0 .6rem;color:#fff}
.hero-content p{margin:0 0 1rem;color:#dbe7f3}
.hero-content{position:relative;z-index:5}
.hero .hero-content{margin-left:clamp(320px, 35vw, 520px)}
.hero-content::before{content:"";position:absolute;left:-2rem;top:8%;width:280px;height:96px;background:linear-gradient(180deg,rgba(31,122,236,.35),rgba(12,33,54,0));transform:skewX(-18deg);border-left:3px solid var(--amber);border-right:1px solid rgba(255,255,255,.18);opacity:.55;filter:blur(.6px)}
.hero-controls{position:absolute;left:2rem;bottom:2rem;display:flex;gap:1rem}
.hero-controls button{background:#0e2a47;color:#dbe7f3;border:1px solid var(--border);padding:.5rem .8rem;border-radius:999px}
.btn{display:inline-block;padding:.8rem 1.2rem;border-radius:.5rem;text-decoration:none;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{filter:brightness(1.1)}
.btn-outline{border:2px solid #fff;color:#fff}
.btn-outline:hover{background:#fff;color:#000}

/* Sections */
.section{padding:4rem 0}
.section.dark-bg{background:var(--bg-alt)}
/* Variantes de cor por seção (estilo SIAN) */
.section.navy-bg{background:linear-gradient(180deg,#0c2136,#0a1724)}
.section.blue-bg{background:linear-gradient(180deg,#123053,#0c2136)}
.section.slate-bg{background:#0e2035}
.section + .section{border-top:1px solid var(--border)}

.section h2 {
  font-family: Montserrat, Arial, sans-serif;
  margin: 0 0 .5rem
}

.section-title {
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  position: relative;
  padding-left: 1rem
}

/* Ajuste fino de alinhamento do título de seção no mobile (Quem Somos/Clientes) */
.section .section-title {
  padding-left: 1.5rem
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15rem;
  width: 10px;
  height: 28px;
  background: linear-gradient(180deg, var(--amber), #ffd37a);
  border-radius: 2px;
  transform: skewX(-12deg);
  box-shadow: 0 2px 8px rgba(231, 164, 22, .25)
}

.global-title {
  display: flex;
  justify-content: center;
  /* max-height: 5%; */
  font-size: clamp(3rem, 4vw, 6rem);
  letter-spacing: 0.32em;
}

.section-lead{color:var(--muted);margin:0 0 1.5rem}
/* Curved separators (waves) */
.section-wave{position:relative;height:80px;display:block}
.section-wave svg{width:100%;height:100%;display:block}
.section-wave.down{margin-top:-1px}
.section-wave.up{transform:rotate(180deg)}
/* Diagonal section backdrop */
.section.diagonal{position:relative;overflow:hidden}
.section.diagonal::before{content:"";position:absolute;left:-5%;top:-40px;width:110%;height:140px;background:linear-gradient(90deg,#0c2136 0%,#123053 40%,rgba(31,122,236,.15) 85%);transform:skewY(-3deg);opacity:.45;z-index:0;pointer-events:none}
/* Home: MVV and Differentials */
.mvv-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.mvv-card{background:var(--bg-alt);border:1px solid var(--border);border-radius:.75rem;padding:1rem}
.mvv-card h3{margin:.2rem 0 .6rem;font-family:Montserrat,Arial,sans-serif}
.feature-list{margin:.6rem 0 0;padding-left:1.1rem;color:#c6d2df}
.feature-list li{margin:.25rem 0}
.feature-list.iconized{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.feature-list.iconized li{background:#0e2035;border:1px solid var(--border);border-radius:.6rem;padding:.6rem}

.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.media img{width:100%;border-radius:.75rem}
.media.mask-ellipse img{clip-path:ellipse(68% 56% at 50% 46%)}

/* Home: Sobre (imagem maior) */
.about-home .grid-2{grid-template-columns:.85fr 1.15fr}
.about-home .media img{height:420px;object-fit:cover}

.pill-group{display:grid;gap:.6rem;margin-top:1rem}
.pill{background:#fff;border:1px solid var(--border);border-radius:.6rem;padding:.7rem}

.cards{display:grid;gap:1rem}
.cards-3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--border);border-radius:.75rem;padding:1rem}
.card h3{margin:.2rem 0 .6rem;font-family:Montserrat,Arial,sans-serif;color:#0c2136}
.card p{margin:0;color:#536479}
/* Reduce rectangular feel: subtle notch on bottom-right */
.news-item, .work-card{position:relative;clip-path: polygon(0 0,100% 0,100% calc(100% - 16px), calc(100% - 16px) 100%,0 100%)}
.news-item::after, .work-card::after{content:"";position:absolute;right:0;bottom:0;width:16px;height:16px;background:linear-gradient(135deg,var(--amber),var(--accent));}
.overlay-cards .card.big-photo{position:relative;height:320px;border:0;padding:0;background:transparent}
.big-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,23,36,.25),rgba(10,23,36,.45)),var(--photo) center/cover no-repeat;border-radius:.75rem}
.big-photo span{position:absolute;left:1rem;bottom:1rem;color:#fff;font-weight:800;text-transform:uppercase}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gallery img{width:100%;height:240px;object-fit:cover;border-radius:.75rem}
/* Home: Teasers */
.teaser{background:#0e2035;border:1px solid var(--border);border-radius:.75rem;padding:1.2rem}
.teaser h3{margin:0 0 .4rem;font-family:Montserrat,Arial,sans-serif}

.news{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.news-item{border:1px solid var(--border);border-radius:.75rem;padding:1rem;background:#fff;color:#0c2136}
.news-item h3{color:#0c2136}
.news-item p{color:#536479}
.news-item time{color:var(--muted);font-size:.9rem}
/* News images and meta */
.news-item img{width:100%;height:180px;object-fit:cover;border-radius:.5rem;margin:0 0 .6rem}
.news-meta{color:#6a7a8c;font-size:.9rem;margin:.2rem 0 .6rem}

/* Legibilidade em seções escuras (Home/Imprensa) */
.section.dark-bg .news-item{color:#eaf2fa}
.section.dark-bg .news-item h3{color:#eaf2fa}
.section.dark-bg .news-item p{color:#cfe3f7}
.section.dark-bg .news-item .news-meta, .section.dark-bg .news-item time{color:#b7c9dc}
.search-form input{width:100%;padding:.7rem 1rem;border:1px solid var(--border);border-radius:999px;background:#fff;color:#0c2136}

.contact-list{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:.4rem}
.contact-list a{color:var(--primary)}
.contact-form{display:grid;gap:.8rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;padding:.8rem;border:1px solid var(--border);border-radius:.5rem;font:inherit;background:#fff;color:#0c2136}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#93a4b7}
.contact-form select{appearance:auto}
.contact-form button{justify-self:start}

.map-wrapper{height:320px;border-radius:.75rem;overflow:hidden;border:1px solid var(--border)}
.map-wrapper iframe{width:100%;height:100%;border:0}
/* Contact bar */
.cta-bar{background:linear-gradient(90deg,#0d2034, #0a1724);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cta-inner{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;color:#c6d2df}

/* Footer */
.site-footer{background:#071221;color:#c6d2df}
.footer-inner{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}
.site-footer a{color:#c6d2df}
/* Footer columns */
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:2rem 0;border-top:1px solid var(--border)}
.footer-grid h4{margin:.2rem 0 .6rem;font-family:Montserrat,Arial,sans-serif}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}

/* WhatsApp float */
.whatsapp-float{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;background:#25D366;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:90}
.whatsapp-float::before{content:"";position:absolute;inset:0;background:url('https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg') center/60% no-repeat}
.whatsapp-float:hover{transform:translateY(-2px)}

/* Responsive */
@media (max-width:960px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .mvv-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  /* Sobre: empilhar e colocar a imagem antes do texto em tablet/mobile */
  .about-home .grid-2{display:flex;flex-direction:column}
  .about-home .grid-2 > figure{order:-1;margin-bottom:1rem}
}
@media (max-width:640px){
  .nav-toggle{display:block}
}

/* ===== Obras (modelo SIAN) ===== */
.sian-hero:root{ --banner-w: min(92vw,1480px); }
.sian-hero{position:relative;height:420px;background:linear-gradient(180deg,#0c2136,#0a1724)}
.sian-hero .hero-backdrop{position:absolute;inset:0;background:url('../img/hero3.svg') center/cover no-repeat;opacity:.24;mix-blend-mode:normal}
.sian-hero .hero-overlay-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-transform:uppercase;font-family:Montserrat,Arial,sans-serif;font-weight:800;letter-spacing:.06em;color:#cfe0f5;opacity:.28;font-size:clamp(2.4rem,9vw,7rem);white-space:nowrap}

.works-carousel{position:relative; 
  background:
    radial-gradient(800px 400px at 0% 50%, rgba(134,197,230,.06) 0%, transparent 60%),
    radial-gradient(800px 400px at 100% 50%, rgba(31,122,236,.05) 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(134,197,230,.03) 0 1px, transparent 1px 32px);
  background-blend-mode: soft-light, soft-light, normal, normal;
}
/* Glow discreto nas laterais para preencher áreas vazias */
.works-carousel::before{content:"";position:absolute;top:0;bottom:0;left:0;width:72px;pointer-events:none;background:linear-gradient(90deg, rgba(134,197,230,.08) 0%, rgba(134,197,230,0) 100%)}
.works-carousel::after{content:"";position:absolute;top:0;bottom:0;right:0;width:72px;pointer-events:none;background:linear-gradient(270deg, rgba(134,197,230,.08) 0%, rgba(134,197,230,0) 100%)}
/* Slides empilhados com foto larga e painel de texto à esquerda */
.work-slide{display:block;margin:2.4rem 0 2.2rem}
.work-slide.active{display:block}
.work-banner{position:relative}
.work-banner{display:flex;justify-content:center;align-items:center;margin:0 auto}
.banner-frame{position:relative;width:var(--banner-w, min(92vw, 1480px))}
.banner-img{display:block;width:100%;height:780px;object-fit:cover;border-radius:10px;box-shadow:0 24px 48px rgba(0,0,0,.35);filter:saturate(1.03) contrast(1.02) drop-shadow(0 20px 36px rgba(0,0,0,.32))}
.banner-frame::before{content:"";position:absolute;inset:0;border-radius:10px;box-shadow:0 16px 48px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.banner-frame::after{content:"";position:absolute;inset:auto 0 0 0;height:100px;border-radius:0 0 10px 10px;background:linear-gradient(180deg, transparent 0%, rgba(8,16,24,.18) 50%, rgba(8,16,24,.32) 100%);pointer-events:none}
.banner-overlay{position:absolute;inset:0;pointer-events:none}
.banner-overlay::before{content:"";position:absolute;left:0;top:0;bottom:0;width:min(52%,520px);background:linear-gradient(90deg,rgba(12,33,54,.92) 0%, rgba(12,33,54,.66) 64%, rgba(12,33,54,0) 100%);border-radius:10px 0 0 10px;clip-path:polygon(0 0, 78% 0, 52% 100%, 0 100%)}
.banner-overlay::after{content:"";position:absolute;right:0;top:0;bottom:0;width:min(40%,520px);pointer-events:none;mix-blend-mode:screen;opacity:.28;
  background:
    radial-gradient(120px 120px at 86% 24%, rgba(134,197,230,.22) 0 60%, transparent 60%),
    radial-gradient(140px 140px at 92% 64%, rgba(31,122,236,.18) 0 60%, transparent 60%),
    linear-gradient(120deg, transparent 42%, rgba(255,255,255,.08) 52%, transparent 62%);
  animation: ambientSweep 16s ease-in-out 1.4s infinite;
}
.banner-info{position:absolute;left:14px;top:38px;width:min(40%,420px);max-width:44ch;color:#eaf2fa;pointer-events:auto}
.banner-info::before{content:"";position:absolute;inset:-10px -12px -12px -12px;border-radius:12px;background:rgba(12,33,54,.36);backdrop-filter:saturate(1.1) blur(3px);border:1px solid rgba(255,255,255,.12);z-index:-1;box-shadow:0 12px 28px rgba(0,0,0,.28)}
.banner-info h3{margin:0 0 .6rem;font-family:Montserrat,Arial,sans-serif;font-weight:800;letter-spacing:.02em;font-size:clamp(1.3rem,2vw,1.8rem)}
.banner-info p{margin:0 0 1rem;max-width:48ch;font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.55}
.thumbs-row{display:block;margin-top:1rem;width:var(--banner-w);margin-left:auto;margin-right:auto;overflow:hidden;position:relative}
/* Fades nas bordas da faixa de miniaturas (efeito cortina) */
.thumbs-row::before,
.thumbs-row::after{content:"";position:absolute;top:0;bottom:0;width:42px;pointer-events:none;z-index:2}
.thumbs-row::before{left:0;background:linear-gradient(90deg, rgba(12,33,54,.75) 0%, rgba(12,33,54,.35) 40%, transparent 100%)}
.thumbs-row::after{right:0;background:linear-gradient(270deg, rgba(12,33,54,.75) 0%, rgba(12,33,54,.35) 40%, transparent 100%)}
.work-info{background:linear-gradient(180deg,#103355,#0d2a46);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:1.25rem;color:#eaf2fb;box-shadow:0 10px 26px rgba(0,0,0,.28)}
.work-info h3{margin:.2rem 0 .6rem;font-family:Montserrat,Arial,sans-serif;font-size:1.05rem;line-height:1.4;text-transform:uppercase;letter-spacing:.04em}
.work-info p{color:#cfe6ff;font-size:1rem;line-height:1.7;margin:0 0 1rem}
.work-info .btn{border-radius:999px}
/* Removido o photo-card em grid; usamos banner full-bleed */
.work-thumbs{display:flex;width:100%;gap:var(--thumb-gap, 16px);margin:0;padding:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-behavior:smooth;cursor:grab;box-sizing:border-box;--thumb-gap:16px;--thumb-fix:12px;flex-wrap:nowrap;scrollbar-gutter:stable;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    repeating-linear-gradient(90deg, rgba(134,197,230,.07) 0 24px, transparent 24px 48px);
}
.work-thumbs.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.work-thumbs::-webkit-scrollbar{height:8px}
.work-thumbs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:8px}
.work-thumbs img{flex:0 0 calc((100% - (5 * var(--thumb-gap)) - var(--thumb-fix))/6);height:180px;object-fit:cover;border-radius:12px;border:1px solid rgba(134,197,230,.18);background:#0b1c2c;scroll-snap-align:start;box-sizing:border-box;-webkit-user-drag:none;user-select:none;box-shadow:0 8px 20px rgba(0,0,0,.26);filter:drop-shadow(0 8px 16px rgba(0,0,0,.18));transition:transform .22s ease, box-shadow .22s ease, filter .22s ease}
.work-thumbs img:hover{transform:translateY(-6px) scale(1.015);box-shadow:var(--shadow-2), 0 0 0 1px rgba(255,255,255,.08), 0 20px 40px rgba(0,0,0,.38);filter:brightness(1.06) drop-shadow(0 24px 32px rgba(0,0,0,.42))}
.work-thumbs img:focus-visible{outline:2px solid #1f7aec;outline-offset:3px}
.thumbs-prev,.thumbs-next{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:#0b1c2c;color:#cfe0f5}
.thumbs-prev:hover,.thumbs-next:hover{background:#0d2234}
.work-slide:not(:last-child)::after{content:"";display:block;width:var(--banner-w);height:2px;margin:1.4rem auto 0;background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.14) 50%, transparent 100%);opacity:.7;filter:drop-shadow(0 8px 16px rgba(0,0,0,.22))}
.carousel-dots{display:none}
.carousel-dots .dot{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:transparent}
.carousel-dots .dot.active{background:#eaf2fb;border-color:#eaf2fb}

@media (max-width:960px){
.banner-frame{width:var(--banner-w)}
 :root{ --banner-w: min(92vw,1480px); }
.banner-img{height:700px}
 .banner-info{left:20px;top:24px;width:min(500px,86vw)}
.work-thumbs img{flex:0 0 calc((100% - (5 * var(--thumb-gap)) - var(--thumb-fix))/6);height:160px;box-sizing:border-box;-webkit-user-drag:none;user-select:none}
}
@media (max-width:640px){
 .sian-hero{height:320px}
.banner-frame{width:var(--banner-w)}
 :root{ --banner-w: 94vw; }
.banner-img{height:580px}
.work-thumbs img{flex:0 0 calc((100% - (5 * var(--thumb-gap)) - var(--thumb-fix))/6);height:140px;box-sizing:border-box;-webkit-user-drag:none;user-select:none}
 .work-slide{margin:2rem 0 2.6rem}
 .work-slide:not(:last-child)::after{margin:1.2rem auto 0;opacity:.6}
}
/* Mobile refinements */
@media (max-width:480px){
  :root{ --banner-w: 95vw; }
  .sian-hero{height:260px}
  .sian-hero .hero-overlay-text{font-size:clamp(2rem,11vw,3.2rem)}
  .banner-img{height:420px}
  /* reduzir overlay para não cobrir a foto no mobile */
  .banner-overlay::before{width:min(46%,420px);clip-path:polygon(0 0, 76% 0, 42% 100%, 0 100%)}
  .banner-info{left:12px;top:18px;width:min(92vw,420px)}
  .banner-info h3{font-size:clamp(1.1rem,4.6vw,1.4rem)}
  /* no mobile exibir somente o título e o botão */
  .banner-info p{display:none}
  .banner-info .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;background:#ffffff;color:#0b1c2c;border:1px solid rgba(12,33,54,.18);box-shadow:0 8px 20px rgba(0,0,0,.18)}
  .banner-info .btn:hover{background:#f7f9fc}
  .banner-info::before{display:none}
  .thumbs-row{width:var(--banner-w)}
  .work-thumbs{--thumb-gap:12px;--thumb-fix:8px;padding:6px 8px}
  .work-thumbs img{flex:0 0 44%;height:120px}
}
@media (max-width:360px){
  .sian-hero{height:240px}
  .banner-img{height:380px}
  .banner-info{left:10px;top:16px;width:min(94vw,380px)}
  .banner-info p{display:none}
  .banner-info .btn{display:inline-flex;padding:.5rem .8rem}
  .banner-info::before{display:none}
  .work-thumbs img{flex:0 0 48%;height:110px}
}

/* Modal SIAN para descrição da obra */
.modal-backdrop{position:fixed;inset:0;background:rgba(8,16,24,.6);backdrop-filter:blur(2px);z-index:999;display:none;}
.modal-backdrop.show{display:block}
.modal-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,720px);max-height:80vh;overflow:auto;background:#fff;color:#0b1c2c;border-radius:14px;box-shadow:0 24px 64px rgba(0,0,0,.38);z-index:1000;padding:1.2rem 1.4rem}
.modal-panel h3{margin:.2rem 0 1rem;font-family:Montserrat,Arial,sans-serif;font-weight:800}
.modal-panel p{margin:0 0 1rem;line-height:1.7;color:#334}
.modal-close{position:absolute;right:12px;top:12px;border:1px solid #dde1e8;background:#f7f9fc;color:#123053;border-radius:999px;padding:.35rem .7rem;cursor:pointer}
.modal-close:hover{background:#eef3f8}
@media (max-width:560px){
  .modal-panel{width:96vw;max-height:88vh;padding:1rem}
}
@media (max-width:640px){
  .nav-list{position:fixed;inset:60px 0 auto 0;background:#fff;border-bottom:1px solid var(--border);padding:1rem;display:none;flex-direction:column;box-shadow:0 16px 30px rgba(0,0,0,.22)}
  .nav-list.open{display:flex}
  .grid-3{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .feature-list.iconized{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

/* Page hero */
.page-hero {
  position: relative;
  padding: 7rem 0;
  min-height: 50vh;
  display: grid;
  align-items: center;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(8, 16, 24, .35), rgba(8, 16, 24, .4));
  opacity: .9
}

.page-hero .container {
  position: relative;
  z-index: 4
}

.big-outline {
  font-size: clamp(4rem, 12vw, 8.5rem);
  text-transform: uppercase;
  color: #0e1e30;
  opacity: .38;
  position: absolute;
  left: clamp(.5rem, 4vw, 2rem);
  top: clamp(.4rem, 2vw, 1rem);
  font-family: Montserrat, Arial, sans-serif;
  pointer-events: none
}

/* Semiarco para páginas internas */
.page-arc {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 120px;
  z-index: 1;
  pointer-events: none
}

/* Garantir que os overlays do hero fiquem abaixo do conteúdo */
.page-hero::before, .page-hero::after { z-index: 1; }

/* Home: Obras em Progresso */
.work-section {
  background: var(--bg);
  padding: 4rem 0 3rem
}

.work-section .container h2 {
  color: var(--text);
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
  font-size: 2.25rem
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem
}
/* Atividades: Galeria de fotos grandes */
.act-gallery{position:relative;background:linear-gradient(180deg,#0c2136,#0a1724);}
.act-slide{position:relative;height:68vh;display:grid;place-items:end;background-position:center;background-size:cover;background-repeat:no-repeat}
.act-slide::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(6,14,22,.2),rgba(6,14,22,.45));}
.act-caption{position:relative;margin:0 0 2rem 2rem;padding:.6rem 1rem;background:rgba(12,33,54,.7);color:#eaf2fb;border:1px solid var(--border);border-radius:.4rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.act-controls{position:absolute;left:2rem;bottom:2rem;display:flex;gap:.8rem;z-index:2}
.act-controls button{background:#0e2a47;color:#dbe7f3;border:1px solid var(--border);padding:.6rem .9rem;border-radius:999px}
.act-controls button:hover{filter:brightness(1.1)}

/* Atividades: Carrossel horizontal com item central maior */
.act-carousel{background:linear-gradient(180deg,#0c2136,#0a1724);padding:2rem 0;position:relative}
.act-row{display:flex;align-items:end;gap:1rem;width:min(1100px,92%);margin:0 auto}
.act-row{cursor:pointer}
.act-item{position:relative;flex:0 0 18%;height:52vh;background-position:center;background-size:cover;background-repeat:no-repeat;border-radius:.6rem;overflow:hidden;transition:transform .45s ease, flex-basis .45s ease, filter .45s ease}
.act-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.act-item::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(6,14,22,.18),rgba(6,14,22,.5));}
.act-item .act-caption{position:absolute;left:1rem;bottom:1rem;margin:0}
.act-item.large{flex-basis:32%;height:58vh;transform:translateY(-4px);filter:brightness(1.05)}
.act-item.small{filter:brightness(.92)}
.act-carousel .act-controls{position:absolute;left:2rem;top:1rem}
.work-card{background:#fff;border:1px solid var(--border);border-radius:.75rem;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.work-card .work-head{background:linear-gradient(135deg,#173b5f 0%,#1f4e7a 50%,#2a5f98 100%);color:#fff;padding:1rem 1.25rem;font-weight:700;letter-spacing:.05em;font-size:1rem;text-transform:uppercase;text-align:center;border-top-left-radius:.75rem;border-top-right-radius:.75rem}
.work-card img{width:100%;height:240px;object-fit:cover;display:block}
.work-card .work-body{padding:1.1rem 1.2rem 1.4rem;background:#f2f4f7;color:#1f2937;font-size:.98rem;line-height:1.7}
.work-card .work-body p{margin:0}
@media (max-width:1100px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.work-grid{grid-template-columns:1fr}}
/* Timeline (Quem Somos) */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:1rem;position:relative}
.timeline-item{display:grid;grid-template-columns:92px 1fr;gap:1rem;align-items:start}
.timeline-year{background:#fff;color:#0c2136;border:1px solid var(--border);border-radius:.6rem;padding:.5rem .8rem;font-weight:800;letter-spacing:.06em;text-align:center}
.timeline-content{background:#0e2035;border:1px solid var(--border);border-radius:.75rem;padding:.9rem;color:#c6d2df}
@media (max-width:640px){.timeline-item{grid-template-columns:76px 1fr}}
/* Home: Mapa de Localização */
.home-map-section{background:var(--bg-alt);padding:3.5rem 0}
.home-map-section .container h2{color:var(--text);margin-bottom:1rem}
.map-embed{position:relative;width:100%;height:380px;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25);border:1px solid var(--border)}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:contrast(.95) saturate(1.05)}
/* Atuação: carrossel 3 painéis (layout do print) */
.act-carousel.act-3{padding:0 0 2rem}
.act-carousel.act-3 .act-row{gap:0;width:100%;margin:0;align-items:stretch}
.act-carousel.act-3 .act-item{flex:0 0 calc(100%/3);height:62vh;border-radius:0}
.act-carousel.act-3 .act-item{transition:filter .35s ease}
.act-carousel.act-3 .act-item.center{filter:brightness(1.05)}
.act-carousel.act-3 .act-item.left,.act-carousel.act-3 .act-item.right{filter:brightness(.98)}
.act-carousel.act-3 .act-item.off{opacity:.35}
.act-carousel.act-3 .act-row{overflow:hidden}
.act-carousel.act-3 .act-item{display:none}
.act-carousel.act-3 .act-item.visible{display:block}
.act-chip{position:absolute;top:1.2rem;left:1.2rem;padding:.4rem .8rem;background:linear-gradient(90deg, rgba(12,33,54,0.8) 0%, rgba(12,33,54,0) 100%);color:#fff;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.95rem;border-left:3px solid var(--amber);line-height:1.2;white-space:nowrap;backdrop-filter:blur(4px);pointer-events:none}
.act-zoom{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(12,33,54,.75);color:#cfe4f7;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);opacity:0;transition:opacity .25s ease}
.act-carousel.act-3 .act-item.center .act-zoom{opacity:1}
.act-carousel.act-3 .act-controls{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;width:100%;padding:0 1rem;pointer-events:none}
.act-carousel.act-3 .act-controls button{pointer-events:auto;background:rgba(12,33,54,.88);color:#eaf2fb;border:1px solid var(--border);padding:.6rem 1rem;border-radius:999px}
.act-carousel.act-3 .act-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Modern high-relief aesthetics */
:root{
  --shadow-1: 0 1px 1px rgba(0,0,0,.06);
  --shadow-2: 0 6px 14px rgba(0,0,0,.18);
  --shadow-3: 0 14px 34px rgba(0,0,0,.28);
  --glow: 0 0 0 1px rgba(31,122,236,.25), 0 8px 22px rgba(31,122,236,.35);
}

/* Navigation micro-interactions */
.nav-list a{
  position:relative;
  transition:color .2s ease, transform .2s ease;
}
.nav-list a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:linear-gradient(90deg,#2a5f98,#1f7aec);
  transition:width .25s ease;
}
.nav-list a:hover{ color:#fff; transform:translateY(-1px); }
.nav-list a:hover::after{ width:100%; }

/* Buttons with depth and subtle glow */
.btn{ box-shadow: var(--shadow-1); transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; }
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn-primary{ background: linear-gradient(180deg,#2a5f98,#1f7aec); border:1px solid rgba(255,255,255,.15); border-bottom:2px solid var(--amber); border-radius:999px; padding:.55rem 1rem; }
.btn-primary:hover{ filter: brightness(1.06); box-shadow: var(--glow); }
.btn-outline{ border:2px solid rgba(255,255,255,.85); background:transparent; }
.btn-outline:hover{ background:rgba(255,255,255,.95); color:#0c2136; }

/* Cards and surfaces with elevated relief */
.card, .mvv-card, .teaser, .news-item, .work-card{
  box-shadow: var(--shadow-1);
  transition: box-shadow .25s ease, transform .25s ease, filter .25s ease;
}
.card:hover, .mvv-card:hover, .teaser:hover, .news-item:hover, .work-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2), var(--shadow-3);
}
.work-card .work-head{ box-shadow: inset 0 -1px 0 rgba(255,255,255,.1); }

/* Hero depth and blueprint pattern */
.hero-slide::after, .page-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(rgba(8,16,24,.15), rgba(8,16,24,.15)),
    repeating-linear-gradient(0deg, rgba(31,122,236,.08) 0 2px, transparent 2px 48px),
    repeating-linear-gradient(90deg, rgba(31,122,236,.06) 0 2px, transparent 2px 48px);
  mix-blend-mode: soft-light;
}
.hero-content h1{ text-shadow: 0 1px 2px rgba(0,0,0,.3); }
@keyframes rotateSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes sheenSweep{0%{opacity:0; transform:translateX(-15%) skewX(-12deg);} 12%{opacity:.55} 40%{opacity:.0} 100%{transform:translateX(115%) skewX(-12deg); opacity:0}}
@keyframes ambientSweep{0%{transform:translateX(0)} 50%{transform:translateX(-8%)} 100%{transform:translateX(0)}}

/* Image relief */
.media img, .gallery img{ box-shadow: var(--shadow-1); filter: drop-shadow(0 8px 16px rgba(0,0,0,.18)); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; }
.media img:hover, .gallery img:hover{ transform: scale(1.015) translateY(-4px); box-shadow: var(--shadow-2), 0 18px 34px rgba(0,0,0,.34); filter: drop-shadow(0 22px 30px rgba(0,0,0,.40)); }

/* Reveal animations */
.reveal{ opacity:0; transform: translateY(14px) scale(.98); filter: blur(.6px); }
.reveal.in{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); transition: opacity .5s ease, transform .5s ease, filter .5s ease; }

/* Section headings polish */
.section h2{ letter-spacing:.06em; }
.section-lead{ font-size:1.05rem; }

/* Footer polish */
.site-footer{ box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
/* Typography and UI refinements (overrides) */
:root{
  --font-sans: Inter, "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: Montserrat, Poppins, Segoe UI, Roboto, Arial, sans-serif;
  --radius: .75rem;
}
body{font-family:var(--font-sans)}
.brand{font-family:var(--font-display)}
.nav-list.open a{color:#0c2136}
.scroll-progress{position:fixed;left:0;top:0;height:3px;width:0;z-index:100;background:linear-gradient(90deg,#1f7aec,#e7a416);box-shadow:0 2px 10px rgba(31,122,236,.4)}
.section h2{font-family:var(--font-display)}
.section h2::after{content:"";display:block;width:56px;height:3px;margin:.4rem 0 0;background:linear-gradient(90deg,#2a5f98,#1f7aec);border-radius:999px}
.card{will-change:transform;transform-style:preserve-3d}
.work-card{will-change:transform;transform-style:preserve-3d}
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid #1f7aec;outline-offset:2px;border-radius:calc(var(--radius)/2)}
.hero-content{will-change:transform}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;} }
/* Navy+Accents palette additions */
:root{
  --accent-ice:#86c5e6; /* azul gelo, minoria */
  --accent-cyan:#4fd1ff; /* ciano suave, minoria */
  --accent-slate:#6b89a8; /* cinza-azulado para traços */
}
/* Blueprint dashed overlay (leve, inspirado no print) */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    repeating-linear-gradient(135deg, rgba(134,197,230,.08) 0 2px, transparent 2px 28px),
    repeating-linear-gradient(315deg, rgba(31,122,236,.06) 0 2px, transparent 2px 32px);
  mix-blend-mode:soft-light; opacity:.25;
}
/* Ensure content sits above overlay */
body > *{ position:relative; z-index:1; }
/* Section heading: dashed underline with minor accents */
.section h2::after{
  height:3px; border-radius:999px; background:none;
  background-image: repeating-linear-gradient(90deg, var(--accent) 0 16px, transparent 16px 24px);
}
/* Chips and micro elements use ice accent */
.search-form input{ border-color:rgba(24,48,73,.4); box-shadow:0 1px 6px rgba(134,197,230,.18); }
/* Navy theme overrides (align with print: azul marinho, não preto) */
:root{
  --primary:#123053;
  --dark:#0c2136;
  --text:#eaf2fb;
  --muted:#9fb2c6;
  --bg:#0c2136;
  --bg-alt:#123053;
}
.site-header{background:linear-gradient(90deg,#0c2136,#123053 70%)}
.topbar{background:#0c2136}
.hero-slide::before{background:linear-gradient(rgba(12,33,54,.30),rgba(12,33,54,.30));opacity:.65}
.page-hero::before{background:linear-gradient(rgba(12,33,54,.32),rgba(12,33,54,.38));}
.section.navy-bg{background:linear-gradient(180deg,#123053,#0c2136)}
.section.slate-bg{background:#123053}
.cta-bar{background:linear-gradient(90deg,#123053,#0c2136)}
.site-footer{background:#0c2136}
/* Hero left panel (wedge) */
.hero-panel{position:absolute;left:0;top:0;height:100%;width:min(480px,38vw);z-index:6;color:#fff;display:flex;flex-direction:column;justify-content:flex-start;padding:1.4rem 1rem;pointer-events:none}
.hero-panel::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#10263f 0%, #0b1d31 70%);clip-path:polygon(0 0, 68% 0, 100% 52%, 100% 100%, 0 100%);border-right:1px solid rgba(255,255,255,.12);opacity:.95;z-index:0}
.hero-panel::after{content:"";position:absolute;left:0;top:0;width:200px;height:200px;background:#fff;border-radius:50%;transform:translate(-22%, -18%);box-shadow:0 10px 26px rgba(0,0,0,.20);opacity:.12;z-index:0}
.hero-panel .panel-inner{position:relative;z-index:1;pointer-events:auto;height:100%;display:flex;flex-direction:column}
.hero-panel .brand-header{position:relative;min-height:140px;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;padding:1rem .6rem;margin-bottom:.6rem}
.hero-panel .brand-badge{width:140px;height:140px;border-radius:50%;background:#fff;box-shadow:0 10px 26px rgba(0,0,0,.22);display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-panel .brand-badge .badge-logo{font-family:var(--font-display);font-weight:800;letter-spacing:.06em;color:#0e2845;font-size:1.15rem}
.hero-panel .brand-badge .badge-sub{font-weight:700;color:#0e2845;opacity:.85;font-size:.9rem;margin-top:.15rem}
.hero-panel .phone-pill{align-self:flex-start;margin-left:0;margin-top:.4rem;color:#eaf2fa;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:.45rem .8rem;white-space:nowrap;max-width:88%;overflow:hidden;text-overflow:ellipsis}
.hero-panel .brand-ball{z-index:2}
.hero-panel .brand-name{font-family:var(--font-display);font-weight:800;letter-spacing:.06em}
.hero-panel .phone{font-weight:700;color:#e5eef8;margin-top:.25rem}
.hero-panel .panel-nav-main{display:flex;flex-direction:column;gap:.6rem;margin:1rem 0 0}
.hero-panel .panel-nav-main a{color:#cfe3f7;text-decoration:none;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.35rem .6rem;border-radius:999px;transition:color .2s ease, background .2s ease}
.hero-panel .panel-nav-main a:hover{color:#fff;background:rgba(255,255,255,.08)}
.hero-panel .panel-nav-main a.active{color:#fff;background:rgba(255,255,255,.12)}
.hero-panel .panel-controls{display:flex;gap:.8rem;margin-top:auto}
.hero-panel .panel-controls button{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:999px;padding:.35rem .7rem}
.hero-panel .panel-contact{margin-top:auto}
.hero-panel .side-label{position:absolute;bottom:1rem;left:calc(100% - 28px);writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.22em;opacity:.6}
.hero-panel .panel-inner{position:relative;z-index:1;pointer-events:auto}
.hero-panel .brand-mini{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.06em}
.hero-panel .brand-ball{width:58px;height:58px;border-radius:50%;background:#fff;color:#0e2845;display:grid;place-items:center;font-family:var(--font-display);font-weight:800}
.hero-panel .phone{font-weight:700;color:#e5eef8}
.hero-panel .side-label{writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.22em;opacity:.6;margin-left:.4rem}
.hero-panel .panel-nav{display:flex;gap:.8rem;margin-top:.6rem}
.hero-panel .panel-nav button{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:999px;padding:.35rem .7rem}

/* Hero intro animations */
.hero-slide.active{z-index:2;pointer-events:auto;opacity:1;animation: heroBoom 1300ms cubic-bezier(.2,.9,.2,1) both, panBg 7s ease-out forwards, kenBurns 5s ease-out forwards}
@keyframes heroBoom{0%{opacity:.0; transform: scale(1.06); filter: saturate(1.25) contrast(1.12)} 100%{opacity:1; transform: scale(1); filter: saturate(1) contrast(1)}}
@keyframes panBg{0%{ background-position: 50% 56%; } 100%{ background-position: 50% 48%; }}
@keyframes kenBurns{0%{ background-size: 104%; } 100%{ background-size: 100%; }}
.sian-hero .hero-logo, .page-hero .hero-logo{position:absolute;top:clamp(.6rem,2vh,1rem);left:clamp(.8rem,2.4vw,1.4rem);z-index:8;display:block}
.sian-hero .hero-logo img, .page-hero .hero-logo img{height:40px;width:auto;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}
@media (max-width:680px){
  .sian-hero .hero-logo, .page-hero .hero-logo{display:none}
}
.hero-topnav{position:absolute;top:1.2rem;left:clamp(320px,35vw,520px);right:2rem;z-index:7;display:flex;gap:.6rem;justify-content:flex-end;align-items:center;padding:.4rem .6rem;background:linear-gradient(180deg,rgba(12,33,54,.28),rgba(12,33,54,.18));backdrop-filter:blur(6px);border-radius:14px;border:1px solid rgba(255,255,255,.14)}
.hero-topnav a{color:#eaf2fa;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-weight:700;padding:.45rem .8rem;border-radius:999px;border:1px solid rgba(255,255,255,.28);transition:background .2s ease, color .2s ease, border-color .2s ease}
.hero-topnav a:hover{color:#fff;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.38)}
.hero-topnav a.active{color:#0c2136;background:#eaf2fa;border-color:#eaf2fa}
@media (max-width: 960px){
.hero-topnav{left:clamp(280px,46vw,480px);right:1rem;top:.8rem}
.hero-topnav a{padding:.4rem .7rem;font-size:.95rem}
/* Painel lateral: aumenta ligeiramente a largura no tablet para acomodar empilhamento */
.hero-panel{width:min(440px,48vw)}
.hero-panel::before{clip-path:polygon(0 0, 74% 0, 100% 54%, 100% 100%, 0 100%)}
/* Conteúdo do herói: reduz margem para não colidir com painel em telas médias */
.hero .hero-content{margin-left:clamp(280px, 48vw, 420px)}
 /* Mobile/tablet: herói ocupa 100% da primeira tela (fallbacks) */
 .hero-slider{height:100vh; height:100dvh; height:100svh}
}
@media (max-width: 680px){
 /* Mobile: por padrão oculta a hero-topnav; exibe via hambúrguer */
 .hero-topnav{display:none}
 /* Ajuste: mesmo em páginas hero-nav-only, usar hambúrguer para abrir */
 .hero-nav-only .hero-topnav{display:none}
 /* Usar apenas o painel branco do header (.nav-list) no mobile; hero-topnav não abre */
 .menu-open .hero-topnav{display:none}
  .hero-topnav a{padding:.35rem .6rem;font-size:.88rem}
 /* Mobile: oculta completamente a faixa lateral (wedge/painel) */
 .hero-panel{display:none}
 /* Herói: aumenta altura e usa foto em destaque */
 .hero-slider{height:100vh; height:100dvh; height:100svh}
  /* Mobile: desativar animações que alteram o background para evitar "encolher" */
  .hero-slide.active{animation:none}
  .hero-sheen{animation:none;opacity:0}
  .hero-arc{display:none}
  /* Conteúdo do herói: sem deslocamento lateral e sem ornamento diagonal */
  .hero .hero-content{margin-left:0;padding:calc(env(safe-area-inset-top, 0) + 1.2rem) 1rem 1.4rem;text-align:center}
  .hero-content::before{display:none}
  .hero-content h1{font-size:clamp(1.6rem,7.5vw,2.4rem);letter-spacing:.10em;line-height:1.15;text-wrap:balance}
  /* Garantir quebra de linha e largura adequada para o título em mobile */
  .hero-tag{display:block;max-width:min(92%,640px);margin:0 auto .6rem;padding:.6rem 1rem;white-space:normal}
  .act-carousel.act-3 .act-item{height:48vh}
  .act-carousel.act-3 .act-controls{top:auto;bottom:1rem}
}
.hero-panel .phone-float{position:absolute;top:clamp(.6rem,2vh,1rem);left:clamp(.8rem,2.4vw,1.4rem);z-index:3;color:#eaf2fa;font-weight:800;letter-spacing:.04em;background:none;border:none;padding:0;text-shadow:0 1px 2px rgba(0,0,0,.35)}
@media (max-width: 960px){
.hero-panel .phone-float{top:.7rem;left:1.2rem;font-size:.96rem}
}
@media (max-width: 680px){
.hero-panel .phone-float{top:.6rem;left:1rem;font-size:.92rem}
}

/* Desktop/tablet: telefone volta ao topo direito da faixa (como antes) */
@media (min-width: 961px){
  .hero-panel .phone-float{top:clamp(.6rem,2vh,1rem);right:clamp(6rem,12vw,9rem);left:auto;font-size:1rem}
}

/* Topbar: empilhamento no mobile sem alterar desktop */
@media (max-width:640px){
  /* Cabeçalho sobreposto ao herói */
  .topbar{position:absolute;top:0;left:0;right:0;background:transparent;border-bottom:none;z-index:10}
  .topbar-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem}
  /* Logo no topo, não fixa durante o scroll */
  .brand{position:relative;top:auto;left:auto;background:transparent;color:#fff;padding:0;border-radius:0;box-shadow:none;font-weight:800;z-index:auto}
  .contact-top{font-size:.95rem;display:none}
  .header-inner{position:absolute;top:56px;left:0;right:0;display:flex;align-items:center;justify-content:flex-end;padding:.4rem 0;z-index:10}
  .nav-toggle{position:fixed;top:.8rem;right:.8rem;display:block;color:#0c2136;background:#fff;border:1px solid rgba(12,33,54,.22);border-radius:.6rem;padding:.35rem .55rem;box-shadow:0 6px 18px rgba(0,0,0,.18);z-index:1000}
  .menu-open .nav-toggle{background:#0c2136;color:#fff;border-color:rgba(255,255,255,.35)}
  /* Logo móvel sobreposta ao herói */
  /* Oculta a segunda logo móvel no index para evitar duplicidade e fixo */
  .mobile-brand{display:none}
  .mobile-brand .brand-ball{width:36px;height:36px;border-radius:50%;background:#0e2845;color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;letter-spacing:.06em}
  .mobile-brand .brand-sub{font-weight:900;letter-spacing:.06em}
}

/* Trabalhe Conosco: ajustes de hero para mobile */
@media (max-width:680px){
  .trabalhe-hero{height:400px}
  .trabalhe-hero .hero-overlay-text{
    font-size:clamp(1.9rem,7.8vw,3rem);
    letter-spacing:.04em;
    white-space:normal;
    text-align:center;
    padding:0 .8rem
  }
  .trabalhe-hero .hero-topnav{display:none}
}

@media (min-width:641px){
  .mobile-brand{display:none}
}

/* Page hero em tela cheia no mobile */
@media (max-width:680px) {
  .page-hero {
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    display: grid;
    align-items: center;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
  }

  .page-hero .container {
    padding: 0 1rem;
    text-align: center;
    z-index: 2
  }

  .page-arc {
    display: none
  }
}

/* Botões e controles: reduzir no mobile e evitar corte */
@media (max-width:680px){
  .btn{padding:.5rem .8rem;font-size:.92rem}
  .hero-controls{display:none}
}
/* Grids: empilhamento no mobile para evitar corte */
@media (max-width:680px){
  .grid-2{grid-template-columns:1fr;gap:.8rem}
  .grid-3{grid-template-columns:1fr;gap:.8rem}
  .media img{width:100%;height:auto}
  .media.mask-ellipse img{clip-path:none;border-radius:.75rem}
  /* Sobre: imagem primeiro, depois conteúdo, no mobile */
  .about-home .grid-2{display:flex;flex-direction:column}
  .about-home .grid-2 > figure{order:-1;margin-bottom:.8rem}
  /* Sobre: reduzir altura da imagem grande para mobile */
  .about-home .media img{height:260px}
  /* News: empilhar itens e ajustar altura de imagem */
  .news{grid-template-columns:1fr}
  .news-item img{height:160px}
  /* Atuação (home): mobile — 1 item por visão, imagem completa */
  .act-carousel.act-3 .act-row{overflow:hidden}
  /* Mobile: duas por vez, grandes e sem corte */
  .act-carousel.act-3 .act-item{flex:0 0 50%; height:68vh; aspect-ratio:auto; border-radius:12px}
  .act-carousel.act-3 .act-item img{object-fit:cover; background:#0c2136}
  .act-carousel.act-3 .act-controls{top:auto;bottom:1rem}
  /* Chip menor com quebra segura no mobile */
  .act-carousel .act-chip{font-size:.9rem; padding:.35rem .6rem; white-space:normal; max-width:80%}
}
@media (min-width:681px) and (max-width:960px){
  /* Tablet: 2 itens por visão, mantendo proporção confortável */
  .act-carousel.act-3 .act-item{flex:0 0 50%; height:auto; aspect-ratio:16/9}
  .act-carousel.act-3 .act-item img{object-fit:cover}
}
/* Grids: empilhamento também em tablets/telefones maiores */
@media (max-width:960px){
  .grid-2{grid-template-columns:1fr;gap:1rem}
  .grid-3{grid-template-columns:1fr;gap:1rem}
  .media img{width:100%;height:auto}
}

/* CTA e textos: layout mais confortável em mobile */
@media (max-width:640px){
  .cta-inner{flex-direction:column;gap:.6rem;text-align:center}
  .section-lead{font-size:1.1rem;line-height:1.6}
  .container{width:min(1100px,94%)}
}

/* Quem Somos Hero refinado */
.page-hero.quem-somos {
  background-image: url('../img/atuacao/colegio_estadual_luiz_navarro.webp');
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  min-height: 58vh;
  padding: 0;
}
.page-hero.quem-somos::before{opacity:.25}
.page-hero.quem-somos .hero-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 10% 20%, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0) 65%),
    radial-gradient(700px 400px at 60% 80%, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0) 70%);
  pointer-events: none;
}
.page-hero.quem-somos .page-title { display: none; }
.page-hero.quem-somos .big-outline {
  opacity: 0.5;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 4px 24px rgba(0,0,0,0.3);
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  top: clamp(8rem, 28vh, 34rem);
  white-space: nowrap;
}
/* Oculta o semiarco para manter visual minimalista como o home */
.page-hero.quem-somos .page-arc{ display:none; }
@media (min-width: 961px) {
  .page-hero.quem-somos .big-outline {
    font-size: clamp(4.5rem, 6vw, 8rem);
    letter-spacing: 0.02em;
  }
}
@media (min-width: 681px) and (max-width: 960px) {
  .page-hero.quem-somos .big-outline {
    font-size: clamp(3.6rem, 8vw, 7rem);
  }
}
@media (max-width: 680px) {
  .page-hero.quem-somos { min-height: 72vh; }
  .page-hero.quem-somos .big-outline {
    font-size: clamp(2.6rem, 12vw, 4.8rem);
    top: clamp(10rem, 36vh, 40rem);
  }
}

/* Mobile: garantir que o título translúcido apareça acima das camadas */
@media (max-width: 680px) {
  /* Ancorar o posicionamento do título ao próprio hero */
  .page-hero .container { position: static; transform: none !important; }
  .page-hero.quem-somos, .page-hero.atuacao { align-items: start; min-height: 78vh; }
  /* Safari/iOS: desativar blend overlay que pode apagar texto em alguns devices */
  .page-hero::after { display: none !important; }
  /* Evitar recortes do título por overflow do hero */
  .page-hero.quem-somos,
  .page-hero.atuacao { overflow: visible; }
  .page-hero.quem-somos .big-outline,
  .page-hero.atuacao .big-outline {
    display: block !important;
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
    top: clamp(6rem, 24vh, 28rem);
    line-height: 1.05;
    z-index: 9;
    opacity: .62;
    color: rgba(255,255,255,0.96);
    text-shadow: 0 3px 18px rgba(0,0,0,0.28);
    white-space: normal;
  }
}

/* Tablet e mobile grande: também evitar overlay misto que pode sumir texto */
@media (max-width: 960px) {
  .page-hero::after { display: none !important; }
}

/* Atuação Hero refinado */
.page-hero.atuacao {
  background-image: url('../img/atuacao/colegio_estadual_luiz_navarro.webp');
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  min-height: 58vh;
  padding: 0;
}
.page-hero.atuacao::before{opacity:.25}
.page-hero.atuacao .hero-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 10% 20%, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0) 65%),
    radial-gradient(700px 400px at 60% 80%, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0) 70%);
  pointer-events: none;
}
.page-hero.atuacao .page-title { display: none; }
.page-hero.atuacao .big-outline {
  opacity: 0.5;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 4px 24px rgba(0,0,0,0.3);
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  top: clamp(8rem, 28vh, 34rem);
  white-space: nowrap;
}
/* Oculta o semiarco para manter visual minimalista como o home */
.page-hero.atuacao .page-arc {
  display: none;
}
@media (min-width: 961px) {
  .page-hero.atuacao .big-outline {
    font-size: clamp(4.5rem, 6vw, 8rem);
    letter-spacing: 0.02em;
  }
}
@media (min-width: 681px) and (max-width: 960px) {
  .page-hero.atuacao .big-outline {
    font-size: clamp(3.6rem, 8vw, 7rem);
  }
}
@media (max-width: 680px) {
  .page-hero.atuacao { min-height: 72vh; }
  .page-hero.atuacao .big-outline {
    font-size: clamp(2.6rem, 12vw, 4.8rem);
    top: clamp(10rem, 36vh, 40rem);
  }
}

@media (max-width: 1200px) {
  .card-area-link img {
    width: 450px !important;
    height: auto !important;
  }
}
@media (max-width: 768px) {
  .card-area-link img {
    width: 100% !important;
    height: auto !important;
  }

  .segmentos {
    flex-direction: column;
    gap: 15px;
  }  
}
@media (max-width: 640px) {
  
    .modal-content {
      max-width: 90% !important;
    }
    .carousel-slide img {
      max-height: 200px;
    }
}

.segmentos {
  display: flex;
  gap: 10px;
}

.segmentos .lead-text {
  max-width: none;
}

.segmentos .lead-text p {
  text-align: center;
}

.segmentos .container {
  max-width: none;
  width: 100%;
}

.card-area-item-center {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.card-area-link {
  display: block;
  cursor: pointer;
}

.card-area-link img {
  display: block;
  width: 600px;
  height: auto;
  border-radius: 12px;
}

.lupa-icon {
  font-size: 30px;
  font-weight: 100;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 70, 134, .84);
}

.fa {
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

.container-resumo { /* Extraido de config feita em class mais acima */
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .25);
  padding: 1.2rem 1.4rem;
}

/* Modal Page Atuação base */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow-y: auto; /* ← scroll da janela, mas só para o modal */
}

.modal.active {
  opacity: 1;
  visibility: visible;
  /* aria-hidden: false; */
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.modal-content {
  position: relative;
  background: white;
  border-radius: 5px;
  max-width: 50%;
  /* max-height: 90vh; */
  /* overflow: hidden;   ← permite scroll interno se necessário */
  /*overflow: auto;    ← permite scroll interno se necessário */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  margin-block: 20px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  z-index: 2001;
  color: #0b1c2c;
}

.modal-close {
  position: absolute;
  top: -20px;
  right: -20px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #888;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 30px;
}

.modal-close:hover {
  color: #333;
}

/* Carrossel */
.carousel-wrapper {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
  align-items: end;
}

.carousel-track {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}

.carousel-slide {
  min-width: 100%;
  flex-shrink: 0;
}

.carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 300px;
  object-fit: cover;
}

/* Bolinhas */
.carousel-nav {
  position: absolute;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.carousel-nav button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.carousel-nav button.active {
  background: #4a6cf7; /* ou sua cor principal */
}

.carousel-track {
  /* ... seus estilos existentes ... */
  cursor: grab;
}

.carousel-track.dragging {
  cursor: grabbing;
  transition: none; /* desativa transição durante o arrasto para fluidez */
}

.modal-texto {
  margin-top: 0px;
  color: #333;
  line-height: 1.6;
}

.modal-texto h2 {
  font-size: 24px;
  margin-bottom: 16px;
  color: #222;
  font-weight: 600;
}

.modal-texto p {
  margin: 0 0 12px;
  font-size: 16px;
}

.modal-texto p:last-child {
  margin-bottom: 0;
}


/* Marca dentro do hero */
.hero-brand{
  position:absolute;top:1.25rem;left:1rem;z-index:2;
  background: rgba(12,33,54,0.7);
  border:1px solid rgba(255,255,255,0.2);
  color:#fff;text-decoration:none;font-weight:800;letter-spacing:.02em;
  padding:.5rem .75rem;border-radius:.75rem;
}
/* logo dentro da marca do hero */
.hero-brand img{display:block;height:28px;width:auto;filter:brightness(1.1) contrast(1.05)}
@media (max-width:640px){.hero-brand{top:.75rem;left:.75rem;padding:.4rem .6rem}}

/* Timeline horizontal com snap */
.timeline-track {
  position: relative;
}

/* Modern foundation: Glass cards, mesh gradients, chips, reveal */
.glass-card{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);border-radius:22px;box-shadow:0 20px 40px rgba(0,0,0,.25);padding:1rem 1.2rem}
.chip{display:inline-block;padding:.4rem .7rem;border-radius:999px;background:linear-gradient(180deg,rgba(14,40,69,.65),rgba(12,33,54,.45));border:1px solid rgba(255,255,255,.28);color:#eaf2fa;font-weight:700;letter-spacing:.04em}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* Page-specific modern heros */
.page-hero.atividades-hero{background-image:url('../img/hero1.svg');background-size:cover;background-position:center;position:relative;overflow:hidden;min-height:62vh}
.page-hero.obras-hero{background-image:url('../img/hero2.svg');background-size:cover;background-position:center;position:relative;overflow:hidden;min-height:62vh}
.page-hero.press-hero{background-image:url('../img/hero3.svg');background-size:cover;background-position:center;position:relative;overflow:hidden;min-height:62vh}
.page-hero.contato-hero{background-image:url('../img/photo1.svg');background-size:cover;background-position:center;position:relative;overflow:hidden;min-height:62vh}
.page-hero.atividades-hero .hero-art,
.page-hero.obras-hero .hero-art,
.page-hero.press-hero .hero-art,
.page-hero.contato-hero .hero-art{position:absolute;inset:0;background:
  radial-gradient(1200px 600px at 10% 20%, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0) 60%),
  radial-gradient(900px 500px at 80% 10%, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0) 65%),
  radial-gradient(700px 400px at 60% 80%, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0) 70%);
  pointer-events:none}

/* Cards and content areas modernized */
.section.dark-bg .lead-text{border:none}
.section.dark-bg .lead-text, .values-section .grid-2 article, .grid-3 .card, .news .news-item, .contact-form{border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);box-shadow:0 16px 36px rgba(0,0,0,.25);padding:1.2rem 1.4rem}
.values-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.6rem}
.values-list li{padding:.5rem .8rem;border-radius:999px;background:linear-gradient(180deg,rgba(14,40,69,.65),rgba(12,33,54,.48));border:1px solid rgba(255,255,255,.28);color:#eaf2fa;font-weight:700}

/* Atividades: itens com forma orgânica e destaque */
.act-carousel .act-item{position:relative;border-radius:28px;overflow:hidden;box-shadow:0 16px 32px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.18);transform:translateZ(0);transition:transform .35s ease, box-shadow .35s ease}
.act-carousel .act-item.large{transform:scale(1.06)}
.act-carousel .act-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,33,54,.20),rgba(12,33,54,.35));}
.act-carousel .act-chip{position:absolute;top:.8rem;left:.8rem;z-index:2}
.act-carousel .act-zoom{position:absolute;top:.6rem;right:.6rem;z-index:2}

/* Mídia: cards com acento de timeline */
.news .news-item{position:relative}
.news .news-item::before{content:"";position:absolute;left:-10px;top:.4rem;bottom:.4rem;width:4px;background:linear-gradient(180deg,#4fd1ff,#86c5e6);border-radius:999px}

/* Contato: inputs pílula e glow suave */
.contact-form input, .contact-form textarea, .contact-form select{border:1px solid rgba(255,255,255,.24);border-radius:14px;background:rgba(12,33,54,.18);color:#eaf2fa;box-shadow:inset 0 1px 4px rgba(0,0,0,.18);padding:.65rem .8rem}
.contact-form select option{color:#0c2136;background:#fff}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{outline:none;border-color:#86c5e6;box-shadow:0 0 0 3px rgba(69,189,255,.25)}
.contact-form button.btn{border-radius:999px}

@media (max-width:680px){
  .glass-card{border-radius:18px}
  .values-list{gap:.5rem}
  .values-list li{font-size:.95rem;padding:.45rem .7rem}
}

/* Overrides: remover semiarcos, máscara elíptica e overlays exagerados */
.hero-arc, .page-arc{display:none !important}
.media.mask-ellipse img{clip-path:none !important;border-radius:.75rem}
.act-carousel .act-item::before,
.act-carousel .act-item::after{content:none !important;background:none !important}
.timeline-track::before{
  content:"";
  position:absolute;left:0;right:0;top:50%;height:2px;
  background:linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  transform:translateY(-50%);
  pointer-events:none;
}
.timeline-nav {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-bottom: 1rem;
}
.timeline-nav button {
  background: var(--brand-700, #2f6fff);
  color: #fff;
  border: none;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
}
.timeline-nav button:disabled { opacity: 0.5; cursor: default; }

.timeline.horiz {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
}
.timeline.horiz::-webkit-scrollbar { height: 8px; }
.timeline.horiz::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 8px; }

.timeline.horiz .timeline-item {
  flex: 0 0 auto;
  min-width: 340px;
  max-width: 420px;
  scroll-snap-align: start;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  padding: 1.25rem;
  border-top: 3px solid var(--brand-700, #2f6fff);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.timeline.horiz .timeline-year {
  font-weight: 800;
  font-size: 1.4rem;
  color: #0c2136;
  background: #fff;
  border:1px solid var(--border);
  border-radius:.6rem;
  padding:.4rem .6rem;
  display:inline-block;
  margin-bottom: .5rem;
}
.timeline.horiz .timeline-content{font-size:1.05rem;line-height:1.6}

/* Clientes (maiores) */
.clients-logos {display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem;align-items:center;list-style:none;padding:0;margin:0}
@media (min-width:641px){.clients-logos{grid-template-columns:repeat(3,1fr)}}
@media (min-width:961px){.clients-logos{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1200px){.clients-logos{grid-template-columns:repeat(4,1fr)}}
.clients-logos li{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:2rem;display:flex;align-items:center;justify-content:center}
.clients-logos img{max-height:160px;width:auto;height:auto;object-fit:contain;filter:brightness(1.08)}

/* Valores / Políticas / Diretrizes */
.values-policies {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 961px) {
  .values-policies {
    grid-template-columns: repeat(3, 1fr);
  }
}
.values-policies .card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 1.25rem;
}

/* Fundadores maiores */
.founders .grid-3{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media (min-width:961px){.founders .grid-3{grid-template-columns:repeat(2,1fr)}}
.founders .card{padding:1.25rem;border-radius:14px}
.founders .card img{width:100%;height:220px;object-fit:cover;border-radius:12px;margin-bottom:.75rem}
/* Melhorar contraste de texto nos cards dos fundadores */
.founders .card h3{color:#fff}
.founders .card p{color:#eaf2fa}

/* Texto inicial maior e bem ancorado */
.lead-text{max-width:68ch;margin:0 auto}
.lead-text p{font-size:1.125rem;line-height:1.85;color:#c6d2df}
@media (min-width:961px){
  .lead-text{max-width:none;margin:0}
  .lead-text p{text-align:justify}
}
.lead-text .tagline{font-family:Montserrat,Arial,sans-serif;font-weight:800;letter-spacing:.02em;color:#e8f2ff;font-size:1.25rem;margin-bottom:.5rem}
@media (min-width:961px){.founders .grid-3{grid-template-columns:repeat(2,1fr)}}
.founders .card{padding:1.25rem;border-radius:16px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14)}
.founders .card img{max-height:140px;width:auto;height:auto;display:block;margin:0 auto 0.75rem}
.founders .card h3{font-size:1.25rem;margin:.25rem 0 .5rem}
.founders .card p{font-size:1.05rem;line-height:1.6}
/* Valores em duas colunas com bullets modernos */
.values-section .grid-2{gap:2rem}
.values-section h3{margin:.6rem 0 .4rem}
.values-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.values-list li{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:.75rem;padding:.6rem .8rem;position:relative;color:#cfe6ff}
.values-list li::before{content:"✓";position:absolute;left:.6rem;top:.55rem;color:#00b3ff;font-weight:800}
.values-list li{padding-left:1.8rem}
.works-carousel .container{width:100%;max-width:none}
.contact-section{position:relative;padding:7rem 0 8rem;min-height:78vh;
  background:
    radial-gradient(800px 400px at 10% 20%, rgba(134,197,230,.08) 0%, transparent 60%),
    radial-gradient(800px 400px at 90% 80%, rgba(31,122,236,.08) 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(134,197,230,.03) 0 1px, transparent 1px 32px);
  background-blend-mode: soft-light, soft-light, normal, normal;
}
.contact-section::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(92%,1200px);height:220px;border-radius:16px;opacity:.16;
  background:
    radial-gradient(240px 140px at 20% 30%, rgba(255,255,255,.35) 0%, transparent 70%),
    radial-gradient(280px 160px at 80% 40%, rgba(134,197,230,.35) 0%, transparent 70%);
  filter:blur(12px);pointer-events:none
}
.contact-section .container{display:block;position:relative;z-index:1}
.icon-strip{display:flex;gap:1rem;justify-content:center;margin-bottom:1.2rem;--icon-size:96px;--glyph-size:40px}
.icon-strip a{width:var(--icon-size);height:var(--icon-size);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#2a5f98,#1f7aec);
  border:1px solid rgba(255,255,255,.22);color:#fff;
  box-shadow:0 14px 28px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;will-change:transform, box-shadow}
.icon-strip a::before{content:"";position:absolute;inset:-20%;border-radius:inherit;
  background:radial-gradient(220px 220px at 30% 20%, rgba(255,255,255,.22) 0%, transparent 70%);
  opacity:.45;filter:blur(8px);pointer-events:none}
.icon-strip a::after{content:"";position:absolute;inset:0;border-radius:inherit;mix-blend-mode:screen;opacity:.35;pointer-events:none;
  background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%)}
.icon-strip a:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 22px 44px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12)}
.icon-strip a svg{width:var(--glyph-size);height:var(--glyph-size);filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.icon-strip a svg path{fill:currentColor}
.contact-card{max-width:880px;margin:0 auto}
.contact-card.glass-card{position:relative;padding:1.8rem 2.2rem;border:1px solid rgba(255,255,255,.22);box-shadow:0 26px 56px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(12,33,54,.62), rgba(12,33,54,.48)),
    repeating-linear-gradient(0deg, rgba(134,197,230,.06) 0 2px, transparent 2px 36px),
    repeating-linear-gradient(90deg, rgba(134,197,230,.05) 0 2px, transparent 2px 36px);
  backdrop-filter:saturate(1.1) blur(10px);
  color:#fff
}
.contact-card.glass-card::before{content:"";position:absolute;inset:-14px;border-radius:28px;background:
  radial-gradient(240px 160px at 14% 20%, rgba(69,189,255,.18) 0%, transparent 70%),
  radial-gradient(200px 140px at 86% 80%, rgba(231,164,22,.18) 0%, transparent 70%);
  opacity:.65;filter:blur(12px);pointer-events:none;z-index:-1
}
.contact-card.glass-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);mix-blend-mode:screen;opacity:.35;pointer-events:none}
.contact-items{list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
.contact-items li{font-size:1.06rem;color:#fff}
.contact-items span{display:inline-block;min-width:120px;font-weight:700;color:#fff}
.contact-items a{color:#fff;text-decoration:none}
.contact-items a:visited{color:#fff}
.contact-items a:hover{color:#cfe6ff}
.contact-items .sep{height:1px;background:rgba(255,255,255,.18);margin:.4rem 0}
@media (max-width:680px){
  .icon-strip{gap:.6rem;--icon-size:72px;--glyph-size:32px}
  .contact-card{max-width:96%}
  .contact-items span{min-width:96px}
  .map-wrapper{height:260px}
}

/* Aviso destacado (rota Trabalhe Conosco) */
.notice-card{background:linear-gradient(180deg, rgba(12,33,54,.46), rgba(12,33,54,.32));
  border:1px solid rgba(255,255,255,.16);border-left:3px solid var(--amber);
  color:#fff;border-radius:16px;padding:.85rem 1rem;box-shadow:0 12px 26px rgba(0,0,0,.28)}
.contact-form .notice-card{margin:.6rem 0 1rem}


/* ==========================================
   PREMIUM GLASSMORPHISM & ACCENT GLOWS
   ========================================== */

/* Translucent Glassmorphic Header */
.site-header {
  background: rgba(12, 33, 54, 0.85) !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Glowing scroll progress bar */
.scroll-progress {
  background: linear-gradient(90deg, var(--accent) 0%, #00d1ff 50%, var(--amber) 100%) !important;
  box-shadow: 0 0 8px rgba(31, 122, 236, 0.6) !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 5px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Modern Glowing Borders on Hover */
.card, .mvv-card, .teaser, .news-item, .work-card {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.card:hover, .mvv-card:hover, .teaser:hover, .news-item:hover, .work-card:hover {
  transform: translateY(-5px) scale(1.008) !important;
  border-color: rgba(31, 122, 236, 0.5) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), 0 0 1px 1px rgba(31, 122, 236, 0.3) !important;
}

/* Dynamic glow on list elements on hover */
.values-list li {
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.values-list li:hover {
  transform: translateX(6px) !important;
  background: rgba(31, 122, 236, 0.12) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(31, 122, 236, 0.15) !important;
}

/* WhatsApp floating pulse effect */
@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
  70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.whatsapp-float {
  animation: pulseGlow 2.5s infinite !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.whatsapp-float:hover {
  transform: translateY(-4px) scale(1.06) !important;
  filter: brightness(1.08) !important;
}

/* Premium Scroll to Top Button */
.scroll-to-top {
  position: fixed;
  right: 20px;
  bottom: 88px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(12, 33, 54, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 89;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
}
.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-to-top:hover {
  background: linear-gradient(180deg, #2a5f98, #1f7aec);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(31, 122, 236, 0.25), 0 8px 22px rgba(31, 122, 236, 0.5);
  transform: translateY(-3px);
}
.scroll-to-top:active {
  transform: translateY(-1px);
}

/* Micro-interaction for Carousel Buttons */
.act-controls button, .panel-controls button, .hero-controls button, .thumbs-prev, .thumbs-next {
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.act-controls button:hover, .panel-controls button:hover, .hero-controls button:hover, .thumbs-prev:hover, .thumbs-next:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  transform: scale(1.08) !important;
  box-shadow: 0 0 14px rgba(31, 122, 236, 0.45) !important;
}

/* Widescreen title gradients */
.section-title {
  background: linear-gradient(135deg, #ffffff 0%, #aed6f1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}


/* Custom brand colors for contact icons on hover */
.icon-strip a.whatsapp-btn:hover {
  background: #25D366 !important;
  border-color: #25D366 !important;
  box-shadow: 0 0 18px rgba(37, 211, 102, 0.6) !important;
}
.icon-strip a.phone-btn:hover {
  background: #1f7aec !important;
  border-color: #1f7aec !important;
  box-shadow: 0 0 18px rgba(31, 122, 236, 0.6) !important;
}
.icon-strip a.maps-btn:hover {
  background: #ea4335 !important;
  border-color: #ea4335 !important;
  box-shadow: 0 0 18px rgba(234, 67, 53, 0.6) !important;
}
.icon-strip a.instagram-btn:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  border-color: #dc2743 !important;
  box-shadow: 0 0 18px rgba(220, 39, 67, 0.6) !important;
}

/* Contact details list hover effects with brand colors */
.contact-items li a {
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: inline-block;
}
#whatsapp a:hover {
  color: #25D366 !important;
  text-shadow: 0 0 8px rgba(37, 211, 102, 0.4);
  transform: translateX(4px);
}
#telefone a:hover {
  color: #00d1ff !important;
  text-shadow: 0 0 8px rgba(0, 209, 255, 0.4);
  transform: translateX(4px);
}
#email a:hover {
  color: #ffd37a !important;
  text-shadow: 0 0 8px rgba(255, 211, 122, 0.4);
  transform: translateX(4px);
}
#endereco a:hover {
  color: #ff6b6b !important;
  text-shadow: 0 0 8px rgba(255, 107, 107, 0.4);
  transform: translateX(4px);
}
#instagram a:hover {
  color: #f09433 !important;
  text-shadow: 0 0 8px rgba(240, 148, 51, 0.4);
  transform: translateX(4px);
}


/* Limit max-height and add scroll to banner descriptions on obras.html to prevent overlapping thumbs */
.banner-info {
  max-height: 520px !important;
  overflow-y: auto !important;
  padding-right: 10px !important;
  scrollbar-width: thin;
}
.banner-info::-webkit-scrollbar {
  width: 4px;
}
.banner-info::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
}
.banner-info::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

@media (max-width: 960px) {
  .banner-info {
    max-height: 420px !important;
  }
}
@media (max-width: 480px) {
  .banner-info {
    max-height: 280px !important;
  }
}


/* Modal Close Button Circle Shape and Sizing Fix */
.modal-close {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 32px !important;
  line-height: 1 !important;
  padding: 0 0 4px 0 !important; /* minor offset to vertically center the multiplication sign */
  border-radius: 50% !important;
  top: -15px !important;
  right: -15px !important;
  background-color: rgba(12, 33, 54, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease !important;
}
.modal-close:hover {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  transform: scale(1.08) !important;
}


/* General Modal Close Button small size and circular shape override */
.modal-close,
.modal-panel .modal-close,
.modal-content .modal-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  line-height: 1 !important;
  padding: 0 0 3px 0 !important; /* adjust alignment of '×' glyph */
  border-radius: 50% !important;
  background-color: rgba(12, 33, 54, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  cursor: pointer !important;
  z-index: 2010 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s ease !important;
}

.modal-close:hover,
.modal-panel .modal-close:hover,
.modal-content .modal-close:hover {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  transform: scale(1.08) !important;
}

/* Image Modal styling */
.img-modal-panel {
  max-width: 90vw !important;
  width: auto !important;
  max-height: 90vh !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.img-modal-panel .modal-large-img {
  max-width: 100% !important;
  max-height: 85vh !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.img-modal-panel .modal-close {
  top: -16px !important;
  right: -16px !important;
}

@media (max-width: 680px) {
  .img-modal-panel .modal-close {
    top: -12px !important;
    right: -12px !important;
  }
}

/* Teaser card background images with elegant overlays */
.teaser.obras-teaser {
  background: linear-gradient(rgba(12, 33, 54, 0.88), rgba(12, 33, 54, 0.88)), url('../img/obras/obra_sicredi_03.webp') center/cover no-repeat;
}
.teaser.trabalhe-teaser {
  background: linear-gradient(rgba(12, 33, 54, 0.88), rgba(12, 33, 54, 0.88)), url('../img/atuacao/colegio_estadual_luiz_navarro.webp') center/cover no-repeat;
}

/* Micro-animations for smooth image loadings */
.work-thumbs img {
  opacity: 0;
  animation: thumbFadeIn 0.4s ease-out forwards;
}
@keyframes thumbFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

/* Preloader overlays for premium page transitions */
.preloader {
  position: fixed;
  inset: 0;
  background: #0c2136;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}
.spinner-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.circle-border {
  width: 60px;
  height: 60px;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: linear-gradient(0deg, rgba(31,122,236,0.1) 33%, rgba(31,122,236,1) 100%);
  animation: spin 0.8s linear infinite;
}
.circle-core {
  width: 100%;
  height: 100%;
  background-color: #0c2136;
  border-radius: 50%;
}
.spinner-box p {
  color: #cfe0f5;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0;
  letter-spacing: 0.05em;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}