/* CDAR v3 =====================================================================

   El estilo nuevo, tal como viene del diseno «CDAR v3» (revision de
   septiembre): fondo crema, filete verde hondo de 2 px en absolutamente todo,
   bandas de color que van de borde a borde de la pantalla, pildoras muy
   redondas y titulares en Sora con el interletrado cerrado.

   Reglas del diseno, para no desviarse al ampliarlo:

     - Un solo grosor de filete: 2 px de --v3-tinta. No hay sombras.
     - Tres radios y nada mas: 999px (pildora), 22px (tarjeta), 14px (imagen
       dentro de una tarjeta).
     - Cada seccion es una banda de color a sangre con filete abajo. El color
       cambia; la estructura no.
     - Los antetitulos son 12-13px, peso 800, versalitas y 0.12em de
       interletrado. Marcan de que va la banda.
     - Tres colores de banda: papel, tinta (verde hondo, texto crema) y verde
       claro. El rojo es solo de acento: botones principales y antetitulos.
     - La prosa larga (biografia, descripcion de obra) va en DM Sans. Todo lo
       demas en Sora.
     - Los numeros llevan `font-variant-numeric: tabular-nums` para que no
       bailen entre filas.

   Todo cuelga de .cdar-v3, asi que ninguna regla de aqui alcanza al resto del
   sitio: las paginas viejas siguen exactamente igual.

   Peso: una hoja y ningun JavaScript. Las imagenes son las portadas
   `cover-400` que `build_book.py` ya deja hechas (~33 KB), solo donde hay
   obras, y la foto del heroe de portada, que solo pide la portada: 11 KB en
   WebP a 800 px en telefono, 23 KB a 1600 px en pantalla ancha. Nada
   externo: las dos fuentes se sirven desde el propio tema (abajo).
   ========================================================================== */


/* Fuentes, servidas desde el tema ------------------------------------------

   Antes venian de Google Fonts: una hoja mas y dos servidores mas a los que
   conectarse (DNS y TLS dos veces) antes de ver la letra buena, que en un
   telefono viejo con mala senal es lo que mas tarda. Ahora salen del mismo
   servidor y por la misma conexion que la pagina, y las reglas van en esta
   hoja, asi que no hay ninguna peticion de CSS aparte.

   Solo el juego latino (es el `latin` de Google: tildes, ñ, ¿ ¡ « » y las
   comillas tipograficas; no el `latin-ext`). Ficheros sin modificar, bajados
   de Fontsource 5.3.0, que los saca de Google Fonts. Licencia OFL 1.1, al lado
   de los ficheros (`fuentes/OFL-*.txt`).

   - **Sora** es una sola fuente variable (32.9 KB) que cubre todos los pesos
     que usa v3: 300, 400, 500, 600, 700 y 800. En estaticas serian cinco
     ficheros y ~74 KB.
   - **DM Sans** va en tres estaticas (~14 KB cada una) y no en variable
     (36 KB): la prosa solo usa 400, y 700 e italica solo cuando el texto trae
     `<strong>` o `<em>`. El navegador baja solo las que la pagina pinta.

   `font-display: swap`: el texto sale enseguida con la letra del sistema y
   cambia cuando llega la fuente. Con mala conexion se lee antes, que es lo que
   importa. El `unicode-range` es el de Google; un caracter de fuera (las
   flechas ← →) lo pinta la fuente del sistema, sin bajar nada. */

@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("fuentes/sora-latin-wght.woff2") format("woff2");
	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: "DM Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fuentes/dm-sans-latin-400.woff2") format("woff2");
	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: "DM Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fuentes/dm-sans-latin-700.woff2") format("woff2");
	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: "DM Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fuentes/dm-sans-latin-400-italic.woff2") format("woff2");
	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;
}

.cdar-v3 {
	/* La paleta del diseno de septiembre: cuatro colores y nada mas. El verde
	   hondo hace de tinta -- texto, filete y bandas oscuras --, el crema de
	   papel, y el rojo y el verde claro de acentos. No hay blanco ni gris: el
	   texto secundario es la misma tinta, un poco rebajada. */
	--v3-papel: #f7f0e1;
	--v3-tinta: #033a2a;
	--v3-gris: #3d5d51;
	--v3-rojo: #db1625;
	--v3-verde: #8cc479;

	/* Medidas */
	--v3-filete: 2px solid var(--v3-tinta);
	--v3-ancho: 1280px;
	--v3-margen: 36px;
	--v3-radio-tarjeta: 22px;
	--v3-radio-imagen: 14px;

	/* Tipografia. Sora para titulares y rotulos; DM Sans para la prosa y los
	   campos. La pila de reserva es la del sistema: mientras las fuentes
	   llegan, o si no llegan, la pagina sigue siendo la misma pagina. */
	--v3-sans: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--v3-texto: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	background: var(--v3-papel);
	color: var(--v3-tinta);
	font-family: var(--v3-sans);
	font-size: 16px;
	line-height: 1.5;
}

/* Las bandas salen del contenedor de Astra con margenes negativos. Aqui se
   contiene lo que sobre; de paso tapa el desborde de 27 px de la cabecera de
   Astra en pantallas estrechas. */
/* El crema va escrito, no como var(--v3-papel): las variables se definen en
   .cdar-v3, que esta dentro del body, y aqui no existen. Con la variable el
   fondo quedaba transparente y, en una pagina corta (una busqueda sin
   resultados), el hueco entre el contenido y el pie salia en blanco. */
body.cdar-v3-activa {
	overflow-x: clip;
	background: #f7f0e1;
}

/* Astra centra y limita #primary. v3 pinta sus propias bandas, asi que aqui se
   le quita el aire para que no haya doble margen.

   `flex: 1 1 100%` no es decorativo y no se puede cambiar por `width: auto`.
   El `.ast-container` que envuelve a #primary es `display: flex`, asi que
   #primary es un elemento flexible: con `width: auto` y sin flex-grow se
   encoge a **ancho 0**. Y como las bandas se sacan a sangre con
   `calc(50% - 50vw)`, ese 50% pasaba a ser 50% de 0 y las tiraba media
   ventana a la izquierda. Se vio en produccion, no en la vista previa: en
   local no existe el contenedor flexible de Astra. */
.cdar-v3-activa #primary {
	/* !important no es pereza: Astra imprime su CSS dinamico en un <style> del
	   wp_head, o sea despues de esta hoja, y a igual especificidad gana el
	   ultimo. Sin esto vuelve un `margin-top: 60px` que separa la primera
	   banda de la cabecera. Son cinco propiedades de reseteo del contenedor
	   ajeno, no estilo propio. */
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}


/* Bandas ------------------------------------------------------------------ */

/* A sangre: el margen negativo lleva el borde de la banda hasta el borde de la
   ventana, sea cual sea el ancho del contenedor que la envuelve. */
.cdar-v3__banda {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-bottom: var(--v3-filete);
	background: var(--v3-papel);
}

.cdar-v3__interior {
	max-width: var(--v3-ancho);
	margin: 0 auto;
	padding: 64px var(--v3-margen);
}

.cdar-v3__interior--estrecho {
	padding-top: 40px;
	padding-bottom: 40px;
}

/* Los tres colores de banda. Dos bandas iguales seguidas se separan solo por
   el filete, y el diseno lo hace asi a proposito: no hace falta alternar. */
.cdar-v3__banda--papel { background: var(--v3-papel); }
.cdar-v3__banda--verde { background: var(--v3-verde); color: var(--v3-tinta); }
.cdar-v3__banda--tinta { background: var(--v3-tinta); color: var(--v3-papel); }

/* Tipografia -------------------------------------------------------------- */

.cdar-v3 h1,
.cdar-v3 h2,
.cdar-v3 h3,
.cdar-v3 h4 {
	font-family: var(--v3-sans);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	margin: 0;
	text-wrap: balance;
	/* Astra pone `text-transform: capitalize` y su granate en los titulares.
	   El diseno escribe «Autores de la coleccion», no «Autores De La
	   Coleccion», y la tinta es la del sistema v3. */
	text-transform: none;
	color: inherit;
}

/* El titular de portada de una vista. Crece con la pantalla pero nunca tanto
   como para partir un apellido largo en un telefono.

   Estos dos van con `.cdar-v3 ` delante: `.cdar-v3 h1..h4 { margin: 0 }` vale
   (0,1,1) y con una sola clase les quitaba el margen de abajo, de modo que el
   titulo quedaba pegado a lo que venia debajo. */
.cdar-v3 .cdar-v3__titular {
	font-size: clamp(2.5rem, 7vw, 4.5rem);
	letter-spacing: -.035em;
	line-height: .95;
	margin: 0 0 18px;
}

.cdar-v3 .cdar-v3__titular--hondo {
	font-size: clamp(2.25rem, 6vw, 5rem);
	letter-spacing: -.04em;
	line-height: .92;
	margin-bottom: 28px;
}

.cdar-v3 .cdar-v3__seccion-titulo {
	font-size: clamp(1.9rem, 4vw, 3.25rem);
	margin: 0 0 28px;
}

/* Antetitulo: la etiqueta en versalitas que abre casi todas las bandas. */
.cdar-v3__ante {
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
	margin: 0 0 14px;
	color: var(--v3-rojo);
}

.cdar-v3__ante--tinta { color: var(--v3-tinta); }
/* Sobre banda de tinta el rojo no se lee: el antetitulo va en verde claro. */
.cdar-v3__ante--claro { color: var(--v3-verde); }

.cdar-v3__entrada {
	font-size: 17px;
	line-height: 1.6;
	max-width: 54ch;
	margin: 0;
}

/* La prosa larga, en la fuente de texto. */
.cdar-v3__prosa {
	font-family: var(--v3-texto);
	font-size: 17px;
	line-height: 1.85;
	max-width: 70ch;
	text-align: justify;
	hyphens: auto;
}

.cdar-v3__prosa p {
	margin: 0 0 20px;
}

.cdar-v3__prosa p:last-child {
	margin-bottom: 0;
}

/* La cita del autor, en el encabezado de su ficha. */
.cdar-v3__cita {
	font-family: var(--v3-texto);
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	line-height: 1.5;
	max-width: 36ch;
	margin: 0;
	color: var(--v3-tinta);
}

.cdar-v3 a {
	color: var(--v3-tinta);
	text-decoration: none;
}

.cdar-v3 a:hover {
	color: var(--v3-rojo);
}

.cdar-v3 :focus-visible {
	outline: 3px solid var(--v3-rojo);
	outline-offset: 2px;
}

.cdar-v3 ::selection {
	background: var(--v3-verde);
	color: var(--v3-tinta);
}

/* Los numeros no bailan entre filas. */
.cdar-v3__cifras {
	font-variant-numeric: tabular-nums;
}


/* Pildoras ---------------------------------------------------------------- */

.cdar-v3 .cdar-v3__pildora {
	/* Astra pone `text-transform: uppercase` en los botones; el diseno no. */
	text-transform: none;
	letter-spacing: normal;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: var(--v3-filete);
	border-radius: 999px;
	padding: 13px 26px;
	font-family: var(--v3-sans);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	background: var(--v3-papel);
	color: var(--v3-tinta);
}

.cdar-v3 .cdar-v3__pildora:hover {
	background: var(--v3-verde);
	color: var(--v3-tinta);
}

.cdar-v3 .cdar-v3__pildora--tinta {
	background: var(--v3-tinta);
	color: var(--v3-papel);
}

.cdar-v3 .cdar-v3__pildora--tinta:hover {
	background: var(--v3-rojo);
	color: var(--v3-papel);
}

/* La accion principal de cada pantalla. En el diseno va sin filete propio:
   el rojo ya separa bastante del fondo. */
.cdar-v3 .cdar-v3__pildora--roja {
	background: var(--v3-rojo);
	border-color: var(--v3-rojo);
	color: var(--v3-papel);
}

.cdar-v3 .cdar-v3__pildora--roja:hover {
	background: var(--v3-tinta);
	border-color: var(--v3-tinta);
	color: var(--v3-papel);
}

.cdar-v3 .cdar-v3__pildora--hueca {
	background: transparent;
}

.cdar-v3 .cdar-v3__pildora--hueca:hover {
	background: var(--v3-tinta);
	color: var(--v3-papel);
}

/* Hueca sobre fondo oscuro: el heroe. Filete y texto en crema. */
.cdar-v3 .cdar-v3__pildora--clara {
	background: transparent;
	border-color: var(--v3-papel);
	color: var(--v3-papel);
}

.cdar-v3 .cdar-v3__pildora--clara:hover {
	background: var(--v3-papel);
	color: var(--v3-tinta);
}

/* La etiqueta verde suelta: «Archivo en acceso libre», «Ficha 04 de 15». */
.cdar-v3 .cdar-v3__sello {
	display: inline-block;
	background: var(--v3-verde);
	border: var(--v3-filete);
	border-radius: 999px;
	padding: 7px 18px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--v3-tinta);
}

.cdar-v3__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}


/* Migas ------------------------------------------------------------------- */

.cdar-v3__migas {
	font-size: 13.5px;
	font-weight: 600;
	margin: 0;
	padding: 24px var(--v3-margen) 0;
	max-width: var(--v3-ancho);
	margin-inline: auto;
	color: var(--v3-gris);
}

.cdar-v3 .cdar-v3__migas a {
	color: var(--v3-tinta);
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* El buscador ------------------------------------------------------------- */

.cdar-v3__buscador {
	display: grid;
	gap: 18px;
	margin: 0;
}

.cdar-v3__campo {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.cdar-v3__buscador label {
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 8px;
	color: var(--v3-tinta);
}

.cdar-v3__buscador input[type="search"] {
	flex: 1 1 260px;
	min-width: 0;
	box-sizing: border-box;
	font-family: var(--v3-texto);
	font-size: 17px;
	padding: 16px 24px;
	border: var(--v3-filete);
	border-radius: 999px;
	background: var(--v3-papel);
	color: var(--v3-tinta);
}

.cdar-v3__buscador input[type="search"]::placeholder {
	color: var(--v3-gris);
}

/* Los cuatro desplegables. La flecha se dibuja en el fondo porque el `select`
   nativo del sistema no admite el filete de 2 px del diseno. */
.cdar-v3__filtros {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px 20px;
}

.cdar-v3__filtros li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdar-v3__buscador select {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--v3-sans);
	font-size: 15px;
	font-weight: 600;
	padding: 13px 42px 13px 20px;
	border: var(--v3-filete);
	border-radius: 999px;
	background-color: var(--v3-papel);
	color: var(--v3-tinta);
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23033A2A' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 15px;
}

.cdar-v3__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.cdar-v3 .cdar-v3__limpiar {
	font-size: 14px;
	font-weight: 700;
	color: var(--v3-rojo);
	text-decoration: underline;
	text-underline-offset: 4px;
}


/* El indice de fichas ----------------------------------------------------- */

/* La cabecera de la tabla: «15 fichas» a la izquierda, la leyenda a la derecha. */
.cdar-v3__encabezado-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	align-items: baseline;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	padding-bottom: 14px;
	margin: 0;
}

.cdar-v3__encabezado-lista span + span {
	color: var(--v3-gris);
}

.cdar-v3__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	font-variant-numeric: tabular-nums;
}

/* Cada ficha es una fila con filete arriba: numero, nombre y datos, boton. */
.cdar-v3__ficha {
	border-top: var(--v3-filete);
	padding: 22px 0;
	margin: 0;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	gap: 22px;
	align-items: center;
}

.cdar-v3__ficha-n {
	font-size: 13px;
	font-weight: 800;
	color: var(--v3-rojo);
}

.cdar-v3__ficha-cuerpo {
	min-width: 0;
}

.cdar-v3 .cdar-v3__ficha-nombre {
	font-size: clamp(1.25rem, 2.6vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.1;
	color: var(--v3-tinta);
	display: inline-block;
}

.cdar-v3 .cdar-v3__ficha-nombre:hover {
	color: var(--v3-rojo);
}

.cdar-v3__ficha-datos {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 13.5px;
	font-weight: 600;
	margin: 8px 0 0;
	color: var(--v3-gris);
}

.cdar-v3 .cdar-v3__ficha-datos a {
	color: var(--v3-gris);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cdar-v3 .cdar-v3__ficha-datos a:hover {
	color: var(--v3-rojo);
}

/* Las obras que hicieron saltar a esta ficha en una busqueda. */
.cdar-v3__ficha-obras {
	font-style: italic;
}

.cdar-v3__ficha-bio {
	font-family: var(--v3-texto);
	font-size: 15px;
	line-height: 1.7;
	margin: 10px 0 0;
	max-width: 68ch;
	color: var(--v3-tinta);
}

.cdar-v3__lista > li:last-child {
	border-bottom: var(--v3-filete);
}

.cdar-v3__nota {
	border-top: var(--v3-filete);
	padding-top: 16px;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--v3-gris);
}

.cdar-v3__vacio {
	font-size: 18px;
	line-height: 1.6;
	margin: 0;
	max-width: 60ch;
}


/* Tarjetas de obra -------------------------------------------------------- */

.cdar-v3__obras {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cdar-v3__obra {
	background: var(--v3-papel);
	border: var(--v3-filete);
	border-radius: var(--v3-radio-tarjeta);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	color: var(--v3-tinta);
}

.cdar-v3 .cdar-v3__obra-portada {
	display: block;
	border-radius: var(--v3-radio-imagen);
	overflow: hidden;
	border: var(--v3-filete);
	background: var(--v3-tinta);
	aspect-ratio: 1 / 1.41;
}

.cdar-v3__obra-portada img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sin portada construida (las obras que siguen en flipbook) la tarjeta pinta
   un rectangulo de color con las iniciales, no un hueco roto. */
.cdar-v3 .cdar-v3__obra-portada--vacia {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--v3-rojo);
	color: var(--v3-papel);
	font-size: 42px;
	font-weight: 700;
	letter-spacing: -.03em;
}

.cdar-v3__obra-genero {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--v3-rojo);
	font-variant-numeric: tabular-nums;
}

.cdar-v3__obra-titulo {
	font-size: clamp(1.2rem, 2.2vw, 1.6rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	margin: 0;
}

.cdar-v3 .cdar-v3__obra-titulo a {
	color: var(--v3-tinta);
}

.cdar-v3 .cdar-v3__obra-titulo a:hover {
	color: var(--v3-rojo);
}

.cdar-v3__obra-desc {
	font-family: var(--v3-texto);
	font-size: 14.5px;
	line-height: 1.7;
	margin: 0;
}

.cdar-v3__obra-desc p {
	margin: 0 0 12px;
}

.cdar-v3__obra-desc p:last-child {
	margin-bottom: 0;
}

.cdar-v3__obra .cdar-v3__pildora {
	margin-top: auto;
	align-self: flex-start;
	padding: 11px 22px;
	font-size: 14px;
}


/* La obra abierta, con el lector dentro -----------------------------------= */

/* En la ficha, cada obra se despliega entera: titulo, descripcion y el visor.
   Se separan con filete, como las filas del indice. */
.cdar-v3__obra-larga {
	border-top: var(--v3-filete);
	padding: 40px 0;
	margin: 0;
}

.cdar-v3__obra-larga:last-child {
	border-bottom: var(--v3-filete);
}

.cdar-v3__obra-larga-cabeza {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 20px 32px;
	align-items: end;
	margin-bottom: 24px;
}

.cdar-v3__obra-larga-titulo {
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.05;
	margin: 0;
}

.cdar-v3__obra-cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
}

.cdar-v3__visor {
	background: var(--v3-papel);
	border: var(--v3-filete);
	border-radius: var(--v3-radio-tarjeta);
	padding: 20px;
}

/* El lector trae su propia hoja. Aqui solo se le quita el aire de arriba, que
   ya lo pone la tarjeta, y se le da el radio del diseno a la pagina. */
.cdar-v3__visor .cdar {
	margin: 0 auto;
}

/* Y se le pone la paleta de v3. El lector expone sus colores como variables,
   asi que basta redefinirlas aqui: el plugin no se toca y las paginas de hoy
   siguen con su lector gris y dorado. Tinta de fondo, crema de texto y verde
   claro de acento (hilo de avance, foco, resultado marcado). El rojo no: sobre
   el verde hondo no llega al contraste de texto. */
.cdar-v3 .cdar {
	--cdar-ink: #022a1f;
	--cdar-surround: var(--v3-tinta);
	--cdar-line: rgba(247, 240, 225, .18);
	--cdar-text: var(--v3-papel);
	--cdar-muted: #c2c9b8;
	--cdar-accent: var(--v3-verde);
	border-radius: var(--v3-radio-imagen);
}

.cdar-v3 .cdar__bar {
	border-radius: var(--v3-radio-imagen) var(--v3-radio-imagen) 0 0;
}

/* El aviso de lectura retomada trae el dorado escrito a mano, no en variable. */
.cdar-v3 .cdar__resumed {
	background: rgba(140, 196, 121, .14);
}

.cdar-v3 .cdar__results mark {
	color: var(--v3-tinta);
}

/* `.cdar-v3 a` (0,1,1) le ganaria al enlace de «Volver al inicio» del lector. */
.cdar-v3 .cdar__end a {
	color: var(--v3-verde);
}

.cdar-v3__visor .cdar__page img {
	border-radius: 8px;
}


/* Encabezado de la ficha de autor ----------------------------------------- */

.cdar-v3__autor-cabeza {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 400px);
	gap: 56px;
	align-items: start;
}

.cdar-v3__retrato {
	border: var(--v3-filete);
	border-radius: var(--v3-radio-tarjeta);
	overflow: hidden;
	background: var(--v3-rojo);
	margin: 0 0 20px;
	aspect-ratio: 3 / 4;
}

.cdar-v3__retrato img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* La tabla de metadatos: filas con filete, etiqueta a la izquierda. */
.cdar-v3__datos {
	margin: 0;
	font-size: 14.5px;
	font-variant-numeric: tabular-nums;
}

.cdar-v3__datos > div {
	border-top: var(--v3-filete);
	padding: 12px 0;
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	gap: 12px;
}

.cdar-v3__datos > div:last-child {
	border-bottom: var(--v3-filete);
}

.cdar-v3__datos dt {
	font-weight: 800;
	margin: 0;
}

.cdar-v3__datos dd {
	margin: 0;
}

/* «Sin clasificar»: la taxonomia que esta ficha no tiene.
   Apagado y en cursiva para que se lea como un dato que falta y no como un
   termino mas. No es un enlace a proposito -- no hay ningun sitio honesto al
   que llevar -- y por eso basta una clase: la regla `.cdar-v3 a` (0,1,1) que
   muerde a los componentes que si son enlaces aqui no entra. */
.cdar-v3__datos-vacio {
	color: var(--v3-gris);
	font-style: italic;
}

/* Enlaces externos, al final de la prosa de la biografia.
   Filete arriba para separarlos del texto sin abrir otra banda. */
.cdar-v3__enlaces {
	margin-top: 32px;
	padding-top: 20px;
	border-top: var(--v3-filete);
}

.cdar-v3 .cdar-v3__enlaces h3 {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--v3-tinta);
}

.cdar-v3__enlaces ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.cdar-v3__enlaces li {
	margin: 0;
	max-width: 100%;
}

/* Dos clases, no una: `.cdar-v3 a` vale (0,1,1) y le ganaria a un solo
   `.cdar-v3__enlaces a`, dejando estos enlaces sin subrayado ni peso. Es la regla que mordio tres veces
   (ESTADO §8). La flecha va en el ::after para que no se pueda seleccionar
   ni la lea el lector de pantalla como texto. */
.cdar-v3 .cdar-v3__enlaces a {
	display: inline-block;
	max-width: 100%;
	overflow-wrap: anywhere;
	color: var(--v3-tinta);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.cdar-v3 .cdar-v3__enlaces a::after {
	content: " ↗";
	text-decoration: none;
}

.cdar-v3 .cdar-v3__enlaces a:hover,
.cdar-v3 .cdar-v3__enlaces a:focus-visible {
	color: var(--v3-rojo);
}

/* La biografia: rotulo pegajoso a la izquierda, prosa a la derecha. */
.cdar-v3__bio {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.cdar-v3__bio-rotulo {
	position: sticky;
	top: 120px;
}

.cdar-v3__bio-rotulo h2 {
	font-size: clamp(1.8rem, 3.4vw, 2.75rem);
	margin: 0 0 14px;
}

.cdar-v3__bio-rotulo p {
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0;
	color: var(--v3-gris);
}

/* El pie de «anterior / siguiente» entre fichas. */
.cdar-v3__vecinas .cdar-v3__interior {
	padding-top: 28px;
	padding-bottom: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	justify-content: space-between;
	font-size: clamp(1rem, 2vw, 1.125rem);
	font-weight: 800;
}

.cdar-v3 .cdar-v3__vecinas a {
	color: var(--v3-tinta);
}

.cdar-v3 .cdar-v3__vecinas a:hover {
	color: var(--v3-rojo);
}

.cdar-v3__vecinas a:only-child:last-child {
	margin-left: auto;
}


/* Documentos -------------------------------------------------------------- */

.cdar-v3__documentos {
	display: grid;
	/* auto-fit y no auto-fill: con un solo documento la tarjeta ocupa la fila
	   en vez de quedarse en un tercio con el titulo partido en diez lineas. */
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cdar-v3__documento {
	border: var(--v3-filete);
	border-radius: var(--v3-radio-tarjeta);
	padding: 26px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--v3-tinta);
	color: var(--v3-papel);
}

/* Los documentos se colorean por turno, como en el diseno: tinta, rojo, verde. */
.cdar-v3__documento:nth-child(3n+2) { background: var(--v3-rojo); color: var(--v3-papel); }
.cdar-v3__documento:nth-child(3n+3) { background: var(--v3-verde); color: var(--v3-tinta); }

/* El antetitulo toma el color del texto de la tarjeta: el rojo por defecto
   desapareceria en la tarjeta roja. */
.cdar-v3__documento .cdar-v3__ante {
	color: inherit;
	margin-bottom: 4px;
}

/* La pildora de la tarjeta va en crema sobre las tres. */
.cdar-v3 .cdar-v3__documento .cdar-v3__pildora {
	align-self: flex-start;
	margin-top: auto;
}

.cdar-v3__documento h3 {
	font-size: clamp(1.35rem, 2.6vw, 1.75rem);
	line-height: 1.05;
	margin: 0;
}

.cdar-v3__documento-desc {
	font-family: var(--v3-texto);
	font-size: 15px;
	line-height: 1.65;
	margin: 0;
}

/* El visor de un documento vuelve a papel: dentro de una tarjeta de color no
   se leeria. */
.cdar-v3__documento .cdar-v3__visor {
	background: var(--v3-papel);
	margin-top: 6px;
}


/* Paginacion -------------------------------------------------------------- */

.cdar-v3__paginacion {
	margin: 36px 0 0;
}

.cdar-v3__paginacion ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-variant-numeric: tabular-nums;
}

.cdar-v3__paginacion li {
	margin: 0;
}

.cdar-v3__paginacion a,
.cdar-v3__paginacion span {
	display: inline-block;
	min-width: 44px;
	text-align: center;
	padding: 11px 18px;
	border: var(--v3-filete);
	border-radius: 999px;
	background: var(--v3-papel);
	color: var(--v3-tinta);
	font-weight: 700;
	font-size: 14.5px;
}

.cdar-v3 .cdar-v3__paginacion a:hover {
	background: var(--v3-verde);
	color: var(--v3-tinta);
}

/* La pagina actual no es un enlace: se pinta llena y no se puede pulsar. */
.cdar-v3__paginacion span[aria-current] {
	background: var(--v3-tinta);
	color: var(--v3-papel);
	font-weight: 800;
}


/* Pantallas estrechas ----------------------------------------------------- */

@media (max-width: 1024px) {
	.cdar-v3__autor-cabeza {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.cdar-v3__bio {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	/* Pegado no tiene sentido cuando el rotulo va encima de la prosa. */
	.cdar-v3__bio-rotulo {
		position: static;
	}

	.cdar-v3__retrato {
		max-width: 340px;
	}
}

@media (max-width: 782px) {
	.cdar-v3 {
		--v3-margen: 20px;
	}

	.cdar-v3__interior {
		padding-top: 44px;
		padding-bottom: 44px;
	}

	/* La fila de ficha se apila: numero y nombre arriba, boton abajo del todo,
	   a lo ancho, para que se pueda pulsar con el pulgar. */
	.cdar-v3__ficha {
		grid-template-columns: 32px minmax(0, 1fr);
		gap: 12px 14px;
		padding: 20px 0;
		/* Apilada, el numero se alinea con el nombre y no con el centro del
		   bloque entero, que lo dejaba flotando a media biografia. */
		align-items: start;
	}

	.cdar-v3__ficha > .cdar-v3__pildora {
		grid-column: 1 / -1;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
	}

	.cdar-v3__prosa {
		text-align: left;
		hyphens: none;
	}

	.cdar-v3__obra-larga-cabeza {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	/* Apilado, el enlace de volver no debe estirarse a lo ancho: no es una
	   accion principal y a pantalla completa parece un boton de descarga. */
	.cdar-v3__obra-larga-cabeza .cdar-v3__pildora {
		justify-self: start;
	}

	.cdar-v3__datos > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.cdar-v3__visor {
		padding: 12px;
		border-radius: var(--v3-radio-imagen);
	}
}

@media (max-width: 480px) {
	.cdar-v3__botones .cdar-v3__pildora {
		flex: 1 1 100%;
		justify-content: center;
	}
}


/* Impresion y movimiento -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cdar-v3 * {
		scroll-behavior: auto !important;
	}
}

@media print {
	.cdar-v3__banda {
		margin-left: 0;
		margin-right: 0;
		background: #fff !important;
		color: #000 !important;
	}

	.cdar-v3__pildora,
	.cdar-v3__paginacion,
	.cdar-v3__buscador {
		display: none;
	}
}


/* La portada ---------------------------------------------------------------

   El heroe es una banda de tinta con la foto de archivo detras, tapada por un
   degradado que deja el texto sobre verde casi opaco y la foto a la vista solo
   a la derecha. La foto se sirve en dos tamanos: 800 px en telefono, donde el
   degradado la cubre casi entera y no tiene sentido pagar mas, y 1600 px a
   partir de 783 px. Cada una en WebP con el JPEG de reserva: el navegador que
   no entiende `image-set(... type())` descarta la segunda declaracion entera y
   se queda con la primera. */

.cdar-v3__hero {
	position: relative;
	overflow: hidden;
	background-color: var(--v3-tinta);
	background-position: center 58%;
	background-size: cover;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(180deg, rgba(3, 58, 42, .94) 0%, rgba(3, 58, 42, .82) 100%),
		url("v3/portada-800.jpg");
	background-image:
		linear-gradient(180deg, rgba(3, 58, 42, .94) 0%, rgba(3, 58, 42, .82) 100%),
		image-set(url("v3/portada-800.webp") type("image/webp"), url("v3/portada-800.jpg") type("image/jpeg"));
}

@media (min-width: 783px) {
	.cdar-v3__hero {
		background-image:
			linear-gradient(100deg, rgba(3, 58, 42, .96) 0%, rgba(3, 58, 42, .9) 48%, rgba(3, 58, 42, .35) 78%, rgba(3, 58, 42, .12) 100%),
			url("v3/portada-1600.jpg");
		background-image:
			linear-gradient(100deg, rgba(3, 58, 42, .96) 0%, rgba(3, 58, 42, .9) 48%, rgba(3, 58, 42, .35) 78%, rgba(3, 58, 42, .12) 100%),
			image-set(url("v3/portada-1600.webp") type("image/webp"), url("v3/portada-1600.jpg") type("image/jpeg"));
	}
}

.cdar-v3__hero .cdar-v3__interior {
	position: relative;
	padding-top: 88px;
	padding-bottom: 84px;
}

.cdar-v3__hero-texto {
	max-width: 44rem;
}

/* El trazo verde: un solo `path` en linea, sin peticion. Decorativo, asi que
   `aria-hidden` en el marcado y fuera de la impresion. */
.cdar-v3__trazo {
	position: absolute;
	pointer-events: none;
}

.cdar-v3__trazo--hero {
	color: var(--v3-verde);
	top: -30px;
	right: -40px;
	width: 300px;
	height: 225px;
}

.cdar-v3__trazo--gella {
	color: var(--v3-tinta);
	/* Sube hasta quedar casi entero en el aire de arriba de la banda: mas
	   abajo cruzaba las primeras lineas del texto de GELLA. */
	top: -96px;
	right: 40px;
	width: 220px;
	height: 165px;
	transform: scaleX(-1);
	opacity: .55;
}

.cdar-v3__hero .cdar-v3__sello {
	margin-bottom: 28px;
}

/* Con `.cdar-v3 ` delante para ganarle a `.cdar-v3 h1 { color: inherit }`. El
   titular va en peso 300 y solo el nombre de la coleccion en 700. */
.cdar-v3 .cdar-v3__hero-titulo {
	font-size: clamp(2.5rem, 5.4vw, 4.75rem);
	font-weight: 300;
	line-height: .98;
	letter-spacing: -.03em;
	max-width: 18ch;
	margin: 0 0 22px;
	color: var(--v3-papel);
}

.cdar-v3 .cdar-v3__hero-titulo strong {
	font-weight: 700;
}

.cdar-v3__hero-entrada {
	font-family: var(--v3-texto);
	font-size: clamp(1.05rem, 2vw, 1.2rem);
	line-height: 1.55;
	max-width: 46ch;
	margin: 0;
	color: var(--v3-papel);
}

/* La tira de atajos bajo el heroe: a que banda saltar. */
.cdar-v3__atajos .cdar-v3__interior {
	padding-top: 14px;
	padding-bottom: 14px;
}

.cdar-v3__atajos ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 34px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.cdar-v3__atajos li {
	margin: 0;
}

.cdar-v3 .cdar-v3__atajos a {
	color: var(--v3-papel);
}

.cdar-v3 .cdar-v3__atajos a:hover {
	color: var(--v3-verde);
}

.cdar-v3__ante--centro {
	text-align: center;
}

/* Los ambitos: las puertas de entrada a la coleccion. */
.cdar-v3__ambitos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 18px;
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

.cdar-v3__ambitos li {
	margin: 0;
}

.cdar-v3 .cdar-v3__ambito {
	display: flex;
	align-items: flex-end;
	min-height: 200px;
	box-sizing: border-box;
	padding: 16px;
	border: var(--v3-filete);
	border-radius: var(--v3-radio-tarjeta);
	font-size: clamp(1.15rem, 1.7vw, 1.3rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--v3-papel);
	background: var(--v3-tinta);
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.cdar-v3 .cdar-v3__ambito--rojo  { background: var(--v3-rojo); }
.cdar-v3 .cdar-v3__ambito--verde { background: var(--v3-verde); color: var(--v3-tinta); }

.cdar-v3 .cdar-v3__ambito:hover {
	transform: translateY(-4px);
}

.cdar-v3 .cdar-v3__ambito--tinta:hover,
.cdar-v3 .cdar-v3__ambito--rojo:hover {
	color: var(--v3-papel);
}

.cdar-v3 .cdar-v3__ambito--verde:hover {
	color: var(--v3-tinta);
}

.cdar-v3 .cdar-v3__masbusqueda {
	display: inline-block;
	margin-top: 16px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Las tres cifras grandes, sobre banda de tinta. */
.cdar-v3__cifras-lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.cdar-v3__cifras-lista li {
	margin: 0;
}

.cdar-v3__punto {
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	margin: 0 auto 18px;
}

.cdar-v3__punto--verde { background: var(--v3-verde); }
.cdar-v3__punto--rojo  { background: var(--v3-rojo); }

.cdar-v3__cifra {
	display: block;
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
}

.cdar-v3__cifra-pie {
	display: block;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Titulo de seccion con su boton a la derecha. */
.cdar-v3__cabecera-seccion {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 32px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 32px;
}

.cdar-v3 .cdar-v3__cabecera-seccion .cdar-v3__seccion-titulo {
	margin: 0;
}

/* El indice corto de nombres, a tres columnas con filete arriba. */
.cdar-v3__nombres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cdar-v3__nombres li {
	display: flex;
	gap: 14px;
	align-items: baseline;
	border-top: var(--v3-filete);
	padding: 14px 0;
	margin: 0;
}

.cdar-v3 .cdar-v3__nombres a {
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--v3-tinta);
}

.cdar-v3 .cdar-v3__nombres a:hover {
	color: var(--v3-rojo);
}

/* Mision y vision, sobre la banda de tinta. */
.cdar-v3__proyecto {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 32px;
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}

.cdar-v3__tarjeta {
	background: var(--v3-papel);
	color: var(--v3-tinta);
	border: var(--v3-filete);
	border-radius: var(--v3-radio-tarjeta);
	padding: 30px;
	margin: 0;
}

.cdar-v3__tarjeta .cdar-v3__prosa {
	font-size: 16px;
	line-height: 1.75;
	max-width: none;
	text-align: left;
}

/* Los objetivos: filas numeradas en romanos, con filete crema a media luz.
   El numero sale del contador de CSS y no del marcado, asi que anadir un
   parrafo en el escritorio anade un objetivo sin tocar la plantilla. */
.cdar-v3__objetivos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 0 40px;
	counter-reset: objetivo;
}

.cdar-v3__objetivos li {
	counter-increment: objetivo;
	border-top: 2px solid rgba(247, 240, 225, .5);
	padding: 20px 0;
	margin: 0;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 14px;
	font-family: var(--v3-texto);
	font-size: 15.5px;
	line-height: 1.65;
}

.cdar-v3__objetivos li::before {
	content: counter(objetivo, upper-roman);
	font-family: var(--v3-sans);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--v3-verde);
}

.cdar-v3__gella-banda {
	position: relative;
	overflow: hidden;
}

.cdar-v3__gella {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: 48px;
	align-items: start;
}

.cdar-v3 .cdar-v3__gella-titulo {
	font-size: clamp(2.75rem, 6vw, 4.5rem);
	font-weight: 300;
	line-height: .95;
	margin: 0 0 18px;
}

.cdar-v3 .cdar-v3__gella-titulo strong {
	font-weight: 700;
}


/* Duotono ------------------------------------------------------------------

   Las portadas de la portada y de la ficha se pintan en gris y se funden con
   el verde hondo del fondo, como en el diseno: asi una rejilla de libros de
   colores dispares se lee como una sola coleccion. Es solo CSS sobre la misma
   imagen; si algun dia se quiere volver al color, basta quitar este bloque. */
.cdar-v3__obra-portada img {
	filter: grayscale(1) contrast(1.15);
	mix-blend-mode: luminosity;
}


/* Cabecera y pie ------------------------------------------------------------

   En las paginas v3 sustituyen a la cabecera y el pie de Astra (ver
   `cdar_v3_cabecera()` en inc/v3.php). Viven fuera de `.cdar-v3`, en el
   `#page` de Astra, asi que llevan sus propias variables. */

.cdar-v3-cinta,
.cdar-v3-cabecera,
.cdar-v3-pie {
	--v3-papel: #f7f0e1;
	--v3-tinta: #033a2a;
	--v3-rojo: #db1625;
	--v3-verde: #8cc479;
	--v3-filete: 2px solid var(--v3-tinta);
	--v3-margen: 36px;
	font-family: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--v3-tinta);
}

.cdar-v3-cabecera a,
.cdar-v3-pie a {
	color: var(--v3-tinta);
	text-decoration: none;
}

.cdar-v3-cabecera a:hover,
.cdar-v3-pie a:hover {
	color: var(--v3-rojo);
}

.cdar-v3-cabecera :focus-visible,
.cdar-v3-pie :focus-visible {
	outline: 3px solid var(--v3-rojo);
	outline-offset: 2px;
}

.cdar-v3-cabecera__interior,
.cdar-v3-pie__interior {
	max-width: 1280px;
	margin: 0 auto;
	padding: 16px var(--v3-margen);
	box-sizing: border-box;
}

/* La cinta oscura de arriba: quien publica esto, y los enlaces de servicio.
   Va fuera de la cabecera para que no se quede pegada con ella. */
.cdar-v3-cinta {
	background: var(--v3-tinta);
	color: var(--v3-papel);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
}

.cdar-v3-cinta .cdar-v3-cabecera__interior {
	padding-top: 10px;
	padding-bottom: 10px;
}

.cdar-v3-cinta nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
}

.cdar-v3-cinta a {
	color: var(--v3-papel);
	text-decoration: none;
}

.cdar-v3-cinta a:hover {
	color: var(--v3-verde);
}

/* Pegada arriba al hacer scroll. `position: sticky` funciona porque el cuerpo
   recorta con `overflow-x: clip`, que a diferencia de `hidden` no crea un
   contenedor de desplazamiento. */
.cdar-v3-cabecera {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--v3-papel);
	border-bottom: var(--v3-filete);
}

.admin-bar .cdar-v3-cabecera {
	top: 32px;
}

.cdar-v3-cabecera__interior {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 28px;
}

/* El logotipo es texto dentro de un filete: ni imagen ni peticion. */
.cdar-v3-cabecera .cdar-v3-logo,
.cdar-v3-pie .cdar-v3-logo {
	display: inline-block;
	border: var(--v3-filete);
	padding: 8px 14px;
	color: var(--v3-tinta);
	line-height: 1;
}

.cdar-v3-logo__sigla {
	display: block;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: .06em;
}

.cdar-v3-logo__nombre {
	display: block;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	margin-top: 3px;
}

.cdar-v3-cabecera nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	font-size: 14.5px;
	font-weight: 700;
}

.cdar-v3-cabecera nav li {
	margin: 0;
}

.cdar-v3-cabecera .cdar-v3-cabecera__buscar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--v3-rojo);
	color: var(--v3-papel);
	border-radius: 999px;
	padding: 11px 22px;
}

.cdar-v3-cabecera .cdar-v3-cabecera__buscar:hover {
	background: var(--v3-tinta);
	color: var(--v3-papel);
}

.cdar-v3-pie__aliados {
	background: var(--v3-verde);
	border-top: var(--v3-filete);
	border-bottom: var(--v3-filete);
	text-align: center;
}

.cdar-v3-pie__aliados .cdar-v3-pie__interior {
	padding-top: 44px;
	padding-bottom: 44px;
}

.cdar-v3-pie__rotulo {
	display: block;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 22px;
}

.cdar-v3-pie__aliados ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 44px;
	font-size: clamp(1rem, 2vw, 1.25rem);
	font-weight: 700;
	line-height: 1.25;
}

.cdar-v3-pie__aliados li {
	margin: 0;
}

.cdar-v3-pie__escribenos {
	background: var(--v3-tinta);
	border-bottom: var(--v3-filete);
	text-align: center;
}

.cdar-v3-pie__escribenos .cdar-v3-pie__interior {
	padding-top: 30px;
	padding-bottom: 30px;
}

.cdar-v3-pie__escribenos span {
	display: block;
	font-size: 26px;
	font-weight: 700;
	color: var(--v3-verde);
	margin-bottom: 6px;
}

.cdar-v3-pie .cdar-v3-pie__escribenos a {
	font-size: 15px;
	font-weight: 700;
	color: var(--v3-papel);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.cdar-v3-pie .cdar-v3-pie__escribenos a:hover {
	color: var(--v3-verde);
}

.cdar-v3-pie__cuerpo {
	background: var(--v3-papel);
}

.cdar-v3-pie__columnas {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 44px;
	align-items: start;
}

.cdar-v3-pie__columnas.cdar-v3-pie__interior {
	padding-top: 44px;
	padding-bottom: 44px;
}

.cdar-v3-pie__columnas p {
	font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 14.5px;
	line-height: 1.6;
	margin: 16px 0 0;
	max-width: 40ch;
}

.cdar-v3-pie__columnas ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 15px;
	font-weight: 700;
}

.cdar-v3-pie__columnas li {
	margin: 0;
}

.cdar-v3-pie__columnas .cdar-v3-pie__rotulo {
	font-size: 12px;
	letter-spacing: .12em;
	margin-bottom: 12px;
}

.cdar-v3-pie__lugar {
	font-weight: 500;
}

.cdar-v3-pie__legal {
	border-top: var(--v3-filete);
}

.cdar-v3-pie__legal .cdar-v3-pie__interior {
	font-size: 12.5px;
	font-weight: 600;
}

@media (max-width: 782px) {
	.cdar-v3-cinta,
	.cdar-v3-cabecera,
	.cdar-v3-pie {
		--v3-margen: 20px;
	}

	/* En telefono la cabecera deja de pegarse: con el menu en dos lineas
	   ocuparia un tercio de la pantalla todo el rato. */
	.cdar-v3-cabecera {
		position: static;
	}

	.cdar-v3-cabecera nav ul {
		gap: 8px 18px;
		font-size: 14px;
	}

	/* Con Documentos en el menu, a 320-340 px y entre 600 y 782 px salia una
	   linea mas (26 px). «Novedades» y «El proyecto» son saltos a la portada
	   que ya estan en su tira de atajos y en el pie, asi que en telefono se
	   quitan de aqui y la cabecera no crece. Medido en la vista previa. */
	.cdar-v3-cabecera .cdar-v3-cabecera__ancha {
		display: none;
	}

	.cdar-v3-pie__columnas {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.cdar-v3__gella {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.cdar-v3__hero .cdar-v3__interior {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.cdar-v3__trazo--hero {
		width: 170px;
		height: 128px;
		top: -24px;
		right: -36px;
	}

	.cdar-v3__trazo--gella {
		display: none;
	}

	.cdar-v3__atajos ul {
		gap: 8px 20px;
		font-size: 12px;
	}

	/* En telefono la cinta se queda en una linea: sus enlaces repiten los del
	   menu y el pie, y en tres lineas mas el menu la cabecera se comia media
	   pantalla antes de empezar la pagina. */
	.cdar-v3-cinta nav {
		display: none;
	}

	.cdar-v3-cinta .cdar-v3-cabecera__interior span {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	/* Las portadas de obra a dos por fila: una sola a todo lo ancho medía
	   700 px, y la ficha de Rafael tiene dieciseis. */
	.cdar-v3__obras {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.cdar-v3__obra {
		padding: 10px;
		gap: 10px;
		border-radius: var(--v3-radio-imagen);
	}

	.cdar-v3 .cdar-v3__obra-portada {
		border-radius: 8px;
	}

	.cdar-v3__obra .cdar-v3__pildora {
		padding: 9px 14px;
		font-size: 13px;
	}

	.cdar-v3 .cdar-v3__obra-portada--vacia {
		font-size: 30px;
	}

	/* A media columna, «descubrimiento» no cabia entero y asomaba por el
	   borde de la tarjeta. */
	.cdar-v3__obra-titulo {
		font-size: 1.05rem;
		hyphens: auto;
		overflow-wrap: anywhere;
	}

	/* Apilados, tres ambitos de 200 px ocupaban dos pantallas de telefono. */
	.cdar-v3 .cdar-v3__ambito {
		min-height: 110px;
	}

	.cdar-v3__cabecera-seccion .cdar-v3__pildora {
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cdar-v3 .cdar-v3__ambito:hover {
		transform: none;
	}
}

@media print {
	.cdar-v3-cinta,
	.cdar-v3-cabecera,
	.cdar-v3-pie,
	.cdar-v3__trazo,
	.cdar-v3__atajos {
		display: none;
	}

	.cdar-v3__hero {
		background: none !important;
	}

	.cdar-v3 .cdar-v3__hero-titulo,
	.cdar-v3__hero-entrada {
		color: #000;
	}
}


/* Contenido libre: paginas genericas y el comodin ------------------------

   `page-v3.php` e `index-v3.php` pintan el contenido del editor tal cual
   (bloques de Gutenberg, un formulario, una imagen). Aqui se le da la voz de
   v3 a lo que pueda traer. Todo lleva `.cdar-v3 ` delante por la regla del
   §8 del ESTADO: `.cdar-v3 a` y `.cdar-v3 h2` valen (0,1,1). */

.cdar-v3 .cdar-v3__contenido {
	text-align: left;
	hyphens: manual;
}

.cdar-v3 .cdar-v3__contenido a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.cdar-v3 .cdar-v3__contenido h2,
.cdar-v3 .cdar-v3__contenido h3,
.cdar-v3 .cdar-v3__contenido h4 {
	font-size: clamp(1.4rem, 3vw, 2rem);
	line-height: 1.1;
	margin: 40px 0 16px;
}

.cdar-v3 .cdar-v3__contenido h3,
.cdar-v3 .cdar-v3__contenido h4 {
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}

.cdar-v3 .cdar-v3__contenido > :first-child {
	margin-top: 0;
}

.cdar-v3 .cdar-v3__contenido ul,
.cdar-v3 .cdar-v3__contenido ol {
	margin: 0 0 20px;
	padding-left: 1.3em;
}

.cdar-v3 .cdar-v3__contenido img {
	max-width: 100%;
	height: auto;
	border-radius: var(--v3-radio-imagen);
}

.cdar-v3 .cdar-v3__contenido blockquote {
	margin: 0 0 20px;
	padding: 0 0 0 20px;
	border-left: var(--v3-filete);
	font-style: italic;
}


/* Formularios de WPForms --------------------------------------------------

   El de /contacto/ (y cualquier otro que se ponga en una pagina v3). Solo con
   CSS: ni los ficheros ni los ajustes de WPForms se tocan (regla 6 del
   CLAUDE.md).

   WPForms 2.x pinta sus campos a partir de variables CSS, asi que casi todo es
   darles los valores de v3. Van en el `<form>` y no en el contenedor a
   proposito: el bloque imprime sus medidas en `#wpforms-880.wpforms-block-...`
   (un id), que le gana a cualquier clase nuestra en el mismo elemento; en el
   hijo, las nuestras son las mas cercanas y son las que heredan los campos.

   Campos de pildora como los del buscador, el texto largo en tarjeta (22 px,
   el radio de tarjeta del diseno) y el boton rojo de accion principal. */

.cdar-v3 .wpforms-container .wpforms-form {
	--wpforms-field-border-radius: 999px;
	--wpforms-field-border-style: solid;
	--wpforms-field-border-size: 2px;
	--wpforms-field-background-color: var(--v3-papel);
	--wpforms-field-border-color: var(--v3-tinta);
	--wpforms-field-border-color-spare: var(--v3-tinta);
	--wpforms-field-text-color: var(--v3-tinta);
	--wpforms-field-menu-color: var(--v3-papel);
	--wpforms-label-color: var(--v3-tinta);
	--wpforms-label-sublabel-color: var(--v3-gris);
	--wpforms-label-error-color: var(--v3-rojo);
	--wpforms-button-border-radius: 999px;
	--wpforms-button-border-style: solid;
	--wpforms-button-border-size: 2px;
	--wpforms-button-background-color: var(--v3-rojo);
	--wpforms-button-border-color: var(--v3-rojo);
	--wpforms-button-text-color: var(--v3-papel);
	--wpforms-field-size-input-height: 54px;
	--wpforms-field-size-input-spacing: 10px;
	--wpforms-field-size-font-size: 17px;
	--wpforms-field-size-line-height: 1.4;
	--wpforms-field-size-padding-h: 22px;
	--wpforms-field-size-sublabel-spacing: 6px;
	--wpforms-label-size-font-size: 12px;
	--wpforms-label-size-line-height: 1.3;
	--wpforms-label-size-sublabel-font-size: 13.5px;
	--wpforms-label-size-sublabel-line-height: 1.4;
	--wpforms-button-size-font-size: 15px;
	--wpforms-button-size-height: 52px;
	--wpforms-button-size-padding-h: 28px;
	--wpforms-button-size-margin-top: 8px;
	max-width: 640px;
	font-family: var(--v3-texto);
}

/* Las etiquetas, como las del buscador: versalitas de 12 px en Sora. */
.cdar-v3 div.wpforms-container-full .wpforms-form .wpforms-field-label {
	font-family: var(--v3-sans);
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.cdar-v3 div.wpforms-container-full .wpforms-form .wpforms-required-label {
	color: var(--v3-rojo);
	font-weight: 800;
}

/* Los campos a todo lo ancho del formulario: WPForms los deja al 60 %. */
.cdar-v3 div.wpforms-container .wpforms-form .wpforms-field input.wpforms-field-medium,
.cdar-v3 div.wpforms-container .wpforms-form .wpforms-field textarea.wpforms-field-medium,
.cdar-v3 div.wpforms-container .wpforms-form .wpforms-field .wpforms-field-row.wpforms-field-medium {
	max-width: 100%;
}

.cdar-v3 div.wpforms-container-full .wpforms-form input,
.cdar-v3 div.wpforms-container-full .wpforms-form textarea {
	font-family: var(--v3-texto);
}

.cdar-v3 div.wpforms-container-full .wpforms-form textarea {
	border-radius: var(--v3-radio-tarjeta);
	padding-top: 14px;
	padding-bottom: 14px;
	line-height: 1.6;
}

/* El foco, el de todo v3: anillo rojo. WPForms pone una sombra del color del
   boton, que aqui seria rojo sobre rojo en el propio boton. */
.cdar-v3 div.wpforms-container-full .wpforms-form input:focus,
.cdar-v3 div.wpforms-container-full .wpforms-form textarea:focus,
.cdar-v3 div.wpforms-container-full .wpforms-form button[type=submit]:focus {
	box-shadow: none;
	outline: 3px solid var(--v3-rojo);
	outline-offset: 2px;
}

/* El boton, como la pildora roja. Astra le pone mayusculas a los botones y su
   propio color al pasar por encima (se vio con el lector, ESTADO.md §17). */
.cdar-v3 div.wpforms-container-full .wpforms-form button[type=submit] {
	font-family: var(--v3-sans);
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
}

.cdar-v3 div.wpforms-container-full .wpforms-form button[type=submit]:hover,
.cdar-v3 div.wpforms-container-full .wpforms-form button[type=submit]:active {
	background: var(--v3-tinta);
	border-color: var(--v3-tinta);
	color: var(--v3-papel);
}

/* Lo que queda despues de enviar: el aviso de «gracias», en tarjeta verde. */
.cdar-v3 div.wpforms-container-full .wpforms-confirmation-container-full,
.cdar-v3 div[submit-success] > .wpforms-confirmation-container-full {
	background: var(--v3-verde);
	border: var(--v3-filete);
	border-radius: var(--v3-radio-tarjeta);
	color: var(--v3-tinta);
	padding: 22px 26px;
	margin: 0;
	max-width: 640px;
	box-sizing: border-box;
}

.cdar-v3 .wpforms-confirmation-container-full p:last-child {
	margin-bottom: 0;
}