#banner-flotante {
  position: fixed;
  z-index: 9;
  display: inline-block;
  width: auto;
  border: none;
}

/* ================= CONTENEDOR GENERAL ================= */

.banner-wrapper {
  position: relative;
  width: calc(var(--button-size) * var(--scale, 1));
  height: calc(var(--button-size) * var(--scale, 1));
}

/* ================= BOTÓN GRANDE ================= */

.banner-contenedor {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transform: scale(1);
  transition: transform 0.25s ease;
  will-change: transform;
  box-shadow: 0 0.125rem 0.25rem rgba(33, 37, 41, 0.075);
}

/* Capa animable (solo círculo visual) */
/*.banner-contenedor::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  transform: scale(1);
  transition: transform 0.25s ease;
  will-change: transform;
}*/

/* Hover: crece solo el botón */
.banner-contenedor:hover {
  transform: scale(1.07);
}

/* Hover: crece solo el botón */
/*.banner-contenedor:hover::before {
  transform: scale(1.07);
}*/

/* ================= TEXTO ================= */

.banner-texto {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-size: var(--text-size);
  font-weight: 700;
  color: #fff;
  padding: var(--text-padding);
  background: rgba(0, 0, 0, var(--text-bg-opacity));

  transform: scale(1);
  transition: transform 0.25s ease;
  pointer-events: none;
}

/* Hover: el texto también crece */
.banner-contenedor:hover .banner-texto {
  transform: scale(1.08);
}

/* ================= BOTÓN CERRAR ================= */

#cerrar-banner {
  position: absolute;
  top: 0px;
  right: 5px;
  z-index: 5;

  width: calc(var(--cerrar-size) * var(--scale, 1));
  height: calc(var(--cerrar-size) * var(--scale, 1));
  padding: var(--cerrar-padding);

  background: var(--cerrar-bg);
  border: var(--cerrar-border-width) solid var(--cerrar-border-color);
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0.125rem 0.25rem rgba(33, 37, 41, 0.075);

}

/* X cerrar */
#cerrar-banner svg {
  width: 100%;
  height: 100%;
}

#cerrar-banner path {
  stroke: var(--cerrar-x-color);
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
}

/* ================= ANIMACIÓN DE ENTRADA ================= */

@keyframes ftd-entry {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#banner-flotante {
  animation: ftd-entry 0.4s ease-out both;
}