/* ===========================================================================
   BASE — GG Digital · demos
   Lo que comparten las tres demostraciones: reset, tipografías locales,
   el aviso de "esto no guarda datos" y el pie de página.
   Regla de rendimiento: aquí NO hay blur de pantalla completa ni
   backdrop-filter. Solo se animan transform y opacity.
   =========================================================================== */
@import url("fuentes.css");

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;   /* el scroll suave lo maneja Lenis, no el navegador */
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; }

/* --- texto partido en palabras o letras ---------------------------------
   La caja recorta y el trozo se sube desde abajo. Ese recorte es lo que
   hace que las palabras "salgan de la nada" en vez de aparecer flotando. */
.gg-caja {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Aire arriba y abajo para que el recorte no le muerda la tilde a las
     mayúsculas acentuadas (Ó, Á, Í) ni la cola a las letras que bajan.
     Los márgenes negativos devuelven ese aire para que nada se desalinee. */
  padding-top:    .2em;
  margin-top:    -.2em;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.gg-trozo { display: inline-block; will-change: transform; }
/* Envuelve las letras de una misma palabra para que el renglón nunca la
   parta por la mitad cuando el título se anima letra por letra. */
.gg-palabra { display: inline-block; white-space: nowrap; }

/* Un título partido arranca invisible para que no se vea el salto inicial.
   El motor le pone autoAlpha:1 justo antes de animarlo.                  */
[data-titulo] { visibility: hidden; }
.sin-movimiento [data-titulo] { visibility: visible; }

/* --- el aviso de demostración -------------------------------------------- */
.gg-aviso {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 520px);
  padding: 14px 20px;
  border-radius: 14px;
  background: #16171c;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  color: #f4f2ee;
  font-size: 14px;
  opacity: 0;
}
.gg-aviso strong {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--acento, #ff5a1f);
  color: #10100f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --- pie de página de las demos ------------------------------------------ */
.gg-pie {
  padding: 38px 24px 34px;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(244, 242, 238, .42);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.gg-pie a {
  color: rgba(244, 242, 238, .72);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.gg-pie a:hover { color: #fff; }
.gg-pie .gg-pie-negocio {
  display: block;
  margin-bottom: 6px;
  color: rgba(244, 242, 238, .3);
}

/* --- botón para volver al índice de demos -------------------------------- */
.gg-volver {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 190;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 13px;
  border-radius: 999px;
  background: rgba(14, 14, 17, .88);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #f4f2ee;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.gg-volver:hover { background: #1c1d22; border-color: rgba(255, 255, 255, .3); }
.gg-volver svg { flex: none; }

/* --- a quien le marea el movimiento, todo quieto ------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}