/* ============================================================
   IA NOMADS - DESIGN SYSTEM
   Extraído el 23 de mayo de 2026
   Fuente: landing HTML + referencias visuales (Nory, MasterClass, Platzi, BigSchool)
   ============================================================ */

/* ------------------------------------------------------------
   IMPORTAR FUENTES
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {

  /* ----------------------------------------------------------
     COLORES DE MARCA
     ---------------------------------------------------------- */

  /* Gold - color principal de acción */
  --color-brand-gold:          #ffd659;
  --color-brand-gold-dark:     #ecbd2c;   /* variante cobre, uso en hover y estados activos */
  --color-brand-gold-subtle:   #ffd65924; /* fondo de tags y badges */
  --color-brand-gold-glow:     rgba(255, 214, 89, 0.15);  /* focus rings */
  --color-brand-gold-halo:     rgba(255, 214, 89, 0.09);  /* halo exterior de elementos con brillo */
  --color-brand-gold-halo-lg:  rgba(255, 214, 89, 0.04);  /* halo lejano */

  /* Purple - acento secundario, uso muy puntual */
  --color-accent-purple:       #7f44f8;

  /* ----------------------------------------------------------
     FONDOS Y SUPERFICIES
     ---------------------------------------------------------- */

  --color-bg-base:        #05051a;  /* fondo raíz, el más profundo */
  --color-bg-deep:        #05070c;  /* variante casi negra para secciones de máximo contraste */
  --color-bg-surface:     #0d1024;  /* cards, contenedores, nav, formularios */
  --color-bg-elevated:    #080c16;  /* elementos elevados, WA header, modales */
  --color-bg-overlay:     rgba(5, 5, 26, 0.95); /* overlays sobre fotos */

  /* ----------------------------------------------------------
     SECCIONES - SISTEMA DE ALTERNANCIA (patrón Nory adaptado a dark mode)
     Las secciones alternan entre estas variantes para crear
     ritmo visual sin salir del modo oscuro.
     ---------------------------------------------------------- */

  --section-base:         #05051a;  /* sección estándar */
  --section-navy:         #0d1024;  /* sección con tinte azul marino */
  --section-deep:         #05070c;  /* sección de máximo contraste */
  --section-warm-dark:    #0a0c1c;  /* sección con tinte cálido muy sutil */
  --section-cta:          #ffd659;  /* sección de llamada a acción principal, texto oscuro */
  --section-photo-overlay: linear-gradient(135deg, #05051acc, #050a32b5 50%, #05051afa), linear-gradient(#00144073, #05051abf); /* overlay para secciones con foto (Alpamayo y similares) */

  /* ----------------------------------------------------------
     TIPOGRAFÍA - COLORES
     ---------------------------------------------------------- */

  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.75);
  --color-text-muted:     rgba(255, 255, 255, 0.55);
  --color-text-subtle:    rgba(255, 255, 255, 0.25);
  --color-text-inverse:   #0d1024;  /* texto sobre fondos dorados */
  --color-text-gold:      #ffd659;  /* énfasis de marca */

  /* ----------------------------------------------------------
     BORDES
     ---------------------------------------------------------- */

  --color-border:         rgba(255, 255, 255, 0.08);
  --color-border-medium:  rgba(255, 255, 255, 0.14);
  --color-border-gold:    rgba(255, 214, 89, 0.35);
  --color-border-gold-subtle: rgba(255, 214, 89, 0.2);

  /* ----------------------------------------------------------
     TIPOGRAFÍA - FAMILIAS
     ---------------------------------------------------------- */

  --font-display:  'Manrope', sans-serif;   /* headings, títulos de sección, display */
  --font-body:     'Plus Jakarta Sans', sans-serif; /* body, labels, UI text */

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold: 800;

  /* ----------------------------------------------------------
     TIPOGRAFÍA - ESCALA DE TAMAÑOS
     Valores reales del CSS de IA Nomads.
     La escala usa px fijos para valores base y clamp()
     para los tamaños de display y heading principales.
     ---------------------------------------------------------- */

  --text-display: clamp(42px, 4vw + 20px, 54px);  /* hero principal */
  --text-h1:      clamp(36px, 3vw + 20px, 42px);  /* títulos de sección grandes */
  --text-h2:      clamp(28px, 2.5vw + 16px, 38px); /* subtítulos principales */
  --text-h3:      clamp(24px, 2vw + 14px, 33px);  /* bloques de features */
  --text-h4:      clamp(20px, 1.5vw + 12px, 30px); /* títulos de card */
  --text-lg:      18px;   /* cuerpo principal, párrafos destacados */
  --text-base:    17px;   /* body estándar */
  --text-sm:      16px;   /* texto de soporte */
  --text-xs:      15px;   /* secondary text, labels */
  --text-tiny:    13px;   /* timestamps, meta, disclaimer */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.2;
  --leading-normal:  1.4;
  --leading-relaxed: 1.6;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.01em;
  --tracking-wider:   0.05em;  /* para tags y labels en uppercase */

  /* ----------------------------------------------------------
     ESPACIADO
     Escala basada en múltiplos de 8px.
     ---------------------------------------------------------- */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 96px;
  --space-11: 120px;
  --space-12: 160px;

  /* Espaciado semántico de secciones */
  --section-space-sm:   80px;
  --section-space-md:  100px;
  --section-space-lg:  120px;
  --section-space-xl:  160px;

  /* ----------------------------------------------------------
     RADIOS DE BORDE
     ---------------------------------------------------------- */

  --radius-none:    0;
  --radius-sm:      4px;
  --radius-md:      10px;   /* inputs, cards estándar */
  --radius-lg:      16px;   /* cards grandes, modales, WA preview */
  --radius-xl:      20px;   /* secciones con esquinas redondeadas */
  --radius-pill:    100px;  /* botones y badges */
  --radius-full:    50%;    /* avatares */
  --radius-bubble:  4px 12px 12px 12px; /* chat bubbles (WA mockup) */

  /* ----------------------------------------------------------
     SOMBRAS
     ---------------------------------------------------------- */

  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:     0 16px 40px rgba(0, 0, 0, 0.45);  /* WA preview card */
  --shadow-avatar: 0 2px 8px rgba(255, 214, 89, 0.35); /* avatares con glow gold */
  --shadow-focus:  0 0 0 3px rgba(255, 214, 89, 0.15); /* focus ring inputs */
  --shadow-glow:   0 0 0 14px rgba(255, 214, 89, 0.09), 0 0 0 28px rgba(255, 214, 89, 0.04); /* halo de elementos destacados */
  --shadow-inset:  0 0 0 1000px #0d1024 inset; /* autofill de inputs */

  /* ----------------------------------------------------------
     TRANSICIONES
     ---------------------------------------------------------- */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ----------------------------------------------------------
     CONTENEDOR Y GRID
     ---------------------------------------------------------- */

  --container-max:    1200px;
  --container-wide:   1400px;
  --container-narrow: 800px;
  --site-margin:      clamp(16px, 4vw, 48px);
  --grid-gutter:      24px;

  /* ----------------------------------------------------------
     MOCKUPS INLINE - PRIMITIVOS
     Para construir mockups de producto en código (WA preview,
     dashboards, phone screens, etc.) usando tokens del sistema.
     ---------------------------------------------------------- */

  --mockup-bg:            #05051a;
  --mockup-surface:       #0d1024;
  --mockup-header-bg:     #080c16;
  --mockup-border:        rgba(255, 255, 255, 0.06);
  --mockup-dot-grid:      radial-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  --mockup-dot-size:      12px 12px;
  --mockup-radius:        16px;
  --mockup-shadow:        0 16px 40px rgba(0, 0, 0, 0.45);
  --mockup-border-outer:  1px solid rgba(255, 255, 255, 0.08);
  --mockup-text-label:    rgba(255, 255, 255, 0.55);
  --mockup-text-value:    #ffffff;
  --mockup-text-gold:     #ffd659;
  --mockup-text-meta:     rgba(255, 255, 255, 0.25);
  --mockup-bubble-bg:     #0d1024;
  --mockup-bubble-border: rgba(255, 255, 255, 0.05);

  /* ----------------------------------------------------------
     COMPONENTE: STICKY CTA MOBILE
     ---------------------------------------------------------- */

  --sticky-cta-padding-x:  15px;
  --sticky-cta-padding-y:  10px;
  --sticky-cta-z-index:    999;

}

/* ============================================================
   BASE STYLES
   ============================================================ */

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

html {
  font-family: var(--font-body);
  font-size: 16px;
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TIPOGRAFÍA BASE
   ============================================================ */

h1, .text-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

h4 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
}

h5, h6 {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
}

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

/* Énfasis de marca en headings */
.text-gold {
  color: var(--color-text-gold);
}

/* ============================================================
   BOTONES
   ============================================================ */

/* Botón primario - gold sólido */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background-color: var(--color-brand-gold);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  padding: 18px var(--space-6);
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.btn-primary:hover {
  background-color: var(--color-brand-gold-dark);
  transform: translateY(-1px);
}

/* Botón secundario - ghost con borde */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background-color: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  padding: 18px var(--space-6);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-medium);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.btn-secondary:hover {
  border-color: var(--color-brand-gold);
  color: var(--color-brand-gold);
}

/* Focus state compartido */
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ============================================================
   TAG / BADGE
   ============================================================ */

.tag {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-brand-gold-subtle);
  color: var(--color-brand-gold);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  padding: 10px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-gold-subtle);
  letter-spacing: var(--tracking-wide);
}

/* ============================================================
   CARDS
   ============================================================ */

.card {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}

.card-elevated {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   INPUTS Y FORMULARIOS
   ============================================================ */

.input {
  width: 100%;
  background-color: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-regular);
  padding: 13px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance: none;
}

.input::placeholder {
  color: var(--color-text-subtle);
}

.input:focus {
  border-color: var(--color-brand-gold);
  box-shadow: var(--shadow-focus);
}

/* Autofill fix */
.input:-webkit-autofill {
  box-shadow: var(--shadow-inset);
  -webkit-text-fill-color: var(--color-text-primary);
}

/* ============================================================
   SECCIONES
   ============================================================ */

.section {
  padding-top: var(--section-space-md);
  padding-bottom: var(--section-space-md);
  padding-left: var(--site-margin);
  padding-right: var(--site-margin);
}

.section-base       { background-color: var(--section-base); }
.section-navy       { background-color: var(--section-navy); }
.section-deep       { background-color: var(--section-deep); }
.section-warm-dark  { background-color: var(--section-warm-dark); }
.section-cta        { background-color: var(--section-cta); color: var(--color-text-inverse); }

/* Sección con foto de fondo (Alpamayo, montañas) */
.section-photo {
  background-image: var(--section-photo-overlay), var(--section-photo-url, none);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* ============================================================
   DISPLAY TEXT DE SECCIÓN (patrón Nory)
   Texto gigante decorativo al final de secciones de impacto.
   ============================================================ */

.section-display-text {
  font-family: var(--font-display);
  font-size: clamp(60px, 10vw, 140px);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: rgba(255, 255, 255, 0.04);
  user-select: none;
  pointer-events: none;
}

/* ============================================================
   CONTENEDOR
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--site-margin);
  padding-right: var(--site-margin);
}

.container-wide {
  max-width: var(--container-wide);
}

.container-narrow {
  max-width: var(--container-narrow);
}

/* ============================================================
   GRID DE LAYOUT
   ============================================================ */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gutter);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gutter);
}

/* Layout 50/50 (patrón hero de curso - MasterClass) */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
}

/* Layout features (patrón Platzi: lista izquierda + mockup derecha) */
.feature-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-9);
  align-items: center;
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .split-layout,
  .feature-layout {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   LISTA DE FEATURES CON ICONO (patrón Platzi)
   ============================================================ */

.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.feature-item.active {
  color: var(--color-text-primary);
}

.feature-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-brand-gold);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.feature-item.active .feature-icon {
  border-color: var(--color-brand-gold);
  background-color: var(--color-brand-gold-subtle);
}

/* ============================================================
   TRUST SIGNALS / BADGE LIST (patrón BigSchool)
   ============================================================ */

.trust-badge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

/* ============================================================
   GRID DE INSTRUCTORES (patrón BigSchool / Platzi)
   Fotos con fondo de color por card.
   ============================================================ */

.instructor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--grid-gutter);
}

.instructor-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 3/4;
}

.instructor-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.instructor-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-4);
  background: linear-gradient(transparent, rgba(5, 5, 26, 0.9));
}

/* ============================================================
   LOGO STRIP / INTEGRACIONES (patrón Nory)
   ============================================================ */

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  min-width: 120px;
}

/* ============================================================
   STATS STRIP (patrón Nory / Platzi)
   ============================================================ */

.stats-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: flex-start;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
}

.stat-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ============================================================
   MOCKUP INLINE - PRIMITIVOS BASE
   Para construir representaciones de producto en código.
   Cada mockup es único en estructura pero comparte estos tokens.
   ============================================================ */

.mockup-wrapper {
  background-color: var(--mockup-bg);
  border-radius: var(--mockup-radius);
  overflow: hidden;
  box-shadow: var(--mockup-shadow);
  border: var(--mockup-border-outer);
  font-family: var(--font-body);
  animation: mockup-slide-in 0.6s 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

@keyframes mockup-slide-in {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.mockup-header {
  background-color: var(--mockup-header-bg);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--mockup-border);
}

.mockup-body {
  background-color: var(--mockup-bg);
  background-image: var(--mockup-dot-grid);
  background-size: var(--mockup-dot-size);
  padding: 14px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mockup-surface {
  background-color: var(--mockup-surface);
  border: 1px solid var(--mockup-bubble-border);
  border-radius: var(--radius-md);
  padding: 10px 12px 8px;
  box-shadow: var(--shadow-sm);
}

.mockup-label {
  font-size: 0.76rem;
  color: var(--mockup-text-label);
}

.mockup-value {
  font-size: 0.76rem;
  color: var(--mockup-text-value);
  font-weight: var(--font-weight-semibold);
}

.mockup-value-gold {
  color: var(--mockup-text-gold);
}

.mockup-meta {
  font-size: 0.62rem;
  color: var(--mockup-text-meta);
  text-align: right;
}

/* ============================================================
   STICKY CTA MOBILE
   Solo activo en mobile. Se muestra/oculta via JS
   (Intersection Observer sobre el elemento trigger).
   Variante "form": se oculta cuando el formulario es visible.
   Variante "pricing": se oculta cuando la sección de precio es visible.
   ============================================================ */

.sticky-cta-mobile {
  display: none;
  position: fixed;
  inset: auto 0 0;
  z-index: var(--sticky-cta-z-index);
  padding: var(--sticky-cta-padding-y) var(--sticky-cta-padding-x);
  background: linear-gradient(transparent, var(--color-bg-base) 30%);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.sticky-cta-mobile.visible {
  opacity: 1;
}

.sticky-cta-mobile .btn-primary {
  width: 100%;
  font-size: 18px;
}

@media (max-width: 767px) {
  .sticky-cta-mobile {
    display: block;
  }
}

/* ============================================================
   TEXTURAS MONTAÑERAS
   Se aplican como capas adicionales en secciones específicas
   para evocar textura de altitud sin ilustraciones explícitas.
   ============================================================ */

/* Textura de grano fotográfico sutil */
.texture-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
}

/* Gradiente de altitud: base oscura a cima negra */
.gradient-altitude {
  background: linear-gradient(180deg, var(--section-navy) 0%, var(--section-base) 60%, var(--section-deep) 100%);
}

/* Contorno topográfico decorativo (líneas tenues) */
.topo-lines {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 39px,
      rgba(255, 255, 255, 0.015) 39px,
      rgba(255, 255, 255, 0.015) 40px
    );
}

/* ============================================================
   ACTUALIZACIONES v1.1 - 23 mayo 2026
   Correcciones post primer render
   ============================================================ */

/* ----------------------------------------------------------
   SECCION CTA / PRECIO - versión corregida
   Nunca fondo gold completo. Siempre dark con card gold.
   ---------------------------------------------------------- */

.section-pricing {
  background-color: var(--section-deep);
  padding-top: 140px;
  padding-bottom: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pricing-card {
  width: 100%;
  max-width: 480px;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-gold-subtle);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: var(--shadow-lg);
}

.pricing-price {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-brand-gold);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.pricing-currency {
  font-size: var(--text-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-gold);
  vertical-align: super;
}

.pricing-period {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.pricing-includes {
  list-style: none;
  text-align: left;
  margin-bottom: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pricing-includes li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.pricing-includes li::before {
  content: "✓";
  color: var(--color-brand-gold);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ----------------------------------------------------------
   ACORDEON DE MODULOS - versión corregida
   ---------------------------------------------------------- */

.accordion {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.accordion details {
  background-color: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
}

.accordion details:last-child {
  border-bottom: none;
}

.accordion details[open] {
  background-color: var(--color-bg-elevated);
  border-left: 3px solid var(--color-brand-gold);
}

.accordion details[open] summary {
  color: var(--color-text-primary);
}

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  list-style: none;
  outline: none;
  user-select: none;
  transition: color var(--transition-fast);
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary::after {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd659' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.accordion details[open] summary::after {
  transform: rotate(180deg);
}

.accordion-content {
  padding: 0 24px 24px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.accordion-content ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.accordion-content li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}

.accordion-content li::before {
  content: "▶";
  font-size: 9px;
  color: var(--color-brand-gold);
  flex-shrink: 0;
  margin-top: 3px;
}

/* ----------------------------------------------------------
   SECCIONES - espaciado forzado
   ---------------------------------------------------------- */

.section-hero {
  min-height: 90vh;
  padding: 0;
}

.section-standard {
  padding-top: 100px;
  padding-bottom: 100px;
}

.section-impact {
  padding-top: 140px;
  padding-bottom: 140px;
}

/* ----------------------------------------------------------
   HEADINGS DE SECCION - reglas de peso y tamaño
   ---------------------------------------------------------- */

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(38px, 4vw + 16px, 56px);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
}

.section-subheading {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  max-width: 560px;
  line-height: var(--leading-normal);
  margin-bottom: var(--space-7);
}

/* Solo un heading por sección tiene texto gold */
.section-heading .highlight {
  color: var(--color-brand-gold);
}

/* ----------------------------------------------------------
   FEATURE LIST - versión corregida
   Icono gold outline + texto + espacio generoso
   ---------------------------------------------------------- */

.feature-list-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 480px;
}

.feature-item-v2 {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.feature-item-v2:last-child {
  border-bottom: none;
}

.feature-item-icon {
  width: 24px;
  height: 24px;
  color: var(--color-brand-gold);
  flex-shrink: 0;
  margin-top: 2px;
}

.feature-item-text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

/* ----------------------------------------------------------
   FOOTER DISPLAY TEXT - versión corregida
   ---------------------------------------------------------- */

.footer-display {
  font-family: var(--font-display);
  font-size: clamp(80px, 12vw, 160px);
  font-weight: var(--font-weight-extrabold);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.04);
  user-select: none;
  pointer-events: none;
  text-align: center;
  padding: 0 var(--site-margin);
  overflow: hidden;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   VIDEO SECTION - versión corregida
   ---------------------------------------------------------- */

.video-section {
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: var(--section-navy);
  text-align: center;
}

.video-heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw + 12px, 42px);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-7);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding-bottom: 56.25%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ----------------------------------------------------------
   BONOS GRID - versión corregida
   ---------------------------------------------------------- */

.bonos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-9);
}

.bono-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.bono-card img {
  width: 100%;
  border-radius: var(--radius-md);
  transition: transform var(--transition-base);
}

.bono-card:hover img {
  transform: translateY(-4px);
}

.bono-name {
  font-family: var(--font-body);
  font-size: var(--text-tiny);
  color: var(--color-text-muted);
  text-align: center;
  line-height: var(--leading-snug);
}

.combo-image {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  display: block;
}

@media (max-width: 900px) {
  .bonos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .bonos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}