/* ============================================================
   Rede Caxuxa Triângulo — redecaxuxatriangulo.com.br
   CSS único, sem framework. Mobile-first.
   ============================================================ */

/* ── tokens ────────────────────────────────────────────── */
:root{
  --amarelo:#fdd506;
  --amarelo-esc:#e0bc00;
  --vermelho:#ef3036;
  --vermelho-esc:#c9252a;
  --tinta:#141414;
  --tinta-2:#3d3d3d;
  --apagado:#6b6b6b;
  --linha:#e5e7eb;
  --fundo:#ffffff;
  --fundo-2:#f8f9fa;
  --raio:16px;
  --raio-s:10px;
  --larg:1400px;
  --fonte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --sombra:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
}

/* ── reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--fonte);
  font-size:16px;
  line-height:1.6;
  color:var(--tinta);
  background:var(--fundo);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
img,picture,svg{display:block;max-width:100%}
img{height:auto}

/* <picture> é uma caixa de verdade no layout. Sem altura declarada nela, o
   height:100% da <img> não resolve e o object-fit passa a recortar a partir
   do tamanho natural do arquivo — foi o que quebrou os banners verticais.
   Onde houver recorte, a picture preenche o pai. */
.banner__quadro picture,
.cartao picture,
.dupla__foto picture{width:100%;height:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--vermelho);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--larg);margin-inline:auto;padding-inline:20px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--vermelho);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:700;
}
.skip:focus{left:0}

/* ── marca (logotipo em texto) ─────────────────────────── */
.marca{
  display:inline-grid;
  grid-template-columns:auto;
  justify-items:start;
  line-height:1;
  color:var(--tinta);
}
.marca__rede{
  display:flex;align-items:center;gap:5px;
  font-size:.66rem;font-weight:700;letter-spacing:.18em;
}
.marca__losango{
  width:8px;height:8px;background:var(--vermelho);
  transform:rotate(45deg);border-radius:1px;flex:0 0 auto;
}
.marca__nome{
  font-size:1.85rem;font-weight:800;letter-spacing:-.015em;margin-top:3px;
}
.marca__tri{
  font-size:.72rem;font-weight:700;letter-spacing:.30em;color:var(--vermelho);
  margin-top:2px;align-self:end;justify-self:end;
}
@media (min-width:768px){
  .marca__rede{font-size:.72rem}
  .marca__nome{font-size:2.15rem}
  .marca__tri{font-size:.8rem}
}

/* ── topo ──────────────────────────────────────────────── */
.topo{
  background:var(--amarelo);
  border-bottom:1px solid var(--amarelo-esc);
  position:sticky;top:0;z-index:50;
}
/* Vermelho puro sobre esse amarelo dá 2,86:1 e vibra. No cabeçalho o
   logotipo usa o tom escuro (3,89:1); no rodapé, fundo claro, fica o
   vermelho da marca. */
.topo .marca__tri,
.topo .marca__losango{color:var(--vermelho-esc)}
.topo .marca__losango{background:var(--vermelho-esc)}
.topo__in{display:flex;align-items:center;justify-content:center;min-height:76px;padding-block:12px}
@media (min-width:768px){.topo__in{min-height:88px}}

/* ── banners ───────────────────────────────────────────── */
.banner{background:var(--fundo)}
/* Os banners sangram de ponta a ponta: a arte tem borda dura na direita e
   qualquer respiro lateral deixa o corte à mostra. */
.banner__quadro{
  position:relative;
  width:100%;
  margin-inline:auto;
  overflow:hidden;
}
.banner__quadro img{width:100%;height:100%;object-fit:cover}

.banner--hero .banner__quadro{aspect-ratio:400/500;background:#f1f1f1}
.banner--frota .banner__quadro{aspect-ratio:400/600;background:#1a1a1a}
/* A foto da lavanderia só existe em 648px de largura. Em tela cheia ela
   esticaria quase 3x e ficaria borrada, então essa faixa fica limitada. */
.banner--lavanderia{padding-inline:20px}
.banner--lavanderia .banner__quadro{
  aspect-ratio:400/460;background:#efece7;
  max-width:1040px;border-radius:var(--raio);
}
.banner--lavanderia .banner__quadro img{object-position:center 32%}

@media (min-width:768px){
  .banner--hero .banner__quadro{aspect-ratio:1296/560}
  .banner--frota .banner__quadro{aspect-ratio:1296/725}
  .banner--lavanderia .banner__quadro{aspect-ratio:1296/620}
}

/* áreas clicáveis sobre os botões que estão desenhados dentro da imagem */
.hotspot{
  position:absolute;
  border-radius:999px;
  transition:box-shadow .18s ease;
}
.hotspot:hover{box-shadow:0 0 0 3px rgba(255,255,255,.55),0 8px 22px rgba(0,0,0,.28)}
.hotspot:focus-visible{outline:3px solid #fff;outline-offset:2px}

.hotspot--rota{left:6.2%;top:81.4%;width:26.5%;height:8.6%}
.hotspot--conta{left:8.6%;top:70.2%;width:44.5%;height:6.8%}
@media (min-width:768px){
  .hotspot--rota{left:6.2%;top:67.6%;width:13%;height:9.4%}
  .hotspot--conta{left:5.1%;top:63.2%;width:23%;height:7.4%}
}

/* ── carrossel (base, scroll-snap nativo) ──────────────── */
.carrossel{position:relative}
.carrossel__viewport{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.carrossel__viewport::-webkit-scrollbar{display:none}
.carrossel__trilho{display:flex;gap:16px}
.carrossel__item{flex:0 0 auto;scroll-snap-align:center}

.carrossel__ctrl{
  display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;
}
.carrossel__ctrl--centro{gap:8px}

.seta{
  width:42px;height:42px;flex:0 0 auto;
  display:grid;place-items:center;
  border:1px solid var(--linha);border-radius:999px;background:#fff;
  box-shadow:var(--sombra);
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.seta:hover{background:var(--vermelho);border-color:var(--vermelho);transform:translateY(-1px)}
.seta:hover svg{stroke:#fff}
.seta svg{width:20px;height:20px;fill:none;stroke:var(--tinta);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:600px){.seta{display:none}}

.pontos{display:flex;align-items:center;gap:8px}
.ponto{
  width:10px;height:10px;border-radius:999px;background:#d4d4d8;
  transition:width .3s ease,background .3s ease;
}
.ponto[aria-selected="true"]{width:30px;background:var(--vermelho)}

/* ── serviços ──────────────────────────────────────────── */
.servicos{padding-block:44px}
@media (min-width:768px){.servicos{padding-block:64px}}

.servicos .carrossel__item:first-child{margin-inline-start:max(20px,calc((100% - 270px)/2))}
.servicos .carrossel__item:last-child{margin-inline-end:max(20px,calc((100% - 270px)/2))}
@media (min-width:768px){
  .servicos .carrossel__item:first-child{margin-inline-start:max(20px,calc((100% - 640px)/2))}
  .servicos .carrossel__item:last-child{margin-inline-end:max(20px,calc((100% - 640px)/2))}
}

.cartao{
  position:relative;overflow:hidden;
  border-radius:var(--raio);
  box-shadow:var(--sombra);
  width:270px;height:400px;
  background:#eee;
}
@media (min-width:768px){.cartao{width:640px;height:400px}}
.cartao img{width:100%;height:100%;object-fit:cover}
.cartao::after{
  content:"";position:absolute;inset:0;background:rgba(0,0,0,.2);
  opacity:1;transition:opacity .5s ease;pointer-events:none;
}
.carrossel__item[data-ativo] .cartao::after{opacity:0}

/* ── estrutura ─────────────────────────────────────────── */
.estrutura{padding-block:52px;background:var(--fundo)}
@media (min-width:768px){.estrutura{padding-block:88px}}

.carrossel__trilho--cheio{gap:0}
.carrossel__item--cheio{width:100%;scroll-snap-align:start}

.dupla{display:flex;flex-direction:column;gap:32px}
@media (min-width:900px){
  .dupla{flex-direction:row;align-items:center;gap:64px}
  .dupla__texto,.dupla__foto{width:50%}
}
.dupla__texto{text-align:center}
@media (min-width:900px){.dupla__texto{text-align:left}}
.dupla__texto h3{
  font-size:clamp(1.75rem,5vw,3rem);
  font-weight:800;line-height:1.1;letter-spacing:-.02em;
  color:var(--tinta);
}
.dupla__texto p{
  margin-top:20px;font-size:1.0625rem;color:var(--apagado);max-width:36em;
}
@media (min-width:900px){.dupla__texto p{font-size:1.125rem}}

.dupla__foto{
  border-radius:24px;overflow:hidden;background:#f1f1f1;
  height:340px;
}
@media (min-width:768px){.dupla__foto{height:480px}}
@media (min-width:1200px){.dupla__foto{height:560px}}
.dupla__foto img{width:100%;height:100%;object-fit:cover}

/* ── unidades ──────────────────────────────────────────── */
/* O cabeçalho é fixo: sem esta margem ele cobre o título quando alguém
   chega aqui por âncora (#unidades ou #posto-xxx). */
.unidades{padding-block:52px;background:var(--fundo-2);border-top:1px solid var(--linha);scroll-margin-top:96px}
@media (min-width:768px){.unidades{padding-block:80px}}
.unidades__titulo{
  font-size:clamp(1.6rem,4.5vw,2.5rem);font-weight:800;letter-spacing:-.02em;text-align:center;
}
.unidades__sub{
  margin-top:10px;text-align:center;color:var(--apagado);max-width:52ch;margin-inline:auto;
}
.unidades__lista{
  margin-top:36px;display:grid;gap:16px;
  grid-template-columns:1fr;
}
@media (min-width:820px){.unidades__lista{grid-template-columns:repeat(2,1fr)}}

.posto{
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  padding:22px;box-shadow:var(--sombra);
  scroll-margin-top:110px;
}
.posto__topo{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.posto__nome{font-size:1.15rem;font-weight:800;letter-spacing:-.01em;width:100%}
@media (min-width:520px){.posto__nome{width:auto;margin-right:4px}}
.tag{
  font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;white-space:nowrap;
}
.tag--shell{background:#fff4d6;color:#8a6100}
.tag--ipiranga{background:#e4ecff;color:#1f4396}
.tag--branca{background:#eef0f2;color:#4a5157}
.tag--24h{background:#ffe6e7;color:var(--vermelho-esc)}

.posto__end{margin-top:10px;color:var(--tinta-2)}
.posto__hora{margin-top:2px;color:var(--apagado);font-size:.94rem}

.posto__acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 16px;border-radius:999px;
  font-size:.9rem;font-weight:700;
  border:1px solid transparent;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--zap{background:var(--vermelho);color:#fff}
.btn--zap:hover{background:var(--vermelho-esc)}
.btn--mapa{background:#fff;color:var(--tinta);border-color:var(--linha)}
.btn--mapa:hover{border-color:var(--tinta);}

.posto__mais{margin-top:16px;border-top:1px solid var(--linha);padding-top:14px}
.posto__mais summary{
  cursor:pointer;font-weight:700;font-size:.92rem;color:var(--vermelho-esc);
  list-style:none;display:flex;align-items:center;gap:8px;
}
.posto__mais summary::-webkit-details-marker{display:none}
.posto__mais summary::before{
  content:"";width:8px;height:8px;flex:0 0 auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;
}
.posto__mais[open] summary::before{transform:rotate(-135deg) translateY(-2px)}
.posto__grid{display:grid;gap:14px;margin-top:14px}
.posto__grid h4{
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--apagado);
}
.posto__grid p{font-size:.92rem;color:var(--tinta-2);margin-top:3px}

/* ── rodapé ────────────────────────────────────────────── */
.rodape{background:var(--fundo);border-top:1px solid var(--linha);padding-top:56px;padding-bottom:28px}
.rodape__in{
  display:flex;flex-direction:column;align-items:center;gap:40px;
  max-width:1040px;text-align:center;
}
@media (min-width:768px){
  .rodape__in{flex-direction:row;justify-content:space-between;align-items:flex-start;text-align:left}
}
.rodape__marca{display:flex;flex-direction:column;align-items:center;gap:20px}
@media (min-width:768px){.rodape__marca{align-items:flex-start}}
.marca--rodape{pointer-events:none}

.sociais{display:flex;gap:12px}
.sociais a{
  display:grid;place-items:center;width:40px;height:40px;
  background:#fff;border:1px solid var(--linha);border-radius:999px;color:var(--vermelho);
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.sociais a:hover{background:var(--vermelho);color:#fff;transform:translateY(-2px)}
.sociais svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}

.rodape__nav{display:flex;flex-direction:column;align-items:center;gap:14px}
@media (min-width:768px){.rodape__nav{align-items:flex-end}}
.rodape__h{font-size:1.05rem;font-weight:800;color:var(--tinta)}
.rodape__nav ul{display:flex;flex-direction:column;gap:8px}
.rodape__nav a{color:var(--apagado);transition:color .16s ease}
.rodape__nav a:hover{color:var(--vermelho)}

.rodape__base{
  margin-top:44px;padding-top:26px;border-top:1px solid var(--linha);
  max-width:1040px;text-align:center;font-size:.86rem;color:var(--apagado);
}
.rodape__base p+p{margin-top:4px}

/* ── acessibilidade: movimento reduzido ────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}