dentro del texto.
- 800 extrabold → TITULARES DISPLAY (≥17px): hero, título del
artículo, títulos de tarjeta y de sección,
títulos de página y números de ranking.
Regla rápida: si es un TITULAR que invita al clic → 800;
si es texto que se LEE → 400; si es UI/dato → 500; resto → 700.
============================================================ */
/* ============================================================
BODY DEFAULT
============================================================ */
body {
font-family: var(--ff-sans);
font-size: var(--fs-base); /* 15px — UI default */
line-height: var(--lh-normal); /* 1.5 */
color: var(--kc-text);
font-weight: var(--fw-regular); /* 400 */
}
/* ============================================================
HEADINGS — siempre serif editorial + 700 bold + line-height tight
============================================================ */
h1, h2, h3, h4, h5, h6,
.kc-heading {
font-family: var(--ff-serif); /* Source Serif 4 — titulares editoriales */
font-weight: var(--fw-bold); /* 700 */
color: var(--kc-text);
margin: 0 0 var(--sp-3);
line-height: var(--lh-snug); /* 1.25 */
letter-spacing: var(--tracking-snug);
}
/* H1: hero / artículos / page headers grandes — responsive */
h1, .kc-h1 {
font-size: var(--fs-3xl);
font-weight: var(--fw-extrabold); /* 800 — display */
line-height: var(--lh-tight); /* 1.1 */
letter-spacing: var(--tracking-tight);
}
@media (min-width: 768px) {
h1, .kc-h1 { font-size: var(--fs-4xl); }
}
/* H2: títulos de sección destacados */
h2, .kc-h2 {
font-size: var(--fs-2xl);
line-height: var(--lh-snug);
}
@media (min-width: 768px) {
h2, .kc-h2 { font-size: var(--fs-3xl); }
}
/* H3: subsecciones, section titles */
h3, .kc-h3 {
font-size: var(--fs-2xl); /* 24px */
}
/* H4: card titles featured, schedule names */
h4, .kc-h4 {
font-size: var(--fs-xl); /* 20px */
}
/* H5: card titles regular */
h5, .kc-h5 {
font-size: var(--fs-lg); /* 18px */
}
/* H6: card titles small, sidebar items */
h6, .kc-h6 {
font-size: var(--fs-base); /* 15px */
}
/* ============================================================
PÁRRAFOS — para lectura larga
============================================================ */
p {
margin: 0 0 var(--sp-4);
line-height: var(--lh-relaxed); /* 1.65 */
color: var(--kc-text-soft);
font-size: var(--fs-md); /* 16px (cómodo para leer) */
}
/* Lead paragraph (intro de artículos) */
.kc-lead {
font-size: var(--fs-lg); /* 18px */
line-height: var(--lh-relaxed);
color: var(--kc-text);
font-weight: var(--fw-regular);
}
/* ============================================================
LINKS
============================================================ */
a {
color: var(--kc-link);
text-decoration: none;
}
a:hover {
color: var(--kc-primary-hover);
}
/* ============================================================
LISTAS, TEXTO INLINE
============================================================ */
ul, ol { padding-left: var(--sp-5); margin: 0 0 var(--sp-4); }
li {
line-height: var(--lh-relaxed);
font-size: var(--fs-md);
}
strong, b { font-weight: var(--fw-bold); color: var(--kc-text); }
em, i { font-style: italic; }
small { font-size: var(--fs-xs); } /* 11px */
mark, .kc-highlight {
background: #fff3a0; /* amarillo suave para highlights/mark */
color: var(--kc-ink-900);
padding: 0 0.25em;
border-radius: 2px;
}
/* ============================================================
CITAS (blockquote)
============================================================ */
blockquote {
border-left: 4px solid var(--kc-primary);
padding: var(--sp-3) var(--sp-5);
margin: var(--sp-6) 0;
background: var(--kc-bg-alt);
border-radius: 0 var(--radius) var(--radius) 0;
color: var(--kc-text);
font-style: italic;
font-size: var(--fs-lg); /* 18px */
line-height: var(--lh-relaxed);
}
/* ============================================================
CODE
============================================================ */
code, pre, kbd, samp {
font-family: var(--ff-mono);
font-size: 0.9em;
}
code {
background: var(--kc-bg-soft);
padding: 0.125em 0.375em;
border-radius: var(--radius-sm);
color: var(--kc-ink-800);
}
/* ============================================================
CLASES UTILITARIAS TIPOGRÁFICAS
============================================================ */
.kc-text-serif { font-family: var(--ff-serif); }
.kc-text-sans { font-family: var(--ff-sans); }
.kc-text-mono { font-family: var(--ff-mono); }
.kc-text-xs { font-size: var(--fs-xs); }
.kc-text-sm { font-size: var(--fs-sm); }
.kc-text-base { font-size: var(--fs-base); }
.kc-text-md { font-size: var(--fs-md); }
.kc-text-lg { font-size: var(--fs-lg); }
.kc-text-xl { font-size: var(--fs-xl); }
.kc-text-2xl { font-size: var(--fs-2xl); }
.kc-text-3xl { font-size: var(--fs-3xl); }
.kc-fw-regular { font-weight: var(--fw-regular); }
.kc-fw-medium { font-weight: var(--fw-medium); }
.kc-fw-semibold { font-weight: var(--fw-semibold); }
.kc-fw-bold { font-weight: var(--fw-bold); }
.kc-fw-extrabold { font-weight: var(--fw-extrabold); }
.kc-fw-black { font-weight: var(--fw-black); }
.kc-uppercase { text-transform: uppercase; letter-spacing: var(--tracking-wider); }
.kc-tracking-wide { letter-spacing: var(--tracking-wide); }
.kc-text-muted { color: var(--kc-text-muted); }
.kc-text-faint { color: var(--kc-text-faint); }
.kc-text-soft { color: var(--kc-text-soft); }
.kc-text-primary { color: var(--kc-primary); }
.kc-text-live { color: var(--kc-live); }
.kc-text-inverse { color: var(--kc-text-inverse); }
/* ============================================================
EYEBROW / KICKER (categoría sobre titular)
Siempre micro + bold + UPPERCASE + tracking wider
============================================================ */
.kc-eyebrow {
display: inline-block;
font-family: var(--ff-sans);
font-size: var(--fs-xs); /* 11px */
font-weight: var(--fw-bold); /* 700 */
color: var(--kc-primary);
text-transform: uppercase;
letter-spacing: var(--tracking-widest);
margin-bottom: var(--sp-2);
line-height: 1;
}
.kc-eyebrow--live { color: var(--kc-live); }
.kc-eyebrow--accent { color: var(--kc-accent-strong); }
/* ===== 03-layout.css ===== */
/* ============================================================
kc/03-layout.css — Contenedores y grids
============================================================ */
.kc-container {
width: 100%;
max-width: var(--container-2xl);
margin-left: auto;
margin-right: auto;
padding-left: var(--sp-4);
padding-right: var(--sp-4);
}
@media (min-width: 768px) {
.kc-container { padding-left: var(--sp-6); padding-right: var(--sp-6); }
}
.main-content > .container,
.kc-footer > .container {
width: 100%;
max-width: var(--container-2xl);
margin-left: auto;
margin-right: auto;
padding-left: var(--sp-4);
padding-right: var(--sp-4);
}
@media (min-width: 768px) {
.main-content > .container,
.kc-footer > .container {
padding-left: var(--sp-6);
padding-right: var(--sp-6);
}
}
/* Main wrapper (entre header y footer) */
.main-content {
min-height: 50vh;
display: block;
background: var(--kc-bg);
}
.kc-container-narrow {
width: 100%;
max-width: var(--container-lg);
margin-left: auto;
margin-right: auto;
padding-left: var(--sp-4);
padding-right: var(--sp-4);
}
/* Layout principal: contenido + sidebar (estilo RPP) */
.kc-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-8);
}
@media (min-width: 992px) {
.kc-layout--with-sidebar {
grid-template-columns: minmax(0, 1fr) 320px;
}
}
@media (min-width: 1280px) {
.kc-layout--with-sidebar {
grid-template-columns: minmax(0, 1fr) 360px;
gap: var(--sp-10);
}
}
.kc-main { min-width: 0; }
.kc-aside {
display: flex;
flex-direction: column;
gap: var(--sp-6);
}
@media (min-width: 992px) {
.kc-aside--sticky {
position: sticky;
top: calc(var(--sp-6) + 80px);
align-self: start;
max-height: calc(100vh - 100px);
overflow-y: auto;
padding-right: var(--sp-2);
}
}
/* Hero grid: principal + 2 secundarias (RPP-style) */
.kc-hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-5);
}
@media (min-width: 768px) {
.kc-hero-grid {
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
gap: var(--sp-5);
}
.kc-hero-grid > :first-child {
grid-row: span 2;
}
}
/* Grid auto-fit para listados */
.kc-grid {
display: grid;
gap: var(--sp-5);
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.kc-grid--gap-lg { gap: var(--sp-8); }
.kc-grid--gap-sm { gap: var(--sp-3); }
.kc-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
.kc-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
.kc-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .kc-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .kc-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.kc-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .kc-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .kc-grid--4 { grid-template-columns: repeat(4, 1fr); } }
/* Stack (vertical flex con gap) */
.kc-stack {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.kc-stack--sm { gap: var(--sp-2); }
.kc-stack--lg { gap: var(--sp-6); }
.kc-stack--xl { gap: var(--sp-8); }
/* Cluster (horizontal flex con wrap) */
.kc-cluster {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
align-items: center;
}
/* Divider editorial */
.kc-divider {
height: 1px;
background: var(--kc-border);
border: 0;
margin: var(--sp-6) 0;
}
.kc-divider--brand {
height: 3px;
background: var(--kc-primary);
width: 60px;
margin: var(--sp-4) 0;
border-radius: var(--radius-full);
}
/* Section paddings */
.kc-section {
padding: var(--sp-10) 0;
}
.kc-section--sm { padding: var(--sp-8) 0; }
.kc-section--lg { padding: var(--sp-16) 0; }
.kc-section--ink {
background: var(--kc-bg-ink);
color: var(--kc-text-inverse);
border-top: 6px solid var(--kc-editorial-line);
}
.kc-section--ink h1,
.kc-section--ink h2,
.kc-section--ink h3,
.kc-section--ink h4 { color: var(--kc-white); }
.kc-section--ink p { color: var(--kc-ink-300); }
.kc-section--alt { background: var(--kc-bg-alt); }
.kc-section--brand {
background: var(--kc-bg-brand);
color: var(--kc-white);
}
.kc-section--brand h2 { color: var(--kc-white); }
@media (max-width: 768px) {
.kc-section { padding: var(--sp-8) 0; }
.kc-section--lg { padding: var(--sp-10) 0; }
}
/* ===== 04-header.css ===== */
/* ============================================================
kc/04-header.css — Header RKC v3 (estructura invertida)
============================================================
1. Topbar verde profundo: menús del sitio + fecha + redes
2. Header principal: Menú+Buscar | LOGO | Señal + Play
3. Titulares compactos
4. Secciones (categorías noticias) tipo periódico moderno
5. Buscador y menú móvil
============================================================ */
/* ============================================================
ESTRUCTURA BASE
============================================================ */
.kc-site-header {
position: relative;
z-index: var(--z-header);
background: var(--kc-primary-deep);
box-shadow: none;
padding-bottom: 3px; /* espacio de la línea de señal */
}
/* Línea de señal: degradado lima que separa el bloque oscuro del header
de la barra de categorías. Se funde con el fondo en ambos extremos. */
.kc-site-header::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: linear-gradient(90deg, transparent 0, var(--kc-accent) 22%, var(--kc-accent) 78%, transparent 100%);
pointer-events: none;
z-index: 31;
}
.kc-site-header .kc-container,
.kc-sections .kc-container {
max-width: var(--container-header);
}
/* ============================================================
SCROLL DEL HEADER
El topbar, logo y titulares salen por scroll natural. Solo
.kc-sections queda sticky, evitando recalcular la altura del header
durante el scroll.
============================================================ */
.kc-topbar,
.kc-site-header .kc-header,
.kc-newsline {
overflow: hidden;
max-height: none;
opacity: 1;
}
/* ============================================================
1. TOPBAR VERDE PROFUNDO — menús del sitio
============================================================ */
.kc-topbar {
background: linear-gradient(90deg, var(--kc-green-900) 0%, var(--kc-primary-deep) 58%, var(--kc-green-900) 100%);
color: var(--kc-white);
height: 38px;
display: flex;
align-items: center;
position: relative;
z-index: 30;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.kc-topbar__inner {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: var(--sp-4);
height: 100%;
}
/* Nav menús del sitio (izquierda) */
.kc-topbar__nav {
display: flex;
align-items: center;
gap: 0;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
height: 100%;
}
.kc-topbar__nav::-webkit-scrollbar { display: none; }
.kc-topbar__link {
display: inline-flex;
align-items: center;
padding: 0 14px;
color: rgba(255, 255, 255, 0.85);
font-size: 14px; /* era 12.5px */
font-weight: var(--fw-medium);
text-decoration: none;
height: 100%;
white-space: nowrap;
line-height: 1;
letter-spacing: 0.01em;
position: relative;
}
.kc-topbar__link:hover {
background: rgba(255, 255, 255, 0.07);
color: var(--kc-white);
}
.kc-topbar__link.active {
color: var(--kc-white);
}
.kc-topbar__link.active::after {
content: '';
position: absolute;
bottom: 0;
left: 14px;
right: 14px;
height: 2px;
background: var(--kc-accent);
}
/* Derecha: fecha + redes */
.kc-topbar__right {
display: flex;
align-items: center;
gap: var(--sp-4);
flex-shrink: 0;
}
.kc-topbar__date {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px; /* era 12 */
font-weight: var(--fw-regular);
color: rgba(255, 255, 255, 0.78);
text-transform: none; /* la mayúscula inicial la pone PHP; capitalize escribía "1 De Septiembre" */
line-height: 1;
}
.kc-topbar__date i {
color: var(--kc-accent);
font-size: 11px; /* era 10 */
}
.kc-topbar__social {
display: inline-flex;
align-items: center;
gap: 2px;
}
.kc-topbar__social a {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.75);
border-radius: 3px;
font-size: 11px;
text-decoration: none;
}
.kc-topbar__social a:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--kc-white);
}
@media (max-width: 991px) {
.kc-topbar__date span { display: none; }
}
@media (max-width: 768px) {
.kc-topbar { height: 38px; }
.kc-topbar__date { display: none; }
.kc-topbar__link { padding: 0 10px; font-size: 11.5px; }
}
/* ============================================================
Sprint B — Navegación duplicada en móvil
============================================================
En móvil el topbar ofrecía los MISMOS 6 destinos que el menú hamburguesa,
en una tira con scroll horizontal (fácil de no ver) y con enlaces de 13px
de alto. Dos caminos al mismo sitio, ninguno cómodo.
En móvil se oculta la franja completa: el menú lo cubre la hamburguesa y las
cuatro redes ya están en el footer, así que no se pierde ningún destino.
Se recuperan los 38px de la franja, que compensan de sobra los 11px que
crece el ticker al darle un objetivo táctil usable (ver .kc-newsline__item).
============================================================ */
@media (max-width: 640px) {
.kc-topbar { display: none; }
}
/* ============================================================
2. HEADER PRINCIPAL — Botones | LOGO centrado | Señal+Play
============================================================ */
.kc-header {
background:
radial-gradient(circle at 50% 48%, rgba(24, 116, 68, 0.32) 0, rgba(24, 116, 68, 0.12) 34%, transparent 58%),
linear-gradient(105deg, var(--kc-green-900) 0%, var(--kc-green-800) 40%, var(--kc-primary-deep) 56%, var(--kc-green-900) 100%);
padding: 10px 0;
position: relative;
overflow: hidden;
min-height: 122px;
isolation: isolate;
}
.kc-header__inner {
display: grid;
grid-template-columns: minmax(230px, 1fr) minmax(0, 340px) minmax(230px, 1fr);
align-items: center;
gap: var(--sp-5);
min-height: 104px;
position: relative;
z-index: 1;
}
/* Permitir que el topbar deje sobresalir al logo */
.kc-topbar { overflow: visible; }
.kc-site-header { overflow: visible; }
.kc-header__left {
display: flex;
align-items: center;
gap: 10px;
grid-column: 1;
min-width: 0;
}
.kc-header__right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--sp-3);
grid-column: 3;
min-width: 0;
}
.kc-hbtn {
display: inline-flex;
flex-shrink: 0;
align-items: center;
gap: 8px;
padding: 0 20px;
height: 42px;
background: rgba(255, 255, 255, 0.11);
color: var(--kc-white);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--radius-full);
font-family: var(--ff-sans);
font-size: 14px; /* era 13 */
font-weight: var(--fw-medium);
cursor: pointer;
text-decoration: none;
line-height: 1;
letter-spacing: 0.01em;
}
.kc-hbtn:hover {
background: rgba(255, 255, 255, 0.18);
color: var(--kc-white);
border-color: rgba(255, 255, 255, 0.28);
}
/* Sprint A — Foco accesible en el header.
ANTES: outline rgba(245,30,26,0.45). El rojo al 45% se mezclaba con el fondo
y quedaba por debajo del mínimo WCAG 2.2 (3:1) en TODAS las superficies:
· sobre el topbar verde oscuro ....... 1.47:1
· sobre fondo blanco ................. 2.06:1
· sobre el botón play rojo ........... 1.00:1 (invisible: rojo sobre rojo)
AHORA: anillo doble blanco + verde oscuro. Sobre fondo oscuro destaca el
blanco; sobre fondo claro destaca el verde. Funciona en cualquier superficie
sin tener que escribir una regla por componente. */
.kc-hbtn:focus-visible,
.kc-header__play:focus-visible,
.kc-header__brand:focus-visible,
.kc-topbar__link:focus-visible,
.kc-newsline__item:focus-visible,
.kc-sections__link:focus-visible,
.kc-sections__brand:focus-visible,
.kc-sections__search:focus-visible,
.kc-sections__live:focus-visible {
outline: 2px solid var(--kc-white);
outline-offset: 2px;
box-shadow: 0 0 0 5px var(--kc-green-900);
border-radius: 2px;
}
.kc-hbtn i {
font-size: 13px;
color: rgba(255, 255, 255, 0.82);
}
.kc-hbtn:hover i { color: var(--kc-accent); }
@media (max-width: 767px) {
.kc-hbtn { padding: 0; width: 38px; min-width: 38px; height: 38px; flex: 0 0 38px; justify-content: center; }
.kc-hbtn:focus-visible { border-radius: var(--radius-full); }
.kc-hbtn span { display: none; }
.kc-hbtn i { font-size: 15px; color: var(--kc-white); }
}
/* ============================================================
LOGO CENTRAL — completo con fondo oscuro
============================================================ */
.kc-header__brand {
display: flex;
align-items: center;
justify-content: center;
justify-self: center;
text-decoration: none;
position: relative;
transform: none;
z-index: 2;
line-height: 0;
width: min(32vw, 340px);
max-width: 100%;
height: 104px;
}
.kc-header__brand::before {
content: '';
position: absolute;
inset: 50% auto auto 50%;
width: 128px;
height: 128px;
transform: translate(-50%, -50%);
border-radius: var(--radius-full);
background: radial-gradient(circle, rgba(9, 71, 36, 0.30), rgba(9, 71, 36, 0.08) 56%, transparent 74%);
z-index: -1;
}
.kc-header__brand img {
width: 100%;
height: 100%;
display: block;
border-radius: 0;
filter: none;
object-fit: contain;
}
@media (min-width: 992px) {
.kc-header__brand { width: min(32vw, 350px); }
}
/* ============================================================
SEÑAL EN VIVO + BOTÓN PLAY
============================================================ */
.kc-header__signal {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px; /* era 12 */
color: rgba(255, 255, 255, 0.78);
line-height: 1;
font-weight: var(--fw-regular);
padding: 11px 14px;
background: rgba(0, 0, 0, 0.16);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--radius-full);
}
.kc-header__signal-dot {
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background: var(--kc-red-600);
flex-shrink: 0;
}
.kc-header__signal-label {
color: var(--kc-white);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.kc-header__signal-links {
display: inline-flex;
align-items: center;
gap: 6px;
}
.kc-header__signal-links a {
color: var(--kc-white);
font-weight: var(--fw-bold);
text-decoration: none;
letter-spacing: 0.02em;
}
.kc-header__signal-links a:hover { color: var(--kc-red-500); }
.kc-header__signal-links .sep {
color: rgba(255, 255, 255, 0.32);
font-weight: var(--fw-regular);
}
.kc-header__play {
width: 46px;
height: 46px;
border-radius: var(--radius-full);
background: var(--kc-red-600);
color: var(--kc-white);
border: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
text-decoration: none;
flex-shrink: 0;
}
.kc-header__play:hover {
background: var(--kc-red-700);
color: var(--kc-white);
}
.kc-header__play i {
font-size: 14px;
margin-left: 3px;
}
@media (max-width: 991px) {
.kc-header__signal { display: none; }
}
@media (max-width: 767px) {
.kc-header { padding: 8px 0; min-height: 92px; }
.kc-header__inner {
/* Dos botones de 38px + 10px de separación. Los lados iguales
mantienen el logo centrado; solo el centro puede encogerse. */
grid-template-columns: minmax(86px, 1fr) minmax(0, 180px) minmax(86px, 1fr);
min-height: 76px;
gap: var(--sp-2);
}
.kc-header__brand { width: 100%; height: 76px; }
.kc-header__brand::before { width: 84px; height: 84px; }
.kc-header__play { width: 40px; height: 40px; }
}
/* ============================================================
3. TITULARES — línea compacta de últimas noticias
============================================================ */
.kc-newsline {
background: linear-gradient(90deg, var(--kc-green-900) 0%, var(--kc-primary-deep) 50%, var(--kc-green-900) 100%);
color: var(--kc-white);
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
position: relative;
z-index: 30;
}
.kc-newsline__inner {
display: flex;
align-items: center;
gap: 12px;
min-height: 30px;
overflow: hidden;
}
.kc-newsline__label {
display: inline-flex;
align-items: center;
gap: 6px;
height: 21px;
padding: 0 9px;
background: var(--kc-red-600);
color: var(--kc-white);
border-radius: 4px;
font-size: 10px;
font-weight: var(--fw-bold);
line-height: 1;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
flex-shrink: 0;
}
.kc-newsline__label i {
font-size: 9px;
}
.kc-newsline__viewport {
flex: 1;
min-width: 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.kc-newsline__track {
display: inline-flex;
align-items: center;
width: max-content;
white-space: nowrap;
will-change: transform;
}
/* Animación del ticker — el track tiene 2 grupos idénticos para loop
seamless. Mover translateX 0 → -50% completa exactamente 1 grupo,
por lo que al hacer loop el contenido se ve continuo (sin saltos). */
@keyframes scroll-ticker-immediate {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.kc-newsline__group {
display: inline-flex;
align-items: center;
gap: 13px;
padding-right: 13px;
}
.kc-newsline__item {
color: rgba(255, 255, 255, 0.9);
font-size: 13px; /* era 12 */
font-weight: var(--fw-medium);
line-height: 1;
text-decoration: none;
/* Sprint B — Objetivo táctil.
Los titulares medían 13px de alto: 60 de los 181 elementos interactivos
de la portada quedaban por debajo del mínimo de 24px (WCAG 2.2 SC 2.5.8),
y 96 por debajo de los 44px que recomiendan Apple y Google en móvil.
Se amplía el área activa con padding vertical, sin tocar el tamaño del
texto ni la altura de la banda: el ticker se ve igual, pero se puede
tocar sin fallar. */
display: inline-flex;
align-items: center;
min-height: 24px;
padding-block: var(--sp-2);
}
@media (max-width: 640px) {
/* En móvil se sube al objetivo pleno de 44px */
.kc-newsline__item { min-height: 44px; }
.kc-newsline { height: auto; }
}
.kc-newsline__item:hover {
color: var(--kc-accent);
}
.kc-newsline__dot {
width: 4px;
height: 4px;
border-radius: var(--radius-full);
background: var(--kc-accent);
flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
.kc-newsline__viewport {
overflow-x: auto;
-webkit-mask-image: none;
mask-image: none;
scrollbar-width: none;
}
.kc-newsline__viewport::-webkit-scrollbar { display: none; }
.kc-newsline__track {
animation: none !important;
}
}
@media (max-width: 640px) {
.kc-newsline__inner {
gap: 8px;
min-height: 31px;
}
.kc-newsline__label {
height: 20px;
padding: 0 8px;
font-size: 9px;
}
.kc-newsline__label span {
display: none;
}
.kc-newsline__item {
font-size: 11.5px;
}
.kc-newsline__group {
gap: 11px;
padding-right: 11px;
}
}
/* ============================================================
4. SECCIONES — categorías de noticias estilo periódico moderno
============================================================ */
.kc-sections {
background: linear-gradient(180deg, var(--kc-white) 0%, #f8faf9 100%);
border-top: 1px solid rgba(1, 73, 61, 0.08);
border-bottom: 1px solid rgba(1, 73, 61, 0.16);
overflow-x: auto;
scrollbar-width: none;
position: sticky;
top: 0;
z-index: var(--z-header);
}
.kc-sections::-webkit-scrollbar { display: none; }
.kc-sections__inner {
display: flex;
align-items: stretch;
gap: 0;
flex-wrap: nowrap;
min-width: max-content;
}
.kc-sections__link {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 14px 22px;
color: var(--kc-text);
font-size: 15px; /* era 13 — más legible */
font-weight: var(--fw-medium);
text-decoration: none;
text-transform: capitalize;
border-bottom: 3px solid transparent;
white-space: nowrap;
line-height: 1;
position: relative;
letter-spacing: 0.01em;
}
.kc-sections__link i {
font-size: 12px; /* era 11 */
color: var(--kc-accent-strong);
}
.kc-sections__link:hover {
color: var(--kc-primary);
background: rgba(1, 73, 61, 0.05);
border-bottom-color: rgba(1, 73, 61, 0.25);
}
.kc-sections__link.active {
color: var(--kc-primary);
border-bottom-color: var(--kc-accent);
background: var(--kc-lime-50);
font-weight: var(--fw-bold);
}
.kc-sections__link--all {
color: var(--kc-accent-strong);
font-weight: var(--fw-bold);
border-right: 1px solid var(--kc-ink-200);
margin-right: 4px;
}
.kc-sections__link--all:hover {
color: var(--kc-primary);
}
@media (max-width: 640px) {
.kc-sections__link { padding: 12px 14px; font-size: 12px; }
}
/* ------------------------------------------------------------
Color propio de cada sección
El enlace trae data-kc-cat (color) y data-kc-cat-text (versión legible
sobre blanco); dynamic-styles.js los expone como --kc-cat y --kc-cat-text.
Mientras el JS no corre, el fallback es el lima de marca.
------------------------------------------------------------ */
.kc-sections__link[data-kc-cat]:hover {
color: var(--kc-text);
background: transparent;
border-bottom-color: var(--kc-cat, var(--kc-accent));
}
.kc-sections__link[data-kc-cat].active {
color: var(--kc-cat-text, var(--kc-primary));
background: transparent;
border-bottom-color: var(--kc-cat, var(--kc-accent));
}
/* ------------------------------------------------------------
Barra fija (clase is-stuck, la pone kc-header.js al observar el
centinela). En reposo y en móvil el mini-logo y las herramientas no existen
visualmente; al quedar fija en escritorio aparecen y los enlaces se compactan.
------------------------------------------------------------ */
.kc-sections__sentinel {
height: 1px;
margin-bottom: -1px;
visibility: hidden;
pointer-events: none;
}
.kc-sections.is-stuck {
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10);
}
.kc-sections__brand,
.kc-sections__tools {
display: none;
}
@media (min-width: 992px) {
.kc-sections.is-stuck .kc-sections__link {
padding: 14px 13px;
font-size: 14.5px;
}
.kc-sections.is-stuck .kc-sections__brand {
display: flex;
align-items: center;
padding-right: 14px;
margin-right: 6px;
border-right: 1px solid var(--kc-border);
line-height: 0;
flex-shrink: 0;
}
.kc-sections__brand img {
display: block;
height: 30px;
width: 90px;
object-fit: contain;
}
/* Herramientas pegadas al borde derecho del área visible: si la fila
desborda, las categorías se desplazan por debajo de ellas. */
.kc-sections.is-stuck .kc-sections__tools {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
padding-left: 12px;
position: sticky;
right: 0;
background: var(--kc-white);
box-shadow: -14px 0 12px -6px rgba(255, 255, 255, 0.96);
flex-shrink: 0;
}
}
/* Entre 992 y 1199px la fila va justa: el mini-logo se sacrifica primero. */
@media (min-width: 992px) and (max-width: 1199px) {
.kc-sections.is-stuck .kc-sections__brand { display: none; }
}
.kc-sections__search {
flex-shrink: 0;
width: 36px;
height: 36px;
padding: 0;
border-radius: var(--radius-full);
border: 1px solid var(--kc-border);
background: var(--kc-bg-alt);
color: var(--kc-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 13px;
line-height: 1;
}
.kc-sections__search:hover {
color: var(--kc-primary);
background: var(--kc-white);
border-color: var(--kc-border-strong);
}
.kc-sections__search:focus-visible,
.kc-header__play:focus-visible { border-radius: var(--radius-full); }
.kc-sections__live {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 14px 0 12px;
border-radius: var(--radius-full);
background: var(--kc-live);
color: var(--kc-white);
font-size: 12px;
font-weight: var(--fw-extrabold);
letter-spacing: 0.08em;
line-height: 1;
text-decoration: none;
white-space: nowrap;
}
.kc-sections__live:hover {
background: var(--kc-live-hover);
color: var(--kc-white);
}
.kc-sections__live i {
font-size: 10px;
}
.kc-sections__live-dot {
width: 7px;
height: 7px;
border-radius: var(--radius-full);
background: var(--kc-white);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
flex-shrink: 0;
}
/* ============================================================
SEARCH OVERLAY — modal de búsqueda
============================================================ */
.kc-search-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.92);
z-index: var(--z-modal);
display: flex;
align-items: flex-start;
justify-content: center;
padding: 80px var(--sp-4) var(--sp-4);
opacity: 0;
visibility: hidden;
}
.kc-search-overlay.active {
opacity: 1;
visibility: visible;
}
.kc-search-overlay__inner {
width: 100%;
max-width: 720px;
position: relative;
}
.kc-search-overlay__close {
position: absolute;
top: -56px;
right: 0;
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.12);
color: var(--kc-white);
border: 0;
border-radius: var(--radius-full);
cursor: pointer;
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.kc-search-overlay__close:hover {
background: var(--kc-primary-hover);
}
.kc-search-overlay__form {
position: relative;
display: flex;
align-items: center;
background: var(--kc-white);
border-radius: var(--radius-full);
padding: 4px;
}
.kc-search-overlay__icon {
position: absolute;
left: 24px;
color: var(--kc-text-faint);
font-size: 18px;
pointer-events: none;
}
.kc-search-overlay__form input {
flex: 1;
min-width: 0;
padding: 18px 18px 18px 60px;
border: 0;
background: transparent;
font-family: var(--ff-sans);
font-size: 18px;
font-weight: var(--fw-medium);
color: var(--kc-text);
outline: none;
}
.kc-search-overlay__form input::placeholder {
color: var(--kc-text-faint);
font-weight: var(--fw-regular);
}
/* Buscar utiliza la variante principal de 09-buttons.css. */
@media (max-width: 640px) {
.kc-search-overlay { padding: 60px var(--sp-3) var(--sp-3); }
.kc-search-overlay__form input { font-size: 16px; padding: 14px 14px 14px 48px; }
.kc-search-overlay__icon { left: 18px; font-size: 14px; }
.kc-search-overlay__submit { padding-inline: var(--sp-4); }
}
/* ===== 05-navigation.css ===== */
/* ============================================================
kc/05-navigation.css — Navegación principal + pills
============================================================ */
/* ============================================================
NAV PRINCIPAL — verde corporativo
============================================================ */
.kc-nav {
background: var(--kc-primary);
color: var(--kc-white);
box-shadow: none;
}
.kc-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
}
.kc-nav__list {
display: flex;
align-items: center;
gap: 0;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
.kc-nav__item {
position: relative;
}
.kc-nav__link {
display: inline-flex;
align-items: center;
padding: 12px var(--sp-4);
color: var(--kc-white);
font-size: var(--fs-sm); /* 13px */
font-weight: var(--fw-medium); /* 500 */
text-decoration: none;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
position: relative;
line-height: 1;
}
.kc-nav__link::after {
content: '';
position: absolute;
left: 50%;
bottom: 4px;
transform: translateX(-50%);
width: 0;
height: 3px;
background: var(--kc-accent);
border-radius: 2px;
}
.kc-nav__link:hover,
.kc-nav__link.active {
background: rgba(255, 255, 255, 0.08);
color: var(--kc-white);
}
.kc-nav__link:hover::after,
.kc-nav__link.active::after {
width: calc(100% - 24px);
}
/* Dropdown submenu */
.kc-nav__item--has-dropdown > .kc-nav__link::after {
content: none;
}
.kc-nav__item--has-dropdown > .kc-nav__link i {
margin-left: var(--sp-2);
font-size: 0.75em;
}
.kc-nav__item--has-dropdown:hover > .kc-nav__link i {
transform: none;
}
.kc-nav__dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: var(--kc-white);
border-radius: 0 0 var(--radius-md) var(--radius-md);
box-shadow: none;
padding: var(--sp-2) 0;
opacity: 0;
visibility: hidden;
transform: none;
list-style: none;
margin: 0;
z-index: var(--z-overlay);
}
.kc-nav__item--has-dropdown:hover > .kc-nav__dropdown,
.kc-nav__item--has-dropdown:focus-within > .kc-nav__dropdown {
opacity: 1;
visibility: visible;
transform: none;
}
.kc-nav__dropdown a {
display: block;
padding: var(--sp-2) var(--sp-4);
color: var(--kc-text-soft);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
text-decoration: none;
text-transform: none;
}
.kc-nav__dropdown a:hover {
background: var(--kc-bg-alt);
color: var(--kc-primary);
}
/* Acciones a la derecha del nav (escuchar/ver TV) */
.kc-nav__actions {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding-right: var(--sp-4);
}
.kc-nav__btn-listen {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 8px var(--sp-4);
background: var(--kc-accent);
color: var(--kc-accent-text);
font-size: var(--fs-xs); /* 11px */
font-weight: var(--fw-bold); /* 700 */
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
border-radius: var(--radius-full);
text-decoration: none;
border: 0;
cursor: pointer;
line-height: 1;
}
.kc-nav__btn-listen:hover {
background: var(--kc-accent-hover);
color: var(--kc-accent-text);
}
.kc-nav__btn-listen i { font-size: 0.85em; }
/* ============================================================
PILLS — "Hoy / Última hora / Más leídas"
============================================================ */
.kc-pills {
background: var(--kc-white);
border-bottom: 1px solid var(--kc-border);
padding: var(--sp-3) 0;
overflow-x: auto;
scrollbar-width: none;
}
.kc-pills::-webkit-scrollbar { display: none; }
.kc-pills__inner {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: nowrap;
min-width: max-content;
}
.kc-pill {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 6px var(--sp-4);
background: var(--kc-bg-alt);
color: var(--kc-text-soft);
font-size: var(--fs-xs); /* 11px */
font-weight: var(--fw-bold); /* 700 */
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
border-radius: var(--radius-full);
text-decoration: none;
border: 1px solid transparent;
white-space: nowrap;
line-height: 1;
}
.kc-pill:hover {
background: var(--kc-green-50);
color: var(--kc-primary);
border-color: var(--kc-primary);
}
.kc-pill.active,
.kc-pill--primary {
background: var(--kc-primary);
color: var(--kc-white);
border-color: var(--kc-primary);
}
.kc-pill.active:hover,
.kc-pill--primary:hover {
background: var(--kc-primary-hover);
color: var(--kc-white);
}
.kc-pill--live {
background: var(--kc-live);
color: var(--kc-white);
border-color: var(--kc-live);
}
.kc-pill--live::before {
content: '';
width: 6px;
height: 6px;
background: var(--kc-white);
border-radius: var(--radius-full);
}
.kc-pill--live:hover {
background: var(--kc-live-hover);
color: var(--kc-white);
}
.kc-pill__separator {
width: 1px;
height: 20px;
background: var(--kc-border);
margin: 0 var(--sp-2);
}
@media (max-width: 991px) {
.kc-nav__list,
.kc-nav__actions {
display: none;
}
.kc-nav {
padding: var(--sp-2) 0;
}
.kc-pills { padding: var(--sp-2) 0; }
.kc-pill { font-size: 10px; padding: 4px var(--sp-3); }
}
/* ============================================================
Sprint B — Migas de pan (breadcrumb)
============================================================
Respaldan el schema BreadcrumbList que la página ya emitía sin
contraparte visible. Discretas: son orientación, no navegación
principal — no deben competir con el antetítulo ni con el titular.
============================================================ */
.kc-breadcrumb {
margin-bottom: var(--sp-3);
}
.kc-breadcrumb__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2);
margin: 0;
padding: 0;
list-style: none;
font-family: var(--ff-sans);
font-size: var(--fs-xs);
}
.kc-breadcrumb__item {
display: flex;
align-items: center;
gap: var(--sp-2);
color: var(--kc-text-muted);
min-width: 0;
}
/* Separador generado por CSS: no es contenido, no debe leerlo un lector de pantalla */
.kc-breadcrumb__item + .kc-breadcrumb__item::before {
content: "›";
color: var(--kc-text-faint);
font-size: 1.1em;
line-height: 1;
}
.kc-breadcrumb__item a {
color: var(--kc-text-muted);
text-decoration: none;
/* Sprint B — objetivo táctil: el texto se ve pequeño pero el área activa
llega a 44px de alto en móvil sin alterar el diseño. */
display: inline-flex;
align-items: center;
min-height: 24px;
padding: var(--sp-1) 0;
}
.kc-breadcrumb__item a:hover {
color: var(--kc-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.kc-breadcrumb__item a:focus-visible {
outline: 2px solid var(--kc-primary);
outline-offset: 2px;
border-radius: 2px;
}
.kc-breadcrumb__item--current {
color: var(--kc-text-faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 640px) {
/* En móvil la ruta completa no cabe: se oculta el título actual y se deja
Inicio › Noticias › Categoría, que es lo accionable. */
.kc-breadcrumb__item--current { display: none; }
.kc-breadcrumb__item a { min-height: 44px; }
}
/* ===== 06-cards.css ===== */
/* ============================================================
kc/06-cards.css — Sistema de cards (.kc-card-*)
============================================================ */
/* ============================================================
CATEGORY CHIP (badge sobre card)
============================================================ */
.kc-chip {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
padding: 4px 8px;
background: var(--kc-primary);
color: var(--kc-white);
font-size: 10px; /* micro: chips siempre 10px */
font-weight: var(--fw-bold); /* 700 */
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
border-radius: 2px;
text-decoration: none;
line-height: 1.3;
}
.kc-chip:hover { color: var(--kc-white); }
.kc-chip--live { background: var(--kc-live); }
.kc-chip--accent { background: var(--kc-accent); color: var(--kc-accent-text); }
.kc-chip--ink { background: var(--kc-ink-900); color: var(--kc-white); }
.kc-chip--outline {
background: transparent;
color: var(--kc-primary);
border: 1.5px solid var(--kc-primary);
padding: 2px var(--sp-2);
}
/* ============================================================
CARD BASE (estilo periodístico RPP)
============================================================ */
.kc-card {
display: flex;
flex-direction: column;
background: var(--kc-white);
border-radius: 0;
overflow: hidden;
height: 100%;
text-decoration: none;
color: inherit;
}
.kc-card:hover {
color: inherit;
}
.kc-card:hover .kc-card__title {
color: var(--kc-primary);
}
.kc-card__media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--kc-bg-soft);
border-radius: var(--radius-sm);
}
.kc-card__media img,
.kc-card__media picture {
width: 100%;
height: 100%;
object-fit: cover;
}
.kc-card__media-chip {
position: absolute;
top: var(--sp-3);
left: var(--sp-3);
z-index: 2;
}
.kc-card__media-icon {
position: absolute;
bottom: var(--sp-3);
right: var(--sp-3);
width: 36px;
height: 36px;
background: rgba(15, 23, 42, 0.85);
color: var(--kc-white);
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--fs-md);
backdrop-filter: blur(4px);
}
.kc-card__body {
padding: var(--sp-3) 0 0;
display: flex;
flex-direction: column;
gap: var(--sp-2);
flex-grow: 1;
}
.kc-card__eyebrow {
font-family: var(--ff-sans);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--kc-text);
text-transform: none;
letter-spacing: 0;
padding-bottom: 4px;
border-bottom: 2px solid var(--kc-editorial-line);
line-height: 1;
}
.kc-card__title {
font-family: var(--ff-serif); /* Source Serif 4 — titular editorial */
font-size: var(--fs-lg); /* 18px */
font-weight: var(--fw-extrabold); /* 800 — titulares de tarjeta */
line-height: var(--lh-snug); /* 1.25 */
color: var(--kc-text);
margin: 0;
letter-spacing: var(--tracking-snug);
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kc-card__excerpt {
font-size: var(--fs-base); /* 16px */
font-weight: var(--fw-regular); /* 400 — extracto: texto de lectura */
color: var(--kc-text-soft); /* más oscuro (era text-muted) */
line-height: var(--lh-relaxed);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kc-card__meta {
margin-top: auto;
display: flex;
align-items: center;
gap: var(--sp-3);
font-size: var(--fs-xs); /* 11px */
font-weight: var(--fw-medium); /* 500 */
color: var(--kc-text-faint);
padding-top: var(--sp-2);
line-height: 1.4;
}
.kc-card__meta-item {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
}
.kc-card__meta-item i { color: var(--kc-primary); }
/* ============================================================
VARIANTES DE CARD
============================================================ */
/* Hero card (más grande, principal) */
.kc-card--hero .kc-card__media { aspect-ratio: 16 / 10; }
.kc-card--hero .kc-card__body { padding: var(--sp-5) var(--sp-2); }
.kc-card--hero .kc-card__title {
font-size: var(--fs-xl); /* 20px */
-webkit-line-clamp: 4;
line-clamp: 4;
}
@media (min-width: 992px) {
.kc-card--hero .kc-card__title { font-size: var(--fs-2xl); /* 24px */ }
}
/* Card secundaria (horizontal compacta) */
.kc-card--horizontal {
flex-direction: row;
gap: var(--sp-4);
align-items: stretch;
}
.kc-card--horizontal .kc-card__media {
width: 140px;
aspect-ratio: 1 / 1;
flex-shrink: 0;
border-radius: var(--radius-sm);
}
.kc-card--horizontal .kc-card__body {
padding: 0;
justify-content: space-between;
}
.kc-card--horizontal .kc-card__title {
font-size: var(--fs-base); /* 15px */
-webkit-line-clamp: 3;
line-clamp: 3;
}
@media (max-width: 640px) {
.kc-card--horizontal .kc-card__media {
width: 110px;
}
.kc-card--horizontal .kc-card__title {
font-size: var(--fs-sm); /* 13px */
}
}
/* Card sobre fondo oscuro (sección negra) */
.kc-card--on-ink {
background: transparent;
color: var(--kc-white);
}
.kc-card--on-ink .kc-card__title { color: var(--kc-white); }
.kc-card--on-ink .kc-card__excerpt { color: var(--kc-ink-300); }
.kc-card--on-ink .kc-card__meta { color: var(--kc-ink-400); }
.kc-card--on-ink .kc-card__eyebrow { color: var(--kc-accent); }
.kc-card--on-ink:hover .kc-card__title { color: var(--kc-accent); }
.kc-card--on-ink .kc-card__media-icon { background: var(--kc-accent); color: var(--kc-accent-text); }
/* Card minimal (sin imagen, solo texto + categoría) */
.kc-card--minimal {
padding: var(--sp-4);
border-left: 3px solid var(--kc-primary);
background: var(--kc-bg-alt);
border-radius: 0;
}
.kc-card--minimal:hover { background: var(--kc-bg-soft); }
/* Card podcast / TV */
.kc-card--podcast .kc-card__media {
aspect-ratio: 1 / 1;
border-radius: var(--radius-lg);
}
.kc-card--podcast .kc-card__title { font-size: var(--fs-base); /* 15px */ -webkit-line-clamp: 2; line-clamp: 2; }
.kc-card--podcast .kc-card__media-icon {
width: 48px;
height: 48px;
background: var(--kc-accent);
color: var(--kc-accent-text);
font-size: var(--fs-lg);
}
/* ============================================================
CARD FLAT (ref. editorial): imagen limpia sin chip, kicker de
categoría como TEXTO en color (solo listado general) y fecha
gris en MAYÚSCULAS tipo "08 DE JULIO, 2026".
============================================================ */
.kc-card__kicker {
font-size: var(--fs-xs); /* 11px */
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--kc-primary); /* fallback; la vista inyecta el color */
line-height: 1;
}
.kc-card__date {
font-size: 12px;
font-weight: var(--fw-medium);
color: var(--kc-text-faint);
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1;
margin-top: auto; /* la fecha siempre al pie de la tarjeta */
padding-top: var(--sp-2);
}
/* ===== 07-sections.css ===== */
/* ============================================================
kc/07-sections.css — Bandas y headers de sección
============================================================ */
/* ============================================================
SECTION TITLE — encabezado editorial estilo RPP
============================================================ */
.kc-section-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
margin-bottom: var(--sp-6);
padding-top: var(--sp-4);
padding-bottom: 0;
border-top: 6px solid var(--kc-editorial-line);
border-bottom: 0;
position: relative;
}
.kc-section-title::before {
content: none;
}
.kc-section-title__heading {
font-family: var(--ff-serif);
font-size: var(--fs-2xl);
font-weight: var(--fw-extrabold); /* 800 — títulos de sección */
color: var(--kc-text);
margin: 0;
text-transform: none;
letter-spacing: 0;
line-height: var(--lh-tight);
}
@media (min-width: 768px) {
.kc-section-title__heading { font-size: var(--fs-3xl); }
}
.kc-section-title__heading i {
color: var(--kc-primary);
margin-right: var(--sp-2);
}
.kc-section-title__link {
font-size: var(--fs-xs); /* 11px */
color: var(--kc-text-muted);
font-weight: var(--fw-bold); /* 700 */
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--sp-2);
white-space: nowrap;
line-height: 1;
}
.kc-section-title__link:hover {
color: var(--kc-primary);
}
.kc-section-title__link i { font-size: 10px; }
/* Variante sobre fondo oscuro */
.kc-section--ink .kc-section-title {
border-top-color: var(--kc-editorial-line);
}
.kc-section--ink .kc-section-title__heading {
color: var(--kc-white);
}
.kc-section--ink .kc-section-title__heading i {
color: var(--kc-white);
}
.kc-section--ink .kc-section-title__link {
color: var(--kc-ink-300);
}
.kc-section--ink .kc-section-title__link:hover {
color: var(--kc-accent);
}
/* ============================================================
BAND — banda verde de transición entre secciones
============================================================ */
.kc-band {
background: var(--kc-primary);
color: var(--kc-white);
padding: var(--sp-5) 0;
position: relative;
overflow: hidden;
}
.kc-band--deep { background: var(--kc-primary-deep); }
.kc-band--ink { background: var(--kc-ink-900); }
.kc-band__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-5);
flex-wrap: wrap;
}
.kc-band__title {
font-family: var(--ff-serif);
font-size: var(--fs-xl); /* 20px */
font-weight: var(--fw-extrabold); /* 800 — titular de franja */
color: var(--kc-white);
margin: 0;
text-transform: uppercase;
letter-spacing: var(--tracking-tight);
display: inline-flex;
align-items: center;
gap: var(--sp-3);
line-height: 1.1;
}
@media (min-width: 768px) {
.kc-band__title { font-size: var(--fs-2xl); /* 24px */ }
}
.kc-band__title i {
color: var(--kc-accent);
}
.kc-band__subtitle {
font-size: var(--fs-sm); /* 13px */
color: rgba(255, 255, 255, 0.85);
margin: 0;
margin-top: var(--sp-1);
line-height: 1.4;
}
.kc-band__cta {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 8px var(--sp-5);
background: var(--kc-white);
color: var(--kc-primary);
font-size: var(--fs-xs); /* 11px */
font-weight: var(--fw-bold); /* 700 */
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
border-radius: var(--radius-full);
text-decoration: none;
line-height: 1;
}
.kc-band__cta:hover {
background: var(--kc-accent);
color: var(--kc-accent-text);
}
/* Sprint D — Aquí vivía una definición de .kc-breaking que ninguna plantilla
llegó a usar nunca (buscaba .kc-breaking__content, una clase que no existe en
el HTML). Se elimina para no dejar dos bloques compitiendo por los mismos
selectores: la barra de última hora que sí funciona está al final de este
archivo, y la emite views/partials/header.php desde los ajustes del panel. */
/* ============================================================
FEATURED SPLIT — dos columnas grandes (foto + texto)
============================================================ */
.kc-featured-split {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-6);
align-items: center;
background: var(--kc-bg);
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--kc-border);
}
@media (min-width: 768px) {
.kc-featured-split { grid-template-columns: 5fr 4fr; gap: 0; }
}
.kc-featured-split__media {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--kc-bg-soft);
}
.kc-featured-split__media img {
width: 100%; height: 100%;
object-fit: cover;
}
.kc-featured-split__body {
padding: var(--sp-6);
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
@media (min-width: 992px) {
.kc-featured-split__body { padding: var(--sp-10); }
}
.kc-featured-split__title {
font-family: var(--ff-serif);
font-size: var(--fs-xl);
font-weight: var(--fw-extrabold); /* 800 — titular destacado */
line-height: var(--lh-snug);
color: var(--kc-text);
margin: 0;
letter-spacing: var(--tracking-tight);
}
@media (min-width: 768px) {
.kc-featured-split__title { font-size: var(--fs-2xl); }
}
/* ============================================================
ARTICLE DETAIL — estilos compartidos para noticias internas
============================================================ */
.kc-article {
padding-top: var(--sp-6); /* mismo espacio superior que el resto de páginas (24px) */
}
/* a.kc-article-back: especificidad (0,0,1,1) para GANARLE a
.kc-page-header__breadcrumb (0,0,1,0) que se carga después en 16-empty */
a.kc-article-back {
color: var(--kc-text-muted);
margin-bottom: var(--sp-5);
display: flex; /* bloque propio → la categoría baja a su línea */
width: fit-content; /* pero solo tan ancho como su contenido */
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
text-decoration: none;
transition: color 0.15s ease;
}
a.kc-article-back:hover { color: var(--kc-primary); }
a.kc-article-back i { font-size: 12px; }
.kc-article-title {
font-family: var(--ff-serif);
font-size: var(--fs-3xl);
font-weight: var(--fw-extrabold); /* 800 — titular principal */
line-height: var(--lh-tight);
letter-spacing: 0;
margin: 0 0 var(--sp-4);
color: var(--kc-text);
}
@media (min-width: 768px) {
.kc-article-title { font-size: var(--fs-4xl); }
}
.kc-article-meta {
display: flex;
flex-wrap: wrap;
gap: var(--sp-4);
padding: var(--sp-4) 0;
border-top: 1px solid var(--kc-border);
border-bottom: 1px solid var(--kc-border);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--kc-text-muted);
margin-bottom: var(--sp-6);
line-height: 1.4;
}
.kc-article-meta span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.kc-article-meta i { color: var(--kc-primary); }
.kc-article-meta strong {
color: var(--kc-text);
font-weight: var(--fw-medium);
}
/* Chip de categoría dentro de la meta */
.kc-article-cat {
display: inline-flex;
align-items: center;
background: var(--kc-primary);
color: var(--kc-white);
font-family: var(--ff-sans);
font-size: 11px;
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 4px 11px;
border-radius: 3px;
text-decoration: none;
line-height: 1;
transition: background 0.15s ease;
}
.kc-article-cat:hover { background: var(--kc-primary-deep); color: var(--kc-white); }
/* Antetítulo (kicker): categoría en su propio color, sobre el titular.
El color y el texto legible se inyectan por variables inline desde la vista. */
.kc-article-kicker {
display: inline-flex;
align-items: center;
background: var(--kc-cat, var(--kc-primary));
color: var(--kc-cat-text, var(--kc-white));
font-family: var(--ff-sans);
font-size: 12px;
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: 0.07em;
padding: 5px 13px;
border-radius: 4px;
text-decoration: none;
line-height: 1;
margin-bottom: var(--sp-3);
transition: filter 0.15s ease;
}
.kc-article-kicker:hover { filter: brightness(0.90); color: var(--kc-cat-text, var(--kc-white)); }
.kc-article-image {
width: 100%;
height: auto;
border-radius: var(--radius-sm);
margin-bottom: var(--sp-6);
}
.kc-article-content {
font-family: var(--ff-sans);
font-size: 1.125rem;
line-height: 1.75;
color: var(--kc-ink-900);
font-weight: var(--fw-regular); /* 400 — lectura larga: regular; las negritas resaltan más */
/* La columna del artículo ya limita la lectura: usar su ancho completo
mantiene el cuerpo alineado con el titular y la foto, también en móvil. */
width: 100%;
max-width: none;
overflow-wrap: anywhere;
}
/* Sprint B — Colisión de cascada corregida.
02-typography.css define `p { font-size: var(--fs-md); line-height: var(--lh-relaxed) }`.
Aunque su especificidad es menor (0,0,1) que la de .kc-article-content (0,1,0),
ganaba igualmente: la regla de clase solo alcanzaba a los por HERENCIA, y
la herencia siempre pierde frente a una regla que apunte al elemento directo.
Resultado: el cuerpo se veía a 17px/1.65 en lugar de 18px/1.75.
Estas reglas apuntan al
explícitamente, así que ya sí aplican. */
.kc-article-content p {
margin: 0 0 var(--sp-5);
font-size: inherit; /* hereda los 1.125rem del contenedor */
line-height: inherit; /* hereda el 1.75 del contenedor */
color: inherit; /* ink-900, no el text-soft genérico de los
*/
}
.kc-article-content h2,
.kc-article-content h3 {
margin-top: var(--sp-8);
margin-bottom: var(--sp-3);
color: var(--kc-text);
line-height: var(--lh-snug);
font-family: var(--ff-serif);
font-weight: var(--fw-bold);
letter-spacing: 0;
}
.kc-article-content h2 { font-size: var(--fs-2xl); }
.kc-article-content h3 { font-size: var(--fs-xl); }
.kc-article-content img {
border-radius: var(--radius-sm);
margin: var(--sp-6) auto;
max-width: 100%;
height: auto;
display: block;
}
.kc-article-content figure {
margin: var(--sp-6) 0;
text-align: center;
}
.kc-article-content figcaption {
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
color: var(--kc-text-muted);
margin-top: var(--sp-2);
font-style: italic;
font-family: var(--ff-sans);
line-height: 1.4;
}
.kc-article-content blockquote {
border-left: 4px solid var(--kc-editorial-line);
padding: var(--sp-3) var(--sp-5);
margin: var(--sp-6) 0;
background: var(--kc-bg-alt);
border-radius: 0;
color: var(--kc-text);
font-style: italic;
font-size: var(--fs-lg);
line-height: 1.6;
}
.kc-article-content blockquote p:last-child { margin-bottom: 0; }
.kc-article-content a {
color: var(--kc-primary);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
}
.kc-article-content ul,
.kc-article-content ol {
margin: 0 0 var(--sp-5);
padding-left: var(--sp-6);
}
.kc-article-content li { margin-bottom: var(--sp-2); }
.kc-article-content iframe {
max-width: 100%;
border-radius: var(--radius-sm);
margin: var(--sp-6) 0;
}
.kc-share-panel {
background: var(--kc-bg-alt);
border-top: 4px solid var(--kc-editorial-line);
padding: var(--sp-5);
margin-top: var(--sp-8);
}
.kc-share-panel__title {
font-family: var(--ff-sans);
font-size: var(--fs-base);
font-weight: var(--fw-bold);
color: var(--kc-text);
margin: 0 0 var(--sp-4);
line-height: 1.3;
}
.kc-share-panel__title i { color: var(--kc-primary); }
.kc-share-panel__buttons {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--sp-3);
}
.kc-share-panel__buttons .kc-btn-share {
width: 100%;
min-width: 0;
height: 48px;
padding: var(--sp-2);
justify-content: center;
box-shadow: none;
}
.kc-share-panel__buttons .kc-btn-share:focus-visible {
outline: 2px solid var(--kc-primary);
outline-offset: 3px;
}
@media (max-width: 760px) {
.kc-share-panel__buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kc-article-nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--sp-3);
margin-top: var(--sp-8);
}
.kc-article-nav__next { margin-left: auto; }
/* ============================================================
Escuchar esta nota — reproductor de texto a voz (TTS)
Barra pill verde de marca · botones circulares blancos
============================================================ */
.kc-tts {
display: flex;
align-items: center;
gap: var(--sp-3);
background: var(--kc-primary);
border-radius: 999px;
padding: var(--sp-2) var(--sp-3);
margin: var(--sp-5) 0 var(--sp-6);
box-shadow: 0 6px 18px rgba(1, 73, 61, 0.22);
}
.kc-tts__btn {
width: 46px;
height: 46px;
border-radius: 50%;
background: #fff;
color: var(--kc-primary);
border: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
cursor: pointer;
flex-shrink: 0;
padding: 0;
}
.kc-tts__btn:hover { background: #e6f2ee; }
.kc-tts__btn:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.55); outline-offset: 2px; }
.kc-tts__btn i { pointer-events: none; }
.kc-tts__label {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: var(--sp-3);
color: #fff;
font-weight: var(--fw-bold);
font-size: 0.9rem;
padding-right: var(--sp-2);
white-space: nowrap;
}
.kc-tts__icon { font-size: 1.3rem; }
@media (max-width: 575.98px) {
.kc-tts { padding: var(--sp-2); gap: var(--sp-2); }
.kc-tts__btn { width: 42px; height: 42px; }
.kc-tts__label { font-size: 0.8rem; gap: var(--sp-2); }
.kc-tts__icon { font-size: 1.1rem; }
}
/* ============================================================
CATHEAD — encabezado de sección de categoría (ref. editorial):
nombre en MAYÚSCULAS + barrita del color de la categoría
montada sobre una línea gris que cruza todo el ancho.
============================================================ */
.kc-cathead {
padding: var(--sp-6) 0 0;
margin-bottom: var(--sp-5);
}
.kc-cathead__title {
font-family: var(--ff-sans);
font-size: var(--fs-xl); /* 20px */
font-weight: var(--fw-extrabold); /* 800 */
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--kc-text);
line-height: 1.1;
margin: 0 0 var(--sp-3);
}
.kc-cathead__line {
position: relative;
height: 1px;
background: var(--kc-border);
}
.kc-cathead__line span {
position: absolute;
left: 0;
top: -2px; /* centrada sobre la línea */
width: 56px;
height: 5px;
background: var(--kc-accent);
}
/* ============================================================
Sprint D — Barra de última hora
============================================================
Deliberadamente NO es sticky ni parpadea: una franja roja permanente deja de
significar «urgente» a los dos días. Se enciende desde el panel solo para
coberturas en vivo y se apaga cuando pasan.
Contraste verificado: blanco sobre --kc-red-700 (#c41510) = 6.07:1, por
encima del 4.5:1 que exige WCAG para texto normal.
============================================================ */
.kc-breaking {
display: block;
background: var(--kc-red-700);
color: var(--kc-white);
text-decoration: none;
border-bottom: 1px solid rgba(0, 0, 0, .2);
}
a.kc-breaking:hover { background: var(--kc-red-800); }
a.kc-breaking:focus-visible {
outline: 2px solid var(--kc-white);
outline-offset: -4px;
}
.kc-breaking__inner {
display: flex;
align-items: center;
gap: var(--sp-3);
padding-block: var(--sp-3);
min-height: 44px; /* objetivo táctil pleno */
color: var(--kc-white);
}
.kc-breaking__label {
flex: none;
display: inline-flex;
align-items: center;
background: var(--kc-white);
color: var(--kc-red-800);
font-family: var(--ff-sans);
font-size: var(--fs-xs);
font-weight: var(--fw-extrabold);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
padding: 3px var(--sp-3);
border-radius: var(--radius-sm);
white-space: nowrap;
}
.kc-breaking__text {
flex: 1;
min-width: 0;
font-family: var(--ff-sans);
font-size: var(--fs-base);
font-weight: var(--fw-bold);
line-height: 1.35;
}
.kc-breaking__more {
flex: none;
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
opacity: .9;
white-space: nowrap;
}
@media (max-width: 640px) {
.kc-breaking__inner { align-items: flex-start; gap: var(--sp-2); flex-wrap: wrap; }
.kc-breaking__text { font-size: var(--fs-sm); flex-basis: 100%; }
.kc-breaking__more { display: none; }
}
/* Sprint D — la firma del artículo lleva a la página del periodista */
.kc-article-meta__autor {
color: var(--kc-primary);
text-decoration: none;
font-weight: var(--fw-bold);
border-bottom: 1px solid transparent;
}
.kc-article-meta__autor:hover {
border-bottom-color: var(--kc-primary);
}
.kc-article-meta__autor:focus-visible {
outline: 2px solid var(--kc-primary);
outline-offset: 2px;
border-radius: 2px;
}
/* ============================================================
Sprint D — Aviso de vista previa
============================================================
Franja ámbar, no roja: no es un error, es un estado. Fija arriba porque el
editor puede hacer scroll y no debe olvidar en ningún momento que lo que ve
todavía no está publicado.
============================================================ */
.kc-previa {
position: sticky;
top: 0;
z-index: var(--z-header);
background: #a86200;
color: var(--kc-white);
border-bottom: 2px solid #7a4a00;
}
.kc-previa__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-3);
padding-block: var(--sp-3);
font-family: var(--ff-sans);
font-size: var(--fs-sm);
line-height: 1.4;
}
.kc-previa strong {
background: var(--kc-white);
color: #7a4a00;
padding: 3px var(--sp-3);
border-radius: var(--radius-sm);
font-size: var(--fs-xs);
font-weight: var(--fw-extrabold);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
.kc-previa__estado {
margin-left: auto;
font-weight: var(--fw-bold);
opacity: .95;
}
@media (max-width: 640px) {
.kc-previa__estado { margin-left: 0; flex-basis: 100%; }
}
/* ===== 08-widgets.css ===== */
/* ============================================================
kc/08-widgets.css — Sidebar widgets (TV, Radio, Clima)
============================================================ */
.kc-widget {
background: var(--kc-white);
border: 1px solid var(--kc-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.kc-widget__head {
background: var(--kc-primary);
color: var(--kc-white);
padding: 10px var(--sp-4);
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--ff-sans);
font-size: var(--fs-xs); /* 11px */
font-weight: var(--fw-bold); /* 700 */
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
line-height: 1;
}
.kc-widget__head i {
color: var(--kc-accent);
font-size: var(--fs-sm); /* 13px (matchea con label) */
}
.kc-widget__title {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
}
.kc-widget__live-dot {
width: 8px;
height: 8px;
background: var(--kc-live);
border-radius: var(--radius-full);
}
.kc-widget__body { padding: var(--sp-4); }
/* ============================================================
WIDGET TV EN VIVO
============================================================ */
.kc-widget--tv .kc-widget__head {
background: var(--kc-ink-900);
}
/* Badge "En vivo" del header del widget TV (a la derecha) */
.kc-tv-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--kc-red-600);
color: var(--kc-white);
border-radius: var(--radius-full);
padding: 3px 9px;
font-size: 10px;
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1;
}
.kc-tv-badge__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--kc-white);
animation: kc-tv-badge-pulse 1.6s ease-in-out infinite;
}
@keyframes kc-tv-badge-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.kc-widget--tv .kc-widget__body {
padding: 0;
background: var(--kc-black);
}
.kc-widget--tv iframe,
.kc-widget--tv video {
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
display: block;
}
.kc-live-loader {
position: relative;
aspect-ratio: 16 / 9;
background: #0a0a0c;
}
/* Antes de estar listo, el