/* ===================================================================
   CRAZY DIGITAL - HOJA DE ESTILOS PRINCIPAL
   ===================================================================
   ÍNDICE:
   1. ESTILOS GLOBALES (Variables, Reset, Tipografía, Fondos)
   2. LOADER
   3. NAVEGACIÓN (Principal, Móvil, Mega Menú)
   4. SECCIONES HERO (Home, Páginas Interiores)
   5. COMPONENTES DEL CUERPO (Botones, Tarjetas, Grids)
   6. ESTILOS DE PÁGINAS ESPECÍFICAS
   7. WIDGETS Y COMPONENTES DE TERCEROS (Partners, Chatbot)
   8. FOOTER
   9. MEDIA QUERIES (Responsividad)
   =================================================================== */

/* =================================================================== */
/* ===== 1. ESTILOS GLOBALES ========================================= */
/* =================================================================== */

/* --- VARIABLES CSS (PALETA UNIFICADA) --- */
:root {
    /* Microsoft Colors */
    --ms-blue: #0078d4;
    --ms-green: #107c10;
    --ms-yellow: #ffb900;
    --ms-red: #d13438;
    
    /* Extended Palette */
    --primary: #0078d4;
    --secondary: #00bcf2;
    --accent: #ffb900;
    --danger: #d13438;
    
    /* Neutral Colors */
    --black: #000000;
    --dark: #0a0a0a;
    --gray-900: #1a1a1a;
    --gray-800: #2a2a2a;
    --gray-700: #3a3a3a;
    --white: #ffffff;
    
    /* Aurora Boreal Gradients (TONO ACLARADO) */
    --aurora-gradient: linear-gradient(135deg, #2c3a54, #1a243b); /* Tono azulado más claro */
    --aurora-shimmer: linear-gradient(45deg, rgba(0, 255, 136, 0.08), rgba(0, 136, 255, 0.06), rgba(136, 0, 255, 0.05));

    /* Glassmorphism & Cards */
    --glass-bg: rgba(26, 38, 64, 0.25);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-hover: rgba(26, 38, 64, 0.45);
    --card-radius: 28px;
    --shadow-deep: 0 30px 80px rgba(0,0,0,.35);
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Sizing */
    --container-max: 1240px;
    --nav-height: 80px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* --- RESET & BASE --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { 
    scroll-behavior: smooth; 
    font-size: 16px; 
    overflow-x: hidden; /* CORRECCIÓN GENERAL: Previene el desbordamiento horizontal en toda la página */
}

body {
    font-family: var(--font-primary);
    background: var(--aurora-gradient);
    color: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative; /* Para contener las partículas */
}
/* Evita el scroll del fondo cuando el menú móvil está abierto */
body.no-scroll {
    overflow: hidden;
}

/* Mejora de responsividad para imágenes */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- FONDOS Y PARTÍCULAS --- */
.loader {
    position: fixed;
    inset: 0;
    background-color: #0a0a0a;
    display: grid;
    place-items: center;
    z-index: 10000;
    /* CORRECCIÓN: La transición ahora no tiene delay, se activará cuando JS lo indique */
    transition: opacity 0.8s ease, visibility 0.8s ease; 
}

.bg-mesh {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    filter: blur(120px);
    opacity: 0.6;
}
.mesh-blob {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}
.mesh-blob:nth-child(1) {
    width: 40vw; height: 40vw; min-width: 300px; min-height: 300px;
    top: 5vh; left: 10vw;
    background: rgba(0, 120, 212, 0.5); /* --ms-blue */
    animation: move-blob-1 18s ease-in-out infinite alternate;
}
.mesh-blob:nth-child(2) {
    width: 35vw; height: 35vw; min-width: 250px; min-height: 250px;
    bottom: 10vh; right: 5vw;
    background: rgba(16, 124, 16, 0.4); /* --ms-green */
    animation: move-blob-2 22s ease-in-out infinite alternate;
}
.mesh-blob:nth-child(3) {
    width: 30vw; height: 30vw; min-width: 200px; min-height: 200px;
    top: 40vh; left: 45vw;
    background: rgba(255, 185, 0, 0.3); /* --ms-yellow */
    animation: move-blob-3 20s ease-in-out infinite alternate;
}
.mesh-blob:nth-child(4) {
    width: 25vw; height: 25vw; min-width: 220px; min-height: 220px;
    bottom: 25vh; left: 15vw;
    background: rgba(0, 188, 242, 0.35); /* --secondary */
    animation: move-blob-4 25s ease-in-out infinite alternate;
}

/* --- Partículas de fondo --- */
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1; /* Detrás del contenido, delante del fondo de malla */
}
.loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-logo {
    position: relative; /* Necesario para los anillos (pseudo-elementos) */
    width: 250px; /* Un poco más pequeño para dar espacio a los anillos */
    max-width: 60vw;
    /* CORRECCIÓN: El contenedor del logo ahora es visible para que los anillos se muestren. */
    /* La opacidad se controlará en la imagen SVG interna. */
}

/* --- LAYOUT & TIPOGRAFÍA --- */
.main {
    /* Ajuste para dejar espacio a la navegación flotante */
    padding-top: 120px;
}

/* EXCEPCIÓN PARA LA PÁGINA DE INICIO:
   Eliminamos el padding del <main> y se lo aplicamos a la primera sección DESPUÉS del hero.
   Esto permite que el hero ocupe el 100vh real sin ser empujado hacia abajo. */
.page-home .main {
    padding-top: 0;
}
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 2rem; }
.display-xxl{font-family:var(--font-display);font-weight:800;font-size:clamp(3.2rem,6vw,6rem);line-height:1.02;letter-spacing:-.02em;margin-bottom:1.5rem}
.lead-xl{font-size:clamp(1.15rem,1.6vw,1.4rem);opacity:.92;max-width:54ch;margin-bottom:2.5rem}
.section-pad{padding:80px 0 120px;position:relative;z-index:1}
.section-title-xl{font-family:var(--font-display);font-size:clamp(2rem,3.8vw,3rem);margin-bottom:.25rem}
.section-subtitle-lg{font-size:clamp(1rem,1.4vw,1.125rem);opacity:.9;margin-bottom:2rem}
.gradient-text{
    background:linear-gradient(90deg,var(--ms-blue),var(--ms-green) 50%,var(--ms-yellow));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    /* NUEVO: Animación de brillo */
    background-size: 300% auto;
    animation: title-shine 8s linear infinite;
}

/* --- UTILIDADES (Scroll, Parallax, Cursor) --- */
[data-sr] {
    opacity: 0;
    transform: translateY(50px); /* Un desplazamiento vertical más notorio */
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease;
    will-change: transform, opacity;
}
[data-sr].is-visible {
    opacity: 1;
    transform: translateY(0);
}
[data-parallax]{will-change:transform}

.loader-logo img {
    opacity: 0;
    animation: logo-reveal 6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* --- Los Anillos Futuristas --- */
.loader-logo::before,
.loader-logo::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border-style: solid;
    border-color: var(--ms-blue);
    opacity: 0;
}

/* Anillo exterior */
.loader-logo::before {
    width: 150%;
    height: 150%;
    border-width: 2px;
    animation: ring-reveal 6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* Anillo interior (se mueve en dirección opuesta) */
.loader-logo::after {
    width: 200%;
    height: 200%;
    border-width: 1px;
    border-color: var(--ms-green);
    animation: ring-reveal-inner 6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes logo-reveal {
    0% {
        opacity: 0;
        transform: scale(0.7);
        filter: blur(10px);
    }
    30% { opacity: 1; filter: blur(5px); }
    100% {
        transform: scale(1);
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes ring-reveal {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(0deg); }
    30% { opacity: 0.7; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) rotate(180deg); }
}

@keyframes ring-reveal-inner {
    10% { opacity: 0; transform: translate(-50%, -50%) scale(0.7) rotate(0deg); }
    40% { opacity: 0.5; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2) rotate(-180deg); }
}

/* =================================================================== */
/* ===== 2. LOADER =================================================== */
/* =================================================================== */

/* (Los estilos del loader ya están agrupados arriba con los de Base) */

/* ===== NUEVO: Animación de Brillo para Títulos ===== */
@keyframes title-shine {
    from { background-position: 200% center; }
    to { background-position: -200% center; }
}

/* ===== PARTICLE SYSTEMS & BACKGROUNDS ===== */
@keyframes move-blob-1 { from { transform: translate(-20%, 10%) scale(1); } to { transform: translate(20%, -15%) scale(1.1); } }
@keyframes move-blob-2 { from { transform: translate(15%, -10%) scale(1); } to { transform: translate(-10%, 20%) scale(0.9); } }
@keyframes move-blob-3 { from { transform: translate(0, 0) scale(1.2); } to { transform: translate(10%, -10%) scale(1); } }
@keyframes move-blob-4 { from { transform: translate(10%, 10%) scale(1); } to { transform: translate(-15%, -15%) scale(1.2); } }

.canvas-fluid-cursor{position:fixed;inset:0;z-index:0;pointer-events:none}
/* =================================================================== */
/* ===== 3. NAVEGACIÓN =============================================== */
/* =================================================================== */

/* --- Contenedor Principal (Ahora es el armazón flotante) --- */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 1.5rem 2rem; /* Padding horizontal reducido para evitar overflow */
    display: flex;
    justify-content: space-between;
    align-items: center;
    will-change: transform; /* CORRECCIÓN: Evita que las animaciones de la página afecten la posición del nav */
    pointer-events: none; /* Permite hacer clic "a través" de los espacios vacíos */
}

/* Solo los elementos dentro del nav pueden ser clickeables */
.nav > * {
    pointer-events: auto;
}

/* El .nav-container ahora es invisible, solo estructura */
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: transparent;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 0;
    height: auto;
}

/* --- Logo 2x y adaptable --- */
.nav-logo .logo-img {
    height: clamp(60px, 10vw, 160px); /* Tamaño adaptable entre 60px y 160px */
    width: auto;
    filter: drop-shadow(0 0 3px hsla(54, 94%, 82%, 0.6));
}

/* --- Lógica del menú móvil (sin cambios) --- */
.nav-mobile-toggle { display: none; } /* Oculto en escritorio */
.nav-menu-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* --- Diseño de Botones: Icono Expandible (Final) --- */
.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Centra el icono en el estado compacto */
    height: 52px;
    width: 52px; /* Tamaño compacto inicial, solo para el icono */
    padding: 0;
    border-radius: 50%; /* Forma circular */
    background: transparent;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* El icono SVG */
.nav-btn::before {
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background-color: var(--white);
    transition: background-color 0.2s ease;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
}

/* El texto del botón, oculto por defecto */
.nav-btn::after {
    content: attr(data-text);
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    color: var(--white);
    max-width: 0; /* Oculto */
    opacity: 0;   /* Oculto */
    overflow: hidden;
    transition: max-width 0.3s ease, opacity 0.2s ease, color 0.2s ease;
    margin-left: 0;
}

/* EFECTO HOVER: Expansión */
.nav-btn:hover {
    width: auto; /* El ancho se ajusta al contenido */
    padding: 12px 20px; /* Se añade padding */
    border-radius: 999px; /* Pasa de círculo a píldora */
    background-color: rgba(255, 255, 255, 0.1);
    justify-content: flex-start; /* Alinea el contenido a la izquierda */
}
.nav-btn:hover::before {
    background-color: var(--color);
    margin-right: 0.75rem; /* Espacio entre icono y texto al expandir */
}
.nav-btn:hover::after {
    max-width: 100px; /* Se revela el texto */
    opacity: 1;
    color: var(--color);
}

/* Botón activo: Muestra icono y texto siempre */
.nav-btn.active {
    width: auto;
    padding: 12px 20px;
    border-radius: 999px;
    background-color: var(--ms-yellow);
    justify-content: flex-start;
}
.nav-btn.active::before {
    background-color: var(--dark);
    margin-right: 0.75rem;
}
.nav-btn.active::after {
    max-width: 100px;
    opacity: 1;
    color: var(--dark);
}

.nav-btn[data-color="blue"] { --color: var(--ms-blue); }
.nav-btn[data-color="yellow"] { --color: var(--ms-yellow); }
.nav-btn[data-color="green"] { --color: var(--ms-green); }
.nav-btn[data-color="red"] { --color: var(--ms-red); }


/* =================================================================== */
/* ===== ICONOS DE NAVEGACIÓN (VERSIÓN DEFINITIVA Y ROBUSTA) ===== */
/* =================================================================== */

/* Icono para Inicio */
.nav-btn[data-text="Inicio"]::before {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>');
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
}

/* Icono para Explorar */
.nav-btn[data-text="Explorar"]::before {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg>');
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
}

/* Icono para Nosotros */
.nav-btn[data-text="Nosotros"]::before {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>');
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
}

/* Icono para Contacto (CORREGIDO) */
.nav-btn[data-text="Contacto"]::before {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>');
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
}

/* --- Redes Sociales en la Navegación --- */
.nav-social{ display:flex; gap:.6rem; }
.social-btn{ width:52px; height:52px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; color:rgba(255,255,255,.78); text-decoration:none; transition: all 0.2s ease; }
.social-btn:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.24); color:var(--white); transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.18); }
.social-btn svg{ width:26px; height:26px; } 

/* ===== NAVEGACIÓN MÓVIL (HAMBURGUESA) ===== */
.nav-mobile-toggle { display: none; } /* Oculto por defecto */
.hamburger-box { position: relative; display: inline-block; width: 30px; height: 24px; }
.hamburger-inner { display: block; top: 50%; margin-top: -1px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { position: absolute; width: 30px; height: 2px; background-color: var(--white); border-radius: 4px; transition: transform 0.2s ease-in-out, top 0.2s ease-in-out, bottom 0.2s ease-in-out, opacity 0.2s ease-in-out; }
.hamburger-inner::before, .hamburger-inner::after { content: ''; display: block; }
.hamburger-inner::before { top: -10px; }
.hamburger-inner::after { bottom: -10px; }

/* --- CardNav (Mega Menu) --- */
.cdm-cardnav {
    position: fixed;
    top: 0;
    left: 0;
    width: 960px;
    max-width: 96vw;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
    border-radius: 20px;
    padding: 14px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 9999;
    overflow: hidden
}
.cdm-cardnav--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0)
}
.cdm-cardnav__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}
.cdm-cardnav__card {
    background: rgba(0, 0, 0, .12);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    min-height: 220px
}
.cdm-cardnav__header {
    margin-bottom: 10px
}
.cdm-cardnav__pill {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: #111;
    color: #fff;
    border-radius: 999px;
    padding: 4px 10px
}
.cdm-cardnav__pill--amber {
    background: #facc15;
    color: #111
}
.cdm-cardnav__title {
    margin: 4px 0 2px;
    font-size: 16px;
    font-weight: 800;
    color: #fff
}
.cdm-cardnav__desc {
    margin: 0;
    font-size: 13px;
    opacity: .9;
    color: #eaeaea
}
.cdm-cardnav__links {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px
}
.cdm-cardnav__links a {
    padding: 8px 9px;
    font-size: 14px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .18s ease, border-color .18s ease, transform .12s ease
}
.cdm-cardnav__links a:focus,
.cdm-cardnav__links a:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
    transform: translateY(-1px)
}
.cdm-cardnav__all {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 8px;
    text-decoration: underline;
    opacity: .9
}
.cdm-cardnav--stack .cdm-cardnav__grid {
    grid-template-columns: 1fr
}
.cdm-cardnav--stack .cdm-cardnav__card {
    min-height: 200px
}
.cdm-cardnav--stack .cdm-cardnav__links {
    grid-template-columns: 1fr
}
@media (max-width:900px) {
    .cdm-cardnav__grid {
        grid-template-columns: 1fr
    }
}

/* =================================================================== */
/* ===== 4. SECCIONES HERO =========================================== */
/* =================================================================== */

/* --- HERO PRINCIPAL (HOME) --- */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;padding:clamp(64px,8vh,96px) 0}
.hero-background{position:absolute;inset:0;z-index:-1}
.grid-pattern{position:absolute;inset:0;background-image:linear-gradient(rgba(0,120,212,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,120,212,.08) 1px,transparent 1px);background-size:50px 50px;animation:gridMove 20s linear infinite}
.hero-container{display:grid;grid-template-columns: 1.2fr 0.8fr;align-items:center;gap:clamp(32px,5vw,80px);width:95%;max-width:var(--container-max);margin:0 auto;padding:0 2rem}
/* CORRECCIÓN: Aseguramos que el contenedor no se desborde en pantallas pequeñas */
.hero-container {
    width: 100%; /* Ocupa el ancho completo del viewport */
}
.hero-title{font-family:var(--font-display);font-size:clamp(2.6rem,5.4vw,4.2rem);font-weight:800;line-height:1.05;margin-bottom:1.6rem}
.title-line{display:block;animation:slideInUp .8s ease-out forwards;opacity:0;transform:translateY(50px)}.title-line:nth-child(2){animation-delay:.1s}.title-line:nth-child(3){animation-delay:.2s} 
.hero-description-box {
    display: inline-block;
    background: rgba(26, 38, 64, 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.25rem 1.75rem;
    border-radius: 16px;
    margin-bottom: 2.5rem;
    animation: slideInUp .8s ease-out .3s forwards;opacity:0;transform:translateY(30px);
}
.hero-description{font-size:1.2rem;max-width:550px;line-height:1.6; margin: 0;}
.hero-actions{display:flex;gap:1rem;animation:slideInUp .8s ease-out .4s forwards;opacity:0;transform:translateY(30px); justify-content: center;}

/* --- HERO CARDS (Home) --- */
.cd-hero-right {
  position: relative;
  display: grid;
  place-items: center;
  height: 420px; /* contenedor más contenido, sin “derrame” hacia abajo */
  perspective: 1400px;
  z-index: 2;
}

.cd-card-swap {
  position: relative;
  width: min(460px, 96vw);
  height: 100%;
}

.cd-card-swap .cd-card {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(26,38,64,.5), rgba(26,38,64,.3));
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  overflow: hidden;
  backdrop-filter: blur(14px) saturate(140%);
  cursor: grab;
  touch-action: none;
  user-select: none;
  will-change: transform, filter;
}

.cd-card-swap .cd-card.is-active {
  box-shadow: 0 38px 110px rgba(0,0,0,.55);
  filter: none !important;
}

.cd-card-swap .cd-card:focus-visible {
  outline: 2px solid rgba(0, 188, 242, .9);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .cd-hero-right { height: 380px; }
}
.hero { min-height: 70vh; } /* Altura mínima para el hero en móviles */
.cd-card:hover{box-shadow:0 30px 80px color-mix(in oklab,var(--accent) 35%,transparent)}
.cd-card-inner{position:relative;display:flex;flex-direction:column;height:100%;padding:24px}
.cd-ms.dynamics{--accent:var(--ms-blue)}
.cd-ms.power{--accent:var(--ms-green)}
.cd-ms.m365{--accent:var(--ms-red)}
.cd-ms.teams{--accent:#5b5fc7}
.cd-ms.powerbi{--accent:#f2c811}
.cd-ms.copilot{--accent:#00b3e3}
.cd-card .cd-logo{position:absolute;top:16px;right:16px;width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));border-radius:8px}
.cd-badge{display:inline-flex;align-items:center;gap:8px;font-weight:700;padding:8px 12px;border-radius:999px;font-size:.85rem;color:#0b1117;background:linear-gradient(135deg,var(--accent),#fff);width:fit-content;margin-bottom:.75rem}
.cd-title{font-family:var(--font-display);font-size:1.35rem;font-weight:800;color:var(--white)}
.cd-desc{color:hsla(0,0%,100%,.85);font-size:.98rem;line-height:1.5;margin:.25rem 0 .9rem}
.cd-list{margin:0 0 12px 18px;padding-left:0;color:hsla(0,0%,100%,.9);list-style-type:"✓ ";flex-grow:1}
.cd-list li{padding-left:.5rem;margin-top:.35rem}
.cd-cta{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:700;padding:10px 14px;border-radius:12px;border:1px solid color-mix(in oklab,var(--accent) 60%,#fff 15%);color:#fff;text-decoration:none;background:linear-gradient(135deg,color-mix(in oklab,var(--accent) 35%,transparent),transparent);box-shadow:0 8px 24px color-mix(in oklab,var(--accent) 25%,transparent);transition:transform .2s ease,box-shadow .2s ease;width:fit-content}
.cd-cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px color-mix(in oklab,var(--accent) 35%,transparent)}
@keyframes slideInUp{to{opacity:1;transform:translateY(0)}}
@keyframes gridMove{0%{transform:translate(0,0)}100%{transform:translate(50px,50px)}}
 
/* --- HERO (Página Soluciones) --- */
.hero--motion{display:grid;place-items:center;padding:40px 0 80px;min-height:100vh}
.hero--motion .hero-inner{width:min(1240px,92%);display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(48px,8vw,96px);align-items:center; padding-top: 20px;}
.hero--motion .hero-visual{height:520px;position:relative;perspective:1200px}
.hero-card{position:absolute;inset:0;width:280px;height:360px;border-radius:40px;background:radial-gradient(120% 120% at 0 0,hsla(0,0%,100%,.22),hsla(0,0%,100%,.06) 40%,hsla(0,0%,100%,.02) 70%);backdrop-filter:blur(16px) saturate(140%);border:1px solid hsla(0,0%,100%,.18);box-shadow:var(--shadow-deep);transform-style:preserve-3d;animation:floatY 9s ease-in-out infinite;padding:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero-card-image{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;z-index:1;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hero-card:hover .hero-card-image{transform:scale(1.1)}
#hero-image-1{background-image:url(https://storage.googleapis.com/generativeai-assets/storage/images/b0163a32-8395-4a5f-a89c-a142c5568f5c.png)}
#hero-image-2{background-image:url(https://storage.googleapis.com/generativeai-assets/storage/images/33054128-444b-4367-932c-49033303648e.png)}
#hero-image-3{background-image:url(https://storage.googleapis.com/generativeai-assets/storage/images/15478465-9477-4498-a376-79c4a511874b.png)}
.hero-card-content{position:relative;z-index:2;text-align:center;color:#fff;padding:1.5rem 1rem 1rem;background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 80%);width:100%;box-sizing:border-box}
.hero-card-content h4{font-family:var(--font-display);font-size:1.5rem;margin-bottom:.5rem;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.hero-card-content p{font-size:1rem;opacity:.9;line-height:1.4;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.hero-card.float-2{transform:rotateY(-10deg) translateZ(40px) translateY(12px);animation-duration:10.5s}
.hero-card.float-3{transform:rotateY(8deg) translateZ(80px) translateY(-12px);animation-duration:12s}
@keyframes floatY{0%,to{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (max-width:1060px){.solution-card{grid-column:span 12}.hero--motion .hero-inner{grid-template-columns:1fr}.hero--motion .hero-visual{order:-1;height:360px;margin-bottom:16px}}
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center}.hero-video-wrapper{position:relative;width:100%;max-width:600px;aspect-ratio:1/1}.hero-video-masked{position:absolute;inset:0;width:100%;height:100%;clip-path:url(#torn-paper-mask);transition:transform .4s cubic-bezier(.2,.8,.2,1)}.hero-video-masked:hover{transform:scale(1.05)}.hero-video{width:100%;height:100%;object-fit:cover}.circular-text-container{position:absolute;inset:-10%;width:120%;height:120%;pointer-events:none;animation:rotate-text 30s linear infinite}.circular-text-svg{width:100%;height:100%;overflow:visible}.circular-text-svg text{font-family:var(--font-display);font-size:5px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;fill:var(--white);opacity:.7}@keyframes rotate-text{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* --- HERO (Páginas Interiores Genéricas) --- */
.page-hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:80px 2rem}
.page-hero-content{max-width:800px}
.page-title{font-family:var(--font-display);font-size:clamp(3rem,7vw,4.5rem);font-weight:800;line-height:1.1;margin-bottom:1.5rem}
.page-description{font-size:1.2rem;max-width:700px;margin:0 auto;line-height:1.7}

/* --- HERO (Página Detalle de Solución) --- */
.solution-hero {
    padding: 120px 0 80px;
    text-align: center;
    position: relative;
    background: radial-gradient(ellipse at 50% -20%, rgba(0,120,212,0.15), transparent 50%);
}
.solution-hero-pill {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}
.solution-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}
.solution-hero-description {
    font-size: 1.2rem;
    max-width: 750px;
    margin: 0 auto;
    opacity: 0.9;
}

/* =================================================================== */
/* ===== 5. COMPONENTES DEL CUERPO =================================== */
/* =================================================================== */

/* --- BOTONES --- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;height:48px;padding:0 24px;border-radius:14px;text-decoration:none;font-weight:700;font-size:.95rem;border:1px solid transparent;transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),background-color .2s ease,border-color .2s ease,color .2s ease;will-change:transform,box-shadow}
.btn-xl{height:60px;padding:0 32px;font-size:1.1rem; box-shadow: 0 8px 25px rgba(0,0,0,0.2);}
.btn-primary{background-color:var(--ms-yellow);color:#0a0a0a;text-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:inset 0 -2px 4px rgba(0,0,0,.2),0 8px 25px rgba(255,185,0,.2)}
.btn-primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:inset 0 -2px 4px rgba(0,0,0,.15),0 8px 25px rgba(255,185,0,.4)}
.btn-secondary{background-color:rgba(209,52,56,.15);color:hsla(0,0%,100%,.9);border:1px solid rgba(209,52,56,.4);backdrop-filter:blur(5px)}
.btn-secondary:hover{background-color:rgba(209,52,56,.3);border-color:var(--ms-red);color:var(--white);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:hsla(0,0%,100%,.9)}
.btn-ghost:hover{background-color:rgba(209,52,56,.3);border-color:var(--ms-red);color:var(--white);transform:translateY(-2px)}

/* --- TARJETAS Y GRIDS (GENERAL) --- */
.solutions-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,28px)}
.solution-card{grid-column:span 6;display:grid;grid-template-rows:minmax(220px,320px) auto;background:var(--glass-bg);backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--glass-border);border-radius:var(--card-radius);box-shadow:var(--shadow-deep);overflow:clip;transform:translateZ(0);transition:transform .4s cubic-bezier(.2,.8,.2,1),background .3s ease,border-color .3s ease}
.solution-card:hover{transform:translateY(-6px) scale(1.01);background:var(--glass-hover);border-color:rgba(255,255,255,.26)}
.solution-card .card-media {width: 100%; height: 320px; object-fit: cover; display: block; }

.solution-card .card-media::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02);transition:transform .6s cubic-bezier(.2,.8,.2,1);background-image:var(--bg)}
.solution-card:hover .card-media::before{transform:scale(1.08)}
.solution-card .card-body{padding:clamp(22px,2vw,28px);display:flex;flex-direction:column}
.solution-card .card-title{font-size:clamp(1.6rem,2vw,2rem);line-height:1.1;margin-bottom:.4rem}
.solution-card .card-desc{font-size:clamp(1.05rem,1.3vw,1.12rem);opacity:.92;margin-bottom:1.1rem;flex-grow:1}
.card-actions{display:flex;gap:.75rem;flex-wrap:wrap}

/* --- Efecto StarBorder para Botones --- */
.star-border{--sb-color:color-mix(in oklab,var(--ms-yellow) 60%,var(--ms-green) 40%);--sb-speed:4s;--sb-thickness:2px;--sb-radius:18px;display:inline-flex;position:relative;overflow:hidden;padding:var(--sb-thickness);border-radius:var(--sb-radius);isolation:isolate}
.star-border .sb-grad-bottom,.star-border .sb-grad-top{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:.7;background-size:300% 100%;background-repeat:no-repeat;background-image:radial-gradient(circle,var(--sb-color),transparent 55%);clip-path:inset(0 round var(--sb-radius));filter:blur(.25px)}
.star-border .sb-grad-bottom{background-position:200% 100%;animation:sb-slide-left var(--sb-speed) linear infinite alternate}
.star-border .sb-grad-top{background-position:-100% 0;animation:sb-slide-right var(--sb-speed) linear infinite alternate}
.star-border .sb-inner{position:relative;z-index:1;width:100%;border-radius:calc(var(--sb-radius) - var(--sb-thickness));display:inline-flex;align-items:center;justify-content:center;gap:.6rem}
@keyframes sb-slide-left{0%{background-position:200% 100%;opacity:.9}to{background-position:0 100%;opacity:.4}}
@keyframes sb-slide-right{0%{background-position:-100% 0;opacity:.9}to{background-position:100% 0;opacity:.4}}

/* =================================================================== */
/* ===== 6. ESTILOS DE PÁGINAS ESPECÍFICAS =========================== */
/* =================================================================== */

/* --- PÁGINA "NOSOTROS" --- */
.about-grid,.cert-grid,.contact-grid-premium,.faq-grid,.features-grid,.values-grid{display:grid;gap:2rem;margin-top:4rem}
.about-grid{grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about-description{font-size:1.1rem;line-height:1.8;margin-bottom:1.5rem}
.stats-showcase{display:grid;gap:1.5rem}
.stat-number{font-family:var(--font-display);font-size:3rem;font-weight:800;background:linear-gradient(135deg,var(--ms-blue),var(--ms-green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}
.stat-label{font-size:1rem;font-weight:600}
.cert-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cert-card-3d,.faq-card,.feature-card,.info-card-3d,.stat-card,.value-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:20px;padding:2.5rem;backdrop-filter:blur(20px);position:relative;transition:var(--transition-normal);cursor:pointer;overflow:hidden}
.cert-card-3d:hover,.faq-card:hover,.feature-card:hover,.info-card-3d:hover,.stat-card:hover,.value-card:hover{box-shadow:0 20px 60px rgba(0,120,212,.2)}
.cert-icon{width:60px;height:60px;margin-bottom:1.5rem;color:var(--ms-yellow)}
.cert-title{font-family:var(--font-display);font-size:1.3rem;font-weight:700;margin-bottom:.5rem}
.cert-level{font-size:.9rem;color:var(--ms-blue);font-weight:600;margin-bottom:1rem;text-transform:uppercase;letter-spacing:1px}
.cert-description{line-height:1.6}
.values-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.value-card { text-align: center; }
.value-icon{width:50px;height:50px;margin: 0 auto 1.5rem auto; color:var(--ms-green)}
.value-icon.gold-icon svg{stroke:var(--accent,#facc15);color:var(--accent,#facc15);width:48px;height:48px}
.value-title{font-family:var(--font-display);font-size:1.3rem;font-weight:700;margin-bottom:1rem}
.value-description{line-height:1.6}

/* --- Layout de Características Alternadas (Reutilizable) --- */
.features-list-alt { display: flex; flex-direction: column; gap: 6rem; margin-top: 4rem; }
.feature-item-alt { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: clamp(2rem, 6vw, 5rem); }
.feature-item-alt.layout--reversed .feature-item-alt__visual { order: 2; }
.feature-item-alt__visual { display: grid; place-items: center; }
.feature-item-alt__visual .feature-icon {
    width: clamp(100px, 15vw, 150px);
    height: clamp(100px, 15vw, 150px);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 32px;
    display: grid;
    place-items: center;
    backdrop-filter: blur(10px);
}
.feature-item-alt__visual .feature-icon svg { width: 50%; height: 50%; stroke: var(--accent, #facc15); color: var(--accent, #facc15); }
.feature-title { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.2rem); margin-bottom: 1rem; }
.feature-description { font-size: 1.1rem; line-height: 1.7; opacity: 0.9; }
.features-list-alt .feature-item-alt:nth-child(2) { transition-delay: 0.1s; }
.features-list-alt .feature-item-alt:nth-child(3) { transition-delay: 0.2s; }
.features-list-alt .feature-item-alt:nth-child(4) { transition-delay: 0.3s; }

/* --- PÁGINA "CONTACTO" --- */
.contact-section-premium{padding:80px 0}
.contact-grid-premium{grid-template-columns:1fr 1.5fr;align-items:flex-start;gap:4rem}
.contact-info-stack{display:flex;flex-direction:column;gap:1.5rem}
.info-header{margin-bottom:1rem}
.info-header-title{font-family:var(--font-display);font-size:2rem;margin-bottom:.5rem}
.info-header-desc{font-size:1rem}
.info-card-3d{padding:1.5rem}
.info-icon{width:40px;height:40px;margin-bottom:1rem;color:var(--ms-yellow)}
.info-title{font-size:1.2rem;font-weight:700;margin-bottom:.5rem}
.info-detail{font-size:1.1rem;font-weight:600;margin-bottom:.5rem}
.contact-form-wrapper{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:20px;padding:clamp(2rem,5vw,3rem);backdrop-filter:blur(20px);box-shadow:0 20px 60px rgba(0,0,0,.2);transform-style:preserve-3d}
.contact-form-premium .form-header{text-align:center;margin-bottom:2rem}
.form-title-premium{font-family:var(--font-display);font-size:1.8rem}
.form-group{margin-bottom:1.5rem}
.form-label{display: block; font-size:.9rem;font-weight:500;margin-bottom:.5rem}
.form-input,.form-select,.form-textarea{width:100%;padding:1rem 1.5rem;background:rgba(0,0,0,.2);border:1px solid var(--glass-border);border-radius:10px;color:var(--white);font-family:var(--font-primary);font-size:1rem;transition:var(--transition-normal);backdrop-filter:blur(10px)}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:0;border-color:var(--ms-blue);box-shadow:0 0 15px rgba(0,120,212,.2)}
.form-textarea{resize:vertical;min-height:120px}
.faq-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.faq-section {
    /* Añadido para dar espacio antes del footer en la página de contacto */
    padding-bottom: 120px;
}
.page-contact .page-hero { display: none; }
.contact-hero-form { padding-top: 150px; padding-bottom: 120px; }
.contact-hero-form .page-hero-content { max-width: 800px; margin: 0 auto 5rem auto; text-align: center; }
.contact-hero-form .page-title { font-size: clamp(2.5rem, 6vw, 4rem); }

.faq-question{font-size:1.2rem;font-weight:700;margin-bottom:1rem;color:var(--ms-blue)}
.faq-answer{line-height:1.6}

/* --- PÁGINA "BENTO GRID HERO" (Home) --- */
.bento-wrapper { padding-top: 120px; padding-bottom: 120px; position: relative; z-index: 2; }
.bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(180px, auto); gap: 1.25rem; }
.bento-cell { position: relative; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--card-radius); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; color: var(--white); }
.bento-cell:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0,0,0,0.3); border-color: rgba(255, 255, 255, 0.2); }
.bento-cell--2x2 { grid-column: span 2; grid-row: span 2; }
.bento-cell__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.5; transition: transform 0.4s ease, opacity 0.4s ease; }
.bento-cell:hover .bento-cell__bg { transform: scale(1.05); opacity: 0.7; }
.bento-cell__content { position: relative; z-index: 2; padding: 1.5rem; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.bento-cell__logo { max-height: 32px; margin-bottom: 0.75rem; align-self: flex-start; }
.bento-cell__title { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 0.25rem 0; }
.bento-cell__desc { font-size: 0.95rem; opacity: 0.8; line-height: 1.4; }

/* --- PÁGINA DETALLE DE SOLUCIÓN --- */
.solution-detail-content { padding: 80px 0; }
.solution-layout { display: grid; grid-template-columns: 2.5fr 1fr; gap: 4rem; }
.solution-main article { margin-bottom: 3rem; }
.solution-main h2 { font-family: var(--font-display); font-size: 2rem; margin-bottom: 1rem; border-left: 3px solid var(--ms-blue); padding-left: 1rem; }
.solution-main h3 { font-size: 1.4rem; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.solution-main p, .solution-main li { line-height: 1.8; font-size: 1.1rem; color: rgba(255,255,255,0.85); }
.process-list { list-style: none; padding-left: 0; counter-reset: process-counter; }
.process-list li { position: relative; padding-left: 45px; margin-bottom: 1.5rem; }
.process-list li::before { counter-increment: process-counter; content: counter(process-counter); position: absolute; left: 0; top: 0; width: 32px; height: 32px; background: var(--ms-blue); color: white; border-radius: 50%; display: grid; place-items: center; font-weight: bold; font-size: 1rem; }
.process-list li strong { display: block; font-size: 1.2rem; color: white; }
.solution-sidebar { position: sticky; top: 120px; align-self: start; }
.sidebar-widget { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 20px; padding: 1.5rem; margin-bottom: 2rem; }
.sidebar-widget h4 { font-size: 1.2rem; margin-bottom: 1rem; }
.tech-list { list-style: none; padding: 0; }
.tech-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--glass-border); font-size: 1rem; }
.tech-list li:last-child { border-bottom: none; }

/* --- CTA (Call to Action) --- */
.cta-premium{padding:var(--section-padding,120px 0);position:relative;border-top:1px solid hsla(0,0%,100%,.1);margin-top:80px}
.cta-premium-grid{display:grid;grid-template-columns:2fr 1.5fr;align-items:center;gap:clamp(2rem,6vw,5rem)}
.cta-premium-title{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,4rem);font-weight:700;line-height:1.1;margin-bottom:1.5rem;background:linear-gradient(135deg,var(--white),#aaa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cta-premium-description{font-size:1.2rem;max-width:550px;line-height:1.7}
.cta-premium-actions{display:flex;flex-direction:column;gap:2rem;align-items:flex-start}
.action-buttons{display:flex;flex-wrap:wrap;gap:1rem;width:100%}

/* --- ESTILOS PARA SVGs DE SERVICIOS --- */
.service-logo { max-height: 40px; margin-bottom: 24px; }
.service-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.5rem); margin: 16px 0; line-height: 1.2; }
.service-description { font-size: 1.125rem; color: #ebeef1; line-height: 1.6; margin-bottom: 32px; }
.service-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
.feature-item { display: flex; align-items: flex-start; gap: 20px; background: rgba(255,255,255,0.03); padding: 1.25rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.06); height: 100%; }
.feature-item__icon { font-size: 1.5rem; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.05); border-radius: 8px; flex-shrink: 0; }
.feature-item__title { margin: 0 0 4px 0; font-size: 1.1rem; font-weight: 600; }
.feature-item__text { margin: 0; color: #eceef0; font-size: 0.95rem; line-height: 1.5; }
.service-actions { margin-top: 40px; }
.service-visual {
    position: sticky;
    top: 120px;
    align-self: start;
    display: grid;
    place-items: center;
}
.service-visual__svg {
    width: 100%;
    max-width: 450px;
    height: auto;
    max-height: 80vh;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.2));
}
/* Estilo para las etiquetas de texto dentro de los SVGs */
.svg-context-label {
    font-family: var(--font-display);
    font-size: 14px;
    fill: rgba(255, 255, 255, 0.75);
    text-anchor: middle;
    font-weight: 500;
}
/* --- Animaciones para los SVGs de servicios --- */
@keyframes svg-dash { to { stroke-dashoffset: -100; } }
.svg-anim-dash { animation: svg-dash 5s linear infinite; }
.svg-anim-dash-rev { animation: svg-dash 5s linear infinite reverse; }

@keyframes svg-pulse { 50% { transform: scale(0.8); opacity: 0.7; } }
.svg-anim-pulse { animation: svg-pulse 3s ease-in-out infinite; transform-origin: center; }

@keyframes svg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.svg-anim-float { animation: svg-float 6s ease-in-out infinite; }
.svg-anim-float-rev { animation: svg-float 6s ease-in-out infinite reverse; }

@keyframes svg-bar-anim { from { height: 0; } to { height: var(--h); } }
.svg-bar { animation: svg-bar-anim 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

@keyframes svg-donut-anim { to { stroke-dashoffset: 0; } }
.svg-donut { animation: svg-donut-anim 2s 1s cubic-bezier(0.5, 0, 0.1, 1) forwards; }

@keyframes svg-orbit-anim { to { transform: rotate(360deg); } }
.svg-orbit { animation: svg-orbit-anim var(--d, 10s) linear infinite; transform-origin: center; }

/* =================================================================== */
/* ===== 7. WIDGETS Y COMPONENTES DE TERCEROS ======================== */
/* =================================================================== */

/* --- CURSOR DE PINCELADA --- */
/* CORRECCIÓN: Se elimina 'cursor: none' para que el puntero del sistema sea visible.
   Se asegura que los elementos clickeables siempre muestren la 'mano'. */
@media (pointer: fine) {
    body {
        cursor: default; /* Muestra el cursor de flecha por defecto */
    }
    a, button, .btn, .social-btn, .nav-btn, .cd-card, [role="button"], input[type="submit"], input[type="button"] {
        cursor: pointer !important; /* Asegura la 'mano' en todos los elementos interactivos */
    }
}
#sublime-trail-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10001;
    mix-blend-mode: screen; 
    filter: blur(2px);
}
@media (pointer: coarse) { #sublime-trail-canvas { display: none !important; } }

/* --- PARTNERS LOGO LOOP --- */
.partners {
    padding: 30px 0;
    position: relative;
    text-align: center; /* Centra el título */
}
.partners-title {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: clamp(0.9rem, 1.5vw, 1rem); /* Título más pequeño */
    margin-bottom: 2rem; /* Más espacio debajo del título */
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.logoloop {
    position: relative;
    overflow-x: hidden;
    --logoloop-gap: 60px; /* Aumentamos el espacio entre logos */
    --logoloop-logoHeight: 35px;
    --logoloop-fadeColor: transparent; /* Sin degradado de fondo */
}
.logoloop__track { display: flex; width: max-content; will-change: transform; user-select: none; }
.logoloop__list { display: flex; align-items: center; }
.logoloop__item { flex: 0 0 auto; margin-right: var(--logoloop-gap); }
.logoloop__item img {
    height: var(--logoloop-logoHeight);
    width: auto;
    display: block;
    object-fit: contain;
    transition: opacity 0.3s ease;
    /* CORRECCIÓN: Filtro para convertir logos negros en blancos */
    filter: brightness(0) invert(1);
    opacity: 0.6;
}
.logoloop:hover .logoloop__item img {
    opacity: 1;
}

/* --- TARJETA VISUAL (DATA SPHERE) --- */
.feature-card--visual {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 200px;
    overflow: hidden;
    font-family: 'Space Grotesk', monospace;
}

.code-typing-container pre {
    margin: 0;
    white-space: pre-wrap;
    font-size: 0.8rem;
    line-height: 1.6;
}

.code-typing-container code {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 0;
    overflow: hidden;
    white-space: pre;
    animation: type-code 5s steps(150, end) infinite alternate;
}
.code-typing-container code::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ms-yellow);
    animation: blink-cursor 0.75s step-end infinite;
}
.code-typing-container code::before {
    content: 'const copilot = new AI.Agent({\A   name: "CrazyDigitalBot",\A   context: "business_growth",\A   skills: ["automation", "analytics"]\A });\A \A copilot.run();';
    display: block;
    white-space: pre;
    color: #a7c5ff;
}
@keyframes type-code { from { width: 0; } to { width: 100%; } }
@keyframes blink-cursor { 50% { background-color: transparent; } }

/* =================================================================== */
/* ===== 8. FOOTER =================================================== */
/* =================================================================== */

.footer-wrapper {
    background-color: #0a0a0a;
    padding: 5rem 0 2rem;
    border-top: 1px solid hsla(0,0%,100%,.1);
    position: relative;
    overflow: hidden; /* Previene desbordes visuales */
}

.footer-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0, rgba(0,120,212,.1), transparent 40%);
    opacity: .5;
    pointer-events: none;
}

.footer-content {
    display: grid;
    /* Diseño base para escritorio: 4 columnas */
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

.footer-content > * {
    min-width: 0;
}

.footer-brand {
    display: flex;
    flex-direction: column;
}

.footer-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 1.5rem;
}

.footer-logo-img {
    height: 40px;
    width: auto;
}

.footer-logo-text {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
}

.footer-description {
    line-height: 1.7;
    max-width: 350px;
    font-size: .95rem;
    color: #a0a0a0; /* Color ligeramente más claro para mejor lectura */
}

.footer-contact {
    margin-top: 1.25rem;
    display: grid;
    gap: .45rem;
    color: #b8b8b8;
    font-size: .95rem;
    line-height: 1.6;
    max-width: 420px;
}

.footer-contact p {
    margin: 0;
}

.footer-contact a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

.footer-contact a:hover {
    color: var(--ms-blue);
}

.footer-links {
    display: flex;
    flex-direction: column;
}

.footer-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.footer-list a {
    color: #8a8a8a; /* Tono más claro para los enlaces */
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
    display: inline-block;
}

.footer-list a:hover {
    color: var(--ms-blue);
    transform: translateX(5px);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid hsla(0,0%,100%,.1);
}

.copyright-text {
    color: #8a8a8a;
    font-size: .9rem;
}

.footer-social {
    display: flex;
    gap: .75rem;
}

.footer-social .social-btn {
    width: 40px;
    height: 40px;
    color: #a0a0a0;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
}

.footer-social .social-btn:hover {
    color: var(--white);
    background: rgba(255,255,255,.1);
}

/* =================================================================== */
/* ===== ESTILOS PARA EL CHATBOT DE ASISTENCIA RÁPIDA ===== */
/* =================================================================== */

.cd-chatbot-fab {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--ms-blue), var(--ms-green));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(0, 120, 212, 0.4);
    cursor: pointer;
    z-index: 999;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cd-chatbot-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(0, 120, 212, 0.5);
}

.cd-chatbot-fab svg {
    width: 32px;
    height: 32px;
    color: white;
}

.cd-chatbot-container {
    position: fixed;
    bottom: 100px;
    right: 25px;
    width: 360px;
    max-width: calc(100% - 40px);
    height: 500px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    
    background: var(--glass-bg);
    backdrop-filter: blur(25px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-deep);
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
    z-index: 1000;
}

.cd-chatbot-container.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.cd-chatbot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.cd-chatbot-header h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin: 0;
}

#cd-chatbot-close {
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#cd-chatbot-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.cd-chatbot-box {
    flex-grow: 1;
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Scrollbar personalizada */
.cd-chatbot-box::-webkit-scrollbar { width: 6px; }
.cd-chatbot-box::-webkit-scrollbar-track { background: transparent; }
.cd-chatbot-box::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); border-radius: 10px; }

.cd-chatbot-message {
    padding: 0.8rem 1.2rem;
    border-radius: 18px;
    max-width: 80%;
    line-height: 1.5;
    animation: fadeIn 0.4s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.cd-chatbot-message.bot {
    background-color: rgba(0, 0, 0, 0.2);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}
.cd-chatbot-message.bot a {
    color: var(--ms-yellow);
    font-weight: bold;
    text-decoration: none;
}
.cd-chatbot-message.bot a:hover {
    text-decoration: underline;
}

.cd-chatbot-message.user {
    background-color: var(--ms-blue);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.cd-chatbot-input {
    display: flex;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--glass-border);
    gap: 0.5rem;
}

#cd-user-input {
    flex: 1;
    padding: 0.8rem 1.2rem;
    background: rgba(0,0,0,.2);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    color: var(--white);
    font-family: var(--font-primary);
    font-size: 0.95rem;
}
#cd-user-input:focus { outline: none; border-color: var(--ms-blue); }

#cd-chatbot-send {
    width: 48px;
    height: 48px;
    border: none;
    background: var(--ms-blue);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
#cd-chatbot-send:hover { background-color: var(--ms-green); }

/* --- Responsivo: Ventana de chat más pequeña en móviles --- */
@media (max-width: 600px) {
    .cd-chatbot-container {
        bottom: 84px; /* despeja el FAB y evita tocar el menú superior */
        right: 12px;
        width: min(92vw, 360px);
        height: min(65vh, 420px);
        max-width: 92vw;
        max-height: 65vh;
        border-radius: 16px;
    }
    .cd-chatbot-header {
        padding: 0.75rem 1rem;
    }
    #cd-chatbot-close {
        width: 40px;
        height: 40px; /* objetivo táctil más claro */
    }
    .cd-chatbot-box {
        padding: 1rem;
    }
    .cd-chatbot-input {
        padding: 0.75rem 1rem;
        gap: 0.5rem;
    }
    #cd-user-input {
        font-size: 0.9rem;
        padding: 0.7rem 1rem;
    }
    #cd-chatbot-send {
        width: 44px;
        height: 44px;
    }
    .cd-chatbot-fab {
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
    }
}

@media (max-width: 380px) {
    .cd-chatbot-container {
        height: min(58vh, 360px);
    }
}

/* =================================================================== */
/* ===== ESTILOS PARA EL CHATBOT DE DIALOGFLOW MESSENGER (ICONO) ===== */
/* =================================================================== */

df-messenger {
  --df-messenger-button-titlebar-color: #0078D4;
  --df-messenger-button-titlebar-font-color: #ffffff;
  --df-messenger-position-bottom: 20px;
  --df-messenger-position-right: 20px;
}

/* --- Media Queries para responsividad (ajuste a diferentes pantallas) --- */
@media (max-width: 600px) {
  df-messenger {
    --df-messenger-position-bottom: 15px;
    --df-messenger-position-right: 15px;
    /* CORRECCIÓN: Evita que el chat se abra a pantalla completa en móviles */
    --df-messenger-chat-width: 90vw;
    --df-messenger-chat-height: 75vh;
  }
}

/* =================================================================== */
/* ===== 9. MEDIA QUERIES (RESPONSIVIDAD) ============================ */
/* =================================================================== */

/* --- Pantallas Grandes (1600px y más) --- */
@media (min-width: 1600px) {
    .container { max-width: 1440px; }
    .page-home .hero-container { max-width: 1350px; }
    .page-home .hero-title { font-size: clamp(2.6rem, 5.4vw, 4.8rem); }
    .page-home .hero-description { font-size: 1.3rem; max-width: 600px; }
}

/* --- Tablets y Escritorios Pequeños (hasta 1100px) --- */
@media (max-width: 1100px){
    .hero-container{grid-template-columns:1fr;text-align:center}
    .hero-content{max-width:700px;margin:0 auto}
}

/* --- Tablets (hasta 992px) --- */
@media (max-width: 992px) {
    /* --- Ocultar Mega Menú de escritorio en móvil --- */
    .cdm-cardnav { display: none !important; }
    .main { padding-top: 90px; }

    /* --- Ajustes de la Barra de Navegación --- */
    .nav { position: fixed; top: 10px; left: 10px; right: 10px; width: auto; padding: 0; background: transparent; backdrop-filter: none; border: none; box-shadow: none; }
    .nav-container { height: 65px; padding: 0 1.5rem; display: flex; justify-content: space-between; align-items: center; }
    .nav-logo .logo-img { height: 60px; } 

    /* Ocultar menú de escritorio y mostrar hamburguesa */
    .nav-menu-wrapper { display: none; }
    .nav-mobile-toggle { display: block; background: transparent; border: none; padding: 0; cursor: pointer; z-index: 1002; width: 48px; height: 48px; }
    
    /* Panel de menú móvil abierto */
    .nav-menu-wrapper.is-open { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 1.5rem; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(10, 10, 10, 0.95); backdrop-filter: blur(15px); z-index: 1001; padding: 90px 2rem 2rem; overflow-y: auto; }
    .nav-menu-wrapper.is-open .nav-menu-glass { flex-direction: column; align-items: stretch; gap: 1rem; width: 100%; max-width: 320px; }
    .nav-menu-wrapper.is-open .nav-btn { width: 100%; justify-content: flex-start; padding: 12px 20px; border-radius: 14px; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
    .nav-menu-wrapper.is-open .nav-btn::after { transform: none !important; white-space: nowrap !important; max-width: 150px; opacity: 1; }
    .nav-menu-wrapper.is-open .nav-btn::before { margin-right: 0.75rem; }
    .nav-menu-wrapper.is-open .nav-btn:hover { background-color: rgba(255, 255, 255, 0.1); }
    .nav-menu-wrapper.is-open .nav-btn.active { background-color: rgba(255, 185, 0, 0.2); border-color: var(--ms-yellow); }
    
    /* Acordeón 'Explorar' en móvil */
    #cardNavToggle::after { transition: transform 0.3s ease; }
    #cardNavToggle.is-expanded::after { transform: rotate(90deg); }
    .mobile-explore-content { background: rgba(0,0,0,0.2); border-radius: 14px; width: 100%; margin-top: 0.5rem; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; padding: 0 1rem; }
    .nav-btn.is-expanded + .mobile-explore-content { padding-top: 1rem; padding-bottom: 1rem; }
    .mobile-explore-content .cdm-cardnav__grid { grid-template-columns: 1fr; gap: 1rem; }
    .mobile-explore-content .cdm-cardnav__card { background: none; border: none; padding: 0; margin: 0; min-height: auto; }
    .mobile-explore-content .cdm-cardnav__header { margin-bottom: 0.5rem; }
    .mobile-explore-content .cdm-cardnav__title { color: var(--ms-yellow); font-size: 1rem; }
    .mobile-explore-content .cdm-cardnav__desc { display: none; }
    .mobile-explore-content .cdm-cardnav__links { grid-template-columns: 1fr; gap: 0; }
    .mobile-explore-content .cdm-cardnav__links a { padding: 0.75rem 0.5rem; font-size: 0.95rem; border-radius: 8px; }
    
    /* Animación de la hamburguesa a "X" */
    .nav-mobile-toggle[aria-expanded="true"] .hamburger-inner { transform: rotate(45deg); }
    .nav-mobile-toggle[aria-expanded="true"] .hamburger-inner::before { top: 0; opacity: 0; }
    .nav-mobile-toggle[aria-expanded="true"] .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); }
    .nav-menu-wrapper.is-open .nav-social { margin-top: 1rem; gap: 1rem; }
    .nav-menu-wrapper.is-open .social-btn { transform: scale(1.1); }
    
    /* --- Otros Ajustes Generales --- */
    .container { width: 100%; padding: 0 1.5rem; }
    .about-grid, .cta-premium-grid { grid-template-columns: 1fr; text-align: center; }
    .contact-grid-premium { grid-template-columns: 1fr; text-align: center; }
    .contact-form-wrapper { order: 1; }
    .contact-info-stack { order: 2; }
    .hero-visual, .cd-hero-right { order: -1; margin-bottom: 2rem; }
    .hero-actions, .cta-premium-actions { justify-content: center; }
    .values-grid, .cert-grid { grid-template-columns: 1fr; }
    .hero-description-box { margin-left: auto; margin-right: auto; }
    .solution-card{ grid-column: span 12; }
    .service-visual { position: static; top: auto; margin-bottom: 2rem; }
    .service-features-grid { grid-template-columns: 1fr; }
    .feature-item-alt, .feature-item-alt.layout--reversed { grid-template-columns: 1fr; text-align: center; }
    .feature-item-alt__visual { order: -1; margin-bottom: 1.5rem; }
    .feature-item-alt.layout--reversed .feature-item-alt__visual { order: -1; }
    .features-list-alt { gap: 4rem; }
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .solution-layout {
        grid-template-columns: 1fr;
    }
    .solution-sidebar {
        position: static;
        top: auto;
    }
    /* Footer en tablets */
    .footer-content { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
    .footer-brand { grid-column: 1 / -1; text-align: center; align-items: center; }
    .footer-logo-link { justify-content: center; }
    .footer-contact { max-width: 100%; text-align: center; }
    .footer-links { text-align: center; }
    .footer-list a:hover { transform: none; }
}

/* --- Móviles Medianos (hasta 768px) --- */
@media (max-width: 768px) {
    .hero--motion { min-height: 70vh; }
    /* Reordenamiento de formulario de contacto en escritorio */
    @media (min-width: 993px) {
        .contact-grid-premium { display: grid; grid-template-columns: 1fr 1.5fr; align-items: flex-start; gap: 4rem; }
        .contact-form-wrapper { order: 2; }
        .contact-info-stack { order: 1; }
    }
}

/* --- Móviles (hasta 640px) --- */
@media (max-width: 640px) {
    .bento-grid { grid-template-columns: 1fr; }
    .bento-cell--2x2 { grid-column: span 1; grid-row: span 1; }
}

/* --- Móviles (hasta 600px) --- */
@media (max-width: 600px) {
    .footer-wrapper { padding: 4rem 0 2rem; }
    .footer-content { grid-template-columns: 1fr; gap: 2.5rem; }
    .footer-brand, .footer-links { justify-self: center; width: min(100%, 430px); text-align: center; }
    .footer-logo-link { justify-content: center; }
    .footer-contact { text-align: center; }
    .footer-bottom { flex-direction: column; gap: 1.5rem; text-align: center; }

  df-messenger {
    --df-messenger-position-bottom: 18px;
    --df-messenger-position-right: 16px;
    --df-messenger-chat-width: 92vw;
    --df-messenger-chat-height: 68vh;
  }
}
/* --- Móviles Pequeños (hasta 480px) --- */
@media (max-width: 480px) {
    .nav-container { padding: 0.5rem 1rem; }
    .nav-logo .logo-img { height: 48px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .btn-xl { width: 100%; }
    .footer-content { gap: 2rem; }
    .footer-brand { align-items: center; }
    .footer-links { align-items: center; }
}

/* --- Ajuste para pantallas de baja altura --- */
@media (max-height: 700px) {
  df-messenger {
    --df-messenger-chat-height: 58vh;
  }
}