/* -------------------------------------------------------------
   OFICINA TÉCNICA - ESTILOS PERSONALIZADOS & MICRO-ANIMACIONES
   ------------------------------------------------------------- */

/* Variables y tipografía principal */
:root {
    --primary-blue: #0B192C;
    --accent-orange: #FF6B00;
    --accent-orange-hover: #E05E00;
    --teal-tech: #00ADB5;
}

/* Scroll suavizado general */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem; /* Asegura que la cabecera fija no tape las secciones */
}

/* Estilo de la cuadrícula técnica de fondo (Efecto Plano / Blueprint) */
.blueprint-grid {
    background-size: 28px 28px;
    background-image: 
        linear-gradient(to right, rgba(14, 165, 233, 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(14, 165, 233, 0.07) 1px, transparent 1px);
}

/* Animación del haz de escaneo vertical en el Hero */
.blueprint-scan-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(56, 189, 248, 0.4) 15%, 
        rgba(0, 173, 181, 0.8) 50%, 
        rgba(56, 189, 248, 0.4) 85%, 
        transparent 100%
    );
    box-shadow: 0 0 12px rgba(0, 173, 181, 0.6);
    animation: scanAnimation 5s linear infinite;
    pointer-events: none;
}

@keyframes scanAnimation {
    0% {
        top: -5%;
        opacity: 0.1;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        top: 105%;
        opacity: 0.1;
    }
}

/* Cuadrícula detallada para visores técnicos pequeños */
.bg-grid {
    background-size: 14px 14px;
    background-image: 
        linear-gradient(to right, rgba(56, 189, 248, 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(56, 189, 248, 0.12) 1px, transparent 1px);
}

/* Efectos Drag & Drop en el Formulario */
#dropzone.dragover {
    border-color: var(--accent-orange) !important;
    background-color: rgba(255, 107, 0, 0.05) !important;
    box-shadow: 0 0 12px rgba(255, 107, 0, 0.15);
}

/* Estilo para los inputs numéricos (quita las flechas predeterminadas) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* Sombra de contorno sutil en inputs enfocados */
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15) !important;
}

/* Animaciones del botón flotante de asesoría */
#floating-cta {
    will-change: transform, opacity;
}

#floating-cta.show-floating-cta {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}

/* Hover de cartas y filas con elevación suave */
.hover-lift {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(11, 25, 44, 0.05);
}

/* Efecto de carga esqueleto (Skeleton Loader) en Calendly */
.skeleton-pulse {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite;
}

@keyframes skeletonLoading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}