/* =====================================================================
   WOWNER · Landing SEO y GEO · estilos específicos (carga tras wowner.css)
   ===================================================================== */

/* ---------- Hero: buscadores y asistentes ---------- */
.hero__engines { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem; margin-top: 2rem; }
.hero__engines li { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.9); font-weight: 600; font-size: .88rem; }
.hero__engines img { width: 18px; height: 18px; filter: brightness(0) invert(1); opacity: .9; }
.hero__engines .eng-dot { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #10A37F, #0f7a5f); display: grid; place-items: center; font-size: .6rem; font-weight: 800; color: #fff; }
.hero__tools { margin-top: 1.4rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem 1.1rem; color: var(--c-muted-dark); font-size: .82rem; }
.hero__tools b { color: rgba(255,255,255,.9); font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.hero__tools img { width: 16px; height: 16px; filter: brightness(0) invert(1); opacity: .85; }

/* ---------- SEO vs GEO ---------- */
.duo { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo__card { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1.9rem; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.duo__card--geo { background: var(--c-navy); color: var(--c-white); border-color: transparent; }
.duo__card--geo::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(227,100,20,.35), transparent 65%); pointer-events: none; }
.duo__tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .65rem; border-radius: 999px; background: var(--c-orange-100); color: var(--c-orange-600); margin-bottom: .8rem; }
.duo__card--geo .duo__tag { background: rgba(227,100,20,.2); color: #FFB27A; }
.duo__card h3 { font-size: 1.35rem; }
.duo__card > p { color: var(--c-muted); }
.duo__card--geo > p { color: var(--c-muted-dark); }
.duo__list { display: grid; gap: .7rem; margin-top: 1.1rem; }
.duo__list li { display: grid; grid-template-columns: 110px 1fr; gap: .75rem; align-items: start; font-size: .95rem; padding-top: .7rem; border-top: 1px solid var(--c-line); }
.duo__card--geo .duo__list li { border-top-color: rgba(255,255,255,.12); }
.duo__list small { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); padding-top: .15em; }
.duo__card--geo .duo__list small { color: var(--c-muted-dark); }
.duo__bridge { margin-top: 1.25rem; text-align: center; color: var(--c-muted); font-size: .95rem; }
.duo__bridge b { color: var(--c-text); }

/* ---------- Servicios: chips de CMS ---------- */
.svc__chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: -.4rem 0 1rem; }
.svc__chips span { font-size: .74rem; font-weight: 600; padding: .25rem .55rem; border-radius: 999px; background: var(--c-off); color: var(--c-text); display: inline-flex; align-items: center; gap: .3rem; }
.svc__chips img { width: 13px; height: 13px; }


/* Móvil */
@media (max-width: 560px) {
  .duo__card { padding: 1.4rem; }
  .duo__list li { grid-template-columns: 90px 1fr; }
}