:root {
    /* Monochromatic Dark Theme */
    --bg-main: #1a1a1a;
    --bg-card: #2c2c2c;
    --bg-card-hover: #383838;
    --bg-navbar: #222222;
    --bg-footer: #222222;
    --bg-input: #333333;
    --bg-button-primary: #00d1b2; /* Bulma primary teal */
    --bg-button-primary-hover: #00b89c; /* Darker teal */
    --bg-button-link: #3273dc; /* Bulma link blue */
    --bg-button-link-hover: #2763c2; /* Darker blue */
    --bg-overlay: rgba(0,0,0,0.6);
    --bg-texture-section: #202020;

    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-headings: #ffffff;
    --text-on-primary-button: #ffffff;
    --text-link: var(--bg-button-primary);
    --text-link-hover: #ffffff;

    --border-color: #444444;
    --border-color-focus: var(--bg-button-primary);

    /* Fonts */
    --font-main: 'IBM Plex Sans', sans-serif;
    --font-headings: 'Inter', sans-serif;

    /* Spacing */
    --spacing-small: 0.5rem;
    --spacing-medium: 1rem;
    --spacing-large: 1.5rem;
    --spacing-xlarge: 2.5rem;

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

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

    /* Shadows for depth and hyperrealism */
    --shadow-light: 0 2px 8px rgba(0,0,0,0.2);
    --shadow-medium: 0 4px 15px rgba(0,0,0,0.3);
    --shadow-strong: 0 8px 25px rgba(0,0,0,0.4);
}

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

body {
    font-family: var(--font-main);
    background-color: var(--bg-main);
    color: var(--text-primary);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 52px; /* Standard Bulma navbar height (3.25rem) */
}

.texture-section {
    background-color: var(--bg-texture-section);
    /* Example subtle texture:
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23303030' fill-opacity='0.08' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
    */
}

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

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-xlarge);
    font-size: 2.5rem;
    color: var(--text-headings);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
@media screen and (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
}

p {
    margin-bottom: var(--spacing-medium);
}

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

.section { /* Natural height, responsive padding */
    padding: 3rem 1.5rem;
}
@media screen and (min-width: 1024px) {
    .section {
        padding: 4.5rem 2rem;
    }
}

.container { /* Bulma's container is fine, this is for general reference */
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

/* Global Button Styles (applied to .button, input[type='submit'], etc.) */
.button,
input[type="submit"],
input[type="button"],
button {
    font-family: var(--font-headings);
    font-weight: 700;
    border-radius: var(--border-radius-medium);
    transition: background-color var(--transition-speed) var(--transition-ease), transform var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease);
    border: none; /* Remove default browser borders */
    padding: 0.75em 1.5em;
    cursor: pointer;
    line-height: 1.5; /* Ensure text is vertically centered */
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-light);
}

.button.is-primary,
input[type="submit"].is-primary, /* If you add .is-primary to input */
button.is-primary {
    background-color: var(--bg-button-primary);
    color: var(--text-on-primary-button);
}
.button.is-primary:hover,
input[type="submit"].is-primary:hover,
button.is-primary:hover {
    background-color: var(--bg-button-primary-hover);
}

.button.is-link,
button.is-link {
    background-color: var(--bg-button-link);
    color: var(--text-on-primary-button);
}
.button.is-link:hover,
button.is-link:hover {
    background-color: var(--bg-button-link-hover);
}


/* Form elements */
.input, .textarea {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--border-radius-medium);
    transition: border-color var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease);
    font-family: var(--font-main);
    padding: 0.75em 1em;
}
.input::placeholder, .textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}
.input:focus, .textarea:focus,
.input.is-focused, .textarea.is-focused, /* Bulma classes */
.input:active, .textarea:active,
.input.is-active, .textarea.is-active { /* Bulma classes */
    border-color: var(--border-color-focus);
    box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25); /* Match Bulma primary focus */
}
label.label {
    color: var(--text-headings);
    font-weight: 700;
    margin-bottom: var(--spacing-small);
}

/* Navbar / Header */
.navbar {
    background-color: var(--bg-navbar);
    box-shadow: var(--shadow-light);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030; /* Ensure it's above most content */
}
.navbar-item, .navbar-link {
    color: var(--text-primary);
    font-weight: 700;
    transition: background-color var(--transition-speed) var(--transition-ease), color var(--transition-speed) var(--transition-ease);
}
.navbar-item:hover, .navbar-link:hover, .navbar-item.is-active, .navbar-link.is-active {
    background-color: var(--bg-card-hover);
    color: var(--bg-button-primary);
}
.navbar-brand .navbar-item {
    font-size: 1.5rem; /* From HTML */
    color: var(--bg-button-primary);
}
.navbar-brand .navbar-item span { /* For "Flow" part of logo */
    color: var(--text-headings);
}
.navbar-burger span {
    background-color: var(--text-primary);
    height: 2px;
}
@media screen and (max-width: 1023px) { /* Bulma's breakpoint for burger */
    .navbar-menu {
        background-color: var(--bg-navbar); /* Dark background for mobile dropdown */
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 2px 5px rgba(0,0,0,0.2);
    }
}
.navbar-dropdown {
    background-color: var(--bg-card);
    border-top: 2px solid var(--bg-button-primary);
    border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
    box-shadow: var(--shadow-light);
}
.navbar-dropdown .navbar-item {
    color: var(--text-primary);
}
.navbar-dropdown .navbar-item:hover {
    background-color: var(--bg-card-hover);
    color: var(--bg-button-primary);
}

/* Hero Section */
.hero.is-fullheight {
    background-color: #111;
    position: relative;
}
.hero-background { /* For the background image itself */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}
.hero.is-fullheight .hero-body {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 2rem; /* Add padding for smaller screens */
}
.hero.is-fullheight .hero-body::before { /* Dark overlay for text readability */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-overlay);
    z-index: 1;
}
.hero .hero-body .container {
    position: relative;
    z-index: 3;
}
.hero .title { /* Text in hero MUST be white */
    color: #FFFFFF !important;
    font-size: 3rem;
    margin-bottom: var(--spacing-medium);
    text-shadow: 1px 1px 6px rgba(0,0,0,0.7);
}
.hero .subtitle { /* Text in hero MUST be white or very light */
    color: #f0f0f0 !important;
    font-size: 1.5rem;
    margin-bottom: var(--spacing-large);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}
@media screen and (max-width: 768px) {
    .hero .title { font-size: 2.2rem; }
    .hero .subtitle { font-size: 1.2rem; }
}

/* Card Styles - General */
.card {
    background-color: var(--bg-card);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-medium);
    overflow: hidden; /* Important for border-radius on children */
    height: 100%;
    display: flex;
    flex-direction: column; /* Content flows top to bottom */
    transition: transform var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease);
    text-align: center; /* STROGO: Center content within cards */
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-strong);
}
/* Card Image Container */
.card .card-image { /* Parent of <figure> or <img> */
    position: relative;
    background-color: #222; /* Fallback */
    overflow: hidden;
    height: 220px; /* STROGO: Fixed height for image containers */
    display: flex; /* STROGO: Center image if figure is used */
    align-items: center;
    justify-content: center;
}
.card .card-image figure.image { /* Bulma class, if used */
    margin: 0;
    width: 100%;
    height: 100%;
    padding-top: 0 !important; /* Override Bulma aspect ratio padding */
    display: flex;
    align-items: center;
    justify-content: center;
}
.card .card-image img {
    display: block;
    width: 100%;
    height: 100%; /* STROGO: Image fills its container */
    object-fit: cover; /* STROGO: Cover, don't distort */
    transition: transform var(--transition-speed) var(--transition-ease);
}
.card:hover .card-image img {
    transform: scale(1.05);
}
/* Card Content */
.card .card-content {
    padding: var(--spacing-large);
    color: var(--text-secondary);
    flex-grow: 1; /* Allows content to fill space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes buttons/links to bottom if card height is fixed by row */
    text-align: left; /* Default text alignment within content, override if needed */
}
.card.has-text-centered .card-content, /* Utility if all content needs center */
.item.has-text-centered,
.testimonial.has-text-centered {
    text-align: center;
}

.card .card-content .title {
    color: var(--text-headings);
    margin-bottom: var(--spacing-small);
    font-size: 1.3rem; /* Consistent title size in cards */
}
.card .card-content .subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
}
/* Specific image container height overrides */
#beneficios .card .card-image { height: 180px; }
#metodo .card .card-image { height: 250px; } /* For persona_meditando_escritorio_reloj_800x600.jpg */
#webinars .card .card-image { height: 200px; } /* For taller_meditacion_grupo_calmado_800x450.jpg */

/* Styles for images directly in columns (not cards) */
#sostenibilidad .column > figure.image {
    height: 450px; overflow: hidden; border-radius: var(--border-radius-large);
}
#sostenibilidad .column > figure.image img { width: 100%; height: 100%; object-fit: cover; }

#investigacion .column figure.image {
    height: 300px; width: 300px; overflow: hidden; border-radius: var(--border-radius-large); margin: auto;
}
#investigacion .column figure.image img { width: 100%; height: 100%; object-fit: cover; }


/* Testimonial Avatars */
.card .media { align-items: center; }
.card .media-left .image img {
    border-radius: 50%;
    width: 48px; height: 48px; object-fit: cover;
}

/* "Read More" link style */
.read-more-link {
    display: inline-block;
    margin-top: var(--spacing-medium);
    font-weight: bold;
    color: var(--bg-button-primary);
}
.read-more-link::after { content: ' →'; }
.read-more-link:hover { color: var(--text-link-hover); transform: translateX(3px); }

/* Video Container for Webinars */
.video-container {
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
    max-width: 100%; background: #000; border-radius: var(--border-radius-medium);
    margin-top: var(--spacing-medium); margin-bottom: var(--spacing-medium);
}
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* External Resources Section */
.external-links-section {
    background-color: #252525; padding: var(--spacing-xlarge);
    border-radius: var(--border-radius-large); margin: var(--spacing-large) 0;
}
.external-links-section .title { color: var(--text-headings); text-align: center; margin-bottom: var(--spacing-large); }
.external-link-item {
    background-color: var(--bg-input); padding: var(--spacing-medium);
    margin-bottom: var(--spacing-medium); border-radius: var(--border-radius-medium);
    transition: transform var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease);
}
.external-link-item:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,209,178,0.2); }
.external-link-item a { font-weight: bold; color: var(--bg-button-primary); font-size: 1.1rem; }
.external-link-item p { color: var(--text-secondary); font-size: 0.9rem; margin-top: var(--spacing-small); }

/* FAQ Section */
.faq-item {
    background-color: var(--bg-card); margin-bottom: var(--spacing-medium);
    border-radius: var(--border-radius-medium); box-shadow: var(--shadow-light);
}
.faq-question {
    background-color: #383838; padding: var(--spacing-medium) var(--spacing-large);
    cursor: pointer; border-radius: var(--border-radius-medium); color: var(--text-headings);
    font-weight: bold; display: flex; justify-content: space-between; align-items: center;
    transition: background-color var(--transition-speed) var(--transition-ease);
}
.faq-question:hover { background-color: #404040; }
.faq-question .icon { transition: transform var(--transition-speed) var(--transition-ease); color: var(--bg-button-primary); }
.faq-item.active .faq-question .icon { transform: rotate(180deg); }
.faq-answer {
    padding: var(--spacing-large); display: none; border-top: 1px solid var(--border-color);
    color: var(--text-primary); border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
}
.faq-item.active .faq-answer { display: block; }

/* Contact Form Container */
.contact-form-container {
    background-color: var(--bg-card); padding: var(--spacing-xlarge);
    border-radius: var(--border-radius-large); box-shadow: var(--shadow-medium);
}

/* Footer */
.footer {
    background-color: var(--bg-footer); color: var(--text-secondary);
    padding: 3rem 1.5rem;
}
.footer .title { color: var(--text-headings); font-size: 1.2rem; margin-bottom: var(--spacing-medium); }
.footer p, .footer ul { margin-bottom: var(--spacing-medium); color: var(--text-secondary); }
.footer a { color: var(--text-link); font-weight: normal; }
.footer a:hover { color: var(--text-link-hover); text-decoration: underline; }
.footer ul { list-style: none; padding-left: 0; }
.footer ul li { margin-bottom: var(--spacing-small); }
/* Social links in footer are text-based, styled by general footer 'a' */

/* Special Page Styles */
/* success.html container */
.success-page-container {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: calc(100vh - 52px); /* Full viewport height minus navbar */
    text-align: center; padding: var(--spacing-large);
}
.success-page-container .icon svg {
    width: 80px; height: 80px; fill: var(--bg-button-primary);
    margin-bottom: var(--spacing-large);
}
.success-page-container .title { margin-bottom: var(--spacing-medium); }
.success-page-container .subtitle { margin-bottom: var(--spacing-large); color: var(--text-secondary); }

/* privacy.html & terms.html */
/* Add a class like 'static-page-content' to the main content <section> on these pages */
.static-page-content.section {
    padding-top: 4rem; /* (Navbar height is 52px or 3.25rem) + some extra */
    padding-bottom: var(--spacing-xlarge);
}
.static-page-content .container { max-width: 800px; /* Narrower for readability */ }
.static-page-content h1, .static-page-content h2, .static-page-content h3 {
    margin-top: var(--spacing-large); margin-bottom: var(--spacing-medium);
}

/* Particle Animation & Glassmorphism - Placeholders/Examples if used */
/* (Actual particle animations often require JS) */
.glassmorphic-element { /* Example */
    background: rgba(44, 44, 44, 0.6); /* var(--bg-card) with alpha */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--border-radius-large);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Cookie Consent Popup: Styles are inline in HTML per prompt. */