:root {
    --color-primary: #1F1F1F;
    --color-primary-hover: #000000;
    --color-secondary: #C1121F;
    --color-secondary-hover: #A30000;
    --color-accent: #C1121F;
    --color-accent-hover: #A30000;
    --color-bg-light: #FFFFFF;
    --color-bg-gray-light: #F7F7F7;
    --color-bg-gray-dark: #242424;
    --color-bg-dark: #000000;
    --color-bg-primary: var(--color-bg-light);
    --color-bg-secondary: var(--color-bg-gray-light);
    --color-text-h1: #000000;
    --color-text-h2: #000000;
    --color-text-h3: #000000;
    --color-text-h4: #000000;
    --color-text-h5: #000000;
    --color-text-h6: #000000;
    --color-text-p: #000000;
    --color-text-link: #D60000;
    --color-text-white-h1: #FFFFFF;
    --color-text-white-h2: #FFFFFF;
    --color-text-white-h3: #FFFFFF;
    --color-text-white-h4: #FFFFFF;
    --color-text-white-h5: #FFFFFF;
    --color-text-white-h6: #FFFFFF;
    --color-text-white-p: #FFFFFF;
    --color-text-white-link: #D60000;
    --color-light-gray: #F7F7F7;
    --color-gray: #000000;
    --color-dark-gray: #000000;
    --primary: var(--color-primary);
    --secondary: var(--color-secondary);
    --accent: var(--color-accent);
    --font-h1: 'Inter', sans-serif;
    --font-h2: 'Inter', sans-serif;
    --font-h3: 'Inter', sans-serif;
    --font-h4: 'Inter', sans-serif;
    --font-h5: 'Inter', sans-serif;
    --font-h6: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --current-text-h1: var(--color-text-h1);
    --current-text-h2: var(--color-text-h2);
    --current-text-h3: var(--color-text-h3);
    --current-text-h4: var(--color-text-h4);
    --current-text-h5: var(--color-text-h5);
    --current-text-h6: var(--color-text-h6);
    --current-text-p: var(--color-text-p);
    --current-text-link: var(--color-text-link);
}

/* Cascada Contextual Automática para Superficies Oscuras */
.bg-primary, .bg-dark, .bg-theme-dark, .bg-theme-gray-dark, .text-white, [class*="bg-primary"], [class*="bg-dark"], footer {
    --current-text-h1: var(--color-text-white-h1);
    --current-text-h2: var(--color-text-white-h2);
    --current-text-h3: var(--color-text-white-h3);
    --current-text-h4: var(--color-text-white-h4);
    --current-text-h5: var(--color-text-white-h5);
    --current-text-h6: var(--color-text-white-h6);
    --current-text-p: var(--color-text-white-p);
    --current-text-link: var(--color-text-white-link);
}

html { height: 100%; }
body { font-family: var(--font-body); background-color: var(--color-bg-light); color: var(--color-text-p); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; margin: 0; }
main, .main-content, #main-content { flex: 1 0 auto; width: 100%; }
h1:not([class*="text-"]) { font-family: var(--font-h1); color: var(--current-text-h1); }
h2:not([class*="text-"]) { font-family: var(--font-h2); color: var(--current-text-h2); }
h3:not([class*="text-"]) { font-family: var(--font-h3); color: var(--current-text-h3); }
h4:not([class*="text-"]) { font-family: var(--font-h4); color: var(--current-text-h4); }
h5:not([class*="text-"]) { font-family: var(--font-h5); color: var(--current-text-h5); }
h6:not([class*="text-"]) { font-family: var(--font-h6); color: var(--current-text-h6); }
p:not([class*="text-"]) { color: var(--current-text-p); }
a:not([class*="text-"]) { color: var(--current-text-link); }
footer a:not([class*="text-"]) { color: var(--color-text-white-p); }
footer, .component-footer-global { margin-top: auto !important; flex-shrink: 0; width: 100%; color: var(--color-text-white-p); }
footer .footer-title, .component-footer-global .footer-title { color: var(--color-text-white-h5) !important; }
footer .footer-text, .component-footer-global .footer-text { color: var(--color-text-white-p) !important; }
footer a.footer-nav-link, .component-footer-global a.footer-nav-link { color: var(--color-text-white-p); transition: color 0.2s ease; }
footer a.footer-nav-link:hover, .component-footer-global a.footer-nav-link:hover { color: var(--color-secondary) !important; }
footer .footer-social-icon, .component-footer-global .footer-social-icon { color: var(--color-text-white-p); transition: all 0.3s ease; }
footer .footer-social-icon:hover, .component-footer-global .footer-social-icon:hover { color: #ffffff !important; }
footer .footer-developer-credit, .component-footer-global .footer-developer-credit { color: var(--color-text-white-p); }
footer .footer-developer-credit a, .component-footer-global .footer-developer-credit a { color: var(--color-secondary) !important; transition: all 0.2s ease; }
footer .footer-developer-credit a:hover, .component-footer-global .footer-developer-credit a:hover { color: #ffffff !important; }

/* Utilidades de Fondo Semánticas */
.bg-theme-light { background-color: var(--color-bg-light); }
.bg-theme-gray-light { background-color: var(--color-bg-gray-light); }
.bg-theme-gray-dark { background-color: var(--color-bg-gray-dark); }
.bg-theme-dark { background-color: var(--color-bg-dark); }
.bg-theme-primary { background-color: var(--color-bg-light); }
.bg-theme-secondary { background-color: var(--color-bg-gray-light); }

/* Utilidades de Bordes Semánticas */
.border-theme-primary { border-color: var(--color-primary); }
.border-theme-secondary { border-color: var(--color-secondary); }
.border-theme-gray-light { border-color: var(--color-bg-gray-light); }
.border-theme-gray-dark { border-color: var(--color-bg-gray-dark); }

/* Utilidades de Texto */
.text-theme-h1 { color: var(--color-text-h1); }
.text-theme-h2 { color: var(--color-text-h2); }
.text-theme-h3 { color: var(--color-text-h3); }
.text-theme-h4 { color: var(--color-text-h4); }
.text-theme-h5 { color: var(--color-text-h5); }
.text-theme-h6 { color: var(--color-text-h6); }
.text-theme-p { color: var(--color-text-p); }
.text-theme-link { color: var(--color-text-link); }

/* Utilidades de Textos Blancos (Fondos Oscuros / Modo Noche) */
.text-theme-white-h1 { color: var(--color-text-white-h1); }
.text-theme-white-h2 { color: var(--color-text-white-h2); }
.text-theme-white-h3 { color: var(--color-text-white-h3); }
.text-theme-white-h4 { color: var(--color-text-white-h4); }
.text-theme-white-h5 { color: var(--color-text-white-h5); }
.text-theme-white-h6 { color: var(--color-text-white-h6); }
.text-theme-white-p { color: var(--color-text-white-p); }
.text-theme-white-link { color: var(--color-text-white-link); }

/* Utilidades de Botones e Interfaz */
.btn-corporate-primary { background-color: var(--color-primary); color: #ffffff; transition: background-color 0.2s ease; }
.btn-corporate-primary:hover { background-color: var(--color-primary-hover); }
.btn-corporate-secondary { background-color: var(--color-secondary); color: #ffffff; transition: background-color 0.2s ease; }
.btn-corporate-secondary:hover { background-color: var(--color-secondary-hover); }
.btn-corporate-accent { background-color: var(--color-accent); color: #ffffff; transition: background-color 0.2s ease; }
.btn-corporate-accent:hover { background-color: var(--color-accent-hover); }

/* Utilidades de Fondo Hover Semánticas */
.bg-primary { background-color: var(--color-primary); }
.bg-primary-hover, .hover\:bg-primary-hover:hover { background-color: var(--color-primary-hover) !important; }
.bg-secondary { background-color: var(--color-secondary); }
.bg-secondary-hover, .hover\:bg-secondary-hover:hover { background-color: var(--color-secondary-hover) !important; }
.bg-accent { background-color: var(--color-accent); }
.bg-accent-hover, .hover\:bg-accent-hover:hover { background-color: var(--color-accent-hover) !important; }

.hover\:text-primary-hover:hover { color: var(--color-primary-hover) !important; }
.hover\:text-secondary-hover:hover { color: var(--color-secondary-hover) !important; }
.hover\:text-accent-hover:hover { color: var(--color-accent-hover) !important; }

/* Botones en Sliders / Heros */
.heroSwiper .swiper-slide a.bg-secondary:hover, .swiper.heroSwiper a.bg-secondary:hover {
    background-color: var(--color-secondary-hover) !important;
}

/* Contenedor Personalizado */
.container {
    max-width: 85% !important;
}
@media (max-width: 1024px) {
    .container {
        max-width: 90% !important;
    }
}
@media (max-width: 768px) {
    .container {
        max-width: 90% !important;
    }
}

/* Corregir eventos del cursor en elementos hijos */
.pointer-events-none {
    pointer-events: none !important;
}

/* Optimizaciones GPU para imágenes y bordes redondeados en transiciones */
.gpu-clip-fix {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    isolation: isolate;
}
.gpu-image-fix {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

/* Superposición Degradada Dinámica: Proyectos y Portafolio */
.project-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--color-primary, #0f172a) 96%, transparent) 0%, color-mix(in srgb, var(--color-primary, #0f172a) 82%, transparent) 42%, color-mix(in srgb, var(--color-primary, #0f172a) 20%, transparent) 72%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.project-card-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--color-primary, #0f172a) 98%, transparent) 0%, color-mix(in srgb, var(--color-primary, #0f172a) 95%, transparent) 58%, color-mix(in srgb, var(--color-primary, #0f172a) 50%, transparent) 85%, transparent 100%);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}
.group:hover .project-card-overlay::after,
.group:focus-within .project-card-overlay::after {
    opacity: 1;
}
.project-card-expand {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: grid-template-rows;
}
.group:hover .project-card-expand,
.group:focus-within .project-card-expand {
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.52s cubic-bezier(0.25, 1, 0.5, 1);
}
.project-card-expand-inner {
    overflow: hidden;
    min-height: 0;
}
.project-card-drawer {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.22s ease, transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}
.group:hover .project-card-drawer,
.group:focus-within .project-card-drawer {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease 0.08s, transform 0.48s cubic-bezier(0.25, 1, 0.5, 1) 0.05s;
}

/* Botón / Enlace 'Ver Caso de Éxito': Blanco por defecto y Énfasis en hover */
.project-case-btn {
    color: #ffffff !important;
    transition: color 0.25s ease, transform 0.25s ease;
}
.project-case-btn svg {
    color: #ffffff !important;
    transition: color 0.25s ease, transform 0.3s ease;
}
.group:hover .project-case-btn,
.group:focus-within .project-case-btn {
    color: #ffffff !important;
}
.group:hover .project-case-btn svg,
.group:focus-within .project-case-btn svg {
    color: #ffffff !important;
}
.group:hover .project-case-btn:hover,
.group:focus-within .project-case-btn:hover,
.project-case-btn:hover,
.project-case-btn:focus-visible {
    color: var(--color-accent) !important;
}
.group:hover .project-case-btn:hover svg,
.group:focus-within .project-case-btn:hover svg,
.project-case-btn:hover svg,
.project-case-btn:focus-visible svg {
    color: var(--color-accent) !important;
}
.group:hover .project-case-btn:active,
.project-case-btn:active {
    color: var(--color-accent-hover, var(--color-accent)) !important;
}
.group:hover .project-case-btn:active svg,
.project-case-btn:active svg {
    color: var(--color-accent-hover, var(--color-accent)) !important;
}