:root {
    /* Gradients (adopted from services section) */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, rgba(227, 98, 231, 0.28) 0%, rgba(98, 126, 234, 0.3) 100%);

    /* Colors */
    --text-primary: #ffffff;
    --text-on-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.8);
    --bg-primary: #0a0a0a;
    --bg-card: rgba(255, 255, 255, 0.05);
    --border-color: rgba(255, 255, 255, 0.1);
    --success-color: #4CAF50;
    --error-color: #f44336;

    /* Animations */
    --hover-transform: translateY(-5px);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

    /* Typography */
    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.8rem;
    --font-size-sm: 0.9rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.3rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.8rem;
    --font-size-4xl: 2rem;
    --font-size-5xl: 2.5rem;
    --font-size-6xl: 3rem;

    /* Spacing */
    --space-xs: 5px;
    --space-sm: 10px;
    --space-md: 15px;
    --space-lg: 20px;
    --space-xl: 30px;
    --space-2xl: 40px;
    --space-3xl: 50px;
    --space-4xl: 60px;
    --space-5xl: 80px;

    /* Layout */
    --container-max-width: 1200px;
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 20px;
    --border-radius-xl: 50px;
}

/* Light theme variables (restored original name) */
[data-theme="light"] {
    --text-primary: #1a1a1a;
    --text-secondary: rgba(26, 26, 26, 0.7);
    --bg-primary: #ffffff;
    --bg-card: rgba(255, 243, 247, 0.96);
    --border-color: rgba(0, 0, 0, 0.08);
    --box-shadow: 0 8px 24px rgba(2,6,23,0.08);

    /* surface overrides for light */
    --surface-1: rgba(255,255,255,0.02);
    --surface-2: rgba(255,255,255,0.04);
    --surface-3: rgba(255,255,255,0.06);
    --glass-1: rgba(255,255,255,0.06);
    --muted-border: rgba(0,0,0,0.08);
    --muted-border-2: rgba(0,0,0,0.1);
}

/* Media query breakpoints */
@custom-media --mobile (max-width: 768px);
@custom-media --tablet (max-width: 1024px);
@custom-media --desktop (min-width: 1025px);

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
}

/* Variables de tema */
:root {
    --bg-color: #fff1f6;
    --text-color: #222222;
    --primary-color: #667eea;
    --secondary-color: #9ca3af;
    --accent-color: #34d399;
}

[data-theme="dark"] {
    --bg-color: #121212;
    --text-color: #f5f5f5;
    --primary-color: #6366f1;
    --secondary-color: #9ca3af;
    --accent-color: #34d399;
    /* Surfaces and borders for dark theme */
    --surface-1: rgba(255, 255, 255, 0.02);
    --surface-2: rgba(255, 255, 255, 0.04);
    --surface-3: rgba(255, 255, 255, 0.06);
    --glass-1: rgba(0, 0, 0, 0.35);
    --muted-border: rgba(255, 255, 255, 0.08);
    --muted-border-2: rgba(255, 255, 255, 0.1);
}

/* Layout general */
main {
    padding: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

h1, h2, h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

p, li {
    color: var(--text-color);
    margin-bottom: 0.75rem;
}

ul {
    list-style-type: disc;
    padding-left: 1.5rem;
}

/* Secciones */
.hero {
    text-align: center;
    margin: 3rem 0;
}

.features {
    margin: 3rem 0;
}

.legal-content {
    margin: 2rem 0;
}

/* Links */
a {
    color: var(--accent-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Utilidades */
.hidden {
    display: none;
}

.show {
    display: block;
}

/* Typography */
h1 { font-size: clamp(3rem, 8vw, 6rem); }
h2 { font-size: clamp(2.5rem, 5vw, 4rem); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }

/* Links */
a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

/* Lists */
ul, ol {
    list-style: none;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Forms */
input, textarea, select, button {
    font: inherit;
    border: none;
    outline: none;
}

/* Container */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb { background: var(--primary-gradient); border-radius: 4px; }
[data-theme="light"] ::-webkit-scrollbar-track { background: #f0f0f0; }

/* Utility classes */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.grid { display: grid; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }

/* Button Components */
.btn { padding: var(--space-md) var(--space-xl); border-radius: var(--border-radius-xl); font-weight: 600; font-size: var(--font-size-lg); transition: var(--transition); cursor: pointer; display: inline-block; text-align: center; border: none; position: relative; overflow: hidden; }
.btn-primary { background: var(--primary-gradient); color: white; }
.btn-secondary { background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.2); color: white; backdrop-filter: blur(20px); }
.btn:hover { transform: translateY(-3px); box-shadow: var(--box-shadow); }
.btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s; }
.btn:hover::before { left: 100%; }

/* Card Components */
.card { background: var(--bg-card); backdrop-filter: blur(20px); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); transition: var(--transition); position: relative; overflow: hidden; }
.card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--primary-gradient); transform: scaleX(0); transition: transform 0.3s ease; }
.card:hover::before { transform: scaleX(1); }
.card:hover { transform: var(--hover-transform); border-color: rgba(102, 126, 234, 0.3); box-shadow: var(--box-shadow); }
.card-header { padding: var(--space-xl); border-bottom: 1px solid var(--border-color); }
.card-body { padding: var(--space-xl); }
.card-footer { padding: var(--space-xl); border-top: 1px solid var(--border-color); }

/* Section Components */
.section { margin: var(--space-3xl) 0; padding: var(--space-3xl) 0; border-radius: var(--border-radius-md); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; color: var(--text-on-primary); }
.section.visible { opacity: 1; transform: translateY(0); }
.section .container { max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--space-lg); }
.section-title { font-size: clamp(2rem, 4.5vw, 3.2rem); text-align: center; margin-bottom: var(--space-3xl); font-weight: 800; color: var(--text-on-primary); position: relative; }
.section-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: var(--primary-gradient); border-radius: 2px; }

/* Grid Components */
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-2xl); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: var(--space-3xl); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-2xl); }

/* Form Components */
.form-group { margin-bottom: var(--space-xl); }
.form-label { display: block; margin-bottom: var(--space-sm); font-weight: 600; color: var(--text-secondary); }
.form-input, .form-textarea, .form-select { width: 100%; padding: var(--space-md); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); color: var(--text-primary); transition: var(--transition); }
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }
.form-select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23667eea'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right var(--space-md) center; background-size: 15px; }

/* Icon Components */
.icon { width: 100px; height: 100px; background: var(--primary-gradient); border-radius: 50%; margin: 0 auto var(--space-xl); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-5xl); transition: var(--transition); position: relative; }
.icon::after { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border-radius: 50%; background: var(--primary-gradient); opacity: 0; z-index: -1; transition: opacity 0.3s ease; }
.icon:hover { transform: scale(1.1) rotate(5deg); }
.icon:hover::after { opacity: 0.3; animation: pulse 2s infinite; }

/* Loading Components */
.loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-primary); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.5s ease; }
.loading-spinner { width: 50px; height: 50px; border: 3px solid rgba(102, 126, 234, 0.1); border-top: 3px solid #667eea; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto var(--space-lg); }
.loading-text { font-size: var(--font-size-xl); font-weight: 600; opacity: 0; animation: fadeInOut 2s ease-in-out infinite; }

/* Progress Bar */
.progress-bar { position: fixed; top: 0; left: 0; width: 0; height: 4px; background: var(--primary-gradient); z-index: 9999; transition: width 0.1s ease; }

/* Toast Notifications */
.toast { position: fixed; bottom: 100px; right: var(--space-xl); background: var(--primary-gradient); color: white; padding: var(--space-md) var(--space-xl); border-radius: var(--border-radius-sm); box-shadow: var(--box-shadow); transform: translateX(400px); transition: transform 0.3s ease; z-index: 1000; }
.toast.show { transform: translateX(0); }

/* Back to Top Button */
.back-to-top { position: fixed; bottom: var(--space-xl); right: var(--space-xl); width: 50px; height: 50px; background: var(--primary-gradient); border: none; border-radius: 50%; color: white; font-size: var(--font-size-2xl); cursor: pointer; transition: var(--transition); opacity: 0; visibility: hidden; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { transform: translateY(-5px) scale(1.1); box-shadow: var(--box-shadow); }

/* Theme Toggle */
.theme-toggle { position: fixed; bottom: calc(var(--space-xl) + 80px); right: var(--space-xl); width: 50px; height: 50px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-2xl); cursor: pointer; transition: var(--transition); z-index: 10000; }
.theme-toggle:hover { background: var(--primary-gradient); transform: scale(1.1); }

/* Language Toggle */
.language-toggle { position: fixed; top: var(--space-xl); right: calc(var(--space-xl) + 60px + 10px); width: 44px; height: 44px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-base); font-weight: 600; cursor: pointer; transition: var(--transition); z-index: 10000; }
.language-toggle:hover { background: var(--primary-gradient); transform: scale(1.05); }

/* Hero Section */
.hero-section { min-height: 100vh; background: var(--primary-gradient); border: 2px solid var(--border-color); border-radius: var(--border-radius-md); display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; margin: var(--space-md); }
.hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>'); opacity: 0.5; }
.hero-content { position: relative; z-index: 2; animation: fadeInUp 1s ease-out; max-width: 900px; padding: var(--space-lg); }
.hero-title { font-size: clamp(3rem, 8vw, 6rem); font-weight: 900; margin-bottom: var(--space-lg); background: linear-gradient(45deg, #fff, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.02em; }
.typewriter { font-size: clamp(1.2rem, 3vw, 2rem); margin-bottom: var(--space-2xl); opacity: 0.9; font-weight: 300; min-height: 60px; }
.typewriter-text::after { content: '|'; animation: blink 1s infinite; color: #667eea; }

/* Floating Elements */
.floating-elements { position: absolute; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 1; }
.floating-element { position: absolute; background: rgba(255, 255, 255, 0.06); border-radius: 50%; animation: float 10s ease-in-out infinite; opacity: 0.6; }
.floating-element:nth-child(1) { width: 60px; height: 60px; top: 18%; left: 8%; animation-delay: -2s; }
.floating-element:nth-child(2) { width: 90px; height: 90px; top: 62%; right: 12%; animation-delay: -4s; }
.floating-element:nth-child(3) { width: 50px; height: 50px; bottom: 28%; left: 78%; animation-delay: -6s; }

/* Hero Particles */
.hero-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.particle { position: absolute; width: 4px; height: 4px; background: rgba(118,75,162,0.8); border-radius: 50%; animation: particleFloat 6s ease-in-out infinite; }

/* Presentation Section */
.presentation-section { background: var(--primary-gradient); border: 2px solid var(--border-color); }
.presentation-text { font-size: var(--font-size-xl); opacity: 0.9; line-height: 1.8; }
.presentation-text p { margin-bottom: var(--space-xl); transform: translateX(-30px); opacity: 0; animation: slideInLeft 0.8s ease forwards; }
.presentation-text p:nth-child(2) { animation-delay: 0.3s; }
.presentation-text p:nth-child(3) { animation-delay: 0.6s; }
.presentation-visual { height: 450px; background: var(--primary-gradient); border-radius: var(--border-radius-lg); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-5xl); font-weight: bold; position: relative; overflow: hidden; }
.presentation-visual::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(transparent, rgba(255,255,255,0.1), transparent); animation: rotate 4s linear infinite; }

/* About Section */
.about-section { background: rgba(227, 98, 231, 0.15); border: 2px solid rgba(227, 98, 231, 0.2); }
.about-card { padding: var(--space-2xl); transition: var(--transition); }
.about-card h3 { font-size: var(--font-size-2xl); margin-bottom: var(--space-lg); font-weight: 700; display: flex; align-items: center; gap: var(--space-sm); }

/* Stats Section */
.stats-section { background: var(--primary-gradient); border: 2px solid var(--border-color); margin: var(--space-4xl) var(--space-lg); padding: var(--space-5xl) 0; border-radius: var(--border-radius-md); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2xl); text-align: center; }
.stat-item { padding: var(--space-xl) var(--space-lg); }
.stat-number { font-size: var(--font-size-6xl); font-weight: 900; background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: var(--space-sm); display: block; }
.stat-label { font-size: var(--font-size-lg); opacity: 0.8; font-weight: 500; }

/* Services Section */
.services-section { background: var(--primary-gradient); border: 2px solid rgba(255, 255, 255, 0.06); }
.service-card { padding: var(--space-3xl) var(--space-2xl); text-align: center; transition: var(--transition); cursor: pointer; }
.service-card h3 { font-size: var(--font-size-2xl); margin-bottom: var(--space-lg); font-weight: 700; }

/* Testimonials Section */
.testimonials-section { background: var(--primary-gradient); border: 2px solid var(--border-color); margin: var(--space-4xl) var(--space-lg); padding: var(--space-5xl) 0; border-radius: var(--border-radius-md); }
.testimonials-slider { position: relative; overflow: hidden; max-width: 800px; margin: 0 auto; }
.testimonial-item { text-align: center; padding: var(--space-2xl); opacity: 0; transform: translateX(100%); transition: all 0.5s ease; position: absolute; width: 100%; }
.testimonial-item.active { opacity: 1; transform: translateY(0); position: relative; }
.testimonial-text { font-size: var(--font-size-xl); font-style: italic; margin-bottom: var(--space-xl); line-height: 1.8; quotes: "“" "”" "‘" "’"; }
.testimonial-text::before { content: open-quote; font-size: var(--font-size-6xl); line-height: 0; vertical-align: -0.4em; color: #667eea; opacity: 0.5; }
.testimonial-text::after { content: close-quote; font-size: var(--font-size-6xl); line-height: 0; vertical-align: -0.4em; color: #667eea; opacity: 0.5; }
.testimonial-author { font-weight: 600; color: #667eea; }
.testimonial-company { opacity: 0.7; margin-top: var(--space-xs); }
.testimonial-controls { display: flex; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xl); }
.testimonial-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: var(--transition); }
.testimonial-dot.active { background: #667eea; transform: scale(1.2); }

/* Portfolio Section */
.portfolio-section { background: var(--primary-gradient); border: 2px solid var(--border-color); }
.portfolio-filter { display: flex; justify-content: center; gap: var(--space-lg); margin-bottom: var(--space-3xl); flex-wrap: wrap; }
.filter-btn { padding: 12px var(--space-xl); background: rgba(255, 255, 255, 0.1); border: 1px solid var(--border-color); border-radius: var(--border-radius-xl); color: var(--text-primary); cursor: pointer; transition: var(--transition); font-weight: 500; }
.filter-btn:hover, .filter-btn.active { background: var(--primary-gradient); border-color: transparent; transform: translateY(-2px); }
.portfolio-item { border-radius: var(--border-radius-lg); overflow: hidden; transition: var(--transition); opacity: 1; transform: scale(1); }
.portfolio-item.hidden { opacity: 0; transform: scale(0.8); pointer-events: none; }
.portfolio-item:hover { transform: scale(1.05) rotate(1deg); }
.portfolio-image { height: 250px; background: var(--primary-gradient); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-3xl); font-weight: bold; position: relative; overflow: hidden; }
.portfolio-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition); }
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-links { display: flex; gap: var(--space-md); }
.portfolio-link { width: 50px; height: 50px; background: var(--primary-gradient); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; font-size: var(--font-size-2xl); transition: var(--transition); }
.portfolio-link:hover { transform: scale(1.1); }
.portfolio-info { padding: var(--space-xl); background: var(--bg-card); }
.portfolio-info h3 { font-size: var(--font-size-xl); margin-bottom: var(--space-md); font-weight: 700; }
.portfolio-tags { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); }
.portfolio-tag { background: rgba(102, 126, 234, 0.2); color: #667eea; padding: var(--space-xs) 12px; border-radius: var(--space-md); font-size: var(--font-size-xs); font-weight: 500; }

/* Process Section */
.process-section { background: var(--primary-gradient); border: 2px solid var(--border-color); }
.process-step { text-align: center; padding: var(--space-2xl) var(--space-xl); transition: var(--transition); cursor: pointer; position: relative; }
.process-step::before { content: ''; position: absolute; top: 50%; right: -20px; width: 40px; height: 2px; background: var(--primary-gradient); transform: translateY(-50%); opacity: 0.3; }
.process-step:last-child::before { display: none; }
.process-step:hover { transform: var(--hover-transform); }
.step-number { width: 80px; height: 80px; background: var(--primary-gradient); border-radius: 50%; margin: 0 auto var(--space-xl); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-4xl); font-weight: bold; transition: var(--transition); position: relative; }
.step-number::after { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border-radius: 50%; border: 2px solid transparent; background: linear-gradient(45deg, #667eea, #764ba2) border-box; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; }
.process-step:hover .step-number { transform: scale(1.2); }
.process-step:hover .step-number::after { opacity: 1; }
.process-step h3 { font-size: var(--font-size-xl); margin-bottom: var(--space-lg); font-weight: 700; }

/* Blog Section */
.blog-section { background: var(--primary-gradient); border: 2px solid var(--border-color); }
.blog-card { border-radius: var(--border-radius-lg); overflow: hidden; transition: var(--transition); cursor: pointer; }
.blog-card:hover { transform: translateY(-10px); }
.blog-image { height: 220px; background: var(--primary-gradient); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-2xl); font-weight: 600; position: relative; overflow: hidden; }
.blog-date { position: absolute; top: var(--space-md); right: var(--space-md); background: rgba(0, 0, 0, 0.8); padding: var(--space-sm) 12px; border-radius: var(--border-radius-lg); font-size: var(--font-size-sm); font-weight: 500; }
.blog-content { padding: var(--space-xl); background: var(--bg-card); }
.blog-content h3 { font-size: var(--font-size-xl); margin-bottom: var(--space-md); font-weight: 700; }
.blog-excerpt { opacity: 0.8; margin-bottom: var(--space-lg); line-height: 1.6; }
.blog-meta { display: flex; justify-content: space-between; align-items: center; font-size: var(--font-size-sm); opacity: 0.6; }
.read-more { color: #667eea; text-decoration: none; font-weight: 500; transition: var(--transition); }
.read-more:hover { color: #764ba2; }

/* Blog Post Page */
.blog-post-wrapper { background: var(--primary-gradient); padding: var(--space-5xl) 0; }
.blog-post { display: grid; gap: var(--space-3xl); background: var(--bg-card); border-radius: var(--border-radius-xl); padding: var(--space-3xl); border: 1px solid var(--border-color); box-shadow: var(--box-shadow); }
.blog-post .blog-image { height: auto; background: transparent; display: block; }
.blog-post .blog-image img { width: 100%; height: auto; border-radius: var(--border-radius-lg); object-fit: cover; }
.blog-post .blog-content { background: transparent; padding: 0; }
.blog-post-header { margin-bottom: var(--space-2xl); }
.blog-post-date { font-size: var(--font-size-sm); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-sm); }
.blog-post .blog-title { font-size: var(--font-size-4xl); margin-bottom: var(--space-md); }
.blog-post .blog-excerpt { font-size: var(--font-size-lg); opacity: 0.8; }
.blog-post p { margin-bottom: var(--space-lg); line-height: 1.8; }
.blog-post ul { margin: var(--space-lg) 0; padding-left: var(--space-2xl); }
.blog-post li { margin-bottom: var(--space-sm); line-height: 1.7; }

@media (min-width: 992px) {
  .blog-post { grid-template-columns: 1fr 1fr; align-items: flex-start; }
}

/* FAQ Section */
.faq-section { background: var(--primary-gradient); border: 2px solid var(--border-color); }
.faq-item { background: var(--bg-card); margin-bottom: var(--space-xl); border-radius: var(--border-radius-md); overflow: hidden; border: 1px solid var(--border-color); transition: var(--transition); }
.faq-item:hover { border-color: rgba(102, 126, 234, 0.3); }
.faq-question { padding: var(--space-xl); cursor: pointer; font-weight: 600; display: flex; justify-content: space-between; align-items: center; transition: var(--transition); font-size: var(--font-size-lg); }
.faq-question:hover { background: rgba(255, 255, 255, 0.08); }
.faq-answer { padding: 0 var(--space-xl) var(--space-xl); opacity: 0.8; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; }
.faq-item.active .faq-answer { max-height: 200px; padding: 0 var(--space-xl) var(--space-xl); }
.faq-toggle { font-size: var(--font-size-3xl); transform: rotate(0deg); transition: transform 0.3s ease; color: #667eea; }
.faq-item.active .faq-toggle { transform: rotate(45deg); }

/* Newsletter Section */
.newsletter-section { background: var(--primary-gradient); border: 2px solid var(--border-color); margin: var(--space-4xl) var(--space-lg); padding: var(--space-5xl) 0; border-radius: var(--border-radius-md); text-align: center; }
.newsletter-form { max-width: 500px; margin: 0 auto; display: flex; gap: var(--space-md); flex-wrap: wrap; justify-content: center; }
.newsletter-input { flex: 1; min-width: 250px; padding: var(--space-md) var(--space-lg); background: rgba(255, 255, 255, 0.1); border: 1px solid var(--border-color); border-radius: var(--border-radius-xl); color: var(--text-primary); font-family: inherit; transition: var(--transition); }
.newsletter-input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }
.newsletter-btn { padding: var(--space-md) var(--space-xl); background: var(--primary-gradient); border: none; border-radius: var(--border-radius-xl); color: white; font-weight: 600; cursor: pointer; transition: var(--transition); white-space: nowrap; }
.newsletter-btn:hover { transform: translateY(-2px); box-shadow: var(--box-shadow); }
.newsletter-btn[disabled] { opacity: 0.65; cursor: not-allowed; transform: none; box-shadow: none; }

/* Contact Section */
.contact-section { background: var(--primary-gradient); border: 2px solid var(--border-color); }
.contact-form { background: var(--bg-card); padding: var(--space-2xl); border-radius: var(--border-radius-lg); border: 1px solid var(--border-color); }
.contact-info { display: flex; flex-direction: column; gap: var(--space-xl); }
.contact-item { background: var(--bg-card); padding: var(--space-xl); border-radius: var(--border-radius-md); border: 1px solid var(--border-color); transition: var(--transition); }
.contact-item:hover { transform: var(--hover-transform); }
.contact-item h3 { font-size: var(--font-size-xl); margin-bottom: var(--space-md); font-weight: 700; }

/* Social Links */
.social-links { display: flex; gap: var(--space-lg); margin-top: var(--space-lg); justify-content: center; }
.social-link { width: 50px; height: 50px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-primary); text-decoration: none; font-size: var(--font-size-2xl); transition: var(--transition); }
.social-link:hover { background: var(--primary-gradient); transform: translateY(-3px); box-shadow: var(--box-shadow); }

/* Footer */
.footer { background: #000; padding: var(--space-4xl) 0 var(--space-xl); margin-top: var(--space-5xl); border-top: 1px solid var(--border-color); }
.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-2xl); margin-bottom: var(--space-2xl); }
.footer-col h3 { font-size: var(--font-size-xl); margin-bottom: var(--space-lg); font-weight: 700; }
.footer-col a { color: var(--text-secondary); text-decoration: none; display: block; margin-bottom: var(--space-sm); transition: var(--transition); }
.footer-col a:hover { color: #667eea; transform: translateX(5px); }
.footer-bottom { text-align: center; padding-top: var(--space-xl); border-top: 1px solid var(--border-color); color: var(--text-secondary); }

/* Legal Pages */
.legal-section { background: var(--primary-gradient); border: 2px solid var(--border-color); margin: var(--space-4xl) var(--space-lg); padding: var(--space-5xl) 0; border-radius: var(--border-radius-md); }
.legal-content { max-width: 900px; margin: 0 auto; padding: 0 var(--space-lg); }
.legal-content h1 { font-size: var(--font-size-5xl); margin-bottom: var(--space-xl); background: linear-gradient(45deg, #fff, #667eea); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.legal-content h2 { font-size: var(--font-size-3xl); margin: var(--space-2xl) 0 var(--space-lg); color: #667eea; }
.legal-content h3 { font-size: var(--font-size-xl); margin: var(--space-xl) 0 var(--space-md); color: #667eea; }
.legal-content p, .legal-content ul { margin-bottom: var(--space-lg); line-height: 1.8; }
.legal-content ul { padding-left: var(--space-lg); }
.legal-content li { margin-bottom: var(--space-sm); }
.legal-content table { width: 100%; border-collapse: collapse; margin: var(--space-xl) 0; }
.legal-content th, .legal-content td { padding: 12px var(--space-md); text-align: left; border-bottom: 1px solid var(--border-color); }
.legal-content th { background-color: rgba(102, 126, 234, 0.2); }
.update-date { font-style: italic; opacity: 0.8; margin-bottom: var(--space-xl); }

/* Floating Widgets Styles */
.whatsapp-widget { position: fixed; bottom: 20px; right: 20px; z-index: 9998; cursor: pointer; transition: var(--transition); }
.whatsapp-button { width: 60px; height: 60px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4); transition: var(--transition); border: none; color: white; font-size: 28px; }
.whatsapp-button:hover { background: #128C7E; transform: scale(1.1); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6); }
.whatsapp-button::before { content: ''; position: absolute; width: 60px; height: 60px; background: #25D366; border-radius: 50%; animation: whatsappPulse 2s infinite; z-index: -1; }
@keyframes whatsappPulse { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 0.4; } 100% { transform: scale(1); opacity: 0.8; } }
.whatsapp-tooltip { position: absolute; right: 70px; top: 50%; transform: translateY(-50%); background: var(--bg-card); border: 1px solid var(--border-color); padding: 8px 12px; border-radius: 8px; white-space: nowrap; font-size: 0.9rem; opacity: 0; visibility: hidden; transition: var(--transition); backdrop-filter: blur(10px); }
.whatsapp-tooltip::after { content: ''; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); border: 4px solid transparent; border-left-color: var(--border-color); }
.whatsapp-widget:hover .whatsapp-tooltip { opacity: 1; visibility: visible; }
.chatbot-widget { position: fixed; bottom: 20px; left: 20px; z-index: 9999; font-family: var(--font-primary); }
.chatbot-button { width: 60px; height: 60px; background: var(--primary-gradient); border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--box-shadow); transition: var(--transition); color: white; font-size: 24px; position: relative; }
.chatbot-button:hover { transform: scale(1.1); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); }
.chatbot-button::before { content: ''; position: absolute; width: 60px; height: 60px; background: var(--primary-gradient); border-radius: 50%; animation: chatbotPulse 3s infinite; z-index: -1; }
@keyframes chatbotPulse { 0% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.3); opacity: 0.2; } 100% { transform: scale(1); opacity: 0.7; } }
.chatbot-notification { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; background: #ff4757; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; animation: bounce 2s infinite; }
.chatbot-container { position: absolute; bottom: 80px; left: 0; width: 350px; height: 500px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; display: flex; flex-direction: column; transform: scale(0.8) translateY(20px); opacity: 0; visibility: hidden; transition: var(--transition); backdrop-filter: blur(20px); box-shadow: var(--box-shadow); overflow: hidden; }
.chatbot-container.active { transform: scale(1) translateY(0); opacity: 1; visibility: visible; }
.chatbot-header { background: var(--primary-gradient); color: white; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; }
.chatbot-header-info { display: flex; align-items: center; gap: 10px; }
.chatbot-avatar { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.chatbot-status { display: flex; flex-direction: column; }
.chatbot-name { font-weight: 600; font-size: 1rem; }
.chatbot-online { font-size: 0.8rem; opacity: 0.9; display: flex; align-items: center; gap: 5px; }
.chatbot-online::before { content: ''; width: 8px; height: 8px; background: #4CAF50; border-radius: 50%; animation: blink 2s infinite; }
.chatbot-close { background: none; border: none; color: white; font-size: 20px; cursor: pointer; padding: 5px; border-radius: 4px; transition: var(--transition); }
.chatbot-close:hover { background: rgba(255, 255, 255, 0.1); }
.chatbot-messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
.chatbot-messages::-webkit-scrollbar { width: 4px; }
.chatbot-messages::-webkit-scrollbar-thumb { background: var(--primary-gradient); border-radius: 2px; }
.message { display: flex; align-items: flex-start; gap: 10px; animation: messageSlideIn 0.3s ease-out; }
.message.user { flex-direction: row-reverse; }
@keyframes messageSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.message-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.message.bot .message-avatar { background: var(--primary-gradient); color: white; }
.message.user .message-avatar { background: #4CAF50; color: white; }
.message-content { background: var(--bg-primary); border: 1px solid var(--border-color); padding: 12px 16px; border-radius: 16px; max-width: 80%; word-wrap: break-word; line-height: 1.4; }
.message.user .message-content { background: var(--primary-gradient); color: white; border-color: transparent; }
.message-time { font-size: 0.7rem; opacity: 0.6; margin-top: 4px; }
.chatbot-typing { display: flex; align-items: center; gap: 10px; opacity: 0; visibility: hidden; transition: var(--transition); }
.chatbot-typing.active { opacity: 1; visibility: visible; }
.typing-indicator { display: flex; gap: 4px; padding: 12px 16px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 16px; }
.typing-dot { width: 8px; height: 8px; background: var(--text-secondary); border-radius: 50%; animation: typingDot 1.4s infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-10px); opacity: 1; } }
.chatbot-input-area { padding: 15px 20px; border-top: 1px solid var(--border-color); background: var(--bg-primary); }
.chatbot-input-container { display: flex; gap: 10px; align-items: flex-end; }
.chatbot-input { flex: 1; padding: 12px 16px; border: 1px solid var(--border-color); border-radius: 20px; background: var(--bg-card); color: var(--text-primary); resize: none; min-height: 20px; max-height: 100px; font-family: inherit; font-size: 0.9rem; transition: var(--transition); }
.chatbot-input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }
.chatbot-send { width: 40px; height: 40px; background: var(--primary-gradient); border: none; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); font-size: 16px; }
.chatbot-send:hover { transform: scale(1.1); }
.chatbot-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.quick-replies { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.quick-reply { background: rgba(102, 126, 234, 0.1); border: 1px solid rgba(102, 126, 234, 0.3); color: #667eea; padding: 6px 12px; border-radius: 16px; font-size: 0.8rem; cursor: pointer; transition: var(--transition); }
.quick-reply:hover { background: var(--primary-gradient); color: white; border-color: transparent; }

/* Animations */
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes fadeInOut { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInLeft { to { transform: translateX(0); opacity: 1; } }
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.3; } 50% { transform: translateY(-20px) rotate(180deg); opacity: 0.8; } }
@keyframes particleFloat { 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0; } 50% { transform: translateY(-20px) rotate(180deg); opacity: 1; } }

/* Lightbox styles */
#lightbox { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10050; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 220ms ease; }
#lightbox.show { visibility: visible; opacity: 1; pointer-events: auto; }
#lightbox .lb-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); opacity: 0; transition: opacity 220ms ease; }
#lightbox.show .lb-overlay { opacity: 1; }
#lightbox .lb-content { position: relative; max-width: 1000px; width: calc(100% - 40px); background: var(--bg-card); border-radius: 12px; padding: 1rem; box-shadow: 0 30px 80px rgba(2,6,23,0.6); display: flex; align-items: center; transform: translateY(8px) scale(0.98); opacity: 0; transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease; }
#lightbox.show .lb-content { transform: translateY(0) scale(1); opacity: 1; }
#lightbox .lb-inner { display: flex; gap: 1rem; align-items: flex-start; width: 100%; }
#lightbox .lb-media { flex: 1 1 60%; display: flex; align-items: center; justify-content: center; }
#lightbox .lb-media img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 8px; }
#lightbox .lb-meta { flex: 1 1 40%; color: var(--text-color); }
#lightbox .lb-title { margin: 0 0 0.5rem; color: var(--text-on-primary); }
#lightbox .lb-desc { margin: 0 0 1rem; color: var(--secondary-color); }
#lightbox .lb-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
#lightbox .lb-action { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); color: #fff; border-radius: 8px; text-decoration: none; }
#lightbox .lb-close { position: absolute; top: 8px; right: 12px; background: transparent; border: none; font-size: 28px; color: var(--secondary-color); cursor: pointer; }
#lightbox .lb-prev, #lightbox .lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.15); border: none; color: #fff; padding: 0.5rem 0.75rem; font-size: 18px; border-radius: 6px; cursor: pointer; }
#lightbox .lb-prev { left: -20px; }
#lightbox .lb-next { right: -20px; }
@media (max-width: 768px) {
  #lightbox .lb-inner { flex-direction: column; }
  #lightbox .lb-media { order: 1; }
  #lightbox .lb-meta { order: 2; }
  #lightbox .lb-prev { left: 10px; }
  #lightbox .lb-next { right: 10px; }
}
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .section { margin: var(--space-xl) var(--space-sm); padding: var(--space-4xl) 0; }
  .container { padding: 0 var(--space-sm); }
  .theme-toggle { bottom: calc(var(--space-xl) + 70px); right: var(--space-xl); }
}
@media (max-width: 480px) {
  .grid-auto,
  .grid-3 { grid-template-columns: 1fr; }
  .theme-toggle { right: var(--space-sm); bottom: calc(var(--space-xl) + 70px); }
}

/* Utility classes added to replace previous inline styles */
.icon-trailing-space { margin-left: 10px; }
.newsletter-note { text-align: center; margin-bottom: 40px; opacity: 0.9; }
.newsletter-note a { color: var(--accent-color); font-weight: 600; }
.newsletter-contact { display: inline-block; margin-top: 12px; font-size: 0.95rem; }
.table-scroll { overflow-x: auto; }
.accent-link { color: #667eea; }

/* Skip link for keyboard users */
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 10010; }
.skip-link:focus, .skip-link:active { left: 16px; top: 16px; width: auto; height: auto; padding: 8px 12px; background: var(--primary-gradient); color: white; border-radius: 8px; text-decoration: none; }

/* Focus visible for interactive elements */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(102,126,234,0.9);
  outline-offset: 2px;
}

/* Ensure focus styles for nav links */
.nav-link:focus { outline: none; }
.nav-link:focus-visible { outline: 3px solid rgba(102,126,234,0.9); border-radius: 6px; }

/* Global visible focus ring for keyboard users */
:focus { outline: none; }
:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  box-shadow: 0 0 0 4px rgba(118,75,162,0.22), 0 0 0 6px rgba(102,126,234,0.12);
  border-radius: 8px;
}

/* Fallback: when keyboard navigation detected, apply visible focus for all :focus */
.user-is-tabbing :focus {
  box-shadow: 0 0 0 4px rgba(118,75,162,0.22), 0 0 0 6px rgba(102,126,234,0.12);
  border-radius: 8px;
}

/* Ensure small circular buttons get appropriate focus ring */
button:focus-visible, .social-link:focus-visible, .back-to-top:focus-visible, .theme-toggle:focus-visible, #button-floating:focus-visible,
.user-is-tabbing button:focus, .user-is-tabbing .social-link:focus, .user-is-tabbing .back-to-top:focus, .user-is-tabbing .theme-toggle:focus, .user-is-tabbing #button-floating:focus {
  box-shadow: 0 0 0 4px rgba(118,75,162,0.28), 0 0 0 6px rgba(102,126,234,0.12);
  border-radius: 50%;
}

/* Form controls focus */
.form-input:focus-visible, .form-textarea:focus-visible, .form-select:focus-visible, .newsletter-input:focus-visible,
.user-is-tabbing .form-input:focus, .user-is-tabbing .form-textarea:focus, .user-is-tabbing .form-select:focus, .user-is-tabbing .newsletter-input:focus {
  box-shadow: 0 0 0 4px rgba(102,126,234,0.18);
  border-color: rgba(102,126,234,0.6);
}

/* Make sure links that changed background remain visible when focused */
a.portfolio-link:focus-visible, .filter-btn:focus-visible, .quick-reply:focus-visible, .prefill-btn:focus-visible,
.user-is-tabbing a.portfolio-link:focus, .user-is-tabbing .filter-btn:focus, .user-is-tabbing .quick-reply:focus, .user-is-tabbing .prefill-btn:focus {
  box-shadow: 0 0 0 4px rgba(118,75,162,0.18);
  transform: none;
}

/* Recaptcha container minimal styling */
.recaptcha-container { min-height: 76px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); }

/* Apply 'Sobre Nosotros' (About) visual style to all sections */
.section {
  background: rgba(227, 98, 231, 0.15);
  border: 2px solid rgba(227, 98, 231, 0.2);
  color: var(--text-on-primary);
}

/* Ensure specific sections inherit the about-section appearance */
.hero-section,
.presentation-section,
.stats-section,
.about-section,
.services-section,
.testimonials-section,
.portfolio-section,
.process-section,
.faq-section,
.newsletter-section,
.contact-section,
.legal-section,
.blog-section {
  background: rgba(227, 98, 231, 0.15);
  border: 2px solid rgba(227, 98, 231, 0.2);
}

/* Make cards follow the about-card spacing and heading styles */
.card { padding: var(--space-2xl); transition: var(--transition); }
.card h3, .about-card h3 { font-size: var(--font-size-2xl); margin-bottom: var(--space-lg); font-weight: 700; display: flex; align-items: center; gap: var(--space-sm); }

/* Ensure inputs and cards remain readable on the purple surface */
.form-input, .form-textarea, .form-select, .contact-item, .portfolio-info, .blog-content { background: rgba(255,255,255,0.04); border: 1px solid rgba(227,98,231,0.06); }

/* Adjust hero overrides to keep typography consistent */
.hero-title, .section-title { color: var(--text-on-primary); }

/* Keep media query behavior intact */
@media (max-width: 768px) {
  .section { margin: var(--space-xl) var(--space-sm); padding: var(--space-4xl) 0; }
}

/* Mobile adjustments: prevent floating action buttons from overlapping */
@media (max-width: 768px) {
  /* make floating buttons slightly smaller and add spacing from edges */
  .whatsapp-button, .chatbot-button { width: 48px; height: 48px; font-size: 20px; }
  .whatsapp-widget { right: 16px; bottom: 16px; }
  .chatbot-widget { left: 16px; bottom: 16px; }

  /* raise back-to-top above other floating buttons */
  .back-to-top { right: 16px; bottom: 86px; width: 44px; height: 44px; font-size: 20px; }

  /* ensure chat panel fits mobile screens when opened */
  .chatbot-container { position: fixed; bottom: 76px; left: 16px; right: 16px; width: calc(100% - 32px); max-width: none; height: 60vh; border-radius: 12px; }

  /* explicit stacking order to avoid accidental overlap */
  .whatsapp-widget { z-index: 10005; }
  .chatbot-widget { z-index: 10006; }
  .back-to-top { z-index: 10007; }

  /* Move theme & language toggles to top-left to avoid colliding with mobile menu on the right */
  .theme-toggle { top: 72px; left: 12px; right: auto; z-index: 10020; }
  .language-toggle { top: 72px; left: 72px; right: auto; z-index: 10020; }

  /* Ensure mobile menu button stays on the right and above toggles */
  .mobile-menu-btn { top: 12px; right: 12px; z-index: 10030; }
}