/* Paleta de colores personalizada basada en el logo 1.svg */
:root {
  /* Colores principales del logo */
  --orange-primary: #FF6600;
  --orange-light: #FF8A33;
  --orange-dark: #E55A00;
  
  /* Colores secundarios del logo */
  --gray-blue-dark: #293145;
  --gray-blue-medium: #3A4A5C;
  --gray-blue-light: #4A5A6B;
  
  /* Actualización de variables CSS existentes */
  --primary: 24 100% 50%; /* #FF6600 en HSL */
  --primary-foreground: 0 0% 100%;
  --secondary: 210 25% 20%; /* #293145 en HSL */
  --secondary-foreground: 0 0% 100%;
  --accent: 24 100% 60%; /* #FF8A33 en HSL */
  --accent-foreground: 0 0% 100%;
}

/* Sobrescribir colores específicos del CSS original */
.bg-\[\#005D89\] {
  background-color: var(--gray-blue-dark) !important;
}

.bg-\[\#1A8A9C\] {
  background-color: var(--gray-blue-medium) !important;
}

.text-\[\#005D89\] {
  color: var(--gray-blue-dark) !important;
}

.text-\[\#6EC5E6\] {
  color: var(--orange-primary) !important;
}

.hover\:text-\[\#1A8A9C\]:hover {
  color: var(--gray-blue-medium) !important;
}

.hover\:text-\[\#6EC5E6\]:hover {
  color: var(--orange-primary) !important;
}

/* Gradientes modernos */
.bg-gradient-to-br.from-\[\#6EC5E6\].via-\[\#41A7A6\].to-\[\#005D89\] {
  background-image: linear-gradient(to bottom right, var(--gray-blue-dark), var(--gray-blue-medium), var(--gray-blue-light)) !important;
}

/* Nuevos gradientes personalizados */
.gradient-orange {
  background: linear-gradient(135deg, var(--orange-primary), var(--orange-light));
}

.gradient-gray-blue {
  background: linear-gradient(135deg, var(--gray-blue-dark), var(--gray-blue-medium));
}

.gradient-mixed {
  background: linear-gradient(135deg, var(--orange-primary), var(--gray-blue-dark));
}

/* Botones con nueva paleta */
.btn-primary {
  background-color: var(--orange-primary);
  color: white;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--orange-dark);
}

/* Forzar colores en elementos específicos */
.bg-\[\#1A8A9C\] {
  background-color: var(--gray-blue-medium) !important;
}

.bg-\[\#005D89\] {
  background-color: var(--gray-blue-dark) !important;
}

.text-\[\#6EC5E6\] {
  color: var(--orange-primary) !important;
}

/* Títulos de secciones */
h2, h3, h4 {
  color: var(--gray-blue-dark) !important;
}

/* Títulos en modo oscuro */
.dark h2, 
.dark h3, 
.dark h4,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
  color: white !important;
}

/* Títulos específicos en modo oscuro */
.dark [class*="title"],
[data-theme="dark"] [class*="title"],
.dark h1:not([class*="logo"]),
[data-theme="dark"] h1:not([class*="logo"]) {
  color: white !important;
}

/* Títulos de tarjetas de valores en modo oscuro */
.dark [class*="card"] h3,
.dark [class*="Card"] h3,
.dark [class*="value"] h3,
.dark [class*="Value"] h3,
[data-theme="dark"] [class*="card"] h3,
[data-theme="dark"] [class*="Card"] h3,
[data-theme="dark"] [class*="value"] h3,
[data-theme="dark"] [class*="Value"] h3 {
  color: white !important;
}

/* Títulos de secciones en modo oscuro */
.dark [class*="section"] h2,
.dark [class*="section"] h3,
[data-theme="dark"] [class*="section"] h2,
[data-theme="dark"] [class*="section"] h3 {
  color: white !important;
}

/* Iconos de secciones */
[class*="icon"], 
[class*="Icon"],
svg {
  color: var(--orange-primary) !important;
}

/* Líneas divisorias */
hr, .divider, [class*="border"] {
  border-color: var(--orange-primary) !important;
}

/* Forzar estilos específicos para elementos que faltan en hosting */
/* Botón Contáctanos */
a[href*="contact"], 
button[class*="contact"],
.inline-flex[href*="contact"] {
  background-color: var(--gray-blue-medium) !important;
  color: white !important;
  border: none !important;
  padding: 0.75rem 2rem !important;
  border-radius: 0.5rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

a[href*="contact"]:hover,
button[class*="contact"]:hover,
.inline-flex[href*="contact"]:hover {
  background-color: white !important;
  color: var(--gray-blue-medium) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(26, 138, 156, 0.3) !important;
}

/* NO agregar líneas decorativas - ya existen en el CSS original */

/* Forzar colores en botones específicos */
.bg-\[\#1A8A9C\],
[class*="bg-\[\#1A8A9C\]"] {
  background-color: var(--gray-blue-medium) !important;
}

.bg-\[\#005D89\],
[class*="bg-\[\#005D89\]"] {
  background-color: var(--gray-blue-dark) !important;
}

/* Asegurar que los iconos se muestren */
[class*="icon"], 
[class*="Icon"],
svg {
  color: var(--orange-primary) !important;
}

/* Forzar estilos en elementos con clases específicas */
[class*="btn"],
[class*="button"] {
  transition: all 0.3s ease !important;
}

[class*="btn"]:hover,
[class*="button"]:hover {
  transform: translateY(-2px) !important;
}

/* Efectos hover adicionales */
.btn-primary:hover {
  background-color: var(--orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 102, 0, 0.3);
}

.btn-secondary {
  background-color: var(--gray-blue-dark);
  color: white;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background-color: var(--gray-blue-medium);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(41, 49, 69, 0.3);
}

/* Efectos modernos */
.modern-card {
  background: linear-gradient(145deg, #ffffff, #f8f9fa);
  border: 1px solid rgba(255, 102, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.modern-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(255, 102, 0, 0.15);
  border-color: var(--orange-primary);
}

/* Texto con gradiente */
.text-gradient-orange {
  background: linear-gradient(135deg, var(--orange-primary), var(--orange-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-gray {
  background: linear-gradient(135deg, var(--gray-blue-dark), var(--gray-blue-medium));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Bordes modernos */
.border-orange {
  border-color: var(--orange-primary);
}

.border-gray-blue {
  border-color: var(--gray-blue-dark);
}

/* Sin bordes para tarjetas de valores - integradas con el fondo */

[class*="card"]:hover,
[class*="Card"]:hover,
[class*="value"]:hover,
[class*="Value"]:hover,
[class*="grid"] > div:hover,
[class*="grid"] > article:hover {
  transform: translateY(-2px) !important;
}

/* Estilos específicos para tarjetas con iconos naranjas */
[class*="card"] svg,
[class*="Card"] svg,
[class*="value"] svg,
[class*="Value"] svg {
  color: var(--orange-primary) !important;
}

/* Contenedor principal del formulario de contacto con fondo blanco */
.bg-background.rounded-lg.p-8.shadow-md.border.border-border {
  background: white !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  padding: 2rem !important;
  border: none !important;
}

/* Título dentro del contenedor blanco */
.bg-background.rounded-lg h3 {
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
  color: var(--gray-blue-dark) !important;
}

/* Formulario interno sin fondo blanco adicional */
.bg-background.rounded-lg form {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Quitar bordes y fondos solo de la información de contacto (texto) */
[class*="información"]:not([class*="form"]):not([class*="Form"]),
[class*="Información"]:not([class*="form"]):not([class*="Form"]) {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Quitar bordes de contenedores de información de contacto (solo texto) */
[class*="información"]:not([class*="form"]):not([class*="Form"]) > div,
[class*="Información"]:not([class*="form"]):not([class*="Form"]) > div {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Footer - Link de contacto como link normal, no botón */
footer a[href*="contact"],
footer a[href*="Contact"] {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: inherit !important;
  text-decoration: none !important;
  display: inline !important;
}

footer a[href*="contact"]:hover,
footer a[href*="Contact"]:hover {
  background: none !important;
  transform: none !important;
  box-shadow: none !important;
  color: var(--orange-primary) !important;
}

/* Margen entre logo y texto en footer */
footer h2 + p,
footer h2 + div {
  margin-top: 1rem !important;
}

/* Sombras personalizadas */
.shadow-orange {
  box-shadow: 0 4px 20px rgba(255, 102, 0, 0.2);
}

.shadow-gray-blue {
  box-shadow: 0 4px 20px rgba(41, 49, 69, 0.2);
}

/* Animaciones suaves */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Estilos para el logo en el hero */
.hero-logo {
  height: 96px;
  width: auto;
  margin-bottom: 1rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  transition: transform 0.3s ease;
}

.hero-logo:hover {
  transform: scale(1.05);
}

/* Contenedor del logo y título */
.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
}

/* Título del hero con logo */
.hero-title-with-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-title-with-logo h1 {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin-top: 1rem;
}

/* Logo inline en títulos */
.logo-inline {
  height: 2rem;
  width: auto;
  margin-right: 0.5rem;
  vertical-align: middle;
  display: inline-block;
}

/* Responsive design mejorado */
@media (max-width: 768px) {
  .modern-card {
    margin: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
  
  .btn-primary, .btn-secondary {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }
  
  .hero-logo {
    height: 72px;
  }
  
  .logo-inline {
    height: 1.5rem;
  }
  
  .navbar-logo {
    height: 1.5rem;
  }
}

/* Logo en navbar - SOLO CSS */
header h1:first-of-type {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  position: relative;
  width: 6rem;
  height: 6rem;
  background-image: url('1.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  vertical-align: middle;
}

/* Logo en modo oscuro - blanco */
.dark header h1:first-of-type,
[data-theme="dark"] header h1:first-of-type {
  background-image: url('1-white.svg') !important;
}

/* Asegurar que el logo del navbar no sea clickeable */
header h1:first-of-type a {
  pointer-events: none !important;
  text-decoration: none !important;
}

/* Asegurar que otros h1 no tengan logo duplicado */
header h1:not(:first-of-type) {
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* Responsive para el logo del navbar */
@media (max-width: 768px) {
  header h1:first-of-type {
    width: 4rem;
    height: 4rem;
  }
}

/* Logo en el footer - SOLO EN FOOTER */
footer h2 {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  width: 8rem;
  height: 3rem;
  background-image: url('1-white.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  display: inline-block;
  vertical-align: middle;
}

/* Eliminar línea decorativa del logo del footer */
footer h2::after {
  display: none !important;
  content: none !important;
}


/* LÍNEAS DECORATIVAS NARANJAS - SOLO CSS */
h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: #FF6600;
  margin: 0.5rem auto 0 auto;
  border-radius: 2px;
}

/* Ocultar la línea duplicada del HTML */
.h-1.w-20.bg-primary.mx-auto {
  display: none !important;
}

/* Eliminar todas las líneas duplicadas */
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before,
h1::after,
h3::after,
h4::after,
h5::after,
h6::after {
  display: none !important;
  content: none !important;
}

/* Título "Nuestra Visión" en color naranja oscuro */
h3:contains("Visión"),
h3[class*="visión"],
h3[class*="vision"] {
  color: #E55A00 !important;
}

/* Forzar color naranja oscuro en text-accent */
.text-accent {
  color: #E55A00 !important;
}

/* Forzar color blanco para el texto "ES" en el selector de idioma */
.language-switcher span.text-white,
button[type="button"] span.text-white,
[class*="language"] span.text-white,
[class*="Language"] span.text-white {
  color: white !important;
}

/* Forzar color de fondo naranja claro en heading de "Nuestra Visión" */
h3:contains("Visión"),
h3[class*="visión"],
h3[class*="vision"],
[class*="visión"] h3,
[class*="vision"] h3,
div:has(h3:contains("Visión")),
div:has(h3[class*="visión"]),
div:has(h3[class*="vision"]),
[class*="card"]:has(h3:contains("Visión")),
[class*="Card"]:has(h3:contains("Visión")) {
  background-color: #FFE4CC !important;
}

/* Forzar fondo naranja en el contenedor del heading de Visión */
div:has(h3:contains("Visión")) > div:first-child,
[class*="card"]:has(h3:contains("Visión")) > div:first-child,
[class*="Card"]:has(h3:contains("Visión")) > div:first-child {
  background-color: #FFE4CC !important;
}

/* Sobrescribir la clase .bg-accent\/10 que aplica color azul */
.bg-accent\/10 {
  background-color: #FFE4CC !important;
}

/* Sobrescribir la clase .bg-primary */
.bg-primary {
  background-color: #FF6600 !important;
}

/* Forzar hover naranja en botón de idioma */
button[type="button"]:hover,
button[type="button"].hover\:bg-accent:hover,
button[type="button"]:hover.hover\:bg-accent {
  background-color: #FF6600 !important;
}

/* Borde fino naranja SOLO para tarjetas de valores específicas */
h3:contains("Cercanía"),
h3:contains("Innovación"),
h3:contains("Compromiso"),
h3:contains("Lealtad"),
h3:contains("Entregas Inteligentes"),
h3:contains("Productividad"),
h3:contains("Calidad") {
  border: 0.5px solid #f66502 !important;
  background: #ffffff !important;
  transition: all 0.3s ease !important;
}

/* Aplicar a los contenedores padre de los títulos */
h3:contains("Cercanía") + *,
h3:contains("Innovación") + *,
h3:contains("Compromiso") + *,
h3:contains("Lealtad") + *,
h3:contains("Entregas Inteligentes") + *,
h3:contains("Productividad") + *,
h3:contains("Calidad") + * {
  border: 0.5px solid #f66502 !important;
  background: #ffffff !important;
  transition: all 0.3s ease !important;
}

/* Borde gris claro para tarjetas de clientes */
#clients [class*="border"] {
    border-color: #dcdcdc !important;
}

/* Cambiar grosor de borde de 2px a 1px */
.border-2 {
    border-width: 1px !important;
}

/* Botones de contacto con gradiente naranja */
a[href*="contact"]:not(footer a),
button[class*="contact"]:not(footer button),
.inline-flex[href*="contact"]:not(footer .inline-flex),
button[type="submit"],
button:contains("Enviar"),
button:contains("enviar"),
button:contains("Enviar Mensaje"),
button:contains("enviar mensaje") {
  background: linear-gradient(135deg, #FF6600, #FF8A33) !important;
  color: white !important;
  border: none !important;
  padding: 0.75rem 2rem !important;
  border-radius: 0.5rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

a[href*="contact"]:not(footer a):hover,
button[class*="contact"]:not(footer button):hover,
.inline-flex[href*="contact"]:not(footer .inline-flex):hover,
button[type="submit"]:hover,
button:contains("Enviar"):hover,
button:contains("enviar"):hover,
button:contains("Enviar Mensaje"):hover,
button:contains("enviar mensaje"):hover {
  background: linear-gradient(135deg, #E55A00, #FF6600) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255, 102, 0, 0.3) !important;
}

/* Links de política de privacidad en naranja */
a[href*="privacidad"],
a[href*="privacy"],
a[href*="política"],
a[href*="politica"],
a:contains("Política de Privacidad"),
a:contains("política de privacidad"),
a:contains("Privacy Policy"),
a:contains("privacy policy") {
  color: #FF6600 !important;
  text-decoration: underline !important;
}

a[href*="privacidad"]:hover,
a[href*="privacy"]:hover,
a[href*="política"]:hover,
a[href*="politica"]:hover,
a:contains("Política de Privacidad"):hover,
a:contains("política de privacidad"):hover,
a:contains("Privacy Policy"):hover,
a:contains("privacy policy"):hover {
  color: #E55A00 !important;
}

/* Iconos de idioma en gris azulado oscuro - SOLO en navbar */
.language-switcher svg,
button[type="button"] svg.lucide-globe,
button[type="button"] svg[class*="globe"],
[class*="language"] svg,
[class*="Language"] svg {
  color: #293145 !important;
}

/* Iconos de servicios en naranja - excluir selector de idioma */
svg[class*="globe"]:not(.language-switcher svg):not(button[type="button"] svg) {
  color: #E55A00 !important;
}

/* Títulos en modo oscuro */
.dark h2,
.dark h3,
.dark h4,
.dark [class*="title"],
.dark [class*="card"] h3,
.dark [class*="section"] h2,
.dark [class*="section"] h3,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] [class*="title"],
[data-theme="dark"] [class*="card"] h3,
[data-theme="dark"] [class*="section"] h2,
[data-theme="dark"] [class*="section"] h3 {
  color: white !important;
}

/* Títulos de tarjetas de valores específicas en modo oscuro - forzar blanco */
[data-theme="dark"] div:has(h3:contains("Cercanía")) h3,
[data-theme="dark"] div:has(h3:contains("Innovación")) h3,
[data-theme="dark"] div:has(h3:contains("Compromiso")) h3,
[data-theme="dark"] div:has(h3:contains("Lealtad")) h3,
[data-theme="dark"] div:has(h3:contains("Entregas Inteligentes")) h3,
[data-theme="dark"] div:has(h3:contains("Productividad")) h3,
[data-theme="dark"] div:has(h3:contains("Calidad")) h3,
.dark div:has(h3:contains("Cercanía")) h3,
.dark div:has(h3:contains("Innovación")) h3,
.dark div:has(h3:contains("Compromiso")) h3,
.dark div:has(h3:contains("Lealtad")) h3,
.dark div:has(h3:contains("Entregas Inteligentes")) h3,
.dark div:has(h3:contains("Productividad")) h3,
.dark div:has(h3:contains("Calidad")) h3 {
  color: white !important;
}

/* SVG "Back to top" sin color naranja */
button[aria-label="Back to top"] svg {
  color: white !important;
  fill: none !important;
}

/* Forzar botones de envío en naranja - selectores específicos */
button[type="submit"],
button[class*="submit"],
button[class*="enviar"],
button[class*="send"],
input[type="submit"] {
  background: linear-gradient(135deg, #FF6600, #FF8A33) !important;
  background-color: #FF6600 !important;
  color: white !important;
  border: none !important;
  padding: 0.75rem 2rem !important;
  border-radius: 0.5rem !important;
  font-weight: 500 !important;
}

button[type="submit"]:hover,
button[class*="submit"]:hover,
button[class*="enviar"]:hover,
button[class*="send"]:hover,
input[type="submit"]:hover {
  background: linear-gradient(135deg, #E55A00, #FF6600) !important;
  background-color: #E55A00 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255, 102, 0, 0.3) !important;
}

/* Forzar links de privacidad en naranja - selectores específicos */
a[href*="privacidad"],
a[href*="privacy"],
a[href*="política"],
a[href*="politica"],
a[href*="policy"],
a[href*="legal"],
a[href*="terms"] {
  color: #FF6600 !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
}

a[href*="privacidad"]:hover,
a[href*="privacy"]:hover,
a[href*="política"]:hover,
a[href*="politica"]:hover,
a[href*="policy"]:hover,
a[href*="legal"]:hover,
a[href*="terms"]:hover {
  color: #E55A00 !important;
  text-decoration: underline !important;
}

/* Tarjeta de "Nuestra Visión" con bordes redondeados arriba */
[class*="visión"]:not([class*="form"]),
[class*="Visión"]:not([class*="form"]),
[class*="vision"]:not([class*="form"]),
[class*="Vision"]:not([class*="form"]) {
  border-radius: 0.75rem 0.75rem 0 0 !important;
  border: 1px solid var(--orange-primary) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 1.5rem !important;
}

/* Título "Nuestra Visión" en naranja oscuro */
[class*="visión"] h3,
[class*="Visión"] h3,
[class*="vision"] h3,
[class*="Vision"] h3 {
  color: var(--orange-dark) !important;
}

/* SVG del botón "Back to top" - solo este, sin color naranja */
button[aria-label="Back to top"] svg {
  color: white !important;
  fill: none !important;
}

/* Icono de cambio de idioma (globo) - gris azulado oscuro */
.language-switcher svg,
.locale-switcher svg,
svg[class*="globe"],
svg[class*="world"],
[class*="language"] svg,
[class*="Language"] svg,
button[type="button"] svg.lucide-globe {
  color: var(--gray-blue-dark) !important;
}

/* Responsive para el logo del footer */
@media (max-width: 768px) {
  footer h2::before {
    width: 6rem; /* Más pequeño en móviles */
    height: 2.5rem;
  }
}