@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* ===== Globales ===== */

body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  overflow: auto !important;
  background-color: #f7f0f0;
}

html {
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
  position: relative;
  color: #2f4156;
  transition: color 0.3s ease;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.cta {
  display: inline-block;
  margin-top: 1rem;
  padding: 12px 24px;
  background-color: #17A09E;
  color: #F7F0F0;
  border-radius: 2rem;
  font-weight: bold;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
  cursor: pointer;
}

.cta:hover {
  background-color: #A09A9D;
  transform: scale(1.05);
}

/*Animar Scroll*/
.animar-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animar-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

body.animar-scroll {
  transform: scale(1.01);
  transition: transform 0.3s ease;
}

/*Navbar*/
.hero-navbar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 5rem;
}

.hero-navbar .logo {
  height: 3.5rem;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.hero-navbar .logo:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(23, 160, 158, 0.7));
}

.navegacion-links {
  display: flex;
  gap: 50px;
}

.navegacion-links a {
  position: relative; /* necesario para posicionar el ::after */
  color: #F7F0F0;
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

/* Línea oculta por defecto */
.navegacion-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px; /* separación respecto al texto */
  width: 0%;
  height: 2px;
  background-color: #17A09E;
  transition: width 0.3s ease;
}

.navegacion-links a:hover::after {
  width: 100%;
}

.navegacion-links a:hover {
  color: #17A09E;
}

/* Seccion hero*/
.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 10px;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 20px;
}


/* hero*/
#hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  color: white;
}

/* Video de fondo */
#hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Capa oscura encima del video */
.hero-overlay {
  position: absolute;
  inset: 0;
  background-color: #011816c9;
  opacity: 0.85;
  z-index: 1;
}

/* Gradiente inferior */
#hero::after {
  content: "";
  position: absolute;
  bottom: 0; 
  left: 0;
  width: 100%;
  height: 10rem;
  background: linear-gradient(
    to bottom,
    rgba(27, 43, 42, 0) 0%,
    #484848 100%
  );
  z-index: 2;
}

.hero-navbar,
.hero-content {
  position: relative;
  z-index: 3;
}

/*Linea de division*/
.linea-divisoria {
  width: 80%;
  height: 2px;
  background-color: #F7F0F0;
  margin: 0 auto 2rem auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.linea-divisoria.visible {
  opacity: 1;
  transform: translateY(0);
}

.linea-divisoria2 {
  width: 80%;
  height: 2px;
  background-color: #484848;
  margin: 0 auto 2rem auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.linea-divisoria2.visible {
  transform: translateY(0);
}

/*Eventos*/

#eventos {
  position: relative;
  background-color: #484848; 
  padding: 4rem 2rem;
  z-index: 3;
}

#eventos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5rem;
  background: linear-gradient(
    to top,
    #484848 0%,
    rgba(247, 240, 240, 0) 100%
  );
}

#eventos h1 {
  font-weight: 600;
  font-size: 3rem;
  text-align: center;
  color: #F7F0F0;
}

#eventos h2 {
  font-size: 2rem;
  font-weight: 400;
  color: #F7F0F0;
  text-align: center;
  margin-bottom: 2rem;
}

/* Carrusel contenedor */
.carrusel-wrapper {
  padding-bottom: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  overflow: visible;
}

/* Carrusel desplazable */
.paquetes-container {
  display: flex;
  gap: 2rem;
  overflow-x: auto;   
  overflow-y: hidden;  
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; 
  padding-bottom: 1rem;  
}

.paquete {
  flex: 0 0 auto;
  scroll-snap-align: center;
}
.paquetes-container::-webkit-scrollbar {
  display: none;
}

/* Tarjeta individual */

.paquete {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  scroll-snap-align: center;
  min-width: 250px;
  max-width: 250px;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  color: #F7F0F0;
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.3s ease, opacity 0.6s ease;
  justify-content: flex-start; 
  align-items: center; 
}

.paquete .cta {
  display: inline;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  width: auto;
  align-self: center;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  cursor: pointer;
}

.paquete.visible {
  opacity: 1;
  transform: translateY(0);
}

.paquete:hover {
  transform: translateY(-5px);
}

.paquete img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1rem;
  cursor: pointer;   
}

.paquete img:hover {
  transform: scale(1.05);
}

.paquete h3 {
  margin-top: 1rem;
  font-size: 1.4rem;
  color: #17A09E;
}

.paquete p {
  font-size: 1rem;
  margin: 1rem 0;
  object-fit: contain;
  word-wrap: break-word;
  flex-grow: 1;
}

/*Imagees paquete*/
#modal-imagen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9999;
}

/* Modal visible */
#modal-imagen.visible {
  opacity: 1;
  pointer-events: all;
}

/* Imagen dentro del modal */
#imagen-ampliada {
  max-width: 90vw;  /* 90% del ancho de la ventana */
  max-height: 90vh; /* 90% de la altura de la ventana */
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transition: transform 0.3s ease;
}


/* Botón cerrar */
.cerrar-modal {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  color: white;
  cursor: pointer;
  z-index: 10000;
}

.modal-activo #navegacion-movil,
.modal-activo .hero-navbar {
  visibility: hidden;
  pointer-events: none;
}


/* Flechas */

.flecha-carrusel {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #17A09E;
  color: #F7F0F0;
  border: none;
  padding: 0.6rem;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease, transform 0.2s ease;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flecha-carrusel:hover {
  background-color: #12807f;
  transform: translateY(-50%) scale(1.05);
}

.flecha-carrusel.izquierda {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-220%, -50%);
}

.flecha-carrusel.derecha {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(220%, -50%);
}
#eventos::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5rem;
  background: linear-gradient(
    to bottom,
    #484848 0%,
    #f7f0f0 100%
  );
  z-index: 2;
}

/*Ubicación*/
#ubicacion {
  background-color: #f7f0f0;
  text-align: center;
  margin-bottom: 2rem;
}

#ubicacion h2 {
  font-size: 2.5rem;
  color: #484349;
  margin-bottom: 1rem;
}

#ubicacion p {
  font-size: 1.1rem;
  color: #484349;
  margin-bottom: 2rem;
}

.mapa {
  border-radius: 2rem;
  overflow: hidden;
  max-width: 100%;
}


/*Contacto*/
#contacto {
  position: relative;
  background: url('/img/hero.jpeg') center/cover no-repeat;
  padding: 3rem 1.5rem;
  color: #F7F0F0;
  z-index: 3;
  overflow: hidden;
}

.contacto-wrapper h2 {
  font-size: 2.8rem; /* antes 2rem */
  font-weight: 600;
  color: #F7F0F0;
  margin-bottom: 1rem;
  margin-top: 2rem
}

.contacto-wrapper p {
  font-size: 1.3rem; /* antes 1rem */
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.contacto-wrapper {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

#contacto::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(1, 24, 22, 0.89);
  z-index: 0;
  pointer-events: none;
}

#contacto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    #f7f0f0 0%,
    rgba(1, 24, 22, 0) 10%,
    rgba(1, 24, 22, 0) 90%,
    #484848 100% 
  );
  z-index: 1;
  pointer-events: none;
}

#formulario-contacto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

#formulario-contacto input,
#formulario-contacto textarea {
  width: 100%;
  max-width: 500px;
  padding: 1rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #F7F0F0;
  color: #484848;
  box-sizing: border-box;
}

#formulario-contacto input::placeholder,
#formulario-contacto textarea::placeholder,
#formulario-contacto select {
  color: #A09A9D;
}

#formulario-contacto textarea {
  resize: vertical;
  min-height: 120px;
}

#formulario-contacto button {
  margin-top: 1rem;
}

#formulario-contacto textarea {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #2f4156;
  background-color: #F7F0F0;
  border: none;
  border-radius: 8px;
  padding: 1rem;
  width: 100%;
  max-width: 500px;
  height: 120px; 
  resize: none; 
  overflow-y: auto;
  box-sizing: border-box;
}

#formulario-contacto select {
  width: 100%;
  max-width: 500px;
  padding: 1rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #F7F0F0;
  color: #2f4156;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='14' height='10' viewBox='0 0 14 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%232f4156' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}

.contacto-linea {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* permite que se acomode en móviles */
  gap: 2rem;
  margin-top: 1rem;
}

.dato-contacto {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.1rem;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  margin-top: 1rem;
}

.dato-contacto:hover {
  transform: scale(1.03);
}

.dato-contacto:hover a,
.dato-contacto:hover i {
  color: #17A09E;
  text-decoration: none;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

.dato-contacto a {
  text-decoration: none;
  color: inherit;
}



/*Footer*/

footer {
  position: relative;
  background-color: #484848;
  color: #F7F0F0;
  text-align: center;
  padding: 3rem 1rem 2rem;
  font-size: 0.95rem;
  overflow: hidden;
  padding-bottom: 0;
}

footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6rem;
  background: linear-gradient(
    to top,
    #484848 0%,
    rgba(1, 24, 22, 0) 100%
  );
  z-index: 0;
  pointer-events: none;
}

.redes-footer {
  margin-bottom: 2rem;
}

.titulo-redes {
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 1rem;
  color: #F7F0F0;
  position: relative;
  z-index: 1; /* por encima del degradado */
}

.iconos-redes {
  display: flex;
  justify-content: center;
  gap: 2rem;
  font-size: 1.5rem;
}

.iconos-redes a {
  color: #F7F0F0;
  transition: color 0.3s ease;
  text-decoration: none;
}

.iconos-redes a:hover {
  color: #17A09E;
}

footer a {
  color: #17A09E;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/*Botones flotantes*/
.botones-flotantes {
  position: fixed;
  right: 1rem;
  bottom: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 999;
  padding: 0;
}

.botones-flotantes a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background-color: #17A09E;
  color: #fff;
  border-radius: 50%;
  font-size: 1.2rem;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.botones-flotantes a:hover {
  transform: scale(1.1);
  background-color: #13847f;
}

.boton-flotante.instagram {
  background-color: #17A09E; /* color oficial de Instagram */
  color: #fff;
}

/*Formulario enviado*/
.mensaje-exito {
  display: none;
  margin-top: 1rem;
  padding: 1rem;
  background: #28a745;
  color: white;
  border-radius: 8px;
  text-align: center;
  animation: fadeIn 0.5s ease-in-out;
}

.mensaje-exito.activo {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/*Correo Electronico*/

.correo-electronico {
  position: relative;
  text-align: center;
  margin-top: 6rem;
  margin-bottom: 2rem;
    z-index: 3;
}

.correo-electronico h2 {
  color: #F7F0F0;
  font-size: 2rem;
  margin-bottom: 0.5rem;
    z-index: 1;
}

.correo-electronico p {
  margin: 0;
    z-index: 1;
}

.correo-electronico a {
  color: #F7F0F0;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
    z-index: 1;
}

/*Toggle Menu*/

#navegacion-movil {
  transform: translateY(0);
  transition: transform 0.3s ease;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* Contenedor logo + hamburguesa */
#navegacion-movil .logo-movil {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

#navegacion-movil.oculto-scroll {
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

/* Logo */
.logo-movil img {
  height: 44px;
  transition: transform 0.3s ease, filter 0.3s ease;
  cursor: pointer;
  margin-top: 2rem;
  margin-left: 2rem;
  cursor: pointer;
}
.logo-movil img:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(23, 160, 158, 0.7));
}
.logo-movil img:active {
  transform: scale(0.95);
  filter: brightness(1.5);
}

/* Botón hamburguesa */
#toggle-menu {
  background: none;
  border: none;
  font-size: 1.9rem;
  color: #fff;
  cursor: pointer;
  margin-top: 2rem;
  margin-right: 2rem;
}

/* --- Menú desplegable --- */
#menu-movil-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem auto 0 auto;   /* 🔹 centrado horizontal */
  width: 70%;                 /* 🔹 ocupa el 90% del ancho, deja márgenes */
  background-color: rgba(0,0,0,0.85); /* semi-transparente */
  padding: 1.5rem;             /* 🔹 espacio interno */
  border-radius: 12px;
  text-align: center;

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

/* Estado visible */
#menu-movil-links.activo {
  max-height: 600px;
  opacity: 1;
}

#menu-movil-links li a {
  color: #f7f0f0;
  font-size: 1.2rem;
  transition: color 0.3s ease;
  display: block;
  padding: 0.7rem 0; /* 🔹 espacio uniforme */
}

#menu-movil-links li a:hover {
  color: #17A09E;
}

/*Indicador carrusel*/
.indicador-carrusel {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
}

.indicador-carrusel .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  transition: background-color 0.3s ease;
}

.indicador-carrusel .dot.activo {
  background-color: #17A09E;
}

/*Galería de Imagenes*/

.galeria{
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 250px;
    grid-gap: 20px;
    padding: 30px;
}

.box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.box:nth-child(1){
    grid-column-start: span 2;
}

.box:nth-child(4){
    grid-column-start: span 2;
}

#galeria h2 {
  font-size: 2.5rem;
  color: #484349;
  margin-top: 4rem;
  margin-bottom: 1rem;
  text-align: center;
}

#galeria p {
  font-size: 1.1rem;
  color: #484349;
  margin-bottom: 2rem;
  text-align: center;
}

.oculto {
  display: none;
}

.galeria-boton {
  text-align: center;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  margin-bottom: 2rem;
}

/* Estado oculto con transición */
.box.oculto {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.6s ease, opacity 0.6s ease;
}

/* Estado visible con transición */
.box {
  max-height: 1000px;
  opacity: 1;
  transition: max-height 0.6s ease, opacity 0.6s ease;
}

/* Galería animada */
.galeria .box {
  max-height: 1000px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.6s ease, opacity 0.6s ease;
}

/* Estado oculto con animación */
.galeria .box.oculto {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.fade-in {
  animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

button.cta,
input[type="submit"].cta,
a.cta {
  background-color: #17A09E; /* mismo color que "Cotiza tu evento" */
  color: #F7F0F0;
  border: none;
  border-radius: 2rem;
  padding: 12px 24px;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: none;
  appearance: none;
  outline: none;
}

button.cta:hover,
input[type="submit"].cta:hover,
a.cta:hover {
  background-color: #A09A9D; /* tono más claro al hacer hover */
  transform: scale(1.05);
}