/* style.css - Consultoría Financiera Argentina */

/* CSS Variables */
:root {
    --primary-color: #2A70B8; /* Professional Blue */
    --primary-color-dark: #20568f;
    --secondary-color: #F7931E; /* Warm Orange */
    --secondary-color-dark: #d67c13;
    --accent-color-1: #B84A2A; /* Red-Orange */
    --accent-color-2: #5CB85C; /* Trustworthy Green */

    --text-dark: #222222;
    --text-light: #FFFFFF;
    --text-muted: #555555;
    --text-on-primary: var(--text-light);
    --text-on-secondary: var(--text-light);

    --bg-light: #F8F9FA;
    --bg-white: #FFFFFF;
    --bg-dark: #2c3e50; /* Dark Blue-Gray for footer */
    --bg-glass: rgba(255, 255, 255, 0.1);
    --bg-overlay-dark: rgba(0, 0, 0, 0.55);
    --bg-overlay-primary: rgba(42, 112, 184, 0.75); /* Primary color with opacity */

    --border-color: #DEE2E6;
    --border-color-light: rgba(255, 255, 255, 0.2);

    --font-primary: 'Space Grotesk', sans-serif;
    --font-secondary: 'DM Sans', sans-serif;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.075);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.15);

    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;

    --header-height: 70px; /* Approximate */
    --footer-height: 200px; /* Approximate */

    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
    --gradient-secondary: linear-gradient(135deg, var(--secondary-color), var(--secondary-color-dark));
}

/* Global Styles */
html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

body {
    font-family: var(--font-secondary);
    color: var(--text-dark);
    line-height: 1.7;
    background-color: var(--bg-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.title, .subtitle { /* Bulma classes */
    font-family: var(--font-primary);
    color: var(--text-dark);
    font-weight: 700;
}

.title { /* Bulma .title */
    line-height: 1.2;
}

.subtitle { /* Bulma .subtitle */
    line-height: 1.4;
    color: var(--text-muted);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: var(--primary-color-dark);
    text-decoration: underline;
}

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

.section {
    padding: 4rem 1.5rem; /* Default section padding */
}

.container { /* Bulma .container */
    max-width: 1140px; /* Standard container width */
    margin-left: auto;
    margin-right: auto;
}

/* Utility Classes */
.text-shadow-light { text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
.text-shadow-dark { text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }
.has-text-primary { color: var(--primary-color) !important; }
.has-text-secondary { color: var(--secondary-color) !important; }
.has-text-accent { color: var(--accent-color-2) !important; }
.has-text-light { color: var(--text-light) !important; }
.has-background-light { background-color: var(--bg-light) !important; }

.content-under-fixed-header {
    padding-top: calc(var(--header-height) + 2rem); /* For privacy/terms pages */
}


/* Global Button Styles */
.button, button, input[type="submit"], input[type="button"], .btn {
    font-family: var(--font-primary);
    font-weight: 500;
    padding: 0.8em 1.8em;
    border-radius: var(--border-radius-md);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    line-height: 1.5;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.button.is-primary, .btn-primary {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
}
.button.is-primary:hover, .btn-primary:hover {
    background-color: var(--primary-color-dark);
}
.button.is-secondary, .btn-secondary {
    background-color: var(--secondary-color);
    color: var(--text-on-secondary);
}
.button.is-secondary:hover, .btn-secondary:hover {
    background-color: var(--secondary-color-dark);
}
.button.is-info { /* Bulma class */
    background-color: var(--accent-color-2);
    color: var(--text-light);
}
.button.is-info:hover {
    background-color: #4a9f4a; /* Darker green */
}
.button.is-large {
    font-size: 1.25rem;
    padding: 1em 2em;
}
.button.is-small {
    font-size: 0.875rem;
    padding: 0.6em 1.2em;
}
.button.is-outlined.is-primary {
    background-color: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.button.is-outlined.is-primary:hover {
    background-color: var(--primary-color);
    color: var(--text-light);
}


/* Header & Navbar */
.header { /* Wrapper for navbar */
    position: sticky; /* Fixed navbar */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: var(--header-height);
}
.navbar.is-transparent { /* Bulma class, can be customized */
    background-color: var(--bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color-light);
    height: 100%;
    align-items: center;
}
.navbar-brand .navbar-item img {
    max-height: 45px;
}
.navbar-item, .navbar-link {
    font-family: var(--font-primary);
    font-weight: 500;
    color: var(--text-dark); /* Default text color for navbar items */
    transition: color 0.3s ease;
}
.navbar.is-transparent .navbar-item:hover,
.navbar.is-transparent .navbar-link:hover,
.navbar.is-transparent .navbar-item.is-active, /* For active page indicators */
.navbar.is-transparent .navbar-link.is-active {
    background-color: transparent;
    color: var(--primary-color);
}
.navbar-dropdown {
    background-color: var(--bg-white);
    border-top: 2px solid var(--primary-color);
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    box-shadow: var(--shadow-md);
}
.navbar-dropdown .navbar-item {
    color: var(--text-dark);
}
.navbar-dropdown .navbar-item:hover {
    background-color: var(--bg-light);
    color: var(--primary-color);
}
.navbar-burger {
    color: var(--primary-color);
    height: var(--header-height);
    width: var(--header-height);
}
@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: var(--bg-white);
        box-shadow: var(--shadow-lg);
        padding: 0.5rem 0;
    }
}


/* Hero Section */
.hero-main-background {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative; /* For overlay */
}
.hero-main-background .hero-body {
    position: relative; /* For z-indexing content above overlay if needed */
    z-index: 2;
    padding: 6rem 1.5rem; /* Adjust padding for large hero */
}
.hero-main-background::before { /* Overlay */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-overlay-dark);
    z-index: 1;
}
.hero-content-overlay { /* Specific for the text block within hero */
    /* This class was in HTML, but hero::before is now used for full overlay */
    /* If still used, style accordingly */
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    /* background-color: var(--bg-overlay-dark); */ /* Already handled by hero::before */
}
.hero-title {
    color: var(--text-light) !important;
    font-size: clamp(2.5rem, 5vw, 4rem); /* Responsive font size */
    margin-bottom: 1rem;
    text-shadow: var(--text-shadow-dark);
}
.hero-subtitle {
    color: var(--text-light) !important;
    font-size: clamp(1.2rem, 3vw, 1.75rem);
    margin-bottom: 2.5rem;
    text-shadow: var(--text-shadow-dark);
}


/* Section Titles */
.section-title {
    font-size: clamp(2rem, 4vw, 2.8rem);
    color: var(--primary-color);
    margin-bottom: 1rem !important; /* Override Bulma */
    text-align: center;
}
.section-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--text-muted);
    margin-bottom: 3rem !important; /* Override Bulma */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


/* Card Styles (Projects, Webinars, Workshops, Instructors, Behind the Scenes) */
.card { /* Bulma .card */
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    height: 100%; /* For equal height cards in a row */
    display: flex;
    flex-direction: column;
    background-color: var(--bg-white);
    text-align: center; /* Center content like titles and text within card-content */
}
.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.card .card-image { /* Bulma structure */
    border-top-left-radius: var(--border-radius-lg);
    border-top-right-radius: var(--border-radius-lg);
    overflow: hidden; /* Clips the image container if it has rounded corners */
    display: flex; /* Centers the image-container if it's not full width */
    justify-content: center;
}
.card .image-container { /* Custom or Bulma's figure.image */
    width: 100%;
    height: 220px; /* Fixed height for card images */
    overflow: hidden; /* Crucial for object-fit */
}
.card .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.card:hover .image-container img {
    transform: scale(1.05);
}
.card .card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Allows content to fill space if card heights are equalized by JS/Grid */
}
.card .card-content .title { /* Title inside card */
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}
.card .card-content .subtitle { /* Subtitle inside card */
    color: var(--secondary-color);
    font-size: 1rem;
    margin-bottom: 1rem;
}
.card .card-content .content {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Specific Card Types */
.webinar-card .card-image { position: relative; } /* For overlay tag */
.webinar-card .card-image-overlay {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
}
.webinar-card .card-image-overlay .tag { font-weight: bold; }

.instructor-card .image-container img.is-rounded { /* Bulma class */
    border: 4px solid var(--bg-white);
    box-shadow: var(--shadow-sm);
}


/* "Read More" Links */
.learn-more-link {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.6em 1.2em;
    background-color: var(--secondary-color);
    color: var(--text-light) !important; /* Override default link color */
    border-radius: var(--border-radius-sm);
    text-decoration: none !important; /* Override default link underline */
    font-weight: 500;
    font-size: 0.9rem;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.learn-more-link:hover, .learn-more-link:focus {
    background-color: var(--secondary-color-dark);
    color: var(--text-light) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}


/* Timeline (Success Stories) - Enhancing Bulma's Timeline */
.timeline .timeline-header .tag {
    background-color: var(--primary-color);
    color: var(--text-light);
    font-size: 1rem;
}
.timeline .timeline-item .timeline-marker.is-primary { border-color: var(--primary-color); background-color: var(--primary-color); }
.timeline .timeline-item .timeline-marker.is-warning { border-color: var(--secondary-color); background-color: var(--secondary-color); }
.timeline .timeline-item .timeline-marker.is-success { border-color: var(--accent-color-2); background-color: var(--accent-color-2); }
.timeline .timeline-item .timeline-marker.is-danger { border-color: var(--accent-color-1); background-color: var(--accent-color-1); }

.timeline .timeline-item .timeline-marker.is-image img {
    border-radius: 50%;
    border: 2px solid var(--bg-white);
}
.timeline .timeline-content {
    padding: 1em 2em;
    background-color: var(--bg-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}
.timeline .timeline-content .heading {
    font-family: var(--font-primary);
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}


/* Statistical Widgets */
.statistical-widgets .stat-widget { /* .box.stat-widget from HTML */
    border-top: 5px solid var(--primary-color);
    padding: 2rem 1.5rem;
    border-radius: var(--border-radius-md);
    background-color: var(--bg-white);
    box-shadow: var(--shadow-md);
    text-align: center;
}
.statistical-widgets .stat-number {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--secondary-color);
    line-height: 1;
    margin-bottom: 0.5rem;
}
.statistical-widgets .stat-widget .subtitle { /* Subtitle inside widget */
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 1rem;
}
.statistical-widgets .animated-icon img {
    width: 48px;
    height: 48px;
    /* Add CSS animations here if desired, e.g. subtle pulse or spin on hover */
}


/* Events Calendar Section */
.event-item { /* .box.event-item from HTML */
    margin-bottom: 1.5rem;
    border-left: 5px solid var(--primary-color);
    transition: all 0.3s ease;
    padding: 1.5rem;
    border-radius: var(--border-radius-md);
    background-color: var(--bg-white);
}
.event-item:hover {
    box-shadow: var(--shadow-lg);
    transform: translateX(5px);
}
.event-date-box {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 15px;
    text-align: center;
    border-radius: var(--border-radius-sm);
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 1.5rem; /* Space from media-content */
}
.event-date-box .day {
    font-size: 2em;
    font-weight: bold;
    line-height: 1;
}
.event-date-box .month {
    font-size: 0.9em;
    text-transform: uppercase;
    line-height: 1;
}
.event-item .media-content .title { /* Title of the event */
    color: var(--primary-color);
    font-size: 1.4rem;
    margin-bottom: 0.5rem !important;
}
.event-item .media-content small {
    display: block;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}


/* Parallax Background Sections (e.g., Behind the Scenes, Contact) */
.parallax-background {
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 6rem 1.5rem; /* Ensure enough padding for content visibility */
}
.parallax-background::before { /* Overlay for parallax sections */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Use primary color overlay for distinct sections like contact */
    /* background: var(--bg-overlay-primary);  -> This is in HTML inline style for contact section */
    /* background: var(--bg-overlay-dark); -> Default for other parallax if not specified */
    z-index: 1;
}
.parallax-background .container { /* Ensure container content is above overlay */
    position: relative;
    z-index: 2;
}
.parallax-background .hero-content-overlay { /* If this class is used within parallax for text block */
    background-color: transparent; /* Overlay handled by ::before on parent */
    /* If a secondary overlay is needed for text block specifically */
    /* background-color: rgba(0,0,0,0.3); */
    padding: 2rem;
    border-radius: var(--border-radius-lg);
}

.parallax-background .section-title,
.parallax-background .section-subtitle,
.parallax-background .label,
.parallax-background .checkbox,
.parallax-background p { /* Ensure all text is light */
    color: var(--text-light) !important;
    text-shadow: var(--text-shadow-dark);
}
.parallax-background .checkbox a {
    color: #add8e6 !important; /* Lighter blue for links on dark bg */
}
.parallax-background .checkbox a:hover {
    color: var(--text-light) !important;
}


/* External Resources Section */
.resource-list .resource-item { /* .box.resource-item from HTML */
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background-color: var(--bg-white);
    border-radius: var(--border-radius-md);
    border-left: 5px solid var(--accent-color-2);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s ease;
}
.resource-list .resource-item:hover {
    box-shadow: var(--shadow-md);
}
.resource-list .resource-item h4.title { /* Title of resource item */
    font-size: 1.25rem;
    margin-bottom: 0.5rem !important;
}
.resource-list .resource-item h4 a {
    color: var(--primary-color);
    font-weight: bold;
}
.resource-list .resource-item h4 a:hover {
    color: var(--primary-color-dark);
}
.resource-list .resource-item p {
    color: var(--text-muted);
    font-size: 0.95rem;
}


/* Contact Form (within parallax section) */
.contact-form-styled .label {
    font-weight: 500;
    margin-bottom: 0.75rem; /* More space for label */
}
.contact-form-styled .input,
.contact-form-styled .textarea,
.contact-form-styled .select select {
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--text-dark);
    padding: 0.8em 1em;
    font-size: 1rem;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
}
.contact-form-styled .input:focus,
.contact-form-styled .textarea:focus,
.contact-form-styled .select select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(42, 112, 184, 0.25); /* Primary color focus ring */
}
.contact-form-styled .input::placeholder,
.contact-form-styled .textarea::placeholder {
    color: #999;
}
.contact-form-styled .select { /* Bulma wrapper for select */
    border-radius: var(--border-radius-md);
}
.contact-form-styled .select:not(.is-multiple)::after { /* Arrow for select */
    border-color: var(--primary-color);
}
.contact-form-styled .field {
    margin-bottom: 1.5rem; /* Spacing between form fields */
}


/* Footer */
.footer { /* Bulma .footer */
    background-color: var(--bg-dark);
    color: #bdc3c7; /* Light Gray text */
    padding: 3rem 1.5rem;
    font-size: 0.95rem;
}
.footer .title.footer-title {
    color: var(--text-light);
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
}
.footer a {
    color: #ecf0f1; /* Lighter gray for links */
    transition: color 0.3s ease;
}
.footer a:hover {
    color: var(--secondary-color);
}
.footer ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
.footer ul li {
    margin-bottom: 0.75rem;
}
.footer .social-links { /* If you add a wrapper for social links */
    margin-top: 1rem;
}
.footer .social-links a { /* Specific style for text social links */
    margin: 0 0.75rem;
    font-size: 1rem;
    display: inline-block; /* For proper spacing */
}
.footer .social-links a:first-child { margin-left: 0; }
.footer .social-links a:last-child { margin-right: 0; }

/* Cookie Consent Popup (styles from HTML, can be enhanced here) */
#cookie-consent-popup {
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}
#cookie-consent-popup p a {
    font-weight: bold;
}
#cookie-consent-popup button#accept-cookies {
    background-color: var(--primary-color) !important; /* Override inline styles if needed */
    font-weight: 500;
}
#cookie-consent-popup button#accept-cookies:hover {
    background-color: var(--primary-color-dark) !important;
}


/* Animation on Scroll Helper */
.animate-on-scroll {
    /*opacity: 0;*/
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
    will-change: opacity, transform;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Specific Page Styles */

/* success.html: Center content vertically and horizontally within the space between header and footer */
body.page-success {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.page-success .main-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
body.page-success .main-container > header,
body.page-success .main-container > footer {
    flex-shrink: 0; /* Prevent header/footer from shrinking */
}
body.page-success .main-container > .section { /* The main content section */
    flex-grow: 1; /* Takes remaining vertical space */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers the .container */
    align-items: center; /* Horizontally centers the .container */
    text-align: center;
}
body.page-success .main-container > .section .container {
    max-width: 700px; /* Limit width of success message block */
}
body.page-success .main-container > .section .title {
    color: var(--accent-color-2); /* Green for success */
}

/* privacy.html & terms.html: Add padding for fixed header */
body.page-legal .main-container > .section.content-section { /* Add .content-section to main section on these pages */
    padding-top: calc(var(--header-height) + 3rem); /* Space for fixed header + extra margin */
    padding-bottom: 3rem;
}
body.page-legal .main-container > .section.content-section .content h1,
body.page-legal .main-container > .section.content-section .content h2,
body.page-legal .main-container > .section.content-section .content h3 {
    color: var(--primary-color);
    margin-top: 2rem;
    margin-bottom: 1rem;
}


/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .section {
        padding: 3rem 1rem;
    }
    .hero-main-background .hero-body {
        padding: 4rem 1rem;
    }
    .columns.is-centered .column.is-two-thirds {
        flex: none;
        width: 90%; /* For centered form on mobile */
    }
    .statistical-widgets .column {
        margin-bottom: 1.5rem; /* Space between stat widgets on mobile */
    }
    .event-item .media { /* Stack date box and content on mobile */
        flex-direction: column;
        align-items: flex-start;
    }
    .event-date-box {
        margin-right: 0;
        margin-bottom: 1rem;
        width: auto; /* Allow full width */
        padding: 10px;
    }
    .footer {
        text-align: center;
    }
    .footer .columns > .column {
        margin-bottom: 1.5rem;
    }
}
.parallax-background .section-title, .parallax-background .section-subtitle, .parallax-background .label, .parallax-background .checkbox, .parallax-background p {
    color: #ada7a7 !important;

}