/* ====================

   MARCAS AUTORIZADAS 

======================= */

.partners-section {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 1320px;

    margin: auto;

    gap: 40px;

    padding: 30px 0;

}



.partners-left {

    flex: 0.8;

}



.titulo-marcas {

    font-size: 34px;

    font-weight: 800;

    display: inline-flex; /*  Esto sí permite gap y mantiene todo en una línea */

    gap: 2px;

    margin: 0;  /* ← Esto es referente al espacio entre el titulo y p */

    letter-spacing: -1px;

}



.titulo-marcas .negro { color: var(--negro); }

.titulo-marcas .rojo { color: var(--rojo); }



.partners-left p {

    font-size: 17px;

    color: var(--negro);

    max-width: 350px;

    text-align: justify;

}



.partners-right {

    max-width: 900px;

    position: relative;

    overflow: visible; /* ← deja libres las flechas */  

}



/* SLIDER */

.marcasSwiper .swiper-slide {

    display: flex;

    justify-content: center;

    align-items: center;

    /* Contenedor uniforme */

    width: 200px;   /* ajusta según tu diseño */

    height: 150px;   /* altura fija para todos */

    margin: 0;         /* elimina márgenes */

    padding: 0;        /* elimina padding */

    gap: 0;

    

}



.marcasSwiper img {

    max-width: 100%;

    max-height: 28%;

    object-fit: contain; /* mantiene proporción sin deformar */

    filter: grayscale(100%);

    opacity: 0.85;

    transition: 0.3s ease;

    margin: 0;

    padding: 0;

    display: block;    /* elimina espacio extra de inline-block */

}



.marcasSwiper img:hover {

    filter: grayscale(20%);

    opacity: 1;

    transform: scale(1.05);

}



/* FLECHAS */

.flecha-marcas-next,

.flecha-marcas-prev {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 50;

    width: 40px;

    height: 40px;

    cursor: pointer;

    /*background: var(--blanco);*/

    display: flex;

    justify-content: center;

    align-items: center;

}



.flecha-marcas-next::after,

.flecha-marcas-prev::after {

    font-family: swiper-icons;

    font-size: 30px;

    color: var(--negro);

}



.flecha-marcas-next { right: -35px; }

.flecha-marcas-prev { left: -35px; }



.flecha-marcas-next::after { content: 'next'; }

.flecha-marcas-prev::after { content: 'prev'; }



/* MARCAS — Ajuste responsive */

@media (max-width: 900px) {

    .partners-section {

        flex-direction: column;

        text-align: center;

        padding: 20px 10px;

    }

    .flecha-marcas-next { right: -25px; }

    .flecha-marcas-prev { left: -25px; }

    .marcasSwiper img {

        max-width: 120px;

        max-height: 80px;

    }

}



@media (max-width: 600px) {

    .flecha-marcas-next,

    .flecha-marcas-prev {

        width: 32px;

        height: 32px;

    }

    .flecha-marcas-next::after,

    .flecha-marcas-prev::after {

        font-size: 20px;

    }

    .marcasSwiper img {

        max-width: 100px;

        max-height: 70px;

    }

}



/* ==================================================

   SECCIÓN POR QUÉ ELEGIRNOS

================================================== */

.porque-hr {

    max-width: 100%;   /* ocupa todo el ancho */

    margin: 0;         /* sin margen extra */

    padding: 20px 0;   /* espacio arriba y abajo */

    position: relative;

}



.porque-caja {         

    width: 100%;     /* ocupa todo el ancho disponible */

    background: url("../IMAGENES/BannerIndex/JPG/Grafico_servicios.jpg") center/cover no-repeat;

    background-attachment: fixed; /* mantiene la imagen estática */  /* opcional, revisar en móviles */

    /*background-attachment: scroll; Si notas lag en móviles cambia fixed por scroll*/ 

    position: relative;

    min-height: 500px;      

}



/* Overlay translúcido encima de la imagen */

.porque-caja::before {

    content: "";

    position: absolute;

    inset: 0;

    background: rgba(218, 218, 220, 0.541); /* capa traslúcida */

    backdrop-filter: blur(5px);            /* efecto vidrio */

    z-index: 1;

}



/* Contenedor interno igual que Nosotros */

.porque-contenedor {

    max-width: 1320px;

    margin: auto;

    padding: 60px 0; /* mismo padding que Nosotros */

    position: relative;

    z-index: 20; /* encima del overlay */

}



/* Contenido encima */

.porque-grid {

    position: relative;

    z-index: 20;

    padding: 30px 0px;

    max-width: 1320px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;

    align-items: stretch; /* fuerza misma altura */

    gap: 30px;

}



/* ==================================================

   TITULO GENERAL PARA TODAS LAS SECCIONES DEL INDEX

================================================== */

.titulo-seccion {

   text-align: center;

    font-size: 34px;    

    font-weight: 800;

    margin-bottom: 30px;

    padding-bottom: 8px;

    width: 100%;

    display: block;

    position: relative;

    letter-spacing: -1px;/* Letras más pegadas sin deformar */

}



.titulo-seccion::after {

    content: "";

    width: 150px;  /* agrandar la linea que esta debajo de cada titulo */

    height: 3px;

    background: var(--rojo);

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    border-radius: 2px;

}



.titulo-seccion .negro {

    color: var(--negro);

}



.titulo-seccion .rojo {

    color: var(--rojo);

}



.porque-item {

    text-align: center;

    padding: 0 15px;

    display: flex;

    flex-direction: column;

    justify-content: space-between; /* t�tulos y p�rrafos arriba */

    text-align: center;


}



/* 1. Iconos más grandes (85–90px) */

.porque-icon img {

    width: 88px;

    height: 88px;

    margin-bottom: 12px; /* Menos espacio icono → título */

    opacity: 0.95;

    transition: 0.3s ease;

}



/* Hover del icono */

.porque-item:hover .porque-icon img {

    transform: scale(1.06);

    opacity: 1;

}



/*  Hover fino: título cambia a rojo corporativo */

.porque-item h3 {

    font-size: 24px;

    font-weight: 700;

    color: var(--negro);

    margin-bottom: 15px;

    transition: 0.3s ease;

}



.porque-item:hover h3 {

    color: var(--rojo);

}

 

.porque-item p {

     flex-grow: 1;           /* ocupa el espacio restante */

     display: flex;

     align-items: flex-start;   /* texto alineado arriba */

     justify-content: center;   /* opcional: centra horizontal */

    font-size: 17px;

    color: var(--gris-oscuro);

    line-height: 1.6;

    padding: 0 10px;       /* un poco de aire lateral */

    margin-bottom: 30px;

    text-align: justify;
    
    margin-top: auto

}



/* Separadores verticales */

.separator {

    width: 1.5px;

    background: var(--gris-claro);

    height: 190px;

    margin: auto;

    border-radius: 1px;       /* extremos más suaves */

    opacity: 0.8;             /* un poco más sutil */

}



/* =============================

   RESPONSIVE PORQUE ELEGIRNOS

================================ */



/* Tablets (600px–1199px): 2 columnas, líneas horizontales debajo */

@media (max-width: 1199px) and (min-width: 600px) {

    .porque-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 30px;

    }

    .separator {

        display: none; /* ocultamos separadores verticales */

    }

    .porque-item {

        border-bottom: 1px solid var(--gris-claro);

        padding-bottom: 20px;

    }

    /* quitar línea en los últimos de la fila */

    .porque-item:nth-last-child(-n+2) {

        border-bottom: none;

    }

    .porque-contenedor { padding: 20px 40px; } /* igual que Nosotros */

}



/* Móviles (≤599px): 1 columna, líneas horizontales debajo */

@media (max-width: 599px) {

    .porque-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    .separator {

        display: none; /* ocultamos separadores verticales */

    }

    .porque-item {

        border-bottom: 1px solid var(--gris-claro);

        padding-bottom: 20px;

    }

    .porque-item:last-child {

        border-bottom: none;

    }

    .porque-icon img {

        width: 70px;

        height: 70px;

    }

    .porque-caja {

        background-attachment: scroll; /* desactiva parallax en móviles */

    }

    .porque-contenedor { padding: 40px 15px; } /* igual que Nosotros */

}

@media (max-width: 600px) {

    .porque-caja {

        background: url("../IMAGENES/BannerIndex/Webp/inicio6_800.webp") center/cover no-repeat;

        background-attachment: scroll; /* evita lag en móviles */

        min-height: 250px;

    }

     .banner-elegirnos {

        background: url("../IMAGENES/BannerIndex/Webp/inicio6_800.webp") center/cover no-repeat;

        background-attachment: scroll; /* evita lag en móviles */

        min-height: 250px;

    }

}





/* ============================

    SECCIÓN NOSOTROS 

=============================== */



/* CONTENEDOR GENERAL */

.nosotros-hr {

    max-width: 1320px;

    margin: auto;

    padding: 60px 20px;

}



.contenedor-nosotros {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    text-align: justify;

}



/* TEXTO */

.nosotros-texto {

    flex: 1.2;

}



.descripcion-nosotros {

    font-size: 17px;

    line-height: 1.6;

    margin-bottom: 30px;

    color: var(--gris-oscuro);

    text-align: justify;

}



/* BULLETS */

.nosotros-bullets {

    list-style: none;

    padding: 0;

    margin: 0;

}



.nosotros-bullets li {

    font-size: 17px;

    line-height: 1.6;

    margin-bottom: 30px;

    color: var(--gris-oscuro);

    text-align: justify;

    margin-bottom: 12px;

    text-align: justify;

}



.icono-svg {

    width: 20px;

    height: 20px;

    margin-right: 10px;

}



/* IMAGEN */

.nosotros-imagen {

    flex: 1; /* Aumenta el espacio de la imagen */

    position: relative;

    padding-top: 60px;

}



.nosotros-imagen::before {

    content: "";

    position: absolute;

    right: -25px;   /* mueve la figura hacia la derecha */

    bottom: -25px;  /* mueve la figura hacia abajo */

    width: 560px;

    height: 480px;

    background: #7a0000; /* rojo corporativo */

    border-radius: 12px; /* opcional, esquinas redondeadas */

    z-index: 0; /* detrás de la imagen */

}



.nosotros-imagen img {

    position: relative;

    z-index: 1; /* asegura que la imagen quede encima */

    width: 100%;

    height: 500px; /* Ajuste ideal */

    object-fit: cover;

    border-radius: 12px;    

}



/* ============================

    RESPONSIVE NOSOTROS

=============================== */



/* Tablets (<= 992px) */

@media (max-width: 992px) {

    .nosotros-hr {

        padding: 50px 40px; /* más aire en los lados */

    }

    

    .contenedor-nosotros {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }



    .nosotros-texto {

        flex: 1;

    }

    .subtitulo-nosotros {

        text-align: left;   /* fuerza el subtítulo a la izquierda */

        width: 100%;        /* asegura que ocupe todo el ancho */

        margin-left: 0;     /* evita desplazamientos */

    }



    .nosotros-imagen {

        max-width: 560px; /* mantiene proporción */

        margin: 0 auto;

    }



    .nosotros-imagen::before {

        width: 560px;

        height: 500px;

        right: -20px;

        bottom: -20px;

    }



    .nosotros-imagen img {

        height: 520px;

    }

}



/* Móviles medianos (<= 768px) */

@media (max-width: 768px) {



    .nosotros-hr {

        padding: 40px 30px; /* más aire en los lados */

    }

     

    .descripcion-nosotros {

        font-size: 14px;

        line-height: 1.5;

    }



    .nosotros-bullets li {

        font-size: 14px;

        line-height: 1.5;

        text-align: justify;

    }



    .nosotros-imagen::before {

        width: 410px;

        height: 320px;

        right: -20px;

        bottom: -20px;

    }



    .nosotros-imagen img {

        height: 320px;

    }

}



/* Móviles pequeños (<= 480px) */

@media (max-width: 480px) {

    .nosotros-hr {

        padding: 40px 20px; /* más aire en los lados */

    }



    .titulo-seccion {

        font-size: 22px;

    }



    .descripcion-nosotros {

        font-size: 13px;

        line-height: 1.4;

    }



    .nosotros-bullets li {

        font-size: 13px;

        line-height: 1.4;

    }



    .nosotros-imagen::before {

        height: 280px;

    }



    .nosotros-imagen img {

        height: 280px;

    }

}



/* ==================================================

   SERVICIOS

================================================== */



.servicios {

    padding: 60px 20px;

    text-align: center;

    background: var(--gris-muy-claro); /* fondo claro para diferenciar */

}



.grid {

    max-width: 1320px;   /* ancho suficiente para 4 tarjetas arriba */

    margin: auto;      /* centra todo el grid en la página */

    display: grid;

    padding: 20px 0;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 30px;

    justify-content: center; /* centra las filas incompletas */

    justify-items: center;   /* centra cada tarjeta dentro de su celda */

}



.fila-centrada {

    display: flex;

    justify-content: center;

    gap: 30px;

    grid-column: 1 / -1; /* ocupa todo el ancho */

}



.card {

    background: var(--blanco);                 /* fondo sólido corporativo */

    border: 2px solid var(--gris-claro1);       /* borde sutil para dar estructura */

    border-radius: 12px;         /* menos redondeado, más sobrio */

    padding: 40px 20px;

    max-width: 300px;

    min-height: 360px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.06); /* sombra ligera */

    transition: transform 0.25s ease, box-shadow 0.25s ease;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    text-align: center;

}



.card:hover {

    transform: translateY(-6px);

    box-shadow: 0 8px 20px rgba(0,0,0,0.12); /* hover más sutil */

}



.card h3 {

    font-size: 24px;

    font-weight: 700;

    margin-bottom: 12px;

    color: var(--negro); /* título corporativo */

}



.card h3 span {

    color: var(--rojo); /* palabra destacada en rojo corporativo */

}



.card p {

    font-size: 17px;

    line-height: 1.6;

    color: var(--gris-oscuro); /* párrafos uniformes */

}



/* Íconos minimalistas */

.icono-servicio {

    width: 90px;

    height: 70px;

    margin: 0 auto 20px auto;

    display: block;

    object-fit: contain;

    color: var(--rojo); /* ícono corporativo */

    background: none; /* sin fondo circular */

}



/* Overlay moderno */

.card-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(rgba(122,0,0,0.85), rgba(122,0,0,0.7));

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    opacity: 0;

    transition: opacity 0.35s ease;

    padding: 20px;

    text-align: center;

    border-radius: 12px;    /* menos redondeado, más sobrio */

}



.card-overlay h4 {

    color: var(--blanco);

    font-size: 20px;

    font-weight: 700;

    margin-bottom: 18px;

}



.card:hover .card-overlay {

    opacity: 1;

}



/* Pantallas muy grandes (≥1400px) */

@media (min-width: 1400px) {

    .grid {

        grid-template-columns: repeat(4, 1fr); /* fuerza 4 columnas arriba */

        gap: 40px;

    }



    .fila-centrada {

        justify-content: center;

        flex-wrap: nowrap; /* mantiene en fila horizontal */

    }



    .card {

        max-width: 320px;

        min-height: 400px;

    }



    .card h3 {

        font-size: 24px;

    }



    .card p {

        font-size: 18px;

    }

}



/* Pantallas medianas (≤900px) */

@media (max-width: 900px) {

    .grid {

        grid-template-columns: repeat(2, 1fr); /* 2 columnas */

        gap: 24px;

    }



    .fila-centrada {

        flex-wrap: wrap; /* permite que bajen a segunda fila */

        justify-content: center;

    }



    .card {

        max-width: 100%;

        min-height: 340px;

    }



    .card h3 {

        font-size: 20px;

    }



    .card p {

        font-size: 15px;

    }

}



/* Pantallas pequeñas (≤600px) */

@media (max-width: 600px) {

    .grid {

        grid-template-columns: 1fr; /* una sola columna */

        gap: 20px;

    }



    .fila-centrada {

        flex-direction: column; /* apila los servicios */

        align-items: center;

    }



    .card {

        min-height: 300px;

        padding: 28px 16px;

    }



    .card h3 {

        font-size: 18px;

    }



    .card p {

        font-size: 14px;

        line-height: 1.5;

    }



    .icono-servicio {

        width: 70px;

        height: 55px;

    }

}



/* ================================

   SERVICIO DESTACADO

================================ */

.servicio-destacado {

    width: 100%;

    padding: 80px 20px;

    background: var(--blanco); /* fondo corporativo */

}



.destacado-contenedor {

    max-width: 1300px;  /*Ancho de la sección SERVICIO DESTACADA*/

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

}



.destacado-texto {

    flex: 1.2;

}



.destacado-titulo {

    font-size: 24px;

    font-weight: 800;

    margin-bottom: 20px;

    color: var(--negro); /* título corporativo */   

}



.destacado-descripcion {

    font-size: 17px;

    line-height: 1.7;

    margin-bottom: 25px;

    text-align: justify;

    color: var(--gris-oscuro); /* párrafos uniformes */

}



.destacado-lista {

    list-style: none;

    padding: 0;

    margin: 0 0 30px 0;

}



.destacado-lista li {

    display: flex;

    align-items: center;

    font-size: 17px;

    margin-bottom: 12px;

    color: var(--gris-oscuro); /* texto de lista */

}



.destacado-lista img {

    width: 20px;

    margin-right: 10px;

}



.destacado-imagen {

    flex: 1;

    position: relative;

    padding-top: 60px;

    padding-left: 2px;



}



.destacado-imagen::before {

    content: "";

    position: absolute;

    right: 35px;   /* mueve la figura hacia la derecha */

    bottom: -25px;  /* mueve la figura hacia abajo */

    width: 560px;

    height: 480px;

    background: #7a0000; /* rojo corporativo */

    border-radius: 12px; /* opcional, esquinas redondeadas */

    z-index: 0; /* detrás de la imagen */

}



.destacado-imagen img {

    position: relative;

    z-index: 1; /* asegura que la imagen quede encima */

    width: 100%;

    height: 500px; /* Ajuste ideal */

    object-fit: cover;

    border-radius: 12px;   

}



/* DESTACADO — Ajuste responsive */

@media (max-width: 900px) {

    .destacado-imagen img {

        height: 300px;

    }

}



@media (max-width: 600px) {

    .destacado-titulo {

        font-size: 26px;

    }

}



/* ==================================================

   CASOS DE ÉXITO — ESTILO CORPORATIVO

================================================== */

/* Contenedor general centrado y con ancho limitado */

.casos-contenedor {

    max-width: 1320px;   /* mismo ancho que el resto de secciones */

    margin: auto;      /* centra todo el contenido */

    padding: 60px 20px;     /* espacio lateral para respiración */ 

}



/* Centrado del título principal "Casos de Éxito" */

.casos-exito .titulo-seccion {

    display: block;

}



/* Grid de 3 columnas para las cards */

.casos-grid {

    display: grid;

    grid-template-columns: repeat(3, 1.9fr); /* 3 columnas iguales */

    gap: 20px;                              /* separación entre cards */

    margin-top: 50px;                       /* espacio respecto al título */   

}



/* Card individual de cada caso */

.caso-general {

    background: var(--blanco); /* fondo corporativo */

    border-radius: 18px;                    /* bordes redondeados premium */

    box-shadow: 0 8px 25px rgba(0,0,0,0.12);/* sombra elegante */

    overflow: hidden;                       /* evita desbordes */

    transition: transform 0.3s ease, 

                box-shadow 0.3s ease;       /* animación suave */

}



/* Efecto hover premium */

.caso-general:hover {

    transform: translateY(-6px);            /* levanta la card */

    box-shadow: 0 12px 30px rgba(0,0,0,0.18);/* sombra más profunda */

}



/* Etiqueta superior (categoría del caso) */

.caso-etiqueta {

    background: var(--rojo-premium); /* rojo corporativo premium */

    color: var(--blanco);

    padding: 10px 15px;

    font-weight: 600;

    font-size: 15px;

    text-align: center;

    letter-spacing: 0.5px;                  /* estilo más corporativo */

}



/* Contenido interno de la card */

.caso-item {

    padding: 15px 25px 30px;                /* espaciado interno */

}



/* Imagen del caso */

.caso-img img {

    width: 100%;                /* ocupa todo el ancho */

    height: 250px;               /* altura uniforme */

    object-fit: cover;          /* recorte profesional */

    border-radius                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       : 12px;       /* bordes suaves */

}



/* Caja de detalles técnicos (cliente, año, lugar) */

.caso-detalle {

    background: var(--gris-claro1); /* gris corporativo */

    padding: 12px 15px;

    border-radius: 10px;

    font-size: 15px;

    line-height: 1.5;

    margin-bottom: 18px;

    border-left: 4px solid var(--rojo-premium); /* línea premium corporativa */

}



/* Contenedor para centrar el botón */

.casos-boton-contenedor {

    text-align: center;          /* centra el botón */

    margin-top: 40px;            /* espacio respecto a las cards */

}





/* ==================================================

   FORMULARIO CORPORATIVO A LA DERECHA

================================================== */

/* SECCIÓN COMPLETA CON IMAGEN DE FONDO */

.contacto-full {

    position: relative;

    width: 100%;

    min-height: 600px;

    background: url('../IMAGENES/BannerIndex/WEBP/inicio_1920.webp') center/cover no-repeat;

    display: flex;

    align-items: center;

    padding: 80px 20px;

}



/* CAPA OSCURA PARA CONTRASTE */

.overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.55);

    backdrop-filter: blur(2px);

}



/* CONTENIDO */

.contacto-contenido {

    position: relative;

    z-index: 2;

    max-width: 1300px;

    margin: auto;

    display: grid;

    grid-template-columns: 1.2fr 1fr; /* equilibrio perfecto  tamaño del lado derecho e izquierdo */

    gap: 20px;  /* menos espacio muerto */

    align-items: center;

}



/*.contacto-formulario {

    display: flex;

    justify-content: flex-start; /* mueve el formulario hacia el centro 

}*/



/*.form-card {

    max-width: 450px; /* más presencia 

    width: 100%;

}*/



/* TEXTO ORIENTADOR */

.contacto-texto {

    color: var(--blanco);

    padding: 20px;

    animation: fadeLeft 0.8s ease forwards;

    opacity: 0;

    transform: translateX(-20px);

}



.contacto-texto h2 {

    font-size: 36px;          /* más grande, más autoridad */

    font-weight: 700;         /* más sólido */

    letter-spacing: 0.5px;    /* más elegante */

    margin-bottom: 20px;

    color: var(--blanco);

}



/* menos espacio muerto */

.contacto-texto h2::after {

    content: "";

    display: block;

    width: 70px;

    height: 4px;

    background: var(--rojo); /* línea corporativa */

    margin-top: 10px;

    border-radius: 2px;

}



.contacto-texto p {

    font-size: 18px;

    line-height: 1.5;

    margin-bottom: 10px;

    color: var(--blanco); /* párrafos sobre fondo oscuro */

}



/* ANIMACIÓN */

@keyframes fadeLeft {

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



/* TARJETA TRANSLÚCIDA */

.form-card {

    background: rgba(227, 225, 225, 0.15);

    backdrop-filter: blur(12px);

    padding: 40px;

    border-radius: 20px;

    box-shadow: 0 8px 25px rgba(0,0,0,0.25);

    animation: fadeUp 0.8s ease forwards;

    opacity: 0;

    transform: translateY(20px);

}



@keyframes fadeUp {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* FORMULARIO */

/* BOTÓN DE ENVÍO */

.btn-enviar {

    background: var(--rojo);              /* color corporativo */

    color: var(--blanco);                 /* texto blanco */

    font-size: 18px;

    font-weight: 600;

    padding: 14px 28px;

    border: none;

    border-radius: 12px;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 6px 18px rgba(0,0,0,0.25);

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



/* Hover → efecto elegante */

.btn-enviar:hover {

    background: var(--rojo-hover-claro);  /* tono más claro */

    box-shadow: 0 8px 22px rgba(0,0,0,0.35);

    transform: translateY(-2px);

}



/* Estado activo → clic */

.btn-enviar:active {

    transform: scale(0.97);

    box-shadow: 0 4px 12px rgba(0,0,0,0.25);

}



/* Estado deshabilitado → cuando JS bloquea el botón */

.btn-enviar:disabled {

    background: rgba(255,77,77,0.6);

    cursor: not-allowed;

    box-shadow: none;

}



.formulario-index {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



/* GRUPOS CON ICONOS */

.form-group {

    position: relative;

}

.texto-blanco{

    color: var(--blanco);

}



.rojo{

    text-shadow: 0 0 4px rgba(220, 220, 220, 0.82); /* resalta sobre fondos claros y oscuros */

}



/* ESTADO NORMAL-FORMULARIO */



.form-group input,

.form-group textarea {

    width: 100%;

    padding: 15px 15px 15px 45px;

    border: 2px solid rgba(255,255,255,0.8); /* borde blanco */

    border-radius: 12px;

    font-size: 17px;

    background: rgba(255,255,255,0.1);

    color: var(--blanco);

    transition: all 0.3s ease;

    outline: none;  /* elimina la línea negra por defecto */

}



/* ICONOS PREMIUM SOLO PARA EL FORMULARIO DEL INDEX */

.contacto-full .icono {

    position: absolute;

    left: 14px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 20px;

    color: rgba(255,255,255,0.75);

    transition: 0.3s ease;

}



/* Cambio de color al escribir (funciona siempre) */

.form-group:focus-within .icono {

    color: var(--rojo-hover-claro); /* rojo corporativo */

}



.textarea-group .icono {

    top: 17px; /* centrado matemático */

    transform: none; /* evita el desplazamiento extra */

}



/* ESTADO DE ENFOQUE (FOCUS) → mantiene borde blanco */

.form-group input:focus,

.form-group textarea:focus {              

    border-color: rgba(255,255,255,0.9); /* sigue blanco */

    box-shadow: 0 0 8px rgba(255,255,255,0.4);

}



/* ESTADO INVÁLIDO (ERROR) → se mantiene rojo */

.form-group input.error-input,

.form-group textarea.error-input {

    border-color: #ff1a1a; /* rojo vivo */

    background: rgba(255,0,0,0.08);

    box-shadow: 0 0 6px rgba(211,47,47,0.6);

    color: var(--blanco);

}





/* CASOS — Ajuste responsive */

@media (max-width: 1100px) {

    .casos-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 700px) {

    .casos-grid {

        grid-template-columns: 1fr;

    }

}



/* ===============================

      BROCHURE

================================== */

.cta-brochure {

    padding: 100px 20px;

    background: url('../IMAGENES/BannerIndex/WEBP/inicio3_1200.webp') center/cover no-repeat;

    position: relative;

    text-align: center;

    color: var(--blanco); /* texto corporativo */

    min-height: 400px;

}



.cta-brochure::before {

    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.55); /* overlay oscuro */

}



.cta-contenedor {

    position: relative;

    max-width: 900px;

    margin: auto;

    z-index: 1;

}



.cta-titulo {

    text-align: center;

    font-size: 34px;    

    font-weight: 800;

    margin-bottom: 30px;

    text-align: center;

    width: 100%;

    display: block;

    padding-bottom: 12px;

    position: relative;

    letter-spacing: -1px; /* Letras más pegadas sin deformar */

}



.cta-titulo::after {

    content: "";

    width: 150px;  /* agrandar la linea que esta debajo de cada titulo */

    height: 3px;

    background: var(--rojo-premium);  /* línea corporativa */

    position: absolute; 

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

}



.cta-titulo .rojo {

    color: var(--rojo); /* rojo corporativo */

}





/* Ajustes para pantallas medianas (tablets) */

@media (max-width: 992px) {

    .cta-titulo {

        font-size: 28px;

        margin-bottom: 25px;

    }



    .cta-texto {

        font-size: 16px;

        margin-bottom: 25px;

    }

}



/* Móvil */

@media (max-width: 600px) {

    .cta-brochure {

        background: url('../IMAGENES/BannerIndex/WEBP/inicio3_800.webp') center/cover no-repeat;

        min-height: 250px;

    }

}



/* Ajustes para pantallas pequeñas (móviles) */

@media (max-width: 576px) {

    .cta-brochure {

        padding: 70px 15px; /* menos padding para no ocupar tanto */

    }



    .cta-titulo {

        font-size: 22px;

        line-height: 1.3;

    }



    .cta-texto {

        font-size: 15px;

        line-height: 1.5;

    }

}







/* ==================================================

   NUESTROS CLIENTES

================================================== */

.clientes {

    padding: 80px 20px;

    background: var(--gris-claro1); /* fondo corporativo */  

    text-align: center;

}



/* GRID PERFECTA PARA 8 LOGOS */

.clientes-grid {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 40px;

    align-items: center;

    justify-items: center;

    margin-top: 40px;

    opacity: 0;

    transform: translateY(20px);

    animation: fadeSlide 0.8s ease forwards;

}



/* ANIMACIÓN SUAVE */

@keyframes fadeSlide {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* ITEM */

.cliente-item {

    width: 180px;

    height: 120px;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 15px;

    transition: transform 0.3s ease;

}



/* LOGOS CALIBRADOS POR PESO VISUAL */

.cliente-item img {

    width: 100%;        /* tamaño base */

    height: 100%;

    object-fit: contain;

    filter: grayscale(100%);

    opacity: 0.6;

    transition: all 0.3s ease;

}



/* HOVER PREMIUM */

.cliente-item:hover img {

    filter: grayscale(0%);

    opacity: 1;

    transform: scale(1.05);

}



.cliente-item:hover {

    transform: translateY(-4px);

}



/* CLIENTES — Ajuste responsive */

@media (max-width: 900px) {

    .clientes-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}



@media (max-width: 600px) {

    .clientes-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .cliente-item {

        width: 140px;

        height: 100px;

    }

}



/* ==================================================

   PREGUNTAS FRECUENTES - FAQ 

================================================== */

.faq {

    padding: 80px 20px;

    background: var(--gris-muy-claro); /* fondo corporativo */

}



.faq-contenedor {

    max-width: 1000px;

    margin: auto;

}



.faq-item {

    border-bottom: 1px solid var(--gris-claro1);

    margin-bottom: 15px;

}



.faq-pregunta {

    width: 100%;

    background: none;

    border: none;

    text-align: left;

    font-size: 17px;

    font-weight: 600;

    padding: 15px;

    cursor: pointer;

    position: relative;

    color: var(--negro);

    transition: color 0.3s ease;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.faq-pregunta:hover {

    color: var(--rojo); /* hover corporativo */

}



.faq-pregunta .icono {

    width: 22px;

    height: 22px;

    stroke: var(--rojo);

    transition: transform 0.3s ease;

}



.faq-respuesta {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.4s ease, padding 0.3s ease, opacity 0.4s ease;

    padding: 0 18px;

    color: var(--gris-oscuro);

    font-size: 17px;

}



.faq-item.active .faq-respuesta {

    max-height: 200px;

}



.faq-item.active .faq-pregunta .icono {

    transform: rotate(180deg); /* flecha hacia arriba */

}



/* Evita que el autocompletado cambie el fondo */

.form-group input:-webkit-autofill,

.form-group textarea:-webkit-autofill {

    -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.1) inset !important; /* mantiene fondo translúcido */

    -webkit-text-fill-color: var(--blanco) !important; /* texto blanco */

    border: 2px solid rgba(255,255,255,0.8) !important; /* borde blanco */

    transition: background-color 5000s ease-in-out 0s; /* truco para evitar parpadeo */

}



/* Si el campo tiene error y además autocompletado */

.form-group input.error-input:-webkit-autofill,

.form-group textarea.error-input:-webkit-autofill {

    -webkit-box-shadow: 0 0 0px 1000px rgba(255,0,0,0.08) inset !important;

    -webkit-text-fill-color: var(--blanco) !important;

    border: 2px solid #ff1a1a !important;

}



/* Placeholders más visibles */

.form-group input::placeholder,

.form-group textarea::placeholder {

    color: rgba(255,255,255,0.75);   /* casi blanco */

    font-weight: 400;                /* un poco más grueso */

    letter-spacing: 0.5px;           /* separación ligera */

}



/* TEXTAREA */

.form-group textarea { 

    height: 140px;

    resize: none;

}



/* ESTILOS DE LA VALIDACIÓN */

.form-group {

    position: relative; /* clave para posicionar elementos internos */

    margin-bottom: 20px; /* espacio extra entre grupos cuando aparece el error */

}



.form-group .error {

    position: absolute;

    bottom: -18px;       /* coloca el mensaje justo debajo del input */

    left: 45px;          /* alineado con el texto, no con el icono */

    font-size: 14px;    /* más pequeño que el texto del campo */

    line-height: 1.2;  /* mejor legibilidad */

    color: #ff1a1a !important; /* rojo vivo */

    font-weight: 700;

    text-shadow: 0 0 8px rgba(0,0,0,0.6); /* resalta sobre fondos claros y oscuros */

     

}



/*MENSAJE DE ENVIADO EXITOSAMENTE FORMULARIO*/

.mensaje-exito {

    margin-top: 15px;

    padding: 12px 18px;

    border-radius: 10px;

    background: rgba(0, 180, 90, 0.2); /* verde translúcido */

    color: #fff;

    font-weight: 600;

    text-align: center;

    box-shadow: 0 0 8px rgba(0,0,0,0.4);

    animation: fadeIn 0.5s ease forwards;

}



@keyframes fadeIn {

    from { opacity: 0; transform: translateY(-5px); }

    to { opacity: 1; transform: translateY(0); }

}



/*MENSAJE GENERAL DE ERROR EN EL FORMULARIO*/

.mensaje-error-general {

    margin-top: 15px;

    padding: 12px 18px;

    border-radius: 10px;

    background: rgba(255, 0, 0, 0.2); /* rojo translúcido */

    color: #fff;                      /* texto blanco */

    font-weight: 600;

    text-align: center;

    box-shadow: 0 0 8px rgba(0,0,0,0.4);

}





/* ===============================

   FORMULARIO — Ajuste responsive

================================== */

@media (max-width: 1200px) {

    .contacto-full {

        background: url('../IMAGENES/BannerIndex/Webp/inicio_1200.webp') center/cover no-repeat;

        min-height: 400px;

    }

}

@media (max-width: 900px) {

    .contacto-contenido {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 600px) {

     .contacto-full {

        background: url('../IMAGENES/BannerIndex/Webp/inicio_800.webp') center/cover no-repeat;

        min-height: 250px;

    }

    .contacto-texto h2 {

        font-size: 28px;

    }

     .overlay {

        background: rgba(0, 0, 0, 0.65); /* aún más oscuro en móviles */

    }

    .contacto-texto h2 {

        font-size: 28px;

    }

}