/* styles.css */

body {
  background-image: url('./images/stars.gif');
  background-size: auto; /* Keep the image's original size */
  background-position: top left; /* Start tiling from the top left corner */
  background-repeat: repeat; /* Tile the image across the body */
}


/* Reset básico y estilos generales */
body, html {
    margin: 0;
    padding: 0;
    background-color: #121212; /* Fondo oscuro */
    color: #ECEFF1; /* Texto claro para contraste */
    scroll-behavior: smooth;
}

body {
    font-family: 'Orbitron', sans-serif;
}

h1, h2, h3 {
    font-family: 'Orbitron', sans-serif;
    background-color: #852c95bd;
    border-radius: 15px;
}

/* Disable text selection for the entire page */
body {
    user-select: none;
}

h1, h2, button {
    text-align: center; /* Centrado general para títulos y botones */
}

/* Estilos de secciones */
.hero-section, .text-section, .features-section, .contact-section {
    background-color: #2E3B4E; /* Color de fondo más claro que el body */
    margin: 20px auto; /* Centrado con margen */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5); /* Sombra para resaltar las secciones */
    max-width: 90%; /* Máximo ancho con margen */
}

/* Estilos específicos de la sección de contacto */
.contact-section form {
    display: flex;
    flex-direction: column;
}

.contact-section input, .contact-section textarea, .contact-section button {
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #3949AB; /* Borde con color destacado */
    background-color: #1C2331; /* Fondo más oscuro para los campos */
    color: #ECEFF1; /* Texto claro */
    border-radius: 4px;
}

.contact-section textarea {
    resize: vertical;
    height: 150px; /* Altura inicial mayor */
}

/* Botones y controles */
button, .slider-prev, .slider-next {
    background-color: #3949AB; /* Color llamativo para botones */
    color: white;
    border: none;
    padding: 5px 5px;
    font-size: 18px;
    border-radius: 4px;
    cursor: pointer;
	opacity:0.8;
}

button:hover, .slider-prev:hover, .slider-next:hover {
    background-color: #283593; /* Oscurece el botón al pasar el ratón */
}

/* Contenedor de botones para alinear a la derecha */
.button-container {
    display: flex;
    justify-content: flex-end; /* Alinea el botón "Next" a la derecha */
    padding: 5px 0; /* Espacio arriba y abajo */
}


/* Ajustes de animación */
@keyframes slideInFromLeft { /* Mantiene tus animaciones personalizadas */
    from {transform: translate(-150%, -50%); opacity: 0;}
    to {transform: translate(-50%, -50%); opacity: 1;}
}

/* Repite para otras direcciones de animación */

/* Mejoras responsivas */
@media (max-width: 768px) {
    .features-section, .contact-section {
        margin: 10px; /* Menos margen en dispositivos pequeños */
        padding: 10px; /* Menos padding */
    }

    .button-container {
        justify-content: center; /* Centrar botones en pantallas pequeñas */
    }
}

/* Estilos generales para barras de desplazamiento */
::-webkit-scrollbar {
    width: 12px; /* Ancho de la barra de desplazamiento vertical */
    height: 12px; /* Altura de la barra de desplazamiento horizontal */
}

/* Estilo del "track" o carril de la barra de desplazamiento */
::-webkit-scrollbar-track {
    background: #333; /* Color de fondo del carril */
    border-radius: 6px; /* Bordes redondeados */
}

/* Estilo del "thumb" o indicador de la barra de desplazamiento */
::-webkit-scrollbar-thumb {
    background-color: #3949AB; /* Color de fondo del indicador */
    border-radius: 6px; /* Bordes redondeados */
    border: 3px solid #333; /* Borde que simula espacio alrededor del indicador */
}

/* Estilo del "thumb" al pasar el ratón */
::-webkit-scrollbar-thumb:hover {
    background-color: #283593; /* Oscurece el indicador al pasar el ratón */
}

/* Estilo para el botón (flechas) de la barra de desplazamiento */
::-webkit-scrollbar-button {
    display: block;
    height: 16px; /* Altura del botón */
    background-color: #3949AB; /* Color de fondo */
    background-repeat: no-repeat; /* Evita que el icono se repita */
    background-position: center; /* Centra el icono en el botón */
}

/* Emoji como indicador para el botón superior */
::-webkit-scrollbar-button:vertical:decrement {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 14l5-5 5 5z"/></svg>');
}

/* Emoji como indicador para el botón inferior */
::-webkit-scrollbar-button:vertical:increment {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>');
}



.features-section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* Ajusta a columnas de al menos 320px y usa el espacio disponible */
    gap: 20px; /* Espacio entre ítems */
    padding: 20px; /* Padding alrededor de toda la sección */
    margin: 20px auto; /* Centrar la sección y añadir margen */
    max-width: 90%; /* Ancho máximo de la sección */
    box-sizing: border-box; /* Asegura que padding y border estén incluidos en el ancho total */
}

.feature {
  border: 2px solid white; /* Borde delgado y blanco */
  border-radius: 10px; /* Radio del borde redondeado */
  margin: 10px; /* Margen pequeño */
  text-align: center; /* Centra el texto dentro del elemento */
  padding: 20px; /* Añade padding para espacio interior */
  box-sizing: border-box; /* Asegura que padding y border estén incluidos en el ancho total */
}


.feature-item {
    
    border: 1px solid #eee; /* Borde delgado y claro */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra sutil */
    padding: 15px; /* Espacio interior */
    text-align: center; /* Alineación del texto */
}

.feature-item h3, .feature-item p {
    margin: 10px 0; /* Margen para separar el título y el párrafo */
}


.interest-text p {
    margin: 20px 0;
    font-weight: bold;
}

.interest-option {
    margin: 5px;
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.interest-option:hover {
    background-color: #0056b3;
}


/* Modal */
.preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 100;
}

.modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: #5ab1dd26;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 600px;
    width: 90%;
    margin: auto;
    position: relative;
}

/* Ajustes para el botón dentro del modal */
.modal-button-container {
    width: 100%; /* Asegura que el contenedor del botón use todo el ancho disponible */
    display: flex;
    justify-content: center; /* Centra el botón horizontalmente */
    margin-top: 20px; /* Espacio entre el contenido del modal y el botón */
}



.hero-section {
    text-align: center; /* Esto centrará el texto y cualquier elemento en línea o en línea-bloque dentro de hero-section */
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px; /* Ajusta este valor según sea necesario para el margen seguro */
}

.logo, .menu-icon {
    height: 50px; /* Ajusta el tamaño según sea necesario */
}

.branding {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinea el texto a la izquierda */
    margin-left: 20px; /* Espacio entre el logo y el texto */
	
}

.branding h1, .branding p {
    margin: 0; /* Elimina los márgenes por defecto */
    padding: 0; /* Elimina el padding por defecto */
    color: whitesmoke; /* Ajusta el color del texto según tu diseño */
    font-weight: normal; /* Ajusta según la importancia visual */
}

.branding h1 {
    font-size: 12px;
    margin-right: 50px;
}

.branding p {
    font-size: 10px; /* Tamaño del subtítulo */
}

.text-section, .features-section {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Para pantallas más grandes que 768px */
@media (min-width: 768px) {
    .text-section, .features-section {
        background-attachment: fixed;
		opacity: 0.95;		
    }
}

/* Estilo para hover */
.feature:hover {
    background-color: #7abde9a8; /* Color suave para el fondo al hacer hover */
    cursor: pointer; /* Cambia el cursor para indicar que es clickeable */
}

/* Clase para el cambio de color al hacer clic */
.feature-clicked {
    background-color: #2d80b7b3; /* Color cuando el elemento ha sido clickeado */
}

/* Estilo personalizado para el elemento <select> */
select {
    background-color: #1C2331; /* Fondo más oscuro, como los campos de formulario */
    color: #ECEFF1; /* Texto claro para contraste */
    padding: 10px; /* Espaciado interno para hacerlo más accesible */
    border-radius: 4px; /* Bordes redondeados para coherencia con el diseño */
    border: 2px solid #3949AB; /* Borde con color destacado, como los otros campos */
    font-family: 'Orbitron', sans-serif; /* Asegura coherencia con la tipografía general */
    margin-top: 10px; /* Añade un margen superior para separarlo de otros elementos si es necesario */
    width: 100%; /* Asegura que ocupe el ancho disponible en su contenedor */
    box-sizing: border-box; /* Incluye padding y border en el ancho total */
    cursor: pointer; /* Cambia el cursor para indicar que es interactuable */
}

/* Mejora el aspecto del <select> al hacer hover */
select:hover {
    background-color: #3949AB; /* Cambia el fondo al pasar el ratón */
    color: #ECEFF1; /* Mantiene el texto claro */
    border-color: #283593; /* Oscurece el borde */
}

/* Estilo del <select> al estar enfocado */
select:focus {
    outline: none; /* Elimina el borde de foco predeterminado */
    border-color: #607D8B; /* Color de borde para estado enfocado, elige un color que destaque */
    box-shadow: 0 0 0 2px rgba(96,125,139,0.5); /* Añade un shadow para resaltar el elemento enfocado */
}

/* Ajustes para opciones deshabilitadas o grupos de opciones */
select:disabled, select optgroup {
    color: #B0BEC5; /* Color más claro para indicar que está deshabilitado o es un grupo */
}

/* Estilo para opciones deshabilitadas */
select option:disabled {
    color: #B0BEC5; /* Color más claro para opciones deshabilitadas */
}


.menu-container {
  position: relative;
  /* Asegúrate de que el .menu-container tenga suficiente altura para el ícono del menú */
  height: 50px; /* Altura ejemplo, ajusta según el tamaño real de tu ícono */
}

.menu-icon {
  cursor: pointer; /* Cambia el cursor a una mano */
  position: absolute;
  top: 10px; /* Ajusta este valor para aumentar el espacio desde el borde superior */
  right: 10px; /* Ajusta este valor para aumentar el espacio desde el borde derecho */
}

.dropdown-menu {
  display: none; /* Inicialmente oculto */
  position: absolute;
  top: 100%; /* Posiciona el menú justo debajo del ícono del menú */
  right: 0;
  background-color: #f9f9f9;
  min-width: 260px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
  /* Añade un límite máximo para asegurar que el menú no se sale de la pantalla */
  max-width: 90vw; /* Ajusta al 90% del ancho de la ventana como máximo */
  /* Usa transform para ajustar la posición horizontal si es necesario */
  transform: translateX(-50%);
  /* Asegura que el borde derecho del menú no se salga de la pantalla */
  right: 50%;
}

.dropdown-menu a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-menu a:hover {
  background-color: #f1f1f1;
}

/* CSS for the flip effect */
.feature.flip-effect {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.feature.flipped {
    transform: rotateY(360deg);
}

/* The background overlay */
.featureInfoModal-overlay {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top of everything */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black background with opacity */
}

/* Modal content box */
.featureInfoModal-content {
    position: relative;
    background-color: black;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%; /* You can adjust the width */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: animatetop;
    animation-duration: 0.4s;
}

/* The Close Button */
.featureInfoModal-close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.featureInfoModal-close:hover,
.featureInfoModal-close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* Add Animation */
@keyframes animatetop {
    from {top: -300px; opacity: 0} 
    to {top: 0; opacity: 1}
}

.featureInfoModal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.featureInfoModal-content {
    background: black;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 90%;
    position: relative;
    display: flex;
    flex-direction: column;
	opacity:0.91;
    
}

.featureInfoModal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 25px;
}

.featureInfoModal-rightPanel {
    margin-top: 20px;
}

.featureInfoModal-rightPanel p,
.featureInfoModal-rightPanel input,
.featureInfoModal-rightPanel button {
    margin: 10px 0;
}

.featureInfoModal-rightPanel button {
    cursor: pointer;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .featureInfoModal-content {
        flex-direction: column;
        max-width: 95%;
    }

    .featureInfoModal-rightPanel {
        order: 3; /* Move the right panel to the bottom on small screens */
    }
}

.embed-container {
    margin-top: 20px; /* Space above the embed container */
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

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

#modelViewer {
    border: none;
    box-shadow: none;
    background-color: transparent;
    outline: none;
}

#modelViewer canvas {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
	opacity:0.9;
}

.dark-background-paragraph {
    background-color: rgba(51, 51, 51, 0.8); /* Dark background with some opacity */
    color: #fff; /* White text for contrast */
    border-radius: 10px; /* Rounded edges */
    padding: 15px; /* Padding inside the background */
    margin: 10px 0; /* Margin for separation between paragraphs */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow for depth */
}