/* Escenas de Diseño Web (también las usa Servicios).
   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 Diseño Web (rehechas el 2026-09-24) ----------
   Todas trabajan sobre el sitio de un cliente inventado, la «Posada del
   Puerto», frente al mar; la de navegación usa una ferretería. */

/* 1 · Diseño: el programa de diseño, con capas, lienzo y propiedades */
.dz-app { inset: 10px; display: grid; grid-template-rows: 14px 1fr; overflow: hidden; }
.dz-bar { display: flex; align-items: center; gap: 4px; padding: 0 6px; background: #1E293B; border-radius: 7px 7px 0 0; }
.dz-bar i { width: 6px; height: 6px; border-radius: 1.5px; background: rgba(255,255,255,.28); }
.dz-bar i.is-act { background: var(--c); }
.dz-bar span { margin: 0 auto; font-size: 6px; font-weight: 600; color: rgba(255,255,255,.72); white-space: nowrap; }
.dz-cuerpo { display: grid; grid-template-columns: 54px 1fr 52px; min-height: 0; }
.dz-capas, .dz-props { padding: 5px; display: grid; gap: 3px; align-content: start; font-size: 6px; font-weight: 600; color: #475569; white-space: nowrap; overflow: hidden; }
.dz-capas { border-right: 1px solid #EEF2F6; }
.dz-props { border-left: 1px solid #EEF2F6; }
.dz-capas small, .dz-props small { font-size: 5.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
.dz-capas span { display: flex; align-items: center; gap: 3px; padding: 1px 2px; border-radius: 2px; }
.dz-capas span::before { content: ""; width: 4px; height: 4px; border: 1px solid #94a3b8; border-radius: 1px; flex: none; }
.dz-capas .es-hija { padding-left: 7px; }
.dz-capas .is-sel { background: color-mix(in srgb, var(--c) 14%, #fff); color: #1E293B; }
.dz-capas .is-sel::before { border-color: var(--c); }
.dz-props b { color: #1E293B; font-weight: 700; }
.dz-sw { display: flex; align-items: center; gap: 3px; }
.dz-sw i { width: 8px; height: 8px; border-radius: 2px; border: 1px solid rgba(15,23,42,.12); }
.dz-sw .es-anim { animation: dz-color 6s infinite; }
.dz-lienzo { position: relative; background-color: #E9EDF2; background-image: radial-gradient(rgba(30,41,59,.14) .8px, transparent 1px); background-size: 7px 7px; display: grid; place-items: center; }
.dz-art { width: 84%; background: #fff; border-radius: 3px; box-shadow: 0 4px 10px -4px rgba(15,23,42,.3); padding: 4px; display: grid; gap: 3px; font-size: 5.5px; }
.dz-art .ps-foto { height: 30px; border-radius: 2px; position: relative; }
.dz-titulo { position: relative; justify-self: start; font-size: 7.5px; font-weight: 800; line-height: 1.1; padding: 0 1px; }
.dz-titulo::before { content: ""; position: absolute; inset: -2px -3px; border: 1px solid var(--c); }
.dz-titulo b { position: absolute; width: 3px; height: 3px; background: #fff; border: 1px solid var(--c); }
.dz-titulo b:nth-of-type(1) { left: -5px; top: -4px; }
.dz-titulo b:nth-of-type(2) { right: -5px; top: -4px; }
.dz-titulo b:nth-of-type(3) { left: -5px; bottom: -4px; }
.dz-titulo b:nth-of-type(4) { right: -5px; bottom: -4px; }
.dz-titulo em { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); font-style: normal; font-size: 5px; font-weight: 700; color: #fff; background: var(--c); border-radius: 2px; padding: 0 3px; white-space: nowrap; }
.dz-btn { justify-self: start; margin-top: 7px; font-size: 5.5px; font-weight: 800; color: #fff; border-radius: 2px; padding: 2px 6px; animation: dz-color 6s infinite; }
.dz-lin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.dz-lin i { height: 7px; border-radius: 1px; background: #EEF2F6; }
@keyframes dz-color { 0%, 45% { background-color: #FF1632; } 52%, 94% { background-color: #0B8A63; } 100% { background-color: #FF1632; } }
.dz-cur { position: absolute; right: 38px; bottom: 30px; display: flex; align-items: flex-start; gap: 1px; animation: dz-cur 6s ease-in-out infinite; z-index: 2; }
.dz-cur svg { width: 11px; height: 11px; filter: drop-shadow(0 2px 3px rgba(15,23,42,.3)); }
.dz-cur span { margin-top: 9px; background: var(--c); color: #fff; font-size: 6px; font-weight: 800; padding: 1px 5px; border-radius: 2px 6px 6px 6px; }
@keyframes dz-cur { 0%, 100% { transform: translate(-70px, -26px); } 30%, 50% { transform: translate(0, 0); } 75% { transform: translate(-60px, 4px); } }

/* 2 · Responsivo: la posada en tres anchos, cada uno con su nombre */
.rs-dev { position: absolute; bottom: 30px; background: #0F172A; padding: 3px; box-shadow: 0 14px 26px -10px rgba(15,23,42,.45); }
.rs-dev::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; border: 1.5px solid var(--c); opacity: 0; animation: rs-foco 6s infinite; animation-delay: var(--d); }
.rs-scr { height: 100%; background: #fff; border-radius: 3px; padding: 3px; display: grid; gap: 3px; align-content: start; overflow: hidden; font-size: 4.5px; }
.rs-top { display: flex; align-items: center; }
.rs-top .ps-logo::before { width: 5px; height: 5px; }
.rs-hero { position: relative; border-radius: 2px; display: grid; align-content: center; padding-left: 5px; gap: 2px; }
.rs-hero b { display: block; height: 3px; width: 55%; border-radius: 1px; background: #fff; box-shadow: 0 0 0 .5px rgba(15,23,42,.1); }
.rs-hero u { display: block; width: 18px; height: 5px; border-radius: 2px; background: #FF1632; margin-top: 1px; }
.rs-cols { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 2px; }
.rs-cols i { height: 12px; border-radius: 2px; background: linear-gradient(#DDF3F6 0 55%, #EEF2F6 55%); }
.rs-ham { margin-left: auto; width: 6px; height: 4px; border-top: 1px solid #1E293B; border-bottom: 1px solid #1E293B; position: relative; }
.rs-ham::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #1E293B; transform: translateY(-50%); }
.rs-pc  { left: 12px; width: 47%; max-width: 160px; height: 88px; border-radius: 6px; bottom: 38px; --d: 0s; }
.rs-pc::before { content: ""; position: absolute; left: 50%; bottom: -10px; width: 30px; height: 7px; transform: translateX(-50%); background: #0F172A; clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.rs-tab { right: 58px; width: 66px; height: 92px; border-radius: 7px; --d: 2s; }
.rs-tel { right: 14px; width: 38px; height: 74px; border-radius: 7px; --d: 4s; }
.rs-tel .rs-scr { border-radius: 4px; }
.rs-pc .rs-hero { height: 30px; } .rs-tab .rs-hero { height: 30px; } .rs-tel .rs-hero { height: 24px; }
.rs-ancho { position: absolute; bottom: 10px; font-size: 6.5px; font-weight: 800; letter-spacing: .04em; color: #64748b; white-space: nowrap; transform: translateX(-50%); }
.is-dark .rs-ancho { color: #94a3b8; }
@keyframes rs-foco { 0%, 30%, 100% { opacity: 0; } 8%, 22% { opacity: 1; } }

/* 3 · Navegadores: las pestañas se turnan, la posada se ve igual */
.nv-win { inset: 12px; overflow: hidden; }
.nv-tabs { display: flex; gap: 2px; padding: 4px 5px 0; background: #EEF2F6; border-radius: 7px 7px 0 0; }
.nv-tab { display: flex; align-items: center; gap: 3px; min-width: 0; font-size: 7px; font-weight: 600; padding: 3px 6px 4px; border-radius: 5px 5px 0 0; color: #64748b; white-space: nowrap; animation: nv-tab 8s infinite; animation-delay: var(--d); }
.nv-tab svg { width: 9px; height: 9px; flex: none; }
@keyframes nv-tab { 0%, 23% { background: #fff; color: #1E293B; } 25%, 100% { background: transparent; color: #64748b; } }
.nv-sitio { margin: 0 6px; display: grid; gap: 3px; }
.nv-sitio .rs-top { font-size: 6.5px; }
.nv-hero { height: 52px; border-radius: 3px; display: grid; align-content: center; padding-left: 9px; gap: 3px; }
.nv-hero b { font-size: 8px; font-weight: 800; color: #0F172A; line-height: 1.1; white-space: nowrap; }
.nv-hero u { justify-self: start; text-decoration: none; font-size: 6px; font-weight: 800; color: #fff; background: #FF1632; border-radius: 3px; padding: 2px 6px; }
.nv-ok { position: absolute; right: 20px; bottom: 16px; display: flex; align-items: center; gap: 4px; background: #fff; border-radius: 99px; padding: 3px 8px 3px 4px; font-size: 7.5px; font-weight: 800; color: #1E293B; box-shadow: 0 8px 18px -6px rgba(15,23,42,.45); white-space: nowrap; }

/* 4 · Ordenado: el menú de la ferretería se abre hasta el cemento */
.or-sitio { inset: 10px; display: grid; grid-template-rows: auto auto 1fr auto; overflow: hidden; }
.or-top { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid #EEF2F6; font-size: 6.5px; font-weight: 700; color: #475569; white-space: nowrap; }
.or-top .ps-logo { color: #1E293B; margin-right: auto; }
.or-top .ps-logo::before { background: #FF8A00; border-radius: 2px; }
.or-top .is-act { color: var(--c); position: relative; }
.or-top .is-act::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--c); }
.or-menu { margin: 0 8px; padding: 6px 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: #fff; border: 1px solid #E2E8EE; border-top: 0; border-radius: 0 0 5px 5px; box-shadow: 0 10px 18px -10px rgba(15,23,42,.35); transform-origin: top; animation: or-menu 5s ease-in-out infinite; font-size: 6.5px; white-space: nowrap; }
@keyframes or-menu { 0%, 8% { transform: scaleY(0); opacity: 0; } 18%, 92% { transform: none; opacity: 1; } 100% { transform: scaleY(0); opacity: 0; } }
.or-menu div { display: grid; gap: 2px; align-content: start; }
.or-menu small { font-size: 5.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; margin-bottom: 1px; }
.or-menu span { color: #475569; font-weight: 600; padding: 1px 3px; border-radius: 2px; }
.or-menu .is-meta { position: relative; animation: or-meta 5s infinite; }
@keyframes or-meta { 0%, 38% { background: transparent; color: #475569; } 46%, 92% { background: var(--c); color: #fff; } 100% { background: transparent; } }
.or-cur { position: absolute; width: 10px; height: 10px; left: 28px; top: 6px; animation: or-cur 5s ease-in-out infinite; }
@keyframes or-cur { 0%, 12% { transform: translate(40px, -18px); } 40%, 100% { transform: none; } }
.or-migas { display: flex; align-items: center; gap: 3px; padding: 5px 8px; background: #F8FAFC; border-top: 1px solid #EEF2F6; font-size: 6.5px; font-weight: 600; color: #64748b; white-space: nowrap; }
.or-migas b { color: #1E293B; font-weight: 800; }
.or-clics { margin-left: auto; display: flex; align-items: center; gap: 3px; font-weight: 800; color: #fff; background: var(--c); border-radius: 99px; padding: 1px 6px; animation: or-clics 5s infinite; }
@keyframes or-clics { 0%, 44% { opacity: 0; transform: scale(.7); } 52%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 5 · Rápido: PageSpeed, en celular, con la nota alta */
.vl-panel { inset: 10px; padding: 7px 10px; display: grid; grid-template-rows: auto 1fr; gap: 6px; }
.vl-cab { display: flex; align-items: center; gap: 6px; font-size: 6.5px; white-space: nowrap; }
.vl-cab .nv-url { margin: 0; flex: 1; min-width: 0; overflow: hidden; }
.vl-tabs { display: flex; font-weight: 700; color: #64748b; }
.vl-tabs span { padding: 2px 5px; border-bottom: 2px solid transparent; }
.vl-tabs .is-act { color: #1A73E8; border-color: #1A73E8; }
.vl-cuerpo { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.vl-gauge { position: relative; width: 74px; height: 74px; }
.vl-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vl-gauge circle { fill: none; stroke-width: 6; }
.vl-gauge .vl-pista { stroke: rgba(12, 206, 107, .16); }
.vl-gauge .vl-arco { stroke: #0CCE6B; stroke-linecap: round; stroke-dasharray: 214; stroke-dashoffset: 214; animation: vl-arco 6s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes vl-arco { 0% { stroke-dashoffset: 214; } 35%, 90% { stroke-dashoffset: 9; } 100% { stroke-dashoffset: 214; } }
.vl-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.vl-num b { font-size: 22px; font-weight: 800; color: #0B8A63; line-height: 1; }
.vl-num span { font-size: 6px; font-weight: 700; color: #64748b; margin-top: 2px; }
.vl-met { display: grid; gap: 5px; }
.vl-met div { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; font-size: 7px; align-items: center; }
.vl-met span { color: #64748b; font-weight: 600; white-space: nowrap; }
.vl-met b { font-weight: 800; }
.vl-met i { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: #EEF2F6; position: relative; overflow: hidden; }
.vl-met i::after { content: ""; position: absolute; inset: 0; width: var(--p); background: #0CCE6B; border-radius: 2px; }

/* 6 · Crecer: el encabezado y el mapa del sitio suman páginas a la vez */
.cr-top { left: 12px; right: 12px; top: 12px; height: 26px; display: flex; align-items: center; gap: 7px; padding: 0 8px; font-size: 7px; font-weight: 700; color: #475569; white-space: nowrap; }
.cr-top .ps-logo { color: #1E293B; margin-right: auto; }
.cr-nuevo { color: var(--c); font-weight: 800; animation: cr-pop 7s infinite both; animation-delay: var(--d); display: flex; align-items: center; gap: 2px; }
.cr-nuevo svg { width: 9px; height: 9px; }
.cr-idioma { display: flex; border: 1px solid var(--c); border-radius: 3px; overflow: hidden; font-size: 6px; }
.cr-idioma b, .cr-idioma span { padding: 1px 3px; }
.cr-idioma b { background: var(--c); color: #fff; }
.cr-mapa { position: absolute; left: 12px; right: 12px; top: 44px; bottom: 10px; }
.cr-mapa svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cr-mapa path { fill: none; vector-effect: non-scaling-stroke; stroke: rgba(30,41,59,.25); stroke-width: 1.2; }
.is-dark .cr-mapa path { stroke: rgba(255,255,255,.25); }
.cr-mapa path.es-nueva { stroke: var(--c); stroke-dasharray: 3 3; animation: cr-pop 7s infinite both; animation-delay: var(--d); }
.cr-p { position: absolute; transform: translate(-50%, -50%); font-size: 7px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: #fff; color: #1E293B; box-shadow: 0 5px 12px -6px rgba(15,23,42,.4); white-space: nowrap; }
.cr-p.es-raiz { background: #1E293B; color: #fff; }
.cr-p.es-nueva { border: 1px dashed var(--c); color: var(--c); font-weight: 800; background: color-mix(in srgb, var(--c) 8%, #fff); box-shadow: none; animation: cr-pop 7s infinite both; animation-delay: var(--d); }
@keyframes cr-pop {
    0%, 12%   { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
    20%, 86%  { opacity: 1; transform: translate(-50%, -50%); }
    96%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
}
/* En el encabezado y en las líneas no hay translate de centrado */
.cr-nuevo, .cr-mapa path.es-nueva { animation-name: cr-pop-plano; }
@keyframes cr-pop-plano { 0%, 12% { opacity: 0; } 20%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .vl-gauge .vl-arco { stroke-dashoffset: 9; }
    .or-menu, .or-clics, .cr-nuevo, .cr-p.es-nueva, .cr-mapa path.es-nueva { opacity: 1; transform: none; }
    .cr-p.es-nueva { transform: translate(-50%, -50%); }
}