/* 2B Solar Elements — estilos compartidos: Feature Card + Media Card
   Valores tomados del export estatico del diseno (2bsolar-web-html-lovable), leyendo los estilos
   computados reales del navegador, no aproximados. */

/* ===== Feature Card ===== */
.tbs-feature-card {
	position: relative;
	background-color: #FFFFFF;
	border: 1px solid #DCE1DD;
	border-radius: 24px;
	padding: 28px;
	transition: box-shadow .25s ease, border-color .25s ease;
	height: 100%;
	box-sizing: border-box;
}
.tbs-feature-card:hover {
	box-shadow: 0 20px 40px rgba(8,44,24,.12);
}
.tbs-feature-card__number {
	position: absolute;
	top: 24px;
	right: 24px;
	font-size: 42px;
	line-height: 1;
	font-weight: 800;
	color: rgba(18,119,61,.12);
}
.tbs-feature-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 20px;
	background-color: rgba(18,119,61,.1);
	color: #12773D;
	flex-shrink: 0;
}
.tbs-feature-card__icon i { font-size: 24px; }
.tbs-feature-card__icon svg { width: 24px; height: 24px; flex-shrink: 0; }
.tbs-feature-card__title {
	margin: 20px 0 0;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.375; /* Tailwind leading-snug en Lovable */
	color: #101511;
}
.tbs-feature-card__description {
	margin: 8px 0 0;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: #636B65;
}

/* ===== Media Card ===== */
.tbs-media-card {
	background-color: #FFFFFF;
	border: 1px solid #DCE1DD;
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow .25s ease;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}
.tbs-media-card:hover {
	box-shadow: 0 20px 40px rgba(8,44,24,.12);
}
.tbs-media-card__media {
	position: relative;
}
.tbs-media-card__media img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
}
.tbs-media-card__badge {
	position: absolute;
	bottom: -20px;
	left: 16px;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background-color: #12773D;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(8,44,24,.25);
}
.tbs-media-card__badge i { font-size: 18px; }
.tbs-media-card__badge svg { width: 18px; height: 18px; flex-shrink: 0; }
.tbs-media-card__body {
	padding: 32px 16px 20px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
.tbs-media-card__title {
	margin: 0;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.35;
	color: #101511;
}
.tbs-media-card__description {
	margin: 8px 0 0;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 13px;
	line-height: 1.65;
	color: #636B65;
}
.tbs-media-card__link {
	margin-top: 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	color: #12773D;
	text-decoration: none;
}
.tbs-media-card__arrow { flex-shrink: 0; }

/* ==========================================================================
   Estilos que antes vivian dentro de bloques <style> incrustados en widgets
   de HTML. Al vivir aqui, el cliente no puede romperlos sin querer y ademas
   se sirven una sola vez por pagina en lugar de repetirse por seccion.
   ========================================================================== */

/* --- Carrusel de marcas -------------------------------------------------- */
.tbs-brands-viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tbs-brands-track {
	display: flex;
	align-items: center;
	gap: 56px;
	width: max-content;
	animation: tbs-brands-scroll 28s linear infinite;
}
.tbs-brands-track:hover { animation-play-state: paused; }
/* Sin desplazamiento: fila centrada que se ajusta al ancho disponible. */
.tbs-brands-track--quieto {
	animation: none;
	width: auto;
	flex-wrap: wrap;
	justify-content: center;
}
/* Quien navega con el sistema en "reducir movimiento" no deberia recibir un
   carrusel infinito: se para y se deja como una fila estatica. */
@media (prefers-reduced-motion: reduce) {
	.tbs-brands-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 32px; }
}
.tbs-brand-logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
}
.tbs-brand-logo img {
	height: 100%;
	width: auto;
	max-width: 150px;
	object-fit: contain;
	transition: filter .2s ease, opacity .2s ease;
}
.tbs-brands-track--gris .tbs-brand-logo img { filter: grayscale(1); opacity: .55; }
.tbs-brands-track--gris .tbs-brand-logo img:hover { filter: grayscale(0); opacity: 1; }
@keyframes tbs-brands-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 767px) {
	.tbs-brand-logo { height: 30px; }
	.tbs-brand-logo img { max-width: 110px; }
}

/* --- Datos destacados ---------------------------------------------------- */
.tbs-datos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	width: 100%;
}
.tbs-datos--filete { padding-top: 20px; margin-top: 6px; border-top: 1px solid #DCE1DD; }
.tbs-dato { display: flex; gap: 10px; align-items: flex-start; }
.tbs-dato__icono {
	flex-shrink: 0;
	margin-top: 1px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #12773D;
	font-size: 18px;
	width: 18px;
	height: 18px;
}
.tbs-dato__icono svg { width: 1em; height: 1em; fill: currentColor; }
.tbs-dato__texto {
	margin: 0;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 12.5px;
	line-height: 1.45;
	color: #636B65;
}
.tbs-dato__texto span { display: block; }
.tbs-dato__cifra {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: #12773D;
	letter-spacing: -.02em;
	line-height: 1.25;
	margin: 1px 0;
}

/* --- Valoracion de Google ------------------------------------------------ */
.tbs-valoracion {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	width: 100%;
	text-decoration: none;
	color: #12773D;
}
.tbs-valoracion--filete { padding-top: 16px; margin-top: 2px; }
.tbs-valoracion__estrellas { display: inline-flex; gap: 2px; line-height: 0; }
.tbs-valoracion__estrellas svg { width: 15px; height: 15px; fill: #12773D; display: block; }
.tbs-valoracion__texto {
	margin-left: 8px;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #636B65;
}
.tbs-valoracion__nota { color: #101511; font-weight: 700; }
.tbs-valoracion:hover .tbs-valoracion__texto { color: #101511; }

/* --- Acciones flotantes -------------------------------------------------- */
.tbs-fab-stack {
	position: fixed;
	right: 20px;
	bottom: 28px;
	z-index: 8000;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-end;
	--tbs-barra-fondo: #12773D;
}
.tbs-fab {
	--tbs-fab-size: 56px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tbs-fab-size);
	height: var(--tbs-fab-size);
	border-radius: 50%;
	box-shadow: 0 8px 20px rgba(8,44,24,.24);
	text-decoration: none;
	color: #fff;
	transition: transform .15s ease, box-shadow .15s ease;
	flex-shrink: 0;
}
.tbs-fab--destacada { width: calc(var(--tbs-fab-size) + 4px); height: calc(var(--tbs-fab-size) + 4px); }
.tbs-fab:hover, .tbs-fab:focus { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(8,44,24,.32); }
.tbs-fab__icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; font-size: 26px; }
.tbs-fab__icon svg { width: 1em; height: 1em; display: block; fill: currentColor; }
.tbs-fab--destacada .tbs-fab__icon { width: 28px; height: 28px; font-size: 28px; }
.tbs-fab__label {
	position: absolute;
	right: calc(100% + 14px);
	top: 50%;
	transform: translateY(-50%) translateX(6px);
	white-space: nowrap;
	background: #101511;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 8px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
	box-shadow: 0 6px 16px rgba(8,44,24,.22);
}
.tbs-fab__label::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-left-color: #101511;
}
.tbs-fab:hover .tbs-fab__label, .tbs-fab:focus .tbs-fab__label { opacity: 1; transform: translateY(-50%) translateX(0); }

/* En movil dejan de ser botones sueltos y forman la barra fija de abajo. */
@media (max-width: 767px) {
	body { padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
	.tbs-fab-stack {
		left: 0; right: 0; bottom: 0; top: auto;
		width: 100%; height: auto;
		background: var(--tbs-barra-fondo);
		border-top: 1px solid rgba(0,0,0,.18);
		box-shadow: 0 -4px 18px rgba(8,44,24,.18);
		flex-direction: row;
		align-items: stretch;
		gap: 0;
		padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
	}
	.tbs-fab-stack .tbs-fab,
	.tbs-fab-stack .tbs-fab--destacada {
		flex: 1;
		flex-direction: column;
		gap: 3px;
		width: auto;
		height: auto;
		min-height: 52px;
		border-radius: 12px;
		background: transparent !important;
		box-shadow: none;
		padding: 6px 4px;
	}
	.tbs-fab:hover, .tbs-fab:focus { transform: none; box-shadow: none; background: rgba(255,255,255,.14) !important; }
	.tbs-fab__icon, .tbs-fab--destacada .tbs-fab__icon { width: 24px; height: 24px; font-size: 24px; }
	.tbs-fab__label {
		position: static;
		transform: none;
		opacity: 1;
		pointer-events: auto;
		background: transparent;
		box-shadow: none;
		padding: 0;
		font-size: 10.5px;
		font-weight: 600;
	}
	.tbs-fab__label::after { display: none; }
	.tbs-fab-stack .tbs-fab:not(:last-child)::before {
		content: "";
		position: absolute;
		right: 0; top: 18%; bottom: 18%;
		width: 1px;
		background: rgba(0,0,0,.18);
	}
	.cky-btn-revisit-wrapper { bottom: 78px !important; }
}

/* --- Entradas del blog --------------------------------------------------- */
.tbs-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
}
.tbs-blog-card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid #DCE1DD;
	border-radius: 16px;
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}
.tbs-blog-card:hover { box-shadow: 0 12px 30px rgba(8,44,24,.12); transform: translateY(-2px); }
.tbs-blog-card__media { display: block; line-height: 0; }
.tbs-blog-card__img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}
.tbs-blog-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	flex-grow: 1;
}
.tbs-blog-card__date {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 13px;
	color: #636B65;
}
.tbs-blog-card__title {
	margin: 0;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #101511;
}
/* El Kit de Elementor define ".elementor-kit-7 a" con especificidad (0,1,1), que gana a
   una clase suelta: el titulo saldria verde. Se acompana del contenedor para subir a (0,2,1). */
.tbs-blog-card .tbs-blog-card__title a { color: inherit; text-decoration: none; }
.tbs-blog-card .tbs-blog-card__title a:hover { color: #12773D; }
.tbs-blog-card__excerpt {
	margin: 0;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14.5px;
	line-height: 1.65;
	color: #636B65;
}
.tbs-blog-card .tbs-blog-card__link {
	margin-top: auto;
	padding-top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	color: #12773D;
	text-decoration: none;
}
.tbs-blog-card .tbs-blog-card__link:hover { color: #082C18; }
.tbs-blog-card__arrow { flex-shrink: 0; }
@media (max-width: 1024px) { .tbs-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .tbs-blog-grid { grid-template-columns: 1fr; } }

/* --- Paginación del listado de entradas ---------------------------------- */
.tbs-blog-pag {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 44px;
}
.tbs-blog-pag .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid #DCE1DD;
	border-radius: 12px;
	background: #FFFFFF;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	color: #101511;
	text-decoration: none;
	transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.tbs-blog-pag a.page-numbers:hover {
	border-color: #12773D;
	color: #12773D;
}
.tbs-blog-pag .page-numbers.current {
	background: #12773D;
	border-color: #12773D;
	color: #FFFFFF;
}
.tbs-blog-pag .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	min-width: 24px;
	padding: 0;
	color: #636B65;
}
@media (max-width: 767px) {
	.tbs-blog-pag { gap: 6px; margin-top: 32px; }
	.tbs-blog-pag .page-numbers { min-width: 40px; height: 40px; padding: 0 10px; font-size: 14px; }
}