/* style.css */

/*------------------------------------------------------------------
[TABLE OF CONTENTS]

1.  ROOT VARIABLES
2.  GLOBAL STYLES & TYPOGRAPHY
3.  BULMA OVERRIDES & CUSTOMIZATIONS
    3.1 Buttons
    3.2 Forms
    3.3 Tabs
4.  LAYOUT & UTILITY CLASSES
5.  HEADER & NAVIGATION
6.  HERO SECTION
7.  GENERAL CARD STYLES
8.  SPECIFIC SECTION STYLES
    8.1  Vision (#vision)
    8.2  Methodology (#metodologia)
    8.3  Instructors (#instructores)
    8.4  Webinars (#webinars)
    8.5  Clientele (#clientela)
    8.6  Careers (#carreras)
    8.7  Press (#prensa)
    8.8  External Resources (#recursos-externos)
    8.9  Contact (#contacto)
9.  FOOTER
10. PAGE-SPECIFIC STYLES
    10.1 Static Pages (About, Privacy, Terms)
    10.2 Success Page
11. ANIMATIONS & TRANSITIONS
12. RESPONSIVE ADJUSTMENTS

-------------------------------------------------------------------*/

/* 1. ROOT VARIABLES */
:root {
    --font-primary: 'Oswald', sans-serif;
    --font-secondary: 'Nunito', sans-serif;

    --primary-color: #0D47A1; /* Deep Blue */
    --primary-color-dark: #0B3C8A;
    --secondary-color: #FF8F00; /* Amber/Gold */
    --accent-color: #00BFA5; /* Teal Accent */

    --text-color-dark: #212121; /* Very dark grey for titles */
    --text-color-medium: #424242; /* Dark grey for body text */
    --text-color-light: #FAFAFA; /* Almost white for dark backgrounds */
    --text-color-muted: #757575; /* Muted grey */

    --background-light: #F5F5F5;
    --background-dark: #1a1a2e; /* Dark blue/purple for gradients */

    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    --gradient-secondary: linear-gradient(135deg, #4A00E0, #8E2DE2); /* Purpleish gradient */
    --gradient-retro-warm: linear-gradient(45deg, #ff8c00, #ff0080); /* Retro warm gradient */
    --gradient-dark-subtle: linear-gradient(160deg, #1a1a2e 0%, #16213e 100%);

    --card-background: #FFFFFF;
    --card-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    --card-border-radius: 12px;

    --border-radius-small: 6px;
    --border-radius-medium: 12px;
    --border-radius-large: 20px;

    --header-height: 70px; /* Adjusted from 80px */
    --footer-height: auto;

    --transition-speed: 0.4s;
    --transition-easing: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Non-linear "bouncy" */
    --transition-easing-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* 2. GLOBAL STYLES & TYPOGRAPHY */
html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

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

.main-container {
    overflow-x: hidden; /* Prevents horizontal scroll from animations */
}

h1, h2, h3, h4, h5, h6, .title, .subtitle {
    font-family: var(--font-primary);
    color: var(--text-color-dark);
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.title.is-1 { font-size: 3rem; }
.title.is-2 { font-size: 2.5rem; margin-bottom: 1.5rem; }
.title.is-3 { font-size: 2rem; }
.title.is-4 { font-size: 1.5rem; }
.title.is-5 { font-size: 1.25rem; }


p, .content {
    font-family: var(--font-secondary);
    font-size: 1.05rem; /* Slightly larger for readability */
    margin-bottom: 1.25rem;
    color: var(--text-color-medium);
}

.content p:not(:last-child),
.content ul:not(:last-child),
.content ol:not(:last-child),
.content blockquote:not(:last-child) {
    margin-bottom: 1.25em;
}

.content ul {
    list-style: disc;
    padding-left: 2em;
}

a {
    color: var(--primary-color);
    transition: color var(--transition-speed) var(--transition-easing-smooth);
    font-weight: 700;
}

a:hover {
    color: var(--secondary-color);
}

.section-title {
    margin-bottom: 2.5rem !important; /* Ensure enough space below title */
    color: var(--text-color-dark);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--secondary-color);
    margin: 15px auto 0;
    border-radius: var(--border-radius-small);
}


/* 3. BULMA OVERRIDES & CUSTOMIZATIONS */

/* 3.1 Buttons */
.button {
    font-family: var(--font-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--border-radius-medium);
    padding: 0.8em 2em;
    transition: all var(--transition-speed) var(--transition-easing);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: none;
}

.button:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

.button:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.button.is-primary {
    background-color: var(--primary-color);
    color: var(--text-color-light);
}
.button.is-primary:hover {
    background-color: var(--primary-color-dark);
    color: var(--text-color-light);
}

.button.is-secondary { /* Custom class if needed, or use .is-link, .is-info */
    background-color: var(--secondary-color);
    color: var(--text-color-dark);
}
.button.is-secondary:hover {
    background-color: #FFB300; /* Darker shade of secondary */
    color: var(--text-color-dark);
}

.button.is-link {
    background-color: var(--accent-color);
    color: var(--text-color-light);
}
.button.is-link:hover {
    background-color: #008c7a; /* Darker accent */
    color: var(--text-color-light);
}

.button.is-large {
    font-size: 1.2rem;
    padding: 1em 2.5em;
}

a.button.is-link.is-light { /* For press section links */
    background-color: transparent;
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
}
a.button.is-link.is-light:hover {
    background-color: var(--accent-color);
    color: var(--text-color-light);
}

/* 3.2 Forms */
.input, .textarea {
    font-family: var(--font-secondary);
    border-radius: var(--border-radius-small);
    border: 1px solid #dbdbdb;
    box-shadow: inset 0 1px 2px rgba(10,10,10,.1);
    transition: border-color var(--transition-speed) ease-in-out, box-shadow var(--transition-speed) ease-in-out;
    padding: 0.8em 1em;
    font-size: 1rem;
}
.input:focus, .textarea:focus,
.input:active, .textarea:active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.125em rgba(var(--primary-color-rgb, 13, 71, 161), 0.25);
}
.label {
    font-family: var(--font-primary);
    color: var(--text-color-dark);
    font-weight: 700;
    font-size: 1.1rem;
}

/* 3.3 Tabs (for Webinars) */
.tabs.is-toggle li.is-active a {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-color-light);
    z-index: 1;
}
.tabs.is-toggle a {
    border-color: #dbdbdb;
    border-width: 1px;
    color: var(--primary-color);
    font-family: var(--font-primary);
    transition: all var(--transition-speed) var(--transition-easing-smooth);
}
.tabs.is-toggle a:hover {
    background-color: #f5f5f5;
    border-color: #b5b5b5;
    color: var(--primary-color-dark);
    z-index: 2;
}
.tabs.is-toggle ul {
    border: none;
}

/* 4. LAYOUT & UTILITY CLASSES */
.section {
    padding: 4rem 1.5rem; /* Reduced default padding */
}

.section-gradient {
    background: var(--gradient-dark-subtle);
    color: var(--text-color-light);
}
.section-gradient .title,
.section-gradient .subtitle,
.section-gradient .label,
.section-gradient p,
.section-gradient h1, .section-gradient h2, .section-gradient h3, .section-gradient h4 {
    color: var(--text-color-light);
}
.section-gradient .section-title::after {
    background: var(--secondary-color);
}
.section-gradient a:not(.button) {
    color: var(--secondary-color);
}
.section-gradient a:not(.button):hover {
    color: var(--text-color-light);
}


.section-gradient-alt {
    background: linear-gradient(135deg, #e0e0e0, #f5f5f5); /* Lighter gradient */
}

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

.parallax-layer { /* Basic for JS hook if used */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-attachment: fixed; /* Simple parallax, can be enhanced by JS */
}

/* 5. HEADER & NAVIGATION */
.header.is-fixed-top {
    height: var(--header-height);
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}
.navbar {
    min-height: var(--header-height);
}
.navbar-brand .navbar-item {
    padding-left: 1rem;
    padding-right: 1rem;
}
.site-title {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-color-dark);
}
.site-title .highlight {
    color: var(--primary-color);
}

.navbar-item, .navbar-link {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    color: var(--text-color-medium);
    padding: 0.5rem 1rem;
    transition: color var(--transition-speed) var(--transition-easing-smooth);
}
.navbar-item:hover, .navbar-link:hover {
    color: var(--primary-color);
    background-color: transparent;
}
.navbar-item.has-dropdown.is-hoverable .navbar-link::after {
    border-color: var(--primary-color);
}
.navbar-dropdown {
    border-top: 2px solid var(--primary-color);
    border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
}
.navbar-dropdown .navbar-item {
    font-size: 1rem;
}

/* Burger Menu */
.navbar-burger {
    color: var(--text-color-dark);
    height: var(--header-height);
    width: var(--header-height);
}
.navbar-burger span {
    background-color: var(--text-color-dark);
    height: 2px;
    width: 20px;
    left: calc(50% - 10px);
}
.navbar-burger:hover {
    background-color: rgba(0,0,0,0.05);
}

@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: rgba(255, 255, 255, 0.98);
        box-shadow: 0 8px 16px rgba(10,10,10,.1);
        padding: 0.5rem 0;
    }
    .navbar-menu .navbar-item {
        padding: 0.75rem 1.5rem;
    }
}


/* 6. HERO SECTION */
#hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}
#hero .hero-body {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.hero-content-overlay {
    background-color: rgba(0, 0, 0, 0.55); /* Dark overlay for text contrast */
    padding: 3rem;
    border-radius: var(--card-border-radius);
    max-width: 800px; /* Constrain content width */
}
.hero-title {
    color: var(--text-color-light) !important; /* IMPORTANT: Ensure white text */
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}
.hero-subtitle {
    color: var(--text-color-light) !important; /* IMPORTANT: Ensure white text */
    font-size: 1.5rem;
    margin-bottom: 2rem;
    font-family: var(--font-secondary);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}
#hero .button.is-primary {
    background-color: var(--secondary-color);
    color: var(--text-color-dark);
    border: none;
}
#hero .button.is-primary:hover {
    background-color: #FFB300; /* Darker secondary */
}


/* 7. GENERAL CARD STYLES */
.card {
    background-color: var(--card-background);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden; /* Ensures content respects border-radius */
    transition: transform var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing-smooth);
    display: flex;
    flex-direction: column;
    height: 100%; /* Make cards in a row equal height */
}
.card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.card .card-image, /* Bulma's card-image */
.card .image-container /* Custom image container */ {
    position: relative;
    overflow: hidden;
    /* Fixed height for consistent card image sizes */
    /* This height should be adjusted based on content and design needs per card type */
    /* For instructor, press logo images, this will be different */
}

.card .card-image img,
.card .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crucial for consistent image display */
    display: block;
}

.card .card-content {
    padding: 1.75rem;
    text-align: center; /* Centering content within card-content */
    flex-grow: 1; /* Allows card-content to expand and push footer (if any) down */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes button to bottom if present */
}
.card .card-content .title, .card .card-content .subtitle {
    margin-bottom: 0.75rem;
    color: var(--text-color-dark);
}
.card .card-content p:not(.title):not(.subtitle) {
    color: var(--text-color-medium);
    font-size: 0.95rem;
    line-height: 1.6;
}
.card .card-content .button {
    margin-top: auto; /* Pushes button to the bottom of card-content */
    align-self: center; /* Center button if it's the only element taking up space */
}

/* Specific height for certain card images */
.instructor-card .image-container {
    height: 300px; /* Or aspect ratio based padding-top trick */
}
.press-card .image-container {
    height: 120px;
    padding: 1rem;
}
.press-card .image-container img {
    object-fit: contain; /* For logos */
}
.vision-card .image-container, .info-card .image-container { /* For vision section card image */
    height: 250px;
}
.map-placeholder .image-container {
    height: 300px;
}


/* 8. SPECIFIC SECTION STYLES */

/* 8.1 Vision (#vision) */
#vision .info-card .card-content {
    text-align: left;
}
#vision .info-card .title {
    color: var(--primary-color);
}

/* 8.2 Methodology (#metodologia) */
.methodology-card {
    background: var(--card-background); /* Ensure contrast if section has gradient */
}
.methodology-card .card-content {
    text-align: left;
}
.methodology-card .title.is-4 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}
.methodology-intro {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

/* 8.3 Instructors (#instructores) */
.instructor-card .card-content .title {
    margin-top: 0.5rem;
}
.instructor-card .card-content .subtitle {
    color: var(--accent-color);
    font-weight: 700;
}

/* 8.4 Webinars (#webinars) */
.webinar-list {
    margin-top: 2rem;
}
.webinar-card .card-content {
    text-align: left;
}
.webinar-card .title.is-4 {
    color: var(--text-color-light); /* If on gradient background */
}
.webinar-card .subtitle.is-6 {
    color: var(--secondary-color); /* If on gradient background */
    font-weight: bold;
}
.webinar-card p:not(.title):not(.subtitle) {
    color: var(--text-color-light);
}
.webinar-card .button.is-primary {
    background-color: var(--secondary-color);
    color: var(--text-color-dark);
}
.webinar-card .button.is-primary:hover {
    background-color: #FFB300;
}
.webinar-card .button.is-secondary { /* For past webinars */
    background-color: rgba(255,255,255,0.2);
    color: var(--text-color-light);
    border: 1px solid var(--text-color-light);
}
.webinar-card .button.is-secondary:hover {
    background-color: rgba(255,255,255,0.4);
}


/* 8.5 Clientele (#clientela) */
.stat-widget {
    padding: 1.5rem;
    text-align: center;
}
.stat-widget .title.is-1 {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}
.stat-widget .subtitle.is-4 {
    color: var(--text-color-medium);
    font-family: var(--font-secondary);
}
#clientela .content.is-medium {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* 8.6 Careers (#carreras) */
.career-card {
    background: var(--card-background); /* Ensure contrast on gradient */
    margin-bottom: 1.5rem;
}
.career-card .card-content {
    text-align: left;
}
.career-card .title.is-4 {
    color: var(--text-color-dark);
}
.career-card .subtitle.is-6 {
    color: var(--text-color-muted);
}
.career-card p {
    color: var(--text-color-medium);
}
.career-card .button.is-primary {
    background-color: var(--primary-color);
    color: var(--text-color-light);
}
.career-card .button.is-primary:hover{
    background-color: var(--primary-color-dark);
}


/* 8.7 Press (#prensa) */
.press-card .card-content {
    text-align: left;
}
.press-card .title.is-5 {
    color: var(--text-color-dark);
}
.press-card .subtitle.is-6 {
    color: var(--text-color-muted);
    font-style: italic;
}

/* 8.8 External Resources (#recursos-externos) */
#recursos-externos.section-gradient .card.resource-card {
    background-color: rgba(255, 255, 255, 0.05); /* Subtle glassmorphism */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
#recursos-externos.section-gradient .resource-card .card-content p,
#recursos-externos.section-gradient .resource-card .card-content .title a {
    color: var(--text-color-light);
}
#recursos-externos.section-gradient .resource-card .card-content .title a:hover {
    color: var(--secondary-color);
}
.resource-card .card-content {
    text-align: left;
}

/* 8.9 Contact (#contacto) */
#contacto {
    background: var(--background-light);
}
#contact-form, #contact-form-page {
    background: var(--card-background);
    padding: 2.5rem;
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
}
.contact-details-page, .contact-details {
    margin-top: 2rem;
}
.contact-details-page p, .contact-details p {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}
.contact-details-page strong, .contact-details strong {
    color: var(--text-color-dark);
}


/* 9. FOOTER */
.footer {
    background: var(--gradient-dark-subtle); /* Match a section gradient or be distinct */
    color: #B0BEC5; /* Light grey for text */
    padding: 3rem 1.5rem 3rem; /* Adjusted padding */
}
.footer .title.is-5 {
    color: var(--text-color-light);
    font-family: var(--font-primary);
    margin-bottom: 1rem;
}
.footer p {
    color: #B0BEC5;
    font-size: 0.95rem;
}
.footer ul {
    list-style: none;
    margin-left: 0;
}
.footer ul li {
    margin-bottom: 0.5rem;
}
.footer ul li a {
    color: #CFD8DC; /* Slightly brighter for links */
    font-family: var(--font-secondary);
    font-weight: normal;
    transition: color var(--transition-speed) var(--transition-easing-smooth), padding-left var(--transition-speed) var(--transition-easing-smooth);
}
.footer ul li a:hover {
    color: var(--secondary-color);
    padding-left: 5px;
}
#currentYear {
    font-weight: bold;
}

/* 10. PAGE-SPECIFIC STYLES */

/* 10.1 Static Pages (About, Privacy, Terms) */
.page-content {
    padding-top: var(--header-height); /* Offset for fixed header */
}
.page-content .hero.is-medium {
    /* Custom hero for static pages if needed */
}
.content-page {
    padding-top: 2rem;
    padding-bottom: 3rem;
}
.content-page .title.is-1, .content-page .title.is-2, .content-page .title.is-3 {
    margin-top: 1.5em;
}
.content-page .title.is-1:first-child,
.content-page .title.is-2:first-child,
.content-page .title.is-3:first-child {
    margin-top: 0;
}
.content-page h1, .content-page h2, .content-page h3, .content-page h4 { color: var(--text-color-dark); }
.content-page p, .content-page li { color: var(--text-color-medium); line-height: 1.8; }
.content-page ul, .content-page ol { margin-left: 1.5em; margin-bottom: 1.5em;}

.value-card {
    background: #f9f9f9; /* Light background for value cards */
    border-left: 5px solid var(--accent-color);
}
.value-card .card-content {
    text-align: left;
}
.value-card .title.is-4 {
    color: var(--accent-color);
}

/* 10.2 Success Page */
body.success-page-body { /* Add this class to body on success.html */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.success-page-body .main-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.success-page-body .page-content { /* The main content area for success */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.success-page-body .hero.is-success {
    background: var(--gradient-primary);
}
.success-page-body .hero.is-success .title,
.success-page-body .hero.is-success .subtitle {
    color: var(--text-color-light) !important;
}
.success-page-body .section:not(.hero) { /* Section containing the message */
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.success-page-body .content-page { /* Container for success message */
    max-width: 700px;
}


/* 11. ANIMATIONS & TRANSITIONS */
/* Leveraging Animate.css - custom animations can be added here if needed */
.animate__animated {
    --animate-duration: 0.8s; /* Default duration for Animate.css */
}

/* Example of a custom non-linear movement for Motion One or general transitions */
[data-motion-target] {
    opacity: 0; /* Start elements as transparent if they will be animated in */
}

/* 12. RESPONSIVE ADJUSTMENTS */
@media screen and (max-width: 768px) {
    .section {
        padding: 3rem 1rem;
    }
    .hero-title {
        font-size: 2.5rem;
    }
    .hero-subtitle {
        font-size: 1.2rem;
    }
    .hero-content-overlay {
        padding: 2rem;
    }
    .title.is-1 { font-size: 2.2rem; }
    .title.is-2 { font-size: 1.8rem; }

    .columns.is-vcentered .column.is-two-thirds,
    .columns.is-vcentered .column {
        text-align: center; /* Stack and center columns on mobile */
    }
    #vision .info-card .card-content,
    .methodology-card .card-content,
    .career-card .card-content,
    .press-card .card-content,
    .resource-card .card-content {
        text-align: center;
    }
    .card .card-content .button {
        align-self: center; /* Ensure buttons are centered in stacked cards */
    }
    .footer .columns {
        text-align: center;
    }
    .footer .column ul {
        padding-left: 0;
    }
}

/* Ensure background images cover and don't repeat */
[style*="background-image"] {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/* Dark overlay for any generic block with a background image and text on top */
.background-image-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust opacity as needed */
    z-index: 1;
}
.background-image-overlay > * {
    position: relative;
    z-index: 2;
}

/* Cookie consent - basic styling inherited (user provided styles in HTML) */
/* #cookieConsentPopup styling is in HTML as per prompt. */