/* VARIABLES DE DISEÑO */
/*
:root {
  --bg-color: #0d0d0d;
  --bg-darker: #050505;
  --card-bg: #1a1a1a;
  --gold: #d4af37;
  --gold-hover: #f1c40f;
  --white: #ffffff;
  --text-muted: #a0a0a0;
  --shadow-heavy: 0 15px 45px rgba(0, 0, 0, 0.9), 0 5px 15px rgba(0, 0, 0, 0.7);
  --shadow-gold: 0 10px 30px rgba(212, 175, 55, 0.2);
  --transition-global: all 0.4s ease-in-out;
}
*/
/* Definición de temas */
:root[data-theme="light"] {
  --bg-color: #f8f9fa;
  --bg-darker: #e9ecef;
  --card-bg: #ffffff;
  --gold: #b8860b; /* Un dorado con más contraste para fondo claro */
  --gold-hover: #996515;
  --white: #1a1a1a; /* Ahora funciona como color de texto principal */
  --text-muted: #6c757d;
  --shadow-heavy: 0 10px 30px rgba(0, 0, 0, 0.1);
  --shadow-gold: 0 10px 30px rgba(184, 134, 11, 0.15);
  --transition-global: all 0.4s ease-in-out;
  --form-input-bg: #e9ecef;
  --form-input-border: #dee2e6;
  --footer-label-color: #050505;
  --card-input-color: #050505;
  --card-border-services: #e9ecef;
  --card-border-bottom-services: #f1c40f;
  --header-color-h1: #ffffff;
  --hero-section-border-bottom: #f1c40f;
  --services-border-bottom-color: #b8860b;
  --black-deep: #0b0b0c;
}

:root[data-theme="dark"] {
  --bg-color: #0d0d0d;
  --bg-darker: #050505;
  --card-bg: #1a1a1a;
  --gold: #d4af37;
  --gold-hover: #f1c40f;
  --white: #ffffff;
  --text-muted: #a0a0a0;
  --shadow-heavy: 0 15px 45px rgba(0, 0, 0, 0.9), 0 5px 15px rgba(0, 0, 0, 0.7);
  --shadow-gold: 0 10px 30px rgba(212, 175, 55, 0.2);
  --transition-global: all 0.4s ease-in-out;
  --form-input-bg: #262626;
  --form-input-border: #333;
  --footer-label-color: #ffffff;
  --card-input-color: #ffffff;
  --card-border-services: #121923;
  --card-border-bottom-services: #2d2d02;
  --header-color-h1: #ffffff;
  --hero-section-border-bottom: gray;
  --services-border-bottom-color: #2d2d02;
  --black-deep: #0b0b0c;
}

/* Actualizar selectores para usar variables */
/* CONFIGURACIÓN GLOBAL */
body {
  background-color: var(--bg-color);
  color: var(--white);
  font-family: "Open Sans", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  transition:
    background-color 0.4s ease,
    color 0.4s ease; /* Transición suave de tema */
}

.form-label {
  background-color: transparent !important;
  color: var(--white) !important;
}
.form-control,
.form-select {
  background-color: var(--form-input-bg) !important;
  border: 1px solid var(--form-input-border) !important;
  color: var(--white) !important;
}

/* Estilos para el botón conmutador (opcional) */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

h1,
h2,
h3,
.navbar-brand,
.btn {
  font-family: "Montserrat", sans-serif;
}
.navbar-toggler-shadow {
  box-shadow: var(--shadow-heavy) !important;
}
.gold-text {
  color: var(--gold);
}

/* TRANSICIONES PARA TODOS LOS ELEMENTOS INTERACTIVOS */
a,
button,
.card,
.form-control,
.nav-link,
img {
  transition: var(--transition-global);
}

/* BARRA DE NAVEGACIÓN (FLAT DESIGN) */
.navbar {
  background-color: rgba(13, 13, 13, 0.98);
  border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.navbar-brand {
  font-size: clamp(0.83rem, 0.6882rem + 0.7089vw, 1.375rem) !important;
  font-weight: 700 !important;
}

.nav-link {
  font-weight: 600;
  padding: 0.5rem 1.2rem !important;
}

.nav-link:hover {
  color: var(--gold) !important;
  transform: scale(1.05); /* Efecto escala pedido */
}

.header-title-h1 {
  font-size: clamp(1.5rem, 0.2642rem + 6.1789vw, 6.25rem) !important;
  font-weight: 400 !important;
  color: var(--header-color-h1) !important;
}
.header-title-h6 {
  font-size: clamp(1.17rem, 0.824rem + 1.7301vw, 2.5rem) !important;
  font-weight: 900 !important;
  color: var(--header-color-h1) !important;
}
/* HERO SECTION     url("https://images.unsplash.com/photo-1589829545856-d10d557cf95f?auto=format&fit=crop&q=80&w=1600"); */
/* Configuración del Slider */
.hero-section {
  position: relative;
  min-height: 100vh;
  overflow-clip-margin: content-box;
  overflow: hidden;
  background-color: #000; /* Fondo de seguridad */
  height: 90vh;
  background:
    linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)),
    url("content/img/photo-ini.avif");
  background-size: cover;
  background-position: center center;
  object-fit: cover;
  /* filter: grayscale(100%); */
  border-bottom: 3px solid var(--hero-section-border-bottom) !important;
}

.hero-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.languages {
  display: flex;
  gap: 0.5rem;
}
.lang-button {
  background-color: var(--shadow-gold) !important;
  color: var(--shadow-gold) !important;
  background-color: transparent !important;
  font-size: 1.25rem;
  border: 1px solid var(--shadow-gold) !important;
  box-shadow: var(--shadow-gold);
  border-radius: 5px;
  cursor: pointer;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out; /* Velocidad del desvanecimiento */
}

.slide.active {
  opacity: 0.5; /* Opacidad de la foto (ajusta a 0.4 o 0.6 según prefieras) */
}

/* Capa oscura para mejorar legibilidad del texto */
.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2;
}

/* .hero-section {
  height: 90vh;
  background:
    linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)),
    url("content/img/photo-ini.avif");
  background-size: cover;
  background-position: center;
  border-bottom: 3px solid var(--hero-section-border-bottom) !important;
} */
.hero-button-border {
  border-radius: 10px !important;
}
.services-title-h2 {
  font-size: clamp(1.17rem, 0.824rem + 1.7301vw, 2.5rem) !important;
  font-weight: 500 !important;
}

.services-border-bottom {
  border-bottom: 3px solid var(--services-border-bottom-color) !important;
}
.services-card-border {
  padding: 20px !important;
  border: 3px solid var(--card-border-services) !important;
  border-radius: 10px !important;
}
.services-card-border-bottom-radius {
  border-radius: 10px !important;
  border-bottom: 3px solid var(--card-border-bottom-services) !important;
}
.services-card-border-bottom {
  border-radius: 10px !important;
}

/* TARJETAS DE PRODUCTO/SERVICIO (FLAT DESIGN + PROFUNDIDAD) */
.card {
  background-color: var(--card-bg);
  border: none;
  border-radius: 0;
  box-shadow: var(--shadow-heavy);
  overflow: hidden;
}

.img-container {
  overflow: hidden;
}

.card-img-top {
  filter: brightness(0.7);
  height: 220px;
  object-fit: cover;
}

/* EFECTOS HOVER TARJETAS E IMÁGENES */
.card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: var(--shadow-gold);
  background-color: var(--white) !important;
  color: var(--card-bg) !important;
}
.card:hover .card-img-top {
  filter: brightness(1.1); /* Efecto brillo pedido */
  transform: scale(1.1); /* Efecto zoom pedido */
  background-color: var(--white) !important;
  color: var(--card-bg) !important;
}
.card:hover .services-card-div-img-title-p {
  background-color: var(--white) !important;
  color: var(--card-bg) !important;
}
.card-text-color {
  color: var(--card-input-color) !important;
}
/* BOTONES */
.btn-primary {
  background-color: var(--gold);
  border: none;
  border-radius: 0;
  color: #000;
  font-weight: 700;
  box-shadow: var(--shadow-heavy);
}

.btn-primary:hover {
  background-color: var(--gold-hover);
  transform: scale(1.05); /* Efecto escala pedido */
  box-shadow: 0 20px 40px rgba(212, 175, 55, 0.4);
}

/* FORMULARIO */
.contact-section {
  background:
    linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)),
    url("content/img/ContactoImagenDeFondo.avif");
  background-size: cover;
  background-position: center;
}
.bg-darker {
  background-color: var(--bg-darker);
}

.contact-card {
  background-color: var(--card-bg);
  box-shadow: var(--shadow-heavy);
  border-top: 3px solid var(--gold);
}
.contact-button-border {
  border-radius: 10px !important;
}
.contact-label-color {
  background-color: transparent !important;
  color: var(--white) !important;
}
.contact-card-radius {
  border-radius: 10px !important;
}
.form-control,
.form-select {
  background-color: #262626;
  border: 1px solid #333;
  color: var(--white);
  border-radius: 0;
  padding: 0.8rem;
}

.form-control:focus {
  background-color: #333;
  border-color: var(--gold);
  color: white;
  box-shadow: none;
}
.footer-text-color {
  color: var(--footer-label-color) !important;
}
.footer-padding-bottom {
  padding-bottom: 100px !important;
}
/* ============================================================
   ESTILOS BOTÓN FLOTANTE WHATSAPP Y TELEFONO (AÑADIR AL FINAL)
   ============================================================ */

.whatsapp-float {
  position: fixed;
  width: 65px;
  height: 65px;
  bottom: 30px;
  right: 30px;
  background-color: #25d366; /* Color oficial WhatsApp */
  color: #fff;
  border-radius: 50%; /* Botón circular */
  text-align: center;
  /* Sombras pronunciadas solicitadas para profundidad */
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.5),
    0 5px 15px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000; /* Siempre por encima de todo */
  cursor: pointer;
  /* Transición global solicitada transition: all 0.4s ease-in-out */
  transition: all 0.4s ease-in-out !important;
}

/* Efectos Hover Solicitados: Escala y Sombra */
.whatsapp-float:hover {
  transform: scale(1.15) translateY(-5px); /* Escala pronunciada para este botón */
  background-color: #20ba5a; /* Un tono más oscuro al hover */
  box-shadow: 0 15px 40px rgba(37, 211, 102, 0.3);
  color: #fff;
}

/* Tooltip (Texto flotante) */
.whatsapp-tooltip {
  visibility: hidden;
  width: 140px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Aparece arriba del botón */
  right: 0;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: "Open Sans", sans-serif;
  box-shadow: var(--shadow-heavy);
}

.whatsapp-float:hover .whatsapp-tooltip {
  visibility: visible;
  opacity: 1;
}

/* Adaptabilidad para Móviles (Responsive) */
@media (max-width: 768px) {
  .navbar-toggler-shadow {
    box-shadow: var(--shadow-gold) !important;
  }
}

/* Adaptabilidad para Móviles (Responsive) */
@media (max-width: 768px) {
  .whatsapp-float {
    width: 55px;
    height: 55px;
    bottom: 20px;
    right: 20px;
  }
  .whatsapp-tooltip {
    display: none; /* Ocultar tooltip en móviles para no tapar contenido */
  }
}

/* ======================================================================= */
/* phone */

.phone-float {
  position: fixed;
  width: 65px;
  height: 65px;
  bottom: 30px;
  left: 30px;
  background-color: #e1c774; /* Color oficial WhatsApp */
  color: #000;
  border-radius: 50%; /* Botón circular */
  text-align: center;
  /* Sombras pronunciadas solicitadas para profundidad */
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.5),
    0 5px 15px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000; /* Siempre por encima de todo */
  cursor: pointer;
  /* Transición global solicitada transition: all 0.4s ease-in-out */
  transition: all 0.4s ease-in-out !important;
}

/* Efectos Hover Solicitados: Escala y Sombra */
.phone-float:hover {
  transform: scale(1.15) translateY(-5px); /* Escala pronunciada para este botón */
  background-color: #d4af37; /* Un tono más oscuro al hover */
  box-shadow: 0 15px 40px rgba(225, 199, 116, 0.3);
  color: #000;
}

/* Tooltip (Texto flotante) */
.phone-tooltip {
  visibility: hidden;
  width: 140px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Aparece arriba del botón */
  left: 0;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: "Open Sans", sans-serif;
  box-shadow: var(--shadow-heavy);
}

.phone-float:hover .phone-tooltip {
  visibility: visible;
  opacity: 1;
}

/* Adaptabilidad para Móviles (Responsive) */
@media (max-width: 768px) {
  .phone-float {
    width: 55px;
    height: 55px;
    bottom: 20px;
    left: 20px;
  }
  .phone-tooltip {
    display: none; /* Ocultar tooltip en móviles para no tapar contenido */
  }
}

/* phone */
/* ============================================================================== */
/* RESPONSIVE */
@media (max-width: 768px) {
  /* .hero-section h1 {
    font-size: 2.4rem;
  } */
  .navbar-nav {
    background: var(--bg-darker);
    padding: 1rem;
    margin-top: 1rem;
  }
}

/* ============================================================================== */

/* 
  font-size: clamp(2rem, -0.7317rem + 13.6585vw, 12.5rem) !important;
  font-weight: 900 !important;
  font-size: clamp(1.5rem, 0.2642rem + 6.1789vw, 6.25rem) !important;
  font-weight: 400 !important;
  font-size: clamp(1.5rem, 0.2642rem + 6.1789vw, 6.25rem) !important;
  font-weight: 200 !important;  
  font-size: clamp(1.17rem, 0.824rem + 1.7301vw, 2.5rem) !important;
  font-weight: 500 !important; 
  font-size: clamp(0.67rem, 0.5516rem + 0.5919vw, 1.125rem) !important;
  font-weight: 500 !important;
  font-size: clamp(0.83rem, 0.6882rem + 0.7089vw, 1.375rem) !important;
  font-weight: 700 !important;
*/