/* ==========================================================================
   Autopartes Las Heras — estilos del theme

   Dirección: "el objeto, grande". Campos planos de color (fondo, tinta,
   verde de marca), una sola tipografía (Rubik), esquinas cuadradas, sin
   sombras ni degradados. Los escalones de tamaño y los colores salen de
   variables.css; acá no hay valores sueltos de color.

   Orden: base → botones → header → portada → franja → productos → pedido →
   alcance → pasos → nosotros → preguntas → contacto → pie → interiores →
   movimiento.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Que el header fijo no tape el título al saltar a un ancla. */
	scroll-padding-top: calc(var(--lh-header-h) + 8px);
}

body {
	margin: 0;
	font-family: var(--lh-font);
	font-size: var(--lh-fs-body);
	line-height: 1.55;
	color: var(--lh-ink);
	background: var(--lh-ground);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* clip y no hidden: hidden rompería el position: sticky de los hijos. */
	overflow-x: clip;
}

img,
svg,
iframe {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
address {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

address {
	font-style: normal;
}

:focus-visible {
	outline: 3px solid var(--lh-green);
	outline-offset: 3px;
}

/* Sobre verde, el anillo verde no se ve: va en tinta. */
.lh-scope__yes :focus-visible,
.lh-footer :focus-visible,
.lh-btn:focus-visible {
	outline-color: var(--lh-ink);
}

.lh-order__card :focus-visible,
.lh-about__panel :focus-visible,
.lh-facts :focus-visible,
.lh-scope__no :focus-visible {
	outline-color: var(--lh-green);
}

::selection {
	background: var(--lh-green);
	color: var(--lh-ink);
}

.lh-icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

.lh-h2 {
	font-size: var(--lh-fs-h2);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.lh-h3 {
	font-size: var(--lh-fs-h3);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.015em;
}

/* --------------------------------------------------------------------------
   Botones y enlaces: un solo formato (cuadrado, relleno verde, texto tinta)
   -------------------------------------------------------------------------- */

.lh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7em;
	min-height: 56px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--lh-radius);
	background: var(--lh-green);
	color: var(--lh-ink);
	font: inherit;
	font-size: var(--lh-fs-body);
	font-weight: 600;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--lh-dur-fast) var(--lh-ease), transform var(--lh-dur-fast) var(--lh-ease);
}

.lh-btn .lh-icon {
	transition: transform var(--lh-dur-fast) var(--lh-ease);
}

.lh-btn:hover {
	background: #66bb6a;
}

.lh-btn:hover .lh-icon--arrow {
	transform: translateX(5px);
}

.lh-btn:active {
	transform: translateY(2px);
}

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

.lh-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
	text-decoration-color: var(--lh-green);
	transition: text-decoration-color var(--lh-dur-fast) var(--lh-ease), color var(--lh-dur-fast) var(--lh-ease);
}

.lh-link:hover {
	text-decoration-color: currentColor;
}

.lh-link .lh-icon {
	transition: transform var(--lh-dur-fast) var(--lh-ease);
}

.lh-link:hover .lh-icon--arrow {
	transform: translateX(5px);
}

/* --------------------------------------------------------------------------
   Header: logotipo, menú, una acción. Barra plana.
   -------------------------------------------------------------------------- */

.lh-header {
	position: sticky;
	top: 0;
	z-index: var(--lh-z-header);
	background: var(--lh-ground);
}

/* Con la barra de administración visible (solo para quien edita), el header
   se pega debajo de ella y no detrás. */
.admin-bar .lh-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .lh-header {
		top: 46px;
	}
}

.lh-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.4vw, 40px);
	min-height: var(--lh-header-h);
	max-width: var(--lh-max);
	margin-inline: auto;
	padding-inline: var(--lh-gutter);
}

.lh-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-right: auto;
	/* El texto del logotipo original es #4caf50, que sobre el fondo claro da
	   2,5:1. En el encabezado va en el verde para texto (6:1); el isotipo
	   conserva el verde de marca exacto. */
	color: var(--lh-green-deep);
	text-decoration: none;
}

.lh-logo__mark {
	width: auto;
	height: 46px;
	aspect-ratio: 326 / 353;
}

.lh-logo__text {
	display: grid;
	gap: 1px;
	font-size: var(--lh-fs-body);
	line-height: 1;
	font-weight: 400;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.lh-logo__text b {
	font-weight: 900;
}

.lh-logo--custom img {
	width: auto;
	max-height: 52px;
}

.lh-nav {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.4vw, 40px);
}

.lh-nav__list {
	display: flex;
	gap: clamp(20px, 2.4vw, 36px);
}

.lh-nav__list a {
	font-weight: 500;
	text-decoration: none;
	text-underline-offset: 0.4em;
	text-decoration-thickness: 2px;
	text-decoration-color: transparent;
	transition: text-decoration-color var(--lh-dur-fast) var(--lh-ease);
}

/* Solo hover/foco: WordPress marca como "actual" cualquier enlace a la home
   con ancla (/#productos), y todos quedarían subrayados para siempre. */
.lh-nav__list a:hover,
.lh-nav__list a:focus-visible {
	text-decoration-line: underline;
	text-decoration-color: var(--lh-green);
}

.lh-nav__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.lh-nav__phone:hover {
	color: var(--lh-green-deep);
}

.lh-btn--header {
	min-height: 46px;
	padding: 0 18px;
}

.lh-menu-toggle {
	display: none;
	min-height: 46px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.lh-menu-toggle__close,
.lh-menu-toggle[aria-expanded="true"] .lh-menu-toggle__open {
	display: none;
}

.lh-menu-toggle[aria-expanded="true"] .lh-menu-toggle__close {
	display: inline;
}

/* Menú de pantalla completa en celular. Sin JS el botón no existe y los
   enlaces quedan visibles en una fila debajo del logotipo. */
@media (max-width: 959px) {
	.lh-nav__phone {
		display: none;
	}

	html:not(.js) .lh-header__inner {
		flex-wrap: wrap;
		padding-block: 12px;
	}

	html:not(.js) .lh-nav {
		order: 5;
		width: 100%;
	}

	html:not(.js) .lh-nav__list {
		flex-wrap: wrap;
	}

	.js .lh-menu-toggle {
		display: inline-flex;
		align-items: center;
	}

	.js .lh-nav {
		position: fixed;
		inset: var(--lh-header-h) 0 0 0;
		z-index: 1;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		gap: 32px;
		padding: 40px var(--lh-gutter) calc(32px + env(safe-area-inset-bottom));
		background: var(--lh-ink);
		color: var(--lh-white);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-12px);
		transition: opacity var(--lh-dur-fast) var(--lh-ease), transform var(--lh-dur-fast) var(--lh-ease), visibility 0s linear var(--lh-dur-fast);
	}

	.js .lh-nav.is-open {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	.js .lh-nav__list {
		flex-direction: column;
		gap: 12px;
	}

	.js .lh-nav__list a {
		font-size: var(--lh-fs-h2);
		font-weight: 800;
		letter-spacing: -0.03em;
		line-height: 1.05;
	}

	.js .lh-nav__phone {
		display: inline-flex;
		font-size: var(--lh-fs-h3);
		color: var(--lh-green);
	}

	html.lh-nav-open {
		overflow: hidden;
	}

	/* La barra de administración empuja el header hacia abajo: el panel
	   también (solo lo ve quien edita). */
	.js .admin-bar .lh-nav {
		inset-block-start: calc(var(--lh-header-h) + 46px);
	}

	/* El header no puede quedar detrás de su propio panel. */
	.lh-header {
		z-index: 200;
	}
}

@media (max-width: 479px) {
	.lh-logo__mark {
		height: 40px;
	}

	.lh-btn--header span {
		position: absolute;
		width: 1px;
		height: 1px; /* taste-skill-ignore: texto solo para lectores de pantalla, no es una línea */
		overflow: hidden;
		clip-path: inset(50%);
	}

	.lh-btn--header {
		padding: 0 14px;
	}
}

/* --------------------------------------------------------------------------
   Portada: el objeto, grande. Campo plano, el paragolpe cruza el borde.
   -------------------------------------------------------------------------- */

.lh-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 3vw, 48px) var(--lh-gutter) 0;
	overflow: clip;
}

.lh-hero__text {
	position: relative;
	z-index: 1;
	width: 100%;
	/* El hero ya tiene el padding de los márgenes: se descuentan para que el
	   titular caiga en el mismo borde izquierdo que el logo en pantallas anchas. */
	max-width: calc(var(--lh-max) - 2 * var(--lh-gutter));
	margin-inline: auto;
}

.lh-hero__title {
	max-width: 8.8em;
	font-size: var(--lh-fs-display);
	font-weight: 800;
	line-height: 0.92;
	letter-spacing: -0.045em;
	text-wrap: balance;
}

.lh-hero__lead {
	max-width: 34ch;
	margin-top: clamp(16px, 1.6vw, 28px);
	font-size: var(--lh-fs-h3);
	font-weight: 400;
	line-height: 1.3;
}

.lh-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 32px;
	margin-top: clamp(16px, 1.6vw, 28px);
}

.lh-hero__object {
	position: relative;
	/* Centrado y más ancho que la pantalla: el celular recorta los dos
	   costados del paragolpe, como la portada de escritorio recorta uno. */
	align-self: center;
	width: 165%;
	max-width: none;
	margin: 28px 0 -5%;
	/* El paragolpe es negro sobre el campo claro: sin sombra, es el contraste
	   entre la pieza y el fondo lo que la hace pesar. */
	pointer-events: none;
	-webkit-user-drag: none;
}

@media (min-width: 900px) {
	.lh-hero {
		min-height: min(calc(100svh - var(--lh-header-h)), 60rem);
	}

	.lh-hero__object {
		align-self: flex-end;
		width: 106vw;
		max-width: 2200px;
		margin: auto -15vw -3vw 0;
	}
}

/* Pantalla ancha (desde 1280 px, donde el titular entra en dos líneas junto a
   la columna): la bajada y la acción suben al costado del titular, a la
   altura de su segunda línea, y el vacío de arriba a la derecha queda cerrado. */
@media (min-width: 1280px) {
	.lh-hero__text {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 23rem;
		column-gap: var(--lh-gutter);
		align-items: end;
	}

	.lh-hero__side {
		padding-bottom: 0.6vw;
	}

	.lh-hero__lead {
		margin-top: 0;
		font-size: var(--lh-fs-body);
		line-height: 1.4;
	}
}

/* --------------------------------------------------------------------------
   Franja de hechos
   -------------------------------------------------------------------------- */

.lh-facts {
	position: relative;
	z-index: 1;
	background: var(--lh-ink);
	color: var(--lh-white);
}

.lh-facts__list {
	display: grid;
	gap: 28px 32px;
	max-width: var(--lh-max);
	margin-inline: auto;
	padding: clamp(36px, 4vw, 64px) var(--lh-gutter);
}

.lh-facts__list li {
	display: grid;
	gap: 4px;
	align-content: start;
}

.lh-facts__list strong {
	font-size: var(--lh-fs-h3);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.lh-facts__list span {
	color: var(--lh-on-ink-muted);
}

@media (min-width: 640px) {
	.lh-facts__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1100px) {
	.lh-facts__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Productos: foto fija + lista activa
   -------------------------------------------------------------------------- */

.lh-catalog {
	display: grid;
	max-width: var(--lh-max);
	margin-inline: auto;
	padding: var(--lh-section-y) var(--lh-gutter);
}

.lh-catalog__media {
	position: sticky;
	top: var(--lh-header-h);
	z-index: 2;
	height: 38svh;
	margin-inline: calc(-1 * var(--lh-gutter));
	/* position: sticky abre un contexto de apilado propio: el multiply de las
	   fotos solo ve lo que hay dentro de él. Sin este fondo (el mismo del
	   sitio) las fotos de fondo blanco se verían como cuadros blancos. */
	background: var(--lh-ground);
}

.lh-catalog__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Las fotos del cliente vienen con fondo blanco: multiply lo funde con
	   el campo y la pieza queda sola sobre la página. */
	mix-blend-mode: multiply;
	opacity: 0;
	transition: opacity var(--lh-dur-slow) var(--lh-ease);
}

.lh-catalog__img.is-active {
	opacity: 1;
}

.lh-catalog__title {
	margin-bottom: 24px;
}

.lh-list {
	padding-top: 20px;
}

.lh-list__item {
	padding-block: 14px;
	color: var(--lh-muted);
	transition: color var(--lh-dur-fast) var(--lh-ease), transform var(--lh-dur-fast) var(--lh-ease);
}

.lh-list__item.is-active {
	color: var(--lh-ink);
}

@media (min-width: 900px) {
	.lh-list__item.is-active {
		transform: translateX(12px);
	}
}

.lh-list__name {
	font-size: var(--lh-fs-h3);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.lh-list__item.is-active .lh-list__name {
	font-weight: 800;
}

/* El detalle se abre con la técnica de grid 0fr → 1fr: sin medir alturas en JS. */
.lh-list__more {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--lh-dur-fast) var(--lh-ease);
}

.lh-list__item.is-active .lh-list__more,
html:not(.js) .lh-list__more {
	grid-template-rows: 1fr;
}

.lh-list__more-inner {
	display: grid;
	gap: 14px;
	justify-items: start;
	overflow: hidden;
	max-width: min(36ch, 100%);
	opacity: 0;
	transition: opacity var(--lh-dur-fast) var(--lh-ease);
}

.lh-list__item.is-active .lh-list__more-inner,
html:not(.js) .lh-list__more-inner {
	padding-top: 10px;
	opacity: 1;
}

@media (min-width: 900px) {
	.lh-catalog {
		grid-template-columns: repeat(12, 1fr);
		column-gap: var(--lh-gutter);
		align-items: start;
	}

	/* El título y la lista van en la columna derecha; la foto fija ocupa las
	   dos filas de la izquierda, así que se queda pegada mientras corre la lista. */
	.lh-catalog__title {
		grid-column: 7 / span 6;
		grid-row: 1;
		margin-bottom: clamp(28px, 4vw, 56px);
	}

	.lh-catalog__media {
		grid-column: 1 / span 5;
		grid-row: 1 / span 2;
		top: calc(var(--lh-header-h) + 6vh);
		height: auto;
		aspect-ratio: 1;
		margin-inline: 0;
	}

	.lh-list {
		grid-column: 7 / span 6;
		grid-row: 2;
		padding-top: 0;
	}
}

/* --------------------------------------------------------------------------
   Pedí tu pieza: foto a pantalla completa con la tarjeta del formulario
   -------------------------------------------------------------------------- */

.lh-order {
	position: relative;
	background: var(--lh-ink);
	/* La foto entra con un zoom (scale 1.08 → 1): sin recorte desbordaría. */
	overflow: clip;
}

.lh-order__bg {
	width: 100%;
	height: 56svh;
	object-fit: cover;
	/* En celular el recorte angosto tiene que caer sobre el auto. */
	object-position: 86% 60%;
}

.lh-order__card {
	position: relative;
	margin: -72px var(--lh-gutter) 0;
	padding: 28px 24px 32px;
	background: var(--lh-ink);
	color: var(--lh-white);
}

.lh-order__title {
	color: var(--lh-white);
}

.lh-order__lead {
	margin-top: 12px;
	color: var(--lh-on-ink-muted);
}

.lh-form {
	display: grid;
	gap: 16px;
	margin-top: 24px;
}

.lh-field {
	display: grid;
	gap: 6px;
}

.lh-field label {
	font-size: var(--lh-fs-small);
	font-weight: 500;
	color: var(--lh-on-ink-muted);
}

.lh-field input,
.lh-field select {
	width: 100%;
	min-height: 54px;
	padding: 0 16px;
	border: 2px solid transparent;
	border-radius: var(--lh-radius);
	background: var(--lh-ink-soft);
	color: var(--lh-white);
	font: inherit;
	transition: border-color var(--lh-dur-fast) var(--lh-ease);
}

.lh-field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.25'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 20px;
	padding-right: 44px;
}

.lh-field select option {
	color: var(--lh-ink);
	background: var(--lh-white);
}

.lh-field input::placeholder {
	color: #8a938c;
}

.lh-field input:hover,
.lh-field select:hover {
	border-color: #38413a;
}

.lh-field input:focus,
.lh-field select:focus {
	border-color: var(--lh-green);
	outline: 0;
}

.lh-order__alt {
	margin-top: 20px;
	color: var(--lh-on-ink-muted);
}

.lh-order__alt a {
	color: var(--lh-white);
	font-weight: 600;
}

@media (min-width: 900px) {
	.lh-order {
		display: grid;
		align-items: center;
		min-height: min(100svh, 56rem);
	}

	.lh-order__bg {
		position: absolute;
		inset: 0;
		height: 100%;
		object-position: 62% 60%;
	}

	.lh-order__card {
		width: min(460px, calc(100% - 2 * var(--lh-gutter)));
		margin: clamp(48px, 6vw, 96px) 0 clamp(48px, 6vw, 96px) var(--lh-gutter);
		padding: 40px;
	}
}

/* --------------------------------------------------------------------------
   Qué vendemos / qué no vendemos: dos campos de color enteros
   -------------------------------------------------------------------------- */

.lh-scope {
	display: grid;
}

.lh-scope__yes,
.lh-scope__no {
	display: flex;
	flex-direction: column;
	gap: clamp(40px, 6vw, 96px);
	padding: var(--lh-section-y) var(--lh-gutter);
}

.lh-scope__yes {
	background: var(--lh-green);
	color: var(--lh-ink);
}

.lh-scope__no {
	background: var(--lh-ink);
	color: var(--lh-white);
}

.lh-scope__list {
	display: grid;
	gap: 14px;
	font-size: var(--lh-fs-h3);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.lh-scope__no .lh-scope__list {
	color: var(--lh-on-ink-muted);
}

.lh-scope__note {
	max-width: 34ch;
	margin-top: auto;
	color: var(--lh-on-ink-muted);
}

@media (min-width: 640px) {
	.lh-scope {
		grid-template-columns: 1fr 1fr;
	}

	.lh-scope__yes,
	.lh-scope__no {
		min-height: min(80svh, 46rem);
	}
}

/* --------------------------------------------------------------------------
   Cómo comprar: tres etapas, cada una más grande que la anterior
   -------------------------------------------------------------------------- */

.lh-steps {
	max-width: var(--lh-max);
	margin-inline: auto;
	padding: var(--lh-section-y) var(--lh-gutter);
}

.lh-steps__list {
	display: grid;
	gap: 48px;
	margin-top: clamp(32px, 5vw, 64px);
}

.lh-step {
	display: grid;
	gap: 12px;
	align-content: end;
}

.lh-step__tile {
	display: grid;
	place-items: center;
	background: var(--lh-tone);
	margin-bottom: 8px;
}

.lh-step--green .lh-step__tile {
	background: var(--lh-green);
}

.lh-step--white .lh-step__tile {
	background: var(--lh-white);
}

.lh-step__tile img {
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* En celular el orden se lee por la altura: 34, 46 y 62 vw. */
.lh-step:nth-child(1) .lh-step__tile { height: 62vw; }
.lh-step:nth-child(2) .lh-step__tile { height: 74vw; }
.lh-step:nth-child(3) .lh-step__tile { height: 90vw; }

.lh-step:nth-child(1) .lh-step__tile img { width: 70%; height: 70%; }
.lh-step:nth-child(2) .lh-step__tile img { width: 80%; height: 80%; }
.lh-step:nth-child(3) .lh-step__tile img { width: 90%; height: 90%; }

.lh-step__name {
	font-size: var(--lh-fs-h3);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.lh-step p {
	max-width: 34ch;
	color: var(--lh-muted);
}

@media (min-width: 900px) {
	.lh-steps {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		column-gap: 10px;
	}

	.lh-steps__title {
		grid-column: 1 / span 7;
		grid-row: 1;
		align-self: start;
		margin-bottom: 0;
	}

	.lh-steps__list {
		display: contents;
	}

	.lh-step {
		grid-row: 1;
		align-self: end;
		margin-top: 0;
	}

	.lh-step:nth-child(1) { grid-column: 1 / span 3; }
	.lh-step:nth-child(2) { grid-column: 4 / span 4; }
	.lh-step:nth-child(3) { grid-column: 8 / span 5; }

	.lh-step:nth-child(1) .lh-step__tile { height: 30vh; min-height: 200px; }
	.lh-step:nth-child(2) .lh-step__tile { height: 44vh; min-height: 280px; }
	.lh-step:nth-child(3) .lh-step__tile { height: 60vh; min-height: 360px; }

	.lh-step__name,
	.lh-step p {
		padding-right: 12px;
	}

	/* Mismo alto de texto en las tres etapas: así los pisos de las fotos no
	   quedan escalonados por la cantidad de renglones. */
	.lh-step p {
		min-height: 4.7em;
	}
}

/* --------------------------------------------------------------------------
   Nosotros: panel de tinta con la foto cortada en bisel
   -------------------------------------------------------------------------- */

.lh-about {
	padding: 0 var(--lh-gutter) var(--lh-section-y);
	max-width: calc(var(--lh-max) + 2 * var(--lh-gutter));
	margin-inline: auto;
}

.lh-about__panel {
	--lh-pad: clamp(28px, 4vw, 56px);

	display: grid;
	gap: 32px;
	overflow: hidden;
	padding: var(--lh-pad) var(--lh-pad) 0;
	background: var(--lh-ink-soft);
	color: var(--lh-white);
}

.lh-about__title {
	color: var(--lh-white);
	max-width: 12ch;
}

.lh-about__texts {
	display: grid;
	gap: 32px;
	align-content: start;
	justify-items: start;
}

.lh-about__sub {
	margin-bottom: 10px;
	font-size: var(--lh-fs-h3);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.lh-about__texts p {
	max-width: 36ch;
	color: var(--lh-on-ink-muted);
}

.lh-about__photo {
	width: 100%;
	height: auto;
	/* Bisel en la esquina superior izquierda: la forma sale de la
	   silueta de la carrocería, no es un adorno. */
	clip-path: polygon(0 14%, 14% 0, 100% 0, 100% 100%, 0 100%);
	/* La foto original es muy oscura; sobre el panel de tinta se perdería. */
	filter: brightness(1.3) contrast(1.05);
}

@media (min-width: 900px) {
	.lh-about__panel {
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: var(--lh-gutter);
		padding: var(--lh-pad) 0 var(--lh-pad) var(--lh-pad);
		min-height: min(78svh, 44rem);
	}

	.lh-about__title {
		grid-column: 1 / span 6;
		grid-row: 1;
		max-width: 14ch;
	}

	.lh-about__texts {
		grid-column: 1 / span 6;
		grid-row: 2;
	}

	/* La foto sangra contra los bordes de arriba, derecha y abajo del panel. */
	.lh-about__photo {
		grid-column: 7 / -1;
		grid-row: 1 / span 2;
		align-self: stretch;
		height: calc(100% + 2 * var(--lh-pad));
		margin-block: calc(-1 * var(--lh-pad));
		object-fit: cover;
		object-position: 45% 50%;
	}
}

/* --------------------------------------------------------------------------
   Preguntas: título ancho, preguntas con sangría
   -------------------------------------------------------------------------- */

.lh-faq {
	max-width: var(--lh-max);
	margin-inline: auto;
	padding: 0 var(--lh-gutter) var(--lh-section-y);
}

.lh-faq__title {
	margin-bottom: clamp(32px, 5vw, 80px);
}

.lh-faq__list {
	display: grid;
	gap: 12px;
}

.lh-faq__item {
	padding: 18px var(--lh-gutter);
	margin-inline: calc(-1 * var(--lh-gutter));
	transition: background-color var(--lh-dur-fast) var(--lh-ease);
}

.lh-faq__item[open] {
	background: var(--lh-tone);
}

.lh-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	font-size: var(--lh-fs-h3);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	cursor: pointer;
	list-style: none;
}

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

.lh-faq__item summary:hover {
	color: var(--lh-green-deep);
}

.lh-faq__item summary .lh-icon {
	width: 28px;
	height: 28px;
	transition: transform var(--lh-dur-fast) var(--lh-ease);
}

.lh-faq__item[open] summary .lh-icon {
	transform: scaleY(-1);
}

.lh-faq__item p {
	max-width: 52ch;
	margin-top: 14px;
	animation: lh-fade-in var(--lh-dur-slow) var(--lh-ease) both;
}

@media (min-width: 900px) {
	.lh-faq__item {
		padding-inline: 20px;
		margin-inline: -20px;
	}

	.lh-faq {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		column-gap: var(--lh-gutter);
	}

	.lh-faq__title {
		grid-column: 1 / -1;
		max-width: 14ch;
	}

	.lh-faq__list {
		grid-column: 5 / -1;
		gap: 20px;
	}
}

/* --------------------------------------------------------------------------
   Contacto: mapa a pantalla completa con tarjeta de visita
   -------------------------------------------------------------------------- */

.lh-contact {
	position: relative;
	background: var(--lh-ink);
}

.lh-contact__map {
	height: 62svh;
	background: var(--lh-tone);
}

.lh-contact__map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	/* El mapa en gris se integra a la paleta; con el cursor encima vuelve
	   a color, que es cuando se está usando. */
	filter: grayscale(1) contrast(1.05);
	transition: filter var(--lh-dur-slow) var(--lh-ease);
}

.lh-contact__map:hover iframe,
.lh-contact__map:focus-within iframe {
	filter: none;
}

.lh-contact__card {
	position: relative;
	display: grid;
	gap: 22px;
	margin: -80px var(--lh-gutter) var(--lh-section-y);
	padding: 28px 24px 32px;
	background: var(--lh-ground);
}

.lh-contact__address {
	font-size: var(--lh-fs-h3);
	font-weight: 500;
	line-height: 1.2;
}

.lh-contact__hours {
	display: grid;
	gap: 6px;
}

.lh-contact__channels {
	display: grid;
	gap: 12px;
}

.lh-contact__channels li,
.lh-contact__channels a {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lh-contact__channels a {
	font-weight: 600;
	text-decoration: none;
	word-break: break-word;
}

.lh-contact__channels a:hover {
	text-decoration: underline;
	text-decoration-color: var(--lh-green);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.lh-contact__channels .lh-icon {
	color: var(--lh-green-deep);
}

.lh-contact--nomap {
	padding-top: var(--lh-section-y);
}

.lh-contact--nomap .lh-contact__card {
	margin-top: 0;
}

@media (min-width: 900px) {
	.lh-contact {
		display: grid;
		align-items: start;
		justify-items: end;
		min-height: min(100svh, 56rem);
	}

	.lh-contact__map {
		position: absolute;
		inset: 0;
		height: auto;
	}

	.lh-contact__card {
		width: min(420px, calc(100% - 2 * var(--lh-gutter)));
		margin: clamp(32px, 5vw, 72px) var(--lh-gutter);
		padding: 36px;
	}

	.lh-contact--nomap {
		justify-items: start;
	}
}

/* --------------------------------------------------------------------------
   Pie: el nombre vuelve a ancho completo
   -------------------------------------------------------------------------- */

.lh-footer {
	overflow: clip;
	background: var(--lh-green);
	color: var(--lh-ink);
}

.lh-footer__inner {
	display: grid;
	gap: 48px;
	max-width: var(--lh-max);
	margin-inline: auto;
	padding: clamp(56px, 7vw, 120px) var(--lh-gutter) 0;
}

.lh-footer__menu {
	display: grid;
	gap: 6px;
}

.lh-footer__menu a {
	display: inline-block;
	font-size: var(--lh-fs-h2);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.035em;
	text-decoration: none;
	transition: transform var(--lh-dur-fast) var(--lh-ease);
}

.lh-footer__menu a:hover {
	transform: translateX(12px);
}

.lh-footer__contact {
	display: grid;
	gap: 20px;
	align-content: start;
}

.lh-footer__contact a {
	font-weight: 600;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

@media (min-width: 900px) {
	.lh-footer__inner {
		grid-template-columns: repeat(12, 1fr);
		column-gap: var(--lh-gutter);
	}

	.lh-footer__nav {
		grid-column: 1 / span 7;
	}

	.lh-footer__contact {
		grid-column: 9 / span 4;
	}
}

.lh-footer__wordmark {
	display: grid;
	margin: clamp(48px, 7vw, 120px) 0 0;
	padding-inline: var(--lh-gutter);
	color: var(--lh-ink);
	font-weight: 400;
	letter-spacing: -0.05em;
	line-height: 0.82;
	white-space: nowrap;
	user-select: none;
}

.lh-footer__wordmark b {
	font-weight: 900;
}

/* Cada línea se mide para ocupar justo el ancho del contenedor: a 100 px,
   LASHERAS mide 5,37 em y AUTOPARTES 6,53 em (con el tracking y los pesos
   aplicados). Se usa cqw y no vw porque 100vw incluye la barra de scroll. */
.lh-footer__wordmark {
	container-type: inline-size;
}

.lh-footer__wordmark span:nth-child(1) { font-size: 17.2vw; }
.lh-footer__wordmark span:nth-child(2) { font-size: 14.2vw; }

@supports (width: 1cqw) {
	.lh-footer__wordmark span:nth-child(1) { font-size: calc(100cqw / 5.46); }
	.lh-footer__wordmark span:nth-child(2) { font-size: calc(100cqw / 6.62); }
}

.lh-footer__legal {
	padding: 24px var(--lh-gutter) 40px;
	font-size: var(--lh-fs-small);
}

.lh-footer__legal a {
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Páginas interiores
   -------------------------------------------------------------------------- */

.lh-page {
	padding: clamp(40px, 6vw, 96px) var(--lh-gutter) var(--lh-section-y);
}

.lh-page__inner {
	max-width: 860px;
	margin-inline: auto;
}

.lh-page__title {
	margin-bottom: clamp(24px, 3vw, 48px);
}

.lh-page__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 32px;
	margin-top: 28px;
}

.lh-entry__meta {
	margin: -24px 0 32px;
	color: var(--lh-muted);
}

.lh-entry__thumb {
	margin-bottom: 40px;
}

.lh-prose > * + * {
	margin-top: 1.25em;
}

.lh-prose h2,
.lh-prose h3 {
	margin-top: 1.8em;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.lh-prose h2 {
	font-size: var(--lh-fs-h3);
}

.lh-prose a {
	color: var(--lh-green-deep);
	font-weight: 500;
}

.lh-prose ul,
.lh-prose ol {
	padding-left: 1.4em;
	list-style: revert;
}

.lh-prose img {
	height: auto;
}

.lh-posts {
	display: grid;
	gap: 48px;
	margin-top: 32px;
}

.lh-post__thumb {
	display: block;
	margin-bottom: 16px;
}

.lh-post__title a {
	text-decoration: none;
}

.lh-post__title a:hover {
	color: var(--lh-green-deep);
}

.lh-post__excerpt {
	margin-top: 10px;
	color: var(--lh-muted);
}

.lh-search {
	display: flex;
	gap: 12px;
	margin: 0 0 32px;
}

.lh-search input[type="search"] {
	flex: 1;
	min-height: 56px;
	padding: 0 16px;
	border: 2px solid var(--lh-ink);
	border-radius: var(--lh-radius);
	background: var(--lh-white);
	color: var(--lh-ink);
	font: inherit;
}

.navigation.pagination {
	margin-top: 56px;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nav-links .page-numbers {
	display: grid;
	place-items: center;
	min-width: 48px;
	min-height: 48px;
	padding: 0 12px;
	background: var(--lh-tone);
	font-weight: 600;
	text-decoration: none;
}

.nav-links .page-numbers.current {
	background: var(--lh-ink);
	color: var(--lh-white);
}

/* --------------------------------------------------------------------------
   Movimiento

   Todo es transform y opacity, con la escala de transitions.dev
   (variables.css). Cada animación de entrada solo oculta contenido si el JS
   marcó <html class="js">, y si el script no llega a correr, el timer de
   lh_js_flag() agrega .lh-no-reveal y todo se muestra.
   -------------------------------------------------------------------------- */

@keyframes lh-fade-in {
	from { opacity: 0; transform: translateY(6px); }
}

@keyframes lh-rise {
	from { opacity: 0; transform: translateY(var(--lh-reveal-distance)); }
}

@keyframes lh-slide-in {
	from { translate: 14vw 0; }
}

@keyframes lh-drift {
	to { transform: translate3d(5vw, 5vh, 0) scale(1.05); }
}

@media (prefers-reduced-motion: no-preference) {
	/* Portada: el titular, la bajada y la acción suben en escalera; el
	   paragolpe entra desde el borde. Es CSS puro, sin esperar al JS. */
	.lh-hero__title,
	.lh-hero__lead,
	.lh-hero__actions {
		animation: lh-rise var(--lh-dur-reveal) var(--lh-ease) both;
	}

	.lh-hero__lead { animation-delay: calc(var(--lh-stagger) * 1.5); }
	.lh-hero__actions { animation-delay: calc(var(--lh-stagger) * 3); }

	.lh-hero__object {
		animation: lh-slide-in 1000ms var(--lh-ease) both;
	}

	/* Al bajar, el paragolpe se corre y crece apenas: la pieza "pasa". */
	@supports (animation-timeline: scroll()) {
		.lh-hero__object {
			animation: lh-slide-in 1000ms var(--lh-ease) both, lh-drift linear both;
			animation-timeline: auto, scroll(root block);
			animation-range: normal, 0 70vh;
		}
	}

	/* Entrada de las partes de cada sección, una vez, escalonada. */
	.js [data-lh-reveal] {
		opacity: 0;
		transform: translateY(var(--lh-reveal-distance));
		transition: opacity var(--lh-dur-reveal) var(--lh-ease), transform var(--lh-dur-reveal) var(--lh-ease);
		transition-delay: calc(var(--lh-i, 0) * var(--lh-stagger));
	}

	.js [data-lh-reveal].is-in,
	.lh-no-reveal [data-lh-reveal] {
		opacity: 1;
		transform: none;
	}

	/* La tarjeta de la lista y los botones ya tienen su propio transition;
	   el reveal no debe pisarlo una vez que entraron. */
	.js .lh-list__item[data-lh-reveal].is-in,
	.js .lh-btn[data-lh-reveal].is-in {
		transition-delay: 0s;
	}

	/* Fotos: un zoom lento al entrar, como si se acercara la cámara. */
	.js .lh-order__bg,
	.js .lh-about__photo {
		scale: 1.08;
		transition: scale 1600ms var(--lh-ease);
	}

	.js .lh-order.is-in .lh-order__bg,
	.js .lh-about.is-in .lh-about__photo {
		scale: 1;
	}

	.lh-no-reveal .lh-order__bg,
	.lh-no-reveal .lh-about__photo {
		scale: 1;
	}
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}