/*
 * HB Web — lo que Elementor no resuelve con sus controles.
 * Todo lo demás (colores, tipografías, tamaños, paddings, responsive) está en el JSON.
 * Las clases se asignan en Avanzado → Clases CSS de cada elemento.
 */

/* ── base de la página ─────────────────────────────────────────────── */
body.hb-web { background: #F3F1EE; }
body.hb-web .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
body.hb-web .elementor-widget-text-editor p { margin-top: 0; }
body.hb-web a { transition: color .15s; }

/* naranja dentro de un título (Hacemos que <span>suceda</span>) */
.hb-naranja { color: #E8641A; }

/* antetítulo con los /// del logo */
.hb-ante .elementor-heading-title::before {
	content: "///";
	font-style: italic;
	letter-spacing: -.05em;
	margin-right: 10px;
}

/* botones con la esquina cortada */
.hb-btn .elementor-button {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
	transition: background-color .15s, transform .15s;
}
.hb-btn .elementor-button:hover { transform: translateY(-2px); }

/* ── barra y header ────────────────────────────────────────────────── */
.hb-barra a { color: inherit; text-decoration: underline; }
.hb-header { position: sticky; top: 0; z-index: 99; }
.admin-bar .hb-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .hb-header { top: 0; } }

/* ── hero ──────────────────────────────────────────────────────────── */
.hb-hero {
	background-image:
		radial-gradient(900px 500px at 85% 20%, rgba(232, 100, 26, .20), transparent 60%),
		repeating-linear-gradient(115deg, transparent 0 38px, rgba(255, 255, 255, .025) 38px 40px);
}
.hb-card { position: relative; }
.hb-card::before {
	content: "";
	position: absolute;
	top: -10px;
	left: -10px;
	width: 90px;
	height: 90px;
	border-top: 4px solid #E8641A;
	border-left: 4px solid #E8641A;
	z-index: 2;
	pointer-events: none;
}

/* ── cifras ────────────────────────────────────────────────────────── */
.hb-cifra { border-right: 1px solid rgba(255, 255, 255, .1); }
.hb-cifra:last-child { border-right: 0; }
@media (max-width: 1024px) {
	.hb-cifra:nth-child(2) { border-right: 0; }
	.hb-cifra:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .1); }
}

/* ── servicios: número grande de fondo con un contador ─────────────── */
.hb-servicios { counter-reset: hbserv; }
.hb-serv { counter-increment: hbserv; position: relative; transition: background-color .15s; }
.hb-serv::after {
	content: counter(hbserv, decimal-leading-zero);
	position: absolute;
	top: 22px;
	right: 24px;
	font: 800 34px/1 "Barlow Condensed", sans-serif;
	color: #E9E5DF;
	pointer-events: none;
}
.hb-serv:hover > .elementor-widget-wrap,
.hb-serv:hover > .elementor-column-wrap { background-color: #FFFAF6 !important; }
.hb-mas {
	display: inline-block;
	margin-top: 12px;
	font: 700 16px "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #E8641A !important;
	text-decoration: none !important;
}
.hb-chip {
	display: inline-block;
	margin: 4px 6px 4px 0;
	padding: 6px 14px;
	background: #fff;
	border: 1px solid #DCD8D2;
	font-weight: 600;
	color: #333;
}

/* ── trabajos: etiquetas Antes / Después ───────────────────────────── */
.hb-ad { position: relative; }
.hb-ad::before {
	position: absolute;
	top: 28px;
	left: 28px;
	z-index: 3;
	padding: 7px 16px;
	font: 800 22px/1 "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #fff;
	background: #0F0F10;
}
.hb-antes::before { content: "Antes"; }
.hb-despues::before { content: "Después"; background: #E8641A; }
.hb-pie { padding: 14px 18px; }
.hb-paso { padding: 12px 16px; }
.hb-paso b {
	margin-right: 6px;
	font: 800 24px/1 "Barlow Condensed", sans-serif;
	color: #E8641A;
}

/* ── service por horas ─────────────────────────────────────────────── */
.hb-hs { margin-left: 4px; font-size: 22px; color: #E8641A; }
.hb-nota {
	padding: 18px 22px;
	background: rgba(232, 100, 26, .1);
	border-left: 4px solid #E8641A;
}
.hb-nota strong { color: #fff; }

/* ── informe técnico ───────────────────────────────────────────────── */
.hb-art {
	display: block;
	font-size: 13px;
	letter-spacing: .1em;
	color: #8A8D93;
}
.hb-informe { transform: rotate(1.2deg); }
.hb-informe ul { margin: 0; padding-left: 18px; }
.hb-sello .elementor-heading-title {
	display: inline-block;
	padding: 6px 12px;
	border: 3px solid #E8641A;
	text-transform: uppercase;
	transform: rotate(-8deg);
	opacity: .85;
}
@media (max-width: 1024px) { .hb-informe { transform: none; } }

/* ── tabla de flota ────────────────────────────────────────────────── */
.hb-tabla {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	background: #0F0F10;
	border: 1px solid rgba(255, 255, 255, .1);
	font-size: 15px;
}
.hb-tabla th,
.hb-tabla td {
	padding: 13px 18px;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	background: transparent !important;
	color: #fff;
	text-align: left;
	vertical-align: middle;
}
.hb-tabla tr:last-child td { border-bottom: 0; }
.hb-tabla th {
	font: 700 13px "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #8A8D93;
}
.hb-tabla th:last-child,
.hb-tabla td.f { text-align: right; }
.hb-tabla td.n { font: 800 22px/1 "Barlow Condensed", sans-serif; color: #E8641A; white-space: nowrap; }
.hb-tabla td.f { font-size: 13.5px; color: #999; }
.hb-tabla small { display: block; font-size: 13px; color: #999; }
@media (max-width: 767px) {
	.hb-tabla th, .hb-tabla td { padding: 11px 10px; }
	.hb-tabla td.n { font-size: 19px; }
}

/* ── marcas ────────────────────────────────────────────────────────── */
.hb-marcas .elementor-widget-container,
.hb-marcas p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 38px;
}
.hb-marcas span {
	font: 800 30px "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #B9B4AD;
}
.hb-marcas em {
	font: 700 14px "Barlow Condensed", sans-serif;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: #8A8D93;
}
@media (max-width: 767px) {
	.hb-marcas .elementor-widget-container, .hb-marcas p { gap: 6px 22px; }
	.hb-marcas span { font-size: 24px; }
	.hb-marcas em { flex-basis: 100%; text-align: center; }
}

/* ── nosotros ──────────────────────────────────────────────────────── */
.hb-foto { position: relative; }
.hb-foto img { position: relative; z-index: 1; }
.hb-foto::after {
	content: "";
	position: absolute;
	right: -14px;
	bottom: -14px;
	width: 55%;
	height: 55%;
	border-right: 6px solid #E8641A;
	border-bottom: 6px solid #E8641A;
	z-index: 0;
}

/* ── preguntas frecuentes ──────────────────────────────────────────── */
body.hb-web .elementor-accordion .elementor-accordion-item { margin-bottom: 10px; border: 1px solid #E2DED8; }
body.hb-web .elementor-accordion .elementor-accordion-item + .elementor-accordion-item { border-top: 1px solid #E2DED8; }
body.hb-web .elementor-accordion .elementor-tab-content { border-top: 0; }

/* ── botón flotante de WhatsApp (lo imprime el plugin) ─────────────── */
.hb-wa-flota {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 999;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #25D366;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .3);
}
.hb-wa-flota svg { width: 32px; height: 32px; fill: #fff; }