/* ============================================================
   Dashcrab Landing Negocios — "un solo panel" en el sistema de landingv3
   Esta hoja NO redefine tokens: importa /landingv3/landingv3.css antes
   (nav, botones, cards, hero 3D, reveal, footer) y acá viven solo los
   componentes propios de esta página. Mismo espíritu plano: sin sombras,
   sin gradientes, profundidad por superficie y radio.

   Nota de claims: esta página no promete atribución cruzada. Lo que se
   vende es el panel unificado, el pacing con alertas, el orgánico y la
   Visibilidad AI, que es lo que el producto hace hoy.
   ============================================================ */

/* ---------- Hero ----------
   Reusa .stage/.scene/.src/.src-in/@flotar de landingv3, pero la escena
   ya no es solo el anillo: el dueño del negocio (recorte real) mira su
   telefono a la derecha, los chips de integraciones orbitan detras de el
   y el panel se adelanta abajo a la izquierda. Dos pins de dato cuelgan
   del telefono, adelantados en Z. */
.hero-person {
  position: absolute;
  right: -6%;
  bottom: -6%;
  width: 64%;
  transform: translateZ(-12px);
  /* Ojo: nada de mask-image aca. Dentro del preserve-3d de la escena,
     Chrome pinta las capas con mask de forma inestable (a veces no las
     pinta). El degrade que disuelve el corte inferior de la foto va
     horneado en el alpha del webp. */
}
.hero-person img {
  display: block;
  width: 100%;
  height: auto;
}

/* Los chips de la columna derecha del anillo de landingv3 caerian encima
   del recorte; se reparten al borde derecho (asomando detras del hombro)
   y al espacio libre de arriba a la izquierda. */
.s1  { top:  -3%; left:  6%; }
.s3  { top:  13%; left: -3%; }
.s5  { top:  31%; left:  6%; }
.s7  { top:   8%; left: 46%; --tz: -95px; }
.s9  { top:  -6%; left: 32%; --tz: -55px; }
.s2  { top:   2%; right: 1%; --tz: -60px; }
.s4  { top:  24%; right: -6%; --tz: -80px; }
.s6  { top:  47%; right: -7%; --tz: -65px; }
.s8  { top:  16%; left: 24%; --tz: -70px; bottom: auto; }
.s10 { top:  30%; left: 13%; --tz: -90px; bottom: auto; right: auto; }

/* Pins de dato: el pacing y la alerta que el dueño esta mirando, en el
   carril libre entre el panel y el recorte (nunca sobre la persona); la
   alerta pisa el borde del panel, adelantada en Z. Invierte a carbon,
   que es el feedback firma del sistema. */
.pin { position: absolute; transform-style: preserve-3d; }
.pin-in {
  display: block;
  background: var(--color-paper-white);
  border: 1px solid var(--color-ash);
  border-radius: 14px;
  padding: 11px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  animation: flotar 7s ease-in-out infinite alternate;
}
.pin-pacing { top: 30%; left: 30%; transform: translate3d(0,0,26px) rotateY(4deg); }
.pin-pacing .pin-in { animation-duration: 7.6s; animation-delay: -1.2s; }
.pin-alerta { top: 56%; left: -20%; transform: translate3d(0,0,38px) rotateY(4deg); }
.pin-alerta .pin-in {
  background: var(--color-carbon-black);
  color: var(--color-paper-white);
  /* Hairline claro: la mitad del chip pisa el panel, que tambien es
     carbon, y sin borde desaparecia dark sobre dark. */
  border-color: color-mix(in srgb, var(--color-paper-white) 30%, transparent);
  animation-duration: 6.6s;
  animation-delay: -3.0s;
}

@media (prefers-reduced-motion: reduce) {
  .pin-in { animation: none; }
}

/* El panel pierde el centro y se apoya abajo a la izquierda, adelantado
   para pisar el borde inferior del recorte. */
.panel { width: 54%; top: 42%; left: 30%; transform: translate3d(-50%, 0, 30px); }
.stage:hover .panel,
.stage:focus-within .panel,
.stage.is-hover .panel { transform: translate3d(-50%, 0, 56px); }
.p-kpi span { letter-spacing: -0.02em; }

@media (max-width: 1024px) {
  /* Con el hero en una columna el stage va centrado: el offset grande de
     la alerta se escaparia del viewport. */
  .pin-alerta { left: -8%; }
}
@media (max-width: 720px) {
  /* En angosto la escena va plana: se despejan los chips que compiten
     con el recorte, el panel se pega al borde izquierdo y queda un solo
     pin (la alerta), que es el que ancla en el telefono. */
  .s8, .s9, .s10 { display: none; }
  .s7 { top: 12%; left: 30%; }
  .hero-person { right: -8%; width: 64%; }
  .panel { left: 32%; width: 58%; top: 46%; }
  .pin-pacing { display: none; }
  /* Sobre la franja del spark, que es la unica zona del panel que la
     alerta puede pisar sin tapar un dato. */
  .pin-alerta { top: 75%; left: -6%; }
}

/* ---------- Decisiones: scrollytelling ----------
   Reusa por completo .ws-scrolly/.ws-step/.ws-stage/.ws-piece de
   landingv3. Lo unico propio son las tres claves de capitulo (canal,
   frenar, palanca) y la composicion de cada vista. */
.ws-scrolly[data-active="canal"]   .ws-scene { --rx: 7deg; --ry: -12deg; }
.ws-scrolly[data-active="frenar"]  .ws-scene { --rx: 5deg; --ry: -2deg; }
.ws-scrolly[data-active="palanca"] .ws-scene { --rx: 6deg; --ry: 10deg; }

.ws-scrolly[data-active="canal"]   #view-canal .ws-piece,
.ws-scrolly[data-active="frenar"]  #view-frenar .ws-piece,
.ws-scrolly[data-active="palanca"] #view-palanca .ws-piece {
  opacity: 1;
  transform: translate3d(0, 0, var(--pz, 0px)) rotateY(var(--pr, 0deg));
  transition-delay: var(--d, 0s);
}
.ws-scrolly[data-active="canal"]   #view-canal .ws-sat,
.ws-scrolly[data-active="frenar"]  #view-frenar .ws-sat,
.ws-scrolly[data-active="palanca"] #view-palanca .ws-sat {
  opacity: 1;
  transition-delay: var(--d, 0s);
}
.ws-scrolly[data-active="canal"]   .ws-legend [data-role="canal"],
.ws-scrolly[data-active="frenar"]  .ws-legend [data-role="frenar"],
.ws-scrolly[data-active="palanca"] .ws-legend [data-role="palanca"] { color: var(--color-carbon-black); }

/* Composicion por vista: el z y el giro finales viajan en --pz/--pr
   inline junto con el delay de cascada --d. */
.ca-funnel   { top:  0;    left: 0;   width: 55%; }
.ca-mix      { top:  34%;  right: 0;  width: 54%; }
.ca-mini     { bottom: 2%; left: 6%;  width: 40%; }
.fr-pacing   { top:  2%;   left: 0;   width: 62%; }
.fr-alert    { top:  42%;  right: 0;  width: 54%; }
.fr-mini     { bottom: 2%; left: 8%;  width: 36%; }
.pl-sov      { top:  0;    right: 0;  width: 56%; }
.pl-overlap  { top:  40%;  left: 0;   width: 58%; }
.pl-prompt   { bottom: 2%; right: 4%; width: 58%; }

/* Reduced motion: la regla de landingv3 (.ws-scrolly .ws-scene) pierde
   contra las poses por capitulo de arriba, que llevan un atributo mas de
   especificidad. Se neutralizan con el mismo peso. El swap de capitulos
   se conserva: es cambio de estado, no movimiento. */
@media (prefers-reduced-motion: reduce) {
  .ws-scrolly[data-active="canal"]   .ws-scene,
  .ws-scrolly[data-active="frenar"]  .ws-scene,
  .ws-scrolly[data-active="palanca"] .ws-scene { --rx: 0deg; --ry: 0deg; transition: none; }
}

/* Fallback ≤1024px: landingv3 disuelve los wrappers con display: contents
   y intercala texto → panel por order, pero sus reglas apuntan a las claves
   agencia/negocio/creator. Acá van las de esta página. */
@media (max-width: 1024px) {
  .ws-step[data-role="canal"]   { order: 1; }
  #view-canal                   { order: 2; }
  .ws-step[data-role="frenar"]  { order: 3; }
  #view-frenar                  { order: 4; }
  .ws-step[data-role="palanca"] { order: 5; }
  #view-palanca                 { order: 6; }
}

/* ---------- Piezas propias ----------
   La alerta y el prompt reusan el vocabulario de .ne-prompt de landingv3,
   con su propio nombre porque viven en dos superficies distintas (una
   pieza oscura y una clara). */
.bu-q { font-size: 13px; line-height: 1.4; font-weight: 500; margin: 0 0 12px; }
.bu-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wsp-light .bu-q { color: var(--color-carbon-black); }
.wsp-light .bu-meta .geo-src { color: var(--color-slate); }
.wsp-dark .bu-q { color: var(--color-paper-white); }

/* .geo-miss de landingv3 esta pensado para superficie oscura (grafito
   sobre carbon). Sobre una pieza blanca se lee como un bloque pesado,
   asi que sobre claro pasa a ser una pastilla apagada. */
.wsp-light .geo-miss { background: var(--color-mist-gray); color: var(--color-slate); }

/* La celda de Visibilidad AI del board usa las barras en gris para que
   los competidores no compitan en color con tu marca. */
.sol-bars .ws-track i.dim { background: var(--color-smoke); }

/* ---------- SEO y orgánico: numeracion de las cards ---------- */
.num-k { color: var(--color-smoke); margin: 0 0 var(--spacing-16); }

/* ---------- Cross sell: la card entera es el link ---------- */
.cross-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-height: 220px;
  transition: background .25s ease;
}
.cross-card:hover { background: var(--color-mist-gray); }
.cross-go { color: var(--color-mint-chip); margin-top: auto; }

/* ---------- Precios: dos planes, no tres ----------
   .grid-2 ya viene de landingv3; solo hay que acotar el ancho para que
   dos price-card no se estiren a lo largo de todo el contenedor. Va
   scopeado a #precios: el cross sell tambien es un .grid-2 y ese si
   ocupa todo el ancho. */
#precios .grid-2 { max-width: 860px; }

/* ---------- Hero a prueba de fold ----------
   Mismo criterio que landingv3: en notebooks de poca altura el hero
   completo tiene que quedar arriba del fold. */
@media (min-width: 721px) and (max-height: 940px) {
  .hero-copy .lead { font-size: 18px; }
}