/* =========================================================
   INGPRO — CATÁLOGO EN LÍNEA
   Archivo: css/catalogo.css
========================================================= */

:root {
    --catalog-navy: #06142f;
    --catalog-navy-soft: #0b244a;
    --catalog-blue: #123568;
    --catalog-blue-light: #24558f;

    --catalog-yellow: #fdb427;
    --catalog-yellow-dark: #d88b00;
    --catalog-yellow-light: #ffd66c;

    --catalog-white: #ffffff;
    --catalog-background: #f2f6fb;
    --catalog-soft-blue: #e8eef7;
    --catalog-border: #d7e1ed;

    --catalog-text: #12213d;
    --catalog-muted: #65738a;

    --catalog-shadow:
        0 17px 40px rgba(6, 20, 47, 0.1);

    --catalog-shadow-large:
        0 35px 85px rgba(6, 20, 47, 0.26);

    --catalog-transition: 0.32s ease;
}

html {
    scroll-behavior: smooth;
}

#visor-catalogo {
    scroll-margin-top: 110px;
}

.catalog-section {
    padding-block: clamp(4.5rem, 8vw, 7.5rem);
}

/* =========================================================
   ELEMENTOS GENERALES
========================================================= */

.catalog-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;

    margin: 0 0 0.85rem;

    color: var(--catalog-yellow);

    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

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

    width: 40px;
    height: 3px;

    border-radius: 999px;

    background-color: currentColor;
}

.catalog-eyebrow--dark {
    color: var(--catalog-yellow-dark);
}

.catalog-heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) minmax(270px, 0.42fr);

    align-items: end;
    gap: 3rem;

    margin-bottom: 2.6rem;
}

.catalog-heading h2 {
    max-width: 850px;
    margin: 0;

    color: var(--catalog-text);

    font-size: clamp(2.35rem, 4.7vw, 4.1rem);
    line-height: 1.03;
    letter-spacing: -0.045em;
}

.catalog-heading>p {
    margin: 0;

    color: var(--catalog-muted);
    line-height: 1.65;
}

/* Botones */

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

    min-height: 50px;
    padding: 0.82rem 1.25rem;

    border: 2px solid transparent;
    border-radius: 999px;

    font-weight: 850;
    text-align: center;
    text-decoration: none;

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

.catalog-button--primary {
    border-color: var(--catalog-yellow);

    background:
        linear-gradient(145deg,
            var(--catalog-yellow),
            var(--catalog-yellow-light));

    color: var(--catalog-navy);

    box-shadow:
        0 14px 30px rgba(253, 180, 39, 0.22);
}

.catalog-button--primary:hover {
    border-color: var(--catalog-white);

    background: var(--catalog-white);
    color: var(--catalog-navy);

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.25);

    transform: translateY(-4px);
}

.catalog-button--secondary {
    border-color: rgba(255, 255, 255, 0.75);

    background-color: transparent;
    color: var(--catalog-white);
}

.catalog-button--secondary:hover {
    border-color: var(--catalog-yellow);

    background-color: rgba(255, 255, 255, 0.08);
    color: var(--catalog-yellow);

    transform: translateY(-4px);
}

.catalog-button--dark {
    border-color: var(--catalog-navy);

    background-color: var(--catalog-navy);
    color: var(--catalog-white);

    box-shadow:
        0 14px 30px rgba(6, 20, 47, 0.22);
}

.catalog-button--dark:hover {
    border-color: var(--catalog-blue);

    background-color: var(--catalog-blue);
    color: var(--catalog-white);

    transform: translateY(-4px);
}

/* =========================================================
   PORTADA
========================================================= */

.catalog-hero {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 700px;
    overflow: hidden;

    background:
        radial-gradient(circle at 88% 10%,
            rgba(253, 180, 39, 0.18),
            transparent 24%),
        radial-gradient(circle at 8% 100%,
            rgba(36, 85, 143, 0.32),
            transparent 32%),
        linear-gradient(135deg,
            #030c1d 0%,
            #091f43 48%,
            #174579 100%);

    color: var(--catalog-white);

    isolation: isolate;
}

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

    position: absolute;
    right: -1rem;
    bottom: -5rem;
    z-index: -1;

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

    font-size: clamp(12rem, 27vw, 27rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.09em;

    pointer-events: none;
}

.catalog-hero__decoration {
    position: absolute;
    top: -260px;
    right: -210px;
    z-index: -1;

    width: 640px;
    height: 640px;

    border: 92px solid rgba(253, 180, 39, 0.055);
    border-radius: 50%;

    pointer-events: none;
}

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

    display: grid;
    grid-template-columns:
        minmax(0, 1.06fr) minmax(390px, 0.76fr);

    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);

    width: 100%;
    padding-block: clamp(4.8rem, 8vw, 7.8rem);
}

.catalog-hero__content h1 {
    max-width: 850px;
    margin: 0 0 1.35rem;

    color: var(--catalog-white);

    font-size: clamp(3.6rem, 7vw, 6.7rem);
    line-height: 0.94;
    letter-spacing: -0.06em;
}

.catalog-hero__content h1 span {
    display: block;

    color: var(--catalog-yellow);
}

.catalog-hero__description {
    max-width: 660px;
    margin: 0 0 1.45rem;

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

    font-size: clamp(1rem, 1.7vw, 1.18rem);
    line-height: 1.7;
}

.catalog-hero__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;

    margin-bottom: 1.8rem;
}

.catalog-hero__categories span {
    padding: 0.6rem 0.85rem;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;

    background-color: rgba(255, 255, 255, 0.07);
    color: var(--catalog-white);

    font-size: 0.72rem;
    font-weight: 800;

    backdrop-filter: blur(8px);
}

.catalog-hero__categories span::before {
    content: "";

    display: inline-block;

    width: 7px;
    height: 7px;
    margin-right: 0.45rem;

    border-radius: 50%;

    background-color: var(--catalog-yellow);

    box-shadow:
        0 0 0 4px rgba(253, 180, 39, 0.12);
}

.catalog-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

/* =========================================================
   PANEL VISUAL
========================================================= */

.catalog-hero__panel {
    position: relative;

    width: min(100%, 525px);
    margin-inline: auto;
    padding: 1rem;
    overflow: hidden;

    border: 1px solid rgba(253, 180, 39, 0.7);
    border-radius: 30px;

    background:
        radial-gradient(circle at 87% 9%,
            rgba(253, 180, 39, 0.15),
            transparent 28%),
        linear-gradient(145deg,
            #07152f,
            #12386d 65%,
            #1b4e89);

    box-shadow:
        0 40px 92px rgba(0, 0, 0, 0.4);

    transition:
        transform var(--catalog-transition),
        box-shadow var(--catalog-transition);
}

.catalog-hero__panel:hover {
    box-shadow:
        0 49px 105px rgba(0, 0, 0, 0.48);

    transform: translateY(-7px);
}

.catalog-hero__panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: 0.3rem 0.3rem 1rem;
}

.catalog-hero__panel-top span {
    color: rgba(255, 255, 255, 0.67);

    font-size: 0.69rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.catalog-hero__panel-top strong {
    padding: 0.55rem 0.8rem;

    border-radius: 999px;

    background-color: var(--catalog-yellow);
    color: var(--catalog-navy);

    font-size: 0.72rem;
    font-weight: 950;
}

/* Documento simulado */

.catalog-document {
    position: relative;

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

    min-height: 355px;
    overflow: hidden;

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

    background:
        radial-gradient(circle at center,
            rgba(253, 180, 39, 0.14),
            transparent 47%),
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.025) 0,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 43px),
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.02));
}

.catalog-document__back {
    position: absolute;

    width: 205px;
    height: 275px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;

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

    transform:
        translate(35px, -4px) rotate(8deg);
}

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

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 205px;
    min-height: 280px;
    padding: 1.2rem;
    overflow: hidden;

    border-radius: 14px;

    background:
        linear-gradient(155deg,
            #ffffff 0%,
            #f4f6fa 100%);

    color: var(--catalog-navy);

    box-shadow:
        0 24px 50px rgba(0, 0, 0, 0.36);

    transform: rotate(-3deg);

    transition: transform 0.45s ease;
}

.catalog-hero__panel:hover .catalog-document__page {
    transform:
        rotate(0deg) scale(1.04);
}

.catalog-document__page::before,
.catalog-document__page::after {
    content: "";

    position: absolute;

    width: 145px;
    height: 38px;

    border-radius: 999px;

    background-color: #b42145;

    transform: rotate(-35deg);
}

.catalog-document__page::before {
    top: -18px;
    left: -55px;
}

.catalog-document__page::after {
    right: -55px;
    bottom: 5px;
}

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

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

    width: 65px;
    height: 65px;
    margin-bottom: 1.1rem;

    border-radius: 50%;

    background-color: var(--catalog-white);
}

.catalog-document__brand img {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    object-fit: contain;
}

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

    color: #b42145;

    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.catalog-document__page>strong {
    position: relative;
    z-index: 2;

    margin-top: 0.25rem;

    color: #231d1e;

    font-size: 3.4rem;
    font-weight: 950;
    line-height: 0.9;
    letter-spacing: -0.08em;
}

.catalog-document__page>strong span {
    color: #b42145;
}

.catalog-document__page p {
    position: relative;
    z-index: 2;

    max-width: 160px;
    margin: 0.8rem 0;

    color: var(--catalog-muted);

    font-size: 0.67rem;
    line-height: 1.45;
    text-align: center;
}

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

    display: grid;
    gap: 0.35rem;

    width: 100%;
    margin-top: auto;
}

.catalog-document__lines span {
    display: block;

    height: 5px;

    border-radius: 999px;

    background-color: var(--catalog-soft-blue);
}

.catalog-document__lines span:nth-child(2) {
    width: 80%;
}

.catalog-document__lines span:nth-child(3) {
    width: 60%;
}

/* Estadísticas */

.catalog-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;

    padding: 1rem 0.2rem 0.3rem;
}

.catalog-hero__stats article {
    min-width: 0;
    padding: 0.8rem 0.55rem;

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

    background-color: rgba(255, 255, 255, 0.055);

    text-align: center;
}

.catalog-hero__stats strong {
    display: block;

    margin-bottom: 0.2rem;

    color: var(--catalog-yellow);

    font-size: 1.1rem;
    font-weight: 950;
}

.catalog-hero__stats span {
    display: block;

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

    font-size: 0.66rem;
    line-height: 1.3;
}

/* =========================================================
   NAVEGACIÓN RÁPIDA
========================================================= */

.catalog-navigation {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at 92% 8%,
            rgba(253, 180, 39, 0.13),
            transparent 23%),
        linear-gradient(180deg,
            var(--catalog-white),
            var(--catalog-background));
}

.catalog-navigation__links {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.8rem;
}

.catalog-navigation__links a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;

    min-height: 145px;
    padding: 1rem;

    border: 1px solid var(--catalog-border);
    border-radius: 18px;

    background-color: var(--catalog-white);
    color: var(--catalog-text);

    font-size: 0.84rem;
    font-weight: 850;

    box-shadow:
        0 12px 28px rgba(6, 20, 47, 0.07);

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

.catalog-navigation__links a span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    border-radius: 13px;

    background-color: var(--catalog-blue);
    color: var(--catalog-yellow);

    font-size: 0.74rem;
    font-weight: 950;

    transition:
        background-color var(--catalog-transition),
        color var(--catalog-transition),
        transform var(--catalog-transition);
}

.catalog-navigation__links a:hover {
    border-color: var(--catalog-yellow);

    background-color: var(--catalog-navy);
    color: var(--catalog-white);

    box-shadow:
        0 22px 45px rgba(6, 20, 47, 0.18);

    transform: translateY(-7px);
}

.catalog-navigation__links a:hover span {
    background-color: var(--catalog-yellow);
    color: var(--catalog-navy);

    transform: rotate(-5deg);
}

/* =========================================================
   VISOR
========================================================= */

.catalog-viewer {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at 89% 9%,
            rgba(253, 180, 39, 0.12),
            transparent 23%),
        linear-gradient(145deg,
            var(--catalog-navy),
            #102f60 63%,
            #184980);
}

.catalog-viewer::after {
    content: "PDF";

    position: absolute;
    right: -1rem;
    bottom: -4rem;

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

    font-size: clamp(11rem, 25vw, 24rem);
    font-weight: 950;
    line-height: 1;
}

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

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;

    margin-bottom: 1.7rem;
}

.catalog-viewer__header h2 {
    margin: 0;

    color: var(--catalog-white);

    font-size: clamp(2.3rem, 4.5vw, 4rem);
    line-height: 1.03;
}

.catalog-viewer__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

.catalog-viewer__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 0.65rem 0.9rem;

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

    background-color: rgba(255, 255, 255, 0.07);
    color: var(--catalog-white);

    font-size: 0.72rem;
    font-weight: 800;

    transition:
        border-color var(--catalog-transition),
        background-color var(--catalog-transition),
        color var(--catalog-transition),
        transform var(--catalog-transition);
}

.catalog-viewer__actions a:hover {
    border-color: var(--catalog-yellow);

    background-color: var(--catalog-yellow);
    color: var(--catalog-navy);

    transform: translateY(-3px);
}

/* Ventana */

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

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;

    background-color: #111827;

    box-shadow:
        0 34px 82px rgba(0, 0, 0, 0.38);
}

.catalog-viewer__toolbar {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;

    align-items: center;
    gap: 1rem;

    min-height: 58px;
    padding: 0.75rem 1rem;

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

    background:
        linear-gradient(180deg,
            #17263f,
            #0d1b32);
}

.catalog-viewer__dots {
    display: flex;
    gap: 0.4rem;
}

.catalog-viewer__dots span {
    display: block;

    width: 11px;
    height: 11px;

    border-radius: 50%;
}

.catalog-viewer__dots span:nth-child(1) {
    background-color: #ff6b6b;
}

.catalog-viewer__dots span:nth-child(2) {
    background-color: var(--catalog-yellow);
}

.catalog-viewer__dots span:nth-child(3) {
    background-color: #45c88a;
}

.catalog-viewer__toolbar p {
    min-width: 0;
    margin: 0;

    overflow: hidden;

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

    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-viewer__status {
    padding: 0.45rem 0.65rem;

    border-radius: 999px;

    background-color: rgba(69, 200, 138, 0.13);
    color: #76e0ad;

    font-size: 0.65rem;
    font-weight: 850;
}

/* PDF */

.catalog-viewer__frame {
    display: block;

    width: 100%;
    height: min(82vh, 1050px);
    min-height: 760px;

    border: 0;

    background-color: #d9dee7;
}

/* Ayuda */

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

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;

    margin-top: 1rem;
}

.catalog-viewer__help article {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr);
    gap: 0.8rem;

    padding: 1rem;

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

    background-color: rgba(255, 255, 255, 0.055);
}

.catalog-viewer__help article>span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    border-radius: 13px;

    background-color: var(--catalog-yellow);
    color: var(--catalog-navy);

    font-size: 0.72rem;
    font-weight: 950;
}

.catalog-viewer__help h3 {
    margin: 0 0 0.25rem;

    color: var(--catalog-white);

    font-size: 0.9rem;
}

.catalog-viewer__help p {
    margin: 0;

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

    font-size: 0.76rem;
    line-height: 1.5;
}

/* =========================================================
   LLAMADO FINAL
========================================================= */

.catalog-cta {
    position: relative;
    overflow: hidden;

    padding-block: clamp(3.5rem, 6vw, 5.5rem);

    background:
        linear-gradient(145deg,
            var(--catalog-yellow),
            var(--catalog-yellow-light));
}

.catalog-cta::after {
    content: "";

    position: absolute;
    top: -150px;
    right: -135px;

    width: 350px;
    height: 350px;

    border: 58px solid rgba(6, 20, 47, 0.06);
    border-radius: 50%;
}

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

    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items: center;
    gap: 3rem;
}

.catalog-cta h2 {
    max-width: 830px;
    margin: 0 0 0.65rem;

    color: var(--catalog-navy);

    font-size: clamp(2.4rem, 4.6vw, 4rem);
    line-height: 1.03;
    letter-spacing: -0.045em;
}

.catalog-cta p {
    max-width: 720px;
    margin: 0;

    color: rgba(6, 20, 47, 0.75);
    line-height: 1.6;
}

.catalog-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;

    min-width: 250px;
}

.catalog-cta__email {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0.7rem;

    color: var(--catalog-navy);

    font-weight: 850;
}

/* =========================================================
   PANTALLAS GRANDES
========================================================= */

@media (min-width: 1700px) {
    .catalog-hero {
        min-height: 790px;
    }

    .catalog-hero__panel {
        width: min(100%, 600px);
    }

    .catalog-document {
        min-height: 405px;
    }

    .catalog-viewer__frame {
        min-height: 900px;
    }
}

/* =========================================================
   LAPTOP Y TABLET HORIZONTAL
========================================================= */

@media (max-width: 1150px) {
    .catalog-hero__layout {
        grid-template-columns:
            minmax(0, 1fr) minmax(355px, 0.7fr);

        gap: 3rem;
    }

    .catalog-hero__panel {
        width: min(100%, 485px);
    }

    .catalog-navigation__links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

@media (max-width: 900px) {
    .catalog-hero__layout {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .catalog-hero__content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .catalog-hero__categories,
    .catalog-hero__actions {
        justify-content: center;
    }

    .catalog-hero__panel {
        width: min(100%, 620px);
    }

    .catalog-heading {
        grid-template-columns: 1fr;

        gap: 0.85rem;
    }

    .catalog-viewer__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .catalog-viewer__actions {
        justify-content: flex-start;
    }

    .catalog-viewer__help {
        grid-template-columns: 1fr;
    }

    .catalog-cta__content {
        grid-template-columns: 1fr;
    }

    .catalog-cta__actions {
        width: min(100%, 370px);
        min-width: 0;
    }
}

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

@media (max-width: 640px) {
    .catalog-section {
        padding-block: 4rem;
    }

    .catalog-hero {
        min-height: auto;
    }

    .catalog-hero__layout {
        gap: 2.7rem;
        padding-block: 3.7rem;
    }

    .catalog-hero__content h1 {
        font-size: clamp(3rem, 14vw, 4.5rem);
    }

    .catalog-hero__description {
        font-size: 0.97rem;
    }

    .catalog-hero__categories {
        width: 100%;
    }

    .catalog-hero__categories span {
        flex: 1 1 auto;
    }

    .catalog-hero__actions {
        flex-direction: column;

        width: 100%;
    }

    .catalog-hero__actions .catalog-button {
        width: 100%;
    }

    .catalog-hero__panel {
        width: min(100%, 450px);
        padding: 0.7rem;

        border-radius: 23px;
    }

    .catalog-document {
        min-height: 310px;

        border-radius: 17px;
    }

    .catalog-document__page {
        width: 180px;
        min-height: 250px;
    }

    .catalog-document__back {
        width: 180px;
        height: 250px;
    }

    .catalog-hero__stats {
        grid-template-columns: 1fr;
    }

    .catalog-navigation__links {
        display: flex;
        gap: 0.8rem;

        margin-inline: -1rem;
        padding-inline: 1rem;
        padding-bottom: 1rem;
        overflow-x: auto;

        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }

    .catalog-navigation__links a {
        flex: 0 0 155px;

        scroll-snap-align: start;
    }

    .catalog-viewer__toolbar {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .catalog-viewer__status {
        display: none;
    }

    .catalog-viewer__frame {
        height: 72vh;
        min-height: 560px;
    }

    .catalog-viewer__actions {
        flex-direction: column;

        width: 100%;
    }

    .catalog-viewer__actions a {
        width: 100%;
    }

    .catalog-cta__actions,
    .catalog-cta__actions .catalog-button {
        width: 100%;
    }
}

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

@media (max-width: 400px) {
    .catalog-hero__panel-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .catalog-viewer__frame {
        min-height: 510px;
    }

    .catalog-viewer__help article {
        grid-template-columns: 1fr;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .catalog-button,
    .catalog-hero__panel,
    .catalog-document__page,
    .catalog-navigation__links a,
    .catalog-navigation__links a span,
    .catalog-viewer__actions a {
        transition: none;
    }

        /* =========================================================
       VISOR PDF TIPO LIBRO
    ========================================================= */
    
        .catalog-book {
            position: relative;
    
            display: flex;
            align-items: center;
            justify-content: center;
    
            min-height: 650px;
            padding: 1.6rem 4.8rem;
            overflow: hidden;
    
            background:
                radial-gradient(circle at center,
                    rgba(253, 180, 39, 0.11),
                    transparent 42%),
                linear-gradient(145deg,
                    #dfe5ee,
                    #f6f8fb);
        }
    
        /* Cargando */
    
        .catalog-book__loading {
            position: absolute;
            inset: 0;
            z-index: 20;
    
            display: flex;
            align-items: center;
            justify-content: center;
    
            background-color: rgba(242, 246, 251, 0.94);
            color: #12213d;
    
            font-size: 0.88rem;
            font-weight: 850;
        }
    
        /* Distribución de páginas */
    
        .catalog-book__spread {
            display: grid;
            grid-template-columns:
                repeat(2, minmax(0, 1fr));
            align-items: center;
            justify-content: center;
            gap: 0.85rem;
    
            width: min(100%, 1180px);
            margin-inline: auto;
    
            transition:
                opacity 0.25s ease,
                transform 0.25s ease;
        }
    
        .catalog-book__spread--cover {
            grid-template-columns:
                minmax(280px, 540px);
    
            justify-content: center;
        }
    
        .catalog-book--changing .catalog-book__spread {
            opacity: 0.4;
    
            transform: scale(0.985);
        }
    
        /* Hoja */
    
        .catalog-book__sheet {
            position: relative;
    
            display: flex;
            align-items: center;
            justify-content: center;
    
            min-width: 0;
            min-height: 520px;
            padding: 0.7rem 0.7rem 2rem;
            overflow: hidden;
    
            border: 1px solid rgba(6, 20, 47, 0.14);
    
            background-color: #ffffff;
    
            box-shadow:
                0 22px 45px rgba(6, 20, 47, 0.18);
        }
    
        .catalog-book__sheet--left {
            border-radius: 16px 4px 4px 16px;
    
            box-shadow:
                -15px 22px 42px rgba(6, 20, 47, 0.16);
        }
    
        .catalog-book__sheet--right {
            border-radius: 4px 16px 16px 4px;
    
            box-shadow:
                15px 22px 42px rgba(6, 20, 47, 0.16);
        }
    
        /* Simulación del centro del libro */
    
        .catalog-book__sheet--left::after,
        .catalog-book__sheet--right::before {
            content: "";
    
            position: absolute;
            top: 0;
            bottom: 0;
    
            width: 24px;
    
            pointer-events: none;
        }
    
        .catalog-book__sheet--left::after {
            right: 0;
    
            background:
                linear-gradient(90deg,
                    transparent,
                    rgba(6, 20, 47, 0.12));
        }
    
        .catalog-book__sheet--right::before {
            left: 0;
    
            background:
                linear-gradient(90deg,
                    rgba(6, 20, 47, 0.12),
                    transparent);
        }
    
        .catalog-book__spread--cover .catalog-book__sheet--right {
            border-radius: 16px;
    
            box-shadow:
                0 25px 52px rgba(6, 20, 47, 0.22);
        }
    
        .catalog-book__spread--cover .catalog-book__sheet--right::before {
            display: none;
        }
    
        /* Canvas */
    
        .catalog-book__sheet canvas {
            display: block;
    
            max-width: 100%;
            max-height: 72vh;
    
            background-color: #ffffff;
    
            object-fit: contain;
        }
    
        /* Número de página */
    
        .catalog-book__page-number {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
    
            display: flex;
            align-items: center;
            justify-content: center;
    
            min-height: 30px;
    
            border-top: 1px solid rgba(6, 20, 47, 0.08);
    
            background-color: #f8fafc;
            color: #65738a;
    
            font-size: 0.68rem;
            font-weight: 750;
        }
    
        /* Flechas */
    
        .catalog-book__arrow {
            position: absolute;
            top: 50%;
            z-index: 15;
    
            display: inline-flex;
            align-items: center;
            justify-content: center;
    
            width: 54px;
            height: 54px;
            padding: 0;
    
            border: 2px solid #fdb427;
            border-radius: 50%;
    
            background-color: #06142f;
            color: #ffffff;
    
            box-shadow:
                0 14px 28px rgba(6, 20, 47, 0.28);
    
            cursor: pointer;
    
            transform: translateY(-50%);
    
            transition:
                transform 0.25s ease,
                background-color 0.25s ease,
                color 0.25s ease,
                opacity 0.25s ease;
        }
    
        .catalog-book__arrow span {
            display: block;
    
            margin-top: -5px;
    
            font-size: 2.5rem;
            line-height: 1;
        }
    
        .catalog-book__arrow--previous {
            left: 1.2rem;
        }
    
        .catalog-book__arrow--next {
            right: 1.2rem;
        }
    
        .catalog-book__arrow:hover:not(:disabled) {
            background-color: #fdb427;
            color: #06142f;
    
            transform:
                translateY(-50%) scale(1.08);
        }
    
        .catalog-book__arrow:disabled {
            opacity: 0.25;
    
            cursor: not-allowed;
        }
    
        /* Controles inferiores */
    
        .catalog-book-controls {
            display: grid;
            grid-template-columns:
                auto minmax(0, 1fr) auto;
    
            align-items: center;
            gap: 1rem;
    
            min-height: 64px;
            padding: 0.75rem 1rem;
    
            border-top: 1px solid rgba(255, 255, 255, 0.1);
    
            background:
                linear-gradient(180deg,
                    #17263f,
                    #0d1b32);
        }
    
        .catalog-book-controls p {
            margin: 0;
    
            color: rgba(255, 255, 255, 0.78);
    
            font-size: 0.8rem;
            font-weight: 800;
            text-align: center;
        }
    
        .catalog-book-controls button {
            min-height: 40px;
            padding: 0.55rem 0.8rem;
    
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 999px;
    
            background-color: rgba(255, 255, 255, 0.07);
            color: #ffffff;
    
            font-size: 0.68rem;
            font-weight: 800;
    
            cursor: pointer;
        }
    
        .catalog-book-controls button:hover:not(:disabled) {
            border-color: #fdb427;
    
            background-color: #fdb427;
            color: #06142f;
        }
    
        .catalog-book-controls button:disabled {
            opacity: 0.35;
    
            cursor: not-allowed;
        }
    
        /* Error */
    
        .catalog-book-error {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
    
            padding: 1rem;
    
            background-color: #0d1b32;
        }
    
        .catalog-book-error[hidden] {
            display: none;
        }
    
        .catalog-book-error p {
            margin: 0;
    
            color: rgba(255, 255, 255, 0.72);
        }
    
        .catalog-book-error a {
            flex-shrink: 0;
    
            padding: 0.65rem 0.85rem;
    
            border-radius: 999px;
    
            background-color: #fdb427;
            color: #06142f;
    
            font-size: 0.72rem;
            font-weight: 850;
        }
    
        /* Navegación activa */
    
        .catalog-navigation__links .catalog-navigation__link--active {
            border-color: #fdb427;
    
            background-color: #06142f;
            color: #ffffff;
    
            box-shadow:
                0 22px 45px rgba(6, 20, 47, 0.18);
    
            transform: translateY(-5px);
        }
    
        .catalog-navigation__links .catalog-navigation__link--active span {
            background-color: #fdb427;
            color: #06142f;
        }
    
        /* =========================================================
       TABLET
    ========================================================= */
    
        @media (max-width: 900px) {
            .catalog-book {
                min-height: 580px;
                padding-inline: 4rem;
            }
    
            .catalog-book__sheet {
                min-height: 450px;
            }
    
            .catalog-book__arrow {
                width: 48px;
                height: 48px;
            }
    
            .catalog-book__arrow--previous {
                left: 0.7rem;
            }
    
            .catalog-book__arrow--next {
                right: 0.7rem;
            }
        }
    
        /* =========================================================
       CELULAR: UNA PÁGINA
    ========================================================= */
    
        @media (max-width: 760px) {
            .catalog-book {
                min-height: 500px;
                padding: 1rem 3.2rem;
            }
    
            .catalog-book__spread,
            .catalog-book__spread--cover {
                grid-template-columns:
                    minmax(0, 1fr);
    
                width: 100%;
            }
    
            .catalog-book__sheet {
                min-height: 400px;
    
                border-radius: 13px;
            }
    
            .catalog-book__sheet--right,
            .catalog-book__sheet--left {
                border-radius: 13px;
    
                box-shadow:
                    0 20px 40px rgba(6, 20, 47, 0.2);
            }
    
            .catalog-book__sheet--left::after,
            .catalog-book__sheet--right::before {
                display: none;
            }
    
            .catalog-book__sheet canvas {
                max-height: 65vh;
            }
    
            .catalog-book__arrow {
                width: 43px;
                height: 43px;
            }
    
            .catalog-book__arrow span {
                font-size: 2rem;
            }
    
            .catalog-book__arrow--previous {
                left: 0.35rem;
            }
    
            .catalog-book__arrow--next {
                right: 0.35rem;
            }
    
            .catalog-book-controls {
                grid-template-columns:
                    1fr 1fr;
            }
    
            .catalog-book-controls p {
                grid-column: 1 / -1;
                grid-row: 1;
            }
    
            .catalog-book-controls button {
                width: 100%;
            }
    
            .catalog-book-error {
                align-items: stretch;
                flex-direction: column;
            }
    
            .catalog-book-error a {
                text-align: center;
            }
        }
    
        /* =========================================================
       MOVIMIENTO REDUCIDO
    ========================================================= */
    
        @media (prefers-reduced-motion: reduce) {
    
            .catalog-book__spread,
            .catalog-book__arrow,
            .catalog-book-controls button {
                transition: none;
            }
        }
}