body {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.5rem, 4vw, 1.3rem);
}

.section-spacing {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (max-width: 768px) {
  .section-spacing {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* Hero */
.hero {
  background-color: #ffbd59;
  flex-wrap: wrap; /* Ajusta en móviles */
  display: flex;
  padding: 1rem 2rem;
}

.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: black;
}

.hero-subtitle {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: white;
}

.hero-logo {
  max-height: 200px;
  height: auto;
  width: auto;
  border-radius:20%;
}

@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .hero-logo {
    margin-bottom: 1rem; /* separa logo del texto */
    max-height: 150px;    /* opcional: escala el logo un poco en móviles */
    border-radius:20%;
  }

  .hero-title, .hero-subtitle {
    margin: 0.2rem 0;
  }
}



/* Carrusel multi-coverflow */
.carousel-3d {
  position: relative;
  max-width: 100%;
  margin: auto;
  overflow: hidden; /* evita expandir la página */
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-3d-track {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease;
  flex-wrap: nowrap;
}

.carousel-3d-item {
  flex: 0 0 280px; /* tamaño base (móvil y fallback) */
  margin: 0 10px;
  transform: scale(0.7);
  opacity: 0.4;
  transition: transform 0.5s ease, opacity 0.5s ease;
  z-index: 1;
}

.carousel-3d-item.active {
  transform: scale(1);
  opacity: 1;
  z-index: 3;
}

.carousel-3d-item.left1,
.carousel-3d-item.right1 {
  transform: scale(0.85);
  opacity: 0.7;
  z-index: 2;
}

.carousel-3d-item.left2,
.carousel-3d-item.right2 {
  transform: scale(0.75);
  opacity: 0.5;
  z-index: 1;
}

.carousel-3d-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
}

/* Botones */
.carousel-3d-button.circle-btn {
  width: 50px;
  height: 50px;
  background-color: #ffbd59;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: all 0.3s ease; /* transición suave */
  transform: translateY(-50%); /* mantenemos centrado vertical */
  position: absolute;
  top: 50%;
}

.carousel-3d-button.circle-btn .carousel-control-next-icon,
.carousel-3d-button.circle-btn .carousel-control-prev-icon {
  filter: invert(1); /* icono negro */
  width: 20px;
  height: 20px;
  transition: all 0.3s ease; /* transición suave */
}

/* Hover: agrandar e invertir colores */
.carousel-3d-button.circle-btn:hover {
  transform: translateY(-50%) scale(1.3); /* mantiene la posición */
  background-color: black; /* fondo negro */
}

.carousel-3d-button.circle-btn:hover .carousel-control-next-icon,
.carousel-3d-button.circle-btn:hover .carousel-control-prev-icon {
  filter: none; /* elimina invert */
}

/* Posicionamiento de los botones */
.carousel-3d-button.circle-btn.prev {
  left: 10px;
}

.carousel-3d-button.circle-btn.next {
  right: 10px;
}

/* Botón base */
.carousel-3d-button {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  z-index: 5;
}

/* Responsive */
@media (min-width: 769px) {
  .carousel-3d-item {
    flex: 0 0 480px; /* el doble que antes */
  }
}


/* Quiénes somos */
.quienes-somos .row {
  min-height: 80%;
}
.quienes-somos img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  max-height: 200px;
}

/* Responsive */
@media (min-width: 769px) {
  .quienes-somos img {
    height: 80%;
    width: 100%;
    object-fit: cover;
    max-height: 400px;
    }
}

.site-footer {
  background-color: #ffbd59; /* mismo color que el hero */
  bottom: 0;             /* siempre abajo */
  left: 0;
  margin-top: 10px;
  width: 100%;
  color: black;              /* texto negro */
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
}


/* Galería */
.gallery-card {
  width: 80%;
  height: 150px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}
.gallery-card:hover {
  transform: scale(1.02);
}

.navbar-toggler {
  border: none;
  background: transparent;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.navbar-toggler:hover .navbar-toggler-icon {
  transform: scale(1.3);
  filter: brightness(1.2);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,1)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


/* Icono hamburguesa negro y más grande */
.navbar-toggler-icon {
  width: 2.5rem;
  height: 2.5rem;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M-18 7h166M-18 15h66M-18 23h66'/%3E%3C/svg%3E");
  transition: opacity 0.1s linear;
}

/* Links del menú alineados a la izquierda y con hover en negrita */
#navbarMenu .nav-link {
  text-align: left;
  margin-left: 20px;
  transition: font-weight 0.2s;
}

#navbarMenu .nav-link:hover {
  font-weight: bold;
}

/* Menú desplegable normal en escritorio */
#navbarMenu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 250px;
  background-color: rgba(0,0,0,0.75);
  z-index: 1500;
  text-align: left;
  transition: all 0.3s ease;
}

/* Menú en móviles: debajo del navbar, ancho completo, columna */
@media (max-width: 768px) {
  #navbarMenu {
    position: relative;     /* deja de ser fijo */
    top: auto;
    right: auto;
    width: 100%;            /* ocupa todo el ancho */
    height: auto;           /* solo lo que ocupe contenido */
    background-color: #000; /* menú sólido */
    text-align: center;
    padding: 1rem 0;
  }

  #navbarMenu .navbar-nav {
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  #navbarMenu .nav-link {
    display: block;
    width: 100%;
    margin: 0.75rem 0;
    font-size: 1.2rem;
    text-align: center;
  }

  .navbar-toggler {
    margin-top: 10px;
  }

  /* Centrar elementos en móviles */
  .hero .d-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* Hover del icono hamburguesa: aumenta tamaño y "negrita" */
.navbar-toggler:hover {
  transform: scale(1.2);
}

/* CENTRAR elementos en móviles */
@media (max-width: 767.98px) {
  .hero .d-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .navbar-toggler {
    margin-top: 10px;
  }
}

.contact-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 15px;
    border-radius: 25px;
    text-decoration: none;
    color: white;
    font-weight: 500;
    position: relative;
    z-index: 0;
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Gradientes falsos para borde */
.contact-btn.instagram::before,
.contact-btn.whatsapp::before {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 27px;
    z-index: -1;
}

/* Instagram gradient */
.contact-btn.instagram::before {
    background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

/* WhatsApp gradient */
.contact-btn.whatsapp::before {
    background: linear-gradient(45deg, #25D366, #128C7E);
}

/* Hover effect */
.contact-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}


/* GALLERY */
.event-link {
    display: block;      /* para que ocupe el ancho de la card */
    width: 100%;
    max-width: 1300px;    /* ancho máximo estándar */
    margin: 0 auto;      /* centra la card */
    text-decoration: none;
}

.gallery-card {
    width: 100%;          /* ancho completo del <a> */
    min-width: 300px;     /* evita que sea demasiado pequeña */
    min-height: 200px;
    box-sizing: border-box;
    background-color: #c8c6ba;
    overflow: hidden;
}

.event-image-container {
    flex: 0 0 300px;     /* ancho imagen PC */
    max-width: 65%;
    overflow: hidden;
}

.event-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .event-link {
        max-width: 95%;   /* ancho responsive en móviles */
    }
    .event-image-container {
        flex: 0 0 120px;
        max-width: 35%;
    }
    .gallery-card {
        min-height: 150px;   /* altura más pequeña en móviles */
    }
    h2 {
        font-size: 1.2rem;
    }
    h4 {
        font-size: 0.95rem;
    }
}

.image-wrapper {
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Imagen ajustada */
.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

/* Overlay gris oscuro con opacidad 80% */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8); /* gris oscuro 80% */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.image-wrapper:hover .overlay {
  opacity: 1;
}

/* Icono de descarga centrado */
.overlay svg {
  width: 40px;
  height: 40px;
  fill: white;
}

.download-btn {
    background-color: #ffbd59; /* color corporativo */
    color: black; /* texto inicialmente negro */
    border: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    transition: transform 0.3s, box-shadow 0.3s, color 0.3s, fill 0.3s;
}

.download-btn svg {
    fill: black; /* color inicial del icono */
    transition: fill 0.3s;
}

.download-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    color: #ffbd59; /* cambia el color del texto */
    background-color: black;
}

.download-btn:hover svg {
    fill: #ffbd59; /* cambia el color del icono */
}

.back-arrow {
    display: inline-block;
    transition: transform 0.3s; /* transición suave */
}

.back-arrow:hover {
    transform: scale(1.2); /* se agranda un 20% */
}