/* =========================================================
   Karol & Ramon — AJUSTE DE CONTRASTE
   ---------------------------------------------------------
   Camada leve sobre style.css. NÃO muda layout, fonte,
   espaçamento nem estrutura: o design original permanece
   exatamente como está. Só a PROFUNDIDADE de dois acentos.

   Medições (WCAG, mínimo 4.5 para texto normal):
     dourado #C9A57E sobre creme .......... 2.13  reprovava
     branco sobre sálvia (faixa RSVP) ..... 2.86  reprovava
     linha #E3D7C9 sobre creme ............ 1.32  quase sumia

   Solução: dourado em DOIS tons.
     - o dourado claro original (#C9A57E) continua na DECORAÇÃO
       e em TODOS OS BOTÕES, por escolha da Karol;
     - o dourado fechado (#8A6238) assume só o que é TEXTO:
       preços, links, números da contagem e horários.

   Este arquivo acompanha o refinamento tipográfico logo abaixo,
   que é a parte aprovada sem ressalvas. */

:root{
  /* Novo tom, só para texto e botões — 5.16 sobre creme, 5.55 com branco em cima */
  --gold-ink:  #8A6238;
  /* Verde fechado só para a faixa do RSVP — 5.02 com branco em cima */
  --sage-ink:  #616B54;
  /* Linha mais definida — de 1.32 para 1.63 sobre creme.
     Testei até 2.20; acima de 1.8 a linha começa a competir
     com o texto e o site perde a leveza que a Karol gosta. */
  --line:      #D4C1A9;
}

/* ---------- Texto em dourado ---------- */
a,
.section-sub,
.cd-num,
.sch-time,
.gift-price,
.tl-year,
.dress-card h3,
.faq-q::after,
.prose p:first-of-type::first-letter,
.tab-btn.active,
.autocomplete-item strong,
.info-card .ic,
.gift-card .gift-img{
  color: var(--gold-ink);
}
a:hover{ color: var(--taupe); }

/* ---------- BOTÕES: dourado claro original ----------
   Decisão da Karol. Os botões (sólido, vazado, os dois do hero,
   o CTA do menu e os filtros de categoria) ficam exatamente
   como eram no site original, em #C9A57E.
   O dourado mais fechado permanece só onde é TEXTO — preços,
   links, números da contagem e horários. */

/* nenhuma regra de botão aqui: o style.css original prevalece */

.nav-links a:hover, .nav-links a.active{ color: var(--gold-ink); }
.nav-brand:hover{ color: var(--gold-ink); }

.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--gold-ink); }
.choice input:checked + label{ border-color: var(--gold-ink); }
.tab-btn.active::after{ background: var(--gold-ink); }

/* ---------- Faixa do RSVP: branco agora legível ---------- */
.form-banner{ background: var(--sage-ink); }
.status-on{ background:#E7EEDF; color:#5F6952; }

/* ---------- Decoração continua no dourado claro original ---------- */
.divider::before, .divider::after,
.hero-divider::before, .hero-divider::after{ background:#C9A57E; }
.divider{ color:#8E9E80; }
.tl-dot{ background:#C9A57E; }
.timeline::before{ background: linear-gradient(#C9A57E, #8E9E80); }
.gift-img::after{ opacity:.35; }

/* ---------- Sobre fundos escuros ou coloridos ---------- */
.footer a, .footer-links a{ color: var(--sand); }
.footer-links a:hover{ color: var(--peach); }
.footer .f-date{ color: var(--peach); }
.bg-rose .section-sub{ color: var(--taupe); }

/* =========================================================
   REFINAMENTO TIPOGRÁFICO
   ---------------------------------------------------------
   Nada aqui muda layout, estrutura ou paleta. São ajustes de
   ofício: os detalhes que não se nomeiam, só se percebem.
   ========================================================= */

:root{
  /* Uma curva só para todo o site, em vez do "ease" padrão.
     Sai rápido e desacelera longo — é o que dá sensação de peso. */
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Sistema de cantos: 3 valores no lugar dos 10 encontrados */
  --r-sm: 8px;    /* campos, botõezinhos, tags */
  --r-md: 12px;   /* cards e caixas */
  --r-pill: 40px; /* pílulas */

  /* Sistema de sombras: 2 no lugar das 7 encontradas */
  --sh-1: 0 10px 28px rgba(90,79,69,.10);
  --sh-2: 0 20px 48px rgba(90,79,69,.14);

  /* Escala de espaçamento de caixa alta */
  --ls-micro: .1em;
  --ls-cap:   .14em;
}

/* ---------- 1. VERSALETES REAIS ----------
   A Cormorant Garamond não possui versaletes desenhadas: o
   navegador as fabrica encolhendo maiúsculas, e o traço sai
   mais fino que o das letras ao redor. A Cormorant SC traz os
   glifos reais. Precisa da fonte carregada no <head>. */
.small-caps{
  font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
  font-variant: normal;
  text-transform: none;
  letter-spacing: .05em;
  font-weight: 500;
}

/* ---------- 2. A CONTAGEM PARA DE TREMER ----------
   Sem largura fixa, cada segundo os dígitos mudam de largura
   e os quatro blocos dançam na tela. */
.cd-num{
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ---------- 3. ALGARISMOS ANTIQUÁRIOS NO TEXTO ----------
   Numerais que sobem e descem como minúsculas, integrados ao
   corpo do texto. Só no texto corrido: preços, contagem e
   campos de formulário seguem com numerais alinhados. */
.prose p, .sch-desc p, .info-card p, .faq-a-inner, .tl-item p,
.address-box p, .dress-card p, .hero-sub{
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1;
}
.gift-price, .cd-num, .sch-time, .tl-year, .pix-key input, .field input{
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* ---------- 4. MEDIDA DE LINHA ----------
   Estava em 81 e 85 caracteres. O confortável é 60-70. */
.prose{ max-width: 620px; }
.narrow{ max-width: 660px; }
.faq-list{ max-width: 680px; }
.schedule{ max-width: 620px; }
.section-head p.italic{ max-width: 560px; margin-left:auto; margin-right:auto; }

/* Títulos não deixam uma palavra sozinha na última linha */
h1, h2, h3, .hero-quote, .section-head p{ text-wrap: balance; }
p{ text-wrap: pretty; }

/* ---------- 5. ORNAMENTO SÓ NO HOVER ----------
   O raminho botânico se repetia em 105 cards. Ornamento
   repetido vira textura, e textura vira ruído. */
.gift-img::after{
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.gift-card:hover .gift-img::after{ opacity: .38; transform: none; }

/* ---------- 6. SISTEMA DE CANTOS E SOMBRAS ---------- */
.info-card, .dress-card, .gift-card, .cd-box, .address-box,
.form-success, .form-banner, .field input, .field select,
.field textarea, .choice label, .autocomplete-list,
.gallery-grid figure, .gallery-grid img, .tl-item img,
.story-preview img, .map-embed{
  border-radius: var(--r-md);
}
.field input, .field select, .field textarea,
.pix-key input, .autocomplete-item, .gift-status{
  border-radius: var(--r-sm);
}
.pix-box{ border-radius: 16px; }

.story-preview img, .map-embed{ box-shadow: var(--sh-2); }
.tl-item img, .autocomplete-list{ box-shadow: var(--sh-1); }
.pix-fab{ box-shadow: var(--sh-2); }

/* Espaçamento de caixa alta unificado */
.nav-links a, .footer-links a, .btn, .gift-status,
.filter-btn{ letter-spacing: var(--ls-cap); }
.field label, .cd-label, .section-sub{ letter-spacing: var(--ls-cap); }
.scroll-cue{ letter-spacing: .2em; }

/* ---------- 7. MOVIMENTO COM CURVA PRÓPRIA ---------- */
a, .btn, .nav-links a, .nav-cta, .filter-btn,
.field input, .field select, .field textarea, .choice label,
.autocomplete-item, .faq-q::after{
  transition-timing-function: var(--ease);
  transition-duration: .38s;
}
.gallery-grid figure img{ transition: transform .9s var(--ease); }
.reveal{ transition: opacity 1s var(--ease), transform 1s var(--ease); }

/* Cards ganham uma elevação discreta ao passar o mouse */
.info-card, .gift-card, .dress-card{
  transition: transform .42s var(--ease), box-shadow .42s var(--ease);
}
.info-card:hover, .gift-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--sh-1);
}

/* Linhas da programação deslizam de leve */
.sch-item{ transition: padding-left .42s var(--ease); }
.sch-item:hover{ padding-left: 6px; }

@media (prefers-reduced-motion: reduce){
  .info-card, .gift-card, .dress-card, .sch-item,
  .gallery-grid figure img, .reveal{
    transition: none !important; transform: none !important;
  }
}

/* =========================================================
   HERO NO CELULAR — céu dissolvido em creme
   ---------------------------------------------------------
   Em vez de escurecer a foto para o texto branco aparecer, o
   topo da imagem se dissolve no creme do site: o céu some
   para o fundo do cabeçalho, sem costura, e o texto passa a
   ser escuro — como já era no desktop.

   Por que funciona:
   - o céu da foto já é quase creme (232,213,204), então o
     degradê vai a favor da imagem em vez de brigar com ela;
   - no enquadramento do celular os 50% de cima são só céu; o
     casal aparece a partir de ~58% e o degradê termina em 52%,
     sem encostar neles;
   - a foto nessa faixa é clara (241,229,224), então o texto
     escuro tem contraste mesmo depois que o creme se dissolve.

   Medições (antes -> depois):
     frase ....... 2.17 -> 7.29
     botões ...... 1.66 -> 6.70 a 7.03

   Nada muda no desktop.
   ========================================================= */

@media (max-width: 860px){
  .hero{ background: var(--cream); }

  .hero-bg::after{
    background: linear-gradient(180deg,
      rgba(251,246,239,.97) 0%,
      rgba(251,246,239,.95) 26%,
      rgba(251,246,239,.86) 36%,
      rgba(251,246,239,.40) 44%,
      rgba(251,246,239,0)   52%);
  }

  .hero-quote{ color: var(--taupe); text-shadow: none; }
  .hero-sub{ color: var(--taupe-soft); text-shadow: none; }
  .hero-names{ color: var(--taupe); text-shadow: none; }
  .hero-divider::before, .hero-divider::after{ background: var(--line); }

  /* Botão vazado: borda dourada preservada, letra no marrom do
     site. O dourado como TEXTO daria 1.96 sobre o céu claro. */
  .hero .btn-light{
    border-color: var(--gold); color: var(--taupe);
    background: transparent; text-shadow: none;
  }
  .hero .btn-light:hover{ background: var(--gold); border-color: var(--gold); color:#fff; }

  /* O "role para descobrir" NÃO segue o texto escuro: ele fica em
     ~96% da tela, sobre a areia molhada (154,113,68), muito abaixo
     de onde o creme se dissolve. Em taupe daria contraste 1.14.
     Continua branco com sombra escura, como no site original. */
  .scroll-cue{
    color:#fff; opacity:.9;
    text-shadow: 0 0 3px rgba(40,30,24,.9), 0 0 8px rgba(40,30,24,.7), 0 1px 2px rgba(40,30,24,.95);
  }

  /* Folga do topo calibrada para o vazio acima da frase ficar igual
     ao vazio entre a base dos botões e a cabeça do noivo.
     Num aparelho de 844px de altura: a cabeça dele está em 529px,
     o bloco de texto mede ~371px e a barra do menu ocupa 72px,
     o que deixa 86px de sobra para dividir — 43px em cima, 43 embaixo. */
  .hero-inner{ padding-top: calc(26px + 2vh); }
}

/* =========================================================
   ALTURA DO HERO NO CELULAR
   ---------------------------------------------------------
   O `.hero` do style.css pede `min-height:100svh`, mas duas
   faixas ficam de fora dessa conta e empurravam a foto para
   fora do campo de visao:

   1. a `.nav` e' `position:sticky`, entao ocupa 73px do fluxo
      ANTES do hero comecar (72px de altura + 1px de borda).
      O hero media a tela inteira e ainda nascia 73px abaixo do
      topo — ja comecava 73px maior que a tela;

   2. o Safari recente desenha a barra de endereco FLUTUANDO
      sobre a pagina, e essa faixa nao entra no desconto do svh.

   Por que isso desloca a foto: a `.hero-bg` e' retrato
   (1600x2400) em `cover`. No celular quem manda e' a altura, ou
   seja, a imagem inteira cabe na altura do hero e o casal fica
   sempre em ~63% dela. Cada pixel de altura sobrando empurra o
   casal para baixo na mesma proporcao — dai ele aparecer cortado
   na cintura e o "role para descobrir" nunca ser visto.

   Em vez de adivinhar a altura da barra do Safari, o hero passa a
   terminar de proposito um pouco antes do fim da tela: a secao
   seguinte espia por baixo e fica claro que ha mais conteudo.

   So' vale em aparelhos com 760px ou mais de altura. Abaixo
   disso nao ha folga para gastar — encurtar o hero faria o texto
   encostar no casal —, entao telas baixas seguem exatamente como
   estavam. Ver [[hero-altura-mobile]].
   ========================================================= */

@media (max-width: 860px) and (min-height: 760px){
  .hero{
    min-height: calc(100vh - 153px);
    min-height: calc(100svh - 153px);
  }
  /* Folga do topo reduzida junto: o hero encurtou, o vao acima da
     frase precisa encolher na mesma medida para o texto nao
     descer em cima do casal. */
  .hero-inner{ padding-top: calc(12px + 1.2vh); }
}

/* =========================================================
   LOGO NA BARRA DO MENU — CELULAR
   ---------------------------------------------------------
   Em 1.45rem fixos o "KAROL & RAMON" media 231px. Numa tela de
   320px isso nao cabia ao lado do botao de menu: a marca
   quebrava em duas linhas e estourava a altura da barra.

   Com o clamp ela acompanha a largura da tela — 17.6px nos
   aparelhos estreitos, ~18.5px num iPhone comum — e so' volta
   ao tamanho cheio de 1.45rem a partir de ~495px, onde ja ha
   espaco de sobra. Alem de resolver a quebra, alivia o peso da
   barra, que fica fixa no topo o tempo todo.

   Para ajustar: o 4.7vw e' o que define o tamanho no celular;
   o 1.1rem e' o piso e o 1.45rem o teto (tamanho do desktop).
   ========================================================= */

@media (max-width: 860px){
  .nav-brand{ font-size: clamp(1.1rem, 4.7vw, 1.45rem); }
}