/* sections — hero, info bar, card grids, guarantees, empty states.
 *
 * The grids are separated by a 1px hairline: the wrapper takes the border
 * colour as its background and the cards sit on bone with a 1px gap. That is
 * how the approved design draws its lines, and it survives any number of cards.
 */

/* ---- Hero ---------------------------------------------------------------- */

.tci-hero {
	position: relative;
	height: 640px;
	background: var(--wp--preset--color--graphite);
	overflow: hidden;
}

.tci-hero__media {
	position: absolute;
	inset: 0;
	margin: 0;
}

.tci-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Scrim so the copy holds over any photo the workshop uploads. Without a photo
   it sits over plain graphite and is invisible, which is correct. */
.tci-hero__scrim {
	position: absolute;
	inset: 0;
	margin: 0;
	background: var(--tci-hero-scrim);
	pointer-events: none;
	z-index: 1;
}

.tci-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--tci-content-width);
	margin-inline: auto;
	padding-inline: var(--tci-gutter);
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 34px;
}

.tci-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 680px;
}

.tci-hero h1 {
	color: var(--wp--preset--color--bone);
}

.tci-hero p:not([class*="tci-eyebrow"]) {
	font-size: var(--wp--preset--font-size--lead, 19px);
	line-height: 1.65;
	color: var(--tci-on-graphite-2);
	max-width: 530px;
}

.tci-hero__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* Eyebrow with its red rule. The colour comes from its own style class —
   brass on graphite, red on bone — not from here. */
.tci-eyebrow-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.tci-eyebrow-row::before {
	content: "";
	width: 34px;
	height: var(--tci-rule);
	background: var(--wp--preset--color--red);
	flex: none;
}

/* ---- Info bar ------------------------------------------------------------ */

.tci-info-bar {
	background: var(--wp--preset--color--graphite-deep);
	border-top: var(--tci-hairline) solid var(--tci-hairline-dark);
}

.tci-info-bar__inner {
	max-width: var(--tci-content-width);
	margin-inline: auto;
	padding-inline: var(--tci-gutter);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.tci-info-bar__item {
	padding: 34px 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: var(--wp--preset--font-size--lg, 16px);
	color: var(--wp--preset--color--bone);
}

.tci-info-bar__item + .tci-info-bar__item {
	padding-left: 44px;
	border-left: var(--tci-hairline) solid var(--tci-hairline-dark);
}

/* The phone is a link. On the dark bar it is a data point, not a call to
   action — brand red here reads as an error. */
.tci-info-bar a {
	color: var(--wp--preset--color--bone);
	text-decoration: none;
}

.tci-info-bar a:hover {
	color: var(--wp--preset--color--brass);
}

/* ---- Section headers ----------------------------------------------------- */

.tci-section {
	max-width: var(--tci-content-width);
	margin-inline: auto;
	padding: var(--tci-section-space) var(--tci-gutter) 0;
}

.tci-section--last {
	padding-bottom: var(--tci-section-space);
}

.tci-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 44px;
}

.tci-section__title {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 600px;
}

/* ---- Hairline card grid -------------------------------------------------- */

/* The grid class goes on whatever element directly holds the cards. In a query
 * loop that is the post-template <ul>, not the query wrapper — putting it on
 * the wrapper gives one column holding a stacked list, which is exactly the
 * wrong shape. */
.tci-grid,
.is-style-tci-hairline-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--tci-hairline);
	background: var(--wp--preset--color--border);
	border: var(--tci-hairline) solid var(--wp--preset--color--border);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tci-grid--2 { grid-template-columns: repeat(2, 1fr); }
.tci-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Grid children: either a card directly, or the <li> the loop wraps it in.
 * blockGap would otherwise add a margin and break the 1px hairline. */
.tci-grid > * {
	margin: 0 !important;
}

.tci-grid > li {
	background: var(--wp--preset--color--bone);
	display: flex;
	list-style: none;
}

.tci-grid > li > .tci-card {
	width: 100%;
}

.tci-card,
.is-style-tci-card {
	background: var(--wp--preset--color--bone);
	padding: 38px 34px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 186px;
}

.tci-card__number {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--mono-sm, 11px);
	color: var(--wp--preset--color--red);
	margin: 0;
}

.tci-card :is(h2, h3, h4) {
	font-size: var(--wp--preset--font-size--card, 26px);
	line-height: 1.1;
	letter-spacing: 0.03em;
	margin: 0;
}

/* A linked title is still a title. Without this it inherits the brand red from
 * the link rule and every card shouts. */
.tci-card :is(h2, h3, h4) a {
	color: var(--wp--preset--color--graphite);
	text-decoration: none;
}

.tci-card :is(h2, h3, h4) a:hover {
	color: var(--wp--preset--color--red);
}

.tci-card p:not([class*="tci-eyebrow"]):not(.tci-label) {
	color: var(--wp--preset--color--text);
	margin: 0;
}

/* The query wrapper itself must stay out of the way. */
.tci-query {
	display: block;
	counter-reset: tci-service;
}

/* 01, 02, 03… on the service cards. A query loop cannot emit the number, so it
   is drawn with a counter — which also means it stays right if the workshop
   reorders the services from the editor. */
.tci-query .tci-grid > li {
	counter-increment: tci-service;
}

.tci-query .tci-grid > li > .tci-card::before {
	content: counter(tci-service, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--mono-sm, 11px);
	line-height: 1;
	color: var(--wp--preset--color--red);
}

/* Cards on a dark ground (guarantees block). */
.is-style-tci-block-graphite .tci-grid,
.is-style-tci-block-graphite-deep .tci-grid {
	background: var(--tci-hairline-dark);
	border-color: var(--tci-hairline-dark);
}

.is-style-tci-block-graphite .tci-card,
.is-style-tci-block-graphite-deep .tci-card {
	background: var(--wp--preset--color--graphite);
	color: var(--tci-on-graphite-2);
}

/* ---- Guarantees ---------------------------------------------------------- */

/* Open grid on bone, opened by a hairline. No cards and no numbering: this is
 * the block that closes the body, not another list. The service grid above it
 * is boxed, so repeating the boxes here would flatten the page. */
.tci-guarantees {
	border-top: var(--tci-hairline) solid var(--wp--preset--color--border);
	padding-top: 52px;
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.tci-guarantees > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.tci-guarantees__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 52px;
}

.tci-guarantee {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tci-guarantee > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Sin letter-spacing y sin `balance`, y las dos cosas por la misma razón:
 * la columna mide 346,7 px —(1240 − 96 de margen − 104 de gaps) / 3— y
 * «TE ENTREGAMOS LAS PIEZAS» a 30px mide 365,8 px con 0.03em de tracking y
 * 344,2 px sin él. Con tracking no cabe y se parte en dos líneas.
 *
 * Medido sobre el propio rajdhani-700.woff2, no estimado. */
.tci-guarantee h3 {
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--wp--preset--color--graphite);
	text-wrap: wrap;
}

.tci-guarantee p:not([class*="tci-eyebrow"]):not(.tci-label) {
	font-size: var(--wp--preset--font-size--md, 15px);
	line-height: 1.65;
	color: var(--wp--preset--color--text);
}

@media (max-width: 1024px) {
	.tci-guarantees__grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}
}

@media (max-width: 640px) {
	.tci-guarantees__grid {
		grid-template-columns: 1fr;
	}

	.tci-guarantee h3 {
		font-size: 24px;
	}
}

/* ---- Split: media one side, copy the other ------------------------------- */

.tci-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

/* Sin alto: la proporción la trae la propia foto desde inc/photos.php. Fijar
   aquí una altura crearía una segunda fuente de verdad y las dos se pelearían. */
.tci-split__media {
	width: 100%;
}

.tci-split__copy {
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: flex-start;
}

/* El antetítulo también es un <p>. Una regla de contenedor como
 * `.tci-split__copy p` tiene más especificidad que `.is-style-tci-eyebrow`, así
 * que si además fija el color se lo come y el rojo sale gris.
 *
 * Los contenedores dan tamaño y medida; el color de cada pieza lo pone su
 * propia clase. Donde el contenedor sí tiene que teñir —fondos oscuros— excluye
 * explícitamente a los antetítulos. */
.tci-split__copy p:not([class*="tci-eyebrow"]) {
	font-size: 17px;
	line-height: 1.7;
	max-width: 460px;
}

.tci-split__copy .wp-block-buttons {
	margin-top: 8px;
}

.tci-split__copy .wp-block-button__link {
	font-size: var(--wp--preset--font-size--lg, 16px);
	padding: 17px 32px;
}

@media (max-width: 860px) {
	.tci-split {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* ---- Contact details column ---------------------------------------------- */

/* Filas de dato, separadas por un filete. La primera la abre la regla de 2px
 * en grafito: marca dónde empieza la columna sin necesidad de un titular. */
.tci-contact-rows {
	display: flex;
	flex-direction: column;
}

.tci-contact-row {
	border-top: var(--tci-hairline) solid var(--wp--preset--color--border);
	padding: 26px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tci-contact-row:first-child {
	border-top: var(--tci-rule) solid var(--wp--preset--color--graphite);
}

.tci-contact-row__value,
.tci-contact-row__value p {
	font-size: var(--wp--preset--font-size--lead, 19px);
	line-height: 1.55;
	color: var(--wp--preset--color--graphite);
	margin: 0;
}

/* El teléfono y el Instagram son enlaces, pero aquí son datos: en rojo
 * competirían con el único botón rojo de la pantalla. */
.tci-contact-row__value a {
	color: var(--wp--preset--color--graphite);
}

.tci-contact-row__value a:hover {
	color: var(--wp--preset--color--red);
}

/* Horario: día a la izquierda, hora a la derecha, dentro de 400px. Más ancho y
 * los dos extremos dejan de leerse como una misma línea. */
.tci-hours {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tci-hours p {
	display: flex;
	justify-content: space-between;
	max-width: 400px;
}

.tci-hours--closed {
	color: var(--wp--preset--color--text-muted);
}

.tci-contact-actions {
	border-top: var(--tci-hairline) solid var(--wp--preset--color--border);
	padding-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.tci-contact-details {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tci-contact-details .tci-label {
	margin-top: 24px;
	color: var(--wp--preset--color--text-muted);
}

.tci-contact-details > .tci-label:first-child {
	margin-top: 0;
}

.tci-contact-details p:not([class*="tci-eyebrow"]):not(.tci-label) {
	font-size: var(--wp--preset--font-size--lg, 16px);
	color: var(--wp--preset--color--graphite);
}

.tci-contact-details__action {
	margin-top: 32px;
}

/* Closing band actions sit side by side. */
.tci-closing__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* Footer contact column, rendered from a PHP pattern. */
.tci-footer__column ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: var(--wp--preset--font-size--sm, 14px);
}

/* ---- Empty states -------------------------------------------------------- */

/* No photo uploaded: graphite ground with the monogram cut out.
 * It reads as intentional, not broken.
 *
 * Drawn as a background-image, not a mask. A mask that fails to resolve leaves
 * the veil covering the whole block and washes the graphite out to grey — the
 * failure mode is a ruined hero. A background-image that fails to load simply
 * does not appear, and the block stays clean graphite. */
.tci-media-empty {
	background-color: var(--wp--preset--color--graphite);
	position: relative;
	overflow: hidden;
}

/* The monogram goes on a pseudo-element, not on the box itself: a
 * background-image cannot be faded, and at full strength it reads as a logo
 * dropped in the hole rather than a watermark. 12% is the brand figure.
 *
 * Still fail-safe — if the SVG does not load, nothing paints and the block
 * stays clean graphite. */
.tci-media-empty::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--tci-monogram);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 160px auto;
	opacity: 0.12;
	pointer-events: none;
}

/* In the hero it sits off to the right, behind nothing and fighting no copy. */
.tci-hero.tci-media-empty::after {
	background-position: right 10% center;
	background-size: 340px auto;
}

/* ---- Photo slots ---------------------------------------------------------
 *
 * Every photo is a setting with a declared aspect ratio (see inc/photos.php).
 * The ratio is set inline per slot; everything else lives here.
 *
 * The ratio is the point: a portrait shot dropped into a landscape slot is
 * cropped from the centre instead of shoving the layout around. What the owner
 * uploads can never break the page.
 */

.tci-photo {
	position: relative;
	width: 100%;
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--border);
}

.tci-photo__img,
.tci-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Empty: dashed frame with the caption that says which photo goes here. */
.tci-photo--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(216, 212, 203, 0.35);
	border: var(--tci-hairline) dashed var(--wp--preset--color--text-muted);
}

.tci-photo__hint {
	max-width: 62%;
	text-align: center;
	font-size: var(--wp--preset--font-size--xs, 13px);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
}

.tci-photo__hint::before {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	margin: 0 auto 10px;
	background-color: var(--wp--preset--color--text-muted);
	-webkit-mask: var(--tci-photo-icon) center / contain no-repeat;
	mask: var(--tci-photo-icon) center / contain no-repeat;
}

/* The hero fills its band rather than keeping its own ratio: the band already
   has a height, and a second ratio fighting it would letterbox the photo. */
.tci-photo--cover {
	position: absolute;
	inset: 0;
	aspect-ratio: auto !important;
	background: transparent;
}

.tci-photo--cover.tci-photo--empty {
	border: 0;
	background: transparent;
}

/* On graphite the dashed frame reads as damage. The band's own monogram
   already covers the empty state there. */
.tci-hero .tci-photo__hint {
	display: none;
}

/* Team card with no portrait: initials in graphite. */
.tci-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--rajdhani);
	font-weight: 700;
	font-size: 64px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--graphite);
}

/* Brand grid with no logo: the name in Rajdhani. 24px with 0.08em of tracking,
 * measured off screen 03 — the widest of the eight reference brands is ACDELCO
 * at 101,4px in a cell of 284,7, so nothing is close to wrapping. */
.tci-brand-name {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-family: var(--wp--preset--font-family--rajdhani);
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--graphite);
}

/* ---- Small screens -------------------------------------------------------
 *
 * The gutter and the vertical rhythm already shrink through the tokens in
 * base.css. What is left here is what tokens cannot express: column counts,
 * fixed heights and the pieces that have to change shape.
 */

@media (max-width: 1024px) {
	/* The hero stops being a fixed 640px band and takes the height of its
	   copy — on a phone a fixed height either crops the text or leaves a
	   third of the screen empty. */
	.tci-hero {
		height: auto;
		min-height: 480px;
	}

	.tci-hero__inner {
		padding-block: 72px;
		gap: 28px;
	}

	/* With no room to sit beside the copy, the monogram goes behind it and
	   fades further so it never competes with the headline. */
	.tci-hero.tci-media-empty::after {
		background-position: center;
		background-size: 300px auto;
		opacity: 0.07;
	}

	.tci-grid,
	.is-style-tci-hairline-grid,
	.tci-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.tci-guarantees__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
	}

	.tci-split {
		grid-template-columns: 1fr;
		gap: 40px;
	}


	.tci-split__copy p:not([class*="tci-eyebrow"]) {
		max-width: none;
	}

	.tci-section__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		margin-bottom: 32px;
	}
}

@media (max-width: 640px) {
	.tci-hero {
		min-height: 420px;
	}

	.tci-hero__inner {
		padding-block: 56px;
		gap: 24px;
	}

	.tci-hero p:not([class*="tci-eyebrow"]) {
		font-size: var(--wp--preset--font-size--lg, 16px);
	}

	/* Full-width buttons stacked: two side by side at 360px leaves each one
	   too narrow to read its own label. */
	.tci-hero__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		width: 100%;
	}

	.tci-hero__actions > p,
	.tci-hero__actions .wp-block-buttons,
	.tci-hero__actions .wp-block-button {
		width: 100%;
		display: flex;
	}

	/* The info bar stacks; the vertical dividers become horizontal ones. */
	.tci-info-bar__inner {
		grid-template-columns: 1fr;
	}

	.tci-info-bar__item {
		padding: 22px 0;
	}

	.tci-info-bar__item + .tci-info-bar__item {
		padding-left: 0;
		border-left: 0;
		border-top: var(--tci-hairline) solid var(--tci-hairline-dark);
	}

	.tci-grid,
	.is-style-tci-hairline-grid,
	.tci-grid--2,
	.tci-grid--4 {
		grid-template-columns: 1fr;
	}

	.tci-card,
	.is-style-tci-card {
		padding: 28px 24px;
		min-height: 0;
	}

	.tci-guarantees {
		padding-top: 36px;
		gap: 32px;
	}

	.tci-guarantees__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.tci-guarantee h3 {
		font-size: 24px;
	}


	.tci-photo__hint {
		max-width: 80%;
		font-size: var(--wp--preset--font-size--xs, 13px);
	}

	.tci-contact-details p {
		font-size: var(--wp--preset--font-size--md, 15px);
	}
}

/* Landscape phone: a 480px-tall hero on a 380px-tall screen means the visitor
   never sees anything but the hero. */
@media (max-height: 500px) and (orientation: landscape) {
	.tci-hero {
		min-height: 0;
	}

	.tci-hero__inner {
		padding-block: 40px;
		gap: 20px;
	}

	.tci-hero h1 {
		font-size: 38px;
	}

	.tci-hero__actions {
		flex-direction: row;
		align-items: center;
		width: auto;
	}

	.tci-hero__actions > p,
	.tci-hero__actions .wp-block-buttons,
	.tci-hero__actions .wp-block-button {
		width: auto;
	}
}

/* ---- Page head (dark band under the header) ------------------------------
 *
 * Servicios, Repuestos and El taller open with this instead of the hero.
 * Measured off the design: 60px top, 72px bottom, 20px between the three
 * pieces, headline at 64px with line-height 1.
 */

.tci-page-head {
	background: var(--wp--preset--color--graphite);
}

.tci-page-head__inner {
	max-width: var(--tci-content-width);
	margin-inline: auto;
	padding: 60px var(--tci-gutter) 72px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.tci-page-head h1 {
	font-size: 64px;
	line-height: 1;
	letter-spacing: 0;
	color: var(--wp--preset--color--bone);
}

.tci-page-head p:not([class*="tci-eyebrow"]) {
	font-size: 18px;
	line-height: 1.65;
	color: var(--tci-on-graphite-2);
	max-width: 620px;
}

/* ---- Service rows --------------------------------------------------------
 *
 * 76px for the number, then two equal columns. Each row is closed by a
 * hairline; the last one is not, so the block does not end on a line that
 * belongs to nothing.
 *
 * The number is a CSS counter: a query loop cannot emit it, and this way it
 * stays right if the workshop reorders the services.
 */

.tci-services {
	max-width: var(--tci-content-width);
	margin-inline: auto;
	padding-inline: var(--tci-gutter);
}

.tci-service-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: tci-service-row;
}

.tci-service-list > li {
	counter-increment: tci-service-row;
	margin: 0;
}

.tci-service {
	display: grid;
	grid-template-columns: 76px 1fr 1fr;
	gap: 44px;
	align-items: start;
	padding: 52px 0;
	border-bottom: var(--tci-hairline) solid var(--wp--preset--color--border);
}

.tci-service-list > li:last-child .tci-service {
	border-bottom: 0;
}

.tci-service::before {
	content: counter(tci-service-row, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--xs, 13px);
	line-height: 1;
	color: var(--wp--preset--color--red);
	padding-top: 10px;
}

.tci-service__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Sin letter-spacing: el diseño pide 0.02em, pero «DIAGNÓSTICO COMPUTARIZADO»
 * mide entonces 494,8 px en una columna de 490 y se parte en dos líneas.
 * Sin tracking mide 475,8 y entra con 14 px de holgura.
 *
 * Medido sobre rajdhani-700.woff2, no estimado. */
.tci-service__body h2 {
	font-size: 38px;
	line-height: 1.05;
	letter-spacing: 0;
	color: var(--wp--preset--color--graphite);
}

.tci-service__body p {
	font-size: var(--wp--preset--font-size--lg, 16px);
	line-height: 1.7;
	color: var(--wp--preset--color--text);
	max-width: 440px;
}

.tci-service__aside {
	padding-top: 8px;
}

/* Alcance: guion rojo colgado, texto alineado a su izquierda. */
.tci-service__scope {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
	font-size: var(--wp--preset--font-size--md, 15px);
	line-height: 1.5;
	color: var(--wp--preset--color--text);
}

.tci-service__scope li {
	position: relative;
	padding-left: 28px;
	margin: 0;
}

.tci-service__scope li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--red);
}

@media (max-width: 1024px) {
	.tci-page-head h1 {
		font-size: 48px;
	}

	.tci-service {
		grid-template-columns: 56px 1fr;
		gap: 20px 28px;
		padding: 40px 0;
	}

	/* El alcance pasa debajo de la descripción, alineado con ella. */
	.tci-service__aside {
		grid-column: 2;
		padding-top: 0;
	}

	.tci-service__body h2 {
		font-size: 32px;
	}
}

@media (max-width: 640px) {
	.tci-page-head__inner {
		padding-block: 40px 48px;
		gap: 16px;
	}

	.tci-page-head h1 {
		font-size: 36px;
	}

	.tci-page-head p:not([class*="tci-eyebrow"]) {
		font-size: var(--wp--preset--font-size--lg, 16px);
	}

	.tci-service {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 32px 0;
	}

	.tci-service::before {
		padding-top: 0;
	}

	.tci-service__aside {
		grid-column: 1;
	}

	.tci-service__body h2 {
		font-size: 26px;
	}
}

/* ---- Inner-page bands ----------------------------------------------------
 *
 * The container the inner screens are built from: 1240 wide, gutter each side,
 * 88px of air above. Repuestos and El taller are stacks of these. All the
 * numbers below were read off `design/TCI Website.dc.html`, not guessed from
 * the render.
 */

.tci-band {
	max-width: var(--tci-content-width);
	margin-inline: auto;
	padding: var(--tci-band-space) var(--tci-gutter) 0;
}

.tci-band--last {
	padding-bottom: var(--tci-band-space);
}

/* Contacto abre más cerca de la cabecera: 76px contra los 88 del resto. */
.tci-band--tight {
	padding-top: 76px;
}

/* Sección que todavía no abre. Texto grande y poco: la página no está en
 * obras, simplemente no ha llegado, y no hace falta llenarla de nada. */
.tci-soon p {
	font-size: var(--wp--preset--font-size--lead, 19px);
	line-height: 1.65;
	max-width: 620px;
}

.tci-soon ul {
	max-width: 620px;
	margin: 0;
	padding-left: 20px;
}

.tci-soon li {
	font-size: var(--wp--preset--font-size--lg, 16px);
	line-height: 1.8;
}

.tci-soon li::marker {
	color: var(--wp--preset--color--red);
}

/* Brands: the hairline grid, cells 118px tall.
 *
 * .tci-grid already paints the 1px gaps and the surrounding border; the only
 * thing this adds is the cell height and centring. Height on the <li> and not
 * on its child, so a brand with a logo and a brand without one line up. */
.tci-brands > li {
	align-items: center;
	justify-content: center;
	height: 118px;
	padding: 18px 20px;
}

/* A logo never fills the cell: it sits inside it with air on all sides, the
 * way a distributor's artwork is meant to be used. */
.tci-brands .tci-brand__logo {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	object-fit: contain;
}

/* Part families: open grid, 28px apart, each card closed by its own hairline.
 * Deliberately not .tci-grid — that one shares a single border between cells,
 * and the design draws these separated. */
.tci-part-categories {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tci-part-category {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 32px 30px;
	border: var(--tci-hairline) solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--bone);
}

/* 28px with 0.03em of tracking. The longest family, «FILTROS Y ACEITES»,
 * measures 224,4px in a card of 302,7 — this one has room to spare, unlike the
 * service headings. */
.tci-part-category h3 {
	font-size: 28px;
	line-height: 1.1;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--graphite);
}

.tci-part-category p {
	font-size: var(--wp--preset--font-size--md, 15px);
	line-height: 1.75;
	color: var(--wp--preset--color--text);
}

/* ---- Quote block ---------------------------------------------------------
 *
 * Two columns on graphite. The grid itself comes from the block's own layout,
 * declared in the template — vertical centring is the one thing core's grid
 * layout has no attribute for, so it lives here.
 */

.tci-quote {
	align-items: center;
}

.tci-quote h2 {
	font-size: 42px;
	line-height: 1.04;
	letter-spacing: 0;
	color: var(--wp--preset--color--bone);
}

/* La regla de contenedor sobre `p` le gana al antetítulo por especificidad
 * (0,1,1 contra 0,1,0), así que se excluye — la misma trampa que en
 * .tci-split__copy. */
.tci-quote__copy p:not([class*="tci-eyebrow"]) {
	font-size: var(--wp--preset--font-size--lg, 16px);
	line-height: 1.7;
	color: var(--tci-on-graphite-2);
	max-width: 420px;
}

/* wpautop envuelve el botón del shortcode en un <p>, igual que en la banda de
 * cierre. Aquí ese párrafo es un hijo de una columna flex: sin align-self el
 * botón se estira a los 492px de la columna, y el diseño lo tiene pegado a la
 * izquierda con su ancho propio. */
.tci-quote__copy > p:has(.tci-button) {
	margin: 0;
	margin-top: 10px;
	align-self: flex-start;
}

/* Los tres pasos. Numeración en latón, no en rojo: sobre grafito el rojo se
 * apaga y el latón es el color de dato de la marca en fondo oscuro. */
.tci-quote__steps {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin: 0;
}

.tci-quote__steps > li {
	padding-left: 34px;
	margin: 0;
	font-size: var(--wp--preset--font-size--lg, 16px);
	line-height: 1.6;
	color: var(--wp--preset--color--bone);
}

.tci-quote__steps > li::before {
	font-size: 12px;
	color: var(--wp--preset--color--brass);
}

/* El filete va en un ::after y no en un border-top del hermano siguiente: con
 * border-top habría que empujar el `top` del contador por el padding, y el
 * número dejaría de estar alineado con su primera línea. */
.tci-quote__steps > li:not(:last-child)::after {
	content: "";
	display: block;
	height: var(--tci-hairline);
	margin-top: 22px;
	margin-left: -34px;
	background: var(--tci-hairline-dark);
}

@media (max-width: 1024px) {
	/* Cuatro marcas por fila en 768px dejan celdas de 175px: el logotipo de un
	   distribuidor no se lee a ese tamaño. */
	.tci-brands {
		grid-template-columns: repeat(3, 1fr);
	}

	.tci-brands > li {
		height: 96px;
	}

	.tci-part-categories {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	/* Ver la nota del bloque de 640px sobre el !important. */
	.tci-quote {
		padding: 44px 36px !important;
	}

	.tci-quote h2 {
		font-size: 34px;
	}
}

@media (max-width: 640px) {
	.tci-brands {
		grid-template-columns: repeat(2, 1fr);
	}

	.tci-part-categories {
		grid-template-columns: 1fr;
	}

	.tci-part-category {
		padding: 24px 22px;
	}

	.tci-part-category h3 {
		font-size: 22px;
	}

	/* La caja de cotización pasa a una columna.
	   El !important no es pereza: el padding llega como estilo en línea desde
	   el atributo del bloque, y las columnas y el hueco desde la regla que el
	   núcleo imprime para el layout de retícula, con la misma especificidad
	   que esta y más abajo en el documento. Sin él no gana ninguna. */
	.tci-quote {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
		padding: 32px 24px !important;
	}

	.tci-quote h2 {
		font-size: 28px;
	}
}

/* ---- Workshop page -------------------------------------------------------
 *
 * Screen 04. El proceso en cuatro pasos, las garantías —el mismo componente
 * que la portada— y la banda de quién firma las órdenes.
 */

/* 44px y no los 46 del h2 por defecto. Los dos splits del sitio no miden igual:
 * la portada usa 46, esta 44. Dos píxeles, pero medidos. */
.tci-split--workshop h2 {
	font-size: 44px;
}

/* El proceso. Las columnas y el hueco de 1px vienen del layout de retícula del
 * bloque; esto solo pinta el filete que los separa. */
.tci-process {
	background: var(--wp--preset--color--border);
	border: var(--tci-hairline) solid var(--wp--preset--color--border);
}

/* Las tarjetas del proceso son más altas y más estrechas de margen que las de
 * servicio: 36/30 contra 38/34, y 210 de alto contra 186. La diferencia es que
 * aquí hay cuatro columnas y allí tres. */
.tci-process > .tci-card {
	padding: 36px 30px;
	min-height: 210px;
}

/* ---- Team band -----------------------------------------------------------
 *
 * Retrato a la izquierda, nombre y cargo a la derecha, sobre grafito. Una
 * banda por persona: hoy solo Ricardo, pero la forma aguanta un segundo
 * mecánico sin rehacer nada.
 */

.tci-person {
	display: flex;
	align-items: center;
	gap: 44px;
	padding: 52px;
}

/* 160 fijos y que no se encoja: es la medida del diseño y un retrato que se
 * estruja deja de ser un retrato. */
.tci-person__media {
	width: 160px;
	height: 160px;
	flex: none;
}

.tci-person__portrait,
.tci-person__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tci-person__copy {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tci-person h2 {
	font-size: 36px;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--bone);
	margin: 0;
}

/* El cargo es Rajdhani 600, no 700: medio peso menos para que no compita con
 * el nombre que tiene encima. */
.tci-person__role {
	font-family: var(--wp--preset--font-family--rajdhani);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md, 15px);
	letter-spacing: 0.20em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass);
	margin: 0;
}

/* 6px extra sobre los 12 del hueco: el diseño separa la biografía del bloque
 * nombre + cargo, que se leen juntos. */
.tci-person__copy p:not(.tci-person__role) {
	font-size: var(--wp--preset--font-size--lg, 16px);
	line-height: 1.7;
	color: var(--tci-on-graphite-2);
	max-width: 560px;
	margin-top: 6px;
}

/* Sin retrato: las iniciales en grafito dentro del mismo cuadro de 160.
 * Nunca un avatar genérico, nunca un marco vacío. */
.tci-person .tci-initials {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--graphite-deep);
	border: var(--tci-hairline) solid var(--tci-hairline-dark);
	font-family: var(--wp--preset--font-family--rajdhani);
	font-weight: 700;
	font-size: 52px;
	letter-spacing: 0.04em;
	color: var(--tci-on-graphite-3);
}

@media (max-width: 1024px) {
	/* Cuatro pasos en 768px dan columnas de 190: el texto de «Se levanta la
	   orden de servicio…» sale en siete líneas. Dos filas de dos. */
	.tci-process {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.tci-split--workshop h2 {
		font-size: 34px;
	}

	.tci-person {
		gap: 32px;
		padding: 40px;
	}

	.tci-person h2 {
		font-size: 30px;
	}
}

@media (max-width: 640px) {
	.tci-process {
		grid-template-columns: 1fr !important;
	}

	.tci-process > .tci-card {
		min-height: 0;
		padding: 28px 24px;
	}

	.tci-split--workshop h2 {
		font-size: 28px;
	}

	/* El retrato se pone encima del nombre: de lado, en 320px, deja 116 para
	   «RICARDO BELLOSO». */
	.tci-person {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding: 32px 24px;
	}

	.tci-person h2 {
		font-size: 26px;
	}
}

/* ---- Contact page --------------------------------------------------------
 *
 * Screen 05. Datos y mapa arriba, formulario debajo.
 */

.tci-contact__map {
	align-self: start;
}

/* El formulario no es de dos columnas iguales: 340 fijos para el texto que lo
 * presenta y el resto para los campos. Con 1fr 1fr los campos quedan
 * estrechísimos y el intro, larguísimo. */
.tci-appointment {
	border-top: var(--tci-hairline) solid var(--wp--preset--color--border);
	padding-top: 56px;
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 64px;
	align-items: start;
}

.tci-appointment > * {
	margin: 0;
}

.tci-appointment__intro h2 {
	font-size: 42px;
	line-height: 1.04;
}

.tci-appointment__intro p:not([class*="tci-eyebrow"]) {
	font-size: var(--wp--preset--font-size--lg, 16px);
	line-height: 1.7;
	color: var(--wp--preset--color--text);
}

@media (max-width: 1024px) {
	/* El mapa debajo de los datos: en 768px, dos columnas dejan el mapa en 340
	   de ancho por 520 de alto, que es un pasillo, no un mapa. */
	.tci-contact {
		grid-template-columns: 1fr !important;
	}

	.tci-appointment {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.tci-appointment__intro h2 {
		font-size: 34px;
	}
}

@media (max-width: 640px) {
	.tci-band--tight {
		padding-top: var(--tci-band-space);
	}

	.tci-contact-row {
		padding: 20px 0;
	}

	/* Los dos botones a lo ancho: uno al lado del otro en 320px, «ESCRIBIR POR
	   WHATSAPP» se parte en dos líneas. */
	.tci-contact-actions .tci-button {
		flex: 1 1 100%;
	}

	.tci-appointment__intro h2 {
		font-size: 28px;
	}
}