/* --- COLORES CORPORATIVOS GPM --- */
:root {
    --azul-gpm: #004a99;
    --dorado-gpm: #ffc107;
}

/* Forzamos al Hero a ocupar exactamente el espacio de la pantalla */
.hero {
    min-height: calc(100vh - 60px); /* Ocupa el 100% de la pantalla menos la barra azul */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.logo-hero {
    height: 110px !important;      /* Lo achicamos un poco más para que el botón suba */
    width: auto;
    margin-top: -20px !important;  /* Lo pegamos más a la franja azul */
    margin-bottom: 5px !important;
    filter: drop-shadow(0px 5px 15px rgba(0,0,0,0.3));
}

.hero h1 {
    font-size: 2.2rem !important;  /* Ajustamos el tamaño de letra */
    margin-bottom: 0px !important;
}

.hero h3 {
    font-size: 1.4rem !important;
    margin-bottom: 15px !important;
}
.btn-gpm-gold { 
    background-color: var(--dorado-gpm); 
    color: #000; 
    font-weight: bold;
    border: none;
}

.btn-gpm-gold:hover {
    background-color: #e0a800;
}

/* --- BOTÓN FLOTANTE DE WHATSAPP --- */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    color: white;
}

.img-ajustada {
    width: 100%;        /* Obliga a la imagen a ocupar todo el ancho de su columna */
    height: 350px;      /* Define una altura fija para que AMBAS midan lo mismo */
    object-fit: contain; /* Evita que la imagen se estire o se vea 'gorda' */
    background-color: #ffffff; /* Opcional: pone un fondo blanco si la imagen es pequeña */
    display: block;
}

.img-ajustada {
    width: 100%;
    height: 300px;      /* Altura fija para que los dos cuadros siempre midan lo mismo */
    object-fit: contain; 
    background-color: white; 
    display: block;
}

.img-presentadora-pro {
    height: 400px;          /* Aumenta este número si la quieres aún más grande */
    width: auto;            /* Mantiene la proporción para que no se vea estirada */
    margin-left: 340px;     /* La acerca más al cuadro azul para que se solapen un poco */
    margin-bottom: -38px;   /* La baja un poco para que sus pies toquen el borde de la sección */
    z-index: 5;             /* Asegura que esté por encima de cualquier sombra */
    filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.15)); /* Sombra suave para que no flote */
    transition: transform 0.3s ease; /* Toque profesional: se mueve suave si cambias algo */
}

/* Ajuste para que el cuadro azul no la opaque */
.contact-info {
    position: relative;
    z-index: 1;
    overflow: visible !important; /* IMPORTANTE: permite que ella "salga" del cuadro */
}

@media (max-width: 991px) {
    .img-presentadora-pro {
        height: 350px;
        margin-left: 0;
        margin-bottom: 0;
    }
}

.contact-info {
    /* 1. MOVER A LA IZQUIERDA O DERECHA */
    margin-left: -00px;   /* Un número negativo lo mueve a la IZQUIERDA */
    margin-right: 50px;   /* Un número positivo lo aleja de la muchacha */

    /* 2. AJUSTAR EL ANCHO DEL CUADRO */
    width: 350px;         /* Puedes fijar un ancho exacto en píxeles */
    
    /* 3. AJUSTAR LA ALTURA */
    padding-top: 50px;    /* Más espacio arriba */
    padding-bottom: 50px; /* Más espacio abajo (esto lo hace ver más largo) */
    
    /* 4. MOVER ARRIBA O ABAJO */
    position: relative;
    top: -30px;           /* Un número negativo lo sube un poquito */
}

footer {
    background-color: #343a40;
    margin-top: -1px; /* Sube un pixel para "morder" la sección de arriba */
    border-top: none;
    position: relative;
    z-index: 5;
}

/* Este es el color azul para la barra superior */
.bg-azul-gpm {
    background-color: #004a99 !important; /* El azul de tu marca */
    border-bottom: 2px solid #ffc107 !important; /* La línea dorada delgada */
}

/* Esto asegura que los textos del menú sean blancos y se vean bien */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #ffc107 !important; /* Se pone dorado cuando pasas el mouse */
}

.hero .lead {
    font-weight: 500 !important;   /* Aumenta el grosor (400 es normal, 700 es negrita) */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Añade contraste contra el fondo */
    letter-spacing: 0.5px;         /* Separa un poquito las letras para que se lean mejor */
}

.hero .lead strong {
    font-weight: 700 !important;   /* Hace que la parte importante sea aún más gruesa */
    color: #ffffff;                /* Asegura que sea blanco puro */
}
/* El nombre en Azul */
.titulo-gpm {
    color: #004a99 !important; /* El azul corporativo */
    font-weight: 800 !important;
    font-size: 3.5rem !important;
    margin-bottom: 0 !important;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.5); /* Sutil brillo para resaltar */
}

/* El eslogan en Negro y más grande */
.eslogan-gpm {
    color: #000000 !important; /* Negro puro */
    font-weight: 700 !important;
    font-size: 2.2rem !important; /* Más grande que antes */
    margin-top: -5px !important;
}

/* La base de la pirámide (el texto inferior) */
.lead-gpm {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1.3rem !important;
    line-height: 1.4;
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased; /* Suaviza los bordes en Mac/Chrome */
    -moz-osx-font-smoothing: grayscale; /* Suaviza los bordes en Firefox */
}
/* Nombre de la empresa: Azul, firme pero suave */
.titulo-gpm {
    color: #004a99 !important;
    font-weight: 700 !important;
    font-size: 3.2rem !important;
    letter-spacing: -0.5px; /* Acerca las letras un poco para un look más premium */
    text-shadow: none !important; /* Eliminamos sombras duras */
}

/* Eslogan: Gris oscuro (más suave que el negro puro) */
.eslogan-gpm {
    color: #2c3e50 !important; /* Un gris azulado oscuro muy elegante */
    font-weight: 600 !important;
    font-size: 2.2rem !important;
    margin-top: -5px !important;
}

/* Texto de la pirámide: Integrado totalmente */
.piramide-texto {
    color: #ffffff !important;
    line-height: 1.6;
}

.linea-1 {
    font-weight: 400 !important; /* Fina pero legible */
    font-size: 1.3rem !important;
    opacity: 0.95;
}

.linea-2 {
    font-weight: 600 !important; /* Un poco más de peso para cerrar la forma */
    font-size: 1.2rem !important;
}

/* Nombre: Azul intenso y nítido */
.titulo-gpm {
    color: #004a99 !important; /* Azul puro de alta intensidad */
    font-weight: 700 !important; /* Grueso pero no excesivo */
    font-size: 3.5rem !important;
    letter-spacing: -1px; /* Hace que se vea más moderno */
    text-shadow: none !important; /* Eliminamos sombras que ensucian el color */
}

/* Eslogan: Negro sólido y elegante */
.eslogan-gpm {
    color: #000000 !important;
    font-weight: 600 !important; /* Un poco más delgado para suavizar */
    font-size: 2.5rem !important;
    margin-top: -10px !important;
}

/* Texto inferior: Blanco puro sobre azul */
.piramide-texto {
    color: #ffffff !important;
    text-align: center;
}

.linea-1 {
    font-weight: 400 !important; /* Fina para que se vea aérea */
    font-size: 1.5rem !important;
}

.linea-2 {
    font-weight: 600 !important; /* Resalta el beneficio sin ser rústica */
    font-size: 1.3rem !important;
}

/* Este código solo se activa en celulares, no toca nada en la computadora */
@media (max-width: 991px) {
    /* 1. Forzamos a que los contenedores se pongan uno debajo del otro */
    .row {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Ajuste para que la muchacha y el contacto no se choquen */
    .col-lg-6.position-relative.d-flex {
        flex-direction: column !important;
        min-height: auto !important;
        height: auto !important;
        padding-top: 30px !important;
    }

    /* 3. Liberamos el cuadro azul de su posición fija */
    .contact-info {
        position: relative !important; /* Deja de flotar sobre otros elementos */
        width: 100% !important; /* Ocupa el ancho del celular */
        margin: 20px 0 !important; /* Crea espacio arriba y abajo */
        left: 0 !important; /* Lo centra */
        top: 0 !important;
        z-index: 10 !important;
    }

    /* 4. Ajustamos la imagen de "atención" para que respire */
    img[src*="atencion"] {
        position: relative !important;
        display: block !important;
        margin: 0 auto !important;
        max-width: 80% !important; /* Evita que sea gigante en el móvil */
        height: auto !important;
    }

    /* 5. Aseguramos que el formulario también ocupe su lugar */
    .col-lg-6, .col-8 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
    }
}

<style>
/* Estilo base para todos los enlaces del menú */
.nav-custom .nav-link {
    color: #ffffff !important; /* Texto blanco para resaltar sobre el fondo azul */
    font-weight: 500;
    margin: 0 10px; /* Un poco más de espacio entre ellos */
    transition: all 0.3s ease; /* Suaviza el cambio de color y movimiento */
    border-bottom: 2px solid transparent; /* Línea invisible inicial */
    padding: 5px 0 !important;
}

/* Efecto al pasar el cursor para TODOS los botones (incluyendo contacto) */
.nav-custom .nav-link:hover {
    color: #ffc107 !important; /* Cambia al dorado de GPM-SYSTEMS */
    border-bottom: 2px solid #ffc107; /* Aparece la línea dorada abajo */
    transform: translateY(-2px); /* El texto sube ligeramente */
}
</style>

<style>
.brand-tech {
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    text-decoration: none; /* Evita subrayados no deseados */
}

.tech-text {
    font-size: 26px;
    font-weight: 800; 
    letter-spacing: 1.5px; /* Un poco más de espacio para verse más técnico */
    text-transform: uppercase;
    color: #ffc107; /* El dorado sólido de tu logo */
    font-family: 'Montserrat', sans-serif;
    /* Sombra sutil para dar profundidad tecnológica */
    text-shadow: 0px 2px 4px rgba(0,0,0,0.5);
}

/* Efecto al pasar el cursor */
.brand-tech:hover {
    transform: scale(1.03); /* Crece un poquito más al tocarlo */
}

.brand-tech:hover .tech-text {
    color: #ffdb58; /* Un dorado un poco más brillante al pasar el mouse */
    text-shadow: 0px 0px 8px rgba(255, 193, 7, 0.6); /* Efecto de "neón" dorado suave */
}
</style>

<style>
/* 1. Efecto de agrandado suave para el bloque central */
.brand-tech:hover {
    transform: scale(1.03); /* Crece un 3% igual que el de la esquina */
}

/* 2. Efecto de brillo tecnológico para el texto */
.brand-tech:hover .tech-text {
    color: #ffdb58 !important; /* Un dorado más brillante */
    text-shadow: 0px 0px 12px rgba(255, 193, 7, 0.8); /* Resplandor dorado */
}

/* 3. Efecto de sombra para el logo */
.brand-tech:hover .logo-hero {
    filter: drop-shadow(0px 0px 15px rgba(255, 193, 7, 0.6)); /* Brillo alrededor del círculo */
}
</style>

<style>
/* Animación personalizada: más rápida y con brillo */
@keyframes latido-gpm {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
    50% { transform: scale(1.05); box-shadow: 0 0 20px 10px rgba(255, 193, 7, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

.btn-gpm-pulsante {
    background-color: #ffc107 !important; /* Dorado GPM */
    color: #000 !important;
    font-weight: bold;
    border: none;
    /* Aplicamos la animación constante */
    animation: latido-gpm 1.5s infinite ease-in-out;
    transition: all 0.3s ease;
}

.btn-gpm-pulsante:hover {
    background-color: #e0a800 !important;
    transform: scale(1.1) !important; /* Crece más cuando pones el mouse */
    animation: none; /* Se detiene la pulsación al tocarlo para dar control */
}
</style>

<style>
.img-ajustada {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Movimiento más fluido */
    cursor: pointer;
    position: relative;
    z-index: 1;
}

/* Al tocar o pasar el cursor */
.img-ajustada:hover, .img-ajustada:active {
    transform: scale(1.5); /* Crece un 50% de su tamaño original */
    z-index: 999; /* Se pone por encima de TODO en la página */
    box-shadow: 0px 20px 50px rgba(0,0,0,0.7); /* Sombra profunda para que resalte */
    border: 2px solid #ffc107; /* Marco dorado GPM para resaltar detalles */
}

/* Evitamos que la tarjeta corte la imagen al crecer */
.card {
    border: none !important;
    overflow: visible !important; 
}

/* Animación de brillo automático para el nombre GPM-SYSTEMS */
@keyframes brillo-auto-text {
    0% { color: #ffc107; text-shadow: 0px 2px 4px rgba(0,0,0,0.5); }
    50% { color: #ffdb58; text-shadow: 0px 0px 15px rgba(255, 193, 7, 0.9); }
    100% { color: #ffc107; text-shadow: 0px 2px 4px rgba(0,0,0,0.5); }
}

/* Aplicamos la animación al texto de forma constante */
.tech-text {
    animation: brillo-auto-text 2s infinite ease-in-out;
}

/* Aplicamos un brillo suave automático también al logo (la imagen/círculo) */
.brand-tech .logo-hero, .brand-tech img {
    animation: brillo-logo-auto 2s infinite ease-in-out;
}

@keyframes brillo-logo-auto {
    0% { 
        filter: drop-shadow(0px 0px 5px rgba(255, 193, 7, 0.2)); 
    }
    50% { 
        /* Aumentamos a 35px para que la luz se expanda mucho más hacia afuera */
        filter: drop-shadow(0px 0px 30px rgba(255, 193, 7, 0.9)); 
    }
    100% { 
        filter: drop-shadow(0px 0px 5px rgba(255, 193, 7, 0.2)); 
    }
}


/* Aviso lateral elegante */
.slide-in-ad {
    position: fixed;
    bottom: 20px;
    right: -400px; /* Empieza fuera de la pantalla */
    width: 320px;
    background: #ffffff;
    border-left: 5px solid #003366; /* Dorado GPM */
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border-radius: 10px;
    padding: 20px;
    z-index: 2000;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.slide-in-ad.show {
    right: 20px; /* Entra a la pantalla */
}

.slide-in-ad h5 { color: #003366; font-weight: 800; margin-bottom: 5px; }
.slide-in-ad p { color: #555; font-size: 0.9rem; margin-bottom: 15px; }
.close-ad { position: absolute; top: 5px; right: 10px; cursor: pointer; font-size: 20px; color: #999; }

/* Logo superior izquierdo*/
.tech-slogan {
    display: block;
    margin-top: 2px;
    font-family: sans-serif; /* O la fuente que uses en el resto del sitio */
}

/* Seleccionamos el enlace que tiene el icono de Instagram */
a[href*="instagram.com"]:hover {
    /* Creamos el efecto de color degradado típico de Instagram */
    color: #E1306C !important; 
    
    /* Le damos un sombreado o resplandor suave */
    text-shadow: 0 0 15px rgba(225, 48, 108, 0.7);
    
    /* Un pequeño movimiento para que se sienta interactivo */
    transform: scale(1.2);
    display: inline-block;
    transition: all 0.3s ease;
}

/* --- Estilos de color y Hover (Los que ya tenías) --- */
a[href*="instagram.com"]:hover { color: #E1306C !important; text-shadow: 0 0 15px rgba(225, 48, 108, 0.7); transform: scale(1.2); }
a[href*="facebook.com"]:hover { color: #1877F2 !important; text-shadow: 0 0 15px rgba(24, 119, 242, 0.7); transform: scale(1.2); }
a[href*="wa.me"]:hover { color: #25D366 !important; text-shadow: 0 0 15px rgba(37, 211, 102, 0.8); transform: scale(1.2); }

/* --- AQUÍ ESTABA EL ERROR: Cerramos bien el comentario --- */

.social-icons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important; /* Esto los manda a las X */
    align-items: center !important;
    width: 100% !important;
    min-width: 100% !important;
    margin-top: 30px !important;
    padding: 0 10px;
}

.social-icons i {
    font-size: 45px !important; /* Los hice un pelín más grandes aún */
    transition: all 0.3s ease;
}

.social-icons a {
    text-decoration: none !important;
    display: inline-block !important;
}
</style>