body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

#wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}
  
#main {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  height: auto; /* Asegura que ocupe solo la altura necesaria */
  width: 100%; /* Asegura que ocupe todo el ancho disponible */
  margin: 0;
}


#footer{
  margin-top: 0;
}


#main > .inner {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0;
  margin-right: 0;
}

#wrapper #main {
  height: 100%;
  padding: 0;
  margin: 0;
  width: 100%;
  position: relative;

  background-image: url("/web_numisdata/tpl/assets/images/moneda_fondo.png");
  background-repeat: no-repeat;       /* No repetir la imagen */
  background-position: calc(100% - 4vw) center;
  background-size: 100% 110%;      /* Que se ajuste sin deformarse */
  background-attachment: fixed; 

  transition: opacity 1.0s ease;
}

/*.imagen {
  position: relative;
  width: 110%;
  height: 90vh;  
  overflow: hidden;
}

.imagen img {
  position: absolute;
  top: -5%;
  left: 45%;
  transform: translateX(-30%);
  width: 155%;
  height: 120%;
  object-fit: cover;
}*/

.imagen {
  display: none;
}

button{
  all: unset;
  position: absolute;
  right: 0;
  cursor: pointer;
  width: 5%;
  height: 12%;
  margin-top: 3%;
  background-color:none;
  outline: none;
  border-radius: 5px;
  border: none;

  transition: transform 1.0s ease, opacity 1.0s ease;
}

button img{
  width: 100%;
  height: 100%;
  filter: brightness(0.9) contrast(1.1); /* Ilumina y realza los colores */
  transition: filter 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
button img:hover {
  filter: brightness(1.4) contrast(1.2); /* Más intensidad al pasar el mouse */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  transform: scale(1.05);
}

@media screen and (max-width: 736px) {
  #main > .inner {
      display: block;
  }
  .imagen{
    margin-bottom: 10% !important;
    margin-top: 7% !important;
    width: 80% !important;   /* o un ancho fijo si quieres */
    height: 50% !important;
  }
  .moneda{
    width: 60% !important;           /* Tamaño más pequeño */

  }
}




@media(aspect-ratio <= 4/3) {
    #wrapper #main {
        min-height: calc(100vh - 24.9rem); 
         padding-top: 20%;
          background-image: none;
    }
    #main > .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;

    }
    .imagen{
      width: 30%;   /* o un ancho fijo si quieres */
      height: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 4%;
      overflow: hidden;
    }

    .imagen img {
    width: 100%; 
    height: 100%; /* Mantiene la proporción de la imagen */
    display: block; /* Evita espacios abajo de la imagen */
    margin: 0 auto; /* Centra la imagen horizontalmente */
    }

    #footer{
    margin-top: 7%;
    }

    button{
      display: none;
    }

    .siguiente{
      display: none;
    }

    .texto{
      width: 90% !important; /* Asegura que ocupe todo el ancho disponible */
      height: 100% !important; /* Asegura que ocupe toda la altura disponible */
      margin-right: 5% !important;
      margin-left: 5% !important;
    }

    .texto p {
      font-size: 1.7vh !important;
    }
    .texto p em{
      text-align: left !important;
    }
    .texto .image{
      display: none !important;
    }
    .texto .image img{
      display: none;
    }
      
}
@media (aspect-ratio <= 4/3) {

  .moneda{
     /* Ajusta el margen inferior para pantallas con relación de aspecto 4:3 */
      width: 30%;           /* Tamaño más pequeño */
      margin-top: 0 !important;
}
}

.izq{
  width: 100%;
  height: 100%;
}

.texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align:left;
  z-index: 0;
  width: 50%; /* Asegura que ocupe todo el ancho disponible */
  height: 50%; /* Asegura que ocupe toda la altura disponible */
  color: #085c54;
  margin-left: 44%;


  transition: transform 1.0s ease, opacity 1.0s ease;
}

.texto .image{
 width: 175px;   /* o un ancho fijo si quieres */
  height: 175px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4%;
}

.texto .image img{
   width: 100%;
  height: 100%;
  object-fit: contain;   /* 👈 Asegura que se vea entera sin deformarse */
  display: block;        /* La imagen ocupará todo el contenedor */
     /* Si quieres que sea circular */
}

.texto p{
  width: 100%; /* Asegura que los elementos ocupen todo el ancho del contenedor */
  height: 100%;
  margin: 0; /* Elimina márgenes por defecto */
  box-sizing: border-box; /* Incluye el padding dentro del ancho */
  display: flex;
  align-items: center;
  font-size: 2.0vh;
}

.texto p em{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%; /* Asegura que ocupe todo el ancho disponible */
  height: 100%; /* Asegura que ocupe toda la altura disponible */
  color: #085c54;

}


.opacidad {
  opacity: 0;
}

.right{
  transform: translateX(300px);
  opacity: 0;
}

/* Animación para irse a la izquierda */
.left {
  transform: translateX(-300px);
  opacity: 0;
}

.oculto {
  display: none;
}

.ocultar-fondo{
  opacity: 1;
  background-image: none !important;
}

.fondo{
  opacity: 0;
  transition: opacity 1.0s ease;
}

.ima_fondo{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}

.moneda{
  position: absolute;   /* La colocamos encima */
  width: 20% ;           /* Tamaño más pequeño */
  height: auto; 
  margin-top: 5%;
}


.fondo.show{
  opacity: 1;
}


/*.background{
  background-image: url("/web_numisdata/tpl/generic/html/Collage_op.png") !important;
  background-repeat: no-repeat !important;
  
}*/