html {
    scroll-behavior: smooth;
}

.arrows {
        position: relative;
        width: 500px; /* Ajusta este valor según el ancho de tu contenedor */
        margin: 0 auto;
    }
    
.arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 2em;
        color: #000;
        cursor: pointer;
        user-select: none;
    }
    
.left-arrow {
        left: 0;
    }
    
.right-arrow {
        right: 0;
    }

    h1 {
        font-size: 2.5em;
        margin-bottom: 10px;
    }
    
    p {
        font-size: 1.1em;
        line-height: 1.6;
    }
    
    .highlight {
        font-weight: bold;
        color: #d9534f;
    }
    
    .price {
        font-size: 1em; /* Tamaño base para pantallas grandes */
        color: var(--price-color);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px;
        background: none;
    }

 .main-container {
        max-width: 100%;
        width: 100%;
        margin: auto;
        padding: 20px;
    }

/* Estilos generales y estilos de contenedor */
.container-fluid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%; /* Asegura que el contenedor ocupe toda la altura del header */
}

.content-wrapper {
    display: flex;
    justify-content: stretch;
    align-items: center; /* Alinea los elementos verticalmente en el centro */
}

.logo-img {
    max-height: calc(var(--header-height) - 10px);
    max-width: 100%; /* Permite que el logo sea responsivo */
}

/* Estilos para productos, botones y otros componentes */
.product {
    background-color: var(--light-color);
    border-radius: 10px;
    padding: 20px;
    width: 48%; /* Ajusta para permitir algún espacio entre los productos */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra suave para un efecto elevado */
    text-align: center; /* Centra el texto y los botones dentro del producto */
}

.img-product {
    max-width: 70%;
    height: auto; /* Mantiene la relación de aspecto de la imagen */
    margin-bottom: 10px; /* Espacio entre la imagen y el texto debajo */
}

.img-product_trix {
    max-width: 100%; /* Asegura que la imagen no sobrepase el div contenedor */
    height: auto; /* Mantiene la relación de aspecto de la imagen */
    margin-bottom: 10px; /* Espacio entre la imagen y el texto debajo */
    display: block; /* Hace que la imagen se trate como un bloque */
    margin-left: auto; /* Margen automático a la izquierda */
    margin-right: auto; /* Margen automático a la derecha */
}

.info-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff; /* Azul */
    color: white; /* Letra blanca */
    text-decoration: none;
    border-radius: 15px; /* Bordes redondeados */
    transition: background-color 0.3s ease;
    box-sizing: border-box; /* Incluye el padding y los bordes en el tamaño total del botón */
    max-width: 100%; /* Evita que el botón sea más ancho que su contenedor */
    overflow: hidden; /* Si el texto del botón es demasiado largo, se truncará */
    text-overflow: ellipsis; /* Añade puntos suspensivos si el texto se trunca */
    white-space: nowrap; /* Evita que el texto del botón se divida en varias líneas */
}

.info-button:hover, .custom-button:hover {
    background-color: #236ec0; /* Azul más oscuro al pasar el ratón */
}

.image-group {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.container {
    display: flex;
    justify-content: stretch;
    margin-top: 20px;
    max-width: none; /* Elimina cualquier restricción de ancho máximo si existe */
    width: 100%; /* Asegura que el contenedor sea de ancho completo */
    flex-wrap: wrap; /* Permite que los elementos se muevan a la siguiente línea si no hay suficiente espacio */
}

.kit-instalacion {
    font-family: Arial, sans-serif;
    margin: 20px 0;
}

.kit-instalacion h4 {
    margin-bottom: 20px;
    font-weight: bold;
}

.kit-instalacion ul {
    padding-left: 20px;
}

.kit-instalacion li {
    margin-bottom: 10px;
}

.highlight {
    color: #007BFF; /* Color de resaltado, puede cambiarlo según su diseño */
}

.recomendacion {
    padding: 10px;
    margin-top: 20px;
    background-color: #f5f5f5; /* Color de fondo, puede cambiarlo según su diseño */
    border-radius: 5px;
}

/* Estilos para el menú de hamburguesa y la lista de navegación */
#menuButton {
    display: block; /* Asegura que se muestre en dispositivos móviles */
    cursor: pointer;
    font-size: 2rem; /* Ajusta el tamaño del ícono */
    padding: 10px;
    position: absolute; /* Cambia a posición absoluta */
    top: 10px; /* Ajusta la posición en la parte superior */
    right: 10px; /* Ajusta la posición a la derecha */
    z-index: 100; /* Asegura que esté sobre otros elementos */
}

.whatsapp-button {
    display: inline-block;
    padding: 10px 20px;
    color: white;
    background-color: #25D366;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px; /* Ajusta según sea necesario */
}

#navList {
    display: none; /* La lista de navegación se muestra por defecto en pantallas grandes */
    flex-direction: row; /* En línea para pantallas grandes */
    position: relative; /* Asegura que la lista de navegación no esté absolutamente posicionada */
    width: 100%; /* Ocupa el ancho del contenedor */
    background-color: #ffffff; /* Fondo blanco para la lista de navegación */
    z-index: 9;
}

/* Cuando navList tenga la clase 'active', se mostrará */
#navList.active {
    display: flex;
    flex-direction: column;
}

#navList li {
    padding: 10px 20px; /* Ajusta este valor como sea necesario */
    border-bottom: none; /* Sin bordes para pantallas grandes */
}

#h3negro {
    color: black;
}

/* Estilos para el botón de teléfono */
.phone-button {
    background-color: #2A89D4; /* Color de fondo del botón */
    color: #ffffff; /* Color del texto */
    border: none; /* Sin borde */
    border-radius: 25px; /* Bordes redondeados */
    padding: 10px 20px; /* Espaciado interno */
    font-size: 16px; /* Tamaño de la fuente */
    font-weight: bold; /* Fuente en negrita */
    text-decoration: none; /* Sin decoración de texto */
    display: inline-block; /* Tipo de visualización */
    margin: 5px 0; /* Espaciado externo */
    transition: background-color 0.3s; /* Transición suave al cambiar el color de fondo */
}

.phone-button:hover {
    background-color: #1C6BA6; /* Color de fondo al pasar el ratón por encima */
}

.center-content {
    text-align: center;
}

.service-section {
    background: #04284c;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
    border-radius: 15px; /* Ajusta este valor según tus preferencias */
}

.service-section-green {
    background: #3895e7;
    padding: 10px;
    margin-bottom: 15px;
    text-align: center;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
    border-radius: 25px; /* Ajusta este valor según tus preferencias */
}

.service-section-green ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-section-green .logo-img {
    margin-bottom: 3px; /* Reduzca el espacio entre el logo y el texto */
}

.service-section-green h3 {
    color: #f4f4f4; /* Cambia el color de h3 en service-section-green */
    margin-bottom: 5px; /* Puedes ajustar este valor según tus necesidades */
}

.text-content h5 {
    margin-top: 10px; /* Puedes ajustar este valor según tus necesidades */
}

.logo-img {
    margin-bottom: 10px; /* Puedes ajustar este valor según tus necesidades */
}

.service-section h4, .service-section h5 {
    color: #007bff;
}

.service-section-green h4, .service-section h5 {
    color: #f4f4f4;
    font-size: 2.0em;
}

.service-section ul {
    list-style: none;
    padding: 0;
}

.service-section ul li {
    background: #4f76c5;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.service-section ul li:last-child {
    border-bottom: none;
}

.service-section-green ul li {
    background: #f8f8f8;
    padding: 5px;
    border-bottom: 1px solid #ddd;
}

.service-section-green ul li:last-child {
    border-bottom: none;
}

body {
    font-family: sans-serif;
}

.scene {
    display: inline-block;
    width: 180px;
    height: 260px;
    perspective: 600px;

    
}

.card {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transform-style: preserve-3d;
    transform-origin: center right;
    transition: transform 1s;
}

.card.is-flipped {
    transform: translateX(-100%) rotateY(-180deg);
}

.card__face {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 260px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    backface-visibility: hidden;
}

.card__face--front {
    background: transparent; /* Fondo transparente */
    backface-visibility: hidden;
}

.card__face--back {
    background: transparent; /* Fondo transparente */
    backface-visibility: hidden;
    transform: rotateY(180deg);
}