/* ==========================================================================
   1. TIPOGRAFÍA CORPORATIVA Y REGLAS GLOBALES
   ========================================================================== */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: 'Roboto', Arial, sans-serif;
  color: #ffffff;
  line-height: 1.6;
  background-color: #000000; /* Fondo negro absoluto unificado */
  overflow-x: hidden; /* Evita desbordamientos laterales defectuosos */
}

@font-face {
  font-family: "bootstrap-icons";
  src: url("../fonts/bootstrap-icons.woff2") format("woff2"),
       url("../fonts/bootstrap-icons.woff") format("woff");
}

/* ==========================================================================
   2. NAVBAR (EFECTO BLUR ESMERILADO PREMIUM)
   ========================================================================== */
/*.navbar {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(6, 9, 17, 0.7) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.navbar .navbar-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
}

.navbar .navbar-brand .logo {
  height: 50px;
  width: auto;
}

.navbar .nav-link {
  color: #dcdcdc !important;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase; 
  letter-spacing: 0.5px;
  margin-right: 15px;
  display: flex;
  align-items: center;
  transition: color 0.3s ease;
}

.navbar .nav-link i {
  margin-right: 6px;
  font-size: 1rem;
  color: #ffffff;
}

.navbar .nav-link:hover {
  color: #0066ff !important; 
}

.navbar .btn-primary {
  background-color: #0066ff;
  color: #ffffff;
  border: none;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(0, 102, 255, 0.3);
  transition: all 0.3s ease;
}

.navbar .btn-primary:hover {
  background-color: #0052cc;
  transform: translateY(-1px);
}

.navbar-toggler {
  padding: 6px 10px;
  outline: none !important;
  box-shadow: none !important;
  border: 1px solid rgba(0, 102, 255, 0.4) !important;
  background-color: rgba(0, 102, 255, 0.08);
  transition: all 0.3s ease;
}

.navbar-toggler:hover, 
.navbar-toggler:focus {
  background-color: rgba(0, 102, 255, 0.15);
  border-color: #0066ff !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230066ff' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.dropdown-menu {
  background-color: #060911;
  border: 1px solid rgba(0, 102, 255, 0.2);
  border-top: 3px solid #0066ff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.dropdown-item {
  color: #dcdcdc !important;
  font-size: 0.8rem;
  padding: 10px 20px;
  text-transform: uppercase;
}

.dropdown-item:hover {
  background-color: #0066ff !important;
  color: #ffffff !important;
}

.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -5px; }
.dropdown-submenu:hover > .dropdown-menu { display: block; }
.dropdown-submenu > a::after { content: " ▶"; float: right; font-size: 0.7em; margin-top: 0.5em; }
*/
/* --- Tu estilo original (Conservado) --- */

.navbar {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(6, 9, 17, 0.7) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.navbar .navbar-brand { display: flex; flex-direction: column; align-items: flex-start; color: #fff; }
.navbar .navbar-brand .logo { height: 50px; width: auto; }
.navbar .nav-link { color: #dcdcdc !important; font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 15px; display: flex; align-items: center; transition: color 0.3s ease; }
.navbar .nav-link i { margin-right: 6px; font-size: 1rem; color: #ffffff; }
.navbar .nav-link:hover { color: #0066ff !important; }

/* --- Dropdown y Submenu (Integrado) --- */


.dropdown-menu {
  background-color: #060911;
  border: 1px solid rgba(0, 102, 255, 0.2);
  border-top: 3px solid #0066ff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  min-width: 220px; /* Ajusta este valor según necesites */
  width: max-content; /* Se adapta al contenido más largo automáticamente */
  white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
}

/* --- ESTA LÍNEA ELIMINA EL BORDE HORIZONTAL DE LOS SUBMENÚS --- */
.dropdown-menu .dropdown-menu {
  border-top: none !important;
}

.dropdown-item {
  color: #dcdcdc !important;
  font-size: 0.8rem;
  padding: 10px 20px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.dropdown-item:hover {
  background-color: #0066ff !important;
  color: #ffffff !important;
}

/* --- Ajuste específico para la jerarquía multinivel --- */
.dropdown-submenu { position: relative; }

/* Desktop: Menú lateral */
@media (min-width: 992px) {
  .dropdown-submenu > .dropdown-menu {
    top: 0;
    margin-top: -5px;
    display: none;
    left: 100%; /* Mantiene la posición lateral */
    margin-left: 0; /* Asegura que no haya margen extra que desplace el menú */
  }
  .dropdown-submenu:hover > .dropdown-menu { display: block; }
  
  /* Flecha limpia sin bordes */
  .dropdown-submenu > a::after { 
    content: " ▶"; 
    float: right; 
    font-size: 0.7em; 
    margin-top: 0.2em; 
    border: none !important; 
  }
}

/* Mobile: Menú desplegable integrado */
@media (max-width: 991.98px) {
  .dropdown-submenu > .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    border: none;
    border-left: 2px solid #0066ff;
    margin-left: 10px;
  }
  .dropdown-submenu > a::after { content: " ▼"; float: right; border: none !important; }
}



/********/
/* ==========================================================================
   RESETEO GLOBAL DE ESPACIOS MUERTOS (COMPACTACIÓN DE TODA LA WEB)
   ========================================================================== */
html, body, main, section, header, footer, article, aside {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
.container, .container-fluid, .row, .col, [class^="col-"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}
h1:last-child, h2:last-child, h3:last-child, p:last-child, .row:last-child {
    margin-bottom: 0 !important;
}

img, video, iframe, canvas {
    display: block !important;
    /* vertical-align: middle !important;  <-- VS Code te dice que esto no sirve aquí */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/*******/
/* ==========================================================================
   3. HERO SECCIÓN (FONDO DINÁMICO)
   ========================================================================== */
#hero {
  position: relative;
  height: 100vh;
  min-height: 600px; 
  overflow: hidden;
  display: flex;
  align-items: center;
  background-color: #000000;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30%, rgba(0, 0, 0, 0.4) 0%, rgba(6, 9, 17, 0.9) 100%);
  z-index: 1;
}

#hero .container-fluid {
  position: relative;
  z-index: 2;
}

.label-superior {
  color: #00aaff; 
  font-size: 0.95rem; 
  letter-spacing: 2px;
  font-weight: 700;
}

.main-title {
  font-size: 2.35rem !important; 
  line-height: 1.2;
  font-weight: 800;
  margin-top: 6px !important;
  margin-bottom: 12px !important;
}

.main-title span {
  color: #0066ff;
}

.linea-decorativa {
  width: 50px; 
  height: 3px; 
  background-color: #0066ff; 
  border: none; 
  opacity: 1;
  margin-bottom: 16px !important;
}

.desc-text {
  font-size: 1.1875rem !important; 
  max-width: 480px; 
  color: #ffffff;
  line-height: 1.5;
  margin-bottom: 24px !important;
}

.btn-cta, .btn-wapp, .btn-catalogo {
  font-size: 0.95rem !important;
  padding: 8px 16px !important; 
}

.btn-cta {
  background-color: #0066ff;
  border: none;
}

.btn-wapp {
  border-color: rgba(255,255,255,0.2);
}

.btn-wapp i {
  color: #25D366;
}

.btn-catalogo {
  border-color: rgba(255,255,255,0.2);
}

.stats-row {
  margin-top: -10px;
}

.stats-row i {
  color: #00aaff;
  font-size: 1.25rem !important;
}

.stats-row .fs-5 {
  font-size: 1rem !important; 
}

.stat-desc-camcase {
  font-size: 0.95rem; 
  color: #cccccc; 
  letter-spacing: 0.5px; 
}

.stat-number-upcase
{
  text-transform: uppercase;
}

.stat-desc {
  font-size: 0.95rem; 
  color: #cccccc; 
  letter-spacing: 0.5px; 
  text-transform: uppercase;
}

/* ==========================================================================
   4. CUADRO FLOTANTE DE COTIZACIÓN
   ========================================================================== */
   /* ==========================================================================
   ESTILOS GENERALES DEL FORMULARIO DE COTIZACIÓN (HERO)
   ========================================================================== */
#formulario-box-cotizacion {
  background: rgba(6, 9, 17, 0.8);
  backdrop-filter: blur(15px);        
  -webkit-backdrop-filter: blur(15px);
  padding: 20px 22px;                 
  border-radius: 12px;
  border: 1px solid rgba(0, 102, 255, 0.25); 
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
  max-width: 420px; /* Incrementado ligeramente para que quepa bien en col-lg-5 */
  width: 100%;
  margin-left: auto;                  
  
  /* INTEGRACIÓN FLEXBOX NATIVA (Evita saltos y desfases raros) */
  position: relative !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 100 !important;
  
  /* Transición ultra suave cuando se abre/cierra por JavaScript */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease, padding 0.4s ease !important;
  overflow: hidden !important;
}

/* Estado colapsado (Cuando está cerrado no rompe la rejilla ni empuja el texto) */
#formulario-box-cotizacion.collapsed {
  max-height: 58px !important; /* Altura ideal de la barra de título superior */
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

#formulario-box-cotizacion h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

#formulario-box-cotizacion h3 span {
  color: #0066ff;
}

#formulario-box-cotizacion p {
  font-size: 1rem;
  color: #c5cbd5;
  line-height: 1.3;
  margin-bottom: 14px;
}

#formulario-box-cotizacion .input-group {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  transition: all 0.3s ease;
}

#formulario-box-cotizacion .input-group-text {
  background-color: transparent;
  border: none;
  color: #a0aec0;
  font-size: 1.30rem;
  padding-left: 12px;
  padding-right: 6px;
}

#formulario-box-cotizacion .form-control,
#formulario-box-cotizacion .form-select {
  background-color: transparent !important;
  border: none;
  color: #ffffff !important;
  font-size: 1rem;
  padding: 8px 12px 8px 0px; 
}

#formulario-box-cotizacion .form-control::placeholder {
  color: #718096;
}

#formulario-box-cotizacion .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  color: #718096 !important;
}

#formulario-box-cotizacion .form-select:valid {
  color: #ffffff !important;
}

#formulario-box-cotizacion .form-select option {
  background-color: #060911;
  color: #fff;
}

#formulario-box-cotizacion textarea.form-control {
  min-height: 42px; 
  resize: none;
}

#formulario-box-cotizacion .input-group:focus-within {
  border-color: #0066ff;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
}

#formulario-box-cotizacion .input-group:focus-within .input-group-text {
  color: #0066ff;
}

#formulario-box-cotizacion .form-control:focus,
#formulario-box-cotizacion .form-select:focus {
  box-shadow: none;
  outline: none;
}

#formulario-box-cotizacion .btn-enviar {
  background-color: #0066ff;
  color: #ffffff;
  border: none;
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(0, 102, 255, 0.35);
  transition: all 0.2s ease-in-out;
}

#formulario-box-cotizacion .btn-enviar i {
  font-size: 1rem;
  order: 2; 
}

#formulario-box-cotizacion .btn-enviar:hover {
  background-color: #0052cc;
  box-shadow: 0 6px 22px rgba(0, 102, 255, 0.5);
  transform: translateY(-1px);
}

.privacy-text {
  font-size: 0.95rem;
  color: #a0aec0;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.privacy-text i {
  color: #22c55e;
  font-size: 1rem;
}


/* ==========================================================================
   5. TARJETAS DE SERVICIOS / SOLUCIONES
   ========================================================================== */
#servicios {
  background-color: #000000;
  padding: 40px 0;
}

#servicios .card-solucion {
  background: rgba(6, 9, 17, 0.6); 
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.06); 
  border-radius: 12px; 
  overflow: hidden; 
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#servicios .card-solucion .card-image-wrapper {
  position: relative;
  width: 100%;
  height: 120px; 
  overflow: visible; 
}

#servicios .card-solucion .card-img-top-custom {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  transition: transform 0.5s ease;
}

#servicios .card-solucion .icon-container {
  position: absolute;
  bottom: 12px; 
  left: 12px;    
  background-color: #060911; 
  border: 1px solid rgba(0, 102, 255, 0.4);
  width: 38px;
  height: 38px;
  border-radius: 8px; 
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2; 
  transition: all 0.3s ease;
}

#servicios .card-solucion .icon-container i {
  color: #0066ff; 
  font-size: 1.3rem;
}

#servicios .card-solucion .card-body-custom {
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

#servicios .card-solucion h4 {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.3;
  margin-top: 5px;
  margin-bottom: 8px;
  min-height: 34px; 
}

#servicios .card-solucion p {
  color: #8a94a6; 
  font-size: 1.30rem;
  line-height: 1.4;
  margin-bottom: 14px;
  flex-grow: 1; 
}

#servicios .card-solucion .btn-ver-mas {
  color: #0066ff; 
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s ease;
}

#servicios .card-solucion .btn-ver-mas i {
  font-size: 1rem;
  transition: transform 0.2s ease;
}

#servicios .card-solucion:hover {
  background: rgba(6, 9, 17, 0.9);
  border-color: rgba(0, 102, 255, 0.4);
  transform: translateY(-4px); 
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
}

#servicios .card-solucion:hover .card-img-top-custom {
  transform: scale(1.06);
}

#servicios .card-solucion:hover .icon-container {
  background-color: #0066ff;
  border-color: #0066ff;
  box-shadow: 0 0 10px rgba(0, 102, 255, 0.5);
}

#servicios .card-solucion:hover .icon-container i {
  color: #ffffff; 
}

#servicios .card-solucion:hover .btn-ver-mas {
  color: #00aaff; 
}

#servicios .card-solucion:hover .btn-ver-mas i {
  transform: translateX(3px); 
}

/* ==========================================================================
   6. SLIDER CONTINUO DE MARCAS ALIADAS
   ========================================================================== */
#aliados {
  background-color: #060911; 
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.texto-marcas-titulo {
  color: #8a94a6; 
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1.4;
  margin: 0;
  text-transform: uppercase;
}

.texto-marcas-titulo span {
  color: #ffffff; 
}

.contenedor-flex-slider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
}

.slider-logos-wrapper {
  flex-grow: 1; 
  position: relative;
  overflow: hidden;
  padding: 12px 0;
  background: linear-gradient(90deg, #060911 0%, transparent 8%, transparent 92%, #060911 100%);
}

.slider-logos-track {
  display: flex;
  /* Multiplicamos 9 logos por su tamaño (200px + 35px de gap) */
  width: calc((200px + 35px) * 18); 
  gap: 35px; 
  animation: scrollInfinito 22s linear infinite; 
}

.slide-logo {
  width: 200px; 
  height: 100px; 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; 
}

.slide-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1); 
  opacity: 0.5; 
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.slider-logos-wrapper:hover .slider-logos-track {
  animation-play-state: paused;
}

.slide-logo:hover img {
  opacity: 1;
}

.indicador-direccion-marcas {
  display: flex;
  align-items: center;
  color: #0066ff; 
  font-size: 1.30rem; 
  letter-spacing: -2px; 
  opacity: 0.7;
  padding-left: 10px;
  user-select: none;
  animation: pulsoFlechas 2s infinite ease-in-out; 
}

@keyframes scrollInfinito {
  0% { transform: translateX(0); }
  /* Nos desplazamos solo el ancho de los primeros 9 elementos (9 * 235px) */
  100% { transform: translateX(calc(-235px * 9)); }
}

@keyframes pulsoFlechas {
  0%, 100% { opacity: 0.5; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(3px); }
}

/* ==========================================================================
   7. SECCIÓN: ¿POR QUÉ DRONAMEX?
   ========================================================================== */
#v-porque-dronamex-section {
  background-color: #060b13 !important;
  padding: 80px 0 !important;
}

#v-porque-dronamex-section .container-v-porque-custom {
  max-width: 1320px !important;
}

.v-porque-title-wrapper {
  display: inline-block !important;
  position: relative !important;
  width: 100% !important;
}

.v-porque-main-title {
  font-size: 1.8rem !important;
  letter-spacing: 0.5px !important;
  font-family: 'Roboto', Arial, sans-serif !important;
  color: #ffffff !important;
}

hr.v-porque-hr-decorativo {
  margin: 12px 0 0 0 !important;
  opacity: 1 !important;
  border: none !important;
  height: 2px !important;
  background: linear-gradient(to right, #0066ff 0%, #0066ff 15%, rgba(255, 255, 255, 0.2) 15%, rgba(255, 255, 255, 0.2) 100%) !important;
}

.v-porque-item {
  display: flex !important;
  align-items: center !important; 
  justify-content: flex-start !important;
  margin-bottom: 35px !important;
  width: 100% !important;
}

.v-porque-icon-box {
  width: 50px !important;
  height: 50px !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 24px !important;
  flex-shrink: 0 !important; 
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%) !important;
  -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%) !important;
}

.v-porque-icon-box i {
  font-size: 1.4rem !important;
  color: #ffffff !important;
  display: inline-block !important;
}

.v-porque-content-box {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: left !important;
}

.v-porque-item-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}

.v-porque-item-desc {
  font-size: 0.95rem !important;
  color: #cccccc !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
}

.v-porque-video-placeholder {
  width: 100%;
  min-height: 300px;
}

/* ==========================================================================
   8. ESTILOS DE VIDEO DE REPRODUCCIÓN INTERNA
   ========================================================================== */
.v-porque-video-frame {
  position: relative;
  width: 100%;
  border-radius: 8px; 
  overflow: hidden; 
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.v-porque-video-player {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; 
}

.v-porque-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(6, 11, 19, 0.5); 
  z-index: 1;
  pointer-events: none; 
}

.v-porque-video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;         
  height: 44px;        
  background-color: rgba(6, 11, 19, 0.3); 
  border: 2px solid #ffffff; 
  border-radius: 50%; 
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: all 0.25s ease-in-out;
  pointer-events: none; 
}

.v-porque-video-play-btn i {
  font-size: 1.4rem;    
  color: #ffffff;
  transition: color 0.25s ease-in-out;
}

.v-porque-video-frame:hover .v-porque-video-play-btn {
  border-color: #0066ff; 
  background-color: rgba(0, 102, 255, 0.1); 
  transform: translate(-50%, -50%) scale(1.08); 
}

.v-porque-video-frame:hover .v-porque-video-play-btn i {
  color: #0066ff; 
}

.v-porque-video-text-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 30px 40px; 
  z-index: 2;
  text-align: left;
}

.v-porque-video-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  line-height: 1.2;
}

.v-porque-video-desc {
  font-size: 1rem;
  color: #c0c6cc; 
  line-height: 1.4;
  margin-bottom: 0;
}

/* ==========================================================================
   9. FOOTER INDUSTRIAL (.FOOTER-DRONAMEX)
   ========================================================================== */
.footer-dronamex {
  background-color: #060911; 
  color: #ffffff;
  font-family: 'Roboto', Arial, sans-serif; 
  padding: 40px 0 15px 0; 
  font-size: 13px; 
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 25px;
}

.footer-column {
  flex: 1;
  min-width: 170px;
}

.footer-column h3 {
  color: #ffffff;
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column ul li {
  margin-bottom: 8px; 
}

.footer-column ul li a {
  color: #8a94a6; 
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-column ul li a:hover {
  color: #0066ff; 
}

.brand-column {
  min-width: 200px;
}



/* ==========================================================================
   ESTILO OPTIMIZADO PARA EL LOGOTIPO DEL FOOTER
   ========================================================================== */
/* ==========================================================================
   ESTILO EQUILIBRADO PARA EL LOGOTIPO DEL FOOTER (MEDIDA JUSTA)
   ========================================================================== */
.logo-img {
  /* Bajado a la medida justa: un 20% más grande que el original, pero estético */
  max-width: 165px !important; 
  /* Mantenemos la altura libre para que no se aplaste */
  height: auto !important; 
  object-fit: contain !important; 
  margin-bottom: 12px !important;
  /* Eliminamos efectos raros para mantenerlo limpio y corporativo */
  transition: none !important; 
}

/**********************/
/* ==========================================================================
   ESTILOS CORREGIDOS Y BLINDADOS PARA REDES SOCIALES
   ========================================================================== */
   /* ==========================================================================
   ESTILOS CORREGIDOS Y BLINDADOS PARA REDES SOCIALES
   ========================================================================== */

.social-title {
  color: #ffffff !important;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.5px;
}

.social-icons {
  display: flex !important;
  align-items: center !important; 
  gap: 12px !important;           
}

.social-icons .icon-link {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  
  width: 40px !important; 
  height: 40px !important;
  
  background-color: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important; 
  color: #cbd5e1 !important; 
  border-radius: 50% !important;
  text-decoration: none !important;
  
  transition: all 0.25s ease-in-out !important;
}

/* ──── ¡ESTA ES LA CLAVE PARA EL CENTRADO DE LOS ÍCONOS! ──── */
.social-icons .icon-link i {
  display: inline-block !important;
  font-size: 1.1rem !important; 
  line-height: 1 !important;       /* Resetea la altura de línea de cualquier otra tipografía */
  margin: 0 !important;            /* Elimina márgenes fantasma que empujan el ícono */
  padding: 0 !important;           /* Elimina rellenos internos no deseados */
  text-align: center !important;   /* Fuerza el centrado horizontal de la fuente */
  width: auto !important;          /* Evita que el contenedor del ícono se estire */
  height: auto !important;
}

/* Efecto Hover */
.social-icons .icon-link:hover {
  background-color: #0066ff !important; 
  border-color: #0066ff !important;
  color: #ffffff !important;
  transform: translateY(-3px) !important; 
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3) !important; 
}
/**********************/


.contact-column {
  min-width: 220px;
}

.contact-info li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8a94a6;
}

.contact-info i {
  color: #0066ff; 
  width: 14px;
}

.btn-cotizacion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #0066ff; 
  color: #ffffff;
  padding: 8px 16px; 
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  margin-top: 15px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);
  transition: all 0.2s ease;
}

.btn-cotizacion:hover {
  background-color: #0052cc;
  transform: translateY(-1px);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 30px;
  padding-top: 15px;
}

.bottom-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: #626e82;
  font-size: 11px; 
}

.bottom-container a {
  color: #626e82;
  text-decoration: none;
  transition: color 0.2s ease;
}

.bottom-container a:hover {
  color: #ffffff;
}

.separator {
  margin: 0 6px;
  color: rgba(255, 255, 255, 0.1);
}




/* ==========================================================================
   10. DRON SEGUIDOR DE PUNTERO (SOLO COMPUTADORAS)
   ========================================================================== */
@media (pointer: fine) and (min-width: 1024px) {
    body, a, button, input, select, textarea, .btn {
        cursor: auto; 
    }
    
    a, button, .btn, [role="button"] {
        cursor: pointer;
    }

    .drone-pointer {
        width: 120px;         
        height: 120px;        
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none; /* Atraviesa la imagen para poder dar clics sin problemas */
        z-index: 9999999;     /* Vuela sobre todo el contenido */
        display: block;  
        will-change: transform; 
    }

    .drone-pointer img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }
}

/* Ocultar en móviles y tablets */
@media (pointer: coarse) or (max-width: 1023px) {
    .drone-pointer {
        display: none !important;
    }
}



/* ==========================================================================
   11. SECCIÓN: QUIÉNES SOMOS (PARALLAX SEGURO COHESIVO)
   ========================================================================== */
.quienes-somos-parallax-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #000;
    font-family: 'Roboto', Arial, sans-serif; /* Sincronizado a Roboto */
    z-index: 1;
}

.parallax-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.parallax-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qs-overlay-box {
    background-color: rgba(0, 0, 0, 0.40); 
    padding: 60px 15px;
    width: 100%;
    height: 100%;
}

.qs-contbox-overlay {
    background-color: rgba(0, 0, 0, 0.75); 
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.qs-contbox-pad50 {
    padding-top: 50px;   
    padding-bottom: 50px;
}

.qs-container {
    width: 100%;
    margin: 0 auto;
    color: #ffffff;
}

.qs-header { text-align: center; margin-bottom: 40px; }

.qs-badge {
    background: rgba(13, 110, 253, 0.15);
    border: 1px solid #0d6efd;
    color: #0d6efd;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 1rem;
    text-transform: uppercase;
}

.qs-header h2 { font-size: 2rem; margin: 10px 0; font-weight: 700; }

.qs-linea-decorativa {
    width: 50px; height: 4px; background-color: #0d6efd; margin: 0 auto; border-radius: 2px;
}

.qs-grid-main { display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px; }

.qs-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
    position: relative;
}

.qs-lead { font-size: 1.15rem; line-height: 1.5; margin-bottom: 15px; }
.qs-lead strong { color: #0d6efd; }
.qs-card p { font-size: 1rem; line-height: 1.6; color: #e2e8f0; transition: opacity 0.2s ease; }

.qs-bg-glow {
    position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(13, 110, 253, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.qs-grid-pilares { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.qs-pilar-item {
    background: rgba(255, 255, 255, 0.02);
    border-left: 4px solid rgba(13, 110, 253, 0.4); 
    border-radius: 0 8px 8px 0;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.qs-icon-wrapper {
    font-size: 1.5rem; 
    color: #0d6efd; 
    background: rgba(13, 110, 253, 0.1);
    width: 40px; 
    height: 40px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    border-radius: 50%;
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.qs-pilar-item h3 { margin: 0; font-size: 1.1rem; font-weight: 600; }

.qs-grid-enfoque { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.qs-card-enfoque { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 20px; }
.qs-mini-icon { font-size: 2rem; color: #0d6efd; margin-bottom: 15px; }
.qs-card-enfoque h3 { font-size: 1.5rem; margin: 0 0 10px 0; }
.qs-card-enfoque p { color: #cccccc; line-height: 1.6; margin: 0; }

.qs-valores-wrapper { text-align: center; margin-bottom: 40px; }
.qs-valores-wrapper h3 { font-size: 1.8rem; margin-bottom: 30px; }
.qs-grid-valores { display: flex; flex-direction: column; gap: 15px; }
.qs-valor-card { background: rgba(255, 255, 255, 0.02); border: 1px dashed rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 20px; position: relative; }
.qs-valor-num { position: absolute; top: 10px; right: 15px; font-size: 1.30rem; color: rgba(13, 110, 253, 0.6); font-weight: 700; }
.qs-valor-card h4 { margin: 0; font-size: 1.3rem; }

.qs-footer-links { text-align: center; margin-top: 30px; }
.qs-link-politicas { color: #cccccc; text-decoration: none; font-size: 1rem; display: inline-flex; align-items: center; gap: 5px; transition: color 0.3s; }
.qs-link-politicas:hover { color: #0d6efd; }





/**********/

/* ==========================================================================
   12. SECCIÓN: FICHA DE PRODUCTO PREMIUM (TOTALMENTE RESPONSIVE)
   ========================================================================== */
.prod-ficha-section {
    position: relative;
    width: 100%;
    /*background-color: #0b0f19; */
    background-color: #000000;
    font-family: 'Roboto', Arial, sans-serif;
    z-index: 5;
}

.prod-overlay-box {
    background-color: rgba(0, 0, 0, 0.65);
    padding: 30px 10px; /* Compacto en smartphones móviles */
    width: 100%;
}

.prod-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    color: #ffffff;
}

.prod-header {
    text-align: center;
    margin-bottom: 25px;
}

.prod-badge {
    background: rgba(13, 110, 253, 0.15);
    border: 1px solid #0d6efd;
    color: #0d6efd;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 1rem;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 1px;
}

.prod-header h2 {
    font-size: 1.8rem;
    margin: 12px 0 8px 0;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.prod-linea-decorativa {
    width: 55px;
    height: 4px;
    background-color: #0d6efd;
    margin: 0 auto;
    border-radius: 2px;
}

/* Distribución vertical base (Mobile) */
.prod-grid-top {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 35px;
}

/* ==========================================================================
   CONTENEDOR DE LA GALERÍA CON RECUADRO Y GLOW AZUL PREMIUM
   ========================================================================== */
.prod-image-wrapper {
    position: relative;
    background: rgba(13, 110, 253, 0.02); 
    border: 2px solid rgba(13, 110, 253, 0.4); 
    border-radius: 12px;
    padding: 10px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 1; 
    box-shadow: 0 0 15px rgba(13, 110, 253, 0.15),
                inset 0 0 12px rgba(13, 110, 253, 0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.prod-image-wrapper:hover {
    border-color: rgba(13, 110, 253, 0.7);
    box-shadow: 0 0 25px rgba(13, 110, 253, 0.3),
                inset 0 0 15px rgba(13, 110, 253, 0.15);
}

.prod-slider-container {
    position: relative;
    width: 100%;
    height: 260px; /* Altura controlada para pantallas de celulares */
    overflow: hidden;
    border-radius: 8px;
    z-index: 3;
    background: rgba(0, 0, 0, 0.3);
}

.prod-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.prod-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.prod-main-image {
    max-height: 85%;
    width: auto;
    object-fit: contain;
    position: relative;
    z-index: 3; 
    filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.6)); 
}

.prod-video-element {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* ==========================================================================
   REPRODUCTORES DE VIDEO RECIPIENTES (YOUTUBE TRADICIONAL VS SHORTS)
   ========================================================================== */
/* Contenedor Estándar Horizontal (16:9) */
.prod-youtube-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
}

.prod-youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Variante Especial: Contenedor para Shorts Verticales (9:16) */
.prod-youtube-container.prod-short-vertical {
    width: auto;
    height: 100%;
    aspect-ratio: 9 / 16; 
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   ESTILOS DE BOTONES INTERACTIVOS (LÍNEA AZUL NEÓN)
   ========================================================================== */
.prod-zoom-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(5, 8, 16, 0.75);
    border: 2px solid #0d6efd; 
    color: #0d6efd;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.25s ease;
    z-index: 10;
    box-shadow: 0 0 8px rgba(13, 110, 253, 0.3);
}

.prod-zoom-btn:hover {
    background: #0d6efd;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 15px #0d6efd;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(5, 8, 16, 0.6);
    border: 2px solid #0d6efd; 
    color: #0d6efd;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.25s ease;
    z-index: 5;
    box-shadow: 0 0 8px rgba(13, 110, 253, 0.3);
}

.slider-arrow:hover { 
    background: #0d6efd; 
    color: white;
    box-shadow: 0 0 15px #0d6efd;
}
.prev-arrow { left: 8px; }
.next-arrow { right: 8px; }

/* Sistema de Miniaturas (Thumbnails) */
.prod-thumbnails {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    width: 100%;
    justify-content: center;
    z-index: 4;
}

.thumb-item {
    width: 65px;
    height: 50px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
}

.thumb-item img { width: 100%; height: 100%; object-fit: contain; }
.thumb-item.active { border-color: #0d6efd; background: rgba(13, 110, 253, 0.1); box-shadow: 0 0 10px rgba(13, 110, 253, 0.3); }
.thumb-video-icon { font-size: 1.1rem; color: #e2e8f0; }
.thumb-item:nth-child(2) .thumb-video-icon { color: #3b82f6; } /* Video local */
.thumb-item:nth-child(3) .thumb-video-icon { color: #ff0000; } /* YouTube/Shorts */
.thumb-text { font-size: 0.725rem; color: #cccccc; text-transform: uppercase; }

.prod-image-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px; 
    height: 220px;
    background: radial-gradient(circle, rgba(13, 110, 253, 0.15) 0%, transparent 70%);
    z-index: 2; 
    pointer-events: none; 
}

/* ==========================================================================
   TARJETA COMERCIAL Y SECCIÓN DE PRECIOS
   ========================================================================== */
.prod-card-resumen {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
}

.prod-lead {
    font-size: 1.30rem;
    line-height: 1.6;
    color: #cccccc;
    margin-bottom: 15px;
}

.prod-tags-destacados {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.prod-tags-destacados span {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 1rem;
    color: #e2e8f0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.prod-tags-destacados sup {
    color: #3b82f6;
    font-size: 1rem;
}

.prod-price-notice {
    display: block;
    font-size: 1rem;
    color: #94a3b8;
    margin-bottom: 12px;
    font-style: italic;
    text-align: center;
}

/* Corrección de estilos del botón para móviles */
.btn-prod-comprar {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0d6efd;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    
    /* REDUCCIÓN DE PADDING EN MÓVIL */
    padding: 8px 16px; /* 8px arriba/abajo, 16px lados */
    
    border-radius: 8px;
    width: 100%;
    
    /* REDUCCIÓN DE TAMAÑO DE FUENTE EN MÓVIL */
    font-size: 1rem; /* Aproximadamente 16px */
    
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
    transition: all 0.2s ease;
    
    /* IMPORTANTE: Corrige la altura del botón si la línea es muy alta */
    line-height: 1.2;
}

/* Icono dentro del botón, reduce el tamaño y la separación */
.btn-prod-comprar i {
    font-size: 0.9rem;
    margin-right: 6px; /* Separa el icono del texto */
}

/* Opcional: Ajuste del texto descriptivo para que no se vea tan alto */
.cat-card-desc {
    font-size: 0.9rem;
    line-height: 1.4; /* Ajusta la altura de línea para que se vea más compacto */
    margin-bottom: 12px;
}

/* Estilos específicos para pantallas grandes (Desktop) */
@media (min-width: 992px) {
    .btn-prod-comprar {
        padding: 12px 20px;
        font-size: 1.2rem;
    }
}

/* ==========================================================================
   TABLA DE ESPECIFICACIONES TÉCNICAS Y NOTAS AL PIE
   ========================================================================== */
.prod-specs-wrapper { 
    margin-bottom: 30px; 
}

.prod-specs-wrapper h3 { 
    font-size: 1.3rem; 
    margin-bottom: 15px; 
    font-weight: 600; 
}

.prod-table-responsive { 
    width: 100%; 
    overflow-x: auto; 
    border-radius: 12px; 
    border: 1px solid rgba(255, 255, 255, 0.1); 
}

.prod-specs-table { 
    width: 100%; 
    border-collapse: collapse; 
    background: rgba(255, 255, 255, 0.02); 
    text-align: left; 
    font-size: 1.30rem; 
}

.prod-specs-table thead th { 
    background-color: rgba(13, 110, 253, 0.85); 
    color: #ffffff; 
    padding: 12px 15px; 
    font-weight: 600; 
    font-size: 1.30rem; 
}

.prod-specs-table tbody tr { 
    border-bottom: 1px solid rgba(255, 255, 255, 0.06); 
}

.prod-specs-table tbody tr:nth-child(even) { 
    background-color: rgba(255, 255, 255, 0.01); 
}

.prod-specs-table td { 
    padding: 12px 15px; 
    line-height: 1.4; 
    vertical-align: middle; 
}

.spec-label { 
    font-weight: 600; 
    color: #94a3b8; 
    width: 40%; 
    min-width: 140px; 
}

.spec-highlight { 
    color: #3b82f6; 
    font-weight: 600; 
}

.prod-specs-table td sup {
    color: #3b82f6;
    font-weight: bold;
}

/* Caja de Notas Aclaratorias de Datos Avanzados (PDF) */
.prod-specs-notes {
    margin-top: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.01);
    border-radius: 8px;
    border-left: 3px solid rgba(13, 110, 253, 0.5);
}

.prod-specs-notes p {
    font-size: 1rem;
    line-height: 1.5;
    color: #cccccc;
    margin: 0 0 8px 0;
}

.prod-specs-notes p strong {
    color: #94a3b8;
}

.prod-specs-notes p:last-child { 
    margin-bottom: 0; 
}

/* ==========================================================================
   BLOQUE DE COBERTURA (DJI CARE)
   ========================================================================== */
.prod-incluye-box { 
    background: rgba(13, 110, 253, 0.04); 
    border: 1px dashed rgba(13, 110, 253, 0.3); 
    border-radius: 12px; 
    padding: 20px; 
}

.prod-incluye-box h4 { 
    margin: 0 0 10px 0; 
    color: #0d6efd; 
    font-size: 1.1rem; 
    font-weight: 600; 
}

.prod-care-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 15px 0;
}

.prod-care-grid p {
    margin: 0;
    font-size: 1.125rem;
    color: #cccccc;
    line-height: 1.4;
}

.prod-care-grid p strong {
    color: #3b82f6;
}

.prod-care-footer {
    border-top: 1px solid rgba(13, 110, 253, 0.15);
    padding-top: 12px;
    margin-top: 5px;
}

.prod-care-footer p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #cccccc;
}

.prod-care-footer i {
    color: #10b981;
    margin-right: 4px;
}

/* ==========================================================================
   VENTANA EMERGENTE POPUP LIGHTBOX CON INTERNAVEGACIÓN INTERNA
   ========================================================================== */
.prod-lightbox-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 8, 16, 0.96);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
}

/* El contenedor ahora es invisible y flexible para no generar desfasado exterior */
.lightbox-content {
    position: relative;
    width: 75%; 
    max-width: 900px;
    max-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    animation: popupScaleUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* El contorno neón inteligente se autoajusta de manera nativa al recurso cargado */
.lightbox-content img, 
.lightbox-content video,
.lightbox-content .popup-youtube {
    max-width: 100%;
    max-height: 65vh;
    object-fit: contain;
    border-radius: 12px;
    border: 2px solid #0d6efd; 
    box-shadow: 0 0 25px rgba(13, 110, 253, 0.4), 
                0 0 50px rgba(13, 110, 253, 0.15);
}

.lightbox-content .popup-youtube {
    width: 100%;
    aspect-ratio: 16/9;
}

/* Comportamiento Adaptativo del Short Vertical en el Popup */
.lightbox-content .prod-short-vertical {
    width: auto;
    height: 65vh;
    aspect-ratio: 9 / 16;
}

@keyframes popupScaleUp {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 25px;
    color: #0d6efd; 
    font-size: 2rem;
    transition: all 0.2s ease;
    cursor: pointer;
    z-index: 10005;
    text-shadow: 0 0 6px rgba(13, 110, 253, 0.6);
}

/* Flechas Laterales del Popup */
.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(5, 8, 16, 0.7);
    border: 2px solid #0d6efd; 
    color: #0d6efd;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    transition: all 0.25s ease;
    z-index: 10001;
    box-shadow: 0 0 10px rgba(13, 110, 253, 0.3);
}

.lightbox-arrow:hover {
    background: #0d6efd;
    color: white;
    box-shadow: 0 0 18px #0d6efd;
    transform: translateY(-50%) scale(1.1);
}

.lightbox-prev { left: 15px; }
.lightbox-next { right: 15px; }

/* Ajustes especiales en smartphones (Mobile Slim) */
@media (max-width: 576px) {
    .lightbox-content { width: 95%; }
    .lightbox-arrow {
        width: 38px;
        height: 38px;
        font-size: 1.30rem;
        background: rgba(13, 110, 253, 0.9);
        color: white;
    }
    .lightbox-prev { left: 10px; }
    .lightbox-next { right: 10px; }
}

/* ==========================================================================
   MEDIA QUERIES: OPTIMIZACIÓN TABLETS (768px en adelante)
   ========================================================================== */
@media (min-width: 768px) {
    .prod-overlay-box { padding: 45px 25px; }
    .prod-header h2 { font-size: 2rem; }
    
    /* Grid de dos columnas en Tablet */
    .prod-grid-top {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 25px;
    }
    
    .prod-slider-container { height: 350px; } 
    .thumb-item { width: 75px; height: 58px; }
    .prod-lead { font-size: 1.05rem; }
    .prod-price-notice { text-align: left; }
    .prod-specs-wrapper h3 { font-size: 1.4rem; }
    
    /* Plan Care horizontalizado en pantallas medianas */
    .prod-care-grid { grid-template-columns: repeat(3, 1fr); }
    
    .lightbox-content { width: 80%; padding: 0; }
    .lightbox-close { top: 25px; right: 35px; font-size: 2.2rem; }
    .lightbox-close:hover { color: #ffffff; transform: scale(1.15) rotate(90deg); text-shadow: 0 0 12px #ffffff; }
    
    .lightbox-prev { left: 30px; }
    .lightbox-next { right: 30px; }
}

/* ==========================================================================
   MEDIA QUERIES: OPTIMIZACIÓN DESKTOP / COMPUTADORAS (1024px en adelante)
   ========================================================================== */
@media (min-width: 1024px) {
    .prod-overlay-box { padding: 60px 0; }
    .prod-header h2 { font-size: 2.4rem; }
    .prod-grid-top { grid-template-columns: 1.25fr 1fr; gap: 40px; }
    .prod-slider-container { height: 420px; } 
    .prod-image-glow { width: 320px; height: 320px; }
    .prod-lead { font-size: 1.15rem; margin-bottom: 25px; }
    .prod-specs-table { font-size: 1rem; }
    .prod-specs-table thead th { padding: 15px 20px; font-size: 1.1rem; }
    .prod-specs-table td { padding: 14px 20px; }
    .prod-incluye-box { padding: 25px; }
    .prod-incluye-box h4 { font-size: 1.2rem; }
}


/*********/




/* ==========================================================================
   13. ADAPTABILIDAD GENERAL Y RESPONSIVE (MEDIA QUERIES)
   ========================================================================== */
@media (max-width: 1200px) {
  #servicios .card-solucion h4 {
    min-height: auto; 
  }
}

/* Pantallas medianas y tablets */
@media (max-width: 992px) {
  #hero {
    height: auto;
    padding: 120px 0 60px 0; 
  }
  .main-title {
    font-size: 2rem !important; 
  }
  #formulario-box-cotizacion {
    max-width: 100%;
    margin: 30px auto 0 auto; 
  }
  
  .navbar-collapse {
    background: rgba(6, 9, 17, 0.98) !important; 
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 20px;
    margin-top: 12px;
    border-radius: 8px;
    border: 1px solid rgba(0, 102, 255, 0.2);
    border-top: 3px solid #0066ff; 
  }
  
  .navbar .nav-link {
    margin-right: 0;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  
  .dropdown-menu {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: none;
    border-left: 2px solid #0066ff !important; 
    border-radius: 0;
    padding-left: 15px;
    box-shadow: none;
  }
  
  .navbar .btn-primary {
    margin-top: 15px;
    width: 100%;
    justify-content: center;
  }
  
  .footer-container {
    gap: 30px 15px;
  }
  .footer-column {
    flex: calc(33.33% - 15px);
  }
  
  .v-porque-video-frame {
    margin-top: 30px;
  }
} 

/* Pantallas de Celulares */
@media (max-width: 768px) {
  .footer-column {
    flex: calc(50% - 15px);
  }
  .bottom-container {
    flex-direction: column;
    text-align: center;
    gap: 5px;
  }
  
  .v-porque-main-title {
    font-size: 1.4rem !important;
  }
  hr.v-porque-hr-decorativo {
    background: linear-gradient(to right, #0066ff 0%, #0066ff 25%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 100%) !important;
  }
  .v-porque-item {
    margin-bottom: 24px !important;
  }
  .v-porque-icon-box {
    width: 42px !important;
    height: 42px !important;
    margin-right: 16px !important;
  }
  .v-porque-icon-box i {
    font-size: 1.2rem !important;
  }
  .v-porque-item-title {
    font-size: 1.05rem !important;
  }
  .v-porque-item-desc {
    font-size: 1rem !important;
  }
  
  .v-porque-video-title {
    font-size: 1.2rem;
  }
  .v-porque-video-desc {
    font-size: 1rem;
  }
  .v-porque-video-text-content {
    padding: 20px 25px;
  }
  .v-porque-video-play-btn {
    width: 60px;
    height: 60px;
  }
  .v-porque-video-play-btn i {
    font-size: 2.5rem;
  }
}

@media (max-width: 480px) {
  .footer-column {
    flex: 100%;
  }
  .footer-dronamex {
    padding: 30px 0 15px 0;
  }
}

/* Computadoras y Pantallas Grandes (Desktop >= 1024px) */
@media (min-width: 1024px) {
    .qs-container { max-width: 1200px; padding: 0 20px; }
    .qs-header { margin-bottom: 60px; }
    .qs-header h2 { font-size: 2.8rem; }
    .qs-linea-decorativa { width: 60px; }
    
    .qs-grid-main { 
        display: grid; 
        grid-template-columns: 1.6fr 1fr; 
        gap: 30px; 
        margin-bottom: 40px; 
    }
    
    .qs-card { border-radius: 16px; padding: 40px; backdrop-filter: blur(5px); }
    .qs-lead { font-size: 1.4rem; }
    .qs-card p { font-size: 1.30rem; }
    
    .qs-grid-pilares { gap: 20px; }
    .qs-pilar-item { padding: 20px; border-radius: 0 12px 12px 0; }
    
    .qs-pilar-item:hover { 
        background: rgba(13, 110, 253, 0.08); 
        border-left-color: #0d6efd; 
    }
    
    .qs-pilar-item:hover .qs-icon-wrapper {
        transform: scale(1.05);
        background: rgba(13, 110, 253, 0.2);
    }
    
    .qs-icon-wrapper { font-size: 1.8rem; width: 50px; height: 50px; }
    .qs-pilar-item h3 { font-size: 1.25rem; }
    
    .qs-grid-enfoque { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 60px; }
    .qs-card-enfoque { border-radius: 16px; padding: 30px; transition: transform 0.3s ease; }
    .qs-card-enfoque:hover { transform: translateY(-5px); border-color: rgba(13, 110, 253, 0.4); }
    
    .qs-grid-valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .qs-valor-card { border-radius: 12px; padding: 25px; }

    .quienes-somos-parallax-section {
        perspective: 1px;
        height: auto;
    }

    .parallax-video-bg video {
        position: fixed; 
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 100vh;
        width: 100%;
    }

    .qs-overlay-box {
        padding: 100px 0;
        position: relative;
        z-index: 2;
    }

    .prod-overlay-box {
        padding: 80px 0;
    }

    .prod-container {
        max-width: 1200px;
        padding: 0 20px;
    }

    .prod-header h2 {
        font-size: 3rem;
    }

    .prod-grid-top {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 40px;
        margin-bottom: 50px;
    }

    .prod-image-wrapper {
        padding: 40px;
        height: 100%;
    }




/* ==========================================================================
   12. SECCIÓN: FICHA DE PRODUCTO PREMIUM (ESTILOS UNIFICADOS Y COMPACTOS)
   ========================================================================== */
.prod-ficha-section {
    position: relative;
    width: 100%;
    /*background-color: #0b0f19; */
    background-color: #000000;
    font-family: 'Roboto', Arial, sans-serif;
    z-index: 5;
}

.prod-overlay-box {
    background-color: rgba(0, 0, 0, 0.65);
    padding: 40px 15px; /* Reducido para compactar */
    width: 100%;
}

.prod-container-boxing {
    width: 100%;
    margin: 0 auto;
    /*background-color: #ffffff;
    color: #000000;*/
}
.prod-container {
    width: 100%;
    margin: 0 auto;
    color: #ffffff;
}

.prod-header {
    text-align: center;
    margin-bottom: 25px; /* Menor espacio */
}

.prod-badge {
    background: rgba(13, 110, 253, 0.15);
    border: 1px solid #0d6efd;
    color: #0d6efd;
    padding: 4px 10px; /* Más compacto */
    border-radius: 20px;
    font-size: 0.95rem; /* Tamaño unificado a textos chicos */
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 1px;
}

.prod-flag {
    width: 16px;
    height: auto;
    border-radius: 2px;
}

.prod-header h2 {
    font-size: 1.6rem; /* Reducido sustancialmente para igualar otros títulos */
    margin: 8px 0 6px 0;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.prod-linea-decorativa {
    width: 50px;
    height: 3px;
    background-color: #0d6efd;
    margin: 0 auto;
    border-radius: 2px;
}

.prod-grid-top {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.prod-image-wrapper {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 1; 
}

/* Busca y reemplaza estas clases en tu css/estilos.css */

.prod-main-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 3; 
    filter: none !important; /* Quitamos la sombra de la silueta por completo */
}

.prod-image-glow {
    display: none !important; /* Apagamos por completo el resplandor del fondo */
}

/*
.prod-main-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 3; 
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.5)); 
}

.prod-image-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px; 
    height: 200px;
    background: radial-gradient(circle, rgba(13, 110, 253, 0.15) 0%, transparent 70%);
    z-index: 2; 
    pointer-events: none; 
}
*/

.prod-card-resumen {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
}

.prod-lead {
    font-size: 1rem; /* Tamaño reducido (igual al desc-text corporativo) */
    line-height: 1.5;
    color: #cccccc;
    margin-bottom: 18px;
}

.prod-tags-destacados {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.prod-tags-destacados span {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 1rem; /* Más pequeño y fino */
    color: #cccccc;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-prod-comprar {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background-color: #0d6efd;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    padding: 10px 20px; /* Reducido para no verse tosco */
    border-radius: 6px;
    width: 100%;
    font-size: 1rem; /* Tamaño homologado con los botones superiores */
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
    transition: all 0.2s ease;
}

.btn-prod-comprar:hover {
    background-color: #0b5ed7; 
    box-shadow: 0 6px 16px rgba(13, 110, 253, 0.4);
    transform: translateY(-1px);
}

.prod-specs-wrapper {
    margin-bottom: 30px;
}

.prod-specs-wrapper h3 {
    font-size: 1.15rem; /* Unificado con los subtítulos de la web */
    margin-bottom: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.prod-table-responsive {
    width: 100%;
    overflow-x: auto; 
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.prod-specs-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.01);
    text-align: left;
    font-size: 1rem;/* Texto de la tabla estilizado y pequeño */
}

.prod-specs-table thead th {
    background-color: rgba(13, 110, 253, 0.9); 
    color: #ffffff;
    padding: 10px 15px;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.prod-specs-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background-color 0.2s ease;
}

.prod-specs-table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.01);
}

.prod-specs-table tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.04); 
}

.prod-specs-table td {
    padding: 10px 15px;
    line-height: 1.4;
    vertical-align: middle;
}

.spec-label {
    font-weight: 600;
    color: #8a94a6;
    width: 35%;
    min-width: 130px;
}

.spec-highlight {
    color: #cccccc;
    font-weight: 600;
}

.prod-incluye-box {
    background: rgba(13, 110, 253, 0.02);
    border: 1px dashed rgba(13, 110, 253, 0.2);
    border-radius: 8px;
    padding: 20px;
}

.prod-incluye-box h4 {
    margin: 0 0 8px 0;
    color: #cccccc;
    font-size: 1rem; /* Unificado */
    font-weight: 600;
    text-transform: uppercase;
}

.prod-incluye-box p {
    margin: 0;
    font-size: 1rem;/* Reducido para que la lista de componentes se lea mejor */
    line-height: 1.5;
    color: #cccccc;
}

/* ==========================================================================
   VERSION DE ESCRITORIO (REESCRITURA DE MEDIA QUERY >= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
    .prod-overlay-box {
        padding: 60px 0;
    }

    .prod-container {
        max-width: 1200px;
        padding: 0 20px;
    }

    .prod-header h2 {
        font-size: 2rem; /* Tamaño de cabecera limpio para escritorio */
    }

    .prod-grid-top {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    .prod-image-wrapper {
        padding: 30px;
        height: 100%;
    }

    .prod-main-image {
        max-height: 320px; /* Altura máxima controlada para que no estire la sección */
        width: auto;
    }

    .prod-card-resumen {
        padding: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .prod-lead {
        font-size: 1rem;
    }

    .btn-prod-comprar {
        width: auto; 
        align-self: flex-start; /* No ocupa todo el ancho en pantallas grandes */
        padding: 10px 30px;
    }

    .prod-specs-wrapper h3 {
        font-size: 1.25rem;
    }

    .prod-specs-table {
        font-size: 1rem;
    }
}


/* ==========================================================================
   13. COMPONENTE: DRONES CARD (SOLUCIÓN DEFINITIVA DE DESFASE Y ANCHO)
   ========================================================================== */
.catalogo-categoria-wrapper {
    position: relative;
    width: 100%;
}

.catalogo-categoria-title {
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
}

/* Contenedor del Dron (Estructura simétrica y limpia sin sombras horribles) */
.drones-card-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: none !important;
    transition: border-color 0.2s ease; 
}

/* Hover firme sin sacudidas */
.drones-card-item:hover {
    border-color: #0d6efd !important;
    box-shadow: none !important;
    transform: none !important; 
}

/* 1. SE SOLUCIONA EL DESFASE: Contenedor plano que encaja al 100% con el ancho */
.cat-card-image-wrapper {
    position: relative;
    background: #0e131f; /* Fondo oscuro liso integrado para que no se vea el corte blanco */
    width: 100%;
    height: 220px; /* Altura fija idéntica para que ambas cards midan lo mismo */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* Quitamos el padding para que la imagen aproveche todo el ancho */
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* 2. EXPANSION LIMPIA DE LA IMAGEN: Cubre el contenedor sin deformarse ni encimarse */
.cat-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cambiado a cover para que se adapte y expanda a todo el ancho y alto de la caja */
    filter: none !important;
}

.cat-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(13, 110, 253, 0.25);
    backdrop-filter: blur(4px); /* Toque premium sutil sobre la imagen */
    border: 1px solid #ffffff;
    color: #ffffff;
    font-size: 1rem;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.5px;
    z-index: 5;
}

/* Cuerpo de información interna */
.cat-card-body {
    padding: 20px; /* Un poco más de aire para que se vea premium */
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}

.cat-card-brand {
    font-size: 0.95rem;
    text-transform: uppercase;
    color: #0d6efd; 
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.cat-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
}

/* Alineación simétrica del bloque de texto */
.cat-card-desc {
  font-size: 1rem;
  line-height: 1.5;
  color: #cccccc;
  margin-bottom: 30px;
  
  /* --- SOLUCIÓN PARA 5 LÍNEAS MÁXIMO --- */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;            /* <--- AÑADE ESTA LÍNEA PARA EL ESTÁNDAR */
  -webkit-box-orient: vertical;
  overflow: hidden;
  
  min-height: calc(1.5rem * 5); 
  
  flex-grow: 1;
  overflow-wrap: break-word;
}

}


/* ==========================================================================
   13. COMPONENTES Y BLOQUES DINÁMICOS - DRONAMEX ACADEMY (MATCH PREMIUM)
   ========================================================================== */

/* 13.1 Estilos Generales de Sección */
.academy-section-wrapper {
  background-color: #000000;
  padding: 80px 0;
  font-family: 'Roboto', Arial, sans-serif;
  color: #ffffff;
  position: relative;
  width: 100%;
}

.academy-bg-dark {
  background-color: #050811;
}

/* 13.2 Encabezados y Distintivos */
.academy-main-title {
  font-family: 'Poppins', 'Roboto', sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 20px;
}

.academy-main-title span {
  color: #0066ff !important;
}

.academy-sub-title {
  font-family: 'Poppins', 'Roboto', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.academy-badge {
  background-color: rgba(0, 102, 254, 0.12);
  border: 1px solid #0066ff;
  color: #0066ff;
  font-size: 0.95rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 5px 14px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 15px;
}

.academy-divider {
  background-color: #0066ff;
  border: none;
  height: 4px;
  width: 70px;
  margin: 0 0 25px 0;
  opacity: 1;
}

.academy-description {
  color: #94a3b8;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* 13.3 Bloques de Datos e Iconos (Base Desktop) */
.academy-course-highlights {
  margin: 25px 0;
  width: 100%;
}

.academy-mini-fact {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 22px 18px;
  border-radius: 8px;
  display: flex;
  align-items: center; /* Alineación horizontal en escritorio */
  gap: 15px;
  height: 100%;
  transition: all 0.3s ease;
}

/* Contenedor del Icono idéntico al de tu captura */
.academy-fact-icon {
  width: 45px;
  height: 45px;
  background-color: rgba(13, 110, 253, 0.15);
  border: 1px solid rgba(13, 110, 253, 0.3);
  color: #0d6efd;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.academy-fact-texts {
  display: flex;
  flex-direction: column;
}

.academy-mini-fact .fact-label {
  font-size: 1rem;
  text-transform: uppercase;
  color: #8a94a6;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.academy-mini-fact .fact-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.highlight-border {
  border-color: rgba(13, 110, 253, 0.4);
  background: rgba(13, 110, 253, 0.03);
}

/* 13.4 Tarjeta Detallada Lateral */
.academy-info-card {
  background: rgba(6, 9, 17, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 35px;
}

.academy-info-title {
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.academy-info-title i {
  color: #0066ff;
}

.academy-tabs-surrogate {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.tab-indicator-active {
  color: #0066ff;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
}

.tab-indicator-active::after {
  content: '';
  position: absolute;
  bottom: -11px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #0066ff;
}

.academy-info-text {
  font-size: 1rem;
  color: #b0b7c3;
  line-height: 1.6;
}

.btn-brochure {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 11px 24px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 13.5 Tarjetas del FAQ / Cursos */
.academy-course-card {
  background: rgba(6, 9, 17, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  height: 100%;
}

.academy-card-content {
  padding: 25px;
}

.academy-card-name {
  font-size: 1.30rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.academy-card-text {
  color: #8a94a6;
  font-size: 1rem;
}

/* 13.6 Botones */
.btn-reserva {
  background-color: #0066ff;
  color: #ffffff !important;
  border: none;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none !important;
}

/* ==========================================================================
   13.7 EDICIÓN MÓVIL (SOPORTE DE ICONOS Y ALINEACIÓN COMPACTA)
   ========================================================================== */
@media (max-width: 991.98px) {
  .academy-section-wrapper {
    padding: 50px 0;
  }

  .academy-main-title {
    font-size: 2.2rem;
    text-align: center;
  }
  
  .academy-sub-title {
    font-size: 1.7rem;
    text-align: center;
  }

  .academy-divider {
    margin: 0 auto 20px auto;
  }

  /* Contenedor del mosaico en Mobile */
  .academy-mini-fact {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    display: flex !important;
    flex-direction: row !important; /* Mantiene icono a la izquierda y texto a la derecha */
    align-items: center !important;
    gap: 12px !important;
  }

  /* FUERZA DEL ICONO: Ajustes exactos para que el icono de Bootstrap sea visible */
  .academy-fact-icon {
    width: 36px !important;
    height: 36px !important;
    background-color: rgba(13, 110, 253, 0.12) !important;
    border: 1px solid rgba(13, 110, 253, 0.25) !important;
    border-radius: 6px !important;
    margin-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  /* Forzar propiedades de la fuente del icono de Bootstrap dentro de la caja */
  .academy-fact-icon i,
  .academy-fact-icon .bi {
    color: #0d6efd !important; /* Azul Bootstrap exacto */
    font-size: 1.15rem !important; /* Tamaño estilizado */
    display: inline-block !important;
    line-height: 1 !important;
  }

  /* Ajuste de textos pequeños y finos a la derecha del icono */
  .academy-fact-texts {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .academy-mini-fact .fact-label {
    font-size: 0.95rem !important;
    color: #64748b !important;
    margin-bottom: 0px !important;
    line-height: 1.2;
  }

  .academy-mini-fact .fact-value {
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.2;
    color: #ffffff !important;
  }

  .highlight-border {
    border-color: rgba(13, 110, 253, 0.35) !important;
    background: rgba(13, 110, 253, 0.02) !important;
  }

  .academy-info-card {
    padding: 25px 20px;
    margin-top: 25px;
  }

  .w-sm-auto {
    width: 100% !important;
    justify-content: center;
  }

  .btn-brochure {
    margin-top: 8px;
  }
}

@media (max-width: 575.98px) {
  .academy-main-title { font-size: 1.9rem; }
  .academy-mini-fact .fact-value { font-size: 0.95rem !important; }
}


/* ==========================================================================
   14. COMPONENTES INTERNOS - DRONES EN SEGURIDAD (CSS INTEGRAL)
   ========================================================================== */

.security-article-wrapper {
  background-color: #000000;
  padding: 60px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* Meta información del post */
.article-meta-box {
  font-size: 1rem;
  color: #cccccc;
  margin-top: 5px;
}
.article-meta-box i {
  color: #0d6efd;
  margin-right: 4px;
}
.meta-divider {
  color: rgba(255, 255, 255, 0.1);
}

/* CONTENEDOR DE IMAGEN SEGURIDAD TELEMÉTRICA */
.security-hero-img-box {
  width: 100%;
  max-height: 250px;
}
.security-hero-img-box img {
  object-fit: cover;
  height: 250px;
  width: 100%;
  filter: brightness(0.75) contrast(1.1);
}
.security-img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(13, 110, 253, 0.05) 0%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
}

/* NUEVA ESTRUCTURA DE CAJAS CONTROLADA (Alineación perfecta anti-desfase) */
.academy-mini-fact-security {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 14px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
}

.academy-fact-icon-security {
  width: 38px;
  height: 38px;
  background-color: rgba(13, 110, 253, 0.12);
  border: 1px solid rgba(13, 110, 253, 0.25);
  color: #0d6efd;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.academy-fact-texts-security {
  display: flex;
  flex-direction: column;
}

.fact-label-security {
  font-size: 1rem;
  text-transform: uppercase;
  color: #cccccc;
  letter-spacing: 0.5px;
  margin-bottom: 1px;
  line-height: 1.2;
}

.fact-value-security {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
}

.highlight-border-security {
  border-color: rgba(13, 110, 253, 0.35);
  background: rgba(13, 110, 253, 0.02);
}

/* Lista de capacidades técnicas */
.security-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.security-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 1rem;
  color: #b0b7c3;
}
.security-features-list li:last-child {
  border-bottom: none;
}
.security-features-list li i {
  color: #0d6efd;
  font-size: 1.05rem;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Caja de Aviso de Regulación */
.regulation-notice-box {
  background: rgba(13, 110, 253, 0.03);
  border: 1px solid rgba(13, 110, 253, 0.15);
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.notice-icon {
  font-size: 1.3rem;
  color: #0d6efd;
  flex-shrink: 0;
}
.notice-text {
  font-size: 1rem;
  color: #8a94a6;
  margin: 0;
  line-height: 1.5;
}

/* ==========================================================================
   14.1 ADAPTACIÓN MÓVIL EXACTA (SLIM & TOTALMENTE ALINEADO)
   ========================================================================== */
@media (max-width: 991.98px) {
  .security-article-wrapper {
    padding: 40px 0;
  }

  .security-hero-img-box {
    max-height: 180px;
  }
  .security-hero-img-box img {
    height: 180px;
  }

  /* Forzar visualización slim perfecta en filas individuales */
  .academy-mini-fact-security {
    padding: 10px 12px !important;
    border-radius: 6px !important;
    gap: 12px !important;
  }

  .academy-fact-icon-security {
    width: 34px !important;
    height: 34px !important;
    font-size: 1rem !important;
  }

  .fact-label-security {
    font-size: 0.95rem !important;
  }

  .fact-value-security {
    font-size: 0.95rem !important;
  }

  .security-features-list li {
    font-size: 0.95rem !important;
    padding: 8px 0 !important;
  }
  
  .security-features-list li i {
    font-size: 0.95rem !important;
  }

  .regulation-notice-box {
    flex-direction: column;
    text-align: center;
    padding: 15px;
    gap: 8px;
  }
  .notice-text {
    font-size: 0.95rem !important;
  }
}

/******/
/*****/
/* Estilos para la cabecera convertida en botón */
.formulario-header-btn {
  background: transparent !important;
  border: none !important;
  padding: 0 0 12px 0 !important;
  margin-bottom: 15px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
}

.formulario-header-btn h3 {
  margin-bottom: 0 !important;
}

.arrow-toggle {
  color: #0d6efd !important;
  font-size: 1.3rem !important;
  transition: transform 0.3s ease !important;
}

/* Ocultar formulario al colapsar */
#formulario-box-cotizacion.collapsed .formulario-body {
  display: none !important;
}

/* Rotación de flecha */
#formulario-box-cotizacion.collapsed .arrow-toggle {
  transform: rotate(-90deg) !important;
}

#formulario-box-cotizacion.collapsed {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  height: auto !important;
}


/*parte de video streaming de index*/

/* ==========================================================================
   16. EFECTO DE IFRAME / FEED DE VIDEO EN VIVO
   ========================================================================== */

/* Contenedor principal que simula el iframe embebido */
.v-live-stream-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* Mantiene la proporción perfecta de video */
  background-color: #000000;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 1px rgba(13, 110, 253, 0.2);
}

/* Forzar que el reproductor de video llene el falso iframe */
.v-porque-video-player {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  pointer-events: none !important; /* Evita que el usuario lo pause sin querer */
}

/* Overlay digital sutil */
.v-porque-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 100%);
  z-index: 2;
}

/* Etiqueta LIVE superior izquierda */
.v-streaming-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(255, 0, 0, 0.85);
  padding: 4px 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3);
}

.v-streaming-dot {
  width: 8px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 50%;
  animation: vLiveParpadeo 1.2s infinite ease-in-out;
}

.v-streaming-text {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
}

/* Indicador inferior de espectadores */
.v-stream-viewers {
  position: absolute;
  bottom: 15px;
  left: 15px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 1rem;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Animación del pulso de transmisión */
.v-live-pulse {
  animation: vLiveParpadeo 1.8s infinite ease-in-out;
}

@keyframes vLiveParpadeo {
  0% { opacity: 0.4; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.4; transform: scale(0.95); }
}



/* ==========================================================================
   SECCIÓN OFERTA MIX (SLIDER & MONETIZAR)
   ========================================================================== */

/* ==========================================================================
   SECCIÓN OFERTA MIX - CONTRASTE PREMIUM (NEÓN VERDE + BOTONES AZUL PRIMARY)
   ========================================================================== */

.oferta-mix-section {
  width: 100%;
  padding: 60px 20px;
  box-sizing: border-box;
  background-color: #03312d !important; /* Fondo negro/antracita profundo */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.oferta-mix-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

/* Estructura simétrica para ambos bloques con el borde verde/cian sutil constante */
.oferta-block {
  background-color: #151a22 !important; /* Gris oscuro texturizado */
  border: 1px solid #387a74 !important; 
  box-shadow: 0 0 20px rgba(56, 122, 116, 0.2) !important;
  border-radius: 12px;
  padding: 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover idéntico para ambos: Se encienden con el verde neón vibrante */
.oferta-block:hover {
  border-color: #00f2fe !important; 
  box-shadow: 0 0 30px rgba(0, 242, 254, 0.5) !important; 
}

/* REGRESADO A PRIMARY: Badge de Promociones en azul con letras blancas */
.oferta-badge {
  position: absolute;
  top: 20px;
  left: 35px;
  background: #0d6efd !important;
  border: none !important;
  color: #ffffff !important; 
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

/* Slider Config */
.oferta-slider-wrapper {
  position: relative;
  margin-top: 25px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.oferta-slider {
  position: relative;
  height: 100%;
}

/* Tarjeta de producto en blanco inmaculado */
.oferta-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  
  background: #ffffff !important; 
  color: #0b0f17 !important; 
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3) !important;
}

.oferta-slide.active {
  position: relative;
  opacity: 1;
  visibility: visible;
}

.oferta-image-wrapper {
  width: 100%;
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  background-color: #f8f9fa !important; 
  border: 1px solid rgba(13, 110, 253, 0.1);
}

.oferta-slide-img {
  width: 100%;
  height: 100%;
  object-fit: contain; 
  object-position: center;
}

.oferta-slide-content h3 {
  color: #091d36 !important; 
  font-size: 1.5rem;
  margin: 0 0 10px 0;
  font-weight: 700;
}

.oferta-slide-content p {
  color: #495057 !important; 
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 15px 0;
}

/* REGRESADO A PRIMARY: Resaltados de descuento (15%) en azul */
.oferta-slide-content strong {
  color: #0d6efd !important; 
  font-weight: 700;
}

/* Tag interno de la tarjeta en azul sutil */
.oferta-slide-tag {
  display: inline-block;
  background: rgba(13, 110, 253, 0.08) !important;
  color: #0d6efd !important;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 1rem;
  border-left: 3px solid #0d6efd !important;
  font-weight: 600;
}

/* Controles del Slider */
.oferta-slider-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important; 
}

.oferta-slider-btn {
  background: transparent;
  border: none;
  color: #a0aec0 !important; 
  font-size: 1.3rem;
  cursor: pointer;
  padding: 5px 12px;
  transition: all 0.2s;
}

.oferta-slider-btn:hover {
  color: #00f2fe !important; /* Las flechas se iluminan en el verde cian neón */
}

.oferta-slider-dots {
  display: flex;
  gap: 8px;
}

.oferta-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2) !important; 
  cursor: pointer;
  transition: background 0.3s;
}

.oferta-slider-dot.active {
  background: #00f2fe !important; /* Puntos activos en verde neón */
  box-shadow: 0 0 8px #00f2fe;
}

/* --- BLOQUE DERECHO: MONETIZACIÓN --- */
.oferta-monetize-block {
  text-align: center;
  align-items: center;
}

.oferta-monetize-content {
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Icono de video iluminado con el verde cian neón */
.oferta-icon-wrap {
  width: 64px;
  height: 64px;
  background: rgba(0, 242, 254, 0.08) !important;
  border: 1px solid rgba(0, 242, 254, 0.4) !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: #00f2fe !important; 
  filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.3));
}

.oferta-icon-wrap svg {
  width: 26px;
  height: 26px;
}

.oferta-monetize-block h2 {
  color: #ffffff !important; 
  font-size: 1.8rem;
  margin: 0 0 15px 0;
  font-weight: 700;
}

.oferta-monetize-block p {
  color: #e2e8f0 !important; 
  font-size: 1.30rem;
  line-height: 1.6;
  margin: 0 0 25px 0;
}

/* REGRESADO A PRIMARY: Botón de acción azul sólido con letras blancas */
.oferta-upload-btn {
  display: inline-block;
  background: #0d6efd !important; 
  color: #ffffff !important; 
  border: 1px solid #0d6efd !important;
  padding: 12px 32px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.4) !important;
}

.oferta-upload-btn:hover {
  background: #0052cc !important;
  border-color: #0052cc !important;
  box-shadow: 0 0 25px rgba(13, 110, 253, 0.6) !important;
  transform: translateY(-2px);
}

.oferta-upload-note {
  font-size: 0.95rem !important;
  color: #a0aec0 !important; 
  margin-top: 12px !important;
}

/* RESPONSIVE MÓVIL / DESKTOP */
@media (min-width: 768px) {
  .oferta-mix-container {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }
  
  .oferta-block {
    padding: 45px;
    min-height: 480px;
  }
}



/* ==========================================================================
   FORMULARIO DE COTIZACIÓN - EFECTO FADE IN / FADE OUT
   ========================================================================== */

/* ==========================================================================
   CAJA DE COTIZACIÓN COMPLETA - INVISIBLE POR DEFECTO CON FADE IN/OUT
   ========================================================================== */

/* 1. Estado inicial: La caja entera es totalmente invisible y no ocupa espacio */
#formulario-box-cotizacion.collapsed {
  max-height: 0;
  overflow: hidden;   /* Evita que el contenido o los bordes se asomen */
  opacity: 0;         /* Hace la caja transparente */
  visibility: hidden; /* Desactiva la caja para el puntero del mouse */
  margin: 0 !important; /* Elimina márgenes externos para no empujar otros elementos */
  padding: 0 !important;
  
  /* Transición suave para desaparecer */
  transition: 
    max-height 0.5s ease-in-out,
    opacity 0.4s ease-in-out,
    visibility 0.4s ease-in-out,
    margin 0.5s ease-in-out,
    padding 0.5s ease-in-out;
}

/* 2. Estado Activo: Cuando pierde la clase 'collapsed', la caja entera aparece */
#formulario-box-cotizacion:not(.collapsed) {
  max-height: 1200px; /* Un límite alto para que quepa la cabecera y el formulario abierto */
  opacity: 1;         /* Se vuelve totalmente opaco */
  visibility: visible; /* Se vuelve interactivo para poder escribir */
  
  /* Transición fluida para aparecer (Fade In) */
  transition: 
    max-height 0.5s ease-in-out,
    opacity 0.5s ease-in-out 0.1s, /* Pequeño retraso visual para el desvanecimiento */
    visibility 0s 0.1s;
}

/* 3. Asegurar que el cuerpo interno esté expandido por defecto dentro de la caja */
#formulario-box-cotizacion .formulario-body {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* 4. Estilo opcional para la rotación de la flecha al abrir/cerrar */
.arrow-toggle {
  transition: transform 0.3s ease-in-out;
}
#formulario-box-cotizacion:not(.collapsed) .arrow-toggle {
  transform: rotate(180deg);
}


/******************/
/*****************/
/****************/


#droneScrollSection {
  position: relative;
  height: 200vh; /* espacio para scroll */
  background: #060b13;
}

.drone-part {
  position: absolute;
  opacity: 0;
  transform: translateY(100px);
  transition: all 1s ease;
}

.fuselage {
  width: 200px; height: 80px;
  background: gray;
  top: 30%; left: 40%;
}
.propeller {
  width: 60px; height: 60px;
  background: silver;
  border-radius: 50%;
  top: 20%; left: 35%;
}
.camera {
  width: 40px; height: 40px;
  background: black;
  top: 45%; left: 50%;
}
.landing-gear {
  width: 20px; height: 60px;
  background: darkgray;
  top: 55%; left: 42%;
}





/*******/
/***Este codigo es para todas las secciones***/
/* ==========================================================================
   ESTILO MAESTRO UNIVERSAL - COMPACTACIÓN DE ESPACIOS EN TODO EL SITIO
   Aplica automáticamente para cualquier sección en Mobile, Tablet y Desktop
   ========================================================================== */

/* 1. COMPACTACIÓN GLOBAL DE TODAS LAS SECCIONES */
.uptop10  { top: -10px !important; }
.uptop20  { top: -20px !important; }
.uptop30  { top: -30px !important; }
.uptop40  { top: -40px !important; }
.uptop50  { top: -50px !important; }
.uptop60  { top: -60px !important; }
.uptop70  { top: -70px !important; }
.uptop80  { top: -80px !important; }
.uptop90  { top: -90px !important; }
.uptop100 { top: -100px !important; }
.space10 {height: 10px !important;}


section, 
[class*="-section"] {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

/* 2. ELIMINAR ESPACIOS MUERTOS EN CONTENEDORES INTERNOS */
section .container,
section .container-fluid,
[class*="-container"],
[class*="-boxing"] {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 3. PEGAR MÁS LAS FILAS Y COLUMNAS DE BOOTSTRAP (Une el contenido horizontal) */
section .row {
  --bs-gutter-y: 1rem !important; /* Reduce la separación vertical entre tarjetas apiladas */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 4. REDUCIR AIRE EN TÍTULOS Y SUBTÍTULOS DE CUALQUIER SECCIÓN */
section h1, section h2, section h3, 
[class*="-title"] {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* 5. REDUCIR ESPACIOS EN PÁRRAFOS INTERNOS */
section p {
  margin-bottom: 15px !important; /* Evita que los textos empujen los botones muy abajo */
}


/* ==========================================================================
   ADAPTACIÓN RESPONSIVE AUTOMÁTICA
   ========================================================================== */

/* MOBILE (Pantallas pequeñas - ya viene optimizado arriba, pero aseguramos detalles) */
@media (max-width: 767px) {
  section, [class*="-section"] {
    padding-top: 20px !important;   /* Súper compacto en celulares para evitar scroll eterno */
    padding-bottom: 20px !important;
  }
}

/* TABLET (Pantallas medianas) */
@media (min-width: 768px) and (max-width: 991px) {
  section, [class*="-section"] {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }
}

/* DESKTOP (Pantallas grandes) */
@media (min-width: 992px) {
  section, [class*="-section"] {
    padding-top: 40px !important;   /* Espacio elegante para pantallas grandes, sin excesos */
    padding-bottom: 40px !important;
  }
  
  /* Une más las tarjetas de forma horizontal en PC */
  section .row.g-4, 
  section .row.g-5 {
    --bs-gutter-x: 1.5rem !important; 
  }
}
/*******/


/* ==========================================================================
   ESTILO PREMIUM PARA TARJETAS DE SOLUCIONES (UP-HOVER Y LETRA ESTILIZADA)
   ========================================================================== */

/* Contenedor base de la tarjeta */

.cursos-card-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #151a22 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  
  /* Transición compacta y limpia para evitar errores de sintaxis */
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
              box-shadow 0.3s ease, 
              border-color 0.3s ease !important;
}

/* Efecto "Up Hover": Se desplaza sutilmente hacia arriba y genera sombra */
.cursos-card-item:hover {
  transform: translateY(-6px) !important; /* Desplazamiento limpio hacia arriba */
  border-color: #0d6efd !important; /* Destello en tu azul primary al activarse */
  box-shadow: 0 12px 24px rgba(13, 110, 253, 0.15) !important;
}

/* Título de la tarjeta (Ej: Seguridad y Vigilancia) */
.cursos-card-item .cat-card-title {
  font-size: 1.1rem !important; /* Tamaño más pequeño y refinado */
  font-weight: 500 !important;  /* Peso normal/medio, adiós a las negritas toscas */
  color: #ffffff !important;
  margin-top: 8px !important;
  margin-bottom: 10px !important;
}

/* Subtítulo o Marca pequeña superior */
.cursos-card-item .cat-card-brand {
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  color: #a0aec0 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Contenedor padre para asegurar el espacio de 10px sin saltos */
.refacciones-card-item {
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  border: 1px solid transparent; /* Evita saltos si añades borde en hover */
}

/* Descripción de la tarjeta (truncado a 5 líneas) */
.cursos-card-item .cat-card-desc {
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: #cbd5e1 !important;
  line-height: 1.5 !important;
  margin-bottom: 15px !important;
  /* Lógica de truncado */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;            /* <--- AÑADE ESTA LÍNEA */
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Altura mínima para que el contenedor no se encoja si el texto es muy corto */
  min-height: 7.5rem; /* 1.5 (line-height) * 5 (líneas) = 7.5rem */
  flex-grow: 1;
}

/* Asegurar que el cuerpo de la tarjeta use flexbox para empujar el botón abajo */
.cursos-card-item .cat-card-body {
  padding: 20px !important;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Transición extra para el botón cuando toda la tarjeta sufre el hover */
.cursos-card-item:hover .btn-prod-comprar {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
}




/* ==========================================================================
   VARIABLES GLOBALES (Ajustadas para máximo contraste)
   ========================================================================== */
:root {
    --prod-bg-dark: #000000;            
    --prod-bg-card: rgba(255, 255, 255, 0.03); 
    --prod-border-color: rgba(255, 255, 255, 0.1); 
    
    /* El gris bonito, claro y brillante para que resalte en el fondo negro */
    --prod-text-white: #ffffff;         
    --prod-text-muted: #cbd5e1;         /* Un gris mucho más claro (Slate 300) */
    
    --prod-color-android: #3ddc84;
    --prod-color-windows: #00adef;
    --prod-color-apple: #f5f5f7;
}

/* ==========================================================================
   ESTRUCTURA GENERAL Y CONTENEDORES
   ========================================================================== */
.prod-downloads-section {
    background-color: var(--prod-bg-dark) !important;
    color: var(--prod-text-white) !important;
}

.prod-download-category h3 {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--prod-text-white) !important;
}

/* Modificadores de color para los íconos de los títulos */
.prod-download-category h3 .text-info { color: var(--prod-color-windows) !important; }
.prod-download-category h3 .text-warning { color: #f6ad55 !important; }
.prod-download-category h3 .text-danger { color: #fc8181 !important; }

/* ==========================================================================
   TARJETAS DE SISTEMAS OPERATIVOS (Corrección de textos invisibles)
   ========================================================================== */
.prod-download-category .card {
    background: var(--prod-bg-card) !important;
    border: 1px solid var(--prod-border-color) !important;
    border-radius: 8px;
    backdrop-filter: blur(4px);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.prod-download-category .card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.prod-download-category .card h4 {
    color: var(--prod-text-white) !important;
    font-weight: 500;
}

/* Fuerza el texto de descripción de la app a ser gris claro visible */
.prod-download-category .card p,
.prod-download-category .card .text-muted,
.prod-download-category .card .small {
    color: var(--prod-text-muted) !important;
    opacity: 0.9 !important; /* Asegura que no se desvanezca */
}

/* Colores de los Logos */
.prod-download-category .text-success { color: var(--prod-color-android) !important; }
.prod-download-category .text-info { color: var(--prod-color-windows) !important; }
.prod-download-category .text-light { color: var(--prod-color-apple) !important; }

/* ==========================================================================
   TABLAS DE DESCARGA (Corrección de filas y fechas oscuras)
   ========================================================================== */
/* Corrección para la columna de las fechas (Lanzamiento) */
.prod-specs-table td, 
.prod-specs-table td.text-muted {
    color: var(--prod-text-muted) !important;
}

/* Corrección para la columna de los títulos de archivo (Izquierda) */
.prod-specs-table td.spec-label {
    color: var(--prod-text-white) !important;
    font-weight: 400;
}

/* Ícono de PDF dentro de las tablas */
.prod-specs-table td.spec-label .text-danger {
    color: #fc8181 !important;
}

/* Píldoras de formato de archivo (PDF) */
.prod-specs-table td a.bg-secondary-subtle {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--prod-border-color) !important;
    color: var(--prod-text-white) !important;
    transition: all 0.2s ease-in-out;
}

.prod-specs-table td a.bg-secondary-subtle:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Botones "Descargar ZIP / BIN" (Borde blanco, texto gris claro) */
.prod-specs-table .btn-outline-light {
    color: var(--prod-text-white) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.prod-specs-table .btn-outline-light:hover {
    color: var(--prod-bg-dark) !important;
    background-color: var(--prod-text-white) !important;
    border-color: var(--prod-text-white) !important;
}



/* ==========================================================================
   CENTRO DE DESCARGAS DRONAMEX - CORRECCIÓN DE CONTRASTE ABSOLUTO
   ========================================================================== */

:root {
    --bg-dark-absolute: #000000;
    --bg-card-translucid: rgba(255, 255, 255, 0.03);
    --border-tactic: rgba(255, 255, 255, 0.1);
    
    /* Colores de Texto Forzados para Legibilidad */
    --text-pure-white: #ffffff !important;
    --text-slate-light: #cbd5e1 !important; /* Gris claro muy limpio y visible */
    
    /* Colores Oficiales de Iconos */
    --brand-android: #3ddc84 !important;
    --brand-windows: #00adef !important;
    --brand-apple: #f5f5f7 !important;
    --brand-firmware: #f6ad55 !important;
    --brand-docs: #fc8181 !important;
}

/* Contenedor e Instructivos de la Sección */
.prod-downloads-section {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.prod-downloads-section h2 {
    color: #ffffff !important;
}

.prod-downloads-section .prod-subtitle {
    color: #cbd5e1 !important;
    opacity: 1 !important;
}

/* Títulos H3 de cada bloque (Software, Firmware, Manuales) */
.prod-download-category h3 {
    color: #ffffff !important;
}

/* ==========================================================================
   BLINDAJE DE ICONOS (Fuerza el color original de cada uno)
   ========================================================================== */
.prod-downloads-section i.icon-android,
.prod-downloads-section .icon-android i { 
    color: var(--brand-android) !important; 
}
.prod-downloads-section i.icon-windows,
.prod-downloads-section .icon-windows i { 
    color: var(--brand-windows) !important; 
}
.prod-downloads-section i.icon-apple,
.prod-downloads-section .icon-apple i { 
    color: var(--brand-apple) !important; 
}
.prod-downloads-section i.icon-firmware,
.prod-downloads-section .icon-firmware i { 
    color: var(--brand-firmware) !important; 
}
.prod-downloads-section i.icon-docs,
.prod-downloads-section .icon-docs i { 
    color: var(--brand-docs) !important; 
}

/* ==========================================================================
   TARJETAS DE SOFTWARE (Fuerza el texto gris claro a ser visible)
   ========================================================================== */
.download-card {
    background: var(--bg-card-translucid) !important;
    border: 1px solid var(--border-tactic) !important;
    border-radius: 8px;
}

.download-card h4 {
    color: #ffffff !important;
}

/* Esto rescata el texto "Versión v5.4.1.3..." del fondo negro */
.download-card p,
.download-card small,
.download-card .card-description {
    color: #cbd5e1 !important;
    opacity: 1 !important;
}

/* ==========================================================================
   TABLAS (Forzado de Filas, Fechas e Idiomas)
   ========================================================================== */
/* Encabezados de tabla */
.prod-specs-table th {
    color: #ffffff !important;
    border-bottom: 2px solid var(--border-tactic) !important;
}

/* Nombre de los archivos (Columna izquierda) */
.prod-specs-table td.spec-label {
    color: #ffffff !important;
}

/* Fechas e Idiomas (Columna central - Resuelve el texto fantasma) */
.prod-specs-table td,
.prod-specs-table td.table-date,
.prod-specs-table td.text-muted {
    color: #cbd5e1 !important;
    opacity: 1 !important;
}

/* Botones Outline de las Tablas (ZIP / BIN) */
.prod-specs-table .btn-outline-download {
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: transparent !important;
}

.prod-specs-table .btn-outline-download:hover {
    color: #000000 !important;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Píldoras de Formato de Documentos (Botón PDF) */
.prod-specs-table .badge-format-download {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid var(--border-tactic) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   SECCIÓN FICHA ACADEMIA - CONVOCATORIAS & PROGRAMAS DISPONIBLES
   ========================================================================== */
.prod-ficha-section {
    background-color: #000000 !important;
}

.registro-convocatoria-box {
    padding: 0 !important;
    background-color: #060911;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.convocatoria-img-wrap {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.convocatoria-img-wrap img {
    object-fit: cover;
}

/* Badges e Identificadores */
.text-warning-badge {
    background: rgba(255, 193, 7, 0.12) !important;
    border: 1px solid #ffc107 !important;
    color: #ffc107 !important;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 600;
}

.text-primary-icon {
    color: #0066ff !important;
    font-size: 1.3rem;
}

/* Tipografías de la tarjeta principal */
/* ==========================================================================
   TIPOGRAFÍAS Y FLUJO DE LA TARJETA PRINCIPAL (BLINDADO)
   ========================================================================== */
.card-main-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.card-main-desc {
    font-size: 0.95rem;
    color: #cccccc;
    line-height: 1.5;
    margin-bottom: 20px;
    
    /* --- SOLUCIÓN AL CORTE DE TEXTO --- */
    display: block;
    height: auto;               /* Permite que la caja crezca libremente según el contenido */
    flex-grow: 1;               /* Empuja de forma magnética las fechas y el botón hacia el fondo */
    overflow-wrap: break-word;  /* Evita desbordamientos si hay enlaces o palabras largas */
    word-wrap: break-word;
}

/* Contenedor de la fecha para asegurar que respete el flujo flex */
.fecha-badge-wrapper {
    width: 100%;
    margin-bottom: 1rem;
    flex-shrink: 0;             /* Impide que este bloque colapse o se aplaste */
}

.date-highlight {
    font-size: 0.95rem;
    color: #ffffff;
}

.text-muted-custom {
    font-size: 0.85rem;         /* Reducido ligeramente de 0.95rem para crear jerarquía visual con el título de la fecha */
    color: #cccccc;
    display: block;             /* Asegura que se comporte como bloque y no se encime lateralmente */
}

/* Botonería de Control */
.btn-action-register {
    background-color: #0066ff !important;
    border-color: #0066ff !important;
    color: #ffffff !important;
    font-weight: 600;
    text-align: center;
    padding: 10px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-action-register:hover {
    background-color: #0055dd !important;
    border-color: #0055dd !important;
    box-shadow: 0 0 15px rgba(0, 102, 255, 0.4) !important;
}

/* Bloque Derecho - Tarjetas de Programas Secundarios */
.sub-program-title {
    font-size: 0.95rem;
    color: #ffffff !important;
}

.sub-program-desc {
    font-size: 0.95rem;
    color: #cccccc;
    height: 48px;
    line-height: 1.4;
}

.sub-program-desc-full {
    font-size: 0.95rem;
    color: #cccccc;
    line-height: 1.4;
}

.btn-program-action {
    font-size: 0.95rem;
    padding: 6px 14px;
    align-self: flex-start;
}

.card-item-highlighted {
    border-left: 3px solid #ffc107 !important;
}

.brand-highlight {
    color: #ffc107 !important;
}
/*
.structure-coming-soon {
    white-space: nowrap;
    font-size: 0.95rem;
    padding: 5px 12px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a1aab2;
    border-radius: 4px;
}*/
.structure-coming-soon {
    white-space: nowrap;
    font-size: 0.95rem;   /* Conservamos tu tamaño original */
    padding: 5px 12px;    /* Conservamos tu espaciado original */
    border-radius: 4px;   /* Conservamos tus esquinas originales */
    
    /* --- MUTACIÓN A OUTLINE AMARILLO --- */
    color: #ffc107;                            /* Texto amarillo de alta visibilidad */
    border: 1px solid #ffc107;                 /* Borde sólido amarillo (Efecto Outline) */
    background-color: rgba(255, 193, 7, 0.03); /* Fondo sutil translúcido */
    
    /* --- LIGERO GLOW EN ESTADO PASIVO --- */
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.2); 
    
    transition: all 0.3s ease-in-out;
}

/* Efecto interactivo: el glow se intensifica ligeramente al pasar el mouse */
.structure-coming-soon:hover {
    background-color: rgba(255, 193, 7, 0.1);
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.45);
    border-color: #ffd043; /* El borde se aclara un toque al activarse */
    color: #ffd043;
}
/* ==========================================================================
   SECCIÓN: POR QUÉ ELEGIRNOS & STREAMING EN VIVO
   ========================================================================== */
#v-porque-dronamex-section {
  background-color: #000000 !important;
}

/* Encabezados y Tipografía */
.section-main-heading,
.stream-section-heading {
  font-size: 1.15rem;
  letter-spacing: 0.5px;
}

.text-muted-custom {
  font-size: 0.9rem;
  color: #cccccc !important;
}

/* Lista de Beneficios */
.v-porque-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.v-porque-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.v-porque-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background-color: #060911;
  border: 1px solid #0066ff;
  border-radius: 6px;
  color: #0066ff;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(0, 102, 255, 0.15);
}

.v-porque-item-title {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 2px 0;
}

.v-porque-item-desc {
  font-size: 0.9rem;
  color: #cccccc;
  margin: 0;
}

/* Línea Decorativa */
.v-porque-hr-decorativo {
  border-color: rgba(255, 255, 255, 0.1);
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Contenedor del Reproductor e Interfaz Live */
.v-live-stream-container {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: #060911;
}

.v-porque-video-player {
  width: 100%;
  height: auto;
  display: block;
}

.v-porque-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 50%);
  pointer-events: none;
}

/* Badges sobre el Video */
.v-streaming-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 4px 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.v-streaming-dot {
  width: 8px;
  height: 8px;
  background-color: #dc3545;
  border-radius: 50%;
  display: inline-block;
}

.v-streaming-text {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.v-stream-viewers {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background-color: rgba(0, 0, 0, 0.65);
  color: #cccccc;
  font-size: 0.95rem;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Animación Pulse de la Señal */
.v-live-pulse {
  animation: liveHeartbeat 1.5s infinite ease-in-out;
}

@keyframes liveHeartbeat {
  0% { opacity: 0.4; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}
/* Efecto de Hover unificado para todas las tarjetas */
.card-hover-effect {
    transition: all 0.3s ease-in-out;
    border: 1px solid transparent; /* Base transparente */
    margin-bottom: 20px; /* Aquí damos los 10px extra que pediste (20px total) */
}

.card-hover-effect:hover {
    border: 2px solid #007bff; /* Tu color azul */
    box-shadow: 0 10px 20px rgba(0, 123, 255, 0.15);
    transform: translateY(-5px);
}

/* Espaciado extra para que no choquen las filas */
.row.g-4 {
    margin-bottom: 30px; 
}



/* ==========================================================================
   SISTEMA DE TIPOGRAFÍA: VARIABLES ROOT Y ESTILOS GLOBALES
   ========================================================================== */
:root {
  /* Tamaños Base (Mobile) */
  --fs-h1: 32px; --fs-h2: 26px; --fs-h3: 22px; --fs-h4: 18px; --fs-p: 15px; --fs-small: 12px;
}

/* Ajustes Tablet */
@media (min-width: 768px) {
  :root {
    --fs-h1: 40px; --fs-h2: 30px; --fs-h3: 24px; --fs-h4: 20px; --fs-p: 16px; --fs-small: 13px;
  }
}

/* Ajustes Desktop */
@media (min-width: 1200px) {
  :root {
    --fs-h1: 48px; --fs-h2: 36px; --fs-h3: 28px; --fs-h4: 22px; --fs-p: 16px; --fs-small: 14px;
  }
}

/* Aplicación de las variables a las etiquetas y clases */
h1, .h1 { font-size: var(--fs-h1); line-height: 1.2; font-weight: 700; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.3; font-weight: 600; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.4; font-weight: 600; }
p      { font-size: var(--fs-p);  line-height: 1.6; margin-bottom: 1rem; }
small  { font-size: var(--fs-small); line-height: 1.4; }

/******/
/* --- Componente: migaspan --- */
.migaspan {
    width: 100%;
    padding: 10px 0; /* Un poco más compacto */
    background-color: #000000;
    margin-bottom: 20px;
}

.migaspan-container {
    /* Ajuste para desktop: forzamos que sea igual al contenedor de productos */
    max-width: 1200px; 
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14x;
    text-transform: uppercase; 
    letter-spacing: 0.125px; /* Un toque profesional cuando usas mayúsculas */
}

.migaspan-home {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #0d6efd;
    font-weight: 550;
    transition: color 0.2s ease;
}

.migaspan-home:hover {
    color: #0b5ed7; /* Un hover blanco destaca más sobre el fondo negro */
    text-decoration: underline;
}

.migaspan-separator {
    font-weight: 700;
    font-size: 15px;
    color: #cccccc; /* Un gris más oscuro para que no resalte tanto */
}

.migaspan-current {
    color: #cccccc;
    font-weight: 500;
}

/* --- Responsive: Tablet y Desktop --- */
@media (min-width: 768px) {
    .migaspan-container {
        font-size: 15px; 
        gap: 16px;
        /* Si tu sitio tiene el contenido alineado a la izquierda, 
           ajusta este max-width al valor real de tu contenedor principal */
        max-width: 1200px; 
    }
}