/* style.css */

:root {
    /* Colors - Bright Scheme */
    --primary-color-start: #ff7f50; /* Coral */
    --primary-color-end: #ff6347;   /* Tomato */
    --primary-gradient: linear-gradient(145deg, var(--primary-color-start), var(--primary-color-end));

    --accent-color: #007bff; /* Bright Blue for links/accents */
    --accent-color-hover: #0056b3;

    /* Neumorphism Base & Shadows */
    --bg-light: #e0e5ec;
    --bg-medium-light: #f5f7fa; /* For alternating sections */
    --shadow-dark-color: rgba(163, 177, 198, 0.6);
    --shadow-light-color: rgba(255, 255, 255, 0.5);
    --inset-shadow-dark-color: #cbcfd4;
    --inset-shadow-light-color: #ffffff;

    /* Text Colors */
    --text-dark: #333333;
    --text-headings: #1a1a1a;
    --text-light: #FFFFFF;
    --text-muted: #555555;
    --text-on-primary: #FFFFFF;

    /* Typography */
    --font-primary: 'Roboto', sans-serif;
    --font-secondary: 'Lato', sans-serif;
    --base-font-size: 16px;
    --h1-font-size: clamp(2.5rem, 5vw, 3.5rem);
    --h2-font-size: clamp(2rem, 4vw, 3rem);
    --h3-font-size: clamp(1.5rem, 3vw, 2.25rem);
    --h4-font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    --p-font-size: clamp(1rem, 2vw, 1.125rem);


    /* Neumorphic Shadow Values */
    --neumorphic-offset: 6px; /* Adjusted for more subtlety */
    --neumorphic-blur: 12px;
    --card-offset: 8px;
    --card-blur: 16px;
    --card-hover-offset: 4px;
    --card-hover-blur: 8px;

    /* Shadows - Standardized */
    --shadow-outset-main:
        var(--neumorphic-offset) var(--neumorphic-offset) var(--neumorphic-blur) var(--shadow-dark-color),
        calc(var(--neumorphic-offset) * -1) calc(var(--neumorphic-offset) * -1) var(--neumorphic-blur) var(--shadow-light-color);
    --shadow-inset-main:
        inset var(--neumorphic-offset) var(--neumorphic-offset) var(--neumorphic-blur) var(--inset-shadow-dark-color),
        inset calc(var(--neumorphic-offset) * -1) calc(var(--neumorphic-offset) * -1) var(--neumorphic-blur) var(--inset-shadow-light-color);

    --shadow-outset-hover:
        var(--card-hover-offset) var(--card-hover-offset) var(--card-hover-blur) var(--shadow-dark-color),
        calc(var(--card-hover-offset) * -1) calc(var(--card-hover-offset) * -1) var(--card-hover-blur) var(--shadow-light-color);
    --shadow-outset-active:
        var(--shadow-outset-hover); /* Can be same as hover or slightly less pronounced */

    /* Primary Button Specific Shadow */
    --primary-button-shadow: 5px 5px 10px color-mix(in srgb, var(--primary-color-end) 80%, black),
                             -5px -5px 10px color-mix(in srgb, var(--primary-color-start) 80%, white);
    --primary-button-shadow-hover: 3px 3px 8px color-mix(in srgb, var(--primary-color-end) 70%, black),
                                  -3px -3px 8px color-mix(in srgb, var(--primary-color-start) 70%, white);


    /* Transitions */
    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.3s;
    --transition-timing-nonlinear: cubic-bezier(0.68, -0.6, 0.32, 1.6); /* Elastic bounce */
    --transition-timing-smooth: ease-in-out;

    /* Layout */
    --navbar-height: 3.25rem; /* Bulma default */
    --content-padding-top: calc(var(--navbar-height) + 2rem);
    --section-padding: 4rem 1.5rem;
}

/* Global Styles */
html {
    font-size: var(--base-font-size);
    scroll-behavior: smooth;
    overflow-x: hidden; /* Prevent horizontal scroll from AOS or other animations */
}

body {
    font-family: var(--font-secondary);
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden; /* Ensure Barba transitions are smooth */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6, .title, .subtitle {
    font-family: var(--font-primary);
    color: var(--text-headings);
    font-weight: 700;
    line-height: 1.3;
}

.title.is-1 { font-size: var(--h1-font-size); }
.title.is-2 { font-size: var(--h2-font-size); }
.title.is-3 { font-size: var(--h3-font-size); }
.title.is-4 { font-size: var(--h4-font-size); }
.subtitle { font-size: var(--p-font-size); color: var(--text-muted); font-weight: 400;}

p {
    font-size: var(--p-font-size);
    margin-bottom: 1rem;
    color: var(--text-dark);
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color var(--transition-speed-fast) var(--transition-timing-smooth);
}
a:hover {
    color: var(--accent-color-hover);
}

/* Section Styling */
.section {
    padding: var(--section-padding);
}
.section:nth-child(even) { /* For visual separation if not using cards for everything */
    /* background-color: var(--bg-medium-light); */ /* Removed to keep consistent neumorphic bg */
}
.section-title {
    text-align: center;
    margin-bottom: 3rem !important; /* Ensure it overrides Bulma if needed */
    color: var(--text-headings);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* From HTML, good for depth */
}

/* Parallax Background Utility */
.parallax-background {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Header & Navbar */
.navbar.is-fixed-top {
    background-color: var(--bg-light) !important; /* Override Bulma if necessary */
    box-shadow: var(--shadow-outset-main) !important;
    transition: background-color var(--transition-speed-normal) var(--transition-timing-smooth);
}
.navbar-item, .navbar-link {
    font-family: var(--font-primary);
    color: var(--text-dark) !important;
    font-weight: 500;
    transition: color var(--transition-speed-fast) var(--transition-timing-smooth);
}
.navbar-item:hover, .navbar-link:hover {
    background-color: transparent !important; /* Neumorphic, no bg change on hover */
    color: var(--accent-color) !important;
}
.navbar-burger span {
    background-color: var(--text-dark) !important;
}

/* Hero Section */
#hero.hero {
    background-color: #2c3e50; /* Fallback color */
}
#hero .hero-body {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Gradient overlay is in HTML, ensure text is bright */
}
#hero .hero-text-bright {
    color: var(--text-light) !important; /* Ensure high contrast */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7); /* Stronger shadow for readability */
}
#hero .title.is-1.hero-text-bright {
    margin-bottom: 1.5rem;
}
#hero .subtitle.is-3.hero-text-bright {
    margin-bottom: 2.5rem;
}

/* Neumorphic Components */
.card-neumorphic {
    background: var(--bg-light);
    border-radius: 20px;
    box-shadow: var(--shadow-outset-main);
    padding: 20px; /* Default padding, can be overridden */
    transition: box-shadow var(--transition-speed-normal) var(--transition-timing-nonlinear);
    display: flex; /* Added for STROGO requirement if this is the .card */
    flex-direction: column; /* Added for STROGO requirement */
    align-items: center; /* Added for STROGO requirement */
    text-align: center; /* Added for STROGO requirement */
    height: 100%; /* Make cards in a row same height */
}
.card-neumorphic:hover {
    box-shadow: var(--shadow-outset-hover);
    transform: translateY(-5px); /* Subtle lift effect */
}

.input-neumorphic,
.textarea-neumorphic {
    border: none;
    outline: none;
    background-color: var(--bg-light);
    padding: 15px;
    border-radius: 10px;
    box-shadow: var(--shadow-inset-main);
    color: var(--text-dark);
    width: 100%;
    font-family: var(--font-secondary);
    font-size: 1rem;
    transition: box-shadow var(--transition-speed-fast) var(--transition-timing-smooth);
}
.input-neumorphic:focus,
.textarea-neumorphic:focus {
    box-shadow: var(--shadow-inset-main), 0 0 0 2px var(--accent-color); /* Focus ring */
}

/* Global Button Styles (using .button-neumorphic as the main custom class) */
.button.button-neumorphic {
    font-family: var(--font-primary);
    font-weight: bold;
    border: none;
    border-radius: 10px;
    padding: 12px 25px;
    background: var(--bg-light);
    color: var(--text-muted);
    box-shadow: var(--shadow-outset-main);
    transition: all var(--transition-speed-fast) var(--transition-timing-nonlinear);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}
.button.button-neumorphic:hover {
    box-shadow: var(--shadow-outset-hover);
    transform: translateY(-2px);
}
.button.button-neumorphic:active {
    box-shadow: var(--shadow-inset-main); /* Inset shadow on active */
    transform: translateY(1px);
}

/* Primary Button Variation */
.button.button-neumorphic.is-primary {
    background: var(--primary-gradient);
    color: var(--text-on-primary); /* Ensure text is light */
    box-shadow: var(--primary-button-shadow);
}
.button.button-neumorphic.is-primary:hover {
    box-shadow: var(--primary-button-shadow-hover);
    filter: brightness(1.1);
}
.button.button-neumorphic.is-primary:active {
    box-shadow: var(--shadow-inset-main); /* Use standard inset for primary active */
    filter: brightness(0.95);
}

/* Link Button Variation (for "Más Información", "Leer Más") */
.button.button-neumorphic.is-link {
    background: var(--bg-light); /* Neumorphic base */
    color: var(--accent-color);
    /* Inherits base .button-neumorphic shadows and transitions */
}
.button.button-neumorphic.is-link:hover {
    color: var(--accent-color-hover);
    /* transform and shadow from base .button-neumorphic:hover */
}
.button.button-neumorphic.is-small {
    padding: 8px 15px;
    font-size: 0.9rem;
}


/* Card Styling (General - for sections like Services, Instructors, News) */
/* .card class from Bulma is often used inside .card-neumorphic or IS .card-neumorphic */
/* The provided HTML uses .card.card-neumorphic. So the .card-neumorphic styles apply. */

/* Specifics for image handling within cards */
.card .card-image { /* Bulma's .card-image */
    width: auto; /* Allow to shrink to image size if not full width */
    max-width: 100%; /* Ensure it doesn't overflow */
    margin-bottom: 1rem; /* Space between image and content */
    display: flex;
    justify-content: center; /* Centers the figure.image */
}
.card .card-image .image-container { /* This is the <figure class="image ... image-container"> */
    /* Bulma's .image class handles aspect ratio. We need to style the <img> inside. */
    overflow: hidden; /* Crucial for img border-radius */
    border-radius: 15px; /* Rounded corners for the image container */
    box-shadow: var(--shadow-inset-main); /* Slight inset effect for image container */
}
.card .card-image .image-container img {
    display: block;
    width: 100%;
    height: 100%; /* Fill the figure container */
    object-fit: cover; /* Cover the area, crop if necessary */
    /* border-radius is on .image-container now */
    transition: transform var(--transition-speed-normal) var(--transition-timing-smooth);
}
.card:hover .card-image .image-container img {
    transform: scale(1.05); /* Subtle zoom on card hover */
}

/* Content Alignment in Cards */
.card .card-content {
    width: 100%; /* Ensure it takes full width for text-align to work as expected */
    padding: 0.5rem 1rem; /* Adjust padding as card-neumorphic already has padding */
}
.card .card-content .title,
.card .card-content .subtitle {
    margin-bottom: 0.5rem;
}
.card .card-content p {
    font-size: 0.95rem; /* Slightly smaller text in cards */
    color: var(--text-muted);
}


/* Instructors Carousel - if using a library like Slick, it might need specific overrides */
#instructors-carousel.content-carousel .column {
    padding: 0.75rem; /* Default Bulma column padding */
}
/* If you use a carousel library, you might need: */
/* .slick-slide { margin: 0 10px; } */

/* Methodology Section */
#methodology .image-container img {
    border-radius: 15px;
}
#methodology .card-neumorphic { /* For stat widgets */
    padding: 1.5rem;
}
#methodology .title.is-1 { /* Stat number */
    color: var(--primary-color-end); /* Bright color for stats */
    margin-bottom: 0.25rem;
}

/* Webinars & Events */
#webinars .card-neumorphic, #events .card-neumorphic {
    text-align: left; /* Override card's default center align for more text */
    align-items: flex-start; /* Override card's default center align */
}
#webinars .card-content, #events .card-content {
    text-align: left;
}
#events .timeline-header .tag {
    background-color: var(--primary-color-start) !important; /* Bright tag for dates */
    font-weight: bold;
}

/* Media Section */
#media .image.is-128x128 {
    border-radius: 15px; /* Neumorphic frame for logos */
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light); /* Ensure BG for neumorphic shadow */
    box-shadow: var(--shadow-outset-main);
    transition: var(--transition-speed-normal) var(--transition-timing-smooth);
}
#media .image.is-128x128:hover {
    box-shadow: var(--shadow-outset-hover);
    transform: scale(1.05);
}
#media .image.is-128x128 img {
    max-height: 60px; /* Control logo size inside */
    width: auto;
}

/* External Resources Section */
#external-resources .card-neumorphic {
    text-align: left;
    align-items: flex-start;
}
#external-resources .card-content .title a {
    color: var(--accent-color);
    font-size: 1.1rem; /* Slightly larger for clickable titles */
}
#external-resources .card-content .title a:hover {
    color: var(--accent-color-hover);
    text-decoration: underline;
}


/* Contact Form */
#contact .label {
    color: var(--text-dark);
    font-weight: 600;
}

/* Footer */
.footer {
    background-color: #d1d9e6 !important; /* From HTML */
    padding: 3rem 1.5rem 3rem !important;
    border-top: 5px solid var(--primary-color-end); /* From HTML */
    color: var(--text-dark);
}
.footer .title.is-5 {
    color: var(--text-headings) !important;
    margin-bottom: 1rem;
}
.footer a {
    color: var(--accent-color) !important;
}
.footer a:hover {
    color: var(--accent-color-hover) !important;
    text-decoration: underline;
}
.footer .content p {
    color: var(--text-dark);
}
.footer hr {
    background-color: #b8c1d1 !important; /* From HTML */
}

/* Page specific padding for non-hero pages (about, contacts, privacy, terms) */
/* Assuming these pages will have a <main class="page-content-container"> */
.page-content-container {
    padding-top: var(--content-padding-top);
    padding-bottom: 3rem; /* Space before footer */
}
.privacy-page-main, /* Add class="privacy-page-main" to main on privacy.html */
.terms-page-main {   /* Add class="terms-page-main" to main on terms.html */
    padding-top: 100px !important; /* As requested specifically */
}
/* This also applies to other single pages like about.html, contacts.html */
.about-page-main,
.contacts-page-main {
     padding-top: var(--content-padding-top); /* Standard padding */
}


/* Success Page Styling */
.success-page-container { /* Add to body or main wrapper of success.html */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
    background-color: var(--bg-light);
}
.success-page-container .card-neumorphic {
    max-width: 600px;
    width: 100%;
    padding: 2.5rem;
}
.success-page-container .title {
    color: var(--primary-color-end); /* Or a success green */
    margin-bottom: 1rem;
}
.success-page-container p {
    margin-bottom: 1.5rem;
}

/* Barba.js Transitions (Basic Example) */
.barba-leave-active,
.barba-enter-active {
  transition: opacity var(--transition-speed-normal) var(--transition-timing-smooth);
}
.barba-leave-to,
.barba-enter-from {
  opacity: 0;
}


/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    :root {
        --section-padding: 2.5rem 1rem;
    }
    .section-title {
        margin-bottom: 2rem !important;
    }
    #hero .title.is-1 {
        font-size: clamp(2rem, 8vw, 2.5rem); /* Adjust hero title size for mobile */
    }
    #hero .subtitle.is-3 {
        font-size: clamp(1.1rem, 5vw, 1.5rem); /* Adjust hero subtitle for mobile */
    }
    .navbar-menu { /* Bulma specific for mobile menu */
        background-color: var(--bg-light);
        box-shadow: var(--shadow-inset-main);
        padding: 0.5rem 0;
    }
    .card-neumorphic {
        margin-bottom: 1.5rem; /* Space between cards on mobile */
    }
    #methodology .columns {
        flex-direction: column-reverse; /* Stack image below text on mobile */
    }
}