/* ===========================================================================
   LA NOTA
   Figma: 6634:28182 (noticia, escritorio) y 6657:28925 (móvil).

   Una hoja para las tres categorías. Todo lo que puede llevar una nota está
   aquí: quien la carga rellena los campos que necesita y lo que deja en blanco
   no se publica. Lo único que cambia entre categorías es el índice, que solo
   aparece en el blog.
   =========================================================================== */

/* --- El hero --------------------------------------------------------------
   Blanco y sin fotografía: la imagen va dentro, junto al texto, porque en una
   nota manda el titular y no la foto. */
.iacc-nota__hero {
	padding-block: 56px 24px;
}

.iacc-nota__antetitulo {
	display: flex;
	align-items: center;
	gap: 12px;

	margin: 0;

	color: var(--wp--preset--color--marca-oscura, #3d7a00);
	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
}

/* La rayita del antetítulo: decorativa, por eso va en un span vacío con
   aria-hidden y no como borde del párrafo, que se llevaría el texto. */
.iacc-nota__linea {
	flex: 0 0 32px;
	height: 2px;
	background: currentcolor;
}

.iacc-nota__titular {
	max-width: 820px;
	margin: 16px 0 0;

	color: var(--wp--preset--color--texto, #272727);
	font-size: var(--wp--preset--font-size--48, 48px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.72px;
}

.iacc-nota__datos {
	max-width: 720px;
	margin: 16px 0 0;

	color: var(--wp--preset--color--texto-medio, #4e6667);
	font-size: var(--wp--preset--font-size--14, 14px);
	line-height: 1.45;
}

/* --- Los pisos ----------------------------------------------------------- */
.iacc-nota__seccion {
	padding-block: 32px 72px;
}

.iacc-nota__seccion--llamada,
.iacc-nota__seccion--otras {
	padding-block: 72px;
}

.iacc-nota__seccion--otras {
	background: var(--wp--preset--color--gris-suave, #f5f6f6);
}

/* --- La columna de lectura ------------------------------------------------
   760 de ancho en el diseño. Es una medida de lectura, no una proporción: con
   la línea más larga se pierde el renglón al saltar. */
.iacc-nota__columnas {
	display: grid;
	/*
	 * minmax(0, 1fr) y no 1fr a secas: de serie una columna de rejilla no se
	 * encoge por debajo de lo que mida su contenido, así que una imagen ancha
	 * de una nota importada estira la columna y con ella la página entera. Con
	 * el mínimo en cero manda el contenedor y lo que sobra se recorta o se
	 * desplaza dentro.
	 */
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}

/*
 * LA MEDIDA DE LECTURA LA PONEN LOS HIJOS, NO LA COLUMNA
 * Si el ancho de 760 se pusiera aquí, nada de dentro podría pasar de ahí, y la
 * galería de una noticia ocupa el contenedor entero en el diseño. Así que la
 * columna se deja crecer y son el texto y la foto los que se quedan en 760.
 */
.iacc-nota__lectura {
	display: flex;
	flex-direction: column;
	gap: 24px;

	/* Por lo mismo que la rejilla: lo que traiga el contenido no debe poder
	   ensanchar la columna. */
	min-width: 0;
}

.iacc-nota__cuerpo {
	min-width: 0;

	/* Las notas importadas traen direcciones y palabras largas sin espacios,
	   que en una pantalla estrecha empujarían la página de lado. */
	overflow-wrap: break-word;
}

.iacc-nota__bajada,
.iacc-nota__foto,
.iacc-nota__cuerpo > * {
	max-width: 760px;
}

.iacc-nota__bajada {
	margin: 0;

	color: var(--wp--preset--color--texto, #272727);
	font-size: var(--wp--preset--font-size--18, 18px);
	line-height: 1.55;
}

.iacc-nota__foto {
	margin: 0;
}

/*
 * LA FOTO SE RECORTA, NO SE ESTIRA
 * El diseño le da una altura fija —400 en una noticia, 340 en el blog— y las
 * fotos que sube la redacción vienen de cualquier proporción. Con aspect-ratio
 * y object-fit se recorta por el centro en vez de encoger la columna o estirar
 * la imagen, y el hueco que ocupa es siempre el mismo antes de que cargue.
 */
.iacc-nota__imagen {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 760 / 400;

	object-fit: cover;
	border-radius: 16px;
}

.iacc-nota--blog .iacc-nota__imagen {
	aspect-ratio: 760 / 340;
}

.iacc-nota--prensa .iacc-nota__imagen {
	aspect-ratio: 760 / 380;
}

.iacc-nota__pie {
	margin-top: 24px;

	color: var(--wp--preset--color--texto-medio, #4e6667);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
}

/* --- El cuerpo que escribe la redacción -----------------------------------
   Los márgenes van con el selector de hermano adyacente y no con margin-top a
   secas: así el primer elemento del cuerpo no separa de la foto más de lo que
   ya separa el hueco de la columna. */
.iacc-nota__cuerpo > * {
	margin-block: 0;
}

.iacc-nota__cuerpo > * + * {
	margin-top: 24px;
}

.iacc-nota__cuerpo p {
	color: var(--wp--preset--color--texto, #272727);
	font-size: var(--wp--preset--font-size--16, 16px);
	line-height: 1.55;
}

.iacc-nota__cuerpo h2 {
	color: var(--wp--preset--color--texto, #272727);
	font-size: var(--wp--preset--font-size--28, 28px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.28px;

	/* Hueco mayor por arriba: un encabezado pertenece a lo que viene después,
	   no a lo que acaba de terminar. */
	margin-top: 40px;

	/* El índice lleva aquí de un salto y la cabecera fija taparía el título. */
	scroll-margin-top: 96px;
}

.iacc-nota__cuerpo h3 {
	margin-top: 32px;

	color: var(--wp--preset--color--texto, #272727);
	font-size: var(--wp--preset--font-size--22, 22px);
	font-weight: 700;
	line-height: 1.3;

	scroll-margin-top: 96px;
}

/*
 * Los enlaces que escribe la redacción dentro de un párrafo, no los que son un
 * componente entero. Sin el :not(), esta regla le ganaba por especificidad al
 * «Ver también» —que es un enlace con su propia clase— y le pintaba el rótulo
 * y el titular subrayados, que no es lo que dice el diseño. Lo mismo que pasó
 * con las listas y la pista de la galería.
 */
.iacc-nota__cuerpo a:not([class*="iacc-"]) {
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * Solo las listas que escribe la redacción, no las de dentro de un componente.
 * Sin el «>», esta regla alcanzaba a la pista de la galería —que es un <ul>— y
 * le metía la sangría de 1,4em, dejando las cuatro fotos seis píxeles más
 * estrechas de lo que pide el diseño.
 */
.iacc-nota__cuerpo > ul,
.iacc-nota__cuerpo > ol {
	padding-left: 1.4em;

	color: var(--wp--preset--color--texto, #272727);
	font-size: var(--wp--preset--font-size--16, 16px);
	line-height: 1.55;
}

.iacc-nota__cuerpo > ul > li + li,
.iacc-nota__cuerpo > ol > li + li {
	margin-top: 8px;
}

.iacc-nota__cuerpo img {
	max-width: 100%;
	height: auto;

	border-radius: 16px;
}

/*
 * LA GALERÍA SE SALE DE LA MEDIDA DE LECTURA
 * Va dentro del cuerpo, como un bloque más, así que le tocaría el ancho de 760
 * de la regla de arriba. Pero en el diseño ocupa el contenedor entero, porque
 * cuatro fotos en 760 quedan del tamaño de un sello.
 */
.iacc-nota__cuerpo > .iacc-galeria {
	max-width: none;
}

/*
 * Y sus fotos conservan el alto que les da su bloque. La regla de arriba
 * —«.iacc-nota__cuerpo img»— le gana por especificidad a «.iacc-galeria__img» y
 * les ponía height auto, que con object-fit deja las cuatro de distinto alto.
 */
.iacc-nota__cuerpo .iacc-galeria__img {
	height: 220px;
}

/* --- El índice ------------------------------------------------------------
   Solo en el blog. Va detrás en el documento y la rejilla lo sube a la
   derecha, para que quien navega con teclado llegue antes a la nota. */
.iacc-nota__indice-caja {
	padding: 24px 20px;

	background: var(--wp--preset--color--gris-suave, #f5f6f6);
	border-radius: 16px;
}

.iacc-nota__indice-rotulo {
	margin: 0 0 12px;

	color: var(--wp--preset--color--marca-oscura, #3d7a00);
	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
}

.iacc-nota__indice-lista {
	margin: 0;
	padding: 0;
	list-style: none;

	display: flex;
	flex-direction: column;
	gap: 10px;
}

.iacc-nota__indice-lista a {
	color: var(--wp--preset--color--texto, #272727);
	font-size: var(--wp--preset--font-size--14, 14px);
	line-height: 1.45;
	text-decoration: none;
}

.iacc-nota__indice-lista a:hover,
.iacc-nota__indice-lista a:focus-visible {
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
	text-decoration: underline;
}

/* --- La banda de conversión -----------------------------------------------
   El mismo degradado del bloque «Llamado con acciones»: es el recurso de marca
   para las bandas oscuras y no tiene sentido tener dos parecidos. */
.iacc-nota__llamada {
	display: flex;
	flex-direction: column;
	gap: 24px;

	padding: 32px;

	background-color: var(--wp--preset--color--neutral-900, #022426);
	background-image: linear-gradient(14deg, #022426 14%, #1c6f3b 86%);
	border-radius: 20px;
	box-shadow: 0 4px 16px rgb(8 33 41 / 10%);
}

.iacc-nota__llamada-texto {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.iacc-nota__llamada-titulo {
	margin: 0;

	color: var(--wp--preset--color--neutral-0, #fff);
	font-size: var(--wp--preset--font-size--28, 28px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.28px;
}

.iacc-nota__llamada-cuerpo {
	margin: 0;

	color: var(--wp--preset--color--gris-claro, #e1e5e5);
	font-size: var(--wp--preset--font-size--16, 16px);
	line-height: 1.55;
}

.iacc-nota__llamada-acciones {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.iacc-nota__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	min-height: 48px;
	padding-inline: 24px;

	border-radius: 12px;

	font-size: var(--wp--preset--font-size--16, 16px);
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;

	transition: background-color .2s ease, border-color .2s ease;
}

.iacc-nota__boton--primario {
	background: var(--wp--preset--color--marca, #52a400);
	color: var(--wp--preset--color--neutral-900, #022426);

	/* El resplandor verde es un recurso de marca, no una sombra genérica. */
	box-shadow: 0 6px 18px rgb(82 164 0 / 35%);
}

.iacc-nota__boton--primario:hover,
.iacc-nota__boton--primario:focus-visible {
	background: var(--wp--preset--color--marca-clara, #97c866);
}

.iacc-nota__boton--secundario {
	background: rgb(255 255 255 / 6%);
	border: 1px solid rgb(44 180 95 / 55%);
	color: var(--wp--preset--color--marca-suave, #dcedcc);
}

.iacc-nota__boton--secundario:hover,
.iacc-nota__boton--secundario:focus-visible {
	background: rgb(255 255 255 / 12%);
	border-color: var(--wp--preset--color--esmeralda, #2cb45f);
}

/* --- Notas relacionadas ---------------------------------------------------
   Las tarjetas y su carrusel son los del piso «IACC hoy» y su CSS ya está en
   el bloque; aquí solo va la cabecera. */
.iacc-nota__otras-cabecera {
	display: flex;
	flex-direction: column;
	gap: 12px;

	margin-bottom: 32px;
}

.iacc-nota__otras-titulo {
	margin: 0;

	color: var(--wp--preset--color--texto, #272727);
	font-size: var(--wp--preset--font-size--28, 28px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.5px;
}

.iacc-nota__otras-enlace {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	color: var(--wp--preset--color--marca-oscura, #3d7a00);
	font-size: var(--wp--preset--font-size--16, 16px);
	font-weight: 700;
	text-decoration: none;
}

.iacc-nota__otras-enlace:hover,
.iacc-nota__otras-enlace:focus-visible {
	text-decoration: underline;
}

.iacc-nota__otras-flecha {
	width: 20px;
	height: 20px;
}

/* ===========================================================================
   ESCRITORIO
   =========================================================================== */
@media (min-width: 992px) {

	.iacc-nota__hero {
		padding-block: 56px 24px;
	}

	.iacc-nota__titular {
		font-size: var(--wp--preset--font-size--48, 48px);
	}

	/*
	 * La columna de lectura y el índice, con el hueco de 60 que da el diseño
	 * entre la columna de 760 y la caja de 280 dentro de los 1240.
	 */
	.iacc-nota__columnas--con-indice {
		grid-template-columns: 760px minmax(0, 1fr);
		gap: 60px;
	}

	/* El índice acompaña la lectura mientras se baja. El tope deja sitio a la
	   cabecera fija.

	   Lo que se pega es la caja, no el <nav>: el <nav> se estira con la columna
	   —así lo hace la rejilla si no se le dice lo contrario— y ese estirón es
	   justo el recorrido que la caja necesita para acompañar la lectura. Con
	   align-self: start el <nav> medía lo que la caja y el efecto duraba dos
	   dedos de desplazamiento. */
	.iacc-nota__indice-caja {
		position: sticky;

		/*
		 * Justo debajo de la cabecera, la mida lo que mida: el alto lo escribe
		 * assets/js/main.js, que es quien la ve. Con un número fijo, la
		 * cabecera al reaparecer —se esconde al bajar y vuelve al subir— le
		 * caía encima al índice y le tapaba el rótulo.
		 */
		top: calc(var(--iacc-cabecera-alto, 112px) + 24px);

		width: 280px;

		transition: top .25s ease;
	}

	/* Y mientras la cabecera está fuera, el índice sube a ocupar ese sitio. */
	.iacc-cabecera-oculta .iacc-nota__indice-caja {
		top: 24px;
	}

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

		.iacc-nota__indice-caja {
			transition: none;
		}
	}

	.iacc-nota__llamada {
		flex-direction: row;
		align-items: center;
		gap: 40px;
	}

	.iacc-nota__llamada-texto {
		flex: 1 1 auto;
		min-width: 0;
	}

	.iacc-nota__llamada-acciones {
		flex-direction: row;
		flex-shrink: 0;
	}

	.iacc-nota__otras-cabecera {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.iacc-nota__otras-titulo {
		font-size: var(--wp--preset--font-size--36, 36px);
	}
}

/* ===========================================================================
   MÓVIL
   Figma: 6657:28925. El índice se va arriba —en una pantalla estrecha no hay
   sitio al lado— y el titular baja a 32.
   =========================================================================== */
@media (max-width: 991px) {

	.iacc-nota__hero {
		padding-block: 40px 20px;
	}

	.iacc-nota__titular {
		font-size: var(--wp--preset--font-size--32, 32px);
		letter-spacing: -0.5px;
	}

	.iacc-nota__seccion {
		padding-block: 24px 48px;
	}

	.iacc-nota__seccion--llamada,
	.iacc-nota__seccion--otras {
		padding-block: 48px;
	}

	/* El índice, primero. Va detrás en el documento por accesibilidad, así que
	   se recoloca con el orden de la rejilla. */
	.iacc-nota__columnas--con-indice {
		grid-template-columns: minmax(0, 1fr);
	}

	.iacc-nota__columnas--con-indice .iacc-nota__indice {
		order: -1;
	}

	.iacc-nota__llamada {
		padding: 28px 20px;
	}

	.iacc-nota__llamada-titulo {
		font-size: var(--wp--preset--font-size--24, 24px);
	}

	.iacc-nota__boton {
		width: 100%;
	}

	.iacc-nota__cuerpo h2 {
		font-size: var(--wp--preset--font-size--24, 24px);
	}

	/* En móvil las fotos de la galería son más bajas, y aquí también hay que
	   ganarle a la regla de «.iacc-nota__cuerpo img». */
	.iacc-nota__cuerpo .iacc-galeria__img {
		height: 180px;
	}
}

@media (max-width: 991px) {

	/* En móvil el pie baja a 11 y los párrafos respiran algo menos. */
	.iacc-nota__pie {
		font-size: 11px;
	}

	.iacc-nota--blog .iacc-nota__imagen,
	.iacc-nota--prensa .iacc-nota__imagen {
		aspect-ratio: 350 / 200;
	}

	/* Aquí también hay que ganarle a «.iacc-nota__cuerpo img». */
	.iacc-nota__cuerpo .iacc-galeria__img {
		height: 180px;
	}

	.iacc-nota__cuerpo p,
	.iacc-nota__cuerpo > ul,
	.iacc-nota__cuerpo > ol {
		line-height: 1.45;
	}

	.iacc-nota__lectura {
		gap: 20px;
	}
}

/* El apartado que se está leyendo. Lo marca assets/js/nota.js con aria-current,
   así que el verde y el anuncio del lector de pantalla van siempre juntos. */
.iacc-nota__indice-lista a[aria-current] {
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
	font-weight: 700;
}

/* --- Los vídeos del cuerpo ------------------------------------------------
   Un vídeo pegado en una nota llega con el ancho escrito en su propio atributo
   —500 px, que es lo que WordPress pide por defecto al incrustar—. En un móvil
   de 390 eso no desborda solo el cuerpo: el navegador reduce la escala de la
   página entera para que quepa, y toda la nota se ve más pequeña de lo que debe.

   Así que ningún marco desborda, y los que son reproductores ocupan la columna
   de lectura entera en 16:9, que es la proporción con la que se graba y publica
   todo lo que enlazan los medios. Los demás marcos —un formulario, un mapa—
   conservan el alto que traen: forzarles una proporción de vídeo los cortaría. */
/*
 * El navegador le da a <figure> un margen lateral de 40 px de serie, y el
 * editor de bloques envuelve en <figure> lo que se inserta: una imagen, un
 * vídeo, una cita. Sin esto, el vídeo del editor nuevo sale desplazado y más
 * estrecho que los párrafos de al lado, y en el móvil pierde 80 px de ancho.
 */
.iacc-nota__cuerpo figure {
	margin-inline: 0;
}

.iacc-nota__cuerpo iframe {
	display: block;
	max-width: 100%;
}

.iacc-nota__cuerpo iframe[allowfullscreen],
.iacc-nota__cuerpo iframe[src*="youtube"],
.iacc-nota__cuerpo iframe[src*="youtu.be"],
.iacc-nota__cuerpo iframe[src*="vimeo"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;

	background: var(--wp--preset--color--gris-suave, #f5f6f6);
	border: 0;
	border-radius: 16px;
}

/* --- La ficha del medio ---------------------------------------------------
   Figma: 6627:28137 (escritorio) y 6659:29394 (móvil).

   Solo en prensa, y lo primero que se lee: de dónde sale la nota. El logo va
   sobre blanco aunque la caja sea gris, porque los logotipos de los medios
   están hechos para fondo blanco y sobre gris pierden el filo. */
.iacc-nota__medio {
	display: flex;
	gap: 24px;
	align-items: center;

	max-width: 760px;
	padding: 24px;

	background: var(--wp--preset--color--gris-suave, #f5f6f6);
	border-radius: 16px;
}

.iacc-nota__medio-marca {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;

	width: 120px;
	height: 72px;
	padding: 8px;

	background: #fff;
	border-radius: 12px;
}

.iacc-nota__medio-logo {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;

	object-fit: contain;
}

/* Sin logo, el nombre del medio escrito: la caja blanca sigue ahí y la ficha
   no cambia de forma según lo que se haya cargado. */
.iacc-nota__medio-sinlogo {
	color: var(--wp--preset--color--texto-medio, #4e6667);
	font-size: var(--wp--preset--font-size--14, 14px);
	line-height: 1.45;
	text-align: center;
}

.iacc-nota__medio-datos {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
}

.iacc-nota__medio-rotulo {
	margin: 0;

	color: var(--wp--preset--color--marca-oscura, #3d7a00);
	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 700;
	letter-spacing: 1.04px;
	line-height: 1.2;
	text-transform: uppercase;
}

.iacc-nota__medio-nombre {
	margin: 0;

	color: var(--wp--preset--color--texto, #272727);
	font-size: var(--wp--preset--font-size--16, 16px);
	font-weight: 700;
	line-height: 1.3;
}

.iacc-nota__medio-boton {
	display: inline-flex;
	flex: 0 0 auto;
	gap: 8px;
	align-items: center;
	justify-content: center;

	min-height: 48px;
	padding-inline: 24px;

	background: var(--wp--preset--color--marca, #52a400);
	border-radius: 12px;
	color: var(--wp--preset--color--neutral-900, #022426);
	font-size: var(--wp--preset--font-size--16, 16px);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;

	/* El resplandor verde es un recurso de marca, no una sombra genérica. */
	box-shadow: 0 6px 18px rgb(82 164 0 / 35%);

	transition: background-color .2s ease;
}

.iacc-nota__medio-boton:hover,
.iacc-nota__medio-boton:focus-visible {
	background: var(--wp--preset--color--marca-clara, #97c866);
}

.iacc-nota__medio-boton:focus-visible {
	outline: 2px solid var(--wp--preset--color--neutral-900, #022426);
	outline-offset: -4px;
}

.iacc-nota__medio-icono {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

/* --- El vocero ------------------------------------------------------------
   Figma: 6627:28154 (escritorio) y 6659:29404 (móvil).

   Quién habló en nombre de IACC, entre la bajada y el primer párrafo. Mismo
   verde sutil que «En resumen»: las dos son cajas que enmarcan la lectura sin
   ser parte del relato. */
.iacc-nota__vocero {
	display: flex;
	gap: 16px;
	align-items: center;

	max-width: 760px;
	padding: 16px;

	background: var(--wp--preset--color--marca-sutil, #eef6e6);
	border: 1px solid var(--wp--preset--color--esmeralda, #2cb45f);
	border-radius: 16px;
}

.iacc-nota__vocero-retrato {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;

	object-fit: cover;
	border-radius: 50%;
}

.iacc-nota__vocero-datos {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.iacc-nota__vocero-nombre {
	margin: 0;

	color: var(--wp--preset--color--texto, #272727);
	font-size: var(--wp--preset--font-size--16, 16px);
	font-weight: 700;
	line-height: 1.3;
}

.iacc-nota__vocero-cargo {
	margin: 0;

	color: var(--wp--preset--color--texto-medio, #4e6667);
	font-size: var(--wp--preset--font-size--14, 14px);
	line-height: 1.45;
}

.iacc-nota__vocero-cargo a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.iacc-nota__vocero-cargo a:hover,
.iacc-nota__vocero-cargo a:focus-visible {
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

@media (max-width: 991px) {

	/* En una columna de 350 los tres trozos de la ficha no caben en fila: se
	   apilan y el botón pasa a ocupar todo el ancho, que es lo que hace el
	   diseño y lo que se espera de un botón en el móvil. */
	.iacc-nota__medio {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 20px;
	}

	.iacc-nota__medio-marca {
		align-self: flex-start;
		height: 64px;
	}

	.iacc-nota__medio-boton {
		width: 100%;
	}
}

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

	.iacc-nota__medio-boton {
		transition: none;
	}
}