/* ============================================================
   YUSTA LABS · PREMIUM EFFECTS v2 · 2026-05-27
   Capa de efectos 3D + interactividad que se monta sobre la home v8
   v2 cambios:
   - REMOVIDO cursor cobre flotante (creaba "barra de luz" sobre el hero)
   - Cards tilt es AHORA ADITIVO (cards visibles aunque JS no corra)
   - Paneles vidrio + haz luz se mantiene
   - Hero mark tilt 3D al mouse se mantiene
   - Data-flow agentes IA se mantiene
   - Live-demos cards se mantienen
   ============================================================ */

/* -----------------------------------------------------------------
   01 · HERO MARK · rotación 3D reactiva al mouse
   El logo cromado YA gira solo (ringSpinA/B/C). Esto añade tilt extra
   cuando el mouse está sobre el hero. No reemplaza nada.
   ----------------------------------------------------------------- */
.hero-mark{
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(0);
  transition: transform .45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.hero-mark.tilt-active{
  transition: transform .12s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Reflejo dinámico cobre extra · responde a posición mouse */
.hero-mark .mark-art .refl{
  background: radial-gradient(
    circle at calc(50% + var(--refl-x, 0%)) calc(50% + var(--refl-y, 0%)),
    rgba(255,220,190,.40) 0%,
    rgba(201,147,120,.16) 25%,
    transparent 50%);
}

/* -----------------------------------------------------------------
   02 · PANELES VIDRIO ESMERILADO · haz de luz dinámico en hover
   Aplica a .sistema-card · .offsw-panel · .caso-card
   ----------------------------------------------------------------- */
.sistema-card,
.caso-card,
.offsw-panel{
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
}

/* 02-fix · 2026-05-28: TAB SWITCHER "Cuatro frentes" / "Las verticales"
   CSS completo de .offsw-* portado desde yusta.css (que la home no carga).
   Sin esto, los mockups del switcher se ven raw · sin browser chrome,
   sin grid, sin kpi cards, sin chat estilizado.
   Tokens mapeados V7 Silver Premium · easings = --ease-out · serif = --ff-display */

.offsw{
  margin-top: 40px;
  border: 1px solid var(--yl-silver-line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(13,19,35,0.6) 0%, rgba(5,11,23,0.4) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0,0,0,0.25), inset 0 1px 0 rgba(199,205,212,0.05);
}

.offsw-tabs{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--yl-silver-line);
  background: rgba(5,11,23,0.55);
}
.offsw-tab{
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--yl-silver-line);
  color: var(--yl-silver-mirror);
  padding: 18px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  transition: color .2s var(--ease-out), background .2s var(--ease-out);
  text-align: left;
  position: relative;
}
.offsw-tab:last-child{ border-right: 0 }
.offsw-tab:hover{ color: var(--yl-silver-light); background: rgba(199,205,212,0.02) }
.offsw-tab:focus-visible{ outline: 2px solid var(--yl-copper-rim); outline-offset: -2px }
.offsw-tab.active{
  color: var(--yl-silver-light);
  background: linear-gradient(180deg, rgba(159, 228, 238,0.08) 0%, transparent 100%);
}
.offsw-tab.active::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--yl-copper-rim);
  box-shadow: 0 0 12px rgba(201,147,120,0.45);
}
.offsw-tab-num{ font-size: 10px; color: var(--yl-copper-light); letter-spacing: 0.12em }
.offsw-tab-lbl{ flex: 1 }
.offsw-tab-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c, var(--yl-copper-rim));
  box-shadow: 0 0 10px var(--c, var(--yl-copper-rim));
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity .2s var(--ease-out);
}
.offsw-tab.active .offsw-tab-dot{ opacity: 1 }

.offsw-stage{
  position: relative;
  min-height: 460px;
  padding: 36px 36px 28px;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(159, 228, 238,0.04), transparent 70%);
}
.offsw-panel{ display: none; animation: offswFadeIn .36s var(--ease-out) }
.offsw-panel.active{ display: block }
@keyframes offswFadeIn{
  from{ opacity: 0; transform: translateY(6px) }
  to{ opacity: 1; transform: translateY(0) }
}

.offsw-laptop{
  background: #0a1020;
  border: 1px solid rgba(199,205,212,0.1);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0,0,0,0.4), inset 0 1px 0 rgba(199,205,212,0.05);
  max-width: 880px;
  margin: 0 auto;
}
.offsw-chrome{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(13,19,35,0.9);
  border-bottom: 1px solid rgba(199,205,212,0.06);
}
.offsw-chrome > span:not(.offsw-url){ width: 10px; height: 10px; border-radius: 50%; background: rgba(199,205,212,0.18) }
.offsw-chrome > span:first-child{ background: #ef4444aa }
.offsw-chrome > span:nth-child(2){ background: #f59e0baa }
.offsw-chrome > span:nth-child(3){ background: #22c55eaa }
.offsw-url{ margin-left: 14px; font-size: 11px; color: rgba(199,205,212,0.55); letter-spacing: 0.02em }

.offsw-app{ display: grid; grid-template-columns: 180px 1fr; min-height: 380px }
.offsw-side{
  padding: 16px 10px;
  border-right: 1px solid rgba(199,205,212,0.06);
  background: rgba(5,11,23,0.4);
  display: flex; flex-direction: column; gap: 4px;
}
.offsw-side-row{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px;
  font-size: 12.5px; color: var(--yl-silver-mirror);
  transition: background .16s var(--ease-out), color .16s var(--ease-out);
}
.offsw-side-row:hover{ color: var(--yl-silver-light); background: rgba(199,205,212,0.04) }
.offsw-side-row.active{
  color: var(--yl-silver-light);
  background: linear-gradient(90deg, rgba(159, 228, 238,0.18) 0%, rgba(159, 228, 238,0.03) 100%);
  box-shadow: inset 2px 0 0 var(--yl-copper-rim);
}
.offsw-side-ic{ font-size: 13px; color: var(--yl-copper-light); opacity: 0.8; width: 16px; text-align: center }
.offsw-main{ padding: 20px 24px; display: flex; flex-direction: column; gap: 18px }
.offsw-kpis{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.offsw-kpi{
  padding: 12px 14px;
  background: rgba(199,205,212,0.025);
  border: 1px solid rgba(199,205,212,0.06);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.offsw-kpi span.mono{ font-size: 10px; color: rgba(199,205,212,0.55); letter-spacing: 0.08em; text-transform: uppercase }
.offsw-kpi b{ font-size: 22px; font-weight: 600; color: var(--yl-silver-light); letter-spacing: -0.01em }
.offsw-kpi em{ font-style: normal; font-size: 11px; font-weight: 600 }
.offsw-kpi em.up{ color: #4ade80 }
.offsw-kpi em.warn{ color: #fbbf24 }
.offsw-chart{ display: flex; align-items: flex-end; gap: 6px; height: 80px; padding: 0 4px }
.offsw-chart > div{
  flex: 1;
  background: linear-gradient(180deg, var(--yl-copper-rim) 0%, rgba(159, 228, 238,0.22) 100%);
  border-radius: 4px 4px 0 0; opacity: 0.85; min-height: 8px;
}
.offsw-rows{ display: flex; flex-direction: column; gap: 6px }
.offsw-row{
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 14px; padding: 8px 12px;
  background: rgba(199,205,212,0.018);
  border: 1px solid rgba(199,205,212,0.04);
  border-radius: 8px; font-size: 12.5px; color: var(--yl-silver-mirror);
}
.offsw-row b{ color: var(--yl-silver-light); font-weight: 600 }
.offsw-row em{ font-style: normal; font-size: 10.5px; color: rgba(199,205,212,0.5); text-transform: uppercase; letter-spacing: 0.06em }
.offsw-row em.ok{ color: #4ade80 }
.offsw-row em.warn{ color: #fbbf24 }

.offsw-laptop-web .offsw-web{ padding: 0; min-height: 380px; background: linear-gradient(180deg, #0c1428 0%, #050b17 100%) }
.offsw-web-nav{ display: flex; align-items: center; gap: 18px; padding: 14px 24px; border-bottom: 1px solid rgba(199,205,212,0.06) }
.offsw-web-brand{ width: 78px; height: 14px; background: linear-gradient(90deg, var(--yl-silver-light), rgba(199,205,212,0.4)); border-radius: 4px }
.offsw-web-links{ display: flex; gap: 14px; margin-left: 12px }
.offsw-web-links i{ width: 38px; height: 8px; background: rgba(199,205,212,0.18); border-radius: 3px }
.offsw-web-cta-mini{ margin-left: auto; width: 72px; height: 26px; background: linear-gradient(135deg, var(--yl-copper-light), #b3744f); border-radius: 999px }
.offsw-web-hero{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 26px 24px; align-items: center }
.offsw-web-copy{ display: flex; flex-direction: column; gap: 9px }
.offsw-web-h1{ height: 16px; background: linear-gradient(90deg, var(--yl-silver-light) 0%, rgba(199,205,212,0.6) 100%); border-radius: 4px; width: 90% }
.offsw-web-h2{ height: 9px; background: rgba(199,205,212,0.22); border-radius: 3px; width: 78% }
.offsw-web-h2.sh{ width: 65%; opacity: 0.7 }
.offsw-web-cta-row{ display: flex; gap: 10px; margin-top: 6px }
.offsw-web-cta-pri{ width: 110px; height: 32px; background: linear-gradient(135deg, var(--yl-copper-light), #b3744f); border-radius: 999px }
.offsw-web-cta-sec{ width: 80px; height: 32px; border: 1px solid rgba(199,205,212,0.2); border-radius: 999px }
.offsw-web-img{
  height: 130px; border-radius: 10px;
  background: radial-gradient(ellipse 60% 60% at 40% 40%, rgba(159, 228, 238,0.4) 0%, rgba(13,19,35,0.6) 70%);
  position: relative; overflow: hidden;
  border: 1px solid rgba(199,205,212,0.08);
}
.offsw-web-img-glow{ position: absolute; inset: 12% 18% auto auto; width: 56px; height: 56px; background: radial-gradient(circle, rgba(201,147,120,.4) 0%, transparent 65%); filter: blur(4px); opacity: 0.7 }
.offsw-web-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 24px 24px }
.offsw-web-card{
  padding: 12px;
  background: rgba(199,205,212,0.025);
  border: 1px solid rgba(199,205,212,0.06);
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.offsw-web-card i{ width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, var(--yl-copper-light), #8a5a40); opacity: 0.7 }
.offsw-web-card b{ display: block; height: 8px; background: rgba(199,205,212,0.3); border-radius: 3px; width: 80% }
.offsw-web-card span{ display: block; height: 6px; background: rgba(199,205,212,0.14); border-radius: 2px; width: 100% }

.offsw-chat{
  max-width: 460px; margin: 0 auto;
  background: #0a1220;
  border: 1px solid rgba(199,205,212,0.1);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 16px 36px rgba(0,0,0,0.4);
}
.offsw-chat-head{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(34,211,238,0.08) 0%, transparent 100%);
  border-bottom: 1px solid rgba(199,205,212,0.08);
}
.offsw-chat-avatar{
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #1a2a4a, #0a1220);
  border: 1px solid rgba(34,211,238,0.4);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display); font-style: normal; font-size: 14px;
  color: var(--yl-silver-light);
}
.offsw-chat-meta{ display: flex; flex-direction: column; gap: 2px; flex: 1 }
.offsw-chat-meta b{ color: var(--yl-silver-light); font-size: 13.5px; font-weight: 600 }
.offsw-chat-meta span.mono{ font-size: 10.5px; color: rgba(34,211,238,0.75); letter-spacing: 0.04em }
.offsw-chat-status{ color: #22d3ee; font-size: 11px; box-shadow: 0 0 8px #22d3ee; border-radius: 50%; width: 8px; height: 8px; background: #22d3ee; display: inline-block }
.offsw-chat-body{ padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 240px }
.offsw-msg{ display: flex; flex-direction: column; gap: 3px; max-width: 78% }
.offsw-msg span{ padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.45 }
.offsw-msg em.mono{ font-style: normal; font-size: 10px; color: rgba(199,205,212,0.4); padding: 0 6px }
.offsw-msg-in{ align-self: flex-start }
.offsw-msg-in span{ background: rgba(199,205,212,0.06); color: var(--yl-silver-light); border-bottom-left-radius: 4px }
.offsw-msg-out{ align-self: flex-end }
.offsw-msg-out span{ background: linear-gradient(135deg, rgba(34,211,238,0.18), rgba(34,211,238,0.05)); color: var(--yl-silver-light); border: 1px solid rgba(34,211,238,0.2); border-bottom-right-radius: 4px }
.offsw-msg-out em.mono{ align-self: flex-end }
.offsw-chat-result{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(74,222,128,0.1) 0%, rgba(74,222,128,0.02) 100%);
  border-top: 1px solid rgba(74,222,128,0.18);
}
.offsw-chat-result-dot{ width: 10px; height: 10px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 12px #4ade80; flex-shrink: 0 }
.offsw-chat-result-text{ display: flex; flex-direction: column; gap: 2px }
.offsw-chat-result-text b{ color: #4ade80; font-size: 13.5px; font-weight: 600 }
.offsw-chat-result-text .mono{ font-size: 10.5px; color: rgba(74,222,128,0.7); letter-spacing: 0.03em }

.offsw-mkt{ display: grid; grid-template-columns: 200px 1fr 220px; gap: 18px; min-height: 380px }
.offsw-mkt-lbl{ font-size: 10px; color: var(--yl-copper-light); letter-spacing: 0.12em; margin-bottom: 12px; text-transform: uppercase }
.offsw-mkt-left, .offsw-mkt-right{
  padding: 18px 14px;
  background: rgba(199,205,212,0.02);
  border: 1px solid rgba(199,205,212,0.06);
  border-radius: 12px;
}
.offsw-mkt-agenda{ display: flex; flex-direction: column; gap: 6px }
.offsw-mkt-item{
  display: flex; gap: 12px; align-items: center;
  padding: 8px 10px; border-radius: 7px;
  font-size: 13px; color: var(--yl-silver-mirror);
  border-left: 2px solid transparent;
  transition: background .16s var(--ease-out);
}
.offsw-mkt-item:hover{ background: rgba(199,205,212,0.03) }
.offsw-mkt-item.active{
  background: linear-gradient(90deg, rgba(159, 228, 238,0.16), transparent 80%);
  border-left-color: var(--yl-copper-rim);
}
.offsw-mkt-item .mono{ font-size: 10.5px; color: rgba(199,205,212,0.55); letter-spacing: 0.05em; flex-shrink: 0; width: 38px }
.offsw-mkt-item b{ color: var(--yl-silver-light); font-weight: 500 }
.offsw-mkt-center{
  background: rgba(5,11,23,0.5);
  border: 1px solid rgba(199,205,212,0.08);
  border-radius: 14px;
  padding: 18px;
  display: flex; flex-direction: column;
}
.offsw-mkt-preview-tabs{ display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap }
.offsw-mkt-pt{
  padding: 5px 11px; font-size: 11px; border-radius: 999px;
  background: rgba(199,205,212,0.03);
  border: 1px solid rgba(199,205,212,0.08);
  color: var(--yl-silver-mirror); cursor: default;
}
.offsw-mkt-pt.active{ background: rgba(159, 228, 238,0.12); border-color: rgba(159, 228, 238,0.4); color: var(--yl-silver-light) }
.offsw-mkt-slide{
  flex: 1; position: relative;
  background: linear-gradient(160deg, #0d1323 0%, #050b17 100%);
  border-radius: 12px;
  border: 1px solid rgba(199,205,212,0.06);
  padding: 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 220px;
}
.offsw-mkt-slide-num{ align-self: flex-end; font-size: 10px; color: rgba(199,205,212,0.5); letter-spacing: 0.12em }
.offsw-mkt-slide-hook{ height: 22px; background: linear-gradient(90deg, var(--yl-silver-light), rgba(199,205,212,0.5)); border-radius: 5px; width: 85%; margin-top: -12px }
.offsw-mkt-slide-sub{ height: 11px; background: rgba(199,205,212,0.22); border-radius: 3px; width: 65%; margin-top: 8px }
.offsw-mkt-slide-foot{ display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(199,205,212,0.06) }
.offsw-mkt-slide-mk{ width: 22px; height: 22px; background: url("/assets/brand/yl-mark-flat-white.svg") center / contain no-repeat; opacity: 0.8 }
.offsw-mkt-slide-tag{ font-size: 9.5px; color: var(--yl-copper-light); letter-spacing: 0.16em }
.offsw-mkt-quality{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px }
.offsw-mkt-q-row{
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; border-radius: 6px;
  background: rgba(199,205,212,0.018);
  font-size: 12px; color: var(--yl-silver-mirror);
}
.offsw-mkt-q-row b{ color: var(--yl-silver-light); font-size: 12.5px; font-weight: 600 }
.offsw-mkt-q-row b.ok{ color: #4ade80 }
.offsw-mkt-approve{
  appearance: none; width: 100%; padding: 11px 14px;
  background: linear-gradient(135deg, var(--yl-copper-rim), #b3744f);
  color: #0a0810; border: 0; border-radius: 10px;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.offsw-mkt-approve:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(159, 228, 238,0.3) }

/* FIX zoom-resilient 2026-05-28: flex-wrap en vez de grid 1fr auto.
   Antes, con zoom alto / anchos intermedios, el grid apretaba el texto
   palabra-por-palabra y partía el botón. Con flex-wrap el botón baja de
   línea cuando no entra, sin aplastar el texto. Funciona a cualquier zoom. */
.offsw-foot{
  grid-column: 1 / -1; /* FIX 2026-05-28: el .offsw padre es grid 280px|1fr · sin esto
                          el foot caía en la columna angosta izquierda (280px) y se veía
                          apretado. Ahora abarca el ancho completo abajo. */
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 18px 24px;
  padding: 26px 36px;
  border-top: 1px solid var(--yl-silver-line);
  background: rgba(5,11,23,0.5);
}
.offsw-foot-text{ display: flex; flex-direction: column; gap: 6px; flex: 1 1 300px; min-width: 0 }
.offsw-title{ font-family: var(--ff-display); font-style: normal; font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; color: var(--yl-silver-light); line-height: 1.15; text-wrap: balance }
.offsw-desc{ font-size: 15px; color: var(--yl-silver-mirror); line-height: 1.5; max-width: 640px }
.offsw-cta{ flex: 0 0 auto; white-space: nowrap }

@media (max-width: 980px){
  .offsw-stage{ padding: 22px }
  .offsw-mkt{ grid-template-columns: 1fr }
  .offsw-mkt-left, .offsw-mkt-right{ padding: 14px }
  .offsw-mkt-agenda{ flex-direction: row; flex-wrap: wrap }
  .offsw-mkt-item{ flex: 1 1 calc(33% - 6px); min-width: 0 }
}
@media (max-width: 760px){
  .offsw-tabs{ grid-template-columns: 1fr 1fr }
  .offsw-tab{ padding: 14px 12px; font-size: 13px }
  .offsw-tab-num{ display: none }
  .offsw-tab:nth-child(2){ border-right: 0 }
  .offsw-tab:nth-child(1), .offsw-tab:nth-child(2){ border-bottom: 1px solid var(--yl-silver-line) }
  .offsw-app{ grid-template-columns: 1fr }
  .offsw-side{ flex-direction: row; gap: 4px; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid rgba(199,205,212,0.06) }
  .offsw-side-row{ white-space: nowrap; padding: 6px 10px; font-size: 11px }
  .offsw-kpis{ grid-template-columns: 1fr }
  .offsw-web-hero{ grid-template-columns: 1fr }
  .offsw-web-img{ height: 110px }
  .offsw-foot{ grid-template-columns: 1fr; padding: 22px; text-align: left }
  .offsw-title{ font-size: 22px }
}

/* Borde luminoso animado cuando el mouse entra */
.sistema-card::after,
.caso-card::after{
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    transparent 0deg,
    transparent 320deg,
    rgba(201,147,120,.85) 340deg,
    rgba(232,234,237,.95) 350deg,
    rgba(201,147,120,.85) 360deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s ease-out;
  pointer-events: none;
  animation: beamRotate 4s linear infinite paused;
}
.sistema-card:hover::after,
.caso-card:hover::after{
  opacity: 1;
  animation-play-state: running;
}
@keyframes beamRotate{
  to { --beam-angle: 360deg }
}
@property --beam-angle{
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* -----------------------------------------------------------------
   03 · CARDS · entrada inclinada por scroll (ADITIVO · no bloqueante)
   ⚠ v2: las cards SON VISIBLES por default. La animación es bonus.
   Si IntersectionObserver no dispara, igual se ven.
   ----------------------------------------------------------------- */
@media (min-width: 880px) and (prefers-reduced-motion: no-preference){
  .sistema-card.tilt-entered,
  .caso-card.tilt-entered{
    animation: cardTiltIn 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  }
  /* Alternar dirección de entrada para layout dinámico */
  .sistema-card.tilt-entered:nth-child(2n),
  .caso-card.tilt-entered:nth-child(2n){
    animation-name: cardTiltInR;
  }
}
@keyframes cardTiltIn{
  from{
    opacity: 0;
    transform:
      perspective(1200px)
      rotateX(14deg) rotateY(-6deg)
      translateY(40px) translateZ(-30px);
  }
  to{
    opacity: 1;
    transform:
      perspective(1200px)
      rotateX(0) rotateY(0)
      translateY(0) translateZ(0);
  }
}
@keyframes cardTiltInR{
  from{
    opacity: 0;
    transform:
      perspective(1200px)
      rotateX(14deg) rotateY(6deg)
      translateY(40px) translateZ(-30px);
  }
  to{
    opacity: 1;
    transform:
      perspective(1200px)
      rotateX(0) rotateY(0)
      translateY(0) translateZ(0);
  }
}

/* -----------------------------------------------------------------
   04 · FLUJOS DE DATOS COBRE · sección Agentes IA
   Pulsos viajan desde celular hasta panel cuando bot responde
   ----------------------------------------------------------------- */
.data-flow{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .8s ease-out;
}
.data-flow.live{ opacity: 1 }

.data-flow svg{ width: 100%; height: 100%; overflow: visible }
.data-flow .wire{
  fill: none;
  stroke: rgba(159, 228, 238,.25);
  stroke-width: 1;
  stroke-dasharray: 4 6;
}
.data-flow .pulse{
  fill: none;
  stroke: rgba(255,220,190,.9);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 12 200;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px rgba(201,147,120,.7));
  animation: dataPulse 3.8s linear infinite;
}
.data-flow .pulse.b{ animation-delay: 1.2s; animation-duration: 4.2s }
.data-flow .pulse.c{ animation-delay: 2.4s; animation-duration: 3.4s }

@keyframes dataPulse{
  0%   { stroke-dashoffset: 0;   opacity: 0 }
  10%  { opacity: 1 }
  85%  { opacity: 1 }
  100% { stroke-dashoffset: -800; opacity: 0 }
}

/* Nodos en los extremos · respiración */
.data-flow .node{
  fill: rgba(201,147,120,.45);
  stroke: rgba(255,220,190,.85);
  stroke-width: 1.5;
  animation: nodePulse 2.4s ease-in-out infinite;
}
.data-flow .node.b{ animation-delay: .8s }
@keyframes nodePulse{
  0%,100% { r: 4; fill-opacity: .45 }
  50%     { r: 6; fill-opacity: .9 }
}

/* -----------------------------------------------------------------
   05 · DEMOS EN VIVO · sección nueva entre pricing-teaser y rotator
   Mockups CSS-only que simulan flow real (sin video pesado)
   ----------------------------------------------------------------- */
.live-demos{
  position: relative;
  padding: clamp(72px, 10vw, 140px) 0;
  isolation: isolate;
}
.live-demos::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(154,108,184,.04), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(159, 228, 238,.05), transparent 65%);
  pointer-events:none;
}
.ld-head{
  display:flex;flex-direction:column;gap:12px;margin-bottom:48px;
  max-width: 760px;
}
.ld-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 980px){ .ld-grid{ grid-template-columns: 1fr; gap: 28px } }

.ld-card{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(199,205,212,.045), rgba(199,205,212,.015));
  border: 1px solid rgba(159, 228, 238,.18);
  padding: 24px;
  display:flex;flex-direction:column;gap:18px;
  min-height: 420px;
  transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1),
              border-color .5s, box-shadow .5s;
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
}
.ld-card:hover{
  transform: translateY(-4px);
  border-color: rgba(159, 228, 238,.45);
  box-shadow: 0 36px 80px -28px rgba(0,0,0,.75), 0 0 30px rgba(159, 228, 238,.12);
}

.ld-card-title{
  display:flex;align-items:center;gap:10px;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--yl-copper-light);
}
.ld-card-title::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background: var(--yl-copper-light);
  box-shadow: 0 0 8px rgba(201,147,120,.7);
  animation: pulseCopper 2.4s ease-out infinite;
}
.ld-card h3{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--yl-silver-light);
  letter-spacing: -.015em;
}
.ld-card .ld-sub{
  font-size: 13.5px;
  color: var(--yl-silver-mirror);
  line-height: 1.5;
}

/* === Demo 1 · POS Aura Commerce · animación "agregar venta" === */
.ld-stage-pos{
  flex: 1;
  position: relative;
  background: var(--yl-ink-mid);
  border-radius: 10px;
  border: 1px solid var(--yl-silver-line);
  padding: 14px;
  font-family: var(--ff-mono);
  font-size: 11px;
  display:flex;flex-direction:column;gap:10px;
  overflow: hidden;
}
.ld-pos-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: rgba(199,205,212,.04);
  border-radius: 6px;
  border: 1px solid var(--yl-silver-line);
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference){
  .ld-pos-row{
    opacity: 0;
    transform: translateX(-18px);
    animation: rowSlide 7s ease-out infinite;
  }
  .ld-pos-row:nth-child(1){ animation-delay: 0s }
  .ld-pos-row:nth-child(2){ animation-delay: 1.4s }
  .ld-pos-row:nth-child(3){ animation-delay: 2.8s }
  .ld-pos-row.total{ animation-delay: 4.2s }
}
.ld-pos-row.total{
  background: rgba(201,147,120,.12);
  border-color: rgba(201,147,120,.35);
  color: var(--yl-silver-light);
  font-weight: 600;
  font-size: 12.5px;
  margin-top: auto;
}
@keyframes rowSlide{
  0%   { opacity: 0; transform: translateX(-18px) }
  5%   { opacity: 1; transform: translateX(0) }
  85%  { opacity: 1; transform: translateX(0) }
  100% { opacity: 0; transform: translateX(0) }
}
.ld-pos-row b{ color: var(--yl-silver-light); font-weight: 500 }
.ld-pos-row em{
  font-style: normal;
  color: var(--yl-copper-light);
  font-variant-numeric: tabular-nums;
}

/* === Demo 2 · Agente WhatsApp chat === */
.ld-stage-chat{
  flex: 1;
  position: relative;
  background: var(--yl-ink-mid);
  border-radius: 10px;
  border: 1px solid var(--yl-silver-line);
  padding: 14px;
  display:flex;flex-direction:column;gap:10px;
  overflow: hidden;
}
.ld-chat-row{
  display: flex;
  max-width: 80%;
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference){
  .ld-chat-row{
    opacity: 0;
    animation: chatPop 7s ease-out infinite;
  }
  .ld-chat-row.in{ animation-delay: 0s }
  .ld-chat-row.bot{ animation-delay: 1.6s }
  .ld-chat-row.in2{ animation-delay: 3.2s }
  .ld-chat-row.bot2{ animation-delay: 4.8s }
}
.ld-chat-row.in{ align-self: flex-start }
.ld-chat-row.bot{ align-self: flex-end }
.ld-chat-row.in2{ align-self: flex-start }
.ld-chat-row.bot2{ align-self: flex-end }

.ld-chat-bubble{
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.4;
  font-family: var(--ff-body);
}
.ld-chat-row.in .ld-chat-bubble,
.ld-chat-row.in2 .ld-chat-bubble{
  background: rgba(199,205,212,.08);
  color: var(--yl-silver-light);
  border-bottom-left-radius: 4px;
}
.ld-chat-row.bot .ld-chat-bubble,
.ld-chat-row.bot2 .ld-chat-bubble{
  background: rgba(201,147,120,.18);
  color: var(--yl-silver-light);
  border: 1px solid rgba(201,147,120,.32);
  border-bottom-right-radius: 4px;
}
@keyframes chatPop{
  0%   { opacity: 0; transform: translateY(8px) scale(.96) }
  4%   { opacity: 1; transform: translateY(0) scale(1) }
  85%  { opacity: 1 }
  100% { opacity: 0 }
}

/* === Demo 3 · Panel desktop + mobile · mockup dual === */
.ld-stage-dual{
  flex: 1;
  position: relative;
  display: grid;
  grid-template-columns: 1.6fr .8fr;
  gap: 12px;
  align-items: center;
}
.ld-frame-desk{
  background: var(--yl-ink-mid);
  border-radius: 8px;
  border: 1px solid var(--yl-silver-line);
  padding: 10px 8px 8px;
  font-family: var(--ff-mono);
  font-size: 9px;
  position: relative;
  overflow: hidden;
}
.ld-frame-desk::before{
  content: '● ● ●';
  letter-spacing: 4px;
  color: rgba(199,205,212,.3);
  font-size: 8px;
  display: block;
  margin-bottom: 8px;
}
.ld-frame-desk .bar{
  height: 14px;
  background: rgba(199,205,212,.05);
  border-radius: 3px;
  margin-bottom: 5px;
  position: relative;
  overflow: hidden;
}
.ld-frame-desk .bar::after{
  content:'';position:absolute;inset:0;
  background: linear-gradient(90deg, transparent, rgba(201,147,120,.4), transparent);
  transform: translateX(-100%);
}
@media (prefers-reduced-motion: no-preference){
  .ld-frame-desk .bar::after{
    animation: barSweep 3s ease-in-out infinite;
  }
  .ld-frame-desk .bar:nth-child(2)::after{ animation-delay: .3s }
  .ld-frame-desk .bar:nth-child(3)::after{ animation-delay: .6s }
  .ld-frame-desk .bar:nth-child(4)::after{ animation-delay: .9s }
}
@keyframes barSweep{
  0%   { transform: translateX(-100%) }
  100% { transform: translateX(200%) }
}
.ld-frame-mob{
  background: var(--yl-ink-mid);
  border-radius: 14px;
  border: 1px solid var(--yl-silver-line);
  padding: 14px 8px;
  aspect-ratio: 9/16;
  font-family: var(--ff-mono);
  font-size: 7.5px;
  position: relative;
  overflow: hidden;
}
.ld-frame-mob::before{
  content:'';
  position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width: 26px; height: 3px;
  background: rgba(199,205,212,.18);
  border-radius: 2px;
}
.ld-frame-mob .mob-bar{
  height: 8px;
  background: rgba(199,205,212,.05);
  border-radius: 2px;
  margin-bottom: 4px;
  margin-top: 8px;
}
.ld-frame-mob .mob-bar.lit{
  background: rgba(201,147,120,.22);
  border: 1px solid rgba(201,147,120,.35);
}

/* -----------------------------------------------------------------
   06 · FIX HOME · 4 bugs reportados 2026-05-27
   ----------------------------------------------------------------- */

/* 06a · SHOOTING STARS · atenuar drasticamente (creaban "rayo de luz")
   Estaban a opacity:1 con animation 14s/18s rotate(20deg) · ahora MUY sutil */
.shoot,
.shoot.b{
  display: none !important;
}

/* 06b · DOBLE BOTÓN HABLEMOS · esconder wp-fab en desktop (queda solo nav-cta)
   En mobile el nav-cta queda en el hamburger · entonces wp-fab se muestra */
@media (min-width: 880px){
  .wp-fab,
  .floating-wa{
    display: none !important;
  }
}

/* 06c · PROCESS TIMELINE · CSS faltante en home (vivía solo en yusta.css)
   Migrado y adaptado a los tokens V7 Silver Premium */
.process{
  padding: clamp(96px, 13vw, 200px) 0;
  position: relative;
  isolation: isolate;
}
.process .kicker-row{
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 24px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--yl-silver-dim);
}
.process .kicker-row .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--yl-copper-light);
  box-shadow: 0 0 8px rgba(201,147,120,.55);
  flex-shrink: 0;
}
.process .kicker-row .spacer{
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--yl-silver-line), transparent);
}
.process .kicker-row .idx{ color: var(--yl-silver-mirror) }

.process-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 56px;
}
/* línea horizontal base que conecta los 4 nodos */
.process-timeline-line {
  position: absolute;
  top: 76px;
  left: 12.5%; right: 12.5%;
  height: 1px;
  background: var(--yl-silver-line);
}
.process-timeline-line-fill {
  position: absolute;
  top: 76px;
  left: 12.5%;
  height: 1px;
  width: 75%;
  background: linear-gradient(90deg, var(--yl-copper-rim), transparent);
  box-shadow: 0 0 12px rgba(159, 228, 238,.4);
}

.ptl-step {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 0 8px;
}
.ptl-node {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--yl-ink-mid);
  border: 1px solid var(--yl-silver-line);
  display: grid; place-items: center;
  margin-bottom: 32px;
  position: relative;
  z-index: 2;
  transition: all 600ms cubic-bezier(0.22,1,0.36,1);
}
.ptl-node-inner {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--yl-silver-mirror);
  letter-spacing: 0.04em;
  transition: color 400ms;
}
.ptl-step:hover .ptl-node {
  border-color: var(--yl-copper-rim);
  box-shadow: 0 0 0 6px rgba(159, 228, 238,.08), 0 0 24px rgba(159, 228, 238,.25);
}
.ptl-step:hover .ptl-node-inner {
  color: var(--yl-copper-light);
}
.ptl-body { max-width: 260px; }
.ptl-meta {
  font-size: 10.5px;
  font-family: var(--ff-mono);
  letter-spacing: 0.14em;
  color: var(--yl-copper-light);
  text-transform: uppercase;
  margin-bottom: 12px;
  opacity: 0.85;
}
.ptl-title {
  font-family: var(--ff-display);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 600;
  color: var(--yl-silver-light);
  line-height: 1.15;
  margin-bottom: 10px;
  letter-spacing: -.02em;
}
.ptl-desc {
  font-size: 13.5px;
  color: var(--yl-silver-mirror);
  line-height: 1.55;
}

/* Mobile · stack vertical con línea izquierda */
@media (max-width: 900px) {
  .process-timeline {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-left: 60px;
  }
  .process-timeline-line {
    top: 0; bottom: 0; left: 80px; right: auto;
    width: 1px; height: auto;
  }
  .process-timeline-line-fill {
    top: 0; left: 80px; bottom: 0;
    width: 1px; height: 75%;
  }
  .ptl-step {
    flex-direction: row; align-items: flex-start; gap: 24px;
    text-align: left;
    padding: 0;
  }
  .ptl-node { margin-bottom: 0; margin-left: -40px; flex-shrink: 0; }
  .ptl-body { max-width: 100%; }
}

/* 06c-bis · REVEAL FALLBACK · 2026-05-28
   El IntersectionObserver inline del JS no dispara (verificado con Chrome MCP:
   35 .reveal elements, 0 con clase .in después de scroll). Eso deja la mitad
   del contenido invisible cuando hacés zoom-out o cargás la home.
   Fix: animación CSS que después de 2.5s muestra cualquier .reveal aunque el
   observer falle. Si el observer dispara antes (clase .in), respeta su timing. */
.reveal{
  animation: revealAutoFallback 0.9s cubic-bezier(0.4, 0, 0.2, 1) 2.5s forwards;
}
.reveal.in{
  animation: none;
  opacity: 1;
  transform: translateY(0);
}
@keyframes revealAutoFallback{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}
/* Respect prefers-reduced-motion · mostrar todo al instante */
@media (prefers-reduced-motion: reduce){
  .reveal{
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* 06d · FOOTER LOGO · el div.mk default es un cuadrado plateado simple.
   Sobrescribir para mostrar el YL mark real (oficial · transparente · plateado) */
.foot-brand .mark .mk{
  width: 36px; height: 36px;
  border-radius: 9px;
  background:
    url('/assets/brand/yl-mark-official.svg') center / 72% no-repeat,
    linear-gradient(140deg, rgba(199,205,212,.06) 0%, rgba(159, 228, 238,.04) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(159, 228, 238,.22),
    0 4px 16px -4px rgba(0,0,0,.5) !important;
}
/* Mismo upgrade para el nav-brand mk · que se vea el YL real arriba */
.nav-brand .mk{
  background:
    url('/assets/brand/yl-mark-official.svg') center / 75% no-repeat,
    linear-gradient(140deg, rgba(199,205,212,.06), rgba(159, 228, 238,.03)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(159, 228, 238,.3) !important;
}

/* 06e · ELIMINAR TODAS las capas de luz del hero que creaban la "barra de luz"
   diagonal · queda solo nebulosa + estrellas + logo cromado giratorio.
   Incluye .mark-art .scan que es el "laser sweep" del logo · su mix-blend-mode
   screen + width 454px proyectaba la diagonal plateada sobre el texto del hero */
.atmos-beam,
.god-rays,
.lights,
.shoot,
.shoot.b,
.floor-grid,
.constellation,
.horizon,
.mark-art .scan{
  display: none !important;
}
/* Atenuar las colas plateadas de los satélites del logo (eran 60-70px lines
   que cuando rotaban se veían como rayos diagonales · cobre lleva) */
.sat::before{
  opacity: .35 !important;
  width: 30px !important;
}
.sat-orbit.middle .sat::before{
  width: 22px !important;
}
.sat-orbit.inner .sat::before{
  width: 28px !important;
}

/* 06f · FOOTER + NAV LOGO · bump tamaño del YL para que se vea bien */
.foot-brand .mark .mk{
  background-size: 80% !important;
}
.nav-brand .mk{
  background-size: 82% !important;
}

/* -----------------------------------------------------------------
   07 · Respeto prefers-reduced-motion en todos los efectos animados
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .data-flow .pulse,
  .data-flow .node,
  .sistema-card::after, .caso-card::after,
  .sistema-card.tilt-entered, .caso-card.tilt-entered{
    animation: none !important;
    transition: none !important;
  }
  .hero-mark{ transform: none !important }
}