/*
  Theme: Inversiones en Estaciones de Servicio en Argentina
  Design System: Corporativo + Eco-minimalismo
  Color Scheme: Pastel
  Animation Style: 3D-effects
  Fonts: Space Grotesk (Headings), DM Sans (Body)
*/

:root {
    /* Color Palette - Pastel, Eco-Minimalism, Corporate */
    --color-primary: #0d9488;         /* Teal 600 (from HTML) - Main corporate/eco color */
    --color-primary-dark: #134e4a;    /* Teal 900 (from HTML) - Darker shade for hovers/depth */
    --color-primary-light: #ccfbf1;   /* Teal 100 (from HTML) - Lighter accent */

    --color-secondary: #f0fdfa;       /* Teal 50 (from HTML) - Very light, almost white, eco-friendly base */
    --color-background: var(--color-secondary);
    --color-surface: #ffffff;         /* Pure white for cards, contrasting surfaces */

    --color-accent: #f59e0b;          /* Amber 500 - A warm, inviting pastel accent */
    --color-accent-dark: #d97706;     /* Amber 600 - Darker accent for hovers */
    --color-accent-light: #fef3c7;    /* Amber 100 - Lighter accent pastel */

    --color-text-main: #1f2937;       /* Gray 800 (from HTML) - Main text color for readability */
    --color-text-muted: #4b5563;      /* Gray 600 (from HTML) - Muted text */
    --color-text-light: #f9fafb;      /* Gray 50 - For text on dark backgrounds */
    --color-text-headings: #134e4a;   /* Teal 900 (from HTML) - Default for H tags */
    --color-text-hero: #FFFFFF;       /* Strictly white for hero */

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    --gradient-subtle-bg: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-primary-light) 100%);
    --gradient-overlay-dark: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    --gradient-accent-soft: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));


    /* Fonts */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'DM Sans', sans-serif;

    /* Spacing & Sizing */
    --spacing-unit: 8px;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px; /* Tailwind rounded-xl */

    /* Shadows (Eco-minimalism - subtle but effective) */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

    /* Transitions */
    --transition-fast: all 0.2s ease-in-out;
    --transition-medium: all 0.3s ease-in-out;
    --transition-slow: all 0.5s ease-in-out;

    /* Header height (approximate, for calculations if needed) */
    --header-height: 5rem; /* 80px */
}

/* General Body Styles */
body {
    font-family: var(--font-body);
    color: var(--color-text-main);
    background-color: var(--color-background);
    line-height: 1.7; /* Slightly more spacious for readability */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Typography - Base styles complementing Tailwind */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-headings);
    font-weight: 700; /* Space Grotesk often looks best bold for titles */
    margin-top: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    line-height: 1.3;
}
/* Tailwind's text-size classes are preferred, but these are fallbacks or base sizes */
h1 { font-size: clamp(2rem, 5vw, 3rem); } /* Responsive font size */
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }

p {
    margin-bottom: calc(var(--spacing-unit) * 2);
    color: var(--color-text-muted);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-fast);
}
a:hover {
    color: var(--color-primary-dark);
    text-decoration: none; /* Often preferred in modern designs to rely on other hover cues */
}

/* Container (if a custom container is used alongside Tailwind's) */
.container-custom {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-unit);
    padding-right: var(--spacing-unit);
}

/* Global Button Styles */
.btn, button, input[type='submit'], input[type='button'] {
    display: inline-block;
    font-family: var(--font-heading); /* Buttons often use heading font for impact */
    font-weight: 500;
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 3); /* 10px 24px */
    border-radius: var(--border-radius-lg); /* More rounded for modern feel */
    cursor: pointer;
    transition: var(--transition-medium);
    text-align: center;
    border: 2px solid transparent; /* Slightly thicker border for definition */
    box-shadow: var(--shadow-md);
    position: relative;
    transform-style: preserve-3d; /* For 3D hover effects */
    outline: none;
    letter-spacing: 0.5px;
    text-transform: uppercase; /* Corporate feel */
    font-size: 0.9rem;
}

.btn-primary,
button[type="submit"], /* Default styles for submit */
input[type="submit"] {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-color: var(--color-primary);
}
.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px) perspective(800px) rotateX(5deg); /* Enhanced 3D lift */
}
.btn-primary:active,
button[type="submit"]:active,
input[type="submit"]:active {
    transform: translateY(0px) perspective(800px) rotateX(0deg);
    box-shadow: var(--shadow-sm);
}

/* Specific styling for <a> tags made to look like buttons via Tailwind */
a.bg-brand-primary {
    display: inline-block; /* Ensure it behaves like a button */
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 3);
    border-radius: var(--border-radius-lg);
    transition: var(--transition-medium);
    color: var(--color-text-light) !important;
    box-shadow: var(--shadow-md);
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.9rem;
    position: relative;
    transform-style: preserve-3d;
}
a.bg-brand-primary:hover {
    background-color: var(--color-primary-dark) !important; /* Ensure override */
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px) perspective(800px) rotateX(5deg);
    text-decoration: none;
}


/* Header - Fixed Navigation Bar */
header.sticky {
    /* Tailwind's sticky top-0 bg-white/80 backdrop-blur-md shadow-sm is good */
    /* Additional glassmorphism if needed */
    /* background: rgba(240, 253, 250, 0.75); /* var(--color-secondary) with alpha */
    /* backdrop-filter: blur(12px) saturate(150%); */
    /* border-bottom: 1px solid var(--color-primary-light); */
    z-index: 1000; /* Ensure it's above other content */
}
header nav a {
    position: relative;
    padding: calc(var(--spacing-unit) * 0.5) 0;
}
header nav a::after { /* Underline effect for nav links */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width var(--transition-medium);
}
header nav a:hover::after,
header nav a.font-bold::after { /* Active link style */
    width: 100%;
}
header nav a.font-bold { /* Active link in nav */
    color: var(--color-primary) !important;
}


/* Hero Section Styles */
#hero {
    color: var(--color-text-hero) !important; /* V.IMP: White text */
    /* Other styles like min-height, display handled by Tailwind/inline */
    position: relative; /* For overlay */
}
#hero::before { /* Overlay for text readability on background image */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* background: var(--gradient-overlay-dark); /* Defined in HTML inline style */
    z-index: 1; /* Ensure overlay is behind content but above image */
}
#hero > .relative.z-10 { /* Content wrapper in hero */
    z-index: 2; /* Ensure content is above overlay */
}
#hero h1 {
    color: var(--color-text-hero) !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Enhance readability */
}
#hero p {
    color: var(--color-text-hero) !important;
    opacity: 0.9; /* Slightly softer than pure white for subheading */
}

/* Background Image General Rules */
[style*="background-image"] {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
/* If text is directly on a background image without an explicit overlay div/gradient in HTML */
.text-on-bg-image-section {
    position: relative;
}
.text-on-bg-image-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--gradient-overlay-dark);
    z-index: 1;
}
.text-on-bg-image-section > * { /* Ensure content is above overlay */
    position: relative;
    z-index: 2;
}


/* Card Styles (General for .card, .info-card, etc.) */
.card, .info-card {
    /* Tailwind bg-white or bg-brand-accent, rounded-xl, shadow-lg */
    overflow: hidden;
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
    padding: calc(var(--spacing-unit) * 2.5); /* 20px, can be adjusted by Tailwind */

    /* STROGO: Card content centering & image handling */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers .card-image and .card-content horizontally */
    text-align: center; /* Centers text within .card-content */
}
.card:hover, .info-card:hover {
    transform: translateY(-6px) perspective(900px) rotateX(2deg) rotateY(1deg);
    box-shadow: var(--shadow-xl);
}

.card-image, .image-container { /* Covers STROGO rule */
    width: 100%; /* Full width of padded card area */
    /* STROGO: Fixed height for image containers in cards */
    height: 200px; /* Default, adjust per card type if needed */
    border-radius: var(--border-radius-lg); /* Rounded images */
    overflow: hidden; /* Essential for object-fit */
    margin-bottom: calc(var(--spacing-unit) * 2);
    display: flex; /* Centers image if it's smaller, though object-fit usually handles this */
    justify-content: center;
    align-items: center;
}
.card-image img, .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* STROGO */
    object-position: center;
    transition: transform var(--transition-slow);
    /* margin: 0 auto; Not strictly needed with flex on parent and width/height 100% */
}
.card:hover .card-image img, .info-card:hover .card-image img {
    transform: scale(1.1);
}

.card-content {
    width: 100%; /* Ensure it uses the available space */
}
.card-content h3 {
    color: var(--color-primary);
    font-size: 1.3rem; /* Tailwind text-xl is 1.25rem */
    margin-top: 0; /* Reset top margin if it's the first element in card-content */
}
.card-content p {
    font-size: 0.95rem; /* Tailwind text-sm is 0.875rem */
}

/* Testimonial Card Specifics */
#testimonials .card {
    /* Tailwind bg-brand-accent, p-6, rounded-xl, shadow-lg */
    align-items: flex-start; /* Override general card centering for testimonial layout */
    text-align: left;
}
#testimonials .card .card-image { /* Avatar */
    width: calc(var(--spacing-unit) * 7.5) !important; /* 60px */
    height: calc(var(--spacing-unit) * 7.5) !important; /* 60px */
    border-radius: 50%;
    margin-right: calc(var(--spacing-unit) * 1.5); /* 12px */
    margin-bottom: 0; /* Reset for row layout if flex-direction changes */
    /* The HTML structure uses flex items-center mb-4 for avatar+name, this CSS might conflict or complement */
}
#testimonials .card .card-content p.italic {
    /* Tailwind italic */
    color: var(--color-text-main); /* Slightly darker for quote emphasis */
    font-size: 1rem;
}

/* Event Calendar & External Resources (often similar structure) */
#events .info-card, #external-resources .card {
    /* Tailwind bg-white or bg-brand-accent */
    align-items: flex-start; /* If content is mostly text and left-aligned */
    text-align: left;
}
#events .info-card .card-image, #external-resources .card .card-image {
    /* Height and width handled by Tailwind or inline styles */
    /* e.g., HTML has height: 180px for external resources */
}

/* Section Specifics */
/* Behind the Scenes, Awards, etc. - rely on .card styles and Tailwind */
#behind-the-scenes .info-card {
    background-color: var(--color-primary-light); /* brand-accent */
}

/* Form Styling */
form { /* Tailwind classes define most of the form's container style */
    /* Example: bg-white/90 backdrop-blur-sm p-8 rounded-xl shadow-2xl */
}
form label {
    font-weight: 500;
    color: var(--color-text-main);
    margin-bottom: calc(var(--spacing-unit) * 0.75);
    display: block;
    font-size: 0.9rem;
}
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea {
    /* Tailwind classes: w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm */
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    background-color: var(--color-surface); /* Ensure good contrast if parent has alpha */
    font-size: 1rem;
}
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="tel"]:focus,
form textarea:focus {
    border-color: var(--color-primary) !important; /* Ensure override */
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.25) !important; /* Focus ring */
    outline: none;
}
form textarea {
    min-height: 100px; /* Default min height */
    resize: vertical;
}
form input[type="checkbox"] {
    /* Tailwind: h-4 w-4 text-brand-primary border-gray-300 rounded focus:ring-brand-primary */
    accent-color: var(--color-primary); /* Modern browser styling for native checkbox */
}

/* Footer Styles */
footer {
    /* Tailwind bg-brand-dark text-gray-300 py-12 */
    line-height: 1.8; /* More spacing in footer text */
}
footer h5 {
    color: var(--color-surface); /* Tailwind text-white */
    font-size: 1.15rem; /* Slightly smaller than main H3s */
}
footer ul { list-style: none; padding: 0; }
footer ul li { margin-bottom: calc(var(--spacing-unit) * 0.75); }
footer ul li a {
    color: var(--color-text-light); /* Tailwind text-gray-300 */
    opacity: 0.85;
}
footer ul li a:hover {
    color: var(--color-primary-light); /* Tailwind hover:text-brand-accent */
    opacity: 1;
    text-decoration: none; /* Consistent with other links */
}
/* Footer social links (text-only) styling */
footer div > h5 + ul.space-y-2 li a {
    /* The Tailwind class space-y-2 handles vertical spacing.
       If they were horizontal, flex and space-x would be used.
       These are text links, so general 'a' styling applies.
       No specific icon styling needed as they are text. */
    letter-spacing: 0.3px; /* Slightly more space for readability */
}
footer .border-t {
    border-color: rgba(255, 255, 255, 0.2) !important; /* Lighter border for dark bg */
}

/* Page Specific Styles */
/* Success Page */
body[data-barba-namespace="success"] main { /* Ensure main itself can be a flex container for centering */
    display: flex; /* If not already set by Tailwind on a wrapper */
    flex-direction: column; /* If not already set */
    flex-grow: 1; /* To take up space between header and footer */
}
/* The section inside success.html is already styled by Tailwind for centering and min-height */
/* section.min-h-\[calc\(100vh-20rem\)\] { ... } */

/* Privacy & Terms Pages */
body[data-barba-namespace="privacy"] main > section:first-of-type,
body[data-barba-namespace="terms"] main > section:first-of-type {
    padding-top: 100px !important; /* V.IMP: Avoid overlap with fixed header */
    padding-bottom: calc(var(--spacing-unit) * 6); /* More space at the bottom */
}
.prose { /* Styles for markdown-like content on legal pages */
    /* Tailwind @tailwindcss/typography plugin handles this well.
       If not using plugin, define styles here. */
    max-width: 75ch; /* Comfortable reading width */
}
.prose h1, .prose h2, .prose h3 {
    color: var(--color-text-headings) !important;
    border-bottom: 1px solid var(--color-primary-light);
    padding-bottom: calc(var(--spacing-unit) * 0.5);
}
.prose p, .prose li {
    color: var(--color-text-main); /* Slightly darker than text-muted for readability of legal text */
    font-size: 1rem;
    line-height: 1.8;
}
.prose ul > li::before { /* For Tailwind typography plugin compatibility */
    background-color: var(--color-primary);
}
.prose a {
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: underline;
}
.prose a:hover {
    color: var(--color-primary-dark);
}

/* Read More Link Styles */
.read-more-link, a[href$="&rarr;"] { /* Targets links generated in HTML with arrow */
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--color-primary);
    display: inline-flex; /* Align icon with text */
    align-items: center;
    transition: var(--transition-medium);
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.5px;
}
.read-more-link:hover, a[href$="&rarr;"]:hover {
    color: var(--color-primary-dark);
    transform: translateX(4px); /* Slight shift for arrow */
    text-decoration: none;
}
.read-more-link::after, a[href$="&rarr;"]::after { /* If arrow is a pseudo-element, not text */
    /* content: '→'; /* Or SVG icon */
    /* margin-left: var(--spacing-unit); */
}

/* Animations (Scroll Animations are primarily handled by Tailwind classes in HTML) */
/* Keyframes for animations defined in Tailwind config in HTML */
/* .scroll-animate should have opacity:0 by default (done in HTML by adding opacity-0 class) */

/* Barba.js Page Transitions - CSS part for opacity (JS handles GSAP if used) */
.barba-leave-active,
.barba-enter-active {
  transition: opacity var(--transition-slow) ease-in-out, transform var(--transition-slow) ease-in-out;
}
.barba-leave-to {
  opacity: 0;
  transform: translateY(20px) scale(0.98); /* Example 3D-ish exit */
}
.barba-enter-from {
  opacity: 0;
  transform: translateY(-20px) scale(0.98); /* Example 3D-ish entry */
}

/* Glassmorphism utility class (if needed beyond header's Tailwind) */
.glassmorphism {
    background: rgba(255, 255, 255, 0.6); /* Adjust alpha for desired effect */
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}

/* Custom Scrollbar (Eco-minimalism touch) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--color-secondary);
}
::-webkit-scrollbar-thumb {
    background-color: var(--color-primary-light);
    border-radius: var(--border-radius-md);
    border: 2px solid var(--color-secondary); /* Creates padding around thumb */
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-primary);
}

/* Utility classes (example) */
.text-shadow-subtle {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.text-shadow-strong { /* For light text on complex backgrounds */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.mobile-menu-button{
    display: none;
}