/* ═══════════════════════════════════════════════
   O POSTE — elemento assinatura
   ═══════════════════════════════════════════════ */
.poste{
  background:repeating-linear-gradient(
    45deg,
    var(--vermelho) 0 12px,
    #FFFFFF        12px 24px,
    var(--azul)    24px 36px,
    #FFFFFF        36px 48px
  );
  animation:girar 2.4s linear infinite;
}

/* poste sobre fundo escuro: azul e vermelho clareados para não sumir */
.poste--claro{
  background:repeating-linear-gradient(
    45deg,
    var(--vermelho-claro) 0 12px,
    #FFFFFF              12px 24px,
    var(--azul-claro)    24px 36px,
    #FFFFFF              36px 48px
  );
}

.rail{
  position:fixed; left:0; top:0; bottom:0;
  width:var(--rail); z-index:60;
  border-right:1px solid rgba(255,255,255,.16);
}
.faixa{ height:10px; border-block:1px solid rgba(255,255,255,.12); }

/* ═══════════════════════════════════════════════
   OLHO — etiqueta acima dos títulos
   ═══════════════════════════════════════════════ */
.olho{
  font-size:.72rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--vermelho);
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.olho::before{
  content:''; width:38px; height:14px; flex:none;
  background-color:currentColor;
  -webkit-mask:var(--bigode) center/contain no-repeat;
          mask:var(--bigode) center/contain no-repeat;
}
.olho.centro{ justify-content:center; }

/* ═══════════════════════════════════════════════
   BOTÕES
   ═══════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-size:.86rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  padding:15px 26px; border:2px solid var(--tinta); border-radius:2px;
  background:var(--tinta); color:var(--base);
  text-decoration:none; cursor:pointer;
  transition:transform .16s ease, background .16s ease, color .16s ease;
}
.btn:hover{ background:var(--vermelho); border-color:var(--vermelho); transform:translateY(-2px); }
.btn--vermelho{ background:var(--vermelho); border-color:var(--vermelho); }
.btn--vermelho:hover{ background:var(--tinta); border-color:var(--tinta); }
.btn--vazado{ background:transparent; color:var(--tinta); }
.btn--vazado:hover{ color:var(--branco); }
.btn--claro{ background:var(--branco); border-color:var(--branco); color:var(--base); }
.btn--claro:hover{ background:var(--vermelho); border-color:var(--vermelho); color:var(--branco); }
.btn[disabled]{ opacity:.4; pointer-events:none; }


/* ── botões em forma de gilete (só no herói) ── */
.btn--navalha{
  position:relative;
  padding:17px 52px;
  border-color:transparent;
  /* cantos chanfrados: a gilete não tem canto reto nem arredondado */
  clip-path:polygon(
    9px 0, calc(100% - 9px) 0, 100% 9px,
    100% calc(100% - 9px), calc(100% - 9px) 100%,
    9px 100%, 0 calc(100% - 9px), 0 9px
  );
  /* fio afiado nas duas bordas longas */
  box-shadow:inset 0 3px 0 rgba(0,0,0,.17), inset 0 -3px 0 rgba(0,0,0,.17);
}
/* os dois rasgos vazados do meio da lâmina */
.btn--navalha::before,
.btn--navalha::after{
  content:''; position:absolute; top:50%; transform:translateY(-50%);
  width:24px; height:9px; border-radius:99px;
  background:var(--base);
}
.btn--navalha::before{ left:14px; }
.btn--navalha::after{ right:14px; }
.btn--navalha:hover{ transform:translateY(-2px); }

.btn--aco{
  background:linear-gradient(160deg,#F4F7FA 0%,#C6CFD8 46%,#EAEFF4 62%,#AEB9C4 100%);
  color:var(--base);
}
.btn--aco:hover{ background:linear-gradient(160deg,#FFFFFF 0%,#D6DEE6 46%,#F4F7FA 62%,#BEC8D3 100%); }

@media (max-width:520px){
  .btn--navalha{ padding:16px 46px; }
  .btn--navalha::before{ left:11px; }
  .btn--navalha::after{ right:11px; }
}

/* ── chip do próximo horário livre ──────────────────────────── */
.proximo{
  display:none; align-items:center; gap:11px; margin-top:22px;
  background:rgba(255,255,255,.06); border:1px solid var(--linha);
  border-radius:999px; padding:9px 9px 9px 16px; cursor:pointer;
  font-family:var(--sans); font-size:.88rem; color:var(--tinta);
  transition:background .18s ease, border-color .18s ease;
}
.proximo.ativo{ display:inline-flex; }
.proximo:hover{ background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.28); }
.proximo b{ font-weight:700; }
.proximo__seta{
  width:26px; height:26px; border-radius:50%; background:var(--vermelho);
  display:grid; place-items:center; flex:none;
}
.proximo__seta svg{ width:13px; height:13px; stroke:#fff; fill:none; stroke-width:2.4; }

/* ═══════════════════════════════════════════════
   FOTOS (placeholders)
   ═══════════════════════════════════════════════ */
.foto{
  background:var(--azul);
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px);
  display:grid; place-items:center; overflow:hidden;
  object-fit:cover; width:100%; height:100%;
}
.foto:not(img)::after{
  content:attr(data-slot);
  font:700 10px/1 var(--sans); letter-spacing:.22em;
  color:rgba(255,255,255,.42); text-align:center; padding:8px;
}

/* ═══════════════════════════════════════════════
   REDES SOCIAIS
   ═══════════════════════════════════════════════ */
.rede{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  border:1.5px solid rgba(255,255,255,.22);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.rede svg{ width:17px; height:17px; fill:var(--tinta); }
.rede:hover{ background:var(--vermelho); border-color:var(--vermelho); transform:translateY(-2px); }
.rede:hover svg{ fill:#fff; }

/* ═══════════════════════════════════════════════
   CHIPS (usados na agenda)
   ═══════════════════════════════════════════════ */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  font-family:var(--sans); font-size:.88rem; font-weight:500;
  padding:11px 17px; border-radius:12px; cursor:pointer;
  color:var(--branco);
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);
  transition:background .22s ease, border-color .22s ease,
             transform .22s ease, box-shadow .22s ease;
}
.chip:hover{
  background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.42);
  transform:translateY(-2px);
}
.chip:active{ transform:translateY(0); }
.chip[aria-pressed="true"]{
  background:var(--vermelho); border-color:var(--vermelho);
  box-shadow:0 8px 20px rgba(228,84,74,.34);
}
.chip[aria-pressed="true"]:hover{ background:var(--vermelho); border-color:var(--vermelho); }
.chip.ocupado{ opacity:.3; text-decoration:line-through; cursor:not-allowed; }
.chip.ocupado:hover{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.18);
  transform:none;
}

/* ═══════════════════════════════════════════════
   CARDS de serviço
   ═══════════════════════════════════════════════ */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:clamp(36px,5vw,56px); }
.card{
  /* o padding lateral vira variável porque o rodapé precisa "furar" ele
     para a linha divisória atravessar o cartão de ponta a ponta */
  --card-pad:26px;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  background:rgba(25,31,41,.93); backdrop-filter:blur(10px);
  border:1px solid var(--linha); border-radius:16px;
  padding:30px var(--card-pad) 0; min-height:300px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.card:hover{
  transform:translateY(-4px); box-shadow:var(--sombra);
  background:rgba(32,39,51,.9); border-color:rgba(255,255,255,.2);
}

/* barra acesa na base, com brilho */
.card::before{
  content:''; position:absolute; left:0; right:0; bottom:0; top:auto;
  height:3px; background:var(--azul);
  box-shadow:0 0 18px 2px rgba(47,95,179,.55);
}
.card:nth-child(even)::before{ background:var(--vermelho); box-shadow:0 0 18px 2px rgba(228,84,74,.5); }

/* ícone fantasma, bem apagado, no canto superior direito.
   agora é silhueta cheia (PNG) e não contorno, então pede menos opacidade
   que os .04 do desenho anterior para pesar igual */
.card__marca{
  position:absolute; top:18px; right:-22px; width:150px; height:150px;
  object-fit:contain;
  opacity:.028; transform:rotate(-12deg); pointer-events:none;
}

.card__medalhao{
  width:64px; height:64px; border-radius:50%; flex:none;
  display:grid; place-items:center; margin-bottom:24px;
  border:1.5px solid var(--azul);
}
.card:nth-child(even) .card__medalhao{ border-color:var(--vermelho); }
.card .card__icone{ width:29px; height:29px; object-fit:contain; }

/* os PNGs vêm vermelhos: o filtro repinta na cor do cartão.
   ver os <filter> no topo do index.html */
.card__icone,
.card__marca{ filter:url(#tinta-azul); }
.card:nth-child(even) .card__icone,
.card:nth-child(even) .card__marca{ filter:url(#tinta-vermelha); }

.card h3{ font-size:1.55rem; font-family:var(--display); font-weight:400; }
.card__risco{ display:block; width:44px; height:3px; border-radius:2px; background:var(--azul); margin:14px 0 20px; }
.card:nth-child(even) .card__risco{ background:var(--vermelho); }
.card p{ font-size:.93rem; color:rgba(237,241,246,.72); flex:1; }

/* ── rodapé: preço à esquerda, seta à direita ── */
.card__rodape{
  margin-top:auto;
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  border-top:1px solid var(--linha);
  /* margem negativa = a divisória encosta nas duas bordas do cartão */
  margin-inline:calc(-1 * var(--card-pad));
  padding:20px var(--card-pad) 26px;
}
.card__label{
  display:block; font-family:var(--sans); font-size:.62rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(237,241,246,.5); margin-bottom:9px;
}
.card__preco{
  display:flex; align-items:baseline; gap:6px;
  font-family:var(--display); font-size:2rem; font-weight:400; line-height:1;
}
.card__moeda{ font-size:1.05rem; color:var(--azul); }
.card:nth-child(even) .card__moeda{ color:var(--vermelho); }

.card__seta{
  width:46px; height:46px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  border:1.5px solid var(--azul); color:var(--azul);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.card:nth-child(even) .card__seta{ border-color:var(--vermelho); color:var(--vermelho); }
.card__seta svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.card__seta:hover{ background:var(--azul); color:var(--branco); transform:translateX(3px); }
.card:nth-child(even) .card__seta:hover{ background:var(--vermelho); }

/* ── inclinação 3D + holofote (a matemática fica em js/animations.js) ──
   o cartão inclinado sobe na pilha para não passar por baixo do vizinho */
.card{ transform-style:preserve-3d; will-change:transform; }
.card.inclinado{ z-index:4; }

.card__brilho{
  position:absolute; inset:0; z-index:1; overflow:hidden;
  pointer-events:none; opacity:0; transition:opacity .3s ease;
}
.card.inclinado .card__brilho{ opacity:1; }
.card__brilho span{
  position:absolute; width:200%; height:200%; border-radius:50%;
  transform:translate(-50%,-50%); opacity:.5;
  background:radial-gradient(circle, rgba(255,255,255,.15) 0%, transparent 40%);
}

/* o holofote passa por cima do fundo e da marca d'água, mas por baixo do
   conteúdo — senão o texto lava quando o cursor passa em cima dele */
.card__marca{ z-index:0; }
.card__medalhao,
.card h3,
.card__risco,
.card p,
.card__rodape{ position:relative; z-index:2; }
.card::before{ z-index:3; }

@media (max-width:900px){ .cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){
  .cards{ grid-template-columns:1fr; }
  .card{ min-height:0; }
}

@media (min-width:1280px){
  /* mesma borda esquerda dos títulos/nota acima — só a direita "vaza"
     até a largura ampla, aproveitando o vazio que sobrava nas laterais */
  .cards{ margin-right:calc(-1 * var(--extra-ampla)); }
}
@media (min-width:1600px){
  .card{ --card-pad:34px; padding-top:40px; min-height:340px; }
}
@media (min-width:1920px){
  .card{ --card-pad:38px; padding-top:46px; min-height:360px; }
}

/* ═══════════════════════════════════════════════
   BOTÃO FLUTUANTE DO ZAP
   ═══════════════════════════════════════════════ */
.zap{
  position:fixed; right:18px; bottom:18px; z-index:70;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; display:grid; place-items:center;
  box-shadow:0 6px 22px rgba(0,0,0,.55);
  transition:transform .18s ease;
}
.zap:hover{ transform:scale(1.08); }
.zap svg{ width:29px; height:29px; fill:#fff; }