/* ============================================================================
           DESIGN TOKENS - Sistema en cascada
           ============================================================================ */
        
        :root {
            /* ─────────────────────────────────────────────────────────────────────
               NIVEL 1: TOKENS PRIMITIVOS
               ───────────────────────────────────────────────────────────────────── */
            
            --space-base: 0.25rem; /* 4px */
            
            /* Colores corporativos */
            --color-primary-500: #1E194D;
            --color-primary-600: #171239;
            --color-accent-blue: #2D82B7;
            --color-corporate-blue: #013B5B;
            
            /* Colores de gradiente */
            --color-gradient-orange: #FF5100;
            --color-gradient-magenta: #C028B9;
            --color-gradient-cyan: #00A0FF;
            --color-gradient-teal: #3BBFAD;
            --color-gradient-pink: #D50057;
            --color-gradient-yellow: #ECD925;
            --color-gradient-brown: #8D634B;
            --color-gradient-fuchsia: #DC2597;
            --color-gradient-red: #A73439;
            --color-gradient-lavender: #A7A1C2;
            --color-gradient-lime: #76BC21;
            --color-gradient-gray: #76777A;
            
            /* Tipografía */
            --font-primary: 'Jost', sans-serif;
            --font-secondary: 'Roboto', sans-serif;
            --font-size-base: 1rem;
            --line-height-base: 1.6;
            
            /* Radios */
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            
            /* Sombras */
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
            --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
            --shadow-elevated: 0 20px 60px rgba(0, 0, 0, 0.2);
            --shadow-card: 0 0 20px rgba(0, 0, 0, 1); /* Sombra estándar para cards e imágenes del proyecto */
            
            /* ─────────────────────────────────────────────────────────────────────
               NIVEL 2: TOKENS SEMÁNTICOS
               ───────────────────────────────────────────────────────────────────── */
            
            --spacing-xs: calc(var(--space-base) * 2); /* 8px */
            --spacing-sm: calc(var(--space-base) * 4); /* 16px */
            --spacing-md: calc(var(--space-base) * 6); /* 24px */
            --spacing-lg: calc(var(--space-base) * 7); /* 28px */
            --spacing-xl: calc(var(--space-base) * 12); /* 48px */
            --spacing-2xl: calc(var(--space-base) * 16); /* 64px */
            --spacing-3xl: calc(var(--space-base) * 24); /* 96px */
            --spacing-section: calc(var(--space-base) * 37.5); /* 150px */
            
            --card-padding-block: calc(var(--space-base) * 10); /* 40px */
            --card-padding-inline: calc(var(--space-base) * 12.5); /* 50px */
            
            /* Layout */
            --container-width: 1140px;  /* Ancho útil del contenido */
            --container-padding: var(--spacing-lg);  /* 32px (16px cada lado) */
            --container-total: calc(var(--container-width) + (var(--container-padding) * 2));  /* 1140px + 64px = 1204px */
            --page-max-width: 1600px;
            
            /* Sticky headers */
            --header-height: 80px;
            --topbar-height: 40px;
            --subnav-height: 60px;
            
            /* ─────────────────────────────────────────────────────────────────────
               NIVEL 3: GRADIENTES
               ───────────────────────────────────────────────────────────────────── */
            
            --gradient-01: linear-gradient(45deg, var(--color-gradient-orange) 0%, var(--color-primary-500) 100%);
            --gradient-02: linear-gradient(45deg, var(--color-gradient-magenta) 0%, var(--color-primary-500) 100%);
            --gradient-03: linear-gradient(45deg, var(--color-gradient-cyan) 0%, var(--color-primary-500) 100%);
            --gradient-04: linear-gradient(45deg, var(--color-gradient-teal) 0%, var(--color-primary-500) 100%);
            --gradient-05: linear-gradient(45deg, var(--color-gradient-pink) 0%, var(--color-primary-500) 100%);
            --gradient-06: linear-gradient(45deg, var(--color-gradient-yellow) 0%, var(--color-primary-500) 100%);
            --gradient-07: linear-gradient(45deg, var(--color-gradient-brown) 0%, var(--color-primary-500) 100%);
            --gradient-08: linear-gradient(45deg, var(--color-gradient-fuchsia) 0%, var(--color-primary-500) 100%);
            --gradient-09: linear-gradient(45deg, var(--color-gradient-red) 0%, var(--color-primary-500) 100%);
            --gradient-10: linear-gradient(45deg, var(--color-gradient-lavender) 0%, var(--color-primary-500) 100%);
            --gradient-11: linear-gradient(45deg, var(--color-gradient-lime) 0%, var(--color-primary-500) 100%);
            --gradient-12: linear-gradient(45deg, var(--color-gradient-gray) 0%, var(--color-primary-500) 100%);
            --gradient-corporate: linear-gradient(45deg, var(--color-corporate-blue) 0%, #000000 100%);
        }
        
        /* ============================================================================
           RESET & BASE
           ============================================================================ */
        
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        html {
            font-size: 16px;
            scroll-behavior: smooth;
            scroll-padding-top: calc(var(--header-height) + var(--subnav-height));
        }
        
        body {
            font-family: var(--font-secondary);
            font-size: var(--font-size-base);
            line-height: var(--line-height-base);
            color: #333;
            background: #fff;
        }
        
        img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        
        a {
            color: inherit;
            text-decoration: none;
        }
        
        button {
            font-family: inherit;
            cursor: pointer;
            border: none;
            background: none;
        }
        
        /* ============================================================================
           LAYOUT SYSTEM
           ============================================================================ */
        
        .page-wrapper {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        /* Container centrado de 1140px útiles */
        .container {
            width: 100%;
            max-width: var(--container-total);  /* 1204px total (1140px + 64px padding) */
            margin: 0 auto;
            padding-inline: var(--container-padding);  /* 32px (16px cada lado) */
        }
        
        /* Resultado: contenido interno = 1140px exactos ✅ */
        
        /* Full-width backgrounds */
        .region--full-width {
            width: 100%;
        }
        
        /* Section spacing */
        .section + .section {
            margin-top: var(--spacing-section);
        }
        
        /* ============================================================================
           TYPOGRAPHY
           ============================================================================ */
        
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-primary);
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: var(--spacing-md);
        }
        
        h1 {
            font-size: clamp(2rem, 4vw, 3.5rem);
        }
        
        h2 {
            font-size: clamp(1.75rem, 3vw, 2.5rem);
        }
        
        h3 {
            font-size: clamp(1.5rem, 2.5vw, 2rem);
        }
        
        h4 {
            font-size: clamp(1.25rem, 2vw, 1.5rem);
        }
        
        p {
            margin-bottom: var(--spacing-sm);
        }
        
        p:last-child {
            margin-bottom: 0;
        }
        
        /* ============================================================================
           REGIÓN 1: TOP BAR (barra superior informativa)
           ============================================================================ */
        
        .region-topbar {
            background: linear-gradient(to right, #e6e6e6 50%, #4d4d4d 50%);
            min-height: var(--topbar-height);
        }
        
        /* Container con contenido */
        .topbar__container {
            background: #e6e6e6;
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            min-height: var(--topbar-height);
        }
        
        .topbar__left-section {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            flex: 1;
        }
        
        .topbar__right-section {
            background: #4d4d4d;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-left: 20px;
            padding-right: var(--container-padding);
            margin-right: calc(-1 * var(--container-padding));
        }
        
        /* Selector de idioma */
        .topbar__lang-selector {
            position: relative;
        }
        
        .lang-select {
            background: transparent;
            border: none;
            color: #000000;
            font-family: var(--font-primary);
            font-size: 0.875rem;
            font-weight: 700;
            padding: 4px 20px 4px 4px;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
        }
        
        .lang-select:focus {
            outline: none;
        }
        
        .topbar__lang-selector::after {
            content: '▼';
            position: absolute;
            right: 4px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.625rem;
            color: #000000;
            pointer-events: none;
        }
        
        /* Buscador */
        .topbar__search {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 298px;
        }
        
        .search-icon {
            width: 16px;
            height: 16px;
            display: block;
        }
        
        .search-input {
            flex: 1;
            background: transparent;
            border: none;
            border-bottom: 1px solid #000000;
            color: #000000;
            font-family: var(--font-secondary);
            font-size: 0.875rem;
            padding: 4px 0;
        }
        
        .search-input::placeholder {
            color: #666666;
        }
        
        .search-input:focus {
            outline: none;
            border-bottom-color: #000000;
        }
        
        /* Link Canal Partner */
        .topbar__link {
            color: white;
            text-decoration: none;
            font-family: var(--font-primary);
            font-size: 0.875rem;
            font-weight: 500;
            transition: opacity 0.2s ease;
        }
        
        .topbar__link:hover {
            opacity: 0.8;
        }
        
        /* ============================================================================
           REGIÓN 2: HEADER (menú principal - STICKY)
           ============================================================================ */
        
        .region-header {
            background: linear-gradient(to right, var(--color-corporate-blue), #000000);
            color: white;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow-md);
        }
        
        .region-header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-height: var(--header-height);
        }
        
        .header__logo {
            display: flex;
            align-items: center;
        }
        
        .header__logo img {
            display: block;
            width: 260px;
            height: 27px;
        }
        
        .header__nav {
            display: flex;
            gap: var(--spacing-xl);
            align-items: center;
        }
        
        .header__nav a {
            color: white;
            text-decoration: none;
            font-family: var(--font-primary);
            font-weight: 500;
            font-size: 1rem;
            transition: opacity 0.2s ease;
        }
        
        .header__nav a:hover {
            opacity: 0.7;
        }
        
        /* ============================================================================
           REGIÓN 3: HERO / BANNER (slider)
           ============================================================================ */
        
        .region-hero {
            background: var(--gradient-corporate);
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        .region-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1600&h=900&fit=crop');
            background-size: cover;
            background-position: center;
            opacity: 0.15;
            mix-blend-mode: overlay;
        }
        
        .hero__inner {
            position: relative;
            z-index: 1;
            padding-block: var(--spacing-3xl);
            min-height: 600px;
            display: grid;
            grid-template-columns: 1fr 1fr; /* 50% vacío + 50% contenido */
            align-items: center;
        }
        
        .hero__content {
            /* Ocupa solo la columna derecha */
            grid-column: 2;
            padding: var(--card-padding-block) var(--card-padding-inline);
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
            border-radius: var(--radius-md);
            text-align: left;
        }
        
        .hero__badge {
            display: inline-flex;
            padding: var(--spacing-xs) var(--spacing-md);
            border-radius: var(--radius-md);
            font-family: var(--font-primary);
            font-size: 0.875rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            margin-bottom: var(--spacing-lg);
        }
        
        .hero__title {
            font-size: clamp(2.5rem, 5vw, 4rem);
            margin-bottom: var(--spacing-lg);
        }
        
        .hero__description {
            font-size: clamp(1.125rem, 2vw, 1.5rem);
            line-height: 1.5;
            opacity: 0.95;
            margin-bottom: var(--spacing-xl);
        }
        
        .hero__cta {
            display: inline-flex;
            padding: var(--spacing-md) var(--spacing-xl);
            border-radius: var(--radius-md);
            background: white;
            color: var(--color-primary-500);
            font-family: var(--font-primary);
            font-weight: 600;
            transition: transform 0.2s ease;
        }
        
        .hero__cta:hover {
            transform: translateY(-2px);
        }
        
        /* Pager del slider */
        .hero__nav {
            display: flex;
            gap: var(--spacing-sm);
            margin-top: var(--spacing-xl);
            justify-content: flex-start; /* Alineado a la izquierda dentro del card */
        }
        
        .hero__nav-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .hero__nav-dot:hover {
            background: rgba(255, 255, 255, 0.5);
        }
        
        .hero__nav-dot[data-active="true"] {
            background: white;
            width: 32px;
            border-radius: 6px;
        }
        
        /* ============================================================================
           REGIÓN 4: FEATURED CARD (full-width, sin container)
           ============================================================================ */
        
        .region-featured {
            background: linear-gradient(135deg, #0077BE 0%, #004A7C 100%);
            color: white;
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            display: flex;
            align-items: center;
        }
        
        .featured-card {
            position: relative;
            padding: var(--spacing-2xl) var(--container-padding);
            display: flex;
            align-items: center;
            max-width: var(--container-width);
            margin: 0 auto;
            width: 100%;
        }
        
        .region-featured::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=1200&h=600&fit=crop');
            background-size: cover;
            background-position: center;
            opacity: 0.1;
            mix-blend-mode: overlay;
        }
        
        .featured-card__content {
            position: relative;
            z-index: 1;
            max-width: 600px;
        }
        
        .featured-card__badge {
            display: inline-flex;
            padding: var(--spacing-xs) var(--spacing-md);
            border-radius: var(--radius-md);
            font-family: var(--font-primary);
            font-size: 0.875rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            margin-bottom: var(--spacing-md);
        }
        
        .featured-card__title {
            font-size: clamp(1.75rem, 3vw, 2.5rem);
            margin-bottom: var(--spacing-md);
        }
        
        .featured-card__description {
            font-size: 1.125rem;
            line-height: 1.6;
            opacity: 0.95;
            margin-bottom: var(--spacing-lg);
        }
        
        .featured-card__icon {
            position: absolute;
            right: var(--spacing-2xl);
            bottom: var(--spacing-2xl);
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
        }
        
        /* ============================================================================
           REGIÓN 5: SUBNAV (navegación secundaria - STICKY debajo del header)
           ============================================================================ */
        
        .region-subnav {
            background: var(--color-gradient-cyan);
            color: white;
            position: sticky;
            top: var(--header-height);
            z-index: 90;
            box-shadow: var(--shadow-sm);
        }
        
        .region-subnav .container {
            display: flex;
            gap: var(--spacing-xl);
            min-height: var(--subnav-height);
            align-items: center;
        }
        
        .subnav__link {
            font-family: var(--font-primary);
            font-weight: 600;
            padding-block: var(--spacing-sm);
            border-bottom: 3px solid transparent;
            transition: border-color 0.2s ease;
        }
        
        .subnav__link:hover,
        .subnav__link--active {
            border-bottom-color: white;
        }
        
        /* ============================================================================
           REGIÓN 6: PRODUCTOS (grid de 3 filas, 2 columnas, alternando)
           ============================================================================ */
        
        .region-products {
            margin-top: var(--spacing-section);
        }
        
        .products-grid {
            display: grid;
            grid-template-columns: 3fr 2fr; /* 60% + 40% */
            row-gap: 140px;
            column-gap: 90px;
        }
        
        /* Fila 2: invertir posiciones (gradiente a la IZQUIERDA) */
        .product-card[data-card="6c"] {
            grid-column: 1; /* 60% a la izquierda (con gradiente) */
        }
        
        .product-card[data-card="6d"] {
            grid-column: 2; /* 40% a la derecha (blanca) */
            grid-row: 2;
        }
        
        /* Product card base */
        .product-card {
            position: relative;
            border-radius: var(--radius-md);
            color: white;
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            min-height: 320px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        /* Background gradient o color sólido */
        .product-card::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 0;
        }
        
        /* Imagen de fondo opcional */
        .product-card::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            background-size: cover;
            background-position: center;
            opacity: 0.15;
            mix-blend-mode: overlay;
        }
        
        .product-card__content {
            position: relative;
            z-index: 2;
            padding: var(--card-padding-block) var(--card-padding-inline);
        }
        
        .product-card__badge {
            display: inline-flex;
            padding: var(--spacing-xs) var(--spacing-sm);
            border-radius: var(--radius-sm);
            font-family: var(--font-primary);
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            margin-bottom: var(--spacing-md);
        }
        
        .product-card__title {
            font-size: clamp(1.25rem, 2vw, 1.75rem);
            margin-bottom: var(--spacing-sm);
        }
        
        .product-card__description {
            font-size: 1rem;
            line-height: 1.6;
            opacity: 0.95;
        }
        
        .product-card__icon {
            position: absolute;
            right: var(--spacing-lg);
            bottom: var(--spacing-lg);
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            z-index: 2;
            box-shadow: var(--shadow-card);
        }
        
        /* Cards con fondo blanco (sin gradiente) */
        .product-card--white {
            background: white;
            color: #333;
            border: none;
            box-shadow: none;
            border-radius: 0;
            padding: 0;
        }
        
        .product-card--white::before {
            display: none;
        }
        
        .product-card--white .product-card__content {
            padding: var(--card-padding-block) var(--card-padding-inline);
        }
        
        .product-card--white .product-card__badge {
            background: var(--color-gradient-orange);
            color: white;
        }
        
        .product-card--white .product-card__icon {
            background: rgba(0, 0, 0, 0.05);
        }
        
        /* Variantes de gradiente */
        .product-card[data-gradient="01"]::before { background: var(--gradient-01); }
        .product-card[data-gradient="02"]::before { background: var(--gradient-02); }
        .product-card[data-gradient="03"]::before { background: var(--gradient-03); }
        .product-card[data-gradient="04"]::before { background: var(--gradient-04); }
        .product-card[data-gradient="05"]::before { background: var(--gradient-05); }
        .product-card[data-gradient="06"]::before { background: var(--gradient-06); }
        .product-card[data-gradient="07"]::before { background: var(--gradient-07); }
        .product-card[data-gradient="08"]::before { background: var(--gradient-08); }
        
        /* Fila 1: Cards grandes con diferentes alturas */
        .product-card--large {
            min-height: 400px;
        }
        
        /* ============================================================================
           REGIÓN 7: MEDIA + TEXT (50/50 de borde a borde)
           ============================================================================ */
        
        .region-media-text {
            margin-top: var(--spacing-section);
            background: var(--color-primary-500);
            color: white;
        }
        
        .media-text {
            display: grid;
            grid-template-columns: 1fr 1fr; /* 50% + 50% exacto */
            align-items: stretch; /* Misma altura */
            min-height: 600px;
        }
        
        .media-text__content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: var(--spacing-3xl);
            background: linear-gradient(45deg, var(--color-gradient-cyan) 0%, var(--color-primary-500) 100%);
        }
        
        .media-text__badge {
            display: inline-flex;
            width: fit-content;
            padding: var(--spacing-xs) var(--spacing-md);
            border-radius: var(--radius-md);
            font-family: var(--font-primary);
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            margin-bottom: var(--spacing-md);
        }
        
        .media-text__title {
            font-size: clamp(1.75rem, 3vw, 2.5rem);
            margin-bottom: var(--spacing-md);
        }
        
        .media-text__description {
            font-size: 1.125rem;
            line-height: 1.7;
            opacity: 0.95;
            margin-bottom: var(--spacing-lg);
        }
        
        .media-text__cta {
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-xs);
            padding: var(--spacing-sm) var(--spacing-lg);
            border-radius: var(--radius-md);
            background: transparent;
            color: white;
            border: 2px solid white;
            font-weight: 600;
            transition: all 0.3s ease;
            width: fit-content;
        }
        
        .media-text__cta:hover {
            background: white;
            color: var(--color-primary-500);
        }
        
        .media-text__media {
            position: relative;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .media-text__media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* Play button overlay para videos */
        .media-text__play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 2;
        }
        
        .media-text__play-button:hover {
            background: white;
            transform: translate(-50%, -50%) scale(1.1);
        }
        
        .media-text__play-button::after {
            content: '▶';
            color: var(--color-primary-500);
            font-size: 1.5rem;
            margin-left: 4px;
        }
        
        .media-text__video-label {
            position: absolute;
            bottom: var(--spacing-md);
            left: var(--spacing-md);
            padding: var(--spacing-xs) var(--spacing-sm);
            border-radius: var(--radius-sm);
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(10px);
            font-size: 0.875rem;
            z-index: 2;
        }
        
        /* ============================================================================
           REGIÓN 8: FOOTER
           ============================================================================ */
        
        .region-footer {
            background: var(--gradient-corporate);
            color: white;
            padding-block: var(--spacing-3xl);
            position: relative;
        }
        
        .region-footer .container {
            position: relative;
            z-index: 1;
        }
        
        .footer-main-grid {
            display: grid;
            grid-template-columns: 1fr 4fr; /* A (20%) + B (80%) */
            gap: 60px;
            align-items: start; /* Ambas columnas empiezan arriba */
        }
        
        .footer__column-a {
            /* Columna principal izquierda - ocupa todo el alto */
        }
        
        .footer__logo {
            display: inline-block;
            margin-bottom: var(--spacing-md);
        }
        
        .footer__logo img {
            display: block;
        }
        
        .footer__group-b {
            /* Grupo derecho que contiene el grid c,d,e Y el footer__bottom */
            display: flex;
            flex-direction: column;
            gap: var(--spacing-2xl);
        }
        
        .footer-secondary-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* c, d, e */
            gap: var(--spacing-xl);
        }
        
        .footer__column h3 {
            font-family: var(--font-secondary);
            font-size: 0.9rem;
            font-weight: 700;
            margin-bottom: 32px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .footer__column h4 {
            font-family: var(--font-secondary);
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 3px;
            margin-top: var(--spacing-lg);
        }
        
        .footer__column h4:first-of-type {
            margin-top: 0;
        }
        
        .footer__column ul {
            list-style: none;
            margin-bottom: var(--spacing-lg);
        }
        
        .footer__column ul:last-child {
            margin-bottom: 0;
        }
        
        .footer__column ul li {
            margin-bottom: 0;
        }
        
        .footer__column ul li:last-child {
            margin-bottom: 0;
        }
        
        .footer__column ul li a {
            opacity: 0.8;
            transition: opacity 0.2s ease;
            font-size: 0.8rem;
        }
        
        .footer__column ul li a:hover {
            opacity: 1;
        }
        
        .footer__links {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-sm);
        }
        
        .footer__links a {
            opacity: 0.8;
            transition: opacity 0.2s ease;
        }
        
        .footer__links a:hover {
            opacity: 1;
        }
        
        .footer__bottom {
            padding-top: var(--spacing-lg);
            border-top: 1px solid rgba(255, 255, 255, 1);
            font-size: 0.8rem;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: var(--spacing-lg);
            align-items: center;
        }
        
        .footer__bottom-left {
            /* Columna izquierda - copyright */
        }
        
        .footer__bottom-center {
            text-align: center;
        }
        
        .footer__bottom-right {
            text-align: right;
        }
        
        .scroll-to-top {
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        
        .scroll-to-top:hover {
            opacity: 0.8;
            transform: translateY(-2px);
        }
        
        .scroll-to-top img {
            display: block;
        }
        
        .footer__bottom a {
            text-decoration: underline;
        }
        

        /* ============================================================================
           GRADIENT SHOWCASE - Página de demostración de gradientes
           ============================================================================ */
        
        .gradient-showcase {
            padding-block: var(--spacing-3xl);
        }
        
        .gradient-showcase__wrapper {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: var(--spacing-2xl);
            align-items: start;
        }
        
        /* Grid principal 3x4 */
        .gradient-showcase__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--spacing-lg);
        }
        
        /* Card de gradiente */
        .gradient-card {
            aspect-ratio: 1;
            border-radius: var(--radius-md);
            padding: var(--spacing-lg);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: white;
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .gradient-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-elevated);
        }
        
        .gradient-card__number {
            font-family: var(--font-primary);
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            line-height: 1;
        }
        
        .gradient-card__colors {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xs);
            font-size: 0.875rem;
            font-family: var(--font-secondary);
        }
        
        .gradient-card__color {
            display: flex;
            gap: var(--spacing-sm);
            align-items: center;
        }
        
        .gradient-card__color-code {
            font-weight: 500;
        }
        
        .gradient-card__angle {
            opacity: 0.8;
        }
        
        /* Aplicar gradientes a las cards */
        .gradient-card[data-gradient="01"] { background: var(--gradient-01); }
        .gradient-card[data-gradient="02"] { background: var(--gradient-02); }
        .gradient-card[data-gradient="03"] { background: var(--gradient-03); }
        .gradient-card[data-gradient="04"] { background: var(--gradient-04); }
        .gradient-card[data-gradient="05"] { background: var(--gradient-05); }
        .gradient-card[data-gradient="06"] { background: var(--gradient-06); }
        .gradient-card[data-gradient="07"] { background: var(--gradient-07); }
        .gradient-card[data-gradient="08"] { background: var(--gradient-08); }
        .gradient-card[data-gradient="09"] { background: var(--gradient-09); }
        .gradient-card[data-gradient="10"] { background: var(--gradient-10); }
        .gradient-card[data-gradient="11"] { background: var(--gradient-11); }
        .gradient-card[data-gradient="12"] { background: var(--gradient-12); }
        
        /* Columna lateral corporativo */
        .gradient-showcase__corporate {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
            align-items: center;
        }
        
        .gradient-card--corporate {
            width: 180px;
            aspect-ratio: 1;
            border-radius: var(--radius-md);
            background: var(--gradient-corporate);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            box-shadow: var(--shadow-lg);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .gradient-card--corporate:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-elevated);
        }
        
        .gradient-card--corporate__inner {
            text-align: center;
        }
        
        .gradient-card--corporate__color {
            font-size: 0.875rem;
            margin-bottom: var(--spacing-xs);
        }
        
        .gradient-card--corporate__angle {
            font-size: 0.75rem;
            opacity: 0.8;
        }
        
        .gradient-card--corporate__code {
            font-size: 0.875rem;
            margin-top: var(--spacing-xs);
        }
        
        .gradient-showcase__corporate-title {
            font-family: var(--font-primary);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-primary-500);
            text-align: center;
        }
        
        /* Responsive */
        @media (max-width: 1024px) {
            .gradient-showcase__wrapper {
                grid-template-columns: 1fr;
            }
            
            .gradient-showcase__corporate {
                flex-direction: row;
                justify-content: center;
            }
        }
        
        @media (max-width: 768px) {
            .gradient-showcase__grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .gradient-card--corporate {
                width: 140px;
            }
        }
        
        @media (max-width: 480px) {
            .gradient-showcase__grid {
                grid-template-columns: 1fr;
            }
        }

        /* ============================================================================
           GRID SYSTEM - Sistema de columnas del proyecto
           ============================================================================ */
        
        /* Contenedor base (alias de .container con mismo comportamiento) */
        .grid-container {
            width: 100%;
            max-width: var(--container-total);  /* 1204px total */
            margin: 0 auto;
            padding-inline: var(--container-padding);  /* 32px */
        }
        
        /* Resultado: contenido interno = 1140px exactos ✅ */
        
        /* Fila de grid con gap estándar de 30px */
        .grid-row {
            display: grid;
            gap: 30px;
        }
        
        /* Variantes por número de columnas */
        .grid-row--1col {
            grid-template-columns: 1fr;
        }
        
        .grid-row--2col {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .grid-row--3col {
            grid-template-columns: repeat(3, 1fr);
        }
        
        .grid-row--4col {
            grid-template-columns: repeat(4, 1fr);
        }
        
        /* Demo de columnas (para página de recursos) */
        .grid-demo__item {
            background: #6B6B6B;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-primary);
            font-size: 1.5rem;
            font-weight: 700;
            min-height: 120px;
            border-radius: var(--radius-sm);
        }
        
        /* ============================================================================
           RESOURCES PAGE - Página de recursos (retícula + gradientes)
           ============================================================================ */
        
        .resources-section {
            padding-block: var(--spacing-3xl);
        }
        
        .resources-section__title {
            font-family: var(--font-primary);
            font-size: clamp(1.75rem, 3vw, 2.5rem);
            font-weight: 700;
            color: var(--color-primary-500);
            margin-bottom: var(--spacing-xl);
            text-align: center;
        }
        
        .resources-section__subtitle {
            font-size: 1.125rem;
            color: #666;
            margin-bottom: var(--spacing-2xl);
            text-align: center;
        }
        
        /* Espaciado entre filas de la demo de grid */
        .grid-demo__row + .grid-demo__row {
            margin-top: 30px; /* Mismo gap que entre columnas */
        }

        /* ============================================================================
           RESPONSIVE BREAKPOINTS
           Sistema de 3 breakpoints para cobertura completa
           ============================================================================ */
        
        /* ═══════════════════════════════════════════════════════════════════════════
           BREAKPOINT 1: TABLETS 10" & iPAD PRO (< 1172px)
           Dispositivos: iPad Pro portrait (1024px), Surface Pro, Tablets 10"
           ═══════════════════════════════════════════════════════════════════════════ */
        
        @media (max-width: 1172px) {
            
            /* Container pasa a fluido */
            .container,
            .grid-container {
                max-width: 100%;
                padding-inline: var(--container-padding);
            }
            
            /* Grid de productos: mantener 2 columnas pero más equilibrado */
            .products-grid {
                grid-template-columns: repeat(2, 1fr);
                row-gap: 80px;
                column-gap: 60px;
            }
            
            /* Cancelar reordenamiento de fila 2 */
            .product-card[data-card="6c"],
            .product-card[data-card="6d"] {
                grid-column: auto;
                grid-row: auto;
            }
            
            /* Sistema de columnas: 4 cols → 3 cols */
            .grid-row--4col {
                grid-template-columns: repeat(3, 1fr);
            }
            
            /* Hero: card ocupa más espacio */
            .hero__inner {
                grid-template-columns: 1fr 1.5fr;
            }
            
            /* Featured card: reducir padding */
            .featured-card {
                padding: var(--spacing-xl) var(--container-padding);
            }
            
            /* Gradientes showcase: ajustar lateral */
            .gradient-showcase__wrapper {
                gap: var(--spacing-xl);
            }
            
            .gradient-card--corporate {
                width: 150px;
            }
        }
        
        /* ═══════════════════════════════════════════════════════════════════════════
           BREAKPOINT 2: TABLETS 8" & iPAD AIR (< 900px)
           Dispositivos: iPad Air (820px), iPad Mini (768px), Tablets 8", Kindle
           ═══════════════════════════════════════════════════════════════════════════ */
        
        @media (max-width: 900px) {
            
            /* Reducir espaciado entre secciones */
            :root {
                --spacing-section: calc(var(--space-base) * 20); /* 80px */
            }
            
            /* Grid de productos: 1 columna */
            .products-grid {
                grid-template-columns: 1fr;
            }
            
            /* Sistema de columnas: todo a 2 columnas máximo */
            .grid-row--4col,
            .grid-row--3col {
                grid-template-columns: repeat(2, 1fr);
            }
            
            /* Hero: apilar contenido */
            .hero__inner {
                grid-template-columns: 1fr;
                padding-block: var(--spacing-2xl);
            }
            
            .hero__content {
                grid-column: 1;
                text-align: center;
            }
            
            .hero__nav {
                justify-content: center;
            }
            
            /* Media + Text: apilar verticalmente */
            .media-text {
                grid-template-columns: 1fr;
                min-height: auto;
            }
            
            /* Footer: apilar estructura */
            .footer-main-grid {
                grid-template-columns: 1fr;
                gap: var(--spacing-xl);
            }
            
            .footer-secondary-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            /* Gradientes: columna corporativa debajo */
            .gradient-showcase__wrapper {
                grid-template-columns: 1fr;
            }
            
            .gradient-showcase__corporate {
                flex-direction: row;
                justify-content: center;
            }
            
            /* Sistema de columnas demo: 2 cols */
            .grid-demo__item {
                min-height: 100px;
                font-size: 1.25rem;
            }
        }
        
        /* ═══════════════════════════════════════════════════════════════════════════
           BREAKPOINT 3: MÓVILES (< 500px)
           Dispositivos: iPhone 14 Pro (393px), Galaxy S23 (360px), todos los móviles
           ═══════════════════════════════════════════════════════════════════════════ */
        
        @media (max-width: 500px) {
            
            /* Reducir espaciados generales */
            :root {
                --container-padding: var(--spacing-md); /* 24px */
                --spacing-section: calc(var(--space-base) * 15); /* 60px */
            }
            
            /* Sistema de columnas: todo a 1 columna */
            .grid-row--4col,
            .grid-row--3col,
            .grid-row--2col {
                grid-template-columns: 1fr;
                gap: var(--spacing-md);
            }
            
            /* Header: ocultar menú (implementar hamburguesa en futuro) */
            .header__nav {
                display: none;
            }
            
            .header__actions {
                gap: var(--spacing-sm);
            }
            
            .header__cta {
                padding: var(--spacing-xs) var(--spacing-md);
                font-size: 0.875rem;
            }
            
            /* Top bar: apilar o simplificar */
            .region-topbar .container {
                flex-direction: column;
                gap: var(--spacing-xs);
                padding-block: var(--spacing-sm);
            }
            
            .topbar__item {
                text-align: center !important;
            }
            
            /* Hero: ajustar tipografía */
            .hero__inner {
                padding-block: var(--spacing-xl);
            }
            
            .hero__title {
                font-size: clamp(1.75rem, 8vw, 2.5rem);
            }
            
            .hero__description {
                font-size: 1rem;
            }
            
            /* Cards: reducir padding */
            .product-card {
                padding: var(--spacing-lg) var(--spacing-md);
            }
            
            .product-card--white .product-card__content {
                padding: var(--spacing-lg) var(--spacing-md);
            }
            
            /* Featured card */
            .featured-card {
                padding: var(--spacing-lg) var(--spacing-md);
                min-height: 250px;
            }
            
            .featured-card__icon {
                right: var(--spacing-md);
                bottom: var(--spacing-md);
                width: 36px;
                height: 36px;
            }
            
            /* SubNav: scroll horizontal si necesario */
            .region-subnav .container {
                overflow-x: auto;
                gap: var(--spacing-md);
            }
            
            /* Footer: 1 columna completa */
            .footer-secondary-grid {
                grid-template-columns: 1fr;
            }
            
            /* Gradientes: grid 2 columnas */
            .gradient-showcase__grid {
                grid-template-columns: repeat(2, 1fr);
                gap: var(--spacing-md);
            }
            
            .gradient-card {
                padding: var(--spacing-md);
            }
            
            .gradient-card__number {
                font-size: 2rem;
            }
            
            .gradient-card--corporate {
                width: 120px;
            }
            
            /* Sistema de columnas demo: más compacto */
            .grid-demo__item {
                min-height: 80px;
                font-size: 1rem;
            }
            
            /* Tipografía general móvil */
            h1 {
                font-size: clamp(1.75rem, 6vw, 2.5rem);
            }
            
            h2 {
                font-size: clamp(1.5rem, 5vw, 2rem);
            }
            
            h3 {
                font-size: clamp(1.25rem, 4vw, 1.75rem);
            }
        }

        /* ============================================================================
           GRID SYSTEM - Variantes asimétricas
           Combinaciones específicas para layouts no uniformes
           ============================================================================ */
        
        /* 2 columnas asimétricas: estrecha + ancha */
        .grid-row--narrow-wide {
            display: grid;
            grid-template-columns: 263px 847px;
            gap: 30px;
        }
        
        .grid-row--narrow-wide-2 {
            display: grid;
            grid-template-columns: 360px 750px;
            gap: 30px;
        }
        
        /* 2 columnas asimétricas: ancha + estrecha (inversa) */
        .grid-row--wide-narrow {
            display: grid;
            grid-template-columns: 750px 360px;
            gap: 30px;
        }
        
        /* 3 columnas asimétricas: estrecha + ancha + estrecha */
        .grid-row--narrow-wide-narrow {
            display: grid;
            grid-template-columns: 263px 554px 263px;
            gap: 30px;
        }
        
        /* Responsive para variantes asimétricas */
        @media (max-width: 1172px) {
            .grid-row--narrow-wide,
            .grid-row--narrow-wide-2,
            .grid-row--wide-narrow,
            .grid-row--narrow-wide-narrow {
                grid-template-columns: 1fr;
            }
        }