/* Módulo "escenas" — slider/hero propio del CMS.
   Sustituye progresivamente a Revolution Slider (sliders).
   Sin dependencias externas. Compatible con cualquier breakpoint. */

.es{
	position:relative;
	width:100%;
	overflow:hidden;
}
.es-alto-fijo{ height:var(--es-alto, 60vh); }
.es-alto-auto{ height:auto; }

.es-pista{
	position:relative;
	width:100%;
	height:100%;
}

/* Modo alto fijo: todas las diapos superpuestas, transición por opacity/transform. */
.es-alto-fijo .es-d{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	opacity:0;
	visibility:hidden;
	transition:opacity 600ms ease, transform 600ms ease;
	pointer-events:none;
}
.es-alto-fijo .es-d-on{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	z-index:2;
}

/* Modo alto auto: solo la diapo activa visible (block), el resto display:none.
   La diapo fluye con su contenido y empuja la altura natural del slider. */
.es-alto-auto .es-d{
	position:relative;
	width:100%;
	min-height:300px;
	background:#222; /* fallback visible si la imagen aún no carga */
}
.es-alto-auto .es-d:not(.es-d-on){ display:none; }

/* Transiciones */
.es-tr-fade .es-d{ /* default */ }
.es-tr-slide .es-d{ transform:translateX(100%); }
.es-tr-slide .es-d-on{ transform:translateX(0); }
.es-tr-slide .es-d-prev{ transform:translateX(-100%); }
.es-tr-zoom .es-d{ transform:scale(1.1); }
.es-tr-zoom .es-d-on{ transform:scale(1); }
.es-tr-none .es-d{ transition:none; }

/* Fondo */
.es-d-bg{
	position:absolute;
	inset:0;
	overflow:hidden;
	z-index:1;
}
.es-d-img, .es-d-video, .es-d-bg iframe{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	border:0;
}
.es-d-overlay{
	position:absolute;
	inset:0;
	pointer-events:none;
}

/* Contenido. En modo fijo ocupa todo el alto del .es-d; en auto fluye con su contenido. */
.es-d-cnt{
	position:relative;
	z-index:3;
	width:100%;
	max-width:1240px;
	margin:0 auto;
	padding:40px 24px;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	gap:16px;
}
.es-alto-fijo .es-d-cnt{ height:100%; }
.es-alto-auto .es-d-cnt{ min-height:300px; }

/* Alineación */
.es-d-align-arriba-izq    .es-d-cnt{ justify-content:flex-start;  align-items:flex-start; text-align:left; }
.es-d-align-arriba-centro .es-d-cnt{ justify-content:flex-start;  align-items:center;     text-align:center; }
.es-d-align-arriba-der    .es-d-cnt{ justify-content:flex-start;  align-items:flex-end;   text-align:right; }
.es-d-align-centro-izq    .es-d-cnt{ justify-content:center;      align-items:flex-start; text-align:left; }
.es-d-align-centro        .es-d-cnt{ justify-content:center;      align-items:center;     text-align:center; }
.es-d-align-centro-der    .es-d-cnt{ justify-content:center;      align-items:flex-end;   text-align:right; }
.es-d-align-abajo-izq     .es-d-cnt{ justify-content:flex-end;    align-items:flex-start; text-align:left; }
.es-d-align-abajo-centro  .es-d-cnt{ justify-content:flex-end;    align-items:center;     text-align:center; }
.es-d-align-abajo-der     .es-d-cnt{ justify-content:flex-end;    align-items:flex-end;   text-align:right; }

/* Layouts internos */
.es-d-solo{ max-width:760px; }
.es-d-cols{
	display:flex;
	flex-wrap:wrap;
	gap:32px;
	align-items:center;
	width:100%;
}
.es-d-col{ flex:1 1 0; min-width:280px; }
.es-d-col-img img{ width:100%; height:auto; display:block; border-radius:8px; }

@media (max-width:768px){
	.es-d-cols{ flex-direction:column; }
}

/* Textos */
.es-d-titulo{
	margin:0;
	font-size:clamp(28px, 4vw, 56px);
	font-weight:700;
	line-height:1.1;
	color:#fff;
}
.es-d-eslogan{
	font-size:clamp(15px, 1.4vw, 20px);
	line-height:1.5;
	color:#fff;
	max-width:600px;
}
.es-d-boton{
	display:inline-block;
	padding:12px 24px;
	border-radius:6px;
	background:#fff;
	color:#000;
	text-decoration:none;
	font-weight:600;
	transition:transform .2s ease, box-shadow .2s ease;
}
.es-d-boton:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.2); }

/* Animaciones de entrada */
.es-anim{ opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s ease; transition-delay:.1s; }
.es-d-on .es-anim{ opacity:1; transform:translateY(0); }
.es-d-on .es-d-eslogan.es-anim{ transition-delay:.3s; }
.es-d-on .es-d-boton.es-anim{ transition-delay:.5s; }

.es-anim-fade           { transform:none; }
.es-anim-slideUp        { transform:translateY(40px); }
.es-anim-slideDown      { transform:translateY(-40px); }
.es-anim-slideLeft      { transform:translateX(40px); }
.es-anim-slideRight     { transform:translateX(-40px); }
.es-anim-zoom           { transform:scale(.9); }
.es-d-on .es-anim-zoom  { transform:scale(1); }

/* Flechas */
.es-arr{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:48px;
	height:48px;
	background:rgba(0,0,0,.4);
	color:#fff;
	border:0;
	cursor:pointer;
	z-index:5;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:background .2s ease, opacity .2s ease;
}
.es-arr:hover{ background:rgba(0,0,0,.7); }
.es-arr-prev{ left:12px; }
.es-arr-next{ right:12px; }
.es-arrp-fuera .es-arr-prev{ left:-60px; }
.es-arrp-fuera .es-arr-next{ right:-60px; }
.es-arrp-ocultas .es-arr{ opacity:0; }
.es-arrp-ocultas:hover .es-arr{ opacity:1; }

.es-arr-i{
	width:14px;
	height:14px;
	border-top:2px solid currentColor;
	border-right:2px solid currentColor;
	display:block;
}
.es-arr-prev .es-arr-i{ transform:rotate(-135deg); margin-left:4px; }
.es-arr-next .es-arr-i{ transform:rotate(45deg); margin-right:4px; }

/* La clase es-arr-{tipo} vive en el wrapper .es (no en las flechas), así
   que la regla debe descender a las propias flechas .es-arr para no
   afectar al contenedor (border-radius redondearía el fondo entero). */
.es-arr-circle  .es-arr{ border-radius:50%; }
.es-arr-rounded .es-arr{ border-radius:8px; }
.es-arr-chevron .es-arr{ border-radius:0; }
.es-arr-none    .es-arr{ display:none; }

/* Navegación */
.es-nav{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	display:flex;
	gap:8px;
	z-index:5;
	padding:8px 12px;
}
.es-navp-abajo  .es-nav{ bottom:16px; }
.es-navp-encima .es-nav{ top:16px; }
.es-navp-lateral .es-nav{ left:auto; right:16px; top:50%; transform:translateY(-50%); flex-direction:column; }

.es-nav-i{
	border:0;
	background:rgba(255,255,255,.5);
	cursor:pointer;
	transition:background .2s ease, transform .2s ease;
	color:#fff;
	font-size:13px;
}
.es-nav-i:hover{ background:rgba(255,255,255,.8); }
.es-nav-on{ background:#fff; }

/* Tipos de nav */
.es-nav-bullets   .es-nav-i{ width:12px; height:12px; border-radius:50%; padding:0; }
.es-nav-lineas    .es-nav-i{ width:32px; height:4px;  border-radius:2px; padding:0; }
.es-nav-numeros   .es-nav-i{ width:auto; min-width:32px; height:32px; border-radius:50%; padding:0 8px; }
.es-nav-miniaturas .es-nav-i{ width:80px; height:50px; border-radius:4px; background-size:cover; background-position:center; }
.es-nav-miniaturas .es-nav-on{ outline:3px solid #fff; outline-offset:2px; }
.es-nav-none{ display:none; }

/* Editor placeholder */
.es-vacio{
	padding:60px 20px;
	text-align:center;
	background:#f5f5f5;
	color:#888;
	border:2px dashed #ccc;
	font-size:16px;
}