/* 
   Project: Clean Corporate SAP Logistics
   Style: Professional, Semantic, Grid-Based
   Author: Juan Carlos Prado
*/

:root {
    /* --- COLOR PALETTE --- */
    --primary-blue: #0a3d62;
    /* Deep Corporate Blue */
    --accent-red: #c0392b;
    /* Brick Red CTA */
    --text-main: #1f2937;
    /* Dark Charcoal */
    --text-light: #6b7280;
    /* Soft Gray */
    --bg-light: #f8f9fa;
    /* Section Backgrounds */
    --white: #ffffff;

    /* --- SPACING --- */
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
    --container-max: 1200px;
}

/* --- RESET & BASE --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    /* Single Font Family */
    background-color: var(--white);
    color: var(--text-main);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

ul {
    list-style: none;
}

/* --- LAYOUT UTILITIES --- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}

/* --- TABLE RESPONSIVE UTILITY --- */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}

.section {
    padding: 80px 0;
}

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

/* --- LAYOUT GRID (Desktop) --- */
.page-wrapper {
    display: grid;
    grid-template-columns: 7fr 3fr;
    /* Main Content (70%) + Sidebar (30%) */
    gap: 40px;
    margin-top: 40px;
    margin-bottom: 60px;
}

/* --- BUTTONS --- */
.btn {
    display: inline-block;
    padding: 12px 30px;
    /* Wider for premium feel */
    border-radius: 50px;
    /* Pill Shape */
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-primary {
    background: linear-gradient(135deg, #0a3d62 0%, #0d4a75 100%);
    color: var(--white);
    border: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(10, 61, 98, 0.3);
}

.btn-secondary {
    background-color: var(--white);
    color: var(--primary-blue);
    border: 2px solid var(--white);
    /* White border for dark bg compatibility */
}

.btn-secondary:hover {
    background-color: transparent;
    color: var(--white);
}

.btn-cta {
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
    color: var(--white);
    border: none;
    box-shadow: 0 4px 15px rgba(192, 57, 43, 0.3);
}

.btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(192, 57, 43, 0.4);
}

.btn-hero-cta {
    display: inline-block;
    background-color: #c0392b;
    /* Brick Red */
    color: var(--white);
    padding: 15px 30px;
    /* Big Generous Padding */
    border-radius: 50px;
    font-weight: 700;
    /* Bold */
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-hero-cta:hover {
    background-color: #a93226;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* --- HEADER (Single-Level Refactor) --- */
header {
    background-color: transparent;
    position: relative;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.main-menu-bar {
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 10px 0;
    /* Add visual breathing room */
}

.logo {
    font-size: 1.5rem;
    /* Adjusted for inline */
    font-weight: 900;
    letter-spacing: -1px;
    color: var(--white);
    /* Changed to white for dark bg */
    text-transform: uppercase;
    margin-right: 40px;
    /* Space between logo and nav */
}

/* Nav Links inside Main Menu */
.main-nav ul li a {
    position: relative;
    padding-bottom: 4px;
}

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

.main-nav ul li a:hover::after {
    width: 100%;
}

@media (max-width: 900px) {
    .main-menu-bar .container {
        flex-direction: column;
        gap: 15px;
    }

    .logo {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .main-nav {
        margin-bottom: 15px;
    }
}

/* --- DROPDOWN NAVIGATION --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-links li {
    position: relative;
    margin-right: 25px;
}

.nav-links li a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s;
}

.nav-links li a:hover {
    color: var(--accent-red);
}

/* Dropdown Container */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    cursor: pointer;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 260px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    z-index: 1001;
    border-radius: 4px;
    top: 100%;
    left: 0;
    padding: 10px 0;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: #333 !important;
    /* Force dark text on white bg */
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 0.9rem;
    border-bottom: 1px solid #f1f1f1;
}

.dropdown-content a:last-child {
    border-bottom: none;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #f9f9f9;
    color: var(--primary-blue) !important;
    padding-left: 20px;
    /* Slide effect */
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* --- HERO SECTION --- */
.hero {
    background: linear-gradient(135deg, #0a3d62 0%, #051e3e 100%);
    /* Premium Dark Gradient */
    padding: 120px 0;
    text-align: center;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

/* Subtle pattern overlay */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(#ffffff 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.05;
    pointer-events: none;
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 25px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.1;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.hero p {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40px;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
}

/* --- ARTICLES LIST (Grid & Interactive) --- */
.articles-list {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile First: Stacked */
    gap: 25px;
    width: 100%;
}

/* Force 3 Columns on Computer Screens > 900px */
@media (min-width: 900px) {
    .articles-list {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

.article-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    width: 100%;
    padding: 15px;
    background: white;
    border: 2px solid transparent;
    border-radius: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    gap: 0;
    /* Removing gap, using margins on thumb instead */
    position: relative;
    max-width: none !important;
}

.article-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-blue);
    /* Blue Border on Hover */
}

/* Arrow Indicator */
.article-item::after {
    content: "→";
    font-size: 24px;
    color: #cbd5e0;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 300;
    transition: color 0.3s;
}

.article-item:hover::after {
    color: var(--accent-red);
    /* Arrow lights up */
}

.article-thumb-small {
    margin-right: 15px;
    margin-bottom: 0;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background-color: #f1f2f6;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
}

.article-thumb-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-info h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
}

.article-info h3 a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: color 0.3s;
}

.article-info h3 a:hover {
    color: var(--accent-red);
}

.article-info p {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 0;
    line-height: 1.5;
}

/* Silo Badges */
.silo-badge {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: inline-block;
}

.silo-tech {
    color: #2980b9;
}

.silo-strat {
    color: #27ae60;
}

/* Section Footer (See More Link) */
.section-footer {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    /* Right align */
    width: 100%;
}

.btn-text-arrow {
    color: var(--primary-blue);
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.btn-text-arrow:hover {
    color: var(--accent-red);
    /* Using var for consistency, fallback to #d93025 if needed */
    text-decoration: underline;
}

.silo-career {
    color: #e67e22;
}

.read-more {
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.read-more:hover {
    gap: 10px;
    color: var(--accent-red);
}

/* --- ABOUT SECTION --- */
.about-section {
    background-color: var(--white);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

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

.about-text h2 {
    font-size: 2.2rem;
    color: var(--primary-blue);
    font-weight: 700;
    margin-bottom: 20px;
}

.about-text p {
    margin-bottom: 20px;
    color: var(--text-light);
}

/* --- FOOTER --- */
/* --- CORPORATE FOOTER --- */
footer {
    background-color: #0b162a;
    color: #cbd5e0;
    padding: 60px 0 30px;
    font-size: 0.95rem;
    border-top: 4px solid var(--accent-red);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
    text-align: left;
}

.footer-col h3 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Column 1: Brand */
.footer-logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 15px;
    display: block;
    text-decoration: none;
    letter-spacing: -1px;
}

.footer-desc {
    line-height: 1.6;
    color: #a0aec0;
    max-width: 300px;
}

/* Column 2: Quick Links */
.footer-links {
    list-style: none;
    padding: 0;
}

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

.footer-links a {
    color: #cbd5e0;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #fff;
    padding-left: 5px;
}

/* Column 3: Contact */
.footer-contact p {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    text-align: center;
    font-size: 0.85rem;
    color: #718096;
}

/* Mobile Footer */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 30px;
    }

    .footer-desc {
        margin: 0 auto;
    }

    .footer-contact p {
        justify-content: center;
    }
}

/* --- TRUST BAR --- */
.trust-bar {
    background-color: #ffffff;
    padding: 40px 0;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}

.trust-label {
    font-size: 0.75rem;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    font-weight: 600;
    display: block;
}

.trust-logos {
    display: flex;
    justify-content: center;
    gap: 50px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Soft Shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.product-card h3 {
    color: var(--primary-blue);
    margin: 15px 0 10px;
    font-size: 1.4rem;
    font-weight: 700;
}

.product-card p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}

.product-icon {
    font-size: 3rem;
    color: var(--accent-red);
    margin-bottom: 10px;
    display: inline-block;
}

/* --- AUTHOR WIDGET --- */
.widget-author {
    text-align: center;
    background: #fff;
    border: none;
    /* Removed border */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* Soft Shadow */
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
}

.author-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 15px;
    object-fit: cover;
    border: 3px solid var(--white);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.widget-author h4 {
    color: var(--primary-blue);
    margin-bottom: 5px;
    font-size: 1.2rem;
    font-weight: 700;
}

.widget-author p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

.author-cred {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--accent-red);
    font-weight: 800;
    display: block;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* --- CLOSE BUTTON --- */
.close-bar {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.8;
    margin-left: 20px;
    line-height: 1;
}

.close-bar:hover {
    opacity: 1;
}

/* RESPONSIVE */
/* RESPONSIVE */
@media (max-width: 900px) {
    .page-wrapper {
        grid-template-columns: 1fr;
        /* Stack main and sidebar */
        gap: 30px;
    }

    .main-menu-bar .container {
        flex-direction: column;
        gap: 15px;
    }

    .logo {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .main-nav {
        margin-bottom: 15px;
        width: 100%;
        /* Full width for centering */
    }

    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .main-nav ul li a {
        margin-right: 15px;
        /* Adjust spacing for wrap */
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {

    /* 1. LAYOUT GENERAL */
    .container {
        padding: 0 15px;
        /* User requested 15px padding */
        width: 100%;
    }

    .page-wrapper {
        display: block;
        /* Force stack */
    }

    .sidebar {
        margin-top: 50px;
        /* Space between content and sidebar */
    }

    /* 2. GRID DE ARTÍCULOS */


    .article-item {
        flex-direction: column;
        /* Stack image and text inside card if needed, or keep row? User asked cards to stack vertically. The card internal layout wasn't specified but vertical stack is safer for narrow screens */
        text-align: left;
    }

    .article-thumb-small {
        width: 100%;
        height: 180px;
        /* Larger image area for mobile */
        margin-bottom: 15px;
    }

    /* 3. TIPOGRAFÍA */
    .hero h1 {
        font-size: 2rem;
        /* Reduced from 3.5rem to fit */
        line-height: 1.2;
    }

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

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

    .lead-magnet-bar {
        padding: 15px;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .lead-magnet-bar div {
        width: 100%;
        justify-content: center;
    }
}

/* --- CRITICAL MOBILE UI FIXES (MANDATORY) --- */
@media only screen and (max-width: 768px) {

    /* 1. Prevent Horizontal Scroll & Force Width */
    body,
    html,
    .container,
    .page-wrapper {
        overflow-x: hidden;
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    /* 2. Force Vertical Stacking (Grid/Flex to Column) */
    .about-grid,
    .about-grid,
    .page-wrapper,
    .main-menu-bar .container {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px;
    }

    /* 3. Readable Typography */
    h1 {
        font-size: 28px !important;
        line-height: 1.2;
    }

    p {
        font-size: 16px !important;
    }

    /* 4. Navigation Menu Stack */
    .main-nav ul {
        flex-direction: column;
        align-items: center;
        padding: 0;
    }

    .main-nav li {
        margin: 10px 0;
    }
}

/* --- RESOURCES PAGE STYLES --- */
.hero-mini {
    background: linear-gradient(135deg, #0b162a 0%, #1a237e 100%);
    color: white;
    text-align: center;
}

.section-title-sales {
    font-size: 1.8rem;
    color: var(--primary-blue);
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 30px;
    font-weight: 700;
}

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

.product-card-premium {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    transition: transform 0.3s;
}

.product-card-premium:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-blue);
}

.product-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--accent-red);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.product-card-premium h3 {
    font-size: 1.4rem;
    color: var(--primary-blue);
    margin-bottom: 15px;
}

.price {
    font-size: 2rem;
    font-weight: 800;
    color: #2d3748;
    margin-bottom: 15px;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.feature-list li {
    margin-bottom: 8px;
    color: #4a5568;
}

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

/* Service List */
.service-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 20px 30px;
    border-radius: 8px;
    border-left: 5px solid var(--primary-blue);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.service-item:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.service-info h3 {
    margin: 0 0 5px 0;
    color: var(--primary-blue);
    font-size: 1.2rem;
}

.service-info p {
    margin: 0;
    color: #718096;
}

/* Affiliate Grid */
.affiliate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.affiliate-card {
    background: #f7fafc;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px dashed #cbd5e0;
}

.affiliate-card h4 {
    margin-bottom: 5px;
    color: #2d3748;
    font-weight: 700;
}

@media (max-width: 768px) {
    .service-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .service-item .btn {
        width: 100%;
        text-align: center;
    }
}