/*
Theme Name: Un País con Sentido
Theme URI: https://unpaisconsentido.com
Description: Tema hijo de Hello Elementor para Un País con Sentido. Aquí van la paleta de marca, las tipografías autoalojadas y el CSS propio del sitio.
Author: Un País con Sentido
Template: hello-elementor
Version: 1.3.8
Text Domain: upcs
*/

/* ==========================================================================
   Paleta de marca — según el Manual básico de Un País con Sentido.
   Preferir SIEMPRE los colores globales de Elementor al maquetar.
   Estas variables son para el CSS escrito a mano.
   ========================================================================== */

:root {
	--upcs-celeste: #85CDDB; /* color principal del manual: fondos, campos de marca */
	--upcs-celeste-claro: #EFF7F9; /* tono suave del celeste, para fondos de banda —
	                                 el mismo que el global «Celeste claro» (upcsclr) */
	--upcs-azul:    #29235C; /* secundario: titulares, estructura, fondos densos */
	--upcs-naranja: #F39200; /* secundario 2: SOLO llamados a la acción */
	--upcs-verde:   #D8DB22; /* secundario 3: acento puntual */
	--upcs-cafe:    #432918; /* textos de títulos y resaltados */
	--upcs-gris:    #575756; /* color de textos */
}

/* Tipografía: Jost autoalojada (ver fonts.css). Sustituye a Futura Condensed Medium. */

/* ==========================================================================
   Enlaces dentro de textos.
   WordPress los pinta de magenta por defecto y eso no es de la marca.
   ========================================================================== */

.elementor-widget-text-editor a {
	color: var(--upcs-azul);
	text-decoration: none;
	border-bottom: 1px solid rgba(41, 35, 92, .3);
	transition: color .2s ease, border-color .2s ease;
}

.elementor-widget-text-editor a:hover {
	color: var(--upcs-naranja);
	border-bottom-color: var(--upcs-naranja);
}

/* En el pie, sobre azul, los enlaces van en celeste. */
.ehf-footer .elementor-widget-text-editor a {
	color: var(--upcs-celeste);
	border-bottom-color: rgba(133, 205, 219, .35);
}

.ehf-footer .elementor-widget-text-editor a:hover {
	color: #FFFFFF;
	border-bottom-color: #FFFFFF;
}

/* ==========================================================================
   Formulario de Fluent Forms, con el lenguaje de la marca:
   campos con una sola línea abajo, nada de cajas.
   ========================================================================== */

.fluentform .ff-el-form-control {
	font-family: "Jost", system-ui, sans-serif;
	font-size: 16px;
	color: var(--upcs-azul);
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(87, 87, 86, .35);
	border-radius: 0;
	padding: 12px 0;
	box-shadow: none;
	transition: border-color .2s ease;
}

.fluentform .ff-el-form-control:focus {
	border-bottom-color: var(--upcs-naranja);
	box-shadow: none;
	outline: 0;
}

.fluentform .ff-el-input--label label {
	font-family: "Jost", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--upcs-gris);
}

.fluentform .ff-el-group {
	margin-bottom: 26px;
}

.fluentform .ff-btn-submit {
	font-family: "Jost", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .4px;
	padding: 18px 34px;
	border-radius: 0;
	border: 0;
}

/* El CSS de Fluent Forms carga después del nuestro y gana por especificidad;
   por eso estas cuatro declaraciones van forzadas. */
.fluentform .ff-el-form-control {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(87, 87, 86, .35) !important;
	border-radius: 0 !important;
}

.fluentform .ff-el-form-control:focus {
	border-bottom-color: var(--upcs-naranja) !important;
}

/* ==========================================================================
   Encabezado — logo y menú
   ========================================================================== */

/* El menú toma el ancho que sobra y se mantiene en una sola línea: con el logo
   puesto ya no cabía y "Hablemos" se caía a un segundo renglón.
   Solo de 1025 px para arriba: por debajo manda el icono de menú de HFE y, si
   el widget crece, es el icono el que se cae a un segundo renglón. */
@media (min-width: 1025px) {

	header .elementor-widget-navigation-menu {
		flex: 1 1 auto;
	}

	header .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
		flex-wrap: nowrap;
	}
}

/* El icono de menú en móvil venía negro por defecto. */
header .hfe-nav-menu-icon svg {
	fill: var(--upcs-azul);
}

/* Hasta 1024 px manda el icono de menú. El panel desplegable, aunque esté
   cerrado, pide el ancho completo y empujaba el icono a un segundo renglón
   debajo del logo; con min-width 0 el widget puede encogerse hasta el icono.
   Al abrirse, HFE ya posiciona el panel absoluto a todo el ancho. */
@media (max-width: 1024px) {

	header .elementor-widget-navigation-menu {
		flex: 1 1 0;
		min-width: 0;
	}

	header .hfe-nav-menu-layout {
		justify-content: flex-end;
	}
}


/* ==========================================================================
   Tienda — WooCommerce
   --------------------------------------------------------------------------
   Esto NO es la maqueta de la tienda, que sigue pendiente. Son dos correcciones
   puntuales: el magenta por defecto de WordPress y el llamado a la acción.
   ========================================================================== */

/* WordPress pinta de magenta (#CC3366) todo enlace que no herede color. En el
   contenido ya estaba corregido; los bloques de WooCommerce llegaron después y
   traen el mismo problema, así que la tienda entera salía en rosa. */
.woocommerce ul.products li.product a,
.woocommerce-loop-product__link,
.woocommerce-loop-product__title,
.wc-block-components-product-name,
.woocommerce-Price-amount {
	color: var(--upcs-azul);
}

/* Los bloques de WooCommerce usan otras clases que las listas de producto clásicas.
   La grilla «Nuevo en la tienda» del carrito vacío es una de ellas, y salía en magenta
   aunque el resto de la tienda ya estuviera corregido. */
.wc-block-grid__product-link,
.wc-block-grid__product-title,
.wc-block-grid__product .woocommerce-Price-amount {
	color: var(--upcs-azul);
}

.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product-add-to-cart .button {
	background-color: var(--upcs-azul);
	color: #fff;
}

/* Hello Elementor subraya todo enlace dentro de `.page-content`. En los botones de la
   tienda —que son enlaces— queda mal. */
.page-content .wc-block-grid__product .wp-block-button__link,
.page-content .wc-block-grid__product-add-to-cart .button,
.page-content .wc-block-cart__submit-button,
.page-content .wc-block-components-checkout-place-order-button,
.page-content .woocommerce a.button {
	text-decoration: none;
}

/* Cerrar el pedido es EL llamado a la acción de la tienda, así que va en naranja,
   igual que los CTA del resto del sitio. El manual reserva el naranja justamente
   para esto y para nada más. */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
	background-color: var(--upcs-naranja);
	border-color: var(--upcs-naranja);
	color: #fff;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var(--upcs-cafe);
	border-color: var(--upcs-cafe);
	color: #fff;
}

/* «Añadir al carrito» es acción secundaria: no debe competir con el CTA. Va en
   azul, que es el color de estructura. */
.woocommerce ul.products li.product .button {
	background-color: var(--upcs-azul);
	color: #fff;
}

.woocommerce ul.products li.product .button:hover {
	background-color: var(--upcs-naranja);
	color: #fff;
}

/* El de la ficha de producto salía en el MORADO de WooCommerce (#7F54B3) pese a que
   la regla de arriba parecía cubrirlo. La culpa es de una especificidad nueva:

       .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
       button.button.alt.disabled

   El `:where()` no suma nada —para eso existe—, pero `.alt.disabled` sí: son cuatro
   clases contra las tres de `.woocommerce button.button.alt`. Se pierde por una, y
   cargar después no alcanza.

   Hay que igualar el estado `.disabled`, que es el que tiene el botón mientras no se
   elige una variación. */
.woocommerce button.single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button.alt,
.woocommerce button.single_add_to_cart_button.alt.disabled {
	background-color: var(--upcs-azul);
	color: #fff;
}

.woocommerce button.single_add_to_cart_button:hover {
	background-color: var(--upcs-naranja);
	color: #fff;
}

/* El enlace de la categoría, debajo del SKU, seguía en el magenta de WordPress: las
   reglas de más arriba cubren las listas de producto y los bloques, no la ficha. */
.woocommerce div.product .product_meta a,
.woocommerce div.product .posted_in a,
.woocommerce div.product .tagged_as a {
	color: var(--upcs-azul);
}

/* «Limpiar», debajo del selector de un producto variable (el Amplificador desde el
   2026-09-26), también salía en magenta. */
.woocommerce div.product form.cart .reset_variations {
	color: var(--upcs-azul);
}

/* Y el precio de la ficha, que WooCommerce pinta con su propio color. */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--upcs-azul);
}


/* ==========================================================================
   El carrito clásico
   --------------------------------------------------------------------------
   La página del carrito pasó del bloque de WooCommerce al shortcode
   `[woocommerce_cart]` el 2026-09-22: el bloque cargaba 71 archivos de
   JavaScript contra los 15 del resto del sitio, y esa ráfaga era lo que el CDN
   leía como un bot. Con el shortcode son 19.

   Lo que sigue es lo mínimo para que la tabla clásica no desentone: WooCommerce
   la deja con miniaturas de 32 px y enlaces en el magenta de WordPress.
   ========================================================================== */

.woocommerce table.cart img,
.woocommerce #content table.cart img {
	width: 72px;
	height: auto;
	border-radius: 2px;
}

/* El magenta otra vez, ahora en los nombres de producto de la tabla. */
.woocommerce table.cart a,
.woocommerce table.shop_table a,
.woocommerce-cart-form a {
	color: var(--upcs-azul);
}

/* El campo del cupón salía tan estrecho que no cabía ni «Código de cupón»: 80 px.
   OJO CON LA ESPECIFICIDAD, que aquí engaña. WooCommerce lo fija con dos reglas:

       .woocommerce table.cart td.actions .input-text            -> 80px
       .woocommerce-page #content table.cart td.actions .input-text -> 80px

   La segunda lleva **un id** —`#content`, el envoltorio de Hello Elementor—, y un id le
   gana a cualquier cantidad de clases. Una regla con cinco clases pierde contra una con
   cuatro clases y un id. Hay que repetir el `#content` para ganarle. */
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce-page #content table.cart td.actions .coupon .input-text {
	width: 220px;
	min-width: 0;
	padding: 10px 12px;
}

/* Los botones secundarios —aplicar cupón, actualizar carrito, ver carrito— no
   compiten con «Finalizar compra», que es el naranja. Van en azul, igual que
   «Añadir al carrito». */
.woocommerce table.cart td.actions .button,
.woocommerce .woocommerce-message .button,
.woocommerce-cart-form .button {
	background-color: var(--upcs-azul);
	color: #fff;
}

.woocommerce table.cart td.actions .button:disabled,
.woocommerce table.cart td.actions .button.disabled {
	background-color: var(--upcs-gris);
	color: #fff;
	opacity: .45;
}

/* «Finalizar compra» conserva el naranja del CTA. `.checkout-button` es la clase
   del shortcode; la del bloque ya estaba cubierta más arriba. */
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	background-color: var(--upcs-naranja);
	color: #fff;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
	background-color: var(--upcs-cafe);
	color: #fff;
}


/* El carrito y el checkout de WooCommerce llevan la clase `alignwide`, y Hello
   Elementor la define así en su theme.css:

       .alignwide { margin-inline: -80px; }

   Ochenta píxeles negativos fijos a cada lado. En escritorio se los traga el margen
   sobrante; en un teléfono de 390 px **arrastran el bloque entero fuera de la
   pantalla**: el carrito empezaba en -70 px, las miniaturas de los productos quedaban
   invisibles y el subtotal y el botón salían cortados por la izquierda. No había
   scroll horizontal que lo delatara —el documento seguía midiendo 390—, así que una
   revisión de desbordes no lo encontraba. Lo reportó el cliente con una captura de su
   iPhone el 2026-09-22.

   El bloque necesita 160 px de holgura sobre el ancho del contenido (1140), así que el
   margen negativo solo tiene sentido a partir de 1300 px de ventana. Debajo de eso va
   a cero.

   Se puede comprobar con: node scripts/movil.mjs */
.alignwide {
	margin-inline: 0;
}

@media (min-width: 1300px) {
	.alignwide {
		margin-inline: -80px;
	}
}


/* ==========================================================================
   Página 404
   --------------------------------------------------------------------------
   La plantilla es 404.php, en este mismo tema: Elementor gratis no tiene theme
   builder, así que no hay forma de maquetarla en el editor.
   ========================================================================== */

/* 1240 px sin relleno lateral, que es lo que mide el contenedor del encabezado: así el
   titular arranca exactamente donde arranca el logo. Con `padding: 0 20px` fijo, el
   texto quedaba 20 px corrido a la derecha respecto del resto del sitio. El relleno
   solo aparece cuando la ventana ya no da para los 1240. */
.upcs-404__ancho {
	max-width: 1240px;
	margin: 0 auto;
}

@media (max-width: 1280px) {

	.upcs-404__ancho {
		padding: 0 20px;
	}
}

.upcs-404 {
	display: flex;
	flex-direction: column;
}

/* Hello Elementor le pone un ancho máximo a `.site-main` —1140 px en escritorio—, así
   que las bandas de color quedaban flotando en el centro con franjas blancas a los
   lados en vez de llegar a los bordes como en el resto del sitio. El ancho de la
   lectura lo maneja `__ancho`, no el `<main>`.
   
   Hay que repetir el `body:not([class*=elementor-page-])` del padre: su regla vive
   dentro de un @media y tiene especificidad (0,3,1) contando el :not(). Con un
   `.upcs-404` a secas (0,1,0) no gana, y el síntoma es justamente este — la regla se
   escribe, se sube, y en pantalla no pasa nada. */
body:not([class*="elementor-page-"]) .site-main.upcs-404 {
	max-width: none;
	width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}

.upcs-404__intro {
	padding: clamp(64px, 10vw, 128px) 0 clamp(48px, 7vw, 88px);
}

.upcs-404__eyebrow {
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--upcs-gris);
}

.upcs-404__titulo {
	margin: 0 0 24px;
	font-size: clamp(34px, 5vw, 58px);
	font-weight: 400;
	line-height: 1.12;
	color: var(--upcs-azul);
}

.upcs-404__texto {
	max-width: 46ch;
	margin: 0 0 40px;
	font-size: 18px;
	line-height: 1.65;
	color: var(--upcs-gris);
}

.upcs-404__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
	margin: 0;
}

/* Naranja, como todos los llamados a la acción del sitio. */
.upcs-404__cta {
	display: inline-block;
	padding: 18px 34px;
	background: var(--upcs-naranja);
	color: #fff;
	font-weight: 500;
	text-decoration: none;
}

.upcs-404__cta:hover {
	background: var(--upcs-cafe);
	color: #fff;
}

.upcs-404__secundario {
	color: var(--upcs-azul);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.upcs-404__secundario:hover {
	color: var(--upcs-naranja);
}

.upcs-404__salidas {
	background: var(--upcs-celeste-claro);
	padding: clamp(48px, 7vw, 80px) 0;
}

.upcs-404__lista {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.upcs-404__lista a {
	display: block;
	padding-top: 18px;
	border-top: 1px solid var(--upcs-celeste);
	text-decoration: none;
}

.upcs-404__lista-titulo {
	display: block;
	margin-bottom: 6px;
	font-size: 19px;
	font-weight: 500;
	color: var(--upcs-azul);
}

.upcs-404__lista-texto {
	display: block;
	font-size: 15px;
	line-height: 1.5;
	color: var(--upcs-gris);
}

.upcs-404__lista a:hover .upcs-404__lista-titulo {
	color: var(--upcs-naranja);
}

@media (max-width: 880px) {

	.upcs-404__lista {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {

	.upcs-404__lista {
		grid-template-columns: 1fr;
	}
}


/* ==========================================================================
   Carrito del encabezado (widget hfe-cart)
   --------------------------------------------------------------------------
   Va aquí y no en los controles del widget porque **HFE gratis no expone
   controles de color para el carrito**: las pestañas «Colors» existen en el
   panel pero están vacías, son de UAE Pro. Es la excepción a la regla de
   preferir siempre los controles de Elementor.
   ========================================================================== */

/* El contenedor que envuelve menú + carrito toma el 100 % del ancho por defecto.
   
   Ojo: a un contenedor de Elementor no se le cambia el ancho con `width`. Elementor
   lo gobierna con **variables CSS** —`.e-con { width: var(--width) }`— y lo que hay
   que redefinir es la variable. Escribir `width: auto` no hace nada y no avisa: el
   resto de la regla (el `gap`, por ejemplo) sí se aplica, así que parece que
   funcionara. Lo mismo con `flex-grow` y `--flex-grow`. */
header .elementor-element-hdrder {
	--width: auto;
	gap: 28px;
}

/* El widget llega con caja, borde y el azul de botón de Elementor. En el
   encabezado tiene que ser solo un icono. */
header .upcs-hdr-carrito .hfe-menu-cart__toggle .elementor-button {
	padding: 4px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--upcs-azul);
}

header .upcs-hdr-carrito .hfe-menu-cart__toggle .elementor-button:hover,
header .upcs-hdr-carrito .hfe-menu-cart__toggle .elementor-button:focus {
	background: transparent;
	color: var(--upcs-naranja);
}

header .upcs-hdr-carrito .hfe-site-header-cart.hfe-menu-cart-with-border {
	border: 0;
	padding: 0;
}

header .upcs-hdr-carrito .elementor-button-icon {
	font-size: 24px;
}

/* La burbuja del contador. Dos trampas seguidas aquí:
   
   1. HFE la dibuja en **::before**, no en ::after. El ::after existe, así que pintarlo
      no da error — simplemente no cambia nada en pantalla.
   2. Su regla es
      `.hfe-menu-cart--items-indicator-bubble .hfe-menu-cart__toggle .elementor-button-icon[data-counter]:before`,
      con cuatro clases. Hay que igualarle el peso o no gana: con tres clases la burbuja
      se queda en el rojo #D9534F de Bootstrap, que no es de la marca. */
header .upcs-hdr-carrito .hfe-menu-cart__toggle .elementor-button-icon[data-counter]::before {
	background-color: var(--upcs-naranja);
	color: #fff;
	font-weight: 500;
}

/* Hasta 1024 px manda el icono de menú. El envoltorio tiene que quedarse en el mismo
   renglón que el logo y ocupar lo que sobra: si se deja en `width: auto`, el widget de
   menú —que necesita `flex: 1 1 0; min-width: 0` para poder encogerse hasta el icono,
   ver más arriba— no tiene contra qué medirse, y el renglón se parte en dos. */
@media (max-width: 1024px) {

	/* El renglón se parte porque Elementor le pone `flex-wrap: wrap` al encabezado en
	   móvil (`--flex-wrap-mobile: wrap`, se ve en el CSS que imprime). Con el logo y un
	   solo widget al lado nunca se notó; con el envoltorio, que nace al 100 % de ancho,
	   ya no cabe y se va a una segunda línea.
	   Sin envolver, el envoltorio encoge —flex-shrink vale 1 por defecto— y adentro el
	   menú se reduce hasta el icono gracias al `min-width: 0` de más arriba. */
	header .elementor-element-hdrcont > .e-con-inner {
		flex-wrap: nowrap !important;
	}

	header .elementor-element-hdrder {
		min-width: 0;
		gap: 16px;
	}

	/* El icono de menú quedaba flotando entre el logo y el carrito. La causa no es el
	   `justify-content` del contenedor —ya está en flex-end— sino que HFE le pone al
	   botón `margin-left: auto` Y `margin-right: auto`: con las dos en auto el espacio
	   sobrante se reparte y el botón queda centrado. Basta con anular la derecha. */
	header .elementor-element-hdrder .hfe-nav-menu__toggle {
		margin-right: 0;
	}
}

/* ==========================================================================
   Páginas legales — privacidad, tratamiento de datos, términos, devoluciones.
   ==========================================================================

   No se maquetan en Elementor a propósito: son texto plano que alguien va a
   tener que corregir con un abogado, y el editor clásico es el sitio donde eso
   se hace sin romper nada. Además viajan mejor en el paquete de Duplicator.

   Hello Elementor deja `.site-main` en 1140 px, que para un texto corrido son
   renglones larguísimos: se pierde la línea al saltar. Aquí se limita a 760,
   que es el ancho de lectura cómodo de toda la vida.
   ========================================================================== */

.upcs-legal {
	max-width: 760px;
	font-size: 17px;
	line-height: 1.75;
}

.upcs-legal h2 {
	margin-top: 2.2em;
	margin-bottom: .6em;
	font-size: 25px;
	font-weight: 500;
	color: var(--upcs-azul);
}

.upcs-legal h3 {
	margin-top: 1.8em;
	margin-bottom: .5em;
	font-size: 20px;
	font-weight: 500;
	color: var(--upcs-cafe);
}

.upcs-legal ul,
.upcs-legal ol {
	margin-bottom: 1.4em;
	padding-left: 1.3em;
}

.upcs-legal li {
	margin-bottom: .5em;
}

/* El aviso de datos pendientes. Es el mismo criterio de los campos
   «[ IMAGEN · … ]» de las maquetas: lo que falta se ve, no se esconde. El día
   que se llenen los datos, se borra el párrafo y la regla deja de aplicar sola. */
.upcs-legal-aviso {
	max-width: 760px;
	margin-bottom: 2.4em;
	padding: 14px 18px;
	background: var(--upcs-celeste-claro);
	border-left: 3px solid var(--upcs-naranja);
	font-size: 15px;
	color: var(--upcs-gris);
}


/* ==========================================================================
   Portavasos · «Juego de 6 individuales» (2026-09-26, tema/inc/individuales.php)
   ========================================================================== */

.upcs-ind {
	border: 0;
	margin: 0 0 1.5em;
	padding: 0;
}

.upcs-ind legend {
	font-weight: 500;
	color: var(--upcs-azul);
	margin-bottom: .6em;
}

.upcs-ind__cuenta {
	font-weight: 400;
	color: var(--upcs-gris);
	margin-left: .4em;
}

.upcs-ind--aviso .upcs-ind__cuenta {
	color: var(--upcs-naranja);
	font-weight: 500;
}

.upcs-ind__grilla {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}

.upcs-ind__op {
	position: relative;
	cursor: pointer;
	font-size: .8em;
	line-height: 1.25;
	color: var(--upcs-gris);
}

.upcs-ind__op input {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 1;
}

.upcs-ind__op img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border: 3px solid transparent;
	margin-bottom: 4px;
}

.upcs-ind__op:has(input:checked) img {
	border-color: var(--upcs-naranja);
}

.upcs-ind__op:has(input:disabled:not(:checked)) {
	opacity: .45;
	cursor: default;
}

.woocommerce button.single_add_to_cart_button.upcs-ind-incompleto {
	opacity: .5;
}

@media (max-width: 600px) {
	.upcs-ind__grilla {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Campo de cantidad (ficha y carrito). WooCommerce lo fija en 3.631em (58 px) y Hello
   Elementor le suma 16 px de relleno a cada lado: con las flechas del campo numérico no
   quedaba sitio para dos dígitos y «12» se veía como «1». 2026-09-28. */
.woocommerce .quantity input.qty {
	width: 5.5em;
	padding-left: 10px;
	padding-right: 6px;
	text-align: center;
}