/* ==========================================================================
   HORRILLO — base : tokens, fuentes, reset, tipografía, botones, formularios
   Fuente de verdad del diseño : design-system/MASTER.md
   ========================================================================== */

/* --- Fuentes autoalojadas (RGPD : nada de Google Fonts en directo) ----------
   Bitter (títulos, rótulo de madera / ferretería) · Barlow (texto e interfaz) · Barlow Condensed (precios y rótulos).
   Solo subconjunto latino : cubre el español completo (ñ, vocales con tilde, ¿ ¡, €, ·). Licencia SIL OFL 1.1 (ver assets/fonts). */
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/bitter-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/barlow-condensed-latin-800.woff2") format("woff2"); }
/* --- Tokens ------------------------------------------------------------------ */
:root {
	/* Acción : la brasa. Texto blanco sobre --brasa = 5,2:1 (AA). */
	--brasa: #C2410C;
	--brasa-oscura: #9A3412;
	--brasa-clara: #FB923C;      /* solo sobre fondos oscuros */
	--brasa-velo: #FFF1E6;
	--brasa-borde: #F6C9A4;
	--sobre-brasa: #FFFFFF;

	/* Neutros cálidos */
	--tinta: #1C1714;
	--tinta-suave: #4A403A;
	--tinta-terciaria: #756A62;
	--fondo: #FBF8F4;
	--superficie: #FFFFFF;
	--superficie-suave: #F4EEE6;
	--borde: #E6DDD2;
	--borde-fuerte: #D3C6B7;
	--borde-campo: #9E8D7B;

	/* Madera y corteza */
	--corteza: #2E2620;
	--madera: #8B5E3C;
	--madera-clara: #B08159;
	--madera-velo: #F6EFE7;

	/* Eco / confianza */
	--bosque: #2F6B3A;
	--bosque-velo: #E8F3EA;

	/* Estados */
	--exito: #2E7D32;
	--exito-velo: #E9F5EA;
	--aviso: #B45309;
	--aviso-velo: #FDF3E7;
	--error: #B3261E;
	--error-velo: #FDECEA;
	--info-velo: #EEF4FA;

	/* Tipografía */
	--titulo: "Bitter", Rockwell, "Roboto Slab", Georgia, "Times New Roman", serif;
	--texto: "Barlow", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", "Segoe UI", Arial, sans-serif;   /* precios, rótulos, etiquetas */

	/* Espacio, radios, sombras, capas */
	--e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem; --e7: 3rem; --e8: 4rem; --e9: 6rem;
	--radio-s: 6px; --radio-m: 10px; --radio-l: 16px; --radio-xl: 24px;
	--sombra-1: 0 1px 2px rgba(28, 23, 20, .06), 0 1px 3px rgba(28, 23, 20, .04);
	--sombra-2: 0 2px 4px rgba(28, 23, 20, .06), 0 4px 12px rgba(28, 23, 20, .06);
	--sombra-3: 0 8px 24px rgba(28, 23, 20, .10), 0 2px 6px rgba(28, 23, 20, .06);
	--z-sticky: 10; --z-cabecera: 20; --z-velo: 30; --z-cajon: 40; --z-mensaje: 50;
	--ancho: 1880px;
	--gutter: 1.25rem;
	--transicion: 180ms cubic-bezier(.2, 0, .2, 1);
	--alto-cabecera: 76px;
}

/* --- Reset ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabecera) + 1rem); }
body {
	margin: 0;
	background: var(--fondo);
	color: var(--tinta);
	font-family: var(--texto);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
main { flex: 1 0 auto; }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brasa-oscura); text-underline-offset: .18em; }
a:hover { color: var(--brasa); }
[hidden] { display: none !important; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--borde); margin: var(--e6) 0; }
address { font-style: normal; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
summary { cursor: pointer; }

/* --- Tipografía -------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--titulo); font-weight: 700; line-height: 1.15; letter-spacing: -.005em; margin: 0 0 var(--e3); color: var(--tinta); }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.15rem); }
h3 { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); }
h4 { font-size: 1.0625rem; }
/* Rótulo : mismo aspecto que un título, pero sin ser un encabezado (menús, filtros, pie de página : no deben ensuciar el esquema H1-H2 de la página). */
.rotulo { font-family: var(--titulo); font-weight: 700; line-height: 1.15; letter-spacing: -.005em; margin: 0 0 var(--e3); color: var(--tinta); }
p { margin: 0 0 var(--e4); }
ul, ol { margin: 0 0 var(--e4); padding-left: 1.25rem; }
strong, b { font-weight: 650; }
small { font-size: .875em; }
::selection { background: var(--brasa-borde); color: var(--tinta); }

/* --- Accesibilidad ----------------------------------------------------------- */
.salto {
	position: absolute; left: var(--e4); top: -100px; z-index: 999;
	background: var(--corteza); color: #fff; padding: .75rem 1.25rem; border-radius: var(--radio-m); text-decoration: none;
}
.salto:focus { top: var(--e3); }
:focus-visible { outline: 3px solid var(--brasa); outline-offset: 3px; border-radius: 3px; }
.solo-lectores, .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* --- Maqueta ------------------------------------------------------------------ */
.contenedor { width: 100%; max-width: calc(var(--ancho) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.contenedor--estrecho { max-width: calc(860px + var(--gutter) * 2); }
.seccion { padding-block: var(--e8); }
.seccion--suave { background: var(--superficie-suave); }
.seccion--madera { background: var(--madera-velo); }
.seccion__cabecera { max-width: 46rem; margin-bottom: var(--e6); }
.seccion__cabecera--centro { margin-inline: auto; text-align: center; }
.seccion__sobretitulo {
	display: inline-flex; align-items: center; gap: .5rem; margin-bottom: var(--e2);
	font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brasa-oscura);
}
.seccion__intro { color: var(--tinta-suave); font-size: 1.0625rem; margin: 0; }
@media (max-width: 720px) { .seccion { padding-block: var(--e7); } }

/* --- Botones ----------------------------------------------------------------- */
.boton, .hz-boton, .button, button.button, a.button, input[type="submit"].button {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	min-height: 48px; padding: .7rem 1.4rem;
	border: 1.5px solid var(--brasa); border-radius: var(--radio-m);
	background: var(--brasa); color: var(--sobre-brasa);
	font-family: var(--texto); font-size: 1rem; font-weight: 650; line-height: 1.2; text-decoration: none; text-align: center;
	cursor: pointer; transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion), box-shadow var(--transicion);
}
.boton:hover, .hz-boton:hover, .button:hover { background: var(--brasa-oscura); border-color: var(--brasa-oscura); color: var(--sobre-brasa); }
.boton:active, .button:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .2); }
.boton[disabled], .boton.is-cargando, .button.disabled, .button:disabled { opacity: .6; cursor: not-allowed; }
.boton--secundario, .hz-boton--secundario {
	background: transparent; color: var(--tinta); border-color: var(--borde-fuerte);
}
.boton--secundario:hover, .hz-boton--secundario:hover { background: var(--superficie-suave); border-color: var(--tinta-suave); color: var(--tinta); }
.boton--fantasma { background: transparent; border-color: transparent; color: var(--brasa-oscura); padding-inline: .6rem; }
.boton--fantasma:hover { background: var(--brasa-velo); border-color: transparent; color: var(--brasa-oscura); }
.boton--claro { background: #fff; color: var(--tinta); border-color: #fff; }
.boton--claro:hover { background: var(--brasa-velo); border-color: var(--brasa-velo); color: var(--tinta); }
.boton--contorno-claro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.boton--contorno-claro:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.boton--grande { min-height: 56px; padding: .9rem 1.8rem; font-size: 1.0625rem; }
.boton--bloque { display: flex; width: 100%; }
.boton--pequeno { min-height: 40px; padding: .45rem 1rem; font-size: .9375rem; }
.boton.is-cargando::after, .button.loading::after {
	content: ""; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
	animation: hz-giro .7s linear infinite;
}
@keyframes hz-giro { to { transform: rotate(360deg); } }

/* --- Formularios ------------------------------------------------------------- */
label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: .35rem; color: var(--tinta); }
label .obligatorio, label abbr.required { color: var(--error); text-decoration: none; margin-left: .15rem; }
label .opcional { font-weight: 400; color: var(--tinta-terciaria); font-size: .8125rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="url"],
select, textarea {
	width: 100%; min-height: 48px; padding: .7rem .9rem;
	background: var(--superficie); color: var(--tinta);
	border: 1.5px solid var(--borde-campo); border-radius: var(--radio-m);
	font-size: 1rem; line-height: 1.4; transition: border-color var(--transicion), box-shadow var(--transicion);
	-webkit-appearance: none; appearance: none;
}
select {
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234A403A'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5' stroke='%234A403A' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.1rem;
}
textarea { min-height: 120px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--tinta-terciaria); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--tinta-suave); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brasa); box-shadow: 0 0 0 3px rgba(194, 65, 12, .22); }
input[type="checkbox"], input[type="radio"] { width: 1.2rem; height: 1.2rem; min-height: 0; accent-color: var(--brasa); flex-shrink: 0; margin: 0; }
.campo { margin-bottom: var(--e4); }
.campo__ayuda { margin: .35rem 0 0; font-size: .8125rem; color: var(--tinta-terciaria); }
.campo__error {
	display: flex; align-items: flex-start; gap: .4rem; margin: .4rem 0 0;
	font-size: .875rem; font-weight: 550; color: var(--error);
}
.campo__error::before { content: "\f071"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .8125rem; margin-top: .1rem; }
.campo.has-error input, .campo.has-error select, .campo.has-error textarea,
.woocommerce-invalid input, .woocommerce-invalid select, .woocommerce-invalid .select2-selection { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.check { display: flex; align-items: flex-start; gap: .65rem; font-weight: 500; line-height: 1.45; }
.check input { margin-top: .2rem; }
.hp-campo { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Avisos ------------------------------------------------------------------- */
.aviso {
	display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1.1rem;
	border: 1px solid var(--borde); border-left-width: 4px; border-radius: var(--radio-m);
	background: var(--info-velo); font-size: .9375rem; margin-bottom: var(--e4);
}
.aviso > i { margin-top: .2rem; flex-shrink: 0; }
.aviso--exito { background: var(--exito-velo); border-color: #BFE0C1; border-left-color: var(--exito); }
.aviso--exito > i { color: var(--exito); }
.aviso--alerta { background: var(--aviso-velo); border-color: #F0D3AE; border-left-color: var(--aviso); }
.aviso--alerta > i { color: var(--aviso); }
.aviso--error { background: var(--error-velo); border-color: #F2C0BC; border-left-color: var(--error); }
.aviso--error > i { color: var(--error); }

/* --- Insignias ---------------------------------------------------------------- */
.insignia {
	display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px;
	font-size: .75rem; font-weight: 700; letter-spacing: .02em; line-height: 1.5;
	background: var(--superficie-suave); color: var(--tinta-suave); border: 1px solid var(--borde);
}
.insignia--oferta { background: var(--brasa); color: #fff; border-color: var(--brasa); }
.insignia--eco { background: var(--bosque-velo); color: var(--bosque); border-color: #BFDCC5; }
.insignia--exito { background: var(--exito-velo); color: var(--exito); border-color: #BFE0C1; }

/* --- Pastilla « dato pendiente » (datos de empresa sin informar) ------------- */
.hz-pendiente {
	background: var(--aviso-velo); color: var(--aviso); border: 1px dashed var(--aviso);
	border-radius: 4px; padding: 0 .35em; font-size: .92em; font-weight: 600;
}
.pie .hz-pendiente { background: rgba(180, 83, 9, .2); border-color: #E08A3C; color: #F0B27A; }