/* style.css */

/*------------------------------------------------------------------
[Table of contents]

1.  Root Variables
2.  Base Styles
3.  Typography
4.  Layout & Helpers
5.  Header / Navbar
6.  Hero Section
7.  General Section Styling
8.  Neumorphic Components
    8.1 Buttons
    8.2 Cards
    8.3 Forms (Inputs, Textarea, Labels)
    8.4 Content Boxes
    8.5 Stat Boxes
    8.6 Timeline
    8.7 Switches (Placeholder)
    8.8 Image Containers & Logos
    8.9 Lists (External Resources, Press)
    8.10 Contact Info
9.  Specific Section Styling
    9.1 Mission / Vision
    9.2 Statistics
    9.3 Services
    9.4 Consultores (Instructors)
    9.5 Success Stories (Timeline)
    9.6 Blog
    9.7 Media
    9.8 Press
    9.9 External Resources
    9.10 Webinars
    9.11 Contact
10. Footer
11. Animations & Transitions
    11.1 Scroll Animations
    11.2 Microinteractions
    11.3 Parallax (Basic CSS)
12. Special Pages (Success, Privacy, Terms)
13. Responsiveness (Leveraging Bulma + Custom Tweaks)
-------------------------------------------------------------------*/

/* 1. Root Variables */
:root {
    /* Monochrome Palette */
    --color-background: #e0e5ec; /* Light greyish-blue, common neumorphism base */
    --color-text: #333a4d; /* Dark grey-blue for readability */
    --color-text-light: #5a647e;
    --color-headings: #222838;
    --color-white: #FFFFFF;
    --color-shadow-light: rgba(255, 255, 255, 0.8);
    --color-shadow-dark: #a3b1c6; /* Greyish-blue shadow */
    --color-primary: #4a7a96; /* A slightly muted blue for subtle primary accent */
    --color-primary-dark: #3a6078;
    --color-link: #4a7a96;
    --color-link-hover: #3a6078;
    --color-border: #d1d9e6; /* Subtle border for separation */

    /* Fonts */
    --font-main: 'Rubik', sans-serif;
    --font-headings: 'Manrope', sans-serif;

    /* Neumorphic Shadows */
    --shadow-neumorphic-raised: 6px 6px 12px var(--color-shadow-dark), -6px -6px 12px var(--color-shadow-light);
    --shadow-neumorphic-inset: inset 4px 4px 8px var(--color-shadow-dark), inset -4px -4px 8px var(--color-shadow-light);
    --shadow-neumorphic-raised-soft: 3px 3px 6px var(--color-shadow-dark), -3px -3px 6px var(--color-shadow-light);
    --shadow-neumorphic-inset-soft: inset 2px 2px 4px var(--color-shadow-dark), inset -2px -2px 4px var(--color-shadow-light);
    --shadow-neumorphic-pressed: inset 6px 6px 12px var(--color-shadow-dark), inset -6px -6px 12px var(--color-shadow-light); /* For pressed buttons */

    /* Transitions */
    --transition-fast: all 0.2s ease-in-out;
    --transition-medium: all 0.3s ease-in-out;

    /* Header Height */
    --header-height: 80px; /* Adjust as needed */
}

/* 2. Base Styles */
html {
    scroll-behavior: smooth;
    background-color: var(--color-background);
    font-size: 16px; /* Base font size */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

body {
    font-family: var(--font-main);
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: 1.7;
    overflow-x: hidden; /* Prevent horizontal scroll */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 3. Typography */
h1, h2, h3, h4, h5, h6,
.title, .subtitle {
    font-family: var(--font-headings);
    color: var(--color-headings);
    font-weight: 700; /* Manrope bold */
    margin-bottom: 1rem; /* Default spacing */
    line-height: 1.3;
    word-wrap: break-word; /* Prevent overflow */
}

.title {
    color: var(--color-headings);
}
.subtitle {
    color: var(--color-text-light);
}

.title.is-1 { font-size: 3rem; }
.title.is-2 { font-size: 2.5rem; }
.title.is-3 { font-size: 2rem; }
.title.is-4 { font-size: 1.5rem; }
.title.is-5 { font-size: 1.25rem; }
.title.is-6 { font-size: 1rem; }

p {
    margin-bottom: 1.25rem;
    color: var(--color-text);
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--color-link-hover);
    text-decoration: none; /* Keep underline off on hover */
}

strong {
    font-weight: 500; /* Rubik medium */
    color: var(--color-headings);
}

/* 4. Layout & Helpers */
.container {
    max-width: 1200px; /* Increased max-width */
    margin-left: auto;
    margin-right: auto;
    position: relative; /* Needed for some absolutely positioned elements */
    padding-left: 15px;
    padding-right: 15px;
}

.section {
    padding: 4rem 1.5rem; /* Consistent vertical padding */
    overflow: hidden; /* contain elements */
}

/* Neumorphic section variations */
.neumorphic-section {
    background-color: var(--color-background);
    /* No extra shadow needed, base background is the neumorphic element */
}

.neumorphic-section-raised {
    background-color: var(--color-background);
    border-radius: 15px;
    box-shadow: var(--shadow-neumorphic-raised);
    margin: 2rem auto; /* Add some space around raised sections */
    max-width: calc(100% - 40px); /* Prevent edge touching */
}

@media screen and (min-width: 1024px) {
    .neumorphic-section-raised {
        max-width: 1240px; /* Match container + padding */
    }
}


.section-title {
    margin-bottom: 3rem;
    font-weight: 800; /* Manrope extra-bold */
    color: var(--color-headings);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle depth */
}

.content ul {
    list-style: disc;
    margin-left: 2em;
    margin-top: 1em;
}

.content ol {
    list-style: decimal;
    margin-left: 2em;
    margin-top: 1em;
}

.columns {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    margin-top: -0.75rem;
}
.columns:not(:last-child) {
    margin-bottom: calc(1.5rem - 0.75rem);
}
.column {
    padding: 0.75rem;
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
}


/* 5. Header / Navbar */
.header.is-fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: var(--transition-medium);
    background: var(--color-background);
    box-shadow: 0 2px 4px rgba(163, 177, 198, 0.4); /* Softer shadow for header */
    height: var(--header-height);
}

.header.is-scrolled {
    background: rgba(224, 229, 236, 0.95); /* Slightly transparent on scroll */
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 10px rgba(163, 177, 198, 0.5);
}

.navbar {
    background: transparent; /* Inherit from header */
    min-height: var(--header-height);
    align-items: center;
}

.navbar-brand {
    align-items: center;
}

.logo-text {
    font-family: var(--font-headings);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-headings);
}
.logo-text:hover {
     color: var(--color-headings); /* No color change on hover */
}
.logo-text span {
    font-weight: 800;
}

.navbar-item {
    color: var(--color-text);
    font-family: var(--font-main);
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: var(--transition-fast);
    border-radius: 8px;
    margin: 0 0.25rem;
}

.navbar-item:hover,
.navbar-item.is-active { /* Assuming an is-active class might be added */
    background-color: rgba(0, 0, 0, 0.05); /* Subtle hover */
    color: var(--color-link-hover);
}

.navbar-burger {
    color: var(--color-headings);
    height: var(--header-height);
    width: var(--header-height);
    border: none;
    background: none;
    outline: none;
}

.navbar-burger span {
    background-color: var(--color-headings);
    height: 2px; /* Thicker lines */
    transition: var(--transition-medium);
    left: calc(50% - 8px); /* Adjust position slightly */
    width: 16px;
}
/* Burger animations */
.navbar-burger.is-active span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.navbar-burger.is-active span:nth-child(2) { opacity: 0; }
.navbar-burger.is-active span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.navbar-burger.is-active span:nth-child(4) { display: none; } /* Hide 4th span */


@media screen and (max-width: 1023px) {
    .navbar-menu {
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background-color: var(--color-background);
        box-shadow: 0 8px 16px rgba(163, 177, 198, 0.4);
        padding: 1rem 0;
        display: none; /* Hidden by default */
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .navbar-menu.is-active {
        display: block;
    }
    .navbar-start, .navbar-end {
        display: block;
        text-align: center;
    }
    .navbar-item {
        display: block;
        padding: 0.75rem 1rem;
    }
    .navbar-end .navbar-item {
        justify-content: center;
    }
}

/* 6. Hero Section */
#hero {
    background-color: var(--color-headings); /* Fallback */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Ensure full viewport height */
}

/* Basic CSS Parallax for Hero Background */
#hero[data-parallax] {
    background-attachment: fixed;
}

.hero-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)); /* Dark overlay for contrast */
    z-index: 1;
}

#hero .container {
    position: relative;
    z-index: 2;
}

.hero-title {
    color: var(--color-white) !important; /* Override Bulma */
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

.hero-subtitle {
    color: var(--color-white) !important; /* Override Bulma */
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
    opacity: 0.9;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

#hero .button {
    margin-top: 1rem;
}

.scroll-down-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    animation: bounce 2s infinite;
}

.scroll-down-indicator .icon svg {
    fill: var(--color-white);
    width: 30px;
    height: 30px;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}


/* 7. General Section Styling */
/* Handled by .section, .neumorphic-section, .neumorphic-section-raised */

/* Ensure adequate spacing between columns */
.columns.is-vcentered {
    align-items: center;
}

.columns.is-centered {
    justify-content: center;
}

/* 8. Neumorphic Components */

/* 8.1 Buttons */
/* Global Button Styles (Enhancing Bulma's .button) */
.button, button, input[type='submit'], input[type='button'] {
    font-family: var(--font-main);
    font-weight: 500;
    border: none; /* Remove default borders */
    border-radius: 10px;
    padding: 0.8em 1.8em;
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
    display: inline-block;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
}

/* Primary Neumorphic Button */
.button.is-primary.neumorphic-button,
.neumorphic-button {
    background-color: var(--color-primary); /* Use accent color */
    color: var(--color-white);
    box-shadow: var(--shadow-neumorphic-raised-soft);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

.button.is-primary.neumorphic-button:hover,
.neumorphic-button:hover {
    background-color: var(--color-primary-dark);
    box-shadow: var(--shadow-neumorphic-pressed); /* Inset shadow on hover */
    color: var(--color-white);
    transform: translateY(1px); /* Subtle press effect */
}
.button.is-primary.neumorphic-button:active,
.neumorphic-button:active {
    box-shadow: var(--shadow-neumorphic-inset-soft); /* Deeper inset shadow on active */
    transform: translateY(2px);
}


/* Outlined Neumorphic Button */
.button.is-outlined.neumorphic-button-out {
    background-color: transparent;
    color: var(--color-link);
    border: 1px solid var(--color-border); /* Subtle border */
    box-shadow: none; /* No shadow initially */
}

.button.is-outlined.neumorphic-button-out:hover {
    background-color: rgba(74, 122, 150, 0.1); /* Light primary background */
    color: var(--color-link-hover);
    border-color: var(--color-link);
    box-shadow: var(--shadow-neumorphic-inset-soft); /* Inset shadow on hover */
}
.button.is-outlined.neumorphic-button-out:active {
    box-shadow: var(--shadow-neumorphic-inset); /* Deeper inset */
    transform: translateY(1px);
}


/* Link Button style */
.button.is-link {
    background-color: var(--color-link);
    color: var(--color-white);
    box-shadow: var(--shadow-neumorphic-raised-soft);
}
.button.is-link:hover {
    background-color: var(--color-link-hover);
    color: var(--color-white);
    box-shadow: var(--shadow-neumorphic-pressed);
    transform: translateY(1px);
}

/* Info Button style */
.button.is-info {
    background-color: #3e8ed0; /* Bulma info color */
    color: var(--color-white);
    box-shadow: var(--shadow-neumorphic-raised-soft);
}
.button.is-info:hover {
    background-color: #317bbd;
    color: var(--color-white);
    box-shadow: var(--shadow-neumorphic-pressed);
    transform: translateY(1px);
}

/* 'Read More' Link Styles */
a.read-more-link { /* Use this class or style specific anchors */
    font-weight: 500;
    color: var(--color-link);
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
}
a.read-more-link::after {
    content: '→';
    display: inline-block;
    margin-left: 0.3em;
    transition: transform 0.2s ease-out;
}
a.read-more-link:hover::after {
    transform: translateX(4px);
}
a.read-more-link:hover {
    color: var(--color-link-hover);
}


/* 8.2 Cards */
.card.neumorphic-card {
    background-color: var(--color-background);
    border-radius: 15px;
    box-shadow: var(--shadow-neumorphic-raised);
    transition: var(--transition-medium);
    overflow: hidden; /* Ensure content stays within rounded corners */
    height: 100%; /* Make cards in a row equal height */
    display: flex;
    flex-direction: column;
}

.card.neumorphic-card:hover {
    box-shadow: 10px 10px 20px var(--color-shadow-dark), -10px -10px 20px var(--color-shadow-light); /* Larger shadow on hover */
    transform: translateY(-5px);
}

.card-image.neumorphic-image-container {
    padding: 1rem; /* Padding around the image figure */
    display: flex; /* Center figure */
    justify-content: center;
    align-items: center;
}

.card-image .image {
    border-radius: 10px; /* Rounded corners for the image figure */
    overflow: hidden; /* Clip image to rounded corners */
    display: block;
    width: 100%; /* Ensure figure takes width */
}

.card-image img.neumorphic-image {
    display: block;
    width: 100%;
    height: 100%; /* Fill the figure */
    object-fit: cover; /* Cover the area, cropping if needed */
    border-radius: 10px; /* Match figure */
    transition: transform 0.3s ease;
}
.card.neumorphic-card:hover img.neumorphic-image {
     transform: scale(1.03); /* Slight zoom on hover */
}

/* Ensure image containers have a consistent aspect ratio or height */
.card-image .image.is-4by3,
.card-image .image.is-3by2,
.card-image .image.is-16by9,
.card-image .image.is-1by1 {
    padding-top: 0; /* Override Bulma's padding-top for aspect ratio */
    position: relative;
     /* Define a fixed height or use aspect ratio padding again if needed */
     /* Example fixed height: */
     height: 200px; /* Adjust as needed for different card types */
}

.card-image .image.is-1by1 { height: auto; padding-top: 100%; } /* For square team photos */
.card-image .image.is-3by2 { height: auto; padding-top: 66.66%; }
.card-image .image.is-4by3 { height: auto; padding-top: 75%; }
.card-image .image.is-16by9 { height: auto; padding-top: 56.25%; }

.card-image .image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Allow content to fill remaining space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push button to bottom if present */
}

.card-content .content {
    margin-bottom: 0; /* Remove Bulma's default margin */
}
.card-content .content p:last-child {
    margin-bottom: 1rem; /* Add margin back if button follows */
}
.card-content .button {
    margin-top: auto; /* Pushes button to the bottom */
    align-self: flex-start; /* Align button left */
}

/* Specific Card Centering */
.team-card .card-content {
    text-align: center;
}
.team-card .card-image .image {
    max-width: 150px; /* Limit profile picture size */
    margin: 0 auto; /* Center the figure */
    height: 150px;
    padding-top: 0; /* Override aspect ratio padding */
}
.team-card .card-image img {
    border-radius: 50%; /* Circular profile pics */
    position: static; /* Override absolute positioning */
}


/* 8.3 Forms (Inputs, Textarea, Labels) */
.neumorphic-form .field {
    margin-bottom: 1.5rem;
}

.label.neumorphic-label {
    color: var(--color-text-light);
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

.input.neumorphic-input,
.textarea.neumorphic-textarea {
    background-color: var(--color-background);
    border: none;
    border-radius: 10px;
    padding: 0.9em 1.2em;
    color: var(--color-text);
    box-shadow: var(--shadow-neumorphic-inset-soft); /* Start with inset */
    transition: var(--transition-fast);
    width: 100%;
    font-family: var(--font-main);
}
.input.neumorphic-input::placeholder,
.textarea.neumorphic-textarea::placeholder {
    color: var(--color-text-light);
    opacity: 0.7;
}

.input.neumorphic-input:focus,
.textarea.neumorphic-textarea:focus {
    outline: none;
    box-shadow: var(--shadow-neumorphic-inset), 0 0 0 2px rgba(74, 122, 150, 0.3); /* Stronger inset + focus ring */
}

.textarea.neumorphic-textarea {
    min-height: 120px;
    resize: vertical;
}

/* 8.4 Content Boxes */
.neumorphic-content-box {
    background-color: var(--color-background);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: var(--shadow-neumorphic-raised-soft);
    margin-bottom: 1.5rem; /* Spacing between boxes */
}
.neumorphic-content-box p:last-child {
    margin-bottom: 0; /* Remove margin from last paragraph inside box */
}

/* 8.5 Stat Boxes */
.neumorphic-stat-box {
    background-color: var(--color-background);
    padding: 2rem 1rem;
    border-radius: 15px;
    box-shadow: var(--shadow-neumorphic-raised-soft);
    text-align: center;
    transition: var(--transition-medium);
}
.neumorphic-stat-box:hover {
     box-shadow: var(--shadow-neumorphic-raised);
     transform: translateY(-3px);
}
.stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}
.stat-label {
    color: var(--color-text-light);
    font-weight: 500;
}

/* 8.6 Timeline */
.timeline.neumorphic-timeline {
    max-width: 800px;
    margin: 3rem auto;
    position: relative;
    padding: 2rem 0;
}
/* Timeline line */
.timeline.neumorphic-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background-color: var(--color-border);
    border-radius: 2px;
    box-shadow: var(--shadow-neumorphic-inset-soft);
}

.timeline-item {
    position: relative;
    margin-bottom: 50px;
    width: 50%;
}
.timeline-item:nth-child(odd) {
    left: 0;
    padding-right: 50px; /* Space from center line */
    text-align: right;
}
.timeline-item:nth-child(even) {
    left: 50%;
    padding-left: 50px; /* Space from center line */
    text-align: left;
}

.timeline-marker.neumorphic-marker {
    position: absolute;
    top: 15px; /* Adjust vertical alignment */
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--color-primary);
    border: 3px solid var(--color-background);
    box-shadow: var(--shadow-neumorphic-raised-soft);
    z-index: 1;
}
.timeline-item:nth-child(odd) .timeline-marker.neumorphic-marker {
    right: -8px; /* Center on line */
    transform: translateX(50%);
}
.timeline-item:nth-child(even) .timeline-marker.neumorphic-marker {
    left: -8px; /* Center on line */
    transform: translateX(-50%);
}

.timeline-content.neumorphic-content-box {
     padding: 1.5rem; /* Slightly less padding for timeline items */
}

.timeline-header {
    text-align: center;
    margin: 2rem 0;
}
.tag.neumorphic-tag {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 8px;
    box-shadow: var(--shadow-neumorphic-raised-soft);
    padding: 0.5em 1em;
}

/* Responsive Timeline */
@media screen and (max-width: 768px) {
    .timeline.neumorphic-timeline::before {
        left: 20px; /* Move line to the left */
        transform: translateX(0);
    }
    .timeline-item {
        width: 100%;
        left: 0 !important; /* Reset horizontal position */
        padding-left: 50px !important; /* Consistent padding */
        padding-right: 0 !important;
        text-align: left !important; /* All items align left */
        margin-bottom: 30px;
    }
     .timeline-item:nth-child(odd) {
        left: 0 !important;
        padding-right: 0 !important;
    }
    .timeline-item:nth-child(even) {
        left: 0 !important;
        padding-left: 50px !important;
    }
    .timeline-marker.neumorphic-marker {
        left: 20px !important; /* Align marker with the line */
        transform: translateX(-50%) !important;
    }
}


/* 8.7 Switches (Placeholder - Basic Style) */
.switch.neumorphic-switch {
    /* Basic switch styling - requires specific HTML structure */
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
.switch.neumorphic-switch input { display: none; } /* Hide checkbox */
.slider.round {
    /* Basic slider appearance */
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 34px;
    transition: .4s;
    box-shadow: var(--shadow-neumorphic-inset-soft);
}
.slider.round:before {
    /* The toggle knob */
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    border-radius: 50%;
    transition: .4s;
    box-shadow: var(--shadow-neumorphic-raised-soft);
}
input:checked + .slider.round {
    background-color: var(--color-primary);
    box-shadow: var(--shadow-neumorphic-inset);
}
input:checked + .slider.round:before {
    transform: translateX(26px);
    box-shadow: var(--shadow-neumorphic-raised-soft);
}

/* 8.8 Image Containers & Logos */
.neumorphic-image-container {
    border-radius: 15px;
    overflow: hidden; /* Clip image */
    box-shadow: var(--shadow-neumorphic-raised-soft); /* Subtle shadow for image */
    display: inline-block; /* Or block depending on context */
    background-color: var(--color-background); /* Background if image fails */
}
.neumorphic-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 15px; /* Match container */
}

.neumorphic-logo-container {
    background: var(--color-background);
    padding: 1rem;
    border-radius: 10px;
    box-shadow: var(--shadow-neumorphic-raised-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem;
}
.neumorphic-logo-container img {
     max-width: 100%;
     max-height: 60px; /* Limit logo height */
     height: auto;
     object-fit: contain;
     border-radius: 0; /* Logos usually don't need rounding */
}
.logos-container { /* Container for multiple logos */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}


/* 8.9 Lists (External Resources, Press) */
.external-resources-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.neumorphic-list-item {
    background-color: var(--color-background);
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: var(--shadow-neumorphic-raised-soft);
    margin-bottom: 1.5rem;
    transition: var(--transition-medium);
}
.neumorphic-list-item:hover {
    box-shadow: var(--shadow-neumorphic-raised);
    transform: translateY(-3px);
}
.neumorphic-list-item h4 {
    margin-bottom: 0.5rem;
}
.neumorphic-list-item p {
    margin-bottom: 0;
    color: var(--color-text-light);
    font-size: 0.9rem;
}
a.external-link {
    color: var(--color-link);
    text-decoration: none;
}
a.external-link:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.neumorphic-press-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.2s ease;
}
.neumorphic-press-item:last-child {
     border-bottom: none;
}
.neumorphic-press-item:hover {
     background-color: rgba(0,0,0, 0.03); /* Subtle hover background */
}
.neumorphic-press-item .media-content .content p {
     margin-bottom: 0;
}
.neumorphic-press-item .content strong {
     display: block;
     margin-bottom: 0.25rem;
     color: var(--color-headings);
}
.neumorphic-press-item .content strong .has-text-grey-dark {
     color: var(--color-text-light) !important;
     font-weight: 400;
}


/* 8.10 Contact Info */
.neumorphic-contact-info {
    background-color: var(--color-background);
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: var(--shadow-neumorphic-raised-soft);
    text-align: center;
}
.neumorphic-contact-info h4 {
    margin-bottom: 0.75rem;
    color: var(--color-headings);
}
.neumorphic-contact-info p {
    margin-bottom: 0.5rem;
    color: var(--color-text-light);
    font-size: 0.95rem;
}
.neumorphic-contact-info p:last-child {
    margin-bottom: 0;
}
.neumorphic-contact-info a {
     color: var(--color-link);
}
.neumorphic-contact-info a:hover {
     color: var(--color-link-hover);
}


/* 9. Specific Section Styling */

/* 9.1 Mission / Vision */
#mission .content, #vision .content {
    font-size: 1.1rem;
}

/* 9.2 Statistics */
/* Styles handled by .neumorphic-stat-box */

/* 9.3 Services */
/* Styles handled by .neumorphic-card */

/* 9.4 Consultores (Instructors) */
/* Styles handled by .team-card */

/* 9.5 Success Stories (Timeline) */
/* Styles handled by .neumorphic-timeline */

/* 9.6 Blog */
#blog .card-content .content p:first-of-type { /* Style the date/category line */
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-light);
}

/* 9.7 Media */
/* Styles handled by .neumorphic-content-box, .neumorphic-logo-container */
#media figure.image.is-16by9 img {
    border: 1px solid var(--color-border); /* Add subtle border to video thumb */
}

/* 9.8 Press */
/* Styles handled by .neumorphic-press-item */

/* 9.9 External Resources */
/* Styles handled by .neumorphic-list-item */

/* 9.10 Webinars */
/* Styles handled by .neumorphic-card */
#webinars .card-content .content p:first-of-type { /* Style the date line */
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-light);
    font-weight: 500;
}

/* 9.11 Contact */
/* Styles handled by .neumorphic-form, .neumorphic-contact-info */

/* 10. Footer */
.footer.neumorphic-footer {
    background-color: var(--color-background);
    padding: 3rem 1.5rem 3rem; /* Reduced bottom padding */
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-neumorphic-inset); /* Footer feels 'set back' */
    margin-top: 4rem; /* Space before footer */
}

.footer-title {
    color: var(--color-headings);
    font-weight: 700;
    margin-bottom: 1rem;
}

.footer-text {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer li {
    margin-bottom: 0.5rem;
}

.footer-link {
    color: var(--color-text-light);
    font-size: 0.95rem;
    text-decoration: none;
    transition: var(--transition-fast);
}

.footer-link:hover {
    color: var(--color-link);
}

/* Footer Social Links (Text only) */
.footer .column:last-child ul {
    /* No special styling needed as they are just text links */
}

/* 11. Animations & Transitions */

/* 11.1 Scroll Animations */
/* Initial state for elements to be animated */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* State when element is visible */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Add delays for staggered effect if needed */
.animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.2s; }
/* ... etc. Or apply delays via JS */

/* 11.2 Microinteractions */
.microinteraction {
    transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}
.microinteraction:active {
    transform: scale(0.98); /* Slight shrink on click */
}

/* Apply to buttons, links, interactive elements */
.button.microinteraction:active,
.neumorphic-button.microinteraction:active {
    transform: scale(0.97) translateY(2px);
}

/* 11.3 Parallax (Basic CSS) */
/* Applied directly to #hero background-attachment: fixed */
/* More complex parallax requires JavaScript (Anime.js) */
/* Example: A block moving slower than scroll */
/*
.parallax-block {
    transition: transform 0.1s linear; // Smooth out JS updates
}
*/


/* 12. Special Pages (Success, Privacy, Terms) */

/* Success Page Styles */
body.success-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    background-color: var(--color-background);
}
.success-container {
    background-color: var(--color-background);
    padding: 3rem;
    border-radius: 15px;
    box-shadow: var(--shadow-neumorphic-raised);
    max-width: 600px;
}
.success-container h1 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}
.success-container p {
    color: var(--color-text);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}
.success-container .button {
    min-width: 150px;
}


/* Privacy & Terms Page Styles */
body.privacy-page,
body.terms-page {
    padding-top: var(--header-height); /* Ensure content is below fixed header */
}
.legal-content-section {
    padding-top: 4rem; /* Additional top padding specific to these pages */
    padding-bottom: 4rem;
}
.legal-content-section .container {
    max-width: 800px; /* Narrower container for readability */
}
.legal-content-section h1 {
    margin-bottom: 2rem;
    text-align: center;
}
.legal-content-section h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}
.legal-content-section p,
.legal-content-section ul,
.legal-content-section ol {
    margin-bottom: 1rem;
    color: var(--color-text);
    line-height: 1.8;
}
.legal-content-section ul,
.legal-content-section ol {
    margin-left: 1.5em;
}

/* 13. Responsiveness */

@media screen and (max-width: 768px) {
    html {
        font-size: 15px; /* Slightly smaller base font on mobile */
    }
    .section {
        padding: 3rem 1rem;
    }
    .hero-title {
        font-size: 2.5rem;
    }
    .hero-subtitle {
        font-size: 1.2rem;
    }
    .title.is-1 { font-size: 2.5rem; }
    .title.is-2 { font-size: 2rem; }
    .title.is-3 { font-size: 1.75rem; }

    .columns.is-multiline .column.is-one-quarter,
    .columns.is-multiline .column.is-one-third {
        width: 50%; /* 2 cards per row on smaller tablets */
    }
     .columns.is-multiline .column.is-half {
        width: 100%; /* Full width */
    }
     /* Ensure columns don't get too small */
     .column.is-two-thirds {
        width: 100%;
     }


    .neumorphic-stat-box {
        margin-bottom: 1.5rem;
    }

    #contact .columns.is-centered .column.is-one-third {
        width: 80%; /* Make contact info boxes stack nicely */
        margin-bottom: 1.5rem;
    }
    #contact .columns.is-centered .column.is-one-third:last-child {
        margin-bottom: 0;
    }


    .footer .columns {
        text-align: center;
    }
    .footer .column {
        margin-bottom: 1.5rem;
    }
     .footer .column:last-child {
        margin-bottom: 0;
    }

    .neumorphic-section-raised {
        margin: 1rem auto;
        max-width: calc(100% - 20px);
    }
}

@media screen and (max-width: 480px) {
     html {
        font-size: 14px;
    }
    .hero-title {
        font-size: 2rem;
    }
    .hero-subtitle {
        font-size: 1.1rem;
    }
    .columns.is-multiline .column.is-one-quarter,
    .columns.is-multiline .column.is-one-third,
    .columns.is-multiline .column.is-half {
        width: 100%; /* 1 card per row on mobile */
    }

     .button {
        padding: 0.7em 1.5em;
        font-size: 0.95rem;
    }
    .button.is-large {
        font-size: 1.1rem;
    }

    .neumorphic-content-box {
        padding: 1.5rem;
    }
    .timeline.neumorphic-timeline {
        margin: 2rem auto;
    }
}