/* ==========================================================================
   CREAKTIVE - SISTEMA DE DISEÑO / GUÍA DE ESTILOS (THEME)
   Tokens globales, tipografía, componentes base y variables centralizadas
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,700&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ==========================================
     1. PALETA DE COLORES
     ========================================== */
  /* Colores de Marca */
  --color-primary: #F9CF1E;
  --color-primary-hover: #e5bd15;
  --color-primary-rgb: 249, 207, 30;

  /* Superficies Oscuras */
  --color-dark: #121212;
  --color-dark-surface: #1d1d1d;
  --color-dark-card: #242424;

  /* Textos */
  --color-heading: #111111;
  --color-text-main: #4B4B4B;
  --color-text-light: #777777;
  --color-text-muted: #888888;
  --color-white: #ffffff;

  /* Fondos y Bordes */
  --color-bg-light: #f8f9fa;
  --color-card-bg: #f5f6f8;
  --color-border: #e2e4e8;
  --color-border-dark: rgba(255, 255, 255, 0.1);

  /* Acentos y Notificaciones */
  --color-blue-badge: #3b82f6;
  --color-whatsapp: #25D366;

  /* ==========================================
     2. FAMILIAS TIPOGRÁFICAS
     ========================================== */
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-accent: 'Montserrat', sans-serif;

  /* ==========================================
     3. ESCALA DE TAMAÑOS TIPOGRÁFICOS
     (Modificar aquí altera toda la web a la vez)
     ========================================== */
  --text-xs: 0.75rem;          /* 12px */
  --text-sm: 0.875rem;         /* 14px */
  --text-base: 1rem;           /* 16px - Tamaño estándar de párrafos */
  --text-eyebrow: 1.125rem;    /* 18px - Antetítulos de sección */
  --text-title-section: 38px; /* 36-38px - Títulos de sección */
  --text-title-large: 2.5rem;  /* 40px - Títulos destacados */
  --text-title-hero: clamp(2.4rem, 5.2vw, 4.4rem); /* Hero Title */
  --text-marquee: 36px;        /* Cinta continua */

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

  /* Interlineados */
  --leading-tight: 1.15;
  --leading-normal: 1.4;
  --leading-loose: 1.65;

  /* ==========================================
     4. CONTENEDORES Y ESPACIADOS
     ========================================== */
  --container-width: 1200px;
  --header-height: 85px;
  --section-padding-y: 100px;
  --section-padding-x: 24px;

  /* ==========================================
     5. RADIOS DE BORDE
     ========================================== */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 9999px;

  /* ==========================================
     6. ANIMACIONES Y TRANSICIONES
     ========================================== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  /* ==========================================
     7. SOMBRAS Y ELEVACIÓN
     ========================================== */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
  --shadow-yellow: 0 8px 20px rgba(249, 207, 30, 0.35);
}

/* ==========================================================================
   RESETEO BÁSICO GLOBAL
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--color-text-main);
  background-color: var(--color-white);
  line-height: var(--leading-loose);
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

button,
input,
textarea {
  font-family: inherit;
  font-size: inherit;
}

ul {
  list-style: none;
}

/* ==========================================================================
   CLASES TIPOGRÁFICAS GLOBALES (REUTILIZABLES)
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

/* Antetítulo / Eyebrow Global (Estilo unificado 18px, Poppins, #C4C4C4) */
.section-eyebrow,
.brand-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow, 18px);
  font-weight: var(--font-regular, 400);
  color: #c4c4c4;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 8px;
  line-height: var(--leading-tight);
}

/* Títulos principales de sección estándar (38px) */
.section-title,
.brand-title {
  font-family: var(--font-display);
  font-size: var(--text-title-section);
  font-weight: var(--font-bold);
  line-height: 1.25;
  color: var(--color-heading);
  margin-bottom: 20px;
}

/* Párrafos corporativos */
.section-desc,
.brand-desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-main);
  margin-bottom: 14px;
}

/* Modificadores de Color */
.text-accent {
  color: var(--color-primary) !important;
}

.text-white {
  color: var(--color-white) !important;
}

.text-muted {
  color: var(--color-text-muted) !important;
}

/* ==========================================================================
   COMPONENTES DE BOTONES GLOBALES
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--font-semibold);
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  transition: var(--transition-normal);
  text-align: center;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-dark);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-yellow);
}

.btn-dark {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.btn-dark:hover {
  background-color: #000000;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-main);
}

.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}