/* CSS Variables */
:root {
    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Merriweather', serif;

    /* Complementary Color Scheme - Dynamic and Modern */
    --primary-color: #0D98BA; /* Vibrant Teal/Blue - Professional for Investment */
    --primary-color-darker: #0A7A99; /* Darker shade for hover/active states */
    --secondary-color: #E85A4F; /* Coral Red - Accent & CTAs */
    --secondary-color-darker: #D14F43;
    --accent-color-1: #80D0C7; /* Light, friendly Teal/Mint - for subtle backgrounds or highlights */
    --accent-color-2: #F7C55C; /* Warm Yellow/Gold - for highlights, accolades */

    --neutral-light: #F8F9FA; /* Bootstrap's light bg, good for eco-minimalism */
    --neutral-medium: #EAEAEA; /* Slightly darker neutral for borders or dividers */
    --neutral-dark: #343A40; /* Bootstrap's dark, for text or dark elements */

    --text-color-light: #FFFFFF;
    --text-color-dark: #212529; /* Bootstrap default dark text */
    --text-color-headings: #1A2E35; /* Darker, richer for main headings */
    --text-color-muted: #6c757d; /* Bootstrap muted */

    /* Glassmorphism Variables */
    --glass-light-bg: rgba(255, 255, 255, 0.1);
    --glass-light-border: rgba(255, 255, 255, 0.25);
    --glass-blur: 10px;

    --glass-dark-bg: rgba(26, 46, 53, 0.65); /* Darker glass, for forms on dark backgrounds */
    --glass-dark-border: rgba(255, 255, 255, 0.1);

    /* UI Elements */
    --border-radius-sm: 0.25rem; /* 4px */
    --border-radius-md: 0.5rem;  /* 8px */
    --border-radius-lg: 1rem;    /* 16px */
    --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    --card-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.15);
    --transition-speed: 0.3s;
    --header-height: 80px; /* Approximate height of the sticky header */
}

/* Global Styles & Resets */
body {
    font-family: var(--font-secondary);
    color: var(--text-color-dark);
    background-color: var(--neutral-light);
    line-height: 1.7;
    font-size: 1rem; /* 16px base */
    overflow-x: hidden; /* Prevent horizontal scroll from AOS or other effects */
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--text-color-headings);
    margin-bottom: 0.75em; /* Consistent bottom margin */
}

h1, .h1 { font-size: 2.8rem; }
h2, .h2 { font-size: 2.2rem; } /* Section titles */
h3, .h3 { font-size: 1.8rem; }
h4, .h4 { font-size: 1.5rem; }
h5, .h5 { font-size: 1.25rem; } /* Card titles */

p {
    margin-bottom: 1rem;
    font-size: 1.05rem; /* Slightly larger body text for readability */
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

a:hover {
    color: var(--primary-color-darker);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Remove bottom space */
}

/* Utility Classes */
.section-bg-light {
    background-color: var(--neutral-light); /* Default is light, could use a slightly different shade */
}
.section-bg-accent {
    background-color: var(--accent-color-1);
    color: var(--text-color-dark); /* Ensure contrast */
}
.section-title {
    margin-bottom: 3rem; /* More space for section titles */
    color: var(--text-color-headings);
}

/* Header */
.navbar {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    transition: background-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    min-height: var(--header-height);
}

.glass-effect-header {
    background: var(--glass-light-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--glass-light-border);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-color-headings) !important;
}

.navbar .nav-link {
    font-family: var(--font-primary);
    font-weight: 500;
    color: var(--text-color-dark) !important;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 0.5rem 0.8rem;
    border-radius: var(--border-radius-sm);
    transition: color var(--transition-speed) ease, background-color var(--transition-speed) ease;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--primary-color) !important;
    /* background-color: rgba(var(--primary-color-rgb), 0.1); Optional subtle hover background */
}

.navbar-toggler {
    border-color: rgba(0,0,0,0.1);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(var(--text-color-headings-rgb,0,0,0),0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* Hero Section */
.hero-section {
    min-height: calc(100vh - var(--header-height)); /* Adjust if header is not sticky or different height */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Parallax effect from HTML style attribute: background-attachment: fixed; */
    /* Overlay from HTML style attribute */
    padding: 6rem 0;
}

.hero-section h1 {
    color: var(--text-color-light);
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}

.hero-section .lead {
    color: var(--text-color-light);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Buttons - Global Styles */
.btn {
    font-family: var(--font-primary);
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    border-radius: var(--border-radius-md);
    transition: all var(--transition-speed) ease-in-out;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-width: 2px;
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-color-light);
}
.btn-primary:hover {
    background-color: var(--primary-color-darker);
    border-color: var(--primary-color-darker);
    color: var(--text-color-light);
}

.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--text-color-light);
}
.btn-secondary:hover {
    background-color: var(--secondary-color-darker);
    border-color: var(--secondary-color-darker);
    color: var(--text-color-light);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: var(--text-color-light);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}
.btn-lg {
    padding: 1rem 2.5rem;
    font-size: 1rem;
}

/* "Read More" Link Styles */
.read-more-link {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--secondary-color);
    display: inline-block;
    position: relative;
    padding-bottom: 2px;
    transition: color var(--transition-speed) ease;
}
.read-more-link::after {
    content: '→';
    margin-left: 0.5em;
    transition: transform var(--transition-speed) ease;
    display: inline-block;
}
.read-more-link:hover {
    color: var(--secondary-color-darker);
    text-decoration: none;
}
.read-more-link:hover::after {
    transform: translateX(5px);
}


/* Cards - Global Styles */
.card {
    border: none;
    border-radius: var(--border-radius-lg); /* Softer, more modern radius */
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    background-color: var(--text-color-light); /* Ensure cards are opaque by default */
    display: flex; /* For STROGO constraint */
    flex-direction: column; /* For STROGO constraint */
    /* align-items: center;  This might be too broad. Content should be centered based on its nature. */
    text-align: center; /* For STROGO constraint on content centering */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-shadow-hover);
}

/* Glassmorphism Cards */
.glass-card {
    background: var(--glass-light-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-light-border);
    color: var(--text-color-dark); /* Ensure text on light glass is dark */
}
.glass-card .card-title {
    color: var(--text-color-headings);
}
.glass-card .card-text, .glass-card .card-subtitle {
    color: var(--text-color-dark); /* Ensuring readability if parent is light */
}


/* STROGO: Card Image Handling */
.card .card-image { /* This is the container for the image */
    margin-bottom: 1rem;
    overflow: hidden; /* Crucial for rounded corners on img if img is not directly rounded */
    text-align: center; /* For inline-block images or if parent flex centers */
}
/* For images like team member photos (often circular or specific aspect ratio) */
.card .card-image img.rounded-circle {
    margin: 0 auto; /* Center the image if it's block or has specific width */
}

/* For card-img-top (e.g., news section) */
.card .card-img-top {
    width: 100%;
    height: 200px; /* STROGO: Fixed height for image containers */
    object-fit: cover; /* STROGO: Correct display of images */
    border-top-left-radius: var(--border-radius-lg); /* Match card radius */
    border-top-right-radius: var(--border-radius-lg);
}
/* If card-image div is used for card-img-top, ensure it allows full width */
.card > .card-image:first-child .card-img-top {
     border-top-left-radius: var(--border-radius-lg);
     border-top-right-radius: var(--border-radius-lg);
     border-bottom-left-radius: 0; /* If image is at the very top */
     border-bottom-right-radius: 0;
}

.card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows footer elements in card to stick to bottom */
    text-align: center; /* STROGO: Content centering */
}
.card-title {
    margin-bottom: 0.75rem;
}
.card-text {
    color: var(--text-color-muted);
    flex-grow: 1; /* Pushes buttons/links to bottom if card-body is flex */
}

/* Forms */
.form-control, .form-select {
    border-radius: var(--border-radius-md);
    padding: 0.75rem 1rem;
    border: 1px solid var(--neutral-medium);
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    font-family: var(--font-secondary);
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25); /* Needs --primary-color-rgb defined */
    /* Fallback without RGB variable */
    /* box-shadow: 0 0 0 0.2rem #0D98BA40; */
}

/* Glassmorphism Inputs for dark backgrounds (like contact form) */
.glass-input {
    background: var(--glass-dark-bg) !important; /* Use !important carefully, only if Bootstrap overrides too strongly */
    backdrop-filter: blur(5px); /* Subtle blur for inputs */
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid var(--glass-dark-border) !important;
    color: var(--text-color-light) !important; /* Text color for input */
}
.glass-input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}
.glass-input:focus {
    border-color: var(--accent-color-1) !important;
    box-shadow: 0 0 0 0.2rem rgba(128, 208, 199, 0.35) !important; /* accent-color-1 with alpha */
}
.form-label { /* For labels on dark backgrounds */
    color: var(--text-color-light); /* Or --neutral-light if pure white is too stark */
}

/* Methodology Section - Progress Bars */
.progress {
    height: 25px !important; /* Override Bootstrap default if needed for design */
    border-radius: var(--border-radius-sm);
    background-color: var(--neutral-medium);
}
.progress-bar {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-color-light);
    background-color: var(--primary-color); /* Default progress bar color */
    transition: width var(--transition-speed) ease-out;
}
/* Custom colors for progress bars in HTML already defined using inline styles, can be moved here if desired */
/* Example:
.progress-bar.bg-fase1 { background-color: #0279d0; }
.progress-bar.bg-fase2 { background-color: #0295d0; }
...
*/

/* External Resources Section (List Group) */
.glass-list-item {
    background: var(--glass-light-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-light-border) !important; /* Override BS */
    margin-bottom: 0.5rem;
    border-radius: var(--border-radius-md) !important;
    transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease;
}
.glass-list-item:hover {
    background: rgba(255, 255, 255, 0.2); /* Slightly more opaque on hover */
    transform: translateX(5px);
}
.glass-list-item h5 {
    color: var(--text-color-headings);
}
.glass-list-item p, .glass-list-item small {
    color: var(--text-color-dark);
}

/* Contact Section (on dark parallax background) */
#contacto {
    /* Parallax and overlay from HTML style attribute */
}
.glass-card-dark { /* Used for the form container on the dark contact background */
    background: var(--glass-dark-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-dark-border);
    color: var(--text-color-light);
    border-radius: var(--border-radius-lg);
}
.glass-card-dark .form-label {
    color: var(--neutral-light); /* Light gray for labels */
}
.glass-card-dark p {
    color: var(--neutral-light);
}

/* Events Calendar (Table) */
.glass-table {
    background: var(--glass-light-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-light-border);
    border-radius: var(--border-radius-md);
    overflow: hidden; /* For rounded corners on table */
}
.glass-table th {
    background-color: rgba(255,255,255,0.1); /* Slightly different header for glass table */
    font-family: var(--font-primary);
    color: var(--text-color-headings);
}
.glass-table td, .glass-table th {
    border-color: var(--glass-light-border) !important; /* Override BS table borders */
    color: var(--text-color-dark);
}
.glass-table tbody tr:hover {
    background-color: rgba(255,255,255,0.15);
}

/* Footer */
.glass-effect-footer {
    background: var(--glass-light-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-top: 1px solid var(--glass-light-border);
    padding-top: 3rem;
    padding-bottom: 2rem;
    color: var(--text-color-dark);
}
.glass-effect-footer h5 {
    color: var(--text-color-headings);
    margin-bottom: 1rem;
}
.glass-effect-footer p, .glass-effect-footer .small {
    color: var(--text-color-dark);
}
.glass-effect-footer .footer-link {
    color: var(--text-color-dark);
    padding: 0.25rem 0;
    display: inline-block;
    font-family: var(--font-secondary);
}
.glass-effect-footer .footer-link:hover {
    color: var(--primary-color);
    text-decoration: none;
}
.glass-effect-footer hr {
    border-color: var(--glass-light-border);
}
.glass-effect-footer .list-unstyled li {
    margin-bottom: 0.5rem;
}
/* Footer social links are text-based, .footer-link styles apply */

/* Page Specific Styles */

/* success.html */
.page-success-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    text-align: center;
}
.page-success-container .glass-card { /* Assuming success message is in a glass-card */
    max-width: 600px;
    width: 100%;
}

/* privacy.html & terms.html */
.page-legal-content main,
.page-about-content main { /* For about page too if it has simple content */
    padding-top: calc(var(--header-height) + 2rem); /* Space for sticky header + extra padding */
    padding-bottom: 3rem;
}
.page-legal-content h1,
.page-about-content h1 {
    margin-bottom: 2rem;
}
.page-legal-content h2,
.page-about-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}


/* AOS Animations - ensure they don't cause layout shifts */
[data-aos] {
    /* Add transition for smoother appearance if needed, though AOS handles its own */
    /* transition-property: transform, opacity; */
}

/* Microanimations & Transitions (examples) */
.card, .btn, .nav-link, .form-control, .list-group-item {
    transition: all var(--transition-speed) ease-in-out; /* Generic transition for many elements */
}

/* Add specific transitions where needed if 'all' is too broad */

/* Responsive adjustments (Bootstrap handles most) */
@media (max-width: 991.98px) { /* lg breakpoint */
    .navbar-nav {
        margin-top: 1rem;
        background: rgba(255,255,255,0.9); /* More opaque background for mobile menu on glass header */
        border-radius: var(--border-radius-md);
        padding: 0.5rem;
    }
    .navbar .nav-link {
        padding: 0.6rem 1rem; /* Slightly more padding for touch */
        margin-left: 0;
        margin-right: 0;
    }
    .hero-section {
        min-height: auto; /* Adjust hero for smaller screens */
        padding: 4rem 0;
    }
    .hero-section h1 { font-size: 2.2rem; }
    h2, .h2 { font-size: 1.8rem; }
}

@media (max-width: 767.98px) { /* md breakpoint */
    .hero-section h1 { font-size: 2rem; }
    .hero-section .lead { font-size: 1rem; }
    p { font-size: 1rem; }
    h1, .h1 { font-size: 2.2rem; }
    h2, .h2 { font-size: 1.7rem; }
    h3, .h3 { font-size: 1.4rem; }

    .card .card-img-top {
        height: 180px; /* Adjust image height on smaller cards */
    }
}

/* General background image styling (if not set inline) */
.bg-image-cover {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.bg-image-cover.overlay-dark::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    z-index: 1; /* Ensure overlay is above bg but below content */
}
.bg-image-cover > .container { /* Ensure content is above overlay */
    position: relative;
    z-index: 2;
}

/* For text on images where overlay is applied: */
.text-on-dark-overlay {
    color: var(--text-color-light) !important;
}
.text-on-dark-overlay h1, .text-on-dark-overlay h2, .text-on-dark-overlay h3, .text-on-dark-overlay h4, .text-on-dark-overlay h5, .text-on-dark-overlay p {
    color: var(--text-color-light) !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}