/* --- arvestra_custom.css --- */

/* Contenido de tus estilos <style> in-line */
/* --- ESTILOS ADICIONALES Y MEJORAS VISUALES --- */

/* Navegación One-Page */
.nav-link { cursor: pointer; }
section { padding: 100px 0; }
#inicio { padding-top: 0; }

/* 1. Botones con más vida y profundidad */
.theme-btn {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  box-shadow: 0 4px 15px rgba(0, 22, 89, 0.1); /* Sombra inicial sutil */
}

.theme-btn:hover {
  transform: translateY(-4px); /* Eleva el botón al pasar el mouse */
  box-shadow: 0 10px 25px rgba(225, 37, 27, 0.35); /* Sombra roja más pronunciada para un efecto de 'brillo' */
}

/* 4. Efecto Parallax para fondos */
.hero-wrapper.hero-1 .single-slide.bg-cover,
.cta-wrapper.cta-theme-bg {
    background-attachment: fixed;
}

/* Animation for pillar icons to add 'life' */
.single-icon-circle-item .icon {
    transition: transform 0.4s ease-in-out;
}
.single-icon-circle-item:hover .icon {
    transform: scale(1.1) rotate(7deg);
}

/* Desactivar parallax en móviles para mejor rendimiento */
@media (max-width: 991px) {
    .hero-wrapper.hero-1 .single-slide.bg-cover,
    .cta-wrapper.cta-theme-bg {
        background-attachment: scroll;
    }
}

/* 5. Transición sutil para links del menú y footer */
.main-menu ul > li > a,
.footer-wrap ul li > a {
    position: relative;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}
.main-menu ul > li > a::after,
.footer-wrap ul li > a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #e1251b;
    transition: width 0.4s ease;
}

.main-menu ul > li > a:hover::after,
.footer-consumer ul li > a:hover::after {
    width: 100%;
}
.main-menu ul > li > a.active::after {
    width: 0;
}

/* --- INICIO: Estilos para las nuevas secciones --- */

/* 1. Estilos para Casos de Éxito (Though not currently used, leaving the styles here for future use)*/
.case-study-card {
    background-color: #ffffff;
    border: 1px solid #e0e6ed;
    border-radius: 10px;
    padding: 35px 40px;
    margin: 15px;
    box-shadow: 0 5px 25px rgba(0, 22, 89, 0.05);
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
}
.case-study-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 22, 89, 0.1);
}
.case-study-card .case-icon { font-size: 36px; color: #e1251b; margin-bottom: 20px; }
.case-study-card h4 { font-size: 22px; font-weight: 700; margin-bottom: 15px; color: #001659; }
.case-study-card p { font-size: 15px; line-height: 1.7; margin-bottom: 10px; }
.case-study-card p strong { font-weight: 600; color: #333; }
.testimonial-carousel-list-2.owl-carousel .owl-dots { text-align: center; margin-top: 40px; }
.testimonial-carousel-list-2.owl-carousel .owl-dot { display: inline-block; width: 12px; height: 12px; margin: 0 5px; background: #ccc; border-radius: 50%; transition: background-color 0.3s ease; }
.testimonial-carousel-list-2.owl-carousel .owl-dot.active { background: #e1251b; }

/* 2. Estilos para sección Conoce al Equipo */
.team-preview-section .personal-quote {
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.6;
    color: #555;
    border-left: 4px solid #e1251b;
    padding-left: 20px;
    margin-top: 15px;
    margin-bottom: 20px;
}
.team-preview-section .signature h5 {
    font-size: 20px;
    font-weight: 700;
    color: #001659;
    margin-bottom: 5px;
}
.team-preview-section .signature p {
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 0;
}
.team-preview-section .team-member-card {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 22, 89, 0.05);
    transition: transform 0.3s ease;
    height: 100%;
}
.team-preview-section .team-member-card:hover {
    transform: translateY(-5px);
}
.team-preview-section .team-member-card:not(:last-child) {
    margin-bottom: 30px;
}
@media (min-width: 992px) {
    .team-preview-section .team-member-card:not(:last-child) {
        margin-right: 30px;
    }
}

/* --- FIN: Estilos nuevas secciones --- */

/* --- Cookie Banner & Modal Styles --- */
#cookie-consent-banner {
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #1f2937;
    color: #fff;
    padding: 20px;
    z-index: 1050;
    font-family: 'Roboto', sans-serif;
    border-top: 1px solid #4b5563;
    transform: translateY(100%);
    transition: transform 0.5s ease-in-out;
}
#cookie-consent-banner.active {
    transform: translateY(0);
}
#cookie-consent-banner p { flex-grow: 1; margin: 0; padding-right: 20px; font-size: 15px; line-height: 1.6; }
#cookie-consent-banner p a { cursor: pointer; color: #e1251b; text-decoration: underline; }
#cookie-consent-banner button { margin-left: 20px; margin-top: 0; white-space: nowrap; padding: 12px 25px; background-color: #e1251b; }
#cookieModal .modal-header { background-color: #e1251b; color: #fff; border-bottom: none;}
#cookieModal .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
#cookieModal .modal-title { font-weight: 600; }
#cookieModal .modal-body p { margin-bottom: 15px; }
#cookieModal .modal-body h5 { color: #001659; font-weight: 600; margin-top: 20px; margin-bottom: 10px; }

@media (max-width: 991px) {
    #cookie-consent-banner { flex-direction: column; text-align: center; }
    #cookie-consent-banner p { margin-bottom: 15px; padding-right: 0; }
    #cookie-consent-banner button { margin-left: 0; }
}

/* --- INICIO: Estilos para el video de fondo en el Hero Slider --- */

.single-slide.video-slide {
    position: relative; /* Contexto para posicionar elementos hijos */
    overflow: hidden; /* Oculta partes del video que se desborden */
    background-color: #000; /* Color de respaldo mientras carga el video */
}

.video-background-hero {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1; /* Nivel 1 (el más bajo) */
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover; /* Asegura que el video cubra el área sin deformarse */
}

.video-overlay-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 16, 73, 0.6); /* Overlay azul oscuro con opacidad. ¡Ajusta este valor si necesitas más o menos oscuridad! */
    z-index: 2; /* Nivel 2 (sobre el video) */
}

/* Hacemos que el contenido textual del slide tenga una posición relativa
   y un z-index mayor para que se muestre por encima de todo. */
.video-slide .hero-contents {
    position: relative;
    z-index: 3; /* Nivel 3 (el más alto) */
}

/* --- FIN: Estilos para el video de fondo en el Hero Slider --- */

/* --- INICIO: Estilos para el fondo Parallax del Slogan --- */

.parallax-background {
    background-attachment: fixed; /* Esta es la propiedad mágica del parallax */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative; /* Necesario para la capa de opacidad */
    padding: 120px 0; /* Un poco más de espacio para apreciar el efecto */
}

/* Capa semitransparente para oscurecer la imagen y que el texto resalte */
.parallax-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 16, 73, 0.65); /* Azul oscuro de Arvestra con 65% de opacidad. AJUSTA si lo quieres más claro o más oscuro */
    z-index: 1;
}

/* Asegurar que el contenido (texto) esté por encima de la capa de opacidad */
.parallax-background .slogan-content {
    position: relative;
    z-index: 2;
}

/* Cambiar el color del texto a blanco y añadirle sombra para máxima legibilidad */
.parallax-background h2,
.parallax-background p {
    color: #ffffff !important;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); /* Sombra que ayuda a leer sobre fondos complejos */
}
.parallax-background h2{
    font-size: 42px;
    font-weight: 700;
}
.parallax-background p{
    font-size: 20px;
    max-width: 700px;
    margin: 15px auto 0;
}

/* Desactivar el parallax en dispositivos móviles para evitar problemas de rendimiento ascendencia y saltos */
@media (max-width: 991px) {
    .parallax-background {
        background-attachment: scroll; /* Cambia a scroll normal en móviles */
    }
}

/* --- WhatsApp Floating Button Style --- */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    color: #FFF; /* Keep color white on hover */
}

.whatsapp-float i {
    color: #FFF;
}
/* End WhatsApp Floating Button Style */

/* Contenido del antiguo `custom_arvestra.css` aquí */
.project-details-card .contact-info-block {
    border-top: 1px solid #e0e0e0; /* Una línea sutil para separar */
    padding-top: 15px;
    margin-top: 15px;
}

.project-details-card .contact-info-block:first-of-type {
    border-top: none; /* No poner línea en el primer elemento */
}

.project-details-card .info-title {
    font-size: 16px;
    font-weight: 600; /* Letra un poco más gruesa */
    margin-bottom: 5px;
    color: #333;
}

.project-details-card .info-title i {
    color: #cc2929; /* Usa el color rojo de la marca Arvestra */
    margin-right: 10px;
}

.project-details-card p a {
    color: #555; /* Color del enlace un poco más sutil */
    text-decoration: none;
    transition: color 0.3s;
}

.project-details-card p a:hover {
    color: #cc2929; /* El color de la marca al pasar el mouse */
}

/* ====== ESTILO PARA EL FORMULARIO DE CONTACTO (INCLUYENDO SELECT) ====== */

/* 1. Unifica el estilo base para todos los campos del formulario */
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  background-color: #F8F9FC;
  color: #202426; /* Color de texto oscuro para cuando se escribe */
  font-family: inherit; /* Asegura que use la misma fuente que el resto del sitio */
  font-size: 16px; /* Ajusta el tamaño de la fuente si es necesario */
  line-height: 1.5; /* Mejora la legibilidad */
  padding: 20px 30px; /* Un padding un poco más balanceado */
  border: 1px solid transparent; /* Borde transparente para evitar saltos en el :focus */
  border-radius: 5px; /* Bordes ligeramente redondeados, más moderno */
  -webkit-appearance: none; /* Quita el estilo por defecto en Webkit (Chrome, Safari) */
  -moz-appearance: none;    /* Quita el estilo por defecto en Firefox */
  appearance: none;          /* Quita el estilo por defecto en navegadores modernos */
  margin-bottom: 25px;
}

/* 2. Estilo para el estado 'focus' (cuando haces clic en el campo) */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: #e1251b; /* Borde rojo de Arvestra al seleccionar */
  background-color: #fff;
  box-shadow: 0 0 5px rgba(225, 37, 27, 0.2);
}

/* 3. Estilo específico para el TEXTAREA */
.contact-form textarea {
    height: 180px;
    resize: vertical; /* Permite al usuario ajustar la altura verticalmente */
}

/* 4. Solución para el texto "placeholder" del SELECT */
.contact-form select:required:invalid {
  color: #727475; /* Color gris claro para la opción deshabilitada */
}

.contact-form select option {
  color: #202426; /* Color de texto oscuro para las opciones */
}

.contact-form select option[value=""] {
  color: #727475; /* Asegura que la primera opción se vea como placeholder */
}

.n-proceso {
font-size: medium; color: #666666; font-weight: 100;}

/* 5. Solución para la FLECHA del SELECT */
/* Envolvemos el select en un div para posicionar la flecha */
.single-personal-info.select-wrapper {
  position: relative;
}

.single-personal-info.select-wrapper::after {
  content: '\25BC'; /* Código unicode para una flecha hacia abajo */
  position: absolute;
  top: 40%;
  right: 25px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #e1251b; /* Flecha con el color de la marca */
  pointer-events: none; /* Evita que la flecha bloquee el clic en el select */
}

/* Ajusta los márgenes que ya tenías */
.contact-form .single-personal-info {
  margin-bottom: 0; /* Lo movemos al estilo general de arriba para consistencia */
}

.footer-info-list ul {
    list-style: none;
    padding-left: 0;
}
.footer-info-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    color: #a0a8b4; /* Color de texto del footer */
}
.footer-info-list li i {
    color: #e1251b; /* Ícono en el rojo de la marca */
    margin-right: 12px;
    margin-top: 4px; /* Alinear verticalmente */
    font-size: 16px;
}

.proceso-icon img {
  width: 100%;
  height: auto;
  max-width: 70px;
  display: block;
  margin: 0 auto;
  fill: #e1251b;
}

.proceso-icon img:hover {
  fill: #EC637E;
  transform: scale(1.05);
  transition: all 0.3s ease;
}

.servicios-icon img {
  width: 100%;
  height: auto;
  max-width: 60px;
  display: block;
  fill: #e1251b;
}

.servicios-icon img:hover {
  fill: #EC637E;
  transform: scale(1.05);
  transition: all 0.3s ease;
}

.texto_blanco {
    color: #ffffff;
}

/* Process Section Styling */
.process__area {
    background: #f8f8f8; /* Fondo suave para destacar la sección */
    position: relative;
    overflow: hidden;
}

.process__item {
	margin-top: 10px;
	margin-bottom: 10px;
    background: #ffffff;
    border: 1px solid rgba(20, 24, 32, 0.1);
    border-radius: 10px;
    padding: 30px 20px;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.05);
}

.process__item:hover {
    transform: translateY(-10px);
    box-shadow: 0px 5px 15px rgba(20, 24, 32, 0.15);
    border-color: #e1251b;
}

.process__icon {
    width: 60px;
    height: 60px;
    background: #e1251b;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 24px;
    transition: all 0.3s ease-in-out;
}

.process__item:hover .process__icon {
    background: #001659;
    transform: scale(1.1);
}

.process__item h3 {
    font-size: 22px;
    font-weight: 600;
    color: #141820;
    text-transform: none;
    margin-bottom: 15px;
    font-family: "Plus Jakarta Sans", sans-serif;
}

.process__item p {
    font-size: 16px;
    font-weight: 400;
    color: #53545A;
    line-height: 26px;
    font-family: "Plus Plus Jakarta Sans", sans-serif;
}

@media (max-width: 991px) {
    .process__item {
        margin-bottom: 30px;
    }
}

@media (max-width: 575px) {
    .process__item h3 {
        font-size: 20px;
    }
    .process__item p {
        font-size: 14px;
        line-height: 24px;
    }
}

/* Animation Delay for Staggered Effect */
.process-card:nth-child(1) { animation-delay: 0s; }
.process-card:nth-child(2) { animation-delay: 0.2s; }
.process-card:nth-child(3) { animation-delay: 0.4s; }

.clients-wrapper {
    background-color: #fff; /* Mantener el fondo ligero */
    padding-top: 80px;   /* Reducir un poco el padding superior de la sección */
    padding-bottom: 80px;/* Reducir un poco el padding inferior de la sección */
}
@media (max-width: 991px) {
    .clients-wrapper {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

.clients-carousel {
    margin-top: 40px; /* Un poco más de espacio entre el título y el carrusel */
}

.client-logo {
    padding: 5px; /* Reducir mucho el padding alrededor del logo dentro del contenedor */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Ajusta min-height. Quiza los logos son más cuadrados o más horizontales.
       60px era la altura máxima del *logo*, no del contenedor.
       Aquí ponemos un mínimo para que todos tengan un buen espacio sin deformarse.*/
    min-height: 120px; /* Aumentar ligeramente la altura mínima del contenedor del logo */
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.client-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.client-logo img {
    /* ¡Aquí la clave! Permitir que la imagen sea más grande */
    max-height: 120px; /* Aumentar la altura máxima para logos más grandes */
    max-width: 90%;   /* Permitir que la imagen ocupe más ancho relativo a su contenedor */
    width: auto;
    object-fit: contain;
}