/* Sistema visual compartido V10. Referencia: sobre-nosotros.css */
:root {
    --orange: #cf4a12;
    --orange-dark: #b53f0e;
    --brown: #4b3026;
    --text: #44352d;
    --muted: #75675e;
    --cream: #fff8f0;
    --card: rgba(255, 249, 241, .92);
    --shadow: 0 16px 34px rgba(87, 54, 32, .10);
    --pio-nav-size: clamp(.9rem, 1.05vw, 1.1rem);
    --pio-action-size: clamp(.95rem, 1.1vw, 1.15rem);
    --pio-section-title-size: clamp(2.2rem, 4.1vw, 4.25rem);
}

body {
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
}

/* Navegación compartida */
.desktop-top-nav,
.mobile-nav,
.about-nav,
.hero-carta__nav {
    font-family: Arial, Helvetica, sans-serif;
}

.desktop-top-nav {
    width: 72%;
    justify-content: flex-start;
    gap: clamp(20px, 1.75vw, 34px);
}

.desktop-info-box {
    left: 8.5%;
    top: auto;
    bottom: 4.6%;
    width: 34%;
    align-items: stretch;
    text-align: right;
}

.desktop-top-nav a,
.about-nav a,
.hero-carta__nav a {
    color: var(--brown) !important;
    font-size: var(--pio-nav-size) !important;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

.desktop-top-nav a:hover,
.desktop-top-nav a:focus-visible,
.about-nav a:hover,
.about-nav a:focus-visible,
.about-nav .is-current,
.hero-carta__nav a:hover,
.hero-carta__nav a:focus-visible,
.hero-carta__nav a.is-active {
    color: var(--orange) !important;
}

.about-nav .is-current::after,
.hero-carta__nav a.is-active::after {
    background: var(--orange) !important;
}

.desktop-hotspots .hotspot--order-cta .visible-text,
.desktop-hotspots .hotspot--menu-cta .visible-text,
.mobile-order,
.mobile-menu-cta,
.button--primary {
    background: var(--orange) !important;
    color: #fff !important;
}

.desktop-hotspots .hotspot--order-cta .order-label {
    font-size: var(--pio-action-size) !important;
}

.desktop-hotspots .hotspot--menu-cta .visible-text,
.mobile-order,
.mobile-menu-cta,
.button {
    font-size: var(--pio-action-size);
    font-weight: 800;
}

.desktop-hotspots .hotspot--order-cta:hover .visible-text,
.desktop-hotspots .hotspot--order-cta:focus-visible .visible-text,
.desktop-hotspots .hotspot--menu-cta:hover .visible-text,
.desktop-hotspots .hotspot--menu-cta:focus-visible .visible-text,
.mobile-order:hover,
.mobile-order:focus-visible,
.mobile-menu-cta:hover,
.mobile-menu-cta:focus-visible,
.button--primary:hover,
.button--primary:focus-visible {
    background: var(--orange-dark) !important;
}

/* Carta: únicamente cabeceras editoriales de las categorías */
.menu-page .section > h2 {
    margin: 0 0 32px;
    color: var(--brown) !important;
    font-size: var(--pio-section-title-size);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.035em;
}

.menu-page .subtitulo-seccion {
    color: var(--muted);
    font-size: 1.04rem;
    line-height: 1.66;
}

.menu-page .hero-carta__eyebrow {
    color: var(--orange) !important;
}

.menu-page .hero-carta__claim {
    color: var(--brown) !important;
}

/* Preguntas frecuentes: misma jerarquía, tarjetas y paleta */
.faq-title,
.faq-card h2 {
    color: var(--brown);
    letter-spacing: -.025em;
}

.faq-card h2 {
    margin-bottom: 12px;
    font-size: clamp(1.35rem, 1.8vw, 1.75rem);
    font-weight: 800;
    line-height: 1.18;
}

.faq-card p {
    color: var(--muted);
    font-size: 1.04rem;
    line-height: 1.66;
}

.faq-card {
    border-color: rgba(255, 255, 255, .58);
    background: var(--card);
    box-shadow: var(--shadow);
}

.faq-notice {
    color: var(--brown);
}

.faq-phone {
    color: var(--orange);
}

/* Cierre de Sobre Nosotros */
.about-cta h2 {
    white-space: nowrap;
}

/* En anchos intermedios se reserva la huella real del CTA de pedido. */
@media (max-width: 1200px) and (min-width: 720px) {
    .desktop-top-nav {
        width: 68.5%;
        gap: clamp(10px, 1.05vw, 18px);
    }

    .desktop-top-nav a {
        font-size: clamp(.75rem, 1.2vw, .88rem) !important;
    }
}

@media (max-width: 760px) {
    .about-cta h2 {
        white-space: normal;
    }

    .menu-page .section > h2 {
        margin-bottom: 24px;
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .faq-card h2 {
        font-size: clamp(1.25rem, 5.4vw, 1.55rem);
    }
}

@media (max-width: 899px), (max-height: 480px) {
    .mobile-nav {
        gap: 18px;
    }

    .mobile-nav a {
        color: var(--brown) !important;
        font-size: .9rem;
        font-weight: 700;
        line-height: 1;
    }

    .mobile-nav a:hover,
    .mobile-nav a:focus-visible,
    .mobile-nav .is-current {
        color: var(--orange) !important;
    }
}

/* V12 · Enlaces legales en pie de página */
.legal-links { margin: 8px 0 0; font-size: .85rem; line-height: 1.6; }
.legal-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.legal-links a:hover, .legal-links a:focus-visible { color: #a9422d; }
.home-legal { padding: 14px 16px 18px; text-align: center; color: #6b5b51; background: transparent; }
.home-legal .legal-links { margin: 0; }

/* =====================================================================
   V13 · Auditoría 29-09-2026
   Contraste AA, menús móviles completos, portada y carta en móvil.
   El naranja de botones pasa de #EF5B19 a #CF4A12 (arriba, en :root).
   ===================================================================== */

/* Carta: botón de llamada y enlaces del pie oscuro legibles */
.menu-page .toolbar-call-btn { background: var(--orange); }
.menu-page .toolbar-call-btn:hover,
.menu-page .toolbar-call-btn:focus-visible { background: var(--orange-dark); }
.menu-page footer .legal-links a { color: #ffc2a8 !important; }
.menu-page footer .legal-links a:hover,
.menu-page footer .legal-links a:focus-visible { color: #fff !important; }

/* Páginas legales: fecha de actualización con contraste suficiente */
.legal-doc .legal-updated { color: #76655b; }

/* Menús en móvil: todos los enlaces visibles, en dos filas centradas */
@media (max-width: 760px) {
    .mobile-nav,
    .about-nav,
    .hero-carta__nav {
        flex-wrap: wrap !important;
        justify-content: center !important;
        overflow: visible !important;
        column-gap: 18px !important;
        row-gap: 0 !important;
    }

    .mobile-nav {
        margin-inline: 0 !important;
        padding-inline: 0 !important;
    }
}

/* Portada móvil: logotipo de marca y horario visible */
@media (max-width: 899px), (max-height: 480px) {
    .mobile-copy h1 {
        line-height: 1;
    }

    .mobile-copy h1 .mobile-logo {
        display: block;
        width: min(100%, 320px);
        height: auto;
    }

    .mobile-hours {
        display: inline-block;
        margin-top: 3px;
        white-space: nowrap;
        color: var(--orange-dark);
        font-weight: 800;
    }
}

/* Portada en tablet vertical: se ve la mascota con el pollo y no queda hueco bajo el contenido */
@media (min-width: 600px) and (max-width: 899px) and (min-height: 481px) {
    .mobile-stage {
        min-height: 0;
    }

    .mobile-visual {
        height: 62vw;
    }

    /* La imagen de escritorio lleva el logotipo a la izquierda: se encuadra desde el 27 % para no cortarlo. */
    .mobile-visual .home-frame {
        top: -7vw;
        width: 150%;
        translate: -27% 0;
    }

    .mobile-copy {
        margin-top: -64px;
    }
}

/* Carta en móvil: cabecera más compacta que enseña el plato en lugar de un fondo vacío */
@media (max-width: 620px) {
    body.menu-page .hero-carta {
        height: 520px !important;
        background-image: url("images/hero-carta-movil.webp") !important;
        background-position: center 30% !important;
    }

    body.menu-page .hero-carta__copy {
        top: auto !important;
        bottom: 16px !important;
    }
}