/* ===== SOPORTE PAGE - FLAT DESIGN + ANIMATIONS ===== */

/* ===== HERO ILLUSTRATION ===== */
.sop-hero-illustration{
    position:relative;
    width:100%;max-width:520px;
    margin:0 auto;
    animation:sopHeroFloat 6s ease-in-out infinite;
}
.sop-hero-svg{
    width:100%;height:auto;
    filter:drop-shadow(0 20px 40px rgba(0,0,0,.15));
    transition:transform .5s;
}
.sop-hero-svg:hover{transform:scale(1.03) rotate(-1deg)}
@keyframes sopHeroFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-12px)}
}

/* ===== SERVICES GRID ===== */
.sop-services-grid{
    max-width:1300px;margin:0 auto;
    display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
}

/* Service Cards with 3D glow effect */
.sop-card{
    position:relative;
    border-radius:24px;
    transition:all .5s cubic-bezier(.4,0,.2,1);
    transform-style:preserve-3d;
}
.sop-card:hover{transform:translateY(-10px)}

.sop-card-glow{
    position:absolute;inset:-1px;border-radius:24px;
    background:linear-gradient(135deg,rgba(0,51,160,.3),rgba(0,181,173,.3),rgba(124,58,237,.2));
    opacity:0;transition:opacity .5s;z-index:0;
    filter:blur(1px);
}
.sop-card:hover .sop-card-glow{opacity:1}

.sop-card-inner{
    position:relative;z-index:1;
    background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
    border:1px solid var(--glass-border);
    border-radius:24px;
    padding:2rem 1.8rem;
    backdrop-filter:blur(10px);
    height:100%;
    transition:all .5s;
}
.sop-card:hover .sop-card-inner{
    border-color:rgba(0,181,173,.25);
    box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.sop-card-icon{
    width:64px;height:64px;
    border-radius:20px;
    background:linear-gradient(135deg,rgba(0,51,160,.15),rgba(0,181,173,.1));
    display:flex;align-items:center;justify-content:center;
    font-size:1.6rem;color:var(--accent-light);
    margin-bottom:1.2rem;
    transition:all .5s;
    position:relative;
}
.sop-card-icon::after{
    content:'';position:absolute;inset:0;border-radius:20px;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    opacity:0;transition:opacity .5s;z-index:-1;
}
.sop-card:hover .sop-card-icon{
    color:#fff;transform:scale(1.1) rotate(-5deg);
}
.sop-card:hover .sop-card-icon::after{opacity:1}

.sop-card-title{
    font-family:'Space Grotesk',sans-serif;
    font-size:1.15rem;font-weight:700;
    margin-bottom:.6rem;color:#fff;
}
.sop-card-desc{
    font-size:.85rem;color:var(--text-sec);
    line-height:1.6;margin-bottom:1rem;
}
.sop-card-list{list-style:none;padding:0}
.sop-card-list li{
    display:flex;align-items:flex-start;gap:8px;
    font-size:.82rem;color:var(--text-sec);
    margin-bottom:.5rem;line-height:1.5;
}
.sop-card-list li i{
    color:var(--accent-light);font-size:.65rem;
    margin-top:5px;flex-shrink:0;
}

/* ===== TAKEOVER SECTION (Nosotros nos encargamos) ===== */
.sop-takeover-section{padding-top:20px;padding-bottom:20px}
.sop-takeover{
    max-width:1300px;margin:0 auto;
    display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;
    align-items:center;
}
.sop-takeover-text .hero-badge{margin-bottom:1.5rem}
.sop-takeover-desc{
    font-size:1.05rem;color:var(--text-sec);
    line-height:1.8;margin:1.5rem 0 2rem;max-width:560px;
}
.sop-takeover-desc strong{color:#fff}
.sop-takeover-features{
    display:grid;grid-template-columns:1fr 1fr;gap:.8rem;
}
.sop-tf{
    display:flex;align-items:center;gap:10px;
    font-size:.9rem;color:var(--text-sec);
    padding:12px 16px;
    background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
    border:1px solid var(--glass-border);
    border-radius:12px;
    transition:all .4s;
}
.sop-tf:hover{
    border-color:rgba(0,181,173,.2);
    background:rgba(0,181,173,.04);
    transform:translateX(4px);
}
.sop-tf i{color:var(--accent-light);font-size:1rem;flex-shrink:0}

.sop-takeover-visual{
    display:flex;align-items:center;justify-content:center;
}
.sop-takeover-img{
    width:100%;max-width:550px;height:auto;
    animation:sopTakeoverFloat 7s ease-in-out infinite;
    filter:drop-shadow(0 15px 35px rgba(0,0,0,.1));
}
@keyframes sopTakeoverFloat{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-10px) scale(1.01)}
}

/* ===== HIGHLIGHT SECTIONS (Security / Maintenance) ===== */
.sop-highlight-section{padding-top:30px;padding-bottom:30px}
.sop-highlight{
    max-width:1200px;margin:0 auto;
    display:grid;grid-template-columns:1fr 1fr;gap:4rem;
    align-items:center;
}
.sop-highlight-reverse{direction:rtl}
.sop-highlight-reverse > *{direction:ltr}

.sop-highlight-visual{
    display:flex;align-items:center;justify-content:center;
}
.sop-highlight-img{
    width:100%;max-width:400px;height:auto;
    animation:sopHighlightFloat 6s ease-in-out infinite;
    filter:drop-shadow(0 12px 30px rgba(0,0,0,.1));
}
@keyframes sopHighlightFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
}

.sop-highlight-text h2{margin-bottom:1rem}
.sop-highlight-text p{
    font-size:1rem;color:var(--text-sec);
    line-height:1.7;margin-bottom:1.5rem;
}
.sop-highlight-list{list-style:none;padding:0}
.sop-highlight-list li{
    display:flex;align-items:center;gap:12px;
    font-size:.95rem;color:var(--text-sec);
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.04);
    transition:all .3s;
}
.sop-highlight-list li:last-child{border-bottom:none}
.sop-highlight-list li:hover{
    color:#fff;
    transform:translateX(6px);
}
.sop-highlight-list li i{
    width:36px;height:36px;
    border-radius:10px;
    background:linear-gradient(135deg,rgba(0,51,160,.12),rgba(0,181,173,.08));
    display:flex;align-items:center;justify-content:center;
    font-size:.9rem;color:var(--accent-light);
    flex-shrink:0;
    transition:all .4s;
}
.sop-highlight-list li:hover i{
    background:linear-gradient(135deg,var(--primary),var(--accent));
    color:#fff;
    transform:scale(1.1);
}

/* ===== ANIMATED DASHBOARD ===== */
.dash-container{max-width:1100px;margin:0 auto;perspective:1200px}
.dash-window{
    background:#0a1225;
    border-radius:16px;
    border:1px solid rgba(0,181,173,.15);
    overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.4),0 0 40px rgba(0,181,173,.08);
    transform:rotateX(2deg);
    transition:transform .6s;
}
.dash-window:hover{transform:rotateX(0)}
.dash-titlebar{
    display:flex;align-items:center;gap:12px;
    padding:12px 18px;
    background:linear-gradient(90deg,#0d1833,#101e3e);
    border-bottom:1px solid rgba(255,255,255,.05);
}
.dash-dots{display:flex;gap:6px}
.dash-dot{width:10px;height:10px;border-radius:50%}
.dash-dot-r{background:#ff5f57}
.dash-dot-y{background:#ffbd2e}
.dash-dot-g{background:#28c840}
.dash-titlebar-text{font-size:.75rem;color:var(--text-muted);font-weight:500;letter-spacing:.5px}
.dash-body{padding:20px;display:flex;flex-direction:column;gap:18px}

/* KPI Row */
.dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dash-kpi{
    display:flex;align-items:center;gap:12px;
    padding:14px 16px;
    background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
    border:1px solid rgba(255,255,255,.06);
    border-radius:12px;
    transition:all .4s;
}
.dash-kpi:hover{
    border-color:rgba(0,181,173,.2);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.dash-kpi-icon{
    width:42px;height:42px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    font-size:1rem;flex-shrink:0;
}
.dash-kpi-green{background:rgba(0,196,140,.12);color:#00C48C}
.dash-kpi-blue{background:rgba(0,51,160,.15);color:#4A90D9}
.dash-kpi-cyan{background:rgba(0,181,173,.12);color:#26D9D0}
.dash-kpi-purple{background:rgba(124,58,237,.12);color:#a78bfa}
.dash-kpi-num{
    font-family:'Space Grotesk',sans-serif;
    font-size:1.3rem;font-weight:700;color:#fff;
    line-height:1.2;
}
.dash-kpi-label{font-size:.72rem;color:var(--text-muted);font-weight:400}

/* Mid row: chart + status */
.dash-mid{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.dash-chart-box{
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.06);
    border-radius:12px;padding:16px;
}
.dash-chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dash-chart-title{font-size:.8rem;color:var(--text-sec);font-weight:500}
.dash-chart-badge{
    font-size:.72rem;font-weight:600;
    color:#00C48C;
    background:rgba(0,196,140,.1);
    padding:3px 10px;border-radius:20px;
}
.dash-chart{display:flex;align-items:flex-end;gap:10px;height:120px;padding-top:10px}
.dash-bar{
    flex:1;
    height:var(--h);
    background:linear-gradient(180deg,#0050C8,#0033A0);
    border-radius:6px 6px 2px 2px;
    display:flex;align-items:flex-end;justify-content:center;
    position:relative;
    animation:dashBarGrow 1.2s ease-out both;
    transition:all .3s;
}
.dash-bar:nth-child(1){animation-delay:.1s}
.dash-bar:nth-child(2){animation-delay:.2s}
.dash-bar:nth-child(3){animation-delay:.3s}
.dash-bar:nth-child(4){animation-delay:.4s}
.dash-bar:nth-child(5){animation-delay:.5s}
.dash-bar:nth-child(6){animation-delay:.6s}
.dash-bar:hover{filter:brightness(1.3);transform:scaleY(1.05)}
.dash-bar-active{background:linear-gradient(180deg,#00B5AD,#008580)}
.dash-bar span{
    position:absolute;bottom:-18px;
    font-size:.65rem;color:var(--text-muted);font-weight:500;
}
@keyframes dashBarGrow{from{height:0;opacity:0}to{height:var(--h);opacity:1}}

/* Status panel */
.dash-status-box{
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.06);
    border-radius:12px;padding:16px;
}
.dash-status-title{font-size:.8rem;color:var(--text-sec);font-weight:600;margin-bottom:12px}
.dash-status-item{
    display:flex;align-items:center;gap:8px;
    padding:7px 0;
    border-bottom:1px solid rgba(255,255,255,.03);
    font-size:.78rem;
}
.dash-status-item:last-child{border-bottom:none}
.dash-status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dash-dot-online{background:#00C48C;box-shadow:0 0 6px rgba(0,196,140,.5);animation:dashPulse 2s infinite}
.dash-dot-warn{background:#ffbd2e;box-shadow:0 0 6px rgba(255,189,46,.4)}
@keyframes dashPulse{0%,100%{opacity:1}50%{opacity:.5}}
.dash-status-name{flex:1;color:var(--text-sec)}
.dash-status-tag{
    font-size:.68rem;font-weight:600;
    padding:2px 8px;border-radius:10px;
}
.dash-tag-ok{background:rgba(0,196,140,.12);color:#00C48C}
.dash-tag-warn{background:rgba(255,189,46,.12);color:#ffbd2e}

/* Activity feed */
.dash-activity{
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.06);
    border-radius:12px;padding:16px;
}
.dash-activity-title{font-size:.8rem;color:var(--text-sec);font-weight:600;margin-bottom:10px}
.dash-activity-feed{display:flex;flex-direction:column;gap:6px}
.dash-feed-item{
    display:flex;align-items:center;gap:10px;
    padding:8px 10px;border-radius:8px;
    font-size:.78rem;
    transition:background .3s;
    opacity:0;animation:dashFeedIn .5s ease-out forwards;
}
.dash-feed-anim-1{animation-delay:.3s}
.dash-feed-anim-2{animation-delay:.5s}
.dash-feed-anim-3{animation-delay:.7s}
.dash-feed-anim-4{animation-delay:.9s}
@keyframes dashFeedIn{from{opacity:0;transform:translateX(-15px)}to{opacity:1;transform:translateX(0)}}
.dash-feed-item:hover{background:rgba(255,255,255,.03)}
.dash-feed-icon{
    width:26px;height:26px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    font-size:.65rem;flex-shrink:0;
}
.dash-feed-ok{background:rgba(0,196,140,.12);color:#00C48C}
.dash-feed-info{background:rgba(0,181,173,.12);color:#26D9D0}
.dash-feed-text{flex:1;color:var(--text-sec)}
.dash-feed-time{font-size:.68rem;color:var(--text-muted);flex-shrink:0}

/* ===== PROCESS / TIMELINE ===== */
.sop-process{
    max-width:900px;margin:0 auto;
    position:relative;
    display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;
}
.sop-process-line{
    position:absolute;top:45px;left:12%;right:12%;height:2px;
    background:linear-gradient(90deg,var(--primary),var(--accent),var(--primary));
    opacity:.3;z-index:0;
}

.sop-step{
    text-align:center;position:relative;z-index:1;
}
.sop-step-num{
    font-family:'Space Grotesk',sans-serif;
    font-size:.8rem;font-weight:700;
    color:var(--accent-light);
    margin-bottom:.8rem;letter-spacing:2px;
}
.sop-step-content{
    background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
    border:1px solid var(--glass-border);
    border-radius:20px;
    padding:1.8rem 1.2rem;
    transition:all .5s;
}
.sop-step:hover .sop-step-content{
    transform:translateY(-8px);
    border-color:rgba(0,181,173,.2);
    box-shadow:0 15px 40px rgba(0,0,0,.2);
}
.sop-step-icon{
    width:56px;height:56px;
    border-radius:50%;margin:0 auto 1rem;
    background:linear-gradient(135deg,rgba(0,51,160,.15),rgba(0,181,173,.1));
    display:flex;align-items:center;justify-content:center;
    font-size:1.3rem;color:var(--accent-light);
    transition:all .5s;
}
.sop-step:hover .sop-step-icon{
    background:linear-gradient(135deg,var(--primary),var(--accent));
    color:#fff;transform:scale(1.15);
    box-shadow:0 8px 30px var(--accent-glow);
}
.sop-step h3{
    font-family:'Space Grotesk',sans-serif;
    font-size:1rem;font-weight:700;
    margin-bottom:.5rem;color:#fff;
}
.sop-step p{
    font-size:.82rem;color:var(--text-sec);line-height:1.6;
}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
    .sop-services-grid{grid-template-columns:repeat(2,1fr)}
    .sop-process{grid-template-columns:repeat(2,1fr);gap:1.5rem}
    .sop-process-line{display:none}
    .sop-takeover{grid-template-columns:1fr;gap:2.5rem;text-align:center}
    .sop-takeover-desc{margin-left:auto;margin-right:auto}
    .sop-takeover-features{max-width:500px;margin:0 auto}
    .sop-highlight{grid-template-columns:1fr;gap:2rem;text-align:center}
    .sop-highlight-reverse{direction:ltr}
    .sop-highlight-visual{order:-1}
    .sop-highlight-img{max-width:350px}
    .sop-highlight-list li{justify-content:center}
    .sop-hero-illustration{max-width:420px}
    .dash-kpis{grid-template-columns:repeat(2,1fr)}
    .dash-mid{grid-template-columns:1fr}
}
@media(max-width:768px){
    .sop-services-grid{grid-template-columns:1fr}
    .sop-process{grid-template-columns:1fr;max-width:400px}
    .sop-takeover-features{grid-template-columns:1fr}
    .sop-hero-illustration{max-width:340px}
    .sop-highlight-img{max-width:280px}
    .sop-takeover-img{max-width:320px}
    .dash-kpis{grid-template-columns:1fr 1fr}
    .dash-kpi-num{font-size:1.1rem}
    .dash-feed-time{display:none}
    .dash-window{transform:none}
}
@media(max-width:480px){
    .sop-card-inner{padding:1.5rem 1.2rem}
    .sop-hero-illustration{max-width:280px}
    .sop-highlight-img{max-width:240px}
    .sop-takeover-img{max-width:260px}
    .dash-kpis{grid-template-columns:1fr}
    .dash-body{padding:12px}
    .dash-kpi{padding:10px 12px}
}