body {
  padding: 0;
  margin: 0;
}
      
.totalcontainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
   z-index: -1; 

}
  
.container1 {
  transform: scaleX(1.11);
   position: fixed; /* O cambia a "position: fixed" si quieres que sean fijos en la ventana del navegador */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1; 
}
.container2 {
  transform: scaleX(1.25);
   position: fixed; /* O cambia a "position: fixed" si quieres que sean fijos en la ventana del navegador */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1; 
}
.layer-1 {
  height: 100vh;
  width: 100%;
  background-color: #fed8c1;
}

.layer-2 {
  background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453880/codepen/lay2.svg")
    no-repeat center center fixed;
  animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.layer-3 {
  background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453880/codepen/lay3.svg")
    no-repeat center center fixed;
  animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}
.layer-4 {
  background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453880/codepen/lay4.svg")
    no-repeat center center fixed;
  animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s both;
}
.layer-5 {
  background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453880/codepen/lay5.svg")
    no-repeat center center fixed;
  animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.55s
    both;
}
.layer-6 {
  background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453881/codepen/lay6.svg")
    no-repeat center center fixed;
  animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.75s
    both;
}
.layer-7 {
  background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453881/codepen/lay7.svg")
    no-repeat center center fixed;
  animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.85s
    both;
}
.layer-8 {
  background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453882/codepen/lay8.svg")
    no-repeat center center fixed;
  animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.9s both;
}
.laya-please {
  position: fixed;
 
  background-size: cover;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0px;
  z-index: -1; 

}

@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}





   * {
  box-sizing: border-box;
}

:root {
  --color-1: #186cb8;
  --color-2: #2a9a9f;
  --color-3: #f1b211;
  --color-4: #e83611;
  --color-5: #f9002f;
}




h1 {
  font-family: "Exo", sans-serif;
  font-size: 15vw;
  font-weight: 900;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  margin: auto;
  text-transform: uppercase;
  background: linear-gradient(
    219deg,
    var(--color-1) 19%,
    transparent 19%,
    transparent 20%,
    var(--color-2) 20%,
    var(--color-2) 39%,
    transparent 39%,
    transparent 40%,
    var(--color-3) 40%,
    var(--color-3) 59%,
    transparent 59%,
    transparent 60%,
    var(--color-4) 60%,
    var(--color-4) 79%,
    transparent 79%,
    transparent 80%,
    var(--color-5) 80%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.container {
  padding: 1.5rem;
  text-align: center;
  background: radial-gradient(
      circle at 1.4% 1.4%,
      var(--color-1) 0.8%,
      transparent 0.8%
    ),
    radial-gradient(circle at 5.5% 3%, var(--color-2) 0.45%, transparent 0.45%),
    radial-gradient(circle at 2.5% 3.5%, var(--color-3) 0.5%, transparent 0.5%),
    radial-gradient(
      circle at 4.5% 1.2%,
      var(--color-4) 0.25%,
      transparent 0.25%
    ),
    radial-gradient(circle at 98% 98%, var(--color-1) 0.8%, transparent 0.8%),
    radial-gradient(circle at 95% 95%, var(--color-2) 0.45%, transparent 0.45%),
    radial-gradient(
      circle at 94.5% 97.5%,
      var(--color-3) 0.5%,
      transparent 0.5%
    ),
    radial-gradient(
      circle at 98.5% 95.5%,
      var(--color-4) 0.25%,
      transparent 0.25%
    );
}

@media screen and (min-width: 768px) {
  h1 {
    font-size: 6.5rem;
  }
}

.chicken-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #f5f5f5; /* Puedes ajustar el color de fondo según tu diseño */
  padding: 20px; /* Espaciado interior para separar del resto de elementos */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  border-radius: 10px; /* Bordes redondeados */
}

.chicken {
  border: 1px solid #ffffff;
  border-radius: 90px;
  padding: 10px;
  margin: 10px;
  width: 180px;
  height: 400px;
  text-align: center;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)); /* Fondo verde muy oscuro */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: transform 0.3s;
}






.title {
  font-size: 32px;
  font-weight: bold;
  margin: 0; /* Elimina el margen inferior para que no afecte la disposición */
  text-transform: uppercase;
  text-align: center;
  padding: 15px 30px;
  border-radius: 50px;
  background: linear-gradient(135deg, #000, #1a1a1a);
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}


/* Opcional: animación para darle un efecto de destello */
@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.title:hover {
  animation: flash 1s infinite; /* Aplicar la animación al título en el hover */
}


.chicken h2 {
  margin-top: 0;
  font-size: 20px;
  color: #ffff00; /* Yellow color for the title */
  margin-bottom: 10px;
}

.chicken img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto;
  margin-top: 10px;
}

.chicken p {
  margin: 5px 0;
  color: #ffffff;
}

.chicken button {
  padding: 10px 20px;
  min-width: 100px; /* Establecer el ancho mínimo deseado */
  background: linear-gradient(to bottom, blue, #ff6600);
  color: #ffffff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 14px;
}

.chicken button:hover {
  background: linear-gradient(to bottom,lightblue, #ff9933);
}


#selected-chickens {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}



.chicken-count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}







#rent-button button {
  padding: 10px 20px;
  background: #00a9e0; /* Cambia el fondo a un color celeste */
  color: #ffffff;
  border: none;
  border-radius: 20px; /* Rounded button */
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 16px;
}

#rent-button button:hover {
  background: #ff9933; /* Cambia el fondo a naranja en hover */
}


.highlight {
  background: linear-gradient(to bottom, #1a8cff, #0052cc);
  color: #ffffff;
  padding: 1px;
  border-radius: 5px;
}

/* Custom styles for the attributes */
.chicken ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.chicken li {
  background-color: #ffcc66; /* Yellow background for the list items */
  padding: 5px;
  margin: 5px 0;
  border-radius: 5px;
}

#center-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin-bottom: 20px;
}

#rent-button-2 button {
  padding: 7px 15px;
  background: linear-gradient(to bottom, #ff9933, #ff6600);
  color: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 16px;
}

#profitability {
  background-color: #f9f9f9; /* Corrijo el formato del color (#f9f9f9 en lugar de ##f9f9f9) */
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

/* Agrega este estilo para anular el efecto en el contenedor de los cards */
.cards-container .panel {
  background-color: transparent; /* Establece el fondo como transparente para los paneles dentro de .cards-container */
  box-shadow: none; /* Elimina la sombra en los paneles dentro de .cards-container */
}

#profitability h2 {
  font-size: 32px;
  font-weight: bold;
  color: #0080ff;
  text-transform: uppercase;
  margin-bottom: 20px;
   flex: 1; /* Esto hace que el cotizador ocupe el espacio disponible */
  margin-left: 20px; /* Ajusta este valor según el espacio que desees entre el cotizador y el contenedor de gallinas */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

#profitability p {
  color: #333333;
  font-size: 20px;
  margin: 15px 0;
}

/* Animación de resaltado */
@keyframes highlight {
  0%, 100% {
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  50% {
    background-color: #e1f0ff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
}

/* Animación de brillo */
@keyframes shine {
  0% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.0);
  }
  50% {
    box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.8);
  }
  100% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.0);
  }
}

#generate-referral-button {
  padding: 8px 16px;
  background-color: #007bff; /* Azul (cambiar según tus preferencias) */
  color: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Estilo al pasar el mouse sobre el botón */
#generate-referral-button:hover {
  background-color: #0056b3; /* Azul oscuro (cambiar según tus preferencias) */
}

/* Estilos para mostrar el enlace de referido */
#referral-link {
  margin-top: 10px;
  font-size: 14px;
  font-weight: bold;
}

#referral-link span {
  color: #007bff; /* Azul (cambiar según tus preferencias) */
  cursor: pointer;
  text-decoration: underline;
}

/* Estilo al pasar el mouse sobre el enlace de referido */
#referral-link span:hover {
  color: #0056b3; /* Azul oscuro (cambiar según tus preferencias) */
}
#banner-dialog {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
}

.banner-content img {
    width: 100px;
    height: 100px;
    margin-right: 20px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.banner-content p {
    font-size: 18px;
    margin: 0;
}

#close-btn {
    margin-left: auto;
    background-color: #ff5757;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#close-btn:hover {
    background-color: #e04242;
}
.chicken-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .add-remove-buttons {
    display: flex;
  }

  .add-chicken-button,
  .remove-chicken-button {
    width: 25px; /* Ajustar el ancho de los botones */
    height: 25px; /* Ajustar el alto de los botones */
    background-color: lightblue !important; /* Forzar el color celeste */
    color: white;
    cursor: pointer;
    border: none;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
  }

/* Estilo para el contenedor de imágenes y casillero */
.farm-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}

/* Estilo para la imagen de huevo */
.egg-image {
  margin-bottom: 10px;
}

/* Estilo para el casillero */
.user-count-card {
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.user-count {
  font-size: 24px;
  font-weight: bold;
}

.user-count-label {
  font-size: 14px;
}


.custom-button {
    width: 25px;
    height: 25px;
    background-color: lightblue;
    color: white;
    cursor: pointer;
    border: none;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
  }

  .add-remove-buttons .custom-button {
    margin-right: 1px;
  }
/* Estilo para el contenedor principal */
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
  padding: 20px;
}

/* Estilo para los títulos dentro de los paneles */
.panel-title {
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  background-color: #f9f9f9;
  padding: 1px;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

/* Estilo para los paneles */
.panel {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex: 1;
  margin: 0 10px; /* Añade un espacio entre los paneles */
}
@media (max-width: 400px) {
  .main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
    padding: 20px;
  }

 .cards-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Cambiado de "center" a "flex-start" */
    flex-wrap: wrap; /* Añadir flex-wrap para asegurarse de que los paneles no se sobrepongan */
}


  /* Ajustar el margen de los paneles en pantallas pequeñas */
  .panel {
    margin: 10px 0;
  }
}

/* Estilos para pantallas más grandes */
@media (min-width: 401px) {
  .main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
    padding: 20px;
  }

  .cards-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap; /* Añadir flex-wrap para asegurarse de que los paneles no se sobrepongan */
  }





.egg-image {
   width: 25px;
  height: auto;
  margin-right: 10px;
}
.cardss {
  display: inline-block;
}


/* Estilo para el casillero */
.user-count-cardss {
  background-color: transparent;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
.panel-expanded {
    display: block !important;
  }
    #header {
      position: fixed;
      top: 10px;
      left: 10px;
      background-color: rgba(0, 0, 0, 0.6);
      padding: 10px;
      border-radius: 10px;
    }

    .expanded-button {
      padding: 5px 10px;
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      border: none;
      border-radius: 0 0 10px 10px;
      cursor: pointer;
      font-size: 14px;
    }

    .panel {
      display: none;
      position: absolute;
      bottom: 40px;
      left: 10px;
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      border-radius: 10px;
      padding: 10px;
    }

    .panel-expanded {
      display: block;
    }
    .gallinas-list {
    font-size: 18px;
    margin: 20px;
  }

  .gallina-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-top: 10px;
    display: none; /* Comenzar con las imágenes ocultas */
    background-color: #f0f0f0;
    background-size: cover;
    background-position: center;
  }