/* =========================================
   PÁGINA PRINCIPAL DEL MENÚ (HUB)
========================================= */

/* --- HERO MENÚ --- */
.m-hero {
    text-align: center;
    max-width: 700px;
    margin: 2rem auto 3rem;
}

.m-hero__title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 800;
    color: var(--dark);
    line-height: 1.1;
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
}

.m-hero__desc {
    font-size: 1.15rem;
    color: #555;
    line-height: 1.6;
}
/* =========================================
   FILTROS PEGAJOSOS DEL MENÚ (Sticky & Premium)
========================================= */

/* --- CONTENEDOR DE FILTROS (Flujo normal de la página) --- */
.m-filters-wrapper {
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 0.5rem 0; 
    margin-bottom: 3rem;
}

.m-filters-wrapper.is-stuck {
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* --- 2. LA CAJA CON SCROLL Y PADDING MÁGICO --- */
.m-filters {
    display: flex;
    justify-content: center; /* Centrado en pantallas grandes */
    gap: 0.8rem;
    overflow-x: auto;
    scrollbar-width: none; 
    -webkit-overflow-scrolling: touch;
    
    /* El padding que evita cortes: Arriba para el salto, Abajo para la sombra */
    padding: 10px 1.5rem 25px 1.5rem; 
}

.m-filters::-webkit-scrollbar {
    display: none; 
}

/* En celulares muy pequeños, vuelve a la izquierda para permitir el scroll natural */
@media (max-width: 600px) {
    .m-filters {
        justify-content: flex-start; 
    }
}

/* --- 3. LOS BOTONES DINÁMICOS Y VIBRANTES --- */
.m-filter-btn {
    white-space: nowrap;
    padding: 0.65rem 1.6rem; 
    border-radius: 999px;
    background: rgba(72, 194, 197, 0.1); /* Turquesa muy pálido */
    color: var(--teal-dark, #128A95);
    border: 1px solid rgba(72, 194, 197, 0.25);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    /* Transición con un pequeño "rebote" para fluidez */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

/* Efecto Hover: Se pinta de Turquesa, se levanta y brilla */
.m-filter-btn:hover {
    background: var(--teal);
    color: #fff;
    border-color: var(--teal);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 18px rgba(72, 194, 197, 0.35);
}

/* Efecto Activo: Explota en Naranja con un glow increíble */
.m-filter-btn.active {
    background: var(--orange);
    color: #fff;
    border-color: var(--orange);
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(248, 153, 29, 0.45);
}

/* --- GRILLA DE PLATOS --- */
.m-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 5rem;
}

/* --- TARJETA DE PLATO (Link completo) --- */
.m-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--radius-md, 16px);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,0.04));
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s;
}

.m-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md, 0 12px 30px rgba(0,0,0,0.1));
    border-color: var(--teal);
}

.m-card__img {
    width: 100%;
    height: 220px; /* El alto fijo de la caja */
    
    /* LA MAGIA: Le dice a la imagen que rellene la caja recortando el sobrante, sin estirarse */
    object-fit: cover; 
    object-position: center; /* Centra el recorte para que lo importante no quede fuera */
    
    /* Mantenemos tus bordes redondeados arriba y rectos abajo */
    border-radius: var(--radius-md, 16px) var(--radius-md, 16px) 0 0; 
    border: none;
    border-bottom: 1px solid #f0f2f5;
    display: block;
}

.m-card__body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.m-card__tags {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}

.m-tag {
    font-size: 0.75rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.m-tag--orange { background: rgba(248, 153, 29, 0.15); color: #d07a0c; }
.m-tag--teal { background: rgba(72, 194, 197, 0.15); color: var(--teal-dark, #128A95); }
.m-tag--outline { border: 1px solid #ddd; color: #777; }

.m-card__title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.m-card__desc {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.m-card__footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed #eaeaea;
    padding-top: 1rem;
}

.m-card__price {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--orange);
}

.m-card__cta {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--teal);
    transition: transform 0.2s;
}

.m-card:hover .m-card__cta {
    transform: translateX(4px);
}

/* --- ESTADO OCULTO PARA FILTROS --- */
.m-card.is-hidden {
    display: none;
}

/* --- TRUST INDICATOR (ALÉRGENOS) --- */
.m-trust {
    margin-bottom: 4rem;
}

.m-trust__box {
    background: #f6fdfc; /* Tono menta súper claro */
    border: 1px solid rgba(72, 194, 197, 0.3);
    border-radius: var(--radius-md, 16px);
    padding: 2rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.m-trust__icon {
    background: #fff;
    color: var(--teal);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(72, 194, 197, 0.15);
}

.m-trust__icon svg { width: 24px; height: 24px; }

.m-trust__text h4,
.m-trust__text .m-trust__title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--teal-dark, #128A95);
    margin-bottom: 0.4rem;
}

.m-trust__text p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .m-trust__box { flex-direction: column; gap: 1rem; padding: 1.5rem; }
}


/* Wrapper que agrupa Mixto + Pescado Pornográfico. En mobile es simplemente
   una pila normal; en escritorio ocupa la primera columna del bento grid. */
.m-card--featured-group {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* =========================================
   BENTO BOX GRID (Solo Escritorio)
========================================= */
@media (min-width: 1024px) {
    /* 1. Cambiamos la grilla a 3 columnas exactas */
    .m-grid {
        /* La primera columna (la gigante) la hacemos un poquito más ancha (1.2fr) */
        grid-template-columns: 1.2fr 1fr 1fr; 
    }

    /* 1b. Evitamos que las cards de las columnas 2 y 3 se estiren para igualar
       la altura de la columna 1 (que ahora es más alta, con 2 cards apiladas).
       Sin esto, el "sobrante" quedaba como espacio en blanco entre la
       descripción y el precio. Solo afecta a la vitrina de "Todos", no a
       las grillas compactas (Junior/Clásico/Jumbo/Guarniciones/Bebidas). */
    .m-grid:not(.m-grid--compact) {
        align-items: start;
    }

    /* 2. El wrapper (Mixto + Pescado Pornográfico apilados) ocupa
       la primera columna y las 2 filas, tal como antes ocupaba la
       card destacada sola */
    .m-card--featured-group {
        grid-column: 1 / 2;
        grid-row: span 2;
    }

    /* 3. Ajustamos la foto del Mixto: sigue siendo la más grande, pero un
       poco más comedida para acercar la altura de la columna 1 a las otras */
    .m-card.m-card--featured .m-card__img {
        height: 320px;
    }

    /* 3b. Agrandamos un poco la foto de las demás cards de la vitrina
       (Trío, Mixto Pulpo, Pescado Ecológico, Pescado Pornográfico, Guarniciones)
       para que aprovechen mejor el espacio y se acerquen a la altura de la columna 1 */
    section[data-block="destacado"] .m-card:not(.m-card--featured) .m-card__img {
        height: 250px;
    }

    /* 4. Agrandamos un poco el título del Mixto para darle jerarquía visual */
    .m-card.m-card--featured .m-card__title {
        font-size: 1.8rem;
    }
}


/* =========================================
   REVIEW DESTACADO (Bento Box Fill)
========================================= */
.m-card__review {
    /* El margin-top: auto absorbe todo el espacio vacío arriba, 
       empujando esta caja y el footer hacia el fondo */
    margin-top: auto; 
    margin-bottom: 1.5rem;
    background: #f8f9fa; /* Fondo gris muy limpio */
    padding: 1rem 1.2rem;
    border-radius: var(--radius-sm, 8px);
    border-left: 3px solid var(--orange); /* Acento de tu marca */
}

.m-card__review-stars {
    color: var(--gold, #f4c542);
    font-size: 0.95rem;
    letter-spacing: 2px;
    margin-bottom: 0.4rem;
}

.m-card__review-text {
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.m-card__review-author {
    font-size: 0.75rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* =========================================
   BLOQUES POR CATEGORÍA (Junior / Clásico / Jumbo / Guarniciones / Bebidas)
========================================= */
.m-block {
    margin-bottom: 5rem;
}

.m-block__header {
    max-width: 700px;
    margin: 0 auto 2rem;
    text-align: center;
}

.m-block__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--dark);
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.m-block__desc {
    color: #666;
    font-size: 1rem;
    line-height: 1.5;
}

/* La grilla dentro de un bloque no necesita su propio margen extra */
.m-block .m-grid {
    margin-bottom: 0;
}

/* Grilla más densa para las cards compactas (foto grande, poco texto) */
.m-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}

/* En escritorio forzamos 3 columnas exactas: con 6 platos (Junior/Clásico/Jumbo)
   queda 3+3 en vez del 4+2 desbalanceado que daba el auto-fill */
@media (min-width: 1024px) {
    .m-grid--compact {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Guarniciones y Bebidas tienen listas más largas: 4 columnas se ve mejor ahí */
    section[data-block="guarniciones"] .m-grid--compact,
    section[data-block="bebidas"] .m-grid--compact {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* =========================================
   CARD COMPACTA (Junior / Clásico / Jumbo / Guarniciones / Bebidas)
   La foto manda, casi nada de texto, precio fijo, sin botón.
========================================= */
.m-card--compact .m-card__img {
    height: 210px;
}

.m-card--compact .m-card__body {
    padding: 1rem 1.2rem 1.2rem;
    gap: 0.2rem;
}

.m-card--compact .m-tag {
    display: inline-block;
    margin-bottom: 0.6rem;
}

.m-card--compact .m-card__title {
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
}

.m-card__note {
    font-size: 0.85rem;
    color: #777;
    line-height: 1.4;
    margin-bottom: 0.7rem;
}

.m-card--compact .m-card__price {
    display: block;
    font-size: 1.25rem;
}

/* Estas cards ya no son links: quitamos la afirmación visual de "clic aquí" */
.m-card--static {
    cursor: default;
}

.m-card--static:hover {
    transform: none;
    box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,0.04));
    border-color: rgba(0,0,0,0.05);
}

/* =========================================
   CARDS DISPARADORAS DEL POPUP DE TAMAÑOS (bloque "Todos")
   Ya no son <a>, son <div role="button">, pero deben verse igual de clicables.
========================================= */
.js-size-trigger {
    cursor: pointer;
}

.js-size-trigger:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 3px;
}

/* Resalta la card a la que saltamos después de elegir tamaño en el popup */
@keyframes cardFlash {
    0% { box-shadow: 0 0 0 0 rgba(248, 153, 29, 0.55); }
    100% { box-shadow: 0 0 0 14px rgba(248, 153, 29, 0); }
}

.m-card.is-flash {
    animation: cardFlash 1.2s ease-out;
    border-color: var(--orange);
}

/* =========================================
   POPUP: ELEGIR TAMAÑO (reutiliza .modal de botones-delivery.css)
========================================= */
.modal__sizes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.size-option-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.9rem 1.2rem;
    border: 2px solid #f0f0f0;
    border-radius: var(--radius-md, 16px);
    background: #fff;
    font-family: 'Inter', sans-serif;
    text-align: left;
    cursor: pointer;
    transition: all 0.25s ease;
}

.size-option-btn:hover {
    border-color: var(--teal);
    background: rgba(72, 194, 197, 0.05);
    transform: translateY(-2px);
}

.size-option-btn__name {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--dark);
}

.size-option-btn__desc {
    font-size: 0.8rem;
    color: #888;
}

@media (max-width: 600px) {
    .m-grid--compact {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 1rem;
    }
    .m-card--compact .m-card__img {
        height: 140px;
    }
}

/* =========================================
   VISIBILIDAD POR BLOQUE COMPLETO (título + cards)
   Al filtrar por un tamaño/categoría específico, el bloque entero
   que no corresponde se oculta (título incluido), no solo sus cards.
========================================= */
section[data-block].is-hidden-block {
    display: none;
}

/* =========================================
   BADGE DE TAMAÑO junto al nombre del plato
   (para que el usuario sepa en qué sección está mientras navega)
========================================= */
.m-card__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.m-card__title-row .m-card__title {
    margin-bottom: 0;
}

.m-tag--indigo {
    background: rgba(56, 57, 150, 0.12);
    color: var(--indigo, #383996);
}

/* =========================================
   POPUP: CARD EXPANDIDA (tap en cards de tamaño / guarniciones / bebidas)
   Reutiliza el componente .modal, con un layout propio más grande
   y foto protagonista. En mobile ocupa toda la pantalla.
========================================= */
.modal--card-expand .modal__content {
    max-width: 480px;
    width: 100%;
    padding: 0;
    overflow: hidden;
    text-align: left;
}

.modal__expand-img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    background: #f0f2f5;
}

.modal__expand-body {
    padding: 1.5rem 1.5rem 1.8rem;
}

.modal__expand-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}

.modal__expand-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.modal__expand-note {
    color: #666;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.2rem;
}

.modal__expand-price {
    display: block;
    font-weight: 800;
    font-size: 1.7rem;
    color: var(--orange);
}

.modal__close--card {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* En mobile: pantalla completa, foto grande arriba, cuerpo con scroll propio */
@media (max-width: 600px) {
    .modal--card-expand {
        padding: 0;
    }
    .modal--card-expand .modal__content {
        max-width: 100%;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }
    .modal__expand-img {
        height: 42vh;
        flex-shrink: 0;
    }
    .modal__expand-body {
        flex: 1;
        overflow-y: auto;
    }
}


/* El badge suelto (Sin extras, Cerveza, Extra proteína, etc.) no debe
   estirarse al ancho completo — solo el ancho de su propio texto */
.m-card__body > .m-tag {
    align-self: flex-start;
}


/* Filas informativas de precio dentro del popup de guarniciones con tamaño (ej. Cangrejo) */
.modal__sizes .size-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.2rem;
    border: 2px solid #f0f0f0;
    border-radius: var(--radius-md, 16px);
}

.size-info-row__name {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--dark);
}

.size-info-row__price {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--orange);
}
/* ===== SEO: enlaces del intro y título oculto accesible ===== */
.m-hero__desc a {
    color: var(--orange);
    font-weight: 600;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}