/* style.css - FinanzasPro Argentina */

/* === CSS VARIABLES === */
:root {
    /* Analogous Color Scheme - Corporate Blue Focus */
    --primary-color: #0D47A1; /* Deep Blue */
    --primary-darker: #0B3C85;
    --primary-lighter: #1E88E5; /* Lighter Blue / Indigo */
    --secondary-color: #00796B; /* Teal / Blue-Green */
    --secondary-lighter: #00897B;
    --accent-color: #FFAB00;   /* Gold / Warm Yellow */
    --accent-darker: #FF8F00;

    /* Neutral Colors */
    --text-color-dark: #222222;
    --text-color-body: #333333;
    --text-color-light: #FFFFFF;
    --text-color-muted: #757575;
    --background-main: #FFFFFF;
    --background-light: #ECEFF1; /* Light Gray for sections like Mission, Team, Pricing */
    --background-dark: #263238; /* Darker for Footer */
    --border-color: #CFD8DC;

    /* Fonts */
    --font-family-headings: 'Oswald', sans-serif;
    --font-family-body: 'Nunito', sans-serif;

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-timing: ease-in-out;
    --transition-main: all var(--transition-speed) var(--transition-timing);

    /* Spacing & Sizing */
    --section-padding: 4rem 1.5rem;
    --card-border-radius: 8px;
    --button-border-radius: 5px;
    --input-border-radius: 5px;
    --navbar-height: 52px; /* Bulma default navbar height */
    --primary-color-rgb: 13, 71, 161; /* For box-shadow focus states */
}

/* === GLOBAL STYLES === */
html {
    scroll-behavior: smooth;
    background-color: var(--background-main);
}

body {
    font-family: var(--font-family-body);
    color: var(--text-color-body);
    line-height: 1.6;
    font-size: 16px; /* Base font size */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.title, .subtitle { /* Bulma classes */
    font-family: var(--font-family-headings);
    color: var(--text-color-dark);
}
.Oswald-font { font-family: var(--font-family-headings) !important; }
.Nunito-font { font-family: var(--font-family-body) !important; }

a {
    color: var(--primary-color);
    transition: color var(--transition-speed) ease-in-out;
}
a:hover {
    color: var(--primary-darker);
}

/* === GENERAL SECTION STYLING === */
.section {
    padding: var(--section-padding);
    position: relative;
}
.section.has-background-light {
    background-color: var(--background-light) !important;
}
.section .title.is-2.Oswald-font, .title.sr-section-title {
    font-family: var(--font-family-headings);
    color: var(--text-color-dark);
    margin-bottom: 1.5rem;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}
.section .subtitle.is-5.Nunito-font, .subtitle.sr-section-subtitle {
    font-family: var(--font-family-body);
    color: var(--text-color-muted);
    line-height: 1.6;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem;
}

/* === GLOBAL BUTTON STYLES === */
.button, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-family-headings);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--button-border-radius);
    transition: var(--transition-main);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-weight: 500;
    padding-left: 1.5em;
    padding-right: 1.5em;
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.button:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translateY(0px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.button.is-primary {
    background-color: var(--primary-color);
    border-color: transparent;
    color: var(--text-color-light);
}
.button.is-primary:hover {
    background-color: var(--primary-darker);
    color: var(--text-color-light);
}
.button.is-primary.is-outlined {
    background-color: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.button.is-primary.is-outlined:hover {
    background-color: var(--primary-color);
    color: var(--text-color-light);
}
.button.is-link.is-outlined { /* For "Read More" links */
    color: var(--secondary-color);
    border-color: var(--secondary-color);
    font-weight: bold;
}
.button.is-link.is-outlined:hover {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
}
.button.is-accent {
    background-color: var(--accent-color);
    border-color: transparent;
    color: var(--text-color-dark);
}
.button.is-accent:hover {
    background-color: var(--accent-darker);
    color: var(--text-color-dark);
}
.button.is-small {
    font-size: 0.85rem;
}
.button.is-large {
    font-size: 1.35rem;
}
.button .icon img {
    filter: brightness(0) invert(1); /* Assuming icons are dark and need to be white on primary buttons */
}
.button.is-primary.is-outlined .icon img {
     filter: none; /* Icons take their natural color or can be themed */
}


/* === HEADER / NAVBAR === */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030; /* Bulma's .navbar-burger has z-index 30 */
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: background-color var(--transition-speed) ease-in-out, box-shadow var(--transition-speed) ease-in-out;
}
.navbar.is-transparent {
    background-color: transparent !important; /* Overrides Bulma for initial state */
}
.header.is-scrolled .navbar.is-transparent { /* Add this class via JS on scroll */
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.navbar-item img {
    max-height: 2.5rem; /* Logo size */
}
.navbar-item, .navbar-link {
    font-family: var(--font-family-body);
    font-weight: 700;
    color: var(--text-color-body);
    transition: color var(--transition-speed) ease-in-out;
}
.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active, .navbar-link.is-active {
    background-color: transparent !important;
    color: var(--primary-color) !important;
}
.navbar-burger span {
    background-color: var(--text-color-dark);
    height: 2px; /* Thinner burger lines */
}
.navbar-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } /* Adjusted for 2px height */
.navbar-burger.is-active span:nth-child(2) { opacity: 0; }
.navbar-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(5px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        padding: 0.5rem 0;
    }
    .navbar-item {
        padding: 0.75rem 1.5rem;
        border-bottom: 1px solid var(--border-color);
    }
    .navbar-item:last-child {
        border-bottom: none;
    }
    .navbar-end .navbar-item .buttons .button {
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* === HERO SECTION === */
#hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    color: var(--text-color-light); /* Default text color for hero */
}
#hero .hero-body {
    padding-top: calc(var(--navbar-height) + 4rem); /* Space for fixed navbar + extra */
    padding-bottom: 4rem;
    position: relative;
    z-index: 2;
    min-height: calc(100vh - var(--navbar-height));
    display: flex;
    align-items: center;
    justify-content: center;
}
#hero .title,
#hero .subtitle,
#hero .has-text-white {
    color: var(--text-color-light) !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}
#hero .button.is-primary .icon img { /* Ensure icon on hero button is white */
    filter: brightness(0) invert(1);
}
/* Skewed bottom for Hero - "Искривленные сетки" */
#hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: var(--background-main); /* Match next section or main background */
    clip-path: polygon(0% 100%, 100% 100%, 100% 20%, 0% 70%); /* Angled bottom */
    z-index: 1;
}
#hero .hero-foot .tabs.is-boxed a {
    color: var(--text-color-light) !important;
    background-color: rgba(0,0,0,0.2);
    border: none;
    font-family: var(--font-family-body);
    transition: var(--transition-main);
}
#hero .hero-foot .tabs.is-boxed a:hover {
    background-color: rgba(0,0,0,0.4);
}
#hero .hero-foot .tabs.is-boxed li.is-active a {
    background-color: var(--primary-color);
}

/* === GENERAL CARD STYLES === */
.card {
    background-color: var(--text-color-light);
    border-radius: var(--card-border-radius);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: var(--transition-main);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.card .card-image { /* Bulma default */
    display: flex; /* Centers figure.image if it's smaller */
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.card .card-image .image-container { /* Custom container for direct img if not using figure */
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card .card-image img,
.card .image-container img {
    width: 100%;
    height: 100%; /* For figures with aspect ratio, this makes img fill it */
    object-fit: cover;
    display: block;
}
/* Specific heights for image containers (can be overridden) */
.blog-post-card .card-image figure.is-16by9,
.process-card .card-image figure.is-4by3,
.team-member-card .card-image figure.is-1by1 {
    /* Bulma's aspect ratio classes handle this. No fixed height needed here. */
    /* Ensure img fills these: */
}
.team-member-card .card-image figure.is-1by1 img {
    min-height: 250px; /* Ensure a minimum size for profile pictures */
}


.card .card-content {
    padding: 1.5rem;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.card .card-content .title,
.card .card-content .subtitle {
    color: var(--text-color-dark);
}
.card .card-content .title.is-4, .card .card-content .title.is-5 { margin-bottom: 0.75rem; }
.card .card-content .subtitle.is-6 { margin-top: -0.5rem; margin-bottom: 1rem; color: var(--text-color-muted); }
.card .card-content .content {
    color: var(--text-color-body);
    font-size: 0.95rem;
    text-align: left; /* Default for lists and paragraphs in cards */
}
.card .card-content .content ul { margin-left: 1em; }
.team-member-card .card-content, .resource-link-card .card-content { text-align: center; } /* For specific cards */
.team-member-card .card-content p.is-size-7 { text-align: center; font-size: 0.85rem !important; }


.card .card-footer {
    border-top: 1px solid var(--border-color);
    background-color: transparent;
}
.card .card-footer-item {
    font-family: var(--font-family-headings);
    color: var(--primary-color);
    transition: var(--transition-main);
    padding: 0.75rem;
}
.card .card-footer-item:hover {
    color: var(--primary-darker);
    background-color: #f5f5f5;
}
.pricing-card .card-footer-item.button {
    border-radius: 0 0 var(--card-border-radius) var(--card-border-radius); /* Full width button in footer */
    font-size: 1rem;
}

/* === MISSION SECTION === */
#mission .content.is-medium { font-size: 1.15rem; line-height: 1.7; }
#mission figure.image { border-radius: var(--card-border-radius); overflow: hidden; }

/* === CUSTOMER STORIES (TESTIMONIALS) === */
.testimonial-card {
    border-left: 5px solid var(--primary-color);
    padding: 2rem;
}
.testimonial-card .content p:first-child {
    font-style: italic;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--text-color-body);
}
.testimonial-card .content p.Oswald-font { /* Author */
    font-style: normal;
    color: var(--text-color-dark);
    font-size: 1rem;
}
.testimonial-rating .icon img { width: 20px; height: 20px; }
.carousel-navigation .button { margin: 0 0.5rem; }

/* === STATS SECTION === */
.stats-section .level-item .heading {
    font-family: var(--font-family-body);
    color: var(--text-color-muted);
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.stats-section .level-item .title.Oswald-font {
    font-family: var(--font-family-headings);
    color: var(--primary-color);
    font-size: 2.8rem;
    margin-bottom: 0.5rem;
}
.stats-section .level-item img {
    opacity: 0.7;
    transition: var(--transition-main);
    margin-top: 0.5rem;
}
.stats-section .level-item:hover img {
    opacity: 1;
    transform: scale(1.1);
}

/* === BLOG & EVENTS CARDS === */
.blog-post-card .card-content .title.is-5 { line-height: 1.3; margin-bottom: 0.5rem; }
.blog-post-card .card-content .subtitle.is-7 { color: var(--text-color-muted); margin-bottom: 0.75rem; }
.blog-post-card .card-content .content.is-small { font-size: 0.85rem; margin-bottom: 1rem; }

.event-card.media { align-items: flex-start; } /* Align items top for media object events */
.event-card .event-image-container img { border-radius: var(--card-border-radius); }
.event-card .media-content strong.Oswald-font { font-size: 1.2rem; color: var(--text-color-dark); }
.event-card .media-content small.Nunito-font { display: block; margin: 0.25rem 0 0.5rem; color: var(--text-color-muted); }
.event-card .media-content span.Nunito-font { font-size: 0.9rem; }

/* === USEFUL LINKS SECTION === */
.resource-link-card .card-content { text-align: left; }
.resource-link-card .title.is-5 a { color: var(--primary-color); }
.resource-link-card .title.is-5 a:hover { color: var(--primary-darker); text-decoration: underline; }
.resource-link-card .Nunito-font { font-size: 0.9rem; color: var(--text-color-body); }


/* === CONTACT FORM === */
.contact-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.contact-section .label {
    font-family: var(--font-family-body);
    font-weight: 700;
    color: var(--text-color-dark); /* Ensure labels are dark on potentially light bg image overlay */
}
.contact-section .input,
.contact-section .textarea,
.contact-section .select select {
    font-family: var(--font-family-body);
    border-radius: var(--input-border-radius);
    border: 1px solid var(--border-color);
    box-shadow: none;
    transition: border-color var(--transition-speed) ease-in-out, box-shadow var(--transition-speed) ease-in-out;
    font-size: 1rem;
    padding-top: 0.75em; /* Increase padding for better look */
    padding-bottom: 0.75em;
}
.contact-section .input:focus, .contact-section .input.is-focused,
.contact-section .textarea:focus, .contact-section .textarea.is-focused,
.contact-section .select select:focus,
.contact-section .select.is-active select {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.125em rgba(var(--primary-color-rgb), 0.25);
}
.contact-section .control.has-icons-left .icon { color: var(--text-color-muted); height: 2.75em; /* Align with new padding */ }
.contact-section .control.has-icons-left .input { padding-left: 2.75em; }
.contact-section .checkbox { font-family: var(--font-family-body); font-size: 0.9rem; }
.contact-section .checkbox a { color: var(--primary-color); text-decoration: underline; }
.contact-section .checkbox a:hover { color: var(--primary-darker); }

/* === FOOTER === */
.footer {
    background-color: var(--background-dark);
    color: rgba(255,255,255,0.7);
    padding: 3rem 1.5rem 2rem; /* Reduced bottom padding slightly */
    font-family: var(--font-family-body);
}
.footer .title.has-text-light {
    color: var(--text-color-light) !important;
    font-family: var(--font-family-headings);
    margin-bottom: 1rem;
    font-weight: 500;
}
.footer p, .footer li { color: rgba(255,255,255,0.7); }
.footer a.has-text-light,
.footer p a, .footer li a {
    color: rgba(255,255,255,0.8) !important;
    transition: var(--transition-main);
}
.footer a.has-text-light:hover,
.footer p a:hover, .footer li a:hover {
    color: var(--accent-color) !important;
}
.footer ul { list-style: none; margin-left: 0; }
.footer ul li { margin-bottom: 0.5em; }
.footer hr { background-color: rgba(255,255,255,0.1); height: 1px; }
.footer .content p.is-size-7 {
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem !important;
}

/* === SUCCESS PAGE STYLES === */
body.success-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--background-light);
}
.success-page main { /* This main tag is on success.html */
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--section-padding);
}
.success-message-container {
    background-color: var(--text-color-light);
    padding: 2.5rem 3.5rem;
    border-radius: var(--card-border-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    max-width: 500px;
}
.success-message-container .icon img {
    width: 70px;
    height: 70px;
    margin-bottom: 1.5rem;
}
.success-message-container .title {
    color: var(--secondary-color);
    font-family: var(--font-family-headings);
    margin-bottom: 0.75rem;
}
.success-message-container .subtitle {
    color: var(--text-color-body);
    font-family: var(--font-family-body);
    margin-bottom: 2rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* === CONTENT PAGES (Privacy, Terms, About) === */
main.content-page { /* Add class="content-page" to main tag on these pages */
    padding-top: calc(var(--navbar-height) + 3rem); /* Space for fixed navbar */
    padding-bottom: 3rem;
}
main.content-page .container { /* Assumes .container is child of .content-page */
    max-width: 800px; /* Optimal reading width */
    margin-left: auto;
    margin-right: auto;
    background-color: var(--text-color-light); /* Optional: white bg for text content */
    padding: 2rem; /* Optional: padding inside container */
    border-radius: var(--card-border-radius); /* Optional: rounded corners */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Optional: subtle shadow */
}
main.content-page h1, main.content-page h2, main.content-page h3 {
    font-family: var(--font-family-headings);
    color: var(--text-color-dark);
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}
main.content-page h1 { font-size: 2.5rem; }
main.content-page h2 { font-size: 2rem; }
main.content-page p, main.content-page li {
    font-family: var(--font-family-body);
    color: var(--text-color-body);
    line-height: 1.8;
    margin-bottom: 1.25rem;
    font-size: 1.05rem;
}
main.content-page ul, main.content-page ol {
    margin-left: 1.5em;
    margin-bottom: 1.25rem;
}

/* ScrollReveal default hidden state (JS will make them visible) */
.sr-hero-title, .sr-hero-subtitle, .sr-hero-text, .sr-hero-button,
.sr-section-title, .sr-section-subtitle,
.sr-content-left, .sr-image-right,
.sr-cards-group, .sr-card-item,
.sr-carousel, .sr-carousel-item,
.sr-stats-group, .sr-stat-item {
    /*visibility: hidden; !* ScrollReveal will change this *!*/
}

/* Barba.js transitions (Example) */
.barba-leave-active,
.barba-enter-active {
  transition: opacity .5s ease-in-out;
}
.barba-leave-to,
.barba-enter-from {
  opacity: 0;
}

/* Fix for Bulma columns not breaking properly on mobile sometimes with flex cards */
.columns.is-multiline .column {
    display: flex; /* Ensure columns themselves are flex containers for cards */
}