/* ============================================================
   COSMÓPOLIS — CONNECTION SPHERES
   Carrusel infinito + Modal premium por esfera
   ============================================================ */

/* =========================
   SECCIÓN PRINCIPAL
   ========================= */
.connection-spheres {
    padding: 120px 20px;
    background: #0A1F44;
    overflow: visible;
    position: relative;
    margin-top: 80px;
}

/* ============================================================
   TÍTULO PREMIUM CENTRADO — ESTILO NAVBAR + FOOTER
   ============================================================ */
.connection-spheres h2 {
    font-family: 'Playfair Display SC', serif !important;
    font-size: 2.8rem;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: var(--royal-gold);

    display: block;
    width: 100%;
    text-align: center;

    position: relative;
    margin-bottom: 28px;
    padding-bottom: 6px;

    transition: 0.35s ease;
}

/* Línea dorada animada */
.connection-spheres h2::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    height: 2px;
    width: 0%;
    background: var(--royal-gold);
    transition: width 0.35s ease;
}

/* Hover premium */
.connection-spheres h2:hover {
    color: var(--light-gold);
    text-shadow: 0 0 10px rgba(212,175,55,0.55);
}
.connection-spheres h2:hover::after {
    width: 95%;
}

/* Subtítulo */
.connection-spheres p {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 50px auto;
    font-size: 1.15rem;
    color: #E5E5E5;
    line-height: 1.7;
    font-family: 'Cormorant Garamond', serif;
}

/* ============================================================
   CARRUSEL ULTRA ELEGANTE
   ============================================================ */
.sphere-carousel {
    width: 100%;
    overflow: visible;
    position: relative;
    padding: 10px 0 20px;
}

.sphere-track {
    display: flex;
    gap: 50px;
    width: max-content;
    animation: sphereScroll 75s linear infinite;
}

.sphere-track.paused {
    animation-play-state: paused;
}

/* Movimiento museo futurista */
@keyframes sphereScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-33.3%); }
}

/* ============================================================
   ESFERAS ULTRA LUXURY
   ============================================================ */
.sphere-item {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    text-align: center;
    perspective: 800px;
}

.connection-icon {
    width: 165px;
    height: 165px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;

    border: 2px solid rgba(212,175,55,0.7);
    box-shadow:
        0 18px 45px rgba(0,0,0,0.55),
        inset 0 0 18px rgba(255,255,255,0.05),
        0 0 10px rgba(212,175,55,0.15);

    transition:
        transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 0.45s ease,
        border-color 0.45s ease;

    position: relative;
    overflow: hidden;
}

/* Glow dorado */
.connection-icon::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 30%,
        rgba(212,175,55,0.25),
        rgba(0,0,0,0)
    );
    opacity: 0.45;
    z-index: 1;
}

/* Luz deslizante */
.connection-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.12),
        rgba(255,255,255,0),
        rgba(255,255,255,0.15)
    );
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: translateX(-30%);
}

/* Hover multimillonario */
.connection-icon:hover {
    transform: scale(1.16) rotateY(6deg) rotateX(3deg);
    border-color: rgba(255,215,128,0.95);

    box-shadow:
        0 25px 65px rgba(0,0,0,0.8),
        0 0 22px rgba(212,175,55,0.55),
        inset 0 0 22px rgba(255,255,255,0.08);
}

.connection-icon:hover::after {
    opacity: 0.55;
    transform: translateX(30%);
}

/* Texto bajo esfera */
.sphere-title {
    margin-top: 14px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    letter-spacing: 1.8px;
    color: #F2F2F2;
    opacity: 0.92;
    transition: opacity 0.3s ease;
}

.sphere-item:hover .sphere-title {
    opacity: 1;
}

/* ============================================================
   MODAL PREMIUM
   ============================================================ */
.sphere-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;

    backdrop-filter: blur(0px);
    opacity: 0;

    transition:
        opacity 0.45s ease,
        backdrop-filter 0.55s ease;
}

.sphere-modal.open {
    display: flex;
    opacity: 1;
    backdrop-filter: blur(8px);
}

.sphere-modal.closing {
    opacity: 0;
    backdrop-filter: blur(0px);
}

/* Caja del modal */
.modal-content {
    position: relative;
    max-width: 520px;
    width: 90%;
    background: radial-gradient(circle at top,
        rgba(255,255,255,0.12),
        rgba(5,10,25,0.96)
    );
    border-radius: 18px;
    padding: 32px 28px 26px;
    border: 1px solid rgba(212,175,55,0.7);

    box-shadow:
        0 26px 70px rgba(0,0,0,0.85),
        0 0 25px rgba(212,175,55,0.35);

    color: #F2F2F2;

    transform: scale(0.85) translateY(25px);
    opacity: 0;

    overflow: hidden;
    --border-pos: 0%;

    transition:
        transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
        opacity 0.45s ease;
}

.sphere-modal.open .modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.sphere-modal.closing .modal-content {
    transform: scale(0.85) translateY(25px);
    opacity: 0;
}

/* ============================================================
   BORDE DORADO REACTIVO
   ============================================================ */
.modal-content::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 2px;

    background: linear-gradient(
        120deg,
        rgba(212,175,55,0.1),
        rgba(212,175,55,0.8),
        rgba(212,175,55,0.1)
    );
    background-size: 200% 200%;
    background-position: var(--border-pos) 50%;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}

/* ============================================================
   PARTÍCULAS DORADAS
   ============================================================ */
.modal-image-wrap {
    position: relative;
    margin-bottom: 18px;
    border-radius: 16px;
    overflow: hidden;
}

.modal-particles {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(212,175,55,0.35) 0, transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(255,215,128,0.3) 0, transparent 45%),
        radial-gradient(circle at 30% 80%, rgba(212,175,55,0.25) 0, transparent 40%);
    opacity: 0.75;
    mix-blend-mode: screen;
    animation: particlesFloat 12s ease-in-out infinite alternate;
}

@keyframes particlesFloat {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(-10px, -8px, 0); }
    100% { transform: translate3d(8px, 10px, 0); }
}

/* Imagen sin blur */
.modal-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(212,175,55,0.5);
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    transition: transform 0.25s ease-out;
}

/* ============================================================
   BOTONES NEXT / PREV ULTRALUXURY
   ============================================================ */
.modal-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
    gap: 18px;
}

.modal-nav-btn {
    flex: 1;
    padding: 12px 18px;
    border-radius: 50px;

    background: rgba(10, 22, 45, 0.35);
    border: 1px solid rgba(212, 175, 55, 0.55);

    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.92rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;

    color: #E9E4DA;
    cursor: pointer;
    text-align: center;

    position: relative;
    overflow: hidden;

    transition:
        background 0.3s ease,
        letter-spacing 0.3s ease,
        box-shadow 0.35s ease,
        transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
        border-color 0.35s ease;
}

.modal-nav-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.05),
        rgba(212,175,55,0.18),
        rgba(255,255,255,0.05)
    );
    background-size: 200% 200%;
    opacity: 0;
    transition: opacity 0.35s ease, background-position 1.2s ease;
}

.modal-nav-btn:hover {
    background: rgba(212, 175, 55, 0.10);
    border-color: rgba(212,175,55,0.95);
    color: #FFF8E8;

    letter-spacing: 2px;

    box-shadow:
        0 0 20px rgba(212,175,55,0.45),
        0 8px 18px rgba(0,0,0,0.35);

    transform: translateY(-3px);
}

.modal-nav-btn:hover::before {
    opacity: 1;
    background-position: 100% 50%;
}

.modal-nav-btn:active {
    transform: scale(0.97);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 800px) {
    .connection-icon {
        width: 130px;
        height: 130px;
    }
    .modal-content {
        padding: 26px 22px 22px;
    }
}

@media (max-width: 600px) {
    .connection-icon {
        width: 110px;
        height: 110px;
    }
}
/* ============================================================
   BORDE PREMIUM SOLO ARRIBA Y ABAJO (SIN REDONDEO, SIN LATERALES)
   ============================================================ */

.connection-spheres {
    position: relative;
    padding: 120px 20px;
    background: #0A1F44;
    margin-top: 80px;

    /* Quitamos redondeo */
    border-radius: 0;

    overflow: visible;
}

/* Línea dorada superior (FULL WIDTH) */
.connection-spheres::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;     /* empieza desde el borde izquierdo de la página */
    right: 0;    /* termina en el borde derecho */
    height: 2px;

    background: linear-gradient(
        to right,
        rgba(212,175,55,0),
        rgba(212,175,55,0.9),
        rgba(212,175,55,0)
    );

    z-index: 10;
}

/* Línea dorada inferior (FULL WIDTH) */
.connection-spheres::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;     /* cubre todo */
    right: 0;
    height: 2px;

    background: linear-gradient(
        to right,
        rgba(212,175,55,0),
        rgba(212,175,55,0.9),
        rgba(212,175,55,0)
    );

    z-index: 10;
}
/* Eliminar brillo del título al pasar el cursor */
.connection-spheres h2:hover {
    text-shadow: none !important;
    filter: none !important;
}
/* CONTENEDOR PRINCIPAL */
.connection-spheres-section {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
}

/* CONTENEDOR PRINCIPAL DE LA SECCIÓN */
.connection-spheres-section {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
}

/* PORTADA DE LA SECCIÓN */
.connection-cover {
    position: absolute;
    inset: 0;
    background-image: url("img/clockpanoramica.jpg"); /* tu imagen */
    background-size: cover;
    background-position: center;
    z-index: 5;

    transform: translateY(0);  /* visible */
    opacity: 1;

    transition:
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.35s ease-out;
}

/* OCULTAR: SE VA HACIA ARRIBA */
.connection-cover.hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* CONTENIDO REAL (tus esferas) */
.real-content {
    position: relative;
    z-index: 1;
}