/* ============================================================
   ZZ MULTI SLIDERS — SKIN: PLANTILLA WEB 1
   ============================================================
   Personalización propia del tema hijo. NO forma parte del plugin:
   este fichero vive en el tema hijo y se declara con 'css_url' al
   registrar la plantilla mediante el filtro zz_multi_slider_templates
   (ver functions.php). Así el plugin se puede actualizar sin perder
   nada de esto.

   Qué hace: mueve la paginación abajo a la izquierda, alineada con la
   caja del sitio (a plomo con el título, el texto y los botones de la
   diapositiva), y convierte el bullet activo en un segmento alargado
   del color corporativo.

   Ubicación esperada: /css/tpl-plantilla-web-1.css dentro del tema hijo.
   ============================================================ */


/* ------------------------------------------------------------
   1. POSICIÓN DE LA PAGINACIÓN
   ------------------------------------------------------------
   Swiper pinta el contenedor de paginación a lo ancho completo
   (width:100%; left:0) y con text-align:center. Para llevarlo a la
   izquierda basta con cambiar la alineación del texto y aplicar un
   padding lateral idéntico al que usa el contenido de la diapositiva.

   El !important en bottom es OBLIGATORIO: el CSS base del plugin ya
   usa !important en esa propiedad para ganarle a Swiper, así que sin
   él este valor no llegaría a aplicarse.

   El padding-left replica la fórmula del layout "left-bottom" del
   plugin, leyendo sus mismas variables (que se heredan del contenedor
   .zz-multi-slider). Resultado: los bullets quedan a plomo con el
   texto en cualquier ancho de pantalla, y si algún día cambias
   --zzms-content-box-width, se mueven los dos a la vez.
   ------------------------------------------------------------ */
.zz-multi-slider--tpl-plantilla-web-1 {
	--zzms-full-height-offset: 0px;
	--zzms-full-height-offset-mobile: 0px;
 		--zzms-overlay-color: linear-gradient(
		to bottom,
		rgba( 0, 0, 0, 0.40 ) 0%,
		rgba( 0, 0, 0, 0.40 ) 55%,
		rgba( 0, 0, 0, 0.55 ) 75%,
		rgba( 0, 0, 0, 0.60 ) 88%,
		rgba( 0, 0, 0, 0.60 ) 100%
	);

}

.zz-multi-slider--tpl-plantilla-web-1 .zz-multi-slider__pagination {
	bottom: 40px !important;
	text-align: left;
	box-sizing: border-box;
	padding-left: var( --zzms-content-side-margin, 20px );
	padding-left: max(
		var( --zzms-content-side-margin, 20px ),
		calc( ( 100vw - var( --zzms-content-box-width, 1300px ) ) / 2 )
	);
	padding-right: var( --zzms-content-side-margin, 20px );
}

/* Franja 993-1400px: el contenido del plugin usa aquí un margen lateral
   fijo en vez de la fórmula max(). Se replica para que los bullets no
   se despeguen del texto justo en ese rango. */
@media ( min-width: 993px ) and ( max-width: 1400px ) {
	.zz-multi-slider--tpl-plantilla-web-1 .zz-multi-slider__pagination {
		padding-left: var( --zzms-content-side-margin-tablet, 50px );
	}
}


/* ------------------------------------------------------------
   2. FORMA Y COLOR DE LOS BULLETS
   ------------------------------------------------------------
   Inactivos: círculos blancos sólidos.
   Activo: segmento alargado del color corporativo.

   La transición es lo que hace que el cambio de círculo a segmento se
   vea suave y no a saltos: Swiper no sustituye el elemento al cambiar
   de diapositiva, solo le añade o le quita la clase --active, y tanto
   width como background-color son propiedades animables. Además esa
   clase cambia al INICIO de la transición del slide, así que el
   segmento se estira a la vez que se desplaza la imagen y se percibe
   como un único movimiento.

   Efecto secundario esperado: al ensancharse el activo, los bullets
   que tiene a su derecha se desplazan para hacerle sitio. También es
   suave (arrastra esta misma transición), pero es movimiento
   adicional. Si prefirieras que los puntos quedaran completamente
   quietos, habría que dar a cada bullet un ancho fijo grande y animar
   solo un pseudo-elemento interior.
   ------------------------------------------------------------ */
.zz-multi-slider--tpl-plantilla-web-1 .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: var( --zz-blanco, #fff );
	opacity: 1;
	transition: width 0.35s ease, background-color 0.35s ease;
}

.zz-multi-slider--tpl-plantilla-web-1 .swiper-pagination-bullet-active {
	width: 80px;
	background: var( --zz-principal, #028038 );
}

/* Swiper separa los bullets con un margen horizontal a ambos lados, lo
   que dejaría el primero unos píxeles desplazado respecto al texto. Se
   anula solo en el primero para que el borde izquierdo quede exacto. */
.zz-multi-slider--tpl-plantilla-web-1 .swiper-pagination-bullet:first-child {
	margin-left: 0;
}


/* ------------------------------------------------------------
   3. MÓVIL
   ------------------------------------------------------------
   Segmento activo más corto y paginación algo más cerca del borde:
   con 80px y varias diapositivas, la fila se acercaría demasiado al
   ancho útil de un móvil.
   ------------------------------------------------------------ */
@media ( max-width: 600px ) {
	.zz-multi-slider--tpl-plantilla-web-1 .zz-multi-slider__pagination {
		bottom: 28px !important;
	}

	.zz-multi-slider--tpl-plantilla-web-1 .swiper-pagination-bullet-active {
		width: 48px;
	}
}


/* ------------------------------------------------------------
   4. ACCESIBILIDAD
   ------------------------------------------------------------
   Misma política que el resto del plugin: si el usuario ha pedido
   reducir el movimiento en su sistema, el bullet cambia de forma y
   color de golpe, sin animación.
   ------------------------------------------------------------ */
@media ( prefers-reduced-motion: reduce ) {
	.zz-multi-slider--tpl-plantilla-web-1 .swiper-pagination-bullet {
		transition: none;
	}
}


/* ------------------------------------------------------------
   5. TIPOGRAFÍA (TÍTULO Y TEXTO)
   ------------------------------------------------------------
   La familia, el peso y el color del título y del texto ya vienen
   bien definidos desde el panel de The7 (Noto Serif 600 / Inter 400).
   Aquí solo se sobrescribe el TAMAÑO, que en el CSS base del plugin
   (zz-multi-slider-base.css) usa su propio clamp() con un máximo más
   pequeño (2.75rem título / 1.15rem texto).

   Se mantiene el mismo método (clamp) en vez de fijar el tamaño y
   añadir @media para pantallas pequeñas: clamp(mínimo, preferido,
   máximo) hace la interpolación sola entre esos dos extremos, así que
   no hace falta ningún breakpoint adicional.

   El valor "preferido" (la parte central) está calculado para que dé
   exactamente el máximo (80px / 18px) a partir de 1300px de ancho de
   viewport —el mismo ancho que ya usa --zzms-content-box-width como
   referencia del sitio— y el mínimo elegido (36px / 16px) a partir de
   360px (un móvil pequeño típico). Por debajo de 360px o por encima
   de 1300px, clamp() se queda fijo en el mínimo o el máximo.
   ------------------------------------------------------------ */
.zz-multi-slider--tpl-plantilla-web-1 .zz-multi-slider__title {
	font-size: clamp( 2.25rem, 1.2rem + 4.68vw, 5rem ); /* 36px -> 80px */
}

.zz-multi-slider--tpl-plantilla-web-1 .zz-multi-slider__text {
	font-size: clamp( 1rem, 0.95rem + 0.21vw, 1.125rem ); /* 16px -> 18px */
}


/* ------------------------------------------------------------
   6. BOTONES
   ------------------------------------------------------------
   Color y tamaño según el componente "Button" (estilo "Secondary")
   del sistema de diseño en Figma: fondo y borde verde corporativo,
   texto blanco, padding 10px/32px, radio 6px, Inter Medium 16px
   mayúsculas. Se aplica igual a los dos botones (btn--1 y btn--2);
   si en algún momento el segundo botón necesita otro tratamiento
   (por ejemplo el estilo "Terciary" -contorno verde, sin relleno-
   que también existe en el archivo de Figma), aquí es donde se
   diferenciarían.

   Los colores y el radio se cambian a través de las custom properties
   que ya expone el plugin (--zzms-btn1-*, --zzms-btn2-*, dentro de la
   familia --zzms-btn-radius), en vez de pisar directamente background/
   color/border-radius: así, si el plugin actualiza esas reglas en el
   futuro, esta plantilla las sigue heredando sin tener que tocarla.

   padding, font y letter-spacing sí son detalles puntuales que el
   plugin no expone como variable (ver cabecera de zz-multi-slider-
   base.css), así que se pisan directamente aquí, scoped a esta
   plantilla.
   ------------------------------------------------------------ */
.zz-multi-slider--tpl-plantilla-web-1 {
	--zzms-btn1-bg: var( --zz-principal, #028038 );
	--zzms-btn1-color: var( --zz-blanco, #fff );
	--zzms-btn2-bg: var( --zz-principal, #028038 );
	--zzms-btn2-color: var( --zz-blanco, #fff );
	--zzms-btn2-border: var( --zz-principal, #028038 );
	--zzms-btn-radius: 6px;
}

.zz-multi-slider--tpl-plantilla-web-1 .zz-multi-slider__btn {
	padding: 10px 32px;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0;
	border-style: solid;
	border-width: 1px;
	/* Sustituye la transición base (opacity + transform) por una que
	   solo anima los colores del hover, ver más abajo. */
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* El plugin no pone borde en btn--1 (solo en btn--2, vía
   --zzms-btn2-border); aquí sí hace falta porque el estilo "Secondary"
   de Figma lleva borde del mismo color que el fondo. */
.zz-multi-slider--tpl-plantilla-web-1 .zz-multi-slider__btn--1 {
	border-color: var( --zzms-btn1-bg );
}

/*
 * Hover: fondo blanco y texto negro en los dos botones, sin el
 * pequeño desplazamiento vertical (transform: translateY(-1px)) que
 * trae por defecto el plugin. Se anula tanto el transform como la
 * opacity de la regla base para que el único cambio visible sea el
 * de color, con su propia transición suave (ver arriba).
 */
.zz-multi-slider--tpl-plantilla-web-1 .zz-multi-slider__btn:hover,
.zz-multi-slider--tpl-plantilla-web-1 .zz-multi-slider__btn:focus-visible {
	background: var( --zz-blanco, #fff );
	color: var( --zz-negro, #000 );
	border-color: var( --zz-blanco, #fff );
	opacity: 1;
	transform: none;
}

/* flechas */ 
.zz-multi-slider--tpl-plantilla-web-1 .zz-multi-slider__scroll-down,
.zz-multi-slider--tpl-plantilla-web-1 .zz-multi-slider__scroll-down:hover {
	background: none;
	border: none;
}
.zz-multi-slider--tpl-plantilla-web-1 .zz-multi-slider__scroll-down:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	border-radius: 50%;
}