/* custom-01.css
   Estilos personalizados para la estética "Dark Security" 
   Basado en la paleta y tipografía del análisis system-design-proposed-01.html
*/

:root {
    /* Tipografía */
    --font-heading--family: "Science Gothic", sans-serif;
    --font-button--family: "Science Gothic", sans-serif;
    --font-body--family: "Inter", sans-serif;

    /* Paleta Principal */
    --color-background: #0B0E14;
    /* Fondo Oscuro Principal */
    --color-foreground: #FFFFFF;
    /* Texto Principal Blanco */
    --color-foreground-heading: #FFFFFF;
    /* Títulos Blancos */
    --color-foreground-subheading: #9BA3AF;
    /* Gris azulado claro */
    --color-background-subheading: #151A23;
    /* Fondo de tarjetas / Surface */

    /* Acentos y colores secundarios */
    --color-primary: #D2A855;
    /* Oro Corporativo */
    --color-primary-background: #D2A855;
    --color-primary-hover: #E3BB66;
    --color-primary-background-hover: #E3BB66;

    /* Azul Marino Profundo (cintillas, bloques alternos) */
    --primary-navy: #0F1E3D;

    /* Bordes y Sombras */
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-hover: rgba(210, 168, 85, 0.5);
    /* Borde dorado en hover */
    --color-shadow: rgba(0, 0, 0, 0.8);
    --color-overlay: rgba(11, 14, 20, 0.7);

    /* Botones - Primario (Oro) */
    --color-primary-button-text: #0B0E14;
    --color-primary-button-background: #D2A855;
    --color-primary-button-border: #D2A855;
    --color-primary-button-icon: #0B0E14;
    --color-primary-button-icon-background: transparent;

    --color-primary-button-hover-text: #0B0E14;
    --color-primary-button-hover-background: #E3BB66;
    --color-primary-button-hover-border: #E3BB66;
    --color-primary-button-hover-icon: #0B0E14;
    --color-primary-button-hover-icon-background: transparent;

    /* Botones - Secundario (Outline / Ghost) */
    --color-secondary-button-text: #FFFFFF;
    --color-secondary-button-background: transparent;
    --color-secondary-button-border: rgba(255, 255, 255, 0.3);
    --color-secondary-button-icon: #FFFFFF;
    --color-secondary-button-icon-background: transparent;

    --color-secondary-button-hover-text: #D2A855;
    --color-secondary-button-hover-background: rgba(255, 255, 255, 0.05);
    --color-secondary-button-hover-border: #D2A855;
    --color-secondary-button-hover-icon: #D2A855;
    --color-secondary-button-hover-icon-background: transparent;

    /* Entradas (Inputs) */
    --color-input-background: rgba(21, 26, 35, 1);
    --color-input-text: #FFFFFF;
    --color-input-border: rgba(255, 255, 255, 0.2);
    --color-input-hover-background: rgba(21, 26, 35, 1);
    --color-input-hover-text: #FFFFFF;
    --color-input-hover-border: #D2A855;

    /* Radios de borde (aspecto recto, geométrico) */
    --style-border-radius-buttons-primary: 2px;
    --style-border-radius-buttons-secondary: 2px;
    --style-border-radius-inputs: 4px;

    /* Paginación */
    --pagination-item-foreground: #FFFFFF;
    --pagination-item-background: #151A23;
    --pagination-item-border: #151A23;
    --pagination-item-active-foreground: #0B0E14;
    --pagination-item-active-background: #D2A855;
    --pagination-item-active-border: #D2A855;
}

/* ========================================================
   REGLAS GLOBALES DE OVERRIDE (Forzar Dark Mode)
   ======================================================== */

body {
    background-color: var(--color-background) !important;
    color: var(--color-foreground) !important;
}

/* Tipografía de títulos */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-heading--family) !important;
    color: var(--color-foreground-heading) !important;
    text-transform: uppercase !important;
}

/* Ajustes finos de pesos de títulos */
h1,
.h1 {
    font-weight: 700 !important;
}

h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-weight: 500 !important;
}

/* Botones genéricos de componentes */
.btn {
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    border-radius: var(--style-border-radius-buttons-primary) !important;
}

/* Sobrescribir fondos claros / blancos por defecto que vengan con clases utilitarias */
.bg-white,
.bg-light,
.bg-transparent {
    background-color: var(--color-background) !important;
}

/* Aplicación del color Navy Blue */
/* Puedes aplicar la clase .bg-navy a cualquier bloque que quieras destacar en azul marino */
.bg-navy {
    background-color: var(--primary-navy) !important;
    color: #FFFFFF !important;
}

.fill-navy {
    fill: var(--primary-navy) !important;
}

.text-navy {
    color: var(--primary-navy) !important;
}

/* Eliminar border-radius redondeados globales (estilo robusto) */
.rounded-circle,
.rounded-pill,
.rounded-3,
.rounded-4,
.rounded-5 {
    border-radius: 4px !important;
}

/* Tarjetas y contenedores de superficie */
.card,
.surface-box {
    background-color: var(--color-background-subheading) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 4px !important;
}

/* Forzar color de acento a dorado para elementos específicos */
.text-primary {
    color: var(--color-primary) !important;
}

/* Forzar textos oscuros a claro (override de bootstrap u otras utilidades) */
.text-dark {
    color: var(--color-foreground) !important;
}

.text-muted {
    color: var(--color-foreground-subheading) !important;
}

/* Imágenes con overlays (efectos de hover oscuros) */
.image-overlay {
    background-color: var(--color-overlay) !important;
}

/* Sobrescribir colores heredados en listas de texto (viñetas) */
.text-lists .text-item {
    --color-foreground: var(--color-foreground-subheading) !important;
    color: var(--color-foreground-subheading) !important;
}

/* Iconos de checkmark dorados en las listas */
.text-lists .text-item svg {
    color: var(--color-primary) !important;
}

.text-lists .text-item svg path[fill="CurrentColor"] {
    fill: var(--color-primary) !important;
}

/* ========================================================
   SECCIÓN DE SERVICIOS (Fondo Blanco con Tarjetas Oscuras)
   ======================================================== */

/* Forzar fondo blanco solo en la sección de servicios */
.multicolumn-page {
    background-color: #FFFFFF !important;
}

/* Forzar que los títulos de esta sección blanca sean oscuros (azul/negro original) para legibilidad */
.multicolumn-page .heading {
    color: #1C2539 !important;
}

/* Las tarjetas dentro de la sección blanca deben ser oscuras en reposo */
.multicolumn-page .multicolumn-card:not(:focus):not(:hover) {
    --color-background: var(--color-background-subheading) !important;
    background-color: var(--color-background-subheading) !important;
    border: 1px solid var(--color-border) !important;
    transition: all 0.3s ease !important;
}

/* Asegurar que los textos dentro de las tarjetas sean claros */
.multicolumn-page .multicolumn-card:not(:focus):not(:hover) .heading {
    color: var(--color-foreground-heading) !important;
}

.multicolumn-page .multicolumn-card:not(:focus):not(:hover) .text {
    color: var(--color-foreground-subheading) !important;
}

/* Caja del icono (Fondo azul marino con icono dorado) */
.multicolumn-page .card-icon {
    background-color: var(--primary-navy) !important;
    color: var(--color-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
}

/* Efectos de hover sobre la tarjeta de servicios (Fondo gris súper claro y borde gris visible) */
.multicolumn-page .multicolumn-card:hover,
.multicolumn-page .multicolumn-card:focus {
    background: #F4F6F9 !important;
    border: 1px solid #E5E7EB !important;
}

/* Asegurar que la lista de texto sea oscura al hacer hover sobre la tarjeta */
.multicolumn-page .multicolumn-card:hover .text-lists,
.multicolumn-page .multicolumn-card:hover .text-item,
.multicolumn-page .multicolumn-card:focus .text-lists,
.multicolumn-page .multicolumn-card:focus .text-item {
    color: #5D666F !important;
}

/* Quitar el fondo azul del contenedor del icono al hacer hover en la tarjeta */
.multicolumn-page .multicolumn-card:hover .card-icon,
.multicolumn-page .multicolumn-card:focus .card-icon {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* ========================================================
   SECCIONES CON FONDO BLANCO (Text Banner & Explore Works)
   ======================================================== */

/* El fondo detrás de la tarjeta redonda de ingresos debe ser blanco */
.text-banner {
    background-color: #FFFFFF !important;
}

/* La tarjeta interna de ingresos conserva su fondo oscuro original */
.text-banner-inner {
    background-color: var(--color-background-subheading) !important;
    /* Gris oscuro #151A23 */
}

/* La sección de abajo (Explore the Recent Works...) debe ser blanca */
.text-image-sticky {
    background-color: #FFFFFF !important;
    margin-top: 0 !important;
    padding-top: 100px !important;
}

/* Títulos y textos de la sección blanca en oscuros para legibilidad */
.text-image-sticky .heading {
    color: #1C2539 !important;
}

.text-image-sticky .text {
    color: #5D666F !important;
}

/* ========================================================
   SOPORTE PARA SECCIONES CLARAS (LIGHT SECTIONS) EN AMBIENTE OSCURO
   ======================================================== */

.light-section {
    --color-foreground-heading: #1C2539 !important;
    --color-foreground: #5D666F !important;
    color: #5D666F !important;
}

/* Forzar que todos los títulos h1-h6 y la clase .heading dentro de una sección clara sean oscuros y no se capitalicen automáticamente */
.light-section h1,
.light-section h2,
.light-section h3,
.light-section h4,
.light-section h5,
.light-section h6,
.light-section .heading {
    color: #1C2539 !important;
    font-family: "Poppins", sans-serif !important;
    text-transform: none !important;
}

/* Forzar que el texto del accordion opener sea blanco cuando el bloque esté activo en una sección clara */
.light-section .accordion-block.active .accordion-opener {
    color: #FFFFFF !important;
}

.light-section .text {
    color: #5D666F !important;
}

/* Restaurar los campos de entrada (inputs, select, textarea) a blanco con bordes legibles */
.light-section input,
.light-section select,
.light-section textarea {
    background-color: #FFFFFF !important;
    color: #1C2539 !important;
    border: 1px solid rgba(28, 37, 57, 0.15) !important;
    border-radius: 8px !important;
}

/* Forzar que el texto del placeholder y select tengan contraste */
.light-section input::placeholder,
.light-section textarea::placeholder {
    color: #888888 !important;
}

/* Restaurar los botones redondos originales en esta sección */
.light-section .button,
.light-section button,
.light-section .btn {
    border-radius: 40px !important;
    font-family: "Poppins", sans-serif !important;
    text-transform: none !important;
}

/* ========================================================
   COLORES DE TARJETAS FLOTANTES (Explore Works)
   ======================================================== */
.text-image-sticky .image-text-card:nth-child(1) {
    background-color: #E6E9F0 !important;
    /* Gris azulado tenue */
    --color-background: #E6E9F0 !important;
}

.text-image-sticky .image-text-card:nth-child(2) {
    background: linear-gradient(135deg, #F2F4F7 0%, #FFFFFF 100%) !important;
    /* Gradiente gris super claro a blanco */
    --color-background: #F2F4F7 !important;
    /* Fallback */
}

.text-image-sticky .image-text-card:nth-child(3) {
    background-color: #DDE1E8 !important;
    /* Gris azulado sutilmente más denso */
    --color-background: #DDE1E8 !important;
}

/* ========================================================
   BOTONES DE LAS TARJETAS FLOTANTES (Estilo Futurista)
   ======================================================== */
.text-image-sticky .image-text-card .button {
    background: linear-gradient(135deg, #050b14 0%, #0F1E3D 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 15px rgba(15, 30, 61, 0.4) !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

.text-image-sticky .image-text-card .button:hover {
    background: linear-gradient(135deg, #0F1E3D 0%, #1C2539 100%) !important;
    border-color: rgba(210, 168, 85, 0.5) !important;
    box-shadow: 0 6px 20px rgba(210, 168, 85, 0.2) !important;
    color: #D2A855 !important;
}

/* Forzar que el icono cambie de color junto con el texto */
.text-image-sticky .image-text-card .button svg path {
    fill: #FFFFFF !important;
    transition: fill 0.3s ease !important;
}

.text-image-sticky .image-text-card .button:hover svg path {
    fill: #D2A855 !important;
}

/* Espaciado inferior para la sección de Image Text (para que no quede pegado) */
.image-text {
    margin-bottom: 100px !important;
}

/* Botón estilo Index-8 (tipo píldora blanco con icono circular oscuro) */
.button-talk-style {
    --color-secondary-button-text: #0B0E14 !important;
    --color-secondary-button-background: #FFFFFF !important;
    --color-secondary-button-border: #FFFFFF !important;
    --color-secondary-button-icon: #FFFFFF !important;
    --color-secondary-button-icon-background: #0B0E14 !important;
    --style-border-radius-buttons-secondary: 40px !important;
    border-radius: 40px !important;

    --color-secondary-button-hover-text: #FFFFFF !important;
    --color-secondary-button-hover-background: #0B0E14 !important;
    --color-secondary-button-hover-border: #0B0E14 !important;
    --color-secondary-button-hover-icon: #0B0E14 !important;
    --color-secondary-button-hover-icon-background: #FFFFFF !important;
}

/* Espacio vertical arriba y abajo del menú/botón en la cabecera */
.header-grid {
    padding: 12px 24px !important;
}

/* Ajustes de tamaño para el nuevo logo ancho (640x90) */
.header-logo {
    max-width: 380px !important;
}

.footer-logo {
    max-width: 220px !important;
}

/* Botón de envío azul navy para formularios en secciones claras */
.btn-submit-navy {
    --color-secondary-button-text: #FFFFFF !important;
    --color-secondary-button-background: var(--primary-navy) !important;
    --color-secondary-button-border: var(--primary-navy) !important;
    --color-secondary-button-icon: var(--primary-navy) !important;
    --color-secondary-button-icon-background: #FFFFFF !important;

    --color-secondary-button-hover-text: #FFFFFF !important;
    --color-secondary-button-hover-background: #1C2539 !important;
    --color-secondary-button-hover-border: #1C2539 !important;
    --color-secondary-button-hover-icon: #1C2539 !important;
    --color-secondary-button-hover-icon-background: #FFFFFF !important;
}

/* Futuristic Tech Glow para Servicios */
.tech-glow-icon {
    width: 45px !important;
    height: 45px !important;
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.6));
    transition: all 0.3s ease;
}

.tech-glow-icon rect {
    fill: rgba(0, 212, 255, 0.08) !important;
    stroke: #00D4FF !important;
    stroke-width: 1.5px;
}

.tech-glow-icon path {
    fill: #00D4FF !important;
}

.neon-check {
    color: #00D4FF !important;
    margin-right: 8px;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}

.tech-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
}

.tech-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(0, 212, 255, 0.6) !important;
    box-shadow: 0 15px 30px rgba(0, 212, 255, 0.15);
    background: rgba(0, 212, 255, 0.04) !important;
}

.tech-card:hover .tech-glow-icon {
    filter: none !important;
    transform: scale(1.1);
}

.tech-card:hover .tech-glow-icon rect {
    fill: #0F1E3D !important;
    stroke: #00D4FF !important;
    stroke-width: 2px;
}

.tech-card:hover .tech-glow-icon path {
    fill: #00D4FF !important;
}

/* Header flotante con degradado vertical de #010510 a #02132D al hacer hover o scroll */
.header-1.header-floating:hover,
.header-1.header-sticky.scrolled-past-header,
.header-1.scrolled-past-header,
.header-1.is-sticky,
.header-1.sticky {
    background: linear-gradient(180deg, #010510 0%, #02132D 100%) !important;
    --color-background: transparent !important;
}

.header-1 .header-grid {
    background: transparent !important;
}

/* ========================================================
   BOTÓN AZUL ELÉCTRICO (Estilo Translúcido Glassmorphic / CodePen)
   ======================================================== */
.button-electric-blue,
.button--electric,
.action-button {
    --btn-electric-color: #00D4FF;
    border: 1px solid color-mix(in srgb, var(--btn-electric-color) 38%, transparent) !important;
    border-radius: 6px !important;
    /* Esquinas ligeramente curvadas */
    color: var(--btn-electric-color) !important;
    background: color-mix(in srgb, var(--btn-electric-color) 10%, transparent) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    backdrop-filter: blur(4px);
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.button-electric-blue:hover,
.button--electric:hover,
.action-button:hover {
    transform: translateY(-2px) !important;
    border-color: color-mix(in srgb, var(--btn-electric-color) 70%, transparent) !important;
    background: color-mix(in srgb, var(--btn-electric-color) 22%, transparent) !important;
    color: var(--btn-electric-color) !important;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--btn-electric-color) 30%, transparent) !important;
    text-decoration: none !important;
}

.button-electric-blue svg path,
.button--electric svg path,
.action-button svg path {
    fill: var(--btn-electric-color) !important;
    transition: fill .16s ease !important;
}

/* ========================================================
   ANIMATED FOOTER GRADIENT (Colores exactos: #000, #02132D, #010510)
   ======================================================== */
footer,
.footer-main,
.footer-animated-bg {
    background-image: linear-gradient(-45deg, #02091c, #02132D, #010510, #02132D, #000000) !important;
    background-size: 400% 400% !important;
    /* background-position: 0% 50% !important; */
    animation: gradientShift 20s ease-in-out infinite !important;
}

footer::before,
.footer-main::before,
.footer-animated-bg::before {
    display: none !important;
}

footer .footer-top,
footer .footer-bottom,
footer .container,
footer .footer-custom-row,
footer .footer-bottom-row,
footer .footer-widget,
footer .footer-main>div {
    background: transparent !important;
}

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

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ========================================================
   HEADER SPACING & GRID FIX (Evitar solapamientos)
   ======================================================== */
.header-grid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
}

.header-logo {
    max-width: 320px !important;
    flex-shrink: 0 !important;
}

.header-nav.drawer-menu {
    flex-grow: 1 !important;
    display: flex !important;
    justify-content: center !important;
}

.header-menu {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.menu-link-main {
    padding: 30px 18px !important;
    font-size: 16px !important;
    white-space: nowrap !important;
}

.header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-shrink: 0 !important;
}

@media (max-width: 1279px) {
    .header-logo {
        max-width: 260px !important;
    }
    .menu-link-main {
        padding: 24px 10px !important;
        font-size: 14.5px !important;
    }
}


/* ========================================================
   LANGUAGE SWITCHER (Segmented Switch - Electric Cyan & White Glow)
   ======================================================== */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: 3px;
    background: rgba(2, 19, 45, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 212, 255, 0.28);
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(0, 212, 255, 0.06);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    margin-right: 8px;
    user-select: none;
    z-index: 2;
}

.lang-switcher:hover {
    border-color: rgba(0, 212, 255, 0.7);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3), inset 0 0 12px rgba(0, 212, 255, 0.12);
}

.lang-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--font-heading--family, 'Science Gothic', sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 5px 13px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    text-transform: uppercase;
}

.lang-btn:hover:not(.active) {
    color: #FFFFFF;
    background: rgba(0, 212, 255, 0.12);
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.7);
}

/* Active State: Electric Cyan Glow & White Text */
.lang-btn.active {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.4) 0%, rgba(0, 114, 255, 0.7) 100%) !important;
    border: 1px solid #00D4FF !important;
    box-shadow: 0 0 14px rgba(0, 212, 255, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.9), 0 0 20px rgba(255, 255, 255, 0.4) !important;
    cursor: default;
}

/* Press Feedback (Pulsación al hacer clic) */
.lang-btn:active {
    transform: scale(0.90);
    transition: transform 0.1s ease;
}

/* Pulse animation triggered on click */
@keyframes langPulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.85);
    }
    60% {
        box-shadow: 0 0 0 12px rgba(0, 212, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 212, 255, 0);
    }
}

.lang-btn.is-pulsing {
    animation: langPulseGlow 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Mobile Drawer Switcher Layout */
.header-drawer-lang {
    padding: 20px 24px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 15px;
}

.header-drawer-lang .lang-switcher {
    width: 100%;
    justify-content: center;
    padding: 6px;
    background: rgba(15, 30, 61, 0.85);
}

.header-drawer-lang .lang-btn {
    flex: 1;
    padding: 10px 0;
    font-size: 14px;
}