/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */


/**
 * SISTEMA DE PADDING VERTICAL FLUIDO (ULTRA-RESPONSIVE)
 * Cobertura: 320px (Mobile) -> 1920px (Full HD/PC)
 */

:root {
    /* COMPACTO: 20px (Mobile) -> 50px (PC) */
    --p-compacto: clamp(20px, 1.875vw + 14px, 50px);
    
    /* NORMAL: 40px (Mobile) -> 100px (PC) */
    --p-normal: clamp(40px, 3.75vw + 28px, 100px);
    
    /* AMPLIO: 60px (Mobile) -> 180px (PC) */
    --p-amplio: clamp(60px, 7.5vw + 36px, 180px);
}


/* --- CLASES PARA EL CONTENEDOR --- */

/* Clase: grupo--compacto */
.grupo--compacto {
    --e-con-padding-top: var(--p-compacto) !important;
    --e-con-padding-bottom: var(--p-compacto) !important;
    padding-top: var(--p-compacto) !important;
    padding-bottom: var(--p-compacto) !important;
}

/* Clase: grupo--normal */
.grupo--normal {
    --e-con-padding-top: var(--p-normal) !important;
    --e-con-padding-bottom: var(--p-normal) !important;
    padding-top: var(--p-normal) !important;
    padding-bottom: var(--p-normal) !important;
}

/* Clase: grupo--amplio */
.grupo--amplio {
    --e-con-padding-top: var(--p-amplio) !important;
    --e-con-padding-bottom: var(--p-amplio) !important;
    padding-top: var(--p-amplio) !important;
    padding-bottom: var(--p-amplio) !important;
}

/**
 * REGLA PARA PANTALLAS ULTRA-WIDE (Opcional)
 * Si quieres que en pantallas de más de 1920px el padding 
 * siga creciendo un poco más, puedes ajustar este Media Query.
 */
@media (min-width: 1921px) {
    :root {
        --p-normal: 120px;
        --p-amplio: 200px;
    }
}

h1, h2, h3{
	line-height: 1.2!important;
}


/*Root de la web*/
:root {
	--font-h: 'Rubik', sans-serif;
	--font-b: 'Outfit', sans-serif;
	--bg-light: #F8F9FA;
	--highlight-yellow: #FCD430;
	--primary-blue: #1062A9;
	--light-gray: #f2f5f7;
	--text-dark: #1a1c1e;
	--text-normal: #4A4D50;
	--text-muted: #666666;
	--action-orange: #EC9625;
	--white-pure: #FFFFFF;
	--grey-blue: #e1e8ed;
	--success-green: #27ae60;
}	


/* =============================================================
   SISTEMA DE BOTONES PREMIUM - AUSPICIAME.COM (OPTIMIZADO)
   ============================================================= */

/* 1. CONFIGURACIÓN GLOBAL ÚNICA 
   Agrupamos TODAS las variantes para asegurar consistencia total */
.btn--primary .elementor-button,
.btn--secondary .elementor-button,
.btn--outline .elementor-button,
.btn--urgent .elementor-button,
.btn--whiteline .elementor-button,
.btn--white .elementor-button,
.btn--ghost .elementor-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Tipografía Unificada */
    font-family: var(--font-b)!important;
    font-weight: 600;
    letter-spacing: 0.3px !important; 
    text-transform: uppercase;
    font-size: 0.9rem;

    /* Dimensiones */
    padding: 22px 34px; 
    border-radius: 4px !important;
    
    /* Transición y Sombra */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    border-style: solid !important;
    border-width: 2px !important;
}

/* 2. EFECTO HOVER GLOBAL (Elevación física) */
.btn--primary .elementor-button:hover,
.btn--secondary .elementor-button:hover,
.btn--outline .elementor-button:hover,
.btn--urgent .elementor-button:hover,
.btn--whiteline .elementor-button:hover,
.btn--white .elementor-button:hover,
.btn--ghost .elementor-button:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15) !important;
}

/* 3. VARIANTES DE COLOR (Solo definimos lo que cambia) */

/* PRIMARY (Naranja) */
.btn--primary .elementor-button {
    background-color: #EC9625 !important;
    border-color: #EC9625 !important;
    color: #FFFFFF !important;
}
.btn--primary .elementor-button:hover {
    background-color: #D6851E !important;
    border-color: #D6851E !important;
}

/* SECONDARY (Azul) */
.btn--secondary .elementor-button {
    background-color: #1062A9 !important;
    border-color: #1062A9 !important;
    color: #FFFFFF !important;
}
.btn--secondary .elementor-button:hover {
    background-color: #0D518B !important;
    border-color: #0D518B !important;
}

/* OUTLINE (Borde Azul) */
.btn--outline .elementor-button {
    background-color: transparent !important;
    border-color: #1062A9 !important;
    color: #1062A9 !important;
    backdrop-filter: blur(4px);
}
.btn--outline .elementor-button:hover {
    background-color: #1062A9 !important;
    color: #FFFFFF !important;
}

/* WHITELINE (Borde Blanco) */
.btn--whiteline .elementor-button {
    background-color: rgba(255, 255, 255, 0.1)!important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
    backdrop-filter: blur(4px);
}
.btn--whiteline .elementor-button:hover {
    background-color: #FFFFFF !important;
    color: #1062A9 !important;
}

/* URGENT (Amarillo) */
.btn--urgent .elementor-button {
    background-color: #FCD430 !important;
    border-color: #FCD430 !important;
    color: #1A1C1E !important;
}
.btn--urgent .elementor-button:hover {
    background-color: #EBC31A !important;
    border-color: #EBC31A !important;
}

/* WHITE (Sólido Blanco para fondos oscuros) */
.btn--white .elementor-button {
    background-color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #1062A9 !important;
}
.btn--white .elementor-button:hover {
    background-color: #F3F4F6 !important;
    border-color: #F3F4F6 !important;
}

/* GHOST (Borde Blanco / Estilo Terciario) */
.btn--ghost .elementor-button {
    background-color: transparent !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
}
.btn--ghost .elementor-button:hover {
    background-color: #FFFFFF !important;
    color: #1062A9 !important;
    border-color: #FFFFFF !important;
}

/* =============================================================
   4. OPTIMIZACIÓN RESPONSIVE (MOBILE) BOTONES
   ============================================================= */

@media (max-width: 768px) {
    .btn--primary .elementor-button,
    .btn--secondary .elementor-button,
    .btn--outline .elementor-button,
    .btn--urgent .elementor-button,
    .btn--whiteline .elementor-button,
    .btn--white .elementor-button,
    .btn--ghost .elementor-button {
        /* Reducción de tamaño de texto */
        font-size: 0.8rem;
        
        /* Reducción de padding para pantallas pequeñas */
        padding: 18px 24px !important; 
        
        /* Opcional: Asegura que no se desborden en pantallas muy pequeñas */
        width: auto !important;
        min-width: 200px;
    }

    /* Opcional: Suavizar el efecto hover en mobile (ya que no hay puntero) */
    .btn--primary .elementor-button:hover,
    .btn--secondary .elementor-button:hover,
    .btn--outline .elementor-button:hover,
    .btn--urgent .elementor-button:hover,
    .btn--whiteline .elementor-button:hover,
    .btn--white .elementor-button:hover,
    .btn--ghost .elementor-button:hover {
        transform: translateY(-2px) !important; /* Menos elevación en touch */
    }
}