/*
Theme Name: NuQa Child
Description: Tema hijo de NuQa para WooCommerce — piel beige, gris tierra y terracota.
Author: NuQa
Template: twentytwentyfive
Version: 1.0.0
Text Domain: nuqa-child
*/

/* ============================================================
   1. VARIABLES — paleta, tipografía, radios y sombras
   Fuente: "NuQa — Implementación en WooCommerce" v1.0, sección 1
   ============================================================ */
:root {
	/* Paleta (coincide con los slugs de theme.json) */
	--nq-base: #f0e9de;         /* fondo de todo el sitio */
	--nq-surface: #fdfbf9;      /* tarjetas, tablas, formularios */
	--nq-contrast: #3d3a34;     /* texto, botones primarios, franjas */
	--nq-body-text: #6a6357;    /* párrafos y descripciones */
	--nq-muted: #8e8779;        /* etiquetas, precios tachados */
	--nq-accent: #c98c63;       /* foco, estrellas, un CTA por página */
	--nq-accent-soft: #dfc7b4;  /* bloque destacado, selección de texto */
	--nq-border: #cbc1b1;       /* bordes de campos y separadores */

	/* Tipografía: Archivo en toda la web (titulares 700, texto 400/500) */
	--nq-font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--nq-heading-weight: 700;
	--nq-heading-letter-spacing: -0.04em;
	--nq-body-size-min: 15px;
	--nq-label-size-min: 13px;

	/* Radios: sin esquinas rectas */
	--nq-radius-hero: 32px;
	--nq-radius-card: 24px;
	--nq-radius-field: 14px;
	--nq-radius-pill: 999px;

	/* Sombras: casi imperceptibles en reposo */
	--nq-shadow-rest: 0 1px 2px rgba(61, 58, 52, 0.04);
	--nq-shadow-hover: 0 18px 40px rgba(61, 58, 52, 0.12);
	--nq-hover-lift: -4px;

	/* Área de toque mínima en móvil */
	--nq-touch-min: 44px;
}

/* ============================================================
   2. TIPOGRAFÍA GLOBAL, ENLACES, FOCO Y SELECCIÓN
   "Sin azules del navegador": enlaces, foco y selección redefinidos.
   ============================================================ */
body {
	font-family: var(--nq-font);
	color: var(--nq-contrast);
	background-color: var(--nq-base);
	font-size: var(--nq-body-size-min);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--nq-font);
	font-weight: var(--nq-heading-weight);
	letter-spacing: var(--nq-heading-letter-spacing);
	color: var(--nq-contrast);
}

p, li, .wc-block-components-product-name, .woocommerce p {
	color: var(--nq-body-text);
}

label, .nq-label, .woocommerce span.onsale, small {
	font-size: var(--nq-label-size-min);
	color: var(--nq-muted);
}

a {
	color: var(--nq-accent);
	text-decoration: none;
}
a:hover {
	color: var(--nq-contrast);
}

::selection {
	background-color: var(--nq-accent-soft);
	color: var(--nq-contrast);
}

/* Foco de teclado visible en terracota, en todos los campos y enlaces */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--nq-accent);
	outline-offset: 2px;
}

/* ============================================================
   3. COMPONENTES COMUNES — .nq-hero, .nq-card, botones y pastillas
   Mismo radio de pastilla en catálogo, ficha, carrito y checkout.
   ============================================================ */
.nq-hero {
	border-radius: var(--nq-radius-hero);
	background-color: var(--nq-surface);
	overflow: hidden;
}

.nq-card {
	background-color: var(--nq-surface);
	border: 1px solid var(--nq-border);
	border-radius: var(--nq-radius-card);
	box-shadow: var(--nq-shadow-rest);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.nq-card:hover {
	box-shadow: var(--nq-shadow-hover);
	transform: translateY(var(--nq-hover-lift));
}

/* Botones y pastillas: mismo radio en toda la tienda */
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
	font-family: var(--nq-font);
	border-radius: var(--nq-radius-pill) !important;
	background-color: var(--nq-contrast);
	color: var(--nq-surface);
	border: none;
	padding: 0.85em 1.75em;
	min-height: var(--nq-touch-min);
}
.button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:hover {
	background-color: var(--nq-accent);
	color: var(--nq-surface);
}

/* Campos de formulario: mismo radio en toda la tienda */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea,
.select2-container--default .select2-selection--single {
	font-family: var(--nq-font);
	border: 1px solid var(--nq-border);
	border-radius: var(--nq-radius-field);
	background-color: var(--nq-surface);
	color: var(--nq-contrast);
	min-height: var(--nq-touch-min);
}

/* ============================================================
   4. TIENDA — plantilla "Product Catalog" (archivo de productos)
   ============================================================ */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	background-color: var(--nq-surface);
	border: 1px solid var(--nq-border);
	border-radius: var(--nq-radius-card);
	box-shadow: var(--nq-shadow-rest);
	padding: 1rem;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
	box-shadow: var(--nq-shadow-hover);
	transform: translateY(var(--nq-hover-lift));
}
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
	color: var(--nq-contrast);
}
.woocommerce ul.products li.product .price del,
.wc-block-grid__product-price del {
	color: var(--nq-muted);
}
.woocommerce ul.products li.product .price ins,
.wc-block-grid__product-price ins {
	color: var(--nq-accent);
	text-decoration: none;
}

/* Filtros de WooCommerce (bloques de filtro) */
.wc-block-attribute-filter,
.wc-block-price-filter,
.wc-block-stock-filter {
	--wc-blue: var(--nq-accent);
}

/* ============================================================
   5. FICHA DE PRODUCTO — plantilla "Single Product"
   Especificaciones = atributos, en la pestaña Información adicional.
   ============================================================ */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs .panel {
	font-family: var(--nq-font);
}
table.woocommerce-product-attributes,
.woocommerce-product-attributes {
	border-collapse: collapse;
	width: 100%;
	background-color: var(--nq-surface);
	border-radius: var(--nq-radius-card);
	overflow: hidden;
}
.woocommerce-product-attributes th {
	color: var(--nq-muted);
	font-size: var(--nq-label-size-min);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-align: left;
	padding: 0.75em 1em;
	border-bottom: 1px solid var(--nq-border);
}
.woocommerce-product-attributes td {
	color: var(--nq-body-text);
	padding: 0.75em 1em;
	border-bottom: 1px solid var(--nq-border);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--nq-contrast);
}
.woocommerce div.product .stars a {
	color: var(--nq-accent);
}

/* ============================================================
   6. CARRITO — cubre el carrito clásico y el de bloques
   ============================================================ */
.woocommerce-cart table.cart,
.wc-block-cart {
	font-family: var(--nq-font);
}
.woocommerce-cart table.cart th,
.wc-block-cart-items__header {
	color: var(--nq-muted);
	font-size: var(--nq-label-size-min);
	border-bottom: 1px solid var(--nq-border);
}
.woocommerce-cart table.cart td,
.wc-block-cart-item {
	border-bottom: 1px solid var(--nq-border);
	color: var(--nq-body-text);
}
.woocommerce-cart .cart-collaterals .cart_totals,
.wc-block-cart__totals-title {
	background-color: var(--nq-surface);
	border-radius: var(--nq-radius-card);
	padding: 1.5rem;
}

/* Aviso de envío gratis (texto generado en functions.php) */
.nq-free-shipping-notice {
	background-color: var(--nq-accent-soft);
	color: var(--nq-contrast);
	border-radius: var(--nq-radius-pill);
	padding: 0.6em 1.25em;
	font-size: var(--nq-label-size-min);
	display: inline-block;
	margin-bottom: 1rem;
}

/* ============================================================
   7. CHECKOUT — página "Finalizar compra"
   Los campos innecesarios se ocultan desde los ajustes, no con CSS.
   ============================================================ */
.woocommerce-checkout form.checkout,
.wc-block-checkout {
	font-family: var(--nq-font);
}
.woocommerce-checkout .form-row label,
.wc-block-components-text-input label {
	color: var(--nq-muted);
	font-size: var(--nq-label-size-min);
}
.woocommerce-checkout #order_review,
.wc-block-checkout__sidebar {
	background-color: var(--nq-surface);
	border-radius: var(--nq-radius-card);
	padding: 1.5rem;
}
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.wc-block-components-text-input input {
	border-radius: var(--nq-radius-field);
	border: 1px solid var(--nq-border);
}

/* ============================================================
   8. PÁGINAS ESTÁTICAS — Cómo funciona, Sobre NuQa, Contacto
   Imágenes a sangre con radio 32px; formularios heredan el radio de foco.
   ============================================================ */
.nq-page img,
.wp-block-image.is-style-nq-bleed img {
	border-radius: var(--nq-radius-hero);
}
.wpcf7-form input,
.wpcf7-form textarea,
.gform_wrapper input,
.gform_wrapper textarea,
.fluentform input,
.fluentform textarea {
	border-radius: var(--nq-radius-field);
	border: 1px solid var(--nq-border);
	min-height: var(--nq-touch-min);
}

/* ============================================================
   9. RESPONSIVE — catálogo a una columna, toque mínimo 44px
   ============================================================ */
@media (max-width: 782px) {
	.woocommerce ul.products,
	.wc-block-grid__products {
		grid-template-columns: 1fr !important;
	}
	.woocommerce ul.products li.product,
	.wc-block-grid__product {
		width: 100% !important;
	}
	.button,
	.wp-block-button__link,
	.woocommerce a.button,
	.woocommerce button.button,
	a,
	input,
	select,
	textarea {
		min-height: var(--nq-touch-min);
	}
}