/* ============================================= */
/* ========= ARCHIVO DE ESTILOS GLOBALES ========= */
/* ============================================= */

/* --- Reset y Configuraciones Base --- */
html {
  scroll-behavior: smooth;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Source Code Pro', monospace;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9ff;
  overflow-x: hidden;
}

/* --- Tipografía Global --- */
h1, h2, h3, h4, h5, h6, .card-title, .btn, .directions-column h3 {
  font-family: 'Montserrat', sans-serif;
}

/* --- Banner Promocional --- */
.promo-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #1D1D1B;
  color: #fff;
  height: 40px;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.promo-text-static {
  font-family: 'Source Code Pro', monospace;
  font-weight: 400;
  font-size: 14px;
  animation: fadeInOut 8s ease-in-out infinite;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 1; }
}

/* --- Contenedor Principal --- */
.container {
  width: 90%;
  max-width: 1100px;
  margin: auto;
}

/* --- Componente Botón Principal --- */
.btn {
  display: inline-block;
  background: #F25022;
  color: #fff;
  padding: 12px 25px;
  text-decoration: none;
  border-radius: 5px;
  transition: 0.3s;
  font-weight: 500;
}

.btn:hover {
  background: #d63e16;
}


/* ============================================= */
/* ============= CABECERA Y MENÚ =============== */
/* ============================================= */

.site-header {
  background-color: #fff;
  padding-top: 60px;
  padding-bottom: 30px;
  text-align: center;
}

.logo-link {
  display: block;
  position: relative;
  height: 80px;
  margin-bottom: 10px;
  text-decoration: none;
}

.site-header .logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  max-width: 300px;
  width: 70%;
  height: auto;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.site-header .logo.active {
  opacity: 1;
}

.nav-container {
  width: 90%;
  max-width: 1100px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 25px;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: #1D1D1B;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 10px 15px;
  position: relative;
  transition: color 0.3s ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  height: 2px;
  background-color: #F25022;
  transition: width 0.3s ease;
}

.nav-links a:hover::after {
  width: 50%;
}

.nav-links a:hover {
  color: #F25022;
}

#main-nav.nav-fixed {
  position: fixed;
  top: 40px;
  left: 0;
  width: 100%;
  background: rgba(29, 29, 27, 0.25);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 15px 0;
  z-index: 1000;
}

#main-nav.nav-fixed .nav-links a {
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}


/* ============================================= */
/* ======== BANNER (PÁGINAS INTERIORES) ======== */
/* ============================================= */

.reparaciones-banner {
  color: #fff;
  text-align: center;
  padding: 80px 20px;
  position: relative;
  overflow: hidden;
}

.banner-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Esta es la imagen <img> DENTRO del <picture> */
.banner-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Esto hace que la imagen cubra el espacio sin deformarse */
}

.reparaciones-banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.2);
  z-index: 1;
}

.reparaciones-banner .container {
    position: relative;
    z-index: 2;
}


/* ============================================= */
/* ========== FOOTER (VERSIÓN DEFINITIVA) ====== */
/* ============================================= */

/* 1. ESTILOS PARA EL CONTENEDOR (EL DIV) */
#main-footer {
  width: 100%;                 /* Ocupa todo el ancho de la pantalla */
  background: #1D1D1B;         /* El fondo oscuro va aquí */
  color: #fff;                 /* El color de texto por defecto va aquí */
  padding: 40px 20px 15px;     /* El espaciado exterior va aquí */
  box-sizing: border-box;      /* Importante para que el padding no afecte el ancho */
}

/* 2. ESTILOS PARA EL CONTENIDO (LA ETIQUETA <FOOTER> DE footer.html) */
footer {
  /* Le quitamos cualquier estilo de fondo que pudiera tener por error */
  background: none;
  padding: 0;

  /* La usamos SOLO para centrar el contenido dentro de la barra oscura */
  max-width: 1100px; /* El ancho máximo de tu contenido (como en el resto del sitio) */
  margin: 0 auto;    /* Esto la centra horizontalmente */
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
  text-align: center;
}

.footer-section h4 {
  margin-bottom: 10px;
  font-size: 1.1rem;
  color: #F25022;
}

/* Regla específica para que el color del párrafo sea el correcto */
footer .footer-section p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #ddd;
}

footer .footer-section a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}

footer .footer-section a:hover {
  color: #F25022;
}

footer .footer-copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #444;
  font-size: 0.85rem;
  color: #999;
}

.social-icons { margin-top: 10px; }
.social-icon { width: 30px; height: auto; transition: opacity 0.3s ease; }
.social-icon:hover { opacity: 0.8; }

/* ============================================= */
/* ============ BOTONES FLOTANTES ============== */
/* ============================================= */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  background-color: #538AE1;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 28px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  z-index: 1000;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  background-color: #4A78C1;
}

.whatsapp-icon {
  display: inline-block;
  transition: transform 0.2s ease-in-out;
}

.whatsapp-float:hover .whatsapp-icon {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

#scrollTopBtn {
  position: fixed;
  bottom: 90px;
  right: 20px;
  z-index: 1000;
  width: 60px;
  height: 60px;
  background: rgba(29, 29, 27, 0.25);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 28px;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

#scrollTopBtn:hover {
  background: rgba(29, 29, 27, 0.5);
  transform: scale(1.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

#scrollTopBtn.visible {
  opacity: 1;
  visibility: visible;
}

/* ============================================= */
/* ============ NOTIFICACIÓN TOAST ============= */
/* ============================================= */
.toast-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.toast-overlay:not(.hidden) {
  opacity: 1;
  visibility: visible;
}

.toast-content {
  background: #fff;
  padding: 25px 35px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.toast-overlay:not(.hidden) .toast-content {
  transform: scale(1);
}

.toast-content p {
  margin: 0;
  font-size: 1.1rem;
  color: #333;
}

/* ============================================= */
/* =========== MEDIA QUERIES GLOBALES ========== */
/* ============================================= */
@media (max-width: 768px) {
  .reparaciones-banner {
    aspect-ratio: 4 / 3; 
    height: auto;
    padding: 0;
    display: block;
  }

  .reparaciones-banner .container {
    position: absolute;
    top: 25%;
    left: 25px;
    width: calc(100% - 50px);
    margin: 0;
    padding: 0;
    text-align: left;
  }
  
  .site-header {
    padding-top: 50px;
    padding-bottom: 30px;
  }

  .site-header .logo-container {
    height: 60px;
  }

  .site-header .logo {
    max-width: 220px;
  }

  .nav-links a {
    font-size: 0.7rem;
    padding: 8px 10px;
    letter-spacing: 1px;
  }
}

@media (max-width: 576px) {
  .toast-content { 
    width: 90%; 
    padding: 20px; 
  }
}

.servicios-grid-section {
  padding: 80px 0;
  background-color: #f9f9ff;
}

.section-title {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #1D1D1B;
  margin-bottom: 50px;
}

.servicios-grid {
  display: grid;
  /* --- ORDEN PARA ESCRITORIOS --- */
  /* Aquí forzamos a que siempre haya 4 columnas iguales */
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.servicio-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 35px 30px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-top: 4px solid #F25022;
  display: flex;
  flex-direction: column;
}

.servicio-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}

.servicio-icon {
  margin-bottom: 20px;
  color: #F25022;
}

.servicio-icon svg {
  width: 50px;
  height: 50px;
}

.servicio-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1D1D1B;
  margin-bottom: 15px;
}

.servicio-description {
  font-family: 'Source Code Pro', monospace;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  flex-grow: 1; /* Esto es clave para que el botón se alinee abajo */
  margin-bottom: 25px;
}

.btn-servicio {
  margin-top: auto; /* Se alinea al fondo gracias al flex-grow del párrafo */
  width: 100%;
}

/* Ajustes para pantallas de celular */
@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
  }
  .servicios-grid {
    grid-template-columns: 1fr; /* Una sola columna en móviles */
  }
}

/* ============================================= */
/* ======== BOTÓN WHATSAPP INTERACTIVO ========= */
/* ============================================= */

/*
  CORRECCIÓN: Se eliminó la regla 'position: relative;'
  para permitir que la regla 'position: fixed;' 
  original de 'main.css' funcione correctamente.
*/

/* 2. El ícono de chat y los ojos se posicionan uno sobre otro */
.whatsapp-icon,
.whatsapp-eyes {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease-in-out;
}

/* 3. El ícono de chat es visible por defecto */
.whatsapp-icon {
  opacity: 1;
  font-size: 28px; /* Mantenemos el tamaño original */
  /* La transición de 'transform' original ya no es necesaria */
  transition: opacity 0.3s ease-in-out;
}

/* 4. Los ojos están ocultos por defecto */
.whatsapp-eyes {
  opacity: 0;
  display: flex;
  gap: 8px; /* Espacio entre los dos ojos */
  pointer-events: none; /* Evita que los ojos bloqueen el clic */
}

/* 5. Estilo de cada ojo (el globo ocular blanco) */
.eye {
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  position: relative;
  overflow: hidden; /* Evita que la pupila se "salga" */
}

/* 6. Estilo de la pupila (el círculo negro) */
.pupil {
  width: 8px;
  height: 8px;
  background: #1D1D1B; /* Tu color oscuro principal */
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centrada por defecto */
  
  /* Transición suave para el movimiento */
  transition: transform 0.1s ease-out; 
}

/* 7. Lógica de la animación (controlada por JS) */
/* Cuando JS agregue la clase .is-watching... */
.whatsapp-float.is-watching .whatsapp-icon {
  opacity: 0; /* Oculta el ícono de chat */
}

.whatsapp-float.is-watching .whatsapp-eyes {
  opacity: 1; /* Muestra los ojos */
}

/* ============================================= */
/* ============= ESTILOS DEL SUBMENÚ ============ */
/* ============================================= */

/* 1. Prepara el contenedor del submenú */
.nav-links .dropdown {
  position: relative; /* Permite que el submenú se posicione */
}

/* 2. Oculta el submenú por defecto */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; /* Justo debajo del botón "Servicios" */
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 15px rgba(0,0,0,0.1);
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 1001;
  overflow: hidden; /* Para que los bordes redondeados funcionen */
}

/* 3. Muestra el submenú al pasar el mouse sobre "Servicios" */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* 4. Estilo de cada enlace del submenú */
.dropdown-menu li a {
  display: block;
  padding: 12px 25px;
  color: #333; /* Color de texto normal */
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  white-space: nowrap; /* Evita que "Reparaciones" se parta en dos líneas */
  transition: all 0.3s ease;
}

/* 5. Efecto hover para los enlaces del submenú */
.dropdown-menu li a:hover {
  background-color: #f5f5f5;
  color: #F25022;
}

/* 6. Estilos para el submenú cuando la barra de nav está fija */
#main-nav.nav-fixed .dropdown-menu {
  /* Fondo oscuro y borroso, igual que la barra */
  background: rgba(29, 29, 27, 0.9);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#main-nav.nav-fixed .dropdown-menu li a {
  color: #fff; /* Texto blanco */
}

#main-nav.nav-fixed .dropdown-menu li a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #F25022; /* El color de énfasis se mantiene */
}


/* ============================================= */
/* ============= NAVEGACIÓN MÓVIL ============== */
/* ============================================= */

/* --- 1. El Botón de Hamburguesa --- */
#hamburger-btn {
  display: none; /* Oculto en escritorio */
  position: absolute;
  top: 75px; /* Ajusta esto para alinearlo con el logo */
  right: 20px;
  z-index: 1002;
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.hamburger-line {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #333;
  margin: 5px 0;
  transition: all 0.3s ease;
}

/* --- 2. El Panel Deslizante --- */
#mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  max-width: 300px;
  height: 100%;
  background-color: #fff;
  z-index: 10020;
  box-shadow: -5px 0 15px rgba(0,0,0,0.1);
  padding: 60px 0 20px;
  
  /* Oculto por defecto fuera de la pantalla */
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

#mobile-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 3rem;
  font-weight: 300;
  color: #aaa;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

/* --- 3. El Fondo Oscuro (Overlay) --- */
#mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 10010;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* --- 4. Estado Activo (controlado por JS) --- */
body.mobile-menu-active #mobile-nav {
  transform: translateX(0); /* Muestra el panel */
}

body.mobile-menu-active #mobile-menu-overlay {
  display: block;
  opacity: 1; /* Muestra el overlay */
}

/* --- 5. Enlaces del Menú Móvil --- */
.mobile-nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav-links a,
.mobile-submenu-toggle {
  display: block;
  padding: 15px 25px;
  color: #333;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  border-bottom: 1px solid #f0f0f0;
}

.mobile-submenu-toggle {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* --- 6. Submenú Móvil (Acordeón) --- */
.mobile-submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #f9f9f9;
  
  /* Oculto por defecto */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

.mobile-submenu a {
  font-size: 0.95rem;
  padding-left: 40px; /* Indentación */
  color: #555;
}

/* Estado activo del submenú (controlado por JS) */
.mobile-submenu-toggle.active + .mobile-submenu {
  max-height: 200px; /* Muestra el submenú */
}

.mobile-submenu-toggle .submenu-arrow {
  display: inline-block;
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}
.mobile-submenu-toggle.active .submenu-arrow {
  transform: rotate(90deg); /* Gira la flecha */
}


/* ============================================= */
/* ============= MEDIA QUERIES ================= */
/* ============================================= */

/* --- En pantallas de 768px o menos (móvil) --- */
@media (max-width: 768px) {
  
  /* Oculta la navegación de escritorio */
  #main-nav {
    display: none;
  }
  
  /* Muestra el botón de hamburguesa */
  #hamburger-btn {
    display: block;
  }
  
  /* Ajusta el logo en móvil */
  .site-header {
    padding-top: 60px; /* Más espacio para el banner promo */
    padding-bottom: 20px;
  }
}