body {
  font-family: "Montserrat", sans-serif;
  background-color: #020101; /* Dark background */
  color: #D7D7D5; /* New primary text color */
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Navbar specific styles for translucency and responsiveness */
.navbar {
  background-color: rgba(2, 1, 1, 0.8); /* Semi-transparent dark background */
  backdrop-filter: blur(8px); /* Frosted glass effect */
  -webkit-backdrop-filter: blur(8px); /* Safari support */
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: background-color 0.3s ease-in-out;
}

.navbar-scrolled {
  background-color: rgba(2, 1, 1, 0.95); /* More opaque when scrolled */
}

.nav-link {
  color: #D7D7D5; /* Default color */
  position: relative; /* Needed for underline effect */
  transition: color 0.3s ease-in-out, transform 0.2s ease-in-out, border-bottom-color 0.3s ease-in-out;
  padding-bottom: 2px; /* Space for underline */
  border-bottom: 2px solid transparent; /* Initial transparent underline */
}
.nav-link:hover {
  color: #b0b0ae; /* Slightly darker/muted hover for D7D7D5 */
  transform: translateY(-2px); /* Subtle hover lift */
  border-bottom-color: #b0b0ae;
}

.hero-section {
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: fadeIn 1s ease-out; /* Initial fade-in for hero */
}

.hero-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.section-header {
  font-family: "Montserrat", sans-serif; /* Changed to Montserrat */
  font-weight: 700; /* Make headers bolder */
  color: #D7D7D5; /* Ensure section headers use the new primary text color */
}

/* Service Card specific styles */
.service-card-content {
  background-color: #D7D7D5;
  color: #020101; /* Default text color for content on light background */
}

/* Blog Card specific styles */
.blog-card-content {
  background-color: #D7D7D5;
  color: #020101; /* Default text color for content on light background */
}

.service-card-content .section-header {
  color: #020101;
}

.blog-card-content .section-header {
  color: #020101;
}

.card-image {
  transition: transform 0.3s ease-in-out;
}

.card-image:hover {
  transform: scale(1.05);
}

.animated-list-item {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInSlideUp 0.6s forwards;
}

@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}
.animate-fade-in-left {
  animation: fadeInLeft 0.8s ease-out forwards;
}
.animate-fade-in-right {
  animation: fadeInRight 0.8s ease-out forwards;
}
.animate-delay-100 {
  animation-delay: 0.1s;
}
.animate-delay-200 {
  animation-delay: 0.2s;
}
.animate-delay-300 {
  animation-delay: 0.3s;
}
.animate-delay-400 {
  animation-delay: 0.4s;
}

/* Translucency for other sections (optional, adjust as needed) */
.translucent-bg {
  background-color: rgba(
    2,
    1,
    1,
    0.7
  ); /* Slightly lighter than navbar for contrast */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Image Gallery styles */
.gallery-filter-button {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.gallery-filter-button:hover,
.gallery-filter-button.active {
  background-color: rgba(255, 255, 255, 0.3);
}

.gallery-item {
  overflow: hidden;
  border-radius: 0.5rem; /* rounded-lg */
  cursor: pointer; /* Indicate clickable */
}

.gallery-item img {
  transition: transform 0.5s ease-in-out;
}

.gallery-item img:hover {
  transform: scale(1.1);
}

/* Custom form styling */
.form-field {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #D7D7D5; /* New text color */
  transition: border-color 0.3s ease-in-out;
}

.form-field:focus {
  outline: none;
  border-color: #b0b0ae; /* Adjusted focus color */
}

.form-field::placeholder {
  color: #a0a0a0; /* Placeholder text color */
}

/* Ensure select options are readable */
.form-field option {
  background-color: #020101; /* Dark background for dropdown */
  color: #D7D7D5; /* Light text for options */
}

.submit-button {
  background-color: #D7D7D5; /* New solid color for button background */
  color: #020101;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out,
    transform 0.2s ease-in-out;
}

.submit-button:hover {
  background-color: #c0c0be; /* Slightly darker hover for D7D7D5 */
  transform: translateY(-2px); /* Subtle hover lift */
}

/* Basic modal styles for alerts */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 2000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.7); /* Black w/ opacity */
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #020101;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  border-radius: 8px;
  text-align: center;
  position: relative;
}

.close-button {
  color: #aaa;
  /* float: right; */ /* Replaced by absolute positioning in modal redesigns typically */
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-button:hover,
.close-button:focus {
  color: #D7D7D5;
  text-decoration: none;
}
/* Base style for mobile menu to be off-screen */
.mobile-menu {
  display: flex; /* Always flex, but visually off-screen by default */
  position: fixed;
  top: 0;
  right: -100%; /* Start off-screen */
  width: 70%; /* Adjust width as needed */
  height: 100%;
  background-color: rgba(2, 1, 1, 0.98); /* More opaque for mobile menu */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1100;
  transition: right 0.3s ease-in-out; /* Smooth transition */
  padding-top: 60px; /* Space for fixed header */
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
  flex-direction: column;
  align-items: flex-start;
  padding-left: 2rem;
}

/* Keep the .mobile-menu.active class for JavaScript toggling */
.mobile-menu.active {
  right: 0; /* Slide in */
}

/* Ensure .mobile-menu-toggle is always visible below LG breakpoint */
.mobile-menu-toggle {
  /* No display: none here, as lg:hidden handles it for desktop */
  /* display: block; is implied by lg:hidden being the only breakpoint utility */
  z-index: 1101; /* Above mobile menu */
  cursor: pointer;
}

/* Ensure desktop-nav is hidden below LG breakpoint */
.desktop-nav {
  /* hidden lg:flex in HTML already does this */
}

.mobile-menu a {
  padding: 0.75rem 0;
  font-size: 1.125rem; /* text-lg */
  color: #D7D7D5;
  width: 100%;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: color 0.3s ease-in-out, transform 0.2s ease-in-out; /* Add transition */
  padding-bottom: 0.75rem; /* Match padding-top */
}
.mobile-menu a:hover {
  color: #b0b0ae;
  transform: translateX(5px); /* Slide effect on hover */
}


.mobile-menu a:last-child {
  border-bottom: none;
}

.mobile-menu .social-icons-mobile {
  margin-top: 2rem;
  width: 100%;
  display: flex;
  justify-content: center; /* Center icons horizontally */
  gap: 1.5rem; /* Space between icons */
}
.mobile-menu .social-icons-mobile a {
  border: none;
  padding: 0.5rem; /* Adjust padding for touch target */
}

/* Ensure icons also use the new color scheme */
.fab, .fas {
 color: #D7D7D5;
}

/* Active Nav Link State */
.nav-link.active {
  font-weight: bold;
  border-bottom-color: #D7D7D5; /* Solid underline for active link */
}

/* Read More/Less functionality styles for truncated text preview */
.collapsible-text-preview {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Show 3 lines by default */
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 72px; /* Approx 3 lines of 1.5rem line-height */
}

/* Hidden full content, positioned off-screen for accessibility and later use in modal */
.full-content-hidden {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  visibility: hidden;
}

.read-more-button {
  cursor: pointer;
  color: #4a90e2; /* A subtle blue for action links */
  font-weight: 500;
  transition: color 0.3s ease-in-out, transform 0.2s ease-in-out;
  display: inline-block; /* Ensure it's clickable */
  margin-top: 0.5rem; /* Space below text */
}

.read-more-button:hover {
  color: #72b9ee;
  transform: translateX(2px);
}

/* Page containers for multi-page layout */
.page-content-section {
  min-height: 100vh; /* Ensure sections take full height */
  display: none; /* Hidden by default */
  /* Removed fadeIn animation here as it's handled by JS on page switch to re-trigger for children */
}

/* Specific padding for sections *after* the hero on their respective pages, and for the initial sections of non-hero pages */
#page-nosotros section,
#page-servicios section,
#page-portafolio section,
#page-blog section,
#page-ventajas section,
#page-contacto section {
  padding-top: 10rem; /* Adjust for fixed navbar height */
}
/* The hero section on the home page naturally pushes content down with its height: 100vh */

/* Full screen modal for expanded content */
.fullscreen-modal {
  position: fixed;
  z-index: 3000; /* Higher than other modals */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(2, 1, 1, 0.95); /* Nearly opaque dark background */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex; /* Always flex, but controlled by opacity/transform */
  justify-content: center;
  align-items: center;
  opacity: 0; /* Start invisible */
  transform: translateY(100%); /* Start off-screen bottom */
  transition: opacity 0.4s ease-out, transform 0.4s ease-out; /* Smooth transition */
  pointer-events: none; /* Allow clicks through when invisible */
}

.fullscreen-modal.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto; /* Enable clicks when active */
}

.fullscreen-modal-content {
  background-color: rgba(2, 1, 1, 0.9);
  margin: 2rem;
  padding: 2rem;
  border-radius: 0.75rem; /* rounded-lg */
  max-width: 800px;
  width: 90%; /* Responsive width */
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
  position: relative;
  max-height: 90vh; /* Limit height to allow scrollable content inside */
  overflow-y: auto; /* Enable scrolling for modal content */
}

.fullscreen-modal-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  color: #aaa;
  font-size: 2.5rem; /* Larger for better touch target */
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s ease-in-out;
}

.fullscreen-modal-close:hover {
  color: #fff;
}

/* Ensure images inside modal are responsive */
.fullscreen-modal-body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

/* Language Picker Dropdown styles */
.lang-picker-select {
  background-color: #020101; /* Match main background */
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #D7D7D5; /* New text color */
  padding: 0.5rem 0.75rem; /* Adjusted padding */
  border-radius: 0.75rem; /* rounded-xl */
  /* font-size: 0.75rem; /* text-xs */ /* Handled by Tailwind in component */
  font-weight: 500;
  cursor: pointer;
  outline: none !important; /* Ensure no browser default outline */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23D7D7D5'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E"); /* Custom arrow with new color */
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1em;
  padding-right: 2rem; /* More space for the custom arrow */
  transition: background-color 0.3s ease-in-out;
  /* Hide the default select arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
}

.lang-picker-select:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.lang-picker-select option {
  background-color: #020101; /* Dark background for options */
  color: #D7D7D5; /* New text color for options */
}

/* Language Globe Button */
.lang-globe-button {
    background: transparent;
    border: none;
    color: #D7D7D5;
    cursor: pointer;
    padding: 0.25rem; /* Adjust as needed */
    transition: color 0.3s ease-in-out;
}

.lang-globe-button:hover,
.lang-globe-button:focus {
    color: #b0b0ae;
    outline: none;
}

/* Language Dropdown Content */
.language-dropdown-content {
    display: none; /* Hidden by default */
    position: absolute;
    background-color: #020101; /* Darker background, e.g., slate-800 */
    min-width: 130px; /* Adjust as needed */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.5rem; /* py-2 */
    z-index: 50; /* Ensure it's above other content */
    right: 0; /* Align to the right for desktop */
    margin-top: 0.5rem; /* mt-2 */
}

/* General text color overrides for Tailwind if needed, use sparingly */
.text-white {
  color: #D7D7D5 !important;
}
/* Use the new primary text color for gray-300 where it's used for main content text */
.text-gray-300 {
  color: #D7D7D5 !important;
}
/* Use a slightly darker shade for less important text */
.text-gray-400 {
  color: #a0a0a0 !important;
}
.text-gray-400 { color: #a0a0a0 !important; }

/* "Nosotros" Section - Value Card Styles */
.about-value-card {
  background-color: rgba(215, 215, 213, 0.05); /* Very subtle background */
  border: 1px solid rgba(215, 215, 213, 0.1);
  border-radius: 0.75rem; /* rounded-xl */
  padding: 2rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.about-value-card:hover {
  transform: translateY(-8px);
  background-color: rgba(215, 215, 213, 0.1);
  border-color: rgba(215, 215, 213, 0.2);
}

/* Footer Design Credit Link Style */
.design-credit {
  font-weight: bold;
  text-decoration: none; /* Remove default underline */
  transition: border-bottom-color 0.3s ease-in-out;
}
/* Style for the icon within the design credit link */
.design-credit-icon {
    width: 16px; /* Adjust size as needed */
    height: 16px; /* Adjust size as needed */
    vertical-align: middle; /* Align icon vertically with text */
}

.language-dropdown-content.lang-dropdown-active {
    display: block;
}

/* Mobile specific adjustments for language dropdown if needed */
#lang-dropdown-mobile {
    position: static; /* Override absolute for mobile if it's in normal flow */
    box-shadow: none; /* Optional: remove shadow if it looks odd in mobile flow */
}

.blog-content ul {
  list-style-type: disc; /* Adds a default disc bullet */
  padding-left: 1.5em;   /* Adds space for the bullet */
}

.blog-content ol {
  list-style-type: decimal; /* Adds numbered lists */
  padding-left: 1.5em;      /* Adds space for the number */
}

.blog-content li {
  margin-bottom: 0.5em; /* Optional: adds spacing between list items */
}

.data-modal ul {
  list-style-type: disc; /* Adds a default disc bullet */
  padding-left: 1.5em;   /* Adds space for the bullet */
}

.data-modal ol {
  list-style-type: decimal; /* Adds numbered lists */
  padding-left: 1.5em;      /* Adds space for the number */
}

.data-modal li {
  margin-bottom: 0.5em; /* Optional: adds spacing between list items */
}

/* --- Ventajas Section Enhancements --- */

#page-ventajas {
  position: relative; /* Allow positioning of pseudo-elements */
  overflow: hidden; /* Ensure nothing spills out if using negative margins */
}

/* Optional: Subtle background texture/pattern */
#page-ventajas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at top left, rgba(215, 215, 213, 0.03) 1px, transparent 1px),
                    radial-gradient(circle at bottom right, rgba(215, 215, 213, 0.03) 1px, transparent 1px);
  background-size: 20px 20px; /* Adjust size of the pattern */
  opacity: 0.8;
  z-index: 0; /* Keep it behind content */
}

#page-ventajas .container {
  position: relative; /* Bring container content above pseudo-element */
  z-index: 1;
}

#page-ventajas .section-header {
  /* No change needed, already styled */
}

/* Enhancing the main content flex layout */
#page-ventajas .flex-col.md\:flex-row {
  position: relative; /* For potential absolute positioning of decorative elements */
  align-items: flex-start; /* Align top, not center, for more dynamic look */
}

/* Image Container Styling */
#page-ventajas .md\:w-1\/2.relative {
  padding: 1rem; /* Add some padding around the image for separation/shadow */
  /* This ensures the shadow has space and gives a slight lift effect */
}

#page-ventajas .md\:w-1\/2 img {
  border: 2px solid rgba(215, 215, 213, 0.1); /* Subtle border around image */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* More pronounced shadow */
}

/* Optional: Decorative element behind the image */
#page-ventajas .md\:w-1\/2.relative::after {
  content: '';
  position: absolute;
  top: -15px; /* Adjust position */
  left: -15px; /* Adjust position */
  width: calc(100% - 20px); /* Slightly smaller than image for offset effect */
  height: calc(100% - 20px); /* Slightly smaller than image for offset effect */
  background-color: rgba(215, 215, 213, 0.08); /* A subtle accent color */
  border-radius: 0.75rem; /* Match image border-radius */
  z-index: -1; /* Behind the image */
  transition: transform 0.3s ease-out;
}

#page-ventajas .md\:w-1\/2.relative:hover::after {
  transform: translate(10px, 10px); /* Slight movement on hover */
}

/* Advantage Items Styling */
.advantage-item {
  position: relative;
  padding-left: 2rem; /* Space for a potential icon or decorative line */
  border-left: 3px solid rgba(215, 215, 213, 0.2); /* Subtle line for separation */
  transition: border-left-color 0.3s ease-in-out;
}

.advantage-item:hover {
  border-left-color: #D7D7D5; /* Highlight line on hover */
}

.advantage-item h3 {
  /* No change needed, already styled */
  margin-bottom: 0.5rem; /* Tighter spacing to text */
}

.advantage-item p {
  /* No change needed, already styled */
}

/* Call to Action Button */
#page-ventajas .text-center.mt-16 a {
  /* Already well-styled by existing .submit-button and hover effects */
  box-shadow: 0 8px 20px rgba(215, 215, 213, 0.15); /* More prominent shadow for CTA */
}