/* ═══════════════════════════════════════════════════════════════
   SAVE THE DATE · ESTAÇÃO VERÃO 2026·2027
   Mesma identidade do convite do coquetel, mobile first.

   REGRA DA DECORAÇÃO
   Todo ornamento vive dentro de .deco — camada absoluta (z-1)
   irmã de .conteudo (z-5). Nenhum seletor de conteúdo alcança o
   ornamento, e nenhum ornamento entra na coluna de leitura.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Weirdy';           font-weight:400;font-display:swap;src:url('fontes/Weirdy.woff') format('woff')}
@font-face{font-family:'Palmore';          font-weight:400;font-display:swap;src:url('fontes/Palmore-Regular.woff') format('woff')}
@font-face{font-family:'Palmore';          font-weight:700;font-display:swap;src:url('fontes/Palmore-Bold.woff') format('woff')}
@font-face{font-family:'Ambiguity Radical';font-weight:400;font-display:swap;src:url('fontes/Ambiguity-Regular.woff') format('woff')}
@font-face{font-family:'Ambiguity Radical';font-weight:700;font-display:swap;src:url('fontes/Ambiguity-Bold.woff') format('woff')}
@font-face{font-family:'Ambiguity Radical';font-weight:900;font-display:swap;src:url('fontes/Ambiguity-Black.woff') format('woff')}

:root{
  --laranja:#FF9E00; --magenta:#F71E91; --magenta-esc:#E70083; --carmim:#C50D4A;
  --azul:#047CEC;    --marinho:#033B75; --verde:#00621E;
  --creme:#FBEAD3;   --creme-sol:#FDE8C4; --areia:#E4C08D;
  --tinta:#2A1405;   --tinta-2:#6B4A2A;

  --display:'Weirdy','Cooper Black',Georgia,serif;
  --titulo:'Palmore','Bodoni Moda',Didot,Georgia,serif;
  --texto:'Ambiguity Radical','Archivo','Helvetica Neue',Arial,sans-serif;

  --track:.025em;
  --gut:18px;
  --col:32rem;
  --capa:460px;        /* largura máxima do escudo        */
  --moldura:15px;      /* espessura da borda marquise  */
  --passo:21px;        /* distância entre as bolinhas  */
  --bolinha:3.1px;
  --margem-quadro:12px;

  /* ornamentos do KV */
  --azulejo:98px;      /* largura da faixa de azulejo  */
  --azulejo-fora:70px; /* quanto dela fica para fora   */
  --praia:126px;       /* altura da cadeira no rodapé  */
  --leque:54px;        /* leque que senta sobre a régua*/
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--laranja); color:var(--tinta);
  font-family:var(--texto); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
:focus-visible{outline:3px solid var(--marinho); outline-offset:3px}

/* ═══════════ moldura marquise ═══════════ */
.pagina{padding:var(--margem-quadro)}
.quadro{
  /* no desktop a moldura vira um pôster centralizado, e não uma
     faixa esticada: a leitura continua na mesma coluna estreita */
  max-width:820px; margin-inline:auto;
  padding:var(--moldura);
  background-color:var(--azul);
  background-image:
    radial-gradient(var(--bolinha) at 50% 50%, #FDE8C4 99%, transparent 100%),
    radial-gradient(var(--bolinha) at 50% 50%, #FDE8C4 99%, transparent 100%),
    radial-gradient(var(--bolinha) at 50% 50%, #FDE8C4 99%, transparent 100%),
    radial-gradient(var(--bolinha) at 50% 50%, #FDE8C4 99%, transparent 100%);
  background-size:
    var(--passo) var(--moldura), var(--passo) var(--moldura),
    var(--moldura) var(--passo), var(--moldura) var(--passo);
  background-position:center top, center bottom, left center, right center;
  background-repeat:repeat-x, repeat-x, repeat-y, repeat-y;
}
.quadro-miolo{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #FDEDD6 0%, #FBEAD3 30%, #F7E1C4 72%, #F2D6B4 100%);
}
.textura{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

.bloco{position:relative; padding-inline:var(--gut)}
.deco{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.conteudo{position:relative; z-index:5; max-width:var(--col); margin-inline:auto}
.orn{position:absolute; opacity:.9}

/* ═══════════ capa ═══════════ */
/* O escudo é a identidade inteira numa peça só: marca, sol, gaivotas,
   os marcos da cidade e as duas assinaturas. Por isso sangra até a borda
   do quadro e o rodapé não repete as logos. */
.capa{padding:0; margin-bottom:2px}
.capa-arte{margin:0; padding:0; line-height:0}
.capa-arte img{
  width:100%; max-width:var(--capa); height:auto; margin-inline:auto; display:block;
}

.olho{
  margin:0 0 10px; font-size:11px; font-weight:900; letter-spacing:.24em;
  text-transform:uppercase; color:var(--tinta-2);
}
.olho--carmim{color:var(--carmim)}

.so-leitor{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* ═══════════ a data ═══════════ */
.quando{
  /* 34px embaixo: é a folga que o leque precisa para sentar na régua
     sem encostar na última linha do texto */
  padding-block:4px 34px; text-align:center;
  border-bottom:2px dotted rgba(42,20,5,.26);
}
.rotulo-data{margin-bottom:12px; font-size:10.5px; letter-spacing:.2em}

.data-linha{
  display:flex; align-items:baseline; justify-content:center; gap:12px;
  margin:0; line-height:1;
}
.data-dia,.data-hora{
  font-family:var(--titulo); font-weight:700; color:var(--tinta);
  font-size:clamp(30px,9vw,44px); letter-spacing:var(--track);
}
.data-losango{font-size:clamp(14px,3.6vw,19px); color:var(--magenta); transform:translateY(-.18em)}
.data-semana{
  margin:8px 0 0; font-size:12.5px; font-weight:900; letter-spacing:.22em;
  text-transform:uppercase; color:var(--carmim);
}

.destaque{
  margin:0 0 12px; font-family:var(--titulo); font-weight:700;
  font-size:clamp(22px,5.9vw,30px); line-height:1.18; color:var(--tinta);
  text-wrap:balance;
}
.destaque--grande{font-size:clamp(27px,7.4vw,38px); color:var(--carmim); margin-bottom:24px}
.apoio{
  margin:18px auto 0; max-width:25rem; font-size:14.5px; line-height:1.6;
  color:var(--tinta-2); text-wrap:pretty;
}

/* ═══════════ contagem ═══════════ */
/* Cada bloco é uma cartela azul com a fileira de bolinhas do KV em cima
   e embaixo — a mesma marquise da moldura do quadro, em miniatura. */
.relogio{padding-block:30px 26px; text-align:center}
.relogio--regua{border-top:2px dotted rgba(42,20,5,.26)}
.relogio .olho{margin-bottom:14px}

.conta{
  display:flex; gap:7px; justify-content:center;
  max-width:25rem; margin-inline:auto;
}
.conta-bloco{
  flex:1 1 0; min-width:0; position:relative;
  padding:16px 4px 13px;
  background-color:var(--magenta);
  background-image:
    radial-gradient(2.4px at 50% 50%, var(--creme-sol) 99%, transparent 100%),
    radial-gradient(2.4px at 50% 50%, var(--creme-sol) 99%, transparent 100%);
  background-size:13px 9px, 13px 9px;
  background-position:center top, center bottom;
  background-repeat:repeat-x;
  border:3px solid var(--tinta);
  box-shadow:4px 4px 0 var(--tinta);
}
.conta-bloco b{
  display:block; font-size:clamp(25px,7.4vw,36px); font-weight:900; line-height:1;
  color:#fff; font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.conta-bloco span{
  display:block; margin-top:6px; font-weight:900;
  text-transform:uppercase; color:var(--creme-sol);
  /* em tela de 320px "HORAS" não cabe com o espacejamento cheio;
     o -1 tira o espaço que sobra depois da última letra */
  font-size:clamp(8px, 2.5vw, 9px);
  letter-spacing:clamp(.05em, .45vw, .16em);
  margin-right:-.16em;
}
/* o bloco dos segundos pulsa de leve, para a contagem parecer viva */
@media (prefers-reduced-motion: no-preference){
  .conta-bloco:last-child b{animation:pulso 1s ease-in-out infinite}
  @keyframes pulso{0%,70%{opacity:1}85%{opacity:.55}100%{opacity:1}}
}

/* ═══════════ formulário ═══════════ */
/* ═══════════ formulário ═══════════ */
/* O cupom: papel mais claro, borda cheia e sombra dura — para o bloco de
   preencher se destacar do restante da página. */
.form-sec{padding-block:24px 34px}
.form-sec .conteudo{
  max-width:27rem;
  /* no celular estreito o recheio encolhe: o campo precisa da largura
     mais do que o cupom precisa da margem */
  padding:20px clamp(12px, 4vw, 20px) 22px;
  background:#FFFCF4; border:3px solid var(--tinta);
  box-shadow:6px 6px 0 rgba(42,20,5,.22);
}

.secao-tit{
  margin:0 0 4px; font-family:var(--titulo); font-weight:700; text-align:center;
  font-size:clamp(21px,5.4vw,27px); line-height:1.15; color:var(--carmim);
}
.secao-sub{
  margin:0 auto 20px; max-width:17rem; text-align:center;
  font-size:13.5px; line-height:1.5; color:var(--tinta-2); text-wrap:balance;
}

.alerta{
  display:none; margin:0 0 16px; padding:12px 14px;
  background:#FFF0F3; border:2.5px solid var(--carmim);
  font-size:14px; font-weight:700; color:var(--carmim);
}
.alerta.ver{display:block}

.campo{margin:0 0 16px}
.campo label{
  display:block; margin:0 0 6px; font-size:11px; font-weight:900;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2);
}
.campo input[type=text],
.campo input[type=tel],
.campo input[type=email]{
  width:100%; padding:14px 15px; font:inherit; font-size:16px; color:var(--tinta);
  background:#FFFDF8; border:2.5px solid var(--tinta); border-radius:0;
}
.campo input::placeholder{color:#B49B7E}
.campo input:focus{background:#fff}
.dica{margin:6px 0 0; font-size:12.5px; line-height:1.45; color:var(--tinta-2)}

.erro{display:none; margin:6px 0 0; font-size:13px; font-weight:700; color:var(--carmim)}
.campo.ruim input{border-color:var(--carmim); background:#FFF6F8}
.campo.ruim .erro{display:block}

.campo--check{margin-top:20px}
.check{display:flex; gap:11px; align-items:flex-start; cursor:pointer}
.check input{
  flex:none; width:22px; height:22px; margin:1px 0 0;
  accent-color:var(--magenta); cursor:pointer;
}
.check span{
  font-size:13.5px; line-height:1.5; color:var(--tinta-2);
  font-weight:400; letter-spacing:0; text-transform:none;
}
.campo--check.ruim .check span{color:var(--carmim)}

.isca{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.botao{
  display:block; width:100%; max-width:26rem; margin:22px auto 0;
  padding:16px 12px;
  font:inherit; font-weight:900; text-transform:uppercase; text-align:center;
  text-decoration:none; cursor:pointer; line-height:1.25;
  /* o rótulo tem de caber numa linha até em tela de 320px */
  font-size:clamp(12.5px, 3.5vw, 14.5px);
  letter-spacing:clamp(.04em, 1.2vw, .12em);
  border:3px solid var(--tinta); box-shadow:5px 5px 0 var(--tinta);
  transition:transform .08s ease, box-shadow .08s ease;
}
.botao:active{transform:translate(3px,3px); box-shadow:2px 2px 0 var(--tinta)}
.botao--ir{background:var(--magenta); color:#fff}
.botao--ir:hover{background:var(--magenta-esc)}
.botao--agenda{background:var(--creme-sol); color:var(--tinta)}
.botao--grande{font-size:16px; padding:19px 20px}
.botao[disabled]{opacity:.6; cursor:progress}

/* ═══════════ sucesso: o canhoto ═══════════ */
.sucesso{display:none; padding-block:26px 34px}
.sucesso.ver{display:block}

.canhoto{
  max-width:25rem; margin-inline:auto;
  background:var(--magenta); color:#fff;
  border:3px solid var(--tinta); box-shadow:7px 7px 0 var(--tinta);
}

.canhoto-topo{padding:26px 22px 22px; text-align:center}
.canhoto-sol{width:54px; margin:0 auto 12px}
.canhoto-olho{
  margin:0 0 8px; font-size:11px; font-weight:900; letter-spacing:.22em;
  text-transform:uppercase; color:var(--creme-sol);
}
.canhoto-nome{
  margin:0; font-family:var(--titulo); font-weight:700;
  font-size:clamp(22px,6.2vw,30px); line-height:1.12; color:#fff;
  text-wrap:balance; word-break:break-word;
}

/* o picote: linha tracejada com as meias-luas nas pontas, como num ingresso */
.canhoto-picote{position:relative; height:22px}
.canhoto-picote span{
  position:absolute; left:14px; right:14px; top:50%; height:0;
  border-top:3px dashed rgba(253,232,196,.75);
}
.canhoto-picote::before,
.canhoto-picote::after{
  content:''; position:absolute; top:50%; width:22px; height:22px;
  transform:translateY(-50%);
  /* tom do meio do papel: a meia-lua tem de parecer recorte, não adesivo */
  background:#F7E1C4;
  border:3px solid var(--tinta); border-radius:50%;
}
.canhoto-picote::before{left:-14px}
.canhoto-picote::after{right:-14px}

.canhoto-pe{
  display:flex; flex-wrap:wrap; gap:2px;
  border-top:0; padding:0 3px 3px;
}
.canhoto-item{
  /* 6rem e não 7: a 320px a base de 7rem estoura por 2px e
     "Abre em" e "Hora" caem uma embaixo da outra */
  flex:1 1 6rem; min-width:0; padding:13px 12px 14px;
  background:rgba(42,20,5,.16); text-align:center;
}
.canhoto-item--larga{flex:1 1 100%}
.canhoto-item .rot{
  display:block; margin-bottom:4px; font-size:9px; font-weight:900;
  letter-spacing:.16em; text-transform:uppercase; color:var(--creme-sol);
}
.canhoto-item b{
  display:block; font-size:clamp(15px,4.2vw,18px); font-weight:900;
  line-height:1.15; color:#fff; letter-spacing:.02em;
}

.sucesso .depois{
  max-width:25rem; margin:22px auto 0; text-align:center;
  /* mesmo recuo do estado aberto: segura o texto longe do azulejo */
  padding-inline:22px;
  font-size:14px; line-height:1.55; color:var(--tinta-2);
}
.sucesso .depois p{margin:0}

/* ═══════════ estado aberto ═══════════ */
/* coluna mais estreita que o padrão: é o que abre espaço lateral
   para as faixas de azulejo neste estado, que é um bloco curto */
.quando--aberta{padding-block:22px 36px; border-bottom:0}
.quando--aberta .conteudo{
  max-width:25rem;
  /* o recuo é o que segura o texto longe da faixa de azulejo no celular */
  padding-inline:20px;
}
.selo-abriu{
  display:inline-block; margin:0 0 16px; padding:9px 18px;
  background:var(--verde); color:#fff; border:3px solid var(--tinta);
  box-shadow:4px 4px 0 var(--tinta);
  font-size:11.5px; font-weight:900; letter-spacing:.22em; text-transform:uppercase;
}
.link-caixa{
  max-width:26rem; margin:20px auto 0; padding:13px 15px 14px;
  background:#FFFCF4; border:2.5px dashed rgba(42,20,5,.5); text-align:center;
}
.link-caixa .rot{
  display:block; margin-bottom:6px; font-size:10px; font-weight:900;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-2);
}
.link-cru{
  display:block; font-size:13px; font-weight:900; line-height:1.45;
  /* anywhere e não break-all: assim a quebra procura primeiro a barra
     e o ponto do endereço, em vez de largar uma letra sozinha na
     linha de baixo */
  overflow-wrap:anywhere; color:var(--azul);
}
/* é o último bloco antes do rodapé: o tracejado do rodapé já separa */
.temporada{padding-block:34px 28px; border-bottom:0}
.temporada .data-semana{
  max-width:20rem; margin-inline:auto; letter-spacing:.16em; text-wrap:balance;
}

/* ═══════════ ornamentos do KV ═══════════ */
/* As faixas de azulejo do mar compõem as laterais do quadro. Elas nunca
   ficam inteiras: sempre entram um pedaço por baixo da moldura, senão a
   arte parece colada em cima do fundo em vez de continuar por trás dele.
   No celular sobra só a lasca colorida na beirada, como a lombada de um
   livro; a partir de 700px aparece quase toda.

   A da direita vai espelhada (scaleX(-1)): sem isso as duas apontam para
   o mesmo lado e o quadro fica torto. Espelhada, elas se encaram. */
.d-azulejo{
  position:absolute; top:50%; width:var(--azulejo); height:auto;
  transform:translateY(-50%); opacity:.92;
}
.d-azulejo--e{left:calc(var(--azulejo-fora) * -1)}
.d-azulejo--d{
  right:calc(var(--azulejo-fora) * -1);
  transform:translateY(-50%) scaleX(-1);
}

/* o leque senta em cima da régua pontilhada, com a base na linha */
.deco--solta{overflow:visible}
.d-leque{
  position:absolute; left:50%; width:var(--leque); height:auto;
  top:calc(var(--leque) * -0.30);           /* monta a régua, não flutua */
  transform:translateX(-50%);
}

/* cadeira e guarda-sol fecham o rodapé, plantados na borda de baixo */
.d-praia{position:absolute; bottom:0; height:var(--praia); width:auto}
.d-cadeira{left:-44px}
.d-guardasol{right:-30px; height:calc(var(--praia) * 1.18)}

/* ═══════════ rodapé ═══════════ */
/* A cadeira e o guarda-sol ocupam a faixa que o padding de baixo
   reserva, e sangram para fora pelas laterais. Nunca entram na
   coluna de leitura. */
.rodape{
  /* a faixa de baixo tem de ser mais alta que o guarda-sol, senão a
     última linha do texto encosta nele */
  padding-block:26px calc(var(--praia) * 1.18 + 20px);
  text-align:center; border-top:2px dotted rgba(42,20,5,.28);
}
.rodape .conteudo{max-width:26rem}

.rodape-marca{
  margin:0; font-family:var(--titulo); font-weight:700;
  font-size:clamp(17px,4.4vw,21px); line-height:1.15; color:var(--carmim);
}
.rodape-temp{
  margin:5px auto 0; max-width:18rem;
  font-size:11px; font-weight:900; letter-spacing:.18em;
  text-transform:uppercase; color:var(--azul); text-wrap:balance;
}
.nota{margin:14px 0 0; font-size:11.5px; line-height:1.6; color:rgba(42,20,5,.72)}

/* ═══════════ telas maiores ═══════════ */
@media (min-width:700px){
  :root{
    --gut:34px; --margem-quadro:22px; --moldura:18px; --passo:25px; --capa:520px;
    --azulejo:118px; --azulejo-fora:38px; --praia:168px; --leque:70px;
  }
  .capa{padding-block:46px 26px}
  .conta{gap:12px}
  /* plantados na beirada, com o pé entrando por baixo da moldura */
  .d-cadeira{left:-38px}
  .d-guardasol{right:-26px}
}
@media (min-width:900px){
  /* 117px é o tamanho real da arte: acima disso ela borra. Mesmo na tela
     larga um naco continua por baixo da moldura. */
  :root{--azulejo:117px; --azulejo-fora:30px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}