/*! Main Stylesheet v2.0 | Optimized for Performance */


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

:root{
    /* Brand Colors */
    --red-primary:#dc143c;
    --red-dark:#b91c1c;
    --red-bright:#ef4444;
    --red-accent:#ff6b6b;
    --gray-steel:#2d3436;
    --gray-dark:#1f2937;
    --gray-light:#e5e7eb;
    --white:#fff;
    --black:#000;
    --green:#10b981;
    --orange:#f59e0b;
    --blue:#3b82f6;
    --cyan:#06b6d4;
    --neon:#00d4aa;
    
    /* Legacy compatibility variables */
    --primary-red:var(--red-primary);
    --steel-gray:var(--gray-steel);
    --light-gray:var(--gray-light);
    
    /* Gradients */
    --grad-main:linear-gradient(135deg,var(--red-primary),var(--red-dark));
    --grad-dark:linear-gradient(135deg,var(--black),var(--gray-dark));
    --grad-accent:linear-gradient(90deg,var(--red-bright),var(--red-accent));
    
    /* Typography */
    --font:'Manrope','Segoe UI',system-ui,sans-serif;
    
    /* Layout */
    --container:1200px;--pad:40px 0;--radius:10px;--shadow:0 10px 30px rgba(0,0,0,.1);
    
    /* Transitions */
    --ease:.3s ease;--smooth:.5s ease;
}

/* ===== BASE ===== */
body{font:400 1rem/1.6 var(--font);color:var(--gray-steel);background:var(--white);overflow-x:hidden}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* ===== HEADER ===== */
.header{
    background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
    position:fixed;top:0;left:0;right:0;z-index:1000;
    box-shadow:0 2px 20px rgba(0,102,204,.1);transition:var(--ease)
}
.header-content{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}
.logo{display:inline-block;text-decoration:none;transition:var(--ease)}
.logo img{height:40px;width:auto;transition:var(--ease)}
.logo:hover img{transform:scale(1.05)}

.nav{display:flex;list-style:none;gap:2rem}
.nav a{
    text-decoration:none;color:var(--gray-steel);font-weight:500;
    position:relative;transition:var(--ease);padding:.5rem 0;
    padding-bottom: 8px; /* Espacio para la barra inferior */
    font-size: 0.9rem; /* Tamaño reducido para mayúsculas */
    letter-spacing: 0.5px; /* Espaciado para mejorar legibilidad */
}
.nav a:hover{color:var(--red-primary)}
.nav a.active {
    color: var(--red-primary);
    font-weight: 600;
}
.nav a.active::after{
    content:'';position:absolute;bottom:0;left:0;
    width: 100%;
    height: 3px;
    background-color: var(--red-primary);
}

.mobile-menu-toggle {
    display: none;background: none;border: none;
    font-size:1.5rem;color:var(--gray-steel);cursor:pointer
}

/* ===== HERO ===== */
.hero{
    min-height:100vh;background:var(--grad-dark);
    display:flex;align-items:center;position:relative;overflow:hidden
}
.hero::before{
    content:'';position:absolute;top:0;left:0;right:0;bottom:0;
    background:url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%2300bfff" fill-opacity="0.05"><polygon points="36 34 24 34 30 24"/></g></g></svg>');
    animation:float 20s ease-in-out infinite
}
.hero-content{position:relative;z-index:2;color:var(--white)}
.hero h1{
    font:800 3.5rem/1.2 var(--font);margin-bottom:1.5rem;
    background:linear-gradient(45deg,var(--white),var(--red-accent));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text
}
.hero p{font-size:1.3rem;margin-bottom:2rem;opacity:.9}

/* ===== BUTTONS ===== */
.btn{
    display:inline-block;padding:1rem 2rem;text-decoration:none;
    border-radius:var(--radius);font-weight:600;text-align:center;
    transition:var(--ease);border:none;cursor:pointer;font-size:1rem;
    position:relative;overflow:hidden
}
.btn-primary{
    background:var(--grad-main);color:var(--white);
    box-shadow:0 10px 30px rgba(0,102,204,.3)
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 15px 40px rgba(0,102,204,.4)}
.btn-outline{background:transparent;color:var(--red-primary);border:2px solid var(--red-primary)}
.btn-outline:hover{background:var(--red-primary);color:var(--white)}

/* ===== LAYOUT ===== */
.section{padding:var(--pad)}
.section-title{text-align:center;margin-bottom:4rem}
.section-title h2{
    font:700 2.5rem var(--font);color:var(--gray-steel);
    margin-bottom:1rem;position:relative
}
.section-title h2::after{
    content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);
    width:80px;height:4px;background:var(--grad-accent);border-radius:2px
}
.section-title p{font-size:1.1rem;color:#666;max-width:600px;margin:0 auto}

/* ===== CARDS ===== */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:3rem}
.card{
    background:var(--white);border-radius:20px;padding:2rem;
    box-shadow:var(--shadow);transition:var(--smooth);
    border:1px solid transparent;position:relative;overflow:hidden
}
.card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:4px;
    background:var(--grad-accent)
}
.card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 50px rgba(220,20,60,.15);
    border-color:var(--red-bright)
}
.card-icon{margin-bottom:1.5rem;font-size:3rem;color:var(--red-primary);text-align:center}
.card h3{font:600 1.4rem var(--font);margin-bottom:1rem;color:var(--gray-steel)}
.card p{color:#666;line-height:1.6}

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem;width:100%}

/* ===== FORMS ===== */
.form-group{margin-bottom:1.5rem}
.form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--gray-steel)}
.form-control{
    width:100%;padding:1rem;border:2px solid var(--gray-light);
    border-radius:var(--radius);font-size:1rem;transition:var(--ease);background:var(--white)
}
.form-control:focus{
    outline:none;border-color:var(--red-bright);
    box-shadow:0 0 0 3px rgba(220,20,60,.1)
}
.form-control.error{border-color:var(--orange)}
.error-message{color:var(--orange);font-size:.9rem;margin-top:.5rem}
.success-message{color:var(--green);font-size:.9rem;margin-top:.5rem}

/* ===== FOOTER ===== */
.footer{background:var(--grad-dark);color:var(--white);padding:3rem 0 1rem;margin-top:4rem}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:2rem}
.footer-section h3{margin-bottom:1rem;color:var(--red-bright)}
.footer-section p,.footer-section a{color:rgba(255,255,255,.8);text-decoration:none;line-height:1.8}
.footer-section a:hover{color:var(--red-bright)}
.footer-bottom{text-align:center;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1);opacity:.7}

/* ===== LOGIN PAGE ===== */
.login-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    background: var(--white);
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}
.login-form-column {
    padding: 2rem;
}
.login-benefits-column {
    background: linear-gradient(135deg, #f8f9fa, var(--gray-light));
    padding: 3rem;
    border-radius: 15px;
    text-align: left;
}

/* ===== FOOTER ===== */
.footer{background:var(--grad-dark);color:var(--white);padding:3rem 0 1rem;margin-top:4rem}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:2rem}
.footer-section h3{margin-bottom:1rem;color:var(--red-bright)}
.footer-section p,.footer-section a{color:rgba(255,255,255,.8);text-decoration:none;line-height:1.8}
.footer-section a:hover{color:var(--red-bright)}
.footer-bottom{text-align:center;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1);opacity:.7}

/* ===== COOKIE NOTICE ===== */
.cookie-notice{
    position:fixed;bottom:0;left:0;right:0;background:var(--grad-dark);
    color:white;padding:1rem;z-index:10000;box-shadow:0 -5px 20px rgba(0,0,0,.3)
}
.cookie-content{
    display:flex;justify-content:space-between;align-items:center;
    max-width:var(--container);margin:0 auto;gap:1rem
}
.cookie-content p{margin:0;flex:1}
.cookie-content .btn{white-space:nowrap}

/* ===== ANIMATIONS ===== */
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(180deg)}}
@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}
@keyframes slideInRight{to{opacity:1;transform:translateX(0)}}
@keyframes spin{to{transform:rotate(360deg)}}

.fade-in{opacity:0;transform:translateY(30px);animation:fadeInUp .8s ease forwards}
.slide-in-right{opacity:0;transform:translateX(50px);animation:slideInRight .8s ease forwards}
.loading{
    display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);
    border-radius:50%;border-top-color:var(--white);animation:spin 1s ease-in-out infinite
}

/* ===== UTILITIES ===== */
.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}
.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}
.d-none{display:none}.d-block{display:block}.d-flex{display:flex}
.justify-center{justify-content:center}.align-center{align-items:center}
.mobile-only{display:none}.desktop-only{display:block}

/* ===== RESPONSIVE ===== */
@media (max-width:992px){
    .container{padding:0 15px}
    .section-title h2{font-size:2.2rem}
}

@media (max-width: 992px) {
    .login-grid {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 2rem;
    }
    .login-benefits-column { order: -1; } /* Mover beneficios arriba en móvil */
    .login-form-column, .login-benefits-column { padding: 1.5rem; }
}

@media (max-width:768px){
    /* Navigation */
    .mobile-menu-toggle{display:block}
    .nav{
        display:none;position:absolute;top:100%;left:0;right:0;
        background:rgba(255,255,255,.98);backdrop-filter:blur(10px);
        flex-direction:column;padding:1rem;box-shadow:0 5px 20px rgba(0,0,0,.1)
    }
    .nav.active{display:flex}
    .nav a.active::after {
        width: 30px; /* Barra más corta en móvil */
        left: 50%;
        transform: translateX(-50%);
    }
    .nav li { text-align: center; }
    
    /* Hero */
    .hero{min-height:40vh!important}
    .hero h1{font-size:2rem!important}
    .hero p{font-size:1rem!important}
    .hero-content{text-align:center}
    
    /* Layout */
    .section-title h2{font-size:2rem}
    .cards-grid{grid-template-columns:1fr}
    .stats-grid{grid-template-columns:repeat(2,1fr);max-width:400px;margin-left:auto;margin-right:auto}
    .footer-content{grid-template-columns:1fr;text-align:center}
    .cookie-content{flex-direction:column;text-align:center}
    
    /* Visibility */
    .mobile-only{display:block}
    .desktop-only{display:none}
    
    /* Forms */
    input,button{font-size:16px!important}
    
    /* Grids */
    .contact-form-grid,.location-grid,.faq-grid,.service-grid,.sustainability-grid,.application-form-grid{grid-template-columns:1fr!important}
    .contact-additional-info,.location-map,.service-image,.sustainability-visual,.benefits-info{display:none!important}
    
    /* Sections */
    .section .container>div{max-width:100%!important;padding:0 1rem}
    .section .container>div>div{padding:1.5rem 1.5rem!important}
}

@media (max-width:480px){
    .container{padding:0 15px}
    .hero h1{font-size:2rem}
    .card{padding:1.5rem}
}

/* ===== WYSIWYG CONTENT STYLES ===== */
.wysiwyg-content {
    line-height: 1.8;
    font-size: 1.1rem;
    color: var(--steel-gray);
}

.wysiwyg-content h1, 
.wysiwyg-content h2, 
.wysiwyg-content h3, 
.wysiwyg-content h4, 
.wysiwyg-content h5, 
.wysiwyg-content h6 {
    color: var(--steel-gray);
    margin: 2rem 0 1rem 0;
    line-height: 1.3;
    font-weight: 600;
}

.wysiwyg-content h1 { font-size: 2rem; }
.wysiwyg-content h2 { font-size: 1.75rem; }
.wysiwyg-content h3 { font-size: 1.5rem; }
.wysiwyg-content h4 { font-size: 1.25rem; }
.wysiwyg-content h5 { font-size: 1.125rem; }
.wysiwyg-content h6 { font-size: 1rem; }

.wysiwyg-content p {
    margin: 1rem 0;
    text-align: justify;
}

.wysiwyg-content ul, 
.wysiwyg-content ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.wysiwyg-content li {
    margin: 0.5rem 0;
}

.wysiwyg-content a {
    color: var(--primary-red);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.wysiwyg-content a:hover {
    border-bottom-color: var(--primary-red);
}

.wysiwyg-content strong, 
.wysiwyg-content b {
    font-weight: 600;
    color: #2c3e50;
}

.wysiwyg-content em, 
.wysiwyg-content i {
    font-style: italic;
}

.wysiwyg-content blockquote {
    margin: 2rem 0;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-left: 4px solid var(--primary-red);
    border-radius: 0 8px 8px 0;
    font-style: italic;
}

/* ===== SOCIAL SHARING BUTTONS ===== */
@media (max-width: 768px) {
    /* Mobile social buttons */
    .social-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .social-btn {
        justify-content: center !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.8rem !important;
    }
    
    .social-btn svg {
        width: 14px !important;
        height: 14px !important;
    }
}

@media (max-width: 480px) {
    .social-buttons {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    
    .social-btn {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }
}

/* ===== RRHH PAGE ===== */
.job-positions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.job-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-top: 4px solid var(--blue);
    transition: var(--ease);
}
.job-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}
.job-card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1rem;
}
.job-card-header h3 {
    color: var(--steel-gray);
    margin: 0;
}
.job-card p {
    color: #666;
    margin-bottom: 1.5rem;
}
.job-status-badge {
    background: var(--green);
    color: var(--white);
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.application-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.form-grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.info-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    margin-bottom: 2rem;
}
.info-card.dark {
    background: linear-gradient(135deg, var(--gray-steel), var(--gray-dark));
    color: var(--white);
}

@media (max-width: 992px) {
    .application-form-grid {
        grid-template-columns: 1fr;
    }
    .form-grid-2-col {
        grid-template-columns: 1fr;
    }
}