/* ══════════════════════════════════════════════════════════════════════════
   TEMA "MÁGICO" — landing del organizador Expo Comics
   ══════════════════════════════════════════════════════════════════════════
   Se suma a subdomain-feed.css: sólo repinta, no rehace la estructura, así que
   si mañana cambia el perfil estándar esta landing lo hereda.

   Todo el clima es CSS puro (cielo nocturno, estrellas, oro, pergamino): sin
   imágenes externas y sin marcas registradas de terceros — el universo es
   genérico "de magia", igual que el flyer del propio organizador.
   ══════════════════════════════════════════════════════════════════════════ */

.org-tema--magico {
    --mg-noche: #0a0a1f;
    --mg-noche-2: #141033;
    --mg-oro: #f6c453;
    --mg-oro-hondo: #c9962a;
    --mg-pergamino: #f4e7c8;
    --mg-tinta: #2a1e08;
    --mg-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

    background: var(--mg-noche);
    color: var(--mg-pergamino);
}

/* ── Cielo nocturno con estrellas, en tres capas de profundidad ── */
.org-tema--magico::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 20% 12%, rgba(246, 196, 83, .10), transparent 45%),
        radial-gradient(circle at 82% 78%, rgba(124, 77, 255, .16), transparent 50%),
        linear-gradient(180deg, var(--mg-noche) 0%, var(--mg-noche-2) 55%, var(--mg-noche) 100%);
}

.org-tema--magico::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 34% 42%, rgba(255,255,255,.85), transparent),
        radial-gradient(2px 2px at 58% 12%, var(--mg-oro), transparent),
        radial-gradient(1.4px 1.4px at 76% 55%, #fff, transparent),
        radial-gradient(1.1px 1.1px at 88% 26%, rgba(255,255,255,.7), transparent),
        radial-gradient(1.7px 1.7px at 25% 74%, var(--mg-oro), transparent),
        radial-gradient(1.2px 1.2px at 65% 88%, #fff, transparent),
        radial-gradient(1.3px 1.3px at 45% 62%, rgba(255,255,255,.75), transparent);
    background-repeat: repeat;
    background-size: 100% 100%;
    animation: mg-titilar 6s ease-in-out infinite alternate;
}

@keyframes mg-titilar {
    from { opacity: .55; }
    to   { opacity: 1; }
}

/* ── Marco dorado alrededor de cada bloque (como el flyer) ── */
.org-tema--magico .sdf-detail,
.org-tema--magico .sdf-panel-block {
    position: relative;
    background: linear-gradient(180deg, rgba(20, 16, 51, .92), rgba(10, 10, 31, .92));
    border: 1px solid rgba(246, 196, 83, .34);
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 0 60px rgba(246, 196, 83, .05);
    color: var(--mg-pergamino);
}

/* ── Encabezado ── */
.org-tema--magico h1 {
    font-family: var(--mg-serif);
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.06;
    letter-spacing: .01em;
    background: linear-gradient(180deg, #fff6da 0%, var(--mg-oro) 48%, var(--mg-oro-hondo) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 18px rgba(246, 196, 83, .25);
}

.org-tema--magico h2 {
    font-family: var(--mg-serif);
    color: var(--mg-oro);
    letter-spacing: .01em;
}

/* El avatar como medallón, con halo. */
.org-tema--magico .sdf-organizer-avatar {
    border: 2px solid var(--mg-oro);
    border-radius: 50%;
    background: #0a0a1f;
    box-shadow: 0 0 0 5px rgba(246, 196, 83, .12), 0 0 34px rgba(246, 196, 83, .38);
}

.org-tema--magico .sdf-organizer-spark {
    background: linear-gradient(135deg, var(--mg-oro), var(--mg-oro-hondo));
    color: var(--mg-tinta);
    font-weight: 800;
}

/* La bio sobre pergamino. */
.org-tema--magico .sdf-detail-lead {
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(244, 231, 200, .95), rgba(226, 208, 166, .92));
    border: 1px solid rgba(201, 150, 42, .5);
    color: var(--mg-tinta);
    font-family: var(--mg-serif);
    font-size: 1rem;
    line-height: 1.55;
    box-shadow: inset 0 0 26px rgba(160, 116, 30, .18);
}

/* ── Chips, estadísticas y textos sueltos ── */
.org-tema--magico .sdf-card-kicker span,
.org-tema--magico .sdf-organizer-kicker span {
    background: rgba(246, 196, 83, .12);
    border: 1px solid rgba(246, 196, 83, .3);
    color: var(--mg-oro);
}

.org-tema--magico .sdf-panel-title-row span,
.org-tema--magico .sdf-organizer-list-copy span,
.org-tema--magico p,
.org-tema--magico label > span,
.org-tema--magico .sdf-report-legal { color: rgba(244, 231, 200, .78); }

.org-tema--magico .sdf-link,
.org-tema--magico a { color: var(--mg-oro); }

/* ── Botones ── */
.org-tema--magico .sdf-btn {
    background: rgba(246, 196, 83, .08);
    border: 1px solid rgba(246, 196, 83, .38);
    color: var(--mg-pergamino);
}

.org-tema--magico .sdf-btn--primary,
.org-tema--magico .sdf-btn[type="submit"],
.org-tema--magico button[type="submit"] {
    background: linear-gradient(135deg, #fbe08a, var(--mg-oro) 45%, var(--mg-oro-hondo));
    border: 0;
    color: var(--mg-tinta);
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(246, 196, 83, .32);
}

/* ── Las fechas, como entradas de un evento ── */
.org-tema--magico .sdf-organizer-list-card {
    background: linear-gradient(180deg, rgba(244, 231, 200, .96), rgba(230, 213, 173, .94));
    border: 1px solid rgba(201, 150, 42, .55);
    color: var(--mg-tinta);
}

.org-tema--magico .sdf-organizer-list-card strong,
.org-tema--magico .sdf-organizer-list-card span,
.org-tema--magico .sdf-organizer-list-card em { color: var(--mg-tinta); }

/* Muesca de ticket a los costados. */
.org-tema--magico .sdf-organizer-list-card::before,
.org-tema--magico .sdf-organizer-list-card::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--mg-noche-2);
}
.org-tema--magico .sdf-organizer-list-card::before { left: -8px; }
.org-tema--magico .sdf-organizer-list-card::after { right: -8px; }
.org-tema--magico .sdf-organizer-list-card { position: relative; overflow: visible; }

.org-tema--magico .sdf-organizer-date-badge {
    background: linear-gradient(135deg, #2a1e5e, #0a0a1f);
    border: 1px solid var(--mg-oro);
    color: var(--mg-oro);
}

/* ── Formulario sobre pergamino ── */
.org-tema--magico input,
.org-tema--magico select,
.org-tema--magico textarea {
    background: rgba(244, 231, 200, .95);
    border: 1px solid rgba(201, 150, 42, .5);
    color: var(--mg-tinta);
}

.org-tema--magico input::placeholder,
.org-tema--magico textarea::placeholder { color: rgba(42, 30, 8, .5); }

/* ── Detalles decorativos ── */
.org-tema--magico .sdf-organizer-hero { position: relative; }

/* Varita con destello, arriba a la derecha del hero. */
.org-tema--magico .sdf-organizer-hero::after {
    content: "✦";
    position: absolute;
    top: -4px;
    right: 4px;
    font-size: 1.4rem;
    color: var(--mg-oro);
    text-shadow: 0 0 14px rgba(246, 196, 83, .8);
    animation: mg-brillo 3.2s ease-in-out infinite;
}

@keyframes mg-brillo {
    0%, 100% { opacity: .35; transform: scale(.85) rotate(0deg); }
    50%      { opacity: 1;   transform: scale(1.15) rotate(18deg); }
}

@media (prefers-reduced-motion: reduce) {
    .org-tema--magico::after,
    .org-tema--magico .sdf-organizer-hero::after { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Ajustes de especificidad.
   El CSS base pinta varios bloques con `background-image` (gradientes), que gana
   sobre un `background-color` propio aunque venga después. Por eso acá se
   apaga la imagen de fondo explícitamente en vez de sólo cambiar el color.
   ══════════════════════════════════════════════════════════════════════════ */

/* El cielo tiene que cubrir TODA la página: .sdf-page pinta sus propios
   gradientes rosados sobre el body y quedaba una franja clara al final. */
body.org-tema--magico {
    background-image: none;
    background-color: var(--mg-noche);
}

body.org-tema--magico .sdf-shell { background: transparent; }

/* Barra superior: venía en crema y cortaba el clima nocturno. */
body.org-tema--magico .sdf-top {
    background-color: rgba(10, 10, 31, .92);
    border-bottom: 1px solid rgba(246, 196, 83, .22);
    color: var(--mg-pergamino);
    backdrop-filter: blur(8px);
}
body.org-tema--magico .sdf-top a { color: var(--mg-pergamino); }

/* Las fechas, como entradas de papel. */
body.org-tema--magico .sdf-organizer-list-card {
    background-image: none;
    background-color: var(--mg-pergamino);
    border-color: rgba(201, 150, 42, .55);
}

/* El badge del día: fondo nocturno y número dorado (heredaba la tinta oscura
   de la entrada y quedaba oscuro sobre oscuro, ilegible). */
body.org-tema--magico .sdf-organizer-date-badge,
body.org-tema--magico .sdf-organizer-date-badge strong,
body.org-tema--magico .sdf-organizer-date-badge em {
    color: var(--mg-oro);
}
body.org-tema--magico .sdf-organizer-date-badge {
    background-image: linear-gradient(135deg, #241c52, #0a0a1f);
    border: 1px solid rgba(246, 196, 83, .7);
}

/* Estadísticas del encabezado. */
body.org-tema--magico .sdf-detail-facts > div {
    background-image: none;
    background-color: rgba(246, 196, 83, .07);
    border: 1px solid rgba(246, 196, 83, .28);
}
body.org-tema--magico .sdf-detail-facts strong { color: var(--mg-oro); }
body.org-tema--magico .sdf-detail-facts span { color: var(--mg-pergamino); }

/* Los botones secundarios también traían gradiente propio. */
body.org-tema--magico .sdf-btn {
    background-image: none;
    background-color: rgba(246, 196, 83, .08);
}
body.org-tema--magico .sdf-btn--primary,
body.org-tema--magico button[type="submit"],
body.org-tema--magico .sdf-btn[type="submit"] {
    background-image: linear-gradient(135deg, #fbe08a, var(--mg-oro) 45%, var(--mg-oro-hondo));
    background-color: var(--mg-oro);
    color: var(--mg-tinta);
}

/* Bloques de contenido. */
body.org-tema--magico .sdf-detail,
body.org-tema--magico .sdf-panel-block {
    background-image: none;
    background-color: rgba(20, 16, 51, .9);
}

/* El botón de Instagram traía su degradado rosa de marca y rompía la paleta. */
body.org-tema--magico .sdf-ig-btn {
    background-image: none;
    background-color: rgba(246, 196, 83, .12);
    border: 1px solid rgba(246, 196, 83, .5);
    color: var(--mg-oro);
}

/* Los enlaces a redes, más compactos: cuatro barras apiladas ocupaban media
   pantalla. OJO: .sdf-detail-actions es GRID, no flex — con flex-wrap no pasaba
   nada. Se arma una grilla de 2 columnas y el CTA principal ocupa la fila. */
body.org-tema--magico .sdf-detail-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
}
body.org-tema--magico .sdf-detail-actions > .sdf-btn--primary { grid-column: 1 / -1; }
body.org-tema--magico .sdf-detail-actions > .sdf-ig-btn { justify-self: start; }
body.org-tema--magico .sdf-detail-actions > .sdf-btn:not(.sdf-btn--primary) {
    min-width: 0;
    padding-inline: 10px;
    font-size: .84rem;
}

/* En desktop las tres estadísticas entraban 2 + 1, con "Zonas" sola en su fila. */
@media (min-width: 760px) {
    body.org-tema--magico .sdf-detail-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    body.org-tema--magico .sdf-detail-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}