/* Helix · panel v5 · insights: todo cuelga de html.hx-v5 (plan: docs/plans/panel-v5-fd90).
   Prototipo aprobado: gen.py, insights() y las capas «insights animado» e «insights v4».
   Estructura (la monta helix-v5-insights.js): cabecera con título y cápsulas (secciones y periodo),
   los 4 KPIs de siempre, la fila nueva .hx5-ins-top (gráfico | embudo + Helix Agent) y, debajo, el
   resto de tarjetas de helix-insights.js con el estilo nuevo. Maquetación solo en escritorio: el
   móvil v5 se diseña después. */

@media (min-width: 1024px) {
  /* ── Contenedor, cabecera y cápsulas ── */
  /* Mismo margen que Embudo y Agenda (contenido a 14 px de la hoja, título a 28 px): antes quedaba 10 px más adentro. */
  html.hx-v5 .helix-app .helix-shell:not(.inbox-active) .helix-tab-pane.is-active:has(> .hx5-ins) { padding-left: 14px; padding-right: 14px; }
  html.hx-v5 .helix-app .hx5-ins { max-width: none; padding: 0 0 24px; margin: 0;
    --heat-frio: #3B82F6; --heat-tibio: #F5C518; --heat-caliente: #FF922B; --heat-listo: #FF3B30; }
  html.hx-v5 .helix-app .hx5-ins .helix-insights-header { display: flex; align-items: flex-start; gap: 10px; flex-wrap: nowrap; margin: 0 0 16px; }
  html.hx-v5 .helix-app .hx5-ins-tit { margin-right: auto; padding: 4px 0 0 14px; min-width: 0; animation: hx5-entraL .5s var(--v5-eo) both; }
  html.hx-v5 .helix-app .hx5-ins-tit h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; color: var(--v5-t1); }
  html.hx-v5 .helix-app .hx5-ins-tit p { margin: 3px 0 0; font-size: 13.5px; color: var(--v5-t2); }
  html.hx-v5 .helix-app .hx5-ins .helix-period-switch,
  html.hx-v5 .helix-app .hx5-ins .helix-subnav { display: flex; gap: 2px; padding: 3px; margin: 0; flex-shrink: 0; border-radius: 999px;
    background: var(--v5-glass); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    box-shadow: inset 0 .5px 0 var(--v5-hl), 0 0 0 .5px var(--v5-edge), 0 8px 22px -12px rgba(0, 0, 0, .35); }
  html.hx-v5 .helix-app .hx5-ins .helix-period-btn,
  html.hx-v5 .helix-app .hx5-ins .helix-subnav-btn { height: 32px; min-height: 32px; min-width: 34px; padding: 0 13px; border: 0; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; background: transparent; box-shadow: none; text-shadow: none;
    font: inherit; font-size: 13px; font-weight: 400; color: var(--v5-t1); cursor: pointer;
    transition: background .3s var(--v5-eo), color .3s var(--v5-eo), transform .12s var(--v5-eo); }
  html.hx-v5 .helix-app .hx5-ins .helix-period-btn.is-active { background: var(--v5-acc); color: #fff; font-weight: 600; box-shadow: none; }
  html.hx-v5 .helix-app .hx5-ins .helix-subnav-btn { color: var(--v5-t2); }
  html.hx-v5 .helix-app .hx5-ins .helix-subnav-btn:hover { color: var(--v5-t1); background: transparent; }
  html.hx-v5 .helix-app .hx5-ins .helix-subnav-btn.is-active { color: var(--v5-t1); font-weight: 500; background: var(--v5-card); box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .25); }
  html.hx-v5[data-theme="dark"] .helix-app .hx5-ins .helix-subnav-btn.is-active { background: rgba(255, 255, 255, .12); }
  html.hx-v5 .helix-app .hx5-ins .helix-period-btn:active,
  html.hx-v5 .helix-app .hx5-ins .helix-subnav-btn:active { transform: scale(.97); }

  /* El panel no fija box-sizing global: las medidas del prototipo son de caja completa. */
  html.hx-v5 .helix-app .hx5-ins .helix-kpi-v2,
  html.hx-v5 .helix-app .hx5-ins .helix-insights-card,
  html.hx-v5 .helix-app .hx5-ins .helix-settings-section,
  html.hx-v5 .helix-app .hx5-ins-top,
  html.hx-v5 .helix-app .hx5-ins-top * { box-sizing: border-box; }

  /* ── KPIs (las tarjetas de siempre, con la forma del prototipo) ── */
  html.hx-v5 .helix-app .hx5-ins .helix-insights-kpis-v2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; }
  html.hx-v5 .helix-app .hx5-ins .helix-kpi-v2 { position: relative; height: 118px; padding: 14px 16px; border: 0; border-radius: 22px; overflow: hidden;
    background: var(--v5-card); box-shadow: var(--v5-sh1); animation: hx5-ins-sube .8s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--d, 0) * 1s);
    transition: box-shadow .35s var(--v5-eo), transform .25s var(--v5-eo); }
  html.hx-v5 .helix-app .hx5-ins .helix-kpi-v2-label { margin: 0; font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--v5-t2); }
  html.hx-v5 .helix-app .hx5-ins .helix-kpi-v2-row { display: block; }
  html.hx-v5 .helix-app .hx5-ins .helix-kpi-v2-num,
  html.hx-v5 .helix-app .hx5-ins .helix-kpi-v2--signal .helix-kpi-v2-num { display: block; margin-top: 8px; font-size: 32px; font-weight: 600; letter-spacing: -.035em;
    line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--v5-t1); background: none; -webkit-text-fill-color: currentColor; }
  html.hx-v5 .helix-app .hx5-ins .helix-kpi-v2-delta { position: absolute; left: 16px; bottom: 14px; padding: 2px 8px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; line-height: 1.45; white-space: nowrap; }
  html.hx-v5 .helix-app .hx5-ins .helix-kpi-v2-delta--up { color: #1DB954; background: rgba(52, 199, 89, .14); }
  html.hx-v5 .helix-app .hx5-ins .helix-kpi-v2-delta--down { color: #FF453A; background: rgba(255, 69, 58, .14); }
  html.hx-v5 .helix-app .hx5-ins .helix-kpi-v2-delta--flat { color: var(--v5-t2); background: var(--v5-card2); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-ins .helix-kpi-v2-delta--flat { background: #ECECEF; }
  html.hx-v5 .helix-app .hx5-ins .helix-kpi-v2.hx5-k > .helix-sparkline { display: none; }
  html.hx-v5 .helix-app .hx5-ins .hx5-spark { position: absolute; top: 16px; right: 14px; width: 112px; height: 40px; overflow: visible; }
  html.hx-v5 .helix-app .hx5-ins .hx5-spark .ln { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: hx5-ins-draw 1.9s cubic-bezier(.65, 0, .35, 1) forwards; }
  html.hx-v5 .helix-app .hx5-ins .hx5-spark .pt { opacity: 0; transform-box: fill-box; transform-origin: center;
    animation: hx5-ins-pop .5s cubic-bezier(.34, 1.56, .64, 1) 1.6s forwards; }

  /* ── Fila nueva: gráfico | embudo + Helix Agent ── */
  /* Cada columna con su alto: sin la tarjeta del agente el embudo ya no se estira hasta el alto del gráfico (~300 px vacíos). */
  html.hx-v5 .helix-app .hx5-ins-top { display: grid; grid-template-columns: minmax(0, 1.81fr) minmax(0, 1fr); gap: 12px; margin: 0 0 12px; align-items: start; }
  html.hx-v5 .helix-app .hx5-ins-der { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  html.hx-v5 .helix-app .hx5-ins-top .hx5-play { animation: hx5-ins-sube .8s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--d, 0) * 1s); }
  html.hx-v5 .helix-app .hx5-ins-chart { position: relative; min-width: 0; padding: 16px 18px 10px; border-radius: 24px; background: var(--v5-card); box-shadow: var(--v5-sh1); }
  html.hx-v5 .helix-app .hx5-ch-h { display: flex; align-items: center; gap: 10px; }
  html.hx-v5 .helix-app .hx5-ch-h h3,
  html.hx-v5 .helix-app .hx5-ins-fun h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--v5-t1); }
  html.hx-v5 .helix-app .hx5-segm { display: flex; gap: 4px; margin-left: auto; padding: 3px; border-radius: 999px; background: var(--v5-card2); }
  html.hx-v5 .helix-app .hx5-segm button { height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--v5-t2);
    font: inherit; font-size: 12.5px; display: flex; align-items: center; gap: 6px; cursor: pointer;
    transition: background .3s var(--v5-eo), color .3s var(--v5-eo), box-shadow .3s var(--v5-eo), transform .12s var(--v5-eo); }
  html.hx-v5 .helix-app .hx5-segm button:active { transform: scale(.97); }
  html.hx-v5 .helix-app .hx5-segm button.on { background: var(--v5-card); color: var(--v5-t1); box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .25); }
  html.hx-v5[data-theme="dark"] .helix-app .hx5-segm button.on { background: rgba(255, 255, 255, .12); }
  html.hx-v5 .helix-app .hx5-segm i { width: 8px; height: 8px; border-radius: 50%; }
  html.hx-v5 .helix-app .hx5-segm .hx5-dl { background: linear-gradient(90deg, #0A84FF, #B84BFF); }
  html.hx-v5 .helix-app .hx5-segm .hx5-da { background: #FF6B35; }
  html.hx-v5 .helix-app .hx5-segm .hx5-dc { background: #34C759; }
  html.hx-v5 .helix-app .hx5-big-n { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
  html.hx-v5 .helix-app .hx5-big-n b { font-size: 30px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--v5-t1); }
  html.hx-v5 .helix-app .hx5-big-n small { font-size: 12.5px; color: var(--v5-t2); }
  html.hx-v5 .helix-app .hx5-big-n span { font-size: 12.5px; font-weight: 600; cursor: default; }
  html.hx-v5 .helix-app .hx5-big-n .up,
  html.hx-v5 .helix-app .hx5-fb em.up { color: #1DB954; }
  html.hx-v5 .helix-app .hx5-big-n .down,
  html.hx-v5 .helix-app .hx5-fb em.down { color: #FF453A; }
  html.hx-v5 .helix-app .hx5-big-n .flat { color: var(--v5-t2); }
  html.hx-v5 .helix-app .hx5-vacio { padding: 90px 0; text-align: center; font-size: 13.5px; color: var(--v5-t3); }

  html.hx-v5 .helix-app .hx5-plot { display: block; margin-top: 8px; overflow: visible; }
  html.hx-v5 .helix-app .hx5-plot .gl { stroke: var(--v5-line); stroke-dasharray: 3 5; }
  html.hx-v5 .helix-app .hx5-plot text { font-family: var(--v5-font); font-size: 10.5px; fill: var(--v5-t3); }
  html.hx-v5 .helix-app .hx5-plot .lnl { filter: drop-shadow(0 8px 12px rgba(110, 91, 255, .45)); }
  html.hx-v5 .helix-app .hx5-plot .bar { transform-box: fill-box; transform-origin: bottom; }
  html.hx-v5 .helix-app .hx5-plot .pt { transform-box: fill-box; transform-origin: center; }
  html.hx-v5 .helix-app .hx5-plot .fin { stroke: var(--v5-card); }
  html.hx-v5 .helix-app .hx5-plot .pulse { transform-box: fill-box; transform-origin: center; animation: hx5-pulso 2.2s ease-out infinite; }
  html.hx-v5 .helix-app .hx5-plot .s-l,
  html.hx-v5 .helix-app .hx5-plot .s-a,
  html.hx-v5 .helix-app .hx5-plot .s-c { transition: opacity .35s var(--v5-eo); }
  html.hx-v5 .helix-app .hx5-sin-leads .hx5-plot .s-l,
  html.hx-v5 .helix-app .hx5-sin-agendados .hx5-plot .s-a,
  html.hx-v5 .helix-app .hx5-ins-chart:not(.hx5-con-clientes) .hx5-plot .s-c { opacity: 0; }
  html.hx-v5 .helix-app .hx5-plot .ev line { stroke: var(--v5-t3); stroke-dasharray: 3 4; }
  html.hx-v5 .helix-app .hx5-plot .ev rect { fill: var(--v5-card2); }
  html.hx-v5 .helix-app .hx5-plot .ev text { fill: var(--v5-t1); font-size: 11px; font-weight: 600; }
  html.hx-v5 .helix-app .hx5-plot .ev-camp circle { fill: #0A84FF; }
  html.hx-v5 .helix-app .hx5-plot .ev-bot circle { fill: var(--v5-acc); }
  html.hx-v5 .helix-app .hx5-plot .cur { opacity: 0; pointer-events: none; transition: opacity .15s var(--v5-eo); }
  html.hx-v5 .helix-app .hx5-plot:hover .cur { opacity: 1; }
  html.hx-v5 .helix-app .hx5-plot .cur line { stroke: var(--v5-t3); stroke-dasharray: 2 4; }
  html.hx-v5 .helix-app .hx5-plot .cur rect { fill: var(--v5-t1); }
  html.hx-v5 .helix-app .hx5-plot .cur text { fill: var(--v5-card); font-size: 11.5px; font-weight: 600; }
  html.hx-v5 .helix-app .hx5-plot .cur .t2 { font-weight: 500; opacity: .8; }
  /* dibujo de entrada (solo en el primer pintado: al redimensionar no se repite) */
  html.hx-v5 .helix-app .hx5-play .hx5-plot .ln { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: hx5-ins-draw 1.9s cubic-bezier(.65, 0, .35, 1) forwards; }
  html.hx-v5 .helix-app .hx5-play .hx5-plot .lnc { animation-delay: .35s; }
  html.hx-v5 .helix-app .hx5-play .hx5-plot .ar { opacity: 0; animation: hx5-ins-fade 1.1s .8s ease forwards; }
  html.hx-v5 .helix-app .hx5-play .hx5-plot .pt,
  html.hx-v5 .helix-app .hx5-play .hx5-plot .ev-i { opacity: 0; animation: hx5-ins-pop .5s cubic-bezier(.34, 1.56, .64, 1) forwards; animation-delay: calc(var(--d) * 1s); }
  html.hx-v5 .helix-app .hx5-play .hx5-plot .ev-i { transform-box: fill-box; transform-origin: 50% 0; }
  html.hx-v5 .helix-app .hx5-play .hx5-plot .bar { transform: scaleY(0); animation: hx5-ins-barup .8s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: calc(var(--d) * 1s); }

  /* embudo del periodo (las tasas de siempre) */
  html.hx-v5 .helix-app .hx5-ins-fun { display: flex; flex-direction: column; gap: 13px; padding: 16px; border-radius: 24px;
    background: var(--v5-card); box-shadow: var(--v5-sh1); }
  html.hx-v5 .helix-app .hx5-fb { display: grid; grid-template-columns: 96px minmax(0, 1fr) 46px 50px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--v5-t1); }
  html.hx-v5 .helix-app .hx5-fb .hx5-bar { height: 12px; border-radius: 6px; background: var(--v5-line); overflow: hidden; }
  html.hx-v5 .helix-app .hx5-fb .hx5-bar i { display: block; width: var(--w); height: 100%; border-radius: 6px; background: var(--v5-sig);
    box-shadow: 0 4px 12px -4px rgba(184, 75, 255, .6); }
  html.hx-v5 .helix-app .hx5-play .hx5-fb .hx5-bar i { width: 0; animation: hx5-ins-grow 1.4s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: calc(var(--d) * 1s); }
  html.hx-v5 .helix-app .hx5-fb .hx5-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  html.hx-v5 .helix-app .hx5-fun-base { margin: -9px 0 2px; font-size: 12px; color: var(--v5-t2); }
  html.hx-v5 .helix-app .hx5-fb em { font-style: normal; font-size: 11px; text-align: right; white-space: nowrap; color: var(--v5-t3); font-variant-numeric: tabular-nums; }

  /* Helix Agent · lo que he visto este mes (cristal) */
  html.hx-v5 .helix-app .hx5-ins-ag { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 10px; padding: 18px;
    border-radius: 24px; background: var(--v5-glass); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    box-shadow: inset 0 .5px 0 var(--v5-hl), 0 0 0 .5px var(--v5-edge), var(--v5-shg); }
  html.hx-v5 .helix-app .hx5-ins-ag-h { display: flex; align-items: center; gap: 12px; }
  html.hx-v5 .helix-app .hx5-ins-ag-h b { font-size: 12px; font-weight: 600; width: max-content; }
  html.hx-v5 .helix-app .hx5-ins-ag-h small { display: block; font-size: 12px; color: var(--v5-t2); }
  html.hx-v5 .helix-app .hx5-ins-ag-m { display: inline-flex; flex-shrink: 0; min-width: 52px; min-height: 52px;
    animation: hx5-asoma .8s var(--v5-eo) .55s both, hx5-ins-flota 3.4s ease-in-out 1.4s infinite alternate; }
  html.hx-v5 .helix-app .hx5-ins-ag p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--v5-t1); }
  html.hx-v5 .helix-app .hx5-ins-dato { display: flex; gap: 8px; margin-top: 2px; }
  html.hx-v5 .helix-app .hx5-ins-dato div { flex: 1; min-width: 0; padding: 9px 10px; border-radius: 14px; background: var(--v5-card2); }
  html.hx-v5 .helix-app .hx5-ins-dato b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--v5-t1); }
  html.hx-v5 .helix-app .hx5-ins-dato span { display: block; font-size: 11px; line-height: 1.35; letter-spacing: -.01em; color: var(--v5-t2); }

  /* ── El resto de tarjetas de siempre, con el estilo nuevo ── */
  html.hx-v5 .helix-app .hx5-ins-graf .helix-insights-card--chart { display: none; }
  html.hx-v5 .helix-app .hx5-ins-emb .helix-insights-card:has(> .helix-insights-card-inner > .helix-tasas-chart) { display: none; }
  html.hx-v5 .helix-app .hx5-ins .helix-insights-grid { gap: 12px; margin-top: 0; }
  html.hx-v5 .helix-app .hx5-ins .helix-insights-card { border: 0; border-radius: 24px; background: var(--v5-card); box-shadow: var(--v5-sh1);
    animation: hx5-ins-sube .8s cubic-bezier(.22, 1, .36, 1) .15s both; }
  html.hx-v5 .helix-app .hx5-ins .helix-insights-card-inner { padding: 16px 18px; }
  html.hx-v5 .helix-app .hx5-ins .helix-insights-card-head { margin-bottom: 14px; color: var(--v5-t1); }
  html.hx-v5 .helix-app .hx5-ins .helix-insights-card-head h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--v5-t1); }
  html.hx-v5 .helix-app .hx5-ins .helix-card-hero-num { font-size: 32px; font-weight: 600; letter-spacing: -.035em; color: var(--v5-t1); }
  html.hx-v5 .helix-app .hx5-ins .fg-3,
  html.hx-v5 .helix-app .hx5-ins .t-caption.fg-3 { color: var(--v5-t2); }
  html.hx-v5 .helix-app .hx5-ins .helix-tasa-row-bar,
  html.hx-v5 .helix-app .hx5-ins .helix-ab-row-bar { background: var(--v5-line); border-radius: 6px; }
  html.hx-v5 .helix-app .hx5-ins .helix-donut-hole { background: var(--v5-card); }

  /* Pregúntale a tus datos (y las secciones de Tus mensajes) */
  html.hx-v5 .helix-app .hx5-ins .helix-settings-section { margin: 12px 0 0; padding: 16px 18px; border: 0; border-radius: 24px;
    background: var(--v5-card); box-shadow: var(--v5-sh1); }
  html.hx-v5 .helix-app .hx5-ins #helix-pregunta .t-eyebrow { font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--v5-t1); }
  /* !important: el campo y las burbujas traen estilos en línea (helix-insights.js) */
  html.hx-v5 .helix-app .hx5-ins #helix-pregunta-input { height: 40px; padding: 0 16px !important; border: 0 !important; border-radius: 999px !important;
    background: var(--v5-bin) !important; color: var(--v5-t1); outline: none; }
  html.hx-v5 .helix-app .hx5-ins #helix-pregunta-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--v5-acc) 30%, transparent); }
  html.hx-v5 .helix-app .hx5-ins #helix-pregunta-hilo > div { border: 0 !important; border-radius: 18px !important; background: var(--v5-bin) !important; color: var(--v5-t1); }
  html.hx-v5 .helix-app .hx5-ins #helix-pregunta-hilo > div[style*="flex-end"] { background: var(--v5-acc) !important; color: #fff; }

  /* Botones de la pantalla con la paleta v5 (el filo de cristal azul del panel de siempre fuera) */
  html.hx-v5 .helix-app .hx5-ins .helix-btn { text-shadow: none; border-radius: 999px; }
  html.hx-v5 .helix-app .hx5-ins .helix-btn--primary { background: var(--v5-acc); color: #fff; }
  html.hx-v5 .helix-app .hx5-ins .helix-btn--primary:hover { filter: brightness(1.08); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--v5-acc) 70%, transparent); }
  html.hx-v5 .helix-app .hx5-ins .helix-btn--secondary { background: var(--v5-card2); color: var(--v5-t1); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-ins .helix-btn--secondary { background: #ECECEF; }
  html.hx-v5 .helix-app .hx5-ins .helix-btn--ghost { background: var(--v5-card2); color: var(--v5-t1); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-ins .helix-btn--ghost { background: #ECECEF; }
  html.hx-v5 .helix-app .hx5-ins .helix-btn--primary:not(.is-ocupado):not(.is-hecho)::after,
  html.hx-v5 .helix-app .hx5-ins .helix-btn--secondary:not(.is-ocupado):not(.is-hecho)::after { content: none; }

  /* Utilidad: texto solo para lectores de pantalla */
  html.hx-v5 .helix-app .hx5-ins .hx5-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@keyframes hx5-ins-draw { to { stroke-dashoffset: 0; } }
@keyframes hx5-ins-fade { to { opacity: 1; } }
@keyframes hx5-ins-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes hx5-ins-barup { to { transform: scaleY(1); } }
@keyframes hx5-ins-grow { to { width: var(--w); } }
@keyframes hx5-ins-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hx5-ins-flota { from { transform: translateY(0); } to { transform: translateY(-6px); } }