/* 03 · Novedades — «Deslizamiento editorial» (1.11.1). Solo en la portada, después de home.css. Sin WebGL, canvas ni librerías.
   Contrato con Entrada: NO toca el fondo de la sección ni el opacity/transform de .container (los controla entrada.css); solo LEE --nq.
   La geometría (--fw, --ih, --gap, --bleed, --fade, --ovs) la escribe novedades.js en .cine. */

.section--novedades { overflow-x: hidden; overflow-x: clip; }

.nov-head { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; margin-bottom: clamp(16px, 3vw, 32px); }
.nov-head .kicker { grid-column: 1; grid-row: 1; margin: 0; }
.nov-head .section__title { grid-column: 1 / -1; grid-row: 2; margin: 8px 0 0; font-size: clamp(1.625rem, 7.4vw, 2rem); }
.nov-all { grid-column: 2; grid-row: 1; min-height: 44px; font-size: 0.9375rem; font-weight: 600; color: var(--muted); }
.nov-all:hover { color: var(--text); }
.nov-all__more { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@property --hov { syntax: "<number>"; inherits: true; initial-value: 1; }

.cine { position: relative; --r: 16px; --gap: 12px; }
.cine__viewport { position: relative; margin-inline: calc(-1 * var(--bleed, 0px)); padding-inline: var(--bleed, 0px); touch-action: pan-y; -webkit-user-select: none; user-select: none; transition: opacity 200ms var(--ease-standard);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade, 0px), #000 calc(100% - var(--fade, 0px)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade, 0px), #000 calc(100% - var(--fade, 0px)), transparent 100%); }
.cine__viewport.is-dim { opacity: 0; transition-duration: 120ms; transition-timing-function: var(--ease-in); }
.cine__track { position: relative; display: flex; align-items: flex-start; gap: var(--gap); }
.cine.is-moving .cine__track, .cine.is-moving .cine__img { will-change: transform; }
.cine__frame { position: relative; flex: 0 0 var(--fw, 86%); min-width: 0; transition: --hov 300ms var(--ease-standard); }
.cine__frame:not(.is-active) { cursor: pointer; }
@media (hover: hover) { .cine__frame:not(.is-active):hover { --hov: 0.72; } }
/* Llegada desde Entrada: las vecinas entran desde fuera mientras --nq va de 0 a 1 (función del scroll; sin autoplay ni oyentes nuevos). */
.cine__frame { translate: calc((1 - var(--nq, 1)) * 96px * var(--side, 0)) 0; }

.cine__media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; height: var(--ih, auto); border-radius: var(--r); overflow: hidden; isolation: isolate; background: #121212; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.9); transition: box-shadow 400ms linear; }
.cine[data-count="1"] .cine__media { cursor: pointer; }
.cine:not([data-count="1"]) .cine__frame.is-active .cine__media { cursor: grab; }
.cine.is-dragging, .cine.is-dragging * { cursor: grabbing !important; }
/* Montura de cristal: filete de 1 px y destello superior, por encima de la imagen */
.cine__media::after { content: ""; position: absolute; z-index: 4; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.16); transition: box-shadow 400ms linear; }
.cine__frame.is-active[data-mirror] .cine__media { box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.9), 0 0 48px -18px var(--mirror); }
.cine__frame.is-active[data-mirror] .cine__media::after { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mirror) 60%, white), inset 0 1px 0 color-mix(in srgb, var(--mirror) 70%, white); }
.cine__ph { position: absolute; inset: 0; background: radial-gradient(circle at 28% 38%, rgba(215, 14, 22, 0.28), transparent 42%), repeating-radial-gradient(circle at 72% 62%, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 26px), #171717; }
.cine__img { position: absolute; z-index: 1; inset: 0 calc(-1.3 * var(--ovs, 0px)); transform-origin: 50% 50%; }
.cine__img picture, .cine__img img { display: block; width: 100%; height: 100%; }
.cine__img img { max-width: none; object-fit: cover; object-position: var(--fm, 50% 50%); -webkit-user-drag: none; }
/* Fundido desde el placeholder óptico (solo cuando novedades.js está activo; sin él la imagen se ve siempre) */
.cine.is-ready .cine__img img { opacity: 0; transition: opacity 360ms var(--ease-standard); }
.cine.is-ready .cine__img img.is-loaded { opacity: 1; }
.cine__frame.is-failed .cine__img img { display: none; }
/* Reflejo del cristal: solo aparece mientras el cuadro se mueve (opacidad ∝ velocidad); en reposo no hay brillo. */
.cine__glint { position: absolute; z-index: 2; inset: 0 -60%; opacity: 0; pointer-events: none; background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0.03) 55%, transparent 62%); }
/* Luz de sala: los vecinos quedan en penumbra; el activo, a plena luz */
.cine__shade { position: absolute; z-index: 3; inset: 0; background: #050505; opacity: calc(var(--shade, 0) * var(--hov, 1)); pointer-events: none; }

/* Pie editorial (viaja con su campaña) */
.cap { min-width: 0; padding-top: 16px; }
.cap .r + .r { margin-top: 10px; }
.cap__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 0.75rem; line-height: 1.4; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cap__eyebrow .chip { letter-spacing: 0.06em; }
.cap__sep::before { content: "·"; color: rgba(255, 255, 255, 0.4); }
.cap__when { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; text-transform: none; }
.cap .nov-cap__logo { display: block; height: 24px; width: auto; max-width: 160px; object-fit: contain; object-position: left center; }
.cap__title { margin: 0; font-size: clamp(1.375rem, 5.8vw, 1.75rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 650; text-wrap: balance; overflow-wrap: anywhere; }
.cap__sum { margin: 0; max-width: 54ch; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cap .r--cta { margin-top: 14px; }
.cap__terms { margin: 0; max-width: 60ch; font-size: 0.75rem; line-height: 1.45; color: rgba(244, 242, 240, 0.64); }
.ri { display: block; }

/* Navegación: segmentos (sin números) y flechas */
.cine__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.cine__segs { display: flex; align-items: center; gap: 2px; }
.cine__seg { appearance: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0; background: none; width: 24px; height: 44px; display: grid; place-items: center; cursor: pointer; color: inherit; transition: width 420ms var(--ease); }
.cine__seg::before { content: ""; width: calc(100% - 10px); height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); transition: background-color 300ms linear; }
.cine__seg:hover::before { background: rgba(255, 255, 255, 0.6); }
.cine__seg[aria-selected="true"] { width: 46px; }
.cine__seg[aria-selected="true"]::before { background: var(--red); }
.cine__seg:focus-visible { border-radius: 6px; }
.cine__arrows { display: flex; gap: 8px; }
.cine__arrow { appearance: none; -webkit-appearance: none; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.03); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background-color var(--t-response) var(--ease), border-color var(--t-response) var(--ease), opacity 200ms linear, transform var(--t-response) var(--ease); }
.cine__arrow svg { width: 20px; height: 20px; }
.cine__arrow:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }
.cine__arrow:active { transform: scale(0.96); }
.cine__arrow[aria-disabled="true"] { opacity: 0.3; cursor: default; background: transparent; border-color: rgba(255, 255, 255, 0.3); transform: none; }
.btn:focus-visible, .cine__arrow:focus-visible { border-radius: 999px; }

/* El pie viaja con su campaña: las líneas de la activa entran escalonadas; las demás se apagan (con JavaScript) */
.js .cine .cap .ri { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 160ms var(--ease-in), transform 0s linear 160ms; }
.js .cine .is-active .cap .ri { opacity: 1; transform: none; transition: opacity 520ms var(--ease-standard) calc(var(--rd, 200ms) + var(--i, 0) * var(--rs, 60ms)), transform 700ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--rd, 200ms) + var(--i, 0) * var(--rs, 60ms)); }
.js .cine .cine__frame:not(.is-active) .cap { pointer-events: none; }
.js .cine:not(.is-ready) .cine__nav { visibility: hidden; }

/* Tableta: 3:2 */
@media (min-width: 600px) {
	.cine { --r: var(--r-inner); --gap: 16px; }
	.cine__media { aspect-ratio: 3 / 2; }
	.cine__frame { flex-basis: var(--fw, 84%); }
	.cine__img img { object-position: var(--fd, 50% 50%); }
}
/* Escritorio: 2:1, pie en dos columnas, navegación en la fila del título */
@media (min-width: 1024px) {
	.cine { --gap: 16px; }
	.cine__media { aspect-ratio: 2 / 1; }
	.cine__frame { flex-basis: var(--fw, 78%); }
	.cap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: clamp(28px, 3.2vw, 48px); align-items: start; padding-top: 22px; }
	.cap__l, .cap__r { min-width: 0; }
	.cap__r > .r:first-child { margin-top: 0; }
	.cap__title { font-size: clamp(1.75rem, 2.3vw, 2.375rem); line-height: 1.08; }
	.cap__sum { font-size: 1rem; }
	.cap .r--cta { margin-top: 16px; }
	.cap__r > .r--cta:first-child { margin-top: 0; }
	.cine__nav { position: absolute; z-index: 2; right: 0; bottom: calc(100% + clamp(16px, 3vw, 32px) - 4px); margin: 0; gap: 20px; }
}
@media (max-width: 1023px) {
	.cap__r > .r:first-child { margin-top: 10px; }
	.cap__r > .r--cta:first-child { margin-top: 14px; }
}
/* Teléfono: la cápsula inferior no tapa el botón */
@media (max-width: 860px) {
	.section--novedades { padding-bottom: calc(108px + var(--safe-bottom)); }
}
/* Una sola campaña: cuadro de ancho completo, sin vecinas ni navegación */
.cine[data-count="1"] .cine__frame { flex-basis: 100%; translate: none; }

/* Sin JavaScript: carril horizontal nativo con ajuste por campaña; todos los botones alcanzables */
html:not(.js) .cine__viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
html:not(.js) .cine__frame { scroll-snap-align: start; translate: none; }
html:not(.js) .cine__shade, html:not(.js) .cine__nav { display: none; }

/* Movimiento reducido, modo de bajo consumo o ahorro de datos (novedades.js pone .is-rm): sin recorrido, profundidad, reflejo ni llegada;
   el escenario se funde a tinta en 120 ms y vuelve en 200 ms; el pie solo cambia de opacidad. */
.cine.is-rm .cine__frame, .glo-rm .cine__frame { translate: none; }
.cine.is-rm .cine__glint, .glo-rm .cine__glint { display: none; }
.cine.is-rm .cap .ri, .cine.is-rm .is-active .cap .ri { transform: none; }
.cine.is-rm .cap .ri { opacity: 0; transition: opacity 120ms linear; }
.cine.is-rm .is-active .cap .ri { opacity: 1; transition: opacity 200ms linear 120ms; }
.cine.is-rm .cine__seg { transition: none; }
@media (forced-colors: active) {
	.cine__seg[aria-selected="true"]::before { background: Highlight; }
	.cine__media::after { box-shadow: none; border: 1px solid CanvasText; }
}