/*
Theme Name: Hitopatch Child
Theme URI: https://hitopatch.com
Description: Child theme del Genesis Framework para Hitopatch, tienda de parches de velcro del Camino de Santiago. Estética de Camino auténtico: azul jacobeo, flecha amarilla y piedra. Portada orientada al peregrino, catálogo servido desde WooCommerce y ficha de producto con las garantías junto al botón de compra.
Author: Eduardo Beltran
Author URI: https://hitopatch.com
Version: 1.0.0
Template: genesis
Text Domain: hitopatch-child
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: genesis, woocommerce, tienda, camino-de-santiago, una-columna
*/

/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
	--hp-azul:        #1B3A6B;
	--hp-azul-alt:    #24508F;
	--hp-azul-claro:  #E9EFF7;
	--hp-amarillo:    #E8A317;
	--hp-amarillo-alt:#FFBE3D;
	--hp-piedra:      #6B6255;
	--hp-crema:       #F7F3EC;
	--hp-crema-alt:   #EFE8DC;
	--hp-blanco:      #FFFFFF;
	--hp-tinta:       #1E2A38;
	--hp-suave:       #5E6B7A;
	--hp-borde:       #DED6C8;
	--hp-verde:       #2E8B57;

	--hp-titulo: "Bitter", Georgia, "Times New Roman", serif;
	--hp-texto:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--hp-t-xs:  0.75rem;
	--hp-t-sm:  0.875rem;
	--hp-t-b:   1.0625rem;
	--hp-t-md:  clamp(1.125rem, 0.4vw + 1rem, 1.25rem);
	--hp-t-lg:  clamp(1.5rem, 1.2vw + 1.2rem, 2rem);
	--hp-t-xl:  clamp(1.9rem, 2.4vw + 1.3rem, 3rem);
	--hp-t-xxl: clamp(2.3rem, 4.2vw + 1.2rem, 4rem);

	--hp-e-1: 0.5rem;
	--hp-e-2: 1rem;
	--hp-e-3: 1.5rem;
	--hp-e-4: 2.5rem;
	--hp-e-5: 4rem;
	--hp-e-6: clamp(4rem, 8vw, 6.5rem);

	--hp-ancho: 1200px;
	--hp-radio: 10px;
	--hp-radio-sm: 6px;
	--hp-trans: 200ms cubic-bezier(0.4, 0, 0.2, 1);
	--hp-sombra: 0 14px 32px -16px rgba(27, 58, 107, 0.35);
	--hp-cabecera: 122px;
}

/* =============================================================
   2. RESET
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--hp-cabecera); }

body {
	margin: 0;
	background: var(--hp-blanco);
	color: var(--hp-tinta);
	font-family: var(--hp-texto);
	font-size: var(--hp-t-b);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, iframe, video { max-width: 100%; display: block; }
img { height: auto; }
button { font: inherit; color: inherit; }

.wrap {
	width: 100%;
	max-width: var(--hp-ancho);
	margin-inline: auto;
	padding-inline: var(--hp-e-3);
}

.hp-portada .site-inner { max-width: none; margin: 0; padding: 0; }

/* =============================================================
   3. TIPOGRAFÍA
   ============================================================= */
h1, h2, h3, h4 {
	font-family: var(--hp-titulo);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.01em;
	margin: 0 0 var(--hp-e-2);
	color: var(--hp-azul);
}

p { margin: 0 0 var(--hp-e-2); }
a { color: var(--hp-azul-alt); text-underline-offset: 3px; transition: color var(--hp-trans); }
a:hover { color: var(--hp-azul); }
::selection { background: var(--hp-amarillo); color: var(--hp-azul); }

.hp-enlace {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 600;
	text-decoration: none;
}
.hp-enlace:hover { gap: 0.75rem; }

/* La flecha amarilla del Camino: el elemento gráfico de la marca. */
.hp-flecha { display: inline-flex; color: var(--hp-amarillo); }

/* =============================================================
   4. BOTONES
   ============================================================= */
.hp-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.6rem;
	background: var(--hp-azul);
	border: 2px solid var(--hp-azul);
	border-radius: var(--hp-radio-sm);
	color: var(--hp-blanco);
	font-family: var(--hp-texto);
	font-size: var(--hp-t-sm);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--hp-trans), color var(--hp-trans), border-color var(--hp-trans), transform var(--hp-trans);
}

.hp-btn:hover,
.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 {
	background: var(--hp-azul-alt);
	border-color: var(--hp-azul-alt);
	color: var(--hp-blanco);
	transform: translateY(-2px);
}

.hp-btn--amarillo { background: var(--hp-amarillo); border-color: var(--hp-amarillo); color: var(--hp-azul); }
.hp-btn--amarillo:hover { background: var(--hp-amarillo-alt); border-color: var(--hp-amarillo-alt); color: var(--hp-azul); }

.hp-btn--azul { background: var(--hp-azul); border-color: var(--hp-azul); color: var(--hp-blanco); }

.hp-btn--claro { background: transparent; border-color: rgba(255,255,255,0.5); color: var(--hp-blanco); }
.hp-btn--claro:hover { background: var(--hp-blanco); border-color: var(--hp-blanco); color: var(--hp-azul); }

.hp-btn--linea { background: transparent; border-color: var(--hp-borde); color: var(--hp-azul); }
.hp-btn--linea:hover { background: var(--hp-azul); border-color: var(--hp-azul); color: var(--hp-blanco); }

.hp-btn--linea-claro { background: transparent; border-color: var(--hp-amarillo); color: var(--hp-amarillo); }
.hp-btn--linea-claro:hover { background: var(--hp-amarillo); border-color: var(--hp-amarillo); color: var(--hp-azul); }

.hp-btn--grande { padding: 1.05rem 2rem; font-size: var(--hp-t-b); }
.hp-btn--bloque { display: flex; width: 100%; }

/* =============================================================
   5. CABECERA
   ============================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--hp-blanco);
	border-bottom: 1px solid var(--hp-borde);
	transition: box-shadow var(--hp-trans);
}

.site-header.is-scroll { box-shadow: 0 6px 20px -12px rgba(27,58,107,0.4); }
.admin-bar .site-header { top: 32px; }

.hp-barra-envio {
	background: var(--hp-azul);
	color: var(--hp-blanco);
	font-size: var(--hp-t-xs);
}

.hp-barra-envio__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 36px;
	padding-block: 0.3rem;
	text-align: center;
}

.hp-barra-envio .hp-icono { color: var(--hp-amarillo); flex: none; }

.hp-header__inner {
	display: flex;
	align-items: center;
	gap: var(--hp-e-3);
	min-height: 86px;
}

/* --- Marca --- */
.hp-marca { margin: 0; font-size: inherit; margin-right: auto; }

.hp-marca__enlace {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--hp-azul);
}

.hp-marca__sello {
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	background: var(--hp-azul);
	border-radius: 50%;
	color: var(--hp-amarillo);
	flex: none;
}

.hp-marca__nombre {
	font-family: var(--hp-titulo);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.hp-marca__logo { max-height: 52px; width: auto; }

/* --- Navegación --- */
.hp-nav { margin-left: auto; }

.hp-nav__lista {
	display: flex;
	align-items: center;
	gap: var(--hp-e-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hp-nav__lista a {
	position: relative;
	display: block;
	padding-block: 0.4rem;
	color: var(--hp-tinta);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
}

.hp-nav__lista a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 3px;
	background: var(--hp-amarillo);
	border-radius: 2px;
	transition: width var(--hp-trans);
}

.hp-nav__lista a:hover { color: var(--hp-azul); }
.hp-nav__lista a:hover::after,
.hp-nav__lista .current-menu-item > a::after { width: 100%; }

/* --- Submenús --- */
.hp-nav__lista .menu-item-has-children { position: relative; }

.hp-nav__lista .sub-menu {
	position: absolute;
	top: 100%; left: -1rem;
	min-width: 220px;
	margin: 0; padding: 0.5rem 0;
	list-style: none;
	background: var(--hp-blanco);
	border: 1px solid var(--hp-borde);
	border-radius: var(--hp-radio-sm);
	box-shadow: var(--hp-sombra);
	opacity: 0; visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--hp-trans), transform var(--hp-trans), visibility var(--hp-trans);
	z-index: 10;
}

.hp-nav__lista .menu-item-has-children:hover > .sub-menu,
.hp-nav__lista .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}

.hp-nav__lista .sub-menu a { padding: 0.5rem 1rem; white-space: nowrap; }
.hp-nav__lista .sub-menu a::after { display: none; }
.hp-nav__lista .sub-menu a:hover { background: var(--hp-azul-claro); }

/* --- Cuenta y carrito --- */
.hp-header__acciones { display: flex; align-items: center; gap: 0.4rem; }

.hp-icono-enlace,
.hp-carrito {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	color: var(--hp-azul);
	text-decoration: none;
	transition: background var(--hp-trans);
}

.hp-icono-enlace:hover,
.hp-carrito:hover { background: var(--hp-azul-claro); }

.hp-carrito__num {
	position: absolute;
	top: 2px; right: 0;
	min-width: 20px;
	height: 20px;
	padding-inline: 5px;
	background: var(--hp-amarillo);
	border-radius: 100px;
	color: var(--hp-azul);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

/* --- Botón de menú --- */
.hp-toggle {
	display: none;
	order: 3;
	width: 44px; height: 44px;
	background: transparent;
	border: 2px solid var(--hp-borde);
	border-radius: var(--hp-radio-sm);
	cursor: pointer;
	position: relative;
}

.hp-toggle__barras,
.hp-toggle__barras::before,
.hp-toggle__barras::after {
	position: absolute;
	left: 50%;
	width: 20px; height: 2px;
	background: var(--hp-azul);
	border-radius: 2px;
	transform: translateX(-50%);
	transition: transform var(--hp-trans), opacity var(--hp-trans);
}

.hp-toggle__barras { top: 50%; margin-top: -1px; }
.hp-toggle__barras::before { content: ""; top: -6px; left: 0; transform: none; }
.hp-toggle__barras::after  { content: ""; top: 6px; left: 0; transform: none; }

.hp-toggle[aria-expanded="true"] .hp-toggle__barras { background: transparent; }
.hp-toggle[aria-expanded="true"] .hp-toggle__barras::before { transform: translateY(6px) rotate(45deg); }
.hp-toggle[aria-expanded="true"] .hp-toggle__barras::after  { transform: translateY(-6px) rotate(-45deg); }

/* =============================================================
   6. HERO
   ============================================================= */
.hp-hero {
	position: relative;
	background-color: var(--hp-azul);
	background-image: var(--hp-hero);
	background-size: cover;
	background-position: center;
	color: var(--hp-blanco);
	isolation: isolate;
	padding-block: var(--hp-e-6);
	text-align: center;
}

.hp-hero__velo {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(27,58,107,0.82) 0%, rgba(27,58,107,0.92) 100%);
}

.hp-hero__inner { max-width: 760px; margin-inline: auto; }

.hp-hero__antetitulo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--hp-t-xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hp-amarillo);
	margin-bottom: var(--hp-e-2);
}

.hp-hero__titulo {
	font-size: var(--hp-t-xxl);
	color: var(--hp-blanco);
	margin-bottom: var(--hp-e-2);
	text-wrap: balance;
}

.hp-hero__texto {
	font-size: var(--hp-t-md);
	color: rgba(255,255,255,0.85);
	max-width: 54ch;
	margin-inline: auto;
	margin-bottom: var(--hp-e-4);
}

.hp-hero__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hp-e-2); }

/* =============================================================
   7. BARRA DE CONFIANZA
   ============================================================= */
.hp-confianza { background: var(--hp-crema); border-bottom: 1px solid var(--hp-borde); }

.hp-confianza__lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--hp-e-2);
	list-style: none;
	margin: 0;
	padding-block: var(--hp-e-3);
}

.hp-confianza__lista li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--hp-t-sm);
	color: var(--hp-piedra);
}

.hp-confianza__lista .hp-icono { color: var(--hp-amarillo); flex: none; }

/* =============================================================
   8. SECCIONES
   ============================================================= */
.hp-seccion { padding-block: var(--hp-e-6); }

.hp-cabecera { text-align: center; max-width: 620px; margin-inline: auto; margin-bottom: var(--hp-e-5); }

.hp-cabecera__antetitulo {
	font-size: var(--hp-t-xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hp-amarillo);
	margin-bottom: 0.5rem;
}

.hp-cabecera__titulo { font-size: var(--hp-t-xl); margin-bottom: 0.5rem; text-wrap: balance; }
.hp-cabecera__entradilla { font-size: var(--hp-t-md); color: var(--hp-suave); margin: 0; }

/* =============================================================
   9. CATÁLOGO DE LA PORTADA
   ============================================================= */
.hp-parches {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--hp-e-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hp-parche {
	display: flex;
	flex-direction: column;
	background: var(--hp-blanco);
	border: 1px solid var(--hp-borde);
	border-radius: var(--hp-radio);
	padding: var(--hp-e-2);
	transition: transform var(--hp-trans), box-shadow var(--hp-trans), border-color var(--hp-trans);
}

.hp-parche:hover { transform: translateY(-4px); border-color: var(--hp-azul); box-shadow: var(--hp-sombra); }

.hp-parche__enlace {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-decoration: none;
	color: inherit;
	text-align: center;
}

.hp-parche__foto {
	display: block;
	background: var(--hp-crema);
	border-radius: var(--hp-radio-sm);
	padding: var(--hp-e-2);
	margin-bottom: var(--hp-e-2);
}

.hp-parche__foto img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-parche:hover .hp-parche__foto img { transform: scale(1.05) rotate(-2deg); }

.hp-parche__nombre {
	font-family: var(--hp-titulo);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--hp-azul);
}

.hp-parche__lema {
	font-size: var(--hp-t-sm);
	color: var(--hp-suave);
	margin-block: 0.2rem 0.6rem;
	flex: 1;
}

.hp-parche__precio {
	font-family: var(--hp-titulo);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--hp-azul);
	margin-bottom: var(--hp-e-2);
}

.hp-parche__precio del { color: var(--hp-suave); font-weight: 400; font-size: 0.8em; margin-right: 0.3rem; }
.hp-parche__precio ins { text-decoration: none; }

.hp-parche .button { width: 100%; }

.hp-catalogo__pie { text-align: center; margin: var(--hp-e-4) 0 0; }

/* =============================================================
   10. MATERIAL
   ============================================================= */
.hp-material { background: var(--hp-crema); }

.hp-material__lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hp-e-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hp-punto {
	background: var(--hp-blanco);
	border: 1px solid var(--hp-borde);
	border-radius: var(--hp-radio);
	padding: var(--hp-e-3);
}

.hp-punto__icono {
	display: grid;
	place-items: center;
	width: 54px; height: 54px;
	background: var(--hp-azul-claro);
	border-radius: var(--hp-radio-sm);
	color: var(--hp-azul);
	margin-bottom: var(--hp-e-2);
}

.hp-punto__titulo { font-size: 1.2rem; margin-bottom: 0.4rem; }
.hp-punto__texto { font-size: var(--hp-t-sm); color: var(--hp-suave); margin: 0; }

/* =============================================================
   11. PERSONALIZADOS
   ============================================================= */
.hp-personalizados { background: var(--hp-blanco); }

.hp-personalizados__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hp-e-4);
	align-items: center;
	background: var(--hp-azul-claro);
	border-radius: var(--hp-radio);
	padding: var(--hp-e-4) var(--hp-e-3);
}

.hp-personalizados__texto { min-width: 0; }

.hp-personalizados__titulo { font-size: var(--hp-t-lg); margin-bottom: 0.6rem; }
.hp-personalizados__intro { color: var(--hp-suave); margin-bottom: var(--hp-e-3); }

.hp-pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; }

.hp-pasos li {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding-block: 0.6rem;
}

.hp-pasos li + li { border-top: 1px solid rgba(27,58,107,0.12); }

.hp-pasos__num {
	display: grid;
	place-items: center;
	width: 30px; height: 30px;
	background: var(--hp-amarillo);
	border-radius: 50%;
	color: var(--hp-azul);
	font-family: var(--hp-titulo);
	font-weight: 700;
	font-size: 0.9rem;
	flex: none;
}

.hp-pasos__texto { font-weight: 500; }

/* =============================================================
   12. MAYORISTA
   ============================================================= */
.hp-mayorista { background: var(--hp-azul); color: var(--hp-blanco); padding-block: var(--hp-e-5); }

.hp-mayorista__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hp-e-3);
	align-items: center;
}

.hp-mayorista__antetitulo {
	font-size: var(--hp-t-xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hp-amarillo);
	margin-bottom: 0.4rem;
}

.hp-mayorista__titulo { color: var(--hp-blanco); font-size: var(--hp-t-lg); margin-bottom: 0.5rem; }
.hp-mayorista__texto { color: rgba(255,255,255,0.78); margin: 0; max-width: 60ch; }

/* =============================================================
   13. WOOCOMMERCE
   ============================================================= */
.woocommerce .site-inner,
.woocommerce-page .site-inner {
	max-width: var(--hp-ancho);
	margin-inline: auto;
	padding: var(--hp-e-4) var(--hp-e-3) var(--hp-e-6);
}

.woocommerce .page-title,
.woocommerce-products-header__title {
	font-size: var(--hp-t-xl);
	margin-bottom: var(--hp-e-3);
}

.woocommerce-breadcrumb,
.breadcrumb {
	font-size: var(--hp-t-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hp-suave);
	margin-bottom: var(--hp-e-3);
}

/* --- Catálogo --- */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--hp-e-3);
	margin: 0;
	padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	background: var(--hp-blanco);
	border: 1px solid var(--hp-borde);
	border-radius: var(--hp-radio);
	padding: var(--hp-e-2);
	text-align: center;
	transition: transform var(--hp-trans), box-shadow var(--hp-trans), border-color var(--hp-trans);
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	border-color: var(--hp-azul);
	box-shadow: var(--hp-sombra);
}

.woocommerce ul.products li.product a img {
	background: var(--hp-crema);
	border-radius: var(--hp-radio-sm);
	padding: var(--hp-e-2);
	margin-bottom: var(--hp-e-2);
	aspect-ratio: 1;
	object-fit: contain;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--hp-titulo);
	font-size: 1.15rem !important;
	font-weight: 600;
	color: var(--hp-azul);
	padding: 0 !important;
	margin-bottom: 0.3rem;
}

.woocommerce ul.products li.product .price {
	font-family: var(--hp-titulo);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--hp-azul);
	margin-bottom: var(--hp-e-2);
	margin-top: auto;
}

.woocommerce ul.products li.product .button { width: 100%; margin: 0; }

.woocommerce ul.products li.product .onsale,
.hp-oferta {
	position: absolute;
	top: 0.8rem; left: 0.8rem;
	min-height: 0;
	min-width: 0;
	padding: 0.2rem 0.6rem;
	background: var(--hp-amarillo);
	border-radius: 100px;
	color: var(--hp-azul);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.6;
	margin: 0;
}

/* --- Ficha de producto --- */
.woocommerce div.product { display: grid; grid-template-columns: 1fr; gap: var(--hp-e-4); }

.woocommerce div.product div.images,
.woocommerce div.product div.summary { width: auto !important; float: none !important; margin: 0 !important; }

.woocommerce div.product div.images img {
	background: var(--hp-crema);
	border-radius: var(--hp-radio);
	padding: var(--hp-e-3);
}

.woocommerce div.product .product_title { font-size: var(--hp-t-xl); margin-bottom: 0.4rem; }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--hp-titulo);
	font-size: 2rem;
	font-weight: 700;
	color: var(--hp-azul);
	margin-bottom: var(--hp-e-2);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: var(--hp-t-md);
	color: var(--hp-suave);
	margin-bottom: var(--hp-e-3);
}

.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: var(--hp-e-3); }

.woocommerce .quantity .qty {
	width: 72px;
	height: 100%;
	min-height: 48px;
	padding: 0.5rem;
	border: 2px solid var(--hp-borde);
	border-radius: var(--hp-radio-sm);
	font-size: var(--hp-t-b);
	text-align: center;
}

.woocommerce div.product form.cart .button { flex: 1; min-width: 200px; }

/* Las garantías junto al botón: es donde se resuelve la duda del envío. */
.hp-garantias {
	list-style: none;
	margin: 0 0 var(--hp-e-3);
	padding: var(--hp-e-2);
	background: var(--hp-crema);
	border-radius: var(--hp-radio-sm);
}

.hp-garantias li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding-block: 0.35rem;
	font-size: var(--hp-t-sm);
	color: var(--hp-piedra);
}

.hp-garantias .hp-icono { color: var(--hp-verde); flex: none; margin-top: 0.2rem; }

.woocommerce div.product .product_meta {
	font-size: var(--hp-t-xs);
	color: var(--hp-suave);
	padding-top: var(--hp-e-2);
	border-top: 1px solid var(--hp-borde);
}

/* --- Pestañas --- */
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; }

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin-bottom: var(--hp-e-3);
	border-bottom: 1px solid var(--hp-borde);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0 1.5rem 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.7rem 0;
	font-family: var(--hp-titulo);
	font-weight: 600;
	color: var(--hp-suave);
	border-bottom: 3px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--hp-azul); border-bottom-color: var(--hp-amarillo); }

.woocommerce div.product .woocommerce-tabs .panel { max-width: 70ch; }

/* --- Relacionados --- */
.woocommerce .related > h2,
.woocommerce .up-sells > h2,
.woocommerce .cross-sells > h2 {
	font-size: var(--hp-t-lg);
	margin-block: var(--hp-e-5) var(--hp-e-3);
	text-align: center;
}

.woocommerce .related { grid-column: 1 / -1; }

/* --- Carrito y pago --- */
.hp-aviso-envio {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.8rem 1rem;
	background: var(--hp-crema);
	border-left: 3px solid var(--hp-amarillo);
	border-radius: var(--hp-radio-sm);
	font-size: var(--hp-t-sm);
	color: var(--hp-piedra);
}

.hp-aviso-envio .hp-icono { color: var(--hp-amarillo); flex: none; }

.woocommerce table.shop_table {
	border: 1px solid var(--hp-borde);
	border-radius: var(--hp-radio);
	border-collapse: separate;
}

.woocommerce table.shop_table th {
	font-family: var(--hp-titulo);
	color: var(--hp-azul);
}

.woocommerce-cart table.cart img { width: 64px; background: var(--hp-crema); border-radius: var(--hp-radio-sm); }

.woocommerce .cart-collaterals h2,
.woocommerce-checkout h3 { font-size: var(--hp-t-lg); }

.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 {
	padding: 0.75rem 0.9rem;
	border: 2px solid var(--hp-borde);
	border-radius: var(--hp-radio-sm);
	font: inherit;
	line-height: 1.4;
	height: auto;
}

.woocommerce form .form-row label { font-weight: 500; font-size: var(--hp-t-sm); }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--hp-azul);
	background: var(--hp-crema);
	border-radius: var(--hp-radio-sm);
}

.woocommerce-message::before,
.woocommerce-info::before { color: var(--hp-azul); }

.woocommerce-error { border-top-color: #C8442E; }

/* --- Carrito y pago por bloques ---
   WooCommerce sirve el carrito y el pago como bloques, no con las plantillas
   clásicas. Traen su propio sistema de estilos, así que se les pasan los
   colores de la marca por sus variables en vez de pelear con selectores. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	--wc-blocks-color-primary: var(--hp-azul);
	--wp--preset--color--primary: var(--hp-azul);
}

.wc-block-components-title,
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-checkout h2 {
	font-family: var(--hp-titulo);
	color: var(--hp-azul);
}

.wc-block-components-button:not(.is-link) {
	background: var(--hp-azul);
	border: 2px solid var(--hp-azul);
	border-radius: var(--hp-radio-sm);
	color: var(--hp-blanco);
	font-family: var(--hp-texto);
	font-weight: 600;
}

.wc-block-components-button:not(.is-link):hover {
	background: var(--hp-azul-alt);
	border-color: var(--hp-azul-alt);
	color: var(--hp-blanco);
}

.wc-block-components-checkout-place-order-button {
	background: var(--hp-amarillo);
	border-color: var(--hp-amarillo);
	color: var(--hp-azul);
}

.wc-block-components-checkout-place-order-button:hover {
	background: var(--hp-amarillo-alt);
	border-color: var(--hp-amarillo-alt);
	color: var(--hp-azul);
}

.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--hp-titulo);
	color: var(--hp-azul);
}

.wc-block-components-product-image img,
.wc-block-cart-item__image img {
	background: var(--hp-crema);
	border-radius: var(--hp-radio-sm);
}

.wc-block-components-text-input input:focus,
.wc-block-components-form .wc-block-components-text-input input:focus {
	box-shadow: 0 0 0 2px var(--hp-amarillo);
}

/* El aviso de envío va justo encima del bloque. */
.wp-block-woocommerce-cart .hp-aviso-envio,
.wp-block-woocommerce-checkout .hp-aviso-envio { margin-bottom: var(--hp-e-3); }

/* --- Formularios de Contact Form 7 --- */
.wpcf7-form p { margin-bottom: var(--hp-e-2); }

.wpcf7-form label { display: block; font-weight: 500; font-size: var(--hp-t-sm); margin-bottom: 0.3rem; }

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 2px solid var(--hp-borde);
	border-radius: var(--hp-radio-sm);
	font: inherit;
	background: var(--hp-blanco);
}

.wpcf7-form input[type="submit"] {
	background: var(--hp-amarillo);
	border: 2px solid var(--hp-amarillo);
	border-radius: var(--hp-radio-sm);
	color: var(--hp-azul);
	font-weight: 600;
	padding: 0.85rem 1.6rem;
	cursor: pointer;
}

.wpcf7-form input[type="submit"]:hover { background: var(--hp-amarillo-alt); border-color: var(--hp-amarillo-alt); }

/* =============================================================
   14. PIE
   ============================================================= */
.site-footer {
	background: var(--hp-azul);
	color: rgba(255,255,255,0.78);
	font-size: var(--hp-t-sm);
	padding-top: var(--hp-e-5);
}

.hp-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hp-e-4);
	padding-bottom: var(--hp-e-4);
}

.hp-footer__col { min-width: 0; }
.hp-footer__col--marca { max-width: 42ch; }

.hp-footer__nombre {
	display: block;
	font-family: var(--hp-titulo);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--hp-blanco);
	margin-bottom: 0.5rem;
}

.hp-footer__desc { color: rgba(255,255,255,0.6); }

.hp-footer__titulo {
	font-family: var(--hp-titulo);
	font-size: var(--hp-t-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hp-amarillo);
	margin-bottom: var(--hp-e-2);
}

.hp-footer__lista { list-style: none; margin: 0; padding: 0; }
.hp-footer__lista a { display: block; padding: 0.22rem 0; color: rgba(255,255,255,0.78); text-decoration: none; }
.hp-footer__lista a:hover { color: var(--hp-amarillo); }

.hp-redes { display: flex; gap: 0.6rem; list-style: none; margin: var(--hp-e-2) 0 0; padding: 0; }

.hp-redes a {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	border: 1px solid rgba(255,255,255,0.24);
	border-radius: var(--hp-radio-sm);
	color: var(--hp-blanco);
	transition: background var(--hp-trans), color var(--hp-trans), border-color var(--hp-trans);
}

.hp-redes a:hover { background: var(--hp-amarillo); border-color: var(--hp-amarillo); color: var(--hp-azul); }

.hp-footer__legal {
	padding-block: var(--hp-e-2);
	border-top: 1px solid rgba(255,255,255,0.16);
	font-size: var(--hp-t-xs);
	color: rgba(255,255,255,0.55);
	text-align: center;
}

.hp-footer__legal p { margin: 0; }

/* =============================================================
   15. PÁGINAS INTERIORES
   ============================================================= */
body:not(.hp-portada):not(.woocommerce):not(.woocommerce-page) .site-inner {
	max-width: 820px;
	margin-inline: auto;
	padding: var(--hp-e-5) var(--hp-e-3);
}

.entry-title { font-size: var(--hp-t-xl); }
.entry-content > *:last-child { margin-bottom: 0; }

.hp-404 { text-align: center; padding-block: var(--hp-e-5); }
.hp-404__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-top: var(--hp-e-3); }

/* --- Páginas de texto largo (privacidad, devoluciones, aviso legal) ---
   Nadie lee estas páginas de arriba abajo: se buscan un apartado concreto y
   quieren encontrarlo. Por eso los h2 llevan una regla encima que separa de
   verdad los bloques, y las listas respiran: se escanean, no se leen. */
.entry-content h2 {
	margin-top: var(--hp-e-4);
	padding-top: var(--hp-e-3);
	border-top: 1px solid var(--hp-borde);
	font-size: var(--hp-t-lg);
}

.entry-content h3 {
	margin-top: var(--hp-e-3);
	color: var(--hp-piedra);
	font-size: var(--hp-t-md);
}

.entry-content :is(ul, ol) { margin: 0 0 var(--hp-e-2); padding-left: 1.3rem; }
.entry-content :is(ul, ol) li { margin-bottom: 0.55rem; }
.entry-content li::marker { color: var(--hp-amarillo); font-weight: 700; }

/* La tabla de bases jurídicas es la única de estas páginas y en móvil no cabe:
   que se desplace ella sola antes que romper el ancho de la página. */
.entry-content .wp-block-table {
	margin: 0 0 var(--hp-e-3);
	overflow-x: auto;
}

.entry-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--hp-t-sm);
}

.entry-content .wp-block-table th {
	padding: 0.8rem 1rem;
	background: var(--hp-azul);
	border: 1px solid var(--hp-azul);
	color: var(--hp-blanco);
	font-family: var(--hp-texto);
	font-weight: 600;
	text-align: left;
}

.entry-content .wp-block-table td {
	padding: 0.8rem 1rem;
	border: 1px solid var(--hp-borde);
	line-height: 1.55;
	vertical-align: top;
}

.entry-content .wp-block-table tbody tr:nth-child(even) { background: var(--hp-crema); }

/* El formulario de desistimiento: se copia y se pega, así que va en caja
   aparte y en monoespaciada, para que se vea que es un impreso. */
.entry-content .wp-block-preformatted {
	margin: 0 0 var(--hp-e-3);
	padding: var(--hp-e-3);
	background: var(--hp-crema);
	border-left: 4px solid var(--hp-amarillo);
	border-radius: var(--hp-radio-sm);
	color: var(--hp-tinta);
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: var(--hp-t-sm);
	line-height: 1.7;
	overflow-x: auto;
	white-space: pre;
}

.entry-content em { color: var(--hp-suave); }

/* =============================================================
   16. FORMULARIOS
   -------------------------------------------------------------
   Etiquetas ENCIMA del campo, nunca flotantes. Las flotantes
   quedan bien en una captura, pero desaparecen mientras escribes,
   se pelean con el autorrelleno del navegador y dejan al lector
   de pantalla sin referencia. Aquí se marcan los campos
   OPCIONALES en vez de los obligatorios: casi todos lo son, así
   que la lista de asteriscos sería ruido.
   ============================================================= */
.hp-form {
	margin-top: var(--hp-e-4);
	padding: clamp(1.5rem, 4vw, 2.75rem);
	background: var(--hp-crema);
	border: 1px solid var(--hp-borde);
	border-radius: var(--hp-radio);
}

.hp-form__rejilla {
	display: grid;
	gap: 1.35rem 1.5rem;
}

.hp-campo { margin: 0; }
.hp-campo--ancho { grid-column: 1 / -1; }

.hp-campo > label {
	display: block;
	margin-bottom: 0.45rem;
	color: var(--hp-azul);
	font-size: var(--hp-t-sm);
	font-weight: 700;
	letter-spacing: 0.01em;
}

.hp-campo__op {
	margin-left: 0.35rem;
	color: var(--hp-suave);
	font-weight: 400;
	text-transform: none;
}

.hp-campo__ayuda {
	display: block;
	margin: 0.45rem 0 0;
	color: var(--hp-suave);
	font-size: var(--hp-t-sm);
	line-height: 1.5;
}

/* CF7 envuelve cada control en un span; sin esto el ancho no se propaga. */
.hp-form .wpcf7-form-control-wrap { display: block; }

.hp-form input[type="text"],
.hp-form input[type="email"],
.hp-form input[type="tel"],
.hp-form input[type="url"],
.hp-form input[type="number"],
.hp-form textarea,
.hp-form select {
	width: 100%;
	padding: 0.85rem 1rem;
	background: var(--hp-blanco);
	border: 1px solid var(--hp-borde);
	border-radius: var(--hp-radio-sm);
	color: var(--hp-tinta);
	font-family: var(--hp-texto);
	font-size: var(--hp-t-b);
	line-height: 1.5;
	transition: border-color var(--hp-trans), box-shadow var(--hp-trans);
}

.hp-form ::placeholder { color: #9AA5B1; opacity: 1; }

.hp-form :is(input, textarea, select):hover { border-color: var(--hp-piedra); }

.hp-form :is(input, textarea, select):focus {
	border-color: var(--hp-azul);
	box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.13);
}

/* El navegador pinta de amarillo el autorrelleno y se carga el diseño. */
.hp-form input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 40px var(--hp-blanco) inset;
	-webkit-text-fill-color: var(--hp-tinta);
}

/* CF7 pinta el textarea con rows="10" en el propio HTML: sin una altura
   explícita ocupa media pantalla y empuja el botón de enviar fuera de la
   vista, que es justo lo que no queremos que pase. */
.hp-form textarea {
	height: 165px;
	min-height: 120px;
	resize: vertical;
}

.hp-form select {
	appearance: none;
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6255' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.95rem center;
	background-size: 18px;
	cursor: pointer;
}

/* --- Adjunto ------------------------------------------------ */
.hp-form input[type="file"] {
	width: 100%;
	padding: 0.6rem;
	background: var(--hp-blanco);
	border: 1px dashed var(--hp-borde);
	border-radius: var(--hp-radio-sm);
	color: var(--hp-suave);
	font-family: var(--hp-texto);
	font-size: var(--hp-t-sm);
	cursor: pointer;
}

.hp-form input[type="file"]::file-selector-button {
	margin-right: 0.9rem;
	padding: 0.55rem 1rem;
	background: var(--hp-azul);
	border: 0;
	border-radius: var(--hp-radio-sm);
	color: var(--hp-blanco);
	font-family: var(--hp-texto);
	font-size: var(--hp-t-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--hp-trans);
}

.hp-form input[type="file"]:hover::file-selector-button { background: var(--hp-azul-alt); }

/* --- Consentimiento ----------------------------------------- */
.hp-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }

.hp-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	color: var(--hp-suave);
	font-size: var(--hp-t-sm);
	font-weight: 400;
	line-height: 1.55;
	cursor: pointer;
}

.hp-form input[type="checkbox"] {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.2rem 0 0;
	accent-color: var(--hp-azul);
	cursor: pointer;
}

/* --- Envío --------------------------------------------------- */
.hp-form__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.25rem;
	margin: var(--hp-e-3) 0 0;
	padding-top: var(--hp-e-3);
	border-top: 1px solid var(--hp-borde);
}

.hp-form input[type="submit"] {
	padding: 1.05rem 2rem;
	background: var(--hp-amarillo);
	border: 2px solid var(--hp-amarillo);
	border-radius: var(--hp-radio-sm);
	color: var(--hp-azul);
	font-family: var(--hp-texto);
	font-size: var(--hp-t-b);
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background var(--hp-trans), border-color var(--hp-trans), transform var(--hp-trans);
}

.hp-form input[type="submit"]:hover {
	background: var(--hp-amarillo-alt);
	border-color: var(--hp-amarillo-alt);
	transform: translateY(-2px);
}

.hp-form input[type="submit"]:disabled {
	background: var(--hp-crema-alt);
	border-color: var(--hp-borde);
	color: var(--hp-suave);
	transform: none;
	cursor: not-allowed;
}

.hp-form__nota {
	margin: 0;
	color: var(--hp-suave);
	font-size: var(--hp-t-sm);
	line-height: 1.5;
}

/* Mientras se envía: el botón deja de aceptar clics para que nadie mande el
   mismo formulario tres veces, y la rueda dice que algo está pasando. */
.wpcf7 form.submitting .hp-form__pie input[type="submit"] {
	opacity: 0.6;
	transform: none;
	pointer-events: none;
}

.hp-form .wpcf7-spinner {
	width: 20px;
	height: 20px;
	margin: 0;
	background: none;
	border: 2px solid rgba(27, 58, 107, 0.22);
	border-top-color: var(--hp-azul);
	border-radius: 50%;
	animation: hp-girar 0.7s linear infinite;
}

.hp-form .wpcf7-spinner::before { display: none; }

@keyframes hp-girar { to { transform: rotate(360deg); } }

/* --- Errores y respuesta ------------------------------------- */
.hp-form .wpcf7-not-valid {
	border-color: #C0392B;
	background: #FDF4F3;
}

.hp-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.45rem;
	color: #A82315;
	font-size: var(--hp-t-sm);
	font-weight: 600;
	line-height: 1.45;
}

.hp-form .wpcf7-response-output {
	margin: var(--hp-e-3) 0 0;
	padding: 1rem 1.15rem;
	border: 1px solid var(--hp-borde);
	border-radius: var(--hp-radio-sm);
	font-size: var(--hp-t-sm);
	line-height: 1.55;
}

.wpcf7 form.sent .hp-form.wpcf7-form .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output {
	border-color: #B7DFC7;
	background: #EFF8F3;
	color: #1D6B41;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	border-color: #EFC5BF;
	background: #FDF4F3;
	color: #A82315;
}

@media (min-width: 620px) {
	.hp-form__rejilla { grid-template-columns: 1fr 1fr; }
}

/* =============================================================
   17. ACCESIBILIDAD
   ============================================================= */
.genesis-skip-link { list-style: none; margin: 0; padding: 0; }
.genesis-skip-link li { height: 0; width: 0; list-style: none; }

.screen-reader-text, .screen-reader-shortcut {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.screen-reader-text:focus, .screen-reader-shortcut:focus {
	position: static !important;
	width: auto; height: auto;
	clip: auto; clip-path: none;
	display: block;
	padding: 0.8rem 1.2rem;
	background: var(--hp-amarillo);
	color: var(--hp-azul);
	font-weight: 700;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--hp-amarillo);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
	.hp-btn:hover, .hp-parche:hover, .woocommerce ul.products li.product:hover { transform: none; }
	.hp-parche:hover .hp-parche__foto img { transform: none; }
}

/* =============================================================
   18. RESPONSIVE
   ============================================================= */
@media (min-width: 600px) {
	.hp-confianza__lista { grid-template-columns: repeat(4, 1fr); }
	.hp-material__lista { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
	.hp-parches { grid-template-columns: repeat(4, 1fr); }
	.woocommerce ul.products { grid-template-columns: repeat(4, 1fr); }
	.woocommerce div.product { grid-template-columns: 1fr 1fr; align-items: start; }
	.hp-personalizados__inner { grid-template-columns: 1.3fr 1fr; padding: var(--hp-e-5) var(--hp-e-4); }
	.hp-mayorista__inner { grid-template-columns: 1fr auto; gap: var(--hp-e-4); }
	.hp-footer__inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
	.hp-footer__legal { text-align: left; }
}

/* --- Menú en móvil --- */
@media (max-width: 1023px) {

	.hp-toggle { display: block; position: relative; z-index: 300; }

	.hp-nav {
		position: fixed;
		inset: 0;
		z-index: 200;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: var(--hp-e-5) var(--hp-e-3);
		background: var(--hp-blanco);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), visibility 280ms;
		overflow-y: auto;
	}

	.hp-nav.is-abierto { transform: translateX(0); visibility: visible; }
	.hp-nav__lista { flex-direction: column; align-items: stretch; gap: 0; }

	.hp-nav__lista a {
		padding: 1rem 0;
		font-family: var(--hp-titulo);
		font-size: 1.35rem;
		border-bottom: 1px solid var(--hp-borde);
	}

	.hp-nav__lista a::after { display: none; }

	.hp-nav__lista .sub-menu {
		position: static;
		opacity: 1; visibility: visible; transform: none;
		min-width: 0; padding: 0 0 0 1.2rem;
		background: transparent; border: 0; box-shadow: none;
	}

	body.hp-menu-abierto { overflow: hidden; }
}

@media (max-width: 767px) {

	:root { --hp-cabecera: 108px; }

	.admin-bar .site-header { top: 46px; }

	.hp-header__inner { min-height: 70px; gap: var(--hp-e-2); }
	.hp-marca__nombre { font-size: 1.2rem; }

	.hp-hero__acciones .hp-btn { width: 100%; }

	.hp-confianza__lista { grid-template-columns: 1fr; gap: 0.5rem; }

	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--hp-e-2); }
	.hp-parches { gap: var(--hp-e-2); }

	.woocommerce div.product form.cart .button { min-width: 0; }
}

/* =============================================================
   19. IMPRESIÓN
   ============================================================= */
@media print {
	.site-header, .site-footer, .hp-mayorista, .hp-btn,
	.woocommerce .button, .hp-hero__acciones { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	.hp-seccion { padding-block: 1rem; }
	.hp-parche { break-inside: avoid; border: 1px solid #999; }
}