/* ==========================================================================
   Public event pages — themeable skeleton.
   One DOM contract (.pe-*), one CSS variable vocabulary (--c-*). A *palette* is
   the inline set of --c-* vars (from PublicEventThemes); a *theme* is the
   structural/typographic block `.t-{key}` + a hero layout (cover|framed).
   Color NEVER hardcoded in structural rules — always var(--c-*).
   ========================================================================== */

.pe-root {
    /* Fallback palette (overridden by inline vars per event). */
    --c-bg: #0b1326;
    --c-surface: #171f32;
    --c-surface-2: #1e293b;
    --c-text: #dae2fc;
    --c-muted: #bbcabf;
    --c-border: #2d3449;
    --c-primary: #4edea3;
    --c-on-primary: #003824;
    --c-accent: #ffe083;
    --c-font-display: "Manrope", system-ui, sans-serif;
    --c-font-body: "Inter", system-ui, sans-serif;
    --c-radius: 16px;
    --c-uppercase: none;

    background-color: var(--c-bg);
    color: var(--c-text);
    font-family: var(--c-font-body);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    position: relative;
    isolation: isolate;
}

.pe-root * { box-sizing: border-box; }
.pe-root a { color: inherit; text-decoration: none; }
.pe-mono { font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.pe-muted-text { color: var(--c-muted); }

/* ==========================================================================
   Decorative background layer + ambient motion.
   Absolute (not fixed) so it stays contained inside .pe-root — works both on the
   live page and inside the designer's bounded preview. Sits above the solid
   page color but below content; the page body re-covers it past the first
   viewport, so the ambiance reads as a hero backdrop. Honors reduced-motion.
   ========================================================================== */
.pe-bg { position: absolute; top: 0; left: 0; width: 100%; height: 116vh; z-index: 0; overflow: hidden; pointer-events: none; will-change: transform; }
.pe-bg-img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 45%; animation: pe-kenburns 34s ease-in-out infinite; }
.pe-bg-glow {
    position: absolute; inset: -12%;
    background: radial-gradient(42% 42% at 28% 24%, color-mix(in srgb, var(--c-primary) 16%, transparent), transparent 70%);
    mix-blend-mode: screen; animation: pe-drift 22s ease-in-out infinite alternate;
}

@keyframes pe-kenburns {
    0%   { transform: scale(1.05) translate(0, 0); }
    50%  { transform: scale(1.13) translate(-1.5%, -1%); }
    100% { transform: scale(1.05) translate(0, 0); }
}
@keyframes pe-drift {
    from { transform: translate(0, 0); }
    to   { transform: translate(6%, 4%); }
}

/* Entrance: hero content rises + fades in, staggered. */
.pe-rise > * { animation: pe-rise-in .7s cubic-bezier(.2, .7, .2, 1) both; }
.pe-rise > *:nth-child(1) { animation-delay: .04s; }
.pe-rise > *:nth-child(2) { animation-delay: .12s; }
.pe-rise > *:nth-child(3) { animation-delay: .20s; }
.pe-rise > *:nth-child(4) { animation-delay: .28s; }
.pe-rise > *:nth-child(5) { animation-delay: .36s; }
.pe-rise > *:nth-child(6) { animation-delay: .44s; }
@keyframes pe-rise-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* Primary CTA breathes a soft glow in its accent color. */
.pe-hero .pe-btn-primary { animation: pe-cta-pulse 3.4s ease-in-out infinite; }
@keyframes pe-cta-pulse {
    0%, 100% { box-shadow: 0 6px 22px -8px color-mix(in srgb, var(--c-primary) 55%, transparent); }
    50%      { box-shadow: 0 8px 34px -4px color-mix(in srgb, var(--c-primary) 85%, transparent); }
}

/* Reduced motion: keep the page rich and gently alive (glow breathes, fades, static
   neon) but drop what can cause discomfort — parallax, big slides, zoom, flashing.
   Defined once here; see the consolidated block lower down too. */
@keyframes pe-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Smooth-scroll for the "Más info" anchor — scoped to pages that render a public event. */
html:has(.pe-root) { scroll-behavior: smooth; }
.pe-root [id] { scroll-margin-top: 84px; } /* keep headings clear of the fixed nav */

/* Sections rise + fade as they scroll into view (Chromium scroll-driven animations).
   Gated by @supports so browsers without it just show the content normally. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .pe-root main > .pe-section {
            animation: pe-reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 38%;
        }
    }
}
@keyframes pe-reveal {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
}

/* ---- Buttons ---- */
.pe-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--c-font-display); font-weight: 700; font-size: 16px;
    border: none; cursor: pointer; border-radius: calc(var(--c-radius) - 6px);
    padding: 15px 30px; transition: transform .1s ease, opacity .2s ease, box-shadow .2s ease;
    text-transform: var(--c-uppercase);
}
.pe-btn:active { transform: scale(.97); }
.pe-btn:disabled { opacity: .55; cursor: not-allowed; }
.pe-btn-primary { background: var(--c-primary); color: var(--c-on-primary); box-shadow: 0 8px 26px -10px color-mix(in srgb, var(--c-primary) 60%, transparent); }
.pe-btn-primary:hover { opacity: .9; }
.pe-btn-ghost { background: transparent; color: var(--c-text); border: 1px solid var(--c-border); }
.pe-btn-ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pe-btn-sm { padding: 9px 18px; font-size: 14px; }
.pe-btn-block { width: 100%; }

/* ---- Nav ---- */
.pe-nav {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 50;
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 16px;
    transition: padding .25s ease, background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.pe-nav--scrolled {
    padding: 10px 16px;
    background: color-mix(in srgb, var(--c-bg) 82%, transparent);
    backdrop-filter: blur(12px);
    box-shadow: 0 6px 24px -14px rgba(0, 0, 0, .55);
}
.pe-brand { font-family: var(--c-font-display); font-weight: 800; font-size: 20px; color: var(--c-text); letter-spacing: .02em; }

/* ---- Hero (shared) ---- */
/* Content sits above the ambiance layer; the body re-covers it with the solid
   page color so only the hero shows the background. */
.pe-hero { position: relative; z-index: 1; }
.pe-root > main { position: relative; z-index: 1; background: var(--c-bg); }
.pe-root > .pe-footer { position: relative; z-index: 1; }
.pe-hero-inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.pe-kicker { display: inline-block; color: var(--c-primary); font-size: 12px; margin-bottom: 18px; }
.pe-title-xl { font-family: var(--c-font-display); font-weight: 800; font-size: 40px; line-height: 1.08; margin: 0 0 20px; letter-spacing: -.02em; }
.pe-lead { font-size: 18px; line-height: 1.6; color: var(--c-muted); max-width: 640px; margin: 0 0 28px; }

.pe-meta { display: flex; flex-wrap: wrap; gap: 24px; margin: 0 0 28px; }
.pe-meta-item { display: flex; align-items: center; gap: 10px; }
.pe-meta-ic { color: var(--c-primary); display: inline-flex; }
.pe-meta-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); margin: 0; }
.pe-meta-value { font-family: var(--c-font-display); font-weight: 600; font-size: 16px; margin: 0; color: var(--c-text); }
.pe-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Hero — cover (full-bleed dark image) */
.pe-hero--cover { min-height: 92vh; display: flex; align-items: flex-end; padding: 120px 0 72px; overflow: hidden; }
.pe-hero--cover .pe-hero-media { position: absolute; inset: 0; z-index: 0; }
.pe-hero--cover .pe-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.pe-hero--cover .pe-hero-media--empty { background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--c-primary) 22%, transparent), transparent 55%), var(--c-surface); }
.pe-hero--cover .pe-hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--c-bg) 4%, color-mix(in srgb, var(--c-bg) 45%, transparent) 55%, color-mix(in srgb, var(--c-bg) 12%, transparent) 100%); }

/* Hero — framed (light page, image in a frame below text) */
.pe-hero--framed { padding: 128px 0 24px; }
.pe-hero--framed .pe-hero-scrim { display: none; }
.pe-hero-frame { max-width: 1100px; margin: 32px auto 0; padding: 0 16px; }
.pe-hero-frame img { width: 100%; height: 360px; object-fit: cover; border-radius: var(--c-radius); display: block; }

/* Event's real photo on cover themes — its own framed block, never a fake backdrop. */
.pe-media { padding-top: 32px; padding-bottom: 0; }
.pe-media .pe-hero-frame { margin: 0; padding: 0; max-width: none; }

/* ---- Sections ---- */
.pe-section { max-width: 1100px; margin: 0 auto; padding: 64px 16px; }
.pe-section--alt { border-top: 1px solid var(--c-border); }
.pe-h2 { font-family: var(--c-font-display); font-weight: 700; font-size: 26px; margin: 0 0 20px; letter-spacing: -.01em; }
.pe-prose { font-size: 17px; line-height: 1.7; color: var(--c-muted); max-width: 760px; }
.pe-prose p { margin: 0 0 18px; }
.pe-prose p:last-child { margin-bottom: 0; }

.pe-location { display: flex; align-items: flex-start; gap: 12px; }
.pe-location .pe-meta-ic { margin-top: 2px; }

/* ---- Location map (interactive embed) ---- */
.pe-map {
    position: relative;
    margin-top: 24px;
    border-radius: var(--c-radius);
    overflow: hidden;
    border: 1px solid var(--c-border);
    box-shadow: 0 18px 50px -26px rgba(0, 0, 0, .55);
}
.pe-map-frame {
    display: block;
    width: 100%;
    height: clamp(260px, 42vh, 380px);
    border: 0;
}
.pe-map::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-primary) 26%, transparent);
    animation: pe-map-glow 4.5s ease-in-out infinite;
}
@keyframes pe-map-glow { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.pe-map-cta {
    position: absolute;
    right: 14px;
    bottom: 14px;
    box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .5);
}
@media (prefers-reduced-motion: reduce) { .pe-map::after { animation: none; } }

/* ---- Final CTA ---- */
.pe-cta { text-align: center; }
.pe-cta .pe-h2 { margin-bottom: 8px; }
.pe-cta-card { max-width: 520px; margin: 0 auto; padding: 36px 28px; border-radius: var(--c-radius); background: var(--c-surface); border: 1px solid var(--c-border); }
.pe-cta-card .pe-btn { margin-top: 20px; }

/* ---- Mobile fixed CTA ---- */
.pe-mobile-cta {
    position: fixed; bottom: 0; left: 0; width: 100%; padding: 12px 16px; z-index: 50;
    background: color-mix(in srgb, var(--c-bg) 88%, transparent);
    backdrop-filter: blur(16px); border-top: 1px solid var(--c-border);
}

/* ---- Footer ---- */
.pe-footer {
    border-top: 1px solid var(--c-border); padding: 40px 16px 120px; margin-top: 56px;
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.pe-footer-brand { font-family: var(--c-font-display); font-weight: 800; color: var(--c-text); }
.pe-footer small { color: var(--c-muted); font-size: 13px; }

/* ---- Material symbols ---- */
.pe-root .material-symbols-outlined {
    font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal;
    line-height: 1; display: inline-block; vertical-align: middle; font-feature-settings: "liga";
}

/* ==========================================================================
   Theme blocks — only typography / signature touches. Color via palette vars.
   ========================================================================== */

/* Vanguard Nightlife */
.t-vanguard-nightlife { --c-font-display: "Manrope", sans-serif; --c-font-body: "Hanken Grotesk", sans-serif; --c-uppercase: none; }
.t-vanguard-nightlife .pe-cta-card,
.t-vanguard-nightlife .pe-hero-frame img { box-shadow: 0 0 40px color-mix(in srgb, var(--c-primary) 12%, transparent); }
.t-vanguard-nightlife .pe-brand { color: var(--c-primary); }

/* Electronic Night */
.t-electronic-night { --c-font-display: "Manrope", sans-serif; --c-uppercase: uppercase; }
.t-electronic-night .pe-hero--cover { text-align: center; }
.t-electronic-night .pe-hero-inner { display: flex; flex-direction: column; align-items: center; }
.t-electronic-night .pe-meta { justify-content: center; }
.t-electronic-night .pe-actions { justify-content: center; }
.t-electronic-night .pe-title-xl { text-shadow: 0 0 28px color-mix(in srgb, var(--c-primary) 45%, transparent); }
.t-electronic-night .pe-brand { color: var(--c-primary); text-shadow: 0 0 14px color-mix(in srgb, var(--c-primary) 55%, transparent); }

/* Recital */
.t-recital { --c-font-display: "Anton", sans-serif; --c-uppercase: uppercase; --c-radius: 4px; }
.t-recital .pe-title-xl { font-weight: 400; font-size: 56px; letter-spacing: 0; line-height: .98; }
.t-recital .pe-h2 { font-weight: 400; }
.t-recital .pe-brand { color: var(--c-primary); }

/* Celebración Elegante */
.t-celebracion-elegante { --c-font-display: "Playfair Display", serif; --c-font-body: "Inter", sans-serif; --c-radius: 12px; }
.t-celebracion-elegante .pe-hero--framed { text-align: center; }
.t-celebracion-elegante .pe-hero-inner { display: flex; flex-direction: column; align-items: center; }
.t-celebracion-elegante .pe-title-xl { font-weight: 700; letter-spacing: 0; font-size: 46px; }
.t-celebracion-elegante .pe-meta { justify-content: center; }
.t-celebracion-elegante .pe-actions { justify-content: center; }
.t-celebracion-elegante .pe-kicker { letter-spacing: .25em; }
.t-celebracion-elegante .pe-section { text-align: center; }
.t-celebracion-elegante .pe-prose { margin: 0 auto; }

/* Corporativo Premium */
.t-corporativo-premium { --c-font-display: "Manrope", sans-serif; --c-radius: 8px; }
.t-corporativo-premium .pe-title-xl { font-weight: 800; }

/* Corporativo Ultra */
.t-corporativo-ultra { --c-font-display: "Manrope", sans-serif; --c-radius: 6px; }
.t-corporativo-ultra .pe-title-xl { font-weight: 800; }
.t-corporativo-ultra .pe-meta { gap: 40px; }

/* Galería Museum */
.t-galeria-museum { --c-font-display: "Space Grotesk", sans-serif; --c-radius: 2px; }
.t-galeria-museum .pe-title-xl { font-weight: 700; }
.t-galeria-museum .pe-hero-frame img { height: 420px; }

/* Galería Ultra */
.t-galeria-ultra { --c-font-display: "Space Grotesk", sans-serif; --c-radius: 2px; }
.t-galeria-ultra .pe-title-xl { font-weight: 700; font-size: 52px; }
.t-galeria-ultra .pe-section { max-width: 1180px; }

/* ==========================================================================
   Purchase page (one layout, themed by vars)
   ========================================================================== */
.pe-purchase { max-width: 720px; margin: 0 auto; padding: 88px 16px 96px; }
.pe-purchase-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; color: var(--c-muted); }
.pe-purchase h1 { font-family: var(--c-font-display); font-weight: 800; font-size: 30px; margin: 0 0 4px; }
.pe-card { border-radius: var(--c-radius); padding: 24px; margin-bottom: 20px; background: var(--c-surface); border: 1px solid var(--c-border); }
.pe-card-title { font-family: var(--c-font-display); font-weight: 700; font-size: 18px; margin: 0 0 14px; }
.pe-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.pe-field label { font-size: 14px; color: var(--c-muted); }
.pe-field input, .pe-field select {
    width: 100%; padding: 12px 14px; border-radius: 8px;
    background: var(--c-bg); border: 1px solid var(--c-border); color: var(--c-text);
    font-size: 16px; font-family: inherit;
}
.pe-field input:focus, .pe-field select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent); }
.pe-field-error { color: #ff6b6b; font-size: 13px; }
.pe-tier-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--c-border); }
.pe-tier-row:last-child { border-bottom: none; }
.pe-qty { display: flex; align-items: center; gap: 12px; }
.pe-qty button { width: 34px; height: 34px; border-radius: 9999px; background: var(--c-surface-2); color: var(--c-text); border: 1px solid var(--c-border); cursor: pointer; font-size: 18px; line-height: 1; }
.pe-qty button:disabled { opacity: .4; cursor: not-allowed; }
.pe-summary-row { display: flex; justify-content: space-between; padding: 8px 0; color: var(--c-muted); }
.pe-summary-total { display: flex; justify-content: space-between; padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--c-border); font-family: var(--c-font-display); font-weight: 700; font-size: 20px; color: var(--c-text); }
.pe-form-grid { display: grid; grid-template-columns: 1fr; gap: 0 16px; }

/* ---- Responsive ---- */
@media (min-width: 768px) {
    .pe-nav { padding: 18px 48px; }
    .pe-hero-inner, .pe-section, .pe-hero-frame { padding-left: 48px; padding-right: 48px; }
    .pe-title-xl { font-size: 52px; }
    .t-recital .pe-title-xl { font-size: 84px; }
    .t-galeria-ultra .pe-title-xl { font-size: 72px; }
    .t-celebracion-elegante .pe-title-xl { font-size: 60px; }
    .pe-mobile-cta { display: none; }
    .pe-footer { flex-direction: row; justify-content: space-between; text-align: left; padding: 40px 48px; }
    .pe-form-grid { grid-template-columns: 1fr 1fr; }
    .pe-nav--scrolled { padding: 10px 48px; }
}

/* Mobile sticky header: keep the brand title and the CTA from crowding/overlapping.
   The brand shrinks + truncates while the button stays fully visible with clear spacing. */
@media (max-width: 600px) {
    .pe-nav { padding: 14px 14px; gap: 16px; }
    .pe-nav--scrolled { padding: 10px 14px; }
    .pe-brand {
        font-size: 17px;
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Shrink the nav CTA so it stops crowding the title — smaller font + tighter
       padding leaves clear air between brand and button on narrow screens. */
    .pe-nav .pe-btn-sm {
        flex: 0 0 auto;
        padding: 8px 12px;
        font-size: 12px;
        letter-spacing: .01em;
        gap: 5px;
    }
}

/* ==========================================================================
   Attention FX — higher-impact motion (scroll reveal, parallax, animated title,
   countdown, scroll cue, CTA shine, map pin, per-theme signatures).
   Scroll-dependent bits are driven by JS (accessFlowPublicFx) which adds .fx-ready
   / .is-visible; without it (designer preview) everything stays visible.
   ========================================================================== */

/* ---- Scroll reveal (cross-browser via IntersectionObserver) ---- */
.pe-root.fx-ready .pe-reveal {
    opacity: 0;
    transform: translateY(34px);
    filter: blur(6px);
    transition: opacity .7s ease, transform .75s cubic-bezier(.2, .7, .2, 1), filter .7s ease;
    will-change: opacity, transform;
}
.pe-root.fx-ready .pe-reveal.is-visible { opacity: 1; transform: none; filter: none; }

/* ---- Animated title (word-by-word entrance + accent glow breathe) ---- */
.pe-title-anim .pe-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(.55em) rotate(.5deg);
    animation: pe-word-in .6s cubic-bezier(.2, .7, .2, 1) forwards;
    animation-delay: calc(var(--i) * .07s + .15s);
}
@keyframes pe-word-in { to { opacity: 1; transform: none; } }
/* The title opts out of the generic hero rise (words handle entry) and instead breathes. */
.pe-rise > .pe-title-anim {
    animation: pe-title-glow 5s ease-in-out infinite;
    opacity: 1;
    transform: none;
}
@keyframes pe-title-glow {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    50% { filter: drop-shadow(0 2px 16px color-mix(in srgb, var(--c-primary) 38%, transparent)); }
}

/* ---- Countdown ---- */
.pe-countdown { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 28px; }
.t-celebracion-elegante .pe-countdown, .t-electronic-night .pe-countdown { justify-content: center; }
.pe-cd-cell {
    display: flex; flex-direction: column; align-items: center; min-width: 66px;
    padding: 10px 8px; border-radius: calc(var(--c-radius) - 6px);
    background: color-mix(in srgb, var(--c-surface) 55%, transparent);
    border: 1px solid var(--c-border); backdrop-filter: blur(6px);
}
.pe-cd-num { font-family: var(--c-font-display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--c-text); font-variant-numeric: tabular-nums; }
.pe-cd-lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); margin-top: 5px; }

/* ---- Scroll cue (animated chevron) ---- */
.pe-scroll-cue {
    position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3;
    width: 42px; height: 42px; border-radius: 9999px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--c-bg) 35%, transparent);
    border: 1px solid var(--c-border); color: var(--c-text);
    backdrop-filter: blur(6px);
    animation: pe-bounce 1.9s ease-in-out infinite;
    transition: opacity .3s ease;
}
.pe-scroll-cue .material-symbols-outlined { font-size: 24px; }
.pe-scroll-cue:hover { border-color: var(--c-primary); color: var(--c-primary); }
.fx-scrolled .pe-scroll-cue { opacity: 0; pointer-events: none; }
@keyframes pe-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

/* ---- Primary CTA: periodic shine + hover lift ---- */
.pe-btn-primary { position: relative; overflow: hidden; transition: transform .12s ease, opacity .2s ease, box-shadow .2s ease; }
.pe-btn-primary:hover { transform: translateY(-2px); }
.pe-btn-primary:active { transform: translateY(0) scale(.98); }
.pe-hero .pe-btn-primary::after, .pe-cta .pe-btn-primary::after {
    content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
    background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: skewX(-18deg); animation: pe-shine 5s ease-in-out infinite;
}
@keyframes pe-shine { 0% { left: -130%; } 55%, 100% { left: 150%; } }

/* ---- Map pin (drops + pulses when its section reveals) ---- */
.pe-map-pin {
    position: absolute; left: 50%; top: 50%; margin-top: -46px;
    transform: translateX(-50%) translateY(-12px);
    font-size: 46px; color: var(--c-primary); opacity: 0; pointer-events: none; z-index: 2;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
}
.pe-reveal.is-visible .pe-map-pin { animation: pe-pin-drop .7s cubic-bezier(.2, .85, .3, 1) .25s forwards; }
@keyframes pe-pin-drop {
    0% { opacity: 0; transform: translateX(-50%) translateY(-64px); }
    60% { opacity: 1; }
    100% { opacity: 1; transform: translateX(-50%) translateY(-12px); }
}
.pe-map-pin::before {
    content: ""; position: absolute; left: 50%; bottom: 7px; width: 10px; height: 10px;
    transform: translateX(-50%); border-radius: 9999px;
    background: color-mix(in srgb, var(--c-primary) 60%, transparent);
}
.pe-reveal.is-visible .pe-map-pin::before { animation: pe-pin-pulse 1.9s ease-out 1.1s infinite; }
@keyframes pe-pin-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-primary) 50%, transparent); }
    100% { box-shadow: 0 0 0 20px transparent; }
}

/* ==========================================================================
   Per-theme signature motion
   ========================================================================== */
/* Electronic Night — neon flicker + CRT scanlines */
.t-electronic-night .pe-brand { animation: pe-neon-flicker 4s steps(1) infinite; }
@keyframes pe-neon-flicker {
    0%, 18%, 22%, 60%, 64%, 100% { opacity: 1; text-shadow: 0 0 12px color-mix(in srgb, var(--c-primary) 70%, transparent); }
    20%, 62% { opacity: .55; text-shadow: none; }
}
.t-electronic-night .pe-hero--cover::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .35;
    background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .14) 2px 4px);
}

/* Vanguard Nightlife — soft accent halo behind the title */
.t-vanguard-nightlife .pe-title-anim { text-shadow: 0 0 30px color-mix(in srgb, var(--c-primary) 22%, transparent); }

/* Recital — slow stage light sweep across the hero (no strobe) */
.t-recital .pe-hero--cover::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(75deg, transparent 38%, color-mix(in srgb, var(--c-primary) 16%, transparent) 50%, transparent 62%);
    background-size: 250% 100%; animation: pe-stage-sweep 7s ease-in-out infinite;
}
@keyframes pe-stage-sweep { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } }

/* Celebración Elegante — gentle gold twinkle */
.t-celebracion-elegante .pe-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .6;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--c-accent) 90%, transparent) 0 1.5px, transparent 2px) 18% 30%/auto,
        radial-gradient(circle, color-mix(in srgb, var(--c-accent) 90%, transparent) 0 1.5px, transparent 2px) 72% 22%/auto,
        radial-gradient(circle, color-mix(in srgb, var(--c-accent) 90%, transparent) 0 1.5px, transparent 2px) 60% 64%/auto,
        radial-gradient(circle, color-mix(in srgb, var(--c-accent) 90%, transparent) 0 1.5px, transparent 2px) 30% 70%/auto;
    background-repeat: no-repeat;
    animation: pe-twinkle 3.2s ease-in-out infinite;
}
@keyframes pe-twinkle { 0%, 100% { opacity: .15; } 50% { opacity: .7; } }

/* Corporativo — accent line draws in under the kicker */
.t-corporativo-premium .pe-kicker, .t-corporativo-ultra .pe-kicker { position: relative; }
.t-corporativo-premium .pe-kicker::after, .t-corporativo-ultra .pe-kicker::after {
    content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
    background: var(--c-primary); animation: pe-line-draw 1.1s ease-out .5s forwards;
}
@keyframes pe-line-draw { to { width: 56px; } }

/* Galería — slow pan on the framed image */
.t-galeria-museum .pe-hero-frame img, .t-galeria-ultra .pe-hero-frame img {
    animation: pe-slow-pan 20s ease-in-out infinite alternate;
}
@keyframes pe-slow-pan { 0% { transform: scale(1.06) translateX(-1.5%); } 100% { transform: scale(1.06) translateX(1.5%); } }

/* ---- Reduced motion: keep it rich and gently alive (glow breathes, fades, static
   neon) — drop only what can cause discomfort: zoom, parallax, big slides, flashing. ---- */
@media (prefers-reduced-motion: reduce) {
    /* Off: zoom (ken-burns), drift, chevron bounce, CTA light-sweep, pin drop/pulse,
       neon flicker, stage sweep, gallery pan. (Slow glow breathes are kept — not vestibular.) */
    .pe-bg-img, .pe-bg-glow,
    .pe-scroll-cue,
    .pe-hero .pe-btn-primary::after, .pe-cta .pe-btn-primary::after,
    .pe-reveal.is-visible .pe-map-pin, .pe-reveal.is-visible .pe-map-pin::before,
    .t-electronic-night .pe-brand,
    .t-recital .pe-hero--cover::after,
    .t-galeria-museum .pe-hero-frame img, .t-galeria-ultra .pe-hero-frame img {
        animation: none !important;
    }
    /* Entrance becomes a plain fade (no slide); the title keeps its gentle glow. */
    .pe-rise > * { animation: pe-fade-in .6s ease both !important; }
    .pe-rise > .pe-title-anim { animation: pe-title-glow 5s ease-in-out infinite !important; opacity: 1 !important; }
    .pe-title-anim .pe-word { transform: none !important; }
    .pe-root.fx-ready .pe-reveal { transform: none !important; filter: none !important; }
    .pe-map-pin { opacity: 1 !important; transform: translateX(-50%) translateY(-12px) !important; }
}