/* L. Braga Construções. Folha única, sem dependências externas.
   Cores oficiais da marca, do arquivo do Illustrator: azul #0034a0, laranja #ee7300. */

:root{
  --azul:#0034a0;
  --azul-esc:#002370;
  --azul-cl:#1c50c6;
  --laranja:#ee7300;
  --laranja-cl:#ff8a1f;
  --zap:#128C4A;
  --tinta:#14181f;
  --tinta-md:#4a5464;
  --linha:#dfe4ec;
  --cinza:#f2f5f9;
  --branco:#fff;
  --raio:14px;
  --sombra:0 1px 2px rgba(16,24,40,.06), 0 8px 24px -12px rgba(16,24,40,.22);
  --larg:1120px;
  --topo-h:64px;
  --fonte:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--topo-h) + 12px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;font-family:var(--fonte);color:var(--tinta);background:var(--branco);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--azul);text-decoration-thickness:.09em;text-underline-offset:.18em}
h1,h2,h3,h4{line-height:1.15;margin:0;letter-spacing:-.02em;font-weight:800}
p{margin:0}
:focus-visible{outline:3px solid var(--laranja);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--larg);margin-inline:auto;padding-inline:20px}
.vis-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.pular{position:absolute;left:-9999px;top:0;background:var(--laranja);color:#fff;padding:12px 18px;z-index:200;font-weight:700;border-radius:0 0 10px 0}
.pular:focus{left:0}

/* ---------- topo ---------- */
.topo{
  position:sticky;top:0;z-index:100;background:var(--azul);
  box-shadow:0 2px 14px rgba(0,20,70,.28);
  padding-top:env(safe-area-inset-top);
}
.topo__in{display:flex;align-items:center;gap:12px;min-height:var(--topo-h)}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;padding:6px 0}
.marca__sinal{width:38px;height:auto;flex:none;border-radius:4px}
.marca__txt{display:flex;flex-direction:column;line-height:1;color:#fff}
.marca__txt b{font-size:19px;font-weight:800;letter-spacing:.01em}
.marca__txt i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.26em;color:var(--laranja-cl);margin-top:3px}

.menu-btn{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:44px;padding:0 11px;border:0;border-radius:10px;
  background:rgba(255,255,255,.12);cursor:pointer;
}
.menu-btn span{display:block;height:2.5px;background:#fff;border-radius:2px;transition:transform .22s,opacity .22s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.nav{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease;
  position:absolute;left:0;right:0;top:100%;background:var(--azul-esc);
  box-shadow:0 14px 22px rgba(0,10,40,.3);
}
.nav.aberto{grid-template-rows:1fr}
.nav>a{
  overflow:hidden;display:block;color:#fff;text-decoration:none;font-weight:600;
  padding:0 20px;max-height:0;transition:max-height .26s ease;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.nav.aberto>a{max-height:56px;padding:15px 20px}
.nav>a:hover,.nav>a:focus-visible{background:rgba(255,255,255,.09)}

@media (min-width:900px){
  .menu-btn{display:none}
  .nav{position:static;display:flex;gap:4px;background:none;box-shadow:none;grid-template-rows:none}
  .nav>a{max-height:none;padding:9px 14px;border:0;border-radius:9px;font-size:15.5px;overflow:visible}
  .nav.aberto>a{max-height:none;padding:9px 14px}
}

/* ---------- capa ---------- */
.capa{position:relative;background:var(--azul);color:#fff;text-align:center;overflow:hidden}
.capa::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(1100px 480px at 50% -12%, rgba(255,255,255,.13), transparent 62%),
    linear-gradient(180deg, var(--azul) 0%, var(--azul-esc) 100%);
}
/* Sem os botões, a capa termina em texto: a entrelinha da última linha já conta
   como respiro, então o padding de baixo é menor que o de antes para o vão
   óptico continuar na mesma proporção do de cima. */
.capa__in{position:relative;padding:44px 20px 46px;display:flex;flex-direction:column;align-items:center}
/* Logo à esquerda do nome, o conjunto centralizado. A largura manda e a altura
   segue sozinha: o arquivo é 193.7 x 168.85 e altura fixa deformaria o símbolo. */
.capa__marca{display:flex;align-items:center;justify-content:center;gap:14px;max-width:100%}
.capa__logo{width:68px;height:auto;flex:none;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.capa__nome{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1;min-width:0}
.capa__nome span{font-size:clamp(2.4rem,10.5vw,4.3rem);font-weight:800;letter-spacing:-.025em}
.capa__nome em{
  font-style:normal;font-weight:700;color:var(--laranja-cl);
  font-size:clamp(.82rem,3.4vw,1.32rem);letter-spacing:.32em;margin-top:9px;padding-left:.32em;
}
.capa__frase{margin-top:20px;max-width:58ch;color:#d6e0f7;font-size:clamp(1rem,3.6vw,1.16rem)}
.capa__frase strong{color:#fff}
.capa__borda{height:6px;background:linear-gradient(90deg,var(--laranja) 0 42%,var(--laranja-cl) 42% 100%)}

/* ---------- botões ---------- */
.bt{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 22px;border-radius:11px;font-weight:700;font-size:16px;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .14s ease, background-color .18s, box-shadow .18s;
  min-height:50px;
}
.bt:active{transform:translateY(1px)}
.bt svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* O glifo do WhatsApp e preenchido, nao tracado como os outros icones. */
.bt svg.ico-zap,.zap-flut svg.ico-zap{fill:currentColor;stroke:none}
.bt--laranja{background:var(--laranja);color:#fff;box-shadow:0 6px 18px -6px rgba(238,115,0,.75)}
.bt--laranja:hover{background:var(--laranja-cl)}
.bt--azul{background:var(--azul);color:#fff}
.bt--azul:hover{background:var(--azul-cl)}
.bt--zap{background:var(--zap);color:#fff;box-shadow:0 6px 18px -8px rgba(18,140,74,.8)}
.bt--zap:hover{background:#0f7a41}
.bt--linha{background:#fff;color:var(--azul);border-color:var(--linha)}
.bt--linha:hover{border-color:var(--azul);background:#f6f9ff}
.bt--larga{width:100%}

/* ---------- seções ---------- */
.secao{padding:56px 0}
.secao--cinza{background:var(--cinza);border-block:1px solid var(--linha)}
.olho{color:var(--laranja);font-weight:800;font-size:12.5px;letter-spacing:.19em;text-transform:uppercase}
/* O rotulo vira o proprio titulo da secao de lojas. Em corpo grande o
   espacamento de .19em fica largo demais, por isso a variante reduz. */
.olho--titulo{font-size:clamp(1.4rem,5vw,2.1rem);letter-spacing:.1em;line-height:1.1}

/* ---------- grade de produtos ---------- */
.grade{
  list-style:none;padding:0;margin:30px 0 0;
  display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
}
.item{
  position:relative;background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:11px;
  text-align:center;font-weight:700;font-size:15px;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.item:hover{border-color:var(--azul);box-shadow:var(--sombra);transform:translateY(-2px)}
.item svg{
  width:32px;height:32px;fill:none;stroke:var(--azul);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
/* ---------- lojas ---------- */
.loja{
  background:#fff;border:1px solid var(--linha);border-radius:20px;
  overflow:hidden;box-shadow:var(--sombra);margin-top:28px;
  scroll-margin-top:calc(var(--topo-h) + 16px);
}
.loja__foto img{width:100%;aspect-ratio:20/9;object-fit:cover;background:var(--cinza)}
/* A foto sangra até a borda do card, mas o mapa e o botão abaixo dela
   precisam do mesmo recuo lateral da coluna de texto. */
.loja__visual{display:flex;flex-direction:column}
.loja__visual .mapa{margin:20px 20px 0}
.loja__visual .bt--larga{width:auto;margin:14px 20px 24px}
.loja__txt{padding:24px 20px 26px}
.loja__nome{font-size:clamp(1.5rem,5.6vw,2rem)}
.loja__end{margin-top:16px;font-size:16.5px;line-height:1.65;font-weight:500}

.agora{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-weight:800;font-size:14.5px;padding:8px 14px;border-radius:99px;
}
.agora::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.agora[data-estado="aberto"]{color:#0d6b39;background:#e2f6ea}
.agora[data-estado="fechado"]{color:#8a2020;background:#fceaea}

.horas{width:100%;border-collapse:collapse;margin-top:18px;font-size:16px}
.horas th,.horas td{padding:11px 0;border-bottom:1px solid var(--linha);text-align:left}
.horas th{font-weight:600;color:var(--tinta-md)}
.horas td{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.horas tr:last-child th,.horas tr:last-child td{border-bottom:0}
.fech{color:#9aa2b0}

.fale{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.fale .bt--zap{width:100%;font-size:15.5px}
.fale .bt--linha{flex:1}

/* O endereco aparece escrito, e nao so como botao: mailto: nao faz nada
   em quem nao tem programa de e-mail configurado, e o visitante ficaria
   sem o endereco. Escrito, da sempre para copiar. */
.loja__mail{margin-top:14px;font-size:15.5px;word-break:break-word}
.loja__mail a{color:var(--azul);font-weight:600}
.mapa{margin:24px 0 0}
.mapa img{
  width:100%;border:1px solid var(--linha);border-radius:var(--raio);
  background:#eef1f6;aspect-ratio:760/342;
}
.mapa+.bt{margin-top:14px}

@media (min-width:560px){
  .fale{flex-direction:row;flex-wrap:wrap}
  .fale .bt--zap{width:100%}
}
@media (min-width:900px){
  .secao{padding:76px 0}
  .capa__in{padding:64px 20px 64px}
  .capa__marca{gap:20px}
  .capa__logo{width:104px}
  /* Foto e mapa vivem na mesma coluna, o mapa embaixo da foto. Os dois cards
     usam a mesma composição: espelhar um deles fazia o endereço trocar de
     lado entre uma loja e outra, e o olho perdia a referência. */
  .loja{display:grid;grid-template-columns:1fr 1fr;align-items:start;margin-top:34px}
  .loja__visual .mapa{margin:26px 34px 0}
  .loja__visual .bt--larga{margin:16px 34px 30px}
  .loja__txt{padding:36px 34px}
}

/* ---------- rodapé ---------- */
.rodape{background:var(--azul-esc);color:#c3d2ee;padding:44px 0 108px;font-size:15.5px}
.rodape__marca{display:flex;align-items:center;gap:14px}
.rodape__marca img{width:52px;height:auto;border-radius:5px;flex:none}
.rodape__marca b{color:#fff;font-size:17px;letter-spacing:.01em}
.rodape__cols{display:grid;gap:26px;margin-top:30px}
.rodape h4{color:var(--laranja-cl);font-size:12.5px;letter-spacing:.19em;text-transform:uppercase;margin-bottom:9px}
.rodape a{color:#dbe6ff;text-decoration:none;word-break:break-word}
.rodape a:hover{text-decoration:underline}
.rodape__fim{
  margin-top:32px;padding-top:22px;border-top:1px solid rgba(255,255,255,.15);
  font-size:13.5px;color:#93a8d4;
}
.rodape__fim small{color:#7e93c2;font-size:12.5px}
@media (min-width:700px){ .rodape__cols{grid-template-columns:1fr 1fr} }

/* ---------- botão flutuante ---------- */
.zap-flut{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:90;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--zap);color:#fff;text-decoration:none;font-weight:800;
  padding:15px;border-radius:14px;box-shadow:0 10px 26px -8px rgba(0,40,20,.6);
  transform:translateY(140%);transition:transform .3s ease;
  padding-bottom:calc(15px + env(safe-area-inset-bottom));
}
.zap-flut.ver{transform:translateY(0)}
.zap-flut svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:900px){
  .zap-flut{left:auto;right:26px;bottom:26px;padding:15px 24px;border-radius:99px}
  .rodape{padding-bottom:44px}
}