/* =============================================================
   CERVO — CAPA 121 · PREVENTA
   -------------------------------------------------------------
   Solo la línea de la ficha. El resto de la capa —el botón, el carrito, el
   correo— usa los estilos que ya existen: una preventa no necesita una piel
   propia, necesita que se entienda.

   ⚠️ HEREDA DE `.cvp-promo` Y SOLO AÑADE ÉNFASIS. Las promos de la ficha
   (envío, regalo) ya son `<li class="cvp-promo">`; esta es la misma lista y el
   mismo ritmo. Inventarle una tarjeta aparte la habría sacado de la conversación
   en la que está.
   ============================================================= */

/*
 * Por qué destaca sobre las demás: las otras promos son condiciones («si
 * compras dos…»); esta cambia CUÁNDO llega el pedido, que es la única de las
 * tres que la clienta necesita haber entendido antes de pagar.
 */
.cvp-promo--preventa {
	position: relative;
	padding: 9px 12px 9px 11px;
	color: var(--cv-ink);
	background: rgba(200, 169, 110, 0.10);
	border-left: 2px solid var(--cv-gold);
	border-radius: 0 var(--cv-radius-sm) var(--cv-radius-sm) 0;
}

.cvp-promo--preventa .cvp-promo__ico {
	color: var(--cv-gold-deep, #a9855c);
}

/*
 * ⚠️ `strong` SE DECLARA AUNQUE `.cvp-promo strong` ya exista. Con el fondo
 * dorado detrás, heredar el color de la lista normal dejaba «Preventa» y la
 * fecha con menos peso que el resto de la frase — justo las dos palabras que
 * tienen que leerse primero.
 */
.cvp-promo--preventa strong {
	font-weight: 700;
	color: var(--cv-ink);
}



/* =============================================================
   EL AVISO EN EL MENÚ
   -------------------------------------------------------------
   🚨 ES EL MISMO CHIP QUE EL «% OFF» DE SALE, y eso es la mitad del diseño.

   La primera versión lo puso ENCIMA del ítem (`bottom: 100%`) y se salía del
   navbar hacia la barra informativa de arriba: parecía un aviso de la tienda,
   no una marca de esa categoría. El dueño lo vio enseguida — *«aparece muy
   arriba… debe verse como %off de sale»*.

   Y tiene razón por algo más que el sitio: en esta barra ya existe un chip que
   significa «aquí hay algo especial». Inventar un segundo lenguaje para lo
   mismo obliga a aprenderlo. Este copia la forma, el tamaño y el latido del de
   SALE, y solo cambia el color: rojo es rebaja, dorado es preventa.
   ============================================================= */

.cvn-nav .tiene-preventa,
.cvn-mega-label.tiene-preventa,
.cvn-m-nav .tiene-preventa {
	position: relative;
}

.cvn-preventa {
	position: absolute;
	top: 10px;
	right: -4px;
	background: #c8a96e;
	color: #1a1a1a;
	font-size: 7.5px;
	font-weight: 800;
	letter-spacing: .04em;
	padding: 2px 5px;
	border-radius: 20px;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	animation: cvnPreventaChip 2s ease-in-out infinite;
}

@keyframes cvnPreventaChip {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.12); }
}

/*
 * En el mega menú la etiqueta va centrada bajo la foto y no hay esquina donde
 * colgarse: el chip se apoya al lado del texto, a su altura.
 */
.cvn-mega-label.tiene-preventa {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.cvn-mega-label.tiene-preventa .cvn-preventa {
	position: static;
	animation-name: cvnPreventaChipQ;
}

@keyframes cvnPreventaChipQ {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.1); }
}

/* Quien pidió que no se mueva nada ve el chip, pero quieto. */
@media (prefers-reduced-motion: reduce) {
	.cvn-preventa { animation: none; }
}

/* ── El mismo chip, en el menú del móvil ──────────────────────────────────
 *
 * Allí las entradas son filas a todo el ancho (`.cvn-sb-row`, `.cvn-sb-link`),
 * no palabras sueltas en una barra: colgar el chip de la esquina superior lo
 * dejaría flotando en mitad del vacío. Va a la derecha y a la altura del texto,
 * exactamente como el «% OFF» de SALE en ese mismo menú.
 */
.cvn-sb-row.tiene-preventa,
.cvn-sb-link.tiene-preventa {
	position: relative;
}

.cvn-sb-row.tiene-preventa .cvn-preventa,
.cvn-sb-link.tiene-preventa .cvn-preventa {
	top: 50%;
	right: 22px;
	transform: translateY(-50%);
	animation-name: cvnPreventaChipMob;
}

@keyframes cvnPreventaChipMob {
	0%, 100% { transform: translateY(-50%) scale(1); }
	50%      { transform: translateY(-50%) scale(1.12); }
}

/*
 * ⚠️ El de SOPORTE y los demás `.cvn-sb-row` llevan una flecha a la derecha; por
 * eso el chip se aparta 22 px, igual que hace el de SALE. En los `.cvn-sb-link`
 * no hay flecha, pero se deja el mismo hueco: una columna de chips alineados se
 * lee mejor que cada uno a una distancia distinta del borde.
 */