/* ===== Base / Vars ===== */
:root{
  --bg:#0f172a;
  --light:#f8fafc;
  --ink:#0b1020;
  --muted:#64748b;
  --brand:#0ea5e9;

  /* espaçamento lateral para MOBILE (pode ajustar) */
  --space-mobile: 18px;
}
*{box-sizing:border-box}
html, body{height:100%;}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  color:#111;
  display:flex;              /* footer sempre no rodapé */
  flex-direction:column;
  min-height:100vh;
}

/* ===== Container central ===== */
.site-container{
  max-width: 1160px;
  margin: 0 auto;
  padding-left: 30px;   /* respiro lateral pedido (desktop) */
  padding-right: 30px;  /* respiro lateral pedido (desktop) */
}

/* ===== Topbar ===== */
.topbar{
  background:var(--brand);
  color:var(--light);
  font-size:.8rem;
  padding:.5rem 0;
  border-bottom:.9px solid #000000;
}
.phone-badge{display:inline-flex; align-items:center; gap:.35rem; font-weight:600}
.phone-ico{display:inline-block; width:18px; text-align:center}

/* Botão WhatsApp corrigido */
.btn-wa{
  background:#25d366; 
  border:0;
  color:#fff!important;
  font-weight:600;
  padding:.25rem .6rem;
  border-radius:.6rem;
  display:inline-flex; align-items:center; gap:.4rem;
  text-decoration:none;
}
.btn-wa:hover,.btn-wa:focus{filter:brightness(0.95); color:#d12525!important; text-decoration:none}

/* ===== Header/Nav ===== */
.header{
  min-height:72px;                           /* altura fixa para não "pular" */
  background:#ffffff49;
  border-bottom:1px solid #000000;
}
/* grid estável: logo | menu | hambúrguer (auto p/ botão colar à direita) */
.header .site-container{
  display:grid !important;
  grid-template-columns: 140px 1fr auto;     /* logo / menu / ícone */
  align-items:center;
  gap:10px;
}

/* menu do desktop */
.main-menu{
  display:flex !important;
  align-items:center;
  justify-content:center;                    /* centraliza e evita empurrões */
  gap:8px;
  white-space:nowrap;                        /* impede quebra de linha */
  flex-wrap:nowrap;
}
.main-menu .nav-link{
  color:#070707cc;
  opacity:.8;
  font-weight:bold;
  padding:.25rem .6rem;
  border-bottom:3px solid transparent;       /* reserva espaço da borda */
  transition:color .15s ease, border-color .15s ease, opacity .15s ease;
}
.main-menu .nav-link:hover{
  opacity:1;
  color:var(--brand);
  border-bottom-color:var(--brand);          /* só muda cor, não a espessura */
  text-decoration:none;
  font-weight:bold;
}

/* botões do menu com largura mínima estável */
.main-menu .btn{ min-width:96px; }

/* ===== Subnav ===== */
.mainnav{
  background:#f1f5f9;
  border-bottom:1px solid #e5e7eb;
  padding:.6rem 0;
}
.mainnav .small{color:#111; opacity:.75}

/* ===== Hero (se usar) ===== */
.hero img{max-height:360px; object-fit:cover}

/* ===== Cards “genéricos” ===== */
.card.h-100{height:100%;}
.post-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;height:100%; display:flex; flex-direction:column}
.post-thumb{width:100%; height:180px; object-fit:cover; background:#eef2f7}

/* ===== Blog / listagens ===== */
.post-grid-title{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.post-meta{
  color:#64748b; font-size:.9rem;
}

/* ===== Footer (sempre colado ao rodapé) ===== */
.footer{
  background:#0b1020;
  color:#cbd5e1;
  padding:1rem 0;
  margin-top:3rem;
}
.footer a{color:#e2e8f0}

/* O <main> aberto no header deve crescer e dar respiro contra o footer */
main.site-container{
  flex:1 0 auto;
  padding-bottom: 72px;     /* evita encostar/ficar por baixo do footer */
}
footer.footer{flex-shrink:0}

/* ===== Form A11y ===== */
.is-invalid{border-color:#dc3545}
.alert[role="alert"]{outline:0}
.form-text{color:var(--muted)}

/* ===== Testimonials / Carousel – VISUAL DE CONFIANÇA ===== */
.section-trust{
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border-radius: 14px;
  padding: 16px;
}
.trust-title{
  color:#0b1020;
  letter-spacing:.2px;
  display:inline-flex; align-items:center; gap:8px;
}
.trust-title .dot{
  width:8px; height:8px; border-radius:50%;
  background:#5b9cf6; box-shadow:0 0 0 4px rgba(91,156,246,.18);
}
.trust-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.85rem; font-weight:600;
  color:#065f46; background:#ecfdf5;
  border:1px solid #a7f3d0; border-radius:999px;
  padding:6px 10px;
}
.testimonial-card{
  background:#f0f6ff;
  border:1px solid rgba(91,156,246,.35);
  border-radius:16px;
  padding:24px 26px;
  min-height:170px;
  max-width:860px;
  margin:0 auto;
  box-shadow:0 8px 28px rgba(15,23,42,.06);
  transition:transform .16s ease, box-shadow .16s ease;
}
.testimonial-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(15,23,42,.12);
}
.testimonial-quote,
.testimonial-text{
  position:relative;
  font-size:1.05rem;
  line-height:1.6;
  color:#0b1020;
  margin-bottom:18px;
}
.testimonial-quote:before,
.testimonial-text:before{
  content:"“";
  position:absolute; left:-18px; top:-8px;
  font-size:40px; line-height:1; font-weight:700;
  color:#f59e0b;
  opacity:.85;
}
.testimonial-meta{display:flex; align-items:center; gap:12px;}
.testimonial-meta img{
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  border:2px solid #fff;
  box-shadow:0 0 0 3px rgba(91,156,246,.35);
}
.testimonial-person{display:grid; gap:2px;}
.testimonial-name{font-weight:700; color:#0b1020;}
.testimonial-loc{font-size:.9rem; color:#475569;}

/* ===== Indicadores do Carrossel (bolinhas menores e neutras) ===== */
.carousel .carousel-item{display:none; transition:transform .6s ease-in-out;}
.carousel .carousel-item.active{display:block;}

.carousel-indicators{
  gap:6px;
  margin-bottom:8px;
}
.carousel-indicators button{
  width:6px !important;
  height:6px !important;
  border-radius:50%;
  border:none;
  background-color: rgba(150, 150, 150, 0.63) !important; /* inativo */
  opacity:1;
  transition: background-color .2s ease, transform .2s ease;
}
.carousel-indicators button.active{
  background-color:#ffffff !important;
  transform: scale(1.15);
}
@media (min-width: 992px){
  .carousel-indicators button{
    width:8px !important;
    height:8px !important;
  }
}

.actions-right .btn{border-color:#5b9cf6; color:#1d4ed8;}
.actions-right .btn:hover{background:#e8f1ff; border-color:#3b82f6; color:#1e3a8a;}

@media (prefers-color-scheme: dark){
  .section-trust{background:linear-gradient(180deg, #0b1020 0%, #0f172a 100%);}
  .testimonial-card{background:#0f172a; border-color:rgba(91,156,246,.35);}
  .testimonial-quote, .testimonial-text, .testimonial-name{color:#e5e7eb;}
  .testimonial-loc{color:#94a3b8;}
  .actions-right .btn{color:#93c5fd; border-color:#60a5fa;}
  .actions-right .btn:hover{background:rgba(59,130,246,.12);}
}

/* ===== Melhorias responsivas para grades ===== */
@media (min-width: 992px){
  .row.g-3 > [class*='col'] .card{height:100%;}
}

/* ===================================================================
   Drawer Mobile (abre pela DIREITA) + Burger SVG animado
   =================================================================== */
/* ——— BOTÃO HAMBÚRGUER refinado e alinhado à direita ——— */
.nav-toggle{
  background:#ffffff;
  border:1px solid #d1d5db;
  border-radius:8px;
  width:38px;
  height:38px;
  padding:4px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .25s ease;
  position:relative;
  margin-left:auto;        /* garante que vá pro canto direito */
}
.nav-toggle:hover{
  background:#f3f4f6;
  border-color:#cbd5e1;
}

/* Ícone hamburguer mais sutil */
.ico-burger .l1, .ico-burger .l2, .ico-burger .l3{
  transition:transform .25s ease, opacity .25s ease;
  stroke: currentColor;
  stroke-width:2.2;
}
.drawer-open .ico-burger .l1{ transform:translateY(5px) rotate(45deg); }
.drawer-open .ico-burger .l2{ opacity:0; }
.drawer-open .ico-burger .l3{ transform:translateY(-5px) rotate(-45deg); }

/* Drawer */
.drawer{
  position:fixed; top:0; bottom:0; right:0; left:auto;
  width:82%; max-width:320px; background:#fff;
  transform:translateX(110%); transition:transform .28s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.25); z-index:1060;
}
.drawer.open{ transform:translateX(0); }
.drawer-close{
  position:absolute; top:6px; right:10px; font-size:32px; line-height:1;
  background:transparent; border:0; cursor:pointer;
}
.drawer-auth{
  border-bottom:1px solid rgba(0,0,0,.06);
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  position:sticky; top:0; z-index:1;
}
.drawer-nav{ padding:16px 18px 20px; }

/* ——— FONTES DO MENU MOBILE menores / elegantes ——— */
.drawer-nav a{
  display:block;
  padding:10px 6px;
  color:#0f172a;
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.drawer-nav a:hover{
  background:#f8fafc;
  color:#0284c7;
}

/* Backdrop do drawer */
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1050;
  opacity:0; transition:opacity .28s ease;
}
.drawer-backdrop.show{ opacity:1; }
.drawer-open .nav-toggle{ outline:2px solid rgba(107,33,168,.35); outline-offset:2px; }

/* alinhar com o HTML atual */
.site-footer{
  background:#0b1020;
  color:#cbd5e1;
  padding:1rem 0;
  margin-top:3rem;
}
.site-footer a{ color:#e2e8f0 }

/* === Galeria (grade e view) === */
.gallery-grid{
  display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:16px;
}
@media (min-width:576px){ .gallery-grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:992px){ .gallery-grid{ grid-template-columns:repeat(3,1fr) } }
.gallery-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;
}
.gallery-card img{ aspect-ratio:16/9; object-fit:cover; width:100% }
.gallery-view .hero-img{
  width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px;
}
.gallery-view .thumbs{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;
  overflow-x:auto; padding-bottom:2px;
}
.gallery-view .thumbs img{
  flex:0 0 auto;
  width:96px !important;
  height:96px !important;
  object-fit:cover;
  border-radius:8px;
  border:1px solid #e5e7eb;
  cursor:pointer;
}
.gallery-view .thumbs img.active{
  outline:2px solid var(--brand);
  outline-offset:2px;
}
.lb{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.85);
  z-index:2000;
}
.lb.show{ display:flex; }
.lb img{
  max-width:92vw; max-height:92vh; object-fit:contain;
  border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.5);
  cursor:zoom-in; transition:transform .15s ease;
}
.lb.zoomed img{
  max-width:none; max-height:none; width:auto; height:auto;
  cursor:zoom-out;
}
.lb .lb-close{
  position:absolute; top:10px; right:14px;
  background:transparent; border:0; color:#fff; font-size:30px;
  line-height:1; cursor:pointer;
}

/* ===============================
   Auth (login / signup / recuperar)
   =============================== */
.auth-wrapper{min-height:50vh; padding-bottom: 32px;}  /* garante respiro antes do footer */
.auth-sidebar .list-group-item{padding:.85rem 1rem; font-weight:600; color:#0f172a;}
.auth-sidebar .list-group-item.active{
  background:#efeefe; color:#4c1d95; border-left:4px solid #6b21a8;
}
.auth-sidebar .list-group-item:hover{background:#f8fafc;}
.auth-card{border:1px solid #e5e7eb; border-radius:14px;}
.auth-card .form-label{font-weight:600; color:#0b1020;}
.auth-card .form-control{background:#eef5ff;}
.btn-primary{background:#0d6efd; border-color:#0d6efd;}
.btn-outline-primary{border-color:#0d6efd; color:#0d6efd;}
.btn-outline-primary:hover{background:#e8f1ff; color:#0b3b9b; border-color:#0d6efd;}
.auth-side-cta .btn{border-radius:10px;}

/* ===== LOGIN: faixa de benefícios estável ===== */
.auth-benefits-card{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:12px;
}
.auth-benefits{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 991.98px){
  .auth-benefits{ grid-template-columns:1fr; }
}
.auth-benefits .benefit{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:10px 12px;
  min-height:78px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.auth-benefits .benefit h6{
  margin:0 0 4px;
  font-weight:700;
  font-size:.95rem;
}
.auth-benefits .benefit p{
  margin:0;
  color:#475569;
  font-size:.9rem;
}

/* ===== Pequenos ajustes tipográficos em telas pequenas ===== */
@media (max-width: 991.98px){
  /* esconde o menu grande e deixa só o botão */
  .main-menu{ display:none !important; }
  .nav-toggle{ margin-left:auto; }

  /* Topbar (mobile): “Orçamentos rápidos — Pedir agora” visível e à direita */
  .topbar { font-size: .76rem; }
  .topbar .site-container{
    display:flex; align-items:center; gap:8px; flex-wrap:nowrap; min-width:0;
  }
  .phone-badge, .btn-wa{ flex-shrink:0; }

  .topbar .small{
    margin-left:auto;           /* empurra para a direita */
    text-align:right;           /* alinha conteúdo à direita */
    text-transform: none !important;
    letter-spacing: 0;
    font-weight: 600;
    font-size: .76rem;          /* menor */
    line-height: 1.15;
    white-space: normal;        /* pode quebrar linha */
    overflow: visible;          /* sem ellipsis */
    text-overflow: clip;
    max-width: 64vw;            /* espaço ao lado do telefone/WA */
  }
  .topbar .small a{
    display:inline;
    font-weight:700;
    text-decoration:underline;
  }

  /* telas muito estreitas */
  @media (max-width: 420px){
    .topbar .small{ max-width:70vw; font-size:.72rem; }
  }
}


/* === Carrossel Horizontal (cards de destaque) === */
.h-carousel{ display:flex; gap:12px; overflow:auto; padding:4px 2px 10px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; } .h-item{ flex:0 0 84%; max-width:84%; scroll-snap-align:start; } @media (min-width:480px){ .h-item{ flex:0 0 72%; max-width:72%; } } @media (min-width:768px){ .h-item{ flex:0 0 48%; max-width:48%; } } @media (min-width:992px){ .h-carousel{ overflow:visible } .h-item{ flex:1 1 0%; max-width:none } }
.h-carousel > .col{ scroll-snap-align: start; }
.h-carousel::-webkit-scrollbar{ height: 6px; }
.h-carousel::-webkit-scrollbar-thumb{ background: rgba(2,6,23,.25); border-radius: 999px; }
.h-carousel-controls{ display:flex; gap:8px; }
.h-carousel-controls button{
  width:34px; height:34px; line-height:32px; text-align:center;
  font-size:22px; border-radius:999px;
  border:1px solid rgba(2,6,23,.25); background:#fff; color:#0b1020;
}
.h-carousel-controls button:active{ transform: scale(.97); }
@media (min-width: 992px){
  .h-carousel{ overflow: visible !important; }
  .h-carousel-controls{ display:none; }
}

/* === Carrossel Horizontal (cards de destaque) — revisão mobile === */



/* Garante que os 6 artigos aparecem bem no mobile */ @media (max-width: 575.98px){
  .row.row-cols-1.row-cols-md-2.row-cols-lg-3.g-3 > .col { margin-bottom: .75rem; } 
  .row.row-cols-1.row-cols-md-2.row-cols-lg-3.g-3 img.card-img-top{ width:100%; height:auto; } }

/* ============================================================
   MOBILE: espaçamento lateral simétrico + anti-overflow
   ============================================================ */

/* 1) nada maior que a viewport cria scroll horizontal */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

@media (max-width: 575.98px){

  /* 2) container com o MESMO espaço à esquerda e à direita */
  .site-container{
    padding-left: var(--space-mobile) !important;
    padding-right: var(--space-mobile) !important;
    max-width:100%;
   overflow-x:auto;
  }

  /* 3) filas bootstrap: remove gutters negativos dentro do container */
  .site-container > .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .site-container > .row > [class^="col"],
  .site-container > .row > [class*=" col"]{
    padding-left: 0 !important;   /* usamos só o padding do .site-container */
    padding-right: 0 !important;
  }

  /* 4) mídias e cartões nunca estouram */
  img, video, canvas, svg{ max-width:100%; height:auto; }
  .card{ max-width:100%; overflow:hidden; }

  /* 5) carrossel de feedbacks: sem setas, sem overflow */
  #feedbackCarousel,
  #feedbackCarousel .carousel-inner,
  #feedbackCarousel .carousel-item{ overflow:hidden; }
  #feedbackCarousel .carousel-control-prev,
  #feedbackCarousel .carousel-control-next{ display:none !important; }

  /* 6) carrossel de “Destaques” com respiro igual nas laterais */
  .h-carousel{
   padding-left: var(--space-mobile); 
   padding-right: var(--space-mobile); 
   margin-left: calc(-1 * var(--space-mobile)); margin-right: calc(-1 * var(--space-mobile)); max-width:100%; overflow-x:auto;
  }
  .h-item{
  flex:0 0 100%; 
  max-width:100%;
  scroll-snap-align:start;
  }
}

/* segurança extra */
.section-trust{ overflow:hidden; }
/* ==========================================================
   DESKTOP APERTADO (14" / 1366px): menu pode quebrar em 2 linhas
   ========================================================== */
@media (min-width: 992px) and (max-width: 1440px){
  /* deixa o header crescer e o menu respirar */
  .header{
    min-height: auto;            /* permite aumentar a altura se o menu quebrar */
  }
  .header .site-container{
    grid-template-columns: 140px 1fr; /* logo | menu (sem a 3ª coluna) */
    align-items: start;               /* topo, pra segunda linha não “afundar” */
    row-gap: 6px;                     /* respiro entre as linhas do menu */
  }

  /* menu em 2 linhas quando faltar espaço */
  .main-menu{
    flex-wrap: wrap;          /* *** permite quebrar de linha *** */
    white-space: normal;      /* desfaz o nowrap anterior */
    justify-content: center;  /* centraliza quando quebrar (troque p/ flex-start se preferir à esquerda) */
    gap: 6px 10px;            /* (gap vertical, gap horizontal) */
  }

  /* itens do menu não esticam demais */
  .main-menu .nav-link,
  .main-menu .btn{
    flex: 0 0 auto;
  }

  /* botões um pouco mais estreitos p/ caber melhor */
  .main-menu .btn{ min-width: 88px; }
}

/* afina levemente o padding entre 992 e 1200 pra evitar 3 linhas */
@media (min-width: 992px) and (max-width: 1200px){
  .main-menu .nav-link{ padding: .25rem .5rem; }
}