.cn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

.cn__panel {
    position: relative;
    box-sizing: border-box;
    background-color: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 30px;
    box-shadow: 0 24px 55px rgba(0,0,0,0.30);
    -webkit-backdrop-filter: blur(var(--cn-blur, 8px)) saturate(var(--cn-sat, 130%));
    backdrop-filter: blur(var(--cn-blur, 8px)) saturate(var(--cn-sat, 130%));
    overflow: hidden;
}

/* Brillo especular del borde (opcional) */
.cn--brillo .cn__panel {
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.5),
        inset 0 -1px 1px rgba(255,255,255,0.15),
        0 24px 55px rgba(0,0,0,0.30);
}
.cn--brillo .cn__panel::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 40%);
}

.cn__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cn__texto { position: relative; z-index: 3; flex: 0 0 42%; max-width: 42%; }
.cn__eyebrow {
    display: inline-block;
    position: relative;
    color: #3DBB3D;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 26px;
    margin-bottom: 8px;
}
.cn__ancla { position: absolute; right: 0; top: 50%; width: 0; height: 0; }
.cn__titulo {
    margin: 0;
    color: #fff;
    font-weight: 800;
    font-size: 30px;
    line-height: 1.15;
    text-transform: uppercase;
}
.cn__desc { margin: 14px 0 0; color: #ededed; font-size: 16px; line-height: 1.6; }

.cn__mapa { position: relative; z-index: 2; flex: 0 0 58%; max-width: 58%; }
.cn__mapa svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Capa de relleno: sólida, tapa el fondo (stroke del mismo color evita micro-gaps) */
.cn__dep { fill: #ffffff; stroke: #ffffff; stroke-width: 0.6; stroke-linejoin: round; }
/* Capa de líneas de división: se puede colorear o dejar transparente sin afectar el relleno */
.cn__linea { fill: none; stroke: #2b2b2b; stroke-width: 0.8; stroke-linejoin: round; }
.cn__ruta { fill: none; stroke: #2FA82F; stroke-width: 2.4; stroke-linecap: round; }
.cn__punto { fill: #2FA82F; transform-box: fill-box; transform-origin: center; }
.cn__origen { fill: #177A17; }

@keyframes cn-pulso {
    0% { transform: scale(0); }
    60% { transform: scale(1.6); }
    100% { transform: scale(1); }
}

@media (max-width: 1024px) {
    .cn__eyebrow { font-size: 20px; }
    .cn__titulo { font-size: 24px; }
}
@media (max-width: 767px) {
    .cn__inner { flex-direction: column; }
    .cn__texto,
    .cn__mapa { flex: 0 0 100%; max-width: 100%; }
    .cn__texto { text-align: center; }
    .cn__ancla { right: 50%; }
    .cn__eyebrow { font-size: 22px; }
    .cn__titulo { font-size: 26px; }
}