/* ============================================================
   Dashcrab Landing GEO — "AI Visibility" 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 visibilidad por motor ----------
   Reusa .stage/.scene/.src/.src-in/@flotar de landingv3. Cada satélite
   es una mini-card con el logo original del motor (S3), su score de
   visibilidad y el estado de cita. El panel central es el consolidado. */
.src-dot {
  width: 18px; height: 18px;
  border-radius: 6px;
  display: block; flex: none;
}

/* La mini-card pisa el layout pill de .src-in: sin borde (la separacion
   la hace la superficie, como el resto del sistema) y con una barrita de
   score para leer la visibilidad de un vistazo. */
.src-in.eng {
  display: grid;
  gap: 8px;
  padding: 15px 17px;
  border-radius: 16px;
  border: 0;
  white-space: nowrap;
}
.eng-head { display: flex; align-items: center; gap: 8px; }
.eng-name { font-size: 10px; line-height: 1; color: var(--color-slate); }
.eng-v {
  font-family: var(--font-cond);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-carbon-black);
}
.eng-v span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: -0.02em;
  color: var(--color-slate);
  margin-left: 3px;
}
.eng-track {
  display: block;
  width: 128px;
  height: 5px;
  border-radius: var(--radius-tags);
  background: var(--color-mist-gray);
  overflow: hidden;
}
.eng-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-mint-chip);
}
.eng-track i.miss { background: var(--color-smoke); }
.eng-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: -0.02em;
  color: var(--color-slate);
}
.eng-sub.hit { color: var(--color-mint-chip); }

.g1 { top:  -4%; left: -10%; --tz: -100px; transform: translate3d(0,0,var(--tz)) rotateY(16deg); }
.g2 { top:   0%; right: -9%; --tz:  -85px; transform: translate3d(0,0,var(--tz)) rotateY(-14deg); }
.g3 { top:  52%; left: -17%; --tz: -125px; transform: translate3d(0,0,var(--tz)) rotateY(18deg); }
.g4 { bottom: 6%; right: -11%; --tz: -105px; transform: translate3d(0,0,var(--tz)) rotateY(-16deg); }
.g5 { bottom: -8%; left:   6%; --tz: -135px; transform: translate3d(0,0,var(--tz)) rotateY(12deg); }
.g6 { top:  -9%; left:  44%; --tz: -150px; transform: translate3d(0,0,var(--tz)) rotateY(8deg); }
.g1 .src-in { animation-duration: 6.4s; animation-delay: -0.2s; }
.g2 .src-in { animation-duration: 7.8s; animation-delay: -1.6s; }
.g3 .src-in { animation-duration: 5.9s; animation-delay: -3.1s; }
.g4 .src-in { animation-duration: 8.2s; animation-delay: -0.9s; }
.g5 .src-in { animation-duration: 6.9s; animation-delay: -2.4s; }
.g6 .src-in { animation-duration: 7.3s; animation-delay: -4.0s; }
@media (max-width: 1024px) {
  .src-in.eng { padding: 11px 12px; gap: 6px; }
  .eng-v { font-size: 23px; }
}
@media (max-width: 720px) {
  .g3, .g6 { display: none; }
  /* Sin offset negativo en angosto: la card se escapaba del viewport. */
  .g1 { left: -2%; }
  .g2 { right: 0; }
  .g4 { right: 0; }
}

/* El panel del hero muestra el score: numerito /100 en gris.
   Un poco mas angosto que en v3 para que las mini-cards satelite
   no queden cortadas a medias contra su borde. */
.panel { width: 64%; }
.p-kpi .p-de { font-size: .4em; color: var(--color-smoke); letter-spacing: 0; }

/* SoV y calidad de asiento dentro del panel consolidado */
.p-meta {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--color-paper-white) 15%, transparent);
  display: grid;
  gap: 11px;
}
.p-meta-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  /* Labels casi blancos: smoke sobre carbon quedaba corto de contraste. */
  color: color-mix(in srgb, var(--color-paper-white) 80%, transparent);
}
.p-meta-row.p-meta-flat { grid-template-columns: minmax(0, 1fr) auto; }
.p-meta-row .ws-track {
  height: 8px;
  background: color-mix(in srgb, var(--color-paper-white) 22%, transparent);
}
.p-meta-row b {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-paper-white);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: -0.01em;
}

/* ---------- Sección Score: cards con mini-vizs ---------- */
.score-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-24); }
.score-card { display: flex; flex-direction: column; gap: var(--spacing-16); min-height: 300px; }
.score-card .num { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-smoke); }
.score-card .body { margin-top: auto; }

/* Filas por modelo: dot de estado + nombre + resultado */
.sc-models { display: grid; }
.sc-model {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--color-ash);
  font-size: 13px;
  font-weight: 500;
}
.sc-model i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-mint-chip); }
.sc-model i.miss { background: var(--color-ash); }
.sc-model .r { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: -0.02em; color: var(--color-slate); }
.sc-model .r.hit { color: var(--color-mint-chip); }

/* Numero grande de card (Anton, como manda el sistema) */
.sc-big {
  font-family: var(--font-cond);
  font-size: 56px;
  line-height: .95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
}
.sc-big span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: -0.02em;
  color: var(--color-smoke);
  margin-left: 8px;
}

/* Donut de SoV sobre card blanca (reusa .ws-donut de landingv3,
   con paleta de superficie clara y agujero blanco) */
.score-card .ws-donut {
  background: conic-gradient(
    var(--color-mint-chip) 0 calc(var(--a) * 1%),
    var(--color-carbon-black) 0 calc(var(--b) * 1%),
    var(--color-smoke) 0 calc(var(--c) * 1%),
    var(--color-ash) 0
  );
}
.score-card .ws-donut::after { background: var(--color-paper-white); }
.score-card .ws-donut span { color: var(--color-smoke); }
.score-card .ws-donut span b { color: var(--color-carbon-black); }
.score-card .ws-leg { color: var(--color-slate); }

/* Track de cobertura sobre card blanca */
.score-card .ws-track { background: var(--color-mist-gray); }

/* ---------- Prompt Tracking: lista de prompts con estado por motor ---------- */
.pt-card { padding: var(--spacing-24); }
.pt-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-smoke);
  padding-bottom: 12px;
}
.pt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--color-ash);
}
.pt-row .q { font-size: 13px; line-height: 1.4; font-weight: 500; margin: 0; }
.pt-dots { display: flex; gap: 6px; flex: none; }
.pt-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-mint-chip); display: block; }
.pt-dots i.miss { background: var(--color-ash); }
.pt-foot { margin-top: 14px; color: var(--color-smoke); }

/* ---------- CTA con precio (arc card, como el GEO block de v3) ---------- */
.geo-price-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.geo-price-line .p {
  font-family: var(--font-cond);
  font-size: 56px;
  line-height: .95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.geo-price-line .mono { color: var(--color-smoke); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .score-grid { grid-template-columns: minmax(0, 1fr); }
  .score-card { min-height: 0; }
}