@import 'variables.css';


/* Contenedor Principal */
.container {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  background-color: var(--white-background);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Configuración inicial para las secciones de contenido */
.content-section {
  width: 100%;
  min-height: calc(100vh - 60px);
  transition: transform 0.5s ease, opacity 0.5s ease;
  display: none;
  opacity: 0;
}

.content-section.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
}

/* Sección oculta a la izquierda */
.content-section.hide-left {
    transform: translateX(-100%); /* Desplaza la sección a la izquierda */
}

/* Sección oculta a la derecha */
.content-section.hide-right {
    transform: translateX(100%); /* Desplaza la sección a la derecha */
}

.clickable {
    cursor: pointer;
    transition: all 0.3s ease; /* Transición suave para todos los efectos */
}

.clickable:hover {
    
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra sutil */
    transform: scale(1.02); /* Aumenta ligeramente el tamaño del elemento */
     border-radius: 12px; /* puedes redondearlo aún más en hover */
}


/* Estilo global */
body {
    font-family: Arial, serif;
    margin: 0;
    padding: 0;
    background-color: var(--white-background); /* Color gris claro para el fondo de la página */
    font-family: 'TitleFont'; /* Nombre que usarás para referenciar la fuente */
}

@font-face {
    font-family: 'TitleFont'; /* Nombre que usarás para referenciar la fuente */
    src: url('../assets/fonts/Alternate\ Gothic\ No3\ D\ Regular.otf') format('truetype');
}




/* Barra de Encabezado */
.navbar {
    position: relative;
   height: clamp(40px, 12vw, 90px); /* altura responsive */
    background-color: var(--white-header);
}

/* Elemento central 100% centrado */
.navbar-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
}

/* Laterales con márgenes fijos */
.navbar-left {
    position: absolute;
    left: 50px; /* margen */
    top: 50%;
    transform: translateY(-50%);
}

.navbar-right {
    position: absolute;
    right: 50px; /* margen */
    top: 50%;
    transform: translateY(-50%);
}

/* Imagen de la izquierda (title) */
.navbar-left .logo {
    max-height: calc(clamp(40px, 12vw, 90px) * 0.2); /* Ajusta para que no sea demasiado grande */
    height: auto;
    width: auto;
}

/* Imagen central (icon) */
.navbar-center .logo {
    max-height: calc(clamp(40px, 12vw, 90px) * 0.5); 
    height: auto;
    width: auto;
}

.about-link {
    color: var(--black-main);
    text-decoration: none;
    font-size: clamp(10px, 3vw, 16px);
    transition: color 0.3s ease;
}

.about-link:hover {
    color: var(--red-main);
    border-radius: 12px; /* puedes redondearlo aún más en hover */
}




/* Pie de Página */
.footer {
    padding: 20px 0; /* Espaciado vertical */
    text-align: center; /* Centra el contenido */
    position: fixed; /* Fija el pie de página en la parte inferior */
    bottom: 0; /* Alinea al fondo de la página */
    width: 100%; /* Ancho completo de la página */
    z-index: 100;
}

.footer-content {
    display: flex; /* Usa flexbox para alinear los iconos horizontalmente */
    justify-content: center; /* Centra los iconos en el contenedor */
    align-items: center; /* Alinea los iconos verticalmente en el centro */
    gap: 20px; /* Espacio entre los iconos */
}

.social-icon img {
    width: auto; /* Tamaño uniforme para los iconos */
    height: clamp(20px, 4vw, 30px); 
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
    transition: opacity 0.3s ease; /* Transición suave para el hover */
}

.social-icon:hover img {
    opacity: 0.5; /* Cambia la opacidad del icono al pasar el ratón */
}



/* Botón de regreso al inicio */
.scroll-to-top {
    position: fixed; /* Fija el botón en la pantalla */
    top: 20px; /* Posición desde la parte superior */
    left: 50%; /* Centra horizontalmente */
    transform: translateX(-50%); /* Ajusta la posición para que esté completamente centrado */
    opacity: 0; /* Inicialmente invisible */
    visibility: hidden; /* Inicialmente oculto */
    transition: opacity 0.5s ease; /* Transición solo en opacidad */
    cursor: pointer;
    z-index: 1000;
}

.scroll-to-top img {
    width: auto; /* Establece el ancho fijo */
    height: 50px; /* La altura se ajusta automáticamente para mantener la proporción */
    border-radius: 50%; /* Forma redondeada opcional */
    background-color: transparent; /* Sin fondo */
}

/* Muestra el botón cuando se ha hecho scroll */
.show-scroll-to-top {
    opacity: 1; /* Hace visible el botón */
    visibility: visible; /* Asegura que sea visible */
    transition: opacity 0.5s ease; /* Suaviza la transición */
}

/* Estilos para el splash screen */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white-header); /* Fondo negro para todo el splash screen */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que esté sobre el contenido de la página */
    opacity: 1; /* Visible al inicio */
    transition: opacity 0.2s ease-out; /* Desaparece suavemente */
}

#splash-screen.hide-splash {
    opacity: 0; /* Desaparece */
    pointer-events: none; /* Asegura que no interfiera con la interacción */
}

/* Estilo para el contenedor circular del GIF */
.splash-content {
    width: 50px; /* Ancho del círculo */
    height: 50px; /* Altura del círculo */
    border-radius: 50%; /* Hace que el contenedor sea circular */
    background: var(--white-header); /* Fondo blanco para el círculo */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Oculta cualquier contenido que sobresalga del círculo */
}

.splash-content img {
    width: auto; /* Ajusta el tamaño del GIF automáticamente */
    height: 100%; /* Ajusta la altura del GIF al contenedor */
}

/* Deshabilitar el scroll */
.no-scroll {
    overflow: hidden; /* Deshabilita el scroll */
}

/* Overlay general del popup */
.popup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Caja del popup */
.popup {
    background: var(--white-header); /* Fondo similar a tu header */
    padding: 20px 25px;
    border-radius: 5px; /* Igual que tus inputs y botones */
    width: 280px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Inputs del popup */
.popup input {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var(--black-main);
    color: var(--black-main);
    font-size: clamp(7px, 2vw, 11px);
    font-weight: bold;
}

/* Botones del popup */
.popup button {
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: var(--black-main);
    font-size: clamp(7px, 2vw, 11px);
    font-weight: bold;
    text-transform: uppercase;
    background-color: transparent;
    transition: background-color 0.2s;
}

.popup button:hover {
    background-color: var(--white-header);
}

/* Popup grande */
.popup-large {
    width: 400px; /* más ancho que el popup de login */
    max-height: 90vh;
    overflow-y: auto; /* scroll si es necesario */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Textarea estilo consistente con inputs */
.popup textarea {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var(--black-main);
    color: var(--black-main);
    font-size: clamp(7px, 2vw, 11px);
    font-weight: bold;
    text-transform: none; /* dejamos normal para reseña */
    resize: vertical;
    min-height: 80px;
}

html, body {
    overflow-x: hidden;
}