/* ==========================================================================
   /lineup — cartel del festival
   Mismo lenguaje visual que las open-call: degradado del sitio de fondo y una
   "hoja" blanca encima con el contenido. Los prefijos son ff- para no chocar
   con los estilos que Framer inyecta en las páginas migradas.
   ========================================================================== */

* {
    box-sizing: border-box;
}

:root {
    color-scheme: light;
    --ink: #0b0b0b;
    --muted: #636363;
    --line: #d9d9d9;
    --paper: #fafafa;
    --panel: #ffffff;
    --accent: #ff9b45;
    --accent-dark: #243f5f;
    --degradado: linear-gradient(30deg, #feb128 0%, #ec9e8c 34%, #7fa5c4 70%, #253d5e 100%);
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--degradado) fixed;
    color: var(--ink);
    font-family: Inter, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

h1, h2, h3, .ff-card-nombre, .ff-tab, .ff-escenario-titulo {
    font-family: "Inter Tight", Inter, Arial, sans-serif;
}

.ff-salto {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 10px 16px;
    background: #fff;
    font-weight: 700;
}

.ff-salto:focus {
    left: 12px;
    top: 12px;
    z-index: 300;
}

/* ------------------------------------------------------------- cabecera -- */

/* El botón sólo existe en móvil y sólo si hay JavaScript: lo enciende la
   media query de abajo. En escritorio el menú es la fila de siempre. */

/* ----------------------------------------------------------------- hero -- */

.ff-pagina {
    padding: 94px 30px 30px;
}

.ff-hero {
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: 26px 0 40px;
    color: #fff;
    text-align: center;
}

.ff-kicker {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ff-hero h1 {
    margin: 0 0 16px;
    font-size: clamp(52px, 13vw, 148px);
    font-weight: 700;
    line-height: 0.86;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-shadow: 0 2px 40px rgba(0, 0, 0, 0.18);
}

.ff-hero-meta {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(14px, 2.2vw, 18px);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------- la hoja -- */

.ff-hoja {
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: 30px;
    background: var(--paper);
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}

/* --------------------------------------------------------------- días --- */

.ff-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.ff-tab {
    display: grid;
    gap: 2px;
    min-width: 132px;
    padding: 11px 22px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    text-align: left;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ff-tab span {
    color: var(--muted);
    font-family: Inter, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 160ms ease;
}

.ff-tab-corta {
    display: none;
}

.ff-tab:hover {
    border-color: #b0b0b0;
}

.ff-tab[aria-selected="true"] {
    border-color: transparent;
    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
    color: #fff;
}

.ff-tab[aria-selected="true"] span {
    color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------- escenarios --- */

.ff-dia[hidden] {
    display: none;
}

.ff-escenario {
    padding-top: 34px;
}

.ff-escenario-titulo {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 18px;
    font-size: clamp(22px, 3.4vw, 32px);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.ff-escenario-conteo {
    color: var(--muted);
    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* -------------------------------------------------------------- cards --- */

.ff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px 18px;
}

.ff-card {
    margin: 0;
}

.ff-card-enlace {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* Un panel por artista, en fila. `grid-auto-flow: column` sirve para 1, 2 o 3
   sin reglas por cantidad. Antes esto era una sola foto partida en diagonal y
   el corte caía sobre las caras. */
.ff-card-fotos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 5px;
    aspect-ratio: 1 / 1;
}

/* El panel recorta: sin esto el zoom del hover se sale por las esquinas. */
.ff-panel {
    position: relative;
    overflow: hidden;
    min-width: 0;
    border-radius: 8px;
    background: var(--degradado);
}

.ff-card-fotos img,
.ff-ficha-retrato img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 420ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ff-card-enlace:hover .ff-card-fotos img,
.ff-card-enlace:focus-visible .ff-card-fotos img {
    transform: scale(1.05);
}

.ff-card-enlace:focus-visible .ff-card-fotos {
    outline: 3px solid var(--accent-dark);
    outline-offset: 3px;
}

.ff-card-enlace:hover .ff-card-nombre {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Sin press kit: iniciales sobre el degradado, en vez de un hueco gris. */
.ff-card-sinfoto {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--degradado);
    color: rgba(255, 255, 255, 0.92);
    font-family: "Inter Tight", Inter, Arial, sans-serif;
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Con cada quien en su panel, las iniciales sólo se centran: ya no hay que
   esquivar el corte diagonal. Sí achican, porque el panel es más angosto. */
.ff-card-fotos[data-miembros="2"] .ff-card-sinfoto,
.ff-card-fotos[data-miembros="3"] .ff-card-sinfoto {
    font-size: clamp(18px, 3vw, 26px);
}

.ff-card-info {
    display: block;
    padding-top: 11px;
}

.ff-card-nombre {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.ff-card-escenario {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ------------------------------------------------- ficha de artista ----- */

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

    .ff-card-fotos img { transition: none; }
}

.ff-migas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: min(1120px, 100%);
    margin: 0 auto 16px;
    /* Hueco para el selector de idioma, que va fijo arriba a la derecha
       (`.ff-idioma`, lo pinta i18n.js). Es la única fila del documento que
       coincide con él sin haber hecho scroll; sin esto, un acto de nombre
       largo se metía por debajo de la pastilla. */
    padding-right: 92px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 600;
}

.ff-migas a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
}

.ff-migas a:hover {
    color: #fff;
    text-decoration: underline;
}

.ff-migas a::after {
    content: " /";
    color: rgba(255, 255, 255, 0.4);
}

.ff-migas span {
    color: #fff;
}

.ff-ficha {
    padding: 0;
    overflow: hidden;
}

.ff-ficha-hero {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 34px;
    align-items: center;
    padding: 34px;
    border-bottom: 1px solid var(--line);
}

/* Mismos paneles que en la tarjeta, a escala de hero. */
.ff-ficha-retrato {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
    aspect-ratio: 1 / 1;
}

.ff-ficha-retrato .ff-panel {
    border-radius: 10px;
}

.ff-ficha-retrato .ff-card-sinfoto {
    font-size: clamp(44px, 9vw, 96px);
}

.ff-ficha-retrato[data-miembros="2"] .ff-card-sinfoto,
.ff-ficha-retrato[data-miembros="3"] .ff-card-sinfoto {
    font-size: clamp(28px, 5vw, 54px);
}

.ff-ficha-badge {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ff-ficha-titulo h1 {
    margin: 0;
    font-size: clamp(34px, 6vw, 68px);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.ff-ficha-cuerpo {
    padding: 34px;
}

.ff-ficha-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 0 34px 34px;
}

.ff-boton {
    display: inline-flex;
    align-items: center;
    padding: 13px 26px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.ff-volver {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.ff-volver:hover {
    color: var(--ink);
    text-decoration: underline;
}

.ff-miembro + .ff-miembro {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}

.ff-miembro-cabeza {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
}

.ff-miembro-foto {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: var(--degradado);
}

.ff-miembro-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ff-miembro h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

/* Las bios llegan en inglés desde el press kit: van marcadas con lang="en". */
.ff-bio p {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
    text-align: justify;
    text-justify: inter-word;
    hyphens: manual;
    -webkit-hyphens: manual;
}

.ff-bio p:last-child {
    margin-bottom: 0;
}

/* Redes del artista: van bajo su nombre, con icono en vez de etiqueta.
   El padding de cada enlace lo compensa el margen negativo, para que el primer
   icono alinee con el nombre de arriba. */
.ff-redes {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0 0 -7px;
    padding: 0;
    list-style: none;
}

/* El dibujo mide 21px, pero el blanco táctil no puede quedarse ahí: WCAG 2.5.8
   pide 24 mínimo en celular. El padding lo lleva a 35 sin agrandar el icono. */
.ff-redes a {
    display: block;
    padding: 7px;
    color: var(--muted);
    transition: color 140ms ease;
}

.ff-redes a:hover {
    color: var(--accent-dark);
}

.ff-redes a:focus-visible {
    outline: 2px solid var(--accent-dark);
    outline-offset: -2px;
    border-radius: 6px;
}

.ff-redes svg {
    display: block;
    width: 21px;
    height: 21px;
}

/* En un B2B el nombre y sus redes forman la columna derecha del encabezado,
   junto al retrato. */
.ff-miembro-titulo {
    min-width: 0;
}

.ff-vacio {
    padding: 40px 0;
    color: var(--muted);
    text-align: center;
}

/* -------------------------------------------------------------- footer -- */

.ff-footer {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr);
    gap: 96px;
    width: 100%;
    margin: 30px 0 0;
    padding: 50px max(50px, calc((100vw - 1120px) / 2 + 50px));
    background: #fafafa;
    color: #666;
}

.ff-footer-brand {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 22px;
}

.ff-footer-cta {
    display: inline-flex;
    align-items: center;
    min-height: 41px;
    padding: 0 20px;
    border: 2px solid #222;
    border-radius: 10px;
    color: #222;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.ff-footer-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
}

.ff-footer-logo {
    position: relative;
    display: block;
    height: 22px;
}

.ff-footer-logo-lostnights { width: 82px; }
.ff-footer-logo-mandala { width: 122px; }

.ff-footer-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ff-footer-copy {
    color: #666;
    font-size: 12px;
}

.ff-footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.ff-footer-links h2 {
    margin: 0 0 8px;
    color: #666;
    font-size: 15px;
    font-weight: 700;
}

.ff-footer-links a {
    display: block;
    margin: 0 0 7px;
    color: #666;
    font-size: 13px;
    line-height: 1.25;
    text-decoration: none;
}

/* ------------------------------------------------------------- móvil ---- */

@media (max-width: 860px) {
/* Sin JavaScript se queda la fila con scroll de siempre. */
    

    

    

    

    

    

    

    

    .ff-pagina {
        padding: 74px 16px 16px;
    }

    .ff-hero {
        padding: 16px 0 28px;
    }

    .ff-hoja {
        padding: 20px;
    }

    .ff-grid {
        grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
        gap: 16px 12px;
    }

    .ff-tab {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 14px;
    }

    .ff-tab-larga {
        display: none;
    }

    .ff-tab-corta {
        display: block;
    }

    .ff-ficha-hero {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 22px;
    }

    .ff-ficha-cuerpo {
        padding: 22px;
    }

    .ff-ficha-pie {
        padding: 0 22px 22px;
    }

    .ff-miembro-cabeza {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
    }

    .ff-footer {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 28px;
    }

    .ff-footer-links {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}