/* Secundario */
.hotlink-secondary {
  color: var(--secondary-color);
}
.hotlink-secondary:hover {
  color: #3a3a3a;
  text-decoration: underline;
}

/* Deshabilitado */
.hotlink-disabled {
  color: var(--disabled-color);
  cursor: not-allowed;
  text-decoration: none;
}

/* Destacado */
.hotlink-highlight {
  color: var(--highlight-color-2);
}
.hotlink-highlight:hover {
  color: var(--highlight-color-2);
  text-decoration: underline;
}


/* MENSAJES */
.msg {
    text-align: center;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: var(--border-radius);
    text-transform: uppercase;
}
.msg-out-of-stock {
    position: relative;
    display: inline-block;
    color: red;
    padding: 3px 8px;
    font-weight: bold;
    transform: rotate(-3deg);
    border: 2px solid;
}

.callout {
  display: flex;                 /* Coloca icono y contenido lado a lado */
  align-items: flex-start;
  font-family: 'Maven Pro', sans-serif;
  padding: 12px 16px;            /* Espaciado razonable */
  margin: 10px 0;                /* Separación entre callouts */
  border-left: 4px solid;
  border-radius: 5px;
  background-color: #f9f9f9;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.callout:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

/* Icono */
.callout-icon {
  flex: 0 0 40px;               /* espacio fijo para icono */
  margin-right: 12px;
}

.callout-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* Contenido */
.callout-content {
  flex: 1;
}

/* Tipos de callout */
.callout-info {
  border-color: #007bff;
  background-color: #e7f1ff;
  color: #0a3d7a;
}

.callout-success {
  border-color: #28a745;
  background-color: #e6f6ea;
  color: #1a4d28;
}

.callout-warning {
  border-color: #ffc107;
  background-color: #fff8e5;
  color: #7a5c00;
}

.callout-error {
  border-color: #dc3545;
  background-color: #fbeaea;
  color: #7a1216;
}

/* Títulos */
.callout h3 {
  margin-top: 0;
  margin-bottom: 6px;
  font-size: 1.1rem;
}

/* Párrafos */
.callout p {
  margin: 0;
  font-size: 0.95rem;
}

/* Ejemplo de uso con Animate.css:
   <div class="callout callout-info animate__animated animate__fadeIn">
*/

span.edition {
    align-items: center;
    background: linear-gradient(45deg, #f3a206, #8c5900, #b97a00, #cfa200, #b97a00);
    background-size: 300% 300%;
    border: 2px solid darkgoldenrod;
    border-radius: 10px;
    color: white;
    display: flex;
    font-size: 0.9rem;
    font-style: italic;
    height: 25px;
    justify-content: center;
    padding: 2px 10px;
    text-shadow: 0 2px 2px black;
    filter: drop-shadow(0px 4px 3px rgba(0,0,0,.4));
    animation: goldShine 10s ease-in-out infinite;
    white-space: nowrap;
}

/* ✨ Animación del brillo dorado */
@keyframes goldShine {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}