/* style.css */

/*------------------------------------*\
  #ROOT VARIABLES
\*------------------------------------*/
:root {
    /* Color Palette */
    /* Base Colors from HTML (Dark Theme Focus) */
    --color-bg-dark: #111827;       /* Tailwind gray-900 */
    --color-bg-medium: #1f2937;     /* Tailwind gray-800 */
    --color-bg-light: #374151;      /* Tailwind gray-700 */
    --color-text-primary: #e5e7eb;  /* Tailwind gray-200 */
    --color-text-secondary: #d1d5db;/* Tailwind gray-300 */
    --color-text-muted: #9ca3af;    /* Tailwind gray-400 */
    --color-border: #4b5563;        /* Tailwind gray-600 */

    /* Futuristic Accent (Emerald) */
    --color-futuristic-accent: #34D399;       /* Tailwind emerald-400 */
    --color-futuristic-accent-hover: #10B981; /* Tailwind emerald-500 */
    --color-futuristic-accent-text: #064E3B;  /* Tailwind emerald-800 */
    --color-futuristic-accent-dark: #047857;  /* Tailwind emerald-700 */


    /* Tetrad Scheme (For specific highlights, if needed beyond futuristic accent) */
    --color-tetrad-primary: #0D47A1;   /* Dark Blue */
    --color-tetrad-secondary: #D81B60;  /* Pink/Magenta */
    --color-tetrad-accent1: #FFC107;   /* Amber/Yellow */
    --color-tetrad-accent2: #00796B;   /* Teal */

    /* Fonts */
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Nunito', sans-serif;

    /* Transitions & Animations */
    --transition-fast: 0.2s ease-in-out;
    --transition-medium: 0.4s ease-in-out;
    --transition-slow: 0.6s ease-in-out;

    /* Volumetric UI Elements */
    --border-radius-volumetric: 1rem; /* Consistent rounded corners */
    --shadow-volumetric: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.25);
    --shadow-volumetric-hover: 0 20px 25px -5px rgba(52, 211, 153, 0.2), 0 10px 10px -5px rgba(52, 211, 153, 0.1);

    /* Card Specifics */
    --card-image-height: 220px;
}

/*------------------------------------*\
  #BASE STYLES
\*------------------------------------*/
body {
    background-color: var(--color-bg-dark);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll from animations */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-primary); /* White on dark bg */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    margin-bottom: 0.75em;
    line-height: 1.3;
}
/* Sizes will largely be handled by Tailwind, but ensure consistency */
h1 { font-size: 2.5rem; } /* Equivalent to text-4xl or text-5xl */
h2 { font-size: 2rem; }   /* Equivalent to text-3xl or text-4xl */
h3 { font-size: 1.5rem; } /* Equivalent to text-2xl or text-xl */

p {
    margin-bottom: 1em;
    color: var(--color-text-secondary);
}

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

/* Ensure main content area has reasonable max-width if not using Tailwind's max-w-* classes directly on sections */
section > .max-w-7xl { /* This is from HTML structure */
    width: 100%;
}

/* Background image defaults for parallax and other backgrounds */
.parallax-bg, .bg-image-cover {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.parallax-bg {
    background-attachment: fixed;
}

/* Text over image protection */
.text-on-image-overlay-wrapper {
    position: relative;
    color: #FFFFFF; /* Ensure text is white for max contrast */
}
.text-on-image-overlay-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)); /* Standard overlay */
    z-index: 1;
}
.text-on-image-overlay-wrapper > * {
    position: relative;
    z-index: 2;
}


/* Custom Scrollbar (Futuristic Touch) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-medium);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--color-futuristic-accent);
  border-radius: 10px;
  border: 3px solid var(--color-bg-medium); /* Creates padding around thumb */
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-futuristic-accent-hover);
}


/*------------------------------------*\
  #GLOBAL COMPONENT STYLES
\*------------------------------------*/

/* Buttons */
.btn, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-heading); /* Oswald for buttons, or Nunito bold */
    font-weight: bold;
    padding: 0.65rem 1.25rem;
    border-radius: 0.375rem; /* Tailwind's rounded-md */
    transition: all var(--transition-fast);
    cursor: pointer;
    text-align: center;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.futuristic-button { /* Extends base button, matches HTML class */
    background-color: var(--color-futuristic-accent);
    color: var(--color-futuristic-accent-text);
    font-weight: bold;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem; /* Volumetric */
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-radius var(--transition-medium);
    box-shadow: var(--shadow-volumetric);
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.futuristic-button:hover {
    background-color: var(--color-futuristic-accent-hover);
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-volumetric-hover);
    /* Morphing border radius example */
    /* border-radius: 0.25rem 0.75rem 0.25rem 0.75rem; */
}
.futuristic-button:active {
    transform: translateY(-1px) scale(0.98);
}
/* Alternative hover with background sweep */
.futuristic-button.sweep-bg::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-futuristic-accent-dark); /* Darker shade for sweep */
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--transition-medium);
}
.futuristic-button.sweep-bg:hover::before {
    transform: scaleX(1);
}
.futuristic-button.sweep-bg:hover {
    background-color: var(--color-futuristic-accent); /* Keep original or slight change */
    color: var(--color-text-primary); /* Ensure text contrast on sweep */
}


/* Forms */
.futuristic-input,
textarea.futuristic-input { /* For consistency */
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-radius: 0.5rem; /* Volumetric */
    padding: 0.75rem 1rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.futuristic-input:focus,
textarea.futuristic-input:focus {
    border-color: var(--color-futuristic-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-futuristic-accent) 30%, transparent);
    outline: none;
}
.futuristic-input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.8;
}


/* Cards (Consolidating .card and .futuristic-card concepts) */
/* Base card styles from HTML (Tailwind gray-800, rounded-xl, shadow-2xl) */
.card, .futuristic-card {
    background-color: var(--color-bg-medium);
    border-radius: var(--border-radius-volumetric);
    box-shadow: var(--shadow-volumetric);
    overflow: hidden;
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
    display: flex;
    flex-direction: column;
    height: 100%; /* For equal height cards in a grid */
}
.card:hover, .futuristic-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-volumetric-hover);
}

.card-image { /* Container for the image in a card */
    width: 100%;
    height: var(--card-image-height); /* Use CSS variable for height */
    overflow: hidden;
    background-color: var(--color-bg-light); /* Placeholder bg if image fails */
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* Ensure image content is centered */
    transition: transform var(--transition-medium);
}
.card:hover .card-image img, .futuristic-card:hover .card-image img {
    transform: scale(1.05); /* Subtle zoom on card hover */
}

.card-content {
    padding: 1.5rem;
    color: var(--color-text-secondary);
    flex-grow: 1; /* Allows content to fill space, useful for button alignment */
    display: flex;
    flex-direction: column;
    /* text-align: center; /* Uncomment if all card text should be centered by default */
}
.card-content h3 { /* Card titles */
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
    font-size: 1.25rem; /* text-xl */
}
.card-content p {
    font-size: 0.95rem;
    margin-bottom: 1rem;
    flex-grow: 1; /* Pushes elements below it (like a button) to the bottom */
}
.card-content .read-more-link,
.card-content .futuristic-button { /* Align button or link to bottom if card content grows */
    margin-top: auto; /* Pushes this element to the bottom of the card-content */
}

/* Specific for Testimonial cards centering if needed */
.testimonial-card .card-content {
    text-align: center;
}
.testimonial-card .card-image { /* For small avatar-like images */
    width: 80px; /* As per HTML */
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 1rem auto; /* Center the image container */
    border: 3px solid var(--color-futuristic-accent);
}


/* "Read More" Links (general styling, can be applied with a class) */
a.read-more-link, .card-content a[href="#"] { /* Target generic card links too */
    display: inline-block; /* Or block if it takes full width */
    color: var(--color-futuristic-accent);
    text-decoration: none;
    font-weight: bold;
    position: relative;
    padding-bottom: 2px;
}
a.read-more-link::after, .card-content a[href="#"]::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-futuristic-accent-hover);
    transition: width var(--transition-medium);
}
a.read-more-link:hover::after, .card-content a[href="#"]:hover::after {
    width: 100%;
}
.card-content a[href="#"] { /* The HTML example uses → in text */
    /* If not using Tailwind classes, add them here */
}


/* Fixed Header Adjustments (for content on other pages) */
.page-content-pusher {
    padding-top: 7rem; /* Approx height of fixed header (h-20 is 5rem, plus some buffer) */
}


/*------------------------------------*\
  #PAGE-SPECIFIC STYLES
\*------------------------------------*/

/* Success Page (success.html) */
.success-page-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    background-color: var(--color-bg-dark); /* Consistent background */
}
.success-page-container h1 {
    color: var(--color-futuristic-accent);
    font-size: 3rem;
    margin-bottom: 1rem;
}
.success-page-container p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: var(--color-text-secondary);
}


/* Privacy & Terms pages (privacy.html, terms.html) */
.privacy-policy-page, .terms-service-page {
    padding-top: 7rem; /* Push content below fixed header */
    padding-bottom: 4rem;
}
.privacy-policy-page .content-container,
.terms-service-page .content-container {
    max-width: 800px; /* Readable width for text-heavy pages */
    margin-left: auto;
    margin-right: auto;
    background-color: var(--color-bg-medium);
    padding: 2rem;
    border-radius: var(--border-radius-volumetric);
    box-shadow: var(--shadow-volumetric);
}
.privacy-policy-page h1, .terms-service-page h1 {
    text-align: center;
    color: var(--color-futuristic-accent);
    margin-bottom: 2rem;
}
.privacy-policy-page h2, .terms-service-page h2 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
    border-bottom: 2px solid var(--color-futuristic-accent);
    padding-bottom: 0.3rem;
}


/*------------------------------------*\
  #ANIMATIONS & TRANSITIONS
\*------------------------------------*/
/* Base for ScrollReveal (JS handles the trigger, CSS for animation) */
[data-scroll-reveal] {
    opacity: 0;
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}
[data-scroll-reveal="left"] { transform: translateX(-50px); }
[data-scroll-reveal="right"] { transform: translateX(50px); }
[data-scroll-reveal="bottom"] { transform: translateY(50px); }
[data-scroll-reveal="top"] { transform: translateY(-50px); }
[data-scroll-reveal="fade-in"] { transform: translateY(0); } /* Just fade */
[data-scroll-reveal="scale-up"] { transform: scale(0.9); }

/* When revealed by ScrollReveal */
.is-revealed {
    opacity: 1 !important;
    transform: translate(0,0) scale(1) !important;
}


/* Barba.js Page Transitions (basic fade) */
.barba-leave-active,
.barba-enter-active {
  transition: opacity 0.5s var(--transition-medium);
}
.barba-leave-to,
.barba-enter-from {
  opacity: 0;
}
/* Add a slight scale/slide for "morphing" feel */
/*
.barba-leave-active {
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.barba-enter-active {
  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}
.barba-leave-to {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}
.barba-enter-from {
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
}
*/

/*------------------------------------*\
  #FOOTER STYLES
\*------------------------------------*/
footer {
    /* Tailwind handles bg, border. Add specific typography or spacing if needed. */
}
footer h4 { /* Footer widget titles */
    /* color: var(--color-text-primary); Already set globally */
    /* font-weight: bold; Tailwind class 'font-semibold' used in HTML */
}
footer ul li a {
    color: var(--color-text-muted);
    transition: color var(--transition-fast), padding-left var(--transition-fast);
    position: relative;
}
footer ul li a:hover {
    color: var(--color-futuristic-accent);
    padding-left: 5px; /* Slight indent on hover */
}
footer ul li a:hover::before { /* Optional accent mark */
    content: "›";
    position: absolute;
    left: -5px;
    color: var(--color-futuristic-accent);
}

/* Text-based social media links in footer */
footer div:last-child ul li a { /* Targeting "Síguenos" links */
    /* Already styled by above general footer link style */
    /* If more specific styling needed, use classes */
}
footer .text-gray-500 { /* Copyright text */
    font-size: 0.875rem;
}

/*------------------------------------*\
  #UTILITY CLASSES (if needed beyond Tailwind)
\*------------------------------------*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.dark-glassmorphism {
  background-color: rgba(31, 41, 55, 0.6); /* Tailwind gray-800 with alpha */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* Safari */
  box-shadow: var(--shadow-volumetric);
  border: 1px solid rgba(75, 85, 99, 0.3); /* Tailwind gray-600 with alpha */
  border-radius: var(--border-radius-volumetric);
}

/* Ensure sufficient contrast for text on various backgrounds */
/* This is a general reminder; Tailwind text color utilities should be used with care */
.high-contrast-text {
    color: var(--color-text-primary) !important; /* Light text */
}
.dark-text-on-light-bg {
    color: var(--color-bg-dark) !important; /* Dark text for light backgrounds */
}


/* Animation: Subtle pulse for accent elements (use sparingly) */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 5px var(--color-futuristic-accent), 0 0 10px var(--color-futuristic-accent);
  }
  50% {
    box-shadow: 0 0 15px var(--color-futuristic-accent), 0 0 25px var(--color-futuristic-accent);
  }
}
.pulsing-element {
  animation: pulse-glow 2s infinite ease-in-out;
}

/* Hero section specific if needed (mostly handled by Tailwind & inline) */
#hero h1 {
    color: #FFFFFF; /* Explicitly white as per prompt, overrides global h1 if necessary */
}
#hero p {
    color: #e5e7eb; /* Light gray for hero paragraph, as per HTML */
}

/* Ensure section headings are clearly above content and centered */
section h2.text-center {
    margin-bottom: 3rem; /* Default 12, can be adjusted */
}

header nav{
    flex-wrap: wrap;
}