/* ==========================================================================
   Furadouro SPA — Versão 3.0 · promoção em destaque no passo do dia (computador, ≥ 1080 px)
   Componente isolado (assets/promocao-v3.js; marcação em inc/pagina-reserva.php).
   - Carimbo da promoção (3.0.2, versão A «selo de correio»; assets/carimbo-v3.*) no canto superior direito do título; botão que
     abre o detalhe. Antes era uma etiqueta pendurada de duas faces.
   - Painel de detalhe ancorado à etiqueta; ponto coral e realce nos dias do calendário em que a promoção vale.
   - Coral #b4562f só em fundos e pontos; texto pequeno coral sobre pergaminho usa #8e3f1f (≥ 4,5:1).
   Abaixo de 1080 px NADA aqui se aplica (tudo o que é novo está escondido por omissão e só aparece dentro de
   @media (min-width: 1080px)). Só transform/opacity nas animações contínuas; prefers-reduced-motion respeitado.
   ========================================================================== */

:root { --coral-esc: #8e3f1f; }

/* fora do computador estes elementos não existem */
.promo, .leg-promo, .promo-aviso { display: none; }

@media (min-width: 1080px) {
  /* a abertura passa a ancorar a etiqueta e fica acima do calendário (o detalhe abre por cima dele) */
  body.site-publico .abertura { position: relative; z-index: 5; }
  body.site-publico .abertura.tem-promo .abertura-sub { max-width: min(32rem, calc(100% - 8.5rem)); }

  .promo:not([hidden]) { display: block; position: absolute; z-index: 4; top: 0.35rem; right: 0; }

  /* ---------- carimbo (3.0.2, versão A «selo de correio»; assets/carimbo-v3.js desenha, aqui só se coloca) ---------- */
  .promo-etq {
    display: block;
    width: 128px;
    height: 128px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--coral-esc);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .promo-etq:focus-visible { outline: 2px solid var(--pinho); outline-offset: 4px; }
  .promo-etq .cv3-slot, .promo-etq .carimbo-v3 { display: block; }
  /* o botão é o alvo do clique; o carimbo só se vê (hover só com rato) */
  @media (hover: hover) and (pointer: fine) {
    .promo-etq .carimbo-v3 { transition: transform 0.35s var(--ease-out); }
    .promo-etq:hover .carimbo-v3 { transform: scale(1.04); }
  }

  /* ---------- detalhe (abre por cima do calendário, ancorado à etiqueta) ---------- */
  .promo-det {
    position: absolute;
    z-index: 8;
    top: calc(100% + 0.9rem);
    right: 0;
    width: 20rem;
    padding: 1.2rem 1.3rem 1.3rem;
    border-radius: var(--raio-cartao);
    background: var(--pergaminho);
    border: 1px solid var(--linha-solida);
    box-shadow: 0 30px 50px -28px rgba(31, 55, 45, 0.55);
    transform-origin: 80% 0;
  }
  .promo-det[hidden] { display: none; }
  body.site-publico .promo-det:focus, body.site-publico .promo-det:focus-visible { outline: none; }   /* o foco vai para o painel só para o leitor de ecrã o anunciar */
  .promo-det.abre { animation: promo-det-in 0.45s var(--ease-out) both; }
  @keyframes promo-det-in { from { opacity: 0; transform: translate3d(0, -8px, 0) scale(0.97); } to { opacity: 1; transform: none; } }
  .promo-det .det-k { margin: 0; font: 600 0.75rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-esc); }
  .promo-det .det-t { margin: 0.2rem 0 0.5rem; font: 400 1.5rem/1.1 var(--serif); color: var(--tinta); }
  .promo-det .det-t[hidden] { display: none; }
  .promo-det .det-k + .det-p { margin-top: 0.5rem; }
  .promo-det .det-p { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 0.7rem; font-family: var(--sans); font-variant-numeric: lining-nums tabular-nums; }
  .promo-det .det-p s { color: var(--tinta-suave); }
  .promo-det .det-p strong { font: 600 1.5rem var(--sans); color: var(--coral-esc); }
  .promo-det .det-p span { padding: 0.1rem 0.6rem; border-radius: var(--raio-pilula); background: var(--coral-fundo); font: 600 0.8125rem var(--sans); color: var(--coral-esc); }
  .promo-det .det-p [hidden] { display: none; }
  .promo-det .det-l { display: grid; gap: 0.3rem; margin: 0 0 0.9rem; padding: 0; list-style: none; font-size: 0.875rem; color: var(--tinta-suave); }
  .promo-det .det-l li::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 0.6rem; border-radius: 50%; background: var(--ouro); vertical-align: middle; }
  .promo-det .det-sw { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; margin-bottom: 1rem; font-size: 0.875rem; color: var(--tinta); cursor: pointer; }
  .promo-det .det-sw input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--coral-esc); }
  .promo-det .det-sw input:focus-visible, body.site-publico .promo-det .det-go:focus-visible { outline: 2px solid var(--pinho); outline-offset: 3px; }
  body.site-publico .promo-det .det-go { width: 100%; justify-content: center; background: var(--coral-esc); color: #fff; }
  @media (hover: hover) and (pointer: fine) {
    body.site-publico .promo-det .det-go:hover:not(:disabled) { background: var(--coral); }
  }

  /* ---------- calendário: legenda, ponto coral, realce e recuo dos outros dias ---------- */
  /* contents: o ponto e o texto entram na legenda existente com o mesmo espaçamento dos outros */
  .leg-promo:not([hidden]) { display: contents; }
  body.site-publico .ponto.ponto-promo { background: var(--coral); border: 0; }
  .promo-aviso:not([hidden]) { display: block; margin: -0.4rem 0 1rem; font: 500 0.875rem/1.4 var(--sans); color: var(--coral-esc); }

  /* a transição de opacidade é nova; o resto repete o que o publico.css já definia para .cal-dia */
  body.site-publico .cal-dia {
    transition: opacity 0.4s var(--ease-out), transform 0.35s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  body.site-publico .cal-dia.livre.promo-dia::after { background: var(--coral); }
  body.site-publico .cal-dia.livre.promo-dia.selecionado::after { background: #f2b9a1; }
  body.site-publico .cal-grelha.promo-foco .cal-dia:not(.promo-dia):not(.vazio) { opacity: 0.32; }
  body.site-publico .cal-grelha.promo-foco .cal-dia.promo-dia:not(.selecionado) { border-color: var(--coral); background: #fbf1ea; }
  /* anel que pulsa no ponto (só transform/opacity) */
  body.site-publico .cal-grelha.promo-foco .cal-dia.promo-dia::before {
    content: '';
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--coral);
    opacity: 0;
    pointer-events: none;
    animation: promo-ponto 1.8s var(--ease-out) infinite;
  }
  @keyframes promo-ponto { 0% { transform: scale(1); opacity: 0.5; } 70%, 100% { transform: scale(3.4); opacity: 0; } }

  @media (prefers-reduced-motion: reduce) {
    .promo-etq .carimbo-v3 { transition: none; }
    .promo-det.abre { animation: none; }
    body.site-publico .cal-dia { transition: none; }
    body.site-publico .cal-grelha.promo-foco .cal-dia.promo-dia::before { animation: none; }
  }
}

/* ==========================================================================
   3.0.2 A1 — promoção em tablet e telemóvel (< 1080 px)
   Carimbo de 96 px à direita do título do passo (#promo-t, botão; antes um cartão compacto) + detalhe inline (#promo-t-det, role dialog não modal, Esc/«Fechar»),
   ponto coral e legenda nos dias em que vale, esmorecimento opcional dos outros dias e selo no tratamento da lista.
   Os dados são os do computador (FuradouroReserva.promocao(); nunca se calcula um preço). ≥ 1080 px nada disto aparece.
   ========================================================================== */
.promo-t { display: none; }
@media (max-width: 1079px) {
  /* carimbo de 96 px sozinho à direita do título do passo (sem cartão; decisão do dono, proposta R1): a linha do título passa a 80 px
     para ele caber sem tocar no subtítulo nem nas setas do mês; o botão é o próprio carimbo (alvo 96 px) e o detalhe abre por baixo */
  .promo-t:not([hidden]) { display: block; margin: 0; }
  body.site-publico.com-promo-t #passo-dia > h2 { min-height: 80px; align-items: center; margin-bottom: 4px; padding-right: 104px; }
  .promo-t .pt-ancora { position: relative; height: 0; }
  .promo-t .pt-btn { position: absolute; z-index: 3; right: 0; bottom: 0; width: 96px; height: 96px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--coral-esc); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .promo-t .pt-btn:focus-visible { outline: 2px solid var(--pinho); outline-offset: 3px; }
  .promo-t .pt-carimbo, .promo-t .pt-carimbo .carimbo-v3 { display: block; }
  .promo-t .pt-carimbo .carimbo-v3 { --cv3: 96px; }
  @media (hover: hover) and (pointer: fine) {
    .promo-t .pt-carimbo .carimbo-v3 { transition: transform 0.35s var(--ease-out); }
    .promo-t .pt-btn:hover .carimbo-v3 { transform: scale(1.04); }
  }
  /* detalhe inline */
  .promo-t .promo-t-det { margin: 0.5rem 0 0.9rem; padding: 1rem 1.05rem 1.05rem; border-radius: var(--raio-cartao); background: var(--pergaminho); border: 1px solid var(--linha-solida); }
  .promo-t .promo-t-det[hidden] { display: none; }
  .promo-t .promo-t-det:focus, .promo-t .promo-t-det:focus-visible { outline: none; }
  .promo-t .promo-t-det.abre { animation: promo-t-in 0.3s var(--ease-out) both; }
  @keyframes promo-t-in { from { opacity: 0; transform: translate3d(0, -6px, 0); } to { opacity: 1; transform: none; } }
  .promo-t .det-k { margin: 0; font: 600 0.75rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-esc); }
  .promo-t .det-t { margin: 0.2rem 0 0.5rem; font: 400 1.4rem/1.1 var(--serif); color: var(--tinta); }
  .promo-t .det-t[hidden] { display: none; }
  .promo-t .det-k + .det-p { margin-top: 0.5rem; }
  .promo-t .det-p { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 0.6rem; margin: 0 0 0.7rem; font-family: var(--sans); font-variant-numeric: lining-nums tabular-nums; }
  .promo-t .det-p s { color: var(--tinta-suave); }
  .promo-t .det-p strong { font: 600 1.4rem var(--sans); color: var(--coral-esc); }
  .promo-t .det-p span { padding: 0.1rem 0.6rem; border-radius: var(--raio-pilula); background: var(--coral-fundo); font: 600 0.8125rem var(--sans); color: var(--coral-esc); }
  .promo-t .det-p [hidden] { display: none; }
  .promo-t .det-l { display: grid; gap: 0.3rem; margin: 0 0 0.8rem; padding: 0; list-style: none; font-size: 0.875rem; color: var(--tinta-suave); }
  .promo-t .det-l li::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 0.6rem; border-radius: 50%; background: var(--ouro); vertical-align: middle; }
  .promo-t .det-sw { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; margin-bottom: 0.6rem; font-size: 0.875rem; color: var(--tinta); cursor: pointer; }
  .promo-t .det-sw input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--coral-esc); }
  .promo-t .det-sw input:focus-visible, body.site-publico .promo-t .btn:focus-visible { outline: 2px solid var(--pinho); outline-offset: 3px; }
  body.site-publico .promo-t .det-go { width: 100%; min-height: 48px; justify-content: center; background: var(--coral-esc); color: #fff; }
  body.site-publico .promo-t .det-fechar { width: 100%; min-height: 48px; justify-content: center; margin-top: 0.5rem; }

  /* calendário: legenda, ponto coral e esmorecimento dos outros dias */
  .leg-promo:not([hidden]) { display: inline-flex; align-items: center; gap: 0.5rem; }
  body.site-publico .ponto.ponto-promo { background: var(--coral); border: 0; }
  .promo-aviso:not([hidden]) { display: block; margin: 0 0 0.8rem; font: 500 0.875rem/1.4 var(--sans); color: var(--coral-esc); }
  body.site-publico .cal-dia { transition: opacity 0.4s var(--ease-out), transform 0.35s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
  body.site-publico .cal-dia.livre.promo-dia::after { background: var(--coral); width: 7px; height: 7px; }
  body.site-publico .cal-dia.livre.promo-dia.selecionado::after { background: #f2b9a1; }
  body.site-publico .cal-grelha.promo-foco .cal-dia:not(.promo-dia):not(.vazio) { opacity: 0.32; }
  body.site-publico .cal-grelha.promo-foco .cal-dia.promo-dia:not(.selecionado) { border-color: var(--coral); background: #fbf1ea; }

  /* lista de tratamentos: marca do tratamento em promoção (só quando vale no dia escolhido); o carimbo é de assets/carimbo-v3.css */
  body.site-publico .cartao-servico.em-promo { border-color: var(--coral); }
}
@media (max-width: 1079px) and (prefers-reduced-motion: reduce) {
  .promo-t .promo-t-det.abre { animation: none; }
  .promo-t .pt-carimbo .carimbo-v3 { transition: none; }
  body.site-publico .cal-dia { transition: none; }
}