/*
 * La Perla — las páginas de sede (/lounge, /disco) y la licorera.
 *
 * Van encima de hub.css, que se carga tal cual: mismos tokens, misma
 * cabecera, mismos botones, tiques, tablero y pie que el portal. Aquí solo
 * vive lo que el portal no tiene (el selector de sedes, las secciones de una
 * sede) con prefijo .sp- para no chocar con los nombres genéricos del portal.
 * Nada de lo que está aquí se carga en el portal.
 */

/* Lo que tenga [hidden] se va, aunque su clase diga display:grid. */
[hidden] { display: none !important; }

.sp :focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 6px; }
.sp ::selection { background: rgba(217, 181, 102, 0.35); color: var(--ink); }

/* Acento de sede: el mismo punto de color del portal, llevado a bordes. */
.sp--lounge { --sp-accent: var(--lounge); }
.sp--disco { --sp-accent: var(--disco); }
.sp--tienda { --sp-accent: var(--gold-2); }

/* ── Navegar entre páginas sin pestañear ─────────────────────────────────
   Las tres páginas se abren con una transición cruzada y la cabecera se
   queda quieta; Chrome además las precarga al señalar el enlace
   (speculationrules en sitio-head). */
@view-transition { navigation: auto; }
.sp .top { view-transition-name: sp-top; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.26s; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ── Cabecera: el selector de sedes ─────────────────────────────────────── */
.sp .top { gap: 18px; padding-top: calc(14px + env(safe-area-inset-top)); }
.sp-switch {
    display: flex; align-items: center; gap: 2px; margin-left: auto;
    padding: 3px; border-radius: 999px; border: 1px solid var(--line);
    background: rgba(6, 21, 18, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.sp-switch a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 999px;
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2);
    transition: background 0.2s, color 0.2s;
}
.sp-switch a:hover { color: var(--ink); }
.sp-switch a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.sp-switch a[aria-current="page"] .dot { outline: 2px solid var(--bg); }
.sp-top__cart {
    position: relative; display: inline-grid; place-items: center;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(217, 181, 102, 0.55); color: var(--gold-2);
    transition: background 0.2s, color 0.2s;
}
.sp-top__cart:hover { background: var(--gold); color: var(--gold-ink); }
.sp-top__cart svg { width: 20px; height: 20px; }

/* ── Portada de sede (usa .hero del portal) ─────────────────────────────── */
.sp-hero__body { display: grid; gap: 0; }
.sp-hero__body .hero__title { max-width: 16ch; }
.sp-hero__body .hero__sub { margin-bottom: 4px; }
.sp-hero__body .hero__facts { margin-top: 16px; }
.sp-h1 { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; margin: 0; }
.sp-ribbon {
    justify-self: start; margin-bottom: 14px; padding: 6px 14px; border-radius: 999px;
    border: 1px solid rgba(217, 181, 102, 0.5); background: rgba(217, 181, 102, 0.1);
    color: var(--gold-2); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
/* El video va dentro de .hero__art: hereda su filtro y su degradado encima. */
.sp-hero__video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 1s var(--ease);
}
.sp-hero__video.is-playing { opacity: 1; }

/* ── Secciones de la sede ───────────────────────────────────────────────── */
.sp-section { padding: 72px 0; border-top: 1px solid var(--line); }
.sp-section__head { display: flex; align-items: end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.sp-lede { max-width: 62ch; margin-top: 14px; color: var(--ink-2); font-size: 1.02rem; line-height: 1.65; }
.sp-more { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: var(--gold-2); }
.sp-more i { font-style: normal; transition: transform 0.2s var(--ease); }
.sp-more:hover i { transform: translateX(3px); }
.sp-anchor { position: relative; top: -90px; display: block; height: 0; }

/* La agenda de la sede reusa los tiques del portal; debajo, la otra sede. */
.sp-agenda { border-top: 0; padding-top: 48px; }
.sp-bridge {
    margin-top: 14px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
    padding: 16px 20px; border-radius: 16px; border: 1px dashed var(--line);
    color: var(--ink-2); font-size: 0.9rem; transition: border-color 0.25s, background 0.25s;
}
.sp-bridge:hover { border-color: rgba(243, 237, 224, 0.35); background: rgba(243, 237, 224, 0.03); }
.sp-bridge b { display: block; color: var(--ink); font-family: var(--serif); font-weight: 400; font-size: 1.15rem; line-height: 1.15; }
.sp-bridge i { font-style: normal; color: var(--gold-2); }
.sp-empty-title { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); line-height: 1.1; }
.sp-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* El lugar: la frase de la sede y sus tres pilares. */
.sp-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; counter-reset: pillar; }
.sp-pillar {
    padding: 22px 22px 24px; border-radius: 18px; border: 1px solid var(--line);
    border-top: 3px solid var(--sp-accent, var(--gold));
    background: linear-gradient(160deg, rgba(243, 237, 224, 0.05), transparent 60%);
    display: grid; gap: 8px; align-content: start;
}
.sp-pillar::before { counter-increment: pillar; content: '0' counter(pillar); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--gold-2); }
.sp-pillar h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.05; font-variation-settings: 'opsz' 96, 'SOFT' 40; }
.sp-pillar p { color: var(--ink-2); font-size: 0.93rem; line-height: 1.55; }

/* Momentos: fotos que subió la sede, de lado, sin fotos de relleno. */
.sp-strip {
    display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 28vw, 340px); gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 10px; scroll-padding-inline: var(--gutter);
    scrollbar-width: thin; scrollbar-color: rgba(243, 237, 224, 0.2) transparent;
}
.sp-shot {
    position: relative; margin: 0; scroll-snap-align: start; aspect-ratio: 4 / 5;
    border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2);
}
.sp-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.sp-shot:hover img { transform: scale(1.04); }
.sp-shot figcaption {
    position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px;
    background: linear-gradient(180deg, transparent, rgba(6, 21, 18, 0.92));
    display: grid; gap: 2px;
}
.sp-shot figcaption small { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-2); }
.sp-shot figcaption b { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; line-height: 1.1; }

/* Visítanos: horario, dónde queda y cómo escribirnos. */
.sp-visit { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; }
.sp-card {
    padding: 22px; border-radius: 18px; border: 1px solid var(--line);
    background: linear-gradient(160deg, rgba(243, 237, 224, 0.05), transparent 60%);
    display: grid; gap: 12px; align-content: start;
}
.sp-card h3 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.sp-card p { color: var(--ink-2); line-height: 1.55; }
.sp-card strong { color: var(--ink); font-weight: 600; }
.sp-today { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; color: var(--ink); }
.sp-hours { display: grid; gap: 2px; font-size: 0.9rem; color: var(--ink-2); }
.sp-hours div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dotted var(--line); }
.sp-hours div:last-child { border-bottom: 0; }
.sp-hours dt { color: var(--ink-3); }
.sp-hours dd { text-align: right; }
.sp-card .btn { justify-self: start; }
/* Las redes (partials.social-links, el mismo de la carta). */
.sp .gp-social { display: flex; gap: 8px; }
.sp .gp-social a {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid var(--line); color: var(--ink-2); transition: border-color 0.2s, color 0.2s;
}
.sp .gp-social a:hover { border-color: var(--gold); color: var(--gold-2); }
.sp .gp-social svg { width: 18px; height: 18px; }

/* Antes de llegar: los atajos de la sede (carta, música, licorera). */
.sp-quick { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Perla Access: la puerta entre las dos sedes. */
.sp-access {
    margin-top: 14px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px;
    padding: 18px 20px; border-radius: 18px; border: 1px dashed rgba(217, 181, 102, 0.5);
    background: rgba(217, 181, 102, 0.05); color: var(--ink-2); font-size: 0.92rem;
}
.sp-access b { color: var(--ink); font-weight: 600; }
.sp-access small { grid-column: 2; font-size: 0.78rem; color: var(--ink-3); }
.sp-access__seal {
    grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid var(--gold); color: var(--gold-2); font-family: var(--serif); font-size: 1.1rem;
}

/* Pie: el del portal, con la vuelta al portal adelante. */
.sp .foot__home { color: var(--ink); font-weight: 600; }

/* Flotantes con el borde seguro del iPhone. La barra oculta tampoco recibe
   foco (hub.css solo la hace transparente). */
.sp .wa { bottom: calc(18px + env(safe-area-inset-bottom)); }
.sp .sticky {
    bottom: calc(14px + env(safe-area-inset-bottom)); visibility: hidden;
    transition: transform 0.35s var(--ease), opacity 0.35s, visibility 0s linear 0.35s;
}
.sp .sticky.is-on { visibility: visible; transition-delay: 0s; }
.sp .sticky > div { flex: 1; min-width: 0; }
.sp .sticky small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Con dos filas, el tablero no deja una columna vacía. */
@media (min-width: 861px) { .sp .board { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }

/* Solo para lectores de pantalla. */
.sp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ══ Tablet ═══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    .sp-visit { grid-template-columns: 1fr 1fr; }
    .sp-visit .sp-card:first-child { grid-column: 1 / -1; }
}

/* ══ Móvil ════════════════════════════════════════════════════════════════
   Como en el portal: todo lo secundario se desliza de lado, un solo botón
   grande, y el selector de sedes siempre a un pulgar. */
@media (max-width: 720px) {
    .sp .top { gap: 10px; padding-top: calc(10px + env(safe-area-inset-top)); }
    .sp .top__cta { display: none; }
    .sp-switch { padding: 3px; }
    .sp-switch a { min-height: 40px; padding: 8px 11px; gap: 6px; font-size: 0.76rem; }
    .sp-switch .dot { width: 7px; height: 7px; }
    .sp-top__cart { display: none; }

    .sp-hero__body .hero__title { max-width: none; }
    .sp-hero__body .hero__facts { margin-top: 10px; }

    .sp-section { padding: 48px 0; }
    .sp-agenda { padding-top: 32px; }
    .sp-section__head { margin-bottom: 16px; }
    .sp-lede { font-size: 0.96rem; }

    .sp-pillars {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
        overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin: 22px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 4px; scroll-padding-inline: var(--gutter);
    }
    .sp-pillars::-webkit-scrollbar { display: none; }
    .sp-pillar { scroll-snap-align: start; padding: 18px; }
    .sp-pillar h3 { font-size: 1.3rem; }

    .sp-strip { grid-auto-columns: 72%; scrollbar-width: none; }
    .sp-strip::-webkit-scrollbar { display: none; }

    .sp-visit { grid-template-columns: 1fr; }
    .sp-card { padding: 18px; }
    .sp-card .btn { justify-self: stretch; }
    .sp-quick { flex-wrap: nowrap; overflow-x: auto; margin: 16px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 4px; scrollbar-width: none; }
    .sp-quick::-webkit-scrollbar { display: none; }
    .sp-quick .btn { flex: none; }

    .sp-bridge { grid-template-columns: auto 1fr; padding: 14px 16px; }
    .sp-bridge i { display: none; }

    .sp .wa { bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
    .sp-switch a { padding: 8px 9px; gap: 5px; }
    .sp .top__brand img { height: 30px; }
}