/* ============================================================
   Dashcrab Landing v3 — "Brutalist editorial showroom on warm gray"
   Tokens y reglas tomadas de DESIGN.md. Sistema explícitamente plano:
   sin sombras, sin gradientes. La profundidad viene del contraste de
   superficie (canvas gris → tarjeta blanca → bloque negro) y del radio.
   ============================================================ */

:root {
  /* Colors — remapeados al design system de Dashcrab (frontend/src/styles/globals.css).
     Se conservan los nombres de token de DESIGN.md para no tocar el resto de la
     hoja: solo cambian los valores. Rol original → token del DS:
       carbon-black  → --color-text            tinta y superficie invertida
       paper-white   → --color-surface         tarjetas
       warm-canvas   → --color-bg              fondo de pagina
       mist-gray     → --color-primary-light   superficie sutil con tinte de marca
       ash           → --color-border          hairlines
       smoke         → --color-text-muted      texto terciario
       slate         → --color-text-secondary  cuerpo secundario
       mint-chip     → --color-primary         el acento pasa de menta a violeta
       voltage-yellow→ --color-warning-bg      resaltado de email */
  --color-carbon-black: #1A1A2E;
  --color-paper-white: #FFFFFF;
  --color-warm-canvas: #FAF7F4;
  --color-mist-gray: #F5F3FF;
  --color-ash: #E8E4F0;
  --color-smoke: #9B9BB4;
  --color-slate: #6B6B8A;
  --color-graphite: color-mix(in srgb, #1A1A2E 92%, #FFFFFF);
  --color-mint-chip: #7B53EA;
  --color-voltage-yellow: #FEF3C7;

  /* Typography — families (substitutes per DESIGN.md) */
  --font-cond: 'Anton', 'Barlow Condensed', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — scale */
  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --text-subheading: 18px;
  --text-subheading-lg: 20px;
  --text-heading-sm: 28px;
  --text-heading: 40px;
  --text-heading-lg: 48px;
  --text-display: 80px;
  --text-display-xl: 130px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px;

  /* Radius */
  --radius-buttons: 8px;
  --radius-cards: 32px;
  --radius-large-cards: 64px;
  --radius-nav-pill: 48px;
  --radius-tags: 64px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-warm-canvas);
  color: var(--color-carbon-black);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.25;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Tipografía base ---------- */
.display,
.display-xl,
.heading-lg {
  font-family: var(--font-cond);
  font-weight: 400; /* Anton solo tiene 400; pesa como un 700 condensado */
  text-transform: uppercase;
  /* 0.95 es el techo que fija DESIGN.md. En castellano hace falta ese margen:
     con 0.9 las tildes de las mayusculas (EMPEZA, TENES) chocan con la linea
     de arriba y se leen como un punto suelto. */
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0;
}
/* El 11vh acota el titulo tambien por altura: en pantallas cortas (notebooks
   768/900px) el hero completo (titulo + lead + CTAs) tiene que entrar en la
   primera pantalla, y 9vw solo escala con el ancho.
   El tercer techo, --h1-fit, lo acota por ANCHO DE COLUMNA: ver "Hero a
   prueba de fold" al final de esta hoja. */
.display-xl {
  /* Techo por ventana: 9vw escala con el ancho, 11vh con el alto. */
  --h1-cap-vp: clamp(52px, min(9vw, 11vh), 130px);
  /* Techo por columna: el font-size al que la linea mas larga del titulo
     todavia entra en un renglon. Ver "Hero a prueba de fold" abajo. */
  --h1-cap-col: calc(100cqi * var(--h1-fit, 1));
  /* El piso va afuera del min() a proposito: en telefonos angostos hay
     titulos (extension en pt-br) cuyo techo por columna cae a 30px, y ahi
     preferimos que envuelva antes que volverlo ilegible. */
  font-size: max(38px, min(var(--h1-cap-vp), var(--h1-cap-col)));
}
.display    { font-size: clamp(40px, 6.4vw, 80px); }
.heading-lg { font-size: clamp(34px, 4.4vw, 48px); }

/* Secondary heading: neo-grotesque 450, uppercase, 40px */
.heading {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
.heading-sm {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-heading-sm);
  line-height: 1.3;
  letter-spacing: -0.03em;
  margin: 0;
}
.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-caption);
  line-height: 1.3;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.lead {
  font-size: var(--text-subheading-lg);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--color-slate);
  margin: 0;
}
.body { font-size: var(--text-body); line-height: 1.4; color: var(--color-slate); margin: 0; }
.body-sm { font-size: var(--text-body-sm); line-height: 1.35; color: var(--color-slate); margin: 0; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-24);
}
.section { padding: var(--section-gap) 0; }
.section-head { max-width: 760px; margin-bottom: var(--spacing-64); }
.section-head .mono { color: var(--color-smoke); margin-bottom: var(--spacing-16); }
.section-head .lead { margin-top: var(--spacing-24); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 16px 24px;
  border-radius: var(--radius-buttons);
  border: 0;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.btn-filled { background: var(--color-carbon-black); color: var(--color-paper-white); }
.btn-filled:hover { opacity: .82; }
.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--color-slate);
  color: var(--color-slate);
  border-radius: 4px;
}
.btn-ghost:hover { border-color: var(--color-carbon-black); color: var(--color-carbon-black); }
.btn-invert { background: var(--color-paper-white); color: var(--color-carbon-black); }
.btn-invert:hover { opacity: .85; }
.btn-link { padding: 0; background: none; color: var(--color-carbon-black); }
.btn-link:hover { text-decoration: underline; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--spacing-16); }

/* ---------- Tags ---------- */
.tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--color-mint-chip);
  color: var(--color-paper-white);
  border-radius: var(--radius-tags);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.tag-dark { background: var(--color-carbon-black); color: var(--color-paper-white); }
.tag-outline {
  background: transparent;
  border: 1px solid var(--color-ash);
  color: var(--color-slate);
}
.hl { background: var(--color-voltage-yellow); color: var(--color-carbon-black); padding: 0 4px; }

/* ---------- Cards ---------- */
.card {
  background: var(--color-paper-white);
  border-radius: var(--radius-cards);
  padding: var(--spacing-24);
}
.card-lg { border-radius: var(--radius-large-cards); padding: var(--spacing-40); }
.card-invert { background: var(--color-carbon-black); color: var(--color-paper-white); }
.card-invert .body, .card-invert .lead, .card-invert .body-sm { color: var(--color-smoke); }
.card-mist { background: var(--color-mist-gray); }
.card-arc { border-radius: var(--radius-large-cards) var(--radius-large-cards) 0 0; }

/* ============================================================
   NAV
   ============================================================ */
.topbar {
  height: 8rem;
  display: flex;
  align-items: center;
  background: var(--color-warm-canvas);
}
.topbar-inner {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-24);
}
.brand {
  font-family: var(--font-cond);
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1;
}
/* Isologo del cangrejo junto al wordmark: hereda el color del brand
   via currentColor (carbon en la home, el ink de cada landing). */
a.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand-crab { width: 32px; height: 27px; flex: none; display: block; }
.nav-pill {
  background: var(--color-paper-white);
  border-radius: var(--radius-nav-pill);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
}
.nav-pill a {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-slate);
  letter-spacing: -0.01em;
}
.nav-pill a:hover { color: var(--color-carbon-black); }
.nav-actions { display: flex; align-items: center; gap: var(--spacing-16); }
/* Saludo del usuario logueado. Lo escribe site.js reemplazando los dos
   botones de sesion; en mono, como todo rotulo del sistema. */
.nav-greeting {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-slate);
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-bottom: var(--spacing-96); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-64);
  align-items: center;
}
.hero-copy .mono { color: var(--color-smoke); margin-bottom: var(--spacing-24); }
.hero-copy .lead { margin-top: var(--spacing-24); max-width: 46ch; }
.hero-copy .btn-row { margin-top: var(--spacing-40); }
.hero-note { margin-top: var(--spacing-24); color: var(--color-smoke); }
.hero-art { aspect-ratio: 1 / 1; }

/* Tira de integraciones */
.strip {
  border-top: 1px solid var(--color-ash);
  border-bottom: 1px solid var(--color-ash);
  padding: var(--spacing-24) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-16) var(--spacing-40);
}
.strip .mono { color: var(--color-smoke); }
.strip .strip-item { color: var(--color-carbon-black); }

/* ============================================================
   GRIDS
   ============================================================ */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-24); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-24); }

.pain-card { display: flex; flex-direction: column; gap: var(--spacing-16); min-height: 260px; }
.pain-card .num { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-smoke); }
.pain-card .body { margin-top: auto; }

/* Sección invertida */
.inverted {
  background: var(--color-carbon-black);
  color: var(--color-paper-white);
  padding: var(--spacing-96) 0;
}
.inverted .lead, .inverted .body, .inverted .body-sm { color: var(--color-smoke); }
.inverted .section-head .mono { color: var(--color-smoke); }

.value-list { display: grid; gap: 0; margin-top: var(--spacing-64); }
.value-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--spacing-24);
  padding: var(--spacing-40) 0;
  border-top: 1px solid color-mix(in srgb, var(--color-paper-white) 14%, transparent);
  align-items: start;
}
.value-row:last-child { border-bottom: 1px solid color-mix(in srgb, var(--color-paper-white) 14%, transparent); }
.value-row .num { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-smoke); padding-top: 6px; }

/* Módulos */
.module-card { display: flex; flex-direction: column; gap: var(--spacing-16); }
.module-card .num { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-smoke); }
.module-card .heading-sm { font-size: 22px; }

/* GEO */
.geo-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--spacing-64);
  align-items: center;
}
.geo-rows { display: flex; flex-direction: column; gap: 12px; }
.geo-row {
  background: color-mix(in srgb, var(--color-paper-white) 7%, transparent);
  border-radius: 20px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.geo-row .q { font-size: var(--text-body-sm); color: var(--color-paper-white); line-height: 1.35; }
.geo-row .meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.geo-src {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-smoke);
  text-transform: uppercase;
}
.geo-hit { background: var(--color-mint-chip); color: var(--color-paper-white); border-radius: var(--radius-tags); padding: 4px 12px; font-family: var(--font-mono); font-size: var(--text-caption); }
.geo-miss { background: var(--color-graphite); color: var(--color-smoke); border-radius: var(--radius-tags); padding: 4px 12px; font-family: var(--font-mono); font-size: var(--text-caption); }

/* Workspaces (la escena scrollytelling vive al final de la hoja) */
.ws-list { list-style: none; margin: var(--spacing-24) 0 0; padding: 0; display: grid; gap: 12px; }
.ws-list li {
  font-size: var(--text-body-sm);
  color: var(--color-slate);
  padding-left: 22px;
  position: relative;
  line-height: 1.35;
}
.ws-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-mint-chip);
}

/* Tech */
.tech-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--spacing-24); padding: var(--spacing-40) 0; border-top: 1px solid var(--color-ash); }
.tech-row:last-child { border-bottom: 1px solid var(--color-ash); }

/* Pricing */
.price-card { display: flex; flex-direction: column; gap: var(--spacing-16); min-height: 420px; }
.price-card .price {
  font-family: var(--font-cond);
  font-size: 48px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.price-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.price-card li { font-size: var(--text-body-sm); color: var(--color-slate); line-height: 1.35; }
.price-card .btn { margin-top: auto; justify-content: center; }
.price-card.featured { background: var(--color-carbon-black); color: var(--color-paper-white); }
.price-card.featured li, .price-card.featured .body-sm { color: var(--color-smoke); }

/* FAQ */
.faq-list { border-top: 1px solid var(--color-ash); }
.faq-item { border-bottom: 1px solid var(--color-ash); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--spacing-24) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-24);
  font-size: var(--text-subheading);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--color-smoke);
  flex: none;
}
.faq-item[open] summary::after { content: '–'; }
.faq-item .answer { padding: 0 0 var(--spacing-24); max-width: 78ch; }

/* CTA final */
.final {
  background: var(--color-carbon-black);
  color: var(--color-paper-white);
  border-radius: var(--radius-large-cards) var(--radius-large-cards) 0 0;
  padding: var(--spacing-96) var(--spacing-40);
  text-align: center;
}
.final .lead { color: var(--color-smoke); margin: var(--spacing-24) auto 0; max-width: 52ch; }
.final .btn-row { justify-content: center; margin-top: var(--spacing-40); }

/* Footer */
.footer { background: var(--color-carbon-black); color: var(--color-smoke); padding: var(--spacing-64) 0 var(--spacing-40); }
.footer a { color: var(--color-smoke); }
.footer a:hover { color: var(--color-paper-white); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--spacing-40); }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: var(--color-paper-white);
  margin: 0 0 var(--spacing-16);
  font-weight: 400;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col li { font-size: var(--text-body-sm); }
.footer .brand { color: var(--color-paper-white); }

/* Redes. Cajas hairline sobre el bloque carbon: sin sombra y sin relleno,
   la separacion la da la linea, como en el resto del sistema. */
.footer-social { display: flex; gap: 10px; margin-top: var(--spacing-24); }
.footer-social a {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-paper-white) 14%, transparent);
  color: var(--color-smoke);
  transition: color .15s ease, border-color .15s ease;
}
.footer-social a:hover { color: var(--color-paper-white); border-color: var(--color-paper-white); }
.footer-social svg { width: 16px; height: 16px; display: block; fill: currentColor; }
.footer-bottom {
  margin-top: var(--spacing-64);
  padding-top: var(--spacing-24);
  border-top: 1px solid color-mix(in srgb, var(--color-paper-white) 14%, transparent);
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-24);
  flex-wrap: wrap;
}

/* ============================================================
   PASOS NUMERADOS
   Lo usan la extension, su guia y Tienda Nube: por la regla del
   proyecto, lo que comparten 2+ paginas vive en el sistema.
   ============================================================ */
.step + .step { margin-top: var(--spacing-40); }
.step-n {
  font-family: var(--font-cond);
  font-size: var(--text-heading-sm);
  line-height: 1;
  color: var(--color-ash);
}
.step h2, .step h3 { font-size: var(--text-subheading); margin: 0 0 var(--spacing-8); color: var(--color-carbon-black); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero-grid, .geo-grid { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-40); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-row { grid-template-columns: 48px minmax(0, 1fr); }
  .value-row .body { grid-column: 2; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-pill { display: none; }
}
@media (max-width: 720px) {
  :root { --section-gap: 56px; }
  .topbar { height: 5.5rem; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .tech-row { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .final { padding: var(--spacing-64) var(--spacing-24); border-radius: 40px 40px 0 0; }
  .card-lg { padding: var(--spacing-24); border-radius: 40px; }
  .nav-actions .btn-ghost, .nav-greeting { display: none; }
}

/* ============================================================
   ESCENA 3D DEL HERO
   Cuenta el producto: las fuentes sueltas flotan detras del panel y,
   al pasar el mouse, se meten dentro. DOM real con transforms CSS,
   sin librerias: el texto queda nitido y usa los mismos tokens.
   ============================================================ */
.stage {
  --c-meta: #1877F2;
  --c-ga4: #F9AB00;
  --c-tiktok: #00C8A0;
  --c-linkedin: #0A66C2;
  --c-ml: #FFE600;
  --c-gsc: #4285F4;

  position: relative;
  width: 100%;
  perspective: 1100px;
  perspective-origin: 50% 45%;
}
.scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* Valores que escribe el puntero; el reposo ya tiene una leve inclinacion
     para que se lea como volumen antes de que nadie toque nada. */
  --rx: 6deg;
  --ry: -14deg;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.stage.is-live .scene { transition: transform .12s linear; }

/* ---------- Chips de fuente ----------
   .src fija la posicion 3D; .src-in lleva el aspecto y el flotado, para que
   la animacion no pise el transform de posicionamiento. */
.src {
  position: absolute;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.src-in {
  display: block;
  animation: flotar 7s ease-in-out infinite alternate;
}
.src-logo {
  width: 44px; height: 44px;
  display: block;
  object-fit: contain;
}

/* Flotado permanente: cada chip con su propio ritmo para que nunca se lea
   como una grilla moviendose junta. */
@keyframes flotar {
  from { transform: translate3d(0, -5px, 0); }
  to   { transform: translate3d(0,  6px, 0); }
}
.s1  .src-in { animation-duration: 6.4s; animation-delay: -0.2s; }
.s2  .src-in { animation-duration: 7.8s; animation-delay: -1.6s; }
.s3  .src-in { animation-duration: 5.9s; animation-delay: -3.1s; }
.s4  .src-in { animation-duration: 8.4s; animation-delay: -0.9s; }
.s5  .src-in { animation-duration: 6.9s; animation-delay: -2.4s; }
.s6  .src-in { animation-duration: 7.2s; animation-delay: -4.0s; }
.s7  .src-in { animation-duration: 6.1s; animation-delay: -1.1s; }
.s8  .src-in { animation-duration: 8.0s; animation-delay: -2.9s; }
.s9  .src-in { animation-duration: 6.6s; animation-delay: -0.5s; }
.s10 .src-in { animation-duration: 7.5s; animation-delay: -3.6s; }
.s11 .src-in { animation-duration: 6.2s; animation-delay: -2.0s; }
.s12 .src-in { animation-duration: 7.9s; animation-delay: -4.4s; }
.s13 .src-in { animation-duration: 6.8s; animation-delay: -1.4s; }
.s14 .src-in { animation-duration: 7.3s; animation-delay: -2.6s; }

/* Reposo: anillo alrededor del panel. A diferencia de los chips
   originales, los logos pelados no sangran fuera del cuadro: todas las
   posiciones viven dentro del stage para que ninguna resolucion los
   corte. Profundidad acotada a -25..-60 para que las lineas (en -40)
   sigan tocando cada logo bajo el tilt. */
.s1  { top:  0%;  left:  4%; --tz: -30px; transform: translate3d(0,0,var(--tz)) rotateY(16deg); }
.s3  { top: 12%;  left:  8%; --tz: -25px; transform: translate3d(0,0,var(--tz)) rotateY(20deg); }
.s5  { top: 30%;  left:  2%; --tz: -35px; transform: translate3d(0,0,var(--tz)) rotateY(18deg); }
.s7  { top: 52%;  left:  0%; --tz: -55px; transform: translate3d(0,0,var(--tz)) rotateY(14deg); }
.s9  { bottom: 12%; left:  6%; --tz: -45px; transform: translate3d(0,0,var(--tz)) rotateY(22deg); }
.s11 { bottom:  2%; left: 26%; --tz: -35px; transform: translate3d(0,0,var(--tz)) rotateY(10deg); }
.s13 { bottom:  0%; left: 52%; --tz: -60px; transform: translate3d(0,0,var(--tz)) rotateY(-8deg); }
.s12 { top:  0%;  left: 33%; --tz: -50px; transform: translate3d(0,0,var(--tz)) rotateY(12deg); }
.s14 { top:  0%;  left: 55%; --tz: -40px; transform: translate3d(0,0,var(--tz)) rotateY(-10deg); }
.s2  { top:  6%;  right: 2%; --tz: -50px; transform: translate3d(0,0,var(--tz)) rotateY(-14deg); }
.s4  { top: 22%;  right: 0%; --tz: -55px; transform: translate3d(0,0,var(--tz)) rotateY(-10deg); }
.s6  { top: 46%;  right: 0%; --tz: -45px; transform: translate3d(0,0,var(--tz)) rotateY(-16deg); }
.s8  { bottom: 26%; right: 1%; --tz: -30px; transform: translate3d(0,0,var(--tz)) rotateY(-18deg); }
.s10 { bottom:  6%; right: 4%; --tz: -55px; transform: translate3d(0,0,var(--tz)) rotateY(-12deg); }

/* ---------- Red de conexiones y hub ---------- */
.net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translateZ(-40px);
  pointer-events: none;
}
.net path {
  fill: none;
  stroke: var(--color-mint-chip);
  stroke-opacity: .45;
  stroke-width: 1.4;
  stroke-dasharray: 3 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  /* El guionado corre hacia el panel: cada integracion alimenta el dashboard.
     El offset es multiplo del periodo (3+5) para que el loop no salte. */
  animation: alimentar 3.4s linear infinite;
}
.net path:nth-child(2n) { animation-duration: 4.3s; }
.net path:nth-child(3n) { animation-duration: 3.8s; }
@keyframes alimentar { to { stroke-dashoffset: -64; } }

/* El hover no toca las fuentes: siguen flotando. Lo unico que cambia es que
   el panel se adelanta y toma protagonismo. */

/* ---------- Panel ---------- */
.panel {
  position: absolute;
  /* Corrido levemente a la derecha: el tilt de la escena empuja el panel
     hacia la izquierda y sin este margen pisa los logos de esa columna. */
  top: 50%; left: 53%;
  width: 62%;
  transform: translate3d(-50%, -50%, 0);
  background: var(--color-carbon-black);
  color: var(--color-paper-white);
  border-radius: 26px;
  padding: 26px 26px 22px;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.stage:hover .panel,
.stage:focus-within .panel,
.stage.is-hover .panel { transform: translate3d(-50%, -50%, 46px); }

.p-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.p-eyebrow {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: -0.02em; color: var(--color-smoke);
}
.p-live {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
  background: var(--color-mint-chip); color: var(--color-paper-white);
  padding: 3px 9px; border-radius: var(--radius-tags);
}
.p-kpi {
  font-family: var(--font-cond); font-size: 58px; line-height: .95;
  letter-spacing: -0.03em; margin-top: 12px;
}
.p-kpi span { font-size: .5em; color: var(--color-smoke); margin-left: 2px; }
.p-spark { width: 100%; height: 52px; display: block; margin-top: 6px; }
.p-rows { margin-top: 14px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--color-paper-white) 15%, transparent); display: grid; gap: 9px; }
.p-row {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--color-smoke);
}
.p-row i { width: 7px; height: 7px; border-radius: 50%; display: block; flex: none; }
.p-row b { margin-left: auto; color: var(--color-paper-white); font-weight: 500; font-variant-numeric: tabular-nums; }

@media (max-width: 1024px) {
  /* El hero pasa a una columna: sin tope la escena se estira a todo el ancho
     y las chips con offset negativo se escapan del viewport. */
  .stage { max-width: 560px; margin: 0 auto; }
  .p-kpi { font-size: 48px; }
  .src-logo { width: 36px; height: 36px; }
}
@media (max-width: 720px) {
  .stage { perspective: 800px; }
  /* Sin puntero no hay tilt que valga: la escena va plana y el panel mas
     angosto, asi ningun logo del anillo queda tapado. */
  .scene { --rx: 0deg; --ry: 0deg; }
  .panel { left: 50%; width: 64%; padding: 18px; border-radius: 20px; }
  .p-kpi { font-size: 44px; }
  .src-logo { width: 28px; height: 28px; }
  .s3, .s6, .s8, .s9, .s13,
  .l3, .l6, .l8, .l9, .l13 { display: none; }
}

/* Quien pide menos movimiento ve la escena quieta y de frente. */
@media (prefers-reduced-motion: reduce) {
  .scene { --rx: 0deg; --ry: 0deg; transition: none; }
  .src, .panel { transition: none; }
  .src-in { animation: none; }
  .net path { animation: none; }
  .stage:hover .panel, .stage:focus-within .panel, .stage.is-hover .panel { transform: translate3d(-50%,-50%,0); }
}

/* ============================================================
   REVEAL AL SCROLL
   Un IntersectionObserver agrega .is-visible una sola vez. Todo el
   estado oculto vive bajo html.js: sin JavaScript nada desaparece.
   ============================================================ */
html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
html.js .reveal.is-visible { opacity: 1; transform: none; }

/* Stagger por hijos sin JS de indices: alcanza con nth-child. */
html.js .reveal-group > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
html.js .reveal-group.is-visible > * { opacity: 1; transform: none; }
html.js .reveal-group.is-visible > *:nth-child(2) { transition-delay: .07s; }
html.js .reveal-group.is-visible > *:nth-child(3) { transition-delay: .14s; }
html.js .reveal-group.is-visible > *:nth-child(4) { transition-delay: .21s; }
html.js .reveal-group.is-visible > *:nth-child(5) { transition-delay: .28s; }
html.js .reveal-group.is-visible > *:nth-child(6) { transition-delay: .35s; }
html.js .reveal-group.is-visible > *:nth-child(7) { transition-delay: .42s; }
html.js .reveal-group.is-visible > *:nth-child(8) { transition-delay: .49s; }
html.js .reveal-group.is-visible > *:nth-child(9) { transition-delay: .56s; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal-group > * { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   SOLUCIÓN — BOARD "CONECTA · CRUZA · EXPLICA"
   Reemplaza el screencast. Grilla hairline de tres celdas sobre el
   bloque invertido: el borde es el gap teñido, las celdas van en
   graphite. Los numeros repiten los del panel Negocio de la seccion
   de workspaces para que la historia cierre entre secciones.
   ============================================================ */
.sol-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: color-mix(in srgb, var(--color-paper-white) 14%, transparent);
  border-radius: var(--radius-cards);
  overflow: hidden;
}
.sol-cell {
  background: var(--color-graphite);
  padding: var(--spacing-24);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-height: 280px;
}
.sol-k { color: var(--color-mint-chip); margin: 0; }
.sol-note { color: var(--color-smoke); margin: auto 0 0; }

/* Celda 1: AI Visibility Score + trafico por motor + citas */
.sol-score {
  font-family: var(--font-cond);
  font-size: clamp(44px, 4.4vw, 60px);
  line-height: .95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-paper-white);
  margin: 0;
}
.sol-score span { font-size: .45em; color: var(--color-smoke); margin-left: 4px; }
.sol-score-label {
  color: var(--color-smoke);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sol-bars { display: grid; gap: 9px; margin-top: 6px; }
.sol-bars .ws-bar { grid-template-columns: 74px minmax(0, 1fr) 44px; }

/* Celda 2: señal de contenido (patron de la landing de creators:
   nombre de señal + mini-viz + frase en castellano llano) y el mapa
   de momentos del Reel que arma Content AI. */
.sol-sig {
  background: color-mix(in srgb, var(--color-paper-white) 8%, transparent);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  gap: 10px;
}
.sol-sig-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sol-sig-head .mono:first-child { color: var(--color-mint-chip); font-size: 10px; }
.sol-time { color: var(--color-smoke); font-size: 10px; }
.sol-sig p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--color-smoke); }
.sol-sig p b { color: var(--color-paper-white); font-weight: 500; }
.sol-spark-bars { display: flex; align-items: flex-end; gap: 4px; height: 46px; }
.sol-spark-bars i {
  flex: 1;
  background: color-mix(in srgb, var(--color-mint-chip) 45%, transparent);
  border-radius: 2px 2px 0 0;
}
.sol-spark-bars i.peak { background: var(--color-mint-chip); }

.sol-moments { display: grid; }
.sol-moments-k { color: var(--color-smoke); font-size: 10px; margin: 0 0 4px; }
.sol-moment {
  display: grid;
  grid-template-columns: 36px 14px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-paper-white) 10%, transparent);
}
.sol-moment .mono { color: var(--color-mint-chip); font-size: 10px; }
.sol-moment i { width: 8px; height: 8px; border-radius: 50%; display: block; transform: translateY(1px); }
.sol-moment i.pos { background: var(--color-mint-chip); }
.sol-moment i.neg { background: #F9AB00; }
.sol-moment p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--color-smoke); }
.sol-moment p b { color: var(--color-paper-white); font-weight: 500; }

/* Celda 3: señales tipo feed */
.sol-signal {
  background: color-mix(in srgb, var(--color-paper-white) 8%, transparent);
  border-radius: 14px;
  padding: 12px 14px;
  display: grid;
  gap: 6px;
}
.sol-signal .mono { color: var(--color-mint-chip); font-size: 10px; }
.sol-signal p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--color-smoke); }
.sol-signal p b { color: var(--color-paper-white); font-weight: 500; }

/* Entrada: las barras crecen y los bloques entran en cascada, todo
   colgado del .is-visible que ya pone el sistema de reveal. */
html.js .sol-bars .ws-track i {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s cubic-bezier(.16,1,.3,1) .25s;
}
html.js .reveal.is-visible .sol-bars .ws-track i { transform: scaleX(1); }
html.js .sol-spark-bars i {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .6s cubic-bezier(.16,1,.3,1) calc(.3s + var(--i, 0) * .05s);
}
html.js .reveal.is-visible .sol-spark-bars i { transform: scaleY(1); }
html.js .sol-sig,
html.js .sol-moments,
html.js .sol-signal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(.25s + var(--i, 0) * .11s);
}
html.js .reveal.is-visible .sol-sig,
html.js .reveal.is-visible .sol-moments,
html.js .reveal.is-visible .sol-signal { opacity: 1; transform: none; }

@media (max-width: 1024px) {
  .sol-board { grid-template-columns: minmax(0, 1fr); }
  .sol-cell { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .sol-bars .ws-track i,
  html.js .sol-spark-bars i { transform: none; transition: none; }
  html.js .sol-sig,
  html.js .sol-moments,
  html.js .sol-signal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   WORKSPACES — SCROLLYTELLING 3D
   Tres capitulos de texto scrollean a la izquierda; a la derecha un
   unico escenario sticky (mismo vocabulario 3D que el hero) intercambia
   tres paneles de analytics, uno por rol. El JS solo escribe
   data-active en .ws-scrolly; todo lo demas es CSS.
   ============================================================ */
.ws-scrolly {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--spacing-64);
  align-items: start;
}
.ws-step {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ws-idx { color: var(--color-smoke); margin: 0 0 var(--spacing-16); }

.ws-stage-wrap {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
}
.ws-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 74vh;
  perspective: 1100px;
  perspective-origin: 50% 45%;
}
.ws-scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.ws-stage.is-live .ws-scene { transition: transform .12s linear; }

/* Pose de reposo distinta por capitulo: la escena gira al scrollear. */
.ws-scrolly[data-active="agencia"] .ws-scene { --rx: 7deg; --ry: -14deg; }
.ws-scrolly[data-active="negocio"] .ws-scene { --rx: 5deg; --ry: -2deg; }
.ws-scrolly[data-active="creator"] .ws-scene { --rx: 6deg; --ry: 10deg; }

/* Cada vista es una composicion de 2-3 piezas. La vista no anima: animan
   las piezas, en cascada (--d) y cada una hacia su propia pose 3D
   (--pz profundidad, --pr giro), el mismo lenguaje que los chips del hero. */
.ws-view {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.ws-piece {
  position: absolute;
  border-radius: 20px;
  padding: 18px;
  opacity: 0;
  transform: translate3d(0, 36px, calc(var(--pz, 0px) - 140px));
  transition: opacity .45s ease, transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay: 0s;
}
.ws-sat {
  opacity: 0;
  transition: opacity .45s ease;
  transition-delay: 0s;
}
.ws-scrolly[data-active="agencia"] #view-agencia .ws-piece,
.ws-scrolly[data-active="negocio"] #view-negocio .ws-piece,
.ws-scrolly[data-active="creator"] #view-creator .ws-piece {
  opacity: 1;
  transform: translate3d(0, 0, var(--pz, 0px)) rotateY(var(--pr, 0deg));
  transition-delay: var(--d, 0s);
}
.ws-scrolly[data-active="agencia"] #view-agencia .ws-sat,
.ws-scrolly[data-active="negocio"] #view-negocio .ws-sat,
.ws-scrolly[data-active="creator"] #view-creator .ws-sat {
  opacity: 1;
  transition-delay: var(--d, 0s);
}

/* Superficies: la composicion mezcla tarjetas blancas y oscuras. */
.wsp-light { background: var(--color-paper-white); color: var(--color-carbon-black); }
.wsp-dark { background: var(--color-carbon-black); color: var(--color-paper-white); }
.wsp-light .ws-track { background: var(--color-mist-gray); }
.wsp-light .ws-bar { color: var(--color-smoke); }
.wsp-light .ws-bar b { color: var(--color-carbon-black); }

.ws-legend {
  position: absolute;
  left: 50%;
  bottom: -38px;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
  color: var(--color-smoke);
  margin: 0;
}
.ws-legend span { transition: color .3s ease; }
.ws-scrolly[data-active="agencia"] .ws-legend [data-role="agencia"],
.ws-scrolly[data-active="negocio"] .ws-legend [data-role="negocio"],
.ws-scrolly[data-active="creator"] .ws-legend [data-role="creator"] { color: var(--color-carbon-black); }

/* ---------- Piezas: tipografia interna ---------- */
.wsp-k { color: var(--color-smoke); font-size: 10px; margin: 0 0 12px; }
.wsp-kpi {
  font-family: var(--font-cond);
  font-size: clamp(30px, 2.8vw, 40px);
  line-height: .95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 12px 0 0;
}
.wsp-kpi-label {
  margin: 8px 0 0;
  font-size: 10px;
  color: var(--color-smoke);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ws-delta {
  font-weight: 400;
  background: var(--color-mint-chip);
  color: var(--color-paper-white);
  border-radius: var(--radius-tags);
  padding: 2px 9px;
}
.ws-viz-label { font-size: 10px; color: var(--color-smoke); margin: 8px 0 0; }
.wsp-big {
  font-family: var(--font-cond);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.wsp-sub { color: var(--color-slate); font-size: 9px; margin: 4px 0 0; }
.wsp-note {
  color: var(--color-smoke);
  font-size: 9px;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--color-ash);
}

/* Lista de clientes (agencia) y headers de dos puntas */
.ws-cli-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--color-smoke);
  font-size: 9px;
  margin-bottom: 4px;
}
.ws-cli {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 40px;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--color-ash);
}
.ws-cli:last-child { padding-bottom: 2px; }
.ws-cli-name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.ws-cli-name i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ws-cli b {
  text-align: right;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Fila KPI compacta (post del creator, GMV del negocio) */
.ws-post-kpis { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; }
.ws-post-kpis b {
  font-family: var(--font-cond);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.ws-post-kpis .mono { font-size: 9px; color: var(--color-smoke); }
.ws-post-kpis .mult { margin-left: auto; color: var(--color-mint-chip); font-size: 12px; }

/* Media del post: por defecto placeholder wash con borde dashed
   (patron de la landing de creators); con .has-img lleva la foto real
   de la creadora de ejemplo y el dashed se apaga. */
.ws-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  background: var(--color-mist-gray);
}
.ws-media::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1.5px dashed var(--color-ash);
  border-radius: 8px;
}
.ws-media.has-img::after { display: none; }
.ws-media .ws-media-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 20%;
  border-radius: 12px;
}
.ws-media .mb {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 1;
  background: var(--color-carbon-black);
  color: var(--color-paper-white);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-tags);
}

/* Heatmap dia x hora (patron de la landing de creators) */
.ws-heat {
  display: grid;
  grid-template-columns: 26px repeat(7, minmax(0, 1fr));
  gap: 4px;
  align-items: center;
  margin-top: 8px;
}
.ws-heat span {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-smoke);
  text-transform: uppercase;
  text-align: center;
}
.ws-heat span.hr { text-align: left; }
.ws-heat i { aspect-ratio: 1 / 1; border-radius: 3px; background: var(--color-mist-gray); display: block; }
.ws-heat i[data-v="1"] { background: color-mix(in srgb, var(--color-mint-chip) 20%, var(--color-paper-white)); }
.ws-heat i[data-v="2"] { background: color-mix(in srgb, var(--color-mint-chip) 45%, var(--color-paper-white)); }
.ws-heat i[data-v="3"] { background: color-mix(in srgb, var(--color-mint-chip) 70%, var(--color-paper-white)); }
.ws-heat i[data-v="4"] { background: var(--color-mint-chip); }

/* Prompt citado (negocio): reusa .geo-src / .geo-hit */
.ne-prompt .q { font-size: 13px; line-height: 1.4; font-weight: 500; margin: 0 0 12px; }
.ne-prompt .meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Barras metricas: label mono / track pill / valor */
.ws-bars { display: grid; gap: 9px; }
.ws-bar {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-smoke);
}
.ws-bar b {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-paper-white);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ws-track {
  display: block;
  height: 8px;
  border-radius: var(--radius-tags);
  background: color-mix(in srgb, var(--color-paper-white) 12%, transparent);
  overflow: hidden;
}
.ws-track i { display: block; height: 100%; border-radius: inherit; background: var(--color-mint-chip); }
.ws-track i.warn { background: var(--color-voltage-yellow); }
.ws-track i.dim { background: var(--color-smoke); }

/* Dona de origen de venta (conic-gradient, sin librerias) */
.ws-donut-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--color-paper-white) 15%, transparent);
}
.ws-donut {
  position: relative;
  width: 96px; height: 96px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(
    var(--color-mint-chip) 0 calc(var(--a) * 1%),
    color-mix(in srgb, var(--color-paper-white) 80%, transparent) 0 calc(var(--b) * 1%),
    var(--color-smoke) 0 calc(var(--c) * 1%),
    color-mix(in srgb, var(--color-paper-white) 28%, transparent) 0
  );
}
.ws-donut::after {
  content: '';
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: var(--color-carbon-black);
}
.ws-donut span {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--color-smoke);
}
.ws-donut span b {
  font-family: var(--font-cond);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-paper-white);
}
.ws-leg {
  display: grid;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-smoke);
}
.ws-leg span { display: flex; align-items: center; gap: 8px; }
.ws-leg i { width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* ---------- Satelites: chips flotantes ---------- */
/* Como en el hero, el wrapper posiciona en 3D y el hijo lleva el
   aspecto y el flotado, para que la animacion no pise el transform. */
.ws-sat { position: absolute; transform-style: preserve-3d; }
.ws-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--radius-tags);
  background: var(--color-paper-white);
  color: var(--color-carbon-black);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--color-ash);
  animation: flotar 7s ease-in-out infinite alternate;
}
.ws-chip::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-mint-chip);
  flex: none;
}
.ws-chip-alert::before { background: #F9AB00; }

/* ---------- Composicion por vista ----------
   Piezas posicionadas en el cuadro; el z y el giro finales viajan en
   --pz/--pr inline junto con el delay de cascada --d. */
.ag-total { top: 2%; left: 0; width: 48%; }
.ag-clientes { top: 27%; right: 0; width: 62%; }
.ag-mini { bottom: 9%; left: 10%; width: 38%; }
.ne-funnel { top: 0; left: 0; width: 55%; }
.ne-sov { top: 32%; right: 0; width: 52%; }
.ne-prompt { bottom: 4%; left: 8%; width: 60%; }
.cr-post { top: 0; left: 0; width: 40%; }
.cr-ai { top: 6%; right: 0; width: 54%; }
.cr-heat { bottom: 2%; right: 2%; width: 52%; }

/* Un satelite por vista, con su propio ritmo como los chips del hero. */
/* Piezas fotograficas: una persona por rol dentro del collage.
   Foto limpia, el resto lo dicen las piezas de datos de al lado. */
.wsp-photo { padding: 0; overflow: hidden; }
.wsp-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ag-photo { bottom: 0; right: 4%; width: 34%; aspect-ratio: 4 / 3; }
.ne-photo { bottom: 0; right: 8%; width: 26%; aspect-ratio: 3 / 4; }
.ne-photo img { object-position: 50% 25%; }

.ws-sat-a1 { top: -3%; right: 4%; transform: translate3d(0,0,-70px) rotateY(-12deg); }
.ws-sat-c1 { bottom: 14%; left: 2%; transform: translate3d(0,0,80px) rotateY(12deg); }
.ws-sat-a1 .ws-chip { animation-duration: 6.6s; animation-delay: -1.2s; }
.ws-sat-c1 .ws-chip { animation-duration: 6.9s; animation-delay: -2.2s; }

/* ---------- Fallback ≤1024px: interleave texto → panel ----------
   CSS no puede re-parentar nodos, asi que los wrappers se disuelven con
   display: contents y los seis bloques hoja se intercalan por order
   dentro de la misma grilla. Es seguro: el subtree del stage es
   decorativo (aria-hidden). */
@media (max-width: 1024px) {
  .ws-scrolly { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-40); }
  .ws-steps, .ws-stage-wrap, .ws-stage, .ws-scene { display: contents; }
  .ws-step { min-height: 0; }
  .ws-legend { display: none; }
  .ws-view {
    position: static;
    pointer-events: auto;
    display: grid;
    gap: 12px;
  }
  .ws-step[data-role="agencia"] { order: 1; }
  #view-agencia { order: 2; }
  .ws-step[data-role="negocio"] { order: 3; }
  #view-negocio { order: 4; }
  .ws-step[data-role="creator"] { order: 5; }
  #view-creator { order: 6; }
  .ws-piece {
    position: static;
    width: auto;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ws-media { aspect-ratio: 16 / 10; }
  .wsp-photo { aspect-ratio: 16 / 10; }
  .ws-sat { display: none; }
}
@media (max-width: 720px) {
  .ws-piece { padding: 16px; }
  .ws-donut { width: 84px; height: 84px; }
  .ws-donut::after { inset: 14px; }
}

/* Quien pide menos movimiento conserva el swap de capitulos (es cambio
   de estado, no movimiento) pero sin animaciones ni inclinacion. */
@media (prefers-reduced-motion: reduce) {
  .ws-scrolly .ws-scene { --rx: 0deg; --ry: 0deg; transition: none; }
  .ws-piece, .ws-sat { transition: none; }
  .ws-chip { animation: none; }
}

/* ---------- Hero a prueba de fold ----------
   Regla del sistema: en el hero, imagen + titulo + parrafo + CTAs entran
   enteros en la primera pantalla. Se sostiene en tres techos.

   1. --h1-fit (ancho). Cada <br> del <h1> es una linea pensada por alguien:
      si una envuelve, el titulo gana un renglon de 100px y empuja el CTA
      abajo del fold. Eso pasaba en agency, geo, business, extension,
      extension-guide, tiendanube y pricing, donde la linea mas larga no
      entraba en la columna a 130px.
      El ancho de una linea escala lineal con el font-size, asi que
      (font-size / ancho natural de la linea mas larga) es una constante de
      ese titulo: multiplicada por el ancho de la columna da el font-size
      maximo al que todavia entra en un renglon. Esa constante es --h1-fit y
      va inline en cada <h1>, porque depende del texto y por lo tanto cambia
      por locale ("Doce reportes." != "Doze relatorios.").
      100cqi es el ancho de la columna del titulo, sea cual sea el layout de
      ese hero: por eso los tres contenedores posibles del <h1> se declaran
      como container. Sin container, 100cqi cae al viewport y el techo deja
      de morder en silencio.
      Los valores se remiden con `npm run hero` (scripts/hero-fold.mjs), que
      falla si algun titulo envuelve o si algo del hero queda abajo del fold.

   2. 11vh (alto). Ver .display-xl arriba.

   3. Ritmo vertical (abajo). En notebooks de poca altura (720-1000px) se
      achican el topbar y los espacios del hero. El techo es 1000 y no 940
      porque el MacBook Pro 14 es 1512x982 y quedaba justo afuera. */
.hero .hero-copy,
.hero .section-head,
.hero > .wrap {
  container-type: inline-size;
}

@media (min-width: 721px) and (max-height: 1000px) {
  .topbar { height: 5.5rem; }
  .section.hero { padding-top: clamp(12px, 3vh, 40px); }
  .hero-copy .mono { margin-bottom: 12px; }
  .hero-copy .lead { margin-top: 14px; }
  .hero-copy .btn-row { margin-top: 22px; }
  .hero-note { margin-top: 14px; }
}

/* Apilado (<=720px): el hero pasa a una columna y el arte cae abajo del
   copy. El ritmo de escritorio se come 114-180px de mas y empujaba los CTAs
   abajo del fold en un telefono de 667px de alto, asi que aca va comprimido.
   El arte no entra entero en un telefono: con el copy adentro de la primera
   pantalla quedan ~60px, y achicarlo hasta ahi seria peor que dejarlo
   asomar. Entra entero de 1025px para arriba. */
/* Los selectores van colgados de .hero y no de .hero-copy porque hay tres
   layouts de hero en el sitio: el de dos columnas (.hero-copy), el centrado
   (.section-head) y el de creator (el titulo cuelga del .wrap). */
@media (max-width: 720px) {
  .section.hero { padding-top: var(--spacing-20); }
  .hero .mono { margin-bottom: 12px; }
  .hero .lead { margin-top: 16px; }
  .hero .btn-row { margin-top: 24px; }
  .hero-note { margin-top: 14px; }
}
/* Telefono chico (iPhone SE y companiga): 667px de alto no alcanzan ni con
   el ritmo comprimido, asi que el titulo tambien baja un escalon. */
@media (max-width: 720px) and (max-height: 740px) {
  .hero .display-xl { --h1-cap-vp: clamp(40px, 11.5vw, 52px); }
  .hero .lead { font-size: 16px; }
}

/* ============================================================
   HOME · El problema: la escena nocturna con los chips en conflicto
   ============================================================ */
.pain-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--spacing-40);
  align-items: center;
  margin-bottom: var(--spacing-60);
}
.pain-split .section-head { margin-bottom: 0; }
.pain-photo {
  margin: 0;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.pain-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.pain-chip {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--color-paper-white);
  color: var(--color-carbon-black);
  border-radius: var(--radius-tags);
  padding: 6px 12px;
}
.pain-chip.dark { background: var(--color-carbon-black); color: var(--color-paper-white); }
.pc-1 { top: 14px; left: 14px; transform: rotate(-2deg); }
.pc-2 { top: 52px; left: 38px; transform: rotate(1.5deg); }
.pc-3 { bottom: 16px; right: 14px; transform: rotate(-1deg); }
@media (max-width: 1024px) {
  .pain-split { grid-template-columns: minmax(0, 1fr); }
}