/* ============================================================
   "Ya no te buscan. Te preguntan.": las escenas propias.
   - .fan     [data-wide="fan"]:     una pregunta que se abre en búsquedas.
   - .topics  [data-wide="topics"]:  palabra clave contra tema.
   - .engines [data-wide="engines"]: preguntas por motor, como un escaneo.
   El motor (story.js) prende la escena y le pone data-step.
   ============================================================ */

/* ---------- Teléfono: Google y el asistente ---------- */
.scr-serp { background: #fff; padding: 44px 14px 0; font-family: Arial, var(--font-sans); }
.serp-q { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 999px; box-shadow: 0 1px 6px rgba(32, 33, 36, .28); margin: 8px 0 12px; font-size: 13px; }
.serp-r { padding: 9px 2px 11px; border-bottom: 1px solid #EEE; }
.serp-r.is-us { background: #F3FFF1; margin: 0 -8px; padding-left: 10px; padding-right: 10px; border-radius: 8px; }
.serp-r p { margin: 0; }
.serp-url { font-size: 11px; color: #4D5156; }
.serp-t { margin: 3px 0 !important; font-size: 15px; color: #1A0DAB; line-height: 1.25; }
.serp-d { font-size: 11.5px; color: #4D5156; }
.serp-pos { float: right; padding: 1px 7px; border-radius: 999px; background: #111; color: #fff; font-size: 10px; font-family: var(--font-mono); }

.scr-ai { background: #fff; display: flex; flex-direction: column; }
.ai-top { display: flex; align-items: center; gap: 8px; padding: 44px 14px 10px; border-bottom: 1px solid #EEE; font-weight: 700; font-size: 14px; }
.ai-top img { width: 20px; height: 20px; border-radius: 5px; }
.ai-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px; overflow: hidden; }
.ai-user { align-self: flex-end; max-width: 86%; padding: 10px 12px; border-radius: 16px 16px 4px 16px; background: #F1F1F4; font-size: 13px; line-height: 1.4; }
.ai-think { font-size: 11.5px; color: #6A6A7E; font-style: italic; }
.ai-ans { font-size: 12.5px; line-height: 1.45; color: #111; }
.ai-ans p { margin: 0 0 8px; }
.ai-ans ol { margin: 0 0 8px; padding-left: 18px; }
.ai-ans li { margin-bottom: 4px; }
.ai-cite { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 4px; background: #EEE; font-size: 9.5px; font-weight: 700; text-align: center; vertical-align: 1px; color: #444; }
.ai-src { display: flex; flex-wrap: wrap; gap: 5px; }
.ai-src span { padding: 3px 8px; border-radius: 999px; border: 1px solid #E2E2E8; font-size: 10.5px; color: #444; }
.screen.is-on .ai-late { animation: rise .5s var(--ease) .6s both; }

/* ---------- Fan-out ---------- */
.fan { padding: 22px; container-type: inline-size; }
.fan-stage { position: relative; height: 420px; }
.fan-q {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: min(330px, 46%); transform: translate(-50%, -50%);
  padding: 14px 16px; border-radius: 16px; background: #14141F; color: #F4F2FA; font-size: 13.5px; line-height: 1.4; text-align: center;
}
.fan-q small { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--st-caption); }
.fan-chip {
  position: absolute; left: var(--x); top: var(--y); z-index: 1; width: 196px; transform: translate(-50%, -50%) scale(.6);
  padding: 8px 10px; border-radius: 10px; background: #F4F4F7; border: 1.5px solid #E2E2E8; font-size: 12px; line-height: 1.3; color: #14141F;
  opacity: 0; transition: opacity .45s var(--ease), transform .6s var(--ease-pop), background .4s, border-color .4s;
  transition-delay: calc(var(--i) * 70ms);
}
.fan-chip::before { content: "🔎 "; font-size: 10px; }
.fan-chip small { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 10px; color: #6A6A7E; opacity: 0; transition: opacity .4s; }
.fan:not([data-step="1"]) .fan-chip { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.fan[data-step="3"] .fan-chip.is-us, .fan[data-step="4"] .fan-chip.is-us { background: #EAF9E6; border-color: #1F9D5C; }
.fan[data-step="3"] .fan-chip:not(.is-us) { opacity: .45; }
.fan[data-step="4"] .fan-chip small { opacity: 1; }
.fan[data-step="4"] .fan-chip.is-third { border-color: var(--st-violet); background: #F3EEFF; }
.fan-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fan-lines line { stroke: #C9C9D6; stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0; transition: opacity .5s .2s; }
.fan:not([data-step="1"]) .fan-lines line { opacity: 1; }
.fan-foot { margin: 8px 0 0; font-size: 11.5px; color: #6A6A7E; text-align: center; }
@container (max-width: 640px) {
  .fan-stage { height: 520px; }
  .fan-q { top: 50%; width: 70%; font-size: 12px; }
  .fan-chip { width: 44%; font-size: 10.5px; padding: 6px 8px; left: var(--xm, var(--x)); top: var(--ym, var(--y)); }
}

/* ---------- Palabra clave contra tema ---------- */
.topics { padding: 22px 24px; container-type: inline-size; }
.tp-grid { display: grid; grid-template-columns: .8fr 1.6fr; gap: 22px; align-items: center; }
.tp-kw { padding: 16px; border-radius: 14px; background: #F4F4F7; }
.tp-kw p { margin: 0; }
.tp-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #6A6A7E; margin-bottom: 8px !important; }
.tp-kw b { display: block; font-size: 17px; color: #14141F; }
.tp-kw .tp-rank { margin-top: 10px !important; display: inline-block; padding: 3px 10px; border-radius: 999px; background: #14141F; color: #fff; font-family: var(--font-mono); font-size: 11px; }
.tp-map { position: relative; height: 340px; }
.tp-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  padding: 12px 16px; border-radius: 14px; background: #14141F; color: #fff; font-weight: 700; font-size: 13.5px; text-align: center; max-width: 190px;
  opacity: 0; transition: opacity .5s var(--ease);
}
.tp-node {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%) scale(.7); width: 140px;
  padding: 8px 10px; border-radius: 10px; border: 1.5px solid #E2E2E8; background: #fff; font-size: 11.5px; line-height: 1.3; color: #14141F; text-align: center;
  opacity: 0; transition: opacity .45s var(--ease), transform .6s var(--ease-pop), background .4s, border-color .4s;
  transition-delay: calc(var(--i) * 60ms);
}
.tp-node i { display: block; margin-top: 4px; font-style: normal; font-family: var(--font-mono); font-size: 10px; color: #6A6A7E; }
.topics:not([data-step="1"]) .tp-center, .topics:not([data-step="1"]) .tp-node { opacity: 1; }
.topics:not([data-step="1"]) .tp-node { transform: translate(-50%, -50%) scale(1); }
.topics[data-step="1"] .tp-map { opacity: .25; }
.topics[data-step="3"] .tp-node.us { background: #EAF9E6; border-color: #1F9D5C; }
.topics[data-step="3"] .tp-node:not(.us) { background: #FFF1F1; border-color: #F3B3B5; }
.topics[data-step="4"] .tp-node.them { background: #F3EEFF; border-color: var(--st-violet); }
.topics[data-step="4"] .tp-node:not(.them) { opacity: .5; }
.tp-legend { display: flex; gap: 14px; justify-content: center; margin: 6px 0 0; font-size: 11.5px; color: #4A4A5E; opacity: 0; transition: opacity .4s; }
.topics[data-step="3"] .tp-legend.is-us, .topics[data-step="4"] .tp-legend.is-them { opacity: 1; }
.topics:not([data-step="3"]) .tp-legend.is-us, .topics:not([data-step="4"]) .tp-legend.is-them { position: absolute; }
.tp-legend b { font-family: var(--font-cond); font-weight: 400; font-size: 22px; color: #14141F; }
.tp-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tp-map line { stroke: #D9D9E3; stroke-width: 1.5; opacity: 0; transition: opacity .5s .2s; }
.topics:not([data-step="1"]) .tp-map line { opacity: 1; }
@container (max-width: 640px) {
  .tp-grid { grid-template-columns: 1fr; gap: 10px; }
  .tp-map { height: 380px; }
  .tp-node { width: 42%; font-size: 10.5px; left: var(--xm, var(--x)); top: var(--ym, var(--y)); }
}

/* ---------- Motores ---------- */
.engines { padding: 22px 24px 18px; container-type: inline-size; }
.en-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.en-head p { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6A6A7E; }
.en-head b { font-family: var(--font-cond); font-weight: 400; font-size: 22px; text-transform: uppercase; color: #14141F; }
.en-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.en-t th { padding: 8px 6px 10px; border-bottom: 2px solid #14141F; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #6A6A7E; text-align: center; vertical-align: bottom; }
.en-t th:first-child { text-align: left; }
.en-t th img { display: block; width: 22px; height: 22px; margin: 0 auto 4px; border-radius: 6px; object-fit: contain; }
.en-t td { padding: 9px 6px; border-bottom: 1px solid #ECECF1; text-align: center; transition: background .4s, opacity .4s; }
.en-t td:first-child { text-align: left; color: #14141F; line-height: 1.3; }
.en-c { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 6px; border-radius: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.en-c.yes { background: #D1FFCA; color: #0B6B3A; }
.en-c.no { background: #F4F4F7; color: #9B9BB4; }
.en-c.them { background: #F3EEFF; color: #5B3BC4; font-weight: 600; font-size: 10px; }
.en-t tfoot td { border-bottom: 0; padding-top: 12px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: #14141F; }
.engines[data-step="2"] tbody tr:not(.is-focus) td, .engines[data-step="3"] tbody tr:not(.is-focus) td { opacity: .3; }
.engines[data-step="2"] tr.is-focus td { background: #FFF9DB; }
.engines:not([data-step="3"]) .en-c.them { background: #F4F4F7; color: #9B9BB4; font-size: 0; }
.engines:not([data-step="3"]) .en-c.them::after { content: "✕"; font-size: 11px; }
.engines[data-step="3"] tr.is-focus td { background: #F7F3FF; }
.en-foot { margin: 10px 0 0; font-size: 11.5px; color: #6A6A7E; }
@container (max-width: 640px) {
  .en-t { font-size: 11px; }
  .en-t th { font-size: 0; }
  .en-t th:first-child { font-size: 9.5px; }
  .en-t th img { width: 20px; height: 20px; margin: 0 auto; }
  .en-c { min-width: 22px; padding: 0 3px; font-size: 10px; }
}