/**
 * LBM GUÍA — plantilla de artículos.
 *
 * v3 (8-09): escala compacta. La v2 usaba Futura a tamaños de cartel (H1 de 68 px,
 * H2 de 60) y el cuerpo en gris claro: se leía mal. Ahora la pareja es la misma que
 * en /kit-cultivo-interior-avanzado/ —Myriad Pro, ya cargada en el hijo— con la
 * escala recortada y el texto en tinta, no en gris.
 *
 * Colores de casa: grafito #445055 y naranja #ef7d00. El verde de OASIS no pinta aquí.
 * Divi carga después: lo que hay que pisar lleva el prefijo .et-db #et-boc .et-l.
 */

.lbm-guia {
	--c-grafito: #445055;
	--c-grafito-osc: #333d41;
	--c-naranja: #ef7d00;
	--c-naranja-osc: #c26300;   /* naranja legible sobre blanco, para texto y enlaces */
	--c-naranja-cl: #ff9422;
	--c-tinta: #222b2f;         /* titulares y negritas */
	--c-texto: #3d4a4f;         /* cuerpo: casi tinta, no gris */
	--c-suave: #6f7d83;         /* solo pies de foto, metadatos y notas */
	--c-papel: #ffffff;
	--c-panel: #f5f7f7;
	--c-crema: #f7f3ec;
	--c-linea: rgba(68, 80, 85, .13);
	--c-linea-fuerte: rgba(68, 80, 85, .22);
	--c-radio: 16px;
	--c-ancho: 1120px;
	--c-lectura: 680px;

	--f-texto: "myriad_proregular", "Myriad Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--f-semi: "myriad_prosemibold", "Myriad Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--f-bold: "myriad_probold", "Myriad Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	font-family: var(--f-texto);
	font-size: 17px;
	line-height: 1.68;
	color: var(--c-texto);
	background: var(--c-papel);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.lbm-guia h1,
.lbm-guia h2,
.lbm-guia h3 {
	font-family: var(--f-bold);
	font-weight: 400;
	letter-spacing: -.018em;
	text-wrap: balance;
	margin: 0;
	color: var(--c-tinta);
}

.lbm-guia h1 { font-size: clamp(29px, 3.3vw, 44px); line-height: 1.1; }
.lbm-guia h2 { font-size: clamp(23px, 2.5vw, 32px); line-height: 1.2; }
.lbm-guia h3 { font-size: 17.5px; line-height: 1.3; letter-spacing: -.01em; }

.lbm-guia p { margin: 0; }

.lbm-guia section {
	padding: clamp(30px, 3.2vw, 44px) clamp(20px, 4vw, 40px);
}

.lbm-g-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ── Etiqueta de sección ───────────────────────────────── */

.lbm-g-eyebrow {
	font-family: var(--f-semi);
	font-size: 11.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-naranja-osc);
	margin: 0 0 14px;
}

/* ── Cabecera centrada ─────────────────────────────────── */

.lbm-g-head {
	max-width: 660px;
	margin: 0 auto clamp(30px, 3.5vw, 46px);
	text-align: center;
}

.lbm-g-head__sub {
	margin-top: 16px;
	font-size: 17px;
	line-height: 1.62;
	color: var(--c-suave);
}

.lbm-g-head--claro h2 { color: #fff; }
.lbm-g-head--claro .lbm-g-head__sub { color: rgba(255, 255, 255, .74); }

/* ── Botones ───────────────────────────────────────────── */

.lbm-g-btn {
	display: inline-block;
	padding: 13px 28px;
	border-radius: 999px;
	background: var(--c-naranja);
	color: #fff;
	font-family: var(--f-semi);
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}

.lbm-g-btn:hover,
.lbm-g-btn:focus-visible {
	background: var(--c-naranja-cl);
	color: #fff;
	transform: translateY(-1px);
}

.lbm-g-btn--claro { background: #fff; color: var(--c-grafito-osc); }
.lbm-g-btn--claro:hover,
.lbm-g-btn--claro:focus-visible { background: #fff; color: var(--c-grafito-osc); }

.lbm-g-btn--grande { padding: 15px 34px; font-size: 17px; }

.lbm-guia a:focus-visible,
.lbm-guia summary:focus-visible {
	outline: 2px solid var(--c-naranja);
	outline-offset: 3px;
}

/* ── Hero ──────────────────────────────────────────────── */

.lbm-g-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	max-width: var(--c-ancho);
	margin: 0 auto;
	padding-top: clamp(34px, 4vw, 56px) !important;
}

.lbm-g-hero__h1 span { color: var(--c-naranja); display: block; }

.lbm-g-hero__sub {
	margin-top: 22px;
	max-width: 34em;
	font-size: 18px;
	line-height: 1.62;
	color: var(--c-texto);
}

.lbm-g-hero__cta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 20px;
	margin-top: 28px;
}

.lbm-g-hero__precio {
	font-size: 15.5px;
	color: var(--c-suave);
}

.lbm-g-hero__precio strong {
	font-family: var(--f-bold);
	color: var(--c-tinta);
}

.lbm-g-hero__marcas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 28px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--c-linea);
	list-style: none;
	font-size: 11.5px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--c-suave);
}

.lbm-g-hero__img img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 62vh;
	object-fit: cover;
	border-radius: var(--c-radio);
}

/* ── Cifras ────────────────────────────────────────────── */

.lbm-g-cifras {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(18px, 2.4vw, 34px);
	max-width: var(--c-ancho);
	margin: 0 auto;
	padding-top: clamp(30px, 3.4vw, 42px) !important;
	padding-bottom: clamp(30px, 3.4vw, 42px) !important;
	border-top: 1px solid var(--c-linea);
	border-bottom: 1px solid var(--c-linea);
	text-align: center;
}

.lbm-g-cifra strong {
	display: block;
	font-family: var(--f-bold);
	font-size: clamp(24px, 2.3vw, 31px);
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--c-grafito);
	font-variant-numeric: tabular-nums;
}

.lbm-g-cifra span {
	display: block;
	margin-top: 9px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--c-suave);
}

/* ── Firma de la tienda ────────────────────────────────── */

.lbm-g-firma-tienda {
	max-width: var(--c-ancho);
	margin: 0 auto;
	padding: 22px clamp(20px, 4vw, 40px) 0;
	font-size: 13.5px;
	letter-spacing: .01em;
	color: var(--c-suave);
	text-align: center;
}

/* ── Prosa ─────────────────────────────────────────────── */

.lbm-g-prosa__cuerpo {
	max-width: var(--c-lectura);
	margin: 0 auto;
}

.lbm-g-prosa h2 { margin-bottom: 20px; }


.lbm-g-prosa p {
	margin-top: 17px;
	font-size: 17px;
	line-height: 1.68;
	color: var(--c-texto);
}

.lbm-g-prosa strong { font-family: var(--f-semi); color: var(--c-tinta); }

.lbm-g-prosa a,
.lbm-g-enlaces a,
.lbm-g-faq__item a,
.lbm-g-tabla a {
	color: var(--c-grafito);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--c-naranja);
}

.lbm-g-prosa a:hover,
.lbm-g-enlaces a:hover,
.lbm-g-tabla a:hover { color: var(--c-naranja-osc); }

.lbm-g-prosa--panel { background: var(--c-panel); }

/* La respuesta corta: lo que cita un buscador o un modelo */
.lbm-g-resp {
	margin-top: 0 !important;
	padding-left: 18px;
	border-left: 2px solid var(--c-naranja);
	font-family: var(--f-semi);
	font-size: 18.5px !important;
	line-height: 1.58 !important;
	color: var(--c-tinta) !important;
}

/* ── Promesa / tema (piloto) ───────────────────────────── */

.lbm-g-promesa {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.lbm-g-promesa p {
	margin-top: 20px;
	font-size: 17px;
	line-height: 1.68;
	color: var(--c-texto);
}

.lbm-g-promesa__firma {
	font-family: var(--f-semi);
	color: var(--c-tinta) !important;
}

.lbm-g-tema {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	max-width: var(--c-ancho);
	margin: 0 auto;
}

.lbm-g-tema--panel { background: var(--c-panel); }

.lbm-g-tema__txt {
	margin-top: 17px;
	font-size: 17px;
	line-height: 1.68;
	color: var(--c-texto);
}

.lbm-g-tema__lista {
	margin: 20px 0 0;
	padding: 0 0 0 20px;
	color: var(--c-texto);
}

.lbm-g-tema__visual img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 66vh;
	object-fit: cover;
	border-radius: var(--c-radio);
}

/* ── Beneficios ────────────────────────────────────────── */

.lbm-g-benef {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 2.4vw, 32px);
	max-width: var(--c-ancho);
	margin: 0 auto;
}

.lbm-g-benef__item {
	padding-top: 22px;
	border-top: 1px solid var(--c-linea);
}

.lbm-g-benef__clave {
	font-family: var(--f-semi);
	font-size: 11.5px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--c-naranja-osc);
	margin-bottom: 12px;
}

.lbm-g-benef__item p:last-child {
	margin-top: 10px;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--c-suave);
}

/* ── Pasos 01–04 ───────────────────────────────────────── */

.lbm-g-pasos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 2.4vw, 32px);
	max-width: var(--c-ancho);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.lbm-g-paso {
	padding-top: 22px;
	border-top: 1px solid var(--c-linea-fuerte);
}

.lbm-g-paso__n {
	display: block;
	font-family: var(--f-bold);
	font-size: 12.5px;
	letter-spacing: .12em;
	color: var(--c-naranja-osc);
	margin-bottom: 12px;
	font-variant-numeric: tabular-nums;
}

.lbm-g-paso p {
	margin-top: 10px;
	font-size: 15.5px;
	line-height: 1.58;
	color: var(--c-suave);
}

/* ── Foto ──────────────────────────────────────────────── */

.lbm-g-foto figure {
	max-width: 820px;
	margin: 0 auto;
}

.lbm-g-foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--c-radio);
}

.lbm-g-foto figcaption {
	max-width: 58ch;
	margin: 14px auto 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-suave);
	text-align: center;
}

/* ── Tabla ─────────────────────────────────────────────── */

.lbm-g-tabla {
	max-width: 960px;
	margin: 0 auto;
	overflow-x: auto;
	border: 1px solid var(--c-linea);
	border-radius: var(--c-radio);
	background: var(--c-papel);
}

.lbm-g-tabla table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

.lbm-g-tabla th,
.lbm-g-tabla td {
	padding: 14px 18px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--c-linea);
}

.lbm-g-tabla thead th {
	font-family: var(--f-semi);
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .92);
	background: var(--c-grafito);
	border-bottom: 0;
	white-space: nowrap;
}

.lbm-g-tabla tbody th {
	font-family: var(--f-semi);
	font-weight: 400;
	color: var(--c-tinta);
	width: 27%;
}

.lbm-g-tabla tbody td { color: var(--c-texto); }
.lbm-g-tabla tbody tr:last-child th,
.lbm-g-tabla tbody tr:last-child td { border-bottom: 0; }
.lbm-g-tabla tbody tr:nth-child(even) { background: rgba(68, 80, 85, .028); }

.lbm-g-tabla__pie {
	max-width: 960px;
	margin: 14px auto 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-suave);
}

/* ── Banda oscura ──────────────────────────────────────── */

.lbm-g-banda { padding-left: clamp(16px, 4vw, 40px); padding-right: clamp(16px, 4vw, 40px); }

.lbm-g-banda__marco {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, .85fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	max-width: var(--c-ancho);
	margin: 0 auto;
	padding: clamp(32px, 4vw, 54px);
	border-radius: var(--c-radio);
	background: var(--c-grafito-osc);
	color: rgba(255, 255, 255, .76);
}

.lbm-g-banda h2,
.lbm-g-banda h3 { color: #fff; }

.lbm-g-banda .lbm-g-eyebrow { color: var(--c-naranja-cl); }

.lbm-g-banda__lead {
	margin-top: 16px;
	max-width: 40em;
	font-size: 17px;
	line-height: 1.62;
	color: rgba(255, 255, 255, .8);
}

.lbm-g-banda__lead strong { font-family: var(--f-semi); color: #fff; }

.lbm-g-banda__lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(18px, 2.4vw, 30px);
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.lbm-g-banda__lista li {
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .18);
}

.lbm-g-banda__lista p {
	margin-top: 9px;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .7);
}

.lbm-g-banda__tarjeta {
	padding: 26px 22px;
	border-radius: var(--c-radio);
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .16);
	text-align: center;
}

.lbm-g-banda__tarjeta strong {
	display: block;
	font-family: var(--f-bold);
	font-size: clamp(22px, 2vw, 27px);
	line-height: 1.15;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.lbm-g-banda__tarjeta span {
	display: block;
	margin-top: 8px;
	font-size: 13.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .68);
}

/* ── Enlaces internos ──────────────────────────────────── */

.lbm-g-enlaces {
	max-width: var(--c-lectura);
	margin: 0 auto;
}

.lbm-g-enlaces h2 { margin-bottom: 22px; }

.lbm-g-enlaces ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lbm-g-enlaces li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 12px;
	padding: 15px 0;
	border-bottom: 1px solid var(--c-linea);
}

.lbm-g-enlaces li:first-child { border-top: 1px solid var(--c-linea); }

.lbm-g-enlaces a {
	font-family: var(--f-semi);
	font-size: 16.5px;
}

.lbm-g-enlaces span {
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--c-suave);
}

/* ── FAQ ───────────────────────────────────────────────── */

.lbm-g-faq {
	max-width: var(--c-lectura);
	margin: 0 auto;
}

.lbm-g-faq h2 {
	margin-bottom: clamp(18px, 2.2vw, 28px);
}

.lbm-g-faq__item { border-bottom: 1px solid var(--c-linea); }
.lbm-g-faq__item:first-of-type { border-top: 1px solid var(--c-linea); }

.lbm-g-faq__item summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 17px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--f-semi);
	font-size: 17px;
	line-height: 1.4;
	color: var(--c-tinta);
}

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

.lbm-g-faq__item summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 20px;
	line-height: 1;
	color: var(--c-naranja);
	transition: transform .2s ease;
}

.lbm-g-faq__item[open] summary::after { transform: rotate(45deg); }

.lbm-g-faq__item p {
	padding: 0 0 20px;
	max-width: 62ch;
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--c-texto);
}

/* ── Cierre ────────────────────────────────────────────── */

.lbm-g-cierre {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.lbm-g-cierre p {
	margin-top: 18px;
	font-size: 17px;
	line-height: 1.68;
	color: var(--c-texto);
}

.lbm-g-cierre .lbm-g-btn { margin-top: 30px; }

.lbm-g-cierre__nota {
	margin-top: 22px !important;
	font-size: 14.5px !important;
	line-height: 1.55 !important;
	color: var(--c-suave) !important;
}

.lbm-g-cierre__nota a { color: var(--c-grafito); text-underline-offset: 3px; }

/* ── Legal ─────────────────────────────────────────────── */

.lbm-g-legal {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 40px) clamp(44px, 5vw, 68px);
	font-size: 13px;
	line-height: 1.55;
	color: var(--c-suave);
	text-align: center;
}

/* ── Adaptación ────────────────────────────────────────── */

@media (max-width: 1024px) {
	.lbm-g-hero,
	.lbm-g-tema,
	.lbm-g-banda__marco { grid-template-columns: 1fr; }
	.lbm-g-hero__img { order: -1; }
	.lbm-g-cifras,
	.lbm-g-benef,
	.lbm-g-pasos { grid-template-columns: repeat(2, 1fr); }
	.lbm-g-hero__img img { max-height: 44vh; }
}

@media (max-width: 640px) {
	.lbm-guia { font-size: 16.5px; }
	.lbm-g-cifras { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
	.lbm-g-benef,
	.lbm-g-pasos,
	.lbm-g-banda__lista { grid-template-columns: 1fr; }
	.lbm-g-hero__cta { flex-direction: column; align-items: stretch; }
	.lbm-g-btn { text-align: center; }
	.lbm-g-tabla table { min-width: 520px; }
	.lbm-g-resp { padding-left: 14px; font-size: 17.5px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.lbm-guia * { transition: none !important; }
}

/* ── Divi carga después ────────────────────────────────── */

.et-db #et-boc .et-l .lbm-guia h1,
.et-db #et-boc .et-l .lbm-guia h2,
.et-db #et-boc .et-l .lbm-guia h3 {
	font-family: var(--f-bold);
	font-weight: 400;
	padding: 0;
	color: var(--c-tinta);
}

.et-db #et-boc .et-l .lbm-guia .lbm-g-hero__h1 span { color: var(--c-naranja); }

.et-db #et-boc .et-l .lbm-guia .lbm-g-banda h2,
.et-db #et-boc .et-l .lbm-guia .lbm-g-banda h3,
.et-db #et-boc .et-l .lbm-guia .lbm-g-head--claro h2 { color: #fff; }

.et-db #et-boc .et-l .lbm-guia a { transition: none; }

.et-db #et-boc .et-l .lbm-guia .lbm-g-btn {
	color: #fff;
	transition: background-color .2s ease, transform .2s ease;
}

.et-db #et-boc .et-l .lbm-guia .lbm-g-btn--claro { color: var(--c-grafito-osc); }

.et-db #et-boc .et-l .lbm-guia .lbm-g-tabla table {
	border-collapse: collapse;
	margin: 0;
	border: 0;
}

.et-db #et-boc .et-l .lbm-guia .lbm-g-tabla th,
.et-db #et-boc .et-l .lbm-guia .lbm-g-tabla td {
	padding: 14px 18px;
	border: 0;
	border-bottom: 1px solid var(--c-linea);
}

.et-db #et-boc .et-l .lbm-guia .lbm-g-tabla thead th {
	color: rgba(255, 255, 255, .92);
	background: var(--c-grafito);
	border-bottom: 0;
}

.et-db #et-boc .et-l .lbm-guia .lbm-g-prosa a,
.et-db #et-boc .et-l .lbm-guia .lbm-g-enlaces a,
.et-db #et-boc .et-l .lbm-guia .lbm-g-faq__item a {
	color: var(--c-grafito);
	text-decoration: underline;
}

/* ── Entrada al hacer scroll ───────────────────────────── */

.lbm-g-anim .lbm-g-cifra,
.lbm-g-anim .lbm-g-benef__item,
.lbm-g-anim .lbm-g-paso,
.lbm-g-anim .lbm-g-head,
.lbm-g-anim .lbm-g-promesa,
.lbm-g-anim .lbm-g-cierre,
.lbm-g-anim .lbm-g-tema {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}

.lbm-g-anim .is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.lbm-g-anim .lbm-g-cifra,
	.lbm-g-anim .lbm-g-benef__item,
	.lbm-g-anim .lbm-g-paso,
	.lbm-g-anim .lbm-g-head,
	.lbm-g-anim .lbm-g-promesa,
	.lbm-g-anim .lbm-g-cierre,
	.lbm-g-anim .lbm-g-tema {
		opacity: 1;
		transform: none;
	}
}