/* style.css */

:root {
    /* Color Palette - Gradient Theme */
    --primary-color-start: #0052D4; /* Deep Blue */
    --primary-color-end: #4364F7;   /* Brighter Blue */
    --secondary-color-start: #65C7F7; /* Sky Blue */
    --secondary-color-end: #0052D4;   /* Deep Blue (for contrast) */

    --accent-color-start: #FFD700;  /* Gold */
    --accent-color-end: #FFA500;    /* Orange */
    --accent-color-hover: #FF8C00;  /* Darker Orange for hover */

    --text-color-light: #FFFFFF;
    --text-color-dark: #333333;
    --text-color-headings: #222222;
    --text-color-subtle: #555555;
    --text-color-link: var(--primary-color-start);
    --text-color-link-hover: var(--primary-color-end);

    --background-light: #F8F9FA;
    --background-dark-transparent: rgba(0, 0, 0, 0.7);
    --background-card: #FFFFFF;
    --border-color: #E0E0E0;

    /* Gradient Definitions */
    --gradient-primary: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    --gradient-secondary: linear-gradient(135deg, var(--secondary-color-start), var(--secondary-color-end));
    --gradient-accent: linear-gradient(135deg, var(--accent-color-start), var(--accent-color-end));
    --gradient-footer: linear-gradient(135deg, #232526, #414345); /* Dark gradient for footer */

    /* Typography */
    --font-family-headings: 'Roboto', sans-serif;
    --font-family-body: 'Lato', sans-serif;
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* Spacing */
    --spacing-small: 0.5rem;
    --spacing-medium: 1rem;
    --spacing-large: 2rem;
    --spacing-xlarge: 3rem;

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-timing: ease-in-out;

    /* Borders */
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 16px;

    /* Shadows */
    --box-shadow-light: 0 2px 10px rgba(0, 0, 0, 0.08);
    --box-shadow-medium: 0 5px 15px rgba(0, 0, 0, 0.12);
    --box-shadow-heavy: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Global Styles */
html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base for adaptive typography */
}

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

.main-container {
    overflow: hidden; /* For Barba.js transitions */
}

/* Adaptive Typography & Headings */
h1, h2, h3, h4, h5, h6, .title, .subtitle {
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-bold);
    color: var(--text-color-headings);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1); /* Subtle shadow for dark headings */
}

.title.is-1 { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: var(--spacing-medium); }
.title.is-2, .section-title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--spacing-large); color: var(--text-color-headings); text-align: center; }
.title.is-3 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.title.is-4 { font-size: clamp(1.4rem, 3vw, 2rem); }
.title.is-5 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
.subtitle { color: var(--text-color-subtle); font-weight: var(--font-weight-normal); }
.subtitle.is-3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
.subtitle.is-5 { font-size: clamp(1rem, 2vw, 1.25rem); }

p {
    margin-bottom: var(--spacing-medium);
    font-size: clamp(1rem, 1.8vw, 1.1rem);
    color: var(--text-color-dark);
}

a {
    color: var(--text-color-link);
    transition: color var(--transition-speed) var(--transition-timing);
}

a:hover {
    color: var(--text-color-link-hover);
}

/* Section Styling */
.section {
    padding: var(--spacing-xlarge) var(--spacing-medium); /* Natural height based on content */
}
.section.is-medium {
    padding: calc(var(--spacing-xlarge) * 1.5) var(--spacing-medium);
}
.section.is-large {
     padding: calc(var(--spacing-xlarge) * 2) var(--spacing-medium);
}

/* Header & Navigation */
.header {
    position: fixed;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
    backdrop-filter: blur(10px);
    box-shadow: var(--box-shadow-light);
    transition: background-color var(--transition-speed) var(--transition-timing);
}
.navbar {
    min-height: 5rem; /* Adjust based on logo and item size */
}
.navbar-item img {
    max-height: 3rem; /* Adjust logo size */
}
.navbar-item, .navbar-link {
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-bold);
    font-size: 1.1rem;
    color: var(--text-color-dark);
    transition: color var(--transition-speed) var(--transition-timing);
}
.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active, .navbar-link.is-active {
    background-color: transparent !important;
    color: var(--primary-color-start) !important;
}
.navbar-burger {
    color: var(--text-color-dark);
}
.navbar-burger:hover {
    background-color: rgba(0,0,0,0.05);
}
.navbar-menu.is-active {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(5px);
    box-shadow: var(--box-shadow-medium);
}

@media screen and (max-width: 1023px) {
    .navbar-menu {
        padding: 0.5rem 0;
    }
    .navbar-item {
        padding: 0.75rem 1rem;
        text-align: center;
    }
}


/* Global Button Styles */
.button, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-bold);
    border-radius: var(--border-radius-medium);
    padding: 0.75em 1.5em;
    transition: transform var(--transition-speed) var(--transition-timing),
                box-shadow var(--transition-speed) var(--transition-timing),
                background var(--transition-speed) var(--transition-timing);
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: clamp(0.9rem, 1.5vw, 1rem);
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--box-shadow-medium);
}
.button:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translateY(-1px) scale(0.99);
    box-shadow: var(--box-shadow-light);
}

.button.is-primary.is-gradient, .is-gradient {
    background: var(--gradient-primary);
    color: var(--text-color-light);
    border: none;
}
.button.is-primary.is-gradient:hover, .is-gradient:hover {
    background: linear-gradient(135deg, var(--primary-color-end), var(--primary-color-start)); /* Slight shift for hover */
    box-shadow: 0 8px 20px rgba(0, 82, 212, 0.3);
}
.button.is-link.is-outlined {
    border-color: var(--primary-color-start);
    color: var(--primary-color-start);
    background-color: transparent;
}
.button.is-link.is-outlined:hover {
    background-color: var(--primary-color-start);
    color: var(--text-color-light);
}
.button.is-large {
    padding: 1em 2em;
    font-size: clamp(1rem, 1.8vw, 1.1rem);
}


/* Hero Section */
.hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative; /* For potential pseudo-elements or animations */
}
.hero .hero-body {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-large); /* Ensure content is not at edges */
}
.hero .title.is-1, .hero .subtitle.is-3 {
    color: var(--text-color-light) !important; /* Enforce white text */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}
.hero .title.is-1 {
    margin-bottom: var(--spacing-medium);
}
.hero .subtitle.is-3 {
    margin-bottom: var(--spacing-large);
    font-weight: 300;
}
.animated-text { /* Placeholder for GSAP animation */
    /*opacity: 0;*/
    transform: translateY(20px);
}
.animated-button { /* Placeholder for GSAP animation */
    /*opacity: 0;*/
    transform: scale(0.8);
}

/* Card Styles (Global) */
.card {
    background-color: var(--background-card);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-light);
    transition: transform var(--transition-speed) var(--transition-timing),
                box-shadow var(--transition-speed) var(--transition-timing);
    overflow: hidden; /* Important for image containers */
    display: flex;
    flex-direction: column;
    height: 100%; /* Make cards in a row same height */
}
.card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: var(--box-shadow-medium);
}
.card .card-image, .card .image-container { /* Bulma's card-image and custom image-container */
    width: 100%;
    overflow: hidden; /* Ensure image stays within bounds */
    display: flex;
    justify-content: center;
    align-items: center;
}
.card .card-image figure, .card .image-container figure {
    width: 100%;
    height: 0; /* Aspect ratio trick or fixed height */
    padding-bottom: 75%; /* Default 4:3 aspect ratio, adjust as needed */
    position: relative;
}
.card .card-image img, .card .image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crucial for uniform image display */
    transition: transform var(--transition-speed) var(--transition-timing);
}
.card:hover .card-image img, .card:hover .image-container img {
    transform: scale(1.05);
}
.card .card-content {
    padding: var(--spacing-large);
    text-align: center; /* Center text content within card */
    flex-grow: 1; /* Allow content to take remaining space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes content and title apart if needed */
}
.card .card-content .title {
    margin-bottom: var(--spacing-medium);
    line-height: 1.3;
}
.card .card-content .content {
    font-size: clamp(0.9rem, 1.6vw, 1rem);
    line-height: 1.6;
    color: var(--text-color-subtle);
}

/* Workshop Cards specific styling */
.workshop-card .card-content .title {
    color: var(--primary-color-start);
}

/* Award Cards */
.award-card .card-image figure, .award-card .image-container figure {
    padding-bottom: 100%; /* 1:1 aspect ratio for awards */
    max-height: 200px; /* Limit award image size */
    margin-left: auto;
    margin-right: auto;
}
.award-card .card-image img, .award-card .image-container img {
    padding: var(--spacing-small); /* Optional padding around award image */
    object-fit: contain; /* Or cover, depending on award image style */
}
.award-card .card-content {
    padding: var(--spacing-medium);
}

/* Customer Stories / Testimonial Cards */
.testimonial-card {
    text-align: center;
}
.testimonial-card .card-image.image-container { /* For rounded images specifically */
    display: flex;
    justify-content: center;
    padding-top: var(--spacing-large); /* Space above the image */
}
.testimonial-card .person-image {
    width: 120px !important; /* Fixed size for testimonial images */
    height: 120px !important;
    border-radius: 50% !important; /* Ensure it's round */
    border: 4px solid var(--primary-color-start);
    box-shadow: var(--box-shadow-light);
    margin: 0 auto var(--spacing-medium) auto; /* Center and add bottom margin */
}
.testimonial-card .person-image img {
    object-fit: cover;
    border-radius: 50%;
}
.testimonial-card .card-content .content {
    font-style: italic;
    color: var(--text-color-dark);
    margin-bottom: var(--spacing-medium);
}
.testimonial-card .card-content .title.is-5 {
    margin-top: var(--spacing-medium);
    color: var(--text-color-headings);
}
.testimonial-card .card-content .subtitle.is-6 {
    color: var(--primary-color-start);
}

/* Press Section */
.press-mention.box {
    background-color: var(--background-card);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-light);
    padding: var(--spacing-large);
    text-align: left;
    transition: transform var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
    height: 100%;
}
.press-mention.box:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-medium);
}
.press-mention .title.is-5 {
    color: var(--primary-color-start);
    margin-bottom: var(--spacing-small);
}
.press-mention .subtitle.is-6 {
    color: var(--text-color-subtle);
    margin-bottom: var(--spacing-medium);
    font-style: italic;
}
.press-mention p:not(.title):not(.subtitle) {
    margin-bottom: var(--spacing-medium);
    font-size: 0.95rem;
}
.press-mention .button.is-link.is-small.is-outlined {
    font-size: 0.85rem;
    text-transform: none;
    letter-spacing: 0;
}
a.button.is-link.is-small.is-outlined.mt-3 {
    display: inline-block; /* Ensures margin-top works correctly */
    margin-top: var(--spacing-medium) !important; /* Bulma's mt-3 might be small */
}

/* External Resources Section */
.resource-card .card-content .title a {
    color: var(--primary-color-start);
    text-decoration: none;
}
.resource-card .card-content .title a:hover {
    color: var(--primary-color-end);
    text-decoration: underline;
}
.resource-card .card-content {
    text-align: left;
}

/* FAQ Section - Accordion */
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}
.accordion-item {
    background-color: var(--background-card);
    margin-bottom: var(--spacing-medium);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-light);
    overflow: hidden;
}
.accordion-header {
    background: var(--gradient-primary);
    color: var(--text-color-light);
    padding: var(--spacing-medium) var(--spacing-large);
    width: 100%;
    text-align: left;
    border: none;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: background-color var(--transition-speed) var(--transition-timing);
    position: relative; /* For pseudo-element icon */
}
.accordion-header:hover {
    background: linear-gradient(135deg, var(--primary-color-end), var(--primary-color-start));
}
.accordion-header::after { /* Custom arrow icon */
    content: '+';
    font-size: 1.5em;
    position: absolute;
    right: var(--spacing-large);
    top: 50%;
    transform: translateY(-50%);
    transition: transform var(--transition-speed) var(--transition-timing);
}
.accordion-header.is-active::after {
    transform: translateY(-50%) rotate(45deg);
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-speed) var(--transition-timing), padding var(--transition-speed) var(--transition-timing);
}
.accordion-content .content {
    padding: 0 var(--spacing-large);
    color: var(--text-color-dark);
}
.accordion-header.is-active + .accordion-content {
    /* max-height is set by JS */
    padding: var(--spacing-large) 0; /* Add padding when active */
}
.accordion-content p {
    margin-bottom: var(--spacing-small);
    font-size: clamp(0.95rem, 1.7vw, 1.05rem);
}


/* Contact Section */
#contact {
    background-color: #eef2f7; /* Lighter grey for contrast */
}
.modern-input, .modern-input.textarea {
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--border-color);
    box-shadow: var(--box-shadow-light);
    padding: 0.8em 1em; /* Increased padding for better feel */
    font-size: 1rem;
    transition: border-color var(--transition-speed) var(--transition-timing),
                box-shadow var(--transition-speed) var(--transition-timing);
}
.modern-input:focus, .modern-input.textarea:focus {
    border-color: var(--primary-color-start);
    box-shadow: 0 0 0 0.125em rgba(0, 82, 212, 0.25); /* Bulma-like focus */
    outline: none;
}
.label {
    font-weight: var(--font-weight-bold);
    color: var(--text-color-headings);
    margin-bottom: var(--spacing-small);
}
.field .checkbox {
    font-size: 0.9rem;
}
.field .checkbox a {
    font-weight: bold;
}

/* Footer */
.footer.gradient-footer {
    background: var(--gradient-footer);
    color: var(--text-color-light);
    padding: var(--spacing-xlarge) var(--spacing-medium) var(--spacing-medium);
}
.footer .title {
    color: var(--text-color-light) !important;
    text-shadow: none;
}
.footer p, .footer li {
    color: #cccccc; /* Lighter grey for footer text */
    font-size: 0.95rem;
}
.footer a {
    color: var(--text-color-light) !important;
    transition: color var(--transition-speed) var(--transition-timing), text-decoration var(--transition-speed) var(--transition-timing);
}
.footer a:hover {
    color: var(--accent-color-start) !important;
    text-decoration: underline;
}
.footer hr {
    background-color: rgba(255, 255, 255, 0.1);
    height: 1px;
    margin: var(--spacing-large) 0;
}
.footer .content p { /* Copyright text */
    color: #a0a0a0;
    font-size: 0.9rem;
}
.footer .column ul {
    list-style: none;
    margin-left: 0;
}
.footer .column li {
    margin-bottom: var(--spacing-small);
}
/* Social media text links in footer */
.footer .column p a[target="_blank"] { /* Style for social links */
    display: inline-block;
    padding: var(--spacing-small) 0; /* Add some vertical padding */
}

/* Images with text overlay */
[style*="background-image"] { /* General rule for any element with inline background image */
    position: relative;
}
/* This is better handled by the linear-gradient directly in the HTML style attribute for hero.
   If other sections use it, ensure the gradient overlay is applied in HTML.
   Example: style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(...)"
*/

/* Innovation & Sustainability images (if not cards) */
#innovacion img, #sostenibilidad img {
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-medium);
    margin-top: var(--spacing-large);
    max-width: 100%;
    height: auto;
}

/* Specific Page Styles */
/* success.html */
.success-page-container { /* Add this class to the body or a main wrapper in success.html */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    background: var(--gradient-primary);
    color: var(--text-color-light);
    padding: var(--spacing-large);
}
.success-page-container h1 {
    color: var(--text-color-light);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    margin-bottom: var(--spacing-medium);
}
.success-page-container p {
    color: var(--text-color-light);
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    margin-bottom: var(--spacing-large);
}
.success-page-container .button {
    background: var(--text-color-light);
    color: var(--primary-color-start);
    border: 2px solid var(--primary-color-start);
}
.success-page-container .button:hover {
    background: var(--primary-color-start);
    color: var(--text-color-light);
    border-color: var(--text-color-light);
}


/* privacy.html & terms.html */
.legal-page-content { /* Add this class to the main content wrapper in privacy.html and terms.html */
    padding-top: calc(5rem + var(--spacing-large)); /* Navbar height + extra space */
    padding-bottom: var(--spacing-xlarge);
}
.legal-page-content .container {
    max-width: 900px; /* Restrict width for readability */
    margin: 0 auto;
}
.legal-page-content h1, .legal-page-content h2 {
    text-align: left;
    margin-bottom: var(--spacing-medium);
}
.legal-page-content h1 {
    margin-bottom: var(--spacing-large);
}
.legal-page-content p, .legal-page-content li {
    text-align: justify;
    margin-bottom: var(--spacing-medium);
    font-size: 1.05rem;
}
.legal-page-content ul, .legal-page-content ol {
    margin-left: var(--spacing-large);
    margin-bottom: var(--spacing-medium);
}


/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .section {
        padding: var(--spacing-large) var(--spacing-small);
    }
    .section.is-medium {
        padding: calc(var(--spacing-large) * 1.2) var(--spacing-small);
    }
    .title.is-1 { font-size: 2.2rem; }
    .title.is-2, .section-title { font-size: 1.8rem; }

    .columns.is-centered .column.is-two-thirds {
        width: 90% !important; /* Override Bulma for better mobile full width */
        margin: 0 auto;
    }
    .footer .columns {
        text-align: center;
    }
    .footer .column {
        margin-bottom: var(--spacing-large);
    }
    .footer .column:last-child {
        margin-bottom: 0;
    }
}

/* GSAP Animation Placeholders - to be controlled by script.js */
.gsap-fade-in {
    /*opacity: 0;*/
}
.gsap-slide-up {
    /*opacity: 0;*/
    transform: translateY(50px);
}
.gsap-scale-in {
    /*opacity: 0;*/
    transform: scale(0.8);
}

/* Cookie Consent Popup (Complementary styles if needed, mostly inline) */
#cookie-consent-popup {
    font-family: var(--font-family-body);
}
#cookie-consent-popup p {
    color: white; /* Ensure contrast if not already set */
    font-size: 0.95em !important; /* Override if needed */
    margin-bottom: 10px !important;
}
#cookie-consent-popup button {
    font-family: var(--font-family-headings);
    text-transform: uppercase;
    padding: 8px 18px;
    font-size: 0.9em;
}
#cookie-consent-popup a {
    font-size: 0.85em !important;
}
.navbar-burger{
    display: none;
}