/* =========================
   BOTÓN BASE
   ========================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.75rem 1.5rem;
  border-radius: 12px;

  text-decoration: none;
  cursor: pointer;

  font-size: clamp(0.7rem, 1vw, 1rem);
}
/* =========================
   BOTÓN PRIMARY
   ========================= */
.btn_primary {
  position: relative;
  overflow: hidden;

  color: var(--paper);
  border: none;

  background: linear-gradient(
    to bottom,
    var(--brand-light),
    var(--brand)
  );
}

.btn_primary::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to bottom,
    var(--brand-light),
    var(--brand-dark)
  );

  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn_primary:hover::after,
.btn_primary:active::after {
  opacity: 1;
}

.btn_primary > * {
  position: relative;
  z-index: 1;
}
/* =========================
   BOTÓN GHOST
   ========================= */
.btn_ghost {
  position: relative;
  overflow: hidden;

  color: var(--brand-dark);
  border: 1px solid var(--brand-dark);

  background: linear-gradient(
    to bottom,
    transparent,
    transparent
  );
}

.btn_ghost::after {
  content: "";
  position: absolute;
  inset: 0;

  border: 1px solid var(--brand-light);

  background: linear-gradient(
    to bottom,
    transparent,
    var(--brand-light)
  );

  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn_ghost:hover::after,
.btn_ghost:active::after {
  opacity: 1;
}

.btn_ghost > * {
  position: relative;
  z-index: 1;
}

/* ================================ 
 * BOTON TIPO PILL
======================================== */
:root{--pill-size:60px;--pill-width-open:250px}

.bottle{position:relative;display:inline-block}
.bottle img{display:block;width:100%;height:auto}

.tag{position:absolute;width:0;height:0;z-index:10}
.tag-cara{left:15%;top:30%;transform:translate(-50%,-50%)}
.tag-media-top{right:30%;top:45%;transform:translate(50%,-50%)}
.tag-media-bot{right:30%;top:72%;transform:translate(50%,-50%)}

.tag .info-pill{
  position:absolute;
  left:0;
  top:0;
  width:var(--pill-size);
  height:var(--pill-size);
  border-radius:999px;
  background:rgb(17, 17, 17, 0.9);
  color:#fff;
  overflow:hidden;
  transition:width .22s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.25)
}

.tag .info-pill.is-open{width:var(--pill-width-open)}

.info-pill__btn{
  position:absolute;
  inset:0;
  width:var(--pill-size);
  height:var(--pill-size);
  border:0;
  color:inherit;
  font:600 18px/1 system-ui;
  cursor:pointer;
  border-radius:999px;
  z-index:99;
  background:rgb(22,22,22);
  overflow:hidden;
}
.info-pill__btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(to bottom,var(--brand-light),var(--brand));
  opacity:0;
  transition:opacity .3s ease;
}
.info-pill__btn > *{position:relative;z-index:1}
.info-pill__btn:hover::before,
.info-pill.is-open .info-pill__btn::before{
  opacity:1;
}
.info-pill__panel{
  position:absolute;
  left:var(--pill-size);
  top:0;
  height:var(--pill-size);
  width:calc(100% - var(--pill-size));
  display:flex;
  align-items:center;
  padding:0 18px;
  gap: 2px;
  white-space:nowrap;
  opacity:0;
  transform:translateX(-10px);
  transition:opacity .18s ease,transform .18s ease;
  font-size: 80%;
}

.info-pill.is-open .info-pill__panel{
  opacity:1;
  transform:translateX(0);
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
}

.muted{opacity:.75;font-size:90%;color: gray;}
@media (max-width:959px){
  .tag-media-top .info-pill,
  .tag-media-bot .info-pill{
    left:auto;
    right: -50px;;
  }

  /* el círculo (botón) queda fijo en el borde derecho */
  .tag-media-top .info-pill__btn,
  .tag-media-bot .info-pill__btn{
    inset:auto;
    right:0;
    top:0;
    width:var(--pill-size);
    height:var(--pill-size);
  }

  /* el panel ocupa el espacio a la izquierda del círculo */
  .tag-media-top .info-pill__panel,
  .tag-media-bot .info-pill__panel{
    left:0;
    right:var(--pill-size);
    width:auto;
    transform:translateX(10px);
    padding: 0 18px 0 35px;
  }

  .tag-media-top .info-pill.is-open .info-pill__panel,
  .tag-media-bot .info-pill.is-open .info-pill__panel{
    transform:translateX(0);
  }
}

/* ================================ Boton volver arriba ======================================== */ 
#btnVolverArriba {
  display: none; /* El botón estará oculto inicialmente */
  position: fixed; /* Se mantendrá en la misma posición incluso cuando la página se desplace */
  bottom: 20px; /* Posición desde la parte inferior */
  left: 20px; /* Posición desde la izquierda */
  font-size: 24px; /* Tamaño de fuente del botón */
  background-color: var(--brand);
  color: #ffffff; /* Color del texto del botón */
  border: none; /* Sin borde */
  border-radius: 50%; /* Forma circular */
  width: 40px; /* Ancho del botón */
  height: 40px; /* Altura del botón */
  cursor: pointer; /* Cambia el cursor al pasar por encima */
  z-index: 999; /* Asegura que esté sobre otros elementos */
	padding: 0;
  transition: all 0.5s;
}

#btnVolverArriba:hover {
    background-color: var(--brand-light)
}
#btnVolverArriba img{
  width: 20px;
  margin-top: 5px;
}