:root{
  /* Paleta (somente estas cores) */
  --blue:#2347DB;
  --yellow:#FFF500;
  --white:#FFFFFF;

  /* Derivações (apenas RGBA das cores da paleta) */
  --text: rgba(35,71,219,.92);
  --text-soft: rgba(35,71,219,.72);
  --border: rgba(35,71,219,.16);
  --border-strong: rgba(35,71,219,.28);
  --shadow: 0 18px 45px rgba(35,71,219,.16);
  --shadow-strong: 0 30px 80px rgba(35,71,219,.24);

  --radius: 18px;
  --container: 1120px;

  /* LOGO (grande) */
  --logo-h: 64px;
  --logo-max-w: 360px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height:1.5;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
a:hover{ text-decoration:underline; }


.container{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;
}

.muted{ color: var(--text-soft); }

.skip-link{
  position:absolute;
  top:-70px;
  left:14px;
  background:var(--yellow);
  color: var(--blue);
  padding:10px 12px;
  border-radius:999px;
  z-index:9999;
  font-weight:900;
  text-decoration:none;
}
.skip-link:focus{ top:14px; }

/* =========================
   HEADER
========================= */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(255, 255, 255, 1);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding: 14px 0;
}
.header__accent{
  height: 4px;
  background: linear-gradient(90deg, var(--yellow), rgba(255,245,0,.25), var(--yellow));
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 280px;
  text-decoration:none;
}
.brand__logo-wrap{
  width: 230px;                 /* tamanho do “quadrado” */
  height: 90px;

  border-radius: 25px;         /* VOLTA do círculo para quadrado arredondado */
  overflow: hidden;            /* recorta a imagem dentro do quadrado */

  background: #FFFFFF;
  border: 7px solid #FFF500;   /* BORDA AMARELA */
  box-shadow: 0 16px 40px rgba(35,71,219,.10);

  display: grid;
  place-items: center;
}

.brand__logo{
  width: 100%;
  height: 100%;
  object-fit: cover;           /* preenche o quadrado inteiro */
  object-position: center;
  display: block;
}

.brand__text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.brand__text strong{
  font-weight:900;
  letter-spacing:.22px;
  color: var(--blue);
  text-transform: uppercase;
}
.brand__text small{
  font-weight:800;
  color: var(--text-soft);
}

/* NAV */
.nav{
  display:flex;
  align-items:center;
  gap:18px;
}
.nav a{
  font-weight:900;
  text-decoration:none;
  color: var(--blue);
  opacity:.92;
  padding: 10px 10px;
  border-radius: 999px;
}
.nav a:hover{
  text-decoration:none;
  background: rgba(35,71,219,.06);
  opacity:1;
}

.nav-toggle{
  display:none;
  width:48px;
  height:48px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: 0 16px 40px rgba(35,71,219,.10);
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  height:2px;
  width:22px;
  margin: 6px auto;
  background: var(--blue);
  border-radius:99px;
}

/* =========================
   BUTTONS
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight:900;
  border: 2px solid transparent;
  cursor:pointer;
  text-decoration:none !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  user-select:none;
}
.btn:active{ transform: translateY(1px); }

.btn--primary{
  background: var(--yellow);
  color: var(--blue);
  box-shadow: var(--shadow);
}
.btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-strong);
}
.btn--secondary{
  background: var(--blue);
  color: var(--white);
  box-shadow: var(--shadow);
}
.btn--secondary:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-strong);
}
.btn--ghost{
  background: transparent;
  color: var(--blue);
  border-color: var(--border-strong);
}
.btn--ghost:hover{
  box-shadow: 0 20px 60px rgba(35,71,219,.14);
  border-color: rgba(35,71,219,.45);
}

/* =========================
   HERO (mais azul #2347DB + branco + amarelo)
========================= */
.hero{
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(900px 520px at 0% 0%,
      rgba(35,71,219,.95) 0%,
      rgba(35,71,219,.95) 35%,
      rgba(35,71,219,95) 72%
    ),
    radial-gradient(720px 420px at 25% 18%,
      rgba(255, 255, 255, 1) 0%,
      #FFF500 38%,
      rgba(255,245,0,0) 70%
    ),
    linear-gradient(180deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 70%,
      rgba(35,71,219,.06) 100%
    );

  padding: 64px 0 22px;
}


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

.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 26px;
  align-items:center;
}

.badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: #FFF500;
  border: 1px solid #FFF500;
  font-weight:900;
  color: var(--blue);
  margin:0 0 14px;
}

.hero h1{
  font-size: clamp(2.1rem, 2.4vw + 1.4rem, 3.45rem);
  line-height:1.06;
  letter-spacing:-.7px;
  margin: 0 0 14px;
  color: white;
}
.highlight{
  background: var(--yellow);
  padding: 0 .12em;      /* antes era .25em (mais grosso) */
  border-radius: .12em;  /* opcional: cantos menos “gordinhos” */
  box-decoration-break: clone;
}

.hero .highlight{
  background: none;
  padding: 0;
  color: #ffffff;
  letter-spacing: .02em;
}

.hero-card ul li::marker{
  color: #FFF500; /* amarelo */
}

.lead{
  font-size: 1.06rem;
  color: white;
  margin: 0 0 22px;
  max-width: 62ch;
}

.hero__cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 0 0 22px;
}
.hero__stats{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.stat{
  flex: 1 1 180px;
  padding: 14px 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 18px 45px rgba(35,71,219,.12);
}
.stat strong{ display:block; font-weight:900; color: var(--blue); }
.stat span{ font-size:.95rem; color: var(--text-soft); }

.hero__visual{ min-height: 420px; }

.hero-card{
  position:relative;
  background: var(--white);
  border-radius: 42px;
  border: 15px solid var(--yellow);
  box-shadow: 0 24px 70px rgba(35,71,219,.18);
  overflow:hidden;
  
}
.hero-card__top{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 14px 16px;
  background: var(--blue); /* azul sólido */
  border-bottom: 1px solid rgba(255,245,0,.35); /* opcional */
;
}

.hero-card__top .dot{
  background: var(--blue); /* pontinhos amarelos */
  color: #ffffff;
}

.hero-card__tag{
  margin-left:auto;
  font-weight:900;
  color: #2347DB;
  background: rgb(255, 255, 255);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 999px;
}
.hero-card__body{ 
  padding: 16px 18px 18px; 
  color: var(--blue);
}
.hero-card__title{
  font-weight:900;
  margin-bottom: 10px;
  color: var(--blue);
}
.checklist{
  margin:0;
  padding-left: 18px;
  color: var(--text);
}
.checklist li{ margin: 9px 0; }

.hero-badge{
  position:absolute;
  right: 18px;
  bottom: 18px;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--blue);
  font-weight: 900;
  box-shadow: 0 22px 60px rgba(35,71,219,.22);
  border: 1px solid rgba(35,71,219,.18);
}

.hero__divider{
  height: 20px;
  margin-top: 36px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--yellow) 0 48px,
      rgba(255,255,255,0) 28px 42px
    );
  opacity: 1;
}


/* =========================
   SECTIONS
========================= */
.section{ padding: 78px 0; }

.section--alt{
  background:
    radial-gradient(1100px 520px at 20% 0%, rgba(35,71,219,.10), rgba(255,255,255,0) 62%),
    radial-gradient(900px 560px at 90% 30%, rgba(255,245,0,.24), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(35,71,219,.06), rgba(255,255,255,1));
}

.section__head{
  display:grid;
  gap: 10px;
  margin-bottom: 22px;
}

.kicker{
  margin:0;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--blue);
  opacity:.88;
}

.section__head h2{
  font-size: clamp(1.6rem, 1.2vw + 1.1rem, 2.2rem);
  margin:0;
  letter-spacing:-.3px;
  color: var(--blue);
}

.section__head p{
  margin:0;
  color: var(--text);
  max-width: 72ch;
}

/* =========================
   CARDS
========================= */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.card{
  position:relative;
  border-radius: calc(var(--radius) + 6px);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 18px 45px rgba(35,71,219,.10);
  padding: 18px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  height: 6px;
  background: linear-gradient(90deg, var(--yellow), rgba(255,245,0,.25), var(--yellow));
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
  border-color: var(--border-strong);
}
.card__icon{
  width:48px;
  height:48px;
  border-radius: 16px;
  background: var(--yellow);
  color: var(--blue);
  display:grid;
  place-items:center;
  box-shadow: 0 18px 50px rgba(35,71,219,.16);
  margin: 10px 0 12px;
}
.card__icon svg{ width:26px; height:26px; }

.card h3{ margin: 0 0 8px; color: var(--blue); font-weight:900; }
.card p{ margin: 0; color: var(--text); }

/* CTA strip */
.cta-strip{
  margin-top: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 16px 18px;
  border-radius: calc(var(--radius) + 10px);
  background: linear-gradient(90deg, #FFF500, #FFF500);
  border: 1px solid var(--border);
  box-shadow: 0 18px 45px rgba(35,71,219,.10);
}
.cta-strip__text strong{
  display:block;
  font-weight:900;
  color: var(--blue);
}
.cta-strip__text span{ color: var(--text); }

/* =========================
   STEPS
========================= */
.steps{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.step{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 18px 45px rgba(35,71,219,.10);
  padding: 18px;
  display:flex;
  gap: 12px;
}
.step__num{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: var(--blue);
  color: var(--white);
  display:grid;
  place-items:center;
  font-weight:900;
}
.step h3{ margin: 0 0 6px; color: var(--blue); font-weight:900; }
.step p{ margin:0; color: var(--text); }

/* =========================
   GALLERY
========================= */
.gallery{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.gallery__item{
  position:relative;
  grid-column: span 4;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--white);
  padding:0;
  overflow:hidden;
  cursor:pointer;
  box-shadow: 0 18px 45px rgba(35,71,219,.10);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.gallery__item::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height: 64px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(35,71,219,.18));
  opacity:.9;
  pointer-events:none;
}
.gallery__item:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
  border-color: var(--border-strong);
}
.gallery__item img{
  width:100%;
  height: 230px;
  object-fit:cover;
}

/* =========================
   TESTIMONIALS
========================= */
.testimonials{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.testimonial{
  margin:0;
  padding: 18px;
  border-radius: calc(var(--radius) + 6px);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 18px 45px rgba(35,71,219,.10);
}
.testimonial blockquote{
  margin:0 0 12px;
  font-weight:700;
  color: var(--text);
}
.testimonial figcaption{
  font-weight:900;
  color: var(--blue);
}

/* =========================
   CONTACT
========================= */
.contact { 
    display:grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 14px; 
    align-items:start; 
}

.panel { 
    background: var(--white); 
    border: 1px solid var(--border); 
    border-radius: calc(var(--radius) + 10px); 
    box-shadow: var(--shadow); 
    padding: 18px; 
}

.info-grid { 
    display:grid; 
    gap: 8px; /* Reduzido o espaço entre as linhas de informação */
    margin-top: 14px; 
}

/* Ajuste das informações (WhatsApp, Email, etc) para Preto e Negrito Fino */
.info__label { 
    display:block; 
    font-size:.9rem; 
    color: var(--blue)!important; /* Mudado para preto */
    font-weight: 600 !important; /* Negrito elegante */
}

.info__value { 
    display:block; 
    font-weight: 600 !important; /* Negrito elegante */
    color: var(--blue)!important; /* Mudado para preto */
}

/* --- AJUSTE DE ESPAÇAMENTO DO FORMULÁRIO (Nome e Telefone) --- */
.form label { 
    display:block; 
    margin: 4px 0 !important; /* Reduzido de 12px para 4px para aproximar os campos */
}

.form label span { 
    display:block; 
    font-weight: 600 !important; /* Negrito elegante */
    margin-bottom: 2px !important; /* Título mais colado na caixa */
    color: #000000 !important; /* Mudado para preto */
}

input, textarea { 
    width:100%; 
    padding: 10px 12px; 
    border-radius: 14px; 
    border: 1px solid var(--border-strong); 
    outline: none; 
    font: inherit; 
    background: var(--white); 
    color: #000000 !important; 
    font-weight: 500; /* Texto digitado levemente mais forte */
}

/* Mantendo o restante do layout */
.map { margin-top: 14px; }
.map__placeholder { 
    height: 230px; 
    border-radius: 18px; 
    border: 1px dashed rgba(0,0,0,.2); 
    background: radial-gradient(600px 240px at 30% 40%, rgba(0,0,0,.05), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(0,0,0,.02), rgba(255,255,255,1)); 
    display:grid; 
    place-items:center; 
    text-align:center; 
    padding: 14px; 
    color: #000; 
}

.form__row { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form__notice { margin-top: 5px; font-weight: 600; color: #000; }


/* =========================
   FOOTER
========================= */
.footer{
  background: var(--blue);
  color: var(--white);
  padding: 24px 0;
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}
.footer__links{
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
}
.footer a{
  color: var(--white);
  opacity:.95;
  text-decoration:none;
  font-weight:900;
}
.footer a:hover{ opacity:1; text-decoration:underline; }
.footer .muted{ color: rgba(255,255,255,.82); }

/* WhatsApp float */
.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--yellow);
  font-weight: 900;
  box-shadow: var(--shadow-strong);
  border: 2px solid rgba(35,71,219,.16);
  text-decoration:none;

  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.wa-float i{
  font-size: 22px;     /* tamanho do ícone */
  line-height: 1;
}

/* Escolha a cor do ícone/texto */
.wa-float.wa-verde{ color:#25D366; } /* verde WhatsApp */
.wa-float.wa-azul{  color:#1e40af; } /* azul */
.wa-float.wa-preto{ color:#111111; } /* preto bonito */
/* LIGHTBOX */
.lightbox{
  position: fixed;
  inset: 0;
  display:none;
  z-index: 70;
}
.lightbox.is-open{ display:block; }
.lightbox__backdrop{
  position:absolute;
  inset:0;
  background: rgba(35,71,219,.70);
}
.lightbox__content{
  position:relative;
  margin: 0;
  width: min(980px, calc(100% - 26px));
  max-height: calc(100% - 26px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--white);
  border-radius: 22px;
  box-shadow: 0 40px 90px rgba(35,71,219,.35);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.55);
}
.lightbox__img{
  width:100%;
  height: min(72vh, 700px);
  object-fit: contain;
  background: linear-gradient(180deg, rgba(35,71,219,.08), rgba(255,255,255,1));
}
.lightbox__close{
  position:absolute;
  top: 12px;
  right: 12px;
  border: 0;
  border-radius: 999px;
  padding: 10px 12px;
  background: var(--yellow);
  color: var(--blue);
  font-weight: 900;
  cursor:pointer;
}

/* =========================
   RESPONSIVO
========================= */
@media (max-width: 980px){
  :root{ --logo-h: 58px; --logo-max-w: 220px; }

  .hero__grid{ grid-template-columns: 1fr; }
  .hero__visual{ min-height: 340px; }
  .cards{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .gallery__item{ grid-column: span 6; }
  .testimonials{ grid-template-columns: 1fr; }
  .contact{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
  :root{ --logo-h: 54px; --logo-max-w: 210px; }

  .nav-toggle{ display:block; }
  .nav{
    position:absolute;
    right: 20px;
    top: 86px;
    width: min(440px, calc(100% - 40px));
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--b);
    border-radius: 18px;
    box-shadow: var(--shadow-strong);
    padding: 12px;
  }
  .nav.is-open{ display:flex; }
  .nav a{
    padding: 12px 12px;
    border-radius: 14px;
  }
  .form__row{ grid-template-columns: 1fr; }
  .gallery__item{ grid-column: span 12; }
}
.hero-card__tag{
  margin-left: 0 !important;
  order: -1;
  margin-right: auto; /* empurra os pontinhos para a direita */
}

/* =========================
   OVERRIDES (adicionados)
========================= */

/* 1) GALERIA: mostrar somente 3 fotos */
#galeria .gallery__item:nth-child(n+4){
  display: none;
}

/* (opcional) tirar o degradê/overlay que aparece em cima das fotos */
#galeria .gallery__item::after{
  display: none;
}

/* 2) Fundo do MÉTODO (processo) e da GALERIA: branco, sem degradê */
#processo.section--alt{
  background-color: var(--white) !important;
  background-image: none !important;
}

#galeria{
  background-color: var(--white) !important;
  background-image: none !important;
}

/* 3) Seção "Sobre a oficina" (layout do card com foto + texto) */
.about{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: stretch;
}

.about__photo{
  padding: 0;           /* remove padding do .panel para a foto ocupar tudo */
  overflow: hidden;     /* respeita o border-radius */
}

.about__photo img{
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}

.about__text h3{
  margin: 0 0 8px;
  color: var(--blue);
  font-weight: 900;
}

.about__list{
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--text);
}

.about__list li{ margin: 8px 0; }

.about__list li::marker{
  color: var(--yellow);
}

/* responsivo */
@media (max-width: 980px){
  .about{
    grid-template-columns: 1fr;
  }
  .about__photo img{
    max-height: 320px;
  }
}

/* =========================
   OVERRIDES - FUNDO AZUL / TEXTO AMARELO
   Mantendo cards de avaliações e formulário brancos
========================= */

/* 1) Seção "Confiança" (Depoimentos) com fundo azul (sem degradê do section--alt) */
#depoimentos.section--alt{
  background-color: var(--blue) !important;
  background-image: none !important;
}

/* Textos do topo em amarelo (kicker, título e parágrafo) */
#depoimentos .section__head .kicker,
#depoimentos .section__head h2,
#depoimentos .section__head p{
  color: var(--yellow) !important;
}

/* Cards de avaliações (depoimentos) continuam brancos */
#depoimentos .testimonial{
  background: var(--white) !important;
  border-color: var(--border) !important;
  box-shadow: 0 18px 45px rgba(35,71,219,.10) !important;
}

#depoimentos .testimonial blockquote{
  color: var(--text) !important;
}
#depoimentos .testimonial figcaption{
  color: var(--blue) !important;
}


/* 2) Seção "Orçamento" (Contato) com fundo azul */
#contato{
  background-color: var(--blue) !important;
}

/* Textos do topo em amarelo (kicker, título e parágrafo) */
#contato .section__head .kicker,
#contato .section__head h2,
#contato .section__head p{
  color: var(--yellow) !important;
}

/* Card do orçamento/cadastro (formulário) continua branco */
#contato .contact__form .panel{
  background: var(--white) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Ajusta as cores internas do formulário para o padrão (azul) */
#contato .contact__form .panel h3,
#contato .contact__form .panel label span,
#contato .contact__form .panel .form__hint,
#contato .contact__form .panel .form__notice{
  color: var(--blue) !important;
}

#contato .contact__form input,
#contato .contact__form textarea{
  background: var(--white) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}

/* =========================
   OVERRIDES - Bordas do Sobre (oficina)
========================= */


/* Garante que a foto respeite as bordas/arredondamento */
#sobre .about__photo img{
  border-radius: calc(var(--radius) + 10px);
}

/* Borda AZUL no card de texto "Sobre nós" */
#sobre .about__text{
  border: 4px solid var(--blue) !important;
}

/* Borda SOMENTE no bloco do mapa */
.map{
  border: 4px solid var(--blue);   /* cor da borda (troque para --yellow se quiser) */
  border-radius: 18px;
  overflow: hidden;               /* corta o iframe nos cantos arredondados */
  background: var(--white);
}

/* iframe ocupa todo o bloco */
.map__frame{
  width: 100%;
  height: 230px;
  border: 0;
  display: block;
}

/* esconde o placeholder (para não aparecer junto do mapa) */
.map__placeholder{
  display: none !important;
}

/* =========================
   Sombras AZUIS (apenas nos cards que você pediu)
========================= */

:root{
  --shadow-blue: 0 18px 55px rgba(35,71,219,.32);
  --shadow-blue-strong: 0 30px 90px rgba(35,71,219,.45);
}

/* Sobre nós (Quem somos + foto da oficina) */
#sobre .about__text,
#sobre .about__photo{
  box-shadow: var(--shadow-blue) !important;
}

/* Galeria */
#galeria .gallery__item{
  box-shadow: var(--shadow-blue) !important;
}
#galeria .gallery__item:hover{
  box-shadow: var(--shadow-blue-strong) !important;
}

/* Serviços principais (3 cards) */
#servicos .card{
  box-shadow: var(--shadow-blue) !important;
}
#servicos .card:hover{
  box-shadow: var(--shadow-blue-strong) !important;
}

/* Processo (4 cards) */
#processo .step{
  box-shadow: var(--shadow-blue) !important;
}

/* Borda MAIS FORTE apenas nos cards do PROCESSO */
#processo .step{
  border: 5px solid var(--blue) !important; /* azul mais forte */
}

/* Bordado/borda mais forte nos cards da GALERIA */
#galeria .gallery__item{
  border: 5px solid var(--yellow) !important; /* azul forte */
}

/* Centralizar logo no MOBILE */
@media (max-width: 760px){
  .brand__logo-wrap{
    width: 180px;
    height: 70px;
  }
}

  .brand{
    min-width: 0;     /* remove aquele mínimo que atrapalha */
    margin: 0 auto;   /* garante centralização */
  }

  .nav-toggle{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  /* MOBILE: logo no canto esquerdo + texto sem ser tampado */
@media (max-width: 760px){
  .header__inner{
    justify-content: space-between !important;
    padding-left: 14px;
    padding-right: 14px;
  }

  .brand{
    margin: 0 !important;
    min-width: 0 !important;
    flex-direction: row !important;   /* volta a ficar lado a lado */
    align-items: center !important;
    gap: 10px;
    text-align: left !important;
  }

  /* diminui a caixa da logo para caber com o texto */
  .brand__logo-wrap{
    width: 150px;
    height: 58px;
    flex: 0 0 auto;
  }

  /* deixa o texto encolher/quebrar se precisar (não fica embaixo do botão) */
  .brand__text{
    min-width: 0;
  }
  .brand__text strong,
  .brand__text small{
    display: block;
    white-space: normal; /* pode quebrar linha se faltar espaço */
  }

  /* botão do menu fica no fluxo normal, à direita (não sobrepõe) */
  .nav-toggle{
    position: static !important;
    transform: none !important;
    margin-left: auto;
    flex: 0 0 auto;
  }
}

@media (max-width: 760px){
  /* empurra um pouco mais para a esquerda */
  .header__inner{
    padding-left: 8px !important;   /* antes 14px */
    padding-right: 14px !important;
  }

  /* tira qualquer margem e dá “prioridade” para a marca */
  .brand{
    margin: 0 !important;
  }

  /* aumenta a logo */
  .brand__logo-wrap{
    width: 175px !important;  /* aumente para 185px se quiser mais */
    height: 66px !important;  /* proporcional */
  }
}

@media (max-width: 760px){
  .brand__logo-wrap{
    width: 168px !important; /* estava 175px */
    height: 64px !important; /* estava 66px */
  }
}

/* HERO: botão "Ver trabalhos" (btn--ghost) em amarelo */
.hero .btn--ghost{
  background: var(--yellow) !important;
  color: var(--blue) !important;
  border-color: transparent !important;
  box-shadow: var(--shadow) !important;
}

.hero .btn--ghost:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-strong) !important;
  text-decoration: none !important;
}

/* HERO: botão "Ver trabalhos" (btn--ghost) em amarelo */
.hero .btn--ghost{
  background: var(--yellow) !important;
  color: var(--blue) !important;
  border-color: transparent !important;
  box-shadow: var(--shadow) !important;
}

.hero .btn--ghost:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-strong) !important;
  text-decoration: none !important;
}

/* Menu do topo: não quebrar texto em 2 linhas */
.nav a{
  white-space: nowrap;
}