/* ==========================================================================
   Notixnews · componentes de portada y listados.
   ========================================================================== */

/* Fondo de reemplazo cuando una nota no tiene imagen */
.ph {
	position: relative; display: block; width: 100%; height: 100%; overflow: hidden;
	background-color: #DCE7F7;
	background-image:
		linear-gradient(rgba(31, 111, 224, .09) 1px, transparent 1px),
		linear-gradient(90deg, rgba(31, 111, 224, .09) 1px, transparent 1px),
		radial-gradient(circle at 70% 30%, rgba(79, 212, 255, .55), transparent 60%),
		radial-gradient(circle at 15% 85%, rgba(31, 111, 224, .25), transparent 55%);
	background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%;
}
.media-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph, .media-img { transition: transform 1.2s var(--ease); }

/* Portada: nota principal + lateral */
.hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; margin-top: 28px; }
.side { display: flex; flex-direction: column; min-width: 0; }
.lead {
	position: relative; min-height: 580px; overflow: hidden;
	display: flex; flex-direction: column; justify-content: flex-end;
	background: var(--s2); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: 0 30px 60px -36px rgba(11, 27, 58, .5);
}
.lead-media { position: absolute; inset: 0; }
.lead:hover .ph, .lead:hover .media-img { transform: scale(1.04); }
.lead-fade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(11, 27, 58, .55) 55%, rgba(11, 27, 58, .92) 85%); }
.lead-body { position: relative; padding: 36px; display: flex; flex-direction: column; gap: 16px; }
.lead .chip { background: rgba(79, 212, 255, .18); color: #A6EBFF; border-color: rgba(79, 212, 255, .45); }
.lead-t { font: 700 clamp(28px, 3.4vw, 50px)/1.08 var(--f-display); letter-spacing: -.02em; margin: 0; max-width: 22ch; }
.lead-t a { color: #fff; text-decoration: none; }
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.lead .bajada { color: #D5E0F2; }
.lead .meta { color: #B8C6DF; }
.lead-actions { position: relative; z-index: 2; margin-top: 6px; }

/* Anillos de señal (motivo del logo) */
.rings { position: absolute; right: 9%; top: 10%; width: 300px; height: 300px; pointer-events: none; }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(31, 111, 224, .5); opacity: 0; animation: ripple 3.6s cubic-bezier(.2, .6, .3, 1) infinite; }
.ring.r2 { animation-delay: 1.2s; }
.ring.r3 { animation-delay: 2.4s; }
.core {
	position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px;
	display: grid; place-items: center; color: #fff; border-radius: 24px;
	background: linear-gradient(145deg, #4BA3FF, #1352B8);
	box-shadow: 0 8px 0 var(--blue-dd), 0 0 60px rgba(79, 212, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .5);
	transform: rotate(-8deg); animation: float 5s ease-in-out infinite;
}

/* Panel lateral: lo más leído */
.panel {
	background: var(--s1); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
	box-shadow: 0 24px 50px -36px rgba(11, 27, 58, .45);
}
.panel + .panel { margin-top: 20px; }
.panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rank { list-style: none; margin: 0; padding: 0; }
.rank-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--tx); }
.rank-item:hover { color: var(--tx); }
.rank-n { font: 800 38px/1 var(--f-display); color: transparent; -webkit-text-stroke: 1.5px var(--blue); transition: color .3s, text-shadow .3s; }
.rank-t { font: 700 16px/1.35 var(--f-body); transition: transform .3s var(--ease), color .3s; }
.rank-item:hover .rank-n { color: var(--blue); text-shadow: 0 0 24px rgba(79, 212, 255, .8); }
.rank-item:hover .rank-t { transform: translateX(6px); color: var(--blue); }

/* Encabezado de bloque */
.block { margin-top: 80px; }
.sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.more { display: inline-flex; align-items: center; gap: 8px; font: 700 14px var(--f-body); text-decoration: none; color: var(--blue); }
.more .ico { transition: transform .3s; }
.more:hover .ico { transform: translateX(5px); }

/* Tarjetas con inclinación 3D */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card { perspective: 1000px; }
.card-in {
	position: relative; height: 100%; overflow: hidden;
	display: flex; flex-direction: column; text-decoration: none; color: var(--tx);
	background: var(--s1); border: 1px solid var(--line); border-radius: 20px;
	box-shadow: 0 20px 40px -32px rgba(11, 27, 58, .45);
	transition: transform .5s var(--ease), box-shadow .5s, border-color .5s;
}
.card-in::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(115deg, transparent 35%, rgba(79, 212, 255, .18) 50%, transparent 65%);
	transform: translateX(-110%); transition: transform .9s var(--ease);
}
.card-in:hover { color: var(--tx); transform: rotateX(3deg) rotateY(-5deg) translateY(-8px); box-shadow: 0 34px 60px -24px rgba(31, 111, 224, .45); border-color: rgba(31, 111, 224, .4); }
.card-in:hover::after { transform: translateX(110%); }
.card-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }

/* Marca "Video" */
.vid-badge {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
	font: 700 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #fff;
	background: linear-gradient(180deg, #4BA3FF, #1F6FE0); box-shadow: 0 3px 0 var(--blue-d);
}
.card-media .vid-badge { position: absolute; left: 14px; bottom: 14px; }
.lead-chips { gap: 10px; }
.card-in:hover .ph, .card-in:hover .media-img { transform: scale(1.06); }
.card-b { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.card-t { font: 700 20px/1.3 var(--f-body); margin: 0; }

/* Newsletter */
.band {
	position: relative; overflow: hidden; margin-top: 88px; padding: 56px;
	display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center;
	color: #fff; border-radius: 28px; background: linear-gradient(135deg, #2E8BFF, #1452C4);
	box-shadow: 0 8px 0 var(--blue-dd), 0 40px 70px -40px rgba(20, 82, 196, .8);
}
.band .rings { right: -60px; top: -60px; width: 360px; height: 360px; }
.band .ring { border-color: rgba(255, 255, 255, .55); }
.band-copy, .band-form { position: relative; }
.band .kicker { color: #BFEFFF; }
.band-t { font-size: 36px; }
.band .bajada { color: #E3EEFF; margin-top: 14px; }
.band a { color: #fff; }
.form { display: flex; gap: 12px; flex-wrap: wrap; }
.lbl { display: block; width: 100%; margin-bottom: -2px; font: 700 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #D7E6FF; }
.inp {
	flex: 1 1 220px; min-width: 0; height: 52px; padding: 0 18px;
	font: 500 16px var(--f-body); color: var(--tx);
	background: #fff; border: 1px solid rgba(255, 255, 255, .6); border-radius: 14px; outline: none;
	box-shadow: inset 0 2px 4px rgba(11, 27, 58, .12); transition: box-shadow .2s;
}
.inp:focus { box-shadow: 0 0 0 4px rgba(191, 239, 255, .6); }
.team-note { margin: 0; padding: 16px; border: 1.5px dashed rgba(255, 255, 255, .6); border-radius: 14px; font: 500 14px/1.5 var(--f-body); }

/* Videos cortos */
.shorts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.short {
	position: relative; aspect-ratio: 9 / 14; overflow: hidden;
	display: flex; flex-direction: column; justify-content: flex-end;
	color: #fff; text-decoration: none; border: 1px solid var(--line); border-radius: 22px;
	box-shadow: 0 20px 40px -30px rgba(11, 27, 58, .5);
	transition: transform .45s var(--ease), box-shadow .45s;
}
.short > .ph, .short > .media-img { position: absolute; inset: 0; }
.short:hover { color: #fff; transform: translateY(-10px) scale(1.02); box-shadow: 0 30px 50px -20px rgba(31, 111, 224, .45); }
.short:hover .ph, .short:hover .media-img { transform: scale(1.08); }
.play {
	position: absolute; left: 50%; top: 44%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
	display: grid; place-items: center; color: #fff; border-radius: 50%;
	background: linear-gradient(180deg, #4BA3FF, #1F6FE0);
	box-shadow: 0 6px 0 var(--blue-d), 0 0 40px rgba(79, 212, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .5);
	transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.short:hover .play { transform: scale(1.15); }
.short-b { position: relative; padding: 18px; display: flex; flex-direction: column; gap: 6px; background: linear-gradient(transparent, rgba(11, 27, 58, .9) 45%); }
.short-t { font: 700 16px/1.3 var(--f-body); }
.short-b .meta { color: #C8D4EA; }

/* Archivo mensual */
.arch { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.years { display: flex; flex-direction: column; gap: 14px; }
.yr { justify-content: space-between; width: 100%; }
.yr-c { font: 600 12px var(--f-mono); opacity: .8; }
.months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.months[hidden] { display: none; }
.mo {
	display: flex; flex-direction: column; gap: 8px; padding: 18px; min-height: 44px;
	color: var(--tx); text-decoration: none;
	background: linear-gradient(180deg, #FFFFFF, #F3F7FC); border: 1px solid var(--key); border-radius: 18px;
	box-shadow: 0 5px 0 var(--edge), 0 14px 24px -18px rgba(11, 27, 58, .4);
	transition: transform .14s var(--press), box-shadow .14s, background .2s;
}
a.mo:hover { color: var(--tx); transform: translateY(-3px); box-shadow: 0 8px 0 var(--edge), 0 0 26px rgba(79, 212, 255, .4); }
a.mo:active { transform: translateY(5px); box-shadow: 0 0 0 var(--edge); }
.mo.on { color: #fff; background: linear-gradient(180deg, #4BA3FF, #1F6FE0); border-color: var(--blue-d); box-shadow: 0 5px 0 var(--blue-d), 0 16px 28px -10px rgba(46, 139, 255, .6); }
.mo.on:hover { color: #fff; }
.mo.is-empty { opacity: .5; box-shadow: 0 2px 0 var(--edge); }
.mo-n { font: 700 17px var(--f-display); }
.mo-c { font: 500 13px var(--f-mono); color: var(--mu); }
.mo.on .mo-c { color: #E3EEFF; }
.arch-res {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	margin-top: 24px; padding: 18px 22px; background: #fff; border: 1px solid var(--line); border-radius: 18px;
}
.arch-label { font: 700 16px var(--f-body); }

/* Contador de visitas */
.stats {
	margin-top: 88px; padding: 36px;
	background: #fff; border: 1px solid var(--line); border-radius: 28px;
	box-shadow: 0 30px 60px -44px rgba(11, 27, 58, .5);
}
.stats-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.stat-g { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.stat {
	display: flex; flex-direction: column; gap: 12px; padding: 18px;
	background: var(--s2); border: 1px solid var(--line); border-radius: 18px;
	transition: transform .4s var(--ease), box-shadow .4s;
}
.stat:hover { transform: translateY(-5px); box-shadow: 0 20px 34px -20px rgba(31, 111, 224, .5); }
.stat-l { display: flex; align-items: center; gap: 8px; font: 700 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mu); }
.stat-l .dot { background: #1F9D55; }
.stat.total { background: linear-gradient(145deg, #2E8BFF, #1452C4); border-color: var(--blue-d); box-shadow: 0 6px 0 var(--blue-dd); }
.stat.total .stat-l { color: #E3EEFF; }
.odo-d { display: flex; gap: 3px; flex-wrap: nowrap; }
.odo-d i {
	display: grid; place-items: center; flex: 1 1 0; min-width: 0; max-width: 24px; height: 32px;
	font: 700 16px var(--f-mono); font-style: normal; color: var(--tx);
	background: #fff; border: 1px solid var(--key); border-radius: 7px; box-shadow: 0 3px 0 var(--edge);
}
.stats.in .odo-d i { animation: roll .7s var(--ease) both; }
.odo-d i:nth-child(2) { animation-delay: .06s; } .odo-d i:nth-child(3) { animation-delay: .12s; }
.odo-d i:nth-child(4) { animation-delay: .18s; } .odo-d i:nth-child(5) { animation-delay: .24s; }
.odo-d i:nth-child(6) { animation-delay: .3s; } .odo-d i:nth-child(7) { animation-delay: .36s; }
.stat.total .odo-d i { color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); box-shadow: 0 3px 0 var(--blue-dd); }

/* Encabezado de página y estados vacíos */
.page-head { margin: 40px 0 8px; display: flex; flex-direction: column; gap: 10px; }
.page-head .kicker { margin: 0; }
.page-title { font: 700 clamp(30px, 4vw, 52px)/1.08 var(--f-display); letter-spacing: -.02em; margin: 0; }
.page-head .search-form { margin-top: 12px; max-width: 720px; }
.list-cards { margin-top: 32px; }
.empty-state, .not-found {
	position: relative; overflow: hidden; margin-top: 40px; padding: 48px;
	display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
	background: #fff; border: 1px solid var(--line); border-radius: 28px;
}
.not-found { padding: 72px 48px; }
.not-found .search-form { width: 100%; max-width: 640px; }

/* Paginación 3D */
.pager { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 48px; }
.pager .page-numbers, .pager > a, .pager > span {
	display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px;
	font: 700 14px var(--f-mono); color: var(--tx); text-decoration: none;
	background: linear-gradient(180deg, #FFFFFF, #F2F5FB); border: 1px solid var(--key); border-radius: 12px;
	box-shadow: 0 4px 0 var(--edge); transition: transform .12s var(--press), box-shadow .12s, color .2s;
}
.pager a:hover { color: var(--blue); transform: translateY(-2px); box-shadow: 0 6px 0 var(--edge); }
.pager a:active { transform: translateY(4px); box-shadow: 0 0 0 var(--edge); }
.pager .current { color: #fff; background: linear-gradient(180deg, #4BA3FF, #1F6FE0); border-color: var(--blue-d); box-shadow: 0 4px 0 var(--blue-d); }

/* Responsive */
@media (max-width: 1000px) {
	.hero, .band, .arch { grid-template-columns: minmax(0, 1fr); }
	.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.shorts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.months, .stat-g { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.years { flex-direction: row; flex-wrap: wrap; }
	.yr { width: auto; }
	.rings { width: 180px; height: 180px; }
}
@media (max-width: 640px) {
	.cards { grid-template-columns: minmax(0, 1fr); }
	.months, .stat-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lead { min-height: 520px; }
	.lead-body { padding: 22px; }
	.band, .stats, .empty-state, .not-found { padding: 26px; }
	.block { margin-top: 56px; }
	.sec-h { align-items: flex-start; flex-direction: column; }
}