/* Bloques de noticias: Entradas, Datos y Contenido de la entrada, Compartir, Titulares y Radio.
 * Toman colores y fuentes del kit; cada bloque los ajusta con variables. */

.mango-posts {
	--mango-posts-cols: 3;
	--mango-posts-gap: 24px;
	--mango-post-ratio: 16/10;
	--mango-post-radius: 4px;
	--mango-post-accent: var(--mango-color-primary, #111);
	--mango-post-accent-text: #fff;
	display: grid;
	grid-template-columns: repeat(var(--mango-posts-cols), minmax(0, 1fr));
	gap: var(--mango-posts-gap);
}

.mango-post { position: relative; display: flex; flex-direction: column; min-width: 0; }
.mango-post-media { display: block; overflow: hidden; border-radius: var(--mango-post-radius); background: #e9e9e9; }
.mango-post-media img { display: block; width: 100%; height: 100%; aspect-ratio: var(--mango-post-ratio); object-fit: cover; transition: transform .5s ease; }
.mango-post:hover .mango-post-media img { transform: scale(1.04); }
.mango-post-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 14px; }
.mango-post-title { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.mango-post-title a { color: inherit; text-decoration: none; }
.mango-post-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mango-post-excerpt { margin: 0; font-size: .95rem; line-height: 1.5; opacity: .8; }
.mango-post-meta { font-size: .8rem; opacity: .65; }

.mango-post-cat {
	display: inline-block;
	padding: 4px 9px;
	background: var(--mango-post-accent);
	color: var(--mango-post-accent-text) !important;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
}

/* Texto sobre la foto (destacado y rejilla «overlay») */
.mango-posts.is-mosaic .mango-post,
.mango-posts.is-overlay .mango-post { overflow: hidden; border-radius: var(--mango-post-radius); background: #111; color: #fff; }
.mango-posts.is-mosaic .mango-post-media,
.mango-posts.is-overlay .mango-post-media { position: absolute; inset: 0; border-radius: 0; }
.mango-posts.is-mosaic .mango-post-media img,
.mango-posts.is-overlay .mango-post-media img { aspect-ratio: auto; }
.mango-posts.is-mosaic .mango-post-media::after,
.mango-posts.is-overlay .mango-post-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.85) 100%); }
.mango-posts.is-mosaic .mango-post-body,
.mango-posts.is-overlay .mango-post-body { position: relative; z-index: 1; justify-content: flex-end; height: 100%; padding: 18px; pointer-events: none; }
.mango-posts.is-mosaic .mango-post-body a,
.mango-posts.is-overlay .mango-post-body a { pointer-events: auto; }
.mango-posts.is-mosaic .mango-post-meta,
.mango-posts.is-overlay .mango-post-meta { opacity: .85; }
.mango-posts.is-mosaic .no-image,
.mango-posts.is-overlay .no-image { background: #222; }

.mango-posts.is-overlay .mango-post { aspect-ratio: var(--mango-post-ratio); }
.mango-posts.is-overlay .mango-post-body { min-height: 100%; }

.mango-posts.is-mosaic { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: minmax(190px, 1fr); }
.mango-posts.is-mosaic .mango-post { min-height: 190px; }
.mango-posts.is-mosaic .mango-post.is-lead { grid-row: span 2; min-height: 420px; }
.mango-posts.is-mosaic .mango-post.is-lead .mango-post-body { padding: 28px; }
.mango-posts.is-mosaic .mango-post.is-lead .mango-post-title { font-size: clamp(1.5rem, 2.4vw, 2.3rem); line-height: 1.12; }
.mango-posts.is-mosaic .mango-post:not(.is-lead) .mango-post-title { font-size: 1rem; }

/* Lista con miniatura */
.mango-posts.is-list .mango-post { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: 14px; align-items: start; }
.mango-posts.is-list .mango-post.no-image { grid-template-columns: minmax(0, 1fr); }
.mango-posts.is-list .mango-post-body { padding-top: 0; gap: 6px; }
.mango-posts.is-list .mango-post-title { font-size: 1rem; }

/* Titulares numerados */
.mango-posts.is-headlines { counter-reset: none; }
.mango-posts.is-headlines .mango-post { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding-bottom: var(--mango-posts-gap); border-bottom: 1px solid rgba(127,127,127,.25); }
.mango-posts.is-headlines .mango-post:last-child { border-bottom: 0; padding-bottom: 0; }
.mango-posts.is-headlines .mango-post-body { padding-top: 0; gap: 6px; }
.mango-posts.is-headlines .mango-post-num { color: var(--mango-post-accent); font-size: 2.2rem; font-weight: 700; line-height: .9; min-width: 1.3em; }
.mango-posts.is-headlines .mango-post-title { font-size: 1rem; }

.mango-posts-empty { margin: 0; padding: 18px; border: 1px dashed rgba(127,127,127,.4); border-radius: 8px; opacity: .7; font-size: .9rem; }

.mango-posts-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 36px; }
.mango-posts-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 14px; border: 1px solid rgba(127,127,127,.3); color: inherit; font-weight: 600; text-decoration: none; }
.mango-posts-pagination .page-numbers.current { background: var(--mango-color-primary, #111); border-color: transparent; color: #fff; }
.mango-posts-pagination a.page-numbers:hover { border-color: currentColor; }

@media (max-width: 1024px) {
	.mango-posts.is-mosaic { grid-template-columns: 1fr 1fr; }
	.mango-posts.is-mosaic .mango-post.is-lead { grid-column: 1 / -1; grid-row: auto; min-height: 380px; }
}

@media (max-width: 767px) {
	.mango-posts { grid-template-columns: minmax(0, 1fr); }
	.mango-posts.is-mosaic { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
	.mango-posts.is-mosaic .mango-post.is-lead { min-height: 340px; }
	.mango-posts.is-mosaic .mango-post:not(.is-lead) { min-height: 0; display: grid; grid-template-columns: 34% minmax(0, 1fr); gap: 12px; background: none; color: inherit; overflow: visible; }
	.mango-posts.is-mosaic .mango-post:not(.is-lead) .mango-post-media { position: relative; border-radius: var(--mango-post-radius); }
	.mango-posts.is-mosaic .mango-post:not(.is-lead) .mango-post-media img { aspect-ratio: 1/1; }
	.mango-posts.is-mosaic .mango-post:not(.is-lead) .mango-post-media::after { display: none; }
	.mango-posts.is-mosaic .mango-post:not(.is-lead) .mango-post-body { padding: 0; gap: 6px; }
	.mango-posts.is-list .mango-post { grid-template-columns: 34% minmax(0, 1fr); }
}

/* Datos de la entrada */
.mango-post-info { --mango-post-accent: var(--mango-color-primary, #111); --mango-post-accent-text: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: .9rem; }
.mango-post-info-items { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; opacity: .75; }
.mango-post-info-sep { opacity: .6; }

/* Imagen destacada */
.mango-featured { margin: 0; }
.mango-featured img { display: block; width: 100%; height: auto; object-fit: cover; }
.mango-featured figcaption { margin-top: 8px; font-size: .85rem; opacity: .7; }

/* Contenido de la entrada */
.mango-post-content { font-size: 1.12rem; line-height: 1.75; overflow-wrap: break-word; }
.mango-post-content > * + * { margin-top: 1.1em; }
.mango-post-content > :first-child { margin-top: 0; }
.mango-post-content :is(h2, h3, h4) { margin-top: 1.8em; line-height: 1.2; }
.mango-post-content img, .mango-post-content iframe, .mango-post-content video { max-width: 100%; height: auto; }
.mango-post-content iframe[src*="youtube"], .mango-post-content iframe[src*="vimeo"] { width: 100%; aspect-ratio: 16/9; }
.mango-post-content figure { margin-left: 0; margin-right: 0; }
.mango-post-content figcaption { font-size: .85rem; opacity: .7; }
.mango-post-content blockquote { margin-left: 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--mango-color-primary, #111); font-size: 1.2em; font-style: italic; }
.mango-post-content a { text-decoration: underline; text-underline-offset: 3px; }
.mango-post-content.has-drop-cap > p:first-of-type::first-letter { float: left; margin: .08em .1em 0 0; font-size: 3.6em; font-weight: 700; line-height: .8; }

/* Compartir */
.mango-share { --mango-share-size: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mango-share-label { margin-right: 4px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mango-share a, .mango-share button { display: inline-flex; align-items: center; justify-content: center; width: var(--mango-share-size); height: var(--mango-share-size); padding: 0; border: 0; border-radius: 50%; background: #111; color: #fff; cursor: pointer; transition: transform .2s ease, opacity .2s ease; }
@media (max-width: 767px) { .mango-share { --mango-share-size: 36px; gap: 6px; } }
.mango-share a:hover, .mango-share button:hover { transform: translateY(-2px); opacity: .9; }
.mango-share svg { width: 46%; height: 46%; }
.mango-share.is-brand .is-whatsapp { background: #25d366; }
.mango-share.is-brand .is-facebook { background: #1877f2; }
.mango-share.is-brand .is-x { background: #000; }
.mango-share.is-brand .is-telegram { background: #229ed9; }
.mango-share.is-brand .is-linkedin { background: #0a66c2; }
.mango-share.is-brand .mango-share-copy { background: #6b7280; }
.mango-share-copy.is-done { background: #16a34a !important; }

/* Titulares en movimiento */
.mango-ticker { display: flex; align-items: stretch; overflow: hidden; background: #fff; font-size: .9rem; }
.mango-ticker-label { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 0 14px; background: var(--mango-color-primary, #111); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mango-ticker-viewport { display: flex; flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.mango-ticker-track { display: flex; flex: 0 0 auto; gap: 0; margin: 0; padding: 0; list-style: none; animation: mango-ticker var(--mango-ticker-speed, 60s) linear infinite; }
.mango-ticker:hover .mango-ticker-track, .mango-ticker:focus-within .mango-ticker-track { animation-play-state: paused; }
.mango-ticker-track li { display: flex; align-items: center; white-space: nowrap; }
.mango-ticker-track li::after { content: "•"; margin: 0 18px; opacity: .45; }
.mango-ticker-track a { padding: 10px 0; color: inherit; text-decoration: none; }
.mango-ticker-track a:hover { text-decoration: underline; }
@keyframes mango-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .mango-ticker-track { animation: none; } .mango-ticker-viewport { overflow-x: auto; } }

/* Radio en vivo */
.mango-radio { --mango-radio-accent: var(--mango-color-primary, #f97316); --mango-radio-bg: transparent; display: inline-flex; align-items: center; gap: 12px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--mango-radio-bg); }
.mango-radio-toggle { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--mango-radio-accent); color: #fff; cursor: pointer; box-shadow: 0 0 0 0 color-mix(in srgb, var(--mango-radio-accent) 55%, transparent); animation: mango-radio-glow 2.4s ease-out infinite; }
.mango-radio-toggle svg { width: 20px; height: 20px; }
.mango-radio-toggle .is-pause, .mango-radio.is-playing .mango-radio-toggle .is-play { display: none; }
.mango-radio.is-playing .mango-radio-toggle .is-pause { display: block; }
.mango-radio.is-playing .mango-radio-toggle { animation: none; }
.mango-radio-spin { position: absolute; inset: -3px; display: none; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: mango-radio-spin .8s linear infinite; }
.mango-radio.is-loading .mango-radio-spin { display: block; }
.mango-radio-text { display: flex; flex-direction: column; line-height: 1.2; }
.mango-radio-text strong { font-size: .95rem; }
.mango-radio-text small { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; letter-spacing: .06em; opacity: .75; text-transform: uppercase; }
.mango-radio-live { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: mango-radio-blink 1.4s ease-in-out infinite; }
.mango-radio-bars { display: none; align-items: flex-end; gap: 2px; height: 16px; }
.mango-radio.is-playing .mango-radio-bars { display: inline-flex; }
.mango-radio-bars i { width: 3px; height: 30%; background: var(--mango-radio-accent); animation: mango-radio-bar .9s ease-in-out infinite alternate; }
.mango-radio-bars i:nth-child(2) { animation-delay: -.3s; }
.mango-radio-bars i:nth-child(3) { animation-delay: -.6s; }
.mango-radio-bars i:nth-child(4) { animation-delay: -.15s; }
.mango-radio.is-card { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 36px 24px; border-radius: 20px; text-align: center; }
.mango-radio.is-card .mango-radio-toggle { width: 84px; height: 84px; }
.mango-radio.is-card .mango-radio-toggle svg { width: 36px; height: 36px; }
.mango-radio.is-card .mango-radio-text { align-items: center; }
.mango-radio.is-card .mango-radio-text strong { font-size: 1.4rem; }
@media (max-width: 767px) {
	.mango-radio.is-sticky-mobile { position: fixed; right: 12px; bottom: 12px; left: 12px; z-index: 999; justify-content: flex-start; padding: 8px 18px 8px 8px; background: #111; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
	.mango-radio.is-sticky-mobile .mango-radio-bars { margin-left: auto; }
}
@keyframes mango-radio-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mango-radio-accent) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes mango-radio-spin { to { transform: rotate(360deg); } }
@keyframes mango-radio-blink { 50% { opacity: .3; } }
@keyframes mango-radio-bar { from { height: 25%; } to { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .mango-radio-toggle, .mango-radio-live, .mango-radio-bars i { animation: none; } }

/* Navegación continua: barra de carga arriba mientras llega la página nueva */
.mango-soft-progress { position: fixed; top: 0; left: 0; z-index: 100000; width: 0; height: 3px; background: var(--mango-color-primary, #f97316); box-shadow: 0 0 8px var(--mango-color-primary, #f97316); opacity: 0; transition: width .3s ease, opacity .3s ease; pointer-events: none; }
.mango-soft-progress.is-on { width: 80%; opacity: 1; transition: width 6s cubic-bezier(.1, .7, .2, 1), opacity .1s; }