/* Escenas de Posicionamiento Web.
   Las piezas comunes (.esc, .ui, la posada, los iconos) están en
   paginas-servicio.css; este archivo lo encola mdd-ajustes.php solo en
   las páginas que lo usan (MDD_ESCENAS_PAGINA). */

/* ---------- Escenas de Posicionamiento Web (2026-09-24) ----------
   Todo lo que se trabaja en SEO se ve en una pantalla de Google.
   El sitio de ejemplo es el de la Posada del Puerto. */

/* Términos: el buscador con el autocompletado */
.kw-box { left: 14px; right: 14px; top: 14px; border-radius: 12px; overflow: hidden; }
.kw-campo { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-bottom: 1px solid #EEF2F6; font-size: 8px; white-space: nowrap; }
.kw-campo svg { width: 10px; height: 10px; flex: none; }
.kw-campo i { width: 1px; height: 10px; background: #1A73E8; animation: kw-caret 1s steps(1) infinite; }
@keyframes kw-caret { 50% { opacity: 0; } }
.kw-sug { display: grid; grid-template-columns: 9px 1fr auto; gap: 6px; align-items: center; height: 17px; padding: 0 10px; font-size: 7.5px; white-space: nowrap; animation: kw-sug 6s infinite both; animation-delay: var(--d); }
.kw-sug svg { width: 8px; height: 8px; }
.kw-sug span { overflow: hidden; text-overflow: ellipsis; }
.kw-sug b { font-weight: 800; }
.kw-sug em { font-style: normal; font-size: 6.5px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); border-radius: 99px; padding: 1px 5px; }
.kw-sug.is-sel { background: #F8FAFC; }
@keyframes kw-sug { 0%, 6% { opacity: 0; transform: translateY(-3px); } 14%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Títulos y descripciones: el resultado y sus contadores */
.sn-res { left: 12px; right: 12px; top: 12px; padding: 8px 10px; display: grid; gap: 2px; }
.sn-sitio { display: flex; align-items: center; gap: 5px; font-size: 7px; white-space: nowrap; }
.sn-sitio .ps-logo::before { width: 12px; height: 12px; }
.sn-sitio span { display: grid; line-height: 1.15; }
.sn-sitio small { font-size: 6px; color: #4D5156; }
.sn-tit { font-size: 9.5px; font-weight: 600; color: #1A0DAB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.sn-desc { font-size: 7px; line-height: 1.4; color: #4D5156; }
.sn-cont { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sn-cont div { display: grid; grid-template-columns: 1fr auto; gap: 3px; font-size: 7px; font-weight: 700; color: #475569; }
.is-dark .sn-cont div { color: #cbd5e1; }
.sn-cont b { font-weight: 800; color: #0B8A63; }
.sn-cont i { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(30,41,59,.12); position: relative; overflow: hidden; }
.sn-cont i::after { content: ""; position: absolute; inset: 0; width: var(--p); background: #0B8A63; border-radius: 2px; transform-origin: left; animation: sn-barra 6s ease-out infinite; }
@keyframes sn-barra { 0% { transform: scaleX(0); } 40%, 100% { transform: none; } }

/* Estructura: la dirección legible y el esquema de encabezados */
.hx-doc { inset: 12px 14px; padding: 7px 9px; display: grid; gap: 4px; align-content: start; }
.hx-doc .nv-url { margin: 0 0 3px; font-size: 6.5px; }
.hx-doc .nv-url b { font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); border-radius: 2px; padding: 0 2px; }
.hx-f { display: flex; align-items: center; gap: 5px; font-size: 7.5px; font-weight: 700; white-space: nowrap; animation: hx-f 6s infinite both; animation-delay: var(--d); }
.hx-f i { font-style: normal; font-size: 6px; font-weight: 800; width: 16px; text-align: center; border-radius: 3px; padding: 1px 0; flex: none; }
.hx-f.es-1 i { background: var(--c); color: #fff; }
.hx-f.es-2 { padding-left: 12px; font-weight: 600; }
.hx-f.es-2 i { background: color-mix(in srgb, var(--c) 16%, #fff); color: var(--c); }
.hx-f.es-3 { padding-left: 24px; font-weight: 600; color: #475569; }
.hx-f.es-3 i { border: 1px solid color-mix(in srgb, var(--c) 45%, #fff); color: var(--c); }
@keyframes hx-f { 0%, 6% { opacity: 0; transform: translateX(-4px); } 12%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Datos estructurados: la ficha enriquecida y el código que la arma */
.jd-code { right: 12px; top: 22px; bottom: 12px; width: 46%; background: #0F172A; color: #cbd5e1; padding: 8px 8px 8px 10px; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 6.3px; line-height: 1.55; white-space: pre; overflow: hidden; }
.jd-code .k { color: #7DD3FC; } .jd-code .s { color: #FDE68A; } .jd-code .n { color: #86EFAC; }
.jd-ficha { left: 12px; top: 12px; width: 52%; padding: 8px 9px; display: grid; gap: 3px; z-index: 1; }
.jd-ficha b { font-size: 9px; font-weight: 800; }
.jd-est { display: flex; align-items: center; gap: 3px; font-size: 7px; font-weight: 700; }
.jd-est span { color: #F59E0B; letter-spacing: 1px; font-size: 8px; }
.jd-ficha small { font-size: 6.5px; color: #64748b; font-weight: 600; }
.jd-dato { display: flex; align-items: center; gap: 4px; font-size: 6.8px; white-space: nowrap; }
.jd-dato svg { width: 8px; height: 8px; flex: none; }
.jd-dato.es-verde { color: #0B8A63; font-weight: 800; }
.jd-bot { display: flex; gap: 4px; margin-top: 2px; }
.jd-bot span { font-size: 6.3px; font-weight: 800; color: #1A73E8; border: 1px solid #D2E3FC; border-radius: 99px; padding: 2px 6px; white-space: nowrap; }
.jd-ficha::after { content: ""; position: absolute; inset: -3px; border-radius: 9px; border: 1.5px solid var(--c); opacity: 0; animation: jd-foco 6s infinite; }
@keyframes jd-foco { 0%, 40% { opacity: 0; } 50%, 85% { opacity: 1; } 100% { opacity: 0; } }

/* Velocidad: la carga en el celular, cuadro por cuadro */
.fs-tira { inset: 10px 12px; padding: 7px 9px; display: grid; grid-template-rows: auto 1fr; gap: 6px; }
.fs-cab { display: flex; justify-content: space-between; font-size: 7px; font-weight: 700; color: #64748b; white-space: nowrap; }
.fs-cab b { color: #0B8A63; font-weight: 800; }
.fs-cuadros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; min-height: 0; }
.fs-c { display: grid; grid-template-rows: 1fr auto; gap: 3px; justify-items: center; min-height: 0; }
.fs-tel { width: 100%; max-width: 44px; height: 100%; border: 2px solid #0F172A; border-radius: 6px; padding: 2px; display: grid; gap: 2px; align-content: start; overflow: hidden; position: relative; }
.fs-tel::after { content: ""; position: absolute; inset: -2px; border-radius: 6px; border: 2px solid var(--c); opacity: 0; animation: fs-foco 4s steps(1) infinite; animation-delay: var(--d); }
@keyframes fs-foco { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
.fs-tel i { display: block; border-radius: 1px; }
.fs-tel .f-card { background: #EEF2F6; }
.fs-tel .f-top { height: 4px; background: #1E293B; opacity: .8; }
.fs-tel .f-foto { height: 22px; }
.fs-tel .f-tit { height: 3px; width: 70%; background: #1E293B; }
.fs-tel .f-btn { height: 4px; width: 40%; background: #FF1632; }
.fs-tel .f-card { height: 9px; }
.fs-c small { font-size: 6.5px; font-weight: 800; color: #475569; }

/* Enlaces: las páginas entre sí, y la mención de afuera */
.ln-red { position: absolute; inset: 10px 12px; }
.ln-red svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ln-red path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ln-red .ln-int { stroke: rgba(30,41,59,.3); stroke-width: 1.2; stroke-dasharray: 2 3; }
.is-dark .ln-red .ln-int { stroke: rgba(255,255,255,.3); }
.ln-red .ln-ext { stroke: color-mix(in srgb, var(--c) 35%, transparent); stroke-width: 2; }
.ln-red .ln-pulso { stroke: var(--c); stroke-width: 3; stroke-dasharray: 10 100; animation: ln-pulso 2.4s linear infinite; }
@keyframes ln-pulso { from { stroke-dashoffset: 110; } to { stroke-dashoffset: 0; } }
.ln-p { position: absolute; transform: translate(-50%, -50%); width: 64px; padding: 4px 5px; display: grid; gap: 2px; font-size: 6.5px; font-weight: 800; white-space: nowrap; }
.ln-p i { display: block; height: 2.5px; border-radius: 1px; background: #EEF2F6; }
.ln-p i + i { width: 70%; }
.ln-p.es-blog { outline: 1.5px solid var(--c); }
.ln-p.es-diario { width: 70px; background: #1E293B; color: #fff; }
.ln-p.es-diario i { background: rgba(255,255,255,.2); }
.ln-p.es-diario small { font-size: 5.5px; font-weight: 700; color: #94a3b8; letter-spacing: .06em; text-transform: uppercase; }
.ln-aut { position: absolute; left: 58%; top: 80%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 3px; font-size: 7px; font-weight: 800; color: #fff; background: var(--c); border-radius: 99px; padding: 2px 7px; white-space: nowrap; animation: ln-aut 2.4s ease-out infinite; }
@keyframes ln-aut { 0%, 70% { transform: translate(-50%, -50%); } 80% { transform: translate(-50%, -50%) scale(1.12); } 100% { transform: translate(-50%, -50%); } }