/* style.css */

/* CSS Variables */
:root {
    --primary-color: #0D5C63; /* Deep Teal/Green - Conecta con la naturaleza y la seriedad financiera */
    --secondary-color: #E5890A; /* Warm Orange/Terracotta - Acento cálido, energía colombiana */
    --accent-color: #40A8C4; /* Light Teal/Blue - Complementario, fresco */
    --text-color: #313131; /* Dark Gray - Cuerpo de texto principal */
    --text-color-light: #FAF6F0; /* Off-white - Para fondos oscuros */
    --heading-color: #222222; /* Very Dark Gray/Black - Títulos principales */
    --background-light: #F8F9FA; /* Very Light Gray/Off-white - Fondos de sección claros */
    --background-dark: #0A4A50; /* Darker shade of primary for footer/dark sections */
    --card-background: #FFFFFF; /* White */
    --card-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 12px 24px rgba(0, 0, 0, 0.12);
    --border-color: #DEE2E6;
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 12px;

    --primary-color-darker: #094950;
    --secondary-color-darker: #C07108;

    --font-family-headings: 'Manrope', sans-serif;
    --font-family-body: 'Rubik', sans-serif;

    --transition-speed: 0.3s;
    --transition-easing: cubic-bezier(0.25, 0.8, 0.25, 1); /* Non-linear movement */
    --transition-easing-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);

    --navbar-height: 52px; /* Bulma default, adjust if needed */
}

/* Global Styles */
html {
    scroll-behavior: smooth;
    background-color: var(--card-background); /* Base background for the page */
}

body {
    font-family: var(--font-family-body);
    color: var(--text-color);
    line-height: 1.7;
    font-size: 1rem; /* 16px base */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll from animations */
}

/* Bulma Overrides & Enhancements */
.navbar.is-fixed-top {
    background-color: rgba(255, 255, 255, 0.95); /* Eco-minimalism: slightly transparent */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.navbar-item, .navbar-link {
    font-family: var(--font-family-body);
    font-weight: 500;
    color: var(--text-color);
    transition: color var(--transition-speed) var(--transition-easing);
}

.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active, .navbar-link.is-active {
    background-color: transparent !important; /* Override Bulma */
    color: var(--primary-color) !important;
}

.navbar-brand .navbar-item .has-text-primary {
    color: var(--primary-color) !important;
    font-family: var(--font-family-headings);
}

.navbar-burger span {
    background-color: var(--primary-color);
    height: 2px;
}

/* Global Button Styles */
.button, button, input[type='submit'], input[type='button'] {
    font-family: var(--font-family-body);
    font-weight: 500;
    border-radius: var(--border-radius-medium);
    padding: 0.8em 1.8em;
    transition: all var(--transition-speed) var(--transition-easing);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border: 1px solid transparent; /* Base border */
    text-transform: none; /* Keep text as is, no uppercase by default */
}

.button:hover, button:hover, input[type='submit']:hover, input[type='button']:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 14px rgba(0,0,0,0.08);
}

.button:active, button:active, input[type='submit']:active, input[type='button']:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.06);
}

.button.is-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-color-light);
}
.button.is-primary:hover {
    background-color: var(--primary-color-darker);
    border-color: var(--primary-color-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-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--text-color-light);
}
.button.is-secondary:hover {
    background-color: var(--secondary-color-darker);
    border-color: var(--secondary-color-darker);
    color: var(--text-color-light);
}
.button.is-secondary.is-outlined {
    background-color: transparent;
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}
.button.is-secondary.is-outlined:hover {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
}

.button.is-link {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--text-color-light);
}
.button.is-link:hover {
    background-color: #318a9e; /* Darker accent */
    border-color: #318a9e;
    color: var(--text-color-light);
}
.button.is-link.is-outlined {
    background-color: transparent;
    border-color: var(--accent-color);
    color: var(--accent-color);
}
.button.is-link.is-outlined:hover {
    background-color: var(--accent-color);
    color: var(--text-color-light);
}

/* Headings and Text */
h1, h2, h3, h4, h5, h6, .title, .subtitle {
    font-family: var(--font-family-headings);
    color: var(--heading-color);
    font-weight: 800; /* Bolder Manrope */
}
.title.is-1 { font-size: 3rem; margin-bottom: 1rem;}
.title.is-2 { font-size: 2.5rem; margin-bottom: 0.75rem;}
.title.is-3 { font-size: 2rem; margin-bottom: 0.5rem;}
.title.is-4 { font-size: 1.5rem; }
.title.is-5 { font-size: 1.25rem; }
.title.is-6 { font-size: 1rem; }

.subtitle {
    font-family: var(--font-family-body);
    color: var(--text-color);
    font-weight: 400;
    line-height: 1.6;
}
.subtitle.is-3 { font-size: 1.75rem; }
.subtitle.is-5 { font-size: 1.1rem; color: #555555; }

.section-title {
    margin-bottom: 2.5rem !important; /* More space below section titles */
    position: relative;
    display: inline-block;
    padding-bottom: 0.5rem;
}

.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: var(--secondary-color);
    border-radius: var(--border-radius-small);
}

.content p {
    margin-bottom: 1.25em;
}

.content ul {
    margin-left: 1.5em;
    margin-bottom: 1.25em;
}

.content li + li {
    margin-top: 0.5em;
}

/* Sections */
.section {
    padding: 4rem 1.5rem; /* Default Bulma is 3rem 1.5rem */
}
.section.has-background-light {
    background-color: var(--background-light) !important;
}

/* Hero Section */
#hero.hero {
    color: var(--text-color-light); /* Enforced white text */
}
#hero .title, #hero .subtitle {
    color: var(--text-color-light) !important; /* Enforced white text for Bulma classes */
}
#hero .hero-body {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#hero .button {
    margin-top: 1.5rem;
}

/* Specific Page Top Padding for Fixed Navbar */
.page-content { /* For privacy.html, terms.html content containers */
    padding-top: calc(var(--navbar-height) + 40px); /* Navbar height + extra space */
}
main > .hero.is-medium + .section .page-content, /* If hero is medium */
main > .hero.is-large + .section .page-content {
    padding-top: 2rem; /* Reduce padding if there's already a hero */
}
/* Ensure the first section on pages like about.html also has enough space if not covered by page-content */
main > .section:first-child:not(.hero){
    padding-top: calc(var(--navbar-height) + 40px);
}
/* Banner images in pages like about.html */
.hero.is-medium .hero-body, .hero.is-large .hero-body {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* Card Styles */
.card.custom-card {
    background-color: var(--card-background);
    border-radius: var(--border-radius-large);
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing);
    overflow: hidden; /* Ensures content respects border-radius */
    height: 100%; /* Make cards in a row same height */
    display: flex;
    flex-direction: column;
}

.card.custom-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--card-shadow-hover);
}

.card.custom-card .card-image { /* Bulma's card-image */
    overflow: hidden; /* Important for image zoom effect if any */
    /* The requirement for flex centering images inside cards applies here */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center image if it's smaller */
}
.card.custom-card .card-image figure.image {
    margin: 0; /* Remove default figure margin */
}
.card.custom-card .card-image img {
    width: 100%;
    height: 200px; /* Fixed height for image containers in cards */
    object-fit: cover; /* Ensures image covers the area, might crop */
    transition: transform 0.4s var(--transition-easing);
    display: block; /* Remove extra space below image */
}
.card.custom-card:hover .card-image img {
    transform: scale(1.05);
}

.card.custom-card .card-content {
    padding: 1.5rem;
    text-align: left; /* Default text align */
    flex-grow: 1; /* Allows content to fill space, pushing footer down if any */
    display: flex;
    flex-direction: column;
}
.card.custom-card .card-content .title {
    margin-bottom: 0.5rem;
    color: var(--primary-color); /* Title color inside cards */
}
.card.custom-card .card-content .media + .content {
    margin-top: 1rem;
}
.card.custom-card .content {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Specific card centering as per STROGO */
.card.custom-card, .timeline-content .card {
    display: flex; /* For overall card structure */
    flex-direction: column; /* Stack image and content vertically */
    /* align-items: center; For card image if it's not full width */
}
/* For testimonial avatars */
.card.custom-card .card-image.has-text-centered .image.is-128x128 {
    margin-left: auto;
    margin-right: auto;
}

/* Timeline (Case Studies) */
.timeline {
    margin-top: 2rem;
}
.timeline .timeline-item .timeline-marker.is-icon {
    background-color: var(--primary-color);
    color: var(--text-color-light);
}
.timeline .timeline-item .timeline-marker.is-warning {
    background-color: var(--secondary-color);
}
.timeline .timeline-item .timeline-marker.is-info {
    background-color: var(--accent-color);
}
.timeline .timeline-item .timeline-content .heading {
    font-family: var(--font-family-headings);
    color: var(--primary-color);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.timeline .timeline-item .timeline-content .card {
    margin-top: 0.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.timeline .timeline-item .timeline-content .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

/* Testimonials Section */
#testimonials .card-image img.is-rounded {
    border: 4px solid var(--card-background);
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
#testimonials .card-content {
    text-align: center;
}
#testimonials .card-content strong {
    font-family: var(--font-family-headings);
    color: var(--heading-color);
}
#testimonials .card-content small {
    color: var(--secondary-color);
    font-weight: 500;
}

/* Pricing Section */
.pricing-card {
    border: 1px solid var(--border-color);
}
.pricing-card.is-featured {
    border: 2px solid var(--secondary-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transform: scale(1.03); /* Make it stand out slightly */
}
.pricing-card .card-header-title {
    font-family: var(--font-family-headings);
}
.pricing-card .title.is-1 {
    font-size: 2.8rem;
    margin: 1rem 0;
}
.pricing-card ul {
    list-style: none;
    margin-left: 0;
}
.pricing-card ul li {
    padding: 0.5em 0;
    border-bottom: 1px solid var(--border-color);
}
.pricing-card ul li:last-child {
    border-bottom: none;
}
.pricing-card .fa-check-circle { /* Assuming FontAwesome is used as per HTML */
    margin-right: 0.5em;
}

/* Contact Section & Form */
.custom-input, .custom-textarea {
    border-radius: var(--border-radius-medium) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important; /* Remove Bulma's default input shadow */
    transition: border-color var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing);
    padding: 0.8em 1em !important;
}
.custom-input:focus, .custom-textarea:focus,
.custom-input:active, .custom-textarea:active {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.125em rgba(var(--primary-color-rgb, 13, 92, 99), 0.25) !important; /* Use RGB version if possible */
}
.label {
    font-weight: 500;
    color: var(--text-color);
}
.checkbox + .checkbox {
    margin-left: 0.5em;
}
.checkbox input[type="checkbox"] + span {
    /* Custom checkbox style if needed */
}
.contact-info p {
    margin-bottom: 0.5rem;
}
.map-placeholder {
    border-radius: var(--border-radius-large);
    overflow: hidden;
}

/* External Resources Section */
.resource-card .card-content .title a {
    transition: color var(--transition-speed) var(--transition-easing);
}
.resource-card .card-content .title a:hover {
    color: var(--secondary-color) !important;
}

/* Footer */
.footer {
    background-color: var(--background-dark);
    color: var(--text-color-light);
    padding: 3rem 1.5rem 2rem; /* Reduced bottom padding */
}
.footer .title {
    color: var(--text-color-light);
    font-weight: 700;
}
.footer a:not(.button) {
    color: var(--accent-color); /* Lighter link color for dark background */
    transition: color var(--transition-speed) var(--transition-easing);
}
.footer a:not(.button):hover {
    color: var(--text-color-light);
    text-decoration: underline;
}
.footer hr {
    background-color: rgba(250, 246, 240, 0.2); /* Lighter hr */
}
.footer .content p {
    color: var(--text-color-light);
    font-size: 0.9rem;
}
.footer #currentYear {
    /* Style if needed */
}
/* Social media links in footer - text only */
.footer ul li a {
    display: inline-block;
    padding: 0.3rem 0; /* Minimal padding for text links */
}

/* Success Page */
body.success-page main, /* Add class to body of success.html if needed */
html.success-page body main,
section.hero.is-success.is-fullheight-with-navbar { /* Targeting existing structure */
    min-height: calc(100vh - var(--navbar-height));
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero.is-success .hero-body {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%; /* Ensure hero body takes full width for centering */
}
.hero.is-success .title,
.hero.is-success .subtitle,
.hero.is-success .content p {
    color: var(--text-color-light) !important;
}

/* Animation utilities for scroll effects (to be triggered by JS) */
.animate-on-scroll {
    /*opacity: 0;*/
    transition: opacity 0.6s var(--transition-easing), transform 0.6s var(--transition-easing);
}

.animate-on-scroll.fade-in {
    opacity: 1;
}
.animate-on-scroll.fade-in-down {
    transform: translateY(-30px);
}
.animate-on-scroll.fade-in-up {
    transform: translateY(30px);
}
.animate-on-scroll.slide-in-left {
    transform: translateX(-50px);
}
.animate-on-scroll.slide-in-right {
    transform: translateX(50px);
}
.animate-on-scroll.pop-in {
    transform: scale(0.8);
}

.animate-on-scroll.is-visible.fade-in-down,
.animate-on-scroll.is-visible.fade-in-up,
.animate-on-scroll.is-visible.slide-in-left,
.animate-on-scroll.is-visible.slide-in-right {
    opacity: 1;
    transform: translateY(0) translateX(0);
}
.animate-on-scroll.is-visible.pop-in {
    opacity: 1;
    transform: scale(1);
}

/* Pulse animation for buttons */
.pulse:hover {
    animation: pulse-animation 1s var(--transition-easing-bounce) infinite;
}

@keyframes pulse-animation {
    0% { transform: scale(1) translateY(-3px); }
    50% { transform: scale(1.05) translateY(-5px); }
    100% { transform: scale(1) translateY(-3px); }
}

/* Read More Links */
a.read-more {
    font-weight: 500;
    color: var(--secondary-color);
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
    transition: color var(--transition-speed) var(--transition-easing);
}
a.read-more::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--secondary-color);
    transition: width var(--transition-speed) var(--transition-easing);
}
a.read-more:hover {
    color: var(--secondary-color-darker);
}
a.read-more:hover::after {
    width: 100%;
}

/* Cookie Consent Popup */
#cookieConsentPopup {
    /* HTML has inline styles, this is for potential overrides or additional styling */
    font-size: 0.95rem; /* Slightly larger text */
}
#cookieConsentPopup p {
    margin: 0 0 10px 0; /* Adjust spacing */
}
#cookieConsentPopup a {
    text-decoration: underline;
}
#cookieConsentPopup a:hover {
    text-decoration: none;
}
#acceptCookieButton {
    padding: 8px 18px; /* Slightly smaller button */
    font-size: 0.9rem;
}


/* Responsive adjustments if needed beyond Bulma */
@media screen and (max-width: 768px) {
    .section {
        padding: 3rem 1rem;
    }
    .title.is-1 { font-size: 2.5rem; }
    .title.is-2 { font-size: 2rem; }

    .navbar-menu {
        background-color: rgba(255, 255, 255, 0.98);
        box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
        padding: 0.5rem 0;
    }
    .navbar-item, .navbar-link {
        padding: 0.75rem 1rem;
    }
    .navbar-burger {
        /* Additional styling if Bulma's defaults aren't enough */
    }
}

@media screen and (max-width: 1023px) {
    /* Ensure fixed navbar doesn't cause content overlap on tablets when menu is open */
    .navbar.is-fixed-top .navbar-menu.is-active {
        max-height: calc(100vh - var(--navbar-height));
        overflow-y: auto;
    }
}

/* Specific centering for image containers in cards */
.card .card-image { /* General Bulma structure */
    display: flex;
    justify-content: center;
    align-items: center;
}
.card .card-image .image { /* Bulma's .image wrapper for img */
    display: block; /* Remove extra space */
    width: 100%; /* Make it responsive within the card-image */
}
.card .card-image img {
    /* width: 100%; already set */
    /* height: 200px; already set */
    /* object-fit: cover; already set */
    margin: 0 auto; /* Center image if it has intrinsic dimensions smaller than container */
}

/* STROGO: For all .card, .item, .testimonial, .team-member, .product-card and similar elements, use content centering. */
/* This is broad. Assuming it means text-align: center for card content, or flex centering if appropriate. */
/* Most cards already have text-align: left for descriptions, with titles centered if needed. */
/* For testimonial/team cards, content is already text-centered via .has-text-centered */
.card-content.has-text-centered,
.testimonial .content,
.team-member .card-content {
    text-align: center;
}

/* Columns width - this is handled by Bulma classes like is-two-thirds, not directly in CSS */
/* Ensure sufficient vertical spacing between columns when they stack on mobile */
.columns.is-multiline .column {
    margin-bottom: 1.5rem; /* Add some space when columns stack */
}
@media screen and (min-width: 769px) { /* On desktop, remove bottom margin if they are side-by-side */
    .columns.is-multiline .column {
        margin-bottom: 0;
    }
    /* Add Bulma's default gap back for columns that are not directly in is-multiline */
     .columns:not(.is-desktop) + .columns:not(.is-desktop) {
        margin-top: 1.5rem;
    }
}

/* Font Awesome Icons placeholder (if used) */
.fas {
    margin-right: 0.3em; /* Spacing for icons next to text */
}