/* ===============================
   BLESSSPORT UI - BASE SYSTEM
=============================== */

/* ===============================
   ROOT VARIABLES (SISTEMA)
=============================== */

:root{
  --bsu-bg: #f3f6fb;
  --bsu-surface: #ffffff;
  --bsu-surface-2: #f7f9fd;

  --bsu-theme: #162457;
  --bsu-accent: #f4c622;

  --bsu-text: #0f172a;
  --bsu-text-soft: #64748b;
  --bsu-text-faint: #94a3b8;

  --bsu-border: rgba(15,23,42,.08);

  --bsu-radius-sm: 14px;
  --bsu-radius-md: 22px;
  --bsu-radius-lg: 30px;

  --bsu-shadow: 0 18px 45px rgba(15,23,42,.07);
  --bsu-shadow-strong: 0 28px 70px rgba(15,23,42,.12);

  --bsu-max: 1200px;
}

/* ===============================
   BODY
=============================== */

body{
  background:var(--bsu-bg);
  color:var(--bsu-text);
  -webkit-font-smoothing:antialiased;
}

/* ===============================
   APP SHELL
=============================== */

.bsu-shell{
  color:var(--bsu-text);
  background:transparent;
  border-radius:0;
  overflow:hidden;
}

/* ===============================
   LAYOUT SYSTEM
=============================== */

.bsu-container{
  width:min(var(--bsu-max), calc(100% - 32px));
  margin:0 auto;
}

.bsu-section{
  padding:60px 0;
}

/* ===============================
   GLOBAL HEADER SYSTEM (CLAVE)
=============================== */

.bsu-section-head{
  position:relative;
  overflow:hidden;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;

  padding:56px 42px;
  border-radius:34px;
  margin-bottom:32px;

  background:
    radial-gradient(circle at top right, rgba(244,198,34,.18), transparent 30%),
    radial-gradient(circle at bottom left, rgba(59,130,246,.16), transparent 35%),
    linear-gradient(135deg, #081028, #162457 55%, #31458c);

  color:#fff;
  box-shadow:var(--bsu-shadow-strong);
}

.bsu-section-head > *{
  position:relative;
  z-index:2;
}

.bsu-section-head-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

/* KICKER */

.bsu-section-kicker{
  margin:0 0 10px;
  color:var(--bsu-accent);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* TITLE */

.bsu-section-head h2{
  margin:0 0 12px;
  font-size:clamp(3rem,6vw,5.2rem);
  line-height:.92;
  letter-spacing:-.06em;
  color:#fff;
}

/* TEXT */

.bsu-section-head p{
  max-width:760px;
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:1.05rem;
  line-height:1.7;
}

/* ACTIONS */

.bsu-section-head-actions{
  display:flex;
  gap:10px;
}

/* ===============================
   UI COMPONENTS
=============================== */

.bsu-card{
  background:var(--bsu-surface);
  border:1px solid var(--bsu-border);
  border-radius:var(--bsu-radius-lg);
  box-shadow:var(--bsu-shadow);
}

.bsu-pill,
.bsu-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:900;
}

.bsu-pill{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
}

.bsu-chip{
  background:var(--bsu-surface-2);
  color:var(--bsu-theme);
}

/* ===============================
   TYPOGRAPHY HELPERS
=============================== */

h1, h2, h3{
  letter-spacing:-.02em;
}

p{
  line-height:1.7;
}

/* ===============================
   RESPONSIVE SYSTEM
=============================== */

@media (max-width:1024px){

  .bsu-section-head{
    flex-direction:column;
    align-items:flex-start;
  }

}

@media (max-width:768px){

  .bsu-container{
    width:min(var(--bsu-max), calc(100% - 24px));
  }

  .bsu-section{
    padding:40px 0;
  }

  .bsu-section-head{
    padding:38px 26px;
    border-radius:28px;
  }

  .bsu-section-head h2{
    font-size:clamp(2.6rem,12vw,4rem);
  }

  .bsu-card{
    border-radius:22px;
    padding:20px;
  }

}
/* 🔥 HOST TEAM LIVE */
.ibco-team.ibco-home-team{
  position:relative;
  border:2px solid #22c55e;
  box-shadow:0 0 25px rgba(34,197,94,.45);
  transform:scale(1.03);
}

.ibco-team.ibco-home-team .ibco-team-name{
  color:#22c55e;
  font-weight:900;
}

.ibco-team.ibco-home-team .ibco-team-score{
  color:#22c55e;
  text-shadow:0 0 12px rgba(34,197,94,.6);
}

/* 🔥 pequeño indicador */
.ibco-team.ibco-home-team::after{
  content:"HOST";
  position:absolute;
  top:10px;
  right:10px;
  font-size:10px;
  font-weight:900;
  background:#22c55e;
  color:#fff;
  padding:4px 8px;
  border-radius:999px;
}