@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root{
  --azul:#1F2F59;
  --dorado:#FED128;
  --blanco:#fff;
  --max:1280px;
  --gut: clamp(28px, 7vw, 120px);
  --bd-blue: rgba(255,255,255,.18);
  --bd-gold: rgba(0,0,0,.18);
  --bd-gold-soft: rgba(0,0,0,.12);
  --bd-light: rgba(0,0,0,.12);
}

img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
.muted{color:#6b7280; padding:0 var(--gut)}

/* HERO */
.ic-hero{background:#0b1a3d center/cover no-repeat; min-height:clamp(260px,30vw,460px); position:relative}
.ic-hero__shade{position:absolute;inset:0;background:linear-gradient(#0b1a3d66,#0b1a3d66)}

/* Wrapper */
.ic-wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gut)}

/* Título */
.ic-title{
  font-family:'Bebas Neue',sans-serif; font-weight:400;
  font-size:clamp(72px,10vw,160px); line-height:.9; color:#fff;
  margin:clamp(26px,5vw,48px) 0 8px;
}

/* Headline */
.headline{display:grid;grid-template-columns:1fr clamp(420px,35vw,720px); gap:0; align-items:stretch;
  border-top:1px solid rgba(255,255,255,.25); margin-top:18px; user-select:none}
.headline__media img{width:100%;height:100%;object-fit:cover}
.headline__panel{color:#e6ecff; padding:clamp(18px,2.2vw,28px); border:1px solid rgba(255,255,255,.18); border-left:none; display:flex; flex-direction:column; gap:10px}
.headline__meta{display:flex;justify-content:space-between;align-items:center; font:700 12px/1 system-ui}
.headline__title{font-family:'Bebas Neue',sans-serif; font-weight:400; letter-spacing:.3px; font-size:clamp(32px,4.5vw,66px); line-height:.95; margin:6px 0}
.headline__excerpt{font:400 16px/1.6 system-ui}
.btn{
  display:inline-block;
  background:var(--dorado);
  color:#111;
  padding:12px 16px;
  font-weight:600;
  letter-spacing:.3px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:all .25s ease;
}

.btn:hover,
.btn:focus{
  background:#fff;      /* cambia a blanco */
  color:#111;           /* texto oscuro para contraste */
}


/* Buscador */
.ic-search{padding:22px 0 34px; color:#fff}
.ic-search__bar{border:1px solid var(--bd-blue); padding:16px}
.ic-search__bar h3{font-family:'Bebas Neue',sans-serif; font-weight:400; letter-spacing:.3px; font-size:clamp(26px,4vw,44px); text-transform:uppercase; margin:6px 0 12px}
.ic-search__form{display:flex; gap:10px}
.ic-search__form input{flex:1; padding:12px 14px; border:1px solid rgba(255,255,255,.35); background:rgba(45,66,129,.06); color:#fff}
.ic-search__form button{padding:12px 16px; border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff; cursor:pointer}

/* Sección Fútbol */
.ic-cat--deportes{background:var(--dorado); border-top:1px solid var(--bd-gold); margin-top:12px}
.ic-cat__head{max-width:var(--max); margin:0 auto; padding:22px var(--gut) 14px}
.ic-cat__head h2{font-family:'Bebas Neue',sans-serif; font-weight:400; letter-spacing:.5px; font-size:clamp(38px,6vw,76px); color:#0b1a3d; text-transform:uppercase}
.ic-cat__head h2 span{opacity:.35}

/* Fades laterales */
.car-bleed{position:relative}
.car-fade{position:absolute; top:0; bottom:0; width:76px; pointer-events:none; z-index:2}
.car-fade--left{left:0;  background:linear-gradient(90deg, rgba(253,209,40,1), rgba(253,209,40,0))}
.car-fade--right{right:0; background:linear-gradient(90deg, rgba(253,209,40,0), rgba(253,209,40,1))}

/* Carrusel */
.carousel{position:relative}
.car-track{display:flex; gap:24px; overflow-x:auto; scroll-behavior:smooth; padding:0 72px 22px 72px; scrollbar-width:none; -ms-overflow-style:none}
.car-track::-webkit-scrollbar{height:0}
.car-btn{position:absolute; top:42%; transform:translateY(-50%); width:44px; height:44px; border:none; border-radius:50%; background:#0009; color:#fff; font-size:28px; cursor:pointer; z-index:3; display:grid; place-items:center}
.car-btn.disabled,.car-btn:disabled{opacity:.35; cursor:default}
.car-btn.prev{left:24px} .car-btn.next{right:24px}

/* Tarjetas carrusel */
.news-card{flex:0 0 clamp(300px,26vw,380px); background:var(--dorado); border:1px solid var(--bd-gold-soft); border-top:1px solid var(--bd-gold); position:relative; overflow:hidden; user-select:none}
.car-track .news-card:first-child{margin-left:24px}
.car-track .news-card:last-child{ margin-right:24px }
.news-card__media{overflow:hidden; display:block; position: relative; z-index:1}
.news-card__media img{width:100%; aspect-ratio:16/9; object-fit:cover; transform:scale(1.2); transition:transform .35s}
.news-card__meta,.news-card__title,.news-card__more{position:relative; z-index:2}
.news-card__meta{display:flex; justify-content:space-between; padding:10px 12px 0; color:#0b1a3d; font:700 12px/1 system-ui}
.news-card__title{font-family:'Bebas Neue',sans-serif; font-weight:400; letter-spacing:.2px; font-size:clamp(20px,2.6vw,30px); line-height:1; color:#0b1a3d; margin:6px 12px 46px}
.news-card__more{position:absolute; left:0; right:0; bottom:0; height:40px; background:#0b1a3d; color:#fff; display:flex; align-items:center; padding:0 14px; font:700 14px/1 system-ui; transform:translateY(100%); transition:transform .3s}
.news-card:hover .news-card__media img, .news-card:focus-within .news-card__media img{transform:scale(1.05)}
.news-card:hover .news-card__more, .news-card:focus-within .news-card__more{transform:translateY(0)}

/* EL CLUB (grid) */
.ic-cat--club{background:#fff; border-top:1px solid rgba(0,0,0,.06)}
.grid{max-width:var(--max); margin:0 auto; padding:0 var(--gut) 40px; display:grid; gap:22px}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:960px){.grid--2{grid-template-columns:1fr}}
.card{background:#fff; border:1px solid var(--bd-light); position:relative; overflow:hidden}
.card__media{display:block; overflow:hidden; position: relative; z-index:1}
.card__media img{width:100%; aspect-ratio:16/7; object-fit:cover; transform:scale(1.2); transition:transform .35s ease}
.card__body,.card__meta,.card__title,.card__more{position: relative; z-index:2}
.card:hover .card__media img,.card:focus-within .card__media img{transform:scale(1.05)}
.card__body{padding:14px}
.card__meta{display:flex; justify-content:space-between; color:#334155; font:700 12px/1 system-ui}
.card__title{font-family:'Bebas Neue',sans-serif; font-weight:400; letter-spacing:.2px; font-size:clamp(24px,2.8vw,36px); color:#0f172a; margin-top:8px}
.card__more{position:absolute; left:0; right:0; bottom:0; height:40px; background:#0b1a3d; color:#fff; display:flex; align-items:center; padding:0 14px; font:700 14px/1 system-ui; transform:translateY(100%); transition:transform .3s}
.card:hover .card__more,.card:focus-within .card__more{transform:translateY(0)}

/* Busqueda grid */
.grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid--3{grid-template-columns:1fr}}

/* Responsive headline */
@media (max-width:960px){
  .headline{grid-template-columns:1fr}
  .headline__panel{border-left:1px solid rgba(255,255,255,.18); border-top:none}
}

/* QOL */
.js-nodrag, .js-nodrag *{-webkit-user-drag:none; user-select:none}







/* ===================== */
/*   BUSCADOR (.nb-*)    */
/* ===================== */



/* Grid responsive para resultados */
.nb-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
  margin-bottom: 40px;
}
@media (max-width: 1100px){ .nb-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 640px) { .nb-grid{ grid-template-columns: 1fr } }

/* Tarjeta azul (no toca .news-card del carrusel) */
.nb-card{
  position: relative;
  background: var(--azul);
  border: 1px solid rgba(255,255,255,.12);
  color: #e6ecff;
  overflow: hidden;
  user-select: none;
}

/* Imagen con zoom suave */
.nb-card__media{ display:block; overflow:hidden }
.nb-card__media img{
  width:100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transform: scale(1.2);
  transition: transform .35s ease;
}

/* Meta superior */
.nb-card__meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px 0;
  font: 700 12px/1 system-ui;
  color:#e6ecff;
  position:relative;
  z-index:2;
}

/* Título */
.nb-card__title{
  font-family:'Bebas Neue',sans-serif;
  font-weight:400;
  letter-spacing:.2px;
  font-size: clamp(20px,2.6vw,30px);
  line-height:1;
  color:#fff;
  margin: 6px 12px 46px;
  position:relative;
  z-index:2;
}
.nb-card__title a{ color:inherit }

/* Footer “Leer más” amarillo */
.nb-card__more{
  position:absolute;
  left:0; right:0; bottom:0;
  height:40px;
  background: var(--dorado);   /* Amarillo */
  color:#0b1a3d;               /* Texto azul */
  display:flex; align-items:center;
  padding:0 14px;
  font:700 14px/1 system-ui;
  transform: translateY(100%);
  transition: transform .3s ease;
}
.nb-card:hover .nb-card__media img,
.nb-card:focus-within .nb-card__media img{ transform: scale(1.05) }
.nb-card:hover .nb-card__more,
.nb-card:focus-within .nb-card__more{ transform: translateY(0%) }

/* ===================== */
/*   TITULO DEL BUSCADOR */
/* ===================== */
.ic-search__bar h3{
  font-family:'Bebas Neue',sans-serif;
  font-weight:400;
  letter-spacing:.3px;
  font-size:clamp(26px,4vw,44px);
  text-transform:uppercase;
  margin:6px 0 12px;
  color:#fff;   /* Forzado a blanco */
}





/* ====== DETALLE DE NOTICIA (ver.php) ====== */

/* Hero del detalle: sin sombreado y con alto algo mayor */
.ic-hero--ver{
  min-height: clamp(260px, 36vw, 520px);
  /* anulamos cualquier overlay que otras páginas usen */
}
.ic-hero--ver .ic-hero__shade{ display:none !important; }

/* Wrapper específico del detalle */
.ic-ver{ color:#e6ecff; padding: 18px 0 44px; }
.ic-ver__back{ margin: 8px 0 16px; }

/* Título del detalle: reutiliza .ic-title y ajusta márgenes */
.ic-ver__title{
  margin: 6px 0 8px;              /* más compacto que el default */
  font-size: clamp(56px, 8.5vw, 132px); /* un pelín menor para que respire */
}

/* Bajada debajo del título (misma tipografía del sitio) */
.ic-ver__bajada{
  margin: 6px 0 18px;
  padding: 0;                     /* no usamos el padding lateral de .muted */
  color:#cfe0ff;
  font: 400 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Cuerpo de la noticia */
.ic-ver__content{
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:18px;
  font: 400 17px/1.75 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#e6ecff;
}
.ic-ver__content h2,
.ic-ver__content h3{ font-family:'Bebas Neue',sans-serif; letter-spacing:.2px; }
.ic-ver__content img{ max-width:100%; height:auto; }

/* Sección de relacionadas en detalle (usa tu carrusel base) */
.ic-ver__rel{ margin-top: 0; } /* pegada a continuación del artículo */

/* ======== Ajustes solo para ver.php (nota individual) ======== */

/* Hero de nota: sin overlay y sin margen superior */
.ic-hero--noticia{
  min-height: clamp(240px, 36vw, 520px);
}
.ic-hero--noticia .ic-hero__shade{ display:none; }

/* Bloque de la nota */
.ic-nota{ padding-top: clamp(18px, 3vw, 28px); padding-bottom: clamp(20px, 4vw, 36px); }

/* Botón Volver (reusa .btn) pero con respiro vertical propio */
.ic-nota-btn{ margin: 6px 0 14px; }

/* Título grande debajo de la imagen (reusa .ic-title) */
.ic-title--nota{
  margin: 6px 0 8px;  /* desktop base; móviles se ajustan abajo */
}

/* Bajada y contenido (espaciado suave) */
.ic-nota-bajada{ margin: 6px 0 18px; color:#e6ecff; }
.ic-nota-contenido{
  border-top:1px solid rgba(255,255,255,.18);
  padding-top: 18px;
  color:#e6ecff;
  line-height: 1.65;
}

/* ===== Responsive solo para móvil (<= 640px) ===== */
@media (max-width: 640px){
  /* margen lateral adicional al botón y al título sin tocar otros módulos */
  .ic-nota-btn{ 
    margin-left: var(--gut);
    margin-right: var(--gut);
  }
  .ic-title--nota{
    margin-left: var(--gut);
    margin-right: var(--gut);
    font-size: clamp(42px, 12vw, 64px);  /* mantiene jerarquía sin romper layout */
  }
  .ic-nota-bajada{
    margin-left: var(--gut);
    margin-right: var(--gut);
  }
  .ic-nota-contenido{
    margin-left: var(--gut);
    margin-right: var(--gut);
  }
}





/* --- Galería detalle (FIX centrado) --- */
.ver-gal{
  position: relative;
  max-width: var(--max);
  margin: 0 auto clamp(26px,4vw,36px);
  padding: 0 var(--gut);
  user-select: none;
}
.ver-gal__viewport{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-sizing: border-box;  /* medimos ancho real */
}
.ver-gal__track{
  display: flex;
  gap: 0;                 /* sin separación entre slides */
  will-change: transform;
}
.ver-gal__item{
  position: relative;
  margin: 0;              /* <== evita el desplazamiento del primer slide */
  flex: 0 0 auto;         /* el JS fija width/flex-basis en px */
  height: clamp(220px, 48vw, 620px);
  background: #0b1a3d;
}
.ver-gal__bg{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
  filter: blur(20px) saturate(1.1);
  transform: scale(1.08);
  opacity:.55;
}
/* centro perfecto sin recorte */
.ver-gal__media{
  position: absolute; left:50%; top:50%;
  transform: translate(-50%, -50%);
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  display: block; z-index: 1; background: transparent;
}
/* botones */
.ver-gal__btn{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: none; cursor: pointer;
  background: #0009; color: #fff; font-size: 28px;
  display: grid; place-items: center; z-index: 3;
}
.ver-gal__btn.prev{ left: calc(var(--gut) + 8px); }
.ver-gal__btn.next{ right: calc(var(--gut) + 8px); }
.ver-gal__btn.disabled{ opacity:.35; cursor: default; }







.news-card__meta{
  display:flex;
  justify-content: space-between;
  padding:10px 12px 0;
  color:#0b1a3d;
  font:700 12px/1 system-ui;
}


.news-card__meta .meta-date{
  opacity:.85;
}