/* Falcon Plant Resources - Main Stylesheet */
/* Based on Universal Plant design language */

/* =========================================
   1. VARIABLES & RESET
   ========================================= */
:root {
    --primary-red: #BD1F28;
    --primary-black: #000000;
    --primary-gray: #A2A9AD;
    --white: #FFFFFF;
    --dark-gray: #333333;
    --light-gray: #F5F5F5;
    --transition: all 0.3s ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    color: var(--dark-gray);
    background-color: var(--white);
    overflow-x: hidden;
}

/* =========================================
   2. TYPOGRAPHY
   ========================================= */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }

@media (min-width: 768px) {
    h1 { font-size: 3.5rem; }
    h2 { font-size: 2.5rem; }
    h3 { font-size: 2rem; }
}

p {
    margin-bottom: 1rem;
}

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

a:hover {
    color: var(--primary-black);
}

ul {
    list-style: none;
}

.text-center { text-align: center; }
.text-white { color: var(--white); }

/* =========================================
   3. LAYOUT & UTILITIES
   ========================================= */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
}

.section-title {
    position: relative;
    margin-bottom: 50px;
    text-align: center;
}

.section-title:after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--primary-red);
    margin: 20px auto 0;
}

img {
    max-width: 100%;
    height: auto;
}

/* Background Colors */
.bg-red { background-color: var(--primary-red); }
.bg-black { background-color: var(--primary-black); }
.bg-gray { background-color: var(--primary-gray); }
.bg-light-gray { background-color: var(--light-gray); }

/* =========================================
   4. COMPONENTS (Buttons, Forms)
   ========================================= */
.btn {
    display: inline-block;
    padding: 12px 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: var(--transition);
    text-align: center;
    cursor: pointer;
}

.btn-red {
    background-color: var(--primary-red);
    color: var(--white);
    border: 2px solid var(--primary-red);
}

.btn-red:hover {
    background-color: transparent;
    color: var(--primary-red);
}

.btn-outline-white {
    background-color: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}

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

/* Form Styles */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-red);
    box-shadow: 0 0 0 2px rgba(189, 31, 40, 0.2);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

/* =========================================
   5. HEADER & NAVIGATION
   ========================================= */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}

header.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

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

.logo-img {
    height: 50px;
    transition: var(--transition);
}

.logo-text {
    font-weight: 800;
    font-size: 1.5rem;
    margin-left: 10px;
    color: var(--primary-black);
}

.logo-text span {
    color: var(--primary-red);
}

.nav-menu {
    display: flex;
}

.nav-menu li {
    position: relative;
    margin-left: 30px;
}

.nav-menu li a {
    font-weight: 600;
    color: var(--primary-black);
    position: relative;
    padding: 5px 0;
}

.nav-menu li a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-red);
    transition: var(--transition);
}

.nav-menu li a:hover:after,
.nav-menu li.active a:after {
    width: 100%;
}

.nav-menu li.active a {
    color: var(--primary-red);
}

.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    background-color: var(--white);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 100;
}

.nav-menu li:hover .submenu {
    opacity: 1;
    visibility: visible;
}

.submenu li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #eee;
}

.submenu li a {
    display: block;
    padding: 10px 15px;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--primary-black);
    cursor: pointer;
}

/* =========================================
   6. HERO SECTIONS
   ========================================= */
/* Home Hero */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    /* Default background, overridden by page specifics or video */
    background-color: #333;
    display: flex;
    align-items: center;
    color: var(--white);
    text-align: center;
    padding-top: 80px;
    overflow: hidden;
}

.hero-video-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
}

.hero-video-bg video { width: 100%; height: 100%; object-fit: cover; }

.hero-video-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* Transparent overlay to not hide the video */
    background: linear-gradient(to bottom, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.3) 90%);
    z-index: 0;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    z-index: 1;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-weight: 800;
    animation: fadeInUp 1s ease;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    animation: fadeInUp 1s ease 0.3s both;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    animation: fadeInUp 1s ease 0.6s both;
}

/* Service Page Hero */
.service-hero {
    position: relative;
    height: 60vh;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    color: var(--white);
    text-align: center;
    padding-top: 80px;
}

.service-hero-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    z-index: 1;
}

.service-hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-weight: 800;
    animation: fadeInUp 1s ease;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

.service-hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    animation: fadeInUp 1s ease 0.3s both;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

/* =========================================
   7. PAGE SECTIONS (About, Services, Stats)
   ========================================= */
/* About */
.about {
    position: relative;
    padding: 100px 0;
    background-color: var(--white);
}

.about-content {
    display: flex;
    align-items: center;
    gap: 50px;
}

.about-text { flex: 1; }

.about-image {
    flex: 1;
    position: relative;
}

.about-image img {
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Services Grid */
.services {
    background-color: var(--light-gray);
    padding: 100px 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.service-card {
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    position: relative; /* Needed for pseudo-element positioning */
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 450px; /* Ensure consistent height during animation */
}

/* Background image overlay on hover */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Use the variable defined in inline styles or fallback to gray */
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), var(--bg-image, none);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1; /* Behind the content */
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* On hover, fade in the background */
.service-card:hover::before {
    opacity: 1;
}

.service-image {
    height: 200px;
    overflow: hidden;
    transition: opacity 0.4s ease, height 0.4s ease;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

/* Hide original image/icon or reduce prominence on hover if desired.
   Universal Plant style typically replaces content or overlays it.
   Let's try collapsing the image to make room for full card text/bg focus. */
.service-card:hover .service-image {
    /* Optional: Hide the top image to show full background?
       Or keep it. Universal Plant keeps the icon but background changes.
       The user said "se pone una imagen" (an image is put).
       With the ::before covering the whole card, we need to make sure text is readable. */
    opacity: 0;
    height: 0; /* Collapse it to center text? Or just hide it? */
}

.service-content {
    padding: 20px;
    transition: color 0.3s ease;
    position: relative;
    z-index: 2; /* Ensure text is above ::before */
    flex: 1; /* Take remaining space */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service-content h3 {
    color: var(--primary-red);
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

/* Change text colors on hover */
.service-card:hover .service-content h3 {
    color: var(--white);
}

.service-card:hover .service-content p {
    color: var(--light-gray);
}

/* Button changes on hover */
.service-card:hover .btn-red {
    background-color: var(--white);
    color: var(--primary-black);
    border-color: var(--white);
}

/* Service Detail (Individual Pages) */
.service-detail {
    position: relative;
    padding: 100px 0;
    background-color: var(--white);
}

.service-detail-content {
    display: flex;
    align-items: flex-start;
    gap: 50px;
}

.service-detail-text { flex: 1; }
.service-detail-image { flex: 1; position: relative; }
.service-detail-image img {
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Equipment Lists */
.equipment-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.equipment-item {
    background-color: var(--light-gray);
    padding: 25px;
    border-radius: 8px;
    border-left: 4px solid var(--primary-red);
    transition: var(--transition);
}

.equipment-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.equipment-item h4 {
    color: var(--primary-red);
    margin-bottom: 10px;
}

/* Stats */
.stats {
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1544&q=80') no-repeat center center/cover;
    padding: 80px 0;
    color: var(--white);
    text-align: center;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.stat-item { padding: 30px; }

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary-red);
    margin-bottom: 10px;
}

/* Contact */
.contact {
    padding: 100px 0;
    background-color: var(--white);
}

.contact-container {
    display: flex;
    gap: 50px;
}

.contact-info { flex: 1; }

.contact-info h3 {
    color: var(--primary-red);
    margin-bottom: 20px;
}

.contact-info ul li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.contact-info ul li i {
    margin-right: 15px;
    color: var(--primary-red);
    font-size: 1.2rem;
    width: 20px;
    text-align: center;
}

.contact-form {
    flex: 1;
    background-color: var(--light-gray);
    padding: 30px;
    border-radius: 8px;
}

/* CTA */
.service-cta {
    background-color: var(--primary-red);
    color: var(--white);
    padding: 80px 0;
    text-align: center;
}

/* =========================================
   8. FOOTER
   ========================================= */
footer {
    background-color: var(--primary-black);
    color: var(--white);
    padding: 60px 0 20px;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-logo { margin-bottom: 20px; }
.footer-logo img { height: 50px; }

.footer-about p { margin-bottom: 20px; }

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--white);
    transition: var(--transition);
}

.social-links a:hover {
    background-color: var(--primary-red);
    transform: translateY(-3px);
}

.footer-links h3 {
    color: var(--white);
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-links h3:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--primary-red);
}

.footer-links ul li { margin-bottom: 10px; }

.footer-links ul li a {
    color: var(--primary-gray);
    transition: var(--transition);
}

.footer-links ul li a:hover {
    color: var(--primary-red);
    padding-left: 5px;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--primary-gray);
    font-size: 0.9rem;
}

.footer-bottom a { color: var(--primary-gray); }
.footer-bottom a:hover { color: var(--primary-red); }

/* =========================================
   9. ANIMATIONS
   ========================================= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   10. RESPONSIVE
   ========================================= */
@media (max-width: 992px) {
    .about-content,
    .contact-container,
    .service-detail-content {
        flex-direction: column;
    }

    .about-image,
    .service-detail-image {
        order: -1;
    }

    .hero h1, .service-hero h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .mobile-menu-btn { display: block; }

    .nav-menu {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        background-color: var(--white);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: var(--transition);
        z-index: 999;
    }

    .nav-menu.active { left: 0; }

    .nav-menu li { margin: 15px 0; }

    .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        display: none;
        background: none;
        box-shadow: none;
        width: 100%;
        padding-left: 20px;
    }

    .nav-menu li:hover .submenu { display: none; }

    .nav-menu li.active .submenu { display: block; }

    .hero h1, .service-hero h1 {
        font-size: 2rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .service-hero {
        height: 50vh;
        min-height: 300px;
    }
}

/* =========================================
   11. SERVICE SPECIFIC COMPONENTS
   ========================================= */
/* Materials Section (Welding) */
.materials-section {
    background-color: var(--light-gray);
    padding: 80px 0;
}

.materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.material-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: var(--transition);
    position: relative;
    border-top: 4px solid var(--primary-red);
}

.material-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.material-icon {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-red);
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.material-content {
    padding: 25px;
    text-align: center;
}

.material-content h3 {
    margin-bottom: 15px;
    color: var(--primary-black);
}

/* Equipment Section (Welding) */
.equipment-section {
    background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.9)), url('../images/welding-equipment-bg.jpg') center/cover;
    padding: 80px 0;
    color: var(--white);
}

.equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.equipment-card {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    padding: 30px;
    transition: var(--transition);
    border-left: 4px solid var(--primary-red);
}

.equipment-card:hover {
    background: rgba(189, 31, 40, 0.2);
    transform: translateY(-5px);
}

.equipment-card h3 {
    color: var(--white);
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
}

.equipment-card h3:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--primary-red);
}

/* Features List (Bolt Tensioning) */
.feature-list {
    margin: 30px 0;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.feature-icon {
    color: var(--primary-red);
    font-size: 1.5rem;
    margin-right: 15px;
    min-width: 25px;
}

.feature-text h4 {
    margin-bottom: 5px;
}

/* Why Choose / Benefits (Bolt Tensioning) */
.why-choose {
    padding: 80px 0;
    background-color: var(--light-gray);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.benefit-item {
    background-color: var(--white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

.benefit-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.benefit-item h4 {
    color: var(--primary-red);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.benefit-item h4 i {
    margin-right: 10px;
}

/* =========================================
   12. HOME SPECIFIC (Floating Logo, Map, Tabs, Careers)
   ========================================= */

/* Floating Logo */
.logo-hero-flotante {
    position: absolute; right: 5%; top: 20%; width: min(20vw, 150px); z-index: 2;
    animation: rebote-flotante 4s ease-in-out infinite;
}

@keyframes rebote-flotante {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

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

/* About Tabs */
.about-tabs { margin: 20px 0; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
.tabs-header { display: flex; background: #f5f5f5; }
.tab-link { padding: 15px 20px; border: none; background: none; cursor: pointer; flex: 1; font-weight: 600; font-family: inherit; }
.tab-link.active { background: white; color: var(--primary-red); border-bottom: 3px solid var(--primary-red); }
.tab-content { display: none; padding: 25px; }
.tab-content.active { display: block; }

/* Careers Section */
.careers-section { background-color: var(--light-gray); padding: 100px 0; position: relative; overflow: hidden; }
.careers-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--primary-red), var(--primary-black)); }
.careers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin: 50px 0; }
.careers-card { background: var(--white); padding: 30px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: var(--transition); text-align: center; border-top: 3px solid var(--primary-red); }
.careers-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.careers-icon { font-size: 2.5rem; color: var(--primary-red); margin-bottom: 20px; }
.careers-cta { background: var(--primary-black); padding: 40px; border-radius: 8px; text-align: center; margin-top: 50px; position: relative; overflow: hidden; }
.careers-cta::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: var(--primary-red); }
.cta-content h3 { color: var(--white); margin-bottom: 15px; }
.cta-content p { color: var(--primary-gray); margin-bottom: 25px; }

/* Google Map */
.google-map-wrapper {
    margin-top: 30px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 4px solid white;
    height: 300px;
}
.google-map-wrapper iframe { display: block; width: 100%; height: 100%; }