/* assets/css/app.css — Paleta oficial Milhas Mágicas (light + magenta + gold mate) */

/* ===== Fonte oficial da marca: Blushing Rose ===== */
@font-face {
  font-family: 'Blushing Rose';
  src: url('../fonts/blushing-rose.ttf') format('truetype');
  font-weight: 400;  /* Só temos 1 peso real — browser sintetiza bold quando pedimos 700 */
  font-style: normal;
  font-display: swap;
}

:root {
  --mm-bg:           #FAF6F0;  /* off-white quente */
  --mm-bg-warm:      #F5EBE0;
  --mm-card:         #FFFFFF;
  --mm-fg:           #3A0A1F;  /* wine escuro */
  --mm-magenta:      #8C175D;  /* primária — Blushing Rose */
  --mm-magenta-hover:#A12970;
  --mm-magenta-soft: #F5E6EE;
  --mm-gold:         #D6A740;  /* gold mate oficial */
  --mm-gold-hover:   #E0B559;
  --mm-gold-soft:    #FBF4E3;
  --mm-subtle:       #7A5C68;
  --mm-border:       #E8D5DD;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: var(--mm-bg);
  background-image:
    radial-gradient(ellipse at top right, rgba(214, 167, 64, 0.06), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(140, 23, 93, 0.05), transparent 55%);
  background-attachment: fixed;
  color: var(--mm-fg);
}

.font-display {
  font-family: 'Blushing Rose', 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-synthesis: weight style;
  /* Blushing Rose só tem 1 peso real. Engrossa via stroke pra dar presença bold. */
  -webkit-text-stroke: 0.2px currentColor;
  text-stroke: 0.2px currentColor;
  paint-order: stroke fill;
}

/* ===== Animações de transição entre telas ===== */
@keyframes mm-fade-in {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}
.fade-in  { animation: mm-fade-in 300ms ease-out forwards; }
.fade-out { opacity: 0; transform: translateX(-30px); transition: all 300ms ease-in; }

/* ===== Multi-select selected state (era gold, agora magenta soft) ===== */
.selected-multi {
  background-color: var(--mm-magenta-soft) !important;
  border-color: var(--mm-magenta) !important;
}

/* ===== CTA primário — sombra magenta sutil ===== */
.cta-shadow {
  box-shadow: 0 4px 20px rgba(140, 23, 93, 0.20);
}

/* ===== CTA pulse — pra chamar atenção sem ser irritante ===== */
@keyframes mm-cta-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 20px rgba(140, 23, 93, 0.20);
  }
  50% {
    transform: scale(1.025);
    box-shadow: 0 8px 28px rgba(140, 23, 93, 0.40);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .cta-pulse {
    animation: mm-cta-pulse 1.8s ease-in-out infinite;
  }
}

/* Continue button disabled state */
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Progress bar transition */
#progress-bar {
  transition: width 400ms ease-out;
}

/* ===== Keyboard focus indicator pra option cards ===== */
.option-card:focus-visible {
  outline: none;
  border-color: var(--mm-magenta);
  box-shadow: 0 0 0 3px rgba(140, 23, 93, 0.25);
}

/* ===== Mobile touch feedback ===== */
@media (hover: none) {
  .option-card:active { transform: scale(0.98); }
}

/* ============================================================
   Utility classes editoriais (estilo magazine de viagem)
   ============================================================ */

/* Eyebrow — texto pequeno uppercase letterspaced + linhas finas dourado */
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mm-magenta);
}
.eyebrow::before, .eyebrow::after {
  content: '';
  flex: 0 0 28px;
  height: 1px;
  background-color: var(--mm-gold);
  opacity: 0.7;
}

/* Eyebrow standalone — sem linhas (uso em cards/sections internas) */
.eyebrow-plain {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mm-magenta);
}

/* Numerais display — italic Fraunces magenta (proof points) */
.stat-num {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-style: italic;
  color: var(--mm-magenta);
}

/* Headline editorial — italic na palavra-âncora */
.editorial-italic {
  font-style: italic;
  font-weight: 500;
}

/* Rule duplo — duas linhas finas paralelas estilo magazine */
.rule-double {
  display: block;
  width: 64px;
  margin: 0 auto;
  border-top: 1px solid rgba(214, 167, 64, 0.65);
  border-bottom: 1px solid rgba(214, 167, 64, 0.45);
  height: 4px;
}

/* Hero block (pra paywall) — fundo magenta com texto off-white */
.hero-magenta {
  background-color: var(--mm-magenta);
  color: var(--mm-bg);
}
.hero-magenta .stat-num { color: var(--mm-gold); }