/* ==========================================================================
   Estilos comunes de las secciones gestionables (botones, etc.)
   Los botones se crean con CMS.buttons() en js/cms.js
   ========================================================================== */

.cms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 50px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 40px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
  transition: background-color .4s ease, border-color .4s ease, color .4s ease;
}

/* Tamaño pequeño (botones de las tarjetas promocionales del original: 142×40) */
.cms-btn--sm {
  min-width: 142px;
  height: 40px;
  padding: 0 22px;
}

/* Negro; al pasar el ratón lila con texto negro (botón del slider original) */
.cms-btn--primary { background: #000; color: #fff; }
.cms-btn--primary:hover { background: #d1b4ff; color: #000; }

/* Morado; al pasar el ratón blanco con texto negro (botones de las promociones) */
.cms-btn--accent { background: #751fff; color: #fff; }
.cms-btn--accent:hover { background: #fff; color: #000; }

/* Morado; al pasar el ratón negro (botones "Ver todo", "Tienda" del especial, "Suscríbete") */
.cms-btn--accent-dark { background: #751fff; color: #fff; }
.cms-btn--accent-dark:hover { background: #000; color: #fff; }

.cms-btn--light { background: #fff; color: #000; }
.cms-btn--light:hover { background: #d1b4ff; }

.cms-btn--outline { border-color: #000; color: #000; }
.cms-btn--outline:hover { background: #000; color: #fff; }

.cms-btn--outline-light { border-color: #fff; color: #fff; }
.cms-btn--outline-light:hover { background: #fff; color: #000; }

.cms-btn:focus-visible { outline: 2px solid #bc9b5d; outline-offset: 3px; }

@media (max-width: 600px) {
  .cms-btn { min-width: 0; height: 46px; padding: 0 24px; font-size: 16px; }
  .cms-btn--sm { height: 40px; padding: 0 20px; }
}

/* Texto solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}