/* ===================================================
   MUNDIAL 2026 — LANDING PAGE
   Horarios Guatemala · Dark Theme · Feat Agency
   =================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

   /* ---- RESET & BASE ---- */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   
   :root {
       --bg:          #0a0d14;
       --bg-card:     #111520;
       --bg-card-2:   #161b28;
       --border:      rgba(255,255,255,0.07);
       --border-glow: rgba(0,200,120,0.3);
       --green:       #00c87a;
       --green-dim:   #00874f;
       --gold:        #f4b942;
       --red:         #e84545;
       --text:        #e8eaf0;
       --text-muted:  #6b7280;
       --text-dim:    #9ca3af;
       --font-display: 'Bebas Neue', cursive;
       --font-body:    'DM Sans', sans-serif;
       --radius:       12px;
       --radius-sm:    8px;
       --shadow-card:  0 4px 24px rgba(0,0,0,0.5);
       --shadow-glow:  0 0 24px rgba(0,200,122,0.12);
   }
   
   html { scroll-behavior: smooth; }
   
   body {
       font-family: var(--font-body);
       background: var(--bg);
       color: var(--text);
       min-height: 100vh;
       overflow-x: hidden;
   }
   
   .container {
       max-width: 1280px;
       margin: 0 auto;
       padding: 0 20px;
   }
   
   /* ---- HERO ---- */
   .hero {
       position: relative;
       overflow: hidden;
       background: linear-gradient(135deg, #040810 0%, #0d1525 40%, #091220 100%);
       text-align: center;
       border-bottom: 1px solid var(--border);
   }
   .hero__content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: row;
        height: 140px;
        align-items: center;
        justify-content: left;
        padding: 20px;
    }
    .logoHeader {
        width: 60px;
        height: 60px;
        margin: 0 40px 0 0;
    }
    .logoHeader img{
        width: 100%;
    }
    .hero__content .title {
        font-family: var(--font-body);
    }
    .banner-item {
        width: 80%;
        padding: 10px 50px;
        margin: auto;
    }
    .banner-item img{
        width: 100%;
    }
    .banner-item-ad {
        position: relative;  /* ya lo tienes, está bien */
        width: 100%;
    }
    
    .banner-ad-img {
        width: 80%;
        padding: 10px 50px;
        margin: auto;
        display: block;
    }
    
    .banner-ad-img img {
        width: 100%;
        display: block;
    }
    
    .banner-botones {
        position: absolute;
        bottom: 2%;        /* % relativo a banner-item-ad, se adapta solo */
        left: 50%;
        transform: translateX(-50%);
        width: 55%;        /* ajusta según qué tan ancho quieras los botones sobre la imagen */
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 4%;
        margin: 0;
        top: auto;
        right: auto;
    }
    
    .banner-botones img {
        width: 46%;
        border-radius: 20px;
    }
    
    /* ya no necesitas .banner-bottonesContent como capa extra */
    .banner-botones .banner-bottonesContent {
        position: static;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 8%;
    }
   .hero__noise {
       position: absolute; inset: 0;
       background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
       pointer-events: none;
       opacity: 0.4;
   }
   
   .hero__grid-lines {
       position: absolute; inset: 0;
       background-image:
           linear-gradient(rgba(0,200,122,0.04) 1px, transparent 1px),
           linear-gradient(90deg, rgba(0,200,122,0.04) 1px, transparent 1px);
       background-size: 60px 60px;
       pointer-events: none;
   }
   
   .hero__content {
       position: relative;
       z-index: 1;
   }
   
   .hero__badge {
       display: inline-block;
       font-family: var(--font-body);
       font-size: 11px;
       font-weight: 600;
       letter-spacing: 3px;
       text-transform: uppercase;
       color: var(--green);
       border: 1px solid var(--green-dim);
       padding: 5px 14px;
       border-radius: 99px;
       margin-bottom: 20px;
       background: rgba(0,200,122,0.06);
   }
   
   .hero__title {
       font-family: var(--font-display);
       line-height: 0.85;
       margin-bottom: 16px;
   }
   
   .hero__title-main {
       display: block;
       font-size: clamp(72px, 14vw, 160px);
       color: var(--text);
       letter-spacing: -2px;
   }
   
   .hero__title-year {
       display: block;
       font-size: clamp(88px, 18vw, 200px);
       background: linear-gradient(135deg, var(--green) 0%, #00e48b 50%, var(--gold) 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       letter-spacing: -4px;
       margin-top: -10px;
   }
   
   .hero__subtitle {
       font-size: 16px;
       color: var(--text-dim);
       margin-bottom: 12px;
       letter-spacing: 0.5px;
   }
   
   .hero__meta {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 10px;
       font-size: 14px;
       color: var(--text-muted);
       margin-bottom: 8px;
       flex-wrap: wrap;
   }
   
   .hero__meta .dot { color: var(--green-dim); }
   
   .hero__dates {
       font-size: 12px;
       color: var(--text-muted);
       letter-spacing: 1px;
       text-transform: uppercase;
   }
   
   .hero__ball {
       position: absolute;
       right: -60px;
       bottom: -60px;
       font-size: 260px;
       opacity: 0.04;
       pointer-events: none;
       line-height: 1;
       transform: rotate(-15deg);
   }
   
   /* ---- CANALES ---- */
   .canales {
       background: var(--bg-card);
       border-bottom: 1px solid var(--border);
       padding: 24px 20px;
       text-align: center;
   }
   
   .canales__label {
       font-size: 11px;
       letter-spacing: 2px;
       text-transform: uppercase;
       color: var(--text-muted);
       margin-bottom: 16px;
   }
   
   .canales__logos {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 20px;
       flex-wrap: wrap;
   }
   
   .canal-item {
       display: flex;
       align-items: center;
   }
   
   .canal-logo {
       height: 40px;
       width: auto;
       object-fit: contain;
       filter: brightness(1.1);
   }
   
   .canal-logo--tigo { max-width: 120px; }
   .canal-logo--azteca { max-width: 130px; }
   
   .canal-placeholder {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       background: rgba(255,255,255,0.04);
       border: 1px dashed rgba(255,255,255,0.15);
       border-radius: var(--radius-sm);
       padding: 8px 20px;
       min-width: 130px;
       height: 40px;
       gap: 2px;
   }
   
   .canal-placeholder span {
       font-size: 11px;
       font-weight: 600;
       color: var(--text-dim);
   }
   
   .canal-placeholder small {
       font-size: 9px;
       color: var(--text-muted);
       letter-spacing: 0.5px;
   }
   
   .canal-divider {
       font-size: 20px;
       color: var(--text-muted);
       font-weight: 300;
   }
   
   /* ---- GRUPOS NAV ---- */
   .grupos-nav {
       position: sticky;
       top: 0;
       z-index: 100;
       background: rgba(10, 13, 20, 0.95);
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
       border-bottom: 1px solid var(--border);
       padding: 12px 0;
   }
   
   .grupos-nav__pills {
       display: flex;
       gap: 6px;
       overflow-x: auto;
       padding: 0 20px;
       scrollbar-width: none;
       -ms-overflow-style: none;
   }
   
   .grupos-nav__pills::-webkit-scrollbar { display: none; }
   
   .grupo-pill {
       display: inline-flex;
       align-items: center;
       white-space: nowrap;
       padding: 6px 14px;
       border-radius: 99px;
       font-size: 12px;
       font-weight: 500;
       color: var(--text-muted);
       background: transparent;
       border: 1px solid var(--border);
       text-decoration: none;
       transition: all 0.2s ease;
       flex-shrink: 0;
   }
   
   .grupo-pill:hover,
   .grupo-pill.active {
       color: var(--green);
       border-color: var(--green-dim);
       background: rgba(0,200,122,0.08);
   }
   
   /* ---- FASE GRUPOS ---- */
   .fase-grupos {
       padding: 48px 0 80px;
   }
   
   .grupo-section {
       margin-bottom: 56px;
   }
   
   .grupo-header {
       display: flex;
       align-items: center;
       gap: 16px;
       margin-bottom: 20px;
       padding-bottom: 16px;
       border-bottom: 1px solid var(--border);
       flex-wrap: wrap;
   }
   
   .grupo-letra {
       font-family: var(--font-display);
       font-size: 56px;
       line-height: 1;
       color: var(--green);
       text-shadow: 0 0 30px rgba(0,200,122,0.4);
       min-width: 44px;
   }
   
   .grupo-teams-preview {
       font-size: 13px;
       color: var(--text-muted);
       display: flex;
       align-items: center;
       gap: 6px;
       flex-wrap: wrap;
   }
   
   .grupo-teams-preview .sep { color: var(--border); }
   
   /* ---- GRID DE PARTIDOS ---- */
   .partidos-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
       gap: 12px;
   }
   
   /* ---- TARJETA PARTIDO ---- */
   .partido-card {
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       overflow: hidden;
       transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
       display: flex;
       flex-direction: column;
   }
   
   .partido-card:hover {
       transform: translateY(-2px);
       border-color: rgba(0,200,122,0.25);
       box-shadow: var(--shadow-glow);
   }
   
   .partido-card--ultimo {
       border-left: 3px solid var(--gold);
   }
   
   .partido-card--ultimo .grupo-tag {
       background: rgba(244,185,66,0.12);
       color: var(--gold);
       border-color: rgba(244,185,66,0.2);
   }
   
   /* TOP ROW */
   .partido-card__top {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 10px 14px 0;
       gap: 8px;
   }
   
   .grupo-tag {
       font-size: 10px;
       font-weight: 600;
       letter-spacing: 1px;
       text-transform: uppercase;
       color: var(--green);
       background: rgba(0,200,122,0.1);
       border: 1px solid rgba(0,200,122,0.15);
       padding: 3px 8px;
       border-radius: 4px;
       white-space: nowrap;
   }
   
   .partido-fecha {
       font-size: 11px;
       color: var(--text-muted);
       font-weight: 500;
       white-space: nowrap;
   }
   
   /* MAIN ROW — equipos + hora */
   .partido-card__main {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 14px 14px 10px;
       gap: 8px;
       flex: 1;
   }
   
   .equipo {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 6px;
       width: 90px;
       flex-shrink: 0;
   }
   
   .equipo--right {
       text-align: center;
   }
   
   .bandera {
       width: 44px;
       height: 30px;
       object-fit: cover;
       border-radius: 4px;
       box-shadow: 0 2px 8px rgba(0,0,0,0.4);
       border: 1px solid rgba(255,255,255,0.08);
   }
   
   .equipo-nombre {
       font-size: 11px;
       font-weight: 600;
       color: var(--text);
       text-align: center;
       line-height: 1.2;
       max-width: 88px;
   }
   
   .partido-card__center {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 6px;
       flex: 1;
   }
   
   .vs-text {
       font-family: var(--font-display);
       font-size: 20px;
       color: var(--text-muted);
       letter-spacing: 2px;
   }
   
   .partido-hora {
       font-size: 16px;
       font-weight: 700;
       color: var(--text);
       white-space: nowrap;
       background: rgba(0,200,122,0.08);
       border: 1px solid rgba(0,200,122,0.15);
       padding: 4px 10px;
       border-radius: 6px;
       font-variant-numeric: tabular-nums;
   }
   
   /* BOTTOM ROW */
   .partido-card__bottom {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 8px 14px 12px;
       border-top: 1px solid var(--border);
       gap: 8px;
       flex-wrap: wrap;
   }
   
   .estadio {
       font-size: 11px;
       color: var(--text-muted);
       flex: 1;
       min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   
   .tv-logos {
       display: flex;
       gap: 6px;
       align-items: center;
       flex-shrink: 0;
   }
   
   .tv-logo {
       height: 22px;
       width: auto;
       object-fit: contain;
       filter: brightness(0.9) saturate(0.9);
       max-width: 70px;
       border-radius: 3px;
   }
   
   /* ---- FOOTER ---- */
   .site-footer {
       background: var(--bg-card);
       border-top: 1px solid var(--border);
       padding: 32px 20px;
       text-align: center;
   }
   
   .site-footer p {
       font-size: 13px;
       color: var(--text-muted);
       line-height: 1.8;
   }
   
   .footer-note {
       font-size: 11px !important;
       color: #444c5a !important;
   }
   
   /* ---- RESPONSIVE ---- */
   @media (max-width: 768px) {
       .hero { padding: 6px 16px 48px; }
   
       .hero__title-main { font-size: clamp(60px, 18vw, 96px); }
       .hero__title-year { font-size: clamp(72px, 22vw, 120px); }
   
       .hero__ball { font-size: 160px; right: -40px; bottom: -40px; }
   
       .partidos-grid {
           grid-template-columns: 1fr;
       }
   
       .equipo { width: 76px; }
   
       .bandera { width: 38px; height: 26px; }
   
       .equipo-nombre { font-size: 10px; max-width: 74px; }
   
       .partido-hora { font-size: 14px; }
   
       .grupo-letra { font-size: 44px; }
   
       .canal-logo { height: 32px; }

       .hero__content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: row;
        height: 140px;
        align-items: center;
        justify-content: left;
        padding: 20px;
    }
    .logoHeader {
        width: 60px;
        height: 60px;
        margin: 0 40px 0 0;
    }
    .logoHeader img{
        width: 100%;
    }
    .hero__content .title {
        font-family: var(--font-body);
    }
    .banner-item {
        width: 80%;
        padding: 10px 50px;
        margin: auto;
    }
    .banner-item img{
        width: 100%;
    }
    .banner-ad-img {
        width: 80%;
        padding: 10px 50px;
        margin: auto;
    }
    .banner-ad-img img{
        width: 100%;
    }
    .banner-item-ad {
        position: relative;
        width: 100%;
    }
    /* .banner-botones {
        position: relative;
        top: 0px;
        right: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 20%;
        justify-content: space-between;
        margin: 20px auto;
    } */
    .banner-botones img {
        width: 130px;
        border-radius: 20px;
    }
   }
   
   @media (max-width: 480px) {
       .partido-card__main { padding: 12px 10px 8px; }
       .partido-card__top { padding: 8px 10px 0; }
       .partido-card__bottom { padding: 8px 10px 10px; }
   
       .equipo { width: 68px; }
       .equipo-nombre { font-size: 9.5px; max-width: 66px; }
   
       .partido-hora { font-size: 13px; padding: 3px 8px; }
   
       .grupos-nav__pills { gap: 4px; padding: 0 12px; }
   
       .grupo-pill { font-size: 11px; padding: 5px 11px; }
   
       .canales__logos { gap: 14px; }

       .hero__content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: row;
        height: 140px;
        align-items: center;
        justify-content: left;
        padding: 20px;
    }
    .logoHeader {
        width: 60px;
        height: 60px;
        margin: 0 20px 0 0;
    }
    .logoHeader img{
        width: 100%;
    }
    .hero__content .title {
        font-family: var(--font-body);
        text-align: left;
        font-size: 12px;
    }
    .banner-item {
        width: 100%;
        padding: 0px 10px;
        margin: auto;
    }
    .banner-item img{
        width: 100%;
    }
    .banner-ad-img {
        width: 100%;
        padding: 0px 10px;
        margin: auto;
    }
    .banner-ad-img img{
        width: 100%;
    }
    .banner-item-ad {
        position: relative;
        width: 100%;
    }
    /* .banner-botones {
        position: relative;
        top: 0px;
        right: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 80%;
        justify-content: space-between;
        margin: 20px auto;
    } */
    .banner-botones img {
        width: 130px;
        border-radius: 20px;
    }
   }
   
   @media (min-width: 640px) and (max-width: 1024px) {
       .partidos-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }
   
   @media (min-width: 1280px) {
       .partidos-grid {
           grid-template-columns: repeat(3, 1fr);
       }
   }