/* Escenas propias de Servicios (2026-09-24).
   Servicios reutiliza las escenas de Diseño Web y el panel del servidor
   de Alojamiento (carga esos dos archivos también); acá va solo lo suyo. */

/* Hecho a la medida: el proyecto se arma con los módulos que hacen falta */
.hm-armado { inset: 12px 14px; padding: 8px 10px; display: grid; gap: 4px; align-content: start; }
.hm-cab { display: flex; justify-content: space-between; align-items: baseline; font-size: 7.5px; font-weight: 800; white-space: nowrap; margin-bottom: 2px; }
.hm-cab small { font-size: 6.5px; font-weight: 700; color: #64748b; }
.hm-f { display: flex; align-items: center; justify-content: space-between; height: 13px; font-size: 7px; font-weight: 700; white-space: nowrap; }
.hm-f.es-off { color: #94a3b8; }
.hm-sw { position: relative; width: 17px; height: 9px; border-radius: 99px; background: #CBD5E1; flex: none; }
.hm-sw::after { content: ""; position: absolute; top: 1.5px; left: 1.5px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.3); }
.hm-f.es-on .hm-sw { background: var(--c); }
.hm-f.es-on .hm-sw::after { left: 9.5px; }
.hm-f.es-anim .hm-sw { animation: hm-sw 5s infinite; }
.hm-f.es-anim .hm-sw::after { animation: hm-perilla 5s infinite; }
.hm-f.es-anim { animation: hm-texto 5s infinite; }
@keyframes hm-sw { 0%, 35% { background: #CBD5E1; } 42%, 94% { background: var(--c); } 100% { background: #CBD5E1; } }
@keyframes hm-perilla { 0%, 35% { left: 1.5px; } 42%, 94% { left: 9.5px; } 100% { left: 1.5px; } }
@keyframes hm-texto { 0%, 35% { color: #94a3b8; } 42%, 94% { color: #1E293B; } 100% { color: #94a3b8; } }
.hm-pie { display: flex; align-items: center; justify-content: space-between; margin-top: 3px; padding-top: 5px; border-top: 1px solid #EEF2F6; font-size: 7px; font-weight: 700; color: #64748b; white-space: nowrap; }
.hm-pie b { color: #1E293B; font-weight: 800; }
.hm-pie span { font-size: 6.5px; font-weight: 800; color: #1E293B; background: var(--c); border-radius: 3px; padding: 3px 7px; }
.hm-num::before { content: "3"; animation: hm-num 5s infinite; }
@keyframes hm-num { 0%, 38% { content: "3"; } 42%, 94% { content: "4"; } 100% { content: "3"; } }

/* =================================================================
   EL HERO: UN NEGOCIO QUE SE ARMA (Emir y Diego, 2026-09-29)
   MardelShop, la tienda de la maqueta, se arma pieza por pieza y cada pieza es un servicio con
   su etiqueta. El script de la página pone p1…p8 en .sv-lienzo, de a uno:
   1 dominio · 2 alojamiento · 3 diseño · 4 venta · 5 Google · 6 IA · 7 integraciones · 8 asesoramiento.
   Al sacar las clases todo vuelve atrás con las mismas transiciones (el dominio se «borra»).
   Lienzo fijo de 560 × 450; en pantallas angostas el script le pone zoom.
   ================================================================= */
.sv-negocio {
    position: relative; width: 100%; max-width: 560px; justify-self: center;
    animation: svc-in-lado var(--r-dur) cubic-bezier(.19, .72, .18, 1) calc(var(--r-delay) + 1.5 * var(--r-step)) both;
    -webkit-user-select: none; user-select: none;
}
/* El margen de arriba y de abajo es el lugar de las dos filas de la red (las escenas se montan
   un poco sobre ellas: Emir, 2026-09-29) */
.sv-lienzo { position: relative; width: 560px; height: 450px; margin-block: 50px 42px; }
/* Detrás del collage, los ocho servicios como una red (reemplaza a los engranajes): un ícono de
   línea por servicio, unidos por un circuito punteado por el que corre un flujo. Se sale del
   lienzo a propósito, para asomar por los huecos y los bordes; como está dentro del lienzo, se
   achica con él en el celular. Coordenadas del SVG = las del lienzo. */
/* ⚠ max-width: none: la regla general de los SVG (max-width: 100%) la achicaba al ancho del lienzo */
.mdpd-svc .sv-constelacion { position: absolute; left: -100px; top: -100px; width: 760px; height: 650px; max-width: none; max-height: none; z-index: 0; overflow: visible; pointer-events: none; }
.sv-red { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.sv-red.es-flujo { stroke: rgba(255, 122, 138, .7); stroke-width: 2; stroke-dasharray: 34 300; animation: sv-flujo 10s linear infinite; }
@keyframes sv-flujo { to { stroke-dashoffset: -668; } }
.sv-nodo { color: var(--c); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sv-nodo > g { opacity: .8; animation: sv-flotar 7s ease-in-out var(--d) infinite alternate; }
.sv-halo { fill: rgba(8, 12, 24, .55); stroke: color-mix(in srgb, currentColor 45%, transparent); stroke-width: 1.2; }
@keyframes sv-flotar { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .sv-red.es-flujo, .sv-nodo > g { animation: none; } }
.sv-pieza {
    position: absolute; border-radius: 12px; box-shadow: 0 20px 44px -14px rgba(0, 0, 0, .6);
    opacity: 0; transform: translateY(14px) scale(.94);
    transition: opacity .45s ease, transform .6s cubic-bezier(.34, 1.45, .64, 1);
}
/* La etiqueta de cada servicio, colgada del borde de su pieza */
.sv-tag {
    position: absolute; top: -10px; left: 12px; z-index: 2;
    padding: 4px 9px; border-radius: 99px; background: var(--red); color: #fff;
    font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
    box-shadow: 0 6px 14px -4px rgba(255, 22, 50, .55);
}

/* ---- La ventana: siempre a la vista; lo que cambia es lo de adentro ---- */
.sv-ventana { left: 8px; top: 36px; width: 360px; z-index: 1; opacity: 1; transform: none; }
/* Sus dos etiquetas van sueltas en el lienzo (la ventana recorta lo que sobresale) */
.sv-suelta { z-index: 8; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .45s cubic-bezier(.34, 1.45, .64, 1); }
.sv-suelta.es-dominio { top: 25px; left: 100px; }
.sv-suelta.es-diseno { top: 81px; left: 170px; }
.sv-dominio { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path .7s steps(17); }
.sv-pantalla { position: relative; }
/* Antes del diseño, el boceto: bloques grises */
.sv-boceto { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 28px 70px 1fr; gap: 10px; padding: 12px; background: #F1F4F8; transition: opacity .6s; }
.sv-boceto i { border-radius: 6px; background: #DDE3EA; }
.sv-boceto i:nth-child(1) { grid-column: 1 / -1; background: #E6EBF0; }
.sv-boceto i:nth-child(2) { grid-column: 1 / -1; }
/* La tienda: la de la maqueta, agrandada, con tres productos */
.sv-tienda { zoom: 1.62; }
.sv-tienda .mq-prods { grid-template-columns: repeat(3, 1fr); padding-bottom: 8px; }
.sv-tienda .mq-nav, .sv-tienda .mq-promo-banner, .sv-tienda .mq-prod { opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .6s cubic-bezier(.19, .72, .18, 1); }
.sv-carro-n { transform: scale(0); transition: transform .4s cubic-bezier(.34, 1.8, .64, 1); }
.sv-carro-n::before { content: "1"; }

/* ---- Las piezas de alrededor ---- */
.sv-servidor { left: 0; top: 346px; width: 150px; z-index: 3; padding: 16px 12px 11px; display: grid; gap: 6px; background: #0F172A; border: 1px solid rgba(255, 255, 255, .18); }
.sv-rack { display: flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 5px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); }
.sv-rack i { width: 6px; height: 6px; border-radius: 50%; background: #334155; transition: background-color .3s; }
.sv-rack i:nth-child(1) { margin-right: auto; width: 34px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .22); }
.sv-estado { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: #cbd5e1; }
.sv-estado b { width: 8px; height: 8px; border-radius: 50%; background: #334155; transition: background-color .3s .3s, box-shadow .3s .3s; }

.sv-venta { left: 176px; top: 290px; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px 12px; background: #fff; color: #1E293B; }
.sv-venta-icono { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #E11D74; color: #fff; flex: none; }
.sv-venta-icono svg { width: 17px; height: 17px; }
.sv-venta-texto { display: grid; line-height: 1.25; }
.sv-venta-texto b { font-size: 13px; font-weight: 800; }
.sv-venta-texto small { font-size: 11px; color: #64748b; font-weight: 600; }

.sv-google { right: 0; top: 0; width: 214px; z-index: 5; padding: 18px 14px 12px; display: grid; gap: 7px; background: #fff; color: #1E293B; }
.sv-google-cab { display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 99px; border: 1px solid #E2E8F0; }
.sv-google-cab svg { width: 13px; height: 13px; flex: none; }
.sv-google-cab i { font-size: 10.5px; font-style: normal; color: #475569; white-space: nowrap; }
.sv-resultado { display: grid; gap: 2px; padding-right: 26px; }
.sv-resultado small { font-size: 9.5px; color: #0B8A63; font-weight: 600; }
.sv-resultado b { font-size: 12px; line-height: 1.25; font-weight: 700; color: #1A0DAB; }
.sv-resultado em { font-size: 10px; font-style: normal; color: #F59E0B; letter-spacing: .04em; }
.sv-resultado em span { color: #64748b; letter-spacing: 0; }
.sv-puesto { position: absolute; right: 12px; top: 54px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #0B8A63; color: #fff; font-size: 12px; font-weight: 800; }

.sv-ia { right: 0; top: 146px; width: 206px; z-index: 5; padding: 18px 12px 12px; display: grid; gap: 8px; background: #fff; color: #1E293B; }
.sv-ia-pregunta { justify-self: end; max-width: 88%; padding: 7px 10px; border-radius: 12px 12px 3px 12px; background: #F1F5F9; font-size: 10.5px; line-height: 1.35; }
.sv-ia-respuesta { display: flex; gap: 7px; align-items: flex-start; font-size: 11px; line-height: 1.4; }
.sv-ia-respuesta svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: #10A37F; }
.sv-ia-respuesta b { font-weight: 800; color: #E11D74; }

/* Las integraciones (reemplazó al anuncio de E-Marketing, 2026-09-29): cada fila se tilda en cascada */
.sv-integra { right: 6px; top: 272px; width: 178px; z-index: 6; padding: 16px 9px 9px; display: grid; gap: 5px; background: #fff; color: #1E293B; }
.sv-integra-cab { display: flex; align-items: center; gap: 6px; margin-bottom: 1px; font-size: 10.5px; font-weight: 800; }
.sv-integra-cab svg { width: 14px; height: 14px; flex: none; color: #0B8A63; animation: sv-girar 3s linear infinite; }
@keyframes sv-girar { to { transform: rotate(360deg); } }
.sv-if { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 7px; background: #F8FAFC; border: 1px solid #EEF2F6; }
.sv-if > i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); flex: none; }
.sv-if > span { display: grid; flex: 1; line-height: 1.2; }
.sv-if b { font-size: 10px; font-weight: 800; white-space: nowrap; }
.sv-if small { font-size: 8.5px; color: #64748b; white-space: nowrap; }
.sv-if > svg { width: 13px; height: 13px; flex: none; color: #0B8A63; transform: scale(0); transition: transform .35s cubic-bezier(.34, 1.8, .64, 1); }
.p7 .sv-if > svg { transform: none; }
.p7 .sv-if:nth-of-type(3) > svg { transition-delay: .25s; }
.p7 .sv-if:nth-of-type(4) > svg { transition-delay: .45s; }
.p7 .sv-if:nth-of-type(5) > svg { transition-delay: .65s; }
.p7 .sv-if:nth-of-type(6) > svg { transition-delay: .85s; }

.sv-asesor { left: 162px; top: 372px; width: 214px; z-index: 7; display: flex; gap: 8px; align-items: flex-start; padding: 16px 12px 10px; border-radius: 12px 12px 12px 3px; background: #DCF8C6; color: #1E293B; font-size: 11px; line-height: 1.4; }
.sv-asesor svg { width: 18px; height: 18px; flex: none; color: #25D366; }

/* ---- Los pasos ---- */
.p1 .sv-suelta.es-dominio,
.p3 .sv-suelta.es-diseno { opacity: 1; transform: none; }
.p1 .sv-dominio { clip-path: inset(0 0 0 0); }
.p2 .sv-servidor, .p4 .sv-venta, .p5 .sv-google, .p6 .sv-ia, .p7 .sv-integra, .p8 .sv-asesor { opacity: 1; transform: none; }
.p2 .sv-rack i:nth-child(2) { background: #34D399; }
.p2 .sv-rack i:nth-child(3) { background: #60A5FA; }
.p2 .sv-estado b { background: #34D399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); }
.p3 .sv-boceto { opacity: 0; }
.p3 .sv-tienda .mq-nav, .p3 .sv-tienda .mq-promo-banner, .p3 .sv-tienda .mq-prod { opacity: 1; transform: none; }
.p3 .sv-tienda .mq-promo-banner { transition-delay: .15s; }
.p3 .sv-tienda .mq-prod:nth-child(1) { transition-delay: .3s; }
.p3 .sv-tienda .mq-prod:nth-child(2) { transition-delay: .4s; }
.p3 .sv-tienda .mq-prod:nth-child(3) { transition-delay: .5s; }
.p4 .sv-carro-n { transform: none; transition-delay: .25s; }

/* ---- La grilla de servicios: son siete desde que salió E-Marketing (2026-09-29). La última
   (Asesoramiento) cierra la grilla a todo lo ancho y en horizontal, en vez de quedar sola ---- */
@media (min-width: 621px) {
    .svc-grid.es-remate > .svc-item:last-child {
        grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 26px; align-items: center;
    }
    .svc-grid.es-remate > .svc-item:last-child > svg { grid-row: 1 / 3; }
    .svc-grid.es-remate > .svc-item:last-child > h3 { grid-column: 2; align-self: end; }
    .svc-grid.es-remate > .svc-item:last-child > p { grid-column: 2; align-self: start; max-width: 60ch; }
    .svc-grid.es-remate > .svc-item:last-child > .svc-item-mas { grid-column: 3; grid-row: 1 / 3; }
}

/* ---- La tira de logos (sección «Con qué trabajamos»): fichas chicas, que son trece, sobre
   fondo claro. Va lejos del hero, así que entra sin la animación de las cintas del hero. ---- */
.svc-cinta.es-chica { margin-top: 0; }
.svc-cinta.es-clara .svc-cinta-ficha { border-color: var(--rule); box-shadow: 0 8px 20px -14px rgba(15, 23, 42, .35); animation: none; }
.svc-cinta.es-chica .svc-cinta-pista { gap: 10px; }
.svc-cinta.es-chica .svc-cinta-ficha { width: 80px; height: 58px; padding: 10px; }
.svc-cinta.es-chica .svc-cinta-ficha .svc-logo { width: 30px; height: 30px; }
.svc-cinta.es-chica .svc-cinta-ficha:nth-child(n+9) { animation-delay: calc(var(--t-dur) + .1s); }
@media (max-width: 620px) {
    .svc-cinta.es-chica .svc-cinta-ficha { width: 64px; height: 48px; padding: 8px; }
    .svc-cinta.es-chica .svc-cinta-ficha .svc-logo { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .sv-pieza, .sv-dominio, .sv-boceto, .sv-tienda *, .sv-tag { transition: none !important; }
}