@font-face {
    font-family: 'Houstonville';
    src: url('../assets/fonts/Houstonville.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gram';
    src: url('../assets/fonts/Gram.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body{
    background-color: #3d3d3d;
    /* background-image: url("../imagenes/WhatsApp\ Image\ 2025-04-11\ at\ 1.16.21\ PM.jpeg"); */
    background-size: cover;  /*se ajusta al tamaño sin recortar*/
    backdrop-filter: blur(15px);
    background-position: center; 
    background-repeat: repeat;
    min-height: 100vh; /* ✅ Mejora compatibilidad en móviles */
    margin: 0;      /* saca espacios extras */
    overflow-x: hidden;
}

h5{
    font-family: gram;
    line-height: 2;
    font-size: 1.5rem ;
    letter-spacing: 5px;
}



p {
    font-family: inter;
    line-height: 1.5;
    font-size: 1.5rem ;
    letter-spacing: 1px;
}

.mi-boton{
    font-family: inter;
}

.mi-boton:hover{
    background-color: #E46670;
}


.mi-boton {
    color: #1e1e1e;
    margin-top: 5px;
    margin-left: 5px;
    border-radius: 20px;
    border: none;
    /* animation: bounce-spin 1.5s infinite alternate; */
    /* background-color: #E46670;  */
     animation: bounce 1.2s infinite, glow 1.5s alternate infinite; 
     background: linear-gradient(30deg,#1e1e1e73, #E46670, #3d3d3d);
    /* animation: gradienteMove 4s linear infinite;  */
   
}
/* tengo el mismo mas abajo puedo usar uno para todos los elementos
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}


/* @keyframes gradienteMove {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  } */


     
  
  /* Aplicación de sombra */
    /* box-shadow:   1px 1px 5px 0px rgba(14, 13, 13, 0.5); */
    /*
    - 5px → desplazamiento horizontal (hacia la derecha)
    - 5px → desplazamiento vertical (hacia abajo)
    - 10px → desenfoque (blur) de la sombra
    - 0px → expansión (spread), en este caso no se expande
    - rgba(0, 0, 0, 0.5) → color negro con un 50% de opacidad
    */
/* === 1. Botón con Brillo Animado === cruza lineas */
/* .mi-boton {
  padding: 15px 30px;
  background-color: #1abc9c;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: background-color 0.3s;

}

.mi-boton::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 300%;
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(45deg);
  transition: top 0.5s;
}

.mi-boton:hover::after {
  top: 100%;
} */


.navbar{
    font-family: Houstonville;
    font-size: 1.8rem;
}

.carousel-item img {
    height: 400px;
    width: 100%;
    object-fit: cover;
   
}



.logo{
    max-height: 40px;
    background-color: #E46670;
    padding:5px;
    border-radius: 50%;
    margin-left: 10px;
}

.main{
    margin: 20px;
    
}



.accordion-gallery {
    display: flex;
    height: 40vh; /* ✅ Altura relativa a la pantalla */
    overflow: hidden;
    border-radius: 10px;
    margin-top: 15px;
    gap: 10px; /* Agrega separación entre los paneles */
    
    
}

.accordion-gallery .panel {
    flex: 1;
    overflow: hidden;
    transition: all 0.5s ease; /* Transición más fluida */
    position: relative;
    margin-left: -50px; /* Las imágenes empiezan un poco encimadas */
    
}

.accordion-gallery .panel:first-child {
    margin-left: 0; /* Evita que la primera imagen se encime */
}

.accordion-gallery .panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 25px;
    border: solid 3px #e466706b;
}

.accordion-gallery .panel:hover {
    flex: 3;
    margin-left: 10px; /* La imagen se separa al hacer hover */
    z-index: 2;
}

.accordion-gallery .panel:hover img {
    transform: scale(1.05); /* Se hace un pequeño zoom en la imagen */
}


.container{
    justify-content: center;
    display: flex;
    flex-direction: row; /* o row si los querés uno al lado del otro */
    object-fit: cover;
    margin-top: 20px;
    flex-wrap: wrap; /* ✅ Permite que los elementos se bajen si no entran */
  
}
   
    


.cont-video {
    justify-content: space-between; /* Distribuye los videos con espacio entre ellos */
    display: flex; /* Hace que los videos se acomoden en una fila (horizontales) */
    object-fit: cover; /* Asegura que el video cubra todo el contenedor sin distorsionarse */
    gap: 10px; /* Agrega un espacio de 10px entre los videos */
    
}

.cont-video video {
    height: 300px; /* Establece la altura de cada video a 300px */
    overflow: hidden; /* Oculta cualquier contenido que sobresalga del contenedor */
    border-radius: 10px; /* Redondea las esquinas del video */
    margin-top: 15px; /* Agrega un espacio de 15px en la parte superior de cada video */
    border: solid 3px #e466706b;
    
}

.card{
    box-shadow: 0 0 15px #E46670; /* Resplandor amarillo */
    border: #3d3d3d;
   
}

.card img{
    object-fit: cover;
    height: 100%;
}

.card-text{
    text-align: center;
    font-weight: bold;
    color: #E46670;
    border: solid 2px;
}





/* Línea de separación estilizada */
.line-footer {
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #E46670, #000);
    margin: 30px 0;
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Sombra para darle más profundidad */
}

/* Estilo para los iconos */
.icon {
    text-align: center;
    margin-top: 15px;
}

.icon a {
    text-decoration: none;
    margin: 0 20px; /* Espaciado entre los iconos */
    font-size: 45px; /* Aumenta el tamaño de los iconos */
    color: #fff; /* Blanco para los íconos por defecto */
    /* transition: transform 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; */
    /* position: relative; */
    
}


/* La animación la aplico al wrapper */
.bounce-wrapper {
    display: inline-block;
    /* animation: bounce-spin 1.5s infinite alternate; se tumba  */
     animation: bounce 1.5s infinite alternate;
}



/* Animación tipo rebote para los iconos */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes bounce-spin {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(10deg);
    }
}

/* Efecto hover */
.icon a:hover {
    /* transform: scale(1.15); Aumenta el tamaño del icono */
    color: #E46670; /* Cambia el color a un tono vibrante */
    box-shadow: 0 0 15px rgba(228, 102, 112, 0.7); /* Resplandor sutil alrededor del icono */
    
}

/* Estilos para los iconos específicos */
.icon a:nth-child(1):hover {
    color: #f44136; /* Rojo intenso para Instagram */
    
    
}

.icon a:nth-child(2):hover {
    color: #25d366; /* Verde para WhatsApp */
}

/* Fondo oscuro y efectos para el footer */
footer {
    
    background-color: #3d3d3d;
    padding: 30px 0;
    text-align: center;
    color: white;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3); /* Sombra superior para efecto flotante */
}





/* Estilo para íconos en dispositivos móviles */
@media (max-width: 768px) {
   footer{
    margin-top: 12px;
   }
    .icon a {
        font-size: 35px; /* Reduce el tamaño de los iconos en móviles */
        margin: 0 15px;
    }

    .line-footer {
        height: 2px; /* Reduce el tamaño de la línea de separación en móviles */
    }
}







/* celular videos */

/* Centrado y ajuste de videos en dispositivos móviles */
@media (max-width: 768px) {
    .cont-video {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }
  
    .video-item {
      flex: 1 1 100%;
      max-width: 100%;
    }
  
    .video {
      width: 100%;
      height: auto;
      border-radius: 8px;
    }
}

/* celular carrousel tattos */

/* Ajuste del tamaño del carrusel en pantallas pequeñas */
@media (max-width: 768px) {
    .accordion-gallery {
      display: flex;
      overflow-x: scroll;
      gap: 10px;
      padding: 10px;
      scroll-behavior: smooth;
    }
  
    .panel {
      min-width: 100%;
      flex: 1;
    }
  
    .panel img {
      width: 100%;
      height: auto;
      border-radius: 10px;
    }
  }

  
/*  modal  */

  .custom-modal {
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
     margin-bottom: 100px;
   
    
  }
  
  .logo-modal {
    width: 100px;
    height: 100px;
    margin-bottom: 15px;
    border-radius: 50%;
    box-shadow: 10px 20px 15px rgba(0, 0, 0, 0.5); /* Sombra sutil */
   
    
  }

  /* Efecto al pasar el mouse sobre el logo */
.logo-modal:hover {
  transform: scale(1.1); /* Aumenta ligeramente el tamaño */
}
  
  .modal-header {
    background-color: #1e1e1e;
    border-bottom: none;
     background-color: #333333; /* Color más oscuro para el encabezado */
   
  border-radius: 12px 12px 0 0; /* Bordes redondeados solo en la parte superior */
  padding: 15px 20px; /* Aumenta el espacio para un mejor ajuste */
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5); /* Sombra suave */
  }
  
  .modal-footer {
    border-top: none;
  }
  
  .modal-title {
    font-weight: 600;
    font-size: 1.3rem;
  }
  
  .btn-outline-light {
    border-color: #ffffff;
    color: #ffffff;
    transition: all 0.3s ease;
  }
  
  .btn-outline-light:hover {
    background-color: #28a745;
    border-color: #28a745;
    color: #ffffff;
  }

  
  

  
  .divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
  }
  
  .divider span {
    margin: 0 10px;
  }
  
  .divider::before,
  .divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #E46670;
  }
  
  /* Estilo para la imagen */
  .icon-img {
    width: 24px;
    height: 24px;
  }