/* Tipografías para Landing Paso al Cobro */

/* NOTA: Las fuentes locales de Futura tienen problemas de formato OTS.
   Se usa Google Fonts como alternativa principal.
   Las declaraciones @font-face de fuentes locales se mantienen como referencia
   pero pueden no funcionar correctamente en algunos navegadores.
*/

/* ============================================
   GOOGLE FONTS - Montserrat (代替 - Alternative)
   Usamos Google Fonts ya que las fuentes locales tienen errores de formato
   ============================================ */
/* 
   Montserrat ya está cargado desde Google Fonts en app.blade.php:
   https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900
*/

/* ============================================
   GOOGLE FONTS - Nunito Sans (代替 - Alternative)
   ============================================ */
/*
   Nunito Sans ya está cargado desde Google Fonts en app.blade.php:
   https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600;700;800
*/

/* ============================================
   VARIABLES CSS
   ============================================ */
:root {
    /* Tipografías - Usando Google Fonts como principal */
    /* Nota: Futura local tiene errores de formato, usamos Montserrat como alternativa */
    --font-primary: 'Montserrat', 'Nunito Sans', sans-serif;
    --font-secondary: 'Nunito Sans', 'Montserrat', sans-serif;
    --font-tertiary: 'Nunito Sans', 'Montserrat', sans-serif;
    
    /* Tipografía específica para títulos */
    --font-heading: 'Montserrat', sans-serif;
    
    /* Tipografía específica para cuerpo de texto */
    --font-body: 'Nunito Sans', 'Montserrat', sans-serif;
    
    /* Colores del diseño */
    --color-primary-blue: #1e3a8a;
    --color-primary-navy: #0f172a;
    --color-primary-green: #10b981;
    --color-primary-turquoise: #14b8a6;
    --color-accent-yellow: #fbbf24;
    --color-accent-orange: #f97316;
    --color-text-dark: #1f2937;
    --color-text-gray: #6b7280;
    --color-background: #ffffff;
    --color-background-light: #f9fafb;
    
    /* Espaciados */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    
    /* Bordes */
    --border-radius-sm: 0.375rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 1rem;
    --border-radius-full: 9999px;
    
    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    
    /* Transiciones */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
}

/* ============================================
   CLASES DE UTILIDAD
   ============================================ */

/* Tipografías */
.font-futura {
    font-family: var(--font-primary);
}

.font-montserrat {
    font-family: var(--font-secondary);
}

.font-nunito {
    font-family: var(--font-tertiary);
}

.font-heading {
    font-family: var(--font-heading);
}

.font-body {
    font-family: var(--font-body);
}

/* Pesos de fuente */
.font-light {
    font-weight: 300 !important;
}

.font-regular {
    font-weight: 400 !important;
}

.font-medium {
    font-weight: 500 !important;
}

.font-semibold {
    font-weight: 600 !important;
}

.font-bold {
    font-weight: 700 !important;
}

.font-extrabold {
    font-weight: 800 !important;
}

.font-black {
    font-weight: 900 !important;
}

/* ============================================
   ESTILOS BASE PARA LA LANDING
   ============================================ */
.paso-al-cobro-landing {
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    line-height: 1.6;
}

.paso-al-cobro-landing h1,
.paso-al-cobro-landing h2,
.paso-al-cobro-landing h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
}

.paso-al-cobro-landing h4,
.paso-al-cobro-landing h5,
.paso-al-cobro-landing h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.3;
}

.paso-al-cobro-landing p {
    font-family: var(--font-body);
}

.paso-al-cobro-landing button {
    font-family: var(--font-primary);
    font-weight: 600;
}

.paso-al-cobro-landing a {
    font-family: var(--font-body);
    color: var(--color-primary-blue);
    transition: color var(--transition-fast);
}

.paso-al-cobro-landing a:hover {
    color: var(--color-primary-turquoise);
}

/* Texto pequeño */
.paso-al-cobro-landing small {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Labels */
.paso-al-cobro-landing label {
    font-family: var(--font-body);
    font-weight: 500;
}