/* ============================================================
   Dashcrab Landing Agencias — "multi cliente" 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.
   ============================================================ */

/* ---------- Hero: mini-cards de cliente ----------
   Reusa .stage/.scene/.src/.src-in/@flotar de landingv3. Cada satélite
   es un cliente del portafolio con su barra de pacing y su ROAS; el
   panel central es el consolidado de la agencia. Mismo recurso que las
   mini-cards de motor de landing-geo. */
.src-in.cli {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 0;
  white-space: nowrap;
}
.cli-head { display: flex; align-items: center; gap: 8px; }
.cli-head i { width: 8px; height: 8px; border-radius: 50%; display: block; flex: none; }
.cli-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1;
}
.src-in.cli .ws-track { display: block; width: 132px; height: 5px; background: var(--color-mist-gray); }
.cli-foot {
  font-size: 10px;
  line-height: 1;
  color: var(--color-slate);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.cli-foot b { color: var(--color-carbon-black); font-weight: 400; }

/* ---------- Persona del hero ----------
   Recorte real de la directora dentro de la escena 3D: ella presenta el
   panel con la palma extendida. Vive en la escena con su propio translateZ
   para que el tilt del puntero le de parallax: las cards de cliente quedan
   detras (tz mas negativos) y el panel se adelanta por encima. El mask
   disuelve el corte inferior de la foto antes de que se vea el borde. */
.hero-person {
  position: absolute;
  left: -5%;
  bottom: -6%;
  width: 66%;
  transform: translateZ(-15px);
  /* 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;
}

/* Cards de cliente alrededor de la persona: arriba y a su izquierda, en
   profundidades detras del recorte para que la silueta las ocluya y se
   lea el sandwich de capas. El panel va adelante, sobre su palma. */
.a1 { top:  -7%; left:  26%; --tz: -110px; transform: translate3d(0,0,var(--tz)) rotateY(8deg); }
.a2 { top:   2%; right: -6%; --tz:  -60px; transform: translate3d(0,0,var(--tz)) rotateY(-14deg); }
.a3 { top:  34%; left: -14%; --tz:  -95px; transform: translate3d(0,0,var(--tz)) rotateY(18deg); }
.a4 { bottom: -8%; right: 6%; --tz:  -60px; transform: translate3d(0,0,var(--tz)) rotateY(-10deg); }
.a5 { bottom: -2%; left: -10%; --tz: -70px; transform: translate3d(0,0,var(--tz)) rotateY(12deg); }
.a6 { top:  26%; right:  2%; --tz: -130px; transform: translate3d(0,0,var(--tz)) rotateY(-8deg); }
.a1 .src-in { animation-duration: 6.4s; animation-delay: -0.2s; }
.a2 .src-in { animation-duration: 7.8s; animation-delay: -1.6s; }
.a3 .src-in { animation-duration: 5.9s; animation-delay: -3.1s; }
.a4 .src-in { animation-duration: 8.2s; animation-delay: -0.9s; }
.a5 .src-in { animation-duration: 6.9s; animation-delay: -2.4s; }
.a6 .src-in { animation-duration: 7.3s; animation-delay: -4.0s; }

/* El panel deja el centro y se apoya sobre la palma extendida de la
   directora, adelantado en Z para pisar el recorte y tapar el corte
   inferior de la foto. El hover conserva el gesto de acercarse. */
.panel { width: 50%; top: 40%; left: 76%; 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) {
  .src-in.cli { padding: 11px 12px; gap: 6px; }
  .src-in.cli .ws-track { width: 104px; }
}
@media (max-width: 720px) {
  /* En angosto la escena va plana: quedan dos cards escalonadas arriba,
     la persona y el panel. Mas ancho el panel para que sus filas no
     envuelvan (envueltas lo estiraban hasta pisar la tira de abajo). */
  .a3, .a4, .a5, .a6 { display: none; }
  .a1 { left: 4%; top: -8%; }
  .a2 { right: -2%; top: 14%; }
  .hero-person { left: -6%; width: 66%; }
  .panel { left: 62%; width: 66%; top: 34%; }
}

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

.ws-scrolly[data-active="alta"]    #view-alta .ws-piece,
.ws-scrolly[data-active="pacing"]  #view-pacing .ws-piece,
.ws-scrolly[data-active="reporte"] #view-reporte .ws-piece {
  opacity: 1;
  transform: translate3d(0, 0, var(--pz, 0px)) rotateY(var(--pr, 0deg));
  transition-delay: var(--d, 0s);
}
.ws-scrolly[data-active="alta"]    #view-alta .ws-sat,
.ws-scrolly[data-active="pacing"]  #view-pacing .ws-sat,
.ws-scrolly[data-active="reporte"] #view-reporte .ws-sat {
  opacity: 1;
  transition-delay: var(--d, 0s);
}
.ws-scrolly[data-active="alta"]    .ws-legend [data-role="alta"],
.ws-scrolly[data-active="pacing"]  .ws-legend [data-role="pacing"],
.ws-scrolly[data-active="reporte"] .ws-legend [data-role="reporte"] { 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. */
.al-conn   { top:  0;    left: 0;    width: 56%; }
.al-cli    { top:  38%;  right: 0;   width: 50%; }
.al-team   { bottom: 3%; left: 6%;   width: 54%; }
.pa-total  { top:  2%;   left: 0;    width: 48%; }
.pa-cli    { top:  27%;  right: 0;   width: 62%; }
.pa-alert  { bottom: 5%; left: 6%;   width: 60%; }
.re-doc    { top:  0;    left: 0;    width: 58%; }
.re-share  { top:  40%;  right: 0;   width: 52%; }
.re-mini   { bottom: 2%; left: 10%;  width: 38%; }

/* En este capitulo el satelite de landingv3 (abajo a la izquierda) cae
   justo sobre el numero grande de .re-mini y lo tapa. Se va al hueco de
   arriba a la derecha, que en esta vista queda libre. */
#view-reporte .ws-sat-c1 {
  top: 6%; right: -2%;
  bottom: auto; left: auto;
}

/* 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="alta"]    { order: 1; }
  #view-alta                    { order: 2; }
  .ws-step[data-role="pacing"]  { order: 3; }
  #view-pacing                  { order: 4; }
  .ws-step[data-role="reporte"] { order: 5; }
  #view-reporte                 { order: 6; }
}

/* 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="alta"]    .ws-scene,
  .ws-scrolly[data-active="pacing"]  .ws-scene,
  .ws-scrolly[data-active="reporte"] .ws-scene { --rx: 0deg; --ry: 0deg; transition: none; }
}

/* ---------- Piezas propias ---------- */

/* Alta: filas de integracion conectada. */
.ag-conn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--color-ash);
  font-size: 12px;
  font-weight: 500;
}
.ag-conn span { display: flex; align-items: center; gap: 8px; }
.ag-conn i { width: 8px; height: 8px; border-radius: 50%; display: block; flex: none; background: var(--color-mint-chip); }
.ag-conn i.run { background: var(--color-smoke); }
.ag-conn b {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-mint-chip);
}
.ag-conn b.run { color: var(--color-smoke); }

/* Pacing: la alerta reusa el vocabulario de .ne-prompt de landingv3. */
.pa-alert .q { font-size: 13px; line-height: 1.4; font-weight: 500; margin: 0 0 12px; }
.pa-alert .meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pa-alert .geo-src { color: var(--color-slate); }

/* Reporte: cabecera con la marca de la agencia. */
.ag-rep-brand { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--color-ash); }
.ag-rep-brand .mono { font-size: 10px; color: var(--color-smoke); }
.ag-rep-logo {
  width: 24px; height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--color-mint-chip);
  color: var(--color-paper-white);
  font-family: var(--font-cond);
  font-size: 15px;
  line-height: 1;
}
.ag-link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.02em;
  color: var(--color-paper-white);
  margin: 0 0 12px;
  word-break: break-all;
}
.ag-share-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Reportes: 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; }

/* ---------- Hero a prueba de fold ----------
   Mismo bloque 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; }
}