/* =========================================
   1. RESET Y BASE
   ========================================= */
:root {
    --azul-principal: #0056b3;
    --azul-oscuro: #003d80;
    --azul-electrico: #007bff;
    --negro-suave: #1d1d1f;
    --blanco: #ffffff;
    --alto-header: 100px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--blanco);
    color: var(--negro-suave);
    overflow-x: hidden; 
}

/* =========================================
   2. HEADER Y NAVEGACIÓN (SIN SUBRAYADO)
   ========================================= */
header {
    background-color: transparent;
    width: 100%;
    height: var(--alto-header);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
}

nav {
    width: 95%;
    max-width: 1400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo img {
    height: 55px;
    width: auto;
}

nav ul {
    display: flex;
    gap: 30px;
    list-style: none;
}

nav ul li a {
    text-decoration: none;
    color: var(--negro-suave);
    font-weight: 500;
    transition: 0.3s;
}

nav ul li a:hover {
    color: var(--azul-principal);
}

.btn-contacto-nav {
    background-color: var(--azul-principal) !important;
    color: white !important;
    padding: 12px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-contacto-nav:hover {
    background-color: var(--azul-oscuro) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 86, 179, 0.3);
}

/* =========================================
   3. SECCIÓN INICIO (HERO)
   ========================================= */
#inicio {
    padding-top: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.hero-content {
    text-align: center;
    max-width: 900px;
    z-index: 10;
    padding: 0 20px;
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.hero-content h1 span {
    color: var(--azul-principal);
}

.typing-container {
    font-size: 1.3rem;
    min-height: 1.6em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

#typing-text {
    color: var(--azul-principal);
    font-weight: 600;
}

.btn-main {
    background-color: var(--azul-principal);
    color: white;
    border: none;
    padding: 16px 35px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-main:hover {
    background-color: var(--azul-oscuro);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 86, 179, 0.4);
}

.img-full {
    width: 100vw !important; 
    max-width: none !important;
    height: auto;
    display: block;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 100%);
}

.cursor {
    color: var(--azul-principal);
    font-weight: bold;
    animation: blink 0.8s infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* ==========================================================
   4. SECCIÓN SERVICIOS (BENTO GRID OPTIMIZADO - J.FORTIZ)
   ========================================================== */

   /* --- TÍTULO SERVICIOS (IGUAL A LA IMAGEN) --- */
.servicios-intro h2 {
    font-family: Arial, sans-serif;
    font-size: 3.5rem;
    /* Forzamos el peso normal para que no se vea gruesa */
    font-weight: 500 !important; 
    color: #002d5c; /* Azul marino oscuro para "Nuestros" */
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.texto-azul {
    color: #0056b3; /* Azul principal para "Servicios" */
    /* También forzamos aquí para que coincidan */
    font-weight: 500 !important; 
}
#servicios {

    font-family: Arial, sans-serif;
    padding: 60px 5%;
    background-color: #f0f7ff;
}

.servicios-intro {
    text-align: center;
    margin-bottom: 40px;
}

.servicios-intro h2 {
    font-size: 2.5rem;
    color: #001d3d;
    font-weight: 800;
}

.texto-azul {
    color: var(--azul-principal);
}

/* GRID COMPACTO */
.servicios-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 210px; /* Tamaño compacto solicitado */
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto;
}

/* TARJETA CON DEGRADADO Y FORMA */
.servicio-card {
    background: linear-gradient(135deg, #d6ebff 0%, #ffffff 100%);
    border-radius: 18px;
    padding: 22px;
    border: 1px solid #b3d7ff;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* --- HOVER: LA TARJETA SOBRESALE SIN CREAR MARCO --- */
.servicio-card:hover {
    /* Hace que el cuadro crezca un poco hacia el frente */
    transform: scale(1.04); 
    
    /* Mantenemos el color de borde suave original para que no se vea un marco nuevo */
    border-color: #b3d7ff; 
    
    /* Aumentamos la sombra para dar efecto de profundidad (que flota) */
    box-shadow: 0 15px 30px rgba(0, 86, 179, 0.2); 
    
    /* Asegura que el cuadro que sobresale se ponga por encima de los otros */
    z-index: 10; 
}

/* --- AJUSTE PARA QUE EL MOVIMIENTO SEA SUAVE --- */
.servicio-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ICONOS CUADRADOS (CORREGIDO) */
.servicio-card .icono {
    background-color: #0062cc;
    color: white;
    width: 46px; 
    height: 46px;
    border-radius: 10px; /* Forma cuadrada redondeada */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 12px;
    box-shadow: 0 4px 8px rgba(0, 98, 204, 0.3);
}

/* BOTÓN "MÁS SOLICITADO" (ALERTA VIVA) */
.badge-destacado {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--azul-electrico);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 4px 12px #0061df;
    z-index: 10;
    animation: brillo-alerta 2s infinite;
}

/* TEXTOS EN ARIAL */
.servicio-card h3 {
    font-size: 1rem;
    color: #002d5c;
    font-weight: bold;
    margin-bottom: 6px;
    line-height: 1.2;
}

.servicio-card p {
    font-size: 0.8rem;
    color: #4a5d71;
    line-height: 1.3;
}

/* CLASES BENTO PARA EL DESORDEN */
.servicio-card.ancho { grid-column: span 2; }
.servicio-card.alto { grid-row: span 2; }

/* --- BOTÓN "MÁS SOLICITADO" AZUL BÁSICO FIJO --- */
.badge-destacado {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #0056b3; /* El azul principal de tu logo J.Fortiz */
    color: white;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: none; /* Quitamos el brillo para que sea más limpio */
    z-index: 10;
}

/* --- ICONOS CUADRADOS --- */
.servicio-card .icono {
    background-color: #0056b3; /* Color uniforme con el botón */
    color: white;
    width: 46px; 
    height: 46px;
    border-radius: 10px; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 12px;
}
/* --- BOTÓN "MÁS SOLICITADO" CON EFECTO REBOTE --- */
.badge-destacado {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #0056b3; /* Tu azul básico de marca */
    color: white;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 10;
    
    /* Aplicamos la animación de rebote */
    animation: rebote-suave 2s infinite ease-in-out;
}

/* --- DEFINICIÓN DEL REBOTE --- */
@keyframes rebote-suave {
    0%, 100% {
        transform: translateY(0); /* Posición original */
    }
    50% {
        transform: translateY(-6px); /* Sube 6 píxeles */
    }
}
/* --- SECCIÓN SERVICIOS: MÁXIMA SEPARACIÓN --- */
#servicios {
    font-family: Arial, sans-serif;
    /* Aumentamos a 160px para que baje bastante respecto a la imagen */
    padding: 160px 5% 80px 5%; 
    background-color: #f0f7ff;
}

/* --- TÍTULO: PESO NORMAL (SIN NEGRITA) --- */
.servicios-intro h2 {
    font-family: Arial, sans-serif;
    font-size: 2.8rem;
    font-weight: 400 !important; /* Peso normal */
    color: #002d5c; /* Azul oscuro */
    text-align: center;
    margin-bottom: 50px;
    letter-spacing: -0.5px;
}

.texto-azul {
    color: #0056b3; /* Azul principal */
    font-weight: 400 !important;
}

/* --- TARJETAS: ESTÁTICAS (SIN EFECTO DE ZOOM O SOBRESALIR) --- */
.servicio-card {
    background: linear-gradient(135deg, #d6ebff 0%, #ffffff 100%);
    border-radius: 18px;
    padding: 22px;
    border: 1px solid #b3d7ff;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Eliminamos la transición de movimiento */
    transition: none; 
}

/* Eliminamos el efecto de agrandar o cambiar color al pasar el mouse */
.servicio-card:hover {
    transform: none;
    box-shadow: 0 4px 10px rgba(0, 86, 179, 0.05); /* Sombra base estática */
}

/* --- BADGE: AZUL BÁSICO (SIN REBOTE) --- */
.badge-destacado {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #0061df; /* Azul básico de J.Fortiz */
    color: white;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    /* Eliminamos cualquier animación anterior */
    animation: none; 
}

/* --- ICONOS CUADRADOS --- */
.servicio-card .icono {
    background-color: #0061df;;
    color: white;
    width: 46px; 
    height: 46px;
    border-radius: 10px; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 12px;
}
/* --- CONFIGURACIÓN BASE DE LA TARJETA --- */
.servicio-card {
    background: linear-gradient(135deg, #d6ebff 0%, #ffffff 100%);
    border-radius: 18px;
    padding: 22px;
    border: 1px solid #b3d7ff;
    position: relative;
    display: flex;
    flex-direction: column;
    
    /* 1. ESTO HACE QUE EL MOVIMIENTO SEA SUAVE (IMPORTANTE) */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
    overflow: hidden;
}

/* --- 2. EL EFECTO: AL PASAR EL MOUSE EL CUADRO SOBRESALE --- */
.servicio-card:hover {
    /* El 1.05 hace que el cuadro crezca un 5% hacia el frente */
    transform: scale(1.05); 
    
    /* Agregamos una sombra más profunda para dar efecto de profundidad */
    box-shadow: 0 15px 35px rgba(0, 86, 179, 0.2); 
    
    /* Mantenemos el mismo color de borde para que NO se vea un marco nuevo */
    border-color: #b3d7ff; 
    
    /* Asegura que el cuadro que sobresale esté por encima de los demás */
    z-index: 10; 
}
/* --- DISTINTIVO CON ANIMACIÓN DE REBOTE --- */
.badge-destacado {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #0061df;; /* El azul de tu marca */
    color: white;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500; /* Peso normal, no grueso */
    text-transform: uppercase;
    z-index: 10;
    
    /* ACTIVAR REBOTE: Se repite infinitamente cada 2 segundos */
    animation: rebote-llamativo 2s infinite ease-in-out;
}

/* --- DEFINICIÓN DEL MOVIMIENTO --- */
@keyframes rebote-llamativo {
    0%, 100% {
        transform: translateY(0); /* Posición base */
    }
    50% {
        transform: translateY(-8px); /* Sube 8 píxeles */
    }
}


/* ==========================================================
   SECCIÓN SERVICIOS: PUNTO MEDIO DE SEPARACIÓN
   ========================================================== */

#servicios {
    font-family: 'Inter', sans-serif;
    /* 110px es el punto medio perfecto para que no esté pegado ni lejos */
    padding: 110px 5% 80px 5%; 
    background-color: #f0f7ff;
}

.servicios-intro {
    text-align: center;
    /* Espacio extra entre el subtítulo y los cuadros de servicios */
    margin-bottom: 60px; 
}

/* TÍTULO: Nuestros Servicios (Grosor y Espaciado solicitado) */
.servicios-intro h2 {
    font-family: 'Inter', sans-serif;
    font-size: 3.5rem;
    font-weight: 600 !important; 
    color: #002d5c; 
    letter-spacing: 2px; 
    margin-bottom: 15px;
}

.texto-azul {
    color: #0061df; /* Azul vibrante de la imagen */
    font-weight: 600 !important;
}

/* SUBTÍTULO: Tamaño grande y legible */
.servicios-intro p {
    font-size: 1.25rem; 
    color: #4a5d71;
    margin-top: 10px;
}

/* EFECTO ZOOM: El cuadro sobresale al pasar el mouse */
.servicio-card {
    background: linear-gradient(135deg, #d6ebff 0%, #ffffff 100%);
    border-radius: 18px;
    padding: 22px;
    border: 1px solid #b3d7ff;
    position: relative;
    /* Movimiento suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.servicio-card:hover {
    transform: scale(1.05); /* Sobresale hacia el frente */
    box-shadow: 0 15px 35px rgba(0, 86, 179, 0.15);
    z-index: 10;
}

/* EFECTO REBOTE: Botón azul saltando */
.badge-destacado {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #0056b3;
    color: white;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 10px;
    text-transform: uppercase;
    animation: rebote-fijo 2s infinite ease-in-out;
}

@keyframes rebote-fijo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}
/* --- BOTÓN: Más solicitado (Compacto y equilibrado) --- */
.badge-destacado {
    position: absolute;
    top: 15px;
    right: 15px;
    
    /* 1. COLOR AZUL VIBRANTE J.FORTIZ */
    background-color: #0061df; 
    color: white;
    
    /* 2. TAMAÑO AJUSTADO: Menos ancho (15px) y altura fina (6px) */
    padding: 6px 15px; 
    border-radius: 6px;
    
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    
    /* 3. RESPETAR MAYÚSCULAS DEL HTML (Escribe: Más solicitado) */
    text-transform: none; 
    
    /* 4. SEPARACIÓN DE LETRAS SUTIL */
    letter-spacing: 0.5px; 
    z-index: 10;
    
    /* 5. EFECTO DE REBOTE ACTIVO */
    animation: rebote-fijo 2s infinite ease-in-out;
}

@keyframes rebote-fijo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}
/* --- SECCIÓN PROYECTOS: COLOR IDENTICO A SERVICIOS --- */

#proyectos {
    font-family: 'Inter', sans-serif;
    /* 110px de separación para que el ojo respire correctamente */
    padding: 110px 5% 80px 5%; 
    background-color: #ffffff; 
}

.proyectos-intro {
    text-align: center;
    margin-bottom: 60px;
}

/* TÍTULO: mismo estilo y fuente que servicios */
.proyectos-intro h2 {
    font-size: 3.5rem;
    font-weight: 600 !important; 
    color: #002d5c; /* azul marino para "nuestros" */
    letter-spacing: 2px; 
    text-transform: lowercase; 
    margin-bottom: 15px;
}

/* COLOR AZUL #0061DF PARA LA PALABRA "PROYECTOS" */
.proyecto-azul {
    color: #0061df; 
    font-weight: 600 !important;
}

/* SUBTÍTULO: mismo tamaño 1.4rem */
.proyectos-intro p {
    font-size: 1.4rem; 
    color: #4a5d71;
    text-transform: lowercase;
    max-width: 850px;
    margin: 10px auto 0 auto;
    line-height: 1.6;
}
/* --- SECCIÓN PROYECTOS: COLOR #0061DF Y RESPETO DE TEXTO --- */

#proyectos {
    font-family: 'Inter', sans-serif;
    /* 110px de separación para que el ojo respire correctamente */
    padding: 110px 5% 80px 5%; 
    background-color: #ffffff; 
}

.proyectos-intro {
    text-align: center;
    margin-bottom: 60px;
}

/* TÍTULO: ahora respeta lo que escribas en el HTML */
.proyectos-intro h2 {
    font-size: 3.5rem;
    font-weight: 600 !important; 
    color: #002d5c; /* azul marino para "Nuestros" */
    letter-spacing: 2px; 
    /* ELIMINAMOS lowercase PARA RESPETAR TU ESCRITURA */
    text-transform: none; 
    margin-bottom: 15px;
}

/* COLOR AZUL #0061DF PARA LA PALABRA "PROYECTOS" */
.proyecto-azul {
    color: #0061df; 
    font-weight: 600 !important;
}

/* SUBTÍTULO: mismo tamaño 1.4rem y respeta mayúsculas */
.proyectos-intro p {
    font-size: 1.4rem; 
    color: #4a5d71;
    /* ELIMINAMOS lowercase */
    text-transform: none; 
    max-width: 850px;
    margin: 10px auto 0 auto;
    line-height: 1.6;
}
/* ==========================================================
   SECCIÓN PROYECTOS: FONDO IGUAL A SERVICIOS
   ========================================================== */

#proyectos {
    font-family: 'Inter', sans-serif;
    /* 110px de separación para que el ojo respire correctamente */
    padding: 110px 5% 80px 5%; 
    
    /* FONDO CELESTE CLARO: Identico al de Servicios */
    background-color: #f0f7ff; 
}

.proyectos-intro {
    text-align: center;
    margin-bottom: 60px;
}

/* TÍTULO: Respetando mayúsculas y minúsculas */
.proyectos-intro h2 {
    font-size: 3.5rem;
    font-weight: 600 !important; 
    color: #002d5c; /* Azul marino para "Nuestros" */
    letter-spacing: 2px; 
    text-transform: none; /* Respeta tu escritura en el HTML */
    margin-bottom: 15px;
}

/* COLOR AZUL #0061DF PARA "PROYECTOS" */
.proyecto-azul {
    color: #0061df; 
    font-weight: 600 !important;
}

/* SUBTÍTULO: Tamaño 1.4rem y respeta mayúsculas */
.proyectos-intro p {
    font-size: 1.4rem; 
    color: #4a5d71;
    text-transform: none; 
    max-width: 850px;
    margin: 10px auto 0 auto;
    line-height: 1.6;
}
/* --- CONTENEDOR DE BOTONES (Espaciado para que el ojo respire) --- */
.proyectos-filtros {
    display: flex;
    justify-content: center;
    gap: 15px; 
    margin-bottom: 50px; 
    flex-wrap: wrap;
}

/* --- ESTILO BASE: TRANSPARENTE CON FUENTE INTER --- */
.btn-filtro {
    /* FUENTE INTER APLICADA */
    font-family: 'Inter', sans-serif;
    background-color: transparent; 
    border: 1px solid transparent; 
    color: #002d5c; 
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 14px;
    /* Grosor semi-bold para que resalte como en tus imágenes */
    font-weight: 600; 
    cursor: pointer;
    transition: all 0.3s ease; 
    text-transform: none; /* Respeta tus mayúsculas */
}

/* --- AL PASAR EL MOUSE: SE CREA EL CUADRO --- */
.btn-filtro:hover {
    background-color: rgba(0, 97, 223, 0.05); /* Un toque celeste muy suave */
    border: 1px solid #b3d7ff; /* Aparece el cuadro/borde */
    color: #0061df; 
}

/* --- AL ELEGIR LA OPCIÓN: AZUL SÓLIDO #0061DF --- */
.btn-filtro.active {
    background-color: #0061df !important; 
    color: #ffffff !important; 
    border-color: #0061df !important;
    box-shadow: 0 4px 10px rgba(0, 97, 223, 0.2);
}
/* --- 1. CONTENEDOR PRINCIPAL (GRID) --- */
.proyectos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Se adapta a celulares y PC */
    gap: 30px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- 2. TARJETAS DE PROYECTO --- */
.proyecto-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.proyecto-card:hover {
    transform: translateY(-5px); /* Pequeño salto al pasar el mouse */
}

.proyecto-img {
    position: relative; /* Necesario para los iconos en las esquinas */
    width: 100%;
    height: 220px;
}

.proyecto-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Para que la imagen no se deforme */
}

/* --- 3. TEMÁTICA: ICONOS Y ETIQUETAS EN LAS ESQUINAS --- */
.icon-esquina {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(0, 0, 0, 0.4); /* Fondo oscuro transparente */
    backdrop-filter: blur(4px);
    width: 35px;
    height: 35px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
}

.tag-proyecto {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #0061df; /* El azul de J.Fortiz */
    color: white;
    padding: 5px 12px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
}

/* --- 4. INFORMACIÓN DE LA TARJETA --- */
.proyecto-info {
    padding: 20px;
}

.proyecto-info h3 {
    font-family: 'Inter', sans-serif;
    color: #002d5c;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.proyecto-info p {
    color: #667c92;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* Botón Ver Detalles */
.btn-ver-detalles {
    background: none;
    border: none;
    color: #0061df;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* --- 5. VISTA AMPLIADA (MODAL) --- */
.modal {
    display: none; /* Se activa con JS */
    position: fixed;
    z-index: 5000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 45, 92, 0.95); /* Fondo azul oscuro profundo */
    backdrop-filter: blur(10px);
}

.modal-contenido {
    background-color: #fff;
    margin: 3% auto;
    width: 90%;
    max-width: 850px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    animation: zoom 0.3s ease;
}

@keyframes zoom {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-contenido img {
    width: 100%;
    max-height: 70vh;
    object-fit: cover;
}

.modal-footer {
    padding: 25px 35px;
}

.modal-footer h2 {
    color: #002d5c;
    font-family: 'Inter', sans-serif;
}

.modal-footer p {
    color: #445566;
    font-family: 'Inter', sans-serif;
    margin-top: 10px;
}

.cerrar-modal {
    position: absolute;
    top: 15px;
    right: 25px;
    color: #fff;
    font-size: 45px;
    cursor: pointer;
    font-weight: bold;
}

/* --- ESTILO DEL MODAL (VISTA AMPLIADA) --- */
.modal {
    display: none; /* Se activa con JS */
    position: fixed;
    z-index: 5000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 45, 92, 0.95); /* Azul J.Fortiz profundo */
    backdrop-filter: blur(10px); /* Desenfoque de fondo */
    overflow-y: auto;
}

.modal-contenido {
    background-color: #fff;
    margin: 5% auto;
    width: 90%;
    max-width: 850px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    animation: aparecer 0.3s ease;
}

@keyframes aparecer {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-contenido img {
    width: 100%;
    max-height: 65vh;
    object-fit: cover;
}

.modal-footer {
    padding: 30px;
}

.tag-proyecto-modal {
    background: #0061df;
    color: white;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: bold;
}

.cerrar-modal {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    z-index: 6000;
}/* --- ESTILO UNIFICADO PARA TÍTULOS DE SECCIÓN --- */
#proceso .titulo-seccion {
    /* Usa exactamente el mismo tamaño que tus secciones de Proyectos y Servicios */
    font-size: 3.8rem; 
    font-weight: 700;
    color: #002d5c;
    text-align: center;
    margin-bottom: 50px;
    text-transform: none; /* O 'uppercase' si los otros están en mayúsculas */
}

/* Color azul para la parte resaltada del título */
#proceso .titulo-seccion span {
    color: #0061df;
}
/* --- SECCIÓN PROCESO: DIFUMINADO TOTAL SIN LÍNEAS --- */
#proceso {
    padding: 100px 0;
    text-align: center;
    margin: 0;
    border: none;
    /* El degradado empieza y termina en blanco puro para que la línea desaparezca */
    background: linear-gradient(
        to bottom, 
        #ffffff 0%,    /* Unión invisible con la sección de arriba */
        #e3f2fd 20%,   /* Azul suave donde están los iconos */
        #e3f2fd 80%,   /* Mantenemos el fondo azul en los pasos */
        #ffffff 100%   /* Unión invisible con la sección de abajo */
    );
}

/* --- DISEÑO DE LOS PASOS Y CÍRCULOS --- */
.pasos-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.circulo-paso {
    width: 140px;
    height: 140px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 97, 223, 0.15); /* Sombra suave para dar profundidad */
    margin: 0 auto 20px;
    color: #0061df;
    font-size: 3rem;
}

.circulo-paso .numero {
    position: absolute;
    bottom: -5px;
    background: #0061df;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 3px 12px;
    border-radius: 15px;
    border: 3px solid #ffffff;
}

.paso-item h3 {
    color: #002d5c;
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.paso-item p {
    color: #455a64;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 240px;
    margin: 0 auto;
}/* --- CONTENEDOR EN UNA SOLA FILA --- */
.pasos-grid {
    display: flex; /* Fuerza la fila única */
    justify-content: space-between; /* Espaciado uniforme */
    align-items: flex-start;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.paso-item {
    flex: 1; /* Todos los pasos ocupan el mismo ancho */
    text-align: center;
    transition: all 0.5s ease;
}

/* --- CÍRCULO CON EFECTO DE BRILLO --- */
.circulo-paso {
    width: 130px;
    height: 130px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden; /* Necesario para el efecto de brillo */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    color: #0061df;
    font-size: 2.5rem;
}

/* El "Brillo" que cruza el círculo */
.circulo-paso::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.6) 50%, 
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-25deg);
    transition: none;
}

/* --- HOVER PROFESIONAL --- */
.paso-item:hover .circulo-paso {
    transform: translateY(-10px) scale(1.05);
    background-color: #0061df;
    color: #ffffff;
    box-shadow: 0 15px 35px rgba(0, 97, 223, 0.25);
}

/* Activa el brillo al pasar el mouse */
.paso-item:hover .circulo-paso::before {
    left: 150%;
    transition: all 0.8s ease;
}

.paso-item h3 {
    font-size: 1.2rem;
    color: #002d5c;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.paso-item:hover h3 {
    color: #0061df;
}

.paso-item p {
    font-size: 0.9rem;
    color: #546e7a;
    line-height: 1.4;
}
/* --- TÍTULO CON 'Quienes' EN MINÚSCULAS --- */
.titulo-mixto-limpio {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    font-size: 3.5rem; /* Tamaño principal */
    color: #002d5c; /* Tu azul de marca */
    margin-bottom: 50px;
    /* Eliminamos text-transform: uppercase para respetar las minúsculas */
}

/* 1. Palabra 'Quienes' con fuente estándar y respetando escritura */
.quienes-estandar {
    font-weight: 700; /* Grosor normal de tus títulos */
    letter-spacing: -1px;
    text-transform: none; /* Asegura que se vea 'Quienes' y no 'QUIENES' */
}

/* 2. Caja del efecto React */
.rotador-react-box {
    height: 1.2em;
    overflow: hidden;
    background: #0061df;
    color: #ffffff;
    padding: 0 25px;
    border-radius: 12px;
}

/* 3. Palabra que rota: FUENTE MUCHO MÁS GRUESA */
.palabra-ultra-gruesa {
    display: block;
    height: 100%;
    font-weight: 900; /* Máximo grosor para el impacto visual */
    line-height: 1.2em;
    text-transform: none; /* Mantenemos minúsculas también aquí si lo deseas */
    animation: rotacion-smooth-react 8s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

/* Animación estilo React Bits */
@keyframes rotacion-smooth-react {
    0%, 20% { transform: translateY(0); }
    25%, 45% { transform: translateY(-100%); }
    50%, 70% { transform: translateY(-200%); }
    75%, 95% { transform: translateY(-300%); }
    100% { transform: translateY(0); }
}
/* --- CONFIGURACIÓN GLOBAL DE TÍTULOS --- */
/* Aplicamos este tamaño a TODOS los títulos de sección para que sean iguales */
.titulo-seccion, 
#proceso .titulo-seccion, 
.titulo-mixto-limpio {
    font-size: 4rem; /* Tamaño grande y uniforme para todo el sitio */
    color: #002d5c;
    margin-bottom: 60px; /* Espacio uniforme hacia el contenido de abajo */
    letter-spacing: -2px;
}
/* --- CONTENEDOR PRINCIPAL CENTRADO --- */
.qs-contenido-texto {
    max-width: 850px; /* Limita el ancho para que se vea igual que en la foto */
    margin: 0 auto;   /* El truco mágico: centra el bloque completo en el medio */
    text-align: left; /* El bloque está centrado, pero el texto se lee de izquierda a derecha */
    padding: 0 20px;
}

/* --- ESTILO DE LOS PÁRRAFOS --- */
.qs-parrafo-destacado, 
.qs-parrafo-secundario {
    font-size: 1.1rem;
    line-height: 1.7; /* Espaciado entre líneas para que sea fácil de leer */
    color: #455a64;   /* Color gris profesional de la imagen */
    margin-bottom: 25px;
    font-family: 'Segoe UI', sans-serif; /* O la fuente que estés usando */
}

.qs-parrafo-destacado {
    font-weight: 500; /* Un poquito más de peso para el primer párrafo */
}/* --- CONTENEDOR DE BENEFICIOS CENTRADO --- */
.qs-beneficios-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas idénticas a la imagen */
    max-width: 800px; /* Ancho controlado para que no se estire */
    margin: 40px auto 60px; /* Centrado horizontal y espaciado vertical */
    gap: 15px 50px; /* Espacio entre filas y columnas */
    text-align: left; /* Bloque centrado, texto a la izquierda */
    padding: 0 20px;
}

/* --- ESTILO DE CADA ÍTEM (Contenedor) --- */
.beneficio-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #455a64; /* Gris profesional de tus párrafos */
    padding: 10px 0;
    cursor: default;
    /* Transición suave para todo el ítem al hacer hover */
    transition: all 0.3s ease;
}

/* --- ESTILO DEL CHECK-ICON (Por defecto Plomo) --- */
.check-icon {
    color: #90a4ae; /* Plomo suave por defecto */
    font-size: 1.3rem;
    font-weight: 900; /* Grueso para que se note */
    /* Transición suave para el cambio de color */
    transition: color 0.3s ease, transform 0.3s ease;
}

/* ================================================= */
/* EFECTO HOVER (Al pasar el mouse)        */
/* ================================================= */

/* Cuando pasas el mouse por encima del BENEFICIO, el CHECK cambia a AZUL */
.beneficio-item:hover .check-icon {
    color: #0061df; /* El azul brillante de tu marca */
    transform: scale(1.1); /* Ligero aumento de tamaño para feedback */
}

/* (Opcional) El texto del beneficio también se oscurece un poco */
.beneficio-item:hover {
    color: #263238;
}

/* Ajuste Responsive para celulares */
@media (max-width: 600px) {
    .qs-beneficios-container {
        grid-template-columns: 1fr; /* Una sola columna en celulares */
        text-align: center;
        justify-content: center;
    }
}
/* --- SECCIÓN QUIÉNES SOMOS (CON MÁS ESPACIO ARRIBA) --- */
#quienes-somos {
    padding-top: 100px; /* Bajamos la sección para que no esté pegada a la anterior */
    padding-bottom: 100px;
    background-color: #ffffff;
    text-align: center;
}

/* --- AJUSTE ESPECÍFICO DEL TÍTULO CON EFECTO --- */
.titulo-mixto-limpio {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    text-transform: none; /* Respetamos las minúsculas que pediste */
}

.quienes-robusto {
    font-weight: 800; /* Grosor fuerte para 'Quienes' */
}

/* Caja del efecto React */
.rotador-react-box {
    height: 1.2em;
    overflow: hidden;
    background: #0061df;
    color: #ffffff;
    padding: 0 35px; /* Más ancho para el nuevo tamaño de letra */
    border-radius: 15px;
    box-shadow: 0 12px 30px rgba(0, 97, 223, 0.25);
}

/* Palabra rotativa ULTRA GRUESA */
.palabra-black {
    display: block;
    height: 100%;
    font-weight: 950; /* El máximo grosor */
    line-height: 1.2em;
    animation: rotacion-smooth-react 8s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

/* Ajuste de los números para que sigan el tamaño del título */
.num-wrapper {
    font-size: 4rem; /* Los números ahora tienen el mismo tamaño que los títulos */
    font-weight: 950;
    color: #002d5c;
    letter-spacing: -3px;
}

/* Animación mantenida */
@keyframes rotacion-smooth-react {
    0%, 20% { transform: translateY(0); }
    25%, 45% { transform: translateY(-100%); }
    50%, 70% { transform: translateY(-200%); }
    75%, 95% { transform: translateY(-300%); }
    100% { transform: translateY(0); }
}
/* --- ESTADÍSTICAS CON GROSOR NORMAL --- */
.num-display {
    color: #0061df; /* Mantenemos el azul para que resalten */
    font-size: 3.8rem; 
    
    /* CAMBIO: Grosor normal en lugar de grueso */
    font-weight: 500; 
    
    letter-spacing: -1px;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.stat-num {
    font-weight: 500; /* Aseguramos que el número animado sea normal */
}

.symbol {
    font-size: 2.2rem;
    margin-left: 3px;
    
    /* CAMBIO: Símbolo también en grosor normal */
    font-weight: 500; 
}

.stat-text {
    color: #546e7a;
    font-weight: 600; /* El texto descriptivo se mantiene un poco firme para legibilidad */
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-top: 10px;
    letter-spacing: 0.5px;
}

/* --- CONTENEDOR DE LAS ESTADÍSTICAS --- */
.qs-stats-panel {
    display: flex;
    justify-content: space-around;
    background: #f8fbff;
    padding: 50px 30px;
    border-radius: 35px;
    max-width: 900px;
    margin: 60px auto 0;
}
:root {
  --blue-main: #007bdd;
  --blue-hover: #0062b3;
  --blue-light: #eef7ff;
  --bg-input: #f5f5f5;
  --text-dark: #1a1a1a;
  --text-gray: #666;
  --border-card: #e0e0e0;
}

.contact-container {
  display: flex;
  gap: 5rem;
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Estilos Columna Izquierda */
.title-main {
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 0.2rem;
}

.title-brand {
  color: var(--blue-main);
  font-size: 2.2rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.description {
  color: var(--text-gray);
  line-height: 1.6;
  max-width: 500px;
  margin-bottom: 2.5rem;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.icon-box {
  width: 45px;
  height: 45px;
  background-color: var(--blue-light);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--blue-main);
  font-size: 1.2rem;
}

.text-group {
  display: flex;
  flex-direction: column;
}

.detail-title {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-dark);
}

.phone-link {
  text-decoration: none;
  transition: color 0.3s;
}

.phone-link:hover {
  color: var(--blue-main);
}

.detail-subtext {
  font-size: 0.85rem;
  color: var(--blue-main);
  font-weight: 500;
}

/* Estilos Formulario (Tarjeta) */
.contact-card {
  flex: 1;
  background: #ffffff;
  padding: 2.5rem;
  border: 1px solid var(--border-card);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

input, textarea {
  background-color: var(--bg-input);
  border: 1px solid transparent;
  padding: 0.9rem 1.2rem;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s;
}

input:focus, textarea:focus {
  border-color: var(--blue-main);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(0, 123, 221, 0.1);
}

.btn-submit {
  background-color: var(--blue-main);
  color: white;
  padding: 1.1rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s;
  margin-top: 0.5rem;
}

.btn-submit:hover {
  background-color: var(--blue-hover);
}

/* Adaptación para dispositivos móviles */
@media (max-width: 900px) {
  .contact-container {
    flex-direction: column;
    padding: 2rem 1rem;
    gap: 3rem;
  }
  
  .grid-row {
    grid-template-columns: 1fr;
  }
  
  .contact-info {
    text-align: center;
  }
  
  .detail-item {
    justify-content: center;
  }
}
:root {
  --blue-main: #007bdd;
  --text-dark: #000000;
  --text-gray: #555;
  --font-titles: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* Título superior: Transforma tus Ideas en Realidad */
.title-main {
  font-family: var(--font-titles);
  /* AJUSTE DE GROSOR: De 800 a 600 (más ligero pero aún destaca) */
  font-weight: 600; 
  font-size: 3.2rem;
  line-height: 1.0;
  color: var(--text-dark);
  margin-bottom: 10px;
  letter-spacing: -1.5px;
}

/* Título inferior: Contacta a J. Fortis Hoy */
.title-brand {
  font-family: var(--font-titles);
  /* AJUSTE DE GROSOR: De 700 a 500 (grosor medio) */
  font-weight: 500;
  color: var(--blue-main);
  font-size: 3rem;
  margin-top: 0;
  letter-spacing: -1px;
}

/* Párrafo descriptivo */
.description {
  font-family: var(--font-body);
  color: var(--text-gray);
  font-size: 1.1rem;
  line-height: 1.5;
  max-width: 480px;
  margin-bottom: 30px;
}

/* Estilo de los iconos (Cajas azules claras) */
.icon-box {
  width: 42px;
  height: 42px;
  background-color: #e8f4ff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-main);
  font-size: 1.1rem; /* Un poco más grande para mejor visibilidad */
}

/* Alineación de los items de contacto */
.detail-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  font-family: var(--font-body);
}

.detail-title {
  /* GROSOR DEL TEXTO DE CONTACTO: De 600 a 500 */
  font-weight: 500;
  font-size: 1rem;
  color: #000;
}
/* --- CONTACTO --- */
.contact-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
    padding: 80px 10%;
    max-width: 1400px;
    margin: 0 auto;
    background-color: #ffffff;
}

/* --- FOOTER --- */
.main-footer {
    background-color: #001d3d; 
    color: #ffffff;
    width: 100%;
    display: block;
    clear: both;
    padding: 60px 0 20px 0;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr 1.2fr;
    gap: 40px;
    padding: 0 20px;
}

/* LOGO MÁS CHICO */
.footer-logo {
    max-width: 3px; /* Tamaño reducido según lo solicitado */
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
}

/* TEXTOS UNIFICADOS EN TAMAÑO Y COLOR PLOMO */
.footer-text, 
.footer-links li, 
.footer-links a, 
.footer-contact p {
    color: #b0b0b0; /* Color plomo/gris */
    text-decoration: none;
    font-size: 0.85rem; /* Tamaño unificado para todos */
    margin-bottom: 12px;
    transition: color 0.3s ease;
    line-height: 1.5;
}

/* TÍTULOS */
.footer-links h3, 
.footer-contact h3 {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 25px;
    font-family: 'Montserrat', sans-serif;
}

/* EFECTO HOVER BLANCO */
.footer-links a:hover, 
.footer-links li:hover {
    color: #ffffff;
    cursor: pointer;
}

.footer-contact i {
    color: #ffffff;
    margin-right: 12px;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 50px;
    padding-top: 20px;
    color: #555;
    font-size: 0.75rem;
}

/* RESET LISTAS */
.footer-links ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
/* --- ESTILOS DE LA SECCIÓN DE CONTACTO (Para evitar que empuje al footer) --- */
.contact-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
    padding: 80px 10%;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* --- ESTILOS DEL FOOTER (PIE DE PÁGINA) --- */
.main-footer {
    background-color: #001d3d; /* Azul marino oscuro de J. Fortis */
    color: #ffffff;
    width: 100%;             /* Ocupa todo el ancho de la pantalla */
    display: block;          /* Se comporta como bloque independiente */
    clear: both;             /* Rompe cualquier alineación lateral */
    padding: 60px 0 20px 0;
    position: relative;
    float: none;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr 1.2fr; /* 4 columnas exactas */
    gap: 40px;
    padding: 0 20px;
}

/* LOGO ULTRA PEQUEÑO */
.footer-logo {
    max-width: 33px;        /* Tamaño exacto solicitado */
    height: auto;
    margin-bottom: 20px;
    filter: brightness(0) invert(1); /* Mantiene el logo blanco sobre el fondo oscuro */
}

/* TEXTOS UNIFICADOS (COLOR PLOMO) */
.footer-text, 
.footer-links li, 
.footer-links a, 
.footer-contact p {
    color: #b0b0b0;         /* Color plomo/gris profesional */
    text-decoration: none;
    font-size: 0.85rem;     /* Tamaño unificado solicitado */
    margin-bottom: 12px;
    transition: color 0.3s ease; /* Suaviza el cambio de color */
    line-height: 1.5;
}

/* TÍTULOS DE COLUMNAS */
.footer-links h3, 
.footer-contact h3 {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 25px;
    font-family: 'Montserrat', sans-serif;
}

/* EFECTO HOVER (CAMBIO A BLANCO) */
.footer-links a:hover, 
.footer-links li:hover {
    color: #ffffff;         /* Blanco puro al pasar el mouse */
    cursor: pointer;
}

.footer-contact i {
    color: #ffffff;
    margin-right: 12px;
}

/* LÍNEA FINAL DE COPYRIGHT */
.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 50px;
    padding-top: 20px;
    color: #555;
    font-size: 0.75rem;
}

/* RESET DE LISTAS */
.footer-links ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* --- ESTILOS DEL MENÚ HAMBURGUESA --- */
.menu-toggle {
    display: none; /* Escondido en computadora */
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: #001d3d; /* Azul de J. Fortiz */
    transition: 0.3s;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: flex; /* Aparece en celular */
        position: absolute;
        right: 20px;
    }

    nav {
        position: relative;
        justify-content: space-between !important;
    }

    .nav-menu {
        position: fixed;
        left: -100%; /* Escondido a la izquierda */
        top: 70px;
        flex-direction: column;
        background-color: #ffffff;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        z-index: 1000;
        padding: 20px 0;
    }

    .nav-menu.active {
        left: 0; /* Aparece al hacer clic */
    }

    .nav-menu li {
        margin: 15px 0;
    }

    .nav-menu li a {
        color: #001d3d !important;
        font-size: 1.2rem;
        font-weight: 600;
    }

    .btn-contacto-nav {
        display: none; /* Escondemos el botón de la nav para que no estorbe */
    }
}
/* =========================================================
   SOLUCIÓN INTEGRAL RESPONSIVE - J. FORTIZ
========================================================= */

@media (max-width: 768px) {
    
    /* 1. LOGO A LA IZQUIERDA TOTAL */
    nav {
        justify-content: flex-start !important;
        padding: 10px !important;
    }

    .logo, .logo img {
        margin-left: 0 !important;
        padding-left: 0 !important;
        max-width: 40px !important; /* Logo más pequeño en celular */
    }

    /* Ocultamos el menú y el botón de contacto en nav para que no estorben al logo */
    nav ul, .btn-contacto-nav {
        display: none !important; 
    }

    /* 2. ELIMINAR BOTÓN "MÁS SOLICITADO" Y LIMPIAR DISEÑO */
    .badge-destacado {
        display: none !important;
    }

    /* 3. NÚMEROS MÁS CHICOS Y SIN EL SIGNO "+" */
    .stat-num {
        font-size: 1.8rem !important; /* Más pequeño para que no choque */
    }

    .symbol-plus {
        display: none !important; /* Borra el signo + */
    }

    /* 4. ARREGLAR "QUIENES SOMOS" Y ROTADOR (image_8.png) */
    .titulo-mixto-limpio {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .palabra-ultra-gruesa {
        font-size: 1.5rem !important; /* Evita que "Expertos" se corte */
        white-space: normal !important;
    }

    .rotador-react-box {
        height: 40px !important; /* Ajusta el espacio para que no tape el párrafo */
    }

    /* 5. TARJETAS DE SERVICIOS (UNA POR FILA) */
    .servicios-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .servicio-card {
        width: 100% !important;
        max-width: 90% !important;
        margin: 0 auto !important;
    }

    /* 6. CONTACTO Y FOOTER */
    .contact-container {
        flex-direction: column !important;
        text-align: center !important;
        padding: 40px 5% !important;
    }

    .contact-info, .contact-card {
        width: 100% !important;
    }

    .footer-container {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 30px !important;
    }

    .footer-brand, .footer-links, .footer-contact {
        align-items: center !important;
    }
    /* Animación de las rayitas a una X */
#mobile-menu.is-active .bar:nth-child(2) {
    opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Asegúrate de que el menú tenga un z-index alto para que no quede detrás de nada */
.nav-menu {
    z-index: 9999 !important;
    transition: all 0.4s ease-in-out;
}
}

@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        right: -100%; /* Ahora sale desde la derecha */
        top: 20px;
        width: 60%; /* Cuadro chico, no toda la pantalla */
        height: auto; /* Se ajusta al contenido */
        max-height: 80vh;
        display: flex !important;
        flex-direction: column;
        padding: 60px 20px 30px;
        border-radius: 20px 0 0 20px; /* Bordes redondeados a la izquierda */
        
        /* EFECTO ESPEJO (Glassmorphism) */
        background: rgba(255, 255, 255, 0.7); 
        backdrop-filter: blur(10px); 
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
        
        transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        z-index: 999;
    }

    .nav-menu.active {
        right: 0 !important; /* Aparece desde la derecha */
    }

    /* Animación de la Hamburguesa a una X */
    #mobile-menu {
        z-index: 1000; /* Siempre visible sobre el menú */
        transition: 0.3s;
    }

    #mobile-menu.is-active .bar:nth-child(2) { opacity: 0; }
    #mobile-menu.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    #mobile-menu.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .nav-menu li {
        margin: 15px 0;
        list-style: none;
    }

    .nav-menu li a {
        font-weight: 600;
        color: #001d3d; /* Color de tu marca */
        text-decoration: none;
        font-size: 1.1rem;
    }
}

.btn-contacto-nav, .btn-main {
    cursor: pointer;
    user-select: none;
    touch-action: manipulation; /* Optimiza el toque en móviles */
}
/* Media Query para Celulares */
@media (max-width: 768px) {
    .servicios-grid {
        grid-template-columns: 1fr; /* Una sola columna en celulares */
        grid-auto-rows: auto; /* Que el alto se ajuste al contenido */
    }

    .hero-content h1 {
        font-size: 2.2rem; /* Título más pequeño para móviles */
    }


    .pasos-grid {
        flex-direction: column; /* Pasos uno debajo de otro */
        align-items: center;
    }
}
.img-full {
    width: 100vw !important;
    height: auto;
    object-fit: cover;
    /* Suavizamos el degradado para que la transición sea más natural */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}