/* =============================================
   SIDIS PROFESSIONAL DESIGN SYSTEM
   Modern, Premium, Modular
============================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* Primary Colors */
    --brand-teal: #00C8C8;
    --brand-teal-light: #44E5E5;
    --brand-teal-dark: #009B9B;
    --brand-navy: #0A1A2F;
    --brand-navy-accent: #112240;
    --brand-navy-light: #233554;

    /* Semantic Colors */
    --accent-green: #64FFDA; /* Cyberpunk style accent */
    --text-main: #FFFFFF;
    --text-muted: #8892B0;
    --text-silver: #CCD6F6;
    --bg-main: var(--brand-navy);
    --bg-card: rgba(17, 34, 64, 0.7);
    --glass-bg: rgba(10, 26, 47, 0.85);
    --glass-border: rgba(0, 200, 200, 0.1);

    /* Typography */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Spacing & Scaling */
    --section-padding: 100px;
    --container-max: 1200px;
    --transition-smooth: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    
    /* Animation Speed Variable (controlled by JS) */
    --anim-speed: 1;
}

/* =============================================
   RESET & FOUNDATION
============================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--bg-main);
}

body {
    font-family: var(--font-body);
    color: var(--text-silver);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

ul { list-style: none; }
a { text-decoration: none; color: inherit; transition: var(--transition-smooth); }
button { cursor: pointer; border: none; outline: none; background: none; }

/* =============================================
   TYPOGRAPHY
============================================= */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--text-main);
    font-weight: 700;
    line-height: 1.1;
}

h1 { font-size: clamp(2.5rem, 8vw, 4.5rem); letter-spacing: -2px; }
h2 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 2rem; }
h3 { font-size: 1.5rem; margin-bottom: 1rem; }

.t-gradient {
    background: linear-gradient(90deg, var(--brand-teal), var(--accent-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.t-label {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brand-teal);
    margin-bottom: 1rem;
    display: block;
}

/* =============================================
   LAYOUT UTILITIES
============================================= */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 40px;
}

section {
    padding: var(--section-padding) 0;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =============================================
   COMPONENTS
============================================= */

/* Navbar Glassmorphism - White Frosted */
.nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
    transition: var(--transition-smooth);
    background: rgba(255, 255, 255, 0.02);
}

.nav.stuck {
    background: rgba(255, 255, 255, 0.85); /* Light frosted glass */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 15px 0;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-silver);
    transition: var(--transition-smooth);
}

.nav.stuck .nav-links a {
    color: var(--brand-navy); /* Dark text on light background */
}

.nav-links a:hover {
    color: var(--brand-teal);
}

.nav-logo img {
    height: 64px;
    width: auto;
    filter: none; /* Removed glow to contrast with light background */
    transition: filter 0.3s ease;
}

/* Give logo a slight shadow only when nav is NOT stuck and background is dark */
.nav:not(.stuck) .nav-logo img {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

/* Buttons Premium */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--brand-teal);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}

.btn-primary {
    border: 1px solid var(--brand-teal);
    color: var(--brand-teal);
}

.btn-primary:hover {
    color: var(--brand-navy);
}

.btn-primary:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.btn-ghost {
    color: var(--text-silver);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-ghost:hover {
    border-color: var(--brand-teal);
    color: var(--brand-teal);
}

/* CARDS: Services & Values */
.glass-card {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    padding: 40px;
    border-radius: 12px;
    transition: var(--transition-smooth);
    height: 100%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.glass-card:hover {
    transform: translateY(-10px);
    border-color: var(--brand-teal);
    box-shadow: 0 20px 40px -15px rgba(2, 12, 27, 0.7);
}

/* =============================================
   SECTIONS: CUSTOM STYLES
============================================= */

/* HERO */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    /* Removed heavy gradient background so global network is visible */
    background: transparent;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
}

.hero h1 {
    margin-bottom: 25px;
}

.hero p {
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 500px;
    margin-bottom: 40px;
}

.hero-actions {
    display: flex;
    gap: 20px;
}

/* ANIMATED SVG CIRCUIT */
.circuit-wrap {
    filter: drop-shadow(0 0 15px rgba(0, 200, 200, 0.25));
}

.circuit-svg {
    width: 100%;
    height: auto;
}

/* Path draw animation */
.cp {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: draw 2.5s ease-out forwards; /* Fixed: removed invalid property values */
}

.cp-1  { animation-delay: 0.15s; }
.cp-2  { animation-delay: 0.35s; }
.cp-3  { animation-delay: 0.55s; }
.cp-4  { animation-delay: 0.75s; }
.cp-5  { animation-delay: 0.95s; }
.cp-6  { animation-delay: 1.10s; }
.cp-7  { animation-delay: 1.25s; }
.cp-8  { animation-delay: 1.40s; }
.cp-9  { animation-delay: 1.55s; }
.cp-10 { animation-delay: 1.70s; }

@keyframes draw {
    to { stroke-dashoffset: 0; }
}

/* Node pulse */
.cn {
    transform-origin: center;
    animation: node-pulse 2.6s ease-in-out infinite;
}

.cn:nth-child(2n+1) { animation-delay: 0.4s; }
.cn:nth-child(3n+1) { animation-delay: 0.9s; }
.cn:nth-child(5n+1) { animation-delay: 1.5s; }

@keyframes node-pulse {
    0%, 100% { opacity: 0.45; }
    50%       { opacity: 1;    }
}

/* GRID SYSTEMS */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

/* CONTACT FORM PROFESSIONAL */
.form-wrap {
    background: var(--brand-navy-accent);
    padding: 50px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.9rem;
}

.contact-form input, 
.contact-form textarea {
    width: 100%;
    background: var(--brand-navy);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    padding: 15px;
    color: var(--text-silver);
    font-family: var(--font-body);
    transition: var(--transition-smooth);
}

.contact-form input:focus, 
.contact-form textarea:focus {
    border-color: var(--brand-teal);
    box-shadow: 0 0 10px rgba(0, 200, 200, 0.1);
}

/* REVEAL ON SCROLL */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================
   GLOBAL NEURAL BACKGROUND & 3D
============================================= */

#global-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, var(--brand-navy-accent), var(--brand-navy));
}

.global-circuit-svg {
    width: 100vw;
    height: 150vh; /* Taller to allow parallax */
    opacity: 0.8;
}

/* Depth Layers styling (parallax will be subtle SVG movement/blur) */
.layer-deep {
    opacity: 0.3;
    filter: blur(4px);
    transform: scale(0.9);
    transform-origin: center;
}

.layer-mid {
    opacity: 0.6;
    filter: blur(1px);
}

.layer-front {
    opacity: 1;
    transform: scale(1.1);
    transform-origin: center;
}

/* Connections */
.net-path {
    stroke: var(--brand-teal);
    stroke-width: 1.5;
    opacity: 0.15;
}

/* Nodes */
.net-node {
    fill: var(--brand-navy);
    stroke: var(--brand-teal);
    stroke-width: 1.5;
    /* Use the custom property for speed */
    animation: node-firing calc(4s / var(--anim-speed)) infinite alternate;
}

.net-node:nth-child(2n) { animation-delay: 1.5s; }
.net-node:nth-child(3n) { animation-delay: 3s; }

@keyframes node-firing {
    0%, 80% { fill: var(--brand-navy); filter: drop-shadow(0 0 0 transparent); }
    90% { fill: var(--brand-teal); filter: drop-shadow(0 0 8px var(--brand-teal)); }
    100% { fill: var(--brand-teal-light); filter: drop-shadow(0 0 12px var(--brand-teal-light)); }
}

/* Signal Pulses */
.signal {
    fill: #fff;
    filter: drop-shadow(0 0 6px #fff);
    opacity: 0;
}

.firing .signal {
    animation-name: signal-travel;
    /* Incorporate the speed multiplier dynamically */
    animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
    animation-iteration-count: infinite;
    /* We use JS to update --anim-speed to change duration, but standard CSS animations 
       don't cleanly re-evaluate duration mid-flight. To approximate speed up, we 
       will adjust the transition of the element holding the variables or 
       in JS we will handle playbackRate. For CSS simplicity, playbackRate in JS is superior.
       So we set base animation here.
    */
}

@keyframes signal-travel {
    0% { offset-distance: 0%; opacity: 0; transform: scale(0.5); }
    5% { opacity: 1; transform: scale(1); }
    90% { opacity: 1; transform: scale(1); }
    100% { offset-distance: 100%; opacity: 0; transform: scale(0.5); }
}

/* =============================================
   RESPONSIVE
============================================= */
@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero p { margin: 0 auto 40px; }
    .hero-actions { justify-content: center; }
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .hero-visual { display: none; }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .container { padding: 0 20px; }
}

/* HAMBURGER */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--brand-teal);
    transition: var(--transition-smooth);
}

@media (max-width: 768px) {
    .hamburger { display: flex; }
}

/* =============================================
   ENHANCED CONTACT FORM
============================================= */
.contact-links {
    list-style: none;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-links li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.contact-links a { color: var(--text-silver); }
.contact-links a:hover { color: var(--brand-teal); }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.req { color: var(--brand-teal); }

.form-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 200, 200, 0.1);
    border: 1px solid rgba(0, 200, 200, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

/* AI Smart Classifier Badge */
.ai-suggestion {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: rgba(0, 200, 200, 0.06);
    border: 1px solid rgba(0, 200, 200, 0.2);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-silver);
    animation: fade-in-up 0.4s ease-out;
}

.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--brand-teal);
    color: var(--brand-navy);
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   FOOTER
============================================= */
.footer {
    position: relative;
    padding: 80px 0 0;
    background: rgba(5, 14, 30, 0.85);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 200, 200, 0.08);
    margin-top: 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 3rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Brand Column */
.footer-brand { }

.footer-logo {
    display: inline-block;
    margin-bottom: 1rem;
}

.footer-logo img {
    height: 52px;
    width: auto;
    opacity: 0.95;
}

.footer-tagline {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 240px;
    margin-bottom: 1.5rem;
}

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

.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(0, 200, 200, 0.08);
    border: 1px solid rgba(0, 200, 200, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: var(--transition-smooth);
}

.footer-social a:hover {
    background: var(--brand-teal);
    border-color: var(--brand-teal);
    color: var(--brand-navy);
    transform: translateY(-3px);
}

/* Common column styles */
.footer-col-title {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links a {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    transition: var(--transition-smooth);
}

.footer-links a:hover {
    color: var(--brand-teal);
    padding-left: 4px;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.75rem;
    transition: var(--transition-smooth);
}

a.footer-contact-item:hover { color: var(--brand-teal); }

/* Footer Bottom */
.footer-bottom {
    padding: 1.75rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.footer-bottom p {
    font-size: 0.825rem;
    color: rgba(255, 255, 255, 0.22);
}

.footer-made { font-size: 0.825rem; }

/* Responsive Footer */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .form-row { grid-template-columns: 1fr; }
}

/* =============================================
   SECTION HEADER UTILITY
============================================= */
.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3.5rem;
}

.section-header h2 { margin-bottom: 1rem; }
.section-header p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.7; }

/* =============================================
   MVV SLIDER (Misión / Visión / Valores)
============================================= */
.mvv-slider {
    background: rgba(17, 34, 64, 0.6);
    border: 1px solid rgba(0, 200, 200, 0.12);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

/* Tab Row */
.mvv-tabs {
    display: flex;
    border-bottom: 1px solid rgba(0, 200, 200, 0.1);
    background: rgba(10, 26, 47, 0.5);
}

.mvv-tab {
    flex: 1;
    padding: 1.1rem 1rem;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.mvv-tab:hover {
    color: var(--text-silver);
    background: rgba(0, 200, 200, 0.04);
}

.mvv-tab.active {
    color: var(--brand-teal);
    border-bottom-color: var(--brand-teal);
    background: rgba(0, 200, 200, 0.06);
}

/* Slide Panels */
.mvv-slides {
    position: relative;
    min-height: 240px;
}

.mvv-slide {
    display: none;
    padding: 2.5rem 3rem;
    animation: slide-in 0.45s ease-out;
}

.mvv-slide.active { display: block; }

@keyframes slide-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mvv-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(0, 200, 200, 0.08);
    border: 1px solid rgba(0, 200, 200, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.mvv-slide h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: var(--text-main);
}

.mvv-slide > p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-muted);
    max-width: 760px;
}

/* Values grid inside the Valores slide */
.values-grid-mvv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.value-item {
    background: rgba(0, 200, 200, 0.04);
    border: 1px solid rgba(0, 200, 200, 0.1);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    transition: var(--transition-smooth);
}

.value-item:hover {
    border-color: rgba(0, 200, 200, 0.3);
    background: rgba(0, 200, 200, 0.08);
}

.value-name {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--brand-teal);
    margin-bottom: 0.5rem;
}

.value-item p {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0;
}

/* Responsive MVV */
@media (max-width: 768px) {
    .mvv-slide { padding: 2rem 1.5rem; }
    .values-grid-mvv { grid-template-columns: 1fr; }
}