/* ============================================================
   TEMPLATES BASE — Componentes compartidos
   Enfoque RESPONSIVE-FIRST (min/max-width + aspect-ratio + clamp),
   como el archivo APROBADO. Verificado contra Sección (679:5204).
   Carga después de tokens.css.
   NOTA: header/footer globales se finalizan en Fase 1 contra una
   página completa (no venían en el fragmento de Sección).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--white); color: var(--black); font-family: var(--font-sans); line-height: 1.3; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
figure, blockquote { margin: 0; }
button { font-family: inherit; }

/* ---------- Botón base (esquina RECTA en APROBADO) ---------- */
.btn {
  border-radius: var(--radius-button);      /* 0 */
  border: 1px solid var(--blue);
  background: var(--white);
  color: var(--blue);
  padding: 12px 16px;
  font-size: var(--menu-links);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn--solid { background: var(--blue); color: var(--white); }

/* ---------- Placeholders de publicidad ---------- */
.ad {
  background: var(--ad-bg); color: var(--ad-text);
  font-family: var(--font-roboto); font-size: 24px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  overflow: hidden; flex: none;
}
.ad small { display: block; line-height: 1.25; }
.ad--970x90  { width: 970px; max-width: 100%; height: 90px; }
.ad--728x90  { width: 728px; max-width: 100%; height: 90px; }
.ad--300x600 { width: 300px; max-width: 100%; height: 600px; }
.ad--300x250 { width: 300px; max-width: 100%; height: 250px; }
.ad--160x600 { width: 160px; max-width: 100%; height: 600px; }

/* ---------- Variante "Layout centrado": contenido 1002 centrado + rails simétricos 160 ---------- */
.layout.layout--centrado { justify-content: center; gap: 29px; padding: 24px 30px 0; }
.layout.layout--centrado .content { flex: 0 0 1002px; }
.layout.layout--centrado .rail { flex: 0 0 160px; width: 160px; justify-content: center; }

/* ---------- Cabezal (borde IZQUIERDO azul 4px + título) ---------- */
.cabezal {
  border-left: 4px solid var(--blue);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px;
  max-width: 1380px; min-width: min(345px, 100%);
  padding: 3px 12px;
}
.cabezal h2 { margin: 0; font-weight: 700; font-size: var(--cabezales); color: var(--black); }
.cabezal .sponsor { width: 139px; height: 40px; object-fit: cover; }

/* ---------- Etiqueta VIDEO (overlay) ---------- */
.video-label {
  position: absolute; left: 8px; top: 145px;
  background: rgba(9, 9, 9, 0.7); color: var(--white);
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px;                         /* sin border-radius (esquina recta) */
  font-size: 12px;
}
.video-label img { width: 10px; height: 12px; }

.firma { font-size: var(--firma); color: var(--dark-gray); }

/* ============================================================
   TARJETAS (responsive: aspect-ratio + min/max-width)
   ============================================================ */

/* 1 Columna (base 314) */
.card-1col {
  width: 314px; max-width: 100%;
  background: var(--white); box-shadow: var(--shadow-soft);
  overflow: hidden; position: relative;
  display: flex; flex-direction: column;
}
.card-1col .cover { width: 100%; aspect-ratio: 314 / 177; object-fit: cover; }
.card-1col .txt { display: flex; flex-direction: column; gap: 8px; padding: 13px 12px 16px; }
.card-1col .title { font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--black); }
.card-1col .title .cat { color: var(--blue); }

/* 2 Columnas (base 658, fluido 375–870) */
.card-2col {
  width: 658px; max-width: 870px; min-width: min(375px, 100%);
  background: var(--white); box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; position: relative;
}
.card-2col .cover { width: 100%; aspect-ratio: 658 / 370; object-fit: cover; }
.card-2col .txt { display: flex; flex-direction: column; gap: 16px; padding: 16px 20px; }
.card-2col h2 { margin: 0; font-weight: 700; font-size: var(--title-fluid-20-34); line-height: 1.2; color: var(--black); }
.card-2col h2 .cat { color: var(--blue); }
.card-2col .bajada { font-size: 14px; line-height: 1.2; color: var(--black); }
.card-2col .related { display: flex; align-items: flex-start; gap: 6px; }
.card-2col .related .dot { width: 6px; height: 6px; border-radius: 6px; background: var(--blue); flex: none; margin-top: 8px; }
.card-2col .related p { font-size: 14px; line-height: 1.5; }

/* 1/2 Columna (base 229) */
.card-half {
  width: 229px; min-width: min(229px, 100%); max-width: 100%;
  background: var(--white); box-shadow: var(--shadow-box);
  overflow: hidden; position: relative;
  display: flex; flex-direction: column;
}
.card-half .cover { width: 100%; aspect-ratio: 229 / 128; object-fit: cover; }
.card-half .txt { display: flex; flex-direction: column; gap: 8px; padding: 13px 12px 16px; flex: 1; }
.card-half .title { font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--black); }
.card-half .title .cat { color: var(--blue); }

/* ---------- Paginación ---------- */
.pagination { display: flex; justify-content: space-between; gap: 16px; }
.pagination .btn { justify-content: center; }