/* ==========================================================================
   Industrias Hadara — hoja de estilos del tema
   ========================================================================== */

:root {
	/* Colores tomados del logotipo oficial: azul #031B3D y naranja #FF6201. */
	--ink: #031b3d;
	--ink-2: #0a2649;
	--ink-3: #17385e;
	--accent: #ff6201;
	--accent-600: #d54e00;
	--accent-soft: #fff1e7;
	--brand-bg: #efefef;
	--whatsapp: #25d366;
	--whatsapp-600: #1da851;
	--text: #33414f;
	--muted: #6b7c8d;
	--line: #e3e9ef;
	--line-2: #eef2f6;
	--bg: #f4f7fa;
	--white: #fff;
	--radius: 14px;
	--radius-sm: 9px;
	--shadow-sm: 0 1px 2px rgba(22, 32, 44, .06), 0 2px 8px rgba(22, 32, 44, .05);
	--shadow-md: 0 4px 14px rgba(22, 32, 44, .08), 0 12px 32px rgba(22, 32, 44, .07);
	--container: 1220px;
	--gutter: 22px;
	--display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--white);
	color: var(--text);
	font-family: var(--body);
	font-size: 16.5px;
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--ink);
	text-decoration-color: rgba(22, 32, 44, .28);
	text-underline-offset: 3px;
}

a:hover {
	color: var(--accent-600);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--display);
	font-weight: 700;
	color: var(--ink);
	line-height: 1.1;
	letter-spacing: -.01em;
	margin: 0 0 .55em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.35rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.55rem); }
h4 { font-size: 1.2rem; }

p, ul, ol, table, figure, blockquote {
	margin: 0 0 1.15em;
}

ul, ol {
	padding-left: 1.15em;
}

.icon {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
}

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 12px 18px;
	background: var(--ink);
	color: var(--white);
	font-weight: 600;
}

.skip-link:focus {
	left: 12px;
	top: 12px;
	color: var(--white);
}

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

/* --------------------------------------------------------------- botones */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	padding: .78em 1.35em;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--ink);
	color: var(--white);
	font-family: var(--body);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.btn:hover {
	background: var(--ink-3);
	color: var(--white);
	transform: translateY(-1px);
}

.btn--accent {
	background: var(--accent);
	color: var(--ink);
}

.btn--accent:hover {
	background: var(--accent-600);
	color: var(--ink);
}

.btn--whatsapp {
	background: var(--whatsapp);
	color: #04331a;
}

.btn--whatsapp:hover {
	background: var(--whatsapp-600);
	color: #04331a;
}

.btn--ghost {
	background: transparent;
	border-color: var(--line);
	color: var(--ink);
}

.btn--ghost:hover {
	background: var(--bg);
	border-color: #cfd9e3;
	color: var(--ink);
}

.btn--sm {
	padding: .55em 1em;
	font-size: .84rem;
}

.btn--lg {
	padding: .95em 1.7em;
	font-size: 1.03rem;
}

.btn--block {
	width: 100%;
}

/* --------------------------------------------------------- barra superior */

.topbar {
	background: var(--ink);
	color: rgba(255, 255, 255, .82);
	font-size: .84rem;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 40px;
}

.topbar__claim {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: 0;
}

.topbar__claim .icon {
	color: var(--accent);
}

.topbar__phone {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	color: var(--white);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.topbar__phone:hover {
	color: var(--accent);
}

/* ---------------------------------------------------------------- cabecera */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--white);
	border-bottom: 1px solid var(--line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 76px;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
}

.site-logo__img {
	width: auto;
	height: 42px;
}

.site-logo__text {
	font-family: var(--display);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--ink);
	text-transform: uppercase;
}

.site-nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 26px;
	flex: 1 1 auto;
}

.site-nav .menu {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav .menu > li {
	position: relative;
}

.site-nav .menu > li > a {
	display: block;
	padding: .6em .8em;
	border-radius: var(--radius-sm);
	color: var(--ink);
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.site-nav .menu > li > a:hover,
.site-nav .menu > .current-menu-item > a,
.site-nav .menu > .current-menu-parent > a,
.site-nav .menu > .current_page_item > a {
	background: var(--bg);
	color: var(--ink);
}

.site-nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: .42em;
	height: .42em;
	margin-left: .5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.site-nav .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 20;
	min-width: 288px;
	margin: 0;
	padding: 8px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.site-nav .menu > li:hover > .sub-menu,
.site-nav .menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.site-nav .sub-menu a {
	display: block;
	padding: .55em .75em;
	border-radius: var(--radius-sm);
	color: var(--text);
	font-size: .92rem;
	text-decoration: none;
}

.site-nav .sub-menu a:hover {
	background: var(--bg);
	color: var(--ink);
}

.nav-toggle {
	display: none;
	margin-left: auto;
	width: 46px;
	height: 42px;
	padding: 0;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 20px;
	height: 2px;
	margin-inline: auto;
	background: var(--ink);
	transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: relative;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 4px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* ------------------------------------------------------------ migas de pan */

.breadcrumbs {
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	font-size: .85rem;
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45em;
	margin: 0;
	padding: 11px 0;
	list-style: none;
}

.breadcrumbs li + li::before {
	content: "/";
	margin-right: .45em;
	color: #aab6c2;
}

.breadcrumbs a {
	color: var(--muted);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--ink);
}

.breadcrumbs span {
	color: var(--ink);
	font-weight: 600;
}

/* --------------------------------------------------------------- secciones */

.section {
	padding: clamp(52px, 5vw, 88px) 0;
}

.section--bg {
	background: var(--bg);
}

.section--ink {
	background: var(--ink);
	color: rgba(255, 255, 255, .82);
}

.section--ink h2,
.section--ink h3 {
	color: var(--white);
}

.section__head {
	max-width: 720px;
	margin-bottom: clamp(28px, 3vw, 44px);
}

.section__head--center {
	margin-inline: auto;
	text-align: center;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin: 0 0 .8em;
	color: var(--accent-600);
	font-family: var(--body);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.section--ink .eyebrow {
	color: var(--accent);
}

.section__lead {
	margin: 0;
	color: var(--muted);
	font-size: 1.06rem;
}

.section--ink .section__lead {
	color: rgba(255, 255, 255, .72);
}

.section__foot {
	margin-top: clamp(26px, 3vw, 40px);
	text-align: center;
}

/* -------------------------------------------------------------------- hero */

/* El fondo repite el gris del banner de marca para que la fotografía del equipo
   se apoye en él sin que se note el recorte. */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--brand-bg);
	color: var(--text);
}

.hero__inner {
	display: grid;
	grid-template-columns: 1.06fr .94fr;
	align-items: end;
	gap: clamp(24px, 3.5vw, 52px);
	padding-top: clamp(40px, 4.5vw, 74px);
}

.hero__content {
	padding-bottom: clamp(44px, 5vw, 84px);
}

.hero h1 {
	margin-bottom: .5em;
}

.hero h1 .accent {
	color: var(--accent);
}

.hero__lead {
	max-width: 54ch;
	margin: 0 0 1.7em;
	font-size: clamp(1.02rem, .98rem + .25vw, 1.16rem);
	color: #4a5768;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 2em;
}

.hero__points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .92rem;
}

.hero__points li {
	display: flex;
	align-items: flex-start;
	gap: .5em;
	color: var(--ink);
	font-weight: 500;
}

.hero__points .icon {
	color: var(--accent);
	margin-top: .18em;
}

.hero__photo {
	align-self: end;
	justify-self: end;
	margin: 0;
	max-width: min(100%, 540px);
}

.hero__photo img {
	width: 100%;
	height: auto;
}

/* El arco azul del banner debe llegar al filo de la ventana, como en la pieza
   original: hasta el ancho del contenedor basta con sacar la foto del margen. */
@media (min-width: 981px) {
	.hero__inner {
		min-height: 520px;
	}

	.hero__photo {
		margin-right: calc(-1 * var(--gutter));
	}
}

/* Cuando el contenedor deja de crecer, la foto se ancla a la ventana. */
@media (min-width: 1220px) {
	.hero__photo {
		position: absolute;
		right: 0;
		bottom: 0;
		height: min(100%, 680px);
		max-width: 46%;
		margin-right: 0;
	}

	.hero__photo img {
		width: auto;
		height: 100%;
	}
}

/* -------------------------------------------------------- rejilla de líneas */

.line-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
	gap: 18px;
}

.line-card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.line-card:hover {
	border-color: #cfd9e3;
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.line-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 172px;
	padding: 16px;
	background: var(--bg);
}

.line-card__img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.line-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px 18px;
}

.line-card__title {
	font-family: var(--display);
	font-size: 1.18rem;
	font-weight: 700;
	line-height: 1.18;
	color: var(--ink);
}

.line-card:hover .line-card__title {
	color: var(--accent-600);
}

.line-card__count {
	color: var(--muted);
	font-size: .84rem;
}

/* ------------------------------------------------------ tarjetas de producto */

.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
	gap: 20px;
}

.card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.card:hover {
	border-color: #cfd9e3;
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 222px;
	padding: 18px;
	background: var(--bg);
}

.card__img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px 18px;
	flex: 1 1 auto;
}

.card__line {
	margin: 0;
	color: var(--accent-600);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.card__title {
	margin: 0;
	font-size: 1.14rem;
	line-height: 1.2;
}

.card__title a {
	text-decoration: none;
}

.card__meta {
	display: flex;
	align-items: center;
	gap: .4em;
	margin: 0;
	color: var(--muted);
	font-size: .86rem;
}

.card__meta .icon {
	color: #9aa8b6;
}

.card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 12px;
}

/* --------------------------------------------------------- características */

.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
	gap: 20px;
}

.feature {
	padding: 26px 24px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	background: var(--accent-soft);
	border-radius: 12px;
	color: var(--accent-600);
}

.feature__icon .icon {
	width: 22px;
	height: 22px;
}

.feature h3 {
	margin-bottom: .4em;
	font-size: 1.24rem;
}

.feature p {
	margin: 0;
	color: var(--muted);
	font-size: .95rem;
}

/* ------------------------------------------------------------------ pasos */

.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	counter-reset: paso;
	margin: 0;
	padding: 0;
	list-style: none;
}

.steps li {
	position: relative;
	padding: 26px 24px 24px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--radius);
}

.steps li::before {
	counter-increment: paso;
	content: counter(paso);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-bottom: 14px;
	background: var(--accent);
	border-radius: 50%;
	color: var(--ink);
	font-family: var(--display);
	font-size: 1.25rem;
	font-weight: 700;
}

.steps h3 {
	margin-bottom: .35em;
	font-size: 1.2rem;
}

.steps p {
	margin: 0;
	font-size: .94rem;
	color: rgba(255, 255, 255, .74);
}

/* ---------------------------------------------------------------- sectores */

.sector-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sector-list li {
	display: flex;
	align-items: flex-start;
	gap: .6em;
	padding: 16px 18px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	font-size: .95rem;
}

.sector-list .icon {
	color: var(--accent-600);
	margin-top: .2em;
}

.sector-list strong {
	display: block;
	color: var(--ink);
	font-family: var(--display);
	font-size: 1.12rem;
	font-weight: 700;
}

.sector-list span {
	color: var(--muted);
	font-size: .88rem;
}

/* --------------------------------------------------------------------- faq */

.faq {
	display: grid;
	gap: 12px;
	max-width: 860px;
	margin-inline: auto;
}

.faq details {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.faq details[open] {
	border-color: #cfd9e3;
	box-shadow: var(--shadow-sm);
}

.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 17px 20px;
	cursor: pointer;
	font-family: var(--display);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--ink);
	list-style: none;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: "+";
	flex: 0 0 auto;
	font-family: var(--body);
	font-size: 1.35rem;
	font-weight: 400;
	color: var(--accent-600);
	line-height: 1;
}

.faq details[open] summary::after {
	content: "−";
}

.faq details p {
	margin: 0;
	padding: 0 20px 20px;
	color: var(--muted);
	font-size: .96rem;
}

/* ---------------------------------------------------------------- cta band */

.cta-band {
	background: var(--accent);
	color: #24160b;
}

.cta-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	padding: clamp(30px, 3vw, 46px) var(--gutter);
}

.cta-band__title {
	margin: 0 0 .3em;
	color: var(--ink);
}

.cta-band__text {
	max-width: 62ch;
	margin: 0;
	color: #2c1c10;
	font-size: 1rem;
}

/* -------------------------------------------------------------------- pie */

.site-footer {
	background: var(--ink);
	color: rgba(255, 255, 255, .68);
	font-size: .93rem;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.15fr;
	gap: clamp(24px, 3vw, 44px);
	padding-top: clamp(44px, 4vw, 66px);
	padding-bottom: clamp(34px, 3vw, 50px);
}

.site-logo--light .site-logo__img {
	height: 40px;
}

.site-footer__about {
	margin: 18px 0 0;
	color: rgba(255, 255, 255, .62);
	font-size: .9rem;
}

.site-footer__title {
	margin: 0 0 14px;
	color: var(--white);
	font-size: 1.1rem;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.site-footer__list,
.site-footer__contact {
	display: grid;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__list a {
	color: rgba(255, 255, 255, .68);
	text-decoration: none;
}

.site-footer__list a:hover {
	color: var(--accent);
}

.site-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: .55em;
}

.site-footer__contact .icon {
	color: var(--accent);
	margin-top: .22em;
}

.site-footer__contact a {
	color: var(--white);
	font-weight: 600;
	text-decoration: none;
}

.site-footer__contact a:hover {
	color: var(--accent);
}

.site-footer .btn--whatsapp {
	margin-top: 18px;
}

.site-footer__bottom {
	background: #101821;
	border-top: 1px solid rgba(255, 255, 255, .07);
	font-size: .84rem;
}

.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 16px;
}

.site-footer__bottom p {
	margin: 0;
	color: rgba(255, 255, 255, .5);
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__legal a {
	color: rgba(255, 255, 255, .5);
	text-decoration: none;
}

.site-footer__legal a:hover {
	color: var(--accent);
}

/* ------------------------------------------------------- botón flotante wa */

.wa-float {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 80;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: 13px 18px;
	background: var(--whatsapp);
	border-radius: 999px;
	box-shadow: 0 8px 22px rgba(4, 51, 26, .3);
	color: #04331a;
	font-weight: 700;
	text-decoration: none;
}

.wa-float:hover {
	background: var(--whatsapp-600);
	color: #04331a;
}

.wa-float .icon {
	width: 24px;
	height: 24px;
}

/* -------------------------------------------------------- páginas internas */

.page-hero {
	padding: clamp(38px, 4vw, 62px) 0 clamp(26px, 3vw, 40px);
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}

.page-hero__inner {
	max-width: 800px;
}

.page-hero h1 {
	margin-bottom: .4em;
}

.page-hero__lead {
	margin: 0;
	color: var(--muted);
	font-size: 1.06rem;
}

.catalog-layout {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	gap: clamp(24px, 3vw, 44px);
	padding: clamp(34px, 4vw, 56px) 0;
}

.catalog-sidebar {
	align-self: start;
	position: sticky;
	top: 96px;
}

.catalog-sidebar__title {
	margin: 0 0 14px;
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.catalog-filter {
	display: grid;
	gap: 2px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.catalog-filter a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: .55em .7em;
	border-radius: var(--radius-sm);
	color: var(--text);
	font-size: .93rem;
	text-decoration: none;
}

.catalog-filter a:hover {
	background: var(--bg);
	color: var(--ink);
}

.catalog-filter .is-active a {
	background: var(--ink);
	color: var(--white);
	font-weight: 600;
}

.catalog-filter em {
	color: var(--muted);
	font-size: .8rem;
	font-style: normal;
}

.catalog-filter .is-active em {
	color: rgba(255, 255, 255, .6);
}

.catalog-aside-card {
	padding: 20px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.catalog-aside-card h3 {
	font-size: 1.15rem;
}

.catalog-aside-card p {
	color: var(--muted);
	font-size: .9rem;
}

.catalog-results {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
	color: var(--muted);
	font-size: .9rem;
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 34px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: .7em;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.pagination .page-numbers:hover {
	border-color: #cfd9e3;
	background: var(--bg);
}

.pagination .page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--white);
}

/* ------------------------------------------------------- ficha de producto */

.product {
	padding: clamp(34px, 4vw, 56px) 0;
}

.product__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(26px, 3.5vw, 54px);
	align-items: start;
}

.product__gallery {
	position: sticky;
	top: 96px;
}

.product__figure {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin: 0;
	padding: 26px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.product__zoom-stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: pan-y;
	cursor: zoom-in;
	user-select: none;
	overflow: hidden;
}

.product__zoom-stage--swipe {
	touch-action: pan-y;
	cursor: grab;
}

.product__zoom-stage--swipe:active {
	cursor: grabbing;
}

.product__figure img {
	display: block;
	max-height: 460px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: opacity .25s ease, transform .25s ease;
}

.product__figure img.is-swiping {
	animation: product-fade .28s ease;
}

@keyframes product-fade {
	from {
		opacity: .35;
		transform: scale(.985);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.product__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	color: var(--ink);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.product__nav:hover,
.product__nav:focus-visible {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--white);
	outline: none;
}

.product__nav .icon {
	width: 1.1rem;
	height: 1.1rem;
}

.product__nav--prev {
	left: 8px;
}

.product__nav--prev .icon {
	transform: scaleX(-1);
}

.product__nav--next {
	right: 8px;
}

.product__lens {
	position: absolute;
	z-index: 2;
	width: min(42%, 168px);
	aspect-ratio: 1;
	border: 2px solid var(--accent);
	border-radius: 50%;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, .85),
		0 12px 28px rgba(15, 23, 42, .22);
	pointer-events: none;
	background-color: var(--bg);
}

.product__zoom-stage.is-zooming {
	cursor: zoom-in;
}

.product__zoom-stage.is-zooming img {
	opacity: .92;
}

.product__zoom-hint {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45em;
	margin: 14px 0 0;
	color: var(--muted);
	font-size: .82rem;
	line-height: 1.35;
	text-align: center;
}

.product__zoom-hint .icon {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	color: var(--accent);
}

.product__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.product__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	padding: 8px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.product__thumb img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.product__thumb.is-active {
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent-soft);
}

.product__line {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	margin: 0 0 .9em;
	padding: .35em .8em;
	background: var(--accent-soft);
	border-radius: 999px;
	color: var(--accent-600);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-decoration: none;
	text-transform: uppercase;
}

.product h1 {
	margin-bottom: .4em;
}

.product__excerpt {
	margin: 0 0 1.5em;
	color: var(--muted);
	font-size: 1.06rem;
}

.product__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 1.4em;
}

.product__note {
	display: flex;
	align-items: flex-start;
	gap: .55em;
	margin: 0 0 1.8em;
	color: var(--muted);
	font-size: .88rem;
}

.product__note .icon {
	color: var(--accent-600);
	margin-top: .2em;
}

.specs {
	width: 100%;
	margin: 0 0 1.8em;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: .94rem;
}

.specs caption {
	padding: 13px 18px;
	background: var(--ink);
	color: var(--white);
	font-family: var(--display);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-align: left;
	text-transform: uppercase;
}

.specs th,
.specs td {
	padding: 11px 18px;
	text-align: left;
	vertical-align: top;
	border-top: 1px solid var(--line-2);
}

.specs tr:first-child th,
.specs tr:first-child td {
	border-top: 0;
}

.specs th {
	width: 42%;
	background: #fafcfd;
	color: var(--ink);
	font-weight: 600;
}

.prose h2 {
	margin-top: 1.6em;
	font-size: 1.6rem;
}

.prose h3 {
	margin-top: 1.4em;
}

.prose > :first-child {
	margin-top: 0;
}

.prose ul li {
	margin-bottom: .4em;
}

.prose a {
	font-weight: 500;
}

.product__description {
	margin-top: clamp(30px, 3vw, 46px);
	padding-top: clamp(26px, 3vw, 40px);
	border-top: 1px solid var(--line);
	max-width: 74ch;
}

/* -------------------------------------------------------- página estándar */

.page-content {
	padding: clamp(38px, 4vw, 62px) 0;
}

.page-content__inner {
	max-width: 78ch;
}

.contact-grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(26px, 3.5vw, 52px);
	align-items: start;
	padding: clamp(38px, 4vw, 62px) 0;
}

.contact-card {
	padding: clamp(24px, 3vw, 34px);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.contact-card ul {
	display: grid;
	gap: 14px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.contact-card li {
	display: flex;
	align-items: flex-start;
	gap: .65em;
}

.contact-card .icon {
	color: var(--accent-600);
	margin-top: .22em;
}

.contact-card strong {
	display: block;
	color: var(--ink);
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.contact-card a {
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.contact-card a:hover {
	color: var(--accent-600);
}

/* ------------------------------------------------------- búsqueda y errores */

.search-form {
	display: flex;
	gap: 8px;
	max-width: 460px;
}

.search-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: .72em 1em;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--text);
	font: inherit;
	font-size: .95rem;
}

.search-form input[type="search"]:focus {
	border-color: var(--accent);
	outline: none;
}

.entry-list {
	display: grid;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry-card {
	padding: 22px 24px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.entry-card h2 {
	margin-bottom: .35em;
	font-size: 1.4rem;
}

.entry-card h2 a {
	text-decoration: none;
}

.entry-card p {
	margin: 0;
	color: var(--muted);
	font-size: .95rem;
}

.notice {
	padding: 22px 24px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--muted);
}

/* ------------------------------------------------------------ adaptaciones */

@media (max-width: 1080px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.catalog-layout {
		grid-template-columns: 232px minmax(0, 1fr);
	}
}

@media (max-width: 980px) {
	.hero__inner {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.hero__content {
		padding-bottom: clamp(24px, 4vw, 40px);
	}

	/* Sin columna lateral la fotografía se pega al filo derecho: así el arco de
	   la marca no deja una franja de fondo suelta. */
	.hero__photo {
		justify-self: end;
		max-width: 440px;
		margin-right: calc(-1 * var(--gutter));
	}

	.product__top {
		grid-template-columns: 1fr;
	}

	.product__gallery,
	.catalog-sidebar {
		position: static;
	}

	.contact-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 860px) {
	.nav-toggle {
		display: block;
		order: 3;
	}

	.site-header__inner {
		flex-wrap: wrap;
		gap: 12px;
	}

	.site-nav {
		display: none;
		order: 4;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding-bottom: 18px;
		border-top: 1px solid var(--line);
		padding-top: 14px;
	}

	.site-nav.is-open {
		display: flex;
	}

	.site-nav .menu {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.site-nav .menu > li > a {
		padding: .7em .6em;
	}

	.site-nav .sub-menu {
		position: static;
		min-width: 0;
		margin: 2px 0 6px 12px;
		padding: 4px;
		border-radius: var(--radius-sm);
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav__cta .btn {
		width: 100%;
	}

	.catalog-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	/* En móvil el listado de líneas se vuelve una fila de fichas desplazable:
	   en columna empujaba las referencias muy por debajo del pliegue. */
	.catalog-filter {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 6px;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.catalog-filter li {
		flex: 0 0 auto;
	}

	.catalog-filter a {
		border: 1px solid var(--line);
		border-radius: 999px;
		white-space: nowrap;
	}

	.catalog-filter em {
		display: none;
	}

	.catalog-aside-card {
		display: none;
	}

	.topbar__claim {
		display: none;
	}

	.topbar__inner {
		justify-content: center;
	}
}

@media (max-width: 640px) {
	body {
		font-size: 16px;
	}

	.hero__points {
		grid-template-columns: 1fr;
	}

	.hero__photo {
		max-width: 320px;
	}

	.site-footer__grid {
		grid-template-columns: 1fr;
	}

	.product-grid,
	.line-grid {
		grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
		gap: 14px;
	}

	.card__media {
		height: 168px;
		padding: 12px;
	}

	.card__body {
		padding: 13px 14px 15px;
	}

	.card__title {
		font-size: 1.03rem;
	}

	.card__actions .btn {
		flex: 1 1 auto;
	}

	.line-card__media {
		height: 132px;
	}

	.wa-float__label {
		display: none;
	}

	.wa-float {
		padding: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}