/*
Theme Name: Planteos Elite Child
Theme URI: https://planteos.com
Template: planteos-theme
Author: Planteos Team
Description: Child theme for Planteos with Elite Consulting aesthetic.
Version: 1.3.0
*/

:root {
    --color-deep-accent: #0F172A;
    /* Slate 900 (Dark Neutral for Sections/Text) */
    --color-blue-accent: #5D61A6;
    /* New Brand Primary Blue */
    --color-bg-light: #F8FAFC;
    /* Breathable White */
    --color-text-main: #334155;
    /* Slate 700 */
    --color-text-dark: #0F172A;
    /* Slate 900 */
    --color-cyan-accent: #0EA5E9;
    /* Cyan for Buttons/High-value actions */
    --color-header-text: #F8FAFC;
}

/* 1. Global Typography & Colors */
body {
    background-color: var(--color-bg-light);
    background-image: radial-gradient(rgba(203, 213, 225, 0.5) 1px, transparent 1px);
    background-size: 20px 20px;
    /* Technical Dot Grid Pattern */
    color: var(--color-text-main);
    font-size: 1.25rem;
    /* Base 20px */
    line-height: 1.8;
    /* Relaxed line height */
}



/* Audaz Titles */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-deep-accent);
    font-weight: 900 !important;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

/* 2. Glassmorphism Header */
/* 2. Glassmorphism Header */
.site-header {
    background: var(--color-blue-accent) !important;
    /* Solid Brand Blue initially */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05) !important;
    padding: 1rem 0;
    transition: all 0.3s ease;
}

.site-header.scrolled {
    background: rgba(56, 72, 153, 0.85) !important;
    /* Semi-transparent blue */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem 0;
}

.main-nav a {
    color: var(--color-header-text) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    font-family: 'Outfit', sans-serif !important;
}

.main-nav a.active,
.main-nav a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(14, 165, 233, 0.8);
    /* Cyan Glow for active/hover */
    opacity: 1;
}

.logo-text {
    color: var(--color-header-text) !important;
    font-weight: 900 !important;
    font-size: 1.2rem !important;
    transition: font-size 0.3s ease;
}

.site-header.scrolled .logo-text {
    font-size: 1rem !important;
    /* Shrink on scroll */
}

/* 3. Hero Section - Deep Accent (Restored & Modernized) */
.hero {
    background: radial-gradient(circle at top right, #5D61A6 0%, #0F172A 70%) !important;
    /* Deep Radial Gradient */
    padding: 6rem 0 !important;
    position: relative;
    overflow: hidden;
}

.hero h1 {
    color: #ffffff !important;
    /* White Title */
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    font-size: 4rem !important;
}

.hero p {
    color: #cbd5e1 !important;
    /* Light Slate Text */
    font-size: 1.5rem !important;
    font-weight: 400;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero .btn-primary {
    background-color: var(--color-blue-accent) !important;
    /* Brand Blue (Matches Contact Button) */
    color: #ffffff !important;
    border: none;
    padding: 18px 45px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600;
    font-size: 1.2rem;
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.4);
    /* Cyan Glow */
    margin-top: 1rem;
    transition: all 0.3s ease;
}

.hero .btn-primary:hover {
    background-color: #ffffff !important;
    /* White on Hover */
    color: var(--color-blue-accent) !important;
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
}

/* 4. Services (Que Hacemos) - Matching Style */
.services {
    background-color: transparent !important;
    /* Reveal body pattern */
    padding: 0 !important;
    /* Reset padding to handle overlap */
    position: relative;
    padding-bottom: 4rem !important;
    /* Reduced from 6rem */
    z-index: 1;
}

/* Background Image Pseudo-element for "Overlap" effect */
.services::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Reduced height slightly to account for less padding */
    height: 500px;
    background: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.95)), url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=1920');
    background-size: cover;
    background-position: center;
    z-index: -1;
    /* Angle or straight cut? Straight is cleaner for "Elite" */
}

/* Unifying Titles - Now on Dark Background */
.services .section-title {
    padding-top: 4rem !important;
    margin-bottom: 3rem;
}

.services .section-title h2 {
    font-size: 3rem !important;
    text-align: center;
    color: #ffffff !important;
    /* White text on the dark image */
}

.services .section-subtitle {
    font-size: 1.35rem !important;
    color: #e2e8f0 !important;
    /* Light text */
}

.service-card {
    border: none !important;
    background: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease;
    padding: 2.5rem !important;
    /* Slightly reduced inner padding */
    border-radius: 12px !important;
    /* Ensure it pops against both backgrounds */
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.service-card h3 {
    font-size: 1.75rem !important;
    font-weight: 900 !important;
    margin-bottom: 1.25rem !important;
    color: var(--color-deep-accent);
}

.service-card p {
    font-size: 1.2rem !important;
    color: var(--color-text-main);
}

.service-icon {
    transform: scale(1.2);
    margin-bottom: 2rem !important;
    color: var(--color-blue-accent) !important;
}

.service-icon i {
    color: var(--color-blue-accent) !important;
}

/* 5. About (Quienes Somos) - Style Alignment */
.about {
    padding: 4rem 0 !important;
    /* Reduced from 6rem */
    background-color: transparent !important;
    /* Reveal body pattern */
}

.about h2 {
    font-size: 3rem !important;
    color: var(--color-blue-accent) !important;
    /* Brand Blue */
}

.about-content p {
    font-size: 1.3rem !important;
    /* Consistent large text */
    color: var(--color-text-main);
    line-height: 1.8;
}

.value-tag {
    font-size: 1rem !important;
    padding: 0.75rem 1.5rem !important;
    background: linear-gradient(135deg, var(--color-deep-accent) 0%, #1e293b 100%) !important;
    /* Subtle dark gradient */
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50px !important;
    /* Fully rounded pill shape */
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500;
    margin: 0.25rem;
    display: inline-block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    /* Inner "glow" + drop shadow */
    position: relative;
    overflow: hidden;
}

.value-tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.1), transparent);
    /* Cyan shine */
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.value-tag:hover {
    transform: translateY(-2px);
    border-color: var(--color-cyan-accent) !important;
    box-shadow: inset 0 0 10px rgba(14, 165, 233, 0.2), 0 6px 12px rgba(0, 0, 0, 0.15) !important;
    /* Enhanced glow on hover */
}

.value-tag:hover::before {
    transform: translateX(100%);
}

/* Clients Alignment Fix */
.clients {
    padding: 6rem 0 !important;
    text-align: center;
    /* Ensure contents are centered */
}

/* About Image Fullwidth-ish */
/* About Image Refined */
.about-image {
    min-height: 500px !important;
    width: 100% !important;
}

.about-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 20px !important;
    /* Soften edges */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
    /* Soft Deep Shadow */
    /* Transform to break grid slightly if needed, but simple full fill needed first */
}

.clients-title {
    text-align: center !important;
    font-size: 1.5rem !important;
    /* Made visible and intentional */
    font-weight: 700 !important;
    color: var(--color-deep-accent) !important;
    margin-bottom: 3rem !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* 6. Footer - Deep Accent */
footer {
    background: var(--color-deep-accent) !important;
    color: #94a3b8 !important;
    border-top: 5px solid var(--color-blue-accent);
    padding: 4rem 0 !important;
    /* Consistent padding */
}

footer p {
    font-size: 1.1rem !important;
}

footer a {
    color: #ffffff !important;
}

/* Enlarge Social Icons */
footer .social-links a {
    background: rgba(255, 255, 255, 0.05);
    width: 60px !important;
    /* Previously 50px */
    height: 60px !important;
    /* Previously 50px */
    margin: 0 12px !important;
    font-size: 1.75rem !important;
    /* Icon size inside */
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    /* Make them circular just in case, or leave square if preferred. User didn't specify shape but circular is common for 'elite'. Let's stick to square logic if not specified, but flex is key. Actually, radius 50% is implied by the elite style usually. Let's add it. No, stick to rect if not sure. Let's just center it. */
    text-decoration: none !important;
}

footer .social-links a i {
    line-height: 1 !important;
    /* Fix vertical alignment issues */
}

/* 7. Contact Palette Fix */
/* Parent theme used .contact (var--secondary-color). We force Deep Accent */
.contact {
    background: var(--color-deep-accent) !important;
    color: #ffffff !important;
    padding: 4rem 0 !important;
    /* Reduced from 6rem */
}

.contact h2 {
    color: #ffffff !important;
    font-size: 3rem !important;
}

.contact p {
    color: #cbd5e1 !important;
    font-size: 1.35rem !important;
}

/* Form Styles Override */
.contact-form-wrapper input[type="text"],
.contact-form-wrapper input[type="email"],
.contact-form-wrapper input[type="tel"],
.contact-form-wrapper textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    padding: 1.25rem !important;
    /* Larger inputs */
    font-size: 1.1rem !important;
    border-radius: 8px !important;
}

.contact-form-wrapper input::placeholder,
.contact-form-wrapper textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

.contact-form-wrapper input[type="submit"] {
    background-color: var(--color-blue-accent) !important;
    /* Brand Blue */
    color: white !important;
    border: none !important;
    padding: 18px 50px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600;
    font-size: 1.2rem !important;
    margin-top: 2rem !important;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
    /* Cyan Glow */
}

.contact-form-wrapper input[type="submit"]:hover {
    background: white !important;
    color: var(--color-deep-accent) !important;
}

/* 8. Hero Secundario Alignment Check */
.hero-secundario .container {
    background: var(--color-deep-accent) !important;
    color: #ffffff !important;
    padding: 4rem 3rem !important;
    /* Reduced from 5rem */
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Alignment Correction */
    text-align: left !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Corrects centering issues if any */
    justify-content: center;
    margin: 0 auto;
    /* Corrects "correcta alineacion" on page */
    max-width: 1100px !important;
    /* Ensure it doesn't stretch weirdly */
    width: 100%;
}

.hero-secundario h2 {
    color: #ffffff !important;
    font-size: 3rem !important;
    margin-bottom: 2rem !important;
}

.hero2-content {
    color: #e2e8f0 !important;
    font-size: 1.4rem !important;
    line-height: 1.8;
}

/* 9. Hero Terciario (Director Quote) Override */
.hero-terciario {
    background: transparent !important;
    /* Reveal body pattern */
    padding: 2rem 0 !important;
}

.hero-terciario .quote-text {
    font-size: 2rem !important;
    /* Large editorial quote size */
    font-weight: 300 !important;
    color: var(--color-deep-accent) !important;
    font-style: italic;
    line-height: 1.4;
    max-width: 900px;
    margin: 0 auto 3rem auto !important;
}

.hero-terciario .author-name {
    color: var(--color-blue-accent) !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'Outfit', sans-serif !important;
}

.hero-terciario .author-role {
    color: var(--color-text-main) !important;
    font-size: 1rem !important;
}

.hero-terciario .author-avatar img {
    border-color: var(--color-blue-accent) !important;
    width: 100px !important;
    height: 100px !important;
}

/* 10. Mobile Adjustments */
@media (max-width: 768px) {

    /* Hero 2 Mobile Fixes */
    .hero-secundario .container {
        padding: 2rem 1.5rem !important;
        /* Increase breathing room on sides */
    }

    .hero-secundario h2 {
        font-size: 2rem !important;
        /* Reduce font size to prevent edge collision */
        word-break: break-word;
        /* Ensure long words break if absolutely necessary */
    }

    /* About Us Mobile Fixes */
    .about {
        padding: 2rem 0 !important;
    }

    .about-image {
        min-height: 250px !important;
        /* Reduce height on mobile */
        margin-top: 1rem !important;
    }
}