/* PulpoGestión (/soluciones/pulpogestion/, página 2638, 2026-10-23).
   Pulpo es el protagonista: va en cada sección, con una cara y una pose distintas.
   - Hero: el fondo es de la casa (el sistema de heroes de mardelplatadigital, motivo «neón sobre
     malla» de GEO con las manchas en los violetas de Pulpo y un rastro de flúo). La escena es la de
     «Pulpo tiene brazos para todo» de pulpogestion.com (inc/escena.php + su script, que va al final
     de la página).
   - Los demás Pulpos son los PNG exportados de PULPOGESTION/PULPOS, en mu-plugins/assets/pulpogestion/.
   - Rubros: las fotos y las preguntas de la portada de pulpogestion.com.
   Colores de Pulpo: violeta #5b2ee6, degradado #220b44 → #ae82f1, flúo #2bff88, tinta #170d3d. */

.mdpd-pulpo {
    --pg-tinta: #170d3d;
    --pg-tinta-suave: #55507a;
    --pg-violeta: #5b2ee6;
    --pg-violeta-claro: #d6c9ff;
    --pg-tinte: #f4f0ff;
    --pg-borde: #e6e0f7;
    --pg-fluo: #2bff88;
    --pg-degradado: linear-gradient(65deg, #220b44 9%, #4a1997 40%, #732cdd 75%, #ae82f1 100%);
    /* Los íconos de Pulpo (pulpo_icono(), pulpo_check() del tema) pintan con estos nombres */
    --tinta: #170d3d;
    --violeta: #5b2ee6;
    --violeta-claro: #d6c9ff;
    --violeta-tinte: #f4f0ff;
    --fluo: #2bff88;
}

/* ---------- Íconos de Pulpo ---------- */
.mdpd-pulpo .pg-ic { display: block; flex: none; }
.mdpd-pulpo .svc-item .pg-ic { width: 60px; height: 60px; margin-bottom: 4px; }
.mdpd-pulpo .pg-datos .pg-ic { width: 40px; height: 40px; margin-bottom: 4px; }
/* Los logos y los íconos de los datos ocupan el mismo alto: así los títulos quedan alineados */
.pg-logos { display: flex; gap: 8px; height: 40px; margin-bottom: 4px; }
.mdpd-svc .pg-logos img { box-sizing: border-box; width: 40px; height: 40px; padding: 7px; border-radius: 50%; background: #fff; border: 1px solid var(--pg-violeta-claro); }
.mdpd-pulpo .ic-check { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.mdpd-pulpo .ic-flecha { width: 18px; height: 18px; flex: none; }

/* ---------- El motivo del hero: neón sobre malla, en los violetas de Pulpo ----------
   El mismo de GEO (paginas-servicio.css): manchas de luz que derivan sobre una malla anclada a la
   ventana. Todo CSS, sin una imagen. */
.hero-pulpo::before {
    background:
        radial-gradient(38% 52% at 10% 14%, rgba(115, 44, 221, .78), transparent 66%),
        radial-gradient(34% 46% at 86% 8%,  rgba(174, 130, 241, .62), transparent 68%),
        radial-gradient(42% 52% at 74% 92%, rgba(43, 255, 136, .30), transparent 70%),
        radial-gradient(30% 40% at 38% 96%, rgba(255, 22, 50, .34), transparent 68%);
    animation: pg-drift 5s ease-in-out infinite alternate;
}
.hero-pulpo .svc-hero-fx {
    background:
        radial-gradient(30% 42% at 62% 22%, rgba(255, 60, 140, .40), transparent 68%),
        radial-gradient(26% 38% at 22% 76%, rgba(91, 46, 230, .58), transparent 70%),
        radial-gradient(34% 40% at 96% 58%, rgba(43, 255, 136, .22), transparent 70%);
    animation: pg-drift-2 7s ease-in-out infinite alternate;
}
.hero-pulpo::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;
    background-attachment: fixed;
}
@keyframes pg-drift {
    from { transform: translate3d(-7%, -4%, 0) scale(1.02); }
    to   { transform: translate3d(8%, 6%, 0) scale(1.22); }
}
@keyframes pg-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-pulpo .svc-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.hero-pulpo .svc-lead strong { color: #fff; }
.mdpd-svc .svc-btn.pg-btn-fluo { background: var(--pg-fluo); border-color: var(--pg-fluo); color: var(--pg-tinta) !important; }
.mdpd-svc .svc-btn.pg-btn-fluo:hover { background: #fff; border-color: #fff; }
.mdpd-svc .svc-btn.pg-btn-violeta { background: var(--pg-violeta); border-color: var(--pg-violeta); color: #fff !important; }
.mdpd-svc .svc-btn.pg-btn-violeta:hover { background: var(--pg-tinta); border-color: var(--pg-tinta); }

/* ---------- La escena: Pulpo con sus cuatro brazos, cada uno en una charla ----------
   Medidas de pulpogestion.com (tema.css, «.escena»): las charlas van centradas en la punta de
   cada tentáculo, en % del viewBox 800 × 560. */
.hero-pulpo .svc-hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; }
/* La cara de Pulpo (pulpo_cara() del tema) pinta con --tinta y --violeta-claro: sin ellas, los ojitos
   cerrados no se ven y los cachetes salen negros */
.pg-escena { position: relative; container-type: inline-size; --tinta: #170d3d; --violeta-claro: #d6c9ff; }
.mdpd-svc .pg-escena .pulpo-escena { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
/* La forma clara detrás de Pulpo: papel sobre papel, con la sombra corrida */
.pg-mancha {
    position: absolute; left: 22%; top: 6%; width: 56%; height: 84%;
    border-radius: 48% 52% 44% 56% / 52% 46% 54% 48%;
    background: var(--pg-tinte); border: 2px solid var(--pg-violeta-claro);
    box-shadow: 18px 22px 0 rgba(214, 201, 255, .28);
}
.pulpo-escena .burbuja { fill: #fff; stroke: var(--pg-violeta-claro); stroke-width: 2; }
.pg-charla {
    position: absolute; z-index: 2; width: 35%; transform: translate(-50%, -50%);
    background: #fff; color: var(--pg-tinta); border: 2px solid var(--pg-borde); border-radius: 16px;
    padding: .85em 1em; font-size: clamp(11px, 2.05cqw, 15px); line-height: 1.35;
    box-shadow: 0 14px 30px -14px rgba(46, 20, 143, .55);
    transition: opacity .4s ease-out, transform .4s cubic-bezier(.3, 1.4, .5, 1);
}
.pg-charla p { margin: 0; }
.pg-charla-arriba-izq { left: 16.25%; top: 19.6%; }
.pg-charla-arriba-der { left: 83.75%; top: 17.9%; }
.pg-charla-abajo-izq  { left: 16.25%; top: 80.4%; }
.pg-charla-abajo-der  { left: 83.75%; top: 83.9%; }
.pg-charla-quien { display: flex; justify-content: space-between; gap: 8px; font-size: .86em; color: var(--pg-tinta-suave); }
.pg-charla-quien b { color: var(--pg-violeta); font-weight: 800; }
.mdpd-svc .pg-charla-pregunta { margin-top: .35em; font-weight: 600; }
.mdpd-svc .pg-charla-respuesta { margin-top: .55em; padding: .5em .7em; border-radius: 12px; background: var(--pg-degradado); color: #fff; font-weight: 600; }
.pg-escena.pg-anima .pg-charla:not(.llego) { opacity: 0; transform: translate(-50%, -42%) scale(.9); }
.pg-cartel {
    position: absolute; left: 50%; top: 0; z-index: 3; transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px; padding: 7px 14px; white-space: nowrap;
    background: var(--pg-tinta); color: #fff; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2);
    font-size: clamp(11px, 1.7cqw, 14px); font-weight: 700;
}
.pg-cartel i { width: 9px; height: 9px; border-radius: 50%; background: var(--pg-fluo); box-shadow: 0 0 0 4px rgba(43, 255, 136, .3); animation: pg-late 1.8s ease-in-out infinite; }
.pg-orbita {
    position: absolute; z-index: 2; display: grid; place-items: center;
    width: clamp(36px, 6cqw, 48px); height: clamp(36px, 6cqw, 48px);
    background: #fff; border: 1px solid var(--pg-borde); border-radius: 50%;
    box-shadow: 0 10px 24px rgba(23, 13, 61, .3);
    animation: pg-orbita 7s ease-in-out infinite;
}
.mdpd-svc .pg-orbita img { width: 60%; height: 60%; }
.pg-orbita-1 { left: 47%; top: 88%; }
.pg-orbita-2 { left: 2%; top: 46%; animation-duration: 8.5s; animation-delay: -2s; }
.pg-orbita-3 { left: 92%; top: 44%; width: clamp(28px, 4.5cqw, 36px); height: clamp(28px, 4.5cqw, 36px); animation-duration: 6s; animation-delay: -4s; }
.pulpo-escena .flota { animation: pg-flota-escena 4.5s ease-in-out infinite; }
.pulpo-escena .burbuja { transform-box: fill-box; animation: pg-burbuja 6s ease-in infinite; animation-delay: var(--d); opacity: 0; }
@keyframes pg-flota-escena { 50% { transform: translateY(-8px); } }
@keyframes pg-burbuja { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-170px) scale(1.15); } }
@keyframes pg-orbita { 0%, 100% { transform: translate(0, 0) rotate(0); } 33% { transform: translate(10px, -14px) rotate(6deg); } 66% { transform: translate(-8px, -6px) rotate(-5deg); } }
@keyframes pg-late { 50% { box-shadow: 0 0 0 8px rgba(43, 255, 136, 0); } }

/* ---------- Secciones con Pulpo al costado ---------- */
.pg-split {
    display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 64px; align-items: center;
}
.pg-split.es-espejo { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.pg-figura { position: relative; margin: 0; display: grid; justify-items: center; }
.mdpd-svc .pg-figura img { width: 300px; max-width: 100%; height: auto; animation: pg-flota 7s ease-in-out infinite; }
@keyframes pg-flota { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
/* El globo de diálogo: la esquina en punta va del lado de Pulpo, para que sea él quien habla */
.pg-dice {
    position: absolute; top: 4%; left: 4%; z-index: 1;
    padding: 9px 15px; border-radius: 14px 14px 4px 14px;
    background: #fff; color: var(--pg-tinta); font-weight: 800; font-size: 15px;
    box-shadow: 0 10px 26px rgba(23, 13, 61, .16);
}
.es-espejo .pg-dice { left: auto; right: 6%; border-radius: 14px 14px 14px 4px; }

.mdpd-pulpo .svc-eyebrow .ico-marca { width: 18px; height: 18px; }
.pg-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 6px; }
.pg-datos > div {
    display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: 14px;
    background: var(--pg-tinte); border: 1px solid var(--pg-violeta-claro);
}
.pg-datos b { font-size: 22px; font-weight: 800; color: var(--pg-violeta); line-height: 1.15; }
.pg-datos span { font-size: 14px; line-height: 1.4; }
.mdpd-svc .svc-grid.pg-tres { margin-top: 56px; }

/* ---------- Los rubros: foto con su nombre y las preguntas que le llegan, y el texto al lado ----------
   Como la portada de pulpogestion.com (tema.css, «.rubro»), alternando el lado de la foto. */
.pg-filas { display: grid; gap: 28px; margin-top: 8px; }
.pg-fila {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    background: #fff; border: 1px solid var(--pg-borde); border-radius: 18px;
    box-shadow: 0 18px 40px -26px rgba(46, 20, 143, .45);
}
.pg-fila:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pg-fila:nth-child(even) .pg-fila-foto { order: 2; border-radius: 0 18px 18px 0; }
.pg-fila-foto {
    position: relative; min-height: 280px; border-radius: 18px 0 0 18px;
    display: flex; align-items: flex-end; padding: 24px;
    background: var(--pg-tinte);
}
.mdpd-svc .pg-fila-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pg-fila-foto > span {
    position: relative; color: #fff; font-size: clamp(30px, 3.4vw, 46px); font-weight: 800;
    letter-spacing: -.045em; line-height: 1; text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.mdpd-svc .pg-chips {
    list-style: none; margin: 0; padding: 0; position: absolute; right: -28px; top: 22px; z-index: 2;
    display: grid; gap: 8px; justify-items: end;
}
.mdpd-svc .pg-fila:nth-child(even) .pg-chips { right: auto; left: -28px; justify-items: start; }
.mdpd-svc .pg-chips li {
    margin: 0; padding: 8px 14px; background: #fff; color: var(--pg-tinta);
    border: 1px solid var(--pg-borde); border-radius: 14px; box-shadow: 0 10px 24px -10px rgba(46, 20, 143, .45);
    font-size: 14px; font-weight: 600;
}
.mdpd-svc .pg-chips li:nth-child(2) { margin-right: 22px; }
.mdpd-svc .pg-fila:nth-child(even) .pg-chips li:nth-child(2) { margin: 0 0 0 22px; }
.pg-fila-texto { align-self: center; display: grid; gap: 12px; justify-items: start; padding: 40px 48px 40px 72px; }
.pg-fila:nth-child(even) .pg-fila-texto { padding: 40px 72px 40px 48px; }
.mdpd-svc .pg-fila-texto h3 { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--pg-tinta); }
.mdpd-svc .pg-fila-texto p { margin: 0; font-size: 17px; line-height: 1.55; max-width: 52ch; }
.mdpd-svc .pg-fila-extra { color: var(--pg-violeta); font-weight: 700; }
.mdpd-svc .pg-fila-extra a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.mdpd-svc .svc-btn.pg-fila-link { margin-top: 8px; border-color: var(--pg-borde); color: var(--pg-tinta) !important; border-width: 2px; }
.mdpd-svc .svc-btn.pg-fila-link:hover { background: var(--pg-violeta); border-color: var(--pg-violeta); color: #fff !important; }

/* ---------- El panel: banda oscura en la tinta violeta de Pulpo ---------- */
.mdpd-pulpo > .svc-band.is-dark:not(.con-fondo) {
    background-color: var(--pg-tinta);
    background-image:
        radial-gradient(ellipse 60% 75% at 8% 0%, rgba(115, 44, 221, .42), transparent 70%),
        radial-gradient(ellipse 50% 60% at 94% 100%, rgba(43, 255, 136, .10), transparent 70%),
        radial-gradient(rgba(214, 201, 255, .16) 1px, transparent 1.4px);
    background-size: auto, auto, 22px 22px;
}
.mdpd-pulpo > .svc-band.is-dark .svc-eyebrow { color: var(--pg-fluo); }
.mdpd-pulpo > .svc-band.is-dark { color: #d9d0f7; }
.pg-lista { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; }
.pg-lista li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.45; margin: 0; }
.pg-lista svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }

/* ---------- Cierre ---------- */
.pg-cierre { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.mdpd-svc .pg-pulpo-cierre { width: 150px; height: auto; }
.mdpd-pulpo .svc-close .svc-eyebrow { color: var(--pg-violeta); }

@media (max-width: 1180px) {
    .pg-cierre { grid-template-columns: auto minmax(0, 1fr); }
    .pg-cierre .svc-actions { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
    .hero-pulpo .svc-hero-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 880px) {
    .hero-pulpo::after { background-attachment: scroll; }
    /* En el celular, la escena como en pulpogestion.com: charlas más anchas, sin la respuesta */
    .pg-escena { margin-top: 34px; }
    .pg-cartel { top: -34px; }
    .pg-charla { width: 44%; font-size: 11px; padding: .6em .7em; }
    .mdpd-svc .pg-charla-respuesta { display: none; }
    .pg-charla-arriba-izq, .pg-charla-abajo-izq { left: 22%; }
    .pg-charla-arriba-der, .pg-charla-abajo-der { left: 78%; }
    .pg-split, .pg-split.es-espejo { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .pg-split.es-espejo .pg-figura { order: -1; }
    .mdpd-svc .pg-figura img { width: 210px; }
    .pg-datos { grid-template-columns: minmax(0, 1fr); }
    .mdpd-svc .svc-grid.pg-tres { margin-top: 36px; }
    .pg-fila, .pg-fila:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
    .pg-fila:nth-child(even) .pg-fila-foto { order: 0; }
    .pg-fila-foto, .pg-fila:nth-child(even) .pg-fila-foto { min-height: 230px; border-radius: 18px 18px 0 0; }
    .mdpd-svc .pg-chips, .mdpd-svc .pg-fila:nth-child(even) .pg-chips { right: 12px; left: auto; top: 12px; justify-items: end; }
    .mdpd-svc .pg-chips li, .mdpd-svc .pg-fila:nth-child(even) .pg-chips li { font-size: 13px; padding: 6px 11px; }
    .mdpd-svc .pg-fila:nth-child(even) .pg-chips li:nth-child(2) { margin: 0 22px 0 0; }
    .pg-fila-texto, .pg-fila:nth-child(even) .pg-fila-texto { padding: 24px 22px 28px; }
    .pg-cierre { grid-template-columns: minmax(0, 1fr); gap: 22px; justify-items: start; }
    .mdpd-svc .pg-pulpo-cierre { width: 110px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-pulpo::before, .hero-pulpo .svc-hero-fx, .mdpd-svc .pg-figura img,
    .pulpo-escena .flota, .pg-orbita, .pg-cartel i { animation: none; }
    .pulpo-escena .burbuja { animation: none; opacity: .7; }
}