/* ==========================================
   JUPER SISTEM | BANNER PREMIUM
   VERSIÓN COMPACTA + RESPONSIVE
   LOGOS FLOTANTES + ESTRUCTURA ESTABLE
========================================== */

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

.catalog-hero,
.catalog-hero * {
    box-sizing: border-box;
}

/* ==========================================
   BANNER PRINCIPAL
========================================== */

.catalog-hero {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;

    padding: clamp(20px, 2.25vw, 28px) 14px 0;

    overflow: hidden;

    background: #fff;
    color: #1d1d1f;
}

/* FONDO SUAVE AZUL Y VIOLETA */

.catalog-hero::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 20% 90%,
            rgba(0, 122, 255, .13),
            transparent 58%
        ),
        radial-gradient(
            ellipse at 80% 90%,
            rgba(129, 79, 255, .12),
            transparent 58%
        );
}

/* ==========================================
   TEXTOS - ESPACIO RESERVADO
========================================== */

.catalog-hero__intro {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-rows: 115px 35px;

    align-items: center;

    width: 100%;
    max-width: 880px;
    height: 150px;

    margin: 0 auto;

    text-align: center;
}

/* TÍTULO PRINCIPAL */

.catalog-hero__title {
    margin: 0;

    font-size: clamp(29px, 3vw, 46px);
    font-weight: 750;

    line-height: 1.12;
    letter-spacing: -.044em;

    overflow: visible;
}

.catalog-hero__title span {
    display: block;
}

/* ==========================================
   TEXTO DEGRADADO SIN RECORTES
========================================== */

.catalog-hero__accent {
    display: block;

    width: fit-content;
    max-width: 100%;
    margin: 0 auto;

    /* Protege las partes bajas de las letras */
    padding: .02em .06em .13em;

    line-height: 1.16;
    overflow: visible;

    background: linear-gradient(
        110deg,
        #007aff,
        #5856d6,
        #a63ce8
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* DESCRIPCIÓN */

.catalog-hero__subtitle {
    max-width: 550px;

    margin: 0 auto;

    color: #747984;
    font-size: 14px;
    line-height: 1.45;
}

/* ==========================================
   ESCENARIO PRINCIPAL COMPACTO
========================================== */

.catalog-hero__scene {
    position: relative;

    display: grid;
    grid-template-columns: 23% 54% 23%;

    align-items: stretch;

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

    /* ALTURA REDUCIDA */
    height: 370px;

    margin: 0 auto;
}

/* ==========================================
   PERSONA CENTRAL
========================================== */

.catalog-hero__person-wrap {
    position: relative;
    z-index: 1;

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

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;
}

/* PERSONA COMPLETA SIN DEFORMACIÓN */

.catalog-hero__person {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: contain;
    object-position: center bottom;

    transform: none;
}

/* OCULTAR SI TODAVÍA NO HAY IMAGEN */

.catalog-hero__person:not([src]) {
    visibility: hidden;
}

/* ==========================================
   COLUMNAS DE LOGOS
========================================== */

.catalog-hero__logos {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: space-around;

    gap: 6px;

    padding: 3px 0 7px;

    min-width: 0;
}

/* ==========================================
   CONTENEDOR INVISIBLE DEL LOGO
========================================== */

.catalog-hero__logo-card {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    /* TAMAÑO UNIFORME */
    width: clamp(86px, 8.5vw, 112px);
    aspect-ratio: 1;

    padding: 0;
    margin: 0;

    background: transparent;

    border: 0;
    box-shadow: none;
}

/* ==========================================
   IMÁGENES 3D
========================================== */

.catalog-hero__logo-card img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    /* ANIMACIÓN LIGERA */
    animation: logo-float 5s ease-in-out infinite;
}

/* ==========================================
   FLOTACIÓN SUAVE
========================================== */

@keyframes logo-float {

    0%, 100% {
        transform: translateY(2px);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* DIFERENTES TIEMPOS DE FLOTACIÓN */

.catalog-hero__logo-card:nth-child(2) img {
    animation-delay: -1.7s;
}

.catalog-hero__logo-card:nth-child(3) img {
    animation-delay: -3.3s;
}

/* COLUMNA DERECHA ALTERNADA */

.catalog-hero__logos--right img {
    animation-direction: reverse;
}

/* ==========================================
   INCLINACIÓN DE LOS LOGOS
========================================== */

.catalog-hero__logos--left
.catalog-hero__logo-card:nth-child(odd) {
    transform: rotate(-5deg) translateX(6px);
}

.catalog-hero__logos--right
.catalog-hero__logo-card:nth-child(odd) {
    transform: rotate(5deg) translateX(-6px);
}

/* LOGOS SIN IMAGEN */

.catalog-hero__logo-card.is-empty {
    visibility: hidden;
}

.catalog-hero__logo-card img[hidden],
.hero-logo-fallback {
    display: none;
}

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

@media (max-width: 900px) {

    .catalog-hero__scene {
        height: 330px;
    }

    .catalog-hero__logo-card {
        width: clamp(72px, 10.5vw, 96px);
    }
}

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

@media (max-width: 650px) {

    /* BANNER */

    .catalog-hero {
        padding: 20px 8px 0;
    }

    /* ALTURA FIJA DE TEXTOS */

    .catalog-hero__intro {
        height: 142px;

        grid-template-rows: 96px 46px;
    }

    /* TÍTULO */

    .catalog-hero__title {
        font-size: clamp(26px, 6.8vw, 34px);

        line-height: 1.12;
        letter-spacing: -.044em;
    }

    /* DEGRADADO SIN CORTAR LETRAS */

    .catalog-hero__accent {
        padding: .02em .06em .13em;
        line-height: 1.16;
    }

    /* DESCRIPCIÓN */

    .catalog-hero__subtitle {
        max-width: 330px;

        margin: 0 auto;
        padding: 0 4px;

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

    /* ======================================
       ESCENARIO COMPACTO
    ====================================== */

    .catalog-hero__scene {
        display: block;

        width: 100%;

        height: clamp(230px, 65vw, 340px);

        margin: 0 auto;
    }

    /* ======================================
       PERSONA CENTRAL
    ====================================== */

    .catalog-hero__person-wrap {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        transform: none;
    }

    .catalog-hero__person {
        width: 100%;
        height: 100%;

        object-fit: contain;
        object-position: center bottom;
    }

    /* ======================================
       LOGOS LATERALES
    ====================================== */

    .catalog-hero__logos {
        position: absolute;

        top: 0;
        bottom: 0;

        width: 25%;

        padding: 6px 0 8px;
        gap: 5px;
    }

    .catalog-hero__logos--left {
        left: 0;
    }

    .catalog-hero__logos--right {
        right: 0;
    }

    /* LOGOS CON TAMAÑO UNIFORME */

    .catalog-hero__logo-card {
        width: clamp(52px, 17vw, 82px);
    }

    /* INCLINACIÓN MÓVIL */

    .catalog-hero__logos--left
    .catalog-hero__logo-card:nth-child(odd) {
        transform: rotate(-4deg);
    }

    .catalog-hero__logos--right
    .catalog-hero__logo-card:nth-child(odd) {
        transform: rotate(4deg);
    }
}

/* ==========================================
   CELULARES PEQUEÑOS
========================================== */

@media (max-width: 365px) {

    .catalog-hero__title {
        font-size: 25px;
    }

    .catalog-hero__logo-card {
        width: 17vw;
    }

    .catalog-hero__subtitle {
        font-size: 12px;
    }
}

/* ==========================================
   ACCESIBILIDAD
========================================== */

@media (prefers-reduced-motion: reduce) {

    .catalog-hero__logo-card img {
        animation: none;
    }
}

/* ==========================================
   FIN | JUPER SISTEM BANNER PREMIUM
   VERSIÓN COMPACTA
========================================== */