/* ═══════════════════════════════════════════
   TECNOSYSCOL — SEO PAGES CSS
   Estilos de subpáginas, hubs, blog, quiz,
   calculadora, casos y formulario B2B.
   ═══════════════════════════════════════════ */

/* ── PROTECCIÓN GLOBAL ANTI-DESCARGA Y ANTI-ARRASTRE DE IMÁGENES ── */
img,
picture,
svg,
[style*="background-image"] {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
}

/* ── EXPANSIÓN GLOBAL DE NAVEGACIÓN Y FOOTER ── */
.nav__inner,
.footer__inner {
    max-width: var(--ts-container, 1360px) !important;
}

/* ── BREADCRUMBS ── */
.breadcrumbs {
    position: relative;
    z-index: 3;
    margin: 0 auto 8px;
}

.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-family: 'JetBrains Mono', monospace;
    padding: 0;
    margin: 0;
}

.breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumbs li+li::before {
    content: '/';
    color: var(--text-muted);
}

.breadcrumbs a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumbs a:hover {
    color: var(--blue);
}

.breadcrumbs span[aria-current] {
    color: var(--text-secondary);
}

/* ── PAGE HERO (común a páginas internas) ── */
.page-hero {
    padding: 150px 24px 80px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    text-align: center;
    position: relative;
    overflow: hidden;
    background-image: radial-gradient(rgba(8, 102, 245, 0.06) 1px, transparent 1px);
    background-size: 28px 28px;
}

@media (min-width: 992px) {
    .svc-hero {
        min-height: calc(100vh - 120px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 140px;
        padding-bottom: 60px;
    }
}

/* ── EFECTO CORTINA TRANSICIÓN PARA FOTO DE FONDO (ou3.png) ── */
@keyframes curtainReveal {
    0% {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        opacity: 0;
        transform: scale(1.08);
    }

    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 0.22;
        transform: scale(1);
    }
}

/* ── CARRUSEL AMBIENTAL DE FONDO HERO (ou1, ou2, ou3, ou4) ── */
.svc-hero__bg-carousel {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: radial-gradient(ellipse 85% 85% at center, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0) 90%);
    mask-image: radial-gradient(ellipse 85% 85% at center, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0) 90%);
}

.svc-hero__bg-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1), transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.svc-hero__bg-slide.is-active {
    opacity: 0.22;
    visibility: visible;
}

[data-theme="dark"] .svc-hero__bg-slide.is-active {
    opacity: 0.30;
}

.svc-hero__bg-slide img,
.svc-hero__bg-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.1) contrast(1.05);
}

.page-hero__glow {
    position: absolute;
    width: 700px;
    height: 350px;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(8, 102, 245, 0.16) 0%, rgba(34, 197, 94, 0.05) 45%, transparent 75%);
    filter: blur(80px);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.page-hero__tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0284c7;
    background: rgba(2, 132, 199, 0.1);
    border: 1px solid rgba(2, 132, 199, 0.3);
    padding: 6px 16px;
    border-radius: 9999px;
    display: inline-block;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.1);
}

[data-theme="dark"] .page-hero__tag {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.14);
    border-color: rgba(56, 189, 248, 0.3);
}

.page-hero h1 {
    font-size: clamp(2.1rem, 5.2vw, 3.4rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.12;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    color: #0f172a;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .page-hero h1 {
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.page-hero h1 em {
    font-style: normal;
    background: linear-gradient(135deg, #0866F5 0%, #22C55E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-hero>p,
.page-hero p {
    font-size: 1.08rem;
    color: #334155;
    max-width: 820px;
    margin: 0 auto;
    line-height: 1.75;
    position: relative;
    z-index: 2;
    font-weight: 500;
}

[data-theme="dark"] .page-hero>p,
[data-theme="dark"] .page-hero p {
    color: #cbd5e1;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.page-404__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 32px;
    position: relative;
    z-index: 2;
}

.page-404__help {
    margin-top: 28px;
    font-size: 0.9rem;
}

.page-404__help a {
    color: var(--blue);
}

/* ── ACCIONES DEL HERO ── */
.svc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: center;
    margin-top: 36px;
    position: relative;
    z-index: 2;
}

.svc-hero__actions .btn {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.svc-hero__actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(8, 102, 245, 0.2);
}

.svc-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 28px;
    position: relative;
    z-index: 2;
}

.svc-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 9999px;
    font-size: 0.83rem;
    font-weight: 600;
    color: #0f172a;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.svc-hero__pill:hover {
    transform: translateY(-2px);
    border-color: rgba(8, 102, 245, 0.35);
}

[data-theme="dark"] .svc-hero__pill {
    background: rgba(15, 23, 42, 0.75);
    border-color: rgba(255, 255, 255, 0.16);
    color: #f8fafc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 15px rgba(0, 0, 0, 0.3);
}

.svc-hero__pill svg {
    color: #0866F5;
    flex-shrink: 0;
}

/* ── BARRA DE CONFIANZA & SLA B2B ── */
.svc-trust-bar {
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    padding: 28px 0;
    backdrop-filter: blur(16px);
    position: relative;
    z-index: 3;
}

[data-theme="dark"] .svc-trust-bar {
    background: rgba(15, 23, 42, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.svc-trust-bar__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.svc-trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    border-radius: 12px;
    transition: background-color 0.25s ease;
}

.svc-trust-item:hover {
    background: rgba(8, 102, 245, 0.04);
}

[data-theme="dark"] .svc-trust-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.svc-trust-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(8, 102, 245, 0.12) 0%, rgba(34, 197, 94, 0.08) 100%);
    border: 1px solid rgba(8, 102, 245, 0.2);
    color: #0866F5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s;
}

.svc-trust-item:hover .svc-trust-icon {
    transform: scale(1.08);
    background: linear-gradient(135deg, rgba(8, 102, 245, 0.2) 0%, rgba(34, 197, 94, 0.15) 100%);
}

.svc-trust-item strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.25;
}

.svc-trust-item span {
    font-size: 0.79rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

@media (max-width: 900px) {
    .svc-trust-bar__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 16px;
    }
}

@media (max-width: 540px) {
    .svc-trust-bar__inner {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ── MATRIZ COMPARATIVA PROBLEMA VS SOLUCIÓN B2B (STACKED CARDS) ── */
.svc-matrix__grid-v2 {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 1160px;
    margin: 40px auto 0;
}

.svc-matrix-card {
    border-radius: 20px;
    padding: 36px 40px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.svc-matrix-card--solution {
    grid-template-columns: 0.85fr 1.15fr;
}

.svc-matrix-card:hover {
    transform: translateY(-3px);
}

.svc-matrix-card--problem {
    background: #FEF2F2;
    border: 2px solid #EF4444;
}

.svc-matrix-card--problem:hover {
    background: #FEE2E2;
    box-shadow: 0 16px 40px rgba(239, 68, 68, 0.18);
}

.svc-matrix-card--solution {
    background: #ECFDF5;
    border: 2px solid #10B981;
}

.svc-matrix-card--solution:hover {
    background: #D1FAE5;
    box-shadow: 0 16px 40px rgba(16, 185, 129, 0.18);
}

[data-theme="dark"] .svc-matrix-card--problem {
    background: rgba(239, 68, 68, 0.12);
    border-color: #EF4444;
}

[data-theme="dark"] .svc-matrix-card--problem:hover {
    background: rgba(239, 68, 68, 0.18);
    box-shadow: 0 16px 40px rgba(239, 68, 68, 0.28);
}

[data-theme="dark"] .svc-matrix-card--solution {
    background: rgba(16, 185, 129, 0.12);
    border-color: #10B981;
}

[data-theme="dark"] .svc-matrix-card--solution:hover {
    background: rgba(16, 185, 129, 0.18);
    box-shadow: 0 16px 40px rgba(16, 185, 129, 0.28);
}

.svc-matrix-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.svc-matrix-card__badge--red {
    color: #FFFFFF;
    background: #EF4444;
}

.svc-matrix-card__badge--green {
    color: #FFFFFF;
    background: #10B981;
}

.svc-matrix-card__title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 20px;
    line-height: 1.22;
    letter-spacing: -0.01em;
}

[data-theme="dark"] .svc-matrix-card__title {
    color: #FFFFFF;
}

/* ═══ CAMARAS / GENERAL REASONS GRID (CHÉVERE / PREMIUM) ═══ */
.cam-reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    max-width: 1140px;
    margin: 36px auto 0;
}

.cam-reason-card {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(0, 102, 255, 0.12);
    border-radius: 20px;
    padding: 26px 28px;
    box-shadow: 0 6px 24px rgba(0, 51, 153, 0.04);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: left;
    overflow: hidden;
}

.cam-reason-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0066ff, #00c6ff, #3b82f6);
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.cam-reason-card:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 16px 36px rgba(0, 102, 255, 0.14);
    border-color: rgba(0, 102, 255, 0.35);
}

.cam-reason-card:hover::before {
    opacity: 1;
    height: 5px;
}

.cam-reason-card__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.cam-reason-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.12), rgba(0, 198, 255, 0.08));
    border: 1px solid rgba(0, 102, 255, 0.18);
    color: #0066ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8);
    transition: transform 0.3s ease, background 0.3s ease;
}

.cam-reason-card:hover .cam-reason-card__icon {
    transform: rotate(-6deg) scale(1.08);
    background: linear-gradient(135deg, #0066ff, #00c6ff);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(0, 102, 255, 0.3);
}

.cam-reason-card__title {
    font-size: 1.12rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.cam-reason-card__desc {
    font-size: 0.96rem;
    color: #475569;
    margin: 0;
    line-height: 1.55;
}

[data-theme="dark"] .cam-reason-card {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .cam-reason-card__title {
    color: #f8fafc;
}

[data-theme="dark"] .cam-reason-card__desc {
    color: #94a3b8;
}

.svc-matrix-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.svc-matrix-card__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.02rem;
    color: #1E293B;
    line-height: 1.4;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 8px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, color 0.25s ease;
    cursor: default;
}

[data-theme="dark"] .svc-matrix-card__list li {
    color: #CBD5E1;
}

.bullet-icon {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.svc-matrix-card__list--red .bullet-icon {
    color: #EF4444;
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1;
}

.svc-matrix-card__list--green .bullet-icon {
    color: #10B981;
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1;
}

/* ── ANIMACIÓN OLA DEL MAR (SEA WAVE HOVER EFFECT) EN LISTA DE PUNTOS ── */
.svc-matrix-card:hover .svc-matrix-card__list li:nth-child(1) {
    animation: seaWave 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s 1;
}

.svc-matrix-card:hover .svc-matrix-card__list li:nth-child(2) {
    animation: seaWave 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s 1;
}

.svc-matrix-card:hover .svc-matrix-card__list li:nth-child(3) {
    animation: seaWave 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.19s 1;
}

.svc-matrix-card:hover .svc-matrix-card__list li:nth-child(4) {
    animation: seaWave 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.26s 1;
}

.svc-matrix-card:hover .svc-matrix-card__list li:nth-child(5) {
    animation: seaWave 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.33s 1;
}

/* Hover individual en cada ítem */
.svc-matrix-card__list li:hover {
    transform: translateY(-6px) translateX(6px) scale(1.02);
}

.svc-matrix-card__list--red li:hover {
    background: rgba(239, 68, 68, 0.12);
}

.svc-matrix-card__list--green li:hover {
    background: rgba(16, 185, 129, 0.12);
}

.svc-matrix-card__list li:hover .bullet-icon {
    transform: scale(1.45) rotate(12deg);
}

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

    40% {
        transform: translateY(-8px) scale(1.03);
    }

    70% {
        transform: translateY(2px) scale(0.99);
    }

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

.svc-matrix-card__image {
    width: 100%;
    height: 310px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.svc-matrix-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 900px) {

    .svc-matrix-card,
    .svc-matrix-card--solution {
        grid-template-columns: 1fr;
        padding: 24px;
        gap: 24px;
    }

    .svc-matrix-card--solution {
        display: flex;
        flex-direction: column-reverse;
    }
}

.svc-matrix__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 44px;
    position: relative;
}

/* VS BADGE CENTRAL */
.svc-matrix__grid::after {
    content: "VS";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    background: #FFFFFF;
    color: #64748B;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.15rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    z-index: 10;
    border: 2px solid #E2E8F0;
    animation: vs-pulse 3s infinite ease-in-out;
}

[data-theme="dark"] .svc-matrix__grid::after {
    background: #1E293B;
    color: #94A3B8;
    border-color: #334155;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

@keyframes vs-pulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
}

.svc-matrix__col {
    padding: 40px 34px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    position: relative;
    overflow: hidden;
}

.svc-matrix__col:hover {
    transform: translateY(-6px);
}

.svc-matrix__col--danger {
    background: linear-gradient(180deg, #FEF2F2 0%, #FFF5F5 100%) !important;
    border: 1.5px solid #FCA5A5 !important;
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.06);
}

.svc-matrix__col--danger:hover {
    box-shadow: 0 20px 40px rgba(239, 68, 68, 0.16) !important;
}

[data-theme="dark"] .svc-matrix__col--danger {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}

[data-theme="dark"] .svc-matrix__col--danger:hover {
    box-shadow: 0 20px 40px rgba(239, 68, 68, 0.25) !important;
}

.svc-matrix__col--solution {
    background: linear-gradient(180deg, #F0FDF4 0%, #F6FEF8 100%) !important;
    border: 1.5px solid #86EFAC !important;
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.06);
    animation: pulse-glow-solution 4s infinite ease-in-out;
}

@keyframes pulse-glow-solution {

    0%,
    100% {
        box-shadow: 0 10px 30px rgba(34, 197, 94, 0.06);
    }

    50% {
        box-shadow: 0 10px 40px rgba(34, 197, 94, 0.2);
    }
}

.svc-matrix__col--solution:hover {
    box-shadow: 0 20px 50px rgba(34, 197, 94, 0.25) !important;
    animation: none;
    /* stop pulse on hover to keep the strong hover shadow */
}

[data-theme="dark"] .svc-matrix__col--solution {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
}

[data-theme="dark"] .svc-matrix__col--solution:hover {
    box-shadow: 0 20px 40px rgba(34, 197, 94, 0.25) !important;
}

.svc-matrix__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 8px;
    align-self: flex-start;
}

.svc-matrix__badge--danger {
    background: rgba(239, 68, 68, 0.12);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.svc-matrix__badge--solution {
    background: rgba(34, 197, 94, 0.12);
    color: #22C55E;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.svc-matrix__head h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 10px;
    letter-spacing: -0.02em;
}

.svc-matrix__head p {
    font-size: 0.93rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}

.svc-matrix__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.svc-matrix__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.91rem;
    color: var(--text-secondary);
    line-height: 1.55;
    transition: transform 0.3s ease, color 0.3s ease;
}

.svc-matrix__list li:hover {
    transform: translateX(6px);
    color: var(--text-primary);
}

.svc-matrix__list li svg {
    flex-shrink: 0;
    margin-top: 3px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.svc-matrix__col--danger .svc-matrix__list li svg {
    color: #EF4444;
}

/* Shake the red X icon slightly on hover */
.svc-matrix__col--danger .svc-matrix__list li:hover svg {
    animation: shake-danger 0.4s ease;
}

@keyframes shake-danger {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-3px) rotate(-5deg);
    }

    50% {
        transform: translateX(3px) rotate(5deg);
    }

    75% {
        transform: translateX(-3px) rotate(-5deg);
    }

    100% {
        transform: translateX(0);
    }
}

.svc-matrix__col--solution .svc-matrix__list li svg {
    color: #22C55E;
}

/* Pop the green check icon slightly on hover */
.svc-matrix__col--solution .svc-matrix__list li:hover svg {
    transform: scale(1.3);
}

.svc-matrix__highlight {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #22C55E !important;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(34, 197, 94, 0.18);
    transform: translateY(-2px);
    margin-top: auto;
    backdrop-filter: blur(12px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.svc-matrix__highlight::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    animation: shine-highlight 4s infinite;
}

@keyframes shine-highlight {
    0% {
        left: -150%;
    }

    20% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

.svc-matrix__highlight:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 35px rgba(34, 197, 94, 0.25);
}

[data-theme="dark"] .svc-matrix__highlight {
    background: rgba(15, 23, 42, 0.95) !important;
    border-color: #22C55E !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.4);
}

.svc-matrix__highlight-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.3);
}

.svc-matrix__highlight strong {
    display: block;
    font-size: 0.96rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.svc-matrix__highlight p {
    font-size: 0.83rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.45;
}

@media (max-width: 860px) {
    .svc-matrix__grid {
        grid-template-columns: 1fr;
    }
}

/* ── BLOQUES GENERICOS ── */
.svc-block {
    padding: 100px 24px;
}

.svc-block:nth-child(odd) {
    background: var(--bg-primary);
}

.svc-block:nth-child(even) {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.svc-block__inner {
    max-width: 1150px;
    margin: 0 auto;
}

.svc-block__inner--narrow {
    max-width: 850px;
}

/* ── LISTA DE PROBLEMAS ── */
.svc-list {
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.svc-list li {
    position: relative;
    padding: 18px 20px 18px 52px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    transition: border-color 0.25s, transform 0.25s;
}

.svc-list li:hover {
    border-color: var(--problem-hover-border, rgba(255, 60, 60, 0.2));
    transform: translateY(-2px);
}

.svc-list li::before {
    content: '✕';
    position: absolute;
    left: 18px;
    top: 16px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 60, 60, 0.12);
    color: #ff3c3c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
}

/* ── BENEFICIOS (grid cards) ── */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 48px;
}

@media (max-width: 992px) {
    .svc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .svc-grid {
        grid-template-columns: 1fr;
    }
}

.svc-card {
    padding: 36px 30px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    position: relative;
    overflow: hidden;
}

.svc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0866F5 0%, rgba(8, 102, 245, 0.1) 100%);
    transition: height 0.3s ease, background 0.3s ease;
}

.svc-card:hover {
    transform: translateY(-8px);
    border-color: #0866F5;
    box-shadow: 0 20px 40px rgba(8, 102, 245, 0.14);
}

.svc-card:hover::before {
    height: 4px;
    background: linear-gradient(90deg, #0866F5 0%, #22C55E 100%);
}

.svc-card__num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.8rem;
    font-weight: 800;
    color: #0866F5;
    opacity: 0.35;
    line-height: 1;
    margin-bottom: 20px;
    transition: opacity 0.3s, color 0.3s;
}

.svc-card:hover .svc-card__num {
    opacity: 0.9;
    color: #0866F5;
}

.svc-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--text-primary);
    letter-spacing: -0.015em;
}

.svc-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}

/* ── QUÉ INCLUYE ── */
.svc-incluye__grid {
    list-style: none;
    padding: 0;
    margin: 48px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 768px) {
    .svc-incluye__grid {
        grid-template-columns: 1fr;
    }
}

.svc-incluye__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    font-size: 0.93rem;
    color: var(--text-secondary);
    line-height: 1.55;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.svc-incluye__item:hover {
    transform: translateX(4px);
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.08);
}

.svc-incluye__item svg {
    color: #22C55E;
    flex-shrink: 0;
    margin-top: 2px;
    transition: transform 0.25s ease;
}

.svc-incluye__item:hover svg {
    transform: scale(1.15);
}

/* ── PRECIOS ── */
.svc-precios__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 48px;
    align-items: stretch;
}

@media (max-width: 992px) {
    .svc-precios__grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

.svc-precio-card {
    display: flex;
    flex-direction: column;
    padding: 42px 34px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(13, 38, 76, 0.05);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    text-align: center;
    position: relative;
}

.svc-precio-card:hover {
    transform: translateY(-8px);
    border-color: #0866F5;
    box-shadow: 0 20px 45px rgba(8, 102, 245, 0.16);
}

.svc-precio-card--featured {
    border: 2px solid #0866F5 !important;
    background: var(--bg-card);
    box-shadow: 0 15px 40px rgba(8, 102, 245, 0.18);
    transform: scale(1.03);
}

@media (max-width: 992px) {
    .svc-precio-card--featured {
        transform: none;
    }
}

.svc-precio-card__tag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #0866F5 0%, #16A34A 100%);
    color: #FFFFFF;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 5px 16px;
    border-radius: 9999px;
    box-shadow: 0 4px 15px rgba(8, 102, 245, 0.3);
}

.svc-precio-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 14px;
    color: var(--text-primary);
}

.svc-precio-card__precio {
    font-family: var(--ts-font-h, 'Outfit', sans-serif);
    font-size: 2.2rem;
    font-weight: 800;
    color: #0866F5;
    margin-bottom: 14px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.svc-precio-card>p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 24px;
}

.svc-precio-card .btn {
    align-self: center;
    width: 100%;
}

/* ── PROCESO ── */
.svc-proceso__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 48px;
    position: relative;
}

@media (max-width: 992px) {
    .svc-proceso__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .svc-proceso__grid {
        grid-template-columns: 1fr;
    }
}

.svc-paso {
    padding: 32px 26px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s, box-shadow 0.35s;
    position: relative;
    z-index: 2;
}

.svc-paso:hover {
    transform: translateY(-4px);
    border-color: #0866F5;
    box-shadow: 0 16px 35px rgba(8, 102, 245, 0.12);
}

.svc-paso__num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.4rem;
    font-weight: 800;
    color: #0866F5;
    background: rgba(8, 102, 245, 0.1);
    border: 1px solid rgba(8, 102, 245, 0.2);
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    transition: background-color 0.3s, color 0.3s;
}

.svc-paso:hover .svc-paso__num {
    background: #0866F5;
    color: #FFFFFF;
}

.svc-paso p {
    font-size: 0.91rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}

.svc-paso strong {
    color: var(--text-primary);
}

/* ── CARRUSEL VERTICAL FAQ B2B ── */
.svc-vcarousel {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    max-width: 980px;
    width: 100%;
    margin: 40px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
}

.svc-vcarousel__main {
    position: relative;
    min-height: 240px;
}

.svc-vcarousel__card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 30px 36px;
    box-shadow: 0 12px 36px rgba(8, 102, 245, 0.08), 0 4px 12px rgba(0, 0, 0, 0.02);
    border-top: 4px solid #0866F5;
    border-left: 1px solid rgba(8, 102, 245, 0.1);
    border-right: 1px solid rgba(8, 102, 245, 0.1);
    border-bottom: 1px solid rgba(8, 102, 245, 0.1);
    display: none;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.svc-vcarousel__card.is-active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

[data-theme="dark"] .svc-vcarousel__card {
    background: #0D162C;
    border-color: rgba(8, 102, 245, 0.25);
    border-top-color: #0866F5;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

.svc-vcarousel__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.svc-vcarousel__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #EFF6FF;
    color: #0866F5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(8, 102, 245, 0.12);
}

[data-theme="dark"] .svc-vcarousel__icon {
    background: rgba(8, 102, 245, 0.2);
    color: #60A5FA;
}

.svc-vcarousel__num {
    font-size: 2rem;
    font-weight: 900;
    color: #93C5FD;
    opacity: 0.6;
    letter-spacing: -0.02em;
    font-family: inherit;
}

[data-theme="dark"] .svc-vcarousel__num {
    color: #3B82F6;
    opacity: 0.4;
}

.svc-vcarousel__title {
    font-size: 1.55rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 14px;
    line-height: 1.3;
}

[data-theme="dark"] .svc-vcarousel__title {
    color: #F8FAFC;
}

.svc-vcarousel__answer-box {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 14px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.svc-vcarousel__desc {
    font-size: 1.02rem !important;
    color: #1E293B !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    font-weight: 500 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #F8FAFC !important;
    padding: 16px 20px !important;
    border-radius: 12px !important;
    border-left: 4px solid #0866F5 !important;
    box-shadow: 0 2px 8px rgba(8, 102, 245, 0.06) !important;
}

[data-theme="dark"] .svc-vcarousel__desc {
    color: #E2E8F0 !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border-left-color: #38BDF8 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.svc-vcarousel__divider {
    border-top: 1.5px dashed #E2E8F0;
    margin: 28px 0 20px;
}

[data-theme="dark"] .svc-vcarousel__divider {
    border-top-color: #1E293B;
}

.svc-vcarousel__footer {
    display: flex;
    align-items: center;
}

.svc-vcarousel__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #0866F5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[data-theme="dark"] .svc-vcarousel__badge {
    color: #60A5FA;
}

/* Columna Navegación Vertical */
.svc-vcarousel__nav {
    background: #FFFFFF;
    border-radius: 999px;
    padding: 8px 5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 44px;
    max-height: 100%;
    align-self: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

[data-theme="dark"] .svc-vcarousel__nav {
    background: #0D162C;
    border-color: #1E293B;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.svc-vcarousel__arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #EFF6FF;
    color: #0866F5;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.svc-vcarousel__arrow svg {
    width: 14px;
    height: 14px;
}

.svc-vcarousel__arrow:hover {
    background: #0866F5;
    color: #FFFFFF;
    transform: scale(1.1);
}

[data-theme="dark"] .svc-vcarousel__arrow {
    background: rgba(8, 102, 245, 0.2);
    color: #60A5FA;
}

[data-theme="dark"] .svc-vcarousel__arrow:hover {
    background: #0866F5;
    color: #FFFFFF;
}

.svc-vcarousel__dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 156px;
    max-height: 156px;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

.svc-vcarousel__dots-track {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-vcarousel__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #CBD5E1;
    background: #F8FAFC;
    color: #334155 !important;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

[data-theme="dark"] .svc-vcarousel__dot {
    background: #1E293B;
    border-color: #334155;
    color: #CBD5E1 !important;
}

.svc-vcarousel__dot:hover {
    background: rgba(8, 102, 245, 0.12);
    border-color: #0866F5;
    color: #0866F5 !important;
    transform: scale(1.08);
}

.svc-vcarousel__dot.is-active {
    background: #0866F5 !important;
    border-color: #0866F5 !important;
    color: #FFFFFF !important;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(8, 102, 245, 0.45);
    transform: scale(1.12);
}

@media (max-width: 992px) {
    .svc-vcarousel {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 100%;
        padding: 0 16px;
    }

    /* CÁPSULA FLOTANTE DE NAVEGACIÓN FAQ EN MÓVILES */
    .svc-vcarousel__nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 16px auto 0 !important;
        border-radius: 999px !important;
        padding: 6px 14px !important;
        gap: 10px !important;
        background: #FFFFFF !important;
        border: 1px solid rgba(8, 102, 245, 0.18) !important;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
        box-sizing: border-box !important;
    }

    [data-theme="dark"] .svc-vcarousel__nav {
        background: #0D162C !important;
        border-color: rgba(56, 189, 248, 0.25) !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4) !important;
    }

    .svc-vcarousel__arrow {
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
    }

    /* Flecha anterior: rotar -90deg para apuntar a la IZQUIERDA (<) */
    .svc-vcarousel__arrow--prev,
    .svc-vcarousel__arrow:first-child {
        transform: rotate(-90deg) !important;
    }

    .svc-vcarousel__arrow--prev:hover,
    .svc-vcarousel__arrow:first-child:hover {
        transform: rotate(-90deg) scale(1.1) !important;
    }

    /* Flecha siguiente: rotar -90deg para apuntar a la DERECHA (>) */
    .svc-vcarousel__arrow--next,
    .svc-vcarousel__arrow:last-child {
        transform: rotate(-90deg) !important;
    }

    .svc-vcarousel__arrow--next:hover,
    .svc-vcarousel__arrow:last-child:hover {
        transform: rotate(-90deg) scale(1.1) !important;
    }

    /* PÍLDORAS NUMÉRICAS MÓVILES (CIRCULARES PERFECTAS & PASO JS DE 34px) */
    .svc-vcarousel__dots {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        height: 34px !important;
        max-height: 34px !important;
        width: 170px !important;
        min-width: 170px !important;
        max-width: 170px !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .svc-vcarousel__dots-track {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        align-items: center !important;
        height: 34px !important;
    }

    .svc-vcarousel__dot {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        flex: 0 0 28px !important;
        border-radius: 50% !important;
        aspect-ratio: 1 / 1 !important;
        font-size: 0.68rem !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .svc-vcarousel__card {
        padding: 28px 22px;
    }
}



/* ── FAQ (details) ── */
.svc-faq__list {
    display: grid;
    gap: 16px;
    margin-top: 48px;
}

.svc-faq__item {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.svc-faq__item:hover,
.svc-faq__item[open] {
    border-color: #0866F5;
    box-shadow: 0 10px 30px rgba(8, 102, 245, 0.08);
}

.svc-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px;
    cursor: pointer;
    list-style: none;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
    user-select: none;
    transition: color 0.3s ease;
}

.svc-faq__item summary::-webkit-details-marker {
    display: none;
}

.svc-faq__item summary svg {
    color: #0866F5;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.svc-faq__item[open] summary {
    color: #0866F5;
}

.svc-faq__item[open] summary svg {
    transform: rotate(180deg);
}

.svc-faq__item p {
    padding: 0 26px 24px;
    margin: 0;
    font-size: 0.94rem;
    color: var(--text-secondary);
    line-height: 1.7;
    animation: faqFadeDown 0.35s ease-out forwards;
}

@keyframes faqFadeDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── RELACIONADOS ── */
.svc-relacionados__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}

@media (max-width: 900px) {
    .svc-relacionados__grid {
        grid-template-columns: 1fr;
    }
}

.svc-rel-card {
    display: block;
    padding: 32px 28px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    text-decoration: none;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s;
}

.svc-rel-card:hover {
    transform: translateY(-5px);
    border-color: #0866F5;
    box-shadow: 0 18px 40px rgba(8, 102, 245, 0.12);
}

.svc-rel-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 12px;
    line-height: 1.35;
}

.svc-rel-card p {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.svc-rel-card__link {
    font-size: 0.86rem;
    font-weight: 700;
    color: #0866F5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.25s ease;
}

.svc-rel-card:hover .svc-rel-card__link {
    gap: 10px;
}

/* ── CLASES DE ANIMACIÓN SCROLL REVEAL (SR) ── */
.sr {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.sr.sr--visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .sr {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ── HUB SERVICIOS ── */
.hub-servicios__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 44px;
}

.hub-servicio-card {
    display: flex;
    flex-direction: column;
    padding: 32px 26px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    text-decoration: none;
    transition: all 0.3s;
}

.hub-servicio-card:hover {
    transform: translateY(-4px);
    border-color: var(--blue-mid);
    box-shadow: 0 16px 40px var(--card-hover-shadow);
}

.hub-servicio-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 10px;
    line-height: 1.3;
}

.hub-servicio-card p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
    flex-grow: 1;
}

.hub-servicio-card__link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--blue);
}

.hub-servicio-card__precio {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 14px;
    display: block;
}

.hub-servicios__grid--personas {
    grid-template-columns: repeat(3, 1fr);
}

/* ── TESTIMONIOS HUB ── */
.hub-testimonios__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 44px;
}

.hub-testimonio {
    padding: 30px 26px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
}

.hub-testimonio__stars {
    color: #FFB800;
    font-size: 1rem;
    margin-bottom: 12px;
    letter-spacing: 2px;
}

.hub-testimonio p {
    font-size: 0.9rem;
    color: var(--testimonial-text, var(--text-secondary));
    line-height: 1.65;
    margin-bottom: 16px;
}

.hub-testimonio__autor {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── CASOS DE ÉXITO ── */
.casos__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 44px;
}

.caso-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

.caso-card:hover {
    transform: translateY(-4px);
    border-color: var(--blue-mid);
    box-shadow: 0 16px 40px var(--card-hover-shadow);
}

.caso-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface);
}

.caso-card__emoji {
    font-size: 1.5rem;
}

.caso-card__sector {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.3;
}

.caso-card__body {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.caso-card__item {
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.caso-card__label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.caso-card__item--resultado {
    border-top: 1px solid var(--border-subtle);
    padding-top: 14px;
    color: var(--text-primary);
}

.caso-card__item--resultado .caso-card__label {
    color: #25D366;
}

/* ── QUIZ ── */
.quiz__box {
    margin-top: 44px;
    padding: 38px 32px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
}

.quiz-q {
    margin-bottom: 28px;
}

.quiz-q:last-of-type {
    margin-bottom: 8px;
}

.quiz-q__pregunta {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 14px;
}

.quiz-q label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    margin-bottom: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    transition: all 0.2s;
}

.quiz-q label:hover {
    border-color: var(--blue-mid);
}

.quiz-q label:has(input:checked) {
    border-color: var(--blue);
    background: var(--blue-soft);
    color: var(--text-primary);
}

.quiz-q input[type="radio"] {
    margin-top: 4px;
    accent-color: var(--blue);
    flex-shrink: 0;
}

.quiz__result {
    text-align: center;
    padding-top: 28px;
    border-top: 1px solid var(--border-subtle);
}

.quiz__result h3 {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.quiz__result p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin-bottom: 22px;
}

.quiz__result .btn {
    margin: 0 6px 10px;
}

/* ── AISLAMIENTO DE TRANSITION-DELAY PARA NODOS RADIALES ── */
.hg-radial-node {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.15s ease 0s,
                border-color 0.15s ease 0s,
                box-shadow 0.15s ease 0s,
                color 0.15s ease 0s !important;
}

.sr.is-visible .hg-radial-node--1 { transition-delay: 0.75s, 0.75s, 0s, 0s, 0s, 0s !important; }
.sr.is-visible .hg-radial-node--2 { transition-delay: 0.85s, 0.85s, 0s, 0s, 0s, 0s !important; }
.sr.is-visible .hg-radial-node--3 { transition-delay: 0.95s, 0.95s, 0s, 0s, 0s, 0s !important; }
.sr.is-visible .hg-radial-node--4 { transition-delay: 1.05s, 1.05s, 0s, 0s, 0s, 0s !important; }
.sr.is-visible .hg-radial-node--5 { transition-delay: 1.15s, 1.15s, 0s, 0s, 0s, 0s !important; }
.sr.is-visible .hg-radial-node--6 { transition-delay: 1.25s, 1.25s, 0s, 0s, 0s, 0s !important; }
.sr.is-visible .hg-radial-node--7 { transition-delay: 1.35s, 1.35s, 0s, 0s, 0s, 0s !important; }
.sr.is-visible .hg-radial-node--8 { transition-delay: 1.45s, 1.45s, 0s, 0s, 0s, 0s !important; }

/* ── CALCULADORA (EL ARMA SECRETA B2B) ── */
.svc-block.calculadora {
    background: #0B1325 !important;
    position: relative;
    padding: 100px 24px;
}

.svc-block.calculadora .section-tag {
    color: #22C55E !important;
}

.svc-block.calculadora .section-title {
    color: #FFFFFF !important;
}

.svc-block.calculadora .section-sub {
    color: #94A3B8 !important;
}

.calculadora__box {
    margin-top: 44px;
    padding: 48px 40px;
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(8, 102, 245, 0.3) !important;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5) !important;
    border-radius: 24px !important;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #FFFFFF;
}

.calculadora__label {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #FFFFFF !important;
    margin-bottom: 20px;
}

.calculadora__label strong {
    display: inline-block;
    color: #22C55E !important;
    font-size: 3rem !important;
    font-weight: 900;
    line-height: 1;
    margin-left: 10px;
}

.calculadora__box input[type="range"] {
    width: 100%;
    height: 10px;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    outline: none;
    margin-bottom: 36px;
    cursor: pointer;
}

.calculadora__box input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #22C55E;
    border: 4px solid #FFFFFF;
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.6);
    cursor: grab;
}

.calculadora__box input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #22C55E;
    border: 4px solid #FFFFFF;
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.6);
    cursor: grab;
}

.calculadora__results {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
}

.calculadora__result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px;
    font-size: 0.92rem;
    color: #94A3B8 !important;
    text-align: left;
}

.calculadora__result strong {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.35rem;
    color: #FFFFFF !important;
    white-space: nowrap;
}

.calculadora__result--highlight {
    background: rgba(34, 197, 94, 0.15) !important;
    border: 2px solid #22C55E !important;
    box-shadow: 0 0 25px rgba(34, 197, 94, 0.25) !important;
    border-radius: 16px;
    padding: 22px 26px;
}

.calculadora__result--highlight span {
    color: #F8FAFC !important;
    font-weight: 700;
}

.calculadora__result--highlight strong {
    color: #22C55E !important;
    font-size: 2.2rem !important;
    font-weight: 900;
    text-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
}

.calculadora__nota {
    font-size: 0.78rem;
    color: #94A3B8 !important;
    margin-bottom: 24px;
}

/* ── CHECKLIST INTERACTIVO DE AUDITORÍA ── */
.checklist-print__box {
    margin-top: 44px;
    padding: 40px 36px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 16px 40px rgba(8, 102, 245, 0.06);
}

.chk-score-bar {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 28px;
}

.chk-score-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.chk-status {
    font-size: 0.84rem;
    padding: 4px 12px;
    border-radius: 9999px;
    font-weight: 800;
}

.chk-status--danger {
    background: rgba(239, 68, 68, 0.12);
    color: #EF4444;
}

.chk-status--warning {
    background: rgba(245, 158, 11, 0.12);
    color: #F59E0B;
}

.chk-status--success {
    background: rgba(34, 197, 94, 0.12);
    color: #22C55E;
}

.chk-progress-track {
    width: 100%;
    height: 10px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 9999px;
    overflow: hidden;
}

[data-theme="dark"] .chk-progress-track {
    background: rgba(255, 255, 255, 0.1);
}

.chk-progress-fill {
    height: 100%;
    background: #EF4444;
    border-radius: 9999px;
    transition: width 0.4s ease, background 0.4s ease;
}

.checklist-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 32px;
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: 14px;
    cursor: pointer;
    user-select: none;
    transition: all 0.25s ease;
}

.checklist-item:hover {
    border-color: #0866F5;
    transform: translateX(4px);
}

.checklist-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chk-custom {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-medium, #94A3B8);
    border-radius: 6px;
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: var(--bg-card);
}

.checklist-item input[type="checkbox"]:checked+.chk-custom {
    background: #22C55E;
    border-color: #22C55E;
}

.checklist-item input[type="checkbox"]:checked+.chk-custom::after {
    content: '✓';
    color: #FFFFFF;
    font-weight: 900;
    font-size: 0.9rem;
}

.chk-text {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.checklist-item input[type="checkbox"]:checked~.chk-text {
    color: var(--text-primary);
    font-weight: 600;
}

.checklist-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 24px;
}

/* ── IMPRESIÓN EXCLUSIVA DEL CHECKLIST (EXACTAMENTE 1 PÁGINA) ── */
@media print {

    body>*:not(main),
    header,
    footer,
    nav,
    aside,
    .svc-hero,
    .svc-trust-bar,
    .svc-matrix,
    .svc-beneficios,
    .svc-incluye,
    .calculadora,
    .svc-precios,
    .svc-proceso,
    .svc-faq,
    .svc-relacionados,
    .form-b2b,
    .back-to-top,
    .whatsapp-widget,
    .no-print,
    .checklist-actions {
        display: none !important;
    }

    html,
    body,
    main {
        background: #FFFFFF !important;
        color: #0F172A !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    .checklist-print {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 0 !important;
        background: #FFFFFF !important;
    }

    .checklist-print__box {
        margin: 0 auto !important;
        padding: 20px !important;
        border: 2px solid #0F172A !important;
        box-shadow: none !important;
        background: #FFFFFF !important;
        color: #0F172A !important;
        border-radius: 14px !important;
        max-width: 100% !important;
    }

    .chk-score-bar {
        background: #F8FAFC !important;
        border: 1.5px solid #CBD5E1 !important;
        color: #0F172A !important;
        margin-bottom: 14px !important;
        padding: 12px 16px !important;
    }

    .checklist-grid {
        display: grid !important;
        gap: 6px !important;
        margin-bottom: 0 !important;
    }

    .checklist-item {
        padding: 8px 12px !important;
        border: 1px solid #CBD5E1 !important;
        background: #FFFFFF !important;
        color: #0F172A !important;
        break-inside: avoid !important;
    }

    .chk-text {
        color: #0F172A !important;
        font-size: 0.85rem !important;
    }
}

/* ── FORMULARIO B2B ── */
.form-b2b {
    padding: 90px 24px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
}

.form-b2b__inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 42% 58%;
    gap: 44px;
    align-items: start;
}

.form-b2b__info h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 10px 0 16px;
    color: var(--text-primary);
}

.form-b2b__info p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 22px;
}

.form-b2b__puntos {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.form-b2b__puntos li {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.form-b2b__form {
    padding: 32px 28px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    display: grid;
    gap: 16px;
}

.form-b2b__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-b2b__field {
    display: grid;
    gap: 6px;
}

.form-b2b__field label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}

.form-b2b__field input,
.form-b2b__field select,
.form-b2b__field textarea {
    width: 100%;
    padding: 13px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.2s;
    resize: vertical;
}

.form-b2b__field input:focus,
.form-b2b__field select:focus,
.form-b2b__field textarea:focus {
    border-color: var(--blue);
}

.form-b2b__field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.form-b2b__submit {
    justify-self: start;
}

/* ── BLOG ── */
.blog-grid-section {
    padding: 70px 24px;
    background: var(--bg-primary);
}

.blog-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.blog-grid-section .section-header {
    text-align: center;
    margin-bottom: 44px;
}

.blog-grid-section .blog-grid {
    margin-top: 0;
}

.blog-card {
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    text-decoration: none;
    transition: all 0.3s;
}

.blog-card:hover {
    transform: translateY(-4px);
    border-color: var(--blue-mid);
    box-shadow: 0 16px 40px var(--card-hover-shadow);
}

.blog-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.blog-card__categoria {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--blue);
    background: var(--blue-soft);
    border: 1px solid var(--blue-mid);
    padding: 4px 10px;
    border-radius: 999px;
}

.blog-card__fecha {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.blog-card h2 {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--text-primary);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.blog-card p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.65;
    flex-grow: 1;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.blog-card__link {
    font-weight: 700;
    color: var(--blue);
}

.blog-cta {
    padding: 80px 24px;
    background: var(--blue);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.blog-cta__inner {
    max-width: 640px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.blog-cta h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}

.blog-cta p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 28px;
    line-height: 1.6;
}

.blog-cta .btn--wa {
    background: #25D366;
    color: #fff;
}

/* ── ARTÍCULO ── */
.article {
    padding: 120px 24px 40px;
    background: var(--bg-primary);
}

.article__inner {
    max-width: 760px;
    margin: 0 auto;
}

.article .breadcrumbs ol {
    justify-content: flex-start;
    margin-bottom: 22px;
}

.article__header {
    margin-bottom: 36px;
}

.article__header h1 {
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.18;
    margin: 14px 0 18px;
    color: var(--text-primary);
}

.article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 0.82rem;
    color: var(--text-muted);
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border-subtle);
}

.article__body {
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--text-secondary);
}

.article__body h2 {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin: 44px 0 16px;
    line-height: 1.3;
}

.article__body h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 30px 0 10px;
    line-height: 1.35;
}

.article__body p {
    margin: 0 0 18px;
}

.article__body ul,
.article__body ol {
    margin: 0 0 20px;
    padding-left: 24px;
    display: grid;
    gap: 8px;
}

.article__body li {
    line-height: 1.7;
}

.article__body a {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article__body strong {
    color: var(--text-primary);
}

.article__body em {
    color: var(--text-primary);
}

.article__body blockquote {
    margin: 26px 0;
    padding: 18px 24px;
    border-left: 4px solid var(--blue);
    background: var(--bg-card);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
    color: var(--text-primary);
}

.article__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 22px;
    font-size: 0.88rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.article__body th,
.article__body td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}

.article__body th {
    background: var(--bg-surface);
    color: var(--text-primary);
    font-weight: 800;
}

.article__body tr:last-child td {
    border-bottom: none;
}

.article__cta {
    margin: 48px 0 0;
    padding: 36px 32px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--blue-mid);
    border-radius: var(--radius);
}

.article__cta h2 {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.article__cta p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin-bottom: 22px;
}

/* ── NAV DROPDOWN ── */
.nav-dropdown {
    position: relative;
}

.nav-dropdown__menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 260px;
    padding: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    box-shadow: 0 20px 50px var(--nav-shadow);
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 60;
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown__menu a {
    display: block;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
}

.nav-dropdown__menu a:hover {
    background: var(--blue-soft);
    color: var(--blue);
}

/* ── NAV MOBILE SUB ── */
.nav__mobile-sub {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 8px 18px;
}

.nav__mobile-sub a {
    font-size: 0.82rem;
    color: var(--text-muted) !important;
}

/* ═══ BLOG PREMIUM — chips, destacado, progreso ═══ */
.blog-card {
    position: relative;
}

.blog-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.blog-card__icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    transition: transform 0.25s;
}

.blog-card:hover .blog-card__icon {
    transform: scale(1.1) rotate(-4deg);
}

.blog-card__badge {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: #7C3AED;
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(124, 58, 237, 0.3);
    padding: 4px 10px;
    border-radius: 999px;
}

.blog-card--featured {
    grid-column: 1 / -1;
    overflow: hidden;
}

.blog-card--featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--blue), #7C3AED);
}

.blog-card--featured h2 {
    font-size: clamp(1.35rem, 3vw, 1.7rem);
    max-width: 90%;
}

.blog-card--featured p {
    -webkit-line-clamp: 4;
    line-clamp: 4;
    max-width: 85%;
}

.blog-card--featured {
    padding: 40px 34px;
}

/* Colores por categoría (chips) */
.blog-card[data-cat="Redes"] .blog-card__categoria,
.blog-card__chip[data-cat="Redes"] .blog-card__categoria,
.article__header .blog-card__chip[data-cat="Redes"] .blog-card__categoria {
    color: #0055FF;
    background: rgba(0, 85, 255, 0.1);
    border-color: rgba(0, 85, 255, 0.3);
}

.blog-card[data-cat="Outsourcing IT"] .blog-card__categoria,
.blog-card__chip[data-cat="Outsourcing IT"] .blog-card__categoria {
    color: #7C3AED;
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.3);
}

.blog-card[data-cat="Mantenimiento"] .blog-card__categoria,
.blog-card__chip[data-cat="Mantenimiento"] .blog-card__categoria {
    color: #D97706;
    background: rgba(217, 119, 6, 0.1);
    border-color: rgba(217, 119, 6, 0.3);
}

.blog-card[data-cat="Seguridad"] .blog-card__categoria,
.blog-card__chip[data-cat="Seguridad"] .blog-card__categoria {
    color: #DC2626;
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.3);
}

.blog-card[data-cat="CCTV"] .blog-card__categoria,
.blog-card__chip[data-cat="CCTV"] .blog-card__categoria {
    color: #0284C7;
    background: rgba(2, 132, 199, 0.1);
    border-color: rgba(2, 132, 199, 0.3);
}

.blog-card[data-cat="Consejos"] .blog-card__categoria,
.blog-card__chip[data-cat="Consejos"] .blog-card__categoria {
    color: #059669;
    background: rgba(5, 150, 105, 0.1);
    border-color: rgba(5, 150, 105, 0.3);
}

/* ── BARRA DE PROGRESO DE LECTURA ── */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--blue), #7C3AED);
    z-index: 1200;
    transition: width 0.08s linear;
}

/* ── CAJA DE AUTOR ── */
.article__author {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 40px;
    padding: 22px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
}

.article__author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--blue), #7C3AED);
    color: #fff;
    font-weight: 900;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.article__author-info strong {
    font-size: 0.95rem;
    color: var(--text-primary);
    display: block;
    margin-bottom: 4px;
}

.article__author-info p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ── RESPONSIVE ── */
@media (max-width: 992px) {

    .svc-grid,
    .svc-precios__grid,
    .hub-servicios__grid,
    .hub-testimonios__grid,
    .casos__grid,
    .svc-relacionados__grid {
        grid-template-columns: 1fr 1fr;
    }

    .form-b2b__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 700px) {
    .svc-block {
        padding: 60px 20px;
    }

    .svc-list,
    .svc-incluye__grid,
    .svc-proceso__grid,
    .svc-proceso__grid--3,
    .svc-grid,
    .svc-precios__grid,
    .hub-servicios__grid,
    .hub-servicios__grid--personas,
    .hub-testimonios__grid,
    .casos__grid,
    .svc-relacionados__grid,
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .form-b2b__row {
        grid-template-columns: 1fr;
    }

    .page-hero {
        padding: 130px 20px 60px;
    }

    .form-b2b__submit {
        width: 100%;
        justify-content: center;
    }

    .article {
        padding: 110px 18px 30px;
    }

    .blog-card--featured {
        padding: 30px 24px;
    }

    .blog-card--featured h2,
    .blog-card--featured p {
        max-width: 100%;
    }

    .blog-card__badge {
        top: 14px;
        right: 14px;
    }
}

/* ── IMPRESIÓN: solo el checklist ── */
@media print {

    .no-print,
    nav,
    footer,
    .wa-float,
    #cookie-banner,
    #promoBar,
    .preloader,
    .form-b2b,
    .svc-hero__actions {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .checklist-print__box {
        border: 1px solid #ccc;
        background: #fff;
    }

    .checklist-print__box li {
        color: #000;
        border-color: #ddd;
    }

    .checklist-print__box li::before {
        color: #000;
    }
}

/* ═══ SHELL /SOLUCIONES (Bloque B.3) ═══ */
.soluciones-indice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.soluciones-indice__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: all 0.25s;
}

.soluciones-indice__item::after {
    content: '→';
    color: var(--blue);
    font-weight: 700;
}

.soluciones-indice__item:hover {
    border-color: var(--blue);
    color: var(--blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--card-hover-shadow);
}

.soluciones-desc {
    max-width: 720px;
    margin: 0 auto;
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    text-align: center;
}

/* -- P�GINAS LEGALES (privacidad + t�rminos, H.3) -- */
.policy-hero {
    padding: 140px 24px 60px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    text-align: center;
}

.policy-hero__tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 16px;
    display: block;
}

.policy-hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
}

.policy-hero p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.policy-body {
    max-width: 800px;
    margin: 0 auto;
    padding: 80px 24px;
}

.policy-body h2 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 48px 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--blue-mid);
}

.policy-body h2:first-child {
    margin-top: 0;
}

.policy-body p {
    font-size: 0.93rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 14px;
}

.policy-body ul {
    margin: 0 0 16px 20px;
}

.policy-body ul li {
    font-size: 0.93rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 6px;
}

.policy-body a {
    color: var(--blue);
}

.policy-date {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 40px;
}

.policy-contact {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 32px;
    margin-top: 48px;
}

.policy-contact h3 {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.policy-contact p {
    margin-bottom: 6px;
}

/* ═══════════════════════════════════════════
   LANDING PAGES HOGAR SERVICIOS (/hogar/{slug})
   ═══════════════════════════════════════════ */
.hgl-hero {
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 130px 24px 60px;
    box-sizing: border-box;
    background: radial-gradient(circle at 80% 20%, rgba(8, 102, 245, 0.12) 0%, transparent 60%),
        radial-gradient(circle at 10% 80%, rgba(0, 200, 255, 0.08) 0%, transparent 50%),
        var(--ts-bg-alt, var(--bg-surface, #0b0f19));
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
    overflow: hidden;
}

.hgl-hero__inner {
    width: 100%;
    max-width: var(--ts-container, 1360px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

@media (max-width: 991px) {
    .hgl-hero {
        min-height: auto;
        padding-top: 125px !important;
        padding-bottom: 60px;
    }

    .hgl-hero__inner {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
    }

    .hgl-hero__actions {
        justify-content: center;
    }

    .hgl-hero__precio {
        margin-left: auto;
        margin-right: auto;
    }
}

.hgl-hero__tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(8, 102, 245, 0.1) !important;
    border: 1px solid rgba(8, 102, 245, 0.25) !important;
    color: #0866F5 !important;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    margin-top: 16px !important;
    margin-bottom: 18px;
    text-transform: uppercase;
    text-shadow: none !important;
    box-shadow: 0 2px 8px rgba(8, 102, 245, 0.08) !important;
}


[data-theme="dark"] .hgl-hero__tag {
    background: rgba(56, 189, 248, 0.15) !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
    color: #38BDF8 !important;
    text-shadow: none !important;
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.15) !important;
}


.hgl-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.18;
    color: var(--text-primary);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.hgl-hero__sub {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 26px;
}

.hgl-hero__actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.hgl-hero__microbenefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin: 16px 0 20px 0;
    max-width: 540px;
}

@media (max-width: 575px) {
    .hgl-hero__microbenefits {
        grid-template-columns: 1fr;
    }
}

.hgl-hero__microbenefit-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: rgba(8, 102, 245, 0.06);
    border: 1px solid rgba(8, 102, 245, 0.18);
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}

.hgl-hero__microbenefit-item:hover {
    transform: translateY(-2px);
    background: rgba(8, 102, 245, 0.12);
    border-color: rgba(8, 102, 245, 0.4);
    box-shadow: 0 4px 12px rgba(8, 102, 245, 0.12);
}

.hgl-hero__microbenefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(8, 102, 245, 0.12);
    color: var(--ts-brand, #0866F5);
    flex-shrink: 0;
}

.hgl-hero__microbenefit-text {
    line-height: 1.3;
}

[data-theme="dark"] .hgl-hero__microbenefit-item {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .hgl-hero__microbenefit-item:hover {
    background: rgba(8, 102, 245, 0.18);
    border-color: rgba(8, 102, 245, 0.45);
    color: #ffffff;
}

[data-theme="dark"] .hgl-hero__microbenefit-icon {
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
}

.hgl-hero__precio {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    max-width: 540px;
    width: fit-content;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.hgl-hero__precio-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hgl-hero__precio-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--ts-brand, #0866F5);
    background: rgba(8, 102, 245, 0.1);
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    line-height: 1.2;
}

.hgl-hero__precio-valor {
    font-family: var(--ts-font-h, sans-serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.hgl-hero__precio-nota {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 0;
    padding-top: 6px;
    border-top: 1px solid var(--border-subtle);
}

[data-theme="dark"] .hgl-hero__precio {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .hgl-hero__precio-label {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
}

[data-theme="dark"] .hgl-hero__precio-nota {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.hgl-hero__visual {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: 340px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hgl-hero__visual--img {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 420px !important;
    margin: 0 !important;
}

.hgl-hero__img {
    width: 100% !important;
    max-width: 700px !important;
    height: auto !important;
    max-height: 550px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 20px 40px rgba(8, 102, 245, 0.35));
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hgl-hero__img:hover {
    transform: translateY(-6px) scale(1.02);
}

.hgl-hero__ring {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 2px dashed rgba(8, 102, 245, 0.25);
    animation: hglRotate 35s linear infinite;
}

@keyframes hglRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.hgl-hero__core {
    width: 110px;
    height: 110px;
    border-radius: 24px;
    background: linear-gradient(135deg, #0866F5, #0044BB);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 40px rgba(8, 102, 245, 0.4);
    z-index: 2;
}

.hgl-hero__core svg {
    width: 52px;
    height: 52px;
    stroke: #ffffff;
    stroke-width: 1.8;
}

.hgl-hero__chip {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.hgl-hero__chip svg {
    width: 22px;
    height: 22px;
    stroke: var(--ts-brand, #0866F5);
}

.hgl-hero__chip--1 {
    top: 30px;
    left: 15px;
}

.hgl-hero__chip--2 {
    top: 40px;
    right: 15px;
}

.hgl-hero__chip--3 {
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

/* ── PROBLEMA ── */
.hgl-problema {
    padding: 60px 24px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
}

.hgl-problema__inner {
    max-width: var(--ts-container, 1360px);
    margin: 0 auto;
    max-width: 860px;
    text-align: center;
}

.hgl-problema__titulo {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.hgl-problema p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ── QUÉ INCLUYE ── */
.hgl-incluye {
    padding: 70px 24px;
}

.hgl-incluye__inner {
    max-width: var(--ts-container, 1360px);
    margin: 0 auto;
}

.hgl-incluye__head {
    text-align: center;
    margin-bottom: 44px;
}

.hgl-incluye__head h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--text-primary);
}

.hgl-incluye__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    list-style: none;
    padding: 0;
    max-width: 1240px;
    margin: 0 auto;
}

.hgl-incluye__lista li {
    flex: 1 1 340px;
    max-width: 380px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    background: var(--bg-card, rgba(255, 255, 255, 0.8));
    border: 1px solid var(--border-subtle, rgba(8, 102, 245, 0.15));
    border-radius: 16px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

[data-theme="dark"] .hgl-incluye__lista li {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
}

.hgl-incluye__lista li:hover {
    transform: translateY(-4px);
    border-color: var(--ts-brand, #0866F5);
    box-shadow: 0 14px 30px rgba(8, 102, 245, 0.18);
}

.hgl-incluye__check-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0866F5, #00c8ff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(8, 102, 245, 0.35);
}

.hgl-incluye__check-badge svg,
.hgl-incluye__lista li svg {
    width: 24px;
    height: 24px;
    stroke: #ffffff !important;
    stroke-width: 3.8px !important;
    flex-shrink: 0;
}

/* ═══ QUÉ INCLUYE — OPTIMIZACIÓN Y UPGRADES ═══ */
.opt-incluye-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 960px;
    margin: 36px auto 0 auto;
}

@media (max-width: 768px) {
    .opt-incluye-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.opt-incluye-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 26px;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    text-align: left;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.opt-incluye-card:hover {
    transform: translateY(-3px);
    border-color: rgba(8, 102, 245, 0.35);
    box-shadow: 0 10px 28px rgba(8, 102, 245, 0.1);
}

.opt-incluye-card__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #0866F5;
    color: #ffffff;
    flex-shrink: 0;
    margin-top: 2px;
    box-shadow: 0 4px 12px rgba(8, 102, 245, 0.25);
}

.opt-incluye-card__body {
    flex: 1;
}

.opt-incluye-card__title {
    font-family: var(--ts-font-h, sans-serif);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    margin: 0 0 6px 0;
    line-height: 1.35;
}

.opt-incluye-card__desc {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary, #64748b);
    margin: 0;
}

.opt-incluye-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 760px;
    margin: 32px auto 0 auto;
    padding: 14px 22px;
    background: rgba(8, 102, 245, 0.06);
    border: 1px solid rgba(8, 102, 245, 0.18);
    border-radius: 12px;
    text-align: center;
    color: var(--text-primary, #0f172a);
    font-size: 0.94rem;
    font-weight: 600;
}

.opt-incluye-note svg {
    color: #0866F5;
    flex-shrink: 0;
}

[data-theme="dark"] .opt-incluye-card {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .opt-incluye-card:hover {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(8, 102, 245, 0.45);
    box-shadow: 0 10px 28px rgba(8, 102, 245, 0.2);
}

[data-theme="dark"] .opt-incluye-card__title {
    color: #f8fafc;
}

[data-theme="dark"] .opt-incluye-card__desc {
    color: #94a3b8;
}

[data-theme="dark"] .opt-incluye-note {
    background: rgba(8, 102, 245, 0.12);
    border-color: rgba(8, 102, 245, 0.3);
    color: #e2e8f0;
}

/* ── PROCESO ── */
.hgl-proceso {
    padding: 70px 24px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.hgl-proceso__inner {
    max-width: var(--ts-container, 1360px);
    margin: 0 auto;
}

.hgl-proceso__head {
    text-align: center;
    margin-bottom: 48px;
}

.hgl-proceso__head h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-top: 8px;
}

/* ── LÍNEA DE TIEMPO VERTICAL (CÓMO TRABAJAMOS) ── */
.cam-step-timeline {
    position: relative;
    max-width: 680px;
    margin: 48px auto 0;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.cam-step-timeline::before {
    content: '';
    position: absolute;
    top: 25px;
    bottom: 25px;
    left: 34px;
    width: 3px;
    background: linear-gradient(180deg, var(--blue, #0866F5) 0%, #00C8FF 100%);
    z-index: 1;
    box-shadow: 0 0 10px rgba(8, 102, 245, 0.35);
}

.cam-step-item {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 28px;
    cursor: pointer;
}

.cam-step-marker {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue, #0866F5) 0%, #00C8FF 100%);
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(8, 102, 245, 0.45);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.cam-step-item:hover .cam-step-marker {
    transform: scale(1.12);
    box-shadow: 0 8px 24px rgba(0, 200, 255, 0.6);
}

.cam-step-body {
    padding-top: 6px;
}

.cam-step-body h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 8px;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.cam-step-item:hover .cam-step-body h3 {
    color: var(--ts-brand, #0866F5);
}

.cam-step-body p {
    font-size: 0.98rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 575px) {
    .cam-step-timeline {
        gap: 28px;
        padding-left: 0;
    }

    .cam-step-timeline::before {
        left: 20px;
        top: 20px;
        bottom: 20px;
    }

    .cam-step-marker {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }

    .cam-step-item {
        gap: 20px;
    }

    .cam-step-body h3 {
        font-size: 1.1rem;
    }

    .cam-step-body p {
        font-size: 0.9rem;
    }
}

.hgl-proceso__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.hgl-paso {
    padding: 32px 26px;
    background: var(--bg-card);
    border: 2px solid var(--blue, #0866F5);
    box-shadow: 0 6px 20px rgba(8, 102, 245, 0.12);
    border-radius: 16px;
    position: relative;
}

.hgl-paso__num {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(8, 102, 245, 0.12);
    color: var(--ts-brand, #0866F5);
    font-weight: 800;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.hgl-paso h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.hgl-paso p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ── FAQ LANDING ── */
.hgl-faq {
    padding: 70px 24px;
}

.hgl-faq__inner {
    max-width: var(--ts-container, 1360px);
    margin: 0 auto;
    max-width: 900px;
}

.hgl-faq__head {
    text-align: center;
    margin-bottom: 44px;
}

.hgl-faq__head h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-top: 8px;
}

.hgl-faq__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hgl-faq__item,
.hgl-faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 20px 24px;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.hgl-faq__item[open],
.hgl-faq-item.is-open {
    border-color: var(--ts-brand, #0866F5);
}

.hgl-faq-head,
.hgl-faq__item summary {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    list-style: none;
    width: 100%;
}

.hgl-faq-q {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
    flex-grow: 1;
}

.hgl-faq__item summary::-webkit-details-marker {
    display: none;
}

.hgl-faq-icon,
.hgl-faq__item summary svg {
    transition: transform 0.3s ease;
    color: var(--ts-brand, #0866F5);
    flex-shrink: 0;
}

.hgl-faq__item[open] summary svg,
.hgl-faq-item.is-open .hgl-faq-icon {
    transform: rotate(180deg);
}

.hgl-faq-body[hidden] {
    display: none !important;
}

.hgl-faq-body:not([hidden]) {
    display: block !important;
}

.hgl-faq-body p,
.hgl-faq__item p {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border-subtle);
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

/* ── CTA FINAL ── */
.hgl-cta {
    padding: 80px 24px;
    background: linear-gradient(135deg, rgba(8, 102, 245, 0.15) 0%, rgba(0, 0, 0, 0) 100%),
        var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    text-align: center;
}

.hgl-cta__inner {
    max-width: 640px;
    margin: 0 auto;
}

.hgl-cta h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 14px;
}

.hgl-cta p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.hgl-cta .ts-btn {
    display: inline-flex;
}

/* ═══════════════════════════════════════════
   LANDING PAGES EMPRESAS B2B (servicio.php / {slug})
   ═══════════════════════════════════════════ */
.page-hero.svc-hero {
    padding: 135px 24px 75px;
    background: radial-gradient(circle at 75% 20%, rgba(8, 102, 245, 0.14) 0%, transparent 55%),
        radial-gradient(circle at 20% 80%, rgba(0, 180, 255, 0.08) 0%, transparent 45%),
        var(--ts-bg-alt, var(--bg-surface, #0b0f19));
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
    text-align: center;
    overflow: hidden;
}

.svc-hero .breadcrumbs {
    justify-content: center;
    margin-bottom: 20px;
}

.page-hero__tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 18px;
    border-radius: 999px;
    background: rgba(8, 102, 245, 0.12);
    border: 1px solid rgba(8, 102, 245, 0.25);
    color: var(--ts-brand, #0866F5);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.page-hero h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    font-weight: 900;
    line-height: 1.15;
    color: var(--text-primary);
    max-width: 900px;
    margin: 0 auto 18px;
    letter-spacing: -0.03em;
}

.page-hero p {
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 780px;
    margin: 0 auto 32px;
}

.svc-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.svc-hero__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.25s;
}

.btn--wa {
    background: #25D366;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.25);
}

.btn--wa:hover {
    background: #20bd5a;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.35);
}

.btn--white {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}

.btn--white:hover {
    border-color: var(--ts-brand, #0866F5);
    color: var(--ts-brand, #0866F5);
    transform: translateY(-2px);
}

/* ── BLOQUES GENERALES DE SERVICIO ── */
.svc-block {
    padding: 70px 24px;
}

.svc-block__inner {
    max-width: var(--ts-container, 1360px);
    margin: 0 auto;
}

.svc-block__inner--narrow {
    max-width: 900px;
}

.section-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.section-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ts-brand, #0866F5);
    margin-bottom: 10px;
    font-weight: 700;
}

.section-title {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.section-sub {
    font-size: 1.02rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ── PROBLEMA & LISTA ── */
.svc-problema {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
}

.svc-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    list-style: none;
    padding: 0;
    max-width: 1000px;
    margin: 0 auto;
}

.svc-list li {
    padding: 18px 22px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid #EF4444;
    border-radius: 12px;
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.5;
    font-weight: 600;
}

/* ── BENEFICIOS GRID ── */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.svc-card {
    padding: 32px 26px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.svc-card:hover {
    transform: translateY(-4px);
    border-color: var(--ts-brand, #0866F5);
    box-shadow: 0 16px 36px var(--card-hover-shadow, rgba(8, 102, 245, 0.12));
}

.svc-card__num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ts-brand, #0866F5);
    margin-bottom: 14px;
}

.svc-card h3 {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.svc-card p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ── QUÉ INCLUYE GRID (BENTO SYSTEM) ── */
.svc-incluye {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.svc-incluye__bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 40px;
}

@media (max-width: 992px) {
    .svc-incluye__bento {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .svc-incluye__bento {
        grid-template-columns: 1fr;
    }
}

.svc-bento-card {
    position: relative;
    border-radius: 18px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
    overflow: hidden;
}

.svc-bento-card:hover {
    transform: translateY(-5px);
}

/* Tarjeta 1: Lead Card (Gradiente Violeta/Azul Eléctrico) */
.svc-bento-card--lead {
    background: linear-gradient(135deg, #4338CA 0%, #2563EB 50%, #1D4ED8 100%);
    color: #FFFFFF;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.svc-bento-card__lead-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    top: -40px;
    right: -40px;
    background: rgba(255, 255, 255, 0.15);
    filter: blur(40px);
    border-radius: 50%;
    pointer-events: none;
}

.svc-bento-card__lead-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #E0E7FF;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.svc-bento-card__lead-title {
    font-size: clamp(1.25rem, 2.2vw, 1.45rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #FFFFFF;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.svc-bento-card__lead-sub {
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 16px;
    max-width: 280px;
}

.svc-bento-card__lead-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #FEF08A;
    background: rgba(0, 0, 0, 0.22);
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(254, 240, 138, 0.3);
}

/* Tarjetas Dark Navy (Tarjetas 2, 3, 4) */
.svc-bento-card--dark {
    background: linear-gradient(150deg, #0F172A 0%, #0A101D 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

[data-theme="dark"] .svc-bento-card--dark {
    background: linear-gradient(150deg, #0D162C 0%, #080E1C 100%);
    border-color: rgba(8, 102, 245, 0.2);
}

.svc-bento-card--dark:hover {
    border-color: rgba(8, 102, 245, 0.45);
    box-shadow: 0 14px 32px rgba(8, 102, 245, 0.18);
}

.svc-bento-card--dark .svc-bento-card__icon-wrap {
    background: rgba(8, 102, 245, 0.18);
    border: 1px solid rgba(8, 102, 245, 0.35);
    color: #38BDF8;
}

.svc-bento-card--dark .svc-bento-card__tag {
    color: #60A5FA;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.svc-bento-card--dark .svc-bento-card__title {
    color: #FFFFFF;
}

.svc-bento-card--dark .svc-bento-card__desc {
    color: #94A3B8;
}

/* Tarjetas Claras / Contraste (Tarjetas 5, 6) */
.svc-bento-card--light {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .svc-bento-card--light {
    background: linear-gradient(150deg, #131E3A 0%, #0C1428 100%);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.svc-bento-card--light:hover {
    border-color: rgba(8, 102, 245, 0.35);
    box-shadow: 0 12px 28px rgba(8, 102, 245, 0.1);
}

.svc-bento-card--light .svc-bento-card__icon-wrap {
    background: rgba(8, 102, 245, 0.08);
    border: 1px solid rgba(8, 102, 245, 0.18);
    color: #0866F5;
}

[data-theme="dark"] .svc-bento-card--light .svc-bento-card__icon-wrap {
    background: rgba(8, 102, 245, 0.2);
    border-color: rgba(8, 102, 245, 0.38);
    color: #60A5FA;
}

.svc-bento-card--light .svc-bento-card__tag {
    color: #0866F5;
    background: rgba(8, 102, 245, 0.06);
    border: 1px solid rgba(8, 102, 245, 0.16);
}

[data-theme="dark"] .svc-bento-card--light .svc-bento-card__tag {
    color: #93C5FD;
    background: rgba(8, 102, 245, 0.14);
    border-color: rgba(8, 102, 245, 0.28);
}

.svc-bento-card--light .svc-bento-card__title {
    color: #0F172A;
}

[data-theme="dark"] .svc-bento-card--light .svc-bento-card__title {
    color: #FFFFFF;
}

.svc-bento-card--light .svc-bento-card__desc {
    color: #475569;
}

[data-theme="dark"] .svc-bento-card--light .svc-bento-card__desc {
    color: #94A3B8;
}

.svc-bento-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.svc-bento-card__icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.svc-bento-card:hover .svc-bento-card__icon-wrap {
    transform: scale(1.08);
}

.svc-bento-card__tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
}

.svc-bento-card__title {
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}

.svc-bento-card__desc {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* ── BARRA INFERIOR DE 5 MINI-PILLS ── */
.svc-incluye__pills {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 24px;
}

@media (max-width: 1024px) {
    .svc-incluye__pills {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .svc-incluye__pills {
        grid-template-columns: 1fr;
    }
}

.svc-mini-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.svc-mini-pill:hover {
    transform: translateY(-2px);
}

.svc-mini-pill__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.svc-mini-pill__text {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
}

.svc-mini-pill--gradient {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(59, 130, 246, 0.14) 100%);
    border: 1px solid rgba(99, 102, 241, 0.28);
    color: #4F46E5;
}

[data-theme="dark"] .svc-mini-pill--gradient {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%);
    border-color: rgba(99, 102, 241, 0.4);
    color: #A5B4FC;
}

.svc-mini-pill--gradient-alt {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(59, 130, 246, 0.12) 100%);
    border: 1px solid rgba(168, 85, 247, 0.28);
    color: #9333EA;
}

[data-theme="dark"] .svc-mini-pill--gradient-alt {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%);
    border-color: rgba(168, 85, 247, 0.4);
    color: #D8B4FE;
}

.svc-mini-pill--light {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: #1E293B;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .svc-mini-pill--light {
    background: #0F172A;
    border-color: rgba(255, 255, 255, 0.08);
    color: #E2E8F0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.svc-mini-pill--light .svc-mini-pill__icon {
    color: #0866F5;
}

[data-theme="dark"] .svc-mini-pill--light .svc-mini-pill__icon {
    color: #38BDF8;
}

/* Fallback estándar */
.svc-incluye__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    list-style: none;
    padding: 0;
}

.svc-incluye__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.svc-incluye__item svg {
    color: #10B981;
    flex-shrink: 0;
}

/* ── CALCULADORA Y CHECKLIST ── */
.calculadora,
.checklist-print {
    background: radial-gradient(circle at 50% 50%, rgba(8, 102, 245, 0.08) 0%, transparent 70%),
        var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
}

.calculadora__box,
.checklist-print__box {
    max-width: 680px;
    margin: 0 auto;
    padding: 38px 32px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.calculadora__label {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
    text-align: center;
}

.calculadora__label strong {
    color: var(--ts-brand, #0866F5);
    font-size: 1.5rem;
}

.calculadora__results {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.calculadora__result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    font-size: 0.93rem;
    color: var(--text-secondary);
}

.calculadora__result strong {
    font-size: 1.1rem;
    color: var(--text-primary);
}

.calculadora__result--highlight {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: #10B981;
}

.calculadora__result--highlight strong {
    color: #10B981;
    font-size: 1.3rem;
}

.calculadora__nota {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 24px;
}

/* ── PRECIOS TARJETAS ── */
.svc-precios__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.svc-precio-card {
    padding: 32px 26px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.25s, transform 0.25s;
}

.svc-precio-card:hover {
    border-color: var(--ts-brand, #0866F5);
    transform: translateY(-4px);
}

.svc-precio-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.svc-precio-card__precio {
    font-family: var(--ts-font-h, sans-serif);
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--ts-brand, #0866F5);
    margin-bottom: 12px;
}

.svc-precio-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

/* ── PROCESO PASOS ── */
.svc-proceso {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.svc-proceso__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
}

.svc-paso {
    padding: 28px 22px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
}

.svc-paso__num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--ts-brand, #0866F5);
    margin-bottom: 14px;
}

.svc-paso p {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.55;
}

/* ── FAQ B2B ── */
.svc-faq__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.svc-faq__item {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 20px 24px;
    transition: border-color 0.2s;
}

.svc-faq__item[open] {
    border-color: var(--ts-brand, #0866F5);
}

.svc-faq__item summary {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    list-style: none;
}

.svc-faq__item summary::-webkit-details-marker {
    display: none;
}

.svc-faq__item summary svg {
    transition: transform 0.3s;
    color: var(--ts-brand, #0866F5);
    flex-shrink: 0;
}

.svc-faq__item[open] summary svg {
    transform: rotate(180deg);
}

.svc-faq__item p {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border-subtle);
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

/* ── RELACIONADOS BANNER (ESTILO REFERENCIA DE 3 TARJETAS + TARJETA GRANDE CTA) ── */
.svc-relacionados {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
}

.svc-rel-banner {
    background: linear-gradient(135deg, #0284C7 0%, #1D4ED8 45%, #4F46E5 100%);
    border-radius: 24px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(29, 78, 216, 0.22);
    margin-top: 20px;
}

[data-theme="dark"] .svc-rel-banner {
    background: linear-gradient(135deg, #0369A1 0%, #1E40AF 45%, #3730A3 100%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.svc-rel-banner__glow-1 {
    position: absolute;
    top: -60px;
    left: -60px;
    width: 240px;
    height: 240px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    pointer-events: none;
    filter: blur(40px);
}

.svc-rel-banner__glow-2 {
    position: absolute;
    bottom: -80px;
    right: 30%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
    filter: blur(50px);
}

.svc-rel-banner__main {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 28px;
    align-items: stretch;
    position: relative;
    z-index: 2;
}

.svc-rel-banner__small-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.svc-rel-small-card {
    background: #FFFFFF;
    border-radius: 18px;
    padding: 22px 18px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.svc-rel-small-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.15);
}

.svc-rel-small-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    margin-bottom: 14px;
    box-shadow: 0 4px 12px rgba(8, 102, 245, 0.25);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.svc-rel-small-card:hover .svc-rel-small-card__icon,
.svc-rel-small-card__icon:hover {
    transform: scale(1.22);
    box-shadow: 0 8px 20px rgba(8, 102, 245, 0.4);
}

.svc-rel-small-card h3 {
    font-size: 0.94rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 8px;
    line-height: 1.3;
}

.svc-rel-small-card p {
    font-size: 0.8rem;
    color: #64748B;
    line-height: 1.45;
    margin-bottom: 14px;
    flex-grow: 1;
}

.svc-rel-small-card__link {
    font-size: 0.78rem;
    font-weight: 800;
    color: #2563EB;
    transition: transform 0.2s ease;
}

.svc-rel-small-card:hover .svc-rel-small-card__link {
    transform: translateX(4px);
}

/* TARJETA GRANDE DERECHA CON APUNTADOR DE GLOBO DE DIÁLOGO */
.svc-rel-banner__large-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 32px 28px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 1101px) {
    .svc-rel-banner__large-card::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -14px;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: 14px solid transparent;
        border-bottom: 14px solid transparent;
        border-right: 14px solid #FFFFFF;
    }
}

.svc-rel-banner__large-tag {
    font-size: 0.75rem;
    font-weight: 800;
    color: #2563EB;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    display: block;
}

.svc-rel-banner__large-title {
    font-size: 1.35rem;
    font-weight: 900;
    color: #0F172A;
    margin-bottom: 10px;
    line-height: 1.25;
}

.svc-rel-banner__large-desc {
    font-size: 0.86rem;
    color: #475569;
    line-height: 1.55;
    margin-bottom: 20px;
}

.svc-rel-banner__large-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #00C9FF 0%, #0072FF 100%);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.88rem;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 114, 255, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    align-self: flex-start;
}

.svc-rel-banner__large-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 114, 255, 0.5);
    color: #FFFFFF;
}

/* FOOTER INFERIOR DEL BANNER */
.svc-rel-banner__footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 2;
}

.svc-rel-banner__footer-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.82rem;
    font-weight: 600;
}

@media (max-width: 1100px) {
    .svc-rel-banner__main {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .svc-rel-banner {
        padding: 24px 18px;
        border-radius: 18px;
    }

    .svc-rel-banner__small-cards {
        grid-template-columns: 1fr;
    }

    .svc-rel-banner__footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ═══════════════════════════════════════════
   ASISTENTE VIRTUAL 3D FLOTANTE (Pop-up Scroll)
   ═══════════════════════════════════════════ */
.ts-assistant-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    font-family: var(--ts-font, sans-serif);
}

/* Botón Flotante */
.ts-assistant-toggle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #0866F5;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(8, 102, 245, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}

.ts-assistant-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 14px 34px rgba(8, 102, 245, 0.55);
}

.ts-assistant-toggle__avatar-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ts-assistant-toggle__avatar {
    width: 44px;
    height: 44px;
    object-fit: cover;
    object-position: top center;
}

.ts-assistant-toggle__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #EF4444;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
}

/* Tarjeta Modal del Asistente (Reducida 40% compacta y elegante) */
.ts-assistant-card {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 250px;
    max-width: calc(100vw - 24px);
    background: transparent;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(20px) scale(0.92);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
}

.ts-assistant-card.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

/* Botón Cerrar "X" */
.ts-assistant-card__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(8, 102, 245, 0.2);
    color: #0866F5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s, transform 0.2s;
}

.ts-assistant-card__close:hover {
    background: #0866F5;
    color: #ffffff;
    transform: rotate(90deg);
}

.ts-assistant-card__close svg {
    width: 13px;
    height: 13px;
}

/* Header con Personaje 3D Sobresaliente */
.ts-assistant-card__header {
    position: relative;
    height: 130px;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(180deg, #EBF3FF 0%, #D8E7FF 100%);
    overflow: visible !important;
}

[data-theme="dark"] .ts-assistant-card__header {
    background: linear-gradient(180deg, #12213F 0%, #0C172E 100%);
}

.ts-assistant-card__aura {
    position: absolute;
    top: 5px;
    left: 10%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(8, 102, 245, 0.35) 0%, transparent 70%);
    filter: blur(10px);
    pointer-events: none;
}

/* Personaje 3D Sobresaliente */
.ts-assistant-card__avatar-popout {
    position: absolute;
    top: -36px;
    left: -8px;
    height: 180px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(8, 102, 245, 0.25));
    image-rendering: -webkit-optimize-contrast;
    z-index: 5;
    pointer-events: none;
}

/* Globo de texto "Hola, soy el asistente..." */
.ts-assistant-card__speech-bubble {
    position: absolute;
    top: 14px;
    right: 8px;
    width: 148px;
    background: #ffffff;
    border-radius: 12px;
    padding: 6px 8px;
    box-shadow: 0 6px 18px rgba(8, 102, 245, 0.18);
    z-index: 6;
    border: 1px solid rgba(8, 102, 245, 0.15);
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.ts-assistant-card__speech-bubble::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.ts-assistant-card__speech-bubble::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 5px 7px 5px 0;
    border-style: solid;
    border-color: transparent #ffffff transparent transparent;
}

[data-theme="dark"] .ts-assistant-card__speech-bubble {
    background: #101F3A;
    border-color: rgba(100, 165, 245, 0.3);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .ts-assistant-card__speech-bubble::before {
    border-color: transparent #101F3A transparent transparent;
}

.ts-assistant-card__speech-bubble p {
    margin: 0;
    font-size: 0.60rem;
    line-height: 1.22;
    color: #101B34;
    word-break: break-word;
}

[data-theme="dark"] .ts-assistant-card__speech-bubble p {
    color: #F0F4FF;
}

.ts-assistant-card__speech-bubble strong {
    color: #0866F5;
    display: block;
}

/* Badge En línea */
.ts-assistant-card__status-tag {
    position: absolute;
    bottom: 6px;
    left: 8px;
    max-width: 135px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10B981;
    font-size: 0.64rem;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    z-index: 7;
}

[data-theme="dark"] .ts-assistant-card__status-tag {
    background: #091D2A;
    border-color: rgba(16, 185, 129, 0.4);
}

.ts-online-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 6px #10B981;
}

/* Cuerpo Blanco Elegante */
.ts-assistant-card__body {
    position: relative;
    z-index: 7;
    margin-top: -10px;
    background: #ffffff;
    border-radius: 20px;
    padding: 14px 12px;
    box-shadow: 0 14px 35px rgba(13, 38, 76, 0.18);
    border: 1px solid rgba(8, 102, 245, 0.14);
}

[data-theme="dark"] .ts-assistant-card__body {
    background: #0B1325;
    border-color: rgba(100, 165, 245, 0.2);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.65);
}

.ts-assistant-subnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(8, 102, 245, 0.12);
}

.ts-assistant-subnav__btn {
    background: transparent;
    border: none;
    color: #0866F5;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.ts-assistant-subnav__btn:hover {
    background: rgba(8, 102, 245, 0.08);
}

.ts-assistant-subnav__btn svg {
    width: 12px;
    height: 12px;
}

.ts-assistant-card__headline {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--ts-text, #101B34);
    text-align: center;
    margin-bottom: 10px;
}

[data-theme="dark"] .ts-assistant-card__headline {
    color: #F0F4FF;
}

.ts-assistant-card__menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ts-assistant-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #F5F8FE;
    border: 1px solid rgba(8, 102, 245, 0.1);
    text-decoration: none;
    color: var(--ts-text, #101B34);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    width: 100%;
    text-align: left;
}

[data-theme="dark"] .ts-assistant-option {
    background: rgba(18, 30, 56, 0.7);
    border-color: rgba(100, 165, 245, 0.15);
    color: #F0F4FF;
}

.ts-assistant-option:hover {
    background: #0866F5;
    color: #ffffff;
    border-color: #0866F5;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(8, 102, 245, 0.3);
}

.ts-assistant-option__icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: rgba(8, 102, 245, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0866F5;
    flex-shrink: 0;
    transition: background-color 0.25s, color 0.25s;
}

.ts-assistant-option:hover .ts-assistant-option__icon {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.ts-assistant-option__icon svg {
    width: 18px;
    height: 18px;
}

.ts-assistant-option__label {
    flex-grow: 1;
}

.ts-assistant-option__arrow {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ts-text-3, #667085);
    transition: color 0.25s, transform 0.25s;
}

.ts-assistant-option:hover .ts-assistant-option__arrow {
    color: #ffffff;
    transform: translateX(4px);
}

/* Formulario Pregúntame Algo */
.ts-assistant-ask-form {
    margin-top: 12px;
}

.ts-assistant-ask-form__input-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 14px;
    border-radius: 14px;
    background: #F5F8FE;
    border: 1px solid #0866F5;
}

[data-theme="dark"] .ts-assistant-ask-form__input-box {
    background: rgba(18, 30, 56, 0.9);
}

.ts-assistant-ask-form input {
    flex-grow: 1;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    color: var(--ts-text, #101B34);
    outline: none;
}

[data-theme="dark"] .ts-assistant-ask-form input {
    color: #ffffff;
}

.ts-assistant-ask-form__send {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #0866F5;
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.ts-assistant-ask-form__send:hover {
    background: #0044BB;
}

.ts-assistant-ask-form__send svg {
    width: 16px;
    height: 16px;
}

/* Footer Card */
.ts-assistant-card__footer {
    padding: 10px 20px;
    background: rgba(8, 102, 245, 0.05);
    border-top: 1px solid rgba(8, 102, 245, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ts-text-3, #667085);
}

.ts-assistant-card__footer-chat-icon svg {
    width: 16px;
    height: 16px;
    color: #0866F5;
}

.ts-assistant-card__footer-text {
    font-weight: 700;
}

/* ═══ CAPA 1.5: ATENCIÓN INMEDIATA & RECOMENDACIÓN FINAL ═══ */
.ts-assistant-urgent-bar {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(8, 102, 245, 0.15);
}

.ts-assistant-urgent-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%);
    color: #ffffff !important;
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.ts-assistant-urgent-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.5);
}

.ts-urgent-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: tsUrgentPulse 1.6s infinite;
}

@keyframes tsUrgentPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* Tarjeta de Recomendación Final Capa 1.5 */
.ts-assistant-result-card {
    padding: 12px;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1px solid rgba(8, 102, 245, 0.15);
    margin-top: 8px;
    font-size: 0.76rem;
}

[data-theme="dark"] .ts-assistant-result-card {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(100, 165, 245, 0.2);
}

.ts-result-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ts-result-badge--CRITICA {
    background: #FEE2E2;
    color: #991B1B;
}

.ts-result-badge--ALTA {
    background: #FFEDD5;
    color: #9A3412;
}

.ts-result-badge--MEDIA {
    background: #FEF3C7;
    color: #92400E;
}

.ts-result-badge--BAJA {
    background: #DCFCE7;
    color: #166534;
}

[data-theme="dark"] .ts-result-badge--CRITICA {
    background: rgba(239, 68, 68, 0.25);
    color: #FCA5A5;
}

[data-theme="dark"] .ts-result-badge--ALTA {
    background: rgba(249, 115, 22, 0.25);
    color: #FDBA74;
}

[data-theme="dark"] .ts-result-badge--MEDIA {
    background: rgba(245, 158, 11, 0.25);
    color: #FDE047;
}

[data-theme="dark"] .ts-result-badge--BAJA {
    background: rgba(34, 197, 94, 0.25);
    color: #86EFAC;
}


/* ═══════════════════════════════════════════
   LANDING PAGES HOGAR SERVICIOS (/hogar/{slug})
   ═══════════════════════════════════════════ */
.hgl-hero {
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 24px 60px;
    box-sizing: border-box;
    background: radial-gradient(circle at 80% 20%, rgba(8, 102, 245, 0.12) 0%, transparent 60%),
        radial-gradient(circle at 10% 80%, rgba(0, 200, 255, 0.08) 0%, transparent 50%),
        var(--ts-bg-alt, var(--bg-surface, #0b0f19));
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
    overflow: hidden;
}

.hgl-hero__inner {
    width: 100%;
    max-width: var(--ts-container, 1360px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

@media (max-width: 991px) {
    .hgl-hero {
        min-height: auto;
        padding-top: 100px;
        padding-bottom: 60px;
    }

    .hgl-hero__inner {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
    }

    .hgl-hero__actions {
        justify-content: center;
    }

    .hgl-hero__precio {
        margin-left: auto;
        margin-right: auto;
    }
}

.hgl-hero__tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(8, 102, 245, 0.12);
    border: 1px solid rgba(8, 102, 245, 0.25);
    color: var(--ts-brand, #0866F5);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.hgl-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.18;
    color: var(--text-primary);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.hgl-hero__sub {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 26px;
}

.hgl-hero__actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.hgl-hero__precio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    width: fit-content;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.hgl-hero__precio-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.hgl-hero__precio-valor {
    font-family: var(--ts-font-h, sans-serif);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ts-brand, #0866F5);
}

.hgl-hero__precio-nota {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.hgl-hero__visual {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: 340px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hgl-hero__visual--img {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 420px !important;
    margin: 0 !important;
}

.hgl-hero__ring {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 2px dashed rgba(8, 102, 245, 0.25);
    animation: hglRotate 35s linear infinite;
}

@keyframes hglRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.hgl-hero__core {
    width: 110px;
    height: 110px;
    border-radius: 24px;
    background: linear-gradient(135deg, #0866F5, #0044BB);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 40px rgba(8, 102, 245, 0.4);
    z-index: 2;
}

.hgl-hero__core svg {
    width: 52px;
    height: 52px;
    stroke: #ffffff;
    stroke-width: 1.8;
}

.hgl-hero__chip {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.hgl-hero__chip svg {
    width: 22px;
    height: 22px;
    stroke: var(--ts-brand, #0866F5);
}

.hgl-hero__chip--1 {
    top: 30px;
    left: 15px;
}

.hgl-hero__chip--2 {
    top: 40px;
    right: 15px;
}

.hgl-hero__chip--3 {
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

/* ── PROBLEMA ── */
.hgl-problema {
    padding: 60px 24px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
}

.hgl-problema__inner {
    max-width: var(--ts-container, 1360px);
    margin: 0 auto;
    max-width: 860px;
    text-align: center;
}

.hgl-problema__titulo {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.hgl-problema p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ── QUÉ INCLUYE ── */
.hgl-incluye {
    padding: 70px 24px;
}

.hgl-incluye__inner {
    max-width: var(--ts-container, 1360px);
    margin: 0 auto;
}

.hgl-incluye__head {
    text-align: center;
    margin-bottom: 44px;
}

.hgl-incluye__head h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--text-primary);
}

.hgl-incluye__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    list-style: none;
    padding: 0;
    max-width: 1240px;
    margin: 0 auto;
}

.hgl-incluye__lista li {
    flex: 1 1 340px;
    max-width: 380px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    background: var(--bg-card, rgba(255, 255, 255, 0.8));
    border: 1px solid var(--border-subtle, rgba(8, 102, 245, 0.15));
    border-radius: 16px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hgl-incluye__lista li:hover {
    border-color: transparent;
}

.hgl-incluye__lista li svg {
    width: 28px;
    height: 28px;
    stroke: var(--ts-brand, #0866F5);
    flex-shrink: 0;
}

/* ── PROCESO ── */
.hgl-proceso {
    padding: 70px 24px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.hgl-proceso__inner {
    max-width: var(--ts-container, 1360px);
    margin: 0 auto;
}

.hgl-proceso__head {
    text-align: center;
    margin-bottom: 48px;
}

.hgl-proceso__head h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-top: 8px;
}

.hgl-proceso__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.hgl-paso {
    padding: 32px 26px;
    background: var(--bg-card);
    border: 2px solid var(--blue, #0866F5);
    box-shadow: 0 6px 20px rgba(8, 102, 245, 0.12);
    border-radius: 16px;
    position: relative;
}

.hgl-paso__num {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(8, 102, 245, 0.12);
    color: var(--ts-brand, #0866F5);
    font-weight: 800;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.hgl-paso h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.hgl-paso p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ── FAQ LANDING ── */
.hgl-faq {
    padding: 70px 24px;
}

.hgl-faq__inner {
    max-width: var(--ts-container, 1360px);
    margin: 0 auto;
    max-width: 900px;
}

.hgl-faq__head {
    text-align: center;
    margin-bottom: 44px;
}

.hgl-faq__head h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-top: 8px;
}

.hgl-faq__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hgl-faq__item {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 20px 24px;
    transition: border-color 0.2s;
}

.hgl-faq__item[open] {
    border-color: var(--ts-brand, #0866F5);
}

.hgl-faq__item summary {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    list-style: none;
}

.hgl-faq__item summary::-webkit-details-marker {
    display: none;
}

.hgl-faq__item summary svg {
    transition: transform 0.3s;
    color: var(--ts-brand, #0866F5);
    flex-shrink: 0;
}

.hgl-faq__item[open] summary svg {
    transform: rotate(180deg);
}

.hgl-faq__item p {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border-subtle);
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

/* ── CTA FINAL ── */
.hgl-cta {
    padding: 80px 24px;
    background: linear-gradient(135deg, rgba(8, 102, 245, 0.15) 0%, rgba(0, 0, 0, 0) 100%),
        var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    text-align: center;
}

.hgl-cta__inner {
    max-width: 640px;
    margin: 0 auto;
}

.hgl-cta h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 14px;
}

.hgl-cta p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.hgl-cta .ts-btn {
    display: inline-flex;
}

/* ── LISTA DE PROBLEMAS VERTICAL CON SPINNERS ── */
.problem-list {
    list-style: none;
    padding: 0;
    margin: 32px auto 0;
    max-width: 860px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    /* Separación ampliada como si dieras enter */
    text-align: left;
}

@media (max-width: 767px) {
    .problem-list {
        grid-template-columns: 1fr;
    }
}

.problem-list__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm, 10px);
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
    transition: border-color 0.25s, transform 0.25s;
}

.problem-list__item:hover {
    border-color: var(--blue-mid);
    transform: translateY(-2px);
}

.ts-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(8, 102, 245, 0.15);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: ts-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes ts-spin {
    to {
        transform: rotate(360deg);
    }
}

.problem-list__text {
    font-weight: 500;
    flex-grow: 1;
}

/* ── ANIMACIÓN DE SACUDIDA (SHAKE) AL ENTRAR EN PANTALLA ── */
.hgl-paso.sr {
    transition: opacity 0.6s ease !important;
}

.hgl-paso.is-visible {
    opacity: 1 !important;
    transition: opacity 0.6s ease !important;
    animation: hgl-shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.hgl-paso.sr-d1.is-visible {
    animation-delay: 0.1s;
}

.hgl-paso.sr-d2.is-visible {
    animation-delay: 0.25s;
}

.hgl-paso.sr-d3.is-visible {
    animation-delay: 0.4s;
}

@keyframes hgl-shake {
    0% {
        opacity: 0;
        transform: translateY(36px) scale(0.95);
    }

    15% {
        opacity: 1;
        transform: translateY(0) translateX(-6px) rotate(-1.5deg);
    }

    30% {
        transform: translateX(5px) rotate(1.2deg);
    }

    45% {
        transform: translateX(-4px) rotate(-0.8deg);
    }

    60% {
        transform: translateX(2px) rotate(0.4deg);
    }

    75% {
        transform: translateX(-1px) rotate(-0.2deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
}

/* ── HOVER CON FONDO DE TESTIMONIOS (NETWORK BG) Y CONTORNO AZUL ── */
.hgl-paso {
    border: 2px solid var(--blue, #0866F5) !important;
    box-shadow: 0 6px 20px rgba(8, 102, 245, 0.12) !important;
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.hgl-paso:hover {
    background-image: linear-gradient(rgba(11, 22, 56, 0.75), rgba(11, 22, 56, 0.75)), url('../img/network-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    border-color: var(--blue, #0866F5) !important;
    box-shadow: 0 16px 34px rgba(8, 102, 245, 0.35) !important;
    transform: translateY(-8px) scale(1.02);
    animation: hgl-shake-hover 0.5s ease-in-out both;
}

.hgl-paso:hover h3,
.hgl-paso:hover p {
    color: #ffffff !important;
}

@keyframes hgl-shake-hover {
    0% {
        transform: translateY(-8px) scale(1.02);
    }

    15% {
        transform: translateY(-8px) scale(1.02) translateX(-4px) rotate(-1deg);
    }

    30% {
        transform: translateY(-8px) scale(1.02) translateX(3px) rotate(1deg);
    }

    45% {
        transform: translateY(-8px) scale(1.02) translateX(-3px) rotate(-0.5deg);
    }

    60% {
        transform: translateY(-8px) scale(1.02) translateX(2px) rotate(0.5deg);
    }

    75% {
        transform: translateY(-8px) scale(1.02) translateX(-1px) rotate(-0.2deg);
    }

    100% {
        transform: translateY(-8px) scale(1.02) translateX(0);
    }
}

/* ── CLASE UTILITARIA RESPONSIVA DE TABLAS ── */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

.table-responsive table {
    width: 100%;
    min-width: 540px;
}

/* ── ACCESIBILIDAD TÁCTIL (FAT FINGER RULE < 768px) ── */
@media (max-width: 768px) {

    .em-quiz-q__opcion,
    .svc-faq__item summary,
    .ts-btn {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
    }
}

/* ── OPTIMIZACIÓN DE PADDINGS EN BENTO GRIDS (< 640px) ── */
@media (max-width: 640px) {

    .plan-card,
    .svc-card,
    .em-plan,
    .calculadora__box {
        padding: 20px 16px !important;
    }
}

/* ═══════════════════════════════════════════
   PÁGINA NOSOTROS — AWWWARDS EDITORIAL REDESIGN
   ═══════════════════════════════════════════ */

/* Utilidad Contenedor & Tags */
.ns-container {
    width: min(calc(100% - 48px), 1200px);
    margin: 0 auto;
}

.ns-tag {
    font-family: var(--ts-font-h, sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ts-brand, #0866F5);
    background: rgba(8, 102, 245, 0.1);
    border: 1px solid rgba(8, 102, 245, 0.22);
    padding: 6px 16px;
    border-radius: 999px;
    display: inline-block;
    margin-bottom: 20px;
}

.ns-section-head.text-center {
    text-align: center;
}

.ns-section-title {
    font-family: var(--ts-font-h, sans-serif);
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--ts-text, #ffffff);
    margin: 0 0 12px;
}

[data-theme="light"] .ns-section-title {
    color: #0F172A;
}

/* 1. HERO INMERSIVO Y TIPOGRÁFICO */
.ns-hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 140px 24px 80px;
    background: var(--ts-bg, #0b0f19);
}

.ns-hero__bg-mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(8, 102, 245, 0.18) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(0, 200, 255, 0.08) 0%, transparent 60%);
    filter: blur(40px);
    animation: nsMeshPulse 12s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes nsMeshPulse {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.1) rotate(3deg);
        opacity: 1;
    }
}

.ns-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

.ns-hero h1 {
    font-family: var(--ts-font-h, sans-serif);
    font-size: clamp(3rem, 6vw, 5rem);
    letter-spacing: -0.03em;
    font-weight: 900;
    line-height: 1.05;
    color: var(--ts-text, #ffffff);
    margin-bottom: 24px;
}

[data-theme="light"] .ns-hero h1 {
    color: #0F172A;
}

.ns-gradient-text {
    background-image: linear-gradient(135deg, var(--ts-brand, #0866F5), #8B5CF6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.ns-hero__sub {
    font-family: var(--ts-font, sans-serif);
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    color: var(--ts-text-2, #94A3B8);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.65;
}

[data-theme="light"] .ns-hero__sub {
    color: #475569;
}

/* 2. MISIÓN Y VISIÓN (BENTO GRID ASIMÉTRICO) */
.ns-bento-section {
    padding: 100px 0;
    background: var(--ts-bg, #0b0f19);
    position: relative;
}

.ns-bento-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
}

.ns-bento-card {
    position: relative;
    border-radius: 28px;
    padding: 42px 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    box-sizing: border-box;
}

/* Light Theme Card Styling */
[data-theme="light"] .ns-bento-card {
    background: #FFFFFF;
    border: 1.5px solid rgba(8, 102, 245, 0.14);
    box-shadow: 0 14px 38px rgba(15, 35, 70, 0.06);
}

[data-theme="light"] .ns-bento-card--mision {
    border-top: 4px solid #0866F5;
}

[data-theme="light"] .ns-bento-card--vision {
    border-top: 4px solid #8B5CF6;
}

/* Dark Theme Card Styling */
[data-theme="dark"] .ns-bento-card {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .ns-bento-card--mision {
    border-top: 4px solid #0866F5;
}

[data-theme="dark"] .ns-bento-card--vision {
    border-top: 4px solid #A855F7;
}

/* Ambient Radial Glow in background */
.ns-bento-card__glow {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.5s ease;
    opacity: 0.6;
}

.ns-bento-card--mision .ns-bento-card__glow {
    background: radial-gradient(circle, rgba(8, 102, 245, 0.16) 0%, rgba(56, 189, 248, 0) 70%);
}

.ns-bento-card--vision .ns-bento-card__glow {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.18) 0%, rgba(168, 85, 247, 0) 70%);
}

.ns-bento-card:hover .ns-bento-card__glow {
    opacity: 1;
}

.ns-bento-card:hover {
    transform: translateY(-8px);
}

[data-theme="light"] .ns-bento-card--mision:hover {
    border-color: #0866F5;
    box-shadow: 0 22px 50px rgba(8, 102, 245, 0.18);
}

[data-theme="light"] .ns-bento-card--vision:hover {
    border-color: #8B5CF6;
    box-shadow: 0 22px 50px rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] .ns-bento-card--mision:hover {
    border-color: rgba(8, 102, 245, 0.5);
    box-shadow: 0 25px 60px rgba(8, 102, 245, 0.25);
}

[data-theme="dark"] .ns-bento-card--vision:hover {
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 25px 60px rgba(168, 85, 247, 0.28);
}

/* Card Top Section (Icon + Label) */
.ns-bento-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.ns-bento-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s ease;
}

.ns-bento-card:hover .ns-bento-card__icon {
    transform: scale(1.08) rotate(-4deg);
}

.ns-bento-card__icon--blue {
    background: rgba(8, 102, 245, 0.12);
    border: 1px solid rgba(8, 102, 245, 0.25);
    color: #0866F5;
    box-shadow: 0 8px 20px rgba(8, 102, 245, 0.15);
}

.ns-bento-card__icon--purple {
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.25);
    color: #8B5CF6;
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.15);
}

.ns-bento-card__label {
    font-family: var(--ts-font-h);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 99px;
}

.ns-bento-card__label--blue {
    background: rgba(8, 102, 245, 0.12);
    color: #0866F5;
    border: 1px solid rgba(8, 102, 245, 0.25);
}

.ns-bento-card__label--purple {
    background: rgba(139, 92, 246, 0.12);
    color: #8B5CF6;
    border: 1px solid rgba(139, 92, 246, 0.25);
}

.ns-bento-card h3 {
    font-family: var(--ts-font-h);
    font-size: clamp(20px, 2.2vw, 25px);
    font-weight: 800;
    margin: 0 0 14px;
    line-height: 1.25;
    position: relative;
    z-index: 1;
}

[data-theme="light"] .ns-bento-card h3 {
    color: #0F172A;
}

[data-theme="dark"] .ns-bento-card h3 {
    color: #F8FAFC;
}

.ns-bento-card p {
    font-family: var(--ts-font);
    font-size: 14.5px;
    line-height: 1.7;
    margin: 0 0 28px;
    position: relative;
    z-index: 1;
}

[data-theme="light"] .ns-bento-card p {
    color: #475569;
}

[data-theme="dark"] .ns-bento-card p {
    color: #CBD5E1;
}

/* Micro Pillars / Chips inside Bento Cards */
.ns-bento-card__pillars {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    position: relative;
    z-index: 1;
}

.ns-pillar-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--ts-font);
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 99px;
    background: rgba(8, 102, 245, 0.08);
    color: #0866F5;
    border: 1px solid rgba(8, 102, 245, 0.18);
    transition: all 0.25s ease;
}

[data-theme="dark"] .ns-pillar-chip {
    background: rgba(8, 102, 245, 0.18);
    color: #60A5FA;
    border-color: rgba(96, 165, 250, 0.25);
}

.ns-pillar-chip--purple {
    background: rgba(139, 92, 246, 0.08);
    color: #8B5CF6;
    border-color: rgba(139, 92, 246, 0.18);
}

[data-theme="dark"] .ns-pillar-chip--purple {
    background: rgba(139, 92, 246, 0.18);
    color: #C084FC;
    border-color: rgba(192, 132, 252, 0.25);
}

.ns-pillar-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(8, 102, 245, 0.2);
}

.ns-pillar-chip--purple:hover {
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

/* 3. POR QUÉ ELEGIRNOS (STICKY SCROLL EXPERIENCE CON ILUMINACIÓN DE FOCO DISCRETA Y ELEGANTE) */
.ns-sticky-wrapper {
    padding: 60px 24px 120px;
    background: var(--ts-bg, #0b0f19);
    position: relative;
}

.ns-sticky-section {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 64px;
    max-width: 1200px;
    margin: 40px auto;
    align-items: start;
}

.ns-sticky-left {
    position: sticky;
    top: 120px;
    padding-right: 20px;
}

.ns-sticky-desc {
    font-family: var(--ts-font);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ts-text-2, #94A3B8);
    margin-top: 18px;
    margin-bottom: 32px;
}

[data-theme="light"] .ns-sticky-desc {
    color: #475569;
}

.ns-sticky-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    background: linear-gradient(135deg, rgba(8, 102, 245, 0.1), rgba(139, 92, 246, 0.08));
    border: 1.5px solid rgba(8, 102, 245, 0.25);
    border-radius: 99px;
    font-family: var(--ts-font-h);
    font-size: 0.92rem;
    font-weight: 800;
    color: #0866F5;
    box-shadow: 0 8px 24px rgba(8, 102, 245, 0.12);
    transition: all 0.35s ease;
}

.ns-sticky-badge:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: #0866F5;
    box-shadow: 0 12px 30px rgba(8, 102, 245, 0.22);
}

.ns-sticky-badge__icon {
    font-size: 1.2rem;
    line-height: 1;
}

.ns-sticky-right {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.ns-diferenciador {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    padding: 38px 36px;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(40px) scale(0.97);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease, border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
    box-sizing: border-box;
}

[data-theme="light"] .ns-diferenciador {
    background: #FFFFFF;
    border: 1.5px solid rgba(8, 102, 245, 0.12);
    box-shadow: 0 10px 30px rgba(15, 35, 70, 0.04);
}

[data-theme="dark"] .ns-diferenciador {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
}

/* Ambient Inner Glow */
.ns-diferenciador__glow {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(8, 102, 245, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.4s ease;
    opacity: 0.4;
}

.ns-diferenciador.is-visible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* SPOTLIGHT ACTIVE CARD IN SCROLL VIEW */
.ns-diferenciador.is-active-spotlight,
.ns-diferenciador:hover {
    transform: translateY(-6px) scale(1.02) !important;
}

[data-theme="light"] .ns-diferenciador.is-active-spotlight,
[data-theme="light"] .ns-diferenciador:hover {
    border-color: #0866F5;
    box-shadow: 0 20px 48px rgba(8, 102, 245, 0.18);
    background: linear-gradient(135deg, #FFFFFF 0%, rgba(240, 246, 255, 0.8) 100%);
}

[data-theme="dark"] .ns-diferenciador.is-active-spotlight,
[data-theme="dark"] .ns-diferenciador:hover {
    border-color: rgba(8, 102, 245, 0.5);
    box-shadow: 0 24px 60px rgba(8, 102, 245, 0.25);
}

.ns-diferenciador.is-active-spotlight .ns-diferenciador__glow,
.ns-diferenciador:hover .ns-diferenciador__glow {
    opacity: 1;
}

.ns-diferenciador__num {
    font-family: var(--ts-font-h);
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1;
    color: #0866F5;
    opacity: 0.35;
    flex-shrink: 0;
    min-width: 52px;
    transition: opacity 0.35s ease, transform 0.35s ease;
    position: relative;
    z-index: 1;
}

.ns-diferenciador.is-active-spotlight .ns-diferenciador__num,
.ns-diferenciador:hover .ns-diferenciador__num {
    opacity: 1;
    transform: scale(1.1);
}

.ns-diferenciador__content {
    position: relative;
    z-index: 1;
}

.ns-diferenciador__content h4 {
    font-family: var(--ts-font-h);
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 10px;
    line-height: 1.3;
}

[data-theme="light"] .ns-diferenciador__content h4 {
    color: #0F172A;
}

[data-theme="dark"] .ns-diferenciador__content h4 {
    color: #F8FAFC;
}

.ns-diferenciador__content p {
    font-family: var(--ts-font);
    font-size: 0.98rem;
    line-height: 1.68;
    margin: 0;
}

[data-theme="light"] .ns-diferenciador__content p {
    color: #475569;
}

[data-theme="dark"] .ns-diferenciador__content p {
    color: #CBD5E1;
}

/* 4. VALORES QUE NOS DEFINEN (INTERACCIONES FLUIDAS) */
/* 4. LO QUE HAY DETRÁS DE CADA SOLUCIÓN (MATRIX DE CAPACIDADES CLAVE ULTRA-PRO) */
.ns-valores-section {
    padding: 110px 0;
    background: var(--ts-bg, #0b0f19);
    position: relative;
    overflow: hidden;
}

.ns-tag--live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ns-tag__led {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 10px #10B981;
    animation: nsLedBlink 1.8s infinite ease-in-out;
}

@keyframes nsLedBlink {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.3;
        transform: scale(0.8);
    }
}

.ns-valores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
}

.ns-valor-card {
    padding: 38px 32px;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

[data-theme="light"] .ns-valor-card {
    background: #FFFFFF;
    border: 1.5px solid rgba(8, 102, 245, 0.12);
    box-shadow: 0 12px 34px rgba(15, 35, 70, 0.04);
}

[data-theme="dark"] .ns-valor-card {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
}

.ns-valor-card.is-visible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* Neon Top Accent Bar */
.ns-valor-card__top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #0866F5, #8B5CF6, transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ns-valor-card:hover .ns-valor-card__top-bar {
    opacity: 1;
}

/* Ambient Radial Glow */
.ns-valor-card__glow {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(8, 102, 245, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.4s ease;
    opacity: 0.3;
}

.ns-valor-card:hover .ns-valor-card__glow {
    opacity: 1;
}

.ns-valor-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
}

[data-theme="light"] .ns-valor-card:hover {
    border-color: #0866F5;
    box-shadow: 0 22px 50px rgba(8, 102, 245, 0.18);
}

[data-theme="dark"] .ns-valor-card:hover {
    border-color: rgba(8, 102, 245, 0.45);
    box-shadow: 0 25px 60px rgba(8, 102, 245, 0.25);
}

.ns-valor-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.ns-valor-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(8, 102, 245, 0.1);
    border: 1.5px solid rgba(8, 102, 245, 0.25);
    color: #0866F5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease, background 0.4s ease, border-color 0.4s ease;
}

.ns-valor-card:hover .ns-valor-card__icon {
    transform: scale(1.12) rotate(4deg);
    background: #0866F5;
    color: #FFFFFF;
    border-color: #0866F5;
    box-shadow: 0 8px 24px rgba(8, 102, 245, 0.35);
}

.ns-valor-card:hover .ns-valor-card__icon svg {
    stroke: #FFFFFF !important;
}

[data-theme="dark"] .ns-valor-card__icon {
    color: #38BDF8 !important;
    border-color: rgba(56, 189, 248, 0.25);
    background: rgba(56, 189, 248, 0.1);
}

[data-theme="dark"] .ns-valor-card__icon svg {
    stroke: #38BDF8 !important;
}

.ns-valor-card__num {
    font-family: var(--ts-font-h);
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    color: #0866F5;
    opacity: 0.3;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.ns-valor-card:hover .ns-valor-card__num {
    opacity: 1;
    transform: scale(1.15);
}

.ns-valor-card h4 {
    font-family: var(--ts-font-h);
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 0 12px;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

[data-theme="light"] .ns-valor-card h4 {
    color: #0F172A;
}

[data-theme="dark"] .ns-valor-card h4 {
    color: #F8FAFC;
}

.ns-valor-card p {
    font-family: var(--ts-font);
    font-size: 0.95rem;
    line-height: 1.68;
    margin: 0;
    position: relative;
    z-index: 1;
}

[data-theme="light"] .ns-valor-card p {
    color: #475569;
}

[data-theme="dark"] .ns-valor-card p {
    color: #CBD5E1;
}

/* REGLA INQUEBRANTABLE PARA ACCESIBILIDAD SR-ONLY (INVISIBLE EN TODOS LOS TEMAS) */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    color: transparent !important;
    background: transparent !important;
}

/* ── SECTION: PARTICLE TEXT BREAKER (TRANSICIÓN DE MARCA CANVAS INTERACTIVA) ── */
.ns-particle-breaker {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 520px;
    max-height: 680px;
    background-color: #0B132B;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(8, 102, 245, 0.2);
    border-bottom: 1px solid rgba(8, 102, 245, 0.2);
}

.ns-particle-breaker canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
}

.ns-particle-breaker__hint {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
    user-select: none;
}

.ns-particle-breaker__hint span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(8, 102, 245, 0.12);
    border: 1px solid rgba(8, 102, 245, 0.3);
    color: #38BDF8;
    font-family: var(--ts-font, sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    animation: nsHintPulse 3s ease-in-out infinite alternate;
}

@keyframes nsHintPulse {
    0% {
        opacity: 0.7;
        transform: translateY(0);
    }

    100% {
        opacity: 1;
        transform: translateY(-4px);
    }
}

@media (max-width: 768px) {
    .ns-particle-breaker {
        height: 38vh;
        min-height: 260px;
        max-height: 340px;
    }

    .ns-particle-breaker__hint {
        bottom: 14px;
    }

    .ns-particle-breaker__hint span {
        font-size: 10px;
        padding: 5px 12px;
    }
}

/* RESPONSIVE DESIGN NOSOTROS */
@media (max-width: 991px) {
    .ns-bento-grid {
        grid-template-columns: 1fr;
    }

    .ns-sticky-section {
        grid-template-columns: 1fr;
        gap: 36px;
        margin: 40px auto;
    }

    .ns-sticky-left {
        position: relative;
        top: 0;
        padding-right: 0;
        text-align: center;
    }

    .ns-sticky-badge {
        justify-content: center;
        max-width: 380px;
        margin: 0 auto;
    }

    .ns-valores-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .ns-hero {
        min-height: 65vh;
        padding: 110px 16px 50px;
    }

    .ns-bento-card {
        padding: 28px 20px;
        border-radius: 24px;
    }

    .ns-diferenciador {
        padding: 24px 20px;
        gap: 16px;
        border-radius: 20px;
    }

    .ns-valores-grid {
        grid-template-columns: 1fr;
    }

    .ns-valor-card {
        padding: 28px 20px;
        border-radius: 20px;
    }
}

/* ── 1. CANVA DE PARTÍCULAS HERO ── */
.ns-hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ── 2. SECCIÓN CRONOLOGÍA (TIMELINE INTERACTIVO) ── */
.ns-timeline-section {
    padding: 100px 0;
    background: var(--ts-bg, #0b0f19);
    position: relative;
    overflow: hidden;
}

.ns-timeline {
    position: relative;
    max-width: 1000px;
    margin: 48px auto 0;
    padding: 20px 0;
}

.ns-timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: rgba(8, 102, 245, 0.12);
    transform: translateX(-50%);
    border-radius: 3px;
    overflow: hidden;
}

[data-theme="light"] .ns-timeline-line {
    background: rgba(8, 102, 245, 0.12);
}

.ns-timeline-line-progress {
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, #0866F5 0%, #3B82F6 50%, #8B5CF6 100%);
    transition: height 0.1s linear;
    border-radius: 3px;
    box-shadow: 0 0 16px rgba(8, 102, 245, 0.7);
}

.ns-timeline-items {
    display: flex;
    flex-direction: column;
    gap: 44px;
    position: relative;
    z-index: 2;
}

.ns-timeline-item {
    display: flex;
    align-items: center;
    width: 50%;
    position: relative;
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.ns-timeline-item--left {
    justify-content: flex-end;
    padding-right: 48px;
    align-self: flex-start;
    margin-left: 0;
    transform: translateX(-45px) scale(0.96);
}

.ns-timeline-item--right {
    justify-content: flex-start;
    padding-left: 48px;
    margin-left: 50%;
    transform: translateX(45px) scale(0.96);
}

.ns-timeline-item.is-visible {
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
}

/* Pulsating Dot Nodes */
.ns-timeline-dot {
    position: absolute;
    top: 36px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0866F5;
    border: 3px solid #FFFFFF;
    box-shadow: 0 0 16px rgba(8, 102, 245, 0.6);
    z-index: 3;
    transition: transform 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}

[data-theme="dark"] .ns-timeline-dot {
    border-color: #0B0F19;
}

.ns-timeline-item--left .ns-timeline-dot {
    right: -10px;
}

.ns-timeline-item--right .ns-timeline-dot {
    left: -10px;
}

.ns-timeline-dot__pulse {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(8, 102, 245, 0.5);
    animation: nsDotPulse 2.4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    pointer-events: none;
}

@keyframes nsDotPulse {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

.ns-timeline-item:hover .ns-timeline-dot {
    transform: scale(1.35);
    background: #8B5CF6;
    box-shadow: 0 0 24px rgba(139, 92, 246, 0.85);
}

/* Timeline Cards */
.ns-timeline-card {
    padding: 34px 36px;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
    width: 100%;
    box-sizing: border-box;
}

[data-theme="light"] .ns-timeline-card {
    background: #FFFFFF;
    border: 1.5px solid rgba(8, 102, 245, 0.14);
    box-shadow: 0 12px 34px rgba(15, 35, 70, 0.05);
}

[data-theme="dark"] .ns-timeline-card {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
}

/* Ambient Radial Light Glow */
.ns-timeline-card__glow {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(8, 102, 245, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.4s ease;
    opacity: 0.5;
}

.ns-timeline-card:hover .ns-timeline-card__glow {
    opacity: 1;
}

.ns-timeline-card:hover {
    transform: translateY(-6px);
}

[data-theme="light"] .ns-timeline-card:hover {
    border-color: #0866F5;
    box-shadow: 0 20px 48px rgba(8, 102, 245, 0.16);
}

[data-theme="dark"] .ns-timeline-card:hover {
    border-color: rgba(8, 102, 245, 0.45);
    box-shadow: 0 22px 55px rgba(8, 102, 245, 0.22);
}

/* Head section inside card */
.ns-timeline-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.ns-timeline-year {
    font-family: var(--ts-font-h);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: #0866F5;
    background: rgba(8, 102, 245, 0.1);
    border: 1px solid rgba(8, 102, 245, 0.22);
    padding: 5px 14px;
    border-radius: 999px;
    display: inline-block;
}

/* Featured 2026 Badge */
.ns-timeline-item--featured .ns-timeline-card {
    border-top: 4px solid #0866F5;
}

[data-theme="light"] .ns-timeline-year--featured {
    background: linear-gradient(135deg, #0866F5, #3B82F6);
    color: #FFFFFF;
    border: none;
    box-shadow: 0 4px 12px rgba(8, 102, 245, 0.3);
}

.ns-timeline-badge {
    font-family: var(--ts-font-h);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #0866F5;
    background: rgba(8, 102, 245, 0.08);
    border: 1px solid rgba(8, 102, 245, 0.2);
    padding: 4px 10px;
    border-radius: 999px;
}

.ns-timeline-card h4 {
    font-family: var(--ts-font-h);
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 10px;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

[data-theme="light"] .ns-timeline-card h4 {
    color: #0F172A;
}

[data-theme="dark"] .ns-timeline-card h4 {
    color: #F8FAFC;
}

.ns-timeline-card p {
    font-family: var(--ts-font);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
    position: relative;
    z-index: 1;
}

[data-theme="light"] .ns-timeline-card p {
    color: #475569;
}

[data-theme="dark"] .ns-timeline-card p {
    color: #CBD5E1;
}

@media (max-width: 768px) {
    .ns-timeline-line {
        left: 20px;
        transform: none;
    }

    .ns-timeline-item {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 52px !important;
        padding-right: 0 !important;
    }

    .ns-timeline-dot {
        left: 11px !important;
        right: auto !important;
    }
}

/* ── 3. GALERÍA COLMENA UNIFORME Y CENTRADA (3-3-2) ── */
.ns-honeycomb-wrapper {
    position: relative;
    max-width: 960px;
    margin: 40px auto 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

/* Filas Intercaladas con Desplazamiento Sincronizado */
.ns-hc-row {
    display: flex;
    justify-content: center;
    gap: 14px;
    /* Separación real y constante entre bordes */
    width: 100%;
    position: relative;
}

/* Fila 1 (3 hexágonos): Desplazados -62px a la izquierda */
.ns-hc-row--1 {
    transform: translateX(-62px);
    margin-bottom: -32px;
    /* Encaje limpio sin superposición de contenido */
}

/* Fila 2 (3 hexágonos): Desplazados +62px a la derecha (diferencia exacta de 124px) */
.ns-hc-row--2 {
    transform: translateX(62px);
    margin-bottom: -32px;
}

/* Fila 3 (2 hexágonos): Centrados en los huecos (-62px a la izquierda) */
.ns-hc-row--3 {
    transform: translateX(-62px);
}

/* Marco Hexagonal Uniforme (Todos del mismo tamaño exacto) */
.ns-hc-card {
    position: relative;
    width: 230px;
    height: 200px;
    filter: drop-shadow(0 8px 24px rgba(8, 102, 245, 0.12));
    transition: filter 0.35s ease, transform 0.35s ease;
    will-change: transform;
    cursor: pointer;
    flex-shrink: 0;
}

/* Capa Exterior del Marco Hexagonal */
.ns-hc-card__hex {
    width: 100%;
    height: 100%;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: linear-gradient(135deg, rgba(8, 102, 245, 0.35) 0%, rgba(56, 189, 248, 0.2) 100%);
    padding: 3px;
    transition: background 0.35s ease;
}

[data-theme="light"] .ns-hc-card__hex {
    background: linear-gradient(135deg, rgba(8, 102, 245, 0.25) 0%, rgba(56, 189, 248, 0.18) 100%);
}

/* Capa Interior de Contenido Hexagonal */
.ns-hc-card__inner {
    width: 100%;
    height: 100%;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: rgba(15, 23, 42, 0.92);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

[data-theme="light"] .ns-hc-card__inner {
    background: rgba(255, 255, 255, 0.95);
}

/* Imagen dentro del Hexágono */
.ns-hc-card__img-wrap {
    width: 100%;
    height: 100%;
    position: relative;
}

.ns-hc-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.45s ease;
}

/* Leyenda / Texto en la Parte Inferior */
.ns-hc-card__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 22px 10px 10px 10px;
    background: linear-gradient(to top, rgba(11, 15, 25, 0.94) 0%, rgba(11, 15, 25, 0.6) 60%, transparent 100%);
    text-align: center;
    font-family: var(--ts-font-h, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="light"] .ns-hc-card__caption {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 60%, transparent 100%);
    color: #0f172a;
}

/* Hover Suave e Iluminado sin alteración de tamaño invasiva */
.ns-hc-card:hover {
    z-index: 20;
    filter: drop-shadow(0 14px 35px rgba(8, 102, 245, 0.4));
}

.ns-hc-card:hover .ns-hc-card__hex {
    background: linear-gradient(135deg, #38BDF8 0%, #0866F5 100%);
}

.ns-hc-card:hover .ns-hc-card__img-wrap img {
    transform: scale(1.06);
}

/* ── ANIMACIÓN FLOTANTE SUTIL Y CONTINUA (4-6px) ── */
.ns-hc-card--1 {
    animation: hcFloat1 5.2s ease-in-out infinite;
}

.ns-hc-card--2 {
    animation: hcFloat2 6.0s ease-in-out infinite;
    animation-delay: 0.8s;
}

.ns-hc-card--3 {
    animation: hcFloat3 4.6s ease-in-out infinite;
    animation-delay: 1.5s;
}

.ns-hc-card--4 {
    animation: hcFloat4 5.8s ease-in-out infinite;
    animation-delay: 0.4s;
}

.ns-hc-card--5 {
    animation: hcFloat5 6.4s ease-in-out infinite;
    animation-delay: 1.1s;
}

.ns-hc-card--6 {
    animation: hcFloat6 4.9s ease-in-out infinite;
    animation-delay: 1.8s;
}

.ns-hc-card--7 {
    animation: hcFloat7 5.5s ease-in-out infinite;
    animation-delay: 0.6s;
}

.ns-hc-card--8 {
    animation: hcFloat8 6.2s ease-in-out infinite;
    animation-delay: 1.3s;
}

@keyframes hcFloat1 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes hcFloat2 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes hcFloat3 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes hcFloat4 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes hcFloat5 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes hcFloat6 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes hcFloat7 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes hcFloat8 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* ── LIGHTBOX ZOOM MODAL ── */
.ns-hex-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.ns-hex-lightbox.is-active {
    opacity: 1;
    pointer-events: auto;
}

.ns-hex-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 15, 25, 0.92);
    backdrop-filter: blur(12px);
}

.ns-hex-lightbox__content {
    position: relative;
    z-index: 10;
    max-width: 650px;
    width: 90%;
    background: rgba(15, 23, 42, 0.95);
    border: 2px solid rgba(56, 189, 248, 0.4);
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 25px 60px rgba(8, 102, 245, 0.35);
    transform: scale(0.85);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="light"] .ns-hex-lightbox__content {
    background: #ffffff;
    border-color: rgba(8, 102, 245, 0.25);
    box-shadow: 0 25px 60px rgba(8, 102, 245, 0.18);
}

.ns-hex-lightbox.is-active .ns-hex-lightbox__content {
    transform: scale(1);
}

.ns-hex-lightbox__close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: rgba(8, 102, 245, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #ffffff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

[data-theme="light"] .ns-hex-lightbox__close {
    color: #0f172a;
    background: rgba(8, 102, 245, 0.08);
}

.ns-hex-lightbox__close:hover {
    background: #0866F5;
    color: #ffffff;
    transform: scale(1.1);
}

.ns-hex-lightbox__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ns-hex-lightbox__img-box {
    width: 100%;
    max-height: 420px;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(8, 102, 245, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.ns-hex-lightbox__img-box img {
    max-width: 100%;
    max-height: 380px;
    object-fit: contain;
    border-radius: 14px;
    filter: drop-shadow(0 8px 24px rgba(8, 102, 245, 0.3));
}

.ns-hex-lightbox__title {
    margin-top: 18px;
    font-family: var(--ts-font-h, sans-serif);
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
}

[data-theme="light"] .ns-hex-lightbox__title {
    color: #0f172a;
}

/* ── MEDIA QUERIES PROPORCIONALES (1920, 1440, 1280, 1024, 768, 390 px) ── */
@media (max-width: 1024px) {
    .ns-hc-card {
        width: 190px;
        height: 165px;
    }

    .ns-hc-row {
        gap: 10px;
    }

    .ns-hc-row--1 {
        transform: translateX(-50px);
        margin-bottom: -26px;
    }

    .ns-hc-row--2 {
        transform: translateX(50px);
        margin-bottom: -26px;
    }

    .ns-hc-row--3 {
        transform: translateX(-50px);
    }

    .ns-hc-card__caption {
        font-size: 0.68rem;
        padding-bottom: 8px;
    }
}

@media (max-width: 768px) {
    .ns-hc-card {
        width: 160px;
        height: 140px;
    }

    .ns-hc-row {
        gap: 8px;
    }

    .ns-hc-row--1 {
        transform: translateX(-42px);
        margin-bottom: -22px;
    }

    .ns-hc-row--2 {
        transform: translateX(42px);
        margin-bottom: -22px;
    }

    .ns-hc-row--3 {
        transform: translateX(-42px);
    }

    .ns-hc-card__caption {
        font-size: 0.62rem;
        padding-bottom: 6px;
    }
}

@media (max-width: 540px) {
    .ns-honeycomb-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        max-width: 100%;
        margin-top: 20px;
    }

    .ns-hc-row {
        display: contents;
    }

    .ns-hc-row--1,
    .ns-hc-row--2,
    .ns-hc-row--3 {
        transform: none !important;
        margin-bottom: 0 !important;
    }

    .ns-hc-card {
        width: 100%;
        height: 155px;
    }

    .ns-hc-card__caption {
        font-size: 0.68rem;
        padding-bottom: 8px;
    }
}

/* ── LIGHTBOX ZOOM MODAL ── */
.ns-hex-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.ns-hex-lightbox.is-active {
    opacity: 1;
    pointer-events: auto;
}

.ns-hex-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 15, 25, 0.92);
    backdrop-filter: blur(12px);
}

.ns-hex-lightbox__content {
    position: relative;
    z-index: 10;
    max-width: 650px;
    width: 90%;
    background: rgba(15, 23, 42, 0.95);
    border: 2px solid rgba(56, 189, 248, 0.4);
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 25px 60px rgba(8, 102, 245, 0.35);
    transform: scale(0.85);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="light"] .ns-hex-lightbox__content {
    background: #ffffff;
    border-color: rgba(8, 102, 245, 0.25);
    box-shadow: 0 25px 60px rgba(8, 102, 245, 0.18);
}

.ns-hex-lightbox.is-active .ns-hex-lightbox__content {
    transform: scale(1);
}

.ns-hex-lightbox__close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: rgba(8, 102, 245, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #ffffff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

[data-theme="light"] .ns-hex-lightbox__close {
    color: #0f172a;
    background: rgba(8, 102, 245, 0.08);
}

.ns-hex-lightbox__close:hover {
    background: #0866F5;
    color: #ffffff;
    transform: scale(1.1);
}

.ns-hex-lightbox__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ns-hex-lightbox__img-box {
    width: 100%;
    max-height: 420px;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(8, 102, 245, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.ns-hex-lightbox__img-box img {
    max-width: 100%;
    max-height: 380px;
    object-fit: contain;
    border-radius: 14px;
    filter: drop-shadow(0 8px 24px rgba(8, 102, 245, 0.3));
}

.ns-hex-lightbox__title {
    margin-top: 18px;
    font-family: var(--ts-font-h, sans-serif);
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
}

[data-theme="light"] .ns-hex-lightbox__title {
    color: #0f172a;
}

/* ── RESPONSIVE ── */
@media (max-width: 992px) {
    .ns-hc-card {
        width: 200px;
        height: 184px;
    }

    .ns-hc-row {
        gap: 20px;
    }

    .ns-hc-row--1 {
        margin-bottom: -30px;
    }

    .ns-hc-row--2 {
        transform: translateX(110px);
        margin-bottom: -30px;
    }

    .ns-hc-row--3 {
        transform: translateX(-55px);
    }

    .ns-hc-card__caption {
        font-size: 0.7rem;
        bottom: 8px;
    }
}

@media (max-width: 680px) {
    .ns-honeycomb-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        max-width: 100%;
        margin-top: 24px;
    }

    .ns-hc-row {
        display: contents;
    }

    .ns-hc-row--1,
    .ns-hc-row--2,
    .ns-hc-row--3 {
        transform: none !important;
        margin-bottom: 0 !important;
    }

    .ns-hc-card {
        width: 100%;
        height: 160px;
    }

    .ns-hc-card__caption {
        font-size: 0.68rem;
        bottom: 6px;
        padding: 3px 6px;
    }
}

.ns-gallery-section {
    padding: 100px 0;
    background: var(--ts-bg, #0b0f19);
    position: relative;
    overflow: hidden;
}

.ns-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 40px;
}

.ns-gallery-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    will-change: transform;
}

.ns-gallery-item {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(8, 102, 245, 0.2);
    background: rgba(15, 23, 42, 0.6);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    opacity: 0;
    transform: translateY(40px);
}

.ns-gallery-item.is-visible {
    opacity: 1 !important;
    transform: translateY(0);
}

[data-theme="light"] .ns-gallery-item {
    background: #ffffff;
    border-color: rgba(8, 102, 245, 0.15);
    box-shadow: 0 12px 32px rgba(8, 102, 245, 0.08);
}

.ns-gallery-item:hover {
    border-color: var(--ts-brand, #0866F5);
    box-shadow: 0 20px 48px rgba(8, 102, 245, 0.25);
}

.ns-gallery-slider-stage {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: #0B0F19;
}

.ns-gallery-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.ns-gallery-slide.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.ns-gallery-item img:not(.ns-gallery-slide) {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.ns-gallery-item:hover .ns-gallery-slide.is-active,
.ns-gallery-item:hover img:not(.ns-gallery-slide) {
    transform: scale(1.05);
}

.ns-gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    background: linear-gradient(180deg, transparent 0%, rgba(11, 15, 25, 0.88) 100%);
    color: #ffffff;
    font-family: var(--ts-font-h, sans-serif);
    font-size: 0.88rem;
    font-weight: 700;
}

@media (max-width: 768px) {
    .ns-gallery-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ns-gallery-col {
        transform: none !important;
    }

    .ns-gallery-item img {
        height: 220px;
    }
}

/* ── 10. CTA FINAL NOSOTROS (TARJETA ELEVADA PREMIUM) ── */
.nosotros-cta {
    position: relative;
    overflow: hidden;
    padding: 80px 32px;
    background: linear-gradient(135deg, #0866f5 0%, #071330 50%, #030a1b 100%) !important;
    border: 1px solid rgba(0, 240, 255, 0.25) !important;
    border-radius: 36px !important;
    max-width: 1240px;
    margin: 60px auto 80px;
    text-align: center;
    box-shadow: 0 25px 60px rgba(8, 102, 245, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    z-index: 2;
}

.nosotros-cta__pattern {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(0, 240, 255, 0.18), transparent 70%);
    pointer-events: none;
}

.nosotros-cta__content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.nosotros-cta h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: #ffffff !important;
    margin-bottom: 18px;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.nosotros-cta p {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.92) !important;
    max-width: 720px;
    margin: 0 auto 36px;
    line-height: 1.65;
}

.nosotros-cta .btn--white {
    background: #25d366 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4) !important;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;
    transition: all 0.3s ease;
}

.nosotros-cta .btn--white:hover {
    background: #20bd5a !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.6) !important;
}

.nosotros-cta .btn--outline {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(8px);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;
    transition: all 0.3s ease;
}

.nosotros-cta .btn--outline:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: #ffffff !important;
    transform: translateY(-2px);
}

[data-theme="light"] .nosotros-cta {
    background: linear-gradient(135deg, #0866f5 0%, #0099ff 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 20px 50px rgba(8, 102, 245, 0.3) !important;
}

@media (max-width: 768px) {
    .nosotros-cta {
        padding: 50px 20px;
        border-radius: 24px !important;
        margin: 40px 16px 60px;
    }
}

/* ── 4. CONTADORES DE IMPACTO ANIMADOS ── */
.ns-metrics-section {
    padding: 40px 0 80px;
    background: var(--ts-bg, #0b0f19);
    position: relative;
    z-index: 5;
}

.ns-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.ns-metric-card {
    padding: 32px 24px;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(8, 102, 245, 0.15);
    border-radius: 24px;
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

[data-theme="light"] .ns-metric-card {
    background: #ffffff;
    border-color: rgba(8, 102, 245, 0.12);
    box-shadow: 0 10px 30px rgba(8, 102, 245, 0.05);
}

.ns-metric-card:hover {
    transform: translateY(-6px);
    border-color: var(--ts-brand, #0866F5);
    box-shadow: 0 18px 40px rgba(8, 102, 245, 0.2);
}

.ns-metric-number {
    font-family: var(--ts-font-h, sans-serif);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--ts-brand, #0866F5), #8B5CF6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.ns-metric-label {
    font-family: var(--ts-font, sans-serif);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ts-text-2, #94A3B8);
}

[data-theme="light"] .ns-metric-label {
    color: #475569;
}

@media (max-width: 992px) {
    .ns-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .ns-metrics-grid {
        grid-template-columns: 1fr;
    }
}

/* ── 5. MANIFIESTO INTERACTIVO / PROMESA DE CALIDAD ── */
.ns-promise-section {
    padding: 80px 0;
    background: var(--ts-bg, #0b0f19);
}

.ns-promise-box {
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 48px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(8, 102, 245, 0.2);
    border-radius: 36px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .ns-promise-box {
    background: #ffffff;
    border-color: rgba(8, 102, 245, 0.15);
    box-shadow: 0 20px 50px rgba(8, 102, 245, 0.08);
}

.ns-promise-head {
    text-align: center;
    margin-bottom: 36px;
}

.ns-promise-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.ns-promise-tab {
    padding: 12px 24px;
    font-family: var(--ts-font-h, sans-serif);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ts-text-2, #94A3B8);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.3s ease;
}

[data-theme="light"] .ns-promise-tab {
    background: #F1F5F9;
    color: #475569;
    border-color: #E2E8F0;
}

.ns-promise-tab:hover {
    color: var(--ts-brand, #0866F5);
    border-color: rgba(8, 102, 245, 0.4);
}

.ns-promise-tab.is-active {
    background: var(--ts-brand, #0866F5);
    color: #ffffff !important;
    border-color: var(--ts-brand, #0866F5);
    box-shadow: 0 8px 24px rgba(8, 102, 245, 0.4);
}

.ns-promise-panels {
    position: relative;
    min-height: 180px;
}

.ns-promise-panel {
    display: none;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
    padding: 36px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(8, 102, 245, 0.12);
    border-radius: 28px;
    animation: nsFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ns-promise-panel.is-active {
    display: grid;
}

[data-theme="light"] .ns-promise-panel {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

.ns-promise-panel__num {
    font-family: var(--ts-font-h, sans-serif);
    font-size: 0.85rem;
    font-weight: 900;
    color: var(--ts-brand, #0866F5);
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 8px;
}

.ns-promise-panel h3 {
    font-family: var(--ts-font-h, sans-serif);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ts-text, #ffffff);
    margin: 0 0 12px;
}

[data-theme="light"] .ns-promise-panel h3 {
    color: #0F172A;
}

.ns-promise-panel p {
    font-family: var(--ts-font, sans-serif);
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--ts-text-2, #94A3B8);
    margin: 0;
}

[data-theme="light"] .ns-promise-panel p {
    color: #475569;
}

.ns-promise-panel__badge {
    padding: 12px 20px;
    background: rgba(8, 102, 245, 0.12);
    border: 1px solid rgba(8, 102, 245, 0.25);
    border-radius: 16px;
    color: var(--ts-brand, #0866F5);
    font-family: var(--ts-font-h, sans-serif);
    font-size: 0.88rem;
    font-weight: 800;
    white-space: nowrap;
}

@keyframes nsFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .ns-promise-box {
        padding: 32px 20px;
    }

    .ns-promise-panel {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px;
    }

    .ns-promise-panel__badge {
        align-self: start;
    }
}

/* ── 6. EQUIPO DE INGENIERÍA 3D — MARQUEE INFINITO B2B ── */
.ns-team-section {
    padding: 90px 0;
    background: var(--ts-bg, #0b0f19);
    overflow: hidden;
    position: relative;
}

.ns-team-slider-wrap {
    width: 100%;
    overflow: hidden;
    margin-top: 36px;
    position: relative;
    padding: 16px 0 28px 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.ns-team-track {
    display: flex;
    gap: 28px;
    width: max-content;
    animation: nsTeamInfiniteMarquee 34s linear infinite;
    will-change: transform;
}

.ns-team-slider-wrap:hover .ns-team-track {
    animation-play-state: paused;
}

@keyframes nsTeamInfiniteMarquee {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(calc(-50% - 14px), 0, 0);
    }
}

.ns-team-card {
    flex: 0 0 310px;
    width: 310px;
    min-height: 380px;
    padding: 24px 20px 28px 20px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(8, 102, 245, 0.16);
    border-radius: 26px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.38s ease, box-shadow 0.38s ease, background 0.38s ease;
}

[data-theme="light"] .ns-team-card {
    background: #FFFFFF;
    border-color: rgba(8, 102, 245, 0.14);
    box-shadow: 0 10px 32px rgba(8, 102, 245, 0.07);
}

.ns-team-card:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #0866F5;
    box-shadow: 0 20px 48px rgba(8, 102, 245, 0.22);
    z-index: 5;
}

/* Badge Centrado Flotante por encima del avatar */
.ns-team-card__badge-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    z-index: 10;
}

.ns-team-card__badge {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(8, 102, 245, 0.09);
    border: 1px solid rgba(8, 102, 245, 0.22);
    border-radius: 50px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 800;
    color: #0866F5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
    white-space: normal;
    max-width: 98%;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.ns-team-card:hover .ns-team-card__badge {
    background: rgba(8, 102, 245, 0.15);
    border-color: rgba(8, 102, 245, 0.4);
}

/* Avatar Imagen Prominente Ampliado (170px x 170px) con Animación de Disolución Cruzada */
.ns-team-card__avatar {
    position: relative;
    width: 170px;
    height: 170px;
    margin: 0 auto 16px auto;
    border-radius: 50%;
    flex-shrink: 0;
}

.ns-team-card__glow {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0866F5 0%, #0284C7 100%);
    opacity: 0.5;
    filter: blur(8px);
    transition: opacity 0.38s ease, transform 0.38s ease;
    z-index: 1;
}

.ns-team-card:hover .ns-team-card__glow {
    opacity: 0.95;
    transform: scale(1.08);
}

.ns-team-card__photo-fader {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    z-index: 2;
    -webkit-user-select: none;
    user-select: none;
}

/* Escudo protector transparente sobre la imagen para impedir clic derecho y arrastre */
.ns-team-card__photo-fader::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: transparent;
    z-index: 10;
    cursor: default;
}

.ns-team-card__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2.5px solid #FFFFFF;
    box-shadow: 0 6px 18px rgba(8, 102, 245, 0.18);
    transition: transform 0.38s ease;
    will-change: opacity, transform;
    pointer-events: none !important;
    -webkit-user-drag: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

.ns-team-card__img--primary {
    opacity: 1;
    animation: nsPhotoCrossfadePrimary 10s ease-in-out infinite;
}

.ns-team-card__img--secondary {
    opacity: 0;
    animation: nsPhotoCrossfadeSecondary 10s ease-in-out infinite;
}

/* Ciclo de 10s total (5s Foto 1 / 5s Foto 2) */
@keyframes nsPhotoCrossfadePrimary {

    0%,
    42% {
        opacity: 1;
    }

    50%,
    92% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes nsPhotoCrossfadeSecondary {

    0%,
    42% {
        opacity: 0;
    }

    50%,
    92% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.ns-team-card:hover .ns-team-card__img {
    transform: scale(1.1);
}

/* Nombre del Integrante */
.ns-team-card__name {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 6px;
    line-height: 1.3;
}

[data-theme="dark"] .ns-team-card__name {
    color: #F8FAFC;
}

/* Especialidad / Área */
.ns-team-card__especialidad {
    font-size: 0.86rem;
    font-weight: 600;
    color: #475569;
    line-height: 1.45;
}

[data-theme="dark"] .ns-team-card__especialidad {
    color: #94A3B8;
}

@media (max-width: 768px) {
    .ns-team-card {
        flex: 0 0 250px;
        width: 250px;
        padding: 20px 16px 24px 16px;
    }
}

/* ── THEME TOGGLE (Sol Amarillo / Luna) ── */
.theme-toggle__thumb {
    width: 20px !important;
    height: 20px !important;
    background: #1E293B !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, box-shadow 0.3s ease !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4) !important;
}

[data-theme="light"] .theme-toggle__thumb {
    transform: translateX(24px) !important;
    background: var(--ts-brand, #0066FF) !important;
    box-shadow: 0 0 10px rgba(0, 102, 255, 0.35) !important;
}

.theme-toggle__icon {
    width: 13px !important;
    height: 13px !important;
}

/* Modo Noche (Dark Mode activo): Muestra la LUNA */
.theme-toggle__icon--moon {
    display: block !important;
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}

.theme-toggle__icon--sun {
    display: none !important;
}

/* Modo Día (Light Mode activo): Muestra el SOL AMARILLO */
[data-theme="light"] .theme-toggle__icon--sun {
    display: block !important;
    fill: #FBBF24 !important;
    color: #FBBF24 !important;
    filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.8)) !important;
}

[data-theme="light"] .theme-toggle__icon--moon {
    display: none !important;
}

/* ═══ TEMA: REDES EMPRESARIALES (Rediseño Cyber Pro Total 60fps) ═══ */
.svc-theme-redes-empresariales-cartagena {
    --rd-bg-main: #F4F7FC;
    --rd-bg-alt: #FFFFFF;
    --rd-grid: rgba(8, 102, 245, 0.05);
    --rd-card-bg: rgba(255, 255, 255, 0.88);
    --rd-card-border: rgba(8, 102, 245, 0.15);
    --rd-text: #0F172A;
    --rd-text-muted: #475569;
    --rd-accent: #0866F5;
    --rd-glow: rgba(8, 102, 245, 0.18);
    --rd-hero-bg: #EEF4FE;
    --rd-hero-glow: rgba(8, 102, 245, 0.15);
    --rd-pill-bg: rgba(8, 102, 245, 0.06);
    --rd-pill-border: rgba(8, 102, 245, 0.25);
}

[data-theme="dark"] .svc-theme-redes-empresariales-cartagena {
    --rd-bg-main: #020612;
    --rd-bg-alt: #090F1E;
    --rd-grid: rgba(0, 229, 255, 0.07);
    --rd-card-bg: rgba(15, 23, 42, 0.65);
    --rd-card-border: rgba(0, 229, 255, 0.18);
    --rd-text: #F8FAFC;
    --rd-text-muted: #94A3B8;
    --rd-accent: #00E5FF;
    --rd-glow: rgba(0, 229, 255, 0.2);
    --rd-hero-bg: #020612;
    --rd-hero-glow: rgba(0, 229, 255, 0.22);
    --rd-pill-bg: rgba(0, 229, 255, 0.06);
    --rd-pill-border: rgba(0, 229, 255, 0.28);
}

/* ── FONDOS Y TEXTOS GENERALES ── */
.svc-theme-redes-empresariales-cartagena,
.svc-theme-redes-empresariales-cartagena .svc-block:nth-child(odd) {
    background-color: var(--rd-bg-main);
    color: var(--rd-text);
}

.svc-theme-redes-empresariales-cartagena .svc-block:nth-child(even) {
    background-color: var(--rd-bg-alt);
}

.svc-theme-redes-empresariales-cartagena h1,
.svc-theme-redes-empresariales-cartagena h2,
.svc-theme-redes-empresariales-cartagena h3,
.svc-theme-redes-empresariales-cartagena .section-title {
    color: var(--rd-text) !important;
}

.svc-theme-redes-empresariales-cartagena p,
.svc-theme-redes-empresariales-cartagena li,
.svc-theme-redes-empresariales-cartagena span,
.svc-theme-redes-empresariales-cartagena .section-sub {
    color: var(--rd-text-muted) !important;
}

.svc-theme-redes-empresariales-cartagena .section-tag {
    background: var(--rd-pill-bg) !important;
    border: 1px solid var(--rd-pill-border) !important;
    color: var(--rd-accent) !important;
    box-shadow: 0 0 15px var(--rd-glow) !important;
}

/* ── 1. HERO B2B CON CUADRÍCULA NEÓN ── */
.svc-theme-redes-empresariales-cartagena .page-hero {
    background-color: var(--rd-hero-bg) !important;
    background-image:
        radial-gradient(circle at 50% 30%, var(--rd-hero-glow) 0%, transparent 70%),
        repeating-linear-gradient(45deg, var(--rd-grid) 0, var(--rd-grid) 1.5px, transparent 1.5px, transparent 36px),
        repeating-linear-gradient(-45deg, var(--rd-grid) 0, var(--rd-grid) 1.5px, transparent 1.5px, transparent 36px) !important;
    border-bottom: 1px solid var(--rd-card-border) !important;
    position: relative !important;
    overflow: hidden !important;
}

.svc-theme-redes-empresariales-cartagena .page-hero h1 {
    color: var(--rd-text) !important;
}

[data-theme="dark"] .svc-theme-redes-empresariales-cartagena .page-hero h1 {
    text-shadow: 0 0 35px rgba(0, 229, 255, 0.25) !important;
}

.svc-theme-redes-empresariales-cartagena .page-hero h1 em {
    background: linear-gradient(135deg, var(--rd-accent) 0%, #3B82F6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    filter: drop-shadow(0 0 15px var(--rd-glow));
}

.svc-theme-redes-empresariales-cartagena .page-hero__glow {
    background: var(--rd-accent) !important;
    opacity: 0.18 !important;
    filter: blur(110px) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-hero__pill,
.svc-theme-redes-empresariales-cartagena .page-hero__tag {
    background: var(--rd-pill-bg) !important;
    border: 1px solid var(--rd-pill-border) !important;
    color: var(--rd-accent) !important;
    box-shadow: 0 0 20px var(--rd-glow) !important;
    backdrop-filter: blur(8px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}

/* ── 2. BARRA DE CONFIANZA & SLA ── */
.svc-theme-redes-empresariales-cartagena .svc-trust-bar {
    background: var(--rd-card-bg) !important;
    border-top: 1px solid var(--rd-card-border) !important;
    border-bottom: 1px solid var(--rd-card-border) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-trust-icon {
    background: var(--rd-pill-bg) !important;
    border: 1px solid var(--rd-pill-border) !important;
    color: var(--rd-accent) !important;
    box-shadow: 0 0 15px var(--rd-glow) !important;
    border-radius: 12px !important;
}

.svc-theme-redes-empresariales-cartagena .svc-trust-item strong {
    color: var(--rd-text) !important;
}

/* ── 3. MATRIZ RIESGO VS SOLUCIÓN ── */
.svc-theme-redes-empresariales-cartagena .svc-matrix__col {
    background: var(--rd-card-bg) !important;
    border: 1px solid var(--rd-card-border) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 20px !important;
    padding: 32px 28px !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}

.svc-theme-redes-empresariales-cartagena .svc-matrix__col--danger {
    border-color: rgba(239, 68, 68, 0.35) !important;
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.08) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-matrix__col--solution {
    border-color: var(--rd-accent) !important;
    box-shadow: 0 12px 40px var(--rd-glow) !important;
}

/* Elevación limpia al interactuar con las tarjetas de diagnóstico */
.svc-theme-redes-empresariales-cartagena .svc-matrix__col:hover {
    transform: translateY(-5px) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-matrix__col--solution:hover {
    box-shadow: 0 18px 50px var(--rd-glow) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-matrix__col h3 {
    color: var(--rd-text) !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-top: 12px !important;
    margin-bottom: 10px !important;
}

.svc-theme-redes-empresariales-cartagena .svc-matrix__badge--danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #EF4444 !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    font-size: 0.8rem !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
}

.svc-theme-redes-empresariales-cartagena .svc-matrix__badge--solution {
    background: var(--rd-pill-bg) !important;
    border: 1px solid var(--rd-pill-border) !important;
    color: var(--rd-accent) !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    font-size: 0.8rem !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
    box-shadow: 0 0 15px var(--rd-glow) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-matrix__list li span {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

.svc-theme-redes-empresariales-cartagena .svc-matrix__highlight {
    background: var(--rd-pill-bg) !important;
    border: 1px solid var(--rd-pill-border) !important;
    border-radius: 14px !important;
    padding: 18px 20px !important;
    box-shadow: 0 0 20px var(--rd-glow) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-matrix__highlight-icon {
    color: var(--rd-accent) !important;
}

/* ── 4. BENEFICIOS Y CAPACIDADES ── */
.svc-theme-redes-empresariales-cartagena .svc-card {
    background: var(--rd-card-bg) !important;
    border: 1px solid var(--rd-card-border) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 16px !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}

.svc-theme-redes-empresariales-cartagena .svc-card:hover {
    transform: translateY(-6px) !important;
    border-color: var(--rd-accent) !important;
    box-shadow: 0 14px 35px var(--rd-glow), 0 0 15px var(--rd-glow) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-card__num {
    color: var(--rd-accent) !important;
    background: transparent !important;
    border: none !important;
    text-shadow: 0 0 12px var(--rd-glow) !important;
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    margin-bottom: 8px !important;
}

.svc-theme-redes-empresariales-cartagena .svc-card::before {
    display: none !important;
}

/* ── 5. ENTREGABLES / QUÉ INCLUYE ── */
.svc-theme-redes-empresariales-cartagena .svc-incluye__item {
    background: var(--rd-card-bg) !important;
    border: 1px solid var(--rd-card-border) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 12px !important;
    color: var(--rd-text) !important;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.svc-theme-redes-empresariales-cartagena .svc-incluye__item svg {
    color: var(--rd-accent) !important;
    filter: drop-shadow(0 0 8px var(--rd-glow));
}

.svc-theme-redes-empresariales-cartagena .svc-incluye__item:hover {
    transform: translateY(-3px) !important;
    border-color: var(--rd-accent) !important;
    box-shadow: 0 8px 25px var(--rd-glow) !important;
}

/* ── 6. PRECIOS E INVERSIÓN ORIENTATIVA ── */
.svc-theme-redes-empresariales-cartagena .svc-precio-card {
    background: var(--rd-card-bg) !important;
    border: 1px solid var(--rd-card-border) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 16px !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}

.svc-theme-redes-empresariales-cartagena .svc-precio-card--featured {
    border-color: var(--rd-accent) !important;
    box-shadow: 0 10px 40px var(--rd-glow) !important;
    position: relative !important;
}

.svc-theme-redes-empresariales-cartagena .svc-precio-card__tag {
    background: linear-gradient(135deg, var(--rd-accent) 0%, #3B82F6 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 15px var(--rd-glow) !important;
    font-weight: 800 !important;
}

.svc-theme-redes-empresariales-cartagena .svc-precio-card__precio {
    color: var(--rd-accent) !important;
    text-shadow: 0 0 10px var(--rd-glow) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-precio-card:hover {
    transform: translateY(-6px) !important;
    border-color: var(--rd-accent) !important;
    box-shadow: 0 14px 35px var(--rd-glow), 0 0 20px var(--rd-glow) !important;
}

/* ── 7. PROCESO DE TRABAJO EN 4 PASOS ── */
.svc-theme-redes-empresariales-cartagena .svc-paso {
    background: var(--rd-card-bg) !important;
    border: 1px solid var(--rd-card-border) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 16px !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.svc-theme-redes-empresariales-cartagena .svc-paso:hover {
    transform: translateY(-5px) !important;
    border-color: var(--rd-accent) !important;
    box-shadow: 0 12px 30px var(--rd-glow) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-paso__num {
    color: var(--rd-accent) !important;
    text-shadow: 0 0 12px var(--rd-glow) !important;
    font-size: 1.6rem !important;
    font-weight: 900 !important;
}

/* ── 8. PREGUNTAS FRECUENTES FAQ ── */
.svc-theme-redes-empresariales-cartagena .svc-faq__item {
    background: var(--rd-card-bg) !important;
    border: 1px solid var(--rd-card-border) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 14px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    margin-bottom: 12px !important;
}

.svc-theme-redes-empresariales-cartagena .svc-faq__item[open] {
    border-color: var(--rd-accent) !important;
    box-shadow: 0 8px 30px var(--rd-glow) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-faq__item summary {
    color: var(--rd-text) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-faq__item summary svg {
    color: var(--rd-accent) !important;
}

/* ── 9. SERVICIOS RELACIONADOS & FORMULARIO B2B ── */
.svc-theme-redes-empresariales-cartagena .svc-rel-card {
    background: var(--rd-card-bg) !important;
    border: 1px solid var(--rd-card-border) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 16px !important;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.svc-theme-redes-empresariales-cartagena .svc-rel-card:hover {
    transform: translateY(-5px) !important;
    border-color: var(--rd-accent) !important;
    box-shadow: 0 12px 30px var(--rd-glow) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-rel-card__link {
    color: var(--rd-accent) !important;
    font-weight: 700 !important;
}

.svc-theme-redes-empresariales-cartagena .b2b-form-card {
    background: var(--rd-card-bg) !important;
    border: 1px solid var(--rd-card-border) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px var(--rd-glow) !important;
}

.svc-theme-redes-empresariales-cartagena .b2b-form-card input:focus,
.svc-theme-redes-empresariales-cartagena .b2b-form-card textarea:focus,
.svc-theme-redes-empresariales-cartagena .b2b-form-card select:focus {
    border-color: var(--rd-accent) !important;
    box-shadow: 0 0 15px var(--rd-glow) !important;
}

/* ── 10. ANIMACIONES CYBER-TECH INTERACTIVAS ── */
@keyframes cyberPulseBadge {

    0%,
    100% {
        box-shadow: 0 0 15px var(--rd-glow);
    }

    50% {
        box-shadow: 0 0 28px var(--rd-glow), 0 0 12px var(--rd-accent);
    }
}

.svc-theme-redes-empresariales-cartagena .svc-hero__pill,
.svc-theme-redes-empresariales-cartagena .page-hero__tag,
.svc-theme-redes-empresariales-cartagena .svc-precio-card__tag {
    animation: cyberPulseBadge 4s ease-in-out infinite !important;
}

.svc-theme-redes-empresariales-cartagena .svc-card,
.svc-theme-redes-empresariales-cartagena .svc-precio-card,
.svc-theme-redes-empresariales-cartagena .svc-matrix__col--solution {
    position: relative !important;
    overflow: hidden !important;
}

.svc-theme-redes-empresariales-cartagena .svc-card::after,
.svc-theme-redes-empresariales-cartagena .svc-precio-card::after,
.svc-theme-redes-empresariales-cartagena .svc-matrix__col--solution::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 80% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, var(--rd-glow), transparent) !important;
    transform: skewX(-25deg) !important;
    transition: none !important;
    pointer-events: none !important;
}

.svc-theme-redes-empresariales-cartagena .svc-card:hover::after,
.svc-theme-redes-empresariales-cartagena .svc-precio-card:hover::after,
.svc-theme-redes-empresariales-cartagena .svc-matrix__col--solution:hover::after {
    left: 180% !important;
    transition: left 0.85s ease-in-out !important;
}

.svc-theme-redes-empresariales-cartagena .svc-trust-item .svc-trust-icon,
.svc-theme-redes-empresariales-cartagena .svc-incluye__item svg {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease !important;
}

.svc-theme-redes-empresariales-cartagena .svc-trust-item:hover .svc-trust-icon,
.svc-theme-redes-empresariales-cartagena .svc-incluye__item:hover svg {
    transform: scale(1.15) rotate(4deg) !important;
    filter: drop-shadow(0 0 12px var(--rd-accent)) !important;
}

@keyframes cyberGridShift {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }

    50% {
        background-position: 0 0, 18px 18px, -18px -18px;
    }

    100% {
        background-position: 0 0, 0 0, 0 0;
    }
}

[data-theme="dark"] .svc-theme-redes-empresariales-cartagena .page-hero {
    animation: cyberGridShift 16s ease-in-out infinite alternate !important;
}

/* ── 11. NAVEGACIÓN FLOTANTE EDITORIAL ESTILO OXIGEN.SA ── */
.ox-side-nav {
    position: fixed;
    top: 50%;
    left: clamp(16px, 2.2vw, 40px);
    right: auto;
    transform: translateY(-50%);
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    pointer-events: none;
    transition: opacity .4s ease;
}

.ox-side-link {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
    height: 18px;
    text-decoration: none;
    pointer-events: auto;
    cursor: pointer;
}

.ox-side-label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 0;
    margin-right: 0;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rd-accent, #00E5FF);
    transition: max-width .38s cubic-bezier(.16, 1, .3, 1), opacity .3s ease, margin-left .38s ease;
}

.ox-side-line {
    flex: none;
    width: 22px;
    height: 2px;
    background: var(--rd-accent, #00E5FF);
    opacity: 0.35;
    border-radius: 2px;
    transition: width .38s cubic-bezier(.16, 1, .3, 1), opacity .3s ease, box-shadow .3s ease;
}

.ox-side-link:hover .ox-side-label,
.ox-side-link.active .ox-side-label {
    max-width: 180px;
    opacity: 1;
    margin-left: 12px;
}

.ox-side-link:hover .ox-side-line,
.ox-side-link.active .ox-side-line {
    width: 48px;
    opacity: 1;
    box-shadow: 0 0 12px var(--rd-glow);
}

@media (max-width: 992px) {
    .ox-side-nav {
        display: none !important;
    }
}

/* ═══ ENTERPRISE CLEAN STYLES FOR REDES EMPRESARIALES ═══ */

/* 1. SECCIÓN PROBLEMAS DE RED */
.svc-theme-redes-empresariales-cartagena .svc-problemas-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    margin-top: 36px !important;
}

.svc-theme-redes-empresariales-cartagena .svc-problema-card {
    background: var(--rd-card-bg) !important;
    border: 1px solid var(--rd-card-border) !important;
    border-radius: 16px !important;
    padding: 28px 24px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.svc-theme-redes-empresariales-cartagena .svc-problema-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--rd-accent) !important;
    box-shadow: 0 12px 30px var(--rd-glow) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-problema-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: rgba(8, 102, 245, 0.08) !important;
    color: var(--rd-accent) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 18px !important;
}

.svc-theme-redes-empresariales-cartagena .svc-problema-card h3 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--rd-text) !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}

.svc-theme-redes-empresariales-cartagena .svc-problema-card p {
    font-size: 0.9rem !important;
    color: var(--rd-text-muted) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* 2. SECCIÓN PRINCIPIOS DE RED ("CÓMO ENTENDEMOS UNA BUENA RED") */
.svc-theme-redes-empresariales-cartagena .svc-principios-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 32px !important;
    margin-top: 44px !important;
}

.svc-theme-redes-empresariales-cartagena .svc-principio-card {
    background: rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(8, 102, 245, 0.08) !important;
    border-radius: 16px !important;
    padding: 36px 26px !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

[data-theme="dark"] .svc-theme-redes-empresariales-cartagena .svc-principio-card {
    background: rgba(15, 23, 42, 0.35) !important;
    border: 1px solid rgba(0, 229, 255, 0.08) !important;
    box-shadow: none !important;
}

.svc-theme-redes-empresariales-cartagena .svc-principio-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--rd-accent) !important;
    box-shadow: 0 10px 28px var(--rd-glow) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-principio-icon {
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 24px auto !important;
    border-radius: 16px !important;
    background: rgba(8, 102, 245, 0.06) !important;
    color: var(--rd-accent) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.svc-theme-redes-empresariales-cartagena .svc-principio-card h3 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--rd-text) !important;
    margin-bottom: 12px !important;
    line-height: 1.35 !important;
}

.svc-theme-redes-empresariales-cartagena .svc-principio-card p {
    font-size: 0.9rem !important;
    color: var(--rd-text-muted) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* 3. SECCIÓN METODOLOGÍA PROCESO — LÍNEA DE TIEMPO REAL HORIZONTAL */
.svc-theme-redes-empresariales-cartagena .svc-proceso-timeline {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    position: relative !important;
    margin-top: 48px !important;
}

.svc-theme-redes-empresariales-cartagena .svc-proceso-timeline::before {
    content: "" !important;
    position: absolute !important;
    top: 48px !important;
    left: 12% !important;
    right: 12% !important;
    height: 2px !important;
    background: linear-gradient(90deg, var(--rd-accent) 0%, rgba(8, 102, 245, 0.3) 100%) !important;
    z-index: 0 !important;
}

.svc-theme-redes-empresariales-cartagena .svc-proceso-step {
    background: var(--rd-card-bg) !important;
    border: 1px solid var(--rd-card-border) !important;
    border-radius: 16px !important;
    padding: 32px 24px 28px 24px !important;
    position: relative !important;
    z-index: 1 !important;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.svc-theme-redes-empresariales-cartagena .svc-proceso-step:hover {
    transform: translateY(-5px) !important;
    border-color: var(--rd-accent) !important;
    box-shadow: 0 12px 30px var(--rd-glow) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-proceso-step__node {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--rd-accent) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 14px var(--rd-glow) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-proceso-step h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--rd-text) !important;
    margin-bottom: 10px !important;
}

.svc-theme-redes-empresariales-cartagena .svc-proceso-step p {
    font-size: 0.88rem !important;
    color: var(--rd-text-muted) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

/* 4. SECCIÓN PILARES ("QUÉ IMPLEMENTAMOS") */
.svc-theme-redes-empresariales-cartagena .svc-pilares-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    margin-top: 40px !important;
}

.svc-theme-redes-empresariales-cartagena .svc-pilar-card {
    background: var(--rd-card-bg) !important;
    border: 1px solid var(--rd-card-border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
}

.svc-theme-redes-empresariales-cartagena .svc-pilar-card:hover {
    transform: translateY(-6px) !important;
    border-color: var(--rd-accent) !important;
    box-shadow: 0 16px 40px var(--rd-glow) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-pilar-card__image {
    width: 100% !important;
    height: 160px !important;
    overflow: hidden !important;
    position: relative !important;
}

.svc-theme-redes-empresariales-cartagena .svc-pilar-card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}

.svc-theme-redes-empresariales-cartagena .svc-pilar-card:hover .svc-pilar-card__image img {
    transform: scale(1.06) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-pilar-card__body {
    padding: 24px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.svc-theme-redes-empresariales-cartagena .svc-pilar-card__body h3 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--rd-text) !important;
    margin-bottom: 16px !important;
}

.svc-theme-redes-empresariales-cartagena .svc-pilar-card__body ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.svc-theme-redes-empresariales-cartagena .svc-pilar-card__body li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 0.88rem !important;
    color: var(--rd-text-muted) !important;
    line-height: 1.5 !important;
}

.svc-theme-redes-empresariales-cartagena .svc-pilar-card__body li svg {
    color: var(--rd-accent) !important;
    flex-shrink: 0 !important;
    margin-top: 3px !important;
}

/* 5. SECCIÓN PROYECTOS REALES ("EVIDENCIA") */
.svc-theme-redes-empresariales-cartagena .svc-proyectos-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    margin-top: 40px !important;
}

.svc-theme-redes-empresariales-cartagena .svc-proyecto-card {
    position: relative !important;
    height: 220px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid var(--rd-card-border) !important;
    cursor: pointer !important;
}

.svc-theme-redes-empresariales-cartagena .svc-proyecto-badge {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 10 !important;
    background: var(--rd-accent) !important;
    color: #FFFFFF !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 5px 12px !important;
    border-radius: 30px !important;
    letter-spacing: 0.03em !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-proyecto-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease, filter 0.5s ease !important;
}

.svc-theme-redes-empresariales-cartagena .svc-proyecto-card:hover img {
    transform: scale(1.08) !important;
    filter: brightness(0.65) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-proyecto-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.2) 60%, transparent 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 20px !important;
    color: #FFFFFF !important;
    transition: opacity 0.3s ease !important;
}

.svc-theme-redes-empresariales-cartagena .svc-proyecto-overlay h4 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 0 0 4px 0 !important;
    color: #FFFFFF !important;
}

.svc-theme-redes-empresariales-cartagena .svc-proyecto-overlay span {
    font-size: 0.82rem !important;
    opacity: 0.85 !important;
}

/* 6. DIAGNÓSTICO CTA BANNER CORPORATIVO SOBRIO */
.svc-theme-redes-empresariales-cartagena .svc-cta-banner {
    background: var(--rd-card-bg) !important;
    border: 1px solid var(--rd-card-border) !important;
    border-radius: 20px !important;
    padding: 40px 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 32px !important;
    box-shadow: 0 10px 30px var(--rd-glow) !important;
}

.svc-theme-redes-empresariales-cartagena .svc-cta-banner__content h2 {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--rd-text) !important;
    margin-bottom: 8px !important;
}

.svc-theme-redes-empresariales-cartagena .svc-cta-banner__content p {
    font-size: 0.98rem !important;
    color: var(--rd-text-muted) !important;
    margin: 0 !important;
    max-width: 640px !important;
}

/* RESPONSIVE MEDIA QUERIES */
@media (max-width: 1024px) {

    .svc-theme-redes-empresariales-cartagena .svc-problemas-grid,
    .svc-theme-redes-empresariales-cartagena .svc-principios-grid,
    .svc-theme-redes-empresariales-cartagena .svc-pilares-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .svc-theme-redes-empresariales-cartagena .svc-proceso-timeline {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .svc-theme-redes-empresariales-cartagena .svc-proceso-timeline::before {
        display: none !important;
    }

    .svc-theme-redes-empresariales-cartagena .svc-proyectos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {

    .svc-theme-redes-empresariales-cartagena .svc-problemas-grid,
    .svc-theme-redes-empresariales-cartagena .svc-principios-grid,
    .svc-theme-redes-empresariales-cartagena .svc-proceso-timeline,
    .svc-theme-redes-empresariales-cartagena .svc-pilares-grid,
    .svc-theme-redes-empresariales-cartagena .svc-proyectos-grid {
        grid-template-columns: 1fr !important;
    }

    .svc-theme-redes-empresariales-cartagena .svc-cta-banner {
        flex-direction: column !important;
        text-align: center !important;
    }
}

[data-theme="dark"] .svc-theme-redes-empresariales-cartagena .svc-incluye__item:hover {
    border-color: rgba(0, 229, 255, 0.4) !important;
    box-shadow: 0 4px 20px rgba(0, 229, 255, 0.15) !important;
}

/* ═══════════════════════════════════════════
   BENTO SYSTEM — TIMELINE (Beneficios)
   ═══════════════════════════════════════════ */

/* Si hay un timeline, la sección tiene un fondo suave para resaltar los círculos blancos */
.svc-beneficios:has(.svc-timeline) {
    background: #F4F6F9;
}

[data-theme="dark"] .svc-beneficios:has(.svc-timeline) {
    background: #0B1120;
}

.svc-timeline {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    margin-top: 30px;
    position: relative;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-top: 20px;
    padding-bottom: 20px;
    /* Hide scrollbar for cleaner look */
    scrollbar-width: thin;
    -ms-overflow-style: none;
}

.svc-timeline::-webkit-scrollbar {
    height: 8px;
}

.svc-timeline::-webkit-scrollbar-track {
    background: transparent;
}

.svc-timeline::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.svc-timeline__item {
    flex: 0 0 calc(33.333% - 14px);
    /* Default to 3 items per row on medium screens */
    min-width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    scroll-snap-align: center;
}

@media (min-width: 1200px) {
    .svc-timeline__item {
        /* On very large screens, try to fit all 6 if possible, or scroll nicely */
        flex: 0 0 calc(16.666% - 17px);
        min-width: 180px;
    }
}

.svc-timeline__circle-wrap {
    position: relative;
    margin-bottom: 24px;
    display: inline-block;
    z-index: 2;
}

.svc-timeline__circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #007BFF;
    border: 1px solid rgba(0, 123, 255, 0.1);
    box-shadow: 0 12px 36px rgba(0, 123, 255, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.svc-timeline__item:hover .svc-timeline__circle {
    transform: translateY(-5px);
    box-shadow: 0 18px 45px rgba(0, 123, 255, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .svc-timeline__circle {
    background: #131E3A;
    border-color: rgba(0, 123, 255, 0.2);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
    color: #38BDF8;
}

.svc-timeline__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    background: #0088FF;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    box-shadow: 0 4px 10px rgba(0, 136, 255, 0.3);
}

[data-theme="dark"] .svc-timeline__badge {
    background: #38BDF8;
    color: #0F172A;
}

.svc-timeline__arrow {
    position: absolute;
    top: 50%;
    right: -55px;
    /* Adjust based on gap */
    transform: translateY(-50%);
    color: #93C5FD;
    width: 40px;
    display: flex;
    justify-content: center;
    z-index: 1;
}

[data-theme="dark"] .svc-timeline__arrow {
    color: rgba(56, 189, 248, 0.3);
}

@media (max-width: 1024px) {
    .svc-timeline__arrow {
        right: -35px;
        width: 30px;
    }
}

.svc-timeline__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 12px;
    line-height: 1.3;
}

[data-theme="dark"] .svc-timeline__title {
    color: #F8FAFC;
}

.svc-timeline__desc {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #64748B;
    margin: 0;
    max-width: 260px;
}

[data-theme="dark"] .svc-timeline__desc {
    color: #94A3B8;
}

@media (max-width: 768px) {
    .svc-timeline {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .svc-timeline__arrow {
        top: auto;
        bottom: -35px;
        left: 50%;
        right: auto;
        transform: translateX(-50%) rotate(90deg);
    }
}

/* ═══════════════════════════════════════════
   BENTO SYSTEM — PROCESO BANNER (Chevron)
   ═══════════════════════════════════════════ */

.svc-proceso__banner {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin-top: 40px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    /* To keep the overall border radius */
    background: #1A365D;
    /* Fallback for gaps if any */
}

.svc-proceso__banner-item {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 24px 30px 24px 45px;
    position: relative;
    margin-right: -25px;
    /* Overlap the next chevron */
    transition: filter 0.3s ease;
}

.svc-proceso__banner-item:first-child {
    padding-left: 30px;
}

.svc-proceso__banner-item:last-child {
    margin-right: 0;
    padding-right: 30px;
}

.svc-proceso__banner-item:hover {
    filter: brightness(1.1);
}

/* ── ANIMACIÓN DE UNIÓN GRADUAL DE BANDERINES (SOLO EN OUTSOURCING IT) ── */
.svc-theme-outsourcing-it-cartagena .svc-proceso__banner {
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.svc-theme-outsourcing-it-cartagena .svc-proceso__banner-item {
    opacity: 0;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.12));
    will-change: transform, opacity;
}

.svc-theme-outsourcing-it-cartagena .svc-proceso__banner.sr--visible .svc-proceso__banner-item:nth-child(1) {
    animation: integrateBanderin 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.svc-theme-outsourcing-it-cartagena .svc-proceso__banner.sr--visible .svc-proceso__banner-item:nth-child(2) {
    animation: integrateBanderin 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

.svc-theme-outsourcing-it-cartagena .svc-proceso__banner.sr--visible .svc-proceso__banner-item:nth-child(3) {
    animation: integrateBanderin 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}

.svc-theme-outsourcing-it-cartagena .svc-proceso__banner.sr--visible .svc-proceso__banner-item:nth-child(4) {
    animation: integrateBanderin 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.0s forwards;
}

.svc-theme-outsourcing-it-cartagena .svc-proceso__banner-item:hover {
    filter: brightness(1.15) drop-shadow(0 10px 24px rgba(0, 0, 0, 0.2)) !important;
    transform: translateY(-4px) scale(1.02);
    z-index: 10 !important;
}

@keyframes integrateBanderin {
    0% {
        opacity: 0;
        transform: translateX(-50px) scale(0.92);
    }

    65% {
        opacity: 0.9;
        transform: translateX(4px) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.svc-proceso__banner-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    flex-shrink: 0;
    margin-right: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.svc-proceso__banner-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.4;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

@media (max-width: 992px) {
    .svc-proceso__banner {
        flex-direction: column;
        border-radius: 12px;
        box-shadow: none;
        background: transparent;
        gap: 8px;
    }

    .svc-proceso__banner-item {
        margin-right: 0;
        margin-bottom: 0;
        padding: 20px !important;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
        /* Remove chevron on mobile */
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }
}

/* ═══ TEMA: SEGURIDAD INFORMÁTICA (Fondo Exclusivo Escudo Cyber) ═══ */
.svc-theme-seguridad-informatica-cartagena {
    background-color: #030914 !important;
    color: #F8FAFC !important;
}

.svc-theme-seguridad-informatica-cartagena .page-hero {
    background: #030816 !important;
    border-bottom: 1px solid rgba(0, 229, 255, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Remover la máscara radial blanca/atenuada para exponer el escudo claramente */
.svc-theme-seguridad-informatica-cartagena .svc-hero__bg-carousel {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    opacity: 1 !important;
}

/* Transparencia y brillo optimizados para hero-empresa-principal-2.png */
.svc-theme-seguridad-informatica-cartagena .svc-hero__bg-slide.is-active,
[data-theme="light"] .svc-theme-seguridad-informatica-cartagena .svc-hero__bg-slide.is-active,
[data-theme="dark"] .svc-theme-seguridad-informatica-cartagena .svc-hero__bg-slide.is-active {
    opacity: 0.85 !important;
    visibility: visible !important;
}

.svc-theme-seguridad-informatica-cartagena .svc-hero__bg-slide img {
    filter: saturate(1.2) contrast(1.1) brightness(0.95) !important;
    object-fit: cover !important;
    object-position: right center !important;
}

/* Sombras, alineación lateral y contraste de texto para que las letras e imagen no se tapen */
.svc-theme-seguridad-informatica-cartagena .page-hero h1 {
    color: #FFFFFF !important;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 229, 255, 0.4) !important;
    max-width: 680px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
}

.svc-theme-seguridad-informatica-cartagena .page-hero p {
    color: #FFFFFF !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95) !important;
    font-weight: 600 !important;
    max-width: 640px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
}

.svc-theme-seguridad-informatica-cartagena .page-hero__tag {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.svc-theme-seguridad-informatica-cartagena .svc-hero__actions {
    justify-content: flex-start !important;
    width: 100% !important;
}

.svc-theme-seguridad-informatica-cartagena .svc-hero__pills {
    justify-content: flex-start !important;
    width: 100% !important;
}

.svc-theme-seguridad-informatica-cartagena .page-hero__glow {
    background: radial-gradient(circle, rgba(0, 229, 255, 0.35) 0%, rgba(8, 102, 245, 0.2) 60%, transparent 100%) !important;
    opacity: 0.35 !important;
    filter: blur(50px) !important;
}

.svc-theme-seguridad-informatica-cartagena .page-hero__tag {
    background: rgba(3, 14, 30, 0.75) !important;
    border-color: rgba(0, 229, 255, 0.6) !important;
    color: #00E5FF !important;
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.35) !important;
    backdrop-filter: blur(6px);
}

.svc-theme-seguridad-informatica-cartagena .svc-hero__pill {
    background: rgba(3, 14, 30, 0.75) !important;
    border-color: rgba(0, 229, 255, 0.3) !important;
    color: #F8FAFC !important;
    backdrop-filter: blur(6px);
}

/* ═══ SECCIÓN QUÉ INCLUYE (FONDO NEUTRO Y TEXTO OSCURO) ═══ */
.svc-theme-seguridad-informatica-cartagena .svc-incluye {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
}

.svc-theme-seguridad-informatica-cartagena .svc-incluye .section-title {
    color: #0F172A !important;
}

.svc-theme-seguridad-informatica-cartagena .svc-incluye .section-sub {
    color: #64748B !important;
}

.svc-theme-seguridad-informatica-cartagena .svc-incluye .section-tag {
    color: #0866F5 !important;
}

/* ═══ BANDERINES ORIGAMI DE CONFIANZA B2B (LÍNEA DE TIEMPO BLANCA CON TRANSPARENCIA) ═══ */
.svc-origami-timeline-section {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding: 55px 20px 50px;
    position: relative;
    z-index: 10;
    overflow: visible;
}

.svc-origami-timeline__inner {
    max-width: 1240px;
    margin: 0 auto;
}

.svc-origami-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    align-items: stretch;
}

/* Tarjeta Base */
.svc-origami-card {
    position: relative;
    padding-top: 28px;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
}

.svc-origami-card:hover {
    transform: translateY(-8px);
    filter: drop-shadow(0 14px 28px rgba(0, 85, 255, 0.18));
}

/* Número Gigante Solapado Arriba a la Izquierda */
.svc-origami-card__num {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 3.6rem;
    font-weight: 900;
    line-height: 1;
    position: absolute;
    top: -14px;
    left: 14px;
    z-index: 5;
    letter-spacing: -2px;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

/* Cuerpo Principal de la Tarjeta en Cinta Origami Translúcida */
.svc-origami-card__body {
    position: relative;
    z-index: 2;
    padding: 34px 20px 28px 20px;
    border-radius: 6px 14px 0 6px;
    clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 8px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    min-height: 155px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Solapa Plegada Origami (Triángulo doblado abajo a la derecha) */
.svc-origami-card__fold {
    position: absolute;
    bottom: -16px;
    right: 7%;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 1;
}

/* Textos de la tarjeta (Blanco sobre degradado azul translúcido) */
.svc-origami-card__title {
    font-size: 1.12rem;
    font-weight: 800;
    color: #FFFFFF !important;
    margin-bottom: 8px;
    line-height: 1.25;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.svc-origami-card__desc {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.96) !important;
    line-height: 1.4;
    margin: 0;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ── JUEGO DE TONOS AZULES SEMITRANSPARENTES ── */

/* Paso 01: Azul Eléctrico Primario (Transparente) */
.svc-origami-card--1 .svc-origami-card__num {
    color: #0866F5;
}

.svc-origami-card--1 .svc-origami-card__body {
    background: linear-gradient(135deg, rgba(8, 102, 245, 0.82) 0%, rgba(0, 70, 184, 0.82) 100%);
}

.svc-origami-card--1 .svc-origami-card__fold {
    border-width: 16px 20px 0 0;
    border-color: rgba(0, 45, 128, 0.85) transparent transparent transparent;
}

/* Paso 02: Azul Celeste Vívido (Transparente) */
.svc-origami-card--2 .svc-origami-card__num {
    color: #0284C7;
}

.svc-origami-card--2 .svc-origami-card__body {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.82) 0%, rgba(3, 105, 161, 0.82) 100%);
}

.svc-origami-card--2 .svc-origami-card__fold {
    border-width: 16px 20px 0 0;
    border-color: rgba(7, 89, 133, 0.85) transparent transparent transparent;
}

/* Paso 03: Azul Real Profundo (Transparente) */
.svc-origami-card--3 .svc-origami-card__num {
    color: #1D4ED8;
}

.svc-origami-card--3 .svc-origami-card__body {
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.82) 0%, rgba(30, 58, 138, 0.82) 100%);
}

.svc-origami-card--3 .svc-origami-card__fold {
    border-width: 16px 20px 0 0;
    border-color: rgba(23, 37, 84, 0.85) transparent transparent transparent;
}

/* Paso 04: Azul Zafiro Oscuro / Marino (Transparente) */
.svc-origami-card--4 .svc-origami-card__num {
    color: #1E293B;
}

.svc-origami-card--4 .svc-origami-card__body {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.85) 100%);
}

.svc-origami-card--4 .svc-origami-card__fold {
    border-width: 16px 20px 0 0;
    border-color: rgba(2, 6, 23, 0.88) transparent transparent transparent;
}


/* Adaptación Mobile & Responsive */
@media (max-width: 992px) {
    .svc-origami-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 20px;
    }
}

@media (max-width: 540px) {
    .svc-origami-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* ═══ TARJETAS DE BENEFICIOS DE SEGURIDAD (CON ESCUDOS ANIMADOS) ═══ */
.svc-sec-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 36px;
    position: relative;
}

/* Línea azul horizontal conectora por detrás de las tarjetas */
@media (min-width: 992px) {
    .svc-sec-grid::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 5%;
        right: 5%;
        height: 2px;
        background: #0866F5;
        z-index: 1;
        opacity: 0.6;
    }
}

.svc-sec-card {
    background: #FFFFFF !important;
    border: 2.5px solid #0866F5 !important;
    border-radius: 20px !important;
    padding: 28px 22px 22px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    min-height: 380px;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(8, 102, 245, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.3s ease;
}

.svc-sec-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(8, 102, 245, 0.2), 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: #0055FF !important;
}

/* Número en la esquina superior derecha */
.svc-sec-card__num {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 1.8rem;
    font-weight: 900;
    color: #DBEAFE;
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1;
}

/* Círculo Azul Suave Superior para el Ícono */
.svc-sec-card__icon-badge {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0866F5;
    margin-bottom: 20px;
    flex-shrink: 0;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.svc-sec-card:hover .svc-sec-card__icon-badge {
    transform: scale(1.08);
    background: #DBEAFE;
}

/* Título de la tarjeta (Alto uniforme) */
.svc-sec-card__title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0F172A !important;
    margin-bottom: 10px;
    line-height: 1.3;
    min-height: 2.6em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Descripción de la tarjeta (Alto flexible alineado) */
.svc-sec-card__desc {
    font-size: 0.88rem;
    color: #475569 !important;
    line-height: 1.45;
    margin: 0;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.2em;
}

/* Línea Divisoria Punteada e Ícono de Escudo Animado alineados al pie */
.svc-sec-card__bottom-shield {
    margin-top: auto;
    padding-top: 16px;
    width: 100%;
    border-top: 1px dashed #CBD5E1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.shield-animated-icon {
    width: 38px;
    height: 38px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0866F5;
}

.shield-animated-icon svg {
    filter: drop-shadow(0 0 6px rgba(8, 102, 245, 0.4));
    animation: shieldPulseGlow 2.8s ease-in-out infinite alternate;
}

.shield-animated-icon::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid rgba(8, 102, 245, 0.5);
    opacity: 0;
    animation: shieldRipple 2.4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes shieldPulseGlow {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 3px rgba(8, 102, 245, 0.3));
    }

    50% {
        transform: scale(1.12);
        filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.7));
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 3px rgba(8, 102, 245, 0.3));
    }
}

@keyframes shieldRipple {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* ═══ CARRUSEL HORIZONTAL SLIDER BENEFICIOS (6 TARJETAS SLIDER) ═══ */
.svc-sec-carousel-container {
    position: relative;
    padding: 10px 45px;
    margin-top: 24px;
}

.svc-sec-carousel-track-wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 15px 5px 25px;
}

.svc-sec-carousel-track {
    display: flex;
    gap: 24px;
    align-items: stretch;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.svc-sec-carousel-slide {
    flex: 0 0 calc(25% - 18px);
    /* 4 visible on desktop */
    min-width: 250px;
    box-sizing: border-box;
    display: flex;
}

@media (max-width: 1199px) {
    .svc-sec-carousel-slide {
        flex: 0 0 calc(50% - 12px);
        /* 2 visible on tablet */
    }
}

@media (max-width: 767px) {
    .svc-sec-carousel-slide {
        flex: 0 0 100%;
        /* 1 visible on mobile */
    }

    .svc-sec-carousel-container {
        padding: 10px 0;
    }
}

/* Botones de navegación prev/next flotantes */
.svc-sec-nav-btn {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #0866F5;
    color: #0866F5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(8, 102, 245, 0.22);
    transition: all 0.3s ease;
    z-index: 10;
}

.svc-sec-nav-btn:hover {
    background: #0866F5;
    color: #FFFFFF;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 24px rgba(8, 102, 245, 0.4);
}

.svc-sec-nav-btn--prev {
    left: -12px;
}

.svc-sec-nav-btn--next {
    right: -12px;
}

@media (max-width: 767px) {
    .svc-sec-nav-btn--prev {
        left: 0;
    }

    .svc-sec-nav-btn--next {
        right: 0;
    }
}

/* Indicadores Puntos (Dots) */
.svc-sec-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
}

.svc-sec-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #CBD5E1;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.svc-sec-dot.is-active {
    width: 28px;
    border-radius: 12px;
    background: #0866F5;
    box-shadow: 0 0 10px rgba(8, 102, 245, 0.4);
}

/* ═══ BARRA DE CÁPSULA PILL SEGMENTADA B2B (DISEÑO SLIDER/NAVBAR PILL) ═══ */
.svc-pill-bar-section {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    padding: 24px 20px;
    position: relative;
    z-index: 10;
}

.svc-pill-bar__inner {
    max-width: 1240px;
    margin: 0 auto;
}

.svc-pill-container {
    background: #F0F4FA;
    border-radius: 9999px;
    border: 1px solid rgba(8, 102, 245, 0.15);
    padding: 6px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 30px rgba(0, 85, 255, 0.06);
}

.svc-pill-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    flex: 1;
    justify-content: center;
    color: #334155;
    user-select: none;
}

.svc-pill-item:hover {
    background: rgba(8, 102, 245, 0.08);
}

.svc-pill-item.is-active {
    background: #0866F5 !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 20px rgba(8, 102, 245, 0.35);
}

.svc-pill-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0866F5;
    transition: color 0.3s ease;
    flex-shrink: 0;
}

.svc-pill-item.is-active .svc-pill-icon {
    color: #FFFFFF !important;
}

.svc-pill-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    line-height: 1.2;
}

.svc-pill-text strong {
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

.svc-pill-text span {
    font-size: 0.78rem;
    opacity: 0.85;
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .svc-pill-container {
        overflow-x: auto;
        justify-content: flex-start;
        border-radius: 20px;
        padding: 8px;
    }

    .svc-pill-item {
        flex: 0 0 auto;
        padding: 10px 18px;
    }
}

/* ═══ DISEÑO 3 PILARES CATEGORIZACIÓN "QUÉ INCLUYE" ═══ */
.svc-pillars-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
    margin-top: 36px !important;
    align-items: stretch !important;
}

.svc-pillar-col {
    border-radius: 20px !important;
    padding: 28px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.svc-pillar-col:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06) !important;
}

/* Pilar 1: Verde Pastel (Seguridad y Prevención) */
.svc-pillar-col--green {
    background: #ECFDF5 !important;
    border: 1.5px solid #A7F3D0 !important;
}

.svc-pillar-col--green .svc-pillar-col__title {
    color: #047857 !important;
}

.svc-pillar-col--green .svc-pillar-card__check {
    color: #10B981 !important;
}

/* Pilar 2: Azul Pastel (Continuidad y Respaldo) */
.svc-pillar-col--blue {
    background: #EFF6FF !important;
    border: 1.5px solid #BFDBFE !important;
}

.svc-pillar-col--blue .svc-pillar-col__title {
    color: #1D4ED8 !important;
}

.svc-pillar-col--blue .svc-pillar-card__check {
    color: #3B82F6 !important;
}

/* Pilar 3: Naranja/Ámbar Pastel (Accesos y Monitoreo) */
.svc-pillar-col--orange {
    background: #FFFBEB !important;
    border: 1.5px solid #FDE68A !important;
}

.svc-pillar-col--orange .svc-pillar-col__title {
    color: #B45309 !important;
}

.svc-pillar-col--orange .svc-pillar-card__check {
    color: #F59E0B !important;
}

/* Título del Pilar */
.svc-pillar-col__title {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    line-height: 1.3 !important;
}

/* Lista de Tarjetas Blancas Apiladas */
.svc-pillar-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    flex-grow: 1 !important;
}

.svc-pillar-card {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.svc-pillar-card:hover {
    transform: translateX(4px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(8, 102, 245, 0.2) !important;
}

.svc-pillar-card__check {
    flex-shrink: 0 !important;
}

.svc-pillar-card span {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

@media (max-width: 1024px) {
    .svc-pillars-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* ═══ PROCESO EN 4 PASOS: LISTA SIN TARJETAS NI NÚMEROS (ESCUDO + TEXTO AL LADO) ═══ */
.svc-proceso-section {
    background-color: #F8FAFC !important;
    padding: 65px 20px !important;
    position: relative;
    border-top: 1px solid #E2E8F0;
}

.svc-proceso-list-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 40px !important;
    margin-top: 45px !important;
    align-items: center !important;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.svc-proceso-item {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    transition: transform 0.3s ease !important;
}

.svc-proceso-item:hover {
    transform: translateX(6px) !important;
}

/* Escudo con Candado Imagen */
.svc-proceso-shield-badge {
    width: 60px !important;
    height: 60px !important;
    border-radius: 16px !important;
    background: #030914 !important;
    border: 1.5px solid rgba(8, 102, 245, 0.4) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 18px rgba(8, 102, 245, 0.25) !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.svc-proceso-item:hover .svc-proceso-shield-badge {
    transform: scale(1.1) !important;
    box-shadow: 0 8px 24px rgba(0, 229, 255, 0.45) !important;
    border-color: #00E5FF !important;
}

.svc-proceso-shield-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Texto al lado del escudo */
.svc-proceso-item__text p {
    font-size: 0.95rem !important;
    color: #334155 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    text-align: left !important;
}

.svc-proceso-item__text strong {
    color: #0F172A !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
}

@media (max-width: 768px) {
    .svc-proceso-list-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

@media (max-width: 640px) {
    .svc-proceso-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── ICONOS VIBRANTES CON COLOR Y EFECTO HOVER 3D CREATIVO ── */
.svc-problema-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    flex-shrink: 0 !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative !important;
}

.svc-problema-icon svg {
    width: 26px !important;
    height: 26px !important;
    transition: transform 0.4s ease, filter 0.4s ease !important;
}

/* CARD 01 - Computador Lento (Azul Cobalto / Índigo) */
.svc-problema-card:nth-child(1) .svc-problema-icon {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(99, 102, 241, 0.16)) !important;
    color: #2563EB !important;
    border: 1.5px solid rgba(37, 99, 235, 0.22) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08) !important;
}

.svc-problema-card:nth-child(1):hover .svc-problema-icon {
    background: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    transform: scale(1.22) rotate(-5deg) translateY(-3px) !important;
    box-shadow: 0 12px 28px -4px rgba(37, 99, 235, 0.55), 0 0 20px rgba(99, 102, 241, 0.45) !important;
}

/* CARD 02 - WiFi Falla (Cian Neón / Turquesa) */
.svc-problema-card:nth-child(2) .svc-problema-icon {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(14, 165, 233, 0.16)) !important;
    color: #0284C7 !important;
    border: 1.5px solid rgba(6, 182, 212, 0.22) !important;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.08) !important;
}

.svc-problema-card:nth-child(2):hover .svc-problema-icon {
    background: linear-gradient(135deg, #0284C7 0%, #06B6D4 100%) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    transform: scale(1.22) rotate(5deg) translateY(-3px) !important;
    box-shadow: 0 12px 28px -4px rgba(6, 182, 212, 0.55), 0 0 20px rgba(2, 132, 199, 0.45) !important;
}

/* CARD 03 - Buscar a quién llamar (Esmeralda / Menta) */
.svc-problema-card:nth-child(3) .svc-problema-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(5, 150, 105, 0.16)) !important;
    color: #059669 !important;
    border: 1.5px solid rgba(16, 185, 129, 0.22) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08) !important;
}

.svc-problema-card:nth-child(3):hover .svc-problema-icon {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    transform: scale(1.22) rotate(-5deg) translateY(-3px) !important;
    box-shadow: 0 12px 28px -4px rgba(16, 185, 129, 0.55), 0 0 20px rgba(16, 185, 129, 0.45) !important;
}

/* CARD 04 - Backups sin certeza (Violeta Púrpura) */
.svc-problema-card:nth-child(4) .svc-problema-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(124, 58, 237, 0.16)) !important;
    color: #7C3AED !important;
    border: 1.5px solid rgba(139, 92, 246, 0.22) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.08) !important;
}

.svc-problema-card:nth-child(4):hover .svc-problema-icon {
    background: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 100%) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    transform: scale(1.22) rotate(5deg) translateY(-3px) !important;
    box-shadow: 0 12px 28px -4px rgba(124, 58, 237, 0.55), 0 0 20px rgba(139, 92, 246, 0.45) !important;
}

/* CARD 05 - Todo funciona hasta que deja de funcionar (Ámbar / Naranja Fuego) */
.svc-problema-card:nth-child(5) .svc-problema-icon {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(217, 119, 6, 0.16)) !important;
    color: #D97706 !important;
    border: 1.5px solid rgba(245, 158, 11, 0.22) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.08) !important;
}

.svc-problema-card:nth-child(5):hover .svc-problema-icon {
    background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    transform: scale(1.22) rotate(-5deg) translateY(-3px) !important;
    box-shadow: 0 12px 28px -4px rgba(245, 158, 11, 0.55), 0 0 20px rgba(217, 119, 6, 0.45) !important;
}

/* CARD 06 - Quita tiempo a gerencia (Azul Oscuro Obsidiana / Electric Slate) */
.svc-problema-card:nth-child(6) .svc-problema-icon {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.12), rgba(15, 23, 42, 0.16)) !important;
    color: #1E293B !important;
    border: 1.5px solid rgba(30, 41, 59, 0.22) !important;
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.08) !important;
}

.svc-problema-card:nth-child(6):hover .svc-problema-icon {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    transform: scale(1.22) rotate(5deg) translateY(-3px) !important;
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.55), 0 0 20px rgba(51, 65, 85, 0.45) !important;
}

/* Efecto pulse al hacer hover sobre la tarjeta completa */
.svc-problema-card:hover .svc-problema-icon svg {
    transform: scale(1.15) !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
}

/* ══════════════════════════════════════════════════════════════════
   REGLAS DE LEGIBILIDAD INFALIBLES PARA MODO OSCURO (DARK MODE)
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] body,
html[data-theme="dark"] .svc-page-view,
html[data-theme="dark"] .svc-block {
    background-color: #0F172A !important;
    color: #F8FAFC !important;
}

html[data-theme="dark"] .section-title,
html[data-theme="dark"] .svc-hero__title,
html[data-theme="dark"] .svc-problema-card h3,
html[data-theme="dark"] .svc-principio-card h3,
html[data-theme="dark"] .svc-pilar-card h3,
html[data-theme="dark"] .svc-faq-accordion__question,
html[data-theme="dark"] .svc-proceso-step h3,
html[data-theme="dark"] .svc-trust-item strong,
html[data-theme="dark"] .svc-hero-cta strong,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 {
    color: #F8FAFC !important;
}

html[data-theme="dark"] .section-sub,
html[data-theme="dark"] .svc-hero__subtitle,
html[data-theme="dark"] .svc-hero__microbenefits span,
html[data-theme="dark"] .svc-problema-card p,
html[data-theme="dark"] .svc-principio-card p,
html[data-theme="dark"] .svc-pilar-card p,
html[data-theme="dark"] .svc-faq-accordion__answer,
html[data-theme="dark"] .svc-proceso-step p,
html[data-theme="dark"] .svc-trust-item span,
html[data-theme="dark"] p {
    color: #CBD5E1 !important;
}

html[data-theme="dark"] .svc-problema-card,
html[data-theme="dark"] .svc-principio-card,
html[data-theme="dark"] .svc-pilar-card,
html[data-theme="dark"] .svc-faq-accordion__item {
    background-color: #1E293B !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .svc-principio-card__screen-bar {
    background-color: #0F172A !important;
    border-bottom-color: #334155 !important;
}

/* ── AGENDA / HABLEMOS DE LO QUE NECESITAS (RESPONSIVE FIX) ── */
.hm-agenda {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.hm-agenda__inner {
    max-width: var(--ts-container, 1200px);
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.hm-agenda__marco {
    position: relative;
    background: linear-gradient(135deg, rgba(8, 102, 245, 0.04) 0%, rgba(0, 200, 255, 0.03) 100%);
    border: 1px solid rgba(8, 102, 245, 0.15);
    border-radius: 28px;
    padding: 40px 24px;
    box-sizing: border-box;
    overflow: hidden;
}

[data-theme="dark"] .hm-agenda__marco {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(11, 15, 25, 0.9) 100%);
    border-color: rgba(255, 255, 255, 0.1);
}

.hm-agenda__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 36px;
}

.hm-agenda__head h2 {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 800;
    margin-bottom: 12px;
}

.hm-agenda__head p {
    font-size: 0.95rem;
    color: var(--ts-subtext, #64748b);
}

.hm-agenda__opciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .hm-agenda__marco {
        padding: 24px 16px;
        border-radius: 20px;
    }
    .hm-agenda__opciones {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.hm-agenda-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 28px 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(8, 102, 245, 0.06);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    transition: all 0.3s ease;
}

[data-theme="dark"] .hm-agenda-card {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.hm-agenda-card__top-bar {
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    background: #0866f5;
    border-radius: 0 0 4px 4px;
}

.hm-agenda-card__left {
    flex: 1;
    min-width: 0;
}

.hm-agenda-card__title {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1.3;
}

.hm-agenda-card__desc {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 20px;
    line-height: 1.5;
}

[data-theme="dark"] .hm-agenda-card__desc {
    color: #94a3b8;
}

.hm-agenda-card__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hm-btn-wsp, .hm-btn-call, .hm-btn-agendar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
}

.hm-btn-wsp {
    background: #25D366;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
}

.hm-btn-call {
    background: transparent;
    color: #0866f5;
    border: 1.5px solid #0866f5;
}

.hm-btn-agendar {
    background: #0866f5;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(8, 102, 245, 0.3);
}

.hm-agenda-card__visual {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hm-agenda-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 640px) {
    .hm-agenda-card {
        flex-direction: column-reverse;
        text-align: center;
        padding: 24px 18px;
    }
    .hm-agenda-card__visual {
        width: 120px;
        height: 120px;
        margin: 0 auto;
    }
    .hm-agenda-card__actions {
        justify-content: center;
        width: 100%;
    }
    .hm-btn-wsp, .hm-btn-call, .hm-btn-agendar {
        flex: 1;
        min-width: 130px;
        justify-content: center;
    }
}

.faq-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.3s ease;
}

[data-theme="dark"] .faq-modal {
    background: rgba(3, 8, 20, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.faq-modal[hidden] {
    display: none !important;
}

.faq-modal__dialog {
    background: #ffffff;
    color: #0f172a;
    padding: 32px 24px;
    border-radius: 24px;
    max-width: 520px;
    width: 100%;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    border: 1px solid #e2e8f0;
}

[data-theme="dark"] .faq-modal__dialog {
    background: #0f172a;
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.12);
}

.faq-modal__tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #0866f5;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.faq-modal__dialog h3 {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 14px;
    line-height: 1.35;
}

.faq-modal__dialog p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #475569;
}

[data-theme="dark"] .faq-modal__dialog p {
    color: #cbd5e1;
}

.faq-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.06);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #0f172a;
    transition: all 0.2s ease;
}

[data-theme="dark"] .faq-modal__close {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.faq-modal__close:hover {
    background: #ff4d4d;
    color: #ffffff;
}

/* ── GLOBAL MOBILE SAFETY & TOUCH TARGET FIXES ── */
@media (max-width: 767px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    main {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    button, a.btn, a.hm-btn-wsp, a.hm-btn-call, .hm-btn-agendar {
        min-height: 44px !important;
    }
}

/* ── REMOVER MARCADORES NATIVOS Y DAR ESTILO A DETAILS/SUMMARY ── */
.faq-summary::-webkit-details-marker,
.faq-summary::marker {
    display: none !important;
    content: "" !important;
}

.faq-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px !important;
    cursor: pointer !important;
    outline: none !important;
    list-style: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    user-select: none !important;
    margin: 0 !important;
}

.faq-q-text {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
    padding-right: 24px !important;
    flex: 1 !important;
    display: block !important;
}

[data-theme="dark"] .faq-q-text {
    color: #f8fafc !important;
}

.faq-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(8, 102, 245, 0.08) !important;
    color: #0866f5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease !important;
    flex-shrink: 0 !important;
}

[data-theme="dark"] .faq-icon {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #38bdf8 !important;
}

.faq-item[open] .faq-icon {
    transform: rotate(45deg) !important;
    background: #0866f5 !important;
    color: #ffffff !important;
}

.faq-answer {
    display: block !important;
    padding: 16px 24px 22px 24px !important;
    border-top: 1px solid #f1f5f9 !important;
    font-size: 0.93rem !important;
    line-height: 1.65 !important;
    color: #475569 !important;
    box-sizing: border-box !important;
}

.faq-answer p {
    margin: 0 !important;
    font-size: 0.93rem !important;
    line-height: 1.65 !important;
    color: #475569 !important;
}

[data-theme="dark"] .faq-answer {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .faq-answer p {
    color: #cbd5e1 !important;
}

/* ── AKE POS SLIDES & CAROUSEL ── */
.em-akepos__media {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(8, 102, 245, 0.1) !important;
    background: linear-gradient(180deg, rgba(8, 102, 245, 0.02) 0%, rgba(240, 246, 255, 0.25) 100%) !important;
    box-shadow: 0 8px 20px rgba(8, 102, 245, 0.05) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
}

[data-theme="dark"] .em-akepos__media {
    background: rgba(7, 26, 66, 0.4) !important;
    border-color: rgba(8, 102, 245, 0.25) !important;
    box-shadow: 0 14px 34px rgba(8, 102, 245, 0.15) !important;
}

.em-akepos__slide {
    display: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 380px !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    margin: auto !important;
    align-self: center !important;
    transition: opacity 0.4s ease !important;
}

.em-akepos__slide.is-active {
    display: block !important;
    margin: auto !important;
}



/* ── CENTRADO RESPONSIVO MÓVIL EN EMPRESAS (< 768px) ── */
@media (max-width: 767px) {
    .em-proceso__tech-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .em-proceso__tech-icon img {
        display: block !important;
        margin: 0 auto !important;
        object-fit: contain !important;
    }

    .em-akepos {
        padding: 32px 12px !important;
        text-align: center !important;
        overflow: hidden !important;
    }

    .em-akepos__head {
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .em-akepos__inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 20px 14px !important;
        margin: 0 auto !important;
        overflow: hidden !important;
    }

    .em-akepos__media-col {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 16px !important;
        box-sizing: border-box !important;
    }

    .em-akepos__media {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        border-radius: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .em-akepos__slide {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 260px !important;
        object-fit: contain !important;
        display: none !important;
        border-radius: 12px !important;
    }

    .em-akepos__slide.is-active {
        display: block !important;
    }

    .em-akepos__brand-logo {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto 16px auto !important;
    }

    .em-akepos__contenido {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .em-akepos__contenido h2 {
        text-align: center !important;
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
        margin: 12px auto !important;
    }

    .em-akepos__contenido p {
        text-align: center !important;
        font-size: 0.92rem !important;
        line-height: 1.6 !important;
        margin: 0 auto 18px auto !important;
    }

    .em-akepos__features {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 20px !important;
    }

    .em-akepos__actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 12px !important;
    }

    .em-akepos__actions .ts-btn {
        width: 100% !important;
        max-width: 320px !important;
        justify-content: center !important;
    }
}




[data-theme="dark"] .faq-answer p {
    color: #cbd5e1 !important;
}

/* ── CARRUSEL DESLIZABLE SNAP SLIDER DE SÍNTOMAS IT EN MÓVILES (< 992px) ── */
@media (max-width: 991px) {
    .svc-theme-outsourcing-it-cartagena .svc-problemas-split {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 24px !important;
        align-items: center !important;
    }

    .svc-theme-outsourcing-it-cartagena .svc-problemas-col-info {
        position: static !important;
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }

    .svc-theme-outsourcing-it-cartagena .svc-problemas-col-info .section-tag {
        margin-inline: auto !important;
        margin-bottom: 10px !important;
    }

    .svc-theme-outsourcing-it-cartagena .svc-problemas-col-info .section-title {
        font-size: clamp(1.55rem, 5.2vw, 2rem) !important;
        line-height: 1.25 !important;
        text-align: center !important;
        margin: 0 auto 12px auto !important;
    }

    .svc-theme-outsourcing-it-cartagena .svc-problemas-col-info .section-sub {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        text-align: center !important;
        margin: 0 auto 18px auto !important;
    }

    .svc-theme-outsourcing-it-cartagena .svc-problemas-cta-box {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 auto 8px auto !important;
    }

    .svc-theme-outsourcing-it-cartagena .svc-problemas-cta-box .btn {
        width: 100% !important;
        max-width: 340px !important;
        justify-content: center !important;
        margin-inline: auto !important;
    }


    /* CARRUSEL HORIZONTAL TÁCTIL (SNAP SLIDER) */
    .svc-theme-outsourcing-it-cartagena .svc-problemas-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 14px !important;
        width: 100% !important;
        padding: 8px 4px 20px 4px !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important;  /* IE/Edge */
    }

    .svc-theme-outsourcing-it-cartagena .svc-problemas-grid::-webkit-scrollbar {
        display: none !important; /* Chrome/Safari */
    }

    .svc-theme-outsourcing-it-cartagena .svc-problema-card {
        flex: 0 0 85% !important;
        max-width: 320px !important;
        scroll-snap-align: center !important;
        padding: 24px 20px !important;
        border-radius: 20px !important;
        box-sizing: border-box !important;
        height: auto !important;
        background: #FFFFFF !important;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
        border: 1px solid rgba(8, 102, 245, 0.15) !important;
    }

    html[data-theme="dark"] .svc-theme-outsourcing-it-cartagena .svc-problema-card {
        background: #1E293B !important;
        border-color: rgba(56, 189, 248, 0.25) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    }

    .svc-theme-outsourcing-it-cartagena .svc-card-curl-badge {
        top: 14px !important;
        right: 14px !important;
        padding: 3px 10px !important;
    }

    .svc-theme-outsourcing-it-cartagena .svc-curl-num {
        font-size: 10px !important;
    }

    .svc-theme-outsourcing-it-cartagena .svc-problema-icon {
        width: 44px !important;
        height: 44px !important;
        padding: 8px !important;
        border-radius: 12px !important;
        margin-bottom: 14px !important;
    }

    .svc-theme-outsourcing-it-cartagena .svc-problema-icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    .svc-theme-outsourcing-it-cartagena .svc-problema-card h3 {
        font-size: 15px !important;
        line-height: 1.35 !important;
        font-weight: 700 !important;
        margin: 10px 0 8px 0 !important;
    }

    .svc-theme-outsourcing-it-cartagena .svc-problema-card p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }
}

/* ── CENTRADO RESPONSIVO SOPORTE TI MÓVIL (< 992px) ── */
@media (max-width: 992px) {
    .svc-theme-soporte-ti-cartagena .svc-problemas-split {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        align-items: center !important;
    }

    .svc-theme-soporte-ti-cartagena .svc-problemas-col-info {
        position: relative !important;
        top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .svc-theme-soporte-ti-cartagena .svc-problemas-col-info .section-tag {
        margin-inline: auto !important;
        margin-bottom: 12px !important;
    }

    .svc-theme-soporte-ti-cartagena .svc-problemas-col-info .section-title {
        text-align: center !important;
        margin: 0 auto 14px auto !important;
    }

    .svc-theme-soporte-ti-cartagena .svc-problemas-col-info .section-sub {
        text-align: center !important;
        margin: 0 auto 18px auto !important;
    }

    .svc-theme-soporte-ti-cartagena .svc-problemas-cta-box {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }

    .svc-theme-soporte-ti-cartagena .svc-problemas-cta-box .btn {
        width: 100% !important;
        max-width: 340px !important;
        justify-content: center !important;
        margin-inline: auto !important;
    }

    /* ENCABEZADO Y LIVE TAG DEL DASHBOARD CENTRADOS */
    .svc-theme-soporte-ti-cartagena .svc-helpdesk-dashboard__header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 10px !important;
    }

    .svc-theme-soporte-ti-cartagena .svc-helpdesk-dashboard__title-box {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .svc-theme-soporte-ti-cartagena .svc-helpdesk-dashboard__live-tag {
        margin-inline: auto !important;
        align-self: center !important;
    }

    /* MINI TARJETAS INFERIORES CENTRADAS */
    .svc-theme-soporte-ti-cartagena .svc-helpdesk-mini-cards {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 14px !important;
    }

    .svc-theme-soporte-ti-cartagena .svc-mini-card {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 18px 16px !important;
        box-sizing: border-box !important;
    }

    .svc-theme-soporte-ti-cartagena .svc-mini-card__icon {
        margin: 0 auto 10px auto !important;
    }

    .svc-theme-soporte-ti-cartagena .svc-mini-card strong {
        display: block !important;
        text-align: center !important;
        margin-bottom: 4px !important;
    }

    .svc-theme-soporte-ti-cartagena .svc-mini-card p {
        text-align: center !important;
        margin: 0 auto !important;
    }
}

/* ── INSIGNIA IDE Y SCREEN BAR EN ESCRITORIO Y GENERAL ── */
.svc-theme-software-automatizacion-cartagena .svc-principio-card__screen-bar {
    width: calc(100% + 48px);
    margin-left: -24px;
    margin-right: -24px;
    padding: 10px 18px;
    background: #F1F5F9;
    border-bottom: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.svc-theme-software-automatizacion-cartagena .svc-principio-badge {
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #0866F5;
    background: rgba(8, 102, 245, 0.08);
    border: 1px solid rgba(8, 102, 245, 0.22);
    padding: 3px 10px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(8, 102, 245, 0.06);
    transition: all 0.3s ease;
}

.svc-theme-software-automatizacion-cartagena .svc-principio-card:hover .svc-principio-badge {
    background: #0866F5;
    color: #FFFFFF;
    border-color: #0866F5;
    box-shadow: 0 4px 12px rgba(8, 102, 245, 0.35);
}

/* ── CARRUSEL DESLIZABLE SNAP SLIDER DE SOFTWARE & AUTOMATIZACIÓN EN MÓVILES (< 992px) ── */
@media (max-width: 991px) {

    .svc-theme-software-automatizacion-cartagena .svc-problemas-split {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 24px !important;
        align-items: center !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-problemas-col-info {
        position: static !important;
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-problemas-col-info .section-tag {
        margin-inline: auto !important;
        margin-bottom: 10px !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-problemas-col-info .section-title {
        font-size: clamp(1.55rem, 5.2vw, 2rem) !important;
        line-height: 1.25 !important;
        text-align: center !important;
        margin: 0 auto 12px auto !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-problemas-col-info .section-sub {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        text-align: center !important;
        margin: 0 auto 18px auto !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-problemas-cta-box {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 auto 8px auto !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-problemas-cta-box .btn {
        width: 100% !important;
        max-width: 340px !important;
        justify-content: center !important;
        margin-inline: auto !important;
    }

    /* CARRUSEL HORIZONTAL TÁCTIL (SNAP SLIDER) */
    .svc-theme-software-automatizacion-cartagena .svc-problemas-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 14px !important;
        width: 100% !important;
        padding: 8px 4px 20px 4px !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-problemas-grid::-webkit-scrollbar {
        display: none !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-problema-card {
        flex: 0 0 85% !important;
        max-width: 320px !important;
        min-width: 270px !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding: 24px 20px !important;
        border-radius: 20px !important;
        background: var(--ts-card-bg, #FFFFFF);
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
        border: 1px solid rgba(8, 102, 245, 0.15) !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-card-curl-badge {
        top: 14px !important;
        right: 14px !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-curl-num {
        font-size: 10px !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-problema-icon {
        width: 44px !important;
        height: 44px !important;
        padding: 8px !important;
        border-radius: 12px !important;
        margin-bottom: 14px !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-problema-icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-problema-card h3 {
        font-size: 15px !important;
        line-height: 1.35 !important;
        font-weight: 700 !important;
        margin: 10px 0 8px 0 !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-problema-card p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    /* GRILLA RESPONSIVA DE 2 COLUMNAS PARA SOLUCIONES / PRINCIPIOS */
    .svc-theme-software-automatizacion-cartagena .svc-principios-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-principio-card {
        padding: 14px 10px !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-principio-card__screen-bar {
        padding: 6px 10px !important;
        margin-bottom: 12px !important;
        width: calc(100% + 20px) !important;
        margin-left: -10px !important;
        margin-right: -10px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: #F8FAFC !important;
        border-bottom: 1px solid #E2E8F0 !important;
        border-top-left-radius: 15px !important;
        border-top-right-radius: 15px !important;
    }

    [data-theme="dark"] .svc-theme-software-automatizacion-cartagena .svc-principio-card__screen-bar {
        background: #0F172A !important;
        border-bottom-color: #334155 !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-screen-dot {
        width: 6px !important;
        height: 6px !important;
        flex-shrink: 0 !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-principio-badge {
        font-size: 8px !important;
        font-weight: 800 !important;
        letter-spacing: 0.3px !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
        background: rgba(8, 102, 245, 0.1) !important;
        color: #0866F5 !important;
        border: 1px solid rgba(8, 102, 245, 0.2) !important;
    }

    [data-theme="dark"] .svc-theme-software-automatizacion-cartagena .svc-principio-badge {
        background: rgba(56, 189, 248, 0.15) !important;
        color: #38BDF8 !important;
        border-color: rgba(56, 189, 248, 0.3) !important;
    }


    .svc-theme-software-automatizacion-cartagena .svc-principio-icon {
        width: 38px !important;
        height: 38px !important;
        padding: 7px !important;
        margin: 0 auto 10px auto !important;
        border-radius: 10px !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-principio-icon svg {
        width: 22px !important;
        height: 22px !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-principio-card h3 {
        font-size: 13.5px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        text-align: center !important;
        margin: 0 0 6px 0 !important;
    }

    .svc-theme-software-automatizacion-cartagena .svc-principio-card p {
        font-size: 11.5px !important;
        line-height: 1.45 !important;
        text-align: center !important;
        color: #475569 !important;
        margin: 0 !important;
    }
}

/* ── CHIPS FLOTANTES B2B SAAS PARA HERO MICROBENEFITS ── */
.svc-hero__microbenefits {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px 10px !important;
    margin-top: 24px !important;
    width: 100% !important;
    max-width: 840px !important;
    margin-inline: auto !important;
}

.svc-hero__microbenefits .bullet {
    display: none !important;
}

.svc-microchip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 6px 14px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(8, 102, 245, 0.16) !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.svc-microchip:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(8, 102, 245, 0.4) !important;
    box-shadow: 0 6px 18px rgba(8, 102, 245, 0.15) !important;
}

.svc-microchip__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: rgba(8, 102, 245, 0.1) !important;
    color: #0866F5 !important;
    flex-shrink: 0 !important;
}

html[data-theme="dark"] .svc-microchip {
    background: rgba(15, 23, 42, 0.82) !important;
    border-color: rgba(56, 189, 248, 0.22) !important;
    color: #F1F5F9 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .svc-microchip__icon {
    background: rgba(56, 189, 248, 0.18) !important;
    color: #38BDF8 !important;
}

/* ── CENTRADO SIMÉTRICO HERO REDES EMPRESARIALES EN MÓVILES (< 992px) ── */
@media (max-width: 991px) {
    .svc-theme-redes-empresariales-cartagena .svc-hero {
        text-align: center !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .svc-theme-redes-empresariales-cartagena .page-hero__tag {
        margin-inline: auto !important;
        display: inline-block !important;
        text-align: center !important;
    }

    .svc-theme-redes-empresariales-cartagena .svc-hero h1 {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
    }

    .svc-theme-redes-empresariales-cartagena .svc-hero p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 92% !important;
    }

    .svc-theme-redes-empresariales-cartagena .svc-hero__actions {
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    .svc-theme-redes-empresariales-cartagena .net-hero-pills {
        justify-content: center !important;
    }
}

/* ── DESPEJE RESPONSIVO MÓVIL HERO & PAGE-HERO__TAG ── */
@media (max-width: 991px) {
    .page-hero,
    .svc-hero {
        padding-top: clamp(120px, 14vw, 140px) !important;
    }

    .page-hero__tag {
        margin-top: 8px !important;
        margin-bottom: 16px !important;
        margin-inline: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        max-width: 90% !important;
        line-height: 1.35 !important;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12) !important;
    }
}

/* ── CENTRADO MILIMÉTRICO DE SLIDES HERO EN VISTA HOGAR ── */
.hg-hero__scene[data-hero-carousel] {
    display: grid !important;
    grid-template-areas: "hero-slide" !important;
    place-items: center !important;
    justify-content: center !important;
    margin-inline: auto !important;
}

.hg-hero__scene[data-hero-carousel] .hm-hero__slide {
    grid-area: hero-slide !important;
    margin: 0 auto !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    max-width: 100% !important;
}

/* ── INDICADORES CARROUSEL DE CONFIANZA HOGAR ── */
.hg-confianza-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 20px !important;
    margin-inline: auto !important;
    width: 100% !important;
}

.hg-confianza-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 999px !important;
    background: rgba(8, 102, 245, 0.22) !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
}

.hg-confianza-dot.is-active {
    width: 28px !important;
    height: 10px !important;
    background: #0866F5 !important;
    box-shadow: 0 2px 8px rgba(8, 102, 245, 0.35) !important;
}

html[data-theme="dark"] .hg-confianza-dot {
    background: rgba(56, 189, 248, 0.25) !important;
}

html[data-theme="dark"] .hg-confianza-dot.is-active {
    background: #38BDF8 !important;
    box-shadow: 0 2px 8px rgba(56, 189, 248, 0.4) !important;
}

/* ── INDICADORES CARROUSEL DE TESTIMONIOS HOGAR ── */
.hg-testimonial-carousel__dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 20px !important;
    margin-inline: auto !important;
    width: 100% !important;
}

.hg-testimonial-carousel__dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 999px !important;
    background: rgba(8, 102, 245, 0.22) !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
}

.hg-testimonial-carousel__dot.is-active {
    width: 28px !important;
    height: 10px !important;
    background: #0866F5 !important;
    box-shadow: 0 2px 8px rgba(8, 102, 245, 0.35) !important;
}

html[data-theme="dark"] .hg-testimonial-carousel__dot {
    background: rgba(56, 189, 248, 0.25) !important;
}

html[data-theme="dark"] .hg-testimonial-carousel__dot.is-active {
    background: #38BDF8 !important;
    box-shadow: 0 2px 8px rgba(56, 189, 248, 0.4) !important;
}

/* ── LÍNEA DE TIEMPO RESPONSIVA DE PROCESO HOGAR ── */

/* A. Reglas Base para Escritorio (>= 981px): Horizontal 4-Column Stepper */
@media (min-width: 981px) {
    .hg-proceso__steps {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .hg-proceso__step {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) !important;
        column-gap: 12px !important;
        padding-top: 38px !important;
        padding-bottom: 0 !important;
        width: 100% !important;
    }

    .hg-proceso__number {
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: grid !important;
        place-items: center !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: #fff !important;
        border: 1.5px solid var(--ts-border, #e7edf6) !important;
        box-shadow: 0 4px 10px rgba(13, 38, 76, 0.04) !important;
        font: 700 12.5px/1 var(--ts-font-h) !important;
        color: var(--ts-brand) !important;
        overflow: hidden !important;
        z-index: 3 !important;
    }

    .hg-proceso__line-progress {
        position: absolute !important;
        top: 17px !important;
        left: calc(50% + 18px) !important;
        right: calc(-50% - 8px) !important;
        height: 2px !important;
        width: auto !important;
        bottom: auto !important;
        background: linear-gradient(90deg, #0866F5 0%, #3B82F6 100%) !important;
        box-shadow: 0 0 8px rgba(8, 102, 245, 0.5) !important;
        transform: scaleX(0) !important;
        transform-origin: left center !important;
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 2 !important;
    }

    .hg-proceso__step.is-line-active .hg-proceso__line-progress {
        transform: scaleX(1) !important;
    }

    .hg-proceso__step:last-child .hg-proceso__line-progress {
        display: none !important;
    }
}

/* B. Reglas para Móvil (< 980px): Línea de Tiempo Vertical */
@media (max-width: 980px) {
    .hg-proceso__steps {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
    }

    .hg-proceso__step {
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
        position: relative !important;
        padding-top: 0 !important;
        padding-left: 48px !important;
        padding-bottom: 28px !important;
        width: 100% !important;
    }

    .hg-proceso__step:last-child {
        padding-bottom: 0 !important;
    }

    .hg-proceso__number {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        flex-shrink: 0 !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: #F1F5F9 !important;
        border: 2px solid #CBD5E1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 3 !important;
        overflow: hidden !important;
    }

    .hg-proceso__step::before {
        content: '' !important;
        position: absolute !important;
        left: 17px !important;
        top: 36px !important;
        bottom: -24px !important;
        width: 0 !important;
        border-left: 2px dashed #CBD5E1 !important;
        border-top: 0 !important;
        right: auto !important;
        height: auto !important;
        display: block !important;
        z-index: 1 !important;
    }

    .hg-proceso__step:last-child::before {
        display: none !important;
    }

    .hg-proceso__line-progress {
        position: absolute !important;
        left: 17px !important;
        top: 36px !important;
        bottom: -24px !important;
        width: 2px !important;
        height: auto !important;
        right: auto !important;
        background: transparent !important;
        transform: none !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }

    .hg-proceso__line-progress::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 0% !important;
        background: #0866F5 !important;
        transition: height 0.8s ease-in-out !important;
        box-shadow: 0 0 8px rgba(8, 102, 245, 0.5) !important;
    }

    .hg-proceso__step.is-line-active .hg-proceso__line-progress::after {
        height: 100% !important;
    }

    .hg-proceso__icon {
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
        background: rgba(8, 102, 245, 0.08) !important;
        color: #0866F5 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .hg-proceso__copy {
        flex: 1 !important;
        min-width: 0 !important;
        margin-top: 2px !important;
    }

    .hg-proceso__copy h3 {
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        color: #0F172A !important;
        margin: 0 0 6px 0 !important;
        line-height: 1.35 !important;
    }

    .hg-proceso__copy p {
        font-size: 0.88rem !important;
        color: #475569 !important;
        margin: 0 !important;
        line-height: 1.55 !important;
    }
}