/* =========================================================================
 * CERVO — MI CUENTA (CAPA 19)
 *
 * MÓVIL PRIMERO: todo lo de abajo está escrito para una columna, y solo a
 * partir de 900px aparece el lateral fijo y la rejilla ancha. La mayoría del
 * tráfico de esta tienda es móvil; hacerlo al revés siempre acaba en parches.
 *
 * Paleta: la de marca (tinta + oro + hueso), la misma del catálogo y de la
 * lista de deseados, para que no haya tres Cervos distintos.
 * ========================================================================= */

.woocommerce-account {
	--cvac-ink:    #141210;
	--cvac-ink-2:  #3a332c;
	--cvac-gold:   #c8a96e;
	--cvac-gold-d: #8a6d3b;
	--cvac-bone:   #faf9f7;
	--cvac-ice:    #e5e2dc;
	--cvac-mute:   #7a736c;
	--cvac-ok:     #1D9E75;
	--cvac-radius: 2px;
	/* Mismo respiro lateral que el catálogo, para que las dos secciones
	   respiren igual cuando se pasa de una a otra. */
	--cvac-pad:    clamp(1rem, 0.4rem + 2.6vw, 3.5rem);

	/* ── Lienzo y superficies ──
	   El área de cliente ya NO se dibuja con bordes. Un recuadro gris de 1 px
	   alrededor de cada cosa lee a andamiaje de formulario, no a Cervo. Ahora
	   la separación la hace el CONTRASTE entre un lienzo arena cálido y las
	   superficies blancas que se posan encima con una sombra muy contenida.
	   Los bordes se reservan para donde significan algo: la línea entre filas
	   de una tabla y la regla dorada de un aviso. */
	--cvac-lienzo: #f4f1ec;   /* arena cálida; sustituye al gris azulado del tema */
	--cvac-sup:    #ffffff;
	--cvac-sombra: 0 1px 2px rgba(20, 18, 16, .04), 0 10px 30px rgba(20, 18, 16, .055);
	--cvac-sombra-alta: 0 2px 4px rgba(20, 18, 16, .05), 0 18px 44px rgba(20, 18, 16, .09);
	--cvac-r:      4px;       /* radio de las superficies */
}

/* El fondo del tema es un gris azulado (#f3f4f8) que choca con el oro y el
   hueso de la marca. Aquí se cambia por el lienzo arena. */
.woocommerce-account .site-content,
.woocommerce-account .inner-page-wrap,
.woocommerce-account.woocommerce-page { background: var(--cvac-lienzo); }

/* El contenedor del tema encajona a 1170px y además dejaba los campos del
   login a sangre de página (medían 1900px). Aquí se recupera el control. */
.woocommerce-account #content,
.woocommerce-account .site-content {
	max-width: 100%;
	padding: 0;
	margin: 0;
}

/* ANCHO COMPLETO. El área de cliente ya no se encajona en 1240 px: usa todo
   el ancho de la pantalla con el mismo respiro lateral que el catálogo
   (--cvac-pad). En pantallas muy anchas se pone un tope generoso para que las
   líneas de texto no queden imposibles de leer de tan largas. */
.woocommerce-account .woocommerce {
	width: 100%;
	max-width: 1760px;
	margin-inline: auto;
	padding: clamp(1.5rem, 1rem + 2vw, 3rem) var(--cvac-pad) clamp(3rem, 2rem + 4vw, 5rem);
	font-family: var(--cv-sans, 'Jost', 'Segoe UI', Helvetica, Arial, sans-serif);
	color: var(--cvac-ink);
	box-sizing: border-box;
	overflow-x: clip;
}

.woocommerce-account .woocommerce *,
.woocommerce-account .woocommerce *::before,
.woocommerce-account .woocommerce *::after { box-sizing: border-box; }

/* Título "Mi cuenta" del tema: sobra, cada pantalla ya se presenta sola
   ("Tu cuenta, tu ritmo" al entrar, "Hola, X" dentro). */
.woocommerce-account .entry-header,
.woocommerce-account .page-head,
.woocommerce-account .entry-title.page-title { display: none; }



/* ══════════════════════════════════════════════════════════
   PIEZAS COMPARTIDAS
══════════════════════════════════════════════════════════ */

.cvac-eyebrow {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--cvac-gold-d);
	margin: 0 0 6px;
}

/* Botones. El color va con :visited/:hover/:focus declarados porque el tema
   trae `a:visited{color:inherit}` (0,1,1) y le gana a una clase suelta:
   el texto se quedaba oscuro sobre fondo oscuro en los enlaces ya visitados. */
.cvac-btn {
	display: inline-block;
	padding: 13px 26px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	border-radius: var(--cvac-radius);
	cursor: pointer;
	font-family: inherit;
	line-height: 1.2;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cvac-btn--solid { background: var(--cvac-ink); border: 1px solid var(--cvac-ink); }
.cvac-btn--solid,
.cvac-btn--solid:visited,
.cvac-btn--solid:hover,
.cvac-btn--solid:focus { color: var(--cvac-bone); }
.cvac-btn--solid:hover { background: var(--cvac-gold-d); border-color: var(--cvac-gold-d); }

.cvac-btn--line { background: transparent; border: 1px solid var(--cvac-ice); }
.cvac-btn--line,
.cvac-btn--line:visited,
.cvac-btn--line:hover,
.cvac-btn--line:focus { color: var(--cvac-ink); }
.cvac-btn--line:hover { border-color: var(--cvac-ink); background: transparent; }


/* ══════════════════════════════════════════════════════════
   ACCESO (login + registro)
══════════════════════════════════════════════════════════ */

/*
 * Sin footer (ver cervo-cuenta.php), la pantalla de acceso se quedaba corta y
 * dejaba un vacío blanco debajo. Se estira al alto de la ventana menos el
 * header y la tarjeta se centra: así parece una pantalla de entrada de verdad
 * y no una página a la que le falta el final.
 */
.woocommerce-account:not(.logged-in) .woocommerce {
	min-height: calc(100vh - 108px);   /* 44 barra informativa + 64 navbar */
	display: flex;
	align-items: center;
	justify-content: center;
}

.cvac-login {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	width: 100%;
	max-width: 1080px;
	margin-inline: auto;
	background: var(--cvac-sup);
	/* Sin borde: la tarjeta se separa del lienzo por elevación, no por una
	   línea gris. Es lo que hacía que la pantalla de acceso pareciera un
	   formulario administrativo. */
	border: none;
	border-radius: var(--cvac-r);
	box-shadow: var(--cvac-sombra-alta);
	overflow: hidden;
	animation: cvacEntra .6s cubic-bezier(.16, 1, .3, 1) both;
}

/* En móvil el formulario va PRIMERO: quien entra desde el celular viene a
   entrar, no a que le convenzan. Los motivos quedan debajo. */
.cvac-login__form  { order: 1; padding: 28px 22px 32px; }
.cvac-login__aside {
	order: 2;
	padding: 26px 22px 30px;
	background: var(--cvac-ink);
	color: var(--cvac-bone);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.cvac-login__cuerpo { position: relative; z-index: 1; }

/* Silueta grande del ciervo sangrando por la esquina. Muy tenue: da
   profundidad al panel sin competir con el texto. */
.cvac-login__aside .cervo-deer-wm {
	position: absolute;
	right: -30%;
	bottom: -26%;
	width: 92%;
	height: auto;
	fill: var(--cvac-gold);
	/* Muy tenue y desplazada a la esquina: tiene que sentirse la profundidad,
	   no verse el dibujo. Al .07 la cornamenta cruzaba por detrás del texto. */
	opacity: .045;
	pointer-events: none;
	z-index: 0;
}

.cvac-login__aside .cvac-eyebrow { color: var(--cvac-gold); }

/* ── El ciervo ──
   El SVG va como máscara y el color lo pone un degradado de oro por debajo
   (misma técnica que cervo-paginas y cervo-social). Ventaja sobre un <img>:
   se tiñe con el oro exacto de la marca y puede brillar, sin cargar un
   archivo de color fijo ni incrustar un SVG gigante en el HTML. */
.cvac-login__deer {
	width: clamp(64px, 16vw, 104px);
	aspect-ratio: 1 / 1;
	margin: 0 0 22px;
	background: linear-gradient(115deg,
		#8a6d3b 0%, #c8a96e 30%, #f0dcb0 48%, #c8a96e 66%, #8a6d3b 100%);
	background-size: 250% auto;
	-webkit-mask: url("../img/cervo-logo.svg") center / contain no-repeat;
	        mask: url("../img/cervo-logo.svg") center / contain no-repeat;
	animation: cvacBrillo 7s linear infinite, cvacDeerIn 1.1s cubic-bezier(.22, .68, 0, 1.1) both;
}
@keyframes cvacBrillo { to { background-position: -250% center; } }
@keyframes cvacDeerIn {
	from { opacity: 0; transform: translateY(18px) scale(.94); }
	to   { opacity: 1; transform: none; }
}

.cvac-login__claim {
	font-family: var(--cv-serif, 'Cormorant Garamond', Georgia, serif);
	font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
	font-weight: 400;
	line-height: 1.1;
	margin: 0 0 22px;
	color: #fff;
}

.cvac-ventajas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.cvac-ventajas li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	/* Entran una detrás de otra: un solo gesto al abrir la pantalla. */
	animation: cvacVentaja .55s cubic-bezier(.16, 1, .3, 1) both;
}
.cvac-ventajas li:nth-child(1) { animation-delay: .18s; }
.cvac-ventajas li:nth-child(2) { animation-delay: .26s; }
.cvac-ventajas li:nth-child(3) { animation-delay: .34s; }
@keyframes cvacVentaja {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

/* El icono va dentro de un cuadrito de oro tenue: le da peso a la lista y
   la separa del texto sin usar viñetas ni números (esto no es una secuencia,
   son tres razones sueltas). */
.cvac-ventajas li > svg {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	padding: 7px;
	box-sizing: border-box;
	border-radius: 50%;
	background: rgba(200, 169, 110, .12);
	color: var(--cvac-gold);
}
.cvac-ventajas b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: #fff; letter-spacing: .01em; }
.cvac-ventajas span { font-size: 12.5px; line-height: 1.6; color: rgba(250, 249, 247, .66); }

/* ── Entrar con Google (CAPA 20) ── */
/*
 * LA PRIMERA VERSIÓN LEÍA A PLANTILLA, y el motivo era tipográfico: en esta
 * tarjeta TODO habla en versalitas finas muy espaciadas —ENTRAR, CREAR
 * CUENTA, CORREO ELECTRÓNICO, ACCEDER— y el botón entraba en minúscula de
 * 13,5 px, que es el aspecto por defecto de cualquier botón social de
 * cualquier sitio. Un elemento hablando otro idioma en mitad de la
 * conversación se lee como pegado, no como diseñado.
 *
 * Ahora el botón habla el idioma de la casa y el logo mantiene el suyo:
 *
 *   · El TEXTO pasa a la misma versalita espaciada que las pestañas.
 *   · La G no flota: vive en su PLACA blanca con hueco propio, como una
 *     pieza de otra marca que Cervo enmarca. El logo no se toca.
 *   · La superficie no es blanco plano sino un degradado hueso muy corto,
 *     con una luz interior arriba: la misma materia de las superficies del
 *     área de cliente, no una caja de formulario.
 *   · Al pasar por encima cruza un BRILLO dorado —el mismo gesto del oro de
 *     marca— y el borde se vuelve oro. Ahí es donde se nota Cervo: en el
 *     movimiento, no encima del logo ajeno.
 *
 * Es un <a>, no un <button>, para esquivar dos reglas de orchid-store:
 * `button:hover { background:#e26143 }` (naranja de otro tema encima) y
 * `button:hover svg { fill:#fff }`, que borraba los cuatro colores de la G.
 * Aun así se blindan las dos aquí abajo, por si el botón acaba envuelto en
 * otro sitio.
 */
.cvac-social { margin-bottom: 22px; }

.cvac-google {
	position: relative;
	overflow: hidden;             /* recorta el brillo al pasar */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	/* El respiro lateral deja sitio a la placa sin empujar el texto: así el
	   rótulo queda centrado en el BOTÓN, no en el hueco sobrante. */
	padding: 16px 52px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 42%),
		linear-gradient(180deg, #fffefd, #f7f4ef);
	border: 1px solid #ded8cf;
	border-radius: var(--cvac-r, 4px);
	box-shadow: 0 1px 1px rgba(20, 18, 16, .03);
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .25s var(--cv-ease, ease), box-shadow .25s ease, transform .25s ease;
}

/* Color Y SUBRAYADO con los cuatro estados declarados. El tema trae
   `a:visited{color:inherit}` y `a:hover{text-decoration:underline}`, ambas
   con peso (0,1,1): a una clase suelta le ganan. Sin esto, al pasar por
   encima aparecía "CONTINUAR CON GOOGLE" subrayado como un enlace de texto. */
.cvac-google,
.cvac-google:visited,
.cvac-google:hover,
.cvac-google:focus,
.cvac-google:active { color: var(--cvac-ink); text-decoration: none; }

.cvac-google__texto { position: relative; z-index: 2; }

/* ── La placa del logo ── */
.cvac-google__placa {
	position: absolute;
	top: 50%;
	left: 8px;
	z-index: 2;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	background: #fff;
	border: 1px solid #eae5dd;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(20, 18, 16, .05);
	transition: border-color .25s ease, box-shadow .25s ease;
}

/* La G mantiene sus cuatro colores pase lo que pase: el `button:hover svg
   {fill:#fff}` del tema pesa (0,1,1) y estas reglas (0,2,1) le ganan. */
.cvac-google__g { display: block; }
.cvac-google__g path:nth-child(1) { fill: #4285F4; }
.cvac-google__g path:nth-child(2) { fill: #34A853; }
.cvac-google__g path:nth-child(3) { fill: #FBBC05; }
.cvac-google__g path:nth-child(4) { fill: #EA4335; }

/* ── El brillo de oro ── */
/*
 * Una banda diagonal muy tenue que cruza el botón de izquierda a derecha al
 * pasar por encima. Es el gesto del oro de marca sin teñir nada de oro: el
 * texto sigue siendo tinta y el logo sigue siendo Google.
 */
.cvac-google__brillo {
	position: absolute;
	inset: 0 auto 0 -60%;
	z-index: 1;
	width: 55%;
	background: linear-gradient(100deg, transparent, rgba(200, 169, 110, .22), transparent);
	transform: skewX(-18deg);
	transition: left .55s var(--cv-ease, cubic-bezier(.16, 1, .3, 1));
	pointer-events: none;
}

/* ── Estados ── */
/* El prefijo .woocommerce-account es para ganarle a los :hover del tema. */
.woocommerce-account .cvac-google:hover {
	border-color: var(--cvac-gold);
	box-shadow: 0 2px 4px rgba(20, 18, 16, .05), 0 14px 32px rgba(20, 18, 16, .09);
	transform: translateY(-1px);
}
.woocommerce-account .cvac-google:hover .cvac-google__brillo { left: 105%; }
.woocommerce-account .cvac-google:hover .cvac-google__placa {
	border-color: #e0d6c2;
	box-shadow: 0 2px 6px rgba(20, 18, 16, .09);
}

.cvac-google:focus-visible {
	outline: 2px solid var(--cvac-ink);
	outline-offset: 2px;
}

.woocommerce-account .cvac-google:active {
	transform: translateY(0);
	box-shadow: 0 1px 1px rgba(20, 18, 16, .05) inset;
}

/* Quien pide menos movimiento se queda con el botón quieto: el brillo es
   decoración, y la información (borde y sombra) no depende de él. */
@media (prefers-reduced-motion: reduce) {
	.cvac-google,
	.cvac-google__brillo { transition: none; }
	.woocommerce-account .cvac-google:hover { transform: none; }
	.woocommerce-account .cvac-google:hover .cvac-google__brillo { left: -60%; }
}

/* En pantallas estrechas el rótulo espaciado no cabe entre placa y borde:
   se recorta el espaciado antes que dejarlo partir en dos líneas. */
@media (max-width: 380px) {
	.cvac-google { padding: 16px 48px; font-size: 10.5px; letter-spacing: .1em; }
	.cvac-google__placa { width: 34px; height: 34px; left: 7px; }
}

/* Separador. La línea NO cruza por detrás del texto: son dos líneas y el
   texto en medio, así no hay que pintarle un fondo al <span> que luego se
   vea recortado sobre cualquier superficie. Se desvanecen hacia el rótulo
   para que no parezcan dos tajos de la misma longitud. */
.cvac-o {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 20px 0 2px;
}
.cvac-o::before,
.cvac-o::after {
	content: "";
	flex: 1;
	height: 1px;
}
.cvac-o::before { background: linear-gradient(90deg, transparent, var(--cvac-ice)); }
.cvac-o::after  { background: linear-gradient(90deg, var(--cvac-ice), transparent); }
.cvac-o span {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cvac-mute);
}

/* Aviso de la pantalla de acceso (acceso cancelado, intento caducado…).
   Regla dorada a la izquierda: el mismo recurso que los avisos del panel,
   para que no parezca un error del navegador. */
.cvac-aviso {
	margin: 0 0 20px;
	padding: 12px 14px;
	background: #fff;
	border-left: 2px solid var(--cvac-gold-d);
	border-radius: 0 var(--cvac-r, 4px) var(--cvac-r, 4px) 0;
	box-shadow: var(--cvac-sombra);
	font-size: 13px;
	line-height: 1.55;
	color: var(--cvac-ink-2);
}


/* ── Pestañas ── */
.cvac-tabs { position: relative; display: flex; gap: 4px; border-bottom: 1px solid var(--cvac-ice); margin-bottom: 26px; }
.cvac-tab {
	flex: 1;
	background: none;
	border: none;
	padding: 12px 8px 14px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cvac-mute);
	cursor: pointer;
	transition: color .2s ease;
	-webkit-tap-highlight-color: transparent;
}
/* Prefijo .woocommerce-account para ganarle a los button:hover del tema. */
.woocommerce-account .cvac-tab:hover,
.woocommerce-account .cvac-tab:focus,
.woocommerce-account .cvac-tab:active { background: none; color: var(--cvac-ink); box-shadow: none; outline: none; }
.cvac-tab[aria-selected="true"] { color: var(--cvac-ink); }

.cvac-tabs__marca {
	position: absolute;
	bottom: -1px; left: 0;
	width: 50%;
	height: 2px;
	background: var(--cvac-ink);
	transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}
.cvac-login.is-registro .cvac-tabs__marca { transform: translateX(100%); }

/* Un panel u otro. Sin JS se ven los dos seguidos, que sigue siendo usable. */
.cvac-login .cvac-panel { display: block; }
.js .cvac-login #cvacPanelCrear,
.js .cvac-login.is-registro #cvacPanelEntrar { display: none; }
.js .cvac-login.is-registro #cvacPanelCrear  { display: block; }

/* ── Campos ── */
/*
 * ⚠️ EL BORDE DE LA PANTALLA DE ACCESO SALÍA DE AQUÍ.
 * orchid-store trae `.woocommerce form.login, .woocommerce form.register`
 * con `border:1px solid #cfc8d8` y `padding:30px`, y esa regla pesa (0,2,1):
 * le ganaba a cualquier `.cvac-form` suelto. Se neutraliza con el prefijo
 * .woocommerce-account, que la deja en (0,3,1).
 */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
	border: none;
	padding: 0;
	margin: 0;
	background: none;
	border-radius: 0;
}

.cvac-form { margin: 0; }
.cvac-campo { display: block; margin: 0 0 18px; }
.cvac-campo label {
	display: block;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cvac-mute);
	margin-bottom: 7px;
}

/* Se pisan los estilos de input del tema, que los dejaba a ancho de página. */
.woocommerce-account .cvac-campo input[type="text"],
.woocommerce-account .cvac-campo input[type="email"],
.woocommerce-account .cvac-campo input[type="password"] {
	width: 100%;
	max-width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--cvac-ice);
	border-radius: var(--cvac-radius);
	background: #fff;
	font-family: inherit;
	/* 16px justos: por debajo de eso, iOS hace zoom al tocar el campo y
	   descoloca la página entera. */
	font-size: 16px;
	color: var(--cvac-ink);
	transition: border-color .18s ease, box-shadow .18s ease;
}
.woocommerce-account .cvac-campo input:focus {
	outline: none;
	border-color: var(--cvac-ink);
	box-shadow: 0 0 0 3px rgba(20, 18, 16, .07);
}

.cvac-ayuda { display: block; font-size: 11.5px; color: var(--cvac-mute); margin-top: 6px; line-height: 1.5; }

/* ══ VER / OCULTAR CONTRASEÑA ══
 *
 * Un solo ojo en todo el sitio: el que WooCommerce inyecta
 * (.show-password-input). Antes convivían dos —el suyo y uno propio— pegados
 * el uno al otro. Aquí se le quita su icono de fuente (un glifo de la
 * webfont de WooCommerce que no encaja con nada) y se le pone el ojo de
 * Cervo, dibujado con máscara para poder teñirlo.
 *
 * Va sin prefijo .woocommerce-account a propósito: así también funciona en el
 * checkout y en recuperar contraseña.
 */
.woocommerce form .password-input,
.woocommerce-page form .password-input {
	position: relative;
	display: block;
	width: 100%;
}

.woocommerce form .password-input input,
.woocommerce-page form .password-input input { padding-right: 48px; }

.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .18s ease;
}
/* Fuera el glifo de la webfont de WooCommerce. */
.woocommerce form .show-password-input::after,
.woocommerce-page form .show-password-input::after { content: none; }

/* El ojo, dibujado con máscara para poder teñirlo con el color de la marca. */
.woocommerce form .show-password-input::before,
.woocommerce-page form .show-password-input::before {
	content: '';
	position: absolute;
	inset: 9px;
	background: #7a736c;
	-webkit-mask: var(--cvac-ojo) center / contain no-repeat;
	        mask: var(--cvac-ojo) center / contain no-repeat;
	transition: background-color .18s ease;
}

.woocommerce form .show-password-input:hover,
.woocommerce-page form .show-password-input:hover { background: rgba(20, 18, 16, .05); }
.woocommerce form .show-password-input:hover::before,
.woocommerce-page form .show-password-input:hover::before { background: #141210; }

/* Estado "contraseña a la vista": ojo tachado y en oro, para que se note de
   un vistazo que el texto está descubierto. */
.woocommerce form .show-password-input.display-password::before,
.woocommerce-page form .show-password-input.display-password::before {
	background: #8a6d3b;
	-webkit-mask-image: var(--cvac-ojo-off);
	        mask-image: var(--cvac-ojo-off);
}

.woocommerce form .show-password-input:focus-visible,
.woocommerce-page form .show-password-input:focus-visible {
	outline: 2px solid #141210;
	outline-offset: 1px;
}

/* Los dos dibujos. Se declaran en :root para que estén disponibles también
   fuera del área de cliente (checkout). */
:root {
	--cvac-ojo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	--cvac-ojo-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 6.2A9.9 9.9 0 0 1 12 6c6.4 0 10 6 10 6a17 17 0 0 1-3.1 3.9M6.6 6.6A17 17 0 0 0 2 12s3.6 6 10 6a9.7 9.7 0 0 0 4.3-1'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cline x1='3' y1='3' x2='21' y2='21'/%3E%3C/svg%3E");
}

.cvac-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.cvac-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cvac-ink); cursor: pointer; margin: 0; }
.cvac-check input { width: 16px; height: 16px; accent-color: var(--cvac-ink); margin: 0; }
.cvac-olvide { font-size: 12.5px; color: var(--cvac-mute); text-decoration: none; border-bottom: 1px solid transparent; }
.cvac-olvide:visited { color: var(--cvac-mute); }
.cvac-olvide:hover { color: var(--cvac-ink); border-bottom-color: var(--cvac-ice); }

.cvac-form .cvac-btn { width: 100%; padding: 15px; }
/* Aviso de privacidad de WooCommerce (hook woocommerce_register_form).
   Llegaba con el tamaño de un párrafo normal y se comía el formulario. */
.cvac-form .woocommerce-privacy-policy-text,
.cvac-legal {
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--cvac-mute);
	margin: 0 0 18px;
}
.cvac-form .woocommerce-privacy-policy-text p { margin: 0; font-size: inherit; line-height: inherit; }
.cvac-form .woocommerce-privacy-policy-text a,
.cvac-form .woocommerce-privacy-policy-text a:visited,
.cvac-legal a,
.cvac-legal a:visited { color: var(--cvac-ink); }


/* ── Acceso: dos columnas a partir de TABLET ──
   La tarjeta mide 1080 px como mucho, así que a 768 ya caben las dos
   columnas de sobra. Antes esperaba a 900 y en tablet se veía como un móvil
   estirado, que era parte de lo que no convencía. */
@media (min-width: 768px) {

	.cvac-login { grid-template-columns: .92fr 1fr; gap: 0; }

	.cvac-login__aside {
		order: 1;
		padding: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.cvac-login__form {
		order: 2;
		padding: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem);
		/* Centrado vertical: el formulario es más corto que la columna de
		   marca y antes quedaba colgando arriba con un hueco muerto debajo. */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.cvac-login__deer { width: clamp(72px, 7vw, 96px); margin-bottom: 26px; }
	.cvac-login__claim { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3rem); margin-bottom: 30px; }
}


/* ══════════════════════════════════════════════════════════
   PANEL (hub)
══════════════════════════════════════════════════════════ */

/* ── Simulador de envío (solo administración) ── */
/*
 * Deliberadamente FEO, y esa es la decisión de diseño. Es la única pieza del
 * sitio que no debe integrarse: si esta barra pareciera parte de Cervo, algún
 * día alguien vería una "SIMULACIÓN" en el celular y la tomaría por el estado
 * real de un pedido. Rayas amarillas de obra, tipografía de sistema y ningún
 * token de marca: se lee como andamio, que es lo que es.
 */
.cvac-sim {
	margin: 0 0 20px;
	padding: 10px 12px;
	background: #fffdf2;
	border: 1px dashed #c9a227;
	border-radius: 3px;
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 12px;
	color: #5c4a10;
}
.cvac-sim.is-activo {
	background: repeating-linear-gradient(135deg, #fff8d6, #fff8d6 12px, #fdf1b8 12px, #fdf1b8 24px);
	border-style: solid;
	border-width: 2px;
}
.cvac-sim__tit { margin: 0 0 8px; line-height: 1.4; }
.cvac-sim__tit b { letter-spacing: .06em; }

.cvac-sim__botones { display: flex; flex-wrap: wrap; gap: 6px; }

.cvac-sim__b {
	display: inline-block;
	padding: 6px 11px;
	background: #fff;
	border: 1px solid #d8cba0;
	border-radius: 3px;
	font-size: 11.5px;
	line-height: 1.2;
	text-decoration: none;
}
/* :visited y :hover declarados: el tema trae `a:visited{color:inherit}` y
   `a:hover{text-decoration:underline}` con peso (0,1,1). */
.cvac-sim__b,
.cvac-sim__b:visited,
.cvac-sim__b:hover,
.cvac-sim__b:focus { color: #5c4a10; text-decoration: none; }
.woocommerce-account .cvac-sim__b:hover { background: #fffdf2; border-color: #a8892e; }

.cvac-sim__b.is-on { background: #5c4a10; border-color: #5c4a10; }
.cvac-sim__b.is-on,
.cvac-sim__b.is-on:visited,
.cvac-sim__b.is-on:hover,
.cvac-sim__b.is-on:focus { color: #fff; }

.cvac-sim__b--salir { border-style: dashed; }


.cvac-hola {
	margin-bottom: 22px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.cvac-hola__titulo {
	font-family: var(--cv-serif, 'Cormorant Garamond', Georgia, serif);
	font-size: clamp(1.8rem, 1.4rem + 2.4vw, 2.8rem);
	font-weight: 400;
	line-height: 1.1;
	margin: 0 0 6px;
}
.cvac-hola__sub { font-size: 13px; color: var(--cvac-mute); margin: 0; letter-spacing: .02em; }

/* ── Tarjeta del rango ── */
.cvac-rango {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	background: var(--cvac-sup);
	border-radius: var(--cvac-r);
	box-shadow: var(--cvac-sombra);
}
/* Basta con cambiar --av: el alto, la cornamenta y la silueta se recalculan. */
.cvac-rango .cvac-avatar { --av: 58px; }

.cvac-rango__datos { flex: 1; min-width: 0; }
.cvac-rango__nombre {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cvac-gold-d);
	margin: 0 0 3px;
}
.cvac-rango[data-rango="plata"]   .cvac-rango__nombre { color: #7b828a; }
.cvac-rango[data-rango="platino"] .cvac-rango__nombre { color: #6f858e; }
.cvac-rango[data-rango="bronce"]  .cvac-rango__nombre { color: #8a5a30; }
.cvac-rango[data-rango="cervato"] .cvac-rango__nombre { color: var(--cvac-mute); }

.cvac-rango__lema { font-size: 13px; color: var(--cvac-ink); margin: 0 0 10px; line-height: 1.4; }

.cvac-rango__barra {
	height: 4px;
	border-radius: 2px;
	background: rgba(20, 18, 16, .08);
	overflow: hidden;
	margin-bottom: 6px;
}
.cvac-rango__barra i {
	display: block;
	height: 100%;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--cvac-gold-d), var(--cvac-gold));
	animation: cvacAvanza 1s cubic-bezier(.16, 1, .3, 1) .2s both;
}
.cvac-rango__falta { font-size: 11.5px; color: var(--cvac-mute); margin: 0; letter-spacing: .02em; }

@media (min-width: 560px) {
	.cvac-hola { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
	.cvac-rango { flex-shrink: 0; min-width: 290px; }
}

/* ── Pedido en curso ── */
.cvac-envio {
	background: var(--cvac-ink);
	color: var(--cvac-bone);
	padding: 22px 20px 24px;
	margin-bottom: 22px;
	border-radius: var(--cvac-radius);
}
.cvac-envio .cvac-eyebrow { color: var(--cvac-gold); }
.cvac-envio__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 26px; }
.cvac-envio__num { font-size: 20px; font-weight: 600; margin: 0; color: #fff; letter-spacing: .02em; }
.cvac-estado {
	flex-shrink: 0;
	background: rgba(200, 169, 110, .16);
	color: var(--cvac-gold);
	border: 1px solid rgba(200, 169, 110, .4);
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Barra de pasos. El padding de arriba es el sitio del ciervo. */
.cvac-pasos { position: relative; padding-top: 34px; margin-bottom: 24px; }

/*
 * ⚠️ EL 6% DE ANTES ERA UN OJÍMETRO, Y NO CUADRABA NUNCA.
 *
 * Los puntos son <li> con flex:1, así que cada uno ocupa 1/N del ancho y su
 * punto queda CENTRADO en su tramo: con 4 pasos, en 12,5% · 37,5% · 62,5% ·
 * 87,5%. La línea, en cambio, iba de 6% a 94%, y el PHP reparte el avance
 * (0 · 33 · 66 · 100%) sobre ESA línea. Resultado: el ciervo se quedaba
 * corto en los dos primeros pasos y se pasaba en los dos últimos. En
 * "Preparando" llegaba al 35,3% cuando el punto estaba en el 37,5%.
 *
 * La línea tiene que empezar en el CENTRO DEL PRIMER PUNTO y acabar en el
 * del último. Ese margen es exactamente medio tramo: 50% / N.
 *
 * Se calcula con el número real de pasos (--cvac-pasos-n, que imprime
 * dashboard.php), no con un 12.5% escrito a mano: el día que Deprisa nos dé
 * un quinto estado, esto sigue cuadrando solo.
 */
.cvac-pasos__linea {
	position: absolute;
	top: 39px;   /* 34 del hueco del ciervo + 5 hasta el centro de los puntos */
	left:  calc(50% / var(--cvac-pasos-n, 4));
	right: calc(50% / var(--cvac-pasos-n, 4));
	height: 2px;
	background: rgba(250, 249, 247, .16);
}
.cvac-pasos__linea i { display: block; height: 100%; background: var(--cvac-gold); animation: cvacAvanza 1.1s cubic-bezier(.16, 1, .3, 1) .15s both; }
@keyframes cvacAvanza { from { transform: scaleX(0); transform-origin: left; } to { transform: none; } }

/* ══ EL CIERVO EN EL RECORRIDO ══
   Cabalga sobre la línea de progreso, en el punto exacto donde va el pedido.
   Es la pieza que hace suya esta pantalla: el logo de Cervo es un animal
   corriendo, y aquí corre de verdad marcando el avance del envío. El PHP le
   pasa el porcentaje en --cvac-avance. */
.cvac-pasos__deer {
	position: absolute;
	/* Va ENCIMA del raíl, no montado en él: un ciervo dorado sobre la línea
	   dorada perdía la silueta. Ahí arriba se recorta contra el negro y se
	   lee de un vistazo dónde va el pedido. */
	bottom: 9px;
	left: var(--cvac-avance, 0%);
	width: 34px;
	height: 34px;
	margin-left: -17px;
	background: var(--cvac-gold);
	-webkit-mask: url("../img/cervo-logo.svg") center / contain no-repeat;
	        mask: url("../img/cervo-logo.svg") center / contain no-repeat;
	animation: cvacCorre 1.1s cubic-bezier(.16, 1, .3, 1) .15s both;
}
/* Arranca en el origen y llega a su posición: se lee el recorrido, no solo
   el resultado. */
@keyframes cvacCorre {
	from { left: 0%; opacity: 0; }
	40%  { opacity: 1; }
	to   { left: var(--cvac-avance, 0%); opacity: 1; }
}
.cvac-pasos__lista { list-style: none; margin: 0; padding: 0; display: flex; }
.cvac-pasos__lista li { flex: 1; text-align: center; position: relative; }
.cvac-pasos__punto {
	display: block;
	width: 12px; height: 12px;
	margin: 0 auto 9px;
	border-radius: 50%;
	background: var(--cvac-ink);
	border: 2px solid rgba(250, 249, 247, .3);
	position: relative;
	z-index: 1;
	transition: background-color .3s ease, border-color .3s ease;
}
.cvac-pasos__lista li.is-hecho .cvac-pasos__punto { background: var(--cvac-gold); border-color: var(--cvac-gold); }
.cvac-pasos__txt { font-size: 10px; letter-spacing: .06em; color: rgba(250, 249, 247, .5); text-transform: uppercase; }
.cvac-pasos__lista li.is-hecho .cvac-pasos__txt { color: var(--cvac-bone); }

.cvac-envio__pie { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(250, 249, 247, .12); }
.cvac-guia { font-size: 13px; margin: 0; color: rgba(250, 249, 247, .8); letter-spacing: .02em; }
.cvac-guia b { color: #fff; font-weight: 600; letter-spacing: .06em; }
.cvac-guia--sin { font-size: 12.5px; line-height: 1.6; color: rgba(250, 249, 247, .6); }
.cvac-envio__pie .cvac-btn--line { border-color: rgba(250, 249, 247, .3); }
.cvac-envio__pie .cvac-btn--line,
.cvac-envio__pie .cvac-btn--line:visited,
.cvac-envio__pie .cvac-btn--line:hover { color: var(--cvac-bone); }
.cvac-envio__pie .cvac-btn--line:hover { border-color: var(--cvac-bone); }

/* ── Repetir el último pedido ── */
.cvac-repetir {
	background: var(--cvac-sup);
	box-shadow: var(--cvac-sombra);
	border-radius: var(--cvac-r);
	/* La única línea que se queda: la regla dorada de la izquierda dice
	   "esto es un aparte", que es información, no adorno. */
	border-left: 3px solid var(--cvac-gold);
	padding: 20px;
	margin-bottom: 22px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cvac-repetir__tit { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.cvac-repetir__txt { font-size: 13px; color: var(--cvac-mute); margin: 0; line-height: 1.6; }
.cvac-repetir__ctas { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Rejilla de accesos ── */
.cvac-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 22px;
}
.cvac-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 16px 20px;
	background: var(--cvac-sup);
	border: none;
	border-radius: var(--cvac-r);
	box-shadow: var(--cvac-sombra);
	text-decoration: none;
	transition: box-shadow .25s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
	-webkit-tap-highlight-color: transparent;
	/* Entrada escalonada: las cuatro tarjetas suben una detrás de otra. Un
	   solo gesto orquestado al cargar, no efectos sueltos por la página. */
	animation: cvacEntra .5s cubic-bezier(.16, 1, .3, 1) both;
}
.cvac-card:nth-child(1) { animation-delay: .06s; }
.cvac-card:nth-child(2) { animation-delay: .12s; }
.cvac-card:nth-child(3) { animation-delay: .18s; }
.cvac-card:nth-child(4) { animation-delay: .24s; }

.cvac-card:hover { box-shadow: var(--cvac-sombra-alta); transform: translateY(-3px); }
.cvac-card:active { transform: translateY(0) scale(.99); }

/* El icono se tiñe de oro al pasar por encima: confirma que la tarjeta
   entera es pulsable sin añadir una flecha ni un "ver más". */
.cvac-card__ico { transition: background-color .25s ease, color .25s ease; }
.cvac-card:hover .cvac-card__ico { background: var(--cvac-ink); color: var(--cvac-gold); border-color: var(--cvac-ink); }
.cvac-card__ico {
	position: relative;
	width: 38px; height: 38px;
	display: grid;
	place-content: center;
	margin-bottom: 8px;
	border-radius: 50%;
	background: var(--cvac-bone);
	border: 1px solid var(--cvac-ice);
	color: var(--cvac-gold-d);
}
.cvac-card__ico svg { width: 18px; height: 18px; }
.cvac-card b,
.cvac-card b:visited { font-size: 13px; font-weight: 600; color: var(--cvac-ink); letter-spacing: .01em; }
.cvac-card > span:last-child { font-size: 11.5px; color: var(--cvac-mute); line-height: 1.45; }
/* El enlace entero es una tarjeta: el color lo ponen los hijos. */
.cvac-card, .cvac-card:visited, .cvac-card:hover { color: var(--cvac-ink); }

/* ── Bloques de abajo ── */
.cvac-abajo { display: grid; grid-template-columns: 1fr; gap: 12px; }
.cvac-promo,
.cvac-ayuda-caja {
	background: var(--cvac-sup);
	border: none;
	border-radius: var(--cvac-r);
	box-shadow: var(--cvac-sombra);
	padding: 24px 22px 26px;
	animation: cvacEntra .5s cubic-bezier(.16, 1, .3, 1) .3s both;
}
.cvac-ayuda-caja { animation-delay: .36s; }
.cvac-promo__tit { font-size: 17px; font-weight: 600; margin: 0 0 8px; letter-spacing: .01em; }
.cvac-promo__tit .woocommerce-Price-amount { font-weight: 600; }
.cvac-promo__txt { font-size: 13px; line-height: 1.65; color: var(--cvac-mute); margin: 0 0 18px; }


/* ══════════════════════════════════════════════════════════
   NAVEGACIÓN DEL ÁREA
══════════════════════════════════════════════════════════ */

/* ── Limpieza de lo que el tema le pone al menú de la cuenta ──
   orchid-store le mete padding:30px, width:100%, borde y una flecha
   FontAwesome (\f105) delante de cada opción. Nada de eso encaja aquí. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	border: none;
}
/* ⚠️ El padding del menú se declara SIEMPRE con estas dos clases —aquí y en
   el bloque de escritorio— para que las dos reglas pesen igual y mande el
   orden. Mezclando especificidades, la limpieza del tema le ganaba al raíl y
   el escritorio se quedaba con el padding de móvil. Al contenido no se le
   toca el padding: ese es el aire que pediste. */
.woocommerce-account .cvac-nav { padding: 6px; }
.woocommerce-page .cvac-nav ul li::before,
.woocommerce-account .cvac-nav ul li::before { content: none; display: none; }

/* El tema da a cada <li> padding 15px y una línea inferior, pensados para su
   lista vertical. Aquí el aspecto lo pone el <a>, así que el <li> se deja
   limpio. */
.woocommerce-page .cvac-nav ul li,
.woocommerce-account .cvac-nav ul li {
	border: none;
	padding: 0;
	display: block;
}

/* ══ MÓVIL Y TABLET: una tira de pestañas, no seis píldoras sueltas ══
   El problema anterior era que cada opción flotaba por su cuenta y el
   conjunto no se leía como un control. Ahora es UNA superficie blanca con
   sus pestañas dentro: icono arriba, etiqueta debajo, activo en tinta. */
.cvac-nav {
	margin-bottom: 18px;
	background: var(--cvac-sup);
	border-radius: var(--cvac-r);
	box-shadow: var(--cvac-sombra);
	padding: 6px;
	display: flex;
	align-items: stretch;
	gap: 4px;
}
/* ══════════════════════════════════════════════════════════
   RANGOS Y AVATAR

   Al ciervo le crece la cornamenta con los años; aquí le crece con las
   compras. Seis niveles, cada uno con su metal. El color no es decorativo:
   es la señal que se reconoce de lejos, antes de leer el nombre del rango.
══════════════════════════════════════════════════════════ */

/* ══ AVATAR DE RANGO ══
   Disco con el ciervo de la marca + cinco puntos que cuentan el nivel.
   Sustituye a la versión de cornamenta creciente: ver el porqué en
   cervo-cuenta.php, función cervo_cuenta_avatar(). */
.cvac-avatar {
	--m1: #b9b2a8;   /* metal claro (brillo) */
	--m2: #8a8279;   /* metal medio          */
	--m3: #6e675f;   /* metal en sombra      */
	--av: 46px;      /* diámetro del disco; lo único que hay que cambiar */
	position: relative;
	display: block;
	flex-shrink: 0;
	width: var(--av);
	/* MÁS ALTA que ancha: arriba va el hueco de la cornamenta. Si la caja
	   midiera solo el disco, las puntas de los rangos altos las recortaría
	   la tarjeta. */
	height: calc(var(--av) * 1.82);
	color: var(--m1);
	/* Contexto de apilado propio: la cornamenta va con z-index -1 para quedar
	   detrás del disco, y sin esto se colaría detrás de la tarjeta entera. */
	isolation: isolate;
}

/* Los seis metales, con TRES tonos: el de en medio hace la banda de brillo
   que cruza el aro. Con dos tonos el anillo parecía un círculo plano de
   color, y Plata y Platino eran indistinguibles. */
.cvac-avatar[data-rango="cervato"] { --m1: #ded8cf; --m2: #a9a196; --m3: #7d766c; }
.cvac-avatar[data-rango="bronce"]  { --m1: #e6a877; --m2: #b4703c; --m3: #6f4522; }
.cvac-avatar[data-rango="plata"]   { --m1: #f2f4f7; --m2: #b6bcc4; --m3: #7d848d; }
.cvac-avatar[data-rango="oro"]     { --m1: #f4dca6; --m2: #c8a96e; --m3: #806029; }
.cvac-avatar[data-rango="platino"] { --m1: #ffffff; --m2: #cdd9de; --m3: #7e949d; }
.cvac-avatar[data-rango="leyenda"] { --m1: #fbeec6; --m2: #d4b477; --m3: #5c421a; }

/* El metal va en el ARO; el interior se queda en tinta para que la silueta
   del ciervo se recorte contra el negro. */
.cvac-avatar__disco {
	position: absolute;
	left: 0; right: 0; bottom: 0;   /* anclado abajo; arriba manda la cornamenta */
	width: var(--av);
	height: var(--av);
	border-radius: 50%;
	background:
		linear-gradient(var(--cvac-ink), var(--cvac-ink)) padding-box,
		/* La banda clara en diagonal es lo que hace que se lea METAL y no
		   "círculo de color": un reflejo que cruza de la esquina superior
		   izquierda a la inferior derecha. */
		linear-gradient(135deg, var(--m3) 0%, var(--m2) 28%, var(--m1) 47%, var(--m2) 62%, var(--m3) 100%) border-box;
	/* El aro CRECE con el disco. Con 2 px fijos se veía canijo a 88 px y
	   basto a 34 px: el grosor tiene que ser una proporción, no un número. */
	border: max(2px, calc(var(--av) * 0.045)) solid transparent;
	/* Filo exterior. Sin él, los metales claros —plata, platino y el gris del
	   Cervato— se disolvían contra el fondo crema del área de cliente y el
	   avatar parecía un disco negro sin aro. */
	box-shadow: 0 0 0 1px rgba(20, 18, 16, .10);
	display: grid;
	place-content: center;
}

/* El ciervo de la marca, teñido con el metal. Mismo SVG y misma técnica de
   `mask` que la barra de envío y el preloader: una sola fuente de verdad. */
.cvac-avatar__ciervo {
	display: block;
	width: calc(var(--av) * 0.60);
	height: calc(var(--av) * 0.60);
	background: linear-gradient(140deg, var(--m1), var(--m2));
	-webkit-mask: url("../img/cervo-logo.svg") center / contain no-repeat;
	        mask: url("../img/cervo-logo.svg") center / contain no-repeat;
}

/* ── La cornamenta ──
   Nace DETRÁS del disco y se levanta por encima. El `bottom` la solapa con la
   mitad superior a propósito: así parece que sale de la cabeza y no que
   flota. El PHP decide cuántas puntas se dibujan (cervo_cuenta_cornamenta),
   no el CSS: así el SVG no lleva trazos invisibles que igual pesan. */
.cvac-avatar__astas {
	position: absolute;
	left: 50%;
	/* CUÁNTO SE ESCONDE detrás del disco. Con 0.46 quedaba oculta la mitad de
	   la cornamenta y solo asomaban las puntas, como arañazos. A 0.62 las
	   varas nacen justo detrás del borde superior del disco: se ve el arco
	   entero y sigue pareciendo que sale de la cabeza. */
	bottom: calc(var(--av) * 0.62);
	/* El SVG mide 100×58, así que a 2.05 de ancho ocupa 1.19 de alto: se ABRE
	   más de lo que sube, como la de verdad. */
	width: calc(var(--av) * 2.05);
	margin-left: calc(var(--av) * -1.025);
	height: auto;
	color: var(--m1);
	pointer-events: none;
	overflow: visible;
	z-index: -1;
}

/* El metal de la cornamenta no es plano: el degradado la aclara arriba, donde
   la luz daría en las puntas. Se hace con un filtro de color sobre el trazo
   porque `stroke` no acepta degradados sin definir un <linearGradient> por
   avatar, y aquí puede haber varios en la misma página. */
.cvac-avatar__astas .cvac-asta--vara { stroke: var(--m2); }
.cvac-avatar__astas .cvac-asta { stroke: var(--m1); }


/* La cornamenta nace DETRÁS del círculo y se levanta por encima. El `bottom`
   la solapa a propósito: así parece que sale de la cabeza, no que flota. */
.cvac-avatar__astas {
	position: absolute;
	left: 50%;
	/* Nace solapada con la mitad superior del círculo: parece que sale de la
	   cabeza y no que flota encima. */
	bottom: calc(var(--av) * 0.52);
	width: 172%;
	height: auto;
	margin-left: -86%;
	color: var(--m1);
	pointer-events: none;
	overflow: visible;
	z-index: -1;
}

/* Solo el rango máximo lleva halo. Si brillaran todos, no diría nada. */
.cvac-avatar[data-rango="leyenda"] .cvac-avatar__disco {
	box-shadow: 0 0 0 1px rgba(20, 18, 16, .10), 0 0 0 4px rgba(200, 169, 110, .22);
}

.cvac-nav__rango {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cvac-gold-d);
}
.cvac-nav__rango[data-rango="plata"]   { color: #7b828a; }
.cvac-nav__rango[data-rango="platino"] { color: #6f858e; }
.cvac-nav__rango[data-rango="bronce"]  { color: #8a5a30; }
.cvac-nav__rango[data-rango="cervato"] { color: var(--cvac-mute); }

/* ── Identidad en la tira de móvil ──
   Solo el AVATAR. El nombre y el rango en texto se comían unos 110 px de una
   pantalla de 390 y dejaban la tira sin sitio para las secciones, que es a lo
   que se viene. El avatar solo ocupa ~44 px y sigue diciendo el rango con su
   metal y sus astas, que es la parte que motiva. El nombre completo se ve en
   el Resumen ("Hola, X") y en la tarjeta de rango.

   ¿Lo prefieres fuera del todo en móvil? Una línea:
       .cvac-nav__yo { display: none; }
*/
.cvac-nav__yo {
	display: flex;
	align-items: center;
	gap: 11px;
	flex-shrink: 0;
	padding: 4px 10px 4px 2px;
	margin-right: 2px;
	border-right: 1px solid var(--cvac-ice);
}
.cvac-nav__yo .cvac-avatar { --av: 34px; }
.cvac-nav__quien { display: none; }
.cvac-nav__nombre {
	font-size: 13px;
	font-weight: 600;
	color: var(--cvac-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cvac-nav__lista {
	list-style: none;
	margin: 0 !important;
	padding: 0;
	display: flex;
	gap: 2px;
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.cvac-nav__lista::-webkit-scrollbar { display: none; }
.cvac-nav li { flex: 1 0 auto; }

.cvac-nav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	position: relative;
	min-width: 78px;
	/* min-height y NO height:100%. Con `height:100%` sobre un ítem flexible
	   la altura se resolvía contra un padre de altura automática y el botón
	   acababa midiendo más que la propia barra, desbordándola. */
	min-height: 62px;
	padding: 11px 12px 10px;
	border-radius: 3px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .05em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .2s ease, color .2s ease;
}
.cvac-nav a,
.cvac-nav a:visited { color: var(--cvac-mute); }
.cvac-nav a:hover { background: var(--cvac-lienzo); color: var(--cvac-ink); }
.cvac-nav a:active { transform: scale(.97); }

.cvac-nav__ico { width: 19px; height: 19px; flex-shrink: 0; }

.cvac-nav li.is-active > a {
	background: var(--cvac-ink);
}
.cvac-nav li.is-active > a,
.cvac-nav li.is-active > a:visited,
.cvac-nav li.is-active > a:hover { color: var(--cvac-bone); }
/* Marca dorada del ítem activo: dice "estás aquí" sin repetir el color. */
.cvac-nav li.is-active > a::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 6px;
	width: 14px;
	height: 2px;
	margin-left: -7px;
	border-radius: 2px;
	background: var(--cvac-gold);
}

/* Cerrar sesión: separada del resto porque no es una sección, es una salida. */
.cvac-nav__salir {
	flex-shrink: 0;
	display: flex;
	align-items: stretch;
	padding-left: 6px;
	margin-left: 2px;
	border-left: 1px solid var(--cvac-ice);
}
.cvac-nav__salir a { min-width: 66px; }
.cvac-nav__salir a:hover { color: #a8442f; background: rgba(168, 68, 47, .06); }

/* Contador de la lista dentro del menú */
.cvac-nav .cvn-wl-badge,
.cvac-card .cvn-wl-badge {
	position: static;
	background: var(--cvac-gold-d);
	color: #fff;
	min-width: 16px; height: 16px;
	border-radius: 8px;
	font-size: 9px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}
.cvac-card .cvn-wl-badge { position: absolute; top: -4px; right: -4px; }
.cvac-nav .cvn-wl-badge[data-empty="true"],
.cvac-card .cvn-wl-badge[data-empty="true"] { display: none; }


/* ══════════════════════════════════════════════════════════
   CONTENIDO NATIVO (pedidos, direcciones, datos)
   Se le da un aire coherente sin rehacer cada plantilla.
══════════════════════════════════════════════════════════ */

/* ══ LA SUPERFICIE DEL CONTENIDO ══
   Antes el texto arrancaba pegado al borde de la página. Ahora el contenido
   vive sobre una superficie blanca con aire por los cuatro lados, posada
   sobre el lienzo arena. Sin borde: la separa la sombra. */
.woocommerce-account .woocommerce-MyAccount-content {
	min-width: 0;
	background: var(--cvac-sup);
	border-radius: var(--cvac-r);
	box-shadow: var(--cvac-sombra);
	padding: clamp(1.4rem, 1rem + 1.6vw, 2.6rem) clamp(1.2rem, 0.8rem + 1.8vw, 2.6rem) clamp(1.8rem, 1.2rem + 2vw, 3rem);
	animation: cvacEntra .5s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes cvacEntra {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* En el RESUMEN el contenido es un tablero: las tarjetas ya traen su propia
   superficie y necesitan el lienzo detrás para despegarse. Si el contenedor
   fuera blanco, serían tarjetas blancas sobre blanco. */
.cervo-cuenta-resumen .woocommerce-MyAccount-content {
	background: none;
	box-shadow: none;
	padding: 0;
}

/* ── Encabezado de sección (lo imprime cervo-cuenta.php) ── */
.cvac-seccion {
	margin-bottom: 24px;
	padding-bottom: 18px;
	/* Única línea que se queda en la cabecera: separa el título del contenido
	   y por eso sí dice algo. En oro tenue, no en gris de formulario. */
	border-bottom: 1px solid rgba(200, 169, 110, .28);
}
.cvac-seccion__tit {
	font-family: var(--cv-serif, 'Cormorant Garamond', Georgia, serif);
	font-size: clamp(1.7rem, 1.3rem + 2vw, 2.4rem);
	font-weight: 400;
	line-height: 1.1;
	margin: 0 0 6px;
	color: var(--cvac-ink);
}
.cvac-seccion__sub { font-size: 13px; color: var(--cvac-mute); margin: 0; letter-spacing: .02em; }

/* WooCommerce repite el título dentro de algunas secciones; sobra. */
.woocommerce-account .woocommerce-MyAccount-content > h2:first-of-type { display: none; }

/* ── Tipografía general del contenido ── */
.woocommerce-account .woocommerce-MyAccount-content { font-size: 14px; line-height: 1.65; }
.woocommerce-account .woocommerce-MyAccount-content p { margin: 0 0 16px; }
/*
 * Estilo por defecto de los títulos que trae WooCommerce.
 *
 * ⚠️ El :not() NO es decorativo. Sin él, esta regla (0,2,1) le ganaba a los
 * títulos propios del panel (0,1,0) y, entre otras cosas, pintaba de color
 * tinta el número del pedido, que va sobre el bloque NEGRO: desaparecía.
 * Cada componente nuestro se pinta solo; aquí solo se viste lo ajeno.
 */
.woocommerce-account .woocommerce-MyAccount-content h2:not([class*="cvac-"]),
.woocommerce-account .woocommerce-MyAccount-content h3:not([class*="cvac-"]) {
	font-family: var(--cv-serif, 'Cormorant Garamond', Georgia, serif);
	font-size: 1.5rem;
	font-weight: 400;
	margin: 0 0 14px;
	color: var(--cvac-ink);
}


/* ══ TABLAS (pedidos, detalle de pedido, descargas) ══ */

.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	/* Sin recuadro exterior: la tabla ya está sobre la superficie del
	   contenido. Las líneas ENTRE filas sí se quedan, porque separar filas es
	   justo lo que tienen que hacer. */
	border: none;
	border-collapse: separate;
	border-spacing: 0;
	background: none;
	font-size: 13.5px;
	margin: 0 0 26px;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	padding: 15px 18px;
	border-bottom: 1px solid var(--cvac-ice);
	text-align: left;
	vertical-align: middle;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cvac-mute);
	background: var(--cvac-bone);
	padding-block: 12px;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:hover td,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:hover th { background: var(--cvac-bone); }

/* El número de pedido, que es la columna con la que se orienta la gente. */
.woocommerce-account .woocommerce-orders-table__cell-order-number a,
.woocommerce-account .woocommerce-orders-table__cell-order-number a:visited {
	font-weight: 600;
	font-size: 14px;
	color: var(--cvac-ink);
	text-decoration: none;
}
.woocommerce-account .woocommerce-orders-table__cell-order-number a:hover { color: var(--cvac-gold-d); }

/* Estado como chip de color, en vez de una palabra suelta perdida en la
   fila. El color sale de la clase que WooCommerce ya pone en el <tr>. */
.woocommerce-account .woocommerce-orders-table__cell-order-status {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 7px;
}
/*
 * ⚠️ EL PUNTO VA EN ::after, NO EN ::before.
 * En móvil la etiqueta de la columna ("ESTADO") también se pinta con un
 * pseudo-elemento, y `::before` solo hay uno: el punto acababa haciéndole de
 * fondo a la etiqueta y se veía una bolita roja encima de la E. Con el punto
 * en ::after y `order` para colocarlo, conviven sin pisarse.
 */
.woocommerce-account .woocommerce-orders-table__row .woocommerce-orders-table__cell-order-status::after {
	content: '';
	width: 7px; height: 7px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--cvac-mute);
	order: -1;   /* delante del texto del estado */
}
.woocommerce-account .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status::after { background: var(--cvac-gold); }
.woocommerce-account .woocommerce-orders-table__row--status-completed  .woocommerce-orders-table__cell-order-status::after { background: var(--cvac-ok); }
.woocommerce-account .woocommerce-orders-table__row--status-cancelled  .woocommerce-orders-table__cell-order-status::after,
.woocommerce-account .woocommerce-orders-table__row--status-failed     .woocommerce-orders-table__cell-order-status::after { background: #c0392b; }

.woocommerce-account .woocommerce-orders-table__cell-order-actions { text-align: right; white-space: nowrap; }

/* Importe del pedido: la cifra manda, la cantidad va debajo y pequeña. */
.cvac-total { display: flex; flex-direction: column; gap: 1px; }
.cvac-total b { font-weight: 600; color: var(--cvac-ink); }
.cvac-total small { font-size: 11px; color: var(--cvac-mute); }


/* ══ BOTONES DE WOOCOMMERCE DENTRO DEL ÁREA ══
   Todos los .button del área heredan el aspecto de la marca, para que no
   convivan dos estilos de botón en la misma pantalla. */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] {
	display: inline-block;
	background: var(--cvac-ink);
	border: 1px solid var(--cvac-ink);
	padding: 12px 24px;
	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	border-radius: var(--cvac-radius);
	text-decoration: none;
	cursor: pointer;
	line-height: 1.2;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content .button:visited,
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover { color: var(--cvac-bone); }
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover {
	background: var(--cvac-gold-d);
	border-color: var(--cvac-gold-d);
}


/* ══ DIRECCIONES ══ */

.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0;
}
/* Las fichas van sobre la superficie BLANCA del contenido, así que aquí se
   invierte la relación: la ficha toma el tono del lienzo y así se distingue.
   Blanco sobre blanco no se vería. */
.woocommerce-account .woocommerce-Address {
	background: var(--cvac-lienzo);
	border: none;
	border-radius: var(--cvac-r);
	padding: 22px;
	transition: background-color .2s ease;
}
.woocommerce-account .woocommerce-Address:hover { background: #efeae2; }
/*
 * WooCommerce trae `.woocommerce .col2-set .col-1{width:47%;float:left}` con
 * especificidad (0,3,0), que le ganaba a la regla de arriba: las fichas se
 * quedaban a media anchura dentro de su celda del grid, con un hueco enorme
 * entre las dos. Con cuatro clases (0,4,0) se zanja sin recurrir a !important.
 */
.woocommerce-account .woocommerce-Addresses.col2-set .woocommerce-Address,
.woocommerce-account .woocommerce-Addresses.col2-set .u-column1,
.woocommerce-account .woocommerce-Addresses.col2-set .u-column2 {
	width: auto;
	/* El `width` no bastaba: además llega un `max-width:50%` que dejaba cada
	   ficha a la mitad de su propia celda, con un vacío enorme en medio. */
	max-width: 100%;
	float: none;
	margin: 0;
}
.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--cvac-ice);
}
/* ⚠️ Lleva .woocommerce-MyAccount-content a propósito. Sin él esta regla
   pesaba (0,2,1) y perdía contra la de títulos genéricos (0,3,1 por el
   :not()): los rótulos salían en serif y a tamaño de titular. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2 {
	font-family: var(--cv-sans, 'Jost', 'Segoe UI', Helvetica, Arial, sans-serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cvac-mute);
	margin: 0;
	line-height: 1.4;
}
.woocommerce-account .woocommerce-Address-title .edit,
.woocommerce-account .woocommerce-Address-title .edit:visited {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cvac-gold-d);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.woocommerce-account .woocommerce-Address-title .edit:hover { border-bottom-color: var(--cvac-gold-d); }
.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.75;
	color: var(--cvac-ink);
	margin: 0;
}


/* ══ FORMULARIOS (datos, direcciones) ══ */

/* Los formularios YA están sobre la superficie blanca del contenido: meterles
   otro recuadro encima era una caja dentro de una caja. Se quedan sin fondo
   ni borde y respiran solos. */
.woocommerce-account .woocommerce-MyAccount-content form {
	background: none;
	border: none;
	padding: 0;
	/* La PÁGINA usa todo el ancho, pero un campo de texto de 1100 px no se
	   lee: el ojo pierde el principio de la línea. Los formularios se quedan
	   en una anchura cómoda. */
	max-width: 940px;
}
.woocommerce-account .woocommerce-MyAccount-content fieldset {
	border: none;
	padding: 22px 0 0;
	margin: 22px 0 0;
	border-top: 1px solid var(--cvac-ice);
}
.woocommerce-account .woocommerce-MyAccount-content legend {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cvac-mute);
	padding: 0;
	margin-bottom: 4px;
}
/* WooCommerce reparte las filas con `width:47%` + float. Aquí el reparto lo
   hace el grid del formulario, así que se le quitan los dos: si no, cada
   campo se quedaba a media anchura de su propia celda. */
.woocommerce-account .woocommerce-MyAccount-content .form-row,
.woocommerce-account .woocommerce-MyAccount-content .form-row-first,
.woocommerce-account .woocommerce-MyAccount-content .form-row-last,
.woocommerce-account .woocommerce-MyAccount-content .form-row-wide {
	margin: 0 0 18px;
	display: block;
	width: auto;
	float: none;
}
/* El .clear de WooCommerce sobra cuando no hay floats. */
.woocommerce-account .woocommerce-MyAccount-content .clear { display: none; }
.woocommerce-account .woocommerce-MyAccount-content .form-row label {
	display: block;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cvac-mute);
	margin-bottom: 7px;
}
.woocommerce-account .woocommerce-MyAccount-content .form-row label .required { color: var(--cvac-gold-d); border: none; }
.woocommerce-account .woocommerce-MyAccount-content .form-row em {
	display: block;
	font-size: 11.5px;
	font-style: normal;
	color: var(--cvac-mute);
	margin-top: 6px;
}
.cvac-fieldset__nota {
	font-size: 12px;
	color: var(--cvac-mute);
	margin: 0 0 16px !important;
}
.woocommerce-account .woocommerce-MyAccount-content .cvac-guardar { margin: 8px 0 0; }

.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content .select2-selection {
	width: 100%;
	max-width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--cvac-ice);
	border-radius: var(--cvac-radius);
	font-family: inherit;
	/* 16px justos: por debajo, iOS hace zoom al enfocar el campo. */
	font-size: 16px;
	color: var(--cvac-ink);
	background: #fff;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus {
	outline: none;
	border-color: var(--cvac-ink);
	box-shadow: 0 0 0 3px rgba(20, 18, 16, .07);
}

/* ── Select2 (país, departamento, ciudad) ──
   WooCommerce sustituye esos <select> por su propio control. Venía con un
   alto y un interlineado propios que no cuadraban con el resto de campos: la
   caja medía 46 px y el texto se pegaba al fondo. Se iguala a los inputs. */
.woocommerce-account .woocommerce-MyAccount-content .select2-container--default .select2-selection--single {
	height: auto;
	min-height: 51px;
	padding: 13px 14px;
	border: 1px solid var(--cvac-ice);
	border-radius: var(--cvac-radius);
	background: #fff;
	display: flex;
	align-items: center;
}
.woocommerce-account .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.3;
	padding: 0;
	font-size: 16px;
	color: var(--cvac-ink);
}
.woocommerce-account .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	top: 0;
	right: 10px;
}
.woocommerce-account .woocommerce-MyAccount-content .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce-account .woocommerce-MyAccount-content .select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--cvac-ink);
	box-shadow: 0 0 0 3px rgba(20, 18, 16, .07);
}

/* ══════════════════════════════════════════════════════════
   MÓVIL Y TABLET — LOS PEDIDOS DEJAN DE SER UNA TABLA

   Una tabla de 5 columnas en 390 px no se lee. La primera versión la
   convertía en una lista de "ETIQUETA ....... valor", cinco filas por
   pedido: funcionaba, pero era un muro repetitivo donde lo importante
   (el número y el estado) pesaba lo mismo que lo accesorio.

   Ahora cada pedido es una FICHA con jerarquía real, colocando las celdas
   con grid-template-areas:

       ┌──────────────────────────────┐
       │ #17547          ● PROCESANDO │
       │ 28 julio, 2026               │
       │ ──────────────────────────── │
       │ $95,000 · 1 art.       [VER] │
       └──────────────────────────────┘

   Se corta a 900 px, que es donde el área cambia a dos columnas: así la
   tablet también recibe la ficha y no una tabla apretada.
══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead { display: none; }

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody { display: block; border: none; background: none; }

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 2px 14px;
		background: var(--cvac-lienzo);
		border: none;
		border-radius: var(--cvac-r);
		padding: 16px 18px;
		margin-bottom: 12px;
	}
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody th,
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td {
		display: flex;
		align-items: center;
		padding: 0;
		border: none;
		text-align: left;
		background: none;
		/* Sin esto, un elemento flex NO baja de su ancho de contenido
		   (min-width:auto) y en pantallas estrechas el texto se salía de la
		   ficha en vez de ajustarse. */
		min-width: 0;
	}

	/* Sin etiquetas de columna: un número con # es un pedido, una fecha es
	   una fecha y una cifra con $ es un precio. La etiqueta solo repetía. */
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody [data-title]::before { content: none; }

	/* ── Colocación ── */
	.woocommerce-account .woocommerce-orders-table__cell-order-number {
		grid-column: 1;
		grid-row: 1;
		font-size: 16px;
	}
	.woocommerce-account .woocommerce-orders-table__cell-order-number a { font-size: 16px; }

	.woocommerce-account .woocommerce-orders-table__cell-order-status {
		grid-column: 2;
		grid-row: 1;
		justify-content: flex-end;
		/* Menos espaciado entre letras que en escritorio: "PROCESANDO" con
		   .1em no cabía junto al número en un teléfono estrecho. */
		font-size: 9.5px;
		letter-spacing: .06em;
	}

	.woocommerce-account .woocommerce-orders-table__cell-order-date {
		grid-column: 1 / -1;
		grid-row: 2;
		font-size: 12.5px;
		color: var(--cvac-mute);
		/* Separador antes del bloque de importe y acción. */
		padding-bottom: 14px;
		margin-bottom: 14px;
		border-bottom: 1px solid rgba(20, 18, 16, .08);
	}

	.woocommerce-account .woocommerce-orders-table__cell-order-total {
		grid-column: 1;
		grid-row: 3;
		font-size: 14.5px;
		font-weight: 600;
		line-height: 1.35;
		color: var(--cvac-ink);
	}

	.woocommerce-account .woocommerce-orders-table__cell-order-actions {
		grid-column: 2;
		grid-row: 3;
		justify-content: flex-end;
	}
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button {
		padding: 11px 20px;
		white-space: nowrap;
	}

	/* Teléfonos muy estrechos: el importe y el botón dejan de compartir fila
	   y cada uno se queda con el ancho completo. Es preferible una ficha algo
	   más alta que un botón cortado. */
	@media (max-width: 400px) {
		.woocommerce-account .woocommerce-orders-table__cell-order-total { grid-column: 1 / -1; margin-bottom: 12px; }
		.woocommerce-account .woocommerce-orders-table__cell-order-actions { grid-column: 1 / -1; grid-row: 4; justify-content: stretch; }
		.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button { width: 100%; text-align: center; }
	}

	/* Direcciones y formularios: sin dobles márgenes en pantalla estrecha. */
	.woocommerce-account .woocommerce-MyAccount-content form { padding: 0; }
	.woocommerce-account .woocommerce-Address { padding: 18px 16px; }
}

/* Las demás tablas del área (detalle del pedido) no tienen las columnas de
   pedidos, así que conservan el formato "etiqueta ... valor", que ahí sí
   aporta: sin cabecera no se sabría qué es cada cifra. */
@media (max-width: 899px) {
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table:not(.woocommerce-orders-table) tbody tr {
		display: block;
	}
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table:not(.woocommerce-orders-table) tbody th,
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table:not(.woocommerce-orders-table) tbody td {
		justify-content: space-between;
		gap: 14px;
		padding: 10px 0;
		text-align: right;
	}
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table:not(.woocommerce-orders-table) tbody [data-title]::before {
		content: attr(data-title);
		flex-shrink: 0;
		font-size: 9.5px;
		font-weight: 700;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--cvac-mute);
		text-align: left;
	}
}

/* ── Avisos de WooCommerce con la estética de la marca ──
 *
 * ⚠️ HAY QUE APAGAR EL ::before, y no es opcional.
 *
 * WooCommerce mete un icono de su tipografía en un `::before` colocado en
 * ABSOLUTO (`top:1em; left:1.5em`) y reserva su hueco con `padding-left:3.5em`
 * en el propio aviso. Aquí se cambiaba ese padding por uno propio de 18px…
 * pero el icono seguía en su sitio absoluto, así que **caía encima del
 * texto**. Cambiar el padding sin apagar el icono es romperlo siempre.
 *
 * No se recupera el hueco: se quita el icono. Un aviso con una regla de oro
 * a la izquierda ya dice de qué tipo es, y ese icono es de otra tipografía y
 * de otra marca.
 */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	border: none;
	/* Solo la regla de la izquierda, que es la que identifica el tipo de
	   aviso. El recuadro completo sobraba. */
	border-left: 3px solid var(--cvac-gold);
	background: var(--cvac-lienzo);
	padding: 15px 18px;
	font-size: 13px;
	line-height: 1.6;
	list-style: none;
	margin: 0 0 20px;
	border-radius: var(--cvac-radius);

	/* Texto y botón en la misma línea, y apilados cuando no quepan. Sin esto
	   el botón va con `float:right` de WooCommerce, que en móvil lo dejaba
	   colgando debajo y descuadrado. */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before { content: none; display: none; }

.woocommerce-account .woocommerce-error { border-left-color: #c0392b; }

/* El botón del aviso ("Explorar los productos"), con la forma de los nuestros. */
.woocommerce-account .woocommerce-info .button,
.woocommerce-account .woocommerce-message .button {
	float: none;
	margin: 0;
	flex: 0 0 auto;
	padding: 11px 20px;
	background: var(--cvac-ink);
	border: 1px solid var(--cvac-ink);
	border-radius: var(--cvac-radius);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.2;
}
/* :visited y :hover declarados: el tema trae `a:visited{color:inherit}` y
   `a:hover{text-decoration:underline}` con peso (0,1,1) y le ganan a una
   clase suelta. */
.woocommerce-account .woocommerce-info .button,
.woocommerce-account .woocommerce-info .button:visited,
.woocommerce-account .woocommerce-info .button:hover,
.woocommerce-account .woocommerce-info .button:focus,
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-message .button:visited,
.woocommerce-account .woocommerce-message .button:hover,
.woocommerce-account .woocommerce-message .button:focus { color: var(--cvac-bone); text-decoration: none; }

.woocommerce-account .woocommerce-info .button:hover,
.woocommerce-account .woocommerce-message .button:hover { background: var(--cvac-gold-d); border-color: var(--cvac-gold-d); }

/* En pantallas estrechas el botón ocupa el ancho: partido en dos palabras por
   renglón no lo pulsa nadie. */
@media (max-width: 480px) {
	.woocommerce-account .woocommerce-info,
	.woocommerce-account .woocommerce-message { align-items: stretch; }
	.woocommerce-account .woocommerce-info .button,
	.woocommerce-account .woocommerce-message .button { flex: 1 0 100%; text-align: center; }
}


/* ══════════════════════════════════════════════════════════
   ESCRITORIO
══════════════════════════════════════════════════════════ */

@media (min-width: 900px) {


	/* Lateral fijo + contenido. */
	.woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: 232px minmax(0, 1fr);
		gap: 40px;
		align-items: start;
	}

	/*
	 * ⚠️ El tema lleva un "clearfix" en .woocommerce (::before y ::after con
	 * content:" " y display:table). En un contenedor GRID esos pseudo-elementos
	 * cuentan como celdas: se comían la primera columna y empujaban el menú y
	 * el contenido a donde no tocaba (el menú salía a 872 px y el panel a 158).
	 * Se anulan y, por si acaso, se coloca cada bloque en su columna a mano.
	 */
	.woocommerce-account .woocommerce::before,
	.woocommerce-account .woocommerce::after { content: none; display: none; }

	.woocommerce-account .woocommerce-MyAccount-navigation {
		grid-column: 1;
		grid-row: 1;
		float: none;
		width: auto;
		position: sticky;
		top: 88px;               /* alto del navbar sticky */
		align-self: start;
		margin-bottom: 0;
	}
	.woocommerce-account .woocommerce-MyAccount-content {
		grid-column: 2;
		grid-row: 1;
		float: none;
		width: auto;
		/* Sin `padding:0` aquí: el aire interior lo define la regla de la
		   superficie, más arriba. Ponerlo a cero dejaba el texto pegado al
		   borde de la tarjeta. */
	}

	/* La página de acceso no lleva lateral: no entra en el grid de dos
	   columnas, sigue centrando su tarjeta (regla de más arriba). */
	.woocommerce-account:not(.logged-in) .woocommerce {
		display: flex;
		grid-template-columns: none;
	}

	/* ── Raíl vertical ── */
	.woocommerce-account .cvac-nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 18px 14px 14px;
	}

	/* En el raíl la identidad pasa arriba del todo, en horizontal, con la
	   línea separadora debajo en vez de al lado. */
	.cvac-nav__yo {
		gap: 12px;
		padding: 2px 4px 16px;
		margin: 0 0 14px;
		border-right: none;
		border-bottom: 1px solid var(--cvac-ice);
	}
	/* En el raíl sí hay sitio de sobra: vuelve el nombre y el rango. */
	.cvac-nav__yo .cvac-avatar { --av: 50px; }
	.cvac-nav__quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
	.cvac-nav__nombre {
		font-size: 13px;
		font-weight: 600;
		color: var(--cvac-ink);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.cvac-nav__rol {
		font-size: 9px;
		font-weight: 600;
		letter-spacing: .18em;
		text-transform: uppercase;
		color: var(--cvac-gold-d);
	}

	.cvac-nav__lista { flex-direction: column; gap: 1px; overflow: visible; }
	.cvac-nav li { flex: none; }

	.cvac-nav a {
		flex-direction: row;
		justify-content: flex-start;
		gap: 11px;
		min-width: 0;
		min-height: 0;
		padding: 11px 12px;
		font-size: 12.5px;
		font-weight: 500;
		letter-spacing: .02em;
		text-align: left;
	}
	.cvac-nav__txt { flex: 1; }

	/* En el raíl la marca activa es una barra dorada a la izquierda: sigue la
	   dirección de lectura, en vez del subrayado que usa la tira de móvil. */
	.cvac-nav li.is-active > a::after {
		left: 0;
		bottom: auto;
		top: 50%;
		width: 2px;
		height: 18px;
		margin: -9px 0 0;
		border-radius: 0 2px 2px 0;
	}

	.cvac-nav__salir {
		border-left: none;
		border-top: 1px solid var(--cvac-ice);
		padding: 6px 0 0;
		margin: 10px 0 0;
	}
	.cvac-nav__salir a { min-width: 0; width: 100%; }

	.cvac-grid { grid-template-columns: repeat(4, 1fr); }
	.cvac-abajo { grid-template-columns: 1fr 1fr; }

	/* Direcciones en dos columnas: envío y facturación se comparan de un
	   vistazo, que es justo para lo que se entra aquí. */
	.woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr 1fr; gap: 18px; }

	/*
	 * Nombre y apellido en la misma línea (WooCommerce ya los marca como
	 * form-row-first / form-row-last).
	 *
	 * OJO: en "Mis datos" las filas cuelgan directamente del <form>, pero en
	 * "Direcciones" van dentro de .woocommerce-address-fields__field-wrapper.
	 * Por eso el grid se declara en los DOS sitios; si solo se pone en el
	 * <form>, el wrapper entero ocupa una celda y los campos salen apilados
	 * en media pantalla (que es justo lo que pasaba).
	 */
	.woocommerce-account .woocommerce-MyAccount-content form,
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 20px;
	}

	.woocommerce-account .woocommerce-MyAccount-content .form-row-first { grid-column: 1; }
	.woocommerce-account .woocommerce-MyAccount-content .form-row-last  { grid-column: 2; }

	/* Todo lo que debe ocupar el ancho completo de su rejilla. */
	.woocommerce-account .woocommerce-MyAccount-content .form-row-wide,
	.woocommerce-account .woocommerce-MyAccount-content fieldset,
	.woocommerce-account .woocommerce-MyAccount-content form > h2,
	.woocommerce-account .woocommerce-MyAccount-content form > h3,
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields,
	.woocommerce-account .woocommerce-MyAccount-content p:not(.form-row),
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-privacy-policy-text { grid-column: 1 / -1; }

	/* Dentro del fieldset de la contraseña se vuelve a una sola columna. */
	.woocommerce-account .woocommerce-MyAccount-content fieldset .form-row { grid-column: 1 / -1; }
	.cvac-envio { padding: 28px 30px 30px; }
	.cvac-envio__pie { flex-direction: row; align-items: center; justify-content: space-between; }
	.cvac-envio__pie .cvac-guia { flex: 1; }
	.cvac-repetir { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Quien pide menos movimiento ve exactamente lo mismo, quieto: el ciervo
   aparece ya en su punto del recorrido y las tarjetas no suben. */
@media (prefers-reduced-motion: reduce) {
	.cvac-tabs__marca,
	.cvac-card { transition: none; }
	.woocommerce-account .woocommerce-MyAccount-content,
	.cvac-card,
	.cvac-promo,
	.cvac-ayuda-caja,
	.cvac-login,
	.cvac-login__deer,
	.cvac-pasos__linea i { animation: none; }
	.cvac-pasos__deer { animation: none; left: var(--cvac-avance, 0%); opacity: 1; }
	.cvac-card:hover { transform: none; }
}


/* ══════════════════════════════════════════════════════════
   LA MANADA — ventana de rangos  (CAPA 22)

   MÓVIL PRIMERO DE VERDAD: lo que va sin media query es la hoja que sube
   desde abajo, porque es ahí donde llega el pulgar y porque es donde de
   verdad se mira esta pantalla. A partir de 700px la MISMA hoja se centra.
   No son dos diseños: es uno que cambia de sitio.

   Es la única superficie OSCURA del área de cliente. El oro solo parece
   metal sobre negro, y el corte de luz al abrirla hace que se sienta como
   abrir un estuche y no como leer otra sección más.
══════════════════════════════════════════════════════════ */

/* ⚠️ EL box-sizing SE DECLARA AQUÍ, no se hereda.
   La ventana se imprime en wp_footer, o sea FUERA de `.woocommerce`, y la
   regla `.woocommerce-account .woocommerce * { box-sizing: border-box }` ya
   no la alcanza. Sin esto, cada borde y cada relleno de aquí dentro mide
   distinto que en el panel —el disco del avatar crecía 4px, el botón de
   cerrar 2px— y la ventana se descuadraba respecto al resto del área de
   cliente sin motivo aparente. */
.cvrx,
.cvrx *,
.cvrx *::before,
.cvrx *::after { box-sizing: border-box; }

.cvrx {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-end;          /* móvil: pegada abajo */
	justify-content: center;
}
.cvrx[hidden] { display: none; }

/* El velo difumina la tienda de detrás. El desenfoque es lo que hace que la
   ventana se lea como una capa por ENCIMA y no como otro bloque de la página;
   con 3px apenas se notaba. Va con menos opacidad que antes a propósito: si
   el negro tapa demasiado, el desenfoque deja de verse y da igual ponerlo. */
.cvrx__velo {
	position: absolute;
	inset: 0;
	background: rgba(12, 11, 10, .52);
	backdrop-filter: blur(7px) saturate(.85);
	-webkit-backdrop-filter: blur(7px) saturate(.85);
	animation: cvrxVelo .28s ease both;
}
/* Sin soporte de backdrop-filter (Firefox antiguo), el velo se oscurece más:
   sin desenfoque, el contraste lo tiene que dar el negro. */
@supports not (backdrop-filter: blur(1px)) {
	.cvrx__velo { background: rgba(12, 11, 10, .78); }
}
@keyframes cvrxVelo { from { opacity: 0; } to { opacity: 1; } }

.cvrx__hoja {
	position: relative;
	width: 100%;
	max-height: 94vh;
	/* dvh: en móvil la barra del navegador aparece y desaparece, y con vh la
	   hoja quedaba cortada por debajo justo donde está el botón de cerrar. */
	max-height: 94dvh;
	display: flex;
	flex-direction: column;
	background: #141210;
	color: #faf9f7;
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -8px 60px rgba(0, 0, 0, .55);
	animation: cvrxSube .42s cubic-bezier(.16, 1, .3, 1) both;
	overflow: hidden;
}
@keyframes cvrxSube { from { transform: translateY(100%); } to { transform: none; } }

/* El contenido no cabe de una vez —son seis rangos, el progreso y cómo se
   sube— así que el borde inferior se desvanece en vez de cortar en seco. Es
   la señal de "hay más abajo": sin ella la ventana parece terminada donde
   la corta la pantalla, que es justo lo que se sentía como "no se ve completo". */
.cvrx__hoja::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 44px;
	background: linear-gradient(to top, #141210 12%, rgba(20, 18, 16, 0));
	pointer-events: none;
	opacity: 1;
	transition: opacity .25s ease;
}
/* Al llegar al final se apaga: si no, tapa para siempre la letra pequeña. */
.cvrx__hoja.is-final::after { opacity: 0; }

.cvrx__tirador {
	position: absolute;
	top: 9px; left: 50%;
	width: 40px; height: 4px;
	margin-left: -20px;
	border-radius: 2px;
	background: rgba(250, 249, 247, .22);
}

/* ── Cerrar ──
   El icono SIEMPRE estuvo centrado en su caja (medido: 0px de desfase). Lo
   que se veía mal era otra cosa: una equis a pelo, sin superficie, flotando
   al lado de una esquina redondeada. Sin un círculo alrededor el ojo no
   tiene contra qué alinearla y la lee torcida aunque no lo esté.

   Ahora es un disco de verdad: se ve dónde empieza y dónde acaba, y el
   objetivo táctil (44px, el mínimo de Apple) coincide con lo que se ve. */
.cvrx__cerrar {
	position: absolute;
	top: 16px; right: 14px;
	z-index: 3;
	width: 44px; height: 44px;
	padding: 0;                     /* el navegador mete 1px 6px por su cuenta */
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(250, 249, 247, .07);
	border: 1px solid rgba(250, 249, 247, .10);
	border-radius: 50%;
	color: rgba(250, 249, 247, .62);
	line-height: 0;                 /* sin esto el <svg> arrastra el hueco de
	                                   la línea base y baja un pelo */
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cvrx__cerrar svg { display: block; width: 18px; height: 18px; }
.woocommerce-account .cvrx__cerrar:hover,
.woocommerce-account .cvrx__cerrar:focus {
	background: rgba(250, 249, 247, .14);
	border-color: rgba(250, 249, 247, .2);
	color: #fff;
	box-shadow: none;
	outline: none;
}
.woocommerce-account .cvrx__cerrar:active { background: rgba(250, 249, 247, .2); }
.cvrx__cerrar:focus-visible { outline: 2px solid var(--cvac-gold); outline-offset: 2px; }

.cvrx__scroll {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;   /* que el scroll no arrastre la página de detrás */
	padding: 30px 20px calc(24px + env(safe-area-inset-bottom));

	/* ── La barra de desplazamiento ──
	   La del navegador es un carril gris de sistema: lo único que no es ni
	   negro ni oro en toda la hoja, y se nota justo en el borde donde la
	   ventana debería terminar limpia.

	   Aquí es un hilo de oro apagado sobre nada. El carril se deja
	   TRANSPARENTE a propósito: un carril visible dibuja una línea vertical
	   de arriba abajo que compite con el contenido; sin él, solo se ve la
	   parte que se puede arrastrar, que es la única información útil.

	   Firefox no admite las pseudoclases de WebKit pero sí estas dos
	   propiedades, así que se declaran las dos formas. */
	scrollbar-width: thin;
	scrollbar-color: rgba(200, 169, 110, .38) transparent;
}

.cvrx__scroll::-webkit-scrollbar { width: 10px; }
.cvrx__scroll::-webkit-scrollbar-track { background: transparent; }

.cvrx__scroll::-webkit-scrollbar-thumb {
	background: rgba(200, 169, 110, .34);
	border-radius: 999px;
	/* El borde transparente + background-clip separa el hilo del borde
	   redondeado de la hoja: pegado a la esquina se veía cortado. */
	border: 3px solid transparent;
	background-clip: content-box;
	transition: background-color .2s ease;
}
.cvrx__scroll::-webkit-scrollbar-thumb:hover { background: rgba(200, 169, 110, .62); background-clip: content-box; }
.cvrx__scroll::-webkit-scrollbar-thumb:active { background: var(--cvac-gold); background-clip: content-box; }

/* En el móvil la barra es flotante y la pinta el sistema: esto casi no se ve
   ahí. Es una mejora de escritorio, que es donde la barra ocupa sitio fijo. */

/* ── Tu insignia ──
   Es el MISMO avatar del panel, solo que grande y con la punta fantasma.
   Se reusa la pieza en vez de recomponerla: antes había aquí una versión
   propia y salía con las astas enormes y el ciervo de adorno abajo, al revés
   que en el panel. --av es lo único que cambia. */
.cvrx__cabeza { text-align: center; margin-bottom: 26px; }

.cvrx__insignia { display: flex; justify-content: center; margin: 0 0 18px; }
.cvrx__insignia .cvac-avatar { --av: 84px; }

/* LA PUNTA QUE TE FALTA. El gesto central de la ventana: se dibuja en hueco,
   a trazos, y late muy despacio. No es decoración — es el argumento de por
   qué volver a comprar, y por eso va antes que ninguna cifra. */
.cvrx__insignia .cvac-asta--fantasma {
	stroke: rgba(250, 249, 247, .32) !important;
	stroke-dasharray: 3 4;
	animation: cvrxLate 3.4s ease-in-out infinite;
}
@keyframes cvrxLate { 0%, 100% { opacity: .38; } 50% { opacity: .95; } }

/* Sobre el negro de la hoja, el disco del avatar necesita otro filo: el
   `rgba(20,18,16,.10)` del panel es invisible aquí. */
.cvrx__insignia .cvac-avatar__disco { box-shadow: 0 0 0 1px rgba(250, 249, 247, .10); }
.cvrx__insignia .cvac-avatar[data-rango="leyenda"] .cvac-avatar__disco {
	box-shadow: 0 0 0 1px rgba(250, 249, 247, .10), 0 0 0 5px rgba(200, 169, 110, .20);
}
.cvrx__eyebrow {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--cvac-gold);
	margin: 0 0 6px;
}
.cvrx__titulo {
	font-family: var(--cv-serif, 'Cormorant Garamond', Georgia, serif);
	font-size: clamp(2.1rem, 1.5rem + 3vw, 2.9rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: .01em;
	margin: 0 0 8px;
	color: #fff;
}
.cvrx__lema { font-size: 13.5px; color: rgba(250, 249, 247, .62); margin: 0 0 16px; line-height: 1.5; }

.cvrx__premio {
	display: inline-block;
	margin: 0;
	padding: 9px 16px;
	border: 1px solid rgba(200, 169, 110, .38);
	border-radius: 999px;
	background: rgba(200, 169, 110, .10);
	color: var(--cvac-gold);
	font-size: 13px;
	letter-spacing: .02em;
}
.cvrx__premio b { font-weight: 600; font-size: 15px; }

/* ── Lo que falta ── */
.cvrx__falta {
	background: rgba(250, 249, 247, .05);
	border: 1px solid rgba(250, 249, 247, .09);
	border-radius: 12px;
	padding: 18px 16px;
	margin-bottom: 24px;
}
.cvrx__faltaTit { margin: 0 0 12px; font-size: 15px; line-height: 1.45; color: #fff; }
.cvrx__faltaTit b { color: var(--cvac-gold); font-weight: 600; }

.cvrx__barra {
	height: 6px;
	border-radius: 3px;
	background: rgba(250, 249, 247, .12);
	overflow: hidden;
	margin-bottom: 10px;
}
.cvrx__barra i {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--cvac-gold-d), var(--cvac-gold));
	animation: cvacAvanza 1s cubic-bezier(.16, 1, .3, 1) .25s both;
}
.cvrx__faltaPie { margin: 0; font-size: 11.5px; color: rgba(250, 249, 247, .5); line-height: 1.5; }

/* ── Cómo se sube ── */
.cvrx__h3 {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(250, 249, 247, .42);
	margin: 0 0 14px;
}
.cvrx__como { margin-bottom: 26px; }

.cvrx__linea { display: flex; gap: 3px; margin-bottom: 7px; }
.cvrx__tramo {
	flex: 1;
	padding: 9px 8px;
	border-radius: 6px;
	font-size: 10.5px;
	letter-spacing: .04em;
	text-align: center;
	line-height: 1.3;
}
.cvrx__tramo--suma { background: rgba(200, 169, 110, .18); color: var(--cvac-gold); border: 1px solid rgba(200, 169, 110, .3); }
.cvrx__tramo--una  { background: rgba(250, 249, 247, .05); color: rgba(250, 249, 247, .55); border: 1px solid rgba(250, 249, 247, .1); }

.cvrx__comoTxt { margin: 0; font-size: 12.5px; line-height: 1.6; color: rgba(250, 249, 247, .62); }

/* ── La manada ── */
.cvrx__lista { list-style: none; margin: 0; padding: 0; }

.cvrx__fila {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border-radius: 10px;
	border: 1px solid transparent;
	opacity: .45;                    /* los que aún no ha alcanzado, apagados */
}
.cvrx__fila.is-hecho { opacity: 1; }
.cvrx__fila.is-tuyo {
	background: rgba(200, 169, 110, .10);
	border-color: rgba(200, 169, 110, .34);
}

.cvrx__filaAsta {
	position: relative;
	flex: 0 0 auto;
	width: 40px; height: 30px;
	--m1: #c8a96e; --m2: #8a6d3b;
}
.cvrx__fila[data-rango="cervato"] .cvrx__filaAsta { --m1: #ded8cf; --m2: #a9a196; }
.cvrx__fila[data-rango="bronce"]  .cvrx__filaAsta { --m1: #e6a877; --m2: #b4703c; }
.cvrx__fila[data-rango="plata"]   .cvrx__filaAsta { --m1: #f2f4f7; --m2: #b6bcc4; }
.cvrx__fila[data-rango="platino"] .cvrx__filaAsta { --m1: #ffffff; --m2: #cdd9de; }
.cvrx__fila[data-rango="leyenda"] .cvrx__filaAsta { --m1: #fbeec6; --m2: #d4b477; }
.cvrx__filaAsta .cvac-avatar__astas {
	position: absolute;
	left: 0; bottom: 0;
	width: 40px;
	margin: 0;
	color: var(--m1);
}
.cvrx__filaAsta .cvac-asta--vara { stroke: var(--m2); }
.cvrx__filaAsta .cvac-asta { stroke: var(--m1); }

.cvrx__filaDatos { flex: 1; min-width: 0; }
.cvrx__filaNombre { display: block; font-size: 13.5px; font-weight: 600; color: #fff; letter-spacing: .01em; }
.cvrx__aqui {
	display: inline-block;
	margin-left: 7px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--cvac-gold);
	color: #141210;
	font-size: 8.5px;
	font-weight: 700;
	font-style: normal;
	letter-spacing: .12em;
	text-transform: uppercase;
	vertical-align: 2px;
}
.cvrx__filaPremio { display: block; font-size: 11.5px; color: rgba(250, 249, 247, .55); line-height: 1.45; margin-top: 2px; }

.cvrx__filaUmbral {
	flex: 0 0 auto;
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;   /* las cifras alineadas en columna */
	color: rgba(250, 249, 247, .6);
	letter-spacing: .01em;
}
.cvrx__fila.is-tuyo .cvrx__filaUmbral { color: var(--cvac-gold); }

.cvrx__letra {
	margin: 20px 0 0;
	font-size: 10.5px;
	line-height: 1.6;
	color: rgba(250, 249, 247, .35);
}

/* ══ TABLET Y ESCRITORIO: la misma hoja, centrada ══ */
@media (min-width: 700px) {
	.cvrx { align-items: center; padding: 24px; }

	.cvrx__hoja {
		max-width: 540px;
		max-height: 88vh;
		border-radius: 16px;
		animation: cvrxAparece .34s cubic-bezier(.16, 1, .3, 1) both;
	}
	@keyframes cvrxAparece {
		from { opacity: 0; transform: translateY(18px) scale(.98); }
		to   { opacity: 1; transform: none; }
	}

	.cvrx__tirador { display: none; }
	.cvrx__scroll { padding: 34px 30px 30px; }
	.cvrx__insignia .cvac-avatar { --av: 96px; }
	.cvrx__fila { padding: 12px 14px; }
}

/* Sin movimiento para quien lo pide: la hoja aparece, no viaja. */
@media (prefers-reduced-motion: reduce) {
	.cvrx__hoja, .cvrx__velo, .cvrx__barra i { animation-duration: .01ms; }
	.cvrx__insignia .cvac-asta--fantasma { animation: none; opacity: .7; }
}

/* ── El disparador: el avatar del panel se vuelve pulsable ── */
.cvac-avatarBtn {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	display: block;
	-webkit-tap-highlight-color: transparent;
	border-radius: 8px;
}
.woocommerce-account .cvac-avatarBtn:hover,
.woocommerce-account .cvac-avatarBtn:focus { background: none; box-shadow: none; outline: none; }
.cvac-avatarBtn:focus-visible { outline: 2px solid var(--cvac-gold-d); outline-offset: 4px; }
.cvac-avatarBtn .cvac-avatar { transition: transform .25s var(--cv-ease, ease); }
.woocommerce-account .cvac-avatarBtn:hover .cvac-avatar { transform: translateY(-2px); }

/* Pista de que se puede tocar. Sin esto nadie descubre la ventana: un avatar
   no parece un botón. */
.cvac-rango__ver {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cvac-gold-d);
	cursor: pointer;
}
.woocommerce-account .cvac-rango__ver:hover,
.woocommerce-account .cvac-rango__ver:focus { background: none; box-shadow: none; outline: none; text-decoration: underline; }
.cvac-rango__ver:focus-visible { outline: 2px solid var(--cvac-gold-d); outline-offset: 3px; }

/* Con la ventana abierta, el fondo no se mueve. */
body.cvrx-abierta { overflow: hidden; }

/* ── La fecha dentro de cada tramo ──
   Va DENTRO y no en una fila aparte para que no exista la posibilidad de que
   se desalineen: si el tramo cambia de ancho, su fecha va con él. */
.cvrx__tramo em {
	display: block;
	margin-top: 3px;
	font-style: normal;
	font-size: 9.5px;
	letter-spacing: .04em;
	opacity: .72;
}
/* El tramo en el que está ahora mismo. Los dos se ven siempre —hay que poder
   leer la regla entera— pero solo uno está encendido. */
.cvrx__tramo--suma.is-activo { background: rgba(200, 169, 110, .30); border-color: var(--cvac-gold); color: #fff; }
.cvrx__tramo--una.is-activo  { background: rgba(250, 249, 247, .14); border-color: rgba(250, 249, 247, .34); color: #fff; }
.cvrx__tramo:not(.is-activo) { opacity: .55; }

/* ── El reloj ── */
.cvrx__reloj {
	margin: -12px 0 24px;
	padding: 14px 16px;
	border-radius: 12px;
	background: rgba(250, 249, 247, .05);
	border: 1px solid rgba(250, 249, 247, .09);
}
.cvrx__relojTit {
	margin: 0 0 5px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	letter-spacing: .01em;
}
.cvrx__relojTxt { margin: 0; font-size: 12px; line-height: 1.55; color: rgba(250, 249, 247, .62); }
.cvrx__relojTxt b { color: var(--cvac-gold); font-weight: 600; }
.cvrx__relojPie { margin: 7px 0 0; font-size: 11px; color: rgba(250, 249, 247, .42); }

/* Quedan 15 días o menos. */
.cvrx__reloj--urge { background: rgba(200, 169, 110, .12); border-color: rgba(200, 169, 110, .34); }
.cvrx__reloj--urge .cvrx__relojTit { color: var(--cvac-gold); }

/* RESCATE: ya perdió el rango. Rojo apagado, no oro — en esta ventana el oro
   significa "lo tuyo", y usarlo aquí diría que perderlo es parte del premio. */
.cvrx__reloj--rescate {
	background: rgba(192, 57, 43, .12);
	border-color: rgba(192, 57, 43, .38);
}
.cvrx__reloj--rescate .cvrx__relojTit { color: #f0907f; }
.cvrx__reloj--rescate .cvrx__relojTxt b { color: #f5b8ac; }