/* ===========================================================
   CORUJÃO PLAY — Midnight Cinema rebrand, v2
   Mobile-first, editorial cinema language
   =========================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

:root {
  --ink:        #050507;
  --ink-2:      #0a070a;
  --ink-3:      #120a0d;
  --surface:    #1a0d10;
  --surface-2:  #281418;
  --line:       #3a1518;
  --line-soft:  #1a0a0c;

  --paper:      #f1ead8;
  --paper-2:    #e2d9c0;
  --text:       #ece5d1;
  --text-dim:   #9a9684;
  --text-mute:  #5e5b50;

  --coral:      #ff3a1f;
  --coral-hi:   #ff6a3c;
  --coral-deep: #c41200;
  --coral-glow: rgba(255, 70, 30, 0.6);
  --amber-hot:  #ff8a00;
  --gold:       #ffb83a;
  --mint:       #6ec79b;
  --crimson:    #ff2200;

  --font-display: 'Big Shoulders Display','Anton',system-ui,sans-serif;
  --font-serif:   'Instrument Serif',Georgia,serif;
  --font-body:    'Geist',-apple-system,system-ui,sans-serif;
  --font-mono:    'JetBrains Mono',ui-monospace,monospace;

  --maxw: 1280px;
}

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Film grain + scanline */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 2000;
  pointer-events: none;
  opacity: .10;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1, 0 0 0 0 0.93, 0 0 0 0 0.83, 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 1900;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 80% at 50% 50%, transparent 50%, rgba(0,0,0,.45) 100%);
}

img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 18px;
  position: relative;
  z-index: 5;
}
@media (min-width: 768px) { .wrap { padding: 0 32px; } }

/* ============ TOPSTRIP ============ */
.topstrip {
  position: relative;
  z-index: 60;
  background:
    linear-gradient(90deg,
      #8a0014 0%,
      #c4001a 18%,
      #ff1f3d 38%,
      #ff4d00 62%,
      #ff8a00 82%,
      #ffb83a 100%);
  border-bottom: 1px solid rgba(0,0,0,.3);
  box-shadow: 0 6px 24px -8px rgba(255,31,61,.35), inset 0 -1px 0 rgba(0,0,0,.25);
}
.topstrip-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: -.005em;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
@media (min-width: 768px) {
  .topstrip-banner { font-size: 15px; padding: 14px 18px; gap: 14px; }
}
.topstrip-banner strong {
  font-weight: 700;
  color: #ffffff;
}
.topstrip-msg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.topstrip-plus {
  display: inline-block;
  font-weight: 800;
  color: #ffffff;
  font-size: 1.05em;
  opacity: .85;
  margin: 0 2px;
}
.topstrip-dot {
  display: inline-block;
  width: 9px; height: 9px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 0 12px rgba(255,255,255,.6);
  animation: pulse 1.4s infinite;
  flex-shrink: 0;
}

/* Legacy variants (kept so tweaks "dark/warm/coral" don't break — but no longer used by default) */
body[data-topbar="warm"] .topstrip,
body[data-topbar="dark"] .topstrip,
body[data-topbar="coral"] .topstrip { /* gradient is the new default; tweaks no-op */ }
@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.7); }
}

/* ============ HEADER ============ */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s, backdrop-filter .3s;
}
.header.scrolled {
  border-bottom-color: var(--line-soft);
  background: rgba(10,12,20,.92);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
}

.logo {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--paper);
  text-transform: lowercase;
}
.logo .tri {
  display: inline-block;
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 11px solid var(--coral);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  transform: translateY(-1px);
  filter: drop-shadow(0 0 8px var(--coral-glow));
}
@media (min-width: 768px) {
  .logo { font-size: 32px; }
  .logo .tri { border-left-width: 13px; border-top-width: 8px; border-bottom-width: 8px; }
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--coral);
  color: #1a0a02;
  font-weight: 600;
  font-size: 13px;
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 8px 20px -8px var(--coral-glow);
  transition: transform .15s, background .2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.header-cta:hover { background: var(--coral-hi); transform: translateY(-1px); }
.header-cta svg { width: 12px; height: 12px; }

/* ============ HERO ============ */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 92vh;
  min-height: 92svh;
  padding: 0;
  background: var(--ink);
}
@media (min-width: 900px) {
  .hero { min-height: 100vh; min-height: 100svh; }
}

/* Hero background: full-bleed cinematic poster wall (atmosphere, not focus) */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  pointer-events: none;
  /* Heavily darkened + desaturated so posters read as TEXTURE */
  filter: saturate(.45) brightness(.42) contrast(1.05);
  opacity: .85;
}
@media (min-width: 700px) {
  .hero-bg { grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 6px; }
}
@media (min-width: 1100px) {
  .hero-bg { grid-template-columns: repeat(9, 1fr); }
}

/* Vignette: heavy dark center to keep posters visible at edges only, focus on headline */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* center darkening — pulls focus inward */
    radial-gradient(ellipse 75% 55% at 50% 55%, rgba(10,12,20,.92) 0%, rgba(10,12,20,.78) 35%, rgba(10,12,20,.55) 70%, rgba(10,12,20,.7) 100%),
    /* top/bottom letterbox feel */
    linear-gradient(180deg, rgba(10,12,20,.85) 0%, rgba(10,12,20,.2) 14%, rgba(10,12,20,.0) 40%, rgba(10,12,20,.55) 80%, var(--ink) 100%);
}

/* Warm spotlight — coral glow rising from bottom-left, mimics projector light */
.hero-spotlight {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 18% 88%, rgba(226,106,58,.32) 0%, rgba(226,106,58,.08) 35%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 10%, rgba(226,106,58,.10) 0%, transparent 50%);
  mix-blend-mode: screen;
}

.poster-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  will-change: transform;
}
@media (min-width: 700px) { .poster-col { gap: 6px; } }
.poster-col:nth-child(odd)  { animation: drift-up 90s linear infinite; }
.poster-col:nth-child(even) { animation: drift-down 110s linear infinite; }
.poster-col:nth-child(3n)   { animation-duration: 75s; }
.poster-col:nth-child(5n)   { animation-duration: 130s; }
.poster-col:nth-child(7n)   { animation-duration: 95s; }

/* One column per "row" gets a subtle live highlight — a poster occasionally
   pulses back to full brightness, like a movie reel passing through the gate */
.poster-col .poster:nth-child(4n) { animation: spotlight-pulse 14s ease-in-out infinite; }
.poster-col:nth-child(2n) .poster:nth-child(4n) { animation-delay: -5s; }
.poster-col:nth-child(3n) .poster:nth-child(4n) { animation-delay: -9s; }

@keyframes drift-up   { from { transform: translateY(0); }   to { transform: translateY(-50%); } }
@keyframes drift-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes spotlight-pulse {
  0%, 80%, 100% { filter: brightness(1) saturate(1); }
  40%, 50%      { filter: brightness(2.4) saturate(2); }
}

.hero-content {
  position: relative;
  z-index: 10;
  padding: 24px 18px 70px;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}
@media (min-width: 768px) {
  .hero-content { padding: 48px 32px 90px; }
}

/* tiny eyebrow above headline — discreet, mono, brand-flavored */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 11px;
  background: rgba(10,12,20,.55);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-eyebrow .sep { color: var(--text-mute); }
.hero-eyebrow .dot-pulse {
  width: 7px; height: 7px;
  background: var(--coral);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(226,106,58,.22), 0 0 12px var(--coral-glow);
  animation: pulse 1.4s infinite;
}

.hero-kicker {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 4.5vw, 26px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--paper);
  margin: 0 0 22px;
  text-transform: uppercase;
}
.hero-kicker em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--coral);
}

/* Discreet brand mark above headline */
.hero-brand {
  display: inline-block;
  margin-bottom: 18px;
  opacity: .92;
  transition: opacity .2s;
}
.hero-brand:hover { opacity: 1; }
.hero-brand img {
  display: block;
  height: 64px;
  width: auto;
}
@media (min-width: 768px) {
  .hero-brand img { height: 88px; }
}

/* Discreet brand "film credit" strip — pinned to bottom of hero */
.hero-credit {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  padding: 14px 18px;
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, transparent 0%, rgba(10,12,20,.94) 55%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mute);
}
@media (min-width: 768px) { .hero-credit { padding: 16px 32px; font-size: 11px; } }
.hero-credit .hc-l, .hero-credit .hc-r {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hero-credit .hc-flag { font-size: 13px; letter-spacing: 0; }
.hero-credit .hc-strong {
  color: var(--coral);
  font-weight: 600;
  letter-spacing: .14em;
}
.hero-credit .hc-mono { color: var(--text-dim); }
.hero-credit .hc-sep { color: var(--text-mute); opacity: .6; }

/* Ticket pill — used in final CTA "última chamada" */
.ticket {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  background: rgba(20,24,36,.7);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
  backdrop-filter: blur(8px);
}
.ticket .num {
  background: var(--coral);
  color: #1a0a02;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .10em;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 13vw, 132px);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 22px 0 18px;
  text-wrap: balance;
}
.hero h1 .l1, .hero h1 .l2 { display: block; margin-bottom: 6px; }
.hero h1 .l1, .hero h1 .l2 { display: block; }
.hero h1 .l2 { color: var(--coral); }
.hero h1 .l3 {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  font-size: .56em;
  letter-spacing: -.02em;
  color: var(--paper-2);
  line-height: 1.05;
  margin-top: 10px;
  padding-bottom: 0.12em;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 18px 0 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hero-meta b { color: var(--coral); font-weight: 600; }
.hero-meta .sep { color: var(--text-mute); }

.hero-cta-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
@media (min-width: 540px) { .hero-cta-row { flex-direction: row; align-items: center; flex-wrap: wrap; } }

.btn-play {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 22px 8px 8px;
  background: var(--coral);
  color: #1a0a02;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.005em;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 16px 36px -10px var(--coral-glow);
  transition: transform .2s, background .2s;
  position: relative;
  overflow: hidden;
}
.btn-play:hover { background: var(--coral-hi); transform: translateY(-2px); }
.btn-play .play-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #1a0a02;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--coral);
  flex-shrink: 0;
  position: relative;
}
.btn-play .play-icon::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid #1a0a02;
  animation: ripple 1.8s ease-out infinite;
  opacity: 0;
}
@keyframes ripple {
  0% { transform: scale(1); opacity: .5; }
  100% { transform: scale(1.5); opacity: 0; }
}
.btn-play .play-icon svg { width: 16px; height: 16px; margin-left: 2px; }
.btn-play .col { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; gap: 4px; }
.btn-play .col small {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .7;
}

/* New single-label button text — display caps, high contrast */
.btn-play .btn-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1;
  padding-right: 6px;
}
@media (min-width: 768px) { .btn-play .btn-label { font-size: 26px; } }

/* CTA subline — info that used to live inside the button */
.cta-subline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.cta-subline .dot { color: var(--coral); opacity: .8; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(20,24,36,.6);
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
  backdrop-filter: blur(8px);
  transition: background .2s, border-color .2s;
}
.btn-ghost:hover { background: var(--surface); border-color: var(--line); }

/* ============ POSTER ============ */
.poster {
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 14px rgba(0,0,0,.5);
  background: var(--surface);
}
.poster .bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.poster .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.9) 100%);
}
.poster .meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 7px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.poster .meta .title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -.015em;
  color: var(--paper);
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.poster .meta .info {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
.poster .badge {
  position: absolute;
  top: 6px; left: 6px;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .18em;
  color: var(--coral);
  padding: 2px 6px;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(226,106,58,.5);
  text-transform: uppercase;
}
.poster.lg .meta .title { font-size: 14px; }
.poster.lg .meta .info { font-size: 9px; }
.poster.lg .badge { font-size: 9px; padding: 3px 8px; }

/* Poster gradient/treatment variants (used in placeholders) */
.poster.p1 .bg { background:
  linear-gradient(135deg, #4a1a2a 0%, #1a0710 60%, #000 100%),
  radial-gradient(circle at 30% 40%, rgba(255,180,100,.15), transparent 60%); }
.poster.p2 .bg { background:
  linear-gradient(180deg, #052640 0%, #000916 100%); }
.poster.p3 .bg { background:
  linear-gradient(135deg, #2a3a18 0%, #0a0f08 100%); }
.poster.p4 .bg { background:
  linear-gradient(165deg, #3d1e0a 0%, #1a0a02 60%, #000 100%); }
.poster.p5 .bg { background:
  linear-gradient(145deg, #1a1530 0%, #050410 100%); }
.poster.p6 .bg { background:
  linear-gradient(135deg, #5a2218 0%, #1a0908 100%); }
.poster.p7 .bg { background:
  linear-gradient(170deg, #1f1a0e 0%, #080604 100%); }
.poster.p8 .bg { background:
  linear-gradient(135deg, #2d1430 0%, #100410 100%); }
.poster.p9 .bg { background:
  linear-gradient(150deg, #08303a 0%, #020e12 100%); }
.poster.p10 .bg { background:
  linear-gradient(160deg, #382a08 0%, #0c0905 100%); }
.poster.p11 .bg { background:
  linear-gradient(135deg, #3a1230 0%, #0c040a 100%); }
.poster.p12 .bg { background:
  linear-gradient(180deg, #1c2438 0%, #060812 100%); }
.poster.p13 .bg { background:
  linear-gradient(135deg, #481000 0%, #200400 100%); }
.poster.p14 .bg { background:
  linear-gradient(180deg, #102438 0%, #02080f 100%); }
.poster.p15 .bg { background:
  linear-gradient(145deg, #2a1212 0%, #0a0404 100%); }
.poster.p16 .bg { background:
  linear-gradient(180deg, #1a3a2a 0%, #04100a 100%); }

/* Add subtle inner art with radial highlight */
.poster .bg::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 40% at 30% 25%, rgba(255,255,255,.10), transparent 70%);
}

/* ============ LIFE BAR ============ */
.lifebar {
  background: var(--ink-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 14px 0;
  overflow: hidden;
  position: relative;
}
.lifebar-track {
  display: flex;
  gap: 36px;
  white-space: nowrap;
  animation: scroll-left 42s linear infinite;
  width: max-content;
  font-size: 13px;
  color: var(--text-dim);
}
.lifebar-track .item { display: inline-flex; align-items: center; gap: 8px; }
.lifebar-track .ava {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--coral);
  color: #1a0a02;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
}
.lifebar-track .ava.a2 { background: var(--gold); }
.lifebar-track .ava.a3 { background: var(--mint); color: #002013; }
.lifebar-track .ava.a4 { background: var(--paper); color: var(--ink); }
.lifebar-track b { color: var(--paper); font-weight: 600; }
.lifebar-track time {
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lifebar-track .dot { color: var(--coral); }

/* ============ SECTION ============ */
.sec { padding: 80px 0; position: relative; }
@media (max-width: 700px) { .sec { padding: 64px 0; } }

.sec-head { margin-bottom: 40px; max-width: 720px; }
.sec-head .label {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--coral);
}
.sec-head .label::before {
  content: '';
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--coral);
}
.sec-head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(46px, 12vw, 96px);
  line-height: .96;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--paper);
  text-wrap: balance;
}
.sec-head h2 .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--coral);
  letter-spacing: -.02em;
  font-size: .96em;
  line-height: 1.05;
  display: inline-block;
  padding-bottom: 0.12em;
}
.sec-head p {
  font-size: 16px;
  color: var(--text-dim);
  line-height: 1.55;
  max-width: 56ch;
  margin-top: 32px;
}

/* ============ STATS ============ */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat {
  padding: 28px 16px;
  border-right: 1px solid var(--line-soft);
  position: relative;
}
.stat:nth-child(2n) { border-right: none; }
.stat:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
@media (min-width: 768px) {
  .stat { border-right: 1px solid var(--line-soft); padding: 36px 22px; }
  .stat:nth-child(2n) { border-right: 1px solid var(--line-soft); }
  .stat:nth-child(-n+2) { border-bottom: none; }
  .stat:last-child { border-right: none; }
}
.stat .pre {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.stat .num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 10vw, 88px);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--paper);
}
.stat .num .unit {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--coral);
  font-size: .45em;
  margin-left: 4px;
  vertical-align: .25em;
  letter-spacing: -.01em;
}
.stat .desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.45;
  margin-top: 6px;
}

/* ============ POSTER RAIL ============ */
.rail-section { position: relative; padding: 56px 0; }
.rail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 18px 18px;
  max-width: var(--maxw);
  margin: 0 auto;
  gap: 16px;
}
@media (min-width: 768px) { .rail-head { padding: 0 32px 24px; } }
.rail-head h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 6vw, 44px);
  line-height: .95;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--paper);
}
.rail-head h3 .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--coral);
}
.rail-head .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: right;
}

.rail {
  display: flex;
  gap: 10px;
  padding: 0 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.rail::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .rail { padding: 0 32px; gap: 14px; } }

.rail .poster {
  width: 130px;
  flex: 0 0 130px;
  scroll-snap-align: start;
}
@media (min-width: 540px) { .rail .poster { width: 160px; flex-basis: 160px; } }
@media (min-width: 900px) { .rail .poster { width: 180px; flex-basis: 180px; } }

/* Auto-scrolling rail */
.rail-auto-wrap { overflow: hidden; padding: 8px 0; }
.rail-auto {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: scroll-left 60s linear infinite;
}
.rail-auto.reverse { animation-name: scroll-right; animation-duration: 75s; }
@keyframes scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.rail-auto .poster { width: 140px; flex: 0 0 140px; }
@media (min-width: 768px) { .rail-auto .poster { width: 170px; flex-basis: 170px; } }

/* ============ A CONTA — receipt ============ */
.receipt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}
@media (min-width: 960px) { .receipt-grid { grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; } }

.receipt {
  background: var(--paper);
  color: var(--ink);
  padding: 28px 22px 32px;
  position: relative;
  font-family: var(--font-mono);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
  transform: rotate(-0.4deg);
  max-width: 100%;
  overflow: hidden;
}
.receipt::before, .receipt::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 10px;
  background:
    linear-gradient(45deg, var(--paper) 50%, transparent 50%) 0 0 / 12px 10px,
    linear-gradient(-45deg, var(--paper) 50%, transparent 50%) 0 0 / 12px 10px;
}
.receipt::before { top: -10px; transform: scaleY(-1); }
.receipt::after  { bottom: -10px; }

.receipt h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.receipt .sub {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(0,0,0,.2);
}
.receipt .row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 11px 0;
  font-size: 13px;
  border-bottom: 1px dotted rgba(0,0,0,.18);
}
.receipt .row:last-child { border-bottom: none; }
.receipt .row .name { color: var(--ink); }
.receipt .row .price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
  white-space: nowrap;
  flex-shrink: 0;
  padding-left: 12px;
}
.receipt .row .name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
.receipt .row.total {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
}
.receipt .row.total .name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: -.005em;
}
.receipt .row.total .price {
  font-size: 32px;
  color: var(--crimson);
}
.receipt .stamp {
  position: absolute;
  top: 22px; right: 16px;
  transform: rotate(11deg);
  border: 2.5px solid var(--crimson);
  color: var(--crimson);
  padding: 5px 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .9;
}

/* US deal block */
.us-deal {
  background: linear-gradient(160deg, var(--ink-2) 0%, var(--ink-3) 100%);
  border: 1px solid var(--line);
  padding: 32px 26px 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-radius: 14px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 80px -20px var(--coral-glow);
}
.us-deal::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 100% at 50% 100%, var(--coral-glow) 0%, transparent 60%);
  opacity: .5;
  z-index: 0;
}
.us-deal > * { position: relative; z-index: 1; }
.us-deal .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--coral);
  display: flex; align-items: center; gap: 8px;
}
.us-deal .lbl::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--coral);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--coral-glow);
}
.us-deal .price-line1 {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.us-deal .price-big {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(96px, 26vw, 200px);
  line-height: .82;
  letter-spacing: -.05em;
  color: var(--paper);
  text-shadow: 0 0 60px rgba(255,255,255,.06);
  padding-bottom: .12em;
}
.us-deal .price-big .cur {
  font-size: .28em;
  color: var(--text-dim);
  vertical-align: .95em;
  margin-right: 4px;
  font-weight: 700;
}
.us-deal .price-big .frac { color: var(--coral); }
.us-deal .per {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--paper-2);
  margin-top: 14px;
}
.us-deal .save {
  background: rgba(110,199,155,.08);
  border: 1px solid rgba(110,199,155,.3);
  color: var(--mint);
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.us-deal .save b { color: var(--paper); font-weight: 600; letter-spacing: .06em; }

/* ============ AUDIENCE CARDS ============ */
.aud-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (min-width: 700px) { .aud-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1024px) { .aud-grid { grid-template-columns: repeat(6, 1fr); } }

.aud {
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s ease;
  isolation: isolate;
}
.aud:hover { transform: translateY(-4px) scale(1.02); }
.aud .bg {
  position: absolute; inset: 0;
  transition: transform .6s ease;
  z-index: 0;
}
.aud:hover .bg { transform: scale(1.08); }
.aud .scrim {
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.94) 100%);
}
.aud .badge {
  position: absolute; top: 10px; left: 10px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .06em;
  color: var(--paper);
  padding: 3px 7px;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.15);
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 700px) {
  .aud .badge { font-size: 9px; padding: 4px 8px; letter-spacing: .18em; }
}
.aud .content {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 16px 14px;
}
.aud h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 5vw, 38px);
  line-height: .9;
  letter-spacing: -.025em;
  color: var(--paper);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.aud h3 .em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  text-transform: none; color: var(--coral); font-size: .8em;
  display: block;
}
.aud p {
  font-size: 11px;
  color: rgba(255,255,255,.7);
  line-height: 1.45;
  font-family: var(--font-mono);
  letter-spacing: .04em;
  max-width: 30ch;
}

/* Compact stat chip — replaces verbose description prose */
.aud-stat {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 10px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
}
.aud:hover .aud-stat {
  border-color: rgba(255,70,30,.45);
  color: var(--coral-hi);
}

/* Audience background art — real posters layered under category color glow */
.aud .bg {
  background-size: cover;
  background-position: center 20%;
  filter: saturate(.55) brightness(.5) contrast(1.08);
}
.aud .bg::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
}
.aud .scrim {
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.0) 30%, rgba(0,0,0,.5) 65%, rgba(0,0,0,.95) 100%) !important;
}

.aud.a-fut .bg {
  background-image:
    radial-gradient(circle at 30% 30%, rgba(110,199,155,.32), transparent 55%),
    linear-gradient(180deg, rgba(12,40,24,.15) 0%, rgba(6,16,8,.55) 100%),
    url('assets/posters/lancamentos/f1-o-filme.jpg');
}
.aud.a-nov .bg {
  background-image:
    radial-gradient(circle at 70% 40%, rgba(255,70,30,.32), transparent 55%),
    linear-gradient(180deg, rgba(42,10,24,.20) 0%, rgba(16,4,8,.55) 100%),
    url('assets/posters/maria-do-bairro.jpg');
}
.aud.a-ani .bg {
  background-image:
    radial-gradient(circle at 50% 30%, rgba(163,107,204,.35), transparent 55%),
    linear-gradient(180deg, rgba(26,8,48,.20) 0%, rgba(8,2,14,.55) 100%),
    url('assets/posters/demon-slayer.jpg');
}
.aud.a-kid .bg {
  background-image:
    radial-gradient(circle at 40% 35%, rgba(232,180,65,.36), transparent 55%),
    linear-gradient(180deg, rgba(42,24,8,.15) 0%, rgba(16,8,4,.55) 100%),
    url('assets/posters/one-piece.jpg');
}
.aud.a-hol .bg {
  background-image:
    radial-gradient(circle at 60% 30%, rgba(255,70,30,.38), transparent 55%),
    linear-gradient(180deg, rgba(42,20,8,.18) 0%, rgba(16,6,4,.55) 100%),
    url('assets/posters/lancamentos/avatar-fogo-e-cinzas.jpg');
}
.aud.a-cla .bg {
  background-image:
    radial-gradient(circle at 30% 40%, rgba(241,234,216,.22), transparent 55%),
    linear-gradient(180deg, rgba(26,28,40,.20) 0%, rgba(8,8,14,.55) 100%),
    url('assets/posters/o-pagador-de-promessas.jpg');
}

/* ============ HOW IT WORKS — film strip ============ */
.filmstrip {
  background: var(--ink-2);
  padding: 96px 0;
  position: relative;
}
.filmstrip::before, .filmstrip::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 24px;
  background-image: radial-gradient(circle, var(--ink) 4px, transparent 5px);
  background-size: 26px 24px;
  background-position: 0 center;
}
.filmstrip::before { top: 0; }
.filmstrip::after  { bottom: 0; }

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
  background: var(--ink);
  border: 1px solid var(--line-soft);
  padding: 28px 22px;
  position: relative;
  transition: border-color .3s, transform .25s;
  border-radius: 8px;
}
.step:hover { border-color: var(--coral); transform: translateY(-3px); }
.step .num-big {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 96px;
  line-height: .8;
  color: var(--coral);
  letter-spacing: -.04em;
  margin-bottom: 14px;
  opacity: .85;
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: 1;
  margin-bottom: 8px;
}
.step h3 .em {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  font-weight: 400;
  color: var(--coral);
}
.step p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
}
.step .corner {
  position: absolute;
  top: 14px; right: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--text-mute);
  text-transform: uppercase;
}

/* ============ VS TABLE ============ */
.vs-table {
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--ink-2);
  border-radius: 8px;
}
.vs-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.vs-row:last-child { border-bottom: none; }
.vs-cell {
  padding: 16px 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  font-weight: 500;
  font-size: 12px;
}
@media (min-width: 768px) { .vs-cell { padding: 18px 14px; font-size: 14px; } }
.vs-cell.label {
  justify-content: flex-start;
  padding-left: 14px;
  color: var(--text);
  font-weight: 500;
  font-size: 11px;
}
@media (min-width: 768px) { .vs-cell.label { padding-left: 18px; font-size: 13px; } }
.vs-row.head .vs-cell {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: -.005em;
  background: var(--ink-3);
  padding: 18px 10px;
  color: var(--text-dim);
}
@media (min-width: 768px) { .vs-row.head .vs-cell { font-size: 16px; } }
.vs-row.head .vs-cell.us {
  color: #1a0a02;
  background: var(--coral);
}
.vs-cell.us {
  background: rgba(226,106,58,.08);
  color: var(--paper);
  font-weight: 600;
}
.vs-row.price .vs-cell.us {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.check {
  width: 22px; height: 22px;
  background: rgba(110,199,155,.15);
  border-radius: 50%;
  color: var(--mint);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.cross {
  width: 22px; height: 22px;
  background: rgba(196,56,56,.10);
  border-radius: 50%;
  color: var(--crimson);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}

/* ============ QUOTES ============ */
.quotes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 700px) { .quotes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .quotes-grid { grid-template-columns: repeat(3, 1fr); } }

.quote {
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color .25s, transform .25s;
}
.quote:hover { border-color: var(--coral); transform: translateY(-3px); }
.quote .stars { color: var(--coral); font-size: 13px; letter-spacing: .04em; }
.quote .text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 24px);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--paper);
  text-transform: uppercase;
  text-wrap: balance;
}
.quote .text::before { content: '“'; font-family: var(--font-serif); font-style: italic; color: var(--coral); font-weight: 400; font-size: 1.4em; line-height: 0; vertical-align: -.2em; margin-right: 2px; }
.quote .text::after  { content: '”'; font-family: var(--font-serif); font-style: italic; color: var(--coral); font-weight: 400; font-size: 1.4em; line-height: 0; vertical-align: -.2em; }
.quote .who {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  margin-top: auto;
}
.quote .ava {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--coral);
  color: #1a0a02;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; letter-spacing: -.01em;
}
.quote .who-info { flex: 1; }
.quote .who-name { font-size: 13px; font-weight: 600; color: var(--text); }
.quote .who-loc {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute); margin-top: 2px;
}
.quote .verified {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mint);
}

/* ============ PLANS — ticket aesthetics ============ */
.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(4, 1fr); align-items: stretch; } }

.plan {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 22px 22px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
  transition: border-color .25s, transform .25s;
}
.plan:hover { border-color: var(--text-dim); transform: translateY(-3px); }

.plan.best {
  background: linear-gradient(180deg, rgba(226,106,58,.15), var(--ink-2) 60%);
  border-color: var(--coral);
  box-shadow: 0 0 0 1px rgba(226,106,58,.2) inset, 0 30px 80px -20px var(--coral-glow);
}
.plan.best::before {
  content: '';
  position: absolute; top: -1px; left: 22px; right: 22px;
  height: 3px;
  background: var(--coral);
}
.plan-badge {
  position: absolute;
  top: -1px; left: 50%; transform: translateX(-50%);
  background: var(--coral);
  color: #1a0a02;
  padding: 6px 16px 6px 16px;
  border-radius: 0 0 10px 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--paper);
}
.plan-old {
  font-family: var(--font-mono);
  font-size: 11px;
  text-decoration: line-through;
  color: var(--text-mute);
  letter-spacing: .06em;
}
.plan-price {
  display: flex; align-items: baseline; gap: 4px;
  line-height: .9;
}
.plan-amount {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 64px;
  letter-spacing: -.045em;
  color: var(--paper);
  line-height: .85;
}
.plan.best .plan-amount { color: var(--coral); }
.plan-amount .cur {
  font-size: .32em;
  color: var(--text-dim);
  vertical-align: .65em;
  margin-right: 4px;
  font-weight: 700;
}
.plan.best .plan-amount .cur { color: var(--paper); }
.plan-per {
  font-size: 12px;
  color: var(--text-mute);
  font-family: var(--font-mono);
  letter-spacing: .08em;
  padding-bottom: 4px;
}
.plan-equiv {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--coral);
}
.plan-divider {
  border: 0;
  border-top: 1px dashed var(--line);
  margin: 4px 0;
}
.plan-features { display: flex; flex-direction: column; gap: 10px; }
.plan-features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--text-dim); line-height: 1.45;
}
.plan-features li::before {
  content: '+';
  color: var(--coral);
  font-family: var(--font-mono);
  font-weight: 700;
  flex-shrink: 0;
}
.plan-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 16px 20px;
  background: var(--surface);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--line);
  transition: all .2s;
}
.plan-cta:hover { background: var(--surface-2); }
.plan.best .plan-cta { background: var(--coral); color: #1a0a02; border-color: transparent; }
.plan.best .plan-cta:hover { background: var(--coral-hi); }

/* ============ FAQ ============ */
.faq {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line-soft);
}
.faq-item {
  border-bottom: 1px solid var(--line-soft);
  transition: background .2s;
}
.faq-item.open { background: rgba(226,106,58,.04); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
  padding: 24px 0;
  text-align: left;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 3vw, 26px);
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--paper);
  line-height: 1.05;
}
.faq-q .plus {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--coral);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .3s ease;
  font-size: 18px;
  font-weight: 400;
}
.faq-item.open .faq-q .plus { transform: rotate(45deg); background: var(--coral); color: #1a0a02; border-color: var(--coral); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .4s ease;
}
.faq-item.open .faq-a { max-height: 320px; }
.faq-a p {
  padding: 0 0 24px;
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 60ch;
}

/* ============ FINAL CTA ============ */
.final {
  position: relative;
  padding: 120px 0 100px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}
.final::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(226,106,58,.4) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(226,106,58,.08) 0%, transparent 60%);
}
/* Film perforation strip */
.perf {
  height: 18px;
  background:
    radial-gradient(circle 4px at 14px 50%, var(--ink) 99%, transparent 100%) 0 0 / 28px 100%,
    var(--ink-3);
  position: relative;
  z-index: 1;
}
.final-inner {
  position: relative; z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 18px;
}
@media (min-width: 768px) { .final-inner { padding: 0 32px; } }
.final h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(56px, 13vw, 160px);
  line-height: .82;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 24px 0 24px;
  text-wrap: balance;
}
.final h2 .em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  text-transform: none; color: var(--coral); letter-spacing: -.015em;
}
.final p {
  font-size: 17px;
  color: var(--text-dim);
  margin: 0 auto 36px;
  line-height: 1.55;
  max-width: 52ch;
}

/* ============ FOOTER ============ */
.footer {
  background: var(--ink-2);
  border-top: 1px solid var(--line-soft);
  padding: 64px 0 110px;
  font-size: 13px;
  color: var(--text-mute);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 48px;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; } }
.footer h4 {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 18px;
}
.footer ul li { margin-bottom: 10px; }
.footer ul a { color: var(--text-mute); transition: color .15s; }
.footer ul a:hover { color: var(--coral); }
.footer-bottom {
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}

/* ============ STICKY MOBILE CTA ============ */
.sticky {
  position: fixed;
  bottom: 14px; left: 14px; right: 14px;
  z-index: 80;
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 8px 8px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  transform: translateY(150%);
  transition: transform .4s cubic-bezier(.2,1,.3,1);
  box-shadow: 0 20px 60px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.1);
}
.sticky.in { transform: translateY(0); }
.sticky .l {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(0,0,0,.55);
}
.sticky .v {
  font-family: var(--font-display); font-weight: 900;
  font-size: 22px; line-height: .9; letter-spacing: -.02em;
  text-transform: uppercase; color: var(--ink);
}
.sticky .go {
  background: var(--coral); color: #1a0a02;
  padding: 14px 18px;
  border-radius: 999px;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
@media (min-width: 900px) { .sticky { display: none; } }

/* ============ REVEAL ============ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ============ REASONS (Por que tão barato) ============ */
.reasons-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 800px) { .reasons-grid { grid-template-columns: repeat(3, 1fr); } }
.reason {
  background: linear-gradient(155deg, rgba(226,106,58,.06), transparent 80%);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: border-color .25s, transform .25s;
}
.reason:hover { border-color: var(--coral); transform: translateY(-3px); }
.reason .reason-num {
  width: 44px; height: 44px;
  background: var(--coral);
  color: #1a0a02;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -.02em;
}
.reason h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--paper);
}
.reason h4 .em { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--coral); }
.reason p { font-size: 14px; color: var(--text-dim); line-height: 1.55; }
.reasons-foot {
  text-align: center;
  margin-top: 32px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 5vw, 36px);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--paper);
}
.reasons-foot .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--coral);
}

/* ============ GARANTIA ============ */
.garantia-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 800px) { .garantia-cards { grid-template-columns: repeat(3, 1fr); } }
.gar-card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.gar-card .shield {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(226,106,58,.10);
  border: 1px solid rgba(226,106,58,.3);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--coral);
}
.gar-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--paper);
}
.gar-card h3 .em { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--coral); }
.gar-card p { font-size: 13px; color: var(--text-dim); line-height: 1.55; max-width: 28ch; }

/* ============ PS BOX ============ */
.ps-box {
  margin: 40px auto 0;
  max-width: 600px;
  background: var(--ink-2);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 22px 24px;
  text-align: left;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
}
.ps-box strong {
  color: var(--paper);
  font-weight: 600;
  display: inline-block;
  font-family: var(--font-display);
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-size: 14px;
  margin-right: 6px;
}
.ps-box .em { color: var(--coral); font-family: var(--font-serif); font-style: italic; }
body[data-accent="amber"] { --coral: #e8b441; --coral-hi: #f0c96a; --coral-deep: #b58a25; --coral-glow: rgba(232,180,65,.45); }
body[data-accent="mint"]  { --coral: #4abf9b; --coral-hi: #6dd4b3; --coral-deep: #2e8e72; --coral-glow: rgba(74,191,155,.45); }
body[data-accent="rose"]  { --coral: #e85a78; --coral-hi: #ff7a92; --coral-deep: #b53758; --coral-glow: rgba(232,90,120,.45); }
body[data-accent="netflix"] { --coral: #e50914; --coral-hi: #ff2330; --coral-deep: #b0060f; --coral-glow: rgba(229,9,20,.45); }
body[data-accent="corujao"] {
  --coral:      #ff3a1f;
  --coral-hi:   #ff6a3c;
  --coral-deep: #c41200;
  --coral-glow: rgba(255, 70, 30, 0.65);
  --amber-hot:  #ff8a00;
  --gold:       #ffb83a;
}

/* ===========================================================
   CORUJÃO PLAY — restrained palette tweaks
   (no chrome text gradients, no extra blocks)
   =========================================================== */

/* Slightly stronger atmospheric vignette over body */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 1900;
  pointer-events: none;
  background:
    radial-gradient(ellipse 110% 75% at 50% 50%, transparent 40%, rgba(0,0,0,.55) 100%);
}

/* Hero spotlight: red → orange duo (matching logo gradient) */
.hero-spotlight {
  background:
    radial-gradient(ellipse 70% 55% at 18% 88%, rgba(255,70,30,.38) 0%, rgba(255,138,0,.14) 35%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 10%, rgba(255,70,30,.15) 0%, transparent 50%) !important;
}

/* CTAs — subtle red glow upgrade */
.btn-play {
  background: linear-gradient(180deg, var(--coral-hi) 0%, var(--coral) 52%, var(--coral-deep) 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 0 28px rgba(255,70,30,.45),
    0 18px 44px -12px var(--coral-glow) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.btn-play .btn-label { color: #ffffff; }
.btn-play:hover {
  background: linear-gradient(180deg, #ff8a5c 0%, var(--coral-hi) 52%, var(--coral) 100%) !important;
  transform: translateY(-2px);
}
.btn-play .play-icon {
  background: #ffffff !important;
  color: var(--coral) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.3) !important;
  text-shadow: none;
}
.btn-play .play-icon::after { border-color: rgba(255,255,255,.6) !important; }

/* Plan "best" — a touch more glow */
.plan.best {
  box-shadow:
    0 0 0 1px rgba(255,31,61,.22) inset,
    0 30px 80px -20px var(--coral-glow) !important;
}

/* Final CTA section: red → amber atmosphere at bottom (mirrors logo gradient) */
.final::before {
  background:
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255,70,30,.5) 0%, rgba(255,138,0,.15) 45%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,138,0,.10) 0%, transparent 60%) !important;
}

/* ===========================================================
   LANÇAMENTOS — premium featured drop section
   =========================================================== */
.lancamentos-section {
  position: relative;
  padding: 80px 0 64px;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ink) 0%, #160806 100%);
  border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 700px) { .lancamentos-section { padding: 56px 0 48px; } }

/* Warm glow rising from center-top, mirrors the logo's heat */
.lanc-glow {
  position: absolute;
  inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,70,30,.28) 0%, rgba(255,138,0,.08) 40%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 12% 80%, rgba(255,138,0,.12) 0%, transparent 60%);
}
.lancamentos-section > .wrap,
.lancamentos-section > .lanc-rail-wrap { position: relative; z-index: 2; }

/* Head */
.lanc-head {
  max-width: 820px;
  margin-bottom: 44px;
}
.lanc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  background: rgba(255,70,30,.12);
  border: 1px solid rgba(255,70,30,.35);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--coral-hi);
  margin-bottom: 24px;
  backdrop-filter: blur(4px);
}
.lanc-pulse {
  width: 8px; height: 8px;
  background: var(--coral);
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(255,70,30,.22),
    0 0 14px var(--coral-glow);
  animation: pulse 1.3s infinite;
  flex-shrink: 0;
}

.lanc-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 11vw, 104px);
  line-height: .92;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--paper);
  text-wrap: balance;
}
.lanc-title .em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--coral);
  letter-spacing: -.02em;
  font-size: .92em;
  padding-bottom: 0.12em;
  display: inline-block;
}
.lanc-sub {
  margin-top: 22px;
  font-size: 16px;
  color: var(--text-dim);
  line-height: 1.55;
  max-width: 62ch;
}
.lanc-sub strong {
  color: var(--paper);
  font-weight: 500;
}

/* Premium rail — bigger posters, edge-to-edge */
.lanc-rail-wrap {
  margin: 8px 0 32px;
  overflow: hidden;
}
.lanc-rail {
  display: flex;
  gap: 14px;
  padding: 12px 18px 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lanc-rail::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .lanc-rail { padding: 16px 32px 28px; gap: 18px; } }

/* XL poster — significantly bigger than the standard .lg in other rails */
.poster.xl {
  width: 180px;
  flex: 0 0 180px;
  scroll-snap-align: start;
  border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 16px 32px -8px rgba(0,0,0,.7);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
@media (min-width: 540px) { .poster.xl { width: 220px; flex-basis: 220px; } }
@media (min-width: 900px) { .poster.xl { width: 260px; flex-basis: 260px; } }
@media (min-width: 1200px) { .poster.xl { width: 280px; flex-basis: 280px; } }
.poster.xl:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 0 0 1px rgba(255,70,30,.4),
    0 30px 60px -10px rgba(0,0,0,.85),
    0 0 50px -10px var(--coral-glow);
}
.poster.xl .meta { padding: 12px 14px; }
.poster.xl .meta .title { font-size: 17px; letter-spacing: -.01em; }
.poster.xl .meta .info { font-size: 10px; letter-spacing: .14em; }
.poster.xl .badge {
  font-size: 9px;
  padding: 4px 9px;
  letter-spacing: .14em;
  top: 8px; left: 8px;
  background: var(--coral);
  color: #1a0204;
  border: none;
  font-weight: 700;
  box-shadow: 0 4px 12px -2px var(--coral-glow);
  text-transform: uppercase;
}
/* "Pulse" the new-release badges so they read as live */
.lancamento-card .badge {
  animation: badge-pulse 2.6s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 12px -2px var(--coral-glow); }
  50%      { transform: scale(1.05); box-shadow: 0 6px 22px -2px rgba(255,138,0,.65); }
}

/* Featured first card — bigger, ringed in coral */
.lancamento-card.featured {
  border: 1px solid rgba(255,70,30,.4);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 0 0 1px rgba(255,70,30,.25),
    0 24px 60px -10px rgba(0,0,0,.8),
    0 0 60px -10px var(--coral-glow);
}
.lancamento-card.featured::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--coral) 0%, transparent 40%, transparent 60%, var(--amber-hot) 100%);
  z-index: -1;
  opacity: .6;
  filter: blur(8px);
}

/* Bottom meta strip */
.lanc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px dashed var(--line-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.lanc-meta .lm-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lanc-meta .lm-item b {
  color: var(--coral-hi);
  font-weight: 600;
  letter-spacing: .14em;
}
.lanc-meta .lm-dot {
  width: 7px; height: 7px;
  background: var(--coral);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--coral-glow);
  animation: pulse 1.4s infinite;
  display: inline-block;
}
.lanc-meta .lm-sep { color: var(--text-mute); opacity: .5; }

/* ===========================================================
   REVIEWS — real-feel (Trustpilot/Google Reviews aesthetic)
   =========================================================== */
.reviews {
  background: linear-gradient(180deg, #f4ede0 0%, #ece2cf 100%);
  color: #1a1410;
  padding: 96px 0;
  border-top: 1px solid #d9cfb8;
  border-bottom: 1px solid #d9cfb8;
  position: relative;
}
.reviews::before {
  /* tiny vertical accent strip on the left edge */
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--coral) 0%, var(--amber-hot) 100%);
}

/* Head with aggregate + histogram */
.reviews-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid #d9cfb8;
}
@media (min-width: 820px) {
  .reviews-head { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 56px; }
}

.reviews-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #6b5d40;
  margin-bottom: 18px;
}

.reviews-title {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 18px;
  align-items: end;
}
.reviews-title .big {
  grid-row: 1 / 3;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(72px, 12vw, 120px);
  line-height: .85;
  letter-spacing: -.04em;
  color: #1a1410;
}
.reviews-title .star-row {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  gap: 2px;
  font-size: 22px;
  line-height: 1;
  color: #00B67A;
}
.reviews-title .reviews-count {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: #4a3f2e;
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
}
.reviews-title .reviews-count strong { color: #1a1410; font-weight: 600; }
.reviews-title .reviews-count .tp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-weight: 500;
  color: #1a1410;
}

/* Histogram */
.reviews-head-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rating-bar {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #4a3f2e;
}
.rating-bar .rl { font-weight: 500; }
.rating-bar .rb {
  height: 8px;
  background: rgba(0,0,0,.07);
  border-radius: 999px;
  overflow: hidden;
}
.rating-bar .rb-fill {
  display: block; height: 100%;
  background: #00B67A;
  border-radius: 999px;
}
.rating-bar .rn { text-align: right; color: #1a1410; font-weight: 600; }

/* Grid of review cards */
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 700px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }

.review {
  background: #ffffff;
  border-radius: 10px;
  padding: 22px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 4px 16px -4px rgba(0,0,0,.08);
  border: 1px solid #eae1cc;
  transition: transform .2s, box-shadow .2s;
}
.review:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 10px 28px -6px rgba(0,0,0,.12);
}

.r-head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
}
.r-ava {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.005em;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px #ffffff, 0 2px 6px rgba(0,0,0,.15);
}
.r-meta { min-width: 0; }
.r-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: #1a1410;
  letter-spacing: -.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.r-name .r-loc {
  font-weight: 400;
  color: #6b5d40;
}
.r-sub {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  font-size: 12px;
}
.r-stars { color: #00B67A; letter-spacing: 1px; font-size: 14px; line-height: 1; }
.r-stars .s-off { color: rgba(0,0,0,.18); }
.r-date {
  color: #8a7a5d;
  font-size: 11px;
  font-family: var(--font-mono);
}

.r-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #00875A;
  white-space: nowrap;
}

.r-headline {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: #1a1410;
  letter-spacing: -.01em;
  margin: 0;
}

.r-body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: #3a2e1f;
  letter-spacing: 0;
  margin: 0;
}

.r-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #f0e8d4;
}
.r-helpful {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #d9cfb8;
  border-radius: 6px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: #4a3f2e;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.r-helpful:hover { background: #f4ede0; border-color: #b8a987; color: #1a1410; }
.r-helpful svg { color: #6b5d40; }

.r-source {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: #8a7a5d;
}

/* Footer pill */
.reviews-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid #d9cfb8;
}
.rf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid #d9cfb8;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: #1a1410;
}
.rf-text {
  font-family: var(--font-body);
  font-size: 13px;
  color: #4a3f2e;
}

/* ===========================================================
   MESSAGE-CLARITY UPGRADES — stats, comparison, steps,
   plans, garantia
   =========================================================== */

/* --- STATS: tiny comparator under each big number --- */
.stat-compare {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.stat-compare s {
  color: #c44442;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(255,70,30,.55);
  margin-left: 4px;
}
.stat-compare em {
  font-style: normal;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--coral);
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
  margin-left: 4px;
}

/* --- COMPARISON: savings banner + winner badge + dim losers --- */
.vs-savings {
  margin-bottom: 28px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: linear-gradient(90deg, rgba(255,70,30,.16) 0%, rgba(255,138,0,.08) 60%, transparent 100%);
  border-left: 4px solid var(--coral);
  border-radius: 4px;
}
.vs-savings-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--coral-hi);
}
.vs-savings-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3.5vw, 32px);
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--paper);
}
.vs-savings-headline em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--coral);
}

.vs-winner {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #1a0204;
  background: rgba(26,2,4,.18);
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 6px;
}

/* Dim Netflix / Max columns so the eye keeps coming back to ours */
.vs-row .vs-cell:not(.us):not(.label) {
  opacity: .7;
}
.vs-row .vs-cell:not(.us):not(.label):hover {
  opacity: .85;
}

/* --- STEPS: visual mockups --- */
.step-visual {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  background: var(--ink-3);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text);
}
.chip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chip-time {
  margin-left: auto;
  background: rgba(255,70,30,.10);
  border-color: rgba(255,70,30,.35);
  color: var(--coral-hi);
}

/* WhatsApp message bubble */
.wa-bubble {
  border-top-color: var(--line);
  background: linear-gradient(180deg, transparent, rgba(20,83,45,.06));
  padding: 18px 14px 16px;
  border-radius: 0 0 8px 8px;
  margin: 20px -22px -28px;
  border-top: 1px dashed var(--line);
}
.wa-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.wa-ava {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -.005em;
}
.wa-msg {
  background: #1a2c2a;
  border-radius: 4px 14px 14px 14px;
  padding: 10px 12px 8px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  color: var(--paper);
  flex: 1;
  border: 1px solid rgba(37,211,102,.18);
  min-width: 0;
}
.wa-name {
  font-weight: 600;
  font-size: 11px;
  color: #25D366;
  margin-bottom: 3px;
}
.wa-check { font-size: 9px; opacity: .7; }
.wa-text { color: var(--paper); }
.wa-time {
  font-size: 9px;
  font-family: var(--font-mono);
  letter-spacing: .1em;
  color: var(--text-mute);
  margin-top: 4px;
  text-align: right;
}

/* Devices row */
.devices {
  align-items: center;
  gap: 10px;
}
.device {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  background: var(--ink-3);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.device svg { color: var(--coral); flex-shrink: 0; }
.device span { white-space: nowrap; }
.device-on {
  background: rgba(255,70,30,.10);
  border-color: rgba(255,70,30,.4);
  color: var(--coral-hi);
  margin-left: auto;
}
.device-on .on-dot {
  width: 6px; height: 6px;
  background: var(--coral);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--coral-glow);
  animation: pulse 1.3s infinite;
}

/* --- PLANS: savings badge --- */
.plan-savings {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(110,199,155,.14);
  border: 1px solid rgba(110,199,155,.4);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6ec79b;
  align-self: flex-start;
  white-space: nowrap;
}
.plan-savings-big {
  background: linear-gradient(135deg, rgba(110,199,155,.22), rgba(110,199,155,.08));
  border-color: #6ec79b;
  color: #8edcb4;
  font-size: 11px;
  padding: 5px 12px;
  box-shadow: 0 0 24px -6px rgba(110,199,155,.5);
}

/* --- GARANTIA: big stat number above each card --- */
.gar-stat {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(180deg, var(--coral) 0%, var(--coral-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px var(--coral-glow));
  margin-bottom: 4px;
  text-transform: uppercase;
}

/* ===========================================================
   ANUAL PLAN — luminous paper card (visual rupture)
   Drives highest-revenue tier to stand out from dark page
   =========================================================== */
.plans .plan.best {
  background: linear-gradient(170deg, #f7efdc 0%, #e8dec3 100%) !important;
  border: 1px solid #d9cfb8 !important;
  color: var(--ink);
  transform: scale(1.04);
  box-shadow:
    0 0 0 4px rgba(255,70,30,.18),
    0 30px 70px -10px rgba(0,0,0,.7),
    0 0 60px -10px var(--coral-glow) !important;
  z-index: 2;
  padding-top: 38px;
}
@media (max-width: 1099px) {
  .plans .plan.best { transform: none; margin-top: 8px; }
}
.plans .plan.best:hover {
  transform: scale(1.04) translateY(-4px);
  border-color: var(--coral) !important;
}
@media (max-width: 1099px) {
  .plans .plan.best:hover { transform: translateY(-4px); }
}

.plans .plan.best::before {
  background: linear-gradient(90deg, var(--coral) 0%, var(--amber-hot) 100%) !important;
  height: 4px !important;
  left: 0 !important;
  right: 0 !important;
  border-radius: 10px 10px 0 0;
}

.plans .plan.best .plan-badge {
  background: linear-gradient(90deg, var(--coral) 0%, var(--amber-hot) 100%);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .1em;
  padding: 7px 18px;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 6px 18px -4px var(--coral-glow);
  top: 0;
  white-space: nowrap;
}

.plans .plan.best .plan-name {
  color: var(--ink);
  font-size: 24px;
  margin-top: 4px;
}
.plans .plan.best .plan-old {
  color: rgba(0,0,0,.45);
  text-decoration-color: rgba(255,70,30,.55);
  text-decoration-thickness: 2px;
}
.plans .plan.best .plan-amount {
  color: var(--ink) !important;
  font-size: 80px;
  filter: none;
  -webkit-text-fill-color: var(--ink) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}
.plans .plan.best .plan-amount .cur {
  color: rgba(0,0,0,.5) !important;
  -webkit-text-fill-color: rgba(0,0,0,.5) !important;
}
.plans .plan.best .plan-per {
  color: rgba(0,0,0,.6);
  font-size: 12px;
  line-height: 1.4;
}
.plans .plan.best .plan-divider {
  border-top-color: rgba(0,0,0,.15);
}
.plans .plan.best .plan-features li {
  color: rgba(0,0,0,.78);
  font-weight: 500;
}
.plans .plan.best .plan-features li::before {
  color: var(--coral);
  font-weight: 700;
}

.plans .plan.best .plan-savings-big {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .12em;
  font-size: 12px;
  padding: 6px 14px;
  box-shadow: 0 6px 16px -4px rgba(4,120,87,.5) !important;
}

.plans .plan.best .plan-cta {
  background: linear-gradient(180deg, var(--coral-hi) 0%, var(--coral) 50%, var(--coral-deep) 100%) !important;
  color: #fff !important;
  border: none !important;
  font-size: 16px;
  padding: 18px 24px;
  box-shadow:
    0 8px 24px -4px var(--coral-glow),
    0 0 0 1px rgba(255,255,255,.15) inset !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.plans .plan.best .plan-cta:hover {
  transform: translateY(-1px);
}

.plans .plan:not(.best) { opacity: .85; }
.plans .plan:not(.best):hover { opacity: 1; }