:root {
    /* Color Palette */
    --bg-dark: #020c1b;
    --bg-secondary: #0a192f;
    --bg-tertiary: #112240;
    --text-primary: #ccd6f6;
    --text-secondary: #8892b0;
    --accent-color: #64ffda;
    /* Cyan/Teal for high contrast technological feel */
    --accent-glow: rgba(100, 255, 218, 0.1);
    --white: #e6f1ff;
    --brand-primary: #004B8D;
    /* Approximate 'Clan oscuro 2' / Dark Cyan-Blue */
    --blue-gradient: linear-gradient(135deg, #0a192f 0%, #112240 100%);

    /* Typography */
    --font-main: 'Outfit', sans-serif;
    --font-logo: 'Avenir', 'Segoe UI', Roboto, sans-serif;

    /* Transitions */
    --transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-main);
    line-height: 1.6;
    overflow-x: hidden;
}

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

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

section {
    padding: 100px 0;
}

.highlight {
    color: var(--accent-color);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    border: 1px solid transparent;
}

.btn-primary {
    background-color: transparent;
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.btn-primary:hover {
    background-color: var(--accent-glow);
}

.btn-outline {
    color: var(--text-primary);
    border-color: var(--text-primary);
    margin-left: 1rem;
}

.btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.btn-block {
    display: block;
    width: 100%;
}

/* Header & Navigation */
#main-header {
    height: 80px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(2, 12, 27, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-primary);
    font-family: var(--font-logo);
    display: flex;
    align-items: center;
    gap: 8px;
    /* Reduced from 15px */
    letter-spacing: 0.5px;
    word-spacing: -3px;
    /* Tigthens space between Roble and Azul */
}

.highlight {
    color: var(--brand-primary);
    /* Ensuring consistency */
}

/* Specific highlight override for text if needed, 
   but user said "same color as letter" for circle. 
   If "Roble" is white and "Azul" is highlighted, 
   or if whole logo is brand color. 
   Assuming standard usage, "Roble Azul" text should be readable. 
   If brand-primary is too dark for dark bg, we might need adjustments. 
   User said "color Clan oscuro 2" for the font. 
   If background is dark, dark font is bad. 
   However, assuming user intent override. 
   I will set a light stroke or careful background if needed, 
   but strict instruction is "color Clan oscuro 2". 
   Replacing .logo color above. 
*/

/* .logo-container removed as per request */

.logo-img {
    height: 50px;
    width: auto;
    object-fit: contain;
    /* Removed blend modes and filters as image is transparent PNG */
}

#navbar ul {
    display: flex;
    gap: 30px;
}

#navbar a {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-primary);
}

#navbar a:hover {
    color: var(--accent-color);
}

.btn-nav {
    border: 1px solid var(--accent-color);
    padding: 8px 16px;
    border-radius: 4px;
    color: var(--accent-color) !important;
}

.btn-nav:hover {
    background-color: var(--accent-glow);
}

.menu-toggle {
    display: none;
    font-size: 1.5rem;
    color: var(--white);
    cursor: pointer;
}

/* Hero Section */
#hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centering content horizontally */
    position: relative;
    background-color: #020c1b;
    background-image: url('../assets/images/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    /* Centering text */
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 12, 27, 0.5);
    /* Slight dark overlay to ensure text readability */
    z-index: 0;
}

.hero-content {
    max-width: 900px;
    /* Increased max-width for better balance */
    z-index: 1;
    /* Ensure content is above overlay */
    position: relative;
}

#hero h1 {
    font-size: 4rem;
    line-height: 1.1;
    color: var(--white);
    margin-bottom: 20px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    /* Added text shadow for impact */
}

#hero .highlight {
    color: var(--accent-color);
    /* Use bright cyan/teal for hero contrast, or #33C5FF */
    text-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
    /* Glowing effect */
}

.hero-subtitle {
    font-size: 1.5rem;
    /* Slightly larger */
    color: var(--text-primary);
    /* Use brighter text for better contrast against image */
    max-width: 800px;
    margin: 0 auto 40px auto;
    /* Centering margin */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* About Section */
#about {
    background-color: var(--bg-secondary);
}

.quote-container {
    text-align: center;
    margin-bottom: 60px;
    padding: 40px;
    border: 1px solid var(--bg-tertiary);
    border-radius: 8px;
    background-color: var(--bg-tertiary);
}

blockquote {
    font-size: 1.5rem;
    font-style: italic;
    color: var(--white);
    margin-bottom: 10px;
}

cite {
    color: var(--accent-color);
    font-style: normal;
    font-weight: 600;
}

.about-content h2 {
    font-size: 2rem;
    color: var(--white);
    margin-bottom: 20px;
    display: inline-block;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 10px;
}

.about-content p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    max-width: 800px;
}

/* Services Section */
#services {
    background-color: var(--bg-dark);
}

.section-header {
    margin-bottom: 60px;
    text-align: center;
}

.section-header h2 {
    font-size: 2.5rem;
    color: var(--white);
    margin-bottom: 10px;
}

.section-header p {
    color: var(--accent-color);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
}

.service-card {
    background-color: var(--bg-tertiary);
    padding: 30px;
    border-radius: 6px;
    transition: var(--transition);
    cursor: default;
    box-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
}

.service-card:hover {
    transform: translateY(-7px);
    background-color: #172a45;
    /* Slightly lighter than tertiary */
}

.icon-box {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 20px;
}

.service-card h3 {
    color: var(--white);
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.service-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Alliances Section */
#alliances {
    background-color: var(--bg-secondary);
    text-align: center;
}

#alliances h2 {
    color: var(--white);
    margin-bottom: 50px;
    font-size: 2rem;
}

.partners-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
}

.partner-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 220px;
    padding: 30px;
    background-color: var(--bg-tertiary);
    border-radius: 8px;
    transition: var(--transition);
    border: 1px solid transparent;
    /* cleaner than dashed */
}

.partner-item:hover {
    transform: translateY(-5px);
    background-color: #172a45;
    border-color: var(--accent-color);
}

.partner-logo {
    height: 60px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 20px;
    filter: grayscale(100%) opacity(0.7);
    transition: var(--transition);
}

.partner-item:hover .partner-logo {
    filter: grayscale(0%) opacity(1);
}

.partner-item span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

/* Contact Section */
#contact {
    background-color: var(--bg-dark);
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.contact-info h2 {
    font-size: 2.5rem;
    color: var(--white);
    margin-bottom: 10px;
}

.contact-info>p {
    color: var(--text-secondary);
    margin-bottom: 40px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}

.info-item i {
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-right: 20px;
    margin-top: 5px;
}

.info-item h4 {
    color: var(--white);
    margin-bottom: 5px;
}

.info-item p {
    color: var(--text-secondary);
}

.contact-form {
    background-color: var(--bg-tertiary);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
}

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

.form-group label {
    display: block;
    color: var(--white);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    background-color: #162441;
    /* Slightly lighter than tertiary inputs */
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 12px;
    color: var(--text-primary);
    font-family: var(--font-main);
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* Footer */
footer {
    background-color: #020c1b;
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    color: var(--text-secondary);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.footer-logo {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--white);
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a:hover {
    color: var(--accent-color);
}

.copyright {
    font-size: 0.8rem;
    margin-top: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    #navbar {
        display: none;
        /* Mobile menu logic needs JS, simpler for now hidden or stacked */
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: var(--bg-tertiary);
        padding: 20px;
        flex-direction: column;
    }

    #navbar.active {
        display: flex;
    }

    #navbar ul {
        flex-direction: column;
        align-items: center;
    }

    .menu-toggle {
        display: block;
    }

    .contact-container {
        grid-template-columns: 1fr;
    }

    #hero h1 {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }
}