/* ============================================================
   Páginas de servicio de mardelplatadigital.com
   Sistema de heroes y componentes. 2026-09-23.

   Lo encola mdd-ajustes.php solo en las páginas de servicio, con
   la versión atada a filemtime(): cuando el archivo cambia, el
   ?ver= cambia solo y el CDN se entera.

   Vive acá y no dentro de cada página a propósito: las cinco
   páginas comparten el sistema, y repetirlo en cada una sería
   volver a dispersar el estilo.

   Los colores salen de la paleta global del sitio; el hex que
   aparece es el respaldo por si la variable faltara.
   La tipografía se hereda (Plus Jakarta Sans).
   ============================================================ */

.mdpd-svc {
    --red:    var(--e-global-color-primary,   #FF1632);
    --red-h:  var(--e-global-color-mdpdhover, #E8001C);
    --soft:   var(--e-global-color-mdpdsuave, #FFEBED);
    --ink:    var(--e-global-color-secondary, #1E293B);
    --black:  var(--e-global-color-mdpdnegro, #080808);
    --rule:   var(--e-global-color-mdpdborde, #E2E8EE);
    --ground: var(--e-global-color-mdpdfondo, #F2F5F7);
    --lilac:  var(--e-global-color-mdpdlila,  #F9F6FE);
    --yellow: var(--e-global-color-mdpdamar,  #FFCD57);
    --ok:     var(--e-global-color-mdpdverde, #0B8A63);
    --surface: #fff;

    /* Los tiempos de la entrada — cerrados con Emir el 2026-09-23 */
    --t-dist:  400px;                       /* cuánto viaja el título       */
    --t-dur:   4s;                          /* cuánto tarda                 */
    --t-ease:  cubic-bezier(.16, 1, .3, 1); /* rápida, frenado larguísimo   */
    --t-blur:  16px;                        /* barrido del tramo veloz      */
    --t-blur-dur: .45s;                     /* y cuánto dura, por su cuenta */
    --t-resto: 40px;                        /* lo que le falta al 30%       */
    --r-delay: .5s;                         /* cuándo entra el resto        */
    --r-dur:   1.5s;                        /* cuánto tarda cada pieza      */
    --r-step:  .36s;                        /* separación de la cascada     */
    --r-dist:  148px;                       /* cuánto viaja cada pieza      */

    color: var(--ink);
    font-size: 17px;
    line-height: 1.6;
}
.mdpd-svc *, .mdpd-svc *::before, .mdpd-svc *::after { box-sizing: border-box; }
.mdpd-svc h1, .mdpd-svc h2, .mdpd-svc h3 {
    color: var(--ink);
    margin: 0;
    text-wrap: balance;
    letter-spacing: -.015em;
    font-weight: 300;
}
.mdpd-svc h1 strong, .mdpd-svc h2 strong, .mdpd-svc h3 strong {
    font-weight: 800;
    color: var(--black);
}
/* El reinicio del margen de los párrafos, con :where() para que pese lo
   mismo que una clase sola. Le sigue ganando al `p { margin-bottom }` del
   tema (que pesa menos), y cualquier clase escrita más abajo le gana a él.
   Hasta el 2026-09-24 era `.mdpd-svc p` y pesaba más que una clase: se
   comía el margen de todo párrafo que viniera después de un grupo (la
   grilla, las pastillas) y quedaba pegado. */
.mdpd-svc :where(p) { margin: 0; }
.mdpd-svc a { color: var(--red); }
.mdpd-svc a:focus-visible, .mdpd-svc summary:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 2px;
}

/* ---------- Estructura ---------- */
.svc-wrap { max-width: 1140px; margin: 0 auto; padding-inline: 20px; }
/* Las bandas y el cierre son BLANCOS explícitos, no transparentes: si un
   contenedor de arriba cambia de color, siguen siendo blancos (Emir,
   2026-09-24). Las grises y oscuras lo pisan con su propio fondo. */
.svc-band, .svc-close { background-color: #fff; }
.svc-band { padding-block: 76px; }
.svc-band.is-tinted { background: var(--ground); }
/* Banda con foto de fondo en parallax. Es la primera sección debajo
   del hero, que por regla va en blanco: la foto va tapada por un velo
   blanco (--velo, 0 a 1) y la banda se sigue leyendo como blanca.
   Cada página define su foto con una clase propia.

   Tres capas: ::before la foto, ::after el velo, y el contenido arriba.
   La foto es más alta que la banda y se desplaza atada al scroll
   (animation-timeline), así que se mueve más lento que la página. Sin
   una línea de JavaScript. Donde el navegador no lo soporta, la foto
   queda quieta dentro de la banda.

   ⚠ overflow: clip, NO hidden: hidden convierte a la banda en su propio
   contenedor de scroll, la línea de tiempo mide ese scroll (que nunca
   se mueve) y la foto queda pegada al contenido. La línea de tiempo se
   ata a la banda (view-timeline) y la foto la usa por nombre. */
.svc-band.con-fondo {
    --velo: .65;
    padding-block: 114px; /* 50% más que una banda común: la foto necesita aire */
    position: relative; isolation: isolate; overflow: clip;
    view-timeline: --svc-banda block;
    background-color: #fff;
}
.svc-band.con-fondo::before,
.svc-band.con-fondo::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
}
.svc-band.con-fondo::before {
    /* El sobrante arriba y abajo tiene que cubrir el recorrido: con
       inset 40% la capa mide 180% de la banda y admite ±22%. */
    inset: -40% 0;
    background-image: var(--fondo);
    background-position: center; background-size: cover; background-repeat: no-repeat;
    animation: svc-parallax linear both;
    animation-timeline: --svc-banda;
}
.svc-band.con-fondo::after { inset: 0; background: #fff; opacity: var(--velo); }
@keyframes svc-parallax {
    from { transform: translate3d(0, -22%, 0); }
    to   { transform: translate3d(0, 22%, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .svc-band.con-fondo::before { animation: none; }
}
/* Sobre banda oscura el velo es del gris pizarra de la banda, y más
   liviano: la foto ya viene oscurecida (2026-09-24). */
.svc-band.is-dark.con-fondo { --velo: .35; background-color: var(--ink); }
.svc-band.is-dark.con-fondo::after { background: var(--ink); }
/* Y la foto va fija, no en parallax (Emir, 2026-09-24): la banda se
   desliza sobre ella. Sin animación, porque un transform en el elemento
   anula el fondo fijo. */
.svc-band.is-dark.con-fondo::before,
/* Una banda clara también puede ir fija en vez de parallax: `es-fijo`
   (GEO, primera sección, 2026-09-24). */
.svc-band.con-fondo.es-fijo::before {
    inset: 0;
    animation: none;
    background-attachment: fixed;
}
/* En celulares TODAS las fotos de fondo van fijas, claras y oscuras
   (Emir, 2026-09-24: la foto se ve siempre, nunca fondo liso). Safari de
   iPhone ignora `background-attachment: fixed`, así que se hace de otra
   manera: la capa de la foto es `position: fixed` y la banda la recorta
   con `clip-path`. Es una capa quieta que el navegador compone sin
   recalcular nada al hacer scroll: lo más liviano para el procesador.
   (Nada entre la banda y la raíz puede tener transform ni filter, o el
   fixed deja de ser relativo a la pantalla.) */
@media (max-width: 880px) {
    .svc-band.con-fondo { clip-path: inset(0); }
    .svc-band.con-fondo::before {
        position: fixed; inset: 0;
        animation: none;
        background-attachment: scroll;
    }
}
.svc-band.fondo-diseno-web { --fondo: url("imagenes/diseno-web-fondo-seccion-1.jpg?v=2"); }
.svc-band.fondo-diseno-web-oscuro { --fondo: url("imagenes/diseno-web-fondo-oscuro.jpg"); }
/* GEO: la foto ya viene lavada con criterio (Emir): va tal cual, sin velo */
.svc-band.fondo-geo { --fondo: url("imagenes/geo-fondo-seccion-1-v2.jpg"); --velo: 0; }
.svc-band.fondo-geo-oscuro { --fondo: url("imagenes/geo-fondo-oscuro.jpg"); }

/* ---------- Adorno de las bandas blancas (2026-09-24) ----------
   Solo en las bandas con la clase .con-adorno (la reparte el script de la
   regla de fondos: nunca dos bandas seguidas con fondo). El cierre tiene
   su propio estilo, tranquilo, más abajo.
   Banda blanca adornada:
   líneas diagonales y nubes de color en DOS esquinas opuestas, con el
   centro blanco. Pedido de Emir: adornar y modernizar hacia los bordes,
   sin grillas que ocupen la banda y sin tocar las cuatro esquinas.

   - Las líneas CORTAN la esquina (no apuntan hacia ella): el ángulo va
     con las esquinas, --deco-ang.
   - ::before: líneas finas grises y medianas violetas, que se desvanecen.
   - ::after: líneas rojas, PURAS (#FF1632 de la marca, sin transparencia),
     con un borde de desvanecido corto para que no se laven a rosa.
   - Las nubes van en .svc-wrap::before y ::after, dos capas MÁS GRANDES que
     la banda: derivan adentro y la banda las recorta, así su borde queda
     siempre afuera, y pueden cruzar el centro. Cuando la capa medía lo mismo que la
     banda, al moverse se le veía el borde (una esquina fantasma).
   - Las esquinas se alternan de una banda a la siguiente: como las blancas
     y las grises se intercalan, la cuenta va de a cuatro (4n+3 y 4n dan
     vuelta las esquinas), no par e impar. */
.mdpd-svc > .svc-band.con-adorno:not(.is-tinted, .is-dark, .is-lilac, .con-fondo) {
    --deco-a: 100% 0;     /* arriba a la derecha… */
    --deco-b: 0 100%;     /* …y abajo a la izquierda */
    --deco-ang: 45deg;    /* líneas «\», que cortan esas dos esquinas */
    position: relative; isolation: isolate; overflow: clip;
}
.mdpd-svc > .svc-band.con-adorno:not(.is-tinted, .is-dark, .is-lilac, .con-fondo):is(:nth-child(4n+3), :nth-child(4n)) {
    --deco-a: 0 0;
    --deco-b: 100% 100%;
    --deco-ang: 135deg;   /* líneas «/» para las otras dos esquinas */
}
.mdpd-svc > .svc-band.con-adorno:not(.is-tinted, .is-dark, .is-lilac, .con-fondo)::before,
.mdpd-svc > .svc-band.con-adorno:not(.is-tinted, .is-dark, .is-lilac, .con-fondo)::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    /* El mosaico mide 108·√2 px: múltiplo exacto de los espaciados (12, 36
       y 108 px sobre la diagonal), así empalma sin costura y correrse un
       mosaico entero vuelve al punto de partida. */
    background-size: 152.735px 152.735px;
    animation: deco-lineas 48s linear infinite;
}
.mdpd-svc > .svc-band.con-adorno:not(.is-tinted, .is-dark, .is-lilac, .con-fondo)::before {
    background-image:
        repeating-linear-gradient(var(--deco-ang), rgba(30, 41, 59, .10) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(var(--deco-ang), rgba(142, 117, 178, .26) 0 2px, transparent 2px 36px);
    -webkit-mask:
        radial-gradient(34vw 29vw at var(--deco-a), #000 0, rgba(0, 0, 0, .55) 45%, transparent 100%),
        radial-gradient(34vw 29vw at var(--deco-b), #000 0, rgba(0, 0, 0, .55) 45%, transparent 100%);
    mask:
        radial-gradient(34vw 29vw at var(--deco-a), #000 0, rgba(0, 0, 0, .55) 45%, transparent 100%),
        radial-gradient(34vw 29vw at var(--deco-b), #000 0, rgba(0, 0, 0, .55) 45%, transparent 100%);
}
.mdpd-svc > .svc-band.con-adorno:not(.is-tinted, .is-dark, .is-lilac, .con-fondo)::after {
    background-image: repeating-linear-gradient(var(--deco-ang), #FF1632 0 3px, transparent 3px 108px);
    -webkit-mask:
        radial-gradient(26vw 23vw at var(--deco-a), #000 0 70%, transparent 88%),
        radial-gradient(26vw 23vw at var(--deco-b), #000 0 70%, transparent 88%);
    mask:
        radial-gradient(26vw 23vw at var(--deco-a), #000 0 70%, transparent 88%),
        radial-gradient(26vw 23vw at var(--deco-b), #000 0 70%, transparent 88%);
}
/* Las nubes: dos grupos que salen de las esquinas opuestas y derivan en
   diagonal, uno hacia el otro, y se cruzan por el medio (Emir: las nubes
   sí pueden pasar por el centro; las líneas, no). Tiempos distintos, así
   el dibujo nunca se repite igual.
   Cada capa sobresale 30vw a los lados y 20vw arriba y abajo, y se mueve
   como mucho 25vw y 12vw: su borde queda siempre afuera. Las posiciones se
   miden desde la esquina de la banda (calc(100% - 30vw), 20vw…).
   ⚠ TODO lo del adorno va en vw, nunca en % (2026-09-24): en celular la
   banda es angosta y muy alta, y las elipses en % se estiraban en vertical.
   En vw guardan la proporción con el ancho, sea cual sea el alto. */
.mdpd-svc > .svc-band.con-adorno:not(.is-tinted, .is-dark, .is-lilac, .con-fondo) {
    --nube-a: calc(100% - 30vw) 20vw;   /* arriba a la derecha, en la capa */
    --nube-b: 30vw calc(100% - 20vw);   /* abajo a la izquierda */
    --nube-x: -25vw;            /* A va hacia abajo a la izquierda; B, al revés */
    --nube-y: 12vw;
}
.mdpd-svc > .svc-band.con-adorno:not(.is-tinted, .is-dark, .is-lilac, .con-fondo):is(:nth-child(4n+3), :nth-child(4n)) {
    --nube-a: 30vw 20vw;
    --nube-b: calc(100% - 30vw) calc(100% - 20vw);
    --nube-x: 25vw;
    --nube-y: 12vw;
}
.mdpd-svc > .svc-band.con-adorno:not(.is-tinted, .is-dark, .is-lilac, .con-fondo) > .svc-wrap::before,
.mdpd-svc > .svc-band.con-adorno:not(.is-tinted, .is-dark, .is-lilac, .con-fondo) > .svc-wrap::after {
    content: ""; position: absolute; inset: -20vw -30vw; z-index: -2; pointer-events: none;
}
.mdpd-svc > .svc-band.con-adorno:not(.is-tinted, .is-dark, .is-lilac, .con-fondo) > .svc-wrap::before {
    background:
        radial-gradient(24vw 19.5vw at var(--nube-a), rgba(142, 117, 178, .22), transparent 70%),
        radial-gradient(16vw 14vw at var(--nube-a), rgba(31, 184, 205, .20), transparent 70%);
    animation: deco-nube-a 18s ease-in-out infinite alternate;
}
.mdpd-svc > .svc-band.con-adorno:not(.is-tinted, .is-dark, .is-lilac, .con-fondo) > .svc-wrap::after {
    background:
        radial-gradient(24vw 19.5vw at var(--nube-b), rgba(255, 22, 50, .12), transparent 70%),
        radial-gradient(16vw 14vw at var(--nube-b), rgba(255, 205, 87, .24), transparent 70%);
    animation: deco-nube-b 23s ease-in-out infinite alternate;
}
@keyframes deco-nube-a { to { transform: translate3d(var(--nube-x), var(--nube-y), 0); } }
@keyframes deco-nube-b { to { transform: translate3d(calc(var(--nube-x) * -1), calc(var(--nube-y) * -1), 0); } }
@keyframes deco-lineas { to { background-position: 152.735px 0; } }
@media (prefers-reduced-motion: reduce) {
    .mdpd-svc > .svc-band::before, .mdpd-svc > .svc-band::after,
    .mdpd-svc > .svc-close::before, .mdpd-svc > .svc-close::after,
    .mdpd-svc > .svc-band > .svc-wrap::before, .mdpd-svc > .svc-close > .svc-wrap::before,
    .mdpd-svc > .svc-band > .svc-wrap::after, .mdpd-svc > .svc-close > .svc-wrap::after { animation: none; }
}

/* ---------- Adorno de las bandas grises (2026-09-24) ----------
   El mismo trabajo que el de las blancas, con otro recurso para que no sean
   la misma banda en otro color: en vez de líneas, una TRAMA DE PUNTOS (el
   semitono de los iconos fuera de registro) en dos esquinas opuestas, y las
   mismas nubes que se cruzan por el medio. El centro queda limpio.
   Puntos: finos grises, medianos violetas, grandes cian, y los rojos PUROS
   de la marca en su propia capa (::after), con borde corto de desvanecido.
   Arranca en las esquinas contrarias a las de las blancas, así al bajar el
   adorno cambia de lado. Mosaicos de 10, 30 y 90 px: correrse 90 px vuelve
   al inicio sin salto. */
.mdpd-svc > .svc-band.is-tinted.con-adorno:not(.con-fondo) {
    --deco-a: 0 0;
    --deco-b: 100% 100%;
    --nube-a: 30vw 20vw;
    --nube-b: calc(100% - 30vw) calc(100% - 20vw);
    --nube-x: 25vw;
    --nube-y: 12vw;
    position: relative; isolation: isolate; overflow: clip;
}
.mdpd-svc > .svc-band.is-tinted.con-adorno:not(.con-fondo):is(:nth-child(4n+3), :nth-child(4n)) {
    --deco-a: 100% 0;
    --deco-b: 0 100%;
    --nube-a: calc(100% - 30vw) 20vw;
    --nube-b: 30vw calc(100% - 20vw);
    --nube-x: -25vw;
    --nube-y: 12vw;
}
.mdpd-svc > .svc-band.is-tinted.con-adorno:not(.con-fondo)::before,
.mdpd-svc > .svc-band.is-tinted.con-adorno:not(.con-fondo)::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    animation: deco-puntos 40s linear infinite;
}
.mdpd-svc > .svc-band.is-tinted.con-adorno:not(.con-fondo)::before {
    background:
        radial-gradient(circle, rgba(30, 41, 59, .16) 0 1px, transparent 1.5px) 0 0 / 10px 10px,
        radial-gradient(circle, rgba(142, 117, 178, .34) 0 2px, transparent 2.6px) 0 0 / 30px 30px,
        radial-gradient(circle, rgba(31, 184, 205, .32) 0 3.5px, transparent 4.2px) 15px 15px / 90px 90px;
    -webkit-mask:
        radial-gradient(34vw 29vw at var(--deco-a), #000 0, rgba(0, 0, 0, .55) 45%, transparent 100%),
        radial-gradient(34vw 29vw at var(--deco-b), #000 0, rgba(0, 0, 0, .55) 45%, transparent 100%);
    mask:
        radial-gradient(34vw 29vw at var(--deco-a), #000 0, rgba(0, 0, 0, .55) 45%, transparent 100%),
        radial-gradient(34vw 29vw at var(--deco-b), #000 0, rgba(0, 0, 0, .55) 45%, transparent 100%);
}
.mdpd-svc > .svc-band.is-tinted.con-adorno:not(.con-fondo)::after {
    background: radial-gradient(circle, #FF1632 0 2.5px, transparent 3px) 45px 45px / 90px 90px;
    -webkit-mask:
        radial-gradient(26vw 23vw at var(--deco-a), #000 0 70%, transparent 88%),
        radial-gradient(26vw 23vw at var(--deco-b), #000 0 70%, transparent 88%);
    mask:
        radial-gradient(26vw 23vw at var(--deco-a), #000 0 70%, transparent 88%),
        radial-gradient(26vw 23vw at var(--deco-b), #000 0 70%, transparent 88%);
    animation-name: deco-puntos-rojos;
}
@keyframes deco-puntos { to { background-position: 90px 90px, 90px 90px, 105px 105px; } }
@keyframes deco-puntos-rojos { to { background-position: 135px 135px; } }
/* Las nubes, iguales a las de las blancas */
.mdpd-svc > .svc-band.is-tinted.con-adorno:not(.con-fondo) > .svc-wrap::before,
.mdpd-svc > .svc-band.is-tinted.con-adorno:not(.con-fondo) > .svc-wrap::after {
    content: ""; position: absolute; inset: -20vw -30vw; z-index: -2; pointer-events: none;
}
.mdpd-svc > .svc-band.is-tinted.con-adorno:not(.con-fondo) > .svc-wrap::before {
    background:
        radial-gradient(24vw 19.5vw at var(--nube-a), rgba(142, 117, 178, .24), transparent 70%),
        radial-gradient(16vw 14vw at var(--nube-a), rgba(31, 184, 205, .22), transparent 70%);
    animation: deco-nube-a 20s ease-in-out infinite alternate;
}
.mdpd-svc > .svc-band.is-tinted.con-adorno:not(.con-fondo) > .svc-wrap::after {
    background:
        radial-gradient(24vw 19.5vw at var(--nube-b), rgba(255, 22, 50, .13), transparent 70%),
        radial-gradient(16vw 14vw at var(--nube-b), rgba(255, 205, 87, .26), transparent 70%);
    animation: deco-nube-b 25s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
    .mdpd-svc > .svc-band.is-tinted::before, .mdpd-svc > .svc-band.is-tinted::after,
    .mdpd-svc > .svc-band.is-tinted > .svc-wrap::before, .mdpd-svc > .svc-band.is-tinted > .svc-wrap::after { animation: none; }
}

/* ---------- El cierre: siempre el mismo fondo, tranquilo (2026-09-24) ----------
   Predomina el blanco: solo puntitos del rojo de la marca, quietos, arriba a
   la derecha y abajo a la izquierda. Para desvanecerse sin lavarse a rosa,
   los puntos se ACHICAN hacia adentro (como un semitono) en vez de perder
   opacidad: dos capas de rojo puro, la de puntos grandes en la esquina y la
   de puntos chicos un poco más afuera, con bordes de máscara nítidos. */
.mdpd-svc > .svc-close { position: relative; isolation: isolate; overflow: clip; }
.mdpd-svc > .svc-close::before,
.mdpd-svc > .svc-close::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.mdpd-svc > .svc-close::before {
    background: radial-gradient(circle, #FF1632 0 1.43px, transparent 1.76px) 0 0 / 22px 22px;
    -webkit-mask: radial-gradient(14vw 7.7vw at 100% 0, #000 99%, transparent), radial-gradient(14vw 7.7vw at 0 100%, #000 99%, transparent);
    mask: radial-gradient(14vw 7.7vw at 100% 0, #000 99%, transparent), radial-gradient(14vw 7.7vw at 0 100%, #000 99%, transparent);
}
.mdpd-svc > .svc-close::after {
    background: radial-gradient(circle, #FF1632 0 .78px, transparent 1.1px) 11px 11px / 22px 22px;
    -webkit-mask: radial-gradient(24vw 12.4vw at 100% 0, #000 99%, transparent), radial-gradient(24vw 12.4vw at 0 100%, #000 99%, transparent);
    mask: radial-gradient(24vw 12.4vw at 100% 0, #000 99%, transparent), radial-gradient(24vw 12.4vw at 0 100%, #000 99%, transparent);
}
/* Banda oscura: el mismo tono del hero, para un bloque que tiene que
   pesar en el medio de la página. Va antes del cierre, que siempre
   queda en blanco. */
.svc-band.is-dark { background: var(--ink); color: #cbd5e1; }
.svc-band.is-dark h2,
.svc-band.is-dark h3,
.svc-band.is-dark h2 strong,
.svc-band.is-dark strong { color: #fff; }
.svc-band.is-dark .svc-eyebrow { color: #ff7a8a; }
/* Sobre la banda oscura, las tarjetas y el bloque de cruce pasan a
   vidrio esmerilado, el mismo material que el panel del hero. */
.is-dark .svc-item,
.is-dark .svc-cruce {
    background: rgba(8, 12, 24, .42);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.is-dark .svc-item p,
.is-dark .svc-cruce p { color: #94a3b8; }
/* El acordeón .mdpd-faq vive en el CSS adicional del sitio y está pensado
   para fondo claro: la ficha va en blanco y la pregunta en el gris de
   texto. Sobre la banda oscura el texto se aclara por herencia y queda
   claro sobre blanco, ilegible. Acá se lo pasa a vidrio esmerilado, el
   mismo material que las tarjetas. */
.is-dark .mdpd-faq details {
    background: rgba(8, 12, 24, .42);
    border-color: rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.is-dark .mdpd-faq summary h3 { color: #fff; }
.is-dark .mdpd-faq .mdpd-faq-r { color: #cbd5e1; }
.is-dark .mdpd-faq .mdpd-faq-r strong { color: #fff; }
.is-dark .mdpd-faq .mdpd-faq-r a { color: #ff7a8a; }
/* La flecha usa el rojo de marca, que sobre oscuro se apaga */
.is-dark .mdpd-faq summary::after { border-color: #ff7a8a; }
.is-dark .svc-btn-ghost { border-color: rgba(255, 255, 255, .45); color: #fff !important; }
.is-dark .svc-btn-ghost:hover { background: #fff; color: var(--ink) !important; border-color: #fff; }
.svc-eyebrow {
    font-size: 13px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--red);
}
.svc-head { display: grid; gap: 12px; max-width: 760px; margin-bottom: 42px; }
.svc-head.is-centrada { text-align: center; margin-inline: auto; }
.svc-head h2 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.15; }
.svc-head p { font-size: 18px; }

/* ---------- Botones ----------
   El ancho lo define el contenido: la regla global del Customizer
   estira los submit, y estos son enlaces, no submits. */
.svc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: auto; font-weight: 700; font-size: 16px; line-height: 1.2;
    padding: 15px 26px; border-radius: 6px; text-decoration: none !important;
    border: 2px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.svc-btn-primary { background: var(--red); color: #fff !important; }
.svc-btn-primary:hover { background: var(--red-h); }
.svc-btn-ghost { border-color: var(--ink); color: var(--ink) !important; background: transparent; }
.svc-btn-ghost:hover { background: var(--ink); color: #fff !important; }
.svc-btn svg { width: 20px; height: 20px; flex: none; }
.svc-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================================================
   EL HERO — lo común a todas las páginas de servicio
   ============================================================ */
.svc-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: 84px 92px;
    background: var(--ink);
    color: #cbd5e1;
    border-bottom: 1px solid rgba(255, 22, 50, .38);
}
.svc-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 56px; align-items: center;
}
.svc-hero-copy { display: grid; gap: 22px; justify-items: start; }
.svc-hero .svc-eyebrow { color: #ff7a8a; }
.svc-hero h1 {
    color: #fff;
    font-size: clamp(34px, 4.4vw, 52px); line-height: 1.1; letter-spacing: -.03em;
}
.svc-hero h1 strong { font-weight: 800; color: #fff; }
.svc-lead { font-size: 20px; line-height: 1.55; max-width: 34em; }
.svc-small { font-size: 15px; color: #94a3b8; }
.svc-hero .svc-btn-ghost { border-color: rgba(255, 255, 255, .45); color: #fff !important; }
.svc-hero .svc-btn-ghost:hover { background: #fff; color: var(--ink) !important; border-color: #fff; }

/* El panel de vidrio: los puntos fuertes del servicio */
.svc-panel { display: grid; gap: 12px; }
/* Variante en dos columnas, para cuando el panel lista marcas:
   entran cinco o seis sin estirar el hero. */
.svc-panel.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-panel.is-grid > *:last-child { grid-column: 1 / -1; }
.svc-card {
    display: flex; align-items: flex-start; gap: 14px;
    background: rgba(8, 12, 24, .42);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px; padding: 16px 18px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.svc-card svg { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.svc-card b { display: block; font-weight: 700; font-size: 16px; color: #fff; line-height: 1.25; }
.svc-card i {
    display: block; font-style: normal; font-size: 14px; color: #94a3b8;
    margin-top: 3px; line-height: 1.45;
}

/* ---------- La entrada ----------
   El título llega desde afuera del banner, opaco desde el primer
   cuadro: lo esconde el recorte del hero, no la transparencia.

   El recorrido va en dos tramos, y eso es lo que hace que el gesto
   se vea. Del arranque hasta quedar a --t-resto de su lugar se
   resuelve en el 30% del tiempo, buena parte todavía por debajo del
   borde. Esos últimos 40 px se posan durante el 70% restante, ya en
   cuadro. Con un solo tramo, el movimiento y el desenfoque ocurren
   fuera de cuadro y el gesto se pierde.

   ⚠ El desenfoque va en una animación aparte, con su propio tiempo y
   curva lineal, y esa es la única forma de que se vea. Cuando estaba
   dentro del mismo keyframe, heredaba la curva del movimiento: como
   esa curva resuelve el 90% del tramo en su primer quinto, el blur se
   apagaba en ~250 ms, cuando el título todavía estaba por debajo del
   borde. Se veía solo subiéndolo a valores enormes, que además hacían
   saltar la reproducción. Costó tres vueltas el 2026-09-23.

   ⚠ Animar un blur sobre texto grande es caro: mientras dura, el
   navegador rasteriza y desenfoca en cada cuadro. Por eso conviene
   que --t-blur-dur sea corto, aunque --t-dur sea largo.

   --t-blur va en múltiplos de 4 (criterio de Emir): el radio define
   el tamaño del núcleo de cálculo y los valores redondos le caen
   mejor al rasterizador. */
@keyframes svc-in-title {
    0%   { transform: translate3d(0, var(--t-dist), 0); }
    30%  { transform: translate3d(0, var(--t-resto), 0); }
    100% { transform: none; }
}
@keyframes svc-in-blur {
    from { filter: blur(var(--t-blur)); }
    to   { filter: blur(0); }
}
@keyframes svc-in {
    from { opacity: 0; transform: translate3d(0, var(--r-dist), 0); }
    to   { opacity: 1; transform: none; }
}
/* Los bloques de la derecha entran de costado, desde su propio lado */
@keyframes svc-in-lado {
    from { opacity: 0; transform: translate3d(var(--r-dist), 0, 0); }
    to   { opacity: 1; transform: none; }
}
.svc-hero-copy > * {
    animation: svc-in var(--r-dur) cubic-bezier(.19, .72, .18, 1) both;
}
.svc-panel > * {
    animation: svc-in-lado var(--r-dur) cubic-bezier(.19, .72, .18, 1) both;
}
.svc-hero h1 {
    opacity: 1;
    animation:
        svc-in-title var(--t-dur) var(--t-ease) .1s both,
        svc-in-blur  var(--t-blur-dur) linear .1s both;
}
.svc-hero-copy > .svc-eyebrow { animation-delay: var(--r-delay); }
.svc-hero-copy > .svc-lead    { animation-delay: calc(var(--r-delay) + var(--r-step)); }
.svc-hero-copy > .svc-actions { animation-delay: calc(var(--r-delay) + 2 * var(--r-step)); }
.svc-hero-copy > .svc-small   { animation-delay: calc(var(--r-delay) + 3 * var(--r-step)); }
.svc-panel > *:nth-child(1) { animation-delay: calc(var(--r-delay) + 1.5 * var(--r-step)); }
.svc-panel > *:nth-child(2) { animation-delay: calc(var(--r-delay) + 2.5 * var(--r-step)); }
.svc-panel > *:nth-child(3) { animation-delay: calc(var(--r-delay) + 3.5 * var(--r-step)); }
.svc-panel > *:nth-child(4) { animation-delay: calc(var(--r-delay) + 4.5 * var(--r-step)); }
.svc-panel > *:nth-child(5) { animation-delay: calc(var(--r-delay) + 5.5 * var(--r-step)); }
.svc-panel > *:nth-child(6) { animation-delay: calc(var(--r-delay) + 6.5 * var(--r-step)); }

/* Las tres capas del fondo. El dibujo lo pone cada página. */
.svc-hero::before,
.svc-hero-fx {
    content: "";
    position: absolute;
    pointer-events: none;
    will-change: transform;
}
.svc-hero::before  { inset: -28% -14%; z-index: -3; filter: blur(16px); }
.svc-hero-fx       { inset: -30% -16%; z-index: -2; filter: blur(22px); }
.svc-hero::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    -webkit-mask-image: radial-gradient(78% 74% at 50% 44%, #000 22%, transparent 100%);
    mask-image: radial-gradient(78% 74% at 50% 44%, #000 22%, transparent 100%);
}
/* Quien pidió menos movimiento en su sistema ve lo mismo, quieto */
@media (prefers-reduced-motion: reduce) {
    .mdpd-svc *, .mdpd-svc *::before, .mdpd-svc *::after { animation: none !important; }
}

/* ============================================================
   LOS MOTIVOS — uno por página, para que estén hermanadas sin
   repetir el mismo fondo
   ============================================================ */

/* --- Alojamiento: sala de servidores --- */
.hero-alojamiento::before {
    background:
        radial-gradient(38% 52% at 10% 16%, rgba(31, 184, 205, .62), transparent 68%),
        radial-gradient(30% 42% at 40% 90%, rgba(11, 138, 99, .50), transparent 70%),
        radial-gradient(32% 44% at 88% 12%, rgba(255, 22, 50, .46), transparent 70%),
        radial-gradient(30% 40% at 66% 4%, rgba(120, 90, 235, .44), transparent 70%),
        radial-gradient(34% 44% at 92% 82%, rgba(255, 205, 87, .34), transparent 72%),
        radial-gradient(40% 46% at 62% 96%, rgba(56, 130, 246, .44), transparent 72%);
    animation: aloj-drift 9s ease-in-out infinite alternate;
}
.hero-alojamiento .svc-hero-fx {
    background-image:
        radial-gradient(circle, rgba(31, 184, 205, .90) 0 2px, transparent 3px),
        radial-gradient(circle, rgba(11, 138, 99, .80) 0 2px, transparent 3px),
        radial-gradient(circle, rgba(255, 205, 87, .75) 0 1.6px, transparent 2.6px);
    background-size: 120px 100%, 190px 100%, 264px 100%;
    background-position: 0 50%, 40px 58%, 90px 44%;
    background-repeat: repeat-x;
    filter: blur(1px);
    animation: aloj-leds 7s linear infinite;
}
.hero-alojamiento .svc-hero-fx::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle, rgba(255, 60, 140, .70) 0 1.8px, transparent 2.8px),
        radial-gradient(circle, rgba(120, 90, 235, .70) 0 2.2px, transparent 3.2px);
    background-size: 150px 100%, 218px 100%;
    background-position: 20px 70%, 70px 33%;
    background-repeat: repeat-x;
    animation: aloj-leds-2 11s linear infinite;
}
.hero-alojamiento::after {
    background-image:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .10) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .055) 0 2px, transparent 2px 104px),
        repeating-linear-gradient(0deg,  rgba(255, 255, 255, .05) 0 1px, transparent 1px 64px);
}
@keyframes aloj-drift {
    from { transform: translate3d(-6%, -3%, 0) scale(1.04); }
    to   { transform: translate3d(7%, 5%, 0) scale(1.20); }
}
@keyframes aloj-leds {
    0%   { transform: translate3d(0, 0, 0); }
    25%  { transform: translate3d(48px, -11px, 0); }
    50%  { transform: translate3d(95px, 0, 0); }
    75%  { transform: translate3d(143px, 11px, 0); }
    100% { transform: translate3d(190px, 0, 0); }
}
@keyframes aloj-leds-2 {
    0%   { transform: translate3d(0, 0, 0); }
    25%  { transform: translate3d(-55px, 9px, 0); }
    50%  { transform: translate3d(-109px, 0, 0); }
    75%  { transform: translate3d(-164px, -9px, 0); }
    100% { transform: translate3d(-218px, 0, 0); }
}

/* --- Registro de dominios: el mundo --- */
.hero-dominios::before {
    background:
        radial-gradient(38% 50% at 16% 16%, rgba(120, 90, 235, .58), transparent 68%),
        radial-gradient(32% 44% at 84% 20%, rgba(255, 22, 50, .42), transparent 70%),
        radial-gradient(40% 48% at 62% 96%, rgba(142, 117, 178, .50), transparent 72%);
    animation: dom-drift 11s ease-in-out infinite alternate;
}
.hero-dominios .svc-hero-fx {
    inset: 0;
    filter: none;
    background-image:
        repeating-radial-gradient(circle at 72% 50%,
            transparent 0 40px,
            rgba(120, 90, 235, .20) 40px 42px,
            transparent 42px 82px,
            rgba(31, 184, 205, .17) 82px 84px,
            transparent 84px 124px,
            rgba(255, 22, 50, .15) 124px 126px,
            transparent 126px 166px,
            rgba(255, 205, 87, .13) 166px 168px);
    -webkit-mask-image: radial-gradient(40% 68% at 72% 50%, #000 62%, transparent 100%);
    mask-image: radial-gradient(40% 68% at 72% 50%, #000 62%, transparent 100%);
    animation: dom-latir 12s ease-in-out infinite alternate;
}
.hero-dominios::after {
    background-image:
        repeating-radial-gradient(ellipse 14% 58% at 72% 50%,
            transparent 0 30px, rgba(190, 200, 255, .13) 30px 31px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 78px);
    background-size: 100% 100%, 100% 100%;
    animation: dom-girar 22s ease-in-out infinite alternate;
}
@keyframes dom-drift {
    from { transform: translate3d(-7%, -4%, 0) scale(1.02); }
    to   { transform: translate3d(6%, 6%, 0) scale(1.22); }
}
@keyframes dom-latir {
    from { transform: scale(1); opacity: .8; }
    to   { transform: scale(1.07); opacity: 1; }
}
@keyframes dom-girar {
    from { background-size: 100% 100%, 100% 100%; }
    to   { background-size: 128% 100%, 100% 100%; }
}

/* --- Posicionamiento web: la subida --- */
.hero-posicionamiento::before {
    background:
        radial-gradient(38% 52% at 14% 84%, rgba(11, 138, 99, .58), transparent 68%),
        radial-gradient(34% 46% at 86% 14%, rgba(255, 22, 50, .48), transparent 70%),
        radial-gradient(40% 44% at 54% 8%, rgba(255, 205, 87, .30), transparent 72%);
    animation: pos-drift 10s ease-in-out infinite alternate;
}
.hero-posicionamiento .svc-hero-fx {
    inset: 0;
    filter: none;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(to top, rgba(11, 138, 99, .26) 0 30%, transparent 30%),
        linear-gradient(to top, rgba(31, 184, 205, .24) 0 45%, transparent 45%),
        linear-gradient(to top, rgba(255, 22, 50, .26) 0 58%, transparent 58%),
        linear-gradient(to top, rgba(255, 205, 87, .24) 0 72%, transparent 72%);
    background-size: 46px 100%;
    background-position: 4% 100%, 28% 100%, 52% 100%, 76% 100%;
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 88%);
    mask-image: linear-gradient(to top, #000 0%, transparent 88%);
    transform-origin: bottom;
    animation: pos-crecer 3s ease-in-out infinite alternate;
}
.hero-posicionamiento .svc-hero-fx::before {
    content: "";
    position: absolute; inset: 0;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(to top, rgba(11, 138, 99, .22) 0 38%, transparent 38%),
        linear-gradient(to top, rgba(31, 184, 205, .22) 0 26%, transparent 26%),
        linear-gradient(to top, rgba(255, 22, 50, .24) 0 52%, transparent 52%),
        linear-gradient(to top, rgba(255, 22, 50, .26) 0 66%, transparent 66%);
    background-size: 46px 100%;
    background-position: 16% 100%, 40% 100%, 64% 100%, 88% 100%;
    transform-origin: bottom;
    animation: pos-crecer-2 4.1s ease-in-out infinite alternate;
}
.hero-posicionamiento::after {
    background-image:
        repeating-linear-gradient(64deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 58px),
        repeating-linear-gradient(0deg,  rgba(255, 255, 255, .04) 0 1px, transparent 1px 72px);
}
@keyframes pos-drift {
    from { transform: translate3d(-5%, 4%, 0) scale(1.04); }
    to   { transform: translate3d(8%, -5%, 0) scale(1.20); }
}
@keyframes pos-crecer   { from { transform: scaleY(.72); }  to { transform: scaleY(1.06); } }
@keyframes pos-crecer-2 { from { transform: scaleY(1.05); } to { transform: scaleY(.76); } }

/* --- E-Marketing: la difusión --- */
.hero-emarketing::before {
    background:
        radial-gradient(36% 48% at 18% 22%, rgba(255, 60, 140, .60), transparent 68%),
        radial-gradient(34% 44% at 82% 76%, rgba(255, 205, 87, .44), transparent 70%),
        radial-gradient(40% 50% at 60% 8%, rgba(255, 22, 50, .46), transparent 72%);
    animation: ema-drift 8s ease-in-out infinite alternate;
}
.hero-emarketing .svc-hero-fx {
    inset: -24% 0;
    filter: blur(.4px);
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .40) 0 2px, transparent 3px),
        radial-gradient(circle, rgba(255, 60, 140, .40) 0 3px, transparent 4px);
    background-size: 190px 170px, 320px 250px;
    background-position: 0 0, 70px 40px;
    animation: ema-subir 18s linear infinite;
}

/* ---------- Las marcas flotando en el fondo del hero ----------
   Los logos ya están definidos como <symbol> para el resto de la
   página, así que ponerlos acá no cuesta ni un byte más de descarga.
   Van en su color de marca pero a muy baja opacidad: son textura,
   no ilustración, y el texto tiene que seguir leyéndose por encima.
   La posición y el tamaño los pone el CSS con nth-child, así el HTML
   queda como una lista limpia de logos. */
.svc-hero-marcas {
    position: absolute; inset: 0; z-index: -1;
    pointer-events: none; overflow: hidden;
}
.svc-hero-marcas svg {
    position: absolute;
    opacity: .16;
    will-change: transform;
    animation: marca-flota 19s ease-in-out infinite alternate;
}
/* Tamaños, lugares y ritmos, todos distintos: si dos coinciden se
   nota el patrón y deja de parecer casual. */
.svc-hero-marcas svg:nth-child(1) { width: 88px;  height: 88px;  left: 6%;  top: 14%; animation-duration: 21s; animation-delay: -3s; }
.svc-hero-marcas svg:nth-child(2) { width: 52px;  height: 52px;  left: 21%; top: 68%; animation-duration: 16s; animation-delay: -9s; }
.svc-hero-marcas svg:nth-child(3) { width: 72px;  height: 72px;  left: 36%; top: 22%; animation-duration: 24s; animation-delay: -5s; }
.svc-hero-marcas svg:nth-child(4) { width: 42px;  height: 42px;  left: 47%; top: 78%; animation-duration: 18s; animation-delay: -14s; }
.svc-hero-marcas svg:nth-child(5) { width: 100px; height: 100px; left: 58%; top: 40%; animation-duration: 27s; animation-delay: -7s; }
.svc-hero-marcas svg:nth-child(6) { width: 48px;  height: 48px;  left: 68%; top: 10%; animation-duration: 15s; animation-delay: -11s; }
.svc-hero-marcas svg:nth-child(7) { width: 64px;  height: 64px;  left: 80%; top: 72%; animation-duration: 22s; animation-delay: -2s; }
.svc-hero-marcas svg:nth-child(8) { width: 40px;  height: 40px;  left: 91%; top: 34%; animation-duration: 17s; animation-delay: -16s; }
.svc-hero-marcas svg:nth-child(9) { width: 78px;  height: 78px;  left: 13%; top: 44%; animation-duration: 25s; animation-delay: -19s; }
.svc-hero-marcas svg:nth-child(10){ width: 56px;  height: 56px;  left: 29%; top: 5%;  animation-duration: 20s; animation-delay: -6s; }
.svc-hero-marcas svg:nth-child(11){ width: 46px;  height: 46px;  left: 74%; top: 55%; animation-duration: 23s; animation-delay: -12s; }
.svc-hero-marcas svg:nth-child(12){ width: 66px;  height: 66px;  left: 44%; top: 56%; animation-duration: 26s; animation-delay: -1s; }
@keyframes marca-flota {
    from { transform: translate3d(0, 16px, 0) rotate(-7deg); }
    to   { transform: translate3d(0, -18px, 0) rotate(7deg); }
}
/* En pantallas chicas quedan encimados y ensucian: se van los más
   grandes y sobreviven unos pocos. */
@media (max-width: 880px) {
    .svc-hero-marcas svg:nth-child(n+7) { display: none; }
    .svc-hero-marcas svg { opacity: .13; }
}
.hero-emarketing::after {
    background-image:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 90px),
        repeating-linear-gradient(0deg,  rgba(255, 255, 255, .045) 0 1px, transparent 1px 90px);
}
@keyframes ema-drift {
    from { transform: translate3d(6%, 5%, 0) scale(1.18); }
    to   { transform: translate3d(-7%, -6%, 0) scale(1.02); }
}
@keyframes ema-subir {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-40px, -230px, 0); }
}

/* --- Servicios: la maquinaria ---
   Es la página índice, la que reúne todo, así que el fondo muestra la
   maquinaria completa: engranajes girando con los logos de todas las
   plataformas con las que trabajamos montados encima.

   El engranaje es CSS puro: un anillo de dientes hecho con un
   repeating-conic-gradient, recortado con una máscara anular para que
   los dientes queden solo en el borde. Cada engranaje gira a su ritmo
   y en su sentido; los logos van montados en él y giran con él, pero
   cada uno contrarrota a la misma velocidad para quedar siempre
   derecho: una rueda que gira con las marcas legibles. */
.hero-servicios::before {
    background:
        radial-gradient(38% 50% at 12% 18%, rgba(255, 22, 50, .52), transparent 68%),
        radial-gradient(32% 44% at 84% 16%, rgba(31, 184, 205, .48), transparent 70%),
        radial-gradient(34% 46% at 66% 92%, rgba(120, 90, 235, .48), transparent 70%),
        radial-gradient(30% 40% at 34% 88%, rgba(255, 205, 87, .34), transparent 70%);
    animation: serv-drift 12s ease-in-out infinite alternate;
}
.hero-servicios::after {
    background-image:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(0deg,  rgba(255, 255, 255, .05) 0 1px, transparent 1px 72px);
}
@keyframes serv-drift {
    from { transform: translate3d(-6%, -4%, 0) scale(1.04); }
    to   { transform: translate3d(6%, 5%, 0) scale(1.18); }
}

/* En el fondo va una sola rueda, grande y tenue, como eco de la que
   está adelante. */
.svc-engranajes {
    position: absolute; inset: 0; z-index: -2;
    pointer-events: none; overflow: hidden;
}
.svc-engranaje {
    position: absolute;
    border-radius: 50%;
    color: rgba(255, 255, 255, .5);
    will-change: transform;
    animation: eng-girar 60s linear infinite;
}
/* Los dientes */
.svc-engranaje::before {
    content: "";
    position: absolute; inset: -6%;
    border-radius: 50%;
    background: repeating-conic-gradient(currentColor 0 7deg, transparent 7deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 0 43%, #000 43% 50%, transparent 50%);
    mask: radial-gradient(circle, transparent 0 43%, #000 43% 50%, transparent 50%);
    opacity: .5;
}
/* El aro interior, para que se lea como rueda y no como sol */
.svc-engranaje::after {
    content: "";
    position: absolute; inset: 16%;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: .35;
}
@keyframes eng-girar         { to { transform: rotate(360deg); } }
@keyframes eng-girar-inverso { to { transform: rotate(-360deg); } }
.eng-1 { width: 520px; height: 520px; left: -10%; top: 6%; animation-duration: 110s; opacity: .22; }
.eng-2 { width: 240px; height: 240px; left: 52%; top: 62%; animation-duration: 74s; animation-direction: reverse; opacity: .16; }

/* ---------- La rueda de adelante ----------
   Va donde en las otras páginas va el panel de tarjetas. Los logos
   están montados sobre dos aros que giran en sentidos opuestos, y
   cada uno contrarrota a la misma velocidad que su aro: la rueda
   gira y las marcas se leen siempre derechas. */
.svc-rueda {
    position: relative;
    width: min(100%, 420px);
    aspect-ratio: 1;
    justify-self: center;
    display: grid;
    place-items: center;
}
.svc-rueda-aro {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, .14);
    will-change: transform;
    animation: eng-girar 72s linear infinite;
}
.svc-rueda-aro.aro-dentro {
    inset: 26%;
    border-style: solid;
    border-color: rgba(255, 255, 255, .10);
    animation-duration: 52s;
    animation-direction: reverse;
}
.svc-rueda .orb {
    position: absolute; top: 50%; left: 50%;
    width: 0; height: 0;
    display: grid; place-items: center;
}
/* Cada logo, en su ficha de vidrio, como las tarjetas del hero */
.svc-rueda .orb svg {
    width: 30px; height: 30px;
    padding: 11px;
    box-sizing: content-box;
    background: rgba(8, 12, 24, .58);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: eng-girar-inverso 72s linear infinite;
}
.aro-dentro .orb svg {
    width: 24px; height: 24px; padding: 9px;
    animation-duration: 52s;
    animation-direction: reverse;
}
/* El lugar de cada logo sobre su aro */
.aro-fuera .orb:nth-child(1) { transform: rotate(0deg)   translateY(-194px); }
.aro-fuera .orb:nth-child(2) { transform: rotate(45deg)  translateY(-194px); }
.aro-fuera .orb:nth-child(3) { transform: rotate(90deg)  translateY(-194px); }
.aro-fuera .orb:nth-child(4) { transform: rotate(135deg) translateY(-194px); }
.aro-fuera .orb:nth-child(5) { transform: rotate(180deg) translateY(-194px); }
.aro-fuera .orb:nth-child(6) { transform: rotate(225deg) translateY(-194px); }
.aro-fuera .orb:nth-child(7) { transform: rotate(270deg) translateY(-194px); }
.aro-fuera .orb:nth-child(8) { transform: rotate(315deg) translateY(-194px); }
.aro-dentro .orb:nth-child(1) { transform: rotate(18deg)  translateY(-104px); }
.aro-dentro .orb:nth-child(2) { transform: rotate(90deg)  translateY(-104px); }
.aro-dentro .orb:nth-child(3) { transform: rotate(162deg) translateY(-104px); }
.aro-dentro .orb:nth-child(4) { transform: rotate(234deg) translateY(-104px); }
.aro-dentro .orb:nth-child(5) { transform: rotate(306deg) translateY(-104px); }
/* El engranaje del centro, que es lo que hace girar todo */
.svc-rueda-centro {
    position: relative;
    width: 96px; height: 96px;
    border-radius: 50%;
    color: var(--red);
    animation: eng-girar 34s linear infinite;
}
.svc-rueda-centro::before {
    content: "";
    position: absolute; inset: -8%;
    border-radius: 50%;
    background: repeating-conic-gradient(currentColor 0 8deg, transparent 8deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 0 40%, #000 40% 50%, transparent 50%);
    mask: radial-gradient(circle, transparent 0 40%, #000 40% 50%, transparent 50%);
}
.svc-rueda-centro::after {
    content: "";
    position: absolute; inset: 22%;
    border-radius: 50%;
    border: 3px solid currentColor;
    opacity: .55;
}
/* Entra de costado, como el panel de las otras páginas */
.svc-hero-grid > .svc-rueda {
    animation: svc-in-lado var(--r-dur) cubic-bezier(.19, .72, .18, 1)
               calc(var(--r-delay) + 1.5 * var(--r-step)) both;
}

@media (max-width: 880px) {
    .eng-2 { display: none; }
    .svc-rueda { width: min(100%, 330px); }
    .aro-fuera .orb:nth-child(1) { transform: rotate(0deg)   translateY(-152px); }
    .aro-fuera .orb:nth-child(2) { transform: rotate(45deg)  translateY(-152px); }
    .aro-fuera .orb:nth-child(3) { transform: rotate(90deg)  translateY(-152px); }
    .aro-fuera .orb:nth-child(4) { transform: rotate(135deg) translateY(-152px); }
    .aro-fuera .orb:nth-child(5) { transform: rotate(180deg) translateY(-152px); }
    .aro-fuera .orb:nth-child(6) { transform: rotate(225deg) translateY(-152px); }
    .aro-fuera .orb:nth-child(7) { transform: rotate(270deg) translateY(-152px); }
    .aro-fuera .orb:nth-child(8) { transform: rotate(315deg) translateY(-152px); }
    .aro-dentro .orb:nth-child(1) { transform: rotate(18deg)  translateY(-82px); }
    .aro-dentro .orb:nth-child(2) { transform: rotate(90deg)  translateY(-82px); }
    .aro-dentro .orb:nth-child(3) { transform: rotate(162deg) translateY(-82px); }
    .aro-dentro .orb:nth-child(4) { transform: rotate(234deg) translateY(-82px); }
    .aro-dentro .orb:nth-child(5) { transform: rotate(306deg) translateY(-82px); }
}

/* --- Asesoramiento: el plano --- */
.hero-asesoramiento::before {
    background:
        radial-gradient(38% 50% at 20% 20%, rgba(255, 205, 87, .46), transparent 68%),
        radial-gradient(34% 44% at 82% 18%, rgba(255, 22, 50, .40), transparent 70%),
        radial-gradient(42% 48% at 66% 92%, rgba(232, 0, 28, .34), transparent 72%);
    animation: ase-drift 13s ease-in-out infinite alternate;
}
.hero-asesoramiento .svc-hero-fx {
    inset: 0;
    filter: blur(28px);
    background: linear-gradient(104deg,
        transparent 34%,
        rgba(255, 205, 87, .22) 47%,
        rgba(255, 255, 255, .14) 52%,
        transparent 66%);
    animation: ase-barrer 11s ease-in-out infinite alternate;
}
.hero-asesoramiento::after {
    background-image:
        repeating-linear-gradient(30deg,  rgba(255, 255, 255, .075) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(-30deg, rgba(255, 255, 255, .075) 0 1px, transparent 1px 44px);
}
@keyframes ase-drift {
    from { transform: translate3d(-6%, -5%, 0) scale(1.06); }
    to   { transform: translate3d(5%, 4%, 0) scale(1.18); }
}
@keyframes ase-barrer {
    from { transform: translate3d(-18%, 0, 0); }
    to   { transform: translate3d(18%, 0, 0); }
}

/* ============================================================
   COMPONENTES DEL CUERPO
   ============================================================ */

/* Texto a dos columnas, con los datos al costado */
.svc-split {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    gap: 56px; align-items: start;
}
.svc-prosa { display: grid; gap: 20px; font-size: 18px; }
.svc-prosa h2 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.15; }
.svc-prosa strong { font-weight: 700; color: var(--black); }
.svc-datos { display: grid; gap: 18px; }
.svc-dato {
    display: grid; gap: 4px;
    border-left: 3px solid var(--red); padding-left: 18px;
}
.svc-dato b { font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.svc-dato span { font-size: 15px; color: var(--ink); opacity: .78; }
/* Sobre banda oscura (2026-09-24: faltaba y el texto quedaba del color del fondo) */
.is-dark .svc-dato b { color: #fff; }
/* Logos de marca en el hero, arriba de la prosa y dentro de un dato
   (Inmobiliática, Reservas.Travel, mardelplata.com.ar; 2026-09-24).
   Selector largo: la regla de imágenes de Elementor pisa uno corto. */
.mdpd-svc .svc-hero-logo { display: block; height: 40px; width: auto; max-width: none; margin-bottom: 22px; }
.svc-hero-copy > .svc-hero-logo { animation-delay: var(--r-delay); }
.mdpd-svc .svc-prosa-logo { display: block; height: 34px; width: auto; max-width: none; }
.mdpd-svc .svc-dato-logo { display: block; height: 26px; width: auto; max-width: none; margin: 3px 0 2px; }
@media (max-width: 880px) { .mdpd-svc .svc-hero-logo { height: 32px; } }
/* El icono de la marca (Inmobiliática, Reservas.Travel, mardelplata.com.ar) delante de un texto:
   en la volanta de cada sección de su página, en las escenas y en las pastillas. Se mide en em,
   así acompaña al tamaño del texto donde esté. */
.mdpd-svc img.ico-marca { display: inline-block; width: 1.2em; height: 1.2em; max-width: none; vertical-align: -.22em; margin-right: .45em; border-radius: 22%; }
.mdpd-svc .svc-tld img.ico-marca { margin-right: 0; }
.is-dark .svc-dato span { color: #cbd5e1; opacity: 1; }
/* Imagen debajo de los datos: objetos recortados, sin fondo, que flotan
   sobre la banda. Sin recuadro: con marco quedaba como una foto pegada
   (probado con el collage de Diseño Web, 2026-09-24). */
.svc-datos-foto { display: block; width: 100%; height: auto; margin-top: 10px; }
/* Si la foto viene sobre fondo blanco, `multiply` hace desaparecer el
   blanco contra la banda clara y los objetos quedan flotando, sin recorte. */
.svc-datos-foto.es-sobre-blanco { mix-blend-mode: multiply; }

/* Grilla de puntos: qué incluye el servicio */
.svc-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
/* Cuatro en una fila: para las tarjetas que son sobre todo imagen y
   llevan poco texto, como los wireframes de los tipos de sitio. */
.svc-grid.es-cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-item {
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: 12px; padding: 26px 24px;
    display: grid; gap: 10px; align-content: start;
}
/* El icono va dentro de un círculo: solo, el trazo fino se ve pobre.
   El fondo es neutro a propósito, porque cada icono lleva su color y
   un fondo teñido se pelearía con la mitad de ellos.

   ⚠ El círculo es un elemento aparte y el dibujo va adentro. Cuando
   el redondeo y el relleno estaban sobre el propio <svg>, el
   `border-radius` recortaba el elemento entero —relleno incluido— y
   el dibujo quedaba comido en los bordes por más aire que se le
   diera. Con el círculo y el dibujo como dos elementos, el recorte
   deja de existir. (Costó tres vueltas el 2026-09-23.) */
.mdpd-svc .svc-ico {
    display: inline-grid; place-items: center;
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--ground);
    border: 1px solid var(--rule);
    /* Sombra plana, sin desenfoque, del color del propio icono: por
       eso los iconos usan currentColor y el color va en el círculo. */
    box-shadow: 5px 5px 0 color-mix(in srgb, currentColor 20%, transparent);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.mdpd-svc .svc-ico > svg { width: 40px; height: 40px; }
.is-dark .svc-ico {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 5px 5px 0 color-mix(in srgb, currentColor 26%, transparent);
}
a.svc-item:hover .svc-ico {
    border-color: currentColor;
    box-shadow: 7px 7px 0 color-mix(in srgb, currentColor 28%, transparent);
}
/* La variante chica, para las tiras de logos de marca */
.mdpd-svc .svc-ico.es-chico { width: 52px; height: 52px; }
.mdpd-svc .svc-ico.es-chico > svg { width: 28px; height: 28px; }
/* Una tarjeta también puede ser el enlace a otra página */
a.svc-item {
    text-decoration: none !important; color: inherit;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
a.svc-item:hover {
    border-color: var(--red);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(30, 41, 59, .09);
}
.svc-item-mas { font-size: 15px; font-weight: 700; color: var(--red); }
a.svc-item:hover .svc-item-mas { color: var(--red-h); }
.is-dark a.svc-item:hover { border-color: var(--red); box-shadow: none; }
.is-dark .svc-item-mas { color: #ff7a8a; }

/* Cifras grandes, para una banda de credenciales */
.svc-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.svc-cifra { text-align: center; }
.svc-cifra b {
    display: block; font-size: clamp(38px, 5vw, 58px); font-weight: 800;
    line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.svc-cifra span { display: block; font-size: 16px; margin-top: 10px; }
.is-dark .svc-cifra b { color: #fff; }
.is-dark .svc-cifra span { color: #94a3b8; }

/* Cuando la tarjeta habla de plataformas, en lugar del icono
   dibujado van los logos de las marcas, en su color */
.svc-item-logos { display: flex; align-items: center; gap: 10px; }
.mdpd-svc .svc-item-logos .svc-ico { flex: none; }
.svc-item h3 { font-size: 20px; font-weight: 700; line-height: 1.25; }
.svc-item p { font-size: 16px; line-height: 1.55; }

/* Pasos numerados: para contar un proceso, de a uno. El número lo
   pone el CSS con un contador, así el HTML no los lleva escritos y
   agregar o sacar un paso del medio no obliga a renumerar. */
.svc-pasos { counter-reset: paso; display: grid; gap: 0; }
.svc-paso {
    counter-increment: paso;
    display: grid; grid-template-columns: 64px minmax(0, 1fr);
    gap: 26px; align-items: start;
    padding: 26px 0;
    border-top: 1px solid var(--rule);
}
.svc-paso:last-child { border-bottom: 1px solid var(--rule); }
/* El número va en su medalla, y cada paso toma un tono distinto de
   la paleta: en un solo color la columna se vuelve monótona, y con
   la rotación se lee como una secuencia que avanza. */
.svc-paso {
    --tono: var(--red);
}
.svc-paso:nth-child(5n + 2) { --tono: #1FB8CD; }
.svc-paso:nth-child(5n + 3) { --tono: var(--ok); }
.svc-paso:nth-child(5n + 4) { --tono: #8E75B2; }
.svc-paso:nth-child(5n + 5) { --tono: #D98A00; }
.svc-paso::before {
    content: counter(paso, decimal-leading-zero);
    width: 60px; height: 60px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 21px; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--tono);
    background: color-mix(in srgb, var(--tono) 11%, #fff);
    border: 2px solid var(--tono);
    box-shadow: 5px 5px 0 color-mix(in srgb, var(--tono) 22%, transparent);
}
.is-dark .svc-paso::before {
    background: color-mix(in srgb, var(--tono) 20%, transparent);
    border-color: color-mix(in srgb, var(--tono) 70%, #fff);
    color: color-mix(in srgb, var(--tono) 45%, #fff);
    box-shadow: 5px 5px 0 color-mix(in srgb, var(--tono) 26%, transparent);
}
.svc-paso h3 { font-size: 22px; font-weight: 700; line-height: 1.25; margin-bottom: 8px; }
.svc-paso p { font-size: 17px; }
.is-dark .svc-paso { border-color: rgba(255, 255, 255, .16); }
.is-dark .svc-paso p { color: #94a3b8; }

/* Tira de extensiones de dominio, en pastillas. La extensión se lee
   sola, así que el rótulo va arriba del grupo y no en cada una. */
.svc-tlds-grupo { display: grid; gap: 14px; }
.svc-tlds-grupo + .svc-tlds-grupo { margin-top: 30px; }
.svc-tlds-titulo {
    font-size: 13px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink); opacity: .6;
}
.svc-tlds { display: flex; flex-wrap: wrap; gap: 10px; }
.svc-tld {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: 999px; padding: 11px 20px;
    font-size: 17px; font-weight: 700; color: var(--ink);
    line-height: 1.2; white-space: nowrap;
}
/* Cuando la pastilla nombra una marca, lleva su logo oficial en su
   color. El logo es información: dice de qué se está hablando mejor
   que el nombre solo, y le da a la página el color que los iconos
   dibujados por nosotros no tienen. */
.svc-tld svg { width: 20px; height: 20px; flex: none; }
.svc-logo { flex: none; }
.logo-facebook   { color: #0866FF; }
.logo-instagram  { color: #E4405F; }
.logo-whatsapp   { color: #25D366; }
.logo-youtube    { color: #FF0000; }
.logo-linkedin   { color: #0A66C2; }
.logo-googleads  { color: #4285F4; }
.logo-tiktok     { color: #010101; }
/* Los motores de búsqueda y de IA, en los mismos colores que en la
   página de GEO, para que las dos hablen el mismo idioma */
.logo-wordpress { color: #21759B; }
/* El de Woo es el globo, no el wordmark: a 20 px el nombre escrito
   queda ilegible y el globo se reconoce igual */
.logo-woo       { color: #873EFF; }
.logo-dotnet    { color: #512BD4; }
/* Sobre fondo oscuro, los tres se apagan: van más claros */
.is-dark .logo-wordpress { color: #4FA3C7; }
.is-dark .logo-woo       { color: #A87BFF; }
.is-dark .logo-dotnet    { color: #8B6FF0; }
.logo-google     { color: #4285F4; }
.logo-gpt        { color: #74aa9c; }
.logo-gemini     { color: #8E75B2; }
.logo-claude     { color: #D97757; }
.logo-perplexity { color: #1FB8CD; }
/* TikTok es negro sobre blanco y blanco sobre negro */
.is-dark .logo-tiktok,
.svc-hero .logo-tiktok { color: #fff; }
.svc-tld.is-destacado { border-color: var(--red); color: var(--red); }
/* Una pastilla también puede ser un enlace */
a.svc-tld {
    text-decoration: none !important; color: var(--ink);
    transition: border-color .15s ease, color .15s ease;
}
a.svc-tld:hover { border-color: var(--red); color: var(--red); }
.is-dark a.svc-tld { color: #fff; }
.is-dark a.svc-tld:hover { border-color: var(--red); color: #ff7a8a; }
.svc-tlds-pie { font-size: 16px; margin-top: 26px; }
/* Las pastillas sobre la banda oscura: vidrio esmerilado, igual que
   las tarjetas del hero. */
.is-dark .svc-tlds-titulo { color: #94a3b8; opacity: 1; }
.is-dark .svc-tld {
    background: rgba(8, 12, 24, .42);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.is-dark .svc-tld.is-destacado { border-color: var(--red); color: #ff7a8a; }

/* Bloque de cruce: desde una página de servicio se manda a otra.
   Va en una banda lila para separarlo del resto sin romper la
   alternancia de claros. */
/* Retirado el 2026-09-24 (Emir): el lila sale de los fondos. Queda la regla
   por si alguna página vieja todavía lo usa; las nuevas van en gris. */
.svc-band.is-lilac { background: var(--lilac); }
.svc-cruce {
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: 12px; padding: 34px 36px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 34px; align-items: center;
    box-shadow: 0 20px 44px rgba(30, 41, 59, .07);
}
.svc-cruce h2 { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.2; }
.svc-cruce p { font-size: 17px; margin-top: 10px; }
/* Las marcas van debajo del bloque de cruce, dentro de la misma banda */
.svc-cruce + .svc-tlds-grupo { margin-top: 26px; }

/* Cierre: va en blanco, porque el footer es gris y dos claros
   distintos pegados se leen como un error de impresión */
.svc-close { padding-block: 76px 84px; }
.svc-close-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px; align-items: center;
}
.svc-close h2 { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.15; }
.svc-close p { font-size: 18px; margin-top: 12px; }
/* La volanta del cierre y la del bloque de cruce son span sueltos,
   fuera de una grilla con gap, así que se separan solas. */
.svc-close .svc-eyebrow,
.svc-cruce .svc-eyebrow { display: block; margin-bottom: 10px; }

/* ============================================================
   Móvil
   ============================================================ */
@media (max-width: 980px) {
    .svc-grid, .svc-grid.es-cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
    .svc-hero-grid, .svc-split, .svc-close-grid, .svc-cruce { grid-template-columns: minmax(0, 1fr); }
    .svc-cruce { padding: 26px 24px; gap: 24px; }
    .svc-hero-grid { gap: 38px; }
    .svc-split { gap: 40px; }
    .svc-close-grid { gap: 26px; }
    .svc-hero { padding-block: 52px 60px; }
    .svc-band { padding-block: 54px; }
    .svc-band.con-fondo { padding-block: 81px; }
    .svc-close { padding-block: 54px 60px; }
    .svc-lead { font-size: 18px; }
}
/* Una tarjeta por fila: en un teléfono angosto, dos columnas dejan
   los nombres partidos */
@media (max-width: 700px) {
    .svc-panel.is-grid { grid-template-columns: minmax(0, 1fr); }
    .svc-panel.is-grid > *:last-child { grid-column: auto; }
}
@media (max-width: 620px) {
    .svc-grid, .svc-grid.es-cuatro { grid-template-columns: minmax(0, 1fr); }
    .svc-paso { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
    .svc-paso::before { width: 46px; height: 46px; font-size: 17px; box-shadow: 0 0 0 4px rgba(255, 22, 50, .09); }
}
@media (max-width: 480px) {
    .svc-btn { width: 100%; }
}

/* ============================================================
   PÁGINA GEO — Posicionamiento en IA (2148)
   Mudado acá el 2026-09-23, desde el <style> que vivía dentro del
   widget. La página pasó a usar el sistema (.mdpd-svc): envoltorio,
   bandas, volantas, botones, hero, panel, cierre y la entrada son
   los compartidos. Acá queda solo lo suyo.
   ============================================================ */

/* ---------- El motivo del hero: neón sobre malla ----------
   Tres manchas de luz (el rojo de marca, un violeta y un cian, los
   colores de los logos de las plataformas) sobre una malla de líneas
   anclada a la ventana: al scrollear, el contenido se desliza sobre
   la grilla y la grilla se queda. Todo CSS, sin una imagen. */
.hero-geo::before {
    background:
        radial-gradient(38% 52% at 10% 14%, rgba(255, 22, 50, .72), transparent 66%),
        radial-gradient(34% 46% at 86% 8%,  rgba(142, 117, 178, .66), transparent 68%),
        radial-gradient(42% 52% at 74% 92%, rgba(31, 184, 205, .52), transparent 70%),
        radial-gradient(30% 40% at 38% 96%, rgba(255, 22, 50, .40), transparent 68%);
    animation: geo-drift 5s ease-in-out infinite alternate;
}
.hero-geo .svc-hero-fx {
    background:
        radial-gradient(30% 42% at 62% 22%, rgba(255, 60, 140, .48), transparent 68%),
        radial-gradient(26% 38% at 22% 76%, rgba(120, 90, 235, .46), transparent 70%),
        radial-gradient(34% 40% at 96% 58%, rgba(31, 184, 205, .40), transparent 70%);
    animation: geo-drift-2 7s ease-in-out infinite alternate;
}
.hero-geo::after {
    background-image:
        linear-gradient(rgba(255, 255, 255, .085) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .085) 1px, transparent 1px);
    background-size: 56px 56px;
    /* Anclada a la ventana, no al hero. No se usa `position: fixed` porque
       eso la sacaría del hero y taparía toda la página. Safari en iPhone la
       deja quieta con el resto, que es una degradación sin consecuencias. */
    background-attachment: fixed;
}
/* Ciclos cortos y recorridos largos: con poca amplitud, por rápido que vaya,
   parece que vibra en el lugar. Los tiempos no son múltiplos entre sí para
   que las dos capas no vuelvan a coincidir nunca. */
@keyframes geo-drift {
    from { transform: translate3d(-7%, -4%, 0) scale(1.02); }
    to   { transform: translate3d(8%, 6%, 0) scale(1.22); }
}
@keyframes geo-drift-2 {
    from { transform: translate3d(8%, 6%, 0) scale(1.22) rotate(-6deg); }
    to   { transform: translate3d(-9%, -7%, 0) scale(1.0) rotate(6deg); }
}
.hero-geo h1 .geo-mark { color: var(--red); font-weight: 800; }

/* ---------- Lista de factores ---------- */
.geo-factors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.geo-factors div {
    display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 11px;
    align-items: start; font-size: 16.5px;
}
.geo-factors div::before {
    content: ''; width: 21px; height: 21px; margin-top: 3px; border-radius: 50%;
    background: var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23FF1632' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* ---------- Tira de plataformas ----------
   Cierra la sección «¿Qué es?»: los logos solos, grandes, sin texto alrededor. */
.geo-logo { flex: none; }
.geo-strip {
    margin-top: 52px; padding-top: 38px; border-top: 1px solid var(--rule);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 28px 34px;
}
/* Logo grande arriba y el nombre centrado debajo (Emir, 2026-09-24: el
   doble de lo que tenían, que era 38 px al lado del nombre). */
.geo-strip .geo-plat { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.geo-strip .geo-logo { width: 76px; height: 76px; }
.geo-strip .geo-plat-name { font-weight: 700; font-size: 17px; color: var(--ink); }
/* GEO, «Qué es»: los factores y la tira, debajo de la prosa con sus datos */
#geo-que-es .geo-que-es-mas { margin-top: 48px; }

/* ---------- Motores ----------
   Va a ancho completo para que las cinco entren en una fila en escritorio. */
.svc-wrap.is-wide { max-width: 1480px; }
.geo-engines-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.geo-engine {
    background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
    padding: 24px; display: grid; gap: 10px; align-content: start;
}
.geo-engine h3 { font-size: 19px; font-weight: 700; }
.geo-engine p { font-size: 15.5px; }
.geo-engine-icon {
    width: 68px; height: 68px; border-radius: 14px; background: var(--surface);
    border: 1px solid var(--rule);
    display: grid; place-items: center; margin-bottom: 6px;
}
.geo-engine-icon .geo-logo { width: 38px; height: 38px; }

/* ---------- SEO / AEO / GEO ---------- */
.geo-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.geo-card {
    background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
    padding: 26px; display: grid; gap: 14px; align-content: start;
}
.geo-card.is-top { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.geo-card-badge {
    justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; padding: 3px 8px; border-radius: 4px;
    background: var(--red); color: #fff;
}
.geo-card h3 { font-size: 20px; font-weight: 700; }
.geo-card h3 small { display: block; font-size: 13.5px; font-weight: 600; color: var(--red); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 3px; }
.geo-card p { font-size: 15.5px; }
.geo-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.geo-card li { font-size: 15px; padding-left: 16px; position: relative; margin: 0; }
.geo-card li::before { content: '·'; position: absolute; left: 4px; color: var(--red); font-weight: 800; }

.geo-vision {
    margin-top: 28px; background: var(--ink); color: #fff; border-radius: 12px;
    padding: 30px; display: grid; gap: 14px; border-top: 4px solid var(--red);
}
.geo-vision h3 { color: #fff; font-size: 21px; font-weight: 700; }
.geo-vision p { color: #cbd5e1; }
.geo-vision dl { margin: 0; display: grid; gap: 10px; }
.geo-vision dl div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.geo-vision dt { font-weight: 800; color: var(--yellow); font-size: 15px; letter-spacing: .04em; }
.geo-vision dd { margin: 0; color: #cbd5e1; font-size: 16px; }

/* ---------- El recorrido de la búsqueda: antes y ahora ----------
   Va a lo ancho para que cada recorrido entre en una sola línea. */
.geo-flow {
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: 12px; padding: 30px 32px; display: grid; gap: 26px;
    box-shadow: 0 20px 44px rgba(30, 41, 59, .08);
}
.geo-flow-title { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.geo-flow-row { display: grid; gap: 12px; }
.geo-flow-row .geo-flow-title { color: var(--ink); opacity: .55; }
.geo-flow-row.is-now .geo-flow-title { color: var(--red); opacity: 1; }
.geo-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.geo-steps b {
    display: inline-flex; align-items: center; gap: 9px;
    font-weight: 600; font-size: 16px; padding: 12px 18px; border-radius: 8px;
    background: var(--ground); border: 1px solid var(--rule);
}
.geo-steps .geo-arrow { color: var(--red); font-weight: 700; font-size: 18px; opacity: .5; }
.geo-flow-row.is-now b { background: var(--soft); border-color: var(--soft); color: var(--black); }
.geo-flow-row.is-now b:last-of-type { background: var(--red); border-color: var(--red); color: #fff; }
/* El paso «IA» muestra las plataformas en vez de decirlo con palabras */
.geo-step-ia { padding: 10px 16px !important; }
.geo-step-ia .geo-logo { width: 21px; height: 21px; }
.geo-step-ia .geo-step-logos { display: inline-flex; align-items: center; gap: 9px; }
.geo-flow + .mdpd-faq { margin-top: 42px; }

/* El recorrido sobre la banda oscura: la ficha y los pasos del «antes»
   pasan a vidrio esmerilado. Los del «ahora» conservan el rosa y el rojo,
   que es lo que los distingue, y ahí el texto sigue yendo oscuro. */
.is-dark .geo-flow {
    background: rgba(8, 12, 24, .42);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.is-dark .geo-flow-row .geo-flow-title { color: #94a3b8; opacity: 1; }
.is-dark .geo-flow-row.is-now .geo-flow-title { color: #ff7a8a; }
.is-dark .geo-steps b {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
}
.is-dark .geo-flow-row.is-now b { background: var(--soft); border-color: var(--soft); color: var(--black); }
.is-dark .geo-flow-row.is-now b:last-of-type { background: var(--red); border-color: var(--red); color: #fff; }
.is-dark .geo-steps .geo-arrow { color: #ff7a8a; opacity: .7; }

/* ---------- Sección centrada ----------
   La usa «¿Por qué una empresa necesita trabajar su visibilidad en IA?»,
   para cortar la monotonía del resto, que va alineado a la izquierda.
   El texto de las respuestas sigue a la izquierda: un párrafo centrado
   se lee peor. Desde el 2026-09-23 esa banda es oscura, por la regla del
   cierre: la anteúltima sección va en oscuro y la última en blanco. */
.geo-centrada .svc-head { text-align: center; margin-inline: auto; max-width: 820px; }
.geo-centrada .geo-steps { justify-content: center; }
.geo-centrada .geo-flow-row { justify-items: center; }
.geo-centrada .geo-flow-title { text-align: center; }
.geo-centrada .mdpd-faq { margin-inline: auto; }
.geo-centrada .mdpd-faq summary { text-align: center; padding-inline: 48px; }
.geo-centrada .mdpd-faq summary::after { right: 22px; }

/* ---------- Preguntas ----------
   El acordeón es el componente .mdpd-faq del CSS del sitio, el mismo que
   usa la portada. Acá solo se le pone el ancho. */
.mdpd-geo .mdpd-faq { max-width: 840px; }

/* ---------- Cierre ---------- */
.mdpd-geo .svc-close { border-top: 1px solid var(--rule); }
.mdpd-geo .svc-close-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; }
.mdpd-geo .svc-close h2 { font-size: clamp(30px, 3.6vw, 42px); }
.geo-close-copy { display: grid; gap: 18px; justify-items: start; }
.geo-close-copy p { font-size: 18px; }

/* ---------- Móvil ---------- */
/* Las cinco tarjetas de motores necesitan aire: bajan a tres y después a una */
@media (max-width: 1280px) {
    .geo-engines-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 960px) {
    .mdpd-geo .svc-close-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .geo-engines-grid, .geo-three { grid-template-columns: minmax(0, 1fr); }
    .geo-factors { grid-template-columns: minmax(0, 1fr); }
    .geo-strip { justify-content: flex-start; gap: 20px 28px; }
    .geo-strip { justify-content: center; }
    .geo-strip .geo-logo { width: 56px; height: 56px; }
    .geo-strip .geo-plat-name { font-size: 15px; }
    /* En celulares el fondo fijo cuesta caro y varios navegadores lo manejan
       mal: se ancla al hero como cualquier fondo. */
    .hero-geo::after { background-attachment: scroll; }
}
/* El recorrido pasa a vertical antes de que las cinco cajas dejen de entrar
   en una línea. Las flechas no cambian en el HTML: la misma, rotada 90°. */
@media (max-width: 880px) {
    .geo-steps { flex-direction: column; align-items: stretch; gap: 8px; }
    .geo-steps b { justify-content: center; }
    .geo-steps .geo-arrow {
        display: block; text-align: center; line-height: 1;
        transform: rotate(90deg);
    }
    .geo-flow { padding: 24px 20px; }
    .geo-centrada .geo-flow-row { justify-items: stretch; }
}
@media (max-width: 480px) {
    .mdpd-geo { font-size: 16px; }
    .geo-flow { padding: 20px; }
}

/* ============================================================
   PÁGINA DISEÑO WEB (609)
   Es la página que vende diseño, así que tiene que mostrarlo: la
   maqueta del hero y los wireframes de abajo están dibujados con
   CSS, sin una sola captura ni imagen de stock.
   ============================================================ */

/* ---------- El motivo del fondo: la retícula de maquetación ----------
   Columnas de grilla como las que se usan para diagramar una página,
   con las guías finas cruzándolas. Las columnas cambian de opacidad
   de a una, como cuando se prueba un layout. */
.hero-diseno::before {
    background:
        radial-gradient(38% 50% at 14% 16%, rgba(255, 22, 50, .54), transparent 68%),
        radial-gradient(32% 44% at 86% 18%, rgba(120, 90, 235, .52), transparent 70%),
        radial-gradient(40% 46% at 70% 94%, rgba(31, 184, 205, .46), transparent 72%),
        radial-gradient(28% 38% at 34% 90%, rgba(255, 205, 87, .30), transparent 70%);
    animation: dis-drift 11s ease-in-out infinite alternate;
}
.hero-diseno .svc-hero-fx { display: none; }
.hero-diseno::after {
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 48px);
}
@keyframes dis-drift {
    from { transform: translate3d(-5%, -4%, 0) scale(1.04); }
    to   { transform: translate3d(6%, 5%, 0) scale(1.18); }
}

/* ---------- Los garabatos del fondo ----------
   Manchas orgánicas, pinceladas, flechas dibujadas a mano, punteados
   y destellos: la mesa de un diseñador. Se reparten por el hero como
   los logos flotantes de las otras páginas, cada uno con su color de
   la paleta, su tamaño, su giro y su ritmo. */
.svc-hero-garabatos {
    position: absolute; inset: 0; z-index: -2;
    pointer-events: none; overflow: hidden;
}
.svc-hero-garabatos svg {
    position: absolute;
    will-change: transform;
    animation: gara-flota 17s ease-in-out infinite alternate;
}
.svc-hero-garabatos .es-mancha  { opacity: .26; }
.svc-hero-garabatos .es-trazo   { opacity: .42; }
.svc-hero-garabatos .es-puntos  { opacity: .40; }
.svc-hero-garabatos .es-flecha  { opacity: .46; }
.svc-hero-garabatos .es-brillo  { opacity: .50; }
/* Cada uno en su lugar, con su tamaño y su giro de salida */
.svc-hero-garabatos svg:nth-child(1) { width: 190px; left: 3%;  top: 6%;   color: #FF1632; animation-duration: 21s; animation-delay: -4s; }
.svc-hero-garabatos svg:nth-child(2) { width: 132px; left: 28%; top: 62%;  color: #1FB8CD; animation-duration: 16s; animation-delay: -9s; }
.svc-hero-garabatos svg:nth-child(3) { width: 108px; left: 46%; top: 12%;  color: #FFCD57; animation-duration: 24s; animation-delay: -2s; }
.svc-hero-garabatos svg:nth-child(4) { width: 156px; left: 62%; top: 70%;  color: #8E75B2; animation-duration: 19s; animation-delay: -12s; }
.svc-hero-garabatos svg:nth-child(5) { width: 120px; left: 82%; top: 20%;  color: #FF3C8C; animation-duration: 22s; animation-delay: -6s; }
.svc-hero-garabatos svg:nth-child(6) { width: 96px;  left: 14%; top: 36%;  color: #0B8A63; animation-duration: 18s; animation-delay: -15s; }
.svc-hero-garabatos svg:nth-child(7) { width: 144px; left: 70%; top: 34%;  color: #FF1632; animation-duration: 26s; animation-delay: -8s; }
.svc-hero-garabatos svg:nth-child(8) { width: 88px;  left: 38%; top: 84%;  color: #FFCD57; animation-duration: 15s; animation-delay: -3s; }
.svc-hero-garabatos svg:nth-child(9) { width: 112px; left: 90%; top: 62%;  color: #1FB8CD; animation-duration: 23s; animation-delay: -18s; }
@keyframes gara-flota {
    from { transform: translate3d(0, 14px, 0) rotate(-9deg); }
    to   { transform: translate3d(0, -16px, 0) rotate(9deg); }
}
/* Los trazos largos: líneas finas que cruzan el hero de lado a lado,
   por detrás de todo, como las guías de un boceto a mano. */
.svc-hero-trazos {
    position: absolute; inset: 0; z-index: -3;
    pointer-events: none; overflow: hidden;
    color: rgba(255, 255, 255, .5);
}
.svc-hero-trazos svg { position: absolute; width: 130%; left: -15%; }
.svc-hero-trazos svg:nth-child(1) { top: 12%; opacity: .2; animation: trazo-ir 26s ease-in-out infinite alternate; }
.svc-hero-trazos svg:nth-child(2) { top: 44%; opacity: .15; animation: trazo-ir 34s ease-in-out infinite alternate -8s; }
.svc-hero-trazos svg:nth-child(3) { top: 72%; opacity: .18; animation: trazo-ir 30s ease-in-out infinite alternate -16s; }
@keyframes trazo-ir {
    from { transform: translate3d(-3%, 8px, 0); }
    to   { transform: translate3d(3%, -8px, 0); }
}
/* Las tecnologías, flotando junto con los garabatos */
.svc-hero-tecno {
    position: absolute; inset: 0; z-index: -2;
    pointer-events: none; overflow: hidden;
}
.svc-hero-tecno svg {
    position: absolute;
    opacity: .3;
    will-change: transform;
    animation: gara-flota 20s ease-in-out infinite alternate;
}
.svc-hero-tecno svg:nth-child(1) { width: 46px; left: 9%;  top: 74%; animation-duration: 18s; animation-delay: -5s; }
.svc-hero-tecno svg:nth-child(2) { width: 38px; left: 33%; top: 22%; animation-duration: 23s; animation-delay: -11s; }
.svc-hero-tecno svg:nth-child(3) { width: 52px; left: 55%; top: 84%; animation-duration: 20s; animation-delay: -2s; }
.svc-hero-tecno svg:nth-child(4) { width: 34px; left: 77%; top: 12%; animation-duration: 25s; animation-delay: -14s; }
.svc-hero-tecno svg:nth-child(5) { width: 44px; left: 92%; top: 46%; animation-duration: 17s; animation-delay: -7s; }
.svc-hero-tecno svg:nth-child(6) { width: 36px; left: 21%; top: 50%; animation-duration: 27s; animation-delay: -19s; }
@media (max-width: 880px) {
    .svc-hero-garabatos svg:nth-child(n+5) { display: none; }
    .svc-hero-tecno svg:nth-child(n+4) { display: none; }
    .svc-hero-trazos svg:nth-child(3) { display: none; }
}

/* ---------- La maqueta del hero ----------
   Un navegador y un celular con el contenido esquemático: lo mismo
   que se diagrama antes de diseñar. Va donde en las otras páginas
   está el panel, y entra igual, de costado. */
.svc-maqueta {
    position: relative;
    justify-self: center;
    width: min(100%, 440px);
    padding-bottom: 96px;
    animation: svc-in-lado var(--r-dur) cubic-bezier(.19, .72, .18, 1)
               calc(var(--r-delay) + 1.5 * var(--r-step)) both;
}
.mq-ventana {
    background: rgba(8, 12, 24, .58);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    overflow: hidden;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .34);
}
/* La barra del navegador, con sus tres botones */
.mq-barra {
    display: flex; align-items: center; gap: 6px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
}
.mq-barra i {
    width: 9px; height: 9px; border-radius: 50%;
    background: rgba(255, 255, 255, .26);
}
.mq-barra i:first-child { background: var(--red); opacity: .85; }
.mq-barra u {
    flex: 1; height: 9px; margin-left: 10px; border-radius: 99px;
    background: rgba(255, 255, 255, .10);
}
/* El contenido esquemático */
.mq-lienzo { padding: 16px; display: grid; gap: 11px; }
.mq-lienzo span { display: block; border-radius: 4px; background: rgba(255, 255, 255, .16); }
.mq-nav { height: 10px; width: 62%; }
.mq-bloque {
    height: 92px;
    background: linear-gradient(115deg,
        rgba(255, 22, 50, .55), rgba(120, 90, 235, .45) 52%, rgba(31, 184, 205, .40)) !important;
    position: relative; overflow: hidden;
}
/* El brillo que recorre el bloque: el sitio armándose */
.mq-bloque::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .34) 50%, transparent 62%);
    animation: mq-brillo 4.5s ease-in-out infinite;
}
.mq-linea { height: 8px; }
.mq-linea.es-corta { width: 72%; }
.mq-linea.es-media { width: 86%; }
.mq-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.mq-cols span { height: 46px; }
/* La tablet y el celular, apoyados sobre el borde de la ventana.
   Cada uno con su proporción real: la tablet 3:4, el celular bien
   alargado, que es como se ven de verdad. */
.mq-tablet, .mq-movil {
    position: absolute; bottom: 0;
    overflow: hidden;
    background: rgba(8, 12, 24, .86);
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .44);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.mq-tablet {
    left: 44px; z-index: 2;
    width: 178px; aspect-ratio: 3 / 4;
    border-radius: 14px; padding: 12px 8px;
    animation: mq-flotar 7.5s ease-in-out infinite alternate;
}
.mq-movil {
    right: 34px; z-index: 3;
    width: 104px; aspect-ratio: 9 / 19;
    border-radius: 16px; padding: 11px 7px 8px;
    animation: mq-flotar 6s ease-in-out infinite alternate -2s;
}
/* El pie del monitor: el cuello y la base, detrás de los otros dos
   aparatos. Sin esto la ventana parece flotar en el aire. */
.svc-maqueta::before, .svc-maqueta::after {
    content: "";
    position: absolute; left: 50%; transform: translateX(-50%);
    z-index: 1;
}
.svc-maqueta::before {
    bottom: 74px; width: 74px; height: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .09));
    clip-path: polygon(31% 0, 69% 0, 100% 100%, 0 100%);
}
.svc-maqueta::after {
    bottom: 64px; width: 164px; height: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .16);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
.mq-tablet .mq-lienzo, .mq-movil .mq-lienzo { padding: 8px 7px; gap: 7px; }
.mq-tablet .mq-bloque { height: 58px; }
.mq-movil  .mq-bloque { height: 52px; }
.mq-tablet .mq-nav { width: 54%; height: 8px; }
.mq-movil  .mq-nav { width: 62%; height: 7px; }
.mq-tablet .mq-linea, .mq-movil .mq-linea { height: 6px; }
.mq-tablet .mq-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.mq-tablet .mq-cols span { height: 40px; }
.mq-movil  .mq-cols { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.mq-movil  .mq-cols span { height: 30px; }
/* El altavoz de cada uno */
.mq-tablet::before, .mq-movil::before {
    content: "";
    position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
    height: 3px; border-radius: 99px;
    background: rgba(255, 255, 255, .28);
}
.mq-tablet::before { width: 30px; }
.mq-movil::before  { width: 28px; }
@keyframes mq-brillo {
    0%, 100% { transform: translateX(-120%); }
    55%      { transform: translateX(120%); }
}
@keyframes mq-flotar {
    from { transform: translateY(6px); }
    to   { transform: translateY(-8px); }
}

/* ---------- Wireframes: cada tipo de sitio con su diagrama ----------
   Son bloques grises dentro de una caja, como el boceto que se hace
   antes de diseñar. Cada tipo tiene su disposición: es la diferencia
   entre uno y otro, contada sin palabras. */
.svc-wire {
    aspect-ratio: 4 / 5;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 8px;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    margin-bottom: 6px;
    /* Sombra dura del color del tipo, como la de los iconos. El borde
       queda fino y claro: con el borde oscuro el conjunto pesaba
       demasiado y tapaba el dibujo (probado el 2026-09-23). */
    box-shadow: 7px 7px 0 color-mix(in srgb, var(--tema, var(--red)) 26%, transparent);
}
.is-dark .svc-wire { border-color: rgba(255, 255, 255, .18); }
/* El pie del sitio, que cierra el dibujo por abajo */
.svc-wire .w-pie {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    padding: 7px 9px;
    border-top: 1px solid var(--rule);
    background: rgba(30, 41, 59, .05);
}
.svc-wire .w-pie span { height: 3px; }
.is-dark .svc-wire .w-pie { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); }
/* El puntito de notificación sobre el carrito */
.svc-wire .w-fin { position: relative; }
.svc-wire .w-fin.tiene-badge::after {
    content: ""; position: absolute; top: -3px; right: -3px;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--tema, var(--red));
}
/* Migas de pan y paginación */
.svc-wire .w-migas { display: flex; gap: 4px; align-items: center; }
.svc-wire .w-migas span { height: 3px; width: 14px; }
.svc-wire .w-migas span:last-child { width: 22px; }
.svc-wire .w-pag { display: flex; gap: 4px; justify-content: center; margin-top: 2px; }
.svc-wire .w-pag span { width: 9px; height: 9px; border-radius: 2px; }
.svc-wire .w-pag span:first-child { background: var(--tema, var(--red)) !important; }
/* Las marcas de confianza de una landing */
.svc-wire .w-marcas { display: flex; gap: 6px; justify-content: center; opacity: .6; }
.svc-wire .w-marcas span { height: 7px; width: 22px; border-radius: 2px; }
.svc-wire span, .svc-wire b { display: block; background: rgba(30, 41, 59, .14); border-radius: 2px; }
.svc-wire .w-cuerpo { padding: 9px; display: grid; gap: 8px; align-content: start; }

/* La barra de arriba: el logotipo a la izquierda y el menú al lado */
.svc-wire .w-top {
    display: flex; align-items: center; gap: 5px;
    padding: 8px 9px;
    border-bottom: 1px solid var(--rule);
    background: rgba(30, 41, 59, .035);
}
.svc-wire .w-logo {
    width: 20px; height: 9px; border-radius: 2px;
    background: var(--tema, var(--red)) !important; flex: none;
}
.svc-wire .w-menu { height: 5px; width: 13px; flex: none; }
.svc-wire .w-menu.es-larga { width: 19px; }
.svc-wire .w-top .w-fin { margin-left: auto; width: 11px; height: 9px; border-radius: 2px; }

/* Dentro de los recuadros que hacen de imagen va una silueta
   reconocible: un edificio, una prenda, una persona. Es lo que hace
   que el boceto se lea como una página de verdad y no como cajas. */
.svc-wire .w-foto,
.svc-wire .w-hero,
.svc-wire .w-retrato { display: grid; place-items: center; overflow: hidden; }
.svc-wire .w-foto svg,
.svc-wire .w-retrato svg { width: 64%; height: 64%; opacity: .5; }
.svc-wire .w-hero svg { width: 48%; height: 62%; opacity: .8; }
/* El paisaje ocupa todo el recuadro: es la foto, no un icono adentro */
.svc-wire .w-hero.es-paisaje { background: #CFE6FF !important; padding: 0; }
.svc-wire .w-hero.es-paisaje svg { width: 100%; height: 100%; opacity: 1; }
.svc-wire .w-mini { width: 10px; height: 10px; flex: none; opacity: .65; }
.is-dark .svc-wire .w-foto svg,
.is-dark .svc-wire .w-retrato svg { opacity: .62; }

/* Piezas sueltas */
.svc-wire .w-hero {
    border-radius: 4px;
    color: var(--tema, var(--red));
    background: linear-gradient(118deg,
        color-mix(in srgb, var(--tema, var(--red)) 36%, transparent),
        color-mix(in srgb, var(--tema, var(--red)) 13%, transparent)) !important;
}
.svc-wire .w-txt { height: 4px; }
.svc-wire .w-txt.es-corta { width: 52%; }
.svc-wire .w-txt.es-media { width: 76%; }
.svc-wire .w-btn { height: 11px; width: 46px; border-radius: 3px; background: var(--tema, var(--red)) !important; }
.svc-wire .w-campo { height: 10px; border-radius: 3px; background: rgba(30, 41, 59, .09); border: 1px solid var(--rule); }
.svc-wire .w-lineas { display: grid; gap: 4px; }

/* La tarjeta de producto: foto, nombre y precio */
.svc-wire .w-prod { display: grid; gap: 4px; }
.svc-wire .w-prod .w-foto { height: 26px; border-radius: 3px; background: rgba(30, 41, 59, .18); }
.svc-wire .w-prod .w-precio { height: 5px; width: 54%; background: var(--tema, var(--red)) !important; opacity: .85; }

.is-dark .svc-wire { background: rgba(8, 12, 24, .5); border-color: rgba(255, 255, 255, .16); box-shadow: none; }
.is-dark .svc-wire span, .is-dark .svc-wire b { background: rgba(255, 255, 255, .17); }
.is-dark .svc-wire .w-top { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); }
.is-dark .svc-wire .w-campo { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
.is-dark .svc-wire .w-prod .w-foto { background: rgba(255, 255, 255, .2); }

/* Institucional: portada grande, texto y tres bloques de servicios */
.wire-institucional .w-hero { height: 58px; }
.wire-institucional .w-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 2px; }
.wire-institucional .w-tres > div {
    display: grid; gap: 5px; justify-items: center; align-content: center;
    min-height: 34px; padding: 7px 4px; border-radius: 3px;
    background: rgba(30, 41, 59, .07);
    color: var(--tema, var(--red));
}
.wire-institucional .w-tres > div .w-txt { width: 78%; }
.is-dark .wire-institucional .w-tres > div { background: rgba(255, 255, 255, .07); }

/* Tienda: una franja de filtros y la grilla de productos */
.wire-tienda .w-filtros { display: flex; gap: 4px; }
.wire-tienda .w-filtros span { height: 8px; width: 24px; border-radius: 99px; }
.wire-tienda .w-filtros span:first-child { background: color-mix(in srgb, var(--tema, var(--red)) 40%, transparent) !important; }
.wire-tienda .w-filtros span:last-child { background: color-mix(in srgb, var(--tema2, var(--red)) 34%, transparent) !important; }
/* Cinco productos en tres columnas, con la ficha vertical */
.wire-tienda .w-productos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wire-tienda .w-prod { gap: 3px; }
.wire-tienda .w-prod .w-foto { height: 34px; border-radius: 3px; }
.wire-tienda .w-prod .w-txt { height: 3px; }
.wire-tienda .w-prod .w-precio { height: 4px; }
/* Cada producto con su color propio: la góndola tiene variedad */
.wire-tienda .es-p1 .w-foto { background: #FFE2D6 !important; color: #E8622B; }
.wire-tienda .es-p2 .w-foto { background: #D9EEFF !important; color: #2D7BC4; }
.wire-tienda .es-p3 .w-foto { background: #FFF1CC !important; color: #C98A00; }
.wire-tienda .es-p4 .w-foto { background: #E4E0F7 !important; color: #6F5BA8; }
.wire-tienda .es-p5 .w-foto { background: #D8F2E6 !important; color: #0B8A63; }
.is-dark .wire-tienda .w-prod .w-foto { filter: saturate(.85) brightness(.9); }

/* Catálogo: los filtros al costado y las fichas al lado */
.wire-catalogo .w-split { display: grid; grid-template-columns: 34% 1fr; gap: 8px; }
.wire-catalogo .w-filtro { display: flex; align-items: center; gap: 4px; }
.wire-catalogo .w-filtro i { width: 6px; height: 6px; border-radius: 2px; border: 1px solid rgba(30, 41, 59, .3); flex: none; }
.wire-catalogo .w-filtro i.es-marcado { background: var(--red); border-color: var(--red); }
.wire-catalogo .w-filtro span { height: 4px; flex: 1; }
.wire-catalogo .w-ficha { display: grid; grid-template-columns: 26px 1fr; gap: 5px; align-items: center; }
.wire-catalogo .w-ficha .w-foto { height: 22px; border-radius: 3px; background: rgba(30, 41, 59, .18); }
.is-dark .wire-catalogo .w-filtro i { border-color: rgba(255, 255, 255, .34); }
.is-dark .wire-catalogo .w-ficha .w-foto { background: rgba(255, 255, 255, .2); }

/* Profesionales: el retrato y la presentación arriba, los servicios
   en lista y el botón para pedir una consulta. */
/* El encabezado del profesional es un hero con fondo, y el retrato
   lleva su propio color: es la cara del sitio. */
.wire-profesional .w-perfil {
    display: grid; grid-template-columns: 38px 1fr; gap: 9px; align-items: center;
    padding: 9px; border-radius: 5px;
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--tema) 26%, transparent),
        color-mix(in srgb, var(--tema2) 20%, transparent));
}
.wire-profesional .w-retrato {
    width: 38px; height: 38px; border-radius: 50%;
    background: #EDE7F8 !important; color: #6F5BA8;
    border: 2px solid rgba(255, 255, 255, .8);
}
.wire-profesional .w-perfil .w-txt { background: rgba(30, 41, 59, .26); }
.wire-profesional .w-servicios { display: grid; gap: 7px; }
.wire-profesional .w-serv { display: grid; grid-template-columns: 9px 1fr; gap: 7px; align-items: center; }
.wire-profesional .w-serv i { width: 9px; height: 9px; border-radius: 2px; background: color-mix(in srgb, var(--tema, var(--red)) 42%, transparent); }
.wire-profesional .w-btn { width: 100%; margin-top: 2px; }
.is-dark .wire-profesional .w-retrato { background: rgba(255, 255, 255, .22); }

/* Cada tipo de sitio tiene su color, que tiñe el logotipo, el botón,
   los precios y los acentos de su boceto. Así los cuatro se
   distinguen de un vistazo, en vez de ser cuatro grises iguales. */
/* Cada tipo tiene un color principal y uno complementario, que es el
   que pone el contrapunto: un acento, una cucarda, un detalle. */
.es-institucional { --tema: #3882F6; --tema2: #FFB020; }
.es-tienda        { --tema: #0B8A63; --tema2: #FF3C8C; }
.es-profesional   { --tema: #8E75B2; --tema2: #1FB8CD; }
.es-campana       { --tema: #FF1632; --tema2: #FFCD57; }

/* El icono del tipo, montado sobre la esquina del boceto */
.w-marco { position: relative; margin-bottom: 30px; }
/* La foto de ejemplo de cada tipo (Diseño Web, desde el 2026-09-24,
   en lugar de los wireframes): esquinas redondeadas y la misma sombra
   dura del color del tipo que llevan los iconos. */
.mdpd-svc .w-ejemplo {
    display: block; width: 100%; height: auto; aspect-ratio: 1;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--rule);
    box-shadow: 7px 7px 0 color-mix(in srgb, var(--tema, var(--red)) 26%, transparent);
}
/* El `box-sizing: border-box` del envoltorio se lleva puesto el
   padding: si no se lo pisa con un selector más específico, el icono
   queda de diez píxeles dentro de un círculo grande. */
/* El dibujo es cuadrado y el círculo lo circunscribe: para que las
   esquinas y los bordes rectos no toquen el radio, el diámetro tiene
   que ser bastante mayor que el lado, no apenas mayor. */
.mdpd-svc .w-icono {
    position: absolute; left: 14px; bottom: -22px;
    display: grid; place-items: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    color: var(--tema, var(--red));
    background: #fff;
    border: 1px solid var(--rule);
    box-shadow: 4px 4px 0 color-mix(in srgb, currentColor 30%, transparent);
}
.mdpd-svc .w-icono > svg { width: 36px; height: 36px; }
.is-dark .mdpd-svc .w-icono,
.mdpd-svc .is-dark .w-icono { background: var(--ink); border-color: rgba(255, 255, 255, .22); }

/* Los rubros a los que apunta cada tipo, al pie de la tarjeta */
.svc-rubros {
    font-size: 14px; line-height: 1.45;
    padding-top: 12px; margin-top: 2px;
    border-top: 1px solid var(--rule);
    color: var(--ink); opacity: .82;
}
.svc-rubros b { font-weight: 700; opacity: 1; }
.is-dark .svc-rubros { border-color: rgba(255, 255, 255, .16); color: #94a3b8; }
.is-dark .svc-rubros b { color: #fff; }

/* Campaña: una sola pantalla, todo centrado, y el formulario */
.wire-campana .w-cuerpo { justify-items: center; text-align: center; position: relative; }
.wire-campana .w-hero { height: 52px; width: 100%; position: relative; }
.wire-campana .w-txt { margin-inline: auto; }
.wire-campana .w-form { width: 100%; display: grid; gap: 5px; margin-top: 2px; }
/* El botón de una campaña grita: más alto, con su sombra dura */
.wire-campana .w-btn {
    width: 100%; height: 15px;
    box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink) 55%, transparent);
}
/* Cucardas: el descuento y el signo de admiración, pegados sobre el
   hero como los sellos de una promoción */
.w-cucarda {
    position: absolute;
    display: grid; place-items: center;
    border-radius: 50%;
    font-weight: 800; line-height: 1;
    color: #fff;
    background: var(--tema2) !important;
    border: 2px solid var(--ink);
    transform: rotate(-12deg);
}
.w-cucarda.es-off {
    width: 30px; height: 30px; font-size: 10px;
    right: -6px; top: -10px;
    color: var(--ink);
}
.w-cucarda.es-bang {
    width: 20px; height: 20px; font-size: 12px;
    left: -6px; top: 26px;
    background: var(--tema) !important;
    transform: rotate(10deg);
}
/* La chapita de urgencia debajo del botón */
.w-chapa {
    display: inline-grid; place-items: center;
    padding: 2px 7px; border-radius: 99px;
    font-size: 7px; font-weight: 800; letter-spacing: .04em;
    color: var(--ink);
    background: color-mix(in srgb, var(--tema2) 70%, #fff) !important;
    border: 1px solid var(--ink);
}

/* Los colores de marca de las tecnologías con las que se construye */
.logo-html5            { color: #E34F26; }
.logo-css              { color: #663399; }
.logo-javascript       { color: #F7DF1E; }
.logo-php              { color: #777BB4; }
.logo-adobephotoshop   { color: #31A8FF; }
.logo-adobeillustrator { color: #FF9A00; }
.logo-figma            { color: #F24E1E; }
/* Sobre fondo oscuro, los dos morados se apagan */
.is-dark .logo-css { color: #9B6FD6; }
.is-dark .logo-php { color: #9FA3DD; }

/* ============================================================
   PÁGINA TIENDAS ONLINE (522)
   Motivo del hero: la góndola. Una cinta de fichas de producto que
   se desplaza por detrás, con iconos de comercio flotando encima.
   ============================================================ */
.hero-tiendas::before {
    background:
        radial-gradient(38% 50% at 12% 18%, rgba(11, 138, 99, .58), transparent 68%),
        radial-gradient(32% 44% at 86% 14%, rgba(255, 22, 50, .46), transparent 70%),
        radial-gradient(36% 46% at 70% 92%, rgba(255, 205, 87, .40), transparent 72%),
        radial-gradient(30% 40% at 38% 88%, rgba(31, 184, 205, .42), transparent 70%);
    animation: tie-drift 10s ease-in-out infinite alternate;
}
/* La cinta: dos hileras de fichas que corren en sentidos opuestos */
.hero-tiendas .svc-hero-fx {
    inset: 0;
    filter: none;
    background-image:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, .07) 0 78px, transparent 78px 100px),
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, .05) 0 58px, transparent 58px 80px);
    background-size: 100% 96px, 100% 74px;
    background-position: 0 22%, 0 66%;
    background-repeat: repeat-x;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    animation: tie-cinta 24s linear infinite;
}
.hero-tiendas::after {
    background-image:
        repeating-linear-gradient(0deg,  rgba(255, 255, 255, .045) 0 1px, transparent 1px 54px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 54px);
}
@keyframes tie-drift {
    from { transform: translate3d(-6%, -4%, 0) scale(1.04); }
    to   { transform: translate3d(6%, 5%, 0) scale(1.18); }
}
@keyframes tie-cinta {
    from { background-position: 0 22%, 0 66%; }
    to   { background-position: 200px 22%, -200px 66%; }
}

/* La grilla de integraciones: los logos reales de cada servicio */
.svc-integraciones {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}
.svc-integra {
    display: grid; place-items: center;
    aspect-ratio: 3 / 2;
    padding: 12px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--rule);
    transition: border-color .15s ease, transform .15s ease;
}
/* Todos los logos con la misma altura máxima: sin esto, los
   cuadrados llenan la ficha y los apaisados quedan diminutos, y
   además una imagen más alta que la caja la estira (la ficha tiene
   aspect-ratio, pero el contenido de un grid item puede empujarla). */
.svc-integra img {
    max-height: 58px; max-width: 100%;
    width: auto; height: auto;
    object-fit: contain;
    display: block;
}
.svc-integra:hover { border-color: var(--red); transform: translateY(-2px); }
/* Sobre la banda oscura, el fondo va claro igual: los logos de las
   marcas están hechos para fondo blanco y sobre oscuro se pierden. */
.is-dark .svc-integra { background: #fff; border-color: rgba(255, 255, 255, .2); }
@media (max-width: 620px) {
    .svc-integraciones { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ---------- Cinta de logos ----------
   Reemplaza al carrusel: una tira que corre sin parar, en CSS puro.
   No hay JavaScript ni librería de por medio, no hay flechas ni
   puntitos, y no espera a que el visitante haga nada.

   El truco del bucle: la lista va dos veces y la pista se desplaza
   exactamente la mitad de su ancho. Cuando la animación vuelve al
   principio, el segundo juego está justo donde estaba el primero y
   el salto es invisible. Por eso hay que duplicar TODAS las fichas:
   si falta una, el empalme se nota. */
.svc-cinta { margin-top: 46px; }
/* ⚠ Con `.svc-cinta-titulo` a secas no alcanza: `.mdpd-svc p { margin: 0 }`
   tiene más especificidad y pisa el margen con un shorthand. */
.mdpd-svc .svc-cinta-titulo {
    text-align: center;
    font-size: 13px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #94a3b8;
    margin-bottom: 16px;
}
.svc-cinta-marco { overflow: visible; }
.svc-cinta-pista {
    display: flex; flex-wrap: wrap; gap: 16px;
    justify-content: center;
}
.svc-cinta-ficha {
    display: grid; place-items: center;
    width: 182px; height: 86px;
    padding: 14px 22px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .22);
    flex: none;
}
.svc-cinta-ficha img {
    max-width: 100%; max-height: 52px;
    width: auto; height: auto;
    object-fit: contain; display: block;
}
@keyframes cinta-correr {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 620px) {
    .svc-cinta-ficha { width: 146px; height: 70px; padding: 11px 16px; }
    .svc-cinta-ficha img { max-height: 40px; }
    .svc-cinta-ficha .svc-logo { width: 40px; height: 40px; }
}


/* ---------- Los logos de integraciones ----------
   Conviven dos orígenes mientras se completa el juego:
   · SVG oficiales a color (Andreani, Mercado Libre, OCA, Correo
     Argentino, Rappi, Enviopack, Perfit) y monocromos de Simple
     Icons con su color de marca (Mercado Pago, PayPal, MailChimp).
   · Los PNG viejos de los que todavía no hay versión limpia, que
     traen un disco gris dibujado adentro del archivo. Se los deja
     un poco más chicos para que el disco no domine la ficha. */
.svc-integra img.es-viejo { transform: scale(1.18); }
.svc-integra .svc-logo { width: 58px; height: 58px; }
.logo-mercadopago { color: #00B1EA; }
.logo-paypal      { color: #003087; }
.logo-mailchimp   { color: #FFE01B; }

/* ⚠ Los <svg> que dibujan con <use> no llevan viewBox propio —vive en
   el <symbol>—, así que sin ancho y alto explícitos el navegador les
   asigna 300x150 y se desbordan de su caja. Siempre las dos medidas. */
.svc-cinta-ficha .svc-logo { width: 52px; height: 52px; flex: none; }

/* La grilla de integraciones baja a dos columnas en tablet */
@media (max-width: 980px) {
    .svc-integraciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* El nombre debajo de cada ficha: varios logos son solo isotipo y sin
   el nombre no se reconocen. */
.svc-integra-celda { display: grid; gap: 9px; justify-items: stretch; }
.svc-integra-nombre {
    text-align: center;
    font-size: 13px; font-weight: 600; line-height: 1.3;
    color: var(--ink); opacity: .8;
}
.is-dark .svc-integra-nombre { color: #94a3b8; opacity: 1; }

/* ---------- La cinta entra última ----------
   Después de que terminó todo lo demás del hero: primero el rótulo y
   enseguida las fichas en dominó, cada una un cuarto de segundo
   detrás de la anterior. La curva pasa de largo y vuelve, que es lo
   que da el rebote. Los retardos se cuelgan de --t-dur, así que si se
   cambia la duración del título, la cinta se reacomoda sola. */
@keyframes cinta-entra {
    from { opacity: 0; transform: translate3d(0, 28px, 0) scale(.92); }
    to   { opacity: 1; transform: none; }
}
.svc-cinta-titulo {
    animation: svc-in 1s cubic-bezier(.19, .72, .18, 1) calc(var(--t-dur) - .95s) both;
}
.svc-cinta-ficha {
    animation: cinta-entra .7s cubic-bezier(.34, 1.56, .64, 1) both;
}
.svc-cinta-ficha:nth-child(1) { animation-delay: calc(var(--t-dur) - .7s); }
.svc-cinta-ficha:nth-child(2) { animation-delay: calc(var(--t-dur) - .6s); }
.svc-cinta-ficha:nth-child(3) { animation-delay: calc(var(--t-dur) - .5s); }
.svc-cinta-ficha:nth-child(4) { animation-delay: calc(var(--t-dur) - .4s); }
.svc-cinta-ficha:nth-child(5) { animation-delay: calc(var(--t-dur) - .3s); }
.svc-cinta-ficha:nth-child(6) { animation-delay: calc(var(--t-dur) - .2s); }
.svc-cinta-ficha:nth-child(7) { animation-delay: calc(var(--t-dur) - .1s); }
.svc-cinta-ficha:nth-child(8) { animation-delay: calc(var(--t-dur)); }

/* =================================================================
   ESCENAS (2026-09-24)
   En lugar de un icono genérico, cada tarjeta muestra un fragmento de
   la interfaz real que cuenta la idea: la mesa de diseño, los tres
   anchos, las pestañas de los navegadores, el camino de clics, la nota
   de Google, el mapa que crece. Se entiende sin leer y solo lo puede
   mostrar quien hace sitios. Aprobado por Emir y Diego.

   Estructura: <div class="esc" style="--c:#color"> con piezas .ui
   (interfaz en blanco, como una pantalla de verdad) sobre una mesa de
   trabajo con trama de puntos. Funcionan en banda clara y oscura.
   Cada escena nueva agrega su bloque abajo, con prefijo propio.
   Muestra de origen: paginas/_muestras/iconos-direcciones.html
   ================================================================= */
.esc {
    --c: #FF1632;
    position: relative; height: 158px; margin-bottom: 8px;
    border-radius: 10px; overflow: hidden;
    background-color: var(--ground);
    background-image: radial-gradient(rgba(30, 41, 59, .13) 1px, transparent 1.3px);
    background-size: 12px 12px;
    border: 1px solid var(--rule);
    color: #1E293B;
    /* Es una ilustración: el texto no se selecciona ni se arrastra */
    -webkit-user-select: none; user-select: none;
}
.is-dark .esc {
    background-color: rgba(255, 255, 255, .03);
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.3px);
    border-color: rgba(255, 255, 255, .1);
}
/* Una luz del color de la tarjeta, muy baja, desde una esquina */
.esc::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%);
}
.ui {
    position: absolute; background: #fff; border-radius: 7px; color: #1E293B;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .05), 0 14px 28px -10px rgba(15, 23, 42, .35);
}
.ui-t { font-size: 8.5px; font-weight: 600; letter-spacing: .02em; }

/* Piezas que comparten varias escenas */
/* El sitio de la posada, en miniatura: foto de mar, sol y arena */
.ps-foto {
    background:
        radial-gradient(circle at 80% 30%, #FFD66B 0 7%, transparent 7.6%),
        linear-gradient(180deg, #CFF1F6 0 52%, #38BDD0 52% 72%, #EAD7AE 72%);
}
.ps-logo { display: flex; align-items: center; gap: 3px; font-weight: 800; white-space: nowrap; }
.ps-logo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 50% 70%, #1FB8CD 0 45%, #0E7490 46%); flex: none; }
.ps-nav { display: flex; gap: 3px; margin-left: auto; }
.ps-nav i { width: 9px; height: 2.5px; border-radius: 1px; background: #CBD5E1; }

/* La barra de direcciones del navegador */
.nv-url { display: flex; align-items: center; gap: 4px; margin: 4px 6px; height: 12px; padding: 0 7px; border-radius: 6px; background: #F2F5F7; font-size: 7px; color: #475569; white-space: nowrap; }
.nv-url svg { width: 7px; height: 7px; flex: none; }

/* Piezas comunes de interfaz chica */
.esc .ok-v { display: inline-grid; place-items: center; width: 11px; height: 11px; border-radius: 50%; background: #0B8A63; flex: none; }
.esc .ok-v svg { width: 7px; height: 7px; }
.ui-mut { color: #64748b; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .esc *, .esc *::before, .esc *::after { animation: none !important; }
}

/* Las escenas propias de cada página viven en assets/escenas/<página>.css
   y las encola mdd-ajustes.php solo donde van (MDD_ESCENAS_PAGINA). */

/* =================================================================
   ICONOS FUERA DE REGISTRO (2026-09-24)
   Dibujados como una impresión a dos tintas: la mancha de color
   (plena o con trama de semitono) corrida unos píxeles, y el dibujo en
   línea encima. Extiende la sombra dura de tarjetas y círculos.

   REGLA: cada ítem tiene SU icono, dibujado para lo que dice. Nada de
   iconos comodín (la hojita con renglones, el escudo, el rayo) que
   sirven para cualquier cosa y por eso no dicen nada.

   Cómo se dibuja uno (grilla de 48, viewBox="0 0 48 48"):
     <svg class="ir" viewBox="0 0 48 48" style="color:#XXXXXX">
       <g class="tinta">  formas llenas: fill="currentColor", y con
                          mask="url(#mdpd-trama)" las de semitono
       <g class="linea">  el dibujo; class="papel" en las formas que
                          tienen que tapar lo que queda detrás
   La máscara #mdpd-trama se define UNA vez por página, en el bloque
   <svg> de símbolos del principio (ver diseno-web.html).
   ================================================================= */
.ir { display: block; width: 76px; height: 76px; overflow: visible; margin-bottom: 6px; --linea: #1E293B; --papel: #fff; }
.is-dark .ir { --linea: #fff; --papel: #1E293B; }
.ir .tinta { transform: translate(2.6px, 2.6px); transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.svc-item:hover .ir .tinta { transform: translate(3.6px, 3.6px); }
.ir .linea { fill: none; stroke: var(--linea); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ir .papel { fill: var(--papel); }
/* Dentro del círculo montado sobre la foto de los tipos de sitio */
.mdpd-svc .w-icono > svg.ir { width: 40px; height: 40px; margin: 0; }
.mdpd-svc .w-icono .ir { --papel: #fff; }
.is-dark .mdpd-svc .w-icono .ir, .mdpd-svc .is-dark .w-icono .ir { --papel: var(--ink); }

/* Iconos fuera de registro sobre el hero y sus tarjetas de vidrio */
.svc-card svg.ir { width: 44px; height: 44px; margin: -4px 0 0; }
.svc-hero .ir { --linea: #fff; --papel: #172033; }