/* =========================================================
   ICFC — Deportiva (vFinal slider estable)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600;700;800;900&display=swap');

:root{
  --azul:#2D4281;
  --azul-prof:#22356B;
  --dorado:#FED128;
  --blanco:#fff;
  --negro:#0b152e;
  --borde-caldo:#E6D49A;
  --borde-frio:#D9DDE7;
  --muted:#6b7280;

  /* tamaño de card en móvil/tablet */
  --mcard: clamp(260px, 84vw, 360px);
  --gap: 16px;
}

/* ===== Top ===== */
.hp-topbox{ position:relative; z-index:2; background:#fff; border-bottom:1px solid #E7EAF2; padding:28px 0 8px; }
.hp-headbar{ display:flex; align-items:center; justify-content:space-between; padding-inline:min(6vw,64px); margin-bottom:6px; }
.hp-headbar h2{ margin:0; font-family:"Bebas Neue",system-ui,sans-serif; font-weight:400; font-size:clamp(32px,4vw,56px); letter-spacing:.5px; text-transform:uppercase; color:var(--azul); }
.hp-tabs{ display:flex; gap:28px; border-bottom:1px solid #E7EAF2; margin:4px 0 0; padding-inline:min(6vw,64px); }
.hp-tab{ padding:12px 2px; text-decoration:none; font-family:"Bebas Neue",system-ui,sans-serif; letter-spacing:.6px; font-size:22px; text-transform:uppercase; color:var(--azul); position:relative; }
.hp-tab.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:4px; background:var(--azul); }

/* ===== Fondo split ===== */
.hp-stage__inner{ background:linear-gradient(var(--azul) 0 55%, var(--dorado) 55% 100%); padding:40px 0 48px; }

/* ===== Slider wrapper ===== */
.hp-slider{
  position:relative;
  padding-inline:min(6vw,64px);
  overflow:visible; /* desktop */
}
@media (max-width:1280px){
  .hp-slider{ overflow:hidden; } /* el wrapper recorta en carrusel */
}

/* ===== Grid / Track ===== */
.hp-row-grid{
  display:grid; gap:clamp(18px,2.4vw,32px);
  grid-template-columns:repeat(5, minmax(240px,1fr));
  transition:opacity .24s ease, transform .25s ease;
  will-change: transform;
}

/* Desde laptop hacia abajo -> slider en UNA fila */
@media (max-width:1280px){
  .hp-row-grid{
    display:flex; gap:var(--gap);
    overflow:visible;              /* el track NO se recorta a sí mismo */
    transform:translateX(0);
  }
}

/* ===== Card ===== */
.hp-card{
  background:var(--blanco);
  border:1.5px solid var(--borde-frio);
  border-radius:0 0 36px 0;
  min-height:360px; display:flex; flex-direction:column; overflow:hidden;
}
.hp-card.is-lead{ border-color:var(--borde-caldo); }

/* En modo slider: ancho fijo de card */
@media (max-width:1280px){
  .hp-card{ flex:0 0 var(--mcard); width:var(--mcard); min-height:340px; }
}

/* Cabezal */
.hpC-head{
  display:flex; align-items:center; gap:10px;
  height:58px; padding:0 14px; border-bottom:1px solid rgba(0,0,0,.06);
  background:var(--azul); color:#fed128;
  font-family:"Bebas Neue",system-ui,sans-serif; font-weight:400;
  letter-spacing:.5px; text-transform:uppercase; font-size:21px;
}
.hp-card.is-lead .hpC-head{ background:var(--dorado); color:var(--azul-prof); }
.hpC-head-icon{ width:26px; height:26px; object-fit:contain; }
.tint-blue{filter: invert(70%) sepia(19%) saturate(1772%) hue-rotate(202deg) brightness(80%) contrast(100%);} /* ~#2D4281 */
.tint-yellow{ filter: invert(42%) sepia(147%) saturate(627%) hue-rotate(2deg) brightness(112%) contrast(97%); }

/* Cuerpo */
.hpC-body{ flex:1; padding:12px 14px 10px; color:var(--negro); display:flex; flex-direction:column; }
.hpC-date{ font-family:"Bebas Neue",system-ui,sans-serif; font-size:clamp(22px,2.2vw,28px); line-height:1; margin-bottom:8px; }
.hpC-crests{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.hpC-esc{ width:48px; height:48px; object-fit:contain; }
.hpC-teams{ font-family:"Bebas Neue",system-ui,sans-serif; font-size:clamp(40px,2.2vw,28px); line-height:1.06; text-transform:uppercase; margin-bottom:8px; }
.hpC-vs-inline{ margin:0 10px; }
.hpC-venue{ margin-top:auto; font-family:Montserrat,system-ui,sans-serif; font-size:12px; color:var(--muted); font-weight:700; }

@media (max-width:768px){
  .hpC-head{ height:52px; font-size:19px; }
  .hpC-head-icon{ width:22px; height:22px; }
  .hpC-date{ font-size:20px; }
  .hpC-teams{ font-size:20px; }
  .hpC-esc{ width:44px; height:44px; }
  .hpC-venue{ font-size:11px; }
}

/* Vacías */
.hp-card.is-empty{ display:grid; place-items:center; }
.hp-card.is-empty .hpC-body{ padding:0 14px; }
.hp-card.is-empty .hpC-empty{ font-family:"Bebas Neue",system-ui,sans-serif; font-size:22px; text-align:center; color: var(--negro); }
@media (max-width:768px){ .hp-card.is-empty .hpC-empty{ font-size:18px; } }

/* ===== Faja inferior ===== */
.hp-brandband{ background:var(--dorado); overflow:hidden; }
.hp-brandband__row{ display:flex; align-items:stretch; padding-bottom:40px; min-height:clamp(72px,12vw,120px); }
.hp-brand-icfc{ display:flex; align-items:center; font-family:"Bebas Neue",system-ui,sans-serif; color:var(--azul); font-size:clamp(92px,13vw,160px); font-weight:700; line-height:1; letter-spacing:3px; padding:0 min(6vw,64px); flex-shrink:0; }
.hp-brand-rail{ flex:1; background:var(--azul); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.hp-rail-viewport{ width:100vw; margin-left:calc(50% - 50vw); display:flex; justify-content:center; align-items:center; }
.hp-brand-cta-box{ background:var(--dorado); padding:14px 32px; border-radius:3px; }
.hp-brand-btn{ font-family:Montserrat,system-ui,sans-serif; font-weight:600; font-size:16px; color:var(--negro); text-decoration:none; }

/* ===== Flechas dentro del slider ===== */
.hp-arrow{
  display:none; place-items:center; position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; background:#c8ccd6; color:#2b3142; border:0; font-size:22px; cursor:pointer; z-index:3;
}
.hp-prev{ left:4px; }
.hp-next{ right:4px; }

@media (max-width:1280px){
  .hp-arrow{ display:grid; }
}

/* === SCORE FINAL === */
.hpC-score{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:"Bebas Neue",system-ui,sans-serif;
  color:var(--azul);
}
.hpC-final{
  font-weight:700;
  font-size:25px;
  line-height:1;
  padding:4px 8px;
  border-radius:3px;
  letter-spacing:.6px;
}
.hpC-num{
  font-size:clamp(28px,3.4vw,36px);
  line-height:1;
}
.hpC-dash{
  font-size:clamp(26px,3vw,34px);
  opacity:.9;
  line-height:1;
}