/* ============================== */
/* 1. Reset básico y estilos globales */
/* ============================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: Arial, sans-serif;
  background-color: #D9DDDB;
  overflow: hidden;
}




/* ============================== */
/* 2. Sección Hero (Imagen de fondo animada) */
/* ============================== */
/* Define variables CSS globales para la posición del fondo */
/* Define las variables globales para la posición del fondo */
:root {
  --bg-pos-initial: left center;
  --bg-pos-mid: left bottom;
}

/* Para pantallas pequeñas, se ajusta la posición inicial */
@media (max-width: 768px) {
  :root {
    --bg-pos-initial: left top;
    /* En este ejemplo, mantenemos el punto medio igual, pero podrías modificarlo si lo necesitas */
    --bg-pos-mid: left bottom;
  }
}

.hero {
  position: relative;
  height: 110vh;
  background: linear-gradient(rgba(217,221,219,0.7), rgba(217,221,219,0.7)),
              url('../img/Mesa de trabajo Nodo.png') no-repeat left center;
  background-size: cover;
  background-attachment: fixed;
  background-color: #D8DDDB;
  animation: backgroundPan 30s ease-in-out infinite;
  background-position: left top !important;
  background-attachment: scroll !important;
}



@keyframes backgroundPan {
  0%, 40%, 100% { background-position: left top !important; }
  60% { background-position: left top !important; }
}



/* Solo en móviles se aplica la capa clara */
@media (max-width: 768px) {
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    pointer-events: none;
  }
}



/* ============================== */
/* 3. Otras secciones (no relacionadas con la imagen de fondo) */
/* ============================== */

/* Overlay para evitar oscurecer el fondo */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0); /* Ajusta la opacidad si se requiere oscurecer un poco */
  pointer-events: none;
}

/* Contenido centrado en la sección Hero */
.content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  top: 40%;
  transform: translateY(-50%);
  padding: 10px;
}

.content img {
  width: 270px;
  margin-bottom: 5px;
}

/* Texto informativo */
.info-text {
  font-size: 11px;
  max-width: 600px;
  margin: 5px auto;
  color: #1b2b39;
}

/* Contenedor para el formulario */
.input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

label {
  font-size: 0.8rem;
  color: #1b2b39;
}

/* Estilo para el input numérico */
.numeric-input {
  width: 260px;
  height: 45px;
  font-size: 2rem;
  text-align: center;
  border: 2px solid #1b2b39;
  border-radius: 5px;
  background: transparent;
  color: #1b2b39;
  outline: none;
  transition: border-color 0.3s ease;
  margin-bottom: 5px; /* Espacio inferior para separar de otros elementos */
}

.numeric-input:focus {
  border-color: #F0822D;
}

/* Eliminar flechas en navegadores Webkit y Firefox */
.numeric-input::-webkit-inner-spin-button,
.numeric-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.numeric-input {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Botón de generación */
.generate-btn {
  padding: 10px 20px;
  font-size: 1rem;
  color: #fff;
  background: #1b2b39;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
   /* Separación inferior */
}

.generate-btn:hover {
  background: #629335;
}

/* ============================== */
/* 4. Slider de patrocinadores */
/* ============================== */

/* Contenedor del slider */
#slider {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 180px;
  height: 180px;
  overflow: hidden;
  text-align: center;
  border-radius: 10px;

}

#mini-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

#mini-slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#mini-slider img.active {
  opacity: 1;
}
/* ============================== */
/* 5. Firma del desarrollador y Certificados */
/* ============================== */

/* Firma del desarrollador */
.developer-role {
  position: fixed;
  bottom: 27px;
  left: 10px;  
  color: #fff;
  padding: 5px 50px;
  font-size: 0.6rem;
  border-radius: 5px;
}

/* Estilo para el contenedor del certificado generado */
.certificate-container {
  margin: 50px auto;
  max-width: 600px;
  width: 90%;
  padding: 10px;/* espacion del contenido dentro del container */
  background-color: #ffffff48;
  color: #1b2b39;
  border-radius: 5px;
  text-align: justify;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .certificate-container {
    margin: 10px auto;
    background-color: #ffffff72;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 9999;
  }

  #slider {
  width: 100px;
  height: 100px;

}
}

.certificate-title {
  font-size: 1.1rem;
  margin-bottom: 15px;
  text-align: center;
}

.certificate-text {
  margin-bottom: 10px;
  line-height: 1.4;
  font-size: 12px; /* base: móvil */
}

/* Para pantallas grandes (ej. PC) */
@media (max-width: 768px) {
  .certificate-text {
    font-size: 11px;
  }
}

.certificado-total {
  margin: 0rem 0;
  padding: 1rem;
  background-color: #ffffff65;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding-bottom: 100px;
  position: relative;
  z-index: 1;
}

#logo-congreso{
  width:350px;
  transition:transform .4s ease;
  backface-visibility:hidden;
}

#logo-congreso.girando{
  transform:rotateX(90deg);
}