/* La portada, wurlitzer.app (31 oct 2026). La explica `templates/playlists/home.html`.

   Mínima y para vender: una bienvenida que se entiende en segundos —para
   quién es, qué hace, qué apretar— con el video de lanzamiento, y una franja
   corta debajo. Todo lo propio va prefijado `pt-` y acotado bajo `.portada`,
   por las trampas de app.css. */

body.portada-page { background: var(--bg); }

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

body.portada-page .main-shell { padding-top: 0; }

@media (min-width: 900px) {
    body.portada-page { background: transparent; }

    body.portada-page .site-shell::before,
    body.portada-page .site-shell::after { display: block; }
}

/* ===== la bienvenida ===== */

.portada .pt-hero {
    display: grid;
    gap: 2rem;
    padding: clamp(1.8rem, 5vw, 3.8rem) 0 clamp(2.4rem, 5vw, 4rem);
    text-align: center;
}

@media (min-width: 900px) {
    .portada .pt-hero {
        grid-template-columns: 1.1fr .9fr;
        align-items: center;
        column-gap: 3.5rem;
        text-align: left;
    }
}

.portada .pt-hero-tx { min-width: 0; }

.portada .pt-hero h1 {
    max-width: 14ch;
    margin: .8rem auto 0;
    color: var(--text-strong);
    font: 800 clamp(2.2rem, 8vw, 4.2rem)/1.03 "Sora", sans-serif;
    letter-spacing: -.05em;
    text-wrap: balance;
}

.portada .pt-hero p {
    max-width: 38ch;
    margin: 1.1rem auto 0;
    color: var(--muted-strong);
    font-size: clamp(1.02rem, 1.7vw, 1.2rem);
    line-height: 1.55;
    text-wrap: pretty;
}

/* Los botones (30 oct 2026). Eran `.button-primary` y `.button-secondary`:
   un degradado de cobre a rojizo con halo, de plantilla, y dos pesos casi
   iguales; en el celular la letra quedaba en 12 px. Ahora el principal es el
   cobre plano de la hoja de Generar (`.jg-hoja-pie button`), más grande, y
   «Ver cómo funciona» es un enlace: una sola cosa que apretar. */
.portada .pt-acc { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem 1.7rem; margin-top: 2rem; }

.portada .pt-crear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.4rem;
    padding: 0 2rem;
    border-radius: 999px;
    background: #d78a63;
    color: #160e0a;
    font: 800 1.02rem "Manrope", sans-serif;
    transition: background-color 160ms ease;
}

.portada .pt-crear:hover { background: #efb489; color: #160e0a; }

.portada .pt-ver {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.8rem;
    color: var(--text-strong);
    font: 700 1rem "Manrope", sans-serif;
}

.portada .pt-ver svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: #d78a63; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate 160ms ease; }
.portada .pt-ver:hover svg { translate: .2rem 0; }

.portada .pt-crear:focus-visible,
.portada .pt-ver:focus-visible { outline: 2px solid #efb489; outline-offset: 3px; }

@media (max-width: 899px) {
    .portada .pt-acc { flex-direction: column; }
    .portada .pt-crear { width: min(100%, 24rem); }
}

@media (min-width: 900px) {
    .portada .pt-hero h1,
    .portada .pt-hero p { margin-left: 0; }

    .portada .pt-acc { justify-content: flex-start; }
}

/* ===== el video de lanzamiento ===== */

.portada .pt-video { display: grid; justify-items: center; gap: 1rem; min-width: 0; }

.portada .pt-reel {
    position: relative;
    width: min(100%, 300px);
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border: 1px solid rgba(241, 232, 219, .1);
    border-radius: 26px;
    background: #0d0b0c;
    box-shadow: var(--shadow-lg), 0 0 70px rgba(215, 138, 99, .16);
}

.portada .pt-reel video { display: block; width: 100%; height: 100%; object-fit: cover; }

.portada .pt-reel-sonido {
    position: absolute;
    right: .8rem;
    bottom: .8rem;
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    padding: 0;
    border: 1px solid rgba(241, 232, 219, .18);
    border-radius: 50%;
    background: rgba(9, 9, 9, .62);
    color: #f5ece3;
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.portada .pt-reel-sonido svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.portada .pt-reel-sonido .pt-sin { display: none; }
.portada .pt-reel.sin-sonido .pt-reel-sonido .pt-sin { display: block; }
.portada .pt-reel.sin-sonido .pt-reel-sonido .pt-con { display: none; }
.portada .pt-reel-sonido:focus-visible { outline: 2px solid #efb489; outline-offset: 2px; }

/* El sonido aparece recién con el primer play: antes no hay nada que callar. */
.portada .pt-reel-sonido { z-index: 2; opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 200ms; }
.portada .pt-reel.is-iniciado .pt-reel-sonido { opacity: 1; visibility: visible; }

/* El play cubre todo el video: se toca en cualquier parte para partir o
   pausar. El círculo es el cobre plano de «Crear mi espacio»; mientras suena
   se esconde, y vuelve al pasar el mouse. */
.portada .pt-reel-play {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
}

.portada .pt-reel-ic {
    display: grid;
    place-items: center;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 50%;
    background: #d78a63;
    color: #160e0a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    transition: opacity 200ms ease, scale 200ms ease, background-color 160ms ease;
}

.portada .pt-reel-ic svg { width: 1.9rem; height: 1.9rem; fill: currentColor; }
.portada .pt-ic-play { translate: .12rem 0; }
.portada .pt-ic-pausa { display: none; }
.portada .pt-reel.is-sonando .pt-ic-play { display: none; }
.portada .pt-reel.is-sonando .pt-ic-pausa { display: block; }
.portada .pt-reel.is-sonando .pt-reel-ic { opacity: 0; scale: .85; }
.portada .pt-reel.is-sonando .pt-reel-play:focus-visible .pt-reel-ic { opacity: 1; scale: 1; }

/* Solo con mouse: en el celular el hover queda pegado tras el toque. */
@media (hover: hover) {
    .portada .pt-reel-play:hover .pt-reel-ic { background: #efb489; }
    .portada .pt-reel.is-sonando .pt-reel-play:hover .pt-reel-ic { opacity: 1; scale: 1; }
}
.portada .pt-reel-play:focus-visible { outline: 2px solid #efb489; outline-offset: -4px; }

.portada .pt-instagram {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--accent-strong);
    font: 800 .92rem "Sora", sans-serif;
    text-decoration: none;
}

.portada .pt-instagram svg { width: 1.2rem; height: 1.2rem; }
.portada .pt-instagram:hover { color: var(--text-strong); }

/* ===== la franja ===== */

.portada .pt-franja {
    display: grid;
    gap: 1.6rem;
    padding: clamp(2.4rem, 5vw, 3.6rem) 0;
    border-top: 1px solid var(--border-subtle);
}

@media (min-width: 760px) {
    .portada .pt-franja { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
}

.portada .pt-punto { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .9rem; align-items: start; }

.portada .pt-punto-ic {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid rgba(220, 147, 109, .24);
    border-radius: .8rem;
    background: rgba(107, 50, 35, .18);
    color: #d78a63;
}

.portada .pt-punto-ic svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.portada .pt-punto h2 { margin: .15rem 0 0; color: var(--text-strong); font: 800 1.15rem/1.2 "Sora", sans-serif; letter-spacing: -.02em; }
.portada .pt-punto p { margin: .3rem 0 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }

/* ===== los espacios, para el superusuario ===== */

.portada .pt-sec { padding: clamp(2.4rem, 5vw, 3.6rem) 0; border-top: 1px solid var(--border-subtle); }
.portada .pt-sec h2 { margin: .5rem 0 0; color: var(--text-strong); font: 800 clamp(1.6rem, 3.2vw, 2.3rem)/1.1 "Sora", sans-serif; letter-spacing: -.035em; }
.portada .pt-mios { display: grid; gap: .8rem; margin-top: 1.6rem; }

@media (min-width: 760px) {
    .portada .pt-mios { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1080px) {
    .portada .pt-mios { grid-template-columns: repeat(3, 1fr); }
}

.portada .pt-mio {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
    color: inherit;
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.portada .pt-mio:hover,
.portada .pt-mio:focus-visible { transform: translateY(-2px); border-color: var(--line-strong); background: var(--surface-hover); }
.portada .pt-mio .workspace-logo-frame { width: 2.6rem; height: 2.6rem; flex: none; }
.portada .pt-mio-nom { overflow: hidden; color: var(--text-strong); font: 800 1rem/1.2 "Sora", sans-serif; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    .portada * { transition: none !important; }
}