/* =====================================================================
   [C-02] HERO — panel con el fondo "Bloom Field gradient" de 21st
   (@joinceleste, réplica literal del CSS del Gradient Builder), titular con
   corte vertical, botón shimmer y [C-03] el mockup que entra en 3D y sube con parallax.
   ===================================================================== */
.hero { padding: var(--gutter) var(--gutter) 0; }
.hero__panel {
  position: relative; height: 1184px; border-radius: 32px; overflow: hidden; isolation: isolate;
  background: #E2E2E2;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 155px;
  perspective: 1800px; perspective-origin: 50% 35%;
}
/* ---------- Fondo: "Bloom Field gradient" (21st.dev Gradient Builder, receta fba2fa02).
   Paleta #E2E2E2 · #1B9FFE · #1B9FFE · #4AC9FF. Valores copiados sin cambios. ---------- */
.bloom { position: absolute; inset: 0; z-index: 0; overflow: hidden; container-type: size; }
.bloom__field {
  position: absolute; inset: 0;
  background-color: #E2E2E2;
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.500'/></svg>"),
    radial-gradient(circle at 67.04% 45.93%, rgba(226, 226, 226, 1) 0%, rgba(226, 226, 226, 0.844) 19.02%, rgba(226, 226, 226, 0.5) 38.05%, rgba(226, 226, 226, 0.156) 57.07%, rgba(226, 226, 226, 0) 76.1%),
    radial-gradient(circle at 35.47% 65.92%, rgba(27, 159, 254, 1) 0%, rgba(27, 159, 254, 0.844) 12.9%, rgba(27, 159, 254, 0.5) 25.8%, rgba(27, 159, 254, 0.156) 38.7%, rgba(27, 159, 254, 0) 51.6%),
    radial-gradient(circle at 48.33% 20.11%, rgba(27, 159, 254, 1) 0%, rgba(27, 159, 254, 0.844) 16.75%, rgba(27, 159, 254, 0.5) 33.5%, rgba(27, 159, 254, 0.156) 50.25%, rgba(27, 159, 254, 0) 67%),
    radial-gradient(circle at 80.81% 88.03%, rgba(74, 201, 255, 1) 0%, rgba(74, 201, 255, 0.844) 10.28%, rgba(74, 201, 255, 0.5) 20.55%, rgba(74, 201, 255, 0.156) 30.83%, rgba(74, 201, 255, 0) 41.1%);
  background-size: 120px 120px, auto, auto, auto, auto;
  background-blend-mode: overlay, normal, normal, normal, normal;
}
.bloom__grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; mix-blend-mode: overlay; }
.hero__title, .hero__cta { position: relative; z-index: 1; }

/* [C-02a] Titular (sin píldora encima: el margen compensa los 53 px que ocupaba) */
.hero__title {
  display: flex; flex-direction: column; align-items: center;
  margin-top: 53px;
  font-size: 58px; line-height: 65px; font-weight: 700; letter-spacing: -0.018em;
  text-align: center; color: var(--ink);
}
.hero__cta { margin-top: 41px; }

/* ---------- [C-03] Mockup del dashboard (chasis Frox) ----------
   Centrado en el panel; --s lo escala bajo 1920 px (js/scale.js), --py es el
   parallax al hacer scroll y --in-y/--in-rx la entrada en 3D del revelado. */
.mock {
  position: absolute; left: 50%; top: 508px; width: 1675px; height: 760px; margin-left: -837.5px;
  border-radius: 20px; overflow: hidden; background: #fff; z-index: 2;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 24px 60px rgba(var(--shadow), 0.14);
  font-size: 17px; letter-spacing: -0.005em; color: var(--ink);
  transform-origin: 50% 0;
  transform: translateY(calc(var(--py, 0px) + var(--in-y, 0px))) scale(var(--s, 1)) rotateX(var(--in-rx, 0deg));
}
html.js .mock[data-reveal="mock"] { --in-y: 80px; --in-rx: 12deg; opacity: 0; filter: none; translate: 0 0; transition: opacity .9s ease .45s, transform 1.25s var(--ease-out) .45s; }
html.js .mock[data-reveal="mock"].is-in { --in-y: 0px; --in-rx: 0deg; opacity: 1; filter: none; translate: 0 0; }
html.js .mock[data-reveal="mock"].is-settled { transition: opacity .3s ease; }
.mock__bar {
  position: relative; height: 60px; border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
}
.mock__bar img { position: absolute; }
.mock__lights { position: absolute; left: 21px; top: 23px; display: flex; gap: 11px; }
.mock__lights span { width: 14px; height: 14px; border-radius: 50%; display: block; }
.l-red { background: #ff5f6a; } .l-yellow { background: #ffbc02; } .l-green { background: #00ce54; }
.mock__brand { position: absolute; left: 112px; top: 17px; display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.mock__brand img { position: static; }
.mock__pill { left: 250px; top: 6px; width: 499px; height: 47px; }
.mock__search { left: 800px; top: 5px; width: 77px; height: 49px; }
.mock__meta { position: absolute; left: 905px; top: 12px; display: flex; gap: 0; }
.mock__meta > div { padding: 0 14px; border-left: 1px solid var(--line); }
.mock__meta > div:first-child { border-left: 0; padding-left: 0; }
.mock__meta dt { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); line-height: 14px; }
.mock__meta dd { font-size: 12.5px; color: var(--ink); line-height: 20px; white-space: nowrap; letter-spacing: -0.005em; }
.mock__toggle { right: 56px; top: 5px; width: 86px; height: 49px; }
.mock__moon { right: 20px; top: 5px; width: 32px; height: 49px; }
.mock__body { position: absolute; left: 0; top: 60px; width: 1675px; height: auto; }

@media (max-width: 1100px) {
  .hero__panel { height: auto; padding-bottom: 40px; perspective: none; }
  .hero__title { font-size: clamp(34px, 5vw, 58px); line-height: 1.12; padding: 0 20px; }
  .mock { position: relative; left: 0; top: 0; margin: 60px 0 0; width: 100%; height: auto; min-height: 460px; transform: none !important; }
  .mock__meta, .mock__search, .mock__toggle, .mock__moon { display: none; }
  .mock__pill { left: 240px; }
  .mock__body { width: 100%; }
}