/* =========================================
   BRASA — HAMBURGUESERÍA CONTEMPORÁNEA
   Dirección: "Mesa servida"
   (papel de mantel, serif de alto contraste,
    fotografía protagonista, acento pimentón)
   ========================================= */

:root {
    /* ===== CAMPO CLARO (PAPEL DE MANTEL) ===== */
    --cream: #f1ebe1;
    --cream-raised: #f9f5ee;
    --espresso: #241a14;
    --ink-muted: #6b5a4c;
    --rule-light: rgba(36, 26, 20, .14);
    --rule-light-strong: rgba(36, 26, 20, .34);

    /* ===== CAMPO OSCURO (ESPRESO) ===== */
    --espresso-deep: #19110c;
    --ink-deep: #14100c;
    --ink-muted-dark: #b9a894;
    --rule-dark: rgba(244, 236, 223, .16);

    /* ===== ACENTO (PIMENTÓN / SALSA) =====
       Se usa con criterio: identidad, acción primaria
       y un único campo de color (el cierre). */
    --salsa: #b03a1c;
    --salsa-light: #ef7a4e;
    --butter: #f4c25f;

    /* ===== TIPOGRAFÍA ===== */
    --font-text: 'Inter', system-ui, sans-serif;
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

    --fs-display: clamp(3.4rem, 8vw, 8rem);
    --fs-title: clamp(2.4rem, 5.4vw, 4.5rem);
    --fs-sub: clamp(1.9rem, 4vw, 3rem);
    --fs-h3: 1.5rem;
    --fs-price: 1.375rem;
    --fs-lead: 1.0625rem;
    --fs-body: 1rem;
    --fs-small: .875rem;
    --fs-meta: .8125rem;

    --track-display: -.02em;
    --track-label: .16em;

    /* Eje variable de Fraunces: optical size + "wonk"
       (las formas alternativas con carácter artesanal). */
    --fraunces-display: 'opsz' 144, 'SOFT' 0, 'WONK' 1;
    --fraunces-text: 'opsz' 20, 'SOFT' 0, 'WONK' 0;

    /* ===== GEOMETRÍA (círculos y curvas) ===== */
    --r-md: 18px;
    --r-lg: 28px;
    --r-pill: 999px;

    /* ===== RETÍCULA ===== */
    --gutter: clamp(1.25rem, 6%, 6rem);
    --section-pad: clamp(4.5rem, 8vw, 8rem);

    --dur: .25s;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

/* =========================================
   BASE
   ========================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-text);
    font-size: var(--fs-body);
    line-height: 1.65;
    background-color: var(--cream);
    color: var(--espresso);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--salsa);
    outline-offset: 3px;
}

::selection {
    background: var(--salsa);
    color: var(--cream-raised);
}

/* Enlace de salto: solo aparece al recibir el foco por teclado. */
.brasa-skip {
    position: absolute;
    top: -120px;
    left: var(--gutter);
    z-index: 30;

    padding: .75rem 1.25rem;

    background: var(--espresso);
    color: var(--cream-raised);
    border-bottom-right-radius: var(--r-md);
    border-bottom-left-radius: var(--r-md);

    font-size: var(--fs-small);
    font-weight: 700;

    transition: top var(--dur) ease;
}

.brasa-skip:focus {
    top: 0;
}

/* =========================================
   NAVBAR
   ========================================= */

.brasa-navbar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);

    width: 100%;
    padding: 26px var(--gutter);
}

/* La navegación va sobre la foto del hero: tipografía clara. */
.brasa-logo {
    font-family: var(--font-display);
    font-variation-settings: var(--fraunces-display);
    font-size: 27px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    color: var(--cream-raised);
}

.brasa-navbar nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(1rem, 2.5vw, 2.25rem);
}

.brasa-navbar nav a {
    color: var(--cream-raised);
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    opacity: .82;
    transition: opacity var(--dur) ease;
}

.brasa-navbar nav a:hover {
    opacity: 1;
}

.brasa-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 0 20px;

    border-radius: var(--r-pill);

    background-color: var(--salsa);
    color: var(--cream-raised);

    font-size: var(--fs-meta);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;

    transition: background-color var(--dur) ease;
}

.brasa-nav-button:hover {
    background-color: var(--espresso);
}

/* =========================================
   HERO — fotografía a sangre + texto superpuesto
   ========================================= */

.brasa-hero {
    position: relative;

    display: flex;
    align-items: center;

    min-height: min(94svh, 880px);

    padding: clamp(7rem, 12vh, 9rem) var(--gutter) clamp(3rem, 7vh, 5rem);

    background: var(--ink-deep);
    color: var(--cream-raised);
}

/* La foto ocupa toda la superficie del hero. */
.brasa-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;

    /* Recorta el re-encuadre de la foto en móvil. */
    overflow: hidden;
}

.brasa-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
}

/* Degradado en tres capas: izquierda para el texto, abajo para
   el móvil y arriba para que la navegación se lea. */
.brasa-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(18, 12, 9, .94) 0%,
            rgba(18, 12, 9, .84) 28%,
            rgba(18, 12, 9, .46) 52%,
            rgba(18, 12, 9, .1) 76%,
            rgba(18, 12, 9, .04) 100%
        ),
        linear-gradient(
            0deg,
            rgba(18, 12, 9, .55) 0%,
            rgba(18, 12, 9, 0) 38%
        ),
        linear-gradient(
            180deg,
            rgba(18, 12, 9, .5) 0%,
            rgba(18, 12, 9, 0) 24%
        );
}

.brasa-hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 34rem;
}

.brasa-tag {
    margin-bottom: 1.5rem;

    font-size: var(--fs-meta);
    font-weight: 700;
    letter-spacing: var(--track-label);
    text-transform: uppercase;

    color: var(--salsa);
}

/* Sobre la foto, el acento necesita su versión clara para mantener
   el contraste. */
.brasa-hero .brasa-tag {
    color: var(--salsa-light);
}

.brasa-hero h1 {
    max-width: 8ch;
    margin-bottom: 1.75rem;

    font-family: var(--font-display);
    font-variation-settings: var(--fraunces-display);
    font-size: var(--fs-display);
    font-weight: 600;
    letter-spacing: var(--track-display);
    line-height: .9;

    color: var(--cream-raised);
}

.brasa-hero h1 span {
    color: var(--salsa-light);
}

.brasa-description {
    max-width: 42ch;
    margin-bottom: 2.25rem;

    font-size: var(--fs-lead);
    line-height: 1.65;

    color: rgba(249, 245, 238, .82);
}

.brasa-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.brasa-button-primary,
.brasa-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;
    padding: 0 24px;

    border-radius: var(--r-pill);

    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;

    transition:
        background-color var(--dur) ease,
        color var(--dur) ease,
        border-color var(--dur) ease;
}

.brasa-button-primary {
    background-color: var(--salsa);
    color: var(--cream-raised);
}

.brasa-button-primary:hover {
    background-color: var(--espresso);
}

.brasa-button-secondary {
    border: 1px solid rgba(249, 245, 238, .55);
    color: var(--cream-raised);
}

.brasa-button-secondary:hover {
    background-color: var(--cream-raised);
    border-color: var(--cream-raised);
    color: var(--espresso);
}

/* =========================================
   MENÚ
   ========================================= */

.brasa-menu {
    padding: var(--section-pad) var(--gutter);

    background-color: var(--cream);
    color: var(--espresso);
}

.brasa-section-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1.5rem clamp(2rem, 5vw, 5rem);

    max-width: none;
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.brasa-section-header .brasa-tag {
    grid-column: 1 / -1;
}

.brasa-section-header h2 {
    grid-column: 1;
    grid-row: 2;

    max-width: 14ch;
    margin-bottom: 0;

    font-family: var(--font-display);
    font-variation-settings: var(--fraunces-display);
    font-size: var(--fs-title);
    font-weight: 600;
    letter-spacing: var(--track-display);
    line-height: .98;
}

.brasa-section-header h2 span {
    color: var(--salsa);
}

.brasa-section-header > p:last-child {
    grid-column: 2;
    grid-row: 2;

    max-width: 32ch;
    margin-bottom: 0;

    font-size: var(--fs-body);
    color: var(--ink-muted);
}

/* --- Categorías: píldoras, no cajas --- */

.brasa-menu-categories {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;

    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.brasa-menu-categories button {
    display: inline-flex;
    align-items: center;

    min-height: 42px;
    padding: 0 20px;

    border: 0;
    border-radius: var(--r-pill);

    background-color: var(--cream-raised);

    color: var(--ink-muted);
    font-size: var(--fs-small);
    font-weight: 600;
    cursor: pointer;

    transition:
        background-color var(--dur) ease,
        color var(--dur) ease;
}

.brasa-menu-categories button:hover {
    color: var(--espresso);
}

.brasa-menu-categories button.active {
    background-color: var(--espresso);
    color: var(--cream-raised);
}

/* --- Platos: índice sin cajas --- */

/* auto-fit colapsa las pistas vacías: al filtrar "Papas" o
   "Combos" (2 platos) ocupan la fila completa en vez de
   dejar un hueco. */
.brasa-products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: clamp(2.5rem, 4vw, 4rem) clamp(1.5rem, 2.5vw, 2.5rem);
}

.brasa-product {
    display: flex;
    flex-direction: column;

    background: none;
    border-radius: 0;
    overflow: visible;
}

.brasa-product-image {
    position: relative;

    aspect-ratio: 4 / 3;

    border-radius: var(--r-lg);
    overflow: hidden;

    background-color: var(--cream-raised);
}

.brasa-product-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform .55s var(--ease);
}

.brasa-product:hover .brasa-product-image img {
    transform: scale(1.05);
}

.brasa-product-info {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 1.4rem 0 0;
}

.brasa-product-info h3 {
    margin-bottom: .4rem;

    font-family: var(--font-display);
    font-variation-settings: var(--fraunces-display);
    font-size: var(--fs-h3);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.1;
}

.brasa-product-info p {
    max-width: 36ch;

    font-size: var(--fs-small);
    line-height: 1.6;

    color: var(--ink-muted);
}

.brasa-product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 1rem;

    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1px solid var(--rule-light);
}

.brasa-product-info strong {
    font-family: var(--font-display);
    font-variation-settings: var(--fraunces-text);
    font-size: var(--fs-price);
    font-weight: 600;
    white-space: nowrap;

    color: var(--espresso);
}

.brasa-product-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;

    min-height: 42px;
    padding: 0 20px;

    border-radius: var(--r-pill);

    background-color: var(--espresso);
    color: var(--cream-raised);

    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;

    transition:
        background-color var(--dur) ease,
        color var(--dur) ease;
}

.brasa-product-button::after {
    content: "\2197";
    font-size: 1em;
    line-height: 1;
}

.brasa-product-button:hover {
    background-color: var(--salsa);
    color: var(--cream-raised);
}

/* =========================================
   NOSOTROS
   ========================================= */

.brasa-about {
    padding: var(--section-pad) var(--gutter);

    background-color: var(--espresso);
    color: var(--cream-raised);
}

.brasa-about-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1.25rem clamp(2rem, 5vw, 5rem);

    max-width: none;
}

.brasa-about-content .brasa-tag {
    grid-column: 1 / -1;
    color: var(--salsa-light);
}

.brasa-about-content h2 {
    grid-column: 1 / -1;

    max-width: 18ch;
    margin-bottom: 1rem;

    font-family: var(--font-display);
    font-variation-settings: var(--fraunces-display);
    font-size: var(--fs-sub);
    font-weight: 600;
    letter-spacing: var(--track-display);
    line-height: 1;
}

.brasa-about-content h2 span {
    color: var(--salsa-light);
}

.brasa-about-content > p:not(.brasa-tag) {
    max-width: 44ch;
    margin-bottom: 0;

    font-size: var(--fs-body);
    line-height: 1.75;

    color: var(--ink-muted-dark);
}

/* =========================================
   INFORMACIÓN
   ========================================= */

.brasa-info {
    padding: var(--section-pad) var(--gutter);

    background-color: var(--cream-raised);
    color: var(--espresso);
}

.brasa-info-header {
    max-width: 780px;
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.brasa-info-header .brasa-tag {
    color: var(--salsa);
}

.brasa-info-header h2 {
    font-family: var(--font-display);
    font-variation-settings: var(--fraunces-display);
    font-size: var(--fs-title);
    font-weight: 600;
    letter-spacing: var(--track-display);
    line-height: .98;
}

.brasa-info-header h2 span {
    color: var(--salsa);
}

.brasa-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: clamp(1.5rem, 3vw, 3.5rem);
}

.brasa-info-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-height: 0;
    padding: 0 0 1.5rem;

    background: none;
    border: 0;
    border-top: 2px solid var(--rule-light-strong);
    border-radius: 0;
}

.brasa-info-card > span:first-child {
    margin-bottom: 1.5rem;

    font-size: var(--fs-meta);
    font-weight: 700;
    letter-spacing: var(--track-label);
    text-transform: uppercase;

    color: var(--salsa);
}

.brasa-info-card h3 {
    margin-bottom: .6rem;

    font-family: var(--font-display);
    font-variation-settings: var(--fraunces-display);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.15;
}

.brasa-info-card p {
    max-width: 34ch;
    margin-bottom: .5rem;

    font-size: var(--fs-small);
    line-height: 1.6;

    color: var(--ink-muted);
}

.brasa-info-link {
    margin-top: auto;
    padding-top: 1rem;

    display: inline-flex;
    align-items: center;

    color: var(--espresso);
    font-size: var(--fs-small);
    font-weight: 700;

    transition: color var(--dur) ease;
}

.brasa-info-link:hover {
    color: var(--salsa);
}

/* Espacio reservado para el enlace al mapa: la dirección real
   todavía no está definida, así que no se inventa un destino. */
.brasa-info-pending {
    margin-top: auto;
    padding-top: 1rem;

    color: var(--ink-muted);
    font-size: var(--fs-small);
    font-weight: 700;
    text-decoration: underline dotted;
    cursor: default;
}

/* =========================================
   CTA
   ========================================= */

.brasa-cta {
    padding: var(--section-pad) var(--gutter);

    background-color: var(--salsa);
    color: var(--cream-raised);

    display: flex;
    justify-content: center;
    text-align: center;
}

.brasa-cta > div {
    max-width: 820px;
}

.brasa-cta .brasa-tag {
    color: var(--cream-raised);
}

.brasa-cta h2 {
    margin-bottom: 2.5rem;

    font-family: var(--font-display);
    font-variation-settings: var(--fraunces-display);
    font-size: clamp(2.8rem, 6.4vw, 5.6rem);
    font-weight: 600;
    letter-spacing: var(--track-display);
    line-height: .98;
}

.brasa-cta h2 span {
    color: var(--butter);
}

.brasa-cta .brasa-button-primary {
    background-color: var(--espresso);
    color: var(--cream-raised);
}

.brasa-cta .brasa-button-primary:hover {
    background-color: var(--cream-raised);
    color: var(--espresso);
}

/* =========================================
   FOOTER
   ========================================= */

.brasa-footer {
    padding: clamp(3rem, 6vw, 5rem) var(--gutter) 1.75rem;

    background-color: var(--espresso-deep);
    color: var(--cream-raised);
}

.brasa-footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 3rem;

    padding-bottom: 3rem;
}

.brasa-footer-brand {
    max-width: 460px;
}

.brasa-footer-brand .brasa-logo {
    display: inline-block;
    margin-bottom: 1rem;

    color: var(--cream-raised);
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
}

.brasa-footer-brand p {
    max-width: 32ch;

    font-size: var(--fs-small);
    line-height: 1.6;

    color: var(--ink-muted-dark);
}

.brasa-footer-links {
    display: flex;
    gap: clamp(2.5rem, 6vw, 6rem);
}

.brasa-footer-column {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.brasa-footer-column span:first-child {
    margin-bottom: .5rem;

    font-size: var(--fs-meta);
    font-weight: 700;
    letter-spacing: var(--track-label);
    text-transform: uppercase;

    color: var(--salsa-light);
}

.brasa-footer-column a {
    color: var(--cream-raised);
    font-size: var(--fs-small);

    transition: color var(--dur) ease;
}

.brasa-footer-column a:hover {
    color: var(--salsa-light);
}

/* Enlace sin destino definido: se muestra, pero no simula
   funcionar. Falta el dato real para activarlo. */
.brasa-footer-pending {
    color: var(--ink-muted-dark);
    font-size: var(--fs-small);
    cursor: default;
}

.brasa-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;

    padding-top: 1.5rem;
    border-top: 1px solid var(--rule-dark);

    font-size: var(--fs-meta);
    letter-spacing: .08em;
    text-transform: uppercase;

    color: var(--ink-muted-dark);
}

.brasa-credits {
    letter-spacing: .04em;
    text-transform: none;
    opacity: .75;
}

/* =========================================
   ANIMACIÓN
   El nombre de la keyframe lo referencia brasa.js,
   por eso no se puede renombrar.
   ========================================= */

@keyframes brasaProductIn {

    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1024px) {
    .brasa-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .brasa-navbar {
        row-gap: .75rem;
        padding: 20px var(--gutter);
    }

    .brasa-logo {
        grid-column: 1;
        grid-row: 1;
        font-size: 24px;
    }

    .brasa-nav-button {
        grid-column: 3;
        grid-row: 1;
        min-height: 38px;
        padding: 0 16px;
    }

    .brasa-navbar nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: space-between;
        gap: .75rem;
    }

    .brasa-navbar nav a {
        font-size: 11px;
        letter-spacing: .1em;
    }

    /* Hero en móvil: la foto sigue siendo el fondo, el texto se
       ancla abajo y la foto se re-encuadra hacia arriba para que la
       hamburguesa quede despejada. */
    .brasa-hero {
        align-items: flex-end;
        min-height: 92svh;
        padding-top: 7.5rem;
        padding-bottom: clamp(2.5rem, 7vh, 4rem);
    }

    .brasa-hero-content {
        max-width: none;
    }

    .brasa-hero-media img {
        object-position: 50% 46%;
        transform: translateY(-5%) scale(1.15);
    }

    .brasa-hero-media::after {
        background:
            linear-gradient(
                0deg,
                rgba(18, 12, 9, .95) 0%,
                rgba(18, 12, 9, .88) 26%,
                rgba(18, 12, 9, .5) 50%,
                rgba(18, 12, 9, .18) 72%,
                rgba(18, 12, 9, .1) 100%
            ),
            linear-gradient(
                180deg,
                rgba(18, 12, 9, .6) 0%,
                rgba(18, 12, 9, 0) 22%
            );
    }

    .brasa-hero h1 {
        max-width: 12ch;
        font-size: clamp(2.9rem, 12.5vw, 4.6rem);
    }

    .brasa-section-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .brasa-section-header h2,
    .brasa-section-header > p:last-child {
        grid-column: 1;
        grid-row: auto;
    }

    .brasa-about-content {
        grid-template-columns: minmax(0, 1fr);
    }

    .brasa-about-content .brasa-tag,
    .brasa-about-content h2,
    .brasa-about-content > p:not(.brasa-tag) {
        grid-column: 1;
    }

    .brasa-footer-top {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }
}

@media (max-width: 760px) {
    .brasa-info-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.25rem;
    }
}

@media (max-width: 640px) {
    .brasa-logo {
        font-size: 22px;
    }

    .brasa-nav-button {
        font-size: 11px;
        letter-spacing: .08em;
    }

    .brasa-navbar nav {
        gap: .6rem;
    }

    .brasa-products {
        grid-template-columns: minmax(0, 1fr);
    }

    .brasa-product-image {
        aspect-ratio: 3 / 2;
    }

    .brasa-hero-buttons {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .brasa-footer-links {
        flex-wrap: wrap;
        gap: 2rem;
    }

    .brasa-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    /* El JS aplica la animación por style inline:
       hace falta !important para poder desactivarla. */
    .brasa-product {
        animation: none !important;
    }
}