/*estilos abejas*/

html, body
{
  height: 100%;
}

* {
  margin: 0px;
  padding: 0px;
/*  font-family: nicolascochin;*/
}

/*
1.  #F9F4F2
2.  #E7D4C2
3.  #E0BB93
4.  #C0804D  
*/



.container-fluid{
  margin: 0px;
  padding: 0px;
}

.container-whatsapp {
 position: fixed;
 z-index: 999;
 border-radius: 50%;
 bottom: 1px;
 right: 1px;
 padding: 5px;
 transition: ease 0.3s;
 animation: efecto 1.2s infinite;
}

.container-btnCerrarSesion {
  position: fixed;
  z-index: 999;
  border-radius: 50%;
  top: 16px;              /* Posición desde la parte superior */
  right: 16px;            /* Posición desde el lado derecho */
  padding: 5px;
  transition: ease 0.3s;
  animation: efecto 1.2s infinite;
}


.pPrincipal{
 font-family: arial,helvética;
 border: solid #000 1px; 
 background-color: #D4AF37; 
 text-align: center;
 box-shadow: 12px 12px 3px 2px #C2BFBE;
 padding: 5px;

}

.pPrincipal:hover{
  box-shadow: 12px 12px 3px 3px #D7D4D3;
}

.pLujo{
 font-family: arial,helvética;
 border: solid #000 1px; 
 background-color: #000; 
 color: #D4AF37;
 text-align: center;
 box-shadow: 12px 12px 3px 2px #C2BFBE;
 padding: 5px;

}

.pLujo:hover{
  box-shadow: 12px 12px 3px 3px #D7D4D3;
}

.cel{
  font-family: 'Montagu Slab', serif;
  font-family: 'Trirong', serif;
  font-size: 40px;
  color: #fff;
  text-align: left;
  justify-content: center;
}


.nav-item{
  color: white;
}
h1{
 font-family: 'Montagu Slab', serif;
 font-family: 'Trirong', serif;
 
}

h2{
 font-family: 'Montagu Slab', serif;
 font-family: 'Trirong', serif;
 
}

h3{
 font-family: 'Montagu Slab', serif;
 font-family: 'Trirong', serif;
 text-align: center;
 
}

/*
1.  #F9F4F2
2.  #E7D4C2
3.  #E0BB93
4.  #C0804D  
*/



.texto1 {
 width: 200px;
}

.form-control{
 border: solid 2px #C0804D;
}
.form-select{
 border: solid 2px #C0804D;
}
.for-label{
  color: #fff;
}
.form-check-label{
 color: #C0804D;
}

.alquiler{
  text-decoration: none;
  justify-content: center;
  text-align: center;
  color: #D4AF37;
}

.alert{
  padding: 1em;
  color: #fff;
  border-radius: 2px;
  margin-bottom: 20px;
  font-size: 14px;
} 

.alert.error{
  background: #F2DEDE;
  border: 1px solid red;
  color: red;
}

.alert.success{
  background: #4CAE50;
  
}

.input-group-append {
  cursor: pointer;
}


#datepick{
  width: 200px;
  margin-left: 40%;
  margin-top: 2%;
}



     /* botones de inversion 1000 5000 20000 */ 
    .bisel{
      width: 100px;  /* Ancho del botón */
      background: #fff;  /* Fondo, debe ser más claro que el borde */
      border: 7px outset #E0BB93;  /* Grosor del Borde */  /* Color del Borde */
      font-weight: bold;
      font-family: arial,helvética;
      font-size: 15px;
      text-align: center;  /* Alineación del texto */
      text-shadow: -1px -1px rgba(0,0,0,.2);
      background-color: #C0804D;  /* #F9F4F2  #E7D4C2  #E0BB93  #C0804D */
      color: #F9F4F2; /* Color del texto */
      -moz-border-radius: 2.1rem;
      -webkit-border-radius: 2.1rem;

    }

    
    .botonMiInversion{
      box-shadow: inset 3px 3px 3px rgba(255,255,255,.7), inset -2px -2px 3px rgba(0,0,0,.1), 2px 2px 10px rgba(0,0,0,.1);
      width: 90px;  /* Ancho del botón */
      border: 2px solid #fff; /* Borde */
      background: #7777ff;  /* Fondo */
      text-align: center;  /* Alineación del texto */
      text-shadow: -1px -1px rgba(0,0,0,.2);  /* Sombra del texto */
      border-radius: 5px;  /* Bordes redondos */
      color: white;  /* Color del texto */

    }


/*video redondeado*/
.rounded {
  object-fit: cover !important;
  border-radius: 20px !important;
}

/* ol impacto ambiental */
ol{
  font-family: nicolascochin;
  font-size: 1.3rem; 
  padding-right: 10px;
}

/* ul impacto ambiental */
ul{
  font-family: nicolascochin;
  font-size: 1.3rem; 
  padding-right: 10px;
}

  /* video */
      .ratio{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* video corto productos*/
      .corto{
        width: 21.5rem;
        height: 10rem;   
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .error{
        color: red;
        background-color: yellow;
      }

.labelConfirmar{
  font-family: nicolascochin;
  color: #C0804D;
  font-size: 1.2rem;
}

/*estilos para el navbar*/

body {
  background-color: #C0804D;
}

/*
1.  #F9F4F2
2.  #E7D4C2
3.  #E0BB93
4.  #C0804D  
*/


/* -------------- botones navbar ---------------------*/   

/* Asegura que el contenedor principal ocupe todo el ancho */
.container-fluid {
    padding: 0;
    }
.boton{
  box-shadow: inset 5px 5px 5px rgba(255,255,255,.7), inset -2px -2px 3px rgba(0,0,0,.7), 5px 5px 10px rgba(0,0,0,.3);
  border: 3px solid #fff; /* Borde */
  background:  #E0BB93;  /* Fondo botones */
  text-align: center;  /* Alineación del texto */
  /*text-shadow: -1px -1px rgba(0,0,0,.2);  /* Sombra del texto */*/
  border-radius: 10px;  /* Bordes redondos */
  color: #fff;  /* Color del texto */
  font-size: 1.1rem;
  font-weight: bold;
  width: 100% !important; /* Full width */
  margin-bottom: 5px; /* Espaciado entre botones */
}
.boton:hover {
  background-color: #C0804D;
}
/* Active button style */
#active {
  background-color: #F9F4F2 !important;
   font-weight: bold;
  color: #000;
}
/* Para que el texto ocupe todo el ancho */
.texto {
    width: 100%;
}
img.img-fluid {
    width: 100%;
    height: auto;
}

.videoHome {
    width: 100%;
    height: auto;
    border-radius: 20px;
}
.bordeado{
  border: 1px solid #000000;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  padding-left: 10px;
  margin: 20px;
  background-color: #fff;
  font-size: 17px;
  width: 100%;
  margin-top: 10px;
  text-align: left;
  font-family: nicolascochin; 
  font-size: 1.3rem;
}




/*redondeado bordes de textos*/
.bordeadoTextHome{
  border: 2px solid #C0804D;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  padding-left: 10px;
  margin: 20px;
  background-color: #fff;
  font-size: 17px;
  width: 100%;
  margin-top: 10px;
  text-align: left;
  font-family: nicolascochin; 
  font-size: 1.3rem;
}

/*
1.  #F9F4F2
2.  #E7D4C2
3.  #E0BB93
4.  #C0804D  
*/

/* Estilos generales para el cuerpo */


/* Estilos para el botón dorado 3D */

.botonComprar{
  box-shadow: inset 5px 5px 5px rgba(255,255,255,.7), inset -2px -2px 3px rgba(0,0,0,.7), 5px 5px 10px rgba(0,0,0,.3);
  border: 3px solid #fff; /* Borde */
  background:  #E0BB93;  /* Fondo botones */
  text-align: center;  /* Alineación del texto */
  /*text-shadow: -1px -1px rgba(0,0,0,.2);  /* Sombra del texto */*/
  border-radius: 10px;  /* Bordes redondos */
  color: #fff;  /* Color del texto */
  font-size: 1.1rem;
  font-weight: bold;
  width: 100% !important; /* Full width */
  margin-bottom: 5px; /* Espaciado entre botones */
}
.botonDonar{
  box-shadow: inset 5px 5px 5px rgba(255,255,255,.7), inset -2px -2px 3px rgba(0,0,0,.7), 5px 5px 10px rgba(0,0,0,.3);
  border: 3px solid #fff; /* Borde */
  background:  #E0BB93;  /* Fondo botones */
  text-align: center;  /* Alineación del texto */
  /*text-shadow: -1px -1px rgba(0,0,0,.2);  /* Sombra del texto */
  border-radius: 10px;  /* Bordes redondos */
  color: #fff;  /* Color del texto */
  font-size: 1.7rem;
  font-weight: bold;
  width: 50% !important; /* Full width */
  height: 80px;
  margin-bottom: 5px; /* Espaciado entre botones */
  justify-content: center;
  align-items: center;
  padding-top: 17px;
}

.botonRegistro{
   box-shadow: inset 5px 5px 5px rgba(255,255,255,.7), inset -2px -2px 3px rgba(0,0,0,.7), 5px 5px 10px rgba(0,0,0,.3);
  border: 1px solid #fff; /* Borde */
  background-color:  #C0804D;  /* Fondo botones */
  text-align: center;  /* Alineación del texto */
  /*text-shadow: -1px -1px rgba(0,0,0,.2);  /* Sombra del texto */*/
  border-radius: 8px;  /* Bordes redondos */
  color: #000;  /* Color del texto */
  font-size: 1.1rem;
  font-weight: bold;
  width: 100% !important; /* Full width */
  margin-bottom: 5px; /* Espaciado entre botones */
}
.botonRegistro:hover {
  background-color: #E0BB93;
  color: #fff;
}
/*
1.  #F9F4F2   (249,244,242,.2)
2.  #E7D4C2   (231,212,194,.2)
3.  #E0BB93   (224,187,147,.2)
4.  #C0804D   (192,128,77,.2)  
*/

  /* recapcha */
      .text-xs-center {
        text-align: center;
      }
      .g-recaptcha {
        display: inline-block;
        width: 100%;
        max-width: 304px;  /* Tamaño máximo para mantener una buena visibilidad */
        margin: 0 auto;  /* Centrado */
      }

    
      /* anular scroll vertical
      body{
        overflow-y: hidden; 
      }
     */
     .botonRegistroSoporte{
   box-shadow: inset 5px 5px 5px rgba(255,255,255,.7), inset -2px -2px 3px rgba(0,0,0,.7), 5px 5px 10px rgba(0,0,0,.3);
  border: 1px solid #fff; /* Borde */
  background-color:  #C0804D;  /* Fondo botones */
  text-align: center;  /* Alineación del texto */
  /*text-shadow: -1px -1px rgba(0,0,0,.2);  /* Sombra del texto */*/
  border-radius: 8px;  /* Bordes redondos */
  color: #000;  /* Color del texto */
  font-size: 1.1rem;
  font-weight: bold;
  width: 100% !important; /* Full width */
  margin-bottom: 5px; /* Espaciado entre botones */
}

.botonRegistroTuInversion{
   box-shadow: inset 5px 5px 5px rgba(255,255,255,.7), inset -2px -2px 3px rgba(0,0,0,.7), 5px 5px 10px rgba(0,0,0,.3);
  border: 1px solid #fff; /* Borde */
  background-color:  #C0804D;  /* Fondo botones */
  text-align: center;  /* Alineación del texto */
  /*text-shadow: -1px -1px rgba(0,0,0,.2);  /* Sombra del texto */*/
  border-radius: 8px;  /* Bordes redondos */
  color: #000;  /* Color del texto */
  font-size: 1.1rem;
  font-weight: bold;
  width: 100% !important; /* Full width */
  
}
.botonRegistroTuInversion:hover {
  background-color: #E0BB93;
  color: #fff;
}

/*
1.  #F9F4F2
2.  #E7D4C2
3.  #E0BB93
4.  #C0804D  
*/

.boton-dorado {
    display: inline-block;
    padding: 15px 30px;
    text-align: center;
    font-size: 27px;
    font-weight: bold;
    color: #fff;
    background: #E79A3F; /* Gradiente dorado */
    border: 2px solid #c68c1e;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: inset 5px 5px 5px rgba(255,255,255,.7), inset -2px -2px 3px rgba(0,0,0,.7), 5px 5px 10px rgba(0,0,0,.3);
    transition: all 0.3s ease;
}

/* Efecto al pasar el cursor sobre el botón */
.boton-dorado:hover {
    background: linear-gradient(145deg, #d98e00, #f2a900); /* Invertir gradiente para el hover */
    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.3), -8px -8px 10px rgba(255, 255, 255, 0.3); /* Sombra más pronunciada */
    transform: translateY(-4px); /* Eleva el botón al pasar el mouse */
}

/* Efecto al hacer clic */
.boton-dorado:active {
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3); /* Sombra hacia adentro */
    transform: translateY(2px); /* Hacer que el botón se "hunda" un poco */
}

.boton-dorado-cerrar-sesion {
    display: inline-block;
    padding: 3px 10px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background: #E79A3F; /* Gradiente dorado */
    border: 2px solid #c68c1e;
    border-radius: 20px;
    text-decoration: none;
    box-shadow: inset 5px 5px 5px rgba(255,255,255,.7), inset -2px -2px 3px rgba(0,0,0,.7), 5px 5px 10px rgba(0,0,0,.3);
    transition: all 0.3s ease;
}

/* Efecto al pasar el cursor sobre el botón */
.boton-dorado-cerrar-sesion:hover {
    background: linear-gradient(145deg, #d98e00, #f2a900); /* Invertir gradiente para el hover */
    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.3), -8px -8px 10px rgba(255, 255, 255, 0.3); /* Sombra más pronunciada */
    transform: translateY(-4px); /* Eleva el botón al pasar el mouse */
}

/* Efecto al hacer clic */
.boton-dorado-cerrar-sesion:active {
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3); /* Sombra hacia adentro */
    transform: translateY(2px); /* Hacer que el botón se "hunda" un poco */
}