@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* =========================================
   1. VARIABLES GLOBALES Y RESET
   Sistema de diseno "Impacto Lucha" (old school)
   ========================================= */
:root {
    /* --- color --- */
    --il-red:        #FE0000;
    --il-red-hi:     #FF3B2A;
    --il-red-deep:   #9E0000;
    --il-red-shadow: #5C0000;
    --il-gold:       #E8C46A;
    --il-gold-dim:   #A98B3E;
    --il-gold-text:  #FFF3D6;
    --il-black:      #0B0A0A;
    --il-panel:      #191617;
    --il-panel-2:    #141213;
    --il-line:       #302B2C;
    --il-line-hi:    #3A3536;
    --il-steel-top:  #3A3435;
    --il-steel-bot:  #141213;
    --il-text:       #E0DFDE;
    --il-text-body:  #B7B3B1;
    --il-text-mute:  #8A8584;

    /* --- superficies compuestas --- */
    --il-grad-red:   linear-gradient(180deg,#FF2A1A 0%,#D40000 52%,#9E0000 100%);
    --il-grad-steel: linear-gradient(180deg,#3A3435 0%,#211E1F 48%,#141213 100%);
    --il-grad-panel: linear-gradient(180deg,#191617,#0E0D0D);
    --il-danger:     repeating-linear-gradient(-45deg,#C10000 0 12px,#1A1718 12px 24px);

    /* --- tipografia --- */
    --il-display: 'Anton', sans-serif;
    --il-cond:    'Barlow Condensed', sans-serif;
    --il-body:    'Barlow', system-ui, sans-serif;
    --il-mono:    'JetBrains Mono', monospace;
    --il-skew:    skewX(-7deg);
    --il-h1-shadow: 3px 3px 0 #000, 5px 5px 0 rgba(254,0,0,.5);

    /* --- espaciado --- */
    --il-xs: 4px;  --il-sm: 8px;   --il-md: 12px;
    --il-lg: 16px; --il-xl: 22px;  --il-2xl: 34px; --il-3xl: 64px;
    --il-maxw: 1180px;

    /* --- elevacion --- */
    --il-inset-hi: 0 1px 0 rgba(255,255,255,.07) inset;
    --il-shadow-panel: 0 10px 24px rgba(0,0,0,.55);
    --il-shadow-btn:   0 1px 0 rgba(255,255,255,.35) inset, 0 4px 0 var(--il-red-shadow), 0 10px 18px rgba(0,0,0,.5);
    --il-radius: 3px;
    --il-t-fast: .15s;
    --il-t-med:  .18s;

    /* --- puente con los nombres viejos (todo el sitio los usa) --- */
    --bg:      var(--il-black);
    --surface: var(--il-panel);
    --accent:  var(--il-red);
    --text:    var(--il-text);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--il-body);
}

body {
    background-color: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    /* Cada raya = un nucleo fino y nitido (1px / 1.5px) mas un resplandor ancho
       y muy tenue que se apaga a los costados, como si la linea alumbrara. */
    background-image:
        repeating-linear-gradient(115deg,
            transparent 0,
            rgba(255,255,255,0.003) 3px,
            rgba(255,255,255,0.009) 9px,
            rgba(255,255,255,0.0225) 13px,
            rgba(255,255,255,0.0675) 14px,
            rgba(255,255,255,0.0675) 15px,
            rgba(255,255,255,0.0225) 16px,
            rgba(255,255,255,0.009) 20px,
            rgba(255,255,255,0.003) 26px,
            transparent 30px,
            transparent 264px),
        repeating-linear-gradient(115deg,
            transparent 0,
            rgba(232,196,106,0.0045) 4px,
            rgba(232,196,106,0.015) 12px,
            rgba(232,196,106,0.0413) 18px,
            rgba(232,196,106,0.15) 19.5px,
            rgba(232,196,106,0.15) 21px,
            rgba(232,196,106,0.0413) 22.5px,
            rgba(232,196,106,0.015) 29px,
            rgba(232,196,106,0.0045) 38px,
            transparent 44px,
            transparent 348px),
        radial-gradient(120% 50% at 50% 0%, rgba(201,162,77,.085), transparent 62%);
    background-attachment: fixed;
}

::selection { background: var(--il-red); color: #fff; }

.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 20px; 
}

/* =========================================
   2. CABECERA (HEADER) Y NAVEGACIÓN
   ========================================= */
header { 
    background: var(--surface); 
    padding: 20px; 
    border-bottom: 3px solid var(--accent); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.logo-container { 
    display: flex; 
    align-items: center; 
}

.logo-img { 
    height: 60px; 
    width: auto; 
    margin-right: 15px; 
    border-radius: 50%; 
}

.logo { 
    font-size: 24px; 
    font-weight: bold; 
    color: white; 
    text-decoration: none; 
    font-style: italic; 
}

nav a { 
    color: white; 
    text-decoration: none; 
    margin-left: 20px; 
    font-weight: bold; 
    text-transform: uppercase; 
}

nav a:hover { 
    color: var(--accent); 
}

/* =========================================
   3. BOTONES Y TÍTULOS GLOBALES
   ========================================= */
.back-btn { 
    color: #888; 
    text-decoration: none; 
    display: inline-block; 
    margin-bottom: 20px; 
    font-weight: bold; 
    font-size: 14px; 
}

.back-btn:hover { 
    color: white; 
}

.page-title { 
    color: var(--accent); 
    text-transform: uppercase; 
    text-align: center; 
    margin: 20px 0; 
    font-size: 32px; 
}

.section-title { 
    color: white; 
    text-transform: uppercase; 
    text-align: center; 
    margin: 60px 0 30px; 
    font-size: 32px; 
    border-bottom: 2px solid #333; 
    padding-bottom: 10px; 
}

.section-title span { 
    color: var(--accent); 
}

.match-title { 
    font-size: 32px; 
    text-transform: uppercase; 
    color: white; 
    margin-bottom: 20px; 
    border-left: 5px solid var(--accent); 
    padding-left: 15px; 
}

/* =========================================
   4. SECCIÓN HERO
   ========================================= */
.hero { 
    position: relative; 
    margin-top: 20px; 
    border: 2px solid #333; 
    overflow: hidden; 
}

.hero img { 
    width: 100%; 
    height: auto; 
    display: block; 
}

.hero-text { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    background: rgba(0,0,0,0.8); 
    width: 100%; 
    padding: 20px; 
    border-top: 2px solid var(--accent); 
}

.hero-text h1 { 
    color: var(--accent); 
    margin-bottom: 10px; 
    text-transform: uppercase; 
}

/* =========================================
   5. TARJETAS Y GRID (CHAMPIONS, FIGHTERS, POSTERS, FOLDERS)
   ========================================= */
.grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
    gap: 20px; 
}

.posters-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
    margin-bottom: 40px; 
}

/* Nuevo bloque agregado: Folders Grid */
.folders-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 40px; 
    margin-top: 50px; 
}

.folder-card { 
    background: var(--surface); 
    border: 2px solid #333; 
    border-top: 5px solid var(--accent); 
    padding: 60px 20px; 
    text-align: center; 
    text-decoration: none; 
    color: white; 
    transition: 0.3s; 
    border-radius: 8px; 
}

.folder-card:hover { 
    transform: scale(1.05); 
    border-color: var(--accent); 
    background: #222; 
}

.folder-card h2 { 
    font-size: 36px; 
    margin-bottom: 15px; 
    letter-spacing: 2px; 
}

.folder-card p {
    color: #aaa;
    font-size: 16px;
}

/* Placeholder de imagen (banner de cartelera, etc.) prolijo mientras no exista el archivo.
   La imagen se muestra a su proporcion real; si el archivo no existe, se oculta y queda el cartel. */
.img-ph {
    position: relative;
    background: #1a1a1a;
    border: 2px solid #333;
    border-top: 5px solid var(--accent);
    border-radius: 8px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 20px;
}
.img-ph > span {
    color: #666;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    padding: 0 20px;
}
.img-ph > img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
}

/* Banner/cartelera de evento: son posters verticales, no a lo ancho completo */
.match-card-img {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    margin: 0 auto 20px;
    border: 2px solid #333;
    border-bottom: 5px solid var(--accent);
    border-radius: 8px;
}

.card { 
    background: var(--surface); 
    border: 1px solid #333; 
    text-align: center; 
    padding-bottom: 20px; 
    transition: 0.3s; 
    border-radius: 4px; 
    overflow: hidden; 
}

.card:hover { 
    border-color: var(--accent); 
    transform: translateY(-5px); 
}

.card img { 
    width: 100%; 
    height: auto; 
    display: block; 
    border-bottom: 2px solid var(--accent); 
    background-color: #111; 
}

.card h2 { margin: 15px 0 5px; color: white; text-transform: uppercase; font-size: 18px; }
.card p { color: #888; font-size: 14px; }

.champion-card {
    background: var(--surface);
    border: 2px solid var(--accent);
    text-align: center;
    padding-bottom: 20px;
    transition: 0.3s;
    max-width: 280px; /* mismo ancho que las tarjetas del roster */
    margin: 0 auto 50px auto;
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(230, 57, 70, 0.2); 
    display: block; 
    text-decoration: none; 
}

.champion-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 15px 40px rgba(230, 57, 70, 0.4); 
    border-color: #ff4d4d; 
}

.champ-image-wrapper { 
    position: relative; 
    width: 100%; 
    background-color: #111; 
    border-bottom: 5px solid var(--accent); 
}

.champ-photo { width: 100%; height: auto; display: block; opacity: 0.9; }
.champ-belt { position: absolute; bottom: 10px; right: 10px; width: 90px; height: auto; filter: drop-shadow(0px 5px 10px rgba(0,0,0,0.8)); }

.champion-card h2 { margin: 15px 0 5px; color: var(--accent); text-transform: uppercase; font-size: 22px; }
.champion-card p { color: #ccc; font-size: 16px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; }

.poster-card { 
    background: var(--surface); 
    border: 2px solid #333; 
    border-radius: 8px; 
    overflow: hidden; 
    text-decoration: none; 
    color: white; 
    transition: 0.3s; 
    display: flex; 
    flex-direction: column; 
}

.poster-card:hover { 
    transform: scale(1.03); 
    border-color: var(--accent); 
    box-shadow: 0 10px 20px rgba(230, 57, 70, 0.2); 
}

.poster-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-bottom: 3px solid var(--accent); }
.poster-info { padding: 15px; text-align: center; }
.poster-info h2 { font-size: 20px; text-transform: uppercase; margin-bottom: 5px; }
.poster-info span { color: #888; font-size: 13px; font-weight: bold; display: block; }

/* =========================================
   6. VIDEO, GALERÍA Y CAROUSEL
   ========================================= */
.video-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
    border: 2px solid #333; 
    margin-bottom: 40px; 
}

.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Carrusel de VIDEOS (distinto al carrusel de fotos): para luchas/segmentos que
   tienen más de un video, se deslizan horizontalmente uno por uno con flechas
   a los costados (como el modal de fotos). */
.video-carousel-wrap { position: relative; margin-bottom: 40px; }
.video-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.video-carousel::-webkit-scrollbar { display: none; }
.video-carousel .video-container {
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    margin: 0;
    scroll-snap-align: start;
}

.vc-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(0,0,0,0.6); border: 2px solid var(--accent); color: #fff;
    font-size: 18px; cursor: pointer; z-index: 5;
    display: flex; align-items: center; justify-content: center; transition: 0.2s;
}
.vc-arrow:hover { background: var(--accent); }
.vc-arrow-prev { left: 10px; }
.vc-arrow-next { right: 10px; }

.gallery-title { text-transform: uppercase; font-size: 20px; margin-bottom: 15px; border-bottom: 1px solid #333; padding-bottom: 5px; color: var(--accent); }

.carousel { 
    display: flex; 
    overflow-x: auto; 
    gap: 15px; 
    padding-bottom: 15px; 
    scroll-snap-type: x mandatory; 
    scrollbar-width: thin; 
    scrollbar-color: var(--accent) #333; 
}

.carousel::-webkit-scrollbar { height: 10px; }
.carousel::-webkit-scrollbar-track { background: #1a1a1a; }
.carousel::-webkit-scrollbar-thumb { background-color: var(--accent); border-radius: 10px; }

.carousel img { 
    height: 350px; 
    width: auto; 
    object-fit: contain; 
    scroll-snap-align: start; 
    border: 1px solid #444; 
    border-radius: 4px; 
    background-color: #000; 
    cursor: pointer; 
    transition: 0.3s; 
}

.carousel img:hover { border-color: var(--accent); transform: scale(1.02); }

/* =========================================
   7. MODAL
   ========================================= */
.modal { 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    padding-top: 50px; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.9); 
}

.modal-content { margin: auto; display: block; max-width: 90%; max-height: 80vh; border: 2px solid #333; box-shadow: 0 0 20px rgba(0,0,0,0.8); }
.close { position: absolute; top: 20px; right: 40px; color: #f1faee; font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer; }
.close:hover, .close:focus { color: var(--accent); text-decoration: none; cursor: pointer; }

.prev, .next { 
    cursor: pointer; 
    position: absolute; 
    top: 50%; 
    width: auto; 
    padding: 16px; 
    margin-top: -50px; 
    color: white; 
    font-weight: bold; 
    font-size: 40px; 
    transition: 0.3s; 
    user-select: none; 
    background-color: rgba(0,0,0,0.6); 
    border-radius: 4px; 
}

.next { right: 30px; }
.prev { left: 30px; }
.prev:hover, .next:hover { background-color: var(--accent); }

/* =========================================
   8. FOOTER
   ========================================= */
footer { 
    background: var(--surface); 
    padding: 40px 20px 20px; 
    margin-top: 60px; 
    border-top: 3px solid var(--accent); 
}

.footer-container { 
    max-width: 1000px; 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 30px; 
    text-align: center; 
}

.footer-section h4 { color: var(--accent); text-transform: uppercase; margin-bottom: 15px; font-size: 18px; }
.footer-section p { color: #ccc; margin-bottom: 10px; font-size: 14px; }
.footer-section a { display: block; color: #ccc; text-decoration: none; margin-bottom: 10px; font-size: 14px; transition: 0.3s; }
.footer-section a:hover { color: white; text-decoration: underline; }

.footer-bottom { 
    text-align: center; 
    margin-top: 40px; 
    padding-top: 20px; 
    border-top: 1px solid #333; 
    font-size: 13px; 
    color: #888; 
}

/* =========================================
   9. MEDIA QUERIES (RESPONSIVE)
   ========================================= */
@media (max-width: 900px) { 
    .posters-grid { grid-template-columns: repeat(2, 1fr); } 
}

@media (max-width: 600px) { 
    /* Agregué .folders-grid aquí para que sea de 1 columna en móviles */
    .posters-grid, .folders-grid { grid-template-columns: 1fr; } 
    .carousel img { height: 250px; } 
}
.matches-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 30px; }
        
        /* Estilo de la tarjeta y la imagen */
        .match-card { background: var(--surface); border: 1px solid #333; padding: 0; text-align: center; border-radius: 8px; transition: 0.3s; text-decoration: none; color: white; border-bottom: 3px solid #333; overflow: hidden; display: flex; flex-direction: column; max-width: 380px; width: 100%; margin: 0 auto; }
        .match-card:hover { border-bottom-color: var(--accent); transform: translateY(-5px); background: #202020; }
        
        /* CORRECCIÓN: Imágenes dinámicas que se adaptan a la fuente */
        .match-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-bottom: 2px solid var(--accent); }
        .card-content { padding: 20px; }

        .match-card h3 { font-size: 20px; text-transform: uppercase; margin-bottom: 10px; }
        .match-card p { color: #888; font-size: 14px; }

        .special-card { border-top: 3px solid var(--accent); }
        /* segmentos y cards son lo mismo la ia nomas se divago */
        .segments-title { text-transform: uppercase; font-size: 24px; border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 20px; }
        .segments-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

        .segment-card { background: #000; border: 1px solid #333; overflow: hidden; text-decoration: none; color: white; transition: 0.3s; position: relative; display: flex; flex-direction: column; }
        .segment-card:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 5px 15px rgba(230, 57, 70, 0.2); }
        .segment-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; opacity: 0.8; transition: 0.3s; }

        /* Encuadre especial para portadas panorámicas recortadas a 4:5 (regla de tamaño de portadas) */
        img[src="/img/ndl6/tagteamtornado_mainevent/portada.png"] { object-position: 36% center; }
        img[src="/img/ndl6/maquina_reaper/portada.png"] { object-position: 72% center; }
        .segment-card:hover .segment-img { opacity: 1; }
        .segment-title { padding: 15px; font-size: 15px; font-weight: bold; text-align: center; text-transform: uppercase; background: var(--surface); border-top: 2px solid var(--accent); flex-grow: 1; display: flex; align-items: center; justify-content: center; }
/* aaaah*/
      .event-summary { background: var(--surface); padding: 30px; border-radius: 8px; margin-bottom: 40px; font-size: 16px; line-height: 1.6; color: #ddd; border-left: 4px solid var(--accent); }
        .event-summary h1 { font-size: 32px; color: white; text-transform: uppercase; margin-bottom: 10px; }
        .event-details { color: var(--accent); font-weight: bold; font-size: 14px; margin-bottom: 15px; display: block; letter-spacing: 1px; }

        /* Resumen colapsable: para eventos que tienen video de "anteriormente" antes
           de la cartelera, el texto va debajo del video, se ve solo un poco y hay
           que apretar "seguir leyendo" para expandirlo. */
        .event-summary.collapsible { max-height: 95px; overflow: hidden; position: relative; transition: max-height 0.3s ease; }
        .event-summary.collapsible.expanded { max-height: 1000px; }
        .event-summary.collapsible:not(.expanded)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background: linear-gradient(to bottom, transparent, var(--surface)); }
        .btn-ver-mas-resumen {
            display: block; width: 100%; margin-top: 12px; padding: 8px;
            background: none; border: none; color: var(--accent); font-weight: bold;
            text-transform: uppercase; letter-spacing: 1px; font-size: 13px; cursor: pointer;
        }
        .btn-ver-mas-resumen:hover { color: #fff; }
        /* Estilo del cuadrito de campeon para la pagina roster */
        /* Contenedor relativo para poder encimar la imagen */
.champ-image-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* La imagen grande del campeón (Asegura que mantenga su diseño) */
.champ-photo {
    width: 100%;
    height: auto;
    display: block;
}

/* El cuadrito pequeño del cinturón abajo a la derecha */
/* Contenedor relativo para poder encimar la imagen */
.champ-image-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* La imagen grande del campeón (Asegura que mantenga su diseño) */
.champ-photo {
    width: 100%;
    height: auto;
    display: block;
}

/* La imagen flotante del cinturón abajo a la derecha */
.champ-belt {
    position: absolute;
    bottom: 0px; /* Distancia desde abajo */
    right: 10px;  /* Distancia desde la derecha */
    
    /* TAMAÑO ACTUALIZADO A 150x150 */
    width: 150px;  
    height: 150px; 
    
    /* Ajusta la imagen entera dentro de sus proporciones sin recortar */
    object-fit: contain; 
}
/* =========================================
   ESTILOS CRONOLOGÍA (ESTILO FEED VERTICAL)
   ========================================= */

.cronologia-header {
    text-align: center;
    padding: 40px 20px 20px;
}

.cronologia-title {
    font-size: 48px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cronologia-subtitle {
    font-size: 18px;
    color: #ccc;
    font-style: italic;
}

/* El contenedor principal de la columna */
.feed-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px; /* Espacio gigante entre videos para separarlos bien */
    padding: 40px 20px 80px;
    width: 100%;
}

/* El espacio individual de cada video */
.feed-item {
    width: 100%;
    max-width: 400px; /* Ancho ideal para parecer un celular */
    background: transparent; /* Quitamos el fondo para que el video respire */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    overflow: hidden;
    display: flex;
}

/* Forzamos a que el video iframe ocupe todo el espacio y tenga bordes curvos */
.feed-item iframe {
    border-radius: 12px;
    background-color: #fff; /* Fondo blanco por si el video tarda en cargar */
}

/* Estilo temporal para que sepas dónde pegar */
.pegar-aqui-box {
    padding: 100px 20px;
    text-align: center;
    color: var(--accent);
    border: 2px dashed var(--accent);
    font-weight: bold;
    text-transform: uppercase;
}


/* PRUEEEEEEBAAAAAA */


        /* Estilos específicos para los perfiles */
        :root { --bg: #0d0d0d; --surface: #1a1a1a; --accent: #e63946; --text: #f1faee; }
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }
        body { background-color: var(--bg); color: var(--text); }
        
        .container { max-width: 1100px; margin: 40px auto; padding: 20px; }
        
        .back-btn { color: #888; text-decoration: none; display: inline-block; margin-bottom: 20px; font-weight: bold; font-size: 14px; }
        .back-btn:hover { color: white; }

        /* Cabecera del Perfil */
        .profile-header { text-align: center; margin-bottom: 40px; border-bottom: 1px solid #333; padding-bottom: 20px; }
        .wrestler-name { color: var(--accent); text-transform: uppercase; font-size: 56px; margin-bottom: 10px; line-height: 1; }
        .wrestler-meta { font-size: 13px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; display: flex; flex-wrap: wrap; justify-content: center; row-gap: 8px; }
        .wrestler-meta span { color: white; font-weight: bold; margin: 0 10px; }
        .wrestler-meta span.stat-group { color: inherit; font-weight: normal; margin: 0; white-space: nowrap; }
        .wrestler-meta span.stat-group:not(:first-child)::before { content: "|"; margin: 0 12px; color: #444; }

        /* Layout Principal: Carrusel a la izquierda, Info a la derecha */
        .profile-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: center; margin-bottom: 60px; }

        /* Carrusel de Imágenes */
        .carousel-wrapper { position: relative; width: 100%; border: 2px solid #333; border-radius: 8px; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; height: 500px; }
        .carousel-slide { display: none; width: 100%; height: 100%; object-fit: contain; }
        .carousel-slide.active { display: block; animation: fade 0.5s; }
        
        .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.6); color: white; border: none; padding: 15px 20px; font-size: 24px; cursor: pointer; transition: 0.3s; z-index: 10; border-radius: 4px; }
        .carousel-btn:hover { background: var(--accent); }
        .btn-prev { left: 10px; }
        .btn-next { right: 10px; }

        @keyframes fade { from { opacity: 0.4; } to { opacity: 1; } }

        /* Caja de Información (Lado derecho) */
        .info-box { background: var(--surface); padding: 30px; border-radius: 8px; border-top: 4px solid var(--accent); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
        .info-box h3 { color: var(--accent); font-size: 22px; text-transform: uppercase; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 10px; }
        .info-item { margin-bottom: 15px; font-size: 16px; color: #ccc; }
        .info-item span.label { font-weight: bold; color: white; display: block; font-size: 14px; text-transform: uppercase; margin-bottom: 2px; }
        .info-item span.value { color: var(--accent); font-size: 18px; font-style: italic; }

        /* Historial de Luchas */
        .history-title { font-size: 28px; text-transform: uppercase; color: white; margin-bottom: 20px; border-left: 5px solid var(--accent); padding-left: 15px; }
        .matches-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }

        .match-card { background: var(--surface); border: 1px solid #333; padding: 0; text-align: center; border-radius: 8px; transition: 0.3s; text-decoration: none; color: white; border-bottom: 3px solid #333; overflow: hidden; display: flex; flex-direction: column; max-width: 380px; width: 100%; margin: 0 auto; }
        .match-card:hover { border-bottom-color: var(--accent); transform: translateY(-5px); box-shadow: 0 5px 15px rgba(230, 57, 70, 0.2); }
        .match-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-bottom: 2px solid var(--accent); }
        .card-content { padding: 20px; }
        .match-card h3 { font-size: 18px; text-transform: uppercase; margin-bottom: 5px; }
        .match-card p { color: var(--accent); font-size: 14px; font-weight: bold; text-transform: uppercase; }
        .match-card span { color: #888; font-size: 12px; }

        /* Resultado de la lucha: oculto por defecto, click para mostrar/ocultar */
        .match-card span.resultado {
            display: inline-block; margin-top: 8px;
            padding: 4px 14px; border-radius: 20px;
            font-size: 12px; font-weight: bold;
            border: 1px solid #555; background: #1a1a1a; color: #aaa;
            cursor: pointer; user-select: none;
            transition: background .15s, border-color .15s, color .15s;
        }
        .match-card span.resultado:hover { border-color: #888; color: #ddd; }
        .match-card span.resultado.win  { background: rgba(34,197,94,.15);  border-color: #22c55e; color: #4ade80; }
        .match-card span.resultado.loss { background: rgba(239,68,68,.15); border-color: #ef4444; color: #f87171; }

        /* Responsividad */
        @media (max-width: 800px) {
            .profile-layout { grid-template-columns: 1fr; }
            .carousel-wrapper { height: 400px; }
        }
        /* En celular el record no entra en una linea: cada dato va en su propio renglon */
        @media (max-width: 600px) {
            .wrestler-name { font-size: 38px; }
            .wrestler-meta { flex-direction: column; align-items: center; row-gap: 4px; font-size: 12px; }
            .wrestler-meta span.stat-group { white-space: normal; }
            .wrestler-meta span.stat-group:not(:first-child)::before { content: none; }
        }
    /* =========================================
   REPRODUCTOR DE AUDIO (PERFILES)
   ========================================= */

.audio-player {
    background: var(--surface);
    border: 1px solid #333;
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap; 
    margin-top: 30px; /* Separación desde arriba */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    width: 100%;
}

.play-btn {
    background: var(--accent);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px var(--accent);
}

.progress-container {
    flex-grow: 1;
    background: #111;
    height: 10px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 1px solid #333;
    min-width: 100px;
}

.progress-bar {
    background: var(--accent);
    height: 100%;
    width: 0%;
    border-radius: 5px;
    transition: width 0.1s linear;
}

.time-display {
    color: #ccc;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    font-family: monospace;
}

/* Estilos del Volumen */
.volume-container {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

.volume-icon {
    font-size: 16px;
    color: #ccc;
}

.volume-slider {
    width: 60px;
    cursor: pointer;
    accent-color: var(--accent);
}

/* =========================================
   CONTENEDOR DE VIDEOS (HORIZONTAL Y VERTICAL)
   ========================================= */

.video-container {
    width: 100%;
    max-width: 800px; /* Evita que el video sea absurdamente gigante en pantallas de PC */
    margin: 0 auto; /* Lo centra en la página */
    aspect-ratio: 16 / 9; /* Ajusta la altura EXACTA sin dejar márgenes negros */
    background: transparent;
    border-radius: 8px; /* Opcional: bordes curvos */
    overflow: hidden;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* =========================================
   USAR ESTO PARA TUS FUTUROS VIDEOS VERTICALES
   ========================================= */
.video-vertical {
    max-width: 400px; /* Ancho ideal para un video tipo celular */
    aspect-ratio: 9 / 16; /* Invierte la medida para que encaje el video vertical */
}

/* =========================================
   MENÚ HAMBURGUESA (BOTÓN INVISIBLE EN PC)
   ========================================= */
.menu-toggle {
    display: none; /* Oculto cuando estás en la computadora */
    font-size: 30px;
    background: none;
    color: white;
    border: none;
    cursor: pointer;
}

/* =========================================
   MODO CELULAR (PANTALLAS CHICAS)
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. EL SALVAVIDAS GENERAL */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    h1 { font-size: 28px !important; }
    
    .footer-container {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 20px !important;
    }

    body {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* -------------------------------------
       2. EL MENÚ DE 3 RAYITAS EN ACCIÓN
       ------------------------------------- */
    .menu-toggle {
        display: block; /* Mostramos las 3 rayitas en celular */
        position: absolute;
        right: 20px; /* Lo tiramos a la derecha */
        top: 15px;
    }

    .main-nav {
        display: none; /* Ocultamos el menú horizontal normal */
        flex-direction: column;
        width: 100%;
        background-color: var(--surface); /* Fondo oscuro del menú desplegable */
        position: absolute;
        top: 70px; /* Baja el menú para que no tape el logo */
        left: 0;
        text-align: center;
        z-index: 1000;
        box-shadow: 0 10px 20px rgba(0,0,0,0.8);
    }

    .main-nav.active {
        display: flex; /* Muestra las opciones cuando tocas las 3 rayitas */
    }

    .main-nav a {
        padding: 15px;
        display: block;
        border-bottom: 1px solid #333;
        width: 100%;
    }

    /* -------------------------------------
       3. LA CUADRÍCULA (2 POR FILA EN CELULAR)
       ------------------------------------- */
    /* REEMPLAZA '.TU_CLASE_DE_CUADRICULA' POR LA CLASE QUE USAS EN TU HTML */
    .grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* Fuerza 2 columnas iguales */
        gap: 8px !important;
    }
}
/* =========================================================================
   CAPA DE ESTILO "OLD SCHOOL" — Sistema Impacto Lucha
   Se aplica encima de lo anterior. Solo cambia la estetica: ninguna
   funcionalidad, script ni estructura depende de esta seccion.
   ========================================================================= */

/* --- TITULOS: Anton, inclinados, con sombra dura --- */
.page-title,
.section-title,
.wrestler-name,
.match-title,
.history-title,
.segments-title,
.gallery-title,
.cronologia-title,
.hero-text h1 {
    font-family: var(--il-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .02em;
    transform: var(--il-skew);
    transform-origin: left;
    text-shadow: var(--il-h1-shadow);
    line-height: 1.05;
}

/* el titulo del luchador es el mas grande de su pagina */
.wrestler-name { color: #FFFFFF; }
.page-title    { color: #FFFFFF; }

/* subtitulos y etiquetas: Barlow Condensed espaciado */
.event-details,
.cronologia-subtitle,
.wrestler-meta,
.info-item .label,
.footer-section h4 {
    font-family: var(--il-cond);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* --- BOTONES rojos con relieve --- */
.cta-entradas,
.btn-ver-mas-resumen {
    font-family: var(--il-cond) !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    border-radius: var(--il-radius) !important;
    background: var(--il-grad-red) !important;
    border: 1px solid #6E0000 !important;
    border-top-color: #FF7A6A !important;
    color: #FFFFFF !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,.55);
    box-shadow: var(--il-shadow-btn) !important;
    transition: transform .1s, filter var(--il-t-fast);
}
.cta-entradas:hover,
.btn-ver-mas-resumen:hover {
    filter: brightness(1.12);
    transform: translateY(-1px) !important;
}
.cta-entradas:active { transform: translateY(3px) !important; }

/* el flotante mantiene su forma de pastilla y su pulso */
.cta-entradas { border-radius: 50px !important; }

/* --- BOTON VOLVER: estilo etiqueta --- */
.back-btn {
    font-family: var(--il-cond);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--il-text-mute);
    transition: color var(--il-t-fast);
}
.back-btn:hover { color: var(--il-red); }

/* --- PANELES / TARJETAS: fondo degradado, borde fino, sombra --- */
.match-card,
.segment-card,
.card,
.info-box,
.event-summary,
.champion-card,
.poster-card,
.folder-card,
.feed-item {
    background: var(--il-grad-panel);
    border: 1px solid var(--il-line);
    border-radius: var(--il-radius);
    box-shadow: var(--il-shadow-panel), var(--il-inset-hi);
    transition: border-color var(--il-t-fast), transform var(--il-t-fast);
}
.match-card:hover,
.segment-card:hover,
.card:hover,
.poster-card:hover,
.folder-card:hover {
    border-color: var(--il-red);
    transform: translateY(-2px);
}

/* barra roja superior en las tarjetas de lucha (marca de la casa) */
.match-card,
.segment-card { border-top: 3px solid var(--il-red); }

/* titulo dentro de tarjeta */
.match-card h3,
.segment-title,
.card h2,
.poster-info h3 {
    font-family: var(--il-cond);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.match-card p,
.card p { color: var(--il-red); }

/* --- INFO BOX del perfil --- */
.info-box h3 {
    font-family: var(--il-display);
    text-transform: uppercase;
    transform: var(--il-skew);
    transform-origin: left;
    color: var(--il-red);
    text-shadow: 2px 2px 0 #000;
}
.info-item .value { font-family: var(--il-cond); font-weight: 600; }

/* --- FRANJA DE PELIGRO: separador con rayas rojas y negras --- */
.il-danger-strip {
    height: 10px;
    background: var(--il-danger);
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

/* --- PIE DE PAGINA --- */
footer {
    border-top: 1px solid var(--il-line);
    background: linear-gradient(180deg, #0E0D0D, var(--il-black));
}
.footer-section h4 { color: var(--il-red); }

/* --- CARRUSEL: marco de acero --- */
.carousel-wrapper {
    border: 1px solid var(--il-line-hi) !important;
    border-radius: var(--il-radius) !important;
    box-shadow: var(--il-shadow-panel);
}
.carousel-btn {
    font-family: var(--il-cond);
    background: rgba(11,10,10,.75) !important;
    border: 1px solid var(--il-line-hi) !important;
}
.carousel-btn:hover { background: var(--il-red) !important; }

/* --- PILDORAS DE RESULTADO: acompañan la paleta nueva --- */
.match-card span.resultado {
    font-family: var(--il-cond);
    letter-spacing: .1em;
    border-radius: var(--il-radius);
}

/* =========================================================================
   CABECERA OLD SCHOOL (dos niveles) + BUSCADOR
   ========================================================================= */

/* --- nivel 1: marca, buscador y boton --- */
.il-topbar {
    background: linear-gradient(180deg,#1A1718 0%,#0E0D0D 100%);
    border-bottom: 1px solid #000;
    box-shadow: var(--il-inset-hi);
}
.il-topbar__inner {
    max-width: var(--il-maxw); margin: 0 auto;
    padding: 14px 16px;
    display: flex; align-items: center; gap: var(--il-lg);
}
.il-brand { display: flex; align-items: center; gap: var(--il-md); text-decoration: none; flex: 0 0 auto; }
.il-brand__logo {
    height: 62px; width: 62px; object-fit: contain; display: block;
    border: 1px solid var(--il-line-hi);
    box-shadow: 0 0 0 1px #000, 0 4px 12px rgba(0,0,0,.6);
}
.il-brand__text { display: flex; flex-direction: column; min-width: 0; }
.il-brand__name {
    font-family: var(--il-display);
    font-size: clamp(20px, 3vw, 32px); line-height: 1;
    letter-spacing: .02em; text-transform: uppercase; color: #FFFFFF;
    transform: var(--il-skew); transform-origin: left;
    text-shadow: 2px 2px 0 #000;
}
.il-brand__name span { color: var(--il-red); text-shadow: 2px 2px 0 #000, 0 0 18px rgba(254,0,0,.5); }
.il-brand__tag {
    font-family: var(--il-cond); font-weight: 600; font-size: 11px;
    letter-spacing: .28em; text-transform: uppercase;
    color: #7A7573; margin-top: 6px; white-space: nowrap;
}

/* --- boton comprar entradas de la barra --- */
.il-btn-comprar {
    flex: 0 0 auto;
    font-family: var(--il-cond); font-weight: 700; font-size: 15px;
    letter-spacing: .14em; text-transform: uppercase; color: #FFFFFF;
    padding: 13px 24px; border-radius: var(--il-radius); white-space: nowrap;
    background: var(--il-grad-red);
    border: 1px solid #6E0000; border-top-color: #FF7A6A;
    text-shadow: 0 -1px 0 rgba(0,0,0,.55);
    box-shadow: var(--il-shadow-btn);
    transition: transform .1s, filter var(--il-t-fast);
    text-decoration: none;
}
.il-btn-comprar:hover { filter: brightness(1.12); transform: translateY(-1px); color:#fff; }
.il-btn-comprar:active { transform: translateY(3px); }

/* --- BUSCADOR --- */
.il-search { position: relative; flex: 1 1 auto; min-width: 0; max-width: 420px; margin-left: auto; }
/* el panel de resultados puede ser mas ancho que el campo, para que entre el texto */
.il-search__results { min-width: 340px; }
.il-search__input {
    width: 100%;
    font-family: var(--il-cond); font-weight: 600; font-size: 14px;
    letter-spacing: .08em;
    color: var(--il-text);
    background: var(--il-panel-2);
    border: 1px solid var(--il-line-hi);
    border-radius: var(--il-radius);
    padding: 12px 14px 12px 38px;
    outline: none;
    transition: border-color var(--il-t-fast), box-shadow var(--il-t-fast);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8584' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px;
}
.il-search__input::placeholder { color: var(--il-text-mute); }
.il-search__input:focus {
    border-color: var(--il-red);
    box-shadow: 0 0 0 2px rgba(254,0,0,.18);
}
.il-search__results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 120;
    background: var(--il-grad-panel);
    border: 1px solid var(--il-line-hi);
    border-top: 2px solid var(--il-red);
    border-radius: var(--il-radius);
    box-shadow: var(--il-shadow-panel);
    overflow: hidden;
}
.il-search__results[hidden] { display: none; }
.il-result {
    display: flex; align-items: center; gap: var(--il-md);
    padding: 10px 12px; text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background var(--il-t-fast);
}
.il-result:last-child { border-bottom: 0; }
.il-result:hover, .il-result.is-sel { background: rgba(254,0,0,.14); }
.il-result__img {
    width: 46px; height: 46px; flex: 0 0 auto; object-fit: cover;
    border: 1px solid var(--il-line); border-radius: 2px; background: var(--il-panel-2);
}
.il-result__body { min-width: 0; flex: 1 1 auto; display: block; overflow: hidden; }
.il-result__title {
    display: block;
    font-family: var(--il-cond); font-weight: 700; font-size: 14px;
    letter-spacing: .05em; text-transform: uppercase; color: #FFFFFF;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.il-result__meta {
    display: block;
    font-family: var(--il-body); font-size: 12px; color: var(--il-text-mute);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.il-result__tag {
    font-family: var(--il-cond); font-weight: 700; font-size: 10px;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--il-gold); flex: 0 0 auto;
}
.il-search__empty {
    padding: 14px 12px; font-family: var(--il-cond); letter-spacing: .1em;
    text-transform: uppercase; font-size: 13px; color: var(--il-text-mute);
}

/* --- nivel 2: pestanas --- */
.il-tabs {
    position: sticky; top: 0; z-index: 40;
    background: var(--il-grad-steel);
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 2px solid #000;
    box-shadow: 0 6px 14px rgba(0,0,0,.6);
}
.il-tabs__inner {
    max-width: var(--il-maxw); margin: 0 auto; padding: 0 8px;
    display: flex; align-items: stretch; gap: 1px;
    overflow-x: auto; scrollbar-width: none;
}
.il-tabs__inner::-webkit-scrollbar { display: none; }
.il-tabs a {
    font-family: var(--il-cond); font-weight: 700; font-size: 15px;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--il-text-body); padding: 15px 20px; white-space: nowrap;
    border-left: 1px solid rgba(255,255,255,.07);
    border-right: 1px solid rgba(0,0,0,.6);
    text-shadow: 0 -1px 0 rgba(0,0,0,.6);
    text-decoration: none;
    transition: color var(--il-t-fast), background var(--il-t-fast);
}
.il-tabs a:hover {
    color: #FFFFFF;
    background: linear-gradient(180deg, rgba(254,0,0,.35), rgba(254,0,0,.10));
}
.il-tabs a.is-active {
    color: #FFFFFF;
    background: linear-gradient(180deg,#FF2A1A,#B60000);
    border-left: 1px solid rgba(255,255,255,.18);
    border-right: 1px solid #000;
    text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 -3px 0 var(--il-red) inset;
}

/* --- boton de menu (solo celular) --- */
.il-menu-toggle {
    display: none;
    background: none; border: 1px solid var(--il-line-hi); color: var(--il-text);
    font-size: 22px; line-height: 1; padding: 8px 12px; border-radius: var(--il-radius);
    cursor: pointer;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .il-brand__tag { display: none; }
    .il-search { max-width: none; order: 3; flex: 1 1 100%; margin-left: 0; }
    .il-topbar__inner { flex-wrap: wrap; gap: var(--il-md); }
    .il-btn-comprar { padding: 11px 16px; font-size: 13px; }
}
@media (max-width: 620px) {
    .il-brand__logo { height: 46px; width: 46px; }
    .il-btn-comprar { display: none; }   /* ya existe el flotante */
    .il-menu-toggle { display: block; margin-left: auto; }
    .il-tabs__inner { flex-direction: column; display: none; }
    .il-tabs.is-open .il-tabs__inner { display: flex; }
    .il-tabs a { border-left: 0; border-right: 0; border-bottom: 1px solid rgba(0,0,0,.6); }
}

/* la cabecera vieja ya no se usa; se anula por si queda algun resto */
header.main-header { display: none; }

/* =========================================================================
   PORTADA / COMPONENTES OLD SCHOOL (hero, modulos, ranking, campeon...)
   ========================================================================= */
.il-wrap { max-width: var(--il-maxw); margin: 0 auto; padding: var(--il-xl) var(--il-lg) 80px; }

/* ---------- HERO ---------- */
.il-hero {
    position: relative; overflow: hidden;
    background: var(--il-grad-panel);
    border: 1px solid var(--il-line);
    border-radius: var(--il-radius);
    box-shadow: var(--il-shadow-panel), var(--il-inset-hi);
    padding: var(--il-2xl);
    margin-bottom: var(--il-xl);
}
.il-hero__fuego {
    position: absolute; left: 0; right: 0; bottom: 0; height: 130px; pointer-events: none;
    background: radial-gradient(120% 100% at 50% 100%, rgba(255,110,20,.42), rgba(254,0,0,.16) 42%, transparent 72%);
}
.il-hero__grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--il-2xl); align-items: start; }

.il-chip {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--il-cond); font-weight: 700; font-size: 11px;
    letter-spacing: .22em; text-transform: uppercase; color: var(--il-text);
    background: rgba(0,0,0,.45); border: 1px solid var(--il-line-hi);
    padding: 7px 14px; border-radius: 2px;
}
.il-chip i { width: 8px; height: 8px; background: var(--il-red); display: block; }

.il-hero__titulo {
    font-family: var(--il-display); font-weight: 400;
    font-size: clamp(38px, 7vw, 74px); line-height: .95;
    text-transform: uppercase; color: #FFFFFF;
    transform: var(--il-skew); transform-origin: left;
    text-shadow: var(--il-h1-shadow);
    margin: var(--il-lg) 0 var(--il-md);
}
.il-hero__fecha {
    font-family: var(--il-cond); font-weight: 600; font-size: clamp(15px, 2vw, 20px);
    letter-spacing: .1em; text-transform: uppercase; color: var(--il-text);
}

/* cuenta regresiva */
.il-cd { display: flex; gap: var(--il-md); margin: var(--il-xl) 0; flex-wrap: wrap; }
.il-cd__box {
    min-width: 84px; text-align: center; padding: 12px 10px;
    background: var(--il-panel-2); border: 1px solid var(--il-line-hi);
    border-radius: var(--il-radius); box-shadow: var(--il-inset-hi);
}
.il-cd__box b {
    display: block; font-family: var(--il-display); font-size: 40px; line-height: 1;
    color: var(--il-red); text-shadow: 2px 2px 0 #000; font-variant-numeric: tabular-nums;
}
.il-cd__box span {
    display: block; margin-top: 6px; font-family: var(--il-cond); font-weight: 600;
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--il-text-mute);
}
.il-cd__vivo {
    font-family: var(--il-display); font-size: 30px; color: var(--il-red);
    text-transform: uppercase; text-shadow: var(--il-h1-shadow); transform: var(--il-skew);
}

/* botones del hero */
.il-hero__botones { display: flex; gap: var(--il-md); flex-wrap: wrap; }
.il-btn {
    display: inline-block; font-family: var(--il-cond); font-weight: 700; font-size: 15px;
    letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
    padding: 15px 30px; border-radius: var(--il-radius);
    transition: transform .1s, filter var(--il-t-fast);
}
.il-btn--rojo {
    color: #fff; background: var(--il-grad-red);
    border: 1px solid #6E0000; border-top-color: #FF7A6A;
    text-shadow: 0 -1px 0 rgba(0,0,0,.55); box-shadow: var(--il-shadow-btn);
}
.il-btn--acero {
    color: #fff; background: var(--il-grad-steel);
    border: 1px solid var(--il-line-hi); border-top-color: rgba(255,255,255,.18);
    box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 4px 0 #0A0909, 0 10px 18px rgba(0,0,0,.5);
}
.il-btn:hover { filter: brightness(1.14); transform: translateY(-1px); color: #fff; }
.il-btn:active { transform: translateY(3px); }

/* poster */
.il-hero__poster {
    display: block; position: relative; aspect-ratio: 4 / 5;
    border: 1px solid var(--il-line-hi); border-radius: var(--il-radius);
    background: repeating-linear-gradient(115deg, #1A1718 0 14px, #141213 14px 28px);
    overflow: hidden; box-shadow: var(--il-shadow-panel);
}
.il-hero__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.il-hero__poster-ph {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: var(--il-lg);
}
.il-hero__poster-ph .q { font-family: var(--il-display); font-size: 84px; color: #2A2627; line-height: 1; }
.il-hero__poster-ph .txt {
    font-family: var(--il-cond); font-weight: 600; font-size: 11px;
    letter-spacing: .24em; text-transform: uppercase; color: var(--il-text-mute);
}

/* ---------- MODULOS (titulo en barra) ---------- */
.il-cols { display: grid; grid-template-columns: 1.4fr .9fr; gap: var(--il-xl); margin-bottom: var(--il-xl); align-items: start; }
.il-modulo {
    background: var(--il-grad-panel);
    border: 1px solid var(--il-line);
    border-radius: var(--il-radius);
    box-shadow: var(--il-shadow-panel), var(--il-inset-hi);
    margin-bottom: var(--il-xl);
    overflow: hidden;
}
.il-cols .il-modulo { margin-bottom: 0; }
.il-modulo__bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--il-md);
    padding: 12px var(--il-lg);
    background: var(--il-grad-steel);
    border-bottom: 2px solid #000;
    box-shadow: var(--il-inset-hi);
}
.il-modulo__bar h2 {
    font-family: var(--il-display); font-weight: 400; font-size: 20px;
    text-transform: uppercase; letter-spacing: .02em; color: #FFFFFF;
    transform: var(--il-skew); transform-origin: left;
    text-shadow: 2px 2px 0 #000;
    border-left: 4px solid var(--il-red); padding-left: 12px;
}
.il-modulo__bar a {
    font-family: var(--il-cond); font-weight: 700; font-size: 11px;
    letter-spacing: .18em; text-transform: uppercase; color: var(--il-text-mute);
    text-decoration: none; white-space: nowrap; transition: color var(--il-t-fast);
}
.il-modulo__bar a:hover { color: var(--il-red); }
.il-modulo__body { padding: var(--il-lg); }
.il-modulo--gold { border-color: var(--il-gold-dim); }
.il-modulo--gold .il-modulo__bar h2 { border-left-color: var(--il-gold); }
.il-vacio { color: var(--il-text-mute); font-size: 14px; text-align: center; padding: var(--il-lg); }

/* ---------- RANKING de la portada ---------- */
.il-rk-fila {
    display: flex; align-items: center; gap: var(--il-md);
    padding: 10px 12px; margin-bottom: 6px; text-decoration: none;
    background: var(--il-panel-2); border: 1px solid var(--il-line);
    border-left: 3px solid var(--il-line-hi);
    border-radius: var(--il-radius); transition: border-color var(--il-t-fast), transform var(--il-t-fast);
}
.il-rk-fila:last-child { margin-bottom: 0; }
.il-rk-fila:hover { border-left-color: var(--il-red); transform: translateX(3px); }
.il-rk-fila.top1 { border-left-color: var(--il-gold); }
.il-rk-fila.top2 { border-left-color: #C0C0C0; }
.il-rk-fila.top3 { border-left-color: #CD7F32; }
.il-rk-pos {
    font-family: var(--il-display); font-size: 26px; line-height: 1;
    color: var(--il-text-mute); min-width: 34px; text-align: center;
    text-shadow: 2px 2px 0 #000;
}
.il-rk-fila.top1 .il-rk-pos { color: var(--il-gold); }
.il-rk-fila.top2 .il-rk-pos { color: #C0C0C0; }
.il-rk-fila.top3 .il-rk-pos { color: #CD7F32; }
.il-rk-datos { flex: 1 1 auto; min-width: 0; }
.il-rk-nombre {
    display: block; font-family: var(--il-cond); font-weight: 700; font-size: 15px;
    letter-spacing: .06em; text-transform: uppercase; color: #FFFFFF;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.il-rk-record { display: block; font-family: var(--il-mono); font-size: 11px; color: var(--il-text-mute); margin-top: 2px; }
.il-rk-mov { font-family: var(--il-cond); font-weight: 700; font-size: 11px; letter-spacing: .12em; min-width: 42px; text-align: right; }
.il-rk-mov.sube { color: #2ecc71; }
.il-rk-mov.baja { color: var(--il-red); }
.il-rk-mov.igual { color: #555; }
.il-rk-mov.nuevo { color: var(--il-gold); }

/* ---------- CAMPEON ---------- */
.il-campeon { text-align: center; }
.il-campeon__foto {
    display: block; width: 132px; height: 132px; margin: 0 auto var(--il-md);
    border-radius: 50%; overflow: hidden;
    border: 2px solid var(--il-gold);
    box-shadow: 0 0 26px rgba(232,196,106,.28), var(--il-shadow-panel);
    background: var(--il-panel-2);
}
.il-campeon__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.il-campeon__nombre {
    display: block; font-family: var(--il-display); font-size: 26px; line-height: 1.1;
    text-transform: uppercase; color: #FFFFFF; text-decoration: none;
    transform: var(--il-skew); text-shadow: 2px 2px 0 #000;
}
.il-campeon__nombre:hover { color: var(--il-gold); }
.il-campeon__desde {
    font-family: var(--il-cond); font-weight: 600; font-size: 11px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--il-text-mute); margin-top: 8px;
}
.il-campeon__stats { display: flex; justify-content: center; gap: var(--il-2xl); margin: var(--il-lg) 0; }
.il-campeon__stats b {
    display: block; font-family: var(--il-display); font-size: 30px; color: var(--il-gold);
    text-shadow: 2px 2px 0 #000; line-height: 1;
}
.il-campeon__stats span {
    display: block; margin-top: 4px; font-family: var(--il-cond); font-weight: 600;
    font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--il-text-mute);
}
.il-campeon__link {
    font-family: var(--il-cond); font-weight: 700; font-size: 11px;
    letter-spacing: .18em; text-transform: uppercase; color: var(--il-gold);
    text-decoration: none; border-bottom: 1px solid var(--il-gold-dim); padding-bottom: 2px;
}
.il-campeon__link:hover { color: var(--il-gold-text); }

/* ---------- ROSTER de la portada ---------- */
.il-roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--il-md); }
.il-luchador {
    display: block; text-decoration: none;
    background: var(--il-panel-2); border: 1px solid var(--il-line);
    border-radius: var(--il-radius); overflow: hidden;
    transition: border-color var(--il-t-fast), transform var(--il-t-fast);
}
.il-luchador:hover { border-color: var(--il-red); transform: translateY(-2px); }
.il-luchador__foto {
    display: block; aspect-ratio: 4 / 5; overflow: hidden;
    background: linear-gradient(180deg, #1A1718, #121011);
    border-bottom: 2px solid var(--il-red);
}
.il-luchador__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.il-luchador__nombre {
    display: block; padding: 10px 12px;
    font-family: var(--il-cond); font-weight: 700; font-size: 13px;
    letter-spacing: .08em; text-transform: uppercase; color: #FFFFFF;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- TEMPORADAS ---------- */
.il-temporadas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--il-lg); }
.il-temporada {
    display: block; padding: 0 0 var(--il-xl); text-decoration: none; overflow: hidden;
    background: var(--il-panel-2); border: 1px solid var(--il-line);
    border-left: 4px solid var(--il-line-hi);
    border-radius: var(--il-radius); transition: border-color var(--il-t-fast), transform var(--il-t-fast);
}
.il-temporada:hover { border-left-color: var(--il-red); transform: translateY(-4px); }

/* el collage de fotos del anio */
.il-temporada__collage { display: block; position: relative; aspect-ratio: 6 / 5; overflow: hidden; }
.il-temporada__collage img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform var(--il-t-med);
}
.il-temporada:hover .il-temporada__collage img { transform: scale(1.04); }
.il-temporada__collage::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
    background: linear-gradient(180deg, rgba(11,10,10,0), var(--il-panel-2));
}
.il-temporada__anio,
.il-temporada__meta { padding: 0 var(--il-xl); }
.il-temporada__anio { margin-top: -14px; position: relative; z-index: 1; }
.il-temporada--activa { border-left-color: var(--il-red); }
.il-temporada__anio {
    display: block; font-family: var(--il-display); font-size: 22px;
    text-transform: uppercase; color: #FFFFFF; transform: var(--il-skew);
    transform-origin: left; text-shadow: 2px 2px 0 #000;
}
.il-temporada__meta {
    display: block; margin-top: 8px; font-family: var(--il-cond); font-weight: 600;
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--il-text-mute);
}
.il-temporada--activa .il-temporada__meta { color: var(--il-red); }

/* ---------- RESPONSIVE de la portada ---------- */
@media (max-width: 900px) {
    .il-hero__grid { grid-template-columns: 1fr; }
    .il-hero__poster { max-width: 320px; margin: 0 auto; }
    .il-cols { grid-template-columns: 1fr; }
    .il-cols .il-modulo { margin-bottom: var(--il-xl); }
}
@media (max-width: 620px) {
    .il-wrap { padding: var(--il-lg) var(--il-md) 70px; }
    .il-hero { padding: var(--il-xl) var(--il-lg); }
    .il-cd__box { min-width: 66px; padding: 10px 6px; }
    .il-cd__box b { font-size: 30px; }
    .il-hero__botones .il-btn { flex: 1 1 100%; text-align: center; }
    .il-campeon__stats { gap: var(--il-xl); }
}

/* --- Cuadrito de foto del ranking (lo genera motor.js, lo usan ranking.html y la portada) --- */
.rk-foto {
    width: 46px; height: 46px; border-radius: 8px; background: #222;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    color: #555; font-weight: bold; font-size: 18px; flex: 0 0 auto;
}
.rk-foto img {
    width: 100%; height: 100%; object-fit: cover; object-position: center top;
    transform: scale(1.8); transform-origin: center top;
}

/* =========================================================================
   CABEZAL DE PAGINA (se reusa en Ranking, Roster, Eventos, etc.)
   ========================================================================= */
.il-pagehead {
    position: relative; overflow: hidden;
    border-bottom: 1px solid var(--il-line);
    background: linear-gradient(180deg, #141213 0%, var(--il-black) 100%);
}
.il-pagehead__fuego {
    position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none;
    background: radial-gradient(120% 100% at 50% 100%, rgba(255,110,20,.40), rgba(254,0,0,.14) 44%, transparent 72%);
}
.il-pagehead__inner {
    position: relative; max-width: var(--il-maxw); margin: 0 auto;
    padding: var(--il-2xl) var(--il-lg);
}
.il-kicker {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--il-cond); font-weight: 700; font-size: 11px;
    letter-spacing: .24em; text-transform: uppercase; color: var(--il-text-mute);
}
.il-kicker::before { content: ""; width: 34px; height: 2px; background: var(--il-red); display: block; }
.il-pagehead__titulo {
    font-family: var(--il-display); font-weight: 400;
    font-size: clamp(36px, 7vw, 72px); line-height: .95;
    text-transform: uppercase; color: #FFFFFF;
    transform: var(--il-skew); transform-origin: left;
    text-shadow: var(--il-h1-shadow);
    margin: var(--il-md) 0;
}
.il-pagehead__desc {
    max-width: 560px; color: var(--il-text-body); font-size: 15px; line-height: 1.5;
}

/* --- pestanas tipo segmento (Temporada / Historico) --- */
.il-segmented { display: inline-flex; gap: 1px; margin-top: var(--il-lg); }
.il-seg {
    font-family: var(--il-cond); font-weight: 700; font-size: 13px;
    letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
    color: var(--il-text-body); background: var(--il-grad-steel);
    border: 1px solid var(--il-line-hi); border-radius: var(--il-radius);
    padding: 11px 22px; transition: color var(--il-t-fast), background var(--il-t-fast);
}
.il-seg:hover { color: #fff; }
.il-seg.is-active {
    color: #fff; background: var(--il-grad-red);
    border-color: #6E0000; border-top-color: #FF7A6A;
    text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    box-shadow: 0 1px 0 rgba(255,255,255,.3) inset;
}

/* --- encabezado de tabla/seccion con linea --- */
.il-tabla-head {
    display: flex; align-items: center; gap: var(--il-lg);
    font-family: var(--il-cond); font-weight: 700; font-size: 11px;
    letter-spacing: .24em; text-transform: uppercase; color: var(--il-text-mute);
    margin: var(--il-xl) 0 var(--il-md);
}
.il-tabla-head > span:first-child { white-space: nowrap; }
.il-tabla-head::after {
    content: ""; flex: 1 1 auto; height: 1px; background: var(--il-line); order: 1;
}
.il-tabla-head > span:last-child { order: 2; white-space: nowrap; }
.il-tabla-head--sub { margin-top: var(--il-2xl); }

.il-nota {
    text-align: center; color: var(--il-text-mute); font-size: 12px;
    line-height: 1.7; margin-top: var(--il-2xl);
}

/* =========================================================================
   TABLA DEL RANKING (pagina completa)
   ========================================================================= */
.rk-tabla { max-width: 100%; }
.rk-fila {
    display: flex; align-items: center; gap: var(--il-lg);
    background: var(--il-grad-panel);
    border: 1px solid var(--il-line);
    border-left: 4px solid var(--il-line-hi);
    border-radius: var(--il-radius);
    padding: 14px var(--il-lg); margin-bottom: 8px;
    text-decoration: none;
    box-shadow: var(--il-inset-hi);
    transition: border-color var(--il-t-fast), transform var(--il-t-fast);
}
.rk-fila:hover { border-left-color: var(--il-red); transform: translateX(4px); }
.rk-pos {
    font-family: var(--il-display); font-size: 34px; line-height: 1;
    color: var(--il-text-mute); min-width: 46px; text-align: center;
    text-shadow: 2px 2px 0 #000;
}
.rk-fila.top1 { border-left-color: var(--il-gold); }
.rk-fila.top2 { border-left-color: #C0C0C0; }
.rk-fila.top3 { border-left-color: #CD7F32; }
.rk-fila.top1 .rk-pos { color: var(--il-gold); }
.rk-fila.top2 .rk-pos { color: #C0C0C0; }
.rk-fila.top3 .rk-pos { color: #CD7F32; }
.rk-nombre { flex: 1 1 auto; min-width: 0; }
.rk-nombre__txt {
    font-family: var(--il-cond); font-weight: 700; font-size: 18px;
    letter-spacing: .06em; text-transform: uppercase; color: #FFFFFF;
}
.rk-fila:hover .rk-nombre__txt { color: var(--il-red); }
.rk-record { font-family: var(--il-mono); font-size: 12px; color: var(--il-text-mute); margin-top: 3px; }
.rk-mov {
    font-family: var(--il-cond); font-weight: 700; font-size: 12px;
    letter-spacing: .14em; min-width: 52px; text-align: right;
}
.rk-mov.sube { color: #2ecc71; }
.rk-mov.baja { color: var(--il-red); }
.rk-mov.igual { color: #555; }
.rk-mov.nuevo { color: var(--il-gold); font-size: 10px; }

.rk-fila.sin-luchas { opacity: .5; }
.rk-fila.sin-luchas .rk-pos { font-size: 20px; }
.rk-fila.es-campeon { border-color: var(--il-gold-dim); border-left-color: var(--il-gold); }
.badge-titulo {
    display: inline-block; background: var(--il-gold); color: #3a2e00;
    font-family: var(--il-cond); font-weight: 700;
    font-size: 10px; padding: 2px 9px; border-radius: 2px;
    margin-left: 8px; letter-spacing: .1em; vertical-align: middle; text-transform: uppercase;
}

/* --- barra del campeon (arriba de la tabla) --- */
.il-campeon-bar {
    display: flex; align-items: center; gap: var(--il-xl);
    background: linear-gradient(180deg, rgba(232,196,106,.07), var(--il-panel-2));
    border: 1px solid var(--il-gold-dim);
    border-left: 4px solid var(--il-gold);
    border-radius: var(--il-radius);
    padding: var(--il-xl); margin-bottom: var(--il-lg);
    box-shadow: var(--il-shadow-panel);
}
.il-campeon-bar .rk-foto {
    width: 78px; height: 78px; border-radius: 50%;
    border: 2px solid var(--il-gold); font-size: 26px;
}
.il-campeon-bar__txt { flex: 1 1 auto; min-width: 0; }
.il-campeon-bar__label {
    display: block; font-family: var(--il-cond); font-weight: 700; font-size: 11px;
    letter-spacing: .22em; text-transform: uppercase; color: var(--il-gold);
}
.il-campeon-bar__nombre {
    display: block; font-family: var(--il-display); font-size: clamp(26px, 4vw, 40px);
    line-height: 1.05; text-transform: uppercase; color: #FFFFFF; text-decoration: none;
    transform: var(--il-skew); transform-origin: left; text-shadow: 2px 2px 0 #000;
    margin: 4px 0;
}
.il-campeon-bar__nombre:hover { color: var(--il-gold); }
.il-campeon-bar__nota { font-size: 13px; color: var(--il-text-body); }
.il-campeon-bar__stats { display: flex; gap: var(--il-2xl); flex: 0 0 auto; text-align: center; }
.il-campeon-bar__stats b {
    display: block; font-family: var(--il-display); font-size: 34px; line-height: 1;
    color: var(--il-gold); text-shadow: 2px 2px 0 #000;
}
.il-campeon-bar__stats span {
    display: block; margin-top: 5px; font-family: var(--il-cond); font-weight: 600;
    font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--il-text-mute);
}

@media (max-width: 720px) {
    .il-campeon-bar { flex-wrap: wrap; gap: var(--il-lg); padding: var(--il-lg); }
    .il-campeon-bar__stats { gap: var(--il-xl); width: 100%; justify-content: flex-start; }
    .rk-fila { gap: var(--il-md); padding: 12px; }
    .rk-pos { font-size: 26px; min-width: 34px; }
    .rk-nombre__txt { font-size: 15px; }
    .il-pagehead__inner { padding: var(--il-xl) var(--il-md); }
}

/* =========================================================================
   SECCIONES CON TITULO GRANDE (Roster, Eventos, Campeones...)
   ========================================================================= */
.il-sec { padding: var(--il-2xl) 0 0; }
.il-sec-head { margin-bottom: var(--il-xl); }
.il-sec-head__kicker {
    display: block; font-family: var(--il-cond); font-weight: 700; font-size: 12px;
    letter-spacing: .22em; text-transform: uppercase; color: var(--il-red);
    margin-bottom: 8px;
}
.il-sec-head__linea { display: flex; align-items: center; gap: var(--il-lg); }
.il-sec-head__linea h2 {
    font-family: var(--il-display); font-weight: 400;
    font-size: clamp(28px, 5vw, 50px); line-height: 1;
    text-transform: uppercase; color: #FFFFFF; margin: 0;
    transform: var(--il-skew); transform-origin: left;
    text-shadow: 2px 2px 0 #000;
}
.il-sec-head__rule {
    flex: 1 1 auto; height: 2px;
    background: linear-gradient(90deg, var(--il-red), rgba(254,0,0,0));
}
.il-sec-head__num {
    font-family: var(--il-mono); font-size: 14px; color: var(--il-text-mute); flex: 0 0 auto;
}

/* =========================================================================
   TARJETAS DE LUCHADOR (grilla del Roster)
   ========================================================================= */
.il-grid-roster {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--il-lg);
}
.il-card-l {
    display: block; text-decoration: none;
    background: var(--il-panel); border: 1px solid var(--il-line);
    border-radius: var(--il-radius); overflow: hidden;
    transition: transform var(--il-t-med), border-color var(--il-t-med), background var(--il-t-med);
}
.il-card-l:hover {
    transform: translateY(-6px);
    border-color: rgba(254,0,0,.55);
    background: #201D1E;
}
.il-card-l__foto {
    position: relative; aspect-ratio: 3 / 4; overflow: hidden;
    background: linear-gradient(180deg, #1C1A1B, #131112);
}
.il-card-l__foto img {
    width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
.il-card-l__foto::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
    background: linear-gradient(180deg, rgba(11,10,10,0), var(--il-black));
    pointer-events: none;
}
.il-card-l__badge {
    position: absolute; left: 0; top: 14px; z-index: 2;
    background: var(--il-red); color: #fff;
    font-family: var(--il-cond); font-weight: 700; font-size: 11px;
    letter-spacing: .16em; text-transform: uppercase;
    padding: 5px 10px 5px 12px;
}
.il-card-l__badge--oro { background: var(--il-gold); color: #3a2e00; }
.il-card-l__body { padding: 14px 14px 18px; border-top: 3px solid var(--il-red); }
.il-card-l.es-campeon .il-card-l__body { border-top-color: var(--il-gold); }
.il-card-l__body h3 {
    font-family: var(--il-cond); font-weight: 600; font-size: 20px; line-height: 1.1;
    letter-spacing: .04em; text-transform: uppercase; color: #FFFFFF; margin: 0;
}
.il-card-l__body p {
    font-family: var(--il-mono); font-size: 11px; letter-spacing: .06em;
    color: var(--il-text-mute); margin: 8px 0 0; line-height: 1.4;
}

/* --- Bloque grande del campeon (Roster) --- */
.il-campeon-hero {
    display: flex; align-items: flex-end; gap: var(--il-2xl);
    background: linear-gradient(180deg, rgba(232,196,106,.08), var(--il-panel-2));
    border: 1px solid var(--il-gold-dim); border-left: 4px solid var(--il-gold);
    border-radius: var(--il-radius); padding: var(--il-xl) var(--il-2xl) 0;
    text-decoration: none; overflow: hidden;
    box-shadow: var(--il-shadow-panel);
    transition: border-color var(--il-t-med);
}
.il-campeon-hero:hover { border-color: var(--il-gold); }
.il-campeon-hero__img { position: relative; flex: 0 0 220px; }
.il-campeon-hero__img > img:first-child {
    width: 100%; display: block; filter: drop-shadow(0 12px 26px rgba(0,0,0,.7));
}
/* el cinturon va del lado derecho de la tarjeta, no encima del campeon */
.il-campeon-hero__cinturon {
    flex: 0 1 220px; width: 220px; min-width: 130px; align-self: center;
    margin-bottom: var(--il-2xl);
    transform: rotate(-6deg);
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.8));
}
.il-campeon-hero__txt { flex: 1 1 auto; min-width: 0; padding-bottom: var(--il-2xl); }
.il-campeon-hero__label {
    display: block; font-family: var(--il-cond); font-weight: 700; font-size: 12px;
    letter-spacing: .22em; text-transform: uppercase; color: var(--il-gold);
}
.il-campeon-hero__nombre {
    display: block; font-family: var(--il-display);
    font-size: clamp(30px, 5.2vw, 58px); line-height: 1.02; text-transform: uppercase;
    color: #FFFFFF; text-shadow: var(--il-h1-shadow); margin: var(--il-sm) 0;
}
.il-campeon-hero:hover .il-campeon-hero__nombre { color: var(--il-gold); }
.il-campeon-hero__sub {
    display: block; font-family: var(--il-mono); font-size: 13px;
    letter-spacing: .08em; color: var(--il-text-body);
}

@media (max-width: 640px) {
    .il-grid-roster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--il-md); }
    .il-card-l__body { padding: 11px 11px 14px; }
    .il-card-l__body h3 { font-size: 16px; }
    .il-campeon-hero { flex-direction: column; align-items: center; text-align: center; padding: var(--il-lg) var(--il-lg) 0; }
    .il-campeon-hero__img { flex: 0 0 auto; width: 190px; }
    .il-campeon-hero__txt { padding-bottom: var(--il-md); }
    .il-campeon-hero__cinturon { flex: 0 0 auto; width: 200px; margin: 0 auto var(--il-xl); }
}

/* =========================================================================
   PAGINA DE EVENTO
   ========================================================================= */
.il-back {
    display: inline-block; margin: var(--il-lg) 0;
    font-family: var(--il-cond); font-weight: 700; font-size: 12px;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--il-text-mute); text-decoration: none;
    transition: color var(--il-t-fast);
}
.il-back:hover { color: var(--il-red); }

.il-evento-hero {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: var(--il-2xl);
    background: var(--il-grad-panel);
    border: 1px solid var(--il-line); border-radius: var(--il-radius);
    padding: var(--il-2xl); margin-bottom: var(--il-xl);
    box-shadow: var(--il-shadow-panel);
}
.il-evento-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
    background: radial-gradient(110% 100% at 50% 100%, rgba(255,110,20,.30), rgba(254,0,0,.10) 45%, transparent 74%);
    pointer-events: none;
}
.il-evento-hero__poster { flex: 0 0 300px; position: relative; z-index: 1; }
.il-evento-hero__img {
    width: 100%; display: block; border: 1px solid var(--il-line-hi);
    border-radius: var(--il-radius);
    box-shadow: 0 14px 34px rgba(0,0,0,.7);
}
.il-evento-hero__txt { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; }
.il-evento-hero__chip {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(254,0,0,.12); border: 1px solid rgba(254,0,0,.4);
    padding: 6px 12px; border-radius: 2px;
    font-family: var(--il-cond); font-weight: 700; font-size: 11px;
    letter-spacing: .2em; text-transform: uppercase; color: #FF6B5C;
}
.il-evento-hero__chip::before { content: ""; width: 8px; height: 8px; background: var(--il-red); display: block; }
.il-evento-hero__titulo {
    font-family: var(--il-display); font-weight: 400;
    font-size: clamp(30px, 5.2vw, 58px); line-height: .96;
    text-transform: uppercase; color: #FFFFFF; margin: var(--il-md) 0 0;
    transform: var(--il-skew); transform-origin: left;
    text-shadow: var(--il-h1-shadow);
}
.il-evento-hero__sub {
    font-family: var(--il-display); font-size: clamp(16px, 2.4vw, 26px);
    line-height: 1.1; text-transform: uppercase; color: var(--il-gold);
    transform: var(--il-skew); transform-origin: left;
    text-shadow: 2px 2px 0 #000; margin-top: 4px;
}
.il-evento-hero__datos { display: flex; flex-wrap: wrap; gap: var(--il-sm); margin: var(--il-lg) 0; }
.il-evento-hero__datos span {
    background: var(--il-grad-steel); border: 1px solid var(--il-line-hi);
    border-radius: var(--il-radius); padding: 8px 14px;
    font-family: var(--il-cond); font-weight: 700; font-size: 12px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--il-text-body);
}
.il-evento-hero__intro {
    border-left: 3px solid var(--il-red); padding-left: var(--il-lg);
    color: var(--il-text-body); font-size: 15px; line-height: 1.6; margin: 0 0 var(--il-lg);
}

/* el resumen largo desplegable, dentro del hero */
.il-evento-hero .event-summary.collapsible {
    background: none; border: 0; border-left: 3px solid var(--il-red);
    border-radius: 0; padding: 0 0 0 var(--il-lg); margin: 0 0 var(--il-md);
    max-height: 92px; color: var(--il-text-body); font-size: 15px; line-height: 1.6;
}
.il-evento-hero .event-summary.collapsible.expanded { max-height: 1400px; }
.il-evento-hero .event-summary.collapsible:not(.expanded)::after {
    background: linear-gradient(to bottom, transparent, var(--il-panel));
}
.il-btn--mas {
    display: inline-block; margin-top: var(--il-sm);
    background: var(--il-grad-steel); color: #fff;
    border: 1px solid var(--il-line-hi); border-radius: var(--il-radius);
    font-family: var(--il-cond); font-weight: 700; font-size: 12px;
    letter-spacing: .16em; text-transform: uppercase;
    padding: 11px 20px; cursor: pointer; width: auto;
    transition: border-color var(--il-t-fast), color var(--il-t-fast);
}
.il-btn--mas:hover { border-color: var(--il-red); color: var(--il-red); }

/* --- dos columnas: cartelera + costado --- */
.il-evento-cols {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--il-xl); align-items: start;
}
.il-evento-main { min-width: 0; }
.il-evento-side { display: flex; flex-direction: column; gap: var(--il-lg); position: sticky; top: 96px; }

.il-panel {
    background: var(--il-grad-panel); border: 1px solid var(--il-line);
    border-radius: var(--il-radius); overflow: hidden;
    box-shadow: var(--il-shadow-panel);
}
.il-panel__head {
    display: flex; align-items: center; gap: var(--il-md);
    background: var(--il-grad-steel); border-bottom: 1px solid var(--il-line-hi);
    padding: 13px var(--il-lg);
}
.il-panel__titulo {
    flex: 1 1 auto; display: flex; align-items: center; gap: 10px;
    font-family: var(--il-cond); font-weight: 700; font-size: 15px;
    letter-spacing: .16em; text-transform: uppercase; color: #FFFFFF;
}
.il-panel__titulo::before { content: ""; width: 4px; height: 17px; background: var(--il-red); display: block; }
.il-panel__meta {
    font-family: var(--il-mono); font-size: 11px; color: var(--il-text-mute); flex: 0 0 auto;
}
.il-panel__body { padding: var(--il-lg); }
.il-panel__body > .video-container { margin: 0; }

.il-datos { margin: 0; }
.il-datos > div {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--il-md);
    padding: 11px 0; border-bottom: 1px solid var(--il-line);
}
.il-datos > div:last-child { border-bottom: 0; }
.il-datos dt {
    font-family: var(--il-cond); font-weight: 600; font-size: 11px;
    letter-spacing: .18em; text-transform: uppercase; color: var(--il-text-mute);
}
.il-datos dd {
    margin: 0; text-align: right;
    font-family: var(--il-cond); font-weight: 700; font-size: 15px;
    letter-spacing: .06em; text-transform: uppercase; color: #FFFFFF;
}

/* las grillas de luchas, ya dentro del panel */
.il-panel__body .segments-grid,
.il-panel__body .matches-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--il-md); margin: 0;
}
.il-panel__body .segments-title {
    font-family: var(--il-cond); font-weight: 700; font-size: 12px;
    letter-spacing: .22em; text-transform: uppercase; color: var(--il-text-mute);
    border-bottom: 1px solid var(--il-line); padding-bottom: 8px;
    margin: var(--il-xl) 0 var(--il-md);
}
.il-panel__body .segments-title:first-child { margin-top: 0; }

@media (max-width: 900px) {
    .il-evento-cols { grid-template-columns: minmax(0, 1fr); }
    .il-evento-side { position: static; }
    .il-evento-hero { flex-direction: column; align-items: stretch; gap: var(--il-xl); padding: var(--il-lg); }
    .il-evento-hero__poster { flex: 0 0 auto; max-width: 340px; margin: 0 auto; }
    .il-evento-hero__titulo, .il-evento-hero__sub { transform: none; }
}
@media (max-width: 560px) {
    .il-panel__body .segments-grid,
    .il-panel__body .matches-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* =========================================================================
   TEMPORADAS: GRILLA DE POSTERS Y CARPETAS DE ANIO
   ========================================================================= */
.posters-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--il-lg);
    margin: var(--il-xl) 0 var(--il-2xl);
}
.poster-card { border-top: 3px solid var(--il-red); }
.poster-img { border-bottom: 0; }
.poster-info { padding: 14px 14px 18px; text-align: left; border-top: 1px solid var(--il-line); }
.poster-info h2 {
    font-family: var(--il-cond); font-weight: 700; font-size: 19px; line-height: 1.15;
    letter-spacing: .05em; text-transform: uppercase; color: #FFFFFF; margin: 0 0 8px;
}
.poster-info span {
    font-family: var(--il-mono); font-size: 11px; font-weight: 400;
    letter-spacing: .05em; color: var(--il-text-mute); display: block; line-height: 1.6;
}
/* los que todavia no tienen poster */
.poster-card:not(a) { opacity: .55; border-top-color: var(--il-line-hi); }
.poster-card:not(a) .poster-info h2 { color: var(--il-text-mute); }

.folders-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--il-xl); margin: var(--il-xl) 0 var(--il-2xl); }
.year-folder {
    display: block; text-decoration: none; overflow: hidden;
    background: var(--il-grad-panel); border: 1px solid var(--il-line);
    border-top: 3px solid var(--il-red); border-radius: var(--il-radius);
    box-shadow: var(--il-shadow-panel);
    transition: border-color var(--il-t-med), transform var(--il-t-med);
}
.year-folder:hover { border-color: var(--il-red); transform: translateY(-5px); }
.year-box { position: relative; aspect-ratio: 6 / 5; overflow: hidden; background: var(--il-panel-2); }
.year-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.year-box::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
    background: linear-gradient(180deg, rgba(11,10,10,0), var(--il-black));
}
.year-label {
    display: block; padding: var(--il-lg) var(--il-lg) 0;
    font-family: var(--il-display); font-size: clamp(24px, 3.4vw, 36px); line-height: 1;
    text-transform: uppercase; color: #FFFFFF;
    transform: var(--il-skew); transform-origin: left; text-shadow: 2px 2px 0 #000;
}
.year-desc {
    display: block; padding: var(--il-md) var(--il-lg) var(--il-xl);
    font-family: var(--il-mono); font-size: 12px; color: var(--il-text-mute); line-height: 1.6;
}

@media (max-width: 560px) {
    .posters-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--il-md); }
    .poster-info h2 { font-size: 15px; }
}

/* =========================================================================
   CRONOLOGIA
   ========================================================================= */
.cron-wrap { padding-top: var(--il-xl); }
.cron-panel { margin-bottom: var(--il-lg); }
.cron-panel .il-panel__body { padding: var(--il-lg) var(--il-lg) var(--il-sm); }

/* --- boton de limpiar, en la cabecera del panel --- */
.cron-limpiar {
    display: none; background: none; border: 0; cursor: pointer;
    font-family: var(--il-cond); font-weight: 700; font-size: 11px;
    letter-spacing: .18em; text-transform: uppercase; color: var(--il-text-mute);
    transition: color var(--il-t-fast);
}
.cron-limpiar.show { display: inline-block; }
.cron-limpiar:hover { color: var(--il-red); }

/* --- una fila por anio (o por "historias"): etiqueta a la izquierda, chips al lado --- */
.cron-anio-grupo {
    display: flex; align-items: flex-start; gap: var(--il-md); flex-wrap: wrap;
    padding: var(--il-md) 0; border-top: 1px solid var(--il-line);
}
.cron-anio-grupo:first-child { border-top: 0; padding-top: 0; }
.cron-chips { display: flex; flex-wrap: wrap; gap: var(--il-sm); }
.cron-chips-evento { flex: 1 1 200px; min-width: 0; }

/* la etiqueta de la izquierda: barrita roja + texto */
.cron-chip.anio,
.cron-etiqueta {
    flex: 0 0 auto; cursor: pointer;
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--il-panel-2); border: 1px solid var(--il-line-hi);
    border-radius: var(--il-radius); padding: 8px 15px;
    font-family: var(--il-display); font-size: 16px; letter-spacing: .03em;
    text-transform: uppercase; color: #FFFFFF;
    transition: border-color var(--il-t-fast);
}
.cron-etiqueta { font-family: var(--il-cond); font-weight: 700; font-size: 13px; letter-spacing: .16em; cursor: default; }
.cron-chip.anio::before,
.cron-etiqueta::before {
    content: "/"; color: var(--il-red); font-family: var(--il-display); font-size: 17px;
}
.cron-chip.anio:hover { border-color: var(--il-red); }
.cron-chip.anio.activo {
    background: var(--il-grad-red); border-color: #6E0000; border-top-color: #FF7A6A;
    box-shadow: 0 1px 0 rgba(255,255,255,.3) inset;
}
.cron-chip.anio.activo::before { color: #fff; }

/* --- chips de evento y de historia --- */
.cron-chip {
    background: var(--il-grad-steel); border: 1px solid var(--il-line-hi);
    border-radius: var(--il-radius); color: var(--il-text-body); cursor: pointer;
    font-family: var(--il-cond); font-weight: 700; font-size: 12px;
    letter-spacing: .12em; text-transform: uppercase; padding: 9px 15px;
    white-space: nowrap;
    transition: color var(--il-t-fast), border-color var(--il-t-fast);
}
.cron-chip:hover { color: #fff; border-color: var(--il-line-hi); }
.cron-chip.activo {
    background: var(--il-grad-red); border-color: #6E0000; border-top-color: #FF7A6A;
    color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    box-shadow: 0 1px 0 rgba(255,255,255,.3) inset;
}
/* las historias llevan un cuadradito dorado en vez del emoji */
.cron-chip.es-historia,
.cron-tag.es-historia { display: inline-flex; align-items: center; gap: 9px; }
.cron-chip.es-historia::before,
.cron-tag.es-historia::before {
    content: ""; width: 7px; height: 7px; flex: 0 0 auto;
    background: var(--il-gold); box-shadow: 0 0 6px rgba(232,196,106,.7);
}
.cron-chip.es-historia.activo::before { background: #fff; box-shadow: none; }

/* --- orden --- */
.cron-orden {
    display: flex; align-items: center; gap: var(--il-lg); flex-wrap: wrap;
    margin: 0 0 var(--il-lg);
}
.cron-orden__label {
    font-family: var(--il-cond); font-weight: 700; font-size: 11px;
    letter-spacing: .24em; text-transform: uppercase; color: var(--il-text-mute);
}
.cron-orden .il-segmented { margin-top: 0; }
.il-seg.activo {
    color: #fff; background: var(--il-grad-red);
    border-color: #6E0000; border-top-color: #FF7A6A;
    text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    box-shadow: 0 1px 0 rgba(255,255,255,.3) inset;
}

/* =========================================================================
   LINEA DE TIEMPO: riel rojo a la izquierda con un rombo por momento
   ========================================================================= */
.cron-linea .il-panel__body { padding: var(--il-xl) var(--il-lg); }

.feed-container {
    position: relative;
    display: flex; flex-direction: column; align-items: stretch;
    gap: var(--il-2xl); padding: 0 0 0 38px; width: 100%;
}
.feed-container::before {
    content: ""; position: absolute; left: 8px; top: 4px; bottom: 0; width: 2px;
    background: linear-gradient(180deg, var(--il-red) 0%, rgba(254,0,0,.55) 55%, rgba(254,0,0,.08) 100%);
}
.cron-item {
    position: relative; width: 100%;
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--il-md);
}
.cron-item::before {
    content: ""; position: absolute; left: -37px; top: 5px;
    width: 13px; height: 13px; background: var(--il-red);
    transform: rotate(45deg);
    box-shadow: 0 0 0 3px var(--il-panel-2), 0 0 12px rgba(254,0,0,.6);
}

.cron-tags { display: flex; gap: var(--il-sm); flex-wrap: wrap; justify-content: flex-start; }
.cron-tag {
    background: var(--il-panel-2); border: 1px solid var(--il-line); cursor: pointer;
    border-radius: var(--il-radius); color: var(--il-text-body);
    font-family: var(--il-cond); font-weight: 700; font-size: 11px;
    letter-spacing: .16em; text-transform: uppercase; padding: 6px 12px;
    transition: color var(--il-t-fast), border-color var(--il-t-fast);
}
.cron-tag:hover { border-color: var(--il-red); color: #fff; }
.cron-tag.anio { color: #FFFFFF; border-color: var(--il-red); }

/* --- marcador de capitulo de novela --- */
.cron-capitulo {
    background: var(--il-grad-red); border: 1px solid #6E0000; border-top-color: #FF7A6A;
    border-radius: var(--il-radius); color: #fff; cursor: pointer;
    font-family: var(--il-cond); font-weight: 700; font-size: 12px;
    letter-spacing: .18em; text-transform: uppercase; padding: 9px 18px;
    text-align: left; text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
.cron-capitulo span { font-weight: 500; opacity: .8; letter-spacing: .1em; }

/* --- el reproductor y su numero --- */
.cron-video {
    position: relative; width: 100%; overflow: hidden;
    border: 1px solid var(--il-line-hi); border-radius: var(--il-radius);
    background: #000; box-shadow: var(--il-shadow-panel);
}
.cron-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; display: block; }
.cron-numero {
    position: absolute; bottom: 8px; right: 8px; z-index: 5; pointer-events: none;
    background: rgba(11,10,10,.8); border: 1px solid var(--il-line-hi);
    color: var(--il-text-body); font-family: var(--il-mono); font-size: 11px;
    padding: 3px 8px; border-radius: 2px;
}

/* --- tarjeta de "ver el evento completo" al cierre de cada bloque --- */
.cron-evento-card {
    width: 100%; max-width: 420px; display: flex; flex-direction: column;
    align-items: flex-start; gap: var(--il-md);
    text-decoration: none; color: inherit; position: relative;
}
.cron-evento-card::before {
    content: ""; position: absolute; left: -37px; top: 5px;
    width: 13px; height: 13px; background: var(--il-gold);
    transform: rotate(45deg);
    box-shadow: 0 0 0 3px var(--il-panel-2), 0 0 12px rgba(232,196,106,.6);
}
.cron-evento-img {
    width: 100%; overflow: hidden;
    border: 1px solid var(--il-line-hi); border-radius: var(--il-radius);
    box-shadow: var(--il-shadow-panel); transition: border-color var(--il-t-med), transform var(--il-t-med);
}
.cron-evento-card:hover .cron-evento-img { border-color: var(--il-red); transform: translateY(-3px); }
.cron-evento-img img { width: 100%; display: block; }
.cron-evento-info { text-align: left; }
.cron-evento-cta {
    display: inline-block; background: var(--il-grad-red); color: #fff;
    border-radius: var(--il-radius); margin-bottom: var(--il-sm);
    font-family: var(--il-cond); font-weight: 700; font-size: 11px;
    letter-spacing: .18em; text-transform: uppercase; padding: 6px 15px;
}
.cron-evento-info h3 {
    font-family: var(--il-cond); font-weight: 700; font-size: 20px;
    letter-spacing: .05em; text-transform: uppercase; color: #fff; margin: 0 0 4px;
}
.cron-evento-info span { font-family: var(--il-mono); font-size: 12px; color: var(--il-text-mute); }

/* --- pie del feed --- */
.cron-ver-mas-wrap { display: flex; justify-content: center; margin-top: var(--il-2xl); }
.cron-ver-mas {
    background: var(--il-grad-red); border: 1px solid #6E0000; border-top-color: #FF7A6A;
    border-radius: var(--il-radius); color: #fff; cursor: pointer;
    font-family: var(--il-cond); font-weight: 700; font-size: 13px;
    letter-spacing: .16em; text-transform: uppercase; padding: 13px 30px;
    text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
.cron-ver-mas:hover { background: var(--il-red); }
.cron-resultado, .cron-vacio {
    text-align: center; font-family: var(--il-mono); font-size: 12px;
    color: var(--il-text-mute); margin: var(--il-lg) 0 0;
}
.cron-vacio { padding: var(--il-2xl) var(--il-lg); }

@media (max-width: 640px) {
    .cron-linea .il-panel__body { padding: var(--il-lg) var(--il-md); }
    .feed-container { padding-left: 26px; gap: var(--il-xl); }
    .feed-container::before { left: 4px; }
    .cron-item::before,
    .cron-evento-card::before { left: -27px; width: 11px; height: 11px; }
    .cron-anio-grupo { gap: var(--il-sm); }
    .cron-chip { font-size: 11px; padding: 7px 12px; }
    .cron-orden { gap: var(--il-sm); }
    .il-segmented { flex-wrap: wrap; }
}

/* =========================================================================
   PERFIL DE LUCHADOR (old school)
   ========================================================================= */
/* el record va dentro del cabezal de pagina, en fichitas que cortan bien de linea */
.il-pagehead .wrestler-meta {
    justify-content: flex-start; gap: var(--il-sm); margin-top: var(--il-lg);
    font-family: var(--il-cond); font-weight: 600; font-size: 12px;
    letter-spacing: .14em; color: var(--il-text-mute); row-gap: var(--il-sm);
}
.il-pagehead .wrestler-meta span.stat-group {
    background: var(--il-grad-steel); border: 1px solid var(--il-line-hi);
    border-radius: var(--il-radius); padding: 8px 14px;
}
.il-pagehead .wrestler-meta span.stat-group:not(:first-child)::before { content: none; }
.il-pagehead .wrestler-meta span { color: #FFFFFF; margin: 0 0 0 6px; }
.il-pagehead .wrestler-meta span.stat-group { color: var(--il-text-mute); margin: 0; }

.profile-layout { align-items: start; gap: var(--il-xl); margin-bottom: var(--il-2xl); }

.info-box {
    padding: 0; border-top: 0; overflow: hidden;
    background: var(--il-grad-panel); border: 1px solid var(--il-line);
    border-radius: var(--il-radius); box-shadow: var(--il-shadow-panel);
}
.info-box h3 {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--il-cond); font-weight: 700; font-size: 15px;
    letter-spacing: .16em; color: #FFFFFF; transform: none; text-shadow: none;
    background: var(--il-grad-steel); border-bottom: 1px solid var(--il-line-hi);
    margin: 0; padding: 13px var(--il-lg);
}
.info-box h3::before { content: ""; width: 4px; height: 17px; background: var(--il-red); display: block; }
.info-box .info-item {
    margin: 0; padding: 12px var(--il-lg);
    border-bottom: 1px solid var(--il-line);
}
.info-box .info-item:last-of-type { border-bottom: 0; }
.info-item span.label {
    font-family: var(--il-cond); font-weight: 600; font-size: 10px;
    letter-spacing: .2em; text-transform: uppercase; color: var(--il-text-mute);
    margin-bottom: 4px;
}
.info-item span.value {
    font-family: var(--il-cond); font-weight: 700; font-size: 17px;
    letter-spacing: .04em; font-style: normal; color: #FFFFFF;
}
/* lo que va suelto adentro de la caja (reproductor de audio, etc.) */
.info-box > *:not(h3):not(.info-item) { margin: var(--il-lg); }

.history-title {
    display: flex; align-items: center; gap: var(--il-lg);
    font-family: var(--il-display); font-size: clamp(26px, 4vw, 42px); line-height: 1;
    text-transform: uppercase; color: #FFFFFF;
    border-left: 0; padding: 0; margin: var(--il-2xl) 0 var(--il-lg);
    transform: var(--il-skew); transform-origin: left;
    text-shadow: 2px 2px 0 #000;
}
.history-title::after {
    content: ""; flex: 1 1 auto; height: 2px;
    background: linear-gradient(90deg, var(--il-red), rgba(254,0,0,0));
    transform: skewX(7deg);
}

.matches-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: var(--il-lg); }
.match-card { max-width: none; border-bottom-width: 1px; text-align: left; }
.match-card img { border-bottom: 0; }
.match-card .card-content { padding: 14px 14px 18px; border-top: 1px solid var(--il-line); }
.match-card h3 {
    font-family: var(--il-cond); font-weight: 700; font-size: 17px; line-height: 1.15;
    letter-spacing: .04em; text-transform: uppercase; color: #FFFFFF; margin: 0 0 6px;
}
.match-card p {
    font-family: var(--il-mono); font-size: 11px; font-weight: 400;
    letter-spacing: .04em; text-transform: none; color: var(--il-text-mute); margin: 0;
}
.match-card span { font-family: var(--il-mono); font-size: 11px; color: var(--il-text-mute); }
.match-card span.resultado {
    border-radius: 2px; font-family: var(--il-cond); font-weight: 700;
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    padding: 5px 12px;
}

@media (max-width: 560px) {
    .matches-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--il-md); }
    .match-card h3 { font-size: 14px; }
    .match-card .card-content { padding: 11px 11px 14px; }
    .history-title, .il-pagehead__titulo { transform: none; }
    .history-title::after { transform: none; }
}

/* =========================================================================
   PAGINA DE UNA LUCHA: video + galeria
   ========================================================================= */
.il-wrap > .video-container {
    margin: var(--il-lg) 0 var(--il-2xl);
    border: 1px solid var(--il-line-hi); border-radius: var(--il-radius);
    box-shadow: var(--il-shadow-panel); overflow: hidden;
}
.gallery-title {
    display: flex; align-items: center; gap: var(--il-lg);
    font-family: var(--il-display); font-size: clamp(22px, 3.4vw, 34px); line-height: 1;
    text-transform: uppercase; color: #FFFFFF;
    border-bottom: 0; padding: 0; margin: var(--il-2xl) 0 var(--il-lg);
    transform: var(--il-skew); transform-origin: left;
    text-shadow: 2px 2px 0 #000;
}
.gallery-title::after {
    content: ""; flex: 1 1 auto; height: 2px;
    background: linear-gradient(90deg, var(--il-red), rgba(254,0,0,0));
    transform: skewX(7deg);
}
.carousel img {
    border: 1px solid var(--il-line); border-radius: var(--il-radius);
}
.carousel img:hover { border-color: var(--il-red); }
.carousel::-webkit-scrollbar-track { background: var(--il-panel-2); }
.carousel::-webkit-scrollbar-thumb { background-color: var(--il-red); border-radius: 2px; }

@media (max-width: 560px) {
    .gallery-title { transform: none; }
    .gallery-title::after { transform: none; }
}

/* =========================================================================
   PIE DE PAGINA OLD SCHOOL
   ========================================================================= */
footer {
    position: relative;
    border-top: 0;
    padding-top: var(--il-2xl);
}
footer::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
    background: var(--il-danger);
    border-top: 1px solid #000; border-bottom: 1px solid #000;
}
.footer-section h4 {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--il-cond); font-weight: 700; font-size: 12px;
    letter-spacing: .24em; text-transform: uppercase; color: var(--il-text-mute);
    margin-bottom: var(--il-lg);
}
.footer-section h4::before { content: ""; width: 22px; height: 2px; background: var(--il-red); display: block; }
.footer-section p,
.footer-section a {
    font-family: var(--il-cond); font-weight: 600; font-size: 15px;
    letter-spacing: .04em; color: var(--il-text-body);
}
.footer-section a:hover { color: var(--il-red); text-decoration: none; }
.footer-bottom {
    border-top: 1px solid var(--il-line);
    font-family: var(--il-mono); font-size: 11px;
    letter-spacing: .06em; color: var(--il-text-mute);
}

/* el marcador de capitulo lleva el mismo cuadradito que las historias */
.cron-capitulo { display: inline-flex; align-items: center; gap: 10px; }
.cron-capitulo::before {
    content: ""; width: 7px; height: 7px; flex: 0 0 auto;
    background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.6);
}

/* =========================================================================
   ENTRADAS: plano del salon + panel de reserva
   ========================================================================= */
/* el boton flotante se esconde solo en la propia pagina de entradas:
   en el resto del sitio tiene que verse */
.pagina-entradas .cta-entradas { display: none; }

/* --- chip con el evento, en el cabezal --- */
.il-chip-evento {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--il-grad-steel); border: 1px solid var(--il-line-hi);
    border-radius: var(--il-radius); padding: 7px 13px;
    font-family: var(--il-cond); font-weight: 700; font-size: 11px;
    letter-spacing: .22em; text-transform: uppercase; color: var(--il-text);
    box-shadow: var(--il-inset-hi);
}
.il-chip-evento::before {
    content: ""; width: 8px; height: 8px; flex: 0 0 auto;
    background: var(--il-red); box-shadow: 0 0 10px var(--il-red);
}
.il-chip-evento b { color: #fff; font-weight: 700; }

/* --- referencias de color --- */
.il-leyenda {
    display: flex; flex-wrap: wrap; gap: var(--il-lg); align-items: center;
    margin-top: var(--il-lg); padding-top: var(--il-lg);
    border-top: 1px solid var(--il-line);
}
.il-leyenda span {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--il-cond); font-weight: 700; font-size: 12px;
    letter-spacing: .2em; text-transform: uppercase; color: var(--il-text-mute);
}
.il-ref { width: 16px; height: 16px; border-radius: 2px; display: block; flex: 0 0 auto; }
.il-ref--libre   { background: linear-gradient(180deg, #FFFFFF, #D9D6D4); border: 1px solid var(--il-text-mute); }
.il-ref--tuya    { background: var(--il-grad-red); border: 1px solid #6E0000; }
.il-ref--vendida { background: #2A2627; border: 1px solid var(--il-line-hi); }
.il-ref--pie     { background: repeating-linear-gradient(-45deg, #C10000 0 4px, #3A1010 4px 8px); border: 1px solid #6E0000; }

/* --- dos columnas: plano y reserva --- */
.il-entradas {
    display: flex; flex-wrap: wrap; gap: var(--il-xl);
    align-items: flex-start; padding-bottom: var(--il-2xl);
}
.il-plano-panel { flex: 1 1 620px; min-width: 0; }
.il-reserva { flex: 1 1 330px; max-width: 400px; min-width: 0; position: sticky; top: 96px; }

/* =========================================================================
   PLANO
   ========================================================================= */
.plano-scroll { overflow-x: auto; }
.mapa { width: max-content; min-width: 100%; margin: 0 auto; }

.mapa-refs { display: flex; gap: var(--il-sm); }
.mapa-refs.top { margin-bottom: var(--il-md); }
.mapa-refs.bottom { margin-top: var(--il-md); }
.ref-lugar {
    padding: 8px 12px; border: 1px dashed #4A4443; border-radius: 2px;
    font-family: var(--il-cond); font-weight: 700; font-size: 10px;
    letter-spacing: .18em; text-transform: uppercase; color: var(--il-text-mute);
    white-space: nowrap;
}

/* --- zonas generales: barra rayada que se llena segun lo vendido --- */
.gen-zona {
    position: relative; overflow: hidden; cursor: pointer; user-select: none;
    background: repeating-linear-gradient(-45deg, rgba(193,0,0,.55) 0 10px, rgba(26,23,24,.9) 10px 20px);
    border: 1px solid #6E0000; border-radius: 2px;
    transition: box-shadow var(--il-t-fast);
}
.gen-zona:hover { box-shadow: 0 0 16px rgba(254,0,0,.45); }
.gen-zona .gz-relleno {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
    background: rgba(254,0,0,.42); transition: width .5s;
}
.gen-zona .gz-txt {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 10px; text-align: center;
    font-family: var(--il-cond); font-weight: 700; font-size: 12px;
    letter-spacing: .2em; text-transform: uppercase; color: #FFFFFF;
    text-shadow: 0 1px 0 #000;
}
.gen-zona .gz-sel { color: var(--il-gold); }
.gen-zona.agotada { cursor: not-allowed; border-color: var(--il-line-hi); background: #201D1E; }
.gen-zona.agotada .gz-relleno { background: rgba(255,255,255,.06); }

/* --- grilla del plano: sillas | ring | sillas --- */
.plano { display: grid; grid-template-columns: auto 1fr auto; gap: var(--il-lg); align-items: stretch; --silla: 34px; }
.plano-col { display: flex; flex-direction: column; gap: var(--il-lg); min-height: 0; }
.plano-centro { display: flex; flex-direction: column; gap: var(--il-md); min-width: 0; }

.ring {
    position: relative; flex: 1 1 auto; min-height: 300px;
    display: grid; place-items: center;
    border: 2px solid var(--il-red); border-radius: 2px;
    background: linear-gradient(180deg, #221E1F, #141213);
    box-shadow: 0 0 0 4px var(--il-black), 0 0 0 5px #9E0000, 0 0 34px rgba(254,0,0,.22) inset;
    font-family: var(--il-display); font-size: clamp(24px, 3.6vw, 42px);
    letter-spacing: .12em; text-transform: uppercase; color: #FFFFFF; font-weight: 400;
    text-shadow: 2px 2px 0 #000, 0 0 22px rgba(254,0,0,.6);
}
.ring::before, .ring::after {
    content: ""; position: absolute; pointer-events: none;
}
.ring::before { inset: 14px; border: 1px solid rgba(254,0,0,.5); }
.ring::after  { inset: 26px; border: 1px solid rgba(254,0,0,.3); }

.plano-col > div { flex: 1 1 auto; display: flex; flex-direction: column; }
.bloque-nombre {
    font-family: var(--il-cond); font-weight: 700; font-size: 10px;
    letter-spacing: .2em; text-transform: uppercase; color: var(--il-gold-dim);
    margin-bottom: 7px; text-align: left;
}
.sillas-grid { flex: 1 1 auto; display: grid; gap: 5px; grid-auto-rows: minmax(var(--silla), 1fr); }

.silla {
    width: var(--silla); min-height: var(--silla);
    background: linear-gradient(180deg, #FFFFFF, #D9D6D4);
    border: 1px solid var(--il-text-mute); border-radius: 2px;
    font-family: var(--il-cond); font-weight: 700; font-size: 13px;
    color: #1A1718; cursor: pointer;
    transition: filter var(--il-t-fast), transform var(--il-t-fast);
}
.silla:hover { filter: brightness(1.08); transform: translateY(-1px); }
.silla.sel {
    background: var(--il-grad-red); color: #FFFFFF;
    border-color: #6E0000; border-top-color: #FF7A6A;
    box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 2px 0 #5C0000;
}
.silla.vendida {
    background: #2A2627; border-color: var(--il-line-hi);
    color: #5C5756; cursor: not-allowed;
}
.silla.vendida:hover { filter: none; transform: none; }

.entrada-luch {
    align-self: stretch; margin-top: 10px; padding: 8px 6px; text-align: center;
    background: linear-gradient(180deg, rgba(232,196,106,.16), rgba(232,196,106,.04));
    border: 1px solid var(--il-gold-dim); border-radius: 2px;
    font-family: var(--il-cond); font-weight: 700; font-size: 10px;
    letter-spacing: .18em; text-transform: uppercase; color: #FFF3D6; white-space: nowrap;
}

/* =========================================================================
   PANEL DE RESERVA
   ========================================================================= */
.il-precio {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--il-md); padding: var(--il-md) 0;
    border-top: 1px solid var(--il-line);
}
.il-precio:first-child { border-top: 0; padding-top: 0; }
.il-precio__que {
    font-family: var(--il-cond); font-weight: 700; font-size: 15px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--il-text);
    max-width: 12ch;
}
.il-precio__val { text-align: right; }
.il-precio__val b { display: block; font-family: var(--il-display); font-size: 26px; font-weight: 400; color: #FFFFFF; }
.il-precio__val small {
    display: block; font-family: var(--il-cond); font-weight: 700;
    font-size: 11px; letter-spacing: .2em; color: var(--il-text-mute);
}

.il-reserva__bloque { margin-top: var(--il-sm); padding-top: var(--il-lg); border-top: 1px solid var(--il-line); }
.il-reserva__label {
    display: block; margin-bottom: 10px;
    font-family: var(--il-cond); font-weight: 700; font-size: 11px;
    letter-spacing: .22em; text-transform: uppercase; color: var(--il-text-mute);
}

.il-chips-sillas { display: flex; flex-wrap: wrap; gap: var(--il-sm); min-height: 38px; align-items: flex-start; }
.il-chip-silla {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 9px 12px; border: 1px solid #6E0000; border-top-color: #FF7A6A;
    border-radius: 2px; background: var(--il-grad-red); color: #FFFFFF;
    font-family: var(--il-cond); font-weight: 700; font-size: 14px; letter-spacing: .1em;
    box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 2px 0 #5C0000;
}
.il-chip-silla:hover { filter: brightness(1.12); }
.il-chip-silla span { opacity: .8; font-size: 12px; }
.il-sin-sillas { font-size: 14px; color: #6E6968; padding: 10px 0; }

.il-contador { display: flex; align-items: stretch; gap: var(--il-sm); }
.il-contador button {
    flex: 0 0 54px; cursor: pointer;
    background: var(--il-grad-steel); border: 1px solid var(--il-line-hi);
    border-radius: var(--il-radius); color: #FFFFFF;
    font-family: var(--il-display); font-size: 24px; line-height: 1;
    box-shadow: var(--il-inset-hi);
    transition: border-color var(--il-t-fast), color var(--il-t-fast);
}
.il-contador button:hover { border-color: var(--il-red); color: var(--il-red); }
.il-contador button:active { transform: translateY(1px); }
.il-contador__num {
    flex: 1 1 auto; display: grid; place-items: center;
    background: var(--il-panel-2); border: 1px solid var(--il-line-hi);
    border-radius: var(--il-radius); padding: 14px 0;
    font-family: var(--il-display); font-size: 30px; color: #FFFFFF;
}

.il-total {
    display: flex; flex-direction: column; align-items: flex-end;
    margin-top: var(--il-lg); padding-top: var(--il-lg);
    border-top: 2px solid var(--il-red);
}
.il-total__num {
    font-family: var(--il-display); font-size: clamp(38px, 7vw, 52px); line-height: 1;
    color: #FFFFFF; text-shadow: 2px 2px 0 #000;
}
.il-total__pie { display: flex; justify-content: space-between; align-items: baseline; gap: var(--il-md); width: 100%; margin-top: 6px; }
.il-total__label {
    font-family: var(--il-cond); font-weight: 700; font-size: 12px;
    letter-spacing: .24em; text-transform: uppercase; color: var(--il-text-mute);
}
.il-total__detalle { font-family: var(--il-mono); font-size: 11px; color: var(--il-text-mute); text-align: right; }

.il-btn-reservar {
    display: block; width: 100%; margin-top: var(--il-lg); cursor: pointer;
    background: var(--il-grad-red); color: #FFFFFF;
    border: 1px solid #6E0000; border-top-color: #FF7A6A; border-radius: var(--il-radius);
    font-family: var(--il-cond); font-weight: 700; font-size: 17px;
    letter-spacing: .18em; text-transform: uppercase; padding: 17px 20px;
    text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 4px 0 var(--il-red-shadow), 0 10px 18px rgba(0,0,0,.5);
    transition: filter var(--il-t-fast);
}
.il-btn-reservar:hover:not(:disabled) { filter: brightness(1.1); }
.il-btn-reservar:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset; }
.il-btn-reservar:disabled {
    background: var(--il-grad-steel); border-color: var(--il-line-hi);
    color: #5C5756; cursor: not-allowed; box-shadow: var(--il-inset-hi);
}
.il-reserva__nota {
    margin: var(--il-md) 0 0; text-align: center;
    font-size: 13px; line-height: 1.5; color: var(--il-text-mute);
}

/* --- venta cerrada / generales agotadas --- */
.venta-cerrada {
    background: var(--il-grad-panel); border: 1px solid var(--il-line);
    border-left: 4px solid var(--il-red); border-radius: var(--il-radius);
    padding: var(--il-xl); margin: var(--il-lg) 0; text-align: center;
    font-size: 16px; line-height: 1.6; color: var(--il-text-body);
}
.venta-cerrada b { color: #fff; }
.venta-cerrada a { color: var(--il-red); font-weight: 700; text-decoration: underline; }
#gen-agotado { margin: 0 0 var(--il-lg); padding: var(--il-md) var(--il-lg); font-size: 14px; }

/* --- barra flotante: solo en celular --- */
.barra-reserva { display: none; }
.barra-reserva .detalle {
    font-family: var(--il-cond); font-weight: 700; font-size: 14px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--il-text);
}
.barra-reserva .detalle b { color: var(--il-gold); }
.btn-wsp {
    cursor: pointer; background: var(--il-grad-red); color: #fff;
    border: 1px solid #6E0000; border-top-color: #FF7A6A; border-radius: var(--il-radius);
    font-family: var(--il-cond); font-weight: 700; font-size: 14px;
    letter-spacing: .16em; text-transform: uppercase; padding: 13px 22px;
    text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    box-shadow: 0 1px 0 rgba(255,255,255,.3) inset;
}

@media (max-width: 900px) {
    .il-reserva { position: static; max-width: none; }
    .barra-reserva {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        display: none; align-items: center; justify-content: space-between;
        gap: var(--il-md); flex-wrap: wrap; padding: 12px 16px;
        background: linear-gradient(180deg, #1A1718, #0E0D0D);
        border-top: 2px solid var(--il-red);
        box-shadow: 0 -8px 20px rgba(0,0,0,.6);
    }
    .barra-reserva.show { display: flex; }
}
@media (max-width: 620px) {
    .plano { gap: var(--il-md); --silla: 26px; }
    .plano-col { gap: var(--il-md); }
    .silla { font-size: 11px; }
    .ring { min-height: 190px; font-size: 22px; }
    .ring::before { inset: 8px; }
    .ring::after { inset: 16px; }
    .gen-zona .gz-txt { padding: 10px 8px; font-size: 10px; letter-spacing: .12em; }
    .ref-lugar { font-size: 9px; padding: 6px 9px; letter-spacing: .12em; }
    .entrada-luch { font-size: 9px; letter-spacing: .1em; }
    .il-leyenda { gap: var(--il-md); }
}

/* la aclaracion de como se confirma la compra: chica, para el que la busca */
.il-letra-chica {
    margin: var(--il-sm) 0 0; text-align: center;
    font-size: 10.5px; line-height: 1.5; color: #5C5756;
}

/* --- aviso al pie del panel de compra --- */
.il-aviso-compra {
    margin: var(--il-md) 0 0;
    padding: 11px 14px;
    background: rgba(254,0,0,.06); border-left: 2px solid var(--il-red);
    border-radius: 0 var(--il-radius) var(--il-radius) 0;
    font-size: 11.5px; line-height: 1.55; color: var(--il-text-mute);
}
.il-aviso-compra b {
    color: var(--il-red); font-family: var(--il-cond); font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
}

/* la nota del historial de Mathias (el presentador estuvo en todas) */
.mathias-nota {
    margin: calc(var(--il-lg) * -1) 0 var(--il-lg);
    font-family: var(--il-mono); font-size: 12px;
    letter-spacing: .04em; color: var(--il-text-mute);
}