/* Premium Design System - Medland Ingeniería */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&family=Montserrat:wght@600;700;800&display=swap");

:root {
  --primary-gradient: linear-gradient(135deg, #004e92 0%, #000428 100%);
  --accent-gradient: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
  --glass-bg: rgba(25, 236, 10, 0.1);
  --glass-border: #19e80a00;
  --text-primary: #1a202c;
  --text-secondary: #4a5568;
  --text-light: #f7fafc;
  --white: #ffffff;
  --shadow-sm:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-premium: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Reset & Smooth Scroll */
html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  background-color: #fcfcfc;
  color: var(--text-primary);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: "Montserrat", sans-serif;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

/* Navbar */
header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  transition: all 0.4s ease;
  padding: 20px 0;
}

header.scrolled {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  padding: 10px 0;
}

.navbar {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  /* Nuevo estilo para logo sobre hero: fondo semi-transparente y desenfoque */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  padding: 10px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.logo-img {
  height: 60px;
  /* Ajustar segun necesidad */
  width: auto;
  transition: all 0.3s ease;

  /* Estado inicial: Color original (con blend mode para integrar fondo blanco), Fondo Transparente */
  filter: none;
  mix-blend-mode: multiply;
}

/* Estado Scrolled (Fondo Blanco): Texto Negro original, Fondo Transparente */
header.scrolled .logo {
  background: transparent;
  backdrop-filter: none;
  padding: 0;
}

header.scrolled .logo-img {
  height: 50px;
  filter: none;
  mix-blend-mode: multiply;
}

.nav-links {
  display: flex;
  gap: 2.5rem;
  mix-blend-mode: exclusion;
}

.nav-links a {
  font-weight: 600;
  color: #ffffff;
  position: relative;
}

/* Color override removed to allow mix-blend-mode to handle contrast */
/* .nav-links a::after inherits mix-blend-mode behavior indirectly or we keep it as is */

.nav-links a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -5px;
  left: 0;
  background: var(--accent-gradient);
  transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.mobile-menu-btn {
  display: none;
  font-size: 2rem;
  color: var(--white);
  cursor: pointer;
}

header.scrolled .mobile-menu-btn {
  color: var(--text-primary);
}

/* Hero Section */
.hero {
  height: 100vh;
  /* Background removed for video */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  padding: 0 20px;
  position: relative;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Gradient Overlay */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    /* background: linear-gradient(
    135deg,
    rgba(46, 50, 88, 0.85),
    rgba(44, 65, 87, 0.7)
  ); */
  background: none;
  z-index: -1;
}

.hero-content {
  max-width: 900px;
  z-index: 10;
}

.hero-text-wrapper {
  background: rgba(255, 255, 255, 0.2); /* White semi-transparent */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 15px 40px; /* Reduced vertical padding */
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
  display: inline-block;
  margin-bottom: 30px;
  color: var(--text-primary); /* Black text */
}

.hero h1 {
  font-size: 4rem;
  line-height: 1.1;
  margin-bottom: 15px; /* Slightly reduced */
  /* text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); */
  color: inherit;
}

.hero p {
  font-size: 2rem;
  margin-bottom: 0; /* Removed bottom margin */
  /* opacity: 0.9; */
  color: inherit;
  font-weight: 300;
}

.btn {
  display: inline-block;
  padding: 16px 40px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-primary {
  background: var(--accent-gradient);
  color: var(--white);
  border: none;
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: width 0.3s ease;
  z-index: -1;
}

.btn-primary:hover::before {
  width: 100%;
}

.btn-primary:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 210, 255, 0.4);
}

/* Scroll Down Indicator */
.scroll-down {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
  opacity: 0.7;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0) translateX(-50%);
  }

  40% {
    transform: translateY(-10px) translateX(-50%);
  }

  60% {
    transform: translateY(-5px) translateX(-50%);
  }
}

/* Services */
.section {
  padding: 120px 5%;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header h2 {
  font-size: 2.5rem;
  color: var(--text-primary);
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

.section-header h2::after {
  content: "";
  display: block;
  width: 50px;
  height: 4px;
  background: var(--accent-gradient);
  margin: 10px auto 0;
  border-radius: 2px;
}

.section-header p {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.service-card {
  background: var(--white);
  padding: 40px 30px;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  transition: all 0.4s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--accent-gradient);
  transition: height 0.3s ease;
  z-index: -1;
}

.service-card:hover::before {
  height: 100%;
}

.service-card:hover {
  transform: translateY(-15px);
  box-shadow: var(--shadow-premium);
}

.service-card:hover * {
  color: var(--white);
}

.service-card:hover .service-icon {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
}

.service-icon {
  width: 70px;
  height: 70px;
  background: rgba(0, 210, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #00d2ff;
  margin-bottom: 25px;
  transition: all 0.3s ease;
}

.service-card h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: var(--text-primary);
}

.service-card p {
  color: var(--text-secondary);
}

/* Preventive Maintenance Card Specifics */
.service-card.preventive-maintenance {
  background-image: url("../fotos_mantencion/trackball.jpeg");
  background-size: cover;
  background-position: center;
  position: relative;
  border: none;
  z-index: 1;
  /* Establish stacking context */
}

.service-card.preventive-maintenance::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  /* Dark overlay for readability */
  border-radius: 20px;
  z-index: -1;
  /* Behind content but above background image */
}

/* Ensure content sits above overlay */
.service-card.preventive-maintenance .card-content {
  position: relative;
  z-index: 2;
}

/* Override text colors for this dark card */
.service-card.preventive-maintenance h3,
.service-card.preventive-maintenance p {
  color: var(--white);
}

.service-card.preventive-maintenance .service-icon {
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Remove the accent top border animation for this specific card if preferred, 
   or keep it. If keeping, ensure it's visible. 
   The original .service-card::before is z-index: -1. 
   Our new ::after overlay is also z-index: -1. 
   We might need to adjust z-indices if conflicts arise, 
   but since they are stacked, let's see. 
   Actually, let's make sure the accent line is visible or remove it.
   It might look weird with the image. Let's hide the top accent line for this image card 
   to keep it clean, or keep it. Let's Keep it but make sure it works.
*/
.service-card.preventive-maintenance::before {
  z-index: 0;
  /* Above the overlay (which is -1 in this context? No wait) */
  /* The original .service-card establishes a stacking context? No. 
       .service-card has z-index: 1.
       .service-card::before has z-index: -1.
       
       If we make .preventive-maintenance establish a new stacking context (which it does via z-index:1),
       then its children/pseudos are relative to it.
       
       Let's simplify: 
       We want: Background Image < Dark Overlay < Content.
       AND the top accent line.
       
       Let's use a simpler approach for the overlay so we don't fight existing pseudos.
       We can stick the overlay on ::after.
    */
  z-index: -1;
}

/* Fix for overlay layer order:
   .service-card (parent)
      ::before (accent line, z=-1) -> This will be BEHIND the parent background? 
      Actually standard CSS: element background is painted, then negative z-index children/pseudos? 
      No, if parent implies stacking context, negative z-index children are behind the parent's generic background color, 
      but if parent has background image... 
      
      Let's simply use linear-gradient on the background-image for the overlay, 
      it saves a pseudo-element and z-index headaches.
*/

.service-card.preventive-maintenance {
  background:
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("../fotos_mantencion/trackball.jpeg");
  background-size: cover;
  background-position: center;
}

/* We don't need the ::after anymore with the gradient approach */
.service-card.preventive-maintenance::after {
  display: none;
}

/* Corrective Maintenance Card Specifics */
.service-card.corrective-maintenance {
  background:
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("../fotos_mantencion/ecografo.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
  border: none;
  z-index: 1;
}

.service-card.corrective-maintenance::after {
  display: none;
  /* Uniformity with preventive strategy */
}

/* Ensure content sits above overlay (reused logic but targeted specifically just in case) */
.service-card.corrective-maintenance .card-content {
  position: relative;
  z-index: 2;
}

/* Override text colors */
.service-card.corrective-maintenance h3,
.service-card.corrective-maintenance p {
  color: var(--white);
}

.service-card.corrective-maintenance .service-icon {
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.service-card.corrective-maintenance::before {
  z-index: -1;
}

/* About Section */
.about {
  background: #f8fafc;
  position: relative;
}

.about-container {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 60px;
}

.about-image {
  flex: 1;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-premium);
}

.about-image img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}

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

.about-text {
  flex: 1;
}

.about-text h3 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #004e92;
}

.about-text p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
  text-align: justify;
}

/* Contact */
.contact {
  background: var(--primary-gradient);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

/* Abstract shapes for background */
.contact::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -20%;
  width: 800px;
  height: 800px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 50%;
}

.contact-container {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.contact-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 50px;
  flex-wrap: wrap;
}

.contact-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 30px;
  border-radius: 15px;
  border: 1px solid var(--glass-border);
  flex: 1;
  min-width: 250px;
  transition: transform 0.3s;
}

.contact-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
}

.contact-item ion-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
  color: #00d2ff;
}

.contact-item h4 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

/* Footer */
footer {
  background: #000428;
  color: #a0aec0;
  text-align: center;
  padding: 40px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.social-links {
  margin-bottom: 20px;
}

.social-links a {
  color: var(--white);
  font-size: 1.5rem;
  margin: 0 10px;
  opacity: 0.7;
}

.social-links a:hover {
  opacity: 1;
  color: #00d2ff;
}

/* Brands Section */
.brands-section {
  padding: 60px 0;
  background: #ffffff;
  user-select: none;
  position: relative;
}

.brands-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 50px;
  /* Space for buttons */
  display: flex;
  align-items: center;
}

.brands-container {
  display: flex;
  flex-wrap: nowrap;
  /* Horizontal scrolling */
  gap: 60px;
  /* Increased gap */
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 20px 10px;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
  width: 100%;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.brands-container::-webkit-scrollbar {
  display: none;
}

.brands-container img {
  height: 90px;
  /* Increased size */
  width: auto;
  object-fit: contain;
  /* Original colors restored (d removed grayscale) */
  opacity: 1;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.brand-logo {
  height: 60px !important;
  /* Slightly smaller than 90px */
}

.brands-container img:hover {
  transform: scale(1.1);
}

.brand-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--white);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  color: var(--primary-color);
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.brand-nav:hover {
  background: var(--primary-gradient);
  color: var(--white);
}

.brand-nav.prev {
  left: 0;
}

.brand-nav.next {
  right: 0;
}

/* Update shadow variable if used or ensure shadow exists */
:root {
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Responsive */

@media (max-width: 968px) {
  .about-container {
    flex-direction: column;
  }

  .hero h1 {
    font-size: 3rem;
  }
}

@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    right: -100%;
    top: 0;
    height: 100vh;
    width: 70%;
    background: #000428;
    /* Solid dark background for mobile menu */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: right 0.4s ease;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
  }

  .nav-links.active {
    right: 0;
  }

  .mobile-menu-btn {
    display: block;
    z-index: 1001;
  }

  /* Close button style for mobile menu if needed, or reuse hamburguer */
}