/*
	Theme Name: 2B Solar (Hello Elementor Child)
	Theme URI: https://2bsolar.es
	Description: Child theme de Hello Elementor para 2B Solar. Contiene los design tokens (colores, tipografía) del sitio como variables CSS, fuente única de verdad reutilizada por el plugin 2bsolar-elements.
	Author: 2B Solar
	Template: hello-elementor
	Version: 1.9.6
	Text Domain: hello-elementor-child
*/

:root{
	/* ==== 2B Solar design tokens (extraídos del diseño Lovable, fuente única de verdad) ==== */
	--tbs-brand: #12773D;
	--tbs-brand-dark: #082C18;
	--tbs-brand-light: #48C063;
	--tbs-ink: #101511;
	--tbs-ink-soft: #636B65;
	--tbs-surface: #F2F7F3;
	--tbs-border: #DCE1DD;
	--tbs-white: #FFFFFF;
	--tbs-cta-bg: #E0EBE2;
	--tbs-star: #12773D; /* en el diseno las estrellas son verdes, no doradas */
	--tbs-shadow: rgba(8,44,24,0.15);
	--tbs-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

body{
	font-family: var(--tbs-font);
	color: var(--tbs-ink);
}

/* ==== Menú principal: subtítulo de 2ª línea en el desplegable (ver functions.php) ==== */
.tbs-menu-sub{
	display: block;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--tbs-ink-soft);
	margin-top: 2px;
}
/* El item del desplegable pasa a ser de dos líneas: se deja respirar y se alinea a la izquierda. */
.elementor-nav-menu--dropdown .tbs-menu-sub,
.elementor-nav-menu .sub-menu .tbs-menu-sub{
	white-space: normal;
}

/* ==== Maqueta de formulario ====
   Es el marcado del diseño, todavía NO funcional: el formulario real se montará con Elementor Forms
   (decisión ya tomada con el cliente), y este bloque marca su sitio y su aspecto. */
.tbs-form{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	font-family: var(--tbs-font);
}
.tbs-form__full{ grid-column: 1 / -1; }
@media (max-width: 640px){
	.tbs-form{ grid-template-columns: 1fr; }
}
.tbs-form label{
	display: block;
	margin-bottom: 6px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--tbs-ink-soft);
}
.tbs-form__consent label{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--tbs-ink-soft);
}
.tbs-form__consent input{ width: auto; margin-top: 2px; flex-shrink: 0; }
.tbs-form__consent a{ color: var(--tbs-brand); }
.tbs-form input,
.tbs-form select,
.tbs-form textarea{
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--tbs-border);
	border-radius: 12px;
	background: var(--tbs-white);
	padding: 12px 14px;
	font-family: inherit;
	font-size: 14.5px;
	color: var(--tbs-ink);
}
.tbs-form textarea{ resize: vertical; }
.tbs-form button{
	border: 0;
	border-radius: 12px;
	background: var(--tbs-brand);
	color: #fff !important;
	padding: 13px 24px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

/* ==== Chips de zonas de servicio (píldoras) ==== */
.tbs-chips{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.tbs-chip{
	display: inline-block;
	border-radius: 999px;
	border: 1px solid var(--tbs-border);
	background: var(--tbs-white);
	padding: 8px 16px;
	font-family: var(--tbs-font);
	font-size: 14px;
	font-weight: 500;
	color: var(--tbs-ink);
}

/* ==== FAQ (widget toggle): estilo base GLOBAL, en toda la web ====
   El widget toggle es el componente estandar de preguntas frecuentes del sitio, tanto en listas
   planas (paginas de servicio: mb 16, medido) como en bloques por categoria (home: mb 24, ver abajo).
   Antes esto solo estaba scopeado a home (.tbs-faq-list) y las FAQ de las paginas de servicio se
   quedaban sin radio/padding real. */
.elementor-toggle-item{
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 16px;
	background: var(--tbs-white);
	border: 1px solid var(--tbs-border);
}
.elementor-tab-title{
	display: flex;
	align-items: center;
	/* `space-between` con solo dos hijos (icono + texto) empujaba cada uno a un extremo de la
	   fila: en una pagina de servicio, con la fila a 1360px, el signo + quedaba en el borde
	   izquierdo y la pregunta pegada al derecho, con medio metro de vacio en medio. Se alinean
	   los dos a la izquierda y el gap los separa lo justo. */
	justify-content: flex-start;
	gap: 14px;
	min-height: 0;
	font-weight: 600;
	/* Filas mas bajas: 20/24 hacia una lista de 10 preguntas ocupaba pantalla y media. */
	padding: 15px 20px;
	font-size: 15.5px;
	line-height: 1.4;
}
.elementor-toggle-icon{ flex-shrink: 0; }
.elementor-tab-content{
	padding: 0 20px 18px 52px;   /* alineado con el texto de la pregunta, no con el icono */
	font-size: 14.5px;
	line-height: 1.75;
}

/* ==== La lista plana de las paginas de servicio, a 2 columnas ====
   Con 8-11 preguntas en una sola columna a todo el ancho, el bloque se comia la pantalla y
   cada fila era una linea de texto perdida en 1360px. En dos columnas ocupa la mitad de alto
   y la linea queda a una anchura legible. Mismo criterio que ya se aplico en la home.
   `align-items:start` es lo que evita que al abrir una pregunta se estire la de al lado. */
.elementor-widget-toggle .elementor-toggle{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 14px 20px;
}
.elementor-widget-toggle .elementor-toggle-item{ margin-bottom: 0; }
@media (max-width: 1024px){
	.elementor-widget-toggle .elementor-toggle{ grid-template-columns: 1fr; }
}

/* ==== FAQ de home: 2 columnas DENTRO de cada categoria ====
   En el diseno original cada categoria es un bloque a todo el ancho y son SUS PREGUNTAS las que se
   reparten en 2 columnas (`md:columns-2`), con 24px entre items (no 16 como en la lista plana).
   IMPORTANTE: los contenedores de Elementor son flex y `display:flex` ANULA `columns`. */
/* CSS `columns` reparte los items entre columnas SEGUN SU ALTURA, asi que en cuanto se abre
   una pregunta el navegador rehace el reparto y las de debajo saltan de columna: el usuario ve
   moverse cosas que no ha tocado. Es inherente a multi-column, no se puede ajustar. Con grid,
   cada item queda fijado a su celda: abrir uno solo empuja hacia abajo lo que tiene debajo y
   nunca cambia nada de columna. `align-items:start` evita que el item corto de al lado se
   estire para igualar al que se acaba de abrir. */
.tbs-faq-list .elementor-toggle{
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 14px 20px;
}
@media (max-width: 767px){
	.tbs-faq-list .elementor-toggle{ grid-template-columns: 1fr; }
}
.tbs-faq-list .elementor-toggle-item{
	margin-bottom: 0;
}


/* ==== Enlace con flecha (.link-arrow del diseno) ==== */
.tbs-link-arrow{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--tbs-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--tbs-brand);
	text-decoration: none;
}
.tbs-link-arrow svg{ width: 16px; height: 16px; flex-shrink: 0; transition: transform .2s ease; }
.tbs-link-arrow:hover svg{ transform: translateX(3px); }

/* ==========================================================================
   HERO DE LA HOME
   Estaba dentro de un <style> incrustado en un widget de HTML. Se trae aqui:
   no es contenido que el cliente deba editar y ahi corria el riesgo de que lo
   borrara sin querer al tocar la seccion.
   ========================================================================== */
.tbs-hero-bg { position: relative; overflow: hidden; }
.tbs-hero-bg .elementor-background-video-container { position: absolute; inset: 0; overflow: hidden; }
.tbs-hero-bg .elementor-background-video-container video { width: 100%; height: 100%; object-fit: cover; }

/* Velo propio en vez del de Elementor: con el fondo en vídeo no llega a pintar su capa
   .elementor-background-overlay, así que se hace con un ::after y se ordena el apilado a
   mano -> vídeo 0, velo 1, contenido 2. */
.tbs-hero-bg > .elementor-background-video-container { z-index: 0; }
.tbs-hero-bg > .elementor-element { position: relative; z-index: 2; }
.tbs-hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(16,21,17,.34) 0%, rgba(16,21,17,.10) 55%, rgba(16,21,17,.24) 100%);
}
@media (min-width: 768px) and (max-width: 1024px) {
	.tbs-hero-bg::after { background: linear-gradient(180deg, rgba(16,21,17,.30) 0%, rgba(16,21,17,.16) 60%, rgba(16,21,17,.34) 100%); }
}

/* EN MÓVIL EL VÍDEO Y EL TEXTO DEJAN DE PISARSE.
   El vídeo se lleva una banda limpia arriba, sin nada encima, y el texto va debajo sobre
   blanco sólido en un panel a todo el ancho que sube y remata la banda con la esquina
   redonda. Así el vídeo se ve de verdad y el texto se lee siempre, sea cual sea el clip. */
@media (max-width: 767px) {
	/* la sección es flex y su gap de 20px dejaba una franja muerta bajo el panel */
	.tbs-hero-bg { gap: 0 !important; }
	.tbs-hero-fila { gap: 0 !important; padding: 0 !important; }
	.tbs-hero-bg h1 br { display: none; }
	/* los tres datos son información secundaria: apilados se comían 224px */
	.tbs-hero-datos { display: none; }
	/* la banda de vídeo se coloca la primera y lleva su propio velo, ajustado a su altura */
	.tbs-hero-video { order: -1; width: 100% !important; }
	.tbs-hero-video::before {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(180deg, rgba(16,21,17,.34) 0%, rgba(16,21,17,.06) 45%, rgba(16,21,17,.26) 100%);
	}
	.tbs-hero-bg::after { display: none; }
	/* el panel de texto: a todo el ancho, pegado abajo y sin sombra, que ya no flota */
	.tbs-hero-card {
		width: 100% !important;
		margin-top: -14px;
		border-radius: 20px 20px 0 0 !important;
		box-shadow: none !important;
	}
	.tbs-btn-escritorio { display: none; }
	/* sin los datos encima, la valoración necesita su propio filete */
	.tbs-hero-stars .tbs-valoracion { padding-top: 12px; margin-top: 0; border-top: 1px solid #DCE1DD; }
	.tbs-hero-stars .tbs-valoracion__texto { font-size: 13px; }
}
/* el botón de teléfono es solo de móvil */
@media (min-width: 768px) { .tbs-btn-movil { display: none; } }

/* ==========================================================================
   ACORDEÓN DEL PIE EN MÓVIL
   Estaba en un widget de HTML junto a su <script>. Es comportamiento, no
   contenido: el cliente no debería poder borrarlo desde el editor.
   ========================================================================== */
@media (max-width: 767px) {
	.tbs-facol { width: 100% !important; border-bottom: 1px solid #DCE1DD; }
	.tbs-facol:last-of-type { border-bottom: none; }
	.tbs-facol > .tbs-facol__title {
		cursor: pointer;
		position: relative;
		padding: 16px 28px 16px 0;
		margin: 0 !important;
	}
	.tbs-facol > .tbs-facol__title::after {
		content: "";
		position: absolute;
		right: 4px;
		top: 18px;
		width: 9px;
		height: 9px;
		border-right: 2px solid #12773D;
		border-bottom: 2px solid #12773D;
		transform: rotate(45deg);
		transition: transform .25s ease;
	}
	.tbs-facol.is-open > .tbs-facol__title::after { transform: rotate(-135deg); top: 22px; }
	.tbs-facol > .tbs-facol__title ~ .elementor-widget { display: none; margin-bottom: 0 !important; }
	.tbs-facol > .tbs-facol__title ~ .elementor-widget:last-child { padding-bottom: 18px; }
	.tbs-facol.is-open > .tbs-facol__title ~ .elementor-widget { display: block; }
}

/* ==========================================================================
   TEXTOS LEGALES (aviso legal, privacidad, cookies)
   Los tres eran widgets de HTML con este <style> dentro. Ahora son widgets de
   texto normales y el cliente los edita con el editor visual de siempre.
   ========================================================================== */
.legal-doc {
	max-width: 2000px;
	margin: 0 auto;
	color: #101511;
	font-size: 16px;
	line-height: 1.75;
	font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}
.legal-doc .legal-updated { display: block; color: #636B65; font-size: 13px; margin: 0 0 32px; }
.legal-doc .legal-lead { font-size: 16px; color: #636B65; margin: 0 0 24px; }
.legal-doc h2 { font-size: 20px; line-height: 1.3; font-weight: 700; margin: 36px 0 12px; color: #101511; }
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc p { margin: 0 0 16px; }
.legal-doc ul { margin: 0 0 16px; padding-left: 20px; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc strong { color: #101511; }
/* El Kit de Elementor define ".elementor-kit-7 a", que es (0,1,1) y gana a una clase
   suelta. Se acompana de .elementor-widget para subir a (0,2,1) y que este color mande.
   Sin esto los enlaces de los legales saldrian sin subrayado y del verde del Kit. */
.legal-doc.elementor-widget a,
.elementor-widget .legal-doc a {
	color: #12773D;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.legal-doc.elementor-widget a:hover,
.elementor-widget .legal-doc a:hover { color: #082C18; }
.legal-doc table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 20px; }
.legal-doc th, .legal-doc td { border: 1px solid #DCE1DD; padding: 10px 12px; text-align: left; vertical-align: top; }
.legal-doc th { font-weight: 700; }
@media (max-width: 600px) {
	.legal-doc { font-size: 15.5px; }
	.legal-doc h2 { font-size: 19px; }
}

/* ==========================================================================
   CABECERA: PANEL LATERAL DEL MÓVIL Y DESPLEGABLE DE ESCRITORIO
   Estaba dentro de un <style> en un widget de HTML de la plantilla de
   cabecera, junto al script. Es estilo y comportamiento, no contenido: el
   contenido (logo, teléfono, correo, botón) es ahora el widget
   "Contenido del menú móvil".
   ========================================================================== */
@media (max-width:1024px){.elementor-nav-menu--dropdown.elementor-nav-menu__container{position:fixed!important;top:0!important;right:0!important;left:auto!important;height:100vh!important;height:100dvh!important;max-height:100vh!important;max-height:100dvh!important;width:100%!important;background:#fff!important;box-shadow:-16px 0 40px rgba(8,44,24,.18);padding:0!important;overflow:hidden!important;transform:translateX(100%)!important;animation:none!important;transition:none!important;z-index:9999!important;display:flex!important;flex-direction:column!important;pointer-events:none}.elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"]{transform:translateX(0)!important;pointer-events:auto}body:has(.elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"]) .elementor-menu-toggle{opacity:0;visibility:hidden;pointer-events:none}.elementor-menu-toggle{width:44px;height:44px;border-radius:14px;background:#F2F7F3!important;border:1px solid #E4EEE6;display:flex;align-items:center;justify-content:center;padding:0;transition:background .18s ease,transform .18s ease;-webkit-tap-highlight-color:transparent}.elementor-menu-toggle:hover{background:#E4EEE6!important}.elementor-menu-toggle:active{transform:scale(.94)}.elementor-menu-toggle svg,.elementor-menu-toggle i{display:none!important}.elementor-menu-toggle::after{content:"";width:20px;height:14px;background-repeat:no-repeat;background-position:center;background-size:20px 14px;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 14%27 fill=%27none%27 stroke=%27%2312773D%27 stroke-width=%272.2%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M1 1.6h18M1 7h18M1 12.4h11%27/%3E%3C/svg%3E")}body:has(.elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"]){overflow:hidden}body:has(.elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"]) .tbs-fab-stack,body:has(.elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"]) .cky-btn-revisit-wrapper,body:has(.elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"]) .cky-consent-container{opacity:0;visibility:hidden;pointer-events:none}.tbs-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;flex-shrink:0;position:sticky;top:0;background:#fff;z-index:2}.tbs-drawer-logo{height:44px;width:auto;max-width:220px;object-fit:contain}.tbs-drawer-head button.tbs-drawer-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1.5px solid #DCE1DD;background:#fff;color:#101511;cursor:pointer;flex-shrink:0;padding:0}.tbs-drawer-close svg{width:16px;height:16px}.tbs-drawer-head button.tbs-drawer-close:hover{border-color:#12773D;color:#12773D;background:#fff}.elementor-nav-menu--dropdown.elementor-nav-menu__container > li{border-bottom:1px solid #F2F7F3}.elementor-nav-menu--dropdown a.elementor-item{font-size:18px!important;font-weight:700!important;padding:16px 24px!important;color:#101511!important}.elementor-nav-menu--dropdown.elementor-nav-menu__container a.elementor-item:hover{color:#12773D!important}.elementor-nav-menu--dropdown.elementor-nav-menu__container a.elementor-item-active{color:#12773D!important;font-weight:700!important;background-color:rgba(18,119,61,.08)!important;box-shadow:inset 3px 0 0 #12773D}.elementor-nav-menu--dropdown a.elementor-item:focus{outline:none}.elementor-nav-menu--dropdown a.elementor-item:focus-visible{outline:2px solid #12773D;outline-offset:-2px}.elementor-nav-menu--dropdown a.elementor-item,.elementor-nav-menu--dropdown .elementor-sub-item,.tbs-drawer-close,.tbs-drawer-contact__row,.tbs-drawer-cta{-webkit-tap-highlight-color:transparent}.elementor-nav-menu--dropdown a.elementor-sub-item{font-size:15px!important;font-weight:600!important;color:#101511!important;padding:13px 24px 13px 40px!important;flex-direction:column!important;align-items:flex-start!important;gap:1px}.elementor-nav-menu--dropdown a.elementor-sub-item .tbs-menu-sub{font-size:12.5px;font-weight:400;color:#636B65;line-height:1.35}.elementor-nav-menu--dropdown .sub-menu{background:#FAFCFA;border-top:1px solid #F2F7F3}.elementor-nav-menu--dropdown .sub-menu li+li{border-top:1px solid #F2F7F3}.elementor-nav-menu--dropdown.elementor-nav-menu__container svg{color:#12773D}.elementor-nav-menu--dropdown.elementor-nav-menu__container>*:has(li){flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.elementor-nav-menu--dropdown.elementor-nav-menu__container>ul.elementor-nav-menu{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.tbs-drawer-contact,.tbs-drawer-cta{flex-shrink:0}.tbs-drawer-contact::before{content:"";position:absolute;left:-24px;right:-24px;bottom:100%;height:28px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none}.tbs-drawer-contact{position:relative;margin:20px 24px 0;padding:4px 16px;background:#F2F7F3;border-radius:16px;display:flex;flex-direction:column;flex-shrink:0}.tbs-drawer-contact__row{display:flex;align-items:center;gap:12px;padding:12px 0;text-decoration:none;color:inherit;border-bottom:1px solid rgba(220,225,221,.6)}.tbs-drawer-contact__row:last-child{border-bottom:none}.tbs-drawer-contact__icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(18,119,61,.1);color:#12773D;flex-shrink:0}.tbs-drawer-contact__icon svg{width:16px;height:16px}.tbs-drawer-contact__text{font-size:14px;color:#101511;line-height:1.4;font-weight:500}.tbs-drawer-contact__text--bold{font-weight:700;font-size:15px}.tbs-drawer-contact__text--muted{color:#636B65;font-weight:500;font-size:13px}.tbs-drawer-cta{flex-shrink:0;display:flex;align-items:center;justify-content:center;margin:16px 24px max(20px,env(safe-area-inset-bottom));padding:16px;background:#12773D;color:#fff!important;font-weight:700!important;font-size:15px!important;border-radius:12px;text-decoration:none;text-align:center}.tbs-drawer-cta:hover{background:#0e5f31;color:#fff!important}}@media (min-width:1025px) and (max-width:1200px){.tbs-head-tel{display:none!important}.tbs-head-nav{flex-grow:1!important}.elementor-nav-menu--main .elementor-item{padding-left:6px!important;padding-right:6px!important}.tbs-head-nav{flex-grow:1!important;min-width:0}.elementor-nav-menu--main .elementor-item{font-size:14.5px!important}.tbs-head-cta .elementor-button{padding-left:18px!important;padding-right:18px!important}}@media (min-width:1025px){.elementor-nav-menu--main .sub-menu{width:300px!important;min-width:300px!important;padding:8px!important;background:#fff;border:1px solid #E4EEE6;border-radius:16px;box-shadow:0 18px 40px rgba(8,44,24,.13);margin-top:6px}.elementor-nav-menu--main a.elementor-sub-item{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:2px;padding:10px 14px!important;border-radius:10px;font-size:14.5px!important;font-weight:600!important;line-height:1.3;color:#101511!important;white-space:normal}.elementor-nav-menu--main a.elementor-sub-item .tbs-menu-sub{display:block;font-size:12.5px;font-weight:400;color:#636B65;line-height:1.35}.elementor-nav-menu--main a.elementor-sub-item:hover,.elementor-nav-menu--main a.elementor-sub-item.elementor-item-active{background-color:#F2F7F3!important;color:#12773D!important}.elementor-nav-menu--main a.elementor-sub-item:hover .tbs-menu-sub,.elementor-nav-menu--main a.elementor-sub-item.elementor-item-active .tbs-menu-sub{color:#4C7C5E}.elementor-nav-menu--main .sub-menu li:last-child a.elementor-sub-item{margin-top:4px;border-top:1px solid #F2F7F3;border-radius:0 0 10px 10px;color:#12773D!important;font-weight:700!important}}

/* ==========================================================================
   ENTRADA DE BLOG
   Estilos de la plantilla del Theme Builder. La tipografía del cuerpo es la
   misma que la de los textos legales: es la que ya está medida para leer
   párrafos largos en esta web.
   ========================================================================== */
.tbs-post-volver .elementor-button {
	background: #FFFFFF !important;
	border: 1px solid #DCE1DD !important;
}
.tbs-post-volver .elementor-button:hover {
	background: #FFFFFF !important;
	border-color: #12773D !important;
}

.tbs-post-titulo { max-width: 900px; }

.tbs-post-meta .elementor-icon-list-item { align-items: center; }

/* La foto de portada: alto acotado para que una imagen vertical no ocupe
   media pantalla, y recortada al centro. */
.tbs-post-img img {
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	border-radius: 20px;
	display: block;
	box-shadow: 0 18px 44px rgba(8,44,24,.16);
}
@media (max-width: 767px) {
	.tbs-post-img img { max-height: 260px; border-radius: 16px; }
}

/* --- Cuerpo del artículo --- */
.tbs-post-cuerpo {
	font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
	font-size: 16.5px;
	line-height: 1.8;
	color: #3E463F;
}
.tbs-post-cuerpo p { margin: 0 0 20px; }
.tbs-post-cuerpo h2 {
	font-size: 26px;
	line-height: 1.28;
	font-weight: 700;
	color: #101511;
	margin: 40px 0 14px;
	letter-spacing: -.02em;
}
.tbs-post-cuerpo h2:first-child { margin-top: 0; }
.tbs-post-cuerpo h3 {
	font-size: 20px;
	line-height: 1.35;
	font-weight: 700;
	color: #101511;
	margin: 30px 0 10px;
}
.tbs-post-cuerpo ul, .tbs-post-cuerpo ol { margin: 0 0 20px; padding-left: 22px; }
.tbs-post-cuerpo li { margin-bottom: 9px; }
.tbs-post-cuerpo strong { color: #101511; font-weight: 700; }
.tbs-post-cuerpo img { max-width: 100%; height: auto; border-radius: 14px; margin: 8px 0 20px; }
.tbs-post-cuerpo blockquote {
	margin: 28px 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid #12773D;
	font-size: 18px;
	line-height: 1.6;
	color: #101511;
}
/* El Kit de Elementor define ".elementor-kit-7 a" con especificidad (0,1,1) y gana a una
   clase suelta: los enlaces del artículo saldrían sin subrayar. Se acompaña del
   contenedor para subir a (0,2,1), igual que se hizo en los textos legales. */
.tbs-post-cuerpo .elementor-widget-theme-post-content a {
	color: #12773D;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.tbs-post-cuerpo .elementor-widget-theme-post-content a:hover { color: #082C18; }

/* Título de "Más artículos del blog" */
.tbs-blog-titulo {
	margin: 0 0 28px;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 1.25;
	color: #101511;
	letter-spacing: -.025em;
}

/* Sección de entradas del blog: si el widget no encuentra ninguna que mostrar no pinta
   nada, y la sección se quedaba como una banda de color vacía de 128px. Con esto se
   pliega sola. Pasa en la entrada suelta cuando todavía no hay un segundo artículo. */
.tbs-seccion-blog:not(:has(.tbs-blog-grid)) { display: none !important; }

/* En las tarjetas de contacto, el valor enlazado (WhatsApp) medía 21px de alto: imposible
   de acertar con el pulgar. Se le da área de toque en móvil sin cambiar cómo se ve. */
@media (max-width: 767px) {
	.elementor-widget-text-editor a[href*="wa.me"],
	.elementor-widget-text-editor a[href^="tel:"],
	.elementor-widget-text-editor a[href^="mailto:"] {
		display: inline-block;
		padding: 12px 0;
	}
}

/* ==========================================================================
   FORMULARIO POR PASOS de /presupuesto-placas-solares/ (clase tbs-form-pasos)
   Colores, tamanos, bordes y radios se cambian en el propio widget de Elementor.
   Aqui solo van los estados que Elementor no ofrece como ajuste: el foco, el
   color del texto de ejemplo y el aspecto de las opciones de radio y casillas.
   ========================================================================== */
.tbs-form-pasos .elementor-field-textual::placeholder { color: #9AA29C; opacity: 1; }
.tbs-form-pasos .elementor-field-textual { transition: border-color .15s ease, box-shadow .15s ease; }
.tbs-form-pasos .elementor-field-textual:focus {
	border-color: #12773D !important;
	box-shadow: 0 0 0 3px rgba(18, 119, 61, .14);
	outline: none;
}

/* Opciones de radio y casillas: en linea, con aire y el verde de la marca. */
.tbs-form-pasos .elementor-field-subgroup { gap: 10px 24px; }
.tbs-form-pasos .elementor-field-subgroup .elementor-field-option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}
.tbs-form-pasos .elementor-field-option input[type="radio"],
.tbs-form-pasos .elementor-field-option input[type="checkbox"] {
	accent-color: #12773D;
	width: 18px;
	height: 18px;
	margin: 0;
	flex-shrink: 0;
	cursor: pointer;
}
.tbs-form-pasos .elementor-field-option label {
	font-size: 15px;
	line-height: 1.45;
	color: #101511;
	cursor: pointer;
}
.tbs-form-pasos .elementor-field-type-acceptance .elementor-field-option { align-items: flex-start; }
.tbs-form-pasos .elementor-field-type-acceptance .elementor-field-option label { font-size: 14px; color: #636B65; }
.tbs-form-pasos .elementor-field-type-acceptance .elementor-field-option input { margin-top: 1px; }
/* En las casillas el titulo ("Consentimiento", "Comunicaciones") repite lo que ya dice
   el texto de la casilla. Se oculta a la vista; el texto de la casilla sigue siendo su
   etiqueta accesible. */
.tbs-form-pasos .elementor-field-type-acceptance > .elementor-field-label { display: none; }

/* Botones Atras / Siguiente / Enviar: en una sola fila. Elementor mete cada boton en
   su propio grupo de campo y los apila a todo el ancho; aqui "Atras" queda compacto a
   la izquierda y la accion principal ocupa el resto. */
.tbs-form-pasos .e-form__buttons { flex-wrap: nowrap; align-items: stretch; }
.tbs-form-pasos .e-form__buttons__wrapper { flex: 1 1 auto; width: auto; max-width: none; margin-bottom: 0; }
.tbs-form-pasos .e-form__buttons__wrapper.elementor-field-type-previous { flex: 0 0 auto; }
.tbs-form-pasos .e-form__buttons__wrapper .elementor-button { width: 100%; }
.tbs-form-pasos .e-form__buttons__wrapper-previous .elementor-button,
.tbs-form-pasos .e-form__buttons__wrapper__button-previous { padding-left: 26px; padding-right: 26px; }

/* Anclas (#formulario en presupuesto, #faq en la home): al saltar a ellas, la cabecera
   fija tapaba el principio de la seccion. Se deja hueco para ella. */
#formulario, #faq { scroll-margin-top: 96px; }
@media (max-width: 767px) { #formulario, #faq { scroll-margin-top: 84px; } }

/* Icono flotante de cookies: en movil tapaba el texto del pie y de las preguntas
   frecuentes. Se oculta en movil; las preferencias se reabren con el enlace
   "Configurar cookies" del pie (retirar el consentimiento debe seguir siendo facil). */
@media (max-width: 767px) { .cky-btn-revisit-wrapper { display: none !important; } }