/* =========================================
   PROCOM - Premium Industrial Design 2025
   ========================================= */

:root {
    /* Color Palette */
    --color-primary: #0f172a;
    /* Slate 900 */
    --color-primary-light: #1e293b;
    /* Slate 800 */
    --color-accent: #0284c7;
    /* Sky 600 - More corporate than 500 */
    --color-accent-hover: #0369a1;
    /* Sky 700 */
    --color-text-main: #334155;
    /* Slate 700 */
    --color-text-dark: #1e293b;
    /* Slate 800 */
    --color-text-light: #f8fafc;
    /* Slate 50 */
    --color-text-muted: #64748b;
    /* Slate 500 */
    --color-bg-light: #f8fafc;
    /* Slate 50 */
    --color-bg-white: #ffffff;
    --color-border: #e2e8f0;
    /* Slate 200 */

    /* Typography */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;

    /* Spacing & Layout */
    --container-width: 1200px;
    --header-height: 80px;
    --section-padding: 5rem 0;
    --border-radius: 0.5rem;

    /* Effects */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
    --transition-base: all 0.3s ease;
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: var(--font-size-base);
}

body {
    font-family: var(--font-sans);
    line-height: var(--line-height-base);
    color: var(--color-text-main);
    background-color: var(--color-bg-white);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

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

ul {
    list-style: none;
}

/* Utility Classes */
.container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1rem;
}

.text-center {
    text-align: center;
}

.text-white {
    color: var(--color-text-light) !important;
}

.text-gray {
    color: var(--color-text-muted) !important;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.mt-4 {
    margin-top: 1.5rem;
}

.bg-light {
    background-color: var(--color-bg-light);
}

.bg-dark {
    background-color: var(--color-primary);
}

.bg-gray-50 {
    background-color: #f1f5f9;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1rem;
    letter-spacing: 0.025em;
    border: 2px solid transparent;
}

.btn-primary {
    background-color: var(--color-accent);
    color: #fff;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    background-color: var(--color-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn-outline {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

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

.btn-secondary {
    background-color: var(--color-primary);
    color: #fff;
}

.btn-secondary:hover {
    background-color: var(--color-primary-light);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
}

/* Typography Helpers */
.section-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--color-text-dark);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.section-desc {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    max-width: 700px;
    margin: 0 auto 3rem;
}

.eyebrow {
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 0.5rem;
}

/* =========================================
   Header
   ========================================= */
/* Header Fixed Dark Style */
#site-header {
    background: #111827;
    /* Fixed dark tone */
    color: #e5e7eb;
    padding: 0.6rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.35);
    height: auto;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.logo-link {
    display: inline-flex;
    align-items: center;
}

.logo-img {
    height: 48px;
    width: auto;
    image-rendering: auto;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.main-nav ul {
    display: flex;
    gap: 2rem;
}

/* Nav Links - High Contrast for Dark Header */
.main-nav a:not(.btn) {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 0.25rem;
    color: rgba(226, 232, 240, 0.9);
    border-bottom: 2px solid transparent;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
    font-weight: 500;
}

.main-nav a:not(.btn):hover {
    color: #ffffff;
    border-bottom-color: rgba(148, 163, 184, 0.8);
    text-shadow: none;
}

.main-nav a.active {
    color: #ffffff;
    border-bottom-color: #3b82f6;
    text-shadow: none;
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
}

.mobile-toggle .bar {
    width: 24px;
    height: 2px;
    background-color: var(--color-primary);
}

/* =========================================
   Hero Section
   ========================================= */
.hero-section {
    position: relative;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--color-primary);
    overflow: hidden;
    padding-top: var(--header-height);
}

.hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(14, 165, 233, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 40%),
        linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.9));
    z-index: 1;
}

/* Abstract Tech Pattern */
.hero-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    color: #fff;
    padding: 2rem;
}

.hero-eyebrow {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #94a3b8;
    margin-bottom: 1.5rem;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: #f8fafc;
}

.hero-title .highlight {
    color: var(--color-accent);
    background: -webkit-linear-gradient(45deg, var(--color-accent), #38bdf8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: #cbd5e1;
    margin-bottom: 2.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8rem;
    gap: 0.5rem;
}

.arrow-down {
    width: 1rem;
    height: 1rem;
    border-right: 2px solid rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    transform: rotate(45deg);
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0) rotate(45deg);
    }

    40% {
        transform: translateY(-10px) rotate(45deg);
    }

    60% {
        transform: translateY(-5px) rotate(45deg);
    }
}

/* =========================================
   Features Section (Why PROCOM)
   ========================================= */
.section-padding {
    padding: var(--section-padding);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.feature-card {
    background: #fff;
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    border-top: 4px solid transparent;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-top-color: var(--color-accent);
}

.icon-box {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background-color: #f0f9ff;
    color: var(--color-accent);
    font-weight: 800;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.feature-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-dark);
}

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

/* =========================================
   Sectors Section
   ========================================= */
.sectors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.sector-card {
    background: var(--color-primary-light);
    border-radius: var(--border-radius);
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: var(--transition-base);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.sector-card:hover {
    background: #26334a;
    /* leggermente più chiaro */
    border-color: rgba(255, 255, 255, 0.1);
}

.sector-content h3 {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.sector-content p {
    color: #94a3b8;
}

/* =========================================
   Capabilities (Split Layout)
   ========================================= */
.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.split-layout.reverse {
    direction: rtl;
    /* simple hack to swap columns visually */
}

.split-layout.reverse>* {
    direction: ltr;
}

.capabilities-list {
    margin-top: 2rem;
}

.capabilities-list li {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
    position: relative;
    border-left: 2px solid var(--color-accent);
}

.decorative-grid {
    position: relative;
    height: 400px;
    background-color: var(--color-bg-light);
    border-radius: var(--border-radius);
    overflow: hidden;
}

/* Abstract Graphic placeholder */
.tech-graphic {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg,
            #e2e8f0,
            #e2e8f0 10px,
            #f1f5f9 10px,
            #f1f5f9 20px);
    opacity: 0.5;
}

/* History Graphic */
.history-graphic {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    position: relative;
}

.year-line {
    width: 2px;
    height: 100px;
    background: var(--color-accent);
    margin: 1rem 0;
}

.year-marker {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-primary);
}

.year-marker.current {
    color: var(--color-accent);
}

.location-badge {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    display: inline-flex;
}

.icon-pin {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
}

/* =========================================
   Quality Stats
   ========================================= */
.bg-main {
    background-color: var(--color-primary);
}

.stats-row {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 4rem;
    gap: 2rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value {
    font-size: 3rem;
    font-weight: 900;
    color: var(--color-accent);
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.5rem;
}

/* =========================================
   CTA Section
   ========================================= */
.cta-box {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    padding: 4rem;
    border-radius: 1rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-lg);
}

.cta-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

/* =========================================
   Footer
   ========================================= */
footer {
    background-color: #020617;
    /* Very Dark */
    color: #94a3b8;
    padding: 4rem 0 0;
}

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

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

.footer-col h4 {
    color: white;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.footer-col ul li {
    margin-bottom: 0.75rem;
}

.footer-col ul li a:hover {
    color: var(--color-accent);
}

.footer-bottom {
    padding: 2rem 0;
    text-align: center;
    font-size: 0.875rem;
}

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 992px) {
    .grid-4 {
        grid-template-columns: 1fr 1fr;
    }

    .split-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .split-layout.reverse {
        direction: ltr;
    }

    .capabilities-list li {
        border-left: none;
        border-bottom: 2px solid var(--color-accent);
        padding: 0 0 1rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .header-inner .main-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 2rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-in-out;
        z-index: 999;
    }

    .main-nav.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .main-nav ul {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 1.5rem;
    }

    .mobile-toggle {
        display: flex;
    }

    .cta-box {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .grid-4 {
        grid-template-columns: 1fr;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .btn {
        width: 100%;
    }

    .hero-content {
        padding: 1rem;
    }

    .hero-title {
        font-size: 2rem;
    }
}

/* =========================================
   Who We Are Page Styles
   ========================================= */

/* Timeline Specifics */
.timeline-box {
    border-left: 2px solid var(--color-border);
    padding-left: 2rem;
    margin-left: 1rem;
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -2.4rem;
    /* Adjust based on padding/border perfectly centered */
    top: 0.25rem;
    width: 0.8rem;
    height: 0.8rem;
    background: var(--color-bg-white);
    border: 3px solid var(--color-accent);
    border-radius: 50%;
    z-index: 2;
}

.timeline-year {
    font-weight: 800;
    color: var(--color-accent);
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.timeline-content {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

/* Page Hero */
.page-hero {
    padding-top: calc(var(--header-height) + 4rem);
    padding-bottom: 4rem;
}

/* Location Grid */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.location-card {
    background: #fff;
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    text-align: center;
    transition: var(--transition-base);
}

.location-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.location-card h3 {
    color: var(--color-primary);
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.address-text {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
    font-style: normal;
    line-height: 1.6;
}

.map-btn {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.map-btn:hover {
    background: var(--color-accent);
    color: white;
}

/* Highlight Card Variation */
.highlight-card {
    border-top: 4px solid var(--color-accent);
    background: #f8fafc;
}

/* Responsive adjustments for Who We Are */
@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   Language Switcher
   ========================================= */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1.5rem;
}

.lang {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid transparent;
    opacity: 0.85;
    transition: var(--transition-base);
}

.lang:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.05);
    /* Slight hover for light backgrounds */
}

/* Adjust for when header is dark/blur - currently header is white/blur, so dark text is default */
.lang-active {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    opacity: 1;
}

.lang-active:hover {
    background-color: var(--color-primary-light);
}

.flag {
    display: inline-block;
    width: 14px;
    height: 10px;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}

.flag-es {
    background: linear-gradient(to bottom, #c60b1e 0 33%, #ffc400 33% 66%, #aa151b 66% 100%);
}

.flag-en {
    background: linear-gradient(135deg, #012169 0 50%, #c8102e 50% 100%);
}

.lang-code {
    letter-spacing: 0.04em;
}


/* =========================================
   Contact Page Styles
   ========================================= */

/* Contact Grid */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
}

.contact-card {
    background: #fff;
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    border-top: 5px solid var(--color-accent);
}

.contact-card h3 {
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    color: var(--color-primary);
}

.contact-details p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.contact-divider {
    border: 0;
    height: 1px;
    background: var(--color-border);
    margin: 1.5rem 0;
}

.manager strong {
    color: var(--color-primary-light);
}

.manager a {
    color: var(--color-accent);
    font-weight: 500;
}

.btn-dark-outline {
    border-color: var(--color-text-main);
    color: var(--color-text-main);
    width: 100%;
    margin-top: 1rem;
}

.btn-dark-outline:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* Form Styles */
.form-box {
    background: white;
    padding: 3rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    max-width: 800px;
    margin: 0 auto;
}

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

.contact-form .form-group {
    margin-bottom: 1.5rem;
}

.contact-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text-dark);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-family: var(--font-sans);
    font-size: 1rem;
    transition: var(--transition-base);
    background-color: #f8fafc;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    background-color: white;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

.form-actions {
    margin-top: 2rem;
}

/* Responsive Contact */
@media (max-width: 768px) {
    .contact-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-box {
        padding: 1.5rem;
    }

    /* Lang switcher in mobile menu */
    .lang-switcher {
        margin-left: 0;
        margin-top: 1rem;
        justify-content: center;
        width: 100%;
    }
}

/* =========================================
   Capabilities Page Styles
   ========================================= */

/* KPI Cards */
.cap-kpis {
    gap: 1.5rem;
}

.stat-value {
    color: var(--color-accent);
    line-height: 1;
    font-weight: 900;
    /* font-size defined in general stats but can override here */
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.stat-label-dark {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-main);
    letter-spacing: 0.05em;
}

/* Feature Cards (used for Materials, Services) */
.feature-card h3 {
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.feature-card p {
    color: var(--color-text-muted);
}

/* Quality Cards Dark Variant */
#calidad .sector-card h3 {
    color: white;
}

#calidad .sector-card p {
    color: #94a3b8;
}

/* Responsive Capabilities */
@media (max-width: 768px) {
    .cap-kpis {
        grid-template-columns: 1fr 1fr;
        /* 2x2 grid on tablet/mobile */
    }

    .cap-kpis .feature-card {
        padding: 1.5rem;
    }

    .stat-value {
        font-size: 2rem;
    }

    /* Stack grids for services/materials if not already handled by general grid rules */
    #materiales .grid-3,
    #servicios .grid-2 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* =========================================
   High Contrast Adjustment (Capacidades)
   ========================================= */

/* Mandatory Base Text Color */
.cap-section,
.cap-section p,
.cap-section li {
    color: #0f172a;
    /* Very Dark Slate for readability */
}

/* Enhanced Card Contrast */
.feature-card {
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.feature-card h3 {
    color: #0f172a;
    /* Ensure headings are dark */
    font-weight: 700;
}

.feature-card p {
    color: #334155;
    /* Slate 700 - Darker than muted */
}

/* Quality Section Specifics */
#calidad.bg-dark h2,
#calidad.bg-dark h3,
#calidad.bg-dark p.section-lead {
    color: #f8fafc;
    /* Ensure white text on dark bg */
}

#calidad .sector-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#calidad .sector-card h3 {
    color: #fff;
    font-weight: 700;
}

#calidad .sector-card p {
    color: #e2e8f0;
    /* Slate 200 - High contrast against dark */
}

/* =========================================
   Expanded Language Switcher (ES, CA, EN, DE, ZH)
   ========================================= */

/* Update/Reinforce base styles if needed */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 1.5rem;
}

.lang {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid transparent;
    opacity: 0.85;
    transition: var(--transition-base);
}

.lang:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.05);
    /* Slight hover for light backgrounds */
}

/* Updated Flags */

/* Catalunya */
.flag-ca {
    background:
        linear-gradient(to bottom,
            #ffcc00 0 20%,
            #c60b1e 20% 30%,
            #ffcc00 30% 50%,
            #c60b1e 50% 60%,
            #ffcc00 60% 80%,
            #c60b1e 80% 90%,
            #ffcc00 90% 100%);
}

/* Alemania */
.flag-de {
    background: linear-gradient(to bottom, #000000 0 33%, #dd0000 33% 66%, #ffce00 66% 100%);
}

/* China */
.flag-zh {
    background: #de2910;
    /* Star simulation simplified as a clean red field or subtle detail if needed */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Adjustments for many languages in Mobile */
@media (max-width: 1200px) {
    .lang-switcher {
        margin-left: 1rem;
        gap: 0.2rem;
    }

    .lang {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    .lang-switcher {
        flex-wrap: wrap;
        /* Allow wrapping if 5 langs are too wide for mobile menu width */
        justify-content: center;
        margin-top: 1.5rem;
        width: 100%;
    }

    .lang {
        margin-bottom: 0.5rem;
    }
}

/* =========================================
   Logo Badge & Header Refinements
   ========================================= */

/* Ensure wrapping container for logo is flex */
.logo {
    display: flex;
    align-items: center;
}

/* New Badge Style for Logo Integration */
.logo-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.85);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition-base);
}

.logo-badge:hover {
    background: rgba(15, 23, 42, 0.95);
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.logo-link {
    display: inline-flex;
    align-items: center;
}

.logo-img {
    height: 32px;
    width: auto;
    border-radius: 0.25rem;
    image-rendering: auto;
}

/* Adjust Site Header padding if needed to maintain overall height */
/* #site-header padding adjustment removed to enforce single definition at top */

/* Footer logo tweak (reuse badge or reset?) 
   User instruction implied global change, 
   but footer usually doesn't need the badge background if it's already dark.
   For now, since HTML replacement was global, it applies to header. 
   If Footer used same structure, check if it needs override.
   The footer has .footer-logo-link. We can remove badge effect there if needed.
*/

.footer-col .logo-badge {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border: none;
}

/* Responsive Logo Badge */
@media (max-width: 768px) {
    .logo-badge {
        padding: 0.25rem 0.6rem;
    }

    .logo-img {
        height: 28px;
    }
}

/* =========================================
   Redesigned Header (Industrial 2025)
   ========================================= */

/* Site Header Base */
#site-header {
    background-color: #0f172a;
    /* Dark Blue/Graphite solid bg */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0;
    /* Reset padding to override previous rule */
    width: 100%;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    /* Fixed efficient height */
}

/* Header Sections (Flex Layout) */
.header-left {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
}

/* Main Navigation (Tabs Style) */
.main-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    /* Center menu items */
    margin: 0 1rem;
}

.main-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
}

.main-nav li {
    position: relative;
}

/* Industrial Tab Links REMOVED to enforce simple text style */
/*
.main-nav a { ... }
*/

/* Header CTA Button in Nav */
.header-cta {
    font-size: 0.85rem !important;
    padding: 0.4rem 1rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Mobile Toggle */
.mobile-toggle {
    display: none;
    /* Hidden by default */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.mobile-toggle .bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #fff;
    margin: 5px 0;
    transition: 0.3s;
}

/* Redesigned Footer */
.site-footer {
    background-color: #1e293b;
    color: #cbd5e1;
    padding: 4rem 0 2rem;
    border-top: 4px solid var(--primary-color);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 2rem;
}

.footer-logo {
    height: 48px;
    width: auto;
    filter: brightness(0) invert(1);
    /* White logo for dark footer if PNG transparency allows, else remove filter */
}

.footer-brand-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.02em;
}

/* Footer Bottom Updates */
.footer-bottom-links {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    opacity: 0.6;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .header-cta {
        display: none;
        /* Hide CTA on smaller desktops/tablets to save space */
    }

    .lang-switcher .lang-code {
        display: none;
        /* Hide text code, show only flags if tight */
    }
}

@media (max-width: 768px) {
    .header-inner {
        height: 60px;
    }

    .mobile-toggle {
        display: block;
    }

    /* Mobile Menu Overlay */
    .main-nav {
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: #0f172a;
        flex-direction: column;
        justify-content: flex-start;
        padding: 2rem 1rem;
        height: calc(100vh - 60px);
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        margin: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 999;
    }

    .main-nav.active {
        transform: translateX(0);
    }

    .main-nav ul {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .main-nav a {
        font-size: 1.1rem;
        padding: 1rem;
    }

    .header-right {
        gap: 0.5rem;
    }

    .site-footer {
        padding-top: 3rem;
    }

    .footer-brand {
        flex-direction: column;
        text-align: center;
    }

    .footer-bottom-links {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .footer-columns {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
}

/* User Feedback Footer Updates */
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0;
    /* Override previous margin */
    border-bottom: none;
    /* Override previous border */
    padding-bottom: 0;
    /* Override previous padding */
    width: auto;
    /* Allow auto width */
}

.footer-logo {
    height: 28px;
    width: auto;
    filter: brightness(0) invert(1);
    /* Ensure it stays white on dark background */
}

.footer-brand-name {
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: #fff;
}

/* Maintain columns layout below if needed, or adjust if user implies a single row footer.
   The user snippet for .footer-inner suggests a single row (justify-content: space-between).
   However, my HTML has a .footer-columns div inside .footer-inner (added in previous step).
   If .footer-inner is flex row, then .footer-brand and .footer-columns will be side-by-side.
   This might be what they want: Brand Left, Links Right?
   Let's assume standard "Brand Row" then "Content Row" approach unless user specificied otherwise.
   
   Wait, the user's .footer-inner has "flex-wrap: wrap; justify-content: space-between".
   If I apply this to the current HTML structure:
   <div class="footer-inner">
      <div class="footer-brand">...</div>
      <div class="footer-columns">...</div>
   </div>
   
   This will put the Brand on the left and the Columns block on the right (if space permits). 
   This looks like a valid layout modification.
*/

.footer-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* Address/Text gets slightly more */
    gap: 2rem;
    /* Remove padding/margins that might conflict with flex parent */
    padding-top: 0;
}

/* =========================================
   Unified Navbar Updates
   ========================================= */
/* Navbar updates merged into main block */

/* Ensure mobile toggle is visible and correctly positioned */
.mobile-toggle .bar {
    background-color: #fff;
}

/* =========================================
   Sectores Page Improvements
   ========================================= */

/* Chips Navigation */
.sectors-nav-wrapper {
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 70px;
    /* Below header */
    z-index: 900;
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.sectors-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.sector-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    background: #f1f5f9;
    color: var(--color-text-main);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.sector-chip:hover,
.sector-chip.active {
    background: var(--color-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Sector Info Cards (Enfoque, Valor, Calidad) */
.sector-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.info-card {
    background: #fff;
    padding: 2rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    text-align: center;
    transition: var(--transition-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.info-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}

.info-card-icon {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-accent);
    background: #f0f9ff;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.info-card h4 {
    color: var(--color-primary);
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-card p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* Action Card Variant */
.info-card.action-card {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.info-card.action-card h4,
.info-card.action-card p {
    color: white;
}

.info-card.action-card .btn-text {
    color: var(--color-accent);
    background: white;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    margin-top: auto;
    /* Push to bottom */
    display: inline-block;
    font-weight: 600;
}

.info-card.action-card .btn-text:hover {
    background: #f8fafc;
}

/* =========================================
   Capabilities Highlights
   ========================================= */
.cap-highlights {
    margin-top: 1.25rem;
}

.cap-highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.cap-highlight-card {
    background: #f9fafb;
    border-radius: 1rem;
    padding: 1.5rem 1.25rem;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    border: 1px solid #e5e7eb;
    text-align: left;
}

.cap-highlight-card h3 {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.cap-highlight-card p {
    font-size: 0.9rem;
    color: #4b5563;
    line-height: 1.5;
}

/* =========================================
   Timeline / Trayectoria
   ========================================= */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 4rem auto 0;
    padding-left: 2rem;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: #e2e8f0;
}

.timeline-item {
    position: relative;
    margin-bottom: 2.5rem;
    padding-left: 2rem;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -0.6rem;
    /* Centers on the 2px line at left:0 -> line center is at 1px. Marker 20px wide. 
       Need center of marker at 1px. Left = 1px - 10px = -9px ~ -0.6rem */
    top: 0.25rem;
    width: 20px;
    height: 20px;
    background: white;
    border: 4px solid var(--color-accent);
    border-radius: 50%;
    z-index: 10;
}

.timeline-content {
    position: relative;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.timeline-content:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: #cbd5e1;
}

.timeline-year {
    display: inline-block;
    background: #f1f5f9;
    color: var(--color-primary);
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    border: 1px solid #e2e8f0;
}

.timeline-content h3 {
    font-size: 1.1rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.timeline-content p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .timeline {
        padding-left: 1.5rem;
    }

    .timeline-item {
        padding-left: 1.5rem;
    }
}

/* =========================================
   Footer Legal
   ========================================= */
.footer-legal {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.78rem;
    opacity: 0.9;
}

.footer-legal-line {
    line-height: 1.4;
}

.footer-credit {
    opacity: 0.85;
}

.footer-legal-links a {
    color: #e5e7eb;
    text-decoration: none;
    opacity: 0.9;
}

.footer-legal-links a:hover {
    text-decoration: underline;
    opacity: 1;
}

.footer-legal-links span {
    opacity: 0.7;
    margin: 0 0.25rem;
}