/* Páginas interiores con la misma cara que la portada: cabecera oscura, secciones claras, tarjetas y botones comunes.
   Todas las páginas (shows, vídeos, peticiones, historias, club…) usan estas piezas para parecer una sola web. */
.sp {
    --sp-bg: var(--site-theme-bg, #f7f4ee);
    --sp-surface: var(--site-theme-surface, #fff);
    --sp-ink: var(--site-theme-text, #201a16);
    --sp-muted: var(--site-theme-muted, #6b6459);
    --sp-accent: #d72b63;
    --sp-gold: #f2bd73;
    --sp-gold-text: var(--site-theme-gold-text, #8a5a12);
    --sp-line: var(--site-theme-border, rgba(31, 26, 18, 0.14));
    background: radial-gradient(circle at top, var(--site-theme-bg-soft, #fff8ee) 0%, var(--sp-bg) 55%);
    color: var(--sp-ink);
    font-family: inherit;
}

/* Cabecera de página (la misma que la portada, más baja) */
.sp-hero {
    position: relative;
    overflow: hidden;
    padding: 72px 20px 64px;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(31, 26, 18, 0.96) 0%, rgba(31, 26, 18, 0.82) 55%, rgba(31, 26, 18, 0.35) 100%),
        var(--sp-hero-image, linear-gradient(135deg, #2a1d12, #5a2d3a 60%, #8c2146)) center right / cover no-repeat;
}
.sp-hero::after { position: absolute; right: 0; bottom: 0; left: 0; height: 8px; content: ""; background: linear-gradient(90deg, #d9235f, #d0a25f, #6f8d64); }
.sp-hero__inner { position: relative; z-index: 1; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); width: min(1120px, 100%); margin: 0 auto; }
.sp-hero--media .sp-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); align-items: center; }
.sp-eyebrow { margin: 0 0 10px; color: var(--sp-gold); font-size: 0.86rem; font-weight: 900; text-transform: uppercase; }
.sp-hero h1 { max-width: 760px; margin: 0 0 14px; color: #fff; font-size: clamp(2rem, 5.2vw, 3.8rem); font-weight: 900; line-height: 1.02; text-transform: uppercase; }
.sp-hero__lead { max-width: 640px; margin: 0 0 22px; color: rgba(255, 255, 255, 0.9); font-size: 1.08rem; line-height: 1.55; }
.sp-hero__media img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45); }
.sp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; }
.sp-facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sp-facts li { min-width: 140px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 12px; background: rgba(255, 255, 255, 0.07); }
.sp-facts strong { display: block; color: var(--sp-gold); font-size: 0.78rem; text-transform: uppercase; }
.sp-facts span { color: #fff; font-weight: 700; }

/* Botones */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; border: 2px solid transparent; border-radius: 999px; font-weight: 900; text-decoration: none; cursor: pointer; transition: transform 0.15s; }
.sp-btn:hover { transform: translateY(-1px); }
.sp-btn--primary { background: var(--sp-accent); border-color: var(--sp-accent); color: #fff; }
.sp-btn--primary:hover { color: #fff; }
.sp-btn--ghost { border-color: rgba(255, 255, 255, 0.6); background: transparent; color: #fff; }
.sp-btn--ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.sp-btn--dark { border-color: var(--sp-ink); background: transparent; color: var(--sp-ink); }
.sp-btn--dark:hover { background: var(--sp-ink); color: var(--sp-surface); }

/* Secciones */
.sp-section { padding: 56px 20px; }
.sp-section--alt { background: var(--sp-surface); }
.sp-section--dark { background: #172322; color: #fff; }
.sp-wrap { width: min(1120px, 100%); margin: 0 auto; }
.sp-wrap--narrow { width: min(780px, 100%); }
.sp-kicker { margin: 0 0 6px; color: var(--sp-gold-text); font-size: 0.84rem; font-weight: 900; text-transform: uppercase; }
.sp-section--dark .sp-kicker { color: var(--sp-gold); }
.sp h2.sp-title { margin: 0 0 12px; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 900; line-height: 1.1; color: inherit; }
.sp-lead { margin: 0 0 20px; color: var(--sp-muted); font-size: 1.05rem; line-height: 1.55; }
.sp-section--dark .sp-lead { color: rgba(255, 255, 255, 0.85); }
.sp-prose { font-size: 1.05rem; line-height: 1.7; }
.sp-prose p { margin: 0 0 1.1em; }
.sp-prose h3 { margin: 1.6em 0 0.5em; font-size: 1.3rem; font-weight: 900; }
.sp-prose a { color: var(--sp-accent); text-decoration: underline; text-underline-offset: 3px; }
.sp-prose img { max-width: 100%; height: auto; border-radius: 14px; }

/* Tarjetas */
.sp-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin: 0; padding: 0; list-style: none; }
.sp-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--sp-line); border-radius: 18px; background: var(--sp-surface); box-shadow: 0 10px 28px rgba(31, 26, 18, 0.08); color: inherit; text-decoration: none; }
.sp-card h3 { margin: 0; font-size: 1.2rem; font-weight: 900; line-height: 1.2; }
.sp-card p { margin: 0; color: var(--sp-muted); line-height: 1.5; }
a.sp-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(31, 26, 18, 0.14); }
.sp-card__meta { color: var(--sp-muted); font-size: 0.85rem; }
.sp-card__cta { margin-top: auto; padding-top: 6px; font-weight: 900; color: var(--sp-accent); }
.sp-steps { counter-reset: paso; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0; padding: 0; list-style: none; }
.sp-steps li { counter-increment: paso; padding: 22px; border: 1px solid var(--sp-line); border-radius: 18px; background: var(--sp-surface); }
.sp-steps li::before { content: counter(paso); display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 10px; border-radius: 50%; background: var(--sp-accent); color: #fff; font-weight: 900; }
.sp-steps strong { display: block; margin-bottom: 4px; font-size: 1.1rem; }
.sp-steps span { color: var(--sp-muted); }

/* Formularios */
.sp-form { display: grid; gap: 14px; padding: 24px; border: 1px solid var(--sp-line); border-radius: 18px; background: var(--sp-surface); box-shadow: 0 10px 28px rgba(31, 26, 18, 0.08); }
.sp-form label { display: grid; gap: 6px; font-weight: 800; }
.sp-form input[type="text"], .sp-form input[type="email"], .sp-form textarea, .sp-form select { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--sp-line); border-radius: 12px; background: var(--site-theme-bg-soft, #fffaf2); color: inherit; font: inherit; font-weight: 500; }
.sp-form textarea { min-height: 130px; resize: vertical; }
.sp-form .sp-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; }
.sp-form .sp-hint { margin: 0; color: var(--sp-muted); font-size: 0.88rem; font-weight: 500; }

/* Vídeo */
.sp-video-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sp-video { overflow: hidden; border: 1px solid var(--sp-line); border-radius: 18px; background: var(--sp-surface); }
.sp-video .youtube-lite, .sp-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #111; object-fit: cover; }
.sp-video__body { padding: 14px 18px 18px; }
.sp-video__body h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 900; }
.sp-video__body p { margin: 0; color: var(--sp-muted); font-size: 0.92rem; }

@media (max-width: 760px) {
    .sp-hero { padding: 48px 16px 48px; }
    .sp-hero--media .sp-hero__inner { grid-template-columns: 1fr; }
    .sp-hero__media { max-width: 260px; }
    .sp-section { padding: 40px 16px; }
}

.sp-prose .text-danger { color: var(--sp-accent) !important; }
.sp-prose .sp-btn { margin-top: 6px; }

/* Los componentes con variables propias (clips) siguen el tema claro/oscuro de la web */
.sp { --clips-card: var(--sp-surface); --clips-ink: var(--sp-ink); --clips-muted: var(--sp-muted); }
.sp-video--vertical .youtube-lite { aspect-ratio: 9 / 16; max-height: 520px; }
.sp-form input[type="file"] { min-height: 0; padding: 8px; border-style: dashed; }
.sp-form ul { margin: 0; padding-left: 18px; color: #b02a2a; font-weight: 700; font-size: 0.9rem; }
.sp-check { cursor: pointer; }
.sp-check input { width: 22px; height: 22px; margin-top: 2px; flex: none; }

/* El menú es fijo: la cabecera de página sube hasta él y se deja su altura de margen interior */
main.sp { padding-top: 0 !important; }
.sp-hero { padding-top: calc(var(--site-header-height, 115px) + 40px); }
@media (max-width: 760px) { .sp-hero { padding-top: calc(var(--site-header-height, 82px) + 28px); } }
.sp-prose a.sp-btn, .sp-form a.sp-btn { text-decoration: none; }
.sp-prose a.sp-btn--primary { color: #fff; }
.sp-prose a.sp-btn--dark { color: var(--sp-ink); }
.sp-prose a.sp-btn--dark:hover { color: var(--sp-surface); }

/* Los títulos usan la misma tipografía que el resto de la web (no la de los estilos antiguos) */
.sp h1, .sp h2, .sp h3, .sp h4 { font-family: inherit; letter-spacing: 0; }

/* Pasos sobre fondo oscuro: la tarjeta es clara, su texto debe ser oscuro */
.sp-section--dark .sp-steps li { color: var(--sp-ink); background: #fff; }
.sp-section--dark .sp-steps span { color: #5a5248; }

/* Portada del libro: la imagen es la cubierta completa; en la cabecera se enseña solo la portada (mitad derecha) */
.fj-page .sp-hero__media { position: relative; aspect-ratio: 1044 / 1622; max-width: 300px; overflow: hidden; border-radius: 4px; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45); }
.fj-page .sp-hero__media img { position: absolute; top: 0; right: 0; width: auto; max-width: none; height: 100%; border-radius: 0; box-shadow: none; }
.sp-section--dark .sp-card { color: var(--sp-ink); }
.sp-section--dark .sp-card p { color: var(--sp-muted); }