/* ── CERO STUDIO — Simulador de AI Search (/revisa/, /en/ai/) + demo en ficha SEO ──
   Ventana de chat brutalista: borde 1px, cabecera técnica, texto que se
   "escribe" (js/ia.js). Reutiliza .sv-* de servicios-spec.css y los .form-*
   de home.css; aquí solo vive lo nuevo. */

/* ── Formulario del simulador ─────────────────────────────────────── */
.ia-form { max-width: 880px; }
.ia-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 28px;
}
/* Ejemplo real en la portada (29 sep 2026): qué obtienes, en un vistazo */
.ia-ejemplo { margin: 26px 0 28px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.12); border-left: 3px solid var(--lime, #b2f700); background: rgba(255,255,255,.03); max-width: 460px; }
.ia-ejemplo p { margin: 0; }
.ia-ejemplo-t { font: 700 10px/1.3 'Space Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--lime, #b2f700); margin-bottom: 8px !important; }
.ia-ejemplo-r { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: rgba(255,255,255,.82); padding: 3px 0; }
.ia-ejemplo-r b { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ia-ejemplo-r b.no { color: #ff5a4e; }
.ia-ejemplo-r b.si { color: var(--lime, #b2f700); }
.ia-ejemplo-n { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 6px !important; }

/* 3 campos (28 sep 2026): el nombre a todo lo ancho; giro y zona lado a lado */
.ia-form-grid > .form-group:first-child { grid-column: 1 / -1; }
.ia-form .form-group { margin-bottom: 20px; }

/* ¿Tiene sitio web? — dos botones; el campo que sigue depende de la respuesta */
.ia-seg { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.ia-seg-opts { display: flex; gap: 8px; margin-top: 10px; }
.ia-seg-opt { position: relative; flex: 1; cursor: pointer; }
.ia-seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ia-seg-opt span {
  display: block;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  font-family: var(--fd);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--gray-light);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.ia-seg-opt:hover span { border-color: rgba(var(--lime-rgb), .6); color: var(--white); }
.ia-seg-opt input:checked + span { border-color: var(--lime); background: var(--lime); color: #0a0a0a; }
.ia-seg-opt input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }
.ia-seg-field { grid-column: 1 / -1; }
.ia-seg-field[hidden] { display: none; }
.ia-form .cf-turnstile { margin: 4px 0 18px; }
.ia-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}
.ia-form-foot .form-hint { margin: 0; }

/* ── Ventana de chat ──────────────────────────────────────────────── */
.ia-chat {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .16);
  background: #0e0e0e;
  font-family: var(--fb);
  overflow: hidden;
}
.ia-chat::before {
  /* línea cinética superior: entra al montar / al entrar en viewport */
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(.16, 1, .3, 1);
}
.ia-chat.is-on::before { transform: scaleX(1); }

.ia-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--fd);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gray-light);
}
.ia-chat-head .dot {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 10px;
  background: var(--lime);
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(var(--lime-rgb), .18);
}
.ia-chat-head .model {
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: none;
  color: var(--gray-text);
  white-space: nowrap;
}

.ia-chat-body { padding: 22px 18px 24px; }

.ia-msg { display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
.ia-msg + .ia-msg { margin-top: 22px; }
.ia-msg[hidden] { display: none; }
.ia-msg .who {
  font-family: var(--fd);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gray-text);
  padding-top: 5px;
}
.ia-msg.is-ai .who { color: var(--lime); }
.ia-msg .txt {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--white);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-height: 1.7em;
}
.ia-msg.is-user .txt {
  color: var(--gray-light);
  font-weight: 400;
}
.ia-msg .txt mark {
  background: rgba(var(--lime-rgb), .18);
  color: var(--lime);
  padding: 0 3px;
}

/* Cursor de máquina de escribir */
.ia-cursor {
  display: inline-block;
  width: 9px;
  height: 1.1em;
  margin-left: 2px;
  background: var(--lime);
  vertical-align: text-bottom;
  animation: iaBlink 1s steps(2, start) infinite;
}
.ia-cursor.is-done { animation: none; opacity: 0; }
@keyframes iaBlink { to { visibility: hidden; } }

/* Estado "pensando": tres puntos */
.ia-thinking { display: inline-flex; gap: 6px; align-items: center; height: 1.7em; }
.ia-thinking i {
  width: 6px; height: 6px;
  background: var(--lime);
  animation: iaDots 1.2s ease-in-out infinite;
}
.ia-thinking i:nth-child(2) { animation-delay: .2s; }
.ia-thinking i:nth-child(3) { animation-delay: .4s; }
@keyframes iaDots {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

/* ── Zona de resultado ────────────────────────────────────────────── */
.ia-result { margin-top: 48px; }
.ia-result[hidden] { display: none; }
.ia-note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--gray-text);
}
.ia-note strong { color: var(--gray-light); font-weight: 500; }

/* ── El duelo ─────────────────────────────────────────────────────── */
/* Entrada de cada bloque del resultado */
.is-in { animation: iaIn .7s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes iaIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* La pregunta de tu cliente */
.ia-q {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: 0 0 18px;
  font-family: var(--fd);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--white);
}
.ia-q-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lime);
}

/* Arena: una ventana por IA, en paralelo */
.ia-arena { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ia-arena.n-1 { grid-template-columns: 1fr; }
.ia-arena.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ia-bot {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  background: #0e0e0e;
  transition: border-color .4s ease;
}
.ia-bot::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: var(--lime);
  transform-origin: left;
  animation: iaScan 1.6s ease-in-out infinite;
}
.ia-bot:not(.is-wait)::before { animation: none; transform: scaleX(1); }
.ia-bot.is-miss { border-color: rgba(255, 100, 100, .45); }
.ia-bot.is-miss::before { background: #ff6464; }
.ia-bot.is-hit { border-color: rgba(var(--lime-rgb), .6); }
.ia-bot.is-failed { opacity: .55; }
.ia-bot.is-failed::before { background: var(--gray-text); }
@keyframes iaScan {
  0% { transform: scaleX(0); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
  51% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
.ia-bot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--fd);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ia-bot-name { color: var(--white); white-space: nowrap; }
.ia-bot-name .dot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 9px;
  background: var(--lime);
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(var(--lime-rgb), .18);
}
.ia-bot.is-wait .ia-bot-name .dot { animation: iaPulse 1s ease-in-out infinite; }
@keyframes iaPulse { 50% { opacity: .3; } }
.ia-bot-state { font-weight: 500; letter-spacing: .1em; color: var(--gray-text); white-space: nowrap; }
.ia-bot-body { flex: 1; padding: 16px; }
.ia-bot-body .txt {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--white);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-height: 1.7em;
}
.ia-bot-body mark {
  background: rgba(var(--lime-rgb), .18);
  color: var(--lime);
  padding: 0 3px;
}
.ia-bot-body mark.is-rival {
  background: rgba(255, 100, 100, .16);
  color: #ff8a8a;
}
.ia-bot-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 16px 14px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.ia-bot-foot[hidden] { display: none; }
.ia-bot-badge {
  padding: 4px 9px;
  font-family: var(--fd);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ia-bot-badge.is-hit { background: var(--lime); color: #0a0a0a; }
.ia-bot-badge.is-miss { background: #ff6464; color: #0a0a0a; }
.ia-bot-src { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 0; list-style: none; }
.ia-bot-src a {
  font-size: 12px;
  color: var(--gray-text);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .2);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.ia-bot-src a:hover { color: var(--lime); text-decoration-color: var(--lime); }

/* Bitácora en vivo */
.ia-log-wrap {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #0b0b0b;
}
.ia-log-label {
  margin: 0 0 8px;
  font-family: var(--fd);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ff6464;
}
.ia-log-label .dot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #ff6464;
  vertical-align: middle;
  animation: iaPulse 1.2s ease-in-out infinite;
}
.ia-log { list-style: none; margin: 0; padding: 0; }
.ia-log-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  padding: 3px 0;
  font-family: var(--fd);
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray-text);
  animation: iaIn .45s cubic-bezier(.16, 1, .3, 1) both;
}
.ia-log-item.is-now { color: var(--white); }
.ia-log-t { color: rgba(var(--lime-rgb), .75); font-variant-numeric: tabular-nums; }
.ia-log-x { overflow-wrap: anywhere; }

/* Veredicto */
.ia-verdict {
  --tone: #ff6464;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 32px;
  align-items: center;
  margin-top: 36px;
  padding: 30px 28px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-left: 3px solid var(--tone);
  background: #0e0e0e;
}
.ia-verdict[hidden] { display: none; }
.ia-verdict.is-mid { --tone: #f5c451; }
.ia-verdict.is-hit { --tone: var(--lime); }
.ia-verdict .ia-verdict-k {
  grid-row: span 3;
  margin: 0;
  font-family: var(--fd);
  font-weight: 700;
  line-height: .85;
  color: var(--tone);
}
.ia-verdict-k .k { font-size: clamp(88px, 12vw, 150px); letter-spacing: -.05em; }
.ia-verdict-k .of { font-size: clamp(32px, 4vw, 48px); color: var(--gray-text); margin-left: 4px; }
.ia-verdict-k .lbl {
  display: block;
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gray-text);
}
.ia-verdict h3 {
  align-self: end;
  margin: 0;
  font-family: var(--fd);
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--white);
}
.ia-verdict > p:not(.ia-verdict-k) {
  align-self: start;
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--gray-light);
}
.ia-brandq {
  grid-column: 1 / -1;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.ia-brandq[hidden] { display: none; }
.ia-brandq-label {
  margin: 0 0 6px;
  font-family: var(--fd);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gray-text);
}
.ia-brandq-txt {
  margin: 0;
  font-size: 15px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.65;
  color: var(--white);
}
.ia-brandq.is-missing .ia-brandq-txt { color: #ff8a8a; }

/* Duelo: tú vs el que recomiendan, en 4 rondas */
.ia-duel { margin-top: 28px; border: 1px solid rgba(255, 255, 255, .12); background: #0e0e0e; }
.ia-duel[hidden] { display: none; }
.ia-duel-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.ia-fighter { padding: 26px 28px; min-width: 0; }
.ia-fighter.is-rival { text-align: right; }
.ia-fighter p { margin: 0; }
.ia-fighter-tag {
  font-family: var(--fd);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lime);
}
.ia-fighter.is-rival .ia-fighter-tag { color: #ff6464; }
.ia-fighter-name {
  margin-top: 8px !important;
  font-family: var(--fd);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--white);
  overflow-wrap: anywhere;
}
.ia-fighter-host { margin-top: 4px !important; font-size: 13px; color: var(--gray-text); overflow-wrap: anywhere; }
.ia-fighter-score {
  --tone: #ff6464;
  margin-top: 14px !important;
  font-family: var(--fd);
  font-weight: 700;
  line-height: .9;
  color: var(--tone);
}
.ia-fighter-score.is-mid { --tone: #f5c451; }
.ia-fighter-score.is-good { --tone: var(--lime); }
.ia-fighter-score .lbl {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gray-text);
}
.ia-fighter-score .big { display: block; }
.ia-fighter-score .n { font-size: clamp(52px, 6.5vw, 80px); letter-spacing: -.04em; }
.ia-fighter-score .of { font-size: 16px; color: var(--gray-text); margin-left: 3px; }
.ia-fighter-score .site {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gray-light);
}
.ia-vs {
  margin: 0;
  padding: 0 8px;
  font-family: var(--fd);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .18);
}
.ia-rounds { list-style: none; margin: 0; padding: 0; }
.ia-round {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 150px;
  gap: 12px 28px;
  align-items: center;
  padding: 18px 28px;
  animation: iaIn .6s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--i, 0) * .22s);
}
.ia-round + .ia-round { border-top: 1px solid rgba(255, 255, 255, .07); }
.ia-round-q p { margin: 0; }
.ia-round-t { font-family: var(--fd); font-size: 17px; font-weight: 700; color: var(--white); }
.ia-round-s { margin-top: 3px !important; font-size: 13px; line-height: 1.5; color: var(--gray-text); }
.ia-round-bars { display: grid; gap: 8px; }
.ia-rbar { display: grid; grid-template-columns: 1fr 34px; gap: 10px; align-items: center; }
.ia-rbar .track { height: 8px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.ia-rbar i {
  display: block;
  height: 100%;
  transform-origin: left;
  animation: iaBar 1.1s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--i, 0) * .22s + .2s);
}
.ia-rbar.is-you i { background: var(--lime); }
.ia-rbar.is-rival i { background: #ff6464; }
.ia-rbar .val { font-family: var(--fd); font-size: 14px; font-weight: 700; text-align: right; color: var(--white); }
.ia-round-res {
  margin: 0;
  justify-self: end;
  padding: 5px 10px;
  font-family: var(--fd);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: right;
  overflow-wrap: anywhere;
}
.ia-round-res.is-win { background: var(--lime); color: #0a0a0a; }
.ia-round-res.is-lose { background: #ff6464; color: #0a0a0a; }
.ia-round-res.is-tie, .ia-round-res.is-na { border: 1px solid rgba(255, 255, 255, .2); color: var(--gray-light); }
.ia-duel-note {
  margin: 0;
  padding: 18px 28px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-light);
}

/* Huella: de dónde conoce la IA a cada uno */
.ia-round-extra { grid-column: 1 / -1; padding-top: 4px; }
.ia-round-extra .who {
  margin: 10px 0 6px;
  font-family: var(--fd);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ia-round-extra .who.is-you { color: var(--lime); }
.ia-round-extra .who.is-rival { color: #ff6464; }
.ia-trace { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ia-trace-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: 12px;
  color: var(--gray-light);
  overflow-wrap: anywhere;
}
.ia-trace-chip .k {
  font-family: var(--fd);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray-text);
}
.ia-trace-chip.k-own { border-color: rgba(var(--lime-rgb), .6); }
.ia-trace-chip.k-own .k { color: var(--lime); }
.ia-trace-chip.is-more { color: var(--gray-text); border-style: dashed; }

/* Boceto automático del sitio (segmento sin sitio) */
.ia-boceto {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 28px;
  padding: 32px 28px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #0e0e0e;
}
.ia-boceto[hidden] { display: none; }
.ia-boceto-tag {
  margin: 0 0 12px;
  font-family: var(--fd);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lime);
}
.ia-boceto h3 {
  margin: 0 0 12px;
  font-family: var(--fd);
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--white);
}
.ia-boceto-copy > p:not(.ia-boceto-tag) { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.65; color: var(--gray-light); }
.ia-boceto-copy > p.ia-boceto-note { margin-top: 12px; font-size: 13px; color: var(--gray-text); }
.ia-boceto-wa { margin-top: 20px; }
.ia-boceto-wa[hidden] { display: none; }
/* Dispositivos: laptop (vista de escritorio) + celular que recorre el sitio solo */
.ia-devices {
  position: relative;
  width: 100%;
  max-width: 760px;
  height: 470px;
  margin: 8px auto 0;
  animation: iaPhone .9s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes iaPhone { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.ia-laptop {
  position: absolute;
  left: 0;
  top: 0;
  width: 610px;
  padding: 12px 12px 0;
  border-radius: 14px 14px 0 0;
  background: #1c1c1c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
}
.ia-laptop::after {
  /* base de la laptop */
  content: '';
  position: absolute;
  left: -34px;
  right: -34px;
  bottom: -16px;
  height: 16px;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(#2a2a2a, #161616);
  box-shadow: 0 24px 60px -20px rgba(var(--lime-rgb), .25);
}
.ia-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 250px;
  height: 470px;
  padding: 10px;
  border-radius: 36px;
  background: #1c1c1c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 80px -24px rgba(var(--lime-rgb), .4);
}
.dv-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 26px;
  padding: 0 10px;
  background: #ecece6;
}
.ia-phone .dv-bar { justify-content: center; border-radius: 26px 26px 0 0; }
.dv-dots { width: 34px; height: 8px; background: radial-gradient(circle, #ff5f57 3px, transparent 3.5px) 0 0 / 12px 8px repeat-x; }
.dv-url {
  flex: 1;
  max-width: 220px;
  margin: 0 auto;
  padding: 2px 10px;
  border-radius: 20px;
  background: #fff;
  font-family: var(--fb);
  font-size: 10px;
  color: #555;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dv-screen { position: relative; overflow: hidden; background: #fff; }
.ia-laptop .dv-screen { height: 330px; }
.ia-laptop .bs { width: 1172px; transform: scale(.5); transform-origin: top left; }
.ia-phone .dv-screen { height: calc(100% - 26px); border-radius: 0 0 26px 26px; }
.ia-phone .bs { width: 345px; transform: scale(.667); transform-origin: top left; }
.dv-scroll { will-change: transform; }
.dv-scroll.is-auto { animation: iaScroll var(--dv-time, 14s) ease-in-out 1.2s infinite alternate; }
.ia-phone:hover .dv-scroll.is-auto { animation-play-state: paused; }
@keyframes iaScroll { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(var(--dv-dist, 0px)); } }
.dv-scroll { height: 0; } /* el sitio escalado no debe alargar la pantalla */

/* El sitio de ejemplo (se dibuja a tamaño real y se escala dentro del dispositivo) */
.bs {
  --bs-bg: #121212; --bs-ink: #fafafa; --bs-accent: #b2f700; --bs-soft: #f5f7ee; --bs-btn-ink: #111;
  --bs-hero-bg: var(--bs-bg); --bs-hero-ink: var(--bs-ink); --bs-kicker: var(--bs-accent);
  --bs-btn-bg: var(--bs-accent); --bs-deco: var(--bs-accent); font-family: var(--fb); color: #151515; background: #fff; }
.bs p { margin: 0; }
.bs-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background: var(--bs-bg);
  color: var(--bs-ink);
}
.bs-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
/* Sin marca confirmada: lugar del logo vacío, a la vista */
.bs-logo-slot {
  display: inline-grid;
  place-items: center;
  height: 46px;
  padding: 0 14px;
  border: 2px dashed color-mix(in srgb, var(--bs-ink) 55%, transparent);
  border-radius: 12px;
  font-family: var(--fd);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .85;
  flex-shrink: 0;
}
/* Logo real del negocio: sobre una placa blanca para que se lea en cualquier fondo */
.bs-logo-chip {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 5px;
  border-radius: 12px;
  background: #fff;
  flex-shrink: 0;
}
.bs-logo-chip.is-wide { width: auto; max-width: 240px; height: 46px; padding: 6px 12px; }
.bs-logo-chip img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.bs-glyph.has-logo {
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 0 0 30px color-mix(in srgb, var(--bs-deco) 30%, transparent);
}
.bs-glyph.has-logo img { width: 62%; height: 62%; object-fit: contain; }
.bs-glyph.is-slot {
  display: grid;
  place-items: center;
  background: transparent;
  border: 3px dashed #b9b9b4;
  box-shadow: none;
}
.bs-slot-txt { font-family: var(--fd); font-size: 22px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9a9a95; }
.bs:not(.is-wide) .bs-glyph.is-slot { display: none; }
.bs:not(.is-wide) .bs-glyph.has-logo,
.bs-glyph.is-wide-logo { display: none; } /* en el celular (o si el logo es alargado) ya va en la barra */
.bs-brand-name { font-family: var(--fd); font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-links { display: flex; gap: 28px; font-size: 15px; opacity: .8; }
.bs-burger { width: 24px; height: 16px; border-top: 3px solid currentColor; border-bottom: 3px solid currentColor; position: relative; }
.bs-burger::after { content: ''; position: absolute; left: 0; right: 0; top: 3.5px; border-top: 3px solid currentColor; }
.bs-hero {
  position: relative;
  overflow: hidden;
  padding: 44px 24px 52px;
  background:
    radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--bs-deco) 38%, transparent), transparent 55%),
    var(--bs-hero-bg);
  color: var(--bs-hero-ink);
}
.bs.is-wide .bs-hero { padding: 80px 64px 88px; }
.bs-hero-txt { position: relative; z-index: 1; max-width: 640px; }
.bs-kicker { font-family: var(--fd); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bs-kicker); }
.bs-h1 { margin-top: 14px !important; font-family: var(--fd); font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1.08; }
.bs.is-wide .bs-h1 { font-size: 58px; }
.bs-intro { margin-top: 14px !important; font-size: 16px; line-height: 1.55; opacity: .85; }
.bs.is-wide .bs-intro { font-size: 20px; }
.bs-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.bs-btn {
  display: inline-block;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--bs-btn-bg);
  color: var(--bs-btn-ink);
  font-family: var(--fd);
  font-size: 15px;
  font-weight: 700;
}
.bs-btn.is-ghost { background: transparent; color: var(--bs-hero-ink); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bs-hero-ink) 40%, transparent); }
.bs-foot .bs-btn { background: var(--bs-deco); color: var(--bs-bg); }
.bs-glyph {
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bs-deco) 22%, transparent);
  box-shadow: 0 0 0 36px color-mix(in srgb, var(--bs-deco) 10%, transparent);
}
.bs.is-wide .bs-glyph { right: 60px; top: 50%; bottom: auto; width: 300px; height: 300px; transform: translateY(-50%); }
.bs-sec { padding: 36px 24px; }
.bs.is-wide .bs-sec { padding: 48px 64px; }
.bs-sec.is-soft { background: var(--bs-soft); }
.bs-h2 { margin-bottom: 18px !important; font-family: var(--fd); font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: #111; }
.bs.is-light .bs-h2, .bs.is-light .bs-card-t, .bs.is-light .bs-q { color: var(--bs-kicker); }
.bs-cards { display: grid; gap: 14px; }
.bs.is-wide .bs-cards { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bs-card { padding: 20px; border-radius: 16px; background: var(--bs-soft); }
.bs-card-n { font-family: var(--fd); font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--bs-kicker) 70%, #000); }
.bs-card-t { margin-top: 8px !important; font-family: var(--fd); font-size: 18px; font-weight: 700; color: #111; }
.bs-card-d { margin-top: 6px !important; font-size: 14px; line-height: 1.5; color: #444; }
.bs-why { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.bs-why li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.45; color: #222; }
.bs-why li::before { content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--bs-deco); }
.bs-map {
  position: relative;
  height: 140px;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .06) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(rgba(0, 0, 0, .06) 1px, transparent 1px) 0 0 / 22px 22px,
    #ecece6;
}
.bs-pin {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 0;
  background: var(--bs-kicker);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--bs-deco) 45%, transparent);
  transform: translate(-50%, -50%) rotate(-45deg);
}
.bs-map-l { margin-top: 10px !important; font-size: 15px; font-weight: 500; color: #222; }
.bs-faq + .bs-faq { margin-top: 16px; }
.bs-q { font-family: var(--fd); font-size: 16px; font-weight: 700; color: #111; }
.bs-a { margin-top: 6px !important; font-size: 14px; line-height: 1.5; color: #444; }
.bs-foot { display: grid; gap: 14px; justify-items: start; padding: 32px 24px; background: var(--bs-bg); color: var(--bs-ink); font-size: 13px; }
.bs-foot p { opacity: .7; }

/* Subir su logo al boceto: plan B discreto (casi nadie lo trae a la mano) */
.ia-logo-up {
  position: relative;
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--gray-light);
  text-decoration: underline;
  text-decoration-color: rgba(var(--lime-rgb), .5);
  text-underline-offset: 3px;
  cursor: pointer;
}
.ia-logo-up:hover { color: var(--lime); }
.ia-logo-up input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.ia-logo-up:focus-within { outline: 2px solid var(--lime); outline-offset: 2px; }
.ia-boceto-copy > p.ia-logo-up-hint { margin-top: 4px; font-size: 12px; color: var(--gray-text); }

/* ¿Qué necesitas primero? (después de desbloquear) */
.ia-need {
  margin-top: 28px;
  padding: 28px;
  border: 1px solid rgba(var(--lime-rgb), .5);
  background: rgba(var(--lime-rgb), .04);
}
.ia-need[hidden] { display: none; }
.ia-need h3 { margin: 0 0 6px; font-family: var(--fd); font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: -.02em; color: var(--white); }
.ia-need > p { margin: 0 0 18px; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--gray-light); }
.ia-need-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ia-need-opt {
  display: grid;
  gap: 6px;
  padding: 18px 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: #0e0e0e;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.ia-need-opt:hover:not(:disabled) { border-color: var(--lime); }
.ia-need-opt:disabled { cursor: default; opacity: .45; }
.ia-need-opt.is-on { opacity: 1; border-color: var(--lime); background: rgba(var(--lime-rgb), .12); }
.ia-need-t { font-family: var(--fd); font-size: 16px; font-weight: 700; color: var(--white); }
.ia-need-s { font-size: 13px; line-height: 1.5; color: var(--gray-light); }
.ia-need-ok { margin: 16px 0 0 !important; font-size: 15px; color: var(--lime); }

/* Candado tras el veredicto: nombre + WhatsApp abren el duelo */
.ia-gate {
  margin-top: 28px;
  padding: 30px 28px;
  border: 1px solid rgba(var(--lime-rgb), .55);
  background: rgba(var(--lime-rgb), .05);
}
.ia-gate[hidden] { display: none; }
.ia-gate-tag {
  margin: 0 0 12px;
  font-family: var(--fd);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lime);
}
.ia-gate h3 {
  margin: 0 0 10px;
  font-family: var(--fd);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--white);
}
.ia-gate-p { margin: 0 0 12px; font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--gray-light); }
.ia-gate-list { margin: 0 0 24px; padding: 0; list-style: none; max-width: 760px; }
.ia-gate-list li {
  position: relative;
  padding: 7px 0 7px 26px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--white);
}
.ia-gate-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 14px;
  width: 12px;
  height: 7px;
  border: solid var(--lime);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}
.ia-gate-list li:last-child { color: var(--gray-light); }
.ia-gate-slot form { max-width: 720px; }

.ia-verdict-vis {
  --tone: #ff6464;
  grid-column: 2;
  margin: 4px 0 0 !important;
  font-family: var(--fd);
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tone) !important;
}
.ia-verdict-vis.is-mid { --tone: #f5c451; }
.ia-verdict-vis.is-good { --tone: var(--lime); }
.ia-verdict-vis:empty { display: none; }
.ia-verdict > p.ia-verdict-giro {
  grid-column: 2;
  margin-top: 10px;
  padding: 10px 14px;
  border-left: 2px solid #f5c451;
  background: rgba(245, 196, 81, .08);
  font-size: 14px;
  color: var(--white);
}
.ia-verdict > p.ia-verdict-giro:empty { display: none; }

/* Detalle técnico plegado */
.ia-tech { margin-top: 28px; }
.ia-tech[hidden] { display: none; }
.ia-tech > summary {
  cursor: pointer;
  padding: 16px 0;
  font-family: var(--fd);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-light);
  list-style: none;
}
.ia-tech > summary::-webkit-details-marker { display: none; }
.ia-tech > summary::before { content: '+ '; color: var(--lime); }
.ia-tech[open] > summary::before { content: '− '; }
.ia-tech > summary:hover { color: var(--lime); }
.ia-tech .ia-audit { margin-top: 0; }

/* Tonos de calificación: bajo / medio / bueno */
.ia-audit, .ia-pillar { --tone: #ff6464; }
.ia-pillar.is-na, .ia-audit.is-na { --tone: var(--gray-text); }
.ia-audit.is-mid, .ia-pillar.is-mid { --tone: #f5c451; }
.ia-audit.is-good, .ia-pillar.is-good { --tone: var(--lime); }

/* ── Auditoría: calificación + tira + un panel por área ───────────── */
.ia-audit {
  margin-top: 28px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #0e0e0e;
}
.ia-audit[hidden] { display: none; }
.ia-audit-label {
  margin: 0 0 8px;
  font-family: var(--fd);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gray-text);
}
.ia-audit-head {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.ia-audit-score {
  padding: 30px 28px;
  border-right: 1px solid rgba(255, 255, 255, .12);
}
.ia-audit-num {
  margin: 0;
  font-family: var(--fd);
  font-size: clamp(72px, 9vw, 112px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .9;
  color: var(--tone);
}
.ia-audit-num .of {
  font-size: .28em;
  letter-spacing: 0;
  color: var(--gray-text);
  margin-left: 4px;
}
.ia-audit-meta { padding: 30px 28px; min-width: 0; }
.ia-audit-url {
  margin: 0 0 12px;
  font-family: var(--fd);
  font-size: 18px;
  font-weight: 500;
  color: var(--white);
  overflow-wrap: anywhere;
}
.ia-audit-sum {
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--gray-light);
}

/* Tira: una casilla por revisión */
.ia-strip { display: flex; gap: 3px; list-style: none; margin: 0; padding: 0; }
.ia-strip li {
  flex: 1 1 0;
  max-width: 30px;
  height: 14px;
  background: rgba(255, 255, 255, .08);
  transform-origin: bottom;
  animation: iaCell .5s cubic-bezier(.16, 1, .3, 1) both;
}
.ia-strip li.is-ok { background: var(--lime); }
.ia-strip li.sev-high { background: #ff6464; }
.ia-strip li.sev-med { background: #f5c451; }
.ia-strip li.sev-low { background: transparent; box-shadow: inset 0 0 0 1px #f5c451; }
@keyframes iaCell { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Paneles por área (2×2 en escritorio) */
.ia-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ia-pillar { padding: 28px 28px 22px; min-width: 0; }
.ia-pillar:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .12); }
.ia-pillar:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .12); }
.ia-pillar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.ia-pillar-name {
  margin: 0;
  font-family: var(--fd);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--white);
}
.ia-pillar-val {
  margin: 0;
  font-family: var(--fd);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--tone);
  white-space: nowrap;
}
.ia-pillar-val .of { font-size: 12px; letter-spacing: 0; color: var(--gray-text); margin-left: 2px; }
.ia-pillar-bar {
  display: block;
  height: 3px;
  margin: 14px 0 12px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.ia-pillar-bar i {
  display: block;
  height: 100%;
  background: var(--tone);
  transform-origin: left;
  animation: iaBar .9s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes iaBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ia-pillar-desc {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray-text);
}
.ia-pillar-empty {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-light);
}

/* Cada revisión: marca ✓ / ✕ dibujada, título, evidencia y (bloqueado) arreglo */
.ia-checks { list-style: none; margin: 0; padding: 0; }
.ia-check {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.ia-check-mark {
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1px solid currentColor;
  color: var(--lime);
}
.ia-check.sev-high .ia-check-mark { color: #ff6464; }
.ia-check.sev-med .ia-check-mark,
.ia-check.sev-low .ia-check-mark { color: #f5c451; }
.ia-check.is-ok .ia-check-mark::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ia-check.is-fail .ia-check-mark::before,
.ia-check.is-fail .ia-check-mark::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 2px;
  height: 10px;
  background: currentColor;
  transform: rotate(45deg);
}
.ia-check.is-fail .ia-check-mark::after { transform: rotate(-45deg); }
/* No evaluado: ni acierto ni falla */
.ia-check.is-info .ia-check-mark { color: var(--gray-text); border-style: dashed; }
.ia-check.is-info .ia-check-mark::after {
  content: '?';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--fd);
  font-size: 11px;
  font-weight: 700;
}
.ia-check.is-info .ia-check-t { color: var(--gray-light); }
.ia-check-body { min-width: 0; }
.ia-check-body p { margin: 0; }
.ia-check-t { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--white); }
.ia-check.is-ok .ia-check-t { font-size: 14px; font-weight: 400; color: var(--gray-light); }
.ia-check-t .ia-sev { margin-left: 6px; white-space: nowrap; }
.ia-check-ev {
  margin-top: 4px !important;
  font-family: var(--fd);
  font-size: 13px;
  line-height: 1.55;
  color: var(--gray-text);
  overflow-wrap: anywhere;
}
.ia-check-lock {
  display: inline-block;
  margin-top: 8px !important;
  padding: 3px 8px;
  border: 1px dashed rgba(var(--lime-rgb), .4);
  font-family: var(--fd);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(var(--lime-rgb), .8);
}
.ia-check-why, .ia-check-fix {
  margin-top: 8px !important;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--gray-light);
}
.ia-check-why strong { font-weight: 500; color: var(--white); }
.ia-check-fix strong { font-weight: 500; color: var(--lime); }


/* Etiqueta de severidad */
.ia-sev {
  display: inline-block;
  font-family: var(--fd);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gray-text);
}
.is-high > .ia-sev, .sev-high .ia-sev { color: #ff6464; }
.sev-med .ia-sev { color: #f5c451; }

/* Error del simulador */
.ia-error {
  margin-top: 24px;
  padding: 14px 20px;
  border-left: 2px solid #ff6464;
  background: rgba(255, 70, 70, .06);
  color: #ff6464;
  font-size: 13px;
  line-height: 1.6;
}
.ia-error[hidden] { display: none; }

/* ── Captura del lead (reporte completo) ──────────────────────────── */
.ia-capture {
  margin-top: 56px;
  padding: 36px 32px 28px;
  border: 1px solid rgba(var(--lime-rgb), .35);
  background: #0e0e0e;
  position: relative;
}
.ia-capture::before {
  content: attr(data-label);
  position: absolute;
  top: -8px; left: 24px;
  padding: 0 10px;
  background: var(--black);
  font-family: var(--fd);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--lime);
}
.ia-capture h3 {
  font-family: var(--fd);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--white);
}
.ia-capture h3 .t-lime { color: var(--lime); }
.ia-capture > p {
  margin: 0 0 28px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--gray-light);
  max-width: 640px;
}
.ia-capture form { max-width: 640px; }
.ia-capture .form-feedback a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Demo en la ficha SEO (antes / después) ───────────────────────── */
.ia-demo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.ia-demo:has(.ia-demo-col:only-child) { grid-template-columns: 1fr; }
.ia-demo-col > .tag {
  display: block;
  font-family: var(--fd);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gray-text);
  margin: 0 0 12px;
}
.ia-demo-col.is-after > .tag { color: var(--lime); }
.ia-demo-col.is-after > .tag::after { content: ' · con AEO/GEO'; font-weight: 500; letter-spacing: .12em; color: var(--gray-light); text-transform: none; }
.ia-demo-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  margin-top: 28px;
}
.ia-demo-foot .ia-note { margin: 0; }

/* Touch: la línea superior entra al scroll (reveal-cards no cubre .ia-chat;
   lo hace js/ia.js con IntersectionObserver) */
@media (hover: none) {
  .ia-chat.in-view::before { animation: iaLine 1s cubic-bezier(.16, 1, .3, 1) .5s forwards; }
}
@keyframes iaLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ia-demo { grid-template-columns: 1fr; }
  .ia-arena, .ia-arena.n-2 { grid-template-columns: 1fr; }
  .ia-round { grid-template-columns: 1fr; gap: 10px; }
  .ia-round-res { justify-self: start; }
  .ia-devices { height: 470px; max-width: 250px; }
  .ia-laptop { display: none; }
  .ia-need-opts { grid-template-columns: 1fr; }
  .ia-audit-head { grid-template-columns: 1fr; }
  .ia-audit-score { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .ia-pillars { grid-template-columns: 1fr; }
  .ia-pillar:nth-child(odd) { border-right: 0; }
  .ia-pillar + .ia-pillar { border-top: 1px solid rgba(255, 255, 255, .12); }
}
@media (max-width: 640px) {
  .ia-form-grid { grid-template-columns: 1fr; }
  .ia-capture { padding: 30px 20px 22px; }
}
@media (max-width: 520px) {
  .ia-chat-head { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; }
  .ia-chat-head .model { white-space: normal; }
  .ia-chat-body { padding: 18px 14px 20px; }
  .ia-msg { grid-template-columns: 1fr; gap: 6px; }
  .ia-msg .txt { font-size: 14px; }
  .ia-audit-score, .ia-audit-meta, .ia-pillar { padding-left: 18px; padding-right: 18px; }
  .ia-audit-score, .ia-audit-meta { padding-top: 24px; padding-bottom: 24px; }
  .ia-verdict { grid-template-columns: 1fr; padding: 24px 18px; }
  .ia-verdict .ia-verdict-k { grid-row: auto; }
  .ia-fighter { padding: 18px 14px 18px 18px; }
  .ia-fighter.is-rival { padding: 18px 18px 18px 14px; }
  .ia-fighter-tag { font-size: 9px; letter-spacing: .14em; }
  .ia-fighter-name { font-size: 16px; }
  .ia-fighter-score .n { font-size: 44px; }
  .ia-vs { padding: 0; font-size: 18px; }
  .ia-round, .ia-duel-note { padding-left: 18px; padding-right: 18px; }
  .ia-gate { padding: 24px 18px; }
  .ia-verdict-vis, .ia-verdict > p.ia-verdict-giro { grid-column: 1; }
  .ia-boceto { padding: 24px 18px; }
  .ia-seg-opt span { padding: 12px 8px; font-size: 12px; }
  .ia-demo { gap: 18px; }
}

/* ── Movimiento reducido: sin parpadeo, sin puntos, sin línea ─────── */
@media (prefers-reduced-motion: reduce) {
  .ia-cursor, .ia-thinking i { animation: none; }
  .ia-chat::before { transition: none; transform: scaleX(1); }
  .ia-chat.in-view::before { animation: none; }
  .ia-pillar-bar i, .ia-strip li, .ia-rbar i, .ia-round, .ia-log-item, .is-in { animation: none; }
  .ia-bot::before, .ia-bot-name .dot, .ia-log-label .dot, .ia-devices, .dv-scroll.is-auto { animation: none; }
}

/* /ventas/ */
/* Variante de .sv-gauge sin cifra inventada: solo el bloque de texto,
   a una columna (evita la columna vacía del .sv-gauge-num que no usamos). */
.sv-gauge--text { grid-template-columns: 1fr; }

/* pricing-grid con 2 planes (Esencial/Pro): sin huérfanos ni columna vacía
   del repeat(3,1fr) por defecto de home.css. Solo aplica cuando hay
   exactamente 2 .plan-card — el resto de pages con 3 planes no se ve afectado. */
.pricing-grid:has(.plan-card:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* /ventas/: 3 módulos → 3 columnas (sin celda vacía); 1 col en móvil */
.sv-modules--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .sv-modules--3 { grid-template-columns: 1fr; } }

/* ── Página del simulador en celular: sin la barra fija "Cotizar mi proyecto"
   (compite con la acción del anuncio). Vuelve el WhatsApp flotante, que la barra
   sustituía. Solo donde está el simulador (#iaForm): ia.css también carga en la
   ficha SEO y en /ventas/. ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body:has(#iaForm) .mob-bar { display: none; }
  body:has(#iaForm) .float-wa { display: flex; }
}

/* ── Síntesis primero: al terminar, respuestas y bitácora plegadas ──────── */
.ia-result.is-folded .ia-arena,
.ia-result.is-folded .ia-log-wrap { display: none; }
.ia-anssum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #0e0e0e;
  animation: iaIn .5s cubic-bezier(.16, 1, .3, 1) both;
}
.ia-anssum-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ia-anssum-item {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px;
}
.ia-anssum-item .n { font-family: var(--fd); font-weight: 700; color: var(--white); }
.ia-anssum-item .v { color: var(--gray-light); }
.ia-anssum-item.is-hit { border-color: rgba(var(--lime-rgb), .6); }
.ia-anssum-item.is-hit .v { color: var(--lime); }
.ia-anssum-item.is-miss { border-color: rgba(255, 100, 100, .5); }
.ia-anssum-item.is-miss .v { color: #ff8a8a; }
.ia-anssum-btn {
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  color: var(--gray-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ia-anssum-btn:hover { color: var(--lime); }
.ia-result:not(.is-folded) .ia-anssum { margin-bottom: 14px; }

/* Un hallazgo real gratis dentro del candado */
.ia-gate-sample {
  margin: 4px 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-left: 3px solid #f5c451;
  background: #0e0e0e;
  max-width: 760px;
}
.ia-gate-sample.sev-high { border-left-color: #ff6464; }
.ia-gate-sample p { margin: 0; }
.ia-gate-sample-l { font-family: var(--fd); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-text); }
.ia-gate-sample-t { margin-top: 6px !important; font-size: 16px; font-weight: 500; color: var(--white); }
.ia-gate-sample-t .ia-sev { margin-left: 6px; }
.ia-gate-sample-ev { margin-top: 4px !important; font-family: var(--fd); font-size: 13px; color: var(--gray-text); }
.ia-gate-sample .ia-check-lock { margin-top: 10px !important; }

/* ── Cero, el personaje de la campaña "¿Te nombró la IA?" ─────────────
   Estilos del personaje en css/cero.css; aquí solo dónde va en /revisa/.
   Hero: grande sobre la tabla (escritorio) y chico arriba del H1 (celular).
   Bitácora y veredicto: chico, a la derecha. ─────────────────────────── */
.ia-cero-hero.is-desk {
  display: block;
  padding: 18px 0 10px;
  font-size: clamp(7px, .85vw, 11px);
  text-align: center;
  overflow: hidden;
}
.ia-cero-hero.is-cel { display: none; }
/* Sin cero.js los <pre> quedan vacíos: no ocupan lugar */
pre[data-cero]:empty { display: none; }

.ia-log-wrap:has(.ia-cero-log:not(:empty)) {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}
.ia-log-main { min-width: 0; }

.ia-verdict:has(.ia-cero-verdict:not(:empty)) { grid-template-columns: auto 1fr auto; }
.ia-cero-verdict { grid-column: 3; grid-row: 1 / span 3; align-self: center; }

/* Tableta y celular: en el veredicto, Cero al lado de la cifra y el texto abajo */
@media (max-width: 900px) {
  .ia-cero-hero.is-desk { display: none; }
  .ia-cero-hero.is-cel { display: block; }
  .ia-verdict:has(.ia-cero-verdict:not(:empty)) { grid-template-columns: 1fr auto; }
  .ia-verdict:has(.ia-cero-verdict:not(:empty)) > :not(.ia-verdict-k):not(.ia-cero-verdict) { grid-column: 1 / -1; }
  .ia-verdict:has(.ia-cero-verdict:not(:empty)) > .ia-verdict-k { grid-column: 1; grid-row: 1; }
  .ia-verdict > .ia-cero-verdict { grid-column: 2; grid-row: 1; }
  .ia-verdict:has(.ia-cero-verdict:not(:empty)) { column-gap: 12px; }
  .ia-verdict:has(.ia-cero-verdict:not(:empty)) .ia-verdict-k .lbl { white-space: nowrap; }
}
@media (max-width: 640px) {
  .ia-log-wrap:has(.ia-cero-log:not(:empty)) { grid-template-columns: 1fr; gap: 6px; }
  .ia-cero-log { order: -1; justify-self: center; }
}


/* Veredicto: dos hechos (te recomendaron k de n · te conocen) en vez de un índice */
.ia-verdict-vis .ia-fact { --tone: #ff6464; color: var(--tone); }
.ia-verdict-vis .ia-fact.is-mid { --tone: #f5c451; }
.ia-verdict-vis .ia-fact.is-good { --tone: var(--lime); }
.ia-verdict-vis .ia-fact + .ia-fact::before { content: ' · '; color: var(--gray-text); }

/* Aviso: apreciación con margen de error, no medición exacta */
.ia-verdict > p.ia-verdict-note,
.ia-duel > p.ia-verdict-note {
  grid-column: 1 / -1;
  margin: 18px 0 0;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--gray-text);
}
.ia-duel > p.ia-duel-disc { margin: 0; padding: 0 28px 18px; }

/* Celular: Cero centrado y un poco más grande (bitácora y veredicto) */
@media (max-width: 640px) {
  .ia-log-wrap > pre.ia-cero-log,
  .ia-verdict > pre.ia-cero-verdict { font-size: 8px; width: fit-content; margin-left: auto; margin-right: auto; }
  .ia-verdict:has(.ia-cero-verdict:not(:empty)) { grid-template-columns: 1fr; }
  .ia-verdict > .ia-cero-verdict { grid-column: 1; grid-row: auto; order: -1; margin-bottom: 6px; }
  .ia-duel > p.ia-duel-disc { padding: 0 18px 18px; }
  .ia-verdict:has(.ia-cero-verdict:not(:empty)) > .ia-verdict-k { grid-row: auto; }
}

/* Portada en tableta y celular: Cero grande y centrado arriba de la línea
   "IA-00…"; el H1 con cortes fijos a 34 px ("¿La IA te / recomienda / a ti
   o a tu / competencia?") y el párrafo debajo de los botones, para que el
   botón quede en el primer pantallazo. */
@media (min-width: 641px) {
  .ia-h1 .br-cel { display: none; }
}
@media (max-width: 900px) {
  /* -2.16em = las 2 filas vacías que Cero deja arriba de la antena en reposo */
  .ia-hero-top > pre.ia-cero-hero.is-cel { font-size: 9px; width: fit-content; margin: -2.16em auto 18px; }
}
@media (max-width: 640px) {
  .ia-hero-top > pre.ia-cero-hero.is-cel { font-size: 8px; margin-bottom: 8px; }
  /* Primer pantallazo compacto (28 sep 2026): en Clarity la gente del anuncio no bajaba
     a los campos; título a 28 px y espacios ajustados para que se vean los 3 campos */
  .ia-hero-top .sv-code { display: none; } /* repetía la pregunta del título */
  .ia-h1 { font-size: 28px; margin-bottom: 0; }
  .sv-hero > div:has(> .ia-h1) { display: flex; flex-direction: column; }
  .sv-hero > div:has(> .ia-h1) > .sv-cta-row { order: 1; }
  .sv-hero > div:has(> .ia-h1) > .sv-lead { order: 2; margin: 28px 0 0; }
  /* Formulario en la portada (28 sep 2026): va justo después del título y sustituye al botón */
  /* Ejemplo compacto: no debe empujar los 3 campos fuera del primer pantallazo */
  .sv-hero > div:has(> .ia-h1) > .ia-ejemplo { order: 1; margin: 14px 0 0; padding: 8px 12px; max-width: none; }
  .ia-ejemplo-t { margin-bottom: 4px !important; font-size: 9px; }
  .ia-ejemplo-r { font-size: 13px; padding: 1px 0; }
  .ia-ejemplo-r b { font-size: 15px; }
  .ia-ejemplo-n { display: none; }
  .sv-hero > div:has(> .ia-h1) > .ia-form-slot { order: 1; margin-top: 16px; }
  .sv-hero > div:has(> .ia-form-slot > .ia-form) > .sv-cta-row { display: none; }
  .ia-form-slot .ia-form .form-group { margin-bottom: 10px; }
  .ia-form-slot .form-label { margin-bottom: 4px; }
  .ia-form-slot input[type="text"] { padding-top: 10px; padding-bottom: 10px; }
  .ia-form-slot .form-hint { font-size: 12px; }
  /* Sin migas en celular: en la página del anuncio sobran y empujan todo */
  .sv-sheet:has(.ia-h1) > .sv-crumbs { display: none; }
  .sv-sheet:has(.ia-h1) { padding-top: 72px; } /* barra de 64 px + 8 px (Cero ya trae aire arriba) */
}

/* Candado: la línea de permiso va debajo del botón ("Al enviar, aceptas…") */
.form-hint.ia-lead-legal { margin: 14px 0 0; }
.ia-lead-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ia-form-foot .form-hint a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }