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

body {
    font-family: Arial, sans-serif;
    background-color: white;
    color: #1f2d3d;
}

.contenedor {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

header {
    background-color: white;
    border-bottom: 1px solid #e8e8e8;
}

.cabecera {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo img {
    width: 190px;
    height: auto;
    display: block;
}

nav {
    display: flex;
    gap: 30px;
}

nav a {
    text-decoration: none;
    color: #1f2d3d;
    font-size: 16px;
}

nav a:hover {
    color: #2196c4;
}

.boton-cabecera {
    background-color: #2196c4;
    color: white;
    padding: 13px 22px;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 600;
}

/* PORTADA PRINCIPAL */

/* =========================
   INICIO - HERO
========================= */

.hero {
    padding: 90px 0;
    background: #f6f9fb;
}

.hero-inicio-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
    align-items: center;
}

.hero-inicio-texto {
    text-align: left;
}

.hero-inicio-texto h1 {
    margin-bottom: 24px;
    font-size: 36px;
    line-height: 1.12;
    color: #0b2442;
}

.hero-inicio-texto > p {
    margin-bottom: 32px;
    font-size: 18px;
    line-height: 1.7;
    color: #52606d;
}

.hero-botones {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
}

.hero-inicio-imagen img {
    width: 100%;
    height: 440px;
    object-fit: cover;
    display: block;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(11, 36, 66, 0.14);
}

.boton-principal {
    background-color: #2196c4;
    color: white;
    padding: 15px 25px;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 600;
}

.boton-principal:hover {
    background-color: #187da5;
}

.boton-secundario {
    background-color: white;
    color: #0b2442;
    padding: 15px 25px;
    border: 1px solid #d5dde3;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 600;
}

.boton-secundario:hover {
    background-color: #eef3f6;
}
/* CÓMO FUNCIONA */

.como-funciona {
    padding: 90px 0;
    background-color: white;
    text-align: center;
}

.como-funciona h2 {
    font-size: 38px;
    color: #0b2442;
    margin-bottom: 15px;
}

.subtitulo-seccion {
    max-width: 700px;
    margin: 0 auto 50px;
    font-size: 18px;
    line-height: 1.6;
    color: #52606d;
}

.pasos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.paso {
    padding: 32px 24px;
    border: 1px solid #dcebf2;
    border-radius: 14px;
    background: linear-gradient(145deg, #ffffff, #f1f9fc);
    text-align: left;
    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}
.paso:hover {
    transform: translateY(-7px);
    border-color: #2196c4;
    box-shadow: 0 14px 30px rgba(33, 150, 196, 0.15);
}

.paso h3 {
    font-size: 20px;
    color: #2196c4;
    margin-bottom: 15px;
}

.paso p {
    font-size: 16px;
    line-height: 1.5;
    color: #52606d;
}
/* QUÉ ES SUMEXA */

.que-es-sumexa {
    padding: 100px 0;
    background-color: #f6f9fb;
}

.que-es-contenido {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

.que-es-texto {
    flex: 1;
}

.etiqueta {
    color: #2196c4;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.que-es-texto h2 {
    font-size: 40px;
    line-height: 1.2;
    color: #0b2442;
    margin-bottom: 25px;
}

.que-es-texto p {
    font-size: 18px;
    line-height: 1.7;
    color: #52606d;
    margin-bottom: 18px;
}

.que-es-imagen {
    display: flex;
    align-items: center;
    justify-content: center;
}

.que-es-imagen img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(11, 36, 66, 0.14);
}
/* MISIÓN, VISIÓN Y VALORES */

.identidad-sumexa {
    padding: 100px 0;
    background-color: white;
}

.titulo-identidad {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 55px;
}

.titulo-identidad h2 {
    font-size: 40px;
    color: #0b2442;
    margin-bottom: 20px;
}

.titulo-identidad > p:last-child {
    font-size: 18px;
    line-height: 1.6;
    color: #52606d;
}

.bloques-identidad {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.bloque-identidad {
    padding: 35px;
    background-color: #f6f9fb;
    border-radius: 12px;
}

.bloque-identidad h3 {
    font-size: 25px;
    color: #2196c4;
    margin-bottom: 15px;
}

.bloque-identidad p {
    font-size: 17px;
    line-height: 1.7;
    color: #52606d;
}

.valores {
    text-align: center;
}

.valores h3 {
    font-size: 25px;
    color: #0b2442;
    margin-bottom: 25px;
}

.lista-valores {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.lista-valores span {
    padding: 12px 20px;
    border: 1px solid #dbe4ea;
    border-radius: 30px;
    font-weight: 600;
    color: #0b2442;
    background-color: white;
}
.valor-btn {
    padding: 12px 20px;
    border: 1px solid #dbe4ea;
    border-radius: 30px;
    font-weight: 600;
    color: #0b2442;
    background-color: white;
    cursor: pointer;
    font-size: 16px;
}

.valor-btn:hover {
    background-color: #2196c4;
    color: white;
    border-color: #2196c4;
}

.explicacion-valor {
    max-width: 700px;
    margin: 35px auto 0;
    padding: 30px;
    background-color: #f6f9fb;
    border-radius: 12px;
    text-align: center;
}

.explicacion-valor h4 {
    font-size: 24px;
    color: #2196c4;
    margin-bottom: 12px;
}

.explicacion-valor p {
    font-size: 17px;
    line-height: 1.6;
    color: #52606d;
}
/* PARA QUIÉN ES SUMEXA */

.para-quien {
    padding: 100px 0;
    background-color: #f6f9fb;
}

.titulo-para-quien {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 55px;
}

.titulo-para-quien h2 {
    font-size: 40px;
    color: #0b2442;
    margin-bottom: 18px;
}

.titulo-para-quien > p:last-child {
    font-size: 18px;
    line-height: 1.6;
    color: #52606d;
}

.opciones-sumexa {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.opcion-sumexa {
    background-color: white;
    padding: 45px;
    border-radius: 14px;
    border: 1px solid #e2e8ed;
}

.tipo-opcion {
    display: block;
    color: #2196c4;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1.5px;
    margin-bottom: 18px;
}

.opcion-sumexa h3 {
    font-size: 28px;
    line-height: 1.25;
    color: #0b2442;
    margin-bottom: 18px;
}

.opcion-sumexa p {
    font-size: 17px;
    line-height: 1.7;
    color: #52606d;
    margin-bottom: 25px;
}

.enlace-opcion {
    color: #2196c4;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
}

.enlace-opcion:hover {
    text-decoration: underline;
}
/* SUMEXA EN ACCIÓN */

.sumexa-accion {
    padding: 100px 0;
    background-color: white;
    text-align: center;
}

.titulo-accion {
    max-width: 800px;
    margin: 0 auto 60px;
}

.titulo-accion h2 {
    font-size: 40px;
    color: #0b2442;
    margin-bottom: 18px;
}

.titulo-accion > p:last-child {
    font-size: 18px;
    line-height: 1.6;
    color: #52606d;
}

/* FLUJO */

.flujo-sumexa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin: 50px auto;
}

.elemento-flujo {
    width: 310px;
    min-height: 220px;
    padding: 35px 30px;
    border: 1px solid #e2e8ed;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #f6f9fb;
}

.elemento-flujo span {
    color: #2196c4;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.elemento-flujo h3 {
    color: #0b2442;
    font-size: 21px;
}

/* SUMEXA CENTRAL */

.centro-sumexa {
    background-color: white;
    border: 2px solid #2196c4;
    width: 360px;
    min-height: 240px;
}

.centro-sumexa img {
    width: 260px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 25px;
}

.centro-sumexa p {
    color: #52606d;
    font-size: 14px;
    line-height: 1.5;
}

/* FLECHAS */

.flecha-flujo {
    font-size: 45px;
    color: #2196c4;
    font-weight: bold;
}

/* BOTÓN */

.boton-flujo {
    margin-top: 15px;
    padding: 14px 25px;
    border: none;
    border-radius: 8px;
    background-color: #2196c4;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.boton-flujo:hover {
    background-color: #187da5;
}

/* MENSAJE */

.mensaje-flujo {
    max-width: 650px;
    margin: 25px auto 0;
    padding: 18px;
    color: #52606d;
    font-size: 16px;
}
/* AJUSTE DEL NUEVO FLUJO */

.flujo-sumexa {
    display: grid;
    grid-template-columns: 300px 55px 340px 55px 300px;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 60px auto 45px;
}

/* EMPRESA */

.empresa-flujo {
    width: 300px;
    min-height: 230px;
}

/* SUMEXA */

.centro-sumexa {
    width: 340px;
    min-height: 250px;
}

/* ZONA PROVEEDORES */

.grupo-proveedores {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.proveedor {
    width: 100%;
    padding: 18px 20px;
    background-color: #f6f9fb;
    border: 1px solid #e2e8ed;
    border-radius: 12px;
    text-align: center;
}

.proveedor span {
    display: block;
    color: #2196c4;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.proveedor p {
    color: #0b2442;
    font-size: 16px;
    font-weight: 600;
}

/* RESULTADO FINAL */

.resultado-flujo {
    max-width: 650px;
    margin: 20px auto 0;
    padding: 25px 30px;
    background-color: #f6f9fb;
    border: 1px solid #e2e8ed;
    border-radius: 14px;
    text-align: center;
}

.resultado-flujo span {
    display: block;
    color: #2196c4;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.resultado-flujo h3 {
    color: #0b2442;
    font-size: 24px;
    margin-bottom: 8px;
}

.resultado-flujo p {
    color: #52606d;
    font-size: 16px;
}
/* FLUJO INTERACTIVO AVANZADO */

.flujo-sumexa,
.resultado-flujo,
.proveedor,
.flecha-flujo,
.empresa-flujo,
.centro-sumexa {
    transition: all 0.45s ease;
}

.estado-apagado {
    opacity: 0.28;
    filter: grayscale(0.25);
}

.estado-activo {
    opacity: 1;
    transform: scale(1.06);
    border-color: #2196c4 !important;
    background-color: #eef9fd !important;
    box-shadow: 0 14px 35px rgba(33, 150, 196, 0.22);
}

.flecha-activa {
    opacity: 1;
    transform: scale(1.35);
    color: #2196c4;
}

.proveedor-aparece {
    opacity: 1 !important;
    transform: translateX(0) scale(1.03);
    border-color: #2196c4;
}

.resultado-activo {
    transform: scale(1.04);
    border-color: #2196c4;
    box-shadow: 0 12px 30px rgba(33, 150, 196, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    .flujo-sumexa,
    .resultado-flujo,
    .proveedor,
    .flecha-flujo,
    .empresa-flujo,
    .centro-sumexa {
        transition: none;
    }
}
/* BENEFICIOS SUMEXA */

.beneficios-sumexa {
    padding: 100px 0;
    background-color: #f6f9fb;
}

.titulo-beneficios {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.titulo-beneficios h2 {
    font-size: 40px;
    line-height: 1.2;
    color: #0b2442;
    margin-bottom: 18px;
}

.titulo-beneficios > p:last-child {
    font-size: 18px;
    line-height: 1.6;
    color: #52606d;
}

.grid-beneficios {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.beneficio {
    padding: 32px 25px;
    background-color: white;
    border: 1px solid #e2e8ed;
    border-radius: 14px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.beneficio:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(11, 36, 66, 0.08);
}

.beneficio h3 {
    font-size: 21px;
    color: #0b2442;
    margin-bottom: 13px;
}

.beneficio p {
    font-size: 16px;
    line-height: 1.6;
    color: #52606d;
}
/* CTA FINAL */

.cta-final {
    padding: 110px 0;
    background-color: #0b2442;
    text-align: center;
}

.cta-contenido {
    max-width: 800px;
}

.cta-final .etiqueta {
    color: #56c7e8;
}

.cta-final h2 {
    font-size: 42px;
    line-height: 1.2;
    color: white;
    margin-bottom: 22px;
}

.cta-final p {
    max-width: 680px;
    margin: 0 auto 35px;
    font-size: 18px;
    line-height: 1.6;
    color: #d6e1ea;
}

.boton-cta-final {
    display: inline-block;
    background-color: #2196c4;
    color: white;
    padding: 16px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
}

.boton-cta-final:hover {
    background-color: #2aa9d8;
}
/* =========================
   FOOTER SUMEXA
========================= */

.footer-sumexa {
    background-color: #0d2947;
    color: white;
    padding-top: 70px;
}

.footer-contenido {
    display: grid;
    grid-template-columns: 2fr 1fr 1.3fr 1fr;
    gap: 50px;
    padding-bottom: 55px;
    align-items: start;
}

.footer-marca img {
    width: 210px;
    max-width: 100%;
    height: auto;
    margin-bottom: 18px;
}

.footer-marca p {
    color: #b8c7d4;
    font-size: 16px;
}

/* REDES SOCIALES */

.footer-redes {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.footer-redes a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(41, 196, 199, 0.45);
    border-radius: 50%;
    color: #29c4c7;
    transition: all 0.3s ease;
}

.footer-redes svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.footer-redes a:hover {
    background-color: #29c4c7;
    color: #0d2947;
    transform: translateY(-3px);
    box-shadow: 0 7px 18px rgba(41, 196, 199, 0.20);
}

/* ENLACES */

.footer-enlaces {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-enlaces h4 {
    font-size: 16px;
    margin-bottom: 8px;
    color: white;
}

.footer-enlaces a {
    color: #b8c7d4;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s ease;
}

.footer-enlaces a:hover {
    color: #29c4c7;
}

/* PARTE INFERIOR */

.footer-inferior {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 20px 0;
}

.footer-inferior p {
    color: #8496a6;
    font-size: 14px;
}
/* =========================
   PÁGINA CÓMO FUNCIONA
========================= */

.hero-como {
    padding: 120px 0;
    background: linear-gradient(135deg, #f6f9fb 0%, #edf8fc 100%);
    text-align: center;
}

.hero-como-contenido {
    max-width: 900px;
}

.hero-como h1 {
    font-size: 52px;
    line-height: 1.15;
    color: #0b2442;
    margin: 18px 0 25px;
}

.hero-como-texto {
    max-width: 750px;
    margin: 0 auto 35px;
    font-size: 19px;
    line-height: 1.7;
    color: #52606d;
}
/* =========================
   PROCESO CÓMO FUNCIONA
========================= */

.proceso-detallado {
    padding: 110px 0;
    background-color: white;
}

.titulo-proceso {
    max-width: 760px;
    margin: 0 auto 65px;
    text-align: center;
}

.titulo-proceso h2 {
    font-size: 40px;
    color: #0b2442;
    margin-bottom: 18px;
}

.titulo-proceso > p:last-child {
    font-size: 18px;
    line-height: 1.6;
    color: #52606d;
}

.linea-proceso {
    display: grid;
    grid-template-columns: 1fr 45px 1fr 45px 1fr 45px 1fr;
    align-items: stretch;
    gap: 15px;
}

.paso-detallado {
    padding: 32px 24px;
    background: linear-gradient(145deg, #ffffff, #f3fafc);
    border: 1px solid #dcebf2;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.paso-detallado:hover {
    transform: translateY(-7px);
    border-color: #2196c4;
    box-shadow: 0 14px 30px rgba(33, 150, 196, 0.15);
}

.numero-detallado {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 22px;

    background-color: #2196c4;
    color: white;
    border-radius: 50%;

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

    box-shadow: 0 7px 18px rgba(33, 150, 196, 0.2);
}

.paso-detallado h3 {
    font-size: 21px;
    color: #2196c4;
    margin-bottom: 14px;
}

.paso-detallado p {
    font-size: 16px;
    line-height: 1.65;
    color: #52606d;
}

.conector-proceso {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 32px;
    font-weight: bold;
    color: #29c4c7;
}
/* =========================
   GESTIÓN SUMEXA
========================= */

.gestion-sumexa {
    padding: 110px 0;
    background-color: #f6f9fb;
}

.gestion-contenido {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 90px;
    align-items: center;
}

.gestion-texto h2 {
    font-size: 42px;
    line-height: 1.2;
    color: #0b2442;
    margin: 16px 0 25px;
}

.gestion-intro {
    font-size: 18px;
    line-height: 1.7;
    color: #52606d;
    margin-bottom: 25px;
}

.gestion-destacado {
    font-size: 19px;
    line-height: 1.6;
    font-weight: 600;
    color: #0b2442;
    padding-left: 20px;
    border-left: 4px solid #29c4c7;
}

.gestion-lista {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gestion-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;

    padding: 22px;

    background-color: white;
    border: 1px solid #e2e8ed;
    border-radius: 14px;

    transition: all 0.3s ease;
}

.gestion-item:hover {
    transform: translateX(7px);
    border-color: #2196c4;
    box-shadow: 0 10px 25px rgba(33, 150, 196, 0.10);
}

.gestion-item span {
    color: #29c4c7;
    font-size: 15px;
    font-weight: 700;
}

.gestion-item h3 {
    color: #0b2442;
    font-size: 19px;
    margin-bottom: 7px;
}

.gestion-item p {
    color: #52606d;
    font-size: 15px;
    line-height: 1.55;
}
/* =========================
   RESULTADO SUMEXA
========================= */

.resultado-sumexa {
    padding: 110px 0;
    background-color: white;
    text-align: center;
}

.resultado-contenido {
    max-width: 1050px;
}

.resultado-sumexa h2 {
    font-size: 42px;
    line-height: 1.2;
    color: #0b2442;
    margin: 16px 0 22px;
}

.resultado-texto {
    max-width: 720px;
    margin: 0 auto 55px;
    font-size: 18px;
    line-height: 1.7;
    color: #52606d;
}

.resultado-tarjetas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.resultado-item {
    padding: 35px 28px;
    background-color: #f6f9fb;
    border: 1px solid #e2e8ed;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.resultado-item:hover {
    transform: translateY(-7px);
    border-color: #29c4c7;
    box-shadow: 0 14px 30px rgba(33, 150, 196, 0.13);
}

.resultado-item span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;
    margin: 0 auto 20px;

    border-radius: 50%;
    background-color: #29c4c7;
    color: white;

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

.resultado-item h3 {
    color: #0b2442;
    font-size: 20px;
    margin-bottom: 12px;
}

.resultado-item p {
    color: #52606d;
    font-size: 15px;
    line-height: 1.6;
}
/* =========================
   CASO PRÁCTICO ANIMADO
========================= */

.caso-animado {
    padding: 110px 0;
    background: #f6f9fb;
}

.titulo-caso {
    max-width: 800px;
    margin: 0 auto 55px;
    text-align: center;
}

.titulo-caso h2 {
    font-size: 42px;
    line-height: 1.2;
    color: #0b2442;
    margin: 16px 0 18px;
}

.titulo-caso > p:last-child {
    font-size: 18px;
    line-height: 1.7;
    color: #52606d;
}


/* CONTENEDOR PRINCIPAL */

.caso-escenario {
    max-width: 1050px;
    margin: 0 auto;
    text-align: center;
}

.caso-pantalla {
    position: relative;
    min-height: 520px;
    background: white;
    border: 1px solid #dcebf2;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(11, 36, 66, 0.08);
}


/* CADA ETAPA */

.caso-etapa {
    display: none;
    min-height: 520px;
    padding: 45px;
    animation: aparecerCaso 0.7s ease;
}

.caso-etapa.activa {
    display: flex;
}


/* PASO 1 */

#caso-etapa-1 {
    align-items: center;
    gap: 50px;
    text-align: left;
}

.caso-imagen {
    width: 55%;
    height: 400px;
    overflow: hidden;
    border-radius: 16px;
}

.caso-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.caso-texto {
    flex: 1;
}

.caso-texto span {
    display: inline-block;
    margin-bottom: 12px;
    color: #29a9ce;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.caso-texto h3 {
    font-size: 30px;
    line-height: 1.25;
    color: #0b2442;
    margin-bottom: 16px;
}

.caso-texto p {
    font-size: 17px;
    line-height: 1.7;
    color: #52606d;
}


/* PASO 2 - SUMEXA */

#caso-etapa-2 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.caso-logo {
    margin-bottom: 35px;
}

.caso-logo img {
    width: 280px;
    max-width: 90%;
    height: auto;
    display: block;
}

#caso-etapa-2 .caso-texto {
    max-width: 650px;
}


/* PASO 3 - PROVEEDORES */

#caso-etapa-3 {
    flex-direction: column;
    justify-content: center;
}

#caso-etapa-3 .caso-texto {
    margin-bottom: 35px;
}

.caso-proveedores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.caso-proveedor {
    background: #f6f9fb;
    border: 1px solid #dcebf2;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.caso-proveedor:hover {
    transform: translateY(-6px);
    border-color: #2196c4;
    box-shadow: 0 12px 25px rgba(33, 150, 196, 0.13);
}

.caso-proveedor img {
    width: 100%;
    height: 190px;
    object-fit: contain;
    display: block;
    background: white;
}

.caso-proveedor h4 {
    color: #0b2442;
    font-size: 18px;
    margin: 18px 0 5px;
}

.caso-proveedor p {
    color: #52606d;
    margin-bottom: 18px;
}


/* PASOS 4 Y 5 */

#caso-etapa-4,
#caso-etapa-5 {
    align-items: center;
    justify-content: center;
}

#caso-etapa-4 .caso-texto,
#caso-etapa-5 .caso-texto {
    max-width: 700px;
}


/* BOTÓN */

.boton-caso {
    margin-top: 30px;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    background: #2196c4;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.boton-caso:hover {
    background: #2aa9d8;
    transform: translateY(-2px);
}

.boton-caso:disabled {
    opacity: 0.65;
    cursor: default;
    transform: none;
}


/* AVISO */

.aviso-caso {
    max-width: 700px;
    margin: 16px auto 0;
    font-size: 13px;
    color: #8496a6;
}


/* ANIMACIÓN DE ENTRADA */

@keyframes aparecerCaso {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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


/* MÓVIL */

@media (max-width: 800px) {

    .caso-etapa {
        padding: 28px;
    }

    #caso-etapa-1 {
        flex-direction: column;
    }

    .caso-imagen {
        width: 100%;
        height: 260px;
    }

    .caso-proveedores {
        grid-template-columns: 1fr;
    }

    .caso-pantalla {
        min-height: auto;
    }
}
/* APARICIÓN PROGRESIVA DE REQUISITOS */

.requisito-caso {
    opacity: 0;
    transform: translateY(15px);
}

.requisito-caso.requisito-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.busqueda-caso {
    opacity: 0;
    transform: translateY(12px);
}

.busqueda-caso.busqueda-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
/* APARICIÓN PROGRESIVA DE PROVEEDORES */

.caso-proveedor {
    opacity: 0;
    transform: translateY(20px);
}

.caso-proveedor.proveedor-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
/* LOGO DEL DOCUMENTO SUMEXA - PASO 4 */

.documento-cabecera img {
    width: 150px;
    max-width: 150px;
    height: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
/* SILLAS DEL DOCUMENTO - PASO 4 */

.presupuesto-proveedor img {
    width: 85px;
    height: 85px;
    object-fit: contain;
    display: block;
    margin: 0 auto 10px;
}
/* =========================
   PASO 4 - DOCUMENTO SUMEXA
========================= */

#caso-etapa-4 {
    align-items: center;
    justify-content: center;
    padding: 35px;
}

.documento-sumexa {
    width: 100%;
    max-width: 900px;
    background: white;
    border: 1px solid #dcebf2;
    border-radius: 18px;
    padding: 34px;
    box-shadow: 0 14px 35px rgba(11, 36, 66, 0.08);
    text-align: left;
}


/* CABECERA */

.documento-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e6edf2;
}

.documento-cabecera img {
    width: 145px;
    max-width: 145px;
    height: auto;
    object-fit: contain;
}

.documento-titulo {
    text-align: right;
}

.documento-titulo span {
    display: block;
    color: #0b2442;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.documento-titulo p {
    margin-top: 5px;
    color: #8496a6;
    font-size: 13px;
}


/* NECESIDAD */

.documento-necesidad {
    padding: 22px 0;
}

.documento-necesidad span {
    display: block;
    margin-bottom: 7px;
    color: #29a9ce;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.documento-necesidad h3 {
    color: #0b2442;
    font-size: 22px;
    margin-bottom: 6px;
}

.documento-necesidad p {
    color: #52606d;
    font-size: 14px;
}


/* TABLA */

.tabla-presupuestos {
    display: grid;
    grid-template-columns: 1.1fr repeat(3, 1fr);
    border: 1px solid #dcebf2;
    border-radius: 14px;
    overflow: hidden;
}

.presupuesto-columna {
    display: grid;
    grid-template-rows: 125px repeat(5, 48px);
    background: white;
    border-left: 1px solid #e6edf2;
}

.presupuesto-columna:first-child {
    border-left: none;
}

.presupuesto-columna > p {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 8px;
    border-top: 1px solid #e6edf2;
    color: #52606d;
    font-size: 14px;
    text-align: center;
}

.presupuesto-etiquetas > p {
    justify-content: flex-start;
    font-weight: 600;
    color: #0b2442;
    padding-left: 18px;
    background: #f8fafb;
}

.presupuesto-vacio {
    background: #f8fafb;
}


/* PROVEEDORES */

.presupuesto-proveedor {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.presupuesto-proveedor img {
    width: 74px;
    height: 74px;
    object-fit: contain;
    display: block;
    margin-bottom: 5px;
}

.presupuesto-proveedor strong {
    color: #0b2442;
    font-size: 14px;
}

.precio-presupuesto {
    color: #2196c4 !important;
    font-weight: 700;
    font-size: 16px !important;
}


/* PIE */

.documento-pie {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e6edf2;
}

.documento-pie p {
    color: #52606d;
    font-size: 13px;
    line-height: 1.6;
}

.documento-pie span {
    display: block;
    margin-top: 7px;
    color: #8496a6;
    font-size: 11px;
}
/* =========================
   MARCA SUMEXA - CASO PRÁCTICO
========================= */

.caso-etapa {
    position: relative;
}

.marca-caso-sumexa {
    position: absolute;
    top: 22px;
    right: 26px;
    z-index: 5;
}

.marca-caso-sumexa img {
    width: 105px;
    height: auto;
    display: block;
    opacity: 0.72;
}
/* =========================
   PASO 2 - DOS COLUMNAS
========================= */

.paso2-contenido {
    width: 100%;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 45px;
    align-items: center;
    padding: 45px 55px;
}

.paso2-imagen img {
    width: 100%;
    max-height: 390px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}

.paso2-info {
    text-align: left;
}

.paso2-info .caso-texto {
    text-align: left;
    margin-bottom: 25px;
}

.paso2-info .caso-texto span {
    display: block;
    margin-bottom: 10px;
}

.paso2-info .caso-texto h3 {
    margin-bottom: 14px;
}

.paso2-info .requisitos-caso {
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 20px;
}

.paso2-info .requisito-caso {
    width: 100%;
}

.paso2-info .busqueda-caso {
    justify-content: flex-start;
    margin-top: 20px;
}
/* CENTRAR BOTÓN DEL CASO PRÁCTICO */

#iniciar-caso {
    display: block;
    margin: 30px auto 0 auto;
}
.aviso-caso {
    margin: 16px auto 0;
    text-align: center;
}
/* FOTO PASO 5 */

.paso5-imagen {
    display: flex;
    justify-content: center;
    align-items: center;
}

.paso5-imagen img {
    width: 100%;
    max-width: 400px;
    height: 280px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}
/* AJUSTE FINAL PASO 5 */

.paso5-contenido {
    width: 100%;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 50px;
    align-items: center;
    padding: 45px 60px;
}

.paso5-imagen {
    display: flex;
    align-items: center;
    justify-content: center;
}

.paso5-imagen img {
    width: 100%;
    max-width: 360px;
    height: 260px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

.paso5-info {
    width: 100%;
    text-align: left;
}

.paso5-info .caso-texto {
    text-align: left;
    margin: 0 0 20px 0;
}

.paso5-info .caso-texto span {
    display: block;
    margin-bottom: 9px;
}

.paso5-info .caso-texto h3 {
    margin-bottom: 12px;
}
/* =========================
   PARA EMPRESAS - HERO
========================= */

.hero-empresas {
    padding: 120px 0;
    background: linear-gradient(135deg, #f6f9fb 0%, #edf8fc 100%);
    text-align: center;
}

/* =========================
   PARA EMPRESAS - HERO
========================= */

.hero-empresas {
    padding: 90px 0;
    background: linear-gradient(135deg, #f6f9fb 0%, #edf8fc 100%);
}

.hero-empresas-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 65px;
    align-items: center;
}


/* IMAGEN */

.hero-empresas-imagen img {
    width: 100%;
    height: 440px;
    object-fit: cover;
    display: block;

    border-radius: 18px;

    box-shadow: 0 18px 45px rgba(11, 36, 66, 0.14);
}


/* TEXTO */

.hero-empresas-texto {
    text-align: left;
}

.hero-empresas-texto .etiqueta {
    margin-bottom: 15px;
}

.hero-empresas-texto h1 {
    margin-bottom: 23px;

    font-size: 48px;
    line-height: 1.12;

    color: #0b2442;
}

.hero-empresas-texto > p:not(.etiqueta) {
    margin-bottom: 30px;

    color: #52606d;

    font-size: 18px;
    line-height: 1.7;
}
/* =========================
   PARA EMPRESAS - BENEFICIOS
========================= */

.beneficios-empresas {
    padding: 110px 0;
    background: white;
}

.titulo-beneficios-empresas {
    max-width: 780px;
    margin: 0 auto 60px;
    text-align: center;
}

.titulo-beneficios-empresas h2 {
    font-size: 40px;
    line-height: 1.2;
    color: #0b2442;
    margin: 16px 0 20px;
}

.titulo-beneficios-empresas > p:last-child {
    font-size: 18px;
    line-height: 1.7;
    color: #52606d;
}


.beneficios-empresas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


.beneficio-empresa {
    padding: 38px 30px;
    background: linear-gradient(145deg, #ffffff, #f3fafc);
    border: 1px solid #dcebf2;
    border-radius: 16px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.beneficio-empresa:hover {
    transform: translateY(-8px);
    border-color: #2196c4;
    box-shadow: 0 15px 35px rgba(33, 150, 196, 0.14);
}


.numero-beneficio {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    margin-bottom: 25px;

    background: #2196c4;
    color: white;

    border-radius: 50%;

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

    box-shadow: 0 7px 18px rgba(33, 150, 196, 0.20);
}


.beneficio-empresa h3 {
    margin-bottom: 14px;

    color: #0b2442;

    font-size: 22px;
}


.beneficio-empresa p {
    color: #52606d;

    font-size: 16px;
    line-height: 1.65;
}
/* =========================
   PARA EMPRESAS - NECESIDADES
========================= */

.necesidades-empresas {
    padding: 110px 0;
    background: #f6f9fb;
}

.titulo-necesidades {
    max-width: 760px;
    margin: 0 auto 60px;
    text-align: center;
}

.titulo-necesidades h2 {
    margin: 16px 0 20px;
    font-size: 42px;
    color: #0b2442;
}

.titulo-necesidades > p:last-child {
    font-size: 18px;
    line-height: 1.7;
    color: #52606d;
}


/* CATEGORÍAS */

.categorias-necesidades {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.categoria-necesidad {
    position: relative;
    padding: 30px 28px;
    background: white;
    border: 1px solid #e0e9ee;
    border-radius: 14px;
    transition: all 0.3s ease;
}

.categoria-necesidad:hover {
    transform: translateY(-5px);
    border-color: #29c4c7;
    box-shadow: 0 12px 28px rgba(33, 150, 196, 0.10);
}

.categoria-necesidad > span {
    display: block;
    margin-bottom: 18px;
    color: #29c4c7;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.categoria-necesidad h3 {
    margin-bottom: 10px;
    color: #0b2442;
    font-size: 20px;
}

.categoria-necesidad p {
    color: #52606d;
    font-size: 15px;
    line-height: 1.6;
}


/* SOLICITUD ABIERTA */

.necesidad-abierta {
    max-width: 850px;
    margin: 45px auto 0;
    padding: 30px 35px;

    background: #0b2442;
    border-radius: 15px;

    text-align: center;
}

.necesidad-abierta > span {
    display: block;
    margin-bottom: 10px;

    color: #29c4c7;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.necesidad-abierta p {
    max-width: 680px;
    margin: 0 auto 16px;

    color: #d6e1ea;
    font-size: 16px;
    line-height: 1.6;
}

.enlace-necesidad {
    color: white;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.enlace-necesidad:hover {
    color: #29c4c7;
}
/* =========================
   PARA EMPRESAS - PROCESO
========================= */

.trabajamos-empresas {
    padding: 110px 0;
    background: white;
}

.titulo-trabajamos {
    max-width: 780px;
    margin: 0 auto 70px;
    text-align: center;
}

.titulo-trabajamos h2 {
    margin: 16px 0 20px;
    font-size: 42px;
    line-height: 1.2;
    color: #0b2442;
}

.titulo-trabajamos > p:last-child {
    font-size: 18px;
    line-height: 1.7;
    color: #52606d;
}


/* PROCESO */

.proceso-empresas {
    max-width: 900px;
    margin: 0 auto;
}

.paso-empresa {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 25px;
    align-items: flex-start;
}

.paso-empresa-numero {
    width: 62px;
    height: 62px;

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

    background: #edf8fc;
    border: 2px solid #29c4c7;
    border-radius: 50%;

    color: #0b2442;
    font-size: 16px;
    font-weight: 700;
}

.paso-empresa-texto {
    padding-top: 5px;
}

.paso-empresa-texto h3 {
    margin-bottom: 9px;
    color: #0b2442;
    font-size: 22px;
}

.paso-empresa-texto p {
    max-width: 680px;
    color: #52606d;
    font-size: 16px;
    line-height: 1.65;
}


/* LÍNEA ENTRE PASOS */

.linea-paso {
    width: 2px;
    height: 45px;
    margin: 7px 0 7px 30px;
    background: #d8edf2;
}
/* =========================
   PARA EMPRESAS - FUNCIONES
========================= */

.funciones-empresas {
    padding: 110px 0;
    background: #f6f9fb;
}

.titulo-funciones {
    max-width: 780px;
    margin: 0 auto 60px;
    text-align: center;
}

.titulo-funciones h2 {
    margin: 16px 0 20px;
    font-size: 42px;
    line-height: 1.2;
    color: #0b2442;
}

.titulo-funciones > p:last-child {
    font-size: 18px;
    line-height: 1.7;
    color: #52606d;
}


/* GRID */

.funciones-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.funcion-empresa {
    min-height: 220px;
    padding: 30px;

    background: white;
    border: 1px solid #dfe9ee;
    border-radius: 15px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.funcion-empresa:hover {
    transform: translateY(-5px);
    border-color: #29c4c7;
    box-shadow: 0 12px 28px rgba(33, 150, 196, 0.10);
}

.funcion-empresa > span {
    display: block;
    margin-bottom: 22px;

    color: #29c4c7;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.funcion-empresa h3 {
    margin-bottom: 12px;

    color: #0b2442;
    font-size: 21px;
}

.funcion-empresa p {
    color: #52606d;
    font-size: 15px;
    line-height: 1.65;
}


/* TARJETA DESTACADA */

.funcion-destacada {
    background: #0b2442;
    border-color: #0b2442;
}

.funcion-destacada > span {
    color: #29c4c7;
}

.funcion-destacada h3 {
    color: white;
}

.funcion-destacada p {
    color: #d6e1ea;
}

.funcion-destacada:hover {
    border-color: #29c4c7;
}
/* =========================
   PARA EMPRESAS - CTA FINAL
========================= */

.cta-empresas {
    padding: 100px 0;
    background: #315b78;
}

.cta-empresas-contenido {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.cta-etiqueta {
    margin-bottom: 15px;

    color: #29c4c7;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.cta-empresas h2 {
    margin-bottom: 20px;

    color: white;
    font-size: 44px;
    line-height: 1.2;
}

.cta-empresas-contenido > p:not(.cta-etiqueta) {
    max-width: 680px;
    margin: 0 auto 32px;

    color: #d6e1ea;
    font-size: 18px;
    line-height: 1.7;
}

.boton-cta-empresas {
    display: inline-block;

    padding: 15px 27px;

    background: #29c4c7;
    color: #0b2442;

    border-radius: 8px;

    text-decoration: none;
    font-size: 16px;
    font-weight: 700;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.boton-cta-empresas:hover {
    transform: translateY(-3px);
    background: white;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
/* =========================
   FOOTER SUMEXA
========================= */

.footer {
    background: #0b2442;
    padding: 65px 0 0;
    color: white;
}

.footer-contenido {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr 1fr;
    gap: 55px;
    padding-bottom: 50px;
}


/* MARCA */

.footer-marca {
    max-width: 260px;
}

.footer-logo {
    width: 150px;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.footer-marca p {
    color: #b9c8d5;
    font-size: 14px;
    line-height: 1.6;
}


/* COLUMNAS */

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

.footer-columna h4 {
    color: white;
    font-size: 15px;
    margin-bottom: 20px;
}

.footer-columna a {
    color: #b9c8d5;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 12px;
    transition: color 0.25s ease;
}

.footer-columna a:hover {
    color: #29c4c7;
}


/* REDES SOCIALES */

.footer-redes {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.footer-redes a {
    width: 37px;
    height: 37px;

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

    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 50%;

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

.footer-redes svg {
    width: 17px;
    height: 17px;
    fill: #ffffff;
}

.footer-redes a:hover {
    background: #29c4c7;
    border-color: #29c4c7;
    transform: translateY(-2px);
}

.footer-redes a:hover svg {
    fill: #0b2442;
}


/* PARTE INFERIOR */

.footer-inferior {
    padding: 22px 0;
    border-top: 1px solid rgba(255,255,255,0.12);
}

.footer-inferior p {
    color: #8297a9;
    font-size: 13px;
    text-align: center;
}
/* =========================
   PARA EMPRESAS - TRABAJAMOS CONTIGO CON IMAGEN
========================= */

.trabajamos-empresas-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 65px;
    align-items: center;
}

.trabajamos-empresas-contenido {
    width: 100%;
}

.trabajamos-empresas-contenido .titulo-trabajamos {
    max-width: none;
    margin: 0 0 45px;
    text-align: left;
}

.trabajamos-empresas-contenido .titulo-trabajamos h2 {
    font-size: 40px;
}

.trabajamos-empresas-contenido .proceso-empresas {
    max-width: none;
    margin: 0;
}

.trabajamos-empresas-imagen img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    display: block;

    border-radius: 18px;

    box-shadow: 0 18px 45px rgba(11, 36, 66, 0.14);
}
/* =========================
   PARA PROVEEDORES - HERO
========================= */

/* =========================
   PARA PROVEEDORES - HERO
========================= */

.hero-proveedores {
    padding: 90px 0;
    background: linear-gradient(135deg, #f6f9fb 0%, #edf8fc 100%);
}

.hero-proveedores-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 65px;
    align-items: center;
}


/* IMAGEN */

.hero-proveedores-imagen img {
    width: 100%;
    height: 440px;
    object-fit: cover;
    display: block;

    border-radius: 18px;

    box-shadow: 0 18px 45px rgba(11, 36, 66, 0.14);
}


/* TEXTO */

.hero-proveedores-texto {
    text-align: left;
}

.hero-proveedores-texto .etiqueta {
    margin-bottom: 15px;
}

.hero-proveedores-texto h1 {
    margin-bottom: 23px;

    font-size: 48px;
    line-height: 1.12;

    color: #0b2442;
}

.hero-proveedores-texto > p:not(.etiqueta) {
    margin-bottom: 30px;

    color: #52606d;

    font-size: 18px;
    line-height: 1.7;
}

.beneficios-proveedores {
    padding: 110px 0;
    background: white;
}

.titulo-beneficios-proveedores {
    max-width: 780px;
    margin: 0 auto 60px;
    text-align: center;
}

.titulo-beneficios-proveedores h2 {
    margin: 16px 0 20px;

    font-size: 42px;
    line-height: 1.2;

    color: #0b2442;
}

.titulo-beneficios-proveedores > p:last-child {
    font-size: 18px;
    line-height: 1.7;
    color: #52606d;
}


/* TARJETAS */

.beneficios-proveedores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.beneficio-proveedor {
    padding: 38px 30px;

    background: linear-gradient(145deg, #ffffff, #f3fafc);
    border: 1px solid #dcebf2;
    border-radius: 16px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.beneficio-proveedor:hover {
    transform: translateY(-8px);
    border-color: #2196c4;
    box-shadow: 0 15px 35px rgba(33, 150, 196, 0.14);
}

.numero-beneficio-proveedor {
    width: 52px;
    height: 52px;

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

    margin-bottom: 25px;

    background: #2196c4;
    color: white;

    border-radius: 50%;

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

.beneficio-proveedor h3 {
    margin-bottom: 14px;

    color: #0b2442;
    font-size: 22px;
}

.beneficio-proveedor p {
    color: #52606d;
    font-size: 16px;
    line-height: 1.65;
}
/* =========================
   PARA PROVEEDORES - PROCESO
========================= */

.proceso-proveedores {
    padding: 110px 0;
    background: #f6f9fb;
}

.titulo-proceso-proveedores {
    max-width: 780px;
    margin: 0 auto 65px;
    text-align: center;
}

.titulo-proceso-proveedores h2 {
    margin: 16px 0 20px;
    font-size: 42px;
    color: #0b2442;
}

.titulo-proceso-proveedores > p:last-child {
    font-size: 18px;
    line-height: 1.7;
    color: #52606d;
}


/* RECORRIDO */

.recorrido-proveedores {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 15px;
    align-items: stretch;
}

.paso-proveedor {
    padding: 30px 24px;

    background: white;
    border: 1px solid #dcebf2;
    border-radius: 15px;

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

.paso-proveedor:hover {
    transform: translateY(-7px);
    border-color: #29c4c7;
    background: #f8fdfe;
    box-shadow: 0 15px 35px rgba(33, 150, 196, 0.14);
}

.paso-proveedor > span {
    display: block;
    margin-bottom: 22px;

    color: #29c4c7;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.paso-proveedor h3 {
    margin-bottom: 11px;
    color: #0b2442;
    font-size: 19px;
}

.paso-proveedor p {
    color: #52606d;
    font-size: 14px;
    line-height: 1.6;
}

.flecha-proveedor {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #29c4c7;
    font-size: 25px;
    font-weight: 700;
}


/* NOTA */

.nota-proceso-proveedores {
    max-width: 720px;
    margin: 35px auto 0;

    text-align: center;
    color: #71808d;

    font-size: 13px;
    line-height: 1.6;
}
/* =========================
   PARA PROVEEDORES - TIPOS
========================= */

.tipos-proveedores {
    padding: 110px 0;
    background: white;
}

.titulo-tipos-proveedores {
    max-width: 780px;
    margin: 0 auto 60px;
    text-align: center;
}

.titulo-tipos-proveedores h2 {
    margin: 16px 0 20px;
    font-size: 42px;
    line-height: 1.2;
    color: #0b2442;
}

.titulo-tipos-proveedores > p:last-child {
    font-size: 18px;
    line-height: 1.7;
    color: #52606d;
}


/* TARJETAS */

.tipos-proveedores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.tipo-proveedor {
    min-height: 205px;
    padding: 30px 28px;

    background: #f8fbfc;
    border: 1px solid #dcebf2;
    border-radius: 15px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.tipo-proveedor:hover {
    transform: translateY(-6px);
    border-color: #29c4c7;
    box-shadow: 0 14px 30px rgba(33, 150, 196, 0.12);
}

.tipo-proveedor > span {
    display: block;
    margin-bottom: 20px;

    color: #29c4c7;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.tipo-proveedor h3 {
    margin-bottom: 11px;
    color: #0b2442;
    font-size: 20px;
}

.tipo-proveedor p {
    color: #52606d;
    font-size: 15px;
    line-height: 1.65;
}
/* =========================
   PARA PROVEEDORES - PROPUESTA
========================= */

.propuesta-proveedor {
    padding: 110px 0;
    background: #f6f9fb;
}

.propuesta-proveedor-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 65px;
    align-items: center;
}

/* TEXTO */

.propuesta-proveedor-texto h2 {
    margin: 16px 0 20px;
    font-size: 42px;
    line-height: 1.2;
    color: #0b2442;
}

.propuesta-intro {
    margin-bottom: 38px;
    font-size: 17px;
    line-height: 1.7;
    color: #52606d;
}

/* PASOS */

.propuesta-puntos {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.propuesta-punto {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.propuesta-punto > span {
    min-width: 46px;
    height: 46px;

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

    background: #e5f7f8;
    color: #2196c4;

    border-radius: 50%;

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

.propuesta-punto h3 {
    margin-bottom: 7px;
    color: #0b2442;
    font-size: 18px;
}

.propuesta-punto p {
    color: #52606d;
    font-size: 15px;
    line-height: 1.6;
}

/* IMAGEN */

.propuesta-proveedor-imagen img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    display: block;

    border-radius: 18px;

    box-shadow: 0 18px 45px rgba(11, 36, 66, 0.14);
}
/* =========================
   PARA PROVEEDORES - CTA
========================= */

.cta-proveedores {
    padding: 100px 0;
    background: #315b78;
}

.cta-proveedores-contenido {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.cta-proveedores .cta-etiqueta {
    margin-bottom: 16px;
    color: #6fd5d6;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.cta-proveedores h2 {
    margin-bottom: 22px;
    color: white;
    font-size: 42px;
    line-height: 1.2;
}

.cta-proveedores-contenido > p:not(.cta-etiqueta) {
    max-width: 680px;
    margin: 0 auto 32px;
    color: #dce6ed;
    font-size: 17px;
    line-height: 1.7;
}

.boton-cta-proveedores {
    display: inline-block;
    padding: 14px 25px;

    background: white;
    color: #0b2442;

    border-radius: 7px;
    text-decoration: none;
    font-weight: 600;

    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.boton-cta-proveedores:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
}
.para-quien-imagen {
    max-width: 980px;
    margin: 45px auto 55px;
}

.para-quien-imagen img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(11, 36, 66, 0.14);
}
/* =========================================
   PASO 5 · DECISIÓN FINAL
   ========================================= */

#caso-etapa-5 .paso5-contenido {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 55px;
    align-items: center;
    padding: 45px;
}

/* IMAGEN */

#caso-etapa-5 .paso5-imagen img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

/* ZONA DE INFORMACIÓN */

#caso-etapa-5 .paso5-info {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* PASO 5 · DECISIÓN */

#caso-etapa-5 .caso-texto > span {
    display: inline-block;
    color: #2196c4;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

#caso-etapa-5 .caso-texto h3 {
    color: #0b2442;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 13px;
}

#caso-etapa-5 .caso-texto p {
    color: #5c6875;
    font-size: 15px;
    line-height: 1.7;
    max-width: 540px;
}

/* COMPARAR / ELEGIR */

#caso-etapa-5 .decision-resumen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

#caso-etapa-5 .decision-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #f6f9fb;
    border: 1px solid #e6edf2;
    border-radius: 12px;
}

#caso-etapa-5 .decision-item > span {
    width: 25px;
    height: 25px;
    min-width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5f7f7;
    color: #159fa3;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
}

#caso-etapa-5 .decision-item h4 {
    color: #0b2442;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
}

#caso-etapa-5 .decision-item p {
    color: #6b7783;
    font-size: 12px;
    line-height: 1.5;
}

/* OPCIÓN SELECCIONADA */

#caso-etapa-5 .opcion-seleccionada {
    padding: 20px 22px;
    background: #f0f9fa;
    border: 1px solid #ccebed;
    border-left: 4px solid #29c4c7;
    border-radius: 10px;
}

#caso-etapa-5 .opcion-seleccionada > span {
    display: block;
    color: #159fa3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    margin-bottom: 7px;
}

#caso-etapa-5 .opcion-seleccionada h4 {
    color: #0b2442;
    font-size: 19px;
    margin-bottom: 4px;
}

#caso-etapa-5 .opcion-seleccionada strong {
    display: block;
    color: #0b2442;
    font-size: 23px;
    margin-bottom: 8px;
}

#caso-etapa-5 .opcion-seleccionada p {
    color: #64717d;
    font-size: 12px;
    line-height: 1.5;
}
/* CORRECCIÓN CLICS DEL HEADER */

header {
    position: relative;
    z-index: 9999;
}

.cabecera {
    position: relative;
    z-index: 9999;
}

nav {
    position: relative;
    z-index: 10000;
}

nav a {
    position: relative;
    z-index: 10001;
    pointer-events: auto;
}

.boton-cabecera {
    position: relative;
    z-index: 10000;
}
/* HEADER NUEVO SUMEXA */

.sumexa-header {
    background: white;
    border-bottom: 1px solid #e8e8e8;
    position: relative;
    z-index: 1000;
}

.sumexa-header-contenido {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    height: 90px;

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

.sumexa-header-logo img {
    width: 190px;
    height: auto;
    display: block;
}

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

.sumexa-menu a {
    text-decoration: none;
    color: #1f2d3d;
    font-size: 16px;
    transition: color 0.2s ease;
}

.sumexa-menu a:hover {
    color: #2196c4;
}

.sumexa-header-boton {
    background: #2196c4;
    color: white;
    padding: 13px 22px;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 600;
}
/* ==================================================
   RESPONSIVE MÓVIL · SUMEXA
   ================================================== */
.menu-movil-boton {
    display: none;
}
@media (max-width: 768px) {
    .menu-movil-boton {
    display: block;
    background: none;
    border: none;
    color: #0b2442;
    font-size: 30px;
    cursor: pointer;
    padding: 5px;
}

.sumexa-menu {
    display: none;
}

.sumexa-header-boton {
    display: none;
}

    /* ---------- HEADER ---------- */

    .sumexa-header-contenido {
        width: 92%;
        height: auto;
        min-height: 75px;
        padding: 15px 0;
        flex-wrap: wrap;
        gap: 15px;
    }

    .sumexa-header-logo img {
        width: 145px;
    }

    .sumexa-menu {
        order: 3;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        gap: 18px;
        overflow-x: auto;
        padding: 5px 0 8px;
    }

    .sumexa-menu a {
        font-size: 14px;
        white-space: nowrap;
    }

    .sumexa-header-boton {
        padding: 10px 14px;
        font-size: 13px;
    }


    /* ---------- HERO INICIO ---------- */

    .hero {
        padding: 55px 0;
    }

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

    .hero-inicio-texto h1 {
        font-size: 36px;
        line-height: 1.12;
    }

    .hero-inicio-texto p {
        font-size: 16px;
        line-height: 1.65;
    }

    .hero-botones {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .hero-botones a {
        width: 100%;
        text-align: center;
    }

    .hero-inicio-imagen img {
        width: 100%;
        height: auto;
        max-height: 390px;
        object-fit: cover;
    }


    /* ---------- CÓMO FUNCIONA ---------- */

    .como-funciona {
        padding: 65px 0;
    }

    .como-funciona h2 {
        font-size: 30px;
    }

    .pasos {
        grid-template-columns: 1fr;
        gap: 18px;
    }


    /* ---------- CONOCE SUMEXA ---------- */

    .que-es-contenido {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .que-es-texto h2 {
        font-size: 30px;
    }

    .que-es-imagen img {
        width: 100%;
        height: auto;
    }


    /* ---------- MISIÓN / VISIÓN ---------- */

    .identidad-sumexa {
        padding: 65px 0;
    }

    .titulo-identidad h2 {
        font-size: 30px;
    }

    .bloques-identidad {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .lista-valores {
        gap: 8px;
    }

    .valor-btn {
        font-size: 13px;
        padding: 10px 14px;
    }


    /* ---------- EMPRESAS / PROVEEDORES ---------- */

    .para-quien {
        padding: 65px 0;
    }

    .titulo-para-quien h2 {
        font-size: 30px;
    }

    .para-quien-imagen img {
        width: 100%;
        height: auto;
    }

    .opciones-sumexa {
        grid-template-columns: 1fr;
        gap: 18px;
    }


    /* ---------- SUMEXA EN ACCIÓN ---------- */

    .sumexa-accion {
        padding: 65px 0;
    }

    .titulo-accion h2 {
        font-size: 30px;
    }

    .flujo-sumexa {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .flecha-flujo {
        transform: rotate(90deg);
        align-self: center;
    }

    .grupo-proveedores {
        width: 100%;
    }

    .elemento-flujo,
    .proveedor {
        width: 100%;
    }


    /* ---------- BENEFICIOS ---------- */

    .beneficios-sumexa {
        padding: 65px 0;
    }

    .titulo-beneficios h2 {
        font-size: 30px;
    }

    .grid-beneficios {
        grid-template-columns: 1fr;
        gap: 18px;
    }


    /* ---------- CTA ---------- */

    .cta-final {
        padding: 65px 0;
    }

    .cta-final h2 {
        font-size: 30px;
        line-height: 1.2;
    }

    .boton-cta-final {
        display: inline-block;
        width: 100%;
        text-align: center;
    }



    /* ---------- FOOTER ---------- */

    .footer-contenido {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
    align-items: start;
}

.footer-marca {
    grid-column: 1 / -1;
    max-width: 100%;
}
/* HEADER MÓVIL - FORZAR MENÚ HAMBURGUESA */

.sumexa-menu {
    display: none;
}

.sumexa-header-boton {
    display: none;
}

.menu-movil-boton {
    display: block;
}
.sumexa-menu.menu-movil-abierto {
    display: flex;
    position: absolute;
    top: 75px;
    left: 0;
    width: 100%;
    background: #f7fafc;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px 20px;
    border-top: 1px solid #e5edf2;
    box-shadow: 0 14px 28px rgba(11, 36, 66, 0.10);
    z-index: 999;
}

.sumexa-menu.menu-movil-abierto a {
    width: 100%;
    padding: 13px 14px;
    border-radius: 9px;
    border-bottom: none;
    font-size: 15px;
    font-weight: 500;
    color: #0b2442;
    background: white;
    transition: background 0.2s ease, color 0.2s ease;
}

.sumexa-menu.menu-movil-abierto a:hover {
    background: #eaf7fb;
    color: #2196c4;
}

.sumexa-header-boton.menu-movil-abierto {
    display: block;
    position: absolute;
    top: 330px;
    left: 20px;
    right: 20px;
    width: auto;
    padding: 14px 18px;
    text-align: center;
    background: #2196c4;
    color: white;
    border-radius: 9px;
    font-weight: 600;
    z-index: 1000;
    box-shadow: 0 8px 18px rgba(33, 150, 196, 0.20);
}
.menu-movil-boton {
    border-radius: 8px;
    transition: background 0.2s ease;
}

.menu-movil-boton:hover {
    background: #edf8fc;
}
/* CONOCE SUMEXA · MÓVIL */

.que-es-contenido {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.que-es-texto {
    width: 100%;
    max-width: none;
}

.que-es-texto h2 {
    font-size: 30px;
    line-height: 1.2;
    width: 100%;
}

.que-es-texto p {
    width: 100%;
    font-size: 16px;
    line-height: 1.65;
}

.que-es-imagen {
    width: 100%;
}

.que-es-imagen img {
    width: 100%;
    height: auto;
    display: block;
}
/* AJUSTE DE ESPACIADO GENERAL EN MÓVIL */

.hero,
.como-funciona,
.que-es,
.identidad-sumexa,
.para-quien,
.sumexa-accion,
.beneficios-sumexa,
.cta-final {
    padding-top: 55px;
    padding-bottom: 55px;
}
/* SUMEXA EN ACCIÓN · VERSIÓN MÓVIL COMPACTA */

.sumexa-accion {
    padding: 55px 0;
}

.titulo-accion {
    margin-bottom: 35px;
}

.titulo-accion h2 {
    font-size: 30px;
    line-height: 1.15;
}

.titulo-accion > p:not(.etiqueta) {
    font-size: 16px;
    line-height: 1.55;
}

/* Flujo completo */
.flujo-sumexa {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

/* Empresa */
.empresa-flujo {
    min-height: auto;
    padding: 22px 18px;
}

/* SUMEXA */
.centro-sumexa {
    min-height: auto;
    padding: 22px 18px;
}

.centro-sumexa img {
    width: 190px;
    max-width: 70%;
    margin-bottom: 10px;
}

.centro-sumexa p {
    font-size: 14px;
}

/* Flechas */
.flecha-flujo {
    height: 28px;
    font-size: 32px;
    line-height: 28px;
    transform: rotate(90deg);
    margin: 0 auto;
}

/* Proveedores mucho más compactos */
.grupo-proveedores {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.proveedor {
    width: 100%;
    min-height: auto;
    padding: 14px 6px;
}

.proveedor span {
    font-size: 11px;
}

.proveedor p {
    font-size: 14px;
}

/* Resultado */
.resultado-flujo {
    margin-top: 25px;
    padding: 22px 18px;
}

.resultado-flujo span {
    font-size: 12px;
}

.resultado-flujo h3 {
    font-size: 22px;
    line-height: 1.15;
}

.resultado-flujo p {
    font-size: 14px;
    line-height: 1.45;
}

.boton-flujo {
    margin-top: 18px;
}

.mensaje-flujo {
    margin-top: 15px;
}
/* PROCESO DETALLADO · MÓVIL */

.proceso-detallado {
    padding: 55px 0;
}

.titulo-proceso {
    margin-bottom: 35px;
}

.titulo-proceso h2 {
    font-size: 30px;
    line-height: 1.2;
}

.titulo-proceso > p:not(.etiqueta) {
    font-size: 16px;
    line-height: 1.55;
}

/* Pasos en vertical */
.linea-proceso {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
}

.paso-detallado {
    width: 100%;
    min-height: auto;
    padding: 24px 20px;
}

.numero-detallado {
    margin-bottom: 12px;
    font-size: 16px;
}

.paso-detallado h3 {
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 10px;
}

.paso-detallado p {
    font-size: 15px;
    line-height: 1.55;
}

/* Flechas entre pasos */
.conector-proceso {
    width: auto;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    transform: rotate(90deg);
    margin: 0 auto;
}
/* MÁS QUE UNA BÚSQUEDA · MÓVIL */

.gestion-sumexa {
    padding: 55px 0;
}

.gestion-contenido {
    display: grid;
    grid-template-columns: 1fr;
    gap: 35px;
}

.gestion-texto {
    width: 100%;
}

.gestion-texto h2 {
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 18px;
}

.gestion-intro {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.gestion-destacado {
    font-size: 16px;
    line-height: 1.6;
}

/* Lista de pasos */

.gestion-lista {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gestion-item {
    width: 100%;
    padding: 20px 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.gestion-item > span {
    flex: 0 0 auto;
    font-size: 14px;
}

.gestion-item h3 {
    font-size: 19px;
    line-height: 1.2;
    margin-bottom: 6px;
}

.gestion-item p {
    font-size: 15px;
    line-height: 1.5;
}
/* CASO PRÁCTICO · MÓVIL MÁS COMPACTO */

.caso-animado {
    padding: 40px 0;
}

.titulo-caso {
    margin-bottom: 20px;
}

.titulo-caso h2 {
    font-size: 26px;
    line-height: 1.15;
}

.titulo-caso > p:not(.etiqueta) {
    font-size: 14px;
    line-height: 1.45;
}

.caso-pantalla {
    padding: 18px 14px;
}

.caso-etapa .caso-imagen {
    margin-bottom: 12px;
}

.caso-etapa .caso-imagen img {
    max-height: 160px;
    border-radius: 10px;
}

.caso-texto span {
    font-size: 10px;
}

.caso-texto h3 {
    font-size: 18px;
    line-height: 1.15;
    margin: 6px 0 6px;
}

.caso-texto p {
    font-size: 13px;
    line-height: 1.4;
}

.paso2-contenido {
    gap: 12px;
}

.paso2-imagen img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 10px;
}

.requisitos-caso {
    gap: 7px;
    margin-top: 10px;
}

.requisito-caso {
    padding: 8px 10px;
}

.requisito-caso p {
    font-size: 12px;
}

.busqueda-caso {
    margin-top: 12px;
}

.busqueda-caso p {
    font-size: 12px;
}

.marca-caso-sumexa img {
    width: 70px;
}
/* PASO 4 · PRESUPUESTOS EN MÓVIL */

.presupuestos-caso {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.presupuesto-caso {
    width: 100%;
    min-width: 0;
}

.presupuesto-caso h4,
.presupuesto-caso p {
    white-space: normal;
}
/* PASO 2 · MÓVIL */

.paso2-contenido {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 14px;
}

.paso2-imagen {
    width: 100%;
}

.paso2-imagen img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
}

.paso2-info {
    width: 100%;
}

.requisitos-caso {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.requisito-caso {
    padding: 8px 5px;
    text-align: center;
}

.requisito-caso p {
    font-size: 11px;
    line-height: 1.25;
}
/* PASO 3 · PROVEEDORES EN MÓVIL */

.caso-proveedores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
}

.caso-proveedor {
    width: 100%;
    min-width: 0;
    padding: 8px 6px;
    text-align: center;
}

.caso-proveedor img {
    width: 100%;
    height: 85px;
    object-fit: contain;
    margin-bottom: 6px;
}

.caso-proveedor h4 {
    font-size: 12px;
    line-height: 1.15;
    margin-bottom: 3px;
}

.caso-proveedor p {
    font-size: 11px;
    line-height: 1.2;
}
/* PASO 4 · COMPARATIVA EN MÓVIL */

.documento-sumexa {
    width: 100%;
    padding: 18px 12px;
}

.tabla-presupuestos {
    width: 100%;
    display: grid;
    grid-template-columns: 72px repeat(3, 1fr);
    gap: 0;
}

.presupuesto-columna {
    min-width: 0;
    width: 100%;
}

.presupuesto-columna p {
    font-size: 10px;
    line-height: 1.15;
    padding: 6px 3px;
    overflow-wrap: anywhere;
}

.presupuesto-proveedor {
    padding: 6px 2px;
}

.presupuesto-proveedor img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.presupuesto-proveedor strong {
    display: block;
    font-size: 9px;
    line-height: 1.1;
}

.precio-presupuesto {
    font-size: 11px !important;
}
/* PASO 4 · CABECERA DOCUMENTO MÓVIL */

.documento-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.documento-cabecera img {
    width: 135px;
    height: auto;
    flex: 0 0 auto;
}

.documento-titulo {
    flex: 1;
    min-width: 0;
    text-align: right;
}

.documento-titulo span {
    display: block;
    font-size: 11px;
    line-height: 1.15;
    white-space: normal;
}

.documento-titulo p {
    font-size: 9px;
    line-height: 1.2;
    white-space: normal;
}
/* PASO 5 · DECISIÓN EN MÓVIL */

.paso5-contenido {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.paso5-imagen {
    width: 100%;
}

.paso5-imagen img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 10px;
}

.paso5-info {
    width: 100%;
}

.decision-resumen {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.decision-item {
    width: 100%;
    padding: 10px 12px;
}

.decision-item h4 {
    font-size: 15px;
    line-height: 1.2;
    margin-bottom: 4px;
}

.decision-item p {
    font-size: 12px;
    line-height: 1.35;
}

.opcion-seleccionada {
    margin-top: 12px;
    padding: 14px 12px;
}

.opcion-seleccionada span {
    font-size: 10px;
}

.opcion-seleccionada h4 {
    font-size: 17px;
    margin: 4px 0;
}

.opcion-seleccionada strong {
    font-size: 20px;
}

.opcion-seleccionada p {
    font-size: 12px;
    line-height: 1.35;
}
/* ===== PASO 5 - MÓVIL ===== */
@media (max-width: 768px) {

    #caso-etapa-5 {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        padding: 25px 18px;
    }

    #caso-etapa-5 .paso5-contenido {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    #caso-etapa-5 .paso5-imagen {
        width: 100%;
        max-width: 100%;
        margin: 0 0 25px 0;
    }

    #caso-etapa-5 .paso5-imagen img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
    }

    #caso-etapa-5 .paso5-info {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    #caso-etapa-5 .caso-texto {
        width: 100%;
        max-width: 100%;
    }

    #caso-etapa-5 .caso-texto h3 {
        font-size: 27px;
        line-height: 1.15;
        overflow-wrap: break-word;
    }

    #caso-etapa-5 .caso-texto p {
        font-size: 15px;
        line-height: 1.55;
    }

    #caso-etapa-5 .decision-resumen {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        margin-top: 25px;
    }

    #caso-etapa-5 .decision-item {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    #caso-etapa-5 .opcion-seleccionada {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-top: 20px;
        padding: 20px;
    }
}
}
/* ===== EL RESULTADO - MÓVIL ===== */
@media (max-width: 768px) {

    .resultado-sumexa {
        padding: 65px 0;
    }

    .resultado-contenido {
        width: 90%;
        max-width: 100%;
        margin: 0 auto;
    }

    .resultado-tarjetas {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        width: 100%;
    }

    .resultado-item {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 24px 20px;
    }

    .resultado-item h3 {
        font-size: 18px;
        line-height: 1.25;
    }

    .resultado-item p {
        font-size: 14px;
        line-height: 1.55;
    }
}
/* ===== PARA EMPRESAS · HERO MÓVIL ===== */
@media (max-width: 768px) {

    .hero-empresas {
        padding: 45px 0 60px;
    }

    .hero-empresas-grid {
        display: flex;
        flex-direction: column;
        width: 90%;
        max-width: 100%;
        gap: 30px;
    }

    .hero-empresas-imagen {
        width: 100%;
        max-width: 100%;
        order: 2;
    }

    .hero-empresas-imagen img {
        width: 100%;
        height: 240px;
        object-fit: cover;
        display: block;
        border-radius: 14px;
    }

    .hero-empresas-texto {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        order: 1;
        text-align: left;
    }

    .hero-empresas-texto h1 {
        font-size: 34px;
        line-height: 1.12;
        margin-bottom: 18px;
    }

    .hero-empresas-texto > p:not(.etiqueta) {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 25px;
    }

    .hero-empresas-texto .boton-principal {
        display: inline-block;
    }
}
/* ===== PARA EMPRESAS · TRABAJAMOS CONTIGO MÓVIL ===== */
@media (max-width: 768px) {

    .trabajamos-empresas {
        padding: 65px 0;
    }

    .trabajamos-empresas-grid {
        display: flex;
        flex-direction: column;
        width: 90%;
        max-width: 100%;
        gap: 35px;
    }

    .trabajamos-empresas-contenido {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .titulo-trabajamos {
        width: 100%;
        max-width: 100%;
    }

    .titulo-trabajamos h2 {
        font-size: 30px;
        line-height: 1.15;
        margin-bottom: 18px;
    }

    .titulo-trabajamos > p:not(.etiqueta) {
        font-size: 15px;
        line-height: 1.6;
    }

    .proceso-empresas {
        width: 100%;
        margin-top: 32px;
    }

    .paso-empresa {
        width: 100%;
        display: flex;
        align-items: flex-start;
        gap: 15px;
    }

    .paso-empresa-numero {
        flex: 0 0 auto;
    }

    .paso-empresa-texto {
        min-width: 0;
    }

    .paso-empresa-texto h3 {
        font-size: 17px;
        line-height: 1.25;
    }

    .paso-empresa-texto p {
        font-size: 14px;
        line-height: 1.5;
    }

    .trabajamos-empresas-imagen {
        width: 100%;
        max-width: 100%;
    }

    .trabajamos-empresas-imagen img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 14px;
    }
}
/* ===== PARA EMPRESAS · POR QUÉ SUMEXA MÓVIL ===== */
@media (max-width: 768px) {

    .beneficios-empresas {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .beneficio-empresa {
        width: 100%;
        max-width: 100%;
    }
}
/* ===== PARA EMPRESAS · BENEFICIOS MÓVIL ===== */
@media (max-width: 768px) {

    .beneficios-empresas {
        padding: 65px 0;
    }

    .titulo-beneficios-empresas {
        width: 100%;
        max-width: 100%;
    }

    .titulo-beneficios-empresas h2 {
        font-size: 30px;
        line-height: 1.15;
        margin-bottom: 18px;
    }

    .titulo-beneficios-empresas > p:not(.etiqueta) {
        font-size: 15px;
        line-height: 1.6;
    }

    .beneficios-empresas-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        width: 100%;
        margin-top: 32px;
    }

    .beneficio-empresa {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 24px 20px;
    }

    .beneficio-empresa h3 {
        font-size: 18px;
        line-height: 1.25;
    }

    .beneficio-empresa p {
        font-size: 14px;
        line-height: 1.55;
    }
}
/* ===== PARA EMPRESAS · NECESIDADES MÓVIL ===== */
@media (max-width: 768px) {

    .necesidades-empresas {
        padding: 65px 0;
    }

    .titulo-necesidades {
        width: 100%;
        max-width: 100%;
    }

    .titulo-necesidades h2 {
        font-size: 30px;
        line-height: 1.15;
        margin-bottom: 18px;
    }

    .titulo-necesidades > p:not(.etiqueta) {
        font-size: 15px;
        line-height: 1.6;
    }

    .categorias-necesidades {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));        gap: 14px;
        width: 100%;
        margin-top: 32px;
    }

    .categoria-necesidad {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 18px 14px;
}

.categoria-necesidad h3 {
    font-size: 16px;
    line-height: 1.2;
}

.categoria-necesidad p {
    font-size: 12px;
    line-height: 1.45;
}

    .necesidad-abierta {
        width: 100%;
        max-width: 100%;
        margin-top: 25px;
        padding: 25px 20px;
    }
}
/* ===== PARA EMPRESAS · FUNCIONES MÓVIL ===== */
@media (max-width: 768px) {

    .funciones-empresas {
        padding: 50px 0;
    }

    .titulo-funciones {
        width: 100%;
        max-width: 100%;
    }

    .titulo-funciones h2 {
        font-size: 30px;
        line-height: 1.15;
        margin-bottom: 18px;
    }

    .titulo-funciones > p:not(.etiqueta) {
        font-size: 15px;
        line-height: 1.6;
    }

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

    .funcion-empresa {
        width: 100%;
        min-width: 0;
        padding: 18px 15px;
    }

    .funcion-empresa span {
        font-size: 11px;
    }

    .funcion-empresa h3 {
        font-size: 16px;
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .funcion-empresa p {
        font-size: 12px;
        line-height: 1.45;
    }
}
/* ===== PARA EMPRESAS · CTA MÓVIL ===== */
@media (max-width: 768px) {

    .cta-empresas {
        padding: 55px 0;
    }

    .cta-empresas h2 {
        font-size: 29px;
        line-height: 1.15;
        margin-bottom: 14px;
    }

    .cta-empresas p {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 22px;
    }

    .boton-cta-empresas {
        padding: 13px 20px;
        font-size: 14px;
    }
}
/* ===== PARA PROVEEDORES · HERO MÓVIL ===== */
@media (max-width: 768px) {

    .hero-proveedores {
        padding: 45px 0 60px;
    }

    .hero-proveedores-grid {
        display: flex;
        flex-direction: column;
        width: 90%;
        max-width: 100%;
        gap: 30px;
    }

    .hero-proveedores-texto {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        order: 1;
        text-align: left;
    }

    .hero-proveedores-texto h1 {
        font-size: 34px;
        line-height: 1.12;
        margin-bottom: 18px;
    }

    .hero-proveedores-texto > p:not(.etiqueta) {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 25px;
    }

    .hero-proveedores-texto .boton-principal {
        display: inline-block;
    }

    .hero-proveedores-imagen {
        width: 100%;
        max-width: 100%;
        order: 2;
    }

    .hero-proveedores-imagen img {
        width: 100%;
        height: 240px;
        object-fit: cover;
        display: block;
        border-radius: 14px;
    }
}
/* ===== PARA PROVEEDORES · BENEFICIOS MÓVIL ===== */
@media (max-width: 768px) {

    .beneficios-proveedores-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        width: 100%;
        margin-top: 30px;
    }

    .beneficio-proveedor {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 24px 20px;
    }

    .beneficio-proveedor h3 {
        font-size: 18px;
        line-height: 1.25;
        margin-bottom: 8px;
    }

    .beneficio-proveedor p {
        font-size: 14px;
        line-height: 1.55;
    }
}
/* ===== PARA PROVEEDORES · RESTO DE PÁGINA MÓVIL ===== */
@media (max-width: 768px) {

    /* CÓMO FUNCIONA */
    .recorrido-proveedores {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        width: 100%;
        margin-top: 30px;
    }

    .paso-proveedor {
        width: 100%;
        min-width: 0;
        padding: 20px 18px;
    }

    .paso-proveedor h3 {
        font-size: 17px;
        line-height: 1.25;
    }

    .paso-proveedor p {
        font-size: 14px;
        line-height: 1.5;
    }

    .flecha-proveedor {
        display: none;
    }

    .nota-proceso-proveedores {
        font-size: 12px;
        line-height: 1.5;
        margin-top: 20px;
    }


    /* QUÉ PROVEEDORES BUSCAMOS */
    .tipos-proveedores {
        padding: 50px 0;
    }

    .titulo-tipos-proveedores h2 {
        font-size: 30px;
        line-height: 1.15;
        margin-bottom: 18px;
    }

    .titulo-tipos-proveedores > p:not(.etiqueta) {
        font-size: 15px;
        line-height: 1.6;
    }

    .tipos-proveedores-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        margin-top: 30px;
    }

    .tipo-proveedor {
        width: 100%;
        min-width: 0;
        padding: 18px 14px;
    }

    .tipo-proveedor span {
        font-size: 11px;
    }

    .tipo-proveedor h3 {
        font-size: 15px;
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .tipo-proveedor p {
        font-size: 12px;
        line-height: 1.45;
    }


    /* DE UNA OPORTUNIDAD A UNA PROPUESTA */
    .propuesta-proveedor {
        padding: 50px 0;
    }

    .propuesta-proveedor-grid {
        display: flex;
        flex-direction: column;
        width: 90%;
        max-width: 100%;
        gap: 30px;
    }

    .propuesta-proveedor-texto {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .propuesta-proveedor-texto h2 {
        font-size: 30px;
        line-height: 1.15;
        margin-bottom: 16px;
    }

    .propuesta-intro {
        font-size: 15px;
        line-height: 1.6;
    }

    .propuesta-puntos {
        margin-top: 28px;
    }

    .propuesta-punto {
        width: 100%;
        gap: 14px;
    }

    .propuesta-punto h3 {
        font-size: 16px;
        line-height: 1.25;
    }

    .propuesta-punto p {
        font-size: 13px;
        line-height: 1.5;
    }

    .propuesta-proveedor-imagen {
        width: 100%;
        max-width: 100%;
    }

    .propuesta-proveedor-imagen img {
        width: 100%;
        height: 240px;
        object-fit: cover;
        display: block;
        border-radius: 14px;
    }


    /* CTA FINAL */
    .cta-proveedores {
        padding: 55px 0;
    }

    .cta-proveedores-contenido {
        width: 90%;
        max-width: 100%;
    }

    .cta-proveedores h2 {
        font-size: 29px;
        line-height: 1.15;
        margin-bottom: 14px;
    }

    .cta-proveedores p {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 22px;
    }

    .boton-cta-proveedores {
        padding: 13px 20px;
        font-size: 14px;
    }
}
/* ===== CTA FINAL · INICIO + CÓMO FUNCIONA · MÓVIL ===== */
@media (max-width: 768px) {

    .cta-final {
        padding: 55px 0;
    }

    .cta-final .cta-contenido {
        width: 90%;
        max-width: 100%;
        margin: 0 auto;
    }

    .cta-final h2 {
        font-size: 29px;
        line-height: 1.15;
        margin-bottom: 14px;
    }

    .cta-final .cta-contenido > p:not(.etiqueta) {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 22px;
    }

    .boton-cta-final {
        padding: 13px 20px;
        font-size: 14px;
    }
}
/* ===== INICIO · CTA FINAL MÓVIL ===== */
@media (max-width: 768px) {

    .cta-final {
        padding: 55px 0;
    }

    .cta-final .cta-contenido {
        width: 90%;
        max-width: 100%;
    }

    .cta-final h2 {
        font-size: 29px;
        line-height: 1.15;
        margin-bottom: 14px;
    }

    .cta-final .cta-contenido > p:not(.etiqueta) {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 22px;
    }

    .boton-cta-final {
        padding: 13px 20px;
        font-size: 14px;
    }
}
/* ==================================================
   PÁGINAS LEGALES SUMEXA
================================================== */

.pagina-legal {
    background: #ffffff;
    padding: 85px 0 110px;
}

.legal-contenido {
    max-width: 920px;
}

.legal-cabecera {
    padding-bottom: 42px;
    margin-bottom: 15px;
    border-bottom: 1px solid #dce5eb;
}

.legal-cabecera h1 {
    color: #0b2442;
    font-size: 48px;
    line-height: 1.1;
    margin: 10px 0 14px;
}

.legal-actualizacion {
    color: #82909c !important;
    font-size: 13px !important;
    margin-bottom: 22px;
}

.legal-cabecera > p:last-child {
    color: #52606d;
    font-size: 17px;
    line-height: 1.7;
    max-width: 760px;
}


/* DOCUMENTO */

.legal-documento {
    width: 100%;
}

.legal-apartado {
    padding: 38px 0;
    border-bottom: 1px solid #e5ebef;
}

.legal-apartado:last-child {
    border-bottom: none;
}

.legal-apartado h2 {
    color: #0b2442;
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 18px;
}

.legal-apartado p {
    color: #4f5f6d;
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 14px;
}

.legal-apartado p:last-child {
    margin-bottom: 0;
}

.legal-apartado strong {
    color: #0b2442;
}

.legal-apartado a {
    color: #2196c4;
    text-decoration: none;
}

.legal-apartado a:hover {
    text-decoration: underline;
}


/* DATOS IDENTIFICATIVOS */

.legal-datos {
    margin: 25px 0;
    padding: 24px 28px;
    background: #f6f9fb;
    border-left: 3px solid #29c4c7;
}

.legal-datos p {
    margin-bottom: 8px;
}

.legal-datos p:last-child {
    margin-bottom: 0;
}


/* AVISO TEMPORAL */

.legal-aviso-pendiente {
    font-size: 13px !important;
    color: #7a8791 !important;
    font-style: italic;
}


/* ==================================================
   PÁGINAS LEGALES · MÓVIL
================================================== */

@media (max-width: 768px) {

    .pagina-legal {
        padding: 50px 0 70px;
    }

    .legal-contenido {
        width: 90%;
    }

    .legal-cabecera {
        padding-bottom: 30px;
    }

    .legal-cabecera h1 {
        font-size: 36px;
    }

    .legal-cabecera > p:last-child {
        font-size: 15px;
        line-height: 1.65;
    }

    .legal-apartado {
        padding: 30px 0;
    }

    .legal-apartado h2 {
        font-size: 19px;
        line-height: 1.3;
        margin-bottom: 15px;
    }

    .legal-apartado p {
        font-size: 14px;
        line-height: 1.75;
    }

    .legal-datos {
        padding: 20px 18px;
        margin: 20px 0;
    }
}
/* ENLACE CONDICIONES PARA PROVEEDORES */

/* BOTÓN + CONDICIONES PROVEEDORES */

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

.acciones-proveedor .enlace-condiciones-proveedor {
    display: block;
    width: auto;
    margin: 14px 0 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
}

.acciones-proveedor .enlace-condiciones-proveedor:hover {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* =====================================
   BANNER DE COOKIES SUMEXA
===================================== */

.cookies-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    padding: 22px;
    background: rgba(11, 36, 66, 0.98);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.16);
}

.cookies-contenido {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
}

.cookies-texto {
    max-width: 720px;
}

.cookies-texto h3 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 18px;
}

.cookies-texto p {
    margin: 0;
    color: #c5d1db;
    font-size: 13px;
    line-height: 1.65;
}

.cookies-texto a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookies-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.cookies-boton {
    min-width: 105px;
    padding: 11px 17px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.cookies-rechazar,
.cookies-configurar {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.cookies-rechazar:hover,
.cookies-configurar:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.cookies-aceptar {
    background: #29c4c7;
    color: #0b2442;
    border: 1px solid #29c4c7;
}

.cookies-aceptar:hover {
    background: #ffffff;
    border-color: #ffffff;
}


/* MÓVIL */

@media (max-width: 768px) {

    .cookies-banner {
        padding: 20px 0;
    }

    .cookies-contenido {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .cookies-texto h3 {
        font-size: 17px;
    }

    .cookies-texto p {
        font-size: 12px;
        line-height: 1.6;
    }

    .cookies-acciones {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .cookies-boton {
        width: 100%;
        min-width: 0;
    }

    .cookies-aceptar {
        grid-column: 1 / -1;
    }

}
/* =====================================
   CONFIGURACIÓN DE COOKIES
===================================== */

.cookies-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    padding: 25px;
    background: rgba(5, 20, 35, 0.65);
    align-items: center;
    justify-content: center;
}

.cookies-modal.activo {
    display: flex;
}

.cookies-modal-contenido {
    width: 100%;
    max-width: 650px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.cookies-modal-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.cookies-modal-etiqueta {
    margin: 0 0 5px;
    color: #2196c4;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.cookies-modal-cabecera h2 {
    margin: 0;
    color: #0b2442;
    font-size: 27px;
}

.cookies-cerrar {
    padding: 0;
    border: 0;
    background: transparent;
    color: #71808d;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.cookies-modal-intro {
    margin: 18px 0 25px;
    color: #596976;
    font-size: 14px;
    line-height: 1.65;
}

.cookies-categoria {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 20px 0;
    border-top: 1px solid #e5ebef;
}

.cookies-categoria-texto h3 {
    margin: 0 0 6px;
    color: #0b2442;
    font-size: 15px;
}

.cookies-categoria-texto p {
    max-width: 440px;
    margin: 0;
    color: #71808d;
    font-size: 12px;
    line-height: 1.55;
}

.cookies-siempre {
    flex-shrink: 0;
    color: #2196c4;
    font-size: 12px;
    font-weight: 600;
}


/* INTERRUPTOR */

.cookies-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 25px;
    flex-shrink: 0;
}

.cookies-switch input {
    width: 0;
    height: 0;
    opacity: 0;
}

.cookies-slider {
    position: absolute;
    inset: 0;
    background: #ccd5dc;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.2s;
}

.cookies-slider::before {
    content: "";
    position: absolute;
    width: 19px;
    height: 19px;
    left: 3px;
    bottom: 3px;
    background: #ffffff;
    border-radius: 50%;
    transition: 0.2s;
}

.cookies-switch input:checked + .cookies-slider {
    background: #29c4c7;
}

.cookies-switch input:checked + .cookies-slider::before {
    transform: translateX(21px);
}


/* PARTE INFERIOR */

.cookies-modal-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid #e5ebef;
}

.cookies-modal-pie a {
    color: #52606d;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookies-guardar {
    padding: 12px 20px;
    border: 0;
    border-radius: 6px;
    background: #2196c4;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.cookies-guardar:hover {
    background: #0b2442;
}


/* MÓVIL */

@media (max-width: 600px) {

    .cookies-modal {
        padding: 15px;
    }

    .cookies-modal-contenido {
        padding: 24px 20px;
    }

    .cookies-modal-cabecera h2 {
        font-size: 23px;
    }

    .cookies-categoria {
        gap: 15px;
    }

    .cookies-modal-pie {
        flex-direction: column;
        align-items: stretch;
    }

    .cookies-modal-pie a {
        text-align: center;
    }

    .cookies-guardar {
        width: 100%;
    }

}
/* =====================================
   SOLICITAR PRESUPUESTO
===================================== */


/* CABECERA */

.solicitud-hero {
    background: linear-gradient(135deg, #f6f9fb 0%, #edf8fc 100%);
    padding: 90px 0 80px;
    border-bottom: 1px solid #e3ebf0;
}

.solicitud-hero-contenido {
    max-width: 850px;
    text-align: center;
}

.solicitud-etiqueta {
    display: inline-block;
    margin-bottom: 16px;
    color: #2196c4;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.solicitud-hero h1 {
    margin: 0 0 20px;
    color: #0b2442;
    font-size: 48px;
    line-height: 1.12;
}

.solicitud-hero p {
    max-width: 700px;
    margin: 0 auto;
    color: #5c6b77;
    font-size: 17px;
    line-height: 1.7;
}


/* ZONA DEL FORMULARIO */

.solicitud-seccion {
    background: #f6f9fb;
    padding: 70px 0 100px;
}

.solicitud-contenedor {
    max-width: 900px;
}


/* FORMULARIO */

.solicitud-formulario {
    width: 100%;
}

.form-bloque {
    margin-bottom: 28px;
    padding: 38px;
    background: #ffffff;
    border: 1px solid #e3e9ed;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(11, 36, 66, 0.04);
}


/* CABECERA DE CADA BLOQUE */

.form-bloque-cabecera {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 30px;
}

.form-numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #edf8fc;
    color: #2196c4;
    font-size: 12px;
    font-weight: 700;
}

.form-bloque-cabecera h2 {
    margin: 0 0 6px;
    color: #0b2442;
    font-size: 21px;
}

.form-bloque-cabecera p {
    margin: 0;
    color: #7a8791;
    font-size: 13px;
    line-height: 1.6;
}


/* DISTRIBUCIÓN DE CAMPOS */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

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

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


/* ETIQUETAS */

.form-campo label {
    margin-bottom: 9px;
    color: #253b50;
    font-size: 13px;
    font-weight: 600;
}


/* INPUTS */

.form-campo input,
.form-campo textarea,
.form-campo select {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border: 1px solid #d5dfe5;
    border-radius: 7px;
    outline: none;
    background: #ffffff;
    color: #1f2d3d;
    font-family: inherit;
    font-size: 14px;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-campo input {
    min-height: 47px;
}

.form-campo textarea {
    resize: vertical;
    min-height: 125px;
    line-height: 1.6;
}

.form-campo input::placeholder,
.form-campo textarea::placeholder {
    color: #a1adb6;
}


/* CAMPO SELECCIONADO */

.form-campo input:focus,
.form-campo textarea:focus,
.form-campo select:focus {
    border-color: #2196c4;
    box-shadow: 0 0 0 3px rgba(33, 150, 196, 0.10);
}


/* PRIVACIDAD */

.form-legal {
    margin: 32px 0 25px;
    padding: 22px 25px;
    background: #ffffff;
    border: 1px solid #e3e9ed;
    border-radius: 9px;
}

.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.form-checkbox input {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: #2196c4;
}

.form-checkbox span {
    color: #63727e;
    font-size: 13px;
    line-height: 1.6;
}

.form-checkbox a {
    color: #2196c4;
    font-weight: 600;
    text-decoration: none;
}

.form-checkbox a:hover {
    text-decoration: underline;
}


/* ENVÍO */

.form-envio {
    text-align: center;
}

.form-boton-enviar {
    min-width: 220px;
    padding: 15px 28px;
    border: 0;
    border-radius: 7px;
    background: #2196c4;
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.form-boton-enviar:hover {
    background: #0b2442;
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(11, 36, 66, 0.14);
}

.form-envio p {
    margin: 12px 0 0;
    color: #87949e;
    font-size: 12px;
}


/* =====================================
   SOLICITAR PRESUPUESTO - MÓVIL
===================================== */

@media (max-width: 768px) {

    .solicitud-hero {
        padding: 55px 0 50px;
    }

    .solicitud-hero-contenido {
        width: 90%;
    }

    .solicitud-hero h1 {
        font-size: 35px;
    }

    .solicitud-hero p {
        font-size: 15px;
        line-height: 1.65;
    }

    .solicitud-seccion {
        padding: 40px 0 70px;
    }

    .solicitud-contenedor {
        width: 90%;
    }

    .form-bloque {
        padding: 25px 20px;
        margin-bottom: 18px;
    }

    .form-bloque-cabecera {
        gap: 13px;
        margin-bottom: 25px;
    }

    .form-numero {
        width: 37px;
        height: 37px;
    }

    .form-bloque-cabecera h2 {
        font-size: 18px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 19px;
    }

    .form-campo-completo {
        grid-column: auto;
    }

    .form-legal {
        padding: 19px;
    }

    .form-boton-enviar {
        width: 100%;
    }

}
/* =====================================
   CONFIRMACIÓN SOLICITUD
===================================== */

.solicitud-exito {
    padding: 70px 40px;
    background: #ffffff;
    border: 1px solid #e3e9ed;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(11, 36, 66, 0.05);
}

.solicitud-exito-icono {
    width: 58px;
    height: 58px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #edf8fc;
    color: #2196c4;
    font-size: 28px;
    font-weight: 700;
}

.solicitud-exito h2 {
    margin: 0 0 14px;
    color: #0b2442;
    font-size: 28px;
}

.solicitud-exito p {
    max-width: 600px;
    margin: 0 auto 28px;
    color: #63727e;
    font-size: 15px;
    line-height: 1.7;
}

.solicitud-exito .form-boton-enviar {
    display: inline-block;
    text-decoration: none;
}

.form-boton-enviar:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

@media (max-width: 768px) {

    .solicitud-exito {
        padding: 50px 22px;
    }

    .solicitud-exito h2 {
        font-size: 23px;
    }

}
/* =====================================
   AJUSTES FINALES MÓVIL
===================================== */

@media (max-width: 768px) {

    /* FOOTER MÁS COMPACTO */

    .footer {
        padding-top: 45px;
    }

    .footer-contenido {
        gap: 32px;
        padding-bottom: 35px;
    }

    .footer-logo {
        margin-bottom: 14px;
    }

    .footer-redes {
        margin-top: 16px;
    }

    .footer-columna h4 {
        margin-bottom: 14px;
    }

    .footer-columna a {
        margin-bottom: 9px;
    }

    .footer-inferior {
        padding: 18px 0;
    }

}
/* =====================================
   ORDEN FOOTER MÓVIL
===================================== */

@media (max-width: 768px) {

    .footer-contenido {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "marca marca"
            "contacto legal"
            "nav legal";
        gap: 26px 28px;
        align-items: start;
    }

    .footer-marca {
        grid-area: marca;
    }

    .footer-contacto {
        grid-area: contacto;
        min-width: 0;
    }

    .footer-nav {
        grid-area: nav;
        min-width: 0;
    }

    .footer-legal {
        grid-area: legal;
        min-width: 0;
    }

    .footer-enlaces a {
        overflow-wrap: anywhere;
    }

}
/* =====================================
   INICIO - ESPACIADO MÓVIL
===================================== */

@media (max-width: 768px) {

    .como-funciona,
    .que-es-sumexa,
    .identidad-sumexa,
    .para-quien,
    .sumexa-accion,
    .beneficios-sumexa {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .cta-final {
        padding-top: 55px;
        padding-bottom: 55px;
    }

}
@media (max-width: 768px) {

    .como-funciona {
        padding: 55px 0;
    }

    .como-funciona h2 {
        margin-bottom: 12px;
    }

    .subtitulo-seccion {
        margin-bottom: 35px;
    }

    .pasos {
        gap: 18px;
    }

}
/* =====================================
   CASO PRÁCTICO - COMPACTAR MÓVIL
===================================== */

@media (max-width: 800px) {

    /* General */
    .caso-etapa {
        padding: 22px 20px;
    }

    /* PASO 1 */
    #caso-etapa-1 {
        gap: 22px;
    }

    #caso-etapa-1 .caso-imagen {
        height: 230px;
    }

    /* PASO 2 */
    .paso2-contenido {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 22px 20px;
    }

    .paso2-info .caso-texto {
        margin-bottom: 16px;
    }

    .paso2-info .requisitos-caso {
        margin-top: 14px;
        gap: 8px;
    }

    .paso2-info .busqueda-caso {
        margin-top: 14px;
    }

    /* PASO 3 */
    #caso-etapa-3 {
        justify-content: flex-start;
    }

    #caso-etapa-3 .caso-texto {
        margin-bottom: 22px;
    }

    .caso-proveedores {
        gap: 14px;
    }

    /* PASO 4 */
    #caso-etapa-4 {
        padding: 22px 16px;
    }

    /* PASO 5 */
    .paso5-contenido {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 22px 20px;
    }

    .paso5-imagen img {
        height: 220px;
        max-width: 100%;
    }

    .paso5-info .caso-texto {
        margin-bottom: 14px;
    }

}
/* =====================================
   CASO PRÁCTICO - CARRUSEL MÓVIL
===================================== */

@media (max-width: 800px) {

    .caso-pantalla {
    display: flex;
    align-items: flex-start;

    width: 100%;
    height: auto;
    min-height: 0 !important;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    border-radius: 20px;
    scrollbar-width: none;
}

    .caso-pantalla::-webkit-scrollbar {
        display: none;
    }

    .caso-etapa {
        position: relative !important;

        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        height: auto !important;
min-height: 0 !important;

        scroll-snap-align: start;
        scroll-snap-stop: always;

        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;

        display: flex !important;
        box-sizing: border-box;
       
    }

}
/* Indicadores del caso práctico */

.indicadores-caso {
    display: none;
}

@media (max-width: 800px) {

    .indicadores-caso {
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 18px;
    }

    .indicadores-caso.visible {
        display: flex;
    }

    .indicador-caso {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #cbd6df;
        transition: all 0.25s ease;
    }

    .indicador-caso.activo {
        width: 22px;
        border-radius: 10px;
        background: #29a9ce;
    }
}
@media (max-width: 800px) {

    /* PASO 5 - más compacto */

    .paso5-contenido {
        gap: 14px;
        padding: 18px 20px;
    }

    .paso5-imagen img {
        height: 180px;
    }

    .paso5-info .caso-texto {
        margin-bottom: 10px;
    }

    .paso5-info .caso-texto p {
        line-height: 1.5;
    }

    .decision-resumen {
        gap: 8px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .decision-item {
        padding: 10px 12px;
    }

    .decision-item p {
        margin-top: 3px;
        line-height: 1.4;
    }

    .opcion-seleccionada {
        margin-top: 10px;
        padding: 14px 16px;
    }
}
/* =====================================
   PARA EMPRESAS - CATEGORÍAS MÓVIL
===================================== */

@media (max-width: 768px) {

    .categorias-necesidades {
        align-items: stretch;
    }

    .categoria-necesidad {
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .categoria-necesidad p {
        flex-grow: 1;
    }
}