.platform {
    padding: 7rem 0 8rem;
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
    position: relative;
    overflow: hidden;
}

.platform-head { max-width: 760px; margin-bottom: 1rem; }
.platform-head h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}
.platform-head .dim { display: block; color: #c8c4bd; }
.platform-head .solid { display: block; color: var(--ink); }
.platform-sub { margin-top: 1.1rem; max-width: 620px; font-size: 1.05rem; line-height: 1.6; color: var(--muted); }
.platform-foot { text-align: center; max-width: 640px; margin: 2.5rem auto 0; font-size: 1.05rem; line-height: 1.6; color: var(--muted); }
.platform-foot strong { color: var(--ink); font-weight: 700; }

.platform-diagram { position: relative; margin: 0 auto; max-width: 1000px; }
.platform-diagram svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Cuadrícula técnica de fondo */
.pl-grid { stroke: rgba(24, 22, 19, 0.05); stroke-width: 1; }

/* Conexiones */
.pl-line { stroke: #d4d7de; stroke-width: 1.4; fill: none; }
.pl-line.live { stroke: rgba(var(--color-primary-rgb), 0.6); stroke-width: 1.6; stroke-dasharray: 5 6; animation: plDash 0.85s linear infinite; }
.pl-dash { stroke: #cdd1d8; stroke-width: 1.4; fill: none; stroke-dasharray: 2 7; stroke-linecap: round; }
@keyframes plDash { to { stroke-dashoffset: -11; } }

/* Pulsos de coordinación que viajan del núcleo a cada nodo */
.pl-pulse { fill: var(--color-primary); filter: drop-shadow(0 0 5px rgba(var(--color-primary-rgb), 0.85)); }

/* Waypoints (cuadritos) */
.pl-wp { fill: #fff; stroke: #cdd1d8; stroke-width: 1.4; }

/* Nodos periféricos */
.pl-node { filter: drop-shadow(0 6px 12px rgba(24, 22, 19, 0.18)); }
.pl-node circle { stroke: #fff; stroke-width: 2; }

/* Núcleo */
.pl-core circle.halo { fill: rgba(var(--color-primary-rgb), 0.16); transform-origin: center; animation: plPulse 2.6s ease-out infinite; }
.pl-core circle.dot { stroke: #fff; stroke-width: 2.5; }
@keyframes plPulse { 0% { transform: scale(0.7); opacity: 0.7; } 70% { transform: scale(1.8); opacity: 0; } 100% { opacity: 0; } }

.pl-bracket { stroke: #b9bdc7; stroke-width: 1.6; fill: none; stroke-linecap: round; }

/* Etiquetas */
.pl-label { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; fill: #8a90a0; text-transform: uppercase; }
.pl-core-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.14em; fill: var(--ink); text-transform: uppercase; }
.pl-desc { font-family: var(--font-body); font-size: 13px; fill: #aab0bd; }

/* Entrada */
.platform-diagram .pl-fade { opacity: 0; transition: opacity 0.7s var(--ease); }
.platform-diagram.revealed .pl-fade { opacity: 1; }
.platform-diagram.revealed .pl-fade.d1 { transition-delay: 0.15s; }
.platform-diagram.revealed .pl-fade.d2 { transition-delay: 0.3s; }
.platform-diagram.revealed .pl-fade.d3 { transition-delay: 0.45s; }

/* Nodos: respiración sutil escalonada */
.pl-node circle { transform-box: fill-box; transform-origin: center; animation: plNode 3.4s ease-in-out infinite; }
.pl-node:nth-of-type(1) circle { animation-delay: 0s; }
.pl-node:nth-of-type(2) circle { animation-delay: 0.5s; }
.pl-node:nth-of-type(3) circle { animation-delay: 1s; }
.pl-node:nth-of-type(4) circle { animation-delay: 1.5s; }
@keyframes plNode { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
    .pl-flow { display: none; }
    .pl-line.live, .pl-core circle.halo, .pl-node circle { animation: none; }
}

@media (max-width: 760px) {
    .platform { padding: 4.5rem 0 5rem; }
    .pl-label, .pl-core-title { font-size: 19px; }
    .pl-desc { font-size: 17px; }
}