/* ==========================================================================
   ZD Secciones · front-end
   ========================================================================== */

.zds {
	--zds-accent: #ff6b2c;
	--zds-text: #0f172a;
	--zds-panel-bg: #ffffff;
	--zds-border: rgba(15, 23, 42, .1);
	--zds-gap: 48px;
	--zds-radius: 24px;
	--zds-img-radius: 24px;
	--zds-pad: 0px;
	--zds-img-w: 48%;
	--zds-fit: cover;
	--zds-overlay: .55;
	--zds-overlay-color: #0b1220;
	--zds-btn-radius: 999px;
	--zds-ease: cubic-bezier(.22, 1, .36, 1);
	--zds-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 24px 60px -32px rgba(15, 23, 42, .45);
	--zds-shadow-hover: 0 2px 6px rgba(15, 23, 42, .06), 0 40px 80px -36px rgba(15, 23, 42, .55);
	--zds-muted: color-mix(in srgb, var(--zds-text) 68%, transparent);

	position: relative;
	box-sizing: border-box;
	/* width auto (no 100%) para que los márgenes laterales nunca desborden */
	width: auto;
	max-width: var(--zds-max, none);
	margin-inline: auto;
	padding: var(--zds-pad);
	color: var(--zds-text);
	background: var(--zds-bg, transparent);
	border-radius: var(--zds-radius);
}

.zds *,
.zds *::before,
.zds *::after {
	box-sizing: border-box;
}

.zds-empty {
	padding: 14px 18px;
	border: 1px dashed rgba(15, 23, 42, .2);
	border-radius: 10px;
	color: #64748b;
	font-size: 14px;
}

/* Tema oscuro */
.zds.zds--oscuro {
	--zds-text: #e8ecf5;
	--zds-panel-bg: #101828;
	--zds-border: rgba(255, 255, 255, .14);
	--zds-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 30px 70px -34px rgba(0, 0, 0, .95);
	--zds-shadow-hover: 0 2px 6px rgba(0, 0, 0, .45), 0 44px 90px -38px rgba(0, 0, 0, 1);
}

/* --------------------------------------------------------------------------
   Estructura
   -------------------------------------------------------------------------- */

.zds-inner {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--zds-gap);
	width: 100%;
}

.zds-col--texto {
	flex: 1 1 auto;
	min-width: 0;
}

.zds-col--media {
	flex: 0 0 var(--zds-img-w);
	width: var(--zds-img-w);
	max-width: 100%;
	min-width: 0;
}

.zds-panel {
	max-width: var(--zds-text-max, none);
}

/* Alineación vertical */
.zds--v-arriba .zds-inner { align-items: flex-start; }
.zds--v-centro .zds-inner { align-items: center; }
.zds--v-abajo  .zds-inner { align-items: flex-end; }

/* Posición de la imagen */
.zds--pos-derecha .zds-col--media { order: 3; }
.zds--pos-izquierda .zds-col--media { order: 0; }

.zds--pos-arriba .zds-inner,
.zds--pos-abajo .zds-inner,
.zds--sin-imagen .zds-inner {
	flex-direction: column;
	align-items: stretch;
}

.zds--pos-arriba .zds-col--media,
.zds--pos-abajo .zds-col--media {
	flex: 0 0 auto;
	width: 100%;
}

.zds--pos-arriba .zds-col--media { order: 0; }
.zds--pos-abajo .zds-col--media { order: 3; }

/* Imagen de fondo */
.zds--pos-fondo .zds-inner {
	display: block;
}

.zds--pos-fondo .zds-col--media {
	position: absolute;
	inset: 0;
	width: 100%;
	z-index: 0;
	pointer-events: none;
}

.zds--pos-fondo .zds-col--texto {
	position: relative;
	z-index: 2;
}

.zds--pos-fondo .zds-media,
.zds--pos-fondo .zds-media-frame,
.zds--pos-fondo .zds-img {
	height: 100%;
	width: 100%;
}

.zds--pos-fondo .zds-overlay {
	opacity: 1;
}

/* Alineación del texto */
.zds--align-izquierda .zds-col--texto { text-align: left; }
.zds--align-centro .zds-col--texto { text-align: center; }
.zds--align-derecha .zds-col--texto { text-align: right; }
.zds--align-justificado .zds-col--texto { text-align: left; }
.zds--align-justificado .zds-texto p { text-align: justify; }

.zds--align-centro .zds-panel { margin-inline: auto; }
.zds--align-derecha .zds-panel { margin-left: auto; }

.zds--align-centro .zds-acciones { justify-content: center; }
.zds--align-derecha .zds-acciones { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.zds-head {
	margin: 0 0 18px;
}

.zds-title {
	margin: 0;
	font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.6rem);
	line-height: 1.14;
	font-weight: 800;
	letter-spacing: -.02em;
	color: inherit;
}

.zds-sub {
	margin: 14px 0 0;
	font-size: clamp(1rem, .95rem + .2vw, 1.12rem);
	line-height: 1.6;
	color: var(--zds-muted);
}

/* Estilo 1 · subrayado */
.zds-head--1 .zds-underline {
	display: block;
	width: 74px;
	height: 4px;
	margin: 18px 0 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--zds-accent), color-mix(in srgb, var(--zds-accent) 30%, transparent));
	transition: width .7s var(--zds-ease);
}

.zds--align-centro .zds-head--1 .zds-underline { margin-inline: auto; }
.zds--align-derecha .zds-head--1 .zds-underline { margin-left: auto; }

.zds--js.zds--animar .zds-head--1 .zds-underline { width: 0; }
.zds--js.zds--animar.is-visible .zds-head--1 .zds-underline { width: 74px; }

/* Estilo 2 · barra lateral */
.zds-head--2 {
	position: relative;
	padding-left: 22px;
}

.zds-head--2::before {
	content: "";
	position: absolute;
	inset-block: 4px;
	left: 0;
	width: 5px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--zds-accent), color-mix(in srgb, var(--zds-accent) 18%, transparent));
	transform: scaleY(0);
	transform-origin: top;
	animation: zds-bar .8s var(--zds-ease) forwards;
}

.zds--align-derecha .zds-head--2 {
	padding-left: 0;
	padding-right: 22px;
}

.zds--align-derecha .zds-head--2::before {
	left: auto;
	right: 0;
}

@keyframes zds-bar {
	to { transform: scaleY(1); }
}

/* Estilo 3 · kicker en píldora */
.zds-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	padding: 7px 16px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--zds-accent) 32%, transparent);
	background: color-mix(in srgb, var(--zds-accent) 10%, transparent);
	color: color-mix(in srgb, var(--zds-accent) 80%, var(--zds-text));
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
}

.zds-kicker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--zds-accent);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--zds-accent) 60%, transparent);
	animation: zds-pulse 2.4s infinite;
}

@keyframes zds-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--zds-accent) 55%, transparent); }
	70%  { box-shadow: 0 0 0 10px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* Estilo 4 · título con degradado + kicker plano */
.zds-head--4 .zds-kicker {
	border: 0;
	background: none;
	padding: 0;
	margin-bottom: 10px;
	letter-spacing: .18em;
	color: var(--zds-accent);
}

.zds-head--4 .zds-kicker::before {
	animation: none;
}

.zds-head--4 .zds-title span {
	background: linear-gradient(100deg, var(--zds-text) 12%, var(--zds-accent) 92%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   Cuerpo de texto (editor clásico)
   -------------------------------------------------------------------------- */

.zds-texto {
	margin-top: 18px;
	font-size: 1.03rem;
	line-height: 1.75;
	color: var(--zds-muted);
}

.zds-texto > *:first-child { margin-top: 0; }
.zds-texto > *:last-child { margin-bottom: 0; }

.zds-texto p { margin: 0 0 1.05em; }
.zds-texto strong, .zds-texto b { color: var(--zds-text); font-weight: 700; }
.zds-texto h1, .zds-texto h2, .zds-texto h3, .zds-texto h4, .zds-texto h5 {
	margin: 1.4em 0 .5em;
	color: var(--zds-text);
	line-height: 1.25;
}
.zds-texto a { color: var(--zds-accent); text-decoration: underline; text-underline-offset: 3px; }
.zds-texto ul, .zds-texto ol { margin: 0 0 1.05em; padding-left: 1.25em; }
.zds-texto li { margin-bottom: .45em; }
.zds-texto ul { list-style: none; padding-left: 0; }
.zds-texto ul li {
	position: relative;
	padding-left: 26px;
}
.zds-texto ul li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: .62em;
	width: 8px;
	height: 8px;
	border-radius: 3px;
	background: var(--zds-accent);
}
.zds-texto ol { list-style: decimal; }
.zds-texto img { max-width: 100%; height: auto; border-radius: 12px; }
.zds-texto blockquote {
	margin: 1.4em 0;
	padding: 4px 0 4px 20px;
	border-left: 4px solid var(--zds-accent);
	font-style: italic;
}
.zds-texto table { width: 100%; border-collapse: collapse; }
.zds-texto td, .zds-texto th { padding: 10px 12px; border-bottom: 1px solid var(--zds-border); }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.zds-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
}

.zds-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border-radius: var(--zds-btn-radius);
	border: 2px solid transparent;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform .35s var(--zds-ease), box-shadow .35s var(--zds-ease), background-color .3s, color .3s, border-color .3s;
}

.zds-btn::after {
	content: "→";
	font-size: 1.05em;
	transition: transform .35s var(--zds-ease);
}

.zds-btn:hover { transform: translateY(-2px); }
.zds-btn:hover::after { transform: translateX(4px); }

.zds-btn--solido {
	background: var(--zds-accent);
	color: #fff;
	box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--zds-accent) 85%, transparent);
}

.zds-btn--solido:hover {
	box-shadow: 0 20px 36px -16px color-mix(in srgb, var(--zds-accent) 95%, transparent);
	color: #fff;
}

.zds-btn--contorno {
	border-color: color-mix(in srgb, var(--zds-accent) 55%, transparent);
	color: var(--zds-text);
	background: transparent;
}

.zds-btn--contorno:hover {
	border-color: var(--zds-accent);
	background: color-mix(in srgb, var(--zds-accent) 10%, transparent);
}

.zds-btn--suave {
	background: color-mix(in srgb, var(--zds-accent) 14%, transparent);
	color: color-mix(in srgb, var(--zds-accent) 82%, var(--zds-text));
}

.zds-btn--suave:hover {
	background: color-mix(in srgb, var(--zds-accent) 22%, transparent);
}

.zds-btn--texto {
	padding: 6px 0;
	background: none;
	color: var(--zds-accent);
	border-radius: 0;
	border-bottom: 2px solid color-mix(in srgb, var(--zds-accent) 40%, transparent);
}

.zds-btn--texto:hover {
	border-bottom-color: var(--zds-accent);
}

/* --------------------------------------------------------------------------
   Imagen
   -------------------------------------------------------------------------- */

.zds-media {
	position: relative;
	margin: 0;
	width: 100%;
}

.zds-media-frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--zds-img-radius);
	background: color-mix(in srgb, var(--zds-text) 6%, transparent);
	transform: translateZ(0);
	transition: transform .55s var(--zds-ease), box-shadow .55s var(--zds-ease);
	aspect-ratio: var(--zds-ratio, auto);
	height: var(--zds-img-h, auto);
}

.zds--sombra .zds-media-frame {
	box-shadow: var(--zds-shadow);
}

.zds-picture {
	display: block;
	height: 100%;
}

.zds-img {
	display: block;
	width: 100%;
	height: var(--zds-img-h, auto);
	min-height: 100%;
	object-fit: var(--zds-fit);
	object-position: center;
	border-radius: inherit;
	transition: transform .8s var(--zds-ease), filter .6s var(--zds-ease);
}

.zds-media-frame:has(> .zds-picture) .zds-img { height: 100%; }

.zds-overlay {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg,
			color-mix(in srgb, var(--zds-overlay-color) calc(var(--zds-overlay) * 55%), transparent) 0%,
			color-mix(in srgb, var(--zds-overlay-color) calc(var(--zds-overlay) * 100%), transparent) 100%);
}

.zds-shine {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
	transform: translateX(-120%);
}

.zds-frame-deco {
	display: none;
}

.zds-pie {
	margin-top: 12px;
	font-size: .84rem;
	color: var(--zds-muted);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Efectos de imagen
   -------------------------------------------------------------------------- */

.zds--fx-zoom .zds-media-frame:hover .zds-img { transform: scale(1.07); }

.zds--fx-lift .zds-media-frame:hover {
	transform: translateY(-10px);
	box-shadow: var(--zds-shadow-hover);
}

.zds--fx-grayscale .zds-img { filter: grayscale(1); }
.zds--fx-grayscale .zds-media-frame:hover .zds-img { filter: grayscale(0); }

.zds--fx-glow .zds-media::before {
	content: "";
	position: absolute;
	inset: 8% 6%;
	border-radius: var(--zds-img-radius);
	background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--zds-accent) 60%, transparent), transparent 70%);
	filter: blur(46px);
	opacity: .0;
	transition: opacity .6s var(--zds-ease);
	z-index: -1;
}

.zds--fx-glow .zds-media:hover::before { opacity: .85; }

.zds--fx-brillo .zds-media-frame:hover .zds-shine {
	opacity: 1;
	transform: translateX(120%);
	transition: transform 1s var(--zds-ease), opacity .2s;
}

.zds--fx-flotante .zds-media-frame {
	animation: zds-float 6.5s ease-in-out infinite;
}

@keyframes zds-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}

.zds--fx-tilt .zds-media {
	perspective: 1100px;
}

.zds--fx-tilt .zds-media-frame {
	transform: rotateX(var(--zds-rx, 0deg)) rotateY(var(--zds-ry, 0deg));
	transition: transform .25s ease-out, box-shadow .5s var(--zds-ease);
}

.zds--fx-parallax .zds-img {
	transform: translate3d(0, var(--zds-py, 0px), 0) scale(1.12);
	transition: none;
	will-change: transform;
}

.zds--fx-reveal.zds--js .zds-media-frame {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.05s var(--zds-ease);
}

.zds--fx-reveal.zds--js.is-visible .zds-media-frame {
	clip-path: inset(0 0 0 0);
}

/* --------------------------------------------------------------------------
   Animación de entrada
   -------------------------------------------------------------------------- */

.zds--js.zds--animar .zds-head,
.zds--js.zds--animar .zds-texto,
.zds--js.zds--animar .zds-acciones,
.zds--js.zds--animar .zds-media {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .8s var(--zds-ease), transform .8s var(--zds-ease);
}

.zds--js.zds--animar.is-visible .zds-head,
.zds--js.zds--animar.is-visible .zds-texto,
.zds--js.zds--animar.is-visible .zds-acciones,
.zds--js.zds--animar.is-visible .zds-media {
	opacity: 1;
	transform: none;
}

.zds--js.zds--animar.is-visible .zds-texto { transition-delay: .1s; }
.zds--js.zds--animar.is-visible .zds-acciones { transition-delay: .18s; }
.zds--js.zds--animar.is-visible .zds-media { transition-delay: .08s; }

@media (prefers-reduced-motion: reduce) {
	.zds *,
	.zds *::before,
	.zds *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.zds--js.zds--animar .zds-head,
	.zds--js.zds--animar .zds-texto,
	.zds--js.zds--animar .zds-acciones,
	.zds--js.zds--animar .zds-media {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   Plantillas
   ========================================================================== */

/* --- 1 · Clásico ---------------------------------------------------------- */

.zds--clasico .zds-media-frame {
	border: 1px solid var(--zds-border);
}

/* --- 2 · Panel flotante --------------------------------------------------- */

.zds--panel {
	--zds-img-w: 62%;
}

.zds--panel .zds-inner {
	gap: 0;
}

.zds--panel .zds-col--texto {
	position: relative;
	z-index: 2;
}

.zds--panel .zds-panel {
	padding: clamp(26px, 3.4vw, 52px);
	border-radius: var(--zds-radius);
	background: var(--zds-panel-bg);
	border: 1px solid var(--zds-border);
	box-shadow: var(--zds-shadow);
}

.zds--panel.zds--pos-derecha .zds-panel { margin-right: -70px; }
.zds--panel.zds--pos-izquierda .zds-panel { margin-left: -70px; }

.zds--panel .zds-media-frame {
	min-height: 100%;
}

/* --- 3 · Revista ---------------------------------------------------------- */

.zds--revista {
	--zds-img-w: 44%;
}

.zds--revista .zds-media {
	padding: 18px;
}

.zds--revista .zds-frame-deco {
	display: block;
	position: absolute;
	inset: 0 36px 36px 0;
	border: 2px solid var(--zds-accent);
	border-radius: var(--zds-img-radius);
	pointer-events: none;
	z-index: 0;
}

.zds--revista.zds--pos-izquierda .zds-frame-deco {
	inset: 0 0 36px 36px;
}

.zds--revista .zds-media-frame {
	position: relative;
	z-index: 1;
	transform: translate(18px, 18px);
}

.zds--revista.zds--pos-izquierda .zds-media-frame {
	transform: translate(-18px, 18px);
}

.zds--revista .zds-head--1 .zds-underline,
.zds--revista .zds-kicker {
	position: relative;
}

/* --- 4 · Glass ------------------------------------------------------------ */

.zds--glass {
	overflow: hidden;
	isolation: isolate;
}

.zds--glass .zds-inner {
	min-height: clamp(380px, 46vw, 620px);
	display: flex;
	align-items: center;
	padding: clamp(28px, 4vw, 70px);
}

.zds--glass .zds-col--texto {
	width: min(100%, 620px);
}

.zds--glass.zds--align-centro .zds-col--texto { margin-inline: auto; }
.zds--glass.zds--align-derecha .zds-col--texto { margin-left: auto; }

.zds--glass .zds-panel {
	padding: clamp(24px, 3vw, 44px);
	border-radius: var(--zds-radius);
	background: color-mix(in srgb, var(--zds-panel-bg) 22%, transparent);
	border: 1px solid rgba(255, 255, 255, .28);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	box-shadow: 0 30px 70px -40px rgba(2, 6, 23, .8);
	color: #fff;
}

.zds--glass .zds-title,
.zds--glass .zds-texto,
.zds--glass .zds-texto p,
.zds--glass .zds-texto strong,
.zds--glass .zds-sub {
	color: #fff;
}

.zds--glass .zds-texto { color: rgba(255, 255, 255, .88); }

.zds--glass .zds-media-frame {
	border-radius: var(--zds-radius);
}

/* --- 5 · Hero ------------------------------------------------------------- */

.zds--hero {
	overflow: hidden;
	isolation: isolate;
}

.zds--hero .zds-inner {
	display: flex;
	align-items: center;
	min-height: clamp(420px, 56vw, 720px);
	padding: clamp(34px, 5vw, 90px);
}

.zds--hero .zds-col--texto {
	width: min(100%, 720px);
}

.zds--hero.zds--align-centro .zds-col--texto { margin-inline: auto; }
.zds--hero.zds--align-derecha .zds-col--texto { margin-left: auto; }

.zds--hero .zds-title,
.zds--hero .zds-sub,
.zds--hero .zds-texto,
.zds--hero .zds-texto p,
.zds--hero .zds-texto strong {
	color: #fff;
	text-shadow: 0 2px 24px rgba(2, 6, 23, .35);
}

.zds--hero .zds-texto { color: rgba(255, 255, 255, .9); }

.zds--hero .zds-title {
	font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem);
}

.zds--hero .zds-media-frame {
	border-radius: var(--zds-radius);
}

.zds--hero .zds-btn--contorno {
	color: #fff;
	border-color: rgba(255, 255, 255, .55);
}

/* --- 6 · Banda ------------------------------------------------------------ */

.zds--banda {
	--zds-img-w: 46%;
	overflow: hidden;
	background: var(--zds-bg, linear-gradient(120deg,
		color-mix(in srgb, var(--zds-accent) 8%, transparent),
		color-mix(in srgb, var(--zds-accent) 2%, transparent)));
}

.zds--banda .zds-inner {
	gap: clamp(24px, 4vw, 64px);
	align-items: stretch;
}

.zds--banda .zds-col--texto {
	display: flex;
	align-items: center;
	padding: clamp(28px, 4vw, 68px);
	padding-right: 0;
}

.zds--banda.zds--pos-izquierda .zds-col--texto {
	padding-right: clamp(28px, 4vw, 68px);
	padding-left: 0;
}

.zds--banda .zds-media,
.zds--banda .zds-media-frame {
	height: 100%;
}

.zds--banda .zds-media-frame {
	border-radius: 0;
	border-start-start-radius: var(--zds-img-radius);
	border-end-start-radius: var(--zds-img-radius);
}

.zds--banda.zds--pos-izquierda .zds-media-frame {
	border-radius: 0;
	border-start-end-radius: var(--zds-img-radius);
	border-end-end-radius: var(--zds-img-radius);
}

.zds--banda .zds-img { height: 100%; }

/* --- 7 · Minimal ---------------------------------------------------------- */

.zds--minimal .zds-inner {
	gap: clamp(28px, 3.4vw, 52px);
}

.zds--minimal .zds-panel {
	max-width: var(--zds-text-max, 760px);
	margin-inline: auto;
}

.zds--minimal .zds-col--texto {
	text-align: center;
}

.zds--minimal .zds-head--1 .zds-underline { margin-inline: auto; }
.zds--minimal .zds-acciones { justify-content: center; }
.zds--minimal .zds-media-frame { border-radius: calc(var(--zds-img-radius) + 8px); }

/* --- 8 · Neo (borde degradado animado) ------------------------------------ */

@property --zds-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.zds--neo .zds-inner {
	position: relative;
	padding: clamp(24px, 3vw, 46px);
	border-radius: var(--zds-radius);
	background: var(--zds-panel-bg);
	z-index: 0;
}

.zds--neo .zds-inner {
	background: transparent;
}

.zds--neo .zds-inner::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--zds-radius);
	background: conic-gradient(from var(--zds-angle),
		color-mix(in srgb, var(--zds-accent) 15%, transparent),
		var(--zds-accent),
		color-mix(in srgb, var(--zds-accent) 15%, transparent) 55%,
		color-mix(in srgb, var(--zds-accent) 15%, transparent));
	animation: zds-rotate 7s linear infinite;
	z-index: -2;
}

.zds--neo .zds-inner::after {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: calc(var(--zds-radius) - 2px);
	background: var(--zds-panel-bg);
	z-index: -1;
}

@keyframes zds-rotate {
	to { --zds-angle: 360deg; }
}

.zds--neo .zds-media-frame {
	border: 1px solid var(--zds-border);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px) {
	.zds--clasico .zds-inner,
	.zds--panel .zds-inner,
	.zds--revista .zds-inner,
	.zds--banda .zds-inner,
	.zds--neo .zds-inner {
		flex-direction: column;
		align-items: stretch;
		gap: clamp(22px, 4vw, 34px);
	}

	.zds .zds-col--media {
		flex: 0 0 auto;
		width: 100%;
		order: 0;
	}

	.zds--invertir-movil .zds-col--media { order: 3; }

	.zds--panel.zds--pos-derecha .zds-panel,
	.zds--panel.zds--pos-izquierda .zds-panel {
		margin: -46px 16px 0;
	}

	.zds--revista .zds-media { padding: 0; }
	.zds--revista .zds-media-frame,
	.zds--revista.zds--pos-izquierda .zds-media-frame { transform: none; }
	.zds--revista .zds-frame-deco { display: none; }

	.zds--banda .zds-col--texto,
	.zds--banda.zds--pos-izquierda .zds-col--texto {
		padding: clamp(24px, 5vw, 40px);
	}

	.zds--banda .zds-media-frame,
	.zds--banda.zds--pos-izquierda .zds-media-frame {
		border-radius: 0;
	}

	.zds--banda .zds-inner { gap: 0; }
	.zds--banda .zds-col--media { order: 0; }
}

@media (max-width: 767px) {
	.zds {
		--zds-gap: 26px;
	}

	.zds-acciones { gap: 10px; }

	.zds-btn {
		padding: 13px 22px;
		font-size: .9rem;
	}

	.zds--glass .zds-inner,
	.zds--hero .zds-inner {
		min-height: 0;
		padding: clamp(22px, 6vw, 40px);
	}

	.zds--hero .zds-col--media .zds-media-frame { min-height: 340px; }

	.zds--align-justificado .zds-texto p { text-align: left; }
}

/* Imagen con proporción o alto fijo: llena el marco sin dejar huecos */
.zds--fijo .zds-media-frame,
.zds--pos-fondo .zds-media-frame {
	position: relative;
}

.zds--fijo .zds-picture,
.zds--fijo .zds-img,
.zds--pos-fondo .zds-picture,
.zds--pos-fondo .zds-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: var(--zds-fit);
}