/* ── Noticias Deportivas — Bar Aliquindoi ────────────────────────────── */

/* ── Hero ──
   2026-08-22 (Eduardo: "necesitamos un pro para poner de fondo en ese
   banner"). El fondo dinámico (franjas diagonales + resplandor radial +
   textura de puntos, en el azul de marca) se movió a static/css/base.css
   como clase compartida `.hero-dinamico` -- Eduardo pidió aplicar el
   mismo tratamiento a todas las páginas de cliente con esta cabecera
   (contacto, FAQ, testimonios, cómo llegar, trabaja, galería, horarios),
   así que vive en un solo sitio en vez de copiado 7 veces. Esta hoja
   solo pone lo que es propio de esta página (padding, centrado). */
.noticias-hero {
  padding: 3.5rem 1.5rem 3rem;
  text-align: center;
}
.noticias-hero-inner { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
.noticias-eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin: 0 0 .6rem;
}
.noticias-titulo {
  /* Bug real preexistente (ya se veía en la captura original de Eduardo,
     no lo causó este cambio de fondo): static/css/base.css define
     `h1, h2, h3, h4 { color: var(--heading, #0f172a) }` -- una regla
     DIRECTA sobre el propio <h1>, que gana a la herencia del `color: #fff`
     del contenedor `.noticias-hero` (la herencia no compite en
     especificidad con una propiedad puesta directamente en el elemento).
     El título quedaba casi negro sobre fondo oscuro. Color explícito aquí
     para no depender de la herencia. */
  color: #fff;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  margin: 0 0 .6rem;
  letter-spacing: -.01em;
}
.noticias-sub { font-size: .97rem; color: rgba(255,255,255,.72); margin: 0; }

/* ── Filtros ── */
.noticias-wrap { max-width: 1140px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

.noticias-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
}
.filtro-btn {
  padding: .38rem 1rem;
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 600;
  border: 1.5px solid var(--t-line, #e8ddd5);
  color: var(--t-muted, #7a6a5a);
  background: var(--t-panel, #fff);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.filtro-btn:hover {
  border-color: var(--t-accent);
  color: var(--t-accent);
  box-shadow: 0 2px 8px rgba(58,173,168,.15);
}
.filtro-btn--active {
  background: var(--t-accent);
  color: #fff !important;
  border-color: var(--t-accent);
  box-shadow: 0 2px 10px rgba(58,173,168,.35);
}

/* ── Grid: primera tarjeta destacada ── */
.noticias-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

/* Primera tarjeta: destacada a ancho completo */
.noticia-card:first-child {
  grid-column: 1 / -1;
  flex-direction: row;
  max-height: 320px;
}
.noticia-card:first-child .noticia-img {
  width: 55%;
  flex-shrink: 0;
  height: auto;
  min-height: 260px;
  border-radius: 0;
}
.noticia-card:first-child .noticia-body {
  padding: 1.8rem 1.6rem;
  justify-content: center;
}
.noticia-card:first-child .noticia-h2 {
  font-size: 1.35rem;
  line-height: 1.3;
}
.noticia-card:first-child .noticia-resumen {
  display: block;
  font-size: .93rem;
  line-height: 1.65;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;
}

/* ── Tarjetas ── */
.noticia-card {
  position: relative;
  background: var(--t-panel, #fff);
  border-radius: 14px;
  border: 1px solid var(--t-line, #e8ddd5);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s, border-color .2s;
  display: flex;
  flex-direction: column;
}
.noticia-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--sport-color, var(--t-accent));
  opacity: 0;
  transition: opacity .2s;
}
.noticia-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transform: translateY(-3px);
  border-color: transparent;
}
.noticia-card:hover::before { opacity: 1; }

/* Colores por deporte */
.noticia-card[data-deporte="futbol"]      { --sport-color: #16a34a; }
.noticia-card[data-deporte="baloncesto"]  { --sport-color: #ea580c; }
.noticia-card[data-deporte="tenis"]       { --sport-color: #ca8a04; }
.noticia-card[data-deporte="motor"]       { --sport-color: #dc2626; }
.noticia-card[data-deporte="ciclismo"]    { --sport-color: #7c3aed; }
.noticia-card[data-deporte="atletismo"]   { --sport-color: #0891b2; }
.noticia-card[data-deporte="padel"]       { --sport-color: #0d9488; }

/* Link invisible que cubre toda la tarjeta */
.noticia-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ── Imagen ── */
.noticia-img {
  height: 180px;
  overflow: hidden;
  background: var(--t-bg, #fdf6f0);
  flex-shrink: 0;
}
.noticia-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.noticia-card:hover .noticia-img img { transform: scale(1.05); }

/* Placeholder: fondo con color del deporte */
.noticia-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--sport-color, var(--t-accent)) 15%, #f8f8f8),
    color-mix(in srgb, var(--sport-color, var(--t-accent)) 8%, #fff)
  );
}
.noticia-placeholder-emoji {
  font-size: 3.5rem;
  opacity: .55;
  filter: grayscale(20%);
}

/* ── Body ── */
.noticia-body {
  padding: 1.1rem 1.15rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* Tag de deporte */
.noticia-deporte-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--sport-color, var(--t-accent));
  background: color-mix(in srgb, var(--sport-color, var(--t-accent)) 10%, transparent);
  padding: .2rem .55rem;
  border-radius: 4px;
  width: fit-content;
}

.noticia-h2 {
  font-size: .97rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.42;
  color: var(--t-text, #2d2d2d);
}

.noticia-resumen {
  font-size: .83rem;
  color: var(--t-muted, #7a6a5a);
  margin: 0;
  flex: 1;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.noticia-meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .72rem;
  color: var(--t-muted, #7a6a5a);
  margin-top: auto;
  padding-top: .5rem;
  border-top: 1px solid var(--t-line, #e8ddd5);
}
.noticia-fuente {
  background: var(--t-bg, #fdf6f0);
  padding: .12rem .45rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: .68rem;
}

/* ── Empty ── */
.noticias-empty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--t-muted, #7a6a5a);
  font-size: 1.05rem;
}

/* ── CTA bar ── */
.noticias-bar-cta {
  margin: 2.5rem 0 0;
  background: linear-gradient(135deg, #0f2e2c 0%, #1a4a46 100%);
  border-radius: 16px;
  padding: 1.6rem 2rem;
}
.noticias-bar-cta-inner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.noticias-bar-cta-icon { font-size: 2.4rem; flex-shrink: 0; }
.noticias-bar-cta-inner div { flex: 1; min-width: 160px; }
.noticias-bar-cta-inner strong { display: block; color: #fff; font-size: 1rem; font-weight: 800; margin-bottom: .2rem; }
.noticias-bar-cta-inner span { color: rgba(255,255,255,.72); font-size: .85rem; }
.noticias-bar-cta-btn {
  background: var(--t-accent);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  padding: .65rem 1.4rem;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .15s, transform .15s;
  box-shadow: 0 2px 12px rgba(58,173,168,.4);
}
.noticias-bar-cta-btn:hover { opacity: .9; transform: translateY(-1px); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .noticias-grid { grid-template-columns: repeat(2, 1fr); }
  .noticia-card:first-child { grid-column: 1 / -1; flex-direction: row; max-height: 240px; }
  .noticia-card:first-child .noticia-img { min-height: 200px; }
}
@media (max-width: 600px) {
  .noticias-grid { grid-template-columns: 1fr; }
  .noticia-card:first-child { flex-direction: column; max-height: none; }
  .noticia-card:first-child .noticia-img { width: 100%; min-height: 180px; }
  .noticia-card:first-child .noticia-body { padding: 1rem; }
  .noticia-card:first-child .noticia-h2 { font-size: 1.1rem; }
  /* 2026-08-26 (Claude, inspiración UX 2026 -- zona táctil mínima
     44x44px, mismo patrón ya aplicado a .alergeno-filtro-btn): los
     filtros de deporte medían solo 34px de alto en móvil. */
  .filtro-btn { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── Detalle ── */
.noticias-detalle-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 768px) {
  .noticias-detalle-wrap { grid-template-columns: 1fr; }
}

.noticias-back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  color: var(--t-muted, #7a6a5a);
  text-decoration: none;
  margin-bottom: 1.25rem;
  transition: color .15s;
}
.noticias-back:hover { color: var(--t-accent); }

.noticias-detalle-titulo {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 900;
  margin: .5rem 0 1rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.noticias-detalle-img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.noticias-detalle-resumen {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--t-text, #2d2d2d);
  border-left: 3px solid var(--t-accent);
  padding-left: 1rem;
  margin-bottom: 1.5rem;
  line-height: 1.65;
}

.noticias-detalle-cuerpo { font-size: .97rem; line-height: 1.82; color: var(--t-text, #2d2d2d); }

.noticias-fuente-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 2rem;
  padding: .6rem 1.2rem;
  border: 1.5px solid var(--t-accent);
  border-radius: 8px;
  color: var(--t-accent);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.noticias-fuente-link:hover { background: var(--t-accent); color: #fff; }

/* Sidebar */
.noticias-sidebar {
  background: var(--t-panel, #fff);
  border: 1px solid var(--t-line, #e8ddd5);
  border-radius: 14px;
  padding: 1.25rem;
  position: sticky;
  top: 80px;
}
.noticias-sidebar-title { font-size: .88rem; font-weight: 800; margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--t-text); }
.noticias-sidebar-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--t-line, #e8ddd5);
  text-decoration: none;
  color: var(--t-text, #2d2d2d);
  font-size: .82rem;
  line-height: 1.4;
  font-weight: 500;
  transition: color .15s;
}
.noticias-sidebar-item:last-child { border-bottom: none; }
.noticias-sidebar-item:hover { color: var(--t-accent); }
.noticias-sidebar-emoji { font-size: 1.1rem; flex-shrink: 0; margin-top: .05rem; }

.noticias-feed{display:flex;flex-direction:column;border-top:1px solid var(--t-line)}
.noticia-card--feed{display:grid;grid-template-columns:50px 1fr 190px;gap:1.2rem;align-items:center;border:0;border-bottom:1px solid var(--t-line);border-radius:0;box-shadow:none;padding:1.2rem 0}.noticia-feed-index{font-variant-numeric:tabular-nums;color:var(--t-muted);font-size:.75rem}.noticia-img--feed{height:120px}
.noticias-editorial{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem}.noticia-card--portada{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr}.noticia-card--portada .noticia-img{height:100%;min-height:360px}.noticia-card--portada .noticia-h2{font-size:clamp(1.5rem,3vw,2.6rem)}
@media(max-width:700px){.noticia-card--feed{grid-template-columns:35px 1fr}.noticia-img--feed{display:none}.noticias-editorial{grid-template-columns:1fr}.noticia-card--portada{grid-column:auto;display:block}.noticia-card--portada .noticia-img{min-height:0;height:220px}}