/*
 * Estilos principales para el sitio de novedades de producto.
 *
 * Se utiliza una paleta oscura con acentos en azul para emular el estilo
 * futurista y minimalista del sitio de referencia. Las secciones se
 * alternan mediante la clase `.alt` para variar el fondo y dar ritmo
 * visual. El diseño es completamente responsive, gracias a flexbox y
 * media queries. Animaciones sutiles se aplican cuando las secciones
 * entran en el viewport para añadir dinamismo al scroll.
 */

:root {
  --bg-color: #010b16;
  --bg-alt: #0a1729;
  /* Color principal inspirada en el azul de DNA Capital, aclarada para
     garantizar mayor contraste con el fondo oscuro. */
  --accent-color: #3fa6d6;
  --text-color: #ffffff;
  /* Color secundario para textos descriptivos, ligeramente más claro
     para mejorar la legibilidad en fondos oscuros. */
  --secondary-color: #e9f6ff;
  --nav-bg: rgba(1, 11, 22, 0.7);
  --transition-speed: 0.6s;

  /* Color para los números dentro de los círculos; ligeramente más claro
     que el acento para mejorar su contraste dentro del círculo oscuro */
  --number-color: #7dc6ff;
}

/*
 * Fondo Spline: este contenedor aloja un iframe con la escena 3D. Se
 * posiciona de forma fija detrás de todos los contenidos y no
 * interfiere con el scroll ni con la interacción del usuario. La
 * propiedad pointer-events se establece a none para permitir que
 * cualquier clic o scroll se dirija al contenido superpuesto.
 */
h2{
	text-transform: uppercase;
}
#TangoAI_img{
	padding-top: 150px; 
	margin-bottom: -8rem; 
	width: 70%;
}
  #canvas3d {
    pointer-events: none!important;
  }
  #canvas3d2 {
    pointer-events: none!important;
	scroll-behavior: none!important;
  }
h3{
	  font-family: 'montserrat', sans-serif;

  font-size: 1.7rem;
  font-weight: 600!important;
  margin: 1.5rem 0 1.5rem 0;

 text-shadow: 0px 0px 10px, 0px 0px 5px black;
}
.imagen_section{
	margin-top:80px; 
	width: 400px;
}
.imghome{
	  text-shadow: 2px 2px 4px #000000;
}
.background-iframe2 {
	padding-left: 40%;
  position:absolute;
  top: -40px;
  left: 0%;
  width: 100%;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
}
.background-iframe2 iframe {
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
}


.background-iframe {
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -10!important;
  overflow: hidden;
}
.background-iframe iframe {
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text-color);
  background-color: var(--bg-color);
  overflow-x: hidden;
  line-height: 1.5;
z-index: 4!important;
}

/* Hero container */
.hero {
  position: relative;
  min-height: 75vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--text-color);
  overflow: hidden;


}

/* Contenedor interno del héroe: dos columnas */
.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
}
.hero-left {
  max-width: 55%;
  z-index: 2;
}
.hero-title {
	text-transform: uppercase;
	font-weight: 400!important;
  font-family: 'bebas neue', sans-serif;
 text-align: left!important;
  /* Aumentamos significativamente el tamaño del título para emular la
     jerarquía visual del sitio de referencia DNA Capital. Utilizamos
     un valor clamp que parte de 3rem y crece hasta 6rem en pantallas
     grandes. */
  font-size: clamp(2rem, 4.4vw, 8rem);
  line-height: 1.2;
  margin: 0 0 1rem 0;
  color: var(--secondary-color);
	text-shadow: 0px 0px 10px;
}
.hero-subtitle {
  font-family: 'montserrat', sans-serif;
  /* Incrementamos el tamaño base del subtítulo para mantener la
     proporción con el nuevo tamaño de título. */
  font-size: clamp(1rem, 1.5vw, 1.7rem);
  line-height: 1.6;
  margin-bottom: 3rem;
  color: var(--secondary-color);
	text-shadow: 0px 0px 10px black;
}
.hero-right {
  flex: 1;
  position: relative;
  display: flex;
  justify-content:center;


  height: 940px;
}

.btn-scroll {
  display: inline-block;
  padding: 0.7rem 2rem;
  border-radius: 40px;
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-scroll:hover,
.btn-scroll:focus {
  background-color: var(--accent-color);
  color: var(--bg-color);
}

/* Evita el scroll cuando el menú está abierto */
.no-scroll {
  overflow: hidden;
}

/* Feature Sections */
.feature-section {
  padding: 5rem 2rem;
  
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  /* Las secciones son visibles por defecto. La transición sigue aplicada
     para cuando agreguemos la clase .visible desde JavaScript; de esta
     manera, al entrar en el viewport se realizará una animación suave. */
  opacity: 1;
  transform: none;
  transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
}

/* Alternate background for every other section */
.feature-section.alt {
  background-color: var(--bg-alt);
}

.feature-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.feature-icon {
  flex-shrink: 0;
  font-size: 3rem;
  color: var(--accent-color);
}
.feature-text {
  flex: 1 1 600px;
}
.feature-text h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
  color: var(--accent-color);
}
.feature-text p {
  margin: 0;
  color: var(--secondary-color);
  line-height: 1.6;
}

/* Footer */
#footer {
	position: sticky;
	bottom: 0;
  text-align: center;
  padding: 2rem 1rem;
	width: 100%;
  height: 120px;
  background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 60%);

}

/* --------------------------------------------------------------------------
   NUEVAS ESTILOS PARA LAS SECCIONES DE CARACTERÍSTICAS
   Se agregan al final del archivo para anular estilos anteriores. Estos
   estilos recrean el aspecto de DNA Capital con círculos numerados,
   animaciones al entrar en pantalla y un patrón parallax alternado.
   -------------------------------------------------------------------------- */

.feature-section {
  position: relative;
  /* Incrementamos el padding para dar más aire entre secciones y
     reproducir la sensación de profundidad de DNA Capital */
  padding: 8rem 2rem;
  /* Reservamos espacio en el margen de anclaje para que al navegar
     mediante enlaces internos no se oculten los títulos debajo de la
     barra de navegación fija */
  scroll-margin-top: 6rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  /* Anulamos el fondo heredado de definiciones anteriores */
  background-image: none;
  background-size: initial;
  background-position: initial;
  background-attachment: initial;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
}

/* Eliminamos el pseudo-elemento de patrón alterno para que todas las
   secciones tengan un fondo uniforme y limpio. */
.feature-section::after {
  display: none;
}
.feature-section2 {
  position: relative;
  /* Incrementamos el padding para dar más aire entre secciones y
     reproducir la sensación de profundidad de DNA Capital */
  padding: 8rem 2rem;
  /* Reservamos espacio en el margen de anclaje para que al navegar
     mediante enlaces internos no se oculten los títulos debajo de la
     barra de navegación fija */
  scroll-margin-top: 6rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  /* Anulamos el fondo heredado de definiciones anteriores */
  background-image: none;
  background-size: initial;
  background-position: initial;
  background-attachment: initial;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
}

/* Eliminamos el pseudo-elemento de patrón alterno para que todas las
   secciones tengan un fondo uniforme y limpio. */
.feature-section2::after {
  display: none;
}
.feature-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  box-sizing: border-box;
  z-index: 1;
}

.feature-number {
  /* Aumentamos el tamaño de los círculos numerados para acercarnos a
     los grandes círculos que se observan en DNA Capital */
  width: 320px;
  height: 320px;
  min-width: 320px;
  min-height: 320px;
  border-radius: 50%;
  border: 5px solid var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  /* El número en el círculo ahora es más grande para destacar la
     jerarquía de cada sección */
  font-size: 4rem;
  color: var(--number-color);
  position: relative;
  margin: 0 3rem;
  
}
.feature-number::before {
  content: attr(data-number);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.feature-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--secondary-color);
  line-height: 1.6;
}
.feature-content h2 {
  font-family: 'montserrat', sans-serif;
  /* Ajustamos a un tamaño mayor para replicar la tipografía grande
     característica del sitio de referencia */
  font-size: 3.3rem;
  font-weight: 400!important;
  margin: 0 0 1.5rem 0;
  color: #3fa9f5;
 text-shadow: 0px 0px 10px, 0px 0px 5px black;
}
.feature-content p {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  /* Incrementamos el tamaño de los párrafos para mejorar la legibilidad
     y reflejar el tamaño generoso del sitio de referencia */
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--secondary-color);
}
.feature-content2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #3fa9f5;
  line-height: 1.6;
}
.feature-content2 h2 {
	text-align: center;
  font-family: 'montserrat', sans-serif;
  /* Ajustamos a un tamaño mayor para replicar la tipografía grande
     característica del sitio de referencia */
  font-size: 3.3rem;
  font-weight: 400!important;
  margin: 0 0 1.5rem 0;
  color: #3fa9f5;
text-shadow: 0px 0px 10px, 0px 0px 5px black;
	

}
.feature-content2 p {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  /* Incrementamos el tamaño de los párrafos para mejorar la legibilidad
     y reflejar el tamaño generoso del sitio de referencia */
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--secondary-color);
}
.feature-section:nth-of-type(even) .feature-wrapper {
  flex-direction: row-reverse;
}

.feature-section.visible {
  opacity: 1;
  transform: translateY(0);
}
.feature-section2:nth-of-type(even) .feature-wrapper {
  flex-direction: row-reverse;
}

.feature-section2.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
		.feature-content2 p{
		font-size: 1rem;
	}
	.feature-content p{
		font-size: 1rem;
	}
	h3{
	font-size: 1.5rem;	
	}
	.feature-content h2{
		font-size: 2.8rem;
	}
	.feature-content2 h2{
		font-size: 2.8rem;
	}
	#TangoAI_img{
	margin-top: -150px; 
	margin-bottom: -8rem; 
	width: 100%;
}
	
	#TangoAI h2{
		font-size: 28px;
	}
	
	#TangoAI_img{
	padding-top: 150px; 
	margin-bottom: -8rem; 
	width: 100%;
	
	
}
	.hero-title {
	text-transform: uppercase;
	font-weight: 600!important;
  font-family: 'bebas neue', sans-serif;
 text-align: center!important;
  /* Aumentamos significativamente el tamaño del título para emular la
     jerarquía visual del sitio de referencia DNA Capital. Utilizamos
     un valor clamp que parte de 3rem y crece hasta 6rem en pantallas
     grandes. */
  font-size: clamp(2rem, 10.2vw, 8rem);
  line-height: 1.2;
  margin: -100px 0 1rem 0;
  color: var(--secondary-color);
	text-shadow: 0px 0px 10px;
}
	.hero-inner {
    flex-direction: column-reverse;
    text-align: center;
    align-items: center;
  }
  .hero-left {
	  width: 100%;
    max-width: 100%;
    margin-bottom: 2rem;
  }
  .hero-right {
    justify-content: center;
  }
  .feature-wrapper {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .feature-number {
    margin: 0 0 2rem 0;
  }
  .feature-section::after {
    width: 100%;
    height: 50%;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
  }
	.feature-section2::after {
    width: 100%;
    height: 50%;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

/* Visibility when element is in viewport */
.feature-section.visible {
  opacity: 1;
  transform: translateY(0);
}
.feature-section2.visible {
  opacity: 1;
  transform: translateY(0);
}
#footer {
	position: sticky;
	bottom: 0;
  text-align: center;
  padding: 2rem 1rem;
	width: 100%;
  height: 170px;
  background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 60%);

}
/* Responsive styling */
@media (max-width: 768px) {
	.feature-content2 p{
		font-size: 1rem;
	}
	.feature-content p{
		font-size: 1rem;
	}
	h3{
	font-size: 1.5rem;	
	}
	.feature-content h2{
		font-size: 2.8rem;
	}
	.feature-content2 h2{
		font-size: 2.8rem;
	}
  .nav-links {
    position: fixed;
    top: 70px;
    right: -100%;
    flex-direction: column;
    background-color: var(--nav-bg);
    width: 200px;
    height: calc(100vh - 70px);
    gap: 1.5rem;
    padding-top: 2rem;
    transition: right 0.3s ease;
  }
  .nav-links.show {
    right: 0;
  }
  .nav-toggle {
    display: block;
  }
  .feature-wrapper {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .feature-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
  }
  .feature-text {
    flex: unset;
  }
	#footer {
	position: sticky;
	bottom: 0;
  text-align: center;
  padding: 2rem 1rem;
	width: 100%;
  height: 150px;
  background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 40%);

}
}