/*
  IDENTIKO — portada.

  Se carga DESPUÉS de sitio.css y usa el prefijo hx- para no pelearse con las
  capas heredadas. El negro vive solo acá: el resto del sitio sigue en blanco.

  Recursos de marca, todos del kit del cliente:
    · 04_ELEMENTOS → formas con grano del fondo
    · 05_ICONOS    → sellos de los pasos, [LAB], óvalo y marquesina
    · 03_TEXTURAS  → tramas de acento

  MOVIMIENTO
  La entrada se dispara agregando .hx-listo al <body>, una vez cargadas las
  fuentes: así el texto no se anima con la tipografía de reemplazo y después
  salta. Todo se anima con transform y opacity, que no fuerzan recálculo de
  layout. Con "reducir movimiento" activado, todo aparece en su estado final.
*/

@font-face {
  font-family: 'Ugly Dave';
  src: url('../assets/fonts/UglyDaveRegular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --hx-negro: #0A0A0A;
  --hx-azul: #0B55E8;
  --hx-naranja: #E83810;
  --hx-amarillo: #FFE819;
  --hx-curva: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── encabezado sobre la portada ─────────────────────────────────────────── */
body:not(.hx-scrolled) header {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}

body:not(.hx-scrolled) header .logo img { filter: invert(1); }

body:not(.hx-scrolled) header nav a,
body:not(.hx-scrolled) header nav button,
body:not(.hx-scrolled) .header-lab { color: #fff; }

body:not(.hx-scrolled) .header-lab { border-color: rgba(255, 255, 255, 0.42); }

body:not(.hx-scrolled) .header-contact {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: transparent;
}

body:not(.hx-scrolled) .header-contact:hover {
  background: #fff;
  color: var(--hx-negro);
}

body:not(.hx-scrolled) .menu-toggle {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
}

body:not(.hx-scrolled) .menu-toggle .menu-icon path { stroke: #fff; }

body:not(.hx-scrolled) #mainNav.open {
  background: var(--hx-negro);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

header { transition: background 0.35s ease, border-color 0.35s ease; }

/* ── barra de anuncios ───────────────────────────────────────────────────── */
.hx-anuncio {
  position: relative;
  z-index: 60;
  background: var(--hx-azul);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.hx-anuncio-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 max(5%, 16px);
  height: 40px;
}

.hx-anuncio-sello {
  font-family: 'Identiko Helvetica Bold', 'Helvetica Neue', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 1.4px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 2px;
  flex-shrink: 0;
}

/*
  Los mensajes se apilan en el mismo lugar y se turnan. Todos siguen en el
  documento, así que un lector de pantalla los lee completos en orden en vez
  de anunciar cada cambio, que es lo que molesta de estas barras.
*/
.hx-anuncio-mensajes {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
}

.hx-anuncio-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  font-family: 'Identiko Helvetica Bold', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.2px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--hx-curva), transform 0.45s var(--hx-curva);
  pointer-events: none;
}

/*
  El recorte va en el hijo y no en el contenedor: text-overflow no funciona
  sobre un contenedor flex, y por eso un mensaje largo se cortaba a la mitad
  de una palabra en vez de terminar en puntos suspensivos.
*/
.hx-anuncio-msg > span {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hx-anuncio-msg.activo {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hx-anuncio-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-family: 'Identiko Helvetica Bold', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--hx-negro);
  background: var(--hx-amarillo);
  border-radius: 999px;
  padding: 5px 13px;
  transition: transform 0.2s var(--hx-curva);
}

.hx-anuncio-cta svg {
  width: 13px;
  height: 13px;
  transition: transform 0.22s var(--hx-curva);
}

.hx-anuncio-cta:hover { transform: translateY(-1px); }
.hx-anuncio-cta:hover svg { transform: translateX(3px); }

/*
  En celular no entra un mensaje de 50 caracteres más un botón con texto. El
  botón pasa a ser solo la flecha —conserva su etiqueta accesible— y con eso
  los mensajes actuales entran enteros. Si en el futuro escribís uno más
  largo, termina en puntos suspensivos: conviene no pasar de ~50 caracteres.
*/
@media (max-width: 760px) {
  .hx-anuncio-inner { height: 34px; gap: 8px; padding-inline: 4%; }
  .hx-anuncio-sello { display: none; }
  .hx-anuncio-msg { font-size: 10px; letter-spacing: 0; }
  .hx-anuncio-cta { padding: 4px 7px; gap: 0; }
  .hx-anuncio-cta > span { display: none; }
  .hx-anuncio-cta svg { width: 15px; height: 15px; }
}

/* ── lienzo ──────────────────────────────────────────────────────────────── */
.hx-hero {
  position: relative;
  background: var(--hx-negro);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  /*
    El hero se mete por debajo del encabezado. La medida exacta la fija
    hero.js leyendo la altura real del header: las capas heredadas de
    sitio.css le cambian el alto según el ancho de pantalla, y cualquier
    número fijo acá deja una franja blanca en algún breakpoint.
    Estos valores son solo el arranque, antes de que corra el script.
  */
  margin-top: -80px;
  padding-top: 80px;
}

/*
  FONDO EN TRES CAPAS

  1. Cuadrícula del manual (página 19), dibujada con gradientes. Se desplaza
     en diagonal de forma continua: el paso de la celda es 58px, así que un
     recorrido de exactamente 58px vuelve al punto de partida y el bucle no
     tiene costura.
  2. Una segunda cuadrícula, más grande y azul, que va en sentido contrario.
     Dos velocidades distintas dan sensación de profundidad.
  3. Un resplandor azul que respira, para que el negro no quede plano.
*/
.hx-trama {
  position: absolute;
  inset: -80px;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 58px 58px;
  animation: hxDeriva 22s linear infinite;
}

@keyframes hxDeriva {
  from { background-position: 0 0; }
  to { background-position: 58px 58px; }
}

.hx-trama-2 {
  position: absolute;
  inset: -80px;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(11, 85, 232, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 85, 232, 0.22) 1px, transparent 1px);
  background-size: 174px 174px;
  animation: hxDeriva2 34s linear infinite;
}

@keyframes hxDeriva2 {
  from { background-position: 0 0; }
  to { background-position: -174px 174px; }
}

.hx-resplandor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: -18%;
  left: 24%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(11, 85, 232, 0.28) 0%, transparent 62%);
  animation: hxRespira 11s ease-in-out infinite;
}

@keyframes hxRespira {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}

/*
  Banda de trama del kit, en diagonal. El patrón se desplaza dentro de la
  banda, así que la textura corre sin que se mueva la banda: se lee como una
  cinta transportadora.
*/
.hx-banda {
  position: absolute;
  z-index: 0;
  right: -10%;
  top: 18%;
  width: 46%;
  height: 78px;
  transform: rotate(-14deg);
  background-image: url('../assets/img/texturas/trama-triangulos.webp');
  background-size: 120px;
  opacity: 0.18;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  animation: hxCinta 14s linear infinite;
}

@keyframes hxCinta {
  from { background-position: 0 0; }
  to { background-position: -240px 0; }
}

/* segunda banda, abajo a la izquierda, en sentido contrario */
.hx-banda-2 {
  position: absolute;
  z-index: 0;
  left: -12%;
  bottom: 22%;
  width: 40%;
  height: 58px;
  transform: rotate(-9deg);
  background-image: url('../assets/img/texturas/trama-triangulos.webp');
  background-size: 88px;
  opacity: 0.12;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
  animation: hxCinta2 19s linear infinite;
}

@keyframes hxCinta2 {
  from { background-position: 0 0; }
  to { background-position: 176px 0; }
}

/* ── formas con grano ────────────────────────────────────────────────────── */
/*
  Dos capas por forma, a propósito:
    · el envoltorio (.hx-forma-env) lleva la posición y el parallax del puntero
    · la imagen (.hx-forma) lleva la entrada y la flotación continua
  Si ambas cosas vivieran en el mismo transform, una pisaría a la otra.
*/
.hx-forma-env {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  transition: transform 0.9s var(--hx-curva);
  will-change: transform;
}

.hx-forma {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform, opacity;
}

.hx-forma-aro       { top: -60px;    left: 40%;    width: 320px; }
.hx-forma-triangulo { top: 4%;       left: -70px;  width: 240px; }
.hx-forma-cuarto    { bottom: 4%;    left: -90px;  width: 260px; }
.hx-forma-arco      { bottom: -90px; left: 44%;    width: 300px; }
.hx-forma-azul      { top: -40px;    right: -60px; width: 300px; }
.hx-forma-azul-2    { bottom: 2%;    right: -40px; width: 260px; }

/* flotación continua: cada forma con su propio ritmo para que no marchen juntas */
@keyframes hxFlota1 { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(0,-22px,0) rotate(4deg); } }
@keyframes hxFlota2 { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(14px,16px,0) rotate(-5deg); } }
@keyframes hxFlota3 { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(-16px,-14px,0) rotate(3deg); } }
@keyframes hxGira   { to { transform: rotate(360deg); } }

.hx-listo .hx-forma-env[data-mov='gira']   > .hx-forma.hx-flotando { animation: hxGira 54s linear infinite; }
.hx-listo .hx-forma-env[data-mov='flota1'] > .hx-forma.hx-flotando { animation: hxFlota1 17s ease-in-out infinite; }
.hx-listo .hx-forma-env[data-mov='flota2'] > .hx-forma.hx-flotando { animation: hxFlota2 13s ease-in-out infinite; }
.hx-listo .hx-forma-env[data-mov='flota3'] > .hx-forma.hx-flotando { animation: hxFlota3 15s ease-in-out infinite; }

.hx-parallax {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ── estructura ──────────────────────────────────────────────────────────── */
.hx-inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 56px;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: 44px max(5%, 24px) 40px;
  min-height: 620px;
}

.hx-copy { min-width: 0; }

/* ── entrada: estado inicial y llegada ───────────────────────────────────── */
.hx-ent {
  opacity: 0;
  transform: translateY(22px);
}

.hx-listo .hx-ent {
  animation: hxEntra 0.85s var(--hx-curva) forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes hxEntra {
  to { opacity: 1; transform: translateY(0); }
}

/* sellos y stickers entran con un rebote corto */
.hx-pop {
  opacity: 0;
  transform: scale(0.4) rotate(-12deg);
}

.hx-listo .hx-pop {
  animation: hxPop 0.6s var(--hx-curva) forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes hxPop {
  60% { opacity: 1; transform: scale(1.12) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* formas: entran desde su borde */
.hx-forma { opacity: 0; }

.hx-listo .hx-forma {
  animation: hxFormaEntra 1.1s var(--hx-curva) forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes hxFormaEntra {
  from { opacity: 0; transform: scale(0.82); }
  to { opacity: 1; transform: scale(1); }
}

/*
  Una vez terminada la entrada, JS agrega .hx-flotando y la animación continua
  reemplaza a la de entrada. Al reemplazarla se pierde el estado final que
  mantenía `forwards`, así que hay que volver a fijar la opacidad acá: si no,
  la pieza se desvanece justo cuando termina de aparecer.
*/
.hx-listo .hx-flotando { opacity: 1; }

/* ── titular ─────────────────────────────────────────────────────────────── */
.hx-eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: 'Identiko Helvetica Bold', 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 2.4px;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 22px;
}

.hx-eyebrow::before {
  content: '';
  width: 0;
  height: 2px;
  background: var(--hx-amarillo);
  flex-shrink: 0;
}

.hx-listo .hx-eyebrow::before {
  animation: hxLinea 0.7s var(--hx-curva) 0.25s forwards;
}

@keyframes hxLinea { to { width: 34px; } }

.hx-hero h1 {
  font-family: 'Identiko Helvetica Bold', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(38px, 5.1vw, 70px);
  line-height: 0.96;
  letter-spacing: -2px;
  text-transform: uppercase;
  margin: 0 0 34px;
  color: #fff;
}

/* cada línea se revela desde su propia máscara */
.hx-linea {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}

.hx-linea > span,
.hx-linea > em {
  display: block;
  font-style: normal;
  transform: translateY(105%);
}

.hx-linea > em { color: var(--hx-azul); }

.hx-listo .hx-linea > span,
.hx-listo .hx-linea > em {
  animation: hxSube 0.95s var(--hx-curva) forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes hxSube { to { transform: translateY(0); } }

/* ── tres pasos ──────────────────────────────────────────────────────────── */
/*
  El contenedor es un <div> y la lista va adentro: los tramos de la barra
  tienen que ser hermanos de la lista para medirse contra la fila completa.
  Dentro de un <li> su ancho se calcularía contra esa sola columna, y la
  barra nunca llegaría al paso siguiente.
*/
.hx-pasos {
  position: relative;
  max-width: 460px;
  margin: 0 0 30px;
}

.hx-pasos-lista {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
}

/*
  La barra son DOS tramos, no una línea sola: primero aparece "Elegí tu
  prenda", el tramo avanza hasta "Sumá tu diseño", y recién ahí el segundo
  tramo avanza hasta "Hacé tu pedido". El recorrido cuenta el proceso.

  El carril tenue queda siempre visible para que se lea a dónde va.
*/
.hx-pasos::before,
.hx-pasos::after {
  content: '';
  position: absolute;
  top: 22px;
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
  z-index: 0;
}

.hx-pasos::before { left: 16%; width: 34%; }
.hx-pasos::after { left: 50%; width: 34%; }

/* los tramos que se llenan van sobre el carril */
.hx-tramo {
  position: absolute;
  top: 22px;
  height: 2px;
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: 2px;
}

.hx-tramo-1 {
  left: 16%;
  width: 34%;
  background: linear-gradient(90deg, var(--hx-azul), var(--hx-naranja));
}

.hx-tramo-2 {
  left: 50%;
  width: 34%;
  background: linear-gradient(90deg, var(--hx-naranja), var(--hx-amarillo));
}

/* 1,2 s: cada tramo termina justo cuando aparece el sello siguiente.
   Si cambiás esta duración, hay que correr los --d de index.html para que
   el sello siguiente siga apareciendo cuando la barra llega. */
.hx-listo .hx-tramo { animation: hxTraza 1.2s ease-in-out forwards; animation-delay: var(--d, 0ms); }

@keyframes hxTraza { to { transform: scaleX(1); } }

/* punto que viaja por delante del tramo, como una cabeza de progreso */
.hx-tramo::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
}

.hx-listo .hx-tramo::after {
  animation: hxCabeza 1.2s ease-in-out forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes hxCabeza {
  0% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

/*
  Sin position: relative. Es un elemento de grid, así que z-index le funciona
  igual, y sin posicionar no se convierte en el ancla de los tramos de la barra.
*/
.hx-paso {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

/*
  LOS TRES SELLOS, DEL MISMO TAMAÑO Y QUIETOS

  Cada PNG del kit tiene el dibujo centrado con distinto margen transparente:
  las flechas ocupan el 50,9 % del lienzo, el Cooking 4 U el 63,6 % y el globo
  el 57,3 %. Puestos al mismo ancho se ven de tres tamaños distintos.

  Por eso el sello es un contenedor de medida fija y la imagen se escala
  adentro hasta que el dibujo queda igual en los tres. Los porcentajes de
  abajo salen de esa medición, no de probar a ojo.

  No llevan animación continua: tienen que quedar alineados en una sola línea.
*/
.hx-sello {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

/*
  Cada imagen se amplía hasta que su insignia mida lo mismo: 42 px dentro del
  círculo de 46, o sea con dos píxeles de aire a cada lado para que el recorte
  no le coma el borde. El factor es 42 / (lo que ocupa el dibujo en su PNG):
    · Cooking 4 U ocupa 63,6 %  →  144 %
    · globo       ocupa 57,3 %  →  159 %
    · flechas     ocupa 50,9 %  →  205 % (tiene que tapar el círculo, ver abajo)
  Lo que se recorta es el margen transparente del archivo, nunca el dibujo.
*/
/*
  Centrado por posición absoluta y no por grid: cuando el hijo es más grande
  que su caja, la alineación centrada de grid y flex lo corre hacia un borde
  para "no perder contenido", y el dibujo termina cortado de un lado.
*/
.hx-sello img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 144%;
  height: 144%;
  object-fit: contain;
  display: block;
}

.hx-sello-globo img {
  width: 159%;
  height: 159%;
}

/* el dibujo de las flechas es un cuadrado crema, no una insignia redonda:
   se amplía hasta tapar el círculo y el recorte le da la forma. El fondo
   lleva el mismo crema del archivo (#e7e1d7) para que no se vea el borde. */
.hx-sello-flechas {
  background: #e7e1d7;
}

.hx-sello-flechas img {
  width: 205%;
  height: 205%;
}

.hx-pill {
  font-family: 'Identiko Helvetica Bold', 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.2px;
  padding: 5px 11px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}

.hx-pill-azul { background: var(--hx-azul); }
.hx-pill-naranja { background: var(--hx-naranja); }
.hx-pill-amarillo { background: var(--hx-amarillo); color: #111; }

.hx-listo .hx-paso:hover .hx-pill {
  transform: translateY(-2px);
}

.hx-pill { transition: transform 0.2s var(--hx-curva); }

/* el cierre de la secuencia: último, debajo de todo, una vez que la barra
   recorrió los tres pasos */
.hx-listo-pill {
  display: block;
  width: max-content;
  margin: 14px auto 0;
  font-family: 'Ugly Dave', 'Identiko Helvetica Bold', sans-serif;
  font-size: 15px;
  color: var(--hx-negro);
  background: var(--hx-amarillo);
  border: 1px solid var(--hx-negro);
  border-radius: 999px;
  padding: 4px 16px 5px;
}

/* ── categorías ──────────────────────────────────────────────────────────── */
.hx-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.hx-cat {
  font-family: 'Identiko Helvetica Bold', 'Helvetica Neue', Arial, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.4px;
  color: #fff;
  background: transparent;
  border: 1px solid var(--hx-naranja);
  border-radius: 3px;
  padding: 7px 15px;
  transition: background 0.2s var(--hx-curva), transform 0.2s var(--hx-curva);
}

.hx-cat:hover {
  background: var(--hx-naranja);
  transform: translateY(-2px);
}

/* ── llamadas a la acción ────────────────────────────────────────────────── */
.hx-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.hx-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Identiko Helvetica Bold', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12.5px;
  padding: 13px 22px;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--hx-curva);
}

.hx-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s var(--hx-curva);
}

.hx-btn:hover { transform: translateY(-2px); }
.hx-btn:hover svg { transform: translateX(4px); }

.hx-btn-azul { background: var(--hx-azul); color: #fff; }
.hx-btn-azul:hover { background: #0843bb; }

.hx-btn-linea {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.72);
}

.hx-btn-linea:hover { background: #fff; color: var(--hx-negro); }

.hx-oval { width: 96px; display: block; }

.hx-listo .hx-oval.hx-flotando {
  animation: hxFlota1 11s ease-in-out infinite;
}

/* ── producto ────────────────────────────────────────────────────────────── */
.hx-producto {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  justify-self: end;
  width: 100%;
  max-width: 520px;
}

.hx-lab {
  position: absolute;
  top: -34px;
  left: -40px;
  width: 112px;
  z-index: 3;
}

.hx-listo .hx-lab.hx-flotando {
  animation: hxBambolea 5.5s ease-in-out infinite;
}

@keyframes hxBambolea {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(-8deg) translateY(-6px); }
}

.hx-marco {
  flex: 1;
  min-width: 0;
  border: 3px solid var(--hx-azul);
  border-radius: 4px;
  background: var(--hx-negro);
  padding: 10px;
  position: relative;
  opacity: 0;
  transform: scale(0.94);
}

.hx-listo .hx-marco {
  animation: hxMarco 1s var(--hx-curva) 0.3s forwards;
}

@keyframes hxMarco {
  to { opacity: 1; transform: scale(1); }
}

.hx-marco-top {
  display: flex;
  justify-content: space-between;
  font-family: 'Identiko Helvetica Bold', 'Helvetica Neue', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, 0.7);
  padding: 2px 3px 9px 74px;
}

.hx-foto {
  position: relative;
  background: #E8E8E6;
  border-radius: 2px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hx-foto > img#hxPrenda {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity 0.35s ease, transform 0.6s var(--hx-curva);
}

/* La estampa es un elemento aparte, superpuesto sobre la foto: la fotografía
   original es una prenda lisa. Entra "aterrizando" sobre el pecho, que es
   justo lo que hace el cliente en el editor. */
.hx-foto > img.hx-estampa {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 38%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.5);
}

.hx-listo .hx-foto > img.hx-estampa {
  animation: hxAterriza 0.9s var(--hx-curva) 0.95s forwards;
}

@keyframes hxAterriza {
  60% { opacity: 1; transform: translate(-50%, -50%) scale(0.95); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* destello circular en el momento del aterrizaje */
.hx-destello {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--hx-azul);
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  pointer-events: none;
}

.hx-listo .hx-destello {
  animation: hxDestello 0.85s ease-out 1.05s forwards;
}

@keyframes hxDestello {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.3); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

/*
  "Personalizá tus prendas" deja de ser un rótulo y pasa a ser la puerta al
  editor: es un enlace real, con la manuscrita de la marca sobre amarillo, y
  una flecha que se adelanta al pasar el puntero. Era el único lugar del hero
  que prometía algo sin llevar a ningún lado.
*/
.hx-script {
  position: absolute;
  left: 50%;
  bottom: -20px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%) translateY(14px) rotate(-1.6deg);
  opacity: 0;
  background: var(--hx-amarillo);
  border: 1.5px solid var(--hx-negro);
  color: var(--hx-negro);
  font-family: 'Ugly Dave', 'Identiko Helvetica Bold', sans-serif;
  font-size: 20px;
  line-height: 1;
  padding: 10px 22px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
  transition: transform 0.28s var(--hx-curva), box-shadow 0.28s var(--hx-curva);
}

.hx-script svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  transition: transform 0.28s var(--hx-curva);
}

.hx-listo .hx-script {
  animation: hxScript 0.8s var(--hx-curva) 1.25s forwards;
}

@keyframes hxScript {
  to { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-1.6deg); }
}

.hx-listo .hx-script:hover {
  transform: translateX(-50%) translateY(-3px) rotate(-1.6deg);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6);
}

.hx-script:hover svg { transform: translateX(4px); }

/* marcas de registro en las esquinas del marco: lenguaje de taller gráfico */
.hx-marco::before,
.hx-marco::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--hx-amarillo);
  pointer-events: none;
}

.hx-marco::before {
  top: 4px;
  right: 4px;
  border-left: 0;
  border-bottom: 0;
}

.hx-marco::after {
  bottom: 4px;
  left: 4px;
  border-right: 0;
  border-top: 0;
}

/* la foto se acerca apenas al pasar por el marco */
.hx-listo .hx-marco:hover .hx-foto > img#hxPrenda {
  transform: scale(1.035);
}

.hx-tira {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  width: 84px;
}

.hx-tira button {
  border: 2px solid var(--hx-azul);
  border-radius: 3px;
  background: #E8E8E6;
  padding: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 0.2s, transform 0.25s var(--hx-curva);
}

.hx-tira button[aria-pressed='true'] { opacity: 1; }
.hx-tira button:hover { opacity: 1; transform: translateX(-4px); }

.hx-tira img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.hx-nota {
  font-size: 9px;
  letter-spacing: 1.2px;
  font-family: 'Identiko Helvetica Bold', 'Helvetica Neue', Arial, sans-serif;
  color: rgba(255, 255, 255, 0.45);
  text-align: right;
  margin-top: 26px;
}

/* ── marquesina de stickers ──────────────────────────────────────────────── */
.hx-marquesina {
  position: relative;
  z-index: 3;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  padding: 13px 0;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.hx-marquesina-pista {
  display: flex;
  align-items: center;
  gap: 42px;
  width: max-content;
  animation: hxDesfile 38s linear infinite;
}

.hx-marquesina:hover .hx-marquesina-pista { animation-play-state: paused; }

@keyframes hxDesfile {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.hx-mq-item {
  display: flex;
  align-items: center;
  gap: 42px;
  flex-shrink: 0;
}

.hx-mq-item img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}

.hx-mq-item span {
  font-family: 'Identiko Helvetica Bold', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 2.6px;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}

/* ── pie de la portada ───────────────────────────────────────────────────── */
.hx-foot {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px max(5%, 24px) 22px;
  font-family: 'Identiko Helvetica Bold', 'Helvetica Neue', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 1.6px;
  color: rgba(255, 255, 255, 0.6);
}

.hx-foot a {
  color: #fff;
  font-size: 15px;
  line-height: 1;
  animation: hxBaja 2.4s ease-in-out infinite;
}

@keyframes hxBaja {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ── adaptaciones ────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hx-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    min-height: 0;
    padding-top: 28px;
  }
  .hx-producto { justify-self: start; max-width: 440px; }
  .hx-forma-aro { left: auto; right: 6%; width: 220px; }
  .hx-forma-arco { left: 30%; width: 220px; }
  .hx-banda { display: none; }
}

@media (max-width: 760px) {
  .hx-hero { margin-top: -68px; padding-top: 68px; }
  .hx-inner { padding: 22px 6% 30px; gap: 32px; }
  .hx-hero h1 {
    font-size: clamp(31px, 8.8vw, 46px);
    letter-spacing: -1.4px;
    margin-bottom: 26px;
  }
  .hx-pasos { max-width: none; }
  .hx-sello { width: 38px; height: 38px; }
  /* la barra va al centro del sello: 38 / 2 - 1 */
  .hx-pasos::before,
  .hx-pasos::after,
  .hx-tramo { top: 18px; }
  .hx-listo-pill { font-size: 13px; }
  .hx-pill { font-size: 8.5px; padding: 4px 8px; }
  .hx-producto { max-width: none; }
  .hx-tira { width: 64px; }
  .hx-lab { width: 78px; top: -18px; left: -12px; }
  .hx-marco-top { padding-left: 54px; }
  .hx-script { font-size: 15px; padding: 7px 18px 9px; }
  .hx-forma-triangulo, .hx-forma-cuarto { width: 150px; }
  .hx-forma-aro, .hx-forma-azul, .hx-forma-azul-2, .hx-forma-arco { width: 170px; }
  .hx-foot { font-size: 8px; letter-spacing: 1px; }
  .hx-marquesina { padding: 10px 0; }
  .hx-marquesina-pista { gap: 30px; animation-duration: 26s; }
  .hx-mq-item { gap: 30px; }
  .hx-mq-item img { width: 26px; height: 26px; }
  .hx-mq-item span { font-size: 9px; letter-spacing: 2px; }
}

@media (max-width: 420px) {
  .hx-tira { width: 52px; }
  .hx-foot span:nth-child(2) { display: none; }
}

/* ── sin movimiento ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hx-ent,
  .hx-pop,
  .hx-forma,
  .hx-marco,
  .hx-script,
  .hx-foto > img.hx-estampa {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hx-foto > img.hx-estampa {
    transform: translate(-50%, -50%) !important;
  }
  .hx-linea > span,
  .hx-linea > em {
    transform: none !important;
    animation: none !important;
  }
  .hx-eyebrow::before { width: 34px; animation: none !important; }
  .hx-tramo { transform: scaleX(1); animation: none !important; }
  .hx-tramo::after { display: none; }
  .hx-destello { display: none; }
  .hx-marquesina-pista,
  .hx-foot a,
  .hx-lab,
  .hx-oval,
  .hx-trama,
  .hx-trama-2,
  .hx-banda,
  .hx-banda-2,
  .hx-resplandor { animation: none !important; }
  .hx-script { transform: translateX(-50%) rotate(-1.6deg) !important; }
  .hx-anuncio-msg { transition: none !important; transform: none !important; }
  .hx-lab { transform: rotate(-4deg); }
  .hx-parallax { transition: none; }
}