/* ================================================= */
/* LA CABRA MAREADA                                  */
/* ================================================= */

:root {
    --ancho-carta: 1050px;
    --proporcion-carta: 1050 / 1485;

    --color-papel: #fff8eb;
    --color-papel-secundario: #e8dfc8;
    --color-tinta: #302314;
    --color-rojo: #b70213;

    --fondo-control: rgba(255, 248, 235, 0.82);
    --fondo-control-activo: rgba(255, 248, 235, 0.97);
}


/* ================================================= */
/* CONFIGURACIÓN GENERAL                             */
/* ================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;

    color: var(--color-tinta);
    background-color: var(--color-papel);

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;

    overflow-x: hidden;

    color: var(--color-tinta);
    background-color: var(--color-papel);

    /* Respaldo para navegadores que no entienden image-set(). */
    background-image:
        url("../img/textura envejecida.png"),
        url("../img/textura suave.png");

    /*
    Las versiones WebP son más livianas. Los PNG originales
    permanecen como respaldo para navegadores antiguos.
    */
    background-image:
        image-set(
            url("../img/textura-envejecida.webp") type("image/webp"),
            url("../img/textura envejecida.png") type("image/png")
        ),
        image-set(
            url("../img/textura-suave.webp") type("image/webp"),
            url("../img/textura suave.png") type("image/png")
        );

    background-position:
        center top,
        center top;

    background-repeat:
        repeat-y,
        repeat-y;

    /*
    La textura se amplía hasta cubrir todo el ancho de la
    ventana. Así no quedan franjas de color sólido a los
    costados de la carta en monitores grandes.
    */
    background-size:
        cover,
        cover;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
}


/* ================================================= */
/* PORTADA Y CARTAS                                  */
/* ================================================= */

.contenedor-portada,
.contenedor-carta {
    position: relative;

    width: 100%;
    max-width: var(--ancho-carta);
    margin: 0 auto;

    aspect-ratio: var(--proporcion-carta);
}

.portada,
.imagen-carta {
    display: block;

    width: 100%;
    height: auto;

    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.imagen-carta {
    touch-action: pan-x pan-y pinch-zoom;
}


/* ================================================= */
/* ZONAS CLICABLES DE LA PORTADA                     */
/* ================================================= */

.enlaces-portada {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.zona {
    position: absolute;
    display: block;

    border: 0;
    background: transparent;

    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Texto accesible, oculto únicamente de forma visual. */
.zona .texto-accesible {
    position: absolute;

    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);

    white-space: nowrap;
    border: 0;
}

.zona-burgers {
    left: 10%;
    top: 39%;
    width: 70%;
    height: 10%;
}

.zona-cervezas {
    left: 10%;
    top: 49.5%;
    width: 75%;
    height: 10%;
}

.zona-papas {
    left: 10%;
    top: 60%;
    width: 51%;
    height: 10%;
}

.zona-pizzas {
    left: 10%;
    top: 70.5%;
    width: 51%;
    height: 10%;
}

.zona-panchos {
    left: 10%;
    top: 81%;
    width: 76%;
    height: 10%;
}

@media (hover: hover) and (pointer: fine) {
    .zona:hover {
        background: rgba(183, 2, 19, 0.08);
        outline: 2px solid rgba(183, 2, 19, 0.45);
        outline-offset: -2px;
    }

}

.zona:focus-visible {
    background: rgba(183, 2, 19, 0.08);
    outline: 3px solid rgba(183, 2, 19, 0.75);
    outline-offset: -3px;
}


/* ================================================= */
/* AYUDA INICIAL Y ACCESOS DE CONTACTO               */
/* ================================================= */

.identidad-geografica {
    position: absolute;
    top: 65%;
    left: calc(100% - clamp(11px, 1.8vw, 19px));
    z-index: 3;

    width: max-content;

    color: rgba(48, 35, 20, 0.78);

    font-family: "League Spartan", "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: clamp(9px, 1vw, 12px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.14em;

    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;

    pointer-events: none;
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center;
}

/*
En computadora la identificación vertical conserva una
presencia mayor sin invadir los nombres de las categorías.
*/
@media (min-width: 701px) {
    .identidad-geografica {
        font-size: clamp(16px, 1.7vw, 22px);
        letter-spacing: 0.11em;
    }
}

.aviso-categorias {
    position: absolute;
    top: 1%;
    left: 50%;
    z-index: 4;

    width: max-content;
    max-width: calc(100% - 24px);
    padding: 7px 12px;

    color: var(--color-rojo);
    border: 1px solid rgba(48, 35, 20, 0.24);
    border-radius: 999px;

    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: clamp(10px, 1.15vw, 13px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;

    text-align: center;

    background: rgba(255, 248, 235, 0.9);
    box-shadow: 0 3px 10px rgba(48, 35, 20, 0.12);
    backdrop-filter: blur(2px);

    pointer-events: none;
    transform: translateX(-50%);

    animation: mostrar-aviso-categorias 5.5s ease 0.5s both;
}

/* En computadora el aviso temporal permanece arriba. */
@media (min-width: 701px) {
    .aviso-categorias {
        top: 1%;
    }
}

@keyframes mostrar-aviso-categorias {
    0%,
    100% {
        opacity: 0;
        transform: translate(-50%, -4px);
    }

    10%,
    75% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.acciones-principales {
    position: fixed;
    top: 50%;
    right: max(
        10px,
        calc((100vw - var(--ancho-carta) - 300px) / 4)
    );
    z-index: 20;

    display: grid;
    gap: 8px;

    width: 150px;
    padding: 8px;

    border: 1px solid rgba(48, 35, 20, 0.24);
    border-radius: 8px;

    background: rgba(255, 248, 235, 0.92);
    box-shadow: 0 5px 18px rgba(48, 35, 20, 0.16);
    backdrop-filter: blur(3px);

    transform: translateY(-50%);
}

.accion-principal {
    display: flex;
    align-items: center;
    gap: 8px;

    min-height: 44px;
    padding: 8px 10px;

    color: var(--color-rojo);
    border-radius: 5px;

    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.04em;

    text-decoration: none;
    text-transform: uppercase;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;

    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.icono-accion {
    flex: 0 0 auto;

    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icono-accion .icono-punto {
    fill: currentColor;
    stroke: none;
}

@media (hover: hover) and (pointer: fine) {
    .accion-principal:hover {
        color: var(--color-papel);
        background: var(--color-rojo);
        transform: translateY(-1px);
    }
}

.accion-principal:focus-visible {
    color: var(--color-papel);
    background: var(--color-rojo);
    outline: 3px solid var(--color-papel);
    outline-offset: 2px;
}

/*
En pantallas medianas, el panel se compacta para no cubrir
la portada. El nombre de cada acceso sigue disponible para
lectores de pantalla mediante el aria-label del enlace.
*/
@media (min-width: 701px) and (max-width: 1399px) {
    .acciones-principales {
        right: clamp(8px, 2vw, 24px);

        width: 54px;
        padding: 5px;
    }

    .accion-principal {
        justify-content: center;

        width: 42px;
        padding: 8px;
    }

    .texto-accion {
        position: absolute;

        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;

        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);

        white-space: nowrap;
        border: 0;
    }
}


/* ================================================= */
/* CONTROLES SUPERPUESTOS SOBRE LAS CARTAS           */
/* ================================================= */

.menu-sobre-carta,
.ampliar-carta {
    position: absolute;
    z-index: 3;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;

    min-height: 44px;
    padding: 8px 16px;

    color: var(--color-rojo);
    border: 1px solid rgba(48, 35, 20, 0.3);
    border-radius: 999px;

    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: clamp(13px, 1.7vw, 18px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;

    text-align: center;
    text-decoration: none;

    background: var(--fondo-control);
    box-shadow: 0 3px 10px rgba(48, 35, 20, 0.12);
    backdrop-filter: blur(2px);

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;

    -webkit-tap-highlight-color: transparent;
}

.menu-sobre-carta {
    position: fixed;
    top: clamp(10px, 1.8vw, 20px);
    left: 50%;
    z-index: 10;

    transform: translateX(-50%);
}

.menu-sobre-carta::before {
    content: "←";
    font-size: 1.15em;
    line-height: 0;
}

/*
El acceso a la imagen original aparece solo en pantallas
pequeñas, donde la letra de la carta necesita ampliación.
*/
.ampliar-carta {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .menu-sobre-carta:hover,
    .ampliar-carta:hover {
        color: var(--color-papel);
        border-color: var(--color-rojo);
        background: var(--color-rojo);
    }

    .menu-sobre-carta:hover {
        transform: translateX(-50%) translateY(-1px);
    }
}

.menu-sobre-carta:focus-visible,
.ampliar-carta:focus-visible {
    color: var(--color-papel);
    border-color: var(--color-rojo);
    background: var(--color-rojo);
    outline: 3px solid var(--color-papel);
    outline-offset: 2px;
}


/* ================================================= */
/* NAVEGACIÓN DIRECTA A PANCHOS                      */
/* ================================================= */

.ancla-panchos {
    position: absolute;
    top: 62%;
    left: 0;

    width: 1px;
    height: 1px;

    pointer-events: none;
    scroll-margin-top: 16px;
}


/* ================================================= */
/* VERSIÓN MÓVIL                                     */
/* ================================================= */

@media (max-width: 700px) {
    body {
        background-size:
            100vw auto,
            100vw auto;
    }

    /*
    En las páginas de cartas, la imagen queda centrada dentro
    de un marco limpio del color solicitado.
    Los márgenes automáticos conservan el inicio visible si
    una pantalla horizontal fuera más baja que la carta.
    */
    body.pagina-carta,
    body.pagina-portada {
        display: flex;
        flex-direction: column;

        padding: clamp(10px, 3vw, 16px);

        background-color: var(--color-papel);
        background-image: none;
    }

    .contenedor-portada,
    .contenedor-carta {
        max-width: none;
    }

    .pagina-carta .contenedor-carta,
    .pagina-portada .contenedor-portada {
        flex: 0 0 auto;
        margin-block: auto;
    }

    .aviso-categorias {
        position: fixed;
        top: max(10px, env(safe-area-inset-top));

        font-size: 10px;
    }

    .acciones-principales {
        top: auto;
        right: 50%;
        bottom: max(10px, env(safe-area-inset-bottom));

        display: flex;
        gap: 4px;

        width: min(calc(100% - 20px), 390px);
        padding: 5px;

        transform: translateX(50%);
    }

    .accion-principal {
        flex: 1 1 0;
        justify-content: center;
        gap: 4px;

        min-width: 0;
        min-height: 44px;
        padding: 6px 4px;

        font-size: 10px;
        letter-spacing: 0.02em;
    }

    .icono-accion {
        width: 18px;
        height: 18px;
    }

    /*
    En la vista normal, MENÚ vuelve a quedar contenido dentro
    de la imagen en lugar de flotar sobre el borde superior.
    */
    .menu-sobre-carta {
        position: absolute;
        top: 10px;
        right: 10px;
        left: auto;

        min-height: 44px;
        padding: 8px 14px;

        font-size: 14px;

        transform: none;
    }

    .ampliar-carta {
        right: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));

        display: inline-flex;

        min-height: 44px;
        padding: 8px 12px;

        font-size: 12px;
        letter-spacing: 0.08em;
    }

    /*
    Al entrar desde PANCHOS se agrega espacio temporal al
    final. Así el navegador puede llevar esa sección a una
    posición cómoda aunque la carta completa sea más baja
    que la pantalla del teléfono.
    */
    .pagina-pizzas:has(#panchos:target) {
        padding-bottom: 70svh;
    }

    /*
    Cuando se entra directamente a Panchos hay desplazamiento.
    En ese caso puntual MENÚ permanece visible sobre la carta.
    */
    .pagina-pizzas:has(#panchos:target) .menu-sobre-carta {
        position: fixed;
        top: max(10px, env(safe-area-inset-top));
        right: 10px;
        z-index: 10;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aviso-categorias {
        display: none;
    }

    .menu-sobre-carta,
    .ampliar-carta,
    .accion-principal {
        transition: none;
    }
}