/* ==========================================================================
   Página de posicionamiento SEO y GEO — solo la maqueta del hero.
   Reutiliza los marcos .web-browser y .web-phone de web-service.css y
   cambia lo de dentro: en el navegador, una página de resultados; en el
   móvil, la respuesta de un asistente que cita la marca.
   ========================================================================== */

.seo-serp{padding:16px 18px 14px;display:flex;flex-direction:column;gap:9px}

.seo-searchbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid rgba(27,24,21,.18);border-radius:999px;
  padding:7px 12px;font-size:8px;color:#5f5952;background:#fff;
}
.seo-searchbar__ic{font-size:11px;color:#8c8279}

.seo-result{display:flex;gap:9px;align-items:flex-start;padding:6px 0}
.seo-result__pos{
  flex:0 0 auto;width:14px;height:14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:7px;font-weight:600;color:#8c8279;
  border:1px solid rgba(27,24,21,.18);
}
.seo-result span{display:block}
.seo-result__url{font-size:6.5px;color:#8c8279;letter-spacing:.02em}
.seo-result__title{font-size:10px;font-weight:500;color:#2f4bb4;margin-top:2px;letter-spacing:-.02em}
.seo-result__desc{font-size:7px;color:#6f675f;line-height:1.5;margin-top:3px}

/* El resultado propio: fondo cálido y el número en tinta */
.seo-result--win{
  background:linear-gradient(90deg,rgba(227,101,57,.13),rgba(227,101,57,0));
  border-left:2px solid #e36539;
  margin:0 -18px;padding:8px 18px 9px 16px;
}
.seo-result--win .seo-result__pos{background:#e36539;border-color:#e36539;color:#fff}
.seo-result--win .seo-result__title{color:#1b1815}

.seo-map{
  margin-top:2px;display:flex;align-items:center;gap:7px;
  border-top:1px solid rgba(27,24,21,.13);padding-top:9px;
  font-size:7px;color:#6f675f;
}
.seo-map__pin{color:#e36539;font-size:10px}

/* ---------- Móvil: la respuesta del asistente ---------- */
.seo-ai__badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:7px;
  background:var(--ink);color:#fff;font-size:8px;font-weight:600;letter-spacing:.04em;
}
.seo-ai__q{
  margin:11px 0 0;font-size:9px;line-height:1.45;color:#5f5952;
  border-left:2px solid rgba(27,24,21,.2);padding-left:7px;
}
.seo-ai__answer{margin-top:13px;display:flex;flex-direction:column;gap:6px}
.seo-ai__line{display:block;height:5px;border-radius:3px;background:rgba(27,24,21,.13)}
.seo-ai__line--short{width:58%}
.seo-ai__brand{
  align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:-.02em;
  color:#1b1815;background:rgba(227,101,57,.2);
  border-radius:4px;padding:2px 6px;margin:2px 0;
}

@media (max-width:560px){
  .seo-serp{padding:13px 14px 11px;gap:7px}
  .seo-result--win{margin:0 -14px;padding:7px 14px 8px 12px}
  .seo-ai__q{font-size:8px}
}