/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ==========================================================================
   Rodas Corp — CSS provisional (2026-09-28)
   Vive en wp-content/themes/bricks-child/style.css. Copia de trabajo en la
   carpeta del cliente: "Rodas Corp/bricks-child-style.css".

   Los estilos de Bricks y de su integración con WooCommerce van dentro de
   @layer: cualquier regla de este archivo (sin layer) les gana sin importar
   la especificidad. Lo que sí hay que vencer son los estilos de elemento
   (#brxe-…) y el CSS de página, que van sin layer; por eso los :hover llevan
   !important.
   ========================================================================== */

:root {
	--rc-naranja: var(--bricks-color-lwykkl, #FF6616);
	--rc-negro: var(--bricks-color-grey-900, #212121);
	--rc-claro: var(--bricks-color-yvivpv, #FAF8FE);
}


/* 1. BOTONES
   Mismo criterio que la portada: el botón negro pasa a naranja al pasar el
   mouse; el naranja (acción principal) pasa a negro.
   -------------------------------------------------------------------------- */

.woocommerce .button,
.woocommerce button.button,
.woocommerce-page .button,
.bricks-button {
	transition: background-color .2s ease, color .2s ease;
}

/* Negros: botones de la grilla de productos, carrito, cupón, avisos */
.products .button,
.woocommerce-cart-form .button,
.woocommerce-shipping-calculator .button,
.checkout_coupon .button,
.woocommerce-message .button,
.woocommerce-info .button {
	background-color: var(--rc-negro);
	color: #fff;
}
/* "Seleccionar opciones" salía en negrita; "Añadir al carrito" en 200 (CSS de página) */
.products .button {
	font-weight: 200;
}

/* Naranjas: añadir al carrito (ficha), finalizar compra, realizar pedido */
.single_add_to_cart_button,
.checkout-button,
#place_order {
	background-color: var(--rc-naranja);
	color: #fff;
}

.products .button:hover,
.woocommerce-cart-form .button:hover,
.woocommerce-shipping-calculator .button:hover,
.checkout_coupon .button:hover,
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
	background-color: var(--rc-naranja) !important;
	color: #fff !important;
}

.single_add_to_cart_button:hover,
.checkout-button:hover,
#place_order:hover {
	background-color: var(--rc-negro) !important;
	color: #fff !important;
}

/* Deshabilitados (variación sin elegir, "Actualizar carrito" sin cambios) */
.single_add_to_cart_button.disabled:hover,
.single_add_to_cart_button:disabled:hover {
	background-color: var(--rc-naranja) !important;
}
.woocommerce-cart-form .button:disabled:hover {
	background-color: var(--rc-negro) !important;
}


/* 2. TARJETAS DE PRODUCTO
   La misma sombra que la tarjeta de la portada.
   -------------------------------------------------------------------------- */

.products li.product {
	transition: box-shadow .2s ease;
}
.products li.product:hover {
	box-shadow: 1px 1px 15px 0 var(--bricks-color-grey-300, #e0e0e0);
}


/* 3. FICHA DE PRODUCTO: sin selector de cantidad
   Con 1 en stock WooCommerce deja el campo de cantidad como hidden, pero el
   contenedor .quantity sigue ocupando su ancho y empuja el botón. El input
   hidden se envía igual aunque el contenedor no se muestre.
   -------------------------------------------------------------------------- */

form.cart .quantity:has(input[type="hidden"]) {
	display: none;
}


/* 4. MENÚ MÓVIL
   El ícono de hamburguesa (y la X al abrir) salía negro sobre el header oscuro.
   -------------------------------------------------------------------------- */

#brxe-rmdfwj .bricks-mobile-menu-toggle {
	color: var(--rc-claro);
}


/* 5. MENÚ PRINCIPAL: hover y página actual en naranja (escritorio y móvil)
   En fichas de producto y categorías WordPress no marca "Tienda" como actual:
   se usa la clase .woocommerce del body (tienda, producto, categoría) con el
   ítem de Tienda, menu-item-287. Si se recrea ese ítem del menú, cambia el id.
   -------------------------------------------------------------------------- */

#brxe-rmdfwj .menu-item > a {
	transition: color .2s ease;
}
#brxe-rmdfwj .menu-item > a:hover,
#brxe-rmdfwj .current-menu-item > a,
#brxe-rmdfwj .current-menu-ancestor > a,
body.woocommerce #brxe-rmdfwj .menu-item-287 > a {
	color: var(--rc-naranja);
}


/* 6. FILTRO DE PRECIO (elemento "Filtro de productos" de Bricks)
   Riel gris, tramo elegido en naranja, tiradores naranjas con aro blanco.
   --rc-desde / --rc-hasta los actualiza el JS de functions.php (rc_filtro_precio_js);
   sin JS el riel sale entero en naranja.
   -------------------------------------------------------------------------- */

.brxe-woocommerce-products-filter .double-slider-wrap {
	--rc-desde: 0%;
	--rc-hasta: 100%;
	padding-top: 18px;
}
.brxe-woocommerce-products-filter .double-slider-wrap input[type="range"] {
	height: 4px;
	border-radius: 4px;
}
.brxe-woocommerce-products-filter .double-slider-wrap input[type="range"].lower {
	background: linear-gradient(to right,
		var(--bricks-color-grey-300, #e0e0e0) var(--rc-desde),
		var(--rc-naranja) var(--rc-desde),
		var(--rc-naranja) var(--rc-hasta),
		var(--bricks-color-grey-300, #e0e0e0) var(--rc-hasta));
}
.brxe-woocommerce-products-filter .double-slider-wrap input[type="range"]::-webkit-slider-thumb {
	width: 18px;
	height: 18px;
	background-color: var(--rc-naranja);
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px var(--rc-naranja), 0 2px 6px rgba(0, 0, 0, .25);
	transition: transform .15s ease;
}
.brxe-woocommerce-products-filter .double-slider-wrap input[type="range"]::-moz-range-thumb {
	width: 12px;
	height: 12px;
	background-color: var(--rc-naranja);
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--rc-naranja), 0 2px 6px rgba(0, 0, 0, .25);
	transition: transform .15s ease;
}
.brxe-woocommerce-products-filter .double-slider-wrap input[type="range"]:hover::-webkit-slider-thumb,
.brxe-woocommerce-products-filter .double-slider-wrap input[type="range"]:active::-webkit-slider-thumb {
	transform: scale(1.15);
}
.brxe-woocommerce-products-filter .double-slider-wrap input[type="range"]:hover::-moz-range-thumb,
.brxe-woocommerce-products-filter .double-slider-wrap input[type="range"]:active::-moz-range-thumb {
	transform: scale(1.15);
}
.brxe-woocommerce-products-filter .double-slider-wrap .value-wrap {
	margin-top: 18px;
	font-size: 13px;
	color: var(--bricks-color-grey-700, #616161);
}


/* ==========================================================================
   Revisión responsive (2026-09-28)
   Breakpoints de Bricks: 991px tablet, 767px móvil horizontal, 478px móvil.
   ========================================================================== */

/* 7. CAMPOS DE FORMULARIO EN MÓVIL
   Con letra menor a 16px Safari de iPhone hace zoom al tocar el campo.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="password"],
	input[type="number"],
	input[type="search"],
	input[type="url"],
	select,
	textarea {
		font-size: 16px !important;
	}
}


/* 8. HEADER EN TABLET Y MÓVIL
   El menú de Bricks recién colapsa en 767px: en tablet "Socios" se montaba
   sobre los íconos. Colapsa desde 991px. En móvil: logo | íconos | menú, y el
   área táctil de la hamburguesa crece sin mover las barras (::before).
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
	#brxe-rmdfwj .bricks-nav-menu-wrapper {
		display: none;
	}
	#brxe-rmdfwj .bricks-mobile-menu-toggle {
		display: block;
	}
	#brxe-rmdfwj .bricks-mobile-menu-toggle::before {
		inset: -14px -12px;
	}
	#brxe-rhbftf {
		flex-wrap: nowrap;
		column-gap: 8px;
		padding-left: 12px;
		padding-right: 22px;
	}
	#brxe-flgvyh {
		flex: 1 1 0;
		min-width: 0;
		max-width: none !important;
	}
	#brxe-zxhwxz {
		order: 2;
		flex: 0 0 auto;
		width: auto;
		max-width: none !important;
		column-gap: 14px;
	}
	#brxe-zzflat {
		order: 3;
		flex: 0 0 auto;
		width: auto;
		max-width: none !important;
		margin-left: 12px;
	}
}
/* Menú abierto: "Home" quedaba debajo de la X de cerrar */
#brxe-rmdfwj .bricks-mobile-menu {
	padding-top: 80px;
}
#brxe-rmdfwj .bricks-mobile-menu a {
	font-size: 15px;
	line-height: 52px;
}
@media (max-width: 478px) {
	#brxe-ptnkuc {
		width: 130px !important;
		padding-right: 0 !important;
	}
}
/* Mini carrito: el desplegable (400px) se salía de la pantalla por la izquierda */
@media (max-width: 767px) {
	#brxe-mvejgz .cart-detail {
		position: fixed;
		top: 67px;
		left: 8px;
		right: 8px;
		width: auto;
		max-width: none;
	}
}


/* 9. FOOTER
   Columnas alineadas arriba. En tablet/móvil: "Rodas Corp" a lo ancho y los
   tres menús en fila; en móvil Bricks los convertía en hamburguesas negras.
   -------------------------------------------------------------------------- */

#brxe-knwccw {
	height: auto !important;
	align-items: flex-start !important;
	padding-top: 50px;
	padding-bottom: 40px;
}
#brxe-jwsapl {
	align-items: center;
	text-align: center;
	padding: 16px 20px;
}
@media (max-width: 991px) {
	#brxe-knwccw {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 30px 20px !important;
		padding: 40px 20px 30px !important;
	}
	#brxe-jpvhlh {
		grid-column: 1 / -1;
	}
	#brxe-knwccw > * {
		width: auto;
		max-width: none;
	}
	#brxe-ekfnbn,
	#brxe-cvikuo,
	#brxe-wuleht {
		margin-left: 0 !important;
	}
	#brxe-ekfnbn .bricks-nav-menu > li,
	#brxe-cvikuo .bricks-nav-menu > li,
	#brxe-wuleht .bricks-nav-menu > li {
		margin-left: 0;
	}
}
@media (max-width: 767px) {
	#brxe-ekfnbn .bricks-nav-menu-wrapper,
	#brxe-cvikuo .bricks-nav-menu-wrapper,
	#brxe-wuleht .bricks-nav-menu-wrapper {
		display: block;
	}
	#brxe-ekfnbn .bricks-mobile-menu-toggle,
	#brxe-cvikuo .bricks-mobile-menu-toggle,
	#brxe-wuleht .bricks-mobile-menu-toggle {
		display: none;
	}
}


/* 10. PÁGINAS DE WOOCOMMERCE: márgenes laterales en tablet y móvil
   Tienda/categorías, ficha, carrito y checkout traían 60–70px por lado.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
	#brxe-pxobzh,
	#brxe-gvezng,
	#brxe-maynbt,
	#brxe-xjeqrl {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
}
@media (max-width: 767px) {
	#brxe-pxobzh,
	#brxe-gvezng,
	#brxe-maynbt,
	#brxe-xjeqrl {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* Tienda: en tablet los filtros (desplegables) pasan arriba de la grilla;
   en móvil, dos productos por fila */
@media (max-width: 991px) {
	#brxe-hfaacw {
		flex-direction: column !important;
	}
	#brxe-jkzlsz {
		max-width: 100% !important;
		width: 100%;
		padding-right: 0 !important;
	}
	#brxe-egvdve {
		width: 100%;
	}
}
@media (max-width: 767px) {
	#brxe-kzvile .products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}
	#brxe-kzvile .product {
		padding: 12px !important;
	}
	#brxe-kzvile .product .button {
		width: 100%;
		text-align: center !important;
		padding-left: 8px;
		padding-right: 8px;
	}
}


/* 11. FICHA DE PRODUCTO EN MÓVIL
   Galería: miniaturas abajo en fila (antes columna de 100px y foto de 160px).
   Variaciones: etiqueta arriba del selector. Cantidad + botón sin desbordar.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	#brxe-azmkfv .woocommerce-product-gallery {
		flex-direction: column;
	}
	#brxe-azmkfv .woocommerce-product-gallery .flex-control-nav {
		width: 100% !important;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	#brxe-azmkfv .flex-viewport {
		width: 100%;
	}

	form.cart table.variations,
	form.cart table.variations tbody,
	form.cart table.variations tr,
	form.cart table.variations th,
	form.cart table.variations td {
		display: block;
		width: 100%;
	}
	form.cart table.variations th {
		padding-bottom: 6px;
	}
	form.cart table.variations td {
		padding-top: 0;
	}
	form.cart table.variations select {
		width: 100%;
	}
	#brxe-bcjxnw form.cart.variations_form .woocommerce-variation-add-to-cart,
	#brxe-bcjxnw form.cart:not(.variations_form) {
		display: flex !important;
		width: 100%;
	}
	#brxe-bcjxnw .single_add_to_cart_button {
		flex: 1 1 auto;
	}

	#brxe-hcdmev h2,
	.woocommerce-tabs h2,
	.woocommerce-Reviews-title,
	#reply-title {
		font-size: 20px;
		line-height: 1.3;
	}
}

/* Botones que quedaban en gris por defecto: enviar valoración, acceder */
#respond #submit,
.woocommerce-form-login .button,
.woocommerce-form-register .button,
.woocommerce-ResetPassword .button {
	background-color: var(--rc-negro);
	color: #fff;
	transition: background-color .2s ease;
}
#respond #submit:hover,
.woocommerce-form-login .button:hover,
.woocommerce-form-register .button:hover,
.woocommerce-ResetPassword .button:hover {
	background-color: var(--rc-naranja) !important;
	color: #fff !important;
}


/* 12. CARRITO Y CHECKOUT
   -------------------------------------------------------------------------- */

/* Mini carrito: botones en gris por defecto */
.woocommerce-mini-cart__buttons .button {
	background-color: var(--rc-negro);
	color: #fff;
	transition: background-color .2s ease;
}
.woocommerce-mini-cart__buttons .button.checkout {
	background-color: var(--rc-naranja);
}
.woocommerce-mini-cart__buttons .button:hover {
	background-color: var(--rc-naranja) !important;
	color: #fff !important;
}
.woocommerce-mini-cart__buttons .button.checkout:hover {
	background-color: var(--rc-negro) !important;
}

/* Totales: "SubtotalS/ 350.00" pegados y título con interlineado enorme */
.cart_totals h2 {
	line-height: 1.3;
}
.cart_totals table th {
	padding-right: 20px !important;
	white-space: nowrap;
	vertical-align: top;
}

/* Checkout: las columnas 55% / 45% no se apilaban en móvil */
@media (max-width: 767px) {
	.cart_totals h2,
	.woocommerce-billing-fields > h3,
	.woocommerce-additional-fields > h3,
	#order_review_heading {
		font-size: 24px;
		line-height: 1.25;
	}
	#brxe-btoupv {
		flex-direction: column !important;
		row-gap: 30px !important;
	}
	#brxe-olqnmp,
	#brxe-voyhmo {
		width: 100% !important;
		max-width: 100% !important;
	}
	#brxe-vikcox {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}


/* 13. PORTADA
   -------------------------------------------------------------------------- */

/* Texto blanco del hero sobre la nieve */
#brxe-dqwves,
#brxe-bohijp {
	text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}
/* Títulos de blog en "Tipo Título" (capitalize) → como están escritos */
#brxe-yazeyk .repeater-item [data-field-id="b7d5ba"] {
	text-transform: none !important;
}

@media (max-width: 478px) {
	#brxe-qznbeu {
		align-self: center;
		text-align: center;
	}
	/* Categorías: 7 bloques de 300px apilados (con márgenes de 600/1000px para
	   compensar) → grilla de 2 columnas, Trekking a lo ancho */
	#brxe-otload,
	#brxe-bskvoy {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px !important;
		height: auto !important;
		margin-bottom: 10px !important;
	}
	#brxe-bskvoy {
		margin-bottom: 50px !important;
	}
	#brxe-otload > *,
	#brxe-bskvoy > * {
		width: auto !important;
		height: 190px !important;
		min-width: 0;
		padding: 14px !important;
	}
	#brxe-jocwka {
		grid-column: 1 / -1;
		height: 220px !important;
	}
	/* Testimonios sin separación entre sí */
	#brxe-liygef {
		padding: 80px 24px !important;
	}
	#brxe-xdizve {
		row-gap: 48px !important;
	}
}


/* 14. PÁGINAS SIN PLANTILLA DE BRICKS (Mi cuenta, 404, textos legales)
   El contenido iba pegado al header, al footer y, en móvil, al borde.
   -------------------------------------------------------------------------- */

#brx-content.wordpress,
#brx-content.bricks-404-wrapper {
	padding: 50px 20px 80px;
}
.woocommerce-account #brx-content.wordpress > h1,
#brx-content.bricks-404-wrapper .title {
	text-align: center;
}
.woocommerce-account #brx-content.wordpress > h1 {
	margin-bottom: 30px;
}


/* 15. NOSOTROS, SERVICIOS, SOCIOS
   -------------------------------------------------------------------------- */

/* Nosotros, franja final: padding lateral fijo de 400px (en móvil el
   contenido quedaba en 0px y la página se desplazaba de costado).
   Desde 1366px queda igual que antes: 400px por lado. */
#brxe-muzjsg {
	padding-left: max(24px, min(400px, calc(50% - 283px))) !important;
	padding-right: max(24px, min(400px, calc(50% - 283px))) !important;
}
@media (max-width: 767px) {
	#brxe-muzjsg {
		padding-top: 60px !important;
		padding-bottom: 60px !important;
	}
	#brxe-vkrmxh {
		flex-direction: column !important;
		width: 100%;
		row-gap: 12px;
	}
}

@media (max-width: 991px) {
	/* El texto de "Nosotros" viene con un salto de línea fijo por renglón */
	#brxe-lbhpwj > div {
		display: inline;
	}
	#brxe-lbhpwj > div::before {
		content: " ";
	}
}
@media (max-width: 767px) {
	#brxe-zcjsim {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	#brxe-juqaph {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	#brxe-fziaat,
	#brxe-qajqjx {
		padding: 36px 28px !important;
	}

	/* Servicios */
	#brxe-ajmaib {
		text-align: center;
	}
	#brxe-aosxqw,
	#brxe-jyhmwd {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	#brxe-vptgdg,
	#brxe-hkzapt,
	#brxe-fgofke,
	#brxe-klwlro {
		padding: 36px 28px !important;
	}
	#brxe-shyens {
		padding: 60px 24px !important;
	}
	#brxe-ddhuct {
		flex-direction: column !important;
		width: 100%;
		row-gap: 12px;
	}

	/* Socios */
	#brxe-grfqhk {
		text-align: center;
	}
	#brxe-kcyien {
		row-gap: 40px;
	}
	#brxe-hkcioi,
	#brxe-hrvwxi {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	#brxe-hrvwxi {
		align-items: stretch !important;
	}
	#brxe-epyvdz,
	#brxe-vwxrkj {
		width: 100%;
		max-width: 100%;
		padding: 28px 20px !important;
	}
	#brxe-vwxrkj {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	#brxe-drzfmr,
	#brxe-kfxlfa {
		font-size: 24px;
		line-height: 1.25;
	}
}

/* ==========================================================================
   AJUSTES 2026-10-06 — observaciones del cliente
   ========================================================================== */

/* 16. HEADER PEGAJOSO
   El header es una banda normal (no va superpuesta al hero: el contenido
   empieza justo en los 98 px donde termina) y no tiene fondo propio — el color
   que se ve es el del <html>, #faf8fe. Al fijarlo hay que declararlo, o el
   contenido se transparenta al pasar por debajo.
   Sin !important: #brx-header no es un selector #brxe-… ni CSS de página, así
   que le gana al CSS de Bricks, que va en @layer.
   -------------------------------------------------------------------------- */

#brx-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: #faf8fe;
}

/* Barra de administración de WordPress (solo con sesión iniciada): es fija por
   encima de 600 px y pasa a desplazarse con la página por debajo. */
body.admin-bar #brx-header {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar #brx-header {
		top: 46px;
	}
}
@media (max-width: 600px) {
	body.admin-bar #brx-header {
		top: 0;
	}
}

/* 17. ESCALA PROPORCIONAL AL DISEÑO (de 1280 a 1600 px)
   El mockup está dibujado sobre un lienzo de 1280 px y el sitio va a ancho
   completo. Si el texto no crece nada, queda chico al lado de su propia foto
   y se pierden las proporciones del diseño. Por eso la escala es proporcional:
   cada tamaño es su valor del mockup multiplicado por (ancho / 1280).

       clamp(VALOR, calc(VALOR * 100vw / 1280), VALOR*1.25)

   - A 1280 px da exactamente el valor del mockup.
   - A 1600 px da 1,25× y ahí se detiene.
   - Por debajo de 1280 el clamp se queda en el mínimo, así que entre 992 y
     1280 no cambia nada y por debajo de 992 la regla ni se aplica: móvil y
     tablet quedan tal como se aprobaron.

   Sobre el tope: estuvo en 2× (crecimiento hasta 2560 px) y en pantallas de
   1920 px dejaba los títulos en 1,5× del mockup —67,5 px el título de
   categoría—, que el cliente vio desproporcionado. Bajado a 1,25 el 2026-10-13.

   Sobre el !important: va SOLO donde se midió que hacía falta. Bricks emite
   una regla `#brxe-…` gemela para algunos elementos; al empatar en
   especificidad gana la suya, que va después. Donde no compite, no se pone.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {

	/* Base heredada: menús, enlaces, "HOMBRES/MUJERES/NIÑOS", "VER MÁS",
	   migas de pan, párrafos y pie salen todos de aquí. */
	body {
		font-size: clamp(15px, calc(15 * 100vw / 1280), 18.75px);
	}

	/* Títulos principales: portada y Tienda (40 y 45 en el mockup) */
	#brxe-dqwves {
		font-size: clamp(40px, calc(40 * 100vw / 1280), 50px) !important;
	}

	/* Título de Tienda y de las páginas de categoría. Bajado de 45 a 32 el
	   2026-10-13: a 1920 px medía 56,25 px y el cliente lo veía desproporcionado
	   contra el logo de la cabecera (180 × 50 px). Con 32 queda en 40 px —2,1
	   veces el texto base, 0,8 del alto del logo—, que es la proporción que
	   pidió. Portada, ficha de producto y Servicios no se tocan. */
	#brxe-wsnalf {
		font-size: clamp(32px, calc(32 * 100vw / 1280), 40px) !important;
	}

	/* Títulos de sección: "Productos Destacados", "Lo que dicen de nosotros",
	   "Aprende cómo equiparte" */
	#brx-content h2 {
		font-size: clamp(31.5px, calc(31.5 * 100vw / 1280), 39.375px);
	}

	/* Nombres de categoría de "Explora categorías" */
	#brxe-ougwgi,
	#brxe-ikfwsw,
	#brxe-wdqezt,
	#brxe-tiqflu,
	#brxe-jarjmm {
		font-size: clamp(20px, calc(20 * 100vw / 1280), 25px);
	}

	/* Entradas del blog: la fecha y el título son el mismo h3.dynamic con
	   tamaños distintos (15 y 20). Se separan por el enlace, que solo lleva
	   el título; si no, una sola regla aplanaría los dos. */
	#brx-content h3.dynamic {
		font-size: clamp(15px, calc(15 * 100vw / 1280), 18.75px) !important;
	}
	#brx-content h3.dynamic:has(a) {
		font-size: clamp(20px, calc(20 * 100vw / 1280), 25px) !important;
	}

	/* Tarjetas de producto de la portada (van en bucle: Bricks las identifica
	   por clase, no por id) */
	#brx-content .brxe-qwvnaz {
		font-size: clamp(14px, calc(14 * 100vw / 1280), 17.5px);
	}
	#brx-content .brxe-fqoxww {
		font-size: clamp(13px, calc(13 * 100vw / 1280), 16.25px);
	}
	#brx-content .brxe-ootezy,
	#brx-content .brxe-kvifdk {
		font-size: clamp(12px, calc(12 * 100vw / 1280), 15px);
	}

	/* Grilla de la Tienda: precio y "Añadir al carrito" heredan del
	   contenedor de cada producto */
	#brx-content ul.products li.product {
		font-size: clamp(12px, calc(12 * 100vw / 1280), 15px);
	}

	/* Testimonios */
	#brxe-xtlsxq,
	#brxe-almjym {
		font-size: clamp(13px, calc(13 * 100vw / 1280), 16.25px) !important;
	}
	#brxe-iypibj {
		font-size: clamp(12px, calc(12 * 100vw / 1280), 15px) !important;
	}

	/* Pie: títulos de columna y línea de crédito */
	#brxe-tyypka,
	#brxe-hbsukb,
	#brxe-qoknja,
	#brxe-owgzla {
		font-size: clamp(18px, calc(18 * 100vw / 1280), 22.5px) !important;
	}
	#brxe-xysnpk {
		font-size: clamp(13px, calc(13 * 100vw / 1280), 16.25px) !important;
	}
}

/* 17b. ESCALA PROPORCIONAL — TIENDA Y FICHA DE PRODUCTO
   Misma fórmula. Estos elementos tenían tamaño propio y no los arrastraba
   la base heredada.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {

	/* Ficha: nombre del producto y precio */
	#brxe-mrgzwy {
		font-size: clamp(40px, calc(40 * 100vw / 1280), 50px) !important;
	}
	#brxe-lyfwjh {
		font-size: clamp(25px, calc(25 * 100vw / 1280), 31.25px) !important;
	}

	/* Grilla de productos (Tienda y "Completa tu equipo" de la ficha). Bricks
	   identifica cada campo de la tarjeta por data-field-id, que es estable. */
	#brx-content ul.products li.product [data-field-id="18b430"] {
		font-size: clamp(15px, calc(15 * 100vw / 1280), 18.75px);
	}
	#brx-content ul.products li.product [data-field-id="879a91"],
	#brx-content ul.products li.product [data-field-id="37c373"] {
		font-size: clamp(12px, calc(12 * 100vw / 1280), 15px);
	}
	/* En la ficha ese mismo botón arranca en 11 px, no en 12 */
	body.single-product #brx-content ul.products li.product [data-field-id="37c373"] {
		font-size: clamp(11px, calc(11 * 100vw / 1280), 13.75px);
	}

	/* Títulos del filtro de la Tienda */
	#brxe-ssslvo h6.title-tag {
		font-size: clamp(15px, calc(15 * 100vw / 1280), 18.75px) !important;
	}
}

/* 17c. ESCALA PROPORCIONAL — LO QUE QUEDABA FUERA
   Detectado comparando cada texto a 1280 y a 2560 en dos iframes: estos
   elementos se quedaban clavados en su tamaño mientras su foto crecía al
   doble. Es lo que hacía que los títulos se vieran chicos.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {

	/* Etiquetas HOMBRES / MUJERES / NIÑOS. Las tres llevan la clase
	   .categoria, así que una sola regla las cubre y le gana al #brxe-… de
	   Bricks por especificidad, sin necesidad de !important. */
	#brx-content .categoria {
		font-size: clamp(15px, calc(15 * 100vw / 1280), 18.75px);
	}

	/* Menú principal y submenú de la cabecera (el tamaño se declara en el
	   elemento del menú, no en cada enlace) */
	#brx-header #brxe-rmdfwj {
		font-size: clamp(15px, calc(15 * 100vw / 1280), 18.75px);
	}

	/* Buscador desplegable: título y botón */
	#brxe-kdqdvk .bricks-search-inner h4.title {
		font-size: clamp(24px, calc(24 * 100vw / 1280), 30px);
	}
	#brxe-kdqdvk .bricks-search-inner button {
		font-size: clamp(23px, calc(23 * 100vw / 1280), 28.75px);
	}

	/* Hueco entre las tres tejas de categoría: el padding lateral de esa
	   grilla es porcentual y sí escalaba, pero el hueco estaba en 15 px
	   fijos, así que a 2560 las tejas quedaban pegadas en proporción. */
	#brxe-olighh {
		column-gap: clamp(15px, calc(15 * 100vw / 1280), 18.75px);
	}
}

/* 17d. ESCALA PROPORCIONAL — NOSOTROS, SERVICIOS Y SOCIOS
   Estas tres páginas no estaban en el inventario inicial (que cubrió portada,
   Tienda y ficha). La auditoría comparando 1280 contra 2560 las sacó a flote.
   Aquí el !important va en casi todo, y está medido: se subieron primero sin
   él y ninguna entró. En estas páginas Bricks sí emite una regla `#brxe-…`
   gemela para cada elemento, así que empatan en especificidad y gana la suya,
   que va después. La única que entra limpia es la del formulario, porque
   apunta a los `label` por descendencia y no empata.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {

	/* Nosotros */
	#brxe-jmyymq {
		font-size: clamp(12px, calc(12 * 100vw / 1280), 15px) !important;
	}
	#brxe-deugfr {
		font-size: clamp(40px, calc(40 * 100vw / 1280), 50px) !important;
	}

	/* Servicios: título de la página */
	#brxe-ajmaib {
		font-size: clamp(45px, calc(45 * 100vw / 1280), 56.25px) !important;
	}
	/* Servicios: títulos de cada servicio · Socios: título de sección */
	#brxe-jropwm,
	#brxe-wfilxk,
	#brxe-iyziow,
	#brxe-cdsqwu,
	#brxe-uzdnxg {
		font-size: clamp(18px, calc(18 * 100vw / 1280), 22.5px) !important;
	}
	/* Servicios: descripciones · Socios: botones */
	#brxe-josmxe,
	#brxe-phveah,
	#brxe-wovhdk,
	#brxe-oirjuz,
	#brxe-bxkzmw,
	#brxe-eviaql {
		font-size: clamp(13px, calc(13 * 100vw / 1280), 16.25px) !important;
	}

	/* Socios: subtítulo y formulario */
	#brxe-dqsnju {
		font-size: clamp(15px, calc(15 * 100vw / 1280), 18.75px) !important;
	}
	#brxe-xmsdky label {
		font-size: clamp(12px, calc(12 * 100vw / 1280), 15px);
	}
	#brxe-xmsdky button {
		font-size: clamp(13px, calc(13 * 100vw / 1280), 16.25px) !important;
	}
}

/* 17e. ESCALA PROPORCIONAL — GRILLA DE PRODUCTO (query loop de Bricks)
   Las reglas de 17b apuntan a `ul.products li.product`, el marcado legado de
   Woo. Producción arma la grilla con un query loop de Bricks, así que nunca
   aplicaron y la tarjeta quedó fuera de la escala. Mismos valores de 17b,
   con los selectores que sí existen en producción.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {

	/* Línea de categorías */
	#brx-content .brxe-hsflhy,
	#brx-content .brxe-cnrvae {
		font-size: clamp(11px, calc(11 * 100vw / 1280), 13.75px) !important;
	}

	/* Nombre del producto */
	#brx-content .brxe-mlgyqf,
	#brx-content .brxe-tlukbv {
		font-size: clamp(15px, calc(15 * 100vw / 1280), 18.75px) !important;
	}

	/* Precio */
	#brx-content .brxe-yhbkyz {
		font-size: clamp(13px, calc(13 * 100vw / 1280), 16.25px) !important;
	}

	/* Botón AGREGAR AL CARRITO */
	#brx-content .brxe-jrvsre,
	#brx-content .brxe-vlunyt {
		font-size: clamp(12px, calc(12 * 100vw / 1280), 15px) !important;
	}
}

/* 17g. TEJAS DE CATEGORÍA DE LA PORTADA — PROPORCIÓN CONTRA SU PROPIA FOTO
   La foto de cada teja crece con la pantalla (395 px a 1280, 600 px a 1920).
   Con el tope general de 1,25× el rótulo se quedaba corto y la teja perdía la
   proporción del mockup. Para estos dos elementos se mantiene la escala
   proporcional completa. No compiten con el texto corrido: viven en la foto. */
@media (min-width: 992px) {
	#brx-content .categoria,
	#brx-content .boton-categoria {
		font-size: clamp(15px, calc(15 * 100vw / 1280), 30px) !important;
	}
}