:root { /**/
            /* Colores base institucionales */ 
            --csf-bg: #f3f4f6;
            --csf-surface: #ffffff;
            --csf-surface-elevated: #f9fafb;

            --csf-primary: #1d4ed8;         /* Azul institucional */
            --csf-primary-soft: #dbeafe;    /* Azul suave */
            --csf-primary-deep: #1d4ed8;    /* Azul institucional oscuro, cercano a botones */

            --csf-accent-yellow: #facc15;   /* Amarillo sol */
            --csf-accent-yellow-soft: #fef3c7;

            --csf-text-main: #111827;       /* Gris muy oscuro */
            --csf-text-muted: #6b7280;      /* Gris medio */
            --csf-border-subtle: #e5e7eb;   /* Borde gris suave */

            --csf-navbar-bg: rgba(255, 255, 255, 0.96);
            --csf-navbar-blur: 18px;

            --csf-alert-bg: #fee2e2;
            --csf-alert-border: #fecaca;
            --csf-alert-text: #b91c1c;

            --csf-info-bg: #e0f2fe;
            --csf-info-border: #bae6fd;
            --csf-info-text: #075985;

            --csf-cookie-bg: #111827;
            --csf-cookie-text: #f9fafb;

            /* Alturas dinámicas (se ajustan vía JS) */
            --csf-banner-height: 25px;
            --csf-brand-height: 140px;   /* ← AJUSTA AQUÍ EL ALTO QUE QUIERAS */
        }

        body {
            background: var(--csf-bg);
            color: var(--csf-text-main);
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
                         "Segoe UI", sans-serif;
            padding-top: 140px; /* se recalcula via JS */
        }

        /* BANNER / MARQUESINA SUPERIOR */
        .csf-top-banner-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1050;
        }

        .csf-top-banner {
            display: flex;
            align-items: center;
            overflow: hidden;
            padding: 0.25rem 0.75rem;
            border-bottom: 1px solid transparent;
            font-size: 0.8rem;
        }

        .csf-top-banner-info {
            background: linear-gradient(to right, var(--csf-info-bg), #ffffff);
            border-bottom-color: var(--csf-info-border);
            color: var(--csf-info-text);
        }

        .csf-top-banner-alert {
            background: linear-gradient(to right, var(--csf-alert-bg), #ffffff);
            border-bottom-color: var(--csf-alert-border);
            color: var(--csf-alert-text);
        }

        .csf-banner-pill {
            font-size: 0.7rem;
            font-weight: 600;
            padding: 0.15rem 0.6rem;
            border-radius: 999px;
            margin-right: 0.75rem;
            white-space: nowrap;
            border: 1px solid rgba(148,163,184,0.45);
        }

        .csf-banner-pill-info {
            background-color: rgba(59,130,246,0.12);
        }

        .csf-banner-pill-alert {
            background-color: rgba(248,113,113,0.18);
        }

        .csf-banner-text-container {
            flex: 1;
            overflow: hidden;
        }

        .csf-banner-marquee {
            white-space: nowrap;
            display: inline-block;
            padding-left: 100%;
            animation: csf-marquee 18s linear infinite;
        }

        @keyframes csf-marquee {
            0%   { transform: translateX(0);    }
            100% { transform: translateX(-100%);}
        }

        .csf-banner-close-btn {
            background: transparent;
            border: none;
            font-size: 1rem;
            line-height: 1;
            margin-left: 0.5rem;
            color: inherit;
            opacity: 0.7;
        }

        .csf-banner-close-btn:hover {
            opacity: 1;
        }

        /* FRANJA SUPERIOR INSTITUCIONAL (LOGO + NOMBRE + SLOGAN) */
        .csf-top-brand {
            position: fixed;
            top: var(--csf-banner-height);
            left: 0;
            right: 0;
            z-index: 1048;
            background: var(--csf-primary-deep);
            background-image: url('banner.jpg'); /* Cambia aquí tu imagen */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(255,255,255,0.08);
            transition: transform 0.3s ease-out, opacity 0.3s ease-out;

            /* NUEVO: altura controlada por variable y centrado vertical */
            height: var(--csf-brand-height);
            display: flex;
            align-items: center;
        }

        .csf-top-brand::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(7, 16, 40, 0.70); /* oscurece para que se lea bien el texto */
        }

        .csf-top-brand-inner {
            position: relative;
            z-index: 2;
            padding: 0 1rem; /* antes 1.2rem 1rem; se quita padding vertical para respetar la altura fija */
            text-align: center;
            color: #ffffff;
        }

        .csf-top-brand-title {
            font-size: 2rem;
            font-weight: 800;
            letter-spacing: -0.03em;
            line-height: 1.05;
            padding: 0 6rem;
        }

        .csf-top-brand-title-mobile {
            display: none;
        }

        .csf-top-brand-logo-big {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            height: calc(var(--csf-brand-height) - 12px);
            width: auto;
            object-fit: contain;
            mix-blend-mode: multiply;
            z-index: 3;
        }

        .csf-top-brand-subtitle {
            font-size: 0.85rem;
            opacity: 0.9;
            margin-top: 0.2rem;
            text-align: center;
            padding: 0 6rem;
        }

        .csf-top-brand-subtitle-text {
            display: block;
        }

        .csf-top-brand-subtitle-author {
            display: block;
            font-size: 0.76rem;
            font-style: italic;
            opacity: 0.85;
            margin-top: 0.1rem;
        }

        /* Al hacer scroll se esconde la franja institucional */
        body.scrolled #csfTopBrand {
            transform: translateY(-100%);
            opacity: 0;
        }

        /* NAVBAR */
        .csf-navbar {
            backdrop-filter: blur(var(--csf-navbar-blur));
            -webkit-backdrop-filter: blur(var(--csf-navbar-blur));
            background-color: var(--csf-navbar-bg);
            border-bottom: 1px solid rgba(148, 163, 184, 0.25);
            z-index: 1047;
            position: fixed;
            left: 0;
            right: 0;
            top: calc(var(--csf-banner-height) + var(--csf-brand-height));
            transition: top 0.25s ease-out, box-shadow 0.25s ease-out;
        }

        /* Cuando se esconde la banda de marca, el navbar sube justo bajo el banner */
        body.scrolled .csf-navbar {
            top: var(--csf-banner-height);
            box-shadow: 0 10px 25px rgba(15,23,42,0.12);
        }

        .navbar-brand {
            font-size: 0.9rem;
            font-weight: 600;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-4px);
            max-width: 0;
            overflow: hidden;
            white-space: nowrap;
            margin-right: 0;
            transition: opacity 0.22s ease, transform 0.22s ease, max-width 0.22s ease, margin-right 0.22s ease;
        }

        body.scrolled .navbar-brand {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            max-width: 320px;
            margin-right: 1rem;
        }

        .navbar-nav .nav-link {
            font-weight: 500;
            color: var(--csf-text-muted);
            padding-inline: 0.75rem;
            transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
        }
        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link:focus,
        .navbar-nav .nav-link.active {
            color: #083b66;
            background-color: rgba(8, 59, 102, 0.08);
        }

        .navbar-nav .nav-link.csf-user-nav-link {
            color: #ffffff;
            background: linear-gradient(135deg, #0f5fa8 0%, #1791db 100%);
            border: 1px solid rgba(7, 63, 116, 0.28);
            border-radius: 0.45rem;
            margin-inline: 0.2rem;
            padding: 0.42rem 0.95rem;
            font-weight: 700;
            box-shadow: 0 10px 18px rgba(12, 78, 136, 0.2);
        }

        .navbar-nav .nav-link.csf-user-nav-link:hover,
        .navbar-nav .nav-link.csf-user-nav-link:focus,
        .navbar-nav .nav-link.csf-user-nav-link.active {
            color: #ffffff;
            background: linear-gradient(135deg, #0a457d 0%, #0f74b8 100%);
            border-color: rgba(6, 46, 86, 0.44);
            box-shadow: 0 14px 24px rgba(10, 69, 125, 0.28);
        }

        .csf-user-action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            background: linear-gradient(135deg, #0f5fa8 0%, #1791db 100%);
            border: 1px solid rgba(7, 63, 116, 0.28);
            border-radius: 0.45rem;
            min-height: calc(1.5em + 0.84rem + 2px);
            padding: 0.42rem 0.95rem;
            font-weight: 700;
            line-height: 1.5;
            box-shadow: 0 10px 18px rgba(12, 78, 136, 0.2);
        }

        .csf-user-action-btn:hover,
        .csf-user-action-btn:focus {
            color: #ffffff;
            background: linear-gradient(135deg, #0a457d 0%, #0f74b8 100%);
            border-color: rgba(6, 46, 86, 0.44);
            box-shadow: 0 14px 24px rgba(10, 69, 125, 0.28);
        }

        .csf-legacy-nav-btn {
            color: #4a3200;
            background: linear-gradient(135deg, #c99a1a 0%, #f1d06b 100%);
            border: 1px solid rgba(146, 103, 10, 0.45);
            font-weight: 800;
            box-shadow: 0 10px 18px rgba(146, 103, 10, 0.2);
        }

        .csf-legacy-nav-btn:hover,
        .csf-legacy-nav-btn:focus {
            color: #3a2700;
            background: linear-gradient(135deg, #b88712 0%, #e6bf56 100%);
            border-color: rgba(120, 83, 8, 0.48);
            box-shadow: 0 14px 24px rgba(120, 83, 8, 0.24);
        }

        .dropdown-menu {
            border-radius: 0.9rem;
            border-color: var(--csf-border-subtle);
            box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
            font-size: 0.9rem;
        }

        .dropdown-item {
            padding: 0.45rem 1rem;
            transition: background-color 0.18s ease, color 0.18s ease;
        }

        .dropdown-item:hover,
        .dropdown-item:focus {
            background-color: #083b66;
            color: #ffffff;
        }

        /* Submenú de segundo nivel */
        .dropdown-submenu {
            position: relative;
        }
        .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: 100%;
            margin-left: .1rem;
            margin-right: .1rem;
        }
        .dropdown-submenu > .dropdown-toggle::after {
            transform: rotate(-90deg);
            float: right;
            margin-top: .3rem;
        }

        /* BARRA PRIVADA DE USUARIO (debajo del navbar) */
        .csf-user-portal-wrap {
            padding: 0.9rem 0 0.4rem;
        }

        .csf-user-portal-card {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            padding: 0.7rem 0.9rem;
            border-radius: 0.85rem;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            border: 1px solid rgba(14, 77, 164, 0.16);
            box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
        }

        .csf-user-portal-label {
            flex: 0 0 auto;
            font-size: 0.88rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: none;
            color: #0b4ea2;
            background: transparent;
            border: 0;
            border-radius: 0;
            padding: 0;
            white-space: nowrap;
        }

        .csf-user-portal-links {
            display: flex;
            gap: 0.5rem;
            flex-wrap: nowrap;
            overflow-x: auto;
            scrollbar-width: thin;
            width: 100%;
        }

        .csf-user-portal-link {
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            text-decoration: none;
            color: #0f172a;
            background-color: #eef4ff;
            border: 1px solid rgba(14, 77, 164, 0.2);
            padding: 0.42rem 0.8rem;
            border-radius: 0.65rem;
            font-size: 0.86rem;
            font-weight: 600;
            white-space: nowrap;
            transition: all 0.2s ease;
        }

        .csf-user-portal-link:hover,
        .csf-user-portal-link:focus {
            background-color: #dbe9ff;
            color: #0b4ea2;
            border-color: rgba(11, 78, 162, 0.34);
        }

        @media (max-width: 991.98px) {
            .navbar-nav .nav-link.csf-user-nav-link {
                border-radius: 0.45rem;
                margin: 0.18rem 0;
                text-align: center;
            }
        }

        /* HERO */
        .csf-hero {
            /* antes: 7.5rem 1.5rem 3.5rem; menos espacio extra arriba */
            padding: 3.5rem 1.5rem 3.5rem;
        }

        body.csf-home-page {
            background-color: #dbe4ec;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
                url('/img/fachada.png');
            background-repeat: no-repeat, no-repeat;
            background-position:
                center calc(var(--csf-banner-height) + var(--csf-brand-height) + 56px),
                center calc(var(--csf-banner-height) + var(--csf-brand-height) + 56px);
            background-size:
                100vw clamp(340px, 52vw, 640px),
                100vw clamp(340px, 52vw, 640px);
        }

        body.csf-home-page .csf-hero {
            position: relative;
            z-index: 1;
        }

        .csf-hero-card {
            background: var(--csf-surface);
            border-radius: 1.5rem;
            border: 1px solid rgba(148, 163, 184, 0.25);
            box-shadow: 0 22px 55px rgba(15, 23, 42, 0.10);
            padding: 2.4rem 1.8rem;
        }

        body.csf-home-page .csf-hero-card {
            background: rgba(255, 255, 255, 0);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            box-shadow: 0 24px 52px rgba(15, 23, 42, 0.16);
        }

        body.csf-home-page .csf-home-quick-access .csf-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }

        .csf-home-levels {
            padding-top: 0;
            margin-top: 8rem;
        }

        .csf-level-card-link {
            display: block;
            text-decoration: none;
            color: inherit;
        }

        body.csf-home-page .csf-level-card {
            overflow: hidden;
            padding: 0;
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            transition: transform 0.18s ease, box-shadow 0.18s ease;
            text-align: center;
        }

        .csf-level-card:hover,
        .csf-level-card-link:focus .csf-level-card {
            transform: translateY(-3px);
            box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
        }

        .csf-level-card-image {
            display: block;
            width: min(100%, 200px);
            max-width: 200px;
            height: auto;
            margin: 1rem auto 0;
            object-fit: cover;
            border-radius: 0.9rem;
        }

        .csf-level-card-body {
            padding: 1rem 1.05rem 1.1rem;
        }

        .csf-robotica-section {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .csf-robotica-hero,
        .csf-robotica-benefits {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 1.4rem;
            align-items: center;
        }

        .csf-robotica-tag {
            display: inline-block;
            margin-bottom: 0.9rem;
            padding: 0.45rem 0.8rem;
            border-radius: 999px;
            background: #e8f1ff;
            color: #1d4f91;
            font-size: 0.78rem;
            font-weight: 700;
        }

        .csf-robotica-level-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }

        .csf-robotica-card {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .csf-robotica-card-media,
        .csf-robotica-image-panel {
            border-radius: 1rem;
            overflow: hidden;
            background: #eef4fb;
            min-height: 240px;
        }

        .csf-robotica-image {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .csf-robotica-image-placeholder {
            min-height: 240px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            text-align: center;
            color: #47607a;
            font-weight: 600;
            background:
                linear-gradient(135deg, rgba(29, 78, 216, 0.10), rgba(219, 234, 254, 0.95));
        }

        .csf-robotica-skills {
            display: flex;
            flex-wrap: wrap;
            gap: 0.65rem;
        }

        .csf-robotica-skills span {
            background: #eef4fb;
            color: #244a73;
            padding: 0.6rem 0.85rem;
            border-radius: 999px;
            font-size: 0.82rem;
            font-weight: 700;
        }

        .csf-hero-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.7rem;
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 500;
            background: var(--csf-primary-soft);
            color: var(--csf-primary-deep);
            margin-bottom: 1.3rem;
        }

        .csf-hero-badge-dot {
            width: 0.45rem;
            height: 0.45rem;
            border-radius: 999px;
            margin-right: 0.45rem;
            background: #22c55e;
        }

        .csf-hero-title {
            font-size: clamp(1.85rem, 3vw, 2.3rem);
            font-weight: 800;
            letter-spacing: -0.04em;
            margin-bottom: 0.6rem;
        }

        .csf-hero-subtitle {
            font-size: 0.95rem;
            color: var(--csf-text-muted);
            max-width: 30rem;
            margin: 0 auto 1.8rem;
        }

        .csf-hero-highlight {
            color: var(--csf-primary);
            font-weight: 600;
        }

        .csf-hero-actions .btn {
            border-radius: 999px;
            padding-inline: 1.5rem;
            font-weight: 600;
        }

        .csf-hero-actions .btn-primary {
            background: var(--csf-primary);
            border: none;
        }

        .csf-hero-actions .btn-outline-primary {
            border-radius: 999px;
            border-color: rgba(148, 163, 184, 0.6);
            color: var(--csf-text-main);
            background: #ffffff;
        }

        .csf-hero-actions .btn-outline-primary:hover {
            border-color: var(--csf-primary);
            color: var(--csf-primary-deep);
            background: var(--csf-primary-soft);
        }

        /* SECCIONES / CARDS */
        .csf-section {
            padding-bottom: 3.2rem;
        }

        .csf-section-title {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .csf-card {
            border-radius: 1.1rem;
            border: 1px solid rgba(148, 163, 184, 0.25);
            background: var(--csf-surface-elevated);
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            padding: 1.3rem 1.3rem 1.2rem;
            height: 100%;
        }

        .csf-card-title {
            font-size: 0.95rem;
            font-weight: 600;
        }

        .csf-card-pill {
            font-size: 0.7rem;
            padding: 0.1rem 0.45rem;
            border-radius: 999px;
            background: rgba(37, 99, 235, 0.07);
            color: var(--csf-primary-deep);
        }

        .csf-card-icon {
            width: 30px;
            height: 30px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(37, 99, 235, 0.08);
            margin-right: 0.75rem;
            font-size: 1.1rem;
        }

        /* Paginas internas */
        .csf-internal-hero-wrap {
            padding-top: 1.35rem;
            padding-bottom: 0.65rem;
        }

        .csf-internal-hero {
            border: 1px solid rgba(148, 163, 184, 0.28);
            border-radius: 1.3rem;
            padding: 1rem 1.15rem 0.9rem;
            background:
                linear-gradient(135deg, rgba(29, 78, 216, 0.18), rgba(191, 219, 254, 0.9)),
                linear-gradient(120deg, rgba(29, 78, 216, 0.09), rgba(255, 255, 255, 0.95)),
                var(--csf-surface);
            box-shadow: 0 14px 34px rgba(15, 23, 42, 0.09);
            position: relative;
            overflow: hidden;
        }

        .csf-internal-hero::before {
            content: "";
            position: absolute;
            inset: 0 auto 0 0;
            width: 6px;
            background: linear-gradient(180deg, #1d4ed8, #0b2866);
        }

        .csf-internal-hero > * {
            position: relative;
            z-index: 1;
        }

        .csf-internal-hero-head {
            display: flex;
            align-items: flex-start;
            gap: 0.9rem;
        }

        .csf-internal-back-btn {
            border-radius: 999px;
            padding-inline: 0.9rem;
            font-weight: 700;
            white-space: nowrap;
            margin-top: 0.15rem;
        }

        .csf-internal-eyebrow {
            font-size: 0.74rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--csf-primary);
        }

        .csf-internal-title {
            font-size: clamp(1.5rem, 2.6vw, 2rem);
            font-weight: 800;
            letter-spacing: -0.03em;
            color: #0b2866;
            line-height: 1.08;
        }

        .csf-internal-subtitle {
            color: #334155;
            font-size: 0.9rem;
            line-height: 1.35;
            max-width: 46rem;
        }

        .csf-internal-card {
            background: var(--csf-surface);
        }

        .csf-internal-block-title {
            font-size: 0.95rem;
            font-weight: 700;
            margin-bottom: 0.65rem;
            color: #0f172a;
        }

        .csf-internal-card-title {
            font-size: 0.92rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: #0f172a;
        }

        .csf-internal-text {
            color: var(--csf-text-muted);
            font-size: 0.88rem;
            line-height: 1.55;
        }

        .csf-kv-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .csf-kv-list li {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 0.8rem;
            border-bottom: 1px dashed rgba(148, 163, 184, 0.35);
            padding: 0.48rem 0;
            font-size: 0.82rem;
        }

        .csf-kv-list li:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .csf-kv-list span {
            color: #64748b;
        }

        .csf-kv-list strong {
            color: #0f172a;
            font-weight: 600;
            text-align: right;
        }

        .csf-internal-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.55rem;
            margin-top: 1.25rem;
        }

        .csf-internal-actions .btn {
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 600;
            padding-inline: 1rem;
        }

        /* Contenedor responsive para mapa embebido de Google */
        .csf-map-embed-wrap {
            border-radius: 0.9rem;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.28);
            background: #ffffff;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
        }

        /* Iframe del mapa con alto adaptable */
        .csf-map-embed {
            display: block;
            width: 100%;
            height: 380px;
            border: 0;
        }

        /* Contenedor responsive para Google Calendar embebido */
        .csf-calendar-embed-wrap {
            border-radius: 0.9rem;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.28);
            background: #ffffff;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
        }

        /* Iframe del calendario con alto adaptable */
        .csf-calendar-embed {
            display: block;
            width: 100%;
            height: 760px;
            border: 0;
        }

        /* Ficha del calendario con menos padding para dar mas ancho util al iframe */
        .csf-calendar-card {
            padding: 1rem;
        }

        /* Botones de suscripcion */
        .csf-calendar-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.55rem;
        }

        /* Mensaje de estado para copiado de enlace ICS */
        .csf-copy-status {
            font-size: 0.82rem;
            color: #166534;
            background: #dcfce7;
            border: 1px solid #bbf7d0;
            border-radius: 0.65rem;
            padding: 0.45rem 0.65rem;
        }

        /* Imagen lateral dentro de una ficha (texto + foto) */
        .csf-side-image-wrap {
            border-radius: 0.9rem;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.28);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
            background: #ffffff;
        }

        /* Imagen responsive con alto consistente */
        .csf-side-image {
            display: block;
            width: 100%;
            height: 220px;
            object-fit: cover;
        }

        .csf-side-image-wrap-sm {
            max-width: 220px;
            margin-left: auto;
        }

        .csf-side-image-sm {
            height: 150px;
        }

        .csf-level-image-card {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        .csf-side-image-wrap-tall {
            width: 100%;
            max-width: 182px;
            margin: 0 auto;
        }

        .csf-side-image-tall {
            height: 238px;
            object-fit: contain;
            background: #ffffff;
        }

        .csf-support-cta {
            margin-top: 2.4rem;
        }

        .csf-support-cta-inner {
            display: flex;
            justify-content: center;
        }

        .csf-support-cta .btn {
            font-weight: 700;
            box-shadow: 0 10px 24px rgba(22, 163, 74, 0.22);
        }

        /* Footer estandar */
        .csf-footer {
            position: relative;
            margin-top: 1rem;
            padding: 1.4rem 0;
            background: var(--csf-primary-deep);
            overflow: hidden;
            border-top: 1px solid rgba(148, 163, 184, 0.18);
            color: #e5e7eb;
        }

        .csf-footer::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(7, 16, 40, 0.70);
        }

        .csf-footer-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1.6fr 1fr;
            gap: 1rem;
        }

        .csf-footer-title {
            font-size: 0.9rem;
            font-weight: 700;
            margin-bottom: 0.35rem;
            color: #ffffff;
        }

        .csf-footer-text {
            font-size: 0.82rem;
            color: #cbd5e1;
            line-height: 1.5;
        }

        /* Enlaces dentro del footer */
        .csf-footer a {
            color: #bfdbfe;
            text-decoration: underline;
        }

        .csf-social-links {
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }

        .csf-social-links a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            width: 42px;
            height: 42px;
            border-radius: 0.75rem;
            background: rgba(255, 255, 255, 0.92);
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
            transition: transform 0.18s ease, box-shadow 0.18s ease;
        }

        .csf-social-links a:hover,
        .csf-social-links a:focus {
            transform: translateY(-2px);
            box-shadow: 0 14px 26px rgba(15, 23, 42, 0.16);
        }

        .csf-social-links img {
            display: block;
            width: 28px;
            height: 28px;
            object-fit: contain;
        }

        .csf-social-text-link {
            min-width: 52px;
            padding: 0 0.65rem;
        }

        .csf-social-text-link span {
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--csf-primary-deep);
            line-height: 1;
        }

        /* Aviso de cookies */
        .csf-cookie-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1040;
            background: rgba(15, 23, 42, 0.98);
            color: var(--csf-cookie-text);
            padding: 0.9rem 1rem;
            font-size: 0.85rem;
        }

        .csf-cookie-banner a {
            color: #bfdbfe;
            text-decoration: underline;
        }

        .csf-cookie-btn {
            border-radius: 999px;
            padding-inline: 1.2rem;
            font-size: 0.8rem;
            font-weight: 600;
        }

        /* Modal formularios */
        .csf-auth-modal .modal-content {
            border-radius: 1.3rem;
            border: 1px solid rgba(148, 163, 184, 0.25);
            box-shadow: 0 22px 55px rgba(15, 23, 42, 0.22);
        }

        .csf-auth-tabs .nav-link {
            border-radius: 999px !important;
            font-size: 0.85rem;
            padding-inline: 1rem;
        }

        .csf-auth-tabs .nav-link.active {
            background: var(--csf-primary);
            color: #ffffff !important;
        }

        .form-control,
        .form-select {
            border-radius: 0.9rem;
            border-color: var(--csf-border-subtle);
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--csf-primary);
            box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
        }

        /* HOVERS GENERALES PARA BOTONES */
        .btn {
            transition: background-color 0.18s ease, color 0.18s ease,
                        box-shadow 0.18s ease, transform 0.12s ease;
        }

        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 22px rgba(15,23,42,0.18);
        }

        .btn:active {
            transform: translateY(0);
            box-shadow: none;
        }

        .btn-outline-light:hover {
            color: #0f172a;
        }

        .csf-wizard-steps {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.85rem;
        }

        .csf-wizard-step {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.95rem 1rem;
            border: 1px solid rgba(148, 163, 184, 0.35);
            border-radius: 1rem;
            background: linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.92));
            color: #64748b;
        }

        .csf-wizard-step.is-active {
            border-color: rgba(37, 99, 235, 0.35);
            background: linear-gradient(135deg, rgba(219, 234, 254, 0.95), rgba(239, 246, 255, 0.98));
            color: #1d4ed8;
            box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
        }

        .csf-wizard-step.is-complete {
            border-color: rgba(22, 163, 74, 0.28);
            background: linear-gradient(135deg, rgba(220, 252, 231, 0.95), rgba(240, 253, 244, 0.98));
            color: #166534;
        }

        .csf-wizard-step-number {
            width: 2rem;
            height: 2rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            background: rgba(148, 163, 184, 0.18);
            font-weight: 700;
            flex: 0 0 auto;
        }

        .csf-wizard-step.is-active .csf-wizard-step-number {
            background: #2563eb;
            color: #ffffff;
        }

        .csf-wizard-step.is-complete .csf-wizard-step-number {
            background: #16a34a;
            color: #ffffff;
        }

        .csf-wizard-step-label {
            font-size: 0.95rem;
            font-weight: 600;
            line-height: 1.2;
        }

        @media (min-width: 768px) {
            .csf-hero {
                /* antes: padding-top: 8.5rem; */
                padding-top: 4.5rem;
            }

            .csf-hero-card {
                padding: 3rem 3rem 2.6rem;
            }

            .csf-internal-hero {
                padding: 1.15rem 1.5rem 1rem;
            }
        }

        @media (max-width: 991.98px) {
            .csf-robotica-hero,
            .csf-robotica-benefits,
            .csf-robotica-level-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 991.98px) {
            :root {
                --csf-brand-height: 120px;
            }

            .csf-top-brand-title {
                font-size: 1.65rem;
                padding: 0 5.5rem;
            }

            .csf-top-brand-logo-big {
                height: calc(var(--csf-brand-height) - 22px);
            }
        }

        @media (max-width: 575.98px) {
            :root {
                --csf-brand-height: 100px;
            }

            body.csf-home-page {
                background-position:
                    center calc(var(--csf-banner-height) + var(--csf-brand-height) + 52px),
                    center calc(var(--csf-banner-height) + var(--csf-brand-height) + 52px);
                background-size:
                    100vw 260px,
                    100vw 260px;
            }

            .csf-top-brand-inner {
                padding: 0 0.75rem;
            }

            .csf-top-brand-title {
                font-size: 0.96rem;
                padding: 0 0.75rem 0 3.35rem;
                width: calc(100% - 3.35rem);
                margin-left: 3.35rem;
                text-align: center;
            }

            .csf-top-brand-title-desktop {
                display: none;
            }

            .csf-top-brand-title-mobile {
                display: inline-block;
                line-height: 1.08;
            }

            .csf-top-brand-subtitle {
                font-size: 0.64rem;
                width: calc(100% - 3.35rem);
                margin-left: 3.35rem;
                padding: 0 0.75rem 0 0.75rem;
                text-align: center;
            }

            .csf-top-brand-subtitle-author {
                font-size: 0.58rem;
            }

            .csf-top-brand-logo-big {
                left: 0.5rem;
                height: calc(var(--csf-brand-height) - 30px);
            }

            .csf-internal-hero-head {
                flex-direction: column;
                align-items: flex-start;
            }

            .csf-internal-back-btn {
                margin-top: 0;
            }

            /* Ajuste de altura de imagen lateral para moviles */
            .csf-side-image {
                height: 190px;
            }

            /* Altura del mapa en pantallas pequenas */
            .csf-map-embed {
                height: 300px;
            }

            /* Altura del calendario en pantallas pequenas */
            .csf-calendar-embed {
                height: 560px;
            }

            .csf-footer-grid {
                grid-template-columns: 1fr;
            }

            .csf-wizard-steps {
                grid-template-columns: 1fr;
            }
        }