/**
Theme Name: AZCA Child
Author: AZCA Marketing
Author URI: https://www.azcamarketing.com
Description: AZCA es el tema más rápido, completamente personalizable y hermoso, adecuado para blogs, portafolios personales y sitios web comerciales. Es muy ligero (menos de 50 KB en la interfaz) y ofrece una velocidad incomparable. Construido con SEO en mente, AZCA viene con el código de schema.org integrado para que los motores de búsqueda adoren su sitio. AZCA ofrece muchas opciones de barra lateral y áreas de widgets que le brindan un control total para las personalizaciones.
Algunas de las otras características: # WooCommerce Ready # Responsive # Compatible con los principales complementos # Translation Ready # Ampliable con complementos premium # Actualizado regularmente ¿Buscas un tema base perfecto? No busque más. ¡AZCA es un tema rápido, completamente personalizable y hermoso!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: azca-child
Template: astra
*/
/* ═══════════════════════════════════════════════════════════════════
   OPTIMUS ELIXIR · UTILIDADES GLOBALES
   ───────────────────────────────────────────────────────────────────
   DÓNDE: pegar UNA sola vez en
          Elementor → Ajustes del sitio → CSS personalizado
          (o en el child theme si prefieres versionarlo en git)

   CÓMO SE ACTIVA: en cualquier widget/container →
          pestaña Avanzado → campo "CSS Classes" → escribe el nombre SIN punto
          ej.:  gradiente-texto

   REGLA DE ORO: aquí SOLO va lo que Elementor no puede hacer nativo
          (gradiente sobre texto, backdrop-filter, keyframes).
          Tipografía, color, tamaño, padding, radius, sombras → controles nativos.
   ═══════════════════════════════════════════════════════════════════ */

:root {
	--grad-cool: linear-gradient(92deg, #4FE5FF 0%, #2EF5D0 45%, #D8FB46 100%);
	--grad-fire: linear-gradient(92deg, #F2295B 0%, #FFB800 100%);
	--grad-badge: linear-gradient(92deg, #8B5CFF 0%, #E052A0 100%);
}

/* ─────────────────────────────────────────────
   TEXTO CON GRADIENTE
   gradiente-texto    → azul → verde → lima  (compra / futuro / títulos de producto)
   gradiente-texto-2  → rojo → amarillo      (energía / Perform Now / números)

   DOS FORMAS DE USARLA (ambas soportadas):
   1) INLINE, para teñir solo UNA palabra dentro de un título (recomendado):
      en el campo Título escribe:  OPTIMUS <span class="gradiente-texto">ELIXIR</span>
   2) WIDGET ENTERO: pon la clase en Avanzado → CSS Classes del heading/texto/botón.
   ───────────────────────────────────────────── */

.gradiente-texto,
.gradiente-texto .elementor-heading-title,
.gradiente-texto .elementor-widget-container p,
.gradiente-texto .elementor-button-text {
	background-image: var(--grad-cool);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.gradiente-texto-2,
.gradiente-texto-2 .elementor-heading-title,
.gradiente-texto-2 .elementor-widget-container p,
.gradiente-texto-2 .elementor-button-text {
	background-image: var(--grad-fire);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Extra opcional: ciñe el degradado al ancho del TEXTO en vez de al contenedor.
   Añade la clase junto a la otra:  gradiente-texto grad-fit  */
.grad-fit .elementor-heading-title {
	display: inline-block;
}

/* ─────────────────────────────────────────────
   GLASS · clase: oe-glass  (en el CONTAINER)
   Solo aporta el desenfoque. El fondo translúcido, el radius 30 y el borde
   ponlos con los controles NATIVOS del container.
   ───────────────────────────────────────────── */

.oe-glass {
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

/* ─────────────────────────────────────────────
   FLOTAR · clase: oe-float  (en el widget de imagen)
   ───────────────────────────────────────────── */

.oe-float img {
	animation: oe-float 6s ease-in-out infinite;
}

@keyframes oe-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-16px); }
}

@media (prefers-reduced-motion: reduce) {
	.oe-float img { animation: none; }
}

/* ─────────────────────────────────────────────
   HEADER STICKY con desenfoque (clase: header-sticky-blur)
   ───────────────────────────────────────────── */

.header-sticky-blur {
	position: sticky;
	top: 0;
	z-index: 999;
	/* ← OPACIDAD del header: sube el 0.72 (hacia 1) para menos transparente */
	background: rgba(8, 5, 31, 0.72);
	/* ← BLUR: sube/baja el 14px */
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	transition: background-color 0.4s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   GRID DE PRODUCTOS (widget WooCommerce Products) · estilo Optimus
   ───────────────────────────────────────────────────────────────────
   ACTIVAR: en el widget de productos → Avanzado → CSS Classes → oe-shop-grid
            (así SOLO afecta a ese grid; no toca los "relacionados" de la ficha).
   Layout de cada card:  imagen arriba · título izq / precio der · botón abajo centrado.
   ═══════════════════════════════════════════════════════════════════ */

.oe-shop-grid ul.products li.product {
	background: #0B0820;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 24px;
	overflow: hidden;
	padding: 0 0 24px;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.oe-shop-grid ul.products li.product:hover {
	transform: translateY(-4px);
	border-color: rgba(46, 245, 208, .40);
	box-shadow: 0 18px 50px -12px rgba(46, 245, 208, .25);
}

/* Quitamos el botón flotante que Astra pone sobre la imagen: dejamos solo el de abajo */
.oe-shop-grid .ast-on-card-button { display: none; }
.oe-shop-grid .astra-shop-thumbnail-wrap img { width: 100%; display: block; }

/* ---- Zona de texto: grid con áreas ---- */
.oe-shop-grid .astra-shop-summary-wrap {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"cat   cat"
		"title price"
		"cart  cart";
	align-items: center;
	column-gap: 12px;
	row-gap: 8px;
	padding: 20px 22px 0;
}
.oe-shop-grid .ast-woo-product-category {
	grid-area: cat;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
	color: #B9B4D6;
}
.oe-shop-grid .ast-loop-product__link { grid-area: title; text-align: left; }
.oe-shop-grid .woocommerce-loop-product__title {
	font-family: 'Onest', sans-serif; font-weight: 700; font-size: 18px;
	color: #FFFFFF; padding: 0; line-height: 1.2;
}
.oe-shop-grid .astra-shop-summary-wrap > .price {
	grid-area: price; text-align: right; margin: 0;
}
.oe-shop-grid .price .amount {
	font-family: 'Onest', sans-serif; font-weight: 800; font-size: 20px;
	background: linear-gradient(92deg, #4FE5FF 0%, #2EF5D0 45%, #D8FB46 100%);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.oe-shop-grid .astra-shop-summary-wrap > a.button {
	grid-area: cart; justify-self: center; margin-top: 16px;
	background: linear-gradient(92deg, #4FE5FF 0%, #2EF5D0 45%, #D8FB46 100%);
	color: #08051F; font-weight: 700; border-radius: 999px; padding: 12px 30px;
	transition: box-shadow .25s ease, transform .2s ease;
}
.oe-shop-grid .astra-shop-summary-wrap > a.button:hover {
	box-shadow: 0 8px 24px rgba(46, 245, 208, .35); transform: translateY(-1px);
}
.oe-shop-grid .screen-reader-text { display: none; }
/* Longevita (sin precio, botón "Leer más"): la celda de precio queda vacía y el
   botón sigue centrado abajo — no hay que tocar nada. */

/* ═══════════════════════════════════════════════════════════════════
   GALERÍA DE IMÁGENES DEL PRODUCTO (widget WooCommerce Product Images)
   ───────────────────────────────────────────────────────────────────
   ACTIVAR: widget "Imágenes del producto" → Avanzado → CSS Classes → oe-product-gallery
   Imagen principal con ALTO MÁXIMO (sin recortar) + miniaturas abajo cuidadas.
   ═══════════════════════════════════════════════════════════════════ */

.oe-product-gallery .woocommerce-product-gallery__wrapper,
.oe-product-gallery .woocommerce-product-gallery__image { margin: 0; }

.oe-product-gallery .woocommerce-product-gallery__image img,
.oe-product-gallery img.wp-post-image {
	max-height: 600px;            /* ← ajusta aquí el alto máximo */
	width: 100%;
	object-fit: contain;          /* no recorta el producto (fondo transparente) */
	border-radius: 20px;
}

.oe-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 18px 0 0 !important;
	padding: 0;
	list-style: none;
}
/* FlexSlider pone width inline en los <li>: lo forzamos a 4 por fila */
.oe-product-gallery .flex-control-thumbs li {
	width: calc(25% - 9px) !important;
	margin: 0 !important;
	float: none !important;
}
.oe-product-gallery .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	opacity: .55;
	cursor: pointer;
	transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.oe-product-gallery .flex-control-thumbs img:hover,
.oe-product-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: rgba(46, 245, 208, .5);
	transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════
   CARRITO + CHECKOUT (WooCommerce clásico) · estilo Optimus Elixir
   ───────────────────────────────────────────────────────────────────
   Scope: .woocommerce-cart / .woocommerce-checkout (clases del <body> de esas
   páginas) → no afecta a ninguna otra. Si usas los BLOQUES nuevos de WooCommerce
   (.wc-block-cart / .wc-block-checkout, con divs en vez de tablas), avísame.
   ═══════════════════════════════════════════════════════════════════ */

/* tokens locales */
.woocommerce-cart, .woocommerce-checkout {
	--oe-card: #0B0820;
	--oe-line: rgba(255, 255, 255, 0.08);
	--oe-line-soft: rgba(255, 255, 255, 0.06);
	--oe-field: rgba(255, 255, 255, 0.04);
	--oe-txt: #B9B4D6;
	--oe-cool: linear-gradient(92deg, #4FE5FF 0%, #2EF5D0 45%, #D8FB46 100%);
}

/* ════════════ CARRITO ════════════ */

.woocommerce-cart .woocommerce { color: var(--oe-txt); }

/* Tabla del carrito */
.woocommerce-cart table.shop_table {
	background: var(--oe-card);
	border: 1px solid var(--oe-line);
	border-radius: 20px !important;
	border-collapse: separate !important;   /* sin esto el radio NO se aplica */
	border-spacing: 0 !important;
	overflow: hidden;
}
/* Cabecera: Astra la deja en blanco → fondo oscuro sólido y legible.
   Solo el thead (la tabla de totales no tiene thead, así no se ve afectada). */
.woocommerce-cart table.shop_table thead th {
	background: #17112F !important;
	color: #fff !important;
	font-family: 'Onest', sans-serif; font-weight: 700;
	border: none !important; padding: 16px 18px;
}
.woocommerce-cart table.shop_table td {
	background: transparent; color: var(--oe-txt);
	border-top: 1px solid var(--oe-line-soft); padding: 18px;
}
.woocommerce-cart .cart_item .product-name a { color: #fff; font-weight: 600; }
.woocommerce-cart .cart_item .product-name a:hover { color: #2EF5D0; }
.woocommerce-cart .product-thumbnail img { width: 64px; border-radius: 12px; }
.woocommerce-cart td.product-remove a.remove {
	color: #F2295B !important; border: 1px solid rgba(242, 41, 91, .35);
	border-radius: 999px; width: 26px; height: 26px; line-height: 24px;
}
.woocommerce-cart td.product-remove a.remove:hover { background: #F2295B !important; color: #fff !important; }

/* Input de cantidad (SOLO en la página del carrito, no en el mini-cart del header) */
.woocommerce-cart .quantity input.qty {
	background: var(--oe-field); border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 12px; color: #fff; padding: 10px; min-height: 46px;
}

/* Cupón + botones secundarios */
.woocommerce-cart .coupon input.input-text {
	background: var(--oe-field); border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 12px; color: #fff; padding: 12px 16px;
}
.woocommerce-cart .actions button.button,
.woocommerce-cart .coupon button.button {
	background: rgba(255, 255, 255, 0.06); color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; padding: 12px 26px;
}
.woocommerce-cart .actions button.button:hover,
.woocommerce-cart .coupon button.button:hover { border-color: #2EF5D0; }

/* Totales */
.woocommerce-cart .cart_totals {
	background: var(--oe-card); border: 1px solid var(--oe-line);
	border-radius: 20px; padding: 26px;
}
.woocommerce-cart .cart_totals h2 { color: #fff; font-family: 'Onest', sans-serif; }
.woocommerce-cart .cart_totals table.shop_table { background: transparent !important; border: none !important; border-radius: 0 !important; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
	background: transparent !important;               /* Astra ponía fondo blanco */
	border-top: 1px solid var(--oe-line-soft) !important;
	border-bottom: none !important;
	color: var(--oe-txt) !important;
	padding: 14px 0;
}
.woocommerce-cart .cart_totals table th { color: #fff !important; font-weight: 600; }  /* etiquetas Subtotal / Total */
.woocommerce-cart .cart_totals .order-total .amount { color: #fff; font-size: 1.3em; }

/* Botón "Finalizar compra" */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background: var(--oe-cool) !important; color: #08051F !important;
	border-radius: 999px !important; font-weight: 700 !important;
	padding: 16px 30px !important; font-size: 16px !important;
	transition: box-shadow .25s ease, transform .2s ease;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	box-shadow: 0 8px 30px rgba(46, 245, 208, .35) !important; transform: translateY(-2px);
}

/* ════════════ CHECKOUT ════════════ */

/* Campos del formulario */
.woocommerce-checkout .form-row label,
.woocommerce-checkout h3 { color: #D7D7D7; }
.woocommerce-checkout h3 { font-family: 'Onest', sans-serif; color: #fff; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container .select2-selection--single {
	background: var(--oe-field) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 14px !important; color: #fff !important;
	padding: 14px 16px !important; min-height: 54px; line-height: 1.4;
}
.woocommerce-checkout .select2-container .select2-selection__rendered { color: #fff !important; line-height: 26px; }
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus { border-color: #2EF5D0 !important; outline: none; box-shadow: 0 0 0 3px rgba(46, 245, 208, .12); }
.woocommerce-checkout ::placeholder { color: rgba(185, 180, 214, .55); }

/* Resumen del pedido */
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table {
	background: var(--oe-card); border: 1px solid var(--oe-line);
	border-radius: 20px; border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.woocommerce-checkout-review-order th,
.woocommerce-checkout-review-order td { color: var(--oe-txt); border-color: var(--oe-line-soft) !important; padding: 14px 18px; }
.woocommerce-checkout-review-order .order-total .amount { color: #fff; font-size: 1.25em; }
.woocommerce-checkout-review-order .cart_item .product-name { color: #fff; }

/* Métodos de pago */
.woocommerce-checkout #payment {
	background: var(--oe-card) !important; border: 1px solid var(--oe-line); border-radius: 20px;
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--oe-line-soft); }
.woocommerce-checkout #payment ul.payment_methods li { color: #fff; }
.woocommerce-checkout #payment .payment_box {
	background: rgba(255, 255, 255, 0.03) !important; color: var(--oe-txt);
	border-radius: 12px; font-size: 14px;
}
.woocommerce-checkout #payment .payment_box::before { border-bottom-color: rgba(255, 255, 255, 0.03) !important; }

/* Botón "Realizar pedido" */
.woocommerce-checkout #place_order {
	background: var(--oe-cool) !important; color: #08051F !important;
	border-radius: 999px !important; font-weight: 700 !important;
	padding: 18px 40px !important; font-size: 16px !important; width: 100%;
	transition: box-shadow .25s ease, transform .2s ease;
}
.woocommerce-checkout #place_order:hover {
	box-shadow: 0 8px 30px rgba(46, 245, 208, .35) !important; transform: translateY(-2px);
}

/* Avisos (cupón aplicado, errores) */
.woocommerce-cart .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-error {
	background: rgba(255, 255, 255, 0.03); border-top: 3px solid #2EF5D0;
	color: #fff; border-radius: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   CARRITO DESPLEGABLE EN EL HEADER (mini-cart) · Optimus Elixir
   ───────────────────────────────────────────────────────────────────
   Arregla: (1) que el desplegable NO se recorte, (2) darle estilo dark.
   Para el widget "Menu Cart" de Elementor Pro (.elementor-menu-cart__*).
   Si usas otro carrito (Astra o widget WooCommerce Cart), avísame.
   ═══════════════════════════════════════════════════════════════════ */

/* 1) Evitar el recorte: los ancestros no deben ocultar el overflow */
.elementor-menu-cart__toggle,
.elementor-menu-cart__container,
.elementor-widget-woocommerce-menu-cart,
.elementor-widget-woocommerce-menu-cart > .elementor-widget-container {
	overflow: visible !important;
}
header.elementor-location-header .e-con,
header.elementor-location-header .e-con-inner {
	overflow: visible !important;
}

/* 2) Estilo del panel (recorta SU propio contenido, no el header) */
.elementor-menu-cart__container {
	background: #0B0820 !important;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
	color: #B9B4D6;
	overflow: hidden !important;
}
.elementor-menu-cart__products {
	max-height: 60vh; overflow-y: auto;
	scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent;
}
.elementor-menu-cart__product {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
	padding: 14px 4px !important;
}
.elementor-menu-cart__product-name a,
.elementor-menu-cart__product-name { color: #fff !important; font-weight: 600; }
.elementor-menu-cart__product-price,
.elementor-menu-cart__product .quantity { color: #B9B4D6 !important; }
.elementor-menu-cart__remove-button { color: #F2295B !important; opacity: .8; }
.elementor-menu-cart__remove-button:hover { opacity: 1; }

.elementor-menu-cart__subtotal { color: #fff !important; border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; }
.elementor-menu-cart__subtotal strong,
.elementor-menu-cart__subtotal .amount { color: #fff !important; }

.elementor-menu-cart__footer-buttons .elementor-button {
	border-radius: 999px !important; font-weight: 700 !important;
}
.elementor-menu-cart__footer-buttons .elementor-button--view-cart {
	background: rgba(255, 255, 255, 0.06) !important; color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.elementor-menu-cart__footer-buttons .elementor-button--checkout {
	background: linear-gradient(92deg, #4FE5FF 0%, #2EF5D0 45%, #D8FB46 100%) !important;
	color: #08051F !important;
}

.elementor-menu-cart__container .elementor-menu-cart__empty p,
.woocommerce-mini-cart__empty-message { color: #B9B4D6 !important; }

/* ═══════════════════════════════════════════════════════════════════
   FIX TOTALES DEL CARRITO · fuerza legibilidad pase lo que pase
   ═══════════════════════════════════════════════════════════════════ */
.woocommerce-cart .cart-collaterals .cart_totals {
	background: #0B0820 !important;
	border: 1px solid rgba(255, 255, 255, .08) !important;
	border-radius: 20px !important;
	padding: 26px !important;
}
.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-cart .cart-collaterals .cart_totals table,
.woocommerce-cart .cart-collaterals .cart_totals table tbody,
.woocommerce-cart .cart-collaterals .cart_totals table tr,
.woocommerce-cart .cart-collaterals .cart_totals table th,
.woocommerce-cart .cart-collaterals .cart_totals table td,
.woocommerce-cart .cart-collaterals .cart_totals table td .amount,
.woocommerce-cart .cart-collaterals .cart_totals table td bdi {
	background: transparent !important;
	background-color: transparent !important;
	color: #ffffff !important;
}
.woocommerce-cart .cart-collaterals .cart_totals table th { font-weight: 600 !important; }
.woocommerce-cart .cart-collaterals .cart_totals table tr {
	border-top: 1px solid rgba(255, 255, 255, .08) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   AVISO DE STOCK (plugin "Back In Stock Notifier for WooCommerce")
   ───────────────────────────────────────────────────────────────────
   DÓNDE: style.css del child theme (o Elementor → Ajustes del sitio →
          CSS personalizado). El plugin inyecta el formulario en la salida
          de stock de WooCommerce (widget "Añadir al carrito" de la plantilla).

   POR QUÉ LOS !important: los globales de Elementor pintan los campos con
          `.elementor-kit-N input:not([type="button"]):not([type="submit"])`,
          que pesa más que cualquier selector de clases razonable. Solo se
          fuerzan las propiedades que el kit o el plugin pisan.

   QUÉ NO SE TOCA: el layout del plugin (campo arriba, botón abajo). Ahí va
          también el reCAPTCHA/Turnstile; si se mete en una fila flex queda sin
          sitio y el botón no se habilita nunca (lo deshabilita el plugin hasta
          que el captcha responde).
   ═══════════════════════════════════════════════════════════════════ */

/* ---- Card ---- */
.cwginstock-subscribe-form .cwginstock-panel-primary {
	margin: 24px 0 0 !important;
	padding: 28px 24px 24px !important;
	background: #0B0820 !important;
	border: 1px solid rgba(255, 255, 255, .12) !important;
	border-radius: 30px !important;
	box-shadow: none !important;
}

/* Bootstrap del plugin: fuera fondos y paddings */
.cwginstock-subscribe-form .cwginstock-panel-heading,
.cwginstock-subscribe-form .cwginstock-panel-body {
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
}
.cwginstock-subscribe-form .cwginstock-panel-body .row,
.cwginstock-subscribe-form .cwginstock-panel-body .col-md-12 {
	margin: 0 !important;
	padding: 0 !important;
}

/* ---- Título ---- */
.cwginstock-subscribe-form .cwginstock-panel-heading h4 {
	margin: 0 0 18px;
	font-family: "Onest", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: #FFFFFF;
	text-align: left !important;
}
.cwginstock-subscribe-form .cwginstock-panel-heading h4::before {
	content: "● Agotado temporalmente";
	display: block;
	margin-bottom: 8px;
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #FFD962;
}

/* ---- Campo email ---- */
.cwginstock-subscribe-form input.cwgstock_email {
	box-sizing: border-box !important;
	width: 100% !important;
	height: 52px !important;
	margin: 0 0 12px !important;
	padding: 0 20px !important;
	font-family: "Inter", sans-serif !important;
	font-size: 15px !important;
	color: #FFFFFF !important;
	text-align: left !important;
	background: #08051F !important;
	border: 1px solid rgba(255, 255, 255, .15) !important;
	border-radius: 30px !important;
	box-shadow: none !important;
	outline: none !important;
}
.cwginstock-subscribe-form input.cwgstock_email::placeholder {
	color: rgba(185, 180, 214, .6) !important;
}
.cwginstock-subscribe-form input.cwgstock_email:focus {
	border-color: rgba(255, 255, 255, .5) !important;
}
.cwginstock-subscribe-form input.cwgstock_email:-webkit-autofill {
	-webkit-text-fill-color: #FFFFFF !important;
	-webkit-box-shadow: 0 0 0 1000px #08051F inset !important;
}

/* ---- Botón ---- */
.cwginstock-subscribe-form button.cwgstock_button {
	width: 100% !important;
	min-height: 52px !important;
	padding: 12px 24px !important;
	font-family: "Inter", sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: #08051F !important;
	background: #FFFFFF !important;
	border: 0 !important;
	border-radius: 30px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: background-color .2s ease;
}
.cwginstock-subscribe-form button.cwgstock_button:hover:not(:disabled) {
	background: #D7D7D7 !important;
}
.cwginstock-subscribe-form button.cwgstock_button:disabled {
	opacity: .6;
	cursor: not-allowed;
}

/* Captcha centrado bajo el campo */
.cwginstock-subscribe-form .g-recaptcha,
.cwginstock-subscribe-form .cf-turnstile {
	display: flex;
	justify-content: center;
	margin-bottom: 12px;
}

/* ---- Mensaje de respuesta ---- */
.cwginstock-subscribe-form .cwgstock_output:not(:empty) {
	margin-top: 12px;
	font-size: 14px;
	color: #FFFFFF;
}
/* ═══ COOKIEYES · estilo por defecto (anula los botones globales del sitio) ═══ */

.cky-consent-container .cky-btn,
.cky-modal .cky-btn {
	width: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 8px 16px !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 24px !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	border-width: 2px !important;
	border-style: solid !important;
	border-radius: 2px !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transform: none !important;
}
.cky-consent-container .cky-btn:hover,
.cky-modal .cky-btn:hover {
	opacity: .8;
}

.cky-consent-container .cky-notice-btn-wrapper,
.cky-modal .cky-prefrence-btn-wrapper {
	display: flex !important;
	flex-wrap: wrap;
	gap: 12px !important;
}

.cky-consent-container .cky-banner-btn-close,
.cky-modal .cky-btn-close,
.cky-modal .cky-accordion-btn,
.cky-modal .cky-show-desc-btn,
.cky-consent-container .cky-show-desc-btn {
	width: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: inherit !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.cky-modal .cky-accordion-btn {
	font-weight: 700 !important;
	text-align: left !important;
}
.cky-modal .cky-show-desc-btn,
.cky-consent-container .cky-show-desc-btn {
	text-decoration: underline !important;
}

.cky-modal .cky-switch input[type="checkbox"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 44px !important;
	height: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50px !important;
	box-shadow: none !important;
	background-color: #D0D5D2 !important;
}
.cky-modal .cky-switch input[type="checkbox"]:checked {
	background-color: #1863DC !important;
}

.cky-btn-revisit-wrapper .cky-btn-revisit {
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background-image: none !important;
	box-shadow: none !important;
}
