/* ===========================================================================
 * CERVO — BOTÓN DE WHATSAPP (CAPA 40)
 * ---------------------------------------------------------------------------
 * Prefijo `.cwa-`. Sustituye al plugin Click to Chat.
 *
 * ⚠️ EL COLOR ES DE CERVO, EL ICONO ES DE WHATSAPP, Y LAS DOS COSAS A PROPÓSITO.
 * El círculo va en el negro y el oro de la marca; el glifo se deja tal cual. Ese
 * glifo es lo que hace que se entienda sin leer nada — cambiarlo por un ciervo
 * quedaría más nuestro y nadie sabría para qué sirve el botón.
 * ======================================================================== */

.cwa {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 9990;   /* bajo el preloader (999999) y bajo los diálogos */

	display: inline-flex;
	align-items: center;
	gap: 0;

	padding: 0;
	text-decoration: none;
	border-radius: 999px;
	background: var(--cv-ink, #141210);
	box-shadow: 0 10px 30px -8px rgba(20, 18, 16, 0.45);

	/*
	 * ⚠️ ENTRA CON RETRASO, no de golpe. Si aparece a la vez que la página,
	 * compite con lo primero que el visitante intenta mirar. Aparece cuando ya
	 * se está orientando, que es cuando puede necesitarlo.
	 */
	animation: cwa-entrar 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.6s both;
}

/*
 * ⚠️ `:visited` DECLARADO. El tema padre trae `a:visited { color: inherit }`, que
 * le gana a cualquier `.clase` sola: sin esto el botón cambia de color en cuanto
 * alguien ha entrado una vez. Ya pasó con el aniversario y con la página de
 * gracias.
 */
.cwa,
.cwa:visited {
	color: #fff;
}

/* ── El círculo ──────────────────────────────────────────────────────────── */

.cwa__circulo {
	position: relative;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	flex: 0 0 auto;
	border-radius: 50%;

	/*
	 * ⚠️ NEGRO CON EL GLIFO EN ORO, y no al revés.
	 *
	 * La primera versión era un círculo dorado: `linear-gradient(145deg,
	 * #c8a96e, #8a6d3b)`. Sobre 3,5 rem el `--cv-gold-deep` ocupa media
	 * superficie y **no se lee como oro, se lee como café**. Un dorado grande
	 * necesita brillo y reflejo para parecer metal; en plano parece barro.
	 *
	 * El oro luce cuando es POCO y va sobre oscuro: así es como funciona en el
	 * resto de la web —el sello de la página de gracias, la cápsula del
	 * aniversario— y es la pareja de la marca. Además el aviso rojo salta mucho
	 * más sobre negro que sobre dorado.
	 */
	background: linear-gradient(150deg, #1f1c19, var(--cv-ink, #141210));
	box-shadow: inset 0 0 0 1px rgba(200, 169, 110, 0.55);   /* filo de oro */
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.25s ease;

	/*
	 * ⚠️ EL ANILLO QUE RESPIRA VA EN `box-shadow`, NO EN UN `::after` CON
	 * `scale`. Un pseudo-elemento creciendo obliga al navegador a repintar un
	 * área cada vez mayor; una sombra se compone y no toca el diseño. En un
	 * elemento fijo que late para siempre, esa diferencia se nota en la batería
	 * del móvil.
	 *
	 * Arranca a los 2,2 s: la entrada del botón termina hacia los 2,1 s
	 * (1,6 s de espera + 0,5 s de animación) y solaparlas convierte dos gestos
	 * limpios en un amasijo.
	 */
	animation: cwa-respirar 2.4s ease-out 2.2s infinite;
}

.cwa__ico {
	width: 1.9rem;
	height: 1.9rem;
	color: var(--cv-gold, #c8a96e);

	/* Late al mismo compás que el anillo: los dos a 2,4 s. Dos latidos con
	   ritmos distintos se leen como un fallo, no como una animación. */
	animation: cwa-latir 2.4s ease-in-out 2.2s infinite;
	transition: color 0.25s ease;
}

/*
 * ⚠️ AL PASAR POR ENCIMA, SE CALLA. La respiración existe para llamar la
 * atención; una vez que el cliente está encima, ya la tiene, y seguir latiendo
 * solo estorba a quien está a punto de pulsar.
 */
.cwa:hover .cwa__circulo,
.cwa:hover .cwa__ico,
.cwa:focus-visible .cwa__circulo,
.cwa:focus-visible .cwa__ico {
	animation-play-state: paused;
}

/* ── La cápsula de texto ─────────────────────────────────────────────────── */

/*
 * ⚠️ SE ABRE CON `max-width`, NO CON `display`. Una transición no puede animar
 * `display`, así que el texto aparecería de golpe. Y va con `white-space: nowrap`
 * porque a mitad de la animación el ancho es pequeño y el texto se partiría en
 * dos líneas antes de terminar de abrirse.
 */
.cwa__texto {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	font-family: var(--cv-sans, sans-serif);
	font-size: var(--cv-t-sm, 0.8125rem);
	font-weight: 500;
	letter-spacing: 0.04em;
	transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
	            opacity 0.25s ease,
	            padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.cwa:hover .cwa__texto,
.cwa:focus-visible .cwa__texto {
	max-width: 14rem;
	padding: 0 0.35rem 0 1.15rem;
	opacity: 1;
}

/*
 * Al pasar por encima el glifo pasa a blanco: el botón «se activa» sin cambiar
 * de forma ni de sitio.
 *
 * ⚠️ AQUÍ NO SE TOCA `box-shadow`. La animación de la respiración lo gobierna, y
 * una animación —aunque esté pausada— le gana a una regla normal. Poner un
 * `box-shadow` de hover sería una línea que nunca llega a verse.
 */
.cwa:hover .cwa__circulo,
.cwa:focus-visible .cwa__circulo {
	transform: scale(1.06);
}

.cwa:hover .cwa__ico,
.cwa:focus-visible .cwa__ico {
	color: #fff;
}

/*
 * ⚠️ EN MÓVIL LA CÁPSULA NO EXISTE. No hay «pasar por encima» en una pantalla
 * táctil: se abriría justo al tocarla, es decir, cuando ya no sirve de nada. Y
 * ahí el espacio es el bien escaso.
 */
@media (max-width: 48rem) {
	.cwa__texto {
		display: none;
	}
}

/* ── El aviso: el círculo rojo con el «!» ────────────────────────────────── */

/*
 * ⚠️ SE CONSERVA EL CARÁCTER QUE YA TENÍA. El dueño lo había ajustado a mano
 * sobre el plugin: círculo rojo que SALTA y «!» que VIBRA COMO CAMPANA. Se
 * mantiene igual — es lo que le gusta y lo que sus clientes ya reconocen.
 */
.cwa__aviso {
	position: absolute;
	top: -0.15rem;
	left: -0.15rem;

	display: grid;
	place-items: center;
	width: 1.35rem;
	height: 1.35rem;

	border: 2px solid #fff;
	border-radius: 50%;
	background: #ff0000;

	animation: cwa-saltar 1s ease-in-out infinite;
}

.cwa__aviso i {
	display: block;
	font: 700 0.8rem/1 var(--cv-sans, sans-serif);
	font-style: normal;
	color: #fff;
	transform-origin: center bottom;
	animation: cwa-campana 1s ease-in-out infinite;
}

/*
 * ⚠️ EL AVISO VA DENTRO DEL BOTÓN, NO SUELTO EN LA ESQUINA. En el plugin era un
 * elemento aparte posicionado con `!important` a 20px del borde: al mover el
 * botón —que es justo lo que va a hacer la barra de compra— el aviso se quedaba
 * atrás. Anclado al círculo, viaja con él pase lo que pase.
 */

/* ── Sitio para la barra de compra de la ficha (CAPA 41) ─────────────────── */

/*
 * ⚠️ ESTO ES MEDIA RAZÓN POR LA QUE SE CAMBIÓ EL PLUGIN. Con Click to Chat había
 * que pelearse con sus `!important` para moverlo; aquí basta una regla.
 *
 * `:has()` detecta la barra **esté donde esté**: hoy la pinta el carrito
 * (`.ccart-mobilebar`), mañana la ficha en móvil. No hay que acordarse de añadir
 * una clase al `<body>` en cada plantilla nueva — y acordarse es justo lo que
 * falla tres meses después.
 *
 * ⚠️ VA DENTRO DEL MEDIA QUERY DE 960px, el mismo con el que la barra aparece.
 * Fuera de él, en escritorio la barra está en `display:none` pero **sigue en el
 * DOM**: `:has()` la encontraría igual y el botón subiría 5,5rem sin que nada lo
 * justifique, flotando en mitad de la pantalla.
 *
 * `body.cervo-barra-compra` se mantiene como puerta de atrás por si alguna
 * plantilla necesita subirlo a mano.
 */
@media (max-width: 960px) {

	body:has(.ccart-mobilebar) .cwa,
	body.cervo-barra-compra .cwa {
		bottom: 5.75rem;
	}
}

/* ── Animaciones ─────────────────────────────────────────────────────────── */

@keyframes cwa-entrar {
	from { opacity: 0; transform: translateY(1rem) scale(0.85); }
	to   { opacity: 1; transform: none; }
}

/*
 * El anillo sale del borde y se desvanece. En ORO, no en el verde de WhatsApp:
 * el glifo ya dice de qué app se trata; el color lo pone la marca.
 */
/*
 * ⚠️ CADA FOTOGRAMA LLEVA TAMBIÉN EL FILO DE ORO (`inset`), y no es repetición
 * ociosa: `box-shadow` es UNA sola propiedad. Si la animación solo declarara el
 * anillo, **borraría el filo** durante los 2,4 s de cada ciclo — o sea, siempre.
 * Una animación no se suma a la regla base: la sustituye entera.
 */
@keyframes cwa-respirar {
	0%   { box-shadow: inset 0 0 0 1px rgba(200, 169, 110, 0.55), 0 0 0 0    rgba(200, 169, 110, 0.5); }
	70%  { box-shadow: inset 0 0 0 1px rgba(200, 169, 110, 0.55), 0 0 0 15px rgba(200, 169, 110, 0); }
	100% { box-shadow: inset 0 0 0 1px rgba(200, 169, 110, 0.55), 0 0 0 0    rgba(200, 169, 110, 0); }
}

/* ⚠️ 1.12, no 1.2. A 1,2 el icono se sale visualmente del círculo y parece que
   se ha descolocado. Late, no rebota. */
@keyframes cwa-latir {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.12); }
}

@keyframes cwa-saltar {
	0%, 100% { transform: translateY(0); }
	30%, 60% { transform: translateY(-6px); }
}

@keyframes cwa-campana {
	0%, 25%   { transform: rotate(0); }
	30%       { transform: rotate(20deg); }
	40%       { transform: rotate(-20deg); }
	50%       { transform: rotate(20deg); }
	60%, 100% { transform: rotate(0); }
}

/* ── Menos movimiento ────────────────────────────────────────────────────── */

/*
 * ⚠️ Quien pide menos movimiento ve el botón y ve el aviso — pero quietos. El
 * aviso NO se oculta: es información («escríbenos»), no decoración. Lo que
 * sobra es el salto, no el punto rojo.
 */
@media (prefers-reduced-motion: reduce) {
	.cwa,
	.cwa__circulo,
	.cwa__ico,
	.cwa__aviso,
	.cwa__aviso i {
		animation: none;
	}
}