/** Shopify CDN: Minification failed

Line 993:0 Unexpected "}"

**/
/* ============================================================
   FLAMINGOS LIFE — Zero Tennis · Launch
   Hoja compartida por las OCHO secciones de la landing:
     zt-hero · zero-tennis-launch · zt-marquee · zt-lifestyle
     zt-craft · zt-colourway · zt-preorder · zt-influencers
   ------------------------------------------------------------
   Todo va scopeado a .zt-page para que no se escape nada al
   resto del tema. La tipografia hereda Gramatika del tema.

   Viene del <style> inline de sections/zero-tennis.liquid (la
   coming soon). Se extrae a asset por tres razones:
     1. Las ocho secciones comparten tokens y atomos; inline
        seria copiarlos ocho veces.
     2. Mismo asset_url en las ocho: una sola descarga.
     3. preview.html puede apuntar aqui con un <link>, asi que
        se acaba la nota de "si tocas uno, regenera el otro".

   Escala tipografica de la casa (assets/style-size.css).
   Tope de marca: 40px. La jerarquia se hace con los saltos que
   ya existen + color + aire, no con tamanos nuevos.
   ============================================================ */

/* ============================================================
   LA REGLA DE RECORTE: LA ZAPATILLA NO SE RECORTA NUNCA
   ------------------------------------------------------------
   Esto es una landing de zapatillas, asi que un encuadre donde
   no se vea la zapa es un encuadre invalido, por bonito que sea.

   Medido sobre el material: en los planos de figura entera del
   shooting (exterior_*, paris_*) el modelo esta de pie y la
   zapatilla TOCA EL BORDE INFERIOR del encuadre. Basta con
   recortar un 3 % por abajo para decapitar el producto. Por eso
   el ancla por defecto de todo recorte de esta hoja es
   `50% 100%` —el pie de la foto pegado al pie de la caja— y lo
   que se tira sale por ARRIBA, que es donde hay cielo, fachada
   o fondo de estudio.

   `--zt-pos` lo escribe cada seccion desde su ajuste "Crop
   anchor", con cuatro valores:
     50% 100%  Bottom  — figura. Por defecto. Salva la zapatilla.
     50% 50%   Centre  — bodegon: la zapa esta centrada y el
                         recorte tiene que salir por los dos lados.
     50% 0%    Top     — raro; solo si el sujeto esta arriba.
     el punto focal de la imagen, cuando se elige "Focal point".

   Si un dia falta el valor, el fallback de la hoja sigue siendo
   el pie. Un fallo de configuracion no puede costar el producto.
   ============================================================ */

.zt-page {
  /* Proporcion nativa de la fotografia: las cuatro creatividades de
     ficha y las 13 de la sesion son 2048x2521. No es 4:5 (0,8000)
     sino 0,8124, asi que un 4/5 recortaba un 1,5 % del alto —unos
     19px arriba y 19 abajo— y la etiqueta va incrustada justo en el
     borde inferior. Con la proporcion exacta no hay recorte. */
  --foto: 2048 / 2521;

  --ink: #000;
  --muted: #767676;
  --paper: #fff;
  --tint: #f7f7f7;
  --tint-2: #ebebeb;
  --rule: rgba(0, 0, 0, 0.18);

  --t12: 12px;
  --t14: 14px;
  --t16: 16px;
  --t20: 20px;
  /* .t40-20 del tema: fluido 30 a 40 */
  --t40: calc(30px + (40 - 30) * ((100vw - 390px) / (1920 - 390)));

  --gut: 24px;
  --max: 1200px;

  /* Borde de las secciones a ancho de ventana y salto entre
     bloques. Son los de .collection-products del tema, promovidos
     a variable porque ahora los usan ocho secciones y no una. */
  --edge: 15px;
  --step: 80px;

  background: var(--paper);
  color: var(--ink);
  font-family: "Gramatika", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: var(--t14);
  line-height: 1.5;
}

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

/* La base va en :where() para que pese 0 en la especificidad: asi
   cualquier clase de componente gana sin encadenar .zt-page delante.
   Sin esto, .zt-page a (0,1,1) le ganaba a .zt-cta (0,1,0) y el
   boton salia con el gris heredado del parrafo en vez de su blanco;
   a .zt-row__link le pasaba lo contrario, salia en tinta plena en
   vez de gris. Los dos tenian su color bien escrito y sin efecto. */
.zt-page :where(img) { display: block; max-width: 100%; }

.zt-page :where(video) { display: block; width: 100%; }

.zt-page :where(h1, h2, h3, p) { margin: 0; font-weight: 400; }

.zt-page :where(a) { color: inherit; }

/* [hidden] tiene que GANAR a las reglas de display de los
   componentes. El atributo se apoya en el display:none de la hoja
   del navegador, que pesa 0 en especificidad: .zt-clock
   { display: flex } (0,1,0) le gana, y el reloj se veria a ceros
   al cargar pese a llevar el atributo puesto. Le pasa igual a
   .zt-rail__nav cuando el fallback esconde las flechas.
   Es el caso de libro para !important: una utilidad de una sola
   declaracion que debe imponerse sobre cualquier componente. */
.zt-page [hidden] { display: none !important; }

.zt-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* ---------- Atomos de jerarquia ---------- */

.zt-eyebrow {
  font-size: var(--t12);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.zt-display {
  font-size: var(--t40);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

.zt-lede {
  font-size: var(--t16);
  line-height: 1.6;
  color: var(--muted);
  /* min() y no 46ch a secas: el padre es flex con
     align-items:flex-start, asi que este bloque se dimensiona a
     contenido y 46ch desbordaba el contenedor en movil. */
  max-width: min(46ch, 100%);
}

.zt-tick {
  width: 56px;
  height: 1px;
  background: var(--ink);
}

.zt-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 36px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t12);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s ease;
}

.zt-cta:hover { opacity: 0.72; }

/* Variante en hueco para el CTA secundario del bloque de pre-order:
   dos botones en tinta plena uno al lado del otro compiten. */
.zt-cta--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

.zt-cta--ghost:hover { background: var(--ink); color: var(--paper); opacity: 1; }

/* Con los contenedores en stretch, lo que debe encogerse lo pide. */
.zt-cta,
.zt-tick,
.zt-row__head,
.zt-price,
.zt-row__link { align-self: flex-start; }

/* Boton de reproduccion, rotulado [ Stop ] / [ Play ] como el resto
   del tema (js-section-slider.js). Sin caja. */
.zt-playpause {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--t12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

.zt-playpause:hover { color: var(--ink); }

/* ---------- Punto numerado ----------
   Composicion de /pages/our-values (section-values-text del tema):
   el numero en una columna estrecha, el titulo ocupando el resto de
   la mitad izquierda y el texto en la mitad derecha. Todo alineado
   a la izquierda, sin filete y sin centrar nada.

   Es el objeto que encabeza casi todas las secciones de la pagina. */

.zt-point {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding-bottom: 40px;
}

.zt-point__num {
  width: 120px;
  flex-shrink: 0;
  font-size: var(--t12);
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.zt-point__head {
  width: calc(50% - 120px);
  padding-right: 24px;
}

.zt-point__title {
  font-size: var(--t20);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.zt-point__eyebrow {
  display: block;
  margin-bottom: 10px;
  font-size: var(--t12);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.zt-point__body {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  font-size: var(--t14);
  line-height: 1.7;
  color: var(--muted);
  /* La pagina va a ancho de ventana, asi que en un monitor de 2560
     la mitad derecha serian ~1250px de linea de texto. Se acota la
     medida sin romper la alineacion de las columnas. */
  max-width: 68ch;
}

.zt-point__body p { max-width: 100%; }

/* La frase de pre-order va en tinta plena: es una condicion de
   venta, no texto de acompanamiento. */
.zt-point__hi { color: var(--ink); }

.zt-point__body ul {
  margin: 0;
  padding-left: 1.1em;
  line-height: 1.9;
}

/* El cuerpo de la pagina de Shopify llega como richtext: un <p> por
   parrafo, y los vacios son los saltos. */
.zt-point__list p { margin: 0; }
.zt-point__list p:empty { margin-bottom: 12px; }

/* ---------- Rejilla de colorways ----------
   Esta seccion no usa .zt-wrap: se sale del --max de 1200px y va a
   ancho de ventana, como la rejilla de la pagina de coleccion.
   Medidas de assets/style-collection.css del tema:
   .collection-products lleva padding-inline 15px (11px en movil) y
   .product-card padding-inline 2.5px, o sea 5px de calle. A 1920px
   eso da tarjetas de ~469px en vez de ~270px: la foto pasa de ~337px
   de alto a ~586px, que es justo el calc(100vw * 590 / 1920) del
   tema.

   El padding-top completa el salto entre el punto 01 y el 02. Esta
   es la unica junta de la pagina donde un punto va detras del texto
   de otro sin nada en medio, asi que el hueco lo daba solo el
   padding-bottom del 01: 40px, la mitad del salto de bloque. Con
   estos 40 suman los 80 de rigor (28 + 28 = 56 por debajo de 768). */

.zt-collection { padding: 40px var(--edge) 0; }

.zt-points { padding: var(--step) var(--edge) 0; }

/* Una tarjeta por colorway: foto arriba, info y tallas debajo. Es el
   layout que ya tenia el movil, trasladado a escritorio. Antes eran
   filas de dos columnas y cada colorway se comia una pantalla de
   scroll; asi los cuatro se comparan de una mirada. */
.zt-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* La calle es la del tema, 5px. La separacion vertical no: alli la
     ficha es una linea de texto y aqui debajo van precio, etiqueta,
     11 tallas y el enlace. */
  gap: 48px 5px;
}

.zt-row {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-top: 1px solid var(--rule);
}

.zt-row__media {
  background: var(--tint);
  overflow: hidden;
  /* El fondo llena el ancho de la tarjeta y la foto queda centrada
     dentro, a su proporcion. */
  align-self: stretch;
  display: flex;
  align-items: center;
}

.zt-row__media > a { display: block; width: 100%; }

.zt-row__media img {
  width: 100%;
  aspect-ratio: var(--foto);
  object-fit: cover;
  object-position: var(--zt-pos, 50% 100%);
}

.zt-row__body {
  padding: 20px 0 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  min-width: 0;
}

.zt-row__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.zt-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.zt-swatch--duo {
  background-image: linear-gradient(
    to right,
    var(--zt-color-1) 0 50%,
    var(--zt-color-2) 50% 100%
  );
}

.zt-row__name {
  font-size: var(--t20);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.zt-price {
  font-size: var(--t14);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.zt-price__now { color: var(--ink); }

.zt-price__was {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.zt-price__tag {
  font-size: var(--t12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.zt-sizes__label {
  font-size: var(--t12);
  line-height: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: -2px;
}

/* Va en caja baja a proposito. Todo el microcopy de 12px de la
   pagina es versal con letter-spacing, pero esto es una ayuda junto
   a una etiqueta de estado, no otro rotulo: en versales competiria
   con el chip negro y encima ocuparia mas linea. */
.zt-sizes__hint {
  font-size: var(--t12);
  line-height: 1.3;
  color: var(--muted);
}

/* Etiqueta de estado sobre la rejilla. Invertida (relleno negro)
   porque una caja blanca seria invisible sobre el papel. */
.zt-sizes__tag {
  display: inline-flex;
  text-transform: uppercase;
  font-size: var(--t12);
  align-items: center;
  height: 20px;
  padding: 0 8px;
  background: var(--ink);
  color: var(--paper);
  letter-spacing: 0.08em;
}

.zt-sizes {
  display: grid;
  /* 6 + 5 llenando el ancho de la tarjeta. Antes eran celdas de 64px
     fijos, que en una columna de ~270px se salen. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
}

.zt-size a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  border: 1px solid var(--rule);
  font-size: var(--t14);
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.zt-size a:hover,
.zt-size a:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* Talla agotada. En fase de stock real hay tallas que caen, y una
   celda muerta que sigue pareciendo clicable es peor que una tachada:
   se mantiene visible para que la curva de tallas se lea de un
   vistazo, que es justo el argumento de escasez de la pagina. */
.zt-size--out span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  border: 1px solid var(--rule);
  font-size: var(--t14);
  line-height: 1;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  cursor: not-allowed;
}

.zt-row__link {
  font-size: var(--t12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  color: var(--muted);
}

.zt-row__link:hover { color: var(--ink); }

.zt-legal {
  font-size: var(--t12);
  line-height: 1.6;
  color: var(--muted);
  /* Va detras de la ultima fila de tarjetas, que ya trae su propio
     enlace: con 32px se leia como pie de la tarjeta de al lado. */
  margin-top: 64px;
  max-width: min(64ch, 100%);
}

.zt-legal a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Contenido suelto de la pagina ----------
   Lo que se escriba en el cuerpo de la pagina de Shopify, para
   avisos de ultima hora sin tocar la seccion. */

.zt-extra { padding: var(--step) var(--edge) 0; }

/* ---------- Cierre ---------- */

.zt-close {
  padding: 96px 0 112px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 32px;
}

.zt-close__col {
  grid-column: 1 / span 6;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  min-width: 0;
}

.zt-close__meta {
  grid-column: 9 / span 4;
  font-size: var(--t12);
  color: var(--muted);
  line-height: 1.6;
  text-align: right;
}

/* ============================================================
   NUEVO EN LANZAMIENTO — las cuatro secciones que la coming soon
   no tenia. Reutilizan los tokens y los atomos de arriba; no
   introducen ni un tamano ni un color nuevo.
   ============================================================ */

/* ---------- 04 · Lifestyle: carrusel horizontal de looks ----------
   Swiper en freeMode con asomo del siguiente slide, el mismo
   comportamiento del carrusel UGC que ya esta en produccion
   (blocks/ai_gen_block_aaad859.liquid). Ese bloque no se podia
   reutilizar: lee product.metafields.custom.ugc_images, que no
   existe en el contexto de una pagina, y solo emite <img>.

   El rail se sale del borde de la seccion por la derecha a
   proposito: el corte del ultimo slide contra el filo de la
   ventana es lo que anuncia que la fila sigue. */

.zt-looks { padding: var(--step) var(--edge) 0; }

.zt-rail {
  overflow: hidden;
  /* Swiper mide el contenedor, asi que el sangrado se hace con
     margin negativo y se devuelve como padding en el wrapper. */
  margin-right: calc(var(--edge) * -1);
}

/* LA FILA VA EN LA BASE, no solo en el fallback. .swiper-wrapper no
   tiene estilos propios aqui —el display:flex lo pone el CSS de
   Swiper—, asi que sin esto, entre el primer pintado y el arranque de
   Swiper los slides son divs de bloque y se APILAN EN VERTICAL. En
   produccion es un instante; sin Swiper son los 5 s que el JS espera
   antes de rendirse, y en preview.html es siempre.

   Swiper escribe width y transform INLINE en cada slide al arrancar,
   y el inline gana a la hoja: no se pisan. */
.zt-rail .swiper-wrapper {
  display: flex;
  gap: var(--zt-rail-gap, 5px);
}

.zt-rail .swiper-slide {
  flex: 0 0 auto;
  width: var(--zt-rail-w-mobile, 85%);
  /* height auto + columna: sin esto el slide hereda el alto del mas
     alto y la foto se estira. Cada slide se dimensiona a su caja. */
  height: auto;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1130px) {
  .zt-rail .swiper-slide { width: var(--zt-rail-w, 24%); }
}

.zt-look__media {
  position: relative;
  background: var(--tint);
  overflow: hidden;
}

.zt-look__media img,
.zt-look__media video {
  width: 100%;
  /* Lo fija la seccion desde el editor; 4/5 es el reel recortado
     que menos altura se come en escritorio. */
  aspect-ratio: var(--zt-look-ratio, 4 / 5);
  object-fit: cover;
  object-position: var(--zt-pos, 50% 100%);
}

/* No hay capa de poster superpuesta: el atributo poster del propio
   <video> ya pinta el fotograma fijo mientras preload="none" no ha
   traido nada, y lo sustituye el primer frame al arrancar. Una capa
   encima seria pintar dos veces la misma imagen. */

.zt-look__caption {
  padding-top: 12px;
  font-size: var(--t12);
  line-height: 1.5;
  color: var(--muted);
}

.zt-look__caption a { text-decoration: underline; text-underline-offset: 3px; }

.zt-look__caption a:hover { color: var(--ink); }

/* El nombre del look, cuando el bloque enlaza a una ficha. */
.zt-look__name {
  display: block;
  font-size: var(--t12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.zt-rail__controls {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
}

/* Flechas cuadradas con el mismo filete que las celdas de talla, no
   los circulos del carrusel UGC: en esta pagina no hay ni un radio. */
.zt-rail__nav {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.zt-rail__nav:hover:not(:disabled) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.zt-rail__nav:disabled { opacity: 0.3; cursor: not-allowed; }

.zt-rail__nav svg { width: 18px; height: 18px; }

.zt-rail__controls .zt-playpause { margin-left: auto; }

/* ---------- 05 · Fabricacion ----------
   Secuencia vertical de pasos, no una rejilla. Los pilares de arriba
   ya son una rejilla de cuatro fotos pequenas: repetir esa forma
   haria que fabricacion se leyera como mas de lo mismo. Aqui la
   foto manda —55 % del ancho— y el lado alterna, que es como se
   cuenta un proceso. */

.zt-craft { padding: var(--step) var(--edge) 0; }

.zt-craft__steps {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.zt-step {
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: center;
  gap: 40px;
}

/* Alterna el lado. Con :nth-child(even) y order en vez de
   direction:rtl, que arrastraria la alineacion del texto. */
.zt-step:nth-child(even) .zt-step__media { order: 2; }

.zt-step__media {
  background: var(--tint);
  overflow: hidden;
  min-width: 0;
}

.zt-step__media img,
.zt-step__media video {
  width: 100%;
  aspect-ratio: var(--zt-step-ratio, 4 / 5);
  object-fit: cover;
  object-position: var(--zt-pos, 50% 100%);
}

.zt-step__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  max-width: 52ch;
}

.zt-step__num {
  font-size: var(--t12);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.zt-step__title {
  font-size: var(--t20);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.zt-step__text {
  font-size: var(--t14);
  line-height: 1.7;
  color: var(--muted);
}

.zt-step__text p { margin: 0; }
.zt-step__text p + p { margin-top: 12px; }

/* ---------- 06 · Pre-order con cuenta atras ----------
   En tinta plena y a sangre: es el unico bloque de la pagina que
   pide una decision, y necesita separarse del papel. Mismo recurso
   que la banda de pilares pero invertido. */

.zt-pre {
  background: var(--ink);
  color: var(--paper);
  padding: var(--step) var(--edge);
  margin-top: var(--step);
  text-align: center;
}

.zt-pre__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.zt-pre__eyebrow {
  font-size: var(--t12);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* No var(--muted): sobre negro, un gris del 46 % no llega al
     contraste minimo. El blanco al 62 % si. */
  color: rgba(255, 255, 255, 0.62);
}

.zt-pre__heading {
  font-size: var(--t40);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.zt-pre__lede {
  font-size: var(--t16);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 52ch;
}

/* ---------- El reloj ----------
   Se pinta en cliente. Nace con [hidden] y lo destapa el JS: si el
   script no llega o la fecha es invalida, no se ensena un reloj a
   ceros. */

.zt-clock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}

.zt-clock__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 84px;
}

.zt-clock__num {
  font-size: var(--t40);
  line-height: 1;
  letter-spacing: -0.01em;
  /* Tabular para que el ancho no baile cada segundo. Gramatika no
     declara la feature, asi que el fallback la aporta. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.zt-clock__label {
  font-size: var(--t12);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.zt-clock__sep {
  font-size: var(--t40);
  line-height: 1;
  color: rgba(255, 255, 255, 0.32);
}

.zt-pre__meta {
  font-size: var(--t12);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

.zt-pre__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Sobre negro el CTA se invierte: relleno blanco, tinta negra. */
.zt-pre .zt-cta {
  background: var(--paper);
  color: var(--ink);
  align-self: auto;
}

.zt-pre .zt-cta--ghost {
  background: transparent;
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.4);
}

.zt-pre .zt-cta--ghost:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.zt-pre__legal {
  font-size: var(--t12);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  max-width: 60ch;
}

.zt-pre__legal a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 08 · WORN BY ----------
   CARRUSEL, no rejilla. Es el gesto del carrusel "How to style" de la
   ficha de producto: unas fotos, el asomo de la siguiente, y se
   recorre arrastrando. El andamio es .zt-rail, compartido con
   zt-lifestyle; aqui solo va el contenido del slide.

   POR QUE DEJA DE SER REJILLA. Con 10 creadores, una rejilla de 4
   columnas son tres filas —la ultima con dos huecos vacios— y 2.100px
   de alto al final de una pagina que ya es larga. En una fila que se
   arrastra, los 10 caben en una pantalla y el asomo dice que hay mas.
   Y es el gesto que el visitante ya conoce de la ficha. */

.zt-crew { padding: var(--step) var(--edge) 0; }

/* La banda gris, como en la ficha (#f7f7f7 es exactamente --tint).
   Va a sangre, asi que se compensa el padding lateral con margen
   negativo y se devuelve dentro. */
.zt-crew--tint {
  background: var(--tint);
  padding: var(--step) var(--edge);
  margin-top: var(--step);
}

.zt-crew--tint .zt-creator__media { background: var(--tint-2); }

.zt-creator { min-width: 0; }

.zt-creator__media {
  position: relative;
  background: var(--tint);
  overflow: hidden;
  margin-bottom: 16px;
}

.zt-creator__media img,
.zt-creator__media video {
  width: 100%;
  aspect-ratio: var(--zt-creator-ratio, 4 / 5);
  object-fit: cover;
  object-position: var(--zt-pos, 50% 100%);
}

.zt-creator__name {
  font-size: var(--t14);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.zt-creator__handle {
  display: block;
  margin-top: 4px;
  font-size: var(--t12);
  line-height: 1.3;
  color: var(--muted);
}

a.zt-creator__link:hover .zt-creator__handle { color: var(--ink); }

.zt-creator__quote {
  margin-top: 10px;
  font-size: var(--t12);
  line-height: 1.6;
  color: var(--muted);
}

/* ============================================================
   Responsive. El CSS base es la tarjeta apilada, la misma en movil
   y en escritorio; lo unico que cambia por tramo es cuantas caben
   en una linea.

     >= 1130   los 4 colorways en una linea
     >=  600   colorways en 2 columnas
     <   600   en 1 columna

   WORN BY ya no esta en esta lista: es un carrusel y el numero de
   fotos por pantalla lo decide Swiper desde los data-* del rail, no
   una media query.
   ============================================================ */

/* ---------- Puntos: el texto baja bajo el titulo ---------- */

@media (max-width: 768px) {
  /* Mismo reparto que .values--text del tema: el numero se queda en
     su columna estrecha, el titulo ocupa el resto de la fila y el
     texto pasa debajo, a ancho completo. */
  .zt-point { padding-bottom: 28px; }
  .zt-point__num { width: 90px; }
  .zt-point__head { width: calc(100% - 90px); padding-right: 0; }
  .zt-point__body { width: 100%; padding-top: 18px; max-width: none; }
}

/* ---------- Las rejillas ganan columnas ---------- */

@media (min-width: 600px) {
  .zt-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 1130px es el mismo salto que usa .product-card del tema. Ahi la
   coleccion baja a 3 columnas; aqui a 2, porque con cuatro colorways
   un 3+1 deja una tarjeta huerfana. */
@media (min-width: 1130px) {
  .zt-rows,
}

/* ---------- Apilado completo ---------- */

@media (max-width: 768px) {
  /* Mismo estrechamiento que .collection-products del tema. */
  .zt-page { --edge: 11px; --step: 56px; }
  .zt-collection { padding-top: 28px; }

  /* Fabricacion pasa a una columna: la foto arriba y el texto
     debajo. El alternado deja de tener sentido y se anula, o el
     orden de lectura saltaria en zigzag. */
  .zt-step { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .zt-step:nth-child(even) .zt-step__media { order: 0; }
  .zt-craft__steps { gap: 48px; }
  .zt-step__body { max-width: none; }
}

@media (max-width: 719px) {
  .zt-page { --gut: 20px; }

  /* Aqui hubo un recorte a 4:3 y, en los pilares, un 1:1. Los dos
     retirados: la foto va en su proporcion nativa en los tres
     tramos. Lo que hacia interminable la pagina eran los pilares
     apilados de uno en uno; con dos columnas, volver de 1:1 a la
     proporcion nativa solo alarga unos 73px a 360 de ancho, y a
     cambio deja de comerse el 19 % del alto de cada foto. */

  .zt-close__col,
  .zt-close__meta { grid-column: 1 / -1; }

  .zt-close__meta { text-align: left; }

  .zt-legal { margin-top: 40px; }
  .zt-close { padding: 64px 0 80px; }

  /* El reloj a cuatro unidades no cabe a 360px con --t40 y 84px de
     minimo por celda: 4 x 84 + 3 x 8 = 360 justos, sin borde. Se
     retiran los separadores y se reparte en dos filas de dos. */
  .zt-clock { flex-wrap: wrap; gap: 16px 12px; }
  .zt-clock__unit { min-width: 64px; }
  .zt-clock__sep { display: none; }
}

/* ---------- Rail sin Swiper ----------
   Lo aplica js-zt-launch.js cuando Swiper no ha cargado en 5 s.
   Tambien es lo que se ve en preview.html, donde no hay tema y por
   tanto no hay Swiper.

   La fila y el ancho de slide ya estan en la base de .zt-rail, asi
   que aqui solo se anade lo que le falta para poder recorrerse a mano:
   scroll horizontal y anclaje. Lo que se pierde respecto a Swiper es
   el arrastre con el raton y la inercia; con el dedo va igual.

   El ancho no sale identico al de Swiper: Swiper descuenta el hueco
   del ancho del slide y aqui el hueco lo pone el gap del flex, asi que
   el fallback queda unos pocos pixeles mas ancho. Para una fila de
   rescate es de sobra. */

.zt-rail--fallback {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.zt-rail--fallback .swiper-slide { scroll-snap-align: start; }

/* ============================================================
   EL MATERIAL, QUE ES LO QUE MANDA (medido, no supuesto)
   ------------------------------------------------------------
   Las 66 fotos de la campana son VERTICALES, y 64 son exactamente
   2048x2521 (ratio 0,812), que es el --foto que declara esta
   hoja. NO HAY NI UNA APAISADA. Y, mas importante que eso: en los
   planos de figura entera el modelo esta de pie y LA ZAPATILLA
   TOCA EL BORDE INFERIOR del encuadre.

   Las dos cosas juntas explican toda la geometria de la pagina:

     - el hero es un DIPTICO, porque dos verticales llenan un
       viewport ancho recortando solo el 13,7 %, mientras que una
       sola forzada a 16:9 pierde el 57 % del alto;
     - el par de cada color (bodegon + Paris) va a proporcion
       NATIVA, sin recorte ninguno, que es la unica forma de
       poner dos verticales a sangre sin tocarlas;
     - la tira de ESTUDIO tambien es proporcion nativa;
     - donde SI se recorta, el ancla por defecto es el PIE de la
       foto, nunca el centro. Ver la regla de recorte al principio
       de esta hoja: el centro geometrico se lleva la suela.

   Los pocos recortes duros que quedan —la banda opcional de un
   color, las formas apaisadas de foto + texto— llevan su aviso
   en el editor con el porcentaje real que se pierde, para que
   nadie los elija sin saber lo que cuestan.
   ============================================================ */

/* ---------- Hero: diptico a sangre ----------
   Dos verticales a filo, cada una a la mitad del viewport. A
   1920x1020 cada celda mide 960x1020: la fuente escala a 960 de
   ancho (x0,469), queda en 1182 de alto y se recorta a 1020. Un
   13,7 %, y por arriba y abajo, que es donde una foto de moda
   tiene aire. Es el recurso de Zara con material vertical.

   El alto descuenta el header, que es sticky y ocupa sitio en el
   flujo: .header__content mide 60px, y 80px por debajo de 900. */

.zt-hero {
  position: relative;
  --zt-hero-header: 60px;
  /* Se ve solo si el par tiene calle. Con calle 0 no asoma. */
  background: var(--ink);
}

.zt-hero__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zt-hero-gap, 0px);
}

.zt-hero__cell {
  overflow: hidden;
  min-width: 0;
}

.zt-hero__cell img,
.zt-hero__cell video {
  display: block;
  width: 100%;
  height: calc(var(--zt-hero-vh, 100) * 1vh - var(--zt-hero-header));
  object-fit: cover;
  object-position: var(--zt-pos, 50% 100%);
}

/* La pieza de movil no se monta en escritorio. */
.zt-hero__cell--mobile { display: none; }

/* Tipografia sobre la foto. Sin caja y sin velo: mix-blend-mode
   la invierte contra la imagen, asi que se lee igual sobre zonas
   claras y oscuras sin ensuciarla. Es el recurso que el tema ya
   usa en el play/pause del slider y en el header de /pages/values. */
.zt-hero__status,
.zt-hero__heading,
.zt-hero__toggle {
  position: absolute;
  z-index: 2;
  color: var(--paper);
  mix-blend-mode: difference;
}

.zt-hero__status {
  top: 20px;
  left: 20px;
  font-size: var(--t12);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

/* El rotulo de campana. Grande pero no gritado: el tope de marca
   son 40px y aqui no se rompe. */
.zt-hero__heading {
  bottom: 28px;
  left: 20px;
  right: 20px;
  margin: 0;
  font-size: var(--t40);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  pointer-events: none;
}

.zt-hero--centre .zt-hero__heading { text-align: center; }

/* El play/pause del video si necesita clicarse. Va abajo a la
   derecha para no cruzarse con el rotulo, que arranca a la
   izquierda. */
.zt-hero__toggle {
  bottom: 20px;
  right: 20px;
}

.zt-hero__toggle:hover { color: var(--paper); opacity: 0.7; }

@media (max-width: 900px) {
  /* El tema sube .header__content a 80px por debajo de 900. Y --vh
     lo fija js-main.js:54 para que la barra de URL de iOS no
     cambie la altura al hacer scroll; es el mismo arreglo que usa
     style-section-slider.css. */
  .zt-hero { --zt-hero-header: 80px; }
  /* ALTO PROPIO EN MOVIL, y no es un capricho. En un 390x764 el
     hueco a 100vh mide 390x684 (ratio 0,57) y una vertical de
     0,812 tiene que escalar hasta cubrir 684 de alto: se va a 555
     de ancho y pierde 165px, el 30 % DEL ANCHO. En una zapatilla
     eso no es aire recortado, son los laterales de la zapa. A 73
     el recorte es cero: 390/0,812 = 480 de alto, que es
     exactamente 764 - 80 - 204.
     Hace falta una variable aparte porque --zt-hero-vh viene en
     un style inline y un inline no lo puede pisar una media
     query. */
  .zt-hero__cell img,
  .zt-hero__cell video {
    height: calc(var(--zt-hero-vh-m, var(--zt-hero-vh, 100)) * var(--vh, 1vh) - var(--zt-hero-header));
  }
}

/* El diptico se deshace en 768, que es donde el tema cambia de
   pieza en section-slider-values. Dos verticales a 195px de ancho
   no son un diptico, son dos sellos. */
@media (max-width: 768px) {
  .zt-hero__pair { grid-template-columns: minmax(0, 1fr); }

  /* Con pieza de movil, manda ella y las dos de escritorio salen
     del flujo. Sin ella, sobrevive la primera del par. */
  .zt-hero__pair--has-mobile .zt-hero__cell--desktop { display: none; }
  .zt-hero__pair--has-mobile .zt-hero__cell--mobile { display: block; }
  .zt-hero__pair:not(.zt-hero__pair--has-mobile) .zt-hero__cell--2 { display: none; }

  .zt-hero__status { top: 16px; left: 16px; }
  .zt-hero__heading { bottom: 20px; left: 16px; right: 16px; }
  .zt-hero__toggle { bottom: 16px; right: 16px; }
}

/* ---------- Marquesina: scroll horizontal en movimiento ----------
   La tira de ESTUDIO, moviendose sola. CSS puro, sin Swiper y sin
   JS para el movimiento: es el patron que el tema ya usa en
   sections/section-products-carousel.liquid, donde duplica los
   items con {% for i in (1..2) %} y pasa la duracion por custom
   property calculada en Liquid.

   POR QUE FUNCIONA EL BUCLE: la pista lleva DOS COPIAS EXACTAS de
   la lista. Desplazarla un -50 % mueve justo el ancho de una
   copia, asi que al reiniciar la animacion el fotograma es
   identico y no se ve el salto. Si alguien cambia el numero de
   copias, hay que cambiar el -50 %.

   Y POR QUE SE FIJA EL ALTO Y NO EL ANCHO: con material todo
   vertical, fijando el alto salen todas las fotos igual de altas
   y el ancho lo pone su proporcion. Cero recorte. Fijando el
   ancho habria que recortar cada una a la misma caja. */

.zt-marquee {
  overflow: hidden;
  padding: var(--step) 0 0;
}

.zt-marquee__head { padding: 0 var(--edge); }

.zt-marquee__viewport { overflow: hidden; }

.zt-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--zt-mq-gap, 5px);
  animation: zt-marquee-scroll var(--zt-mq-dur, 60s) linear infinite;
}

.zt-marquee--reverse .zt-marquee__track { animation-direction: reverse; }

@keyframes zt-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  /* La calle del primer item de la segunda copia entra en el
     calculo: sin restarla, el bucle deriva media calle por vuelta. */
  to { transform: translate3d(calc(-50% - var(--zt-mq-gap, 5px) / 2), 0, 0); }
}

.zt-marquee__item {
  flex: 0 0 auto;
  height: var(--zt-mq-h, 70vh);
  aspect-ratio: var(--foto);
  overflow: hidden;
  background: var(--tint);
}

.zt-marquee__item img,
.zt-marquee__item video,
.zt-marquee__item a {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--zt-pos, 50% 100%);
}

/* Parada. La pausa al pasar por encima deja leer una foto sin
   tener que pulsar nada; el boton es para quien la quiera quieta
   del todo. */
.zt-marquee--hover-pause .zt-marquee__viewport:hover .zt-marquee__track,
.zt-marquee[data-zt-paused="true"] .zt-marquee__track {
  animation-play-state: paused;
}

.zt-marquee__controls {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px var(--edge) 0;
}

@media (max-width: 768px) {
  .zt-marquee__item { height: var(--zt-mq-h-mobile, 52vh); }
}

/* Movimiento reducido: quieta. Una tira que se mueve sola es
   justo lo que esta preferencia pide desactivar, y la seccion
   sigue siendo legible parada —se recorre con el dedo—. */
@media (prefers-reduced-motion: reduce) {
  .zt-marquee__track { animation: none; }
  .zt-marquee__viewport { overflow-x: auto; }
}

/* ============================================================
   COLOURWAY — el par bodegon + Paris, un color por bloque
   ------------------------------------------------------------
   El documento de contenidos lo pide literal: "es importante
   acompanar foto tipo bodegon producto con foto shooting Paris".
   Asi que la unidad de esta seccion no es la foto, es EL PAR, y
   por eso es un bloque y no dos.

   Las dos fotos van a PROPORCION NATIVA (--foto), cero recorte:
   a 1920 cada mitad mide 960x1182. El par se lee como una doble
   pagina y la zapatilla llega intacta en las dos, que es todo el
   punto. El bodegon alterna de lado por bloque para que cuatro
   colores seguidos no sean cuatro veces la misma maqueta.
   ============================================================ */

.zt-colourways { padding: var(--step) 0 0; }

.zt-colourways__head { padding: 0 var(--edge); }

.zt-cw {
  padding-top: var(--step);
}

.zt-cw:first-child { padding-top: 40px; }

/* El rotulo del color, a filo de pagina y sobre el par. */
.zt-cw__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gut);
  padding: 0 var(--edge) 14px;
}

.zt-cw__name {
  font-size: var(--t20);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
}

.zt-cw__note {
  font-size: var(--t12);
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  text-align: right;
}

.zt-cw__link {
  font-size: var(--t12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* El par. A sangre y sin hueco entre las dos por defecto: se
   quiere que se lean como una sola imagen doble. */
.zt-cw__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zt-cw-gap, 0px);
}

/* Alterna el lado del bodegon. Igual que en zt-step: con order,
   no con direction, para no arrastrar la alineacion del texto. */
.zt-cw--flip .zt-cw__still { order: 2; }

.zt-cw__cell {
  position: relative;
  overflow: hidden;
  background: var(--tint);
  min-width: 0;
}

.zt-cw__cell img,
.zt-cw__cell video {
  display: block;
  width: 100%;
  aspect-ratio: var(--foto);
  object-fit: cover;
  object-position: var(--zt-pos, 50% 100%);
}

/* La tercera foto, opcional: banda a ancho completo bajo el par.
   Es el UNICO recorte duro de la seccion, asi que su ajuste
   avisa de que ahi va detalle, no figura entera. */
.zt-cw__wide { margin-top: var(--zt-cw-gap, 0px); }

.zt-cw__wide img,
.zt-cw__wide video {
  display: block;
  width: 100%;
  aspect-ratio: var(--zt-cw-band, 2 / 1);
  object-fit: cover;
  object-position: var(--zt-pos, 50% 100%);
}

@media (max-width: 768px) {
  /* En una columna el par sigue siendo un par: se apila, no se
     recorta. Dos verticales a 195px de ancho no son una doble
     pagina, son dos sellos. */
  .zt-cw__pair { grid-template-columns: minmax(0, 1fr); }
  .zt-cw--flip .zt-cw__still { order: 0; }
  .zt-cw__wide img,
  .zt-cw__wide video { aspect-ratio: var(--zt-cw-band-mobile, 4 / 3); }
  .zt-cw__bar { flex-direction: column; align-items: flex-start; gap: 6px; }
  .zt-cw__note { text-align: left; }
}

/* ============================================================
   HERO SIN RECORTE — la salida de emergencia
   ------------------------------------------------------------
   A sangre y a 100vh, una vertical de 0,812 en una celda de
   0,941 pierde el 13,7 %. Anclada al pie eso sale por arriba y
   la zapatilla llega, que es lo que importa. Pero si un dia la
   foto elegida no puede perder ni un pixel —un bodegon donde la
   zapa llena el encuadre de arriba abajo—, `contain` la mete
   entera sobre fondo plano: cero recorte, a cambio del sangrado.
   ============================================================ */

.zt-hero--contain .zt-hero__cell {
  background: var(--tint);
}

.zt-hero--contain .zt-hero__cell img,
.zt-hero--contain .zt-hero__cell video {
  object-fit: contain;
  object-position: 50% 50%;
}