/* ==========================================================================
   Regina Caeli Bordados — estilos que complementam o Tailwind.
   Só entra aqui o que o Tailwind não resolve bem em classe utilitária:
   fontes, o "flash" antes do CDN carregar, texturas de costura e o lightbox.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Karla:wght@300;400;500;600;700&display=swap');

/* --- tokens espelhando o tw-config.js (usados fora do Tailwind) --- */
:root {
  --creme: #FFF2F2;
  --blush: #FFDADA;
  --rosa: #FF788D;
  --rosa-dark: #E85A72;
  --verde: #165823;
  --verde-dark: #0E3B17;
  --papel: #FFFBFA;
  --header-h: 78px;
}

/* --- Anti-FOUC: o Play CDN leva ~1 frame para pintar. Sem isto a página
       pisca branca antes de ficar creme. --- */
html { background: var(--creme); -webkit-text-size-adjust: 100%; }
body {
  background: var(--creme);
  color: var(--verde);
  font-family: 'Karla', system-ui, sans-serif;
  overflow-x: hidden;
}
h1, h2, h3, .font-display { font-family: 'Fraunces', Georgia, serif; }

/* Rolagem suave com respiro para o header fixo */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }

/* Seleção e foco na identidade da marca */
::selection { background: var(--rosa); color: #fff; }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; border-radius: 4px; }

/* Barra de rolagem discreta (WebKit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--creme); }
::-webkit-scrollbar-thumb { background: var(--blush); border-radius: 99px; border: 2px solid var(--creme); }
::-webkit-scrollbar-thumb:hover { background: var(--rosa); }

/* ==========================================================================
   1. Motivos de bordado
   ========================================================================== */

/* Ponto alinhavo: moldura tracejada como a linha correndo no tecido */
.stitch {
  border: 2px dashed var(--rosa);
  border-radius: 1.75rem;
}
.stitch-t { border-top: 2px dashed rgba(255, 120, 141, .55); }

/* Fio que separa seções: dois pontinhos e uma linha costurada */
.fio {
  display: flex; align-items: center; gap: .85rem;
  color: var(--rosa);
}
.fio::before, .fio::after {
  content: ''; height: 0; flex: 1;
  border-top: 2px dashed currentColor; opacity: .5;
}

/* Textura de tecido: trama fina por trás das seções claras */
.tecido {
  background-image:
    linear-gradient(rgba(255, 120, 141, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 120, 141, .05) 1px, transparent 1px);
  background-size: 7px 7px;
}

/* Palavra bordada: sublinhado feito à mão, não uma régua */
.bordado {
  position: relative; white-space: nowrap;
}
.bordado::after {
  content: '';
  position: absolute; left: -.06em; right: -.06em; bottom: -.22em; height: .34em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 22 2, 38 10, 58 6 S 98 2, 118 7' fill='none' stroke='%23FF788D' stroke-width='3.5' stroke-linecap='round' stroke-dasharray='9 7'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* ==========================================================================
   2. Aparição no scroll (ligada pelo main.js)
   ========================================================================== */
[data-revelar] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--atraso, 0ms);
  will-change: opacity, transform;
}
[data-revelar].revelado { opacity: 1; transform: none; }

/* ==========================================================================
   3. Cabeçalho
   ========================================================================== */
.header-solto { background: transparent; border-color: transparent; }
.header-fixo {
  background: rgba(255, 242, 242, .88);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-color: rgba(255, 120, 141, .28);
  box-shadow: 0 12px 32px -28px rgba(22, 88, 35, .6);
}

/* Link do menu: a linha nasce do centro, como um ponto sendo puxado */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; left: 50%; bottom: -6px;
  width: 0; height: 2px; background: var(--rosa);
  transform: translateX(-50%);
  transition: width .35s cubic-bezier(.22,.61,.36,1);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { width: 100%; }
.nav-link[aria-current="page"] { color: var(--rosa-dark); }

/* Menu mobile */
#menu-mobile { transition: opacity .35s ease, visibility .35s ease; }
#menu-mobile[hidden] { display: block !important; opacity: 0; visibility: hidden; pointer-events: none; }
#menu-mobile:not([hidden]) { opacity: 1; visibility: visible; }
#menu-mobile li {
  opacity: 0; transform: translateY(14px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}
#menu-mobile:not([hidden]) li { opacity: 1; transform: none; }
body.trava-scroll { overflow: hidden; }

/* Hambúrguer que vira X */
.burger span {
  display: block; height: 2px; width: 24px; background: var(--verde); border-radius: 2px;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
}
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   4. Galeria + lightbox
   ========================================================================== */
.galeria-item { transition: opacity .4s ease, transform .4s cubic-bezier(.22,.61,.36,1); }
.galeria-item.oculto {
  display: none;
}
.galeria-item img { transition: transform .8s cubic-bezier(.22,.61,.36,1); }
.galeria-item:hover img { transform: scale(1.06); }

#lightbox { transition: opacity .3s ease; }
#lightbox[hidden] { display: flex !important; opacity: 0; pointer-events: none; }
#lightbox img { animation: lb-entrar .35s cubic-bezier(.22,.61,.36,1) both; }
@keyframes lb-entrar { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   5. Acordeão (perguntas frequentes)
   ========================================================================== */
.faq-corpo {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.22,.61,.36,1);
}
.faq-item[open] .faq-corpo,
.faq-item.aberto .faq-corpo { grid-template-rows: 1fr; }
.faq-corpo > div { overflow: hidden; }
.faq-item.aberto .faq-mais { transform: rotate(45deg); }
.faq-mais { transition: transform .35s cubic-bezier(.22,.61,.36,1); }

/* ==========================================================================
   6. Imagens
   ========================================================================== */
/* Enquanto as fotos reais do Drive não entram, os SVGs de espera ocupam o
   mesmo espaço — a diagramação não muda ao trocar o arquivo. */
.moldura { overflow: hidden; background: var(--blush); }
.moldura img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   7. Acessibilidade
   ========================================================================== */
.pular-para {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--verde); color: var(--creme);
  padding: .75rem 1.25rem; border-radius: 99px; font-weight: 600;
  transition: top .25s ease;
}
.pular-para:focus { top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-revelar] { opacity: 1 !important; transform: none !important; }
}

/* Impressão: tira o cromo da tela e deixa só o conteúdo */
@media print {
  header, footer, #menu-mobile, .sem-print { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Botões de filtro da galeria — estado vem do aria-pressed, não de classes JS */
.filtro {
  border: 2px solid rgba(22, 88, 35, .18);
  color: var(--verde);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.filtro:hover { border-color: var(--verde); }
.filtro[aria-pressed="true"] {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--creme);
}

/* Com o WhatsApp flutuante na tela, o "voltar ao topo" sobe e fica centralizado
   acima dele (flutuante: 56px; topo: 48px). Estado vem do atributo, não de classes JS. */
body[data-wa-flutuante] #ao-topo {
  bottom: 6rem;
  right: 1.75rem;
}