/* Colores personalizados */
:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.15 0 0);
  --card: oklch(0.98 0 0);
  --card-foreground: oklch(0.15 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.15 0 0);
  --primary: #a81d12; /* Color principal del logo */
  --primary-hover: #8c190f; /* Versión más oscura para hover */
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9 0 0);
  --secondary-foreground: oklch(0.15 0 0);
  --muted: oklch(0.95 0 0);
  --muted-foreground: oklch(0.5 0 0);
  --accent: oklch(0.65 0.15 35);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.9 0 0);
  --input: oklch(0.95 0 0);
  --ring: oklch(0.556 0 0);
}

.dark {
  --background: oklch(0.05 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.08 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.08 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.55 0.15 15);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.15 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.15 0 0);
  --muted-foreground: oklch(0.8 0 0);
  --accent: oklch(0.65 0.15 35);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
}

/* Estilos base */
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
}

/* Estilos para menús */
/* Estilos para el menú de navegación principal */
.nav-link {
  color: #1f2937; /* text-gray-800 */
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #a81d12;
}

/* Estilos para el menú desplegable de servicios */
#servicios-dropdown-menu {
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

#servicios-dropdown-menu a {
  color: #374151;
  display: block;
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
}

#servicios-dropdown-menu a:hover {
  background-color: #a81d12;
  color: white;
}

/* Estilos para el menú móvil */
#mobile-menu a {
  color: #1f2937;
  display: block;
  padding: 0.5rem 0;
  transition: color 0.2s ease;
}

#mobile-menu a:hover {
  color: #a81d12;
}

/* Estilos para el enlace activo */
.active-nav-link {
  color: #a81d12;
  font-weight: 500;
  position: relative;
}

.active-nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #a81d12;
}

/* Estilos para botones con el color primario */
.btn-primary {
  background-color: #a81d12;
  color: white;
  transition: background-color 0.2s ease;
}

.btn-primary:hover {
  background-color: #8c190f;
}

/* Efecto hover para enlaces */
.hover-red-600:hover {
  color: #a81d12 !important;
}

/* Estilos para los enlaces del header */
header a:not(.btn):hover {
  color: #a81d12;
}

/* Estilos para el botón de servicios */
#servicios-dropdown-button:hover {
  color: #a81d12;
}

/* Estilos para el menú móvil */
#mobile-menu {
  background-color: white;
}

#mobile-menu a {
  color: #1f2937;
}

#mobile-menu a:hover {
  color: #a81d12;
}

.hero-overlay {
  background: rgba(0, 0, 0, 0.6);
}

.btn-primary {
  background-color: #22c55e; /* Este es un placeholder, se debe ajustar al color --primary */
  color: white;
  padding: 0.75rem 2rem;
  border-radius: 0.375rem;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background-color: #16a34a;
}

.btn-secondary {
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: white;
  padding: 0.75rem 1.75rem;
  border-radius: 0.375rem;
  transition: background-color 0.3s;
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}