/* =========
       Design System
       ========= */
    :root{
      --red:#f61715;
      --navy:#022448;
      --white:#ffffff;

      --text:#0b1220;
      --muted:#586174;
      --bg:#ffffff;

      --card:#ffffff;
      --line: rgba(2,36,72,.12);

      --shadow: 0 10px 35px rgba(2,36,72,.10);
      --shadow2: 0 18px 60px rgba(2,36,72,.14);

      --radius: 18px;
      --radius2: 26px;

      --container: 1320px;

      --h1: clamp(2.1rem, 1.4rem + 2.6vw, 3.5rem);
      --h2: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
      --h3: 1.1rem;

      --padY: clamp(3.2rem, 2.6rem + 2vw, 5rem);
      --padX: clamp(1.1rem, 0.9rem + 1vw, 1.8rem);

      --focus: 0 0 0 4px rgba(246,23,21,.18);
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:
        radial-gradient(1000px 420px at 12% -10%, rgba(246,23,21,.20), transparent 55%),
        radial-gradient(900px 420px at 85% -5%, rgba(2,36,72,.22), transparent 55%),
        linear-gradient(#ffffff, #ffffff);
      line-height:1.55;
      overflow-x:hidden;
    }
    a{ color:inherit; text-decoration:none; }
    img{ max-width:100%; height:auto; display:block; }
    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

    .container{
      width:min(var(--container), 100% - (var(--padX)*2));
      margin:0 auto;
    }

    /* =========
       Header
       ========= */
    .header{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter: blur(10px);
      background: rgba(255,255,255,.78);
      border-bottom: 1px solid var(--line);
    }
    .header__inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding: .9rem 0;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:.75rem;
      min-width: 220px;
    }
    .brand__mark{
      width:38px;
      height:38px;
      border-radius: 12px;
      background: conic-gradient(from 210deg, var(--navy), rgba(2,36,72,.85), var(--red));
      box-shadow: var(--shadow);
    }
    .brand__name{
      display:flex;
      flex-direction:column;
      line-height:1.1;
    }
    .brand__name b{
      letter-spacing:.2px;
      font-size:1.05rem;
    }
    .brand__name span{
      font-size:.85rem;
      color:var(--muted);
    }

    .nav{
      display:flex;
      align-items:center;
      gap:1.1rem;
    }
    .nav a{
      font-size:.95rem;
      color:#1b2a44;
      opacity:.92;
      padding:.45rem .55rem;
      border-radius: 12px;
      transition: background .2s ease, transform .2s ease;
    }
    .nav a:hover{
      background: rgba(2,36,72,.06);
      transform: translateY(-1px);
    }

    .header__actions{ display:flex; align-items:center; gap:.65rem; }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border-radius: 999px;
      padding: .75rem 1.05rem;
      font-weight: 650;
      letter-spacing:.2px;
      border: 1px solid transparent;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
      white-space:nowrap;
    }
    .btn:focus{ outline:none; box-shadow: var(--focus); }
    .btn--primary{
      background: var(--red);
      color: var(--white);
      box-shadow: 0 14px 35px rgba(246,23,21,.22);
    }
    .btn--primary:hover{ transform: translateY(-1px); box-shadow: 0 18px 44px rgba(246,23,21,.28); }
    .btn--ghost{
      background: rgba(2,36,72,.06);
      border-color: rgba(2,36,72,.10);
      color: var(--navy);
    }
    .btn--ghost:hover{ transform: translateY(-1px); }

    .menu-btn{
      display:none;
      border:1px solid rgba(2,36,72,.14);
      background: rgba(2,36,72,.05);
      border-radius: 14px;
      padding:.55rem .65rem;
      cursor:pointer;
    }
    .menu-btn:focus{ outline:none; box-shadow: var(--focus); }

    /* =========
       Hero
       ========= */
    .hero{
      padding: calc(var(--padY) - 1rem) 0 var(--padY);
    }
    .hero__grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: clamp(1.2rem, 1rem + 2vw, 2.2rem);
      align-items:stretch;
    }
    .kicker{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      padding:.45rem .8rem;
      border-radius: 999px;
      border:1px solid rgba(2,36,72,.12);
      background: rgba(255,255,255,.72);
      box-shadow: 0 10px 30px rgba(2,36,72,.08);
      color: var(--navy);
      font-weight: 700;
      font-size:.88rem;
    }
    .dot{
      width:10px; height:10px; border-radius: 99px;
      background: var(--red);
      box-shadow: 0 0 0 4px rgba(246,23,21,.16);
    }
    h1{
      font-size: var(--h1);
      line-height: 1.03;
      margin: 1rem 0 .9rem;
      letter-spacing: -0.6px;
      color: #061327;
    }
    .lead{
      font-size: clamp(1.02rem, .96rem + .25vw, 1.12rem);
      color: var(--muted);
      max-width: 62ch;
    }
    .hero__cta{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
      margin-top: 1.35rem;
      align-items:center;
    }
    .hero__meta{
      margin-top: 1.2rem;
      display:flex;
      flex-wrap:wrap;
      gap:.85rem;
      color: rgba(2,36,72,.78);
      font-size:.95rem;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.6rem .85rem;
      border-radius: 999px;
      border:1px solid rgba(2,36,72,.12);
      background: rgba(255,255,255,.78);
    }
    .hero__card{
      position:relative;
      border-radius: var(--radius2);
      background:
        radial-gradient(750px 260px at 22% 0%, rgba(246,23,21,.18), transparent 55%),
        linear-gradient(180deg, rgba(2,36,72,.07), rgba(2,36,72,.02));
      border: 1px solid rgba(2,36,72,.14);
      box-shadow: var(--shadow2);
      padding: 1.2rem;
      overflow:hidden;
    }
    .hero__card::after{
      content:"";
      position:absolute;
      inset:-40px -60px auto auto;
      width:180px; height:180px;
      background: radial-gradient(circle at 30% 30%, rgba(246,23,21,.35), rgba(246,23,21,0));
      filter: blur(6px);
      transform: rotate(18deg);
      pointer-events:none;
    }
    .hero__card h3{
      margin:.2rem 0 .6rem;
      font-size: 1.05rem;
      color: var(--navy);
      letter-spacing:.1px;
    }
    .hero__list{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:.65rem;
      color: rgba(2,36,72,.86);
      font-size:.96rem;
    }
    .hero__list li{
      display:flex;
      gap:.6rem;
      align-items:flex-start;
    }
    .check{
      width:18px; height:18px;
      border-radius: 6px;
      background: rgba(2,36,72,.10);
      display:grid;
      place-items:center;
      flex:0 0 auto;
      margin-top:2px;
    }
    .check svg{ width:13px; height:13px; }

    /* =========
       Sections
       ========= */
    section{
      padding: var(--padY) 0;
    }
    .section__head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1.2rem;
      margin-bottom: 1.6rem;
    }
    .section__head h2{
      margin:0;
      font-size: var(--h2);
      letter-spacing:-.3px;
      color:#061327;
    }
    .section__head p{
      margin:0;
      max-width: 60ch;
      color: var(--muted);
    }
    .grid{
      display:grid;
      gap: 1rem;
    }
    .grid--3{
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .grid--2{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .card{
      border:1px solid rgba(2,36,72,.12);
      background: rgba(255,255,255,.86);
      border-radius: var(--radius);
      box-shadow: 0 14px 40px rgba(2,36,72,.07);
      padding: 1.15rem;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      overflow:hidden;
    }
    .card:hover{
      transform: translateY(-2px);
      box-shadow: 0 18px 60px rgba(2,36,72,.10);
      border-color: rgba(2,36,72,.18);
    }
    .card__icon{
      width:42px; height:42px;
      border-radius: 14px;
      background: rgba(2,36,72,.08);
      display:grid;
      place-items:center;
      margin-bottom:.85rem;
    }
    .card__icon svg{ width:22px; height:22px; color: var(--navy); }
    .card h3{
      margin:.1rem 0 .55rem;
      font-size: 1.08rem;
      color: var(--navy);
    }
    .card p{ margin:0 0 .6rem; color: var(--muted); }
    .card ul{
      margin:.2rem 0 0;
      padding-left: 1.15rem;
      color: rgba(2,36,72,.82);
    }
    .card li{ margin:.25rem 0; }

    .divider{
      height:1px;
      background: var(--line);
      margin: 1.2rem 0;
    }

    /* =========
       Logo wall / Clients
       ========= */
    .logos{
      display:grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap:.8rem;
      align-items:center;
    }
    .logo{
      border:1px dashed rgba(2,36,72,.20);
      background: rgba(255,255,255,.72);
      border-radius: 14px;
      padding:.9rem;
      height:60px;
      display:grid;
      place-items:center;
      color: rgba(2,36,72,.55);
      font-weight: 700;
      letter-spacing:.2px;
      font-size:.85rem;
      text-align:center;
    }

    /* =========
       Testimonials
       ========= */
    .quote{
      position:relative;
    }
    .quote::before{
      content:"“";
      position:absolute;
      top:-18px; left:14px;
      font-size: 64px;
      color: rgba(246,23,21,.22);
      font-family: ui-serif, Georgia, serif;
      line-height:1;
    }
    .quote p{ margin-top:1rem; }

    /* =========
       Contact / CTA
       ========= */
    .cta-band{
      border-radius: var(--radius2);
      padding: clamp(1.2rem, 1rem + 1vw, 1.8rem);
      background:
        radial-gradient(900px 260px at 10% 0%, rgba(246,23,21,.20), transparent 60%),
        linear-gradient(180deg, rgba(2,36,72,.10), rgba(2,36,72,.03));
      border:1px solid rgba(2,36,72,.14);
      box-shadow: var(--shadow2);
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 1.1rem;
      align-items:center;
    }
    .cta-band h3{ margin:0 0 .35rem; color: var(--navy); }
    .cta-band p{ margin:0; color: var(--muted); }

    .contact{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      align-items:start;
    }
    .info{
      display:grid;
      gap:.8rem;
    }
    .info .pill{ justify-content:space-between; }
    .pill strong{ color: var(--navy); }

    form{
      display:grid;
      gap:.75rem;
    }
    label{
      display:grid;
      gap:.35rem;
      font-weight: 650;
      color: var(--navy);
      font-size:.92rem;
    }
    input, textarea{
      width:100%;
      border:1px solid rgba(2,36,72,.18);
      border-radius: 14px;
      padding:.85rem .9rem;
      font: inherit;
      background: rgba(255,255,255,.90);
      outline:none;
    }
    input:focus, textarea:focus{ box-shadow: var(--focus); border-color: rgba(246,23,21,.40); }
    textarea{ min-height: 130px; resize: vertical; }
    .form-note{
      color: var(--muted);
      font-size:.92rem;
      margin:0;
    }

    /* =========
       Footer
       ========= */
    footer{
      padding: 2.2rem 0;
      border-top:1px solid var(--line);
      background: rgba(255,255,255,.70);
    }
    .footer__grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:1rem;
      align-items:start;
    }
    .footer__links{
      display:flex;
      gap:.9rem;
      flex-wrap:wrap;
      justify-content:flex-end;
      color: rgba(2,36,72,.78);
      font-weight: 650;
    }
    .small{ color: rgba(2,36,72,.65); font-size:.92rem; }

    /* =========
       Mobile
       ========= */
    @media (max-width: 920px){
      .hero__grid{ grid-template-columns: 1fr; }
      .cta-band{ grid-template-columns: 1fr; }
      .logos{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .grid--3{ grid-template-columns: 1fr; }
      .grid--2{ grid-template-columns: 1fr; }
      .contact{ grid-template-columns: 1fr; }
      .footer__grid{ grid-template-columns: 1fr; }
      .footer__links{ justify-content:flex-start; }

      .nav{ display:none; }
      .menu-btn{ display:inline-flex; }
      .nav--open{
        display:flex;
        position:absolute;
        left: var(--padX);
        right: var(--padX);
        top: 64px;
        flex-direction:column;
        gap:.35rem;
        padding:.6rem;
        border:1px solid rgba(2,36,72,.14);
        border-radius: 18px;
        background: rgba(255,255,255,.95);
        box-shadow: var(--shadow2);
      }
      .nav--open a{ width:100%; }
    }
    @media (prefers-reduced-motion: reduce){
      html{ scroll-behavior:auto; }
      .card, .btn, .nav a{ transition:none; }
    }
	/* =========================
   	AJUSTES - HEADER (AZUL)
   	========================= */
	.header{
  	background: rgba(2,36,72,.96); /* #022448 */
  	border-bottom: 1px solid rgba(255,255,255,.14);
	}

	.header .brand__name b{ color:#fff; }
	.header .brand__name span{ color: rgba(255,255,255,.75); }

	.header .nav a{
	  color:#fff;
	  opacity:.92;
	}
	.header .nav a:hover{
	  background: rgba(255,255,255,.10);
	}

	/* Botão "Ligar" no header em versão clara */
	.header .btn--ghost{
	  background: rgba(255,255,255,.10);
	  border-color: rgba(255,255,255,.18);
	  color:#fff;
	}
	.header .btn--ghost:hover{
	  background: rgba(255,255,255,.16);
	}

	/* Botão menu (mobile) no header */
	.header .menu-btn{
	  border-color: rgba(255,255,255,.22);
	  background: rgba(255,255,255,.10);
	  color:#fff;
	}

	/* Menu aberto no mobile continua branco com texto azul */
	.nav--open a{
	  color: var(--navy) !important;
	}
	.nav--open a:hover{
  	background: rgba(2,36,72,.06) !important;
	}

	/* =========================
	   LOGO NO HEADER
	   ========================= */
	.brand{
	  min-width: auto;
	}
	.brand__logo{
		background: transparent;   /* tira o branco */
		padding: 0;                /* remove a “margem” interna */
		box-shadow: none;          /* tira a sombra do bloco */
		border-radius: 0;          /* sem borda arredondada */
		display:flex;
		align-items:center;
	}

	.brand__logo img{ height: 72px; width:auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.25)); }

	@media (max-width: 920px){
	.brand__logo img{ height: 42px; }
	}


	/* Se você preferir só o logo e esconder o texto ao lado: */
	/* .header .brand__name{ display:none; } */


	/* =========================
	   AJUSTES - CARD DIREITA (HERO) AZUL
	   ========================= */
	.hero__card{
	  background: linear-gradient(180deg, rgba(2,36,72,.98), rgba(2,36,72,.90));
	  border: 1px solid rgba(255,255,255,.14);
	  box-shadow: 0 18px 60px rgba(2,36,72,.28);
	  color: rgba(255,255,255,.88);
	}

	.hero__card h3{ color:#fff; }
	.hero__card p{ color: rgba(255,255,255,.78); }

	.hero__list{ color: rgba(255,255,255,.86); }
	.check{
	  background: rgba(255,255,255,.14);
	  color:#fff;
	}

	.hero__card .divider{
	  background: rgba(255,255,255,.16);
	}

	/* =========================
	MOBILE: reduzir botões do header
	========================= */
	@media (max-width: 360px){
	.header__actions{
		gap: .45rem; /* aproxima os botões */
	}

	.header__actions .btn{
		padding: .55rem .75rem;   /* antes era maior */
		font-size: .85rem;
	}

	/* opcional: reduzir a sombra do botão vermelho no mobile */
	.header__actions .btn--primary{
		box-shadow: 0 10px 22px rgba(246,23,21,.20);
	}

	
	}

	.btn-text-mobile{ display:none; }

		@media (max-width: 480px){
	.btn-text-desktop{ display:none; }
	.btn-text-mobile{ display:inline; }
	}

	/* =========================
	   FOOTER - mesmo tema do header
	   ========================= */
	.footer{
	  padding: 2.2rem 0;
	  background: rgba(2,36,72,.96); /* #022448 */
	  border-top: 1px solid rgba(255,255,255,.14);
	}

	.footer .brand__name b{ color:#fff; }
	.footer .brand__name span{ color: rgba(255,255,255,.75); }

	.footer__grid{
	  display:grid;
	  grid-template-columns: 1.2fr .8fr;
	  gap: 1rem;
	  align-items:center;
	}

	.footer__copy{
	  margin:.8rem 0 0;
	  color: rgba(255,255,255,.72);
	}

	.footer__social{
	  display:flex;
	  justify-content:flex-end;
	  gap: 1rem;
	  flex-wrap:wrap;
	}

	/* Links sociais com ícones brancos */
	.social{
	  display:inline-flex;
	  align-items:center;
	  gap:.55rem;
	  padding:.55rem .85rem;
	  border-radius: 999px;
	  border: 1px solid rgba(255,255,255,.16);
	  background: rgba(255,255,255,.06);
	  color:#fff;
	  font-weight:650;
	  transition: transform .18s ease, background .18s ease;
	}

	.social:hover{
	  transform: translateY(-1px);
	  background: rgba(255,255,255,.10);
	}

	.social svg{
	  width: 18px;
	  height: 18px;
	  fill: #fff;
	  opacity: .95;
	}

	/* Mobile */
	@media (max-width: 920px){
	  .footer__grid{
		grid-template-columns: 1fr;
		align-items:start;
	  }
	  .footer__social{
		justify-content:flex-start;
	  }
	}

	/* =========================
	   FOOTER - 3 COLUNAS
	   ========================= */
	.footer__grid--3col{
	  display:grid;
	  grid-template-columns: 1fr 1.2fr 1fr; /* esquerda / meio / direita */
	  gap: 1rem;
	  align-items:center;
	}

	.footer__left{ display:flex; align-items:center; justify-content:flex-start; }
	.footer__middle{ text-align:center; }
	.footer__right{ display:flex; align-items:center; justify-content:flex-end; }

	/* texto do meio */
	.footer__info{
	  margin: 0;
	  color: rgba(255,255,255,.80);
	  line-height: 1.55;
	}
	.footer__copy{
	  margin: .55rem 0 0;
	  color: rgba(255,255,255,.65);
	  font-size: .92rem;
	}

	/* redes à direita */
	.footer__social{
	  display:flex;
	  justify-content:flex-end;
	  gap: .75rem;
	  flex-wrap:wrap;
	}

	/* mobile: empilha e centraliza */
	@media (max-width: 920px){
	  .footer__grid--3col{
		grid-template-columns: 1fr;
		gap: 1.1rem;
		align-items:start;
		text-align:center;
	  }
	  .footer__left, .footer__right{ justify-content:center; }
	  .footer__social{ justify-content:center; }
	}
	
		/* Desktop grande: aproveitar mais a largura */
	@media (min-width: 1200px){
	  :root{
		--container: 1400px;  /* mais largo */
		--padX: 2.2rem;       /* mantém respiro lateral */
	  }
	}

	@media (min-width: 1600px){
	  :root{
		--container: 1560px;  /* ainda mais largo em monitor grande */
		--padX: 2.6rem;
	  }
	}
	
	/* =========================
	 HEADER: mais alto / campos maiores
	======================== */

	/* aumenta a altura geral da barra */
	.header__inner{
	  padding: 1.25rem 0; /* antes ~0.9/1.05 */
	}

	/* aumenta a área clicável dos links do menu */
	.nav a{
	  padding: .7rem .85rem;   /* antes ~.45 .55 */
	  font-size: 1rem;         /* leve aumento */
	  border-radius: 14px;
	}

	/* aumenta botões do header (Ligar / WhatsApp) */
	.header__actions .btn{
	  padding: .9rem 1.15rem;  /* antes ~.75 1.05 */
	  font-size: .98rem;
	}

	/* (opcional) dá um pouco mais de espaço entre menu e botões */
	.nav{ gap: 1.3rem; }
	.header__actions{ gap: .8rem; }


	@media (max-width: 480px){
	  .header__inner{ padding: .85rem 0; }
	  .nav a{ padding: .55rem .7rem; font-size: .92rem; }
	  .header__actions .btn{ padding: .55rem .75rem; font-size: .85rem; }
	}
	
	/* =========================
   TIPOGRAFIA: evitar linhas longas
   ========================= */

	/* parágrafos no geral: limite suave */
	p{
	  max-width: 70ch;
	}

	/* hero lead: um pouco menor (fica elegante) */
	.lead{
	  max-width: 58ch;
	}

	/* textos das descrições das seções (no cabeçalho das seções) */
	.section__head p{
	  max-width: 62ch;
	}

	/* texto longo dentro do card azul do hero */
	.hero__card p{
	  max-width: 60ch;
	}

	/* listas dentro de cards: evita esticar demais */
	.card ul{
	  max-width: 62ch;
	}

	/* Em telas bem grandes, reduz ainda mais um pouco (melhor leitura) */
	@media (min-width: 1400px){
	  p{ max-width: 68ch; }
	  .lead{ max-width: 56ch; }
	  .section__head p{ max-width: 60ch; }
	}
	
	.lead, .card p, .section__head p{
	  line-height: 1.65;
	}
	
	/* =========================
   CASES: grid + cards com imagem
   ========================= */
	.cases__grid{
	  display:grid;
	  gap: 1rem;
	  grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.case-card{
	  display:flex;
	  flex-direction:column;
	  gap: .9rem;
	}

	.case__media{
	  display:block;
	  border-radius: 16px;
	  overflow:hidden;
	  border: 1px solid rgba(2,36,72,.12);
	  background: rgba(2,36,72,.04);
	}

	.case__media img{
	  width:100%;
	  height:auto;
	  display:block;
	  aspect-ratio: 16 / 9;
	  object-fit: cover;
	  object-position: center;
	}

	/* Para imagens “técnicas”/verticais (CAD e painel), manter sem cortes */
	.case__media--contain img{
	  object-fit: contain;
	  background: rgba(255,255,255,.92);
	  padding: 14px;
	}

	.case__content h3{
	  margin: 0;
	}

	.case__summary{
	  margin: .35rem 0 .75rem;
	  color: var(--muted);
	  max-width: 68ch;
	}

	.case__bullets{
	  margin: 0;
	  padding-left: 1.1rem;
	  color: rgba(2,36,72,.82);
	}

	.case__bullets li{
	  margin: .28rem 0;
	}

	.case__tags{
	  margin-top: .75rem;
	  display:flex;
	  gap: .5rem;
	  flex-wrap:wrap;
	}

	.tag{
	  display:inline-flex;
	  align-items:center;
	  padding: .35rem .6rem;
	  border-radius: 999px;
	  border: 1px solid rgba(2,36,72,.14);
	  background: rgba(2,36,72,.05);
	  color: rgba(2,36,72,.86);
	  font-size: .82rem;
	  font-weight: 650;
	}

	/* Responsivo */
	@media (max-width: 1100px){
	  .cases__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}

	@media (max-width: 720px){
	  .cases__grid{ grid-template-columns: 1fr; }
	}
	
	/* Fix: imagens dos cases sempre preenchendo */
	.case__media img{
	  width: 100%;
	  height: auto;
	  aspect-ratio: 16 / 9;
	  object-fit: cover;
	  object-position: center;
	  padding: 0 !important;
	  background: transparent !important;
	}
	
	/* =========================
   CTA band no padrão navy (igual ao card azul)
   ========================= */
	.cta-band--navy{
	  background: linear-gradient(180deg, rgba(2,36,72,.98), rgba(2,36,72,.90));
	  border: 1px solid rgba(255,255,255,.14);
	  box-shadow: 0 18px 60px rgba(2,36,72,.28);
	  color: rgba(255,255,255,.88);
	}

	.cta-band--navy h3{ color:#fff; }
	.cta-band--navy p{ color: rgba(255,255,255,.78); }

	/* Botão "ghost" dentro do CTA navy vira claro */
	.cta-band--navy .btn--ghost{
	  background: rgba(255,255,255,.10);
	  border-color: rgba(255,255,255,.18);
	  color:#fff;
	}
	.cta-band--navy .btn--ghost:hover{
	  background: rgba(255,255,255,.16);
	}
	.cta-band--navy{
	  position: relative;
	  overflow: hidden;
	}
	.cta-band--navy::after{
	  content:"";
	  position:absolute;
	  inset:-40px -60px auto auto;
	  width:180px; height:180px;
	  background: radial-gradient(circle at 30% 30%, rgba(246,23,21,.30), rgba(246,23,21,0));
	  filter: blur(6px);
	  transform: rotate(18deg);
	  pointer-events:none;
	}
	.cta-band--navy > *{ position: relative; z-index: 1; }
	
	/* =========================
   Watermark (ícone no fundo) nos cards de serviços
   ========================= */
	
	.service-card{
	  position: relative;
	  overflow: hidden;
	}
	.service-card > *{
	  position: relative;
	  z-index: 1;
	}
	.service-card::after{
	  content:"";
	  position:absolute;
	  right:-28px;
	  bottom:-36px;
	  width: 240px;
	  height: 240px;
	  background-image: var(--wm);
	  background-repeat:no-repeat;
	  background-size: contain;
	  opacity: .10;
	  filter: blur(1.2px);
	  transform: rotate(-10deg);
	  pointer-events:none;
	  z-index: 0;
	}
	@media (max-width: 720px){
	  .service-card::after{
		width: 180px;
		height: 180px;
		right: -22px;
		bottom: -28px;
		opacity: .08;
	  }
	}

	/* =========================
	   Ícones (SVG) por serviço — cor #022448
	   ========================= */

	/* 1) Software — ícone “code” (SVG) */
	.svc--software{
	  --wm: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22 fill=%22%23022448%22%3E%3Cpath d=%22M80-680v-80q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v80h-80v-80H160v80H80Zm240 560v-80H160q-33 0-56.5-23.5T80-280v-80h80v80h640v-80h80v80q0 33-23.5 56.5T800-200H640v80H320Zm160-400Zm-288 0 104-104-56-56L80-520l160 160 56-56-104-104Zm576 0L664-416l56 56 160-160-160-160-56 56 104 104Z%22/%3E%3C/svg%3E');
	}

	/* 2) Robôs colaborativos */
	/* Robôs colaborativos: usar Material Symbols como watermark */
	.svc--cobots::after{
	  background-image: none !important;

	  /* Material Symbols usa ligatures: o texto vira o ícone */
	  content: "precision_manufacturing";

	  font-family: "Material Symbols Outlined";
	  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
	  font-size: 240px;
	  line-height: 1;

	  color: rgba(2,36,72,.12);   /* #022448 com transparência */
	  filter: blur(1.2px);
	  transform: rotate(-10deg);
	  opacity: 1;                 /* deixa a transparência só no color */

	  position: absolute;
	  right: -28px;
	  bottom: -36px;

	  width: auto;
	  height: auto;

	  pointer-events: none;
	  z-index: 0;
	}

	/* Mobile: reduz um pouco */
	@media (max-width: 720px){
	  .svc--cobots::after{
		font-size: 180px;
		right: -22px;
		bottom: -28px;
		color: rgba(2,36,72,.10);
	  }
	}

	/* 3) Sistemas supervisórios */
	.svc--supervisorio{
	  --wm: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cpath d=%22M4 6h16v10H4z%22 stroke=%22%23022448%22 stroke-width=%222%22/%3E%3Cpath d=%22M8 20h8%22 stroke=%22%23022448%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M12 16v4%22 stroke=%22%23022448%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M7 10h2m2 0h2m2 0h2%22 stroke=%22%23022448%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3C/svg%3E');
	}

	/* 4) Painéis elétricos */
	.svc--paineis{
	  --wm: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22 fill=%22%23022448%22%3E%3Cpath d=%22m422-232 207-248H469l29-227-185 267h139l-30 208ZM320-80l40-280H160l360-520h80l-40 320h240L400-80h-80Zm151-390Z%22/%3E%3C/svg%3E');
	}

	/* 5) Equipamentos especiais — ícone “engrenagens” (SVG) */
	.svc--equipamentos{
	  --wm: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -960 960 960%22 fill=%22%23022448%22%3E%3Cpath d=%22m234-480-12-60q-12-5-22.5-10.5T178-564l-58 18-40-68 46-40q-2-13-2-26t2-26l-46-40 40-68 58 18q11-8 21.5-13.5T222-820l12-60h80l12 60q12 5 22.5 10.5T370-796l58-18 40 68-46 40q2 13 2 26t-2 26l46 40-40 68-58-18q-11 8-21.5 13.5T326-540l-12 60h-80Zm96.5-143.5Q354-647 354-680t-23.5-56.5Q307-760 274-760t-56.5 23.5Q194-713 194-680t23.5 56.5Q241-600 274-600t56.5-23.5ZM592-40l-18-84q-17-6-31.5-14.5T514-158l-80 26-56-96 64-56q-2-18-2-36t2-36l-64-56 56-96 80 26q14-11 28.5-19.5T574-516l18-84h112l18 84q17 6 31.5 14.5T782-482l80-26 56 96-64 56q2 18 2 36t-2 36l64 56-56 96-80-26q-14 11-28.5 19.5T722-124l-18 84H592Zm56-160q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Z%22/%3E%3C/svg%3E');
	}

	/* 6) Revenda */
	.svc--revenda{
	  --wm: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cpath d=%22M7 7h10v14H7z%22 stroke=%22%23022448%22 stroke-width=%222%22/%3E%3Cpath d=%22M9 7V5h6v2%22 stroke=%22%23022448%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M9 11h6M9 15h6M9 19h6%22 stroke=%22%23022448%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3C/svg%3E');
	}


/* =========================
   PÁGINAS INTERNAS (título)
   ========================= */
.page-hero{
  padding: 4.2rem 0 4.0rem;
  color: #fff;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 320px at 20% 10%, rgba(246,23,21,.20), transparent 60%),
    radial-gradient(900px 320px at 80% 0%, rgba(255,255,255,.06), transparent 65%),
    linear-gradient(180deg, rgba(2,36,72,.98), rgba(2,36,72,.90));
}
.page-hero::after{
  content:"";
  position:absolute;
  inset:auto -30% -60% -30%;
  height: 140%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: rotate(-6deg);
  opacity: .35;
  pointer-events:none;
}
.page-hero h1{
  margin:0;
  color:#fff;
  letter-spacing: -0.6px;
}
.page-hero p{
  margin:.65rem 0 0;
  color: rgba(255,255,255,.80);
  max-width: 70ch;
}
.breadcrumb{
  font-size:.92rem;
  color: rgba(2,36,72,.75);
  padding: 1rem 0 0;
}
.breadcrumb a{ color: rgba(2,36,72,.85); }
.breadcrumb span{ color: rgba(2,36,72,.55); }

/* =========================
   BLOG (listagem)
   ========================= */
.blog-cta-bar{
  background: rgba(2,36,72,.08);
  border-bottom: 1px solid rgba(2,36,72,.10);
  padding: .85rem 0;
}
.blog-cta-bar__inner{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.btn--green{
  background: #10b000; /* verde semelhante ao print */
  color: #fff;
  box-shadow: 0 14px 35px rgba(16,176,0,.22);
}
.btn--green:hover{ transform: translateY(-1px); box-shadow: 0 18px 44px rgba(16,176,0,.28); }

.blog-list{
  display:grid;
  gap: 1.2rem;
}
.post-card{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 1.2rem;
  align-items:stretch;
}
.post-card__media{
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(2,36,72,.12);
  background: rgba(2,36,72,.04);
}
.post-card__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.post-card__content h2{
  margin: .1rem 0 .4rem;
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.9rem);
  color: var(--navy);
}
.post-card__content p{
  margin: 0 0 .6rem;
  color: var(--muted);
}
.post-card__meta{
  display:flex;
  gap: .65rem;
  flex-wrap:wrap;
  color: rgba(2,36,72,.70);
  font-size: .92rem;
  margin: .5rem 0 .9rem;
}
.post-card__meta .pill{ padding: .45rem .7rem; }
.post-card .btn{
  border-radius: 10px;
  padding: .65rem 1.05rem;
}
@media (max-width: 920px){
  .post-card{
    grid-template-columns: 1fr;
  }
  .post-card__media img{
    aspect-ratio: 16/9;
  }
}

/* =========================
   BLOG (post)
   ========================= */
.article{
  padding-top: 1rem;
}
.article__meta{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin: .9rem 0 1.4rem;
  color: rgba(2,36,72,.72);
  font-size: .95rem;
}
.article__meta .pill{ padding:.45rem .7rem; }
.article h1{
  margin: .35rem 0 .7rem;
  color: #061327;
}
.article h2{
  margin: 2.0rem 0 .7rem;
  color: var(--navy);
  letter-spacing: -.2px;
}
.article h3{
  margin: 1.4rem 0 .55rem;
  color: #0a2246;
}
.article p, .article li{
  color: #23314a;
  line-height: 1.75;
}
.article ul{
  padding-left: 1.2rem;
}
.article .callout{
  margin: 1.6rem 0;
  border-radius: 18px;
  border: 1px solid rgba(2,36,72,.14);
  background: rgba(2,36,72,.04);
  padding: 1rem 1.05rem;
}
.article .callout b{ color: var(--navy); }