/* ============================================================
   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: 1240px; 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 oscura con foto de fondo: `svc-band is-dark con-fondo fondo-<pagina>`. Desde el
   2026-09-29 es solo para bandas oscuras: las blancas van lisas (Emir).
   Tres capas: ::before la foto, ::after el velo del gris pizarra de la banda (--velo, 0 a 1;
   liviano, porque la foto ya viene oscurecida) y el contenido arriba. La foto va fija: la
   banda se desliza sobre ella. Cada página define su foto con una clase propia. */
.svc-band.con-fondo {
    --velo: .35;
    padding-block: 114px; /* 50% más que una banda común: la foto necesita aire */
    position: relative; isolation: isolate; overflow: clip;
    background-color: var(--ink);
}
.svc-band.con-fondo::before,
.svc-band.con-fondo::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.svc-band.con-fondo::before {
    background-image: var(--fondo);
    background-position: center; background-size: cover; background-repeat: no-repeat;
    background-attachment: fixed;
}
.svc-band.con-fondo::after { background: var(--ink); opacity: var(--velo); }
/* En celulares la foto también va fija (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. (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; background-attachment: scroll; }
}
.svc-band.fondo-diseno-web-oscuro { --fondo: url("imagenes/diseno-web-fondo-oscuro.jpg"); }
.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; }
/* Las oscuras sin foto llevan textura (Emir, 2026-09-29), sin dejar de ser el mismo azul
   pizarra: una grilla de puntos que se pierde hacia los bordes (la viñeta va encima de los
   puntos), una luz azul arriba a la izquierda y un rastro del rojo abajo a la derecha. */
.svc-band.is-dark:not(.con-fondo) {
    background-color: var(--ink);
    background-image:
        radial-gradient(ellipse 60% 75% at 10% 0%, rgba(96, 165, 250, .13), transparent 70%),
        radial-gradient(ellipse 55% 65% at 92% 100%, rgba(255, 22, 50, .09), transparent 70%),
        radial-gradient(ellipse 85% 95% at 50% 50%, transparent 35%, rgba(15, 23, 42, .8) 100%),
        radial-gradient(rgba(148, 163, 184, .2) 1px, transparent 1.4px);
    background-size: auto, auto, auto, 22px 22px;
}
.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);
}
/* Hero bajo: para páginas con poco que decir arriba, como las categorías del
   portfolio (Emir, 2026-09-24). Una sola columna, sin panel. */
.svc-hero.es-bajo { padding-block: 54px 50px; }
.svc-hero.es-bajo .svc-hero-grid { grid-template-columns: minmax(0, 1fr); }
.svc-hero.es-bajo h1 { font-size: clamp(34px, 4.4vw, 52px); }
@media (max-width: 880px) { .svc-hero.es-bajo { padding-block: 40px 38px; } }
.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: un negocio que se arma ---
   El fondo del hero: las luces de color y la retícula. La escena y la constelación de los
   servicios que va detrás de ella están en escenas/servicios.css (2026-09-29; antes iban acá
   los engranajes y la rueda de logos). */
.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); }
}

/* --- 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 (rehecha el 2026-09-25) ----------
   Tres clientes inventados, uno por aparato, cada uno con su marca, su paleta y su diagramación:
   lo que hace un diseñador. En la computadora, la «Posada del Mar» (con una foto de la costa de
   mardelplata.com), donde un cursor busca fechas y aparece la habitación libre; en la tablet, la
   tienda «MardelShop»; en el celular, el estudio «Bristol Arq», que recibe una consulta.
   Alrededor, las fichas del oficio: la nota de rendimiento, la paleta y la tipografía. La usan
   Diseño Web y el slider de la portada. Todo es texto y CSS: liviano, nítido y editable. */
.svc-maqueta {
    position: relative;
    justify-self: center;
    width: min(100%, 440px);
    padding-bottom: 118px;
    animation: svc-in-lado var(--r-dur) cubic-bezier(.19, .72, .18, 1)
               calc(var(--r-delay) + 1.5 * var(--r-step)) both;
    -webkit-user-select: none; user-select: none;
}
.mq-ventana {
    position: relative;
    background: rgba(8, 12, 24, .62);
    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, .38);
}
.mq-barra { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: rgba(255, 255, 255, .05); }
.mq-barra i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mq-barra i:first-child { background: #FF5F57; }
.mq-barra i:nth-child(2) { background: #FEBC2E; }
.mq-barra i:nth-child(3) { background: #28C840; }
.mq-barra u {
    flex: 1; display: flex; align-items: center; gap: 5px; margin-left: 10px; height: 20px; padding: 0 10px;
    border-radius: 99px; background: rgba(255, 255, 255, .1);
    font-size: 10px; font-weight: 600; text-decoration: none; color: rgba(255, 255, 255, .72); white-space: nowrap;
}
.mq-barra u svg { width: 10px; height: 10px; flex: none; }

/* ---- Lo común a los tres sitios. Cada uno pone su paleta en --m1 (principal), --m2 (acento),
   --fondo y --tinta. */
.mq-sitio { position: relative; overflow: hidden; background: var(--fondo); color: var(--tinta); font-size: 9px; line-height: 1.3; }
.mq-sitio * { min-width: 0; }
.mq-nav { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid color-mix(in srgb, var(--tinta) 10%, transparent); }
.mq-marca { display: flex; align-items: center; gap: 4px; font-weight: 800; white-space: nowrap; }
.mq-links { display: flex; gap: 10px; margin-left: auto; font-size: 8.5px; white-space: nowrap; opacity: .7; }
.mq-links b { font-weight: 700; }
.mq-cta { font-size: 8.5px; font-weight: 800; color: #fff; background: var(--m1); border-radius: 99px; padding: 4px 10px; white-space: nowrap; }
.mq-hamb { display: grid; gap: 2px; margin-left: auto; }
.mq-hamb i { display: block; width: 10px; height: 1.6px; border-radius: 1px; background: var(--tinta); }

/* ---- Posada del Mar: azul marino, dorado y arena; la foto del atardecer sobre la costa */
.mq-sitio.es-posada { --m1: #0F2A44; --m2: #C9A45C; --fondo: #FBF8F2; --tinta: #0F2A44; }
.es-posada .mq-marca { font-size: 11px; font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: .01em; }
.es-posada .mq-marca i { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #F3D58C 0 40%, var(--m2) 42%); }
.es-posada .mq-cta { background: var(--m2); color: #0F2A44; }
.es-posada .mq-portada {
    position: relative; height: 128px; padding: 16px 16px 0;
    background: linear-gradient(90deg, rgba(15, 42, 68, .78) 0%, rgba(15, 42, 68, .35) 48%, transparent 72%), url("imagenes/mq-posada-del-mar.webp") center / cover;
}
.es-posada .mq-titulo { display: block; max-width: 55%; font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 700; line-height: 1.05; color: #fff; }
.es-posada .mq-titulo small { display: block; margin-top: 5px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #F3D58C; }
.mq-puntaje { position: absolute; right: 12px; top: 12px; display: grid; justify-items: center; padding: 4px 9px; border-radius: 8px; background: #fff; box-shadow: 0 6px 14px -6px rgba(15, 42, 68, .5); }
.mq-puntaje b { font-size: 10px; font-weight: 800; color: #0F2A44; }
.mq-puntaje b::first-letter { color: #E0A526; }
.mq-puntaje small { font-size: 6px; font-weight: 700; color: #64748b; white-space: nowrap; }
.mq-buscador {
    position: absolute; left: 14px; right: 14px; bottom: -16px; z-index: 1;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 4px;
    padding: 5px; border-radius: 9px; background: #fff;
    box-shadow: 0 10px 24px -10px rgba(15, 23, 42, .45);
}
.mq-buscador span { padding: 2px 7px; font-size: 9px; font-weight: 800; white-space: nowrap; border-right: 1px solid #EEF2F6; }
.mq-buscador span:nth-child(3) { border-right: 0; }
.mq-buscador small { display: block; font-size: 6.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.mq-buscador b { display: grid; place-items: center; padding: 0 13px; border-radius: 6px; background: var(--m1); color: #fff; font-size: 9px; font-weight: 800; }
.mq-buscar { animation: mq-clic 8s infinite; }
.mq-habs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 26px 12px 13px; }
.mq-hab { position: relative; display: grid; gap: 1px; font-size: 9px; }
.mq-hab i { display: block; height: 46px; margin-bottom: 4px; border-radius: 5px; position: relative; overflow: hidden;
    background: linear-gradient(180deg, var(--h) 0 62%, color-mix(in srgb, var(--h) 76%, #0F2A44) 62%); }
.mq-hab i::before { content: ""; position: absolute; left: 22%; right: 22%; bottom: 20%; height: 26%; border-radius: 3px 3px 1px 1px; background: #fff; box-shadow: 0 -5px 0 -1px color-mix(in srgb, var(--h) 50%, #0F2A44); }
.mq-hab b { font-weight: 800; }
.mq-hab small { font-size: 7.5px; opacity: .65; font-weight: 600; }
.mq-hab em { position: absolute; top: 5px; left: 5px; font-style: normal; font-size: 6.5px; font-weight: 800; color: #fff; background: #0B8A63; border-radius: 99px; padding: 1px 6px; animation: mq-libre 8s infinite both; }
.mq-hab.es-libre i { animation: mq-libre-borde 8s infinite; }

/* El cursor: va a «Buscar», hace clic y baja a la habitación que quedó libre */
.mq-cursor { position: absolute; width: 14px; height: 18px; z-index: 3; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); animation: mq-cursor 8s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes mq-cursor {
    0%   { left: 48%; top: 92%; opacity: 0; }
    6%   { opacity: 1; }
    26%  { left: 89%; top: 60%; }
    30%  { left: 89%; top: 60%; transform: scale(.86); }
    34%  { left: 89%; top: 60%; transform: none; }
    58%  { left: 50%; top: 80%; }
    88%  { left: 50%; top: 80%; opacity: 1; }
    100% { left: 50%; top: 80%; opacity: 0; }
}
@keyframes mq-clic { 0%, 28% { box-shadow: 0 0 0 0 rgba(15, 42, 68, 0); } 31% { box-shadow: 0 0 0 5px rgba(15, 42, 68, .3); transform: scale(.94); } 38%, 100% { box-shadow: 0 0 0 9px rgba(15, 42, 68, 0); transform: none; } }
@keyframes mq-libre { 0%, 36% { opacity: 0; transform: scale(.6); } 42%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes mq-libre-borde { 0%, 36% { box-shadow: 0 0 0 0 rgba(11, 138, 99, 0); } 42%, 94% { box-shadow: 0 0 0 2px #0B8A63; } 100% { box-shadow: 0 0 0 0 rgba(11, 138, 99, 0); } }

/* ---- Los aparatos, apoyados sobre el borde de la ventana, cada uno con su proporción real.
   Quedan dentro del ancho del monitor, y el celular un poco más abajo que la tablet: puestos
   «así nomás», no alineados. */
.mq-tablet, .mq-movil {
    position: absolute; bottom: 0; overflow: hidden;
    background: #0B1220; border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.mq-tablet { left: 16px; bottom: 16px; z-index: 2; width: 152px; aspect-ratio: 3 / 4; border-radius: 14px; padding: 12px 7px 9px; animation: mq-flotar 7.5s ease-in-out infinite alternate; }
.mq-movil { right: 22px; bottom: -8px; z-index: 3; width: 94px; aspect-ratio: 9 / 19; border-radius: 17px; padding: 12px 5px 7px; animation: mq-flotar 6s ease-in-out infinite alternate -2s; }
.mq-tablet .mq-sitio, .mq-movil .mq-sitio { height: 100%; border-radius: 6px; }
.mq-movil .mq-sitio { border-radius: 10px; }
.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: 26px; }

/* ---- MardelShop: magenta, violeta y amarillo; la promo y dos productos */
.mq-sitio.es-shop { --m1: #E11D74; --m2: #FFD23F; --fondo: #fff; --tinta: #2A1454; font-size: 7px; }
.es-shop .mq-nav { padding: 5px 7px; }
.es-shop .mq-marca { font-size: 8px; letter-spacing: -.02em; }
.es-shop .mq-marca i { width: 8px; height: 8px; border-radius: 2px; background: linear-gradient(135deg, var(--m1), #7C3AED); }
.mq-carro { position: relative; margin-left: auto; color: var(--tinta); display: flex; }
.mq-carro svg { width: 10px; height: 10px; }
.mq-carro b { position: absolute; top: -4px; right: -5px; min-width: 8px; height: 8px; padding: 0 2px; border-radius: 99px; background: var(--m1); color: #fff; font-size: 5.5px; font-weight: 800; display: grid; place-items: center; }
.mq-promo-banner { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin: 6px 7px 0; padding: 9px 8px; border-radius: 7px; background: linear-gradient(120deg, #3B1E6E, #7C3AED 48%, var(--m1)); color: #fff; }
.mq-promo-banner span { display: grid; font-size: 10px; font-weight: 800; line-height: 1.1; }
.mq-promo-banner small { font-size: 5.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--m2); margin-bottom: 2px; }
.mq-promo-banner b { flex: none; padding: 3px 7px; border-radius: 99px; background: var(--m2); color: #2A1454; font-size: 6.5px; font-weight: 800; }
.mq-prods { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 7px 7px 0; }
.mq-prod { display: grid; gap: 1px; font-size: 6.5px; }
.mq-prod i { position: relative; display: grid; place-items: center; height: 44px; margin-bottom: 2px; border-radius: 5px; background: var(--p); }
.mq-prod i svg { height: 34px; width: auto; }
.mq-prod i u { position: absolute; top: 3px; left: 3px; padding: 1px 4px; border-radius: 99px; background: var(--m1); color: #fff; font-size: 5.5px; font-weight: 800; text-decoration: none; }
.mq-prod b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-prod small { font-size: 6.5px; font-weight: 800; color: var(--m1); }
.mq-prod em { margin-top: 2px; padding: 2px 0; border-radius: 4px; background: var(--tinta); color: #fff; font-size: 5.5px; font-weight: 800; font-style: normal; text-align: center; }

/* ---- Bristol Arq: negro, terracota y blanco roto; la foto de la Rambla. Los textos están
   medidos para el ancho del celular: nada se sale. */
.mq-sitio.es-arq { --m1: #C8553D; --m2: #111; --fondo: #F4F1EC; --tinta: #111; font-size: 6px; }
.es-arq .mq-nav { padding: 5px 6px; gap: 4px; }
.es-arq .mq-marca { font-size: 6.5px; letter-spacing: .14em; font-weight: 800; }
.es-arq .mq-marca b { color: var(--m1); margin-left: 2px; }
.es-arq .mq-portada { height: 74px; padding: 7px 6px 0; display: flex; align-items: flex-end; padding-bottom: 7px;
    background: linear-gradient(0deg, rgba(17, 17, 17, .72), transparent 70%), url("imagenes/mq-bristol-arq.webp") center / cover; }
.es-arq .mq-titulo { display: block; font-size: 9px; font-weight: 800; line-height: 1.12; letter-spacing: -.01em; color: #fff; }
.mq-proy { display: grid; gap: 1px; margin: 6px 6px 0; padding: 5px 6px; border-left: 2px solid var(--m1); background: #fff; }
.mq-proy small { font-size: 5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--m1); }
.mq-proy b { font-size: 6.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-arq .mq-cta { position: absolute; left: 6px; right: 6px; bottom: 7px; padding: 5px 0; border-radius: 3px; background: var(--m1); font-size: 6px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.mq-aviso {
    position: absolute; left: 6px; right: 6px; bottom: 25px; z-index: 1;
    display: flex; align-items: center; gap: 3px; padding: 5px; border-radius: 6px; background: #fff;
    font-size: 6px; font-weight: 800; white-space: nowrap; overflow: hidden;
    box-shadow: 0 10px 22px -6px rgba(0, 0, 0, .5); animation: mq-aviso 8s infinite both;
}
.mq-aviso .ok-v { display: inline-grid; place-items: center; width: 10px; height: 10px; border-radius: 50%; background: #0B8A63; flex: none; }
.mq-aviso .ok-v svg { width: 6px; height: 6px; }
@keyframes mq-aviso { 0%, 50% { opacity: 0; transform: translateY(8px) scale(.9); } 56%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* El pie del monitor: el cuello y la base, detrás de los otros dos aparatos */
.svc-maqueta::before, .svc-maqueta::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; }
.svc-maqueta::before { bottom: 82px; 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: 72px; width: 164px; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .16); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }

/* Las fichas del oficio, flotando alrededor */
.mq-ficha {
    position: absolute; z-index: 4; display: flex; align-items: center; gap: 7px;
    padding: 7px 11px 7px 8px; border-radius: 11px; background: #fff; color: #1E293B;
    box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .55);
    animation: mq-flotar 6.5s ease-in-out infinite alternate;
}
.mq-ficha small { font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #64748b; white-space: nowrap; }
.mq-ficha.es-nota { top: -20px; right: -26px; animation-delay: -1s; }
.mq-ficha.es-nota svg { width: 30px; height: 30px; }
.mq-ficha.es-nota b { font-size: 17px; font-weight: 800; color: #0B8A63; margin-left: -2px; }
.mq-arco { animation: mq-arco 8s ease-out infinite; }
@keyframes mq-arco { 0%, 8% { stroke-dasharray: 0 100; } 30%, 100% { stroke-dasharray: 98 100; } }
.mq-ficha.es-paleta { left: -34px; top: 3%; gap: 0; animation-delay: -3s; }
.mq-ficha.es-paleta i { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff; margin-left: -5px; }
.mq-ficha.es-paleta i:first-child { margin-left: 0; }
.mq-ficha.es-paleta small { margin-left: 7px; }
.mq-ficha.es-tipo { right: -30px; top: 36%; animation-delay: -5s; }
.mq-ficha.es-tipo b { font-size: 19px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
@keyframes mq-flotar { from { transform: translateY(6px); } to { transform: translateY(-8px); } }
@media (max-width: 880px) {
    .mq-ficha.es-nota { right: -6px; }
    .mq-ficha.es-paleta { left: -6px; }
    .mq-ficha.es-tipo { right: -6px; }
}
@media (max-width: 480px) {
    .mq-links { display: none; }
    .es-posada .mq-titulo { font-size: 16px; }
    .mq-tablet { left: 8px; width: 132px; }
    .mq-movil { right: 10px; width: 82px; }
}

/* ---------- 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); }

/* ---------- Grillas de logos con K-Factor (Emir, 2026-09-29) ----------
   Todos los logos de una grilla pesan lo mismo a la vista. Cada uno viene recortado al borde de su
   figura (logos/eq/, los arma herramientas/logos-equilibrados.mjs) y su celda trae --w = √r,
   --h = 1/√r y --lq = ln(q), con r = ancho / alto y q = lado largo / lado corto. La superficie es
   lado² · q^(−curva): con la curva, los casi cuadrados ocupan un poco más, porque a igual
   superficie se ven más chicos (el mismo criterio que el muro de clientes de la portada).
   Cada grilla pone su --eq-lado, la única perilla de tamaño. */
/* Curva en 0 (Emir, 2026-09-29): acá los cuadrados son íconos llenos y los apaisados, letras
   finas; con la curva de los clientes (.35) los apaisados quedaban chicos */
.logo-eq { --eq-curva: 0; }
.mdpd-svc .logo-eq img.eq {
    --eq-f: exp(calc(var(--eq-curva) * var(--lq, 0) * -.5));
    display: block; flex: none;
    width: calc(var(--eq-lado, 50px) * var(--w, 1) * var(--eq-f));
    height: calc(var(--eq-lado, 50px) * var(--h, 1) * var(--eq-f));
    max-width: 100%; max-height: none; object-fit: contain; transform: none;
}
.svc-integraciones.logo-eq { --eq-lado: 58px; }
.svc-cinta.logo-eq { --eq-lado: 44px; }
.svc-cinta.es-chica.logo-eq { --eq-lado: 30px; }
.ig-cintas.logo-eq { --eq-lado: 50px; }
@media (max-width: 620px) {
    .svc-cinta.logo-eq { --eq-lado: 36px; }
    .svc-cinta.es-chica.logo-eq { --eq-lado: 24px; }
}
/* 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; }

/* Todas las escenas con marco van en 16:10 (Emir, 2026-09-29): la caja es igual en todos lados y
   la variedad la da lo de adentro, por escala y posición. tema.js mete las piezas en un lienzo
   (.esc-lienzo) del ancho de diseño (--esc-base) y lo escala con transform (--esc-escala), así todo
   crece o se achica parejo. Antes era `zoom` sobre la caja y en Safari de Mac temblaba (2026-10-01):
   no volver a usar zoom acá. Las de las grillas se dibujaron
   para 305 × 158 (y unas pocas para 212 × 158, cuando existían las grillas de cuatro columnas): en
   la caja de 305 × 190,6 el dibujo queda centrado, con un margen arriba y abajo en cada pieza
   directa. Una pieza con margen propio (por ejemplo, para centrarse) conserva el suyo: por eso el
   selector va en :where(), sin peso. Las de la portada y los bocetos definen su --esc-base aparte. */
.svc-grid:not(.in-servicios) > .svc-item > .esc { --esc-base: 305; height: auto; aspect-ratio: 16 / 10; }
:where(.svc-grid:not(.in-servicios) > .svc-item > .esc) > *,
:where(.svc-grid:not(.in-servicios) > .svc-item > .esc > .esc-lienzo) > * { margin-block: 16px; }
/* El lienzo: ocupa la caja medido en px de diseño y se escala hasta llenarla */
.esc > .esc-lienzo {
    position: absolute; left: 0; top: 0; margin: 0;
    width: calc(100% / var(--esc-escala, 1)); height: calc(100% / var(--esc-escala, 1));
    transform: scale(var(--esc-escala, 1)); transform-origin: 0 0;
}
/* La trama de puntos y el redondeo escalan con el dibujo, como lo hacían con el zoom */
.esc.con-lienzo { background-image: none; border-radius: calc(10px * var(--esc-escala, 1)); }
.esc.con-lienzo > .esc-lienzo { background-image: radial-gradient(rgba(30, 41, 59, .13) 1px, transparent 1.3px); background-size: 12px 12px; }
.is-dark .esc.con-lienzo > .esc-lienzo { background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.3px); }

/* El mosaico (2026-09-25): en escritorio, algunas tarjetas se agrandan para romper la grilla
   pareja. Sobre seis columnas: 6 tarjetas quedan [ancha · chica] [chica · ancha] [media · media].
   La ancha pone la escena de un lado y el texto del otro, centrado en alto. Se activa con la
   clase es-mosaico en la grilla; debajo de 981 px vuelve a la grilla de siempre. */
@media (min-width: 981px) {
    .svc-grid.es-mosaico { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .svc-grid.es-mosaico > .svc-item { grid-column: span 2; }
    .svc-grid.es-mosaico > .svc-item:is(:nth-child(1), :nth-child(4)) {
        grid-column: span 4;
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr;
        column-gap: 28px; align-content: stretch;
    }
    .svc-grid.es-mosaico > .svc-item:is(:nth-child(5), :nth-child(6)) { grid-column: span 3; }
    .svc-grid.es-mosaico > .svc-item:is(:nth-child(1), :nth-child(4)) > .esc { grid-column: 1; grid-row: 1 / -1; align-self: center; margin: 0; }
    .svc-grid.es-mosaico > .svc-item:is(:nth-child(1), :nth-child(4)) > :nth-child(2) { grid-column: 2; grid-row: 2; }
    .svc-grid.es-mosaico > .svc-item:is(:nth-child(1), :nth-child(4)) > :nth-child(3) { grid-column: 2; grid-row: 3; }
    .svc-grid.es-mosaico > .svc-item:is(:nth-child(1), :nth-child(4)) > :nth-child(4) { grid-column: 2; grid-row: 4; }
    /* La cuarta, en espejo: el texto a la izquierda y la escena a la derecha */
    .svc-grid.es-mosaico > .svc-item:nth-child(4) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
    .svc-grid.es-mosaico > .svc-item:nth-child(4) > .esc { grid-column: 2; }
    .svc-grid.es-mosaico > .svc-item:nth-child(4) > :not(.esc) { grid-column: 1; }
    .svc-grid.es-mosaico > .svc-item:is(:nth-child(1), :nth-child(4)) > h3 { font-size: 24px; }
    /* Tres tarjetas: la primera ancha a todo lo largo y dos medianas abajo. Cuatro sale sola con
       las reglas de arriba: [ancha · chica] [chica · ancha]. */
    .svc-grid.es-mosaico:has(> .svc-item:nth-child(3):last-child) > .svc-item:nth-child(1) { grid-column: span 6; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
    .svc-grid.es-mosaico:has(> .svc-item:nth-child(3):last-child) > .svc-item:is(:nth-child(2), :nth-child(3)) { grid-column: span 3; }
    /* Cinco (2026-09-29): [ancha · chica] [chica · ancha] y la quinta a todo lo ancho, con la escena
       a la izquierda (del mismo ancho que en las otras anchas) y el texto a la derecha */
    .svc-grid.es-mosaico:has(> .svc-item:nth-child(5):last-child) > .svc-item:nth-child(5) {
        grid-column: span 6;
        grid-template-columns: minmax(0, 440px) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr;
        column-gap: 28px; align-content: stretch;
    }
    .svc-grid.es-mosaico:has(> .svc-item:nth-child(5):last-child) > .svc-item:nth-child(5) > .esc { grid-column: 1; grid-row: 1 / -1; align-self: center; margin: 0; }
    .svc-grid.es-mosaico:has(> .svc-item:nth-child(5):last-child) > .svc-item:nth-child(5) > :nth-child(2) { grid-column: 2; grid-row: 2; }
    .svc-grid.es-mosaico:has(> .svc-item:nth-child(5):last-child) > .svc-item:nth-child(5) > :nth-child(3) { grid-column: 2; grid-row: 3; }
    .svc-grid.es-mosaico:has(> .svc-item:nth-child(5):last-child) > .svc-item:nth-child(5) > :nth-child(4) { grid-column: 2; grid-row: 4; }
    .svc-grid.es-mosaico:has(> .svc-item:nth-child(5):last-child) > .svc-item:nth-child(5) > h3 { font-size: 24px; }
}

/* 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; }


/* =================================================================
   RESEÑAS DE GOOGLE (2026-09-29): [mdpd_resenas], de mu-plugins/mdd-resenas.php
   La cabecera con la G, la nota y los botones; debajo, las reseñas en tarjetas.
   ================================================================= */
.rs { display: grid; gap: 22px; margin-top: 40px; }
.rs-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.rs-g { width: 40px; height: 40px; flex: none; }
.rs-resumen { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 10px; margin-right: auto; }
.rs-nota { font-size: 32px; font-weight: 800; line-height: 1; color: var(--ink, #1E293B); }
.rs-resumen small { grid-column: 1 / -1; font-size: 14px; color: #64748B; }
.rs-est { display: inline-block; font-size: 20px; line-height: 1; letter-spacing: 2px; }
.rs-est::before { content: "★★★★★"; background: linear-gradient(90deg, #FBBC05 calc(var(--n) / 5 * 100%), #CBD5E1 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rs-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.rs-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
@media (max-width: 700px) { .rs-lista { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; } .rs-item { scroll-snap-align: start; } }
.rs-item { margin: 0; display: grid; gap: 10px; align-content: start; padding: 20px; border: 1px solid #E2E8EE; border-radius: 12px; background: #fff; }
.rs-autor { display: flex; align-items: center; gap: 10px; }
.mdpd-svc .rs-autor img, .rs-autor i { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; }
.rs-autor i { display: grid; place-items: center; background: #1FB8CD; color: #fff; font-style: normal; font-weight: 800; }
.rs-autor b { display: block; font-size: 15px; font-weight: 800; line-height: 1.25; }
.rs-autor small { display: block; font-size: 13px; color: #64748B; }
.rs-item .rs-est { font-size: 15px; }
.rs-item blockquote { margin: 0; padding: 0; border: 0; font-size: 15px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.rs-fuente { justify-self: start; font-size: 13px; font-weight: 700; color: #64748B !important; text-decoration: none; }
.rs-fuente:hover { color: var(--brand, #FF1632) !important; }
/* Slider de reseñas (más de 5, con la API de Perfil de Empresa): cuatro por pantalla en escritorio,
   flechas como las filas del portfolio; en el celular sigue el deslizamiento de siempre (2026-10-01) */
.rs-marco { position: relative; }
.rs-lista.es-slider { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.rs-lista.es-slider::-webkit-scrollbar { display: none; }
.rs-lista.es-slider .rs-item { scroll-snap-align: start; }
.rs-flecha { position: absolute; top: calc(50% - 23px); z-index: 2; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid #E2E8EE; background: #fff; color: #1E293B; cursor: pointer; box-shadow: 0 8px 20px -8px rgba(15, 23, 42, .35); transition: background-color .15s, color .15s, opacity .2s; }
.rs-flecha svg { width: 20px; height: 20px; }
.rs-flecha.es-ant { left: -23px; }
.rs-flecha.es-ant svg { transform: scaleX(-1); }
.rs-flecha.es-sig { right: -23px; }
.rs-flecha:hover { background: #FF1632; border-color: #FF1632; color: #fff; }
.rs-flecha:focus-visible { outline: 3px solid #FFCD57; outline-offset: 2px; }
.rs-flecha:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 1100px) { .rs-lista.es-slider { grid-auto-columns: calc((100% - 32px) / 3); } }
@media (max-width: 700px) { .rs-lista.es-slider { grid-auto-columns: 82%; } .rs-flecha { display: none; } }
@media (prefers-reduced-motion: reduce) { .rs-flecha { transition: none; } }
/* El aviso de cómo se eligen las reseñas: lo pide Google cuando se filtran (2026-10-01) */
.mdpd-svc .rs-aviso { margin: -6px 0 0; font-size: 13px; color: #64748B; }
.rs-autor b a { color: inherit !important; text-decoration: none; }
.rs-autor b a:hover { color: var(--brand, #FF1632) !important; }
.is-dark .rs-nota { color: #fff; }
.is-dark .rs-item { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }

/* Notas del blog en las páginas de servicio: una línea discreta al final de la última sección clara (mdd-blog.php) */
.bl-relacionadas { margin: 40px auto 0; max-width: 860px; text-align: center; font-size: 15px; line-height: 1.8; color: #6b7280; }
.bl-relacionadas span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.bl-relacionadas a { color: inherit; text-decoration: underline; text-decoration-color: rgba(0,0,0,.2); text-underline-offset: 3px; }
.bl-relacionadas a:hover { color: var(--red); text-decoration-color: currentColor; }
.bl-relacionadas i { font-style: normal; margin: 0 6px; opacity: .5; }