/**
 * ARCHIVO DE ESTILOS GENERALES (style.css)
 * Marca: Tu Alimento para Perros
 * Colores: Azul (#015f90) y Verde (#299132)
 */

/* 1. Definición de variables globales para fácil edición futura */
:root {
    --azul-corporativo: #015f90;
    --verde-ecologico: #299132;
    --blanco-fondo: #ffffff;
    --gris-suave: #f9f9f9;
    --texto: #333333;
}

/* 2. Reset básico: Quita márgenes por defecto del navegador */
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--texto);
    background-color: #ffffff;
    line-height: 1.6;
}

/* 3. Navegación (Header) */

/* ==========================================================
   ESTILOS ESPECÍFICOS PARA EL LOGO EN IMAGEN
   ========================================================== */

/* Contenedor del logo para asegurar que esté alineado verticalmente */
.logo-container {
    display: flex;
    align-items: center;
    text-decoration: none; /* Quita subrayado si el logo es un enlace */
    padding: 5px 0; /* Un pequeño espacio arriba y abajo */
}

/* Estilos para la imagen del logo en sí */
.site-logo {
    /* Limitamos la altura máxima para que el menú no se haga muy alto */
    max-height: 60px; /* Ajusta este valor según tu logo (ej: 50px, 70px) */
    
    /* El ancho se ajusta automáticamente para mantener la proporción */
    width: auto;
    
    /* Asegura que no se vea borroso en pantallas de alta resolución */
    image-rendering: -webkit-optimize-contrast; 
    
    /* Pequeña animación suave al cargar */
    transition: transform 0.3s ease;
}

/* Efecto opcional: el logo se hace un poquito más grande al pasar el mouse */
.logo-container:hover .site-logo {
    transform: scale(1.05);
}

/* Ajuste móvil: para que el logo no robe mucho espacio en celulares */
@media (max-width: 768px) {
    .site-logo {
        max-height: 45px;
    }
}

nav {
    display: flex; /* Alinea logo y menú en línea */
    justify-content: space-between; /* Logo a la izquierda, menú a la derecha */
    align-items: center;
    padding: 1rem 5%;
    background: var(--blanco-fondo);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Sombra suave para profundidad */
    position: sticky; /* Se queda fijo al hacer scroll */
    top: 0;
    z-index: 1000;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--azul-corporativo);
}

.menu-links a {
    text-decoration: none;
    color: var(--azul-corporativo);
    margin-left: 20px;
    font-weight: 600;
    transition: 0.3s; /* Animación suave al pasar el mouse */
}

.menu-links a:hover {
    color: var(--verde-ecologico); /* Cambia a verde al pasar el mouse */
}

/* 4. Contenedores de contenido */
.container {
    max-width: 1200px;
    margin: 0 auto; /* Centra el contenido */
    padding: 40px 20px;
}

.section-title {
    text-align: center;
    color: var(--azul-corporativo);
    font-size: 2rem;
    margin-bottom: 30px;
}

/* 5. Carrusel de Testimonios (Diseño Simple) */
.testimonio-wrapper {
    display: flex;
    overflow-x: auto; /* Permite scroll horizontal */
    gap: 20px;
    padding: 20px;
}

.testimonio-card {
    min-width: 300px;
    background: #ffffff;
    padding: 20px;
    border-radius: 15px;
    border-bottom: 4px solid var(--verde-ecologico);
}

/* 6. Pie de Página (Footer) */
footer {
    background: var(--azul-corporativo);
    color: white;
    text-align: center;
    padding: 20px 20px;
    margin-top: 20px;

}

/* 1. CONTENEDOR PRINCIPAL DEL SLIDER */
.slider-simple {
    width: 100%;
    height: 500px;         /* Altura fija para el carrusel */
    position: relative;
    margin: auto;
    overflow: hidden;
    background-color: #ffffff; /* Color de fondo por si la imagen tarda en cargar */
    
    /* Centrado con Flexbox */
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
}



    /* 3. AJUSTE PARA CELULARES (RESPONSIVE) */
@media (max-width: 768px) {
    /* En celulares, 500px puede ser mucho. Bajamos la altura para que se vea bien. */
    .slider-simple, .mySlides img {
        height: 300px;
    }
}

/* AJUSTE DE IMÁGENES */
.mySlides img {
/* ALTURA: Forzamos a que siempre mida 500px */
    height: 500px; 
    
    /* ANCHO: Le decimos que se ajuste solo para no perder la proporción */
    width: auto;   
    
    /* EL SECRETO: 'contain' hace que la imagen se reduzca o crezca 
       hasta que quepa ENTERA en el espacio de 500px, sin recortar ni una esquina. */
    object-fit: contain; 
    background-color: #ffffff;
    
    /* Centrado automático */
    margin: 0 auto;
    display: block;
}

/* EFECTO DE TRANSICIÓN SUAVE */
.fade {
    animation-name: fade;
    animation-duration: 3s; /* Duración de la transición entre fotos */
}

@keyframes fade {
    from { opacity: 0.4; } 
    to { opacity: 1; }
}

/* ==========================================================
   ESTILOS PARA IMÁGENES REDONDEADAS (PARA "NOSOTROS", ETC.)
   ========================================================== */

/* Esta clase redondea las esquinas de forma suave (15px) */
.img-redondeada {
    border-radius: 15px; /* Ajusta este número: más alto = más redondo */
    
    /* Asegura que el contenido de la imagen se corte si se sale del borde redondo */
    overflow: hidden; 
    
    /* object-fit: cover; 
       Importante: Si la imagen no es cuadrada, esto asegura que llene el 
       espacio asignado sin estirarse feo. */
    object-fit: cover;
    
    /* Una pequeña sombra suave para darle profundidad (opcional) */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    
    /* Asegura que la imagen sea responsive (se adapte a celulares) */
    max-width: 100%;
    height: auto;
    display: block;
}

/* BOTONES DE NAVEGACIÓN (Flechas) */
/* 1. EL CONTENEDOR PRINCIPAL (LA CLAVE) */
.slider-simple {
    width: 100%;
    height: 500px; /* Mantén tu altura deseada */
    
    /* IMPORTANTE: Esta línea es LA SOLUCIÓN. 
       Hace que las flechas se posicionen RELATIVO a este contenedor, 
       y no a toda la pantalla. */
    position: relative; 
    
    margin: auto;
    overflow: hidden;
    background-color: #ffffff; /* Tu color de fondo */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2. ESTILOS GENERALES DE LAS FLECHAS */
.prev, .next {
    cursor: pointer;
    
    /* Mantenemos position absolute, pero ahora se guía por .slider-simple */
    position: absolute; 
    
    top: 50%; /* Centrado vertical */
    margin-top: -22px; /* Ajuste fino del centrado vertical */
    padding: 16px;
    color: black;
    font-weight: bold;
    font-size: 30px; /* Un poco más grandes para que se vean bien */
    transition: 0.6s ease;
    user-select: none;
    background-color: #ffffff; /* Fondo un poco más oscuro para contraste */
    text-decoration: none;
    z-index: 10; /* Asegura que estén por encima de la imagen */
}

/* 3. UBICACIÓN ESPECÍFICA DE CADA FLECHA */

/* Flecha Izquierda: Pegada al borde izquierdo */
.prev {
    left: 0; 
    border-radius: 0 5px 5px 0; /* Bordes redondeados solo a la derecha */
}

/* Flecha Derecha: Pegada al borde derecho */
.next {
    right: 0; 
    border-radius: 5px 0 0 5px; /* Bordes redondeados solo a la izquierda */
}

/* EFECTO HOVER (Opcional, para que resalten más) */
.prev:hover, .next:hover {
    background-color: #015f90;
    color: var(--verde-ecologico); /* O el color de tu marca al pasar el mouse */
}

.seccion-testimonios {
    padding: 60px 0;
    background-color: #f9f9f9; /* Un gris muy tenue para diferenciarlo */
    text-align: center;
}

.testimonio-container {
    max-width: 600px;
    margin: auto;
    position: relative;
    padding: 20px;
}

.testimonio-card {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#txt-comentario {
    font-style: italic;
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 20px;
}

#txt-nombre {
    color: var(--azul-corporativo);
    margin-bottom: 5px;
}

/* Estilo de las flechas para testimonios */
.prev-t, .next-t {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: var(--azul-corporativo);
    padding: 10px;
    text-decoration: none;
    transition: 0.3s;
}

.prev-t { left: -50px; }
.next-t { right: -50px; }

@media (max-width: 768px) {
    .prev-t { left: 5px; }
    .next-t { right: 5px; }
}



/* banner de transición*/
.banner-aviso {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #4CAF50; /* Verde NaturalPet */
    color: white;
    padding: 10px 20px;
    position: sticky; /* Se queda arriba mientras haces scroll */
    top: 70;
    z-index: 999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.banner-contenido {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
    justify-content: center;
}

.banner-contenido p {
    margin: 0;
    font-size: 14px;
}

.banner-contenido a {
    color: white;
    font-weight: bold;
    text-decoration: underline;
    margin-left: 5px;
}

.btn-cerrar {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 0 5px;
}

.btn-cerrar:hover {
    color: #e0e0e0;
}

/* Botón de Promos */
.btn-promociones {
    display: block;
    width: 500p;
    margin: 15px auto;
    background-color: #299132; /* Naranja llamativo */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.btn-promociones:hover {
    background-color: #299132;
    transform: scale(1.05);
}

/* El Fondo Oscuro del Modal */
.modal-overlay {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
}

/* La Caja del Contenido */
.modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 20px;
    border-radius: 15px;
    width: 450px;
    max-width: 600px;
    position: relative;
}

.cerrar-modal {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 30px;
    cursor: pointer;
    color: #666;
}

/* Estilos básicos del slider de promos */
.promo-slider { position: relative; overflow: hidden; border-radius: 10px; }
.promo-slide { display: none; }
.prev-p, .next-p {
    cursor: pointer;
    position: absolute;
    top: 50%;
    padding: 16px;
    color: white;
    font-weight: bold;
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    user-select: none;
}
.next-p { right: 0; }

/* =============================================
   BLOQUE: ESTILOS DE REVELACIÓN (HOVER)
   Controla la visibilidad de las imágenes
   ============================================= */

/* Contenedor del item individual */
.beneficio-item {
    position: relative; /* Necesario para posicionar la imagen respecto al número */
    padding: 20px;
    list-style: none;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Estilo del número */
.numero {
    font-size: 2rem;
    font-weight: bold;
    color: #4CAF50; /* Verde NaturalPet */
    transition: color 0.3s;
}

/* Imagen oculta por defecto */
.imagen-revelada {
    position: absolute;
    left: 150px;       /* Ajusta según donde quieras que aparezca */
    width: 200px;
    border-radius: 10px;
    opacity: 0;         /* Invisible */
    visibility: hidden;
    transform: scale(0.8); /* Efecto de pequeño a grande */
    transition: all 0.4s ease; /* Transición suave */
    z-index: 10;
    pointer-events: none; /* Evita que la imagen interfiera con el mouse */
}

/* --- EFECTO HOVER --- */
/* Cuando el mouse pasa por el item, la imagen se revela */
.beneficio-item:hover .imagen-revelada {
    opacity: 1;
    visibility: visible;
    transform: scale(2.5); /* Regresa a su tamaño original */
}

/* Cambia el color del número al pasar el mouse */
.beneficio-item:hover .numero {
    color: #ff9800; /* Naranja de atención */
}

/* Esto asegura que ninguna imagen se desborde del celular */
img {
    max-width: 100%;
    height: auto;
    display: block;
}
/* Para celulares (pantallas pequeñas) */
@media (max-width: 768px) {
    /* 1. Haz el menú vertical para que quepa */
    .menu-links {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* 2. Ajusta el tamaño de fuentes para que no sean gigantes */
    h1 { font-size: 24px; }
    
    /* 3. Ajusta el carrusel para que no sea tan alto */
    .slider-simple {
        height: 200px; /* Ajusta según lo que necesites */
    }
}
/*Inicia menu hamburguesa*/
/* Por defecto, ocultamos el botón hamburguesa */
.menu-hamburguesa {
    display: none;
    font-size: 30px;
    cursor: pointer;
    padding: 10px;
}

/* Solo se activa en pantallas de celular */
@media (max-width: 768px) {
    .menu-hamburguesa {
        display: block; /* Ahora sí se ve el icono */
    }

    .menu-links {
        display: none; /* Ocultamos los links por defecto */
        flex-direction: column;
        width: 100%;
        background-color: white;
        position: absolute;
        top: 80px; /* Ajusta según la altura de tu barra de navegación */
        left: 0;
        text-align: center;
        z-index: 999;
    }

    /* Esta clase la añade el JavaScript cuando haces clic */
    .menu-links.active {
        display: flex!important;
    }
}
/*Acaba menu hamburguesa*/

/* Contenedor principal */
.beneficios-grid {
    display: grid;
    /* En celular (menos de 600px) pone 1 columna. En pantallas grandes, las que quepan */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* Estilo de cada tarjeta */
.card-beneficio {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s;
}

/* Asegura que la imagen sea responsiva */
.card-beneficio img {
    width: 100%;
    height: 180px; /* Altura fija para que todas se vean uniformes */
    object-fit: cover; /* Recorta la imagen sin deformarla */
    border-radius: 10px;
    margin-bottom: 15px;
}
@media (max-width: 480px) {
    .beneficios-grid { padding: 10px; }
    .card-beneficio h3 { font-size: 1.2rem; }
    .card-beneficio p { font-size: 0.9rem; }
}