/* ==========================================================================
   FEED MX Home — home.css
   Módulos editoriales de la portada. Paleta e identidad FEED MX.
   ========================================================================== */

:root {
	--fmx-navy:  #000A23;
	--fmx-blue:  #0075FE;
	--fmx-teal:  #00D4E6;
	--fmx-green: #01D296;
	--fmx-bg:    #F7F8FA;
	--fmx-ink:   #10142B;
	--fmx-muted: #6B7086;
	--fmx-mut2:  #9599AB;
	--fmx-line:  #E7E9EE;
	--fmx-line2: #E4E6ED;

	--fmx-font-head: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	--fmx-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

	--fmx-max: 1190px;
	--fmx-gap: 28px;
	--fmx-side: 320px;
	--fmx-radius: 16px;

	--fmx-stripes: repeating-linear-gradient(135deg, #E9ECF3 0, #E9ECF3 12px, #F3F5F9 12px, #F3F5F9 24px);
}

.fmx-container { max-width: var(--fmx-max); margin: 0 auto; padding: 0 24px; }

/* Base: vale dentro del renderer maestro (.fmx-home) y para módulos sueltos
   insertados por shortcode individual (.fmx-module). */
.fmx-home, .fmx-home *, .fmx-module, .fmx-module * { box-sizing: border-box; }
.fmx-home, .fmx-module {
	font-family: var(--fmx-font-body);
	color: var(--fmx-ink);
}
.fmx-home a, .fmx-module a { text-decoration: none; color: inherit; }

/* Rejilla de filas */
.fmx-row { margin: 22px 0; }
.fmx-row--split {
	display: grid;
	grid-template-columns: minmax(0,1fr) var(--fmx-side);
	gap: var(--fmx-gap);
	align-items: start;
}
.fmx-col { min-width: 0; }

/* Media placeholder */
.fmx-media--ph { background: var(--fmx-stripes) !important; }
[class$="__media"], [class*="__media "] { background-size: cover; background-position: center; }

/* Anuncios */
.fmx-ad { display: flex; justify-content: center; }
.fmx-ad--full, .fmx-ad--leader, .fmx-ad--billboard { margin: 0 auto; }

/* Botones */
.fmx-btn {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--fmx-font-head); font-weight: 700; font-size: 13px;
	border-radius: 999px; padding: 9px 16px; cursor: pointer; border: 1px solid transparent;
}
.fmx-btn--primary { background: var(--fmx-navy); color: #fff; }
.fmx-btn--ghost { background: #fff; color: var(--fmx-ink); border-color: var(--fmx-line2); }
.fmx-btn--ghost:hover { border-color: var(--fmx-blue); color: var(--fmx-blue); }

/* Kickers / encabezados de sección */
.fmx-kicker { font-family: var(--fmx-font-head); font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.fmx-section-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; }
.fmx-section-head__title { font-family: var(--fmx-font-head); font-weight: 800; font-size: 20px; margin: 0; display: flex; align-items: center; gap: 8px; }
.fmx-section-head__more { font-family: var(--fmx-font-head); font-weight: 700; font-size: 13px; color: var(--fmx-blue); }

/* ---------- Portada ----------
   La foto de la nota principal es el FONDO de toda la sección. Encima van el
   texto (izquierda, sobre velo oscuro) y las notas relacionadas (derecha, en
   panel translúcido con blur). */
.fmx-portada {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0,1.6fr) minmax(0,1fr);
	min-height: 470px;
	border-radius: var(--fmx-radius);
	overflow: hidden;
	background-color: var(--fmx-navy);
	background-size: cover;
	background-position: center;
	box-shadow: 0 26px 60px -18px rgba(0, 10, 35, .55);
}
.fmx-portada--noimg { background-image: var(--fmx-stripes); }

/* Velo: degradado de ABAJO hacia ARRIBA (oscuro abajo, foto limpia arriba).
   Un toque oscuro en el borde superior mantiene legible la categoría. */
.fmx-portada::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(0,10,35,.42) 0%,
		rgba(0,10,35,.10) 18%,
		rgba(0,10,35,.35) 45%,
		rgba(0,10,35,.80) 72%,
		rgba(0,10,35,.96) 100%
	);
}

/* Columna izquierda: categoría arriba, texto abajo. */
.fmx-hero {
	position: relative; z-index: 2;
	display: flex; flex-direction: column; justify-content: space-between;
	padding: 26px 32px 32px;
}
.fmx-hero__body { text-shadow: 0 1px 14px rgba(0,10,35,.6); }
.fmx-hero__cat { display: inline-flex; align-items: center; gap: 7px; font-family: var(--fmx-font-head); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; align-self: flex-start; text-shadow: 0 1px 10px rgba(0,10,35,.7); }
.fmx-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.fmx-hero__title { font-family: var(--fmx-font-head); font-weight: 800; font-size: 30px; line-height: 1.18; margin: 0 0 10px; }
.fmx-hero__excerpt { font-size: 15px; line-height: 1.5; margin: 0 0 14px; max-width: 92%; }
.fmx-hero__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.fmx-sep { opacity: .6; }

/* Color del texto del hero.
   Va con !important y alta especificidad a propósito: los temas (Blocksy y
   otros) estilan h2/p con reglas más específicas que la herencia del enlace,
   y el texto DEBE ser blanco por ir sobre la foto. */
.fmx-portada .fmx-hero,
.fmx-portada .fmx-hero__cat,
.fmx-portada .fmx-hero__title,
.fmx-portada .fmx-hero__meta { color: #fff !important; }
.fmx-portada .fmx-hero__excerpt { color: rgba(255,255,255,.93) !important; }
.fmx-portada .fmx-sec__title { color: #fff !important; }

/* Columna derecha: panel translúcido con blur, encima de la foto. */
.fmx-portada__side {
	position: relative; z-index: 2;
	display: flex; flex-direction: column; justify-content: center;
	padding: 10px 18px;
	background: rgba(0, 10, 35, .42);
	backdrop-filter: blur(16px) saturate(120%);
	-webkit-backdrop-filter: blur(16px) saturate(120%);
	border-left: 1px solid rgba(255, 255, 255, .14);
}
.fmx-sec {
	display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: center;
	padding: 11px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.fmx-sec:last-child { border-bottom: 0; }
.fmx-sec__media { width: 74px; height: 56px; border-radius: 8px; flex-shrink: 0; }
.fmx-portada a.fmx-sec { color: #fff; }
.fmx-sec__title { font-family: var(--fmx-font-head); font-weight: 700; font-size: 13.5px; line-height: 1.32; margin: 0 0 4px; color: #fff; }
.fmx-sec__cat { font-family: var(--fmx-font-head); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Blindaje de encabezados ----------
   Los temas (Blocksy y otros) aplican a h2–h4 su propio margin y
   display:flow-root, pisando lo nuestro. Aquí fijamos el espaciado real de
   cada título de módulo y restauramos el display necesario para el clamp. */
.fmx-module .fmx-hero__title  { margin: 0 0 10px !important; }
.fmx-module .fmx-sec__title   { margin: 0 0 4px !important; }
.fmx-module .fmx-hoy__title   { margin: 5px 0 0 !important; }
.fmx-module .fmx-tl__title    { margin: 0 0 5px !important; }
.fmx-module .fmx-explicado__q { margin: 0 0 10px !important; }
.fmx-module .fmx-cover__name  { margin: 0 !important; }
.fmx-module .fmx-rank__title {
	margin: 0 !important;
	display: -webkit-box !important;   /* necesario para -webkit-line-clamp */
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- Paneles (sidebar) ---------- */
.fmx-panel { background: #fff; border: 1px solid var(--fmx-line); border-radius: var(--fmx-radius); padding: 16px 18px; }
.fmx-panel__title { font-family: var(--fmx-font-head); font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.fmx-panel__more { display: inline-block; margin-top: 10px; font-family: var(--fmx-font-head); font-weight: 700; font-size: 12.5px; color: var(--fmx-blue); }

/* Lo más leído */
/* El panel llena el alto de su columna (queda a la altura de la Portada) y
   reparte los ítems de forma pareja. Si la columna no tiene alto definido,
   height:100% se resuelve como auto y conserva su alto natural compacto. */
.fmx-populares { display: flex; flex-direction: column; height: 100%; }
.fmx-populares .fmx-rank { flex: 1 1 auto; justify-content: space-between; }
.fmx-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fmx-rank__item { display: grid; grid-template-columns: 72px 1fr 18px; gap: 12px; align-items: center; }

/* Miniatura grande que hace de FONDO del número (mismo principio que la Portada). */
.fmx-rank__thumb {
	position: relative;
	width: 72px; height: 72px;
	border-radius: 10px;
	overflow: hidden;
	background-color: var(--fmx-navy);
	background-size: cover; background-position: center;
}
/* Velo inferior para que el número se lea sobre cualquier foto. */
.fmx-rank__thumb::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,10,35,0) 35%, rgba(0,10,35,.55) 65%, rgba(0,10,35,.9) 100%);
}
.fmx-rank__num {
	position: absolute; z-index: 2; left: 7px; bottom: 1px;
	font-family: var(--fmx-font-head); font-weight: 800; font-size: 27px; line-height: 1;
	color: #fff; text-shadow: 0 1px 8px rgba(0,10,35,.85);
}

/* Texto: título y categoría juntos (sin hueco). */
.fmx-rank__body { display: flex; flex-direction: column; gap: 3px; }
/* Máx. 2 líneas: evita que un titular largo dispare el alto del panel. */
.fmx-rank__title {
	font-family: var(--fmx-font-head); font-weight: 700; font-size: 12.8px; line-height: 1.28; margin: 0;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fmx-rank__cat { font-family: var(--fmx-font-head); font-weight: 700; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; line-height: 1; }
.fmx-trend { font-size: 17px; line-height: 1; text-align: center; }
.fmx-trend--up { color: var(--fmx-green); }
.fmx-trend--down { color: #E5484D; }
.fmx-trend--flat { color: var(--fmx-mut2); }

/* ---------- Ticker ---------- */
.fmx-ticker { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--fmx-line); border-radius: 12px; padding: 12px 16px; overflow: hidden; }
.fmx-ticker__label { flex-shrink: 0; font-family: var(--fmx-font-head); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 6px; }
.fmx-ticker__bolt { color: var(--fmx-blue); }
.fmx-ticker__viewport { flex: 1; overflow: hidden; }
.fmx-ticker__track { display: flex; gap: 28px; white-space: nowrap; will-change: transform; }
.fmx-ticker__item { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fmx-ink); }
.fmx-ticker__dot { color: var(--fmx-blue); }
.fmx-ticker__more { flex-shrink: 0; }
.fmx-ticker__more { font-family: var(--fmx-font-head); font-weight: 700; font-size: 12px; color: #fff; background: var(--fmx-navy); padding: 7px 14px; border-radius: 999px; }

/* ---------- Hoy en FEED MX ---------- */
.fmx-hoy__grid { display: grid; grid-template-columns: 0.9fr 1fr 1fr 1fr 1fr; gap: 18px; }
.fmx-hoy__claves { background: #fff; border: 1px solid var(--fmx-line); border-radius: var(--fmx-radius); padding: 18px; display: flex; flex-direction: column; }
.fmx-hoy__claves-kicker { font-family: var(--fmx-font-head); font-weight: 800; font-size: 15px; }
.fmx-hoy__claves-text { font-size: 13px; color: var(--fmx-muted); line-height: 1.5; margin: 10px 0 auto; }
.fmx-hoy__claves .fmx-btn { align-self: flex-start; margin-top: 14px; }
.fmx-hoy__card { display: block; }
.fmx-hoy__media { aspect-ratio: 16/10; border-radius: 12px; margin-bottom: 10px; }
.fmx-hoy__title { font-family: var(--fmx-font-head); font-weight: 700; font-size: 14.5px; line-height: 1.3; margin: 5px 0 0; }

/* ---------- En foco ---------- */
.fmx-enfoco__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fmx-cover { display: block; border-radius: var(--fmx-radius); overflow: hidden; background: #fff; border: 1px solid var(--fmx-line); border-top: 4px solid var(--fmx-cover, var(--fmx-blue)); }
.fmx-cover__media { position: relative; aspect-ratio: 16/9; display: flex; align-items: flex-end; padding: 14px; background-size: cover; background-position: center; }
.fmx-cover__name { position: relative; z-index: 2; color: #fff; font-family: var(--fmx-font-head); font-weight: 800; font-size: 16px; line-height: 1.15; }
.fmx-cover__body { padding: 14px 16px 16px; }
.fmx-cover__count { display: block; font-size: 12.5px; color: var(--fmx-muted); margin-bottom: 12px; }
.fmx-btn--cover { font-family: var(--fmx-font-head); font-weight: 700; font-size: 12px; color: #fff; background: var(--fmx-cover, var(--fmx-blue)); padding: 8px 14px; border-radius: 999px; }

/* ---------- Lo más reciente (timeline) ---------- */
.fmx-timeline { display: flex; flex-direction: column; }
.fmx-tl { display: grid; grid-template-columns: 48px 96px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--fmx-line); }
.fmx-tl__time { text-align: center; }
.fmx-tl__value { display: block; font-family: var(--fmx-font-head); font-weight: 800; font-size: 22px; color: var(--fmx-blue); line-height: 1; }
.fmx-tl__unit { font-size: 11px; color: var(--fmx-mut2); text-transform: uppercase; }
.fmx-tl__media { width: 96px; height: 66px; border-radius: 10px; }
.fmx-tl__title { font-family: var(--fmx-font-head); font-weight: 700; font-size: 16px; line-height: 1.3; margin: 0 0 5px; }
.fmx-tl__excerpt { font-size: 13px; color: var(--fmx-muted); line-height: 1.45; margin: 0; }
.fmx-tl__cat { font-family: var(--fmx-font-head); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.fmx-recientes__more { margin-top: 16px; }

/* ---------- Explicado ---------- */
.fmx-explicado { border: 1px solid var(--fmx-line); }
.fmx-explicado__q { font-family: var(--fmx-font-head); font-weight: 800; font-size: 16px; line-height: 1.3; margin: 0 0 10px; }
.fmx-explicado__a { font-size: 13.5px; color: var(--fmx-muted); line-height: 1.5; margin: 0 0 14px; }
.fmx-explicado__foot { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.fmx-explicado__time { font-size: 12px; color: var(--fmx-mut2); }

/* ---------- Newsletter ---------- */
.fmx-newsletter { background: #fff; border: 1px solid var(--fmx-line); border-radius: var(--fmx-radius); padding: 22px; }
.fmx-newsletter__title { font-family: var(--fmx-font-head); font-weight: 800; font-size: 18px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.fmx-newsletter__text { font-size: 14px; color: var(--fmx-muted); margin: 0 0 14px; }
.fmx-newsletter__form { display: flex; gap: 10px; }
.fmx-newsletter__input { flex: 1; border: 1px solid var(--fmx-line2); border-radius: 999px; padding: 11px 16px; font-size: 14px; font-family: var(--fmx-font-body); }
.fmx-newsletter__legal { font-size: 12px; color: var(--fmx-mut2); margin: 10px 0 0; }
.fmx-newsletter__ok { font-weight: 600; color: var(--fmx-green); }

/* ---------- Redes ---------- */
.fmx-redes__title { font-family: var(--fmx-font-head); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px; }
.fmx-redes__list { display: flex; gap: 10px; flex-wrap: wrap; }
.fmx-redes__link { width: 38px; height: 38px; border-radius: 50%; background: var(--fmx-navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.fmx-redes__link:hover { background: var(--fmx-blue); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.fmx-row--split { grid-template-columns: 1fr; }
	.fmx-col--side { --fmx-side: auto; }
	.fmx-portada { grid-template-columns: 1fr; min-height: 0; }
	.fmx-portada__side { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
	.fmx-hoy__grid { grid-template-columns: 1fr 1fr 1fr; }
	.fmx-enfoco__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
	.fmx-container { padding: 0 16px; }
	.fmx-hero { min-height: 320px; padding: 22px; }
	.fmx-hero__title { font-size: 24px; }
	.fmx-hoy__grid { grid-template-columns: 1fr 1fr; }
	.fmx-enfoco__grid { grid-template-columns: 1fr; }
	.fmx-ticker { flex-wrap: wrap; }
	.fmx-ticker__viewport { order: 3; width: 100%; overflow-x: auto; }
	.fmx-tl { grid-template-columns: 40px 72px 1fr; }
	.fmx-tl__cat { display: none; }
	.fmx-newsletter__form { flex-direction: column; }
	.fmx-newsletter__input { width: 100%; }
}