/* Variables de Color basadas en el logo de Agrovinos */
:root {
    --agro-dark-green: #2A552A;  /* Verde oscuro principal del logo */
    --agro-light-green: #7FAA2B; /* Verde claro del logo */
    --agro-olive: #8A7B4F;       /* Tono oliva/marrón del logo (para acentos o fondos) */
    --agro-burgundy: #6A1B2A;    /* Tono borgoña de las uvas (acento fuerte) */

    --primary-color: var(--agro-dark-green);
    --secondary-color: var(--agro-light-green);
    --accent-color: var(--agro-burgundy); /* Opcional, usar con moderación */
    --background-light: #f8f9fa; /* Blanco suave por defecto de Bootstrap */
    --background-light-custom: #f0f5f0; /* Un verde muy, muy pálido para secciones */

    --text-dark: #212529; /* Casi negro por defecto de Bootstrap */
    --text-light: #f8f9fa;
    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Roboto', sans-serif;
}

body {
    font-family: var(--font-secondary);
    color: var(--text-dark);
    padding-top: 70px; /* Ajuste para el navbar fijo. Altura del navbar es aprox 58px (height 45 + padding) */
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--primary-color);
}

.section-title {
    color: var(--primary-color);
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.75rem;
    font-size: 2.2rem; /* Un poco más grande */
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background-color: var(--secondary-color);
    border-radius: 2px;
}

/* --- Barra de Navegación --- */
.navbar {
    /* Mantenemos el color verde oscuro original de Agrovinos */
    background-color: rgba(42, 85, 42, 0.8); /* rgba de --agro-dark-green con buena opacidad */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: fixed;   /* Fija la barra de navegación al top */
    top: 0;            /* Alinea al top */
    left: 0;           /* Alinea a la izquierda */
    width: 100%;       /* Ocupa todo el ancho */
    z-index: 1030;     /* Asegura que esté por encima de otros elementos */
}

.navbar.scrolled {
    /* Se mantiene el color más opaco de Agrovinos al hacer scroll */
    background-color: rgba(42, 85, 42, 0.98);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* El .brand-container es útil para el logo de Agrovinos si quieres controlarlo mejor */
.brand-container {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Espacio entre posibles logos si añades otro en el futuro */
    margin-left: 0;
}
 
.navbar-brand img {
    transition: transform 0.3s ease;
    max-height: 30px; /* Altura inicial del logo, ajustada para Mobile First como en Operamaq */
    display: block;
    flex-shrink: 0;
}

/* Los estilos para los nav-link y navbar-toggler son los mismos que ya tenías y funcionan bien con tu fondo oscuro */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-family: var(--font-primary);
    padding-left: 1rem;
    padding-right: 1rem;
    transition: color 0.3s ease, transform 0.2s ease;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: #fff;
    transform: translateY(-2px);
}
.navbar-dark .navbar-nav .nav-link.active {
    font-weight: 700;
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
    /* margin-right: 0; Elimina esto si necesitas el margen por defecto de Bootstrap */
    padding: 0.25rem 0.5rem;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* --- Hero Slider --- */
#hero-slider {
    position: relative;
    overflow: hidden; /* Asegura que nada se desborde del slider */
}

#hero-slider .carousel-item {
    height: 80vh; /* Ajusta la altura a 80vh para mobile first */
    min-height: 400px; /* Ajusta la altura mínima para mobile first */
}

.hero-slider-img {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
    filter: brightness(0.6) contrast(1.05);
    opacity: 0.65; /* Mantenemos tu opacidad original de 0.65 */
}

/* Redefinimos el carousel-caption para ser un contenedor flexible */
#hero-slider .carousel-caption {
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    align-items: center;    /* Centra horizontalmente */
    justify-content: center;/* Centra verticalmente el contenido agrupado */
    bottom: 5%;             /* Posición más baja que tu 20% original, mejor para móviles */
    padding: 10px 15px;
    max-width: 95%;
    margin: 0 auto;
    z-index: 10;
    /* Remover background-color si estaba aquí para el caption */
    /* background-color: rgba(0, 0, 0, 0.5); - Esto ya estaba comentado en tu CSS, bien */
    border-radius: 8px; /* Mantenemos tu border-radius */
}

/* El logo transparente ahora dentro del caption, con margen superior para separación */
.trans { /* Usamos tu clase .trans */
    margin-top: 25px; /* Separación entre el texto y el logo */
    width: 380px; /* Mantendremos tu ancho original como base */
    max-width: 90%; /* Asegura que no sea más ancho que su contenedor */
    height: auto;
    transition: all 0.3s ease;
    opacity: 1;
    filter: brightness(0.7) contrast(1.05);
    /* Remover position: absolute; left: 50%; transform: translateX(-50%); top: 30px; */
    /* Estas propiedades ya no son necesarias ni deseables si está dentro de un flex container */
}

.trans img {
    width: 100%;
    height: auto;
    display: block;
}

/* Asegura que los textos del caption sigan siendo visibles */
#hero-slider .carousel-caption h5 {
    font-size: clamp(1.8rem, 6vw, 2.8rem); /* Tu tamaño original 2.8rem, lo hago responsivo con clamp */
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Tu sombra original */
    margin-bottom: 0.75rem;
}
#hero-slider .carousel-caption h4 {
    font-size: clamp(1.2rem, 4vw, 1.8rem); /* Tu tamaño original 1.8rem, lo hago responsivo con clamp */
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    margin-bottom: 0.75rem;
}

#hero-slider .carousel-caption p {
    font-size: clamp(0.9rem, 2.5vw, 1.3rem); /* Tu tamaño original 1.3rem, lo hago responsivo con clamp */
    color: var(--text-light);
    font-weight: 300;
    line-height: 1.5;
}

/* --- Sección Quiénes Somos --- */
#quienes-somos {
    background-color: #fff;
}
#quienes-somos img {
    border: 6px solid var(--background-light-custom); /* Borde con el verde pálido */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#quienes-somos img:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
#quienes-somos h3 {
    color: var(--primary-color);
    margin-top: 1rem;
    font-size: 1.6rem;
    
}
#quienes-somos p {
    font-size: 1.05rem;
    color: #555;
    text-align: justify;
    
}

/* --- Sección Servicios --- */
.bg-light-custom {
    background-color: var(--background-light-custom) !important;
}

/* Estilos para el Carrusel de Servicios */
#serviciosCarousel .carousel-control-prev-icon,
#serviciosCarousel .carousel-control-next-icon {
    background-color: var(--primary-color); /* Color de fondo del icono */
    background-size: 60% 60%; /* Hace el icono de flecha un poco más pequeño dentro del círculo */
    border-radius: 50%; /* Hace el fondo circular */
    padding: 15px; /* Espaciado alrededor del icono */
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

#serviciosCarousel .carousel-control-prev-icon:hover,
#serviciosCarousel .carousel-control-next-icon:hover {
    opacity: 1;
}

#serviciosCarousel .carousel-control-prev {
    left: -120px; /* Ajusta según necesites */
}

#serviciosCarousel .carousel-control-next {
    right: -120px; /* Ajusta según necesites */
}

#serviciosCarousel .carousel-indicators button {
    background-color: var(--secondary-color); /* Color de los indicadores */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 10px;
    opacity: 0.6;
}

#serviciosCarousel .carousel-indicators .active {
    background-color: var(--primary-color); /* Color del indicador activo */
    opacity: 1;
}
#serviciosCarousel .carousel-indicators {
    margin-bottom: -1rem;
}
#infoServicioModalBody p,
#infoServicioModalBody strong{
    text-align: justify;
}




.service-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border: 1px solid #e0e0e0; /* Borde sutil */
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    /* width: 100%; */ /* Si usas style="width: 22rem;" en el HTML, esto se anula o puede causar conflicto. Ajusta según necesidad. */
}

.service-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 12px 25px rgba(42, 85, 42, 0.15); /* Sombra con tono verde oscuro */
}

.service-card .card-img-top {
    width: 100%;             /* Asegura que la imagen ocupe todo el ancho */
    aspect-ratio: 16 / 9;    /* O usa 4 / 3, 1 / 1 para cuadrado, etc. */
    object-fit: cover;       /* Mantenemos esto, es crucial para que no se deforme la imagen */
    transition: transform 0.3s ease;
}
.service-card:hover .card-img-top {
    transform: scale(1.05);
}

.service-card .card-body {
    padding: 1.5rem;
}

.service-card .card-title {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
}
.service-card .card-text {
    color: #555;
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
}

.btn-outline-agro-secondary {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
    font-weight: 500; /* Roboto Medium */
    text-transform: uppercase;
    padding: 0.6rem 1.5rem;
    border-radius: 50px; /* Botones más redondeados */
    transition: all 0.3s ease;
}
.btn-outline-agro-secondary:hover {
    background-color: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(127, 170, 43, 0.3); /* Sombra con tono verde claro */
}
#clientes {
    background-color: #f8f9fa; /* Un fondo suave para la sección */
    padding: 60px 0;
}

/* Contenedor del carrusel Swiper */
.logos-slider {
    position: relative; /* Necesario para posicionar las flechas correctamente */
    width: 100%;
    height: 140px;      /* Altura consistente para el área del carrusel */
    overflow: hidden;   /* Esencial: oculta las partes de los slides que están fuera del área visible */
}

/* Contenedor interno de los slides (manejado por Swiper) */
.logos-slider .swiper-wrapper {
    /* Centra verticalmente todos los slides si tienen alturas ligeramente diferentes */
    align-items: center; 
}

/* Estilo individual para cada slide */
.logos-slider .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    height: 100px; /* Altura fija para cada tarjeta de logo */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logos-slider .swiper-slide:hover {
    transform: translateY(-5px); /* Efecto sutil de elevación */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* Sombra suave al pasar el mouse */
}

/* Estilo para las imágenes de los logos dentro de los slides */
.logos-slider .swiper-slide img {
    max-width: 90%;   /* Asegura un pequeño margen dentro del slide */
    max-height: 70px; /* Limita la altura máxima para uniformidad */
    object-fit: contain; /* Mantiene la proporción del logo sin distorsión */
    opacity: 0.8; /* Opacidad sutil por defecto */
    transition: opacity 0.3s ease;
}

/* Al pasar el mouse sobre el slide, la imagen se vuelve completamente opaca */
.logos-slider .swiper-slide:hover img {
    opacity: 1;
}

/* Estilo para los botones de navegación (flechas) */
.logos-slider .swiper-button-next,
.logos-slider .swiper-button-prev {
    /* Variables CSS de Swiper para controlar color y tamaño de las flechas */
    --swiper-navigation-color: #007bff; /* Color de las flechas (puedes usar var(--primary-color)) */
    --swiper-navigation-size: 22px;    /* Tamaño del ícono de la flecha */

    /* Estilo del fondo del botón para mejor visibilidad */
    background-color: rgba(255, 255, 255, 0.8);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.logos-slider .swiper-button-next:hover,
.logos-slider .swiper-button-prev:hover {
    background-color: #ffffff;
}

/* Ajuste de posición para que no estén pegadas al borde */
.logos-slider .swiper-button-prev {
    left: 15px;
}

.logos-slider .swiper-button-next {
    right: 15px;
}

/* --- Sección Contacto --- */
#contacto {
    background-color: #fff; /* O var(--background-light) */
}
#contacto .form-control {
    border-radius: 5px; /* Bordes un poco redondeados */
    padding: 0.85rem 1.1rem;
    border: 1px solid #ced4da;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#contacto .form-control:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 0.25rem rgba(127, 170, 43, 0.25); /* Sombra de foco con verde claro */
}
.btn-agro-primary {
    background-color: var(--secondary-color);
    border-color: var(--primary-color);
    color: #fff;
    padding: 0.85rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-agro-primary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(42, 85, 42, 0.3); /* Sombra con tono verde oscuro */
}
#contacto p i {
    color: var(--primary-color);
    font-size: 1.1rem;
}


/* --- Footer --- */
.agro-footer { /* Renombrado para evitar conflictos con .bg-dark de Bootstrap si se usa en otro lado */
    background-color: var(--primary-color);
}
.agro-footer p {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    font-weight: 300;
}
@media (min-width: 1240px) {
    #hero-slider .carousel-item {
        height: 88vh; /* Volvemos a tu altura original para pantallas muy grandes */
    }
    .trans {
        width: 550px; /* Aumentamos el tamaño del logo para pantallas muy grandes */
    }
}

/* Responsive adjustments */
@media (max-width: 1097.98px) { /* Tablets y móviles grandes */
    body {
        padding-top: 65px;
    }
    .navbar-brand img {
        max-height: 40px;
    }
    #hero-slider .carousel-item {
        height: 75vh; /* Se mantiene igual que tablets */
    }
    #hero-slider .carousel-caption {
        max-width: 85%;
        bottom: 10%;
    }
    #hero-slider .carousel-caption h5 {
        font-size: 2rem;
    }
    #hero-slider .carousel-caption p {
        font-size: 1.1rem;
    }
    .section-title {
        font-size: 2rem;
    }

    .trans {
        width: 400px; /* Mantiene el tamaño de tablets */
    }

    #serviciosCarousel .carousel-control-prev {
        left: -80px; /* Ajusta según necesites */
    }
    
    #serviciosCarousel .carousel-control-next {
        right: -80px; /* Ajusta según necesites */
    }
}

@media (max-width: 767.98px) { /* Móviles */
    body {
        padding-top: 60px;
    }
    .navbar {
        background-color: rgba(42, 85, 42, 0.98); /* Más opaco en móvil por defecto */
    }
    .navbar-brand img {
        max-height: 35px;
    }
    #hero-slider .carousel-item {
        height: 75vh;
        min-height: 400px;
    }
    #hero-slider .carousel-caption {
        max-width: 75%;
        bottom: 5%;
    }
    #hero-slider .carousel-caption h5 {
        font-size: 1.6rem;
    }
    #hero-slider .carousel-caption p {
        font-size: 1rem;
        /* display: none; */ /* Opcional: ocultar párrafo en móviles si es muy largo */
    }
    .section-title {
        font-size: 1.8rem;
    }
    #quienes-somos .row > div {
        text-align: center;
    }
    #quienes-somos img {
        margin-bottom: 1.5rem;
    }
   
    #contacto .btn-agro-primary, #contacto .btn-outline-agro-secondary {
        width: 100%; /* Botones de ancho completo en móvil */
        margin-bottom: 0.5rem;
    }

    .trans {
        width: 400px; /* El tamaño original que tenías para el logo */
        margin-top: 25px; /* Regresamos al margen original */
     }

    #serviciosCarousel .carousel-control-prev {
        left: -80px; /* Ajusta según necesites */
    }
    
    #serviciosCarousel .carousel-control-next {
        right: -80px; /* Ajusta según necesites */
    }
    #serviciosCarousel .carousel-control-prev-icon,
    #serviciosCarousel .carousel-control-next-icon {
        padding: 10px; /* Iconos de control más pequeños en móvil */
    }
}
@media (max-width: 485.98px) {
    #hero-slider .carousel-item {
        height: 50vh;
        min-height: 280px;
    }
    /* El logo-trans se ocultará en pantallas muy pequeñas, ya que lo tienes puesto así en tu CSS original @media (max-width: 575.98px) */
    /* Si quieres que se muestre, tendrás que re-evaluar esta media query o suprimirla para .trans */
    .trans {
       opacity: 0; /* Lo ocultamos aquí para seguir la lógica de tu media query original que ya lo hacía */
    }
    #hero-slider .carousel-caption {
        bottom: 7%;
        padding: 8px 10px;
        max-width: 98%;
    }
}
@media (max-width: 575.98px) {
    #hero-slider .carousel-item {
        height: 50vh;
        min-height: 280px;
    }
    .trans {
       opacity: 0; /* Lo ocultamos completamente como en Operamaq para este rango */
    }
    #hero-slider .carousel-caption {
        bottom: -10%; /* Lo bajamos aún más para que no choque si el logo se oculta */
        padding: 8px 10px;
        max-width: 98%;
    }
}
@media (min-width: 576px) {
    #hero-slider .carousel-item {
        height: 70vh; /* Ajustamos la altura para pantallas más grandes */
    }
    .trans {
       opacity: 1; /* Volvemos a mostrar el logo */
       /* Aquí Operamaq pone top: 30px, pero como lo metimos DENTRO del caption flex, ya no es necesario el 'top' absoluto */
       width: 280px; /* Un tamaño más razonable para el logo en esta resolución */
       margin-top: 15px; /* Ajusta la separación */
    }
}