/* ==========================================================================
   hero.css — Hero, monitor en vivo y marquee de rubros
   ========================================================================== */
.hero { position: relative; min-height: 100vh; padding: 112px 0 70px; background: var(--navy); color: var(--white); overflow: hidden; isolation: isolate; }

/* Grilla de puntos que se enciende cerca del cursor */
.hero__grid, .hero__grid--lit { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .16) 1.2px, transparent 1.4px); background-size: 34px 34px; }
.hero__grid { -webkit-mask-image: linear-gradient(#000 40%, transparent 100%); mask-image: linear-gradient(#000 40%, transparent 100%); opacity: .55; }
.hero__grid--lit {
  background-image: radial-gradient(var(--ice) 1.6px, transparent 1.8px);
  -webkit-mask-image: radial-gradient(240px circle at var(--mx, 70%) var(--my, 30%), #000, transparent 70%);
  mask-image: radial-gradient(240px circle at var(--mx, 70%) var(--my, 30%), #000, transparent 70%);
}
.hero__halo { position: absolute; z-index: -2; right: -12%; top: -18%; width: 780px; height: 780px; border-radius: 50%; background: radial-gradient(circle, rgba(50, 113, 234, .38), transparent 62%); filter: blur(10px); }

.hero__inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 80px); align-items: center; }

.chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px;
  font-size: 13px; font-weight: 700; color: var(--white);
  background: rgba(255, 255, 255, .07); border: 1px solid var(--line-dark); border-radius: 999px;
}
.chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(16, 185, 129, .7); animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }

.hero__title { margin-top: 18px; font-size: clamp(37px, 3.9vw, 60px); font-weight: 800; line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .line > span { display: block; transform: translateY(110%); animation: rise 1.1s var(--ease) forwards; animation-delay: 200ms; }
.hero__title .line:nth-child(2) > span { animation-delay: 320ms; }
.hero__title .line:nth-child(3) > span { animation-delay: 440ms; }
/* Las animaciones de entrada esperan a que el loader se retire (js/loader.js quita .is-loading).
   Sin JS la clase nunca se agrega y corren normal, así que el hero nunca queda oculto. */
html.is-loading .hero :is(.hero__title .line > span, .hero__lead, .quick, .hero__micro, .stage) { animation-play-state: paused; }
/* En dos columnas el renglón más largo ya casi llena la columna: el título usa parte de la separación con el
   monitor (se deja siempre ≥32px libres) para poder crecer sin saltar de línea. En una columna no aplica. */
@media (min-width: 981px) { .hero__title { margin-right: calc(-1 * max(0px, clamp(32px, 5vw, 80px) - 32px)); } }
.hero__title .ice { color: var(--ice); }
@keyframes rise { to { transform: none; } }
.hero__lead { margin-top: 16px; max-width: 540px; font-size: clamp(17px, 1.6vw, 21px); color: var(--on-dark); opacity: 0; animation: fade 1s var(--ease) .8s forwards; }
@keyframes fade { to { opacity: 1; } }

/* Formulario corto del hero */
.quick { margin-top: 24px; display: flex; gap: 8px; max-width: 540px; padding: 7px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line-dark); border-radius: 999px; opacity: 0; animation: fade 1s var(--ease) 1s forwards; transition: border-color .25s, background .25s; }
.quick:focus-within { border-color: var(--ice); background: rgba(255, 255, 255, .12); }
.quick input { flex: 1; min-width: 0; background: none; border: 0; padding: 0 18px; color: var(--white); font-size: 16px; }
.quick__err { margin-top: 10px; padding-left: 24px; font-size: 13.5px; font-weight: 600; color: var(--crit-pale); }
.quick__err a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.quick input::placeholder { color: rgba(255, 255, 255, .5); }
.quick input:focus { outline: none; }
/* Autocompletado del navegador: Chrome pinta el campo con un fondo celeste de esquinas rectas y texto oscuro.
   Se mantiene transparente (el cambio de fondo se pospone "para siempre") y con el texto claro del resto del campo.
   Cada navegador reconoce un selector distinto, por eso van en reglas separadas. */
.quick input { border-radius: 999px; }
.quick input:-webkit-autofill,
.quick input:-webkit-autofill:hover,
.quick input:-webkit-autofill:focus { -webkit-text-fill-color: var(--white); caret-color: var(--white); transition: background-color 600000s 0s, color 600000s 0s; }
.quick input:autofill { color: var(--white); background: none; }
/* El aro de foco del botón sigue la forma de píldora y no se pega al borde de la barra */
.quick .btn:focus-visible { outline-offset: 2px; }
.quick .btn { --pad: 15px 24px; }
.hero__micro { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--on-dark); opacity: 0; animation: fade 1s var(--ease) 1.15s forwards; }
.hero__micro li { display: inline-flex; align-items: center; gap: 8px; }
.hero__micro svg { width: 16px; height: 16px; color: var(--ice); }

/* Monitor (mock del producto) */
.stage { position: relative; perspective: 1400px; opacity: 0; animation: fade 1.2s var(--ease) .6s forwards; }
.monitor {
  position: relative; padding: 22px; border-radius: var(--r-l);
  background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .18);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transform: rotateY(var(--ry, -6deg)) rotateX(var(--rx, 3deg)); transition: transform .3s var(--ease-io); transform-style: preserve-3d;
}
.monitor__bar { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; }
.monitor__bar small { display: block; font-size: 12px; font-weight: 500; color: var(--on-dark); }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .12em; font-weight: 800; color: var(--ok); }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }

.monitor__main { margin-top: 20px; padding: 20px; border-radius: var(--r-m); background: rgba(15, 27, 51, .6); border: 1px solid var(--line-dark); transition: border-color .4s, box-shadow .4s; }
.monitor[data-state="warn"] .monitor__main { border-color: rgba(245, 158, 11, .6); box-shadow: 0 0 40px -10px rgba(245, 158, 11, .5); }
.monitor__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.monitor__name { font-size: 13px; color: var(--on-dark); font-weight: 600; }
.monitor__temp { font-size: clamp(48px, 5.4vw, 72px); font-weight: 800; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.monitor__temp sup { font-size: .38em; letter-spacing: 0; vertical-align: top; margin-left: 4px; color: var(--ice); }
.badge { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .04em; background: rgba(16, 185, 129, .16); color: #34d399; transition: background .3s, color .3s; white-space: nowrap; }
.monitor[data-state="warn"] .badge { background: rgba(245, 158, 11, .18); color: var(--warn-soft); }
/* La temperatura es la señal que "está bien" mientras otra se desvía: el trazo no cambia de color */
.spark { width: 100%; height: 84px; margin-top: 14px; overflow: visible; }
.spark path { fill: none; stroke: var(--ice); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.spark .area { fill: url(#sparkFill); stroke: none; }
.spark .limit { stroke: rgba(245, 158, 11, .6); stroke-width: 1; stroke-dasharray: 4 5; }

/* Métricas secundarias del equipo destacado: prueban que Refrigia no mide solo temperatura.
   La marcada con [data-flag] es la que se desvía de su patrón mientras la temperatura sigue en rango. */
.monitor__extra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.monitor__extra div { padding: 9px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); transition: background .4s, box-shadow .4s; }
.monitor__extra div > span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--on-dark); }
.monitor__extra b { display: block; margin-top: 3px; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; transition: color .4s; }
.monitor__extra small { margin-left: 2px; font-size: .62em; font-weight: 700; color: var(--ice); }
.monitor[data-state="warn"] .monitor__extra [data-flag] { background: rgba(245, 158, 11, .16); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .55); }
.monitor[data-state="warn"] .monitor__extra [data-flag] b { color: var(--warn-soft); }

.monitor__list { margin-top: 14px; display: grid; gap: 8px; }
.monitor__list li { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 14px; font-weight: 600; background: rgba(255, 255, 255, .05); border-radius: 14px; }
.monitor__list b { font-variant-numeric: tabular-nums; }
.monitor__list i { display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; background: var(--ok); }

.toast {
  position: absolute; left: -34px; bottom: -26px; width: min(330px, 86%); display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  color: var(--navy); background: var(--white); border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
  opacity: 0; transition: transform .6s var(--ease), opacity .4s; transform: translate3d(0, 24px, 60px) scale(.94);
}
.toast.is-on { opacity: 1; transform: translate3d(0, 0, 60px) scale(1); }
.toast__ico { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--warn-bg); color: var(--warn-ink); transition: background .3s, color .3s; }
.toast[data-kind="ok"] .toast__ico { background: var(--ok-bg); color: var(--ok-ink); }
.toast__ico svg { width: 20px; height: 20px; }
.toast strong { display: block; font-size: 14px; line-height: 1.25; }
.toast span { font-size: 12.5px; color: var(--slate); }
.float-chip { position: absolute; z-index: 3; top: -1px; right: -1px; padding: 10px 18px 10px 20px; font-size: 12.5px; font-weight: 700; color: var(--navy); background: var(--ice); border-radius: 0 var(--r-l) 0 var(--r-m); }

.hero__scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero__scroll::after { content: ""; width: 1px; height: 34px; background: linear-gradient(var(--ice), transparent); animation: drip 2s var(--ease-io) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Marquee de rubros */
.marquee { background: var(--navy-2); color: var(--white); border-block: 1px solid var(--line-dark); overflow: hidden; }
.marquee__label { text-align: center; padding: 26px 20px 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark); }
.marquee__track { display: flex; width: max-content; padding-block: 24px; animation: slide 60s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-size: clamp(18px, 2vw, 24px); font-weight: 700; letter-spacing: -.01em; color: rgba(255, 255, 255, .92); white-space: nowrap; }
.marquee__track span::after {
  content: ""; width: 18px; height: 18px; flex: none; background: var(--ice);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 14.5 9.5 24 12 14.5 14.5 12 24 9.5 14.5 0 12 9.5 9.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 14.5 9.5 24 12 14.5 14.5 12 24 9.5 14.5 0 12 9.5 9.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
@keyframes slide { to { transform: translateX(-50%); } }
/* Con "reducir movimiento" la franja no se desplaza: en vez de quedar quieta mostrando solo los primeros
   rubros (el resto tapado), los rubros se acomodan en varias líneas y se ven todos. La copia del bucle
   (aria-hidden) se oculta; el 16.º es el último rubro real y no lleva estrella a continuación. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { width: auto; flex-wrap: wrap; justify-content: center; padding: 20px var(--gutter) 28px; row-gap: 6px; animation: none; }
  .marquee__track span[aria-hidden="true"] { display: none; }
  .marquee__track span:nth-child(16)::after { display: none; }
}

@media (max-width: 980px) {
  .hero { padding-top: 120px; }
  .hero__inner { grid-template-columns: 1fr; }
  .stage { max-width: 520px; margin: 24px auto 0; }
  .toast { left: -8px; }
  .hero__scroll { display: none; }
}
@media (max-width: 520px) {
  .quick { flex-direction: column; border-radius: var(--r-l); padding: 8px; }
  .quick input { padding: 14px 16px; }
  .quick .btn { width: 100%; }
}