/* Impala Restaurantes — página de entrada (5 locales)
   Paleta y layout: diseño aprobado (Claude Design, variante 1A/2A).
   Tipografías: Cormorant Garamond (display) + Barlow Condensed (UI) + Barlow (cuerpo) — regla de cadena, CLAUDE.md. */

:root {
    --ig-bg:        #1b1a18;
    --ig-texto:     #f3f2f2;
    --ig-texto-70:  rgba(243, 242, 242, 0.7);
    --ig-texto-45:  rgba(243, 242, 242, 0.45);
    --ig-borde:     rgba(243, 242, 242, 0.14);
    --ig-oro:       #b68235;
    --ig-oro-claro: #e1ad66;
    --ig-oro-hover: rgba(182, 130, 53, 0.16);

    --fuente-display: 'Cormorant Garamond', Georgia, serif;
    --fuente-ui:      'Barlow Condensed', sans-serif;
    --fuente-cuerpo:  'Barlow', sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ig-bg);
    color: var(--ig-texto);
    font-family: var(--fuente-cuerpo);
}

img { display: block; max-width: 100%; }

/* — Franja superior superpuesta (desktop): header+picker flotan sobre
   el hero en vez de empujarlo hacia abajo. En mobile quedan en el flujo
   normal, como estaban (ver media query al final). */
.ig-top { position: relative; }

@media (min-width: 641px) {
    .ig-top-bar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 5;
    }
    /* La franja mide ~201px (68 header + 133 picker). Sin esto, en anchos
       angostos como 1080px el hero se achica (aspect-ratio) y el texto
       centrado verticalmente queda tapado detrás de la franja.
       210px dejaba apenas 9px de aire — insuficiente, "Estás en" y la
       raya seguían pisando el borde de la franja. Con margen real ahora. */
    .ig-hero { min-height: 600px; }
    .ig-hero__texto { top: 240px; }
}

/* — Header — */
.ig-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    padding: 0 36px;
    background: rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid var(--ig-borde);
}
.ig-marca { display: flex; align-items: baseline; gap: 10px; }
.ig-marca__nombre {
    font-family: var(--fuente-display);
    font-size: 24px;
    letter-spacing: 0.28em;
    padding-left: 0.28em; /* compensa el letter-spacing final para centrar visualmente */
}
.ig-marca__sub {
    font-family: var(--fuente-ui);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ig-oro);
}
.ig-header__hint {
    font-family: var(--fuente-ui);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ig-texto-45);
}

/* — Selector de logos — */
.ig-picker {
    display: flex;
    gap: 14px;
    padding: 26px 36px 22px;
    background: rgba(0, 0, 0, 0.5);
}
.ig-picker__item {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0 0 9px;
    opacity: 0.5;
    filter: grayscale(1);
    transition: opacity .25s ease, filter .25s ease, border-color .25s ease;
}
.ig-picker__item img {
    height: 74px;
    width: 100%;
    background: #fff;
    border-radius: 3px;
    padding: 8px;
    object-fit: contain;
}
/* Mismo nivel de especificidad que :hover — sin esto el hover nunca ganaba */
.ig-picker__item.is-active,
.ig-picker__item:hover {
    opacity: 1;
    filter: none;
}
/* Único elemento con la raya dorada: el local activo. Nunca Manzi (no es "un local") ni el hover. */
.ig-picker__item.is-active { border-color: var(--ig-oro); }
.ig-picker__item--manzi { border-bottom-color: transparent !important; }

/* — Hero — */
.ig-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: #111;
}
.ig-hero__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .35s ease;
}
.ig-hero__foto.is-cambiando { opacity: 0; }
.ig-hero__degrade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(20,18,16,0.86) 0%, rgba(20,18,16,0.62) 42%, rgba(20,18,16,0.05) 78%);
}
.ig-hero__texto {
    position: absolute;
    left: 36px;
    top: 0;
    bottom: 0;
    width: 560px;
    max-width: calc(100% - 72px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}
.ig-kicker {
    font-family: var(--fuente-ui);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ig-oro-claro);
}
.ig-hero__nombre {
    font-family: var(--fuente-display);
    font-weight: 400;
    font-size: 68px;
    line-height: 1.02;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ig-texto);
}
.ig-filete { width: 64px; height: 1px; background: var(--ig-oro); }
.ig-hero__dir {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(246, 244, 241, 0.82);
    margin: 0;
    max-width: 420px;
}
.ig-btn {
    display: inline-block;
    width: fit-content;
    font-family: var(--fuente-ui);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 13px 26px;
    border: 1px solid var(--ig-oro);
    color: var(--ig-oro-claro);
    margin-top: 8px;
    transition: background .2s ease;
}
.ig-btn:hover { background: var(--ig-oro-hover); }

/* — Franja de info — */
.ig-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--ig-borde);
}
.ig-info__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 36px;
    border-right: 1px solid var(--ig-borde);
}
.ig-info__col:last-child { border-right: none; }
.ig-info__label {
    font-family: var(--fuente-ui);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ig-oro);
}
.ig-info__valor {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(243, 242, 242, 0.8);
}

/* — Pie — */
.ig-pie {
    padding: 18px 36px;
    border-top: 1px solid var(--ig-borde);
    font-family: var(--fuente-ui);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ig-texto-45);
}

/* — Mobile — */
@media (max-width: 640px) {
    .ig-header { height: auto; padding: 16px 20px; }
    .ig-marca__nombre { font-size: 19px; }
    .ig-marca__sub { font-size: 8px; }
    .ig-header__hint { display: none; }

    .ig-picker {
        padding: 16px 20px 18px;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .ig-picker::-webkit-scrollbar { display: none; }
    .ig-picker__item {
        flex: 0 0 auto;
        width: 96px;
        scroll-snap-align: start;
    }
    .ig-picker__item img { height: 52px; }

    .ig-hero { aspect-ratio: 4 / 3; }
    .ig-hero__degrade {
        background: linear-gradient(0deg, rgba(20,18,16,0.94) 0%, rgba(20,18,16,0.6) 34%, rgba(20,18,16,0.02) 66%);
    }
    .ig-hero__texto {
        left: 20px;
        right: 20px;
        top: auto;
        bottom: 22px;
        width: auto;
        max-width: none;
        gap: 11px;
    }
    .ig-hero__nombre { font-size: 38px; }
    .ig-filete { width: 44px; }
    .ig-hero__dir { font-size: 13px; max-width: none; }
    .ig-btn { width: 100%; text-align: center; }

    .ig-info { grid-template-columns: 1fr; }
    .ig-info__col { border-right: none; border-bottom: 1px solid var(--ig-borde); padding: 20px; }
    .ig-info__col:last-child { border-bottom: none; }
}