* {
  transition: all 0.25s ease-in-out;
}
/* =========================
   VARS & RESET
========================= */
:root{
  --cor-fundo: #faf8f5;  /* centro */
  --cor-texto: #2b2b2b;

  /* Paleta */
  --verde: #2e7d32;
  --rosa: #e76b83;
  --amarelo: #f5c045;
  --roxo: #6f42c1;
  --laranja: #fb8c00;
  --branco: #ffffff;

  /* Largura e suavização das laterais florais */
  --largura-faixa: clamp(110px, 12vw, 220px);
  --borda-suave: 46px; /* quanto maior, mais suave a junção com o centro */
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
img { max-width:100%; display:block; }
button { cursor:pointer; border:none; }

/* ===== 3) LISTA DE PRESENTES: scroll-snap + barra elegante ===== */
.gifts-wrapper {
  overflow-x: auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(85vw, 360px);
  gap: 1rem;
  padding: .25rem .25rem .75rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.gifts-wrapper > * {
  scroll-snap-align: start;
}

/* Barra de rolagem discreta */
.gifts-wrapper::-webkit-scrollbar { height: 10px; }
.gifts-wrapper::-webkit-scrollbar-track {
  background: rgba(0,0,0,.04);
  border-radius: 999px;
}
.gifts-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}
.gifts-wrapper:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,.28); }

/* Botões de navegação laterais (se já existem, ganham estilo) */
.gift-nav {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: var(--cor-branco);
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.gift-nav:hover { transform: translateY(-2px); }

/* ===== 4) TÍTULOS: sublinhado animado quando entram na tela ===== */
.section-title {
  position: relative;
  display: inline-block;
  padding-bottom: .35rem;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--cor-laranja), var(--cor-rosa));
  border-radius: 999px;
  transition: width .6s ease;
}
.section-title.revealed::after { width: 100%; }

/* ===== 5) MICRO-ANIMAÇÕES: cards sobem levemente no hover ===== */
.card, .gift-card, .present-card {
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.card:hover, .gift-card:hover, .present-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}
/* Imagem cresce 3% no hover (sutil) */
.card img, .gift-card img, .present-card img {
  transition: transform .25s ease;
}
.card:hover img, .gift-card:hover img, .present-card:hover img {
  transform: scale(1.03);
}




/* =========================
   FUNDO + MOLDURA FLORAL
========================= */
html{
  background-color: var(--cor-fundo) !important;
  position: relative;
  min-height: 100%;
}

/* Moldura floral por cima, com FADE suave p/ o centro (sem corte) */
html::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* Use WEBP (otimizado) — já com preload no HTML */
  background-image: url('/assets/fundo-casamento.webp');
  background-repeat: repeat-y;
  background-position: center top;
  background-size: cover;
  opacity: 1;

  /* Máscara com transição (fade) para o centro */
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(var(--largura-faixa) - var(--borda-suave)),
    rgba(0,0,0,0.85) calc(var(--largura-faixa) - var(--borda-suave)),
    rgba(0,0,0,0.0) var(--largura-faixa),
    rgba(0,0,0,0.0) calc(100% - var(--largura-faixa)),
    rgba(0,0,0,0.85) calc(100% - var(--largura-faixa) + var(--borda-suave)),
    #000 calc(100% - var(--largura-faixa) + var(--borda-suave)),
    #000 100%
  );
          mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(var(--largura-faixa) - var(--borda-suave)),
    rgba(0,0,0,0.85) calc(var(--largura-faixa) - var(--borda-suave)),
    rgba(0,0,0,0.0) var(--largura-faixa),
    rgba(0,0,0,0.0) calc(100% - var(--largura-faixa)),
    rgba(0,0,0,0.85) calc(100% - var(--largura-faixa) + var(--borda-suave)),
    #000 calc(100% - var(--largura-faixa) + var(--borda-suave)),
    #000 100%
  );
}

@media (max-width: 768px){
  :root{
    --largura-faixa: clamp(74px, 9vw, 120px);
    --borda-suave: 28px;
  }
}

/* =========================
   TIPOGRAFIA & LAYOUT
========================= */
body{
  font-family: "Lora", serif;
  color: var(--cor-texto);
  background-color: transparent;
  line-height: 1.6;
  position: relative;
  z-index: 1; /* acima da moldura */
}

.topbar{
  position: sticky; top:0; z-index: 5;
  display:flex; gap:18px; justify-content:center; align-items:center;
  background: rgba(250,248,245,.86);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #eee1cc;
  padding: 10px 14px;
}
.topbar a{
  text-decoration:none; color:#266b5a; font-weight:700;
}
.topbar a:hover{ text-decoration: underline; }

.hero{
  padding: 60px 20px 28px;
  text-align: center;
}
.noivos{
  font-family: "Playfair Display", serif;
  font-size: clamp(36px, 5vw, 64px);
  margin: 0 0 6px;
  letter-spacing: .5px;
}
.frase{
  margin: 0 auto 24px;
  font-size: 16px;
  opacity: .8;
}

.contador{
  display:flex; gap:14px; justify-content:center; align-items:center;
  flex-wrap: wrap;
}
.timebox{
  background: #fff;
  border: 1px solid #eee1cc;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 86px;
}
.timebox span{
  display:block; font-size: 28px; font-weight:700;
  font-family: "Playfair Display", serif;
}
.timebox small{
  opacity:.7; font-size:12px;
}

.conteudo{
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 20px 56px;
}

.card{
  background: #ffffff;
  border: 1px solid #eee1cc;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  padding: 22px;
  margin-bottom: 22px;
}
.titulo-secao{
  font-family: "Playfair Display", serif;
  margin: 4px 0 12px;
  font-size: clamp(22px, 3.2vw, 30px);
}

/* Cerimônia e Festa */
.grid-2{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px;
}
.local-card{
  background:#fffdf9; border:1px solid #f0e3cd; border-radius:14px;
  padding:16px; box-shadow: 0 10px 18px rgba(0,0,0,.04);
}
.local-card .sub{ opacity:.85; margin:.2rem 0 .6rem; }

/* Carrossel horizontal com snap */
.carrossel-wrap{
  position: relative;
  margin-top: 8px;
}
.carrossel{
  display: flex; gap: 16px; overflow-x: auto; padding: 8px 6px 10px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.carrossel::-webkit-scrollbar{ height: 8px; }
.carrossel::-webkit-scrollbar-thumb{ background:#e7d8bf; border-radius:10px; }

.presente{
  background:#fff; border:1px solid #f0e3cd; border-radius:14px; padding:12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
  display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  min-width: 260px; scroll-snap-align: start;
}
.presente img{ border-radius:12px; }
.presente .valor{ opacity:.8; margin:-4px 0 6px; }

.seta{
  position:absolute; top:50%; transform: translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  background:#ffffff; border:1px solid #eadfca;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  font-size:20px; line-height:34px; text-align:center;
  color:#666; z-index:2;
}
.seta:hover{ filter:brightness(1.05); }
.seta.esquerda{ left:-10px; }
.seta.direita{ right:-10px; }

/* Dentro dos cards de presente, o botão ocupa a base e 100% da largura */
.presente{ display:flex; flex-direction:column; }
.presente .btn{ margin-top:auto; width:100%; }

.local-card .btn{ width: fit-content; } /* ou width:100% se preferir */

/* Botão ocupa toda a largura nos cards de presente */
#presentes .presente .btn { width:100%; }

/* Se preferir mapas em largura total, ligue a linha abaixo */
// #cerimonia .local-card .btn { width:100%; }





/* Inputs */
.input{
  height: 48px;                 /* mesma altura do .btn */
  padding: 10px 12px;
  border: 1px solid #e7d8bf;
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
  outline: none;
}
.input:focus{
  border-color: #d8bf98;
  box-shadow: 0 0 0 3px rgba(216,191,152,.25);
}

/* Linha do RSVP (mantém seu grid) */
.rsvp-linha{
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}
@media (max-width: 640px){
  .rsvp-linha{ grid-template-columns: 1fr; }
  .col-botao .btn{ width:100%; }
}

/* =========================
   BOTÕES — look & feel único
========================= */
.btn,
a.btn {
  --bg: #2e7d32;          /* cor principal (muda nas variantes) */
  --bg2: #3e8d42;
  --txt: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  min-height: 48px;        /* altura padrão */
  padding: 0 18px;
  border: 0;
  border-radius: 14px;

  background: linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--txt);
  text-decoration: none;    /* garante que <a> não sublinhe */
  font-family: inherit;     /* mesma fonte do site */
  font-weight: 700;
  letter-spacing: .2px;

  box-shadow: 0 10px 18px rgba(0,0,0,.08);
  transition: transform .05s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover,
a.btn:hover { filter: brightness(1.03); box-shadow: 0 14px 24px rgba(0,0,0,.12); }
.btn:active,
a.btn:active { transform: translateY(1px); }
.btn:disabled,
a.btn:disabled { opacity:.6; cursor:not-allowed; }

/* Variantes na paleta do casamento */
.btn-principal { --bg:#2e7d32; --bg2:#3e8d42; }   /* verde */
.btn-sucesso   { --bg:#2e7d32; --bg2:#3e8d42; }
.btn-contraste { --bg:#e76b83; --bg2:#d55b72; }   /* rosa */
.btn-roxo      { --bg:#6f42c1; --bg2:#5b34a6; }
.btn-amarelo   { --bg:#f5c045; --bg2:#e3b53a; --txt:#3b2f0a; }
.btn-rosa      { --bg:#e76b83; --bg2:#d55b72; }
.btn-laranja   { --bg:#fb8c00; --bg2:#e67d00; }

/* Tamanhos opcionais (se quiser usar no futuro) */
.btn-sm { min-height: 40px; padding: 0 14px; border-radius: 12px; }
.btn-lg { min-height: 54px; padding: 0 22px; border-radius: 16px; }

/* Preenche a largura do container (usada nos cards) */
.btn-block { width: 100%; }


/* Mensagens RSVP */
.rsvp-message{
  margin-top:.6rem; padding:.8rem 1rem; border-radius:12px; font-weight:600;
}
.rsvp-message.info{    background:#fff7e6; color:#a56300; border:1px solid #ffd59e; }
.rsvp-message.success{ background:#eefcf1; color:#0f7a39; border:1px solid #b9ebc5; }
.rsvp-message.error{   background:#feeeee; color:#a12626; border:1px solid #f5bcbc; }
.rsvp-message.loading{ background:#eef4ff; color:#2f54eb; border:1px solid #adc6ff; }

/* Confete */
#confetti-container{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:9999; }
.confetti{ position:absolute; width:10px; height:14px; opacity:.92; animation:confetti-fall linear forwards; }
@keyframes confetti-fall{ to{ transform:translateY(110vh) rotate(720deg); opacity:.95; } }

/* Lista de convidados do RSVP por PIN */
#lista-membros {
  margin-top: 10px;
}

.membro-item {
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 10px;
  border: 1px solid #eee1cc;
  background: #fffdf9;
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
  transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.membro-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: .95rem;
}

.membro-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.membro-item.confirmado {
  background: #f0f9f3;
  border-color: #9ad0aa;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
}

/* mensagem extra depois de salvar */
.pin-message .rsvp-hotel-tip {
  display: block;
  margin-top: 4px;
  font-size: .86rem;
  color: #6b6b6b;
}



/* Acessibilidade: apenas leitores de tela */
.sr-only{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}

/* Rodapé */
.rodape{
  text-align:center; padding: 28px 16px; opacity:.75; font-size: 14px;
}

/* Responsivo */
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
}

/* Títulos com realce sutil */
.titulo-secao{
  position:relative;
  padding-bottom: .35rem;
}
.titulo-secao::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width: 68px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #fb8c00, #e76b83);
  opacity:.9;
}

/* <summary> mais clicável e harmônico */
.lista-detalhes > summary{
  list-style:none;
  cursor:pointer;
  padding: 10px 12px;
  border-radius:12px;
  background:#fffdf9;
  border:1px solid #f0e3cd;
  transition: background .2s ease, border-color .2s ease;
}
.lista-detalhes[open] > summary{
  background:#fff8ee;
  border-color:#f0d5b3;
}

/* Sombra do card um pouco mais “cremosa” */
.card{
  background:#fff;
  border:1px solid #eee1cc;
  border-radius:18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
}

/* Setas do carrossel mais visíveis */
.seta{
  width:38px; height:38px;
  background:#fff; color:#6d6760;
  border:1px solid #eadfca;
}
.seta:hover{ color:#3a3a3a; }

/* ====== AJUSTE SOLICITADO NOS BOTÕES ====== */

/* Botões dos locais (Cerimônia e Festa) - fundo rosa ao passar o mouse */
#cerimonia .btn-laranja:hover,
#cerimonia .btn-roxo:hover {
  background-color: #e76786 !important; /* Rosa */
  color: #fff !important;
  border-color: transparent !important;
  transition: background-color 0.2s ease;
}

/* Botões da lista de presentes - fundo laranja ao passar o mouse */
#presentes .btn:hover {
  background-color: #f27d3d !important; /* Laranja */
  color: #fff !important;
  border-color: transparent !important;
  transition: background-color 0.2s ease;
}

/* ===== AJUSTE HOVER EXATAMENTE COMO PEDIDO ===== */

/* 1) CERIMÔNIA/FESTA → fundo ROSA no hover */
#cerimonia .card a.btn:hover,
#cerimonia .card button.btn:hover,
#cerimonia a.btn-maps:hover,
#cerimonia .btn:hover {
  background-color: #e76786 !important; /* rosa */
  background-image: none !important;
  color: #ffffff !important;
  border-color: transparent !important;
  filter: none !important;
  transition: background-color .2s ease, color .2s ease !important;
}

/* 2) LISTA DE PRESENTES → fundo LARANJA no hover */
#presentes .card a.btn:hover,
#presentes .card button.btn:hover,
#presentes .btn-gift:hover,
#presentes .btn:hover {
  background-color: #f27d3d !important; /* laranja */
  background-image: none !important;
  color: #ffffff !important;
  border-color: transparent !important;
  filter: none !important;
  transition: background-color .2s ease, color .2s ease !important;
}

/* ===== AJUSTE DE HOVER NO RSVP ===== */
#rsvp .btn:hover {
  background-color: #f5c04d !important; /* amarelo */
  color: #fff !important;
  border-color: transparent !important;
  transition: background-color 0.2s ease;
}


/* ==== Cabeçalho dos noivos ==== */
.hero h1 {
  font-family: 'Playfair Display', serif; /* fonte clássica e elegante */
  font-size: 4rem;
  font-weight: 700;
  color: #4B6043; /* verde musgo da paleta */
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 0.5rem;
}

/* Destaque da data */
.wedding-date {
  font-family: 'Lora', serif;
  font-size: 1.2rem;
  color: #d17a5d; /* tom terroso, suave */
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Caixas do contador */
.countdown {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.countdown div {
  background-color: #fff;
  border: 1px solid #f0e6da;
  border-radius: 12px;
  padding: 1rem 1.2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.countdown span {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #4b6043;
}

/* === Destaque elegante para a data do casamento === */
.date-display{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:8px 0 28px;
}

.date-box{
  background:#fff;
  border:1.5px solid #efe4cf;           /* linha fininha e elegante */
  border-radius:16px;
  padding:10px 18px;
  box-shadow:0 6px 16px rgba(0,0,0,.06); /* sombra suave */
}

.date-day{
  font-family: "Fraunces", serif;        /* mesma vibe do título */
  font-size:2rem; line-height:1; font-weight:800;
  color:#2f8f58;                         /* VERDE da paleta */
  letter-spacing:1px;
}

/* Cápsulas */
.date-chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius:999px;
  color:#fff; font-weight:700; font-size:.95rem;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}

/* MÊS + ANO (foco em LARANJA, com toque de ROXO) */
.date-chip.month{
  background:#ff8a3d;                    /* LARANJA */
  border:2px solid rgba(123,97,255,.18); /* ROXO bem sutil na borda */
}
.date-chip.month .date-month{
  letter-spacing:1px;
}
.date-chip.month .date-year{
  background:rgba(255,255,255,.18);
  padding:2px 8px; border-radius:999px;
}

/* HORÁRIO (pílula VERDE com ícone de relógio) */
.date-chip.time{
  background:#2f8f58;                    /* VERDE */
  border:2px solid rgba(255,214,109,.25);/* AMARELO na borda (suave) */
}
.date-chip.time .date-time::before{
  content:"⏰";
  margin-right:8px;
  filter:saturate(120%);
}

/* Pequeno efeito hover (delicado) */
.date-chip:hover,
.date-box:hover{
  transform:translateY(-1px);
  transition:.18s ease;
}

/* Responsivo: aproxima as fichas em telas menores */
@media (max-width: 540px){
  .date-display{ gap:8px; }
  .date-day{ font-size:1.7rem; }
  .date-chip{ padding:8px 12px; font-size:.9rem; }
}


/* ==== Animações suaves ==== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero h1, .date-display, #contador {
  animation: fadeInUp 1s ease forwards;
}

.section-container {
  animation: fadeIn 1.2s ease forwards;
  animation-delay: 0.2s;
}

/* ===== Carrossel – FIX alinhamento ===== */
.carrossel-wrap {
  position: relative;
  margin-top: 12px;
}

.carrossel {
  display: flex;
  gap: 20px;                       /* Espaço entre cards */
  overflow-x: auto;
  padding: 0 10px 12px;
  scroll-snap-type: x mandatory;   /* Travar cada card ao rolar */
  -webkit-overflow-scrolling: touch;
}

.carrossel::-webkit-scrollbar {     /* trilho discreto */
  height: 8px;
}
.carrossel::-webkit-scrollbar-track {
  background: #00000008;
  border-radius: 999px;
}
.carrossel::-webkit-scrollbar-thumb {
  background: #b9b2a4;             /* tom neutro suave */
  border-radius: 999px;
}

/* Cada presente como card coeso */
.presente {
  flex: 0 0 clamp(260px, 28vw, 340px); /* largura fixa responsiva */
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eadfd2;          /* borda suave */
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  scroll-snap-align: start;
}

/* Imagens uniformes */
.presente img {
  width: 100%;
  height: 220px;                      /* altura CONSISTENTE */
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.presente h4 {
  margin: 12px 0 6px;
  font-size: 1.05rem;
  line-height: 1.25rem;
}

.presente .valor {
  color: #6d675f;                     /* texto suave */
  margin-bottom: 10px;
}

/* Botões já existentes mantidos; só garante alinhamento */
.presente .btn {
  margin-top: auto;                   /* gruda o botão no rodapé do card */
}

/* Setas flutuantes (mantendo suas classes) */
.seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #e6dbce;
  background: #fff;
  color: #6a6358;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  z-index: 2;
}
.seta:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 10px 26px rgba(0,0,0,.1);
}
.seta.esquerda { left: -8px; }
.seta.direita  { right: -8px; }

@media (max-width: 640px) {
  .presente { flex-basis: 280px; }
  .seta.esquerda { left: 8px; }
  .seta.direita  { right: 8px; }
}


/* =========================
   CORREÇÃO LISTA DE PRESENTES
   (não altera o restante do site)
   ========================= */

/* Trilho que rola: colunas iguais, espaçamento e snap */
.carrossel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(290px, 320px); /* largura uniforme dos cartões */
  gap: 20px;
  overflow-x: auto;
  padding: 8px 8px 16px;
  scroll-snap-type: x mandatory;
  align-items: stretch; /* garante alturas iguais */
}

/* Cartão do presente: vira coluna flex para fixar o botão no rodapé */
.carrossel .presente {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee4d6;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,.05);
  padding: 14px;
  scroll-snap-align: start;
  min-height: 420px;            /* altura mínima consistente */
}

/* Imagem padronizada (corta com cover para manter proporção) */
.carrossel .presente img {
  width: 100%;
  height: 200px;                /* altura igual para todas as imagens */
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 12px;
}

/* Título e valor com pequenas margens */
.carrossel .presente h4 {
  font-size: 1.05rem;
  margin: 6px 0 4px;
}
.carrossel .presente .valor {
  color: #6b6b6b;
  font-size: .95rem;
}

/* Mantém o botão sempre no rodapé do cartão */
.carrossel .presente .btn {
  margin-top: auto;             /* empurra o botão para baixo */
  align-self: stretch;
  text-align: center;
}

/* Setas do carrossel mantêm posição e não quebrem layout */
.carrossel-wrap {
  position: relative;
}
.carrossel-wrap .seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: #fff;
  border: 1px solid #e7dccb;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  cursor: pointer;
}
.carrossel-wrap .seta.esquerda { left: -6px; }
.carrossel-wrap .seta.direita   { right: -6px; }

/* Barra de rolagem discreta (opcional) */
.carrossel::-webkit-scrollbar { height: 8px; }
.carrossel::-webkit-scrollbar-thumb {
  background: #e7dccb;
  border-radius: 6px;
}
.carrossel { scrollbar-color: #e7dccb transparent; scrollbar-width: thin; }


/* ===========================================
   CAMAFEU DO CASAL - FOTO REDONDA ELEGANTE
   =========================================== */
.foto-cameo {
  width: 160px;
  height: 160px;
  margin: 10px auto 18px;
  border-radius: 999px;
  background: #faf8f5; /* mesmo fundo central */
  border: 6px solid #faf8f5; /* anel marfim suave */
  box-shadow: 0 10px 28px rgba(0, 0, 0, .10);
  position: relative;
  overflow: hidden;
}

.foto-cameo::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  background: conic-gradient(
    from 0deg,
    #2f8f58, #ff8a3d, #d15b79, #9d7ad2, #ffd76d, #2f8f58
  );
  mask: radial-gradient(circle 72px at 50% 50%, transparent 98%, #000 99%);
  opacity: .25; /* brilho discreto da paleta */
}

.foto-cameo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

@media (max-width: 540px) {
  .foto-cameo {
    width: 130px;
    height: 130px;
  }
}

/* ===========================
   1) Camafeu (foto redonda)
   =========================== */
/* Use o que você já tem: estes seletores pegam as classes mais comuns.
   Se sua foto tiver outro nome de classe, só acrescente na lista abaixo. */
.hero .foto-cameo,
.hero .camafeu,
.hero .camafeu-photo {
  width: 140px;
  height: 140px;
  margin: 10px auto 18px;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow: hidden;
}

.hero .foto-cameo img,
.hero .camafeu img,
.hero .camafeu-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  /* “aro” perolado que combina com o floral */
  border: 6px solid #f5e8d0;
  background: #fff;
}

/* brilho interno super discreto (opcional) */
.hero .foto-cameo::after,
.hero .camafeu::after,
.hero .camafeu-photo::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(234,208,166,.45) inset;
  pointer-events: none;
}

/* =========================================
   2) Hierarquia: nome + linha decorativa
   ========================================= */
.noivos {
  margin-bottom: 12px; /* separa do bloco da data */
  animation: fadeInDown 700ms ease both; /* microanimação */
}

.noivos::after {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  margin: 10px auto 0;
  background: linear-gradient(to right, #f4a261, #e9c46a, #2a9d8f);
  border-radius: 2px;
  opacity: .9;
}

/* a data fica um tiquinho mais suave que o nome */
.date-display { 
  margin-top: 6px;
  opacity: .95;
}

/* ==============================
   3) Contador: leveza e hover
   ============================== */
.contador { gap: 14px; }

.contador .timebox {
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
  transform: translateZ(0);
}

/* números com largura tabular: colunas não “pulam” */
.contador .timebox span { 
  font-variant-numeric: tabular-nums; 
}

/* microinteração */
.contador .timebox:hover {
  transform: translateY(-2px) scale(1.04);
  background: #fff8ef;                  /* bege clarinho */
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

/* =================================
   4) Botão principal: verde mais quente
   ================================= */
.btn.btn-principal {
  background-color: #4a7c59;  /* verde com matiz quente */
  border-color: #4a7c59;
}
.btn.btn-principal:hover {
  background-color: #3f6b4e;
  border-color: #3f6b4e;
}

/* =======================
   5) Microanimação do H1
   ======================= */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}



/* ——— Data + Camafeu ——— */
.date-display {
  gap: 8px;                 /* aproxima as cápsulas entre si */
  margin-bottom: 8px;       /* encosta mais na foto */
}
.date-box,
.date-chip {
  height: 42px;             /* altura uniforme nas três cápsulas */
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.date-box .date-day { line-height: 1; }

/* Camafeu mais delicado */
.hero .foto-cameo,
.hero .camafeu,
.hero .camafeu-photo {
  margin-top: 6px;
}
.hero .foto-cameo img,
.hero .camafeu img,
.hero .camafeu-photo img {
  border-width: 5px;              /* antes 6px */
  box-shadow: 0 0 0 1px rgba(234,208,166,.35) inset;
}

/* ——— Contador ——— */
.contador { gap: 12px; }
.contador .timebox {
  padding: 8px 12px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.contador .timebox small {
  letter-spacing: .02em;
  color: #7a7a7a;                 /* legenda mais suave */
}

/* ——— Responsivo (até 768px) ——— */
@media (max-width: 768px) {
  .date-box, .date-chip { height: 38px; padding: 0 10px; }
  .hero .foto-cameo, .hero .camafeu, .hero .camafeu-photo {
    width: 120px; height: 120px;
  }
  .contador .timebox { transform: scale(.92); } /* -8% sutil */
}


/* ——— Animação de hover nas cápsulas da data ——— */
.date-box,
.date-chip,
.date-chip.time {
  transition: all 0.25s ease-in-out;
  transform: translateZ(0);
}

.date-box:hover,
.date-chip:hover,
.date-chip.time:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
  filter: brightness(1.05);
}

/* brilha um pouquinho o texto */
.date-box:hover span,
.date-chip:hover span,
.date-chip.time:hover span {
  color: #2a2a2a;
  transition: color 0.2s ease-in-out;
}

/* ======= CREST (monograma + nomes + data empilhada) ======= */
.crest{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-inline:auto;
  margin-top:6px;          /* aproxima do topo */
  margin-bottom:16px;      /* distância antes da foto */
  text-align:center;
}

.crest-initials{
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 68px);
  letter-spacing: .04em;
  color: var(--cor-verde-escuro, #2f4a37); /* sólido da sua paleta */
  line-height: 1;
}

.crest-names{
  font-family: "Lora", serif;
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--cor-texto, #3b3b3b);
  opacity:.9;
  margin: 2px 0 0;
}

.crest-divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 2px;
  margin-bottom: 6px;
}
.crest-divider .line{
  display:inline-block;
  width: 72px;
  max-width: 20vw;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cor-dourado, #caa66a), transparent);
  border-radius: 2px;
}
.crest-divider .heart{
  font-size: 16px;
  color: var(--cor-dourado, #caa66a);
  transform: translateY(-1px);
}

/* Data empilhada */
.crest-date{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.1;
  gap:4px;
  color: var(--cor-verde-escuro, #2f4a37);
}
.crest-day{
  font-family: "Playfair Display", serif;
  font-weight:700;
  font-size: clamp(24px, 4.8vw, 32px);
  position: relative;
  padding-inline: 20px;
}
.crest-day::before,
.crest-day::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:1px;
  background: currentColor;
  opacity:.25;
}
.crest-day::before{ top:-6px; }
.crest-day::after{ bottom:-6px; }

.crest-month{
  font-family:"Lora",serif;
  text-transform: lowercase;   /* “julho” minúsculo, como no exemplo */
  letter-spacing:.08em;
  font-size: clamp(14px, 2.5vw, 16px);
  color: var(--cor-texto, #3b3b3b);
}
.crest-year{
  font-family:"Playfair Display",serif;
  font-weight:600;
  font-size: clamp(16px, 3vw, 18px);
  color: var(--cor-texto, #3b3b3b);
}

/* Respirações com a foto no formato camafeu */
.foto-cameo{ margin-top: 6px; }

/* Peq. ajuste no contador para não colar na foto */
#contador.contador{ margin-top: 12px; }

/* === MONOGRAMA ESTILO CONVITE ELEGANTE === */
.crest {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 20px;
}

.crest-initials {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(3.8rem, 7vw, 5rem);
  color: #2f4b3a;
  letter-spacing: 0.03em;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
}

/* Iniciais e & com hierarquia visual */
.crest-initials .initial {
  position: relative;
}
.crest-initials .amp {
  font-size: 0.7em;
  margin: 0 0.05em;
}

/* Ornamentação floral sutil */
.crest-initials::before,
.crest-initials::after {
  content: "";
  position: absolute;
  top: -30px;
  width: 70px;
  height: 70px;
  background: url('https://upload.wikimedia.org/wikipedia/commons/f/f5/Floral_line_art.svg') center/contain no-repeat;
  opacity: 0.4;
}
.crest-initials::before { left: -80px; transform: rotate(-15deg); }
.crest-initials::after { right: -80px; transform: rotate(15deg); }

.crest-names {
  font-family: "Lora", serif;
  font-size: 1.1rem;
  color: #3b3b3b;
  letter-spacing: 0.1em;
  margin-top: 5px;
}

.crest-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.crest-divider .line {
  width: 60px;
  height: 1px;
  background: #d6cfc6;
}

.crest-divider .heart {
  color: #c96a00;
  font-size: 1rem;
  transform: translateY(-1px);
}

/* Data empilhada com linhas */
.crest-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 8px;
  font-family: "Lora", serif;
  color: #2f4b3a;
}

.crest-day {
  font-family: "Playfair Display", serif;
  font-size: 1.8rem;
  font-weight: 700;
}

.crest-month {
  font-size: 1rem;
  text-transform: lowercase;
}

.crest-year {
  font-size: 1rem;
}

.mini-line {
  width: 40px;
  border: none;
  border-top: 1px solid #d6cfc6;
  margin: 5px 0;
}

/* === MONOGRAMA ESTÁTICO (imagem) === */
.monograma-img {
  width: clamp(286px, 52vw, 442px);
  height: auto;
  display: block;
  margin: 20px auto 10px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.06));
  border-radius: 6px;
}

.crest {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 10px;
}

/* ====== Galeria horizontal (fotos quadradas com a mesma “vibe” do cameo) ====== */

.gallery-area {
  position: relative;
  margin-top: .5rem;
}

.gallery-wrapper {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 260px);   /* largura do “cartão” */
  gap: 18px;
  overflow-x: auto;
  padding: 8px 8px 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #e7dccb transparent;
}
.gallery-wrapper::-webkit-scrollbar { height: 8px; }
.gallery-wrapper::-webkit-scrollbar-thumb {
  background: #e7dccb; border-radius: 8px;
}

.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 38px; height: 38px; line-height: 36px;
  border-radius: 999px; border: 1px solid #e7dccb;
  background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.08);
  cursor: pointer; font-size: 20px;
}
.gallery-nav.prev { left: -6px; }
.gallery-nav.next { right: -6px; }

.cameo-square {
  scroll-snap-align: start;
  background: #fff;
  border-radius: 16px;
  padding: 10px;
  border: 1px solid #eee4d6;
  box-shadow: 0 8px 28px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
  display: grid; gap: 10px;
}
.cameo-square:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(0,0,0,.09);
}

.cameo-square img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border-radius: 12px;
  /* “anel” similar ao cameo redondo */
  box-shadow:
    0 2px 8px rgba(0,0,0,.06),
    inset 0 0 0 3px #fff,
    0 0 0 1px rgba(0,0,0,.04);
}

.cameo-square figcaption {
  font-size: .92rem;
  color: #6b6b6b;
  text-align: center;
}
@media (max-width: 680px) {
  .gallery-wrapper { grid-auto-columns: minmax(160px, 1fr); }
}

/* --- GALERIA DO CASAL (escala ~25%) --- */
.couple-gallery {
  --tile-size: 280px;           /* antes devia estar ~220-230px */
  --tile-radius: 18px;          /* bordas suaves */
  --tile-gap: 22px;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--tile-size), 1fr);
  gap: var(--tile-gap);
  overflow-x: auto;
  padding: 8px 4px 16px;
  scroll-snap-type: x mandatory;
  align-items: stretch;
}

.couple-gallery .item {
  position: relative;
  background: #fff;
  border: 1px solid #eee4d6;
  border-radius: var(--tile-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  scroll-snap-align: start;
  overflow: hidden;
  /* altura proporcional, sem “estourar” verticalmente */
  aspect-ratio: 1 / 1;
}

.couple-gallery .item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* mantém corte bonito */
  display: block;
}

@media (max-width: 768px) {
  .couple-gallery { --tile-size: 240px; }  /* levemente menor no mobile */
}




/* ===== Countdown banner (paleta verde + laranja) ===== */
.banner-countdown{
  --bc-green: #2f5d46;    /* verde do site */
  --bc-orange:#e28b51;    /* laranja da paleta */
  --bc-bg:    #ffffff;
  --bc-br:    #eadfce;    /* contorno suave já usado no site */

  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.40rem .85rem;
  border:1px solid var(--bc-br);
  border-radius:999px;
  background:var(--bc-bg);
  box-shadow:0 8px 26px rgba(0,0,0,.05);
  transform: scale(1.15);            /* ligeiramente menor que a data acima */
}

.banner-countdown .bc-label{
  font-family: "Playfair Display", serif;
  font-weight:600;
  letter-spacing:.18em;
  font-size:.80rem;
  color: color-mix(in srgb, var(--bc-green) 88%, #000 0%);
  opacity:.82;
  text-decoration:none;             /* garante SEM tachado */
  text-transform:uppercase;
  white-space:nowrap;
}

.banner-countdown .bc-number {
  min-width: 2.8rem;
  text-align: center;
  line-height: 1;
  padding: .45rem .75rem;
  border-radius: .65rem;
  font-weight: 900;             /* negrito real */
  font-size: 1.25rem;
  background: #e37230;          /* laranja mais forte */
  color: #fff;                  /* texto branco */
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
  border: none;
}




/* Hover/Focus sutil (opcional) */
.banner-countdown:hover{ box-shadow:0 10px 30px rgba(0,0,0,.07); }

/* Ajuste mobile: mais discreto */
@media (max-width: 640px){
  .banner-countdown{ transform: scale(.92); padding:.35rem .75rem; }
  .banner-countdown .bc-label{ font-size:.78rem; letter-spacing:.16em; }
  .banner-countdown .bc-number{ font-size:1rem; padding:.34rem .56rem; }
}

/* Variante: se preferir o número em verde e a pílula branca, troque por:
.banner-countdown .bc-number{
  background:#fff; color:var(--bc-green);
  border:1px solid var(--bc-br);
  box-shadow:0 2px 0 rgba(0,0,0,.03);
}
*/


/* força o estilo do número, mesmo se houver <strong> ou outra tag dentro */
.banner-countdown .bc-number,
.banner-countdown .bc-number * {
  font-weight: 900 !important;               /* negrito real */
  color: var(--bc-orange, #e37230) !important;
}

/* escolha 1: pílula sólida laranja (número branco) */
.banner-countdown .bc-number {
  background: var(--bc-orange, #e37230) !important;
  color: #fff !important;
  border: none !important;
  min-width: 2.8rem;
  line-height: 1;
  padding: .45rem .75rem;
  border-radius: .65rem;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
}



/* ====== NOSSOS MOMENTOS – layout especial no celular ====== */
@media (max-width: 640px) {

  /* trilho vira coluna, sem scroll lateral */
  #galeria-noivos.gallery-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-x: hidden;
    padding: 8px 0 16px;
    scroll-snap-type: none;   /* desliga o snap horizontal */
  }

  /* cada foto ocupa quase toda a largura, centralizada */
  #galeria-noivos .cameo-square {
    width: min(90vw, 340px);
    margin: 0 auto;
  }

  /* deixa a imagem um pouco mais alta e bem visível */
  #galeria-noivos .cameo-square img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;  /* pode trocar pra 1/1 se quiser quadrado */
    object-fit: cover;
  }

  /* esconde as setas no mobile */
  #galeria .gallery-nav {
    display: none;
  }
}

/* ===== MOBILE: MOSTRAR 1 FOTO POR VEZ NA GALERIA ===== */
@media (max-width: 680px) {

  /* cada card ocupa praticamente a largura inteira do celular */
  .couple-gallery {
    --tile-size: 88vw;    /* ocupa ~90% da largura da tela */
    --tile-gap: 16px;
  }

  /* deixa as fotos maiores e com foco */
  .couple-gallery .item {
    aspect-ratio: 4 / 5;  /* estilo foto vertical bonita (troque para 1/1 se quiser quadrada) */
    border-radius: 16px;
  }

  .couple-gallery .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ===== AJUSTE DA GALERIA SÓ NO CELULAR (mantém desktop como está) ===== */
@media (max-width: 680px) {

  /* trilho da galeria dos noivos */
  #galeria-noivos.gallery-wrapper {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(82vw, 1fr) !important; /* 1 foto por vez */
    gap: 16px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    padding: 8px 10px 16px !important;
  }

  /* cada “cartão” de foto */
  #galeria-noivos .cameo-square {
    scroll-snap-align: start;
    min-width: 82vw;          /* garante 1 foto por tela */
    max-width: 82vw;
  }

  /* só pra ter uma margem mais agradável no mobile */
  #galeria {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* =================================
   TIMELINE / PROGRAMAÇÃO (ACCORDION)
   ================================= */
.timeline-accordion {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 10px; /* Espaço entre os itens */
}

.timeline-item {
  background: #fffdf9; /* Um bege bem claro, combina com o site */
  border: 1px solid #f0e3cd;
  border-radius: 14px;
  transition: background-color 0.2s ease;
}

/* Quando o item está aberto */
.timeline-item[open] {
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
}

.timeline-summary {
  list-style: none; /* Remove a seta padrão do navegador */
  cursor: pointer;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.timeline-summary::-webkit-details-marker {
  display: none; /* Remove a seta padrão no Safari */
}

/* Adiciona um ícone customizado (+) */
.timeline-summary::before {
  content: '+';
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--laranja); /* <<<--- CORRIGIDO */
  font-family: 'Lora', serif;
  margin-right: 5px;
  transition: transform 0.2s ease;
  transform: rotate(0deg) translateY(-2px);
}

/* Gira o ícone para (-) quando aberto */
.timeline-item[open] > .timeline-summary::before {
  content: '−'; /* Símbolo de menos */
  transform: rotate(180deg) translateY(-2px);
}

.timeline-time {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #333;
  background: #fff8ee;
  border: 1px solid #eee1cc;
  border-radius: 8px;
  padding: 4px 10px;
  min-width: 65px;
  text-align: center;
}

.timeline-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--verde); /* <<<--- CORRIGIDO */
}

/* O conteúdo que expande */
.timeline-content {
  /* Alinha o texto com o título, pulando o ícone e a hora */
  padding: 0px 20px 20px 52px; 
  border-top: 1px solid #f0e3cd;
  margin: 0 20px 12px;
}

.timeline-content p {
  margin: 12px 0 0;
  line-height: 1.7;
  opacity: 0.9;
}

.timeline-content p:last-child {
  margin-bottom: 0;
}

/* =================================
   POLIMENTO DA PALETA DE CORES (NOVOS)
   ================================= */

/* 1. Muda o ícone "+" da Programação para ROSA */
.timeline-summary::before {
  color: var(--rosa) !important; /* Em vez de var(--laranja) */
}

/* 2. Muda o hover do botão "Buscar" (RSVP) para AMARELO */
#rsvp #buscarPinBtn:hover {
  background-color: var(--amarelo) !important;
  background-image: none !important;
  color: #3b2f0a !important; /* Texto escuro para legibilidade no amarelo */
  border-color: transparent !important;
  filter: none !important;
  transition: background-color .2s ease, color .2s ease !important;
}

/* 3. Muda o hover do "Informar que já comprei" (Presentes) para ROSA */
#presentes #gift-submit:hover {
  background-color: var(--rosa) !important; /* rosa */
  background-image: none !important;
  color: #ffffff !important;
  border-color: transparent !impor
  filter: none !important;
  transition: background-color .2s ease, color .2s ease !important;
}


/* --- NOVO: Botão Cota (Rosa/Roxo) --- */
.btn-cota {
  /* Cor ROSA (base) */
  background: linear-gradient(180deg, var(--rosa), #d55b72) !important;
  color: #ffffff !important;
  
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  min-height: 48px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.08) !important;
  transition: all .2s ease !important;
}
.btn-cota:hover {
  /* Cor ROXO (hover) */
  background-color: var(--roxo) !important;
  background-image: none !important;
  filter: none !important;
  transform: translateY(-1px) !important;
}