/* ===========================================================================
   Sistema de design BR Citas — Obsidian & Ivory
   Tipografia: Playfair Display (títulos) + Inter (corpo)
   Acento (#E84855) EXCLUSIVO para favoritos e badges
   Home em dark mode localizado (#0A0A0A); páginas internas em light (ivory)
   =========================================================================== */

:root {
  /* Base (ivory) */
  --color-bg:          #f7f6f3;
  --color-surface:     #ffffff;
  --color-text:        #151c27;
  --color-text-muted:  #5c6470;
  --color-border:      #e7e4dd;

  /* Acento — EXCLUSIVO para favoritos e badges */
  --color-accent:      #e84855;
  --color-accent-soft: #fee2e4;

  /* Home / dark */
  --color-home-bg:     #0a0a0a;
  --color-home-elev:   #141414;
  --color-home-text:   #f5f5f5;
  --color-home-muted:  #9a9a9a;
  --color-gold:        #c8a96a;

  /* Espaçamento */
  --gap-xs: 8px;  --gap-sm: 12px; --gap-md: 16px;
  --gap-lg: 24px; --gap-xl: 40px; --gap-2xl: 64px;
  --margin-mobile: 20px; --margin-desktop: 40px;
  --maxw: 1200px;

  /* Tipografia */
  --font-serif: 'Playfair Display', 'Georgia', serif;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;

  --radius: 14px;
  --duration-fast: 150ms;
  --shadow-sm: 0 1px 3px rgba(21,28,39,.06), 0 1px 2px rgba(21,28,39,.04);
  --shadow-md: 0 10px 30px rgba(21,28,39,.08);
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  font-size: 16px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; width: 100%; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 700; line-height: 1.15; color: var(--color-text); }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--margin-mobile); }
@media (min-width: 768px) { .container { padding-inline: var(--margin-desktop); } }

.section { padding-block: var(--gap-2xl); }
.eyebrow {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--color-accent);
}
.muted { color: var(--color-text-muted); }
.center { text-align: center; }
.lead { font-size: 1.15rem; color: var(--color-text-muted); max-width: 60ch; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: .95rem;
  border: 1px solid transparent; cursor: pointer; transition: all var(--duration-fast) ease;
}
.btn--primary { background: var(--color-text); color: #fff; }
.btn--primary:hover { background: #000; transform: translateY(-1px); }
.btn--accent { background: var(--color-accent); color: #fff; }
.btn--accent:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn--ghost { background: transparent; border-color: currentColor; }
.btn--gold { background: var(--color-gold); color: #1a1407; }
.btn--light { background: #fff; color: #0a0a0a; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner { display: flex; align-items: center; gap: var(--gap-lg); height: 68px; }
.brand { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-serif); font-size: 1.4rem; font-weight: 800; letter-spacing: .01em; }
.brand .brand__dot { color: var(--color-accent); }
.nav { display: none; gap: 22px; margin-left: auto; align-items: center; }
.nav a { font-size: .92rem; color: var(--color-text-muted); font-weight: 500; }
.nav a:hover, .nav a.is-active { color: var(--color-text); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.icon-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--color-border); background: #fff; }
.icon-link .badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--color-accent); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; display: flex; align-items: center; justify-content: center;
}
@media (min-width: 980px) { .nav { display: flex; } .header-actions { margin-left: 0; } }

/* ---------------------------------------------------------------- footer */
.site-footer { background: #0a0a0a; color: var(--color-home-muted); margin-top: var(--gap-2xl); }
.site-footer .container { padding-block: var(--gap-2xl); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-xl); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.site-footer h4 { color: #fff; font-family: var(--font-sans); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer a { display: block; padding: 5px 0; color: var(--color-home-muted); font-size: .92rem; }
.site-footer a:hover { color: #fff; }
.site-footer .brand { color: #fff; }
.footer-bottom { border-top: 1px solid #222; margin-top: var(--gap-xl); padding-top: var(--gap-lg); font-size: .82rem; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }

/* ---------------------------------------------------------------- home (dark) */
.is-home { background: var(--color-home-bg); color: var(--color-home-text); }
.is-home .hero { position: relative; padding-block: clamp(64px, 12vw, 140px); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; background:
  radial-gradient(60% 80% at 75% 10%, rgba(232,72,85,.18), transparent 60%),
  radial-gradient(50% 60% at 10% 90%, rgba(200,169,106,.12), transparent 60%); }
.hero__content { position: relative; max-width: 720px; }
.hero h1 { color: #fff; font-size: clamp(2.6rem, 6vw, 4.4rem); letter-spacing: -.01em; }
.hero h1 em { font-style: italic; color: var(--color-gold); }
.hero p { color: var(--color-home-muted); font-size: 1.15rem; margin-top: var(--gap-lg); max-width: 52ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--gap-xl); }
.is-home .stats { display: flex; flex-wrap: wrap; gap: var(--gap-2xl); margin-top: var(--gap-2xl); }
.stat .stat__num { font-family: var(--font-serif); font-size: 2.4rem; color: #fff; }
.stat .stat__lbl { color: var(--color-home-muted); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }

.is-home .site-header { background: rgba(10,10,10,.7); border-bottom-color: #1d1d1d; }
.is-home .brand { color: #fff; }
.is-home .nav a { color: var(--color-home-muted); }
.is-home .nav a:hover, .is-home .nav a.is-active { color: #fff; }
.is-home .icon-link { background: #161616; border-color: #2a2a2a; color: #fff; }

.dark-section { background: var(--color-home-elev); color: var(--color-home-text); }

/* ---------------------------------------------------------------- page hero (light) */
.page-hero { padding-block: var(--gap-2xl) var(--gap-xl); border-bottom: 1px solid var(--color-border); }
.page-hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
.page-hero p { margin-top: var(--gap-md); }

/* ---------------------------------------------------------------- profile grid + card */
.profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-md); }
@media (min-width: 768px) { .profile-grid { grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); } }
@media (min-width: 1100px){ .profile-grid { grid-template-columns: repeat(4, 1fr); } }

.pcard { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; box-shadow: var(--shadow-sm); display: block; }
.pcard__img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 3rem; color: rgba(255,255,255,.9); }
.pcard__overlay { position: absolute; inset: auto 0 0 0; padding: 16px 14px 14px; background: linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.45) 55%, transparent 100%); color: #fff; }
.pcard__name { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.pcard__verified { color: var(--color-gold); font-size: .85rem; }
.pcard__loc { font-size: .82rem; color: rgba(255,255,255,.78); }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; }
.pcard__fav { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 999px; background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; color: #fff; }
.pcard__fav svg { width: 18px; height: 18px; }
.pcard:hover .pcard__img { transform: scale(1.04); }
.pcard__img { transition: transform .4s ease; }
.pcard__premium { position: absolute; top: 12px; left: 12px; background: var(--color-gold); color: #1a1407; font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }

/* ---------------------------------------------------------------- region cards */
.region-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-lg); }
@media (min-width: 640px) { .region-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .region-grid { grid-template-columns: repeat(3, 1fr); } }
.region-card { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; color: #fff; box-shadow: var(--shadow-md); }
.region-card__name { font-family: var(--font-serif); font-size: 1.6rem; }
.region-card__count { font-size: .85rem; color: rgba(255,255,255,.82); margin-top: 4px; }
.region-card__arrow { position: absolute; top: 20px; right: 20px; opacity: .85; }

/* ---------------------------------------------------------------- generic cards / grids */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--gap-lg); box-shadow: var(--shadow-sm); }
.card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--gap-lg); }
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--gap-lg); }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------- plans */
.plan-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-lg); }
@media (min-width: 880px) { .plan-grid { grid-template-columns: repeat(3, 1fr); } }
.plan { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--gap-xl); display: flex; flex-direction: column; }
.plan.is-featured { border-color: var(--color-text); box-shadow: var(--shadow-md); position: relative; }
.plan.is-featured::before { content: "Mais popular"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--color-accent); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; }
.plan__price { font-family: var(--font-serif); font-size: 2.6rem; margin: 12px 0 4px; }
.plan__price small { font-family: var(--font-sans); font-size: .9rem; color: var(--color-text-muted); font-weight: 500; }
.plan ul { list-style: none; margin: var(--gap-lg) 0; display: flex; flex-direction: column; gap: 10px; }
.plan li { display: flex; gap: 10px; font-size: .92rem; color: var(--color-text-muted); }
.plan li::before { content: "✓"; color: var(--color-accent); font-weight: 700; }
.plan .btn { margin-top: auto; justify-content: center; }

/* ---------------------------------------------------------------- search */
.search-box { display: flex; gap: 10px; background: #fff; border: 1px solid var(--color-border); border-radius: 999px; padding: 8px 8px 8px 20px; box-shadow: var(--shadow-sm); max-width: 640px; }
.search-box input { flex: 1; border: none; outline: none; font-size: 1rem; font-family: var(--font-sans); background: transparent; color: var(--color-text); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--gap-md); }
.chip { font-size: .85rem; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--color-border); background: #fff; color: var(--color-text-muted); }
.chip.is-active { background: var(--color-text); color: #fff; border-color: var(--color-text); }

/* ---------------------------------------------------------------- profile detail */
.profile-detail { display: grid; grid-template-columns: 1fr; gap: var(--gap-xl); }
@media (min-width: 900px) { .profile-detail { grid-template-columns: 420px 1fr; gap: var(--gap-2xl); } }
.profile-gallery { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 6rem; color: rgba(255,255,255,.92); box-shadow: var(--shadow-md); }
.profile-meta dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); margin-top: var(--gap-md); }
.profile-meta dd { font-size: 1rem; font-weight: 600; }
.feature-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--gap-md); }
.feature-list .tag { background: var(--color-accent-soft); color: var(--color-accent); }

/* ---------------------------------------------------------------- editorial / vlife */
.article-canvas { max-width: 720px; margin: 0 auto; }
.article-canvas p { margin-bottom: var(--gap-lg); font-size: 1.08rem; }
.article-canvas h2 { font-size: 1.7rem; margin: var(--gap-xl) 0 var(--gap-md); }
.editorial-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-xl); }
@media (min-width: 760px) { .editorial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px){ .editorial-grid { grid-template-columns: repeat(3, 1fr); } }
.editorial-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.editorial-card__cover { aspect-ratio: 16/10; display: flex; align-items: flex-end; padding: 16px; color: #fff; }
.editorial-card__cat { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; background: rgba(0,0,0,.35); padding: 4px 10px; border-radius: 999px; }
.editorial-card__body { padding: var(--gap-lg); }
.editorial-card__body h3 { font-size: 1.2rem; margin-bottom: 8px; }
.editorial-card__meta { font-size: .8rem; color: var(--color-text-muted); margin-top: 12px; }

/* vlife hub nav */
.vlife-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.vlife-nav a { font-size: .85rem; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--color-border); background: #fff; color: var(--color-text-muted); }
.vlife-nav a.is-active, .vlife-nav a:hover { background: var(--color-text); color: #fff; border-color: var(--color-text); }

/* ---------------------------------------------------------------- forms */
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-md); max-width: 560px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .82rem; font-weight: 600; }
.field input, .field textarea, .field select { padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 10px; font: inherit; background: #fff; }
.field textarea { min-height: 120px; resize: vertical; }

/* ---------------------------------------------------------------- faq / accordion */
.faq-item { border-bottom: 1px solid var(--color-border); padding: var(--gap-lg) 0; }
.faq-item h3 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.faq-item p { color: var(--color-text-muted); }

/* ---------------------------------------------------------------- misc */
.notice { background: var(--color-accent-soft); border: 1px solid #f6c9cd; color: #8a2530; border-radius: var(--radius); padding: var(--gap-lg); }
.badge-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent); }
.divider { height: 1px; background: var(--color-border); margin-block: var(--gap-2xl); }
.empty-state { text-align: center; padding: var(--gap-2xl) 0; color: var(--color-text-muted); }
.empty-state svg { width: 48px; height: 48px; opacity: .4; margin: 0 auto var(--gap-md); }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }