/* ═══════════════════════════════════════════════
   TOPO — pílula flutuante, centralizada
   ═══════════════════════════════════════════════ */
.topo{
  position:fixed; top:24px; z-index:50;
  /* centraliza no espaço VISÍVEL: o trilho do poste come --rail à esquerda */
  left:calc(50% + var(--rail) / 2); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  padding:12px 24px;
  width:calc(100vw - var(--rail) - 2rem);
  border:1px solid #333; background:rgba(31,31,31,.34);
  backdrop-filter:blur(8px);
  border-radius:999px;
  /* o canto só volta a ser redondo DEPOIS que o painel termina de fechar
     (.3s) — abrir é instantâneo. mesmo truque do setTimeout do original,
     só que declarativo: duração 0s, atraso 300ms */
  transition:border-radius 0s .3s, background .3s ease, box-shadow .3s ease;
}
.topo.aberto{
  border-radius:22px;
  transition:border-radius 0s 0s, background .3s ease, box-shadow .3s ease;
}
/* ganha corpo depois que o usuário rola */
.topo.fixo{
  background:rgba(19,23,30,.72);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}

.topo__in{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:28px; }

.marca{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
.marca__poste{ width:13px; height:34px; border-radius:7px; border:1.5px solid var(--tinta); }
.marca__txt{ font-family:var(--display); font-size:1.02rem; line-height:1; letter-spacing:-.01em; }
.marca__txt small{ display:block; font-family:var(--sans); font-size:.56rem; font-weight:700; letter-spacing:.22em; color:var(--vermelho); margin-top:4px; }

/* ── links: o rótulo desliza e troca por uma cópia mais clara ──
   duas cópias empilhadas dentro de uma janela de 20px; o hover sobe
   metade da pilha. as alturas TÊM que bater, senão desalinha. */
.menu{ display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0; }
.menu__link{
  display:block; position:relative; overflow:hidden; height:20px;
  font-size:.875rem; text-decoration:none;
}
.menu__desliza{ display:flex; flex-direction:column; transition:transform .4s ease-out; }
.menu__link:hover .menu__desliza,
.menu__link:focus-visible .menu__desliza{ transform:translateY(-50%); }
.menu__desliza span{ display:block; height:20px; line-height:20px; white-space:nowrap; }
.menu__desliza span:first-child{ color:rgba(237,241,246,.72); }
.menu__desliza span:last-child{ color:var(--branco); }

/* ── botões da pílula ── */
.topo__acoes{ display:flex; align-items:center; gap:12px; }
.btn-nav{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 17px; border-radius:999px;
  font-family:var(--sans); font-size:.78rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  text-decoration:none; cursor:pointer;
  border:1px solid #333; background:rgba(31,31,31,.62); color:rgba(237,241,246,.8);
  transition:border-color .2s ease, color .2s ease, background .2s ease, filter .2s ease;
}
.btn-nav:hover{ border-color:rgba(255,255,255,.5); color:var(--branco); }

.btn-nav--destaque{
  position:relative; z-index:1;
  border-color:transparent; background:var(--vermelho); color:var(--branco);
}
.btn-nav--destaque:hover{ border-color:transparent; color:var(--branco); filter:brightness(1.08); }

/* halo desfocado atrás do botão principal */
.btn-nav__brilho-wrap{ position:relative; display:inline-flex; }
.btn-nav__brilho{
  position:absolute; inset:-8px; border-radius:999px; pointer-events:none;
  background:var(--vermelho); opacity:.4; filter:blur(14px);
  transition:opacity .3s ease, filter .3s ease, inset .3s ease;
}
.btn-nav__brilho-wrap:hover .btn-nav__brilho{ opacity:.6; filter:blur(20px); inset:-12px; }

.hamburguer{
  display:none; align-items:center; justify-content:center;
  width:32px; height:32px; flex:none;
  background:none; border:0; padding:0; cursor:pointer; color:rgba(237,241,246,.8);
}
.hamburguer:hover{ color:var(--branco); }
.hamburguer svg{ width:24px; height:24px; }
.hamburguer__fechar{ display:none; }
.topo.aberto .hamburguer__abrir{ display:none; }
.topo.aberto .hamburguer__fechar{ display:block; }

/* ── painel do celular: cresce dentro da própria pílula ── */
.painel{
  display:flex; flex-direction:column; align-items:center; width:100%;
  overflow:hidden; max-height:0; opacity:0; padding-top:0; pointer-events:none;
  transition:max-height .3s ease-in-out, opacity .3s ease-in-out, padding-top .3s ease-in-out;
}
.topo.aberto .painel{ max-height:1000px; opacity:1; padding-top:16px; pointer-events:auto; }
.menu--painel{ flex-direction:column; gap:14px; width:100%; }
.menu--painel a{
  display:block; width:100%; text-align:center; padding:5px 0;
  font-size:1rem; text-decoration:none; color:rgba(237,241,246,.72);
  transition:color .2s ease;
}
.menu--painel a:hover{ color:var(--branco); }
.painel__acoes{ display:flex; flex-direction:column; gap:14px; margin-top:16px; width:100%; }
.painel__acoes .btn-nav,
.painel__acoes .btn-nav__brilho-wrap{ width:100%; }
.painel__rodape{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; margin-top:18px; padding-top:16px; border-top:1px solid var(--linha);
}
.topo__tel{
  display:flex; align-items:center; gap:9px;
  font-size:.84rem; font-weight:700; letter-spacing:.04em;
  text-decoration:none; white-space:nowrap;
}
.topo__tel svg{ width:16px; height:16px; stroke:var(--vermelho); fill:none; stroke-width:1.8; flex:none; }
.topo__tel:hover{ color:var(--vermelho); }
.topo__social{ display:flex; align-items:center; gap:10px; }

/* a pílula inteira mede ~540px, então ela já cabe bem antes dos 980px
   do menu antigo — abaixo disso vira hambúrguer */
@media (min-width:721px){
  .topo{ width:auto; }
  .painel{ display:none; }
}
@media (max-width:720px){
  .menu:not(.menu--painel),
  .topo__acoes{ display:none; }
  .hamburguer{ display:flex; }
  /* o halo vazaria da pílula com o botão em largura total */
  .painel .btn-nav__brilho{ display:none; }
}

/* ═══════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════ */
.hero{ padding-block:clamp(130px,14vw,180px) 0; position:relative; overflow:hidden; }
.hero > .wrap{ position:relative; z-index:1; }
.hero__grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(28px,5vw,64px); align-items:center; }

/* ── grade de fundo, esmaecida por uma máscara radial no topo ── */
.hero__grade{
  position:absolute; top:0; left:0; right:0; height:600px; z-index:0;
  pointer-events:none; opacity:.8;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:6rem 5rem;
  -webkit-mask-image:radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
          mask-image:radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
}

/* ── halo: elipse gigante que nasce no rodapé da seção. o miolo é da cor
   do fundo e só a BORDA acende, então sobra um arco quente atravessando
   a base. o overflow:hidden do .hero corta o resto da elipse. ── */
.hero__halo{
  position:absolute; left:50%; top:calc(100% - 90px); z-index:0;
  width:700px; height:500px; transform:translateX(-50%);
  border-radius:100%; pointer-events:none;
  background:radial-gradient(closest-side,
    var(--base) 84%,
    rgba(228,84,74,.16) 94%,
    rgba(228,84,74,.34) 100%);
}
@media (min-width:768px){ .hero__halo{ width:1100px; } }
@media (min-width:1024px){ .hero__halo{ width:140%; height:750px; top:calc(100% - 150px); } }

/* ── título em degradê (o em vermelho é repintado por cima) ── */
.hero h1 em{ font-style:normal; color:var(--vermelho); }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1{
    background-image:linear-gradient(to bottom right, var(--tinta) 30%, rgba(237,241,246,.45));
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .hero h1 em{ -webkit-text-fill-color:var(--vermelho); }
}

/* ── eyebrow em pílula, com a seta deslizando no hover ── */
.olho--pilula{
  display:inline-flex; width:fit-content;
  padding:8px 18px; border-radius:999px;
  border:2px solid var(--linha);
  background:linear-gradient(to top right, rgba(255,255,255,.04), rgba(255,255,255,.02), transparent);
  text-decoration:none;
  transition:border-color .25s ease;
}
.olho--pilula:hover{ border-color:rgba(255,255,255,.24); }
.olho__seta{
  width:15px; height:15px; margin-left:6px; flex:none;
  stroke:currentColor; fill:none; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s ease;
}
.olho--pilula:hover .olho__seta{ transform:translateX(4px); }
.hero .lead{ margin-top:26px; font-size:1.12rem; }
.hero__acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero__nota{ margin-top:26px; font-size:.85rem; color:rgba(237,241,246,.64); display:flex; align-items:center; gap:9px; }
.pino{ width:8px; height:8px; border-radius:50%; background:#1e9e5a; flex:none; box-shadow:0 0 0 4px rgba(30,158,90,.18); }

.hero__fotos{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:190px 130px; gap:12px; }
.hero__fotos>img:first-of-type{ grid-row:span 2; }
.hero__fotos .foto{ border-radius:3px; }

@media (max-width:860px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__fotos{ grid-template-rows:150px 110px; }
}

/* ── o herói ocupa a tela inteira: sem isso a faixa listrada e o topo
   da seção seguinte apareciam por baixo já no carregamento ── */
@media (min-width:861px){
  .hero{
    min-height:100vh;
    display:flex; align-items:center;
    padding-block:clamp(120px,12vw,170px) clamp(48px,5vw,80px);
  }
  .hero > .wrap{ width:100%; }
}

/* ── desktop grande: a coluna de texto para de esticar (vira ilegível
   e afasta as fotos); quem ganha o espaço extra é o cluster de fotos ── */
@media (min-width:1280px){
  .hero__grid{ grid-template-columns:minmax(0,680px) minmax(0,1fr); gap:clamp(40px,3.5vw,72px); }
  /* o cluster tem altura de linha fixa: sem um teto, quanto mais larga a
     tela mais achatadas (letterbox) as fotos ficavam */
  .hero__fotos{
    justify-self:end; width:100%; max-width:900px;
    margin-right:calc(-1 * var(--extra-ampla));
    grid-template-rows:clamp(190px,13vw,260px) clamp(130px,9vw,180px);
  }
}
/* nas telas muito largas os dois tetos acima sobravam e abriam um vão
   morto no meio do herói: as duas colunas crescem juntas para fechá-lo */
@media (min-width:2560px){
  .hero__grid{ grid-template-columns:minmax(0,820px) minmax(0,1fr); }
  .hero__fotos{ max-width:1000px; }
}


/* ── poste gigante em diagonal, atrás das fotos ─────────────── */
.hero__fotos{ position:relative; }
.hero__poste{
  position:absolute; z-index:0; pointer-events:none;
  /* dimensiona pela ALTURA: o poste é 3,5x mais alto que largo,
     definir por largura fazia ele estourar a seção e virar mancha */
  height:min(96vh,860px); width:auto;
  right:5%; top:-120px;
  transform:rotate(16deg);
  fill:var(--poste-grafico);
}
.hero__poste-vaza rect{ fill:var(--base); }
.hero__fotos > img{ position:relative; z-index:1; }

/* fotos desalinhadas + assentadas no fundo */
.hero__fotos > img{
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.hero__fotos > img:first-of-type{ margin-top:-58px; }
.hero__fotos > img:nth-of-type(2){ margin-top:34px; }
.hero__fotos > img:nth-of-type(3){ margin-top:34px; }

@media (max-width:860px){
  .hero__poste{ width:420px; right:-6%; top:-14%; opacity:.9; }
  .hero__fotos > img:first-of-type,
  .hero__fotos > img:nth-of-type(2),
  .hero__fotos > img:nth-of-type(3){ margin-top:0; }
}

/* ═══════════════════════════════════════════════
   SOBRE
   ═══════════════════════════════════════════════ */
.sobre{ background:var(--painel); }
.sobre__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,68px); align-items:center; }
.sobre__midia{
  position:relative; overflow:hidden; border-radius:4px;
  height:clamp(380px,50vw,560px);
  box-shadow:0 24px 60px rgba(0,0,0,.4);
}
/* a foto é mais alta que a moldura: a sobra é o que permite o parallax */
.sobre__foto{
  position:absolute; left:0; top:-12%; width:100%; height:124%;
  object-fit:cover; will-change:transform;
}
@media (max-width:800px){ .sobre__grid{ grid-template-columns:1fr; } }
.assina{ font-family:var(--display); font-size:1.15rem; margin-top:28px; }
.assina small{
  display:block; font-family:var(--sans); font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--vermelho); margin-top:6px;
}

/* ═══════════════════════════════════════════════
   SERVIÇOS
   ═══════════════════════════════════════════════ */
.servicos{ position:relative; overflow:hidden; }
.servicos__fundo{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:60% 46%;
  filter:blur(2px) saturate(.55) brightness(.75);
}
/* véu: opaco à esquerda para o texto ler, aberto à direita para a foto aparecer */
.servicos__veu{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(102deg,
    var(--base) 0%, var(--base) 36%,
    rgba(19,23,30,.96) 54%, rgba(19,23,30,.9) 76%, rgba(19,23,30,.84) 100%);
}
.servicos > .wrap{ position:relative; z-index:2; }

.servicos__topo{
  display:grid; grid-template-columns:1.4fr .6fr;
  gap:clamp(24px,4vw,56px); align-items:start;
}
.servicos__nota{
  border-left:1px solid var(--linha);
  padding-left:clamp(20px,2.4vw,32px);
  font-size:.95rem; color:rgba(237,241,246,.74);
}
.servicos__nota p{ margin-bottom:.9em; }

@media (max-width:980px){ .servicos__topo{ grid-template-columns:1fr; }
  .servicos__nota{ border-left:0; border-top:1px solid var(--linha); padding:20px 0 0; } }

@media (min-width:1280px){
  /* a coluna já é só uma fração da largura, mas trava numa largura de
     leitura mesmo assim — senão vira parágrafo corrido larguíssimo */
  .servicos__nota{ max-width:var(--leitura); }
}

/* ═══════════════════════════════════════════════
   GALERIA
   ═══════════════════════════════════════════════ */
.galeria{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.galeria .foto{ aspect-ratio:1/1; }
.galeria .foto:nth-child(4n+2){ background:#16345f; }
.galeria .foto:nth-child(4n+3){ background:#22497f; }
@media (max-width:760px){ .galeria{ grid-template-columns:repeat(2,1fr); } }

/* ═══════════════════════════════════════════════
   PREÇOS
   ═══════════════════════════════════════════════ */
.precos{ background:var(--painel); position:relative; overflow:hidden; }
/* na emenda com o Agendamento caíam dois paddings cheios seguidos, o que
   abria um vão grande demais: os dois lados dessa junta cedem um pouco */
.precos{ padding-bottom:calc(var(--padding-secao) * .62); }
/* leve vinheta: escurece as pontas e dá profundidade aos cartões */
.precos::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 40%, transparent, rgba(13,16,22,.55));
}
.precos > .wrap{ position:relative; z-index:1; }

/* ── cabeçalho ── */
.precos__cabecalho{ position:relative; }
.precos__titulo{ text-transform:uppercase; letter-spacing:-.005em; }
.precos__titulo em{ font-style:normal; color:var(--vermelho); }

/* brilhos discretos ao redor do título */
/* o subtítulo herda o teto de 52ch do .lead e quebrava em duas linhas */
.precos__cabecalho .lead{ max-width:74ch; }

.precos__brilho{
  position:absolute; width:22px; height:22px; fill:var(--tinta);
  opacity:.7; pointer-events:none;
}
.precos__brilho--1{ top:32%; left:13%; width:16px; height:16px; opacity:.5; }
.precos__brilho--2{ top:24%; right:18%; }
@media (max-width:720px){ .precos__brilho{ display:none; } }

/* ── ornamento: dois fios com um losango no meio ── */
.ornamento{ display:flex; align-items:center; justify-content:center; gap:14px; max-width:360px; margin:14px auto 0; }
.ornamento::before,
.ornamento::after{ content:''; height:1px; flex:1; }
.ornamento::before{ background:linear-gradient(to right, transparent, var(--linha)); }
.ornamento::after{ background:linear-gradient(to left, transparent, var(--linha)); }
.ornamento__losango{ width:7px; height:7px; flex:none; background:var(--vermelho); transform:rotate(45deg); }

/* ── cartões ── */
.tabela{ display:grid; grid-template-columns:1fr 1fr; gap:12px 40px; margin:30px auto 0; max-width:1360px; }
.item{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:16px;
  padding:13px 20px;
  background:rgba(255,255,255,.022);
  border:1px solid var(--linha); border-radius:12px;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
/* fio vermelho na borda esquerda */
.item::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--vermelho); opacity:.5;
}
.item:hover{ border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.045); transform:translateY(-2px); }

/* o medalhão é o que define a altura do cartão: ele é mais alto que o
   par nome+descrição, então mexer aqui é o que realmente encolhe a linha */
.item__icone{
  width:44px; height:44px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.03); border:1px solid var(--linha);
}
/* PNG como imagem mesmo, e não como máscara CSS: mask-image exige CORS
   e em file:// (duplo clique no index.html) a origem é "null", então a
   máscara seria bloqueada e o ícone sumiria. Os arquivos já vêm no
   vermelho da marca, então o resultado é o mesmo. */
.item__glifo{ width:23px; height:23px; object-fit:contain; }

.item__info{ min-width:0; }
.item__nome{ display:block; font-weight:700; }
.item__desc{ display:block; font-size:.84rem; color:rgba(237,241,246,.6); }
.item__pont{ flex:1; min-width:18px; border-bottom:1px dotted var(--linha); }
.item__valor{
  display:flex; align-items:baseline; gap:5px; flex:none;
  font-family:var(--display); font-size:1.55rem; white-space:nowrap;
}
.item__moeda{ font-size:.8rem; color:var(--vermelho); }

/* destaque: borda inteira acesa e preço em vermelho */
.item--destaque{ border-color:rgba(228,84,74,.5); background:rgba(228,84,74,.055); }
.item--destaque::before{ opacity:1; }
.item--destaque:hover{ border-color:rgba(228,84,74,.75); background:rgba(228,84,74,.08); }
.item--destaque .item__valor{ color:var(--vermelho); }
.item--destaque .item__moeda{ color:rgba(228,84,74,.75); }

.tag{ display:inline-block; font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; background:var(--vermelho); color:#fff; padding:2px 7px; border-radius:2px; margin-left:8px; vertical-align:middle; }

@media (max-width:720px){
  .tabela{ grid-template-columns:1fr; }
  .item{ padding:14px 16px; gap:13px; }
  .item__icone{ width:42px; height:42px; }
  .item__glifo{ width:20px; height:20px; }
  .item__valor{ font-size:1.35rem; }
}

/* ═══════════════════════════════════════════════
   AGENDA
   ═══════════════════════════════════════════════ */
.agenda{
  position:relative; overflow:hidden;
  color:var(--branco);
  background:var(--azul-fundo); /* reserva, se o gradiente não pintar */
  background:radial-gradient(125% 125% at 50% 10%, var(--base) 40%, var(--azul) 100%);
}
.agenda{ padding-top:calc(var(--padding-secao) * .62); }
.agenda > .wrap{ position:relative; z-index:1; }
.agenda .olho{ color:var(--vermelho-claro); }

/* o teto de 52ch do .lead quebrava o subtítulo em duas linhas */
.agenda .lead{ color:rgba(255,255,255,.82); max-width:80ch; }

/* orbes: as duas cores do poste, bem difusas */
.agenda__orbe{
  position:absolute; border-radius:50%; pointer-events:none;
  filter:blur(70px); z-index:0;
}
/* ficam FOLGADOS das bordas: encostados, o overflow:hidden da seção
   cortava o desfoque no meio e deixava uma borda reta visível */
.agenda__orbe--1{ width:clamp(240px,32vw,440px); aspect-ratio:1; background:rgba(47,95,179,.42); top:9%;    left:6%; }
.agenda__orbe--2{ width:clamp(220px,28vw,380px); aspect-ratio:1; background:rgba(228,84,74,.22); bottom:9%; right:5%; }

/* ── caixa em vidro ── */
.agenda__caixa{
  position:relative;
  background:rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
          backdrop-filter:blur(18px) saturate(1.25);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  padding:clamp(22px,3.4vw,34px); margin-top:34px;
  /* o inset claro no topo é o que dá a "quina" de vidro */
  box-shadow:0 22px 55px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.1);
}
@media (min-width:1280px){
  /* formulário de 4 campos não precisa da largura de conteúdo inteira */
  .agenda__caixa{ max-width:880px; margin-inline:auto; }
}
.campo{ margin-bottom:24px; }
/* Barbeiro e Dia lado a lado: economiza uma linha inteira de campo */
@media (min-width:900px){
  .campo__par{ display:grid; grid-template-columns:1fr 1fr; gap:0 32px; }
}
.campo>label{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:12px; }
.resumo{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  border-top:1px solid rgba(255,255,255,.12); padding-top:22px; margin-top:0;
}
/* o botão de envio acompanha o raio dos chips */
.agenda__caixa .btn{ border-radius:12px; }
.agenda__caixa .btn--claro{ box-shadow:0 10px 26px rgba(0,0,0,.28); }
.resumo__txt{ font-size:.95rem; color:rgba(255,255,255,.8); }
.resumo__txt b{ color:var(--branco); }

/* ═══════════════════════════════════════════════
   CONTATO
   ═══════════════════════════════════════════════ */
.contato__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px); align-items:start; }
.mapa{ height:clamp(280px,38vw,400px); border-radius:3px; }
.info{ list-style:none; margin:32px 0 0; padding:0; }
.info li{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--linha); }
.info svg{ width:19px; height:19px; stroke:var(--vermelho); fill:none; stroke-width:1.7; flex:none; margin-top:4px; }
.info b{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(237,241,246,.6); }
.horarios{ font-variant-numeric:tabular-nums; }
@media (max-width:800px){ .contato__grid{ grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════
   RODAPÉ
   ═══════════════════════════════════════════════ */
.rodape{ background:var(--fundo); color:rgba(255,255,255,.8); padding-block:56px 32px; }
.rodape__topo{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:28px; align-items:center; }
.rodape .marca__txt{ color:var(--branco); }
.rodape .marca__txt small{ color:var(--vermelho-claro); }
.rodape .marca__poste{ border-color:rgba(255,255,255,.55); }
.rodape__links{ display:flex; flex-wrap:wrap; gap:22px; list-style:none; margin:0; padding:0; }
.rodape__links a{ font-size:.83rem; text-decoration:none; color:rgba(255,255,255,.8); }
.rodape__links a:hover{ color:var(--branco); }
.rodape__base{ margin-top:36px; padding-top:22px; border-top:1px solid rgba(255,255,255,.2); font-size:.78rem; color:rgba(255,255,255,.62); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; }