/* MENU — carta pública (página /menu): listado de productos + filtro por categoría.
   Mismo idioma visual que la home («café porteño antañón»), sobre el papel de base.
   Contrastes calculados (regla del proyecto):
   - suave s/ papel (índice inactivo, eyebrow): 5.69:1
   - suave s/ velo bronce .08 (hover del índice): 5.19:1
   - crema s/ espresso-oscuro (índice activo): 14.13:1 (cuenta al .72: 7.85:1)
   - cacao s/ card (nombre, precio): 13.03:1
   - suave s/ card (categoría, descripción): 6.25:1
   - bronce s/ card y s/ papel (filetes/UI, no texto): 4.50 / 4.10:1 (>=3)

   Animación de cambio de categoría: SOLO los productos se animan (el índice
   de categorías queda estático). La entrada escalonada de las cards corre al
   cargar la página y en cada swap del menú (fetch en js/menu.js, clase
   .saliendo para la salida). Usa la propiedad `translate` para NO chocar con
   el `transform` del hover de card. Los delays máximos quedan acá (min(--i, 8)
   * 60ms de entrada, min(--i, 6) * 30ms de salida): menu.js espera 380ms — sync. */

@keyframes menu-entra {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: none;
    }
}

@keyframes menu-sale {
    from {
        opacity: 1;
        translate: none;
    }

    to {
        opacity: 0;
        translate: 0 -14px;
    }
}

main#menu {
    max-width: 1140px;
    margin: 0 auto;
    /* deja pasar debajo del nav fijo (nav ≈ 90px + aire) */
    padding: 150px 6% 110px;

    .page-head {
        text-align: center;
        margin-bottom: 46px;

        .eyebrow {
            color: var(--suave); /* 5.69:1 s/ papel */
            font-size: 0.75rem;
            font-weight: 400;
            letter-spacing: 0.3em;
            text-transform: uppercase;
        }

        h1 {
            margin-top: 6px;
            color: var(--cacao); /* 11:1 s/ papel */
            font-size: clamp(2.4rem, 6vw, 3.6rem);
            font-weight: 400;
        }

        /* ornamento deco de confitería: filete — losange — filete
           (espejo del .divider de home.css, acá sobre fondo claro) */
        .divider {
            position: relative;
            width: 150px;
            height: 12px;
            margin: 18px auto 0;
            background:
                linear-gradient(var(--bronce), var(--bronce)) no-repeat 0 50% /
                    calc(50% - 13px) 1px,
                linear-gradient(var(--bronce), var(--bronce)) no-repeat 100% 50% /
                    calc(50% - 13px) 1px;

            &::before {
                content: "";
                position: absolute;
                left: 50%;
                top: 50%;
                width: 7px;
                height: 7px;
                transform: translate(-50%, -50%) rotate(45deg);
                background: var(--bronce);
            }
        }
    }

    /* índice de categorías a la izquierda + grilla a la derecha */
    .cuerpo {
        display: grid;
        grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
        gap: clamp(36px, 4vw, 64px);
        align-items: start;

        /* el índice, como portada de carta: lista vertical con filetes,
           fija mientras se recorre la grilla */
        .categorias {
            position: sticky;
            top: 120px; /* nav fijo ≈ 90px + aire */

            ul {
                list-style: none;
                padding: 0;
            }

            .titulo {
                margin: 0 16px 10px;
                color: var(--suave); /* 5.69:1 s/ papel */
                font-size: 0.7rem;
                font-weight: 400;
                letter-spacing: 0.25em;
                text-transform: uppercase;
            }

            /* el índice NO se anima en el cambio de categoría (solo los
               productos): sus <li> quedan sin animation y visibles */

            li + li {
                border-top: 1px solid rgba(138, 106, 62, 0.3); /* filete bronce, UI */
            }

            a {
                display: flex;
                align-items: baseline;
                justify-content: space-between;
                gap: 12px;
                padding: 13px 16px;
                color: var(--suave); /* 5.69:1 s/ papel */
                font-size: 0.92rem;
                letter-spacing: 0.05em;
                text-decoration: none;
                transition:
                    background 0.3s,
                    color 0.3s;

                .cuenta {
                    color: var(--suave); /* 5.69:1 s/ papel */
                    font-size: 0.75rem;
                }

                &:hover {
                    background: rgba(138, 106, 62, 0.08); /* suave s/ ese velo: 5.19:1 */
                    color: var(--cacao);

                    .cuenta {
                        color: var(--cacao);
                    }
                }
            }

            /* activo: placa espresso-oscuro, el mismo idioma del botón del hero */
            a[aria-current="page"] {
                background: var(--espresso-oscuro);
                border-radius: 3px;
                color: var(--crema); /* 14.13:1 */

                .cuenta {
                    color: rgba(242, 233, 213, 0.72); /* 7.85:1 s/ el activo */
                }
            }
        }

        .grilla {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 26px;
            padding: 0;

            & > li {
                /* entrada escalonada: la --i la setea la vista por card;
                   fill both = el estado "from" aplica durante el delay */
                opacity: 0;
                animation: menu-entra 0.5s ease-out both;
                animation-delay: calc(min(var(--i, 0), 8) * 60ms);
            }

            /* salida del swap (la dispara menu.js): más corta y poco escalonada,
               para que el recambio se sienta ágil */
            &.saliendo > li {
                animation-name: menu-sale;
                animation-duration: 0.2s;
                animation-delay: calc(min(var(--i, 0), 6) * 30ms);
            }

            .card {
                position: relative;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                background: var(--card); /* nada de blanco puro */
                border: 1px solid rgba(138, 106, 62, 0.35); /* bronce 4.5:1 s/ card (UI) */
                border-radius: 6px;
                transition:
                    transform 0.35s,
                    box-shadow 0.35s;

                /* segundo filete interior: placa de confitería, como las vitrinas */
                &::after {
                    content: "";
                    position: absolute;
                    inset: 7px;
                    border: 1px solid rgba(201, 162, 95, 0.3);
                    border-radius: 3px;
                    pointer-events: none;
                }

                &:hover {
                    transform: translateY(-4px);
                    box-shadow: 0 22px 40px rgba(36, 26, 17, 0.18);
                }

                .foto {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    aspect-ratio: 4 / 3;
                    border-bottom: 1px solid rgba(138, 106, 62, 0.25);
                    /* el fondo del recorte solo se ve en el placeholder SVG */
                    background: radial-gradient(
                        circle at 30% 30%,
                        var(--card),
                        var(--papel)
                    );

                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                        object-fit: cover; /* los atributos width/height evitan el CLS; acá manda la caja */
                    }

                    /* ilustración de trazo sin foto: bronce sobre crema (4.5:1, ornamental) */
                    svg {
                        display: block;

                        .ink {
                            stroke: var(--bronce);
                        }

                        .dot {
                            fill: var(--bronce);
                        }
                    }
                }

                .datos {
                    flex: 1;
                    padding: 20px 20px 8px;

                    .cat {
                        display: block;
                        margin-bottom: 8px;
                        color: var(--suave); /* 6.25:1 s/ card */
                        font-size: 0.7rem;
                        letter-spacing: 0.22em;
                        text-transform: uppercase;
                    }

                    h2 {
                        margin-bottom: 8px;
                        color: var(--cacao); /* 13.03:1 s/ card */
                        font-size: 1.25rem;
                        font-weight: 400;
                    }

                    p {
                        display: -webkit-box;
                        -webkit-line-clamp: 3; /* la carta no es ficha técnica: tope de 3 líneas */
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        color: var(--suave); /* 6.25:1 s/ card */
                        font-size: 0.92rem;
                        font-weight: 300;
                        line-height: 1.7;
                    }
                }

                .precio {
                    display: block;
                    margin-top: 12px;
                    padding: 14px 20px 18px;
                    border-top: 1px solid rgba(138, 106, 62, 0.3); /* filete estilo carta */
                    color: var(--cacao); /* 13.03:1 s/ card */
                    font-family: "Yeseva One", serif;
                    font-size: 1.1rem;
                    letter-spacing: 0.02em;
                }
            }

            /* sin productos (categoría vacía o carta sin cargar) */
            .vacio {
                grid-column: 1 / -1;
                padding: 70px 20px;
                border: 1px dashed rgba(138, 106, 62, 0.5); /* filete UI, no texto */
                border-radius: 6px;
                text-align: center;
                color: var(--suave); /* 5.69:1 s/ papel */

                p {
                    margin-bottom: 4px;
                    font-weight: 300;
                    line-height: 1.8;
                }

                a {
                    color: var(--cacao); /* 11:1 s/ papel */
                    font-weight: 400;
                    text-decoration: underline;
                    text-decoration-color: rgba(138, 106, 62, 0.6);
                    text-underline-offset: 3px;

                    &:hover {
                        text-decoration-color: var(--bronce);
                    }
                }
            }
        }

        /* en pantallas angostas el índice pasa arriba, como fila de pestañas */
        @media (max-width: 900px) {
            grid-template-columns: 1fr;
            gap: 34px;

            .categorias {
                position: static;

                .titulo {
                    display: none; /* la fila de pestañas se explica sola */
                }

                ul {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 8px;
                }

                li + li {
                    border-top: none;
                }

                a {
                    padding: 8px 18px;
                    border: 1px solid rgba(138, 106, 62, 0.45); /* bronce 4.1:1 s/ papel (UI) */
                    border-radius: 999px;
                    font-size: 0.82rem;

                    .cuenta {
                        font-size: 0.7rem;
                    }
                }
            }
        }
    }

    @media (max-width: 720px) {
        padding: 120px 5% 80px;

        .cuerpo .grilla {
            gap: 20px;
        }
    }

    /* menos movimiento: sin entrada ni salida de las cards */
    @media (prefers-reduced-motion: reduce) {
        .cuerpo .grilla > li,
        .cuerpo .grilla.saliendo > li {
            animation: none;
            opacity: 1;
            translate: none;
        }
    }
}