/* ============================================================
   Convida Digital — Link-in-bio (dark bento)
   Adaptado do template "LinksPage" (Framer) para a nossa marca
   ============================================================ */

:root{
  --bg:#14181D;
  --card-elevated:#1E2530;
  --card-elevated-hover:#252D3A;
  --ivory:#F7F4EE;
  --ink:#1F2A37;
  --ink-2:#161F29;
  --bronze:#B08D57;
  --bronze-dark:#8F7040;
  --gold:#E8C77E;
  --sage:#6B7A5E;
  --sage-dark:#4E5C44;
  --muted: rgba(247,244,238,0.56);
  --border: rgba(247,244,238,0.08);

  --n-infantil:#C9A25C;
  --n-15anos:#B08D57;
  --n-casamento:#8A7148;
  --n-corporativo:#6B7A5E;

  --radius-lg:22px;
  --radius-md:16px;
  --radius-pill:999px;

  --font-display:'Newsreader', Georgia, serif;
  --font-body:'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --ease:cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ivory);
  font-family:var(--font-body);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2{ margin:0; }
p{ margin:0; }
em{ font-style:italic; }

.wrap{
  max-width:460px;
  margin:0 auto;
  padding:28px 16px 48px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* ---------- Header ---------- */
.head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}
.head-id{ display:flex; align-items:center; gap:12px; min-width:0; }
.avatar{
  width:56px; height:56px;
  border-radius:16px;
  flex-shrink:0;
}
.head-text{ min-width:0; }
.head-name{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:20px;
  color:var(--ivory);
  white-space:nowrap;
}
.head-name em{ color:var(--gold); font-style:italic; }
.head-tagline{
  margin-top:2px;
  font-size:12.5px;
  color:var(--muted);
  white-space:nowrap;
}

.icon-btn{
  flex-shrink:0;
  display:flex; align-items:center; gap:7px;
  padding:10px 14px;
  border-radius:var(--radius-pill);
  background:var(--card-elevated);
  border:1px solid var(--border);
  font-size:12.5px; font-weight:600;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.icon-btn:hover{ background:var(--card-elevated-hover); transform:translateY(-1px); }

/* ---------- Generic card ---------- */
.card{
  position:relative;
  display:block;
  border-radius:var(--radius-lg);
  padding:18px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.card:hover{ transform:translateY(-2px); }
.card:active{ transform:translateY(0) scale(0.98); }

.card-light{
  background:var(--ivory);
  color:var(--ink);
}
.card-wide{
  display:flex;
  align-items:center;
  gap:14px;
}
.card-text{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.card-text strong{ font-size:14.5px; font-weight:700; }
.card-text small{ font-size:12px; color:var(--bronze-dark); opacity:0.85; }

.badge-icon{
  flex-shrink:0;
  width:38px; height:38px;
  border-radius:11px;
  display:flex; align-items:center; justify-content:center;
}
.badge-icon--ink{ background:var(--ink); color:var(--gold); }
.badge-icon--light{ background:rgba(255,255,255,0.22); color:#fff; }
.badge-icon--bronze{ background:rgba(176,141,87,0.16); color:var(--gold); }

.link-out{
  flex-shrink:0;
  width:26px; height:26px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(31,42,55,0.08);
  color:var(--ink);
}
.link-out--light{ background:rgba(255,255,255,0.25); color:#fff; }

/* ---------- Bento pair ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.card-accent{
  color:#fff;
  min-height:150px;
  display:flex;
  flex-direction:column;
}
.card-bronze{ background:linear-gradient(155deg,#C9A25C 0%, var(--bronze) 55%, var(--bronze-dark) 100%); }
.card-sage{ background:linear-gradient(155deg,#84987A 0%, var(--sage) 55%, var(--sage-dark) 100%); }

.card-top-row{ display:flex; align-items:center; justify-content:space-between; }
.card-tag{
  margin-top:14px;
  align-self:flex-start;
  font-size:10px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  background:rgba(255,255,255,0.22);
  padding:3px 9px;
  border-radius:var(--radius-pill);
}
.card-title{
  margin-top:14px;
  font-size:16.5px;
  font-weight:800;
  line-height:1.2;
}
.card-sub{
  margin-top:4px;
  font-size:12px;
  color:rgba(255,255,255,0.85);
}
.card-price{
  margin-top:auto;
  padding-top:14px;
  font-size:15px;
  font-weight:800;
}

/* ---------- Section headers ---------- */
.section-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-top:10px;
}
.section-row h2{
  font-size:21px;
  font-weight:800;
  letter-spacing:-0.01em;
}
.see-all{
  font-size:12.5px;
  font-weight:600;
  color:var(--muted);
  display:flex; align-items:center; gap:4px;
}
.see-all span{ transition:transform .2s var(--ease); }
.see-all:hover span{ transform:translateX(3px); }
.section-caption{
  margin-top:-6px;
  font-size:12.5px;
  color:var(--muted);
}

/* ---------- Occasion mini cards ---------- */
.grid-occasions{ margin-top:2px; }
.mini-card{
  border-radius:var(--radius-md);
  padding:16px;
  min-height:84px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:#fff;
  transition:transform .2s var(--ease);
}
.mini-card:hover{ transform:translateY(-2px); }
.mini-card strong{ font-size:13.5px; font-weight:700; display:block; }
.mini-card small{ font-size:11px; opacity:0.8; display:block; margin-top:2px; }
.mini-casamento{ background:linear-gradient(155deg,#A2896A, var(--n-casamento)); }
.mini-15anos{ background:linear-gradient(155deg,#C9A25C, var(--n-15anos)); }
.mini-corporativo{ background:linear-gradient(155deg,#84987A, var(--n-corporativo)); }
.mini-infantil{ background:linear-gradient(155deg,#DDBD7E, var(--n-infantil)); }

/* ---------- FAQ preview rows ---------- */
.faq-rows{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.faq-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:15px 16px;
  border-radius:var(--radius-md);
  background:var(--card-elevated);
  border:1px solid var(--border);
  font-size:13.5px;
  font-weight:600;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.faq-row:hover{ background:var(--card-elevated-hover); transform:translateY(-1px); }
.faq-row svg{ flex-shrink:0; color:var(--muted); }

/* ---------- Subscribe card ---------- */
.subscribe-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:stretch;
}
.subscribe-text strong{ font-size:14.5px; }
.subscribe-text small{ color:var(--bronze-dark); }
.btn-subscribe{
  display:flex; align-items:center; justify-content:center;
  padding:13px;
  border-radius:var(--radius-pill);
  background:var(--ink);
  color:var(--ivory);
  font-size:13.5px;
  font-weight:700;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.btn-subscribe:hover{ background:var(--ink-2); transform:translateY(-1px); }

/* ---------- List rows (social/contact) ---------- */
.list-rows{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:4px;
}
.list-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:var(--radius-md);
  background:var(--card-elevated);
  border:1px solid var(--border);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.list-row:hover{ background:var(--card-elevated-hover); transform:translateY(-1px); }
.list-row-text{ flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
.list-row-text strong{ font-size:13.5px; font-weight:700; }
.list-row-text small{ font-size:11.5px; color:var(--muted); }

/* ---------- Footer ---------- */
.foot{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:16px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
.foot-mark{ border-radius:7px; opacity:0.9; }
.foot-text{ display:flex; flex-direction:column; gap:1px; }
.foot-text strong{ font-size:12.5px; }
.foot-text span{ font-size:11px; color:var(--muted); }

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s var(--ease), transform .65s var(--ease);
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}
.grid-2 .reveal:nth-child(2){ transition-delay:.09s; }
.grid-occasions .reveal:nth-child(2){ transition-delay:.06s; }
.grid-occasions .reveal:nth-child(3){ transition-delay:.12s; }
.grid-occasions .reveal:nth-child(4){ transition-delay:.18s; }
.faq-rows .reveal:nth-child(2){ transition-delay:.08s; }
.list-rows .reveal:nth-child(2){ transition-delay:.08s; }
.list-rows .reveal:nth-child(3){ transition-delay:.16s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- Responsive ---------- */
@media (min-width:480px){
  .wrap{ padding-top:40px; }
  .head-name{ font-size:22px; }
}
@media (max-width:360px){
  .card-title{ font-size:15px; }
  .card-price{ font-size:14px; }
}