/* ==========================================================================
   Furadouro SPA — Versão 3.0.1 F5 · faixa (tablet e telemóvel, < 1080 px)
   A «janela» da 3.0 em horizontal, por baixo do cabeçalho e do trilho (assets/faixa.js, marcação em inc/pagina-reserva.php).
   - Vitrine de 10 s (fusão por opacidade), botão «seguinte», barras finas de progresso; com um tratamento fixado na lista
     mostra a fotografia dele, «duração · preço» e a mini-ficha (zona, pressão).
   - Altura FIXA por estado (reserva o espaço: sem layout shift) e contida:
       dia / consulta guiada   clamp(7.5rem, min(38vw, 24vh), 16rem)    (320×640 = 7,5 rem · 390×844 = 148 px · 768×1024 = 246 px)
       lista de tratamentos    clamp(7rem,   min(26vw, 17vh), 10rem)    PREGADA ao topo (position: sticky), para se ver o que se fixa
       conversa (hora, dados)  clamp(6rem,   min(20vw, 12vh),  9rem)    só com ecrã com 760 px de altura ou mais
       final da marcação       fora de cena (como a janela em final-v3.css) · ecrãs com menos de 520 px de altura: escondida
   - Contrato com o telemóvel (Inspetor Visual): body.com-faixa, body.faixa-fixa, :root --faixa-altura e --faixa-topo
     (definidos por assets/faixa.js; ver CLAUDE.md). Aqui só ficam valores de recuo.
   Só opacity/transform a mexer; hover só com (hover: hover) and (pointer: fine); prefers-reduced-motion.
   ========================================================================== */

:root { --faixa-altura: 0px; --faixa-topo: 0px; }

/* no computador a faixa não existe (a janela fixa à direita é a outra metade) */
.faixa { display: none; }

@media (max-width: 1079px) {
  /* quando a faixa está pregada, o que ganha foco por teclado não fica escondido por baixo dela */
  :root { scroll-padding-top: calc(var(--faixa-topo) + 0.75rem); }

  /* «Ver todos os tratamentos» faz scrollIntoView em #lista-servicos (guia.js) e a faixa pregada tapava o título e o seletor
     Individual / A dois; --faixa-topo ainda é 0px no instante do scroll, por isso usa-se --faixa-altura (F5-1, Inspetor). */
  #lista-servicos { scroll-margin-top: calc(var(--faixa-altura, 0px) + 12px); }

  body.site-publico .faixa {
    --fx-h: clamp(7.5rem, min(38vw, 24vh), 16rem);
    display: block;
    position: relative;
    z-index: 5;
    box-sizing: border-box;
    height: var(--fx-h);
    width: min(100% - 2.5rem, var(--contentor, 1240px));
    margin: 1rem auto 0;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--pinho-escuro), var(--pinho));
    color: #fff;
    isolation: isolate;
    box-shadow: 0 14px 28px -22px rgba(31, 55, 45, 0.7);
  }
  body.site-publico .faixa[data-estado="guia"] { --fx-h: clamp(7.5rem, min(38vw, 24vh), 16rem); }
  body.site-publico .faixa[data-estado="lista"] {
    --fx-h: clamp(7rem, min(26vw, 17vh), 10rem);
    position: sticky;
    top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0.6rem;
  }
  body.site-publico .faixa[data-estado="conv"] { --fx-h: clamp(6rem, min(20vw, 12vh), 9rem); }
  body.site-publico .faixa[data-estado="fim"],
  body.site-publico:has(#passo-sucesso:not(.oculto)) .faixa,
  body.site-publico:has(#circ-sucesso:not(.oculto)) .faixa { display: none; }
  body.site-publico .faixa [hidden] { display: none !important; }

  .faixa-viva { position: absolute; inset: 0; touch-action: pan-y; }

  /* ---------- fotografias: a nova entra por cima, por opacidade ---------- */
  .faixa-cenas, .faixa-vinheta { position: absolute; inset: 0; }
  .faixa-cenas { z-index: 0; }                 /* contexto próprio: o z-index das cenas (cresce a cada troca) não passa por cima da legenda */
  .faixa-vinheta { z-index: 1; }
  .faixa-cena { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease, ease); }
  .faixa-cena.vis { opacity: 1; }
  .faixa-cena img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .faixa-vinheta {
    pointer-events: none;
    background: linear-gradient(to top, rgba(10, 20, 15, 0.86) 0%, rgba(10, 20, 15, 0.5) 48%, rgba(10, 20, 15, 0.2) 100%);
  }

  /* ---------- legenda ---------- */
  .faixa-leg {
    position: absolute;
    z-index: 2;
    left: 1rem;
    right: 4.25rem;
    bottom: 1.3rem;
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    transition: opacity 0.22s var(--ease-out, ease);
  }
  .faixa-leg.troca { opacity: 0; }
  .faixa-leg small { font: 600 0.75rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ouro-claro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .faixa-leg b { font: 400 clamp(1.3rem, 5.4vw, 1.9rem)/1.12 var(--serif); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
  .faixa-leg em { font: 400 0.9375rem/1.35 var(--sans); font-style: normal; color: rgba(255, 255, 255, 0.9); font-variant-numeric: lining-nums tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .faixa[data-estado="conv"] .faixa-leg small { display: none; }
  .faixa[data-estado="conv"] .faixa-leg { bottom: 0.9rem; }
  .faixa[data-estado="lista"] .faixa-leg { bottom: 0.95rem; }
  .faixa[data-estado="lista"] .faixa-leg b { font-size: clamp(1.2rem, 4.6vw, 1.55rem); }
  .faixa[data-estado="lista"] .faixa-viva.vit .faixa-leg small { display: none; }

  /* ---------- mini-ficha do tratamento (zona, pressão) ---------- */
  .faixa-ficha {
    position: absolute;
    z-index: 2;
    top: 0.6rem;
    left: 1rem;
    right: 3.75rem;
    display: flex;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: opacity 0.3s var(--ease-out, ease);
  }
  .faixa-ficha:not(.tem) { display: none; }
  .faixa-ficha.troca { opacity: 0; }
  .faixa-ficha li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 1 auto;
    min-width: 0;
    min-height: 1.75rem;
    padding: 0.1rem 0.7rem;
    border-radius: var(--raio-pilula);
    background: rgba(15, 26, 21, 0.62);
    border: 1px solid rgba(248, 243, 232, 0.32);
    font: 600 0.75rem/1.3 var(--sans);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .faixa-ficha .fk { font-weight: 500; opacity: 0.82; text-transform: uppercase; letter-spacing: 0.1em; flex: none; margin-right: -0.15rem; }
  .faixa-ficha .fv { overflow: hidden; text-overflow: ellipsis; }
  .faixa-ficha .fp { display: inline-flex; align-items: flex-end; gap: 2px; height: 0.9rem; flex: none; }
  .faixa-ficha .fp i { width: 4px; border-radius: 1px; background: rgba(255, 255, 255, 0.3); }
  .faixa-ficha .fp i.on { background: var(--ouro); }
  .faixa-ficha .fp i:nth-child(1) { height: 36%; }
  .faixa-ficha .fp i:nth-child(2) { height: 68%; }
  .faixa-ficha .fp i:nth-child(3) { height: 100%; }

  /* ---------- progresso (barras finas) e botão «seguinte» ---------- */
  .faixa-pv { position: absolute; z-index: 2; left: 1rem; right: 4.25rem; bottom: 0.6rem; display: flex; gap: 4px; }
  .faixa-pv i { position: relative; flex: 1 1 0; min-width: 0; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.34); }
  .faixa-pv b { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
  .faixa-pv .f b { transform: scaleX(1); }
  .faixa-pv .a b { animation: faixa-prog 10s linear forwards; }
  .faixa-viva.pausa .faixa-pv .a b { animation-play-state: paused; }
  @keyframes faixa-prog { to { transform: scaleX(1); } }

  .faixa-seg {
    position: absolute;
    z-index: 3;
    right: 0.5rem;
    bottom: 0.5rem;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    background: rgba(15, 26, 21, 0.45);
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.16s var(--ease-out, ease), background 0.3s var(--ease-out, ease);
  }
  .faixa-seg .ico-seta { font-size: 1.15rem; }
  .faixa-seg:active { transform: scale(0.94); background: rgba(15, 26, 21, 0.7); }
  .faixa-seg:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .faixa-viva:not(.vit) .faixa-seg, .faixa-viva:not(.vit) .faixa-pv { display: none; }
  .faixa-viva:not(.vit) .faixa-leg { right: 1rem; }
  .faixa[data-estado="conv"] .faixa-pv { bottom: 0.5rem; }
}

/* ecrãs curtos (telemóvel em paisagem): a faixa sai, o calendário e a lista ficam com o ecrã */
@media (max-width: 1079px) and (max-height: 519px) {
  body.site-publico .faixa { display: none; }
}
/* na conversa só cabe se o ecrã for alto */
@media (max-width: 1079px) and (max-height: 759px) {
  body.site-publico .faixa[data-estado="conv"], body.site-publico.cv-ativo .faixa { display: none; }
}

@media (max-width: 719px) {
  body.site-publico .faixa { width: calc(100% - 2rem); border-radius: 16px; }
  body.site-publico .faixa[data-estado="lista"] { border-top-left-radius: 0; border-top-right-radius: 0; }
}

/* ---------- 3.0.2 A7 (F5-2): primeiro ecrã do telemóvel com o calendário ----------
   Telemóvel estreito (< 360 px) ou baixo (altura < 800 px, até 719 px de largura): a faixa fica COMPACTA e sem o «olho»
   FURADOURO SPA, e a abertura aperta, para o calendário (mês, dias da semana e as 2 primeiras semanas) caber no 1.º ecrã
   sem rolar (320×640 e 360×740, também com o cartão da promoção). Alturas: dia / consulta guiada 6 rem = 96 px (antes 122 a
   320×640, 137 a 360×740); lista (pregada) 5,75 rem = 92 px (antes 112); conversa não muda (já só com altura ≥ 760 px).
   O faixa.js continua a medir --faixa-altura / --faixa-topo (valores abaixo no CLAUDE.md). */
@media (max-width: 359px), (max-width: 719px) and (max-height: 799px) {
  body.site-publico .faixa, body.site-publico .faixa[data-estado="guia"] { --fx-h: 6rem; margin-top: 0.75rem; }
  body.site-publico .faixa[data-estado="lista"] { --fx-h: 5.75rem; }
  .faixa[data-estado="dia"] .faixa-leg small, .faixa[data-estado="guia"] .faixa-leg small { display: none; }
  .faixa[data-estado="dia"] .faixa-leg, .faixa[data-estado="guia"] .faixa-leg { bottom: 1.15rem; }
  .faixa[data-estado="dia"] .faixa-leg b, .faixa[data-estado="guia"] .faixa-leg b { font-size: 1.2rem; }
  .faixa[data-estado="dia"] .faixa-leg em, .faixa[data-estado="guia"] .faixa-leg em { font-size: 0.875rem; }
  .faixa[data-estado="lista"] .faixa-leg { bottom: 0.8rem; }
  .faixa[data-estado="lista"] .faixa-ficha { top: 0.45rem; }
  /* abertura e passo do dia mais baixos (a especificidade vence o bloco ≤ 719 px de publico.css sem o tocar) */
  body.site-publico.com-faixa .abertura { padding-top: 0.9rem; padding-bottom: 0.25rem; }
  body.site-publico.com-faixa .abertura h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  body.site-publico.com-faixa .abertura-sub { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.45; }
  body.site-publico.com-faixa #passo-dia { margin-top: 0.6rem; padding-top: 0.85rem; padding-bottom: 1.2rem; }
  body.site-publico.com-faixa #passo-dia h2 { font-size: 1.35rem; margin-bottom: 0.7rem; }
  body.site-publico.com-faixa #passo-dia .cal-nav { margin-bottom: 0.45rem; }
  body.site-publico.com-faixa #passo-dia .cal-cabecalho { padding-bottom: 0.3rem; }
  body.site-publico.com-faixa #passo-dia .cal-dia { min-height: 46px; }
  body.site-publico.com-faixa #passo-dia .cal-grelha { min-height: 0; }
}
/* 320×640 com o cartão da promoção: o texto de apoio da abertura sai (as horas livres aparecem no passo da hora; sem promoção o texto mantém-se) */
@media (max-height: 699px) and (max-width: 719px) {
  body.site-publico.com-faixa.com-promo-t .abertura-sub { display: none; }
}

@media (hover: hover) and (pointer: fine) {
  .faixa-seg:hover { background: rgba(15, 26, 21, 0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .faixa-cena { transition: opacity 0.25s linear; }
  .faixa-leg, .faixa-ficha, .faixa-seg { transition: none; }
  .faixa-pv .a b { animation: none; transform: scaleX(1); }
}