/* Home Page Sections */
.company-overview {
    padding: 4rem 0;
}

.section-company-overview {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
}

.split-content h2 {
    font-size: 1.75rem;
}

/* === SIDE BY SIDE LAYOUT (50/50) === */
.side-section {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Ensure rounded corners if applied or contain floats */
}

.side-col {
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.side-text {
    padding: 4rem 3rem; /* Generous padding */
}

.side-image {
    position: relative;
    min-height: 400px;
    height: 100%;
}

.side-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Background Colors */
.bg-light { 
    background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-bg-body) 100%);
    position: relative;
}
.bg-white { background-color: white; }
.bg-primary { background: var(--gradient-mesh), var(--color-primary); color: white; }

/* Text Colors override for dark bg */
.text-white h2, .text-white p, .text-white .eyebrow {
    color: white !important;
}

/* Stack side-by-side sections on tablet and below (bp-lg: 992px) */
@media (max-width: 992px) {
    .side-section {
        flex-direction: column;
    }

    .side-col {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .side-image {
        min-height: 300px;
        /* Make image first on mobile? Usually standard flow is fine (Text then Image), 
           but often Image then Text is preferred. 
           If we want strict order, we use order property. 
           Let's default to stacking as is in HTML. */
    }
    
    .side-text {
        padding: 3rem 1.5rem;
    }
}


/* === ENHANCED STATS WITH COUNTER ANIMATION === */
.stats-container {
    background: var(--gradient-mesh), var(--color-primary);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.stats-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
}

.stat-number {
    display: block;
    font-size: 4rem;
    font-weight: 900;
    color: white;
    margin-bottom: 0.5rem;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.85) 50%, var(--color-accent) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-number .stat-suffix {
    font-size: 2.5rem;
    font-weight: 700;
    opacity: 0.8;
    margin-left: 0.1em;
    -webkit-text-fill-color: rgba(255,255,255,0.7);
}

/* Stat icon enhancements */
.stat-icon {
    position: relative;
}

.stat-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: rgba(2, 132, 199, 0.2);
    border-radius: 20px;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo);
}

.stat-item:hover .stat-icon::before {
    opacity: 1;
    transform: scale(1);
}

/* Counter Animation */
.stat-number[data-count] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}

.stat-number[data-count].is-counting {
    opacity: 1;
    transform: translateY(0);
    animation: stat-gradient-shift 2s ease-out forwards;
}

.stat-number[data-count].counted {
    opacity: 1;
    transform: translateY(0);
    background-position: 100% 100%;
}

@keyframes stat-gradient-shift {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}


/* === HERO PARALLAX === */
.hero--parallax {
    overflow: hidden;
}

.hero--parallax .hero-bg {
    position: absolute;
    inset: -20%;
    background-size: cover;
    background-position: center;
    will-change: transform;
    transition: transform 0.1s linear;
}

.hero--parallax .hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--gradient-mesh-overlay);
    z-index: 1;
}

.hero--parallax > .container {
    position: relative;
    z-index: 2;
}

/* Hero scroll indicator */
.hero-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.6);
    animation: hero-scroll-bounce 2s ease-in-out infinite;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 3;
}

.hero-scroll-indicator:hover {
    color: var(--color-accent);
}

@keyframes hero-scroll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

@media (max-width: 768px) {
    .hero-scroll-indicator {
        display: none;
    }
}

/* About page hero specifics with parallax */
.about-page .hero.hero--parallax {
    background: var(--color-primary);
}

.about-page .hero.hero--parallax .hero-bg {
    background-image: url('/uploads/images/jovalFachada.jpg');
    opacity: 0.4;
}

.rounded-8 { border-radius: 12px; }

/* Support Section Polish */
.about-support {
    position: relative;
}

.about-support .support-content .lead {
    max-width: 800px;
    margin: 0 auto;
}

/* Support & Features */
.about-support .support-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}

.support-highlights .feature-box {
    position: relative;
    background: white;
    padding: 3rem 2.5rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    transition: transform 0.4s var(--ease-out-expo), border-color 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
    text-align: center;
    overflow: hidden;
}

.support-highlights .feature-box:hover {
    transform: translateY(-8px);
    border-color: var(--color-accent);
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.1);
}

.support-highlights .feature-box .icon-wrapper {
    width: 90px;
    height: 90px;
    margin: 0 auto 2rem;
    background: var(--color-bg-body);
    border-radius: 20px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.support-highlights .feature-box:hover .icon-wrapper {
    background: var(--color-accent);
    color: white;
    transform: scale(1.1) rotate(-5deg);
}

/* Accent line on hover */
.support-highlights .feature-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--color-accent);
    border-radius: 3px 3px 0 0;
    transition: width 0.4s var(--ease-out-expo);
}

.support-highlights .feature-box:hover::after {
    width: 60%;
}

.support-highlights .feature-box-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

/* Quality Section - Premium Certification Badge */
.quality-badge-wrapper {
    position: relative;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.03) 0%, transparent 50%);
    border-radius: 24px;
    border: 1px solid rgba(2, 132, 199, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.quality-badge-wrapper::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 20%;
    right: 20%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    border-radius: 0 0 4px 4px;
}

.quality-badge-img {
    max-width: 160px;
    filter: grayscale(0.3);
    opacity: 0.9;
    transition: filter 0.5s var(--ease-out-expo), opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo);
    border-radius: 12px;
    box-shadow: 0 8px 32px -8px rgba(15, 23, 42, 0.15);
}

.quality-badge-wrapper:hover .quality-badge-img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05) rotate(-2deg);
    box-shadow: 0 16px 48px -12px rgba(2, 132, 199, 0.25);
}

.quality-badge-title {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    position: relative;
    display: inline-block;
}

.quality-badge-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: var(--color-accent);
    border-radius: 2px;
    opacity: 0.5;
}

/* Certification stamp effect */
.quality-stamp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 100px;
    color: var(--color-success);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.quality-stamp svg {
    width: 14px;
    height: 14px;
}

/* Contact Card Refinements */
.about-contact .contact-card {
    margin-top: -4rem;
    z-index: 10;
}


/* === CONTACT PAGE === */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
}

@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Contact Info Cards */
.contact-info-cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-card {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--color-bg-body);
    border-radius: var(--radius-md);
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.info-card:hover {
    transform: translateX(5px);
}

.info-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: white;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

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

.info-card__content p {
    margin-bottom: 0;
    color: var(--color-text-main);
    line-height: 1.5;
}

.info-card__content a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 500;
}

.info-card__content a:hover {
    text-decoration: underline;
}

/* Status Indicators */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-green { color: var(--color-success); background: rgba(16, 185, 129, 0.1); }
.status-green .status-dot { 
    background-color: var(--color-success); 
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); 
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.status-yellow { color: var(--color-warning); background: rgba(245, 158, 11, 0.1); }
.status-yellow .status-dot { background-color: var(--color-warning); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); }

.status-red { color: var(--color-danger); background: rgba(239, 68, 68, 0.1); }
.status-red .status-dot { background-color: var(--color-danger); box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2); }

.info-card__value {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--color-primary);
}

.info-card__sub {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Contact Form Wrapper - Base Styles handled in Technical Data section */
.form-header {
    margin-bottom: 2.5rem;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px;
}

.form-row > .form-group {
    padding-right: 10px;
    padding-left: 10px;
    flex: 0 0 50%;
    max-width: 50%;
}

/* Stack form fields on mobile (bp-sm: 576px) */
@media (max-width: 576px) {
    .form-row > .form-group {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Conditional form fields (subject-dependent) */
.form-group--conditional { display: none; }
.form-group--conditional.is-visible { display: block; }
.form-row > .form-group--conditional.is-visible {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 10px;
    padding-left: 10px;
}
@media (max-width: 576px) {
    .form-row > .form-group--conditional.is-visible {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background-color: #f8fafc;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, outline 0.2s ease;
}

.form-control:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-color: var(--color-accent);
    background-color: white;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

.contact-textarea {
    min-height: 180px;
    resize: vertical;
}