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

/* --- VARIABLES GLOBALES Y TIPOGRAFÍA --- */
:root {
    /* Fuentes */
    --font-titulos: 'Oswald', sans-serif;
    --font-textos: 'Inter', sans-serif;
    /* Tamaños  */
    --size-titulo: 48px;
    --size-subtitulo1: 32px;
    --size-subtitulo2: 16px;
    --size-texto: 16px;
    /* Pesos de fuente */
    --peso-regular: 400;
    --peso-semibold: normal;
    /*Paleta de colores */
    --ColorTitulo: #f95609;
    --ColorSubtitulo: #1860ef;
    --ColorNegro: #000000;
    --ColorBlanco: #ffffff;
    --ColorAmarillo: #ffb703;
}

body {
    font-family: var(--font-textos);
    font-size: var(--size-texto);
    font-weight: var(--peso-regular);
    line-height: 1.5;
    color: #333;
    background-color: #f4f4f4;
}

/* Utilidad general */
.container {
    width: 100%;
    max-width: 100%;
    padding-left: 150px;
    padding-right: 150px;
    margin: 0 auto;
}

/* ========================================= */
/* SECCIÓN: GR HEADER                        */
/* ========================================= */
.gr-header {
    background-color: #ffffff;
    height: 115px;
    width: 100%;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px #0000000d;
    position: relative;
    z-index: 10;
}

.gr-header__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding-left: 80px;
    padding-right: 150px;
}

.gr-header__logo {
    display: flex;
    align-items: center;
    margin: 0;
}

.gr-header__logo-img {
    max-height: 150px;
    width: auto;
    display: block;
}

.gr-header__nav {
    display: flex;
    align-items: center;
}

/* ========================================= */
/* SECCIÓN: GR HERO BANNER                   */
/* ========================================= */
.gr-hero-banner {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 500px;
    background-image: url('../img/fondo-racks.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #787878;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 40px solid var(--ColorAmarillo);
}

.gr-hero-banner__wrapper {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.gr-hero-banner__headline {
    font-family: var(--font-titulos);
    font-size: var(--size-titulo);
    color: var(--ColorBlanco);
    line-height: 1.1;
    font-weight: bold;
    text-shadow: 2px 2px 10px #131212de;
    margin: 0;
    padding: 0 20px;
}

.gr-hero-banner__subheadline {
    font-size: var(--size-subtitulo1);
    color: var(--ColorBlanco);
    margin: 0;
    line-height: 1.1;
}

/* El cuadrito blanco inferior */
.gr-hero-banner__floating-card {
    background: var(--ColorBlanco);
    padding: 25px 30px;
    border-radius: 25px 25px 0 0;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.1);
}

.gr-hero-banner__brand-img {
    max-width: 280px;
    height: auto;
    display: block;
}

/* ========================================= */
/* SECCIÓN: GR QUIÉNES SOMOS                 */
/* ========================================= */

.gr-nosotros {
    padding: 80px 0;
    text-align: center;
}

.gr-nosotros .titulo-principal {
    margin-bottom: 35px;
    font-size: var(--size-titulo);
    color: var(--ColorSubtitulo);
    font-family: var(--font-titulos);
}

.gr-nosotros__cabecera {
    margin-bottom: 80px;
}

.gr-nosotros__texto {
    max-width: 1000px;
    margin: 0 auto;
    color: var(--ColorNegro);
    font-size: var(--size-texto);
    font-family: var(--font-textos);
    line-height: 1.6;
}

.gr-nosotros__galeria {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding-left: 150px;
    padding-right: 150px;
    width: 100%;
    margin: 0 auto;
}

.gr-nosotros__img-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
}

.gr-nosotros__img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gr-nosotros__img-wrapper:hover img {
    transform: scale(1.05);
}

/* ========================================= */
/* SECCIÓN: CONTACTO CON FONDO               */
/* ========================================= */

.gr-contacto-bg {
    position: relative;
    width: 100%;
    min-height: 80vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 0px 0;
}

.gr-contacto-bg__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff66;
    z-index: 1;
}

.gr-contacto-bg__wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
}

.gr-contacto-bloques {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.gr-contacto-info {
    background-color: var(--ColorAmarillo);
    padding: 60px 50px;
    border-radius: 30px;
    color: #000000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.gr-contacto-info__titulo {
    font-family: var(--font-titulos);
    font-size: 45px;
    margin-bottom: 20px;
    font-weight: 700;
}

.gr-contacto-info__texto {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
}

.gr-contacto-form-card {
    background-color: #ffffff;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 10px 30px #00000026;
}

.gr-form__grupo {
    margin-bottom: 20px;
}

.gr-form__label {
    display: block;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
    color: #000;
}

.gr-form__input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #787878;
    border-radius: 5px;
    font-family: var(--font-textos);
    font-size: 14px;
}

.gr-form__input::placeholder {
    color: #555555;
}

.gr-form__input--corto {
    width: 60%;
}

.gr-form__textarea {
    min-height: 120px;
    resize: vertical;
}

.gr-btn-enviar {
    background-color: var(--ColorAmarillo);
    color: #000;
    border: none;
    padding: 12px 40px;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: opacity 0.3s ease;
}

.gr-btn-enviar:hover {
    opacity: 0.8;
}

/* ========================================= */
/* SECCIÓN: NUESTRAS SOLUCIONES (PRODUCTOS)  */
/* ========================================= */

.gr-soluciones {
    padding: 80px 0;
    text-align: center;
    background-color: var(--ColorBlanco);
}

.gr-soluciones .titulo-principal {
    margin-bottom: 60px;
    color: var(--ColorSubtitulo);
    font-family: var(--font-titulos);
    font-size: var(--size-titulo);
    font-weight: 700;
}

.gr-soluciones__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.gr-solucion-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.gr-solucion-card__img {
    width: 100%;
    max-width: 250px;
    height: auto;
    margin-bottom: 25px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.gr-solucion-card:hover .gr-solucion-card__img {
    transform: scale(1.05);
}

.gr-solucion-card__etiqueta {
    background-color: var(--ColorAmarillo);
    color: var(--ColorNegro);
    font-family: var(--font-textos);
    font-weight: 700;
    font-size: 16px;
    padding: 12px 20px;
    border-radius: 50px;
    width: 90%;
    max-width: 280px;
    box-shadow: 0 4px 15px #00000014;
}

/* ========================================= */
/* SECCIÓN: FOOTER (PIE DE PÁGINA)           */
/* ========================================= */

.gr-footer {
    background-color: #F4F4F4;
    padding: 60px 0 10px;
    border-top: 1px solid #f0f0f0;
}

.gr-footer__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    padding: 0 50px;
}

.gr-footer__logo {
    max-height: 70px;
    width: auto;
}

.gr-footer__sociales {
    text-align: center;
}

.gr-footer__sociales-titulo {
    color: var(--ColorSubtitulo);
    font-size: var(--font-textos);
    font-family: var(--font-textos);
    font-weight: 700;
    margin-bottom: 15px;
}

.gr-footer__iconos {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.gr-footer__icono-link {
    color: var(--ColorSubtitulo);
    transition: transform 0.3s ease, color 0.3s ease;
    display: flex;
}

.gr-footer__icono-link:hover {
    color: var(--ColorAmarillo);
    transform: translateY(-3px);
}

.gr-footer__bottom {
    text-align: center;
}

.gr-footer__copyright {
    color: var(--ColorSubtitulo);
    font-size: var(--font-textos);
    font-family: var(--font-textos);
    font-weight: var(--peso-semibold);
    margin: 0;
}

/* ========================================= */
/* MÓDULO RESPONSIVO: CELULARES (Hasta 768px)*/
/* ========================================= */
@media (max-width: 768px) {

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .titulo-principal {
        font-size: 32px !important;
    }
    .gr-header {
        height: 90px;
    }

    .gr-header__wrapper {
        padding: 0 20px;
        justify-content: center;
    }

    .gr-header__logo-img {
        max-height: 100px;
    }

    /* 3. Hero Banner */
    .gr-hero-banner {
        min-height: 400px;
        height: 50vh;
        border-bottom: 20px solid var(--ColorAmarillo);
    }

    .gr-hero-banner__headline {
        font-size: 36px;
    }

    .gr-hero-banner__subheadline {
        font-size: 24px;
    }

    .gr-hero-banner__floating-card {
        padding: 15px 20px;
    }

    .gr-hero-banner__brand-img {
        max-width: 180px;
    }

    /* 4. NOSOTROS (El diseño de tu última imagen) */
    .gr-nosotros {
        padding: 40px 0;
        padding-left: 20px;
        padding-right: 20px;
    }

    .gr-nosotros__cabecera {
        margin-bottom: 30px;
    }

    .gr-nosotros__texto {
        text-align: justify;
        /* Hace el texto cuadradito */
        font-size: 15px;
    }

    .gr-nosotros__galeria {
        grid-template-columns: 1fr;
        /* Una sola foto por fila */
        gap: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* 5. Contacto */
    .gr-contacto-bg {
        padding: 40px 0;
    }

    .gr-contacto-bloques {
        grid-template-columns: 1fr;
        /* Formulario debajo de info */
        gap: 30px;
    }

    .gr-contacto-info {
        padding: 40px 30px;
        border-radius: 20px;
    }

    .gr-contacto-info__titulo {
        font-size: 36px;
    }

    .gr-contacto-form-card {
        padding: 30px 25px;
    }

    .gr-form__input--corto {
        width: 100%;
    }

    /* 6. Soluciones (Los 9 Racks) */
    .gr-soluciones {
        padding: 50px 0;
    }

    .gr-soluciones__grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .gr-solucion-card__img {
        max-width: 220px;
        margin-bottom: 20px;
    }

    .gr-solucion-card__etiqueta {
        width: 100%;
        max-width: 280px;
        font-size: 15px;
        padding: 10px 15px;
    }

    /* 7. Footer */
    .gr-footer__top {
        flex-direction: column;
        gap: 30px;
        padding: 0;
    }

    .gr-footer__logo {
        max-height: 100px;
    }
}