/* =========================
   ZAGAZ · Rotador (tu + palabra) solo CSS
   ========================= */
:root{
  --zg-green:#16a34a;
  --zg-ink:#111111;
  --zg-line:1.05em; /* alto de cada renglón del rotador */
}

.zg-rotor{
  display:inline-block;
  height:var(--zg-line) !important;
  overflow:hidden !important;
  vertical-align:baseline;
  white-space:nowrap; /* evita salto interno */
}

.zg-track{
  display:inline-block;     /* caja propia para que % funcione bien */
  height:100%;              /* 100% = 1 renglón (var(--zg-line)) */
  will-change:transform;
  animation:zg-slideup 7.5s linear infinite both !important;
  transform:translateY(0);
}

/* Cada renglón: "tu " (negro) + palabra (verde) */
.zg-track > .zg-row{
  display:block;
  height:var(--zg-line) !important;
  line-height:var(--zg-line) !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap;
}

/* 'tu' fijo del rotador (nombre nuevo para evitar choque con .zg-tu del video) */
.zg-row .zg-fijo{
  color:var(--zg-ink) !important;   /* negro, mismo tono del H1 */
  font-weight:800;                   /* acompaña el peso del H1 */
  text-transform:none !important;    /* en minúsculas */
  background:none !important;        /* sin degradados del overlay */
  -webkit-text-fill-color:initial !important;
  mix-blend-mode:normal !important;
}



.zg-row .zg-word{
  color:var(--zg-green) !important; /* palabra en verde */
  font-weight:700 !important;
  font-size:inherit !important;
  text-align:left !important;
}

/* Pausa larga + deslizamiento corto (sin bordes duplicados) */
@keyframes zg-slideup{
  0%,24%   { transform:translateY(0%); }
  28%,52%  { transform:translateY(-100%); }
  56%,80%  { transform:translateY(-200%); }
  84%,96%  { transform:translateY(-300%); }
  100%     { transform:translateY(-400%); } /* hacia el sentinela */
}

/* Accesibilidad (animaciones) */
@media (prefers-reduced-motion: reduce){
  .zg-track{ animation: none !important; }      /* rotador */
  #comunidad .zg-bubble{ transition: none !important; } /* burbujas */
}
/* ====== Sección: ¿Qué es la comunidad ZAGAZ? ====== */
/* Variables y tiempos */
:root{
  --zg-navy: #0b1020;
  --zg-in: 700ms;        /* entrada */
  --zg-out: 420ms;       /* salida */
  --zg-delay-b1: 80ms;
  --zg-delay-b2: 160ms;
  --zg-delay-b3: 240ms;
  --zg-delay-b4: 320ms;
  --wrap-pt-d: 120px;    /* respiro desktop */
  --wrap-pb-d: 140px;
  --wrap-pt-m: 64px;     /* respiro móvil */
  --wrap-pb-m: 160px;
}

#comunidad{ position:relative; isolation:isolate; }

/* Área azul */
#comunidad .zg-comunidad-wrap{
  position:relative;
  background:var(--zg-navy) !important;
  overflow:hidden !important;
  padding-top:var(--wrap-pt-d);
  padding-bottom:var(--wrap-pb-d);
}

/* Capas: copy arriba, burbujas atrás (sin máscara) */
#comunidad .content{ position:relative; z-index:2; margin-left:auto; margin-right:auto; }
#comunidad .zg-bubbles{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  -webkit-mask:none !important; mask:none !important;
}

/* ===== Burbujas (base) ===== */
/* AHORA .zg-bubble es solo el CONTENEDOR redondo */
#comunidad .zg-bubble{
  position:absolute;
  display:block;
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;                  /* recorta lo que se salga */
  -webkit-user-drag:none;
  user-select:none;
  will-change:transform, opacity, filter;
  opacity:0;
  transform:translateY(24px) scale(.94);
  transition-property: opacity, transform, filter;
  transition-duration: var(--zg-out);
  transition-timing-function: cubic-bezier(.22,.61,.36,1);
}

/* La IMAGEN de adentro es la que llenará el círculo y le hacemos zoom */
#comunidad .zg-bubble > img{
  width:120%;
  height:120%;
  object-fit:cover;
  display:block;
  transform:translate(-10%, -8%);   /* mueve un poquito hacia arriba y al centro */
}


#comunidad .zg-bubble.is-visible{
  opacity:1; transform:translateY(0) scale(1);
  transition-duration: var(--zg-in);
  filter: drop-shadow(0 8px 28px rgba(0,0,0,.16));
}

/* Stagger por burbuja */
#comunidad .zg-bubble.is-visible.b1{ transition-delay: var(--zg-delay-b1); }
#comunidad .zg-bubble.is-visible.b2{ transition-delay: var(--zg-delay-b2); }
#comunidad .zg-bubble.is-visible.b3{ transition-delay: var(--zg-delay-b3); }
#comunidad .zg-bubble.is-visible.b4{ transition-delay: var(--zg-delay-b4); }

/* --------- MÓVIL --------- */
@media (max-width: 899.98px){
  #comunidad .zg-comunidad-wrap{
    padding-top:var(--wrap-pt-m);
    padding-bottom:var(--wrap-pb-m);
  }
  #comunidad .content{ padding: 0 18px; max-width: 640px; }
  #comunidad .zg-bubbles .zg-bubble{ max-inline-size:92vw; }

  /* 2 arriba + 2 abajo, dentro del viewport */
  #comunidad .zg-bubble.b1{ width:42vw; top:22px; left:4%; }
  #comunidad .zg-bubble.b2{ width:46vw; top:74px; right:6%; }
  #comunidad .zg-bubble.b3{ width:50vw; bottom:90px; left:6%; }
  #comunidad .zg-bubble.b4{ width:42vw; bottom:28px; right:6%; }
}

/* --------- DESKTOP --------- */
@media (min-width: 900px){
  /* Izquierda (adentro del viewport) */
  #comunidad .zg-bubble.b2{ width:340px; top:10%; left:2%; }
  #comunidad .zg-bubble.b1{ width:210px; top:60%; left:2%; }

  /* Derecha (adentro del viewport) */
  #comunidad .zg-bubble.b3{ width:min(360px,28vw); top:16%; right:2%; }
  #comunidad .zg-bubble.b4{ width:220px; bottom:6%; right:2%; }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  #comunidad .zg-bubble{ transition: none !important; }
}
/* === ZAGAZ · Burbujas — R21: tamaños distintos desktop + móvil === */
/* Desktop: cuatro tamaños distintos, posiciones seguras */
@media (min-width: 900px){
  #comunidad .zg-bubble.b1{
    width: 200px !important;
    top: 60% !important;
    left: -1% !important;
  }
  #comunidad .zg-bubble.b2{
    width: 340px !important;
    top: 10% !important;
    left: 4% !important;
  }
  #comunidad .zg-bubble.b3{
    width: clamp(320px, 28vw, 420px) !important;
    top: 18% !important;
    right: 8% !important;
  }
  #comunidad .zg-bubble.b4{
    width: 240px !important;
    bottom: 6% !important;
    right: 4% !important;
  }
}

/* Móvil: dos arriba + dos abajo, más aire y tamaños distintos */
@media (max-width: 899.98px){
  /* un poco más de aire en la franja azul */
  #comunidad .zg-comunidad-wrap{
    padding-top: 84px !important;
    padding-bottom: 200px !important;
  }

  /* 2 arriba */
  #comunidad .zg-bubble.b1{
    width: 40vw !important;
    top: 24px !important;
    left: 4% !important;
  }
  #comunidad .zg-bubble.b2{
    width: 52vw !important;
    top: 92px !important;
    right: 6% !important;
  }

  /* 2 abajo */
  #comunidad .zg-bubble.b3{
    width: 56vw !important;
    bottom: 112px !important;
    left: 6% !important;
  }
  #comunidad .zg-bubble.b4{
    width: 44vw !important;
    bottom: 24px !important;
    right: 8% !important;
  }
}
/* === ZAGAZ · Burbujas — R22: más chicas + más aire (desktop y móvil) === */

/* Asegura que no haya máscara activa */
#comunidad .zg-bubbles{
  -webkit-mask: none !important;
          mask: none !important;
}

/* DESKTOP: tamaños distintos y MÁS HACIA ADENTRO (no negativos) */
@media (min-width: 900px){
  #comunidad .zg-bubble{ filter: drop-shadow(0 8px 22px rgba(0,0,0,.14)); }

  /* izquierda */
  #comunidad .zg-bubble.b2{
    width: 260px !important;   /* tamaño 1 */
    top: 12% !important;
    left: 8% !important;        /* hacia adentro */
  }
  #comunidad .zg-bubble.b1{
    width: 150px !important;   /* tamaño 2 */
    top: 62% !important;
    left: 6% !important;        /* hacia adentro */
  }

  /* derecha */
  #comunidad .zg-bubble.b3{
    width: clamp(260px, 22vw, 320px) !important;  /* tamaño 3 */
    top: 18% !important;
    right: 8% !important;       /* hacia adentro */
  }
  #comunidad .zg-bubble.b4{
    width: 170px !important;   /* tamaño 4 */
    bottom: 8% !important;
    right: 6% !important;       /* hacia adentro */
  }
}

/* MÓVIL: 2 arriba + 2 abajo, más aire y hacia adentro (sin tapar el texto) */
@media (max-width: 899.98px){
  /* aire extra en la franja azul */
  #comunidad .zg-comunidad-wrap{
    padding-top: 100px !important;
    padding-bottom: 220px !important;
  }

  /* 2 ARRIBA (hacia adentro) */
  #comunidad .zg-bubble.b1{
    width: 28vw !important;    /* tamaño A */
    top: 16px !important;
    left: 8% !important;
  }
  #comunidad .zg-bubble.b2{
    width: 36vw !important;    /* tamaño B */
    top: 72px !important;
    right: 8% !important;
  }

  /* 2 ABAJO (hacia adentro) */
  #comunidad .zg-bubble.b3{
    width: 40vw !important;    /* tamaño C */
    bottom: 120px !important;
    left: 8% !important;
  }
  #comunidad .zg-bubble.b4{
    width: 26vw !important;    /* tamaño D */
    bottom: 28px !important;
    right: 8% !important;
  }

  /* pantallas muy angostas: aún más chicas para evitar solape */
  @media (max-width: 380px){
    #comunidad .zg-bubble.b1{ width: 26vw !important; }
    #comunidad .zg-bubble.b2{ width: 32vw !important; }
    #comunidad .zg-bubble.b3{ width: 36vw !important; }
    #comunidad .zg-bubble.b4{ width: 24vw !important; }
  }
}

/* ========== ZAGAZ · Burbujas — FINAL OVERRIDE R23 (pegar al final) ========== */

/* Copy por encima, burbujas debajo y SIN máscara */
#comunidad .content{ position:relative; z-index:2 !important; }
#comunidad .zg-bubbles{
  position:absolute; inset:0; z-index:1 !important; pointer-events:none;
  -webkit-mask:none !important; mask:none !important;
}

/* ===== Desktop (≥900px): más chicas, todas distintas y fuera del corredor ===== */
@media (min-width:900px){
  #comunidad .zg-bubble{ filter: drop-shadow(0 8px 22px rgba(0,0,0,.14)) !important; }

  /* izquierda */
  #comunidad .zg-bubble.b2{ width:230px !important; top:10% !important; left:6% !important; }
  #comunidad .zg-bubble.b1{ width:180px !important; top:64% !important; left:12% !important; }

  /* derecha */
  #comunidad .zg-bubble.b3{ width:clamp(240px,20vw,320px) !important; top:18% !important; right:6% !important; }
  #comunidad .zg-bubble.b4{ width:120px !important; bottom:8% !important; right:6% !important; }
}

/* ===== Móvil (<900px): 2 arriba + 2 abajo, más aire y tamaños distintos ===== */
@media (max-width:899.98px){
  /* respiro extra del bloque azul */
  #comunidad .zg-comunidad-wrap{
    padding-top:96px !important;
    padding-bottom:220px !important;
  }

  /* 2 ARRIBA */
  #comunidad .zg-bubble.b1{ width:30vw !important; top:16px !important; left:-10% !important; }
  #comunidad .zg-bubble.b2{ width:38vw !important; top:72px !important; right:6% !important; }

  /* 2 ABAJO */
  #comunidad .zg-bubble.b3{ width:42vw !important; bottom:128px !important; left:-10% !important; }
  #comunidad .zg-bubble.b4{ width:28vw !important; bottom:24px !important; right:-10% !important; }
}
/* === Añadidos para 6 burbujas — SOLO Desktop === */

/* Delays para el stagger */
:root{
  --zg-delay-b5: 400ms;
  --zg-delay-b6: 480ms;
}
#comunidad .zg-bubble.is-visible.b5{ transition-delay: var(--zg-delay-b5); }
#comunidad .zg-bubble.is-visible.b6{ transition-delay: var(--zg-delay-b6); }

/* Desktop (≥900px): posiciones seguras a los costados */
@media (min-width:900px){
  /* izquierda: b2 (mediana), b1 (chica), b5 (chica intermedia) */
  #comunidad .zg-bubble.b2{ width:230px !important; top:10% !important; left:6% !important; }
  #comunidad .zg-bubble.b1{ width:180px !important; top:64% !important; left:12% !important; }
  #comunidad .zg-bubble.b5{ width:140px !important; top:36% !important; left:8% !important; }

  /* derecha: b3 (grande), b6 (mediana), b4 (chica) */
  #comunidad .zg-bubble.b3{ width:clamp(240px,20vw,320px) !important; top:16% !important; right:6% !important; }
  #comunidad .zg-bubble.b6{ width:180px !important; bottom:38% !important; right:12% !important; }
  #comunidad .zg-bubble.b4{ width:120px !important; bottom:8% !important; right:6% !important; }
}

/* Mobile (<900px): oculta las nuevas para no afectar el layout */
@media (max-width:899.98px){
  #comunidad .zg-bubble.b5,
  #comunidad .zg-bubble.b6{ display:none !important; }
}
/* ========== ZAGAZ · Burbujas — R26 (solo DESKTOP: altura + 6 burbujas) ========== */

/* staggers extra para b5 y b6 */
:root{
  --zg-delay-b5: 400ms;
  --zg-delay-b6: 480ms;
}
#comunidad .zg-bubble.is-visible.b5{ transition-delay: var(--zg-delay-b5); }
#comunidad .zg-bubble.is-visible.b6{ transition-delay: var(--zg-delay-b6); }

/* ===== Desktop (≥900px) ===== */
@media (min-width:900px){
  /* 1) franja azul MÁS ALTA solo en desktop */
  #comunidad .zg-comunidad-wrap{
    /* más “respiro” arriba/abajo; ajusta a gusto */
    padding-top: 168px !important;
    padding-bottom: 260px !important;
  }

  /* 2) seis burbujas: tres a la izquierda + tres a la derecha
        (tamaños todos distintos y fuera del corredor del texto) */
  /* IZQUIERDA */
  #comunidad .zg-bubble.b2{ width: 220px !important; top: 8%  !important; left: 1%  !important; }
  #comunidad .zg-bubble.b5{ width: 130px !important; top: 34% !important; left: 10% !important; }
  #comunidad .zg-bubble.b1{ width: 150px !important; top: 62% !important; left: 12% !important; }

  /* DERECHA */
  #comunidad .zg-bubble.b3{ width: clamp(220px, 18vw, 300px) !important; top: 12% !important; right: 4%  !important; }
  #comunidad .zg-bubble.b6{ width: 170px !important; bottom: 40% !important; right: 30% !important; }
  #comunidad .zg-bubble.b4{ width: 110px !important; bottom: 10% !important; right: 6%  !important; }
}

/* (Opcional) pantallas muy anchas: súbelas un poco para que no se vean pequeñas */
@media (min-width:1440px){
  #comunidad .zg-bubble.b2{ width: 240px !important; }
  #comunidad .zg-bubble.b3{ width: clamp(240px, 18vw, 320px) !important; }
  #comunidad .zg-bubble.b6{ width: 190px !important; }
}

/* ===== Mobile (<900px) =====
   b5 y b6 NO existen en móvil para no saturar */
@media (max-width:899.98px){
  #comunidad .zg-bubble.b5,
  #comunidad .zg-bubble.b6{ display:none !important; }
}
/* ========== ZAGAZ · Burbujas — R27 FINAL (Desktop: 6 burbujas + transiciones lentas + anti-óvalo) ========== */

/* 1) Tiempos más lentos para TODAS las burbujas */
:root{
  --zg-in: 2200ms !important;   /* entrada */
  --zg-out: 1500ms !important;  /* salida  */
  --zg-delay-b5: 400ms;
  --zg-delay-b6: 480ms;
}

/* 2) Estado base y accesibilidad (no cambia lo previo, sólo refuerza) */
#comunidad .zg-bubble{
  transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
}
#comunidad .zg-bubble.is-visible{
  transition-timing-function: cubic-bezier(.2,.8,.2,1) !important;
}
#comunidad .zg-bubble.is-visible.b5{ transition-delay: var(--zg-delay-b5); }
#comunidad .zg-bubble.is-visible.b6{ transition-delay: var(--zg-delay-b6); }

/* 3) SOLO DESKTOP: anti-óvalo + aire + centrado del copy + posiciones y tamaños finales */
@media (min-width:900px){
  /* Anti-óvalo: limpia restricciones heredadas y fuerza 1:1 */
  #comunidad .zg-bubble{
    top:auto !important; bottom:auto !important;
    left:auto !important; right:auto !important;
    height:auto !important; aspect-ratio:1/1 !important;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,.14)) !important;
  }

  /* Aire y centrado del texto */
  #comunidad .zg-comunidad-wrap{
    padding-top: 280px !important;
    padding-bottom: 300px !important;
    display: grid !important;
  }
  #comunidad .zg-comunidad-wrap > .content{
    align-self: center !important;
    margin-top: 24px !important;
  }

  /* IZQUIERDA (b2 arriba, b5 centro GRANDE, b1 abajo) */
  #comunidad .zg-bubble.b2{ width:160px !important; top:6%  !important; left:12% !important; }
  #comunidad .zg-bubble.b5{ width:240px !important; top:26% !important; left:4%  !important; }
  #comunidad .zg-bubble.b1{ width:130px !important; top:54% !important; left:12% !important; }

  /* DERECHA (b3 arriba, b6 centro GRANDE, b4 abajo) */
  #comunidad .zg-bubble.b3{ width:170px !important;     top:18% !important; right:14% !important; }
  #comunidad .zg-bubble.b6{ width:clamp(240px,20vw,300px) !important; top:44% !important; right:7%  !important; }
  #comunidad .zg-bubble.b4{ width:120px !important;     top:66% !important; right:22% !important; }

  /* Lado derecho con clase nueva para un observer propio (evita que queden “prendidas”) */
  #comunidad .zg-bubble.rightfix{
    opacity:0 !important;
    transform: translateY(24px) scale(.94) !important;
    transition-property: opacity, transform, filter !important;
    transition-duration: var(--zg-out) !important;
  }
  #comunidad .zg-bubble.rightfix.io2-visible{
    opacity:1 !important;
    transform: translateY(0) scale(1) !important;
    transition-duration: var(--zg-in) !important;
    filter: drop-shadow(0 8px 28px rgba(0,0,0,.16)) !important;
  }
}

/* 4) SOLO MÓVIL: mantenemos 4 burbujas; oculta b5 y b6 para no saturar */
@media (max-width:899.98px){
  #comunidad .zg-bubble.b5,
  #comunidad .zg-bubble.b6{ display:none !important; }
}
/* ========== ZAGAZ · Móvil — R28 (aire + posiciones 2 arriba / 2 abajo) ========== */
@media (max-width: 899.98px){
  /* Más aire arriba en la franja azul */
  #comunidad .zg-comunidad-wrap{
    padding-top: 240px !important; /* aprobado en consola */
  }

  /* 2 ARRIBA */
  /* b1: más a la derecha (mantiene top original) */
  #comunidad .zg-bubble.b1{
    left: 6% !important;
  }
  /* b2: sin cambios */

  /* 2 ABAJO */
  /* b3: más abajo y a la derecha; entra completa y no pisa texto */
  #comunidad .zg-bubble.b3{
    bottom: 40px !important;
    left: 6% !important;
  }
  /* b4: un poco más hacia el centro (izquierda) y visible */
  #comunidad .zg-bubble.b4{
    right: 6% !important;
  }

  /* Garantiza 4 burbujas en móvil */
  #comunidad .zg-bubble.b5,
  #comunidad .zg-bubble.b6{
    display: none !important;
  }
}
/* ========== ZAGAZ · iPad 11" horizontal — R29 ========== */
@media (min-width:1100px) and (max-width:1280px){
  /* 2ª izquierda (b5): más a la izquierda */
  #comunidad .zg-bubble.b5{ left: 0% !important; }

  /* 3ª derecha (b4): un poco más arriba */
  #comunidad .zg-bubble.b4{ top: 72% !important; }

  /* 2ª derecha (b6): pegadita al borde derecho */
  #comunidad .zg-bubble.b6{ right: 0% !important; }
}
/* ========== ZAGAZ · iPad mini horizontal — R30 ========== */
/* Cobertura segura para 11xx px (tu viewport marcó 1132 px) */
@media (min-width:1100px) and (max-width:1180px){
  /* Izq #1 (arriba-izq) = b2 → más a la derecha */
  #comunidad .zg-bubble.b2{ left: 12vw !important; right: auto !important; }

  /* Izq #3 (abajo-izq) = b1 → más a la derecha (ajuste fino final) */
  #comunidad .zg-bubble.b1{ left: 10.2vw !important; right: auto !important; }

  /* Der #1 (arriba-der) = b3 → más a la izquierda (hacia el centro) */
  #comunidad .zg-bubble.b3{ right: 7vw !important; left: auto !important; }
}
/* ========== ZAGAZ · iPhone XS/Pro Max vertical — R31 ========== */
/* Aplica a ~414–430 px de ancho en orientación vertical */
@media (min-width:400px) and (max-width:450px) and (orientation:portrait){

  /* Que la sección azul solo se “asome” al entrar */
  #comunidad{
    margin-top: 95px !important;       /* aire entre CTAs y la franja azul */
  }
  #comunidad .zg-peek{
    height: 2px !important;            /* franja ultra-delgada */
  }

  /* Burbujas (NO movemos el texto) */
  /* Arriba */
  #comunidad .zg-bubble.b1{ top: 72px !important; }   /* chica superior izq */
  #comunidad .zg-bubble.b2{ top: 72px !important; }  /* GRANDE superior der (valor aprobado) */

  /* Abajo */
  #comunidad .zg-bubble.b3{
    top: auto !important;
    bottom: 24px !important;           /* baja un poco para despegar del texto */
  }
  #comunidad .zg-bubble.b4{
    top: auto !important;
    bottom: 24px !important;
  }
}
/* ===== S3: estado inerte (colapsada si no tiene contenido) ===== */
.s3-inert {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Cuando se despierte, solo tendrá que estar en .ready */
#s3-prueba.ready {
  opacity: 1 !important;
  pointer-events: auto !important;
  height: auto !important;
}
/* ===== ZAGAZ · S3 (Grid + Modal) — Namespaced ===== */
:root{
  --zg-s3-green:#16a34a;
  --zg-s3-green-ink:#15803d;
  --zg-s3-ink:#0a0a0a;
  --zg-s3-muted:#6b7280;
  --zg-s3-radius:10px;
  --zg-s3-radius-sm:8px;
}

#zg-s3-root *{ box-sizing:border-box }

/* Contenedor */
.zg-s3-wrap{
  width:100%;
  margin:56px auto;
  padding:0 clamp(16px, 3vw, 48px);
  max-width: min(1400px, 98vw);
}

/* Grid 3×2 responsive */
.zg-s3-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(24px, 3vw, 48px);
  align-items:stretch;
}
@media (max-width:900px){ .zg-s3-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:600px){ .zg-s3-grid{ grid-template-columns:1fr } }

/* Tarjeta */
.zg-s3-card{
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:var(--zg-s3-radius);
  box-shadow:0 20px 60px rgba(0,0,0,.10);
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

/* Media */
.zg-s3-card-media{
  margin-bottom:12px;
  display:flex; align-items:center; justify-content:center;
}
.zg-s3-card-img{
  display:block;
  width:auto; height:auto;
  max-width:100%;
  max-height:110px;
  object-fit:contain;
}

/* Títulos + CTA */
.zg-s3-title{
  margin:0 0 10px;
  font-size:24px; line-height:1.2;
  color:var(--zg-s3-ink);
  font-weight:800;
}
.zg-s3-cta{
  background:transparent; border:0; padding:0; cursor:pointer;
  align-self:flex-start;
  font-weight:800; font-size:18px;
  color:var(--zg-s3-green);
}
.zg-s3-cta:hover{ color:var(--zg-s3-green-ink); text-decoration:underline }

/* Overlay + Modal */
.zg-s3-overlay{
  position:fixed; inset:0; width:100vw; height:100vh; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(2,6,23,.55);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.zg-s3-overlay[aria-hidden="false"]{ opacity:1; pointer-events:auto }

.zg-s3-modal{
  background:#fff; border:1px solid #e5e7eb; border-radius:var(--zg-s3-radius);
  width:min(520px, calc(100vw - 32px)); max-height:85vh; overflow:auto;
  box-shadow:0 28px 64px rgba(0,0,0,.25);
  padding:18px; position:relative; outline:none; transform:scale(.985); transition:transform .18s ease;
}
.zg-s3-overlay[aria-hidden="false"] .zg-s3-modal{ transform:scale(1) }

.zg-s3-close{
  position:absolute; top:10px; right:10px; width:44px; height:44px;
  border-radius:10px; border:0; background:#f1f5f9; color:#0f172a; font-size:28px; line-height:1;
  cursor:pointer;
}
.zg-s3-close:hover{ background:#e2e8f0 }

.zg-s3-modal-head{
  display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center;
  margin-bottom:10px; padding-right:56px;
}
.zg-s3-modal-media{
  width:72px; height:72px; border-radius:8px; overflow:hidden;
  background:#f8fafc; border:1px solid #eef2f7;
  display:flex; align-items:center; justify-content:center;
}
.zg-s3-modal-img{ width:100%; height:100%; object-fit:contain }

#zg-s3-modal h3{ margin:0; font-size:22px; font-weight:800; color:var(--zg-s3-ink) }
#zg-s3-modal p{ margin:8px 0 16px; color:var(--zg-s3-muted); font-size:16px; line-height:1.55 }

.zg-s3-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px }
.zg-s3-btn{ appearance:none; border:0; cursor:pointer; border-radius:12px; padding:12px 16px; font-weight:800; font-size:15px }
.zg-s3-btn.primary{ background:#111827; color:#fff }
.zg-s3-btn.primary:hover{ background:#0b1220 }
.zg-s3-btn.ghost{ background:#ecfdf5; color:var(--zg-s3-green-ink) }
.zg-s3-btn.ghost:hover{ background:#d1fae5 }

@media (prefers-reduced-motion:reduce){
  .zg-s3-overlay, .zg-s3-modal{ transition:none }
}
/* ===== S3 · Headings ===== */
.zg-s3-head{
  max-width: min(980px, 92vw);
  margin: 0 auto clamp(20px, 5vw, 40px);
  text-align:center;
}
.zg-s3-h2{
  margin:0 0 8px;
  font-weight:900;
  font-size:clamp(24px, 3.6vw, 36px);
  line-height:1.15;
  letter-spacing:-0.01em;
  color:var(--zg-s3-ink);
}
.zg-s3-sub{
  margin:0 auto;
  color:var(--zg-s3-muted);
  font-size:clamp(16px, 2.2vw, 18px);
  line-height:1.55;
  max-width: 70ch;
}
/* === BLOQUE GNV — Ajustes finos === */

#gnv h2 {
  letter-spacing: -0.01em;
}

#gnv svg {
  stroke: #fff !important;
}

#gnv p {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

#gnv .gnv-icon {
  width: 42px;
  height: 42px;
}

@media (min-width: 900px){
  #gnv .gnv-icon {
    width: 48px;
    height: 48px;
  }
}
/* PARALLAX EFECTO SUAVE */
.parallax-bg {
  width: 100%;
  height: 100%;
  background-attachment: fixed;
  background-size: cover;
  background-position: 80% center;
  transition: transform 0.2s ease-out;
}

/* ANIMACIÓN GLOSSY PREMIUM */
@keyframes glossyMove {
  0% { transform: translateX(-10%) translateY(-10%); opacity: 0.15; }
  50% { opacity: 0.28; }
  100% { transform: translateX(10%) translateY(10%); opacity: 0.15; }
}

.animate-glossy {
  animation: glossyMove 8s ease-in-out infinite alternate;
}
/* ============================================================
   ZAGAZ · FRANJA PREMIUM (hero azul + imagen difuminada)
   ============================================================ */

.zg-franja-premium {
  position: relative;
  width: 100%;
  height: 380px; /* puedes ajustar a gusto */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0b1020; /* azul zagaz sólido en el lado izquierdo */
}

/* Imagen con blur y desplazada a la derecha */
.zg-franja-img {
  position: absolute;
  inset: 0;
  background-image: url('images/taxi_sin_fondo.png'); /* cambia a tu ruta final */
  background-size: cover;
  background-position: 78% center; /* mueve la cara del taxista a la derecha */
  opacity: 0.52;
  filter: blur(4px);
  transition: opacity 0.3s ease;
}

/* Degradado azul de izquierda → derecha */
.zg-franja-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    #0b1020 0%,
    #0b1020 40%,
    rgba(11,16,32,0.85) 60%,
    rgba(11,16,32,0) 100%
  );
  z-index: 2;
}

/* Texto */
.zg-franja-content {
  position: relative;
  z-index: 3;
  color: var(--zg-green); /* verde ZAGAZ */
  text-align: center;
  max-width: 800px;
  padding: 0 20px;
}

.zg-franja-content h3 {
  font-size: 30px;
  font-weight: 900;
  margin-bottom: 12px;
}

.zg-franja-content p {
  font-size: 20px;
  line-height: 1.5;
}

/* Móvil */
@media (max-width: 899px){
  .zg-franja-premium{
    height: 280px;
  }
  .zg-franja-img{
    background-position: 85% center;
    opacity: 0.42;
  }
  .zg-franja-content h3{
    font-size: 22px;
  }
  .zg-franja-content p{
    font-size: 16px;
  }
}
/* CONTENEDOR DE MOLÉCULAS */
.zg-moleculas {
  position: absolute;
  inset: 0;                     /* ocupa todo el espacio encima del auto */
  pointer-events: none;
  overflow: visible;
}

/* MOLECULA BASE */
.zg-moleculas .mol {
  position: absolute;
  width: 14px;
  height: 14px;
  background: rgba(0, 190, 255, 0.55); /* azul ZAGAZ translúcido */
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(0, 190, 255, 0.9);
  animation: floatMolecule 6s infinite ease-in-out;
  filter: blur(0.5px);
}

/* POSICIONES ORIGINALES */
.mol1 { top: 40%; left: 20%; animation-duration: 7s; }
.mol2 { top: 60%; left: 45%; animation-duration: 5.5s; }
.mol3 { top: 30%; left: 65%; animation-duration: 6.2s; }
.mol4 { top: 55%; left: 75%; animation-duration: 7.5s; }
.mol5 { top: 48%; left: 32%; animation-duration: 5s; }

/* ANIMACIÓN */
@keyframes floatMolecule {
  0%   { transform: translateY(0) translateX(0); opacity: 0.7; }
  50%  { transform: translateY(-25px) translateX(10px); opacity: 1; }
  100% { transform: translateY(0) translateX(0); opacity: 0.7; }
}

/* EFECTO DE “RESPIRACIÓN” */
.zg-moleculas .mol::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: rgba(0, 190, 255, 0.25);
  filter: blur(8px);
  animation: pulse 3s infinite ease-in-out;
}

@keyframes pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.4; }
  50%      { transform: scale(1.3); opacity: 0.65; }
}
/* Decoración molecular tenue */
.zg-molecules-mini {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 120%;
  height: 80px;
  background:
    radial-gradient(circle at 10% 50%, rgba(0,255,200,0.15) 0%, transparent 60%),
    radial-gradient(circle at 40% 20%, rgba(0,255,200,0.15) 0%, transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(0,255,200,0.15) 0%, transparent 60%),
    radial-gradient(circle at 90% 30%, rgba(0,255,200,0.15) 0%, transparent 60%);
  pointer-events: none;
  filter: blur(14px);
}
.pulse-zg {
  position: relative;
  z-index: 30;
}

.pulse-zg::after {
  content: "";
  position: absolute;
  inset: -6px; /* halo alrededor */
  border-radius: 9999px;
  border: 2px solid rgba(0, 200, 0, 0.45);
  animation: zg-pulse 1.9s infinite ease-out;
}

@keyframes zg-pulse {
  0%   { transform: scale(1); opacity: 0.9; }
  65%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
/* Contenedor del efecto */
.zg-leaf-area {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5; /* debajo de los botones */
}

/* ÁREA DE CAÍDA DE HOJAS - IZQUIERDA Y DERECHA */
.leaf-fall-area {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
  z-index: 2;
}

/* HOJAS INDIVIDUALES */
.leaf {
  position: absolute;
  width: 60px;
  height: auto;
  opacity: 0.9;
  animation-name: leafFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* ANIMACIÓN DE CAÍDA REAL */
@keyframes leafFall {
  0% {
    transform: translateY(-150px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(700px) rotate(80deg);
    opacity: 0;
  }
}

/* POSICIONES LATERALES */
.leaf-left-1  { left: 4%;  animation-duration: 6s;  animation-delay: 0s; }
.leaf-left-2  { left: 9%;  animation-duration: 8s;  animation-delay: -2s; }
.leaf-left-3  { left: 14%; animation-duration: 7s;  animation-delay: -1s; }

.leaf-right-1 { right: 4%;  animation-duration: 7s;  animation-delay: -3s; }
.leaf-right-2 { right: 9%;  animation-duration: 9s;  animation-delay: -4s; }
.leaf-right-3 { right: 14%; animation-duration: 6.5s; animation-delay: -1.5s; }

/* TAMAÑOS VARIADOS */
.size-s { width: 40px; }
.size-m { width: 60px; }
.size-l { width: 85px; }
/* --- SOLO SE MUESTRA EN DESKTOP --- */
.leaf-desktop-only {
  display: none;
}

@media (min-width: 1024px) {
  .leaf-desktop-only {
    display: block;
  }
}

/* ÁREA GLOBAL PARA QUE LAS HOJAS CAIGAN A LOS COSTADOS */
.leaf-fall-area {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}

/* HOJAS */
.leaf {
  position: absolute;
  opacity: 0.9;
  animation-name: leafFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* ANIMACIÓN HACIA ABAJO */
@keyframes leafFall {
  0% {
    transform: translateY(-150px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(800px) rotate(80deg);
    opacity: 0;
  }
}

/* LIMITAMOS LAS HOJAS A LOS LADOS (NO TOCAN EL AUTO) */
.leaf-left-1  { left: 5%; animation-duration: 6s; }
.leaf-left-2  { left: 10%; animation-duration: 8s; }
.leaf-left-3  { left: 15%; animation-duration: 7s; }

.leaf-right-1 { right: 5%; animation-duration: 7s; }
.leaf-right-2 { right: 10%; animation-duration: 9s; }
.leaf-right-3 { right: 15%; animation-duration: 6.5s; }

/* TAMAÑOS VARIADOS */
.size-s { width: 45px; }
.size-m { width: 75px; }
.size-l { width: 110px; }
/* ============================
   TIMELINE ZAGAZ
============================ */

/* Línea base */
.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: 100%;
  background: #e5e7eb; /* gris claro */
  transform: translateX(-50%);
  border-radius: 6px;
}

/* Línea progresiva (verde) */
.timeline-line-progress {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: 0;
  background: #06c167; /* verde ZAGAZ */
  transform: translateX(-50%);
  border-radius: 6px;
  transition: height 0.25s linear;
}

/* Items base */
.tl-item {
  opacity: 0;
  transition: all 0.7s ease;
}

/* Entradas laterales */
.tl-item-left {
  transform: translateX(-60px);
}

.tl-item-right {
  transform: translateX(60px);
}

/* Cuando el observer agrega .visible */
.tl-item.visible {
  opacity: 1;
  transform: translateX(0);
}
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.animate-slide {
  animation: slide 28s linear infinite;
}
/* ============================= */
/* SCROLLER CONTINUO ZAGAZ */
/* ============================= */

/* Hilera */
.slider-row {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  display: flex;
  margin-bottom: 32px;
}

/* Hilera 2 en sentido contrario */
.slider-row.reverse .slider-track {
  animation-direction: reverse;
}

/* Track que se mueve */
.slider-track {
  display: flex;
  animation: scroll 18s linear infinite;
}

/* Scroll continuo — sin espacios */
@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================= */
/* LOGO CARDS GRANDES Y PREMIUM */
/* ============================= */

.logo-card {
  background: white;
  padding: 30px 40px;              /* 🔵 tamaño grande */
  border-radius: 22px;             /* 🔵 rectángulo premium */
  margin-right: 40px;              /* 🔵 sin huecos visibles */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;                   /* 🔵 grande */
  min-width: 260px;                /* 🔵 ancho grande */
  box-shadow: 0 4px 30px rgba(0,0,0,0.18);
}

.logo-card img {
  max-height: 150px;                /* 🔵 logo grande */
  width: auto;
  object-fit: contain;
  opacity: 0.95;
}
/* ============================= */
/* FADES LATERALES ZAGAZ */
/* ============================= */

.fade-left,
.fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px; /* Puedes subirlo a 180 si quieres más fade */
  pointer-events: none;
  z-index: 20; /* MUY importante: arriba del carrusel */
}

.fade-left {
  left: 0;
  background: linear-gradient(to right, var(--zg-navy), transparent);
}

.fade-right {
  right: 0;
  background: linear-gradient(to left, var(--zg-navy), transparent);
}
/* === CANVA FRAME FINAL — SOLO FORMA, NO TAMAÑOS NI POSICIONES === */

#comunidad .zg-bubble {
  border-radius: 50% !important;   /* círculo perfecto */
  overflow: hidden !important;     /* recorta en el borde del círculo */
  aspect-ratio: 1 / 1 !important;  /* alto = ancho → marco cuadrado que se hace círculo */
}

#comunidad .zg-bubble > img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;    /* rellena el círculo tipo Canva */
  object-position: center !important;
}

/* dejar que las burbujas se salgan del bloque azul */
#comunidad .zg-comunidad-wrap{
  overflow: visible !important;
}
/* ===== BURBUJAS – TAMAÑO + POSICIÓN FINAL (solo DESKTOP) ===== */
@media (min-width: 900px){

  /* IZQUIERDA */
  #comunidad .zg-bubble.b2{
    width: 260px !important;
    top: 10% !important;
    left: 8% !important;
  }

  #comunidad .zg-bubble.b1{
    width: 190px !important;
    top: 58% !important;
    left: 10% !important;
  }

  #comunidad .zg-bubble.b5{
    width: 210px !important;
    top: 34% !important;
    left: 6% !important;
  }

  /* DERECHA */
  #comunidad .zg-bubble.b3{
    width: 280px !important;
    top: 12% !important;
    right: 10% !important;   /* ← la saco del texto */
  }

  #comunidad .zg-bubble.b6{
    width: clamp(300px, 24vw, 360px) !important;
    top: 46% !important;
    right: 4% !important;
  }

  #comunidad .zg-bubble.b4{
    width: 190px !important;
    top: 68% !important;
    right: 14% !important;
  }
}
/* Ajuste fino: subir un poco la burbuja b6 (abajo-derecha) en desktop */
@media (min-width: 900px){
  #comunidad .zg-bubble.b6{
    top: 38% !important;  /* prueba 38; si la quieres aún más arriba, baja a 36 o 34 */
  }
}