/* ═══════════════════════════════════════════════
   PREVIEW DAVINCI — CSS FOUNDATION
   KC Studio · Fase 1J-B.3 · Standalone · Mobile-First
   NO importa styles.css global. Cápsula aislada.
═══════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --void:        #050506;
  --obsidian:    #0B0C10;
  --gold:        #D4AF37;
  --soft-gold:   #F4D77A;
  --champagne:   #F5E6C8;
  --rose:        #D8A7A7;
  --sage:        #AFC7A0;
  --night:       #111A33;
  --terracotta:  #B86F52;
  --burgundy:    #6E1F34;
  --black-gold:  #090909;
  --success:     #22c55e;
  --warning:     #f59e0b;
  --danger:      #ef4444;

  --glass-bg:    rgba(255,255,255,0.04);
  --glass-border:rgba(212,175,55,0.18);
  --radius-card: 18px;
  --radius-btn:  50px;
  --shadow-gold: 0 0 24px rgba(212,175,55,0.15);
  --font-title:  'Cinzel', serif;
  --font-body:   'Montserrat', sans-serif;
  --transition:  0.28s ease;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

/* ── HIDDEN NUCLEAR GUARD ── */
/* Ninguna regla de display puede ganar contra esto */
[hidden] { display: none !important; }

body {
  background-color: var(--void);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(212,175,55,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(212,175,55,0.04) 0%, transparent 60%);
  color: var(--champagne);
  font-family: var(--font-body);
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ── TOPBAR ── */
.pv-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(5,5,6,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--glass-border);
}
.pv-topbar__brand {
  font-family: var(--font-title);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-decoration: none;
}
.pv-topbar__back {
  font-size: 0.72rem;
  color: rgba(245,230,200,0.55);
  text-decoration: none;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color var(--transition);
}
.pv-topbar__back:hover { color: var(--gold); }

/* ── SHELL ── */
.preview-shell {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 0 60px;
}

/* ── SECTIONS ── */
.pv-section {
  padding: 48px 20px;
  display: none;
}
.pv-section.active { display: block; }
.pv-section--full { min-height: 100dvh; display: none; flex-direction: column; justify-content: center; }
.pv-section--full.active { display: flex; }

/* ── INTRO CARD ── */
.intro-card {
  text-align: center;
  padding: 72px 24px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 56px); /* dvh menos topbar ~56px */
}

.pv-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: var(--radius-btn);
  padding: 5px 14px;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--soft-gold);
  text-transform: uppercase;
  margin-bottom: 28px;
}

.pv-title {
  font-family: var(--font-title);
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  color: var(--champagne);
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.pv-title span { color: var(--gold); }

.pv-subtitle {
  font-size: 0.9rem;
  color: rgba(245,230,200,0.65);
  line-height: 1.65;
  max-width: 340px;
  margin: 0 auto 40px;
}

/* ── ENVELOPE ICON ── */
.pv-envelope {
  width: 72px;
  height: 72px;
  margin: 0 auto 32px;
  position: relative;
}
.pv-envelope svg { width: 100%; height: 100%; }

/* ── BUTTONS ── */
.btn-pv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 32px;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
  min-height: 52px;
}
.btn-pv--gold {
  background: linear-gradient(135deg, var(--gold) 0%, #c9a227 100%);
  color: var(--void);
  box-shadow: 0 4px 20px rgba(212,175,55,0.35);
}
.btn-pv--gold:hover, .btn-pv--gold:focus-visible {
  background: linear-gradient(135deg, var(--soft-gold) 0%, var(--gold) 100%);
  box-shadow: 0 6px 28px rgba(212,175,55,0.5);
  transform: translateY(-1px);
}
.btn-pv--ghost {
  background: transparent;
  border: 1px solid rgba(212,175,55,0.35);
  color: var(--champagne);
}
.btn-pv--ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-pv--wa {
  background: linear-gradient(135deg, #25D366 0%, #1eb55a 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(37,211,102,0.3);
}
.btn-pv--wa:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(37,211,102,0.45); }
.btn-pv--full { width: 100%; }

/* ── GLASS CARD ── */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-gold);
  overflow: hidden;
}
.glass-card__header {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--glass-border);
}
.glass-card__body { padding: 20px 24px; }

/* ── FORM SECTION ── */
.preview-form-section {
  padding: 40px 20px;
}
.pv-form { display: flex; flex-direction: column; gap: 28px; }

.pv-form__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--soft-gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ── CATEGORY SELECTOR ── */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.category-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 6px;
  border-radius: 12px;
  border: 1px solid rgba(212,175,55,0.2);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.category-chip:hover {
  border-color: rgba(212,175,55,0.5);
  background: rgba(212,175,55,0.06);
}
.category-chip.selected {
  border-color: var(--gold);
  background: rgba(212,175,55,0.12);
  box-shadow: 0 0 14px rgba(212,175,55,0.15);
}
.category-chip__icon { font-size: 1.4rem; line-height: 1; }
.category-chip__label {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--champagne);
  text-align: center;
}
.category-chip.selected .category-chip__label { color: var(--gold); }

/* ── COLOR SELECTOR ── */
.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.color-swatch__dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all var(--transition);
  position: relative;
}
.color-swatch.selected .color-swatch__dot {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(212,175,55,0.4);
  transform: scale(1.12);
}
.color-swatch__name {
  font-size: 0.58rem;
  color: rgba(245,230,200,0.55);
  text-align: center;
  max-width: 44px;
}
.color-swatch.selected .color-swatch__name { color: var(--gold); }

/* ── INPUTS ── */
.pv-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--champagne);
  outline: none;
  transition: border-color var(--transition);
  -webkit-appearance: none;
}
.pv-input::placeholder { color: rgba(245,230,200,0.3); }
.pv-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.1); }
.pv-input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7) sepia(1) saturate(2) hue-rotate(5deg); }

/* ── DIVIDER ── */
.pv-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border) 30%, var(--glass-border) 70%, transparent);
  margin: 0 -24px;
}

/* ── GENERATING SECTION ── */
.generating-section {
  padding: 40px 20px;
  text-align: center;
}
.pv-generating__spinner {
  width: 60px;
  height: 60px;
  border: 2px solid rgba(212,175,55,0.15);
  border-top-color: var(--gold);
  border-radius: 50%;
  margin: 0 auto 28px;
  animation: pv-spin 1s linear infinite;
}
.pv-generating__text {
  font-family: var(--font-title);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: var(--soft-gold);
  min-height: 24px;
}

/* ── EVENT PREVIEW SECTION ── */
.event-preview-section { padding: 40px 20px; }
.pv-event-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
}
.pv-event-card__header {
  padding: 32px 24px 24px;
  text-align: center;
  position: relative;
  background: linear-gradient(160deg, rgba(212,175,55,0.08) 0%, rgba(11,12,16,0.6) 100%);
  border-bottom: 1px solid var(--glass-border);
}
.pv-event-card__badge {
  display: inline-block;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 50px;
  padding: 3px 10px;
  margin-bottom: 14px;
}
.pv-event-card__names {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 6vw, 2rem);
  color: var(--champagne);
  line-height: 1.25;
  margin-bottom: 8px;
}
.pv-event-card__tagline {
  font-size: 0.78rem;
  color: rgba(245,230,200,0.6);
  margin-bottom: 14px;
  font-style: italic;
}
.pv-event-card__date {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--soft-gold);
}

/* ── RSVP SECTION ── */
.rsvp-simulation-section { padding: 40px 20px; }
.pv-rsvp-header { text-align: center; margin-bottom: 24px; }
.pv-rsvp-label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pv-rsvp-hint {
  font-size: 0.82rem;
  color: rgba(245,230,200,0.6);
  font-style: italic;
}
.pv-rsvp-star {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 10px;
  animation: pv-pulse 2.5s ease-in-out infinite;
}
/* Stepper */
.pv-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 16px 0;
}
.pv-stepper__btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.35);
  background: transparent;
  color: var(--gold);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.pv-stepper__btn:hover { background: rgba(212,175,55,0.12); }
.pv-stepper__count {
  font-family: var(--font-title);
  font-size: 1.1rem;
  color: var(--champagne);
  min-width: 80px;
  text-align: center;
}

/* ── TICKET SECTION ── */
.ticket-section { padding: 40px 20px; }
.pv-ticket {
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(212,175,55,0.06) 0%, rgba(5,5,6,0.95) 100%);
  border: 1px solid rgba(212,175,55,0.25);
  overflow: hidden;
  position: relative;
}
.pv-ticket::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.pv-ticket__header {
  text-align: center;
  padding: 24px 20px 18px;
  border-bottom: 1px dashed rgba(212,175,55,0.2);
}
.pv-ticket__tag {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pv-ticket__title {
  font-family: var(--font-title);
  font-size: 1.1rem;
  color: var(--champagne);
  letter-spacing: 0.08em;
}
.pv-ticket__body { padding: 18px 20px; }
.pv-ticket__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.78rem;
}
.pv-ticket__row:last-child { border-bottom: none; }
.pv-ticket__key { color: rgba(245,230,200,0.45); }
.pv-ticket__val { color: var(--champagne); font-weight: 600; }
.pv-ticket__qr-wrap {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-top: 1px dashed rgba(212,175,55,0.2);
}
.pv-ticket__qr-label {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: rgba(245,230,200,0.35);
  text-transform: uppercase;
}
.pv-ticket__token {
  font-family: monospace;
  font-size: 0.75rem;
  color: rgba(212,175,55,0.5);
  letter-spacing: 0.08em;
}
.pv-ticket__watermark {
  text-align: center;
  font-size: 0.6rem;
  color: rgba(245,230,200,0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* ── QR VISUAL (SVG Canvas demo) ── */
.pv-qr-demo {
  width: 100px;
  height: 100px;
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 8px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(7,1fr);
  grid-template-rows: repeat(7,1fr);
  gap: 2px;
  background: rgba(11,12,16,0.8);
}
.pv-qr-demo .qr-c { background: rgba(212,175,55,0.7); border-radius: 1px; }
.pv-qr-demo .qr-e { background: transparent; }

/* ── CONFIRMATIONS SECTION ── */
.private-confirmations-section { padding: 40px 20px; }
.pv-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 0;
}
.pv-stat-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
}
.pv-stat-card__num {
  font-family: var(--font-title);
  font-size: 1.3rem;
  color: var(--gold);
  display: block;
  margin-bottom: 4px;
}
.pv-stat-card__label {
  font-size: 0.65rem;
  color: rgba(245,230,200,0.5);
  letter-spacing: 0.08em;
}
.pv-note {
  font-size: 0.72rem;
  color: rgba(245,230,200,0.35);
  text-align: center;
  font-style: italic;
  margin-top: 12px;
}

/* ── SIGNATURE TEASER ── */
.signature-teaser-section { padding: 40px 20px; }
.pv-sig-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(110,31,52,0.3), rgba(212,175,55,0.08));
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 50px;
  padding: 4px 14px;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--soft-gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.pv-mock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 20px 0;
}
.pv-mock-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(212,175,55,0.12);
  border-radius: 10px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.pv-mock-card__icon { font-size: 1.2rem; }
.pv-mock-card__label {
  font-size: 0.62rem;
  color: rgba(245,230,200,0.5);
  text-align: center;
  letter-spacing: 0.06em;
}
.pv-mock-card__val {
  font-family: var(--font-title);
  font-size: 0.95rem;
  color: var(--gold);
}

/* ── FINAL CTA ── */
.final-cta-section { padding: 48px 20px 80px; text-align: center; }
.pv-cta-headline {
  font-family: var(--font-title);
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  color: var(--champagne);
  line-height: 1.3;
  margin-bottom: 12px;
}
.pv-cta-sub {
  font-size: 0.82rem;
  color: rgba(245,230,200,0.55);
  margin-bottom: 32px;
  line-height: 1.6;
}
.pv-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 340px;
  margin: 0 auto;
}

/* ── SECTION HEADER ── */
.pv-section-header { margin-bottom: 24px; }
.pv-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}
.pv-section-title {
  font-family: var(--font-title);
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  color: var(--champagne);
  line-height: 1.3;
}
.pv-body-text {
  font-size: 0.85rem;
  color: rgba(245,230,200,0.65);
  line-height: 1.7;
  margin-top: 10px;
}

/* ── PROGRESS DOTS ── */
/* Ocultos hasta que el wizard inicie (.is-started en .preview-shell) */
.pv-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 16px 0;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
}
/* Solo visible cuando el shell tiene .is-started */
.preview-shell:not(.is-started) .pv-progress,
.pv-progress[hidden] {
  display: none !important;
}
.pv-progress__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(212,175,55,0.25);
  transition: all var(--transition);
}
.pv-progress__dot.active {
  width: 20px;
  border-radius: 3px;
  background: var(--gold);
}

/* ── ANIMATIONS ── */
@keyframes pv-spin {
  to { transform: rotate(360deg); }
}
@keyframes pv-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: 0.8; }
}
@keyframes pv-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes pv-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pv-animate-in {
  animation: pv-fade-in 0.5s ease forwards;
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── TABLET / DESKTOP ── */
@media (min-width: 640px) {
  .preview-shell { max-width: 560px; }
  .category-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .pv-cta-buttons { flex-direction: row; justify-content: center; max-width: none; }
}
@media (min-width: 960px) {
  .preview-shell { max-width: 620px; }
  .pv-title { font-size: 2.6rem; }
}

/* ── ESTADO DINÁMICO COLOR ACCENT ── */
:root { --pv-accent: #F5E6C8; }

/* ── CAMPO ERROR (VALIDACIÓN SUAVE) ── */
.pv-field-error {
  font-size: 0.72rem;
  color: var(--danger);
  margin-top: 6px;
  padding-left: 2px;
  display: block;
}
.pv-input.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239,68,68,0.1);
}
.pv-input.is-invalid:focus {
  border-color: var(--danger);
}

/* ── BOTÓN LOADING ── */
.btn-pv.is-loading {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ── BANNER ESTADO PREVIO ── */
.pv-resume-banner {
  margin-top: 24px;
  background: rgba(212,175,55,0.06);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 14px;
  padding: 16px 20px;
  text-align: center;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.pv-resume-banner__text {
  font-size: 0.8rem;
  color: rgba(245,230,200,0.7);
  margin-bottom: 12px;
  line-height: 1.5;
}
.pv-resume-banner__text strong {
  color: var(--soft-gold);
  font-weight: 600;
}
.pv-resume-banner__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── ACENTO DINÁMICO EN EVENT CARD ── */
.pv-event-card {
  transition: border-color 0.4s ease;
}

/* ═══════════════════════════════════════════════
   FASE 1J-B.3 — MOBILE RITUAL POLISH
   KC Studio · Microinteracciones · Animaciones ·
   Mobile QA · Progress Dots · UX Clarity
═══════════════════════════════════════════════ */

/* ── OVERFLOW GLOBAL GUARD ── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
.preview-shell {
  overflow-x: hidden;
}

/* ── SECTION ENTRANCE ANIMATION ── */
@keyframes pv-section-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pv-section.active {
  animation: pv-section-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Intro sin animación de entrada (siempre visible al inicio) */
.pv-section.intro-card.active {
  animation: none;
}

/* ── PROGRESS DOTS — POLISH VISUAL ── */
.pv-progress {
  bottom: 16px;
  gap: 8px;
  background: rgba(5,5,6,0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(212,175,55,0.12);
  border-radius: 50px;
  padding: 8px 14px;
}

.pv-progress__dot {
  width: 7px;
  height: 7px;
  background: rgba(212,175,55,0.3);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: default;
}

.pv-progress__dot.active {
  width: 22px;
  border-radius: 4px;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(212,175,55,0.5);
}

/* ── TOUCH FEEDBACK GLOBAL ── */
.btn-pv:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

.btn-pv--gold:active {
  box-shadow: 0 2px 10px rgba(212,175,55,0.2);
}

/* ── CATEGORY CHIPS — TOUCH MICROINTERACTION ── */
.category-chip {
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  /* min touch target */
  min-height: 68px;
}

.category-chip:active {
  transform: scale(0.94);
  background: rgba(212,175,55,0.1);
  transition: transform 0.1s ease, background 0.1s ease;
}

.category-chip.selected {
  transform: none;
}

.category-chip__icon {
  font-size: 1.5rem;
  line-height: 1;
  display: block;
}

/* ── COLOR SWATCHES — TOUCH FEEDBACK ── */
.color-swatch {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 4px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.color-swatch:active {
  background: rgba(212,175,55,0.08);
}

.color-swatch__dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.color-swatch.selected .color-swatch__dot {
  transform: scale(1.18);
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.25), 0 0 14px rgba(212,175,55,0.3);
}

/* ── STEPPER BUTTONS — COMFORT TOUCH ── */
.pv-stepper__btn {
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  -webkit-tap-highlight-color: transparent;
}

.pv-stepper__btn:active {
  transform: scale(0.9);
  background: rgba(212,175,55,0.18);
  transition: transform 0.1s ease, background 0.1s ease;
}

/* ── FORM MOBILE SPACING ── */
.pv-form__group {
  margin-bottom: 0;
}

.pv-form {
  gap: 24px;
}

.pv-input {
  font-size: 1rem; /* prevent iOS zoom */
  min-height: 52px;
}

/* ── INTRO CARD — MOBILE HIERARCHY ── */
.intro-card {
  padding: 56px 24px 48px;
  gap: 0;
}

.pv-envelope {
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
  animation: pv-float 3.5s ease-in-out infinite;
}

.pv-badge {
  margin-bottom: 20px;
}

.intro-card .pv-title {
  margin-bottom: 14px;
}

.intro-card .pv-subtitle {
  margin-bottom: 32px;
  font-size: 0.88rem;
}

.intro-card .btn-pv--gold {
  width: 100%;
  max-width: 280px;
  font-size: 1rem;
  padding: 16px 28px;
  box-shadow: 0 6px 28px rgba(212,175,55,0.4);
}

/* ── GENERATING SECTION — RITUAL UPGRADE ── */
.generating-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70dvh;
  padding: 40px 24px;
  text-align: center;
  gap: 0;
}

.pv-generating__spinner {
  width: 56px;
  height: 56px;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(212,175,55,0.12) rgba(212,175,55,0.12) rgba(212,175,55,0.12) var(--gold);
  border-radius: 50%;
  margin-bottom: 32px;
}

.pv-generating__text {
  font-family: var(--font-title);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--soft-gold);
  min-height: 28px;
}

/* Generando label superior */
.generating-section .pv-generating__label {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: rgba(212,175,55,0.4);
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* ── EVENT PREVIEW — HIERARCHY ── */
.pv-event-card__header {
  padding: 36px 24px 28px;
}

.pv-event-card__badge {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  padding: 4px 12px;
  margin-bottom: 18px;
}

.pv-event-card__names {
  font-size: clamp(1.5rem, 7vw, 2.2rem);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.pv-event-card__tagline {
  font-size: 0.8rem;
  margin-bottom: 16px;
  line-height: 1.6;
}

.pv-event-card__date {
  font-size: 0.78rem;
}

/* ── TICKET — RECOMPENSA VISUAL ── */
.ticket-section .pv-section-header {
  text-align: center;
}

.pv-ticket {
  margin: 0 auto;
}

.pv-ticket__header {
  padding: 28px 24px 22px;
  background: linear-gradient(160deg, rgba(212,175,55,0.07) 0%, rgba(11,12,16,0.5) 100%);
}

.pv-ticket__tag {
  letter-spacing: 0.22em;
  margin-bottom: 8px;
}

.pv-ticket__title {
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}

.pv-ticket__body {
  padding: 16px 22px;
}

.pv-ticket__row {
  padding: 9px 0;
  font-size: 0.82rem;
}

.pv-ticket__qr-wrap {
  padding: 22px 20px;
  gap: 12px;
}

.pv-qr-demo {
  width: 110px;
  height: 110px;
  gap: 3px;
  padding: 9px;
}

/* ── RSVP SCENE ── */
.pv-rsvp-header {
  text-align: center;
  margin-bottom: 28px;
}

.pv-rsvp-star {
  font-size: 2rem;
  margin-bottom: 12px;
}

.pv-rsvp-label {
  font-size: 0.75rem;
  margin-bottom: 6px;
}

.pv-rsvp-hint {
  font-size: 0.85rem;
  color: rgba(245,230,200,0.65);
  line-height: 1.5;
}

/* Botón Confirmar asistencia como protagonista */
#btnConfirmarRsvp {
  margin-top: 24px;
  font-size: 1rem;
  padding: 17px 28px;
  box-shadow: 0 6px 24px rgba(212,175,55,0.35);
}

/* ── CONFIRMACIONES — STATS CLARITY ── */
.pv-stats-grid {
  margin: 24px 0;
  gap: 12px;
}

.pv-stat-card {
  padding: 18px 14px;
  border-radius: 14px;
}

.pv-stat-card__num {
  font-size: 1.25rem;
  margin-bottom: 5px;
}

.pv-stat-card__label {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

/* ── SIGNATURE TEASER — CLARITY ── */
.pv-mock-grid {
  margin: 22px 0;
  gap: 10px;
}

.pv-mock-card {
  padding: 18px 10px;
  border-radius: 12px;
  gap: 7px;
}

.pv-mock-card__icon {
  font-size: 1.3rem;
}

.pv-mock-card__val {
  font-size: 1rem;
}

.pv-mock-card__label {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

/* ── FINAL CTA — CIERRE COMERCIAL ── */
.final-cta-section {
  padding: 52px 24px 100px;
}

.pv-cta-headline {
  font-size: clamp(1.3rem, 5.5vw, 1.7rem);
  margin-bottom: 14px;
}

.pv-cta-sub {
  font-size: 0.84rem;
  margin-bottom: 36px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.pv-cta-buttons {
  gap: 14px;
}

.btn-pv--wa {
  font-size: 1rem;
  padding: 17px 28px;
  box-shadow: 0 6px 28px rgba(37,211,102,0.35);
}

/* ── SECTION HEADERS MOBILE ── */
.pv-section-header {
  margin-bottom: 28px;
}

.pv-eyebrow {
  margin-bottom: 10px;
}

.pv-section-title {
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  line-height: 1.3;
}

.pv-body-text {
  font-size: 0.84rem;
  margin-top: 12px;
}

/* ── SECTION PADDING MOBILE ── */
.pv-section {
  padding: 44px 20px 60px;
}

.preview-form-section {
  padding: 36px 20px 60px;
}

.rsvp-simulation-section {
  padding: 44px 20px 60px;
}

/* ── CATEGORY GRID 360px FIX ── */
@media (max-width: 380px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .category-chip {
    padding: 10px 4px;
    min-height: 62px;
  }

  .category-chip__icon {
    font-size: 1.25rem;
  }

  .category-chip__label {
    font-size: 0.58rem;
  }

  .color-swatch__dot {
    width: 34px;
    height: 34px;
  }

  .color-swatch__name {
    font-size: 0.55rem;
    max-width: 40px;
  }

  .pv-title {
    font-size: 1.65rem;
  }

  .pv-ticket__row {
    font-size: 0.76rem;
  }
}

/* ── 390px COMFORT ── */
@media (min-width: 381px) and (max-width: 430px) {
  .pv-title {
    font-size: clamp(1.8rem, 7.5vw, 2.2rem);
  }

  .category-chip {
    padding: 12px 6px;
  }

  .pv-ticket {
    max-width: 100%;
  }
}

/* ── FOCUS VISIBLE — ACCESSIBILITY ── */
.btn-pv:focus-visible,
.category-chip:focus-visible,
.color-swatch:focus-visible,
.pv-stepper__btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.pv-input:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.18);
}

/* ── DISABLED BUTTON STATE ── */
.btn-pv:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* ── REDUCED MOTION OVERRIDE ── */
@media (prefers-reduced-motion: reduce) {
  .pv-section.active {
    animation: none;
  }

  .pv-envelope {
    animation: none;
  }

  .btn-pv:active,
  .category-chip:active,
  .pv-stepper__btn:active {
    transform: none;
  }

  .color-swatch.selected .color-swatch__dot {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════
   FASE 1J-B.4 — KC-RSVP CINEMATIC EXPERIENCE
   Event Cover · Color Binding · RSVP Premium ·
   Ticket Cinema · QR SVG Premium
═══════════════════════════════════════════════ */

/* ── COLOR THEME EXTENDED VARS ── */
:root {
  --pv-accent-soft: rgba(245,230,200,0.15);
  --pv-accent-glow: rgba(245,230,200,0.25);
  --pv-accent-ink:  #0B0C10;
}

/* ── BTN ACCENT GLOW ── */
.btn-pv--accent-glow {
  background: var(--pv-accent);
  color: var(--pv-accent-ink);
  box-shadow: 0 4px 24px var(--pv-accent-glow), 0 0 0 1px rgba(255,255,255,0.06);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.btn-pv--accent-glow:hover,
.btn-pv--accent-glow:focus-visible {
  box-shadow: 0 6px 32px var(--pv-accent-glow), 0 0 16px var(--pv-accent-glow);
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.btn-pv--accent-glow:active { transform: scale(0.97); }

/* ── EVENT COVER ── */
.pv-event-cover {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--pv-accent-soft);
  background: linear-gradient(155deg, rgba(11,12,16,0.95) 0%, rgba(5,5,6,0.98) 100%);
  box-shadow: 0 0 40px var(--pv-accent-glow);
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
.pv-event-cover__glow {
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--pv-accent-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transition: background 0.5s ease;
}
.pv-event-cover__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 44px 24px 28px;
}
.pv-event-cover__badge {
  display: inline-block;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  color: var(--pv-accent);
  text-transform: uppercase;
  border: 1px solid var(--pv-accent-soft);
  border-radius: 50px;
  padding: 4px 14px;
  margin-bottom: 20px;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.pv-event-cover__names {
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  color: var(--champagne);
  line-height: 1.2;
  margin-bottom: 12px;
  letter-spacing: 0.03em;
}
.pv-event-cover__tagline {
  font-size: 0.8rem;
  color: rgba(245,230,200,0.5);
  font-style: italic;
  margin-bottom: 18px;
  line-height: 1.6;
}
.pv-event-cover__divider {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pv-accent), transparent);
  margin: 0 auto 18px;
  opacity: 0.6;
  transition: background 0.5s ease;
}
.pv-event-cover__date {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--pv-accent);
  opacity: 0.85;
}
.pv-event-cover__cta {
  position: relative;
  z-index: 1;
  padding: 20px 24px 28px;
  text-align: center;
}

/* Data strip */
.pv-event-data-strip {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--pv-accent-soft);
  padding: 14px 20px;
  background: rgba(0,0,0,0.25);
  transition: border-color 0.5s ease;
}
.pv-event-data-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
}
.pv-event-data-strip__label {
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  color: rgba(245,230,200,0.4);
  text-transform: uppercase;
}
.pv-event-data-strip__val {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pv-accent);
  transition: color 0.4s ease;
}
.pv-event-data-strip__sep {
  width: 1px;
  height: 28px;
  background: var(--pv-accent-soft);
  margin: 0 2px;
}

/* ── RSVP ACCESS BADGE ── */
.pv-rsvp-access-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 16px;
  padding: 7px 16px;
  border: 1px solid var(--pv-accent-soft);
  border-radius: 50px;
  background: rgba(0,0,0,0.3);
  max-width: 300px;
  font-size: 0.72rem;
  transition: border-color 0.4s ease;
}
.pv-rsvp-access-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pv-accent);
  box-shadow: 0 0 6px var(--pv-accent-glow);
  animation: pv-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.pv-rsvp-access-badge__text { color: rgba(245,230,200,0.7); }
.pv-rsvp-access-badge__sep { color: rgba(245,230,200,0.25); }
.pv-rsvp-access-badge__passes { color: var(--pv-accent); font-weight: 600; }

/* ── RSVP LINK VISUAL ── */
.pv-rsvp-link-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 20px;
  padding: 9px 18px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(212,175,55,0.18);
  border-radius: 10px;
  max-width: 300px;
  user-select: none;
  -webkit-user-select: none;
}
.pv-rsvp-link-visual__url {
  font-family: monospace;
  font-size: 0.72rem;
  color: rgba(245,230,200,0.4);
  letter-spacing: 0.04em;
}
.pv-rsvp-link-visual__icon,
.pv-rsvp-link-visual__lock { font-size: 0.85rem; opacity: 0.45; }

/* ── RSVP CARD ── */
.pv-rsvp-card { border-color: var(--pv-accent-soft); }
.pv-rsvp-card__header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--glass-border);
  text-align: center;
}
.pv-rsvp-card__eyebrow {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: rgba(245,230,200,0.45);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pv-rsvp-card__event {
  font-family: var(--font-title);
  font-size: 1.05rem;
  color: var(--champagne);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.pv-rsvp-card__note {
  font-size: 0.75rem;
  color: rgba(245,230,200,0.4);
  line-height: 1.55;
  font-style: italic;
}

/* ── RSVP DONE STATE ── */
.pv-rsvp-done {
  text-align: center;
  padding: 32px 24px;
}
.pv-rsvp-done__icon { font-size: 2rem; margin-bottom: 10px; }
.pv-rsvp-done__title {
  font-family: var(--font-title);
  color: var(--champagne);
  font-size: 1rem;
  margin-bottom: 6px;
}
.pv-rsvp-done__sub { font-size: 0.78rem; color: rgba(245,230,200,0.5); }

/* ── TICKET CINEMA ── */
@keyframes pv-ticket-reveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pv-ticket--cinema {
  animation: pv-ticket-reveal 0.52s cubic-bezier(0.22,1,0.36,1) both;
}
.pv-ticket__shimmer {
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--pv-accent) 40%, transparent 100%);
  opacity: 0.7;
  transition: background 0.5s ease;
}
.pv-ticket__val--success { color: var(--success); }
.pv-ticket__continue {
  margin-top: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.pv-ticket__continue-hint {
  font-size: 0.72rem;
  color: rgba(245,230,200,0.35);
  font-style: italic;
  max-width: 260px;
  line-height: 1.5;
}

/* ── QR PREMIUM SVG ── */
.pv-qr-premium {
  position: relative;
  width: 144px;
  height: 144px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border-radius: 14px;
  background: rgba(11,12,16,0.9);
  border: 1px solid var(--pv-accent-soft);
  padding: 10px;
  transition: border-color 0.5s ease;
}
.pv-qr-premium svg { position: relative; z-index: 1; }
.pv-qr-premium__halo {
  position: absolute;
  inset: -8px;
  border-radius: 20px;
  background: radial-gradient(circle, var(--pv-accent-glow) 0%, transparent 65%);
  pointer-events: none;
  transition: background 0.5s ease;
  z-index: 0;
}

/* ── REDUCED MOTION 1J-B.4 ── */
@media (prefers-reduced-motion: reduce) {
  .pv-ticket--cinema { animation: none; }
  .pv-rsvp-access-badge__dot { animation: none; }
  .btn-pv--accent-glow:hover { transform: none; filter: none; }
}




/* ═══════════════════════════════════════════════
   FASE 1J-B.5 — MINI PORTAL + MOODCARDS + SIGNATURE VISUAL
   Countdown · Details Chips · Moodcards full-code ·
   RSVP access-info · Sig ring+bars · CTA dual
═══════════════════════════════════════════════ */

/* ── MINI PORTAL CONTAINER ── */
.pv-mini-portal {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pv-mini-portal__cta {
  padding: 0 4px 8px;
}
.pv-event-cover__cta-hint {
  font-size: 0.72rem;
  color: rgba(245,230,200,0.45);
  font-style: italic;
  margin-bottom: 14px;
  line-height: 1.5;
}

/* ── COUNTDOWN ── */
.pv-countdown {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--pv-accent-soft);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  transition: border-color 0.5s ease;
}
.pv-countdown__inner {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}
.pv-countdown__num {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 10vw, 3rem);
  color: var(--pv-accent);
  line-height: 1;
  transition: color 0.4s ease;
}
.pv-countdown__label {
  font-size: 0.78rem;
  color: rgba(245,230,200,0.5);
  letter-spacing: 0.08em;
}
.pv-countdown__sub {
  font-size: 0.72rem;
  color: rgba(245,230,200,0.35);
  font-style: italic;
}

/* ── DETAILS CHIPS ── */
.pv-details-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pv-details-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--pv-accent-soft);
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color 0.4s ease;
}
.pv-details-chip__icon {
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
}
.pv-details-chip__val {
  font-size: 0.72rem;
  color: var(--champagne);
  font-weight: 500;
  line-height: 1.3;
  word-break: break-word;
}

/* ── MOODCARDS ── */
.pv-moodcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pv-moodcard {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 2/3;
  min-height: 130px;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--pv-accent-soft);
  transition: border-color 0.5s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.pv-moodcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--pv-accent-glow);
}

/* Gradiente base por posición */
.pv-moodcard--1 {
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, var(--pv-accent-soft) 0%, transparent 65%),
    linear-gradient(180deg, rgba(5,5,6,0.1) 0%, rgba(5,5,6,0.85) 60%);
  background-color: var(--obsidian);
}
.pv-moodcard--2 {
  background:
    radial-gradient(ellipse 90% 70% at 50% 10%, var(--pv-accent-glow) 0%, transparent 60%),
    linear-gradient(180deg, rgba(5,5,6,0.15) 0%, rgba(5,5,6,0.88) 65%);
  background-color: rgba(11,12,16,0.98);
}
.pv-moodcard--3 {
  background:
    radial-gradient(ellipse 80% 70% at 50% 5%, var(--pv-accent-soft) 0%, transparent 65%),
    linear-gradient(180deg, rgba(5,5,6,0.12) 0%, rgba(5,5,6,0.90) 70%);
  background-color: rgba(9,9,9,0.99);
}

/* Halo interno de moodcard */
.pv-moodcard__halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 15%, var(--pv-accent-glow) 0%, transparent 65%);
  pointer-events: none;
  transition: background 0.5s ease;
}

/* Contenido de moodcard */
.pv-moodcard__content {
  position: relative;
  z-index: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  text-align: center;
}
.pv-moodcard__glyph {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 4px;
  filter: drop-shadow(0 0 8px var(--pv-accent-glow));
}
.pv-moodcard__label {
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: var(--pv-accent);
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.3;
  transition: color 0.4s ease;
}

/* Mobile: moodcards no tan altas en 360px */
@media (max-width: 380px) {
  .pv-moodcards { gap: 6px; }
  .pv-moodcard { min-height: 90px; }
  .pv-moodcard__glyph { font-size: 1.1rem; }
  .pv-moodcard__label { font-size: 0.5rem; }
}

/* ── RSVP ACCESS INFO (reemplaza link-visual) ── */
.pv-rsvp-access-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 auto 20px;
  padding: 11px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--pv-accent-soft);
  border-radius: 12px;
  max-width: 340px;
  transition: border-color 0.4s ease;
}
.pv-rsvp-access-info__item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
}
.pv-rsvp-access-info__icon { font-size: 0.9rem; opacity: 0.6; }
.pv-rsvp-access-info__text {
  font-size: 0.68rem;
  color: rgba(245,230,200,0.6);
  letter-spacing: 0.04em;
}
.pv-rsvp-access-info__text strong { color: var(--pv-accent); }
.pv-rsvp-access-info__sep {
  width: 1px;
  height: 24px;
  background: var(--pv-accent-soft);
  margin: 0 4px;
}

/* ── SIGNATURE VISUAL: RING + BARS ── */
.pv-sig-visual {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: 20px 0;
  padding: 20px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--pv-accent-soft);
  border-radius: 16px;
  transition: border-color 0.5s ease;
}

/* Anillo SVG */
.pv-sig-ring {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
}
.pv-sig-ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pv-sig-ring__num {
  font-family: var(--font-title);
  font-size: 1.3rem;
  color: var(--pv-accent);
  line-height: 1;
  transition: color 0.4s ease;
}
.pv-sig-ring__label {
  font-size: 0.5rem;
  color: rgba(245,230,200,0.4);
  letter-spacing: 0.08em;
  text-align: center;
}

/* Barras */
.pv-sig-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pv-sig-bar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.pv-sig-bar__name {
  font-size: 0.65rem;
  color: rgba(245,230,200,0.5);
  letter-spacing: 0.06em;
}
.pv-sig-bar__val {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--champagne);
}
.pv-sig-bar__track {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.pv-sig-bar__fill {
  height: 100%;
  background: var(--pv-accent);
  border-radius: 2px;
  opacity: 0.7;
  transition: width 0.8s ease, background 0.4s ease;
}

/* Mobile: sig visual en columna en 360px */
@media (max-width: 380px) {
  .pv-sig-visual { flex-direction: column; align-items: center; }
}

/* ── CTA SECONDARY ── */
.pv-cta-secondary {
  margin-top: 28px;
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(212,175,55,0.1);
}
.pv-cta-secondary__hint {
  font-size: 0.72rem;
  color: rgba(245,230,200,0.35);
  font-style: italic;
  margin-bottom: 12px;
  line-height: 1.5;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}
.pv-cta-secondary__btn {
  font-size: 0.78rem;
  opacity: 0.65;
  padding: 10px 24px;
  min-height: auto;
}
.pv-cta-secondary__btn:hover { opacity: 1; }

/* ── REDUCED MOTION 1J-B.5 ── */
@media (prefers-reduced-motion: reduce) {
  .pv-moodcard:hover { transform: none; }
  .pv-sig-bar__fill { transition: none; }
  .pv-sig-ring circle { transition: none; }
}

/* ═══════════════════════════════════════════════
   FASE 1J-B.5R — KC Style Reality Alignment
   Sobre/Carta · Inv Hero · Countdown editorial ·
   Moodcard frame · Inv Moments · Inv Details
═══════════════════════════════════════════════ */

/* ── SOBRE / CARTA DE ENTRADA ── */
.pv-sobre {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--pv-accent-soft);
  background: linear-gradient(155deg, rgba(11,12,16,0.97) 0%, rgba(5,5,5,0.99) 100%);
  box-shadow: 0 0 48px var(--pv-accent-glow), 0 1px 0 rgba(255,255,255,0.04) inset;
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
.pv-sobre__glow {
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--pv-accent-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transition: background 0.5s ease;
}
.pv-sobre__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 48px 28px 24px;
}
.pv-sobre__eyebrow {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: rgba(245,230,200,0.5);
  text-transform: uppercase;
  margin-bottom: 18px;
  animation: pv-pulse 3s ease-in-out infinite;
}
.pv-sobre__names {
  font-family: var(--font-title);
  font-size: clamp(2rem, 10vw, 3rem);
  font-style: italic;
  color: var(--champagne);
  line-height: 1.1;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.pv-sobre__divisor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 14px;
}
.pv-sobre__divisor::before,
.pv-sobre__divisor::after {
  content: '';
  height: 1px;
  width: 50px;
  background: linear-gradient(90deg, transparent, var(--pv-accent));
  opacity: 0.5;
  transition: background 0.5s ease;
}
.pv-sobre__divisor::after {
  background: linear-gradient(270deg, transparent, var(--pv-accent));
}
.pv-sobre__divisor span { color: var(--pv-accent); font-size: 0.9rem; transition: color 0.4s ease; }
.pv-sobre__type {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: rgba(245,230,200,0.55);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.pv-sobre__date {
  font-size: 0.82rem;
  color: var(--pv-accent);
  letter-spacing: 0.08em;
  transition: color 0.4s ease;
}
.pv-sobre__footer {
  position: relative;
  z-index: 1;
  padding: 20px 28px 32px;
  text-align: center;
  border-top: 1px solid var(--pv-accent-soft);
  background: rgba(0,0,0,0.2);
  transition: border-color 0.5s ease;
}
.pv-sobre__hint {
  font-size: 0.72rem;
  color: rgba(245,230,200,0.4);
  font-style: italic;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ── MINI PORTAL CTA COPY ── */
.pv-mini-portal__cta-copy {
  font-size: 0.75rem;
  color: rgba(245,230,200,0.45);
  font-style: italic;
  margin-bottom: 14px;
  line-height: 1.55;
  text-align: center;
}

/* ── INVITATION HERO (portada como invitación real) ── */
.pv-inv-hero {
  position: relative;
  text-align: center;
  padding: 36px 20px 28px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(170deg, rgba(11,12,16,0.95) 0%, rgba(5,5,5,0.98) 100%);
  border: 1px solid var(--pv-accent-soft);
  box-shadow: 0 0 28px var(--pv-accent-glow);
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
.pv-inv-hero__glow {
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 60%;
  background: radial-gradient(ellipse, var(--pv-accent-glow) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  transition: background 0.5s ease;
}
.pv-inv-hero__pre {
  position: relative;
  z-index: 1;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: var(--pv-accent);
  text-transform: uppercase;
  margin-bottom: 16px;
  transition: color 0.4s ease;
}
.pv-inv-hero__names {
  position: relative;
  z-index: 1;
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 8vw, 2.8rem);
  font-style: italic;
  color: var(--champagne);
  line-height: 1.1;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.pv-inv-hero__divisor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 12px;
  position: relative;
  z-index: 1;
}
.pv-inv-hero__divisor::before,
.pv-inv-hero__divisor::after {
  content: '';
  height: 1px;
  width: 40px;
  background: linear-gradient(90deg, transparent, var(--pv-accent));
  opacity: 0.5;
}
.pv-inv-hero__divisor::after { background: linear-gradient(270deg, transparent, var(--pv-accent)); }
.pv-inv-hero__divisor span { color: var(--pv-accent); font-size: 0.8rem; }
.pv-inv-hero__tagline {
  position: relative;
  z-index: 1;
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(245,230,200,0.5);
  margin-bottom: 12px;
  line-height: 1.55;
}
.pv-inv-hero__date {
  position: relative;
  z-index: 1;
  font-size: 0.8rem;
  color: var(--pv-accent);
  letter-spacing: 0.1em;
  opacity: 0.9;
  transition: color 0.4s ease;
}

/* ── COUNTDOWN EDITORIAL (modo invitación) ── */
.pv-countdown--inv {
  text-align: center;
}
.pv-countdown__title {
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-style: italic;
  color: rgba(245,230,200,0.55);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

/* ── INVITATION MOMENTS (wrapper de moodcards) ── */
.pv-inv-moments {
  text-align: center;
}
.pv-inv-moments__title {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: rgba(245,230,200,0.35);
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ── MOODCARD FRAME (border editorial como marco de foto) ── */
.pv-moodcard__frame {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(245,230,200,0.08);
  border-radius: 8px;
  pointer-events: none;
  z-index: 0;
  transition: border-color 0.5s ease;
}

/* Moodcard: content stays above frame */
.pv-moodcard__content {
  z-index: 2;
}
/* Glyph on top */
.pv-moodcard__glyph { margin-bottom: 4px; }
.pv-moodcard__label {
  font-style: italic;
  letter-spacing: 0.06em;
  font-size: 0.6rem;
  text-transform: none;
  font-weight: 500;
  color: var(--pv-accent);
  text-shadow: 0 0 12px var(--pv-accent-glow);
}

/* ── INVITATION DETAILS ── */
.pv-inv-details {
  text-align: center;
}
.pv-inv-details__divisor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 14px;
}
.pv-inv-details__divisor::before,
.pv-inv-details__divisor::after {
  content: '';
  height: 1px;
  width: 30px;
  background: linear-gradient(90deg, transparent, var(--pv-accent));
  opacity: 0.35;
}
.pv-inv-details__divisor::after { background: linear-gradient(270deg, transparent, var(--pv-accent)); }
.pv-inv-details__divisor span { color: var(--pv-accent); font-size: 0.75rem; opacity: 0.5; }

/* ── HIDE OLD LEGACY CLASSES (event-cover, data-strip no longer visible) ── */
.pv-event-cover, .pv-event-data-strip { display: none !important; }

/* ═══════════════════════════════════════════════
   FASE 1J-B.6 — Mobile QA Prep + Copy Micro-adjusts
═══════════════════════════════════════════════ */

/* ── SOBRE: nombres largos no rompen en 360px ── */
.pv-sobre__names {
  word-break: break-word;
  overflow-wrap: break-word;
}
.pv-inv-hero__names {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── SOBRE: padding reducido en 360px ── */
@media (max-width: 380px) {
  .pv-sobre__inner  { padding: 36px 20px 18px; }
  .pv-sobre__footer { padding: 16px 20px 24px; }
  .pv-inv-hero      { padding: 28px 16px 22px; }
}

/* ── CTA FINAL: botones apilados en 360px, sin overflow ── */
.pv-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  width: 100%;
}
.pv-cta-buttons .btn-pv {
  width: 100%;
  max-width: 340px;
  text-align: center;
}

/* ── TICKET: watermark sin overflow ── */
.pv-ticket__watermark {
  font-size: 0.62rem;
  white-space: normal;
  word-break: break-word;
}

/* ── STAT CARDS: label trunca si es muy largo ── */
.pv-stat-card__num {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── SIG VISUAL: stacks limpiamente en 380px ── */
@media (max-width: 380px) {
  .pv-sig-bars { gap: 8px; }
  .pv-sig-bar__name { font-size: 0.6rem; }
}

/* ── COUNTDOWN: evitar overflow numérico ── */
.pv-countdown__num {
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
}

/* ── RSVP CARD: note tiene color correcto ── */
.pv-rsvp-card__note {
  color: rgba(245,230,200,0.5);
  font-size: 0.72rem;
  font-style: italic;
  margin-top: 6px;
  line-height: 1.5;
}

/* ── ARIA: focus-visible visible para navegación teclado ── */
.btn-pv:focus-visible,
.category-chip:focus-visible,
.color-swatch:focus-visible {
  outline: 2px solid var(--pv-accent);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════
   FASE 1J-B.5R2 — CARTA/SOBRE KC STYLE REAL
   Inspirado en Boda Clara modal-inicio/carta
   Sobre CSS real: base · carta · frente · tapa · sello
   Color theming per palette
═══════════════════════════════════════════════ */

/* ── SOBRE: eyebrow + sub intro ── */
.pv-carta-eyebrow {
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--pv-accent);
  text-transform: uppercase;
  margin-bottom: 6px;
  animation: pv-pulse 3s ease-in-out infinite;
  transition: color 0.4s ease;
}
.pv-carta-sub {
  text-align: center;
  font-size: 0.78rem;
  color: rgba(245,230,200,0.5);
  margin-bottom: 28px;
  font-style: italic;
}

/* ── ESCENA DEL SOBRE ── */
.pv-carta-escena {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 0 auto;
  perspective: 1200px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* Base del sobre (fondo del cuerpo) */
.pv-carta-base {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: linear-gradient(145deg, var(--pv-accent) 0%, rgba(var(--pv-sobre-rgb, 212,175,55),0.7) 100%);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.5),
    0 4px 16px rgba(0,0,0,0.3),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  transition: background 0.5s ease;
}

/* Carta interna (papel que se eleva al abrir) */
.pv-carta-letter {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 178px;
  background: var(--pv-carta-paper, #F5E6C8);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 0 24px rgba(0,0,0,0.25) inset, 0 2px 8px rgba(0,0,0,0.2);
  border: 1px solid rgba(212,175,55,0.25);
  transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.5s ease;
  z-index: 1;
  overflow: hidden;
}
.pv-carta-letter::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--pv-accent), transparent);
  opacity: 0.6;
  transition: background 0.5s ease;
}

.pv-carta-letter__eyebrow {
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(30,42,53,0.5);
  margin-bottom: 4px;
  transition: color 0.4s ease;
}
.pv-carta-letter__names {
  font-family: var(--font-title);
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  font-style: italic;
  color: var(--pv-carta-ink, #1E2A35);
  line-height: 1.1;
  text-align: center;
  padding: 0 12px;
  transition: color 0.4s ease;
}
.pv-carta-letter__div {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}
.pv-carta-letter__div::before,
.pv-carta-letter__div::after {
  content: '';
  height: 1px;
  width: 30px;
  background: linear-gradient(90deg, transparent, var(--pv-accent));
  opacity: 0.5;
  transition: background 0.5s ease;
}
.pv-carta-letter__div::after { background: linear-gradient(270deg, transparent, var(--pv-accent)); }
.pv-carta-letter__div span {
  color: var(--pv-accent);
  font-size: 0.7rem;
  transition: color 0.4s ease;
}
.pv-carta-letter__type {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(30,42,53,0.5);
  transition: color 0.4s ease;
}
.pv-carta-letter__date {
  font-size: 0.62rem;
  color: var(--pv-carta-ink, #1E2A35);
  opacity: 0.6;
  transition: color 0.4s ease;
}

/* Frente del sobre — V-shape que tapa la parte inferior */
.pv-carta-frente {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, var(--pv-accent) 0%, rgba(var(--pv-sobre-rgb, 212,175,55),0.85) 100%);
  clip-path: polygon(0 30%, 50% 80%, 100% 30%, 100% 100%, 0 100%);
  border-radius: 0 0 4px 4px;
  z-index: 2;
  transition: background 0.5s ease;
}

/* Tapa del sobre — V invertida que se abre hacia arriba */
.pv-carta-tapa {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 50% 62%);
  background: linear-gradient(160deg, rgba(255,255,255,0.15) 0%, var(--pv-accent) 40%, rgba(var(--pv-sobre-rgb, 212,175,55),0.8) 100%);
  transform-origin: top center;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s ease;
  z-index: 5;
  border-radius: 4px 4px 0 0;
}

/* Sello del sobre */
.pv-carta-sello {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: radial-gradient(circle at 35% 35%, var(--pv-sello-light, #6E1F34), var(--pv-sello-dark, #3D0F1D));
  border-radius: 50%;
  z-index: 6;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45), inset 0 1px 3px rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(var(--pv-sobre-rgb, 212,175,55),0.5);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.4s ease;
}
.pv-carta-sello__text {
  font-family: var(--font-title);
  font-size: 0.7rem;
  font-style: italic;
  color: rgba(var(--pv-sobre-rgb, 212,175,55),0.9);
  letter-spacing: 0.06em;
  transition: color 0.4s ease;
}

/* ── ESTADO ABIERTO ── */
.pv-carta-escena.is-open .pv-carta-tapa {
  transform: rotateX(-180deg);
}
.pv-carta-escena.is-open .pv-carta-sello {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
}
.pv-carta-escena.is-open .pv-carta-letter {
  transform: translateY(-110px);
}

/* ── HOVER: sobre respira ── */
.pv-carta-escena:not(.is-open):hover .pv-carta-letter {
  transform: translateY(-8px);
}
.pv-carta-escena:not(.is-open):active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

/* ── BOTÓN ABRIR CARTA ── */
.pv-carta-action {
  text-align: center;
  margin-top: 20px;
  transition: opacity 0.4s ease;
}
.pv-carta-action.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ── MINI INVITACIÓN BODY ── */
.pv-inv-body {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: pv-fade-in 0.5s ease forwards;
}

/* ── CTA RSVP INTEGRADO ── */
.pv-inv-rsvp-cta {
  padding: 0 4px 8px;
  text-align: center;
}
.pv-inv-rsvp-cta__copy {
  font-size: 0.75rem;
  color: rgba(245,230,200,0.5);
  font-style: italic;
  margin-bottom: 14px;
  line-height: 1.55;
}

/* ── TEMATIZACIÓN POR COLOR (--pv-carta-paper · --pv-carta-ink · --pv-sobre-rgb · sello) ── */

/* Champagne */
:root[data-color="Champagne"] {
  --pv-carta-paper:  #FAF0DC;
  --pv-carta-ink:    #2A1F0F;
  --pv-sobre-rgb:    212,175,55;
  --pv-sello-light:  #8B6914;
  --pv-sello-dark:   #4A3500;
}

/* Rosa Palo */
:root[data-color="Rosa Palo"] {
  --pv-carta-paper:  #FAF0F0;
  --pv-carta-ink:    #3D1A1A;
  --pv-sobre-rgb:    216,167,167;
  --pv-sello-light:  #A05050;
  --pv-sello-dark:   #5A2020;
}

/* Verde Salvia */
:root[data-color="Verde Salvia"] {
  --pv-carta-paper:  #EEF3EA;
  --pv-carta-ink:    #1A2E1A;
  --pv-sobre-rgb:    175,199,160;
  --pv-sello-light:  #4A6B3A;
  --pv-sello-dark:   #253A20;
}

/* Azul Noche */
:root[data-color="Azul Noche"] {
  --pv-carta-paper:  #0D1525;
  --pv-carta-ink:    #B8C8E8;
  --pv-sobre-rgb:    136,153,204;
  --pv-sello-light:  #2A3D7A;
  --pv-sello-dark:   #111A3D;
}

/* Terracota */
:root[data-color="Terracota"] {
  --pv-carta-paper:  #F5E8E0;
  --pv-carta-ink:    #3D1A0A;
  --pv-sobre-rgb:    200,132,90;
  --pv-sello-light:  #9B4E28;
  --pv-sello-dark:   #5A2510;
}

/* Borgoña */
:root[data-color="Borgoña"] {
  --pv-carta-paper:  #1A050D;
  --pv-carta-ink:    #F2D0D8;
  --pv-sobre-rgb:    212,115,138;
  --pv-sello-light:  #8B1530;
  --pv-sello-dark:   #4A0818;
}

/* Negro Dorado */
:root[data-color="Negro Dorado"] {
  --pv-carta-paper:  #0A0A0A;
  --pv-carta-ink:    #D4AF37;
  --pv-sobre-rgb:    212,175,55;
  --pv-sello-light:  #6B4F00;
  --pv-sello-dark:   #2A1E00;
}

/* ── RESPONSIVE: escena en 360px ── */
@media (max-width: 380px) {
  .pv-carta-escena {
    width: 260px;
    height: 175px;
  }
  .pv-carta-letter {
    height: 155px;
  }
  .pv-carta-letter__names {
    font-size: 1.1rem;
  }
  .pv-carta-escena.is-open .pv-carta-letter {
    transform: translateY(-95px);
  }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .pv-carta-tapa,
  .pv-carta-letter,
  .pv-carta-sello { transition: none; }
  .pv-carta-escena.is-open .pv-carta-letter {
    transform: translateY(-110px);
  }
}


/* ─────────────────────────────────────────────────────────
   FASE 1J-B.5R3 — VISUAL REPLACEMENT KC STYLE REAL
   Superficies tema · Sobre proporciones · Countdown vivo
   Foto-cards editoriales · Botón de tema
───────────────────────────────────────────────────────── */

/* ══ 1. PROPORCIONES DEL SOBRE CORREGIDAS ══ */
.pv-carta-escena { width: 320px !important; height: 220px !important; }
.pv-carta-letter {
  left: 14px !important; right: 14px !important; bottom: 10px !important;
  height: 200px !important;
  background: var(--pv-theme-paper, #FDFBF7) !important;
}
.pv-carta-escena.is-open .pv-carta-letter { transform: translateY(-130px) !important; }
.pv-carta-tapa { clip-path: polygon(0 0, 100% 0, 50% 58%) !important; }
.pv-carta-base {
  background: linear-gradient(150deg,
    rgba(var(--pv-sobre-rgb, 197,168,128), 0.95) 0%,
    rgba(var(--pv-sobre-rgb, 197,168,128), 0.60) 100%) !important;
}
.pv-carta-frente {
  background: linear-gradient(155deg,
    rgba(var(--pv-sobre-rgb, 197,168,128), 1.0) 0%,
    rgba(var(--pv-sobre-rgb, 197,168,128), 0.75) 100%) !important;
  clip-path: polygon(0 28%, 50% 80%, 100% 28%, 100% 100%, 0 100%) !important;
}
.pv-carta-letter__names { color: var(--pv-theme-ink, #2A1F0F) !important; }
.pv-carta-letter__eyebrow, .pv-carta-letter__type, .pv-carta-letter__date {
  color: var(--pv-theme-ink, #2A1F0F) !important; opacity: 0.6;
}
.pv-carta-letter__div span { color: var(--pv-accent) !important; }
.pv-carta-sello {
  background: radial-gradient(circle at 35% 35%, var(--pv-sello-light, #8B6914), var(--pv-sello-dark, #4A3500)) !important;
  border-color: rgba(var(--pv-sobre-rgb, 197,168,128), 0.6) !important;
}
.pv-carta-sello__text { color: rgba(var(--pv-sobre-rgb, 197,168,128), 0.95) !important; }
@media (max-width: 380px) {
  .pv-carta-escena { width: 280px !important; height: 190px !important; }
  .pv-carta-letter { height: 170px !important; }
  .pv-carta-escena.is-open .pv-carta-letter { transform: translateY(-110px) !important; }
}

/* ══ 2. INV-BODY CONTAINER ══ */
.pv-inv-body { background: var(--pv-theme-bg, transparent); border-radius: 12px; overflow: hidden; margin-top: 28px !important; }

/* ══ 3. HERO TEMÁTICO ══ */
.pv-inv-hero {
  background: linear-gradient(175deg, var(--pv-theme-bg, #0B0C10) 0%, var(--pv-theme-paper2, #0B0C10) 100%);
  padding: 40px 24px 32px; text-align: center; position: relative;
}
.pv-inv-hero::after {
  content: ''; position: absolute; bottom: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pv-accent), transparent); opacity: 0.35;
}
.pv-inv-hero__glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% -20%, var(--pv-accent-soft), transparent 65%);
  pointer-events: none;
}
.pv-inv-hero__pre { font-size:0.55rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--pv-accent); margin-bottom:12px; }
.pv-inv-hero__names { font-family:var(--font-title); font-size:clamp(2rem,9vw,2.8rem); font-style:italic; line-height:1.05; color:var(--pv-theme-ink,#F5E6C8); }
.pv-inv-hero__divisor { display:flex; align-items:center; justify-content:center; gap:12px; margin:12px 0; }
.pv-inv-hero__divisor::before, .pv-inv-hero__divisor::after { content:''; height:1px; flex:1; max-width:50px; background:linear-gradient(90deg,transparent,var(--pv-accent)); opacity:0.4; }
.pv-inv-hero__divisor::after { background:linear-gradient(270deg,transparent,var(--pv-accent)); }
.pv-inv-hero__divisor span { color:var(--pv-accent); font-size:0.8rem; }
.pv-inv-hero__tagline { font-size:0.72rem; font-style:italic; color:var(--pv-theme-ink,#F5E6C8); opacity:0.55; margin:4px 0; }
.pv-inv-hero__date { font-size:0.68rem; color:var(--pv-accent); margin-top:8px; }

/* ══ 4. COUNTDOWN GRID 4 UNIDADES ══ */
.pv-countdown.pv-countdown--inv {
  background: var(--pv-theme-paper2, rgba(255,255,255,0.02));
  border-top:1px solid var(--pv-theme-border,rgba(255,255,255,0.06));
  border-bottom:1px solid var(--pv-theme-border,rgba(255,255,255,0.06));
  padding:28px 16px 22px; text-align:center;
}
.pv-countdown__title { font-size:0.58rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--pv-accent); margin-bottom:18px; }
.pv-cd-grid { display:flex; justify-content:center; gap:10px; }
.pv-cd-unit {
  display:flex; flex-direction:column; align-items:center; min-width:60px;
  background:var(--pv-theme-paper,rgba(255,255,255,0.04));
  border:1px solid var(--pv-theme-border,rgba(255,255,255,0.09));
  border-radius:8px; padding:13px 8px 9px;
}
.pv-cd-unit__num { font-family:var(--font-title); font-size:1.9rem; font-style:italic; line-height:1; color:var(--pv-theme-ink,#F5E6C8); min-height:38px; display:flex; align-items:center; justify-content:center; letter-spacing:-0.02em; }
.pv-cd-unit__lbl { font-size:0.47rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--pv-theme-ink,#F5E6C8); opacity:0.38; margin-top:4px; }
.pv-countdown__sub { font-size:0.65rem; font-style:italic; color:var(--pv-theme-ink,#F5E6C8); opacity:0.4; margin-top:16px; }
@media (max-width:380px) {
  .pv-cd-unit { min-width:48px; padding:10px 5px 7px; }
  .pv-cd-unit__num { font-size:1.5rem; }
  .pv-cd-grid { gap:6px; }
}

/* ══ 5. FOTO-CARDS EDITORIALES ══ */
.pv-inv-moments { padding:28px 16px 20px; background:var(--pv-theme-bg,transparent); }
.pv-inv-moments__title { font-size:0.55rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--pv-accent); text-align:center; margin-bottom:16px; }
.pv-moodcards { display:flex; gap:10px; justify-content:center; }
.pv-photocard {
  flex:1; max-width:112px; display:flex; flex-direction:column;
  border-radius:8px; overflow:hidden;
  border:1px solid var(--pv-theme-border,rgba(255,255,255,0.1));
  background:var(--pv-theme-paper,#1a1a1a);
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
  transition: transform 0.25s ease;
}
.pv-photocard:hover { transform:translateY(-4px); }
.pv-photocard__art { position:relative; width:100%; padding-top:125%; overflow:hidden; flex-shrink:0; }
.pv-photocard__layer-a {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 35% 25%, rgba(var(--pv-sobre-rgb,197,168,128),0.55) 0%, transparent 58%),
    radial-gradient(ellipse at 70% 75%, rgba(var(--pv-sobre-rgb,197,168,128),0.28) 0%, transparent 52%),
    linear-gradient(155deg, var(--pv-theme-paper2,#1E1E1E) 0%, var(--pv-theme-bg,#111) 100%);
}
.pv-photocard__layer-b { position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,0.45) 100%); }
.pv-photocard__ornament {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-58%);
  font-size:1.4rem; color:var(--pv-accent); opacity:0.55;
  text-shadow:0 0 18px var(--pv-accent-glow); pointer-events:none;
}
.pv-photocard__caption { padding:10px 8px; background:var(--pv-theme-paper,#1A1A1A); text-align:center; }
.pv-photocard__label { font-size:0.54rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--pv-theme-ink,#F5E6C8); opacity:0.65; font-style:italic; }
.pv-photocard--1 .pv-photocard__layer-a {
  background:
    radial-gradient(ellipse at 20% 15%, rgba(var(--pv-sobre-rgb,197,168,128),0.62) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(var(--pv-sobre-rgb,197,168,128),0.22) 0%, transparent 50%),
    linear-gradient(135deg, var(--pv-theme-paper,#1E1E1E) 0%, var(--pv-theme-bg,#111) 100%);
}
.pv-photocard--2 .pv-photocard__layer-a {
  background:
    radial-gradient(ellipse at 75% 20%, rgba(var(--pv-sobre-rgb,197,168,128),0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 25% 80%, rgba(var(--pv-sobre-rgb,197,168,128),0.30) 0%, transparent 50%),
    linear-gradient(175deg, var(--pv-theme-paper2,#1E1E1E) 0%, var(--pv-theme-bg,#111) 100%);
}
.pv-photocard--3 .pv-photocard__layer-a {
  background:
    radial-gradient(ellipse at 50% 10%, rgba(var(--pv-sobre-rgb,197,168,128),0.48) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(var(--pv-sobre-rgb,197,168,128),0.35) 0%, transparent 50%),
    linear-gradient(160deg, var(--pv-theme-bg,#111) 0%, var(--pv-theme-paper,#1E1E1E) 100%);
}
@media (max-width:380px) { .pv-moodcards { gap:7px; } .pv-photocard { max-width:88px; } }

/* ══ 6. DETALLES CHIPS ══ */
.pv-inv-details { padding:12px 16px 20px; background:var(--pv-theme-paper2,rgba(255,255,255,0.02)); border-top:1px solid var(--pv-theme-border,rgba(255,255,255,0.06)); }
.pv-inv-details__divisor { text-align:center; margin-bottom:14px; color:var(--pv-accent); font-size:0.72rem; opacity:0.45; }
.pv-details-chips { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pv-details-chip { display:flex; align-items:center; gap:8px; background:var(--pv-theme-paper,rgba(255,255,255,0.03)); border:1px solid var(--pv-theme-border,rgba(255,255,255,0.08)); border-radius:8px; padding:10px 12px; }
.pv-details-chip__val { font-size:0.62rem; color:var(--pv-theme-ink,#F5E6C8); }

/* ══ 7. BOTÓN TEMÁTICO ══ */
.btn-pv--theme { background:var(--pv-accent) !important; color:#0B0C10 !important; border:none !important; box-shadow:0 6px 24px var(--pv-accent-glow) !important; }
.btn-pv--theme:hover  { transform:translateY(-2px) !important; box-shadow:0 10px 32px var(--pv-accent-glow) !important; }
.btn-pv--theme:active { transform:scale(0.97) !important; }

/* ══ 8. RSVP CTA ══ */
.pv-inv-rsvp-cta { padding:20px 16px 8px; text-align:center; background:var(--pv-theme-bg,transparent); border-top:1px solid var(--pv-theme-border,rgba(255,255,255,0.06)); }
.pv-inv-rsvp-cta__copy { font-size:0.72rem; font-style:italic; color:var(--pv-theme-ink,#F5E6C8); opacity:0.48; margin-bottom:16px; line-height:1.6; }

/* ─────────────────────────────────────────────────────────
   FASE 1J-B.5R4 — FLOW SEAM + RSVP POLISH + PREMIUM WA
───────────────────────────────────────────────────────── */

/* ══ 1. SOBRE / CARTA — fix z-index y apertura limpia ══ */
.pv-carta-escena { perspective: 1200px; }

/* El frente (V-shape) va DETRÁS de la carta */
.pv-carta-frente {
  z-index: 1;
}
/* La tapa se cierra encima del sobre (z:3), al abrir cae atrás (z:0) */
.pv-carta-tapa {
  position: absolute;
  top: 0; left: 0; right: 0;
  transform-origin: top center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 3;
}
/* La carta interna: arranca z:2, al abrir sube z:4 */
.pv-carta-letter {
  z-index: 2;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}
.pv-carta-escena.is-open .pv-carta-tapa {
  transform: rotateX(-160deg);
  z-index: 0;
}
.pv-carta-escena.is-open .pv-carta-letter {
  z-index: 4;
}

/* ══ 2. RSVP DECORPORATIZADO — atmósfera de invitación ══ */

/* Header del RSVP — eyebrow + título editorializado */
.pv-rsvp-header {
  text-align: center;
  padding: 32px 20px 8px;
}
.pv-rsvp-star {
  font-size: 1.6rem;
  display: block;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 12px var(--pv-accent-glow));
}
.pv-rsvp-label {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--pv-theme-ink, #F5E6C8);
  line-height: 1.15;
  margin-bottom: 6px;
  transition: color 0.4s ease;
}
.pv-rsvp-hint {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--pv-theme-ink, #F5E6C8);
  opacity: 0.5;
  line-height: 1.5;
  transition: color 0.4s ease;
}

/* Card del RSVP — papel temático */
.pv-rsvp-card {
  background: var(--pv-theme-paper, rgba(255,255,255,0.04)) !important;
  border: 1px solid var(--pv-theme-border, rgba(255,255,255,0.08)) !important;
  border-radius: 12px !important;
  margin: 16px 0 !important;
  overflow: hidden;
  transition: background 0.4s ease, border-color 0.4s ease;
}
.pv-rsvp-card__header {
  padding: 20px 20px 0;
  text-align: center;
  border-bottom: 1px solid var(--pv-theme-border, rgba(255,255,255,0.06));
  padding-bottom: 16px;
  margin-bottom: 4px;
}
.pv-rsvp-card__eyebrow {
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pv-accent);
  margin-bottom: 4px;
}
.pv-rsvp-card__event {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--pv-theme-ink, #F5E6C8);
  transition: color 0.4s ease;
}
.pv-rsvp-card__note {
  font-size: 0.68rem;
  font-style: italic;
  color: var(--pv-theme-ink, #F5E6C8);
  opacity: 0.45;
  margin-top: 4px;
  line-height: 1.5;
}

/* Body del RSVP */
.glass-card__body {
  padding: 20px !important;
}

/* Stepper elegante */
.pv-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.pv-stepper__btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--pv-theme-border, rgba(255,255,255,0.15));
  background: var(--pv-theme-paper, rgba(255,255,255,0.04));
  color: var(--pv-theme-ink, #F5E6C8);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  display: flex; align-items: center; justify-content: center;
}
.pv-stepper__btn:hover { background: var(--pv-accent-soft); border-color: var(--pv-accent); }
.pv-stepper__btn:active { transform: scale(0.9); }
.pv-stepper__count {
  font-family: var(--font-title);
  font-size: 1rem;
  font-style: italic;
  color: var(--pv-theme-ink, #F5E6C8);
  min-width: 70px;
  text-align: center;
  transition: color 0.4s ease;
}

/* Helper text en inputs */
.pv-form__helper {
  font-size: 0.62rem;
  font-style: italic;
  color: var(--pv-theme-ink, #999);
  opacity: 0.5;
  margin-top: 4px;
  transition: color 0.4s ease;
}

/* Botón confirmar RSVP — temático, no SaaS */
#btnConfirmarRsvp {
  background: var(--pv-accent) !important;
  color: #0B0C10 !important;
  border: none !important;
  box-shadow: 0 6px 24px var(--pv-accent-glow) !important;
  font-family: var(--font-title);
  font-style: italic;
  letter-spacing: 0.04em;
  transition: background 0.4s ease, transform 0.15s ease, box-shadow 0.4s ease !important;
}
#btnConfirmarRsvp:hover  { transform: translateY(-2px) !important; }
#btnConfirmarRsvp:active { transform: scale(0.97) !important; }

/* Ocultar access-info y access-badge (demasiado técnico) */
.pv-rsvp-access-badge,
.pv-rsvp-access-info { display: none !important; }

/* ══ 3. TICKET → CONFIRMACIONES: botón dorado ══ */
.pv-ticket__continue {
  padding: 20px 0 8px;
  text-align: center;
}
.pv-ticket__continue-hint {
  font-size: 0.7rem;
  font-style: italic;
  color: rgba(255,255,255,0.4);
  line-height: 1.5;
}

/* ══ 4. BOTÓN PREMIUM WHATSAPP (no verde radioactivo) ══ */
.btn-pv--premium-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  background: linear-gradient(135deg,
    var(--pv-accent) 0%,
    rgba(var(--pv-sobre-rgb, 197,168,128), 0.85) 100%
  );
  color: #0B0C10 !important;
  border: none;
  border-radius: 50px;
  font-family: var(--font-title);
  font-size: 1rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  max-width: 340px;
  box-shadow:
    0 8px 32px var(--pv-accent-glow),
    0 2px 8px rgba(0,0,0,0.3),
    0 0 0 1px rgba(255,255,255,0.06) inset;
  transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.4s ease;
}
.btn-pv--premium-wa:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 40px var(--pv-accent-glow),
    0 4px 12px rgba(0,0,0,0.4);
}
.btn-pv--premium-wa:active { transform: scale(0.97); }

/* ══ 5. RSVP SECCIÓN — fondo integrado con tema ══ */
.rsvp-simulation-section {
  background: var(--pv-theme-bg, transparent) !important;
  border-top: 1px solid var(--pv-theme-border, rgba(255,255,255,0.06));
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pv-carta-tapa,
  .pv-carta-letter,
  #btnConfirmarRsvp,
  .btn-pv--premium-wa { transition: none !important; }
}

/* ─────────────────────────────────────────────────────────
   FASE 1J-B.5R5 — KC-RSVP ⭐ INLINE (swap 3 estados)
   Referencia: Boda-Voge-Black-or-white pattern
───────────────────────────────────────────────────────── */

/* ══ Contenedor raíz del swap ══ */
.pv-inline-rsvp {
  margin-top: 32px;
  border-top: 1px solid var(--pv-theme-border, rgba(255,255,255,0.07));
  padding-top: 28px;
  transition: border-color 0.4s ease;
}

/* ══ ESTADO A — CTA intro ══ */
.pv-ir-cta {
  text-align: center;
  padding: 4px 0 8px;
}
.pv-ir-cta__eyebrow {
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pv-accent);
  margin-bottom: 10px;
  display: block;
}
.pv-ir-cta__copy {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--pv-theme-ink, rgba(255,255,255,0.55));
  line-height: 1.55;
  margin-bottom: 18px;
  transition: color 0.4s ease;
}

/* ══ ESTADO B — Formulario KC-RSVP inline ══ */
.pv-ir-form {
  animation: pvIrReveal 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes pvIrReveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.pv-ir-form__header {
  text-align: center;
  padding: 0 0 20px;
}
.pv-ir-form__star {
  font-size: 1.4rem;
  display: block;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 10px var(--pv-accent-glow));
}
.pv-ir-form__title {
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--pv-theme-ink, #F5E6C8);
  line-height: 1.15;
  transition: color 0.4s ease;
}
.pv-ir-form__sub {
  font-size: 0.7rem;
  font-style: italic;
  color: var(--pv-theme-ink, rgba(255,255,255,0.45));
  margin-top: 4px;
  line-height: 1.5;
  transition: color 0.4s ease;
}

.pv-ir-form__card {
  background: var(--pv-theme-paper, rgba(255,255,255,0.03));
  border: 1px solid var(--pv-theme-border, rgba(255,255,255,0.08));
  border-radius: 14px;
  padding: 20px;
  transition: background 0.4s ease, border-color 0.4s ease;
}
.pv-ir-form__eyebrow {
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pv-accent);
  margin-bottom: 16px;
  display: block;
  text-align: center;
}
.pv-form__group--mt { margin-top: 16px; }

/* ══ ESTADO C — Pase/ticket inline (Boda-Voge pattern) ══ */
.pv-ir-ticket {
  animation: pvIrReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  background: var(--pv-theme-paper, rgba(255,255,255,0.03));
  border: 1px solid var(--pv-theme-border, rgba(255,255,255,0.1));
  border-radius: 14px;
  overflow: hidden;
  transition: background 0.4s ease, border-color 0.4s ease;
}

/* Shimmer top strip (Boda-Voge inspired) */
.pv-ir-ticket::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--pv-accent) 30%,
    rgba(var(--pv-sobre-rgb, 197,168,128), 0.6) 60%,
    var(--pv-accent) 80%,
    transparent 100%
  );
  transition: background 0.4s ease;
}

.pv-ir-ticket__header {
  padding: 16px 20px 0;
  text-align: center;
}
.pv-ir-ticket__tag {
  font-size: 0.5rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--pv-accent);
  margin-bottom: 4px;
}
.pv-ir-ticket__event {
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--pv-theme-ink, #F5E6C8);
  line-height: 1.2;
  transition: color 0.4s ease;
}

/* Línea de perforación (ticket cinema) */
.pv-ir-ticket__body {
  padding: 14px 20px 0;
  border-top: 1px dashed var(--pv-theme-border, rgba(255,255,255,0.12));
  margin: 12px 0 0;
  position: relative;
}
.pv-ir-ticket__body::before,
.pv-ir-ticket__body::after {
  content: '';
  position: absolute;
  top: -6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--pv-bg, #0B0C10);
}
.pv-ir-ticket__body::before { left: -5px; }
.pv-ir-ticket__body::after  { right: -5px; }

.pv-ir-ticket__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--pv-theme-border, rgba(255,255,255,0.05));
}
.pv-ir-ticket__row:last-child { border-bottom: none; }
.pv-ir-ticket__key {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pv-theme-ink, rgba(255,255,255,0.4));
  transition: color 0.4s ease;
}
.pv-ir-ticket__val {
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--pv-theme-ink, rgba(255,255,255,0.85));
  transition: color 0.4s ease;
}
.pv-ir-ticket__val--ok {
  color: var(--pv-accent) !important;
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

/* QR centrado con halo */
.pv-ir-ticket__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 0 8px;
  position: relative;
}
.pv-ir-ticket__qr svg {
  filter: drop-shadow(0 0 10px var(--pv-accent-glow));
}
.pv-ir-ticket__qr-label {
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pv-theme-ink, rgba(255,255,255,0.3));
  transition: color 0.4s ease;
}
.pv-ir-ticket__token {
  font-family: monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--pv-accent);
  opacity: 0.7;
}

/* Watermark */
.pv-ir-ticket__watermark {
  text-align: center;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pv-theme-ink, rgba(255,255,255,0.2));
  padding: 0 20px 8px;
  transition: color 0.4s ease;
}

/* CTA post-ticket */
.pv-ir-ticket__cta {
  padding: 12px 20px 20px;
  text-align: center;
  border-top: 1px dashed var(--pv-theme-border, rgba(255,255,255,0.08));
  margin-top: 4px;
}
.pv-ir-ticket__cta-hint {
  font-size: 0.68rem;
  font-style: italic;
  color: var(--pv-theme-ink, rgba(255,255,255,0.4));
  margin-bottom: 12px;
  line-height: 1.5;
  transition: color 0.4s ease;
}

/* ══ btn-pv--theme: hereda color del tema ══ */
.btn-pv--theme {
  background: var(--pv-accent) !important;
  color: #0B0C10 !important;
  border: none !important;
  box-shadow: 0 6px 24px var(--pv-accent-glow) !important;
  font-family: var(--font-title);
  font-style: italic;
  letter-spacing: 0.04em;
  transition: background 0.4s ease, transform 0.15s ease, box-shadow 0.4s ease !important;
}
.btn-pv--theme:hover  { transform: translateY(-2px) !important; }
.btn-pv--theme:active { transform: scale(0.97) !important; }

/* Mobile tight */
@media (max-width: 380px) {
  .pv-ir-ticket__row { flex-direction: column; gap: 1px; }
  .pv-ir-ticket__val { font-size: 0.78rem; }
  .pv-ir-form__card  { padding: 14px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pv-ir-form,
  .pv-ir-ticket { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────
   FASE 1J-B.5R6 — Always-On RSVP + Typography + Contrast
   Auditoría: Ramen Sauce (display) · LaMonarchie (script)
   · Courier New (body/mono) · Cinzel (fallback serif)
   Fuentes locales: ../assets/fonts/ (path estable desde crear-preview/)
───────────────────────────────────────────────────────── */

/* ══ 0. TIPOGRAFÍA KC — @font-face locales ══ */
@font-face {
  font-family: 'KC-Display';
  src: url('../assets/fonts/Ramen Sauce.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'KC-Script';
  src: url('../assets/fonts/LaMonarchie.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ══ 1. TOKENS TIPOGRÁFICOS PREVIEW DAVINCI ══ */
:root {
  --pv-font-display: 'KC-Display', 'Cinzel', serif;
  --pv-font-script:  'KC-Script', 'Cinzel', cursive;
  --pv-font-body:    'Courier New', 'Courier', monospace;
  --pv-font-ui:      system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Aplicar al documento base del preview */
.pv-section,
.pv-inv-body {
  font-family: var(--pv-font-ui);
}

/* ══ 2. NOMBRES / TÍTULOS — tipografía KC premium ══ */

/* Nombres protagonistas de la carta */
.pv-carta-letter__names {
  font-family: var(--pv-font-script) !important;
  font-size: clamp(1.1rem, 4.5vw, 1.7rem) !important;
  letter-spacing: 0.02em;
  font-style: normal;
}

/* Nombres en el hero de la invitación */
.pv-inv-hero__names {
  font-family: var(--pv-font-script) !important;
  font-size: clamp(1.5rem, 7vw, 2.6rem) !important;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

/* Títulos de sección */
.pv-section-title {
  font-family: var(--pv-font-script);
  font-style: normal;
}

/* ══ 3. TICKETS y DATOS — Courier New para microdetalles ══ */
.pv-ir-ticket__key,
.pv-ir-ticket__token,
.pv-ticket__key,
.pv-ticket__token,
.pv-ticket__tag,
.pv-ir-ticket__tag {
  font-family: var(--pv-font-body) !important;
}

/* Valores del ticket: UI sans para legibilidad */
.pv-ir-ticket__val,
.pv-ticket__val {
  font-family: var(--pv-font-ui);
  font-size: 0.88rem;
}

/* ══ 4. TOKENS DE CONTRASTE RSVP ══ */
:root {
  /* Fondo del formulario — papel ligeramente opaco */
  --pv-form-bg:          rgba(255, 255, 255, 0.06);
  --pv-form-bg-solid:    #1a1a1e;
  /* Texto principal — siempre visible */
  --pv-form-ink:         rgba(255, 255, 255, 0.92);
  /* Texto secundario muted */
  --pv-form-muted:       rgba(255, 255, 255, 0.55);
  /* Borde de inputs */
  --pv-form-border:      rgba(255, 255, 255, 0.2);
  /* Placeholder — más tenue pero visible */
  --pv-form-placeholder: rgba(255, 255, 255, 0.38);
  /* Focus ring */
  --pv-form-focus:       var(--pv-accent, #D4AF37);
}

/* Sobreescrituras por tema claro (Rosa Palo, Verde Salvia, Champagne) */
[style*="--pv-theme-paper: rgba(216"],  /* Rosa Palo */
[style*="--pv-theme-paper: rgba(175"],  /* Verde Salvia */
[style*="--pv-theme-paper: rgba(245"] { /* Champagne */
  --pv-form-ink:         rgba(30, 20, 15, 0.9);
  --pv-form-muted:       rgba(30, 20, 15, 0.55);
  --pv-form-border:      rgba(30, 20, 15, 0.18);
  --pv-form-placeholder: rgba(30, 20, 15, 0.32);
  --pv-form-bg:          rgba(255, 255, 255, 0.55);
}

/* ══ 5. CONTRASTE RSVP INLINE — inputs, labels, stepper ══ */

/* Formulario inline card */
.pv-ir-form__card {
  background: var(--pv-form-bg) !important;
  border: 1px solid var(--pv-form-border) !important;
}

/* Eyebrow del evento */
.pv-ir-form__event-eyebrow {
  font-family: var(--pv-font-body);
  font-size: 0.54rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pv-accent);
  margin-bottom: 16px;
  display: block;
  text-align: center;
  opacity: 0.9;
}

/* Eyebrow-tag: KC-RSVP ⭐ */
.pv-ir-form__eyebrow-tag {
  display: block;
  font-family: var(--pv-font-body);
  font-size: 0.56rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--pv-accent);
  margin-bottom: 8px;
  text-align: center;
}

/* Labels del RSVP */
.pv-ir-form .pv-form__label,
.pv-ir-form__card .pv-form__label {
  color: var(--pv-form-ink) !important;
  font-family: var(--pv-font-ui) !important;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 1 !important;
}

/* Input del RSVP — clase especial pv-input--rsvp */
.pv-input--rsvp {
  background: var(--pv-form-bg, rgba(255,255,255,0.07)) !important;
  color: var(--pv-form-ink, rgba(255,255,255,0.92)) !important;
  border: 1.5px solid var(--pv-form-border, rgba(255,255,255,0.2)) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  font-size: 0.95rem !important;
  font-family: var(--pv-font-ui) !important;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.3s ease, color 0.3s ease !important;
  -webkit-appearance: none;
}
.pv-input--rsvp::placeholder {
  color: var(--pv-form-placeholder, rgba(255,255,255,0.38)) !important;
  font-style: italic;
}
.pv-input--rsvp:focus {
  outline: none !important;
  border-color: var(--pv-form-focus, var(--pv-accent)) !important;
  background: rgba(255,255,255,0.1) !important;
  box-shadow: 0 0 0 3px rgba(var(--pv-sobre-rgb, 197,168,128), 0.15) !important;
}

/* Helper del RSVP inline */
.pv-ir-form .pv-form__helper {
  color: var(--pv-form-muted, rgba(255,255,255,0.5)) !important;
  opacity: 1 !important;
  font-family: var(--pv-font-ui);
  font-size: 0.63rem;
  font-style: italic;
  margin-top: 5px;
}

/* Stepper del RSVP — botones con contraste */
.pv-ir-form .pv-stepper__btn {
  border: 1.5px solid var(--pv-form-border, rgba(255,255,255,0.2)) !important;
  color: var(--pv-form-ink, rgba(255,255,255,0.9)) !important;
  background: var(--pv-form-bg, rgba(255,255,255,0.06)) !important;
}
.pv-ir-form .pv-stepper__count {
  color: var(--pv-form-ink, rgba(255,255,255,0.92)) !important;
  font-family: var(--pv-font-ui);
  font-size: 0.9rem;
  font-style: normal;
}
.pv-ir-form .pv-stepper__btn:hover {
  background: rgba(var(--pv-sobre-rgb, 197,168,128), 0.18) !important;
  border-color: var(--pv-accent) !important;
}

/* Títulos y subtítulos del formulario */
.pv-ir-form__title {
  font-family: var(--pv-font-script) !important;
  font-size: 1.25rem !important;
  color: var(--pv-theme-ink, rgba(255,255,255,0.9)) !important;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.pv-ir-form__sub {
  color: var(--pv-form-muted, rgba(255,255,255,0.55)) !important;
  opacity: 1 !important;
  font-size: 0.72rem;
  font-family: var(--pv-font-ui);
  font-style: italic;
  line-height: 1.5;
}

/* ══ 6. CENTRADO DE CARTA / SOBRE ══ */

/* Scena: centrado vertical y horizontal como protagonista */
.pv-section.event-preview-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px !important;
  min-height: 60vh;
}

.pv-carta-eyebrow {
  text-align: center;
}
.pv-carta-sub {
  text-align: center;
}

.pv-carta-escena {
  display: block;
  margin: 24px auto !important;
  position: relative;
}

/* La acción (botón abrir carta) también centrada */
.pv-carta-action {
  text-align: center;
  margin: 16px auto 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Mobile: reducir top padding para no perder la carta */
@media (max-width: 430px) {
  .pv-section.event-preview-section {
    padding-top: 24px !important;
    min-height: auto;
  }
  .pv-carta-escena {
    margin: 16px auto !important;
  }
}
@media (max-width: 380px) {
  .pv-section.event-preview-section {
    padding-top: 16px !important;
  }
}

/* ══ 7. INLINE RSVP — divisor elegante con título visible ══ */
.pv-inline-rsvp {
  border-top: none !important; /* se reemplaza con divisor con título */
  margin-top: 28px !important;
  padding-top: 0 !important;
}

/* Divisor decorativo antes del RSVP */
.pv-inline-rsvp::before {
  content: '✦ KC-RSVP ✦';
  display: block;
  text-align: center;
  font-family: var(--pv-font-body);
  font-size: 0.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pv-accent);
  margin-bottom: 20px;
  opacity: 0.8;
}

/* ══ 8. RESPONSIVE CONTRAST — temas claros ══ */

/* Cuando el tema es Champagne/Rosa Palo/Verde Salvia,
   la card del RSVP usa tinta oscura */
.pv-theme--light .pv-ir-form__card,
.pv-theme--light .pv-ir-form .pv-form__label,
.pv-theme--light .pv-ir-form .pv-stepper__count,
.pv-theme--light .pv-ir-form .pv-stepper__btn {
  color: rgba(20, 12, 8, 0.88) !important;
}
.pv-theme--light .pv-input--rsvp {
  color: rgba(20, 12, 8, 0.9) !important;
  background: rgba(255,255,255,0.7) !important;
  border-color: rgba(20,12,8,0.2) !important;
}
.pv-theme--light .pv-input--rsvp::placeholder {
  color: rgba(20,12,8,0.35) !important;
}

/* ══ 9. REDUCED MOTION ══ */
@media (prefers-reduced-motion: reduce) {
  .pv-ir-form__card,
  .pv-input--rsvp { transition: none !important; }
}

/* ─────────────────────────────────────────────────────────
   FASE 1J-B.6 — Conversion Copy Pass Styles
───────────────────────────────────────────────────────── */

/* Hero subcopy por categoría — apoya al tagline */
.pv-inv-hero__subcopy {
  font-family: var(--pv-font-ui, system-ui, sans-serif);
  font-size: 0.72rem;
  font-style: italic;
  color: var(--pv-theme-ink, rgba(255,255,255,0.5));
  line-height: 1.55;
  margin-top: 6px;
  margin-bottom: 2px;
  text-align: center;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  transition: color 0.4s ease;
}

/* Muted variant para párrafo de soporte en Essential */
.pv-body-text--muted {
  font-size: 0.72rem;
  color: var(--pv-theme-muted, rgba(255,255,255,0.5));
  font-style: italic;
  line-height: 1.55;
  transition: color 0.4s ease;
}

/* ─────────────────────────────────────────────────────────
   FASE 1J-B.7 — Safari/WebKit Prefixes + Mobile Microfixes
───────────────────────────────────────────────────────── */

/* ══ 1. SAFARI/WEBKIT — carta 3D prefixes ══ */

/* perspective en el contenedor */
.pv-carta-escena {
  -webkit-perspective: 1200px;
          perspective: 1200px;
  transform: translateZ(0); /* fuerza GPU layer en Safari */
}

/* tapa: prefijos WebKit para 3D flip */
.pv-carta-tapa {
  -webkit-transform-style:    preserve-3d;
          transform-style:    preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-origin:   top center;
          transform-origin:   top center;
}

/* carta interna: backface oculto en Safari para evitar parpadeo */
.pv-carta-letter {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  /* Previene sub-pixel rendering blur en Safari */
  -webkit-transform: translateZ(0);
}

/* tapa abierta — rotación prefijada */
.pv-carta-escena.is-open .pv-carta-tapa {
  -webkit-transform: rotateX(-160deg);
          transform: rotateX(-160deg);
  z-index: 0;
}

/* carta elevada al abrir */
.pv-carta-escena.is-open .pv-carta-letter {
  -webkit-transform: translateY(-110px);
          transform: translateY(-110px);
  z-index: 4;
}

/* hover (no Safari iOS — solo desktop) */
@media (hover: hover) {
  .pv-carta-escena:not(.is-open):hover .pv-carta-letter {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
}

/* Fallback: si el device no soporta 3D transforms (WebKit antiguo),
   la tapa simplemente se oculta sin rotación */
@supports not (transform-style: preserve-3d) {
  .pv-carta-escena.is-open .pv-carta-tapa {
    opacity: 0;
    transform: none;
    pointer-events: none;
  }
}

/* ══ 2. REDUCED MOTION — tapa sin rotación 3D ══ */
@media (prefers-reduced-motion: reduce) {
  .pv-carta-tapa,
  .pv-carta-letter,
  .pv-carta-sello {
    transition: opacity 0.2s ease !important;
    -webkit-transition: opacity 0.2s ease !important;
  }
  .pv-carta-escena.is-open .pv-carta-tapa {
    opacity: 0;
    transform: none;
    -webkit-transform: none;
  }
  .pv-carta-escena.is-open .pv-carta-letter {
    transform: translateY(-80px) !important;
    -webkit-transform: translateY(-80px) !important;
  }
}

/* ══ 3. OVERFLOW/WORD-BREAK en nombres largos ══ */
.pv-inv-hero__names,
.pv-carta-letter__names,
.pv-cta-headline {
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ══ 4. MOBILE 360px — ajustes tight ══ */
@media (max-width: 370px) {
  /* Input RSVP más compacto */
  .pv-input--rsvp {
    padding: 12px 14px !important;
    font-size: 0.88rem !important;
  }

  /* Stepper más compacto */
  .pv-stepper__btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 1rem !important;
  }

  /* Ticket inline no se desborda */
  .pv-ir-ticket__body {
    padding: 12px 14px 0;
  }
  .pv-ir-ticket__row {
    padding: 4px 0;
  }

  /* Hero: nombres más pequeños */
  .pv-inv-hero__names {
    font-size: clamp(1.3rem, 7vw, 1.9rem) !important;
  }

  /* Moodcards más pequeñas */
  .pv-photocard {
    min-width: 110px;
    max-width: 120px;
  }

  /* Countdown compacto */
  .pv-cd-unit__num {
    font-size: 1.4rem !important;
  }
}

/* ══ 5. OVERFLOW-X — guard global en mobile ══ */
@media (max-width: 480px) {
  .pv-section,
  .pv-inv-body,
  .pv-inline-rsvp,
  .pv-ir-form,
  .pv-ir-ticket {
    max-width: 100%;
    overflow-x: hidden;
  }
  /* Botón WA: text wrap si es muy largo */
  .btn-pv--premium-wa {
    word-break: break-word;
    white-space: normal;
    min-height: 52px;
  }
}

/* ══ 6. CARTA centrada en mobile ══ */
@media (max-width: 430px) {
  /* Asegurar que el sobre no se vea pegado al techo */
  .pv-section.event-preview-section {
    padding-top: 28px !important;
    padding-bottom: 16px !important;
  }
  /* La escena no sobresale del shell */
  .pv-carta-escena {
    max-width: calc(100vw - 48px) !important;
  }
}
@media (max-width: 370px) {
  .pv-section.event-preview-section {
    padding-top: 16px !important;
  }
  .pv-carta-escena {
    max-width: calc(100vw - 32px) !important;
    width: 280px !important;
    height: 190px !important;
  }
}

/* ─────────────────────────────────────────────────────────
   FASE 1J-B.7 — Microfix: nombres en carta no se cortan
───────────────────────────────────────────────────────── */

/* Nombre dentro de la carta/sobre: no cortar, reducir font si necesario */
.pv-carta-letter__names {
  overflow: visible !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.1 !important;
  /* font-size responsivo: escala hacia abajo en nombres largos */
  font-size: clamp(0.85rem, 3.8vw, 1.3rem) !important;
}

/* En sobre más pequeño (360px) nombres más compactos */
@media (max-width: 370px) {
  .pv-carta-letter__names {
    font-size: clamp(0.75rem, 3.5vw, 1rem) !important;
  }
}

/* Asegurar que la carta interna tenga overflow visible */
.pv-carta-letter {
  overflow: visible !important;
}