/**
 * =============================================================================
 * SPACING AND TYPOGRAPHY OPTIMIZATION
 * =============================================================================
 *
 * PURPOSE:
 * - Eliminate excessive white space between sections
 * - Create consistent typography hierarchy
 * - Improve vertical rhythm and visual balance
 * - Maintain responsive behavior across all devices
 *
 * SECTIONS OPTIMIZED:
 * - Integraciones section (reduced bottom padding)
 * - Features section (reduced top padding)
 * - Standardized section titles
 * - Improved overall vertical spacing
 *
 * CREATED: 2025-10-11
 * =============================================================================
 */

/* =================================================================== */
/* CORE SPACING OPTIMIZATIONS */
/* =================================================================== */

/**
 * REDUCED SECTION PADDING
 * Previous values created excessive cumulative spacing
 * New values maintain visual hierarchy while reducing whitespace
 */

/* Default section padding - REDUCED from 5rem/7rem */
.padding-section-small {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}

.padding-section-medium {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
}

.padding-section-large {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

/* =================================================================== */
/* SECTION-SPECIFIC OPTIMIZATIONS */
/* =================================================================== */

/**
 * INTEGRACIONES SECTION
 * Reduce bottom padding to eliminate gap with Features section
 */
.section_integrations {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.section_integrations .padding-section-medium {
    padding-top: 3rem !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/**
 * FEATURES SECTION
 * Reduce top padding to connect better with Integraciones
 */
.section_features {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.section_features .padding-global {
    padding-top: 0.5rem !important;
    margin-top: 0 !important;
}

.section_features .container-large {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/**
 * VIDEO SECTION
 * Maximum top spacing for strong visual separation from clients section
 */
.section_video {
    padding-top: 0 !important;
    margin-top: 4rem !important; /* Increased from 2rem to 4rem for more separation */
}

.section_video .padding-section-large {
    padding-top: 6rem !important; /* Increased from 4rem to 6rem */
    padding-bottom: 1rem !important; /* Reduced from 2rem to 1rem */
}

/* =================================================================== */
/* TYPOGRAPHY HIERARCHY STANDARDIZATION */
/* =================================================================== */

/**
 * SECTION TITLES - CONSISTENT SIZING
 * Standardize all section titles for visual coherence
 * Previous mix of .heading-style-h3 and .text-size-medium is now unified
 */

/* Main section headings - consistent size */
.section_integrations h2,
.section_features h2,
.section_video h2,
.section_testimonial h2 {
    font-size: 2.5rem !important;
    font-weight: 400 !important;
    letter-spacing: -2.5px !important;
    line-height: 1.2 !important;
    margin-bottom: 1.5rem !important;
}

/* Subsection headings within features */
.features_content h2.heading-style-h3 {
    font-size: 2rem !important;
    letter-spacing: -2px !important;
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
}

/* Small section labels (like "Confían en nosotros" and "Integraciones") */
.clients-title-wrapper h2,
.integrations-title-wrapper h2 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
}

/* =================================================================== */
/* LINE HEIGHT OPTIMIZATION */
/* =================================================================== */

/**
 * IMPROVED READABILITY
 * Optimize line heights for better text flow and readability
 */

/* Body text */
.text-size-medium {
    font-size: 1.125rem !important;
    line-height: 1.6 !important;
    letter-spacing: -0.2px !important;
}

.text-size-small {
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

.text-size-tiny {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
}

/* =================================================================== */
/* CONTAINER AND LAYOUT OPTIMIZATIONS */
/* =================================================================== */

/**
 * REDUCED CUMULATIVE PADDING
 * Address the issue of multiple nested padding containers
 */

/* Reduce global padding slightly for tighter layout */
.padding-global {
    padding-left: 4.5% !important;
    padding-right: 4.5% !important;
}

/* Container optimizations */
.container-large,
.container-medium,
.container-small {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* =================================================================== */
/* MARGIN OPTIMIZATIONS */
/* =================================================================== */

/**
 * VERTICAL RHYTHM
 * Consistent spacing between elements for better visual flow
 */

/* Margin utilities - optimized values */
.margin-bottom.margin-small {
    margin-bottom: 0.75rem !important;
}

.margin-bottom.margin-medium {
    margin-bottom: 1.25rem !important;
}

.margin-bottom.margin-large {
    margin-bottom: 2rem !important;
}

.margin-bottom.margin-xlarge {
    margin-bottom: 3rem !important;
}

.margin-bottom.margin-xxlarge {
    margin-bottom: 4rem !important;
}

/* Top margins */
.margin-top.margin-small {
    margin-top: 0.75rem !important;
}

.margin-top.margin-medium {
    margin-top: 1.25rem !important;
}

.margin-top.margin-large {
    margin-top: 2rem !important;
}

.margin-top.margin-xlarge {
    margin-top: 3rem !important;
}

/* =================================================================== */
/* SPECIFIC COMPONENT OPTIMIZATIONS */
/* =================================================================== */

/**
 * LOGO SECTIONS (Clients & Integrations)
 * Optimize spacing for carousel sections
 */

.clients-section-flex,
.integrations-section-flex {
    gap: 1.5rem !important;
    align-items: center !important;
}

/**
 * FEATURES COMPONENT
 * Better spacing between feature items
 */

.features_component {
    gap: 3rem !important;
}

.features_content {
    margin-bottom: 2.5rem !important;
}

.features_content:last-child {
    margin-bottom: 0 !important;
}

/**
 * VIDEO COMPONENT
 * Optimize spacing around video
 */

.video_component {
    gap: 2.5rem !important;
}

/* =================================================================== */
/* RESPONSIVE OPTIMIZATIONS */
/* =================================================================== */

/**
 * TABLET (max-width: 991px)
 */
@media screen and (max-width: 991px) {
    /* Further reduce spacing on tablet */
    .padding-section-small {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .padding-section-medium {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .padding-section-large {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    /* Section title sizing for tablet */
    .section_integrations h2,
    .section_features h2,
    .section_video h2 {
        font-size: 2rem !important;
        letter-spacing: -2px !important;
    }

    .features_content h2.heading-style-h3 {
        font-size: 1.75rem !important;
        letter-spacing: -1.5px !important;
    }

    /* Reduce global padding on tablet */
    .padding-global {
        padding-left: 4% !important;
        padding-right: 4% !important;
    }
}

/**
 * MOBILE LANDSCAPE (max-width: 767px)
 */
@media screen and (max-width: 767px) {
    /* Compact spacing for mobile landscape */
    .padding-section-small {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .padding-section-medium {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .padding-section-large {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    /* Section title sizing for mobile landscape */
    .section_integrations h2,
    .section_features h2,
    .section_video h2 {
        font-size: 1.75rem !important;
        letter-spacing: -1.5px !important;
        margin-bottom: 1rem !important;
    }

    .features_content h2.heading-style-h3 {
        font-size: 1.5rem !important;
        letter-spacing: -1px !important;
    }

    /* Tighter component spacing */
    .features_component {
        gap: 2rem !important;
    }

    .features_content {
        margin-bottom: 2rem !important;
    }
}

/**
 * MOBILE PORTRAIT (max-width: 479px)
 */
@media screen and (max-width: 479px) {
    /* Most compact spacing for mobile portrait */
    .padding-section-small {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    .padding-section-medium {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .padding-section-large {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* Mobile-optimized hero title - make it fit on mobile screens */
    .heading-style-h1 {
        font-size: 2.5rem !important; /* 40px instead of 64px */
        letter-spacing: -2px !important;
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
    }

    /* Mobile-optimized section titles */
    .section_integrations h2,
    .section_features h2,
    .section_video h2 {
        font-size: 1.5rem !important;
        letter-spacing: -1px !important;
        margin-bottom: 0.875rem !important;
    }

    .features_content h2.heading-style-h3 {
        font-size: 1.375rem !important;
        letter-spacing: -0.5px !important;
    }

    .clients-title-wrapper h2,
    .integrations-title-wrapper h2 {
        font-size: 1rem !important;
    }

    /* Very compact body text */
    .text-size-medium {
        font-size: 1rem !important;
        line-height: 1.55 !important;
    }

    .text-size-small {
        font-size: 0.938rem !important;
        line-height: 1.5 !important;
    }

    /* Minimal component gaps */
    .features_component {
        gap: 1.5rem !important;
    }

    .features_content {
        margin-bottom: 1.5rem !important;
    }

    .video_component {
        gap: 1.75rem !important;
    }

    /* Reduce global padding significantly on small mobile */
    .padding-global {
        padding-left: 4% !important;
        padding-right: 4% !important;
    }
}

/**
 * EXTRA SMALL MOBILE (max-width: 375px)
 * For very small screens like iPhone SE
 */
@media screen and (max-width: 375px) {
    /* Even smaller hero title for very small screens */
    .heading-style-h1 {
        font-size: 2.25rem !important; /* 36px for extra small screens */
        letter-spacing: -1.5px !important;
        line-height: 1.05 !important;
    }

    /* Compact subtitle text */
    .text-size-medium {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }

    /* Tighter global padding for very small screens */
    .padding-global {
        padding-left: 3% !important;
        padding-right: 3% !important;
    }
}

/* =================================================================== */
/* UTILITY OVERRIDES FOR SPECIFIC ISSUES */
/* =================================================================== */

/**
 * FIX: Multiple padding containers creating cumulative spacing
 * Override nested padding in specific problematic areas
 */

/* Prevent double padding in section containers */
.section_integrations > .padding-global > .container-large > .padding-section-medium {
    padding-top: 2rem !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.section_features > .padding-global {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Specific fix for integrations → features gap */
.section_integrations + .section_features {
    margin-top: -1rem !important;
}

/**
 * FIX: Flex container vertical spacing
 * Optimize flex containers for better spacing control
 */

.clients-section-flex,
.integrations-section-flex {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* =================================================================== */
/* VISUAL BALANCE IMPROVEMENTS */
/* =================================================================== */

/**
 * Ensure sections feel connected without being cramped
 * Create breathing room where needed while eliminating excess
 */

/* Hero section bottom spacing */
.section_hero {
    padding-bottom: 3.5rem !important;
}

@media screen and (max-width: 991px) {
    .section_hero {
        padding-bottom: 3rem !important;
    }
}

@media screen and (max-width: 767px) {
    .section_hero {
        padding-bottom: 2.5rem !important;
    }
}

@media screen and (max-width: 479px) {
    .section_hero {
        padding-bottom: 2rem !important;
    }
}

/* =================================================================== */
/* ACCESSIBILITY - MAINTAIN FOCUS OUTLINES */
/* =================================================================== */

/**
 * Ensure spacing optimizations don't impact accessibility
 * Maintain proper focus states and interactive areas
 */

/* Ensure clickable areas remain adequate despite tighter spacing */
.button,
a.button {
    min-height: 44px !important;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
}

/* =================================================================== */
/* END OF SPACING AND TYPOGRAPHY OPTIMIZATION */
/* =================================================================== */