/* Base (paleta verde & branco) */
:root{
  --paper:#faf9f6;          /* fundo tipo papel claro */
  --bg:var(--paper);
  --text:#2a2a2a;
  --muted:#6d6d6d;
  --light:#ffffff;
  --accent:#4c6b4f;         /* verde principal */
  --accent-dark:#2e4a38;    /* verde profundo p/ seções escuras/hover */
  --navH: 25px; /* altura aproximada da barra fixa */
}

/* rolamento suave nativo */
html{
  scroll-behavior: smooth;
  scroll-padding-top: var(--navH); /* compensa a navbar fixa ao ancorar */
}

/* segurança extra: cada seção com id também compensa */
section[id]{ scroll-margin-top: var(--navH); }

/* textura de papel bem sutil */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:
    radial-gradient(rgba(0,0,0,.015) 1px, transparent 1px) 0 0/12px 12px,
    var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.45;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1080px;margin:0 auto;padding:64px 24px}
.container.narrow{max-width:820px}
.center{text-align:center}

/* Botões (verde) */
.btn{
  display:inline-block;padding:12px 20px;border:1px solid var(--accent);
  border-radius:999px;transition:.2s;cursor:pointer;
  background:var(--accent); color:#fff;
}
.btn:hover{transform:translateY(-1px); background:var(--accent-dark); border-color:var(--accent-dark)}
.btn-outline{
  display:inline-block;padding:12px 20px;border:1px dashed var(--accent);
  border-radius:999px;color:var(--accent); background:transparent;
}
.btn-outline:hover{background:var(--accent); color:#fff; border-style:solid}
.btn-light{background:var(--light);border-color:var(--light); color:var(--accent-dark)}
.btn-light:hover{transform:translateY(-1px); color:var(--light)}

/* Nav & Hero */
.nav{
  position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:10;
  background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
  border:1px solid #e8e8e8;border-radius:999px;padding:10px 16px;
  display:flex;gap:16px;align-items:center
}
.nav a{opacity:.9}
.nav a:hover{color:var(--accent)}
.nav .btn{margin-left:8px}
.hero{
  position:relative;min-height:90vh;display:flex;align-items:center;justify-content:center;
  background:#efece6; /* tom claro neutro */
}
.hero-inner{text-align:center;padding:96px 24px}
.couple{
  font-family:'Playfair Display',serif;letter-spacing:.15em;
  font-size:clamp(28px,5vw,44px);margin:0 0 12px; color:var(--accent);
}

/* Marca d’água do monograma LL */
.hero::before{
  content:"LL";
  position:absolute; top:22px; left:0; right:0; text-align:center;
  font-family:'Playfair Display',serif; font-size:56px; letter-spacing:.08em;
  color:var(--accent); opacity:.12; pointer-events:none;
}

.hero-photos{position:relative;display:inline-block;margin:16px auto 8px}
.hero-photos .photo-center{
  width:min(56vw,360px);height:auto;object-fit:cover;filter:grayscale(0%);
  border:8px solid #fff;box-shadow:0 10px 40px rgba(0,0,0,.12)
}
.photo-side{
  position:absolute;top:50%;transform:translateY(-50%);width:120px;
  border:6px solid #fff;filter:grayscale(0%);box-shadow:0 6px 24px rgba(0,0,0,.12)
}
.photo-side.left{left:-140px}
.photo-side.right{right:-140px}
.date{
  font-family:'Playfair Display',serif;letter-spacing:.2em;
  font-size:clamp(28px,5vw,48px);margin:18px 0 8px; color:var(--accent);
}
.tagline{color:var(--muted);margin:0 0 16px}
.guest-line{font-weight:600}
.skip{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:20px}

/* Sections */
.section{background:var(--bg)}
.section-dark{
  position:relative;color:#fff;
  background:var(--accent-dark);
  background-image:linear-gradient(to bottom right, rgba(255,255,255,.02), rgba(0,0,0,.08));
}
.section-dark .overlay{position:absolute;inset:0;background:rgba(0,0,0,.18)}
.section-dark .container{position:relative}
.section h2{
  font-family:'Playfair Display',serif;text-align:center;
  font-size:clamp(24px,4vw,36px);margin:0 0 24px; color:var(--accent);
}
/* Quando em seção escura, títulos ficam brancos */
.section-dark h2{color:#fff}

/* Ornamento floral (opcional, usar <svg class="floral"> no HTML) */
.floral{
  width:90px;margin:10px auto 22px;display:block;opacity:.9;
  color:var(--accent);
}

/* Schedule */
.schedule{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;padding:0;margin:0;list-style:none}
.schedule li{display:flex;flex-direction:column;align-items:center;gap:6px}
.schedule time{font-size:20px;font-weight:700}
.schedule span{font-size:14px;opacity:.9}

/* Location */
.location{display:flex;flex-direction:column;gap:10px;margin:0 auto 12px;max-width:520px}
.location figcaption{text-align:center;color:var(--muted)}
.actions{display:flex;gap:12px;justify-content:center;margin-top:16px}

/* Countdown */
.countdown{
  display:grid;grid-template-columns:repeat(4, minmax(90px,1fr));
  gap:12px;max-width:720px;margin:0 auto
}
.countdown .box{
  background:rgba(255,255,255,.06);padding:24px;border-radius:14px;text-align:center;
  border:1px solid rgba(255,255,255,.22)
}
.countdown span{display:block;font-size:clamp(24px,5vw,40px);font-weight:700}
.countdown small{text-transform:uppercase;letter-spacing:.12em;font-size:12px;opacity:.9}

/* Duo cards */
.duo{background:var(--bg)}
.duo-grid{display:grid;grid-template-columns:1fr;gap:20px}
.card{background:#fff;border:1px solid #e6e6e6;border-radius:16px;padding:28px}
.card h3{font-family:'Playfair Display',serif;margin-top:0;color:var(--accent)}
.list{padding-left:18px}
.list li{margin:6px 0}

/* RSVP */
.rsvp-form .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rsvp-form label{display:flex;flex-direction:column;font-size:14px;gap:6px}
.rsvp-form input,.rsvp-form select,.rsvp-form textarea{
  padding:12px 12px;border-radius:10px;border:1px solid #ddd;background:#fff
}
.rsvp-form button{margin-top:12px}
.micro{font-size:12px;color:var(--muted)}

/* Versículo elegante */
.verse{
  text-align:center; max-width:820px; margin:0 auto; padding:28px 24px 0;
  color:#3a3a3a;
}
.verse q{font-style:italic}
.verse .ref{display:block;margin-top:6px;font-variant:small-caps;letter-spacing:.06em;color:var(--accent)}

/* Footer */
.footer{padding:36px 24px;text-align:center;color:var(--muted)}

/* Responsive */
@media (max-width: 900px){
  .photo-side{display:none}
}
@media (max-width: 680px){
  .rsvp-form .grid{grid-template-columns:1fr}
  .countdown{grid-template-columns:repeat(2,1fr)}
}

/* 1) Liberar a largura da figura do mapa */
.location{ max-width:100%; }            /* sobrescreve os 520px da regra antiga */

/* 2) Tornar o container "wide" realmente mais largo */
.container.wide{ max-width:1280px; }    /* ou 1200/1400px se preferir */

/* 3) Mantém a mesma altura via aspect-ratio */
.location .map-embed{
  width:100%;
  aspect-ratio: 4 / 1.5;   /* altura continua igual */
  border-radius:16px; overflow:hidden;
  border:1px solid #e6e6e6; box-shadow:0 6px 24px rgba(0,0,0,.06);
  background:#ddd;
}
.location .map-embed iframe{
  width:100%; height:100%; border:0; display:block; filter:grayscale(0%);
}

@media (min-width: 1200px){
  .location .map-embed{
    aspect-ratio: 5 / 2;
  }
}


/* Utilitários de espaçamento para seções específicas */
.section--compact .container{ padding-top:24px; padding-bottom:24px; }
.section--flush-top  .container{ padding-top:12px; }
.section--flush-bottom .container{ padding-bottom:12px; }

/* Verso mais justinho */
.verse{ padding:12px 24px 0; }     /* era 28px 24px 0 */

/* Footer um pouco mais enxuto */
.footer{ padding:24px 24px; }      /* era 36px 24px */

/* ===== Overlay de convite (acesso por lista) ===== */
body.is-locked { overflow: hidden; }
/* Quando bloqueado, aplica blur no conteúdo do site */
body.lock-blur header,
body.lock-blur main,
body.lock-blur footer,
body.lock-blur .nav {
  filter: blur(20px);
  pointer-events: none;
  user-select: none;
}


#invite-overlay{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.92); color:#fff;
}
.invite-modal{
  width:min(90vw, 420px);
  background:#111; border:1px solid #2b2b2b; border-radius:16px;
  padding:26px 22px; text-align:center; box-shadow:0 10px 40px rgba(0,0,0,.4);
}
.invite-modal h2{ margin:0 0 12px; font-family:'Playfair Display',serif; color:#fff; }
#inviteName{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid #333;
  background:#0e0e0e; color:#fff; outline:none; margin:8px 0 12px;
}
#inviteName::placeholder{ color:#9a9a9a; }
#inviteBtn{
  display:inline-block; padding:12px 18px; border-radius:999px; border:1px solid var(--accent);
  background:var(--accent); color:#fff; cursor:pointer;
}
#inviteBtn:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }
.invite-error{ color:#ffb3b3; font-size:14px; margin:8px 0 0; }

/* Efeito “desfocado” no conteúdo até liberar (opcional) */
.lock-blur main, .lock-blur header, .lock-blur .nav { filter: blur(2px); }

/* se o elemento tiver [hidden], some mesmo */
#invite-overlay[hidden]{
  display: none !important;
}

/* (opcional) transição de saída */
#invite-overlay{ opacity:1; transition: opacity .2s ease; }
#invite-overlay.fade-out{ opacity:0; pointer-events:none; }