/* Sección general */
.snp-circle {
    padding: 0px 0;
    background: #f8f9fa;
}

/* Contenedor del círculo */
.orbit-wrapper {
    position: relative;
    width: 600px;
    height: 500px;
    margin: 0 auto;
}

/* Centro */
.snp-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

    .snp-center img {
        width: 100%;
        display: block;
    }

/* Íconos base */
.snp-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    transform-origin: center center;
    z-index: 2;
}

    .snp-icon img {
        width: 100%;
        transition: transform .3s ease;
    }

    /* Hover elegante */
    .snp-icon:hover img {
        transform: scale(1.08);
    }

/* ===== POSICIONES EN CÍRCULO ===== */
/* Radio del círculo */
:root {
    --radio: 250px;
}

/* Distribución 360° / 7 = 51.42° */

.i1 {
    transform: rotate(0deg) translate(var(--radio)) rotate(0deg);
}

.i2 {
    transform: rotate(51.42deg) translate(var(--radio)) rotate(-51.42deg);
}

.i3 {
    transform: rotate(102.84deg) translate(var(--radio)) rotate(-102.84deg);
}

.i4 {
    transform: rotate(154.26deg) translate(var(--radio)) rotate(-154.26deg);
}

.i5 {
    transform: rotate(205.68deg) translate(var(--radio)) rotate(-205.68deg);
}

.i6 {
    transform: rotate(257.10deg) translate(var(--radio)) rotate(-257.10deg);
}

.i7 {
    transform: rotate(308.52deg) translate(var(--radio)) rotate(-308.52deg);
}


/* ROTAR Y ORDENAR LOS ICONOS */

.i3 {
    transform: rotate(15deg) translate(180px) rotate(-15deg) translate(-50%, -50%);
}

.i4 {
    transform: rotate(60deg) translate(200px) rotate(-60deg) translate(-50%, -50%);
}

.i5 {
    transform: rotate(119deg) translate(200px) rotate(-119deg) translate(-50%, -50%);
    z-index: 20
}

.i6 {
    transform: rotate(170deg) translate(180px) rotate(-170deg) translate(-50%, -50%);
    z-index: 10
}

.i7 {
    transform: rotate(221deg) translate(200px) rotate(-221deg) translate(-50%, -50%);
}

.i1 {
    transform: rotate(272deg) translate(185px) rotate(-272deg) translate(-50%, -50%);
}

.i2 {
    transform: rotate(323deg) translate(200px) rotate(-323deg) translate(-50%, -50%);
}

/*TOOLTIP*/
/* =========================
   TOOLTIP ANIMADO PRO
========================= */

.snp-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    transform-origin: center center;
    z-index: 2;
    cursor: pointer;
}

/* Contenedor relativo para el tooltip */
.snp-icon::before,
.snp-icon::after {
    position: absolute;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transition: all .35s cubic-bezier(.22,.68,0,1.71);
}

/* Caja del tooltip */
.snp-icon::before {
    content: attr(data-tooltip);
    bottom: 130%;
    transform: translateX(-50%) translateY(10px) scale(.9);
    padding: 10px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
    background: linear-gradient(135deg, #1e3c72, #2a5298);
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
    letter-spacing: .5px;
}

/* Flecha */
.snp-icon::after {
    content: "";
    bottom: 118%;
    transform: translateX(-50%) translateY(10px);
    border-width: 8px;
    border-style: solid;
    border-color: #2a5298 transparent transparent transparent;
    opacity: 0;
    transition: all .3s ease;
    z-index: 9999;
}

/* Animación al hacer hover */
.snp-icon:hover::before,
.snp-icon:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* EFECTO LLAMATIVO GLOW*/
.snp-icon::before {
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    animation: tooltipGlow 2.5s infinite alternate;
}

@keyframes tooltipGlow {
    from {
        box-shadow: 0 5px 15px rgba(0,114,255,.3);
    }

    to {
        box-shadow: 0 8px 30px rgba(0,114,255,.6);
    }
}
.snp-icon:hover {
    z-index: 1000;
}


/* =========================
   GIRO ORBITAL AL APARECER
========================= */

.orbit-wrapper {
    transform: rotate(0deg);
}

    /* Clase que activará la animación */
    .orbit-wrapper.animate-orbit {
        animation: orbitSpin 1.8s ease-out forwards;
    }

@keyframes orbitSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================
   LAYOUT HORIZONTAL SNP
========================= */

.snp-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-height: 600px
    /*min-height: calc(100dvh - var(--nav-height));*/
}

/* IZQUIERDA */
.snp-left {
    flex: 1;
    text-align: right;
    font-size: 18px;
    font-weight: 500;
}

/* CENTRO */
.snp-middle {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}

/* DERECHA */
.snp-right {
    flex: 1;
    text-align: left;
}

    .snp-right h2 {
        font-size: 32px;
        line-height: 1.3;
    }


/* =========================
   TABLET
========================= */

@media (max-width: 1200px) {

    .snp-layout {
        gap: 40px;
    }

    .snp-right h2 {
        font-size: 28px;
    }
}

/* =========================
   TABLET PEQUEÑA
========================= */

@media (max-width: 992px) {

    .snp-layout {
        flex-direction: column;
        text-align: center;
        gap: 40px;
        padding: 40px 20px;
    }

    .snp-left,
    .snp-right {
        text-align: center;
    }

    .snp-middle {
        order: 1;
    }

    .snp-right {
        order: 0;
    }

    .snp-left {
        order: 2;
    }

    .snp-right h2 {
        font-size: 26px;
    }
}

/* =========================
   MÓVIL
========================= */

@media (max-width: 576px) {

    .snp-right h2 {
        font-size: 22px;
    }

    .snp-left {
        font-size: 16px;
    }

    .orbit-wrapper {
        width: 320px;
        height: 320px;
    }

    :root {
        --radio: 130px;
    }

    .snp-icon {
        width: 70px;
    }

    .snp-center {
        width: 120px;
        height: 120px;
    }
}

.snp-middle {
    flex: 0 0 auto;
    display: flex;
    justify-content: center; /* centra horizontal */
    align-items: center; /* centra vertical */
}

.orbit-wrapper {
    margin: 0; /* elimina el auto */
}

/*EFECTO DEGRADADO TITULO Y ANIMACION*/
/* ============================= */
/* H2 SNP CON MISMO ESTILO */
/* ============================= */

.snp-right h2 {
    background: linear-gradient(90deg, #192854, #4993cc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    position: relative;
}

    /* Línea decorativa */
    .snp-right h2::after {
        content: "";
        width: 60px;
        height: 5px;
        background: #fdd757;
        display: block;
        margin-top: 10px;
        border-radius: 10px;
        box-shadow: 0 0 8px rgba(253, 215, 87, 0.7);
    }

    /*ANIMAICÓN PALPITACIÓN*/
/* =========================
   EFECTO PALPITAR SECUENCIAL
========================= */

/* =========================
   PALPITAR DOBLE PRO
========================= */

@keyframes iconPulseDouble {
    0% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.18);
    }

    30% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.18);
    }

    60% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

.snp-icon.pulse img {
    animation: iconPulseDouble 1.2s ease-in-out;
}