/* ============================================
   SERVICES HUB - Sobre Nosotros
   ============================================ */

/* Override about-grid to ensure both columns show */
.about-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
}

.about-image {
    width: 100%;
    max-width: 500px;
}

.services-hub {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 500px;
}

.services-hub::before {
    content: '';
    position: absolute;
    width: 50%; height: 50%;
    top: 25%; left: 25%;
    background: radial-gradient(circle, rgba(143,163,156,0.07) 0%, transparent 70%);
    border-radius: 50%;
    animation: hubAmbientPulse 6s ease-in-out infinite;
}

@keyframes hubAmbientPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.15); opacity: 1; }
}

.hub-orbit {
    position: absolute;
    width: 58%; height: 58%;
    top: 21%; left: 21%;
    border: 1px dashed rgba(143,163,156,0.15);
    border-radius: 50%;
}

.hub-connectors {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
}

.hub-connectors line {
    stroke: rgba(143,163,156,0.15);
    stroke-width: 1;
    stroke-dasharray: 5 7;
}

.hub-connectors circle {
    fill: #E5C88A;
    opacity: 0.5;
}

/* CENTER */
.hub-center {
    position: absolute;
    width: 28%;
    top: 46%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
}

.hub-center-glow {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle, rgba(229,200,138,0.18) 0%, transparent 70%);
    border-radius: 50%;
    animation: hubGlowPulse 4s ease-in-out infinite;
    z-index: -1;
}

@keyframes hubGlowPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.12); opacity: 1; }
}

.hub-center-ring {
    width: 100%;
    padding-top: 100%;
    position: relative;
    border-radius: 50%;
    background: linear-gradient(145deg, #E5C88A, #f0deb4, #E5C88A);
    border: 3px solid #E5C88A;
    box-shadow: 0 0 50px rgba(229,200,138,0.25);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease;
    cursor: pointer;
}

.hub-center-ring:hover {
    transform: scale(1.08);
    box-shadow: 0 0 80px rgba(229,200,138,0.4);
}

.hub-center-ring img {
    position: absolute;
    inset: 5%;
    width: 90%; height: 90%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
}

.hub-center-label {
    margin-top: 14px;
    font-size: clamp(10px, 1.3vw, 14px);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #E5C88A;
    text-shadow: 0 0 20px rgba(229,200,138,0.25);
    white-space: nowrap;
    position: relative;
    z-index: 20;
}

/* SERVICE NODES */
.hub-node {
    position: absolute;
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -50%);
    z-index: 5;
    cursor: pointer;
}

.hub-node-circle {
    width: 100%;
    padding-top: 100%;
    position: relative;
    flex-shrink: 0;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background: #1e1e30;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

.hub-node-circle::after {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    border: 2px solid rgba(229,200,138,0.4);
    box-shadow: 0 0 20px rgba(229,200,138,0.1);
    pointer-events: none;
}

.hub-node:hover .hub-node-circle {
    transform: scale(1.25);
    background: #1a1a2e;
    filter: drop-shadow(0 0 20px rgba(229,200,138,0.3));
}

.hub-node-circle img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
    filter: brightness(1.3) contrast(1.1);
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), filter 0.4s ease;
}

.hub-node:hover .hub-node-circle img {
    transform: scale(1.12);
}

.hub-node-label {
    margin-top: 8px;
    font-size: clamp(8px, 1.1vw, 12px);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #c0c8c4;
    background: rgba(10, 10, 20, 0.9);
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(229,200,138,0.2);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.hub-node:hover .hub-node-label {
    color: #E5C88A;
    border-color: rgba(229,200,138,0.3);
}

/* Node positions */
.hub-n1 { top: 6%;  left: 50%; }
.hub-n2 { top: 26%; left: 88%; }
.hub-n3 { top: 80%; left: 82%; }
.hub-n4 { top: 80%; left: 18%; }
.hub-n5 { top: 26%; left: 12%; }

/* Hide the accent border */
.services-hub + .about-image-accent {
    display: none;
}

/* Force about-content to be visible */
.about-content {
    opacity: 1 !important;
    transform: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    .about-image {
        max-width: 400px;
        margin: 0 auto;
    }
    .hub-center { width: 26%; }
    .hub-node { width: 17%; }
    .hub-center-label { font-size: 8px; letter-spacing: 1px; }
    .hub-node-label { font-size: 7px; padding: 2px 5px; }
}