/* =========================================================================
 * CERVO — LEGACY (rescatado del "Personalizar → CSS adicional")
 * -------------------------------------------------------------------------
 * Aquí vive SOLO el CSS del Customizer que es PERMANENTE: reglas que no
 * dependen de Elementor, ni de la ficha nueva, ni de ningún plugin que se
 * haya desinstalado. Al estar aquí, se pueden BORRAR del Customizer.
 *
 * Lo que NO está aquí a propósito:
 *   - CSS de plugins ya desinstalados (galería WPGS/slick, swatches WVS,
 *     contador de visitas wcvisitor): está MUERTO → se borra del Customizer.
 *   - CSS transitorio (Elementor, ficha vieja, tabs, snippets): SIGUE VIVO en
 *     producción → se queda en el Customizer hasta que se retire ese sistema.
 *
 * Regla de oro del proyecto: no tocar main-style.css; los overrides van aquí.
 * ========================================================================= */


/* =========================================================================
 * 1) CATÁLOGO / LISTADO DE PRODUCTOS
 * ========================================================================= */

/* Cuadro rojo del porcentaje de descuento. */
.onsale {
	padding: 8px !important;
}

/* Grid de productos: 4 columnas en escritorio. */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 5px;
	row-gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

/* Título del producto en el listado: negro fijo (antes se volvía blanco al hover). */
.woocommerce-loop-product__title {
	color: #000;
}

.woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title {
	color: #000 !important;
}

/* Menos espacio entre swatches/precio en la tarjeta (layout de 2 columnas móvil). */
.woocommerce ul.products[class*="columns-"][class*="os-mobile-col-2"]
	.product .product-main-wrap .product-info-wrap,
.woocommerce[class*="columns-"] ul.products[class*="columns-"][class*="os-mobile-col-2"]
	.product .product-main-wrap .product-info-wrap,
.woocommerce[class*="columns-"][class*="os-mobile-col-2"]
	ul.products .product .product-main-wrap .product-info-wrap {
	gap: 0;
	padding: 0 15px;
}

/* Barra lateral de categorías (widget_product_categories): oculta en TABLET y
   MÓVIL para que el catálogo vaya a todo el ancho en pantallas ≤1024px. En
   escritorio (≥1025px) la barra se mantiene. */
@media (max-width: 1024px) {
	.sidebar-col {
		display: none !important;
	}
}

/* Tamaño uniforme de nombre y precio en las tarjetas del listado. */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
	font-size: 16px !important;
	font-weight: bold;
	line-height: 1.2;
	height: 50px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin: 0 !important;
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price ins {
	font-size: 15px !important;
	font-weight: 600;
	line-height: 1.2;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
}

.woocommerce ul.products li.product .price del {
	margin-right: 8px;
	opacity: 0.7;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

/* Estrellas: ocultas en el listado, visibles solo en la ficha. */
.archive .star-rating,
.woocommerce-page ul.products .star-rating,
.page-id-23 .star-rating {
	display: none !important;
}

.single-product .star-rating {
	display: block !important;
}


/* =========================================================================
 * 2) PAGINACIÓN DE WOOCOMMERCE
 * ========================================================================= */

.woocommerce-pagination a,
.woocommerce-pagination span {
	background: #202020 !important;
	color: #fff !important;
	font-size: 12px !important;
}

.woocommerce-pagination .page-numbers.current {
	background: #e63946 !important;
	color: #fff !important;
	font-weight: bold;
	border-radius: 4px;
}

.woocommerce-pagination,
.woocommerce-pagination ul.page-numbers {
	display: flex !important;
	justify-content: center !important;
	text-align: center !important;
}

.woocommerce nav.woocommerce-pagination {
	margin-top: 20px;
	margin-bottom: 20px;
}


/* =========================================================================
 * 3) PRECIOS (rebaja): tachado en negro, precio nuevo en rojo
 *
 * ⚠️ LA FICHA NUEVA QUEDA FUERA (`:not(.cvp-price *)`).
 *
 * Este bloque viene del Customizer viejo y es GLOBAL: `.woocommerce` envuelve
 * catálogo, carrito, checkout Y ficha. El `color: red !important` (rojo puro,
 * lo más saturado que hay) se comía cualquier regla nueva y era lo que hacía
 * que el precio rebajado de la ficha se viera mal.
 *
 * No se borra porque el CATÁLOGO todavía no está migrado y depende de esto.
 * Solo se excluye el bloque de precio de la ficha nueva (`.cvp-price`), que
 * tiene su propio tratamiento —tachado apagado + cápsula dorada con el %— en
 * `cervo-resumen.css`.
 *
 * 👉 AL MIGRAR EL CATÁLOGO: borrar este bloque entero y que cada contexto
 *    defina su propio color. Ver también `.cp-discount-badge` en
 *    `cervo-productos.php`, que pinta el grid de la home en rojo #e81f1f.
 * ========================================================================= */

.woocommerce del:not(.cvp-price *),
.woocommerce del:not(.cvp-price *) .amount,
.woocommerce del:not(.cvp-price *) .woocommerce-Price-amount {
	color: #000 !important;
	text-decoration: line-through !important;
	opacity: 1 !important;
}

.woocommerce ins:not(.cvp-price *),
.woocommerce ins:not(.cvp-price *) .amount,
.woocommerce ins:not(.cvp-price *) .woocommerce-Price-amount {
	color: red !important;
	font-weight: bold;
}


/* =========================================================================
 * 4) IMAGEN "SOLO MÓVIL" (banners de categoría, etc.)
 * ========================================================================= */

.imagen-mobile-only {
	display: none;
}

@media (max-width: 767px) {
	.imagen-mobile-only {
		display: block !important;
	}
}


/* =========================================================================
 * 5) EMOJIS: evitar que salgan gigantes en móvil
 * ========================================================================= */

@media (max-width: 768px) {
	img.emoji {
		width: 1em !important;
		height: 1em !important;
		max-width: 1em !important;
		display: inline !important;
		vertical-align: middle;
	}
}


/* =========================================================================
 * 6) HOME — TÍTULO "NUESTRAS TIENDAS"
 *
 * Nota: el @import de Google Fonts (Roboto) del Customizer estaba a mitad del
 * archivo, así que el navegador lo IGNORABA (ya venía cayendo a la fuente por
 * defecto). Aquí usa la fuente del sitio (Inter). Si algún día se quiere Roboto
 * de verdad, hay que auto-alojarla como Inter, no traerla de Google.
 * ========================================================================= */

#textotiendas {
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	width: 100%;
	display: block;
	font-size: 25px;
	position: relative;

	background: linear-gradient(90deg, #1a1a1a 0%, #1a1a1a 30%, #c8a96e 50%, #1a1a1a 70%, #1a1a1a 100%);
	background-size: 250% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;

	animation:
		cervo-tiendas-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both,
		cervo-tiendas-shimmer 3.5s linear 1s infinite;
}

#textotiendas::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 0;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, #c8a96e, #e8d5a3, #c8a96e);
	animation: cervo-tiendas-line 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
}

@media (max-width: 1024px) {
	#textotiendas {
		font-size: 22px !important;
	}
}

@media (max-width: 768px) {
	#textotiendas {
		font-size: 18px !important;
		letter-spacing: 0.06em !important;
	}
}

@keyframes cervo-tiendas-in {
	0% {
		opacity: 0;
		transform: translateY(-28px) scaleX(0.95);
		filter: blur(6px);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scaleX(1);
		filter: blur(0);
	}
}

@keyframes cervo-tiendas-shimmer {
	0%   { background-position: 200% center; }
	100% { background-position: -200% center; }
}

@keyframes cervo-tiendas-line {
	to { width: 100%; }
}


/* =========================================================================
 * 7) HOME — VÍDEO HERO SOLO MÓVIL (secciones Hombre y Mujer)
 * ========================================================================= */

.video-hero-mobile,
.video-hero-mobile_mujer {
	width: 100%;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	margin-top: -5px;
	margin-bottom: 10px;
}

.video-hero-mobile video,
.video-hero-mobile_mujer video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

/* Ocultar el vídeo en escritorio y tablet. */
@media (min-width: 768px) {
	.video-hero-mobile,
	.video-hero-mobile_mujer {
		display: none !important;
	}
}


/* =========================================================================
 * 7.b) PRODUCTO — ocultar el spinner/overlay de WooCommerce al cambiar variación
 *
 * Rescatado del Personalizador. Aplica a la ficha (también a la NUEVA): al
 * elegir color/talla, WooCommerce pinta un `blockUI` gris semitransparente con
 * spinner. Aquí se oculta para que el cambio sea limpio.
 * ========================================================================= */

.woocommerce .blockUI.blockOverlay:before,
.woocommerce .loader:before,
.blockOverlay:before,
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper:before {
	display: none !important;
}

.woocommerce .blockUI.blockOverlay,
.blockOverlay {
	background: none !important;
	opacity: 0 !important;
}


/* =========================================================================
 * 8) BOTÓN FLOTANTE DE WHATSAPP (plugin Click to Chat)
 *
 * El plugin está activo, así que esto es PERMANENTE mientras se use.
 * Icono (i) a la izquierda, sin número, con animación de campana.
 * ========================================================================= */

/* Contenedor de la notificación. */
.ht_ctc_notification {
	float: left !important;
	left: 20px !important;
	right: auto !important;
	margin-top: -1px !important;
	z-index: 999999 !important;
}

/* El círculo rojo: salta. */
.ht_ctc_badge {
	background-color: #ff0000 !important;
	border: 2px solid #fff !important;
	width: 20px !important;
	height: 20px !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	font-size: 0 !important; /* oculta el número original */
	border-radius: 50% !important;
	animation: cervo-ctc-salto 1s infinite ease-in-out !important;
}

/* El signo "!": vibra como campana. */
.ht_ctc_badge::before {
	content: "!" !important;
	font-size: 14px !important;
	color: #fff !important;
	font-weight: bold !important;
	display: block !important;
	animation: cervo-ctc-campana 1s infinite ease-in-out !important;
	transform-origin: center bottom !important;
}

@keyframes cervo-ctc-salto {
	0%, 100%   { transform: translateY(0); }
	30%, 60%   { transform: translateY(-10px); }
}

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

/* Cápsula negra con texto verde. */
.ctc_chip.ctc_s_4 {
	background-color: #000 !important;
	color: #25d366 !important;
	padding-left: 28px !important;
}

/* Subir un poco el botón desde el borde inferior. */
#ht-ctc-chat {
	bottom: 20px !important;
}


/* =========================================================================
 * 9) 🟡 PENDIENTE — CATÁLOGO / PÁGINAS ELEMENTOR / CHECKOUT
 *
 * Depuración del 2026-07-23: del snippet global de WPCode se QUITÓ todo lo
 * MUERTO y los duplicados. Lo que queda aquí abajo sigue VIVO porque su sistema
 * aún no se ha migrado: el CATÁLOGO/LISTADO, las 4 páginas de ELEMENTOR
 * (Garantías, envíos, FAQ, Tiendas) y el CHECKOUT.
 *
 * 🗑️ Eliminado en la depuración (muerto/confirmado): galería y zoom WPGS
 *    (.wpgs-*, .slick-*, .custom-lens, .custom-zoom-*), minicart de Elementor
 *    (.elementor-menu-cart__*, .custom-empty-*), preloader VIEJO (#preloader →
 *    el nuevo es #cervo-preloader), scroll-lock viejo (body.cart-open → el
 *    header nuevo usa body.style.overflow), social proof vieja
 *    (.cervo-actividad-producto), estilos de reseñas nativas y el
 *    `.cr-upload-images-status{display:none}` que TAPABA la zona de subir fotos
 *    de la ficha nueva. Y todos los bloques duplicados.
 *
 * 👉 SE TERMINA DE DEPURAR AL MIGRAR CATEGORÍAS. Cada regla que siga viva se
 *    reescribe/scopea en su sección; lo demás se borra.
 * ========================================================================= */

/* --- General / layout --------------------------------------------------- */
.woocommerce-cart-form {
	padding: 0;
}

.woocommerce-shipping-calculator {
	text-align: center;
}

/* Ocultar título en la página "Tiendas" (Elementor) y el nav de pestañas Woo. */
#post-6611 .entry-title,
ul.tabs.wc-tabs {
	display: none !important;
}

/* 2ª imagen del listado (queda oculta salvo hover, que lo controla el catálogo). */
.hover-image,
.mi-clase-personalizada {
	display: none !important;
}

/* Contenedor a todo el ancho. */
.__os-container__ {
	background: transparent;
	max-width: 100% !important;
	padding: 0 !important;
	width: 100%;
}

.woocommerce div.product div.summary {
	background-color: #ffffff;
	padding: 10px;
}

.category-description,
.cats-widget-styles .card-content,
.os-blog-style-1 .card-content,
.woocommerce div.product .woocommerce-tabs {
	padding: 12px !important;
}

.col-12,
.col-desktop-4,
.col-lg-12,
.sidebar-col {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* --- Márgenes de producto/listado --------------------------------------- */
.os-row,
.row {
	margin: 0;
}

.col-desktop-8,
.content-col,
.os-col {
	padding: 5px !important;
}

@media (max-width: 767px) {
	.col-desktop-8,
	.content-col,
	.os-col {
		padding: 2px !important;
		margin-top: -10px;
	}
}

.woocommerce-product-gallery {
	position: relative;
	margin-top: -4px;
	margin-left: -1px;
}

/* --- Checkout ----------------------------------------------------------- */
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-page .woocommerce-checkout-review-order {
	border-radius: 0;
	padding: 0;
}

.page-id-1740 .elementor-location-footer,
#order_review_heading,
.woocommerce-notices-wrapper {
	display: none !important;
}

/* --- Botones (catálogo y otros añadir-al-carrito) ----------------------- */
.os-quantity-wrapper {
	margin-right: 15px;
	margin-bottom: 10px;
}

.woocommerce div.product form.cart {
	display: flex;
	flex-direction: column;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	width: 100%;
	padding: 14px;
	font-size: 16px;
}

.single_add_to_cart_button,
.button,
.wc-block-components-checkout-place-order-button {
	border-radius: 40px !important;
	background-color: #000 !important;
}

/* --- Submenú del header -------------------------------------------------- */
.sub-menu {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	padding: 15px;
	background: #fff;
	border-radius: 8px;
	min-width: 13em !important;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.sub-menu li a {
	color: #333;
	font-size: 14px;
	font-weight: 500;
	padding: 5px 10px;
	transition: .3s;
}

.sub-menu li a:hover {
	color: #fff;
	background: #cdcdcd;
	border-radius: 4px;
}

/* --- Slider de la home (barra de progreso) ------------------------------ */
.swiper-pagination-progressbar-fill {
	background-color: #000 !important;
}

/* --- Ocultar elementos varios ------------------------------------------- */
.logo-principal img {
	max-height: 48px;
	transition: opacity .2s ease;
}

.product_meta,
.tinv-wraper,
.custom-cart-btn,
.woocommerce-shipping-fields,
.swiper-button-next,
.swiper-button-prev,
body.woocommerce-checkout h1.entry-title.page-title {
	display: none !important;
}

.fee span {
	color: blue !important;
}

/* --- Páginas de contenido (Elementor) + banners de categoría ------------ */
@media (min-width: 1025px) {
	.cbmfwc-banner-wrapper {
		display: none !important;
	}
	.imagen-categoria {
		position: relative;
		overflow: hidden;
	}
	.imagen-categoria img {
		width: 100%;
		transition: transform .4s ease;
	}
	.imagen-categoria:hover img {
		transform: scale(1.05);
	}
	.imagen-categoria .elementor-button {
		position: absolute;
		bottom: 120px;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 50px;
		padding: 12px 40px;
		border: 2px solid black;
		background: white;
		color: black;
		transition: .3s;
		white-space: nowrap;
	}
	.imagen-categoria .elementor-button:hover {
		background: black;
		color: white;
	}
	.slick-dots {
		display: none;
	}
	.page-id-7628 .inner-page-wrap,
	.page-id-10 .inner-page-wrap,
	.page-id-7151 .inner-page-wrap,
	.page-id-7146 .inner-page-wrap,
	.page-id-7154 .inner-page-wrap,
	.page-id-3716 .inner-page-wrap {
		margin: auto 184px;
	}
}

@media (max-width: 768px) {
	.page-id-7628 .inner-page-wrap,
	.page-id-10 .inner-page-wrap,
	.page-id-7151 .inner-page-wrap,
	.page-id-7146 .inner-page-wrap,
	.page-id-7154 .inner-page-wrap,
	.page-id-3716 .inner-page-wrap {
		margin: auto 10px;
	}
}

/* ==== FIN SECCIÓN PENDIENTE (depurar al migrar categorías) ============== */