/* style.css */

/* 1. Root Variables
-------------------------------------------------- */
:root {
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Work Sans', sans-serif;

    /* Pastel Neumorphic Theme */
    --color-bg-main: #e6e7ee;
    --color-bg-alt: #dde0e9;
    --color-primary: #7aa0ff; /* Soft Pastel Blue */
    --color-primary-darker: #5c85e0;
    --color-secondary: #ffb380; /* Soft Pastel Peach */
    --color-accent: #82E0AA; /* Soft Pastel Green */
    --color-text-dark: #3a3b3c;
    --color-text-light: #ffffff;
    --color-text-muted: #6c757d;
    --color-text-heading: #2c3035;
    --color-section-title: #222222; /* Specific for section titles as per prompt */
    --color-border-subtle: #d1d9e6;
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-darker);

    /* Neumorphism Shadows */
    --neumorphic-bg: var(--color-bg-main);
    --neumorphic-shadow-color-light: rgba(255, 255, 255, 0.85);
    --neumorphic-shadow-color-dark: rgba(174, 174, 192, 0.5);

    --neumorphic-offset-strong: 7px;
    --neumorphic-blur-strong: 15px;
    --neumorphic-offset-soft: 4px;
    --neumorphic-blur-soft: 8px;

    --neumorphic-shadow-raised:
        var(--neumorphic-offset-strong) var(--neumorphic-offset-strong) var(--neumorphic-blur-strong) var(--neumorphic-shadow-color-dark),
        calc(-1 * var(--neumorphic-offset-strong)) calc(-1 * var(--neumorphic-offset-strong)) var(--neumorphic-blur-strong) var(--neumorphic-shadow-color-light);

    --neumorphic-shadow-pressed:
        inset var(--neumorphic-offset-soft) var(--neumorphic-offset-soft) var(--neumorphic-blur-soft) var(--neumorphic-shadow-color-dark),
        inset calc(-1 * var(--neumorphic-offset-soft)) calc(-1 * var(--neumorphic-offset-soft)) var(--neumorphic-blur-soft) var(--neumorphic-shadow-color-light);

    --neumorphic-shadow-flat: /* For subtle definition */
        3px 3px 6px var(--neumorphic-shadow-color-dark),
        -3px -3px 6px var(--neumorphic-shadow-color-light);

    --border-radius-small: 10px;
    --border-radius-medium: 18px;
    --border-radius-large: 25px;

    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease-out;

    --header-height: 3.25rem; /* Bulma default, adjust if needed */
}

/* 2. Body, HTML base
-------------------------------------------------- */
html {
    scroll-behavior: smooth;
    background-color: var(--color-bg-main); /* Fallback */
    font-size: 100%; /* Corresponds to 16px by default */
}

body {
    font-family: var(--font-secondary);
    color: var(--color-text-dark);
    background-color: var(--color-bg-main);
    line-height: 1.65;
    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-primary);
    color: var(--color-text-heading);
    font-weight: 600;
}

.title.is-1, .title.is-2, .title.is-3 {
    margin-bottom: 1rem; /* More spacing below larger titles */
}

.subtitle {
    color: var(--color-text-muted);
    font-weight: 400;
}

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

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

.section-title {
    color: var(--color-section-title) !important; /* Override Bulma if needed */
    margin-bottom: 1.5rem; /* Default for section titles */
}
.section-title.is-2 { /* Main section titles */
    margin-bottom: 2rem;
}
.subtitle.is-5 { /* Subtitle for sections */
    margin-bottom: 3rem !important; /* Increased spacing */
}


/* 4. Layout helpers
-------------------------------------------------- */
.main-container {
    /* General container for page content if Bulma's .container needs wrapper */
    width: 100%;
}

/* Section Base Styling */
.section {
    padding: 3rem 1.5rem; /* Default Bulma padding, can adjust */
}

.neumorphic-section {
    background-color: var(--neumorphic-bg);
    /* Sections themselves don't typically have strong neumorphic shadows, but cards/elements within them do */
    padding: 4rem 1.5rem;
}
.neumorphic-section-alt {
    background-color: var(--color-bg-alt);
    padding: 4rem 1.5rem;
}

/* For privacy and terms pages to avoid header overlap */
.page-legal-content .content,
body.privacy-page .main-container > .section,
body.terms-page .main-container > .section {
    padding-top: calc(var(--header-height) + 2rem); /* Header height + some margin */
}
@media screen and (min-width: 1024px) {
    .page-legal-content .content,
    body.privacy-page .main-container > .section,
    body.terms-page .main-container > .section {
        padding-top: calc(var(--header-height) + 3rem);
    }
}


/* 5. Neumorphic Base Styles (applied to specific components later)
-------------------------------------------------- */
.neumorphic-header,
.neumorphic-footer {
    background-color: var(--neumorphic-bg);
    box-shadow: var(--neumorphic-shadow-flat); /* Subtle shadow for header/footer */
    z-index: 30; /* Bulma's navbar is-fixed-top is 30 */
}

/* 6. Global Button Styles
-------------------------------------------------- */
.button, button, input[type="submit"], input[type="button"], .modal-close-button {
    font-family: var(--font-secondary);
    font-weight: 600;
    border-radius: var(--border-radius-medium);
    transition: var(--transition-smooth);
    border: none; /* Remove default border for neumorphic */
    cursor: pointer;
    padding: 0.8em 1.8em;
    text-decoration: none;
    display: inline-block;
    line-height: 1.5;
    text-align: center;
    outline: none;
}

.neumorphic-button {
    background-color: var(--neumorphic-bg);
    color: var(--color-primary);
    box-shadow: var(--neumorphic-shadow-raised);
    border: 1px solid var(--color-border-subtle);
}
.neumorphic-button:hover,
.neumorphic-button:focus {
    background-color: var(--color-bg-main); /* Keep bg, change shadow */
    color: var(--color-primary-darker);
    box-shadow: var(--neumorphic-shadow-pressed);
    transform: translateY(1px) translateX(1px);
}
.neumorphic-button:active {
    box-shadow: var(--neumorphic-shadow-pressed);
    transform: translateY(2px) translateX(2px);
}

/* Bulma primary button with neumorphic style */
.button.is-primary.neumorphic-button,
.button.is-primary { /* Apply to Bulma's primary as well if used standalone */
    background-color: var(--color-primary);
    color: var(--color-text-light);
    box-shadow: 5px 5px 10px color-mix(in srgb, var(--color-primary) 70%, black),
                -5px -5px 10px color-mix(in srgb, var(--color-primary) 130%, white);
    border: none;
}
.button.is-primary.neumorphic-button:hover,
.button.is-primary.neumorphic-button:focus,
.button.is-primary:hover,
.button.is-primary:focus {
    background-color: var(--color-primary-darker);
    color: var(--color-text-light);
    box-shadow: inset 3px 3px 6px color-mix(in srgb, var(--color-primary-darker) 70%, black),
                inset -3px -3px 6px color-mix(in srgb, var(--color-primary-darker) 130%, white);
    transform: translateY(1px) translateX(1px);
}

/* For links that should look like buttons but are static */
.neumorphic-button-static {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    box-shadow: none;
    border-radius: var(--border-radius-small);
    padding: 0.6em 1.2em;
}
.neumorphic-button-static:hover,
.neumorphic-button-static:focus {
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary-darker);
    border-color: var(--color-primary-darker);
    text-decoration: none;
}

/* "Read More" link style */
a.read-more-link {
    font-weight: 600;
    color: var(--color-secondary);
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
}
a.read-more-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-secondary);
    transition: width 0.3s ease;
}
a.read-more-link:hover::after {
    width: 100%;
}
a.read-more-link:hover {
    color: color-mix(in srgb, var(--color-secondary) 80%, black);
    text-decoration: none;
}


/* 7. Global Form Input Styles
-------------------------------------------------- */
.input.neumorphic-input,
.textarea.neumorphic-textarea,
select.neumorphic-input {
    background-color: var(--neumorphic-bg);
    border-radius: var(--border-radius-small);
    box-shadow: var(--neumorphic-shadow-pressed);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-dark);
    padding: 0.8em 1em;
    transition: var(--transition-smooth);
}
.input.neumorphic-input::placeholder,
.textarea.neumorphic-textarea::placeholder {
    color: var(--color-text-muted);
}
.input.neumorphic-input:focus,
.textarea.neumorphic-textarea:focus,
select.neumorphic-input:focus {
    outline: none;
    box-shadow: var(--neumorphic-shadow-raised), 0 0 0 2px color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-color: var(--color-primary);
}
/* Select arrow for Bulma */
.select.neumorphic-select::after {
    border-color: var(--color-primary);
}

/* Neumorphic Switch (Checkbox) */
.neumorphic-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
.neumorphic-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.neumorphic-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg-alt);
    transition: var(--transition-fast);
    border-radius: 34px;
    box-shadow: var(--neumorphic-shadow-pressed);
}
.neumorphic-switch .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: var(--transition-fast);
    border-radius: 50%;
    box-shadow: var(--neumorphic-shadow-flat);
}
.neumorphic-switch input:checked + .slider {
    background-color: var(--color-primary);
    box-shadow: var(--neumorphic-shadow-pressed); /* Keep consistent shadow base */
}
.neumorphic-switch input:checked + .slider:before {
    transform: translateX(26px);
    box-shadow: var(--neumorphic-shadow-raised); /* Ball appears raised */
}
.checkbox.neumorphic-switch + a { /* Styling for terms/privacy links next to switch */
    margin-left: 0.5em;
    vertical-align: middle;
}

/* 8. Header & Navigation
-------------------------------------------------- */
.header.neumorphic-header {
    position: fixed; /* Fixed navigation */
    width: 100%;
    top: 0;
    left: 0;
}
.navbar {
    background-color: transparent; /* Header has the neumorphic bg */
}
.navbar-item, .navbar-link {
    font-family: var(--font-secondary);
    font-weight: 500;
    color: var(--color-text-dark);
    transition: var(--transition-fast);
}
.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active {
    background-color: var(--color-bg-alt);
    color: var(--color-primary);
}
.navbar-burger {
    color: var(--color-text-dark);
}
@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: var(--neumorphic-bg);
        box-shadow: var(--neumorphic-shadow-raised);
        border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
        padding: 0.5rem 0;
    }
    .navbar-item {
        padding: 0.75rem 1rem;
    }
}


/* 9. Hero Section
-------------------------------------------------- */
.hero#hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative; /* For overlay */
}
.hero.has-parallax-background {
    background-attachment: fixed;
}
.hero-background-overlay { /* Already in HTML inline, just ensure it's there */
    /* background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)); */
    /* position: absolute; top: 0; left: 0; width: 100%; height: 100%; */
}
.hero .hero-title {
    color: var(--color-text-light) !important; /* As per prompt */
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.6);
}
.hero .hero-subtitle {
    color: var(--color-text-light) !important; /* As per prompt */
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.hero .hero-body .button {
    margin-top: 1rem;
}
.hero p.has-text-white { /* For additional text in hero */
    color: var(--color-text-light) !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width: 769px) {
    .hero .hero-title {
        font-size: 4rem;
    }
    .hero .hero-subtitle {
        font-size: 1.75rem;
    }
}


/* 10. Card Component (General)
-------------------------------------------------- */
.card.neumorphic-card {
    background-color: var(--neumorphic-bg);
    border-radius: var(--border-radius-large);
    box-shadow: var(--neumorphic-shadow-raised);
    transition: var(--transition-smooth);
    overflow: hidden; /* Ensure content respects border radius */
    display: flex;
    flex-direction: column;
    height: 100%; /* For equal height cards in columns */
}
.card.neumorphic-card:hover {
    transform: translateY(-5px);
    box-shadow: 10px 10px 20px var(--neumorphic-shadow-color-dark),
                -10px -10px 20px var(--neumorphic-shadow-color-light);
}

/* Card Image Styling */
.card.neumorphic-card .card-image { /* Bulma's .card-image */
    position: relative;
    display: block; /* Make it a block for width 100% */
}
.card.neumorphic-card .card-image .image-container { /* Custom wrapper from HTML */
    display: block; /* or flex */
    /* For aspect ratio, Bulma's .image.is-16by9 etc. is good inside this */
    /* If fixed height is desired for image-container itself: */
    /* height: 200px; overflow: hidden; border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; */
}
.card.neumorphic-card .card-image .image-container figure.image {
    margin: 0; /* Reset Bulma's figure margin if any */
    height: 100%; /* If image-container has fixed height */
}
.card.neumorphic-card .card-image img {
    object-fit: cover;
    width: 100%;
    height: 100%; /* Fill the figure/image-container */
    display: block;
    /* Top radius if image is at the very top of the card */
     border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
}

/* Card Content Styling */
.card.neumorphic-card .card-content {
    padding: 1.5rem;
    text-align: center; /* Center text within content */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows content to fill space */
    justify-content: space-between; /* Pushes button to bottom if present */
}
.card.neumorphic-card .card-content .title,
.card.neumorphic-card .card-content .subtitle {
    color: var(--color-text-heading);
    margin-bottom: 0.75rem;
}
.card.neumorphic-card .card-content .subtitle {
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}
.card.neumorphic-card .card-content .content { /* Bulma's .content wrapper */
    margin-bottom: 1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-dark);
}
.card.neumorphic-card .card-content .button {
    margin-top: auto; /* Push button to bottom if card-content is flex column */
    align-self: center; /* Center button */
}


/* Specific card types if needed adjustments */
/* Team Card */
#equipo .card-content .media-content .title {
    margin-bottom: 0.25rem;
}
.media-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#equipo .card-content .media-content .subtitle {
    margin-bottom: 0.75rem;
}

/* News/Workshop Card Image - ensure top radius */
#noticias .card-image img,
#talleres .card-image img {
    border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
}

/* 11. Specific Section Styles
-------------------------------------------------- */
/* Behind the Scenes (Proceso) */
#proceso .neumorphic-card-raised { /* For the 3 process steps */
    background-color: var(--neumorphic-bg);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--neumorphic-shadow-raised);
    padding: 1.5rem;
    text-align: center;
    height: 100%;
}
#proceso .neumorphic-card-raised img {
    margin-bottom: 1rem;
    border-radius: 50%; /* Circular icons */
    box-shadow: var(--neumorphic-shadow-flat);
}

/* Clientele */
#clientele .neumorphic-logo-bg {
    background-color: var(--color-bg-alt);
    padding: 1rem;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--neumorphic-shadow-pressed);
    display: flex;
    align-items: center;
    justify-content: center;
}
#clientele .neumorphic-logo-bg img {
    max-height: 60px; /* Adjust as needed */
    width: auto;
}
#clientele .card.neumorphic-card { /* Testimonial card */
    margin-top: 2rem;
}
#clientele .card.neumorphic-card .content p {
    font-style: italic;
    font-size: 1.05rem;
}
#clientele .card.neumorphic-card .content strong {
    display: block;
    margin-top: 1rem;
    font-style: normal;
}


/* External Resources List */
#external-resources .external-links-list {
    list-style: none;
    padding-left: 0;
}
#external-resources .neumorphic-list-item {
    background-color: var(--neumorphic-bg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--neumorphic-shadow-raised);
    transition: var(--transition-smooth);
}
#external-resources .neumorphic-list-item:hover {
    transform: scale(1.02);
    box-shadow: 8px 8px 16px var(--neumorphic-shadow-color-dark),
                -8px -8px 16px var(--neumorphic-shadow-color-light);
}
#external-resources .neumorphic-list-item h4 a {
    color: var(--color-primary);
    text-decoration: none;
}
#external-resources .neumorphic-list-item h4 a:hover {
    color: var(--color-primary-darker);
    text-decoration: underline;
}
#external-resources .neumorphic-list-item p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-bottom: 0;
}


/* Contact Section Map placeholder */
.neumorphic-map-container {
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: var(--neumorphic-shadow-raised);
}
.neumorphic-map-container img {
    display: block;
    width: 100%;
}


/* 12. Modal Styles
-------------------------------------------------- */
.modal-card.neumorphic-modal {
    background-color: var(--neumorphic-bg);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--neumorphic-shadow-raised); /* Stronger shadow for modals */
    max-width: 700px; /* Limit modal width */
}
.modal-card-head.neumorphic-modal .modal-card-title,
.modal-card-foot.neumorphic-modal .button {
    font-family: var(--font-primary);
}
.modal-card-head {
    background-color: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
}
.modal-card-body {
    color: var(--color-text-dark);
    padding: 2rem;
    line-height: 1.7;
}
.modal-card-foot {
    background-color: var(--color-bg-alt);
    border-top: 1px solid var(--color-border-subtle);
    border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
}
.modal-close-button { /* Ensure it's styled as a neumorphic button */
    /* inherits global .button styling, can add specific if needed */
}


/* 13. Footer Styles
-------------------------------------------------- */
.footer.neumorphic-footer {
    background-color: var(--color-bg-alt); /* Slightly different from main bg for separation */
    padding: 3rem 1.5rem 2rem; /* More padding at top */
    box-shadow: inset 0 5px 10px var(--neumorphic-shadow-color-dark); /* Inner shadow from top */
}
.footer .title.is-5 {
    color: var(--color-text-heading);
    margin-bottom: 1rem;
}
.footer a {
    color: var(--color-text-muted);
    font-weight: 500;
}
.footer a:hover {
    color: var(--color-primary);
    text-decoration: none;
}
.footer hr {
    background-color: var(--color-border-subtle);
    height: 1px;
    margin: 1.5rem 0;
}
.footer .content p {
    color: var(--color-text-muted); /* Muted text for copyright etc. */
    font-size: 0.9rem;
}
/* Social links in footer - plain text links */
#footer-social-links p a { /* If social links are wrapped in p */
    margin: 0 0.5em;
    display: inline-block;
}


/* 14. Page-specific adjustments
-------------------------------------------------- */
/* Success page centering */
body.success-page .main-container > .section {
    min-height: calc(100vh - var(--header-height) - 6.5rem); /* Approximate footer height */
    display: flex;
    align-items: center;
    justify-content: center;
}
body.success-page .neumorphic-card-raised { /* Card on success page */
    padding: 2rem;
}
@media screen and (min-width: 769px) {
    body.success-page .neumorphic-card-raised {
        padding: 3rem;
    }
}

/* 15. Animations
-------------------------------------------------- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(25px) scale(0.98);
    transition: opacity 0.6s var(--transition-smooth), transform 0.6s var(--transition-smooth);
    will-change: opacity, transform;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Hand-drawn animation (subtle wiggle on hover for some elements, e.g., icons) */
@keyframes subtle-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-1deg); }
  75% { transform: rotate(1deg); }
}
.icon-wiggle-hover:hover {
    animation: subtle-wiggle 0.3s ease-in-out;
}

/* Parallax for background images */
.has-parallax-background {
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/* 17. Responsive adjustments
-------------------------------------------------- */
@media screen and (max-width: 768px) {
    .section {
        padding: 2.5rem 1rem;
    }
    .neumorphic-section, .neumorphic-section-alt {
        padding: 3rem 1rem;
    }
    .title.is-1.hero-title {
        font-size: 2.5rem;
    }
    .subtitle.is-3.hero-subtitle {
        font-size: 1.25rem;
    }
    .section-title.is-2 {
        font-size: 1.75rem;
    }
    .card.neumorphic-card {
        margin-bottom: 1.5rem; /* Space between cards on mobile */
    }
    .footer .columns .column {
        margin-bottom: 1.5rem; /* Spacing for footer columns on mobile */
    }
    .footer .columns .column:last-child {
        margin-bottom: 0;
    }
}

/* Ensure high contrast for text */
body, p, .content, .label, .input, .textarea, .select {
    color: var(--color-text-dark);
}
.section-title, .title, .subtitle {
    color: var(--color-text-heading); /* Ensure headings are dark enough */
}
.hero .title, .hero .subtitle, .hero p {
    color: var(--color-text-light) !important; /* Ensure hero text is white */
}

/* Dark overlay for background images with text should be handled in HTML via overlay div */
/* Background image general rule */
[style*="background-image"] {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}