/* Inter solo — el resto (Cinzel, Cinzel Decorative, IM Fell English) ya lo carga astral.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');


:root {
    /* Colores base */
    --oscuro:    #06030B;
    --oscuro-s:  #0D0814;
    --tinta:     #2C1A10;
    --tinta-s:   #4A3322;
    --oro-hp:    #D4AF37;
    --oro-v:     #C89832;
    --oro-s:     #E8C850;
    --fuego:     #B22222;
    --fuego-s:   #8B0000;
    --pergamino: #F3E8CE;
    --pergamino-s: #E2D0A5;

    /* Layout */
    --gap-s: 24px;
    --gap-m: 48px;
    --gap-l: 80px;
    --rad:   12px;

    /* KC Style Kit */
    --ft: 'IM Fell English', serif;
    --terra:    #C89832;
    --terra-l:  #E8C850;
    --olivo:    #7A1A08;
    --olivo-l:  #C89832;
    --olivo-xl: #F3E8CE;
    --crema:    #F3E8CE;
    --ease-bounce: cubic-bezier(.34,1.56,.64,1);
}

/* ════════════════════════════════════════════
   INTEGRACIÓN CON ASTRAL (ANIMACIÓN INTRO)
════════════════════════════════════════════ */
/* Asegurar que las secciones nuevas permanecen invisibles hasta el unlock */
#main-contenido {
    opacity: 0;
    transition: opacity 1.5s ease 1s;
    background: var(--oscuro);
    color: var(--pergamino);
    position: relative;
    z-index: 10;
}
body.desbloqueado #main-contenido {
    opacity: 1;
}
body {
    background: var(--oscuro);
}

/* ════════════════════════════════════════════
   PORTADA Y ETIQUETAS
════════════════════════════════════════════ */
.info-portada {
    text-align: center;
    margin-top: 40px;
    z-index: 10;
    position: relative;
    /* Pill de niebla muy sutil para que los textos lean contra el fondo */
    background: radial-gradient(ellipse at center, rgba(6,3,11,.55) 0%, transparent 75%);
    padding: 24px 28px 10px;
    border-radius: 20px;
}
.portada-label {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.6rem, 2vw, 0.8rem);
    letter-spacing: 6px;
    color: var(--oro-v);
    text-transform: uppercase;
    opacity: 0.8;
}
.portada-nombre {
    font-family: 'Cinzel Decorative', 'IM Fell English', Georgia, serif;
    font-size: clamp(4rem, 12vw, 6.5rem);
    color: var(--pergamino);
    text-shadow:
        0 4px 40px rgba(200,152,10,.5),
        0 0 60px rgba(200,152,10,.15),
        0 2px 12px rgba(0,0,0,.95),
        2px 4px 20px rgba(0,0,0,.8);
    margin: 10px 0;
    letter-spacing: 4px;
    animation: nombre-glow 3s alternate infinite;
}
@keyframes nombre-glow {
    0% { text-shadow: 0 4px 30px rgba(200, 152, 10, 0.3); }
    100% { text-shadow: 0 4px 60px rgba(200, 152, 10, 0.6), 0 0 20px rgba(255, 255, 255, 0.2); }
}
.portada-nivel {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    color: var(--oro-hp);
    letter-spacing: 5px;
    margin-bottom: 20px;
}

/* ════════════════════════════════════════════
   BASE Y SECCIONES
════════════════════════════════════════════ */
.seccion {
    padding: var(--gap-l) 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid rgba(200, 152, 10, 0.05);
}
.seccion-alt {
    background: radial-gradient(ellipse at center, var(--oscuro-s) 0%, var(--oscuro) 100%);
}
.sec-label {
    font-family: 'Cinzel', serif;
    font-size: 0.65em;
    letter-spacing: 5px;
    color: #E8C850;
    text-transform: uppercase;
    opacity: 0.8;
    display: block;
    margin-bottom: 12px;
}
.sec-titulo {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(1.8rem, 6vw, 2.8rem);
    color: #F3E8CE;
    margin: 0;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 2px 20px rgba(200,152,10,0.15);
}
.sec-titulo em {
    font-family: 'IM Fell English', serif;
    color: #E8C850;
    font-style: italic;
    font-size: 1.1em;
}
.mag-div {
    margin: 20px 0 30px;
}
.mag-div span {
    color: #D4AF37;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    letter-spacing: 4px;
    opacity: 0.9;
}

/* Shake para validación */
@keyframes shake {
    0%,100% { transform: translateX(0); }
    20%      { transform: translateX(-8px); }
    40%      { transform: translateX(8px); }
    60%      { transform: translateX(-5px); }
    80%      { transform: translateX(5px); }
}

/* ════════════════════════════════════════════
   1. BOLETO KING'S CROSS — COUNTDOWN TICKET
   Modo Davinci 🔥 — Puro CSS, sin imágenes
════════════════════════════════════════════ */

/* ── Wrapper ── */
.ticket-wrap {
    display: flex;
    justify-content: center;
    margin: 10px auto 0;
    max-width: 560px;
    perspective: 800px;
}

/* ── Boleto principal ── */
.ticket {
    position: relative;
    width: 100%;
    background:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 3px,
            rgba(120,80,30,.015) 3px,
            rgba(120,80,30,.015) 4px),
        linear-gradient(160deg,
            #F5E6C8 0%,
            #EDD9A8 30%,
            #E8D098 50%,
            #EDD9A8 70%,
            #F0DEB5 100%);
    border-radius: 6px;
    padding: 0;
    box-shadow:
        0 20px 60px rgba(0,0,0,.65),
        0 4px 20px rgba(0,0,0,.4),
        inset 0 0 50px rgba(100,60,20,.08);
    overflow: hidden;
    transform: rotate(-0.8deg);
    transition: transform .6s cubic-bezier(.34,1.56,.64,1), box-shadow .6s ease;
}
.ticket:hover {
    transform: rotate(0deg) translateY(-6px);
    box-shadow:
        0 30px 80px rgba(0,0,0,.7),
        0 6px 30px rgba(0,0,0,.5),
        0 0 40px rgba(200,152,10,.08),
        inset 0 0 50px rgba(100,60,20,.08);
}

/* Envejecimiento — manchas surtidas */
.ticket::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(100,60,20,.06) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 15%, rgba(80,50,10,.05) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(60,30,5,.02) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}
/* Borde fino dorado interno */
.ticket::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(140,100,30,.2);
    border-radius: 3px;
    pointer-events: none;
    z-index: 1;
}

/* ── Perforaciones laterales (tear-line) ── */
.ticket-perf {
    position: absolute;
    top: 0; bottom: 0;
    width: 14px;
    z-index: 5;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 5px,
        rgba(60,30,10,.08) 5px,
        rgba(60,30,10,.08) 5.5px,
        transparent 5.5px,
        transparent 10px
    );
}
.ticket-perf--l { left: 16px; }
.ticket-perf--r { right: 16px; }
.ticket-perf::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 1px;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(100,60,20,.18) 3px,
        rgba(100,60,20,.18) 6px,
        transparent 6px,
        transparent 9px
    );
}
.ticket-perf--l::after { right: 6px; }
.ticket-perf--r::after { left: 6px; }

/* ── Cuerpo ── */
.ticket-body {
    padding: 28px 38px 24px;
    position: relative;
    z-index: 2;
}

/* ── Cabecera Railway ── */
.ticket-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
}
.ticket-hline {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(100,60,20,.35), transparent);
}
.ticket-railway {
    font-family: 'Cinzel', serif;
    font-size: clamp(.52rem, 1.8vw, .68rem);
    font-weight: 700;
    letter-spacing: 4px;
    color: #5A3A1A;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Ruta King's Cross → Hogwarts ── */
.ticket-route {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 4vw, 32px);
    margin-bottom: 22px;
}
.ticket-station {
    text-align: center;
}
.ticket-platform {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: clamp(.45rem, 1.5vw, .58rem);
    letter-spacing: 3px;
    color: rgba(90,58,26,.6);
    text-transform: uppercase;
    margin-bottom: 2px;
}
.ticket-city {
    display: block;
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(1.2rem, 4.5vw, 1.6rem);
    font-weight: 400;
    color: #3A2010;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
.ticket-arrow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.ticket-arrow-line {
    width: clamp(16px, 4vw, 32px);
    height: 1px;
    background: linear-gradient(90deg, transparent, #8A6A3E, transparent);
}
.ticket-arrow-icon {
    font-size: 1.1rem;
    filter: grayscale(.3) drop-shadow(0 1px 2px rgba(0,0,0,.15));
}

/* ── Departure label ── */
.ticket-departure-label {
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: .52rem;
    letter-spacing: 5px;
    color: rgba(90,58,26,.5);
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* ── Ventanas del countdown ── */
.ticket-countdown {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(4px, 1.5vw, 10px);
    margin-bottom: 22px;
}
.ticket-digit-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.ticket-digit {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.8rem, 6vw, 2.5rem);
    font-weight: 700;
    color: #2A1508;
    width: clamp(54px, 15vw, 72px);
    height: clamp(56px, 16vw, 72px);
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(180deg,
            rgba(200,160,60,.12) 0%,
            rgba(245,230,200,.6) 40%,
            rgba(200,160,60,.08) 100%);
    border: 1px solid rgba(120,80,30,.28);
    border-radius: 5px;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.35),
        inset 0 -2px 6px rgba(80,40,10,.12),
        0 3px 8px rgba(0,0,0,.2);
    position: relative;
    text-shadow: 0 1px 0 rgba(255,255,255,.3);
    transition: transform .15s ease;
}
/* Línea de split central del flip */
.ticket-digit::before {
    content: '';
    position: absolute;
    left: 8%; right: 8%; top: 50%;
    height: 1px;
    background: rgba(120,80,30,.12);
    pointer-events: none;
}
/* Micro-iluminación top */
.ticket-digit::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 100%);
    border-radius: 5px 5px 0 0;
    pointer-events: none;
}
.ticket-digit-lbl {
    font-family: 'Cinzel', serif;
    font-size: .45rem;
    letter-spacing: 3px;
    color: rgba(90,58,26,.55);
    text-transform: uppercase;
}
.ticket-colon {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 700;
    color: rgba(90,58,26,.3);
    margin-top: 12px;
}

/* ── Metadatos del boleto ── */
.ticket-meta {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid rgba(120,80,30,.15);
    border-bottom: 1px solid rgba(120,80,30,.15);
    padding: 12px 0;
    margin-bottom: 14px;
}
.ticket-meta-item {
    text-align: center;
}
.ticket-meta-lbl {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: .42rem;
    letter-spacing: 2px;
    color: rgba(90,58,26,.45);
    text-transform: uppercase;
    margin-bottom: 2px;
}
.ticket-meta-val {
    font-family: 'IM Fell English', serif;
    font-size: clamp(.7rem, 2.2vw, .85rem);
    font-style: italic;
    color: #4A2A12;
}
.ticket-status {
    color: #7A1A08 !important;
    font-weight: 600;
    text-shadow: 0 0 6px rgba(122,26,8,.15);
}

/* ── Legal ── */
.ticket-legal {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: .38rem;
    letter-spacing: 2px;
    color: rgba(90,58,26,.35);
    line-height: 1.8;
    text-transform: uppercase;
}

/* ── SELLO "VALIDATED" ── */
.ticket-stamp {
    position: absolute;
    top: 50%; right: 8%;
    transform: translate(0,-50%) rotate(-22deg);
    z-index: 10;
    pointer-events: none;
}
.ticket-stamp span {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: clamp(1rem, 3.5vw, 1.5rem);
    font-weight: 800;
    letter-spacing: 6px;
    color: rgba(155,30,20,.28);
    text-transform: uppercase;
    border: 3px solid rgba(155,30,20,.22);
    border-radius: 6px;
    padding: 5px 16px;
    text-shadow: 0 0 4px rgba(155,30,20,.1);
    /* Efecto estampado con doble borde */
    box-shadow: inset 0 0 0 1px rgba(155,30,20,.08);
}

/* ── Muescas de perforación (punched holes) ── */
.ticket-punch {
    position: absolute;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--oscuro, #0A0510);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,.5),
        0 0 0 2px rgba(120,80,30,.15);
    z-index: 10;
}
.ticket-punch--1 { bottom: 22px; left: 28px; }
.ticket-punch--2 { bottom: 22px; right: 28px; }

/* ── Responsive ── */
@media (max-width: 480px) {
    .ticket-body { padding: 22px 28px 18px; }
    .ticket-route { gap: 8px; }
    .ticket-meta { flex-direction: column; gap: 8px; align-items: center; }
    .ticket-stamp { right: 4%; }
    .ticket-stamp span { font-size: .8rem; padding: 3px 10px; letter-spacing: 4px; }
}

/* ── Ticket flip — ink stamp effect ── */
.ticket-digit.ticket-flipping {
    animation: ticket-flip .3s ease both;
}
@keyframes ticket-flip {
    0%   { transform: scaleY(1); }
    30%  { transform: scaleY(.85); box-shadow:
                inset 0 2px 4px rgba(255,255,255,.35),
                inset 0 -2px 6px rgba(80,40,10,.12),
                0 3px 8px rgba(0,0,0,.35); }
    100% { transform: scaleY(1); }
}








/* ════════════════════════════════════════════
   2. RETRATOS VIVOS (GALERÍA)
════════════════════════════════════════════ */
.galeria-retratos {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    width: 100%;
    max-width: 900px;
}
.retrato {
    position: relative;
    border: 6px solid #2a1f1a;
    border-radius: 4px;
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.8),
        inset 0 0 20px rgba(0,0,0,0.9),
        0 0 15px rgba(200,152,10,0.1);
    background: #000;
    overflow: hidden;
    width: 100%;
    max-width: 320px;
}
.retrato::before {
    content: ''; position: absolute; inset: 0;
    border: 1px solid rgba(200,152,10,0.3);
    z-index: 2; pointer-events: none;
}
.retrato video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(0.3) contrast(1.1) brightness(0.9);
    transition: filter 0.8s ease;
}
.retrato:hover video {
    filter: sepia(0) contrast(1.1) brightness(1.1);
}
.retrato-label {
    position: absolute;
    bottom: 12px; left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    padding: 6px 12px;
    border: 1px solid rgba(200,152,10,0.4);
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    color: var(--oro-v);
    letter-spacing: 2px;
    white-space: nowrap;
    z-index: 3;
}

/* ════════════════════════════════════════════
   3. ITINERARIO (TIMELINE)
════════════════════════════════════════════ */
.timeline-mag {
    position: relative;
    max-width: 500px;
    width: 100%;
    margin-top: 30px;
    padding-left: 20px;
}
.timeline-mag::before {
    content: ''; position: absolute;
    left: 2px; top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--oro-v), var(--oro-v), transparent);
    opacity: 0.3;
}
.tl-item {
    position: relative;
    padding-left: 30px;
    margin-bottom: 40px;
}
.tl-ico {
    position: absolute;
    left: -29px; top: 0;
    width: 20px; height: 20px;
    background: var(--oscuro);
    border: 1px solid var(--oro-v);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem;
    color: var(--pergamino);
    box-shadow: 0 0 10px rgba(200,152,10,0.3);
}
.tl-hora {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    color: var(--oro-v);
}
.tl-titulo {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.2rem;
    color: var(--pergamino);
    margin: 4px 0 8px;
}
.tl-desc {
    font-family: 'IM Fell English', serif;
    font-size: 1rem;
    color: rgba(243, 232, 206, 0.7);
    line-height: 1.4;
    margin: 0;
}

/* ════════════════════════════════════════════
   4. MAPA DEL MERODEADOR — REDISEÑO DAVINCI 🔥
   Puro CSS. Pergamino real, tinta, huellas.
════════════════════════════════════════════ */

.mm-wrap {
    display: flex;
    justify-content: center;
    max-width: 620px;
    margin: 0 auto;
}

/* ── Pergamino principal ── */
.mm-map {
    position: relative;
    width: 100%;
    background:
        /* Fibras del papel */
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(130,90,40,.012) 2px, rgba(130,90,40,.012) 3px),
        repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(100,70,25,.008) 4px, rgba(100,70,25,.008) 5px),
        /* Base pergamino */
        linear-gradient(170deg, #F2E4C4 0%, #E8D4A0 25%, #DFCA8E 50%, #E6D29C 75%, #EDD8AC 100%);
    border: 2px solid #9A7A4E;
    border-radius: 3px;
    padding: 40px 32px 30px;
    text-align: center;
    box-shadow:
        0 20px 60px rgba(0,0,0,.55),
        0 5px 20px rgba(0,0,0,.35),
        inset 0 0 80px rgba(100,60,20,.15),
        inset 0 0 30px rgba(80,50,20,.08);
    overflow: hidden;
}
/* Envejecimiento: bordes quemados */
.mm-map::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(80,40,10,.12) 0%, transparent 35%),
        radial-gradient(ellipse at 100% 0%, rgba(80,40,10,.09) 0%, transparent 30%),
        radial-gradient(ellipse at 0% 100%, rgba(80,40,10,.1) 0%, transparent 35%),
        radial-gradient(ellipse at 100% 100%, rgba(80,40,10,.14) 0%, transparent 30%),
        radial-gradient(ellipse at 50% 50%, rgba(120,80,30,.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ── Dobleces del pergamino ── */
.mm-crease {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}
.mm-crease--h {
    top: 48%;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 5%,
        rgba(100,60,20,.06) 15%,
        rgba(100,60,20,.1) 50%,
        rgba(100,60,20,.06) 85%,
        transparent 95%);
    box-shadow: 0 1px 0 rgba(255,255,255,.15);
}
.mm-crease--v {
    left: 50%;
    top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg,
        transparent 5%,
        rgba(100,60,20,.05) 20%,
        rgba(100,60,20,.09) 50%,
        rgba(100,60,20,.05) 80%,
        transparent 95%);
    box-shadow: 1px 0 0 rgba(255,255,255,.12);
}

/* ── Manchas de tinta ── */
.mm-inkblot {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}
.mm-inkblot--1 {
    width: 40px; height: 30px;
    top: 12%; left: 8%;
    background: radial-gradient(ellipse, rgba(60,30,10,.07) 0%, transparent 70%);
    transform: rotate(15deg);
}
.mm-inkblot--2 {
    width: 25px; height: 35px;
    bottom: 18%; right: 10%;
    background: radial-gradient(ellipse, rgba(60,30,10,.06) 0%, transparent 70%);
    transform: rotate(-20deg);
}
.mm-inkblot--3 {
    width: 50px; height: 20px;
    top: 65%; left: 45%;
    background: radial-gradient(ellipse, rgba(60,30,10,.04) 0%, transparent 70%);
}

/* ── Marco interior ornamental ── */
.mm-inner-frame {
    position: absolute;
    inset: 14px;
    border: 1.5px solid rgba(120,75,30,.18);
    border-radius: 2px;
    pointer-events: none;
    z-index: 1;
}
.mm-inner-frame::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 0.5px solid rgba(120,75,30,.08);
    pointer-events: none;
}

/* ── Cabecera ── */
.mm-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}
.mm-header-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(90,55,20,.3), transparent);
    max-width: 80px;
}
.mm-header-sub {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: clamp(.5rem, 1.6vw, .62rem);
    color: rgba(80,45,15,.5);
    letter-spacing: 1px;
    white-space: nowrap;
}

/* ── Título principal ── */
.mm-title-block {
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
}
.mm-title {
    font-family: 'Cinzel Decorative', 'IM Fell English', Georgia, serif;
    font-size: clamp(2rem, 7vw, 3.2rem);
    color: #3A1E08;
    margin: 0 0 4px;
    text-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 6px rgba(0,0,0,.08);
    line-height: 1.1;
}
.mm-subtitle {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: clamp(.6rem, 1.8vw, .75rem);
    color: rgba(80,45,15,.55);
    margin: 0;
    letter-spacing: 1px;
}

/* ── Huellas animadas ── */
.mm-footprints {
    position: relative;
    height: 30px;
    margin-bottom: 18px;
    z-index: 2;
}
.mm-foot {
    position: absolute;
    left: var(--fx, 50%);
    top: var(--fy, 50%);
    transform: translate(-50%, -50%);
    font-size: .7rem;
    opacity: 0;
    animation: mm-walk 4s ease-in-out calc(var(--fi) * 0.45s) infinite;
    filter: grayscale(.4) sepia(.3);
}
@keyframes mm-walk {
    0%   { opacity: 0; transform: translate(-50%,-50%) scale(.5); }
    15%  { opacity: .6; transform: translate(-50%,-50%) scale(1); }
    40%  { opacity: .6; }
    60%  { opacity: 0; transform: translate(-50%,-50%) scale(.8) translateY(-4px); }
    100% { opacity: 0; }
}

/* ── Botón del juramento ── */
.mm-spell-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 10px auto 16px;
    background: transparent;
    border: 1px solid rgba(100,60,20,.25);
    padding: 14px 28px;
    cursor: pointer;
    border-radius: 4px;
    transition: all .5s cubic-bezier(.34,1.56,.64,1);
    position: relative;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}
.mm-spell-btn:hover {
    background: rgba(100,60,20,.06);
    border-color: rgba(100,60,20,.4);
    transform: scale(1.02);
}
.mm-spell-wand {
    font-size: 1.4rem;
    filter: drop-shadow(0 0 8px rgba(200,152,10,.5));
    animation: mm-wand-glow 2.5s ease-in-out infinite alternate;
}
@keyframes mm-wand-glow {
    0%   { filter: drop-shadow(0 0 4px rgba(200,152,10,.3)); }
    100% { filter: drop-shadow(0 0 14px rgba(200,152,10,.7)); }
}
.mm-spell-text {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: clamp(.65rem, 2vw, .82rem);
    color: #4A2A10;
    letter-spacing: 0.5px;
}
/* Estado del botón cuando está abierto */
.mm-spell-btn.abierto { opacity: .4; transform: scale(.95); }

/* ── Contenido revelado ── */
.mm-reveal {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 1.2s cubic-bezier(.4,0,.2,1),
        opacity .8s ease .2s,
        padding .8s ease;
    position: relative;
    z-index: 2;
    padding: 0;
}
.mm-reveal.abierto {
    max-height: 900px;
    opacity: 1;
    padding: 20px 0 10px;
}

/* Separador mágico */
.mm-reveal-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 22px;
}
.mm-rdiv-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(90,50,15,.25), transparent);
    max-width: 80px;
}
.mm-rdiv-icon {
    font-size: .9rem;
    filter: drop-shadow(0 0 6px rgba(200,152,10,.4));
}

/* ── Ubicaciones del mapa ── */
.mm-locations {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.mm-location {
    text-align: center;
    padding: 16px 14px;
    position: relative;
}
.mm-loc-marker {
    font-size: 2rem;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
    animation: mm-marker-bob 3s ease-in-out infinite;
}
@keyframes mm-marker-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
.mm-loc-path {
    width: 1px;
    height: 12px;
    margin: 0 auto 8px;
    background: linear-gradient(to bottom, rgba(90,50,15,.3), transparent);
}
.mm-loc-name {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(.9rem, 3vw, 1.15rem);
    font-weight: 400;
    color: #2C1A08;
    margin: 0 0 4px;
    letter-spacing: 1px;
}
.mm-loc-time {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.1rem, 3.5vw, 1.4rem);
    font-weight: 700;
    color: #7A1A08;
    margin-bottom: 6px;
    text-shadow: 0 0 8px rgba(122,26,8,.12);
}
.mm-loc-address {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: clamp(.72rem, 2vw, .85rem);
    color: rgba(60,35,12,.7);
    line-height: 1.6;
    margin: 0 0 12px;
}
.mm-loc-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 18px;
    background: #3A1E08;
    color: #F2E4C4;
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: .58rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 3px;
    transition: all .3s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
.mm-loc-link:hover {
    background: #7A1A08;
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(122,26,8,.4);
}

/* ── Sendero entre ubicaciones ── */
.mm-trail {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
}
.mm-trail-foot {
    font-size: .6rem;
    opacity: .4;
    filter: grayscale(.5) sepia(.3);
    animation: mm-trail-pulse 2.5s ease-in-out infinite alternate;
}
.mm-trail-dots {
    font-family: 'IM Fell English', serif;
    font-size: .8rem;
    color: rgba(80,45,15,.3);
    letter-spacing: 4px;
}
@keyframes mm-trail-pulse {
    0%   { opacity: .2; }
    100% { opacity: .6; }
}

/* ── Botón de cierre ── */
.mm-close-btn {
    background: transparent;
    border: 1px solid rgba(100,60,20,.2);
    padding: 10px 24px;
    margin-top: 18px;
    cursor: pointer;
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: clamp(.7rem, 2vw, .82rem);
    color: rgba(80,45,15,.6);
    border-radius: 3px;
    transition: all .3s ease;
    -webkit-tap-highlight-color: transparent;
}
.mm-close-btn:hover {
    background: rgba(100,60,20,.06);
    color: rgba(80,45,15,.85);
}

/* ── Pie del mapa ── */
.mm-footer-text {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: .72rem;
    color: rgba(80,45,15,.35);
    margin-top: 16px;
    position: relative;
    z-index: 2;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .mm-map { padding: 28px 20px 22px; }
    .mm-inner-frame { inset: 10px; }
    .mm-locations { gap: 0; }
}


.mapa-box {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%237a5a35%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M-20%20120c30-26%2062-30%2092-12s58%2014%2088-12%22%2F%3E%3Cpath%20d%3D%22M-20%2096c30-26%2062-30%2092-12s58%2014%2088-12%22%2F%3E%3Cpath%20d%3D%22M-20%2052c26-22%2054-26%2080-10s50%2012%20100-14%22%2F%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%2246%22%20r%3D%2220%22%2F%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%2246%22%20r%3D%2211%22%2F%3E%3Ccircle%20cx%3D%22122%22%20cy%3D%22118%22%20r%3D%2216%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%237a5a35%22%20stroke-opacity%3D%22.07%22%20stroke-width%3D%22.7%22%3E%3Cpath%20d%3D%22M0%2040h160M0%2080h160M0%20120h160M40%200v160M80%200v160M120%200v160%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), radial-gradient(ellipse at center, #F0E4C8 0%, #D0B888 100%);
    border: 2px solid #8A6B4E;
    border-radius: 4px;
    padding: 40px 24px;
    text-align: center;
    box-shadow: inset 0 0 60px rgba(80,50,20,0.4), 0 15px 40px rgba(0,0,0,0.6);
    position: relative;
    width: 100%;
    max-width: 600px;
    color: var(--tinta);
}
.m-title {
    font-family: 'Cinzel Decorative', 'IM Fell English', Georgia, serif;
    font-size: 3rem;
    color: var(--tinta);
    margin: 0 0 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.m-btn {
    background: transparent;
    border: 1px solid var(--tinta);
    padding: 12px 24px;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: var(--tinta);
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 20px;
}
.m-btn:hover {
    background: var(--tinta);
    color: var(--pergamino);
}
.m-info {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 1.5s ease;
}
.m-info.revelado {
    opacity: 1;
    max-height: 500px;
    margin-top: 20px;
}
.btn-mapa-link {
    display: inline-block;
    background: #7A1A08;
    color: #fff;
    padding: 12px 24px;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    margin-top: 15px;
    box-shadow: 0 4px 15px rgba(122,26,8,0.4);
}

/* ── Tarjetas de evento dentro del mapa ── */
.mapa-eventos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 20px;
    text-align: left;
}
@media (max-width: 480px) {
    .mapa-eventos-grid {
        grid-template-columns: 1fr;
    }
}
.mapa-evento-card {
    background: rgba(240,228,200,0.5);
    border: 1px solid rgba(122,60,30,0.25);
    border-radius: 8px;
    padding: 16px 14px;
    text-align: center;
}
.mev-ico {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 6px;
}
.mev-titulo {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: #2C1A10;
    margin: 0 0 4px;
    letter-spacing: 1px;
}
.mev-hora {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: #7A1A08;
    font-weight: 700;
    margin-bottom: 8px;
}
.mev-dir {
    font-family: 'IM Fell English', serif;
    font-size: 0.82rem;
    color: rgba(44,26,16,0.75);
    line-height: 1.5;
    margin: 0 0 10px;
}
.mev-link {
    display: inline-block;
    background: #7A1A08;
    color: #fff;
    padding: 8px 14px;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: background 0.2s;
}
.mev-link:hover { background: #5A1206; }


/* .footprints — eliminado (no se usa en el HTML) */

/* ════════════════════════════════════════════
   5. DRESS CODE — Los estandartes premium
   están definidos en el <style> inline que
   fue movido al bloque KC PREMIUM al final
════════════════════════════════════════════ */

/* ════════════════════════════════════════════
   7. RSVP FORM — PREMIUM
════════════════════════════════════════════ */
.rsvp-form {
    width: 100%;
    max-width: 520px;
    background: rgba(15, 10, 25, 0.7);
    border: 1px solid rgba(200, 152, 10, 0.3);
    padding: 36px 32px;
    border-radius: 12px;
    box-shadow:
        0 20px 50px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(200,152,10,0.1),
        0 0 60px rgba(200,152,10,0.04);
    backdrop-filter: blur(10px);
}
.form-grp {
    margin-bottom: 22px;
}
.form-grp label {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 2px;
    color: #E8C850;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.form-grp input, .form-grp select {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(200, 152, 10, 0.25);
    padding: 14px 16px;
    font-family: 'IM Fell English', serif;
    font-size: 1rem;
    color: #F3E8CE;
    border-radius: 6px;
    transition: border-color 0.3s, box-shadow 0.3s;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.form-grp input::placeholder { color: rgba(243,232,206,0.3); }
.form-grp input:focus, .form-grp select:focus {
    border-color: #C89832;
    box-shadow: 0 0 0 3px rgba(200, 152, 10, 0.15), 0 0 20px rgba(200, 152, 10, 0.1);
}
.form-grp select option { background: #151020; color: #F3E8CE; }

.btn-submit {
    width: 100%;
    background: linear-gradient(135deg, #C89832 0%, #9A7020 50%, #C89832 100%);
    background-size: 200% 100%;
    border: none;
    padding: 16px;
    color: #0A0510;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 3px;
    cursor: pointer;
    border-radius: 6px;
    box-shadow: 0 5px 25px rgba(200, 152, 10, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
    transition: background-position 0.4s ease, transform 0.2s ease, box-shadow 0.3s ease;
    text-transform: uppercase;
    margin-top: 8px;
}
.btn-submit:hover {
    background-position: 100% 0;
    box-shadow: 0 8px 35px rgba(200, 152, 10, 0.55);
    transform: translateY(-2px);
}
.btn-submit:active { transform: translateY(0); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ════════════════════════════════════════════
   8. SECRETO — RAYO ANIMADO + MODAL
════════════════════════════════════════════ */
.secreto-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

.secreto-hint {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    color: rgba(232,200,80,0.6);
    letter-spacing: 2px;
    margin-top: 16px;
    animation: parpadeo 3s ease-in-out infinite;
}

.rayo-secreto {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.rayo-secreto:hover { transform: scale(1.1); }
.rayo-secreto:hover .rayo-emoji { filter: drop-shadow(0 0 20px rgba(255,220,50,1)) drop-shadow(0 0 40px rgba(200,152,10,0.9)); }

.rayo-emoji {
    font-size: 4rem;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 12px rgba(255,220,50,0.7)) drop-shadow(0 0 25px rgba(200,152,10,0.5));
    animation: rayo-pulse 2.5s ease-in-out infinite alternate;
}
@keyframes rayo-pulse {
    0%   { filter: drop-shadow(0 0 8px rgba(255,220,50,0.5)); transform: scale(1); }
    100% { filter: drop-shadow(0 0 25px rgba(255,220,50,0.9)) drop-shadow(0 0 50px rgba(200,152,10,0.6)); transform: scale(1.08); }
}

.rayo-rings { position: absolute; inset: 0; }
.rayo-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(200,152,10,0.3);
    animation: rayo-expand 3s ease-out infinite;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.rayo-ring.r1 { width: 80px;  height: 80px; animation-delay: 0s; }
.rayo-ring.r2 { width: 110px; height: 110px; animation-delay: 1s; border-color: rgba(200,152,10,0.2); }
.rayo-ring.r3 { width: 140px; height: 140px; animation-delay: 2s; border-color: rgba(200,152,10,0.1); }
@keyframes rayo-expand {
    0%   { opacity: 0.8; transform: translate(-50%,-50%) scale(0.6); }
    100% { opacity: 0;   transform: translate(-50%,-50%) scale(1.4); }
}

/* ─ INLINE REVEAL CARD ─ */
.secreto-reveal {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        opacity    0.5s ease 0.2s,
        margin-top 0.5s ease;
}
.secreto-reveal.visible {
    max-height: 600px;
    opacity: 1;
    margin-top: 32px;
}

.secreto-card {
    background: linear-gradient(160deg, #100A1E 0%, #1A1030 60%, #0E0820 100%);
    border: 1px solid rgba(200,152,10,0.4);
    border-radius: 14px;
    padding: 36px 28px;
    text-align: center;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.7),
        0 0 40px rgba(200,152,10,0.08),
        inset 0 1px 0 rgba(200,152,10,0.12);
}

.sc-rayo {
    font-size: 2.8rem;
    filter: drop-shadow(0 0 16px rgba(255,220,50,0.7));
    margin-bottom: 12px;
    animation: rayo-pulse 2s ease-in-out infinite alternate;
}
.sc-titulo {
    font-family: 'Cinzel Decorative', 'IM Fell English', Georgia, serif;
    font-size: 2rem;
    color: #E8C850;
    text-shadow: 0 0 18px rgba(200,152,10,0.5);
    margin: 0 0 18px;
}
.sc-texto {
    font-family: 'IM Fell English', serif;
    font-size: 1.05rem;
    color: rgba(243,232,206,0.85);
    line-height: 1.75;
    margin: 0;
    text-align: center;
}
.sc-texto em   { color: #E8C850; font-style: italic; }
.sc-texto strong { color: #F3E8CE; }


/* ════════════════════════════════════════════
   8. FOOTER base
════════════════════════════════════════════ */
.site-footer {
    padding: 70px 20px 50px;
    text-align: center;
    border-top: 1px solid rgba(200,152,10,0.08);
    background: linear-gradient(to bottom, var(--oscuro), #01000A);
    position: relative;
    z-index: 10;
}

/* ════════════════════════════════════════════
   KC STYLE KIT v2 — HARRY POTTER BODA EDITION
   Khal Calloway Studio © 2026
   Dot orbital dorado — Modo Boda
════════════════════════════════════════════ */

/* Variables KC — Harry Potter Boda */
:root {
    --ft:         'IM Fell English', serif;
    --terra:      #C89832;
    --terra-l:    #E8C850;
    --olivo:      #7A1A08;
    --olivo-l:    #C89832;
    --olivo-xl:   #F3E8CE;
    --crema:      #F3E8CE;
    --ease-bounce: cubic-bezier(.34,1.56,.64,1);
    --ease-out:    cubic-bezier(.23,1,.32,1);
    --kc-ring-dot: rgba(200,152,10,.9);
}

@keyframes rotate-ring { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

.kc-float {
    position:fixed; bottom:clamp(18px,3vh,30px); right:clamp(18px,3vw,28px);
    z-index:9000; width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; border:none; background:none; padding:0;
    outline:none; -webkit-tap-highlight-color:transparent;
    opacity:0; transform:translateY(20px);
    transition: opacity .6s ease, transform .6s var(--ease-bounce);
}
.kc-float.visible { opacity:1; transform:translateY(0); }

.kc-float-bg {
    position:absolute; inset:0; border-radius:50%;
    background:rgba(8,5,15,.9);
    border:1px solid rgba(200,152,10,.25);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    transition: border-color .4s ease, box-shadow .4s ease, transform .15s ease;
}
.kc-float:hover .kc-float-bg {
    border-color:rgba(200,152,10,.55);
    box-shadow: 0 4px 20px rgba(0,0,0,.5), 0 0 25px rgba(200,152,10,.15);
}

.kc-float-glow {
    position:absolute; inset:-10px; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle, rgba(176,102,20,.2) 0%, transparent 70%);
    animation: kcBreath 3s ease-in-out infinite alternate;
}
.kc-float.paused .kc-float-glow { opacity:.1; animation-play-state:paused; }
@keyframes kcBreath {
    0%   { opacity:.35; transform:scale(.9); }
    100% { opacity:.75; transform:scale(1.15); }
}

.kc-ring {
    position:absolute; border-radius:50%;
    transition: border-color .4s ease, box-shadow .4s ease;
}
/* Modo BODA — anillo con dot orbital dorado HP */
.kc-ring--boda {
    inset:-8px;
    border:1.5px dashed rgba(200,152,10,.45);
    animation: rotate-ring 20s linear infinite;
    box-shadow: 0 0 8px rgba(200,152,10,.12);
}
.kc-ring--boda::before {
    content:'';
    position:absolute; top:-3px; left:50%; transform:translateX(-50%);
    width:5px; height:5px; border-radius:50%;
    background: var(--kc-ring-dot, rgba(200,152,10,.9));
    box-shadow:
        0 0 8px 3px var(--kc-ring-dot, rgba(200,152,10,.6)),
        0 0 16px 5px rgba(200,152,10,.22);
}
.kc-float.paused .kc-ring--boda { animation-play-state:paused; border-color:rgba(200,152,10,.1); box-shadow:none; }
.kc-float.paused .kc-ring--boda::before { box-shadow:none; opacity:.15; }
.kc-float:hover .kc-ring--boda { border-color:rgba(200,152,10,.75); box-shadow:0 0 14px rgba(200,152,10,.25); }

.kc-letter {
    position:relative; z-index:2;
    font-family:var(--ft); font-size:.82em; font-style:italic;
    color:#C89832; letter-spacing:1px;
    transition: color .3s ease, text-shadow .3s ease, transform .3s var(--ease-bounce);
    text-shadow: 0 0 10px rgba(200,152,10,.25); line-height:1;
}
.kc-float:hover .kc-letter {
    color:#F3E8CE;
    text-shadow: 0 0 15px rgba(200,152,10,.5);
    transform:scale(1.08);
}
.kc-float.paused .kc-letter { color:rgba(200,152,10,.35); text-shadow:none; }

.kc-bars {
    position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
    display:flex; gap:1.5px; z-index:3;
}
.kc-bar {
    width:3px; border-radius:2px;
    background: linear-gradient(to top, #C89832, #E8C850);
    animation:kcBar var(--d,.4s) ease-in-out infinite alternate;
    box-shadow: 0 0 4px rgba(200,152,10,.4);
}
.kc-bar:nth-child(1) { height:6px; --d:.35s; }
.kc-bar:nth-child(2) { height:9px; --d:.25s; animation-delay:.1s; }
.kc-bar:nth-child(3) { height:5px; --d:.4s;  animation-delay:.2s; }
@keyframes kcBar { 0%{height:3px;opacity:.55;} 100%{opacity:1;box-shadow:0 0 7px rgba(200,152,10,.7);} }
.kc-float.paused .kc-bar { animation-play-state:paused; opacity:.2; height:3px !important; }
.kc-float:active .kc-float-bg { transform:scale(.92); }
.kc-float:active .kc-letter  { transform:scale(.9); }

/* ── FOOTER KC BRANDING ── */
.footer-divider {
    display:flex; align-items:center; justify-content:center;
    gap:15px; margin-bottom:30px;
}
.footer-divider::before,.footer-divider::after {
    content:''; height:1px; width:clamp(80px,22vw,160px);
    background:linear-gradient(to right,transparent,rgba(200,152,10,.3)); opacity:.5;
}
.footer-divider::after { background:linear-gradient(to left,transparent,rgba(200,152,10,.3)); }
.footer-divider span { color:#C89832; font-size:1.1em; animation:parpadeo 3s infinite; }
@keyframes parpadeo { 0%,100%{opacity:.35} 50%{opacity:1} }

/* Footer-reveal — observer propio, sin AOS */
.footer-reveal {
    opacity:0;
    transform:translateY(16px);
    transition: opacity .8s ease var(--fd, 0s), transform .8s var(--ease-out, ease) var(--fd, 0s);
}
.footer-reveal.appeared { opacity:1; transform:translateY(0); }

.footer-sello {
    font-size:.65em; letter-spacing:3px;
    text-transform:uppercase; line-height:2.4; margin-bottom:30px;
    font-family:'Cinzel',serif;
    animation: selloBreath 6s ease-in-out infinite alternate;
}
@keyframes selloBreath {
    0%   { color:rgba(200,152,10,.3); }
    100% { color:rgba(232,200,80,.65); text-shadow:0 0 20px rgba(200,152,10,.12); }
}
.footer-sello .nombre-dedicado {
    color:#E2D0A5; font-weight:500; letter-spacing:4px;
}
.footer-sello .lugar-fecha { color:rgba(200,152,10,.15); font-size:.9em; }

.footer-brand {
    display:inline-flex; align-items:center; gap:10px;
    text-decoration:none; padding:10px 4px;
    transition:all .4s ease; cursor:pointer; position:relative;
}
.footer-brand::after {
    content:''; position:absolute; right:-10px; top:50%; transform:translateY(-50%);
    width:4px; height:4px; border-radius:50%;
    background:rgba(200,152,10,.5);
    animation: brandDot 4s ease-in-out infinite; pointer-events:none;
}
@keyframes brandDot { 0%,45%,100%{opacity:0;transform:translateY(-50%) scale(.5)} 55%,85%{opacity:1;transform:translateY(-50%) scale(1)} }

.footer-brand .ig-ico {
    width:14px; height:14px; opacity:.35;
    transition:opacity .4s ease, color .4s ease;
    color:#C89832; flex-shrink:0;
    animation:icoBreath 3.5s ease-in-out infinite alternate;
}
@keyframes icoBreath { 0%{opacity:.2} 100%{opacity:.5} }
.footer-brand:hover .ig-ico { opacity:.9; color:#E8C850; animation:none; }

.footer-brand-text {
    font-family:var(--ft); font-style:italic;
    color:rgba(200,152,10,.8); font-size:1em; letter-spacing:3px;
    transition:color .4s ease, text-shadow .4s ease, letter-spacing .4s ease;
    position:relative; overflow:hidden;
}
.footer-brand-text::after {
    content:'';
    position:absolute; top:0; left:-120%; width:55%; height:100%;
    background:linear-gradient(100deg,transparent 0%,rgba(255,230,100,.08) 50%,transparent 100%);
    animation:brandShimmer 5s ease-in-out infinite; pointer-events:none;
}
@keyframes brandShimmer { 0%,70%{left:-120%} 100%{left:160%} }
.footer-brand:hover .footer-brand-text {
    color:rgba(200,152,10,.9);
    letter-spacing:4px;
    text-shadow:0 0 18px rgba(200,152,10,.3);
}

/* ════════════════════════════════════════════
   BUG FIX — @keyframes snitch-fly
   Referenciado en el estado de éxito del RSVP
   pero nunca estaba definido en ningún archivo
════════════════════════════════════════════ */
@keyframes snitch-fly {
    0%   { transform: translate(0, 0)      rotate(0deg)   scale(1); }
    25%  { transform: translate(10px, -8px) rotate(10deg)  scale(1.05); }
    50%  { transform: translate(-6px, -14px) rotate(-8deg) scale(1.1); }
    75%  { transform: translate(8px,  -6px) rotate(6deg)   scale(1.05); }
    100% { transform: translate(0, 0)      rotate(0deg)   scale(1); }
}

/* ════════════════════════════════════════════
   KC PREMIUM — CONTADOR MÁGICO
   (Migrado desde <style> inline del index.html)
════════════════════════════════════════════ */
.contador-magic-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 500px;
}

.contador-box {
    display: flex !important;
    gap: 0 !important;
    align-items: center;
    justify-content: center;
    padding: 30px 22px !important;
    background: radial-gradient(ellipse 130% 100% at center,
        rgba(22,12,42,0.98) 0%, rgba(8,4,18,0.99) 100%) !important;
    border: 1px solid rgba(201,168,76,0.35) !important;
    border-radius: 16px !important;
    position: relative !important;
    overflow: visible !important;
    box-shadow:
        0 0 0 1px rgba(201,168,76,0.08),
        0 0 50px rgba(110,50,210,0.15),
        0 10px 40px rgba(0,0,0,0.7),
        inset 0 0 70px rgba(70,25,150,0.08) !important;
}

.contador-box::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background:
        radial-gradient(circle at 15% 60%, rgba(130,60,240,0.07) 0%, transparent 55%),
        radial-gradient(circle at 85% 40%, rgba(50,90,255,0.05) 0%, transparent 55%),
        radial-gradient(circle at 50% 95%, rgba(201,168,76,0.06) 0%, transparent 40%);
    pointer-events: none;
}

/* Ornamentos dorados en esquinas */
.cnt-corner {
    position: absolute;
    width: 16px; height: 16px;
    pointer-events: none;
    z-index: 2;
}
.cnt-corner::before, .cnt-corner::after {
    content: '';
    position: absolute;
    background: rgba(212,175,55,0.55);
    border-radius: 1px;
}
.cnt-corner::before { width: 100%; height: 1.5px; top: 0; left: 0; }
.cnt-corner::after  { width: 1.5px; height: 100%; top: 0; left: 0; }
.cnt-corner.tl { top: 8px; left: 8px; }
.cnt-corner.tr { top: 8px; right: 8px; transform: scaleX(-1); }
.cnt-corner.bl { bottom: 8px; left: 8px; transform: scaleY(-1); }
.cnt-corner.br { bottom: 8px; right: 8px; transform: scale(-1,-1); }

/* Separadores parpadeantes */
.cm-sep {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    line-height: 1;
    color: rgba(201,168,76,0.45);
    padding: 0 4px;
    margin-bottom: 26px;
    text-shadow: 0 0 10px rgba(201,168,76,0.4);
    animation: cnt-sep-blink 1s steps(1,end) infinite;
    user-select: none;
}
@keyframes cnt-sep-blink {
    0%,49% { opacity: 1; }
    50%,100% { opacity: 0.1; }
}

.cm-unidad {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 0 8px !important;
}

.cm-num {
    font-family: 'Cinzel Decorative', serif !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    width: 62px !important;
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    overflow: hidden;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #1A0E2E 0%, #0C0618 100%) !important;
    border: 1px solid rgba(201,168,76,0.38) !important;
    box-shadow:
        0 3px 14px rgba(0,0,0,0.65),
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 0 18px rgba(201,168,76,0.08) !important;
    color: #D4AF37 !important;
    text-shadow:
        0 0 12px rgba(212,175,55,0.9),
        0 0 30px rgba(180,140,40,0.4) !important;
    perspective: 400px;
    transition: box-shadow 0.3s ease;
}

/* gloss top */
.cm-num::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 42%;
    background: linear-gradient(180deg,rgba(255,255,255,0.045) 0%,transparent 100%);
    pointer-events: none;
    z-index: 1;
}
/* middle divider */
.cm-num::after {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0; height: 1px;
    background: rgba(201,168,76,0.13);
    pointer-events: none;
    z-index: 1;
}

/* Flip animation — toggled via JS */
@keyframes kc-num-flip {
    0%   { transform: rotateX(0deg); opacity: 1; }
    40%  { transform: rotateX(-85deg); opacity: 0; }
    60%  { transform: rotateX(85deg); opacity: 0; }
    100% { transform: rotateX(0deg); opacity: 1; }
}
.kc-flipping {
    animation: kc-num-flip 0.45s cubic-bezier(0.4,0,0.2,1) !important;
}

.cm-lbl {
    font-family: 'Cinzel', serif !important;
    font-size: 0.52rem !important;
    letter-spacing: 3px !important;
    color: rgba(201,168,76,0.5) !important;
    text-transform: uppercase;
    margin-top: 9px !important;
}

/* Partículas flotantes del contador */
.cnt-particle {
    position: absolute;
    pointer-events: none;
    font-size: 11px;
    color: rgba(212,175,55,0.55);
    text-shadow: 0 0 5px rgba(212,175,55,0.7);
    animation: cnt-particle-float var(--cpd, 4s) ease-in-out infinite;
    animation-delay: var(--cpdl, 0s);
    z-index: 3;
}
@keyframes cnt-particle-float {
    0%,100% { opacity: 0; transform: translate(0,0) scale(0.4) rotate(0deg); }
    25%     { opacity: 0.9; transform: translate(var(--cpx,4px),-10px) scale(1) rotate(30deg); }
    60%     { opacity: 0.4; transform: translate(var(--cpx2,-4px),-20px) scale(0.7) rotate(60deg); }
}

/* ════════════════════════════════════════════
   KC PREMIUM — ESTANDARTES MÁGICOS (4 CASAS)
════════════════════════════════════════════ */
.grid-casas-premium {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.6rem 2rem;
    justify-items: center;
    padding: 8px 0;
    width: 100%;
    max-width: 440px;
}

.estandarte-envuelto {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.estandarte-varilla {
    width: 108px;
    height: 5px;
    background: linear-gradient(90deg,
        rgba(90,70,20,0.5) 0%,
        #C9A434 15%,
        #F7E98E 50%,
        #C9A434 85%,
        rgba(90,70,20,0.5) 100%);
    border-radius: 3px;
    box-shadow: 0 0 14px rgba(212,175,55,0.5), 0 2px 6px rgba(0,0,0,0.5);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}
.estandarte-varilla::before,
.estandarte-varilla::after {
    content: '◆';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    line-height: 1;
    color: #F7E98E;
    text-shadow: 0 0 8px rgba(247,233,142,0.95);
}
.estandarte-varilla::before { left: -7px; }
.estandarte-varilla::after  { right: -7px; }

.estandarte-cuerpo {
    width: 98px;
    min-height: 182px;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 10px 30px;
    transform-origin: top center;
    animation: kc-ondula var(--kfd, 3s) ease-in-out infinite;
    animation-delay: var(--kfdelay, 0s);
    overflow: hidden;
}

@keyframes kc-ondula {
    0%,100% { transform: rotate(-1.8deg) skewX(0.8deg) skewY(0.3deg); }
    25%     { transform: rotate(-0.3deg) skewX(1.8deg) skewY(-0.1deg); }
    50%     { transform: rotate(1.8deg) skewX(0.5deg) skewY(-0.3deg); }
    75%     { transform: rotate(0.3deg) skewX(-1.2deg) skewY(0.2deg); }
}

.estandarte-cuerpo::before {
    content: '';
    position: absolute;
    top: 5px; left: 5px; right: 5px; bottom: 13%;
    clip-path: polygon(0 0,100% 0,100% 86%,50% 100%,0 86%);
    border: 1px solid rgba(255,255,255,0.13);
    pointer-events: none;
    z-index: 3;
}

.flag-sheen {
    position: absolute;
    top: 0; left: -100%;
    width: 55%; height: 100%;
    background: linear-gradient(110deg,
        transparent 25%,
        rgba(255,255,255,0.12) 50%,
        transparent 75%);
    animation: flag-sheen-run var(--kfsd, 4.5s) linear infinite;
    animation-delay: var(--kfsdelay, 0s);
    pointer-events: none;
    z-index: 2;
}
@keyframes flag-sheen-run {
    from { left: -80%; }
    to   { left: 170%; }
}

.flag-bg-gryffindor { background: linear-gradient(165deg, #7A0000 0%, #4A0000 40%, #680000 70%, #8E0000 100%); }
.flag-bg-slytherin  { background: linear-gradient(165deg, #16431A 0%, #0B2A0D 40%, #164218 70%, #0E3410 100%); }
.flag-bg-ravenclaw  { background: linear-gradient(165deg, #0B1942 0%, #060F28 40%, #0B1942 70%, #08143A 100%); }
.flag-bg-hufflepuff { background: linear-gradient(165deg, #B07800 0%, #845A00 40%, #A87200 70%, #946400 100%); }

.flag-texture {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,0.025) 0px,
        rgba(255,255,255,0.025) 1px,
        transparent 1px,
        transparent 8px
    );
    pointer-events: none;
    z-index: 1;
}

.flag-animal {
    font-size: 2.6rem;
    position: relative;
    z-index: 4;
    margin-bottom: 7px;
    animation: kc-animal-pulse var(--kfd, 3s) ease-in-out infinite;
    animation-delay: var(--kfdelay, 0s);
    filter: drop-shadow(0 0 7px var(--hglow));
}
@keyframes kc-animal-pulse {
    0%,100% { transform: scale(1);    filter: drop-shadow(0 0 6px var(--hglow)); }
    50%     { transform: scale(1.09); filter: drop-shadow(0 0 16px var(--hglow)) drop-shadow(0 0 5px rgba(255,255,255,0.2)); }
}

.flag-line {
    width: 58%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--haccent), transparent);
    margin: 5px 0;
    position: relative;
    z-index: 4;
}

.flag-name-txt {
    font-family: 'Cinzel Decorative', serif;
    font-size: 0.56rem;
    letter-spacing: 0.5px;
    color: var(--haccent);
    text-shadow: 0 0 10px var(--hglow), 0 0 4px rgba(0,0,0,0.5);
    text-align: center;
    font-weight: 700;
    position: relative;
    z-index: 4;
}

.flag-colors-lbl {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.47rem;
    color: rgba(255,255,255,0.48);
    text-align: center;
    margin-top: 3px;
    position: relative;
    z-index: 4;
}

.estandarte-shadow {
    width: 72px;
    height: 7px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.55) 0%, transparent 70%);
    margin-top: 0;
    animation: kc-shadow-swing var(--kfd, 3s) ease-in-out infinite;
    animation-delay: var(--kfdelay, 0s);
}
@keyframes kc-shadow-swing {
    0%,100% { transform: translateX(-6px) scaleX(0.83); opacity: 0.45; }
    50%     { transform: translateX(6px)  scaleX(1.12); opacity: 0.7; }
}

.e-sparks {
    position: absolute;
    inset: -10px;
    pointer-events: none;
    overflow: visible;
}
.espark {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--haccent);
    box-shadow: 0 0 4px var(--hglow), 0 0 2px var(--haccent);
    animation: espark-rise var(--spd, 3.5s) ease-out infinite;
    animation-delay: var(--spdelay, 0s);
    opacity: 0;
}
@keyframes espark-rise {
    0%   { opacity: 0; transform: translate(0,0) scale(0); }
    15%  { opacity: 1; transform: translate(var(--spx,0px),-6px) scale(1); }
    100% { opacity: 0; transform: translate(var(--spx2,4px),-30px) scale(0.2); }
}

/* Variables por casa */
.wrap-gryffindor { --hglow: rgba(220,166,30,0.75); --haccent: #D4AF37; --kfd: 3s;   --kfdelay: 0s;   --kfsd: 4.2s;  --kfsdelay: 0.3s;  }
.wrap-slytherin  { --hglow: rgba(150,215,150,0.5);  --haccent: #A8D5A8; --kfd: 3.6s; --kfdelay: 0.4s; --kfsd: 4.8s;  --kfsdelay: 1.1s;  }
.wrap-ravenclaw  { --hglow: rgba(100,155,230,0.6);  --haccent: #7BAFD4; --kfd: 2.9s; --kfdelay: 0.7s; --kfsd: 3.9s;  --kfsdelay: 1.8s;  }
.wrap-hufflepuff { --hglow: rgba(240,195,55,0.7);   --haccent: #F0CF50; --kfd: 3.3s; --kfdelay: 1.1s; --kfsd: 4.5s;  --kfsdelay: 2.4s;  }

/* ════════════════════════════════════════════
   KC PREMIUM — MAPA DEL MERODEADOR
════════════════════════════════════════════ */
.mapa-huella {
    position: absolute;
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    filter: sepia(1) brightness(0.35) contrast(1.2);
    animation: huella-aparece var(--hd, 4s) ease-in-out infinite;
    animation-delay: var(--hdl, 0s);
}
@keyframes huella-aparece {
    0%,100% { opacity: 0;    transform: scale(0.6) rotate(var(--hrot, 0deg)); }
    25%,75% { opacity: 0.38; transform: scale(1)   rotate(var(--hrot, 0deg)); }
}

@keyframes kc-tinta-escribe {
    from { clip-path: inset(0 100% 0 0 round 4px); opacity: 0.2; }
    to   { clip-path: inset(0 0% 0 0 round 4px);   opacity: 1;   }
}

.mapa-revelado-h4 { animation: kc-tinta-escribe 0.8s cubic-bezier(0.3,0,0.5,1) forwards; animation-delay: 0.1s;  opacity: 0; }
.mapa-revelado-p  { animation: kc-tinta-escribe 0.8s cubic-bezier(0.3,0,0.5,1) forwards; animation-delay: 0.45s; opacity: 0; }
.mapa-revelado-a  { animation: kc-tinta-escribe 0.8s cubic-bezier(0.3,0,0.5,1) forwards; animation-delay: 0.8s;  opacity: 0; }
.mapa-revelado-box {
    box-shadow: 0 0 22px rgba(80,50,15,0.22), inset 0 0 35px rgba(80,50,15,0.06) !important;
    transition: box-shadow 0.5s ease;
}

#btn-juro {
    position: relative;
    overflow: hidden;
}
#btn-juro::after {
    content: '';
    position: absolute;
    top: 50%; left: -30%;
    width: 25%; height: 300%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.12), transparent);
    transform: translateY(-50%) rotate(20deg);
    animation: juro-shine 3.5s ease-in-out infinite;
}
@keyframes juro-shine {
    from { left: -30%; }
    to   { left: 130%; }
}

.mapa-managed {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.7rem;
    color: rgba(74,28,22,0.4);
    letter-spacing: 2px;
    margin-top: 10px;
    text-align: center;
    animation: managed-pulse 4s ease-in-out infinite;
    user-select: none;
}
@keyframes managed-pulse {
    0%,100% { opacity: 0.4; }
    50%     { opacity: 0.7; }
}

/* ── Responsive premium ── */
@media (max-width: 400px) {
    .grid-casas-premium     { gap: 2rem 1rem; }
    .estandarte-varilla     { width: 88px; }
    .estandarte-cuerpo      { width: 80px; min-height: 155px; }
    .flag-animal            { font-size: 2.1rem; }
    .flag-name-txt          { font-size: 0.5rem; }
    .cm-num                 { font-size: 1.9rem !important; width: 54px !important; height: 64px !important; }
    .cm-unidad              { padding: 0 5px !important; }
    .cm-sep                 { font-size: 1.5rem; padding: 0 2px; }
}