/* --- Base y Tipografía --- */
:root {
    --color-primary: #131863; /* Azul medio - Confianza */
    --color-secondary: #FFC107; /* Amarillo/Naranja - Urgencia */
    --color-dark: #383838;
    --color-light: #F4F4F4;
    --font-family: 'Poppins', sans-serif;
}

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

body {
    font-family: var(--font-family);
    color: var(--color-dark);
    line-height: 1.6;
    background-color: #fff;
}

h1, h2, h3 {
    font-weight: 800;
    line-height: 1.2;
}
h1{
    font-size: 5.3em;
 }
h2{
    font-size: 2.3em;
 }
h3{
   font-size: 1.8em;
}
section {
    padding: 80px 5%;
    text-align: center;
}

/* --- Animaciones (Para AOS manual con JS) --- */
[data-animation] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

[data-animation].animate {
    opacity: 1;
    transform: translateY(0);
}

[data-animation="slide-right"].animate {
    transform: translateX(0);
}
[data-animation="slide-right"] {
    transform: translateX(-50px);
}
[data-animation="slide-left"].animate {
    transform: translateX(0);
}
[data-animation="slide-left"] {
    transform: translateX(50px);
}
[data-animation="fade-in"].animate {
    opacity: 1;
    transform: translateY(0);
}

/* --- Botones y CTAs --- */
.cta-main, .cta-secondary, .cta-submit, .cta-nav {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.cta-main {
    background-color: var(--color-primary);
    color: var(--color-light);
    font-size: 1.1em;
    margin-top: 20px;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 240, 119, 0.5);
}

.cta-main:hover {
    transform: scale(1.05);
}

/* Animación de pulso para el CTA principal */
.pulse {
    animation: pulse-animation 2s infinite;
}
@keyframes pulse-animation {
    0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

.cta-secondary {
    background-color: var(--color-primary);
    color: white;
    margin-top: 40px;
}

.cta-secondary:hover {
    background-color: #1565C0;
}

.cta-submit {
    width: 100%;
    background-color: var(--color-primary);
    color: white;
    border: none;
    cursor: pointer;
}
.cta-submit:hover {
    background-color: #1565C0;
}

/* --- 1. Header y Menú Hamburguesa --- */
.header {
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Reducimos el padding-top para hacer que el logo 'cuelgue' */
    padding: 16px 5%; 
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Contenedor del logo para posicionar la imagen */
.logo-container {
    display: flex;
    align-items: flex-end; /* Alinea el texto a la parte baja de la imagen */
    position: relative; /* Clave para que la imagen sobresalga */
}

/* Estilo para la imagen del logo */
.logo-img {
    height: 130px; /* **AUMENTADO** el tamaño para que sea más prominente */
    width: auto;
    position: absolute; 
    top: -14px; /* **AJUSTADO**: Mueve la imagen 30px hacia arriba desde el tope del header */
    left: 0;
}

/* Estilo para el texto "Fumigaciones CS" */
.logo-text {
    font-size: 1.8em;
    font-weight: 800;
    color: var(--color-dark);
    margin-left: 150px; /* **AUMENTADO** este margen para separar el texto del logo */
    padding-bottom: 10px; /* Pequeño ajuste vertical */
}

.logo-text span {
    color: var(--color-primary);
}

.nav-menu a {
    color: var(--color-dark);
    text-decoration: none;
    margin-left: 30px;
    font-weight: 600;
}

.cta-nav {
    background-color: var(--color-secondary);
    padding: 8px 20px;
    color: var(--color-dark) !important;
    font-size: 0.9em;
    margin-left: 20px;
}

.burger-menu {
    display: none;
    cursor: pointer;
    /* Lo establecemos con un z-index muy alto para que NUNCA quede cubierto por el menú (z-index: 999) */
    /* z-index: 1002;*/
}

.burger-menu div {
    width: 25px;
    height: 3px;
    background-color: var(--color-dark);
    margin: 5px;
    transition: all 0.3s ease;
}

/* --- 2. Sección Hero --- */

/* Moviendo y Ajustando estilos del Pre-título (SERVICIO DE FUMIGACIÓN) */
.hero-pretitle {
    color: #FD0100; /* Rojo */
    font-size: 4em !important; /* FORZADO A 4EM */
    font-weight: 800;
    margin-bottom: 5px;
}
.hero-subtitle {
    color: var(--color-primary); /* Azul */
    font-size: 3em !important; /* FORZADO A 3EM */
    font-weight: 800;
    margin-bottom: 20px; /* ¡REDUCIDO DE 40PX A 20PX! */
}
/* Eliminado el estilo antiguo para h1 y p en hero-content para evitar conflictos */
.hero-content h1 {
    font-size: initial;
    margin-bottom: initial;
}
.hero-content p {
    font-size: initial;
    margin-bottom: initial;
    /*font-weight: initial;*/
}

/* Contenedor Flex para la imagen y los textos laterales */
.hero-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px; /* ¡AUMENTADO DE 30PX A 50PX PARA MÁS SEPARACIÓN! */
    margin-bottom: 30px;
}

.layout-item {
    flex: 1;
    max-width: 2050px;
}

.text-left p {
    color: var(--color-primary);
    font-size: 1.8em;
    font-weight: 800;
    text-align: right;
}

.text-right { /* Agregamos esta regla para darle espacio al texto derecho */
    padding-left: 10px;
}

.text-right p {
    color: var(--color-dark);
    font-size: 1.4em;
    font-weight: 600;
    text-align: left;
}

.hero-image {
    max-width: 400px; /* ¡AUMENTADO EL TAMAÑO DE LA IMAGEN A 550PX! */
    height: auto;
    object-fit: contain;
}
/* Sección Hero: Ajustes de Fondo y Color de Texto */
/* Sección Hero: Ajustes de Fondo y Color de Texto */
.hero-section {
    /* Fondo limpio para que resalte la imagen y el texto */
    background: white; 
    height: auto; /* Ajustamos la altura al contenido */
    padding-top: 50px;
    padding-bottom: 50px;
}
.hero-content {
    /* **ESTO ES LO CLAVE PARA EL CENTRADO** */
    max-width: 1200px; 
    margin: 0 auto; /* Asegura que el contenido se centre horizontalmente. */
    /* -------------------------------------- */
    color: var(--color-dark);
    text-align: center; /* Asegura que los textos dentro se centren, aunque ya estaba en el .hero-section */
}

/* --- Nueva Animación para la Imagen --- */
@keyframes shake-animation {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(-1deg); }
    20% { transform: rotate(1deg); }
    30% { transform: rotate(-1deg); }
    40% { transform: rotate(1deg); }
    50% { transform: rotate(0deg); }
}
[data-animation="fade-in-delay"].animate {
    opacity: 1;
    transform: translateY(0);
    /* Animación de "agitación" para el zancudo */
    animation: shake-animation 1s ease-in-out; 
}

/* --- Media Query para Responsive del Hero --- */
@media (max-width: 992px) {
    .hero-pretitle {
        font-size: 3em;
    }
    .hero-subtitle {
        font-size: 2.5em;
    }
    .text-left p {
        font-size: 1.5em;
    }
    .text-right p {
        font-size: 1.2em;
    }
}

@media (max-width: 768px) {
    .hero-layout {
        flex-direction: column;
        gap: 20px;
    }
    .layout-item {
        max-width: 100%;
        text-align: center !important;
    }
    .text-left p, .text-right p {
        text-align: center;
        font-size: 1.3em;
    }
    
    .hero-pretitle {
        font-size: 3em !important; /* Ajuste específico para móvil */
    }
    .hero-subtitle {
        font-size: 1.7em !important;
        line-height: 1.6;

    }
    .hero-image {
        max-height: 250px;
    }
}

/* --- 3. Sección Servicios --- */
.services-section h2 {
    margin-bottom: 50px;
    color: var(--color-primary);
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background-color: var(--color-light);
    padding: 30px;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.service-card h3 {
    margin: 15px 0;
    color: var(--color-dark);
}

.service-card i { /* Iconos genéricos (usar iconos SVG o Font Awesome reales) */
    font-size: 3em;
    color: var(--color-secondary);
    display: block;
    margin: 0 auto;
    width: 50px;
    height: 50px;
    background: var(--color-primary);
    border-radius: 50%;
}
/* Estos iconos son placeholder, deberías usar librerías como Font Awesome 
.icon-rodent::after { content: '🐀'; }
.icon-bedbug::after { content: '🛏️'; }
.icon-termite::after { content: '🐛'; }
*/
/* --- 4. Sección Garantía --- */
.assurance-section {
    background-color: var(--color-primary);
    color: white;
    padding: 80px 5%;
}

.assurance-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

.assurance-content h2 {
    text-align: center;
    margin-bottom: 40px;
}

.assurance-content ul {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.assurance-content li {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 8px;
    font-weight: 300;
}
/* >>> REGLA CORREGIDA: Selecciona la etiqueta strong dentro de <li> <<< */
.assurance-content li div { 
    font-weight: 800; /* Usamos 800 para que sean aún más prominentes */
    margin-bottom: 10px;
    font-size: 1.2em;
}
/*
.assurance-content li ** {
    font-weight: 600;
}*/

/* --- 5. Sección Proceso --- */
.process-section {
    background-color: white;
}

.steps-container {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-top: 50px;
}

.step-card {
    flex: 1;
    max-width: 300px;
    padding: 20px;
    border-radius: 10px;
    position: relative;
}

.step-number {
    display: block;
    font-size: 3em;
    font-weight: 800;
    color: var(--color-secondary);
    line-height: 1;
    margin-bottom: 10px;
}
.step-card h3 {
    color: var(--color-primary);
}

/* Línea de conexión (solo para desktop) */
.steps-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 4px;
    background-color: var(--color-light);
    z-index: -1;
    display: none; /* Se oculta en móvil, se activa en desktop */
}

/* --- 5.5 Sección Medios del Proceso (Añadido) --- */
.process-media-section {
    padding: 60px 5%; /* Menos padding que otras secciones */
    background-color: var(--color-light); /* Fondo claro para destacarla */
}
.process-media-section h2 {
    margin-bottom: 40px;
    color: var(--color-dark);
}

.media-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.media-item {
    flex: 1;
    text-align: center;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.media-item h3 {
    color: var(--color-primary);
    margin-bottom: 15px;
}

.process-image, .process-video {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    max-height: 400px; /* Limitamos la altura */
    object-fit: cover; /* Aseguramos que cubran el espacio sin distorsión */
}

/* >>> AÑADIMOS ESTE BLOQUE para fijar la altura del iframe de YouTube <<< */
iframe.process-video {
    /* La altura debe ser menor o igual al max-height definido arriba */
    height: 350px; 
    /* Esta propiedad no aplica a iframes, la anulamos por seguridad */
    object-fit: unset; 
}

/* --- 6. Sección Contacto --- */
.contact-section {
    background-color: var(--color-light);
}

.contact-container {
    display: flex;
    gap: 50px;
    max-width: 1000px;
    margin: 30px auto 0;
    text-align: left;
    align-items: center;
}

.contact-info, .contact-form {
    flex: 1;
}

.phone-large {
    font-size: 1.8em;
    font-weight: 800;
    /*color: var(--color-primary);*/
    color: #F80000;
    margin-bottom: 20px;
}

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: var(--font-family);
}
.contact-form textarea {
    resize: vertical;
}

/* ================================== */
/* --- RESPONSIVE / Media Queries --- */
/* ================================== */
@media (max-width: 992px) {
    .hero-content h1 {
        font-size: 2.5em;
    }
}

@media (max-width: 768px) {
    /* Ocultar menú normal y mostrar hamburguesa */
    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 60%;
        height: 100vh;
        background-color: var(--color-dark);
        flex-direction: column;
        align-items: center;
        transform: translateX(100%);
        transition: transform 0.5s ease-in-out;
        z-index: 999;
        padding-top: 100px;
        display: flex; /* Para que la transición funcione */
    }

    .nav-menu.active {
        transform: translateX(0);
    }

    .nav-menu a {
        color: white;
        margin: 20px 0;
        font-size: 1.2em;
    }

    .cta-nav {
        margin-top: 30px;
    }

    .burger-menu {
        display: block;
        /* >>> MODIFICACIÓN CLAVE: Posicionamiento fijo para que no sea cubierto <<< */
        position: fixed; /* Lo saca del flujo del header */
        top: 30px; /* Ajusta la posición para que quede en el mismo lugar que antes */
        right: 5%; /* Ajusta la posición a la derecha */
        z-index: 1002; /* Lo ponemos por encima del menú (999) y del header (1000) */
    }
   
    .toggle div {
        background-color: white !important; /* Hacemos las líneas blancas para que contrasten con el fondo oscuro del menú */
    }

    /* Animación X del menú hamburguesa */
    .toggle .line1 {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    .toggle .line2 {
        opacity: 0;
    }
    .toggle .line3 {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    /* Ajustes de secciones */
    .contact-container {
        flex-direction: column;
    }
    .contact-info {
        text-align: center;
        margin-bottom: 30px;
    }
    
    .steps-container {
        flex-direction: column;
    }
    .step-card {
        max-width: 100%;
    }

    .logo-text {
        font-size: 1.3em;
        margin-left: 110px; /* **AUMENTADO** este margen para separar el texto del logo */

    }
    
    /* REGLA CORREGIDA PARA EL H1 EN MÓVIL */
    h1{
        /* Originalmente 1em, lo aumenté a 3em para que fuera más legible, 
           pero las clases .hero-pretitle y .hero-subtitle son las que controlan el tamaño en el hero. */
        font-size: 3em; 
     }

     /* Estilo para la imagen del logo */
    .logo-img {
        height: 90px; /* **AUMENTADO** el tamaño para que sea más prominente */
    }

    /* AJUSTE CLAVE PARA LA NUEVA SECCIÓN DE MEDIOS */
    .media-container {
        flex-direction: column;
        gap: 20px;
    }
    
    /* OPTIMIZACIÓN: Reducir la altura máxima del contenido multimedia en móvil */
    .process-image, .process-video {
        max-height: 300px; 
        object-fit: contain; /* Aseguramos que no se recorte */
    }
    
    /* ------------------------------------------------ */
    /* >>> AJUSTES DE FOOTER PARA MÓVIL (SOLUCIÓN) <<< */
    /* ------------------------------------------------ */

    /* Reglas para el Footer de Dos Mitades */
    .footer-container {
        /* CLAVE: Cambia la dirección del flex a columna */
        flex-direction: column; 
        gap: 50px; /* Aumentamos el espacio entre las dos mitades */
    }

    .footer-left-content {
        padding-top: 0px; /* Removemos el padding superior que solo era para el logo en desktop */
    }

    /* Aseguramos que el logo se posicione de forma normal en el flujo */
    .footer-logo {
        position: static; /* Quita el posicionamiento absoluto */
        transform: none; /* Asegura que no tenga ninguna transformación */
        margin-bottom: 20px; /* Agrega un margen debajo del logo */
        top: auto; /* Anula el 'top' negativo del desktop */
        height: 100px; /* Tamaño ajustado para móvil */
        /* << AQUÍ VAMOS A AÑADIR UN MARGIN SUPERIOR PARA EMPUJARLO >> */
        margin-top: 60px; 
    }

    .footer-right-content {
        text-align: center;
        /* Removemos el padding izquierdo que separaba la sección en desktop */
        padding-left: 0; 
    }
    
    .social-cta-text {
        margin-top: 20px; /* Empuja el texto 30px hacia abajo */        
    }

    .impact-title-large {
        font-size: 2.5em;
    }

    .impact-subtitle-small {
        font-size: 1.2em;
    }
    
    .plagas-display-split {
        flex-wrap: wrap; 
    }

    .plaga-icon-split {
        width: 70px;
    }
} 


/* --- Botón Flotante de WhatsApp (ACTUALIZADO: Más grande y con imagen al 100%) --- */
.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1000;
    
    /* TAMAÑO AUMENTADO */
    width: 70px; 
    height: 70px; 
    /* Quitamos el background-color ya que la imagen JPG lo incluye */
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    
    transform: scale(1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; 
}

/* Efecto al pasar el ratón */
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(37, 211, 102, 0.4); 
}

/* Imagen dentro del botón (DEBE OCUPAR TODO EL CONTENEDOR) */
.whatsapp-icon {
    width: 100%; /* Ocupa el 100% del contenedor (70px) */
    height: 100%;
    border-radius: 50%; /* Asegura que la imagen se vea redonda */
}

/* --- Tooltip / Mensaje Emergente (Fijo) --- */
.whatsapp-tooltip {
    position: absolute;
    /* AJUSTADO: Separación del botón (70px del botón + 10px de gap) */
    right: 80px; 
    top: 50%;
    transform: translateY(-50%);

    background-color: var(--color-light); 
    color: var(--color-dark);
    padding: 8px 12px;
    border-radius: 8px;
    white-space: nowrap; 
    font-size: 0.95em;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    
    animation: slideIn 0.5s ease-out;
}

/* Animación de Keyframes para la entrada del Tooltip (se mantiene) */
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

/* Ocultar el tooltip en móvil y ajustar tamaño del botón */
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 15px;
        right: 15px;
        width: 60px; /* Tamaño ligeramente más grande en móvil */
        height: 60px;
    }
    .whatsapp-icon {
        width: 100%;
        height: 100%;
    }
    /*.whatsapp-tooltip {
        display: none; 
    }*/
}


/* ================================================= */
/* --- FOOTER DE DOS MITADES (SOLICITUD ACTUAL) --- */
/* ================================================= */

.footer-simple-split {
    /* Usamos el color principal (azul oscuro) como fondo */
    background-color: var(--color-primary); 
    color: var(--color-light); 
    padding: 50px 5%;
    background-image: url('images/fondo-zancudo-1.png');
    background-position: left bottom; /* Centra la imagen */
    background-repeat: no-repeat; /* No repite la imagen */

    background-image: url('images/fondo-zancudo-1.png'), url('images/fondo-zancudo-2.png'); /* La primera es la de arriba */
  background-position: left bottom, right top; /* Posición de imagen1, Posición de imagen2 */
  background-repeat: no-repeat, no-repeat; /* Repetición de imagen1, Repetición de imagen2 */


}

.footer-container {
    display: flex;
    /* Aseguramos que haya espacio entre las dos mitades */
    justify-content: space-between; 
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
}

/* REEMPLAZA ESTE BLOQUE EN styles.css */

/* --- MITAD IZQUIERDA: Logo y Redes --- */
.footer-left-content {
    flex: 1; 
    text-align: center;
    position: relative; /* Contenedor de referencia */
    /* AUMENTAMOS el espacio superior para que el logo tenga 'espacio' para salir */
    padding-top: 0px; 
}

.footer-logo {
    /* Ajustes de tamaño (mantenidos) */
    height: 150px; 
    width: auto;
    margin-bottom: 15px;
    
    /* CÓDIGO CLAVE PARA QUE SOBRESALGA MÁS */
    position: absolute; 
    /* Lo movemos MÁS hacia arriba (valor más negativo) */
    top: -200px;         
    left: 50%;          
    transform: translateX(-50%); 
    z-index: 10;        /* Asegura que el logo esté en primer plano */
}
.social-cta-text {
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--color-light); /* Resaltamos el llamado a la acción */
    
}

.social-icons-footer a {
    color: var(--color-light);
    font-size: 30px; 
    margin: 0 10px;
    transition: color 0.3s;
}

.social-icons-footer a:hover {
    color: var(--color-secondary);
}

.copyright-split {
    font-size: 0.8em;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.7);
}

/* --- MITAD DERECHA: Mensaje de Impacto y Plagas --- */
.footer-right-content {
    flex: 1; 
    text-align: center; /* Lo cambiamos a central para que la caja de plagas se vea mejor */
    padding-left: 20px;
}

.impact-title-large {
    font-size: 3.5em; 
    font-weight: 900;
    margin-bottom: 5px;
    line-height: 1;
    color: var(--color-light);
}

.impact-subtitle-small {
    font-size: 1.5em; 
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-secondary); 
    margin-bottom: 20px; /* Espacio antes de la caja de plagas */
}

/* Contenedor de Plagas */
.plagas-display-split {
    display: flex;
    justify-content: center;
    /* CAMBIO CLAVE 1: Eliminamos el espacio entre las imágenes */
    gap: 10px; 
    background-color: var(--color-primary); 
    border: 3px solid var(--color-secondary); /* Borde amarillo */
    /* CAMBIO CLAVE 2: Eliminamos el padding para que las imágenes toquen el borde */
    padding: 10px; 
    border-radius: 10px;
    margin-bottom: 10px;
    background-color:#F80000;
    /* CAMBIO CLAVE 3 (Adicional): Aseguramos que las imágenes no desborden los bordes redondeados */
    overflow: hidden; 
}

.plaga-icon-split {
    /* Mantenemos el tamaño, pero quitamos el padding y el border-radius */
    width: 120px; 
    height: 100px;
    /*padding: 10px; /* Eliminado el padding */
    /*margin: 10px;*/
    border-radius: 20px; /* Eliminado el border-radius */
    
    /* Nueva regla para que las imágenes se estiren y cubran el ancho del contenedor: */
   /* width: 100%;*/
    /* Nueva regla para asegurar que la imagen cubra completamente su espacio dentro del flex */
    object-fit:contain; 
    flex-grow: 1; /* Permite que cada imagen ocupe una parte equitativa del espacio */
    background-color: #FFC107;
}}

.motto-text-split {
    font-size: 1.1em;
    font-weight: 800;
    margin-top: 10px;
    color: var(--color-light);
}

/* --- RESPONSIVE / Media Queries (Ajustes para móvil) --- */
@media (max-width: 768px) {
    /* ... (Estilos responsive anteriores se mantienen) ... */

    .footer-right-content {
        text-align: center;
    }
    
    .impact-title-large {
        font-size: 2.5em;
    }

    .impact-subtitle-small {
        font-size: 1.2em;
    }
    
    .plagas-display-split {
        /*flex-wrap: wrap; /* Permite que las imágenes se apilen si la pantalla es muy pequeña */
        /* CAMBIO para asegurar que las imágenes se vean bien en móvil */
        gap: 10px;
    }

    .plaga-icon-split {
        /*width: 70px;*/
        /* Se mantiene el ajuste del tamaño, pero ahora sin padding/radius */
        width: 30%; /* Si se usa flex-grow, este es menos necesario, pero ayuda al apilamiento */
        height: auto;
    }
}