/* ==========================================================================
   HOME PAGE STYLES - SUBALIA B2B
   ========================================================================== */

/* --------------------------------------------------------------------------
   VARIABLES CSS PERSONALIZADAS
   -------------------------------------------------------------------------- */
:root {
    /* Fuentes */
    --fontFamily: "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    --fontWeightLight: 200;
    --fontWeightNormal: 300;
    --fontWeightSemibold: 425;
    --fontWeightBold: 500;
    --systemFontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --codeFontFamily: "Consolas", "Monaco", "Courier New", monospace;
    --sourceCodeFont: 500 14px/1.714285714 var(--codeFontFamily);
    --ctaFont: var(--fontWeightSemibold) 15px/1.6 var(--fontFamily);
    --inputFont: var(--fontWeightNormal) 15px/1.6 var(--fontFamily);
    
    /* Sombras */
    --cardShadowXSmall: 0 2px 5px -1px rgba(50,50,93,0.25), 0 1px 3px -1px rgba(0,0,0,0.3);
    --cardShadowSmall: 0 6px 12px -2px rgba(50,50,93,0.25), 0 3px 7px -3px rgba(0,0,0,0.3);
    --cardShadowMedium: 0 13px 27px -5px rgba(50,50,93,0.25), 0 8px 16px -8px rgba(0,0,0,0.3);
    --cardShadowLarge: 0 30px 60px -12px rgba(50,50,93,0.25), 0 18px 36px -18px rgba(0,0,0,0.3);
    --cardShadowLargeInset: inset 0 30px 60px -12px rgba(50,50,93,0.25), inset 0 18px 36px -18px rgba(0,0,0,0.3);
    --cardShadowXLarge: 0 50px 100px -20px rgba(50,50,93,0.25), 0 30px 60px -30px rgba(0,0,0,0.3);
    --cardBorderRadius: 8px;
    --filterShadowMedium: 0px 3px 11.5px -3.5px rgba(50,50,93,0.25), 0px 3.8px 7.5px -3.7px rgba(0,0,0,0.1);
    
    /* Ángulos */
    --angleNormal: -6deg;
    --angleStrong: -12deg;
    --angleNormalSin: 0.106;
    --angleStrongSin: 0.212;
    
    /* Layout */
    --gutterWidth: 16px;
    --scrollbarWidth: 0px;
    --windowWidth: calc(100vw - var(--scrollbarWidth));
    --layoutWidth: calc(var(--windowWidth) - var(--gutterWidth) * 2);
    --layoutWidthMax: 1080px;
    --viewportWidthSmall: 375;
    --viewportWidthMedium: 600;
    --viewportWidthLarge: 1112;
    --paddingTop: 160px;
    --paddingBottom: 160px;
    
    /* Tipografía Responsive */
    --heroTitleSize: 4.5rem;
    --heroSubtitleSize: 1.25rem;
    --sectionTitleSize: 2.5rem;
    --sectionSubtitleSize: 1.75rem;
    --cardTitleSize: 1.25rem;
    --bodyTextSize: 1rem;
    --smallTextSize: 0.875rem;
    
    /* Gradiente */
    --gradientColorZero: #1e3a8a;
    --gradientColorOne: #3b82f6;
    --gradientColorTwo: #06b6d4;
    --gradientColorThree: #0ea5e9;
    --gradientColorZeroTransparent: rgba(30, 58, 138, 0);
    --gradientColorOneTransparent: rgba(59, 130, 246, 0);
    --gradientColorTwoTransparent: rgba(6, 182, 212, 0);
    --gradientColorThreeTransparent: rgba(14, 165, 233, 0);
    
    /* Otros */
    --offsetX: var(--gutterWidth);
    --transformOriginX: calc(var(--offsetX) * 0.8);
    --sectionPaddingTop: var(--paddingTop);
    --sectionAngleSin: var(--angleStrongSin);
    --gradientAngle: var(--angleStrong);
    --gradientHeight: calc(100% + var(--sectionPaddingTop) + var(--transformOriginX) * var(--sectionAngleSin));
    
    /* Variables para tarjetas */
    --columnPaddingNormal: 16px;
    --subcardBackground: #f6f9fc;
    --fontSize: 15px;
    --textColor: #425466;
    --titleColor: #0a2540;
}

@media (min-width: 600px) {
    :root {
        --transformOriginX: calc(var(--gutterWidth) * 0.8);
    }
}

/* Tipografía responsive para tablets */
@media (max-width: 992px) {
    :root {
        --heroTitleSize: 2.75rem;
        --heroSubtitleSize: 1.125rem;
        --sectionTitleSize: 2.25rem;
        --sectionSubtitleSize: 1.5rem;
        --cardTitleSize: 1.125rem;
        --bodyTextSize: 0.95rem;
    }
}

/* Tipografía responsive para móviles */
@media (max-width: 768px) {
    :root {
        --heroTitleSize: 2.25rem;
        --heroSubtitleSize: 1rem;
        --sectionTitleSize: 1.875rem;
        --sectionSubtitleSize: 1.25rem;
        --cardTitleSize: 1rem;
        --bodyTextSize: 0.9rem;
        --paddingTop: 80px;
        --paddingBottom: 80px;
    }
}

/* Tipografía responsive para móviles pequeños */
@media (max-width: 576px) {
    :root {
        --heroTitleSize: 1.875rem;
        --heroSubtitleSize: 0.95rem;
        --sectionTitleSize: 1.625rem;
        --sectionSubtitleSize: 1.125rem;
        --cardTitleSize: 0.95rem;
        --bodyTextSize: 0.875rem;
        --paddingTop: 60px;
        --paddingBottom: 60px;
    }
}

/* --------------------------------------------------------------------------
   FUENTES PERSONALIZADAS
   -------------------------------------------------------------------------- */
@media (min-width:600px) {
    @font-face {
        font-family: sohne-var;
        src: url('../f965fdf4.woff2') format("woff2-variations");
        font-weight: 1 1000;
        font-display: block;
    }
}

@media (max-width:599px) {
    @font-face {
        font-family: sohne-var;
        src: url('../f965fdf4.woff2') format("woff2-variations");
        font-weight: 1 1000;
        font-display: swap;
    }
}

/* --------------------------------------------------------------------------
   ESTILOS BASE
   -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--fontFamily) !important;
    font-weight: var(--fontWeightNormal);
}

/* Offset para secciones con navbar fijo */
section[id], header[id] {
    scroll-margin-top: 80px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fontFamily);
    font-weight: var(--fontWeightSemibold);
}

p, a, li, span, div {
    font-family: var(--fontFamily);
}

.btn, button {
    font: var(--ctaFont);
}

input, textarea, select {
    font: var(--inputFont);
}

code, pre {
    font: var(--sourceCodeFont);
}

ul {
    padding-left: 20px;
    list-style-type: disc;
}

/* --------------------------------------------------------------------------
   CLASES UTILITARIAS PARA FUENTES
   -------------------------------------------------------------------------- */
.font-sohne {
    font-family: var(--fontFamily);
}

.font-code {
    font-family: var(--codeFontFamily);
}

.font-weight-light {
    font-weight: var(--fontWeightLight);
}

.font-weight-normal {
    font-weight: var(--fontWeightNormal);
}

.font-weight-semibold {
    font-weight: var(--fontWeightSemibold);
}

.font-weight-bold {
    font-weight: var(--fontWeightBold);
}

/* --------------------------------------------------------------------------
   NAVBAR ESTILOS
   -------------------------------------------------------------------------- */

.navbar-custom {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    padding: 0.75rem 0;
}

.navbar-custom.scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff !important;
    transition: color 0.2s ease;
}

.navbar-custom.scrolled .navbar-brand {
    color: #0A2540 !important;
}

.navbar-custom.scrolled .navbar-nav .nav-link {
    color: #425466 !important;
}

.navbar-custom.scrolled .navbar-nav .nav-link:hover {
    color: #0A2540 !important;
    background: rgba(99, 91, 255, 0.08);
}

.navbar-brand:hover {
    color: #635BFF !important;
}

.navbar-nav .nav-link {
    color: #0A2540 !important;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem !important;
    border-radius: 6px;
    transition: all 0.2s ease;
    position: relative;
    margin: 0 0.25rem;
}

.navbar-nav .nav-link:hover {
    color: #0A2540 !important;
    background: rgba(255, 255, 255, 0.15);
}

.navbar-nav .nav-link.active {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
}

.navbar-nav .nav-link.dropdown-toggle::after {
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    transition: transform 0.2s ease;
}

.navbar-nav .nav-link.dropdown-toggle:hover::after {
    transform: rotate(180deg);
}

.btn-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 25px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    background-color: #ffffff;
    color: #0A2540;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.btn-login:hover .HoverArrow {
    transform: translateX(4px);
}

.HoverArrow {
    transition: transform 0.3s ease;
    stroke-width: 1.5;
}

.HoverArrow__linePath {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-login:hover .HoverArrow__linePath {
    opacity: 1;
}

.btn-contact {
    background: linear-gradient(135deg, #635BFF 0%, #4F46E5 100%);
    color: white;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(99, 91, 255, 0.2);
}

.btn-contact:hover {
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 91, 255, 0.3);
}

.navbar-toggler {
    border: none;
    padding: 0.5rem;
    outline: none !important;
    box-shadow: none !important;
}

.navbar-toggler span {
    display: block;
    width: 20px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    margin: 4px 0;
    transition: all 0.3s ease;
}

.navbar-custom.scrolled .navbar-toggler span {
    background: #425466;
}

.dropdown-menu {
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-top: 0.5rem;
}

.dropdown-item {
    padding: 0.75rem 1.5rem;
    font-weight: 400;
    color: #425466;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background: rgba(99, 91, 255, 0.08);
    color: #0A2540;
}

/* --------------------------------------------------------------------------
   GRADIENTE HERO
   -------------------------------------------------------------------------- */
.HomepageHeroGradient {
    --gradientColorZero: #1e3a8a;
    --gradientColorOne: #3b82f6;
    --gradientColorTwo: #06b6d4;
    --gradientColorThree: #0ea5e9;
    --gradientColorZeroTransparent: rgba(30, 58, 138, 0);
    --gradientColorOneTransparent: rgba(59, 130, 246, 0);
    --gradientColorTwoTransparent: rgba(6, 182, 212, 0);
    --gradientColorThreeTransparent: rgba(14, 165, 233, 0);
    --gradientAngle: var(--angleStrong);
    --gradientHeight: calc(100% + var(--sectionPaddingTop) + var(--transformOriginX) * var(--sectionAngleSin));
    --offsetX: var(--gutterWidth);
    --sectionAngleSin: var(--angleStrongSin);
    
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    transform-origin: var(--transformOriginX) 100%;
    transform: skewY(var(--gradientAngle));
    overflow: hidden;
    border: none;
    z-index: 1;
}

.Gradient {
    background: linear-gradient(
        135deg,
        var(--gradientColorZero) 0%,
        var(--gradientColorOne) 25%,
        var(--gradientColorTwo) 50%,
        var(--gradientColorThree) 75%,
        var(--gradientColorZero) 100%
    );
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
}

.Gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg,
        var(--gradientColorZeroTransparent) 0%,
        var(--gradientColorOne) 25%,
        var(--gradientColorTwoTransparent) 50%,
        var(--gradientColorThree) 75%,
        var(--gradientColorZeroTransparent) 100%
    );
    background-size: 300% 300%;
    animation: gradientShift 12s ease infinite reverse;
    opacity: 0.8;
}

.Gradient::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 70%
    );
    animation: pulse 4s ease-in-out infinite alternate;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes pulse {
    0% {
        opacity: 0.3;
        transform: scale(1);
    }
    100% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

/* --------------------------------------------------------------------------
   HERO SECTION
   -------------------------------------------------------------------------- */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 120px;
    padding-bottom: 80px;
    overflow: visible;
}

.hero-title {
    font-size: var(--heroTitleSize);
    font-weight: 700;
    line-height: 1.1;
    color: #333;
    margin-bottom: 2rem;
}

.hero-subtitle {
    font-size: var(--heroSubtitleSize);
    line-height: 1.6;
    color: #555;
    margin-bottom: 3rem;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.btn-primary-hero {
    background: #0A2540;
    color: #ffffff;
    border: none;
    border-radius: 100px;
    padding: 8px 24px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(10, 37, 64, 0.3);
}

.btn-primary-hero.light {
    background: #ffffff;
    color: #0A2540;
}

.btn-primary-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(10, 37, 64, 0.4);
    text-decoration: none;
}

.btn-cta {
    background: #0A2540;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 5px 24px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(10, 37, 64, 0.3);
}

.btn-cta.light {
    background: #fff;
    color: #0A2540;
}



.btn-secondary-hero {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-secondary-hero:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

.hero-arrow {
    transition: transform 0.3s ease;
    stroke-width: 2;
}

.btn-primary-hero:hover .hero-arrow,
.btn-secondary-hero:hover .hero-arrow,
.btn-cta:hover .hero-arrow {
    transform: translateX(3px);
}

.hero-dashboard {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    margin-left: 2rem;
}

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #E6EBF1;
}

.dashboard-company {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #0A2540;
}

.dashboard-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.metric-card {
    background: #F8F9FA;
    padding: 1.5rem;
    border-radius: 12px;
    border-left: 4px solid #3b82f6;
}

.metric-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6B7280;
    margin-bottom: 0.5rem;
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: #0A2540;
    margin-bottom: 0.25rem;
}

.metric-change {
    font-size: 0.875rem;
    color: #10B981;
    font-weight: 500;
}

.dashboard-chart {
    height: 120px;
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
}

.chart-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: rgba(255, 255, 255, 0.2);
    clip-path: polygon(0% 100%, 0% 60%, 20% 45%, 40% 30%, 60% 50%, 80% 25%, 100% 15%, 100% 100%);
}

.email-input-section {
    display: flex;
    gap: 0.75rem;
    margin-top: 2rem;
}

.email-input {
    flex: 1;
    padding: 0.875rem 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 1rem;
    backdrop-filter: blur(10px);
}

.email-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.email-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.15);
}

/* --------------------------------------------------------------------------
   HERO IMAGE STYLES
   -------------------------------------------------------------------------- */
.hero-img {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-img .single-img {
    width: 100%;
    max-width: 500px;
}

.hero-img .single-img img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.hero-img .single-img img:hover {
    transform: translateY(-5px);
}

/* --------------------------------------------------------------------------
   ADVANTAGES SECTION
   -------------------------------------------------------------------------- */
.section__background-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: none;
}

.section__background {
    position: relative;
    height: 100%;
    max-height: none;
    width: 100%;
    top: 0;
    left: 0;
    transform-origin: 100% 0;
    transform: skewY(-3deg);
    background: #0a2540;
    overflow: hidden;
}


.bg-blue-dark{
        background: #0a2540;
}
.section__bottom-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: #0a2540;
    z-index: -1;
}

.section__container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.section__layout-container {
    width: 100%;
    max-width: 1080px;
    margin: 0 16px;
}

/* .section__layout {
    padding: 0 0 
             calc(calc(calc(100vw - 0px) * 0.106) - 0.106 * calc(calc(100vw - 0px) / 2 - 1080px / 2) + calc(128 * 1px));
} */

.section__layout--small {
    padding: 128px 0;
}

.copy__body {
    padding: 0 var(--bodyPaddingRight) 0 var(--bodyPaddingLeft);
    font-size: var(--bodyTextSize);
    color: #adbdcc;
    font-weight: 200;
}

.copy__title {
    position: relative;
    font: 600 var(--cardTitleSize) / 1.263157895 "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    color: white;
    letter-spacing: -0.2px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-bottom: 12px;
}

.copy__title--main {
    position: relative;
    font: 500 var(--sectionTitleSize) / 1.263157895 "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    color: #0a2540;
    letter-spacing: -0.2px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.advantage-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 12px;
    height: 48px;
}

.advantage-icon svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease, filter 0.3s ease;
}

.advantage-icon svg:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.advantage-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #091e34;
    border-radius: 12px;
    padding: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 150px;
}

.advantage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.advantage-card--light {
    background: #F8F9FA;
    border-top: 4px solid #3b82f6;
    border: none;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.advantage-card--light:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.advantage-title {
    font: 600 var(--cardTitleSize) / 1.3 "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    color: #0a2540;
    margin-bottom: 12px;
}

.advantage-description {
    font-size: var(--bodyTextSize);
    color: #425466;
    line-height: 1.6;
    margin-bottom: 0;
}

.section-subtitle {
    color: #00d4ff;
    font-size: var(--sectionSubtitleSize);
    margin-bottom: 24px;
    font-weight: 500;
}

.section-description {
    color: #adbdcc;
    font-size: var(--bodyTextSize);
    line-height: 1.6;
    margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   PRICING CARDS
   -------------------------------------------------------------------------- */

/* Botones de pricing responsive */
.pricing-button-desktop {
    display: block;
}

.pricing-button-mobile {
    display: none;
}

.card {
    --cardBleedRightSmall: calc(var(--columnWidth) * -0.5);
    --cardBleedRightNormal: calc(var(--columnWidth) * -1);
    --cardBleedBottomNormal: 16px;
    --cardShadow: none;
    --cardShadowMargin: 0;
    --cardMinHeight: 72px;
    position: relative;
    min-width: 100px;
    min-height: var(--cardMinHeight);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(50, 50, 93, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    height: 100%;
}

.hero-card {
    --heroCardCopyAlign: center;
    height: 100%;
}

.hero-card__container {
    display: grid;
    height: 100%;
    min-height: 300px;
}

.hero-card__graphic {
    --graphicSpacing: 4px;
    display: grid;
    gap: var(--graphicSpacing);
    justify-items: stretch;
    align-items: stretch;
    padding: 16px;
}

.hero-pricing-subcard {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
    padding: 12px var(--columnPaddingNormal);
    border-radius: 4px;
    background: var(--subcardBackground);
    color: var(--textColor);
}

.hero-pricing-subcard__container {
    display: grid;
    justify-items: center;
    row-gap: 4px;
    text-align: center;
}

.hero-pricing-subcard__title {
    --fontSize: calc(var(--cardTitleSize) * 1.6);
    --lineHeight: 1.384615385;
    font-family: var(--fontFamily);
    font-weight: var(--fontWeightBold);
    font-size: var(--fontSize);
    line-height: var(--lineHeight);
    color: var(--titleColor);
    margin: 0;
}

.hero-pricing-subcard__suffix {
    font-size: var(--smallTextSize);
    font-weight: var(--fontWeightNormal);
    color: var(--textColor);
}

.hero-pricing-subcard__suffix p {
    margin: 0;
    font-size: var(--smallTextSize);
    font-weight: var(--fontWeightNormal);
}

/* Estilos para la tarjeta gris */
.card--dark {
    background: #f6f9fc;
    color: #333;
}

.card--dark .hero-card__title {
    color: #0a2540;
}

.card--dark .copy-body {
    color: #425466;
}

.card--dark ul li {
    color: #425466;
}

.card--dark .hero-pricing-subcard {
    background: #ffffff;
    color: #333;
    border: 1px solid #e1e8ed;
}

.card--dark .hero-pricing-subcard__title {
    color: #0a2540;
}

.card--dark .hero-pricing-subcard__suffix {
    color: #425466;
}

.card--dark .hero-pricing-subcard__suffix p {
    color: #425466;
}

/* --------------------------------------------------------------------------
   RESPONSIVE DESIGN MEJORADO
   -------------------------------------------------------------------------- */

/* Extra Large devices (1400px y más) */
@media (min-width: 1400px) {
    .container {
        max-width: 1200px;
    }
}

/* Large devices (992px - 1199px) */
@media (max-width: 1199px) {
    .hero-section {
        padding-top: 100px;
        min-height: 90vh;
    }
    
    /* .section__layout {
        padding: calc(var(--paddingTop) * 0.8) 0 calc(var(--paddingBottom) * 0.8);
    } */
}

/* Medium devices - Tablets (768px - 991px) */
@media (max-width: 991px) {
    /* Navbar adjustments */
    .navbar-nav {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 0 !important;
        margin: 0;
        font-size: 1rem;
    }

    .navbar-actions {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    /* Hero section adjustments */
    .hero-section {
        text-align: center;
        padding-top: 80px;
        min-height: 80vh;
    }
    
    .hero-buttons {
        justify-content: center;
        margin-top: 2rem;
    }
    
    .hero-img {
        margin-top: 3rem;
    }
    
    /* Dashboard adjustments */
    .dashboard-metrics {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Advantages section */
    .advantage-card {
        text-align: center;
        min-height: 120px;
        padding: 20px;
    }
    
    /* Pricing cards adjustments */
    .hero-card__container {
        flex-direction: column !important;
    }
    
    .hero-card__graphic {
        padding: 12px;
        gap: 8px;
    }
    
    .hero-pricing-subcard {
        min-height: 80px;
        padding: 12px;
    }
    
    /* Cambiar botones en móvil */
    .pricing-button-desktop {
        display: none;
    }
    
    .pricing-button-mobile {
        display: block;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        background: rgba(255, 255, 255, 0.02);
    }
    
    .card--dark .pricing-button-mobile {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(0, 0, 0, 0.02);
    }
}

/* Small devices - Móviles grandes (576px - 767px) */
@media (max-width: 767px) {
    /* Hero section móvil */
    .hero-section {
        padding-top: 60px;
        padding-bottom: 40px;
        min-height: 70vh;
    }
    
    .hero-title {
        margin-bottom: 1.5rem;
        line-height: 1.2;
    }
    
    .hero-subtitle {
        margin-bottom: 2rem;
        line-height: 1.5;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
        margin-top: 1.5rem;
    }
    
    .btn-primary-hero,
    .btn-secondary-hero,
    .btn-cta {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 0.95rem;
    }
    
    /* Email input responsive */
    .email-input-section {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .email-input {
        width: 100%;
        padding: 12px 16px;
        font-size: 0.95rem;
    }
    
    /* Advantages section móvil */
    .section__container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .advantage-card {
        padding: 16px;
        margin-bottom: 1rem;
        min-height: 100px;
    }
    
    .advantage-icon {
        justify-content: center;
        margin-bottom: 8px;
    }
    
    /* Pricing cards móvil */
    .hero-card {
        margin-bottom: 2rem;
    }
    
    .hero-card__copy {
        padding: 1.5rem !important;
    }
    
    .hero-pricing-subcard {
        min-height: 60px;
        padding: 8px 12px;
    }
    
    /* Mejorar spacing en pricing cards móvil */
    .pricing-content {
        flex-grow: 1;
    }
    
    .pricing-button-mobile .btn-primary-hero {
        padding: 12px 24px;
        font-size: 0.95rem;
    }
    
    /* Text adjustments móvil */
    .section-subtitle {
        margin-bottom: 16px;
        text-align: center;
    }
    
    .section-description {
        text-align: center;
        margin-bottom: 12px;
    }
    
    /* Navbar brand móvil */
    .navbar-brand {
        font-size: 1.25rem;
    }
}

/* Extra small devices - Móviles pequeños (max 575px) */
@media (max-width: 575px) {
    /* Contenedor principal */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Hero section móvil pequeño */
    .hero-section {
        padding-top: 40px;
        padding-bottom: 30px;
        min-height: 60vh;
    }
    
    .hero-title {
        margin-bottom: 1rem;
        line-height: 1.3;
        word-break: break-word;
    }
    
    .hero-subtitle {
        margin-bottom: 1.5rem;
        line-height: 1.4;
    }
    
    /* Botones más pequeños */
    .btn-primary-hero,
    .btn-secondary-hero,
    .btn-cta {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    /* Advantages cards móvil pequeño */
    .advantage-card {
        padding: 12px;
        margin-bottom: 0.75rem;
        min-height: 80px;
    }
    
    .advantage-card .copy__title {
        font-size: calc(var(--cardTitleSize) * 0.9);
        margin-bottom: 8px;
    }
    
    .advantage-card .copy__body {
        font-size: calc(var(--bodyTextSize) * 0.9);
        line-height: 1.4;
    }
    
    /* Pricing cards móvil pequeño */
    .hero-card__copy {
        padding: 1rem !important;
    }
    
    .hero-pricing-subcard {
        min-height: 50px;
        padding: 6px 8px;
    }
    
    .hero-pricing-subcard__title {
        --fontSize: calc(var(--cardTitleSize) * 1.2);
    }
    
    /* Section spacing móvil pequeño */
    .section__layout {
        /* padding: calc(var(--paddingTop) * 0.4) 0 calc(var(--paddingBottom) * 0.4); */
    }
    
    /* Navbar móvil pequeño */
    .navbar-brand {
        font-size: 1.1rem;
    }
    
    .navbar-nav .nav-link {
        font-size: 0.95rem;
        padding: 0.5rem 0 !important;
    }
    
    /* Footer móvil pequeño */
    .footer-upper {
        padding: 2rem 0 1rem !important;
    }
    
    .footer-bottom {
        padding: 1rem 0 !important;
    }
    
    .footer-legal ul {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Landscape móviles */
@media (max-height: 600px) and (orientation: landscape) {
    .hero-section {
        min-height: 100vh;
        padding-top: 80px;
        padding-bottom: 20px;
    }
    
    .hero-title {
        font-size: calc(var(--heroTitleSize) * 0.8);
        margin-bottom: 1rem;
    }
    
    .hero-subtitle {
        font-size: calc(var(--heroSubtitleSize) * 0.9);
        margin-bottom: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   UTILIDADES RESPONSIVE ADICIONALES
   -------------------------------------------------------------------------- */

/* Mejoras de legibilidad en móviles */
@media (max-width: 767px) {
    /* Mejor espaciado para texto */
    p, .copy__body, .section-description {
        line-height: 1.6;
        margin-bottom: 1rem;
    }
    
    /* Títulos más legibles */
    h1, h2, h3, h4, h5, h6 {
        line-height: 1.3;
        margin-bottom: 0.75rem;
    }
    
    /* Mejor contrast para texto sobre fondos */
    .text-white {
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
    
    /* Mejores márgenes entre secciones */
    .row {
        margin-bottom: 1rem;
    }
    
    .row:last-child {
        margin-bottom: 0;
    }
    
    /* Cards más compactas en móvil */
    .card {
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

/* Mejoras para accesibilidad táctil */
@media (max-width: 767px) {
    /* Botones más grandes para tocar */
    .btn-primary-hero,
    .btn-secondary-hero,
    .btn-cta {
        min-height: 44px;
        touch-action: manipulation;
    }
    
    /* Enlaces más grandes */
    .navbar-nav .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Input más accesible */
    .email-input {
        min-height: 44px;
    }
}