/* style.css */

/* -------------------------------------------------------------------------- */
/*                                 CSS Variables                              */
/* -------------------------------------------------------------------------- */
:root {
    /* YPF Brand Colors */
    --ypf-brand-blue: #005C9A; /* Main YPF Blue - darker, good for primary */
    --ypf-brand-blue-lighter: #0077C8; /* Lighter YPF Blue */
    --ypf-brand-yellow: #FFD100; /* YPF Yellow */
    --rgb-ypf-yellow: 255, 209, 0; /* For use in rgba() */

    /* Analogous & Accent Colors */
    --analogous-blue-1: #00AEEF; /* Sky Blue - analogous to YPF Blue */
    --accent-orange: #F58220; /* Energetic accent, analogous to yellow */
    --accent-neutral-dark: #222222; /* For brutalist outlines and dark text */
    --accent-neutral-light: #F0F0F0; /* Lighter gray for subtle backgrounds */

    /* UI Element Colors */
    --primary-color: var(--ypf-brand-blue);
    --secondary-color: var(--ypf-brand-blue-lighter);
    --accent-color: var(--ypf-brand-yellow);
    --text-color-dark: #333333;
    --text-color-light: #FFFFFF;
    --text-color-muted: #777777;
    --background-color-page: #FFFFFF;
    --background-color-section-alt: var(--accent-neutral-light);
    --background-color-dark-section: var(--accent-neutral-dark);
    --success-color: #28a745;
    --error-color: #dc3545;


    /* Brutalism Specifics */
    --brutalist-border-color: var(--accent-neutral-dark);
    --brutalist-shadow-color: var(--accent-neutral-dark);

    /* Typography */
    --font-family-headings: 'Poppins', sans-serif;
    --font-family-base: 'Work Sans', sans-serif;
    --font-weight-bold: 700;
    --font-weight-semibold: 600;
    --font-weight-normal: 400;
    --base-font-size: 16px;
    --line-height-base: 1.6;
    --line-height-headings: 1.3;

    /* Spacing & Sizing */
    --spacing-unit: 8px;
    --container-padding-x: 15px; /* Bootstrap default */
    --section-padding-y: calc(var(--spacing-unit) * 8); /* 64px */
    --navbar-height: 70px; /* Needs to match actual rendered height of navbar */

    /* Borders & Shadows */
    --border-radius-sharp: 0px;
    --border-strong: 2px solid var(--brutalist-border-color);
    --box-shadow-brutalist: 3px 3px 0 var(--brutalist-shadow-color);
    --box-shadow-brutalist-hover: 5px 5px 0 var(--brutalist-shadow-color);
    --box-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --transition-default: 0.25s ease-in-out;
}

/* -------------------------------------------------------------------------- */
/*                                Global Styles                               */
/* -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    font-size: var(--base-font-size);
}

body {
    font-family: var(--font-family-base);
    color: var(--text-color-dark);
    background-color: var(--background-color-page);
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    padding-top: var(--navbar-height); /* Account for fixed navbar */
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-bold);
    color: var(--accent-neutral-dark);
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit) * 2);
    line-height: var(--line-height-headings);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle shadow for definition */
}
h1, .h1 { font-size: clamp(2.2rem, 5vw, 3rem); }
h2, .h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); } /* Section titles */
h3, .h3 { font-size: clamp(1.5rem, 3.5vw, 2rem); }

p {
    margin-bottom: calc(var(--spacing-unit) * 2);
    font-size: 1rem;
    font-weight: var(--font-weight-normal);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-default);
}
a:hover {
    color: var(--ypf-brand-blue-lighter);
    text-decoration: underline;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Section Base Styles */
section {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
    position: relative;
}

.section-title {
    margin-bottom: calc(var(--spacing-unit) * 6); /* Increased margin */
    text-align: center;
    color: var(--accent-neutral-dark);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 1.5px; /* More pronounced spacing */
}

.subtitle-text {
    color: var(--text-color-muted); /* Was primary-color, changed to muted for better hierarchy */
    font-weight: var(--font-weight-semibold);
}

/* Backgrounds */
.bg-light-gray {
    background-color: var(--background-color-section-alt);
}
.bg-dark-ypf { /* Used for header and footer */
    background-color: var(--accent-neutral-dark); /* Changed from primary-color */
    color: var(--text-color-light);
}
.bg-dark-ypf h1, .bg-dark-ypf h2, .bg-dark-ypf h3, .bg-dark-ypf h4, .bg-dark-ypf h5, .bg-dark-ypf h6,
.bg-dark-ypf .footer-title {
    color: var(--ypf-brand-yellow); /* Titles in dark sections are yellow */
}
.bg-dark-ypf p, .bg-dark-ypf li, .bg-dark-ypf small {
    color: var(--accent-neutral-light); /* Lighter text for readability */
}
.bg-dark-ypf a {
    color: var(--accent-neutral-light);
}
.bg-dark-ypf a:hover {
    color: var(--ypf-brand-yellow);
}


/* Brutalist Divider between sections */
.section-brutalist-divider {
    border-bottom: var(--border-strong);
    border-color: var(--brutalist-border-color);
}
.section-brutalist-divider:last-of-type,
main > section:last-child { /* Ensure last section in main doesn't have bottom border */
    border-bottom: none;
}


/* -------------------------------------------------------------------------- */
/*                             Utility Classes                                */
/* -------------------------------------------------------------------------- */
.animate-on-scroll {
    /*opacity: 0;*/
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.is-visible {
    opacity: 1;
}
/* Specific animations if needed beyond basic fade */
.is-visible[data-animation="fadeInUp"] { transform: translateY(0); }
.is-visible[data-animation="fadeInDown"] { transform: translateY(0); }
.is-visible[data-animation="fadeInLeft"] { transform: translateX(0); }
.is-visible[data-animation="fadeInRight"] { transform: translateX(0); }
.is-visible[data-animation="zoomIn"] { transform: scale(1); }
.is-visible[data-animation="pulse"] { animation: pulseAnimation 1.5s infinite; }

@keyframes pulseAnimation {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.text-primary-hover:hover {
    color: var(--primary-color) !important;
}

/* -------------------------------------------------------------------------- */
/*                               Button Styles (Global)                       */
/* -------------------------------------------------------------------------- */
.btn, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.8px; /* Increased spacing */
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3.5); /* 12px 28px - slightly larger */
    border-radius: var(--border-radius-sharp);
    transition: all var(--transition-default);
    border: var(--border-strong);
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none !important; /* Ensure no underline */
    position: relative;
    overflow: hidden;
}

.btn-primary.btn-brutalist, .btn.btn-primary {
    background-color: var(--ypf-brand-yellow);
    color: var(--accent-neutral-dark);
    border-color: var(--brutalist-border-color);
    box-shadow: var(--box-shadow-brutalist);
}
.btn-primary.btn-brutalist:hover, .btn.btn-primary:hover {
    background-color: var(--ypf-brand-yellow);
    color: var(--brutalist-border-color);
    box-shadow: var(--box-shadow-brutalist-hover);
    transform: translate(-2px, -2px);
}
.btn-primary.btn-brutalist:active, .btn.btn-primary:active {
    box-shadow: 1px 1px 0 var(--brutalist-shadow-color);
    transform: translate(1px, 1px);
}

.btn-outline-primary.btn-brutalist, .btn.btn-outline-primary {
    background-color: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: var(--box-shadow-brutalist);
}
.btn-outline-primary.btn-brutalist:hover, .btn.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: var(--text-color-light);
    border-color: var(--primary-color);
    box-shadow: var(--box-shadow-brutalist-hover);
    transform: translate(-2px, -2px);
}

.btn-brutalist-small {
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 2); /* 6px 16px */
    font-size: 0.85rem;
}
.btn-outline-secondary.btn-brutalist-small {
    color: var(--text-color-muted);
    border-color: var(--text-color-muted);
    box-shadow: 2px 2px 0px var(--text-color-muted);
}
.btn-outline-secondary.btn-brutalist-small:hover {
    background-color: var(--text-color-muted);
    color: var(--text-color-light);
    box-shadow: 3px 3px 0px var(--text-color-muted);
    transform: translate(-1px, -1px);
}
/* Standard Bootstrap buttons if not using .btn-brutalist */
.btn-secondary {
    background-color: var(--text-color-muted);
    color: var(--text-color-light);
    border-color: var(--text-color-muted);
    box-shadow: var(--box-shadow-brutalist);
}
.btn-secondary:hover {
    background-color: #5a6268; /* Darken muted */
    border-color: #545b62;
    box-shadow: var(--box-shadow-brutalist-hover);
    transform: translate(-2px, -2px);
}


/* -------------------------------------------------------------------------- */
/*                               Header / Navbar                              */
/* -------------------------------------------------------------------------- */
#main-navbar {
    /* background-color set by .bg-dark-ypf in HTML */
    /* backdrop-filter: blur(5px); /* Optional glassmorphism element */
    border-bottom: 3px solid var(--ypf-brand-yellow); /* Thicker border */
    padding-top: calc(var(--spacing-unit) * 0.5);
    padding-bottom: calc(var(--spacing-unit) * 0.5);
    height: var(--navbar-height);
    transition: background-color var(--transition-default);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow for depth */
}
#main-navbar .navbar-brand img {
    height: 40px;
    width: auto;
}
#main-navbar .nav-link {
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    padding: calc(var(--spacing-unit)*1) calc(var(--spacing-unit)*1.5);
    margin: 0 calc(var(--spacing-unit)*0.5);
    border-bottom: 3px solid transparent; /* Match border thickness */
    transition: color var(--transition-default), border-color var(--transition-default);
    color: var(--accent-neutral-light); /* Ensure light color from bg-dark-ypf */
}
#main-navbar .nav-link:hover,
#main-navbar .nav-link.active { /* .active is added by Bootstrap's scrollspy or JS */
    color: var(--ypf-brand-yellow);
    border-bottom-color: var(--ypf-brand-yellow);
}
.navbar-toggler {
    border: 2px solid var(--ypf-brand-yellow) !important; /* Important to override Bootstrap */
    padding: .2rem .5rem; /* Adjust padding */
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 209, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; /* Thicker lines */
}
#main-navbar .navbar-collapse {
    background-color: var(--accent-neutral-dark); /* Ensure dropdown has bg on mobile */
}
@media (max-width: 991.98px) { /* lg breakpoint */
    #main-navbar .navbar-collapse {
        padding: var(--spacing-unit);
        border-top: 2px solid var(--ypf-brand-yellow);
        margin-top: calc(var(--spacing-unit)*0.5);
    }
    #main-navbar .nav-item {
        margin-bottom: calc(var(--spacing-unit)*0.5);
    }
}


/* -------------------------------------------------------------------------- */
/*                                Hero Section                                */
/* -------------------------------------------------------------------------- */
.hero-section {
    min-height: calc(100vh - var(--navbar-height));
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color-light); /* Main text color for hero */
    padding: var(--section-padding-y) var(--container-padding-x);
    /* Removed border, relying on section-brutalist-divider if next section has it */
}
.hero-section h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: var(--text-color-light); /* Explicitly white */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
}
.hero-section .lead {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    color: var(--text-color-light); /* Explicitly white */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}
.hero-section .btn-primary {
    font-size: 1.1rem;
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 4.5); /* Larger hero button */
}

/* -------------------------------------------------------------------------- */
/*                                General Card Styles                         */
/* -------------------------------------------------------------------------- */
.card {
    border: var(--border-strong);
    border-radius: var(--border-radius-sharp);
    background-color: var(--background-color-page);
    box-shadow: var(--box-shadow-brutalist);
    transition: box-shadow var(--transition-default), transform var(--transition-default);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card:hover {
    box-shadow: var(--box-shadow-brutalist-hover);
    transform: translateY(-4px) translateX(-4px); /* Slightly more movement */
}

.card .card-image { /* Container for image */
    width: 100%;
    overflow: hidden;
    display: flex; /* STROGO: Added for centering */
    flex-direction: column; /* STROGO: Added for centering */
    align-items: center; /* STROGO: Added for centering */
    justify-content: center;
    background-color: var(--accent-neutral-light);
    aspect-ratio: 16 / 10; /* Default aspect ratio for card images */
}
.card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    margin: 0 auto; /* STROGO: Ensure image is centered if it's smaller than container (though object-fit:cover should handle it) */
}
.card:hover .card-image img {
    transform: scale(1.05);
}

.card-content { /* Bootstrap uses card-body, this is a custom class from HTML */
    padding: calc(var(--spacing-unit) * 2.5); /* 20px */
    text-align: left; /* Default, override with .text-center on card if needed */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.card-content .card-title {
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    color: var(--primary-color);
    font-size: 1.3rem;
}
.card-content p.card-text {
    font-size: 0.95rem;
    color: var(--text-color-dark);
    flex-grow: 1;
}
.card-content .btn, .card-content a.btn {
    margin-top: auto; /* Push button to bottom */
    align-self: flex-start;
}

/* Card Content Centering - STROGO */
.card.text-center .card-content,
.item.text-center .item-content, /* Assuming .item is similar to .card */
.testimonial.text-center .testimonial-content, /* Assuming .testimonial is similar */
.team-member.text-center .team-member-content, /* Assuming .team-member is similar */
.product-card.text-center .product-card-content { /* Assuming .product-card is similar */
    text-align: center;
}
.card.text-center .card-content .btn {
    align-self: center;
}


.brutalist-card-alt {
    padding: calc(var(--spacing-unit) * 2.5); /* Increased padding */
    background-color: var(--background-color-section-alt);
}
.brutalist-card-alt .card-title {
    color: var(--ypf-brand-blue);
}

.brutalist-image-border {
    border: var(--border-strong);
    padding: var(--spacing-unit);
    background-color: var(--ypf-brand-yellow);
    box-shadow: var(--box-shadow-brutalist);
}
.brutalist-image-border img {
    border: 1px solid var(--brutalist-border-color); /* Inner border for image */
}

/* -------------------------------------------------------------------------- */
/*                                About Section                               */
/* -------------------------------------------------------------------------- */
#about-ypf .lead {
    font-size: 1.2rem;
    color: var(--text-color-dark);
    margin-bottom: calc(var(--spacing-unit) * 2.5);
}

.progress {
    height: 30px !important;
    border-radius: var(--border-radius-sharp);
    background-color: var(--accent-neutral-light);
    border: var(--border-strong);
    box-shadow: var(--box-shadow-brutalist);
    margin-bottom: calc(var(--spacing-unit) * 2) !important;
    overflow: visible; /* Allow text to be outside if needed */
}
.progress-bar {
    font-weight: var(--font-weight-semibold);
    text-align: center; /* Text inside bar */
    line-height: 30px; /* Center text vertically */
    border-radius: 0;
    transition: width 2s ease-out .5s; /* Added delay for effect */
    position: relative;
    overflow: hidden;
}
.bg-ypf-blue { background-color: var(--ypf-brand-blue) !important; color: var(--text-color-light) !important; }
.bg-ypf-yellow { background-color: var(--ypf-brand-yellow) !important; color: var(--accent-neutral-dark) !important;}

/* -------------------------------------------------------------------------- */
/*                                Press Section / Modals                     */
/* -------------------------------------------------------------------------- */
#press .card-title {
    font-size: 1.1rem;
    color: var(--primary-color); /* Consistent title color */
}
#press .text-muted {
    color: var(--text-color-muted) !important;
    font-size: 0.85rem;
}
#press .btn-brutalist-small.mt-2 { /* More specific selector for "Read More" */
    display: inline-block; /* Ensure it behaves like a block for margin */
    margin-top: var(--spacing-unit) !important;
    padding: calc(var(--spacing-unit)*0.5) var(--spacing-unit); /* Smaller padding */
    font-size: 0.8rem;
}


.brutalist-modal .modal-content {
    border-radius: var(--border-radius-sharp);
    border: 3px solid var(--brutalist-border-color); /* Thicker border for modal */
    box-shadow: var(--box-shadow-brutalist-hover); /* Stronger shadow */
    background-color: var(--background-color-page);
}
.brutalist-modal .modal-header {
    background-color: var(--ypf-brand-yellow);
    color: var(--accent-neutral-dark);
    border-bottom: 3px solid var(--brutalist-border-color);
    border-radius: 0;
    padding: calc(var(--spacing-unit)*1.5) calc(var(--spacing-unit)*2);
}
.brutalist-modal .modal-header .modal-title {
    font-weight: var(--font-weight-bold);
    font-size: 1.4rem;
}
.brutalist-modal .modal-body {
    padding: calc(var(--spacing-unit)*2.5);
    font-size: 1rem;
    line-height: 1.7;
}
.brutalist-modal .modal-footer {
    border-top: 3px solid var(--brutalist-border-color);
    border-radius: 0;
    padding: calc(var(--spacing-unit)*1.5) calc(var(--spacing-unit)*2);
}
.brutalist-modal .btn-close {
    background-color: var(--accent-neutral-dark);
    border-radius: 0;
    opacity: 1;
    padding: var(--spacing-unit);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffd100'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
}
.brutalist-modal .btn-secondary { /* Button inside modal footer */
    background-color: var(--text-color-muted);
    color: var(--text-color-light);
    border-color: var(--brutalist-border-color);
}
.brutalist-modal .btn-secondary:hover {
    background-color: var(--accent-neutral-dark);
}


/* -------------------------------------------------------------------------- */
/*                           External Resources Section                       */
/* -------------------------------------------------------------------------- */
#external-resources .resource-card {
    background-color: var(--background-color-page);
    border: var(--border-strong);
    box-shadow: var(--box-shadow-brutalist);
}
#external-resources .resource-card .card-title a {
    color: var(--primary-color);
    font-weight: var(--font-weight-semibold);
}
#external-resources .resource-card .card-title a:hover {
    color: var(--accent-orange);
}
#external-resources .resource-card .card-text {
    font-size: 0.9rem;
    color: var(--text-color-muted);
}

/* -------------------------------------------------------------------------- */
/*                                Gallery Section                             */
/* -------------------------------------------------------------------------- */
#gallery .carousel-inner {
    border: var(--border-strong);
    box-shadow: var(--box-shadow-brutalist);
    border-radius: var(--border-radius-sharp);
}
#gallery .carousel-item .card-image img { /* card-image class from HTML */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    border-radius: 0; /* No radius for image inside carousel */
}
#gallery .carousel-caption {
    background-color: rgba(0, 0, 0, 0.65) !important;
    border-radius: var(--border-radius-sharp) !important;
    padding: calc(var(--spacing-unit)*2);
    bottom: calc(var(--spacing-unit)*2.5);
    left: 5%; /* Brutalist: not full width */
    right: 5%;
    width: 90%;
    border: 2px solid var(--ypf-brand-yellow); /* Caption border */
}
#gallery .carousel-caption h5 {
    color: var(--ypf-brand-yellow);
}
#gallery .carousel-control-prev, #gallery .carousel-control-next {
    width: 8%; /* Wider controls */
}
#gallery .carousel-control-prev-icon,
#gallery .carousel-control-next-icon {
    background-color: rgba(var(--rgb-ypf-yellow), 0.8); /* Yellow with alpha */
    border: 2px solid var(--brutalist-border-color);
    border-radius: var(--border-radius-sharp);
    padding: calc(var(--spacing-unit)*1.5); /* Larger icons */
    background-size: 60% 60%;
}
#gallery .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23222222' viewBox='0 0 16 16'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
#gallery .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23222222' viewBox='0 0 16 16'%3e%3cpath d='M4.646 1.646a.5.5 0 0 0 0 .708L10.293 8l-5.647 5.646a.5.5 0 0 0 .708.708l6-6a.5.5 0 0 0 0-.708l-6-6a.5.5 0 0 0-.708 0z'/%3e%3c/svg%3e");
}
#gallery .carousel-indicators button {
    background-color: var(--brutalist-border-color);
    border: 1px solid var(--ypf-brand-yellow);
    width: 15px; /* Square indicators */
    height: 15px;
    border-radius: 0;
    margin: 0 6px;
    opacity: 0.7;
}
#gallery .carousel-indicators button.active {
    background-color: var(--ypf-brand-yellow);
    opacity: 1;
}


/* -------------------------------------------------------------------------- */
/*                                 FAQ Section                                */
/* -------------------------------------------------------------------------- */
.brutalist-accordion .accordion-item {
    border: var(--border-strong);
    border-radius: var(--border-radius-sharp);
    margin-bottom: var(--spacing-unit);
    background-color: var(--background-color-page);
    box-shadow: var(--box-shadow-brutalist);
}
.brutalist-accordion .accordion-item:first-child { /* Remove top border if part of a set */
    /* border-top: none; */
}
.brutalist-accordion .accordion-button {
    background-color: var(--accent-neutral-light);
    color: var(--accent-neutral-dark);
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-semibold);
    font-size: 1.1rem;
    border-radius: 0;
    /* border-bottom: var(--border-strong); Removed, item has border */
    box-shadow: none;
    transition: background-color var(--transition-default);
    width: 100%;
    text-align: left;
}
.brutalist-accordion .accordion-button:not(.collapsed) {
    background-color: var(--ypf-brand-yellow);
    color: var(--accent-neutral-dark);
    border-bottom: var(--border-strong); /* Add border when open to separate from body */
    border-color: var(--brutalist-border-color);
}
.brutalist-accordion .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--rgb-ypf-yellow), 0.4);
    border-color: var(--ypf-brand-yellow);
    z-index: 1; /* Ensure focus is visible */
}
.brutalist-accordion .accordion-button::after { /* Default Bootstrap arrow */
    filter: invert(15%) sepia(0%) saturate(0%) hue-rotate(139deg) brightness(96%) contrast(94%); /* Dark arrow */
}
.brutalist-accordion .accordion-button:not(.collapsed)::after {
    filter: none; /* Reset for default color on yellow bg */
}
.brutalist-accordion .accordion-body {
    padding: calc(var(--spacing-unit) * 2.5);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-color-dark);
}

/* -------------------------------------------------------------------------- */
/*                          Contact Section / Page                            */
/* -------------------------------------------------------------------------- */
.contact-page-content { /* Used on contacts.html */
    /* body padding-top handles navbar offset */
    padding-bottom: var(--section-padding-y);
}
.contact-form .form-label {
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color-dark);
    margin-bottom: calc(var(--spacing-unit) * 0.75); /* Slightly less margin */
}
.contact-form .form-control {
    border-radius: var(--border-radius-sharp);
    border: var(--border-strong);
    padding: calc(var(--spacing-unit) * 1.5); /* 12px, more padding */
    font-family: var(--font-family-base);
    box-shadow: var(--box-shadow-brutalist);
    transition: border-color var(--transition-default), box-shadow var(--transition-default);
    background-color: var(--background-color-page); /* Ensure bg color */
}
.contact-form .form-control:focus {
    border-color: var(--ypf-brand-yellow);
    box-shadow: 0 0 0 0.2rem rgba(var(--rgb-ypf-yellow), 0.35), var(--box-shadow-brutalist);
    background-color: var(--background-color-page); /* Keep bg on focus */
}
.contact-form textarea.form-control {
    min-height: 150px;
    resize: vertical; /* Allow vertical resize */
}
.contact-form .btn-primary {
    width: 100%;
    margin-top: calc(var(--spacing-unit)*2); /* More space before button */
}
@media (min-width: 576px) {
    .contact-form .btn-primary {
        width: auto;
    }
}

.contact-details {
    background-color: var(--background-color-section-alt);
    padding: calc(var(--spacing-unit) * 3.5); /* More padding */
    border: var(--border-strong);
    box-shadow: var(--box-shadow-brutalist-hover); /* Stronger shadow for details block */
}
.contact-details h4 {
    color: var(--primary-color);
    margin-bottom: calc(var(--spacing-unit) * 2.5);
}
.contact-details p {
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    font-size: 1rem;
    display: flex; /* For icon alignment */
    align-items: flex-start;
}
.contact-details p strong {
    color: var(--accent-neutral-dark);
}
.contact-details i.fas { /* Font Awesome example */
    color: var(--primary-color);
    margin-right: calc(var(--spacing-unit)*1.5);
    font-size: 1.3rem;
    width: 20px; /* Fixed width for alignment */
    text-align: center;
    margin-top: 2px; /* Fine-tune alignment */
}

/* -------------------------------------------------------------------------- */
/*                                   Footer                                   */
/* -------------------------------------------------------------------------- */
.footer-brutalist {
    /* background-color is from .bg-dark-ypf */
    padding-top: calc(var(--spacing-unit) * 6);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-top: 5px solid var(--ypf-brand-yellow); /* Thicker top border */
}
.footer-brutalist .footer-title {
    /* color set by .bg-dark-ypf */
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-bold);
    margin-bottom: calc(var(--spacing-unit) * 2.5);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.footer-brutalist p.small {
    font-size: 0.875rem;
    line-height: 1.6;
}
.footer-brutalist hr {
    border-color: rgba(255, 255, 255, 0.2) !important; /* More visible hr */
    margin-top: calc(var(--spacing-unit)*3);
    margin-bottom: calc(var(--spacing-unit)*3);
}
.footer-brutalist .footer-links li {
    margin-bottom: calc(var(--spacing-unit));
}
.footer-brutalist .footer-links a {
    /* color set by .bg-dark-ypf */
    text-decoration: none;
    transition: color var(--transition-default), padding-left var(--transition-default);
    font-weight: var(--font-weight-normal);
    display: inline-block; /* For padding effect */
}
.footer-brutalist .footer-links a:hover {
    /* color set by .bg-dark-ypf */
    text-decoration: none;
    padding-left: var(--spacing-unit);
}

/* -------------------------------------------------------------------------- */
/*                         Success/Privacy/Terms Pages                        */
/* -------------------------------------------------------------------------- */
.full-page-centered-content { /* For success.html */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--navbar-height));
    text-align: center;
    padding: var(--section-padding-y) var(--container-padding-x);
}
.full-page-centered-content h1 {
    color: var(--primary-color); /* Or --success-color */
    margin-bottom: calc(var(--spacing-unit)*3);
}
.full-page-centered-content p {
    font-size: 1.1rem;
    max-width: 600px;
    margin-bottom: calc(var(--spacing-unit)*3);
}

.success-checkmark {
    width: 100px; /* Larger checkmark */
    height: 100px;
    border-radius: 50%;
    display: block;
    stroke-width: 3;
    stroke: var(--ypf-brand-yellow);
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px var(--accent-neutral-dark);
    animation: scale_success .3s ease-in-out .9s both, fill_yellow_success .4s ease-in-out .9s both;
    margin: 0 auto calc(var(--spacing-unit) * 4) auto;
}
.success-checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3;
    stroke-miterlimit: 10;
    stroke: var(--accent-neutral-dark);
    fill: none;
    animation: stroke_success 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.success-checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke_success 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes stroke_success { 100% { stroke-dashoffset: 0; } }
@keyframes scale_success { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }
@keyframes fill_yellow_success { 100% { box-shadow: inset 0px 0px 0px 50px var(--ypf-brand-yellow); } }


.static-page-content { /* For Privacy and Terms */
    /* body padding-top handles navbar offset */
    padding-bottom: var(--section-padding-y); /* Ensure spacing at bottom */
}
.static-page-content .container {
    max-width: 800px; /* Constrain width for readability */
}
.static-page-content h1 {
    margin-bottom: calc(var(--spacing-unit) * 4);
    color: var(--primary-color);
    text-align: center;
}
.static-page-content h2 {
    margin-top: calc(var(--spacing-unit) * 5); /* More space above H2 */
    margin-bottom: calc(var(--spacing-unit) * 2);
    color: var(--secondary-color);
    font-size: 1.7rem; /* Larger H2 */
    border-bottom: 2px solid var(--accent-neutral-light);
    padding-bottom: var(--spacing-unit);
}
.static-page-content p, .static-page-content li {
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    line-height: 1.8; /* More line height for long text */
    font-size: 1.05rem; /* Slightly larger base text */
}
.static-page-content ul, .static-page-content ol {
    padding-left: calc(var(--spacing-unit) * 4); /* Deeper indent */
}
.static-page-content strong {
    color: var(--accent-neutral-dark);
    font-weight: var(--font-weight-semibold);
}
.static-page-content a {
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
}
.static-page-content a:hover {
    color: var(--accent-orange);
}

/* General background image styling */
.has-bg-image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.has-bg-image.text-on-image-overlay {
    position: relative;
}
.text-on-image-overlay::before { /* Ensure overlay for text readability */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    z-index: 1;
}
.text-on-image-overlay > .container { /* Ensure container content is above overlay */
    position: relative;
    z-index: 2;
}

/* Cookie Consent Popup - Basic style from HTML is usually sufficient */
#cookieConsentPopup a:hover {
    color: var(--text-color-light) !important;
}
#cookieConsentPopup button { /* Style cookie button */
    box-shadow: 2px 2px 0px var(--accent-neutral-dark) !important; /* Ensure shadow matches brutalist style */
}
header, #main-navbar {
    width: 100% !important;
}