/* COGNILAB - SISTEMA DE ESPACIADO Y PROPORCIONES HOMOGÉNEAS */

/* SISTEMA DE ESPACIADO UNIFICADO */
:root {
    --block-padding: 6rem 0;
    --block-padding-mobile: 3rem 0;
    --block-padding-tablet: 4.5rem 0;
    --block-margin: 0;
    --title-margin-top: 2rem;
    --title-margin-bottom: 2.5rem;
    --content-margin: 2rem;
    --section-gap: 0;
    
    /* Variables de espaciado para filosofía y otros componentes */
    --s2: 0.5rem;
    --s4: 1rem;
    --s5: 1.25rem;
    --s6: 1.5rem;
    --s8: 2rem;
    --s12: 3rem;
    --s20: 5rem;
    
    /* Variables de radio para bordes */
    --r5: 0.75rem;
}

/* ESPACIADO UNIFORME PARA TODAS LAS SECCIONES */
.hero-2025 {
    min-height: 100vh;
    padding: 0;
    margin: 0;
}

/* Primer bloque en páginas internas: separación superior uniforme para títulos */
.main-content > .section:first-of-type {
    padding-top: var(--block-padding);
}

/* Asegurar que los títulos tengan espacio superior adecuado */
.auth-header h1,
.title-section {
    margin-top: var(--title-margin-top);
    margin-bottom: var(--title-margin-bottom);
}

/* SISTEMA DE PROPORCIONES HOMOGÉNEAS - ESTRICTO */
.servicios-premium,
.esferas-premium {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--block-padding);
    margin: 0;
}

/* SECCIÓN DE PRECIOS MÁS COMPACTA */
.pricing {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--s4) 0 var(--s12) 0;
    margin: 0;
}

/* SECCIÓN: CÓMO FUNCIONA (BLOQUE VACÍO CON TAMAÑO UNIFORME) */
.seccion-como-funciona {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--block-padding);
    margin: 0;
}

.encabezado-como-funciona {
    margin-top: var(--title-margin-top);
    margin-bottom: var(--title-margin-bottom);
    padding: 0 var(--content-margin);
}

/* Contenedor de acciones en "Cómo funciona" centrado */
.acciones-como-funciona{
    display: flex;
    justify-content: center;
    margin-top: var(--s6);
}

/* Contenedor de acciones en Portafolio centrado */
.acciones-portafolio{
    display: flex;
    justify-content: center;
}

@media (max-width: 480px){
    .acciones-como-funciona{
        margin-bottom: var(--s6);
    }
}

/* ESPACIADO UNIFORME DESDE INICIO DEL BLOQUE HASTA PRIMER TÍTULO */
.servicios-premium-header,
.esferas-premium-header {
    margin-top: var(--title-margin-top);
    margin-bottom: var(--title-margin-bottom);
    padding: 0 var(--content-margin);
}

/* HEADER DE PRECIOS MÁS COMPACTO */
.pricing-header-section {
    margin-top: var(--s1);
    margin-bottom: var(--s6);
    padding: 0 var(--content-margin);
}

/* ESPACIADO UNIFORME DESDE TÍTULO HASTA CONTENIDO */
.servicios-premium-grid,
.esferas-carousel-section {
    margin-top: var(--title-margin-bottom);
    /* padding eliminado para evitar márgenes laterales en el carrusel */
    padding: 0; 
}

/* Separación del aviso de portafolio respecto al cuadro */
.portafolio-aviso{
    margin-top: calc(var(--s8) + var(--s8));
}

/* Asegurar que el wrapper del carrusel ocupe todo el ancho sin márgenes laterales */
.esferas-carousel-section .carousel-infinito-wrapper {
    margin: 0;
    width: 100%;
}

/* ESPACIADO ESPECIAL PARA EL CONTENEDOR DE TEXTO DE ESFERAS */
.esferas-premium-container {
    margin-top: var(--title-margin-bottom);
    margin-bottom: 3rem;
    padding: 0 var(--content-margin);
}

/* GRID DE PLANES MÁS COMPACTO */
.planes-grid {
    margin-top: var(--title-margin-bottom);
    padding: 0 var(--content-margin);
}

/* ESPACIADO RESPONSIVO */
@media (max-width: 1200px) {
    :root {
        --block-padding: 5rem 0;
        --title-margin-top: 1.5rem;
        --title-margin-bottom: 2rem;
        --content-margin: 1.5rem;
    }
}

@media (max-width: 768px) {
    :root {
        --block-padding: var(--block-padding-tablet);
        --title-margin-top: 1.25rem;
        --title-margin-bottom: 1.75rem;
        --content-margin: 1rem;
    }
    
    .servicios-premium,
    .esferas-premium {
        min-height: 100vh;
    }
    
    .pricing {
        min-height: 100vh;
    }
    
    .pricing-header-section {
        margin-bottom: var(--title-margin-bottom);
    }
    
    .planes-grid {
        margin-top: var(--title-margin-bottom);
    }
}

@media (max-width: 480px) {
    :root {
        --block-padding: var(--block-padding-mobile);
        --title-margin-top: 1rem;
        --title-margin-bottom: 1.5rem;
        --content-margin: 0.75rem;
    }
    
    .servicios-premium,
    .esferas-premium {
        min-height: 100vh;
    }
    
    .pricing {
        min-height: 100vh;
    }
    
    .pricing-header-section {
        margin-bottom: var(--title-margin-bottom);
    }
    
    .planes-grid {
        margin-top: var(--title-margin-bottom);
    }
}