/*
 * Pagina de presentacion: lo que ve quien llega sin haber entrado.
 *
 * Reemplaza a la tarjeta de acceso suelta que habia antes. La diferencia de fondo: aquella
 * asumia que quien llega ya sabe lo que es Lyra. Esta lo cuenta, ensena la app y ofrece el APK,
 * que es como llega la gente a un producto que no conoce.
 *
 * Misma paleta y mismo logo que la app: quien entre despues no debe sentir que ha cambiado de
 * sitio.
 */

.landing {
    position: fixed; inset: 0; z-index: 50;
    overflow-y: auto;
    /* La banda vive fuera del contenedor centrado: sin esto asomaria por el borde. */
    overflow-x: hidden;
    background: var(--background);
}
.landing[hidden] { display: none; }

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

.landing-head {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: 14px;
    padding: 16px 32px;
    background: rgba(11, 9, 16, .82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.landing-head .brand { padding: 0; font-size: 19px; }
.landing-head .spacer { flex: 1; }

.btn-ghost {
    padding: 10px 20px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 14px; font-weight: 600;
}
.btn-ghost:hover { border-color: var(--secondary); color: var(--secondary); }

/* ---------------------------------------------------------------- lo top, por el lateral */

/*
 * Columna de portadas que sube sola, a la izquierda del titular.
 *
 * `align-self: stretch` es la clave de que quede bien: hace que la columna ocupe exactamente el
 * alto de la fila, y como la fila la define el bloque del titular, el borde superior de la banda
 * cae justo a la altura de la «T». Ahi es donde se desvanece, asi que las caratulas parecen
 * salir por detras del texto en lugar de cortarse contra un borde.
 *
 * NO lleva alto minimo, a proposito: si lo tuviera, seria ella la que estirara el hero y
 * empujaria el resto de la pagina hacia abajo.
 *
 * El bucle no da tirones porque la lista se pinta dos veces y la animacion llega hasta el -50%:
 * cuando la primera copia termina de salir por arriba, la segunda esta exactamente donde empezo
 * la primera.
 */
.marquesina {
    /*
     * FUERA de la rejilla, colocada por encima.
     *
     * Siendo una columna mas del grid pasaban dos cosas malas a la vez: su contenido —doce
     * caratulas, varios miles de pixeles— estiraba la fila y mandaba el resto de la pagina muy
     * abajo, y ademas se comia ancho, con lo que el titular y la captura del reproductor
     * encogian. Sacandola del flujo no mide ni estorba: se limita al alto del hero y ya esta.
     */
    position: absolute;
    /*
     * Arriba y abajo coinciden con el RELLENO del hero, no con su borde.
     *
     * Asi el borde superior de la banda cae exactamente en la linea del titular —la «T»— y las
     * caratulas se desvanecen justo ahi. Con `top: 0` empezaban 72 px mas arriba y asomaban por
     * encima del texto.
     */
    top: 72px; bottom: 64px;
    overflow: hidden;
    /* Se desvanece arriba —donde desaparecen— y un poco abajo, para no cortar en seco. */
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 92%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 92%, transparent);
}
.marquesina-pista {
    display: flex; flex-direction: column; gap: 14px;
    animation: subir 50s linear infinite;
}
/* Se para al pasar el raton: si algo llama la atencion, hay que poder mirarlo. */
.marquesina:hover .marquesina-pista { animation-play-state: paused; }

.marquesina-item { flex-shrink: 0; }
.marquesina-item img {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    border-radius: 10px; background: var(--surface); display: block;
}
.marquesina-item .t {
    margin-top: 6px; font-size: 12.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marquesina-item .a {
    font-size: 11.5px; color: var(--on-surface-variant);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@keyframes subir {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

/* Quien pide menos movimiento no debe ver nada moverse solo. */
@media (prefers-reduced-motion: reduce) {
    .marquesina-pista { animation: none; }
    .marquesina { overflow-y: auto; }
}

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

.hero-land {
    /* Referencia para la banda del lateral, que va colocada de forma absoluta. */
    position: relative;
    display: grid; grid-template-columns: 1.1fr .9fr;
    gap: 48px; align-items: center;
    max-width: 1180px; margin: 0 auto;
    padding: 72px 32px 64px;
}

/*
 * La columna de portadas solo aparece cuando SOBRA sitio.
 *
 * Por debajo de 1180 px, el titular y la tarjeta de acceso ya se reparten todo el ancho; meter
 * una tercera columna estrecharia las dos cosas que de verdad importan. Es decoracion, y la
 * decoracion es lo primero que se va cuando hay que elegir.
 */
/*
 * La banda vive en el margen izquierdo de la ventana, no dentro del contenido.
 *
 * `left: calc(50% - 50vw)` la lleva al borde de la ventana desde un contenedor centrado — que es
 * justo el hueco negro que quedaba vacio. Y solo se muestra cuando ese margen da de si: el
 * contenido mide 1180 px, asi que para que quepan 240 de banda mas un respiro hacen falta unos
 * 1700 de ventana. Por debajo, la pagina se queda como estaba, sin nada estrechado.
 */
.marquesina { display: none; }

@media (min-width: 1700px) {
    .marquesina {
        display: block;
        /*
         * Justo a la izquierda del texto, NO en el borde de la ventana.
         *
         * Pegada a la orilla quedaba desconectada del titular —dos cosas sueltas en la misma
         * pantalla— y ademas dejaba a la vista la franja clara del borde del navegador. Aqui
         * acompana a la lectura: las caratulas suben al lado de la frase, no en una esquina.
         *
         * El calculo: se coloca entera a la izquierda del contenedor (`-ancho`) y se separa un
         * poco (`-24px`). Necesita 254 px de margen, que es lo que hay a partir de 1700 px de
         * ventana; por debajo no se muestra.
         */
        left: calc(-1 * (230px + 24px));
        width: 230px;
    }
}
.hero-land h1 {
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.05; margin: 0 0 18px;
    letter-spacing: -.02em;
}
.hero-land .lead {
    font-size: 18px; line-height: 1.6;
    color: var(--on-surface-variant); margin: 0 0 30px; max-width: 46ch;
}
.hero-actions-land { display: flex; gap: 12px; flex-wrap: wrap; }

/* Tarjeta de acceso, a la derecha del mensaje */
.access-card {
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px; padding: 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.access-card h2 { margin: 0 0 4px; font-size: 20px; }

/*
 * Pestanas de la tarjeta de acceso.
 *
 * La activa lleva fondo y la otra no: es la unica diferencia, pero basta. Un subrayado fino se
 * pierde en pantallas pequeñas y con dos opciones no hace falta mas jerarquia que esa.
 */
.gate-tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    background: var(--background);
    border-radius: 999px; padding: 4px; margin-bottom: 14px;
}
.gate-tab {
    padding: 10px 12px; border-radius: 999px;
    font-size: 14px; font-weight: 600;
    color: var(--on-surface-variant);
    transition: background 160ms ease, color 160ms ease;
}
.gate-tab:hover { color: var(--on-background); }
.gate-tab.activa { background: var(--primary); color: #fff; }

/*
 * Separador antes del boton de Google.
 *
 * Sin el, el boton quedaba pegado al formulario y parecia otro campo mas. La linea con la «o» en
 * medio dice que son DOS caminos alternativos, no dos pasos del mismo.
 */
.o-bien {
    display: flex; align-items: center; gap: 12px;
    margin: 18px 0 14px;
    color: var(--on-surface-variant); font-size: 12.5px;
}
.o-bien::before, .o-bien::after {
    content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.12);
}

/* El boton de Google, centrado y sin desbordar la tarjeta. */
#google-btn { display: flex; justify-content: center; }
#google-btn > div { max-width: 100%; }
.access-card .hint { color: var(--on-surface-variant); font-size: 14px; margin: 0 0 20px; }

/* ---------------------------------------------------------------- secciones */

.section { max-width: 1180px; margin: 0 auto; padding: 56px 32px; }
.section h2 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 10px; }
.section .lead { color: var(--on-surface-variant); font-size: 16px; margin: 0 0 34px; max-width: 60ch; }

.features {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
}
.feature {
    background: var(--surface); border-radius: 14px; padding: 24px;
    border: 1px solid rgba(255, 255, 255, .05);
}
.feature .ico { width: 26px; height: 26px; color: var(--secondary); margin-bottom: 12px; }
.feature h3 { margin: 0 0 6px; font-size: 16px; }
.feature p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--on-surface-variant); }

/* Comparativa app / web: es la pregunta que todo el mundo hace, mejor responderla de frente */
.compare {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.compare-col {
    background: var(--surface); border-radius: 14px; padding: 24px;
    border: 1px solid rgba(255, 255, 255, .05);
}
.compare-col.highlight { border-color: rgba(139, 92, 246, .5); }
.compare-col h3 { margin: 0 0 14px; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.compare-col ul { margin: 0; padding: 0; list-style: none; }
.compare-col li {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 7px 0; font-size: 14px; color: var(--on-surface-variant);
}
.compare-col li b { color: var(--on-background); font-weight: 600; }
.tick { color: var(--secondary); flex-shrink: 0; }
.cross { color: var(--on-surface-variant); opacity: .5; flex-shrink: 0; }

/* Preguntas frecuentes con desplegables nativos: sin JavaScript que mantener */
.faq details {
    background: var(--surface); border-radius: 12px;
    padding: 16px 20px; margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, .05);
}
.faq summary {
    cursor: pointer; font-weight: 600; font-size: 15px;
    list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--secondary); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--on-surface-variant); }

.landing-foot {
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding: 30px 32px 44px; text-align: center;
    color: var(--on-surface-variant); font-size: 13px; line-height: 1.7;
}

@media (max-width: 900px) {
    .hero-land { grid-template-columns: 1fr; gap: 34px; padding: 44px 20px 40px; }
    .section { padding: 40px 20px; }
    .landing-head { padding: 12px 18px; }
    /* El texto del boton sobra en pantallas estrechas: el icono ya lo dice. */
    .landing-head .btn-ghost { padding: 9px 14px; }
}

/* ---------------------------------------------------------------- captura del hero */

/*
 * La captura del reproductor, debajo del titular.
 *
 * Sin marco de telefono dibujado alrededor: el dispositivo real es una tablet en horizontal, y
 * meterla en un marco de movil seria mentir sobre la proporcion de lo que se esta enseñando.
 */
.hero-captura { margin: 30px 0 0; }
.hero-captura img {
    width: 100%; height: auto; display: block;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 22px 50px rgba(0,0,0,.5);
}
.hero-captura figcaption {
    margin-top: 10px; font-size: 13px; color: var(--on-surface-variant);
}

/* ---------------------------------------------------------------- tendencias */

/*
 * Portadas reales, traidas del catalogo al cargar la pagina.
 *
 * Se podrian haber puesto seis imagenes fijas y quedaria igual de bonito, pero diria menos: esto
 * demuestra que el catalogo responde, y ademas cambia solo con el tiempo sin que nadie lo toque.
 */
.tendencias {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}
.tendencia { text-align: center; }
.tendencia img {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    /* Redondas: es como se distingue de un vistazo un artista de un album. */
    border-radius: 50%; background: var(--surface);
    display: block;
}
.tendencia .titulo {
    margin-top: 9px; font-size: 14px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tendencia .artista {
    font-size: 13px; color: var(--on-surface-variant); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tendencias .empty { grid-column: 1 / -1; }