/* Grupo Nexo - piel de WooCommerce (copia para la Fundacion, 16-09-2026). El marcado de WooCommerce es de terceros y no tiene via nativa en Elementor: por eso vive aqui y no en el arbol. Todo sale de las variables del sistema, asi que un cambio de paleta se propaga solo. */
.woocommerce div.product p.price,.woocommerce div.product span.price,.woocommerce ul.products li.product .price{color: var(--nx-accent);font-family: var(--nx-texto),sans-serif;font-weight: 600;}
.woocommerce div.product p.price del,.woocommerce ul.products li.product .price del{color: var(--nx-ink-soft);opacity: 1;font-weight: 400;}
.woocommerce div.product p.price ins,.woocommerce ul.products li.product .price ins{text-decoration: none;color: var(--nx-accent);}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.woocommerce div.product form.cart .button{background-color: var(--nx-accent);color: var(--nx-surface);font-family: var(--nx-texto),sans-serif;font-size: var(--nx-t-apoyo);font-weight: 600;line-height: 1;border: 0;border-radius: var(--nx-radio-pill);padding: 16px 30px;min-height: 48px;transition: background-color 180ms ease;}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce #respond input#submit:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,.woocommerce div.product form.cart .button:hover{background-color: var(--nx-ink);color: var(--nx-surface);}
.woocommerce a.button:focus-visible,.woocommerce button.button:focus-visible,.woocommerce input.button:focus-visible{outline: 3px solid var(--nx-accent);outline-offset: 2px;}
.woocommerce div.product form.cart div.quantity{margin-inline-end: 12px;}
.woocommerce .quantity input.qty,.woocommerce-page .quantity input.qty{font-family: var(--nx-texto),sans-serif;color: var(--nx-ink);border: 1px solid var(--nx-line);border-radius: var(--nx-radio-sm);min-height: 48px;padding: 0 8px;background: var(--nx-surface);}
.woocommerce .woocommerce-breadcrumb{font-family: var(--nx-texto),sans-serif;font-size: var(--nx-t-apoyo);color: var(--nx-ink-soft);}
.woocommerce .woocommerce-breadcrumb a{color: var(--nx-ink-soft);text-decoration: none;}
.woocommerce .woocommerce-breadcrumb a:hover{color: var(--nx-accent);text-decoration: underline;text-underline-offset: 3px;}
.woocommerce div.product .product_meta{font-family: var(--nx-texto),sans-serif;font-size: 0.875rem;color: var(--nx-ink-soft);display: flex;flex-wrap: wrap;gap: 6px 20px;}
.woocommerce div.product .product_meta > span{display: inline-flex;gap: 6px;}
.woocommerce div.product .product_meta a{color: var(--nx-accent);text-decoration: none;}
.woocommerce div.product div.images img{border-radius: var(--nx-radio-md);}
.woocommerce div.product div.images .flex-control-thumbs li img{border-radius: var(--nx-radio-sm);}
.woocommerce ul.products li.product{background: var(--nx-surface);border: 1px solid var(--nx-line);border-radius: var(--nx-radio-md);overflow: hidden;padding-bottom: 22px;transition: border-color 180ms ease;}
.woocommerce ul.products li.product:hover{border-color: var(--nx-accent);}
.woocommerce ul.products li.product a img{margin: 0 0 18px;border-radius: 0;aspect-ratio: 3 / 2;object-fit: cover;}
.woocommerce ul.products li.product .woocommerce-loop-product__title,.woocommerce ul.products li.product h2,.woocommerce ul.products li.product h3{font-family: var(--nx-display),sans-serif;font-size: 1.25rem;font-weight: 700;line-height: 1.18;color: var(--nx-ink);padding: 0 22px 8px;}
.woocommerce ul.products li.product .price,.woocommerce ul.products li.product .button{margin-inline: 22px;}
.woocommerce ul.products li.product .price{display: block;margin-bottom: 14px;}
.woocommerce ul.products li.product .onsale,.woocommerce span.onsale{background: var(--nx-ink);color: var(--nx-surface);font-family: var(--nx-texto),sans-serif;font-weight: 600;border-radius: var(--nx-radio-pill);min-height: 0;line-height: 1;padding: 8px 14px;}
.woocommerce div.product .related > h2,.woocommerce div.product .upsells > h2,.woocommerce .cart_totals h2,.woocommerce-checkout h3{font-family: var(--nx-display),sans-serif;font-weight: 800;color: var(--nx-ink);letter-spacing: -0.5px;}
.woocommerce-message,.woocommerce-info,.woocommerce-error{font-family: var(--nx-texto),sans-serif;border-top-color: var(--nx-accent);border-radius: var(--nx-radio-sm);background: var(--nx-accent-soft);color: var(--nx-ink);}
.woocommerce-message::before,.woocommerce-info::before{color: var(--nx-accent);}
.woocommerce form .form-row label,.woocommerce-page form .form-row label{font-family: var(--nx-texto),sans-serif;font-weight: 500;color: var(--nx-ink);margin-bottom: 6px;}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,.woocommerce-page form .form-row input.input-text,.select2-container--default .select2-selection--single{font-family: var(--nx-texto),sans-serif;font-size: 1rem;color: var(--nx-ink);background: var(--nx-surface);border: 1px solid var(--nx-line);border-radius: var(--nx-radio-md);min-height: 48px;padding: 12px 14px;}
.woocommerce form .form-row input.input-text:focus-visible,.woocommerce form .form-row textarea:focus-visible,.woocommerce form .form-row select:focus-visible{outline: 3px solid var(--nx-accent);outline-offset: 2px;border-color: var(--nx-accent);}
.woocommerce form .form-row .required{color: var(--nx-accent);text-decoration: none;}
.woocommerce div.product iframe,.elementor-widget-woocommerce-product-content iframe{max-width: 100%;aspect-ratio: 16 / 9;height: auto;border-radius: var(--nx-radio-md);}
/* nexo-onsale-fix: la etiqueta de oferta quedaba cortada por el overflow de la tarjeta */
.woocommerce ul.products li.product{position: relative;}
.woocommerce ul.products li.product .onsale,.woocommerce span.onsale{position: absolute;top: 12px;left: 12px;right: auto;margin: 0;z-index: 2;font-size: 0.8125rem;}
.woocommerce div.product span.onsale{top: 12px;left: 12px;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{min-height: 3.2em;}
/* nexo-movil-20260820: correcciones del barrido a 390 px.
   Elementor gana en especificidad sobre la piel en tres puntos medidos:
   el relleno inferior de la tarjeta, el relleno de la etiqueta de oferta
   y el alto de linea del boton. Se fuerzan solo esas tres declaraciones. */
.woocommerce ul.products li.product{padding-bottom: 22px !important;}
.woocommerce ul.products li.product .onsale,.woocommerce span.onsale,span.onsale{padding: 8px 14px !important;width: auto !important;min-width: 0 !important;height: auto !important;min-height: 0 !important;line-height: 1 !important;font-size: 0.8125rem;border-radius: var(--nx-radio-pill);background: var(--nx-ink);color: var(--nx-surface);}
.woocommerce ul.products li.product .button{display: inline-block;white-space: nowrap;line-height: 1 !important;}
.woocommerce div.product div.images .flex-control-thumbs{display: flex;flex-wrap: wrap;gap: 8px;margin: 10px 0 0;padding: 0;list-style: none;}
.woocommerce div.product div.images .flex-control-thumbs li{width: 72px;margin: 0;float: none;}
.woocommerce div.product div.images .flex-control-thumbs li img{width: 100%;aspect-ratio: 1 / 1;object-fit: contain;background: var(--nx-surface);border: 1px solid var(--nx-line);border-radius: var(--nx-radio-sm);padding: 4px;opacity: 0.65;transition: opacity 150ms ease,border-color 150ms ease;}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,.woocommerce div.product div.images .flex-control-thumbs li img:hover{opacity: 1;border-color: var(--nx-accent);}
/* La tarjeta es columna: el boton se ancla abajo y queda alineado entre tarjetas
   sin depender de que los titulos midan lo mismo. */
.woocommerce ul.products li.product{display: flex;flex-direction: column;}
.woocommerce ul.products li.product .button{margin-top: auto;align-self: flex-start;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{min-height: 0;}
/* Titulo de las secciones de producto: era 16 px, del tamano del cuerpo.
   Causa: el widget clasico ata su tipografia a la global "Display", y esa
   preset no define tamano a proposito (los tamanos viven en cada elemento).
   Elementor emite font-size: var(--e-global-typography-primary-font-size)
   sin respaldo, la variable no existe, la declaracion se invalida y el h2
   hereda los 16 px del cuerpo. Se gana con el mismo selector de Elementor. */
.woocommerce .elementor-widget-woocommerce-product-related.elementor-wc-products .products > h2,.woocommerce .elementor-widget-woocommerce-product-upsell.elementor-wc-products .products > h2{font-size: 2rem !important;line-height: 1.1;margin-bottom: 28px;}
@media (max-width: 600px){
.woocommerce .elementor-widget-woocommerce-product-related.elementor-wc-products .products > h2,.woocommerce .elementor-widget-woocommerce-product-upsell.elementor-wc-products .products > h2{font-size: 1.5rem !important;margin-bottom: 20px;}
}
.woocommerce div.product .related > h2,.woocommerce div.product .upsells > h2,.elementor-widget-woocommerce-product-related h2,.elementor-widget-woocommerce-product-upsell h2{font-size: 2rem;line-height: 1.1;margin-bottom: 28px;}
@media (max-width: 600px){
.woocommerce ul.products li.product .button{padding: 14px 24px;}
.woocommerce div.product .related > h2,.woocommerce div.product .upsells > h2,.elementor-widget-woocommerce-product-related h2,.elementor-widget-woocommerce-product-upsell h2{font-size: 1.5rem;margin-bottom: 20px;}
}


/* ---------------------------------------------------------------------------
   nexo-centrado-20260821
   Las tarjetas del catalogo y las de cursos relacionados quedan centradas,
   igual que las de la portada: titulo, precio y boton en el mismo eje.
   --------------------------------------------------------------------------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	text-align: center;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .woocommerce-loop-product__link {
	text-align: center;
}

/* El boton estaba anclado abajo y pegado a la izquierda. Sigue abajo, pero
   centrado. El !important es necesario porque la regla anterior de esta misma
   hoja lo alinea a flex-start. */
.woocommerce ul.products li.product .button {
	align-self: center !important;
}

/* Cabecera y tarjetas del bloque de cursos relacionados de la ficha. */
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products {
	text-align: center;
}

.woocommerce .elementor-widget-woocommerce-product-related.elementor-wc-products .products > h2,
.woocommerce div.product .related.products > h2,
.woocommerce div.product .upsells.products > h2 {
	text-align: center;
}

/* La tarjeta del bucle es un elemento de bloque: Elementor gana a la regla
   anterior de esta hoja que la hacia flexible. Con el !important vuelve a ser
   una columna, y asi el boton se ancla abajo y los seis botones de la rejilla
   quedan a la misma altura aunque los titulos midan una o dos lineas. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	display: flex !important;
	flex-direction: column;
}

.woocommerce ul.products li.product .button {
	margin-top: auto !important;
}

/* Y la direccion tambien tiene que forzarse: sin esto la tarjeta se vuelve una
   fila y la foto, el titulo y el boton se ponen uno al lado del otro. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	flex-direction: column !important;
}


/* ---------------------------------------------------------------------------
   nexo-ver-curso-20260821
   Una sola accion por tarjeta: entrar a la ficha. Va en naranja de marca -el
   mismo color de todas las acciones principales del sitio- porque es el unico
   camino de la tarjeta y tiene que leerse como tal. Se ancla al fondo para que
   los botones de una misma fila queden a la misma altura.
   --------------------------------------------------------------------------- */
.woocommerce ul.products li.product .fni-ver-producto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center !important;
	margin-top: auto !important;
	min-width: 190px;
	padding: 14px 26px;
	min-height: 46px;
}

/* ---------------------------------------------------------------------------
   nexo-checkout-20260821
   Finalizar compra en dos columnas: los datos de facturacion a la izquierda y
   el resumen del pedido con el pago a la derecha.

   Al quitar las notas del pedido, la segunda columna interna de WooCommerce
   (.col-2, que solo contenia envio y campos adicionales) quedo vacia. Se
   deshace ese reparto de dos columnas dentro de #customer_details y se lleva
   la division al nivel del formulario completo, que es donde ahora tiene
   sentido: formulario contra resumen.

   Los cursos son productos virtuales: no hay envio, y por eso .col-2 no
   muestra nada. Se deja en el arbol, sin alto, para no pelear con la
   plantilla de WooCommerce.
   --------------------------------------------------------------------------- */
.woocommerce-checkout #customer_details.col2-set {
	display: block;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	width: 100%;
	float: none;
	margin: 0;
}

.woocommerce-checkout #customer_details .woocommerce-shipping-fields:empty,
.woocommerce-checkout #customer_details .woocommerce-additional-fields:empty {
	display: none;
}

.woocommerce-checkout #order_review {
	background: #FFFFFF;
	border: 1px solid #DCE4E3;
	border-radius: 20px;
	padding: 28px;
}

.woocommerce-checkout .nx-resumen #order_review_heading {
	margin-top: 0;
	margin-bottom: 16px;
}

@media (min-width: 900px) {
	.woocommerce-checkout form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
		column-gap: 56px;
		align-items: start;
	}

	.woocommerce-checkout form.checkout.woocommerce-checkout > wc-order-attribution-inputs {
		display: none;
	}

	.woocommerce-checkout form.checkout #customer_details {
		grid-column: 1;
	}

	.woocommerce-checkout form.checkout .nx-resumen {
		grid-column: 2;
	}
}