/*
Theme Name:   Bosque Negocio
Theme URI:    https://bosquenegocio.com
Description:  Child theme de Divi que reconstruye el sistema visual de bosquenegocio.com (2019-2020) a partir del material grafico del respaldo. Comfortaa para titulares e Inter para lectura, autoalojadas, paleta muestreada de las capturas de mayo 2020, ondas verdes en capas, marcos organicos y animaciones de scroll.
Author:       Nativocrea
Author URI:   https://nativocrea.com
Template:     Divi
Version:      1.5.0
License:      GNU General Public License v2 or later
Text Domain:  bosque-negocio
*/

/* ==========================================================================
   1. Tipografias autoalojadas
   Comfortaa (titulares) e Inter (lectura e interfaz), ambas con licencia OFL.
   Los .woff2 y las licencias estan en /fonts/.

   Dosis, que era el texto del sitio de 2019, se retiro: es condensada y de altura
   de x baja, y en parrafos largos generaba ruido. Con ella se fueron cinco WOFF2
   (228 KB) y sus cinco declaraciones. Para volver a ella hay que traer los
   archivos otra vez —estan en Google Fonts, con licencia OFL— y recalibrar los
   tamanos, que hoy estan calculados sobre la altura de x de Inter.

   Los dos Comfortaa que se usan van subseteados a latin. Sin subsetear arrastraban
   cirilico, griego y vietnamita: 844 caracteres en el cmap para un sitio en
   espanol e ingles. De 46 KB cada uno a 18 KB, y uno de ellos va precargado.
   ========================================================================== */

@font-face {
	font-family: 'Comfortaa';
	src: url('fonts/Comfortaa-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Comfortaa';
	src: url('fonts/Comfortaa-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Comfortaa';
	src: url('fonts/Comfortaa-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Inter en su version variable: un solo archivo por subconjunto cubre de 100 a
   900, asi que los cuatro pesos que usa el sitio salen de 48 KB en lugar de
   cuatro descargas. El rango de peso se declara para que el navegador interpole
   de verdad y no sintetice una negrita falsa.

   Se separan los dos subconjuntos de Google: 'latin' basta para el espanol y el
   ingles del sitio, y 'latin-ext' (37 KB mas) solo se descarga si aparece un
   caracter que lo necesite. */
@font-face {
	font-family: 'Inter';
	src: url('fonts/Inter-Variable-latin.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/Inter-Variable-latin-ext.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* ==========================================================================
   2. Fichas de diseno
   Los verdes salen de un muestreo de las capturas del 5 de mayo de 2020.
   ========================================================================== */

:root {
	/* Verdes */
	--bn-verde: #7cda24;          /* primario: onda del hero, botones */
	--bn-verde-medio: #5cac26;    /* titulares de acento, iconos, enlaces */
	--bn-verde-lima: #a0eb00;     /* regla fina divisoria */
	--bn-verde-claro: #a9e770;    /* onda secundaria translucida */
	--bn-verde-palido: #deeed3;   /* fondo de los circulos de icono */
	--bn-verde-oscuro: #2f6b14;   /* texto sobre verde brillante */

	/* Neutros */
	--bn-tinta: #333333;          /* texto corrido */
	--bn-tinta-suave: #666666;    /* texto secundario */
	--bn-oscuro: #232323;
	--bn-linea: #ededed;
	--bn-blanco: #ffffff;

	/* Verdes de tinta: para texto, enlaces, estados e indicadores.
	   Los verdes de arriba son colores de SUPERFICIE. Medidos contra los cinco
	   fondos claros del sitio, --bn-verde-medio da entre 2,84:1 y 2,12:1, muy por
	   debajo del 4,5:1 de la AA. Estos dos si pasan:
	     --bn-verde-tinta:  7,55 / 7,42 / 7,11 / 6,23 / 5,63:1
	     --bn-verde-carbon: 13,12 / 12,89 / 12,34 / 10,82 / 9,78:1
	   No sustituyen a los de marca: conviven. */
	--bn-verde-tinta: #2a6012;
	--bn-verde-carbon: #14380c;

	/* Verdes profundos, para los fondos oscuros.
	   Son mas oscuros que --bn-verde-oscuro, que se queda para el texto sobre
	   verde brillante y no serviria de fondo a este nivel de contraste. */
	--bn-verde-profundo: #1c5213;
	--bn-verde-abismo: #0a2405;

	/* Fondos de pagina.
	   El blanco se retiro como fondo general: el sitio se apoya en un lavado
	   verde muy claro, con las tarjetas y los marcos en blanco para que
	   destaquen. La segunda seccion de cada pagina y la barra del pie van en
	   verde profundo.
	   Los dos son degradados, no colores planos: dan profundidad sin recurrir a
	   mas fotografia, y el radial del oscuro insinua una luz cenital que
	   acompana al bosque. */
	--bn-fondo-claro-0: #fbfef8;  /* el mas claro de la familia, casi blanco */
	--bn-fondo-claro-1: #f4faee;
	--bn-fondo-claro-2: #dfeed4;
	--bn-fondo-claro-3: #d0e5c1;

	--bn-fondo: linear-gradient(
		180deg,
		var(--bn-fondo-claro-1) 0%,
		var(--bn-fondo-claro-2) 45%,
		var(--bn-fondo-claro-3) 100%
	);

	/* Contraste del blanco sobre el degradado oscuro: 7,07:1 en su punto mas claro
	   y 16,57:1 en el mas oscuro. Ambos por encima de AA con holgura.
	   El punto mas claro NO es #1c5213 desnudo —eso daria 9,27:1— sino ese verde
	   con el radial de lima al 14% encima, que lo sube a rgb(41,101,21). */
	--bn-fondo-oscuro: radial-gradient(
			125% 85% at 50% 0%,
			rgba(124, 218, 36, 0.14) 0%,
			rgba(124, 218, 36, 0) 62%
		),
		linear-gradient(
			165deg,
			var(--bn-verde-profundo) 0%,
			#10330a 55%,
			var(--bn-verde-abismo) 100%
		);

	/* Fondo de la barra de navegacion.
	   Es un degradado propio y no un trozo del de la pagina: la cabecera mide
	   unos 100px y el lavado general esta calculado sobre la altura completa del
	   documento, asi que ahi arriba se veria como un color plano.
	   Va casi horizontal —168 grados— para que el logo, que queda a la izquierda,
	   se apoye en el tono mas claro, y la barra se oscurezca hacia el borde
	   inferior derecho, donde empalma con el lavado de la pagina. */
	--bn-fondo-cabecera: linear-gradient(
		168deg,
		var(--bn-fondo-claro-0) 0%,
		var(--bn-fondo-claro-1) 45%,
		var(--bn-fondo-claro-3) 100%
	);

	/* Tipografia.
	   Comfortaa solo titula; Inter se ocupa de todo lo que se lee, incluida la
	   interfaz. Dos familias en vez de tres: la jerarquia queda mas clara y el
	   sitio carga menos. */
	--bn-titular: 'Comfortaa', 'Trebuchet MS', sans-serif;
	--bn-texto: 'Inter', system-ui, 'Segoe UI', sans-serif;

	/* Escala de lectura.
	   Los px bajan al pasar a Inter, pero el texto NO se ve mas pequeno: la
	   altura de x de Inter es 0,546 em contra 0,473 em de Dosis, un 15% mas.
	   Medido: Dosis a 26px daba una x de 12,30px; Inter a 23px da 12,56px. El
	   cuerpo pasa de 9,46px de x a 9,83px. Es decir, mismo tamano aparente o un
	   punto mayor, con letras mas abiertas y sin el ruido de la condensada.
	   Los dos valores estan aqui para ajustarlos en un solo sitio. */
	--bn-cuerpo: 18px;            /* texto general, navegacion, listas */
	--bn-lectura: 23px;           /* parrafos de lectura */

	/* La medida se mide en ch, que es el ancho del cero de la fuente en uso, de
	   modo que sigue valiendo aunque cambie la familia. Inter es un 19% mas ancha
	   por caracter que Dosis, asi que el tope en px sube para no recortar la
	   linea por debajo de las 60 letras. */
	--bn-lectura-medida: min(64ch, 960px);

	/* Ritmo */
	--bn-radio-organico: 2.5rem;
	--bn-onda-alto: clamp(56px, 7vw, 110px);
	--bn-transicion: 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   3. Tipografia base
   Divi genera su propio CSS de fuentes desde las Opciones del Tema; se fuerza
   la familia para que el sistema de marca gane sin tener que configurar Divi.
   ========================================================================== */

body,
body .et_pb_module,
body input,
body textarea,
body select,
body button {
	font-family: var(--bn-texto) !important;
	color: var(--bn-tinta);
}

/* Va con html delante a proposito: el CSS dinamico de Divi se inyecta en linea
   despues de esta hoja con la regla `body { font-size: 14px }`, que tiene la
   misma especificidad y por orden ganaba. Con html body sube a 0,0,2 y manda. */
html body {
	font-size: var(--bn-cuerpo);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	/* El color plano queda de reserva por si el degradado no se soporta */
	background-color: var(--bn-fondo-claro-2);
	background-image: var(--bn-fondo);
	background-repeat: no-repeat;
}

/* Divi pinta de blanco el contenedor de la pagina; se deja transparente para
   que el verde del body sea el fondo real. Las secciones ya son transparentes
   por defecto, asi que no se tocan: hacerlo pisaria los fondos que se definan
   desde el constructor. */
#page-container,
#et-main-area,
#main-content {
	background-color: transparent;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .et_pb_module h1,
body .et_pb_module h2,
body .et_pb_module h3,
body .et_pb_module h4,
body .et_pb_module h5,
body .et_pb_module h6 {
	font-family: var(--bn-titular) !important;
	color: var(--bn-tinta);
	line-height: 1.18;
	letter-spacing: -0.01em;
}

body h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); font-weight: 700; }
body h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); font-weight: 700; }
body h4 { font-size: clamp(1.15rem, 2vw, 1.4rem);  font-weight: 400; }

/* El h3 va en peso normal a proposito: en la captura de Products el rotulo
   "Super Foods" contrapone Super en regular con Foods en negrita, y ese
   contraste solo existe si la base no es ya negrita. */
body h3 { font-size: clamp(1.4rem, 2.6vw, 2rem);   font-weight: 400; }

body p {
	font-weight: 400;
}

/* Parrafos de lectura.
   Son los que llevan el peso del texto. La medida se limita porque una linea
   larga a este cuerpo se vuelve incomoda de seguir.
   La interlinea sube de 1,5 a 1,55: la x alta de Inter llena mas la linea y
   necesita algo mas de aire que la condensada que habia antes. */
.bn-texto p,
.et_pb_text_align_center p,
.et_pb_text p {
	font-size: var(--bn-lectura);
	line-height: 1.55;
	max-width: var(--bn-lectura-medida);
}

.et_pb_text_align_center p {
	margin-inline: auto;
}

/* Las listas de objetivos son lectura, pero en dos columnas: un paso menos. */
.bn-lista li {
	font-size: calc(var(--bn-lectura) - 4px);
	line-height: 1.45;
	max-width: none;
}

/* Las tarjetas no son texto de lectura sino rotulos cortos en columnas de unos
   215px: al tamano de lectura caerian a tres palabras por linea. El cuerpo se
   fija abajo, en el bloque de las tarjetas; aqui solo se libera la medida, que
   heredarian de la regla de lectura. */
.bn-tarjeta p {
	max-width: none;
}

/* Contraste de peso dentro de un titular: <h3>Super <strong>Foods</strong></h3>.
   El original lo resolvia con peso, no con color, asi que el strong hereda la
   tinta del titular. */
body h1 strong,
body h2 strong,
body h3 strong {
	font-weight: 700;
}

/* Resaltes dentro del texto corrido, como en la seccion Coinpa */
.bn-texto strong,
.et_pb_text strong {
	font-weight: 700;
	color: var(--bn-tinta);
}

/* Enlaces del texto corrido.
   Va con `body` delante y con los contenedores de Divi por delante porque hasta
   ahora esta regla NO ganaba: Divi inyecta su color de acento —#2add42, que no es
   un color de esta paleta— en el bloque et-critical-inline-css, que se escribe
   despues de esta hoja y con la misma especificidad. Comprobado en el DOM: un
   enlace de contenido computaba rgb(42,221,66), que sobre el lavado claro da
   1,71:1. Con --bn-verde-tinta pasa a 7,11:1.

   Conviene cambiar tambien el color de acento en Divi › Opciones del Tema, porque
   ese #2add42 se filtra ademas al borde del menu movil, al de los submenus, al del
   buscador y a los blockquote. */
body a,
.et_pb_text a,
.et_pb_text_inner a {
	color: var(--bn-verde-tinta);
	transition: color var(--bn-transicion);
}

/* El subrayado no es decorativo: --bn-verde-tinta solo se separa 1,67:1 de la
   tinta del texto corrido, por debajo del 3:1 que exige distinguir un enlace
   dentro de un parrafo por color solo. Con subrayado el problema desaparece, y
   es lo que la gente espera de un enlace. */
body .et_pb_text a,
body .et_pb_text_inner a,
body .bn-texto a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body a:hover,
.et_pb_text a:hover {
	color: var(--bn-verde-carbon);
	text-decoration-thickness: 2px;
}

/* Sobre verde oscuro la tinta no sirve: ahi el enlace se aclara al lima */
body .bn-oscura a {
	color: var(--bn-verde-lima);
}

/* ==========================================================================
   3b. Seccion en verde oscuro
   Viste la segunda seccion de cada pagina y rompe la sucesion de fondos
   claros. El color se aplica desde aqui, no desde el constructor, para que la
   paleta siga viviendo en un solo sitio.
   ========================================================================== */

body .bn-oscura {
	background-color: var(--bn-verde-abismo);
	background-image: var(--bn-fondo-oscuro);
	background-repeat: no-repeat;
}

body .bn-oscura h1,
body .bn-oscura h2,
body .bn-oscura h3,
body .bn-oscura h4,
body .bn-oscura h5,
body .bn-oscura h6,
body .bn-oscura p,
body .bn-oscura li,
body .bn-oscura .et_pb_text,
body .bn-oscura .bn-texto {
	color: var(--bn-blanco);
}

/* Los resaltes en negrita se aclaran al verde lima para que sigan destacando
   sobre el fondo oscuro. */
body .bn-oscura strong {
	color: var(--bn-verde-lima);
}

/* Las vinetas de las listas necesitan aclararse igual */
.bn-oscura .bn-lista li::before {
	background: var(--bn-verde-lima);
}

/* La regla fina pierde contraste sobre verde oscuro */
.bn-oscura .bn-regla {
	border-top-color: rgba(255, 255, 255, 0.35);
}

/* Las tarjetas y los marcos se quedan en blanco: sobre el verde oscuro ganan
   presencia y su contenido sigue leyendose en tinta. */
.bn-oscura .bn-tarjeta h4,
.bn-oscura .bn-tarjeta .et_pb_module_header {
	color: var(--bn-tinta);
}

.bn-oscura .bn-tarjeta p {
	color: var(--bn-tinta-suave);
}

/* Boton sobre verde oscuro: el verde brillante ya contrasta, pero el texto
   oscuro del boton necesita mantenerse. */
.bn-oscura .et_pb_button {
	color: var(--bn-verde-oscuro) !important;
}

/* Formulario de contacto sobre verde oscuro */
.bn-oscura .et_pb_contact_form_label,
.bn-oscura .et_pb_contact_main_title {
	color: var(--bn-blanco);
}

.bn-oscura .et_pb_contact_field input,
.bn-oscura .et_pb_contact_field textarea,
.bn-oscura .et_pb_contact_field_options_list input {
	background-color: var(--bn-blanco) !important;
	border: 2px solid rgba(255, 255, 255, 0.4) !important;
	border-radius: 12px !important;
	color: var(--bn-tinta) !important;
	font-size: 17px;
}

.bn-oscura .et_pb_contact_field input::placeholder,
.bn-oscura .et_pb_contact_field textarea::placeholder {
	color: var(--bn-tinta-suave);
}

.bn-oscura .et_pb_contact_field input:focus-visible,
.bn-oscura .et_pb_contact_field textarea:focus-visible {
	outline: 3px solid var(--bn-verde);
	outline-offset: 2px;
}

/* ==========================================================================
   4. Cabecera
   Fondo con el degradado claro, logo a la izquierda, menu en Inter. La pagina
   activa va en verde, como en la captura de Products.
   ========================================================================== */

/* Divi emite `#main-header { background-color: #fff }` en su CSS dinamico, que se
   inyecta en linea despues de esta hoja: misma especificidad y gana por orden.
   Con `body` delante sube a 1 id + 1 elemento y manda, sin necesidad de
   !important. Es el mismo caso que el font-size del body.

   El color plano queda de reserva por si el degradado no se soporta, y tambien
   es lo que ve el navegador durante la transicion de 0,4s que Divi pone sobre
   background-color al fijarse la cabecera. */
body #main-header {
	background-color: var(--bn-fondo-claro-1);
	background-image: var(--bn-fondo-cabecera);
	background-repeat: no-repeat;
	/* La sombra pasa de negra a verde profundo muy diluido: sobre un fondo
	   tenido, el gris neutro se veia sucio. */
	box-shadow: 0 1px 0 rgba(28, 82, 19, 0.1), 0 6px 18px rgba(28, 82, 19, 0.06);
}

/* Al fijarse, Divi sustituye la sombra con !important; el fondo lo mantiene el
   selector de arriba, pero se repite el degradado para que el estado fijo no
   dependa de la herencia de una clase que Divi anade y quita con JS. */
body #main-header.et-fixed-header {
	background-color: var(--bn-fondo-claro-1);
	background-image: var(--bn-fondo-cabecera);
}

/* El desplegable movil y los submenus son parte de la misma barra: si se quedan
   blancos, el degradado se corta en seco al abrirlos. */
body .et_mobile_menu,
body #main-header .et_mobile_menu {
	background-color: var(--bn-fondo-claro-1);
	background-image: var(--bn-fondo-cabecera);
	border-top-color: var(--bn-verde);
}

/* Logo de la cabecera.
   Divi lo limita al 54% del alto de la cabecera y, con un logotipo casi
   cuadrado, eso lo dejaba en 46px: demasiado pequeno para que se leyeran el
   isotipo y el wordmark. Se sube al 82%, unos 70px, que deja 8px de holgura
   arriba y abajo.
   No se toca el alto de la cabecera a proposito: Divi calcula desde el el
   centrado vertical del menu, y cambiarlo lo descuadra. */
#main-header #logo {
	max-height: 82%;
	transition: max-height var(--bn-transicion);
}

/* Al fijarse la cabecera al hacer scroll, Divi la encoge; el logo la acompana */
.et-fixed-header #logo {
	max-height: 76%;
}

/* Inter es un 19% mas ancha por caracter que la condensada anterior, y la
   cabecera tiene que dar cabida a cinco rotulos largos, al logo de 70px y al
   conmutador de idioma. Se baja a 15px y se anula el espaciado adicional: aun
   asi la x resulta un 8% mas alta que la de Dosis a 16px, asi que el menu se lee
   mejor ocupando menos. */
#top-menu li a,
.et_mobile_menu li a {
	font-family: var(--bn-texto) !important;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0;
	color: var(--bn-tinta);
}

/* La pagina activa se marca con color y con peso: en Inter el salto de 500 a 600
   ya se distingue, y no depender solo del verde ayuda a quien no separa bien los
   tonos.

   El verde es --bn-verde-oscuro y no --bn-verde-medio a proposito. Medido sobre
   los tonos del degradado de la cabecera, #5cac26 daba entre 2,68:1 y 2,35:1,
   por debajo del 4,5:1 que pide la AA; #2f6b14 da entre 6,11:1 y 5,35:1. Es el
   verde mas claro de la paleta que pasa sobre los cuatro fondos claros. */
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a,
.et_mobile_menu li.current-menu-item > a {
	color: var(--bn-verde-tinta) !important;
	font-weight: 600;
}

#top-menu li a:hover {
	color: var(--bn-verde-tinta);
	opacity: 1;
}

/* Submenus de "Knowledge BN" y "Research" */
#top-menu .sub-menu {
	border-top: 3px solid var(--bn-verde);
	border-radius: 0 0 12px 12px;
	overflow: hidden;
	/* Plano, no degradado: el panel cuelga de la barra y un degradado propio de
	   100px se leeria como un segundo fondo en lugar de una prolongacion. */
	background-color: var(--bn-fondo-claro-0) !important;
}

.mobile_menu_bar:before {
	color: var(--bn-verde-medio) !important;
}

/* ==========================================================================
   4b. Conmutador de idioma
   Español e inglés visibles a la vez, con bandera y código. El idioma actual
   va en verde y opacidad plena; el otro, atenuado hasta el hover, para que se
   lea cuál está activo sin necesidad de leer el código.
   ========================================================================== */

#top-menu li.bn-idiomas {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin-left: 14px;
	padding-left: 16px;
	padding-right: 0;
	border-left: 1px solid rgba(0, 0, 0, 0.12);
}

/* Divi le pone un ancho fijo a los enlaces de cualquier lista anidada del menú
   (#top-menu li li a), pensando en submenús. Aquí estiraba la pastilla del
   idioma a 200 px y empujaba el conmutador a una segunda línea. */
/* El desplegable movil tiene su propia regla de ancho —.et_mobile_menu li a va al
   100%— asi que si no se incluye aqui, las dos banderas se apilan una debajo de
   otra en vez de ir en linea. */
#top-menu li.bn-idiomas li,
#top-menu li.bn-idiomas li a,
.et_mobile_menu li.bn-idiomas li,
.et_mobile_menu li.bn-idiomas li a {
	width: auto !important;
	min-width: 0;
	float: none;
}

/* Divi oculta los submenús de nivel 2 hasta el hover: esta lista no es un
   submenú, así que se fuerza visible y en línea. */
#top-menu li.bn-idiomas > ul.bn-idiomas-lista,
.et_mobile_menu li.bn-idiomas > ul.bn-idiomas-lista {
	position: static !important;
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	gap: 4px;
	width: auto;
	padding: 0;
	margin: 0;
	border: none;
	box-shadow: none;
	background: none;
	list-style: none;
}

.bn-idiomas-lista li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#top-menu .bn-idiomas-lista li a,
.et_mobile_menu .bn-idiomas-lista li a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px !important;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	/* En caja alta y a este cuerpo, Inter agradece algo mas de espaciado */
	letter-spacing: 0.06em;
	color: var(--bn-tinta-suave);
	opacity: 0.55;
	transition: opacity var(--bn-transicion), background-color var(--bn-transicion),
	            color var(--bn-transicion);
}

/* La bandera que sirve Polylang es un PNG de 16x11 en base64 */
.bn-idiomas-lista img {
	display: block;
	width: 20px;
	height: auto;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

#top-menu .bn-idiomas-lista li a:hover,
.et_mobile_menu .bn-idiomas-lista li a:hover {
	opacity: 1;
	background: var(--bn-verde-palido);
	color: var(--bn-verde-oscuro);
}

/* El idioma activo va en pastilla sólida, no en verde pálido.
   Con la cabecera en degradado, la pastilla `#deeed3` contra el `#dfeed4` del
   degradado daba 1,00:1 —luminancias idénticas— y desaparecía literalmente. En
   sólido, el blanco sobre `#2a6012` da 7,55:1 y la pastilla se distingue del
   fondo de la barra en cualquier punto del degradado. */
#top-menu .bn-idiomas-lista li.current-lang a,
.et_mobile_menu .bn-idiomas-lista li.current-lang a {
	opacity: 1;
	color: var(--bn-blanco);
	background: var(--bn-verde-tinta);
}

/* El idioma inactivo era el texto más pequeño y de menor contraste del sitio:
   `#666` al 55% de opacidad compone `#ababab`, que da 2,30:1. Se quita la
   opacidad —que era la causa— y se oscurece: 5,40:1 sobre el degradado. */
#top-menu .bn-idiomas-lista li a,
.et_mobile_menu .bn-idiomas-lista li a {
	color: #4f4f4f;
	opacity: 1;
}

#top-menu .bn-idiomas-lista li a:hover,
.et_mobile_menu .bn-idiomas-lista li a:hover {
	background: var(--bn-verde-palido);
	color: var(--bn-verde-carbon);
}

/* En móvil el menú es una lista apilada: el conmutador va centrado y separado */
@media (max-width: 980px) {
	.et_mobile_menu li.bn-idiomas {
		margin-left: 0;
		padding: 12px 5%;
		border-left: none;
		border-top: 1px solid rgba(0, 0, 0, 0.08);
	}

	.et_mobile_menu li.bn-idiomas > ul.bn-idiomas-lista {
		justify-content: center;
		gap: 10px;
	}
}

/* ==========================================================================
   5. Hero con onda verde en capas
   El remate del hero son tres curvas superpuestas: una verde clara
   translucida, la verde brillante solida y un remate blanco. Se resuelve con
   un solo SVG estirado a lo ancho, para que escale sin deformar el texto.
   ========================================================================== */

.bn-hero {
	position: relative;
	overflow: hidden;
}

.bn-hero::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(90px, 13vw, 210px);
	pointer-events: none;
	z-index: 2;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: bottom center;
	/* El remate inferior de la onda era blanco cuando la pagina lo era. Ahora
	   lleva el tono con el que arranca el degradado claro, para que empalme sin
	   dejar una franja blanca. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cpath d='M0,26 Q720,196 1440,16 L1440,240 L0,240 Z' fill='%23a9e770' opacity='0.5'/%3E%3Cpath d='M0,72 Q720,220 1440,54 L1440,240 L0,240 Z' fill='%237cda24'/%3E%3Cpath d='M0,240 L0,206 Q720,142 1440,212 L1440,240 Z' fill='%23f4faee'/%3E%3C/svg%3E");
}

/* El contenido del hero debe quedar sobre la onda */
.bn-hero > .et_pb_row,
.bn-hero .et_pb_row {
	position: relative;
	z-index: 3;
}

/* Isotipo dentro del circulo blanco */
.bn-hero-marca .et_pb_image_wrap,
.bn-medallon .et_pb_image_wrap {
	display: grid;
	place-items: center;
	width: clamp(150px, 19vw, 260px);
	height: clamp(150px, 19vw, 260px);
	margin: 0 auto;
	padding: clamp(24px, 3.2vw, 44px);
	background: var(--bn-blanco);
	border-radius: 50%;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.16);
}

.bn-hero-marca img,
.bn-medallon img {
	width: 100%;
	height: auto;
}

/* Titular y bajada del hero */
.bn-hero-titulo h1 {
	color: var(--bn-blanco) !important;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.28);
	margin-bottom: 0.25em;
}

.bn-hero-bajada p,
.bn-hero-bajada {
	font-family: var(--bn-texto) !important;
	font-weight: 600;
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
	color: var(--bn-blanco) !important;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
	letter-spacing: 0.01em;
}

/* Flecha de bajada, animada */
.bn-chevron {
	display: block;
	width: 34px;
	height: 34px;
	margin: 0.6rem auto 0;
	border-right: 3px solid var(--bn-blanco);
	border-bottom: 3px solid var(--bn-blanco);
	transform: rotate(45deg);
	animation: bn-latir 2.2s ease-in-out infinite;
	opacity: 0.95;
}

@keyframes bn-latir {
	0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.95; }
	50%      { transform: rotate(45deg) translate(5px, 5px); opacity: 0.55; }
}

/* ==========================================================================
   6. Ondas divisorias entre secciones
   La franja panoramica del original va abrazada por ondas verdes arriba y
   abajo. Se aplican como clases sueltas para poder combinarlas.
   ========================================================================== */

.bn-onda-arriba,
.bn-onda-abajo {
	position: relative;
}

.bn-onda-arriba::before,
.bn-onda-abajo::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: var(--bn-onda-alto);
	pointer-events: none;
	z-index: 4;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.bn-onda-arriba::before {
	top: -1px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,30 C1150,74 1010,10 720,36 C430,62 290,4 0,34 Z' fill='%237cda24'/%3E%3Cpath d='M0,0 L1440,0 L1440,14 C1150,52 1010,-4 720,18 C430,40 290,-6 0,16 Z' fill='%23a9e770' opacity='0.55'/%3E%3C/svg%3E");
}

.bn-onda-abajo::after {
	bottom: -1px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,80 L1440,80 L1440,50 C1150,6 1010,70 720,44 C430,18 290,76 0,46 Z' fill='%237cda24'/%3E%3Cpath d='M0,80 L1440,80 L1440,66 C1150,28 1010,84 720,62 C430,40 290,86 0,64 Z' fill='%23a9e770' opacity='0.55'/%3E%3C/svg%3E");
}

/* ==========================================================================
   7. Marcos organicos de imagen
   El original enmarca las fotos con esquinas muy redondeadas y un filete
   verde: se ve en el camu camu de Products y en las fotos de Coinpa.
   ========================================================================== */

.bn-squircle .et_pb_image_wrap,
.bn-squircle img {
	border-radius: var(--bn-radio-organico);
	overflow: hidden;
}

/* Varias fotos del respaldo son pequenas y quedaban flotando en una columna
   mucho mas ancha. Se estiran al ancho de su columna: casi todas siguen
   reduciendose, no ampliandose. */
.bn-squircle .et_pb_image_wrap {
	display: block;
	width: 100%;
}

.bn-squircle img {
	display: block;
	width: 100%;
	height: auto;
}

.bn-squircle .et_pb_image_wrap {
	border: 3px solid var(--bn-verde);
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.1);
	background: var(--bn-blanco);
	transition: transform var(--bn-transicion), box-shadow var(--bn-transicion);
}

.bn-squircle:hover .et_pb_image_wrap {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.16);
}

/* Variante mas organica, con las esquinas desiguales: el recurso del
   camu camu en la pagina de Products. */
.bn-blob .et_pb_image_wrap,
.bn-blob img {
	border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
	overflow: hidden;
}

.bn-blob .et_pb_image_wrap {
	border: 3px solid var(--bn-verde);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   8. Regla fina divisoria
   Filete lima que abre las secciones de contenido.
   ========================================================================== */

.bn-regla .et_pb_divider_internal,
.bn-regla:before {
	border-top-color: var(--bn-verde-lima) !important;
}

.bn-regla {
	border-top: 2px solid var(--bn-verde-lima);
	max-width: 1080px;
	margin-inline: auto;
}

/* ==========================================================================
   9. Botones tipo pastilla
   ========================================================================== */

body .et_pb_button,
body .bn-boton {
	font-family: var(--bn-texto) !important;
	/* Inter a 700 empasta en una pastilla pequena; 600 da el mismo peso optico
	   que la negrita de la condensada anterior. */
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.02em;
	padding: 0.7em 2em !important;
	border: none !important;
	border-radius: 999px !important;
	background-color: var(--bn-verde) !important;
	color: var(--bn-verde-oscuro) !important;
	box-shadow: 0 6px 20px rgba(124, 218, 36, 0.4);
	transition: transform var(--bn-transicion), box-shadow var(--bn-transicion),
	            background-color var(--bn-transicion);
}

body .et_pb_button:hover,
body .bn-boton:hover {
	background-color: var(--bn-verde-medio) !important;
	color: var(--bn-blanco) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(92, 172, 38, 0.45);
	padding: 0.7em 2em !important;
}

/* Divi anade una flecha en hover; aqui estorba a la forma de pastilla */
body .et_pb_button:after {
	display: none !important;
}

/* Boton sobre fondo oscuro o fotografico */
.bn-boton-claro .et_pb_button,
.et_pb_button.bn-boton-claro {
	background-color: var(--bn-blanco) !important;
	color: var(--bn-verde-oscuro) !important;
}

/* ==========================================================================
   10. Tarjetas de "The Problems"
   Cinco columnas: circulo verde palido con icono, titulo y descripcion.
   ========================================================================== */

.bn-tarjeta {
	height: 100%;
	padding: 2rem 1.25rem 1.75rem;
	background: var(--bn-blanco);
	border: 1px solid var(--bn-linea);
	border-radius: 18px;
	text-align: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
	transition: transform var(--bn-transicion), box-shadow var(--bn-transicion),
	            border-color var(--bn-transicion);
}

.bn-tarjeta:hover {
	transform: translateY(-8px);
	border-color: var(--bn-verde);
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.1);
}

/* Circulo del icono: Divi lo pinta como .et_pb_main_blurb_image */
.bn-tarjeta .et_pb_main_blurb_image {
	margin-bottom: 1.1rem;
}

.bn-tarjeta .et_pb_image_wrap,
.bn-tarjeta .et-pb-icon {
	display: grid !important;
	place-items: center;
	width: 88px;
	height: 88px;
	margin: 0 auto;
	background: var(--bn-verde-palido);
	border: 2px solid var(--bn-verde-medio);
	border-radius: 50%;
	color: var(--bn-verde-medio);
	font-size: 38px !important;
	line-height: 1;
	transition: background-color var(--bn-transicion), transform var(--bn-transicion);
}

.bn-tarjeta:hover .et-pb-icon {
	background: var(--bn-verde);
	color: var(--bn-blanco);
	transform: scale(1.06);
}

/* Cinco columnas dejan poco ancho y Comfortaa es una tipografia ancha, asi que
   Divi partia palabras como Deforestation por la mitad. Se prohibe el corte y
   el cuerpo se ajusta al ancho disponible. */
.bn-tarjeta h4,
.bn-tarjeta .et_pb_module_header {
	font-family: var(--bn-titular) !important;
	font-size: clamp(0.95rem, 1.32vw, 1.15rem);
	font-weight: 400;
	margin-bottom: 0.5rem;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	text-wrap: balance;
}

/* Altura igualada: por defecto cada columna de Divi crece con su contenido y
   las tarjetas quedaban escalonadas. */
@media (min-width: 981px) {
	.bn-fila-tarjetas {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
	}

	.bn-fila-tarjetas .et_pb_column {
		display: flex;
		align-items: stretch;
		float: none;
		margin-bottom: 0;
	}

	/* La tarjeta debe ocupar todo el alto de su columna; Divi le pone un
	   margen inferior que rompia la igualdad. */
	.bn-fila-tarjetas .et_pb_blurb {
		display: flex;
		flex: 1 1 auto;
		width: 100%;
		margin-bottom: 0;
	}

	.bn-fila-tarjetas .et_pb_blurb .et_pb_blurb_content {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
}

/* 14px de Inter equivalen opticamente a los 15px de Dosis que habia antes, con
   un 8% mas de altura de x, y dejan margen para que Inter, mas ancha, siga
   entrando en una columna de 215px. */
.bn-tarjeta p {
	font-size: 14px;
	color: var(--bn-tinta-suave);
	line-height: 1.55;
}

/* ==========================================================================
   11. Listas de objetivos
   Vinetas verdes en lugar del disco por defecto.
   ========================================================================== */

.bn-lista ul {
	list-style: none;
	padding-left: 0;
}

.bn-lista li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 1.15rem;
	line-height: 1.55;
}

.bn-lista li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 9px;
	height: 9px;
	background: var(--bn-verde-medio);
	border-radius: 50%;
}

/* ==========================================================================
   12. Banda de aliados
   Los logos vienen del respaldo en baja resolucion, asi que se muestran
   contenidos y en escala de grises hasta el hover, que disimula el origen.
   ========================================================================== */

.bn-aliados .et_pb_image_wrap img {
	max-height: 66px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter var(--bn-transicion), opacity var(--bn-transicion);
}

.bn-aliados .et_pb_image:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* ==========================================================================
   13. Llamada final sobre fotografia
   ========================================================================== */

.bn-cta h2,
.bn-cta h3 {
	color: var(--bn-blanco) !important;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.bn-cta {
	position: relative;
}

/* Velo para que el texto blanco tenga contraste suficiente sobre la foto.
   El z-index no es opcional: sin el, este ::before queda en z-index auto igual
   que el <span class="et_parallax_bg_wrap"> que Divi inserta, y como ese span va
   despues en el arbol de caja, pintaba encima. El velo estaba escrito pero NO se
   veia, y con el se perdia justo el contraste que sostiene el texto blanco.
   Sube tambien del 34% al 50%: medido sobre las fotos reales, el 5% mas claro de
   la banda del titular pasa de 2,63:1 a 4,47:1. */
.bn-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(10, 36, 5, 0.5);
	pointer-events: none;
}

.bn-cta > .et_pb_row {
	position: relative;
	z-index: 2;
}

/* ==========================================================================
   14. Pie de pagina
   ========================================================================== */

/* La banda de aliados va en blanco: es la unica zona del sitio donde el blanco
   sigue siendo el fondo, y es lo que mejor sienta a cuatro logotipos de marcas
   ajenas —negros, verdes y azules— sin imponerles un tono de casa. La barra
   inferior de credito, en verde profundo. */
#main-footer {
	background-color: var(--bn-blanco);
}

.bn-pie {
	padding: 4vw 0 3vw;
	text-align: center;
}

.bn-pie-rotulo {
	margin: 0 0 2rem;
	font-family: var(--bn-titular);
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	font-weight: 400;
	color: var(--bn-tinta);
}

.bn-pie-aliados {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.bn-pie-aliados li {
	margin: 0;
	list-style: none;
}

/* Alturas distintas por logo: cada marca tiene su propia proporcion y
   ajustarlas todas a la misma altura las descompensa opticamente.
   Los cuatro archivos van sin fondo, con alfa, para que no aparezca la caja
   blanca sobre el verde del pie. */
.bn-pie-aliados img {
	display: block;
	width: auto;
	height: 31px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter var(--bn-transicion), opacity var(--bn-transicion);
}

.bn-pie-aliados a:hover img,
.bn-pie-aliados img:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* AIZA lleva una linea de texto legal muy fina bajo la marca, asi que se le
   deja algo mas de alto que al resto. A este tamano esa linea ya no se lee: es
   consecuencia del ajuste de escala, no un defecto del archivo. */
.bn-pie-aliados .bn-aliado-aiza img {
	height: 37px;
}

#footer-bottom {
	background-color: var(--bn-verde-abismo);
	background-image: var(--bn-fondo-oscuro);
	background-repeat: no-repeat;
	padding: 18px 0;
}

#footer-info,
#footer-info a {
	font-family: var(--bn-texto) !important;
	font-size: 14px;
	/* Medido sobre el extremo mas claro del degradado (#1c5213), que es el caso
	   peor: 0,75 de blanco daba 6,00:1 y a 0,85 sube a 7,20:1. El credito sigue
	   leyendose como secundario, pero ya no roza el limite. */
	color: rgba(255, 255, 255, 0.85);
}

#footer-info a:hover {
	color: var(--bn-verde-lima);
}

/* Redes sociales.
   Viven en la banda clara del pie, junto a los aliados: es el unico sitio del
   pie que se pinta siempre, sin depender de los ajustes de Divi. Iconos
   propios en SVG, para no cargar el icon-font entero por dos enlaces. */
.bn-pie-rotulo-redes {
	margin: 3rem 0 1.25rem;
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	color: var(--bn-tinta-suave);
}

.bn-redes {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bn-redes li {
	margin: 0;
	list-style: none;
}

.bn-redes a {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 2px solid var(--bn-verde-medio);
	border-radius: 50%;
	color: var(--bn-verde-medio);
	transition: background-color var(--bn-transicion), border-color var(--bn-transicion),
	            color var(--bn-transicion), transform var(--bn-transicion);
}

.bn-redes svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.bn-redes a:hover,
.bn-redes a:focus-visible {
	background-color: var(--bn-verde-medio);
	border-color: var(--bn-verde-medio);
	color: var(--bn-blanco);
	transform: translateY(-2px);
}

@media (max-width: 767px) {
	#footer-bottom .container {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}

	.bn-pie-aliados img {
		height: 25px;
	}

	.bn-pie-aliados .bn-aliado-aiza img {
		height: 30px;
	}
}

/* ==========================================================================
   15. Animaciones de aparicion al hacer scroll
   bn-scroll.js anade .bn-visible cuando el elemento entra en pantalla.
   ========================================================================== */

.bn-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}

.bn-reveal.bn-visible {
	opacity: 1;
	transform: none;
}

/* Escalonado para rejillas como las cinco tarjetas de problemas */
.bn-reveal-grupo > * {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bn-reveal-grupo.bn-visible > * {
	opacity: 1;
	transform: none;
}

.bn-reveal-grupo.bn-visible > *:nth-child(1) { transition-delay: 0s; }
.bn-reveal-grupo.bn-visible > *:nth-child(2) { transition-delay: 0.09s; }
.bn-reveal-grupo.bn-visible > *:nth-child(3) { transition-delay: 0.18s; }
.bn-reveal-grupo.bn-visible > *:nth-child(4) { transition-delay: 0.27s; }
.bn-reveal-grupo.bn-visible > *:nth-child(5) { transition-delay: 0.36s; }

/* Nota: se probo un parallax con background-attachment: fixed en las secciones
   de fondo fotografico y se descarto. iOS lo ignora, provoca saltos al hacer
   scroll y deja la seccion sin pintar en capturas de pagina completa. Divi
   trae su propia opcion de parallax por seccion si alguna vez se quiere. */

/* ==========================================================================
   16. Accesibilidad
   ========================================================================== */

/* Anillo de foco de dos tonos.
   Ningun color unico sirve para los dos fondos del sitio: --bn-verde-medio daba
   2,12-2,84:1 sobre el lavado claro, donde vive casi todo el contenido, y el lima
   da 1,09:1 sobre ese mismo claro. Asi que se usan los dos a la vez —anillo
   oscuro, halo lima— y siempre hay uno visible:
     #14380c sobre los cuatro claros: 13,12 / 12,89 / 12,34 / 10,82 / 9,78:1
     #a0eb00 sobre las cuatro paradas del oscuro: 4,85 / 6,35 / 9,59 / 11,34:1
   Y entre si contrastan 8,98:1, de modo que el anillo se autodelimita aunque
   caiga sobre una fotografia. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
[role='button']:focus-visible,
.et_pb_button:focus-visible,
#top-menu a:focus-visible {
	outline: 3px solid var(--bn-verde-carbon);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px rgba(160, 235, 0, 0.95);
	border-radius: 4px;
}

/* Divi le da a los enlaces del menu 33px de padding inferior para separar el
   desplegable. Con offset positivo, el anillo dibujaba una caja alta que asomaba
   por debajo de la cabecera. */
#top-menu > li > a:focus-visible {
	outline-offset: -6px;
}

/* Los dos controles que bn-a11y.js convierte en botones */
.mobile_menu_bar_toggle:focus-visible,
#et_search_icon:focus-visible {
	outline: 3px solid var(--bn-verde-carbon);
	outline-offset: 4px;
	border-radius: 4px;
}

/* ==========================================================================
   16b. Enlace de salto al contenido
   Fuera de pantalla hasta que recibe el foco. La cabecera es fija y tiene seis
   enlaces mas el conmutador y el buscador: sin esto hay que recorrerlos enteros
   en cada pagina antes de llegar al texto.
   ========================================================================== */

.bn-salto {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 100000;
	transform: translate(-50%, -120%);
	padding: 12px 24px;
	background: var(--bn-blanco);
	color: var(--bn-verde-carbon);
	font-family: var(--bn-texto);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease;
}

.bn-salto:focus {
	transform: translate(-50%, 0);
}

/* ==========================================================================
   16c. Formulario de contacto accesible
   Divi escribe los <label for> en el DOM y acto seguido los esconde con
   display:none, de modo que los tres campos se quedan sin nombre accesible mas
   alla del placeholder —que desaparece en cuanto se escribe—. Es el unico punto
   de conversion del sitio.
   Basta con revelarlos: el selector de aqui es 0,2,0 y gana al .et_pb_contact_
   form_label{display:none} de Divi, que es 0,1,0, sin necesidad de !important.
   ========================================================================== */

body .et_pb_contact_form_label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--bn-texto);
	font-size: 16px;
	font-weight: 600;
}

body .bn-oscura .et_pb_contact_form_label {
	color: var(--bn-blanco);
}

/* Con la etiqueta visible el placeholder pasa de ser el nombre del campo a ser
   una pista, asi que se atenua. #595959 da 7,00:1 sobre blanco. */
.bn-oscura .et_pb_contact_field input::placeholder,
.bn-oscura .et_pb_contact_field textarea::placeholder {
	color: #595959;
}

/* El borde rojo de 1px con el que Divi marca un campo con error perdia contra el
   borde blanco de 2px de esta hoja, que va despues y tiene la misma
   especificidad: no se veia. Y el rojo sobre verde profundo tampoco contrasta,
   asi que el aviso va con borde claro y halo rojo. */
body .et_pb_contact_field input.et_contact_error,
body .et_pb_contact_field textarea.et_contact_error {
	border: 3px solid #ffd6d6 !important;
	box-shadow: 0 0 0 3px rgba(178, 12, 12, 0.9);
}

/* Este bloque apuntaba solo a .bn-reveal y .bn-reveal-grupo, que son las clases
   de bn-scroll.js... y que no aparecen en ninguna pagina del sitio: las
   animaciones que se usan de verdad son las de Divi, con .et_animated y
   .et-waypoint, y Divi 4.27.4 no consulta esta media query. Es decir, quien pedia
   menos movimiento veia exactamente las mismas animaciones. */
@media (prefers-reduced-motion: reduce) {
	.et_animated,
	.et-waypoint,
	.bn-reveal,
	.bn-reveal-grupo > * {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}

	.bn-chevron {
		animation: none;
	}

	.bn-squircle .et_pb_image_wrap,
	.bn-tarjeta,
	.bn-redes a,
	.et_pb_button {
		transition: none !important;
	}
}

/* Red de seguridad: Divi deja .et_animated{opacity:0} esperando a que su
   JavaScript lo revele. Si ese JS no llega —error, bloqueador, red caida— el
   contenido se queda invisible. Sin scripting no se esconde nada. */
@media (scripting: none) {
	.et_animated {
		opacity: 1 !important;
	}
}

/* ==========================================================================
   17. Ajustes responsive
   ========================================================================== */

@media (max-width: 980px) {
	/* Se bajan las fichas, no los selectores: asi acompanan a la vez los
	   parrafos, las listas y la medida de linea, que estan atados a ellas. */
	:root {
		--bn-cuerpo: 16px;
		--bn-lectura: 20px;
	}

	/* Con html delante por lo mismo que en la tipografia base: el
	   `body { font-size: 14px }` que Divi inyecta en linea no esta dentro de
	   ninguna media query, y las media queries no suman especificidad, asi que un
	   `body` a secas aqui perdia y el cuerpo se quedaba en los 14px de Divi. */
	html body {
		font-size: var(--bn-cuerpo);
	}

	/* Cinco tarjetas no caben: en tablet van de dos en dos */
	.bn-tarjeta {
		margin-bottom: 1.5rem;
	}

	/* Los cuerpos pequenos de la tarjeta existen porque en escritorio son cinco
	   columnas de unos 215px. Al apilarse pasan a ocupar casi todo el ancho —345px
	   en un movil de 390— y ahi 14px y 15,2px se quedan cortos sin motivo. */
	.bn-tarjeta h4,
	.bn-tarjeta .et_pb_module_header {
		font-size: 1.25rem;
	}

	.bn-tarjeta p {
		font-size: 16px;
	}

	/* Los 15px del menu salen de tener que meter seis rotulos y el conmutador en
	   una barra de 1080px. El desplegable movil es una lista apilada sin esa
	   restriccion, asi que recupera el cuerpo normal. */
	.et_mobile_menu li a {
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	:root {
		--bn-radio-organico: 1.75rem;
	}

	.bn-hero::after {
		height: clamp(70px, 20vw, 130px);
	}

	.bn-hero-titulo h1 {
		font-size: clamp(2rem, 11vw, 2.9rem);
	}

	.bn-tarjeta .et_pb_image_wrap,
	.bn-tarjeta .et-pb-icon {
		width: 74px;
		height: 74px;
		font-size: 32px !important;
	}
}