/* Catálogo - Layout y Diseño Especial */

body {
    background:
        radial-gradient(circle at top left, rgba(239, 123, 26, 0.08), transparent 25%),
        radial-gradient(circle at top right, rgba(52, 152, 219, 0.08), transparent 25%),
        linear-gradient(180deg, #f8f9fc 0%, #eef2f5 100%);
}

/* Breadcrumbs (Ruta de navegación) */
.breadcrumbs {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 24px;
    padding: 10px 16px;
    background-color: var(--bg-white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.breadcrumbs a {
    color: var(--color-orange);
    font-weight: 600;
}

.breadcrumbs a:hover {
    color: var(--color-orange-dark);
}

/* El catálogo usa un contenedor más ancho que el resto del sitio (1200px)
   para que las tarjetas de producto entren grandes de a dos por fila. */
.catalog-main .container {
    max-width: 1500px;
}

/* Layout en Dos Columnas */
.catalog-layout {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 30px;
    /* stretch (default): la columna del sidebar mide lo mismo que la de
       productos, que es más alta. Si quedara más corta que el contenido
       (align-items: start), el sticky de .sidebar-menu se queda sin
       "carril" antes de tiempo y se despega apenas se pasa esa altura. */
    align-items: stretch;
    margin-bottom: 50px;
}

/* Barra Lateral (Sidebar) */
.catalog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* La ficha de categoría activa NO acompaña el scroll (no aporta tanto);
       lo que sí queda fijo es el menú "Otros Productos" de abajo, ver
       .sidebar-menu. */
}

/* Menú Lateral de Categorías: este sí acompaña el scroll, para poder
   moverse entre categorías sin tener que volver arriba. */
.sidebar-menu {
    background-color: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Lo que queda fijo al scrollear es este envoltorio: el menú y, debajo,
   el botón para saltar a la otra línea. */
.sidebar-sticky {
    position: sticky;
    top: 100px; /* Queda debajo del header sticky */
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sidebar-menu h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 16px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    padding-bottom: 8px;
}

.sidebar-menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 14px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--text-dark);
    border: 1px solid transparent;
}

.sidebar-menu a .icon {
    font-size: 2rem;
    flex-shrink: 0;
    width: 48px;
    text-align: center;
}

.sidebar-menu a .icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

/* Botón para saltar a la otra línea (Juegos <-> Publicitarios). Va suelto
   debajo del menú, con el mismo relieve "arcade" de los botones del Home. */
.division-switch {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    color: #fff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.2s ease, filter 0.2s ease;
}

.division-switch__icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.division-switch__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    flex-grow: 1;
}

.division-switch__text small {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.9;
}

.division-switch__text strong {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.division-switch__arrow {
    transition: transform 0.2s ease;
}

.division-switch:hover {
    transform: translateY(-3px);
    filter: brightness(1.06);
}

.division-switch:hover .division-switch__arrow {
    transform: translateX(5px);
}

/* Hacia Juegos: naranja a amarillo, los colores de la marca */
.division-switch--juegos {
    background: linear-gradient(135deg, var(--color-orange) 0%, #ffa726 55%, var(--color-yellow) 100%);
    box-shadow: 0 5px 0 var(--color-orange-dark), 0 10px 18px rgba(255, 116, 10, 0.3);
}

/* Hacia Publicitarios: el celeste/azul de los botones del Home */
.division-switch--publicitarios {
    background: linear-gradient(135deg, #00bcff 0%, #0070c0 100%);
    box-shadow: 0 5px 0 #004273, 0 10px 18px rgba(0, 112, 192, 0.3);
}

.division-switch--publicitarios .division-switch__icon {
    color: var(--color-yellow);
}

.sidebar-menu a:hover {
    background-color: rgba(255, 116, 10, 0.05);
    color: var(--color-orange);
    border-color: rgba(255, 116, 10, 0.1);
}

.sidebar-menu a.active {
    background: linear-gradient(135deg, var(--color-orange), var(--color-orange-dark));
    color: #fff;
    box-shadow: 0 4px 10px rgba(255, 116, 10, 0.2);
}

/* Contenido Principal */
.catalog-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Hero de Catálogo Modernizado */
.catalog-hero {
    border-radius: var(--radius-xl);
    padding: 36px;
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 24px;
    align-items: center;
    color: #fff;
    box-shadow: var(--shadow-lg);
}

/* Colores dinámicos del Hero */
/* El degradado arranca en el color pleno (izquierda) y va a uno más
   oscuro (derecha); antes arrancaba en un tono casi blanco y quedaba lavado. */
.catalog-hero.bg-gradient-orange { background: linear-gradient(135deg, #ff8c42, #f26a00); }
.catalog-hero.bg-gradient-orange-dark { background: linear-gradient(135deg, #f28a2e, #c85f0c); }
.catalog-hero.bg-gradient-purple { background: linear-gradient(135deg, #9b59b6, #6c3483); }
.catalog-hero.bg-gradient-blue { background: linear-gradient(135deg, #3498db, #1f6fb5); }
.catalog-hero.bg-gradient-green { background: linear-gradient(135deg, #2ecc71, #1e9e55); }
.catalog-hero.bg-gradient-blue-light { background: linear-gradient(135deg, #4aa8e0, #2380c4); }
.catalog-hero.bg-gradient-purple-light { background: linear-gradient(135deg, #a569bd, #7d3c98); }
.catalog-hero.bg-gradient-yellow-light { background: linear-gradient(135deg, #f39c12, #e67e22); }
.catalog-hero.bg-gradient-green-light { background: linear-gradient(135deg, #48c383, #1f9d57); }

.catalog-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.catalog-hero__copy h2 {
    font-size: 2.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.catalog-hero__tagline {
    font-size: 1.05rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.catalog-hero__badge {
    width: 120px;
    height: 120px;
    justify-self: end;
    border-radius: var(--radius-lg);
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    font-size: 3.4rem;
    box-shadow: var(--shadow-md);
}

.catalog-hero__badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Anillo de color a juego con el fondo del hero de cada categoría, para
   que el recuadro blanco no quede "pegado" ahí sin relación con el color
   de fondo. */
.catalog-hero.bg-gradient-orange .catalog-hero__badge { box-shadow: 0 0 0 3px rgba(255, 116, 10, 0.35), var(--shadow-md); }
.catalog-hero.bg-gradient-orange-dark .catalog-hero__badge { box-shadow: 0 0 0 3px rgba(204, 86, 0, 0.35), var(--shadow-md); }
.catalog-hero.bg-gradient-purple .catalog-hero__badge { box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.35), var(--shadow-md); }
.catalog-hero.bg-gradient-blue .catalog-hero__badge { box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.35), var(--shadow-md); }
.catalog-hero.bg-gradient-green .catalog-hero__badge { box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.35), var(--shadow-md); }
.catalog-hero.bg-gradient-blue-light .catalog-hero__badge { box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.35), var(--shadow-md); }
.catalog-hero.bg-gradient-purple-light .catalog-hero__badge { box-shadow: 0 0 0 3px rgba(175, 122, 197, 0.35), var(--shadow-md); }
.catalog-hero.bg-gradient-yellow-light .catalog-hero__badge { box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.4), var(--shadow-md); }
.catalog-hero.bg-gradient-green-light .catalog-hero__badge { box-shadow: 0 0 0 3px rgba(88, 214, 141, 0.35), var(--shadow-md); }

/* Toolbar Informativo */
.catalog-toolbar {
    background-color: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.catalog-toolbar h2 {
    font-size: 1.6rem;
    color: var(--text-dark);
}

.catalog-toolbar p {
    font-size: 0.9rem;
    color: var(--text-muted);
    border-left: 3px solid var(--color-orange);
    padding-left: 16px;
    line-height: 1.6;
}

/* Cuadrícula de Productos */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.catalog-card {
    background-color: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.catalog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.catalog-card__visual {
    /* Proporción apaisada en vez de alto fijo: la foto crece con el ancho
       de la tarjeta y deja de quedar como una franja vertical angosta. */
    aspect-ratio: 4 / 3;
    padding: 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   GALERÍA DE FOTOS DEL LIGHTBOX
   ========================================================================== */

/* La ventana ocupa casi toda la pantalla para que las fotos se vean
   grandes, con la info al lado. Solo afecta al modal cuando abre la
   galería del catálogo (el lightbox simple del Home no tiene
   .gallery-layout adentro, así que no le pega este tamaño). */
.modal-overlay:has(.gallery-layout) .modal-container {
    max-width: 1400px;
    width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.gallery-layout {
    display: flex;
    gap: 24px;
    width: 100%;
    align-items: stretch;
}

/* Alto fijo en vh en vez de "100% del padre": así el tamaño no depende
   de que el resto de la cadena de contenedores tenga una altura definida,
   que es lo que hacía que con fotos muy altas/angostas (por ejemplo las
   de Logos Inflables) el popup se recortara en vez de acomodarse. */
.gallery-layout .gallery-stage,
.gallery-layout .modal-image-wrapper {
    flex: 1.3;
    min-width: 0;
    height: 70vh;
    aspect-ratio: auto;
}

.gallery-info {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.gallery-info__code {
    align-self: flex-start;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-orange-dark);
    background-color: rgba(255, 116, 10, 0.1);
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}

.gallery-info h3 {
    font-size: 1.3rem;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.gallery-info p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 16px;
}

.gallery-info__meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.gallery-info__meta span {
    background-color: var(--bg-light);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.gallery-info .gallery-counter {
    padding-top: 8px;
}

.gallery-info__consult {
    align-self: flex-end;
    margin-top: auto;
    padding: 12px 22px;
    width: auto;
}

@media (max-width: 720px) {
    .modal-overlay:has(.gallery-layout) .modal-container {
        height: auto;
        max-height: 92vh;
        overflow-y: auto;
    }

    .gallery-layout {
        flex-direction: column;
        height: auto;
    }

    .gallery-layout .gallery-stage,
    .gallery-layout .modal-image-wrapper {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .gallery-info {
        text-align: center;
        align-items: center;
    }

    .gallery-info__code {
        align-self: center;
    }

    .gallery-info__meta {
        justify-content: center;
    }

    .gallery-info__consult {
        align-self: center;
    }
}

.gallery-stage {
    position: relative;
    width: 100%;
    background-color: #11161a;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
}

.gallery-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-circle);
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: var(--shadow-md);
}

.gallery-arrow:hover {
    background-color: var(--color-orange);
    color: #fff;
}

.gallery-arrow.prev { left: 14px; }
.gallery-arrow.next { right: 14px; }

.gallery-counter {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
}

.gallery-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 14px;
}

.gallery-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-circle);
    background-color: rgba(0, 0, 0, 0.18);
    padding: 0;
}

.gallery-dot.active {
    background-color: var(--color-orange);
    transform: scale(1.25);
}

@media (max-width: 640px) {
    .gallery-arrow {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .gallery-arrow.prev { left: 8px; }
    .gallery-arrow.next { right: 8px; }
}

/* Tarjeta con foto real de producto */
.catalog-card__visual.has-photo {
    padding: 0;
    overflow: hidden;
    background-color: #eceff1;
}

.catalog-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Las fotos verticales se recortan desde un poco más arriba del centro,
       para no cortarle la cabeza a las mascotas y tótems. */
    object-position: center 25%;
    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.catalog-card:hover .catalog-card__photo {
    transform: scale(1.06);
}

/* Contador de fotos disponibles */
.catalog-card__count {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(0, 0, 0, 0.55);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    backdrop-filter: blur(3px);
}

.catalog-card__label {
    position: absolute;
    top: 16px;
    left: 16px;
    background-color: rgba(255, 255, 255, 0.85);
    color: var(--text-dark);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    backdrop-filter: blur(2px);
    box-shadow: var(--shadow-sm);
}

.catalog-card__index {
    position: absolute;
    top: 16px;
    right: 16px;
    min-width: 32px;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    background-color: rgba(20, 20, 20, 0.72);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.catalog-card__body {
    padding: 26px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.catalog-card__body h3 {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.catalog-card__code {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-orange-dark);
    background-color: rgba(255, 116, 10, 0.1);
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.03em;
}

.catalog-card__body p {
    font-size: 1.02rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
    flex-grow: 1;
    /* Corta a 2 renglones con puntos suspensivos: menos texto, más lugar
       para la foto. El texto completo se puede leer en "Ver Foto". */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.catalog-card__meta {
    display: flex;
    gap: 8px;
}

.catalog-card__meta span {
    background-color: var(--bg-light);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.03);
}

.btn-card-action {
    padding: 14px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.btn-card-action.primary {
    background-color: var(--color-orange);
    color: #fff;
    box-shadow: 0 4px 10px rgba(255, 116, 10, 0.18);
}

.btn-card-action.primary:hover {
    background-color: var(--color-orange-dark);
    box-shadow: 0 6px 14px rgba(255, 116, 10, 0.28);
}

.btn-card-action.secondary {
    background-color: var(--bg-light);
    color: var(--text-dark);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.btn-card-action.secondary:hover {
    background-color: var(--bg-white);
    color: var(--color-orange);
    border-color: var(--color-orange);
}

.btn-card-action.whatsapp {
    background-color: #25d366;
    color: #fff;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.25);
}

.btn-card-action.whatsapp:hover {
    background-color: #1ebc59;
    box-shadow: 0 6px 14px rgba(37, 211, 102, 0.35);
}

/* CTA Catálogo */
.catalog-cta {
    background-color: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0,0,0,0.04);
}

.catalog-cta h2 {
    font-size: 1.8rem;
    color: var(--text-dark);
    margin-top: 4px;
}

.catalog-cta__actions {
    display: flex;
    gap: 12px;
}

.catalog-cta__actions a {
    padding: 14px 24px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-block;
}

.catalog-cta__actions a:first-child {
    background-color: var(--bg-light);
    color: var(--text-dark);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.catalog-cta__actions a:first-child:hover {
    background-color: var(--bg-white);
    border-color: var(--color-orange);
    color: var(--color-orange);
}

.catalog-cta__actions a:last-child {
    background-gradient: linear-gradient(135deg, var(--color-orange), var(--color-orange-dark));
    background-color: var(--color-orange);
    color: #fff;
    box-shadow: 0 6px 16px rgba(255, 116, 10, 0.2);
}

.catalog-cta__actions a:last-child:hover {
    background-color: var(--color-orange-dark);
    box-shadow: 0 8px 20px rgba(255, 116, 10, 0.3);
}

/* Responsive */
/* Pantallas medianas: con el menú lateral al lado ya no entran dos
   tarjetas grandes, así que van de a una. */
@media (max-width: 1150px) {
    .catalog-layout {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 20px;
    }
    .catalog-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .catalog-layout {
        grid-template-columns: 1fr;
    }
    
    .catalog-sidebar {
        position: static;
        width: 100%;
    }
    
    .active-category-info {
        display: none; /* Ocultar en móvil, ya se muestra en el Hero principal */
    }

    .sidebar-sticky {
        position: static;
        width: 100%;
        min-width: 0;
    }

    .sidebar-menu {
        width: 100%;
        padding: 14px;
    }

    .sidebar-menu h3 {
        margin-bottom: 10px;
    }

    /* En celular las categorías van en una grilla a la vista (antes era
       una fila que había que deslizar y no se veía cuál estaba elegida). */
    .sidebar-menu ul {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
        gap: 6px;
    }

    .sidebar-menu a {
        padding: 6px 8px;
        gap: 8px;
        font-size: 0.98rem;
        height: 100%;
    }

    .sidebar-menu a .icon {
        width: 34px;
        font-size: 1.5rem;
    }

    .sidebar-menu a .icon img {
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 768px) {
    .catalog-hero {
        grid-template-columns: 1fr;
        padding: 24px;
        text-align: center;
    }
    
    .catalog-hero__badge {
        justify-self: center;
        width: 100px;
        height: 100px;
        font-size: 2.5rem;
    }

    .catalog-toolbar {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .catalog-toolbar p {
        border-left: none;
        border-top: 2px solid var(--color-orange);
        padding-left: 0;
        padding-top: 12px;
    }

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

    .catalog-cta {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}
/* Pantallas bajas (notebooks de 768px de alto): el menú lateral queda fijo
   al scrollear, así que tiene que entrar entero junto con el botón de
   abajo. Se compacta un poco para que no se corte. */
@media (max-height: 820px) and (min-width: 901px) {
    .sidebar-menu {
        padding: 16px 20px;
    }

    .sidebar-menu h3 {
        margin-bottom: 10px;
    }

    .sidebar-menu ul {
        gap: 4px;
    }

    .sidebar-menu a {
        padding: 3px 12px;
        font-size: 1.08rem;
    }

    .sidebar-menu a .icon {
        width: 42px;
        font-size: 1.8rem;
    }

    .sidebar-menu a .icon img {
        width: 42px;
        height: 42px;
    }

    .sidebar-sticky {
        gap: 12px;
    }

    .division-switch {
        padding: 12px 16px;
    }
}