* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Fuente Montserrat para toda la página */
body {
    font-family: 'Montserrat', Arial, sans-serif;
    line-height: 1.6;
    color: #000;
    background-color: #fff;
    padding-top: 0px;
    transition: padding-top 0.3s ease;
}

/* Cuando la top-bar está oculta, reduce padding */
body.top-bar-hidden-padding {
    padding-top: 100px;
}

/* Clases opcionales para Montserrat */
.montserrat-regular {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.montserrat-bold {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

/* Top Bar fija */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #800000;
    color: #fff;
    z-index: 1100;
    padding: 0.5rem 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Clase para ocultar la top-bar (al scroll) */
.top-bar.hide {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Container de la top-bar */
.top-bar .container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Contact info y social icons en top bar */
.top-bar .contact-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.top-bar .contact-link {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.top-bar .contact-link:hover {
    color: #ff0000;
}

.top-bar .contact-icon {
    width: 16px;
    height: 16px;
    filter: invert(1);
}

.top-bar .social-icons {
    display: flex;
    gap: 0.5rem;
}

.top-bar .social-icon {
    width: 24px;
    height: 24px;
    filter: invert(1);
}


/* Header fijo (siempre transparente) */
.header {
    position: fixed;
    top: 35px;
    left: 0;
    width: 100%;
    background-color: transparent;
    z-index: 1099;
    padding: 1rem 0;
    box-shadow: none;
    transition: padding 0.3s ease, top 0.3s ease;
}

/* Header cuando la top-bar está oculta */
.header.top-bar-hidden {
    top: 0;
}

/* Efecto shrink en header */
.header.shrink {
    padding: 0.5rem 0;
    background-color: #36343468; /* Fondo gris transparente */
}

.header .logo img {
    height: 100px;
    transition: height 0.3s ease;
}

.header.shrink .logo img {
    height: 60px;
}

/* Container del header (flexbox para distribución) */
.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Orden para desktop */
.nav {
    order: 1;
}

.logo {
    order: 2;
}

.nav-contact {
    order: 3;
}

.hamburger {
    order: 4;
}

/* Navegación izquierda */
.nav {
    flex: 1;
}

.nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0 20px 0 0;
    padding: 0;
}

.nav a {
    color: #fdfdfd;
    text-decoration: none;
    padding: 0.5rem;
    transition: color 0.3s;
    font-size: 1.2rem;
    font-weight: 500;
}

.nav a:hover {
    color: #ff0000;
}

/* Logo en el centro (sin posición absoluta) */
.logo {
    flex: 0 0 auto;
    text-align: center;
}

/* Navegación derecha (Contacto) */
.nav-contact {
    flex: 1;
    text-align: right;
}

.nav-contact ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    margin: 0 10px 0 20px;
    padding: 0;
    justify-content: flex-end;
}

.nav-contact a {
    color: #000;
    text-decoration: none;
    padding: 0.5rem;
    transition: color 0.3s;
    font-size: 1rem;
    font-weight: 500;
}

.nav-contact a:hover {
    color: #ff0000;
}

/* Botón hamburguesa (fuera del media query) */
.hamburger {
    display: none !important; /* Oculto por defecto (solo en móviles), forzado con !important */
    background-color: rgba(255, 255, 255, 0.2); /* Fondo semi-transparente para visibilidad */
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1.2rem;
    color: #fff; /* Blanco para contraste sobre video/header */
    font-weight: bold;
    transition: color 0.3s, background-color 0.3s;
    border-radius: 5px; /* Bordes redondeados para mejor apariencia */
}
.hamburger:hover {
    background-color: rgba(255, 255, 255, 0.4); /* Más opaco al hover */
    color: #ff0000;
}
/* Botón Contacto */
.contact-button {
    background-color: #b91919;
    color: #fff !important;
    padding: 0.7rem 1rem;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.3s;
}

.contact-button:hover {
    background-color: #7b0505;
    transform: scale(1.05);
}

/* Menú lateral avanzado */
.mobile-menus-wrapper {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100vh;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    transition: right 0.3s ease;
    z-index: 1200;  /* Aumentado para estar por encima del header */
    display: flex;
    flex-direction: column;
}

.mobile-menus-wrapper.active {
    right: 0;
}

/* Header del menú */
.menus-header {
    padding: 1.5rem 1.5rem 0;
    display: flex;
    justify-content: flex-end;
}

.icon-close-menus {
    width: 24px;
    height: 24px;
    cursor: pointer;
    fill: #000;
}

/* Contenido del menú */
.menus-content {
    flex: 1;
    overflow-y: auto;
}

.menus-content-main {
    padding: 0;
}

.menu-item {
    display: block;
    padding: 1rem 1.5rem;
    color: #000;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: background 0.3s;
    border-bottom: 1px solid #eee;  /* Línea divisoria para claridad */
}

.menu-item:hover {
    background-color: #f0f0f0;
}

/* Footer del menú */
.localization-wrapper {
    padding: 1rem 1.5rem;
    border-top: 1px solid #eee;
}

.localization .wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.localization-icon {
    margin-right: 0.5rem;
}

.svg-icon {
    width: 20px;
    height: 20px;
    fill: #000;
}

/* Media query para móviles muy pequeños */
@media (max-width: 480px) {
    .mobile-menus-wrapper {
        width: 280px;  /* Un poco más estrecho en pantallas pequeñas */
    }
    .menu-item {
        padding: 1.2rem 1.5rem;  /* Un poco más de espacio para tocar */
        font-size: 0.95rem;  /* Ligeramente más pequeño */
    }
}

/* Hero con Video */
.hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
}
/* Imagen en lugar de video en hero */
.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 75% center;
    z-index: -1;
}
.hero-image-ecomance {
    position: static;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* Cambia de 100% center a center para centrar */
    z-index: 0;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 75% center;
    z-index: -1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0000002b;
    color: #fff;
    text-align: center;
}

.hero h2 {
    font-size: 3.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .hero h2 {
        font-size: 2rem;  /* Más pequeño para móviles */
        margin: 2rem;  /* También ajusta el margen si es necesario */
    }
    .container p {
    font-size: 1rem;  /* Más pequeño para móviles */
    margin: 2rem;  /* También ajusta el margen si es necesario */
    }
}

.hero h3 {
    font-size: 2.2rem;
    margin: 22rem;
    color: #ffffff;
}

@media (max-width: 768px) {
    .hero h3 {
        font-size: 1.7rem;  /* Más pequeño para móviles */
        margin: 2rem;  /* También ajusta el margen si es necesario */
    }
}
.cta-button {
    display: inline-block;
    background-color: #cc0000;
    color: #fff;
    padding: 0.8rem 0.8rem;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}

.cta-button:hover {
    background-color: #cc0000;
}

/* Estilos para el iframe de YouTube en la sección hero (consolidado) */
.hero-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta sin distorsión */
    object-position: 40% center; /* Extendido y centrado */
    z-index: -1; /* Detrás del overlay */
    border: none; /* Sin bordes */
    transform: scale(1.15); /* Extensión visual */
    transform-origin: center; /* Escala desde el centro */
    opacity: 0.85; /* Opacidad sutil */
    transition: opacity 0.3s ease; /* Suaviza cambios */
    pointer-events: none; /* Solo imagen, sin interacciones */
}

/* Media query para móviles (estiramiento para ocupar toda la pantalla) */
@media (max-width: 768px) {
    .hero-iframe {
        object-position: center; /* Centrado para equilibrio */
        transform: scale(1.25); /* Aumenta a 1.25 para estirar y ocupar más pantalla; ajusta a 1.3 si quieres aún más */
        opacity: 0.9; /* Menos opacidad en móviles */
    }
}

/* Estilos para el iframe en index.html (consolidado, replicando la sección anterior) */
.hero-iframe-index {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% center; /* Extendido y centrado */
    z-index: -1;
    border: none;
    transform: scale(1.15); /* Extensión visual */
    transform-origin: center;
    opacity: 0.85; /* Opacidad sutil */
    transition: opacity 0.3s ease;
    pointer-events: none; /* Solo imagen, sin interacciones */
}

/* Media query para móviles (estiramiento completo para ocupar toda la pantalla) */
@media (max-width: 768px) {
    .hero-iframe {
        object-fit: fill; /* Cambia a fill para distorsionar y llenar completamente (altura y ancho) */
        object-position: center; /* Centrado */
        transform: scale(2); /* Aumenta segun tamaño de pantalla */
        opacity: 0.9; /* Menos opacidad en móviles */
    }
}

/* Media query para móviles (estiramiento completo para ocupar toda la pantalla) */
@media (max-width: 768px) {
    .hero-iframe-index {
        object-fit: fill; /* Cambia a fill para distorsionar y llenar completamente */
        object-position: center;
        transform: scale(3.9); /* Aumenta a 1.5 para estirar mucho más; ajusta a 1.6 si quieres aún más, o baja a 1.4 si es demasiado */
        opacity: 0.9; /* Menos opacidad en móviles */
    }
}

/* Media query para móviles (estiramiento completo con video local de alta calidad) */
@media (max-width: 768px) {
    .hero-video {
        object-fit: fill; /* Llena completamente (altura y ancho) */
        object-position: center; /* Centrado */
        transform: scale(1.1); /* Estira mucho; ajusta entre 1.5-2.0 para balancear */
        transform-origin: center;
        opacity: 0.85; /* Menos opacidad en móviles */
    }
}

/* Estilos para el contenedor del iframe en la sección de profesionales */
.hero-video-profesionales {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Detrás del overlay */
    overflow: hidden; /* Corta cualquier parte del iframe que sobresalga para evitar espacios */
}

/* Estilos para el overlay en la sección de profesionales */
.hero-overlay-profesionales {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3); /* Overlay sutil (ajusta opacidad si es necesario) */
    color: #fff;
    text-align: center;
    z-index: 1; /* Por encima del video */
}

/* Media query para móviles (ajustes específicos para profesionales) */
@media (max-width: 768px) {
    .hero-video-profesionales {
        opacity: 1; /* Opacidad completa para mejor visibilidad */
    }
    
    .hero-overlay-profesionales {
        padding: 1rem; /* Espacio interno en móviles para el texto */
    }
    
    /* Fuerza escalado mayor en móviles para que el iframe llene toda la pantalla  */
    .hero-video-profesionales iframe {
        transform: scale(3.9) !important; 
        transform-origin: center; 
    }
}



/* Sección Suministrar */
.tcl-text-on-media-v2 {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: flex-start; /* Cambia de center a flex-start para alinear arriba */
    justify-content: center;
    overflow: hidden;
}

.tcl-text-on-media-v2__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.tcl-image {
    width: 100%;
    height: 100%;
    position: relative;
}

.tcl-image--with-end-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.009));
    pointer-events: none;
    z-index: 1;
}

.tcl-image--with-end-gradient::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.tcl-image__picture {
    width: 100%;
    height: 100%;
}

.tcl-image__asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.tcl-text-on-media-v2__section-header-group {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
    padding: 0 20px;
    padding-top: 150px;
}

.tcl-section-header-group {
    max-width: 1800px;
    margin: 0 auto;
}

.tds-layout {
    display: flex;
    justify-content: center;
}

.tds-layout-main {
    max-width: 700px;
}

.tds-text--h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.tds-text-eyebrow {
    display: block;
    font-size: 1.8rem;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.gadeon-phone-only {
    display: block;
}

.tds--hideon-tablet-portrait-up {
    display: none;
}

.tds--hideon-tablet-portrait-up p {
        line-height: 1.5; /* Mejora la legibilidad */
}

.tds--hideon-tablet-portrait-up p {
    line-height: 1.5; /* Mejora la legibilidad */
}

/* Media Queries para móviles */
@media (max-width: 1199px) {
    .tds-text--h2 {
        font-size: 2rem;
    }
    
    .tds--hideon-phone-only {
        display: none;
    }
    
    .tds--hideon-tablet-portrait-up {
        display: block;
    }
    
    .tds--hideon-tablet-portrait-up p {
        font-size: 1.2rem !important; /* Ajusta a 1.4rem o 1.5rem si quieres más grande */
        line-height: 1.5;
    }
}

/* Media Queries para móviles */
@media (max-width: 1199px) {
    .tds-text--h2 {
        font-size: 2rem;
    }
    
    .tds--hideon-phone-only {
        display: none;
    }
    
    .tds--hideon-tablet-portrait-up {
        display: block;
    }
}

/* Diferencias */
.diferencias {
    padding: 2rem 0;
    background-color: #f9f9f9;
    text-align: center;
}

.diferencias-images {
    display: flex;
    justify-content: center;
    gap: 4rem;
    margin-top: 2rem;
}

.diferencias-images img {
    width: 400px;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Megawatios */
.megawatios {
    padding: 3rem 0;
    background-color: #fff;
    text-align: center;
}

/* Estilos para instaladores */

.instaladores h2 {
    text-align: center; /* Centra el título */
    margin-bottom: 2.5rem; /* Espacio debajo */
    margin-top: 3rem;
    font-size: 2rem;
    color: var(--text-color);
}

.instaladores h3 {
    text-align: center; /* Centra el título */
    margin-bottom: 2rem; /* Espacio debajo */
    font-size: 1.8rem;
    color: var(--text-color);
}

.logos-grid {
    display: flex; /* Cambia a Flexbox para fila horizontal */
    justify-content: center; /* Centra los items */
    gap: 2rem; /* Espacio entre items */
    flex-wrap: wrap; /* Permite apilar en móviles si es necesario */
    align-items: center; /* Alinea verticalmente */
}

.instalador-item {
    text-align: center;
    flex: 0 0 auto; /* Evita que se estiren */
    max-width: 150px; /* Limita ancho para consistencia */
}

.instalador-item img {
    width: 80px; /* Tamaño fijo pequeño */
    height: 80px; /* Cuadrado para uniformidad */
    object-fit: cover; /* Ajusta la imagen sin deformar */
    border-radius: 10px; /* Opcional: bordes redondeados */
    box-shadow: var(--shadow); /* Usa variable si la tienes */
    transition: transform 0.3s;
}

.instalador-item:hover img {
    transform: scale(1.1); /* Efecto hover sutil */
}

.instalador-item h3 {
    margin-top: 0.5rem;
    font-size: 1rem; /* Tamaño de letra consistente */
    color: var(--text-color);
    font-weight: 600;
}

.instalador-item a {
    text-decoration: none;
    color: inherit;
}

.instalador-item a:hover h3 {
    color: var(--primary-red);
}

/* Responsive: en móviles, apila verticalmente */
@media (max-width: 768px) {
    .logos-grid {
        flex-direction: column; /* Apila en columna */
        gap: 1rem;
    }
    
    .instalador-item {
        max-width: 100%; /* Ancho completo en móviles */
    }
}

/* Variables para consistencia importante */
:root {
    --primary-red: #b91919;
    --dark-red: #7b0505;
    --text-color: #000;
    --bg-color: #fff;
    --border-color: #ccc;
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/* Contenedor principal del formulario */
.form--wrap {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Montserrat', Arial, sans-serif;
}

/* Seccion contacto */
.form--step {
    margin-bottom: 2rem;
}

.form--step_title {
    margin-bottom: 1rem;
}

.form--heading_rich-2 p {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: #000;
}

.form--paragraph_rich p,
.form--paragraph_rich-2 p {
    font-size: 1rem;
    line-height: 1.5;
    color: #666;
    margin: 0;
}

/* Spacers */
.form--spacer-small {
    height: 0.5rem;
}

.form--spacer-medium {
    height: 1rem;
}

/* Checkboxes con íconos */
.form--checkbox-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.form--checkbox-legend {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #000;
}

.form--grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.form--checkbox-button-group {
    position: relative;
}

.form--checkbox-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border: 2px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
    background-color: #fff;
}

.form--checkbox-button:hover {
    border-color: #b91919;
}

.form--checkbox-button-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.form--checkbox-button-input:checked + .form--checkbox-button-icon-wrap + .form--checkbox-button-label {
    color: #b91919;
    font-weight: 700;
}

.form--checkbox-button-input:checked ~ .form--checkbox-button-icon-wrap {
    border-color: #b91919;
}

.form--checkbox-button-icon-wrap {
    width: 60px;
    height: 60px;
    border: 2px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    transition: border-color 0.3s;
}

.form--checkbox-button-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.form--checkbox-button-label {
    font-size: 0.9rem;
    text-align: center;
    color: #000;
    transition: color 0.3s;
}

.form--sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Fondo de imagen para la sección de contacto */
.registro {
    background-image: url('Imagenes/casamontaña.png'); /* Cambia por tu imagen */
    background-size: cover; /* Cubre toda la sección */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* No repite */
    background-attachment: fixed; /* Opcional: fija al scroll */
    padding: 2rem 0; /* Asegura espacio interno */
    color: #fff; /* Texto blanco si la imagen es oscura */
}
/* Inputs con labels flotantes */
.form--form_row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form--form_row.form--is-autofit {
    flex-wrap: wrap;
}

.form--form_row.form--is-3cols {
    grid-template-columns: 2fr 1fr 1fr;
}

.form--input-group {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.form--form_main_field_input {
    width: 100%;
    padding: 1.6rem 0.5rem 0.5rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    font-family: 'Montserrat', Arial, sans-serif;
    transition: border-color 0.3s, box-shadow 0.3s;
    background-color: #fff;
}

.form--form_main_field_input:focus {
    outline: none;
    border-color: #b91919;
    box-shadow: 0 0 5px rgba(185, 25, 25, 0.3);
}

.form--form_main_field_input:valid + .form--float-label,
.form--form_main_field_input:focus + .form--float-label {
    top: 0.5rem;
    font-size: 0.8rem;
    color: #b91919;
}

.form--float-label {
    position: absolute;
    top: 1rem;
    left: 0.5rem;
    font-size: 1rem;
    color: #666;
    pointer-events: none;
    transition: all 0.3s;
    background-color: #fff;
    padding: 0 0.2rem;
}

.form--form_main_field_input:not(:placeholder-shown) + .form--float-label {
    top: 0.5rem;
    font-size: 0.8rem;
    color: #b91919;
}

.form--is-textarea {
    height: 100px;
    resize: vertical;
}

/* Checkboxes de marketing y privacidad */
.form--form_checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
    width: 100%;
}

/* Asegura que el input nativo esté completamente oculto */
.form--form_checkbox-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    display: none; /* Agregado para forzar ocultamiento */
}

/* El checkbox custom debe ser el único visible */
.form--form_checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 3px;
    background-color: #fff;
    position: relative;
    cursor: pointer;
    flex-shrink: 0; /* Evita que se encoja */
}

.form--form_checkbox-input:checked + .form--form_checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #b91919;
    font-weight: bold;
    font-size: 14px;
}
.form--form_checkbox-label {
    flex: 1; /* Hace que el texto ocupe el espacio restante */
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
}
.form--form_checkbox-label p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

/* Errores */
.form--form_error {
    display: none;
    color: #d9534f;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.form--form_main_field_input:invalid:not(:focus) + .form--float-label + .form--form_error {
    display: block;
}

/* Botón de envío */
.form--button_main {
    background-color: #b91919;
    color: #fff;
    border: none;
    padding: 1rem 2rem;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Montserrat', Arial, sans-serif;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    width: 100%;
}

.form--button_main:hover {
    background-color: #7b0505;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .form--wrap {
        padding: 1rem;
    }
    
    .form--grid-layout {
        grid-template-columns: 1fr;
    }
    
    .form--form_row {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .form--form_row.form--is-3cols {
        display: flex;
        flex-direction: column;
    }
    
    .form--input-group {
        min-width: auto;
    }
}

/* Footer */
.footer {
    background-color: #000;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}

.footer-nav {
    margin: 1rem 0;
}

.footer-nav a {
    color: #fff;
    text-decoration: none;
    margin: 0 0.5rem;
}

.footer .social-icons {
    margin-top: 1rem;
}

/* Social Icons */
.social-icons {
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.social-link {
    display: inline-block;
    transition: transform 0.3s;
}

.social-link:hover {
    transform: scale(1.1);
}

.social-icon {
    width: 24px;
    height: 24px;
    display: block;
    filter: invert(1);
}

/* Rayo eléctrico */
.lightning {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), rgba(0, 150, 255, 0.6), transparent);
    animation: lightningStrike 10s infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes lightningStrike {
    0% { left: -100%; opacity: 0; }
    10% { left: -100%; opacity: 1; } /* Aparece */
    30% { left: 100%; opacity: 1; } /* Se mueve rápido al centro */
    40% { left: 200%; opacity: 0; } /* Desaparece */
    100% { left: 200%; opacity: 0; } /* Nada hasta el próximo ciclo */
}

/* Media Queries para pantallas pequeñas (<1200px) */
@media (max-width: 1199px) {
    /* Top-bar visible inicialmente en móviles */
    .top-bar {
        display: block !important; /* Fuerza mostrar el top-bar */
        padding: 0.3rem 0; /* Reduce padding para ahorrar espacio */
    }
    
    .top-bar .container {
        padding: 0 15px; /* Reduce padding lateral en móviles */
    }
    
    .top-bar .contact-info {
        gap: 1rem; /* Reduce gap entre elementos */
    }
    
    .top-bar .social-icons {
        gap: 0.5rem;
    }
    
.top-bar .contact-link {
        font-size: 0.7rem !important; /* Reduce de 0.9rem a 0.8rem */
    }
    
    /* Reducir tamaño de íconos de contacto (teléfono, email) */
    .top-bar .contact-icon {
        width: 12px !important; /* Reduce de 14px a 12px */
        height: 12px !important;
    }
    
    /* Reducir tamaño de íconos de redes sociales */
    .top-bar .social-icon {
        width: 16px !important; /* Reduce de 20px a 18px */
        height: 16px !important;
    }
    
    /* Orden para móviles */
    .logo {
        order: 1;
    }
    
    .hamburger {
        order: 2;
        display: block !important; /* Fuerza mostrar el hamburger */
        background: red !important; /* Temporal para verlo; quítalo después */
        margin-left: auto; /* Empuja la hamburguesa a la derecha */
    }
    
    .nav, .nav-contact {
        display: none;
    }
    
    .logo {
        display: block; /* Muestra el logo en móviles */
        flex: 0 0 auto;
        text-align: left;
    }
    
    .logo img {
        height: 50px; /* Tamaño más pequeño para móviles */
    }
    
    .header .container {
        justify-content: space-between; /* Logo izquierda, hamburguesa derecha */
        align-items: center;
    }
    
    .nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 250px;
        height: 100vh;
        background-color: #fff;
        box-shadow: -2px 0 5px rgba(0,0,0,0.1);
        transition: right 0.3s ease;
        z-index: 1098;
        padding: 2rem 1rem;
        display: block;
    }
    
    .nav.active {
        right: 0;
    }
}



/* Sección Presentacion baterias */
.alternate {
    --space: 16px;
    overflow: hidden;
    position: relative;
    padding: 3rem 0;
    background-color: #000000fb; /* fondo de seccion productos */
}

@media screen and (min-width: 576px) {
    .alternate {
        --space: 24px;
    }
}

.alternate-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}

.alternate-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space);
}

.alternate-list-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: relative;
}

/* Animaciones personalizadas para presentación de baterías - Solo para .alternate */
.baterias-fade-up {
    opacity: 0;
    transform: translateY(50px); /* Empieza 50px abajo */
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.baterias-fade-up.animate {
    opacity: 1;
    transform: translateY(0); /* Aparece subiendo */
}

@media screen and (min-width: 768px) {
    .alternate-list-item {
        flex-direction: row;
        align-items: center;
    }
    
    .alternate-list-item:nth-child(even) {
        flex-direction: row-reverse;
    }
    
    .alternate-list-item:nth-child(2) .alternate-list-item__picture-wrapper {
        position: relative;
        transform: translate(-15px, -30px);
    }
    
    .alternate-list-item:nth-child(3) .alternate-list-item__picture-wrapper {
        position: relative;
        transform: translate(-50px, -50px);
    }
}

.alternate-list-item__picture {
    flex: 1;
    display: flex;
    justify-content: center;
}

.alternate-list-item__picture-wrapper {
    width: 100%;
    max-width: 500px;
    position: relative;
}

@media screen and (max-width: 767px) {
    .alternate-list-item__picture-wrapper {
        max-width: 300px;
        transform: none;
    }
}

.picture img {
    width: 100%;
    height: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.alternate-list-item__content {
    flex: 1;
    text-align: center;
    max-width: 500px;
}

@media screen and (min-width: 768px) {
    .alternate-list-item__content {
        text-align: left;
    }
    
    .alternate-list-item:nth-child(even) .alternate-list-item__content {
        text-align: right;
    }
}

.structured-text {
    color: #fff; /* Cambiado de #000 a blanco para contraste sobre negro */
}

.h4 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.mb-12 {
    margin-bottom: 0.75rem;
}

.mb-8 {
    margin-bottom: 0.5rem;
}

.mt-12 {
    margin-top: 0.75rem;
}

.body5 {
    font-size: 1rem;
    line-height: 1.5;
}

.item-wrapper {
    display: inline-block;
    margin-right: 20px;
}
.item-wrapper-2 {
    display: inline-block;
    margin-right: 0;
}
.zk-btn {
    background-color: #b91919;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.zk-btn:hover {
    background-color: #7b0505;
}

.zk-btn-filled {
    background-color: #b91919;
}

.zk-btn-round {
    border-radius: 20px;
}

.zk-btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* Media Queries */
@media (max-width: 768px) {
    .alternate-list-item {
        flex-direction: column;
    }
    
    .alternate-list-item__content {
        text-align: center;
    }
}

/* Sección Productos */
.alternate {
    --space: 16px;
    overflow: hidden;
    position: relative;
    padding: 3rem 0;
    background-color: #000000fb; /* fondo de seccion productos */
}

@media screen and (min-width: 576px) {
    .alternate {
        --space: 24px;
    }
}

.alternate-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}

.alternate-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space);
}

.alternate-list-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: relative;
}

/* Estilos para AOS (animaciones de scroll) - Solo para .alternate */
[data-aos] {
    opacity: 0; /* Empieza invisible */
    transform: translateY(50px); /* Empieza 50px abajo */
    transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-aos].aos-animate {
    opacity: 1; /* Aparece */
    transform: translateY(0); /* Sube a su posición original */
}

@media screen and (min-width: 768px) {
    .alternate-list-item {
        flex-direction: row;
        align-items: center;
    }
    
    .alternate-list-item:nth-child(even) {
        flex-direction: row-reverse;
    }
    
    .alternate-list-item:nth-child(2) .alternate-list-item__picture-wrapper {
        position: relative;
        transform: translate(-15px, -30px);
    }
    
    .alternate-list-item:nth-child(3) .alternate-list-item__picture-wrapper {
        position: relative;
        transform: translate(-50px, -50px);
    }
}

.alternate-list-item__picture {
    flex: 1;
    display: flex;
    justify-content: center;
}

.alternate-list-item__picture-wrapper {
    width: 100%;
    max-width: 500px;
    position: relative;
}

@media screen and (max-width: 767px) {
    .alternate-list-item__picture-wrapper {
        max-width: 300px;
        transform: none;
    }
}

.picture img {
    width: 100%;
    height: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.alternate-list-item__content {
    flex: 1;
    text-align: center;
    max-width: 500px;
}

@media screen and (min-width: 768px) {
    .alternate-list-item__content {
        text-align: left;
    }
    
    .alternate-list-item:nth-child(even) .alternate-list-item__content {
        text-align: right;
    }
}

.structured-text {
    color: #fff; /* Cambiado de #000 a blanco para contraste sobre negro */
}

.h4 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.mb-12 {
    margin-bottom: 0.75rem;
}

.mb-8 {
    margin-bottom: 0.5rem;
}

.mt-12 {
    margin-top: 0.75rem;
}

.body5 {
    font-size: 1rem;
    line-height: 1.5;
}

.item-wrapper {
    display: inline-block;
    margin-right: 20px;
}
.item-wrapper-2 {
    display: inline-block;
    margin-right: 0;
}
.zk-btn {
    background-color: #b91919;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.zk-btn:hover {
    background-color: #7b0505;
}

.zk-btn-filled {
    background-color: #b91919;
}

.zk-btn-round {
    border-radius: 20px;
}

.zk-btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* Media Queries */
@media (max-width: 768px) {
    .alternate-list-item {
        flex-direction: column;
    }
    
    .alternate-list-item__content {
        text-align: center;
    }
}
/* Mega Menú para Baterías */
.mega-menu-trigger {
    position: relative;
}

.mega-menu-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 600px; /* Ancho del panel */
    background-color: #0a09095a;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1099;
    border-radius: 10px;
    overflow: hidden;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.mega-menu-content {
    padding: 2rem;
}

.mega-menu-products {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.mega-menu-product {
    flex: 1;
    text-align: center;
}

.mega-menu-product-asset img {
    width: 100%;
    max-width: 150px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.mega-menu-product-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 1rem 0 0.5rem;
    color: #ffffff;
}

.mega-menu-product-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.mega-link {
    color: #b91919;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.mega-link:hover {
    color: #7b0505;
}

/* Estilo para el enlace primario (Cotizar) */
.mega-link--primary {
    background-color: #b91919;
    color: #fff !important;
    padding: 0.7rem 1rem;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    display: inline-block;
}

.mega-link--primary:hover {
    background-color: #7b0505;
    transform: scale(1.05);
}

.mega-menu-secondary-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.mega-menu-secondary-links a {
    color: #000;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.mega-menu-secondary-links a:hover {
    color: #b91919;
}

/* Hover para mostrar el menú */
.mega-menu-trigger:hover .mega-menu-panel {
    display: block;
}

/* Para móviles: mostrar al clic */
@media (max-width: 1199px) {
    .mega-menu-panel {
        position: static;
        width: 100%;
        box-shadow: none;
        border-radius: 0;
    }
    
    .mega-menu-trigger.active .mega-menu-panel {
        display: block;
    }
    
    .mega-menu-products {
        flex-direction: column;
        gap: 1rem;
    }
    
    .mega-menu-secondary-links ul {
        flex-direction: column;
        gap: 1rem;
    }
}
/* Estilos para el botón flotante de WhatsApp JoinChat */
.joinchat__button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: transform 0.3s;
}

.joinchat__button:hover {
    transform: scale(1.1);
}

.joinchat__chatbox {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 350px;
    max-height: 500px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.joinchat__header {
    background-color: #25d366;
    color: #fff;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.joinchat__close {
    width: 20px;
    height: 20px;
    cursor: pointer;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1IDUgNSA5LjUgMTUgMTR6IiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=') no-repeat center;
    background-size: contain;
}

.joinchat__scroll {
    max-height: 400px;
    overflow-y: auto;
}

.joinchat__content {
    padding: 10px;
}

.joinchat__chat .joinchat__bubble {
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-family: 'Montserrat', Arial, sans-serif;
}

.joinchat__open {
    background-color: #25d366;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    font-family: 'Montserrat', Arial, sans-serif;
    transition: background-color 0.3s;
}

.joinchat__open:hover {
    background-color: #128c7e;
}

.joinchat__open__icon {
    width: 30px;
    height: 30px;
    fill: #fff;
}
/* Ícono dentro del botón */
.joinchat__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill: #fff;
}
/* Responsive */
@media (max-width: 768px) {
    .joinchat__chatbox {
        width: 90%;
        right: 5%;
    }
}

/* Estilos para la página de privacidad */
.privacy {
    padding: 3rem 0;
    background-color: #cfcdcdb2;
    font-family: 'Montserrat', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

.privacy .container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.privacy h1 {
    font-size: 2.5rem;
    color: var(--primary-red);
    margin-bottom: 2rem;
    text-align: center;
}

.privacy h2 {
    font-size: 1.8rem;
    color: var(--primary-red);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.privacy ul {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.privacy li {
    margin-bottom: 0.5rem;
}

.privacy a {
    color: var(--primary-red);
    text-decoration: underline;
}

.privacy a:hover {
    color: var(--dark-red);
}

/* Responsive */
@media (max-width: 768px) {
    .privacy h1 {
        font-size: 2rem;
    }
    .privacy h2 {
        font-size: 1.5rem;
    }
}

/* Overlay para hover en imágenes de baterías */
.alternate-list-item__picture-wrapper {
    position: relative; /* Necesario para posicionar el overlay */
    overflow: hidden; /* Evita que el overlay se salga */
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo negro semi-transparente */
    color: #fff; /* Texto blanco */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    opacity: 0; /* Oculto por defecto */
    visibility: hidden; /* No ocupa espacio */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Transición suave */
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.5;
}

.image-overlay p {
    margin: 0.5rem 0;
    
}

.image-overlay strong {
    color: var(--primary-red); /* Rojo para resaltar */
    font-size: 1.2rem;
}

/* Mostrar overlay en hover */
.alternate-list-item__picture-wrapper:hover .image-overlay {
    opacity: 1;
    visibility: visible;
}

/* Responsive: ajustar texto en móviles */
@media (max-width: 768px) {
    .image-overlay {
        font-size: 0.8rem;
        padding: 0.5rem;
    }
}

/* Estilos para el carrusel de baterías */
.story-carousel-layout {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0;
    font-family: 'Montserrat', Arial, sans-serif; /* Fuente consistente */
}

.story-carousel-layout-swiper-preview,
.story-carousel-layout-swiper-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    width: 40px;
    height: 40px;
}

.story-carousel-layout-swiper-preview {
    left: 10px;
}

.story-carousel-layout-swiper-next {
    right: 10px;
}

.story-carousel-layout-swiper {
    width: 100%;
    height: 500px; /* Ajusta altura según necesidad */
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-content {
    display: flex;
    width: 100%;
    max-width: 1000px;
    background: #00000021;
    border-radius: 10px;
    box-shadow: var(--shadow);
    overflow: hidden;
    font-family: 'Montserrat', Arial, sans-serif; /* Fuente consistente */
}

.slide-content-image {
    flex: 1;
    position: relative;
}

.slide-content-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-content-layout {
    flex: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.slide-content-layout-top-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-red);
    margin-bottom: 1rem;
    font-family: 'Montserrat', Arial, sans-serif; /* Fuente consistente */
}

.slide-content-layout-top-content {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #333;
    margin: 0;
    white-space: pre-wrap;
    font-family: 'Montserrat', Arial, sans-serif; /* Fuente consistente */
}

.slide-content-layout-bottom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.slide-content-layout-bottom-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: contain; /* Cambia a contain para ver el logo completo */
    object-position: center; /* Centra el logo */
    background-color: #ffffff30; /* Fondo blanco si hay espacios */
}

/* Info a la izquierda */
.slide-content-layout-bottom-info {
    order: 2; /* Primer elemento */
    margin-left: -8rem;
}

/* Avatar en el medio */
.slide-content-layout-bottom-avatar {
    order: 1; /* Segundo elemento */
}

.slide-content-layout-bottom-info-name {
    font-size: 1rem;
    font-weight: 600;
    color: #000;
    font-family: 'Montserrat', Arial, sans-serif; /* Fuente consistente */
}

.slide-content-layout-bottom-info-title {
    font-size: 0.8rem;
    color: #666;
    font-family: 'Montserrat', Arial, sans-serif; /* Fuente consistente */
}

/* Estilos para la paginación (puntos) */
.swiper-pagination {
    margin-top: 20px; /* Espacio debajo del carrusel */
    text-align: center; /* Centra los puntos */
    position: relative;
}

.swiper-pagination-bullet {
    width: 12px; /* Tamaño del punto */
    height: 12px;
    background: #ccc; /* Color inactivo */
    border-radius: 50%;
    margin: 0 5px; /* Espacio entre puntos */
    cursor: pointer;
    transition: background 0.3s ease; /* Transición suave */
    display: inline-block; /* Asegura que se muestren en línea */
}

.swiper-pagination-bullet-active {
    background: var(--primary-red); /* Color activo, coincide con el título */
}


/* Ajustes para móvil: apila verticalmente, muestra botón y agrega margen */
@media (max-width: 768px) {
    .slide-content {
        flex-direction: column;
        overflow: visible; /* Permite que el contenido no se corte */
    }
    .slide-content-layout {
        padding: 1rem; /* Más margen interno */
    }
    .story-carousel-layout-swiper {
        height: auto; /* Cambia a auto para que se ajuste al contenido */
        min-height: 600px; /* Mínimo para evitar colapso */
    }
    .slide-content-layout-bottom {
        flex-direction: column; /* Apila verticalmente */
        align-items: flex-start; /* Alinea a la izquierda */
        gap: 0.5rem; /* Espacio entre elementos */
        margin-top: 1rem; /* Margen extra arriba */
        flex-wrap: wrap; /* Permite wrap si es necesario */
    }
    .slide-content-layout-bottom-info {
        order: 1; /* Info primero */
        margin-left: 0; /* Sin margen negativo */
    }
    .slide-content-layout-bottom-avatar {
        order: 2; /* Avatar segundo */
    }
    .btn-comprar {
        order: 3; /* Botón tercero */
        margin-left: 0; /* Sin margen */
        align-self: flex-start; /* Alinea a la izquierda */
        width: 100%; /* Ancho completo para visibilidad */
        text-align: center; /* Centra texto */
        margin-top: 0.5rem; /* Espacio arriba */
        display: block; /* Asegura que se muestre */
        visibility: visible; /* Fuerza visibilidad */
        opacity: 1; /* Fuerza opacidad */
        position: relative; /* Asegura posición */
        z-index: 1; /* Por encima de otros elementos */
    }
    /* Agrega margen extra a la sección en móvil */
    .story-carousel-layout {
        padding: 2rem 1rem; /* Más padding lateral y vertical */
        margin: 1rem 0; /* Margen arriba/abajo */
    }
}

/* Estilos para el botón Comprar */
.btn-comprar {
    display: inline-block;
    background-color: var(--primary-red); /* Fondo rojo */
    color: #fff; /* Texto blanco */
    padding: 0.5rem 1rem; /* Padding pequeño para no ocupar mucho espacio */
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Montserrat', Arial, sans-serif;
    transition: background-color 0.3s, transform 0.3s;
    order: 3; /* Tercer elemento */
    margin-left: 0.5rem; /* Espacio mínimo entre avatar y botón */
}

.btn-comprar:hover {
    background-color: var(--dark-red); /* Rojo oscuro al hover */
    transform: scale(1.05); /* Efecto sutil */
}




/* Estilos para la lista en el mega menú */
.mega-menu-content {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente si es necesario */
    width: 100%;
}

.mega-menu-list {
    text-align: center; /* Centra el texto dentro de la lista */
    padding: 1rem;
    min-width: 250px; /* Ancho mínimo para que no se vea estrecho */
}

.mega-menu-list h3 {
    font-size: 1.2rem;
    color: var(--primary-red);
    margin-bottom: 0.5rem;
    font-weight: 700;
    font-family: 'Montserrat', Arial, sans-serif;
}

.mega-menu-list ul {
    display: flex;
    flex-direction: column; /* Fuerza vertical */
    align-items: center; /* Centra los items horizontalmente */
    padding: 0;
    margin: 0;
}

.mega-menu-list li {
    margin-bottom: 0.5rem;
    width: 100%; /* Ocupa todo el ancho */
}

.mega-menu-list a {
    text-decoration: none;
    color: #ffffffc8;
    font-size: 1rem;
    transition: color 0.3s;
    font-family: 'Montserrat', Arial, sans-serif;
}

.mega-menu-list a:hover {
    color: var(--primary-red);
}

/* Responsive */
@media (max-width: 768px) {
    .mega-menu-content {
        flex-direction: column; /* Apila en móviles */
    }
    .mega-menu-list {
        padding: 0.5rem;
    }
}
/* Layout en columnas para la lista del mega menú */
.mega-menu-list-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* 3 columnas: izquierda, línea, derecha */
    align-items: start;
    gap: 1rem; /* Espacio entre columnas */
}

.mega-menu-list-left,
.mega-menu-list-right {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.mega-menu-list-left li,
.mega-menu-list-right li {
    margin-bottom: 0.5rem;
}

.mega-menu-list-left a,
.mega-menu-list-right a {
    text-decoration: none;
    color: #ffffffd6;
    font-size: 1.1rem;
    transition: color 0.3s;
    font-family: 'Montserrat', Arial, sans-serif;
}

.mega-menu-list-left a:hover,
.mega-menu-list-right a:hover {
    color: var(--primary-red);
}

.mega-menu-divider {
    width: 1px; /* Grosor de la línea */
    height: 100%; /* Altura completa */
    background-color: #ddd; /* Color de la línea */
    align-self: stretch; /* Estira la línea */
}

/* Responsive: apila en móviles */
@media (max-width: 768px) {
    .mega-menu-list-grid {
        grid-template-columns: 1fr; /* Una columna en móviles */
        gap: 0.5rem;
    }
    .mega-menu-divider {
        display: none; /* Oculta la línea en móviles */
    }
}


/* --------Estilos para la sección Soluciones energerticas -----------*/
.seccion-negrito {
    background-color: #000; /* Fondo negro como en el original */
    color: #fff;
    padding: 8rem 0;
    font-family: 'Montserrat', Arial, sans-serif;
}

/* Ajustes específicos para móviles */
@media (max-width: 768px) {
    .seccion-negrito {
        padding: 7rem 1rem 2rem; /* Reduce padding vertical a 4rem y agrega horizontal 1rem para márgenes laterales */
    }
}

.seccion-negrito .text-left {
    text-align: left;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 2rem;
}

.width-60 {
    width: 60%;
}

.width-40 {
    width: 40%;
}

.border-bottom-white {
    border-bottom: 1px solid #fff;
}

.border-bottom-black {
    border-bottom: 1px solid #000;
}

.max-w-8xl {
    max-width: 1200px;
    margin: 0 auto;
}

.max-w-7xl {
    max-width: 1000px;
}

.max-w-sm {
    max-width: 400px;
}

.max-height-17rem {
    max-height: 17rem;
}

.min-h-40 {
    min-height: 10rem;
}

.bg-white {
    background-color: #fff;
}

.border {
    border: 1px solid #ddd;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.rounded-t-lg {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.p-5 {
    padding: 1.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.text-2xl {
    font-size: 1.5rem;
}

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

.tracking-tight {
    letter-spacing: -0.025em;
}

.text-gray-900 {
    color: #1a202c;
}

.text-gray-700 {
    color: #4a5568;
}

.cursor-pointer {
    cursor: pointer;
}

.absolute {
    position: absolute;
}

.top-0 {
    top: 0;
}

.relative {
    position: relative;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.justify-center {
    justify-content: center;
}

.gap-4 {
    gap: 1rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.text-xl {
    font-size: 1.15rem;
}

.text-3xl {
    font-size: 1.875rem;
}

/* Responsive */
@media (max-width: 768px) {
    .width-60, .width-40 {
        width: 100%;
    }
    .flex {
        flex-direction: column;
    }
}

/* Mostrar/ocultar en desktop y móvil */
.desktop-only {
    display: block;
}
.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
    .mobile-only {
        display: block;
    }
    
    /* Asegura que el contenedor del carrusel se centre en móviles */
    .seccion-negrito .mt-6 {
        flex-direction: column;
        align-items: center;
    }
    
/* Ajustes para evitar overflow horizontal en el carrusel móvil */
.soluciones-swiper {
    width: 100%;
    max-width: 100vw; /* Limita al ancho de la pantalla */
    margin: 0 auto;
    overflow: hidden; /* Oculta cualquier elemento que sobresalga */
    position: relative;
}

.soluciones-swiper .swiper-slide {
    width: 100%; /* Ancho completo del slide */
    margin: 0;
    display: block; /* Cambia a block para evitar conflictos con iframes posicionados absolutamente */
    overflow: hidden; /* Corta overflow */
    box-sizing: border-box; /* Incluye padding/borders */
}

/* Ajuste para iframes en slides móviles */
.soluciones-swiper .swiper-slide iframe {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0.5rem; /* Para que coincida con rounded-lg */
}


/* Flechas de navegación (dentro del swiper para evitar overflow) */
.soluciones-swiper .swiper-button-next,
.soluciones-swiper .swiper-button-prev {
    color: #fff;
    top: 50%;
    transform: translateY(-50%);
    width: 30px; /* Reduce de 30px a 25px para círculo más pequeño */
    height: 30px; /* Reduce de 30px a 25px */
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    z-index: 10; /* Asegura que estén encima */
}

/* Ajusta la fuente de las flechas para que quepan mejor */
.soluciones-swiper .swiper-button-next::after,
.soluciones-swiper .swiper-button-prev::after {
    font-size: 16px; /* Reduce de 18px a 14px para flechas más pequeñas */
    font-weight: bold;
    display: block;
}

    
    .soluciones-swiper .swiper-button-next {
        right: 10px;
    }
    
    .soluciones-swiper .swiper-button-prev {
        left: 10px;
    }
    
    /* Paginación (bolas) */
    .soluciones-swiper .swiper-pagination {
        bottom: -40px;
    }
    
    .soluciones-swiper .swiper-pagination-bullet {
        background: #fff;
        opacity: 0.5;
    }
    
    .soluciones-swiper .swiper-pagination-bullet-active {
        opacity: 1;
    }
       /* Fuerza el swiper-wrapper a ser horizontal (carrusel deslizante) */
   .soluciones-swiper .swiper-wrapper {
       display: flex !important;
       flex-direction: row !important; /* Desliza horizontalmente */
       width: 100%;
   }

    /* Contenido del slide (texto debajo del video) */
    .mobile-slide-content {
        width: 100% !important; /* Ocupa todo el ancho del slide */
        padding: 1rem;
        text-align: center;
        color: #fff;
        box-sizing: border-box;
        display: block; /* Evita flex inline */
    }
    
    .mobile-h5 {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    
    .mobile-p {
        font-size: 0.875rem;
        line-height: 1.5;
        margin: 0;
    }
}
/* Limitar tamaño de imágenes en tarjetas */
.rounded-t-lg {
    width: 100%;
    height: 200px; /* Altura fija para consistencia */
    object-fit: cover; /* Ajusta la imagen sin deformar, recortando si es necesario */
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

/* Estilos para videos en tarjetas (igual que imágenes) */
.rounded-t-lg {
    width: 100%;
    height: 200px; /* Altura fija para consistencia */
    object-fit: cover; /* Ajusta el video sin deformar, recortando si es necesario */
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    display: block; /* Asegura que se muestre como bloque */
}

/* ------Estilos para la sección de proyectos >50kW --------*/
.proyectos-50kw {
    padding: 4rem 0;
    background: radial-gradient(circle at center, #0f0e0eb7 0%, #000 70%); /* Gradiente sutil blanco en el centro */
    font-family: 'Montserrat', Arial, sans-serif;
    color: #fffefe00;
    position: relative; /* Necesario para el overlay */
}

.proyectos-50kw h2 {
    font-size: 2.5rem;
    color: #e90e0ee1;
    text-align: center;
    margin-bottom: 7rem;
    font-weight: 700;
}

.proyectos-intro {
    font-size: 1.3rem;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 3rem;
    line-height: 1.6;
    color: #000000;
}

.proyectos-beneficios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.beneficio-item {
    background-color: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: var(--shadow);
    text-align: center;
    transition: transform 0.3s;
}

.beneficio-item:hover {
    transform: translateY(-5px);
}

.beneficio-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.beneficio-item h3 {
    font-size: 1.5rem;
    color: var(--primary-red);
    margin-bottom: 1rem;
    font-weight: 600;
}

.beneficio-item p {
    font-size: 1rem;
    line-height: 1.5;
    color: #666;
}

.proyectos-cta {
    text-align: center;
    background-color: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: var(--shadow);
    max-width: 600px;
    margin: 0 auto;
}

.proyectos-cta p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: #333;
}

.btn-primary {
    display: inline-block;
    background-color: var(--primary-red);
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: var(--dark-red);
}

/* Responsive */
@media (max-width: 768px) {
    .proyectos-50kw {
        padding: 4rem 1.5rem; /* Márgenes laterales de 1rem en móviles */
    }
    .proyectos-50kw h2 {
        font-size: 2rem; /* Reduce tamaño de fuente en móviles */
        margin-bottom: 4rem; /* Reduce margen inferior */
    }
    .proyectos-intro {
        font-size: 0.9rem; /* Reduce tamaño de fuente */
        margin-bottom: 3rem; /* Reduce margen inferior */
    }
    .proyectos-beneficios {
        grid-template-columns: 1fr; /* Una columna en móviles */
    }
    .beneficio-icon {
        font-size: 2.5rem; /* Reduce tamaño de iconos */
    }
}

/* Animaciones de entrada basadas en scroll */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilos iniciales: ocultar elementos */
.proyectos-50kw h2,
.proyectos-50kw .proyectos-intro,
.proyectos-50kw .beneficio-item,
.proyectos-50kw .proyectos-cta {
    opacity: 0;
}

/* Animaciones activadas cuando la sección tiene la clase 'animate' */
.proyectos-50kw.animate h2 {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0s;
}

.proyectos-50kw.animate p.proyectos-intro {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 1.5s; /* Aparece después del h2 */
}

.proyectos-50kw.animate .proyectos-beneficios .beneficio-item:nth-child(1) {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 2.5s; /* 1 segundo después del intro */
}

.proyectos-50kw.animate .proyectos-beneficios .beneficio-item:nth-child(2) {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 3s; /* 0.5s después del primer beneficio */
}

.proyectos-50kw.animate .proyectos-cta {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 4s; /* 1 segundo después del último beneficio */
}

/* Overlay para transparencia */
.proyectos-50kw::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    background-color: #ffffff17; 
    z-index: 1; /* Detrás del contenido */
}

/* Asegura que el contenido esté encima del overlay */
.proyectos-50kw .container {
    position: relative;
    z-index: 2;
}

/* Estilos para beneficios de instaladores */
.beneficios-instaladores {
    background-color: #000; /* Fondo negro como la sección de instaladores */
    color: #fff;
    padding: 4rem 0;
    font-family: 'Montserrat', Arial, sans-serif;
}

.beneficios-instaladores h2 {
    font-size: 2.5rem;
    color: var(--primary-red);
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 700;
}

@media (max-width: 768px) {
    .beneficios-instaladores h2 {
        font-size: 2.5rem; /* Mantén igual en móviles; ajusta si quieres cambiar (ej. 2rem para más pequeño) */
        color: var(--primary-red);
        text-align: center;
        margin-bottom: 1rem;
        font-weight: 700;
    }
}

.beneficios-intro {
    font-size: 1.2rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
    line-height: 1.6;
    color: #ccc;
}

/* Reutiliza estilos de necesidades para consistencia */
.beneficios-instaladores .mt-6 {
    margin-top: 1.5rem;
}

.beneficios-instaladores .flex {
    display: flex;
}

.beneficios-instaladores .justify-center {
    justify-content: center;
}

.beneficios-instaladores .max-w-7xl {
    max-width: 1000px;
}

.beneficios-instaladores .mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.beneficios-instaladores .flex-col {
    flex-direction: column;
}

.beneficios-instaladores .gap-4 {
    gap: 1rem;
}

.beneficios-instaladores .width-60 {
    width: 60%;
}

.beneficios-instaladores .width-40 {
    width: 40%;
}

.beneficios-instaladores .text-white {
    color: #fff;
}

.beneficios-instaladores .py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.beneficios-instaladores .border-bottom-white {
    border-bottom: 1px solid #fff;
}

.beneficios-instaladores .border-bottom-black {
    border-bottom: 1px solid #000;
}

.beneficios-instaladores .cursor-pointer {
    cursor: pointer;
}

.beneficios-instaladores .text-xl {
    font-size: 1.25rem;
}

.beneficios-instaladores .relative {
    position: relative;
}

.beneficios-instaladores .absolute {
    position: absolute;
}

.beneficios-instaladores .top-0 {
    top: 0;
}

.beneficios-instaladores .max-w-sm {
    max-width: 400px;
}

.beneficios-instaladores .bg-white {
    background-color: #fff;
}

.beneficios-instaladores .border {
    border: 1px solid #ddd;
}

.beneficios-instaladores .rounded-lg {
    border-radius: 0.5rem;
}

.beneficios-instaladores .shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.beneficios-instaladores .rounded-t-lg {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.beneficios-instaladores .p-5 {
    padding: 1.25rem;
}

.beneficios-instaladores .max-height-17rem {
    max-height: 17rem;
}

.beneficios-instaladores .min-h-40 {
    min-height: 10rem;
}

.beneficios-instaladores .mb-2 {
    margin-bottom: 0.5rem;
}

.beneficios-instaladores .mb-3 {
    margin-bottom: 0.75rem;
}

.beneficios-instaladores .text-2xl {
    font-size: 1.5rem;
}

.beneficios-instaladores .font-bold {
    font-weight: 700;
}

.beneficios-instaladores .tracking-tight {
    letter-spacing: -0.025em;
}

.beneficios-instaladores .text-gray-900 {
    color: #1a202c;
}

.beneficios-instaladores .text-gray-700 {
    color: #4a5568;
}

/* Estilos para el texto expandible en móviles */
.beneficio-texto-movil {
    display: none; /* Oculto por defecto */
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: #111; /* Fondo ligeramente más oscuro para destacar */
    border-radius: 5px;
    color: #ccc; /* Texto gris claro */
    font-size: 0.9rem;
    line-height: 1.5;
}

.beneficio-texto-movil p {
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .beneficios-instaladores .width-60, .beneficios-instaladores .width-40 {
        width: 100%;
    }
    .beneficios-instaladores .flex {
        flex-direction: column;
    }
    .tarjetas-desktop {
        display: none; /* Oculta tarjetas en móviles */
    }
    .beneficio-texto-movil {
        display: block; /* Muestra texto expandible en móviles */
    }
    
    /* Ajustes de márgenes para móviles */
    .beneficios-instaladores {
        padding: 2rem 2rem; /* Reduce padding general de la sección (de 4rem a 2rem) */
    }
    .beneficios-instaladores h2 {
        margin-bottom: 0.5rem; /* Reduce margen inferior del título (de 1rem a 0.5rem) */
    }
    .beneficios-intro {
        margin-bottom: 2rem; /* Reduce margen inferior de la intro (de 3rem a 2rem) */
        font-size: 1.6rem; /* Mantén tu ajuste anterior */
    }
    .lista-beneficios {
        margin-bottom: 1rem; /* Agrega margen inferior a la lista para separación */
    }
    .beneficio-texto-movil {
        margin-top: 0.5rem; /* Asegura separación entre h5 y texto expandible */
        margin-bottom: 1rem; /* Agrega margen inferior para espaciar elementos */
    }
}

@media (min-width: 769px) {
    .beneficio-texto-movil {
        display: none; /* Oculta texto expandible en desktop */
    }
}

    /* Estilos para Swiper en móvil */
    .instaladores-carousel .swiper-slide {
        display: flex;
        justify-content: center;
    }
    .instaladores-carousel .swiper-button-next,
    .instaladores-carousel .swiper-button-prev {
        color: var(--primary-red); /* Ajusta al color de tu tema */
    }
    .instaladores-carousel .swiper-pagination {
        bottom: 10px;
    }


/* Estilos para la sección "Únete al Equipo" */
.unete-equipo {
    padding: 4rem 0;
    background-color: #fff; /* Fondo blanco para contraste */
    font-family: 'Montserrat', Arial, sans-serif;
    color: #2e2d2d;
    margin-bottom: 0rem;
}

.unete-equipo h2 {
    font-size: 2.5rem;
    color: var(--primary-red);
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 700;
}

/* Estilos específicos para el H3 en la sección "unete-equipo" */
.unete-equipo h3 {
    text-align: center; /* Centra el texto */
    font-size: 2rem; /* Tamaño similar al H2 de instaladores (ajusta si quieres más grande/pequeño) */
    font-weight: 700; /* Negrita para resaltar */
    color: var(--primary-red); /* Color rojo primario para consistencia */
    margin-bottom: 5rem; /* Espacio debajo */
    margin-top: 0; /* Sin margen arriba extra */
    line-height: 1.2; /* Mejor legibilidad */
}

/* Ajustes para móviles (más pequeño y centrado) */
@media (max-width: 768px) {
    .unete-equipo h3 {
        font-size: 1.5rem; /* Más pequeño en móviles */
        margin-bottom: 0.5rem; /* Menos espacio debajo */
        margin-top: 1rem; /* Un poco de espacio arriba en móviles */
    }
}


.unete-intro {
    font-size: 1.2rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
    line-height: 1.6;
    color: #666;
}

.unete-beneficios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.beneficio-card {
    background-color: #f9f9f9;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: var(--shadow);
    text-align: center;
    transition: transform 0.3s;
}

.beneficio-card:hover {
    transform: translateY(-5px);
}

.beneficio-card h3 {
    font-size: 1.8rem;
    color: var(--primary-red);
    margin-bottom: 1rem;
    font-weight: 600;
}

.beneficio-card p {
    font-size: 1rem;
    line-height: 1.5;
    color: #666;
}

.unete-pasos {
    background-color: #f0f0f0;
    padding: 2rem;
    border-radius: 10px;
    margin-bottom: 3rem;
    text-align: center;
}

.unete-pasos h3 {
    font-size: 1.8rem;
    color: var(--primary-red);
    margin-bottom: 1.5rem;
}

.unete-pasos ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
    text-align: left;
    max-width: 600px;
    margin: 0 auto;
}

.unete-pasos li {
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
}

.unete-cta {
    text-align: center;
    background-color: #897f7f;
    color: #fff;
    padding: 2rem;
    border-radius: 10px;
    max-width: 600px;
    margin: 0 auto;
}

.unete-cta p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.btn-primary {
    display: inline-block;
    background-color: #fff;
    color: var(--primary-red);
    padding: 1rem 2rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: #e0e0e0;
}

/* Estilos para el carrusel de "Únete al Equipo" */
.unete-carousel {
    width: 100%;
    height: 550px; /* Altura del carrusel */
    position: relative;
}

.slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.unete-toggles {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.toggle-btn {
    background: #000; /* Fondo negro para todos los toggles */
    border: 1px solid #fff;
    color: #fff;
    padding: 1rem;
    border-radius: 5px;
    cursor: pointer;
    text-align: left;
    transition: background 0.3s;
    width: 250px;
}

.toggle-btn.active {
    background-color: var(--primary-red); /* Fondo rojo para el activo (sobrescribe el negro) */
    border-color: var(--primary-red);
}

.toggle-title {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.toggle-desc {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}


/* Centrar la sección de instaladores (global) */
.instaladores {
    text-align: center; /* Centra el contenido de la sección */
}

/* Ajustar el contenedor de instaladores para centrado adicional (global) */
.instaladores-container {
    display: flex;
    justify-content: center; /* Centra el grid/swiper horizontalmente */
    align-items: center; /* Centra verticalmente si es necesario */
    width: 100%; /* Ocupa todo el ancho disponible */
    margin-bottom: 5rem;
}

/* Estilos para "Nuestros Instaladores Oficiales" (global) */
.instaladores-intro {
    font-size: 1rem; /* Más pequeño: cambiado de 1.2rem */
    text-align: center;
    max-width: 900px;
    margin: 1rem auto 2rem; /* Agregado margin-top: 1rem para separación */
    line-height: 1.6;
    color: #000000d9;
}

/* Reglas específicas para desktop (solo aquí aplican) */
@media (min-width: 769px) {
    /* Forzar lista horizontal estricta en desktop (sin wrap) */
    .logos-grid {
        display: flex !important; /* Fuerza Flexbox */
        flex-direction: row !important; /* Fila horizontal */
        justify-content: center !important; /* Centra los items */
        gap: 2rem !important; /* Espacio entre items */
        flex-wrap: nowrap !important; /* Fuerza horizontal sin apilamiento */
        align-items: center !important; /* Alinea verticalmente */
        overflow-x: auto !important; /* Scroll horizontal si se salen (respaldo raro, pero seguro) */
        padding: 0 1rem !important; /* Espacio lateral para evitar cortes */
        width: 100% !important; /* Ocupa todo el ancho del contenedor */
        max-width: none !important; /* Sin límite de ancho para evitar wrap forzado */
    }

    .instalador-item {
        text-align: center;
        transition: transform 0.3s;
        flex: 0 0 auto; /* Evita que se estiren */
        max-width: 150px; /* Limita ancho para consistencia */
    }

    .instalador-item:hover {
        transform: scale(1.05);
    }

    .instalador-item img {
        max-width: 150px;
        height: auto;
        margin-bottom: 1rem;
    }

    .instalador-item h3 {
        font-size: 1.1rem;
        color: var(--primary-red);
        margin: 0;
    }
}

/* Swiper para móviles (solo aquí aplican) */
.instaladores-carousel {
    width: 100%;
    height: auto;
    margin: 2rem 0; /* Margen para separación */
}

.instaladores-carousel .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.instaladores-carousel .instalador-item {
    max-width: 200px;
    text-align: center;
    transition: transform 0.3s;
}

.instaladores-carousel .instalador-item:hover {
    transform: scale(1.05);
}

.instaladores-carousel .instalador-item img {
    max-width: 150px;
    height: auto;
    margin-bottom: 1rem;
}

.instaladores-carousel .instalador-item h3 {
    font-size: 1.1rem;
    color: var(--primary-red);
    margin: 0;
}

/* Estilos para la paginación del swiper (hazla más visible) */
.instaladores-carousel .swiper-pagination {
    bottom: 10px; /* Posición desde abajo */
}

.instaladores-carousel .swiper-pagination-bullet {
    background: var(--primary-red); /* Color de los bullets */
    opacity: 0.5;
}

.instaladores-carousel .swiper-pagination-bullet-active {
    opacity: 1; /* Bullet activo más opaco */
}

/* Mostrar/ocultar según dispositivo */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    /* Ocultar grid de desktop, mostrar swiper en móviles */
    .desktop-only {
        display: none;
    }
    .mobile-only {
        display: block;
    }

    .instaladores-carousel {
        height: 250px; /* Altura ajustada para móviles */
        overflow: hidden; /* Evita que los logos se salgan */
    }

    .instaladores-carousel .swiper-wrapper {
        gap: 0; /* Elimina espacio entre slides */
    }

    .instaladores-carousel .swiper-slide {
        transition: transform 0.5s ease, opacity 0.5s ease;
    }

    .instaladores-carousel .swiper-slide:not(.swiper-slide-active) {
        opacity: 0.5; /* Previews más transparentes */
        transform: scale(0.8); /* Previews más pequeños */
    }

    .instaladores-carousel .swiper-slide-active {
        opacity: 1; /* Activo visible */
        transform: scale(1); /* Activo al 100% */
        z-index: 1; /* Por encima de previews */
    }

    /* Ajustes para títulos en móviles */
    .instaladores h2 {
        font-size: 1.8rem; /* Más pequeño en móvil */
        text-align: center;
        margin-bottom: 0;
        margin-top: 5rem;
        color: var(--text-color);
    }

    .instaladores-intro {
        font-size: 1rem;
        text-align: center;
        max-width: 900px;
        margin: 1rem 2rem 2rem;
        line-height: 1.6;
        color: #000000d9;
    }

    .instaladores h3 {
        font-size: 1.5rem;
        text-align: center;
        margin-bottom: 2rem;
        color: var(--text-color);
    }

    /* Ajustes para otras secciones (si aplican, pero no relacionadas) */
    .unete-equipo h2 {
        font-size: 2rem;
    }
    .unete-beneficios {
        grid-template-columns: 1fr;
    }
    .unete-pasos ol {
        text-align: center;
        padding-left: 0;
    }
    .unete-toggles {
        position: relative;
        height: auto;
        margin-top: 2rem;
    }
    .toggle-btn {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 400px;
        padding: 1.5rem;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
        background: none;
        border: 1px solid #fff;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
        text-align: left;
    }
    .toggle-btn.active {
        opacity: 1;
        visibility: visible;
        background-color: var(--primary-red);
        border-color: var(--primary-red);
    }
    .unete-carousel {
        height: 300px;
    }
    .unete-carousel .swiper-button-next,
    .unete-carousel .swiper-button-prev {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        color: #fff;
        z-index: 10;
        cursor: pointer;
        transition: background 0.3s;
    }
    .unete-carousel .swiper-button-next {
        right: 10px;
    }
    .unete-carousel .swiper-button-prev {
        left: 10px;
    }
    .unete-carousel .swiper-button-next:hover,
    .unete-carousel .swiper-button-prev:hover {
        background: var(--primary-red);
    }
    .unete-carousel .swiper-button-next::after,
    .unete-carousel .swiper-button-prev::after {
        font-size: 14px;
        font-weight: bold;
        display: block;
    }
    .unete-intro {
        font-size: 1rem;
        text-align: center;
        max-width: 90%;
        margin: 0 auto 2rem;
        line-height: 1.6;
        color: #666;
    }
    .unete-equipo{
        margin-bottom: 7rem;
    }
}


/* Estilos para la sección de pasos (línea de tiempo vertical) */
.li4mance-steps-section {
    background-color: #fff; /* Fondo blanco */
    color: #333;
    padding: 4rem 0;
    font-family: 'Montserrat', Arial, sans-serif;
}

.li4mance-steps-layout {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.li4mance-steps-progress {
    position: absolute;
    left: 20px;
    top: 0;
    width: 4px;
    height: 100%;
    background-color: var(--primary-red);
    z-index: 1;
}

.li4mance-grid-layout {
    display: flex;
    flex-direction: column;
    gap: 3rem !important; 
    position: relative;
    z-index: 2;
}

.li4mance-step-comp {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.li4mance-step-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-red);
    border: 4px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #fff;
    margin-right: 1rem;
    position: relative;
    z-index: 3;
}

.li4mance-step-dot::before {
    content: attr(data-step);
    font-size: 1.2rem;
}

.li4mance-text-size-regular {
    font-size: 1rem;
    line-height: 1.4;
    background-color: #f9f9f9;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .li4mance-steps-layout {
        max-width: 100%;
        padding: 0 1rem;
    }
    .li4mance-step-comp {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .li4mance-step-dot {
        margin-right: 0;
        margin-bottom: 1rem;
    }
}


/* Estilos para el formulario de socio de Li4mance */
.li4mance-contact-3-section {
    background-color: var(--primary-red);
    color: #fff;
    padding: 4rem 0;
    font-family: 'Montserrat', Arial, sans-serif;
}

.li4mance-padding-global {
    padding-left: 1rem;
    padding-right: 1rem;
}

.li4mance-section-padding {
    padding: 2rem 0;
}

.li4mance-container {
    max-width: 1200px;
    margin: 0 auto;
}

.li4mance-contact-3-layout {
    display: flex;
    justify-content: center;
}

.li4mance-form-component {
    width: 100%;
    max-width: 800px;
}

.li4mance-form-wrap {
    background-color: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.li4mance-form-step {
    margin-bottom: 2rem;
}

.li4mance-form-step-title {
    margin-bottom: 1rem;
}

.li4mance-checkbox-legend {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-red);
}

.li4mance-paragraph-wrap {
    margin-bottom: 1rem;
}

.li4mance-paragraph-rich p {
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
}

.li4mance-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.li4mance-is-autofit {
    justify-content: space-between;
}

.li4mance-input-group {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.li4mance-form-main-field-input {
    width: 100%;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.li4mance-form-main-field-input:focus {
    border-color: var(--primary-red);
    outline: none;
}

.li4mance-float-label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: #666;
    transition: all 0.3s;
    pointer-events: none;
}

.li4mance-form-main-field-input:focus ~ .li4mance-float-label,
.li4mance-form-main-field-input:not(:placeholder-shown) ~ .li4mance-float-label {
    top: 0.5rem;
    font-size: 0.875rem;
    color: var(--primary-red);
}

.li4mance-form-error {
    display: none;
    color: #e74c3c;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.li4mance-is-3cols .li4mance-form-col {
    flex: 1;
    display: flex;
    gap: 1rem;
}

.li4mance-is-textarea {
    resize: vertical;
    min-height: 100px;
}

.li4mance-spacer-medium {
    height: 2rem;
}

.li4mance-form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.li4mance-form-checkbox-input {
    margin: 0;
}

.li4mance-form-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #fff;
    position: relative;
    cursor: pointer;
}

.li4mance-form-checkbox-label p {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #666;
    margin: 0;
}

.li4mance-paragraph-rich-2 p {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #666;
    margin-bottom: 1rem;
}

.li4mance-button-main {
    background-color: var(--primary-red);
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.li4mance-button-main:hover {
    background-color: var(--dark-red);
}

.w-form-done,
.w-form-fail {
    display: none;
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 5px;
}

.w-form-done {
    background-color: #d4edda;
    color: #155724;
}

.w-form-fail {
    background-color: #f8d7da;
    color: #721c24;
}

/* Responsive */
@media (max-width: 768px) {
    .li4mance-form-row {
        flex-direction: column;
    }
    .li4mance-is-3cols .li4mance-form-col {
        flex-direction: column;
    }
    .li4mance-form-wrap {
        padding: 1rem;
    }
}

/* Estilos para la sección de historias reales de Li4mance */

.li4mance-review-1-section {
    background: linear-gradient(to bottom, #ffffff, #000000); /* Gradiente de blanco a negro */
    color: #a72222;
    padding: 4rem 0;
    padding-top: 1rem;
    font-family: 'Montserrat', Arial, sans-serif;
}

.li4mance-padding-global {
    padding-left: 1rem;
    padding-right: 1rem;
}

.li4mance-section-padding {
    padding: 2rem 0;
}

.li4mance-container {
    max-width: 1200px;
    margin: 0 auto;
}

.li4mance-title-comp h2 {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: left;
    max-width: 85ch;
}

.li4mance-spacer-medium {
    height: 2rem;
}

.li4mance-review-1-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.li4mance-card-4-comp {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: var(--shadow);
    height: 500px;
}

.li4mance-card-4-v-1 {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.li4mance-card-4-content-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff;
    z-index: 2;
}

.li4mance-card-4-content-wrap p {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.li4mance-button-main {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--primary-red);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s;
}

.li4mance-button-main:hover {
    background-color: var(--dark-red);
}

.li4mance-icon-1x1-small {
    width: 20px;
    height: 20px;
}

.li4mance-card-4-bg-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.li4mance-bg-img-wrap {
    width: 100%;
    height: 100%;
    position: relative;
}

.li4mance-bg-img-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.li4mance-bg-img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .li4mance-review-1-grid {
        grid-template-columns: 1fr;
    }
    .li4mance-title-comp h2 {
        font-size: 2rem;
    }
}

.li4mance-bg-img-img {
    transition: transform 0.7s ease;
}

.li4mance-card-4-comp:hover .li4mance-bg-img-img {
    transform: scale(1.2);
}

/* Animación de latido para "Leer más" */
@keyframes latido {
    0%, 100% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(1.1);
    }
}

.li4mance-leer-mas {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    font-weight: 600;
    animation: latido 2s ease-in-out infinite;
}

.li4mance-leer-mas svg {
    width: 20px;
    height: 20px;
}

.li4mance-leer-mas:hover {
    color: var(--primary-red);
}

/* Estilos para la página de historia */
.li4mance-hero-4-section,
.li4mance-long-text-section {
    background-color: #101010c1;
    color: #ffffff;
    padding: 4rem 0;
    font-family: 'Montserrat', Arial, sans-serif;
}

.li4mance-hero-4-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

.li4mance-eyebrow-1-item {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #1f1e1e93;
}

.li4mance-heading-style-h2 {
    font-size: 2.5rem;
    font-weight: 700;
}

.li4mance-img-wrap img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.li4mance-text-rich-text p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.li4mance-text-rich-text ul {
    margin-left: 1rem;
    margin-bottom: 1rem;
}

.li4mance-text-rich-text figure img {
    width: 100%;
    border-radius: 10px;
    margin: 1rem 0;
}

/* Responsive */
@media (max-width: 768px) {
    .li4mance-hero-4-layout {
        grid-template-columns: 1fr;
    }
}

/* Nueva clase para altura media */
.li4mance-half-height {
    height: 70vh; /* Mitad de la altura de la ventana */
    position: relative;
    overflow: hidden;
}

.li4mance-half-height .tcl-text-on-media-v2__media {
    height: 100%;
}

.li4mance-half-height .tcl-image__asset {
    height: 100%;
    object-fit: cover;
}

.li4mance-half-height .tcl-text-on-media-v2__section-header-group {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 2;
}

/* Efecto parallax */
.li4mance-parallax-bg {
    background-size: cover;
    background-position: center bottom;
    background-attachment: fixed; /* Hace que la imagen se mueva con el scroll */
    height: 100%;
}

/* Ajustes para centrar y separar */
.li4mance-hero-4-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem; /* Más separación entre texto e imagen */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente si es necesario */
    min-height: 60vh; /* Altura mínima para centrado */
}

.li4mance-grid-layout {
    display: contents; /* Para que herede del layout padre */
}

/* Responsive */
@media (max-width: 768px) {
    .li4mance-hero-4-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
/* Estilos para la nueva sección "Ventajas al elegir a Li4Mance" */
.li4mance-ventajas-new {
    background: linear-gradient(to bottom, #000000, #ffffff); /* Gradiente de negro a blanco */
    padding: 4rem 0;
    font-family: 'Montserrat', Arial, sans-serif;
    color: #000000; /* Texto negro para contraste */
}

.li4mance-container-new {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.li4mance-cabecera {
    text-align: center; /* Centrado */
    margin-bottom: 2rem;
}

.li4mance-titulo-principal {
    font-size: 2rem; /* Ajustado para h2 */
    font-weight: 700;
    color: #000000; /* Negro */
    margin: 0;
    background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco semi-transparente para legibilidad */
    padding: 0.5rem; /* Padding para el fondo */
    border-radius: 8px; /* Bordes redondeados opcionales */
    display: inline-block; /* Para que el fondo no ocupe todo el ancho */
}

.li4mance-cuadros-contenedor {
    border: 2px solid #d1d5db; /* Borde gris para simular el "cuadrado" */
    background-color: #f5f5f5; /* Fondo gris muy claro para el contenedor */
    padding: 2rem; /* Padding interno para espacio */
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para destacar */
}

.li4mance-cuadros {
    display: grid; /* Grid para 2x2 */
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    gap: 1rem; /* Espacio entre cuadros */
}

.li4mance-cuadro {
    background-color: #ffffff; /* Fondo blanco para cada cuadro individual */
    padding: 1.5rem; /* Padding interno */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.li4mance-cuadro-titulo {
    font-size: 1.25rem; /* Tamaño para h3 */
    font-weight: 600;
    color: #c12020; /* Negro */
    margin-bottom: 1rem;
    background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco semi-transparente */
    padding: 0.5rem; /* Padding */
    border-radius: 8px; /* Bordes redondeados */
}

.li4mance-lista-new {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco semi-transparente */
    padding: 0.5rem; /* Padding */
    border-radius: 8px; /* Bordes redondeados */
}

.li4mance-lista-new li {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    color: #000000; /* Negro */
}

.li4mance-lista-new li strong {
    color: var(--primary-red); /* Rojo */
}

/* Responsive */
@media (max-width: 768px) {
    .li4mance-cuadros-contenedor {
        padding: 1rem; /* Menos padding en móvil */
    }
    .li4mance-cuadros {
        grid-template-columns: 1fr; /* 1 columna en móvil para apilar */
    }
    .li4mance-cuadro {
        width: 100%; /* Ancho completo en móvil */
        max-width: 500px; /* Máximo para no estirar demasiado */
    }
    .li4mance-titulo-principal {
        font-size: 1.5rem; /* Más pequeño en móvil */
    }
}

/* Animaciones de entrada basadas en scroll para la sección Ventajas */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilos iniciales: ocultar elementos */
.li4mance-ventajas-new .li4mance-titulo-principal,
.li4mance-ventajas-new .li4mance-cuadros-contenedor,
.li4mance-ventajas-new .li4mance-cuadro {
    opacity: 0;
}

/* Animaciones activadas cuando la sección tiene la clase 'animate' */
.li4mance-ventajas-new.animate .li4mance-titulo-principal {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0s;
}

.li4mance-ventajas-new.animate .li4mance-cuadros-contenedor {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 1.5s;
}

.li4mance-ventajas-new.animate .li4mance-cuadro:nth-child(1) {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 3s;
}

.li4mance-ventajas-new.animate .li4mance-cuadro:nth-child(2) {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 4s;
}

.li4mance-ventajas-new.animate .li4mance-cuadro:nth-child(3) {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 5s;
}

.li4mance-ventajas-new.animate .li4mance-cuadro:nth-child(4) {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 6s;
}

/* Gradiente top 

.li4mance-por-que-comprar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.032));
    pointer-events: none;
    z-index: 1; /* Sobre el overlay, falta cerrar linea*/ 


/* Estilos para la sección de línea de tiempo horizontal Li4mance */
.li4mance-timeline-section {
    background-color: #fff; /* Fondo blanco */
    color: #333;
    padding: 4rem 0;
    font-family: 'Montserrat', Arial, sans-serif;
}

.li4mance-timeline-padding-global {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
}

.li4mance-timeline-container {
    width: 100%;
    max-width: 80rem;
    margin-left: auto !important;
    margin-right: auto !important;
}

.li4mance-timeline-steps-layout {
    position: relative;
}

.li4mance-timeline-steps-progress {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--primary-red);
    z-index: 1;
}

.li4mance-timeline-grid-layout {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    padding: 0 2rem;
    gap: 2rem !important; /* Más espacio entre pasos */
}

.li4mance-timeline-step-comp {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    text-align: center;
}

.li4mance-timeline-step-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-red);
    border: 4px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #fff;
    margin-bottom: 1rem;
    position: relative;
    z-index: 3;
    top: -10px;
}

.li4mance-timeline-is-1 {
    top: -11px;
}

.li4mance-timeline-is-2 {
    top: -17px;
}

.li4mance-timeline-is-3 {
    top: -11px;
}

.li4mance-timeline-is-4 {
    top: 0px;
}

.li4mance-timeline-is-5 {
    top: 0px;
}

.li4mance-timeline-is-6 {
    top: -11px;
}

.li4mance-timeline-step-dot::before {
    content: attr(data-step);
    font-size: 1.2rem;
}

.li4mance-timeline-text-size-regular {
    font-size: 1rem;
    line-height: 1.4;
    background-color: #f9f9f9;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 600px;
    color: #333;
}

/* Ajuste para línea de tiempo en móviles: línea izquierda, números centrados en la línea, texto a la derecha separado */
@media (max-width: 768px) {
    .li4mance-timeline-section {
        padding: 2rem 1rem !important;
    }
    
    .li4mance-timeline-grid-layout {
        flex-direction: column !important; /* Apila pasos verticalmente */
        gap: 3rem !important; /* Más espacio entre pasos */
        align-items: flex-start !important; /* Alinea a la izquierda */
        position: relative !important; /* Para la línea */
    }
    
    .li4mance-timeline-step-comp {
        display: flex !important;
        flex-direction: row !important; /* Línea izquierda, texto derecha */
        align-items: center !important; /* Centra verticalmente */
        position: relative !important;
        width: 100% !important; /* Ocupa ancho completo */
        gap: 2rem !important; /* Más espacio entre línea y texto */
        margin-left: 0 !important; /* Sin margen extra */
    }
    
    .li4mance-timeline-step-dot {
        width: 40px !important;
        height: 40px !important;
        position: absolute !important; /* Absoluto para centrar en la línea */
        left: -50px !important; /* Centra exactamente en la línea (mitad del ancho del dot) */
        top: 50% !important; /* Centra verticalmente */
        transform: translateY(-50%) !important; /* Ajusta para centrar perfecto */
        background-color: var(--primary-red) !important;
        border: 4px solid #fff !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: bold !important;
        color: #fff !important;
        z-index: 2 !important; /* Por encima de la línea */
    }
    
    .li4mance-timeline-text-size-regular {
        flex: 1 !important; /* Ocupa el resto del espacio */
        text-align: left !important; /* Alinea texto a la izquierda */
        background-color: #f9f9f9 !important;
        padding: 1rem !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        margin-top: 0 !important; /* Sin margen arriba */
        margin-left: 20px !important; /* Espacio extra a la izquierda del texto */
    }
    
    /* Línea de progreso vertical en móviles */
    .li4mance-timeline-steps-progress {
        position: absolute !important;
        left: 0 !important; /* A la izquierda */
        top: 1 !important; /* Desde arriba */
        width: 4px !important; /* Grosor de la línea */
        height: 89% !important; /* Altura completa */
        background-color: var(--primary-red) !important;
        z-index: 1 !important;
    }
}


/* Estilos para beneficios de EcoMance */
.beneficios-ecomance {
    background-color: #000; /* Fondo negro */
    color: #fff;
    padding: 4rem 0;
    font-family: 'Montserrat', Arial, sans-serif;
}

.beneficios-ecomance h2 {
    font-size: 2.5rem;
    color: var(--primary-red);
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 700;
}

.beneficios-intro {
    font-size: 1.6rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
    line-height: 1.6;
    color: #ccc;
}

@media (max-width: 768px) {
    .beneficios-intro {
        font-size: 1.6rem; /* Solo cambia el font-size en móviles */
        margin: 2rem;
    }
}


/* Reutiliza estilos de necesidades para consistencia */
.beneficios-ecomance .mt-6 {
    margin-top: 1.5rem;
}

.beneficios-ecomance .flex {
    display: flex;
}

.beneficios-ecomance .justify-center {
    justify-content: center;
}

.beneficios-ecomance .max-w-7xl {
    max-width: 1000px;
}

.beneficios-ecomance .mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.beneficios-ecomance .flex-col {
    flex-direction: column;
}

.beneficios-ecomance .gap-4 {
    gap: 1rem;
}

.beneficios-ecomance .width-60 {
    width: 60%;
}

.beneficios-ecomance .width-40 {
    width: 40%;
}

.beneficios-ecomance .text-white {
    color: #fff;
}

.beneficios-ecomance .py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.beneficios-ecomance .border-bottom-white {
    border-bottom: 1px solid #fff;
}

.beneficios-ecomance .border-bottom-black {
    border-bottom: 1px solid #000;
}

.beneficios-ecomance .cursor-pointer {
    cursor: pointer;
}

.beneficios-ecomance .text-xl {
    font-size: 1.25rem;
}

.beneficios-ecomance .relative {
    position: relative;
}

.beneficios-ecomance .absolute {
    position: absolute;
}

.beneficios-ecomance .top-0 {
    top: 0;
}

.beneficios-ecomance .max-w-sm {
    max-width: 400px;
}

.beneficios-ecomance .bg-white {
    background-color: #fff;
}

.beneficios-ecomance .border {
    border: 1px solid #ddd;
}

.beneficios-ecomance .rounded-lg {
    border-radius: 0.5rem;
}

.beneficios-ecomance .shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.beneficios-ecomance .rounded-t-lg {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.beneficios-ecomance .p-5 {
    padding: 1.25rem;
}

.beneficios-ecomance .max-height-17rem {
    max-height: 17rem;
}

.beneficios-ecomance .min-h-40 {
    min-height: 10rem;
}

.beneficios-ecomance .mb-2 {
    margin-bottom: 0.5rem;
}

.beneficios-ecomance .mb-3 {
    margin-bottom: 0.75rem;
}

.beneficios-ecomance .text-2xl {
    font-size: 1.5rem;
}

.beneficios-ecomance .font-bold {
    font-weight: 700;
}

.beneficios-ecomance .tracking-tight {
    letter-spacing: -0.025em;
}

.beneficios-ecomance .text-gray-900 {
    color: #1a202c;
}

.beneficios-ecomance .text-gray-700 {
    color: #4a5568;
}

/* Responsive */
@media (max-width: 768px) {
    .beneficios-ecomance .width-60, .beneficios-ecomance .width-40 {
        width: 100%;
    }
    .beneficios-ecomance .flex {
        flex-direction: column;
    }
}

/* Estilos para la nueva sección de ejemplos */
.li4mance-ejemplos {
    background: linear-gradient(to bottom, #000000, #1a1a1a, #000000); /* Fondo negro con gradiente sutil en el medio (gris oscuro leve, casi nada) */
    padding: 80px 86px 70px;
    font-family: 'Montserrat', Arial, sans-serif;
    color: #ffffff; /* Texto blanco por defecto */
    overflow: hidden; /* Para el efecto de scroll */
}

.li4mance-container-ejemplos {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.li4mance-titulo-ejemplos {
    position: sticky; /* Hace que se pegue arriba al bajar el scroll */
    top: 0; /* Se pega en la parte superior */
    z-index: 10; /* Asegura que esté por encima de otros elementos */
    background: linear-gradient(to bottom, #000000, #1a1a1a, #000000); /* Mismo fondo para que no se vea transparente */
    padding: 1rem 0; /* Espacio interno para que no se vea cortado */
    margin-bottom: 2rem; /* Espacio para que las marcas aparezcan debajo */
}

.li4mance-titulo-ejemplos h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    color: #e60303; /* Blanco para contraste */
}

.li4mance-titulo-ejemplos.visible h1 {
    opacity: 1;
    transform: translateY(0);
}

.li4mance-subtitulo-ejemplos h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    color: #ffffff; /* Blanco para contraste */
}

.li4mance-subtitulo-ejemplos.visible h2 {
    opacity: 1;
    transform: translateY(0);
}

.li4mance-marcas-grid {
    display: grid; /* Vuelto a grid de 3 columnas */
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: center;
    margin-bottom: 1rem; /* Espacio antes del texto adicional */
}

.li4mance-marca {
    position: relative;
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    background: linear-gradient(135deg, #333333, #444444); /* Gradiente oscuro para las cajas (ajustado para fondo negro) */
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1); /* Sombra blanca sutil */
}

.li4mance-marca.visible {
    opacity: 1;
    transform: translateY(0);
}

.li4mance-imagen-marca img {
    width: 300px; /* Ancho fijo para consistencia */
    height: 400px; /* Altura mayor que ancho para que sean más largas */
    object-fit: cover; /* Ajusta la imagen sin distorsionarla */
    object-position: center; /* Centra la imagen */
    border-radius: 10px;
}

.li4mance-imagen-marca1 img {
    width: 650px; /* Ancho fijo para consistencia */
    height: 400px; /* Altura mayor que ancho para que sean más largas */
    object-fit: cover; /* Ajusta la imagen sin distorsionarla */
    object-position: center; /* Centra la imagen */
    border-radius: 10px;
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .li4mance-imagen-marca1 img {
        width: auto; /* Ancho automático para mantener proporción */
        height: auto; /* Altura automática para imagen completa */
        max-width: 100%; /* Reduce ancho al 80% para márgenes laterales y evitar cortes */
        max-height: none; /* Sin límite de altura */
        object-fit: initial; /* Muestra imagen completa sin recortes */
        object-position: center; /* Centra la imagen */
        border-radius: 10px;
        display: block; /* Evita comportamientos inline */
        margin: 0 auto; /* Centra horizontalmente con márgenes automáticos */
    }
}

.li4mance-nombre-marca h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1rem;
    color: #ffffff; /* Blanco para contraste */
}

/* Efecto de pixelación y desaparición para las fotos */
.li4mance-marca.pixelate .li4mance-imagen-marca img {
    filter: url('#pixelate'); /* Aplica pixelación */
    opacity: 0; /* Desaparece */
    transition: filter 1s ease, opacity 1s ease; /* Animación suave de 1 segundo */
}

.li4mance-marca:not(.pixelate) .li4mance-imagen-marca img {
    filter: none; /* Sin filtro inicialmente */
    opacity: 1; /* Visible inicialmente */
}

/* Estilos para el texto adicional */
.li4mance-texto-adicional {
    background: transparent; /* Sin fondo adicional, ya que toda la sección es negra */
    padding: 4rem 2rem;
    border-radius: 10px;
    color: #ffffff; /* Blanco por defecto */
    text-align: center;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.li4mance-texto-adicional.visible {
    opacity: 1;
    transform: translateY(0);
}

.li4mance-texto-item {
    margin: 1rem 0;
    opacity: 0; /* Inicialmente oculto */
    transform: translateY(50px); /* Inicialmente abajo */
    transition: opacity 0.8s ease, transform 0.8s ease; /* Animación */
}

.li4mance-texto-item.visible {
    opacity: 1; /* Visible al agregar clase */
    transform: translateY(0); /* Sube */
}

.li4mance-texto-blanco {
    color: #cccccc; /* Gris claro para mejor visibilidad sobre negro (en lugar de blanco puro) */
    font-size: 3rem;
    line-height: 4;

}

.li4mance-texto-claro {
    color: #cccccc; /* Gris claro para mejor visibilidad sobre negro (en lugar de blanco puro) */
    font-size: 2rem;
    line-height: 1.2;
    margin-top: 4rem;
}

.li4mance-texto-claro1 {
    color: #cccccc; /* Gris claro para mejor visibilidad sobre negro (en lugar de blanco puro) */
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 4rem;
}

.li4mance-texto-rojo {
    color: #ff0000; /* Rojo */
    font-weight: 600;
    font-size: 2rem;
}

.li4mance-texto-grande {
    font-size: 2.25rem; /* Agrandado al 1.5 (1.5rem * 1.5) */
    font-weight: 400;
    margin-top: 2rem;
    color: #cccccc; /* Gris claro para el grande también */
    line-height: 1.2;
    margin-top: 6rem;
    margin-bottom: 3rem;
}

/* Alternativa: blur fuerte para simular pixelación */
.li4mance-marca.pixelate .li4mance-imagen-marca img {
    filter: url('#pixelate');
    opacity: 0;
    transition: filter 5s ease, opacity 5s ease; /* 2 segundos para pixelar y desaparecer */
}

/* Estilos para el logo (aparece después de los párrafos, fijo con fade-in de opacidad) */
.li4mance-marca1 {
    opacity: 0; /* Inicialmente invisible */
    transition: opacity 2s ease; /* Fade-in en 2 segundos */
    text-align: center; /* Centrado */
    margin-top: 2rem; /* Espacio arriba */
}

.li4mance-marca1.visible {
    opacity: 1; /* Completamente visible */
}

.li4mance-imagen-marca1 img {
    width: 650px; /* Mantén el ancho fijo */
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
}

/* Animación de pulso (latido) para el logo cuando es visible */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.li4mance-marca1.visible .li4mance-imagen-marca1 img {
    animation: pulse 2s infinite ease-in-out;
}

/* Responsive */
@media (max-width: 768px) {
    .li4mance-ejemplos {
        padding: 40px 20px;
    }
    .li4mance-titulo-ejemplos h1 {
        font-size: 2rem;
    }
    .li4mance-subtitulo-ejemplos h2 {
        font-size: 1.25rem;
    }
    .li4mance-marcas-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .li4mance-texto-adicional {
        padding: 2rem 1rem;
    }
    .li4mance-texto-item {
        font-size: 1.5rem;
    }
    .li4mance-texto-grande {
        font-size: 1.6875rem; /* 1.5 * 1.125 para mantener proporción en móvil */
        margin-top: 3rem;
    }
    .li4mance-imagen-marca img {
        width: 250px; /* Ancho menor en móvil */
        height: 350px; /* Altura proporcional */
    }
}
/* Estilos para la sección "Quiénes Somos" */
.li4mance-quienes-somos {
    background: linear-gradient(to bottom, #ffffff, #000000); /* Gradiente de blanco a negro */
    padding: 4rem 0;
    font-family: 'Montserrat', Arial, sans-serif;
    color: #000000; /* Texto negro por defecto */
}

.li4mance-container-new {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.li4mance-cabecera {
    text-align: center;
    margin-bottom: 2rem;
}

.li4mance-titulo-principal {
    font-size: 2rem;
    font-weight: 700;
    color: #000000;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.9); /* Fondo semi-transparente para legibilidad */
    padding: 0.5rem;
    border-radius: 8px;
    display: inline-block;
}

.li4mance-contenido {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.li4mance-seccion {
    background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco semi-transparente para legibilidad sobre el gradiente */
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.li4mance-subtitulo {
    font-size: 1.5rem;
    font-weight: 600;
    color: #000000;
    margin-bottom: 1rem;
}

.li4mance-seccion p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    color: #000000;
}

.li4mance-lista-new {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 0;
}

.li4mance-lista-new li {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    color: #000000;
}

/* Responsive */
@media (max-width: 768px) {
    .li4mance-titulo-principal {
        font-size: 1.5rem;
    }
    .li4mance-seccion {
        padding: 1rem;
    }
    .li4mance-subtitulo {
        font-size: 1.25rem;
    }
}

/* Animaciones de entrada basadas en scroll para la sección Quiénes Somos */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilos iniciales: ocultar elementos */
.li4mance-quienes-somos .li4mance-titulo-principal,
.li4mance-quienes-somos .li4mance-seccion {
    opacity: 0;
}

/* Animaciones activadas cuando la sección tiene la clase 'animate' */
.li4mance-quienes-somos.animate .li4mance-titulo-principal {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0s;
}

.li4mance-quienes-somos.animate .li4mance-seccion:nth-child(1) {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 1.5s;
}

.li4mance-quienes-somos.animate .li4mance-seccion:nth-child(2) {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 3s;
}

.li4mance-quienes-somos.animate .li4mance-seccion:nth-child(3) {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 4s;
}

.li4mance-quienes-somos.animate .li4mance-seccion:nth-child(4) {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 5s;
}

/* Estilos para la sección de explicación de baterías */
.explicacion-baterias {
    padding: 4rem 0;
    background-color: #000; /* Fondo negro */
    color: #fff; /* Letras blancas por defecto */
    font-family: 'Montserrat', Arial, sans-serif;
}

.explicacion-baterias h2 {
    font-size: 3rem;
    color: #e90e0ee1; /* Rojo primario */
    text-align: center;
    margin-bottom: 5rem;
    font-weight: 700;
}

.explicacion-intro {
    font-size: 1.6rem;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 3rem;
    margin-bottom: 7rem;
    line-height: 1.6;
    color: #fff; /* Blanco */
}

.explicacion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 7rem;
}

.explicacion-flip {
    position: relative;
    width: 100%;
    height: 300px;
    perspective: 1000px;
    cursor: pointer;
}

.explicacion-front, .explicacion-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: transform 0.6s;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.explicacion-front {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.explicacion-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
}

.explicacion-front h3 {
    font-size: 1.5rem;
    color: #020e31; /* Azul oscuro */
    margin: 1rem 0;
    font-weight: 600;
}

.explicacion-back {
    background-color: #020e31; /* Azul oscuro para el back */
    transform: rotateY(180deg);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    text-align: center;
}

.explicacion-back p {
    font-size: 1rem;
    color: #fff; /* Blanco */
    line-height: 1.5;
}

.explicacion-flip:hover .explicacion-front {
    transform: rotateY(180deg);
}

.explicacion-flip:hover .explicacion-back {
    transform: rotateY(0deg);
}

.explicacion-cta {
    text-align: center;
    background-color: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 2rem;
}

.explicacion-cta p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: #333;
}

.btn-primary {
    display: inline-block;
    background-color: var(--primary-red);
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: var(--dark-red);
}

/* Animaciones de entrada basadas en scroll */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilos iniciales: ocultar elementos */
.explicacion-baterias h2,
.explicacion-baterias .explicacion-intro,
.explicacion-baterias .explicacion-flip,
.explicacion-baterias .explicacion-cta {
    opacity: 0;
}

/* Animaciones activadas cuando la sección tiene la clase 'animate' */
.explicacion-baterias.animate h2 {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0s;
}

.explicacion-baterias.animate .explicacion-intro {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 1.5s;
}

.explicacion-baterias.animate .explicacion-flip:nth-child(1) {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 3s;
}

.explicacion-baterias.animate .explicacion-flip:nth-child(2) {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 4s;
}

.explicacion-baterias.animate .explicacion-flip:nth-child(3) {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 5s;
}

.explicacion-baterias.animate .explicacion-flip:nth-child(4) {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 6s; /* Nuevo delay para el cuarto flip box */
}

.explicacion-baterias.animate .explicacion-cta {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 7s; /* Ajustado para aparecer después del cuarto flip box */
}


/* Responsive */
@media (max-width: 768px) {
    .explicacion-baterias h2 {
        font-size: 2rem;
    }
    .explicacion-grid {
        grid-template-columns: 1fr;
    }
    .explicacion-flip {
        height: 250px;
    }
    .explicacion-image {
        height: 150px;
    }
}

/* Forzar visibilidad en móviles para redes sociales y hamburger */
@media (max-width: 1199px) {
    .top-bar .social-icons {
        display: flex !important; /* Fuerza mostrar redes sociales */
        gap: 0.5rem !important;
        flex-direction: row !important; /* Asegura horizontal */
    }
    
    .top-bar .social-link {
        display: inline-block !important; /* Fuerza cada enlace */
    }
    
    .hamburger {
        display: block !important; /* Fuerza mostrar hamburger */
        background-color: rgba(255, 255, 255, 0.2) !important; /* Tu estilo original */
        border: none !important;
        cursor: pointer !important;
        padding: 0.5rem !important;
        font-size: 1.2rem !important;
        color: #fff !important;
        font-weight: bold !important;
        border-radius: 5px !important;
        margin-left: auto !important; /* Empuja a la derecha */
        position: relative !important; /* Asegura no estar oculto */
        z-index: 1200 !important; /* Por encima de todo */
    }
    
    .hamburger:hover {
        background-color: rgba(255, 255, 255, 0.4) !important;
        color: #ff0000 !important;
    }
}

/* Aislar la sección timeline para evitar conflictos con header/top-bar */
.li4mance-timeline-section {
    position: relative !important; /* Asegura no afectar layout global */
    z-index: 1 !important; /* Bajo, para no cubrir header */
    overflow: visible !important; /* Evita ocultar elementos */
    margin-top: 0 !important; /* Ajusta si es necesario */
}

.li4mance-timeline-grid-layout {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important; /* No absoluto */
    z-index: auto !important; /* No alto */
    gap: 2rem !important;
}

/* Asegurar que no afecte móviles */
@media (max-width: 1199px) {
    .li4mance-timeline-section {
        padding: 2rem 1rem !important; /* Ajusta padding para móviles */
    }
    .li4mance-timeline-grid-layout {
        flex-direction: column !important; /* Apila en móviles para evitar overflow */
        gap: 1rem !important;
    }
}

/* Estilos para el banner de cookies (diseño mejorado con botones más pequeños) */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #333 0%, #555 100%);
    color: #fff;
    padding: 1.5rem 2rem;
    text-align: center;
    z-index: 1000;
    display: none;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    border-top: 3px solid #cc0000;
    font-family: 'Montserrat', Arial, sans-serif;
}

.cookie-banner p {
    margin: 0 0 1.5rem 0;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
}

.cookie-banner a {
    color: #ffcccc;
    text-decoration: underline;
    font-weight: 600;
}

.cookie-banner a:hover {
    color: #ff6666;
}

.cookie-banner button {
    background-color: #cc0000;
    color: #fff;
    border: 2px solid #cc0000;
    padding: 0.5rem 1rem; /* Reducido para botones más pequeños (antes 0.75rem 1.5rem) */
    margin: 0 0.5rem;
    cursor: pointer;
    border-radius: 8px;
    font-size: 0.9rem; /* Fuente más pequeña (antes 1rem) */
    font-weight: 600;
    font-family: 'Montserrat', Arial, sans-serif;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cookie-banner button:hover {
    background-color: #aa0000;
    border-color: #aa0000;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.cookie-banner button:active {
    transform: translateY(0);
}

/* Responsive: ajustes para móviles */
@media (max-width: 768px) {
    .cookie-banner {
        padding: 1rem 1.5rem;
        border-top: 2px solid #cc0000;
    }
    .cookie-banner p {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    .cookie-banner button {
        padding: 0.4rem 0.8rem; /* Aún más pequeño en móviles (antes 0.6rem 1.2rem) */
        margin: 0 0.3rem;
        font-size: 0.8rem; /* Fuente aún más pequeña en móviles (antes 0.9rem) */
    }
}


/* Estilos para el acordeón en el menú móvil */
.accordion {
    width: 100%;
    border-bottom: 1px solid #eee; /* Línea divisoria sutil, como en otros items del menú */
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem; /* Mismo padding que .menu-item */
    color: #000;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s; /* Transición suave para hover */
    border-bottom: 1px solid #eee; /* Línea divisoria */
}

.accordion-header:hover {
    background-color: #f0f0f0; /* Hover sutil, como .menu-item */
}

.accordion-header-content {
    flex: 1;
}

.accordion-content {
    height: 0; /* Inicialmente colapsado */
    overflow: hidden; /* Oculta contenido cuando colapsado */
    transition: height 0.3s ease; /* Animación suave de altura */
    background-color: #fafafa; /* Fondo sutil para distinguir submenú */
}

.accordion.expanded .accordion-content {
    height: auto; /* Permite altura automática cuando expandido (opcional, pero ayuda) */
}

.children {
    list-style: none;
    padding: 0;
    margin: 0;
}

.child {
    border-bottom: 1px solid #eee; /* Línea entre subitems */
}

.child:last-child {
    border-bottom: none; /* Sin línea en el último item */
}

.child-link {
    display: block;
    padding: 0.75rem 1.5rem; /* Padding interno para subitems */
    color: #000;
    text-decoration: none;
    font-size: 0.95rem; /* Ligeramente más pequeño que el header */
    font-weight: 400;
    transition: background-color 0.3s, color 0.3s;
    margin-left: 1rem; /* Sangría para indicar jerarquía */
}

.child-link:hover {
    background-color: #f0f0f0; /* Hover sutil */
    color: #b91919; /* Rojo primario para hover */
}

/* Indicador del acordeón (solo para móviles) */
@media (max-width: 1199px) {
    .accordion-indicator {
        width: 16px; /* Tamaño del SVG */
        height: 16px;
        color: #ad0b0b; /* Color gris para discreción */
        margin-left: 9rem; /* Empuja a la derecha */
        transition: transform 0.3s ease; /* Transición suave para rotación */
        flex-shrink: 0; /* Evita que se encoja */
    }
    
    .accordion.expanded .accordion-indicator {
        transform: rotate(90deg); /* Rota 90 grados para formar una "v" (flecha hacia abajo) */
    }
}

/* Botón de cerrar menú (X) - solo para móviles */
@media (max-width: 1199px) {
    .close-menu-btn {
        width: 24px;
        height: 24px;
        cursor: pointer;
        color: #000000ab; /* Negro para visibilidad */
        transition: color 0.3s;
        position: absolute; /* Posiciona absolutamente en la esquina superior derecha */
        top: 1rem; /* Desde arriba */
        right: 1rem; /* Desde derecha */
    }
    
    .close-menu-btn:hover {
        color: #b91919; /* Rojo al hover para feedback */
    }
}

/* Estilos para el contenedor de la imagen en la sección de profesionales */
.hero-image-profesionales {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Detrás del overlay */
    overflow: hidden; /* Corta cualquier exceso si la imagen es más grande */
    opacity: 0.85;
}

/* Estilos para la imagen en la sección de profesionales */
.hero-image-profesionales-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cubre toda el área sin distorsión, recortando si es necesario */
    object-position: center; /* Centra la imagen */
}

/* Media query para móviles (ajustes para la imagen en profesionales) */
@media (max-width: 768px) {
    .hero-image-profesionales-img {
        object-fit: cover; /* Mantén cover para que llene la pantalla en móviles */
        object-position: 69% 50%; /* Desplaza el foco ligeramente a la derecha (60% horizontal, 50% vertical) para centrar un poco más a la izquierda que 'center right' */
    }
    
    .hero-overlay-profesionales {
        padding: 1rem; /* Espacio interno en móviles para el texto */
    }
}