@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
    --font-principal: 'Roboto', sans-serif;
    
    --color-verde: #19A553;
    --color-gris-oscuro-fondo: #343A40; /* Este es el #343A40 para fondos */
    --color-gris-oscuro-texto: #343A40; /* Mantenemos para títulos en fondos claros */
    --color-negro: #212529;
    --color-blanco: #FFFFFF;
    --color-gris-claro-alterno: #F8F9FA; /* Para la sección Superioridad */
    --color-texto-sobre-oscuro: #F8F9FA; /* Texto claro para fondos oscuros */
    --color-gris-texto-secundario-claro: #72777c; /* Texto secundario sobre oscuro */


    --radio-borde: 6px;
    --max-width-container: 1140px;
}

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

/* --- ESTILOS PARA ANIMACIÓN DE ENTRADA --- */

/* Estado inicial de los elementos a animar */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Clase que se añade con JavaScript cuando el elemento es visible */
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

body {
    font-family: var(--font-principal);
    background-color: var(--color-blanco);
    color: var(--color-negro);
    line-height: 1.7;
    font-size: 16px;
    overflow-x: hidden; 
}

.container {
    width: 90%;
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: 60px 15px;
}

/* --- ESTILOS DE TEXTO GENERALES --- */
h1, h2, h3, h4 {
    color: var(--color-gris-oscuro-texto);
    margin-bottom: 0.75em;
    font-weight: 700;
    line-height: 1.3;
}
h1 { font-size: 2.4em; }
h2 { font-size: 2.1em; text-align: center; margin-bottom: 1.5em; }
h3 { font-size: 1.5em; color: var(--color-verde); font-weight: 500;}
h4 { font-size: 1.2em; font-weight: 500;}

p { margin-bottom: 1em; color: var(--color-gris-texto-secundario-claro); } /* Default para texto secundario */
.section-fondo-claro p { color: var(--color-gris-texto-secundario-claro); } /* Específico para fondos claros */
.section-fondo-oscuro p { color: var(--color-texto-sobre-oscuro); opacity: 0.9; }

p.lead { 
    font-size: 1.25em; 
    font-weight: 300;
    text-align: center;
 }
.section-fondo-claro p.lead { color: #6c757d; } /* Lead en fondo claro */
.section-fondo-oscuro p.lead { color: var(--color-texto-sobre-oscuro); opacity: 0.85; }


strong { font-weight: 700; }
.section-fondo-claro strong { color: var(--color-negro); }
.section-fondo-oscuro strong { color: var(--color-verde); } /* Resaltar en verde sobre oscuro */


ul { list-style-position: outside; padding-left: 20px; margin-bottom: 1em; }
li { margin-bottom: 0.5em; }
.section-fondo-claro li { color: #6c757d; }
.section-fondo-oscuro li { color: var(--color-texto-sobre-oscuro); opacity: 0.9;}


a { text-decoration: none; font-weight: 500; }
.section-fondo-claro a { color: var(--color-verde); }
.section-fondo-oscuro a { color: var(--color-verde); } /* Verde destaca bien en oscuro */
a:hover { text-decoration: underline; }

.text-center { 
    text-align: center;
    margin: auto;
 }
.text-verde { color: var(--color-verde); }


/* --- ESTILOS PARA SECCIONES CON FONDO OSCURO --- */
.section-fondo-oscuro {
    background-color: var(--color-gris-oscuro-fondo);
    color: var(--color-texto-sobre-oscuro);
}
.section-fondo-oscuro h1,
.section-fondo-oscuro h2,
.section-fondo-oscuro h3,
.section-fondo-oscuro h4 {
    color: var(--color-blanco); /* Títulos blancos sobre fondo oscuro */
}
.section-fondo-oscuro h3 { /* El h3 que es verde por defecto, lo hacemos blanco */
    color: var(--color-blanco); 
}
.section-fondo-oscuro .feature-icon svg { fill: var(--color-verde); } /* Iconos de features en verde */


/* --- BOTONES --- */
.btn {
    display: inline-block;
    font-weight: 500;
    color: var(--color-blanco);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: var(--color-verde);
    border: 1px solid var(--color-verde);
    padding: 0.8rem 1.4rem;
    margin-top: 15px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 50px;
    transition: all 0.2s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.btn:hover {
    background-color: #148c45;
    border-color: #148c45;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn-outline { /* Para el hero banner */
    background-color: transparent;
    color: var(--color-blanco); 
    border-color: var(--color-blanco); 
}
.btn-outline:hover { 
    background-color: var(--color-blanco); 
    color: var(--color-verde);
}

/* --- HERO BANNER --- */
.hero-banner {
    background-size: cover;
    background-position: center;
    color: var(--color-blanco);
    padding: 50px 0 100px 0;
    height: 800px;
    text-align: center;
    position: relative;
}
.hero-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(33, 37, 41, 0.65); 
    z-index: 1;
}
.hero-content { position: relative; z-index: 2;}
.hero-banner h1 { color: var(--color-blanco); margin-bottom: 0.4em;}
.hero-banner .lead { color: rgba(255,255,255,0.85); max-width: 700px; margin: 0 auto 1.5em auto;}
.hero-banner .btn { margin: 0.5em;}

.logobanner{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 50px;
    align-items: center;
    width: 90%;
    max-height: 100px;
    margin: 0px auto 80px auto;
}

.logobanner img{
    display: flex;
    width: 35%;
    max-height: 100%;
    margin: 0px;
    padding: 0px;
}

/* --- SECCIÓN INTRODUCCIÓN --- */
.intro-section { background-color: var(--color-blanco); } /* Fondo claro por defecto */
.intro-section .lead { color: var(--color-gris-oscuro-texto); }

/* --- SECCIÓN SUPERIORIDAD (Características con iconos) --- */
.section-superioridad {
    background-color: var(--color-gris-claro-alterno); /* Un gris muy claro específico */
}
.section-superioridad h2 { color: var(--color-gris-oscuro-texto); }
.section-superioridad p { color: #6c757d; }
.section-superioridad .feature-item h3 { color: var(--color-gris-oscuro-texto); }
.section-superioridad .feature-icon svg { fill: var(--color-verde); } /* Iconos verdes */

.superioridad-features {
    display: flex; /* CAMBIO A FLEXBOX */
    flex-wrap: wrap; /* Permitir que los items pasen a la siguiente línea */
    gap: 30px;
    justify-content: center; /* Centrar items si no ocupan todo el espacio */
}
.feature-item { 
    padding: 20px; 
    text-align: center;
    flex-basis: 300px; /* Base para cada item */
    flex-grow: 1; /* Permitir que crezcan para llenar espacio */
}
.feature-icon {
    font-size: 2.5em; 
    margin-bottom: 0.5em;
    display: inline-block; 
}


/* --- SECCIONES DE CONTENIDO (PRODUCTOS) --- */
.content-section { padding: 80px 0; }
.section-fondo-claro { background-color: var(--color-blanco); }

.content-layout { /* CAMBIO DE .content-grid A .content-layout CON FLEXBOX */
    display: flex;
    flex-wrap: wrap; /* Para que en móvil se apilen */
    gap: 50px; 
    align-items: center;
}
.content-section.layout-reversed .content-layout {
    flex-direction: row-reverse; /* Invierte el orden de los hijos */
}


.content-image, .content-text {
    flex: 1; /* Ambos ocuparán el espacio disponible equitativamente */
    min-width: 300px; /* Mínimo ancho antes de apilarse (controlado por media query) */
}
.content-image { text-align: center; } 

.content-image img {
    max-width: 100%;
    height: auto;
    max-height: 350px; 
    object-fit: contain; 
}
/* Estilos de texto dentro de .content-text son manejados por .section-fondo-claro/.section-fondo-oscuro */
.content-text h3 { /* Título de producto, sobrescribe color verde si está en fondo oscuro */
    color: inherit; /* Hereda de .section-fondo-oscuro h3 (que es blanco) */
    font-weight: 700; /* Lo hacemos más fuerte que el H3 verde por defecto */
    font-size: 1.4em;
}


.inline-product-icon {
    height: 20px; 
    width: auto;
    vertical-align: middle;
    margin-left: 5px;
    opacity: 0.8;
}
.section-fondo-oscuro .inline-product-icon { /* Para que se vean sobre fondo oscuro */
    filter: brightness(0) invert(1); /* Invierte colores, haciéndolo blanco */
}


/* --- SECCIÓN DISTRIBUIDOR LIFTRANGER --- */
.distributor-section {
    background-color: var(--color-gris-claro-alterno); /* TU FONDO: #F8F9FA */
    color: var(--color-gris-oscuro-texto); /* TU TEXTO GENERAL: #343A40 */
    padding-top: 30px; 
    padding-bottom: 30px;
}
.distributor-section h2 { 
    color: var(--color-gris-oscuro-texto); /* TU COLOR DE TÍTULO */
    margin-bottom: 0.5em; 
}
.distributor-section .lead { 
    color: var(--color-negro); /* TU COLOR DE LEAD */
 
    margin-bottom: 1em; 
}

.distributor-logo img { 
    max-height: 150px; /* TU TAMAÑO DE LOGO */
    width: auto; 
    margin-bottom: 25px; 
}

/* Grid para las Cards de Beneficios */
.distributor-benefits-grid {
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: space-around; 
    max-width: 900px; /* O el ancho que prefieras */
    margin-left: auto;
    margin-right: auto;
    text-align: left; 
}

.benefit-card {
    background-color: var(--color-blanco); /* Cards blancas sobre fondo gris claro */
    padding: 25px;
    border-radius: var(--radio-borde);
    border: 1px solid var(--color-borde-sutil); /* Borde sutil para definir la card */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Sombra más suave para fondo claro */
    display: flex;
    width: 28%;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}

/* Opcional: Estilo para un icono dentro de la card */
/*
.benefit-card-icon {
    font-size: 2.5em; 
    color: var(--color-verde); 
    margin-bottom: 15px;
}
*/

/* Ajuste para el h4 si ahora hay un icono encima */
.benefit-card h4 {
    color: var(--color-gris-oscuro-texto); 
    font-size: 1.20em; 
    /* margin-top: 0; QUITADO - ahora hay un icono encima */
    margin-bottom: 10px;
    font-weight: 700; 
}
.benefit-card p {
    color: var(--color-negro); 
    opacity: 0.80; 
    font-size: 0.95em; 
    margin-bottom: 0; 
    flex-grow: 1;
}

.benefit-card {
    background-color: var(--color-blanco); 
    padding: 25px;
    border-radius: 10px;
    border: 1px solid var(--color-borde-sutil); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); 
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar contenido de la card horizontalmente */
    text-align: center; /* Centrar texto de la card */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* REEMPLAZA O AÑADE ESTO EN TU ARCHIVO style.css */

.benefit-card-icon {
    padding: 0px;
    /* Define el tamaño del contenedor del ícono */
    width: 80px;
    height: 80px;

    /* Centra el ícono perfectamente dentro del contenedor */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Centra el contenedor del ícono y le da espacio abajo */
    margin: 0 auto 1em;
}

/* Opcional pero recomendado: asegura que la imagen se ajuste bien */
.benefit-card-icon img {
    max-width: 100%;
    width: 60px;
    height: 60px;
}

.benefit-card-icon-2 {
    /* No es necesario font-size si usas SVG con width/height definidos */
    display: flex;
    height: 70px;
    width: auto;
    color: var(--color-verde); /* Color del icono SVG */
    margin: 30px auto 30px auto; /* Más espacio después del icono */
    line-height: 1; /* Para asegurar que el SVG se alinee bien si tiene texto interno */
    align-content: center;
    justify-content: center;
}








/* --- CTA FINAL --- */
.cta-final-section {
    background-color: var(--color-verde);
    color: var(--color-blanco);
    text-align: center;
}
.cta-final-section h2 { color: var(--color-blanco); }
.cta-final-section p { color: rgba(255,255,255,0.9); max-width: 600px; margin-left:auto; margin-right:auto; }
.cta-final-section .btn {
    background-color: var(--color-blanco);
    color: var(--color-verde);
    border-color: var(--color-blanco);
    font-weight: 700;
}
 .cta-final-section .btn:hover {
    background-color: var(--color-gris-claro-alterno);
    color: var(--color-verde);
}

/* --- FOOTER --- */
.site-footer {
    display: flex;
    padding-top: 40px;
    background-color: var(--color-negro);
    color: var(--color-gris-texto-secundario-claro); /* Texto secundario más claro para footer */
    text-align: center;
    font-size: 0.9em;
}
.site-footer p { margin-bottom: 0.5em; color: var(--color-gris-texto-secundario-claro); }
.site-footer a { color: var(--color-verde); }

.footer-logo{
    display: flex;
    width: 65%;
    margin: 10px auto;
    flex-direction: row;
    padding: 20px 10px;
    text-align: center;
    justify-content: center;
}

.footer-logo-comu, .footer-logo-lift{ 
    display: flex;
    height: auto;
    justify-content: center;
    align-items: center; 
    width: 200px;
    opacity: 0.7; 
    margin: 0 20px;
}

.footer-logo-comu img{ 
    height: 30px;
    width: 300px;
    padding: 0;
    margin: auto;
}


.footer-logo-lift img{ 
    height: 55px;
    width: 300px;
    padding: 0;
    margin: auto;
}


.boton-contacto{
    display: flex;
    margin: 60px 0 0 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.boton-contacto a{
    cursor: pointer;
    background-color: var(--color-verde);
    color: var(--color-blanco);
    padding: 0.8em 3em;
    border-radius: 50px;
    transition: all 0.2s ease-in-out;
    font-weight: 500;
    text-align: center;
    background-color: var(--color-verde);
    border: 1px solid var(--color-verde);
    margin-top: 15px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 50px;
    transition: all 0.2s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}



/* ---------------------------------------- RESPONSIVE -------------------------------------------------------
-------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------- */
@media (max-width: 992px) {
.hero-banner{
    min-height: 90vh;
    padding-top: 10px;
}

    h1 { font-size: 2.4em; }
    h2 { font-size: 2em; }
    .logobanner{
    display: flex;
    min-height: 25vh;
    flex-direction: column;
    margin-bottom: 60px;
    margin-top: 0;
    }

    .logobanner img{
    display: flex;
    min-height: 40%;
    width: 70%;
}
}
@media (max-width: 768px) {
    .container { padding: 40px 15px; }
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.4em; }

    .content-layout { /* Ajuste para Flexbox en móvil */
        flex-direction: column; /* Apilar siempre en móvil */
    }
    .content-section.layout-reversed .content-layout { /* Mantiene la dirección de columna */
        flex-direction: column;
    }
    .content-image { /* Imagen siempre arriba en móvil */
        order: -1; /* Mueve la imagen al principio del flujo flex */
        margin-bottom: 30px;
    }
     .content-text h2, .content-text h3 { text-align: center; }

    .superioridad-features { 
        flex-direction: column; /* Apilar features en móvil */
        gap: 20px;
    }
    .feature-item {
        flex-basis: auto; /* Permitir que ocupe todo el ancho disponible */
    }

    .logobanner{
    display: flex;
    margin-top: +20px;
    min-height: 300px;
    flex-direction: column;
    margin-bottom: 15px;
}

.logobanner img{
    display: flex;
    min-height: 40%;
    width: 100%;
}

.distributor-benefits-grid{
    display: flex;
    flex-direction: column;
}

.benefit-card{
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: auto;
}

.product-slider-container{
display:flex;
flex-direction: column;
}


.footer-logo{
    width: 90%;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.footer-logo-comu, .footer-logo-lift{ 
    margin: 0 20px;
}


}

/* Estilos para el Slider de Productos - MODIFICADO */
.product-slider-container {
    display: flex;
    flex-direction: column; /* Mantenemos columna para responsividad inicial */
    gap: 45px; /* Reducimos un poco el espacio para que se vea mejor */
    align-items: center;
    padding: 20px 0;
    width: 80%;
    margin: 0 auto 0 auto;
    /*border: solid 2px brown;*/
}

/* NUEVO: Contenedor para la imagen principal y los thumbnails */
.product-image-gallery {
    display: flex;
    flex-direction: column; /* Imagen principal arriba, thumbnails abajo */
    align-items: center;
    width: 100%; /* Ocupar todo el ancho en móvil */
    max-width: 450px; /* Limitar ancho en escritorio */
}

.product-main-image {
    width: 100%;
    margin-bottom: 80px;
    /* ELIMINADO: border: 1px solid var(--color-gris-borde-suave, #ddd); */
    border-radius: 8px; /* Mantenemos el borde redondeado si lo deseas, o elimínalo también */
    overflow: hidden;
    /*box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Mantenemos la sombra */
}

.product-main-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    max-height: 600px;
}

.product-thumbnails {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%; /* Los thumbnails ocupan el ancho de su contenedor padre */
}

.product-thumbnails .thumbnail {
    width: 70px; /* Podemos hacerlos un poco más pequeños */
    height: 70px;
    object-fit: cover;
    border: 2px solid var(--color-gris-borde-suave, #ddd); /* Borde visible en thumbnails */
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.3s ease, transform 0.2s ease;
}

.product-thumbnails .thumbnail:hover {
    transform: scale(1.05);
    border-color: var(--color-primario, #007bff);
}

.product-thumbnails .thumbnail.active {
    border-color: var(--color-secundario, #ffc107);
    box-shadow: 0 0 5px var(--color-secundario, #ffc107);
}

.product-description-area {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: 0;
    min-height: 400px;
    height: auto;
    max-height: 600px;
}

.product-description {
    display: none;
}

.product-description.active {
    display: flex;
    flex-direction: column;
    height: 50%;
}

.boton-contacto{
    margin: 60px auto 0 auto;
}


.boton-contacto a:hover{
    background-color: #148c45;
    border-color: #148c45;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.product-description h3 {
    margin-top: 0;
    margin-bottom: 0.5em;
    
    font-size: 1.6em;
    color: var(--color-titulos-oscuro, #333);
}

.section-fondo-oscuro .product-description h3 {
    color: var(--color-texto-claro, #f8f9fa);
}

.product-description p {
    margin-bottom: 0.8em;
    line-height: 1.7;
}


/* Media Query para Escritorio y Tablets Grandes - MODIFICADO */
@media (min-width: 768px) {
    .product-slider-container {
        flex-direction: row;
        align-items: flex-start;
    }

    /* Usaremos el product-image-gallery para la columna de imagen/thumbnails */
    .product-image-gallery {
        width: 45%; /* Ancho para la columna de imagen y thumbnails */
        /* ELIMINADO: display: flex; ya lo tiene */
        /* ELIMINADO: flex-direction: column; ya lo tiene */
        /* ELIMINADO: align-items: center; ya lo tiene */
    }

    /* .product-main-image y .product-thumbnails ya están dentro de .product-image-gallery
       y configurados para apilarse verticalmente por defecto. */

    .product-description-area {
        width: 55%;
        padding-left: 30px;
    }
}

/* Ajustes específicos para el layout-reversed en escritorio */

.layout-reversed .product-description-area {
    padding-left: 0;
    padding-right: 30px;
}


/* --- ESTILOS PARA BOTÓN FLOTANTE DE WHATSAPP CON ANIMACIÓN --- */
.whatsapp-fab {
  position: fixed;
  width: 70px;
  height: 70px;
  bottom: 25px;
  right: 25px;
  background-color: #25D366;
  color: #FFFFFF;
  border-radius: 50%;
  text-align: center;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* --- ¡AQUÍ ESTÁ LA MAGIA! --- */
  /* squash-jump: Es el nombre de la animación que definimos abajo.
    5s:         La duración total del ciclo (la pausa + el salto).
    infinite:   Para que se repita en un bucle infinito.
    ease-in-out: Hace que la animación sea suave.
  */
  animation: squash-jump 5s infinite ease-in-out;
}

.whatsapp-fab:hover {
  /* Mantenemos el efecto al pasar el mouse, pero quitamos la animación para que no interfiera */
  transform: scale(1.1);
  animation: none;
}


/* --- Definición de la "coreografía" de la animación --- */
/*
  Usamos porcentajes para controlar el tiempo.
  De 0% a 80%, el botón está quieto.
  En el último segundo del ciclo de 5s, ocurre el salto.
*/
@keyframes squash-jump {
  /* El botón está quieto la mayor parte del tiempo */
  0%, 80%, 100% {
    transform: translateY(0) scale(1);
  }

  /* 1. Se ENCOGE para tomar impulso */
  85% {
    transform: translateY(5px) scale(0.95, 0.9);
  }

  /* 2. SALTA con fuerza */
  92% {
    transform: translateY(-15px) scale(1, 1.1);
  }

  /* 3. Aterriza y rebota un poquito */
  96% {
    transform: translateY(2px) scale(1.05, 0.95);
  }
}