/* ============================================================
   luxury.css — Camada "alto padrão" · Izabella Azeredo
   Token-driven (color-mix sobre tokens da marca). Consome o
   padrão de components/VisualLayer/visual-layer.template.css.
   Doc: creation/ui-designer/VISUAL-LAYER.md
   Trocar --lux-accent re-tematiza tudo automaticamente.
   ============================================================ */

:root {
  /* === Metal dourado da marca (Instagram) === */
  --lux-accent: #B48C4F;
  --lux-accent-light: #D4B87A;
  --lux-accent-dark: #96733F;
  --lux-shadow-tint: var(--color-text, #1E2423);
  --lux-ink: #2d2826;             /* neutro escuro p/ sombras internas */

  /* Derivados prontos (retheme automático ao trocar --lux-accent) */
  --gradient-lux-metal: linear-gradient(135deg, var(--lux-accent-light) 0%, var(--lux-accent) 48%, var(--lux-accent-dark) 100%);
  --gradient-lux-line: linear-gradient(90deg, transparent, var(--lux-accent) 25%, var(--lux-accent-light) 50%, var(--lux-accent) 75%, transparent);
  --shadow-lux-sm: 0 1px 2px color-mix(in srgb, var(--lux-shadow-tint) 5%, transparent), 0 4px 12px -4px color-mix(in srgb, var(--lux-shadow-tint) 12%, transparent);
  --shadow-lux-md: 0 2px 4px color-mix(in srgb, var(--lux-shadow-tint) 5%, transparent), 0 18px 40px -18px color-mix(in srgb, var(--lux-shadow-tint) 28%, transparent);
  --shadow-lux-lg: 0 2px 6px color-mix(in srgb, var(--lux-shadow-tint) 6%, transparent), 0 40px 80px -32px color-mix(in srgb, var(--lux-shadow-tint) 35%, transparent);
  --shadow-lux-glow: 0 0 0 1px color-mix(in srgb, var(--lux-accent) 22%, transparent), 0 18px 44px -18px color-mix(in srgb, var(--lux-accent) 40%, transparent);

  /* Aliases legados → derivados (compatibilidade das regras abaixo) */
  --color-gold: var(--lux-accent);
  --color-gold-light: var(--lux-accent-light);
  --color-gold-dark: var(--lux-accent-dark);
  --gradient-gold: var(--gradient-lux-metal);
  --gradient-gold-line: var(--gradient-lux-line);
  --shadow-gold-glow: var(--shadow-lux-glow);
}

/* ------------------------------------------------------------
   1. TEXTURA GLOBAL — grain fino + vinheta suave
   ------------------------------------------------------------ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Vinheta cinematográfica muito sutil nas bordas */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 80% at 50% 40%, transparent 60%, color-mix(in srgb, var(--lux-shadow-tint) 7%, transparent) 100%);
}

@media (prefers-reduced-motion: reduce) {
  body::after { opacity: .35; }
}

/* ------------------------------------------------------------
   2. ACENTO DOURADO — labels, headings, filetes
   ------------------------------------------------------------ */
.section__label {
  color: var(--color-gold-dark);
  gap: .85rem;
}
.section__label::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold));
  flex-shrink: 0;
}
.section__label::after {
  background: linear-gradient(90deg, var(--lux-accent), transparent);
  height: 1px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--lux-accent) 35%, transparent);
}

/* Filete dourado sob headings centrais */
.section__header--center h2 {
  position: relative;
  padding-bottom: .9rem;
}
.section__header--center h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 3.25rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-lux-metal);
  box-shadow: 0 0 10px color-mix(in srgb, var(--lux-accent) 40%, transparent);
}

/* Badge do hero — filete dourado + vidro refinado */
.badge {
  border: 1px solid color-mix(in srgb, var(--lux-accent) 32%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, var(--shadow-lux-sm);
}

/* ------------------------------------------------------------
   3. HERO — moldura dourada e profundidade
   ------------------------------------------------------------ */
.tier-premium .hero__frame,
.hero__frame {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.7),
    0 0 0 6px rgba(255,255,255,.5),
    0 30px 70px -24px color-mix(in srgb, var(--lux-shadow-tint) 40%, transparent),
    0 12px 28px -16px color-mix(in srgb, var(--lux-accent-dark) 28%, transparent);
}
.tier-premium .hero__frame::after,
.hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--lux-accent) 40%, transparent),
    inset 0 -80px 90px -60px color-mix(in srgb, var(--lux-ink) 40%, transparent);
  background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--lux-ink) 6%, transparent) 100%);
}

/* Selo flutuante do hero — dourado */
.hero__float-card {
  border: 1px solid color-mix(in srgb, var(--lux-accent) 28%, transparent);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--lux-shadow-tint) 18%, transparent);
}
.hero__float-card__stars { color: var(--lux-accent); }

/* ------------------------------------------------------------
   4. BOTÕES — refino premium + shine
   ------------------------------------------------------------ */
.tier-premium .btn--primary,
.btn--primary {
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 6px 20px -6px color-mix(in srgb, var(--color-primary) 55%, transparent),
    0 0 0 1px color-mix(in srgb, var(--lux-accent) 28%, transparent);
  letter-spacing: .01em;
}
.tier-premium .btn--primary:hover,
.tier-premium .btn--primary:focus-visible,
.btn--primary:hover,
.btn--primary:focus-visible {
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 12px 30px -8px color-mix(in srgb, var(--color-primary) 60%, transparent),
    0 0 0 1px color-mix(in srgb, var(--lux-accent) 45%, transparent);
}

/* Botão branco e verde recebem varredura de brilho */
.btn--white,
.btn--green {
  position: relative;
  overflow: hidden;
}
.btn--white::after,
.btn--green::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.4) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
.btn--white:hover::after,
.btn--green:hover::after {
  animation: luxShine 0.9s ease;
}
@keyframes luxShine {
  to { transform: translateX(120%); }
}

/* Contorno dourado no botão ghost ao passar */
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--lux-accent);
  color: var(--lux-accent-dark);
}

/* ------------------------------------------------------------
   5. CARDS — profundidade, vidro e filete dourado no hover
   ------------------------------------------------------------ */
.pain-card--premium,
.method-card--premium,
.incluso-feature,
.dep-card,
.faq-item,
.pq-card {
  box-shadow: var(--shadow-lux-md);
}

/* Filete dourado no topo, revelado no hover */
.pain-card--premium,
.method-card--premium,
.incluso-feature {
  position: relative;
}
.pain-card--premium::before,
.method-card--premium::before {
  z-index: 1;
}

@media (hover: hover) {
  .tier-premium .pain-card--premium:hover,
  .tier-premium .method-card--premium:hover,
  .tier-premium .incluso-feature:hover,
  .pain-card--premium:hover,
  .method-card--premium:hover,
  .incluso-feature:hover {
    box-shadow: var(--shadow-lux-lg);
    border-color: color-mix(in srgb, var(--lux-accent) 35%, transparent) !important;
  }
  .tier-premium .dep-card:hover,
  .tier-premium .faq-item:not([open]):hover,
  .dep-card:hover,
  .faq-item:not([open]):hover {
    box-shadow: var(--shadow-lux-lg);
    border-color: color-mix(in srgb, var(--lux-accent) 30%, transparent);
  }
}

/* Ícones dos cards com anel dourado sutil */
.pain-card--premium .pain-card__icon,
.method-card__icon,
.incluso-feature__icon {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lux-accent) 20%, transparent), 0 8px 20px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

/* FAQ aberto — acento dourado */
.tier-premium .faq-item[open],
.faq-item[open] {
  border-color: color-mix(in srgb, var(--lux-accent) 40%, transparent);
  box-shadow: var(--shadow-lux-md);
}
.faq-item[open] summary::after {
  background: var(--gradient-lux-metal);
  color: #fff;
  border-color: transparent;
}

/* Depoimento estrelas em dourado consistente */
.dep-card__stars,
.dep-featured__stars { color: var(--lux-accent); }

/* ------------------------------------------------------------
   6. QUOTE BANNER / CTA — brilho dourado
   ------------------------------------------------------------ */
.quote-banner__author-line {
  background: var(--gradient-lux-line);
  height: 2px;
  width: 3rem;
}

/* Filete dourado no topo do highlight incluso */
.incluso-highlight::before {
  background: var(--gradient-lux-metal) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--lux-accent) 40%, transparent);
}

/* ------------------------------------------------------------
   7. NAV — sublinhado dourado animado
   ------------------------------------------------------------ */
@media (min-width: 769px) {
  .nav__list a::after {
    background: var(--gradient-lux-metal) !important;
  }
  .nav__list a:hover {
    color: var(--lux-accent-dark);
  }
}

/* ------------------------------------------------------------
   8. CONTATO — cartões com vidro e borda dourada
   ------------------------------------------------------------ */
.contact-card {
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 18px 40px -20px rgba(0,0,0,.4);
  transition: transform .35s var(--ease-out-soft), border-color .35s ease, box-shadow .35s ease;
}
@media (hover: hover) {
  .contact-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--lux-accent-light) 50%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), var(--shadow-lux-glow);
  }
}
.contact-eyebrow { color: var(--lux-accent-light); }

/* ------------------------------------------------------------
   9. SCROLLBAR + seleção — detalhe dourado
   ------------------------------------------------------------ */
::selection {
  background: color-mix(in srgb, var(--lux-accent) 28%, transparent);
  color: var(--color-text);
}

/* ------------------------------------------------------------
   10. MOTION — reveal do filete dos labels
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .reveal .section__label::after,
  .reveal .section__label::before {
    transition: width .6s var(--ease-out-soft) .15s;
  }
}

/* ------------------------------------------------------------
   11. IZABELLA — tipografia Instagram (azul escuro + dourado)
   ------------------------------------------------------------ */
.tier-premium h1,
.tier-premium h2,
.tier-premium .section__header h2,
.tier-premium .incluso-main h2,
.tier-premium .sobre-text h2 {
  color: var(--color-blue-dark);
}

/* Títulos em fundos azuis escuros */
.tier-premium .contact-panel h2,
.tier-premium .cta-band h2 {
  color: var(--color-white);
}

.tier-premium .contact-panel h2 .destaque,
.tier-premium .cta-band h2 .destaque {
  color: var(--lux-accent-light);
}

.tier-premium .destaque,
.tier-premium .cta-band h2 em {
  font-style: italic;
  color: var(--lux-accent-dark);
  font-family: var(--font-display);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: currentColor;
}

/* Botões azul (padrão hero) — exceto card Consulta particular */
.tier-premium .btn--primary {
  background: var(--gradient-hero-cta);
  background-color: var(--color-blue-dark);
  color: var(--color-white);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 6px 20px -6px color-mix(in srgb, var(--color-blue-dark) 55%, transparent),
    0 0 0 1px color-mix(in srgb, var(--color-blue-dark-mid) 35%, transparent);
}

.tier-premium .btn--primary:hover,
.tier-premium .btn--primary:focus-visible {
  background: linear-gradient(135deg, var(--color-blue-dark-hover) 0%, var(--color-blue-dark) 50%, var(--color-blue-dark-hover) 100%);
  color: var(--color-white);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 12px 30px -8px color-mix(in srgb, var(--color-blue-dark) 60%, transparent),
    0 0 0 1px color-mix(in srgb, var(--color-blue-dark-mid) 45%, transparent);
}

/* Consulta particular — mantém dourado */
.tier-premium .incluso-highlight .btn--primary,
.tier-premium .incluso-highlight--premium .btn--primary {
  background: var(--gradient-lux-metal);
  background-color: var(--lux-accent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 6px 20px -6px color-mix(in srgb, var(--lux-accent) 55%, transparent),
    0 0 0 1px color-mix(in srgb, var(--lux-accent) 28%, transparent);
}

.tier-premium .incluso-highlight .btn--primary:hover,
.tier-premium .incluso-highlight .btn--primary:focus-visible,
.tier-premium .incluso-highlight--premium .btn--primary:hover,
.tier-premium .incluso-highlight--premium .btn--primary:focus-visible {
  background: linear-gradient(135deg, var(--lux-accent-dark) 0%, var(--lux-accent) 50%, var(--lux-accent-dark) 100%);
  color: var(--color-white);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 12px 30px -8px color-mix(in srgb, var(--lux-accent) 60%, transparent),
    0 0 0 1px color-mix(in srgb, var(--lux-accent) 45%, transparent);
}

.tier-premium .badge {
  color: var(--color-primary);
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
}

.tier-premium .section__label {
  font-family: var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.72rem;
}