/*
 * Blog
 * ---------------------------------------------------------------------------
 * Las noticias: el artículo y los listados —el blog, cada tema, la búsqueda—.
 *
 * No hay pantalla de noticia en el Figma: es una de las decisiones que quedaron
 * abiertas. Así que esto no se inventa un lenguaje nuevo, lo toma prestado del
 * que ya está dibujado en las otras treinta y cuatro pantallas:
 *
 * - **La banda de apertura es la de las páginas interiores.** Misma altura,
 *   mismos velos, mismo filete rojo, el titular a la izquierda. Lo único propio
 *   es la línea de la fecha y, en los listados, la fila de temas.
 * - **La forma de la familia**, « 0 24px 24px 24px »: la esquina superior
 *   izquierda recta y las otras tres redondeadas. Es la de todas las tarjetas
 *   del sitio.
 * - **El rojo para el rótulo** y el azul para el titular, en Montserrat; el
 *   cuerpo en la tipografía de texto.
 * - **Medidas fluidas**, « clamp( mínimo, px/14.4 vw, máximo ) », que es cómo
 *   se traduce aquí cada medida del diseño.
 *
 * Lo único que no viene de ninguna sección es el ancho de lectura: 720 px. Las
 * secciones miden 1240 y ahí un párrafo corrido sale a más de ciento treinta
 * caracteres por línea, que es el doble de lo que un ojo sigue sin perderse de
 * renglón. Las fotografías y las citas sí se salen de esa columna: es lo que
 * respira un texto largo.
 */

.sjo-art,
.sjo-s--notas,
.sjo-hero--articulo,
.sjo-hero--listado {
	--sjo-b-azul: var( --wp--preset--color--azul, #004078 );
	--sjo-b-rojo: var( --wp--preset--color--rojo, #e00026 );
	--sjo-b-crema: var( --wp--preset--color--crema, #f7f4ef );
	--sjo-b-tinta: #14181f;
	--sjo-b-gris: #5b6472;
	--sjo-b-canto: rgba( 0, 64, 120, 0.12 );

	/* La forma de la familia. */
	--sjo-b-forma: 0 24px 24px 24px;

	/* El mismo tope que « .sjo-s__interior »: la noticia ocupa lo que ocupa
	   cualquier sección del sitio, ni más estrecha ni centrada aparte. */
	--sjo-b-ancho: 83.75rem;
}

/* ---------------------------------------------------------------------------
 * La apertura
 *
 * Hereda todo de « .sjo-hero » —« paginas.css »—. Aquí solo va lo que una
 * noticia añade: el rótulo es un enlace al tema y debajo del titular hay una
 * línea de fecha.
 * ------------------------------------------------------------------------ */

.sjo-hero--articulo .sjo-hero__rotulo a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.35 );
	transition: border-color 0.2s ease;
}

.sjo-hero--articulo .sjo-hero__rotulo a:hover,
.sjo-hero--articulo .sjo-hero__rotulo a:focus-visible {
	border-bottom-color: currentColor;
}

.sjo-art__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: baseline;
	margin: clamp( 1rem, 1.67vw, 1.5rem ) 0 0;
	color: rgba( 255, 255, 255, 0.82 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.8125rem, 0.97vw, 0.875rem );
	font-weight: 500;
	line-height: 1.4;
}

/* En el titular de una noticia no cabe el tamaño de un titular de sección: los
   titulares de las páginas los escribe alguien contando los caracteres, y el de
   una noticia lo escribe quien la publica y puede ocupar cinco líneas. */
.sjo-hero--articulo .sjo-hero__titular {
	max-width: 56rem;
	font-size: clamp( 1.75rem, 3.33vw, 3rem );
	line-height: 1.12;
}

/* ---------------------------------------------------------------------------
 * La fila de temas de los listados
 *
 * Son los chips de siempre —los del visor de Infraestructura—, aquí sobre el
 * azul de la banda. En móvil se desplazan en horizontal en vez de apilarse:
 * cinco temas apilados empujan el listado fuera de la pantalla.
 * ------------------------------------------------------------------------ */

.sjo-hero__temas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: clamp( 1.5rem, 2.22vw, 2rem ) 0 0;
}

.sjo-hero__tema {
	box-sizing: border-box;
	padding: 0.5rem 1rem;
	border: 1px solid rgba( 255, 255, 255, 0.4 );
	border-radius: 0 12px 12px 12px;
	background: transparent;
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.75rem, 0.9vw, 0.8125rem );
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
		transform 0.25s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.sjo-hero__tema:hover {
	border-color: var( --wp--preset--color--base, #fff );
	transform: translateY( -2px );
}

.sjo-hero__tema:active {
	transform: scale( 0.97 );
}

/* El tema abierto va macizo: sobre una fila de contornos, el relleno es lo que
   se lee como «estás aquí». */
.sjo-hero__tema.es-activa {
	border-color: var( --wp--preset--color--base, #fff );
	background: var( --wp--preset--color--base, #fff );
	color: var( --sjo-b-azul );
	transform: none;
}

/* ---------------------------------------------------------------------------
 * El cuerpo del artículo
 * ------------------------------------------------------------------------ */

.sjo-art {
	--sjo-gutter: clamp( 2rem, 6.94vw, 100px );

	padding-block: clamp( 2.5rem, 5.56vw, 5rem );
	padding-inline: var( --sjo-gutter );
	background: var( --wp--preset--color--base, #fff );
}

.sjo-art__interior {
	box-sizing: border-box;
	max-width: 83.75rem;
	margin-inline: auto;
}

/* El cuerpo arranca donde arranca todo lo demás y llega hasta donde llega
   todo lo demás: el mismo lienzo que « .sjo-s__interior ». No va en una columna
   estrecha centrada, que dejaba la noticia flotando en medio de dos márgenes
   blancos mientras el resto del sitio ocupaba el ancho entero. */
.sjo-art__cuerpo {
	color: var( --sjo-b-tinta );
	font-size: clamp( 1rem, 1.18vw, 1.0625rem );
	line-height: 1.7;
}

.sjo-art__cuerpo > * {
	margin-block: 0;
}

.sjo-art__cuerpo > * + * {
	margin-block-start: clamp( 1.25rem, 1.67vw, 1.5rem );
}

/* La primera línea entra más grande: es la entradilla, y le da al artículo un
   punto de arranque claro sin que nadie tenga que marcarla.

   « :not( :last-child) » no sobra: una noticia de un solo párrafo es toda ella
   la entradilla, y ponerla entera en azul y a cuerpo grande la convierte en un
   cartel. */
.sjo-art__cuerpo > p:first-child:not( :last-child ) {
	color: var( --sjo-b-azul );
	font-size: clamp( 1.0625rem, 1.39vw, 1.25rem );
	font-weight: 500;
	line-height: 1.55;
}

.sjo-art__cuerpo :is( h2, h3, h4 ) {
	color: var( --sjo-b-azul );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -0.015em;
}

/* Un titular pide aire por arriba y poco por abajo: va con lo que sigue, no
   entre las dos cosas. */
.sjo-art__cuerpo > :is( h2, h3, h4 ) + * {
	margin-block-start: clamp( 0.75rem, 1.11vw, 1rem );
}

.sjo-art__cuerpo > * + :is( h2, h3, h4 ) {
	margin-block-start: clamp( 2rem, 3.33vw, 3rem );
}

.sjo-art__cuerpo h2 {
	font-size: clamp( 1.375rem, 1.94vw, 1.75rem );
}

.sjo-art__cuerpo h3 {
	font-size: clamp( 1.125rem, 1.53vw, 1.375rem );
}

.sjo-art__cuerpo h4 {
	font-size: clamp( 1rem, 1.25vw, 1.125rem );
}

.sjo-art__cuerpo a {
	color: var( --sjo-b-azul );
	text-decoration: underline;
	text-decoration-color: var( --sjo-b-rojo );
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
	transition: color 0.2s ease;
}

.sjo-art__cuerpo a:hover,
.sjo-art__cuerpo a:focus-visible {
	color: var( --sjo-b-rojo );
}

.sjo-art__cuerpo :is( ul, ol ) {
	padding-inline-start: 1.5rem;
}

.sjo-art__cuerpo li + li {
	margin-block-start: 0.5rem;
}

/* La viñeta en rojo: es el único punto de color de una lista y basta para que
   no se lea como un bloque gris. */
.sjo-art__cuerpo ul > li::marker {
	color: var( --sjo-b-rojo );
}

.sjo-art__cuerpo ol > li::marker {
	color: var( --sjo-b-rojo );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-weight: 800;
}

.sjo-art__cuerpo strong {
	font-weight: 700;
}

/* La cita se sale de la columna por la izquierda —los 40 px del filete más su
   aire— y se apoya en el rojo. Es la misma pieza que las citas de las
   secciones, aquí a escala de texto. */
.sjo-art__cuerpo blockquote {
	margin-inline: 0;
	padding-inline-start: clamp( 1.25rem, 2.22vw, 2rem );
	border-inline-start: 3px solid var( --sjo-b-rojo );
	color: var( --sjo-b-azul );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.0625rem, 1.53vw, 1.375rem );
	font-weight: 600;
	font-style: normal;
	line-height: 1.35;
	letter-spacing: -0.015em;
}

.sjo-art__cuerpo blockquote :is( p, cite ) {
	margin-block: 0;
}

.sjo-art__cuerpo blockquote cite {
	display: block;
	margin-block-start: 0.75rem;
	color: var( --sjo-b-gris );
	font-size: 0.875rem;
	font-weight: 500;
	font-style: normal;
}

/* Las fotografías ocupan el ancho del cuerpo, con la forma de la familia: así
   se leen como una pieza del sitio y no como una imagen pegada. Más aire
   alrededor que un párrafo, que es lo que las separa del texto. */
.sjo-art__cuerpo :is( figure, .wp-block-image, .wp-block-embed ) {
	margin-inline: 0;
	margin-block: clamp( 2rem, 3.33vw, 3rem );
}

.sjo-art__cuerpo :is( figure, .wp-block-image ) img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --sjo-b-forma );
}

.sjo-art__cuerpo figcaption {
	margin-block-start: 0.75rem;
	color: var( --sjo-b-gris );
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: start;
}

.sjo-art__cuerpo hr {
	height: 1px;
	margin-block: clamp( 2rem, 3.33vw, 3rem );
	border: 0;
	background: var( --sjo-b-canto );
}

.sjo-art__cuerpo table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.sjo-art__cuerpo :is( th, td ) {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var( --sjo-b-canto );
	text-align: start;
}

.sjo-art__cuerpo th {
	color: var( --sjo-b-azul );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Las etiquetas, al pie del artículo
 * ------------------------------------------------------------------------ */

.sjo-art__etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: clamp( 2rem, 3.33vw, 3rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-art__etiqueta {
	display: inline-block;
	padding: 0.4375rem 0.875rem;
	border: 1px solid var( --sjo-b-canto );
	border-radius: 0 12px 12px 12px;
	color: var( --sjo-b-azul );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
		transform 0.25s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.sjo-art__etiqueta:hover,
.sjo-art__etiqueta:focus-visible {
	border-color: var( --sjo-b-azul );
	background: var( --sjo-b-azul );
	color: var( --wp--preset--color--base, #fff );
	transform: translateY( -2px );
}

.sjo-art__etiqueta:active {
	transform: scale( 0.97 );
}

/* ---------------------------------------------------------------------------
 * Anterior y siguiente
 *
 * Dos cajas iguales, la de la izquierda alineada a la izquierda y la de la
 * derecha a la derecha, con su flecha hacia fuera. Cuando solo hay una, se
 * queda en su lado: una noticia sin siguiente no deja un hueco en el centro.
 * ------------------------------------------------------------------------ */

.sjo-art__vecinas {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: clamp( 1rem, 1.67vw, 1.5rem );
	margin: clamp( 2.5rem, 4.44vw, 4rem ) 0 0;
	padding-block-start: clamp( 2rem, 3.33vw, 3rem );
	border-block-start: 1px solid var( --sjo-b-canto );
}

.sjo-art__vecina {
	display: block;
	box-sizing: border-box;
	padding: clamp( 1.125rem, 1.67vw, 1.5rem );
	border-radius: var( --sjo-b-forma );
	background: var( --sjo-b-crema );
	text-decoration: none;
	transition: transform 0.35s cubic-bezier( 0.22, 0.61, 0.36, 1 ),
		box-shadow 0.35s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.sjo-art__vecina:hover {
	transform: translateY( -4px );
	box-shadow: 0 10px 18px rgba( 0, 26, 56, 0.12 );
}

.sjo-art__vecina:active {
	transform: translateY( -1px );
}

/* Sin anterior, la siguiente se va a su columna: la primera noticia del sitio
   no tiene por qué dejar medio pie vacío. */
.sjo-art__vecina.es-siguiente:only-child {
	grid-column: 2;
	text-align: end;
}

.sjo-art__vecina-rotulo {
	display: block;
	color: var( --sjo-b-rojo );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.sjo-art__vecina-tit {
	display: block;
	margin-block-start: 0.5rem;
	color: var( --sjo-b-azul );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.9375rem, 1.18vw, 1.0625rem );
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.sjo-art__vecina.es-siguiente {
	text-align: end;
}

/* ---------------------------------------------------------------------------
 * Las tarjetas de noticia
 *
 * Tres al pie de cada artículo y las que haga falta en el listado. La misma
 * caja: fondo propio, la forma de la familia, la fotografía arriba con su
 * proporción, y debajo el tema, la fecha, el titular y el resumen.
 * ------------------------------------------------------------------------ */

.sjo-notas {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: clamp( 1.25rem, 2.22vw, 2rem );
	margin-block-start: clamp( 2rem, 3.89vw, 3.5rem );
}

.sjo-notas__cabecera {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-end;
	justify-content: space-between;
}

.sjo-nota {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	border-radius: var( --sjo-b-forma );
	background: var( --wp--preset--color--base, #fff );
	overflow: hidden;
	transition: transform 0.35s cubic-bezier( 0.22, 0.61, 0.36, 1 ),
		box-shadow 0.35s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

/* Sobre una sección blanca la tarjeta necesita el contraste al revés. */
.sjo-s--notas:not( .es-fondo-crema ) .sjo-nota {
	background: var( --sjo-b-crema );
}

.sjo-nota:hover {
	transform: translateY( -6px );
	box-shadow: 0 18px 32px rgba( 0, 26, 56, 0.16 );
}

.sjo-nota:active {
	transform: translateY( -2px );
	box-shadow: 0 10px 18px rgba( 0, 26, 56, 0.12 );
}

.sjo-nota__foto {
	display: block;
	overflow: hidden;
}

.sjo-nota__foto img {
	display: block;
	width: 100%;

	/* « height: auto » no es de adorno: WordPress imprime « width » y « height »
	   en el « img », y con el alto puesto en el atributo el « aspect-ratio » del
	   CSS no llega a aplicarse. */
	height: auto;
	aspect-ratio: 400 / 240;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.sjo-nota:hover .sjo-nota__foto img {
	transform: scale( 1.04 );
}

.sjo-nota__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: clamp( 1.25rem, 1.94vw, 1.75rem );
}

.sjo-nota__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: baseline;
	margin: 0;
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.sjo-nota__rotulo {
	color: var( --sjo-b-rojo );
}

.sjo-nota__fecha {
	color: var( --sjo-b-gris );
	letter-spacing: 0.1em;
}

.sjo-nota__tit {
	margin: clamp( 0.625rem, 0.83vw, 0.75rem ) 0 0;
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1rem, 1.25vw, 1.125rem );
	font-weight: 800;
	line-height: 1.28;
	letter-spacing: -0.015em;
}

.sjo-nota__tit a {
	color: var( --sjo-b-azul );
	text-decoration: none;
}

.sjo-nota__txt {
	margin: clamp( 0.625rem, 0.83vw, 0.75rem ) 0 0;
	color: var( --sjo-b-gris );
	font-size: clamp( 0.875rem, 1.04vw, 0.9375rem );
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * El listado
 *
 * La misma tarjeta para todas, tres por fila y hacia abajo. La rejilla ya está
 * descrita arriba: aquí solo se le quita el aire de encima, porque en el
 * listado no hay ningún encabezado del que separarse.
 * ------------------------------------------------------------------------ */

.sjo-notas.es-listado {
	margin-block-start: 0;
}

.sjo-notas__vacia {
	margin: 0;
	color: var( --sjo-b-gris );
	font-size: clamp( 1rem, 1.25vw, 1.125rem );
}

/* ---------------------------------------------------------------------------
 * La paginación
 * ------------------------------------------------------------------------ */

.sjo-notas__paginacion {
	margin-block-start: clamp( 2.5rem, 4.44vw, 4rem );
}

.sjo-notas__paginacion ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sjo-notas__paginacion :is( a, span ) {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding-inline: 0.75rem;
	border: 1px solid var( --sjo-b-canto );
	border-radius: 0 12px 12px 12px;
	color: var( --sjo-b-azul );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
		transform 0.25s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.sjo-notas__paginacion a:hover {
	border-color: var( --sjo-b-azul );
	transform: translateY( -2px );
}

.sjo-notas__paginacion a:active {
	transform: scale( 0.97 );
}

.sjo-notas__paginacion .current {
	border-color: var( --sjo-b-azul );
	background: var( --sjo-b-azul );
	color: var( --wp--preset--color--base, #fff );
}

/* ---------------------------------------------------------------------------
 * El buscador de la página de resultados
 * ------------------------------------------------------------------------ */

.sjo-s--buscador {
	padding-block-end: 0;
}

.sjo-s--buscador form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	max-width: 45rem;
}

.sjo-s--buscador :is( input[ type="search" ], input[ type="text" ] ) {
	flex: 1;
	box-sizing: border-box;
	min-width: 12rem;
	height: 3rem;
	padding-inline: 1rem;
	border: 1px solid var( --sjo-b-canto );
	border-radius: 0 12px 12px 12px;
	font-family: inherit;
	font-size: 1rem;
}

.sjo-s--buscador button {
	height: 3rem;
	padding-inline: 1.5rem;
	border: 0;
	border-radius: 0 12px 12px 12px;
	background: var( --sjo-b-rojo );
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.18s ease;
}

.sjo-s--buscador button:active {
	transform: scale( 0.97 );
}

/* ---------------------------------------------------------------------------
 * Móvil
 * ------------------------------------------------------------------------ */

@media ( max-width: 1023px ) {

	.sjo-notas {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 781px ) {

	.sjo-notas {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* Las dos vecinas, una encima de otra: en 330 px dos cajas al lado dejan los
	   titulares en columnas de dos palabras. */
	.sjo-art__vecinas {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sjo-art__vecina.es-siguiente,
	.sjo-art__vecina.es-siguiente:only-child {
		grid-column: auto;
		text-align: start;
	}

	.sjo-notas__cabecera {
		align-items: flex-start;
	}
}

/* ---------------------------------------------------------------------------
 * Con « prefers-reduced-motion »
 * ------------------------------------------------------------------------ */

@media ( prefers-reduced-motion: reduce ) {

	.sjo-hero__tema,
	.sjo-art__etiqueta,
	.sjo-art__vecina,
	.sjo-nota,
	.sjo-nota__foto img,
	.sjo-notas__paginacion :is( a, span ),
	.sjo-s--buscador button {
		transition-property: background-color, border-color, color, box-shadow;
	}

	.sjo-hero__tema:hover,
	.sjo-hero__tema:active,
	.sjo-art__etiqueta:hover,
	.sjo-art__etiqueta:focus-visible,
	.sjo-art__etiqueta:active,
	.sjo-art__vecina:hover,
	.sjo-art__vecina:active,
	.sjo-nota:hover,
	.sjo-nota:active,
	.sjo-nota:hover .sjo-nota__foto img,
	.sjo-notas__paginacion a:hover,
	.sjo-notas__paginacion a:active,
	.sjo-s--buscador button:active {
		transform: none;
	}
}