/* =========================================================
   EXOSTOS AMAYA M&M
   ESTILOS COMPLETOS — DISEÑO CORPORATIVO PREMIUM
========================================================= */

:root {
    --amarillo: #ffc400;
    --amarillo-hover: #e6ad00;
    --amarillo-claro: #fff7d6;
    --negro: #151719;
    --negro-2: #202326;
    --gris-oscuro: #34383d;
    --gris: #6d737a;
    --gris-claro: #f4f5f6;
    --gris-linea: #e1e4e7;
    --blanco: #ffffff;
    --verde-whatsapp: #25d366;
    --sombra: 0 16px 40px rgba(0,0,0,.10);
    --sombra-fuerte: 0 22px 55px rgba(0,0,0,.16);
    --radio: 6px;
    --transicion: .35s cubic-bezier(.22,.61,.36,1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    color: var(--gris-oscuro);
    background: var(--blanco);
    line-height: 1.65;
    overflow-x: hidden;
}

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

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

button,
input,
textarea {
    font: inherit;
}

.contenedor {
    width: min(1180px, 90%);
    margin: 0 auto;
}

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

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid rgba(0,0,0,.08);
    backdrop-filter: blur(12px);
}

.menu {
    display: flex;
    align-items: center;
    gap: 27px;
}

.menu a {
    position: relative;
    color: var(--gris-oscuro);
    font-size: 12px;
    text-transform: uppercase;
    transition: var(--transicion);
}

.menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0;
    height: 3px;
    background: var(--amarillo);
    transition: var(--transicion);
}

.menu a:hover {
    color: var(--negro);
}

.menu a:hover::after {
    width: 100%;
}

.menu-movil {
    display: none;
    border: 0;
    background: transparent;
    color: var(--negro);
    font-size: 30px;
    cursor: pointer;
}

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

.hero {
    position: relative;
    min-height: 780px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(90deg,rgba(12,14,16,.96) 0%,rgba(12,14,16,.84) 46%,rgba(12,14,16,.28) 100%),
        url("../img/hero.webp") center/cover no-repeat;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,transparent 55%,rgba(255,196,0,.08));
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -190px;
    bottom: -220px;
    background: var(--amarillo);
    opacity: .11;
    transform: rotate(45deg);
}

.hero-contenido {
    position: relative;
    z-index: 2;
}

.hero-texto {
    max-width: 720px;
    color: var(--blanco);
}

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 9px 15px;
    border-left: 4px solid var(--amarillo);
    background: rgba(255,196,0,.09);
    color: var(--amarillo);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.7px;
}

.hero h1 {
    margin-bottom: 25px;
}

.hero h1 span {
    display: block;
    color: var(--amarillo);
}

.hero p {
    max-width: 620px;
    margin-bottom: 35px;
    color: #e4e6e8;
    font-size: 18px;
}

.hero-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.boton {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border-radius: 4px;
    font-size: 12px;
    text-transform: uppercase;
    transition: var(--transicion);
}

.boton-amarillo {
    background: var(--amarillo);
    color: var(--negro);
}

.boton-amarillo:hover {
    background: var(--amarillo-hover);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(255,196,0,.24);
}

.boton-contorno {
    border: 1px solid rgba(255,255,255,.75);
    color: var(--blanco);
}

.boton-contorno:hover {
    background: var(--blanco);
    color: var(--negro);
    transform: translateY(-3px);
}

/* =========================================================
   CIFRAS
========================================================= */

.cifra {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    border-right: 1px solid rgba(0,0,0,.12);
}

.cifra:last-child {
    border-right: 0;
}

.cifra strong {
    color: var(--negro);
    font-size: 34px;
    line-height: 1;
}

.cifra span {
    margin-top: 8px;
    color: #3d3d3d;
    font-size: 12px;
    font-weight: 700;
}

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

.seccion {
    padding: 110px 0;
}

.titulo-seccion {
    max-width: 760px;
    margin-bottom: 58px;
}

.titulo-seccion h2 {
    color: var(--negro);
}

.titulo-seccion.centrado {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

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

.nosotros {
    background: var(--blanco);
    overflow: hidden;
}

.nosotros-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.nosotros-texto p {
    margin-bottom: 20px;
    color: var(--gris);
    font-size: 16px;
}

.nosotros-texto strong {
    color: var(--negro);
}

.nosotros-imagen {
    position: relative;
    min-height: 450px;
    overflow: hidden;
    border-radius: var(--radio);
    box-shadow: var(--sombra-fuerte);
}

.nosotros-imagen img {
    width: 100%;
    height: 100%;
    min-height: 450px;
    object-fit: cover;
    transition: transform .8s ease;
}

.nosotros-imagen:hover img {
    transform: scale(1.05);
}

.nosotros-imagen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(0,0,0,.78),transparent 58%);
    pointer-events: none;
}

.nosotros-imagen-texto {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 25px;
    z-index: 2;
    color: var(--blanco);
}

.nosotros-imagen-texto span {
    display: block;
    margin-bottom: 5px;
    color: var(--amarillo);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.nosotros-imagen-texto strong {
    color: var(--blanco);
    font-family: "Montserrat",sans-serif;
    font-size: 20px;
}

/* =========================================================
   MISIÓN / VISIÓN / VALORES
========================================================= */

.identidad-numero {
    margin-bottom: 4px;
}

/* =========================================================
   SERVICIOS
========================================================= */

.servicio-card:hover {
    border-top-color: var(--amarillo);
}

.servicio-card h3 {
    margin-bottom: 13px;
}

/* =========================================================
   TECNOLOGÍA
========================================================= */

.tecnologia h2 {
    margin-bottom: 22px;
}

.tecnologia p {
    margin-bottom: 30px;
}

.tecnologia-lista div {
    padding: 17px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: #e7e7e7;
    font-size: 14px;
    transition: var(--transicion);
}

.tecnologia-lista div:hover {
    border-color: rgba(255,196,0,.5);
    transform: translateY(-3px);
}

.tecnologia-lista strong {
    margin-right: 8px;
    color: var(--amarillo);
}

/* =========================================================
   ANTES / DESPUÉS
========================================================= */

.resultados {
    background: var(--blanco);
}

/* =========================================================
   PROCESO — DISEÑO NUEVO
========================================================= */

.paso {
    position: relative;
    min-height: 205px;
    padding: 28px 24px 28px 28px;
    background: var(--blanco);
    border: 1px solid var(--gris-linea);
}

.paso:nth-child(4n+1),
.paso:nth-child(4n+2),
.paso:nth-child(4n+3) {
    border-right: 0;
}

.paso:hover {
    z-index: 3;
    transform: translateY(-7px);
    box-shadow: var(--sombra);
    border-color: var(--amarillo);
}

.paso strong {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    border-radius: 50%;
    background: var(--negro);
    color: var(--amarillo);
    font-family: "Montserrat",sans-serif;
    font-size: 12px;
    font-weight: 900;
    transition: var(--transicion);
}

.paso:hover strong {
    background: var(--amarillo);
    color: var(--negro);
    transform: scale(1.08);
}

.paso h3 {
    max-width: 190px;
    color: var(--negro);
    font-size: 16px;
    line-height: 1.3;
}

/* =========================================================
   FLOTAS
========================================================= */

.flotas .titulo-seccion > span {
    color: var(--amarillo);
}

.flotas .titulo-seccion h2 {
    color: var(--blanco);
}

.flotas-grid div {
    min-height: 125px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.12);
    background: #22252a;
    color: #f1f1f1;
    font-weight: 700;
    font-size: 14px;
    transition: var(--transicion);
}

.flotas-grid div:hover {
    background: var(--amarillo);
    color: var(--negro);
    transform: translateY(-5px);
}

/* =========================================================
   CLIENTES
========================================================= */

.clientes {
    padding: 95px 0;
    background: var(--blanco);
}

/* CONTENEDOR DE LOGOS */

.clientes-lista {
    width: 100%;
    margin-top: 55px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    justify-content: center;
}

/* CUADRO DE CADA CLIENTE */

.cliente-logo {
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background: var(--gris-claro);
    border: 1px solid var(--gris-linea);
    transition: var(--transicion);
}

/* LOGO */

.cliente-logo img {
    width: 100%;
    height: 100%;
    max-width: 120px;
    max-height: 55px;
    object-fit: contain;
    display: block;
    transition: transform .35s ease,
        filter .35s ease,
        opacity .35s ease;
}

/* HOVER */

.cliente-logo:hover {
    border-color: var(--amarillo);
    background: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0,0,0,.08);
}

.cliente-logo:hover img {
    transform: scale(1.06);
}

/* =========================================================
   CONTACTO
========================================================= */

.contacto {
    background: var(--gris-claro);
}

.contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: stretch;
}

.contacto h2 {
    max-width: 600px;
    margin-bottom: 20px;
    color: var(--negro);
    font-size: clamp(38px,5vw,62px);
    line-height: 1.03;
}

.contacto > .contenedor > div > p {
    margin-bottom: 28px;
    color: var(--gris);
    font-size: 17px;
}

.contacto-datos {
    margin-bottom: 30px;
}

.contacto-datos p {
    margin-bottom: 13px;
    color: var(--gris-oscuro);
    font-size: 15px;
}

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

.footer {
    padding: 45px 0;
    background: #0d0f11;
    color: #a8adb2;
}

.footer-contenido {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.footer strong {
    color: var(--blanco);
    font-family: "Montserrat",sans-serif;
    font-size: 17px;
}

.footer p {
    margin-top: 5px;
    font-size: 12px;
}

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

.whatsapp-flotante {
    color: var(--blanco);
    font-size: 0;
}

/* =========================================================
   ANIMACIONES DE SCROLL
========================================================= */

.servicio-card,
.paso,
.cifra {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity .7s ease, transform .7s ease, box-shadow .35s ease, border-color .35s ease;
}

.servicio-card.visible,
.paso.visible,
.cifra.visible {
    opacity: 1;
    transform: translateY(0);
}

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

@media (max-width: 1050px) {

    .menu {
        gap: 17px;
    }

    .menu a {
        font-size: 11px;
    }

}

@media (max-width: 850px) {

    .menu-movil {
        display: block;
    }

    .menu {
        position: absolute;
        top: 75px;
        left: 0;
        width: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--blanco);
        border-top: 1px solid var(--gris-linea);
        box-shadow: 0 15px 30px rgba(0,0,0,.12);
    }

    .menu.menu-abierto {
        display: flex;
    }

    .menu a {
        padding: 16px 25px;
        border-bottom: 1px solid var(--gris-linea);
        font-size: 13px;
    }

    .menu a::after {
        display: none;
    }

    .hero {
        min-height: 700px;
    }

    .nosotros-grid,
    .tecnologia-grid,
    .contacto-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .paso:nth-child(4n+1),
    .paso:nth-child(4n+2),
    .paso:nth-child(4n+3) {
        border-right: 1px solid var(--gris-linea);
    }

    .paso:nth-child(odd) {
        border-right: 0;
    }

    .cifra:nth-child(2) {
        border-right: 0;
    }

}

@media (max-width: 600px) {

    .contenedor {
        width: 92%;
    }

    .seccion {
        padding: 78px 0;
    }

    .hero {
        min-height: 680px;
        align-items: center;
    }

    .hero p {
        font-size: 16px;
    }

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

    .boton {
        width: 100%;
    }

    .cifra {
        min-height: 120px;
        padding: 15px;
    }

    .cifra strong {
        font-size: 27px;
    }

    .cifra span {
        font-size: 10px;
    }

    .nosotros-imagen,
    .nosotros-imagen img {
        min-height: 350px;
    }

    .paso:nth-child(odd) {
        border-right: 1px solid var(--gris-linea);
    }

    .paso {
        min-height: 165px;
    }

    .contacto h2 {
        font-size: 42px;
    }

    .footer-contenido {
        flex-direction: column;
        align-items: flex-start;
    }

}

/* =========================================================
   V2 — IDENTIDAD TIPOGRÁFICA PREMIUM / INDUSTRIAL
========================================================= */

body {
    font-family: "Inter", sans-serif;
    letter-spacing: -0.01em;
}

h1,
h2,
h3,
h4,
h5,
h6,
.menu a,
.boton,
.cifra strong,
.etiqueta,
.titulo-seccion > span {
    font-family: "Manrope", sans-serif;
}

/* HERO */

.hero h1 {
    max-width: 820px;
    font-size: clamp(48px, 5.7vw, 76px);
    line-height: .98;
    font-weight: 800;
    letter-spacing: -3.2px;
}

.hero h1 span {
    font-weight: 800;
}

/* ETIQUETAS DE SECCIÓN */

.titulo-seccion > span {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: #9b7600;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.titulo-seccion > span::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--amarillo);
}

/* TÍTULOS PRINCIPALES */

.titulo-seccion h2 {
    max-width: 820px;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -2px;
}

.titulo-seccion p {
    max-width: 650px;
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.75;
    color: #73787d;
}

/* TÍTULOS DE TARJETAS */

.servicio-card h3,
.paso h3 {
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    letter-spacing: -.65px;
}

/* CIFRAS */

.cifra strong {
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    letter-spacing: -1.5px;
}

/* MENÚ */

.menu a {
    font-weight: 700;
    letter-spacing: .35px;
}

/* BOTONES */

.boton {
    font-weight: 800;
    letter-spacing: .45px;
}

/* CONTACTO */

.contacto h2 {
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    letter-spacing: -1.8px;
}

/* MÓVIL */

@media (max-width: 700px) {

    .hero h1 {
        font-size: clamp(42px, 11vw, 60px);
        letter-spacing: -2.2px;
    }

    .titulo-seccion h2 {
        font-size: clamp(32px, 9vw, 43px);
        letter-spacing: -1.4px;
    }

}

/* número */

.identidad-numero {
    margin: 0 0 17px;
}

/* =========================================================
   CORRECCIÓN HEADER — MARCA + LOGO
========================================================= */

.header-contenedor {
    width: min(1180px, 90%);
    min-height: 88px;
    height: 88px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.marca {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    text-decoration: none;
    color: var(--negro);
}

.marca-logo {
    width: 58px;
    height: 58px;
    max-width: 58px;
    object-fit: contain;
    display: block;
}

.marca-texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.marca-texto strong {
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--negro);
    white-space: nowrap;
}

.marca-texto span {
    font-family: "Inter", sans-serif;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 2px;
    color: #b28700;
    white-space: nowrap;
}

.header .menu {
    display: flex;
    align-items: center;
    gap: 27px;
}

.header .menu a {
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--gris-oscuro);
}

.hero {
    padding-top: 88px;
}

@media (max-width: 900px) {

    .header-contenedor {
        width: min(1180px, 92%);
        gap: 18px;
    }

    .marca-logo {
        width: 52px;
        height: 52px;
        max-width: 52px;
    }

    .marca-texto strong {
        font-size: 15px;
    }

    .header .menu {
        gap: 17px;
    }

    .header .menu a {
        font-size: 10px;
    }

}

@media (max-width: 760px) {

    .header-contenedor {
        min-height: 76px;
        height: 76px;
    }

    .marca-logo {
        width: 50px;
        height: 50px;
        max-width: 50px;
    }

    .marca-texto strong {
        font-size: 14px;
    }

    .marca-texto span {
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .header .menu {
        position: absolute;
        top: 76px;
        left: 0;
        width: 100%;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 24px 30px;
        background: #fff;
        border-top: 1px solid #eee;
        box-shadow: 0 15px 30px rgba(0,0,0,.10);
    }

    .header .menu.menu-abierto {
        display: flex;
    }

    .header .menu a {
        width: 100%;
        padding: 10px 0;
        font-size: 13px;
    }

    .menu-movil {
        display: block;
        border: 0;
        background: transparent;
        color: var(--negro);
        font-size: 27px;
        cursor: pointer;
    }

    .hero {
        padding-top: 76px;
    }

}

@media (max-width: 480px) {

    .marca {
        gap: 9px;
    }

    .marca-logo {
        width: 45px;
        height: 45px;
        max-width: 45px;
    }

    .marca-texto strong {
        font-size: 12px;
    }

    .marca-texto span {
        font-size: 7px;
        letter-spacing: 1px;
    }

}

/* =========================================================
   AJUSTE FINAL — CIFRAS / PANEL TÉCNICO PREMIUM
   Esta sección reemplaza visualmente la antigua franja amarilla.
========================================================= */

.cifras {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 10% 50%, rgba(255,196,0,.12), transparent 24%),
        radial-gradient(circle at 88% 50%, rgba(255,255,255,.045), transparent 26%),
        linear-gradient(135deg, #111417 0%, #1b1f23 48%, #101315 100%);
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
}

/* Textura geométrica industrial */

.cifras::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .15;
    pointer-events: none;
    background-image: linear-gradient(30deg, rgba(255,255,255,.028) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.028) 87.5%, rgba(255,255,255,.028)),
        linear-gradient(150deg, rgba(255,255,255,.028) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.028) 87.5%, rgba(255,255,255,.028));
    background-size: 34px 58px;
}

/* Línea de identidad */

.cifras::after {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    width: 84%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--amarillo) 18%,
        var(--amarillo) 82%,
        transparent
    );
    opacity: .9;
}

.cifras-grid {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    min-height: 158px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/* Indicador */

.cifras-grid .cifra {
    position: relative;
    min-height: 158px;
    padding: 38px 34px 27px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: transparent;
    border: 0;
    transition: background .35s ease,
        transform .35s ease;
}

/* 01 / 02 / 03 / 04 — no depende del HTML */

.cifras-grid .cifra::before {
    position: absolute;
    top: 24px;
    left: 34px;
    color: var(--amarillo);
    font-family: "Manrope", sans-serif;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1.8px;
    opacity: .85;
}

.cifras-grid .cifra:nth-child(1)::before {
    content: "01";
}

.cifras-grid .cifra:nth-child(2)::before {
    content: "02";
}

.cifras-grid .cifra:nth-child(3)::before {
    content: "03";
}

.cifras-grid .cifra:nth-child(4)::before {
    content: "04";
}

/* Separadores */

.cifras-grid .cifra:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 27px;
    right: 0;
    width: 1px;
    height: calc(100% - 54px);
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255,255,255,.14) 25%,
        rgba(255,255,255,.14) 75%,
        transparent
    );
}

/* Números / indicadores principales */

.cifras-grid .cifra strong {
    position: relative;
    display: block;
    margin-top: 9px;
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: clamp(34px, 3.3vw, 46px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -1.8px;
}

.cifras-grid .cifra span {
    display: block;
    margin-top: 12px;
    max-width: 180px;
    color: rgba(255,255,255,.62);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: .2px;
}

/* Línea amarilla bajo cada dato */

.cifras-grid .cifra strong::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 22px;
    height: 2px;
    background: var(--amarillo);
    transform-origin: left;
    transition: width .35s ease;
}

/* Hover */

.cifras-grid .cifra:hover {
    background: linear-gradient(
        180deg,
        rgba(255,196,0,.075),
        rgba(255,196,0,.018)
    );
    transform: translateY(-3px);
}

.cifras-grid .cifra:hover strong::after {
    width: 42px;
}

/* Entrada al hacer scroll */

.cifras-grid .cifra {
    opacity: 0;
    transform: translateY(18px);
}

.cifras-grid .cifra.visible {
    opacity: 1;
    transform: translateY(0);
}

.cifras-grid .cifra:nth-child(1) {
    transition-delay: .05s;
}

.cifras-grid .cifra:nth-child(2) {
    transition-delay: .12s;
}

.cifras-grid .cifra:nth-child(3) {
    transition-delay: .19s;
}

.cifras-grid .cifra:nth-child(4) {
    transition-delay: .26s;
}

/* Tablet */

@media (max-width: 800px) {

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

    .cifras-grid .cifra {
        min-height: 145px;
        padding: 34px 24px 25px;
    }

    .cifras-grid .cifra:nth-child(2)::after {
        display: none;
    }

    .cifras-grid .cifra:nth-child(1),
    .cifras-grid .cifra:nth-child(2) {
        border-bottom: 1px solid rgba(255,255,255,.10);
    }

    .cifras-grid .cifra:nth-child(2),
    .cifras-grid .cifra:nth-child(4) {
        border-left: 1px solid rgba(255,255,255,.10);
    }

    .cifras-grid .cifra::before {
        left: 24px;
    }

}

/* Móvil */

@media (max-width: 500px) {

    .cifras-grid .cifra {
        min-height: 132px;
        padding: 30px 17px 22px;
    }

    .cifras-grid .cifra::before {
        left: 17px;
        top: 18px;
    }

    .cifras-grid .cifra strong {
        font-size: 30px;
    }

    .cifras-grid .cifra span {
        max-width: 125px;
        font-size: 10px;
    }

}

/* Número superior */

.identidad-numero {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    height: 30px;
    line-height: 1;
}

/* =========================================================
   SERVICIOS — HERO INDUSTRIAL CON FOTO DE CATALIZADOR
   Imagen: ../img/fondo.webp
========================================================= */

.servicios {
    isolation: isolate;
    color: #fff;
    background: #101417;
}

/* Fotografía de fondo */

.servicios::before {
    content: "";
    position: absolute;
    inset: -22px;
    z-index: -3;
    background: url("../img/fondo.webp") center center / cover no-repeat;
    transform: scale(1.035);
    animation: servicios-fondo 18s ease-in-out infinite alternate;
}

@keyframes servicios-fondo {
    from { transform: scale(1.035); }
    to   { transform: scale(1.075); }
}

/* Capa oscura: conserva el detalle del catalizador */

.servicios::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(
            90deg,
            rgba(7,10,13,.94) 0%,
            rgba(7,10,13,.82) 36%,
            rgba(7,10,13,.52) 67%,
            rgba(7,10,13,.68) 100%
        ),
        linear-gradient(
            180deg,
            rgba(7,10,13,.28) 0%,
            rgba(7,10,13,.78) 100%
        );
    pointer-events: none;
}

/* Línea de identidad en la parte superior */

.servicios .contenedor {
    position: relative;
    z-index: 2;
}

/* Encabezado */

.servicios .titulo-seccion.centrado {
    max-width: 780px;
    margin: 0 0 62px;
    text-align: left;
}

.servicios .titulo-seccion span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 19px;
    color: #d9a900;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.8px;
}

.servicios .titulo-seccion span::before {
    content: "";
    width: 40px;
    height: 3px;
    background: #d9a900;
}

.servicios .titulo-seccion h2 {
    max-width: 760px;
    margin: 0 0 20px;
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: clamp(42px, 5vw, 68px);
    line-height: .98;
    font-weight: 800;
    letter-spacing: -2.8px;
}

.servicios .titulo-seccion p {
    max-width: 650px;
    margin: 0;
    color: rgba(255,255,255,.68);
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.7;
}

/* Tarjetas */

.servicio-card {
    position: relative;
    min-height: 255px;
    padding: 30px 30px 32px;
    overflow: hidden;
    background: linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(244,245,245,.91)
        );
    border: 1px solid rgba(255,255,255,.52);
    border-top: 3px solid transparent;
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .45s cubic-bezier(.22,.61,.36,1),
        box-shadow .45s ease,
        border-color .45s ease,
        background .45s ease;
}

/* Barra amarilla superior */

.servicio-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 54px;
    height: 3px;
    background: #d9a900;
    transition: width .45s cubic-bezier(.22,.61,.36,1);
}

/* Número decorativo */

.servicio-card::after {
    content: attr(data-number);
    position: absolute;
    right: 14px;
    bottom: -15px;
    color: rgba(217,169,0,.10);
    font-family: "Manrope", sans-serif;
    font-size: 105px;
    line-height: .8;
    font-weight: 800;
    letter-spacing: -7px;
    pointer-events: none;
    transition: transform .45s ease,
        color .45s ease;
}

.servicio-numero {
    position: relative;
    z-index: 2;
    margin-bottom: 27px;
    color: #d9a900;
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.servicio-card h3 {
    position: relative;
    z-index: 2;
    max-width: 330px;
    margin: 0 0 13px;
    color: #151719;
    font-family: "Manrope", sans-serif;
    font-size: 21px;
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -.5px;
}

.servicio-card p {
    position: relative;
    z-index: 2;
    max-width: 390px;
    margin: 0;
    color: #697078;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.7;
}

/* Hover */

.servicio-card:hover {
    transform: translateY(-9px);
    border-color: rgba(217,169,0,.55);
    box-shadow: 0 28px 60px rgba(0,0,0,.28),
        0 0 0 1px rgba(217,169,0,.08);
}

.servicio-card:hover::before {
    width: 100%;
}

.servicio-card:hover::after {
    color: rgba(217,169,0,.17);
    transform: translate(-7px, -5px);
}

/* Entrada escalonada */

.servicio-card {
    opacity: 0;
    transform: translateY(25px);
}

.servicio-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.servicio-card:nth-child(1) {
    transition-delay: .04s;
}

.servicio-card:nth-child(2) {
    transition-delay: .10s;
}

.servicio-card:nth-child(3) {
    transition-delay: .16s;
}

.servicio-card:nth-child(4) {
    transition-delay: .22s;
}

.servicio-card:nth-child(5) {
    transition-delay: .28s;
}

.servicio-card:nth-child(6) {
    transition-delay: .34s;
}

.servicio-card.visible:hover {
    transform: translateY(-9px);
}

/* Móvil */

@media (max-width: 700px) {

    .servicios .titulo-seccion.centrado {
        margin-bottom: 42px;
    }

    .servicios .titulo-seccion h2 {
        font-size: 40px;
        letter-spacing: -1.6px;
    }

    .servicio-card {
        min-height: 225px;
        padding: 28px 25px 30px;
    }

}

/* =========================================================
   CORRECCIÓN TECNOLOGÍA — estructura actual del HTML
========================================================= */

.tecnologia {
    background: radial-gradient(circle at 88% 35%, rgba(217,169,0,.10), transparent 30%),
        linear-gradient(135deg, #f4f5f5 0%, #ffffff 62%, #eef0f1 100%);
    color: #151719;
}

.tecnologia::before {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    right: -190px;
    top: -170px;
    border: 1px solid rgba(217,169,0,.16);
    transform: rotate(45deg);
    pointer-events: none;
}

.tecnologia-grid > div:first-child {
    color: #151719;
}

.tecnologia .etiqueta {
    display: inline-flex;
    align-items: center;
    padding: 11px 17px;
    border-left: 3px solid #d9a900;
    background: rgba(217,169,0,.09);
    color: #d9a900;
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.6px;
}

.tecnologia h2 {
    margin: 23px 0 23px;
    color: #151719 !important;
    font-family: "Manrope", sans-serif;
    font-size: clamp(42px, 4.5vw, 64px);
    line-height: .98;
    font-weight: 800;
    letter-spacing: -2.7px;
}

.tecnologia p {
    max-width: 600px;
    margin: 0 0 36px;
    color: #687078 !important;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.75;
}

/* Lista real del HTML */

.tecnologia-lista > div {
    min-height: 62px;
    padding: 18px 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: #25292d !important;
    background: rgba(255,255,255,.86);
    border: 1px solid #dfe2e4;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    transition: transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.tecnologia-lista > div strong {
    color: #d9a900 !important;
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
}

.tecnologia-lista > div:hover {
    transform: translateY(-4px);
    border-color: rgba(217,169,0,.55);
    box-shadow: 0 12px 28px rgba(21,23,25,.09);
}

/* Espacio real para la imagen */

.tecnologia-imagen {
    display: block;
    opacity: 1 !important;
    transform: none !important;
}

.tecnologia-imagen img {
    z-index: 2;
}

.tecnologia-imagen::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 22px -18px -20px 20px;
    background: #d9a900;
    opacity: .15;
}

/* Animación de entrada sin ocultar contenido si el JS aún no activa visible */

.tecnologia-grid > div {
    opacity: 1;
    transform: none;
}

.tecnologia-grid > div:first-child {
    animation: tecnologia-entrada .75s ease both;
}

.tecnologia-imagen {
    animation: tecnologia-entrada .85s .08s ease both;
}

@keyframes tecnologia-entrada {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Móvil */

@media (max-width: 600px) {

    .tecnologia h2 {
        font-size: 40px;
        letter-spacing: -1.6px;
    }

}

/* ==========================================
   SOLUCIONES PARA CADA FLOTA
========================================== */

.flotas {
    position: relative;
    padding: 120px 0 130px;
    background: #151719;
    overflow: hidden;
}

/* Detalle decorativo */

.flotas::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    right: -250px;
    top: -250px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 196, 0, 0.12) 0%,
        rgba(255, 196, 0, 0) 70%
    );
    pointer-events: none;
}

/* Encabezado */

.flotas-encabezado {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto 60px;
    text-align: center;
}

.flotas-encabezado .etiqueta-seccion {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    color: #ffc400;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.flotas-encabezado .etiqueta-seccion::before {
    content: "";
    width: 28px;
    height: 2px;
    background: #ffc400;
}

.flotas-encabezado h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 0.98;
    font-weight: 800;
    letter-spacing: -2.5px;
}

.flotas-encabezado h2 span {
    color: #ffc400;
}

.flotas-encabezado p {
    max-width: 620px;
    margin: 24px auto 0;
    color: #aeb3b8;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.7;
}

/* =========================================================
   FLOTAS — TARJETAS CON IMAGEN
========================================================= */

.flotas-grid {
    position: relative;
    z-index: 2;
}

/* TARJETA */

.flota-card {
    position: relative;
    overflow: hidden;
    background: #222529;
    border: 1px solid rgba(255,255,255,.14);
    cursor: pointer;
    isolation: isolate;
}

/* IMAGEN */

.flota-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .42;
    transform: scale(1.02);
    filter: brightness(.62)
        saturate(.90);
    transition: transform .8s cubic-bezier(.22,.61,.36,1),
        opacity .6s ease,
        filter .6s ease;
}

/* CAPA OSCURA */

.flota-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
            180deg,
            rgba(10,12,14,.12) 0%,
            rgba(10,12,14,.30) 45%,
            rgba(10,12,14,.82) 100%
        );
    transition: background .6s ease;
}

/* CONTENIDO */

.flota-contenido {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    z-index: 2;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(20,22,25,.78);
    backdrop-filter: blur(3px);
    transition: background .5s ease,
        transform .5s ease,
        border-color .5s ease;
}

.flota-numero {
    display: block;
    margin-bottom: 10px;
    color: #ffc400;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.flota-contenido h3 {
    margin: 0;
    max-width: 260px;
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: 19px;
    line-height: 1.2;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* LÍNEA AMARILLA */

.flota-linea {
    display: block;
    width: 32px;
    height: 3px;
    margin-top: 16px;
    background: #ffc400;
    transition: width .5s ease;
}

/* =========================================================
   HOVER
========================================================= */

.flota-card:hover img {
    opacity: 1;
    transform: scale(1.09);
    filter: brightness(.90)
        saturate(1.12);
}

.flota-card:hover .flota-overlay {
    background: linear-gradient(
            180deg,
            rgba(10,12,14,.02) 0%,
            rgba(10,12,14,.12) 40%,
            rgba(10,12,14,.68) 100%
        );
}

.flota-card:hover .flota-contenido {
    background: rgba(20,22,25,.88);
    border-color: rgba(255,196,0,.55);
    transform: translateY(-5px);
}

.flota-card:hover .flota-linea {
    width: 65px;
}

/* BORDE AMARILLO */

.flota-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border: 1px solid transparent;
    pointer-events: none;
    transition: border-color .4s ease;
}

.flota-card:hover::after {
    border-color: rgba(255,196,0,.75);
}

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

@media (max-width: 650px) {

    .flotas {
        padding: 80px 0;
    }

    .flotas-encabezado h2 {
        font-size: 42px;
        letter-spacing: -1.5px;
    }

}

/* =========================================================
   FLOTAS - CORRECCIÓN FINAL
========================================================= */

.flotas-grid .flota-card {
    position: relative !important;
    height: 330px !important;
    overflow: hidden !important;
    background: #222529 !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    isolation: isolate !important;
}

/* IMAGEN SIEMPRE VISIBLE */

.flotas-grid .flota-card > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: .48 !important;
    transform: scale(1.03) !important;
    filter: brightness(.72) saturate(.95) !important;
    z-index: 0 !important;
    transition: opacity .5s ease,
        transform .7s ease,
        filter .5s ease !important;
}

/* OSCURECIMIENTO */

.flotas-grid .flota-card > .flota-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(
            180deg,
            rgba(10,12,14,.10) 0%,
            rgba(10,12,14,.25) 45%,
            rgba(10,12,14,.78) 100%
        ) !important;
    pointer-events: none !important;
}

/* TEXTO */

.flotas-grid .flota-card > .flota-contenido {
    position: absolute !important;
    left: 28px !important;
    right: 28px !important;
    bottom: 26px !important;
    z-index: 2 !important;
    padding: 22px !important;
    background: rgba(25,27,30,.82) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    backdrop-filter: blur(3px);
    transition: transform .4s ease,
        background .4s ease,
        border-color .4s ease !important;
}

/* NÚMERO */

.flotas-grid .flota-card .flota-numero {
    display: block !important;
    color: #ffc400 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

/* TÍTULO */

.flotas-grid .flota-card h3 {
    color: #fff !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

/* LÍNEA */

.flotas-grid .flota-card .flota-linea {
    display: block !important;
    width: 32px !important;
    height: 3px !important;
    margin-top: 15px !important;
    background: #ffc400 !important;
}

/* =========================================================
   AL PASAR EL MOUSE
========================================================= */

.flotas-grid .flota-card:hover > img {
    opacity: 1 !important;
    transform: scale(1.10) !important;
    filter: brightness(.95)
        saturate(1.15) !important;
}

.flotas-grid .flota-card:hover > .flota-overlay {
    background: linear-gradient(
            180deg,
            rgba(10,12,14,.02) 0%,
            rgba(10,12,14,.08) 40%,
            rgba(10,12,14,.60) 100%
        ) !important;
}

.flotas-grid .flota-card:hover > .flota-contenido {
    transform: translateY(-5px) !important;
    background: #ffc400 !important;
    border-color: #ffc400 !important;
    box-shadow: 0 15px 35px rgba(0,0,0,.28),
        0 0 0 1px rgba(255,196,0,.35) !important;
    transition: transform .4s ease,
        background .4s ease,
        border-color .4s ease,
        box-shadow .4s ease !important;
}

/* =========================================================
   TARJETA
========================================================= */

.servicios-grid .servicio-card {
    position: relative !important;
    min-height: 430px !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #202326 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-top: 2px solid transparent !important;
    box-shadow: 0 14px 35px rgba(0,0,0,.12) !important;
    opacity: 1 !important;
    transform: none !important;
    transition: transform .45s cubic-bezier(.22,.61,.36,1),
        border-color .45s ease,
        box-shadow .45s ease !important;
}

/* =========================================================
   IMAGEN
========================================================= */

.servicio-imagen {
    position: relative;
    width: 100%;
    height: 205px;
    overflow: hidden;
    background: #151719;
}

.servicio-imagen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            180deg,
            rgba(10,12,14,.05) 0%,
            rgba(10,12,14,.15) 45%,
            rgba(10,12,14,.55) 100%
        );
    z-index: 1;
    transition: background .45s ease;
}

.servicio-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    filter: brightness(.82)
        saturate(.88);
    transition: transform .8s cubic-bezier(.22,.61,.36,1),
        filter .6s ease;
}

/* =========================================================
   NÚMERO
========================================================= */

.servicio-imagen .servicio-numero {
    position: absolute;
    left: 22px;
    bottom: 18px;
    z-index: 3;
    color: #ffc400;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

/* =========================================================
   CONTENIDO
========================================================= */

.servicio-contenido {
    position: relative;
    flex: 1;
    padding: 25px 25px 28px;
    background: linear-gradient(
            145deg,
            #222529,
            #1a1c1f
        );
    transition: background .45s ease;
}

/* Línea amarilla */

.servicio-linea {
    display: block;
    width: 38px;
    height: 3px;
    margin-bottom: 18px;
    background: #ffc400;
    transition: width .45s ease;
}

/* TÍTULO */

.servicio-contenido h3 {
    margin: 0 0 13px;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 21px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.5px;
}

/* TEXTO */

.servicio-contenido p {
    margin: 0;
    color: #aeb4b9;
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    line-height: 1.7;
}

/* =========================================================
   HOVER
========================================================= */

.servicios-grid .servicio-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(255,196,0,.60) !important;
    border-top-color: #ffc400 !important;
    box-shadow: 0 25px 50px rgba(0,0,0,.22) !important;
}

.servicios-grid .servicio-card:hover .servicio-imagen img {
    transform: scale(1.09);
    filter: brightness(.98)
        saturate(1.08);
}

.servicios-grid .servicio-card:hover .servicio-imagen::after {
    background: linear-gradient(
            180deg,
            rgba(10,12,14,.02) 0%,
            rgba(10,12,14,.08) 45%,
            rgba(10,12,14,.42) 100%
        );
}

.servicios-grid .servicio-card:hover .servicio-linea {
    width: 70px;
}

.servicios-grid .servicio-card:hover .servicio-contenido {
    background: linear-gradient(
            145deg,
            #25292d,
            #191b1e
        );
}

/* =========================================================
   PEQUEÑO DETALLE AMARILLO
========================================================= */

.servicios-grid .servicio-card::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 42px;
    height: 3px;
    background: #ffc400;
    transition: width .45s ease;
}

.servicios-grid .servicio-card:hover::after {
    width: 85px;
}

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

@media (max-width: 650px) {

    .servicios-grid .servicio-card {
        min-height: 400px !important;
    }

    .servicio-imagen {
        height: 190px;
    }

}

/* =========================================================
   SERVICIOS
   Evita que visualmente se pegue con Tecnología
========================================================= */

.servicios {
    position: relative !important;
    min-height: 0 !important;
    padding: 115px 0 125px !important;
    overflow: hidden !important;
}

/* El grid conserva las 6 tarjetas */

.servicios-grid {
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

/* =========================================================
   TECNOLOGÍA
   Empieza claramente después de Servicios
========================================================= */

.tecnologia {
    position: relative !important;
    clear: both !important;
    margin-top: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Grid */

.tecnologia-grid {
    position: relative !important;
    z-index: 2 !important;
}

/* =========================================================
   IMAGEN DE TECNOLOGÍA
========================================================= */

.tecnologia-imagen {
    box-shadow: 0 28px 60px rgba(21,23,25,.14) !important;
}

/* Quitamos el bloque amarillo que estaba apareciendo arriba */

.tecnologia-imagen::before {
    display: none !important;
}

/* Imagen completa */

.tecnologia-imagen img {
    border: 0 !important;
    box-shadow: none !important;
    transform: scale(1.001) !important;
    transition: transform .7s ease,
        filter .5s ease !important;
}

/* Pequeño zoom */

.tecnologia-imagen:hover img {
    transform: scale(1.035) !important;
}

/* Etiqueta Tecnología sobre la foto */

.tecnologia-imagen::after {
    content: "TECNOLOGÍA" !important;
    position: absolute !important;
    left: 24px !important;
    bottom: 24px !important;
    z-index: 5 !important;
    padding: 10px 14px !important;
    color: #ffffff !important;
    background: rgba(21,23,25,.92) !important;
    font-family: "Manrope", sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
}

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

@media (max-width: 700px) {

    .servicios {
        padding: 85px 0 95px !important;
    }

    .servicios-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

}

@media (max-width: 600px) {

    .tecnologia-imagen::after {
        left: 15px !important;
        bottom: 15px !important;
    }

}

/* =========================================================
   EXOSTOS AMAYA M&M
   MISIÓN / VISIÓN / VALORES — DISEÑO EDITORIAL
========================================================= */

.identidad-nueva {
    width: 100%;
    margin-top: 95px;
}

/* =========================================================
   MISIÓN / VISIÓN — IMAGEN ORGÁNICA
========================================================= */

.identidad-bloque {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 360px;
    gap: 48px;
    align-items: center;
    min-height: 330px;
    padding: 58px 0;
    border-top: 1px solid var(--gris-linea);
}

.identidad-bloque-invertido {
    grid-template-columns: 360px minmax(0, 1fr) 70px;
    text-align: right;
}

.identidad-bloque:last-of-type {
    border-bottom: 1px solid var(--gris-linea);
}

.identidad-numero {
    align-self: start;
    padding-top: 58px;
    color: var(--amarillo);
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}

.identidad-bloque-invertido .identidad-numero {
    text-align: right;
}

.identidad-contenido {
    position: relative;
    max-width: 680px;
}

.identidad-bloque-invertido .identidad-contenido {
    margin-left: auto;
}

.identidad-contenido::before {
    content: "";
    display: block;
    width: 55px;
    height: 3px;
    margin-bottom: 25px;
    background: var(--amarillo);
}

.identidad-bloque-invertido .identidad-contenido::before {
    margin-left: auto;
}

.identidad-contenido > span {
    display: block;
    margin-bottom: 10px;
    color: var(--gris);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.identidad-contenido h3 {
    margin: 0 0 22px;
    color: var(--negro);
    font-size: clamp(42px, 4.5vw, 62px);
    line-height: .95;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -2.5px;
}

.identidad-contenido h3 span {
    color: var(--amarillo);
}

.identidad-contenido p {
    max-width: 650px;
    margin: 0;
    color: var(--gris);
    font-size: 16px;
    line-height: 1.8;
}

/* Imagen orgánica: no es un círculo perfecto */

.identidad-media {
    position: relative;
    width: 100%;
    max-width: 350px;
    aspect-ratio: 1 / .82;
    isolation: isolate;
}

.identidad-media img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid rgba(21, 23, 25, .12);
    border-radius: 44% 56% 58% 42% / 48% 42% 58% 52%;
    filter: saturate(.82) contrast(1.03);
    box-shadow: 0 22px 45px rgba(21,23,25,.10);
    transition: transform .55s cubic-bezier(.22,.61,.36,1),
                filter .45s ease,
                box-shadow .45s ease;
}

.identidad-media-marco {
    position: absolute;
    z-index: 1;
    inset: 10px -10px -10px 10px;
    border: 2px solid var(--amarillo);
    border-radius: 58% 42% 44% 56% / 48% 57% 43% 52%;
    opacity: .9;
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
}

.identidad-media-izquierda .identidad-media-marco {
    inset: 10px 10px -10px -10px;
}

.identidad-media:hover img {
    transform: scale(1.025) rotate(-1deg);
    filter: saturate(1) contrast(1.05);
    box-shadow: 0 28px 55px rgba(21,23,25,.15);
}

.identidad-media:hover .identidad-media-marco {
    transform: translate(4px, -4px);
}

.identidad-media-izquierda:hover .identidad-media-marco {
    transform: translate(-4px, -4px);
}

/* =========================================================
   VALORES
========================================================= */

.valores-nuevo {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 80px;
    padding: 95px 0 30px;
}

.valores-nuevo-titulo {
    max-width: 390px;
}

.valores-nuevo-titulo > span {
    display: block;
    margin-bottom: 15px;
    color: var(--amarillo);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.valores-nuevo-titulo h3 {
    margin: 0 0 20px;
    color: var(--negro);
    font-size: clamp(38px, 4vw, 55px);
    line-height: 1;
    letter-spacing: -2px;
}

.valores-nuevo-titulo h3 strong {
    color: var(--amarillo);
}

.valores-nuevo-titulo p {
    color: var(--gris);
    font-size: 14px;
    line-height: 1.7;
}

/* =========================================================
   LISTA INTERACTIVA
========================================================= */

.valores-lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--gris-linea);
    border-left: 1px solid var(--gris-linea);
}

.valor-nuevo {
    position: relative;
    width: 100%;
    min-height: 115px;
    padding: 28px 24px;
    border: 0;
    border-right: 1px solid var(--gris-linea);
    border-bottom: 1px solid var(--gris-linea);
    background: var(--blanco);
    color: var(--negro);
    text-align: left;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr 30px;
    grid-template-rows: auto auto;
    transition: background .35s ease, padding .35s ease, box-shadow .35s ease;
}

.valor-cabecera {
    display: flex;
    align-items: center;
    gap: 20px;
    grid-column: 1;
}

.valor-cabecera span {
    color: var(--amarillo);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

.valor-cabecera strong {
    color: var(--negro);
    font-size: 15px;
    font-weight: 800;
    transition: color .3s ease;
}

.valor-icono {
    grid-column: 2;
    grid-row: 1;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid var(--gris-linea);
    color: var(--negro);
    font-size: 20px;
    font-weight: 400;
    transition: transform .35s ease, background .35s ease, color .35s ease, border-color .35s ease;
}

.valor-descripcion {
    grid-column: 1 / -1;
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    color: var(--gris);
    font-size: 13px;
    line-height: 1.7;
    opacity: 0;
    transition: max-height .45s ease, margin-top .35s ease, opacity .3s ease;
}

.valor-nuevo:hover {
    background: #fafafa;
}

.valor-nuevo:hover .valor-cabecera strong {
    color: var(--amarillo);
}

.valor-nuevo.activo {
    box-shadow: inset 4px 0 0 var(--amarillo);
}

.valor-nuevo.activo .valor-cabecera span {
    color: var(--amarillo);
}

.valor-nuevo.activo .valor-icono {
    transform: rotate(45deg);
}

.valor-nuevo::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background: var(--amarillo);
    transition: width .4s ease;
}

.valor-nuevo:hover::before,
.valor-nuevo.activo::before {
    width: 100%;
}

/* =========================================================
   ANIMACIÓN
========================================================= */

.identidad-bloque,
.valores-nuevo {
    animation: identidadEntrada .8s ease both;
}

.identidad-bloque:nth-child(1) {
    animation-delay: .08s;
}

.identidad-bloque:nth-child(2) {
    animation-delay: .16s;
}

.valores-nuevo {
    animation-delay: .24s;
}

@keyframes identidadEntrada {
    from { opacity: 0; transform: translateY(25px); }
    to { opacity: 1; transform: translateY(0); }
}

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

@media (max-width: 1050px) {

    .identidad-bloque {
        grid-template-columns: 55px minmax(0, 1fr) 290px;
        gap: 35px;
    }

    .identidad-bloque-invertido {
        grid-template-columns: 290px minmax(0, 1fr) 55px;
    }

}

@media (max-width: 900px) {

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

    .valores-nuevo-titulo {
        max-width: 600px;
    }

    .identidad-media {
        max-width: 300px;
    }

}

@media (max-width: 760px) {

    .identidad-bloque,
    .identidad-bloque-invertido {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 25px;
        text-align: left;
    }

    .identidad-bloque-invertido .identidad-numero {
        text-align: left;
        order: -1;
    }

    .identidad-bloque-invertido .identidad-contenido {
        margin-left: 0;
    }

    .identidad-bloque-invertido .identidad-contenido::before {
        margin-left: 0;
    }

    .identidad-media {
        grid-column: 2;
        max-width: 360px;
        margin-top: 8px;
    }

    .identidad-media-izquierda {
        grid-column: 2;
        grid-row: auto;
    }

    .identidad-media-derecha {
        grid-column: 2;
    }

    .valores-lista {
        grid-template-columns: 1fr;
    }

    .valor-nuevo {
        min-height: 100px;
    }

}

@media (max-width: 500px) {

    .identidad-nueva {
        margin-top: 60px;
    }

    .identidad-bloque,
    .identidad-bloque-invertido {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 45px 0;
    }

    .identidad-numero,
    .identidad-bloque-invertido .identidad-numero {
        padding-top: 0;
        order: initial;
        text-align: left;
    }

    .identidad-media,
    .identidad-media-izquierda,
    .identidad-media-derecha {
        grid-column: 1;
        width: 88%;
        max-width: 340px;
        margin: 10px auto 0;
    }

    .identidad-media-izquierda {
        order: 2;
    }

    .identidad-contenido h3 {
        font-size: 40px;
    }

    .identidad-contenido p {
        font-size: 15px;
    }

    .valores-nuevo {
        padding-top: 65px;
    }

    .valores-nuevo-titulo h3 {
        font-size: 42px;
    }

    .valor-nuevo {
        padding: 24px 20px;
    }

}

/* =========================================================
   ASISTENTE VIRTUAL — EXOSTOS AMAYA M&M
   AÑADIDO SIN MODIFICAR EL DISEÑO EXISTENTE
========================================================= */

.asistente-flotante {
    position: fixed;
    right: 22px;
    bottom: 98px;
    z-index: 9998;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,196,0,.45);
    border-radius: 50%;
    background: var(--negro);
    color: var(--amarillo);
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
    transition: var(--transicion);
}

.asistente-flotante:hover {
    transform: translateY(-4px) scale(1.04);
    background: #202326;
    box-shadow: 0 14px 32px rgba(0,0,0,.28);
}

.asistente-icono {
    font-size: 27px;
    line-height: 1;
}

.asistente-punto {
    position: absolute;
    right: 2px;
    top: 2px;
    width: 11px;
    height: 11px;
    border: 2px solid var(--negro);
    border-radius: 50%;
    background: var(--amarillo);
}

.asistente-panel {
    position: fixed;
    right: 22px;
    bottom: 174px;
    z-index: 10000;
    width: min(370px, calc(100vw - 30px));
    overflow: hidden;
    background: var(--blanco);
    border: 1px solid var(--gris-linea);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0,0,0,.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.98);
    transform-origin: bottom right;
    transition: .28s ease;
}

.asistente-panel.abierto {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.asistente-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 17px 18px;
    background: var(--negro);
    color: var(--blanco);
    border-bottom: 3px solid var(--amarillo);
}

.asistente-identidad {
    display: flex;
    align-items: center;
    gap: 11px;
}

.asistente-avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    border-radius: 50%;
    background: var(--amarillo);
    font-size: 20px;
}

.asistente-identidad strong {
    display: block;
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;
}

.asistente-identidad span {
    display: block;
    margin-top: 2px;
    color: #c9cdd1;
    font-size: 11px;
}

.asistente-cerrar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: var(--blanco);
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    transition: var(--transicion);
}

.asistente-cerrar:hover {
    background: var(--amarillo);
    color: var(--negro);
}

.asistente-contenido {
    padding: 18px;
}

.asistente-saludo {
    margin-bottom: 15px;
    color: var(--gris-oscuro);
    font-size: 13px;
    line-height: 1.55;
}

.asistente-preguntas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.asistente-preguntas button {
    min-height: 48px;
    padding: 10px 11px;
    border: 1px solid var(--gris-linea);
    border-radius: 5px;
    background: #fafafa;
    color: var(--gris-oscuro);
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    cursor: pointer;
    transition: var(--transicion);
}

.asistente-preguntas button:hover {
    border-color: var(--amarillo);
    background: var(--amarillo-claro);
    color: var(--negro);
    transform: translateY(-2px);
}

.asistente-respuesta {
    margin-top: 13px;
    padding: 13px;
    border-left: 3px solid var(--amarillo);
    background: var(--gris-claro);
    color: var(--gris-oscuro);
    font-size: 12px;
    line-height: 1.55;
}

.asistente-respuesta strong {
    color: var(--negro);
}

.asistente-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    border-top: 1px solid var(--gris-linea);
    background: #fafafa;
}

.asistente-pie span {
    color: var(--gris);
    font-size: 10px;
}

.asistente-pie a {
    flex: 0 0 auto;
    color: #15803d;
    font-size: 11px;
    font-weight: 800;
}

.asistente-pie a:hover {
    color: #0f5f2c;
}

/* En móvil, ambos botones quedan separados y cómodos al pulgar. */

@media (max-width: 700px) {

    .asistente-panel {
        right: 15px;
        bottom: 150px;
        width: calc(100vw - 30px);
    }

    .asistente-preguntas {
        grid-template-columns: 1fr;
    }

}

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

.whatsapp-flotante {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    border-radius: 50%;
    z-index: 9998;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.22);
    transition: transform .3s ease, box-shadow .3s ease;
}

.whatsapp-flotante:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.whatsapp-icon {
    width: 38px;
    height: 38px;
    display: block;
    fill: #ffffff;
}

/* CELULAR */

@media (max-width: 700px) {

    .whatsapp-icon {
        width: 34px;
        height: 34px;
    }

}

/* ==========================================
   CENTRADO DEL ENCABEZADO DE RESULTADOS
========================================== */

.resultados .titulo-seccion {
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.resultados .titulo-seccion h2,
.resultados .titulo-seccion p,
.resultados .titulo-seccion span {
    text-align: center;
}

/* =========================================================
   RESULTADOS — ENCABEZADO CENTRADO
========================================================= */

#resultados .titulo-seccion {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 45px auto;
    padding: 0;
    text-align: center;
}

#resultados .titulo-seccion > span {
    display: block;
    width: fit-content;
    margin: 0 auto 18px auto;
    text-align: center;
}

#resultados .titulo-seccion > h2 {
    width: 100%;
    margin: 0 auto 18px auto;
    text-align: center;
}

#resultados .titulo-seccion > p {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

/* =========================================================
   VALORES — MOSTRAR TEXTO AL ABRIR
========================================================= */

.valor-nuevo.activo {
    background: var(--negro) !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.valor-nuevo.activo .valor-descripcion {
    display: block !important;
    max-height: 200px !important;
    height: auto !important;
    margin-top: 22px !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #c9c9c9 !important;
}

.valor-nuevo.activo .valor-cabecera strong {
    color: var(--blanco) !important;
}

.valor-nuevo.activo .valor-icono {
    background: var(--amarillo) !important;
    border-color: var(--amarillo) !important;
    color: var(--negro) !important;
}

/* CABECERA */

.tecnologia-cabecera strong {
    font-family: "Manrope", sans-serif;
}

/* TEXTO OCULTO */

.tecnologia-descripcion {
    margin-top: 0;
}

/* ---------- LISTA ---------- */

.tecnologia-lista {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

/* =========================================================
   BOTONES
========================================================= */

.tecnologia-paso {
    position: relative !important;
    width: 100% !important;
    min-height: 70px !important;
    margin: 0 !important;
    padding: 18px !important;
    display: grid !important;
    grid-template-columns: 1fr 30px !important;
    grid-template-rows: auto auto !important;
    border: 1px solid #dfe2e4 !important;
    background: rgba(255,255,255,.96) !important;
    color: #25292d !important;
    text-align: left !important;
    font-family: "Inter", sans-serif !important;
    box-sizing: border-box !important;
}

/* =========================================================
   QUITAMOS EL EFECTO DE LAS REGLAS ANTIGUAS
   SOBRE LOS DIV INTERNOS
========================================================= */

.tecnologia-paso .tecnologia-cabecera,
.tecnologia-paso .tecnologia-icono,
.tecnologia-paso .tecnologia-descripcion {
    border: 0 !important;
    background: transparent !important;
    transform: none !important;
}

/* ---------- CABECERA ---------- */

.tecnologia-cabecera {
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tecnologia-cabecera strong {
    color: #d9a900 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
}

.tecnologia-cabecera span {
    color: #25292d !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* ---------- + ---------- */

.tecnologia-icono {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #dfe2e4 !important;
    color: #25292d !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    transition: transform .35s ease,
        background .35s ease,
        color .35s ease !important;
}

/* =========================================================
   DESCRIPCIÓN OCULTA
========================================================= */

.tecnologia-descripcion {
    grid-column: 1 / -1 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #687078 !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: max-height .45s ease,
        margin .35s ease,
        opacity .3s ease,
        visibility .3s ease !important;
}

/* =========================================================
   HOVER
========================================================= */

.tecnologia-paso:hover {
    border-color: #d9a900 !important;
    box-shadow: 0 10px 25px rgba(21,23,25,.08) !important;
}

/* =========================================================
   ACTIVO
========================================================= */

.tecnologia-paso.activo {
    padding-top: 22px !important;
    box-shadow: inset 4px 0 0 #d9a900,
        0 12px 28px rgba(21,23,25,.15) !important;
}

/* =========================================================
   IMAGEN
========================================================= */

.tecnologia-imagen {
    position: relative !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #f3f3f3 !important;
    border: 1px solid #dfe2e4 !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
}

.tecnologia-imagen img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-position: center !important;
    display: block !important;
}

/* =========================================================
   CORRECCIÓN DEFINITIVA — IMAGEN TECNOLOGÍA
   NO MODIFICA EL RESTO DE LA PÁGINA
========================================================= */

.tecnologia-grid {
    display: grid !important;
}

/* COLUMNA IZQUIERDA */

.tecnologia-grid > div:first-child {
    grid-column: 1 !important;
    width: 100% !important;
}

/* COLUMNA DERECHA — IMAGEN */

.tecnologia-grid > .tecnologia-imagen {
    grid-column: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    aspect-ratio: auto !important;
    box-sizing: border-box !important;
}

/* IMAGEN */

.tecnologia-grid > .tecnologia-imagen img {
    top: 0 !important;
    left: 0 !important;
    transition: transform .6s ease !important;
}

/* QUITAR CUALQUIER ELEMENTO DECORATIVO ANTIGUO */

.tecnologia-grid > .tecnologia-imagen::before {
    display: none !important;
}

/* AJUSTE VISUAL TECNOLOGÍA */

.tecnologia {
    padding: 95px 0 105px !important;
}

.tecnologia-grid {
    width: min(1180px, 90%) !important;
    margin: 0 auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 55px !important;
    align-items: center !important;
}

.tecnologia-grid > div:first-child {
    min-width: 0 !important;
}

.tecnologia-lista {
    width: 100% !important;
    max-width: 600px !important;
}

.tecnologia-imagen {
    width: 100% !important;
}

/* =========================================================
   TECNOLOGÍA — DESPLIEGUE DEFINITIVO
========================================================= */

.tecnologia-paso {
    cursor: pointer !important;
}

/* INFORMACIÓN OCULTA */

.tecnologia-paso .tecnologia-descripcion {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: max-height 0.45s ease,
        margin-top 0.35s ease,
        padding 0.35s ease,
        opacity 0.3s ease,
        visibility 0.3s ease !important;
}

/* CUANDO SE ABRE */

.tecnologia-paso.activo .tecnologia-descripcion {
    padding-top: 0 !important;
    padding-bottom: 4px !important;
}

/* =========================================================
   TECNOLOGÍA — ACORDEÓN FINAL
========================================================= */

.tecnologia-paso {
    overflow: hidden !important;
    transition: all 0.35s ease !important;
}

/* DESCRIPCIÓN CERRADA */

.tecnologia-paso .tecnologia-descripcion {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

/* TARJETA ABIERTA */

.tecnologia-paso.activo {
    color: white !important;
}

/* TARJETA ACTIVA */

.tecnologia-paso.activo {
    background: #151719 !important;
    border-color: #d9a900 !important;
    padding-bottom: 22px !important;
    overflow: visible !important;
}

/* DESCRIPCIÓN CERRADA */

.tecnologia-paso .tecnologia-descripcion {
    grid-column: 1 / -1 !important;
    max-height: 0 !important;
    height: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
}

/* DESCRIPCIÓN ABIERTA */

.tecnologia-paso.activo .tecnologia-descripcion {
    display: block !important;
    grid-column: 1 / -1 !important;
    max-height: 300px !important;
    height: auto !important;
    margin-top: 18px !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    color: #d0d0d0 !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
}

/* TÍTULO ACTIVO */

.tecnologia-paso.activo .tecnologia-cabecera span {
    color: #ffffff !important;
}

.tecnologia-paso.activo .tecnologia-cabecera strong {
    color: #d9a900 !important;
}

/* SIGNO + */

.tecnologia-paso.activo .tecnologia-icono {
    background: #d9a900 !important;
    border-color: #d9a900 !important;
    color: #151719 !important;
    transform: rotate(45deg) !important;
}

.comparador img {
    position: absolute;
    inset: 0;
}

/* =========================================================
   FLOTAS — 6 TARJETAS CENTRADAS
========================================================= */

.flotas-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
}

/* Mantener las tarjetas uniformes */

.flota-card {
    width: 100% !important;
    height: 330px !important;
}

/* TABLET */

@media (max-width: 1000px) {

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

}

/* CELULAR */

@media (max-width: 650px) {

    .flotas-grid {
        grid-template-columns: 1fr !important;
    }

}

/* =====================================================
   BOTÓN VOLVER ARRIBA
===================================================== */

.boton-subir {
    position: fixed;
    right: 28px;
    bottom: 175px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ffc400;
    border-radius: 50%;
    background: #151719;
    color: #ffc400;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(15px);
    transition: opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
    z-index: 9999;
}

.boton-subir.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.boton-subir:hover {
    background: #ffc400;
    color: #151719;
    transform: translateY(-4px);
}

/* CELULAR */

@media (max-width: 700px) {

    .boton-subir {
        font-size: 23px;
    }

}

/* =========================================================
   1. TECNOLOGÍA — IMAGEN COMPLETA
========================================================= */

.tecnologia-imagen {
    width: 100%;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: hidden;
    background: #f3f3f3;
}

.tecnologia-imagen img {
    width: 100%;
    height: auto !important;
    max-width: 100%;
    display: block;
    object-fit: contain !important;
    object-position: center;
}

/* =========================================================
   2. ANTES / DESPUÉS — IMAGEN COMPLETA
========================================================= */

.comparador {
    height: auto !important;
    aspect-ratio: 16 / 10;
    touch-action: pan-y !important;
}

.comparador img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #eeeeee;
}

.comparador-antes img {
    object-fit: contain !important;
}

/* =========================================================
   3. EVITAR QUE EL COMPARADOR BLOQUEE EL SCROLL
========================================================= */

.comparador {
    overscroll-behavior: auto;
}

/* =========================================================
   4. LOGOS DE CLIENTES EN CELULAR
========================================================= */

@media (max-width: 700px) {

    .clientes-lista {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
        margin-top: 35px;
    }

    .cliente-logo {
        width: 100%;
        height: 95px;
        padding: 14px;
    }

    .cliente-logo img {
        width: auto;
        height: auto;
        max-width: 105px;
        max-height: 60px;
        object-fit: contain;
    }

}

/* =========================================================
   5. BOTONES FLOTANTES — CELULAR
========================================================= */

@media (max-width: 700px) {

    .whatsapp-flotante {
        right: 16px !important;
        bottom: 16px !important;
        width: 52px !important;
        height: 52px !important;
    }

    .asistente-flotante {
        right: 16px !important;
        bottom: 82px !important;
        width: 52px !important;
        height: 52px !important;
    }

    .boton-subir {
        right: 16px !important;
        bottom: 148px !important;
        width: 44px !important;
        height: 44px !important;
    }

}

/* =========================================================
   6. TECNOLOGÍA — CELULAR
========================================================= */

@media (max-width: 700px) {

    .tecnologia {
        padding: 70px 0;
    }

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

    .tecnologia-imagen {
        width: 100%;
        margin-top: 5px;
        border-radius: 6px;
    }

    .tecnologia-imagen img {
        width: 100%;
        height: auto !important;
    }

}

/* =========================================================
   7. COMPARADOR — CELULAR
========================================================= */

@media (max-width: 700px) {

    .comparador {
        height: auto !important;
    }

    .comparador img {
        object-fit: contain !important;
    }

}

/* Imagen DESPUÉS */

.comparador-despues img {
    inset: 0;
}

/* IMPORTANTE:
   La imagen de ANTES conserva exactamente
   el mismo tamaño que la imagen DESPUÉS. */

.comparador-antes img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
}

/* =========================================================
   IMAGEN DESPUÉS
========================================================= */

.comparador > .comparador-despues {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

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

.comparador > .comparador-antes {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
}

/*
   MUY IMPORTANTE:

   La imagen conserva el tamaño COMPLETO
   del comparador.

   El contenedor .comparador-antes
   es el que se encarga de recortarla.
*/

.comparador-antes img {
    width: auto;
}

/* =========================================================
   BOTÓN CENTRAL
========================================================= */

.comparador-boton {
    transition: transform .2s ease,
        background .2s ease;
}

.comparador-boton:hover {
    background: var(--amarillo-hover);
    transform: translate(-50%, -50%) scale(1.05);
}

/* =========================================================
   ETIQUETAS
========================================================= */

.etiqueta-antes,
.etiqueta-despues {
    text-transform: uppercase;
}

/* =========================================================
   COMPARADOR EN CELULAR
========================================================= */

@media (max-width: 700px) {

    .comparador > .comparador-despues,
    .comparador > .comparador-antes {
        width: 100%;
        height: 100%;
    }

    /*
       NO usar !important aquí.
       JavaScript debe poder controlar
       el ancho real de la imagen.
    */

    .comparador-antes img {
        width: auto;
    }

}

/* =========================================================
   COMPARADOR — CORRECCIÓN FINAL
========================================================= */

.comparadores-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    width: 100%;
    margin: 40px auto 0;
}

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

.comparador {
    position: relative;
    width: 100%;
    max-width: none;
    height: 560px;
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
    background: #eeeeee;
    box-shadow: var(--sombra-fuerte);
    user-select: none;
    touch-action: pan-y;
}

/* =========================================================
   IMAGEN DESPUÉS
========================================================= */

.comparador-despues {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.comparador-despues img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    display: block;
}

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

.comparador-antes {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
}

/*
   NO poner width:100% aquí.

   JavaScript le asigna a esta imagen
   el ancho REAL del comparador.
*/

.comparador-antes img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    max-width: none;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* =========================================================
   LÍNEA
========================================================= */

.comparador-linea {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: var(--amarillo);
    z-index: 5;
    transform: translateX(-50%);
    pointer-events: none;
}

/* =========================================================
   BOTÓN
========================================================= */

.comparador-boton {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border: none;
    border-radius: 50%;
    background: var(--amarillo);
    color: var(--negro);
    font-size: 25px;
    font-weight: 900;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    z-index: 10;
    cursor: ew-resize;
}

/* =========================================================
   ETIQUETAS
========================================================= */

.etiqueta-antes,
.etiqueta-despues {
    position: absolute;
    top: 20px;
    z-index: 8;
    padding: 8px 14px;
    background: rgba(0,0,0,.78);
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

.etiqueta-antes {
    left: 20px;
}

.etiqueta-despues {
    right: 20px;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .comparadores-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

}

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

@media (max-width: 700px) {

    .comparadores-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-top: 30px;
    }

    .comparador {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        min-height: 0;
        touch-action: pan-y;
    }

    .comparador-boton {
        width: 46px;
        height: 46px;
        font-size: 20px;
    }

    .etiqueta-antes,
    .etiqueta-despues {
        top: 10px;
        padding: 6px 9px;
        font-size: 8px;
    }

    .etiqueta-antes {
        left: 10px;
    }

    .etiqueta-despues {
        right: 10px;
    }

}

/* =========================================================
   TECNOLOGÍA — IMAGEN LIMPIA Y SIN RECUADRO BLANCO
========================================================= */

.tecnologia-grid > .tecnologia-imagen {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* =========================================================
   IMAGEN
========================================================= */

.tecnologia-grid > .tecnologia-imagen img {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: 0 25px 55px rgba(21,23,25,.15) !important;
    transform: none !important;
}

/* =========================================================
   SIN ZOOM
========================================================= */

.tecnologia-grid > .tecnologia-imagen:hover img {
    transform: none !important;
}

/* =========================================================
   ETIQUETA TECNOLOGÍA
========================================================= */

.tecnologia-grid > .tecnologia-imagen::after {
    content: "TECNOLOGÍA" !important;
    position: absolute !important;
    left: 22px !important;
    bottom: 22px !important;
    z-index: 10 !important;
    padding: 9px 13px !important;
    color: #ffffff !important;
    background: rgba(21,23,25,.92) !important;
    font-family: "Manrope", sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
}

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

@media (max-width: 600px) {

    .tecnologia-grid > .tecnologia-imagen {
        width: 100% !important;
        height: auto !important;
    }

    .tecnologia-grid > .tecnologia-imagen img {
        width: 100% !important;
        height: auto !important;
    }

}

/* =========================================================
   CORRECCIÓN FINAL TECNOLOGÍA — MÓVIL
   ========================================================= */

@media (max-width: 900px) {

    .tecnologia-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 40px !important;
        margin: 0 !important;
    }

    .tecnologia-grid > div:first-child {
        grid-column: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .tecnologia-grid > .tecnologia-imagen {
        grid-column: 1 !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .tecnologia-lista {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .tecnologia-paso {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .tecnologia-cabecera {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .tecnologia-cabecera span {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }

}

@media (max-width: 600px) {

    .tecnologia {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .tecnologia-grid {
        width: calc(100% - 30px) !important;
        max-width: calc(100% - 30px) !important;
        margin: 0 15px !important;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .tecnologia-lista {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .tecnologia-paso {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
    }

    .tecnologia-imagen {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
    }

    .tecnologia-imagen img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        max-width: 100% !important;
    }

}

/* =========================================================
   NOSOTROS V4 — EYEBROW AMARILLO
========================================================= */

.nosotros-titulo-principal {
    display: flex;
    align-items: center;
    margin: 0 0 34px;
}

.nosotros-titulo-principal .nosotros-acento {
    display: none;
}

.nosotros-titulo-principal h2 {
    margin: 0;
    color: #ffc400;
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.nosotros-bloque-titulo {
    margin: 0 0 30px;
    padding-left: 20px;
    border-left: 4px solid #ffc400;
}

.nosotros-bloque-titulo strong {
    display: block;
    max-width: 570px;
    color: #151719;
    font-family: "Manrope", sans-serif;
    font-size: clamp(25px, 2.35vw, 34px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1px;
}

/* Evita que quede el antiguo encabezado pequeño */

.nosotros > .contenedor > .titulo-seccion {
    display: none !important;
}

@media (max-width: 700px) {

    .nosotros-titulo-principal {
        margin-bottom: 27px;
    }

    .nosotros-titulo-principal h2 {
        font-size: 13px;
        letter-spacing: 2.5px;
    }

    .nosotros-bloque-titulo {
        padding-left: 15px;
        margin-bottom: 24px;
    }

    .nosotros-bloque-titulo strong {
        font-size: 25px;
    }

}