@charset "utf-8";
/* CSS Document */

/* Estilos generales del cuerpo */
body {
  font-family: 'Roboto', sans-serif;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto; /* permite el scroll vertical */
  background-color: #f8f8f8
}

.wrap {
  width: 100%; /* en lugar de fijo, as� se adapta */
  height: 100%;
  margin: 0 auto;
}


/* ================================================= */
/* 1. RESET Y ESTRUCTURA BASE                        */
/* ================================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    padding-top: 60px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
}

/* ================================================= */
/* 2. HEADER Y NAVEGACI�N PRINCIPAL                  */
/* ================================================= */
.header {
    width: 100%;
    left: 0;
    background: white;
border-bottom: 2px solid #007bff !important; /* Color solicitado */
    height: 60px;
position: fixed; /* O sticky, seg�n uses */
    top: 0;
    background-color: #ffffff; /* Asegura que tenga fondo s�lido */
    z-index: 9999 !important; /* El nivel m�s alto */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Sutil sombra para separar del contenido */
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo img {
    height: 50px;
    width: auto;
    display: block;
}

/* --- OVERLAY (FONDO BORROSO ORIGINAL) --- */
.mega-menu-overlay {
    position: fixed;
    top: 60px; 
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px); /* TU EFECTO DE ANIMACI�N */
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 900;
    pointer-events: none;
}

.mega-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ================================================= */
/* 3. MEN� PC (DESKTOP)                              */
/* ================================================= */
.navbar .menu {
    display: flex;
    list-style: none;
    gap: 30px;
}

.menu > li > a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 15px;
    height: 60px;
    display: flex;
    align-items: center;
    transition: color 0.3s;
}

.menu > li > a:hover, 
.menu > li > a.activo {
    color: #007bff;
}

/* --- MEGA MEN� (PC) --- */
.mega-menu {
    display: none; 
    position: fixed;
    top: 60px; /* SEPARACI�N DEL HEADER */
    left: 0;
    width: 100%;
    background: white;
    padding: 30px 0;
    z-index: 9998 !important;
}

/* Clase que activa tu JS para el hover */
.mega-menu.active {
    display: block;
}

.mega-menu-content {
    display: flex;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 20px;
}

.column {
    flex: 1;
}

.titulo-rojo {
    color: #0056b3; /* Azul para resaltar marcas */
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.lista-servicios a {
    display: block;
    color: #555;
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 8px;
    transition: transform 0.2s, color 0.2s;
}

.lista-servicios a:hover {
    color: #007bff;
    transform: translateX(5px);
}

/* Nivel 3 (Sub-submen�s en PC) */
.submenu-parent {
    position: relative;
}

.nested-submenu {
    display: none;
    position: absolute;
    left: 180px;
    top: -10px;
    background: white;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    width: 250px;
    z-index: 10;
}

.submenu-parent:hover .nested-submenu {
    display: block;
}

/* ================================================= */
/* 4. M�VIL (TABLETS Y CELULARES)                    */
/* ================================================= */
@media (max-width: 992px) {
    /* Bot�n Hamburguesa */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        z-index: 1100;
    }

    .menu-toggle span {
        width: 25px;
        height: 2px;
        background: #333;
        transition: 0.3s;
    }

    /* Animaci�n X de hamburguesa */
    .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .menu-toggle.active span:nth-child(2) { opacity: 0; }
    .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    /* Navbar Lateral */
    .navbar {
        position: fixed;
        top: 60px;
        right: -100%;
        width: 100%;
        height: calc(100vh - 60px);
        background: white;
        transition: right 0.4s ease;
        overflow-y: auto;
        z-index: 1000;
    }

    .navbar.active {
        right: 0;
    }

    .navbar .menu {
        flex-direction: column;
        gap: 0;
    }

    .menu > li {
        border-bottom: 1px solid #f1f1f1;
    }

    .menu > li > a {
        padding: 20px;
        justify-content: space-between;
        font-size: 16px;
    }

    /* Esto asegura que si tiene la clase activo, se pinte de azul */
.menu > li > a.activo {
    color: #007bff !important;
    font-weight: bold;
}
    
    /* Mega Men� en M�vil (Segundo Nivel) */
    .mega-menu {
        display: block; /* Se vuelve bloque para la animaci�n */
        position: fixed;
        top: 60px;
        right: -100%; /* Escondido a la derecha */
        width: 100%;
        height: calc(100vh - 60px);
        background: white;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0;
        overflow-y: auto;
        box-shadow: none;
    }

    .mega-menu.active-mobile {
        right: 0;
    }

    .mega-menu-content {
        flex-direction: column;
        padding: 20px;
        gap: 30px;
    }

    /* Cabecera M�vil (Bot�n Atr�s) */
    .mobile-back-header {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        background: #f8f9fa;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        color: #007bff;
        font-weight: 600;
        position: sticky;
        top: 0;
        z-index: 5;
    }

    .back-title {
        margin-left: auto;
        color: #666;
        font-size: 14px;
        font-weight: 400;
    }

    /* SUB-SUBMEN�S M�VIL (Instalaci�n y Mantenimiento) */
    .nested-submenu {
        display: none; /* OCULTO POR DEFECTO */
        position: static;
        width: 100%;
        padding-left: 20px;
        box-shadow: none;
        background: #fafafa;
        border-left: 2px solid #fafafa;
        margin-top: 5px;
    }

    /* Cuando se hace clic en el trigger (v�a JS) */
    .submenu-parent.open .nested-submenu {
        display: block;
    }

    .trigger-n3 {
        font-weight: 600;
        color: #333 !important;
        display: flex;
        justify-content: space-between;
    }

    .titulo-rojo {
        font-size: 15px;
        border-bottom: 1px solid #eee;
        padding-bottom: 8px;
    }
}

/* --- OCULTAR ELEMENTOS DE M�VIL EN ESCRITORIO --- */
@media (min-width: 993px) {
    /* Ocultamos el bot�n de atr�s y cualquier header m�vil que est� en el header principal */
    .mobile-back-header, 
    #btnBack, 
    .menu-toggle {
        display: none !important;
    }
}

/* --- AJUSTE EN M�VIL --- */
@media (max-width: 992px) {
    /* El mega menu de PC debe estar apagado */
    .mega-menu {
        display: none; /* Cambiamos de block a none para evitar el auto-despliegue */
        position: fixed;
        top: 60px;
        right: -100%;
        width: 100%;
        height: calc(100vh - 60px);
        background: white;
        transition: right 0.4s ease;
        z-index: 2000;
    }

/* Solo se muestra cuando tiene la clase de m�vil activa */
    .mega-menu.active-mobile {
        display: block; 
        right: 0;
    }

/* Asegurar que el overlay de PC no aparezca en m�vil ni bloquee nada */
    .mega-menu-overlay {
        display: none !important;
    }
}

/* En PC el men� se comporta como hover */
@media (min-width: 993px) {
    .mega-menu {
        display: none;
        transform: none !important;
    }
    .mega-menu.active {
        display: block;
    }
}

/* ================================================= */
/* !!! PEGAR AL FINAL DE TU CSS !!!                  */
/* CORRECCIONES FINALES: BOTÓN Y SUB-MENÚ            */
/* ================================================= */

/* 1. ARREGLO PARA QUE "Instalación y Mantenimiento" ABRA SÍ O SÍ */
@media (max-width: 992px) {
    /* Aseguramos que el submenu oculto tenga estilo base */
    .nested-submenu {
        display: none; 
        padding-left: 20px;
        margin-top: 10px;
        border-left: 2px solid #007bff;
        background: #f9f9f9;
    }

    /* Esta es la clave: el !important fuerza a que se muestre cuando el JS pone la clase 'open' */
    .submenu-parent.open .nested-submenu {
        display: block !important;
        animation: fadeIn 0.3s ease;
    }
}

/* Animación suave para cuando abre */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 2. ARREGLO PARA QUE EL BOTÓN HAMBURGUESA NO DESAPAREZCA */
#mobile-menu-btn {
    position: fixed !important; /* CAMBIO CLAVE: Se fija a la pantalla */
    top: 15px; /* Ajusta esto para centrarlo verticalmente en tu header de 60px */
    right: 20px;
    z-index: 20000 !important; /* Por encima del header y de todo */
    display: flex !important;
    background: transparent; /* O 'white' si prefieres que tenga fondo propio */
    padding: 5px; /* Un poco de área de toque extra */
}

/* Forzar color negro en las líneas */
#mobile-menu-btn span {
    background-color: #333 !important; /* Color negro fuerte para las líneas */
    display: block;
}

@media (min-width: 993px) {
    #mobile-menu-btn {
        display: none !important;
    }
}

/* ========================================================= */
/* =============== ANIMACION NAVEGAR HEADER ================ */
/* ========================================================= */

/* 1. ASEGURAR QUE EL ANCLA LLEGUE AL LUGAR CORRECTO */
[id] {
scroll-margin-top: 25vh !important
}

/* 2. ESTILO BASE DE LA TARJETA PARA QUE SOPORTE LA ANIMACI�N */
.carta-servicio {
    display: block;      /* Asegura que se comporte como caja */
    position: relative;  /* Necesario para z-index */
    transition: transform 0.3s;
    /* Importante: NO poner overflow:hidden aqu� si es posible */
}

/* 1. Configuraci�n de la tarjeta para la animaci�n */
.resaltar-tarjeta {
    position: relative !important;
    z-index: 10 !important; /* Lo suficientemente alto para brillar, pero DEBAJO del header (que es 9999) */
    animation: zoomYBordeFino 1.5s ease-out forwards;
    
    /* Esto asegura que el navegador pinte bien la animaci�n */
    will-change: transform, box-shadow;
}

/* 2. La Animaci�n H�brida: Zoom + Borde Elegante */
@keyframes zoomYBordeFino {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
    
    20% {
        /* AQU� EST� EL ZOOM QUE QUER�AS */
        transform: scale(1.05); 
        
        /* Y AQU� EL BORDE FINO (2px) EN LUGAR DEL GRUESO */
        box-shadow: 0 0 0 2px #007bff, 0 10px 25px rgba(0, 123, 255, 0.3);
    }
    
    80% {
        /* Mantenemos el zoom y el borde un rato */
        transform: scale(1.05);
        box-shadow: 0 0 0 2px #007bff, 0 10px 25px rgba(0, 123, 255, 0.3);
    }
    
    100% {
        /* Regresamos suavemente a la normalidad */
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}

/* 4. EVITAR EL CUADRO NEGRO FEO AL HACER CLIC */
a:focus, button:focus {
    outline: none !important;
}



/* ========================================================= */
/* =================== PORTADA DE INICIO =================== */
/* ========================================================= */
.contenedor_portada {
  width: 100%;
  height: 92vh;
  background-color: #024059;
  position: relative; /* importante para posicionar las barras */
  overflow: hidden;
  margin-bottom: 30px;
}

.carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  
}

.carousel-item.active {
  opacity: 1;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.progress-bar-container {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
  background: transparent;
  padding: 0;
}

.progress-segment {
  width: 40px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

.progress-segment .fill {
  height: 100%;
  width: 0%;
  background-color: #fff;
  border-radius: 2px;
  transition: width 9s linear;
}

/* Flechas minimalistas */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;   /* sin fondo */
    border: none;
    padding: 8px;
    cursor: pointer;
    z-index: 2;
    transition: opacity 0.3s;
}

.prev:hover, .next:hover {
    opacity: 0.7;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* Ajuste para el SVG */
.prev svg, .next svg {
    display: block;
}

.progress-bar-xiaomi {
  position: absolute;
  bottom: 20px; /* puedes ajustar para subir o bajar la barra */
  left: 50%;
  transform: translateX(-50%);
  width: 80px; /* ancho de la barra, ajustable */
  height: 4px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  overflow: hidden;
  z-index: 10;
}

.progress-bar-xiaomi .fill {
  height: 100%;
  width: 0%;
  background-color: orange;
  transition: width 9s linear;
  border-radius: 4px;
}

/* ========================================================= */
/* === ARREGLO DE PORTADA ENGRANAJES (MÓVIL) === */
/* ========================================================= */

@media (max-width: 768px) {
    
    .contenedor_portada {
        /* CAMBIO CLAVE: */
        /* En lugar de ocupar casi toda la pantalla (92vh), 
           lo bajamos al 50% o 60%. */
        height: 55vh !important; 
        min-height: 350px; /* Para que no quede muy chaparro en cels viejos */
    }

    /* Opcional: Si quieres ver el video ENTERO sin cortes,
       aunque queden franjas azules arriba y abajo, usa esto: */
    /*
    .carousel-item video {
        object-fit: contain !important;
        background-color: #024059; 
    }
    */
}

/* ========================================================= */
/* ==================== TEXTO (TITULOS) ==================== */
/* ========================================================= */
h2 {
  width:100%;
  height:60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif; /* Usando tu tipograf�a actual */
  font-weight: 700;
  font-size: 34px;
  color: #1B2A41; /* Tu azul oscuro profesional */
  letter-spacing: 2px;
  gap: 20px; /* Espacio entre el texto y las l�neas */
}

.linea-centro {
  width: 900px;          /* Largo de la l�nea */
  height: 2px;           /* Grosor */
  background-color: #000; /* Color de la l�nea */
  border: none;          /* Quita el borde predeterminado */
  margin: 2px auto;     /* Centra horizontalmente y agrega espacio vertical */
  border-radius: 10px;
}


/* ========================================================= */
/* === SECCIÓN: INDUSTRIAS RESPALDADAS (SOLUCIÓN FINAL) ==== */
/* ========================================================= */

/* --- 1. CONTENEDOR DEL TÍTULO Y LÍNEA --- */
.contenedor-titulo-servicios {
    width: 100%;
    /* Flexbox vertical: Obliga a que la línea SIEMPRE esté abajo del texto */
    display: flex;
    flex-direction: column; 
    align-items: center; /* Centra horizontalmente */
    justify-content: center;
    padding: 40px 0;
}

.titulo-servicios-carsei {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 34px;
    color: #1B2A41;
    text-align: center;
    line-height: 1.3;
    margin-top: 40px;
    
    /* MARGEN DE SEGURIDAD: Empuja la línea azul hacia abajo */
    
    width: 100%;
}

.decoracion-linea-servicios {
  width: 600px;
  height: 2px;
  background: #eee;
  margin: 0 auto;
  position: relative;
  border-radius: 10px;
}

.punto-azul-servicios {
    position: absolute;
    height: 100%;
    background-color: #007bff;
    border-radius: 10px;
    width: 100%; /* Línea azul sólida completa */
    left: 0;
}


@media (max-width: 768px) {
    
    /* TÍTULO PRINCIPAL (Aviso de Privacidad, Portafolio, etc.) */
    .titulo-servicios-carsei {
        font-size: 28px !important;  /* Tamaño legible */
        line-height: 1.3 !important; /* Espacio entre los dos renglones de texto */
        
        /* SOLUCIÓN AL PROBLEMA DE LA LÍNEA ENCIMADA: */
        height: auto !important;     /* Deja que la caja crezca si hay 2 renglones */
        margin-bottom: 15px !important; /* Empuja la línea azul hacia abajo */
        padding-bottom: 0 !important;
    }

    /* LA LÍNEA AZUL DECORATIVA */
    .decoracion-linea-servicios {
        width: 200px !important;     /* Ancho de la línea */
        height: 2px !important;      /* Grosor */
        margin: 0 auto 30px auto !important; /* Margen: 0 arriba, auto lados (centrado), 30px abajo */
        
        /* Aseguramos que no tenga márgenes negativos que la suban */
        position: relative !important; 
        display: block !important;
    }
    
        .descripcion-azul-elegante {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        margin-top: 25px !important;
        padding: 0 15px;
        line-height: 1.4;
    }
}

/* --- 2. CONTENEDOR DE TARJETAS (GRID RESPONSIVE) --- */
.services-container {
    display: grid;
    /* POR DEFECTO (PC): 4 columnas en 1 fila */
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px;
    padding: 0 20px;
    max-width: 1400px;
    margin: 0 auto 60px auto; /* Centrado y con espacio abajo */
    justify-items: center;
}

/* --- 3. DISEÑO DE LA TARJETA INDIVIDUAL --- */
.card {
    background: #fff;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.4s ease;
    border-radius: 15px;
    border: 1px solid #f0f0f0;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Tamaño flexible pero controlado */
    width: 100%; 
    max-width: 300px; 
    min-height: 280px; /* Altura mínima uniforme */
}

/* Efectos Hover */
.card:hover {
    border-color: #007bff;
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 123, 255, 0.08);
}

.card:hover img {
    transform: scale(1.1); 
}

/* Imagen dentro de la tarjeta */
.bloque-imagen-card {
    width: 90px;
    height: 90px;
    margin: 24px auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bloque-imagen-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Texto de la tarjeta */
.card h3 {
    font-size: 18px;
    color: #313131;
    margin-bottom: 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ========================================================= */
/* === RESPONSIVE (AQUÍ OCURRE LA MAGIA) =================== */
/* ========================================================= */

/* TABLETS Y LAPTOPS PEQUEÑAS (Menos de 1200px) */
/* Aquí se ponen 2 arriba y 2 abajo */
@media (max-width: 1200px) {
    .services-container {
        grid-template-columns: repeat(2, 1fr); /* 2 Columnas */
        max-width: 800px; /* Limitamos el ancho para que se vean centradas */
    }
}

/* CELULARES (Menos de 768px) */
/* Aquí se ponen una debajo de la otra (1 Columna) */
@media (max-width: 768px) {

    .services-container {
        display: grid !important;
        grid-template-columns: 1fr !important; /* 1 sola columna vertical */
        gap: 25px !important;
        padding: 0 20px !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    .card {
        width: 100% !important;     /* Ocupa todo el ancho disponible */
        max-width: 100% !important;
        min-height: auto !important; 
        padding: 30px 20px !important;
        margin: 0 auto !important;   /* Centrado */
    }
}

/* ========================================================= */
/* ==================== TEXTO (ICONOS) ===================== */
/* ========================================================= */
h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 200;
  	font-style: normal;
	color: #000;
	text-align: center;
	font-size: 20px;
}

/* ========================================================= */
/* ================== TEXTO (ICONOS ATRAS) ================= */
/* ========================================================= */
h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 200;
  	font-style: normal;
	color: #fff;
	text-align: center;
	font-size: 12px;
}


/* ========================================================= */
/* ======================= TEXTO BLAA ====================== */
/* ========================================================= */

/* 1. TEXTO PRINCIPAL (CARS ENGINEERING...) */
.contenedor-4 {
    width: 100%;
    height: auto;       /* ¡CRUCIAL! Cambiado de 200px a auto para que no se encime */
    min-height: 150px;
    margin-bottom: 30px; /* Espacio extra abajo para no pegar con el título */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;    /* Evita que el texto toque los bordes en móvil */
}

h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 200;
    color: #666;
    text-align: center;
    font-size: 20px;
    line-height: 1.6;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

/* 2. TÍTULO "MARCAS REPRESENTADAS" (Tu clase nueva corregida) */
.contenedor-titulos {
    width: 100%;
    height: auto;      /* Cambiado a auto para móvil */
    min-height: 60px;  /* Altura mínima en PC */
    display: flex;
    align-items: center;
    justify-content: center; /* Centrado horizontal */
    text-align: center;      /* Refuerzo para el texto interno */
    margin-bottom: 20px;     /* Separación de los logos */
    margin-top: 20px;        /* Separación del texto de arriba */
}

/* Asegúrate de darle estilo al texto dentro de ese contenedor si usas h2 o h3 */
.contenedor-titulos h2, 
.contenedor-titulos h3 {
    margin: 0;
    padding: 10px;
    font-size: 1.8rem;
    font-family: 'Poppins', sans-serif;
    color: #012840; /* El azul oscuro de tu marca */
    font-weight: 700;
}

/* 3. LOGOS DE MARCAS */
.contenedor-marcas {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;      /* Altura flexible */
    flex-wrap: wrap;   /* ¡IMPORTANTE! Permite que los logos bajen si no caben */
    gap: 40px;         /* Espacio entre logos */
    padding: 20px 10px;
    margin-bottom: 40px;
}

.contenedor-marcas img {
    height: 55px;      /* Tamaño base en PC */
    width: auto;
    transition: transform 0.3s ease;
}

.contenedor-marcas img:hover {
    transform: scale(1.1);
}

/* --- AJUSTES SOLO PARA CELULAR --- */
@media (max-width: 768px) {
    /* Texto más pequeño */
    h1 {
        font-size: 16px; 
        padding: 0 15px;
    }
    
    /* Logos ajustados a 2 columnas */
    .contenedor-marcas {
        gap: 25px;
    }
    
    .contenedor-marcas img {
        height: 40px;       /* Logos más pequeños */
        max-width: 40%;     /* Asegura que quepan 2 por fila */
        object-fit: contain;
    }

    /* Ajuste del título */
    .contenedor-titulos h2 {
        font-size: 1.5rem;
    }
}
/* ========================================================= */
/* ============ SECCION PORTAFOLIO DE SOLUCIONES 2 =========== */
/* ========================================================= */

/* Contenedor principal sin separaci�n */
.servicios-container {
  width: 100%; 
  font-family: Arial, sans-serif;
  line-height: 0; 
}

/* Estilos de cada Tarjeta de Servicio */
.servicio-item {
  /* 1. Ancho y Alto Fijo */
  width: 100%; 
  height: 500px; 
    
  /* 2. Estilos Visuales */
  background-color: #fff; /* Fondo gris oscuro */
  color: white; 
    
  /* Para asegurar que el contenido no toque los bordes */
  padding: 20px 5%; 
    
  /* 3. Configuraci�n para Posicionamiento Absoluto del Bot�n */
  position: relative; 
  
  /* 4. Posicionamiento del Contenido (T�tulo y Descripci�n) */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Mueve el contenido a la parte inferior */
  line-height: 1.5; 
}

/*  ZONA DE CONFIGURACI�N DE IM�GENES POR SERVICIO  */

.portafolio-de-soluciones {
  /* Hacemos que la imagen se centre siempre */
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  
  /* DEGRADADO MEJORADO: 
     Arriba: Casi transparente (0.1)
     Abajo: Negro sólido al 90% (0.9) para que el texto resalte muchísimo */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), 
                    url('../img/COLLAGE-DE-SERVICIOS.png');
}

.mantenimiento-industrial {
  /* Hacemos que la imagen se centre siempre */
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  
  /* DEGRADADO MEJORADO: 
     Arriba: Casi transparente (0.1)
     Abajo: Negro sólido al 90% (0.9) para que el texto resalte muchísimo */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), 
                    url('../img/servicios-especializados.png');
}

.servicios-especializados {
  /* Hacemos que la imagen se centre siempre */
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  
  /* DEGRADADO MEJORADO: 
     Arriba: Casi transparente (0.1)
     Abajo: Negro sólido al 90% (0.9) para que el texto resalte muchísimo */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), 
                    url('../img/servicios-especializados-fondo.png');
}

.distribuidora-especializada {
  /* Hacemos que la imagen se centre siempre */
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  
  /* DEGRADADO MEJORADO: 
     Arriba: Casi transparente (0.1)
     Abajo: Negro sólido al 90% (0.9) para que el texto resalte muchísimo */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), 
                    url('../img/distribuidora-especializada.png');
}

.otro-servicio {
  /* Hacemos que la imagen se centre siempre */
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  
  /* DEGRADADO MEJORADO: 
     Arriba: Casi transparente (0.1)
     Abajo: Negro sólido al 90% (0.9) para que el texto resalte muchísimo */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), 
                    url('../img/servicios-especializados-fondo.png');
}

.servicio-titulo {
/* CAMBIO IMPORTANTE: Color Blanco o tu Amarillo (#E8A300) */
  color: #044BD9;  
  /* color: #E8A300;  <-- Prueba este si quieres que resalte más */
  
  font-size: 1.5em; /* Un poco más grande para imponer */
  font-weight: 800; /* Letra más gorda */
  text-transform: uppercase;
  text-align: left !important;
  width: 100%;
  margin-top: 0;
  margin-bottom: 10px;
  
}

.servicio-descripcion {
color: #f0f0f0 !important; /* Blanco casi puro */
  font-size: 1.0em;
  line-height: 1.5;
  max-width: 600px;
  margin-bottom: 40px;
  text-align: left;
  font-weight: 500;
  /* Sombra suave para lectura perfecta */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
}

/* ========================================================= */
/* === AJUSTE DE ALTURA PARA PORTADAS DE SERVICIOS (MÓVIL) === */
/* ========================================================= */

@media (max-width: 768px) {
    .servicio-item {
        /* CAMBIO CLAVE: */
        /* Reducimos la altura fija de 500px a la mitad de la pantalla (50vh) */
        height: 50vh !important; 
        
        /* Mínimo 400px para asegurar que el texto y el título quepan bien */
        min-height: 400px !important; 
    }
    
    /* Ajuste opcional para el título si sientes que queda muy grande */
    .servicio-titulo {
        font-size: 1.3em !important; 
    }
}

.descripcion-azul-elegante {
    display: block;      /* Asegura que ocupe su propia l�nea debajo */
    font-family: 'Poppins', sans-serif;
    font-size: 14px;     /* Tama�o peque�o y discreto */
    color: #044BD9;      /* Tu azul principal, similar a la referencia */
    text-transform: uppercase;
    letter-spacing: 2px; /* Espaciado amplio para elegancia */
    font-weight: 600;    /* Un peso medio para que se lea con claridad */
    margin-top: 25px;    /* ESPACIO CLAVE: Separa la descripci�n de las l�neas amarillas */
    margin-bottom: 0;    /* Quitamos margen inferior extra */
    padding: 0 20px;     /* Margen de seguridad lateral para m�viles */
}

/* ========================================================= */
/* ======= SECCION CONTENEDOR DE SERVICIOS PORTAFOLIO ====== */
/* ========================================================= */

/* ========================================================= */
/* === ESTILOS GENERALES (PC) === */
/* ========================================================= */

/* 1. SECCIÓN PRINCIPAL (FONDO) */
.seccion-bloque-completo {
    position: relative;
    width: 100%;
    padding: 0 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
}

.seccion-bloque-completo::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, 
        rgba(248, 248, 248, 1) 0%, 
        rgba(248, 248, 248, 0.7) 20%, 
        rgba(248, 248, 248, 0.7) 80%, 
        rgba(248, 248, 248, 1) 100%);
    z-index: 1;
}

.seccion-bloque-completo > * {
    position: relative;
    z-index: 2;
}

/* Fondos específicos */
.fondo-mantenimiento { background-color: transparent; }
.fondo-especializados { background-color: transparent; }
.fondo-distribuidora { background-color: transparent; }

/* 2. CONTENEDOR DE TARJETAS */
.contenedores-carta-servicios {
    display: flex;
    flex-wrap: wrap;       
    justify-content: center; 
    gap: 25px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
    margin-bottom: 40px;
}

/* 3. ESTRUCTURA DE LA CARTA */
.carta-servicio {
    position: relative;
    height: 380px; 
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    background-color: #000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    width: 600px;        
    flex-grow: 0;           
}

.carta-servicio:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Imagen de fondo */
.imagen-fondo {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 0;
}
.carta-servicio:hover .imagen-fondo { transform: scale(1.1); }

/* Capa Azul Diagonal (Versión PC) */
.capa-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(4, 75, 217, 0.98) 0%, rgba(4, 75, 217, 0.85) 100%);
    clip-path: polygon(0 0, 70% 0, 50% 100%, 0% 100%); /* Diagonal PC */
    transition: clip-path 0.6s ease;
    z-index: 1;
}
.carta-servicio:hover .capa-overlay {
    clip-path: polygon(0 0, 78% 0, 58% 100%, 0% 100%);
    background: linear-gradient(135deg, rgba(4, 75, 217, 1) 0%, rgba(4, 75, 217, 0.9) 100%);
}

/* Contenido Texto (Versión PC) */
.contenido-interactivo {
    position: absolute;
    top: 0; left: 0;
    width: 60%; /* Ancho texto PC */
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 45px;
    color: white;
    text-align: left;
}

.titulo-elegante {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.2;
    color: #fff;
}

.linea-decorativa {
    width: 280px;
    height: 3px;
    background-color: #003657; 
    margin-bottom: 20px;
    border-radius: 2px;
}

.descripcion-sutil {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    opacity: 0.95;
    margin: 0;
}

/* Flecha */
.zona-flecha {
    margin-top: 25px;
    opacity: 0.6;
    transition: transform 0.4s ease, opacity 0.4s ease;
}
.flecha-minimalista { font-size: 32px; font-weight: 200; }
.carta-servicio:hover .zona-flecha {
    opacity: 1;
    transform: translate(8px, -8px);
}

/* 4. BOTÓN DESCUBRIR (VER MÁS) */
.seccion-cta-mantenimiento {
    text-align: center;
    border-bottom: 1px solid #d6d6d6;
    padding-bottom: 60px;
    position: relative;
    z-index: 10;
}

.contenido-cta {
    max-width: 800px;
    margin: 0 auto;
}

.boton-descubrir {
    display: inline-block;
    padding: 20px 50px;
    background-color: #000;
    color: #000;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    background: #fff;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid #e6e6e6; 
}
.boton-descubrir:hover {
    border-color: #007bff;
    transform: translateY(-3px);
}

/* ========================================================= */
/* === ESTILOS GLOBALES (SE USAN EN MUCHAS PÁGINAS) === */
/* ========================================================= */

@media (max-width: 768px) {
    
    /* TÍTULO PRINCIPAL (Aviso de Privacidad, Portafolio, etc.) */
    .titulo-ventanas-carsei {
        font-size: 28px !important;  /* Tamaño legible */
        line-height: 1.3 !important; /* Espacio entre los dos renglones de texto */
        
        /* SOLUCIÓN AL PROBLEMA DE LA LÍNEA ENCIMADA: */
        height: auto !important;     /* Deja que la caja crezca si hay 2 renglones */
        margin-bottom: 15px !important; /* Empuja la línea azul hacia abajo */
        padding-bottom: 0 !important;
    }

    /* LA LÍNEA AZUL DECORATIVA */
    .decoracion-linea {
        width: 200px !important;     /* Ancho de la línea */
        height: 2px !important;      /* Grosor */
        margin: 0 auto 30px auto !important; /* Margen: 0 arriba, auto lados (centrado), 30px abajo */
        
        /* Aseguramos que no tenga márgenes negativos que la suban */
        position: relative !important; 
        display: block !important;
    }
}

/* ========================================================= */
/* === CORRECCIÓN FINAL MÓVIL (AQUÍ ESTÁ EL AJUSTE) === */
/* ========================================================= */
@media (max-width: 768px) {

    /* 1. SECCIÓN PRINCIPAL: ALTURA AUTOMÁTICA */
    .seccion-bloque-completo {
        height: auto !important; 
        min-height: 100vh;
        overflow: visible !important;
        padding-bottom: 80px;
    }

    /* 2. TÍTULO AZUL: CENTRADO */
    .contenedor-titulo-servicios {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 40px;
    }

    /* 3. TARJETAS: UNA POR UNA */
    .contenedores-carta-servicios {
        flex-direction: column !important;
        gap: 35px;
        padding: 20px;
    }

    .carta-servicio {
        width: 100% !important;
        max-width: 420px; 
        height: 480px !important; 
        margin: 0 auto;
    }

    /* 4. LA DIAGONAL (AJUSTADA PARA QUE EL TEXTO QUEPA) */
    .capa-overlay {
        /* Abrimos el azul hasta el 65% abajo para dar espacio */
        clip-path: polygon(0 0, 85% 0, 65% 100%, 0% 100%) !important;
        background: linear-gradient(135deg, rgba(4, 75, 217, 0.98) 0%, rgba(4, 75, 217, 0.95) 100%) !important;
    }

    /* 5. EL TEXTO DENTRO DE LO AZUL (CORRECCIÓN CLAVE) */
    .contenido-interactivo {
        /* IMPORTANTE: El texto solo ocupa el 60% del ancho.
           Como el azul llega hasta el 65% abajo, el texto (60%) 
           ahora SÍ cabe perfectamente dentro del azul. */
        width: 60% !important; 
        
        padding: 30px 15px !important; /* Menos padding lateral */
        justify-content: center !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .titulo-elegante {
        font-size: 20px !important; /* Texto un poco más chico para prevenir desbordes */
        margin-bottom: 10px !important;
    }
    
    .linea-decorativa {
        width: 100px !important; /* Línea más corta */
        margin-bottom: 15px !important;
    }

    .descripcion-sutil {
        font-size: 13px !important;
        line-height: 1.4 !important;
        -webkit-line-clamp: 8; 
    }

    .zona-flecha {
        margin-top: 20px !important;
        align-self: flex-start !important;
    }
    
    /* Botón de abajo visible */
    .seccion-cta-mantenimiento {
        margin-top: 40px !important;
        display: block !important;
    }
}
/* ========================================================= */
/* =========== SECCION ICONOS INSTALACION Y MANT =========== */
/* ========================================================= */

/* --- DISE�O DEL T�TULO DE INSTALACI�N Y MANTENIMIENTO --- */
.contenedor-titulo-especial {
  text-align: center;
  margin: 80px 0 50px 0;
}

.etiqueta-superior {
  color: #007bff; /* Tu azul exacto */
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  display: block;
  margin-bottom: 10px;
}

.titulo-seccion-diseno {
  font-size: 30px;
  color: #1a1a1a;
  font-weight: 800;
  margin-bottom: 20px;
}

.decoracion-linea {
  width: 600px;
  height: 2px;
  background: #eee;
  margin: 0 auto;
  position: relative;
  border-radius: 10px;
}

.punto-azul {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #007bff; /* Tu azul */
  left: 0;
  border-radius: 10px;
}

/* --- DISE�O DE LOS CUADROS DE INSTALACION Y MANTENIMIENTO --- */
.contenedor-servicios-iconos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centra las tarjetas (3 o 4) */
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto 70px auto;
  padding: 0 20px;
}

.tarjeta-icono-png {
  background: #ffffff;
  padding: 30px;
  text-align: center;
  transition: all 0.4s ease; /* Para que el hover sea suave */
  border-radius: 15px;
  border: 1px solid #d0d0d0; /* #f0f0f0*/
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  
  /* CONTROL DE ANCHO FIJO */
  width: 300px;
  flex-shrink: 0;
}

/* --- TUS EFECTOS HOVER  --- */
.tarjeta-icono-png:hover {
  border-color: #007bff;
  transform: translateY(-8px); /* La tarjeta sube */
  box-shadow: 0 15px 30px rgba(0, 123, 255, 0.08); /* Sombra azul */
}

/* El icono crece al pasar el mouse */
.tarjeta-icono-png:hover img {
  transform: scale(1.1); 
}

/* --- ELEMENTOS INTERNOS --- */
.bloque-imagen-png {
  width: 120px;
  height: 100px;
  margin: 0 auto 25px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bloque-imagen-png img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.tarjeta-icono-png h3 {
  font-size: 18px;
  color: #1a1a1a;
  margin-bottom: 10px;
  font-weight: 700;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tarjeta-icono-png p {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive para m�vil */
@media (max-width: 768px) {
  .tarjeta-icono-png {
    width: 100%;
    max-width: 350px;
  }
}

/* ========================================================= */
/* ============ SECCION PORTAFOLIO DE SOLUCIONES =========== */
/* ========================================================= */

.seccion-portafolio {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

.subtitulos-portafolio {
  width: 100%;
  height: 50px;
  background-color: #003657;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
  transition: background-color 0.3s;
}


/* --- 1. ESTILOS ESENCIALES DEL ACORDE�N (OCULTAR/MOSTRAR) --- */
/* Contenedor padre, que le da el fondo AZUL al �rea desplegada */
.contenedor-submenus-portafolio {
  background-color: #fff; 
  width: 100%;
}

/* La clase que el JS manipula para ocultar y mostrar el contenido */
.contenido-plegable {
  max-height: 0; 
  overflow: hidden; 
  transition: max-height 0.3s ease-in-out; 
  padding: 0 !important; 
}

/* La clase que se aplica cuando el JS hace clic (para mostrar) */
.contenido-plegable.activo {
  max-height: 900px; 
  padding: 0; 
}

/* --- 2. ESTILOS DEL ENCABEZADO (HOVER y ACTIVO) --- */

/* Estilos base para el encabezado (el bot�n) */
.acordeon-header {
    cursor: pointer; 
    margin-bottom: 20px solid #004d80;
    background-color: #fff; /* El color de fondo del encabezado */
    color: white;
}

/* EFECTO HOVER */
.acordeon-header:hover h1 {
    color: #007bff; 
}

/* Fuerza el reinicio de la transici�n a blanco (o tu color inicial) 
   cuando el elemento NO est� en hover y NO est� activo */
.acordeon-header:not(:hover):not(.activo) h1 {
    color: black;
    transition: color 0.05s ease-out; 
}

/* ---  ESTILOS PARA LOS SERVICIOS PRINCIPALES (ENLACES) --- */

.subtitulos-portafolio .enlace-servicio {
    /* Hereda el color de fondo y el display del div padre si es necesario, pero lo definimos aqu� */
    display: flex; 
    justify-content: center;
    align-items: center;
    /* Estilos del h1 */
    font-family: 'Poppins', sans-serif;
    text-decoration: none; 
    color: white; /* Color inicial, ya que .subtitulos-portafolio tiene fondo #003657 */
    padding: 0 20px; 
    font-size: 20px; 
    font-weight: 200; 
    transition: color 0.3s, background-color 0.3s;
    /* Asegura que ocupe todo el espacio del div */
    width: 100%;
    height: 100%;
}

/* EFECTO HOVER en el enlace */
.subtitulos-portafolio:hover {
    background-color: #f6f6f6; /* Cambia el fondo del DIV padre al hacer hover */
}
.subtitulos-portafolio:hover .enlace-servicio {
    color: white; /* Mantiene el color del texto o lo cambia si quieres */
}

/* --- Tarjetas de instalacion y mantenimiento (mantenimiento industrial) --- */

.services-mantenimiento-industrial {
  display: grid;
  grid-template-columns: repeat(5, auto); /* 3 columnas */
  gap: 30px; /* espacio entre las tarjetas */
  padding: 20px;
  margin: 20px;
  justify-content: center; 
  border-radius: 10px;
  background-color: #f0f0f0;
}

.tarjeta-mantenimiento-industrial {
  width: 250px; /* o 300px o el valor que necesites */
}

.tarjetaim-mantenimiento-industrial h3{
  font-family: 'Poppins', sans-serif;
  font-weight: 200;
  font-style: normal;
  color: #000;
  text-align: center;
  font-size: 20px;
}

.tarjeta-mantenimiento-industrial-inner {
  height: 250px; /* altura fija */
  position: relative;
  width: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

/* Animaci�n */
.tarjeta-mantenimiento-industrial:hover .tarjeta-mantenimiento-industrial-inner {
  transform: rotateY(180deg);
}

/* Caras */
.tarjeta-mantenimiento-industrial-front, .tarjeta-mantenimiento-industrial-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
}

/* Frente */
.tarjeta-mantenimiento-industrial-front {
  background: #f5f5f5; /* cambia aqu� el color frontal */
}
.tarjeta-mantenimiento-industrial-front img {
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
}

/* Reverso */
.tarjeta-mantenimiento-industrial-back {
  background: #1B2A41; /* cambia aqu� el color trasero */
  color: white;
  transform: rotateY(180deg);
}


/* --- Tarjetas de instalacion y mantenimiento (Servicios especializados) --- */

.services-servicios-especializados {
  display: grid;
  grid-template-columns: repeat(5, auto); /* 3 columnas */
  gap: 30px; /* espacio entre las tarjetas */
  padding: 20px;
  margin: 20px;
  justify-content: center; 
  border-radius: 10px;
  background-color: #f0f0f0;
}

.tarjeta-servicios-especializados {
  width: 250px; /* o 300px o el valor que necesites */
}

.tarjetaim-servicios-especializados h3{
  font-family: 'Poppins', sans-serif;
  font-weight: 200;
  font-style: normal;
  color: #000;
  text-align: center;
  font-size: 20px;
}

.tarjeta-servicios-especializados-inner {
  height: 250px; /* altura fija */
  position: relative;
  width: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

/* Animaci�n */
.tarjeta-servicios-especializados:hover .tarjeta-servicios-especializados-inner {
  transform: rotateY(180deg);
}

/* Caras */
.tarjeta-servicios-especializados-front, .tarjeta-servicios-especializados-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
}

/* Frente */
.tarjeta-servicios-especializados-front {
  background: #f5f5f5; /* cambia aqu� el color frontal */
}
.tarjeta-servicios-especializados-front img {
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
}

/* Reverso */
.tarjeta-servicios-especializados-back {
  background: #1B2A41; /* cambia aqu� el color trasero */
  color: white;
  transform: rotateY(180deg);
}


/* --- Integracion de proyectos --- */

/* --- Estos subtitulos son en general del portafolio de soluciones --- */
.contenedor-subtitulos-portafolio-de-soluciones{
	width:100%;
	height:60px;
	background-color:#fff;
	float: left;
    max-width: 100vw;
    margin-bottom: 10px;
}

.contenedor-subtitulos-portafolio-de-soluciones h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 200;
  	font-style: normal;
	color: #000;
	text-align: center;
	font-size: 20px;
    padding: 20px;
}

.services-integracion-de-proyectos {
  display: grid;
  grid-template-columns: repeat(3, auto); /* 3 columnas */
  gap: 30px; /* espacio entre las tarjetas */
  padding: 20px;
  margin: 40px;
  justify-content: center; 
  border-radius: 10px;
  background-color: #f0f0f0;
}

.contenedor-integracion-de-proyectos {
  display: flex; /* Mantiene el layout flexbox para la distribuci�n interna */
  gap: 10px; /* Espacio entre los elementos */
  padding: 20px;
  padding-top: 80px;
  max-width: fit-content; /* El contenedor se ajusta al contenido (las 5 tarjetas) */
  margin-left: auto;
  margin-right: auto;
  /* Otra forma de escribirlo: margin: 0 auto; */
}

.tarjeta-integracion-de-proyectos {
  background: #fff;
  width: 200px; /* Ancho similar a tu ejemplo */
  height: 200px; /* AJUSTA AQU� LA ALTURA DE LA TARJETA */
  padding: 30px;
  border-radius: 15px;
  border: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease; /* Tu animaci�n suave */
  box-shadow: 0 4px 20px rgba(0,0,0,0.);
  position: relative;
  box-sizing: border-box;
}

.tarjeta-integracion-de-proyectos:hover {
  border-color: #007bff;
  transform: translateY(-8px); /* La tarjeta sube */
  box-shadow: 0 15px 30px rgba(0, 123, 255, 0.08); /* Sombra azul tenue */
}

/* --- MANEJO DE CONTENIDO (Cambio de texto) --- */
.tarjeta-integracion-de-proyectos-inner {
  position: relative;
  width: 100%;
}

.tarjeta-integracion-de-proyectos-front, .tarjeta-integracion-de-proyectos-back  {
  transition: all 0.4s ease;
  text-align: center;
}

/* Lo que se ve al inicio */
.tarjeta-integracion-de-proyectos-front img {
  width: 50px; /* Tama�o del icono azul */
  height: 50px;
  margin-bottom: 20px;
}

.tarjeta-integracion-de-proyectos-front h3 {
  font-size: 16px;
  color: #1a1a1a;
  font-weight: 700;
}

/* La descripci�n oculta (Hover) */
.tarjeta-integracion-de-proyectos-back {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-40%); /* Centrado inicial */
  opacity: 0;
  visibility: hidden;
}

.tarjeta-integracion-de-proyectos-back  p {
  color: #1a1a1a;
  font-size: 16px;
  line-height: 1.6;
}

/* --- EL INTERCAMBIO --- */
.tarjeta-integracion-de-proyectos:hover .tarjeta-integracion-de-proyectos-front {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9);
}

.tarjeta-integracion-de-proyectos:hover .tarjeta-integracion-de-proyectos-back  {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%); /* Se ajusta al centro */
}

/* ========================================================= */
/* === AJUSTE MÓVIL: TARJETAS DE INTEGRACIÓN DE PROYECTOS === */
/* ========================================================= */

@media (max-width: 768px) {
    
    .contenedor-integracion-de-proyectos {
        flex-wrap: wrap !important; 
        justify-content: center !important; 
        width: 100% !important;
        padding-top: 40px !important;
        gap: 15px !important; 
    }

    .tarjeta-integracion-de-proyectos {
        width: 45% !important; 
        min-width: 140px; 
        max-width: 180px; 
        height: 190px !important; 
        margin-bottom: 10px;
        
        /* CAMBIO CLAVE: Reducimos el padding para dar espacio al texto */
        padding: 10px !important; 
        
        /* Aseguramos que el contenido interno esté centrado vertical y horizontalmente */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Aseguramos que el contenedor interno ocupe todo el ancho y centre su contenido */
    .tarjeta-integracion-de-proyectos-inner {
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centra icono y texto horizontalmente */
    }

    /* Ajustes del Título (Requerimientos, etc.) */
    .tarjeta-integracion-de-proyectos-front h3 {
        font-size: 14px !important; 
        text-align: center !important; /* Fuerza el centrado del texto */
        width: 100% !important;
        margin: 0 !important; /* Quita márgenes que puedan empujarlo */
    }

    .tarjeta-integracion-de-proyectos-front img {
        width: 40px !important; 
        height: 40px !important;
        margin-bottom: 10px !important;
        display: block !important;
        margin-left: auto !important; /* Truco extra para centrar imágenes */
        margin-right: auto !important;
    }
    
    .tarjeta-integracion-de-proyectos-back p {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
}
/* ========================================================= */
/* ================ SECCION CERTIFICACIONES ================ */
/* ========================================================= */

.contenedor-certificaciones {
  padding: 0 20px; /* AJUSTA AQU� para acercar al t�tulo de arriba */
  text-align: center;
  font-family: 'Poppins', sans-serif;
  padding-bottom: 40px;
  padding-top: 40px;
}

.titulos-seccion h2 {
  color: #012840;
  margin-bottom: 5px;
}

/* --- ESTILOS PARA RESALTAR TEXTO --- */

/* Resaltado en Azul (como la primera tarjeta) */
.resaltado-azul {
  color: #666;
}

/* Resaltado en Verde (como la segunda tarjeta) */
.resaltado-verde {
  color: #666;
}

/* Resaltado en Negro/Gris oscuro (como la tercera tarjeta) */
.resaltado-negro {
  color: #666;
}

/* --- EFECTO HOVER PARA CONTENEDOR Y SUBRAYADO --- */

/* Cuando el contenedor detecta hover en la tarjeta azul, subraya el texto azul */
.contenedor-certificaciones:has(.tarjeta-iso:hover) .resaltado-azul {
  text-decoration: underline;
  text-decoration-thickness: 2px; /* Grosor de la l�nea */
  text-underline-offset: 4px;     /* Separaci�n entre texto y l�nea */
  cursor: default;
  color: #007bff;
}

/* Cuando el contenedor detecta hover en la tarjeta verde, subraya el texto verde */
.contenedor-certificaciones:has(.tarjeta-iso-verde:hover) .resaltado-verde {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: default;
  color:#2ed100; 
}

/* Cuando el contenedor detecta hover en la tarjeta negra, subraya el texto negro */
.contenedor-certificaciones:has(.tarjeta-iso-negro:hover) .resaltado-negro {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: default;
  color:#000; 
}

/* Estilo general del p�rrafo para que el texto normal no se pierda */
.titulos-seccion p {
  margin: 0 auto 40px;
  color: #666;
  max-width: 1100px;
  line-height: 1.8; /* Aument� un poco el interlineado para mejorar la lectura */
  font-size: 17px;
}

/* --- GRID DE TARJETAS --- */
.galeria-certificaciones {
  display: flex;
  justify-content: center;
  gap: 25px;
  max-width: 1100px;
  margin: 0 auto;
}

/* --- LA TARJETA (CERTIFICACION AZUL) --- */
.tarjeta-iso{
  background: #ffffff;
  padding: 40px;
  text-align: center;
  transition: all 0.4s ease; /* Para que el hover sea suave */
  border-radius: 15px;
  border: 1px solid #f0f0f0;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  
  /* CONTROL DE ANCHO FIJO */
  width: 300px;
  height: 280px;
  flex-shrink: 0;
}

/* --- TUS EFECTOS HOVER  --- */
.tarjeta-iso:hover {
  border-color: #007bff;
  transform: translateY(-8px); /* La tarjeta sube */
  box-shadow: 0 15px 30px rgba(0, 123, 255, 0.08); /* Sombra azul */
}

/* El icono crece al pasar el mouse */
.tarjeta-iso:hover img {
  transform: scale(1.1); 
}

/* --- ELEMENTOS INTERNOS --- */
.bloque-imagen-iso {
  width: 120px;
  height: 100px;
  margin: 0 auto 25px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bloque-imagen-iso img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.tarjeta-iso h3, .tarjeta-iso-verde h3, .tarjeta-iso-negro h3 {
  font-size: 18px;
  color: #313131;
  margin-bottom: 20px;
  font-weight: 700;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- LA TARJETA (CERTIFICACION VERDE) --- */
.tarjeta-iso-verde{
  background: #ffffff;
  padding: 40px;
  text-align: center;
  transition: all 0.4s ease; /* Para que el hover sea suave */
  border-radius: 15px;
  border: 1px solid #f0f0f0;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  
  /* CONTROL DE ANCHO FIJO */
  width: 300px;
  height: 280px;
  flex-shrink: 0;
}

/* --- TUS EFECTOS HOVER  --- */
.tarjeta-iso-verde:hover {
  border-color: #2ed100;
  transform: translateY(-8px); /* La tarjeta sube */
  box-shadow: 0 15px 30px rgba(0, 123, 255, 0.08); /* Sombra azul */
}

/* --- LA TARJETA (CERTIFICACION VERDE) --- */
.tarjeta-iso-negro{
  background: #ffffff;
  padding: 40px;
  text-align: center;
  transition: all 0.4s ease; /* Para que el hover sea suave */
  border-radius: 15px;
  border: 1px solid #f0f0f0;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  
  /* CONTROL DE ANCHO FIJO */
  width: 300px;
  height: 280px;
  flex-shrink: 0;
}

/* --- TUS EFECTOS HOVER  --- */
.tarjeta-iso-negro:hover {
  border-color: #000;
  transform: translateY(-8px); /* La tarjeta sube */
  box-shadow: 0 15px 30px rgba(0, 123, 255, 0.08); /* Sombra azul */
}

/* ========================================================= */
/* === CORRECCIÓN CERTIFICACIONES (CENTRADO MÓVIL) === */
/* ========================================================= */

/* 1. Ajuste al Contenedor Padre */
.galeria-certificaciones {
  display: flex;
  /* CRUCIAL: Permite que las tarjetas bajen si no caben */
  flex-wrap: wrap; 
  justify-content: center; /* Centrado horizontal */
  gap: 25px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px; /* Agregamos aire para que no peguen en los bordes */
}

/* 2. Regla Mágica para Celular */
@media (max-width: 768px) {
    
    .galeria-certificaciones {
        /* En celular, ponemos una columna vertical */
        flex-direction: column !important; 
        align-items: center !important; /* ESTO ES LO QUE LAS CENTRA */
    }

    /* Seleccionamos TUS TRES clases de tarjetas para arreglarlas todas juntas */
    .tarjeta-iso, 
    .tarjeta-iso-verde, 
    .tarjeta-iso-negro {
        /* Ajuste de ancho */
        width: 100% !important;      /* Ocupa el ancho disponible */
        max-width: 320px !important; /* Pero no te pases de 320px */
        
        /* Ajuste de altura */
        height: auto !important;     /* Altura flexible (texto largo) */
        min-height: 280px;           /* Altura mínima base */
        
        /* Margen de seguridad */
        margin-left: auto !important; 
        margin-right: auto !important;
    }
}

/* ========================================================= */
/* ================= CONTENEDOR CONTACTANOS ================ */
/* ========================================================= */
.contenedor-contactanos {
  width: 100%;
  min-height: 120px; /* Usamos min-height para que crezca si el texto es largo */
  background-color: #044BD9;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px; /* Un poco de relleno para que no toque los bordes */
}

.contenido-contacto {
  display: flex;
  justify-content: space-between; /* ESTO ES LA CLAVE: Separa texto a la izq y botón a la der */
  align-items: center;
  width: 100%;
  max-width: 1200px; /* El mismo ancho que tu footer y header */
  gap: 20px; /* Espacio mínimo por seguridad */
}

.contenido-contacto h5 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: white;
  margin: 0;
  line-height: 1.2;
  text-align: left; /* Alineado a la izquierda en PC */
  /* SE ELIMINÓ EL MARGIN-RIGHT: 300px QUE ROMPÍA EL MÓVIL */
}

.boton-contacto {
  background-color: #E8A300;
  color: white;
  text-decoration: none;
  padding: 15px 40px;
  border-radius: 8px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  white-space: nowrap; /* Evita que el texto del botón se parta en dos */
}

.boton-contacto:hover {
  background-color: #fabe2f;
}

/* --- RESPONSIVE DE LA BARRA AZUL --- */
@media (max-width: 768px) {
  .contenedor-contactanos {
      height: auto; /* Altura automática en celular */
      padding: 30px 20px;
  }

  .contenido-contacto {
      flex-direction: column; /* Apilar uno sobre otro */
      text-align: center;
      gap: 25px; /* Espacio entre el texto y el botón */
  }

  .contenido-contacto h5 {
      font-size: 1.5rem; /* Letra un poco más chica */
      text-align: center; /* Centrado en celular */
      margin-right: 0;
  }

  .boton-contacto {
      width: 100%; /* Botón ancho completo en celular se ve mejor */
      max-width: 300px;
  }
}

/* ========================================================= */
/* ==================== SECCION NOSOTROS =================== */
/* ========================================================= */

#nosotros {
  background-color:transparent;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  text-align: center;
}

.contenedor-5 {
  width: 100%;
  /* IMPORTANTE: height auto para que el texto crezca lo que necesite sin encimarse */
  height: auto; 
  background-color: transparent;
  /* float: left;  <-- Quitamos esto, rompe el layout en móvil */
  margin-top: 20px;
  padding: 0 20px; /* Margen lateral para que el texto no toque los bordes */
  text-align: center; /* Asegura que el texto esté centrado */
}

.contenedor-5 h3 {
  margin: 20px auto 40px; /* Auto a los lados lo centra */
  color: #666;
  max-width: 1100px;
  line-height: 1.8;
  font-size: 20px;
  width: 100%; /* Asegura ancho completo */
}

/* ========================================================= */
/* === TARJETAS NOSOTROS (DISEÑO ORIGINAL LIMPIO) === */
/* ========================================================= */

.info-section {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  max-width: 1300px;
  margin: 40px auto;
  padding: 0 20px;
}

.info-nosotros {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  
  /* TAMAÑO FIJO RECTANGULAR (PC) */
  width: 280px;  
  height: 200px; 
  flex: none;    
  
  padding: 25px 20px;
  border-radius: 15px;
  background-color: #fff;
  
  /* Borde base casi invisible */
  border: 1px solid #fcfcfc;
  
  /* Sombra suave base */
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

/* --- TAMAÑO DEL ICONO --- */
.info-nosotros img {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain;
  margin-bottom: 15px;
}

.info-nosotros h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #000;
}

.info-nosotros h4 {
  font-size: 14px;
  color: #555;
  font-weight: 400;
}

/* --- EFECTO HOVER (AQUÍ ESTÁ LA CORRECCIÓN) --- */
.info-nosotros:hover {
  /* 1. Borde Azul Carsei */
  border-color: #007bff !important; 
  
  /* 2. Se eleva un poco más (-8px como tenías antes) */
  transform: translateY(-8px); 
  
  /* 3. Sombra con tinte Azul */
  box-shadow: 0 15px 30px rgba(0, 123, 255, 0.08); 
}

/* ========================================================= */
/* === RESPONSIVE (MÓVIL) === */
/* ========================================================= */
@media (max-width: 768px) {
  .info-nosotros {
    width: 100%;       
    max-width: 320px;  
    height: auto;      
    min-height: 200px;
    margin-bottom: 15px;
  }
}

.filosofia {
  text-align: center;
  padding: 0 20px;
  background-color: tra;
  padding-bottom: 40px;
}

.titulo-seccion {
  color: #0052cc;
  font-size: 30px;
  margin-bottom: 40px;
}

.filosofia-contenedor {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}

.filosofia-item {
  width: 300px;
  height: 300px;
  padding: 20px;
  transition: all 0.4s ease; /* Para que el hover sea suave */
  border-radius: 15px;
  border: 1px solid #f0f0f0;
    background-color: #fff;
}

.filosofia-item:hover {
  border-color: #007bff;
  transform: translateY(-8px); /* La tarjeta sube */
  box-shadow: 0 15px 30px rgba(0, 123, 255, 0.08); /* Sombra azul */
}

/* C�rculo animado */
.icono-circulo {
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background-color: #f2a900;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s infinite;
}

.icono-circulo img {
  width: 60px;
  height: 60px;
  transition: transform 0.3s ease;
}

.filosofia-item:hover .icono-circulo img {
  transform: scale(1.2) rotate(10deg);
}

/* T�tulos */
.filosofia-item h3 {
  color: #0052cc;
  margin-bottom: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 200;
  font-style: normal;
  text-align: center;
  font-size: 24px;
}

/* Textos */
.filosofia-item h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 200;
  	font-style: normal;
	color: #666;
	text-align: center;
	font-size: px;
}

/* Animaci�n de pulso */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Responsive */
@media (max-width: 768px) {
  .filosofia-contenedor {
    flex-direction: column;
    align-items: center;
  }
}

/* ==========================================
   BARRA AZUL DE CV (CORREGIDO IGUAL QUE CONTACTO)
   ========================================== */
.contenedor-cv {
  width: 100%;
  min-height: 120px; /* Flexible para que crezca si es necesario */
  background-color: #044BD9;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px; /* Espacio para que no toque bordes */
}

.contenido-cv {
  display: flex;
  justify-content: space-between; /* Texto a la izq, Botón a la der */
  align-items: center;
  width: 100%;
  max-width: 1200px; /* Ancho máximo estándar */
  gap: 20px;
}

.contenido-cv h5 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: white;
  margin: 0;
  line-height: 1.2;
  text-align: left;
  /* ELIMINADO: margin-right: 300px (Esto rompía el celular) */
}

.boton-cv {
  background-color: #E8A300;
  color: white;
  text-decoration: none;
  padding: 15px 40px;
  border-radius: 8px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  white-space: nowrap; /* Evita que el texto del botón se parta */
}

.boton-cv:hover {
  background-color: #fabe2f;
}

/* --- RESPONSIVE (MÓVIL) --- */
@media (max-width: 768px) {
  .contenedor-cv {
      height: auto;
      padding: 30px 20px;
  }

  .contenido-cv {
      flex-direction: column; /* Uno debajo del otro */
      text-align: center;
      gap: 25px;
  }

  .contenido-cv h5 {
      font-size: 1.5rem;
      text-align: center;
  }

  .boton-cv {
      width: 100%; /* Botón ancho en celular */
      max-width: 300px;
  }
}

/* ========================================================= */
/* ==================== SECCION CONTACTO =================== */
/* ========================================================= */

#contacto {
    /* Ruta de la imagen*/
    /* background-image: url('../img/FONDO-PAG.png');*/
    
    /* Centra la imagen y hace que cubra todo el espacio */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  /* background-color: rgba(255, 255, 255, 0.3);*/
    
    /* Opcional: a�ado un degradado suave encima para que el texto sea legible */
    background-blend-mode: overlay;
    padding-bottom: 60px;
    width: 100%;
}

/* Encabezado con imagen de fondo */
.titulos-grandes {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100px;
    background-image: url('../img/HEADER-FONDO-3.png');
    background-size: cover;
    background-position: center;
}

.titulos-grandes h6 {
    color: #fff;
    font-size: 40px;
    font-weight: 600;
}

/* Contenedor del Formulario */
.contenedor-contacto {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.formulario-contacto {
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05); /* Sombra suave de cuadro blanco */
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
    margin-top: 60px;
}

/* Distribuci�n en dos columnas para campos superiores */
.fila-doble {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.grupo-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.formulario-contacto label {
    font-size: 13px;
    font-weight: 600;
    color: #1B2A41;
}

.formulario-contacto input, 
.select-personalizado, 
.formulario-contacto textarea {
    padding: 12px 15px;
    border: 1px solid #044BD9; /* Tu azul caracter�stico */
    border-radius: 8px;
    font-size: 14px;
    background-color: #fcfdfe;
    transition: all 0.3s ease;
  font-family: 'Roboto', sans-serif;
}

.formulario-contacto textarea {
    min-height: 100px;
    resize: none;
    font-family: 'Roboto', sans-serif;
}

.separador-form {
    border: 0;
    border-top: 1px solid #eee;
    margin: 10px 0;
}

.contador {
    font-size: 12px;
    text-align: right;
    color: #888;
}

/* Bot�n Central Azul */
.boton-enviar-central {
    background-color: #044BD9;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s, background 0.3s;
  font-family: 'Roboto', sans-serif;
}

.boton-enviar-central:hover {
    background-color: #0036a3;
    transform: translateY(-2px);
}

/* TARJETAS DE INFORMACI�N (TRES CUADROS INFERIORES) */
.grid-info-contacto {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tres columnas iguales */
    gap: 20px;
    margin-top: 40px;
}

.info-item-tarjeta {
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}

.info-item-tarjeta:hover {
    transform: translateY(-5px);
}

.info-item-tarjeta img {
    width: 35px;
    height: 35px;
    margin-bottom: 15px;
}

.info-item-tarjeta p {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}

/* ========================================================= */
/* === CORRECCIÓN RESPONSIVE: FORMULARIO DE CONTACTO === */
/* ========================================================= */

@media (max-width: 768px) {

    /* 1. Ajuste del Contenedor Principal */
    .contenedor-contacto {
        padding: 0 15px !important; /* Menos relleno lateral para ganar espacio */
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 2. La Caja Blanca del Formulario */
    .formulario-contacto {
        padding: 25px 20px !important; /* Reducimos el padding interno (antes era 40px) */
        margin-top: 30px !important;   /* Subimos un poco el formulario */
        border-radius: 15px;
    }

    /* 3. ROMPEMOS LAS COLUMNAS (LO MÁS IMPORTANTE) */
    /* Esto hace que "Nombre" y "Email" se pongan uno abajo del otro */
    .fila-doble {
        display: flex !important;      /* Cambiamos grid por flex */
        flex-direction: column !important; /* Dirección vertical */
        gap: 15px !important;
    }

    /* 4. Ajuste de Inputs y Selects */
    .formulario-contacto input, 
    .select-personalizado, 
    .formulario-contacto textarea {
        width: 100% !important; /* Asegura que usen todo el ancho disponible */
        font-size: 16px !important; /* Evita que el iPhone haga zoom al escribir */
    }

    /* 5. TARJETAS DE INFORMACIÓN (Los 3 cuadros de abajo) */
    .grid-info-contacto {
        /* Cambiamos de 3 columnas a 1 sola */
        grid-template-columns: 1fr !important; 
        gap: 15px !important;
        margin-top: 30px !important;
    }

    .info-item-tarjeta {
        padding: 20px !important;
        /* Sombra suave para que resalten en móvil */
        box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
    }
}

/* ========================================================= */
/* === UNIFICACIÓN DE MENSAJES DE ÉXITO (CV Y CONTACTO) === */
/* ========================================================= */

@media (max-width: 768px) {

    /* 1. LA CAJA BLANCA (Manejamos los dos IDs diferentes) */
    /* '#mensaje-exito' es el de Contacto */
    /* '#paso-3 > div' es el div interno del CV que tiene el padding */
    #mensaje-exito, 
    #paso-3 > div {
        width: 90% !important;         /* Ancho controlado, no toca los bordes */
        margin-left: auto !important;  /* Centrado automático */
        margin-right: auto !important; /* Centrado automático */
        margin-top: 20px !important;
        
        /* AQUÍ ESTÁ LA CLAVE: Reducimos el padding de 60px a 30px */
        padding: 30px 20px !important; 
        
        box-sizing: border-box;
        background-color: #ffffff !important;
        border-radius: 15px !important;
        
        /* Aseguramos una sombra bonita para que parezca tarjeta */
        box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    }

    /* 2. EL TÍTULO "¡Recibido!" (Bajamos el tamaño de 2.5rem) */
    #mensaje-exito h2, 
    #paso-3 h2 {
        font-size: 26px !important;    /* Tamaño legible en celular */
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
    }

    /* 3. EL TEXTO DESCRIPTIVO */
    #mensaje-exito p, 
    #paso-3 p {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin-bottom: 25px !important; /* Espacio antes del botón */
        padding: 0 5px;
    }

    /* 4. EL ICONO (La palomita) */
    /* Targeteamos el div que tiene el color azul #044BD9 */
    #mensaje-exito div[style*="color: #044BD9"], 
    #paso-3 div[style*="color: #044BD9"] {
        font-size: 50px !important;    /* Un poco más chico que 60px */
        margin-bottom: 10px !important;
    }

    /* 5. EL BOTÓN "VOLVER AL INICIO" */
    #mensaje-exito .boton-enviar-central,
    #paso-3 .boton-enviar-central {
        width: 100% !important;       /* Ocupa todo el ancho */
        display: block !important;    /* Se comporta como bloque */
        padding: 15px 0 !important;   /* Botón alto y cómodo */
        box-sizing: border-box;
    }
}

/* ========================================================= */
/* ===  MAPA  === */
/* ========================================================= */
.mapa {
    margin-top: 50px;
    width: 100%;
    max-width: 970px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    
    /* AQUÍ ESTÁ EL CAMBIO: */
    height: 400px; /* Altura ideal para PC (antes estaba automática o muy chica) */
}


/* ========================================================= */
/* === CORRECCIÓN MAPA (CENTRADO Y ESTILO MÓVIL) === */
/* ========================================================= */

/* 1. Ajuste base para asegurar que el iframe llene el contenedor */
/* Aseguramos que el mapa de Google llene ese espacio */
.mapa iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* 2. Ajuste Responsivo para Celular */
@media (max-width: 768px) {
    .mapa {
        /* Hacemos que ocupe el 90% del ancho para que deje márgenes a los lados */
        width: 90% !important; 
        
        /* Centrado automático (gracias a los márgenes automáticos) */
        margin-left: auto !important;
        margin-right: auto !important;
        
        /* Ajustamos la altura para que sea cómoda en pantalla chica */
        height: 300px !important; 
        
        /* Reducimos el espacio de arriba */
        margin-top: 30px !important; 
    }
}

/* ========================================================= */
/* === Animaciones y envio del formulario, cuando ya se envio === */
/* ========================================================= */
/* Animaci�n de destello azul para el JavaScript */
@keyframes pulsoAzul {
    0% { box-shadow: 0 0 0px rgba(4, 75, 217, 0); border-color: #044BD9; }
    50% { box-shadow: 0 0 20px rgba(4, 75, 217, 0.4); border-color: #044BD9; }
    100% { box-shadow: 0 0 0px rgba(4, 75, 217, 0); border-color: #044BD9; }
}

.efecto-brillo {
    animation: pulsoAzul 0.8s ease-out;
}



/* --- Estilos del Formulario --- */
.formulario-contacto input, 
.formulario-contacto select, 
.formulario-contacto textarea {
    transition: border-color 0.3s, background-color 0.3s;
}

/* Clase de Error: SOLO se activa al dar clic en enviar si est� vac�o */
.campo-error {
    border-color: #ff4d4d !important;
    background-color: #fff9f9 !important;
}

/* --- Mensaje de �xito (CV) --- */
#mensaje-exito {
  padding: 50px;
  text-align: center;
  background: white;
  border-radius: 20px;
  margin-top: 60px;
}

.icono-check {
    font-size: 60px;
    color: #044BD9;
    margin-bottom: 15px;
}

.titulo-exito {
    color: #1B2A41;
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0;
}

.texto-exito {
    color: #555;
    font-size: 1.1rem;
    margin-top: 10px;
}

/* Animaci�n de entrada */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}


/* Asegura que el bot�n de volver tenga el mismo estilo que tus otros botones */
.boton-enviar-central {
    background-color: #044BD9;
    color: white;
    border-radius: 25px;
    font-weight: bold;
    transition: background 0.3s ease;
}

.boton-enviar-central:hover {
    background-color: #0339a6;
}

/* Animaci�n para que el mensaje aparezca suavemente */
#mensaje-exito, #paso-3 {
    animation: aparecer 0.5s ease-out;
}

@keyframes aparecer {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========================================================= */
/* === CORRECCIÓN MENSAJE DE ÉXITO (MÓVIL) === */
/* ========================================================= */

@media (max-width: 768px) {
    
    /* 1. La Caja Blanca del Mensaje */
    #mensaje-exito {
        width: 90% !important;      /* Ocupa el 90% del ancho (deja margen a los lados) */
        margin-left: auto !important;  /* Centrado horizontal automático */
        margin-right: auto !important; /* Centrado horizontal automático */
        margin-top: 30px !important;   /* Menos separación de arriba */
        
        /* Reducimos el relleno interno (50px era mucho para celular) */
        padding: 30px 20px !important; 
        
        /* Sombra suave para que parezca una tarjeta flotante bonita */
        box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    }

    /* 2. El Icono de Palomita/Check */
    .icono-check {
        font-size: 50px !important; /* Un poco más chico para que no abrume */
        margin-bottom: 10px !important;
    }

    /* 3. El Título "¡Gracias!" o "Mensaje Enviado" */
    .titulo-exito {
        font-size: 28px !important; /* Tamaño legible en celular (2.5rem era gigante) */
        line-height: 1.2 !important; /* Evita que las líneas se encimen */
        margin-bottom: 10px !important;
    }

    /* 4. El Texto descriptivo */
    .texto-exito {
        font-size: 16px !important;
        padding: 0 10px; /* Un poco de aire a los lados del texto */
        line-height: 1.5;
    }
    
    /* 5. Asegurar que el botón dentro del éxito se vea bien */
    #mensaje-exito .boton-enviar-central {
        width: 100% !important; /* Botón ancho, fácil de picar */
        margin-top: 20px !important;
        display: block;
    }
}

/* ========================================================= */
/* ======================== SECCION CV ===================== */
/* ========================================================= */

#seccion-cv {
    padding-bottom: 60px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    background-color: #f4f7fa; /* Fondo ligero para resaltar el cuadro blanco */
    letter-spacing: 0.3px;
}

/* 2. CONTENEDOR Y FORMULARIO */
.contenedor-contacto {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 3. BARRA DE PROGRESO */
.pasos-progreso {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 0 10%;
}

.paso-item {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #044BD9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #044BD9;
    position: relative;
    background: white;
    transition: all 0.3s ease;
}

.paso-item.activo {
    background: #044BD9;
    color: white;
}

.paso-item span {
    position: absolute;
    bottom: -25px;
    font-size: 11px;
    font-weight: 600;
    width: 80px;
    text-align: center;
    color: #666;
}

.linea-paso {
    flex-grow: 1;
    height: 2px;
    background: #044BD9;
    margin: 0 15px;
    opacity: 0.3;
}

/* 4. INPUTS Y LAYOUT */
.fila-doble {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.grupo-input {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.grupo-input label {
    font-size: 14px;
    font-weight: 700;
    color: #1B2A41;
}

.formulario-contacto input {
    padding: 14px 18px;
    border: 1px solid #044BD9;
    border-radius: 10px;
    font-size: 15px;
    background-color: #fcfdfe;
    transition: border 0.3s ease;
    width: 100%;
}

.formulario-contacto input:focus {
    outline: none;
    border-width: 2px;
}

/* 5. ACORDE�N DE ARCHIVO (CENTRADO) */
.acordeon-archivo {
    border: 1px solid #044BD9;
    border-radius: 10px;
    overflow: hidden;
    background: white;
  font-family: 'Roboto', sans-serif;
}

.acordeon-header {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    color: #1B2A41;
}

.acordeon-body {
    max-height: 0;
    overflow: hidden;
    background: #044BD9;
    transition: max-height 0.4s ease-in-out, padding 0.3s;
    /* Flexbox para centrar bot�n y texto */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.acordeon-body.abierto {
    max-height: 200px;
    padding: 30px 20px;
}

.btn-buscar-archivo {
  background: white;
  color: #044BD9;
  border: none;
  padding: 10px 40px;
  border-radius: 8px;    
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-family: 'Roboto', sans-serif;
  
}

.btn-buscar-archivo img {
    width: 18px;   /* Tama�o del icono */
    height: 18px;  /* Mantiene la proporci�n */
    display: block; /* Evita espacios extra�os debajo de la imagen */
}

#nombre-archivo-cv {
  color: white;
  font-size: 13px;
  margin: 0;
}

.flecha-cv {
  border: solid #044BD9;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  transition: transform 0.3s;
}

/* 6. BOT�N PRINCIPAL */
.boton-enviar-central {
  background-color: #044BD9;
  color: white;
  border: none;
  padding: 18px;
  border-radius: 30px; /* M�s redondeado como en tu imagen */
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.3s;
  margin-top: 15px;
}

.boton-enviar-central:hover {
    background-color: #0036a3;
}

/* 7. CONTENIDO DE PASOS */
.contenido-paso {
    display: none;
}

.contenido-paso.activo {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* 8. VALIDACI�N DE ERRORES */
.input-error {
    border-color: #ff4d4d !important;
    background-color: #fff9f9 !important;
}

.error-texto {
    color: #ff4d4d;
    font-size: 12px;
    font-weight: 600;
    margin-top: -5px;
    display: none;
}

/* 9. TARJETAS DE INFO (Inferiores) */
.grid-info-contacto {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.info-item-tarjeta {
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.info-item-tarjeta img {
    width: 35px;
    margin-bottom: 15px;
}

/* ========================================================= */
/* ================== AVISO DE PRIVACIDAD ================== */
/* ========================================================= */
/* Contenedor General */
.titulos-medianos {
    width: 100%;
    text-align: center; /* Centra el contenedor del título */
    margin-bottom: 20px;
    margin-top: 20px;
}

.titulos-medianos h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #1B2A41;
    font-size: 24px;
    line-height: 1.4;
    
    /* FUERZA BRUTA PARA CENTRAR EL TEXTO */
    text-align: center !important; 
    margin: 0 auto;
    display: block;
    width: 100%;
}

/* ========================================================= */
/* === 2. CONTENEDOR DE TEXTO (Párrafos y Listas) === */
/* ========================================================= */
.contenedor-aviso {
    background-color: transparent;
    margin: 0 auto; /* Esto centra la CAJA en la pantalla */
    max-width: 1200px;
    padding: 0 20px;
    box-sizing: border-box;
    
    /* IMPORTANTE: Quitamos 'text-align: center' y 'align-items: center'
       para dejar que cada elemento decida su propia alineación (izq o justificado) */
    display: block; 
}

/* --- PÁRRAFOS (Justificados para leerse elegantes) --- */
.contenedor-aviso p {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    color: #666;
    
    text-align: justify !important; /* Texto cuadrado y ordenado */
    
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* --- SUBTÍTULOS (a, b, I, II...) ALINEADOS A LA IZQUIERDA --- */
.contenedor-aviso h2, 
.contenedor-aviso h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: #444;
    
    text-align: left !important; /* Forzamos a la izquierda */
    
    font-size: 17px;
    margin-top: 25px;
    margin-bottom: 15px;
    width: 100%;
}

/* --- LISTAS CON PUNTOS (ALINEADAS A LA IZQUIERDA) --- */
.lista-puntos {
    list-style: none; /* Quitamos viñeta por defecto */
    padding-left: 10px;
    margin-bottom: 25px;
    text-align: left !important; /* Toda la lista a la izquierda */
}

.lista-puntos li {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    color: #666;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
    
    text-align: left !important; /* Cada renglón a la izquierda */
    padding-left: 10px; /* Un pequeño sangrado estético */
}

/* ========================================================= */
/* ========================= FOOTER ======================== */
/* ========================================================= */
.footer {
  background-color: #012840;
  color: white;
  padding: 50px 20px;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  height: auto; /* Altura automática para que no se corte el texto */
  border-top: 6px solid #044BD9;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  gap: 30px;
}

.footer-column {
    flex: 1;
    min-width: 200px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* <--- ESTO MUEVE TODO A LA IZQUIERDA */
    text-align: left;        /* <--- ESTO TAMBIÉN */
}

.footer-column h4 {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
    text-align: left; /* Aseguramos que el título mire a la izquierda */
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column ul li {
  margin-bottom: 10px;
}

.footer-column ul li a {
  color: #cacaca;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s;
  display: block;
}

.footer-column ul li a:hover {
  color: #fff;
  padding-left: 5px;
}

/* --- ICONOS DE REDES SOCIALES (CORREGIDO) --- */
.social-icons {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.social-icons a img {
  width: 32px;
  height: 32px;
  transition: transform 0.3s ease;
  /* SE ELIMINÓ EL FILTRO QUE LOS VOLVÍA CUADROS BLANCOS */
}

.social-icons a img:hover {
  transform: scale(1.15);
}

/* --- LOGO D-U-N-S (CORREGIDO) --- */
.footer-logo {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.duns-link {
  text-decoration: none;
  display: block;
}

.sello-pulsante {
  width: 110px;
  height: auto;
  display: block;
  animation: pulsoSuave 2.5s infinite ease-in-out;
  filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.2));
  /* SE ELIMINÓ EL FONDO BLANCO Y EL PADDING */
}

@keyframes pulsoSuave {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.duns-link:hover .sello-pulsante {
  animation-play-state: paused;
  transform: scale(1.1);
}

/* ==========================================
   FOOTER RESPONSIVE (MÓVIL)
   ========================================== */
@media (max-width: 768px) {
  .footer {
      padding: 40px 15px;
      text-align: center;
  }

  .footer-container {
      flex-direction: column;
      align-items: center;
      gap: 40px;
  }

.footer-column {
        align-items: center !important; /* Fuerza el centrado */
        text-align: center !important;
    }
    
    .footer-column h4 {
        text-align: center !important;
    }

  
  .social-icons {
      justify-content: center;
      width: 100%;
  }

  .footer-logo {
      width: 100%;
      justify-content: center;
      margin-top: 20px;
  }
}