/* ═══════════════════════════════════════════════════════════════
   PRIMMATE VIP ESTUDIO — main-v2.css
   Design tokens v2: paleta refinada, contraste WCAG AA, fondos claros
═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Fondos dark (refinados) ──────────────────────────────── */
  --bg-primary:    #0a0a0a;
  --bg-secondary:  #141414;
  --bg-tertiary:   #1c1c1c;
  --bg-card:       #161616;
  --bg-elevated:   #1f1f1f;
  --bg-overlay:    rgba(0, 0, 0, 0.72);

  /* ── NUEVO: Fondos claros para zonas "luminosas" ─────────── */
  --bg-light:        #f7f3ec;   /* crema cálida principal */
  --bg-light-alt:    #efe9dc;   /* crema más profunda (footer) */
  --bg-on-light:     #ffffff;   /* card blanca sobre crema */
  --text-on-light:   #2a2520;   /* texto principal sobre crema (AAA 13.2:1) */
  --muted-on-light:  #6b6258;   /* secundario sobre crema (AA 5.2:1) */
  --border-on-light: #d9cfbf;
  --shadow-on-light: 0 4px 16px rgba(42, 37, 32, 0.08);

  /* ── Naranja (idem + variante para fondo claro) ──────────── */
  --gold:          #d4763a;
  --gold-light:    #e8965c;
  --gold-dark:     #a85020;
  --gold-deep:     #8a3e10;   /* naranja oscuro para texto sobre claro (AA 4.9:1) */
  --gold-subtle:   rgba(212, 118, 58, 0.12);
  --gold-border:   rgba(212, 118, 58, 0.35);

  /* ── Textos sobre dark (SUBIDO contraste) ────────────────── */
  --text-primary:   #f5f5f5;   /* idem (12.6:1) */
  --text-secondary: #b8b8b8;   /* era #a0a0a0 → ahora 8.5:1 (AAA) */
  --text-muted:     #8a8a8a;   /* era #5c5c5c → ahora 4.74:1 (AA) */
  --text-faint:     #6b6b6b;   /* decorativo */

  /* ── Bordes ────────────────────────────────────────────────── */
  --border:         #2a2a2a;
  --border-light:   #3a3a3a;

  /* ── Estados ────────────────────────────────────────────── */
  --success:  #4caf50;
  --error:    #f44336;
  --warning:  #ff9800;
  --info:     #2196f3;

  /* ── Tipografía ─────────────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* ── Escala fluida (clamp mobile-first) ─────────────────── */
  --text-xs:   clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --text-sm:   clamp(0.85rem, 0.82rem + 0.15vw, 0.9rem);
  --text-base: clamp(0.95rem, 0.92rem + 0.2vw, 1rem);
  --text-lg:   clamp(1.05rem, 1rem + 0.3vw, 1.15rem);
  --text-xl:   clamp(1.15rem, 1.1rem + 0.4vw, 1.3rem);
  --text-2xl:  clamp(1.35rem, 1.25rem + 0.6vw, 1.55rem);
  --text-3xl:  clamp(1.6rem, 1.4rem + 1vw, 1.9rem);
  --text-4xl:  clamp(1.9rem, 1.6rem + 1.5vw, 2.4rem);
  --text-5xl:  clamp(2.3rem, 1.9rem + 2vw, 3rem);
  --text-6xl:  clamp(2.8rem, 2.2rem + 3vw, 4rem);

  /* ── Espaciado ──────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Radio ──────────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* ── Sombras ────────────────────────────────────────────── */
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-gold: 0 4px 24px rgba(212, 118, 58, 0.18);

  /* ── Touch & transiciones ───────────────────────────────── */
  --touch-min:       44px;
  --transition:      all 0.25s ease;
  --transition-slow: all 0.45s ease;
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* ── Utilidades ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section {
  padding: var(--space-24) 0;
}

.section--alt {
  background-color: var(--bg-secondary);
}

/* NUEVO: secciones claras */
.section--light {
  background-color: var(--bg-light);
  color: var(--text-on-light);
}

.section--light-alt {
  background-color: var(--bg-light-alt);
  color: var(--text-on-light);
}

/* Encabezados de sección */
.section-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.section-eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.section--light .section-eyebrow { color: var(--gold-deep); }

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.section--light .section-title { color: var(--text-on-light); }

.section-desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto;
}

.section--light .section-desc { color: var(--muted-on-light); }

/* ── Scroll reveal ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Flash messages ─────────────────────────────────────────── */
.flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-family: var(--font-heading);
}
.flash--error   { background: rgba(244,67,54,.15); color: #f44336; border-bottom: 1px solid rgba(244,67,54,.3); }
.flash--success { background: rgba(76,175,80,.15);  color: #4caf50; border-bottom: 1px solid rgba(76,175,80,.3); }
.flash--info    { background: rgba(33,150,243,.15); color: #64b5f6; border-bottom: 1px solid rgba(33,150,243,.3); }
.flash__close   { font-size: 1.2rem; opacity: 0.6; line-height: 1; }
.flash__close:hover { opacity: 1; }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }

/* ── Selección de texto ─────────────────────────────────────── */
::selection { background: var(--gold-subtle); color: var(--gold-light); }

/* ── Skeleton loader (utilidad reutilizable) ────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--bg-elevated) 50%, var(--bg-tertiary) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius);
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}