/* ==========================================================
   TRANSPORTES ZAI
   SOLUCIONES LOGÍSTICAS

   STYLE.CSS COMPLETO Y OPTIMIZADO

   Compatible con el último index.html.

   DISEÑO:
   - Azul corporativo
   - Verde institucional
   - Blanco y grises suaves

   OPTIMIZACIONES:
   - Monitores grandes
   - Laptops
   - Tabletas
   - Celulares
   - Celulares pequeños

   FUNCIONALIDADES VISUALES:
   - Menú responsive
   - Portada corporativa
   - Fondo fotográfico
   - Animaciones al desplazarse
   - Flotilla
   - Bodega
   - Ventajas con nuevos íconos
   - Google Maps
   - Cotización por WhatsApp
   - Pie de página
========================================================== */


/* ==========================================================
   01. VARIABLES CORPORATIVAS
========================================================== */

:root {
    --azul-oscuro: #091b30;
    --azul-profundo: #0d2742;
    --azul: #12345a;
    --azul-medio: #1b456b;
    --azul-claro: #eaf2f8;

    --verde: #178a50;
    --verde-oscuro: #106b3d;
    --verde-claro: #63d39a;
    --verde-suave: #e9f7ef;

    --blanco: #ffffff;

    --gris-fondo: #f4f7fa;
    --gris-claro: #edf2f6;
    --gris-borde: #dfe7ee;

    --texto: #334155;
    --texto-suave: #64748b;

    --sombra-suave:
        0 10px 35px rgba(9, 27, 48, .06);

    --sombra-media:
        0 18px 45px rgba(9, 27, 48, .12);

    --sombra-fuerte:
        0 25px 65px rgba(9, 27, 48, .18);

    --radio: 14px;
    --transicion: .3s ease;

    --imagen-fondo:
        url("img/Camion ZAI al Atardecer.jpg");
}


/* ==========================================================
   02. REINICIO Y CONFIGURACIÓN GENERAL
========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 115px;
}

body {
    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    color: var(--texto);
    background: var(--blanco);

    line-height: 1.7;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

svg {
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid var(--verde-claro);
    outline-offset: 3px;
}

.contenedor {
    width: min(1200px, 88%);
    margin-inline: auto;
}

.seccion {
    position: relative;
    padding: 105px 0;
}

.subtitulo {
    display: inline-block;

    margin-bottom: 15px;

    color: var(--verde);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.seccion h2 {
    color: var(--azul-oscuro);

    font-size: clamp(30px, 3.2vw, 46px);
    font-weight: 800;

    line-height: 1.2;
    letter-spacing: -1.2px;

    margin-bottom: 25px;
}

.seccion h2 span {
    color: var(--verde);
}

.seccion p {
    font-size: 16px;
    line-height: 1.9;
}

.seccion-encabezado {
    max-width: 780px;
    margin-bottom: 55px;
}

.seccion-encabezado p {
    color: var(--texto-suave);
}

.centrado {
    text-align: center;
    margin-inline: auto;
}


/* ==========================================================
   03. SEPARADORES
========================================================== */

.franja-valores,
.seccion-nosotros,
.seccion-flota,
.seccion-proceso,
.seccion-ubicacion,
.seccion-contacto {
    border-top:
        1px solid rgba(18, 52, 90, .10);
}

.franja-corporativa,
.seccion-bodega,
.seccion-ventajas {
    border-top:
        1px solid rgba(255, 255, 255, .10);
}

.seccion-nosotros::before,
.seccion-flota::before,
.seccion-proceso::before,
.seccion-ubicacion::before,
.seccion-contacto::before {
    content: "";

    position: absolute;
    z-index: 2;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 80px;
    height: 4px;

    background: linear-gradient(
        90deg,
        var(--azul),
        var(--verde),
        var(--verde-claro)
    );

    border-radius: 0 0 5px 5px;
}


/* ==========================================================
   04. BOTONES
========================================================== */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    min-height: 52px;
    padding: 14px 27px;

    border: 1px solid transparent;
    border-radius: 7px;

    font-size: 14px;
    font-weight: 700;
    text-align: center;

    transition:
        background var(--transicion),
        color var(--transicion),
        transform var(--transicion),
        box-shadow var(--transicion);
}

.boton span {
    font-size: 19px;
    line-height: 1;
}

.boton:hover {
    transform: translateY(-3px);
}

.boton-verde {
    background: var(--verde);
    color: var(--blanco);

    box-shadow:
        0 8px 20px rgba(23, 138, 80, .17);
}

.boton-verde:hover {
    background: var(--verde-oscuro);

    box-shadow:
        0 12px 25px rgba(23, 138, 80, .25);
}

.boton-contorno {
    background: transparent;
    color: var(--blanco);

    border-color:
        rgba(255, 255, 255, .45);
}

.boton-contorno:hover {
    background: rgba(255, 255, 255, .12);
    border-color: var(--blanco);
}


/* ==========================================================
   05. BARRA SUPERIOR
========================================================== */

.barra-superior {
    background: var(--azul-oscuro);
    color: #d2e2ed;

    border-bottom:
        1px solid rgba(255, 255, 255, .07);
}

.barra-superior-contenido {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
    min-height: 39px;

    font-size: 12px;
}

.barra-ubicacion {
    font-weight: 500;
    letter-spacing: .2px;
}

.barra-contactos {
    display: flex;
    align-items: center;
    gap: 25px;
}

.barra-contactos a {
    transition: color var(--transicion);
}

.barra-contactos a:hover {
    color: var(--verde-claro);
}


/* ==========================================================
   06. ENCABEZADO Y NAVEGACIÓN
========================================================== */

.encabezado {
    position: sticky;
    top: 0;
    z-index: 1000;

    background:
        rgba(255, 255, 255, .98);

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

    box-shadow:
        0 5px 22px rgba(9, 27, 48, .07);
}

.encabezado-contenido {
    min-height: 94px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo img {
    width: 105px;
    height: auto;

    transition:
        transform var(--transicion);
}

.logo:hover img {
    transform: scale(1.04);
}

.navegacion {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 25px;
}

.nav-link {
    position: relative;

    color: var(--azul);

    font-size: 13px;
    font-weight: 650;

    white-space: nowrap;

    transition:
        color var(--transicion);
}

.nav-link:hover,
.nav-link.activo {
    color: var(--verde);
}

.nav-link:not(.boton-menu)::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -8px;

    width: 0;
    height: 3px;

    background: var(--verde);
    border-radius: 5px;

    transition:
        width var(--transicion);
}

.nav-link:not(.boton-menu):hover::after,
.nav-link.activo:not(.boton-menu)::after {
    width: 100%;
}

.navegacion .boton-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 45px;
    padding: 12px 20px;

    background: var(--verde);
    color: var(--blanco);

    border-radius: 7px;

    box-shadow:
        0 6px 15px rgba(23, 138, 80, .15);
}

.navegacion .boton-menu:hover,
.navegacion .boton-menu.activo {
    background: var(--verde-oscuro);
    color: var(--blanco);
}

.menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

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

    border-radius: 8px;
    background: var(--blanco);

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;
}

.menu-toggle span {
    width: 22px;
    height: 2px;

    background: var(--azul);
    border-radius: 3px;

    transition: var(--transicion);
}


/* ==========================================================
   07. PORTADA PRINCIPAL
========================================================== */

.portada {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: 700px;

    display: flex;
    align-items: center;

    padding: 90px 0;

    background: linear-gradient(
        115deg,
        #091b30 0%,
        #102f50 45%,
        #17466a 74%,
        #126343 100%
    );
}

.portada::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        );

    background-size: 65px 65px;

    pointer-events: none;
}

.portada::after {
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: linear-gradient(
        90deg,
        var(--verde),
        var(--verde-claro),
        #44a9d1
    );
}

.portada-fondo {
    position: absolute;
    inset: 0;

    overflow: hidden;
    pointer-events: none;
}

.forma {
    position: absolute;
    border-radius: 50%;
}

.forma-uno {
    width: 550px;
    height: 550px;

    right: -160px;
    top: -250px;

    border:
        80px solid rgba(255, 255, 255, .035);
}

.forma-dos {
    width: 350px;
    height: 350px;

    right: 16%;
    bottom: -260px;

    background:
        rgba(41, 202, 114, .07);
}

.forma-tres {
    width: 260px;
    height: 260px;

    left: -160px;
    bottom: 30px;

    border:
        45px solid rgba(76, 156, 211, .045);
}

.portada-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(0, .75fr);

    align-items: center;

    gap: 65px;
}

.portada-contenido {
    min-width: 0;
    max-width: 760px;

    animation:
        entradaSuave .85s ease both;
}

.etiqueta-portada {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    color: #8ae5b3;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;

    margin-bottom: 28px;
}

.etiqueta-linea {
    display: inline-block;

    width: 28px;
    height: 3px;

    background: var(--verde-claro);
    border-radius: 5px;
}

.etiqueta-separador {
    color: rgba(255, 255, 255, .55);
}

.portada h1 {
    color: var(--blanco);

    font-size: clamp(40px, 4.5vw, 69px);
    font-weight: 800;

    line-height: 1.13;
    letter-spacing: -2px;

    margin-bottom: 28px;
}

.portada h1 span {
    display: block;
    color: var(--verde-claro);
}

.portada-descripcion {
    max-width: 600px;

    color: #d9e6f0;

    font-size: 18px;
    line-height: 1.9;

    margin-bottom: 35px;
}

.portada-botones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 16px;
}

.portada-inferior {
    display: flex;
    align-items: center;

    gap: 12px;
    margin-top: 55px;

    color: #bfd2df;
    font-size: 12px;
}

.indicador-verde {
    display: inline-block;
    flex-shrink: 0;

    width: 9px;
    height: 9px;

    background: var(--verde-claro);
    border-radius: 50%;

    box-shadow:
        0 0 15px rgba(99, 211, 154, .55);
}


/* ==========================================================
   08. LOGOTIPO DE LA PORTADA
========================================================== */

.portada-visual {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    padding: 25px 0;

    animation:
        entradaSuave 1s ease .15s both;
}

.logo-marco-exterior {
    width: 100%;
    max-width: 430px;

    padding: 12px;

    border-radius: 24px;

    border:
        1px solid rgba(255, 255, 255, .20);

    background:
        rgba(255, 255, 255, .06);

    box-shadow: var(--sombra-fuerte);

    transform: rotate(1deg);

    transition:
        transform .4s ease;
}

.logo-marco-exterior:hover {
    transform:
        rotate(0deg) translateY(-5px);
}

.logo-tarjeta {
    overflow: hidden;

    padding: 23px 25px 25px;

    border-radius: 16px;
    background: var(--blanco);
}

.logo-tarjeta-superior {
    padding-bottom: 15px;

    border-bottom:
        1px solid #e5edf2;

    color: var(--azul-medio);

    text-align: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.logo-imagen-contenedor {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 300px;
    padding: 12px 0;

    background: var(--blanco);
}

.logo-principal {
    width: 100%;
    max-width: 350px;

    height: auto;
    object-fit: contain;
}

.logo-tarjeta-inferior {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding-top: 16px;

    border-top:
        1px solid #e5edf2;

    color: var(--azul-medio);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.punto-verde {
    width: 8px;
    height: 8px;

    background: var(--verde);
    border-radius: 50%;
}

.elemento-flotante {
    position: absolute;
    z-index: 3;

    padding: 10px 18px;

    background: var(--blanco);
    color: var(--azul);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;

    border-radius: 7px;

    box-shadow: var(--sombra-media);
}

.elemento-flotante-uno {
    top: 45px;
    right: -15px;
}

.elemento-flotante-dos {
    bottom: 65px;
    left: -25px;

    background: var(--verde);
    color: var(--blanco);
}


/* ==========================================================
   09. VALORES CORPORATIVOS
========================================================== */

.franja-valores {
    padding: 35px 0;

    background: var(--blanco);

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

.valores-grid {
    display: grid;

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

    gap: 25px;
}

.valor-item {
    display: flex;
    align-items: center;

    gap: 15px;

    min-width: 0;
    padding: 12px 15px;

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

.valor-item:last-child {
    border-right: none;
}

.valor-numero {
    color: var(--verde);

    font-size: 28px;
    font-weight: 800;
}

.valor-item h3 {
    color: var(--azul-oscuro);

    font-size: 15px;
    font-weight: 750;

    margin-bottom: 3px;
}

.valor-item p {
    color: var(--texto-suave);

    font-size: 12px;
    line-height: 1.5;
}


/* ==========================================================
   10. NOSOTROS
========================================================== */

.seccion-nosotros {
    background-color: #f4f8fb;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .70),
            rgba(244, 248, 251, .76)
        ),
        var(--imagen-fondo);

    background-size: cover;
    background-position: center 48%;
    background-repeat: no-repeat;
}

.nosotros-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: 95px;
}

.nosotros-visual {
    position: relative;
    min-width: 0;
}

.nosotros-panel {
    position: relative;
    z-index: 2;

    min-height: 450px;
    padding: 35px;

    background: linear-gradient(
        135deg,
        #102b49,
        #17496d,
        #177649
    );

    border-radius: 18px;
    box-shadow: var(--sombra-fuerte);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.nosotros-panel-etiqueta {
    color: #9beac0;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.nosotros-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 275px;

    margin: 25px auto;
    padding: 22px;

    background: var(--blanco);
    border-radius: 16px;

    box-shadow: var(--sombra-media);
}

.nosotros-logo img {
    width: 100%;
    height: auto;
}

.nosotros-panel-pie {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 10px;
    padding-top: 20px;

    border-top:
        1px solid rgba(255, 255, 255, .18);
}

.nosotros-panel-pie span {
    color: #d7e9f2;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.nosotros-detalle {
    position: absolute;

    width: 130px;
    height: 130px;

    right: -25px;
    bottom: -25px;

    border-radius: 17px;

    background: var(--verde-claro);
    opacity: .22;
}

.nosotros-contenido h2 {
    max-width: 600px;
}

.nosotros-contenido > p {
    margin-bottom: 20px;
}

.nosotros-lista {
    display: grid;

    gap: 15px;
    margin-top: 30px;
}

.nosotros-lista-item {
    display: flex;
    align-items: center;

    gap: 13px;

    color: var(--azul-oscuro);

    font-size: 14px;
    font-weight: 600;
}

.check-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 27px;
    height: 27px;

    border-radius: 50%;

    background: var(--verde-suave);
    color: var(--verde);

    font-weight: 800;
}


/* ==========================================================
   11. FRANJA CORPORATIVA
========================================================== */

.franja-corporativa {
    position: relative;
    overflow: hidden;

    padding: 80px 0;

    background: linear-gradient(
        115deg,
        #0b2642 0%,
        #124362 55%,
        #157247 100%
    );

    color: var(--blanco);
}

.franja-corporativa::after {
    content: "";

    position: absolute;

    right: -140px;
    top: -130px;

    width: 360px;
    height: 360px;

    border:
        60px solid rgba(255, 255, 255, .04);

    border-radius: 50%;
    pointer-events: none;
}

.franja-corporativa-grid {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 45px;
}

.franja-etiqueta {
    color: #9beac0;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.franja-corporativa h2 {
    font-size: clamp(29px, 3vw, 43px);
    line-height: 1.25;

    margin: 15px 0;
}

.franja-corporativa h2 span {
    display: block;
    color: var(--verde-claro);
}

.franja-corporativa p {
    max-width: 620px;

    color: #d5e4ec;
    font-size: 15px;
}

.franja-sello {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 240px;
    min-height: 190px;

    padding: 25px;

    border:
        1px solid rgba(255, 255, 255, .22);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, .07);

    box-shadow:
        0 10px 35px rgba(0, 0, 0, .10);
}

.franja-sello span {
    display: block;
    width: 100%;

    padding: 8px;

    color: var(--blanco);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-align: center;
}

.franja-sello span:nth-child(2) {
    color: var(--verde-claro);

    border-block:
        1px solid rgba(255, 255, 255, .15);
}


/* ==========================================================
   12. FLOTA - ENCABEZADO
========================================================== */

.seccion-flota {
    background-color: #edf4f8;

    background-image:
        linear-gradient(
            rgba(237, 244, 248, .69),
            rgba(234, 242, 247, .76)
        ),
        var(--imagen-fondo);

    background-size: cover;
    background-position: center 55%;
    background-repeat: no-repeat;
}

.flota-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 45px;
    margin-bottom: 38px;
}

.flota-encabezado-texto {
    flex: 1;

    min-width: 0;
    max-width: 850px;
}

.flota-etiqueta-superior {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    color: var(--verde);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;

    margin-bottom: 20px;
}

.flota-linea-verde {
    display: inline-block;

    width: 32px;
    height: 3px;

    background: var(--verde);
    border-radius: 5px;
}

.flota-encabezado h2 {
    color: var(--azul-oscuro);

    font-size: clamp(34px, 3.5vw, 49px);
    font-weight: 850;

    line-height: 1.18;
    letter-spacing: -1.5px;

    max-width: 780px;
    margin-bottom: 22px;
}

.flota-encabezado h2 span {
    display: block;
    color: var(--verde);
}

.flota-encabezado-texto > p {
    max-width: 680px;

    color: var(--texto-suave);

    font-size: 16px;
    line-height: 1.85;

    margin-bottom: 12px;
}

.flota-encabezado-sello {
    display: flex;
    align-items: center;

    gap: 15px;
    flex-shrink: 0;

    padding: 20px 24px;

    background: var(--azul-oscuro);
    color: var(--blanco);

    border-radius: 12px;
    box-shadow: var(--sombra-media);
}

.flota-sello-icono {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

    background:
        rgba(99, 211, 154, .13);

    color: var(--verde-claro);

    border-radius: 11px;

    font-size: 30px;
    font-weight: 700;
}

.flota-encabezado-sello > span:last-child {
    display: flex;
    flex-direction: column;

    color: #c4d7e5;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
}

.flota-encabezado-sello strong {
    color: var(--blanco);

    font-size: 15px;
    font-weight: 850;
    letter-spacing: 1.5px;
}


/* ==========================================================
   13. FLOTA - INDICADORES
========================================================== */

.flota-indicadores {
    display: grid;

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

    gap: 20px;
    margin-bottom: 35px;
}

.flota-indicador {
    display: flex;
    align-items: center;

    gap: 17px;

    min-width: 0;
    padding: 22px 24px;

    background: var(--blanco);

    border: 1px solid #dbe7ee;
    border-radius: 12px;

    box-shadow: var(--sombra-suave);

    transition:
        border-color var(--transicion),
        transform var(--transicion),
        box-shadow var(--transicion);
}

.flota-indicador:hover {
    transform: translateY(-4px);

    border-color: #b8dec9;
    box-shadow: var(--sombra-media);
}

.indicador-icono {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 54px;
    height: 54px;

    background: var(--verde-suave);
    color: var(--verde);

    border-radius: 12px;
}

.flota-indicador > div:last-child {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.flota-indicador strong {
    color: var(--azul-oscuro);

    font-size: 14px;
    font-weight: 800;

    line-height: 1.4;
    margin-bottom: 4px;
}

.flota-indicador span {
    color: var(--texto-suave);

    font-size: 12px;
    line-height: 1.5;
}


/* ==========================================================
   14. FLOTA - TARJETAS DE UNIDADES
========================================================== */

.flota-grid {
    display: grid;

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

    gap: 32px;
}

.unidad-card {
    min-width: 0;

    background: var(--blanco);

    border: 1px solid #dce6ed;
    border-radius: 17px;

    overflow: hidden;

    box-shadow: var(--sombra-suave);

    transition:
        box-shadow var(--transicion),
        border-color var(--transicion);
}

.unidad-card:hover {
    border-color: #c2dbd0;
    box-shadow: var(--sombra-fuerte);
}

.unidad-premium {
    display: flex;
    flex-direction: column;

    position: relative;
}

.unidad-premium::before {
    content: "";

    position: absolute;
    z-index: 5;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: linear-gradient(
        90deg,
        var(--verde),
        var(--verde-claro),
        #5ab0d8
    );
}

.unidad-imagen {
    position: relative;

    height: 315px;
    overflow: hidden;

    background: #dce5eb;
}

.unidad-imagen-premium {
    height: 325px;
    isolation: isolate;
}

.unidad-imagen-premium img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform .6s ease;
}

.unidad-premium:hover
.unidad-imagen-premium img {
    transform: scale(1.045);
}

.unidad-imagen-degradado {
    position: absolute;
    z-index: 1;

    inset: 0;

    background: linear-gradient(
        180deg,
        rgba(5, 20, 35, .38) 0%,
        transparent 30%,
        transparent 55%,
        rgba(5, 20, 35, .78) 100%
    );

    pointer-events: none;
}

.unidad-numero,
.unidad-imagen-premium .unidad-etiqueta {
    position: absolute;
    z-index: 3;

    top: 22px;

    display: inline-flex;
    align-items: center;

    padding: 9px 14px;

    color: var(--blanco);

    border-radius: 5px;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.2px;
}

.unidad-numero {
    left: 22px;

    background:
        rgba(9, 27, 48, .88);

    border:
        1px solid rgba(255, 255, 255, .25);
}

.unidad-imagen-premium .unidad-etiqueta {
    left: auto;
    right: 22px;

    background: var(--verde);

    box-shadow:
        0 6px 18px rgba(0, 0, 0, .15);
}

.unidad-imagen-pie {
    position: absolute;
    z-index: 3;

    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 30px 25px 22px;
}

.unidad-imagen-clase {
    color: var(--blanco);

    font-size: 12px;
    font-weight: 850;
    letter-spacing: 1.6px;
}

.unidad-imagen-modelo {
    flex-shrink: 0;

    color: #a0edc2;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.unidad-contenido {
    padding: 35px;
}

.unidad-contenido-premium {
    display: flex;
    flex-direction: column;
    flex: 1;

    padding: 34px;
}

.unidad-titulo-fila {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
    margin-bottom: 20px;
}

.unidad-titulo-fila > div {
    min-width: 0;
}

.unidad-categoria {
    display: inline-block;

    color: var(--verde);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;

    margin-bottom: 12px;
}

.unidad-contenido-premium h3 {
    color: var(--azul-oscuro);

    font-size: clamp(23px, 2vw, 28px);
    font-weight: 850;

    letter-spacing: -.6px;
    line-height: 1.3;
}

.unidad-titulo-simbolo {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 44px;
    height: 44px;

    background: var(--verde-suave);
    color: var(--verde);

    border-radius: 11px;
    font-size: 25px;

    transition: var(--transicion);
}

.unidad-premium:hover .unidad-titulo-simbolo {
    background: var(--verde);
    color: var(--blanco);
}

.unidad-descripcion {
    color: var(--texto-suave);

    font-size: 14px !important;
    line-height: 1.85;

    min-height: 80px;
    margin-bottom: 30px;
}

.unidad-especificaciones {
    margin-bottom: 28px;
}

.unidad-especificaciones h4 {
    color: var(--azul-oscuro);

    font-size: 14px;
    font-weight: 850;

    margin-bottom: 18px;
    padding-bottom: 13px;

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

.unidad-specs-grid {
    display: grid;

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

    gap: 13px;
}

.unidad-spec {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    min-width: 0;
    min-height: 95px;

    padding: 16px 13px;

    background: #f3f7fa;

    border: 1px solid #e2ebf1;
    border-radius: 10px;

    transition: var(--transicion);
}

.unidad-spec:hover {
    background: #eaf7f0;

    border-color: #bde2cb;

    transform: translateY(-2px);
}

.spec-icono {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 37px;
    height: 37px;

    background: var(--blanco);
    color: var(--verde);

    border: 1px solid #dcebe3;
    border-radius: 8px;
}

.spec-info {
    display: flex;
    flex-direction: column;

    min-width: 0;
    gap: 4px;
}

.spec-info small {
    color: var(--texto-suave);

    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.spec-info strong {
    color: var(--azul-oscuro);

    font-size: 13px;
    font-weight: 850;
    line-height: 1.4;

    overflow-wrap: anywhere;
}

.unidad-aplicaciones {
    margin-top: auto;

    padding-top: 5px;
    padding-bottom: 25px;
}

.unidad-aplicaciones-titulo {
    display: block;

    color: var(--azul-medio);

    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.5px;

    margin-bottom: 15px;
}

.unidad-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;
}

.unidad-tags span {
    display: inline-flex;
    align-items: center;

    min-height: 29px;
    padding: 6px 11px;

    background: var(--verde-suave);
    color: var(--verde-oscuro);

    border: 1px solid #d0ead9;
    border-radius: 5px;

    font-size: 11px;
    font-weight: 750;
    line-height: 1.4;
}

.unidad-footer-premium {
    display: flex;
    align-items: center;

    gap: 12px;
    padding-top: 19px;

    border-top:
        1px solid var(--gris-borde);
}

.unidad-footer-linea {
    width: 26px;
    height: 3px;

    background: var(--verde);
    border-radius: 5px;
}

.unidad-footer-premium > span:nth-child(2) {
    color: var(--azul);

    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.5px;
}

.unidad-footer-punto {
    width: 7px;
    height: 7px;

    margin-left: auto;

    background: var(--verde);
    border-radius: 50%;
}

.flota-nota-premium {
    display: flex;
    align-items: flex-start;

    gap: 20px;
    margin-top: 42px;

    padding: 27px 30px;

    background: linear-gradient(
        110deg,
        #e1eef6,
        #edf8f1
    );

    border: 1px solid #d0e3ed;
    border-left: 5px solid var(--verde);
    border-radius: 12px;

    box-shadow: var(--sombra-suave);
}

.flota-nota-icono {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 40px;
    height: 40px;

    background: var(--azul);
    color: var(--blanco);

    border-radius: 50%;

    font-size: 20px;
    font-weight: 800;
}

.flota-nota-contenido strong {
    display: block;

    color: var(--azul-oscuro);

    font-size: 16px;
    font-weight: 850;

    margin-bottom: 7px;
}

.flota-nota-contenido p {
    color: var(--azul-medio);

    font-size: 13px;
    line-height: 1.8;
}


/* ==========================================================
   15. BODEGA LOGÍSTICA
========================================================== */

.seccion-bodega {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background: linear-gradient(
        130deg,
        #091b30 0%,
        #103656 50%,
        #116244 100%
    );

    color: var(--blanco);
}

.seccion-bodega::before,
.seccion-bodega::after {
    content: "";

    position: absolute;
    border-radius: 50%;

    pointer-events: none;
}

.seccion-bodega::before {
    width: 500px;
    height: 500px;

    right: -180px;
    top: -230px;

    border:
        75px solid rgba(255, 255, 255, .035);
}

.seccion-bodega::after {
    width: 320px;
    height: 320px;

    left: -190px;
    bottom: -170px;

    background:
        rgba(52, 204, 125, .07);
}

.bodega-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: 65px;
}

.bodega-contenido {
    min-width: 0;
}

.bodega-contenido .subtitulo {
    color: #91e9b9;
}

.bodega-contenido h2 {
    color: var(--blanco);

    font-size: clamp(33px, 3.5vw, 48px);
    margin-bottom: 28px;
}

.bodega-contenido h2 span {
    display: block;
    color: var(--verde-claro);
}

.bodega-contenido > p {
    color: #d3e2ed;

    font-size: 15px;
    margin-bottom: 20px;
}

.bodega-destacado {
    display: flex;
    align-items: center;

    gap: 22px;

    max-width: 430px;
    margin-top: 35px;

    padding: 24px;

    background:
        rgba(255, 255, 255, .08);

    border:
        1px solid rgba(255, 255, 255, .16);

    border-left:
        4px solid var(--verde-claro);

    border-radius: 12px;
}

.bodega-destacado-numero {
    flex-shrink: 0;

    color: var(--verde-claro);

    font-size: 75px;
    font-weight: 850;
    line-height: 1;
}

.bodega-destacado strong {
    display: block;

    color: var(--blanco);

    font-size: 16px;
    margin-bottom: 5px;
}

.bodega-destacado p {
    color: #bad0de;

    font-size: 12px;
    line-height: 1.6;
}

.bodega-servicios {
    min-width: 0;
    padding: 34px;

    background:
        rgba(255, 255, 255, .075);

    border:
        1px solid rgba(255, 255, 255, .18);

    border-radius: 18px;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, .12);
}

.bodega-servicios-encabezado {
    padding-bottom: 22px;
    margin-bottom: 24px;

    border-bottom:
        1px solid rgba(255, 255, 255, .14);
}

.bodega-servicios-encabezado > span {
    color: #91e9b9;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.bodega-servicios-encabezado h3 {
    color: var(--blanco);

    font-size: 25px;
    font-weight: 800;
    line-height: 1.3;

    margin-top: 12px;
}

.bodega-servicios-grid {
    display: grid;

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

    gap: 17px;
}

.bodega-servicio {
    min-width: 0;
    min-height: 195px;

    padding: 24px 20px;

    background:
        rgba(255, 255, 255, .08);

    border:
        1px solid rgba(255, 255, 255, .12);

    border-radius: 11px;
    transition: var(--transicion);
}

.bodega-servicio:hover {
    background:
        rgba(255, 255, 255, .14);

    transform: translateY(-4px);
}

.bodega-servicio-icono {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    margin-bottom: 18px;

    background:
        rgba(99, 211, 154, .15);

    color: var(--verde-claro);

    border-radius: 9px;

    font-size: 17px;
    font-weight: 800;
}

.bodega-servicio h4 {
    color: var(--blanco);

    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;

    margin-bottom: 10px;
}

.bodega-servicio p {
    color: #cadce8;

    font-size: 12px;
    line-height: 1.75;
}

.bodega-nota {
    position: relative;
    z-index: 2;

    margin-top: 45px;
    padding: 19px 25px;

    background:
        rgba(255, 255, 255, .055);

    border-left:
        3px solid var(--verde-claro);

    border-radius: 7px;
}

.bodega-nota p {
    color: #d2e6ef;

    font-size: 13px;
    line-height: 1.8;
}


/* ==========================================================
   16. POR QUÉ ELEGIRNOS

   DISEÑO CORREGIDO DE LOS CUATRO ÍCONOS

   Cambios:
   - Recuadros más pequeños
   - Colores menos intensos
   - Sombras discretas
   - Bordes finos
   - SVG mejor centrados
   - Alineación uniforme
   - Animaciones suaves
========================================================== */

.seccion-ventajas {
    position: relative;
    overflow: hidden;

    background: #102a45;
    color: var(--blanco);
}

.seccion-ventajas::before {
    content: "";

    position: absolute;
    inset: 0;

    background: radial-gradient(
        circle at 0% 100%,
        rgba(40, 164, 103, .14),
        transparent 48%
    );

    pointer-events: none;
}

.ventajas-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1.15fr);

    align-items: start;

    gap: 90px;
}

.ventajas-introduccion {
    position: relative;
    left: -25px;

    min-width: 0;
}

.ventajas-introduccion .subtitulo {
    color: var(--verde-claro);
}

.ventajas-introduccion h2 {
    color: var(--blanco);
}

.ventajas-introduccion h2 span {
    color: var(--verde-claro);
}

.ventajas-introduccion > p {
    color: #c8d8e5;

    margin-bottom: 25px;
}


/* ----------------------------------------------------------
   16.1. DISTRIBUCIÓN DE TARJETAS
---------------------------------------------------------- */

.ventajas-lista {
    display: grid;
    gap: 20px;
}

.ventajas-lista .ventaja-item {
    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        48px;

    align-items: start;
    gap: 19px;

    min-width: 0;
    padding: 27px 29px;

    background:
        rgba(255, 255, 255, .055);

    border:
        1px solid rgba(255, 255, 255, .11);

    border-radius: 12px;

    box-shadow:
        0 6px 22px rgba(0, 0, 0, .045);

    transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.ventajas-lista .ventaja-item:hover {
    background:
        rgba(255, 255, 255, .075);

    border-color:
        rgba(99, 211, 154, .25);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .09);

    transform: translateY(-2px);
}


/* ----------------------------------------------------------
   16.2. NÚMEROS 01, 02, 03 Y 04
---------------------------------------------------------- */

.ventajas-lista .ventaja-numero {
    display: block;

    color: var(--verde-claro);

    font-size: 30px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -1px;

    margin-top: 1px;
}


/* ----------------------------------------------------------
   16.3. TÍTULOS Y DESCRIPCIONES
---------------------------------------------------------- */

.ventajas-lista .ventaja-contenido {
    min-width: 0;
}

.ventajas-lista .ventaja-contenido h3 {
    color: var(--blanco);

    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;

    margin-bottom: 10px;
}

.ventajas-lista .ventaja-contenido p {
    color: #c7d8e6;

    font-size: 14px;
    line-height: 1.85;

    margin: 0;
}


/* ----------------------------------------------------------
   16.4. NUEVO CONTENEDOR DE ÍCONOS

   No utilizar recuadros demasiado grandes.
---------------------------------------------------------- */

.ventajas-lista .ventaja-icono {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 48px;
    height: 48px;

    padding: 10px;

    border:
        1px solid rgba(99, 211, 154, .19);

    border-radius: 12px;

    background:
        rgba(99, 211, 154, .085);

    color: var(--verde-claro);

    box-shadow: none;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


/* ----------------------------------------------------------
   16.5. NUEVOS DIBUJOS SVG
---------------------------------------------------------- */

.ventajas-lista .ventaja-icono svg {
    display: block;

    width: 26px;
    height: 26px;

    flex-shrink: 0;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;

    overflow: visible;
}


/* ----------------------------------------------------------
   16.6. EFECTO HOVER PROFESIONAL
---------------------------------------------------------- */

.ventajas-lista
.ventaja-item:hover
.ventaja-icono {
    background:
        rgba(99, 211, 154, .14);

    border-color:
        rgba(99, 211, 154, .32);

    transform: translateY(-1px);
}


/* ----------------------------------------------------------
   16.7. EVITAR ELEMENTOS EXTRAÑOS
---------------------------------------------------------- */

.ventajas-lista .ventaja-icono::before,
.ventajas-lista .ventaja-icono::after {
    content: none;
}

.ventajas-lista .ventaja-item > div {
    min-width: 0;
}

.ventajas-lista .ventaja-icono {
    min-width: 48px;
}


/* ==========================================================
   17. ATENCIÓN A CLIENTES

   Conserva la altura reducida.
========================================================== */

.seccion-proceso {
    background: var(--verde-suave);

    padding-top: 45px;
    padding-bottom: 45px;
}

.seccion-proceso .seccion-encabezado {
    margin-bottom: 0;
}


/* ==========================================================
   18. UBICACIÓN Y GOOGLE MAPS
========================================================== */

.seccion-ubicacion {
    background-color: #e7eff5;

    background-image:
        linear-gradient(
            rgba(231, 239, 245, .72),
            rgba(231, 239, 245, .79)
        ),
        var(--imagen-fondo);

    background-size: cover;
    background-position: center 58%;
    background-repeat: no-repeat;
}

.seccion-ubicacion .seccion-encabezado {
    max-width: 1050px;
    margin-bottom: 65px;

    text-align: center;
}

.seccion-ubicacion
.seccion-encabezado > .subtitulo {
    display: block;

    width: fit-content;
    margin: 0 auto 18px;

    color: var(--verde);

    font-size: 12px;
    font-weight: 850;
    letter-spacing: 2.3px;
}

.ubicacion-resumen {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    width: fit-content;
    max-width: 100%;

    margin: 0 auto 30px;
    padding: 12px 20px;

    background:
        rgba(255, 255, 255, .94);

    color: var(--azul);

    border: 1px solid #d7e3ec;
    border-radius: 999px;

    box-shadow: var(--sombra-suave);

    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.ubicacion-resumen-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background: var(--verde-suave);
    color: var(--verde);

    font-size: 16px;
    font-weight: 800;
}

.seccion-ubicacion h2 {
    color: var(--azul-oscuro);

    font-size: clamp(32px, 3.3vw, 47px);
    line-height: 1.2;

    margin-bottom: 28px;
}

.seccion-ubicacion h2 span {
    color: var(--verde);
}

.seccion-ubicacion
.seccion-encabezado > p {
    max-width: 850px;

    margin-inline: auto;

    color: #405a70;

    font-size: 16px;
    line-height: 1.8;
}

.mapa-contenedor {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    min-height: 420px;

    overflow: hidden;

    background: var(--blanco);

    border: 1px solid #d4e0e9;
    border-radius: 15px;

    box-shadow: var(--sombra-media);
}

.mapa-informacion {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    min-width: 0;
    padding: 45px;

    background: linear-gradient(
        145deg,
        #0b2744,
        #174c68
    );

    color: var(--blanco);
}

.mapa-etiqueta {
    color: #8be0b4;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.mapa-informacion h3 {
    color: var(--blanco);

    font-size: 28px;
    font-weight: 800;

    margin: 20px 0;
}

.mapa-informacion p {
    color: #d4e5ef;

    font-size: 15px;
    line-height: 1.9;

    margin-bottom: 28px;
}

.mapa-iframe {
    min-width: 0;
    min-height: 420px;

    background: #cbd8e2;
}

.mapa-iframe iframe {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 420px;

    border: none;
}

.mapa-aclaracion {
    margin-top: 25px;

    color: #334b60;

    font-size: 12px !important;
    text-align: center;
}


/* ==========================================================
   19. CONTACTO
========================================================== */

.seccion-contacto {
    background: linear-gradient(
        180deg,
        #f0f5f9,
        #e8f0f5
    );
}

.contacto-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap: 35px;
    align-items: stretch;
}

.contacto-informacion {
    position: relative;
    overflow: hidden;

    min-width: 0;
    padding: 42px 35px;

    background: linear-gradient(
        145deg,
        #0b2744,
        #155071,
        #116341
    );

    color: var(--blanco);
    border-radius: 15px;
}

.contacto-informacion::after {
    content: "";

    position: absolute;

    width: 270px;
    height: 270px;

    right: -150px;
    bottom: -145px;

    border:
        40px solid rgba(255, 255, 255, .05);

    border-radius: 50%;
    pointer-events: none;
}

.contacto-etiqueta {
    color: #9ee8c1;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.contacto-informacion h3 {
    color: var(--blanco);

    font-size: clamp(24px, 2.3vw, 32px);
    line-height: 1.3;

    margin: 20px 0;
}

.contacto-informacion > p {
    color: #d8e8f0;

    font-size: 14px;
    line-height: 1.9;
}

.contacto-lista {
    display: grid;

    gap: 26px;
    margin-top: 45px;
}

.contacto-item {
    display: flex;
    align-items: flex-start;

    gap: 15px;
}

.contacto-icono {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    min-width: 45px;
    height: 45px;

    padding: 5px;

    background:
        rgba(255, 255, 255, .12);

    border-radius: 9px;

    color: #a3edc5;

    font-size: 14px;
    font-weight: 800;
}

.contacto-item > div {
    min-width: 0;
}

.contacto-item div > span {
    display: block;

    color: #a4d3e3;

    font-size: 12px;
    margin-bottom: 4px;
}

.contacto-item a,
.contacto-item p {
    color: var(--blanco);

    font-size: 14px;
    font-weight: 600;

    overflow-wrap: anywhere;
}

.contacto-item a:hover {
    color: var(--verde-claro);
}

.contacto-mensaje {
    position: relative;
    z-index: 2;

    margin-top: 45px;
    padding: 23px;

    background:
        rgba(255, 255, 255, .08);

    border:
        1px solid rgba(255, 255, 255, .12);

    border-radius: 10px;
}

.contacto-mensaje strong {
    display: block;

    color: var(--blanco);

    font-size: 15px;
    margin-bottom: 10px;
}

.contacto-mensaje p {
    color: #d8e8f0;
    font-size: 13px;
}


/* ==========================================================
   20. FORMULARIO DE COTIZACIÓN
========================================================== */

.cotizacion-tarjeta {
    position: relative;

    min-width: 0;
    padding: 42px;

    scroll-margin-top: 115px;

    background: var(--blanco);

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

    border-radius: 15px;

    box-shadow: var(--sombra-media);
}

.cotizacion-cabecera {
    padding-bottom: 28px;
    margin-bottom: 30px;

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

.formulario-etiqueta {
    color: var(--verde);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.cotizacion-cabecera h3 {
    color: var(--azul-oscuro);

    font-size: 27px;
    font-weight: 800;

    margin: 10px 0;
}

.cotizacion-cabecera p {
    color: var(--texto-suave);
    font-size: 13px;
}

.form-grid {
    display: grid;

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

    gap: 22px;
}

.campo {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.campo-completo {
    grid-column: 1 / -1;
}

.campo label {
    display: block;

    color: var(--azul-oscuro);

    font-size: 13px;
    font-weight: 750;

    margin-bottom: 9px;
}

.campo input,
.campo select,
.campo textarea {
    display: block;

    width: 100%;
    min-width: 0;

    padding: 13px 15px;

    background: #f7f9fb;

    border: 1px solid #d9e3eb;
    border-radius: 7px;

    color: var(--azul-oscuro);
    font-size: 14px;

    outline: none;

    transition:
        border-color var(--transicion),
        box-shadow var(--transicion),
        background var(--transicion);
}

.campo input,
.campo select {
    min-height: 48px;
}

.campo textarea {
    min-height: 145px;
    resize: vertical;
}

.campo input::placeholder,
.campo textarea::placeholder {
    color: #8b9aa8;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    background: var(--blanco);

    border-color: var(--verde);

    box-shadow:
        0 0 0 3px rgba(23, 138, 80, .12);
}

.campo select {
    cursor: pointer;
}

.formulario-aviso {
    margin-top: 25px;
    margin-bottom: 22px;

    padding: 15px 18px;

    background: #edf7f1;
    color: #3a7055;

    border-left:
        3px solid var(--verde);

    border-radius: 5px;

    font-size: 12px;
    line-height: 1.8;
}

.boton-whatsapp {
    width: 100%;
    min-height: 54px;

    background: #168b4c;
    color: var(--blanco);

    border: none;

    text-align: center;
}

.boton-whatsapp:hover {
    background: #106d3a;

    box-shadow:
        0 12px 25px rgba(23, 138, 80, .23);
}


/* ==========================================================
   21. PESO - KILOGRAMOS Y TONELADAS
========================================================== */

.peso-contenedor {
    display: flex;
    align-items: stretch;

    gap: 10px;
    width: 100%;
}

.peso-contenedor input {
    flex: 1 1 0;

    width: 100%;
    min-width: 0;
}

.peso-contenedor select {
    flex: 0 0 150px;

    width: 150px;
    min-width: 0;

    padding: 10px;

    font-size: 12px;
    font-weight: 600;
}


/* ==========================================================
   22. OPCIONES DESCONOZCO
========================================================== */

.campo .opcion-desconozco {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;

    gap: 9px;

    margin-top: 12px;
    margin-bottom: 0;

    color: var(--texto-suave);

    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;

    cursor: pointer;
    user-select: none;
}

.opcion-desconozco input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: checkbox;

    display: inline-block;

    width: 16px;
    height: 16px;

    min-width: 16px;
    min-height: 16px;

    flex: 0 0 16px;

    padding: 0;
    margin: 0;

    accent-color: var(--verde);

    cursor: pointer;
}

.opcion-desconozco span {
    line-height: 1.5;
}

.opcion-desconozco:hover span {
    color: var(--verde);
}

.campo input:disabled,
.campo select:disabled {
    background: #e8eef2;
    color: #8c9ca9;

    border-color: #d9e3eb;

    cursor: not-allowed;
    opacity: .75;
}


/* ==========================================================
   23. PIE DE PÁGINA
========================================================== */

.pie-pagina {
    position: relative;

    background: linear-gradient(
        135deg,
        #04111d 0%,
        #051a2c 40%,
        #08233b 100%
    );

    color: #b9cedd;
    padding: 75px 0 25px;
}

.pie-pagina::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: linear-gradient(
        90deg,
        var(--verde),
        var(--verde-claro),
        #3b91c7
    );
}

.footer-grid {
    display: grid;

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

    gap: 45px;
    padding-bottom: 60px;
}

.footer-logo {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    width: 135px;
    min-height: 120px;

    padding: 12px;

    background: var(--blanco);

    border-radius: 10px;

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

    margin-bottom: 22px;
}

.footer-logo::after {
    content: "";

    position: absolute;

    right: -25px;
    bottom: -25px;

    width: 90px;
    height: 90px;

    border-radius: 50%;

    background:
        rgba(23, 138, 80, .10);
}

.footer-logo img {
    position: relative;
    z-index: 1;

    width: 100%;
    height: auto;
}

.footer-empresa p {
    max-width: 300px;

    color: #a9c0d0;

    font-size: 13px;
    line-height: 1.9;

    margin-top: 22px;
}

.footer-columna {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 10px;
    min-width: 0;
}

.footer-columna h3 {
    position: relative;

    color: var(--blanco);

    font-size: 15px;
    font-weight: 800;

    padding-bottom: 12px;
    margin-bottom: 16px;
}

.footer-columna h3::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 48px;
    height: 2px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        var(--verde),
        var(--verde-claro)
    );
}

.footer-columna a {
    display: flex;
    align-items: flex-start;

    gap: 10px;
    padding: 5px 0;

    color: #b7cad8;

    font-size: 13px;
    line-height: 1.7;

    overflow-wrap: anywhere;

    transition: var(--transicion);
}

.footer-columna:not(.contacto-footer) a::before {
    content: "✦";

    color: var(--verde-claro);

    font-size: 12px;
    line-height: 1.5;

    flex-shrink: 0;
    margin-top: 1px;
}

.footer-columna a:hover {
    color: var(--verde-claro);
    transform: translateX(4px);
}

.contacto-footer a {
    width: 100%;
}

.contacto-footer a::before {
    content: none;
    display: none;
}

.footer-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 17px;
    height: 17px;

    margin-top: 3px;

    color: var(--verde-claro);
}

.footer-icono svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.contacto-footer a > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.footer-inferior {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-top: 25px;
    margin-top: 10px;

    border-top:
        1px solid rgba(255, 255, 255, .10);
}

.footer-inferior p,
.footer-inferior a {
    color: #90aabb;
    font-size: 12px;
}

.footer-inferior a:hover {
    color: var(--verde-claro);
}


/* ==========================================================
   24. ANIMACIONES
========================================================== */

.reveal-element {
    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .75s ease,
        transform .75s ease;

    will-change:
        opacity,
        transform;
}

.reveal-element.visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes entradaSuave {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes menuEntrada {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================
   25. LAPTOPS MEDIANAS
   HASTA 1150 PX
========================================================== */

@media (max-width: 1150px) {

    .navegacion {
        gap: 15px;
    }

    .nav-link {
        font-size: 12px;
    }

    .portada-grid {
        gap: 40px;
    }

    .portada h1 {
        font-size:
            clamp(38px, 4.5vw, 55px);
    }

    .logo-marco-exterior {
        max-width: 365px;
    }

    .logo-imagen-contenedor {
        min-height: 260px;
    }

    .nosotros-grid {
        gap: 55px;
    }

    .flota-encabezado {
        gap: 25px;
    }

    .flota-encabezado h2 {
        font-size: 40px;
    }

    .flota-indicador {
        padding: 18px;
        gap: 12px;
    }

    .indicador-icono {
        width: 46px;
        height: 46px;
    }

    .unidad-contenido-premium {
        padding: 26px;
    }

    .unidad-spec {
        padding: 13px 10px;
        gap: 9px;
    }

    .spec-icono {
        width: 33px;
        height: 33px;
    }

    .spec-info strong {
        font-size: 12px;
    }

    .ventajas-grid {
        gap: 55px;
    }

    .bodega-grid {
        gap: 40px;
    }

    .footer-grid {
        gap: 30px;
    }
}


/* ==========================================================
   26. TABLETAS
   HASTA 950 PX
========================================================== */

@media (max-width: 950px) {

    html {
        scroll-padding-top: 100px;
    }

    .seccion {
        padding: 80px 0;
    }

    .barra-superior-contenido {
        justify-content: center;
    }

    .barra-ubicacion {
        display: none;
    }

    .encabezado-contenido {
        min-height: 82px;
    }

    .logo img {
        width: 95px;
    }

    .menu-toggle {
        display: flex;
    }

    .navegacion {
        display: none;

        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        padding: 20px 6% 25px;

        background: var(--blanco);

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

        box-shadow:
            0 15px 25px rgba(9, 27, 48, .10);

        flex-direction: column;
        align-items: stretch;

        gap: 0;
    }

    .navegacion.abierto {
        display: flex;
    }

    .navegacion .nav-link {
        display: block;

        padding: 14px 8px;

        font-size: 14px;

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

    .nav-link:not(.boton-menu)::after {
        display: none;
    }

    .navegacion .boton-menu {
        display: flex;

        margin-top: 15px;

        border-bottom: none;

        text-align: center;
    }

    .menu-toggle.activo span:nth-child(1) {
        transform:
            translateY(7px) rotate(45deg);
    }

    .menu-toggle.activo span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.activo span:nth-child(3) {
        transform:
            translateY(-7px) rotate(-45deg);
    }

    /* Portada */

    .portada {
        min-height: auto;
        padding: 85px 0;
    }

    .portada-grid {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .portada-contenido {
        max-width: 750px;

        margin-inline: auto;
        text-align: center;
    }

    .etiqueta-portada,
    .portada-botones,
    .portada-inferior {
        justify-content: center;
    }

    .portada h1 {
        font-size:
            clamp(42px, 6vw, 62px);
    }

    .portada-descripcion {
        margin-inline: auto;
    }

    .portada-inferior {
        margin-top: 35px;
    }

    .logo-marco-exterior {
        max-width: 390px;
    }

    .elemento-flotante-uno {
        right: 14%;
    }

    .elemento-flotante-dos {
        left: 14%;
    }

    /* Valores */

    .valores-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .valor-item:nth-child(2) {
        border-right: none;
    }

    /* Nosotros */

    .nosotros-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .nosotros-visual {
        max-width: 550px;
        width: 100%;

        margin-inline: auto;
    }

    /* Franja */

    .franja-corporativa-grid {
        gap: 30px;
    }

    .franja-sello {
        width: 190px;
    }

    /* Flota */

    .flota-encabezado {
        align-items: flex-start;
    }

    .flota-encabezado h2 {
        font-size: 37px;
    }

    .flota-encabezado-sello {
        padding: 15px;
    }

    .flota-indicadores {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .flota-indicador:last-child {
        grid-column: 1 / -1;
    }

    .flota-grid-premium {
        grid-template-columns: 1fr;

        max-width: 680px;
        margin-inline: auto;
    }

    .unidad-imagen-premium {
        height: 350px;
    }

    .unidad-contenido-premium {
        padding: 35px;
    }

    .unidad-descripcion {
        min-height: 0;
    }

    .unidad-spec {
        min-height: 92px;
        padding: 16px;
    }

    .spec-info strong {
        font-size: 13px;
    }

    /* Bodega */

    .bodega-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .bodega-contenido {
        max-width: 720px;
    }

    .bodega-servicios {
        max-width: 760px;
        width: 100%;

        margin-inline: auto;
    }

    /* Ventajas */

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

    .ventajas-introduccion {
        position: static;
        left: auto;
    }

    .ventajas-lista .ventaja-item {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            46px;

        gap: 18px;
        padding: 25px;
    }

    .ventajas-lista .ventaja-numero {
        font-size: 29px;
    }

    .ventajas-lista .ventaja-icono {
        width: 46px;
        height: 46px;
        min-width: 46px;
    }

    .ventajas-lista .ventaja-icono svg {
        width: 25px;
        height: 25px;
    }

    /* Contacto */

    .contacto-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .contacto-informacion {
        padding: 35px;
    }

    .contacto-lista {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    /* Pie de página */

    .footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    /* Atención */

    .seccion-proceso {
        padding-top: 42px;
        padding-bottom: 42px;
    }
}


/* ==========================================================
   27. CELULARES
   HASTA 650 PX
========================================================== */

@media (max-width: 650px) {

    html {
        scroll-padding-top: 90px;
    }

    body {
        font-size: 15px;
        line-height: 1.65;

        -webkit-text-size-adjust: 100%;
    }

    .contenedor {
        width: calc(100% - 36px);
        max-width: 500px;
    }

    .seccion {
        padding: 66px 0;
    }

    .seccion h2 {
        font-size:
            clamp(28px, 7.5vw, 35px);

        line-height: 1.22;
        letter-spacing: -.8px;

        margin-bottom: 20px;

        overflow-wrap: break-word;
    }

    .seccion p {
        font-size: 14px;
        line-height: 1.8;
    }

    .subtitulo {
        font-size: 10px;
        letter-spacing: 1.8px;

        margin-bottom: 13px;
    }

    .seccion-encabezado {
        margin-bottom: 34px;
    }

    .seccion-encabezado p {
        font-size: 14px;
        line-height: 1.75;
    }

    .seccion-nosotros::before,
    .seccion-flota::before,
    .seccion-proceso::before,
    .seccion-ubicacion::before,
    .seccion-contacto::before {
        width: 58px;
    }


    /* ------------------------------------------------------
       27.1. BARRA SUPERIOR
    ------------------------------------------------------ */

    .barra-superior {
        background: #06172a;
    }

    .barra-superior-contenido {
        min-height: 35px;

        justify-content: center;
    }

    .barra-contactos {
        width: 100%;

        justify-content: space-between;
        gap: 10px;
    }

    .barra-contactos a {
        font-size: 10px;
        font-weight: 600;

        white-space: nowrap;
    }


    /* ------------------------------------------------------
       27.2. ENCABEZADO Y MENÚ
    ------------------------------------------------------ */

    .encabezado-contenido {
        min-height: 76px;
        gap: 14px;
    }

    .logo img {
        width: 85px;
        max-height: 71px;

        object-fit: contain;
    }

    .menu-toggle {
        width: 46px;
        height: 46px;

        flex-shrink: 0;

        background: #f4f8fa;

        border-radius: 11px;
        gap: 5px;
    }

    .menu-toggle span {
        width: 22px;
        height: 2.5px;

        border-radius: 10px;
    }

    .menu-toggle.activo {
        background: var(--verde-suave);
        border-color: #b9dfc9;
    }

    .navegacion {
        top: calc(100% + 1px);

        max-height:
            calc(100dvh - 115px);

        overflow-y: auto;
        overscroll-behavior: contain;

        padding: 15px 18px 24px;

        background:
            rgba(255, 255, 255, .99);

        border-top:
            3px solid var(--verde);

        border-radius:
            0 0 18px 18px;

        box-shadow:
            0 20px 35px rgba(9, 27, 48, .16);

        gap: 4px;
    }

    .navegacion.abierto {
        animation:
            menuEntrada .25s ease both;
    }

    .navegacion .nav-link {
        display: flex;
        align-items: center;

        min-height: 48px;
        padding: 12px 16px;

        font-size: 14px;
        font-weight: 700;

        border: none;
        border-radius: 9px;

        white-space: normal;
    }

    .navegacion .nav-link:hover,
    .navegacion .nav-link.activo:not(.boton-menu) {
        background: var(--verde-suave);
        color: var(--verde-oscuro);
    }

    .navegacion .boton-menu {
        width: 100%;
        min-height: 50px;

        justify-content: center;

        margin-top: 10px;
        padding: 13px 18px;

        font-size: 14px;
    }


    /* ------------------------------------------------------
       27.3. PORTADA
    ------------------------------------------------------ */

    .portada {
        min-height: auto;

        padding: 55px 0 58px;

        background: linear-gradient(
            155deg,
            #07192c 0%,
            #103354 52%,
            #116543 100%
        );
    }

    .portada::before {
        opacity: .7;
        background-size: 42px 42px;
    }

    .portada-grid {
        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 32px;
    }

    .portada-contenido {
        width: 100%;
        max-width: 100%;

        text-align: center;
    }

    .etiqueta-portada {
        justify-content: center;

        gap: 7px;
        margin-bottom: 23px;

        font-size: 9px;
        letter-spacing: .9px;
        line-height: 1.7;
    }

    .etiqueta-linea {
        width: 16px;
        height: 2px;
    }

    .portada h1 {
        max-width: 480px;

        margin: 0 auto 22px;

        font-size:
            clamp(34px, 8.3vw, 45px);

        font-weight: 850;
        letter-spacing: -1.2px;
        line-height: 1.17;

        text-wrap: balance;
    }

    .portada h1 span {
        margin-top: 5px;
    }

    .portada-descripcion {
        max-width: 420px;

        margin: 0 auto 28px;

        font-size: 14px;
        line-height: 1.85;
    }

    .portada-botones {
        flex-direction: column;
        align-items: stretch;

        gap: 12px;

        max-width: 370px;
        margin-inline: auto;
    }

    .portada-botones .boton {
        width: 100%;
        min-height: 53px;

        padding: 14px 20px;

        font-size: 14px;
        border-radius: 10px;
    }

    .portada-botones .boton-contorno {
        background:
            rgba(255, 255, 255, .07);

        border-color:
            rgba(255, 255, 255, .35);
    }

    .portada-inferior {
        justify-content: center;
        align-items: flex-start;

        gap: 10px;

        max-width: 370px;
        margin: 24px auto 0;

        font-size: 11px;
        line-height: 1.7;

        text-align: left;
    }

    .indicador-verde {
        margin-top: 5px;
    }


    /* ------------------------------------------------------
       27.4. LOGOTIPO
    ------------------------------------------------------ */

    .portada-visual {
        width: 100%;
        padding: 0 10px;
    }

    .logo-marco-exterior {
        width: min(100%, 285px);
        max-width: 285px;

        margin-inline: auto;
        padding: 7px;

        border-radius: 20px;

        transform: none;
    }

    .logo-marco-exterior:hover {
        transform: none;
    }

    .logo-tarjeta {
        padding: 14px 17px 17px;
        border-radius: 14px;
    }

    .logo-tarjeta-superior {
        padding-bottom: 11px;

        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .logo-imagen-contenedor {
        min-height: auto;
        padding: 14px 0;
    }

    .logo-principal {
        width: 100%;
        max-width: 225px;

        margin-inline: auto;
    }

    .logo-tarjeta-inferior {
        padding-top: 12px;

        font-size: 8px;
        letter-spacing: 1px;
    }

    .elemento-flotante {
        display: none;
    }


    /* ------------------------------------------------------
       27.5. VALORES
    ------------------------------------------------------ */

    .franja-valores {
        padding: 22px 0;
        background: #f8fbfc;
    }

    .valores-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .valor-item {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 7px;

        min-height: 113px;
        padding: 16px 13px;

        background: var(--blanco);

        border:
            1px solid #e3ebef !important;

        border-radius: 11px;

        box-shadow:
            0 4px 14px rgba(9, 27, 48, .04);
    }

    .valor-numero {
        font-size: 23px;
        line-height: 1.1;
    }

    .valor-item h3 {
        font-size: 13px;
    }

    .valor-item p {
        font-size: 11px;
    }


    /* ------------------------------------------------------
       27.6. NOSOTROS
    ------------------------------------------------------ */

    .nosotros-grid {
        display: flex;
        flex-direction: column;

        gap: 33px;
    }

    .nosotros-visual {
        width: 100%;
        max-width: 380px;
    }

    .nosotros-panel {
        min-height: 295px;
        padding: 22px;

        border-radius: 15px;
    }

    .nosotros-panel-etiqueta {
        font-size: 9px;
    }

    .nosotros-logo {
        max-width: 195px;

        margin: 18px auto;
        padding: 15px;

        border-radius: 11px;
    }

    .nosotros-panel-pie {
        gap: 7px;
        padding-top: 15px;
    }

    .nosotros-panel-pie span {
        font-size: 9px;
        letter-spacing: .5px;
    }

    .nosotros-detalle {
        width: 80px;
        height: 80px;

        right: -5px;
        bottom: -8px;
    }

    .nosotros-contenido {
        width: 100%;
    }

    .nosotros-contenido h2 {
        font-size: 30px;
    }

    .nosotros-contenido > p {
        margin-bottom: 15px;
    }

    .nosotros-lista {
        gap: 11px;
        margin-top: 22px;
    }

    .nosotros-lista-item {
        align-items: flex-start;

        gap: 10px;
        padding: 12px;

        background:
            rgba(255, 255, 255, .83);

        border:
            1px solid rgba(218, 232, 225, .9);

        border-radius: 9px;

        font-size: 12px;
        line-height: 1.6;
    }

    .check-icon {
        width: 25px;
        height: 25px;
    }


    /* ------------------------------------------------------
       27.7. FRANJA CORPORATIVA
    ------------------------------------------------------ */

    .franja-corporativa {
        padding: 54px 0;
    }

    .franja-corporativa-grid {
        flex-direction: column;
        align-items: flex-start;

        gap: 25px;
    }

    .franja-etiqueta {
        font-size: 10px;
    }

    .franja-corporativa h2 {
        font-size: 29px;
        line-height: 1.2;
    }

    .franja-corporativa p {
        font-size: 13px;
        line-height: 1.8;
    }

    .franja-sello {
        width: 100%;
        min-height: auto;

        padding: 17px 12px;

        flex-direction: row;
        flex-wrap: wrap;

        gap: 4px;

        border-radius: 11px;
    }

    .franja-sello span {
        width: auto;
        flex: 1 1 auto;

        padding: 7px 5px;

        font-size: 10px;
        letter-spacing: .6px;
    }

    .franja-sello span:nth-child(2) {
        border: none;
    }


    /* ------------------------------------------------------
       27.8. FLOTA
    ------------------------------------------------------ */

    .flota-encabezado {
        flex-direction: column;
        align-items: flex-start;

        gap: 22px;
        margin-bottom: 25px;
    }

    .flota-etiqueta-superior {
        font-size: 10px;
        margin-bottom: 13px;
    }

    .flota-encabezado h2 {
        font-size: 31px;

        letter-spacing: -.8px;
        line-height: 1.24;

        margin-bottom: 17px;
    }

    .flota-encabezado-texto > p {
        font-size: 13px;
        line-height: 1.75;
    }

    .flota-encabezado-sello {
        width: 100%;

        padding: 14px 18px;
        gap: 12px;

        border-radius: 11px;
    }

    .flota-sello-icono {
        width: 43px;
        height: 43px;

        font-size: 23px;
    }

    .flota-encabezado-sello strong {
        font-size: 13px;
    }

    .flota-indicadores {
        grid-template-columns: 1fr;

        gap: 11px;
        margin-bottom: 25px;
    }

    .flota-indicador,
    .flota-indicador:last-child {
        grid-column: auto;
    }

    .flota-indicador {
        min-height: 72px;

        padding: 13px 16px;
        gap: 13px;

        border-radius: 10px;
    }

    .indicador-icono {
        width: 44px;
        height: 44px;
    }

    .flota-indicador strong {
        font-size: 13px;
    }

    .flota-indicador span {
        font-size: 11px;
    }

    .flota-grid,
    .flota-grid-premium {
        grid-template-columns: 1fr;

        gap: 22px;

        max-width: 500px;
        margin-inline: auto;
    }

    .unidad-card {
        border-radius: 15px;

        box-shadow:
            0 12px 30px rgba(9, 27, 48, .12);
    }

    .unidad-imagen,
    .unidad-imagen-premium {
        height: clamp(210px, 61vw, 310px);
    }

    .unidad-numero,
    .unidad-imagen-premium .unidad-etiqueta {
        top: 14px;

        padding: 7px 10px;

        font-size: 9px;
        letter-spacing: .8px;
    }

    .unidad-numero {
        left: 14px;
    }

    .unidad-imagen-premium .unidad-etiqueta {
        right: 14px;
    }

    .unidad-imagen-pie {
        padding: 25px 16px 16px;
        gap: 8px;
    }

    .unidad-imagen-clase {
        font-size: 10px;
        letter-spacing: .6px;
    }

    .unidad-imagen-modelo {
        font-size: 9px;
        letter-spacing: .5px;
    }

    .unidad-contenido,
    .unidad-contenido-premium {
        padding: 24px 19px;
    }

    .unidad-titulo-fila {
        gap: 12px;
        margin-bottom: 15px;
    }

    .unidad-categoria {
        font-size: 9px;
        margin-bottom: 8px;
    }

    .unidad-contenido-premium h3 {
        font-size: 22px;
        overflow-wrap: break-word;
    }

    .unidad-titulo-simbolo {
        width: 36px;
        height: 36px;

        font-size: 20px;
    }

    .unidad-descripcion {
        min-height: 0;

        margin-bottom: 22px;

        font-size: 13px !important;
    }

    .unidad-especificaciones {
        margin-bottom: 22px;
    }

    .unidad-especificaciones h4 {
        font-size: 13px;
    }

    .unidad-specs-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 9px;
    }

    .unidad-spec {
        flex-direction: column;

        min-height: 122px;
        padding: 12px;

        gap: 9px;
    }

    .spec-icono {
        width: 33px;
        height: 33px;
    }

    .spec-info small {
        font-size: 10px;
    }

    .spec-info strong {
        font-size: 12px;
    }

    .unidad-aplicaciones {
        padding-bottom: 19px;
    }

    .unidad-tags {
        gap: 7px;
    }

    .unidad-tags span {
        padding: 5px 9px;
        font-size: 10px;
    }

    .flota-nota-premium {
        padding: 18px 16px;

        gap: 12px;
        margin-top: 26px;
    }

    .flota-nota-icono {
        width: 32px;
        height: 32px;

        font-size: 17px;
    }

    .flota-nota-contenido strong {
        font-size: 13px;
    }

    .flota-nota-contenido p {
        font-size: 12px;
    }


    /* ------------------------------------------------------
       27.9. BODEGA
    ------------------------------------------------------ */

    .bodega-grid {
        gap: 34px;
    }

    .bodega-contenido h2 {
        font-size: 31px;
        margin-bottom: 22px;
    }

    .bodega-contenido > p {
        font-size: 13px;
        margin-bottom: 15px;
    }

    .bodega-destacado {
        padding: 18px;
        gap: 15px;

        margin-top: 25px;
    }

    .bodega-destacado-numero {
        font-size: 58px;
    }

    .bodega-destacado strong {
        font-size: 13px;
    }

    .bodega-servicios {
        padding: 24px 18px;
        border-radius: 14px;
    }

    .bodega-servicios-encabezado h3 {
        font-size: 22px;
    }

    .bodega-servicios-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .bodega-servicio {
        min-height: auto;
        padding: 17px;
    }

    .bodega-servicio-icono {
        width: 37px;
        height: 37px;

        margin-bottom: 11px;

        font-size: 14px;
    }

    .bodega-servicio h4 {
        font-size: 14px;
    }

    .bodega-servicio p {
        font-size: 12px;
    }

    .bodega-nota {
        margin-top: 27px;
        padding: 16px;
    }

    .bodega-nota p {
        font-size: 12px;
    }


    /* ------------------------------------------------------
       27.10. POR QUÉ ELEGIRNOS

       ÍCONOS OPTIMIZADOS EN CELULARES
    ------------------------------------------------------ */

    .ventajas-grid {
        gap: 26px;
    }

    .ventajas-introduccion {
        position: static;
        left: auto;

        width: 100%;
    }

    .ventajas-introduccion h2 {
        font-size: 31px;
    }

    .ventajas-introduccion > p {
        font-size: 13px;
        margin-bottom: 17px;
    }

    .ventajas-lista {
        gap: 13px;
    }

    .ventajas-lista .ventaja-item {
        grid-template-columns:
            29px
            minmax(0, 1fr)
            38px;

        gap: 11px;

        padding: 19px 14px;

        border-radius: 11px;
    }

    .ventajas-lista .ventaja-numero {
        font-size: 21px;
        letter-spacing: -.5px;

        margin-top: 1px;
    }

    .ventajas-lista .ventaja-contenido h3 {
        font-size: 14px;
        line-height: 1.45;

        margin-bottom: 8px;

        overflow-wrap: break-word;
    }

    .ventajas-lista .ventaja-contenido p {
        font-size: 12px;
        line-height: 1.75;

        overflow-wrap: break-word;
    }

    .ventajas-lista .ventaja-icono {
        width: 38px;
        height: 38px;
        min-width: 38px;

        padding: 8px;

        border-radius: 10px;
    }

    .ventajas-lista .ventaja-icono svg {
        width: 22px;
        height: 22px;

        stroke-width: 1.65;
    }

    .ventajas-lista .ventaja-item:hover {
        transform: none;
    }

    .ventajas-lista
    .ventaja-item:hover
    .ventaja-icono {
        transform: none;
    }


    /* ------------------------------------------------------
       27.11. ATENCIÓN A CLIENTES
    ------------------------------------------------------ */

    .seccion-proceso {
        padding-top: 35px;
        padding-bottom: 35px;
    }


    /* ------------------------------------------------------
       27.12. UBICACIÓN
    ------------------------------------------------------ */

    .seccion-ubicacion .seccion-encabezado {
        margin-bottom: 35px;
    }

    .ubicacion-resumen {
        width: 100%;
        max-width: 450px;

        justify-content: flex-start;
        text-align: left;

        gap: 11px;
        padding: 12px 13px;

        margin-bottom: 24px;

        border-radius: 13px;

        font-size: 12px;
    }

    .seccion-ubicacion h2 {
        font-size: 30px;
        margin-bottom: 18px;
    }

    .seccion-ubicacion
    .seccion-encabezado > p {
        font-size: 13px;
    }

    .mapa-contenedor {
        grid-template-columns: 1fr;
        border-radius: 13px;
    }

    .mapa-informacion {
        padding: 28px 22px;
    }

    .mapa-informacion h3 {
        font-size: 23px;
        margin: 14px 0;
    }

    .mapa-informacion p {
        font-size: 13px;
        margin-bottom: 22px;
    }

    .mapa-informacion .boton {
        width: 100%;
        min-height: 50px;

        padding: 12px 15px;

        font-size: 12px;
        border-radius: 9px;
    }

    .mapa-iframe,
    .mapa-iframe iframe {
        min-height: 315px;
        height: 315px;
    }

    .mapa-aclaracion {
        font-size: 11px !important;
    }


    /* ------------------------------------------------------
       27.13. CONTACTO
    ------------------------------------------------------ */

    .contacto-grid {
        gap: 21px;
    }

    .contacto-informacion {
        padding: 28px 22px;
        border-radius: 13px;
    }

    .contacto-informacion h3 {
        font-size: 25px;
        margin: 15px 0;
    }

    .contacto-informacion > p {
        font-size: 13px;
    }

    .contacto-lista {
        grid-template-columns: 1fr;

        gap: 21px;
        margin-top: 28px;
    }

    .contacto-item {
        gap: 12px;
    }

    .contacto-icono {
        min-width: 40px;
        height: 40px;
    }

    .contacto-item a,
    .contacto-item p {
        font-size: 12px;
    }

    .contacto-mensaje {
        margin-top: 30px;
        padding: 18px;
    }

    .contacto-mensaje p {
        font-size: 12px;
    }


    /* ------------------------------------------------------
       27.14. FORMULARIO
    ------------------------------------------------------ */

    .cotizacion-tarjeta {
        padding: 27px 19px;

        border-radius: 13px;

        box-shadow:
            0 12px 30px rgba(9, 27, 48, .10);
    }

    .cotizacion-cabecera {
        padding-bottom: 20px;
        margin-bottom: 24px;

        padding-right: 45px;
    }

    .formulario-etiqueta {
        font-size: 10px;
    }

    .cotizacion-cabecera h3 {
        font-size: 23px;
    }

    .cotizacion-cabecera p {
        font-size: 12px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 19px;
    }

    .campo-completo {
        grid-column: auto;
    }

    .campo input,
    .campo select,
    .campo textarea {
        padding: 14px 13px;

        font-size: 16px;
        border-radius: 9px;
    }

    .campo input,
    .campo select {
        min-height: 52px;
    }

    .peso-contenedor {
        flex-direction: column;
        gap: 10px;
    }

    .peso-contenedor input,
    .peso-contenedor select {
        width: 100%;
        flex: 0 0 auto;
    }

    .peso-contenedor select {
        font-size: 16px;
    }

    .campo .opcion-desconozco {
        gap: 10px;

        margin-top: 11px;
        padding: 9px 11px;

        background: #f0f7f3;

        border: 1px solid #dbece2;
        border-radius: 8px;

        font-size: 12px;
    }

    .opcion-desconozco input[type="checkbox"] {
        width: 18px;
        height: 18px;

        min-width: 18px;
        min-height: 18px;
    }

    .formulario-aviso {
        margin-top: 23px;

        padding: 14px;
        font-size: 12px;
    }

    .boton-whatsapp {
        min-height: 56px;

        font-size: 13px;
        border-radius: 10px;
    }


    /* ------------------------------------------------------
       27.15. PIE DE PÁGINA
    ------------------------------------------------------ */

    .pie-pagina {
        padding: 55px 0 24px;
    }

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 30px;
        padding-bottom: 35px;
    }

    .footer-empresa {
        display: flex;
        flex-direction: column;
        align-items: center;

        text-align: center;

        padding-bottom: 25px;

        border-bottom:
            1px solid rgba(255, 255, 255, .09);
    }

    .footer-logo {
        width: 115px;
        min-height: 105px;

        margin-bottom: 16px;
    }

    .footer-empresa p {
        max-width: 320px;

        margin-top: 0;
        font-size: 12px;
    }

    .footer-columna h3 {
        font-size: 15px;
        margin-bottom: 11px;
    }

    .footer-columna a {
        padding: 7px 0;

        min-height: 35px;
        font-size: 13px;
    }

    .footer-inferior {
        flex-direction: column;
        align-items: center;

        gap: 17px;

        padding-top: 23px;
        text-align: center;
    }

    .footer-inferior p {
        font-size: 11px;
    }

    .footer-inferior a {
        padding: 9px 15px;

        color: var(--verde-claro);

        border:
            1px solid rgba(99, 211, 154, .25);

        border-radius: 8px;
    }
}


/* ==========================================================
   28. CELULARES PEQUEÑOS
   HASTA 380 PX
========================================================== */

@media (max-width: 380px) {

    .contenedor {
        width: calc(100% - 28px);
    }

    .portada h1 {
        font-size: 32px;
    }

    .portada-descripcion {
        font-size: 13px;
    }

    .etiqueta-portada {
        font-size: 8px;
        letter-spacing: .5px;
    }

    .logo-marco-exterior {
        max-width: 250px;
    }

    .logo-principal {
        max-width: 190px;
    }

    .seccion h2 {
        font-size: 27px;
    }

    .valores-grid {
        gap: 8px;
    }

    .valor-item {
        min-height: 105px;
        padding: 12px 10px;
    }

    .valor-item h3 {
        font-size: 12px;
    }

    .valor-item p {
        font-size: 10px;
    }

    .flota-encabezado h2 {
        font-size: 28px;
    }

    .unidad-imagen,
    .unidad-imagen-premium {
        height: 205px;
    }

    .unidad-contenido-premium {
        padding: 20px 15px;
    }

    .unidad-contenido-premium h3 {
        font-size: 20px;
    }

    .unidad-specs-grid {
        grid-template-columns: 1fr;
    }

    .unidad-spec {
        flex-direction: row;
        align-items: center;

        min-height: 69px;
        padding: 11px 12px;
    }

    .bodega-destacado-numero {
        font-size: 52px;
    }

    .seccion-ubicacion h2 {
        font-size: 27px;
    }

    .cotizacion-tarjeta {
        padding: 23px 15px;
    }

    .cotizacion-cabecera {
        padding-right: 45px;
    }

    /* Íconos más compactos */

    .ventajas-lista .ventaja-item {
        grid-template-columns:
            26px
            minmax(0, 1fr)
            34px;

        gap: 8px;
        padding: 17px 11px;
    }

    .ventajas-lista .ventaja-numero {
        font-size: 18px;
    }

    .ventajas-lista .ventaja-contenido h3 {
        font-size: 13px;
    }

    .ventajas-lista .ventaja-contenido p {
        font-size: 11px;
        line-height: 1.7;
    }

    .ventajas-lista .ventaja-icono {
        width: 34px;
        height: 34px;
        min-width: 34px;

        padding: 7px;
        border-radius: 9px;
    }

    .ventajas-lista .ventaja-icono svg {
        width: 19px;
        height: 19px;
    }

    .boton-whatsapp {
        font-size: 12px;
    }
}


/* ==========================================================
   29. FONDO FOTOGRÁFICO

   Se aplica únicamente a:
   - Nosotros
   - Flota
   - Ubicación

   No se aplica a la portada ni a las
   secciones azules corporativas.
========================================================== */

@media (min-width: 951px) {

    .seccion-nosotros {
        background-image:
            linear-gradient(
                rgba(255, 255, 255, .64),
                rgba(244, 248, 251, .70)
            ),
            var(--imagen-fondo);
    }

    .seccion-flota {
        background-image:
            linear-gradient(
                rgba(237, 244, 248, .63),
                rgba(234, 242, 247, .70)
            ),
            var(--imagen-fondo);
    }

    .seccion-ubicacion {
        background-image:
            linear-gradient(
                rgba(231, 239, 245, .66),
                rgba(231, 239, 245, .72)
            ),
            var(--imagen-fondo);
    }

    .seccion-nosotros,
    .seccion-flota,
    .seccion-ubicacion {
        background-size:
            cover, cover;

        background-position:
            center center,
            center center;

        background-attachment:
            scroll, fixed;

        background-repeat:
            no-repeat, no-repeat;
    }
}


/* ==========================================================
   30. FONDO EN CELULARES
========================================================== */

@media (max-width: 650px) {

    .seccion-nosotros,
    .seccion-flota,
    .seccion-ubicacion {
        background-size:
            cover, cover;

        background-position:
            center center,
            center center;

        background-attachment:
            scroll, fixed;

        background-repeat:
            no-repeat, no-repeat;
    }

    .seccion-nosotros {
        background-image:
            linear-gradient(
                rgba(255, 255, 255, .78),
                rgba(244, 248, 251, .83)
            ),
            var(--imagen-fondo);
    }

    .seccion-flota {
        background-image:
            linear-gradient(
                rgba(237, 244, 248, .79),
                rgba(234, 242, 247, .84)
            ),
            var(--imagen-fondo);
    }

    .seccion-ubicacion {
        background-image:
            linear-gradient(
                rgba(231, 239, 245, .78),
                rgba(231, 239, 245, .84)
            ),
            var(--imagen-fondo);
    }
}


/* ==========================================================
   31. PANTALLAS EN HORIZONTAL
========================================================== */

@media (max-height: 480px)
       and (max-width: 950px)
       and (orientation: landscape) {

    .navegacion {
        max-height:
            calc(100dvh - 75px);

        overflow-y: auto;
    }

    .portada {
        min-height: auto;

        padding-top: 45px;
        padding-bottom: 45px;
    }

    .portada-grid {
        gap: 30px;
    }
}


/* ==========================================================
   32. ACCESIBILIDAD
========================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    .reveal-element {
        opacity: 1 !important;
        transform: none !important;
    }

    .ventajas-lista .ventaja-item,
    .ventajas-lista .ventaja-icono {
        transition: none;
    }

    .ventajas-lista .ventaja-item:hover,
    .ventajas-lista
    .ventaja-item:hover
    .ventaja-icono {
        transform: none;
    }
}


/* ==========================================================
   FIN DE STYLE.CSS
   TRANSPORTES ZAI | SOLUCIONES LOGÍSTICAS
========================================================== */