/* ============================================================
   KALON TOPBAR — cinta superior
   ------------------------------------------------------------
   REARMADO EL 2026-09-01. El bucle no cerraba en ningun sitio y
   en iPhone ademas se descuadraba. Dos causas, las dos de aqui:

   1. `.kalon-tb` era `display:flex`, asi que el carril era un
      ITEM FLEXIBLE. Por defecto un item flexible puede encogerse
      (flex-shrink:1), asi que el navegador comprimia el carril
      para que cupiera en la cinta. Medido en vivo: las dos copias
      median 680px y 0px. Como la animacion avanza translateX(-50%)
      -o sea la mitad del carril- y esa mitad solo equivale a una
      copia si las dos miden LO MISMO, el bucle no podia cerrar.

   2. El ancho minimo de cada copia era `100cqw`, que necesita
      container queries: Safari 16 en adelante. En un iPhone algo
      antiguo esa declaracion sencillamente no existe, las copias
      se quedaban con el ancho de su texto y el desfile saltaba.

   Ahora el bucle es correcto POR CONSTRUCCION y no depende de
   nada que haya que medir, ni de JavaScript, ni de que el
   navegador sea reciente:

     · La cinta es un bloque normal y el carril NO se puede
       encoger, asi que conserva su ancho real.
     · Cada copia mide como minimo 100vw, que lo entiende
       cualquier navegador. Las dos llevan la MISMA regla, asi
       que miden lo mismo pase lo que pase.
     · Dos copias identicas + avanzar la mitad del carril =
       exactamente una copia. Al terminar la vuelta, la segunda
       esta donde estaba la primera y no se nota el corte.

   El JavaScript solo afina la duracion. Si no llega a
   ejecutarse, la cinta desfila igual con la duracion por defecto.
   ============================================================ */

.kalon-tb {
  position:   relative;

  /* [2026-09-01] FLEX, PERO CON EL CARRIL BLINDADO.
     El problema nunca fue ser flex, sino que el carril era un item
     ENCOGIBLE: el navegador lo comprimia por debajo de su ancho real
     y las copias quedaban desiguales. Eso ya lo impide `flex:none`
     en el propio carril.
     Se vuelve a flex porque `align-items:center` es lo que centra el
     texto verticalmente dentro de la cinta. Al pasarlo a bloque el
     carril se pegaba arriba y el texto quedaba descentrado. */
  display:     flex;
  align-items: center;
  width:      100%;
  max-width:  100%;
  overflow:   hidden;
  box-sizing: border-box;

  /* Altura por contenido con un minimo: si el visitante tiene la
     fuente mas grande, el texto no se recorta. */
  min-height: 40px;
  padding:    10px 0;

  background:     var(--kalon-tb-fondo, #808080);
  color:          var(--kalon-tb-texto, #fff);
  letter-spacing: .8px;
}

/* ── POR QUE LA CINTA SE SALIA DE LA PANTALLA ──────────────
 *
 * Los contenedores de la cabecera de Astra son items de grid y de flex,
 * y por defecto llevan min-width:auto. Eso significa "no te encojas por
 * debajo de lo que mide tu contenido". Como el carril es texto en una
 * sola linea, su ancho minimo era el del texto entero: medido en vivo,
 * 1361px dentro de un movil de 375. La cinta se salia y el sitio lo
 * disimulaba con el overflow-x:hidden global.
 *
 * Con min-width:0 los contenedores pueden encogerse y el overflow:hidden
 * de la cinta recorta lo que sobra, que es como debe funcionar.
 *
 * SIN :has(), A PROPOSITO. Antes esta regla era `…:has(.kalon-tb)`.
 * Funcionaba, pero :has() lo reevalua el navegador conforme va leyendo
 * el HTML: hasta que aparece la cinta, los contenedores NO cumplian la
 * condicion y se quedaban sin estirar. Medido: pasaba de {x:188,ancho:0}
 * a {x:0,ancho:375}. Ese salto era el descoloque al recargar.
 *
 * Las tres declaraciones se necesitan juntas:
 *   min-width:0   para que PUEDAN encogerse.
 *   width:100% y flex-grow:1 para que de hecho ocupen lo disponible;
 *                 sin esto se quedaban en 0. */
.ast-above-header-bar .ast-builder-grid-row,
.ast-below-header-bar .ast-builder-grid-row,
.site-header-above-section-center,
.site-header-below-section-center,
.ast-header-html-1,
.ast-header-html-1 .ast-header-html,
.ast-header-html-1 .ast-builder-html-element {
  min-width:   0;
  width:       100%;
  flex-basis:  auto;
  flex-grow:   1;
}

/* ── El carril: las dos copias, una detras de otra ─────────── */
.kalon-tb__carril {
  display:     flex;
  align-items: center;
  width:       max-content;

  /* Cinturon y tirantes: si algun dia esto vuelve a quedar dentro
     de un contenedor flexible, que NO se pueda encoger. Es lo que
     rompia el bucle. */
  flex:        none;

  /* translate3d y no translateX: en iOS empuja la animacion a la
     GPU y deja de dar tirones al desplazar la pagina. */
  animation:   kalonTopbarDesfile var(--kalon-tb-duracion, 26s) linear infinite;
  will-change: transform;
}

/* Se detiene al pasar el raton, para poder leerla */
.kalon-tb:hover .kalon-tb__carril {
  animation-play-state: paused;
}

/* ── Cada copia ────────────────────────────────────────────
   min-width:100vw es la pieza clave del bucle. No se usa cqw
   (container queries) porque eso deja fuera a los iPhone con
   Safari anterior al 16, que era justo donde fallaba.

   Que 100vw incluya la barra de desplazamiento aqui da igual:
   las DOS copias llevan la misma regla, asi que miden lo mismo,
   y es la igualdad -no el valor exacto- lo que cierra el bucle. */
.kalon-tb__copia {
  display:         flex;
  align-items:     center;
  justify-content: space-around;
  white-space:     nowrap;
  gap:             clamp(22px, 3vw, 40px);
  padding-inline:  clamp(11px, 1.5vw, 20px);
  line-height:     1;
  text-transform:  uppercase;
  flex:            0 0 auto;
  min-width:       100vw;
  box-sizing:      border-box;
}

.kalon-tb__frase,
.kalon-tb__sep {
  font-family:    'Cormorant Garamond', Georgia, serif;
  font-size:      clamp(9px, 1.05vw, 11px);
  letter-spacing: clamp(1.5px, .28vw, 3px);
  opacity:        .92;
  white-space:    nowrap;
}

.kalon-tb__sep {
  opacity: .55;
}

/* ── Difuminado de los bordes ──────────────────────────────
   Antes 90px fijos, que en movil se comian media pantalla. */
.kalon-tb::before,
.kalon-tb::after {
  content:        "";
  position:       absolute;
  top:            0;
  width:          clamp(24px, 7vw, 90px);
  height:         100%;
  z-index:        2;
  pointer-events: none;
}

.kalon-tb::before {
  left:       0;
  background: linear-gradient(to right, var(--kalon-tb-fondo, #808080), transparent);
}

.kalon-tb::after {
  right:      0;
  background: linear-gradient(to left, var(--kalon-tb-fondo, #808080), transparent);
}

/* ── El desfile ────────────────────────────────────────────
   Media pista = una copia exacta, siempre, porque las dos copias
   miden lo mismo. No depende de nada que haya que calcular, asi
   que la cinta desfila bien aunque el JavaScript no se ejecute. */
@keyframes kalonTopbarDesfile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ── SIN EXCEPCION POR MOVIMIENTO REDUCIDO ─────────────────
 *
 * [2026-09-01] Aqui habia un bloque
 * `@media (prefers-reduced-motion: reduce)` que apagaba la
 * animacion y ocultaba la segunda copia. Se ha quitado A PETICION
 * EXPRESA: la cinta debe desfilar en movil, PC e iPhone sin
 * depender de ninguna preferencia del sistema del visitante.
 *
 * Era ademas la causa de que la cinta se viera "congelada": con
 * esa preferencia activada quedaba UNA sola copia quieta repartida
 * a lo ancho, que es justo lo que se reportaba.
 *
 * Si algun dia se quiere reponer, la forma recomendable no es
 * apagarla del todo sino alargar mucho la duracion:
 *
 *   @media (prefers-reduced-motion: reduce) {
 *     .kalon-tb__carril { --kalon-tb-duracion: 180s; }
 *   }
 *
 * Asi se sigue respetando a quien es sensible al movimiento sin
 * dejar la cinta parada. */

/* ── ANCHO COMPLETO EN MOVIL ───────────────────────────────
   [2026-09-02] Esta regla estaba en un widget del PIE, o sea al 85%
   del documento. La cinta vive dentro de la cabecera de Astra, que es
   un contenedor con padding lateral, asi que el navegador la pintaba
   RECORTADA -medido en el video: 348px de 392, 22px comidos a cada
   lado- y solo se estiraba cuando el parser llegaba al pie.

   Aqui va en el <head> (el plugin encola su CSS en wp_enqueue_scripts),
   asi que ya esta aplicada antes del primer pintado.

   Se usa width:100% y no 100vw a proposito: 100vw incluye la barra de
   desplazamiento y en iOS no coincide con el area visible. Por eso hay
   que estirar toda la cadena de contenedores: si uno solo se queda
   estrecho, el 100% de la cinta se calcula sobre ese ancho. */
@media (max-width: 768px) {
  html body .ast-above-header-wrap,
  html body .ast-above-header-bar,
  html body .ast-below-header-wrap,
  html body .ast-below-header-bar,
  html body .ast-mobile-header-wrap,
  html body .site-header-above-section-center,
  html body .site-header-below-section-center,
  html body .ast-above-header-bar .ast-builder-grid-row,
  html body .ast-below-header-bar .ast-builder-grid-row,
  html body .ast-above-header-bar .ast-builder-layout-element,
  html body .ast-below-header-bar .ast-builder-layout-element,
  html body .ast-above-header-bar .ast-header-html,
  html body .ast-below-header-bar .ast-header-html,
  html body .ast-above-header-bar .ast-builder-html-element,
  html body .ast-below-header-bar .ast-builder-html-element {
    width:          100% !important;
    max-width:      100% !important;
    padding-left:   0 !important;
    padding-right:  0 !important;
    margin-left:    0 !important;
    margin-right:   0 !important;
    overflow:       visible !important;
  }
}