/* ============================================================
ZZ MULTI SLIDERS — CSS BASE (estructura común)
============================================================
Este fichero contiene TODA la estructura del slider y los valores
por defecto de los tokens de diseño (custom properties --zzms-*).
Los ficheros de plantilla (tpl-*.css) son "skins": redefinen los
tokens (y algún detalle puntual) por encima de este base, scoped
con la clase .zz-multi-slider--tpl-{clave} que el shortcode añade
al wrapper. Los cambios estructurales se hacen SOLO aquí, una vez.
Índice:
1. VARIABLES (alturas, anchos, colores) ← valores por defecto
2. CONTENEDOR / SLIDE
3. IMAGEN DE FONDO
4. CONTENIDO (título, texto, botones)
5. BOTONES
6. FLECHAS
7. PAGINACIÓN
8. ACCESIBILIDAD / REDUCED MOTION
============================================================ */
/* ------------------------------------------------------------
1. VARIABLES
Valores por defecto de todos los tokens. Cada plantilla puede
sobrescribir los que necesite en su tpl-*.css sin tocar nada más.
------------------------------------------------------------ */
.zz-multi-slider {
/* Altura del slider (aplica al slider entero, igual en todos
los slides, independiente del tamaño real de cada imagen).
Solo se usa si la plantilla NO está en modo fullHeight. */
--zzms-height-desktop: 800px;
--zzms-height-tablet: 600px;
--zzms-height-mobile: 520px;
/* Ancho máximo del bloque de texto/botones sobre la imagen
(solo en el layout centrado). */
--zzms-content-max-width: 1000px;
/* Ancho máximo del bloque de texto/botones en los layouts alineados
a la izquierda ("left-bottom" y "left-center"). Es una variable
APARTE de --zzms-content-max-width a propósito: en esos layouts el
límite se aplica al título, al texto y a los botones, no al
contenedor (que necesita ocupar todo el ancho para poder alinearse
con la caja del sitio mediante padding). Ver la nota extensa junto
a la regla, más abajo. */
--zzms-content-text-max-width: 1000px;
/* Colores. */
--zzms-overlay-color: rgba( 0, 0, 0, 0.45 );
--zzms-title-color: #ffffff;
--zzms-text-color: #f1f1f1;
--zzms-btn1-bg: #ffffff;
--zzms-btn1-color: #111111;
--zzms-btn2-bg: transparent;
--zzms-btn2-color: #ffffff;
--zzms-btn2-border: #ffffff;
/* Bullets de paginación (los puntos de abajo). */
--zzms-pagination-color: #ffffff;
--zzms-pagination-opacity: 0.6; /* de los bullets inactivos */
--zzms-pagination-color-active: #ffffff;
/* Spinner de carga: el círculo que gira dentro de la capa de carga
(--zzms-placeholder-bg es el color de fondo de esa capa). */
--zzms-spinner-color: #999999;
/* Fondo de reserva del contenedor: se ve un instante mientras carga
la imagen o mientras el navegador reajusta el tamaño (p. ej. al
redimensionar la ventana). */
--zzms-placeholder-bg: #ffffff;
/* Border-radius de los botones. */
--zzms-btn-radius: 4px;
/* Zoom sutil de la imagen al pasar el ratón, solo en el modo de
enlace en toda la diapositiva. DESACTIVADO por defecto (1 = sin
cambio de escala). Para activarlo en una plantilla, sube el valor
desde su skin: --zzms-hover-zoom: 1.03; */
--zzms-hover-zoom: 1;
--zzms-hover-zoom-duration: 0.4s;
/* Flecha "continúa abajo" (solo si la plantilla la activa con
'showScrollIndicator'). Aspecto y posición. */
--zzms-scroll-down-size: 44px;
--zzms-scroll-down-icon-size: 62%;
--zzms-scroll-down-bottom: 32px;
--zzms-scroll-down-bottom-mobile: 20px;
--zzms-scroll-down-color: #ffffff;
--zzms-scroll-down-bg: rgba( 0, 0, 0, 0.15 );
--zzms-scroll-down-bg-hover: rgba( 0, 0, 0, 0.35 );
--zzms-scroll-down-border-color: rgba( 255, 255, 255, 0.7 );
--zzms-scroll-down-border-width: 1px;
--zzms-scroll-down-bounce-duration: 2s;
/* Cuánto se descuenta al bajar con la flecha, para que un header
fijo superpuesto no tape el inicio de la sección siguiente. Por
defecto reutiliza el offset ya calibrado del modo alto completo,
así no hay que configurar lo mismo dos veces; si en algún
proyecto el header no es fijo, ponla a 0px desde el skin. */
--zzms-scroll-offset: var( --zzms-full-height-offset );
/* Duración del fade in del contenido (título/texto/botones) cuando
el slide llega a su posición. JS la sincroniza con la config de la
plantilla (contentFadeDuration), pero puedes tocarla aquí o en un
skin directamente. */
--zzms-content-fade-duration: 500ms;
/* Solo se usa si el slider está en modo alto completo (fullHeight).
Súbelo si hay un header fijo superpuesto y quieres descontar su
altura para que el slider no quede tapado. Ej: 90px.
--zzms-full-height-offset-mobile se aplica en cuanto la pantalla
baja de 992px (el breakpoint en el que The7 cambia al header con
menú hamburguesa, que suele tener menos altura que el de escritorio). */
--zzms-full-height-offset: 90px;
--zzms-full-height-offset-mobile: 60px;
/* Variables SOLO para el modo de layout "left-bottom" (ver
'contentLayout' en la config de la plantilla). No afectan en
absoluto al modo "center", que sigue usando
--zzms-content-max-width y su propio padding tal cual.
El ancho del texto en estos layouts lo fija
--zzms-content-text-max-width (ver nota junto a la regla).
- box-width: ancho de la "caja" del sitio con la que debe alinearse
el borde izquierdo del contenido (p. ej. el mismo ancho que el
contenedor del logo en el header). Cambia esto por proyecto.
- side-margin: margen lateral mínimo cuando la pantalla es más
estrecha que box-width (evita que el texto toque el borde en
móvil/tablet).
- side-margin-tablet: margen lateral fijo SOLO en el rango
993px-1400px, por encima de la fórmula max() de más abajo (ver
media query junto a la regla left-bottom). No toca ni la zona
de escritorio ancho (>1400px, sigue con la fórmula max()) ni la
de móvil (≤992px, sigue con side-margin).
- bottom-gap-desktop / bottom-gap-mobile: separación entre el
contenido y el borde inferior del slide, en escritorio y en el
breakpoint móvil (max-width:600px) respectivamente. Solo las
usa "left-bottom" (en "left-center" el bloque va centrado y no
hay borde del que separarse).
- vcenter-offset: SOLO para "left-center". Desplaza el bloque
respecto al centro exacto: valor positivo lo baja, negativo lo
sube. Útil cuando hay un header fijo superpuesto y el centro
óptico no coincide con el geométrico. Ej: -40px. */
--zzms-content-box-width: 1300px;
--zzms-content-side-margin: 20px;
--zzms-content-side-margin-tablet: 50px;
--zzms-content-bottom-gap-desktop: 140px;
--zzms-content-bottom-gap-mobile: 100px;
--zzms-content-vcenter-offset: 0px;
}
/*
* Reset de box-sizing, scoped SOLO al slider (no toca el resto del
* tema). Sin esto, un elemento con height:100% + padding (como
* .zz-multi-slider__content) suma el padding POR FUERA de ese 100%
* en vez de restarlo, desbordándose por debajo del slide y
* recortándose con el overflow:hidden del contenedor raíz — es la
* causa de que el padding-bottom del modo left-bottom "no funcionara"
* y cortara los botones (bug resuelto ya en ZZ Cool Slider).
*/
.zz-multi-slider,
.zz-multi-slider *,
.zz-multi-slider *::before,
.zz-multi-slider *::after {
box-sizing: border-box;
}
/* ------------------------------------------------------------
2. CONTENEDOR / SLIDE
------------------------------------------------------------ */
.zz-multi-slider {
position: relative;
width: 100%;
overflow: hidden;
height: var( --zzms-height-desktop );
background: var( --zzms-placeholder-bg ); /* color de fondo mientras carga la imagen o durante el reajuste de tamaño */
}
@media ( max-width: 1024px ) {
.zz-multi-slider {
height: var( --zzms-height-tablet );
}
}
@media ( max-width: 600px ) {
.zz-multi-slider {
height: var( --zzms-height-mobile );
}
}
/*
* Modo alto completo: el slider ocupa toda la altura de la pantalla,
* ignorando --zzms-height-desktop/tablet/mobile en cualquier ancho.
* Se activa con 'fullHeight' => true en la config de la plantilla.
* Especificidad reforzada (dos clases) a propósito, para que gane
* siempre a las reglas de los breakpoints de arriba, sin depender del
* orden en que aparezcan en el fichero.
*/
.zz-multi-slider.zz-multi-slider--full-height {
height: 100vh; /* fallback para navegadores sin soporte de dvh */
height: calc( 100dvh - var( --zzms-full-height-offset ) ); /* dvh: tiene en cuenta la barra de direcciones móvil, evita saltos al hacer scroll */
}
/* Por debajo de 992px (breakpoint de The7 para el header con hamburguesa,
normalmente con menos altura que el de escritorio), redefinimos el
valor de --zzms-full-height-offset. La regla de arriba no hay que
tocarla: al cambiar el valor de la variable, el calc() ya la recoge
sola. */
@media ( max-width: 992px ) {
.zz-multi-slider.zz-multi-slider--full-height {
--zzms-full-height-offset: var( --zzms-full-height-offset-mobile );
}
}
.zz-multi-slider__slide {
position: relative;
width: 100%;
height: 100%;
}
/*
* Capa de carga: cubre TODO el slide (no es solo un icono decorativo)
* mientras Swiper carga y calcula la posición inicial — es lo que
* evita ver el "salto" de la imagen a su posición correcta, tapándolo
* en vez de dejarlo pasar por detrás de un simple spinner pequeño.
* El JS (zz-multi-slider.js) añade la clase --ready al contenedor raíz
* en el evento "init" de Swiper, momento en el que ya está todo bien
* posicionado, y ahí es cuando se desvanece esta capa.
*/
.zz-multi-slider__loading-overlay {
position: absolute;
inset: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
background: var( --zzms-placeholder-bg );
transition: opacity 0.3s ease;
}
.zz-multi-slider__spinner {
width: 40px;
height: 40px;
border: 3px solid rgba( 0, 0, 0, 0.15 );
border-top-color: var( --zzms-spinner-color );
border-radius: 50%;
animation: zzms-spin 0.8s linear infinite;
}
.zz-multi-slider--ready .zz-multi-slider__loading-overlay {
opacity: 0;
pointer-events: none; /* deja de bloquear clics en cuanto empieza a desvanecerse */
}
@keyframes zzms-spin {
to {
transform: rotate( 360deg );
}
}
@media ( prefers-reduced-motion: reduce ) {
.zz-multi-slider__spinner {
animation: none; /* se queda estático en vez de girar */
}
.zz-multi-slider__loading-overlay {
transition: none; /* desaparece de golpe en vez de con fade */
}
}
/*
* Enlace de toda la diapositiva (modo "full_slide", ver inc/shortcode.php).
* display:contents hace que el propio no participe en el layout
* (no genera caja propia) — sus hijos (imagen de fondo + contenido)
* se comportan exactamente igual que si el no existiera, así no
* hay que duplicar ni retocar ninguna regla de las de más abajo.
* Al estar la imagen de fondo en position:absolute cubriendo todo el
* slide (inset:0) DENTRO del , cualquier punto del slide es
* clicable, aunque el propio no tenga caja visual.
*
* IMPORTANTE: para que eso último se cumpla de verdad, el overlay
* (.zz-multi-slider__slide::before) DEBE llevar pointer-events:none —
* ver la nota en la sección 3. Es un pseudo-elemento del slide, no del
* enlace, así que sin esa regla se traga los clics de toda la
* superficie salvo la que ocupa el contenido.
*/
.zz-multi-slider__slide-link {
display: contents;
cursor: pointer;
}
/*
* Zoom sutil de la imagen al pasar el ratón por encima (solo en el modo
* de enlace en toda la diapositiva). DESACTIVADO por defecto:
* --zzms-hover-zoom vale 1, es decir, escala sin cambio.
*
* Para activarlo en una plantilla concreta, basta con subir la variable
* en su skin, sin tocar ninguna regla:
*
* .zz-multi-slider--tpl-mi-plantilla { --zzms-hover-zoom: 1.03; }
*/
.zz-multi-slider__slide-link:hover .zz-multi-slider__bg {
transform: scale( var( --zzms-hover-zoom ) );
}
.zz-multi-slider__bg {
transition: transform var( --zzms-hover-zoom-duration ) ease;
}
/* ------------------------------------------------------------
3. IMAGEN DE FONDO
------------------------------------------------------------ */
/*
* Cuando la diapositiva tiene imagen alternativa para móviles, el ![]()
* va envuelto en un (ver inc/shortcode.php). A diferencia del
* ![]()
, el SÍ genera caja en el flujo, así que es él quien
* debe asumir el posicionamiento absoluto que cubre el slide; el ![]()
* de dentro pasa a llenar esa caja al 100%.
*
* Se posiciona el en vez de usar display:contents a
* propósito: display:contents con elementos reemplazados ha dado
* problemas en algunos navegadores, y esta vía es equivalente y
* predecible. Sin imagen móvil no hay y las reglas de
* .zz-multi-slider__bg de más abajo actúan tal cual, como siempre.
*/
.zz-multi-slider__picture {
position: absolute;
inset: 0;
display: block;
z-index: 0;
}
/*
* Elementor aplica una regla propia ".elementor img { height:auto;
* max-width:100%; ... }" a TODA imagen dentro de sus widgets. Esa
* regla combina una clase con un elemento (especificidad 0,1,1), que
* pesa más que nuestra ".zz-multi-slider__bg" de una sola clase
* (0,1,0) — gana siempre, da igual el orden de carga de los CSS. El
* !important de aquí no es capricho: es la única forma de que estas
* propiedades ESTRUCTURALES (posición, tamaño, ajuste) no dependan de
* qué builder o tema esté detrás. Nunca se usa para nada cosmético.
*/
.zz-multi-slider__picture .zz-multi-slider__bg {
position: absolute !important;
inset: 0 !important;
}
/*
* Mismo motivo que la nota de arriba: Elementor (".elementor img") y
* otros resets de tema/builder ganan por especificidad a una sola
* clase. Reforzado con !important SOLO en lo estructural — nunca en
* decoración, que debe seguir siendo domable desde cualquier skin sin
* pelear con esto.
*/
.zz-multi-slider__bg {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center !important;
z-index: 0;
}
/*
* Overlay para que el texto sea legible sobre cualquier imagen.
*
* pointer-events:none es IMPRESCINDIBLE, no un detalle: este overlay es
* un pseudo-elemento del SLIDE, no del enlace, y cubre toda su
* superficie por encima de la imagen (z-index 1 frente a 0). Sin esta
* regla se traga los clics en el modo "enlace en toda la diapositiva",
* y el enlace solo responde donde el contenido (z-index 2) queda por
* delante — es decir, exactamente sobre el texto y nada más. Además
* impedía que se dispararan el cursor de mano y el zoom en hover sobre
* la zona de imagen. Siendo puramente decorativo, no debe recibir
* eventos de ratón en ningún caso.
*/
.zz-multi-slider__slide::before {
content: '';
position: absolute;
inset: 0;
background: var( --zzms-overlay-color );
z-index: 1;
pointer-events: none;
}
/*
* Diapositivas "solo imagen": sin overlay, para que la imagen se vea
* tal cual se subió (el velo oscuro existe únicamente para dar
* legibilidad al texto, y aquí no hay texto que legibilizar).
*
* Si en alguna plantilla concreta interesara mantener un velo también
* en estas diapositivas, basta con darle color a la variable desde su
* skin, sin tocar esta regla:
*
* .zz-multi-slider--tpl-mi-plantilla { --zzms-overlay-color-only-image: rgba(0,0,0,.2); }
*/
.zz-multi-slider__slide--only-image::before {
background: var( --zzms-overlay-color-only-image, transparent );
}
/* ------------------------------------------------------------
4. CONTENIDO (título, texto, botones)
Por defecto: todo centrado, en horizontal y en vertical (layout
"center"). Los layouts "left-bottom" y "left-center" se activan
por clase modificadora más abajo.
------------------------------------------------------------ */
.zz-multi-slider__content {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 32px 48px;
max-width: var( --zzms-content-max-width );
margin: 0 auto;
color: var( --zzms-title-color );
}
@media ( max-width: 600px ) {
.zz-multi-slider__content {
padding: 24px;
}
}
/*
* ALINEACIÓN LATERAL IZQUIERDA — parte COMÚN a los layouts
* "left-bottom" y "left-center" (ver 'contentLayout' en la config de
* la plantilla). Lo único que diferencia a esos dos layouts es la
* posición VERTICAL del bloque, que se resuelve en las dos reglas de
* más abajo; todo lo horizontal se define aquí una sola vez.
*
* Ninguna de estas reglas toca el modo "center", que no lleva clase de
* layout y se queda con el bloque de arriba tal cual.
*
* padding-left con max(): en pantallas más anchas que box-width, alinea
* el contenido con el borde de la caja del sitio (mismo cálculo que usa
* el propio tema para centrar su contenedor). En cuanto la pantalla es
* más estrecha que eso, cambia solo al margen mínimo fijo (side-margin)
* sin necesidad de definir un breakpoint aparte — el propio max() lo
* resuelve solo en cualquier ancho de pantalla.
*
* La primera línea de padding-left (antes del max()) es un respaldo
* para navegadores muy antiguos sin soporte de max()/calc(): si la
* ignoran, se quedan con el margen fijo de side-margin en vez de caer
* al padding genérico de 48px del modo centrado. Los navegadores
* modernos aplican la segunda línea, que sobrescribe a la primera.
*/
.zz-multi-slider--layout-left-bottom .zz-multi-slider__content,
.zz-multi-slider--layout-left-center .zz-multi-slider__content {
align-items: flex-start;
text-align: left;
margin: 0;
padding-left: var( --zzms-content-side-margin );
padding-left: max( var( --zzms-content-side-margin ), calc( ( 100vw - var( --zzms-content-box-width ) ) / 2 ) );
padding-right: var( --zzms-content-side-margin );
/*
* max-width:none es OBLIGATORIO aquí, no un detalle de estilo.
*
* La regla base del layout centrado pone max-width al CONTENEDOR.
* En los layouts izquierdos eso entra en conflicto directo con el
* padding-left de alineación: como el slider usa box-sizing:
* border-box, el padding se DESCUENTA del max-width en lugar de
* sumarse, así que el ancho real del texto quedaba en
* "max-width − padding-left − padding-right". Y como el padding
* crece con el ancho de pantalla (para mantener la alineación con
* la caja del sitio), el texto se ENCOGÍA cuanto más grande era el
* monitor: con un max-width de 1000px, unos 960px de texto a
* 1200px de pantalla, pero solo 670px a 1920px.
*
* La solución no es tocar el padding (es el que alinea el bloque
* con la caja del sitio y debe seguir dependiendo del viewport),
* sino quitar el límite del contenedor —que aquí no cumple ninguna
* función, porque la posición ya la da el padding— y aplicarlo a
* los hijos: título, texto y botones. Así el ancho del texto es
* constante en cualquier pantalla, con independencia del padding.
*
* En móvil y tablet esto no cambia nada: por debajo de unos 1040px
* de pantalla no hay espacio para llegar al límite, y el texto
* sigue ocupando el ancho disponible menos los márgenes laterales,
* exactamente igual que antes.
*/
max-width: none;
}
/*
* El límite de ancho, aplicado a los hijos (ver nota de arriba).
* width:100% además del max-width: sin él, los elementos de bloque
* dentro de un contenedor flex en columna con align-items:flex-start
* se encogen al ancho de su contenido.
*
* El bloque de botones NO entra aquí a propósito: necesita
* width:max-content para que los dos botones se igualen al más ancho
* (ver sección 5). Un width:100% se lo comería.
*/
.zz-multi-slider--layout-left-bottom .zz-multi-slider__title,
.zz-multi-slider--layout-left-bottom .zz-multi-slider__text,
.zz-multi-slider--layout-left-center .zz-multi-slider__title,
.zz-multi-slider--layout-left-center .zz-multi-slider__text {
width: 100%;
max-width: var( --zzms-content-text-max-width );
}
/*
* Franja fija 993px-1400px: por debajo de esta regla, en pantallas más
* anchas que 1400px, sigue mandando la fórmula max() de arriba (zona
* de escritorio ancho, sin tocar). En 992px o menos, deja de
* aplicar este media query y vuelve a mandar --zzms-content-side-margin
* de la regla base (zona de header móvil).
*/
@media ( min-width: 993px ) and ( max-width: 1400px ) {
.zz-multi-slider--layout-left-bottom .zz-multi-slider__content,
.zz-multi-slider--layout-left-center .zz-multi-slider__content {
padding-left: var( --zzms-content-side-margin-tablet );
}
}
/*
* Layout "left-bottom": a la izquierda y pegado abajo, separado del
* borde inferior por --zzms-content-bottom-gap-desktop/mobile.
*/
.zz-multi-slider--layout-left-bottom .zz-multi-slider__content {
justify-content: flex-end;
padding-bottom: var( --zzms-content-bottom-gap-desktop );
}
@media ( max-width: 600px ) {
.zz-multi-slider--layout-left-bottom .zz-multi-slider__content {
padding-bottom: var( --zzms-content-bottom-gap-mobile );
}
}
/*
* Layout "left-center": a la izquierda pero centrado en altura. Hereda
* toda la alineación lateral de la regla común de arriba y solo cambia
* el eje vertical.
*
* No lleva padding-bottom propio a propósito: al estar el bloque
* centrado con justify-content, un padding inferior lo desplazaría
* hacia arriba en vez de separarlo de nada (el espacio sobrante se
* reparte solo arriba y abajo). Si en algún proyecto hiciera falta
* subir o bajar ligeramente el bloque, lo natural es tocar
* --zzms-content-vcenter-offset desde el skin de la plantilla.
*/
.zz-multi-slider--layout-left-center .zz-multi-slider__content {
justify-content: center;
/* Desplazamiento vertical fino respecto al centro exacto: positivo
baja el bloque, negativo lo sube. Útil cuando hay un header fijo
superpuesto y el centro óptico no coincide con el geométrico. */
transform: translateY( var( --zzms-content-vcenter-offset, 0 ) );
}
/*
* Fade in del contenido (título/texto/botones): solo aplica si el slider
* lleva la clase modificadora --fade-content (se añade automáticamente
* cuando "contentFadeIn" está activo en la config de la plantilla). El
* JS (ver zz-multi-slider.js) añade la clase "is-visible" al contenido
* del slide activo justo cuando termina de llegar a su posición — no
* antes. Si "contentFadeIn" está desactivado, esta regla ni siquiera se
* aplica y el contenido se ve siempre, sin depender del JS.
*/
.zz-multi-slider--fade-content .zz-multi-slider__content {
opacity: 0;
transition: opacity var( --zzms-content-fade-duration ) ease;
}
.zz-multi-slider--fade-content .zz-multi-slider__content.is-visible {
opacity: 1;
}
.zz-multi-slider__title {
font-size: clamp( 1.6rem, 4vw, 2.75rem );
line-height: 1.15;
margin: 0 0 12px;
color: var( --zzms-title-color );
}
.zz-multi-slider__text {
font-size: clamp( 0.95rem, 1.6vw, 1.15rem );
line-height: 1.5;
margin: 0 0 20px;
color: var( --zzms-text-color );
}
/* ------------------------------------------------------------
5. BOTONES
------------------------------------------------------------
Los dos botones miden siempre lo mismo: el ancho del que tenga el
texto más largo. Tanto en escritorio (uno al lado del otro) como en
móvil (uno debajo del otro).
Se consigue con grid en vez de flex, sin nada de JS:
- width:max-content hace que el contenedor se ajuste al contenido
más ancho, no al espacio disponible.
- grid-auto-columns:1fr reparte ese ancho a partes iguales entre
las columnas, así que las dos toman la medida de la mayor.
- los elementos se estiran a su celda por defecto (justify-items
vale stretch), de modo que no hace falta tocar el botón.
max-width:100% es la red de seguridad para textos largos (el campo
admite hasta 30 caracteres): limita el grid al espacio disponible y
el texto se parte en dos líneas en lugar de desbordar el slide.
Nota: al pasar de flex a grid se pierde el flex-wrap, es decir, el
salto automático de línea cuando no caben. Se sustituye por el
cambio a columna del media query de más abajo. En la franja
intermedia (601-992px) dos botones con textos muy largos se
comprimirían y partirían el texto en dos líneas en vez de apilarse,
pero seguirían midiendo lo mismo y sin salirse.
------------------------------------------------------------ */
.zz-multi-slider__buttons {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 14px;
width: max-content;
max-width: 100%;
margin-inline: auto; /* centra el bloque en el layout "center" */
}
/* En los layouts alineados a la izquierda, los botones también se pegan
a la izquierda (si no, quedarían centrados dentro de su propio
contenedor, aunque el título ya esté a la izquierda por text-align).
margin-inline:0 anula el centrado de la regla de arriba; el
width:max-content se mantiene, que es lo que iguala los anchos. */
.zz-multi-slider--layout-left-bottom .zz-multi-slider__buttons,
.zz-multi-slider--layout-left-center .zz-multi-slider__buttons {
margin-inline: 0;
}
/* Móvil: uno debajo del otro, ambos con el ancho del más largo. */
@media ( max-width: 600px ) {
.zz-multi-slider__buttons {
grid-auto-flow: row;
grid-auto-columns: auto;
}
}
.zz-multi-slider__btn {
display: inline-block;
padding: 12px 26px;
border-radius: var( --zzms-btn-radius );
text-decoration: none;
font-weight: 600;
text-align: center; /* el texto va centrado dentro de su ancho igualado */
transition: opacity 0.2s ease, transform 0.2s ease;
}
.zz-multi-slider__btn--1 {
background: var( --zzms-btn1-bg );
color: var( --zzms-btn1-color );
}
.zz-multi-slider__btn--2 {
background: var( --zzms-btn2-bg );
color: var( --zzms-btn2-color );
border: 1px solid var( --zzms-btn2-border );
}
.zz-multi-slider__btn:hover,
.zz-multi-slider__btn:focus-visible {
opacity: 0.85;
transform: translateY( -1px );
}
/* ------------------------------------------------------------
6. FLECHAS
------------------------------------------------------------ */
.zz-multi-slider__arrow {
color: #fff;
--swiper-navigation-size: 22px;
}
.zz-multi-slider__arrow::after {
font-size: var( --swiper-navigation-size );
}
@media ( max-width: 600px ) {
.zz-multi-slider__arrow {
display: none; /* en móvil se navega con gestos táctiles */
}
}
/* ------------------------------------------------------------
7. PAGINACIÓN
------------------------------------------------------------ */
.zz-multi-slider__pagination {
bottom: 20px !important;
}
.zz-multi-slider .swiper-pagination-bullet {
background: var( --zzms-pagination-color );
opacity: var( --zzms-pagination-opacity );
}
.zz-multi-slider .swiper-pagination-bullet-active {
background: var( --zzms-pagination-color-active );
opacity: 1;
}
/* ------------------------------------------------------------
7b. FLECHA "CONTINÚA ABAJO"
------------------------------------------------------------
Indicador centrado en la parte inferior del slider. Solo se
renderiza si la plantilla lleva 'showScrollIndicator' => true (ver
inc/shortcode.php), así que estas reglas no afectan a nada cuando
está desactivada.
Va posicionada respecto al contenedor raíz, no al slide, de modo
que se queda quieta mientras las diapositivas se desplazan.
------------------------------------------------------------ */
.zz-multi-slider__scroll-down {
position: absolute;
bottom: var( --zzms-scroll-down-bottom );
left: 50%;
transform: translateX( -50% );
z-index: 11; /* por encima de paginación y flechas (z-index 10) */
display: flex;
align-items: center;
justify-content: center;
width: var( --zzms-scroll-down-size );
height: var( --zzms-scroll-down-size );
padding: 0;
margin: 0;
background: var( --zzms-scroll-down-bg );
border: var( --zzms-scroll-down-border-width ) solid var( --zzms-scroll-down-border-color );
border-radius: 50%;
color: var( --zzms-scroll-down-color );
cursor: pointer;
-webkit-appearance: none;
appearance: none;
/* Transición del desvanecido al hacer scroll (ver clase is-hidden). */
transition: opacity 0.4s ease, visibility 0.4s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.zz-multi-slider__scroll-down svg {
width: var( --zzms-scroll-down-icon-size );
height: var( --zzms-scroll-down-icon-size );
display: block;
/*
* El rebote se aplica al SVG y no al botón a propósito: el botón ya
* usa transform para centrarse (translateX -50%), y una animación
* sobre esa misma propiedad lo descolocaría horizontalmente.
*
* Las dos flechas se mueven como un solo conjunto. Si alguna vez
* quisieras el efecto de cascada (la de abajo siguiendo a la de
* arriba con un pequeño retardo), habría que animar cada por
* separado con animation-delay distinto, en lugar de animar el