@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('/font/Poppins-Medium.ttf') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Cursiva';
  font-style: normal;
  font-weight: 400;
  src: url('/font/GrandHotel-Regular.ttf') format('woff');
  font-display: swap;
  
}

/* Estructura general */
body,
header,
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px; /* Espacio desde el borde superior para pantallas grandes */
  flex: 1;

  

  /* boton CUADRADOS REDES */
  .botones-imagen {
    display: flex;
    justify-content:center; /* Centra los botones horizontalmente */
    align-items: center; /* Alinea verticalmente si es necesario */
    gap: 30px; /* Espacio entre los botones */
    margin-top: 10px; /* Ajusta el margen superior si es necesario */
    opacity: 0.8; /* Invisible por defecto */
  }
  
  .boton-sociales {
    width: 50px; /* Define el ancho de los botones */
    height: 50px; /* Define la altura para que sea cuadrado */
    padding: 0px;
    border: none;
    background: none;
    cursor: pointer;
  }
  
  .boton-sociales img {
    background-color: #00000088;
    width: 90%;
    height: 90%;
    object-fit: cover; /* Ajusta la imagen para que cubra el botón */
    border-radius: 100%; /* Agrega un pequeño borde redondeado si quieres */
    transition: transform 0.2s; /* Efecto de hover suave */
  }
  
  .boton-sociales:hover img {
    transform: scale(1.25); /* Efecto de aumento al hacer hover */
  } 
}

header {
   padding-top: 0px; /* Reduce el padding superior en pantallas medianas */
   margin-bottom: 0px;

}

.logo {
  width: 165px;
  height: 165px;
  margin-bottom: 0px;
  padding-top: 0px; /* Reduce el padding superior en pantallas medianas */
  object-fit: cover;
  transform: scale(1);
}

body {
  padding-top: 0px; /* Reduce el padding superior en pantallas medianas */
  font-family: "Poppins", sans-serif;
  color: white;
  background: linear-gradient(to left, #fc1ba5, #f8a1e2);
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  gap: 30px;
  position: relative;
}

/* Imagen de fondo en la parte inferior */
body::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw; /* Ocupa todo el ancho de la pantalla */
  height: auto; /* Ocupa el 25% de la altura total de la pantalla */
  min-height: 75vh;
  /*background-image: url('assets/boton_tienda.webp'); */
  background-size: cover; /* Asegura que la imagen cubra todo el ancho */
  background-repeat: no-repeat;
  background-position: center bottom; /* Mantiene la imagen centrada en la parte inferior */
  opacity: 0.11;
  pointer-events: none;
  z-index: -1;
}



h1 {
  margin: 0;
  font-family: "Cursiva", sans-serif;
  font-size: 48px;
  color: #030303;
  /*text-shadow: 1px 1px 35px rgb(0, 0, 0);*/
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6); /* Menos desenfoque */
}

  h2 {
    font-size: 14px;
    margin: 0 0 2px 0;
    font-weight: 400;
  }

  /* Texto NOMBRE SERVICIOS */
  h3 {
    font-family: "Poppins", sans-serif;
    text-align: center;
    margin-bottom: 12px;
    font-size: 14px;
    color: #ffffff;
    white-space: normal; /* Permite el salto de línea */
    line-height: 1.1; /* Ajusta el espaciado entre las líneas de texto */
    text-shadow: 2px 2px 5px #000000;
  }

  /* Texto NOMBRE PROFESIONAL */
  h4 {
    font-family: "Poppins", sans-serif;
    text-align: center;
    margin-bottom: 2px;
    font-size: 15px;
    color: #ffee00;
    text-shadow: 2px 2px 5px #000000;
  }

   /* Texto AVISO EN RESERVA DE TURNOS */
   h5 {
    font-family: "Poppins", sans-serif;
    text-align: center;
    margin-bottom: 20px;
    font-size: 15px;
    color: #ffee00;
    white-space: normal; /* Permite el salto de línea */
    line-height: 1.1; /* Ajusta el espaciado entre las líneas de texto */
    text-shadow: 2px 2px 5px #000000;
  }

  a {
    text-decoration: none; /* Elimina el subrayado del enlace */
  }

  .tachado {
    color: rgb(12, 0, 0);
    text-shadow: 1px 1px 5px #b302027a;
    
  }

  .promo {
    color: rgb(243, 208, 11);
    text-shadow: 2px 2px 5px #000000;
  }

  

  .horario {
    color: rgb(255, 255, 255);
  }
 
  .promo_descrip {
    color: rgb(235, 220, 135);
    text-decoration: none; /* Elimina el subrayado del enlace */
    text-shadow: 2px 2px 0px #000000;
  }

  .premium {
    color: rgb(255, 255, 255);
    text-decoration: none; /* Elimina el subrayado del enlace */
    text-shadow: 2px 2px 3px #000000;
  }
  
  .texto-mediano {
    font-family: "Poppins", sans-serif;
    text-align: center;
    margin-bottom: 2px;
    font-size: 10px; /* Tamaño de fuente más pequeño */
    text-shadow: 2px 2px 5px #000000;
  }

  .texto-casi-chico {
    font-family: "Poppins", sans-serif;
    text-align: center;
    margin-bottom: 5px;
    font-size: 9px; /* Tamaño de fuente más pequeño */
    color: #ffffff;
    text-shadow: 2px 2px 5px #000000;
    padding: 4px;
  }

  .texto-chico {
    font-family: "Poppins", sans-serif;
    text-align: center;
    margin-bottom: 2px;
    font-size: 8px; /* Tamaño de fuente más pequeño */
    color: #ffffff;
    text-shadow: 2px 2px 5px #000000;
  }

  main {
    gap: 15px;

/* Estilo para el botón de Roblox */
.btn_blanco {
  display: flex;
  align-items: center;
  justify-content: center; /* Alinea el contenido (texto) en el centro */
  position: relative;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 16px;
  width: 90vw; /* Ocupa todo el ancho de la pantalla */
  max-width: 540px;
  height: 50px; /* Permite que el botón crezca en altura según el contenido */
  background-color: #ffffff;
  color: #333;
  border: 2px solid rgb(0, 0, 0);
  border-radius: 30px;
  transition: transform 0.2s;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
  outline: none;
  padding: 10px; /* Espacio interno */
  text-align: center; /* Centra el texto */
  white-space: normal; /* Permite el salto de línea */
  line-height: 1.4; /* Ajusta el espaciado entre las líneas de texto */
  
}

.btn_blanco:hover {
  cursor: pointer;
  background-color: #ffffff3f;
  border: 2px solid rgb(0, 0, 0);
  color: white;
  transform: translateY(-5px);
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.4);
}

/* Asegura que el texto esté centrado en varias líneas */
.btn_blanco span {
  flex-shrink: 0;
}

}

/* Estilos generales para todos los elementos de lista */
.list-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  width: 16rem;
  max-width: 540px;
  background-color: #00000033;
  color: #dfdfdf;
  border: 2px solid rgb(0, 0, 0);
  border-radius: 5px;
  transition: transform 0.2s;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
  outline: none;
  padding: 10px;
  text-align: center;
  white-space: normal;
}

/* Ajuste de tamaños de fuente y espaciado entre líneas */
.list-small { font-size: 12px; line-height: 1.2; }
.list-medium { font-size: 13px; line-height: 0.5; }
.list-large { font-size: 14px; line-height: 1.2; }

/* LISTA DE SERVICIOS, RESERVAS, UBICACION y TIENDA para mostrar en el Div de los botones Blancos que usen Toggle  */
/* LISTA DE TIENDA para mostrar en el Div de los botones Blancos que usen Toggle  */
#reservationList, #locationList, #tiendaList, #tiendaList2 {
  @extend .list-container;
  @extend .list-medium;
}

/* LISTA DE SERVICIOS, RESERVAS Y UBICACION para mostrar en el Div de los botones Blancos que usen Toggle  */
#serviceList, #serviceList1, #serviceList2 {
  @extend .list-container;
  @extend .list-large;
}

/* LISTA DE SEGUNDO MENU UBICACION */
#locationList1 {
  @extend .list-container;
  @extend .list-small;
}





/* boton Tienda*/
.bg_tienda {
  position: relative;
  overflow: hidden;
}

.bg_tienda::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-image: url('assets/boton_tienda.webp');*/
  background-size: cover;
  background-position: center;
  opacity: 0.3; /* Ajusta la opacidad aquí */
  z-index: -1; /* Asegura que el contenido esté por encima de la imagen */
  margin-bottom: 5px; /* Espacio reducido para móviles */
}

.item-linea-detalle-descritienda{
  align-items: center;
  text-align: center;
  padding: 1px;
  font-size: 12px;
  color: #ffffff;
  white-space: normal; /* Permite el salto de línea */
  line-height: 1.4; /* Ajusta el espaciado entre las líneas de texto */
  height: auto;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  text-shadow: 2px 2px 5px #000000;
}

.item-linea-detalle-descriproducto{
  align-items: center;
  text-align: center;
  padding: 1px;
  font-size: 14px;
  color: #ffffff;
  white-space: normal; /* Permite el salto de línea */
  line-height: 1.4; /* Ajusta el espaciado entre las líneas de texto */
  height: auto;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  text-shadow: 2px 2px 5px #000000;
}

/* Seccion SERVICIOS */
.content-container-servicio {
  width: 100%;
  max-width: 500px;
  padding: 0px;
  background-color: #00000022;
  border-radius: 8px;
  text-align: center; /* Centra el texto */
  margin-bottom: 2px; /* Espacio reducido para móviles */
}

.content-container-servicio:hover {
  cursor: pointer;
  color: white;
  transform: translateY(-5px);
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.4);
  
}

.flecha {
  transition: transform 0.3s ease;
  font-size: 10px;
  display: inline-block;
  opacity: 0.4; /* Ajusta la transparencia de la imagen */
  color: black;
}

.flecha.abierta {
  transform: rotate(180deg);
  color: white;
  
}


/* Seccion CREMAS LES RULES */
.content-container-producto {
  width: 100%;
  max-width: 500px;
  padding: 0px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 2px;
  position: relative;
  background-color: var(--bg-color, #00000044);
  margin-bottom: 5px; /* Espacio reducido para móviles */
}

.content-container-producto:hover {
  cursor: pointer;
  color: white;
  transform: translateY(-5px);
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.4);
}


/* Pseudo-elemento para la imagen de fondo */
.content-container-producto::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--bg-image);
  background-size: 400px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.6; /* Ajusta la transparencia de la imagen */
  border-radius: 8px;
  z-index: -1;
}

/* Colores y fondos específicos para cada seccion producto*/
.content-container-producto.hidra {
  --bg-color: #0088ff44;
  --bg-image: url('assets/hidra.webp');
}

.content-container-producto.nutri {
  --bg-color: #6020ff44;
  --bg-image: url('assets/nutri.webp');
}

.content-container-producto.reco {
  --bg-color: #ceaa0844;
  --bg-image: url('assets/reco.webp');
}

.content-container-producto.selladora {
  --bg-color: #ce080844;
  --bg-image: url('assets/selladora.webp');
}



.grid-item-servicio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align:left;
  padding: 1px;
  
  
  white-space: normal; /* Permite el salto de línea */
  line-height: 1.1; /* Ajusta el espaciado entre las líneas de texto */
 
}

.grid-item-servicio p {
  margin: 5px;
  font-size: 13px;
  color: #ffffff;
}


/* Seccion reserva de turnos */
.content-container {
  width: 100%;
  max-width: 500px;
  margin: 1 auto;
  padding: 0px;
  background-color: #00000022;
  border-radius: 8px;
  text-align: center; /* Centra el texto */
  margin-bottom: 2px; /* Espacio reducido para móviles */
}


.content-container:hover {
  cursor: pointer;
  color: white;
  transform: translateY(-5px);
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.4);
}


.grid-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  white-space: normal; /* Permite el salto de línea */
  line-height: 1.1; /* Ajusta el espaciado entre las líneas de texto */
}

.grid-item p {
  margin: 0;
  font-size: 13px;
  color: #ffffff;
}

.icon {
  width: 100%;
  max-width: 40px; /* Ajusta el tamaño máximo del icono */
  height: auto;
}

/* Estilos para texto de los botones de mapa y ubicacion */
.content-container-linea {
  align-items: center;
  width: 100%;
  max-width: 500px;
  background-color: #00000022;
  border-radius: 8px;
  text-align: center; /* Centra el texto */
  margin-bottom: 2px; /* Separacion entre cada "boton" */
  height: auto;
}


.content-container-linea:hover {
  cursor: pointer;
  color: white;
  transform: translateY(-5px);
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.4);
}


.item-linea {
  text-align: center;
  width: 100%;
  padding: 8px;
  white-space: normal; /* Permite el salto de línea */
  line-height: 1.1; /* Ajusta el espaciado entre las líneas de texto */
  height: auto;
  font-size: 13px;
  color: #ffffff;
}

.item-linea-detalle{
  align-items: center;
  text-align: center;
  padding: 1px;
  
}

.item-linea-detalle p {
  font-size: 11px;
  color: #ffffff;
  white-space: normal; /* Permite el salto de línea */
  line-height: 0.5; /* Ajusta el espaciado entre las líneas de texto */
  height: auto;
}

.item-linea-detalle-descriservicio {
  align-items: center;
  text-align: left;
  padding: 5px;
  font-size: 10px;
  color: #f5f0c1;

  white-space: normal; /* Permite el salto de línea */
  line-height: 1.4; /* Ajusta el espaciado entre las líneas de texto */
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  text-shadow: 1px 1px 1px #000000;

  /* Animación */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.8s ease;
}

/* Cuando se muestra */
.item-linea-detalle-descriservicio.show {
  max-height: 1000px; /* Valor alto para que se expanda completamente */
  opacity: 1;
}

footer {
  width: 100%;
  background-color: #00000055; /* Cambia el color al hacer hover */
  text-align: center;
  font-size: 11px;
  padding: 5px 0; /* Añade un poco de padding para el contenido del footer */
}

footer p {
  margin: 0; /* Elimina el margen del párrafo */
}

footer a {
  display: inline-block;
  margin-top: 3px; /* Añade un pequeño margen superior si es necesario */
}


/* Estilos generales del botón en el footer */
footer button {
  font-size: 12px;
  color: #030303; /* Color del texto */
  background-color: #ffffff55; /* Fondo del botón */
  border-radius: 10px;
  border: 1px solid #00000069; /* Bordes del botón */
  position: relative;
  align-items: center; /* Alinea verticalmente */
  justify-content: center; /* Centra el contenido del botón */
  transition: all 0.3s ease;
}

footer button:hover {
  background-color: #52030388; /* Cambia el color al hacer hover */
  cursor: pointer;
  color: #ffffff; /* Color del texto */
  border: 1px solid #420101d2; /* Bordes del botón */
  align-items: center; /* Alinea verticalmente */

}

/* Icono antes del texto del botón */
footer button::before {
  content: "🌟"; /* Icono o texto antes */
  font-size: 12px; /* Ajusta el tamaño del icono */
  display: inline-block; /* Asegura que se comporte como parte del flujo del botón */
  opacity: 0; /* Invisible por defecto */
  transition: opacity 1s ease, transform 0.3s ease;
}

/* Icono después del texto del botón */
footer button::after {
  content: "🌟"; /* Icono o texto después */
  font-size: 12px;
  display: inline-block;
  opacity: 0;
  transition: opacity 1s ease, transform 0.3s ease;
}

/* Efecto hover: el icono aparece junto al texto */
footer button:hover::before,
footer button:hover::after {
  opacity: 0.9; /* Iconos visibles al hacer hover */
}