:root {
            --ink: #3C3C3B;
            --blue: #1A6A88;
            --blue-hover: #20799B;
            --blue-glow: rgba(26, 106, 136, 0.28);
            --sky: #46BAEB;
            --sky-light: #EDF7FC;
            --line: #DCE8EF;
            --soft: #F5FAFD;
            --muted: #4F4F4D;
            --dark-bg: #2E2E2D;
            --font-main: 'Poppins', system-ui, -apple-system, sans-serif;
            --radius-sm: 10px;
            --radius-md: 18px;
            --radius-lg: 28px;
            --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
            overflow-x: clip;
        }

        body {
            font-family: var(--font-main);
            color: var(--ink);
            background-color: #ffffff;
            font-size: 16px;
            line-height: 1.6;
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
            overflow-x: clip;
            position: relative;
            -webkit-font-smoothing: antialiased;
        }

        a {
            text-decoration: none;
            color: inherit;
            transition: var(--transition-smooth);
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        @keyframes floatSlow {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-10px) rotate(1deg); }
        }

        @keyframes orbitRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes orbitRotateReverse {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(-360deg); }
        }

        @keyframes pulseGlow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(26, 106, 136, 0.4); }
            50% { box-shadow: 0 0 0 14px rgba(26, 106, 136, 0); }
        }

        @keyframes progressLine {
            0% { width: 0%; }
            100% { width: 100%; }
        }

        @keyframes bgGradientGlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes orbFloatSlow {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.45; }
            50% { transform: translate(35px, -30px) scale(1.18); opacity: 0.75; }
        }

        @keyframes orbFloatReverse {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.35; }
            50% { transform: translate(-30px, 25px) scale(1.22); opacity: 0.65; }
        }

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

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

        .reveal-delay-1 { transition-delay: 0.15s; }
        .reveal-delay-2 { transition-delay: 0.3s; }
        .reveal-delay-3 { transition-delay: 0.45s; }

        .site-header {
            height: 86px;
            padding: 0 6vw;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--line);
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(12px);
            position: sticky;
            top: 0;
            z-index: 100;
            width: 100%;
            max-width: 100%;
        }

        .brand {
            display: flex;
            align-items: center;
            flex-shrink: 0;   /* la marca nunca se comprime */
        }

        /* Logo oficial de Anikat: img/logo-anikat.png (499x220 px, fondo
           transparente). El archivo trae tres franjas: la marca (y 2-182), la
           bajada (y 187-208) y un pie de letra muy pequeño (y 212-219). A 54 px
           de alto la bajada mediría 3,4 px y el pie 1,7 px: se verían como una
           mancha gris. Por eso se muestra SOLO la franja de la marca con
           object-fit: cover y object-position: top, sobre una caja de 146x54 px
           (misma huella que el logo anterior: 54 px de alto dejan 16 px libres
           arriba y abajo en el encabezado de 86 px, y el ancho queda igualado con
           la navegación, así nada se corre ni se deforma). */
        .brand-logo {
            display: block;
            height: 64px;
            width: auto;
            max-width: 100%;
            object-fit: contain;   /* si el ancho se limita, se encoge sin deformarse */
        }

        /* En el pie el logotipo va un poco más grande que en el encabezado (80 px de
           alto, 181 px de ancho) para dar jerarquía sin desentonar: ocupa algo más de
           la mitad de la columna de marca (341 px) y la bajada mide unos 8 px. */
        .footer .brand-logo {
            height: 80px;
        }

        .desktop-nav {
            display: flex;
            gap: 36px;
            font-size: 14px;
            font-weight: 600;
            color: var(--muted);
        }

        .desktop-nav a {
            position: relative;
            padding: 6px 0;
        }

        .desktop-nav a::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0%;
            height: 2px;
            background: var(--blue);
            transition: var(--transition-smooth);
            border-radius: 2px;
        }

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

        .desktop-nav a:hover::after {
            width: 100%;
        }

        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 14px 26px;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 700;
            transition: var(--transition-smooth);
            cursor: pointer;
            border: none;
            position: relative;
            overflow: hidden;
            max-width: 100%;
        }

        .button::before {
            content: "";
            position: absolute;
            top: 0; left: -100%;
            width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
            transition: 0.6s;
        }

        .button:hover::before {
            left: 100%;
        }

        .button:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 28px var(--blue-glow);
        }

        .button span {
            font-size: 16px;
            transition: transform 0.3s ease;
        }

        .button:hover span {
            transform: translateX(4px) translateY(-2px);
        }

        .button-small {
            padding: 10px 20px;
            font-size: 13px;
        }

        .button-blue {
            background: var(--blue);
            color: #fff;
        }

        .button-blue:hover {
            background: var(--blue-hover);
        }

        .button-dark {
            background: var(--ink);
            color: #fff;
        }

        .button-dark:hover {
            background: #000;
        }

        .button-light {
            background: #fff;
            color: var(--blue);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }

        .button-light:hover {
            background: var(--sky-light);
        }

        .pulse-btn {
            animation: pulseGlow 3s infinite ease-in-out;
        }

        .hero {
            min-height: 640px;
            display: grid;
            grid-template-columns: 1.05fr 0.95fr;
            align-items: center;
            gap: 40px;
            padding: 80px 6vw 90px;
            background: radial-gradient(circle at 85% 15%, #EDF7FC 0%, #ffffff 65%);
            overflow: hidden;
            position: relative;
            width: 100%;
            max-width: 100%;
        }

        .hero-copy, .hero-visual {
            min-width: 0;
            width: 100%;
        }

        .eyebrow {
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--blue);
            font-weight: 800;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }

        .eyebrow-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--blue);
            margin-right: 10px;
            box-shadow: 0 0 10px var(--blue);
        }

        h1 {
            font-size: clamp(34px, 4.5vw, 72px);
            line-height: 1.08;
            letter-spacing: -2px;
            margin-bottom: 24px;
            color: var(--ink);
            font-weight: 800;
            overflow-wrap: break-word;
            word-break: break-word;
        }

        h1 em, h2 em {
            font-style: normal;
            background: linear-gradient(135deg, var(--blue) 0%, #46BAEB 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-lede {
            max-width: 520px;
            color: var(--muted);
            font-size: 17px;
            line-height: 1.7;
        }

        .hero-actions {
            display: flex;
            align-items: center;
            gap: 24px;
            margin-top: 36px;
            flex-wrap: wrap;
        }

        .text-link, .arrow-link {
            font-size: 14px;
            color: var(--blue);
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .text-link:hover, .arrow-link:hover {
            color: var(--blue-hover);
            transform: translateX(4px);
        }

        .hero-proof {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--muted);
            font-size: 12px;
            margin-top: 50px;
            font-weight: 600;
        }

        .proof-line {
            height: 2px;
            width: 32px;
            background: var(--sky);
        }

        .hero-visual {
            height: auto;
            min-height: 460px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 100%;
        }

        .benefit-section {
            background: #ffffff;
            width: 100%;
            max-width: 100%;
        }

        .benefit-separator {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            padding: 28px 6vw;
            background: var(--dark-bg);
            color: #ffffff;
            width: 100%;
            max-width: 100%;
            flex-wrap: wrap;
        }

        .benefit-separator::before {
            content: "";
            position: absolute;
            top: -16px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 16px solid transparent;
            border-right: 16px solid transparent;
            border-bottom: 16px solid var(--dark-bg);
        }

        .benefit-separator p {
            margin: 0;
            color: #d1d9de;
            font-size: 14px;
            font-weight: 500;
            flex: 1 1 300px;
            min-width: 0;
            line-height: 1.5;
        }

        .section {
            padding: 80px 6vw;
            width: 100%;
            max-width: 100%;
        }

        .intro-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
            background: linear-gradient(135deg, rgba(238, 245, 251, 0.75) 0%, rgba(255, 255, 255, 1) 100%);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            padding: 50px 5vw;
            box-shadow: 0 20px 50px rgba(26, 106, 136, 0.06);
            position: relative;
            overflow: hidden;
            width: 100%;
            max-width: 100%;
        }

        .section-intro, .intro-copy {
            min-width: 0;
            width: 100%;
        }

        .intro-section::before {
            content: "";
            position: absolute;
            top: -60px;
            right: -60px;
            width: 220px;
            height: 220px;
            background: radial-gradient(circle, rgba(165, 200, 216, 0.35) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }

        .intro-highlight-box {
            background: #ffffff;
            border-left: 4px solid var(--blue);
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
            padding: 18px 22px;
            margin: 22px 0;
            box-shadow: 0 10px 25px rgba(26, 106, 136, 0.05);
        }

        .intro-highlight-box p {
            margin: 0 !important;
            font-weight: 700;
            color: var(--ink);
            font-size: 15px !important;
            line-height: 1.5 !important;
        }

        .intro-pillars-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            margin: 24px 0;
            width: 100%;
        }

        .pillar-card {
            background: #ffffff;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            padding: 18px 20px;
            display: flex;
            align-items: center;
            gap: 14px;
            transition: var(--transition-smooth);
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(0,0,0,0.02);
            min-width: 0;
            width: 100%;
        }

        .pillar-card:hover {
            border-color: var(--blue);
            transform: translateY(-5px);
            box-shadow: 0 16px 32px rgba(26, 106, 136, 0.12);
            background: var(--sky-light);
        }

        .pillar-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: rgba(26, 106, 136, 0.08);
            color: var(--blue);
            display: grid;
            place-items: center;
            flex-shrink: 0;
            transition: var(--transition-smooth);
        }

        .pillar-card:hover .pillar-icon {
            background: var(--blue);
            color: #ffffff;
            transform: rotate(5deg) scale(1.08);
        }

        .pillar-icon svg {
            width: 22px;
            height: 22px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .pillar-info strong {
            display: block;
            font-size: 14px;
            color: var(--ink);
            font-weight: 800;
        }

        .pillar-info span {
            display: block;
            font-size: 12px;
            color: var(--muted);
            font-weight: 500;
        }

        .services-section {
            background: var(--soft);
            width: 100%;
            max-width: 100%;
        }

        .section-title-row {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 36px;
            flex-wrap: wrap;
            width: 100%;
        }

        .section-title-row > div {
            flex: 1 1 320px;
            min-width: 0;
        }

        .section-title-row > p {
            flex: 1 1 280px;
            max-width: 480px;
            color: var(--muted);
            font-size: 15px;
            margin: 0;
            line-height: 1.7;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-top: 50px;
            width: 100%;
        }

        .service-card {
            background: #ffffff;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            padding: 32px 24px;
            position: relative;
            transition: var(--transition-smooth);
            display: flex;
            flex-direction: column;
            min-width: 0;
            width: 100%;
        }

        .service-card:hover {
            border-color: var(--sky);
            transform: translateY(-10px);
            box-shadow: 0 22px 45px rgba(26, 106, 136, 0.1);
        }

        .service-image {
            width: 76px;
            height: 76px;
            border-radius: 50%;
            overflow: hidden;
            border: 4px solid var(--sky-light);
            margin: 0 auto 20px;
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
            background: var(--sky-light);
        }

        .service-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .service-card:hover .service-image img {
            transform: scale(1.15);
        }

        .service-number {
            position: absolute;
            left: 20px;
            top: 20px;
            font-size: 11px;
            font-weight: 800;
            color: var(--sky);
        }

        .service-symbol {
            position: absolute;
            right: 20px;
            top: 18px;
            color: var(--blue);
            font-size: 18px;
        }

        .service-card h3 {
            font-size: 19px;
            font-weight: 800;
            text-align: center;
            margin-bottom: 12px;
        }

        .service-card p {
            font-size: 13px;
            color: var(--muted);
            text-align: center;
            line-height: 1.6;
            flex: 1;
            margin-bottom: 24px;
        }

        .service-card a {
            font-size: 13px;
            color: var(--blue);
            font-weight: 700;
            text-align: center;
            display: block;
        }

        .services-note {
            max-width: 750px;
            margin: 45px auto 0;
            text-align: center;
            color: var(--muted);
            font-size: 14px;
        }

        .suite-section {
            display: grid;
            grid-template-columns: 0.9fr 1.1fr;
            gap: 50px;
            align-items: center;
            width: 100%;
            max-width: 100%;
        }

        .suite-copy, .suite-visual {
            min-width: 0;
            width: 100%;
            max-width: 100%;
        }

        .suite-view-toggle {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            margin-bottom: 16px;
        }

        .view-btn {
            background: #ffffff;
            border: 1px solid var(--line);
            padding: 8px 14px;
            border-radius: var(--radius-sm);
            font-size: 12px;
            font-weight: 700;
            color: var(--muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: var(--transition-smooth);
        }

        .view-btn.active, .view-btn:hover {
            background: var(--blue);
            color: #ffffff;
            border-color: var(--blue);
            box-shadow: 0 4px 12px var(--blue-glow);
        }

        .suite-interactive-viewer {
            background: #ffffff;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: 0 25px 60px rgba(26, 106, 136, 0.14);
            overflow: hidden;
            position: relative;
            width: 100%;
            max-width: 100%;
        }

        .suite-tabs-nav {
            display: flex;
            background: var(--soft);
            border-bottom: 1px solid var(--line);
            padding: 8px;
            gap: 6px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            width: 100%;
        }

        .suite-tab-btn {
            flex: 1 0 auto;
            padding: 10px 14px;
            border: none;
            background: transparent;
            font-family: var(--font-main);
            font-size: 12px;
            font-weight: 700;
            color: var(--muted);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: var(--transition-smooth);
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .suite-tab-btn svg {
            width: 16px;
            height: 16px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .suite-tab-btn.active {
            background: #ffffff;
            color: var(--blue);
            box-shadow: 0 4px 14px rgba(0,0,0,0.06);
        }

        .suite-display-container {
            position: relative;
            height: 330px;
            overflow: hidden;
            background: #2E2E2D;
            width: 100%;
            max-width: 100%;
        }

        .suite-slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            transform: scale(0.98);
            transition: opacity 0.6s ease, transform 0.6s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .suite-slide.active {
            opacity: 1;
            transform: scale(1);
            z-index: 2;
        }

        .suite-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            cursor: zoom-in;
            transition: transform 0.6s ease;
        }

        .suite-slide:hover img {
            transform: scale(1.03);
        }

        .slide-caption-bar {
            position: absolute;
            bottom: 0;
            left: 0; right: 0;
            padding: 14px 20px;
            background: linear-gradient(0deg, rgba(7, 11, 14, 0.9) 0%, rgba(7, 11, 14, 0.4) 70%, transparent 100%);
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 3;
            font-size: 12px;
            backdrop-filter: blur(4px);
            gap: 10px;
        }

        .slide-caption-bar span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .slide-caption-bar strong {
            flex-shrink: 0;
        }

        .progress-bar-line {
            height: 3px;
            background: var(--blue);
            width: 0%;
            position: absolute;
            top: 0; left: 0;
            z-index: 5;
        }

        .progress-bar-line.animating {
            animation: progressLine 5s linear infinite;
        }

        /* Visor de video (YouTube) */
        .suite-video-viewer {
            display: none;
            background: #ffffff;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: 0 25px 60px rgba(26, 106, 136, 0.14);
            overflow: hidden;
            position: relative;
            width: 100%;
            max-width: 100%;
        }
        .video-frame {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            background: #2E2E2D;
        }
        .video-frame iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
            display: block;
        }
        .video-caption {
            padding: 14px 20px;
            background: var(--soft);
            border-top: 1px solid var(--line);
            color: var(--muted);
            font-size: 12px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .video-caption strong {
            color: var(--blue);
            font-size: 13px;
        }

        .suite-note {
            background: var(--sky-light);
            border: 1px solid var(--sky);
            color: var(--blue);
            padding: 16px 20px;
            font-size: 13px;
            border-radius: var(--radius-sm);
            margin-top: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .bridge-cta {
            position: relative;
            overflow: hidden;
            width: 100%;
            max-width: 100%;
            padding: 70px 6vw;
            background: linear-gradient(135deg, #09131a 0%, #0e2d3e 50%, #111a22 100%);
            color: #fff;
            border-top: 1px solid rgba(165, 200, 216, 0.25);
            border-bottom: 1px solid rgba(165, 200, 216, 0.25);
            box-shadow: inset 0 0 120px rgba(26, 106, 136, 0.4);
        }

        .bridge-inner {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
            flex-wrap: wrap;
        }

        .bridge-inner > div {
            flex: 1 1 320px;
            min-width: 0;
        }

        .bridge-inner .eyebrow {
            color: #46BAEB;
            letter-spacing: 2px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(26, 106, 136, 0.35);
            padding: 6px 14px;
            border-radius: 20px;
            border: 1px solid rgba(70, 186, 235, 0.3);
            box-shadow: 0 0 15px rgba(70, 186, 235, 0.15);
            margin-bottom: 16px;
        }

        .bridge-inner h2 {
            color: #ffffff;
            font-size: clamp(28px, 3.2vw, 46px);
            margin-bottom: 14px;
            line-height: 1.12;
            letter-spacing: -1.2px;
            font-weight: 800;
        }

        .bridge-inner p:not(.eyebrow) {
            color: #cbd5e1;
            font-size: 16px;
            max-width: 680px;
            line-height: 1.65;
        }

        .bridge-glow {
            position: absolute;
            border-radius: 50%;
            filter: blur(90px);
            pointer-events: none;
        }

        .bridge-glow-one {
            width: 450px;
            height: 450px;
            background: radial-gradient(circle, rgba(26, 106, 136, 0.75) 0%, transparent 70%);
            right: -80px;
            top: -100px;
            animation: floatSlow 8s ease-in-out infinite alternate;
        }

        .bridge-glow-two {
            width: 350px;
            height: 350px;
            background: radial-gradient(circle, rgba(70, 186, 235, 0.45) 0%, transparent 70%);
            left: -80px;
            bottom: -100px;
            animation: floatSlow 10s ease-in-out infinite alternate-reverse;
        }

        .bridge-cta-btn {
            background: #ffffff !important;
            color: #1A6A88 !important;
            font-size: 15px !important;
            padding: 18px 36px !important;
            border-radius: var(--radius-sm) !important;
            font-weight: 800 !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 255, 255, 0.25) !important;
            transition: var(--transition-smooth) !important;
            white-space: nowrap;
            flex-shrink: 0;
            border: 1px solid rgba(255, 255, 255, 0.9) !important;
        }

        .bridge-cta-btn:hover {
            transform: translateY(-5px) scale(1.03) !important;
            background: #F2FAFD !important;
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4), 0 0 45px rgba(70, 186, 235, 0.5) !important;
            color: #20799B !important;
        }

        .benefit-section2 {
            position: relative;
            background: linear-gradient(-45deg, #0d1217, #131d24, #0b151c, #161e26);
            background-size: 400% 400%;
            animation: bgGradientGlow 15s ease infinite;
            color: #fff;
            overflow: hidden;
            padding: 90px 6vw;
            width: 100%;
            max-width: 100%;
        }

        .benefit-bg-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(90px);
            pointer-events: none;
            z-index: 1;
        }

        .benefit-orb-1 {
            width: 480px;
            height: 480px;
            background: radial-gradient(circle, rgba(26, 106, 136, 0.5) 0%, transparent 70%);
            top: -100px;
            left: -80px;
            animation: orbFloatSlow 12s ease-in-out infinite;
        }

        .benefit-orb-2 {
            width: 520px;
            height: 520px;
            background: radial-gradient(circle, rgba(70, 186, 235, 0.3) 0%, transparent 70%);
            bottom: -120px;
            right: -100px;
            animation: orbFloatReverse 14s ease-in-out infinite;
        }

        .benefit-mesh-pattern {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(165, 200, 216, 0.08) 1px, transparent 1px);
            background-size: 32px 32px;
            pointer-events: none;
            z-index: 1;
        }

        .benefit-section2 .section-intro.centered {
            text-align: center;
            max-width: 780px;
            margin: 0 auto 50px;
            position: relative;
            z-index: 2;
        }

        .benefit-section2 .eyebrow {
            justify-content: center;
            color: #46BAEB;
            letter-spacing: 2.5px;
            font-size: 12px;
            margin-bottom: 16px;
        }

        .benefit-section2 .eyebrow-dot {
            background: #46BAEB;
            box-shadow: 0 0 12px #46BAEB;
        }

        .benefit-section2 h2 {
            color: #ffffff;
            font-size: clamp(30px, 3.6vw, 52px);
            line-height: 1.1;
            margin-bottom: 18px;
            font-weight: 800;
        }

        .benefit-section2 h2 em {
            background: linear-gradient(135deg, #46BAEB 0%, #7FCBEA 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .benefit-section2 .section-lede {
            color: #94a3b8;
            font-size: 16px;
            line-height: 1.7;
            max-width: 640px;
            margin: 0 auto;
        }

        .asymmetric-benefit-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            max-width: 1100px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
            width: 100%;
        }

        .asymmetric-card {
            background: rgba(255, 255, 255, 0.035);
            border: 1px solid rgba(255, 255, 255, 0.09);
            backdrop-filter: blur(14px);
            border-radius: var(--radius-md);
            padding: 30px 24px;
            position: relative;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            min-width: 0;
        }

        .asymmetric-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #46BAEB, transparent);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .asymmetric-card:nth-child(1) { border-left: 3px solid #46BAEB; }
        .asymmetric-card:nth-child(2) { border-left: 3px solid #1A6A88; }
        .asymmetric-card:nth-child(3) { border-left: 3px solid #7FCBEA; }
        .asymmetric-card:nth-child(4) { 
            border-left: 3px solid #46BAEB; 
            background: linear-gradient(145deg, rgba(26, 106, 136, 0.25) 0%, rgba(255, 255, 255, 0.02) 100%);
        }

        .asymmetric-card:hover {
            transform: translateY(-6px) !important;
            background: rgba(255, 255, 255, 0.07);
            border-color: rgba(70, 186, 235, 0.4);
            box-shadow: 0 25px 55px rgba(0, 0, 0, 0.4), 0 0 35px rgba(26, 106, 136, 0.3);
        }

        .asymmetric-card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .asymmetric-card-num {
            font-size: 11px;
            font-weight: 800;
            color: #46BAEB;
            background: rgba(70, 186, 235, 0.12);
            border: 1px solid rgba(70, 186, 235, 0.25);
            padding: 5px 12px;
            border-radius: 20px;
            letter-spacing: 0.5px;
        }

        .asymmetric-card-icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: rgba(26, 106, 136, 0.35);
            color: #46BAEB;
            display: grid;
            place-items: center;
            border: 1px solid rgba(70, 186, 235, 0.2);
            transition: var(--transition-smooth);
        }

        .asymmetric-card:hover .asymmetric-card-icon {
            background: #1A6A88;
            color: #ffffff;
            transform: rotate(6deg) scale(1.1);
            box-shadow: 0 0 18px rgba(70, 186, 235, 0.5);
        }

        .asymmetric-card-icon svg {
            width: 20px;
            height: 20px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .asymmetric-card h3 {
            color: #ffffff;
            font-size: 20px;
            font-weight: 800;
            margin-bottom: 10px;
            letter-spacing: -0.5px;
        }

        .asymmetric-card p {
            color: #cbd5e1;
            font-size: 14px;
            line-height: 1.65;
            margin: 0;
        }

        .asymmetric-tag-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 18px;
            font-size: 11px;
            font-weight: 700;
            color: #46BAEB;
            background: rgba(26, 106, 136, 0.2);
            padding: 6px 12px;
            border-radius: 6px;
            width: fit-content;
        }

        .country-section {
            background: #262625;
            color: #fff;
            padding: 85px 6vw;
            width: 100%;
            max-width: 100%;
        }

        .country-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
            width: 100%;
        }

        .country-inner > div {
            min-width: 0;
        }

        .country-inner .eyebrow {
            color: var(--sky);
        }

        .country-list {
            border-top: 1px solid rgba(255,255,255,0.1);
        }

        .country-list a {
            display: grid;
            grid-template-columns: 40px 1fr 20px;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            font-size: 17px;
            font-weight: 700;
        }

        .country-list a:hover {
            color: var(--sky);
            padding-left: 10px;
        }

        .country-list span {
            font-size: 11px;
            color: var(--muted);
        }

        .final-section {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            align-items: center;
            gap: 50px;
            background: linear-gradient(135deg, rgba(238, 245, 251, 0.6) 0%, rgba(255, 255, 255, 1) 100%);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            padding: 55px 5vw;
            box-shadow: 0 20px 50px rgba(26, 106, 136, 0.05);
            position: relative;
            overflow: hidden;
            width: 100%;
            max-width: 100%;
        }

        .final-text-content, .final-action {
            min-width: 0;
            width: 100%;
        }

        .final-description {
            color: var(--muted);
            font-size: 15px;
            line-height: 1.7;
            margin: 18px 0 24px;
        }

        .final-highlights {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 28px;
        }

        .final-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #ffffff;
            border: 1px solid rgba(26, 106, 136, 0.18);
            padding: 8px 14px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            color: var(--blue);
            box-shadow: 0 4px 12px rgba(26, 106, 136, 0.04);
        }

        .final-chip b {
            color: #16a34a;
            font-size: 12px;
        }

        .final-visual-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px 10px;
            width: 100%;
        }

        .final-glow-bg {
            position: absolute;
            width: 260px;
            height: 260px;
            background: radial-gradient(circle, rgba(70, 186, 235, 0.35) 0%, transparent 70%);
            border-radius: 50%;
            filter: blur(40px);
            z-index: 1;
        }

        .final-image-frame {
            position: relative;
            width: 100%;
            height: 320px;
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(26, 106, 136, 0.18);
            border: 1px solid rgba(255, 255, 255, 0.9);
            z-index: 2;
            transition: var(--transition-smooth);
        }

        .final-section:hover .final-image-frame {
            transform: translateY(-5px) scale(1.01);
            box-shadow: 0 32px 60px rgba(26, 106, 136, 0.22);
        }

        .final-image-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .final-image-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(26, 106, 136, 0.05) 0%, rgba(15, 23, 42, 0.4) 100%);
            pointer-events: none;
        }

        .final-floating-card {
            position: absolute;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(221, 230, 238, 0.9);
            box-shadow: 0 16px 36px rgba(26, 106, 136, 0.15);
            border-radius: var(--radius-sm);
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            z-index: 4;
            animation: floatSlow 6s ease-in-out infinite;
        }

        .final-floating-card.top-card {
            top: 15px;
            left: -10px;
            animation-delay: 0s;
        }

        .final-floating-card.bottom-card {
            bottom: 20px;
            right: -10px;
            animation-delay: -3s;
        }

        .final-floating-card .badge-icon {
            font-size: 18px;
        }

        .final-floating-card strong {
            display: block;
            font-size: 12px;
            color: var(--ink);
            font-weight: 800;
        }

        .final-floating-card small {
            display: block;
            font-size: 10px;
            color: var(--muted);
        }

        .cta-section-v2 {
            position: relative;
            width: 100%;
            max-width: 100%;
            background: linear-gradient(135deg, #232322 0%, #2E2E2C 50%, #3A3A38 100%);
            color: #ffffff;
            padding: 40px 6vw;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
            border-top: 1px solid rgba(70, 186, 235, 0.2);
            border-bottom: 1px solid rgba(70, 186, 235, 0.2);
            box-shadow: inset 0 0 80px rgba(26, 106, 136, 0.3);
        }

        .cta-v2-bg-anim {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .cta-v2-svg {
            width: 100%;
            height: 100%;
        }

        .cta-v2-content {
            position: relative;
            z-index: 2;
            max-width: 720px;
            min-width: 0;
        }

        .cta-v2-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(26, 106, 136, 0.35);
            border: 1px solid rgba(70, 186, 235, 0.35);
            color: #46BAEB;
            padding: 5px 14px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
            margin-bottom: 12px;
            box-shadow: 0 0 12px rgba(70, 186, 235, 0.15);
        }

        .cta-v2-title {
            font-size: clamp(20px, 2.4vw, 34px);
            font-weight: 800;
            line-height: 1.25;
            color: #ffffff;
            margin-bottom: 8px;
            letter-spacing: -0.8px;
        }

        .cta-v2-title span {
            color: #46BAEB;
        }

        .cta-v2-desc {
            color: #94a3b8;
            font-size: 14px;
            line-height: 1.5;
            margin: 0;
        }

        .cta-v2-action {
            position: relative;
            z-index: 2;
            flex-shrink: 0;
        }

        .cta-v2-btn {
            background: #ffffff !important;
            color: #1A6A88 !important;
            font-size: 14px !important;
            font-weight: 800 !important;
            padding: 16px 28px !important;
            border-radius: 12px !important;
            box-shadow: 0 0 30px rgba(70, 186, 235, 0.5), 0 10px 25px rgba(0, 0, 0, 0.3) !important;
            transition: var(--transition-smooth) !important;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            border: 1px solid rgba(255, 255, 255, 0.9) !important;
            white-space: nowrap;
        }

        .cta-v2-btn:hover {
            transform: translateY(-3px) scale(1.03) !important;
            box-shadow: 0 0 45px rgba(70, 186, 235, 0.75), 0 15px 35px rgba(0, 0, 0, 0.4) !important;
            background: #F2FAFD !important;
        }

        /* ===== CTA de servicios: presente en todas las páginas ===== */
        .services-cta {
            position: relative;
            overflow: hidden;
            width: 100%;
            max-width: 100%;
            padding: 90px 6vw;
            color: #ffffff;
            text-align: center;
            background: linear-gradient(135deg, rgba(7, 11, 14, 0.92) 0%, rgba(20, 104, 146, 0.85) 100%);
        }
        .services-cta .services-cta-bg {
            position: absolute;
            inset: 0;
            background-image: url('https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1600&q=80');
            background-size: cover;
            background-position: center;
            opacity: 0.22;
            z-index: 0;
        }
        .services-cta-inner {
            position: relative;
            z-index: 1;
            max-width: 780px;
            margin: 0 auto;
        }
        .services-cta .eyebrow {
            color: #46BAEB;
            margin-bottom: 14px;
        }
        .services-cta h2 {
            font-size: clamp(26px, 4vw, 38px);
            color: #ffffff;
            font-weight: 800;
            margin: 0 0 16px;
            line-height: 1.25;
        }
        .services-cta h2 em {
            background: none;
            -webkit-background-clip: border-box;
            background-clip: border-box;
            -webkit-text-fill-color: #46BAEB;
            color: #46BAEB;
        }
        .services-cta p {
            color: rgba(255, 255, 255, 0.88);
            font-size: 14.5px;
            line-height: 1.7;
            margin: 0 auto 28px;
            max-width: 640px;
        }

        .footer {
            background: var(--soft);
            padding: 60px 6vw 30px;
            border-top: 1px solid var(--line);
            width: 100%;
            max-width: 100%;
        }

        .footer-grid {
            display: grid;
            /* Cinco columnas: marca, servicios, sistemas de cumplimiento, necesidades y
               recursos. La quinta entró en la ronda 111 con «Blog ↗» y «Preguntas
               frecuentes»; los anchos se repartieron para que cada columna quede como
               estaba (la de los sistemas de cumplimiento mide lo mismo que antes). */
            grid-template-columns: 1.45fr 0.9fr 1.3fr 1.2fr 0.95fr;
            gap: 24px;
            padding-bottom: 44px;
            align-items: start;
            width: 100%;
        }

        .footer-col {
            min-width: 0;
        }

        .footer-col h4 {
            font-size: 12px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--blue);
            font-weight: 800;
            margin-bottom: 16px;
        }

        .footer-col > a {
            display: block;
            padding: 6px 0;
            font-size: 13px;
            font-weight: 600;
            color: var(--muted);
            transition: var(--transition-smooth);
        }

        .footer-col > a:hover {
            color: var(--blue);
            transform: translateX(4px);
        }

        /* Categoría interna dentro de una columna del footer (p. ej. "Software") */
        .footer-col .footer-cat {
            display: block;
            margin-top: 10px;
            margin-bottom: 2px;
            padding: 6px 0 2px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            color: var(--blue);
            border-top: 1px solid var(--line);
        }
        .footer-col .footer-view-all {
            display: block;
            margin-top: 8px;
            padding: 7px 0 2px;
            font-size: 13px;
            font-weight: 800;
            color: var(--blue);
        }
        .footer-col .footer-view-all:hover {
            color: var(--blue-hover);
            transform: translateX(4px);
        }

        .footer-about {
            font-size: 13px;
            color: var(--muted);
            line-height: 1.7;
            margin-top: 16px;
            max-width: 300px;
        }

        .footer-social {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .footer-social a {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: #ffffff;
            border: 1px solid var(--line);
            display: grid;
            place-items: center;
            color: var(--blue);
            transition: var(--transition-smooth);
        }

        .footer-social a:hover {
            background: var(--blue);
            color: #ffffff;
            transform: translateY(-4px);
            box-shadow: 0 10px 20px var(--blue-glow);
        }

        /* Los iconos son de marca de Font Awesome (antes eran SVG dibujados a mano
           dentro del propio enlace, de ahí el tamaño con stroke). */
        .footer-social i {
            font-size: 17px;
            line-height: 1;
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid var(--line);
            padding-top: 20px;
            color: var(--muted);
            font-size: 12px;
            flex-wrap: wrap;
            gap: 12px;
        }

        .footer-bottom-links {
            display: flex;
            gap: 18px;
            font-weight: 600;
            flex-wrap: wrap;
        }

        .footer-bottom-links a {
            color: var(--muted);
            transition: var(--transition-smooth);
        }

        .footer-bottom-links a:hover {
            color: var(--blue);
        }

        @media (max-width: 1024px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 36px;
            }
        }

        @media (max-width: 640px) {
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 34px;
            }
            .footer {
                padding: 46px 5vw 26px;
            }
        }

        .lightbox-modal {
            position: fixed;
            inset: 0;
            background: rgba(7, 11, 14, 0.94);
            backdrop-filter: blur(12px);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: var(--transition-smooth);
            z-index: 1000;
        }

        .lightbox-modal.open {
            opacity: 1;
            pointer-events: auto;
        }

        .lightbox-content {
            max-width: 90vw;
            max-height: 85vh;
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: 0 30px 80px rgba(0,0,0,0.6);
            transform: scale(0.9);
            transition: var(--transition-smooth);
            position: relative;
        }

        .lightbox-modal.open .lightbox-content {
            transform: scale(1);
        }

        .lightbox-close-btn {
            position: absolute;
            top: 25px;
            right: 30px;
            color: #fff;
            font-size: 36px;
            cursor: pointer;
            line-height: 1;
            z-index: 1010;
        }

        @media (max-width: 1024px) {
            .hero {
                grid-template-columns: 1fr;
                gap: 40px;
                padding: 60px 6vw 70px;
            }
            .hero-visual {
                min-height: 400px;
            }
            .intro-section {
                grid-template-columns: 1fr;
                gap: 36px;
                padding: 40px 5vw;
            }
            .suite-section {
                grid-template-columns: 1fr;
                gap: 36px;
            }
            .services-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .asymmetric-benefit-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .country-inner {
                grid-template-columns: 1fr;
                gap: 36px;
            }
            .final-section {
                grid-template-columns: 1fr;
                gap: 36px;
                padding: 40px 5vw;
            }
            .section-title-row {
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
                gap: 14px;
            }
            .section-title-row > div, .section-title-row > p {
                flex: none;
                width: 100%;
                max-width: 100%;
            }
            .benefit-separator {
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
                gap: 14px;
            }
            .benefit-separator p {
                flex: none;
                width: 100%;
            }
        }

        @media (max-width: 768px) {
            .desktop-nav { display: none; }
            .section {
                padding: 50px 5vw;
            }
            .services-grid, .asymmetric-benefit-grid, .intro-pillars-grid {
                grid-template-columns: 1fr;
            }
            .bridge-inner {
                flex-direction: column;
                text-align: center;
            }
            .cta-section-v2 {
                flex-direction: column;
                text-align: center;
                padding: 36px 5vw;
            }

            .hero-visual {
                height: auto;
                flex-direction: column;
                gap: 12px;
                padding: 20px 0;
            }
            .final-floating-card {
                position: relative;
                inset: auto !important;
                margin: 8px auto;
                width: 100%;
                max-width: 280px;
                animation: none;
            }
            .final-visual-wrapper {
                flex-direction: column;
            }
        }
    

        /* ===== Menú móvil (hamburguesa) ===== */
        .menu-toggle {
            display: none;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            width: 44px;
            height: 44px;
            padding: 10px;
            background: #ffffff;
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: var(--transition-smooth);
            flex-shrink: 0;
        }

        .menu-toggle span {
            display: block;
            height: 2px;
            width: 100%;
            background: var(--blue);
            border-radius: 2px;
            transition: var(--transition-smooth);
        }

        .menu-toggle:hover {
            border-color: var(--sky);
            box-shadow: 0 6px 16px var(--blue-glow);
        }

        .menu-toggle.open span:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }

        .menu-toggle.open span:nth-child(2) {
            opacity: 0;
        }

        .menu-toggle.open span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }

        .mobile-nav {
            display: none;
            position: fixed;
            top: 86px;
            left: 0;
            right: 0;
            z-index: 99;
            flex-direction: column;
            gap: 6px;
            padding: 18px 6vw 26px;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--line);
            box-shadow: 0 26px 55px rgba(26, 106, 136, 0.14);
        }

        .mobile-nav.open {
            display: flex;
        }

        .mobile-nav a {
            padding: 13px 16px;
            font-size: 15px;
            font-weight: 700;
            color: var(--ink);
            border-radius: var(--radius-sm);
            border: 1px solid transparent;
            transition: var(--transition-smooth);
        }

        .mobile-nav a:hover {
            background: var(--sky-light);
            color: var(--blue);
            border-color: var(--line);
        }

        .mobile-nav .button {
            margin-top: 10px;
        }

        @media (max-width: 768px) {
            .site-header {
                justify-content: flex-start;
                gap: 14px;
            }
            .menu-toggle {
                display: flex;
                margin-left: auto;
            }
        }

        /* ===== Mejoras globales de diseño y animación ===== */

        ::selection {
            background: var(--blue);
            color: #ffffff;
        }

        * {
            scrollbar-width: thin;
            scrollbar-color: var(--sky) var(--soft);
        }

        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
        ::-webkit-scrollbar-track {
            background: var(--soft);
        }
        ::-webkit-scrollbar-thumb {
            background: var(--sky);
            border-radius: 8px;
            border: 2px solid var(--soft);
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--blue);
        }

        /* Variantes de aparición al hacer scroll */
        .reveal-left {
            transform: translateX(-46px);
        }
        .reveal-right {
            transform: translateX(46px);
        }

        /* Sombra del header al hacer scroll */
        .site-header.scrolled {
            box-shadow: 0 8px 30px rgba(26, 106, 136, 0.12);
            background: rgba(255, 255, 255, 0.96);
        }

        /* Barra de progreso de lectura */
        .reading-progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            width: 0%;
            background: linear-gradient(90deg, var(--blue), #46BAEB);
            z-index: 200;
            transition: width 0.1s linear;
        }

        /* Botón volver arriba */
        .to-top {
            position: fixed;
            right: 22px;
            bottom: 22px;
            z-index: 150;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--blue);
            color: #ffffff;
            display: grid;
            place-items: center;
            font-size: 18px;
            box-shadow: 0 10px 26px var(--blue-glow);
            opacity: 0;
            pointer-events: none;
            transform: translateY(14px);
            transition: var(--transition-smooth);
            border: none;
            cursor: pointer;
        }
        .to-top.show {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }
        .to-top:hover {
            background: var(--blue-hover);
            transform: translateY(-4px);
        }
        /* Bandera del país junto al botón volver arriba */
        .to-top-flag {
            position: fixed;
            right: 82px;
            bottom: 22px;
            z-index: 150;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #ffffff;
            border: 2px solid var(--sky);
            box-shadow: 0 10px 26px rgba(26, 106, 136, 0.18);
            display: grid;
            place-items: center;
            font-size: 24px;
            line-height: 1;
            opacity: 0;
            pointer-events: none;
            transform: translateY(14px);
            transition: var(--transition-smooth);
        }

        /* Marquesina del separador de beneficios */
        .benefit-marquee {
            overflow: hidden;
            flex: 1 1 480px;
            min-width: 0;
            -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
        }
        .marquee-track {
            display: flex;
            align-items: center;
            gap: 48px;
            width: max-content;
            animation: marqueeScroll 22s linear infinite;
        }
        .marquee-track span {
            color: var(--sky);
            font-size: 13px;
            font-weight: 700;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        .marquee-track span::after {
            content: "✦";
            color: rgba(165, 200, 216, 0.45);
            font-size: 10px;
        }
        @keyframes marqueeScroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* Gradiente sutil en botón primario */
        .button-blue {
            background: linear-gradient(135deg, var(--blue) 0%, #20799B 100%);
        }
        .button-blue:hover {
            background: linear-gradient(135deg, #14556E 0%, #46BAEB 100%);
        }

        /* Imagen flotante con animación */
        .float-img {
            border-radius: var(--radius-md);
            box-shadow: 0 22px 50px rgba(26, 106, 136, 0.22);
            border: 1px solid rgba(255, 255, 255, 0.9);
            object-fit: cover;
            animation: floatSlow 7s ease-in-out infinite;
            max-width: 100%;
        }

        /* Banda de imagen con efecto Ken Burns */
        .image-band {
            position: relative;
            min-height: 320px;
            display: grid;
            place-items: center;
            overflow: hidden;
            width: 100%;
            max-width: 100%;
        }
        .image-band img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            animation: kenburns 24s ease-in-out infinite alternate;
        }
        .image-band::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(100deg, rgba(9, 19, 26, 0.9) 0%, rgba(14, 45, 62, 0.68) 55%, rgba(26, 106, 136, 0.4) 100%);
        }
        .image-band-copy {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 60px 6vw;
            max-width: 880px;
        }
        .image-band-copy .eyebrow {
            justify-content: center;
            color: #46BAEB;
        }
        .image-band-copy h2 {
            color: #ffffff;
            font-size: clamp(26px, 3.2vw, 44px);
            font-weight: 800;
            letter-spacing: -1px;
            margin-bottom: 24px;
            line-height: 1.15;
        }
        .image-band-copy h2 em {
            background: linear-gradient(135deg, #46BAEB 0%, #7FCBEA 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        @keyframes kenburns {
            0% { transform: scale(1) translate(0, 0); }
            100% { transform: scale(1.12) translate(1.5%, -1.5%); }
        }

        /* Tarjetas con imagen superior */
        .card-media {
            padding: 0;
            overflow: hidden;
        }
        .card-media img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            display: block;
            border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
            transition: transform 0.5s ease;
        }
        .card-media:hover img {
            transform: scale(1.08);
        }
        .card-media > div {
            padding: 24px;
        }

        /* Nota: el bloque prefers-reduced-motion se eliminó a petición del cliente:
           desactivaba todas las animaciones en equipos con "animaciones" apagadas en Windows. */

        /* ===== Ajustes móviles del separador de beneficios ===== */
        @media (max-width: 1024px) {
            .benefit-marquee {
                flex: none;
                width: 100%;
            }
            .marquee-track {
                gap: 28px;
            }
        }

        /* ===== Menú desplegable (escritorio) ===== */
        .desktop-nav {
            gap: 22px;
        }
        .nav-link, .nav-toggle {
            font-size: 13.5px;
            font-weight: 600;
            color: var(--muted);
            background: none;
            border: none;
            cursor: pointer;
            font-family: var(--font-main);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 0;
            white-space: nowrap;
        }
        .nav-link:hover, .nav-toggle:hover {
            color: var(--blue);
        }
        .nav-chev {
            font-size: 10px;
            transition: var(--transition-smooth);
        }
        .nav-item {
            position: relative;
        }
        .nav-item.open .nav-chev {
            transform: rotate(180deg);
        }
        .nav-panel {
            position: absolute;
            top: calc(100% + 10px);
            left: 0;
            background: #ffffff;
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            box-shadow: 0 18px 45px rgba(26, 106, 136, 0.14);
            padding: 10px;
            min-width: 235px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: var(--transition-smooth);
            z-index: 120;
        }
        .nav-item.open .nav-panel {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .nav-panel a {
            display: block;
            padding: 9px 14px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            color: var(--ink);
            transition: var(--transition-smooth);
        }
        .nav-panel a:hover {
            background: var(--sky-light);
            color: var(--blue);
            transform: translateX(3px);
        }
        /* Subgrupo "Software" dentro del panel de Servicios */
        .nav-sub-title {
            display: block;
            padding: 10px 14px 2px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--blue);
        }
        .nav-sub {
            margin-bottom: 4px;
            padding-left: 6px;
        }
        .nav-sub a {
            padding-left: 24px !important;
            font-size: 12.5px !important;
        }
        .m-acc-panel .nav-sub-title {
            display: block;
            padding: 10px 12px 2px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--blue);
        }
        .m-acc-panel .nav-sub {
            margin-bottom: 4px;
            padding-left: 8px;
            border-left: 2px solid var(--sky);
        }
        .m-acc-panel .nav-sub a {
            padding-left: 24px;
        }

        /* Acordeón del menú móvil */
        .m-acc {
            border-bottom: 1px solid var(--line);
        }
        .m-acc-toggle {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 13px 16px;
            background: none;
            border: none;
            font-family: var(--font-main);
            font-size: 15px;
            font-weight: 700;
            color: var(--ink);
            cursor: pointer;
            border-radius: var(--radius-sm);
            transition: var(--transition-smooth);
        }
        .m-acc-toggle:hover {
            background: var(--sky-light);
            color: var(--blue);
        }
        .m-acc-toggle .nav-chev {
            transition: var(--transition-smooth);
        }
        .m-acc.open .m-acc-toggle .nav-chev {
            transform: rotate(180deg);
        }
        .m-acc-panel {
            display: none;
            padding: 2px 16px 12px 30px;
        }
        .m-acc.open .m-acc-panel {
            display: block;
        }
        .m-acc-panel a {
            display: block;
            padding: 9px 12px;
            font-size: 13.5px;
            font-weight: 600;
            color: var(--muted);
            border-radius: 8px;
            transition: var(--transition-smooth);
        }
        .m-acc-panel a:hover {
            background: var(--sky-light);
            color: var(--blue);
        }

        @media (max-width: 1120px) {
            .desktop-nav {
                display: none;
            }
            .site-header {
                justify-content: flex-start;
                gap: 14px;
            }
            .menu-toggle {
                display: flex;
                margin-left: auto;
            }
        }

        /* ===== Tarjetas de sector (index) ===== */
        .sector-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
            margin-top: 44px;
            width: 100%;
        }
        .sector-card {
            background: #ffffff;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            padding: 22px 20px;
            display: flex;
            gap: 14px;
            align-items: center;
            transition: var(--transition-smooth);
            min-width: 0;
            width: 100%;
        }
        .sector-card:hover {
            transform: translateY(-6px);
            border-color: var(--sky);
            box-shadow: 0 16px 34px rgba(26, 106, 136, 0.12);
        }
        .sector-card .s-ic {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            background: var(--sky-light);
            color: var(--blue);
            display: grid;
            place-items: center;
            font-size: 20px;
            flex-shrink: 0;
        }
        .sector-card:hover .s-ic {
            background: var(--blue);
            color: #ffffff;
            transform: rotate(5deg) scale(1.06);
            transition: var(--transition-smooth);
        }
        .sector-card strong {
            display: block;
            font-size: 13.5px;
            font-weight: 800;
            color: var(--ink);
            line-height: 1.35;
        }
        .sector-card span {
            font-size: 11.5px;
            color: var(--muted);
        }
        @media (max-width: 1024px) {
            .sector-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 640px) {
            .sector-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ===== Página "Próximamente" ===== */
        .soon-hero {
            min-height: 420px;
            display: grid;
            place-items: center;
            text-align: center;
            padding: 84px 6vw;
            background: radial-gradient(circle at 50% 18%, #EDF7FC 0%, #ffffff 70%);
            width: 100%;
            max-width: 100%;
        }

        /* ===== Footer: botón de contacto y marcas ===== */
        .footer-col .footer-contact-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 16px;
            padding: 10px 20px;
            background: var(--blue);
            color: #ffffff !important;
            font-size: 13px;
            font-weight: 800;
            border-radius: 24px;
            box-shadow: 0 8px 18px rgba(26, 106, 136, 0.3);
            transition: var(--transition-smooth);
        }
        .footer-col .footer-contact-btn:hover {
            background: var(--blue-hover);
            color: #ffffff !important;
            transform: translateY(-2px);
            box-shadow: 0 12px 26px rgba(26, 106, 136, 0.42);
        }
        .footer-brands {
            margin-top: 16px;
            font-size: 12.5px;
            color: var(--muted);
            font-weight: 600;
        }
        .footer-brands a {
            color: var(--blue);
            font-weight: 700;
        }
        .footer-brands a:hover {
            color: var(--blue-hover);
        }
        .nav-panel a {
            position: static;
            padding: 9px 14px;
        }
        .nav-panel a::after {
            display: none;
        }

        /* ===== Hero compartido (page-hero) ===== */
        .page-hero {
            min-height: 620px;
            display: grid;
            grid-template-columns: 1.05fr 0.95fr;
            align-items: center;
            gap: 40px;
            padding: 80px 6vw 90px;
            background: radial-gradient(circle at 85% 15%, #EDF7FC 0%, #ffffff 65%);
            overflow: hidden;
            position: relative;
            width: 100%;
            max-width: 100%;
        }
        .page-hero-copy, .page-hero-visual {
            min-width: 0;
            width: 100%;
        }
        .badge-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #ffffff;
            border: 1px solid rgba(26, 106, 136, 0.2);
            color: var(--blue);
            padding: 7px 14px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 800;
            box-shadow: 0 4px 14px rgba(26, 106, 136, 0.08);
            margin-bottom: 18px;
        }
        .col-badge {
            position: absolute;
            top: -6px;
            right: 4%;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(221, 230, 238, 0.9);
            box-shadow: 0 16px 36px rgba(26, 106, 136, 0.12);
            border-radius: var(--radius-sm);
            padding: 10px 16px;
            display: flex;
            gap: 10px;
            align-items: center;
            font-size: 12px;
            font-weight: 800;
            color: var(--blue);
            z-index: 3;
            max-width: 100%;
        }

        /* ===== Badges que orbitan la tarjeta del hero ===== */
        .badge-orbit {
            position: absolute;
            inset: -16px;
            pointer-events: none;
            z-index: 3;
        }
        .badge-orbit .col-badge {
            position: absolute;
            top: auto;
            right: auto;
            bottom: auto;
            left: auto;
            white-space: nowrap;
            margin: 0;
        }
        .badge-orbit.rot-cw { animation: orbitRotate 36s linear infinite; }
        .badge-orbit.rot-ccw { animation: orbitRotateReverse 36s linear infinite; }
        .badge-orbit.rot-cw .col-badge { animation: orbitRotateReverse 36s linear infinite; }
        .badge-orbit.rot-ccw .col-badge { animation: orbitRotate 36s linear infinite; }
        .badge-orbit.rot-none, .badge-orbit.rot-none .col-badge { animation: none; }
        .badge-orbit .cb-1 { top: 0; left: 50%; margin: -30px 0 0 -95px; }
        .badge-orbit .cb-2 { top: 50%; right: 0; margin: -30px -95px 0 0; }
        .badge-orbit .cb-3 { bottom: 0; left: 50%; margin: 0 0 -30px -95px; }
        .badge-orbit .cb-4 { top: 50%; left: 0; margin: -30px 0 0 -95px; }
        @media (max-width: 640px) {
            .badge-orbit {
                display: none;
            }
        }

        /* ===== Grids y tarjetas compartidas ===== */
        .mini-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-top: 44px;
            width: 100%;
        }
        .mini-grid.two {
            grid-template-columns: repeat(2, 1fr);
        }
        .mini-grid.three {
            grid-template-columns: repeat(3, 1fr);
        }
        .check-list {
            display: grid;
            gap: 14px;
            margin-top: 20px;
            width: 100%;
        }
        .check-item {
            display: flex;
            gap: 14px;
            align-items: flex-start;
            background: #ffffff;
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            padding: 16px 18px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.02);
            transition: var(--transition-smooth);
            min-width: 0;
            width: 100%;
        }
        .check-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 14px 30px rgba(26, 106, 136, 0.1);
            border-color: var(--sky);
        }
        .check-item .check-ic {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--sky-light);
            color: var(--blue);
            display: grid;
            place-items: center;
            font-size: 14px;
            font-weight: 800;
            flex-shrink: 0;
        }
        .check-item strong {
            display: block;
            font-size: 14px;
            color: var(--ink);
            font-weight: 800;
            margin-bottom: 3px;
        }
        .check-item span {
            display: block;
            font-size: 13px;
            color: var(--muted);
            line-height: 1.6;
        }
        .simple-card {
            background: #ffffff;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            padding: 26px 24px;
            transition: var(--transition-smooth);
            min-width: 0;
            width: 100%;
        }
        .simple-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 18px 40px rgba(26, 106, 136, 0.1);
            border-color: var(--sky);
        }
        .simple-card h3 {
            font-size: 17px;
            font-weight: 800;
            color: var(--blue);
            margin-bottom: 10px;
        }
        .simple-card p {
            font-size: 13px;
            color: var(--muted);
            line-height: 1.65;
            margin: 0;
        }
        .card-media {
            padding: 0;
            overflow: hidden;
        }
        .card-media img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            display: block;
            border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
            transition: transform 0.5s ease;
        }
        .card-media:hover img {
            transform: scale(1.08);
        }
        .card-media > div {
            padding: 24px;
        }
        @media (max-width: 1024px) {
            .mini-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 640px) {
            .mini-grid, .mini-grid.two, .mini-grid.three {
                grid-template-columns: 1fr;
            }
        }

        /* ===== Animaciones de fondo para secciones ===== */
        .section {
            position: relative;
            isolation: isolate;
        }
        .section-bg {
            position: absolute;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
            z-index: -1;
        }

        .bg-ring {
            position: absolute;
            border: 1.5px dashed rgba(26, 106, 136, 0.16);
            border-radius: 50%;
            pointer-events: none;
        }
        .bg-ring.r1 {
            width: 420px;
            height: 420px;
            top: -120px;
            right: -100px;
            animation: orbitRotate 40s linear infinite;
        }
        .bg-ring.r2 {
            width: 300px;
            height: 300px;
            bottom: -80px;
            left: -60px;
            animation: orbitRotateReverse 30s linear infinite;
        }
        .bg-particles {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(26, 106, 136, 0.15) 1px, transparent 1px);
            background-size: 26px 26px;
            animation: particlesDrift 60s linear infinite;
            opacity: 0.55;
            pointer-events: none;
        }
        @keyframes particlesDrift {
            0% { background-position: 0 0; }
            100% { background-position: 260px 260px; }
        }

        /* ===== Refuerzo de visibilidad de fondos animados ===== */
        .bg-orb.o1 { background: radial-gradient(circle, rgba(26, 106, 136, 0.45) 0%, transparent 70%); }

        .bg-particles { opacity: 0.75; }

        /* ===== Page-hero responsive (compartido) ===== */
        @media (max-width: 1024px) {
            .page-hero {
                grid-template-columns: 1fr;
                gap: 36px;
                padding: 60px 6vw 70px;
            }
        }
        @media (max-width: 640px) {
            .page-hero {
                padding: 46px 5vw 56px;
            }
            .page-hero .hero-card-showcase {
                width: 300px !important;
            }
        }

        /* ===== Fondos animados: VERSIÓN CLARAMENTE VISIBLE ===== */

        /* Orbes: más grandes, más intensos y con recorrido notable */
        .bg-orb {
            filter: blur(42px);
        }

        @keyframes bgOrbA {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(70px, -55px) scale(1.25); }
        }
        @keyframes bgOrbB {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(-65px, 50px) scale(1.22); }
        }

        /* Anillos: trazo más grueso y rotación rápida */
        .bg-ring {
            border: 2.5px dashed rgba(26, 106, 136, 0.34);
        }
        .bg-ring.r1 {
            width: 480px;
            height: 480px;
            top: -140px;
            right: -120px;
            animation: orbitRotate 15s linear infinite;
        }
        .bg-ring.r2 {
            width: 340px;
            height: 340px;
            bottom: -100px;
            left: -80px;
            animation: orbitRotateReverse 11s linear infinite;
        }
        .bg-ring.r3 {
            width: 250px;
            height: 250px;
            top: 28%;
            left: 14%;
            animation: orbitRotate 19s linear infinite;
            opacity: 0.85;
        }

        /* Partículas: puntos más grandes y deriva rápida */
        .bg-particles {
            background-image: radial-gradient(rgba(26, 106, 136, 0.32) 1.6px, transparent 1.6px);
            background-size: 36px 36px;
            animation: particlesDrift 20s linear infinite;
            opacity: 0.95;
        }
        @keyframes particlesDrift {
            0% { background-position: 0 0; }
            100% { background-position: 360px 360px; }
        }

        /* Aurora: gradiente más presente */
        .bg-aurora {
            inset: -12%;
            background: linear-gradient(120deg, rgba(26, 106, 136, 0.3) 0%, rgba(70, 186, 235, 0.2) 32%, transparent 62%, rgba(20, 104, 146, 0.22) 100%);
            background-size: 280% 280%;
            animation: bgGradientGlow 11s ease infinite;
        }

        /* Nueva variante: burbujas ascendentes (muy visibles) */
        .bg-bubbles {
            position: absolute;
            inset: 0;
            overflow: hidden;
        }
        .bg-bubbles span {
            position: absolute;
            display: block;
            border-radius: 50%;
            border: 2px solid rgba(26, 106, 136, 0.4);
            background: rgba(70, 186, 235, 0.12);
            animation: bubbleFloat linear infinite;
        }
        .bg-bubbles .b1 { width: 28px; height: 28px; left: 8%; bottom: 10%; animation-duration: 9s; }
        .bg-bubbles .b2 { width: 15px; height: 15px; left: 22%; bottom: 4%; animation-duration: 7s; animation-delay: 1.4s; }
        .bg-bubbles .b3 { width: 36px; height: 36px; left: 46%; bottom: -40px; animation-duration: 11s; animation-delay: 0.6s; }
        .bg-bubbles .b4 { width: 18px; height: 18px; right: 24%; bottom: 8%; animation-duration: 8s; animation-delay: 2.2s; }
        .bg-bubbles .b5 { width: 24px; height: 24px; right: 8%; bottom: -50px; animation-duration: 10s; animation-delay: 0.3s; }
        .bg-bubbles .b6 { width: 12px; height: 12px; left: 68%; bottom: 0; animation-duration: 6.5s; animation-delay: 3s; }
        @keyframes bubbleFloat {
            0% { transform: translateY(0) translateX(0); opacity: 0; }
            8% { opacity: 1; }
            100% { transform: translateY(-430px) translateX(40px); opacity: 0; }
        }

        /* ===== Fondos animados: configuración final ===== */

        /* Partículas: MUY sutiles (versión original) */
        .bg-particles {
            background-image: radial-gradient(rgba(26, 106, 136, 0.15) 1px, transparent 1px);
            background-size: 26px 26px;
            animation: particlesDrift 60s linear infinite;
            opacity: 0.55;
        }
        @keyframes particlesDrift {
            0% { background-position: 0 0; }
            100% { background-position: 260px 260px; }
        }

        /* Círculo en una esquina: centro en la punta de la esquina, punteado/rayado, con pelotica que lo recorre */
        .bg-corner-circle {
            position: absolute;
            border-radius: 50%;
            border: 2px dashed rgba(26, 106, 136, 0.4);
            animation: orbitRotate 14s linear infinite;
        }
        .bg-corner-circle .cc-dot {
            position: absolute;
            top: -5px;
            left: 50%;
            margin-left: -5px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #46BAEB;
            box-shadow: 0 0 10px rgba(70, 186, 235, 0.9);
        }

        /* Óvalos de puntos girando (como los del hero; reemplazan a la aurora) */
        .bg-ell {
            position: absolute;
            border: 1.5px dashed rgba(26, 106, 136, 0.3);
            border-radius: 50%;
            pointer-events: none;
        }
        .bg-ell.e1 {
            width: 480px;
            height: 270px;
            top: 16%;
            right: -70px;
            animation: orbitRotate 26s linear infinite;
        }
        .bg-ell.e2 {
            width: 400px;
            height: 230px;
            bottom: 12%;
            left: -50px;
            animation: orbitRotateReverse 31s linear infinite;
        }

        /* ===== Versiones visibles en secciones de fondo oscuro ===== */
        .section-bg.bg-dark .bg-corner-circle { border-color: rgba(70, 186, 235, 0.55); }
        .section-bg.bg-dark .bg-corner-circle .cc-dot { background: #BFE9F8; box-shadow: 0 0 10px rgba(169, 223, 244, 0.95); }
        .section-bg.bg-dark .bg-particles { background-image: radial-gradient(rgba(70, 186, 235, 0.45) 1px, transparent 1px); }
        .section-bg.bg-dark .bg-ell { border-color: rgba(70, 186, 235, 0.5); }
        .section-bg.bg-dark .bg-ring { border-color: rgba(70, 186, 235, 0.5); }
        .section-bg.bg-dark .bg-bubbles span { border-color: rgba(70, 186, 235, 0.55); background: rgba(70, 186, 235, 0.18); }

        /* ===== Anillo giratorio: más lento y más translúcido ===== */
        .bg-ring.r1 {
            animation: orbitRotate 32s linear infinite;
            border-color: rgba(26, 106, 136, 0.22);
            border-width: 2px;
        }
        .section-bg.bg-dark .bg-ring {
            border-color: rgba(70, 186, 235, 0.4);
        }

/* ===== Heroes variante B y C: imagen completa con tarjetas flotantes encima ===== */
.hero-media-wrap {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}
.hero-media-wrap .hero-bg {
    display: block;
    width: 100%;
    height: auto;
}
.float-chip {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 14px 32px rgba(26, 106, 136, 0.22);
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 600;
    animation: floatY 5.5s ease-in-out infinite;
    line-height: 1.25;
}
.float-chip i { color: var(--blue); font-size: 17px; width: 20px; text-align: center; }
.float-chip strong { display: block; color: var(--ink); font-size: 13px; font-weight: 800; }
.float-chip small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 600; }
.fc-1 { top: 6%; left: 4%; animation-delay: 0s; }
.fc-2 { bottom: 6%; right: 4%; animation-delay: 1.4s; }
.fc-3 { top: 44%; right: 4%; animation-delay: 2.4s; }
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}
.img-overlay-card {
    position: absolute;
    left: 4%;
    bottom: 6%;
    z-index: 2;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    padding: 13px 16px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
    min-width: 200px;
}
.img-overlay-card .ov-label {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 3px;
}
.img-overlay-card .ov-value {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 9px;
}
.img-overlay-card .ov-bar {
    height: 7px;
    background: rgba(11, 18, 32, 0.1);
    border-radius: 7px;
    overflow: hidden;
}
.img-overlay-card .ov-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--blue), #46BAEB);
    border-radius: 7px;
}
.hero-media-vc .fc-2 { top: 6%; right: 4%; bottom: auto; }
@media (max-width: 900px) {
    .float-chip { padding: 8px 11px; }
    .fc-3 { display: none; }
}
@media (max-width: 640px) {
    .hero-media-wrap { max-width: 340px; }
    .float-chip { padding: 7px 10px; gap: 7px; }
    .img-overlay-card { left: 3%; bottom: 4%; min-width: 140px; padding: 10px 12px; }
}

/* ===== Heroes variante D: imagen completa + órbita de insignias ===== */
.hero-media-vd { max-width: 460px; }
.hero-media-vd .badge-orbit {
    position: absolute;
    inset: -10px;
    pointer-events: none;
    z-index: 3;
}
.hero-media-vd .badge-orbit .col-badge {
    position: absolute;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    white-space: nowrap;
    margin: 0;
    padding: 8px 13px;
    font-size: 11px;
}
.hero-media-vd .badge-orbit .cb-1 { top: 0; left: 50%; margin: -26px 0 0 -85px; }
.hero-media-vd .badge-orbit .cb-2 { top: 50%; right: 0; margin: -26px -62px 0 0; }
.hero-media-vd .badge-orbit .cb-3 { bottom: 0; left: 50%; margin: 0 0 -26px -85px; }
.hero-media-vd .badge-orbit .cb-4 { top: 50%; left: 0; margin: -26px 0 0 -62px; }
@media (max-width: 900px) {
    .hero-media-vd { max-width: 360px; }
    .hero-media-vd .badge-orbit .cb-2, .hero-media-vd .badge-orbit .cb-4 { display: none; }
}
        /* ===== Razones con panel de estado (UI card movida desde el hero) ===== */
        .razones-wrap {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
            gap: 40px;
            align-items: stretch;
            position: relative;
            z-index: 2;
            max-width: 1280px;
            margin: 0 auto;
            width: 100%;
        }
        .razones-cards {
            min-width: 0;
            width: 100%;
            display: grid;
            align-content: start;
        }
        .razones-cards .asymmetric-benefit-grid {
            grid-template-columns: repeat(2, 1fr);
            max-width: 100%;
            margin: 0;
        }
        .razones-panel {
            position: relative;
            align-self: stretch;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-width: 0;
            width: 100%;
        }
        .rz-state {
            position: relative;
            background: linear-gradient(160deg, rgba(26, 106, 136, 0.3) 0%, rgba(16, 29, 42, 0.72) 55%, rgba(70, 186, 235, 0.12) 100%);
            border: 1px solid rgba(165, 200, 216, 0.22);
            backdrop-filter: blur(14px);
            border-radius: var(--radius-md);
            padding: 26px 24px 24px;
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), inset 0 0 46px rgba(26, 106, 136, 0.1);
            overflow: hidden;
        }
        .rz-state-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(165, 200, 216, 0.18);
        }
        .rz-state-name {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 1.2px;
            color: #46BAEB;
            text-transform: uppercase;
        }
        .rz-state-name i {
            margin-right: 8px;
            color: #46BAEB;
        }
        .rz-state-pill {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 11px;
            font-weight: 800;
            color: #34d399;
            background: rgba(52, 211, 153, 0.12);
            border: 1px solid rgba(52, 211, 153, 0.32);
            padding: 5px 11px;
            border-radius: 20px;
            white-space: nowrap;
        }
        .rz-state-pill.rz-pill-wip {
            color: #46BAEB;
            background: rgba(70, 186, 235, 0.12);
            border-color: rgba(70, 186, 235, 0.35);
        }
        .rz-state-pill .rz-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #34d399;
            box-shadow: 0 0 8px #34d399;
        }
        .rz-state-pill.rz-pill-wip .rz-dot {
            background: #46BAEB;
            box-shadow: 0 0 8px #46BAEB;
        }
        .rz-state-hero {
            margin: 22px 0 4px;
        }
        .rz-state-label {
            display: block;
            font-size: 12px;
            color: #94a3b8;
            font-weight: 600;
            margin-bottom: 4px;
        }
        .rz-state-value {
            display: block;
            font-size: 46px;
            line-height: 1;
            font-weight: 800;
            color: #ffffff;
            letter-spacing: -1px;
        }
        .rz-state-value small {
            font-size: 18px;
            color: #94a3b8;
            font-weight: 600;
        }
        .rz-state-title {
            margin: 18px 0 4px;
            font-size: 16px;
            line-height: 1.4;
            font-weight: 800;
            color: #ffffff;
        }
        .rz-track {
            height: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            overflow: hidden;
            margin-top: 16px;
        }
        .rz-track-fill {
            display: block;
            height: 100%;
            background: linear-gradient(90deg, #1A6A88 0%, #46BAEB 100%);
            border-radius: 8px;
        }
        .rz-state-rows {
            margin-top: 18px;
            display: grid;
            gap: 10px;
        }
        .rz-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            background: rgba(255, 255, 255, 0.045);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 10px 13px;
            font-size: 12.5px;
            color: #DCE8EF;
        }
        .rz-row span {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            min-width: 0;
        }
        .rz-row i {
            color: #46BAEB;
            font-size: 14px;
            width: 16px;
            text-align: center;
            flex-shrink: 0;
        }
        .rz-row strong {
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
        }
        .rz-row .rz-ok {
            color: #34d399;
        }
        .rz-row .rz-wip {
            color: #46BAEB;
        }
        .rz-caption {
            margin: 14px 2px 0;
            font-size: 12px;
            line-height: 1.6;
            color: #94a3b8;
        }
        @media (max-width: 1080px) {
            .razones-wrap {
                grid-template-columns: 1fr;
                gap: 36px;
            }
            .razones-panel {
                position: static;
                max-width: 500px;
                margin: 0 auto;
                width: 100%;
            }
        }
        @media (max-width: 768px) {
            .razones-cards .asymmetric-benefit-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Opciones de menú y de pie cuyos enlaces están retirados por ahora (su página
           todavía no existe): se ven igual, pero no son enlaces. Se reconocen porque son
           etiquetas <a> SIN atributo href, y con pointer-events: none no cambian el
           cursor ni responden al pasar el mouse. */
        .footer-col > a:not([href]), .nav-panel a:not([href]), .nav-sub a:not([href]), .m-acc-panel a:not([href]), a.text-link:not([href]), a.button:not([href]) {
            pointer-events: none;
            cursor: default;
        }

        /* ===== CTA de contacto (repetido en todas las páginas): halos de luz en vez de la línea punteada =====
           Antes el movimiento lo hacía la decoración SVG: una línea punteada con un punto
           que la recorría. Esa decoración se apaga y el movimiento pasa a tres capas de luz
           difusa, con el mismo criterio que el CTA del sitio de LogTec, pero en el azul de
           Data Protected:                                                                       */

        .cta-section-v2 .cta-v2-bg-anim, .cta-section-v2 .cta-v2-svg {
            display: none !important;
        }

        /* (1) El fondo del panel: dos resplandores que se desplazan en diagonal cada 18 s */
        @keyframes ctaLuzFondo {
            0%, 100% { background-position: 0% 0%, 100% 100%, 0% 50%; }
            50%      { background-position: 100% 100%, 0% 0%, 100% 50%; }
        }

        /* (2) La bola de luz que cruza el panel de lado a lado cada 11 s */
        @keyframes ctaLuzViajera {
            0%   { transform: translate3d(-190%, -50%, 0) scale(0.85); opacity: 0; }
            12%  { opacity: 0.55; }
            50%  { transform: translate3d(120%, -50%, 0) scale(1.06); opacity: 0.75; }
            88%  { opacity: 0.55; }
            100% { transform: translate3d(430%, -50%, 0) scale(0.9); opacity: 0; }
        }

        /* (3) El resplandor tenue de la esquina inferior izquierda, que respira */
        @keyframes ctaLuzTenue {
            0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; }
            50%      { transform: translate3d(-3%, 5%, 0) scale(1.14); opacity: 0.85; }
        }

        .cta-section-v2 {
            background:
                radial-gradient(560px 320px at 8% -30%, rgba(70, 186, 235, 0.22), transparent 60%),
                radial-gradient(620px 340px at 92% 130%, rgba(26, 106, 136, 0.55), transparent 62%),
                linear-gradient(135deg, #232322 0%, #2E2E2C 50%, #3A3A38 100%);
            background-size: 160% 160%, 160% 160%, 100% 100%;
            animation: ctaLuzFondo 18s ease-in-out infinite;
        }

        /* Los halos van en pseudoelementos con z-index 0: quedan por detrás del texto
           (los hijos del CTA tienen z-index 2 y posición propia) y no capturan clics. */
        .cta-section-v2::before, .cta-section-v2::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
        }
        .cta-section-v2::before {
            top: 50%;
            left: 0;
            width: 420px;
            height: 420px;
            background: radial-gradient(circle, rgba(70, 186, 235, 0.45) 0%, rgba(26, 106, 136, 0.18) 52%, transparent 72%);
            filter: blur(30px);
            animation: ctaLuzViajera 11s linear infinite;
        }
        .cta-section-v2::after {
            bottom: -220px;
            left: -150px;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(26, 106, 136, 0.22), transparent 66%);
            filter: blur(38px);
            animation: ctaLuzTenue 9s ease-in-out infinite;
        }

        /* El correo del panel de contacto se muestra como texto (sin mailto:, por la
           regla del proyecto): conserva el aspecto, pero no cambia de color al pasar
           el mouse como si fuera un enlace. */
        span.way-value:hover {
            color: var(--blue);
        }

        /* ================================================================
           ANIKAT — identidad de marca
           ----------------------------------------------------------------
           Paleta tomada del logo oficial (img/logo-anikat.png):
             grafito  #3C3C3B  marca y texto (11,04:1 sobre blanco)
             cian     #46BAEB  acento de marca (2,21:1 sobre blanco: NUNCA
                               se usa para texto sobre fondos claros, sí para
                               bordes, brillos y textos sobre fondos oscuros,
                               donde da 4,99-7,10:1)
             azul profundo #1A6A88 y su tono claro #20799B, derivados del cian
                               (6,07:1 y 4,92:1 con blanco): botones, enlaces,
                               cifras y textos sobre fondos claros.
           La estructura y la maquetación se conservan: cambia el color, no el
           diseño heredado.
           ================================================================ */

        /* Aviso "próximamente" dentro de los submenús (texto, no enlace). */
        .nav-sub .nav-soon {
            display: block;
            padding: 4px 0 2px;
            font-size: 12px;
            line-height: 1.45;
            font-weight: 500;
            color: var(--muted);
        }

        /* En el pie, la marca propia se muestra como texto (no enlaza a sí misma). */
        .footer-brands span {
            color: var(--blue);
            font-weight: 700;
        }

        /* La palabra destacada de los titulares usa un degradado que termina en un
           cian oscuro (#2B93BF, 3,48:1) en lugar del cian de marca (2,21:1): así el
           texto grande sigue siendo legible sobre blanco. Los titulares sobre
           fondos oscuros conservan el cian de marca por su regla propia. */
        h1 em, h2 em {
            /* OJO: aquí NO se puede usar el atajo `background`: reinicia
               background-clip a border-box y el degradado se pinta como un
               rectángulo detrás del texto, que queda transparente e ilegible.
               Con background-image el recorte a texto de la regla base se conserva
               y, por si acaso, se vuelve a declarar el recorte aquí. */
            background-image: linear-gradient(135deg, var(--blue) 0%, #2B93BF 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Los cuatro sistemas de Anikat se muestran 2x2 en escritorio: la rejilla
           heredada de sectores era de tres columnas. */
        .sector-grid.sistemas-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        /* Los números de tarjeta van sobre fondo claro: azul profundo, no cian. */
        .service-number {
            color: var(--blue);
        }

        /* Fila de cierre con botones. La clase se usaba en el inicio y en las
           páginas de necesidades sin estar definida: sin esta regla los botones
           quedaban sin separación entre ellos (y sin margen) cuando no traían
           estilos en línea. */
        .final-cta-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 16px;
            margin-top: 30px;
        }

        /* El encabezado es fijo y mide 86 px: sin esto, al saltar a un #ancla el
           título de la sección queda tapado detrás. Los 71 destinos de ancla del
           micrositio son secciones; el único que no lo es, la tarjeta del
           formulario de contacto (#formulario), se nombra aparte. */
        section[id], .hubspot-card[id] {
            scroll-margin-top: 104px;
        }

/* ==========================================================================
   ANIKAT · Páginas de sistema de cumplimiento (bloque dentro de styles.css)
   LA/FT/FP y C/ST · SARLAFT · PTEE · Sostenibilidad
   --------------------------------------------------------------------------
   Estas cuatro páginas usan los mismos colores que el resto del micrositio:
   la paleta de marca (--blue #1A6A88, --sky #46BAEB, --sky-light, --soft,
   --line, --muted, --ink) y el mismo degradado de titular que las demás. No hay
   acento por sistema ni hoja de estilos aparte.

   Lo que sí aporta el bloque es la MAQUETACIÓN propia de estas páginas, que el
   resto del sitio no usa: índice «En esta página», panel oscuro de ficha,
   piezas numeradas, línea de etapas con fichas, banda gris con frentes
   numerados, escalera de niveles, panel de seguimiento sobre banda clara,
   tarjetas de pregunta y enlaces cruzados entre los cuatro sistemas.

   Todo va con el prefijo .sys- y se activa con <body class="sistema">, así que
   ninguna otra página cambia: para usar cualquiera de estas piezas hay que
   poner esa clase en el <body> y las clases .sys-* en el marcado.

   Contrastes: el texto de acento sobre blanco es --blue (6,07:1); sobre los
   fondos oscuros se usa --sky (7,10:1 sobre #232322); los grises de apoyo son
   los mismos del resto del sitio (#94a3b8 y #DCE8EF sobre los paneles oscuros,
   --muted sobre los claros).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Índice de la página (barra de anclas bajo la marquesina)
   -------------------------------------------------------------------------- */
.sys-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 6vw;
    background: var(--soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    width: 100%;
}
.sys-nav-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 6px;
}
.sys-nav-etiqueta i {
    color: var(--blue);
}
.sys-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: #ffffff;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}
.sys-nav a i {
    color: var(--blue);
    font-size: 11px;
}
.sys-nav a:hover {
    border-color: rgba(26, 106, 136, 0.2);
    background: var(--sky-light);
    color: var(--blue);
    transform: translateY(-2px);
}
.sys-hero-badge {
    background: var(--sky-light);
    border-color: rgba(26, 106, 136, 0.2);
    color: var(--blue);
}
.sys-hero-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    right: -80px;
    top: -60px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--sky-light) 0%, transparent 70%);
    filter: blur(30px);
    pointer-events: none;
    z-index: 0;
}
body.sistema .page-hero-copy, body.sistema .page-hero-visual {
    position: relative;
    z-index: 1;
}
/* --------------------------------------------------------------------------
   ¿Qué es? · relato a la izquierda, ficha del sistema a la derecha
   -------------------------------------------------------------------------- */
.sys-split {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 46px;
    align-items: start;
    margin-top: 34px;
    width: 100%;
}
.sys-prosa {
    min-width: 0;
}
.sys-prosa p {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--muted);
    margin-bottom: 18px;
    max-width: 720px;
}
.sys-prosa p:last-child {
    margin-bottom: 0;
}
.sys-prosa strong {
    color: var(--ink);
    font-weight: 800;
}
.sys-ficha {
    position: relative;
    /* Un solo tono oscuro, sin degradado: el degradado dejaba la parte de arriba
       más clara y el texto claro de la ficha perdía contraste. */
    background: var(--dark-bg);
    border: 1px solid rgba(165, 200, 216, 0.22);
    border-radius: var(--radius-md);
    padding: 26px 24px 22px;
    color: #ffffff;
    box-shadow: 0 24px 50px rgba(12, 26, 36, 0.28);
    overflow: hidden;
}
.sys-ficha::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--sky);
}
.sys-ficha-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    position: relative;
    z-index: 1;
}
.sys-ficha-ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(26, 106, 136, 0.2);
    color: var(--sky);
    font-size: 17px;
    flex-shrink: 0;
}
.sys-ficha-etiqueta {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--sky);
}
.sys-ficha-nombre {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
}
.sys-ficha-rows {
    display: grid;
    gap: 2px;
    margin: 16px 0 0;
    position: relative;
    z-index: 1;
}
.sys-ficha-row {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.sys-ficha-row:last-child {
    border-bottom: 0;
}
.sys-ficha-row dt {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #94a3b8;
}
.sys-ficha-row dd {
    font-size: 13px;
    font-weight: 600;
    color: #DCE8EF;
    line-height: 1.5;
}
.sys-ficha-pie {
    position: relative;
    z-index: 1;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 11.5px;
    line-height: 1.6;
    color: #94a3b8;
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
.sys-ficha-pie i {
    color: var(--sky);
    margin-top: 2px;
}
/* Las cuatro definiciones de "¿Qué es?" como piezas numeradas */
.sys-datos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
    width: 100%;
}
.sys-dato {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 24px 22px 22px;
    overflow: hidden;
    transition: var(--transition-smooth);
    min-width: 0;
}
.sys-dato::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--blue) 0%, var(--sky) 100%);
    opacity: 0.85;
}
.sys-dato:hover {
    transform: translateY(-6px);
    border-color: rgba(26, 106, 136, 0.2);
    box-shadow: 0 18px 40px rgba(26, 106, 136, 0.12);
}
.sys-dato-ic {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--sky-light);
    border: 1px solid rgba(26, 106, 136, 0.2);
    color: var(--blue);
    font-size: 18px;
    margin-bottom: 16px;
}
.sys-dato strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 8px;
    line-height: 1.35;
}
.sys-dato span {
    display: block;
    font-size: 13px;
    line-height: 1.65;
    color: var(--muted);
}
/* --------------------------------------------------------------------------
   ¿A quién le aplica? · tarjetas con icono + aviso destacado
   -------------------------------------------------------------------------- */
.sys-aplica {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
    width: 100%;
}
.sys-aplica-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 26px 22px;
    transition: var(--transition-smooth);
    min-width: 0;
}
.sys-aplica-card:hover {
    transform: translateY(-6px);
    border-color: rgba(26, 106, 136, 0.2);
    box-shadow: 0 18px 40px rgba(26, 106, 136, 0.12);
}
.sys-aplica-ic {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--sky-light);
    color: var(--blue);
    font-size: 20px;
    margin-bottom: 16px;
    transition: var(--transition-smooth);
}
.sys-aplica-card:hover .sys-aplica-ic {
    background: var(--blue);
    color: #ffffff;
    transform: rotate(5deg) scale(1.06);
}
.sys-aplica-card h3 {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 9px;
    line-height: 1.35;
}
.sys-aplica-card p {
    font-size: 13px;
    line-height: 1.65;
    color: var(--muted);
    margin: 0;
}
.sys-aviso {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 30px;
    padding: 20px 22px;
    border-radius: var(--radius-md);
    background: var(--sky-light);
    border: 1px solid rgba(26, 106, 136, 0.2);
    border-left: 4px solid var(--blue);
}
.sys-aviso i {
    color: var(--blue);
    font-size: 18px;
    margin-top: 1px;
    flex-shrink: 0;
}
.sys-aviso p {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--ink);
    margin: 0;
}
/* --------------------------------------------------------------------------
   Ajustes de la banda oscura. El color de esta banda lo pone styles.css; aquí
   solo quedan dos cosas: el icono de la tarjeta asimétrica es un <i> (no un
   <svg>, que es lo que estiliza la hoja general) y necesita su tamaño, y el
   hueco que deja la última tarjeta cuando el número de tarjetas es impar.
   -------------------------------------------------------------------------- */
body.sistema .benefit-section2 .asymmetric-card-icon i {
    font-size: 18px;
}
/* Cuando el número de tarjetas es impar (cinco, en las cuatro páginas de
   sistema), la última ocupa las dos columnas: la rejilla queda intencionada y
   no con un hueco suelto. */
body.sistema .benefit-section2 .asymmetric-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}
/* --------------------------------------------------------------------------
   Etapas · línea de tiempo de dos tramos numerados
   -------------------------------------------------------------------------- */
.sys-etapas {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-top: 40px;
    width: 100%;
}
.sys-etapas::before {
    content: "";
    position: absolute;
    top: 54px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(26, 106, 136, 0.2) 20%, rgba(26, 106, 136, 0.2) 80%, transparent);
    z-index: 0;
}
.sys-etapa {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 28px 26px 24px;
    box-shadow: 0 16px 36px rgba(26, 106, 136, 0.06);
    transition: var(--transition-smooth);
    min-width: 0;
}
.sys-etapa:hover {
    border-color: rgba(26, 106, 136, 0.2);
    box-shadow: 0 22px 48px rgba(26, 106, 136, 0.12);
    transform: translateY(-4px);
}
.sys-etapa-num {
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--blue);
    opacity: 0.16;
    position: absolute;
    top: 16px;
    right: 22px;
}
.sys-etapa-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.sys-etapa-ic {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--blue);
    color: #ffffff;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(26, 106, 136, 0.12);
}
.sys-etapa h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.3;
}
.sys-etapa > p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 18px;
}
.sys-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sys-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink);
    background: var(--sky-light);
    border: 1px solid rgba(26, 106, 136, 0.2);
    border-radius: 18px;
    padding: 6px 12px;
}
.sys-chip i {
    color: var(--blue);
    font-size: 11px;
}
/* --------------------------------------------------------------------------
   Banda gris con los frentes de trabajo numerados
   -------------------------------------------------------------------------- */
.sys-alt {
    background: var(--soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.sys-frentes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
    width: 100%;
}
.sys-frente {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 26px 24px 24px;
    overflow: hidden;
    transition: var(--transition-smooth);
    min-width: 0;
}
.sys-frente::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--blue) 0%, var(--sky) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.sys-frente:hover::after {
    transform: scaleX(1);
}
/* Cuatro niveles de madurez en una sola fila, sin tarjeta suelta */
.sys-frentes.es-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sys-frente:hover {
    transform: translateY(-6px);
    border-color: rgba(26, 106, 136, 0.2);
    box-shadow: 0 20px 44px rgba(26, 106, 136, 0.12);
}
.sys-frente-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.sys-frente-num {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--blue);
    background: var(--sky-light);
    border: 1px solid rgba(26, 106, 136, 0.2);
    border-radius: 20px;
    padding: 5px 12px;
}
.sys-frente-ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--sky-light);
    color: var(--blue);
    font-size: 17px;
    flex-shrink: 0;
}
.sys-frente h3 {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 9px;
    line-height: 1.35;
}
.sys-frente p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0;
}
/* --------------------------------------------------------------------------
   Planes de acompañamiento · un nivel por tarjeta y un color por nivel
   La página no reproduce la matriz de características de la propuesta: cada
   plan se cuenta como una situación que el prospecto reconoce, cuatro
   resultados y un pie. El color ordena los niveles dentro de la familia azul
   de la marca, del más claro al más profundo, sin tonos ajenos a la paleta.
   -------------------------------------------------------------------------- */
.sys-niveles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
    width: 100%;
    align-items: stretch;
}
/* Ronda 102 — con dos planes, la rejilla se quedaba pegada a la izquierda: el tope
   de 880 px dejaba 77 px de hueco a un lado y 313 px al otro (236 px de
   desequilibrio a 1280 px). Sin tope, los dos planes ocupan la fila entera, igual
   que las rejillas de cuatro planes y que la cabecera de la sección. */
.sys-niveles.es-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sys-nivel {
    --pl: #1A6A88;
    --pl-tinta: #134F66;
    --pl-texto: #ffffff;
    --pl-borde: rgba(255, 255, 255, 0.45);
    --pl-on: #ffffff;
    --pl-off: rgba(255, 255, 255, 0.34);
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition-smooth);
    min-width: 0;
}
/* Escala de color por nivel: claro, medio, marca y profundo */
.sys-nivel.p-1 {
    --pl: #46BAEB;
    --pl-tinta: #14556E;
    --pl-texto: #2E2E2D;
    --pl-borde: rgba(46, 46, 45, 0.38);
    --pl-on: #2E2E2D;
    --pl-off: rgba(46, 46, 45, 0.22);
}
.sys-nivel.p-2 {
    --pl: #1E7FA8;
    --pl-tinta: #14556E;
}
.sys-nivel.p-3 {
    --pl: #1A6A88;
    --pl-tinta: #134F66;
}
.sys-nivel.p-4 {
    --pl: #2E2E2D;
    --pl-tinta: #2E2E2D;
}
.sys-nivel:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(26, 106, 136, 0.14);
}
.sys-nivel.recomendado {
    border-color: var(--pl);
    box-shadow: 0 18px 42px rgba(26, 106, 136, 0.18);
}
.sys-nivel-cabeza {
    background: var(--pl);
    color: var(--pl-texto);
    padding: 20px 22px 18px;
}
.sys-nivel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.sys-nivel-num {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: inherit;
    background: transparent;
    border: 1px solid var(--pl-borde);
    border-radius: 20px;
    padding: 4px 12px;
}
.sys-nivel-cabeza h3 {
    display: flex;
    align-items: center;
    min-height: 45px;
    font-size: 18px;
    font-weight: 800;
    color: inherit;
    margin: 0;
    line-height: 1.25;
}
.sys-nivel-segs {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}
.sys-nivel-segs i {
    display: block;
    width: 13px;
    height: 5px;
    border-radius: 3px;
    background: var(--pl-off);
}
.sys-nivel-segs i.on {
    background: var(--pl-on);
}
.sys-nivel-flag {
    align-self: flex-start;
    display: inline-block;
    margin-bottom: 14px;
    background: var(--pl);
    color: var(--pl-texto);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 14px;
}
.sys-nivel-cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 22px 22px;
    background: #ffffff;
}
.sys-nivel-etiqueta {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--pl-tinta);
}
.sys-nivel-para {
    font-size: 13.5px;
    line-height: 1.6;
    font-weight: 600;
    color: var(--ink);
    margin: 6px 0 18px;
}
.sys-nivel-lista {
    list-style: none;
    margin: 8px 0 18px;
    padding: 0;
    display: grid;
    gap: 7px;
}
.sys-nivel-lista li {
    position: relative;
    padding-left: 20px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
}
.sys-nivel-lista li i {
    position: absolute;
    left: 0;
    top: 3px;
    color: var(--pl-tinta);
    font-size: 11px;
}
.sys-nivel-cierre {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--pl-tinta);
}
.sys-nivel-cierre i {
    color: var(--pl);
    font-size: 13px;
}
/* --------------------------------------------------------------------------
   Banda de cierre de los planes: lo que incluye cualquier nivel
   -------------------------------------------------------------------------- */
.sys-todos {
    margin-top: 26px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 24px 26px;
}
.sys-todos-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 20px;
}
.sys-todos-ic {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--sky-light);
    border: 1px solid rgba(26, 106, 136, 0.2);
    color: var(--blue);
    font-size: 18px;
    flex-shrink: 0;
}
.sys-todos-head strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 4px;
}
.sys-todos-head span {
    display: block;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
}
.sys-todos-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.sys-todos-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.sys-todos-item i {
    color: var(--blue);
    font-size: 17px;
}
.sys-todos-item strong {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ink);
}
.sys-todos-item span {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted);
}
.sys-planes-nota {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.65;
    color: var(--muted);
}
.sys-planes-nota i {
    color: var(--blue);
    margin-top: 3px;
}
/* --------------------------------------------------------------------------
   Enlaces cruzados entre los cuatro sistemas
   -------------------------------------------------------------------------- */
.sys-otros .sector-card {
    align-items: flex-start;
    padding: 24px 22px;
}
.sys-otros .sector-card .s-ic {
    width: 48px;
    height: 48px;
    font-size: 21px;
    background: var(--sky-light);
    color: var(--blue);
}
.sys-otros .sector-card strong {
    font-size: 14.5px;
    margin-bottom: 4px;
}
.sys-otros .sector-card .sys-otro-meta {
    display: block;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.55;
}
.sys-otros .sector-card.actual {
    border-color: var(--blue);
    background: linear-gradient(150deg, var(--sky-light) 0%, #ffffff 60%);
    box-shadow: 0 16px 36px rgba(26, 106, 136, 0.12);
    cursor: default;
}
.sys-otros .sector-card.actual .s-ic {
    background: var(--blue);
    color: #ffffff;
}
/* La etiqueta va dentro de un .sector-card, y la regla heredada
   `.sector-card span` (0,1,1) gana a una clase suelta (0,1,0): por eso el
   selector va con dos clases y el color de acento se aplica de verdad. */
.sys-otros .sys-actual-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--blue);
    background: var(--sky-light);
    border: 1px solid rgba(26, 106, 136, 0.2);
    border-radius: 16px;
    padding: 4px 10px;
}
.sys-otros-cierre {
    text-align: center;
    margin-top: 34px;
}
/* --------------------------------------------------------------------------
   Listas de puntos dentro de las tarjetas (actividades de cada frente)
   -------------------------------------------------------------------------- */
.sys-frente ul {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 7px;
}
.sys-frente ul li {
    position: relative;
    padding-left: 19px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
}
.sys-frente ul li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sky);
}
.sys-frente ul li.segun-plan::before {
    background: var(--blue);
}
.sys-frente ul li.segun-plan::after {
    content: "\2217";
    color: var(--blue);
    font-weight: 800;
    margin-left: 4px;
}

/* --------------------------------------------------------------------------
   Adaptación a pantallas pequeñas
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
.sys-datos, .sys-aplica, .sys-niveles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
.sys-frentes, .sys-frentes.es-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
.sys-frentes > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
.sys-frentes > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
.sys-frentes > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
.sys-todos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 1080px) {
.sys-split {
        grid-template-columns: 1fr;
        gap: 34px;
    }
.sys-etapas {
        gap: 22px;
    }
.sys-etapas::before {
        display: none;
    }
}
@media (max-width: 900px) {
.sys-frentes, .sys-frentes.es-4 {
        grid-template-columns: 1fr;
    }
.sys-etapas {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
.sys-nav {
        padding: 14px 5vw;
        gap: 8px;
    }
.sys-nav-etiqueta {
        width: 100%;
        margin-bottom: 2px;
    }
.sys-nav a {
        font-size: 11.5px;
        padding: 6px 12px;
    }
.sys-datos, .sys-aplica, .sys-niveles, .sys-niveles.es-2, .sys-todos-grid {
        grid-template-columns: 1fr;
    }
.sys-todos {
        padding: 20px 18px;
    }
.sys-ficha-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }
.sys-etapa-num {
        font-size: 36px;
    }
}

/* ==== Ronda 79 · reparto de «¿Qué es?» ==== */
.sys-split {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    grid-template-areas:
        "relato ficha"
        "datos  ficha";
    column-gap: 46px;
    row-gap: 34px;
    align-items: start;
}
.sys-prosa {
    grid-area: relato;
}
/* Las cuatro definiciones dentro de la columna izquierda: dos por fila */
.sys-split .sys-datos {
    grid-area: datos;
    margin-top: 0;
    align-content: start;
}
@media (min-width: 1181px) {
    .sys-split .sys-datos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* La ficha acompaña la altura de la columna izquierda y reparte sus filas */
.sys-split .sys-ficha {
    grid-area: ficha;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}
.sys-split .sys-ficha-rows {
    flex: 1;
    align-content: space-between;
}
@media (max-width: 1080px) {
    .sys-split {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "relato"
            "ficha"
            "datos";
        column-gap: 0;
        row-gap: 34px;
    }
}

/* ==== Ronda 84 · ajustes del inicio ==== */
/* La sección final va al ras de la pantalla: sus esquinas redondeadas de 28 px
   quedaban en los bordes de la ventana. Sin redondeo, y se conserva la línea
   fina de 1 px y el degradado claro. */
body.inicio .final-section {
    border-radius: 0;
}
/* Hueco entre «sistemas» y «suite»: de 233 px a 161 px (el ritmo del resto de la
   página). 44 + 44 de relleno, más los 73 px que deja el centrado vertical del
   texto de la suite, que no se toca. */
body.inicio #sistemas {
    padding-bottom: 44px;
}
body.inicio .suite-section {
    padding-top: 44px;
}

/* ==== Ronda 85 · «novedad» oscura otra vez ==== */
/* El fondo animado que inyecta main.js es un elemento absoluto que cubre la
   sección: con la sección como contenedor se dibuja dentro de ella (y se recorta)
   en lugar de contra otro ancestro. El color de la sección no se toca: vuelve a
   ser el de la hoja original (#262625 con texto blanco). */
.country-section {
    position: relative;
    overflow: hidden;
}

/* ==== Ronda 85b · contraste en «novedad» ==== */
/* Los números de la lista: el gris de fondo claro no se lee sobre el negro */
.country-section .country-list span {
    color: #94a3b8;
}
/* Titular con degradado sobre fondo oscuro: la convención del sitio es el cian
   de marca, no el degradado azul pensado para fondos claros */
.country-section h2 em {
    background-image: linear-gradient(135deg, #46BAEB 0%, #7FCBEA 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==== Ronda 88 · encabezado simétrico en «Etapas» ==== */
/* El reparto de título + entrada usa align-items: flex-end, así que la entrada
   de la derecha se pega abajo: con un título de una línea quedaban 27 px de blanco
   solo por encima. Centrada, el blanco se reparte y el bloque queda simétrico. */
.section-title-row.sys-titulo-simetrico {
    align-items: center;
}

/* ==== Ronda 89 · FAQ con globos de conversación ==== */
/* --- Preguntas frecuentes: globos de conversación (estilo cómic) --- */
.bubble-stage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "b1 b2 b3"
        "b4 p  b5"
        "b6 b7 b8";
    gap: 20px 22px;
    margin-top: 44px;
    align-items: center;
    width: 100%;
}
.bubble-person {
    grid-area: p;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.person-avatar {
    position: relative;
    width: 168px;
    height: 168px;
    border-radius: 50%;
    padding: 6px;
    background: linear-gradient(135deg, var(--blue) 0%, #46BAEB 100%);
    box-shadow: 0 18px 40px rgba(26, 106, 136, 0.25);
}
.person-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    border: 4px solid #ffffff;
}
.person-qmark {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--blue);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 17px;
    box-shadow: 0 8px 18px var(--blue-glow);
    border: 3px solid #ffffff;
    animation: personFloat 3.4s ease-in-out infinite;
}
@keyframes personFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}
.person-label {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--blue);
    background: var(--sky-light);
    border: 1px solid var(--sky);
    padding: 7px 16px;
    border-radius: 20px;
}
.bubble {
    position: relative;
    background: #ffffff;
    border: 1.5px solid rgba(26, 106, 136, 0.25);
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 12px 30px rgba(26, 106, 136, 0.08);
    min-width: 0;
    width: 100%;
    transition: var(--transition-smooth);
}
.bubble:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(26, 106, 136, 0.14);
    border-color: var(--sky);
}
.bubble::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    filter: drop-shadow(0 1px 1px rgba(26, 106, 136, 0.1));
}
.bubble .b-q {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 6px;
    line-height: 1.4;
}
.bubble .b-q i {
    color: var(--blue);
    margin-right: 6px;
    font-size: 13px;
}
.bubble .b-a {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}
.bubble .b-a a {
    color: var(--blue);
    font-weight: 800;
}
.bubble-tl { grid-area: b1; }
.bubble-top { grid-area: b2; }
.bubble-tr { grid-area: b3; }
.bubble-left { grid-area: b4; }
.bubble-right { grid-area: b5; }
.bubble-bl { grid-area: b6; }
.bubble-bottom { grid-area: b7; }
.bubble-br { grid-area: b8; }
/* Colas hacia el personaje (centro) */
.bubble-tl::after, .bubble-top::after, .bubble-tr::after {
    border-width: 14px 10px 0 10px;
    border-color: #ffffff transparent transparent transparent;
    bottom: -13px;
}
.bubble-tl::after { right: 18%; }
.bubble-top::after { left: 50%; transform: translateX(-50%); }
.bubble-tr::after { left: 18%; }
.bubble-bl::after, .bubble-bottom::after, .bubble-br::after {
    border-width: 0 10px 14px 10px;
    border-color: transparent transparent #ffffff transparent;
    top: -13px;
}
.bubble-bl::after { right: 18%; }
.bubble-bottom::after { left: 50%; transform: translateX(-50%); }
.bubble-br::after { left: 18%; }
.bubble-left::after {
    border-width: 10px 0 10px 14px;
    border-color: transparent transparent transparent #ffffff;
    right: -13px;
    top: 50%;
    transform: translateY(-50%);
}
.bubble-right::after {
    border-width: 10px 14px 10px 0;
    border-color: transparent #ffffff transparent transparent;
    left: -13px;
    top: 50%;
    transform: translateY(-50%);
}
/* Globo CTA destacado */
.bubble-cta {
    background: linear-gradient(135deg, var(--blue) 0%, #20799B 100%);
    border: none;
    box-shadow: 0 16px 34px rgba(26, 106, 136, 0.3);
}
.bubble-cta .b-q { color: #ffffff; }
.bubble-cta .b-q i { color: #BFE9F8; }
.bubble-cta .b-a { color: rgba(255, 255, 255, 0.92); }
.bubble-cta .b-a a { color: #ffffff; text-decoration: underline; }
.bubble-cta::after {
    border-color: transparent transparent #20799B transparent;
}
.wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    background: #25D366;
    color: #ffffff;
    font-weight: 800;
    font-size: 12.5px;
    padding: 10px 16px;
    border-radius: 24px;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(37, 211, 102, 0.35);
    transition: var(--transition-smooth);
}
.wa-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(37, 211, 102, 0.45);
    background: #1ebe5b;
    color: #ffffff;
}
.wa-btn i {
    font-size: 15px;
}
@media (max-width: 1024px) {
    .bubble-stage {
        grid-template-columns: 1fr;
        grid-template-areas:
            "p"
            "b1"
            "b2"
            "b3"
            "b4"
            "b5"
            "b6"
            "b7"
            "b8";
        gap: 20px;
    }
    .person-avatar {
        width: 128px;
        height: 128px;
    }
    .bubble::after {
        border-width: 0 10px 14px 10px;
        border-color: transparent transparent #ffffff transparent;
        top: -13px;
        bottom: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    .bubble-cta::after {
        border-color: transparent transparent #20799B transparent;
    }
}

/* ==== Ronda 89 · tarjetas con imagen en servicios complementarios ==== */
.sys-frente-media {
    padding: 0;
    display: flex;
    flex-direction: column;
}
.sys-frente-media .sys-frente-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--soft);
}
.sys-frente-media .sys-frente-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.sys-frente-media:hover .sys-frente-img img {
    transform: scale(1.06);
}
.sys-frente-media .sys-frente-cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 24px 26px;
}
.sys-frente-media .sys-frente-cuerpo h3 {
    margin-top: 0;
}


/* ==== Ronda 98 · tres diseños alternativos de «a quién aplica» ==== */
/* --- Variante «escalera» (laft): lista numerada 01–04 con filetes --- */
.ap-escalera {
    /* Dos columnas: los cuatro puntos en una cuadrícula de 2 × 2 */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 44px;
    margin-top: 40px;
    border-top: 1px solid var(--line);
    width: 100%;
}
.ap-escalera .ap-item {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
    transition: var(--transition-smooth);
}
.ap-escalera .ap-item:hover {
    padding-left: 12px;
}
.ap-escalera .ap-num {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: var(--blue);
    opacity: 0.3;
    transition: var(--transition-smooth);
}
.ap-escalera .ap-item:hover .ap-num {
    opacity: 1;
}
.ap-escalera .ap-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.ap-escalera .ap-head i {
    color: var(--blue);
    font-size: 18px;
}
.ap-escalera h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
    line-height: 1.3;
}
.ap-escalera p {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0;
}
@media (max-width: 900px) {
    .ap-escalera {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 640px) {
    .ap-escalera .ap-item {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 16px;
        padding: 20px 0;
    }
    .ap-escalera .ap-num {
        font-size: 20px;
    }
}

/* --- Variante «zigzag» (ptee): dos columnas con el icono alternando de lado --- */
.ap-zigzag {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 40px;
    width: 100%;
}
.ap-zigzag .ap-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 26px 24px;
    transition: var(--transition-smooth);
    min-width: 0;
}
.ap-zigzag .ap-item:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) 64px;
}
.ap-zigzag .ap-item:nth-child(even) .ap-ic {
    order: 2;
}
.ap-zigzag .ap-item:hover {
    transform: translateY(-6px);
    border-color: rgba(26, 106, 136, 0.2);
    box-shadow: 0 18px 40px rgba(26, 106, 136, 0.12);
}
.ap-zigzag .ap-ic {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--blue) 0%, #2B93BF 100%);
    color: #ffffff;
    font-size: 24px;
}
.ap-zigzag h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 9px;
    line-height: 1.3;
}
.ap-zigzag p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0;
}
@media (max-width: 900px) {
    .ap-zigzag {
        grid-template-columns: 1fr;
    }
    .ap-zigzag .ap-item:nth-child(even) {
        grid-template-columns: 64px minmax(0, 1fr);
    }
    .ap-zigzag .ap-item:nth-child(even) .ap-ic {
        order: 0;
    }
}

/* --- Variante «cinta» (sostenibilidad): panel oscuro con las cuatro columnas --- */
.ap-cinta {
    margin-top: 40px;
    background: var(--dark-bg);
    border-radius: var(--radius-lg);
    padding: 44px 40px 38px;
    color: #ffffff;
    width: 100%;
}
.ap-cinta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}
.ap-cinta .ap-item {
    padding: 0 26px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    min-width: 0;
}
.ap-cinta .ap-item:first-child {
    padding-left: 0;
    border-left: 0;
}
.ap-cinta .ap-item:last-child {
    padding-right: 0;
}
.ap-cinta .ap-ic {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--sky);
    font-size: 18px;
    margin-bottom: 16px;
}
.ap-cinta h3 {
    font-size: 15.5px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 9px;
    line-height: 1.35;
}
.ap-cinta p {
    font-size: 12.5px;
    line-height: 1.7;
    color: #DCE8EF;
    margin: 0;
}
@media (max-width: 1080px) {
    .ap-cinta {
        padding: 34px 28px 30px;
    }
    .ap-cinta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 0;
    }
    .ap-cinta .ap-item:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }
}
@media (max-width: 640px) {
    .ap-cinta {
        padding: 26px 22px 24px;
    }
    .ap-cinta-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .ap-cinta .ap-item {
        padding: 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
        padding-top: 20px;
    }
    .ap-cinta .ap-item:first-child {
        border-top: 0;
        padding-top: 0;
    }
}


/* ==== Ronda 100 · «Niveles de madurez»: línea de tiempo (ptee) ==== */
/* --- «Línea» (ptee): línea de tiempo horizontal con los cuatro hitos --- */
.ap-linea {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    margin-top: 56px;
    width: 100%;
}
.ap-linea::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 18px;
    right: 18px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--sky) 0%, var(--blue) 60%, var(--dark-bg) 100%);
    opacity: 0.35;
}
.ap-linea .ap-item {
    position: relative;
    padding-top: 54px;
    min-width: 0;
}
.ap-linea .ap-nodo {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ffffff;
    border: 2px solid var(--blue);
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    transition: var(--transition-smooth);
}
.ap-linea .ap-item:last-child .ap-nodo {
    background: var(--blue);
    color: #ffffff;
}
.ap-linea .ap-item:hover .ap-nodo {
    transform: scale(1.08);
    box-shadow: 0 10px 22px rgba(26, 106, 136, 0.22);
}
.ap-linea h3 {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 9px;
    line-height: 1.35;
}
.ap-linea p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0;
}
@media (max-width: 900px) {
    .ap-linea {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin-top: 40px;
    }
    .ap-linea::before {
        top: 12px;
        bottom: 12px;
        left: 12px;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, var(--sky) 0%, var(--blue) 60%, var(--dark-bg) 100%);
    }
    .ap-linea .ap-item {
        padding: 0 0 26px 54px;
    }
    .ap-linea .ap-nodo {
        top: 0;
        left: 0;
    }
}


/* ==== Ronda 101 · «Niveles de madurez»: bloques (laft) y ramas con hojas (sostenibilidad) ==== */
/* --- «Bloques» (laft): dos por fila, las cuatro del mismo alto; cada una lleva su
       píldora «Nivel 0X» arriba y el medidor de los cuatro pasos pegado al borde de
       abajo. Así no hay alturas distintas ni huecos: el medidor cierra la tarjeta y
       el espacio que sobra se queda entre el texto y el medidor --- */
.ap-bloques {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
    width: 100%;
}
.ap-bloques .ap-item {
    --paso: #46BAEB;          /* filete de arriba: adorno del nivel */
    --tinta: #1E7FA8;         /* píldora y medidor: legibles sobre blanco (4,51:1) */
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 28px 26px 26px;
    overflow: hidden;
    transition: var(--transition-smooth);
    min-width: 0;
    /* Las cuatro del mismo alto: el texto más largo manda y los demás no se
       estiran solos. Si algún día un texto crece, su bloque crece con él. */
    min-height: 170px;
}
.ap-bloques .ap-item:nth-child(2) { --paso: #2B93BF; --tinta: #1A6A88; }
.ap-bloques .ap-item:nth-child(3) { --paso: #1A6A88; --tinta: #134F66; }
.ap-bloques .ap-item:nth-child(4) { --paso: #2E2E2D; --tinta: #2E2E2D; }
.ap-bloques .ap-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--paso);
}
.ap-bloques .ap-item:hover {
    transform: translateY(-6px);
    border-color: rgba(26, 106, 136, 0.2);
    box-shadow: 0 20px 44px rgba(26, 106, 136, 0.12);
}
.ap-bloques .ap-paso {
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 6px 13px;
    border: 1px solid rgba(26, 106, 136, 0.22);
    border-radius: 999px;
    background: #ffffff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tinta);
    white-space: nowrap;
}
.ap-bloques .ap-medidor {
    display: flex;
    gap: 5px;
    width: 100%;
    margin-top: auto;
    padding-top: 20px;
}
.ap-bloques .ap-medidor i {
    flex: 1;
    display: block;
    height: 6px;
    border-radius: 3px;
    background: rgba(60, 60, 59, 0.12);
}
.ap-bloques .ap-medidor i.on {
    background: var(--tinta);
}
.ap-bloques h3 {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 9px;
    line-height: 1.35;
}
.ap-bloques p {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0;
}
@media (max-width: 820px) {
    .ap-bloques {
        grid-template-columns: minmax(0, 1fr);
    }
    /* En una sola columna no hace falta igualar alturas: cada bloque mide lo que
       mide su texto y no sobra nada */
    .ap-bloques .ap-item {
        min-height: 0;
    }
}

/* --- «Hojas» (sostenibilidad): cuatro ramas en fila; el número de hojas de cada
       rama es el nivel —una, dos, tres y cuatro— y el color se va cerrando, así
       que la madurez se ve crecer de izquierda a derecha --- */
.ap-hojas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    margin-top: 44px;
    width: 100%;
}
.ap-hojas .ap-item {
    --hoja: #2B93BF;          /* cada paso de la escala pasa de 3,48:1 a 13,59:1 */
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ap-hojas .ap-item:nth-child(2) { --hoja: #1A6A88; }
.ap-hojas .ap-item:nth-child(3) { --hoja: #134F66; }
.ap-hojas .ap-item:nth-child(4) { --hoja: #2E2E2D; }
.ap-hojas .ap-rama {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 16px;
    height: 30px;
    max-width: 200px;
    margin-bottom: 17px;
}
.ap-hojas .ap-rama::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: rgba(60, 60, 59, 0.18);
}
.ap-hojas .ap-hoja {
    display: block;
    width: 14px;
    height: 20px;
    border-radius: 0 70% 0 70%;
    background: var(--hoja);
    transform-origin: bottom left;
    transform: rotate(-20deg);
    transition: var(--transition-smooth);
}
.ap-hojas .ap-hoja:nth-child(even) {
    transform: rotate(-38deg) translateX(3px);
}
.ap-hojas .ap-item:hover .ap-hoja {
    transform: rotate(-12deg) translateY(-3px);
}
.ap-hojas .ap-item:hover .ap-hoja:nth-child(even) {
    transform: rotate(-30deg) translateX(3px) translateY(-4px);
}
.ap-hojas .ap-ordinal {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}
.ap-hojas h3 {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 9px;
    line-height: 1.35;
}
.ap-hojas p {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0;
}
@media (max-width: 1000px) {
    .ap-hojas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .ap-hojas {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ==== Ronda 105 · explorador de necesidades (necesidades/necesidades.html) ==== */
/* --- Mapa de los tres grupos: se queda pegado bajo la cabecera (86 px) mientras
       se recorren las situaciones y marca en el grupo en el que vas --- */
.nec-mapa {
    position: sticky;
    top: 86px;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 14px 6vw;
    width: 100%;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.nec-mapa-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #ffffff;
    text-decoration: none;
    overflow: hidden;
    min-width: 0;
    transition: var(--transition-smooth);
}
.nec-mapa-item::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--sky) 0%, var(--blue) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.nec-mapa-item:hover,
.nec-mapa-item.is-on {
    transform: translateY(-3px);
    border-color: rgba(26, 106, 136, 0.28);
    box-shadow: 0 14px 30px rgba(26, 106, 136, 0.12);
}
.nec-mapa-item:hover::before,
.nec-mapa-item.is-on::before { opacity: 1; }
.nec-mapa-ic {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--sky-light);
    color: var(--blue);
    font-size: 16px;
    transition: var(--transition-smooth);
}
.nec-mapa-item:hover .nec-mapa-ic,
.nec-mapa-item.is-on .nec-mapa-ic {
    background: linear-gradient(135deg, var(--blue) 0%, #20799B 100%);
    color: #ffffff;
    transform: rotate(-6deg) scale(1.06);
}
.nec-mapa-txt { display: block; min-width: 0; }
.nec-mapa-txt strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.nec-mapa-txt small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 2px; }

/* --- Cabecera de cada grupo: foto con su icono encima, título, intro y la ficha
       con el número del grupo --- */
.nec-cabeza {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr) auto;
    gap: 30px;
    align-items: center;
    width: 100%;
}
.nec-cabeza-media {
    position: relative;
    height: 168px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(26, 106, 136, 0.16);
}
.nec-cabeza-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.06);
    transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.nec-cabeza.visible .nec-cabeza-media img { transform: scale(1); }
.nec-cabeza:hover .nec-cabeza-media img { transform: scale(1.04); }
.nec-cabeza-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgba(19, 79, 102, 0) 45%, rgba(19, 79, 102, 0.5) 100%);
}
.nec-cabeza-ic {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 19px;
    background: linear-gradient(135deg, var(--blue) 0%, #20799B 100%);
    box-shadow: 0 12px 26px rgba(19, 79, 102, 0.45);
}
.nec-cabeza-copy { min-width: 0; }
.nec-cabeza-copy p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
    margin: 10px 0 0;
    max-width: 620px;
}
.nec-cabeza-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, #134F66 0%, #2E2E2D 100%);
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(19, 79, 102, 0.26);
    white-space: nowrap;
}
.nec-cabeza-chip b { font-size: 22px; font-weight: 800; line-height: 1; }
.nec-cabeza-chip span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }

/* --- Las catorce situaciones: tarjetas con icono, filo que aparece al pasar el
       ratón y flecha que acompaña --- */
.nec-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
    width: 100%;
    align-items: stretch;
}
.nec-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 22px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 18px rgba(26, 106, 136, 0.05);
    text-decoration: none;
    overflow: hidden;
    min-width: 0;
    transition: var(--transition-smooth);
}
.nec-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sky) 0%, var(--blue) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.nec-card:hover,
.nec-card:focus-visible {
    transform: translateY(-6px);
    border-color: rgba(26, 106, 136, 0.22);
    box-shadow: 0 20px 44px rgba(26, 106, 136, 0.13);
}
.nec-card:hover::before,
.nec-card:focus-visible::before { transform: scaleX(1); }
.nec-card-ic {
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--sky-light);
    color: var(--blue);
    font-size: 18px;
    transition: var(--transition-smooth);
}
.nec-card:hover .nec-card-ic,
.nec-card:focus-visible .nec-card-ic {
    background: linear-gradient(135deg, var(--blue) 0%, #20799B 100%);
    color: #ffffff;
    transform: rotate(-6deg) scale(1.06);
}
.nec-card h3 {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.35;
    margin: 0 0 9px;
    transition: color 0.3s ease;
}
.nec-card:hover h3 { color: var(--blue); }
.nec-card p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--muted);
    margin: 0;
}
.nec-card-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--blue);
}
.nec-card-go i { font-size: 12px; transition: var(--transition-smooth); }
.nec-card:hover .nec-card-go i { transform: translateX(5px); }

/* Al llegar desde el mapa, las tarjetas del grupo entran en cascada. Solo se
   animan las que ya se habían mostrado: si no, la animación pisaría la aparición
   al hacer scroll y la tarjeta desaparecería al terminar. */
.nec-foco .nec-card.visible { animation: nec-pop 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nec-foco .nec-card.visible:nth-child(2) { animation-delay: 0.06s; }
.nec-foco .nec-card.visible:nth-child(3) { animation-delay: 0.12s; }
.nec-foco .nec-card.visible:nth-child(4) { animation-delay: 0.18s; }
.nec-foco .nec-card.visible:nth-child(5) { animation-delay: 0.24s; }
.nec-foco .nec-card.visible:nth-child(6) { animation-delay: 0.3s; }
@keyframes nec-pop {
    0% { transform: translateY(16px); opacity: 0.35; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Con el mapa pegado arriba, el ancla necesita más aire: 86 px de la cabecera más
   lo que mide el mapa. El selector lleva el nombre de la etiqueta delante porque el
   sitio ya trae section[id] con 104 px y tiene la misma fuerza: gana el que va
   después, que es este. */
@media (min-width: 901px) {
    section.nec-grupo { scroll-margin-top: 196px; }
}
@media (max-width: 1024px) {
    .nec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nec-cabeza {
        grid-template-columns: 220px minmax(0, 1fr);
        row-gap: 18px;
    }
    .nec-cabeza-media { height: 150px; }
    .nec-cabeza-chip {
        grid-column: 2;
        justify-self: start;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        padding: 9px 14px;
    }
    .nec-cabeza-chip b { font-size: 17px; }
}
@media (max-width: 900px) {
    .nec-mapa {
        position: static;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 12px 6vw;
    }
    /* en el móvil el mapa es una lista, así que se aprieta para no comerse la
       pantalla */
    .nec-mapa-item {
        padding: 9px 13px;
        gap: 11px;
    }
    .nec-mapa-ic {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: 14px;
    }
    .nec-mapa-txt strong { font-size: 13px; }
    .nec-mapa-item:hover { transform: none; }
}
@media (max-width: 640px) {
    .nec-grid { grid-template-columns: minmax(0, 1fr); }
    .nec-cabeza { grid-template-columns: minmax(0, 1fr); }
    .nec-cabeza-media { height: 160px; }
    .nec-cabeza-chip { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .nec-cabeza-media img,
    .nec-card,
    .nec-card-ic,
    .nec-card-go i { transition: none; }
    .nec-foco .nec-card.visible { animation: none; }
}

/* ==== Ronda 106 · las dos rejillas de cuatro situaciones, en una sola fila ==== */
.nec-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
    .nec-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .nec-grid-4 { grid-template-columns: minmax(0, 1fr); }
}


/* ==== Ronda 108 · página de necesidad «implementar»: riesgos y solución ==== */
/* --- Modificadores del explorador: cuatro bloques en el mapa, rejilla de dos
       columnas y cabecera con la foto a la derecha --- */
/* El mapa de cuatro aguanta las cuatro columnas hasta 901 px (por debajo es una
   lista, como el de la página del explorador) y las secciones de esta página
   necesitan un poco más de aire al saltar, porque el mapa lleva cuatro bloques */
.nec-mapa-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nec-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nec-cabeza-inv { grid-template-columns: minmax(0, 1fr) 268px auto; }
@media (min-width: 901px) {
    section.nec-grupo-4 { scroll-margin-top: 220px; }
}
@media (max-width: 1024px) {
    .nec-cabeza-inv { grid-template-columns: minmax(0, 1fr) 220px; }
}
@media (max-width: 900px) {
    .nec-mapa-4 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .nec-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .nec-cabeza-inv { grid-template-columns: minmax(0, 1fr); }
}

/* La cascada del explorador también para las tarjetas de esta página */
.nec-foco .rie-card.visible { animation: nec-pop 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nec-foco .rie-card.visible:nth-child(2) { animation-delay: 0.06s; }
.nec-foco .rie-card.visible:nth-child(3) { animation-delay: 0.12s; }
.nec-foco .sol-paso.visible { animation: nec-pop 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nec-foco .sol-paso.visible:nth-child(2) { animation-delay: 0.06s; }
.nec-foco .sol-paso.visible:nth-child(3) { animation-delay: 0.12s; }
.nec-foco .sol-paso.visible:nth-child(4) { animation-delay: 0.18s; }
.nec-foco .sector-card.visible { animation: nec-pop 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nec-foco .sector-card.visible:nth-child(2) { animation-delay: 0.06s; }
.nec-foco .sector-card.visible:nth-child(3) { animation-delay: 0.12s; }
.nec-foco .sector-card.visible:nth-child(4) { animation-delay: 0.18s; }

/* --- «Riesgos»: la sección tiene que leerse como lo que es, una alerta --- */
.rie-seccion {
    --rie-fuerte: #B45309;   /* filo y sellos */
    --rie-oscuro: #92400E;   /* rótulos: 7,04:1 sobre blanco */
    --rie-tinta: #7C2D12;    /* títulos: 9,35:1 sobre blanco */
    --rie-borde: #F0DDB8;
    --rie-brillo: #FBBF24;   /* el ámbar que ya usa el sitio en los planes */
    --rie-halo: #F5C56B;     /* textos sobre el panel oscuro: 8,5:1 */
    background: linear-gradient(180deg, #FFFBF3 0%, #FFF5E4 100%);
    border-top: 1px solid #F1E1C2;
    border-bottom: 1px solid #F1E1C2;
}
.rie-panel {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    padding: 38px 34px 34px;
    border-radius: var(--radius-md);
    background: var(--dark-bg);
    box-shadow: 0 24px 54px rgba(46, 46, 45, 0.24);
    overflow: hidden;
}
.rie-franja {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: repeating-linear-gradient(45deg, #D97706 0 12px, #FBBF24 12px 24px);
}
.rie-aviso {
    width: 66px;
    height: 66px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    font-size: 27px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--rie-fuerte) 0%, var(--rie-oscuro) 100%);
    box-shadow: 0 16px 34px rgba(180, 83, 9, 0.4);
    animation: rie-late 2.8s ease-in-out infinite;
}
@keyframes rie-late {
    0%, 100% { transform: scale(1); box-shadow: 0 16px 34px rgba(180, 83, 9, 0.4); }
    50% { transform: scale(1.06); box-shadow: 0 18px 40px rgba(180, 83, 9, 0.55); }
}
.rie-panel .eyebrow {
    color: var(--rie-halo);
    margin-bottom: 12px;
}
.rie-panel h2 {
    color: #ffffff;
    margin: 0 0 12px;
}
.rie-panel h2 em {
    background: none;
    -webkit-text-fill-color: var(--rie-halo);
    color: var(--rie-halo);
}
.rie-panel p:not(.eyebrow) {
    color: #D9D9D7;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
    max-width: 640px;
}
.rie-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 20px;
    border-radius: 16px;
    border: 1px solid rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.12);
    color: #ffffff;
    white-space: nowrap;
}
.rie-chip b { font-size: 22px; font-weight: 800; line-height: 1; color: var(--rie-halo); }
.rie-chip span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.rie-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 26px;
    width: 100%;
}
.rie-card {
    position: relative;
    padding: 24px 24px 22px;
    background: #ffffff;
    border: 1px solid var(--rie-borde);
    border-left: 5px solid #D97706;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 26px rgba(180, 83, 9, 0.08);
    transition: var(--transition-smooth);
    min-width: 0;
}
.rie-card:hover {
    transform: translateY(-6px);
    border-color: var(--rie-brillo);
    box-shadow: 0 22px 46px rgba(180, 83, 9, 0.18);
}
.rie-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.rie-card-ic {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--rie-fuerte) 0%, var(--rie-oscuro) 100%);
    transition: var(--transition-smooth);
}
.rie-card:hover .rie-card-ic { transform: rotate(-6deg) scale(1.06); }
.rie-card-num {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: var(--rie-fuerte);
    opacity: 0.5;
    letter-spacing: 0.02em;
}
.rie-card h3 {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--rie-tinta);
    line-height: 1.35;
    margin: 0 0 9px;
}
.rie-card p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--muted);
    margin: 0;
}
@media (max-width: 900px) {
    .rie-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 30px 24px 26px;
    }
    .rie-chip { justify-self: start; flex-direction: row; align-items: baseline; gap: 8px; padding: 9px 14px; }
    .rie-chip b { font-size: 17px; }
    .rie-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- «Solución»: calma. Fondo azul muy claro, halo suave y pasos con su número --- */
.sol-seccion {
    background: linear-gradient(180deg, #F4FAFE 0%, #FFFFFF 70%);
}
.sol-seccion::before {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -120px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(70, 186, 235, 0.16) 0%, rgba(70, 186, 235, 0) 70%);
    pointer-events: none;
}
.sol-pasos {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
    width: 100%;
}
.sol-paso {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 24px 24px 22px 26px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(26, 106, 136, 0.06);
    overflow: hidden;
    transition: var(--transition-smooth);
    min-width: 0;
}
.sol-paso::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--sky) 0%, var(--blue) 100%);
}
.sol-paso:hover {
    transform: translateY(-5px);
    border-color: rgba(26, 106, 136, 0.22);
    box-shadow: 0 20px 44px rgba(26, 106, 136, 0.12);
}
.sol-paso-num {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, var(--blue) 0%, #20799B 100%);
    box-shadow: 0 10px 24px rgba(26, 106, 136, 0.28);
    transition: var(--transition-smooth);
}
.sol-paso:hover .sol-paso-num { transform: scale(1.06); }
.sol-paso h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    margin: 2px 0 7px;
    line-height: 1.35;
}
.sol-paso p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--muted);
    margin: 0;
}
.sol-cierre {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
    padding: 24px 28px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: linear-gradient(135deg, var(--sky-light) 0%, #FFFFFF 100%);
    box-shadow: 0 12px 30px rgba(26, 106, 136, 0.07);
}
.sol-sello {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 22px;
    color: #ffffff;
    background: linear-gradient(135deg, #2B93BF 0%, var(--blue) 100%);
    box-shadow: 0 12px 26px rgba(26, 106, 136, 0.28);
}
.sol-cierre .final-cta-row { margin-top: 0; flex: 1 1 320px; }
@media (max-width: 900px) {
    .sol-pasos { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .rie-aviso { animation: none; }
    .rie-card,
    .rie-card-ic,
    .sol-paso,
    .sol-paso-num { transition: none; }
}

/* ==== Ronda 111 · página de preguntas frecuentes ==== */
/* --- Panel pegajoso: buscador y los siete temas. Se queda pegado bajo la
       cabecera (86 px) mientras se recorre la página. --- */
.faq-panel {
    position: sticky;
    top: 86px;
    z-index: 60;
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px 6vw;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.faq-busca { position: relative; display: flex; align-items: center; }
.faq-busca > i {
    position: absolute;
    left: 13px;
    font-size: 12px;
    color: var(--blue);
    pointer-events: none;
}
.faq-busca input {
    width: 100%;
    padding: 11px 74px 11px 34px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;
    outline: none;
    transition: var(--transition-smooth);
}
.faq-busca input::placeholder { color: #96A3AA; font-weight: 500; }
.faq-busca input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26, 106, 136, 0.12); }
/* Chrome dibuja su propia aspa en los campos de búsqueda: se apaga y se usa la del sitio */
.faq-busca input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.faq-cuenta {
    position: absolute;
    right: 40px;
    min-width: 34px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--sky-light);
    color: var(--blue);
    font-size: 11.5px;
    font-weight: 800;
    text-align: center;
    transition: var(--transition-smooth);
}
.faq-cuenta.cero { background: #FDF3E3; color: #92400E; }
.faq-limpiar {
    position: absolute;
    right: 9px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: var(--soft);
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition-smooth);
}
.faq-limpiar:hover { background: var(--line); color: var(--ink); }
.faq-limpiar[hidden] { display: none; }
.faq-temas {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0;
    scrollbar-width: thin;
}
.faq-tema {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    padding: 9px 13px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 999px;
    text-decoration: none;
    transition: var(--transition-smooth);
}
.faq-tema i { font-size: 11px; color: var(--blue); transition: var(--transition-smooth); }
.faq-tema:hover { border-color: rgba(26, 106, 136, 0.3); color: var(--ink); transform: translateY(-2px); }
.faq-tema.is-on {
    background: linear-gradient(135deg, var(--blue) 0%, #20799B 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(26, 106, 136, 0.24);
}
.faq-tema.is-on i { color: #ffffff; }

/* --- Cada tema: fondo alterno, cabecera con icono, titular, entrada, palabras
       clave y la ficha con el número de preguntas. --- */
section.faq-grupo { padding: 74px 6vw; scroll-margin-top: 170px; width: 100%; }
.faq-impar { background: #ffffff; }
.faq-par { background: var(--soft); }
.faq-cabeza {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    width: 100%;
}
.faq-cabeza-ic {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 25px;
    background: linear-gradient(135deg, var(--blue) 0%, #20799B 100%);
    box-shadow: 0 16px 32px rgba(19, 79, 102, 0.26);
}
.faq-cabeza-copy { min-width: 0; }
.faq-cabeza-copy h2 { margin: 6px 0 0; }
.faq-cabeza-copy p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
    margin: 10px 0 0;
    max-width: 640px;
}
.faq-claves { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.faq-claves span {
    padding: 5px 11px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--muted);
}
.faq-grupo-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, #134F66 0%, #2E2E2D 100%);
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(19, 79, 102, 0.26);
    white-space: nowrap;
}
.faq-grupo-chip b { font-size: 22px; font-weight: 800; line-height: 1; }
.faq-grupo-chip span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }

/* --- Las preguntas: respuesta siempre visible, con número, icono y palabras
       clave. La primera de cada tema ocupa el ancho completo y la última se estira
       cuando quedaría sola en su fila, así no hay huecos. --- */
.faq-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
    width: 100%;
    align-items: stretch;
}
.faq-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 26px 22px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 18px rgba(26, 106, 136, 0.05);
    overflow: hidden;
    min-width: 0;
    transition: var(--transition-smooth);
}
.faq-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sky) 0%, var(--blue) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item-destacado {
    grid-column: 1 / -1;
    padding: 32px 34px 28px;
    background: linear-gradient(135deg, #FFFFFF 0%, var(--sky-light) 100%);
    border-color: rgba(26, 106, 136, 0.18);
}
.faq-item-destacado h3 { font-size: 21px; max-width: 940px; }
.faq-item-destacado > p { font-size: 15px; max-width: 1020px; }
/* Con el primero a todo el ancho, la última pregunta queda sola solo cuando su
   posición es par: entonces se estira y no deja hueco al lado. */
.faq-lista > .faq-item:last-child:nth-child(even) { grid-column: 1 / -1; }
.faq-item-top { display: flex; align-items: center; gap: 12px; }
.faq-item-num {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--blue);
}
.faq-item-ic {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--sky-light);
    color: var(--blue);
    font-size: 16px;
    transition: var(--transition-smooth);
}
.faq-item h3 {
    margin: 0;
    font-size: 16.5px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--ink);
}
.faq-item > p {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--muted);
}
.faq-item-claves {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #7A8890;
}
.faq-item-claves i { color: var(--sky); font-size: 10px; }
/* El brillo del filo y el icono, al pasar el ratón (con la misma especificidad de
   la regla de aparición, que si no ganaría y el movimiento no se vería) */
.faq-lista > .faq-item:hover,
.faq-lista.visible > .faq-item:hover {
    transform: translateY(-5px);
    border-color: rgba(26, 106, 136, 0.22);
    box-shadow: 0 20px 44px rgba(26, 106, 136, 0.13);
}
.faq-lista > .faq-item:hover::before,
.faq-lista.visible > .faq-item:hover::before { transform: scaleX(1); }
.faq-lista > .faq-item:hover .faq-item-ic,
.faq-lista.visible > .faq-item:hover .faq-item-ic {
    background: linear-gradient(135deg, var(--blue) 0%, #20799B 100%);
    color: #ffffff;
    transform: rotate(-6deg) scale(1.06);
}
/* --- Aparición: la rejilla se revela al entrar en pantalla y las tarjetas
       escalonan. La regla va sobre .faq-lista (no sobre cada tarjeta) para que el
       buscador pueda volver a mostrar una pregunta sin dejarla transparente. --- */
.faq-lista > .faq-item { opacity: 0; transform: translateY(20px); }
.faq-lista.visible > .faq-item {
    opacity: 1;
    transform: none;
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-lista.visible > .faq-item:nth-child(1) { transition-delay: 0s; }
.faq-lista.visible > .faq-item:nth-child(2) { transition-delay: 0.07s; }
.faq-lista.visible > .faq-item:nth-child(3) { transition-delay: 0.14s; }
.faq-lista.visible > .faq-item:nth-child(4) { transition-delay: 0.21s; }
.faq-lista.visible > .faq-item:nth-child(5) { transition-delay: 0.28s; }
.faq-lista.visible > .faq-item:nth-child(6) { transition-delay: 0.35s; }
/* --- Buscador: lo que se filtra y el aviso de que no hay resultados --- */
.faq-item.faq-oculto { display: none; }
.faq-grupo.faq-oculto { display: none; }
.faq-vacio {
    display: none;
    margin-top: 40px;
    padding: 44px 6vw;
    text-align: center;
    border: 1px dashed rgba(26, 106, 136, 0.32);
    border-radius: var(--radius-md);
    background: #ffffff;
}
.faq-vacio.abierto { display: block; }
.faq-vacio i { font-size: 30px; color: var(--sky); }
.faq-vacio h3 { margin: 14px 0 8px; font-size: 20px; color: var(--ink); }
.faq-vacio p { margin: 0 auto; max-width: 560px; font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.faq-vacio .button { margin-top: 20px; }

@media (max-width: 1024px) {
    .faq-cabeza { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 18px; }
    .faq-cabeza-ic { width: 54px; height: 54px; font-size: 22px; border-radius: 16px; }
    .faq-grupo { padding: 62px 5vw; }
    .faq-panel { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .faq-panel {
        position: static;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 14px 5vw;
    }
    section.faq-grupo { padding: 52px 5vw; scroll-margin-top: 110px; }
    .faq-cabeza { grid-template-columns: 54px minmax(0, 1fr); gap: 16px; align-items: start; }
    .faq-cabeza-copy h2 { font-size: 26px; }
    .faq-grupo-chip { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 8px; justify-self: start; padding: 10px 16px; }
    .faq-grupo-chip b { font-size: 18px; }
    .faq-lista { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 30px; }
    .faq-item-destacado { padding: 26px 22px 22px; }
    .faq-item-destacado h3 { font-size: 18.5px; }
}
@media (max-width: 640px) {
    .faq-item { padding: 22px 20px 18px; }
    .faq-cabeza-copy p { font-size: 14px; }
}

/* ==== fin de la ronda 111 ==== */

/* ==== Aviso de cookies (se inyecta desde js/main.js, como el encabezado y el pie) ==== */
.cookie-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 24px;
    padding: 16px 6vw;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 34px rgba(7, 11, 14, 0.10);
    animation: cookieEntra 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes cookieEntra {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.cookie-bar-copy { display: flex; align-items: flex-start; gap: 12px; max-width: 760px; }
.cookie-bar-copy > i { color: var(--blue); font-size: 18px; margin-top: 2px; }
.cookie-bar-copy p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--muted); }
.cookie-bar-copy strong { color: var(--ink); font-weight: 800; }
.cookie-bar-copy a { color: var(--blue); font-weight: 700; text-decoration: underline; }
.cookie-bar-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #ffffff;
    color: var(--ink);
    cursor: pointer;
    transition: var(--transition-smooth);
    white-space: nowrap;
}
.cookie-btn:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
.cookie-btn-solid { background: var(--blue); border-color: var(--blue); color: #ffffff; }
.cookie-btn-solid:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #ffffff; }
/* Mientras el aviso está a la vista, el botón de «volver arriba» sube por encima de él.
   La altura la publica el guion en --cookie-alto, porque el aviso cambia de alto según
   el ancho de la pantalla. */
body.con-cookies .to-top { bottom: calc(22px + var(--cookie-alto, 96px)); }
@media (max-width: 720px) {
    .cookie-bar { padding: 14px 5vw; gap: 12px; }
    .cookie-bar-actions { width: 100%; justify-content: center; }
    .cookie-btn { flex: 1 1 auto; text-align: center; }
}