/* Quiénes Somos (página 626, rehecha el 2026-09-25): motivo del hero y escenas propias.
   Las piezas comunes (.esc, .ui, .nv-url, los iconos) están en paginas-servicio.css; el chat
   (.at-*) y la lista de mantenimiento (.mt-*) vienen de escenas/alojamiento.css, que esta
   página también carga. */

/* ---------- Hero: el faro de la empresa, con los anillos de los años ----------
   El icono de la empresa ocupa el lugar del panel. Detrás, los anillos de un tronco, uno por
   año: dos juegos con el centro apenas corrido, que al cruzarse se engrosan y se afinan como la
   madera. Cada anillo mide 16 px y se ven unos 27, los años de la empresa. Alrededor, los tres
   mundos de lo que hacemos, flotando. Los anillos van atados al emblema (no al hero), así el
   centro cae siempre sobre el faro, en cualquier ancho. */
.hero-nosotros::before {
    background:
        radial-gradient(36% 50% at 12% 18%, rgba(255, 205, 87, .52), transparent 68%),
        radial-gradient(32% 46% at 44% 96%, rgba(255, 22, 50, .55), transparent 70%),
        radial-gradient(34% 46% at 84% 20%, rgba(142, 117, 178, .55), transparent 70%),
        radial-gradient(30% 40% at 94% 88%, rgba(31, 184, 205, .42), transparent 72%),
        radial-gradient(26% 34% at 62% 42%, rgba(255, 60, 140, .22), transparent 72%),
        radial-gradient(24% 30% at 28% 70%, rgba(11, 138, 99, .22), transparent 72%);
    animation: qs-drift 9s ease-in-out infinite alternate;
}
.hero-nosotros .svc-hero-fx { display: none; }

/* Mar del Plata Digital (2026-09-25): la ciudad de noche vista desde el mar, abajo del hero, detrás
   del texto y del faro. Norte a la derecha. La genera herramientas/ciudad-noche.mjs. En el celular
   se recorta y queda el centro: el Provincial, los Lobos y el Casino. Arriba se funde con el cielo. */
.mdpd-svc .qs-ciudad {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
    width: 100%; max-width: none; height: clamp(220px, 30vw, 460px);
    object-fit: cover; object-position: 50% 100%;
    pointer-events: none; opacity: .92;
    -webkit-mask-image: linear-gradient(to top, #000 62%, transparent);
    mask-image: linear-gradient(to top, #000 62%, transparent);
}
@media (max-width: 880px) { .mdpd-svc .qs-ciudad { height: 260px; } }
.hero-nosotros::after { background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px); background-size: 22px 22px; }
@keyframes qs-drift {
    from { transform: translate3d(-5%, -3%, 0) scale(1.04); }
    to   { transform: translate3d(6%, 4%, 0) scale(1.16); }
}

.qs-emblema { position: relative; display: block; height: 430px; }
.qs-emblema::before, .qs-emblema::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; margin: -450px 0 0 -450px;
    z-index: -1; pointer-events: none; border-radius: 50%;
    -webkit-mask-image: radial-gradient(circle closest-side, #000 40%, transparent 100%);
    mask-image: radial-gradient(circle closest-side, #000 40%, transparent 100%);
}
.qs-emblema::before {
    background-image:
        repeating-radial-gradient(circle at 50% 50%, transparent 0 15px, rgba(255, 205, 87, .22) 15px 16px),
        repeating-radial-gradient(circle at 51.2% 48.8%, transparent 0 22px, rgba(255, 255, 255, .08) 22px 23px);
    animation: qs-crecer 16s ease-in-out infinite alternate;
}
/* Un resplandor rojo detrás del faro */
.qs-emblema::after { width: 420px; height: 420px; margin: -210px 0 0 -210px; background: radial-gradient(circle, rgba(255, 22, 50, .42), transparent 68%); -webkit-mask-image: none; mask-image: none; animation: qs-latir 5s ease-in-out infinite alternate; }
@keyframes qs-crecer { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes qs-latir { from { opacity: .6; transform: scale(.92); } to { opacity: 1; transform: scale(1.06); } }
.qs-emblema-centro { position: absolute; left: 50%; top: 50%; width: 236px; height: 236px; margin: -118px 0 0 -118px; }
.mdpd-svc .qs-emblema-centro img { display: block; width: 100%; height: 100%; max-width: none; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .5)); animation: qs-flota 9s ease-in-out infinite alternate; }
@keyframes qs-orbitar { from { transform: translateY(8px) rotate(-1.5deg); } to { transform: translateY(-10px) rotate(1.5deg); } }
@keyframes qs-flota { from { transform: translateY(6px) rotate(-3deg); } to { transform: translateY(-8px) rotate(3deg); } }

/* Los tres mundos, en fichas de vidrio que flotan alrededor */
.qs-orbita { position: absolute; z-index: 1; }
.qs-orbita > span {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 12px;
    background: rgba(8, 12, 24, .5); border: 1px solid rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    animation: qs-orbitar 12s ease-in-out infinite alternate;
}
.qs-orbita b { font-size: 15.5px; font-weight: 700; color: #fff; white-space: nowrap; }
.mdpd-svc .qs-orbita svg.ir { width: 38px; height: 38px; margin: 0; --papel: var(--ink); --linea: #fff; }
/* Seis fichas (desde el 2026-09-25): a la izquierda Sitios y tiendas, Soluciones a medida y
   Portales; a la derecha Integraciones, Sistemas propios y Campañas. Cada una con su ritmo. */
.qs-emblema { height: 480px; }
.qs-orbita.es-a { left: -4%; top: 2%; }
.qs-orbita.es-d { right: -6%; top: 11%; }
.qs-orbita.es-d > span { animation-duration: 14s; animation-delay: -3s; }
.qs-orbita.es-e { left: -6%; top: 42%; }
/* En una línea no entraba entre el borde y el faro: en dos queda angosta */
.qs-orbita.es-e b { white-space: normal; width: 6.2em; line-height: 1.15; }
.qs-orbita.es-e > span { animation-duration: 16s; animation-delay: -8s; }
.qs-orbita.es-b { right: -12%; top: 52%; }
.qs-orbita.es-b > span { animation-duration: 17s; animation-delay: -6s; }
.qs-orbita.es-c { left: -4%; bottom: 2%; }
.qs-orbita.es-c > span { animation-duration: 15s; animation-delay: -10s; }
.qs-orbita.es-f { right: -2%; bottom: 0; }
.qs-orbita.es-f > span { animation-duration: 13s; animation-delay: -5s; }

/* El haz del faro: dos rayos de luz cálida que barren el hero desde la lámpara, como un faro de
   verdad. Va detrás de los anillos y se desvanece hacia los bordes. */
.qs-haz {
    position: absolute; left: 50%; top: calc(50% - 62px); width: 1700px; height: 1700px; margin: -850px 0 0 -850px;
    z-index: -2; pointer-events: none; border-radius: 50%;
    background: conic-gradient(from 0deg,
        transparent 0deg, rgba(255, 226, 150, .26) 14deg, rgba(255, 226, 150, .05) 26deg, transparent 34deg,
        transparent 180deg, rgba(255, 226, 150, .18) 194deg, rgba(255, 226, 150, .04) 206deg, transparent 214deg);
    -webkit-mask-image: radial-gradient(circle closest-side, #000 8%, rgba(0, 0, 0, .5) 45%, transparent 100%);
    mask-image: radial-gradient(circle closest-side, #000 8%, rgba(0, 0, 0, .5) 45%, transparent 100%);
    animation: qs-haz 16s linear infinite;
}
@keyframes qs-haz { to { transform: rotate(1turn); } }
/* La entrada del panel tiene retardos hasta la sexta pieza; con el haz y seis fichas son ocho */
.qs-emblema > :nth-child(7) { animation-delay: calc(var(--r-delay) + 7.5 * var(--r-step)); }
.qs-emblema > :nth-child(8) { animation-delay: calc(var(--r-delay) + 8.5 * var(--r-step)); }

/* Panel angosto (celular, tablet y pantallas de hasta 1300 px): las fichas en filas, alternando
   izquierda y derecha, y el faro en el medio. En ese rango, alrededor del faro no entran. */
@media (max-width: 1300px) {
    .qs-emblema { height: 560px; }
    .qs-emblema-centro { width: 180px; height: 180px; margin: -70px 0 0 -90px; }
    .qs-haz { top: calc(50% - 30px); }
    .qs-orbita b { font-size: 14px; }
    .qs-orbita.es-a { left: 0; top: 0; }
    .qs-orbita.es-d { right: 0; left: auto; top: 56px; }
    .qs-orbita.es-e { left: 0; right: auto; top: 112px; }
    .qs-orbita.es-b { right: 0; left: auto; top: auto; bottom: 112px; }
    .qs-orbita.es-c { left: 0; right: auto; bottom: 56px; }
    .qs-orbita.es-f { right: 0; left: auto; bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .qs-haz { animation: none; transform: rotate(-35deg); }
}

/* El avatar del chat es el icono de la empresa */
.at-cab i.qs-avatar { background: #fff; overflow: hidden; }
.mdpd-svc .at-cab i.qs-avatar img { width: 100%; height: 100%; max-width: none; display: block; }

/* ---------- Piezas comunes de estas escenas ---------- */
/* La foto de una propiedad, en miniatura: cielo, pasto y la casita */
.qs-casa { --cielo: #D6ECF7; position: relative; overflow: hidden; border-radius: 3px; background: linear-gradient(180deg, var(--cielo) 0 58%, #B7DCA0 58%); }
.qs-casa::before { content: ""; position: absolute; left: 24%; right: 24%; bottom: 18%; height: 46%; background: #F4EAD8; clip-path: polygon(0 40%, 50% 0, 100% 40%, 100% 100%, 0 100%); }
/* Y la de un alojamiento: sol, mar y arena */
.qs-mar { border-radius: 3px; background: radial-gradient(circle at 78% 30%, #FFD66B 0 9%, transparent 10%), linear-gradient(180deg, #CFF1F6 0 50%, #38BDD0 50% 72%, #EAD7AE 72%); }

/* ---------- Sitios y tiendas: la tienda de un cliente ---------- */
.qs-web { inset: 10px 44px 14px 12px; display: grid; grid-template-rows: auto auto 1fr; overflow: hidden; }
.qs-web-cab { display: flex; align-items: center; justify-content: space-between; padding: 3px 8px 5px; font-size: 7.5px; font-weight: 800; white-space: nowrap; border-bottom: 1px solid #EEF2F6; }
.qs-marca { display: flex; align-items: center; gap: 3px; }
.qs-marca i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.qs-carro { display: flex; align-items: center; gap: 3px; font-size: 6.5px; color: #475569; }
.qs-carro b { display: grid; place-items: center; min-width: 11px; height: 11px; border-radius: 99px; background: var(--c); color: #fff; font-size: 6px; animation: qs-carro 5s ease-in-out infinite; }
@keyframes qs-carro { 0%, 60% { transform: scale(1); } 66% { transform: scale(1.45); } 74%, 100% { transform: scale(1); } }
.qs-prods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 7px 8px; align-content: start; }
.qs-prods div { display: grid; gap: 2px; font-size: 6.3px; font-weight: 700; color: #475569; white-space: nowrap; overflow: hidden; }
.qs-prods i { display: block; height: 42px; border-radius: 4px; background: var(--p); position: relative; }
.qs-prods i::after { content: ""; position: absolute; left: 30%; right: 30%; top: 26%; bottom: 26%; border-radius: 3px; background: color-mix(in srgb, var(--p) 60%, #1E293B 12%); }
.qs-prods b { font-size: 7.5px; font-weight: 800; color: #1E293B; }
.qs-tec { position: absolute; right: 8px; bottom: 12px; display: grid; gap: 5px; justify-items: end; }
.qs-tec .ui { position: relative; display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 5px; border-radius: 99px; font-size: 7px; font-weight: 800; white-space: nowrap; }
.qs-tec svg { width: 12px; height: 12px; }

/* ---------- Sistemas propios: las dos aplicaciones de la casa ---------- */
.qs-app { overflow: hidden; display: grid; align-content: start; }
.qs-app-cab { display: flex; align-items: center; font-size: 7.5px; font-weight: 800; padding: 5px 7px; border-bottom: 1px solid #EEF2F6; white-space: nowrap; }
.qs-app.es-inmo { left: 12px; top: 10px; width: 54%; padding-bottom: 5px; }
.qs-app.es-rt { right: 12px; bottom: 10px; width: 50%; z-index: 1; padding-bottom: 6px; }
.qs-fila { display: grid; grid-template-columns: 22px 1fr auto; gap: 5px; align-items: center; padding: 3px 7px 0; font-size: 6.8px; white-space: nowrap; }
.qs-fila .qs-casa { height: 15px; }
.qs-fila b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.qs-fila small { font-size: 5.8px; font-weight: 800; color: var(--c); }
.qs-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 5px 7px 0; }
.qs-cal i { height: 9px; border-radius: 2px; background: #F2F5F7; }
.qs-cal i.es-res { animation: qs-reserva 6s infinite both; animation-delay: var(--d); }
@keyframes qs-reserva { 0%, 6% { background: #F2F5F7; } 12%, 92% { background: #0B8A63; } 100% { background: #F2F5F7; } }

/* ---------- Portales: lo que cargan los sistemas llega al portal ---------- */
.qs-portal { right: 12px; top: 10px; bottom: 10px; width: 62%; overflow: hidden; display: grid; grid-template-rows: auto auto 1fr; }
.mdpd-svc .qs-portal .qs-portal-logo { display: block; height: 13px; width: auto; max-width: none; margin: 1px 8px 4px; }
.qs-fichas { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 0 8px 8px; align-content: start; }
.qs-fichas div { display: grid; gap: 2px; font-size: 6px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-fichas i { display: block; height: 24px; }
.qs-fichas div:first-child i, .qs-fichas div:nth-child(2) i { animation: qs-nueva 6.4s infinite both; }
.qs-fichas div:nth-child(2) i { animation-delay: 1.6s; }
@keyframes qs-nueva { 0%, 30% { outline: 0 solid transparent; } 36%, 70% { outline: 2px solid var(--c); } 76%, 100% { outline: 0 solid transparent; } }
.qs-llegan { position: absolute; left: 10px; top: 0; bottom: 0; width: 34%; display: grid; align-content: center; gap: 12px; }
.qs-llegan .ui { position: relative; display: flex; align-items: center; padding: 4px 7px 4px 5px; border-radius: 99px; font-size: 6.6px; font-weight: 800; white-space: nowrap; justify-self: start; animation: qs-viaja 6.4s infinite both; animation-delay: var(--d); }
@keyframes qs-viaja {
    0%, 4%  { opacity: 0; transform: translateX(-10px); }
    12%, 28% { opacity: 1; transform: none; }
    36%, 100% { opacity: 0; transform: translateX(46px) scale(.8); }
}
/* Los logos de los portales, debajo del texto de la tarjeta */
.qs-portales { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 4px; }
.mdpd-svc .qs-portales img { display: block; height: 20px; width: auto; max-width: none; }
.qs-enlaces { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.svc-item a.svc-item-mas { text-decoration: none; }
.svc-item a.svc-item-mas:hover { color: var(--red-h); }

/* ---------- Cómo trabajamos ---------- */
/* Primero, tu negocio: la nota de la primera reunión, en papel rayado */
.qs-nota { left: 50%; top: 10px; bottom: 10px; width: 76%; transform: translateX(-50%) rotate(-1.5deg); padding: 7px 9px; display: grid; align-content: start; gap: 4px;
    background-color: #FFFBEA; background-image: repeating-linear-gradient(180deg, transparent 0 17px, rgba(30, 41, 59, .08) 17px 18px); background-position: 0 6px; }
.qs-nota-cab { display: flex; justify-content: space-between; gap: 6px; font-size: 7.5px; font-weight: 800; white-space: nowrap; margin-bottom: 2px; }
.qs-nota-cab small { font-size: 6.2px; font-weight: 700; color: #64748b; }
.qs-n { display: flex; align-items: center; gap: 5px; font-size: 7px; font-weight: 700; white-space: nowrap; min-height: 14px; }
.qs-n i { position: relative; width: 9px; height: 9px; border-radius: 2px; border: 1.2px solid #1E293B; flex: none; }
.qs-n i::after { content: ""; position: absolute; left: 1.5px; top: -1px; width: 3px; height: 6px; border: solid #D98A00; border-width: 0 1.8px 1.8px 0; transform: rotate(40deg) scale(0); transform-origin: bottom right; animation: qs-tilde 6s infinite both; animation-delay: var(--d); }
@keyframes qs-tilde { 0%, 6% { transform: rotate(40deg) scale(0); } 12%, 92% { transform: rotate(40deg) scale(1); } 100% { transform: rotate(40deg) scale(0); } }

/* Administración a tu medida: la llave que va de «Vos» a «Nosotros» */
.qs-quien { left: 50%; top: 50%; width: 80%; transform: translate(-50%, -50%); padding: 10px 11px 11px; display: grid; gap: 8px; }
.qs-quien-t { font-size: 8px; font-weight: 800; white-space: nowrap; }
.qs-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: 99px; background: #F2F5F7; }
.qs-seg::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 99px; background: var(--c); animation: qs-llave 8s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes qs-llave { 0%, 42% { transform: none; } 50%, 92% { transform: translateX(100%); } 100% { transform: none; } }
.qs-seg b { position: relative; text-align: center; font-size: 7.5px; font-weight: 800; padding: 4px 0; }
.qs-seg b.es-vos { animation: qs-activo 8s infinite; }
.qs-seg b.es-nos { animation: qs-activo 8s infinite -4s; }
@keyframes qs-activo { 0%, 42% { color: #fff; } 50%, 92% { color: #64748b; } 100% { color: #fff; } }
.qs-resp { display: grid; font-size: 7px; font-weight: 700; color: #475569; text-align: center; white-space: nowrap; }
.qs-resp span { grid-area: 1 / 1; }
.qs-resp .es-vos { animation: qs-texto 8s infinite; }
.qs-resp .es-nos { animation: qs-texto 8s infinite -4s; }
@keyframes qs-texto { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }

/* Seguimos al lado: el horario de soporte, debajo del mantenimiento */
.qs-soporte { position: absolute; right: 14px; bottom: 12px; font-size: 7px; font-weight: 800; color: #1E293B; background: var(--c); border-radius: 99px; padding: 3px 9px; white-space: nowrap; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .35); }

/* ---------- Trayectoria: las ventanas de trabajos reales, en la banda oscura ---------- */
.qs-trayectoria { align-items: center; }
.qs-trayectoria .svc-actions { margin-top: 6px; }
@media (max-width: 880px) { .qs-trayectoria .tj-ventanas { max-width: 460px; width: 100%; justify-self: center; } }