/* Sección de texto con GSAP Scramble en Home */
.home-scramble {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  min-height: 100px;
  padding: 10px 5% 10px 5%;
  margin: 10px 0 10px 0;
  box-sizing: border-box;
}

.home-scramble .heading-text {
  font-family: 'Haettenschweiler', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-weight: 400;
  width: min(90vw, 1200px);
  height: auto;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #111;
  user-select: none;
  -webkit-user-select: none;
  margin: 0;
  padding: 0;
  /* Escala fluida del tamaño de fuente */
  font-size: clamp(28px, 10vw, 120px);
}

.home-scramble .button-wrapper { margin-top: 12px; }

.home-scramble .button {
  font-family: inherit;
  font-weight: 400;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #111;
  background: transparent;
  color: #111;
  cursor: pointer;
}
.home-scramble .button:hover { background: #111; color: #fff; }

@media (max-width: 300px), (max-height: 300px) {
  .home-scramble .button { padding: 2px 8px; border-width: 1px; }
}

/* ------- Osmo [https://osmo.supply/] ------- */
/* Looping Words - estilos dedicados */

/* Nota: evitamos redefinir body/a/button globales para no afectar el sitio.
   Si se requieren cursores o colores globales, moverlos a un scope contenedor.
*/

.cloneable {
  /* Full-bleed: ocupar todo el ancho del viewport incluso dentro de .container */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* Padding con soporte para safe-area en móviles */
  padding-left: max(var(--container-padding, 0rem), env(safe-area-inset-left));
  padding-right: max(var(--container-padding, 0rem), env(safe-area-inset-right));
  padding-top: var(--container-padding, 0rem);
  padding-bottom: var(--container-padding, 0rem);

  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.looping-words {
  width: 100%;
  height: 2.2em; /* Mantener solo el alto asignado */
  padding-left: .1em;
  padding-right: .1em;
  font-size: clamp(28px, 11vw, 160px);
  line-height: .9;
  position: relative;
}

.looping-words__list {
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  flex-flow: column;
  align-items: center;
  margin: 0;
  padding: 0;
  font-family: 'PP Neue Corp', sans-serif;
  font-weight: 700;
  list-style: none;
  display: flex;
  position: relative;
}

.looping-words__list.is--primary { color: var(--color-primary, #111); }
.looping-words__list.is--gray { color: var(--color-neutral-500, #777); }

.looping-words__fade {
  background-image: linear-gradient(180deg, var(--color-neutral-300, #f3f3f3) 5%, transparent 40%, transparent 60%, var(--color-neutral-300, #f3f3f3) 95%);
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.looping-words__fade.is--radial {
  background-image: radial-gradient(circle closest-side at 50% 50%, transparent 64%, var(--color-neutral-400, #e5e5e5) 93%);
  width: 140%;
  display: block;
  left: -20%;
}

.looping-words__selector {
  pointer-events: none;
  width: 100%;
  height: .9em;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.looping-words__edge {
  border-top: .035em solid var(--color-primary, #ff4c24);
  border-left: .035em solid var(--color-primary, #ff4c24);
  width: .125em;
  height: .125em;
  position: absolute;
  top: 0;
  left: 0;
}

.looping-words__edge.is--2 { left: auto; right: 0; transform: rotate(90deg); }
.looping-words__edge.is--3 { inset: auto 0 0 auto; transform: rotate(180deg); }
.looping-words__edge.is--4 { top: auto; bottom: 0; transform: rotate(270deg); }

.looping-words__containers {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.looping-words__p { margin: 0; }

@font-face {
  font-family: 'PP Neue Corp';
  src: url('https://cdn.prod.website-files.com/6717aac16c9ea22eeef1e79e/6717de2d56e40b921572d2d9_PPNeueCorp-TightUltrabold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
