/* =========================================================
   Helix · Hero de la home, variante 1 «Dunas y el producto» + el orbe de la v3 (propuesta, 19-10-2026)
   React Bits portado sin React: Gradient Waves (Dunas, el del panel), Strands (el orbe), Orbit Images + Glass Icons
   (el stack en órbita), Split Text, Shiny Text, Star Border, Tilted Card y Animated List.
   Línea v5: un acento coral, cristal solo en el cromo y en la cápsula, tarjetas que flotan, curva var(--v5-eo).
   Todo cuelga de .hv1. Movimiento solo con <html class="hv1-mov"> (lo pone el <head> si no hay «reducir
   movimiento»); sin esa clase, todo se ve quieto y completo.
   ========================================================= */

.hv1 {
  --hv1-luz: #FFD2BC;                 /* la luz que cruza el subtítulo (Shiny Text) */
  --hv1-g1: #FFB592;                  /* brasa del titular: de… */
  --hv1-g2: #FF5048;                  /* …a */
  --hv1-velo: 20, 17, 21;             /* el velo que calma las dunas detrás del texto */
  --hv1-t2: #C4C4CC;                  /* texto secundario sobre las dunas o el cristal: pasa AA */
  --hv1-cristal: rgba(30, 26, 32, .64);
  --hv1-marco: rgba(34, 30, 35, .72);
  --hv1-sombra-tarjeta: 0 70px 120px -52px rgba(0, 0, 0, .92), 0 40px 100px -46px color-mix(in srgb, var(--v5-acc) 72%, transparent);
  --hv1-aviso: rgba(30, 27, 33, .84);
  --hv1-ancho: 1280px;
  position: relative; isolation: isolate;
  padding: clamp(24px, 4.6vh, 56px) 0 0;
  overflow-x: clip;
}
[data-theme="light"] .hv1 {
  --hv1-luz: #FF8A66;
  --hv1-g1: #DC5A31;
  --hv1-g2: #A92A22;
  --hv1-velo: 239, 232, 228;
  --hv1-t2: #424248;
  --hv1-cristal: rgba(255, 255, 255, .7);
  --hv1-marco: rgba(255, 255, 255, .62);
  --hv1-sombra-tarjeta: 0 60px 110px -50px rgba(90, 30, 15, .42), 0 36px 90px -44px color-mix(in srgb, var(--v5-acc) 55%, transparent);
  --hv1-aviso: rgba(255, 255, 255, .88);
}
.hv1-ancho { position: relative; z-index: 1; width: 100%; max-width: var(--hv1-ancho); margin: 0 auto; padding: 0 var(--hx-margen); }

/* ---------- 1 · Fondo vivo a sangre: Dunas (Gradient Waves) ---------- */
/* Sube por detrás de la cápsula de navegación y se funde con la pared antes del panel. */
.hv1-fondo { position: absolute; z-index: 0; left: 0; right: 0; top: -96px; height: min(calc(100svh + 200px), 1100px); pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, rgba(0, 0, 0, .55) 20%, #000 36%, #000 64%, transparent 97%);
  mask-image: linear-gradient(180deg, transparent 4%, rgba(0, 0, 0, .55) 20%, #000 36%, #000 64%, transparent 97%); }
/* Escalado suave (bilineal) del lienzo a su tamaño CSS: nunca «pixelated» */
.hv1-dunas-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: auto; opacity: 0; transition: opacity 1.2s var(--v5-eo); }
.hv1-dunas-cv.is-listo { opacity: 1; }
/* Sin WebGL: una brasa quieta en el horizonte, para que el hero no se quede plano */
.hv1-fondo::before { content: ''; position: absolute; inset: 0; opacity: .9;
  background: radial-gradient(70% 46% at 50% 78%, color-mix(in srgb, var(--v5-acc) 30%, transparent), transparent 70%),
              radial-gradient(40% 30% at 18% 62%, rgba(255, 138, 92, .16), transparent 70%); }
.hv1-fondo.is-gl::before { opacity: 0; transition: opacity 1.2s var(--v5-eo); }

/* ---------- 2 · Primera fila: el mensaje y el orbe ---------- */
.hv1-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(24px, 3.4vw, 56px); align-items: center; }
.hv1-cab { position: relative; z-index: 2; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
/* Velo detrás del texto (z-index -1: por detrás de todo el bloque, que no está posicionado, y por delante de las dunas) */
.hv1-velo { position: absolute; z-index: -1; left: -14%; top: -12%; width: 128%; height: 134%; pointer-events: none;
  background: radial-gradient(50% 50% at 46% 50%, rgba(var(--hv1-velo), var(--hv1-velo-a, .66)), rgba(var(--hv1-velo), var(--hv1-velo-b, .36)) 58%, rgba(var(--hv1-velo), 0) 80%); }
[data-theme="light"] .hv1-velo { --hv1-velo-a: .74; --hv1-velo-b: .44; }

.hv1-pastilla { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 7px; border-radius: 999px; font-size: 13.5px; font-weight: 550; letter-spacing: -.005em; color: var(--v5-t1);
  background: var(--hv1-cristal); backdrop-filter: var(--hx-blur-capsula); -webkit-backdrop-filter: var(--hx-blur-capsula);
  box-shadow: 0 0 0 .5px var(--v5-edge), inset 0 1px 0 var(--v5-hl), 0 10px 26px -14px rgba(0, 0, 0, .5); }
[data-theme="light"] .hv1-pastilla { box-shadow: 0 0 0 .5px var(--v5-edge), inset 0 1px 0 var(--v5-hl), 0 10px 24px -14px rgba(90, 30, 15, .3); }
.hv1-pastilla i { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; flex: 0 0 auto; background: var(--hx-btn); color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v5-acc) 18%, transparent); }
.hv1-pastilla i .icon { width: 12px; height: 12px; stroke-width: 2.4; }

/* Split Text: cada letra sube una vez. El texto está en el HTML; sin movimiento, se ve tal cual. */
.hv1-h1 { margin: 22px 0 0; max-width: 11.6ch; font-size: clamp(44px, 5.7vw, 88px); line-height: .96; letter-spacing: -.056em; font-weight: 650; color: var(--v5-t1); text-wrap: balance; }
.hv1-w { display: inline-block; white-space: nowrap; }
.hv1-c { display: inline-block; }
.hv1-brasa .hv1-c { color: var(--hv1-g2); color: color-mix(in oklab, var(--hv1-g1), var(--hv1-g2) calc(var(--t, 0) * 100%)); }
.hv1-mov .hv1-c { animation: hv1-sube .95s var(--v5-eo) both; animation-delay: calc(40ms + var(--i, 0) * 13ms); }
@keyframes hv1-sube { from { opacity: 0; transform: translateY(.42em) rotate(5deg); filter: blur(7px); } 60% { filter: blur(0); } to { opacity: 1; transform: none; filter: blur(0); } }

/* El subtítulo, leído como segundo titular: cápsula de cristal + Shiny Text (una pasada de luz, y otra al pasar el ratón) */
/* Ancho a medida del texto (22em parte la frase después de «sitio,»); sin text-wrap: balance, que no encoge la caja */
.hv1-capsula { margin: clamp(20px, 2.8vh, 30px) 0 0; max-width: 22em; display: inline-block; padding: 14px 24px 15px; border-radius: 24px;
  font-size: clamp(18px, 1.6vw, 23px); line-height: 1.3; letter-spacing: -.024em; font-weight: 560; color: var(--v5-t1);
  background: var(--hv1-cristal); backdrop-filter: blur(26px) saturate(170%); -webkit-backdrop-filter: blur(26px) saturate(170%);
  box-shadow: 0 0 0 .5px var(--v5-edge), inset 0 1px 0 var(--v5-hl), 0 22px 46px -24px rgba(0, 0, 0, .7), 0 18px 40px -30px color-mix(in srgb, var(--v5-acc) 60%, transparent); }
[data-theme="light"] .hv1-capsula {
  box-shadow: 0 0 0 .5px var(--v5-edge), inset 0 1px 0 #fff, 0 20px 44px -24px rgba(90, 30, 15, .3), 0 18px 40px -30px color-mix(in srgb, var(--v5-acc) 45%, transparent); }
.hv1-brillo { color: var(--v5-t1);
  background: linear-gradient(105deg, var(--v5-t1) 0 40%, var(--hv1-luz) 48%, #fff 50%, var(--hv1-luz) 52%, var(--v5-t1) 60% 100%);
  background-size: 260% 100%; background-position: 100% 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-theme="light"] .hv1-brillo { background-image: linear-gradient(105deg, var(--v5-t1) 0 40%, var(--hv1-luz) 48%, #C8372B 50%, var(--hv1-luz) 52%, var(--v5-t1) 60% 100%); }
.hv1-mov .hv1-brillo { animation: hv1-brillo 2.4s cubic-bezier(.45, 0, .2, 1) 1.15s 1 both; }
.hv1-mov .hv1-capsula:hover .hv1-brillo { animation: hv1-brillo-otra 1.7s cubic-bezier(.45, 0, .2, 1) 0s 1 both; }
@keyframes hv1-brillo { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes hv1-brillo-otra { from { background-position: 100% 0; } to { background-position: 0% 0; } }

.hv1-ctas { margin-top: 28px; gap: 12px; }
.hv1-cab .hx-riesgo { margin-top: 16px; justify-content: flex-start; }
.hv1-cab .hx-riesgo span { color: var(--hv1-t2); }
/* En claro la letra pequeña cae sobre dunas coral de luminancia media: tinta casi negra para pasar AA */
[data-theme="light"] .hv1-cab .hx-riesgo span { color: #1C1C20; font-weight: 520; }

/* Star Border: una estrella recorre el filo del botón una vez al entrar y al pasar el ratón. Sin neón: luz cálida, poca. */
.hv1-cta { position: relative; isolation: isolate; }
.hv1-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.hv1-estrella { position: absolute; left: -24px; top: -24px; width: calc(100% + 48px); height: calc(100% + 48px); z-index: -1; pointer-events: none; }

/* Entradas del bloque (subir y enfocar), escalonadas tras el titular */
.hv1-mov .hv1-pastilla { animation: hv1-entra .8s var(--v5-eo) both; }
/* La cápsula puede ser el elemento LCP (en el móvil lo es): entra sin opacidad, solo sube y se enfoca */
.hv1-mov .hv1-capsula { animation: hv1-entra-sin .9s var(--v5-eo) .34s both; }
.hv1-mov .hv1-ctas { animation: hv1-entra .9s var(--v5-eo) .46s both; }
.hv1-mov .hv1-cab .hx-riesgo { animation: hv1-entra .9s var(--v5-eo) .56s both; }
@keyframes hv1-entra-sin { from { transform: translateY(16px) scale(.985); filter: blur(6px); } to { transform: none; filter: blur(0); } }
@keyframes hv1-entra { from { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* ---------- 3 · El orbe (Strands) con el stack en órbita (Orbit Images + Glass Icons) ---------- */
.hv1-orbita { position: relative; z-index: 2; min-width: 0; height: clamp(340px, 31vw, 452px); container-type: size; touch-action: pan-y; }
.hv1-halo { position: absolute; z-index: 1; left: 50%; top: 50%; width: 10px; height: 10px; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(20, 17, 21, .55), color-mix(in srgb, var(--v5-acc) 14%, transparent) 62%, transparent);
  opacity: .95; transition: opacity 1.2s var(--v5-eo), transform 1.2s var(--v5-eo); }
[data-theme="light"] .hv1-halo { background: radial-gradient(closest-side, rgba(255, 255, 255, .5), color-mix(in srgb, var(--v5-acc) 10%, transparent) 60%, transparent); }
.hv1-halo.is-flash { opacity: 1; transform: translate(-50%, -50%) scale(1.08); transition-duration: .35s; }
.hv1-anillo, .hv1-hilos { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hv1-anillo--tras { z-index: 3; }
.hv1-hilos { z-index: 4; }
.hv1-anillo--del { z-index: 105; }
.hv1-anillo ellipse { fill: none; stroke: var(--v5-t1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hv1-anillo--tras ellipse { stroke-opacity: .2; }
.hv1-anillo--del ellipse { stroke-opacity: .36; }
.hv1-hilo { fill: none; stroke: var(--v5-t1); stroke-width: 1; stroke-linecap: round; }
.hv1-hilo.is-activo { stroke: var(--v5-acc); stroke-width: 1.4; }
.hv1-pulso { fill: var(--v5-acc-2); }
.hv1-pulso-halo { fill: var(--v5-acc); }
[data-theme="light"] .hv1-pulso { fill: var(--v5-acc); }
.hv1-orbe { position: absolute; z-index: 100; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hv1-orbe-cv { position: absolute; inset: -10%; width: 120%; height: 120%; display: block; image-rendering: auto; }
.hv1-orbe.is-sin-gl { background: radial-gradient(circle at 50% 22%, #FFF4EE 0%, #FFC1A8 22%, #FF6F5E 56%, #9C2A22 100%);
  box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--v5-acc) 70%, transparent), inset 0 -10px 30px rgba(60, 10, 10, .35); }
.hv1-orbe.is-sin-gl .hv1-orbe-cv { display: none; }
.hv1-mov .hv1-orbita { animation: hv1-entra 1s var(--v5-eo) .2s both; }

.hv1-iconos { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.hv1-gi { --gi: 56px; position: absolute; left: 0; top: 0; width: var(--gi); height: var(--gi); z-index: 120; will-change: transform, opacity;
  /* Sin JS: los once en corro alrededor del centro (360° / 11) */
  transform: translate(calc(50cqw + cos(calc(var(--i) * 32.7273deg)) * 42cqw - 50%), calc(50cqh + sin(calc(var(--i) * 32.7273deg)) * 30cqh - 50%));
  --hv1-placa: linear-gradient(140deg, #9A5446 0%, #5E2F2A 55%, #34201F 100%);
  --hv1-placa-viva: linear-gradient(140deg, #FF9670 0%, #F2584A 52%, #B9322A 100%);
  --hv1-glifo: #FFFFFF; }
.hv1-orbita.is-viva .hv1-gi { transform: none; }
[data-theme="light"] .hv1-gi { --hv1-placa: linear-gradient(140deg, #F3DCD3 0%, #E3C2B8 55%, #CFA79C 100%); --hv1-placa-viva: linear-gradient(140deg, #FFB49A 0%, #FF7A66 52%, #F2493F 100%); --hv1-glifo: #2A1F21; }
.hv1-gi-placa { position: absolute; inset: 0; border-radius: 29%; background: var(--hv1-placa); transform: rotate(14deg) translate(-5%, -4%); transform-origin: 100% 100%;
  transition: opacity .5s var(--v5-eo), box-shadow .5s var(--v5-eo); }
.hv1-gi-placa::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--hv1-placa-viva); opacity: 0; transition: opacity .5s var(--v5-eo); }
.hv1-gi.is-activo .hv1-gi-placa::after { opacity: 1; }
.hv1-gi-cristal { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: 29%;
  background: radial-gradient(120% 75% at 22% 0%, rgba(255, 255, 255, .26), transparent 58%), linear-gradient(160deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 62%), rgba(52, 38, 42, .4);
  box-shadow: inset 0 0 0 .6px rgba(255, 255, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .42), 0 14px 26px -14px rgba(0, 0, 0, .75); }
/* La placa vista a través del cristal: la misma, desenfocada (sin backdrop-filter: once piezas en movimiento) */
.hv1-gi-cristal .hv1-gi-placa { filter: blur(7px); opacity: .85; }
[data-theme="light"] .hv1-gi-cristal { background: linear-gradient(155deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, .3) 100%);
  box-shadow: inset 0 0 0 .6px rgba(255, 255, 255, .9), inset 0 1px 0 #fff, 0 0 0 .5px rgba(60, 30, 20, .1), 0 14px 26px -14px rgba(80, 30, 15, .35); }
[data-theme="light"] .hv1-gi-cristal .hv1-gi-placa { opacity: .55; }
.hv1-gi-glifo { position: absolute; z-index: 2; left: 28%; top: 28%; width: 44%; height: 44%; fill: var(--hv1-glifo); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28)); transition: fill .45s var(--v5-eo); }
[data-theme="light"] .hv1-gi-glifo { filter: none; }
.hv1-gi-glifo .hv1-g2 { opacity: .55; }
.hv1-gi-nombre, .hv1-gi-evento { position: absolute; z-index: 3; top: calc(100% + 9px); left: 50%; pointer-events: none;
  font-size: 12.5px; font-weight: 600; line-height: 1; letter-spacing: -.005em; white-space: nowrap; padding: 7px 11px; border-radius: 999px; color: var(--v5-t1);
  background: var(--v5-sheet); box-shadow: 0 0 0 .5px var(--v5-edge), 0 10px 24px -12px rgba(0, 0, 0, .6);
  opacity: 0; transform: translate(calc(-50% + var(--hv1-dx, 0px)), -4px); transition: opacity .3s var(--v5-eo), transform .45s var(--v5-eo); }
[data-theme="light"] .hv1-gi-nombre, [data-theme="light"] .hv1-gi-evento { box-shadow: 0 0 0 .5px var(--v5-edge), 0 10px 24px -12px rgba(80, 30, 15, .3); }
.hv1-gi-evento { display: inline-flex; align-items: center; gap: 7px; }
.hv1-gi-evento::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--v5-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v5-acc) 22%, transparent); }
@media (hover: hover) {
  .hv1-gi:hover .hv1-gi-nombre { opacity: 1; transform: translate(calc(-50% + var(--hv1-dx, 0px)), 0); }
  .hv1-gi:hover .hv1-gi-evento { opacity: 0 !important; }
}
.hv1-gi.is-activo > .hv1-gi-placa { box-shadow: 0 0 24px -4px color-mix(in srgb, var(--v5-acc) 70%, transparent); }
.hv1-gi.is-activo .hv1-gi-evento { opacity: 1; transform: translate(calc(-50% + var(--hv1-dx, 0px)), 0); }
.hv1-gi.is-activo[data-marca="whatsapp"] .hv1-gi-glifo { fill: #25D366; }
.hv1-gi.is-activo[data-marca="instagram"] .hv1-gi-glifo { fill: #FF3D7F; }
.hv1-gi.is-activo[data-marca="meta"] .hv1-gi-glifo { fill: #2F7BFF; }
.hv1-gi.is-activo[data-marca="gcal"] .hv1-gi-glifo { fill: #4C8DF6; }
.hv1-gi.is-activo[data-marca="calendly"] .hv1-gi-glifo { fill: #1F7BFF; }
.hv1-gi.is-activo[data-marca="stripe"] .hv1-gi-glifo { fill: #7A73FF; }
.hv1-gi.is-activo[data-marca="zapier"] .hv1-gi-glifo { fill: #FF4F00; }
.hv1-gi.is-activo[data-marca="make"] .hv1-gi-glifo { fill: #A35BFF; }
.hv1-gi.is-activo[data-marca="claude"] .hv1-gi-glifo { fill: #D97757; }
.hv1-gi.is-activo[data-marca="ghl"] .hv1-g1 { fill: #F2C230; }
.hv1-gi.is-activo[data-marca="ghl"] .hv1-g2 { fill: #3D8BF2; opacity: 1; }
.hv1-gi.is-activo[data-marca="ghl"] .hv1-g3 { fill: #5EBD45; }
[data-theme="light"] .hv1-gi.is-activo[data-marca="whatsapp"] .hv1-gi-glifo { fill: #149A4A; }
[data-theme="light"] .hv1-gi.is-activo[data-marca="meta"] .hv1-gi-glifo { fill: #0866FF; }
[data-theme="light"] .hv1-gi.is-activo[data-marca="make"] .hv1-gi-glifo { fill: #6D00CC; }
[data-theme="light"] .hv1-gi.is-activo[data-marca="stripe"] .hv1-gi-glifo { fill: #635BFF; }

/* ---------- 4 · El producto: Tilted Card con el clip real del panel, asomando debajo ---------- */
.hv1-escenario { position: relative; width: min(100%, 1120px); margin: clamp(44px, 7vh, 72px) auto 0; }
.hv1-producto { position: relative; perspective: 1900px; }
/* Entrada: sube desde abajo y se endereza. Solo transform: el póster se pinta desde el primer fotograma (no retrasa el LCP). */
.hv1-mov .hv1-producto { animation: hv1-producto-entra 1.5s var(--hx-muelle-suave) .28s both; }
@keyframes hv1-producto-entra { from { transform: perspective(1900px) translateY(90px) rotateX(18deg) scale(.95); } to { transform: none; } }
.hv1-tilt { position: relative; transform-style: preserve-3d; transform-origin: 50% 50%; will-change: transform; }
.hv1-marco { position: relative; padding: 9px; border-radius: 31px; background: var(--hv1-marco);
  box-shadow: 0 0 0 .5px var(--v5-edge), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .3), var(--hv1-sombra-tarjeta); }
[data-theme="light"] .hv1-marco { box-shadow: 0 0 0 .5px rgba(60, 30, 20, .1), inset 0 1px 0 #fff, var(--hv1-sombra-tarjeta); }
.hv1-marco::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: var(--brillo, 0); transition: opacity .6s var(--v5-eo);
  background: radial-gradient(60% 50% at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .13), transparent 70%); }
.hv1-clip { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: #141115; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .5); }
[data-theme="light"] .hv1-clip { background: #EFE8E4; box-shadow: 0 0 0 .5px rgba(60, 30, 20, .12); }
.hv1-clip img, .hv1-clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hv1-clip video { opacity: 0; transition: opacity .6s var(--v5-eo); }
.hv1-clip.is-vivo video { opacity: 1; }
.hv1-suelo { position: absolute; left: 8%; right: 8%; bottom: -34px; height: 70px; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .55), transparent 70%); transform: translateX(var(--sx, 0px)) scaleX(var(--ss, 1)); }
[data-theme="light"] .hv1-suelo { background: radial-gradient(50% 50% at 50% 50%, rgba(120, 45, 25, .22), transparent 70%); }

/* ---------- 5 · Animated List: lo que Helix hace con lo que entra (lo alimentan los eventos del orbe) ---------- */
/* Cuelgan por fuera de la tarjeta lo que dé el margen de la página (nunca se cortan contra el borde) */
.hv1-avisos { list-style: none; margin: 0; padding: 0; position: absolute; z-index: 4; left: max(clamp(-70px, -4.4vw, -18px), calc((100% - 100vw) / 2 + 14px)); top: 12%; width: 330px;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none; --paso: 76px; --encoge: 0; }
.hv1-aviso { display: flex; align-items: center; gap: 12px; height: 66px; padding: 0 16px 0 12px; border-radius: 20px; background: var(--hv1-aviso);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 0 0 .5px var(--v5-edge), inset 0 1px 0 var(--v5-hl), 0 22px 44px -20px rgba(0, 0, 0, .75); }
[data-theme="light"] .hv1-aviso { box-shadow: 0 0 0 .5px rgba(60, 30, 20, .08), inset 0 1px 0 #fff, 0 22px 44px -20px rgba(90, 30, 15, .32); }
.hv1-aviso--extra { display: none; }
.hv1-aviso-ic { position: relative; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; color: var(--v5-t1); background: var(--v5-card2); }
.hv1-aviso-ic svg { width: 19px; height: 19px; }
.hv1-aviso-ic .hx-marca { fill: currentColor; }
.hv1-aviso--meta .hv1-aviso-ic { color: #2F8BFF; background: color-mix(in srgb, #0081FB 16%, transparent); }
.hv1-aviso--bot .hv1-aviso-ic { color: #25D366; background: color-mix(in srgb, #25D366 15%, transparent); }
[data-theme="light"] .hv1-aviso--bot .hv1-aviso-ic { color: #128C4A; }
[data-theme="light"] .hv1-aviso--meta .hv1-aviso-ic { color: #0866FF; }
.hv1-aviso--caliente .hv1-aviso-ic { background: var(--hx-caliente-bg); }
.hv1-aviso--ok .hv1-aviso-ic { color: var(--hx-ok); background: var(--hx-ok-bg); }
.hv1-aviso--acc .hv1-aviso-ic { color: var(--hx-acc-text); background: var(--hx-acc-bg); }
.hv1-aviso[data-marca="claude"] .hv1-aviso-ic { color: #D97757; }
.hv1-aviso[data-marca="chatgpt"] .hv1-aviso-ic { color: var(--v5-t1); }
.hv1-grados { font-weight: 700; font-size: 14px; letter-spacing: -.03em; background: var(--hx-grados-hot); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hv1-aviso-txt { min-width: 0; flex: 1; text-align: left; }
.hv1-aviso b { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 620; letter-spacing: -.012em; color: var(--v5-t1); line-height: 1.3; }
.hv1-aviso b em { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--hv1-t2); white-space: nowrap; }
.hv1-aviso small { display: block; font-size: 12.5px; line-height: 1.35; color: var(--hv1-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Con JS y movimiento: cada aviso vive en un hueco y se desliza al siguiente; el que entra crece desde arriba */
.hv1-avisos.hv1-al-viva { display: block; height: calc(3 * var(--paso)); }
.hv1-aviso[data-slot="0"] { --slot: 0; } .hv1-aviso[data-slot="1"] { --slot: 1; }
.hv1-aviso[data-slot="2"] { --slot: 2; } .hv1-aviso[data-slot="3"] { --slot: 3; }
.hv1-al-viva .hv1-aviso { display: flex; position: absolute; left: 0; right: 0; top: 0; z-index: calc(10 - var(--slot, 0));
  transform: translate3d(0, calc(var(--slot, 0) * var(--paso)), 0) scale(calc(1 - var(--slot, 0) * var(--encoge)));
  transition: transform .75s var(--v5-eo), opacity .5s var(--v5-eo); }
.hv1-al-viva .hv1-aviso.is-fuera { opacity: 0; transform: translate3d(0, calc(var(--slot, 3) * var(--paso)), 0) scale(.94); }
.hv1-al-viva .hv1-aviso.is-antes { opacity: 0; transform: translate3d(0, -18px, 0) scale(.86); transition: none; }
.hv1-al-viva .hv1-aviso.is-nuevo { transition: transform .8s cubic-bezier(.34, 1.4, .64, 1), opacity .45s var(--v5-eo); }
.hv1-al-viva .hv1-aviso.is-nuevo .hv1-aviso-ic { animation: hv1-late 1.1s var(--v5-eo) .15s 1; }
@keyframes hv1-late { 40% { transform: scale(1.12); } }

/* ---------- 6 · El sello del vídeo y la oferta de lanzamiento (marcado y lógica de la home, piel discreta) ---------- */
.hv1.is-video .hx-reel-ventana video { opacity: 1; }
.hv1 .hx-reel { --tam: 124px; --sale: max(clamp(-58px, -3.4vw, -14px), calc((100% - 100vw) / 2 + 10px)); right: var(--sale); top: -58px; z-index: 6; }
.hv1 .hx-reel-aro { animation-play-state: paused; }
.hv1 .hx-reel:hover .hx-reel-aro, .hv1 .hx-reel:focus-visible .hx-reel-aro { animation-play-state: running; }
.hv1 .hx-reel-play::after { animation-iteration-count: 3; }
.hv1 .hx-oferta { right: calc(124px + max(clamp(-58px, -3.4vw, -14px), calc((100% - 100vw) / 2 + 10px)) + 12px); top: -52px; rotate: 0deg; z-index: 6; }
.hv1 .hx-oferta:hover { rotate: 0deg; }
.hv1 .hx-oferta-abrir, .hv1 .hx-oferta-codigo { gap: 11px; padding: 7px 18px 7px 7px; border-radius: 18px; color: var(--v5-t1);
  background: var(--hv1-aviso); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 0 0 .5px var(--v5-edge), inset 0 1px 0 var(--v5-hl), 0 18px 38px -18px rgba(0, 0, 0, .7); }
[data-theme="light"] .hv1 .hx-oferta-abrir, [data-theme="light"] .hv1 .hx-oferta-codigo { box-shadow: 0 0 0 .5px rgba(60, 30, 20, .08), inset 0 1px 0 #fff, 0 18px 38px -18px rgba(90, 30, 15, .3); }
.hv1 .hx-oferta-abrir:hover { box-shadow: 0 0 0 .5px var(--v5-edge), inset 0 1px 0 var(--v5-hl), 0 20px 42px -16px color-mix(in srgb, var(--v5-acc) 55%, transparent); }
.hv1 .hx-oferta-abrir:focus-visible { outline: 2px solid var(--v5-acc); }
.hv1 .hx-oferta-pct { min-width: 50px; height: 40px; border-radius: 12px; font-size: 16px; color: #fff; background: var(--hx-btn); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.hv1 .hx-oferta-txt b { font-size: 13.5px; }
.hv1 .hx-oferta-txt small { font-size: 12px; color: var(--hv1-t2); }
.hv1 .hx-oferta-tapado code { background: var(--v5-card2); }
.hv1 .hx-oferta-candado { stroke: var(--hv1-t2); }
.hv1 .hx-oferta-flecha { width: 28px; height: 28px; margin-right: -8px; background: var(--v5-card2); }
.hv1 .hx-oferta-flecha .icon { stroke: var(--v5-t1); }
.js-motion .hv1 .hx-oferta-flecha .icon { animation-iteration-count: 3; }
.hv1 .hx-oferta-cod code { border-color: color-mix(in srgb, var(--v5-t1) 40%, transparent); }
.hv1 .hx-oferta-cod button { color: #fff; background: var(--hx-btn); }

/* ---------- 7 · Lo que viene después (para ver el paso del hero a la siguiente sección) ---------- */
.hv1-siguiente { position: relative; z-index: 1; padding-top: clamp(64px, 9vh, 96px); }

/* ---------- Tableta (por debajo de 1080 px): una columna, centrada como el hero de siempre ---------- */
@media (max-width: 1079px) {
  .hv1-fila { grid-template-columns: minmax(0, 1fr); gap: clamp(8px, 2vw, 20px); }
  .hv1-cab { align-items: center; text-align: center; }
  .hv1-velo { left: -6%; width: 112%; }
  .hv1-h1 { max-width: 12ch; font-size: clamp(44px, 8.4vw, 80px); }
  .hv1-cab .hx-riesgo { justify-content: center; }
  .hv1-ctas { justify-content: center; }
  .hv1-orbita { width: 100%; max-width: 640px; margin: 0 auto; height: auto; aspect-ratio: 1.62; }
  .hv1-avisos { left: 14px; top: auto; bottom: 22px; width: min(330px, calc(100% - 28px)); }
  .hv1 .hx-reel { --tam: 112px; right: 6px; top: -54px; }
  .hv1 .hx-oferta { right: 126px; top: -52px; }
}

/* ---------- Móvil (por debajo de 760 px): la composición se rehace, no solo encoge ---------- */
@media (max-width: 759px) {
  .hv1 { padding-top: 24px; }
  .hv1-fondo { height: min(calc(100svh + 220px), 1040px);
    -webkit-mask-image: linear-gradient(180deg, transparent 16%, rgba(0, 0, 0, .5) 30%, #000 44%, #000 70%, transparent 97%);
    mask-image: linear-gradient(180deg, transparent 16%, rgba(0, 0, 0, .5) 30%, #000 44%, #000 70%, transparent 97%); }
  .hv1-pastilla { font-size: 12.5px; padding: 5px 12px 5px 6px; gap: 8px; }
  .hv1-h1 { margin-top: 18px; font-size: clamp(42px, 12.4vw, 56px); line-height: .98; letter-spacing: -.052em; }
  .hv1-capsula { margin-top: 20px; padding: 13px 18px 14px; border-radius: 22px; font-size: 18px; line-height: 1.3; }
  .hv1-ctas { width: 100%; flex-direction: column; margin-top: 24px; gap: 10px; }
  .hv1-ctas .hw-btn { width: 100%; }
  .hv1-cab .hx-riesgo { gap: 4px 12px; font-size: 12.5px; }
  .hv1-orbita { aspect-ratio: 1.5; margin-top: 10px; }
  .hv1-gi-nombre, .hv1-gi-evento { font-size: 11.5px; padding: 6px 9px; }

  .hv1-escenario { margin-top: 70px; }
  /* El clip se recorta al chat: en el móvil se lee la conversación, no el panel entero en miniatura */
  .hv1-marco { padding: 7px; border-radius: 27px; }
  .hv1-clip { aspect-ratio: 4 / 5; border-radius: 20px; }
  .hv1-clip img, .hv1-clip video { object-position: 100% 50%; }
  /* Avisos: pila de notificaciones sobre la parte baja de la conversación (uno delante, dos asomando) */
  .hv1-avisos { left: 12px; right: 12px; width: auto; bottom: 16px; --paso: 10px; --encoge: .05; }
  .hv1-avisos.hv1-al-viva { height: calc(66px + 2 * var(--paso)); }
  .hv1-al-viva .hv1-aviso { top: auto; bottom: 0; transform: translate3d(0, calc(var(--slot, 0) * var(--paso) * -1), 0) scale(calc(1 - var(--slot, 0) * var(--encoge))); }
  .hv1-al-viva .hv1-aviso[data-slot="1"] { opacity: .92; }
  .hv1-al-viva .hv1-aviso[data-slot="2"] { opacity: .64; }
  .hv1-al-viva .hv1-aviso.is-fuera { opacity: 0; transform: translate3d(0, calc(var(--paso) * -3), 0) scale(.85); }
  .hv1-al-viva .hv1-aviso.is-antes { opacity: 0; transform: translate3d(0, 26px, 0) scale(.94); }
  .hv1-al-viva .hv1-aviso > * { transition: opacity .3s var(--v5-eo); }
  .hv1-al-viva .hv1-aviso:not([data-slot="0"]) > * { opacity: 0; }
  .hv1-avisos:not(.hv1-al-viva) .hv1-aviso:not(:first-child) { display: none; }
  .hv1-aviso { height: 62px; padding: 0 14px 0 11px; }

  /* Sello y oferta: el sello en la esquina, la oferta compacta sobre el filo a la izquierda (la home quita el «−10 %»
     grande y lo pone delante del título) */
  .hv1 .hx-reel { --tam: 96px; right: -4px; top: -60px; }
  .hv1 .hx-reel-aro text { font-size: 9.6px; }
  .hv1 .hx-reel-play { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
  .hv1 .hx-oferta { left: 0; right: auto; top: -46px; }
  .hv1 .hx-oferta-abrir, .hv1 .hx-oferta-codigo { padding: 8px 14px 8px 13px; gap: 9px; border-radius: 16px; }
  .hv1 .hx-oferta-abrir .hx-oferta-txt b::before { color: var(--hx-acc-text); }
  .hv1 .hx-oferta-flecha, .hv1 .hx-oferta-tapado { display: none; }
  .hv1-suelo { display: none; }
}

/* ---------- Reducir movimiento: todo quieto y visible ---------- */
@media (prefers-reduced-motion: reduce) {
  .hv1 *, .hv1 *::before, .hv1 *::after { animation: none !important; }
  .hv1-al-viva .hv1-aviso { transition: none !important; }
  .hv1-dunas-cv, .hv1-gi-placa, .hv1-gi-glifo, .hv1-halo, .hv1-gi-nombre, .hv1-gi-evento { transition: none !important; }
}