.elementor-30 .elementor-element.elementor-element-5d9328b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-1072b63{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-bacf7ba{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-77bf9fb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-3d58279{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-dcdbfce{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-68096bf *//* --- Estilos Completos para la Sección Hero (Inicio) --- */
/* Asegúrate de que las fuentes 'Rajdhani' e 'Inter' estén cargadas en tu sitio */

.aiweapon-hero {
  position: relative; /* Necesario para posicionar elementos internos de forma absoluta */
  height: 100vh; /* Altura completa de la ventana gráfica */
  min-height: 600px; /* Altura mínima para dispositivos con poca altura */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Evita que el video se desborde si es más grande */
  text-align: center;
  padding: 20px; /* Un padding general por si acaso */
  box-sizing: border-box;
}

.aiweapon-hero-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1; /* Detrás del overlay y del contenido */
}

.aiweapon-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover; /* Asegura que el video cubra el área manteniendo su relación de aspecto */
}

/* Overlay oscuro sobre el video para mejorar contraste del texto */
.aiweapon-hero::before { 
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(26, 26, 46, 0.75), rgba(13, 13, 26, 0.85)); /* Ajusta opacidad (0.75 y 0.85) según necesites */
  z-index: 2; /* Encima del video, debajo del contenido del hero */
}

.aiweapon-hero-content {
  position: relative; /* Para que esté por encima del video y del overlay */
  z-index: 3; 
  max-width: 850px; /* Ancho máximo del contenido para mejor legibilidad */
  width: 90%;
}

.aiweapon-hero-tagline {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(0.9rem, 1.8vw, 1.1rem); /* Tamaño adaptable */
  color: #E0FFFF; /* Blanco Neón/Hielo */
  font-weight: 600; /* SemiBold */
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 0.75rem; /* Espacio antes del H1 */
  opacity: 0.9;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Sombra sutil para legibilidad */
}

.aiweapon-hero-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.2rem); /* Tamaño del título adaptable */
  color: #E0FFFF; /* Color del texto base del H1: Blanco Neón/Hielo */
  font-weight: 700; /* Bold */
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 20px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra para mejorar la legibilidad */
}

/* Estilo para el span que contiene la cifra dinámica de ingresos */
.aiweapon-hero-income-value {
  display: inline-block; /* Para que la transición de opacidad funcione bien */
  color: #7F00FF; /* Color Violeta Digital (para la cifra) */
  /* Efecto de brillo violeta (ajusta según la intensidad deseada) */
  text-shadow: 0 0 8px rgba(127, 0, 255, 0.7), 
               0 0 12px rgba(127, 0, 255, 0.5), 
               0 0 16px rgba(127, 0, 255, 0.3);
  transition: opacity 0.3s ease-in-out; /* Transición suave para el cambio de texto */
}

.aiweapon-hero-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 2.2vw, 1.25rem); /* Tamaño adaptable */
  line-height: 1.6;
  color: #A0A8B8; /* Gris Medio */
  margin-top: 0;
  margin-bottom: 30px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Sombra sutil para legibilidad */
  max-width: 700px; /* Limita el ancho del subtítulo para mejor lectura */
  margin-left: auto;
  margin-right: auto;
}

.aiweapon-hero-buttons {
  display: flex;
  justify-content: center;
  gap: 20px; /* Espacio entre botones */
  flex-wrap: wrap; /* Permite que los botones pasen a la siguiente línea en pantallas pequeñas */
}

.aiweapon-hero-cta {
  display: inline-block;
  padding: 14px 32px; /* Padding un poco más generoso */
  border-radius: 5px;
  text-decoration: none;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1rem; /* Ajustado para consistencia */
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.aiweapon-hero-cta.primary {
  background-color: #7F00FF; /* Violeta Digital */
  color: #FFFFFF; /* Blanco */
  box-shadow: 0 5px 15px rgba(127, 0, 255, 0.3);
}

.aiweapon-hero-cta.secondary {
  background-color: transparent;
  color: #E0FFFF; /* Blanco Neón/Hielo */
  border: 2px solid #4A4E69; /* Acero Oscuro Pulido (o --accent-tertiary) */
}

.aiweapon-hero-cta:hover {
  transform: translateY(-3px);
}
.aiweapon-hero-cta.primary:hover {
background-color: #5D00A5; /* Violeta más oscuro */
  transform: translateY(-3px); /* Mantenemos el transform del ejemplo general de CTA */
  /* Sombra combinada: Violeta más interno, Magenta más externo y sutil */
  box-shadow: 0 6px 15px rgba(127, 0, 255, 0.3), /* Violeta Digital (127,0,255) */
              0 8px 25px rgba(255, 0, 255, 0.2);  /* Magenta (255,0,255) */
}
.aiweapon-hero-cta.secondary:hover {
  background-color: #4A4E69; /* Acero Oscuro Pulido */
  border-color: #4A4E69;
  color: #FFFFFF; /* Blanco */
}

/* --- AJUSTES RESPONSIVOS PARA LA SECCIÓN HERO --- */
@media (max-width: 768px) {
  .aiweapon-hero {
    min-height: auto; /* Altura automática para adaptarse al contenido */
    height: auto;
    padding-top: 120px; /* Más padding superior si el menú fijo es alto en móvil */
    padding-bottom: 60px;
  }
  .aiweapon-hero-title {
    font-size: clamp(2rem, 7vw, 2.5rem); /* Título más pequeño en móviles */
    margin-bottom: 15px;
  }
  .aiweapon-hero-subtitle {
    font-size: clamp(0.9rem, 4vw, 1rem); /* Subtítulo más pequeño */
    margin-bottom: 25px;
  }
  .aiweapon-hero-buttons {
    flex-direction: column; /* Apila los botones */
    align-items: center; /* Centra los botones apilados */
    gap: 15px;
  }
  .aiweapon-hero-cta {
    width: 80%; /* Hace que los botones ocupen más ancho */
    max-width: 300px; /* Pero no demasiado anchos */
    padding: 12px 25px;
    font-size: 0.9rem;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1072b63 *//* --- CSS COMPLETO PARA LA SECCIÓN 'PROBLEMA' --- */
/* Asegúrate de que las fuentes 'Rajdhani' e 'Inter' 
  y la librería de iconos Phosphor Icons estén cargadas en tu sitio WordPress/Elementor.
*/

/* --- Estilos Generales de Sección y Contenedor (aplicables a .aiweapon-problema-section) --- */
.aiweapon-section { /* Clase base para secciones, usada por .aiweapon-problema-section */
    padding: clamp(3rem, 8vw, 6rem) 0;
    position: relative;
    box-sizing: border-box; /* Asegura que el padding no aumente el tamaño total si se usa min-height */
}

.aiweapon-container { /* Contenedor para centrar el contenido */
    max-width: 1100px;
    margin: 0 auto; /* Centra el contenedor horizontalmente */
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Apila el título y la grid verticalmente */
    align-items: center; /* Centra el título y la grid horizontalmente si no ocupan todo el ancho */
    justify-content: center; /* Centra el bloque de título y grid verticalmente dentro del contenedor si hay espacio extra */
    width: 100%; /* Asegura que el contenedor pueda ocupar el ancho disponible */
}

.aiweapon-section-title { /* Contenedor del título y subtítulo de la sección */
    text-align: center;
    margin-bottom: clamp(2rem, 5vw, 4rem);
    width: 100%; /* Para que ocupe el ancho y se centre correctamente dentro del flex container */
}

.aiweapon-h2-style { /* Estilo para el título principal de la sección (H2) */
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: clamp(2rem, 5vw, 2.75rem); /* aprox. 32px-44px */
    color: #E0FFFF; /* Blanco Neón/Hielo */
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0.75em;
    text-shadow: 0 0 8px rgba(224, 255, 255, 0.7), 0 0 12px rgba(224, 255, 255, 0.5), 0 0 16px rgba(224, 255, 255, 0.3); /* Brillo Neón */
}

.aiweapon-section-title p { /* Estilo para el subtítulo de la sección */
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.95rem, 1.5vw, 1.05rem); /* aprox. 16px */
    margin-bottom: 0; 
    color: #A0A8B8; /* Gris Medio */
    max-width: 600px; 
    margin-left: auto;
    margin-right: auto;
}

.aiweapon-text-small { /* Estilo para el texto descriptivo pequeño en las tarjetas */
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.8rem, 1.2vw, 0.9rem); /* aprox. 14px */
    color: #A0A8B8; /* Gris Medio */
    line-height: 1.6;
}

/* Efecto Glassmorphism para las tarjetas (usado por .aiweapon-problema-card) */
.aiweapon-glass-panel {
    background-color: rgba(44, 44, 62, 0.6); /* Base Secundaria de Acero (#2C2C3E) con opacidad */
    backdrop-filter: blur(12px) saturate(150%);
    border-radius: 12px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid #4A4E69; /* Acero Oscuro Pulido (borde sutil) */
    box-shadow: 0 8px 32px 0 rgba(0,0,0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

.aiweapon-glass-panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(127, 0, 255, 0.15); /* Sombra con acento violeta (#7F00FF) al hacer hover */
}


/* --- Estilos Específicos para la Sección "Problema" --- */
.aiweapon-problema-section {
    background-color: #1A1A2E; /* Gris Acero Oscuro (Fondo Principal de la página/sección) */
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.aiweapon-problema-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Por defecto (escritorio > 992px), 3 columnas */
    gap: clamp(1.5rem, 3vw, 2.5rem); 
    align-items: stretch; 
    width: 100%; 
}

.aiweapon-problema-card {
    text-align: center; 
}

.aiweapon-problema-icon {
    font-size: 3rem; 
    color: #7F00FF; 
    margin-bottom: 1.5rem; 
    line-height: 1; 
    text-shadow: 0 0 8px rgba(127, 0, 255, 0.7), 0 0 12px rgba(127, 0, 255, 0.5), 0 0 16px rgba(127, 0, 255, 0.3); 
}

.aiweapon-problema-icon i { 
    vertical-align: middle; 
}

.aiweapon-problema-card-title { 
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500; /* Medium */
    font-size: clamp(1.4rem, 4vw, 1.6rem); 
    color: #7F00FF; 
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 0.75em; 
    text-shadow: 0 0 8px rgba(127, 0, 255, 0.5); 
}

.aiweapon-problema-card p.aiweapon-text-small {
    margin-bottom: 0; 
    flex-grow: 1; 
}

/* --- Estilos para Animación de Scroll --- */
.animate-on-scroll {
    opacity: 0; /* Comienza invisible */
    transform: translateY(30px); /* Comienza ligeramente desplazado hacia abajo */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Define la suavidad y duración de la animación */
}

.animate-on-scroll.is-visible { /* Esta clase la añade el JavaScript cuando el elemento es visible */
    opacity: 1; /* Se vuelve visible */
    transform: translateY(0); /* Vuelve a su posición original */
}

/* --- Ajustes Responsivos --- */

/* Tablet: entre 769px y 992px (ejemplo de breakpoint) - 2 columnas */
@media (min-width: 769px) and (max-width: 992px) {
    .aiweapon-problema-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas para tablets */
    }
}

/* Móvil: 768px o menos - 1 columna */
@media (max-width: 768px) { 
    .aiweapon-problema-section {
        min-height: auto; 
        padding-top: clamp(3rem, 15vw, 5rem); 
        padding-bottom: clamp(3rem, 15vw, 5rem);
        align-items: flex-start; 
    }
    .aiweapon-container {
        justify-content: flex-start; 
    }
    .aiweapon-problema-grid {
        grid-template-columns: 1fr; /* 1 columna para móviles */
    }
    .aiweapon-glass-panel { 
        padding: clamp(1.2rem, 5vw, 2rem);
    }
    .aiweapon-problema-icon {
        font-size: 2.5rem; 
        margin-bottom: 1rem;
    }
    .aiweapon-problema-card-title {
        font-size: clamp(1.3rem, 5vw, 1.5rem); 
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bacf7ba *//* --- CSS COMPLETO PARA LA SECCIÓN 'DIFERENCIADORES' --- */
/* Asegúrate de que las fuentes 'Rajdhani' e 'Inter' 
   y la librería de iconos Phosphor Icons estén cargadas.
*/

/* --- Estilos Generales de Sección y Contenedor (si no están definidos globalmente) --- */
.aiweapon-section { 
    /* padding: clamp(3rem, 8vw, 6rem) 0; */ /* Eliminamos padding si usamos flex para centrar en 100vh */
    position: relative;
    box-sizing: border-box; 
}

.aiweapon-container { 
    max-width: 1100px;
    margin: 0 auto; 
    padding: clamp(3rem, 8vw, 6rem) 20px; /* Añadimos padding aquí para el contenido interno */
    box-sizing: border-box;
    display: flex;
    flex-direction: column; 
    align-items: center; 
    justify-content: center; /* Centra el contenido si el container es más alto que el contenido */
    width: 100%; 
}

.aiweapon-section-title { 
    text-align: center;
    margin-bottom: clamp(2rem, 5vw, 4rem);
    width: 100%; 
}

.aiweapon-h2-style { 
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600; 
    font-size: clamp(2rem, 5vw, 2.75rem); 
    color: #E0FFFF; 
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0.75em;
    text-shadow: 0 0 8px rgba(224, 255, 255, 0.7), 0 0 12px rgba(224, 255, 255, 0.5), 0 0 16px rgba(224, 255, 255, 0.3); 
}

.aiweapon-section-title p { 
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.95rem, 1.5vw, 1.05rem); 
    margin-bottom: 0; 
    color: #A0A8B8; 
    max-width: 600px; 
    margin-left: auto;
    margin-right: auto;
}

.aiweapon-text-small { 
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.8rem, 1.2vw, 0.9rem); 
    color: #A0A8B8; 
    line-height: 1.6;
}

.aiweapon-glass-panel {
    background-color: rgba(44, 44, 62, 0.6); 
    backdrop-filter: blur(12px) saturate(150%);
    border-radius: 12px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid #4A4E69; 
    box-shadow: 0 8px 32px 0 rgba(0,0,0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; /* Centra el contenido de la tarjeta verticalmente */
}

.aiweapon-glass-panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(127, 0, 255, 0.15); 
}

/* --- Estilos Específicos para la Sección "Diferenciadores" --- */
.aiweapon-diferenciadores-section {
    background-color: #2C2C3E; /* Base Secundaria de Acero - para alternar con la sección "Problema" */
    min-height: 100vh; /* Altura mínima de la ventana gráfica */
    display: flex; /* Para centrar .aiweapon-container verticalmente */
    align-items: center; /* Centra verticalmente .aiweapon-container */
    justify-content: center; /* Centra horizontalmente .aiweapon-container (si no ocupa todo el ancho) */
    padding: 0; /* Quitamos padding de la sección si usamos flex para centrar en 100vh */
}

.aiweapon-diferenciadores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas para escritorio por defecto */
    gap: clamp(1.5rem, 3vw, 2.5rem); 
    align-items: stretch; /* Las tarjetas tendrán la misma altura */
    width: 100%;
}

.aiweapon-diferenciador-card {
    text-align: center; 
}

.aiweapon-diferenciador-icon {
    font-size: 3rem; 
    color: #E0FFFF; /* Iconos en Blanco Neón para esta sección */
    margin-bottom: 1.5rem; 
    line-height: 1;
    text-shadow: 0 0 8px rgba(224, 255, 255, 0.5), 0 0 12px rgba(224, 255, 255, 0.3); /* Brillo Neón */
}

.aiweapon-diferenciador-icon i { 
    vertical-align: middle; 
}

.aiweapon-diferenciador-card-title { 
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: clamp(1.4rem, 4vw, 1.6rem); 
    color: #E0FFFF; /* Títulos en Blanco Neón para esta sección */
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 0.75em; 
    text-shadow: 0 0 8px rgba(224, 255, 255, 0.5); /* Brillo Neón */
}

.aiweapon-diferenciador-card p.aiweapon-text-small {
    margin-bottom: 0; 
    flex-grow: 1; /* Para que el texto ocupe espacio si la tarjeta es flex */
}

/* --- Estilos para Animación de Scroll (Copiar de aiweapon_animate_on_scroll_js_css si no los tienes ya) --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Ajustes Responsivos --- */

/* Tablet: entre 769px y 992px (ejemplo) - 2 columnas */
@media (min-width: 769px) and (max-width: 992px) {
    .aiweapon-diferenciadores-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    }
}

/* Móvil: 768px o menos - 1 columna */
@media (max-width: 768px) { 
    .aiweapon-diferenciadores-section {
        min-height: auto; /* Altura automática en móvil */
        /* Restauramos el padding para la sección en móvil si lo quitamos para el 100vh de escritorio */
         padding: clamp(3rem, 15vw, 5rem) 0; 
    }
    .aiweapon-container {
        /* El padding del container ya está definido y es adaptable */
        justify-content: flex-start; /* Alinea el contenido arriba en móvil */
    }
    .aiweapon-diferenciadores-grid {
        grid-template-columns: 1fr; /* 1 columna */
    }
    .aiweapon-glass-panel { 
        padding: clamp(1.2rem, 5vw, 2rem);
    }
    .aiweapon-diferenciador-icon {
        font-size: 2.5rem; 
        margin-bottom: 1rem;
    }
    .aiweapon-diferenciador-card-title {
        font-size: clamp(1.3rem, 5vw, 1.5rem); 
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf9fb *//* --- Estilos Generales Base (puedes omitir si ya los tienes globalmente) --- */
/* body {
    background-color: #1A1A2E; 
    color: #A0A8B8; 
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
} */

/* --- CSS COMPLETO PARA LA SECCIÓN 'SERVICIOS' --- */
/* Asegúrate de que las fuentes 'Rajdhani' e 'Inter' 
   y la librería de iconos Phosphor Icons estén cargadas.
*/

.aiweapon-section { 
    position: relative;
    box-sizing: border-box; 
}

.aiweapon-container { 
    max-width: 1100px;
    margin: 0 auto; 
    padding: clamp(3rem, 8vw, 6rem) 20px; /* Padding para el contenido interno */
    box-sizing: border-box;
    display: flex;
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
}

.aiweapon-section-title { 
    text-align: center;
    margin-bottom: clamp(2rem, 5vw, 4rem);
    width: 100%; 
}

.aiweapon-h2-style { 
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600; 
    font-size: clamp(2rem, 5vw, 2.75rem); 
    color: #E0FFFF; /* Blanco Neón/Hielo para el título de la sección */
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0.75em;
    text-shadow: 0 0 8px rgba(224, 255, 255, 0.7), 0 0 12px rgba(224, 255, 255, 0.5), 0 0 16px rgba(224, 255, 255, 0.3); 
}

.aiweapon-section-title p { 
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.95rem, 1.5vw, 1.05rem); 
    margin-bottom: 0; 
    color: #A0A8B8; /* Gris Medio */
    max-width: 600px; 
    margin-left: auto;
    margin-right: auto;
}

.aiweapon-text-small { 
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.8rem, 1.2vw, 0.9rem); /* aprox. 14px */
    color: #A0A8B8; /* Gris Medio */
    line-height: 1.6;
}

.aiweapon-glass-panel {
    background-color: rgba(44, 44, 62, 0.6); /* Base Secundaria de Acero (#2C2C3E) con opacidad */
    backdrop-filter: blur(12px) saturate(150%);
    border-radius: 12px;
    padding: clamp(1.2rem, 2vw, 1.8rem); /* Padding ajustado para layout horizontal de tarjeta */
    border: 1px solid #4A4E69; /* Acero Oscuro Pulido (borde sutil) */
    box-shadow: 0 8px 32px 0 rgba(0,0,0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Para alinear icono y contenido horizontalmente */
    align-items: center; /* Centra verticalmente el icono y el bloque de texto */
    gap: clamp(1rem, 2.5vw, 2rem); /* Espacio entre el icono y el contenido de texto */
}

.aiweapon-glass-panel:hover {
    transform: translateY(-5px) scale(1.03); /* Efecto de levantar y aumentar tamaño */
    box-shadow: 0 12px 40px 0 rgba(127, 0, 255, 0.25); /* Sombra violeta más pronunciada */
}

/* --- Estilos Específicos para la Sección "Servicios" --- */
.aiweapon-servicios-section {
    background-color: #1A1A2E; /* Fondo Gris Acero Oscuro */
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0; /* Quitamos padding de la sección si usamos flex para centrar en 100vh */
}

.aiweapon-servicios-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una sola columna para las tarjetas de servicio */
    gap: clamp(1.2rem, 2.5vw, 1.8rem); /* Espacio entre las tarjetas apiladas */
    width: 100%;
    max-width: 800px; /* Ancho máximo para la columna de tarjetas de servicio */
}

.aiweapon-servicio-card {
    /* Hereda .aiweapon-glass-panel para el estilo base y el layout flex horizontal */
}

.aiweapon-servicio-icon {
    font-size: 2.8rem; /* Tamaño del icono */
    color: #7F00FF; /* Violeta Digital para los iconos */
    line-height: 1;
    text-shadow: 0 0 8px rgba(127, 0, 255, 0.7), 0 0 12px rgba(127, 0, 255, 0.5), 0 0 16px rgba(127, 0, 255, 0.3); /* Brillo Violeta */
    flex-shrink: 0; /* Evita que el icono se encoja */
}

.aiweapon-servicio-icon i { 
    vertical-align: middle; 
    display: block; /* Para asegurar que el line-height no afecte demasiado */
}

/* Contenedor para el título y la descripción del servicio */
.aiweapon-servicio-card-content {
    text-align: left; /* Alinea el texto a la izquierda */
    flex-grow: 1; /* Permite que este contenedor ocupe el espacio restante */
}

.aiweapon-servicio-card-title { 
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700; /* Bold, como en la imagen de referencia */
    font-size: clamp(1.2rem, 2.5vw, 1.4rem); /* Tamaño de fuente adaptable */
    color: #7F00FF; /* Violeta Digital */
    line-height: 1.3; 
    margin-top: 0;
    margin-bottom: 0.3em; /* Menos espacio debajo del título */
    text-shadow: 0 0 6px rgba(127, 0, 255, 0.4); /* Sombra más sutil */
}

.aiweapon-servicio-card-content p.aiweapon-text-small {
    margin-bottom: 0; 
    font-size: clamp(0.8rem, 1.5vw, 0.85rem); /* Texto descriptivo un poco más pequeño */
}

/* --- Estilos para Animación de Scroll --- */
.animate-on-scroll {
    opacity: 0; 
    transform: translateY(30px); 
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
}

.animate-on-scroll.is-visible { 
    opacity: 1; 
    transform: translateY(0); 
}

/* --- Ajustes Responsivos --- */
@media (max-width: 768px) { 
    .aiweapon-servicios-section {
        min-height: auto; /* Altura automática en móvil */
        padding: clamp(3rem, 15vw, 5rem) 0; /* Restaurar padding para móvil */
    }
    .aiweapon-container {
        justify-content: flex-start; /* Alinea el contenido arriba dentro del container en móvil */
        padding-top: 0; 
        padding-bottom: 0;
    }
    /* Las tarjetas ya son 1 columna por defecto en .aiweapon-servicios-grid */
    .aiweapon-glass-panel { /* Aplicable a .aiweapon-servicio-card */
        flex-direction: column; /* Vuelve a apilar icono y texto en móvil */
        align-items: center; /* Centra los elementos apilados */
        text-align: center; /* Centra el texto en móvil */
        gap: 0.8rem; /* Menos gap en móvil */
        padding: clamp(1rem, 4vw, 1.5rem); /* Padding de tarjeta en móvil */
    }
    .aiweapon-servicio-icon {
        font-size: 2.5rem; 
        margin-bottom: 0.8rem; /* Espacio debajo del icono en móvil */
    }
    .aiweapon-servicio-card-content {
        text-align: center; /* Centra el texto en móvil */
    }
    .aiweapon-servicio-card-title {
        font-size: clamp(1.3rem, 5vw, 1.5rem); /* Título de tarjeta en móvil */
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3d58279 *//* --- Estilos Generales Base (puedes omitir si ya los tienes globalmente) --- */
/* body {
    background-color: #1A1A2E; 
    color: #A0A8B8; 
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
} */

/* --- Estilos Generales Reutilizables --- */
.aiweapon-section { 
    position: relative;
    box-sizing: border-box; 
    padding: clamp(3rem, 8vw, 6rem) 0;
}

.aiweapon-container { 
    max-width: 1100px;
    margin: 0 auto; 
    padding: 0 20px; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column; 
    align-items: center; 
    /* justify-content: center; No siempre necesario si el contenido llena el espacio */
    width: 100%; 
}

.aiweapon-section-title { 
    text-align: center;
    margin-bottom: clamp(2.5rem, 6vw, 5rem); 
    width: 100%; 
}

.aiweapon-h2-style { 
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600; 
    font-size: clamp(2rem, 5vw, 2.75rem); 
    color: #E0FFFF; /* Blanco Neón/Hielo */
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0.75em;
    text-shadow: 0 0 8px rgba(224, 255, 255, 0.7), 0 0 12px rgba(224, 255, 255, 0.5), 0 0 16px rgba(224, 255, 255, 0.3); 
}

.aiweapon-section-title p { 
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.95rem, 1.5vw, 1.05rem); 
    margin-bottom: 0; 
    color: #A0A8B8; /* Gris Medio */
    max-width: 600px; 
    margin-left: auto;
    margin-right: auto;
}

.aiweapon-text-small { 
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.8rem, 1.2vw, 0.9rem); /* aprox. 14px */
    color: #A0A8B8; /* Gris Medio */
    line-height: 1.6;
}

.aiweapon-glass-panel {
    background-color: rgba(44, 44, 62, 0.6); /* Base Secundaria de Acero (#2C2C3E) con opacidad */
    backdrop-filter: blur(12px) saturate(150%);
    border-radius: 12px;
    padding: clamp(1.5rem, 2.5vw, 2rem); /* Padding para las tarjetas */
    border: 1px solid #4A4E69; /* Acero Oscuro Pulido (borde sutil) */
    box-shadow: 0 8px 32px 0 rgba(0,0,0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; /* Añadida transición para border-color */
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

.aiweapon-glass-panel:hover {
    transform: translateY(-5px) scale(1.03); 
    box-shadow: 0 12px 40px 0 rgba(127, 0, 255, 0.25); /* Sombra violeta más pronunciada */
}

/* --- Estilos Específicos para la Sección "Metodología" --- */
.aiweapon-metodologia-section {
    background-color: #2C2C3E; /* Base Secundaria de Acero, para alternar con otras secciones */
    /* min-height: 100vh; /* Opcional: si quieres que ocupe toda la pantalla */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    /* padding: 0; */ /* Si se usa 100vh con flex centrado */
}

.aiweapon-timeline {
    position: relative;
    width: 100%;
    max-width: 900px; /* Ancho de la línea de tiempo */
    margin: 0 auto;
    padding: 2rem 0;
}

.aiweapon-timeline::before { /* Línea central vertical */
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px; /* Grosor de la línea */
    background: #4A4E69; /* Color Acero Oscuro Pulido (sutil) */
    transform: translateX(-50%);
    border-radius: 2px;
}

.aiweapon-timeline-item {
    position: relative;
    width: 50%; /* Cada item ocupa la mitad, alternando lados */
    box-sizing: border-box;
    margin-bottom: 2.5rem; /* Espacio entre items */
}

.aiweapon-timeline-item:nth-child(odd) { /* Items impares a la izquierda */
    left: 0;
    padding-right: 35px; /* Espacio para el punto + separación */
    text-align: right;
}

.aiweapon-timeline-item:nth-child(even) { /* Items pares a la derecha */
    left: 50%;
    padding-left: 35px; /* Espacio para el punto + separación */
    text-align: left;
}

.aiweapon-timeline-item::after { /* Punto/Nodo en la línea central */
    content: '';
    position: absolute;
    width: 18px; /* Tamaño del punto */
    height: 18px; /* Tamaño del punto */
    background-color: #4A4E69; /* Color base del punto (Acero Oscuro Pulido) */
    border: 3px solid #2C2C3E; /* Borde del color de fondo de la sección para efecto "flotante" */
    top: 20px; /* Alineación vertical del punto */
    border-radius: 50%;
    z-index: 10; /* Por encima de la línea central */
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Efecto hover para el nodo/punto */
.aiweapon-timeline-item:hover::after {
    background-color: #7F00FF; /* Violeta Digital */
    border-color: #E0FFFF; /* Borde Blanco Neón */
    transform: scale(1.2); /* Ligero aumento */
    box-shadow: 0 0 10px rgba(127, 0, 255, 0.5);
}
/* Asegurar que el transform del hover no interfiera con el de is-active-step */
.aiweapon-timeline-item.is-active-step:hover:nth-child(odd)::after {
     transform: scale(1.35) translateX(50%); /* Un poco más grande que el hover normal */
}
.aiweapon-timeline-item.is-active-step:hover:nth-child(even)::after {
     transform: scale(1.35) translateX(-50%); /* Un poco más grande que el hover normal */
}


.aiweapon-timeline-item:nth-child(odd)::after {
    right: -9px; /* (width/2) */
    transform: translateX(50%);
}
.aiweapon-timeline-item:nth-child(even)::after {
    left: -9px; /* (width/2) */
    transform: translateX(-50%);
}

/* Estilo para el item activo/visible (cuando JS añade la clase .is-active-step) */
.aiweapon-timeline-item.is-active-step .aiweapon-timeline-item::after { 
    background-color: #7F00FF; /* Violeta Digital */
    border-color: #E0FFFF; /* Borde Blanco Neón */
    /* Sombra combinada: Violeta interno, Magenta externo */
    box-shadow: 0 0 10px rgba(127, 0, 255, 0.7),  /* Violeta Digital */
                0 0 20px rgba(255, 0, 255, 0.5);   /* Magenta */
}
/* Mantén las reglas de transform para .is-active-step:nth-child(odd)::after y :nth-child(even)::after igual */
.aiweapon-timeline-item.is-active-step:nth-child(odd)::after {
    transform: scale(1.3) translateX(50%);
}
.aiweapon-timeline-item.is-active-step:nth-child(even)::after {
    transform: scale(1.3) translateX(-50%);
}
.aiweapon-timeline-item.is-active-step:nth-child(odd)::after {
    transform: scale(1.3) translateX(50%);
}
.aiweapon-timeline-item.is-active-step:nth-child(even)::after {
    transform: scale(1.3) translateX(-50%);
}

.aiweapon-timeline-content { /* La tarjeta de contenido de cada fase */
    position: relative; 
    /* Hereda .aiweapon-glass-panel para el fondo, padding, etc. */
    border-color: #4A4E69; /* Borde base sutil, heredado o definido en .aiweapon-glass-panel */
}

/* Estilo para la tarjeta del item activo/visible */
.aiweapon-timeline-item.is-active-step .aiweapon-timeline-content {
    border-color: #FF00FF; /* Borde Magenta en la tarjeta activa */
    box-shadow: 0 8px 30px 0 rgba(255, 0, 255, 0.25), /* Sombra Magenta */
                0 4px 15px 0 rgba(127, 0, 255, 0.15); /* Sombra Violeta más sutil de fondo */
}

.aiweapon-timeline-date { /* "Fase 1", "Fase 2", etc. */
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700; /* Bold */
    color: #7F00FF; /* Violeta Digital */
    font-size: 0.9rem; 
    display: block;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.aiweapon-timeline-content h4 { /* Título de la fase */
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: clamp(1.3rem, 3vw, 1.5rem); 
    color: #E0FFFF; /* Blanco Neón/Hielo */
    margin-top: 0;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

/* --- Estilos para Animación de Scroll --- */
.animate-on-scroll {
    opacity: 0; 
    transform: translateY(30px); 
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
}

.animate-on-scroll.is-visible { 
    opacity: 1; 
    transform: translateY(0); 
}

/* --- Ajustes Responsivos para la Línea de Tiempo --- */
@media (max-width: 768px) { 
    .aiweapon-timeline {
        max-width: 100%; 
        padding: 2rem 10px; 
    }
    .aiweapon-timeline::before { 
        left: 20px; 
        transform: translateX(0);
    }
    .aiweapon-timeline-item, 
    .aiweapon-timeline-item:nth-child(even) { 
        width: 100%;
        left: 0;
        padding-left: 45px; 
        padding-right: 0; 
        text-align: left; 
        margin-bottom: 1.5rem;
    }
    .aiweapon-timeline-item:nth-child(odd) {
        padding-right: 0; 
    }

    .aiweapon-timeline-item::after,
    .aiweapon-timeline-item:nth-child(even)::after,
    .aiweapon-timeline-item:nth-child(odd)::after { 
        left: 20px; 
        transform: translateX(-50%); 
    }
    /* Ajustes para los puntos activos en móvil */
    .aiweapon-timeline-item.is-active-step .aiweapon-timeline-item::after, 
    .aiweapon-timeline-item.is-active-step:nth-child(odd)::after,
    .aiweapon-timeline-item.is-active-step:nth-child(even)::after {
        transform: scale(1.3) translateX(-50%);
    }
    .aiweapon-glass-panel { /* Ajustar padding de tarjetas en móvil */
         padding: clamp(1.2rem, 4vw, 1.8rem);
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dcdbfce *//* --- Variables CSS basadas en la Línea Gráfica (de aiweapon_style_tile_v1) --- */
:root {
    --bg-main: #1A1A2E; /* Azul Medianoche Profundo */
    --bg-main-rgb: 26, 26, 46; /* Para usar en rgba() */
    --text-light: #E0FFFF; /* Blanco Neón/Hielo */
    --accent-primary: #7F00FF; /* Violeta Digital */
    --accent-primary-rgb: 127, 0, 255; /* Para usar en rgba() */
    --accent-secondary: #FF00FF; /* Magenta Eléctrico */
    --accent-secondary-rgb: 255, 0, 255; /* Para usar en rgba() */
    --text-support: #A0A8B8; /* Gris Cósmico Medio */
    --gradient-cta-start: #7F00FF;
    --gradient-cta-end: #5D00A5;

    --input-bg: rgba(20, 20, 35, 0.7);
    --input-border: rgba(74, 78, 105, 0.4);
    --input-focus-border: #FF00FF; /* Coincide con --accent-secondary */
    --input-focus-shadow: rgba(var(--accent-secondary-rgb), 0.25);

    --dropdown-bg: #222538;
    --dropdown-border: #4A4E69;
    --scrollbar-thumb: #4A4E69;
    --scrollbar-thumb-hover: #7F00FF; /* Coincide con --accent-primary */

    --success-bg: rgba(46, 204, 113, 0.25);
    --success-border: rgba(46, 204, 113, 0.5);
    --error-bg: rgba(255, 71, 87, 0.25);
    --error-border: rgba(255, 71, 87, 0.5);

    --font-title: 'Rajdhani', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* --- Estilos Generales Reutilizables --- */
.aiweapon-section { 
    position: relative;
    box-sizing: border-box; 
    padding: clamp(4rem, 10vw, 8rem) 0; 
}

.aiweapon-container { 
    max-width: 1100px;
    margin: 0 auto; 
    padding: 0 20px; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column; 
    align-items: center; 
    width: 100%; 
}

.aiweapon-section-title { 
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem); 
    width: 100%; 
}

.aiweapon-h2-style { 
    font-family: var(--font-title);
    font-weight: 600; 
    font-size: clamp(2rem, 5vw, 2.75rem); 
    color: var(--text-light);
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0.75em;
    text-shadow: 0 0 8px rgba(224, 255, 255, 0.7), 0 0 12px rgba(224, 255, 255, 0.5), 0 0 16px rgba(224, 255, 255, 0.3); 
}

.aiweapon-section-title p { 
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.5vw, 1.05rem); 
    margin-bottom: 0; 
    color: var(--text-support);
    max-width: 600px; 
    margin-left: auto;
    margin-right: auto;
}

/* --- Estilos Específicos para la Sección "Contacto" --- */
.aiweapon-contacto-section {
    background-color: var(--bg-main); 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative; /* Para el video de fondo */
    overflow: hidden; /* Para el video de fondo */
}

/* Video de Fondo para Sección Contacto */
.aiweapon-contact-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0; /* Capa base */
}
.aiweapon-contact-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aiweapon-contact-video-wrapper::after { /* Superposición oscura */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--bg-main-rgb), 0.3); /* Fondo principal con opacidad */
  z-index: 1; /* Encima del video */
}
/* Contenedor del formulario encima del video */
.aiweapon-contacto-section .aiweapon-container {
    position: relative; /* Para que z-index funcione */
    z-index: 2; /* Encima del video y la superposición */
}


.aiweapon-contact-form {
    width: 100%;
    max-width: 800px;
    background-color: rgba(30, 30, 50, 0.25); 
    backdrop-filter: blur(15px) saturate(120%); 
    -webkit-backdrop-filter: blur(15px) saturate(120%); 
    padding: clamp(2rem, 5vw, 3.5rem); 
    border-radius: 16px; 
    border: 1px solid rgba(74, 78, 105, 0.3); 
    box-shadow: 0 15px 35px rgba(0,0,0,0.35), 
                inset 0 1px 1px rgba(255,255,255,0.05); 
}

.aiweapon-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem; 
    margin-bottom: 1.35rem;
    align-items: flex-start;
}
.aiweapon-form-row .aiweapon-form-group {
    flex: 1; 
    min-width: 0;
    margin-bottom: 0; 
}
.aiweapon-form-group.form-group-email {
    flex-basis: calc(45% - 0.75rem);
}
.aiweapon-form-group.form-group-whatsapp-container {
    flex-basis: calc(55% - 0.75rem);
}

.aiweapon-form-group {
    margin-bottom: 1.35rem; 
}

.aiweapon-form-group label {
    display: block;
    font-family: var(--font-title);
    font-weight: 500; 
    font-size: 0.9rem; 
    color: var(--text-support); 
    margin-bottom: 0.5rem; 
    text-align: left;
}

/* Regla general para inputs, select base, textarea y el .choices__inner */
.aiweapon-form-group input[type="text"],
.aiweapon-form-group input[type="email"],
.aiweapon-form-group input[type="tel"], 
.aiweapon-form-group select, 
.aiweapon-form-group textarea,
.choices__inner {
    width: 100%;
    padding: 0 18px;
    background-color: var(--input-bg) !important; 
    border: 1px solid var(--input-border) !important; 
    border-radius: 8px !important; 
    color: var(--text-light); 
    font-family: var(--font-body);
    font-size: 14px;
    box-sizing: border-box; 
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    height: 44px;
    min-height: 44px; 
    display: flex; 
    align-items: center; 
}
.choices__inner { /* Ajustes específicos para Choices.js */
    padding-left: 12px !important; 
    padding-right: 30px !important;
    line-height: normal !important;
}
.choices[data-type*="select-one"] .choices__input { 
    padding: 5px !important; /* Ajustar según sea necesario */
    margin: 0 !important; /* Simplificado */
    background-color: transparent !important;
    height: auto !important; /* Permitir que se ajuste */
    min-height: auto !important;
}
.choices__list--single .choices__item { 
    padding: 0 !important; 
    line-height: normal;
}

.aiweapon-whatsapp-input-group {
    display: flex;
    align-items: stretch;
    gap: 0.75rem; 
    height: 44px;
}
.aiweapon-whatsapp-input-group .choices {
    flex-grow: 0; 
    flex-shrink: 0; 
    flex-basis: 45%; 
    min-width: 150px; 
    display: flex;
}
.aiweapon-whatsapp-input-group .choices .choices__inner {
    height: 100%; 
}
.aiweapon-whatsapp-input-group input[type="tel"] {
    flex-grow: 1; 
    flex-basis: 50%; 
    min-width: 0; 
    height: 100%;
}

.choices { /* Estilos base para el contenedor de Choices */
    margin-bottom: 0; 
    font-family: var(--font-body) !important; 
    height: 100%; 
    display: flex; 
}

.choices__list--dropdown, .choices__list[aria-expanded] {
    background-color: var(--dropdown-bg) !important; 
    border: 1px solid var(--dropdown-border) !important; 
    border-radius: 8px !important;
    color: var(--text-light) !important; 
    margin-top: 4px !important;
    z-index: 100 !important; 
    max-height: 220px !important; 
    overflow-y: auto !important; 
    
    scrollbar-width: thin !important; 
    scrollbar-color: var(--scrollbar-thumb) var(--dropdown-bg) !important; 
}
.choices__list--dropdown::-webkit-scrollbar {
    width: 6px !important; 
    background-color: transparent !important; 
}
.choices__list--dropdown::-webkit-scrollbar-track {
    background: transparent !important; 
    border-radius: 3px !important;
}
.choices__list--dropdown::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb) !important; 
    border-radius: 3px !important;
    border: 1px solid var(--dropdown-bg) !important; 
}
 .choices__list--dropdown::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover) !important; 
}

.choices__list--dropdown .choices__item, 
.choices__list[aria-expanded] .choices__item {
    padding: 8px 12px !important; 
    font-size: 0.9rem !important;
    color: var(--text-light) !important; 
}

.choices__list--dropdown .choices__item--selectable.is-selected,
.choices__list[aria-expanded] .choices__item--selectable.is-selected {
    background-color: rgba(var(--accent-primary-rgb), 0.75) !important; 
    color: #FFFFFF !important; /* O var(--text-light) si se prefiere */
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: rgba(var(--accent-primary-rgb), 0.6) !important; 
    color: #FFFFFF !important; 
}

.choices__list--single .choices__item.is-selected { /* Texto seleccionado en el campo visible */
    color: var(--text-light) !important; 
    background-color: transparent !important; 
}

.choices__input.choices__input--cloned { /* Campo de búsqueda dentro del dropdown */
    background-color: rgba(var(--bg-main-rgb), 0.9) !important; 
    color: var(--text-light) !important;
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    padding: 8px 10px !important; 
    margin: 5px 10px 8px 10px !important; 
    border: 1px solid var(--input-border) !important;
    border-radius: 6px !important;
    width: calc(100% - 20px) !important; 
}
.choices__input.choices__input--cloned::placeholder {
    color: #6a738f !important;
    opacity: 0.8 !important;
}
.choices[data-type*="select-one"]::after { /* Flecha del select */
    content: '';
    height: 0.45em; 
    width: 0.45em;  
    border-style: solid;
    border-color: var(--text-support); 
    border-width: 0 1.5px 1.5px 0; 
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg); 
    margin-top: 0; 
    pointer-events: none;
    transition: transform .2s ease-in-out, border-color .2s ease-in-out;
}
.choices[data-type*="select-one"].is-open::after {
    transform: translateY(-50%) rotate(-135deg); 
    border-color: var(--accent-primary); 
}
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner { 
    border-color: var(--input-focus-border) !important; 
    box-shadow: 0 0 0 2px var(--input-focus-shadow) !important;
}

/* Placeholders para inputs y textarea */
.aiweapon-form-group input[type="text"]::placeholder,
.aiweapon-form-group input[type="email"]::placeholder,
.aiweapon-form-group input[type="tel"]::placeholder,
.aiweapon-form-group textarea::placeholder {
    color: #6a738f; 
    opacity: 0.8;
}

/* Foco para inputs normales y textarea */
.aiweapon-form-group input[type="text"]:focus,
.aiweapon-form-group input[type="email"]:focus,
.aiweapon-form-group input[type="tel"]:focus, 
.aiweapon-form-group textarea:focus { 
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 2px var(--input-focus-shadow), 
                0 0 8px rgba(var(--accent-secondary-rgb), 0.15) inset;
}

.aiweapon-form-group textarea {
    min-height: 100px; 
    height: auto; 
    padding-top: 10px; /* Ajuste para que el texto no empiece pegado arriba */
    padding-bottom: 10px;
    resize: vertical; 
}

.aiweapon-form-group-hidden {
    display: none; 
}

.aiweapon-submit-button { 
    display: inline-block;
    width: 100%; 
    background: linear-gradient(90deg, var(--gradient-cta-start), var(--gradient-cta-end));
    color: #FFFFFF; /* Blanco puro para máximo contraste en botón */
    padding: 15px 30px; 
    border-radius: 8px; 
    text-decoration: none;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1rem; 
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease; /* Transición para el background */
    box-shadow: 0 5px 20px rgba(var(--accent-primary-rgb), 0.35); 
}

.aiweapon-submit-button:hover {
    transform: translateY(-3px) scale(1.02); 
    background: linear-gradient(90deg, var(--accent-secondary), var(--gradient-cta-start)); /* Magenta a Violeta */
    box-shadow: 0 8px 25px rgba(var(--accent-secondary-rgb), 0.4); 
}

/* --- Estilos para Animación de Scroll --- */
.animate-on-scroll {
    opacity: 0; 
    transform: translateY(30px); 
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
    transition-delay: var(--animation-delay, 0s);
}
.animate-on-scroll.is-visible { 
    opacity: 1; 
    transform: translateY(0); 
}

/* --- Estilos para Mensajes del Formulario (Éxito/Error) --- */
#form-messages { /* Estilos base */
  width: 100%;
  padding: 12px 15px;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  text-align: center;
  font-weight: 500;
  font-family: var(--font-body);
  /* display: none; Se maneja por JS */
  box-sizing: border-box;
}
#form-messages.success {
  color: var(--text-light);
  background-color: var(--success-bg);
  border: 1px solid var(--success-border);
}
#form-messages.error {
  color: var(--text-light);
  background-color: var(--error-bg);
  border: 1px solid var(--error-border);
}


/* --- Ajustes Responsivos para el Formulario --- */
@media (max-width: 768px) {
    .aiweapon-contacto-section {
        min-height: auto; 
        padding: clamp(3rem, 10vw, 5rem) 0; 
    }
    .aiweapon-contact-form {
        padding: clamp(1.5rem, 5vw, 2.5rem);
    }

    .aiweapon-form-row {
        flex-direction: column;
        gap: 0; 
    }
    .aiweapon-form-row .aiweapon-form-group {
        margin-bottom: 1.35rem;
        flex-basis: 100% !important; /* Mantener si es necesario para anular especificidad */
        width: 100%;
    }
    
    .aiweapon-whatsapp-input-group {
        flex-direction: row; 
        flex-wrap: nowrap;
    }
    .aiweapon-whatsapp-input-group .choices { 
        flex-basis: 50% !important; 
        min-width: 120px;
    }
    .aiweapon-whatsapp-input-group input[type="tel"] {
        flex-basis: 50% !important;
        min-width: 0;
    }

    .aiweapon-form-group input[type="text"],
    .aiweapon-form-group input[type="email"],
    .aiweapon-form-group input[type="tel"],
    .aiweapon-form-group select,
    .aiweapon-form-group textarea,
    .choices__inner {
        padding: 0 15px; 
        min-height: 46px; 
        height: 46px;
        /* line-height: 44px;  align-items maneja esto mejor */
    }
    .choices__inner { 
        padding-left: 15px !important;
        padding-right: 30px !important; 
    }

    .aiweapon-submit-button {
        font-size: 0.95rem;
        padding: 14px 25px;
    }
}

@media (max-width: 480px) {
    .aiweapon-whatsapp-input-group {
        flex-direction: column; 
        gap: 0.75rem; /* Ajustado para mejor espaciado al apilar */
        height: auto; 
    }
    .aiweapon-whatsapp-input-group .choices,
    .aiweapon-whatsapp-input-group input[type="tel"] { 
        flex-basis: auto; 
        width: 100%;
        min-width: 0;
        height: 44px; 
    }

    /* Para la fila de Red Social y Usuario, si quieres que se apilen en móvil pequeño */
    /* La regla general de .aiweapon-form-row con flex-direction: column ya debería manejarlos */
    /* Si necesitas forzarlo más específicamente: */
    /*
    .aiweapon-form-row:has(#red_social):has(#grupo_usuario_red_social) {
        flex-direction: column !important;
        gap: 0 !important;
    }
    .aiweapon-form-row:has(#red_social) .aiweapon-form-group,
    .aiweapon-form-row:has(#grupo_usuario_red_social) .aiweapon-form-group {
        flex-basis: 100% !important;
        margin-bottom: 1.35rem;
    }
    .aiweapon-form-row:has(#grupo_usuario_red_social) .aiweapon-form-group:last-child {
        margin-bottom: 0;
    }
    */
}/* End custom CSS */