/* ===============================
   BOTÓN HAMBURGUESA – INTERACTIVO
   =============================== */

/* Estado normal */
.navbar .navbar-toggler {
  border: 2px solid #BD2170 !important;
  background-color: transparent;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover (ratón encima) */
.navbar .navbar-toggler:hover {
  border-color: #BD2170 !important;
  box-shadow: 0 0 0 2px rgba(189,33,112,0.25);
}

/* Click / focus */
.navbar .navbar-toggler:focus,
.navbar .navbar-toggler:active,
.navbar .navbar-toggler:focus-visible {
  border-color: #BD2170 !important;
  box-shadow: 0 0 0 3px rgba(189,33,112,0.45) !important;
  outline: none !important;
}

/* Icono (las 3 rayas) */
.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23BD2170' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}
/* ===============================
   NAV LINKS – fondo SOLO en hover/click
   =============================== */

/* Estado normal: limpio */
.navbar .nav-link {
  color: #14264B !important;
  padding: 8px 12px;
  border-radius: 10px;
  background-color: transparent !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

/* Hover / focus / click */
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link:focus-visible,
.navbar .nav-link:active {
  background-color: #EB8BBB !important;
  box-shadow: 0 0 0 3px rgba(235,139,187,0.25) !important;
  color: #14264B !important;
  text-decoration: none;
}

/* ACTIVO: forzar que NO tenga fondo */
.navbar .nav-link.active {
  background-color: transparent !important;
  box-shadow: none !important;
  color: #14264B !important;
  font-weight: 600;
	padding-right: 10px;

}
/* Hover también para el link activo */
.navbar .nav-link.active:hover,
.navbar .nav-link.active:focus,
.navbar .nav-link.active:focus-visible {
  background-color: #F5C9DF !important;
  box-shadow: 0 0 0 3px rgba(235,139,187,0.25) !important;
  color: #14264B !important;
}
.navbar{
padding: 30px;
position: static;
}
/* ===============================
   HERO CANVAS – CONTROL RESPONSIVE
   =============================== */

.hero-anim{
  width: 100%;
  max-width: 100%;
  border: 0;
  overflow: hidden;
  display: block;
}

/* Desktop */
@media (min-width: 992px){
  .hero-anim{
    height: 890px; /* canvas desktop */
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px){
  .hero-anim{
    height: 720px;
  }
}

/* Móvil */
@media (max-width: 767.98px){
  .hero-anim{
    height: 600px;
  }
}

/******************************* NUEVO ***************************/

.wrapper-animacion {
  position: relative;
  width: 100%;
  display: block;
  overflow: hidden;
  background: transparent;

  aspect-ratio: 1920 / 890;
}



.iframe-ajustado {
  position: absolute;
  /* Forzamos a que empiece exactamente arriba a la izquierda del div */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  /* Asegura que esté por encima de fondos pero no del menú */
  z-index: 1; 
}


/* fallback por si algún navegador viejo no soporta aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .wrapper-animacion { padding-top: 46.35%; }
}
.iframe-ajustado {
  display: block;
}
/******************************* FINAL ***************************/



.contenedor-iframe {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Proporción: (Alto / Ancho) * 100 */
  padding-top: 46.35%; 
}

.iframe-responsivo {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
@media (max-width: 768px) {
  .contenedor-iframe {
    padding-top: 100%; /* Lo hace cuadrado en móviles para dar más aire al contenido */
    height: auto;
  }
}