/* ==========================================================================
   Hero de PRIMAVERA de la portada (parts/hero-primavera.php): paisaje con
   cordillera y la rueda trasera 29" rodando sobre la pradera. Se carga solo
   cuando la temporada de la portada es «primavera» (ezn_temporada_portada()).
   La rueda y el polvo los dibuja assets/js/hero-primavera.js.
   ========================================================================== */
.ezn-p-hero { position: relative; overflow: hidden; height: 760px; display: flex; }
.ezn-p-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }

/* Polvo: un canvas detrás de la rueda y otro desenfocado por delante, sin bloquear clics */
.ezn-p-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ezn-p-fx.back { z-index: 1; }
.ezn-p-fx.front { z-index: 3; filter: blur(1.2px); }

.ezn-p-hero .ezn-p-wrap {
  position: relative; z-index: 2; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: end;
}
.ezn-p-copy { align-self: center; padding: 0 0 150px; }
.ezn-p-hero h1 { font-size: clamp(44px, 5.2vw, 76px); }

/* Rueda: caja 560×700 apoyada en el suelo del hero; se corta por arriba y la cadena sale por la derecha.
   En escritorio se corre hacia el borde derecho de la ventana (queda a ~30 px), así no queda pasto
   vacío delante de la rueda. */
.ezn-p-art { position: relative; justify-self: end; width: 100%; max-width: 560px; aspect-ratio: 560 / 700; align-self: end;
  margin-right: min(0px, calc((1200px - 100vw) / 2 + 6px)); }
.ezn-p-wheel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }

.ezn-p-chip {
  position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 1px;
  background: rgba(14, 14, 60, .92); border: 1px solid var(--p-line); border-radius: 11px;
  padding: 9px 13px; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9); backdrop-filter: blur(3px);
}
.ezn-p-chip { text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.ezn-p-chip:hover, .ezn-p-chip:focus-visible { border-color: var(--ezn-verde); box-shadow: 0 0 0 3px rgba(59, 245, 207, .18), 0 18px 40px -22px rgba(0, 0, 0, .9); }
.ezn-p-chip .k {
  font-family: 'Saira Condensed', sans-serif; font-weight: 600; font-size: 9.5px;
  letter-spacing: .16em; color: var(--p-muted); text-transform: uppercase; white-space: nowrap;
}
.ezn-p-chip .v { font-family: 'Teko', sans-serif; font-weight: 600; font-size: 26px; line-height: .9; color: var(--ezn-verde); white-space: nowrap; }
.ezn-p-chip.c1 { top: 9%; left: -6%; }
.ezn-p-chip.c2 { top: 74%; right: 4%; }   /* bajo el pedalier, sin tapar el plato */
.ezn-p-chip.c3 { top: 36%; left: -8%; }

@media (prefers-reduced-motion: no-preference) {
  .ezn-p-chip { animation: ezn-p-float 6s ease-in-out infinite; }
  .ezn-p-chip.c2 { animation-delay: -2s; }
  .ezn-p-chip.c3 { animation-delay: -4s; }
}
@keyframes ezn-p-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@media (max-width: 900px) {
  /* En una columna la rueda va abajo del texto. --art-w es el ancho real de la caja de la rueda:
     con él se deja bajo el texto el espacio que asoma el neumático por arriba (27 % del ancho) y
     el paisaje se ancla abajo con el alto justo para que el horizonte calce con la base del arco
     de meta (1,27 × el ancho). Sobre el paisaje sigue el mismo azul de la parte alta del cielo. */
  .ezn-p-hero { height: auto; --art-w: min(360px, 100vw - 48px); background: #123f86; }
  .ezn-p-bg { top: auto; bottom: 0; height: calc(var(--art-w) * 1.273); }
  .ezn-p-bg .velo { display: none; }   /* el velo lateral es para dos columnas; aquí lo reemplaza el de arriba */
  /* En una columna el texto cae sobre la cordillera: velo navy de arriba hacia abajo */
  .ezn-p-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 11, 51, .55) 0, rgba(11, 11, 51, .45) 45%, rgba(11, 11, 51, 0) 62%);
  }
  .ezn-p-hero .ezn-p-wrap { grid-template-columns: 1fr; gap: 10px; }
  .ezn-p-copy { padding: 48px 0 calc(var(--art-w) * .27 + 16px); }
  .ezn-p-art { max-width: 360px; justify-self: center; margin-right: 0; }
  .ezn-p-chip.c1 { left: 0; }
  .ezn-p-chip.c2 { right: 0; }
  .ezn-p-chip.c3 { left: 0; top: 25%; }   /* bajo la primera ficha: más abajo taparía el arco de meta y a la derecha el marco */
}
@media (max-width: 480px) {
  .ezn-p-hero { --art-w: min(300px, 100vw - 32px); }
  .ezn-p-art { max-width: 300px; }
}