/*
 * Correcciones defensivas sobre CrocoBuilder 1.0.0-beta.19.
 *
 * Cada bloque de este fichero existe por un fallo concreto y reproducible del
 * constructor, no por gusto estético. Cuando Crocoblock los corrija, hay que
 * volver aquí, comprobar el síntoma y retirar el bloque que sobre: un parche
 * que sobrevive al fallo que arreglaba acaba peleándose con el comportamiento
 * bueno. Están documentados en artefactos/crocobuilder-incidencias.md.
 *
 * Va el último de la cascada, después incluso de a11y.css, porque tiene que
 * ganar al CSS que el constructor genera por documento.
 */

/* ---------------------------------------------------------------------------
 * 1 · El elemento «grid» ignora las columnas de tablet y móvil.
 *
 * El documento declara columns {desktop:3, tablet:2, mobile:1}, pero el CSS
 * generado emite `repeat(3, 1fr)` en las tres media queries. Resultado: en un
 * teléfono las tres tarjetas siguen en fila, se estrechan hasta ser ilegibles
 * y se salen de la pantalla —que es justo lo que se ve en las capturas del
 * 13 de agosto de 2026.
 *
 * Se corrige aquí y no con estilos del documento porque el bloque nativo del
 * grid se emite DESPUÉS en el mismo fichero y con la misma especificidad
 * (`.cb-prob_grid`), así que gana él. `.crocoblocks-document .cb-grid` sube la
 * especificidad lo justo para imponerse sin recurrir a !important.
 *
 * Escape: si algún grid necesita conservar sus columnas en móvil, se le añade
 * la clase `bt-keep-columns` desde el constructor y estas reglas lo respetan.
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.crocoblocks-document .cb-grid:not(.bt-keep-columns) {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.crocoblocks-document .cb-grid:not(.bt-keep-columns) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto;
	}
}

/* ---------------------------------------------------------------------------
 * 2 · Celdas de grid que no pueden encogerse.
 *
 * Un elemento de grid arranca con `min-width: auto`, así que una imagen o un
 * texto largo dentro de una tarjeta impone su ancho y desborda la columna en
 * lugar de adaptarse. Es la otra mitad del corte horizontal de las capturas.
 * ------------------------------------------------------------------------ */

.crocoblocks-document .cb-grid > * {
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * 3 · Nada debe provocar scroll horizontal en un teléfono.
 *
 * Red de seguridad de última línea: aunque un documento futuro traiga un ancho
 * fijo, la página no se desplazará en horizontal. Es preferible recortar un
 * elemento mal medido a que toda la web se mueva de lado.
 *
 * Los logos de cabecera y pie quedan fuera: el tema los dimensiona por ALTURA
 * (34/28 px) con una sola clase, y el `height: auto` de aquí —clase + etiqueta,
 * más específico— la pisaba. Como el fichero del logo declara width="1049" y
 * max-width: 100%, el resultado era un logotipo a todo el ancho del móvil
 * (visto en un teléfono apaisado el 12-09-2026). Un logo con altura fija nunca
 * puede provocar scroll horizontal, así que excluirlo no abre ningún agujero
 * en la red.
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.crocoblocks-document img:not(.bt-siteheader__logoimg):not(.bt-sitefooter__logoimg),
	.crocoblocks-document svg {
		max-width: 100%;
		height: auto;
	}
}

/* ---------------------------------------------------------------------------
 * 4 · Los desplegables del menú no tienen fondo.
 *
 * `nav-menu-frontend.css` del constructor sólo posiciona el submenú —absoluto,
 * bajo su padre— y no le da ni fondo, ni borde, ni sombra, ni elevación. Da por
 * hecho que eso se pinta desde el editor, y mientras no se haga el desplegable
 * es transparente: el texto de la página se lee a través de los enlaces y el
 * contenido que viene después se superpone encima. Es el punto del acta sobre
 * «cambiar el fondo de los desplegables a blanco».
 *
 * Se resuelve aquí, con especificidad de una sola clase, para que el día que
 * alguien estilice el menú desde el constructor sus reglas —que llegan con más
 * especificidad— ganen sin tener que tocar este fichero.
 * ------------------------------------------------------------------------ */

.pb-nav__submenu {
	/* Lo esencial: superficie opaca y por encima del contenido. */
	background: var(--bt-surface, #fff);
	z-index: 60;

	/*
	 * Borde y sombra juntos, y no sólo sombra.
	 *
	 * El fondo de la web es un gris muy claro (#f5f8f9): sobre él, una sombra
	 * suave sola no llega a separar el panel del contenido y el desplegable
	 * parece flotar sin bordes. El filete define el contorno y la sombra da la
	 * profundidad.
	 */
	border: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
	border-radius: var(--bt-radius-md, 18px);
	box-shadow: var(--bt-shadow-md, 0 16px 38px rgba(22, 38, 56, .09));

	/* Sin viñetas: son una lista de navegación, no un listado de contenido. */
	list-style: none;
	margin: 0;
	padding: 6px;

	/*
	 * Ancho con suelo y techo.
	 *
	 * Los servicios tienen nombres largos —«Evaluación del estado ambiental de
	 * tu empresa»— y sin un mínimo el panel se estrangula hasta partir cada
	 * entrada en tres líneas. El máximo evita lo contrario: que un nombre
	 * futuro más largo lo estire hasta salirse de la pantalla.
	 */
	min-width: 260px;
	max-width: min(360px, calc(100vw - 32px));
	overflow: hidden;
}

.pb-nav__submenu .pb-nav__link {
	display: block;
	padding: 9px 12px;
	border-radius: var(--bt-radius-sm, 14px);
	color: var(--bt-ink-2, #34485e);
	font-size: 14.5px;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color .14s ease, color .14s ease;
}

.pb-nav__submenu .pb-nav__link:hover,
.pb-nav__submenu .pb-nav__link:focus-visible {
	background: var(--bt-wash-green, rgba(19, 153, 111, .07));
	color: var(--bt-ink, #162638);
}

/*
 * En el panel móvil el submenú va dentro del flujo, no flotando.
 *
 * Allí el constructor lo pone en `position: static` dentro de un panel que ya
 * tiene su propio fondo blanco; conservar aquí la sombra, el borde y el
 * redondeo dibujaría una caja dentro de otra caja. Se deja sólo la sangría,
 * que es lo que comunica la jerarquía.
 */
.pb-nav.is-collapsed .pb-nav__submenu {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	min-width: 0;
	max-width: none;
	padding: 0 0 0 12px;
	background: transparent;
}

/* ---------------------------------------------------------------------------
 * 5 · El indicador de submenú está oculto siempre.
 *
 * El constructor pinta un `<button class="pb-nav__indicator">` en cada entrada
 * con hijos, pero su CSS lo deja en `display: none` y no hay ninguna regla que
 * lo vuelva a mostrar —tampoco en el panel móvil—. Consecuencias:
 *
 * 1. En escritorio nada distingue «Servicios», que despliega, de «Eventos»,
 *    que no. Hay que descubrirlo pasando el ratón por encima.
 * 2. En el móvil es peor que un detalle estético: ese botón es lo que abre el
 *    submenú, y en una pantalla táctil no existe el `:hover` que lo abre en
 *    escritorio. Con el botón oculto, los servicios eran **inalcanzables**
 *    desde el menú de un teléfono.
 *
 * El chevron se dibuja con `mask` y no con `background-image` para que tome el
 * color del texto: así sigue al enlace en cualquiera de sus estados sin
 * repetir el color en dos sitios.
 * ------------------------------------------------------------------------ */

.pb-nav__item.has-children > .pb-nav__indicator {
	display: inline-flex;
	flex: none;
	width: 1em;
	height: 1em;
	margin-inline-start: 5px;
	vertical-align: middle;
	cursor: pointer;
	background-color: currentColor;
	-webkit-mask-image: var(--bt-chevron);
	mask-image: var(--bt-chevron);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 9px 6px;
	mask-size: 9px 6px;
	opacity: .75;
	transition: transform .16s ease, opacity .16s ease;
}

:root {
	--bt-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M.7.7 4.5 4.5 8.3.7' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Apunta hacia arriba cuando el desplegable está abierto. */
.pb-nav__item.has-children:hover > .pb-nav__indicator,
.pb-nav__item.has-children:focus-within > .pb-nav__indicator,
.pb-nav__item.has-children.is-open > .pb-nav__indicator {
	opacity: 1;
	transform: rotate(180deg);
}

/*
 * En el móvil, un objetivo que se pueda tocar.
 *
 * Un icono de 1em son unos 15 px: por debajo de cualquier recomendación de
 * tamaño mínimo táctil. Se le da un área de 44 px sin agrandar el dibujo,
 * separándolo además del propio enlace para no abrir el submenú cuando lo que
 * se quería era ir a la página de Servicios.
 */
.pb-nav.is-collapsed .pb-nav__item.has-children > .pb-nav__indicator {
	width: 44px;
	height: 44px;
	margin-inline-start: auto;
	-webkit-mask-size: 12px 8px;
	mask-size: 12px 8px;
}

/* Y para que ese «auto» empuje, la entrada tiene que ser una fila. */
.pb-nav.is-collapsed .pb-nav__item.has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.pb-nav.is-collapsed .pb-nav__item.has-children > .pb-nav__submenu {
	flex: 1 0 100%;
}

/* ---------------------------------------------------------------------------
 * 6 · La imagen de cabecera de las fichas.
 *
 * La usa la plantilla de patrocinador, donde llega enlazada a la imagen
 * destacada del contenido. Sin estilo, el navegador la pinta a su tamaño
 * original: en una foto de 2000 px de ancho eso desborda el contenedor.
 *
 * `aspect-ratio` con `object-fit` recorta al encuadre en vez de deformar, que
 * es lo que hace falta cuando las imágenes las sube cada cliente y no hay
 * ninguna garantía de que compartan proporción.
 * ------------------------------------------------------------------------ */

.bt-hero-media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 7;
	margin-bottom: var(--bt-space-6, 24px);
	border-radius: var(--bt-radius-lg, 24px);
	object-fit: cover;
	object-position: center;
	background: var(--bt-bg, #f5f8f9);
}

@media (max-width: 767px) {
	.bt-hero-media {
		/* Más alta en vertical: a 16/7 en un teléfono queda una tira estrecha. */
		aspect-ratio: 4 / 3;
		border-radius: var(--bt-radius-md, 18px);
		margin-bottom: var(--bt-space-5, 20px);
	}
}

/* ---------------------------------------------------------------------------
 * 7 · El menú del pie no es el de la cabecera.
 *
 * Dos problemas que venían juntos:
 *
 * 1. **Parpadeo.** El menú del pie es `data-orientation="column"`, y para esa
 *    orientación el constructor abre el submenú hacia la derecha
 *    (`left: 100%`). Colocado abajo del todo y pegado al borde, el panel se
 *    salía de la ventana, aparecía barra de desplazamiento, el contenido se
 *    recolocaba, el puntero dejaba de estar encima y el submenú se cerraba…
 *    con lo que la barra desaparecía y volvía a abrirse. Un bucle a varios
 *    fotogramas por segundo.
 *
 * 2. **Mismo aspecto que arriba.** Las reglas del apartado 4 —panel blanco,
 *    borde, sombra, texto gris oscuro— se aplicaban también aquí, sobre un pie
 *    de fondo `#162638`. El resultado era una caja blanca flotando sobre el
 *    fondo oscuro, y el texto del submenú perdía el color claro que sí tienen
 *    los enlaces de primer nivel.
 *
 * Se resuelven a la vez sacando el submenú del flujo flotante: aquí va dentro
 * de la columna, como una sublista sangrada que empuja el contenido al
 * abrirse. Sin panel flotante no hay nada que se salga de la ventana, así que
 * el parpadeo desaparece por construcción y no por un ajuste fino de
 * posiciones que volvería a fallar en otra resolución.
 *
 * Se despliega a voluntad, con el botón, y **no al pasar el ratón**: en una
 * columna del pie, abrir al pasar por encima haría saltar el contenido cada
 * vez que el puntero cruzara «Servicios» camino de otro enlace. El JavaScript
 * del constructor alterna `is-open` en cada clic del botón esté el menú
 * colapsado o no, así que basta con apoyarse en esa clase.
 * ------------------------------------------------------------------------ */

.bt-sitefooter .pb-nav[data-orientation] .pb-nav__submenu {
	position: static;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	min-width: 0;
	max-width: none;
	margin: 6px 0 2px 2px;
	padding: 2px 0 2px 12px;
	/* Una línea fina que comunica la jerarquía sin dibujar una caja. */
	border-inline-start: 1px solid color-mix(in srgb, #fff 16%, transparent);
}

.bt-sitefooter .pb-nav[data-orientation] .pb-nav__submenu .pb-nav__link {
	padding: 4px 0;
	border-radius: 0;
	/* Un punto más tenue que los de primer nivel: son secundarios. */
	color: color-mix(in srgb, #fff 68%, var(--bt-ink, #162638));
	font-size: 13.5px;
}

.bt-sitefooter .pb-nav[data-orientation] .pb-nav__submenu .pb-nav__link:hover,
.bt-sitefooter .pb-nav[data-orientation] .pb-nav__submenu .pb-nav__link:focus-visible {
	background: transparent;
	color: #fff;
}

/*
 * Cerrado mientras no se pulse el botón.
 *
 * La especificidad tiene que superar a la regla del constructor que abre con
 * `:hover` —cuatro componentes—, así que el `:not(.is-open)` no es un adorno:
 * es lo que hace que aquí mande el clic y no el puntero.
 */
.bt-sitefooter .pb-nav[data-orientation] .pb-nav__item:not(.is-open) > .pb-nav__submenu {
	display: none;
}

/* El botón, en línea con su entrada y con área suficiente para pulsarlo. */
.bt-sitefooter .pb-nav__item.has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
}

.bt-sitefooter .pb-nav__item.has-children > .pb-nav__submenu {
	flex: 1 0 100%;
}

.bt-sitefooter .pb-nav__item.has-children > .pb-nav__indicator {
	width: 28px;
	height: 28px;
	margin-inline-start: 2px;
	opacity: .6;
}

.bt-sitefooter .pb-nav__item.has-children:hover > .pb-nav__indicator,
.bt-sitefooter .pb-nav__item.has-children.is-open > .pb-nav__indicator {
	opacity: 1;
}

/*
 * Y que gire sólo cuando esté abierto de verdad.
 *
 * La regla general del apartado 5 lo gira también con `:hover` y
 * `:focus-within`, que es lo correcto arriba —donde el puntero abre el
 * desplegable— pero aquí mentiría: la flecha apuntaría hacia arriba con el
 * submenú todavía cerrado.
 */
.bt-sitefooter .pb-nav__item.has-children:hover > .pb-nav__indicator,
.bt-sitefooter .pb-nav__item.has-children:focus-within > .pb-nav__indicator {
	transform: none;
}

.bt-sitefooter .pb-nav__item.has-children.is-open > .pb-nav__indicator {
	transform: rotate(180deg);
}