/* Cómo funciona (31 oct 2026). La explica `templates/playlists/como_funciona.html`.

   Todo lo propio va prefijado `cf-` y acotado bajo `.comofunciona`, por las
   trampas globales de app.css (ver CLAUDE.md). Las vitrinas usan además las
   hojas de cada pantalla de verdad —pedir, generar, el match, la racha—, que
   se cargan junto a esta. */

/* Negro plano en todos los anchos. Sobre 900 px llevaba la sala de app.css,
   y el rojizo de su halo a Jaime «no se ve bien» (31 oct 2026). */
body.comofunciona-page { background: var(--bg); }

body.comofunciona-page .site-shell::before,
body.comofunciona-page .site-shell::after { display: none; }

/* ===== estructura ===== */

.comofunciona .cf-hero {
    padding: clamp(2.2rem, 6vw, 4.2rem) 0 clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.comofunciona .cf-hero h1 {
    max-width: 15ch;
    margin: .9rem auto 0;
    color: var(--text-strong);
    font: 800 clamp(2.1rem, 5.6vw, 3.9rem)/1.04 "Sora", sans-serif;
    letter-spacing: -.05em;
    text-wrap: balance;
}

.comofunciona .cf-hero p {
    max-width: 42ch;
    margin: 1.1rem auto 0;
    color: var(--muted-strong);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.6;
    text-wrap: balance;
}

.comofunciona .cf-sec {
    padding: clamp(2.6rem, 6vw, 4.6rem) 0;
    border-top: 1px solid var(--border-subtle);
    scroll-margin-top: 4.5rem; /* la barra de arriba es fija */
}

.comofunciona .cf-par {
    display: grid;
    gap: clamp(1.8rem, 3vw, 2.8rem);
    align-items: center;
}

@media (min-width: 900px) {
    .comofunciona .cf-par { grid-template-columns: 1fr 1fr; }
    .comofunciona .cf-par.cf-invertida .cf-par-tx { order: 2; }
}

.comofunciona .cf-par-tx { min-width: 0; }

.comofunciona .cf-par-tx h2 {
    margin: .55rem 0 .7rem;
    color: var(--text-strong);
    font: 800 clamp(1.6rem, 3.2vw, 2.4rem)/1.1 "Sora", sans-serif;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.comofunciona .cf-par-tx > p {
    max-width: 50ch;
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.65;
}

.comofunciona .cf-par-tx > p.cf-segundo { margin-top: .9rem; }

/* La frase de la marca, dentro de la sección a la que pertenece. */
.comofunciona .cf-lema {
    max-width: 24ch;
    margin: 1.5rem 0 0;
    padding-left: .9rem;
    border-left: 2px solid var(--accent);
    color: var(--text-strong);
    font: 700 clamp(1.05rem, 1.8vw, 1.25rem)/1.35 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.comofunciona .cf-par-vt { display: flex; justify-content: center; min-width: 0; }

/* ===== los tres puntos ===== */

.comofunciona .cf-puntos {
    display: grid;
    gap: .8rem;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
}

.comofunciona .cf-puntos li {
    display: flex;
    gap: .7rem;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.55;
}

.comofunciona .cf-puntos b { display: block; color: var(--text-strong); font-weight: 700; }

.comofunciona .cf-tic {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: .1rem;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: rgb(from var(--accent) r g b / .1);
    color: var(--accent-strong);
}

.comofunciona .cf-tic svg { width: .8rem; height: .8rem; }

/* ===== el teléfono =====
   Adentro, cada pantalla va a su tamaño de verdad y `zoom` la achica entera:
   así las piezas prestadas se ven igual que en el producto, letra incluida,
   en vez de reconstruirlas en chico. */

.comofunciona .cf-fono {
    width: min(100%, 340px);
    padding: .5rem;
    border: 1px solid var(--line-strong);
    border-radius: 34px;
    background: linear-gradient(168deg, rgba(243, 235, 221, .07), rgba(243, 235, 221, .01));
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 226, 196, .12);
}

.comofunciona .cf-pantalla {
    position: relative;
    overflow: hidden;
    padding: .7rem .75rem 1rem;
    border: 1px solid var(--border-default);
    border-radius: 27px;
    background: #090909;
}

/* La muesca del celular. Es adorno: no ocupa lugar en el flujo. */
.comofunciona .cf-muesca {
    width: 32%;
    height: 4px;
    margin: 0 auto .75rem;
    border-radius: 999px;
    background: rgba(243, 235, 221, .18);
}

.comofunciona .cf-escala { zoom: .8; }

/* Las vitrinas se miran, no se tocan: nada reacciona al puntero. La de
   Pedir es la excepción, una demo que se toca. */
.comofunciona .cf-pantalla * { cursor: default; }
.comofunciona .cf-pantalla .vt-pedir [role="button"]:not([aria-disabled="true"]) { cursor: pointer; }
.comofunciona .cf-pantalla .jg-fila:hover { background: none; }

/* ===== textos de pantalla ===== */

.comofunciona .cf-titulo {
    margin: .2rem 0 0;
    color: #f5ece3;
    font: 800 1.75rem/1.1 "Sora", sans-serif;
    letter-spacing: -.045em;
}

.comofunciona .cf-ojo {
    margin: 0;
    color: var(--accent-strong);
    font: 800 .7rem/1 "Manrope", sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.comofunciona .cf-cta {
    display: flex;
    width: 100%;
    margin-top: 1.1rem;
    pointer-events: none;
}

/* ===== la revisión de pedidos =====
   Las filas de la revisión viven en un <style> de `generate_playlist.html` y
   no en una hoja; acá van copiadas con sus mismas medidas. */

.comofunciona .cf-rv-total { margin: .35rem 0 0; color: var(--text-strong); font: 800 .9rem "Manrope", sans-serif; }

.comofunciona .cf-rv-reparto {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .5rem;
    margin: .85rem 0 0;
    padding: 0;
    list-style: none;
}

.comofunciona .cf-rv-reparto li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .55rem .3rem .35rem;
    border: 1px solid rgba(241, 232, 219, .1);
    border-radius: 999px;
    background: rgba(18, 16, 17, .7);
}

.comofunciona .cf-rv-reparto span { color: var(--muted); font-size: .74rem; font-weight: 750; white-space: nowrap; }
.comofunciona .cf-pantalla .pill { padding: .28rem .5rem; font-size: .6rem; line-height: 1; }

.comofunciona .cf-rv-cabeza {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1.3rem 0 0;
    color: var(--text-strong);
    font: 800 1.05rem/1.2 "Sora", sans-serif;
}

.comofunciona .cf-rv-cuenta {
    display: inline-grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: rgba(215, 138, 99, .2);
    color: #eaa57f;
    font: 800 .72rem "Manrope", sans-serif;
}

.comofunciona .cf-rv-copy { margin: .35rem 0 .7rem; color: var(--muted); font-size: .83rem; line-height: 1.45; }
.comofunciona .cf-rv-lista { display: grid; gap: .5rem; }

.comofunciona .cf-rv-fila {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    padding: .6rem .75rem;
    border: 1px solid rgba(241, 232, 219, .11);
    border-radius: .95rem;
    background: rgba(13, 12, 13, .74);
}

.comofunciona .cf-rv-fila.is-pendiente { border-color: rgba(215, 138, 99, .4); background: rgba(177, 91, 59, .09); }
.comofunciona .cf-rv-fila.con-boton { grid-template-columns: 36px minmax(0, 1fr) max-content; }

.comofunciona .cf-rv-cara {
    display: block;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(241, 232, 219, .08);
    border-radius: 8px;
    object-fit: cover;
    background: #151214;
}

.comofunciona .cf-rv-tx { min-width: 0; }

.comofunciona .cf-rv-tx strong {
    display: block;
    overflow: hidden;
    color: var(--text-strong);
    font: 700 13.5px/1.2 "Sora", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comofunciona .cf-rv-tx small { display: block; margin-top: .15rem; color: var(--muted); font-size: 11px; line-height: 1.35; }
.comofunciona .cf-rv-tx .cf-rv-aviso { color: #e1a17e; font-weight: 750; }
.comofunciona .cf-rv-tx i { display: block; margin-top: .25rem; color: var(--muted); font-size: 10.5px; font-style: normal; font-weight: 750; }

/* Las dos salidas de una canción que no está en el repertorio, debajo de
   la fila completa: en la pantalla de verdad van al lado, pero acá el
   teléfono es más angosto. */
.comofunciona .cf-rv-acciones { grid-column: 2; display: flex; gap: .4rem; }

.comofunciona .cf-rv-boton {
    display: inline-grid;
    place-items: center;
    min-height: 2rem;
    padding: 0 .7rem;
    border: 1px solid rgba(241, 232, 219, .13);
    border-radius: .8rem;
    background: rgba(18, 16, 17, .9);
    color: #d7c8b8;
    font: 800 .72rem "Manrope", sans-serif;
    white-space: nowrap;
}

.comofunciona .cf-rv-boton.is-si { border-color: rgba(103, 170, 143, .5); background: rgba(78, 137, 111, .2); color: #c8eadb; }
.comofunciona .cf-rv-boton.is-no { border-color: rgba(215, 138, 99, .38); color: #eaa57f; }

/* La fila aceptada: los botones se van y en su lugar, con su mismo alto,
   queda la nota salvia. Así el teléfono no cambia de tamaño en cada vuelta
   (Jaime, 31 oct 2026: «debe ser del mismo tamaño siempre»). Dicen «Entra»
   y «Suena esta noche», igual que la pantalla de verdad desde ese día. */
.comofunciona .cf-rv-nota { display: none; align-items: center; gap: .35rem; min-height: 2rem; color: #8fbfa6; font: 800 .72rem "Manrope", sans-serif; }
.comofunciona .cf-rv-nota svg { width: .75rem; height: .75rem; }
.comofunciona .cf-rv-fila.is-aceptada .cf-rv-nota { display: inline-flex; }
.comofunciona .cf-rv-fila.is-aceptada .cf-rv-boton { display: none; }
/* En cero se esconde sin soltar su lugar: el renglón no se achica. */
.comofunciona .cf-rv-cuenta.is-cero { visibility: hidden; }
.comofunciona .cf-rv-fila { transition: border-color .3s ease, background-color .3s ease; }

/* ===== el recorrido del principio =====
   La noche de punta a punta: antes, durante y después, con las seis partes
   de la página. Al entrar, la línea se prende de izquierda a derecha y van
   apareciendo las paradas (escena «recorrido» de `vitrinas.js`). Sin el
   guion se ve entero y prendido: lo apagado depende de `data-vt-listo`. */

.comofunciona .cf-recorrido {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 44rem);
    margin: clamp(2.2rem, 5vw, 3.2rem) auto 0;
    text-align: left;
}

.comofunciona .cf-tramo { --t: 0; display: grid; align-content: start; gap: .6rem; min-width: 0; }
.comofunciona .cf-tramo:nth-child(2) { --t: 1; }
.comofunciona .cf-tramo:nth-child(3) { --t: 2; }

.comofunciona .cf-tramo-nom {
    color: #d78a63;
    font: 800 .68rem "Manrope", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* La línea: cada tramo tiene su pedazo, con un nudo al comienzo. */
.comofunciona .cf-tramo-linea { position: relative; height: 2px; margin: .35rem 0 .55rem; }

.comofunciona .cf-tramo-linea::before,
.comofunciona .cf-tramo-linea::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(241, 232, 219, .12);
}

.comofunciona .cf-tramo-linea::after { background: #d78a63; transform-origin: left; }

/* La noche no termina en seco: el último pedazo se desvanece (solo la
   línea; un `mask` en el tramo entero se llevaba también el nudo). */
.comofunciona .cf-tramo:last-child .cf-tramo-linea::before,
.comofunciona .cf-tramo:last-child .cf-tramo-linea::after { mask: linear-gradient(90deg, #000 55%, transparent); }

.comofunciona .cf-tramo-linea i {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: #d78a63;
    box-shadow: 0 0 0 4px var(--bg), 0 0 14px rgba(215, 138, 99, .6);
    translate: 0 -50%;
}

.comofunciona .cf-parada {
    --k: 0;
    justify-self: start;
    color: var(--text-strong);
    font: 700 clamp(.88rem, 1.8vw, 1.02rem)/1.25 "Manrope", sans-serif;
    text-wrap: balance;
}

.comofunciona .cf-parada:nth-of-type(2) { --k: 1; }
.comofunciona .cf-parada:nth-of-type(3) { --k: 2; }
.comofunciona .cf-parada:hover { color: #efb489; }
.comofunciona .cf-parada:focus-visible { outline: 2px solid #efb489; outline-offset: 3px; border-radius: 4px; }

/* Apagado mientras espera entrar en pantalla, y el orden en que se prende.
   Las transiciones van solo en `.is-prendido`: si también estuvieran en el
   apagado, apagarse tomaría el mismo tiempo y nunca se vería apagado. */
.comofunciona .cf-recorrido.is-prendido .cf-tramo-nom { transition: opacity .35s ease calc(var(--t) * .5s); }
.comofunciona .cf-recorrido.is-prendido .cf-tramo-linea::after { transition: transform .5s linear calc(var(--t) * .5s); }
.comofunciona .cf-recorrido.is-prendido .cf-tramo-linea i { transition: scale .3s ease calc(var(--t) * .5s), opacity .3s ease calc(var(--t) * .5s); }
.comofunciona .cf-recorrido.is-prendido .cf-parada { transition: opacity .4s ease calc(var(--t) * .5s + .2s + var(--k) * .15s), translate .4s ease calc(var(--t) * .5s + .2s + var(--k) * .15s), color .16s ease; }

.comofunciona .cf-recorrido[data-vt-listo]:not(.is-prendido) .cf-tramo-nom { opacity: .35; }
.comofunciona .cf-recorrido[data-vt-listo]:not(.is-prendido) .cf-tramo-linea::after { transform: scaleX(0); }
.comofunciona .cf-recorrido[data-vt-listo]:not(.is-prendido) .cf-tramo-linea i { opacity: .3; scale: .5; }
.comofunciona .cf-recorrido[data-vt-listo]:not(.is-prendido) .cf-parada { opacity: 0; translate: 0 .4rem; }

@media (prefers-reduced-motion: reduce) {
    .comofunciona .cf-recorrido *,
    .comofunciona .cf-recorrido *::after { transition: none !important; }
}

/* ===== Instagram, al pie ===== */

.comofunciona .cf-instagram {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.6rem;
    color: var(--accent-strong);
    font: 800 1rem "Sora", sans-serif;
    text-decoration: none;
}

.comofunciona .cf-instagram svg { width: 1.3rem; height: 1.3rem; }
.comofunciona .cf-instagram:hover { color: var(--text-strong); }

/* ===== el cierre ===== */

.comofunciona .cf-cierre { text-align: center; }

.comofunciona .cf-cierre h2 {
    max-width: 20ch;
    margin: .6rem auto 0;
    color: var(--text-strong);
    font: 800 clamp(1.7rem, 3.6vw, 2.6rem)/1.12 "Sora", sans-serif;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.comofunciona .cf-remate {
    margin: 1rem 0 0;
    color: var(--accent-strong);
    font: 800 clamp(1.3rem, 2.6vw, 1.8rem)/1.2 "Sora", sans-serif;
    letter-spacing: -.03em;
}

.comofunciona .cf-acc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
    margin-top: 1.8rem;
}