/* ============================================================
   Evengo · Social event public page — Luma/Evently-style shell.
   Este archivo aplica SOLO al path $displayMode !== 'corporate'.

   Layering (back → front):
     z 0: .evg-social-bg        → banner media (image/video/iframe) blurreado
     z 1: .evg-social-overlay   → gradient tintado con primary_color + noise
     z 2: .evg-social-container → contenido (topbar, hero, sections, sticky CTA)

   Mobile: shell respeta el diseño existente — el container toma
   100% viewport bajo 768px. El bg + overlay siguen aplicando.
   ============================================================ */

/* ===== Tokens (el primary_color lo inyecta el blade inline) ===== */
.evg-social {
    --evg-brand: #ff6b35;
    --evg-brand-rgb: 255, 107, 53;
    --evg-bg-base: #0a0a0f;
    --evg-surface: rgba(255, 255, 255, 0.07);
    --evg-surface-hover: rgba(255, 255, 255, 0.11);
    --evg-border: rgba(255, 255, 255, 0.15);
    --evg-border-hover: rgba(255, 255, 255, 0.24);
    --evg-text: rgba(255, 255, 255, 0.95);
    --evg-text-secondary: rgba(255, 255, 255, 0.62);
    --evg-text-tertiary: rgba(255, 255, 255, 0.45);
    /* Bg-base permanente con wash brand más pronunciado abajo (estilo Luma).
       Capas: brand glow top-left + brand glow bottom-right + linear fade
       dark → brand-tinted al pie + base negra. */
    background:
        linear-gradient(180deg,
            transparent 0%,
            transparent 45%,
            rgba(var(--evg-brand-rgb), 0.16) 78%,
            rgba(var(--evg-brand-rgb), 0.26) 100%),
        radial-gradient(ellipse 90% 60% at 20% 15%,
            rgba(var(--evg-brand-rgb), 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 80% 65% at 80% 85%,
            rgba(var(--evg-brand-rgb), 0.20) 0%, transparent 60%),
        var(--evg-bg-base);
    background-attachment: fixed;
    color: var(--evg-text);
    min-height: 100vh;
    position: relative;
    /* Padding-bottom global = altura del sticky CTA (.evg-mobile-bar) + safe-area iOS.
       Antes solo .evg-social-sponsors tenía padding-bottom enorme, lo cual protegía SOLO
       a sponsors. Si el user scrolleaba y paraba en location/FAQ/trust, el sticky tapaba
       el último contenido visible (ej: el bottom del mapa). Ahora cualquier sección queda
       visible cuando el user para — el sticky CTA flota encima del padding, no del
       contenido.

       El sticky CTA en desktop social mide ~95px (28px padding + ~67px contenido: tag
       10.5px + price 20px + fee-note 11.5px + button 44px). En mobile mide ~80px
       (24px padding + ~56px contenido). Para que el último contenido (mapa, FAQ)
       respire por encima del bar dejamos ~70px de aire visible. */
    padding-bottom: calc(220px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 640px) {
    .evg-social {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }
}

/* Mata el #f8fafc del body + main wrapper de guest.blade.php.
   Defense-in-depth: override en html/body/main para que ningún padre
   filtre gris claro a través de los overlays semi-transparentes. */
html:has(.evg-social),
body:has(.evg-social),
body:has(.evg-social) .guest-main {
    background: #0a0a0f !important;
}

/* Capa pintora: fixed full-viewport bajo todo el contenido. Pinta la base
   dark + glows brand + fade vertical hacia el color del evento. Evita que
   el bg del padre (guest-main, body, etc.) filtre por overscroll, esquinas
   o áreas no cubiertas por .evg-social-bg/.evg-social-overlay. */
.evg-social::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            transparent 0%,
            transparent 45%,
            rgba(var(--evg-brand-rgb), 0.18) 78%,
            rgba(var(--evg-brand-rgb), 0.32) 100%),
        radial-gradient(ellipse 90% 60% at 20% 15%,
            rgba(var(--evg-brand-rgb), 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 80% 65% at 80% 85%,
            rgba(var(--evg-brand-rgb), 0.20) 0%, transparent 60%),
        var(--evg-bg-base, #0a0a0f);
}

/* ===== Banner BG layer =====
   Ocupa solo los primeros ~85vh del documento — absoluto, NO fixed, así
   al scrollear el video queda atrás y se ve solo el gradient del body.
   La mask-image fade interno está definida en porcentaje del contenedor
   para evitar drifting con vh al cambiar altura. */
.evg-social-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 85vh;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg,
        #000 0%,
        #000 70%,
        rgba(0, 0, 0, 0.5) 88%,
        transparent 100%);
    mask-image: linear-gradient(180deg,
        #000 0%,
        #000 70%,
        rgba(0, 0, 0, 0.5) 88%,
        transparent 100%);
}

.evg-social-bg__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Blur más suave — ahora se ve movimiento, siluetas y paleta sin perder
       el tono ambient. Junto con la mask-image del contenedor, el video solo
       "vive" en los primeros ~80vh. */
    filter: blur(8px) saturate(140%) brightness(0.92);
    transform: scale(1.04);
    will-change: transform;
}

/* Iframe (YouTube / Vimeo / Drive) — needs aspect-ratio covering trick */
.evg-social-bg__iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.04);
    width: 100%;
    height: 56.25vw;           /* 100vw * 9/16 */
    min-height: 100%;
    min-width: 177.78vh;       /* 100vh * 16/9 */
    border: 0;
    filter: blur(8px) saturate(140%) brightness(0.9);
    pointer-events: none;
}

/* Fallback gradient (cuando no hay media) */
.evg-social-bg__fallback {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 30% 30%,
            rgba(var(--evg-brand-rgb), 0.45), transparent 60%),
        radial-gradient(ellipse 60% 60% at 70% 70%,
            rgba(var(--evg-brand-rgb), 0.28), transparent 60%),
        linear-gradient(135deg, #000 0%, #0a0a0f 50%, #000 100%);
    animation: evgSocialDrift 18s ease-in-out infinite alternate;
}

@keyframes evgSocialDrift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-2%, 1%) scale(1.02); }
    100% { transform: translate(2%, -1%) scale(1); }
}

/* ===== Ambient overlay (tint + legibility + noise) ===== */
.evg-social-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 1200px 800px at 25% 15%,
            rgba(var(--evg-brand-rgb), 0.14) 0%,
            transparent 55%),
        radial-gradient(ellipse 900px 600px at 75% 75%,
            rgba(var(--evg-brand-rgb), 0.08) 0%,
            transparent 60%),
        /* Overlay más suave arriba (deja respirar el video) y más denso
           abajo (donde vive el contenido — hero + secciones). */
        linear-gradient(180deg,
            rgba(10, 10, 15, 0.35) 0%,
            rgba(10, 10, 15, 0.6) 40%,
            rgba(10, 10, 15, 0.82) 100%);
}

.evg-social-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.022) 1px, transparent 0);
    background-size: 28px 28px;
    opacity: 0.5;
}

/* ===== Container ===== */
.evg-social-container {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px 120px;
}

@media (max-width: 767px) {
    .evg-social-container {
        padding: 0 0 100px;
    }
}

/* Reduce blur cost en mobile low-end */
@media (max-width: 767px) {
    .evg-social-bg__media,
    .evg-social-bg__iframe {
        filter: blur(7px) saturate(140%) brightness(0.92);
    }
    /* Mobile: contenedor más corto en vh (hero ocupa proporcionalmente más). */
    .evg-social-bg { height: 70vh; }
}

/* Respeta prefers-reduced-motion: detiene animaciones de fallback y video-as-bg */
@media (prefers-reduced-motion: reduce) {
    .evg-social-bg__fallback { animation: none; }
    .evg-social-bg__iframe,
    .evg-social-bg__media { filter: blur(10px) saturate(115%) brightness(0.85); }
}

/* ============================================================
   HERO SOCIAL — DESKTOP ONLY
   Mobile mantiene el hero legacy (.evg-hero) intacto. Commit #2
   del refactor 2026-04-24.
   ============================================================ */

/* Hero legacy + content legacy + mobile-info legacy + headers legacy
   SIEMPRE ocultos en social mode (todos los breakpoints). Antes algunos
   estaban dentro de @media min-width:768px y en mobile causaban
   duplicación grave: título, poster, sponsors, countdown, article
   completos + back button + logo cortado se renderizaban al pie/topbar. */
.evg-social .evg-hero { display: none !important; }
.evg-social .evg-event-header--desktop { display: none !important; }
.evg-social .evg-event-header-mobile { display: none !important; }
.evg-social .evg-content { display: none !important; }
.evg-social .evg-mobile-event-info { display: none !important; }

/* Hero social: visible en todos los breakpoints. Mobile = 1-col columnar
   (poster arriba, info abajo). Desktop = 2-col (poster izq, info der). */
.evg-social-hero {
    display: block;
    max-width: 860px;
    margin: 0 auto;
    padding: 18px 16px 8px;
    position: relative;
    z-index: 2;
}

.evg-social-hero__grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
}

/* Desktop ≥ 768px: 2-col con poster fijo a la izquierda */
@media (min-width: 768px) {
    .evg-social-hero {
        padding: 28px 20px 12px;
    }
    .evg-social-hero__grid {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 32px;
        align-items: start;
    }
}

/* POSTER ------------------------------------------------- */
.evg-social-hero__poster {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #2a0a0a 0%, #4a1a1a 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    position: relative;
}
.evg-social-hero__poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.evg-social-hero__poster-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background:
        radial-gradient(ellipse 60% 60% at 50% 40%,
            rgba(var(--evg-brand-rgb), 0.35), transparent 70%),
        linear-gradient(135deg, #1a0808, #0f0612);
    color: rgba(255, 255, 255, 0.88);
    font-family: 'Inter Tight', -apple-system, sans-serif;
}
.evg-social-hero__poster-placeholder-name {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-align: center;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
    max-width: 240px;
}

/* INFO --------------------------------------------------- */
.evg-social-hero__info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.evg-social-hero__kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--evg-brand, #ff6b35);
}
.evg-social-hero__kicker--live {
    padding: 3px 10px;
    background: rgba(var(--evg-brand-rgb), 0.14);
    border: 1px solid rgba(var(--evg-brand-rgb), 0.3);
    border-radius: 999px;
    display: inline-flex;
    width: fit-content;
    letter-spacing: 0.04em;
    text-transform: none;
    font-size: 12px;
    font-weight: 600;
}

.evg-social-hero__title {
    font-family: 'Inter Tight', -apple-system, sans-serif;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.03;
    color: rgba(255, 255, 255, 0.98);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
    margin: 0;
}

.evg-social-hero__tagline {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

.evg-social-hero__presented {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.62);
    margin: 0;
}
.evg-social-hero__presented strong {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
}
.evg-social-hero__org-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
    transition: border-color 0.15s;
}
.evg-social-hero__org-link:hover {
    border-bottom-color: rgba(255, 255, 255, 0.5);
}

/* META ROWS ---------------------------------------------- */
.evg-social-hero__meta-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.evg-social-hero__meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.evg-social-hero__date-badge,
.evg-social-hero__icon-square {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.evg-social-hero__date-badge {
    flex-direction: column;
    gap: 1px;
}
.evg-social-hero__date-badge-month {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--evg-brand, #ff6b35);
    text-transform: uppercase;
}
.evg-social-hero__date-badge-day {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.95);
    font-variant-numeric: tabular-nums;
}

.evg-social-hero__icon-square {
    color: rgba(255, 255, 255, 0.62);
}

.evg-social-hero__meta-text {
    line-height: 1.35;
    min-width: 0;
    flex: 1;
}
.evg-social-hero__meta-primary {
    font-size: 14.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
}
.evg-social-hero__meta-secondary {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 2px;
}

/* MOBILE HERO TUNING ------------------------------------- */
/* Mobile: 1-col stack, poster max 280px centrado, title más chico,
   meta-items compactos. El hero no debería ocupar más de ~85vh. */
@media (max-width: 767px) {
    .evg-social-hero {
        padding: 14px 16px 4px;
    }
    .evg-social-hero__grid {
        gap: 14px;
    }
    .evg-social-hero__poster {
        max-width: 280px;
        margin: 0 auto;
    }
    .evg-social-hero__poster-placeholder-name {
        font-size: 22px;
        max-width: 200px;
    }
    .evg-social-hero__info {
        gap: 11px;
        text-align: left;
    }
    .evg-social-hero__title {
        font-size: 30px;
        letter-spacing: -0.022em;
        line-height: 1.06;
    }
    .evg-social-hero__tagline {
        font-size: 14px;
    }
    .evg-social-hero__meta-rows {
        gap: 8px;
        margin-top: 2px;
    }
    .evg-social-hero__date-badge,
    .evg-social-hero__icon-square {
        width: 46px;
        height: 46px;
        border-radius: 9px;
    }
    .evg-social-hero__date-badge-day {
        font-size: 19px;
    }
    .evg-social-hero__date-badge-month {
        font-size: 9.5px;
    }
    .evg-social-hero__meta-primary {
        font-size: 13.5px;
    }
    .evg-social-hero__meta-secondary {
        font-size: 12px;
    }
}

/* ============================================================
   TOPBAR SOCIAL — sticky, backdrop-blur. Commit #3 del refactor
   2026-04-24. Reemplaza al .evg-event-header--desktop legacy
   (que queda oculto vía el display:none de arriba).
   Mobile se mantiene con .evg-event-header-mobile legacy.
   ============================================================ */

/* Default: topbar oculto (mobile usa el header legacy móvil) */
.evg-social-topbar { display: none; }

@media (min-width: 768px) {
    .evg-social-topbar {
        display: block;
        position: sticky;
        top: 0;
        z-index: 50;
        backdrop-filter: blur(24px) saturate(160%);
        -webkit-backdrop-filter: blur(24px) saturate(160%);
        background: rgba(10, 10, 15, 0.6);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    /* Si hay banner "Modo de Prueba" activo, bajamos el sticky para que no lo tape */
    body.has-test-mode-banner .evg-social-topbar { top: 44px; }
}

.evg-social-topbar__inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Brand (Evengo logo o logo de la org en white-label) */
.evg-social-topbar__brand { display: flex; align-items: center; }

.evg-social-topbar__logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--evg-text, rgba(255, 255, 255, 0.95));
    font-family: 'Inter Tight', -apple-system, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 16px;
}

.evg-social-topbar__logo-mark {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--evg-brand, #ff6b35), #ef4444);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.evg-social-topbar__orglogo {
    max-height: 28px;
    width: auto;
    display: block;
    object-fit: contain;
}

.evg-social-topbar__orgname {
    font-family: 'Inter Tight', -apple-system, sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.95);
}

/* Actions */
.evg-social-topbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.evg-social-topbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.evg-social-topbar__btn:hover {
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.95);
}

.evg-social-topbar__btn svg { flex-shrink: 0; }

/* En pantallas muy angostas dentro del rango desktop, solo mostramos el icono
   para no apretar demasiado (sin perder la acción). */
@media (min-width: 768px) and (max-width: 860px) {
    .evg-social-topbar__btn span { display: none; }
    .evg-social-topbar__btn { padding: 7px 9px; }
}

/* ============================================================
   SECCIONES SOCIALES — bloques single-column 860px que se van
   intercalando a medida que el refactor avanza. Commit #4 del
   refactor 2026-04-24: "Sobre el evento".
   ============================================================ */

.evg-social-section {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto;
    padding: 22px 16px 0;
}

@media (min-width: 768px) {
    .evg-social-section { padding: 24px 20px 0; }
    /* La primera sección después del hero no necesita padding-top extra */
    .evg-social-hero + .evg-social-section { padding-top: 28px; }
}

/* Mobile: la primera social section viene justo después del .evg-social-hero
   (1-col stack: poster 280px + info). Aire moderado al arrancar. */
@media (max-width: 767px) {
    .evg-social-section:first-of-type { padding-top: 22px; }
    .evg-social-section + .evg-social-section { padding-top: 20px; }
}

.evg-social-section__title {
    font-family: 'Inter Tight', -apple-system, sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 12px;
}

@media (max-width: 767px) {
    .evg-social-section__title { font-size: 16px; margin-bottom: 10px; }
}

.evg-social-section__body { color: rgba(255, 255, 255, 0.72); }

/* Prose: estilos para el HTML que viene de Summernote / rich text */
.evg-social-prose {
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
}
.evg-social-prose p { margin: 0; }
.evg-social-prose p + p,
.evg-social-prose p + ul,
.evg-social-prose p + ol,
.evg-social-prose ul + p,
.evg-social-prose ol + p { margin-top: 10px; }
.evg-social-prose strong,
.evg-social-prose b {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}
.evg-social-prose em,
.evg-social-prose i { color: rgba(255, 255, 255, 0.85); }
.evg-social-prose a {
    color: var(--evg-brand, #ff6b35);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--evg-brand-rgb, 255, 107, 53), 0.35);
    transition: border-color 0.15s;
}
.evg-social-prose a:hover { border-bottom-color: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.75); }
.evg-social-prose ul,
.evg-social-prose ol {
    margin: 10px 0;
    padding-left: 20px;
}
.evg-social-prose li + li { margin-top: 4px; }
.evg-social-prose h1,
.evg-social-prose h2,
.evg-social-prose h3 {
    font-family: 'Inter Tight', -apple-system, sans-serif;
    color: rgba(255, 255, 255, 0.95);
    margin: 16px 0 8px;
    font-weight: 600;
    letter-spacing: -0.015em;
}
.evg-social-prose h1 { font-size: 20px; }
.evg-social-prose h2 { font-size: 17px; }
.evg-social-prose h3 { font-size: 15px; }
.evg-social-prose blockquote {
    margin: 12px 0;
    padding: 8px 14px;
    border-left: 2px solid rgba(var(--evg-brand-rgb, 255, 107, 53), 0.45);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.85);
}
.evg-social-prose img {
    max-width: 100%;
    border-radius: 10px;
    margin: 12px 0;
}

/* Oculta el accordion legacy "Acerca del evento" del grid legacy cuando
   estamos en layout social — ya está cubierto por .evg-social-about. */
.evg-social .evg-content > .evg-description { display: none !important; }

/* Oculta la lista pública legacy .evg-tiers — reemplazada por
   .evg-social-tickets del commit #5 (cards glassy oscuras). */
.evg-social .evg-content > .evg-tiers { display: none !important; }

/* Mobile + desktop social: ocultar subsecciones legacy que ahora tienen
   equivalente social (evitamos duplicación visual al scrollear). */
.evg-social .evg-content > .evg-quick-info,
.evg-social .evg-content > .evg-details { display: none !important; }

/* Desktop social: el .evg-content (columna izquierda del grid legacy) ya no
   tiene nada útil que mostrar — sus 4 secciones visibles (title, quick-info,
   description, tiers) se migraron al layout social. Queda como un bloque
   blanco vacío que rompe la foto. Lo ocultamos y colapsamos el grid a 1-col
   para que el sidebar (wizard legacy) quede centrado hasta que commit #8
   lo reemplace por sticky-cta. */
@media (min-width: 768px) {
    .evg-social .evg-content { display: none !important; }
    .evg-social .evg-grid {
        grid-template-columns: minmax(0, 420px) !important;
        justify-content: center !important;
        max-width: 860px !important;
        margin: 0 auto !important;
    }
    /* El background del wrapper principal puede ser blanco en el tema
       default — fuerza transparente para que se vea el dark social. */
    .evg-social .evg-main,
    .evg-social .evg-container { background: transparent !important; }

    /* Ocultar las side-blocks blancas del sidebar legacy ("Pago protegido por
       Evengo", "Compartir este evento") — las reemplaza la trust bar social
       (commit #7) y el botón Compartir del topbar. El wizard checkout card
       principal queda visible hasta que commit #8 lo migre al sticky-cta. */
    .evg-social .evg-sidebar-blocks { display: none !important; }
}

/* ============================================================
   TICKETS SOCIALES — Cards glassy oscuras con qty selector inline.
   Commit #5 del refactor 2026-04-24. Reemplaza la .evg-tiers legacy
   (card blanca) y convive con el wizard legacy de la derecha mientras
   migramos el checkout completo.
   ============================================================ */

.evg-social-tickets {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.evg-social-ticket {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}

.evg-social-ticket:hover {
    background: rgba(255, 255, 255, 0.065);
    border-color: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.3);
}

.evg-social-ticket.is-selected {
    background: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.1);
    border-color: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.4);
}

/* Cards disabled (sold_out / scheduled / ended): se ven apagadas */
.evg-social-ticket--disabled {
    opacity: 0.55;
    background: rgba(255, 255, 255, 0.025);
    grid-template-columns: 1fr auto;
}
.evg-social-ticket--disabled:hover {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.09);
}

/* Info (left) */
.evg-social-ticket__info { min-width: 0; }

.evg-social-ticket__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.evg-social-ticket__name {
    font-family: 'Inter Tight', -apple-system, sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.evg-social-ticket__pill {
    display: inline-flex;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 4px;
    line-height: 1.5;
}
.evg-social-ticket__pill--available {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
}
.evg-social-ticket__pill--lowstock {
    background: rgba(251, 191, 36, 0.16);
    color: #fcd34d;
}
.evg-social-ticket__pill--soldout,
.evg-social-ticket__pill--muted {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
}

.evg-social-ticket__desc {
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.5);
    margin: 4px 0 0;
}

/* Quantity selector (middle) */
.evg-social-ticket__qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.evg-social-ticket__qty-btn {
    width: 34px;
    height: 34px;
    border: 0;
    padding: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color 0.1s, color 0.1s;
}
.evg-social-ticket__qty-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 1);
}
.evg-social-ticket__qty-btn:disabled {
    color: rgba(255, 255, 255, 0.22);
    cursor: not-allowed;
}

.evg-social-ticket__qty-value {
    min-width: 30px;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.95);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0 6px;
}

/* Price (right) */
.evg-social-ticket__price {
    text-align: right;
    min-width: 92px;
}
.evg-social-ticket__price-value {
    font-family: 'Inter Tight', -apple-system, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.95);
    font-variant-numeric: tabular-nums;
}
.evg-social-ticket__price-fee {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 3px;
    line-height: 1.2;
}

/* Mobile: compacta qty abajo del info + price */
@media (max-width: 600px) {
    .evg-social-ticket {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "info price"
            "qty  qty";
        gap: 12px;
    }
    .evg-social-ticket--disabled {
        grid-template-columns: 1fr auto;
        grid-template-areas: "info price";
    }
    .evg-social-ticket__info { grid-area: info; }
    .evg-social-ticket__price { grid-area: price; }
    .evg-social-ticket__qty {
        grid-area: qty;
        justify-self: start;
    }
}

/* ============================================================
   LOCATION SOCIAL — card glassy con meta + Google Maps embed.
   Commit #6 del refactor 2026-04-24.
   ============================================================ */

.evg-social-location {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    overflow: hidden;
}

.evg-social-location__meta {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
}

.evg-social-location__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.12);
    border: 1px solid rgba(var(--evg-brand-rgb, 255, 107, 53), 0.2);
    color: var(--evg-brand, #ff6b35);
    display: grid;
    place-items: center;
}

.evg-social-location__text {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
    padding-top: 2px;
}

.evg-social-location__venue {
    font-size: 14.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
}

.evg-social-location__address {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 3px;
}

.evg-social-location__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.evg-social-location__cta:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.35);
    color: rgba(255, 255, 255, 0.95);
}

/* Mapa embed — Google Maps iframe */
.evg-social-location__map {
    position: relative;
    height: 200px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(135deg, #1e293b, #0f172a);
}
.evg-social-location__map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    /* El mapa de Google tiene fondo claro — aplicamos un filter sutil para
       que se integre al tema dark sin perder legibilidad. */
    filter: invert(0.92) hue-rotate(180deg) saturate(0.85) brightness(1.05);
}

@media (max-width: 600px) {
    /* Mobile: layout compacto. Icon + texto en una fila; CTA abajo full-width.
       El icon de 40px en columnas estrechas comía horizontal y forzaba que
       "Teatro Pedro de la Barra" wrappeara a 2-4 líneas. */
    .evg-social-location__meta {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 14px;
    }
    .evg-social-location__icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }
    .evg-social-location__icon svg {
        width: 15px;
        height: 15px;
    }
    .evg-social-location__text { padding-top: 0; }
    .evg-social-location__venue { font-size: 14px; }
    .evg-social-location__address { font-size: 12px; }
    .evg-social-location__cta {
        flex-basis: 100%;
        justify-content: center;
        margin-left: 0;
        margin-top: 4px;
        padding: 8px 12px;
    }
    .evg-social-location__map { height: 180px; }
}

/* ============================================================
   TRUST BAR SOCIAL — escudo + copy + métodos de pago. Commit #7
   del refactor 2026-04-24. Reemplaza la card blanca legacy.
   ============================================================ */

.evg-social-trust {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
}

.evg-social-trust__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
    display: grid;
    place-items: center;
}

.evg-social-trust__copy {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.evg-social-trust__title {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
}

.evg-social-trust__subtitle {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 2px;
}

.evg-social-trust__methods {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Base método — todos limitados por altura y desaturados para armonía */
.evg-social-trust__method {
    display: block;
    height: 16px;
    width: auto;
    opacity: 0.78;
    transition: opacity 0.15s;
}
.evg-social-trust__method:hover { opacity: 1; }

/* Para mastercard y mach que son SVG con color propio: los convertimos a
   blanco monocromo para consistencia con el resto. El visa-white y
   webpay-white ya son blancos nativos, no necesitan filter. */
img.evg-social-trust__method[alt="Mastercard"],
img.evg-social-trust__method[alt="Mach"] {
    filter: brightness(0) invert(1);
}

/* Mobile: trust bar apila el bloque de métodos abajo para no apretarlos */
@media (max-width: 600px) {
    .evg-social-trust {
        flex-wrap: wrap;
        gap: 10px 14px;
    }
    .evg-social-trust__methods {
        margin-left: 0;
        padding-left: 46px;    /* alineado con la copia bajo el icono */
        width: 100%;
        gap: 8px;
    }
    .evg-social-trust__method { height: 14px; }
}

/* ============================================================
   FOOTER SOCIAL — "Organizado con Evengo" minimal, al fondo del
   single-column. Commit #8. Oculta el .guest-footer legacy.
   ============================================================ */

.evg-social-footer {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    /* margin-bottom grande para que el sticky-cta no tape el footer */
    margin: 80px auto 140px;
    padding: 32px 24px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.evg-social-footer__row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.evg-social-footer__nav {
    display: flex;
    align-items: center;
    gap: 22px;
}

.evg-social-footer__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.evg-social-footer__mark img {
    height: 22px;
    width: auto;
    display: block;
}
.evg-social-footer__mark:hover { opacity: 1; }

.evg-social-footer__link {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: color 0.15s;
}
.evg-social-footer__link:hover { color: rgba(255, 255, 255, 0.95); }

.evg-social-footer__socials {
    display: flex;
    align-items: center;
    gap: 18px;
}

.evg-social-footer__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: rgba(255, 255, 255, 0.50);
    transition: color 0.15s, transform 0.15s;
}
.evg-social-footer__icon:hover {
    color: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
}

.evg-social-footer__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--evg-brand, #ff6b35);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: opacity 0.15s;
}
.evg-social-footer__cta:hover { opacity: 0.78; }
.evg-social-footer__cta svg { opacity: 0.85; }

@media (max-width: 767px) {
    .evg-social-footer {
        margin: 56px auto 110px;
        padding: 24px 18px 20px;
        gap: 22px;
    }
    .evg-social-footer__row {
        flex-direction: column;
        gap: 18px;
    }
    .evg-social-footer__nav { gap: 18px; }
    .evg-social-footer__link { font-size: 13.5px; }
}

/* Oculta el footer legacy en el layout social (era la franja blanca al
   final con "Powered by Evengo" en estilo claro). */
.evg-social ~ .guest-footer,
body:has(.evg-social) .guest-footer { display: none !important; }

/* ============================================================
   STICKY CTA BOTTOM — reutiliza el .evg-mobile-bar existente que ya
   tiene el flow Alpine conectado (openDrawer, totalQuantity, grandTotal,
   botón dinámico "Comprar/Continuar/Completar datos/Pagar"). En layout
   social lo mostramos también en desktop y lo restilizamos al tema dark
   del mockup v3. Commit #8 del refactor 2026-04-24.
   ============================================================ */

/* Desktop social: mostrar el sticky bar + ocultar wizard sidebar legacy */
@media (min-width: 1025px) {
    .evg-social .evg-mobile-bar {
        display: block !important;
        background: rgba(10, 10, 15, 0.82) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(24px) saturate(160%);
        -webkit-backdrop-filter: blur(24px) saturate(160%);
        padding: 14px 20px;
        z-index: 90;
    }
    .evg-social .evg-mobile-bar-content,
    .evg-social .evg-mobile-bar-inner {
        max-width: 860px;
        margin: 0 auto;
    }

    /* Header + progress + footer del drawer (ocultos por default en desktop
       legacy) vuelven a aparecer cuando social */
    .evg-social .evg-drawer-header,
    .evg-social .evg-drawer-progress,
    .evg-social .evg-drawer-footer {
        display: flex !important;
    }

    /* El grid colapsado no debe reservar espacio para el sidebar-drawer */
    .evg-social .evg-grid {
        grid-template-columns: 1fr !important;
        max-width: 860px !important;
    }

    /* Padding bottom del .evg-main: era 120px para que el sticky bar no tape
       el contenido legacy del .evg-content. Ahora .evg-content está oculto
       en social mode (ver hides arriba), así que solo necesitamos el aire
       que ya provee el último partial social (.evg-social-sponsors con
       padding-bottom 90px en mobile / 140px en desktop). */
    .evg-social .evg-main { padding-bottom: 0 !important; }
}

/* ============================================================
   <dialog> NATIVO — reemplaza el aside+backdrop custom desde 2026-04-24.
   Focus-trap, ESC, ARIA role=dialog, focus restore e inert background
   vienen built-in por el browser. showModal() lo pone en top-layer
   (sin z-index wars) y ::backdrop dibuja el overlay oscuro nativo.

   Aplica en todos los viewports cuando social — mismo comportamiento
   bottom-sheet en desktop y mobile.
   ============================================================ */

.evg-social .evg-sidebar-dialog {
    /* Reset de los defaults del <dialog> (padding 1em, border solid, etc.) */
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    overflow: visible;

    /* Bottom-sheet: altura fija estándar (Luma/Stripe pattern). Evita el
       "salto" de altura al cambiar de step. Content scrollea internamente
       si excede gracias al flex:1 + overflow-y:auto en .evg-checkout-card. */
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    height: 90vh;
    max-height: 92vh;
}

/* Cuando está abierto — superficie premium del modal.
   Gradient sutil arriba + highlight border-top crean sensación de
   "luz cayendo" sobre el panel. Shadow dramática lo despega del backdrop. */
.evg-social .evg-sidebar-dialog[open] {
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse 120% 200px at 50% 0%,
            rgba(var(--evg-brand-rgb, 255, 107, 53), 0.08) 0%,
            transparent 100%),
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.035) 0%,
            rgba(255, 255, 255, 0) 160px),
        #0B1020;
    color: rgba(255, 255, 255, 0.95);
    border-radius: 24px 24px 0 0;
    box-shadow:
        0 -40px 100px rgba(0, 0, 0, 0.7),
        0 -2px 0 rgba(var(--evg-brand-rgb, 255, 107, 53), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
    animation: evgDialogSlideUp 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Cerrado — display:none es el default del <dialog> sin [open] */
.evg-social .evg-sidebar-dialog:not([open]) { display: none; }

@keyframes evgDialogSlideUp {
    from { transform: translateY(100%); opacity: 0.5; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Backdrop nativo — denso y blurreado para aislar el modal del fondo */
.evg-social .evg-sidebar-dialog::backdrop {
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    animation: evgDialogBackdropFade 0.35s ease;
}
@keyframes evgDialogBackdropFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Desktop: bottom-sheet centrado 560px */
@media (min-width: 1025px) {
    .evg-social .evg-sidebar-dialog {
        max-width: 560px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .evg-social .evg-sidebar-dialog[open],
    .evg-social .evg-sidebar-dialog::backdrop {
        animation: none !important;
    }
}

/* El trust strip del mobile-bar ya no tiene sentido en social — el bloque
   de Pago protegido lo cubre el partial _social-trust. Ocultamos. */
.evg-social .evg-mobile-bar .evg-trust-strip { display: none !important; }

/* ============================================================
   DRAWER DARK THEME — cuando el user abre el wizard desde el sticky-cta,
   el contenido (form buyer, confirmación, tickets) debe pintarse dark
   para no volver al theme blanco legacy. El bloque @media (max-width:
   1024px) del blade legacy ya hacía esto para mobile; acá lo replicamos
   para cualquier viewport cuando estamos en .evg-social.
   ============================================================ */

.evg-social .evg-sidebar {
    --evg-drawer-bg: #0F1421;
    color: rgba(255, 255, 255, 0.95);
}
.evg-social .evg-sidebar .evg-checkout-card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    color: #fff;
    padding: 0 18px 24px !important;
    margin: 0 !important;
}
/* Header interno del checkout redundante con el header del drawer */
.evg-social .evg-sidebar .evg-checkout-header,
.evg-social .evg-sidebar .evg-progress { display: none !important; }

/* Form: labels estilo premium uppercase con letter-spacing */
.evg-social .evg-sidebar .evg-form-label,
.evg-social .evg-sidebar label {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase;
    line-height: 1.3;
}
.evg-social .evg-sidebar .evg-required {
    color: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.8) !important;
    margin-left: 2px;
}

.evg-social .evg-sidebar .evg-form-input,
.evg-social .evg-sidebar .evg-corp-form-input,
.evg-social .evg-sidebar input[type="text"],
.evg-social .evg-sidebar input[type="email"],
.evg-social .evg-sidebar input[type="tel"],
.evg-social .evg-sidebar input[type="number"],
.evg-social .evg-sidebar select,
.evg-social .evg-sidebar textarea {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border-radius: 10px !important;
    transition: border-color 0.18s, background-color 0.18s, box-shadow 0.18s;
    font-family: inherit;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.evg-social .evg-sidebar .evg-form-input:focus,
.evg-social .evg-sidebar .evg-corp-form-input:focus,
.evg-social .evg-sidebar input:focus,
.evg-social .evg-sidebar select:focus,
.evg-social .evg-sidebar textarea:focus {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.5) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(var(--evg-brand-rgb, 255, 107, 53), 0.12) !important;
}
.evg-social .evg-sidebar input::placeholder,
.evg-social .evg-sidebar textarea::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Error state de inputs — border rojo coral sutil (no rojo puro) */
.evg-social .evg-sidebar .evg-input-error,
.evg-social .evg-sidebar input.evg-input-error,
.evg-social .evg-sidebar .evg-form-input.evg-input-error {
    border-color: rgba(252, 165, 165, 0.55) !important;
    background: rgba(239, 68, 68, 0.04) !important;
}

/* Mensaje de error: coral suave + icono ! en círculo sutil.
   Strategy: default display:none (NO depende de Alpine x-show), :not(:empty)
   activa display flex. Esto evita la race condition entre Alpine removiendo
   style inline y nuestras reglas dependientes de :empty — el span aparece
   instantáneo apenas Alpine inserta texto vía x-text, sin parpadeos ni
   "bolitas rojas sin texto" cuando está vacío. !important defensivo para
   ganar a la base .evg-error-text { display:block } global. */
.evg-social .evg-sidebar .evg-error-text {
    display: none !important;
    align-items: center;
    gap: 6px;
    color: #fca5a5 !important;
    font-size: 12.5px !important;
    font-weight: 500;
    letter-spacing: -0.005em;
    margin-top: 6px !important;
    line-height: 1.35;
}
.evg-social .evg-sidebar .evg-error-text:not(:empty) {
    display: inline-flex !important;
}
.evg-social .evg-sidebar .evg-error-text:not(:empty)::before {
    content: '!';
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    background: rgba(252, 165, 165, 0.20);
    border: 1px solid rgba(252, 165, 165, 0.4);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
    font-family: 'Inter Tight', sans-serif;
    color: #fca5a5;
}

/* Input con error: border rojo + glow sutil para que se note de inmediato. */
.evg-social .evg-sidebar .evg-form-input.evg-input-error,
.evg-social .evg-sidebar input.evg-input-error,
.evg-social .evg-sidebar select.evg-input-error,
.evg-social .evg-sidebar textarea.evg-input-error {
    border-color: rgba(248, 113, 113, 0.7) !important;
    background: rgba(239, 68, 68, 0.06) !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12) !important;
}

/* Form-section: NO queremos box dentro de box. Que fluya con el modal. */
.evg-social .evg-sidebar .evg-form-section {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Cards internas (tickets, summary) — sí son cards reales, mantener styling */
.evg-social .evg-sidebar .evg-tier-card,
.evg-social .evg-sidebar .evg-ticket-row,
.evg-social .evg-sidebar .evg-summary-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.95) !important;
}
.evg-social .evg-sidebar .evg-tier-card h3,
.evg-social .evg-sidebar .evg-tier-name,
.evg-social .evg-sidebar .evg-tier-price,
.evg-social .evg-sidebar .evg-summary-card h3,
.evg-social .evg-sidebar .evg-summary-card h4 {
    color: rgba(255, 255, 255, 0.95) !important;
}
.evg-social .evg-sidebar .evg-tier-card .evg-tier-description,
.evg-social .evg-sidebar .evg-summary-card p,
.evg-social .evg-sidebar .evg-summary-card small {
    color: rgba(255, 255, 255, 0.62) !important;
}

/* Botones primary (Continuar/Pagar) — gradient + glow shadow + inset
   highlight para feel premium real. */
.evg-social .evg-sidebar .evg-btn-primary,
.evg-social .evg-sidebar .evg-btn {
    border-radius: 12px !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em;
    transition: transform 0.12s ease, box-shadow 0.2s ease !important;
}
/* Botón primary: brand saturado flat (sin lavado). La shadow glow hace
   el trabajo de "premium feel", no el gradient interno. */
.evg-social .evg-sidebar .evg-btn-primary {
    background: var(--evg-brand, #ff6b35) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow:
        0 10px 28px rgba(var(--evg-brand-rgb, 255, 107, 53), 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
.evg-social .evg-sidebar .evg-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
        0 14px 36px rgba(var(--evg-brand-rgb, 255, 107, 53), 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.evg-social .evg-sidebar .evg-btn-primary:active:not(:disabled) {
    transform: translateY(0);
}
.evg-social .evg-sidebar .evg-btn-primary:disabled {
    opacity: 0.5;
    box-shadow: none !important;
    cursor: not-allowed;
}
.evg-social .evg-sidebar .evg-btn-secondary,
.evg-social .evg-sidebar .evg-btn-outline,
.evg-social .evg-sidebar .evg-btn-ghost {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border-radius: 12px !important;
}
.evg-social .evg-sidebar .evg-btn-secondary:hover,
.evg-social .evg-sidebar .evg-btn-outline:hover,
.evg-social .evg-sidebar .evg-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.98) !important;
}

/* Drawer header del commit #8: title centrado, back izq, close der.
   Replicamos los estilos mobile que no aplicaban en desktop social. */
.evg-social .evg-drawer-header {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 10px;
    flex-shrink: 0;
    position: relative;
    color: rgba(255, 255, 255, 0.95) !important;
}
.evg-social .evg-drawer-back,
.evg-social .evg-drawer-close {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0 !important;
    transition: background .15s ease, transform .15s ease;
}
.evg-social .evg-drawer-back:hover,
.evg-social .evg-drawer-close:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}
.evg-social .evg-drawer-back:active,
.evg-social .evg-drawer-close:active {
    transform: scale(0.94);
}
/* Auto-focus del <dialog> dispara :focus pero NO :focus-visible (no es
   keyboard). Quitamos el anillo azul default y reemplazamos por un focus
   brand sutil solo cuando el user navega por teclado. */
.evg-social .evg-drawer-back:focus,
.evg-social .evg-drawer-close:focus {
    outline: none !important;
}
.evg-social .evg-drawer-back:focus-visible,
.evg-social .evg-drawer-close:focus-visible {
    outline: 2px solid rgba(var(--evg-brand-rgb, 255, 107, 53), 0.7) !important;
    outline-offset: 2px;
}
.evg-social .evg-drawer-title {
    flex: 1;
    text-align: center;
    font-family: 'Inter Tight', -apple-system, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.98) !important;
    margin: 0 !important;
    letter-spacing: -0.02em;
}

/* Progress dots premium: 3 dots donde el activo se estira en pill */
.evg-social .evg-drawer-progress {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 2px 18px 20px;
}
.evg-social .evg-drawer-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13) !important;
    transition: background-color 0.25s ease, width 0.25s ease;
}
.evg-social .evg-drawer-dot.is-active {
    width: 32px;
    background: var(--evg-brand, #ff6b35) !important;
    box-shadow: 0 0 12px rgba(var(--evg-brand-rgb, 255, 107, 53), 0.5);
}

/* Ticket summary — card sutil con tint brand + accent divider bajo. */
.evg-social .evg-sidebar .evg-ticket-summary {
    background: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.05) !important;
    border: 1px solid rgba(var(--evg-brand-rgb, 255, 107, 53), 0.14) !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    margin: 0 0 28px !important;
    color: rgba(255, 255, 255, 0.82) !important;
    position: relative;
}
.evg-social .evg-sidebar .evg-ticket-summary::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -14px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--evg-brand-rgb, 255, 107, 53), 0.28) 50%,
        transparent 100%);
}
.evg-social .evg-sidebar .evg-summary-mini {
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}
.evg-social .evg-sidebar .evg-summary-mini > svg {
    color: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.85) !important;
    flex-shrink: 0;
    opacity: 0.9;
}
.evg-social .evg-sidebar .evg-summary-text {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92) !important;
}
.evg-social .evg-sidebar .evg-summary-item {
    display: inline-flex;
    align-items: center;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92) !important;
    letter-spacing: -0.005em;
}
.evg-social .evg-sidebar .evg-summary-item + .evg-summary-item::before {
    content: '·';
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.3);
}
.evg-social .evg-sidebar .evg-edit-link {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--evg-brand, #ff6b35) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 4px 0 !important;
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
}
.evg-social .evg-sidebar .evg-edit-link:hover {
    text-decoration: underline;
}

/* ============================================================
   STEP 1 INTERNO DEL DRAWER ("Elige tu entrada") — dark theme
   para el caso en que el user abre el drawer con qty=0 o clickea
   "Editar" desde el summary. Los tickets legacy .evg-ticket-row
   tenían estilos light-theme que quedaban casi invisibles en dark.
   ============================================================ */

.evg-social .evg-sidebar .evg-ticket-row {
    background: rgba(255, 255, 255, 0.075) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 14px !important;
    color: rgba(255, 255, 255, 0.95) !important;
    padding: 18px 20px !important;
    margin: 0 0 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-direction: row !important;
    min-height: 92px !important;         /* cards de altura uniforme */
    box-sizing: border-box;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 1px 2px rgba(0, 0, 0, 0.25);
}
.evg-social .evg-sidebar .evg-ticket-row::before,
.evg-social .evg-sidebar .evg-ticket-row::after,
.evg-social .evg-sidebar .evg-ticket-stub,
.evg-social .evg-sidebar .evg-ticket-perforation,
.evg-social .evg-sidebar .evg-ticket-row hr,
.evg-social .evg-sidebar .evg-ticket-row .evg-ticket-divider {
    display: none !important;   /* quitamos decoraciones del "ticket con talón" legacy (perforación, divider dashed, stub) */
}

/* Background-image (línea punteada) que algunos layouts legacy usan en
   lugar de border-top dashed — borrarla para tema dark limpio. */
.evg-social .evg-sidebar .evg-ticket-row .evg-ticket-info,
.evg-social .evg-sidebar .evg-ticket-row .evg-ticket-main {
    background-image: none !important;
    border: 0 !important;
}
.evg-social .evg-sidebar .evg-ticket-row .evg-ticket-info,
.evg-social .evg-sidebar .evg-ticket-row .evg-ticket-main {
    flex: 1;
    min-width: 0;
    padding: 0 !important;
    background: transparent !important;
}
.evg-social .evg-sidebar .evg-ticket-row .evg-ticket-name,
.evg-social .evg-sidebar .evg-ticket-row .evg-tier-name,
.evg-social .evg-sidebar .evg-ticket-row h3 {
    font-family: 'Inter Tight', -apple-system, sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    margin: 0 0 4px !important;
    letter-spacing: -0.01em;
}
.evg-social .evg-sidebar .evg-ticket-row .evg-ticket-price,
.evg-social .evg-sidebar .evg-ticket-row .evg-tier-price {
    font-family: 'Inter Tight', -apple-system, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.98) !important;
    font-variant-numeric: tabular-nums;
}
.evg-social .evg-sidebar .evg-ticket-row .evg-ticket-fee,
.evg-social .evg-sidebar .evg-ticket-row .evg-ticket-description,
.evg-social .evg-sidebar .evg-ticket-row .evg-ticket-subtotal,
.evg-social .evg-sidebar .evg-ticket-row .evg-tier-description {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 12.5px !important;
}
.evg-social .evg-sidebar .evg-ticket-row .evg-ticket-total {
    color: var(--evg-brand, #ff6b35) !important;
    font-weight: 600;
}

/* Qty selector dentro del ticket-row — fondo glassy claro (no negro que
   se confunde con el modal bg), botones con hover brand sutil. */
.evg-social .evg-sidebar .evg-quantity-selector,
.evg-social .evg-sidebar .evg-qty-selector,
.evg-social .evg-sidebar .evg-ticket-qty {
    display: inline-flex !important;
    align-items: stretch !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    overflow: hidden;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.evg-social .evg-sidebar .evg-qty-btn,
.evg-social .evg-sidebar .evg-quantity-btn,
.evg-social .evg-sidebar .evg-ticket-qty button {
    width: 38px !important;
    height: 38px !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0 !important;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.15s, color 0.15s;
}
.evg-social .evg-sidebar .evg-qty-btn:hover:not(:disabled),
.evg-social .evg-sidebar .evg-quantity-btn:hover:not(:disabled) {
    background: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.15) !important;
    color: #fff !important;
}
.evg-social .evg-sidebar .evg-qty-btn:disabled,
.evg-social .evg-sidebar .evg-quantity-btn:disabled {
    color: rgba(255, 255, 255, 0.25) !important;
    cursor: not-allowed;
}
.evg-social .evg-sidebar .evg-qty-value,
.evg-social .evg-sidebar .evg-qty-display,
.evg-social .evg-sidebar .evg-quantity-display,
.evg-social .evg-sidebar .evg-quantity-count {
    min-width: 36px !important;
    display: grid !important;
    place-items: center;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.98) !important;
    border-left: 0 !important;                 /* sin divisores verticales */
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    padding: 0 8px;
}

/* Card de totales al fondo del step 1 ("Subtotal / Cargo / Total") —
   mismo styling que los ticket-row para look uniforme. */
.evg-social .evg-sidebar .evg-checkout-summary,
.evg-social .evg-sidebar .evg-totals,
.evg-social .evg-sidebar .evg-order-summary {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 14px !important;
    padding: 18px 20px !important;
    margin: 8px 0 0 !important;
    color: rgba(255, 255, 255, 0.85) !important;
}
.evg-social .evg-sidebar .evg-checkout-summary *,
.evg-social .evg-sidebar .evg-totals *,
.evg-social .evg-sidebar .evg-order-summary * {
    color: inherit !important;
}
/* Summary rows: layout flex con precio a la derecha tabular-nums */
.evg-social .evg-sidebar .evg-summary-row,
.evg-social .evg-sidebar .evg-totals-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline;
    padding: 4px 0;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.evg-social .evg-sidebar .evg-totals-row--total,
.evg-social .evg-sidebar .evg-summary-total,
.evg-social .evg-sidebar .evg-total-row {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-top: 12px !important;
    margin-top: 10px !important;
    font-family: 'Inter Tight', -apple-system, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.98) !important;
}
.evg-social .evg-sidebar .evg-totals-row--total strong,
.evg-social .evg-sidebar .evg-total-amount,
.evg-social .evg-sidebar .evg-summary-total span {
    color: rgba(255, 255, 255, 0.98) !important;
    font-weight: 700 !important;
    font-family: 'Inter Tight', -apple-system, sans-serif !important;
}

/* Línea dashed legacy del .evg-ticket-total dentro de los ticket-row
   (separador entre "+ $X servicio" y "Total $Y"). En dark era una raya
   blanca tenue sin propósito. */
.evg-social .evg-sidebar .evg-ticket-row .evg-ticket-total,
.evg-social .evg-sidebar .evg-ticket-total,
.evg-social .evg-sidebar .evg-tier-price-total {
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-top: 6px !important;
}

/* ============================================================
   STEP 3 CONFIRMAR Y PAGAR — dark theme para review + totales +
   método de pago. Eran todas light theme hardcoded.
   ============================================================ */

/* Review blocks (Entradas + Contacto summary cards) */
.evg-social .evg-sidebar .evg-review-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.evg-social .evg-sidebar .evg-review-block {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    color: rgba(255, 255, 255, 0.92) !important;
}
.evg-social .evg-sidebar .evg-review-header {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.evg-social .evg-sidebar .evg-review-icon {
    color: rgba(255, 255, 255, 0.95) !important;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
}
.evg-social .evg-sidebar .evg-review-title {
    flex: 1;
    font-family: 'Inter Tight', -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    letter-spacing: -0.01em;
}
.evg-social .evg-sidebar .evg-review-content {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 14px;
}
.evg-social .evg-sidebar .evg-review-item {
    display: flex !important;
    justify-content: space-between;
    padding: 2px 0;
    font-variant-numeric: tabular-nums;
}
.evg-social .evg-sidebar .evg-review-contact p {
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 2px 0 !important;
    font-size: 13.5px;
}
.evg-social .evg-sidebar .evg-review-contact p:last-child {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Final summary (Entradas / Cargo / Total a pagar) */
.evg-social .evg-sidebar .evg-final-summary {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 14px !important;
    padding: 18px 20px !important;
    margin: 14px 0 !important;
    color: rgba(255, 255, 255, 0.85) !important;
}
.evg-social .evg-sidebar .evg-final-summary .evg-summary-row {
    display: flex !important;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.82) !important;
}
.evg-social .evg-sidebar .evg-final-summary .evg-summary-row--total,
.evg-social .evg-sidebar .evg-final-summary .evg-summary-total {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-top: 12px !important;
    margin-top: 10px !important;
    font-family: 'Inter Tight', -apple-system, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.98) !important;
}
.evg-social .evg-sidebar .evg-fee-absorb-note,
.evg-social .evg-sidebar .evg-fee-mp-note {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 12px !important;
    margin-top: 10px !important;
    text-align: center;
    line-height: 1.4;
}

/* Payment trust microcopy bajo el CTA del step 3 (opción A 2026-04-24) —
   reemplaza la card "Método de pago". Shield verde + métodos en línea
   inline. Bajo el botón "Ir a Pagar" anclado al momento de confirmar. */
.evg-social .evg-sidebar .evg-payment-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 11.5px;
    font-weight: 500;
    flex-wrap: wrap;
}
.evg-social .evg-sidebar .evg-payment-trust > svg {
    color: #4ade80;
    flex-shrink: 0;
}
.evg-social .evg-sidebar .evg-payment-trust-sep {
    opacity: 0.5;
}
.evg-social .evg-sidebar .evg-payment-trust-methods {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.evg-social .evg-sidebar .evg-payment-trust-logo {
    height: 12px;
    width: auto;
    opacity: 0.7;
}
/* Mastercard y Mach son color → filter brightness(0) invert(1) blanco */
.evg-social .evg-sidebar .evg-payment-trust-logo--invert {
    filter: brightness(0) invert(1);
}

/* ============================================================
   STEP 2 SUBSTEP COMPANIONS — attendee cards + delivery toggles.
   Eran light theme hardcoded; pintamos dark para match modal.
   ============================================================ */

.evg-social .evg-sidebar .evg-attendee-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    padding: 14px 16px !important;
}

/* Card "Titular" destacada con tinte brand visible en dark.
   Antes heredaba el bg neutro de .evg-attendee-card y se perdía
   la jerarquía visual ("esta es tu entrada destacada"). */
.evg-social .evg-sidebar .evg-attendee-card--titular {
    background: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.10) !important;
    border: 1px solid rgba(var(--evg-brand-rgb, 255, 107, 53), 0.30) !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    padding: 14px 16px !important;
}
.evg-social .evg-sidebar .evg-attendee-card-header,
.evg-social .evg-sidebar .evg-attendee-card-header * {
    color: rgba(255, 255, 255, 0.95) !important;
}
.evg-social .evg-sidebar .evg-attendee-edit-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
}

/* Delivery toggle: dos pills inline "Enviar a cada uno" / "Es un regalo" */
.evg-social .evg-sidebar .evg-delivery-selector {
    display: flex !important;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    padding: 4px;
    margin-top: 14px;
}
.evg-social .evg-sidebar .evg-delivery-opt {
    flex: 1 1 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px !important;
    background: transparent !important;
    /* Border transparente del mismo grosor que el active para que no haya
       salto vertical de 2px al alternar entre opciones (vibra el toggle). */
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.62) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.evg-social .evg-sidebar .evg-delivery-opt svg {
    stroke: currentColor;
    flex-shrink: 0;
}
.evg-social .evg-sidebar .evg-delivery-opt:hover:not(.is-active) {
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.035) !important;
}
.evg-social .evg-sidebar .evg-delivery-opt.is-active {
    background: var(--evg-brand, #ff6b35) !important;
    color: #fff !important;
    /* Mismo grosor de border que el estado default — transparente —
       para que el box-model sea idéntico y no haya salto vertical. */
    border: 1px solid transparent !important;
    font-weight: 700 !important;
    box-shadow:
        0 4px 14px rgba(var(--evg-brand-rgb, 255, 107, 53), 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
.evg-social .evg-sidebar .evg-delivery-opt.is-active svg {
    stroke: #fff !important;
}
.evg-social .evg-sidebar .evg-delivery-hint {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 12.5px !important;
    margin-top: 10px !important;
    text-align: center;
}

/* Drawer footer interno ("TOTAL $X · N entradas · Revisar →"):
   es redundante con el sticky-cta bottom social (que siempre está
   visible abajo). Lo ocultamos para no duplicar CTAs. */
.evg-social .evg-drawer-footer { display: none !important; }

/* ============================================================
   JERARQUÍA cuando el drawer está abierto: ocultar topbar y sticky-cta
   para concentrar atención en el modal. Selector basado en el state
   nativo [open] del <dialog> (NO body class — se quedaba pegado tras
   cerrar con ESC y dejaba la barra invisible). Fix 2026-04-25.
   ============================================================ */
/* Regla aplica SOLO con dialog abierto. Si está cerrado, la barra
   vuelve a aparecer automáticamente. */

/* Backdrop por encima de todo (topbar, sticky-cta residual, modo prueba
   banner). Sidebar-drawer un pelín más arriba. */
.evg-social .evg-drawer-backdrop { z-index: 10000 !important; }
.evg-social .evg-sidebar { z-index: 10001 !important; }

/* ============================================================
   DRAWER — más aire interno. El form se veía apretado contra los bordes
   y los campos pegados entre sí. Este bloque da respiro al contenido.
   ============================================================ */

.evg-social .evg-sidebar .evg-checkout-card {
    /* BODY scrollable real. El footer es hermano (no hijo), por eso el
       padding-bottom puede ser pequeño — solo aire entre el último elemento
       y el divisor del footer. Antes 24/20px sumaban con el padding-top
       del footer 18/16px = 42/36px total → demasiado aire. Reducido para
       que el total con el footer quede en ~26px desktop / ~22px mobile. */
    padding: 0 28px 12px !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: 0;                        /* necesario para flex + overflow */
}
@media (max-width: 767px) {
    .evg-social .evg-sidebar .evg-checkout-card { padding: 0 18px 10px !important; }
}

/* Form groups con gap más generoso entre campos */
.evg-social .evg-sidebar .evg-form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
    align-items: start !important;
}
.evg-social .evg-sidebar .evg-form-row > .evg-form-group {
    margin: 0 !important;        /* override del margin-bottom 16 legacy */
    min-width: 0;
}
.evg-social .evg-sidebar .evg-form-group + .evg-form-group,
.evg-social .evg-sidebar .evg-form-section + .evg-form-section {
    margin-top: 18px;
}
.evg-social .evg-sidebar .evg-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}
.evg-social .evg-sidebar .evg-form-label {
    font-size: 13px !important;
    margin-bottom: 0 !important;
    line-height: 1.3;
}

/* Inputs con altura consistente + padding cómodo */
.evg-social .evg-sidebar .evg-form-input,
.evg-social .evg-sidebar .evg-corp-form-input,
.evg-social .evg-sidebar input[type="text"],
.evg-social .evg-sidebar input[type="email"],
.evg-social .evg-sidebar input[type="tel"],
.evg-social .evg-sidebar input[type="number"],
.evg-social .evg-sidebar select,
.evg-social .evg-sidebar textarea {
    padding: 12px 14px !important;
    font-size: 14.5px !important;
    min-height: 46px;
}

/* Chip summary con más aire arriba */
.evg-social .evg-sidebar .evg-ticket-summary {
    margin: 4px 0 22px !important;
    padding: 12px 16px !important;
}

@media (max-width: 540px) {
    .evg-social .evg-sidebar .evg-form-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* Footer del DIALOG — bloque fijo separado del body scrollable.
   Estructura header/body/footer real:
     <dialog flex column>
       <header>     ← flex 0 0 auto
       <progress>   ← flex 0 0 auto
       <body>       ← flex 1, overflow-y: auto (SCROLL)
       <footer>     ← flex 0 0 auto, siempre visible al bottom
     </dialog>
   Refactor B (2026-04-24). */
.evg-social .evg-sidebar .evg-dialog-footer {
    flex: 0 0 auto;
    /* padding-top reducido (18→14) para que el aire combinado con el
       padding-bottom del body sea cómodo, no excesivo (~26px total). */
    padding: 14px 28px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(11, 16, 32, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.evg-social .evg-sidebar .evg-dialog-footer .evg-step-actions,
.evg-social .evg-sidebar .evg-dialog-footer .evg-step-actions-dual {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    min-height: 52px;
    box-sizing: border-box;
}
@media (max-width: 540px) {
    /* Mobile: padding-top 16→12 (combinado con body 10 = ~22px total) */
    .evg-social .evg-sidebar .evg-dialog-footer { padding: 12px 18px 18px; }
}

/* El span interno del btn-primary (ícono + texto + precio) queda en línea
   con flex + gap. Previene wrap raro del "Ir a Pagar $X" del step 3.
   IMPORTANTE: no usar !important global ni `> span` genérico — pisaba el
   x-show de Alpine que oculta el span "Selecciona al menos una entrada"
   cuando hay tickets, mostrando ambos textos juntos. */
.evg-social .evg-sidebar .evg-btn-primary .evg-btn-content,
.evg-social .evg-sidebar .evg-btn-primary .evg-btn-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}
/* Spans hijos directos solo cuando NO tienen display:none inline (de x-show).
   :not([style*="display: none"]) deja a Alpine controlar la visibilidad. */
.evg-social .evg-sidebar .evg-btn-primary > span:not([style*="display: none"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}
@media (max-width: 767px) {
    .evg-social .evg-sidebar .evg-step-actions,
    .evg-social .evg-sidebar .evg-form-actions {
        margin: 24px -18px 0 !important;
        padding: 18px 18px 22px !important;
    }
}
.evg-social .evg-sidebar .evg-step-actions .evg-btn-primary,
.evg-social .evg-sidebar .evg-form-actions .evg-btn-primary {
    flex: 1 1 auto;
    min-height: 52px;
    padding: 15px 24px !important;
    font-size: 15px !important;
}
/* Secondary/ghost/outline: ancho FIJO consistente entre steps para que
   .evg-step-actions-dual siempre se vea igual (mismo Volver width en
   step 2 buyer, step 2 companions y step 3). */
.evg-social .evg-sidebar .evg-step-actions .evg-btn-secondary,
.evg-social .evg-sidebar .evg-step-actions .evg-btn-outline,
.evg-social .evg-sidebar .evg-step-actions .evg-btn-ghost,
.evg-social .evg-sidebar .evg-form-actions .evg-btn-secondary,
.evg-social .evg-sidebar .evg-form-actions .evg-btn-ghost {
    flex: 0 0 128px;               /* ancho fijo 128px */
    min-width: 128px !important;
    min-height: 52px;
    padding: 15px 18px !important;
    font-size: 14px !important;
    justify-content: center;
}
@media (max-width: 540px) {
    .evg-social .evg-sidebar .evg-step-actions .evg-btn-secondary,
    .evg-social .evg-sidebar .evg-step-actions .evg-btn-outline,
    .evg-social .evg-sidebar .evg-step-actions .evg-btn-ghost,
    .evg-social .evg-sidebar .evg-form-actions .evg-btn-secondary,
    .evg-social .evg-sidebar .evg-form-actions .evg-btn-ghost {
        flex: 0 0 96px;
        min-width: 96px !important;
    }
}

/* Progress dots del drawer header */
.evg-social .evg-drawer-dot {
    background: rgba(255, 255, 255, 0.14) !important;
}
.evg-social .evg-drawer-dot.is-active {
    background: var(--evg-brand, #ff6b35) !important;
}

/* Link "Pago seguro" del step 1 interno (si se muestra) — tonemos verde sutil */
.evg-social .evg-sidebar .evg-checkout-secure,
.evg-social .evg-sidebar .evg-secure-badge {
    color: #4ade80 !important;
}

/* Texto de totales del summary (step 3) — mantener tabular-nums + blanco */
.evg-social .evg-sidebar .evg-summary-row,
.evg-social .evg-sidebar .evg-totals-row {
    color: rgba(255, 255, 255, 0.85) !important;
}
.evg-social .evg-sidebar .evg-totals-row--total,
.evg-social .evg-sidebar .evg-summary-total {
    color: rgba(255, 255, 255, 0.98) !important;
    font-weight: 700;
}

/* En mobile el bar ya se ve por default (no necesita override de display),
   pero los colores del theme claro legacy quedan mal sobre dark. Tanto en
   mobile como en desktop social aplicamos los colores correctos. */
.evg-social .evg-mobile-bar {
    background: rgba(10, 10, 15, 0.88) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.evg-social .evg-mobile-bar .evg-mobile-price-tag {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 10.5px;
    letter-spacing: 0.08em;
}
.evg-social .evg-mobile-bar .evg-mobile-price-label {
    color: rgba(255, 255, 255, 0.98) !important;
    font-family: 'Inter Tight', -apple-system, sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.evg-social .evg-mobile-bar .evg-mobile-fee-note {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 11.5px;
}

/* El botón CTA del mobile-bar con estilos del mockup v3 — brand glow */
.evg-social .evg-mobile-bar .evg-mobile-cta,
.evg-social .evg-mobile-bar .evg-mobile-cta-wide {
    background: var(--evg-brand, #ff6b35) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 4px 16px rgba(var(--evg-brand-rgb, 255, 107, 53), 0.4) !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}
.evg-social .evg-mobile-bar .evg-mobile-cta:hover:not(:disabled),
.evg-social .evg-mobile-bar .evg-mobile-cta-wide:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(var(--evg-brand-rgb, 255, 107, 53), 0.55) !important;
}

/* ============================================================
   STEP 1 PREMIUM POLISH (2026-04-24) — Push hacia 9-10/10.
   Refactor de la experiencia visual del paso "Elige tu entrada":
   - Cards de tickets con hover/selected diferenciado y profundidad.
   - Qty selector rediseñado (botones circulares, plus dominante brand
     cuando qty=0 invitando al click).
   - Summary card sin bordes propios — extracto al estilo Stripe con
     divider gradient brand y Total en Inter Tight 22px.
   - Focus rings brand para cualquier control con teclado.
   ============================================================ */

/* Ticket cards — hover y selected refinados con depth */
.evg-social .evg-sidebar .evg-ticket-row {
    cursor: default;
    position: relative;
    transition: background 0.25s ease, border-color 0.25s ease,
                box-shadow 0.25s ease, transform 0.18s ease;
}
.evg-social .evg-sidebar .evg-ticket-row:hover {
    background: rgba(255, 255, 255, 0.11) !important;
    border-color: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.32) !important;
}
.evg-social .evg-sidebar .evg-ticket-row.selected {
    background:
        linear-gradient(135deg,
            rgba(var(--evg-brand-rgb, 255, 107, 53), 0.14) 0%,
            rgba(var(--evg-brand-rgb, 255, 107, 53), 0.04) 60%),
        rgba(255, 255, 255, 0.085) !important;
    border-color: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.5) !important;
    box-shadow:
        0 8px 28px rgba(var(--evg-brand-rgb, 255, 107, 53), 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Ticket name / pricing — tipografía premium */
.evg-social .evg-sidebar .evg-ticket-row .evg-ticket-name {
    font-family: 'Inter Tight', -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.98) !important;
    letter-spacing: -0.01em;
    margin: 0 0 6px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}
.evg-social .evg-sidebar .evg-ticket-row .evg-ticket-price {
    font-family: 'Inter Tight', -apple-system, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.98) !important;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.evg-social .evg-sidebar .evg-ticket-row .evg-ticket-fee {
    font-size: 12.5px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-top: 2px !important;
}

/* Qty selector PREMIUM — botones circulares borderless, plus dominante
   brand cuando qty=0 (call-to-action visual al click). */
.evg-social .evg-sidebar .evg-ticket-qty,
.evg-social .evg-sidebar .evg-ticket-row .evg-ticket-qty {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    backdrop-filter: none !important;
}
.evg-social .evg-sidebar .evg-ticket-qty .evg-qty-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    cursor: pointer;
    display: grid !important;
    place-items: center;
    padding: 0 !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.evg-social .evg-sidebar .evg-ticket-qty .evg-qty-btn:hover:not(:disabled) {
    background: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.18) !important;
    border-color: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.45) !important;
    color: #fff !important;
}
.evg-social .evg-sidebar .evg-ticket-qty .evg-qty-btn:active:not(:disabled) {
    transform: scale(0.92);
}
.evg-social .evg-sidebar .evg-ticket-qty .evg-qty-btn:disabled {
    opacity: 0.32;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}
/* Plus dominante invitando al primer click cuando qty=0 */
.evg-social .evg-sidebar .evg-ticket-row:not(.selected) .evg-qty-plus {
    background: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.14) !important;
    border-color: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.35) !important;
    color: var(--evg-brand, #ff6b35) !important;
}
.evg-social .evg-sidebar .evg-ticket-row:not(.selected) .evg-qty-plus:hover {
    background: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.22) !important;
    border-color: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.55) !important;
}
.evg-social .evg-sidebar .evg-ticket-qty .evg-qty-display {
    min-width: 30px !important;
    text-align: center;
    font-family: 'Inter Tight', -apple-system, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.98) !important;
    font-variant-numeric: tabular-nums;
    border: 0 !important;
    background: transparent !important;
    padding: 0 6px !important;
}

/* Summary card — extracto premium sin bordes propios. Divider top
   con gradient brand sutil. Total en Inter Tight 22px bold como
   protagonista del paso. */
.evg-social .evg-sidebar .evg-order-summary,
.evg-social .evg-sidebar .evg-checkout-summary,
.evg-social .evg-sidebar .evg-totals {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 22px 6px 6px !important;
    margin: 16px 6px 0 !important;
    position: relative;
}
.evg-social .evg-sidebar .evg-order-summary::before,
.evg-social .evg-sidebar .evg-checkout-summary::before,
.evg-social .evg-sidebar .evg-totals::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--evg-brand-rgb, 255, 107, 53), 0.32) 50%,
        transparent 100%);
}
.evg-social .evg-sidebar .evg-order-summary .evg-summary-row,
.evg-social .evg-sidebar .evg-checkout-summary .evg-summary-row,
.evg-social .evg-sidebar .evg-totals .evg-summary-row {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0 !important;
    font-size: 13.5px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-variant-numeric: tabular-nums;
    border: 0 !important;
    background: transparent !important;
}
.evg-social .evg-sidebar .evg-order-summary .evg-summary-row span:last-child,
.evg-social .evg-sidebar .evg-checkout-summary .evg-summary-row span:last-child {
    color: rgba(255, 255, 255, 0.78) !important;
}
.evg-social .evg-sidebar .evg-order-summary .evg-summary-total,
.evg-social .evg-sidebar .evg-checkout-summary .evg-summary-total,
.evg-social .evg-sidebar .evg-totals .evg-summary-total,
.evg-social .evg-sidebar .evg-summary-total {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: 14px !important;
    padding-top: 18px !important;
    padding-bottom: 0 !important;
    align-items: baseline !important;
    font-family: 'Inter Tight', -apple-system, sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: rgba(255, 255, 255, 1) !important;
}
.evg-social .evg-sidebar .evg-summary-total span:first-child {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    letter-spacing: 0;
}
.evg-social .evg-sidebar .evg-summary-total span:last-child {
    font-feature-settings: "tnum";
}

/* Focus visible global del modal — brand ring solo con keyboard nav.
   Eliminamos el outline default azul/rojo del browser que se asomaba
   en qty btns y otros controles. */
.evg-social .evg-sidebar button:focus-visible,
.evg-social .evg-sidebar input:focus-visible,
.evg-social .evg-sidebar select:focus-visible,
.evg-social .evg-sidebar textarea:focus-visible {
    outline: 2px solid rgba(var(--evg-brand-rgb, 255, 107, 53), 0.65) !important;
    outline-offset: 2px;
    border-color: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.5) !important;
}
.evg-social .evg-sidebar button:focus:not(:focus-visible),
.evg-social .evg-sidebar input:focus:not(:focus-visible),
.evg-social .evg-sidebar select:focus:not(:focus-visible),
.evg-social .evg-sidebar textarea:focus:not(:focus-visible) {
    outline: none !important;
}

/* ============================================================
   STEP 2 PREMIUM POLISH (2026-04-24) — "Tus datos" hacia 9-10/10.
   ============================================================ */

/* Required marker — del asterisco textual a un dot mini brand */
.evg-social .evg-sidebar .evg-form-label .evg-required,
.evg-social .evg-sidebar label .evg-required {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--evg-brand, #ff6b35) !important;
    color: transparent !important;
    font-size: 0 !important;
    margin: 0 0 0 6px;
    vertical-align: middle;
    transform: translateY(-2px);
}

/* Field labels — kicker premium tipo Stripe */
.evg-social .evg-sidebar .evg-form-label,
.evg-social .evg-sidebar label {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase;
    margin: 0 0 8px !important;
    line-height: 1.3;
}

/* Inputs premium — superficie sutil + altura cómoda + transitions ricas */
.evg-social .evg-sidebar .evg-form-input,
.evg-social .evg-sidebar .evg-corp-form-input,
.evg-social .evg-sidebar input[type="text"],
.evg-social .evg-sidebar input[type="email"],
.evg-social .evg-sidebar input[type="tel"],
.evg-social .evg-sidebar input[type="number"],
.evg-social .evg-sidebar select,
.evg-social .evg-sidebar textarea {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.98) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    min-height: 52px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em;
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.evg-social .evg-sidebar .evg-form-input:hover:not(:focus),
.evg-social .evg-sidebar input:hover:not(:focus),
.evg-social .evg-sidebar select:hover:not(:focus) {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}
.evg-social .evg-sidebar .evg-form-input:focus,
.evg-social .evg-sidebar input:focus,
.evg-social .evg-sidebar select:focus,
.evg-social .evg-sidebar textarea:focus {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.55) !important;
    outline: none !important;
    box-shadow:
        0 0 0 4px rgba(var(--evg-brand-rgb, 255, 107, 53), 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
.evg-social .evg-sidebar input::placeholder,
.evg-social .evg-sidebar textarea::placeholder {
    color: rgba(255, 255, 255, 0.28) !important;
    font-weight: 400;
}

/* Autofill (Chrome/Safari): por default pinta amarillo/cream — destruye el
   theme dark del modal social. Forzamos transparente con un trick clásico:
   inset box-shadow del color del background y -webkit-text-fill-color para
   el texto. El input mantiene la apariencia dark aún cuando el password
   manager autofillea email/teléfono. */
.evg-social .evg-sidebar input:-webkit-autofill,
.evg-social .evg-sidebar input:-webkit-autofill:hover,
.evg-social .evg-sidebar input:-webkit-autofill:focus,
.evg-social .evg-sidebar input:-webkit-autofill:active,
.evg-social .evg-sidebar textarea:-webkit-autofill,
.evg-social .evg-sidebar select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #0F1421 inset !important;
    box-shadow: 0 0 0 1000px #0F1421 inset !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.98) !important;
    caret-color: rgba(255, 255, 255, 0.98) !important;
    transition: background-color 9999s ease-in-out 0s;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.evg-social .evg-sidebar input.evg-input-error:-webkit-autofill,
.evg-social .evg-sidebar input.evg-input-error:-webkit-autofill:hover,
.evg-social .evg-sidebar input.evg-input-error:-webkit-autofill:focus {
    border-color: rgba(248, 113, 113, 0.7) !important;
    box-shadow:
        0 0 0 1000px #0F1421 inset,
        0 0 0 3px rgba(248, 113, 113, 0.12) !important;
}

/* Select RUT con chevron brand custom */
.evg-social .evg-sidebar select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    padding-right: 38px !important;
    cursor: pointer;
}
.evg-social .evg-sidebar select:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,107,53,0.95)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
}

/* Phone input — prefix "+56" visual fijo via background */
.evg-social .evg-sidebar input[id*="phone"],
.evg-social .evg-sidebar input[type="tel"],
.evg-social .evg-sidebar input[name*="phone"] {
    /* Reservamos espacio izq para mostrar el +56 fijo */
}

/* Document number wrapper alignment con select RUT (mismo height) */
.evg-social .evg-sidebar .evg-form-group [style*="display: flex"] > select,
.evg-social .evg-sidebar .evg-form-group [style*="display: flex"] > div input {
    min-height: 52px;
}

/* Ticket summary chip — divider top sutil tipo extracto en vez de card boxed */
.evg-social .evg-sidebar .evg-ticket-summary {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 0 !important;
    padding: 14px 4px !important;
    margin: 0 0 28px !important;
    position: relative;
}
.evg-social .evg-sidebar .evg-ticket-summary::after {
    /* Override del accent divider del commit anterior para coherencia */
    display: none !important;
}
.evg-social .evg-sidebar .evg-summary-mini {
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}
.evg-social .evg-sidebar .evg-summary-mini > svg {
    color: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.85) !important;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}
.evg-social .evg-sidebar .evg-summary-text {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: 'Inter Tight', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}
.evg-social .evg-sidebar .evg-summary-item {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0;
}
.evg-social .evg-sidebar .evg-summary-item + .evg-summary-item::before {
    content: '·';
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.28);
    font-weight: 400;
}
.evg-social .evg-sidebar .evg-edit-link {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--evg-brand, #ff6b35) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 4px 0 !important;
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
    letter-spacing: -0.005em;
    transition: color 0.15s;
}
.evg-social .evg-sidebar .evg-edit-link:hover {
    color: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.85) !important;
}

/* Form rows — 2-col grid con gap consistente y aire entre grupos */
.evg-social .evg-sidebar .evg-form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
    margin-bottom: 22px !important;
    align-items: start !important;
}
.evg-social .evg-sidebar .evg-form-group + .evg-form-group {
    margin-top: 22px;
}
@media (max-width: 540px) {
    .evg-social .evg-sidebar .evg-form-row {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

/* ============================================================
   STEP 2 COMPANIONS PREMIUM (2026-04-24) — substep "Asistentes" 9-10/10.
   ============================================================ */

/* Attendee cards — depth + headers refinados */
.evg-social .evg-sidebar .evg-attendee-card {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 18px 20px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    margin-bottom: 14px !important;
    transition: background 0.2s, border-color 0.2s;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
.evg-social .evg-sidebar .evg-attendee-card:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Card titular — destacada con tinte brand + glow sutil */
.evg-social .evg-sidebar .evg-attendee-card--titular {
    background:
        linear-gradient(135deg,
            rgba(var(--evg-brand-rgb, 255, 107, 53), 0.08) 0%,
            rgba(var(--evg-brand-rgb, 255, 107, 53), 0.02) 60%),
        rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(var(--evg-brand-rgb, 255, 107, 53), 0.28) !important;
    box-shadow:
        0 4px 20px rgba(var(--evg-brand-rgb, 255, 107, 53), 0.1),
        inset 0 1px 0 rgba(var(--evg-brand-rgb, 255, 107, 53), 0.12) !important;
}

/* Header de cada card: "Entrada N — Titular" / "Entrada N" + tier name */
.evg-social .evg-sidebar .evg-attendee-card-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.evg-social .evg-sidebar .evg-attendee-card-header > * {
    margin: 0 !important;
}
.evg-social .evg-sidebar .evg-attendee-number,
.evg-social .evg-sidebar .evg-attendee-card-header strong {
    font-family: 'Inter Tight', -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.98) !important;
    letter-spacing: -0.01em;
}
.evg-social .evg-sidebar .evg-attendee-tier,
.evg-social .evg-sidebar .evg-attendee-card-header span:not(.evg-attendee-number):not(strong) {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px !important;
    background: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.12) !important;
    border: 1px solid rgba(var(--evg-brand-rgb, 255, 107, 53), 0.25) !important;
    border-radius: 6px;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Botón Editar pequeño en card titular header */
.evg-social .evg-sidebar .evg-attendee-edit-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.evg-social .evg-sidebar .evg-attendee-edit-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.4) !important;
    color: #fff !important;
}

/* Read-only display de nombre + email del titular */
.evg-social .evg-sidebar .evg-attendee-card--titular .evg-attendee-readonly,
.evg-social .evg-sidebar .evg-attendee-card--titular > p {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 13.5px !important;
}
.evg-social .evg-sidebar .evg-attendee-card--titular .evg-attendee-name,
.evg-social .evg-sidebar .evg-attendee-card--titular .evg-attendee-readonly strong {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 500;
    margin-right: 12px;
}

/* Delivery selector — segmented control premium */
.evg-social .evg-sidebar .evg-delivery-selector {
    display: flex !important;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 5px;
    margin-top: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
.evg-social .evg-sidebar .evg-delivery-opt {
    flex: 1 1 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.62) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.evg-social .evg-sidebar .evg-delivery-opt svg {
    stroke: currentColor;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
}
.evg-social .evg-sidebar .evg-delivery-opt:hover:not(.is-active) {
    color: rgba(255, 255, 255, 0.92) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}
.evg-social .evg-sidebar .evg-delivery-opt.is-active {
    background: var(--evg-brand, #ff6b35) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    font-weight: 700 !important;
    box-shadow:
        0 4px 14px rgba(var(--evg-brand-rgb, 255, 107, 53), 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
.evg-social .evg-sidebar .evg-delivery-opt.is-active svg {
    stroke: #fff !important;
}
.evg-social .evg-sidebar .evg-delivery-hint {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 12px !important;
    margin-top: 12px !important;
    text-align: center;
    line-height: 1.4;
    font-style: normal;
}

/* ============================================================
   SCROLLBAR — dark gris oscuro custom para que matche el modal.
   Aplica al body scrollable del dialog (.evg-checkout-card) y a
   cualquier descendiente del .evg-sidebar que scrollee.
   ============================================================ */
.evg-social .evg-sidebar .evg-checkout-card {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
.evg-social .evg-sidebar .evg-checkout-card::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.evg-social .evg-sidebar .evg-checkout-card::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}
.evg-social .evg-sidebar .evg-checkout-card::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.2s;
}
.evg-social .evg-sidebar .evg-checkout-card::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
    background-clip: padding-box;
    border: 2px solid transparent;
}
.evg-social .evg-sidebar .evg-checkout-card::-webkit-scrollbar-corner {
    background: transparent;
}

/* ============================================================
   FIX (2026-04-25): la barra sticky de compra (.evg-mobile-bar)
   seguía visible al abrir el modal porque .evg-drawer-open en body
   a veces no se agrega a tiempo. Usamos :has() del <dialog open> nativo
   como selector primario más robusto.
   ============================================================ */
body:has(.evg-sidebar-dialog[open]) .evg-social-topbar,
body:has(.evg-sidebar-dialog[open]) .evg-social .evg-mobile-bar,
body:has(.evg-sidebar-dialog[open]) .evg-social .evg-mobile-bar.evg-trust-strip {
    display: none !important;
}

/* ============================================================
   HUB-TOPBAR INTEGRATION (2026-04-25) — la página pública del evento
   ahora usa <x-hub-topbar /> (mismo del layout clean) en lugar del
   _social-topbar custom que quedaba en deuda visual con el resto del
   producto. El hub-topbar es position: fixed y mide ~52px de alto.

   Compensamos con padding-top en el .evg-social para que el contenido
   no quede tapado. El partial legacy .evg-social-topbar queda dead-code
   (no se renderiza), pero ocultamos por si algún cache lo trae.
   ============================================================ */
.evg-social-topbar { display: none !important; }

.evg-social {
    /* 52px del hub-topbar fixed + 12px de respiración mínima */
    padding-top: 64px;
}

/* Si está activo el banner "Modo de Prueba" (44px), empuja el topbar
   y el contenido un poco más. */
body:has(.evg-test-preview-banner) .evg-social,
body:has(#evgPreviewBanner) .evg-social {
    padding-top: 108px;          /* 44 banner + 52 topbar + 12 respiro */
}
body:has(#evgPreviewBanner) .evg-social .evg-mobile-bar { /* sticky-cta ya respeta el viewport bottom */ }

/* Hub-topbar wrapper: empujarlo 44px abajo para que el banner Modo
   de Prueba quede arriba sin solaparse. El banner es fixed top:0
   z-index:10000, el topbar es fixed top:0 z-index:50 — visualmente
   competían por el mismo espacio. */
body:has(#evgPreviewBanner) .evg-page-topbar-wrap > div.fixed {
    top: 44px !important;
}

/* En desktop social podemos darle más aire al hero después del topbar */
@media (min-width: 768px) {
    .evg-social { padding-top: 72px; }
    body:has(#evgPreviewBanner) .evg-social { padding-top: 116px; }
}

/* ════════════════════════════════════════════════════════════════
   SPONSORS — Partial _social-sponsors.blade.php (tema dark social).
   Single-column 860px que matcha el ancho del resto de partials
   sociales. Logos blancos sobre dark, jerarquía por tier.
═════════════════════════════════════════════════════════════════ */
.evg-social-sponsors {
    max-width: 860px;
    margin: 8px auto 0;
    /* Padding-bottom normal — el sticky CTA ya está cubierto globalmente
       por el .evg-social padding-bottom. Antes acá había 140px de band-aid
       local que solo protegía sponsors; ahora cualquier sección queda
       visible cuando el user para. */
    padding: 36px 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    position: relative;
    z-index: 2;
}
.evg-social-sponsors__tier {
    margin-bottom: 32px;
}
.evg-social-sponsors__tier:last-child {
    margin-bottom: 0;
}
.evg-social-sponsors__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 18px;
    text-align: center;
    text-transform: uppercase;
}
.evg-social-sponsors__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px 40px;
}
.evg-social-sponsors__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    flex: 0 0 auto;
    text-decoration: none;
    opacity: 0.82;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.evg-social-sponsors__item:hover {
    opacity: 1;
    transform: translateY(-1px);
}
.evg-social-sponsors__item img {
    /* Height fija (100% del container) + width auto. Importante: NO usar
       max-height % con SVG simpleicons (no traen intrinsic size, colapsan
       a 0×0). Forzamos height explícito y dejamos que el ratio del SVG
       calcule el width. */
    height: 100%;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}

/* Jerarquía por tier — main grande, media/produce medio, support chico */
.evg-social-sponsors__grid--main .evg-social-sponsors__item {
    height: 76px;
}
.evg-social-sponsors__grid--main .evg-social-sponsors__item img {
    max-width: 220px;
}
.evg-social-sponsors__grid--media .evg-social-sponsors__item,
.evg-social-sponsors__grid--produce .evg-social-sponsors__item {
    height: 56px;
}
.evg-social-sponsors__grid--support .evg-social-sponsors__item {
    height: 42px;
}
.evg-social-sponsors__grid--support .evg-social-sponsors__item img {
    max-width: 130px;
}

@media (max-width: 640px) {
    .evg-social-sponsors {
        /* El padding bottom del sticky CTA vive en el wrapper .evg-social
           (calc(95px + safe-area)). Acá solo el padding interno del último
           tier — sin band-aid local que duplicaba el espacio. */
        padding: 24px 16px 18px;
    }
    .evg-social-sponsors__grid {
        gap: 18px 28px;
    }
    .evg-social-sponsors__grid--main .evg-social-sponsors__item {
        height: 60px;
    }
    .evg-social-sponsors__grid--main .evg-social-sponsors__item img {
        max-width: 160px;
    }
}

/* ════════════════════════════════════════════════════════════════
   ACTIONS — Calendar + Share buttons (Sprint 1).
   Dos botones secundarios en una fila, debajo del bloque "Sobre el evento".
   Patrón Luma/Eventbrite: ayudan conversión sin competir con el CTA principal.
═════════════════════════════════════════════════════════════════ */
.evg-social-actions {
    max-width: 860px;
    margin: 0 auto;
    padding: 8px 20px 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 3;
}
.evg-social-actions__menu {
    position: relative;
}
.evg-social-actions__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--evg-surface, rgba(255, 255, 255, 0.07));
    border: 1px solid var(--evg-border, rgba(255, 255, 255, 0.15));
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.evg-social-actions__btn:hover {
    background: var(--evg-surface-hover, rgba(255, 255, 255, 0.11));
    border-color: var(--evg-border-hover, rgba(255, 255, 255, 0.24));
}
.evg-social-actions__btn:active {
    transform: translateY(1px);
}
.evg-social-actions__btn svg {
    flex-shrink: 0;
    opacity: 0.85;
}

/* Popover dropdown */
.evg-social-actions__pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    background: rgba(15, 17, 24, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.evg-social-actions__pop-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.86);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
.evg-social-actions__pop-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 1);
}

[x-cloak] { display: none !important; }

@media (max-width: 640px) {
    .evg-social-actions {
        padding: 6px 16px 0;
    }
    .evg-social-actions__btn {
        padding: 9px 14px;
        font-size: 13px;
    }
    .evg-social-actions__pop {
        min-width: 180px;
    }
}

/* ════════════════════════════════════════════════════════════════
   HOST CARD — Sprint 2.
   Reemplaza "Presentado por X" plano con tarjeta enriquecida con avatar,
   bio, eventos pasados y CTA al perfil público de la org.
═════════════════════════════════════════════════════════════════ */
.evg-social-host__card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--evg-surface, rgba(255, 255, 255, 0.07));
    border: 1px solid var(--evg-border, rgba(255, 255, 255, 0.15));
    border-radius: 14px;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.evg-social-host__avatar {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg,
        rgba(var(--evg-brand-rgb, 255, 107, 53), 0.4),
        rgba(var(--evg-brand-rgb, 255, 107, 53), 0.15));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.evg-social-host__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.evg-social-host__initials {
    font-family: 'Inter Tight', -apple-system, sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: -0.02em;
}
.evg-social-host__meta {
    flex: 1;
    min-width: 0;
}
.evg-social-host__name {
    font-family: 'Inter Tight', -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.96);
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}
.evg-social-host__stats {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    letter-spacing: 0.005em;
}
.evg-social-host__bio {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.72);
    margin: 6px 0 0;
    line-height: 1.5;
}
.evg-social-host__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.evg-social-host__cta:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.22);
}
@media (max-width: 640px) {
    .evg-social-host__card {
        flex-wrap: wrap;
    }
    .evg-social-host__cta {
        margin-left: 72px;
    }
}

/* ════════════════════════════════════════════════════════════════
   LINEUP — Sprint 2.
   Grid de cards de artistas. 3-col desktop, 2-col tablet, 1-col mobile.
   Estilo Luma "Speakers".
═════════════════════════════════════════════════════════════════ */
.evg-social-lineup__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.evg-social-lineup__card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--evg-surface, rgba(255, 255, 255, 0.07));
    border: 1px solid var(--evg-border, rgba(255, 255, 255, 0.15));
    border-radius: 12px;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    transition: background 0.2s, border-color 0.2s, transform 0.18s;
}
.evg-social-lineup__card:hover {
    background: var(--evg-surface-hover, rgba(255, 255, 255, 0.11));
    border-color: var(--evg-border-hover, rgba(255, 255, 255, 0.24));
    transform: translateY(-1px);
}
.evg-social-lineup__avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg,
        rgba(var(--evg-brand-rgb, 255, 107, 53), 0.4),
        rgba(var(--evg-brand-rgb, 255, 107, 53), 0.12));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.evg-social-lineup__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.evg-social-lineup__initials {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.02em;
}
.evg-social-lineup__meta {
    flex: 1;
    min-width: 0;
}
.evg-social-lineup__name {
    font-family: 'Inter Tight', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.96);
    margin: 0 0 2px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.evg-social-lineup__role {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 6px;
}
.evg-social-lineup__links {
    display: flex;
    gap: 8px;
}
.evg-social-lineup__links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.15s, transform 0.15s;
}
.evg-social-lineup__links a:hover {
    color: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
}
@media (max-width: 900px) {
    .evg-social-lineup__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .evg-social-lineup__grid { grid-template-columns: 1fr; gap: 10px; }
}

/* ════════════════════════════════════════════════════════════════
   FAQ — Sprint 2.
   <details>/<summary> nativos con animación de chevron + reveal suave.
═════════════════════════════════════════════════════════════════ */
.evg-social-faq__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.evg-social-faq__item {
    background: var(--evg-surface, rgba(255, 255, 255, 0.07));
    border: 1px solid var(--evg-border, rgba(255, 255, 255, 0.15));
    border-radius: 12px;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    overflow: hidden;
    transition: background 0.18s, border-color 0.18s;
}
.evg-social-faq__item:hover {
    background: var(--evg-surface-hover, rgba(255, 255, 255, 0.10));
}
.evg-social-faq__item[open] {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--evg-border-hover, rgba(255, 255, 255, 0.22));
}
.evg-social-faq__q {
    list-style: none;
    cursor: pointer;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.94);
    letter-spacing: -0.005em;
    user-select: none;
}
.evg-social-faq__q::-webkit-details-marker { display: none; }
.evg-social-faq__chevron {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.45);
    transition: transform 0.22s ease;
}
.evg-social-faq__item[open] .evg-social-faq__chevron {
    transform: rotate(180deg);
    color: rgba(255, 255, 255, 0.85);
}
.evg-social-faq__a {
    padding: 0 18px 16px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.6;
}
.evg-social-faq__a p { margin: 0 0 8px; }
.evg-social-faq__a p:last-child { margin-bottom: 0; }
.evg-social-faq__a a {
    color: var(--evg-brand, #ff6b35);
    text-decoration: none;
}
.evg-social-faq__a a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════
   SOCIAL PROOF — Sprint 3.
   Counter de asistentes confirmados. Patrón Luma: 3 dots animados +
   "X personas ya confirmaron". Discreto, no compite con CTA.
═════════════════════════════════════════════════════════════════ */
.evg-social-proof {
    max-width: 860px;
    margin: 6px auto 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 13.5px;
    position: relative;
    z-index: 2;
}
.evg-social-proof__dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.evg-social-proof__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.9);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
    animation: evgSocialProofPulse 1.6s ease-in-out infinite;
}
.evg-social-proof__dot:nth-child(2) { animation-delay: 0.2s; }
.evg-social-proof__dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes evgSocialProofPulse {
    0%, 100% { opacity: 0.5; transform: scale(0.85); }
    50%      { opacity: 1; transform: scale(1.1); }
}
.evg-social-proof__text strong {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
    margin-right: 2px;
}

/* ════════════════════════════════════════════════════════════════
   TICKET URGENCY BADGE — Sprint 3.
   Badge "Termina en X días" cuando sale_ends_at está dentro de 7d.
   Va al lado del pill de status, dentro del ticket head.
═════════════════════════════════════════════════════════════════ */
.evg-social-ticket__urgency {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(var(--evg-brand-rgb, 255, 107, 53), 0.16);
    border: 1px solid rgba(var(--evg-brand-rgb, 255, 107, 53), 0.32);
    color: var(--evg-brand, #ff6b35);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.3;
    white-space: nowrap;
}
.evg-social-ticket__urgency svg {
    flex-shrink: 0;
    opacity: 0.9;
}

/* ════════════════════════════════════════════════════════════════
   SPOTIFY MODAL — Modal con embed oficial de Spotify para previsualizar
   al artista sin perder contexto de la página de compra.
═════════════════════════════════════════════════════════════════ */
.evg-social-lineup__spotify-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
}
.evg-social-lineup__spotify-btn:hover {
    color: #1db954;
    transform: translateY(-1px);
}

.evg-spotify-modal {
    position: fixed;
    inset: 0;
    /* z-index máximo: arriba de topbar admin (z:50/999), preview banner,
       sticky CTA (z:100), evg-event-header (z:100) y dropdowns. */
    z-index: 99999;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.evg-spotify-modal__panel {
    width: 100%;
    max-width: 460px;
    background: rgba(15, 17, 24, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
}

/* Alpine transition classes */
.evg-spotify-modal__panel--enter {
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.4, 1), opacity 0.22s ease;
}
.evg-spotify-modal__panel--enter-start {
    transform: scale(0.94) translateY(8px);
    opacity: 0;
}
.evg-spotify-modal__panel--enter-end {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.evg-spotify-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.evg-spotify-modal__title {
    font-family: 'Inter Tight', -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.96);
    margin: 0;
    letter-spacing: -0.01em;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.evg-spotify-modal__close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.evg-spotify-modal__close:hover {
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 1);
}

.evg-spotify-modal__body {
    padding: 14px 16px 4px;
}
.evg-spotify-modal__body iframe {
    display: block;
    border: 0;
    border-radius: 12px;
    background: #121212;
}

.evg-spotify-modal__foot {
    padding: 12px 20px 16px;
    display: flex;
    justify-content: center;
}
.evg-spotify-modal__open-spotify {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(29, 185, 84, 0.14);
    border: 1px solid rgba(29, 185, 84, 0.36);
    color: #1db954;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
}
.evg-spotify-modal__open-spotify:hover {
    background: rgba(29, 185, 84, 0.22);
    transform: translateY(-1px);
}

@media (max-width: 540px) {
    .evg-spotify-modal { padding: 12px; align-items: flex-end; }
    .evg-spotify-modal__panel { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   SUCCESS STATE OVERRIDE — Step 3 final del checkout social.
   El base .evg-success-title usa --evg-gray-900 (negro) que sobre el
   fondo dark del checkout social queda invisible. Lo forzamos a blanco.
═════════════════════════════════════════════════════════════════ */
.evg-social .evg-success-title {
    color: rgba(255, 255, 255, 0.96) !important;
    font-family: 'Inter Tight', -apple-system, sans-serif;
    letter-spacing: -0.02em;
}
.evg-social .evg-success-message {
    color: rgba(255, 255, 255, 0.72) !important;
}
.evg-social .evg-success-message strong {
    color: var(--evg-brand, #ff6b35) !important;
    font-weight: 600;
}
.evg-social .evg-back-link {
    color: rgba(255, 255, 255, 0.55) !important;
}
.evg-social .evg-back-link:hover {
    color: rgba(255, 255, 255, 0.85) !important;
}