/**
 * ZD Bloques de Confianza - front
 *
 * Todas las medidas y colores llegan como variables CSS desde el <style> de
 * cada bloque (con sus media queries por dispositivo). Las propiedades de
 * texto van con !important para que el tema no las pise (h2, p del tema...).
 *
 * @author    Z Digital
 * @copyright Z Digital
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0
 */

.ztb {
  --ztb-cols: 5;
  --ztb-gap: 30px;
  --ztb-rgap: 48px;
  --ztb-icon: 150px;
  --ztb-aspace: 0px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  clear: both;
  background: var(--ztb-bg, transparent);
  padding: var(--ztb-py, 60px) 0;
  text-align: center;
}
.ztb *,
.ztb *::before,
.ztb *::after { box-sizing: border-box; }
.ztb--align-left { text-align: left; }
.ztb--align-right { text-align: right; }

.ztb__inner {
  max-width: var(--ztb-maxw, 1400px);
  margin: 0 auto;
  padding: 0 var(--ztb-px, 20px);
}

/* ---------- Encabezado ---------- */
.ztb__head { margin: 0 0 var(--ztb-hgap, 56px); }

.ztb .ztb__title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--ztb-tf) !important;
  font-stretch: var(--ztb-tfs) !important;
  font-weight: var(--ztb-tw) !important;
  font-size: var(--ztb-ts) !important;
  line-height: var(--ztb-tlh) !important;
  letter-spacing: var(--ztb-tls) !important;
  text-transform: var(--ztb-ttr) !important;
  color: var(--ztb-c1) !important;
  text-align: inherit !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  border: 0 !important;
  background: none !important;
}
.ztb .ztb__t1 { color: var(--ztb-c1) !important; }
.ztb .ztb__t2 { color: var(--ztb-c2) !important; display: var(--ztb-t2d, inline); }

.ztb .ztb__subtitle {
  margin: 1.35em 0 0 !important;
  padding: 0 !important;
  font-family: var(--ztb-sf) !important;
  font-stretch: var(--ztb-sfs) !important;
  font-weight: var(--ztb-sw) !important;
  font-size: var(--ztb-ss) !important;
  line-height: var(--ztb-slh) !important;
  text-transform: var(--ztb-str) !important;
  color: var(--ztb-sc) !important;
  text-align: inherit !important;
}

/* ---------- Visor y pista ---------- */
.ztb__viewport {
  position: relative;
  padding: 0 var(--ztb-aspace);
}
.ztb__track {
  position: relative;
  display: flex;
  flex-wrap: var(--ztb-wrap, wrap);
  justify-content: var(--ztb-justify, center);
  column-gap: var(--ztb-gap);
  row-gap: var(--ztb-rgap);
  overflow-x: var(--ztb-ovx, visible);
  scroll-snap-type: var(--ztb-snap, none);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin: 0;
  padding: 10px 0;
  list-style: none;
}
.ztb__track::-webkit-scrollbar { display: none; }

.ztb__item {
  position: relative;
  flex: 0 0 calc((100% - (var(--ztb-cols) - 1) * var(--ztb-gap)) / var(--ztb-cols));
  max-width: calc((100% - (var(--ztb-cols) - 1) * var(--ztb-gap)) / var(--ztb-cols));
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-snap-align: start;
  padding: 0 4px;
}
.ztb__item:last-child { scroll-snap-align: end; }
.ztb--align-left .ztb__item { align-items: flex-start; }
.ztb--align-right .ztb__item { align-items: flex-end; }

/* Divisor vertical: centrado en el hueco a la izquierda del item. El PHP
   lo oculta en el primero de cada fila / del carrusel. */
.ztb__item::before {
  content: "";
  display: none;
  position: absolute;
  left: calc(var(--ztb-gap) / -2 - var(--ztb-divider-w, 1px) / 2);
  top: calc((100% - var(--ztb-divider-h, 100%)) / 2);
  width: var(--ztb-divider-w, 1px);
  height: var(--ztb-divider-h, 100%);
  background: var(--ztb-divider, #1a1a1a);
  pointer-events: none;
}

.ztb .ztb__link {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  width: 100%;
  color: inherit !important;
  text-decoration: none !important;
}

.ztb__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--ztb-icon);
  margin: 0 0 var(--ztb-icon-gap, 36px);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), filter .35s ease;
}
.ztb--align-left .ztb__icon { justify-content: flex-start; }
.ztb--align-right .ztb__icon { justify-content: flex-end; }
.ztb .ztb__icon svg,
.ztb .ztb__icon img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0;
  border: 0;
  box-shadow: none;
}
.ztb--iconcolor .ztb__icon svg { fill: var(--ztb-icon-c); color: var(--ztb-icon-c); }
.ztb--iconcolor .ztb__icon svg *:not([fill="none"]) { fill: var(--ztb-icon-c) !important; }
.ztb--iconcolor .ztb__icon svg [stroke]:not([stroke="none"]) { stroke: var(--ztb-icon-c) !important; }

.ztb .ztb__ititle {
  margin: 0 0 .75em !important;
  padding: 0 !important;
  font-family: var(--ztb-itf) !important;
  font-stretch: var(--ztb-itfs) !important;
  font-weight: var(--ztb-itw) !important;
  font-size: var(--ztb-its) !important;
  line-height: 1.2 !important;
  letter-spacing: var(--ztb-itls) !important;
  text-transform: var(--ztb-ittr) !important;
  color: var(--ztb-itc) !important;
  text-align: inherit !important;
  border: 0 !important;
  background: none !important;
}
.ztb .ztb__itext {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--ztb-txf) !important;
  font-stretch: var(--ztb-txfs) !important;
  font-weight: var(--ztb-txw) !important;
  font-size: var(--ztb-txs) !important;
  line-height: var(--ztb-txlh) !important;
  color: var(--ztb-txc) !important;
  text-align: inherit !important;
}

.ztb .ztb__tagline {
  margin: var(--ztb-hgap, 56px) 0 0 !important;
  padding: 0 !important;
  font-family: var(--ztb-tgf) !important;
  font-stretch: var(--ztb-tgfs) !important;
  font-weight: var(--ztb-tgw) !important;
  font-size: var(--ztb-tgs) !important;
  line-height: 1.2 !important;
  letter-spacing: var(--ztb-tgls) !important;
  text-transform: var(--ztb-tgtr) !important;
  color: var(--ztb-tgc) !important;
  text-align: inherit !important;
}

/* ---------- Flechas y puntos ---------- */
.ztb .ztb__arrow {
  display: var(--ztb-arrows, none);
  position: absolute;
  top: calc(10px + var(--ztb-icon) / 2);
  z-index: 3;
  width: 42px;
  height: 42px;
  margin: -21px 0 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ztb-arrow-b, transparent);
  border-radius: 50%;
  background: var(--ztb-arrow-bg, transparent);
  color: var(--ztb-arrow-c, #0a0a0a);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
  cursor: pointer;
  line-height: 1;
  transition: opacity .2s, transform .2s, background .2s;
}
.ztb .ztb__arrow:hover:not(:disabled) { transform: scale(1.08); }
.ztb .ztb__arrow:focus-visible { outline: 2px solid var(--ztb-dot-a, #1dbf84); outline-offset: 2px; }
.ztb .ztb__arrow:disabled { opacity: .3; cursor: default; }
.ztb .ztb__arrow svg { width: 20px; height: 20px; display: block; }
.ztb__arrow--prev { left: 0; }
.ztb__arrow--next { right: 0; }

.ztb__dots {
  display: var(--ztb-dots, none);
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
}
.ztb .ztb__dot {
  width: 8px;
  height: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: var(--ztb-dot, #cfcfcf);
  cursor: pointer;
  transition: width .3s ease, background .3s ease;
}
.ztb .ztb__dot.is-active { width: 24px; background: var(--ztb-dot-a, #1dbf84); }
.ztb .ztb__dot:focus-visible { outline: 2px solid var(--ztb-dot-a, #1dbf84); outline-offset: 2px; }

/* Sin desbordamiento (todo cabe) o en modo grilla: sin navegacion */
.ztb--static .ztb__arrow,
.ztb--static .ztb__dots { display: none !important; }
.ztb--static .ztb__viewport { padding: 0; }

/* ---------- Efectos al aparecer ---------- */
.ztb--anim .ztb__item {
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.ztb--pre.ztb--anim .ztb__item { opacity: 0; }
.ztb--pre.ztb--anim-fade-up .ztb__item { transform: translateY(28px); }
.ztb--pre.ztb--anim-zoom .ztb__item { transform: scale(.9); }
.ztb--pre.ztb--anim .ztb__item.is-in { opacity: 1; transform: none; }

/* ---------- Efectos al pasar el mouse ---------- */
@media (hover: hover) {
  .ztb--hover-lift .ztb__item { transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .6s ease; }
  .ztb--hover-lift .ztb__item:hover,
  .ztb--pre.ztb--anim.ztb--hover-lift .ztb__item.is-in:hover { transform: translateY(-6px); }
  .ztb--hover-zoom .ztb__item:hover .ztb__icon { transform: scale(1.08); }
  .ztb--hover-glow .ztb__item:hover .ztb__icon {
    filter: drop-shadow(0 10px 22px rgba(29, 191, 132, .45));
    filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--ztb-c2) 45%, transparent));
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ztb *,
  .ztb .ztb__item { transition: none !important; }
  .ztb__track { scroll-behavior: auto; }
  .ztb--pre.ztb--anim .ztb__item { opacity: 1; transform: none; }
}