/* ==========================================================
   R&R SOLUCIONES Y SUMINISTROS
   Hoja de estilos principal
========================================================== */


/* ==========================================================
   VARIABLES
========================================================== */

:root {

    --azul: #063766;

    --azul-oscuro: #061d34;

    --azul-claro: #0b4e8a;

    --azul-suave: #eaf3fb;

    --gris: #66717d;

    --gris-claro: #e9edf0;

    --texto: #15212d;

    --texto-secundario: #64717e;

    --blanco: #ffffff;

    --fondo: #f7f9fb;

    --borde: #dfe5ea;

    --sombra:
        0 18px 45px rgba(6, 55, 102, 0.10);

    --radio: 16px;

    --ancho: 1200px;

}


/* ==========================================================
   RESET
========================================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        "Inter",
        Arial,
        sans-serif;

    color: var(--texto);

    background: var(--blanco);

    line-height: 1.6;

}


img {

    max-width: 100%;

    display: block;

}


a {

    text-decoration: none;

    color: inherit;

}


button,
input,
select,
textarea {

    font-family: inherit;

}


/* ==========================================================
   CONTENEDOR
========================================================== */

.container {

    width:
        min(
            var(--ancho),
            calc(100% - 40px)
        );

    margin-left: auto;

    margin-right: auto;

}


/* ==========================================================
   HEADER
========================================================== */

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

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

    border-bottom:
        1px solid
        var(--borde);

    backdrop-filter:
        blur(12px);

}


.nav-container {

    min-height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


/* LOGO */

.brand img {

    width: 172px;

    height: 70px;

    object-fit: contain;

}


/* NAVEGACIÓN */

.main-nav {

    display: flex;

    align-items: center;

    gap: 24px;

    font-size: 13px;

    font-weight: 700;

}


.main-nav a {

    color: #354351;

    transition:
        color 0.2s ease;

}


.main-nav a:hover {

    color: var(--azul);

}


.nav-button {

    color:
        var(--blanco) !important;

    background:
        var(--azul);

    padding:
        12px 18px;

    border-radius:
        8px;

    box-shadow:
        0 8px 20px
        rgba(
            6,
            55,
            102,
            0.18
        );

}


/* ==========================================================
   MENÚ MÓVIL
========================================================== */

.menu-toggle {

    display: none;

    border: 0;

    background: transparent;

    cursor: pointer;

    padding: 8px;

}


.menu-toggle span {

    display: block;

    width: 25px;

    height: 2px;

    background: var(--azul);

    margin: 5px;

}


/* ==========================================================
   HERO
========================================================== */

.hero {

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(
                24,
                93,
                151,
                0.18
            ),
            transparent 30%
        ),

        linear-gradient(
            125deg,
            #f8fafc 0%,
            #eef3f7 52%,
            #f8fafc 100%
        );

    border-bottom:
        1px solid
        var(--borde);

}


.hero-container {

    min-height: 650px;

    display: grid;

    grid-template-columns:
        1.05fr
        0.95fr;

    gap: 50px;

    align-items: center;

    padding:
        65px 0;

}


/* ETIQUETA */

.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        var(--azul-claro);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.16em;

}


.eyebrow span {

    width: 28px;

    height: 3px;

    background:
        var(--gris);

    display: inline-block;

}


/* TITULO */

.hero h1 {

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        clamp(
            42px,
            5vw,
            70px
        );

    line-height: 1.03;

    letter-spacing: -0.045em;

    margin:
        20px 0;

}


.hero h1 strong {

    color: var(--azul);

}


.hero-content > p {

    max-width: 650px;

    color:
        var(--texto-secundario);

    font-size: 18px;

    margin-bottom: 28px;

}


/* BOTONES */

.hero-buttons {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

}


.btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    gap: 14px;

    border-radius: 8px;

    padding:
        14px 21px;

    font-weight: 800;

    font-size: 13px;

    border:
        1px solid
        transparent;

    cursor: pointer;

    transition:
        0.2s ease;

}


.btn span {

    font-size: 18px;

    line-height: 0;

}


.btn-primary {

    background:
        var(--azul);

    color:
        var(--blanco);

    box-shadow:
        0 12px 25px
        rgba(
            6,
            55,
            102,
            0.20
        );

}


.btn-primary:hover {

    transform:
        translateY(-2px);

    background:
        #0a477e;

}


.btn-secondary {

    background:
        var(--blanco);

    border-color:
        #cbd4dc;

    color:
        var(--azul);

}


.btn-secondary:hover {

    border-color:
        var(--azul);

}


/* ==========================================================
   ESTADÍSTICAS HERO
========================================================== */

.hero-stats {

    display: flex;

    gap: 30px;

    margin-top: 42px;

}


.hero-stat {

    display: flex;

    align-items: center;

    gap: 9px;

}


.hero-stat strong {

    color:
        var(--azul);

    font-size: 20px;

}


.hero-stat span {

    color:
        var(--texto-secundario);

    font-size: 10px;

    line-height: 1.25;

    text-transform:
        uppercase;

    letter-spacing: 0.06em;

}


/* ==========================================================
   HERO VISUAL
========================================================== */

.hero-visual {

    position: relative;

    min-height: 460px;

    display: grid;

    place-items: center;

}


.industrial-card {

    width:
        min(
            520px,
            100%
        );

    height: 430px;

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            #071d33,
            #0b4678
        );

    box-shadow:
        30px 35px 70px
        rgba(
            7,
            35,
            59,
            0.28
        );

    position: relative;

    overflow: hidden;

}


.industrial-card::before {

    content: "";

    position: absolute;

    inset: 18px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.13
        );

    border-radius:
        14px;

}


/* CABECERA TARJETA */

.industrial-header {

    position: absolute;

    top: 30px;

    left: 34px;

    right: 34px;

    display: flex;

    justify-content:
        space-between;

    align-items: center;

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

    font-size: 9px;

    letter-spacing: 0.14em;

    font-weight: 700;

    z-index: 3;

}


.industrial-header i {

    width: 45px;

    height: 5px;

    background:
        #77818a;

    display: block;

}


/* CONTENIDO VISUAL */

.industrial-content {

    position: absolute;

    inset:
        75px
        35px
        60px;

    overflow: hidden;

}


.industrial-circle {

    position: absolute;

    border:
        10px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-radius:
        50%;

}


.circle-one {

    width: 300px;

    height: 300px;

    top: -90px;

    left: -50px;

}


.circle-two {

    width: 230px;

    height: 230px;

    bottom: -80px;

    right: -40px;

}


/* LÍNEAS */

.industrial-lines {

    position: absolute;

    left: 20%;

    right: 10%;

    top: 40%;

    transform:
        rotate(-15deg);

}


.industrial-lines span {

    display: block;

    height: 2px;

    margin: 18px 0;

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

}


.industrial-lines span:nth-child(1) {

    width: 70%;

}


.industrial-lines span:nth-child(2) {

    width: 100%;

}


.industrial-lines span:nth-child(3) {

    width: 55%;

}


/* R&R CENTRAL */

.industrial-center {

    position: absolute;

    left: 50%;

    top: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    width: 130px;

    height: 130px;

    display: grid;

    place-items: center;

    border-radius:
        50%;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.35
        );

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

    color:
        var(--blanco);

    font-family:
        Montserrat,
        sans-serif;

    font-weight: 800;

    font-size: 28px;

}


/* PIE TARJETA */

.industrial-footer {

    position: absolute;

    bottom: 25px;

    left: 34px;

    right: 34px;

    display: flex;

    justify-content:
        space-between;

    gap: 12px;

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

    font-size: 7px;

    letter-spacing: 0.12em;

}


/* TARJETA FLOTANTE */

.floating-card {

    position: absolute;

    left: -8px;

    bottom: 10px;

    background:
        var(--blanco);

    border:
        1px solid
        var(--borde);

    box-shadow:
        var(--sombra);

    border-radius:
        12px;

    padding:
        13px 17px;

    display: flex;

    align-items: center;

    gap: 11px;

}


.floating-icon {

    width: 30px;

    height: 30px;

    border-radius:
        50%;

    display: grid;

    place-items: center;

    background:
        var(--azul-suave);

    color:
        var(--azul);

    font-weight: 900;

}


.floating-card strong,
.floating-card small {

    display: block;

}


.floating-card strong {

    font-size: 11px;

}


.floating-card small {

    color:
        var(--texto-secundario);

    font-size: 9px;

}


/* ==========================================================
   BENEFICIOS
========================================================== */

.benefits {

    background:
        var(--azul);

    color:
        var(--blanco);

}


.benefits-grid {

    display: grid;

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

}


.benefit {

    min-height: 105px;

    padding:
        22px 20px;

    display: flex;

    align-items: center;

    gap: 14px;

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

}


.benefit:last-child {

    border-right: 0;

}


.benefit-number {

    color:
        #b8c6d2;

    font-weight: 800;

    font-size: 11px;

    letter-spacing: 0.1em;

}


.benefit strong,
.benefit small {

    display: block;

}


.benefit strong {

    font-size: 12px;

}


.benefit small {

    color:
        #b9c8d5;

    font-size: 9px;

    margin-top: 2px;

}


/* ==========================================================
   SECCIONES
========================================================== */

.section {

    padding:
        100px 0;

}


.section-header {

    display: grid;

    grid-template-columns:
        1.2fr
        0.8fr;

    gap: 50px;

    align-items: end;

    margin-bottom: 42px;

}


.section-header h2 {

    font-family:
        Montserrat,
        sans-serif;

    font-size:
        clamp(
            32px,
            4vw,
            50px
        );

    line-height: 1.08;

    letter-spacing:
        -0.035em;

    margin-top:
        13px;

}


.section-header p {

    color:
        var(--texto-secundario);

    margin: 0;

    font-size: 15px;

}


/* ==========================================================
   CATEGORÍAS
========================================================== */

.category-grid {

    display: grid;

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

    gap: 16px;

}


.category-card {

    position: relative;

    min-height: 295px;

    padding: 25px;

    border:
        1px solid
        var(--borde);

    background:
        var(--blanco);

    border-radius:
        var(--radio);

    transition:
        0.25s ease;

    overflow: hidden;

}


.category-card:hover {

    transform:
        translateY(-5px);

    border-color:
        #a9bdcf;

    box-shadow:
        var(--sombra);

}


.category-card.featured {

    background:
        linear-gradient(
            150deg,
            #f1f6fa,
            #ffffff
        );

    border-color:
        #c4d5e3;

}


.category-card.special {

    background:
        var(--azul);

    color:
        var(--blanco);

    border-color:
        var(--azul);

}


.category-number {

    position: absolute;

    top: 19px;

    right: 21px;

    color:
        #b4bec6;

    font-size: 10px;

    font-weight: 800;

    letter-spacing:
        0.1em;

}


.category-card.special
.category-number {

    color:
        #8da7bc;

}


.category-icon {

    width: 50px;

    height: 50px;

    display: grid;

    place-items: center;

    color:
        var(--azul);

    font-size: 25px;

    font-weight: 700;

    border:
        1px solid
        #d7e0e7;

    border-radius:
        10px;

    margin-bottom: 28px;

    background:
        #f7fafc;

}


.category-card.special
.category-icon {

    color:
        var(--blanco);

    border-color:
        rgba(
            255,
            255,
            255,
            0.2
        );

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

}


.category-card h3 {

    font-size: 17px;

    line-height: 1.25;

    margin-bottom: 10px;

}


.category-card p {

    color:
        var(--texto-secundario);

    font-size: 12px;

    line-height: 1.55;

    margin-bottom: 18px;

}


.category-card.special p {

    color:
        #c8d6e2;

}


.category-card a {

    color:
        var(--azul-claro);

    font-size: 11px;

    font-weight: 800;

}


.category-card.special a {

    color:
        var(--blanco);

}


/* ==========================================================
   SOLUCIONES
========================================================== */

.dark-section {

    padding:
        100px 0;

    color:
        var(--blanco);

    background:
        linear-gradient(
            135deg,
            #061d34,
            #0a416f
        );

}


.section-header.light h2 {

    color:
        var(--blanco);

}


.section-header.light p {

    color:
        #b9c9d7;

}


.section-header.light
.eyebrow {

    color:
        #b9d0e2;

}


.solution-grid {

    display: grid;

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

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-left:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

}


.solution-grid article {

    min-height: 215px;

    padding: 30px;

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

}


.solution-grid article > span {

    color:
        #9fb7ca;

    font-size: 10px;

    font-weight: 800;

}


.solution-grid h3 {

    margin-top:
        34px;

    margin-bottom:
        8px;

    font-size: 18px;

}


.solution-grid p {

    color:
        #b9c9d7;

    font-size: 12px;

}


/* ==========================================================
   ABASTECIMIENTO ESPECIAL
========================================================== */

.special-section {

    padding:
        95px 0;

    background:
        #edf2f5;

}


.special-container {

    display: grid;

    grid-template-columns:
        1.15fr
        0.85fr;

    gap: 70px;

    align-items: center;

}


.special-section h2 {

    font-family:
        Montserrat,
        sans-serif;

    font-size:
        clamp(
            32px,
            4vw,
            50px
        );

    line-height: 1.08;

    letter-spacing:
        -0.035em;

    margin:
        13px 0 20px;

}


.special-section h2 strong {

    color:
        var(--azul);

}


.special-section p {

    color:
        var(--texto-secundario);

    max-width: 620px;

    margin-bottom: 28px;

}


.request-box {

    background:
        var(--blanco);

    padding: 26px;

    border:
        1px solid
        var(--borde);

    border-radius:
        16px;

    box-shadow:
        0 25px 60px
        rgba(
            7,
            35,
            59,
            0.08
        );

}


.request-header {

    display: flex;

    justify-content:
        space-between;

    padding-bottom:
        18px;

    border-bottom:
        1px solid
        var(--borde);

    color:
        var(--azul);

    font-size: 10px;

    font-weight: 800;

    letter-spacing:
        0.12em;

}


.request-header strong {

    color:
        var(--gris);

}


.request-item {

    display: grid;

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

    gap: 10px;

    align-items: center;

    padding:
        16px 0;

    border-bottom:
        1px solid
        #edf0f2;

    font-size: 12px;

}


.request-item:last-child {

    border: 0;

    padding-bottom: 0;

}


.request-item i {

    width: 25px;

    height: 25px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        var(--azul-suave);

    color:
        var(--azul);

    font-style: normal;

    font-weight: 800;

}


.request-item strong {

    font-size: 9px;

    color:
        var(--gris);

}


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

.about-container {

    display: grid;

    grid-template-columns:
        0.9fr
        1.1fr;

    gap: 80px;

    align-items: center;

}


.about-visual {

    min-height: 430px;

    background:
        linear-gradient(
            135deg,
            #e9eff4,
            #f8fafb
        );

    border-radius:
        20px;

    position: relative;

    display: grid;

    place-items: center;

    overflow: hidden;

    border:
        1px solid
        var(--borde);

}


.about-visual::before {

    content: "";

    position: absolute;

    width: 370px;

    height: 370px;

    border:
        1px solid
        rgba(
            6,
            55,
            102,
            0.12
        );

    border-radius: 50%;

}


.about-logo-box {

    width: 250px;

    height: 250px;

    background:
        var(--blanco);

    border-radius:
        20px;

    box-shadow:
        var(--sombra);

    display: grid;

    place-items: center;

    position: relative;

    z-index: 2;

}


.about-logo-box img {

    width: 215px;

    height: 215px;

    object-fit: contain;

}


.about-stamp {

    position: absolute;

    right: 28px;

    bottom: 25px;

    padding:
        10px 13px;

    background:
        var(--azul);

    color:
        var(--blanco);

    font-size: 9px;

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: 0.12em;

}


.about-content h2 {

    font-family:
        Montserrat,
        sans-serif;

    font-size:
        clamp(
            32px,
            4vw,
            50px
        );

    line-height: 1.08;

    letter-spacing:
        -0.035em;

    margin:
        13px 0 20px;

}


.about-content p {

    color:
        var(--texto-secundario);

    font-size: 15px;

    margin-bottom: 15px;

}


.about-points {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 12px;

    margin-top: 28px;

}


.about-points span {

    font-size: 11px;

    font-weight: 700;

    color:
        var(--azul);

}


/* ==========================================================
   PROCESO
========================================================== */

.process-section {

    padding:
        100px 0;

    background:
        var(--fondo);

}


.centered {

    display: block;

    text-align: center;

    max-width: 760px;

    margin:
        0 auto 50px;

}


.centered .eyebrow {

    justify-content: center;

}


.centered p {

    max-width: 600px;

    margin:
        18px auto 0;

}


.process-grid {

    display: grid;

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

}


.process-grid article {

    position: relative;

    padding:
        0 22px;

    text-align: center;

    border-right:
        1px solid
        var(--borde);

}


.process-grid article:last-child {

    border: 0;

}


.process-grid article > strong {

    color:
        #9ca9b3;

    font-size: 10px;

}


.process-icon {

    margin:
        20px auto;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background:
        var(--blanco);

    border:
        1px solid
        #ccd7df;

    color:
        var(--azul);

    font-size: 21px;

    box-shadow:
        0 8px 20px
        rgba(
            6,
            55,
            102,
            0.05
        );

}


.process-grid h3 {

    font-size: 16px;

    margin-bottom: 7px;

}


.process-grid p {

    font-size: 11px;

    color:
        var(--texto-secundario);

}


/* ==========================================================
   COTIZACIÓN
========================================================== */

.quote-section {

    padding:
        100px 0;

    background:
        linear-gradient(
            135deg,
            #071f37,
            #0b4c82
        );

    color:
        var(--blanco);

}


.quote-container {

    display: grid;

    grid-template-columns:
        0.8fr
        1.2fr;

    gap: 70px;

    align-items: start;

}


.quote-content h2 {

    font-family:
        Montserrat,
        sans-serif;

    font-size:
        50px;

    line-height: 1.08;

    letter-spacing:
        -0.035em;

    margin:
        13px 0 18px;

}


.quote-content > p {

    color:
        #bdcbd7;

    max-width: 500px;

}


.contact-info {

    margin-top: 38px;

    display: grid;

    gap: 18px;

}


.contact-info > div {

    display: flex;

    align-items: center;

    gap: 12px;

}


.contact-info > div > span {

    width: 38px;

    height: 38px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.2
        );

    border-radius: 8px;

}


.contact-info small,
.contact-info strong {

    display: block;

}


.contact-info small {

    color:
        #9eb5c7;

    font-size: 9px;

}


.contact-info strong {

    font-size: 11px;

}


/* ==========================================================
   FORMULARIO
========================================================== */

.quote-form {

    background:
        var(--blanco);

    color:
        var(--texto);

    border-radius:
        16px;

    padding:
        30px;

    box-shadow:
        0 25px 70px
        rgba(
            0,
            0,
            0,
            0.20
        );

}


.form-row {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 15px;

}


.quote-form label {

    display: block;

    color:
        #44515e;

    font-size: 11px;

    font-weight: 700;

    margin-bottom: 16px;

}


.quote-form input,
.quote-form select,
.quote-form textarea {

    display: block;

    width: 100%;

    margin-top: 7px;

    border:
        1px solid
        #d5dde4;

    border-radius:
        7px;

    padding:
        12px 13px;

    outline: none;

    background:
        #fbfcfd;

    color:
        var(--texto);

}


.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {

    border-color:
        var(--azul);

    box-shadow:
        0 0 0 3px
        rgba(
            6,
            55,
            102,
            0.08
        );

}


.quote-form textarea {

    resize: vertical;

    min-height: 125px;

}


.file-field input {

    padding: 10px;

}


.file-field small {

    display: block;

    margin-top: 5px;

    color:
        #8a949d;

    font-weight: 400;

}


.checkbox {

    display: flex !important;

    gap: 8px;

    align-items:
        flex-start;

    font-weight:
        500 !important;

    color:
        #68747e !important;

}


.checkbox input {

    width: auto;

    margin-top: 2px;

}


.full-button {

    width: 100%;

    border: 0;

}


.form-message {

    min-height: 20px;

    text-align: center;

    color:
        var(--azul);

    font-size: 11px;

    font-weight: 700;

    margin-top: 12px;

}


/* ==========================================================
   FOOTER
========================================================== */

footer {

    background:
        #061a2d;

    color:
        var(--blanco);

    padding-top:
        65px;

}


.footer-container {

    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1.2fr;

    gap: 45px;

    padding-bottom:
        50px;

}


.footer-brand img {

    width: 210px;

    height: 100px;

    object-fit: contain;

    background:
        var(--blanco);

    border-radius:
        8px;

    padding: 5px;

}


.footer-brand p {

    color:
        #9eb0bf;

    font-size: 11px;

}


.footer-column h4 {

    margin-bottom:
        15px;

    font-size: 11px;

    text-transform:
        uppercase;

    letter-spacing:
        0.1em;

    color:
        #c7d3dd;

}


.footer-column a {

    display: block;

    color:
        #91a5b5;

    font-size: 11px;

    margin:
        9px 0;

}


.footer-column a:hover {

    color:
        var(--blanco);

}


/* PARTE INFERIOR */

.footer-bottom {

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    min-height: 70px;

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 20px;

    color:
        #718796;

    font-size: 9px;

}


/* ==========================================================
   WHATSAPP
========================================================== */

.whatsapp-button {

    position: fixed;

    right: 22px;

    bottom: 22px;

    width: 55px;

    height: 55px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background:
        #128c7e;

    color:
        var(--blanco);

    font-size: 23px;

    box-shadow:
        0 10px 25px
        rgba(
            0,
            0,
            0,
            0.2
        );

    z-index: 900;

}


.whatsapp-button:hover {

    transform:
        translateY(-3px);

}


/* ==========================================================
   RESPONSIVE
========================================================== */


/* TABLET */

@media (max-width: 1050px) {


    .main-nav {

        gap: 13px;

    }


    .category-grid {

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

    }


    .hero-container {

        grid-template-columns:
            1fr;

    }


    .hero-visual {

        max-width: 650px;

        width: 100%;

        margin: auto;

    }


    .solution-grid {

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

    }


}


/* ==========================================================
   TABLET PEQUEÑA
========================================================== */

@media (max-width: 820px) {


    .menu-toggle {

        display: block;

    }


    .main-nav {

        display: none;

        position: absolute;

        left: 20px;

        right: 20px;

        top: 82px;

        padding: 18px;

        background:
            var(--blanco);

        border:
            1px solid
            var(--borde);

        border-radius:
            0 0 12px 12px;

        box-shadow:
            var(--sombra);

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .main-nav.open {

        display: flex;

    }


    .main-nav a {

        padding: 8px 5px;

    }


    .nav-button {

        text-align: center;

        margin-top: 5px;

    }


    .benefits-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .benefit:nth-child(2) {

        border-right: 0;

    }


    .benefit:nth-child(3),
    .benefit:nth-child(4) {

        border-top:
            1px solid
            rgba(
                255,
                255,
                255,
                0.12
            );

    }


    .category-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .section-header,
    .special-container,
    .quote-container,
    .about-container {

        grid-template-columns:
            1fr;

    }


    .process-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            25px 0;

    }


    .footer-container {

        grid-template-columns:
            1fr 1fr;

    }

}


/* ==========================================================
   CELULAR
========================================================== */

@media (max-width: 560px) {


    .container {

        width:
            min(
                var(--ancho),
                calc(100% - 28px)
            );

    }


    .brand img {

        width: 145px;

        height: 66px;

    }


    .hero-container {

        padding:
            45px 0;

    }


    .hero h1 {

        font-size: 40px;

    }


    .hero-content > p {

        font-size: 15px;

    }


    .hero-stats {

        gap: 13px;

        justify-content:
            space-between;

    }


    .hero-stat span {

        font-size: 8px;

    }


    .industrial-card {

        height: 350px;

    }


    .floating-card {

        left: 0;

    }


    .benefits-grid {

        grid-template-columns:
            1fr;

    }


    .benefit {

        border-right: 0;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                0.12
            );

    }


    .category-grid,
    .solution-grid {

        grid-template-columns:
            1fr;

    }


    .section {

        padding:
            70px 0;

    }


    .section-header h2,
    .special-section h2,
    .about-content h2,
    .quote-content h2 {

        font-size:
            34px;

    }


    .form-row {

        grid-template-columns:
            1fr;

        gap: 0;

    }


    .about-points {

        grid-template-columns:
            1fr;

    }


    .process-grid {

        grid-template-columns:
            1fr;

    }


    .process-grid article {

        border-right: 0;

        border-bottom:
            1px solid
            var(--borde);

        padding:
            20px 0 !important;

    }


    .footer-container {

        grid-template-columns:
            1fr;

        gap: 28px;

    }


    .footer-bottom {

        flex-direction:
            column;

        justify-content:
            center;

        text-align:
            center;

        padding:
            20px 0;

    }

}