/**
 * El Exquisito — estilos del rediseño.
 *
 * Una sola hoja para todo el tema hijo: se encola sin condiciones en
 * `exq_enqueue_styles`, así que lo que hay aquí aplica en todo el sitio,
 * no solo en el home. Cada bloque dice dónde actúa.
 *
 * Sigue el lenguaje visual del tema padre: títulos de sección con borde
 * inferior grueso (como .category_title), peso 900, y Playfair Display
 * para los nombres de región.
 *
 * Breakpoints de Foundation que usa el tema:
 *   medium ≥ 641px   large ≥ 1025px
 */

.exq-home {
	padding-top: 30px;
}

.exq-section {
	margin-bottom: 60px;
}

/* ---------------------------------------------------------- Cabeceras -- */

.exq-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	border-bottom: 3px solid #222;
	padding-bottom: 18px;
	margin-bottom: 30px;
}

.exq-section-title {
	margin: 0;
	font-size: 28px;
	font-weight: 900;
	line-height: 1;
	color: #222;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.exq-section-link {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #222;
	white-space: nowrap;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.exq-section-link:hover,
.exq-section-link:focus {
	color: #222;
	border-bottom-color: #222;
}

.exq-section-head--main {
	display: block;
	border-bottom-width: 3px;
}

.exq-section-sub {
	margin: 10px 0 0;
	font-size: 15px;
	color: #777;
	font-style: italic;
}

/* --------------------------------------------------------------- Hero -- */

/*
 * La portada son tres visitas fijas: una grande y dos al lado. Antes era el
 * slider de TheVoux rotando las mismas tres de una en una. El porque esta en
 * la nota de front-page.php.
 *
 * `--exq-hero-h` marca el alto de la composicion y, de paso, limita el
 * banner lateral para que las dos columnas terminen a la misma altura. Eso
 * ya estaba y se mantiene igual.
 */

.exq-hero {
	margin-bottom: 50px;
}

.exq-hero-aside {
	margin-top: 20px;
}

.exq-portada {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

/*
 * En celular cada pieza manda su proporcion. De `large` para arriba el alto
 * lo marca la rejilla y esto se apaga (`aspect-ratio: auto`).
 *
 * El `min-height` es el plan B: si un navegador viejo no entiende
 * `aspect-ratio`, la pieza no se queda en cero y la foto se ve igual.
 */
.exq-portada-pieza {
	position: relative;
	overflow: hidden;
	min-height: 200px;
	aspect-ratio: 16 / 10;
	background: #1a1a1a;
}

.exq-portada-pieza--grande {
	aspect-ratio: 16 / 11;
}

.exq-portada-enlace {
	display: block;
	height: 100%;
	color: #fff;
}

.exq-portada-enlace:hover,
.exq-portada-enlace:focus {
	color: #fff;
}

.exq-portada-foto {
	height: 100%;
}

.exq-portada-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.exq-portada-pieza:hover .exq-portada-foto img {
	transform: scale(1.04);
}

/*
 * El velo, solo en la mitad de abajo. Oscurecer la foto entera para que se
 * lea el titulo apaga justo lo que se quiere ensenar, que es el plato.
 */
.exq-portada-pieza::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.78));
	pointer-events: none;
}

.exq-portada-texto {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	padding: 18px 20px;
}

.exq-portada-lugar {
	display: block;
	margin-bottom: 7px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: rgba(255, 255, 255, 0.82);
}

.exq-portada-titulo {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.22;
	color: #fff;
}

.exq-portada-pieza--grande .exq-portada-titulo {
	font-size: 26px;
}

.exq-portada-entrada {
	margin: 10px 0 0;
	max-width: 46em;
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
}

@media screen and (min-width: 40.0625em) {
	.exq-hero {
		--exq-hero-h: 420px;
	}

	/* La grande cruza las dos columnas y las otras dos van debajo, a la par. */
	.exq-portada {
		grid-template-columns: 1fr 1fr;
	}

	.exq-portada-pieza--grande {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 8;
	}

	.exq-portada-pieza--grande .exq-portada-titulo {
		font-size: 30px;
	}

	.exq-portada-texto {
		padding: 22px 24px;
	}

	/*
	 * En tablet las columnas se apilan y el banner se estiraba al ancho del
	 * contenedor (728 x 1820, escalado hacia arriba). Lo dejamos a su tamano
	 * de unidad y centrado.
	 */
	.exq-hero-aside {
		text-align: center;
	}

	.exq-hero-aside .banner_wrapper .banner > img {
		width: auto;
		max-width: 300px;
	}
}

@media screen and (min-width: 64.0625em) {
	.exq-hero {
		--exq-hero-h: 500px;
	}

	.exq-hero-aside {
		margin-top: 0;
	}

	/*
	 * Aqui manda el alto, no la proporcion: la grande a la izquierda
	 * cruzando las dos filas, y las otras dos apiladas a la derecha. Asi la
	 * columna de la portada mide exactamente lo mismo que el anuncio de al
	 * lado, que es lo que hacia el slider.
	 */
	.exq-portada {
		grid-template-columns: 2fr 1fr;
		grid-template-rows: 1fr 1fr;
		height: var(--exq-hero-h);
	}

	.exq-portada-pieza {
		min-height: 0;
		aspect-ratio: auto;
	}

	.exq-portada-pieza--grande {
		grid-column: 1;
		grid-row: 1 / 3;
		aspect-ratio: auto;
	}

	.exq-portada-pieza--grande .exq-portada-titulo {
		font-size: 32px;
	}

	/*
	 * El plugin de banners fuerza `width:100%` con mas especificidad, asi
	 * que sin este selector el max-height achataba el anuncio. Aqui baja
	 * proporcionado (240x600 -> ~200x500) y las dos columnas cierran parejas.
	 */
	.exq-hero-aside .banner_wrapper .banner > img {
		max-height: var(--exq-hero-h);
		max-width: 100%;
	}
}

@media screen and (min-width: 100em) {
	.exq-hero {
		--exq-hero-h: 560px;
	}
}

/* ------------------------------------------------------- Suscripcion -- */

/*
 * La franja del home, justo antes de "Explora por region". Es la misma lista
 * de Mailster que el pie, pero sobre fondo claro: el pie ya es un bloque
 * negro y dos seguidos pesarian demasiado.
 *
 * Igual que en el pie, Mailster imprime su propio <style> junto al
 * formulario con `height: 28px` y el color en `!important`. No se pelea por
 * el color —campos blancos con texto oscuro, que sobre la franja crema se
 * leen bien— pero si por el alto, y por eso los selectores llevan
 * `.mailster-wrapper` de mas: para ganarle por especificidad.
 */

.exq-suscribe-caja {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	background: #f6f6f4;
	border: 1px solid #ececea;
	padding: 28px 24px;
}

.exq-suscribe-titulo {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.2;
	color: #111;
}

.exq-suscribe-nota {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: #666;
}

.exq-suscribe-aviso {
	margin: 0 0 14px;
	font-size: 13px;
	font-style: italic;
	color: #999;
}

.exq-suscribe .mailster-form-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.exq-suscribe .mailster-wrapper {
	min-width: 0;
	margin: 0;
}

.exq-suscribe .mailster-wrapper label {
	display: block;
	margin-bottom: 5px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #888;
}

.exq-suscribe .mailster-form .mailster-wrapper .input {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 44px;
	margin: 0;
	padding: 11px 13px;
	border: 1px solid #dddbd7;
	font-size: 14px;
	line-height: 1.4;
}

.exq-suscribe .mailster-form .mailster-wrapper input[type="submit"] {
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 11px 24px;
	background: #222;
	border: 1px solid #222;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.exq-suscribe .mailster-form .mailster-wrapper input[type="submit"]:hover,
.exq-suscribe .mailster-form .mailster-wrapper input[type="submit"]:focus {
	background: transparent;
	color: #222;
}

.exq-suscribe .mailster-form .mailster-form-info {
	grid-column: 1 / -1;
	margin: 0;
	padding: 10px 12px;
	border-left: 3px solid #cfcdc8;
	background: #fff;
	font-size: 13px;
	line-height: 1.5;
	color: #555;
}

.exq-suscribe .mailster-form .mailster-form-info.success {
	border-left-color: #2e7d4f;
}

@media screen and (min-width: 40.0625em) {
	.exq-suscribe-caja {
		padding: 30px 30px;
	}

	.exq-suscribe .mailster-form-fields {
		grid-template-columns: 1fr 1fr;
	}

	.exq-suscribe .mailster-email-wrapper,
	.exq-suscribe .mailster-submit-wrapper,
	.exq-suscribe .mailster-lists-wrapper {
		grid-column: 1 / -1;
	}
}

@media screen and (min-width: 64.0625em) {
	/* El texto a la izquierda y el formulario al lado, no debajo. */
	.exq-suscribe-caja {
		grid-template-columns: 1fr 1.3fr;
		gap: 40px;
		align-items: center;
		padding: 32px 38px;
	}

	/*
	 * Los cuatro campos en un renglon. `align-items: end` alinea el boton
	 * con el pie de los campos: no tiene etiqueta encima, asi que sin eso
	 * flotaria mas arriba que ellos.
	 */
	.exq-suscribe .mailster-form-fields {
		grid-template-columns: 1fr 1fr 1.2fr auto;
		align-items: end;
		gap: 10px;
	}

	.exq-suscribe .mailster-email-wrapper,
	.exq-suscribe .mailster-submit-wrapper {
		grid-column: auto;
	}

	.exq-suscribe .mailster-form .mailster-wrapper input[type="submit"] {
		width: auto;
	}
}

/* ------------------------------------------------------------ Regiones -- */

.exq-region {
	margin-bottom: 45px;
}

.exq-region:last-of-type {
	margin-bottom: 20px;
}

.exq-region-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	border-bottom: 1px solid #e3e3e3;
	padding-bottom: 12px;
	margin-bottom: 25px;
}

.exq-region-title {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
}

.exq-region-title a {
	color: #222;
}

.exq-region-title a:hover {
	opacity: 0.65;
}

.exq-region-count {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #a0a0a0;
	padding-bottom: 2px;
}

.exq-region-link {
	margin-left: auto;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #222;
	border-bottom: 1px solid #222;
}

.exq-region-link:hover,
.exq-region-link:focus {
	color: #222;
	opacity: 0.6;
}

/* Las tarjetas del grid de región necesitan aire entre filas en móvil. */
.exq-region-grid .columns {
	margin-bottom: 30px;
}

@media screen and (min-width: 40.0625em) {
	.exq-region-grid .columns {
		margin-bottom: 0;
	}
}

/* ------------------------------------------------------- Otras regiones -- */

.exq-otras {
	background: #f6f6f4;
	padding: 30px;
	margin-top: 10px;
}

.exq-otras-title {
	margin: 0 0 18px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #888;
}

.exq-otras-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.exq-otras-list li {
	margin: 0;
}

.exq-otras-list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #e0e0dc;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 600;
	color: #222;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.exq-otras-list a:hover,
.exq-otras-list a:focus {
	background: #222;
	border-color: #222;
	color: #fff;
}

.exq-otras-list a span {
	font-size: 11px;
	font-weight: 700;
	color: #a0a0a0;
}

.exq-otras-list a:hover span,
.exq-otras-list a:focus span {
	color: #bbb;
}

/* ------------------------------------------------------------- Banner -- */

.exq-banner {
	margin-bottom: 40px;
}

.exq-banner img {
	display: inline-block;
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------- Header (global) -- */

/*
 * OJO CON EL ORDEN DE CARGA. El sitio tiene CSS propio guardado en la base
 * de datos (plugin wp-add-custom-css, se sirve en
 * `/?display_custom_css=css`) y esa hoja se encola DESPUES de esta. A
 * igualdad de especificidad gana ella, asi que aqui se usan selectores mas
 * especificos, y `!important` solo donde ella tambien lo usa.
 *
 * Lo que hace esa hoja al header, y que conviene tener delante:
 *
 *   .header.style1 img { background: #fff; padding: 5px; }
 *   .header.style1 .full-menu-container { background: #993746; }
 *   @media (min-width: 40.063em) {
 *     .header .header_top { padding: 15px 15px !important; }
 *   }
 *
 * Esa primera regla es la "caja blanca" del logo. No esta en el PNG: el
 * logo es 173x140 RGBA y un 89% transparente. Pinta de blanco TODA imagen
 * del header, el anuncio incluido.
 */

/*
 * Las seis fotos miden 1920x250: una tira muy ancha y baja. Con
 * `background-size: cover` en una pantalla angosta se amplia muchisimo y,
 * anclada por defecto arriba a la izquierda, en celular solo se veia el
 * borde palido de la izquierda. Centrada se ve la parte util.
 *
 * En vertical da igual donde se ancle mientras la franja sea mas alta que
 * la imagen escalada: `cover` la estira hasta llenar y no sobra nada por
 * arriba ni por abajo. Lo que se recorta es a los lados.
 */
.header .header_top {
	background-position: center center;
}

/*
 * Franja mas alta para que la foto se vea de verdad. El limite no es el
 * diseno sino el original: 250px de alto. A 280 el navegador la amplia
 * 1.12x, que no se nota; de 300 para arriba ya empieza a ablandarse.
 *
 * Se hace con padding y no con `min-height` porque el alto de la franja lo
 * marca el anuncio (728x180 -> 190px con su marco blanco) y el `.row` de
 * Foundation ya centra en vertical con `align-middle`. Con `min-height` la
 * fila no se estiraria y el contenido quedaria pegado arriba.
 *
 * `!important` porque el CSS del sitio fija `padding: 15px !important` de
 * 641px para arriba.
 */
@media screen and (min-width: 40.0625em) {
	.header.style1:not(.fixed) .header_top {
		padding: 30px 15px !important;
	}
}

@media screen and (min-width: 64.0625em) {
	.header.style1:not(.fixed) .header_top {
		padding: 45px 15px !important;
	}
}

/*
 * Un velo suave SOLO en la parte de abajo. La tentacion es oscurecer la
 * franja entera, pero eso apaga la foto, que es justo lo contrario de lo
 * que se busca. Asi la foto se queda viva arriba y la franja se asienta
 * sobre la barra granate del menu.
 */
.header.style1 .header_top::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.3));
	pointer-events: none;
}

/* El velo es un hijo absoluto, asi que el contenido necesita su propia capa. */
.header.style1 .header_top > .row,
.header.style1 .header_top > .menu-search-mobile {
	position: relative;
	z-index: 1;
}

/*
 * El logo es oscuro (casi negro, con la copa en granate), asi que necesita
 * fondo claro detras: sobre la foto a pelo no se leeria. Lo que cambia es
 * el trato — deja de ser un recuadro con 5px de borde blanco y pasa a ser
 * una placa con aire y sombra, que se lee como una pieza puesta encima de
 * la foto y no como un parche.
 *
 * Si algun dia hay un logo en blanco (la opcion `logo_light` del tema esta
 * vacia), esta placa sobra y la foto gana todavia mas.
 */
.header.style1 .logo-mobile-fx .logoimg {
	background: rgba(255, 255, 255, 0.93);
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.22);
}

/*
 * El aire de la placa solo de `medium` para arriba. En celular el CSS del
 * sitio fija el ANCHO TOTAL del logo en 127px (`.toggle-holder img`), asi
 * que todo el padding que se le anada se lo come por dentro: con 14/18 el
 * logo se veia un 22% mas pequeno. Ahi se queda con los 5px de siempre.
 */
@media screen and (min-width: 40.0625em) {
	.header.style1 .logo-mobile-fx .logoimg {
		padding: 14px 18px;
	}
}

/*
 * El anuncio se queda con su marco blanco de 5px. Su GIF declara
 * transparencia, asi que quitarselo podria abrir huecos en la creatividad
 * del anunciante.
 */

/* ------------------------------------------- Banner vertical en movil -- */

/*
 * El banner vertical (240x600) vive en la columna derecha del hero. En
 * celular esa columna se apilaba debajo del slider y empujaba el contenido
 * fuera de pantalla, asi que ahi se esconde y el mismo anuncio reaparece
 * entre "Visitas mas recientes" y "Explora por region" — la seccion
 * `.exq-banner-movil` de front-page.php.
 *
 * Un solo breakpoint decide las dos, en vez de un par `max-width` /
 * `min-width`: entre 640 y 641 px hay un hueco donde no entraria ninguna
 * de las dos reglas y se verian los dos anuncios a la vez.
 */
.exq-hero-aside {
	display: none;
}

@media screen and (min-width: 40.0625em) {
	.exq-hero-aside {
		display: block;
	}

	.exq-banner-movil {
		display: none;
	}
}

/*
 * A su tamano de unidad y centrado. El plugin fuerza `width:100%`, que a
 * 375px lo estiraria a 375x938; ademas el renglon de abajo del anuncio
 * ("Ron Artesanal Metodo Solera") deja de leerse si se escala hacia abajo,
 * asi que tampoco se achica.
 */
.exq-banner-movil .banner_wrapper .banner > img {
	display: inline-block;
	width: auto;
	max-width: 240px;
	height: auto;
}

/* ------------------------------------------------- Paginas de categoria -- */

/*
 * Aplica a `category.php` del tema hijo: regiones y cocinas. La cabecera
 * repite la del home (borde de 3px, peso 900, mayusculas) para que al pulsar
 * "Ver todo" no parezca que cambiaste de sitio.
 */

.exq-archive {
	padding-top: 30px;
}

.exq-archive-head {
	border-bottom: 3px solid #222;
	padding-bottom: 18px;
	margin-bottom: 25px;
}

.exq-archive-parent {
	display: inline-block;
	margin-bottom: 12px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #a0a0a0;
}

/* Flecha de "subir un nivel". Decorativa: el texto ya dice a donde va. */
.exq-archive-parent::before {
	content: "\2190";
	margin-right: 7px;
}

.exq-archive-parent:hover,
.exq-archive-parent:focus {
	color: #222;
}

.exq-archive-title {
	margin: 0;
	font-size: 30px;
	font-weight: 900;
	line-height: 1;
	color: #222;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.exq-archive-count {
	margin: 12px 0 0;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #a0a0a0;
}

.exq-archive-desc {
	max-width: 680px;
	margin-bottom: 25px;
	font-size: 16px;
	line-height: 1.6;
	color: #666;
}

.exq-archive-desc p:last-child {
	margin-bottom: 0;
}

.exq-subcats {
	margin-bottom: 45px;
}

/*
 * A diferencia del home, que saca una sola fila por region, aqui hay hasta
 * seis filas: las tarjetas necesitan aire en todos los anchos, no solo en
 * movil.
 */
.exq-archive-grid .columns {
	margin-bottom: 40px;
}

@media screen and (min-width: 40.0625em) {
	.exq-archive-title {
		font-size: 42px;
	}
}

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

/*
 * WP-PageNavi trae su propia hoja, que el tema no estiliza. Se le da el
 * mismo trato que a los chips de `.exq-otras-list`.
 */
.exq-archive .wp-pagenavi {
	border: 0;
	border-top: 1px solid #e3e3e3;
	padding-top: 25px;
	text-align: center;
}

.exq-archive .wp-pagenavi a,
.exq-archive .wp-pagenavi span {
	display: inline-block;
	margin: 0 3px 6px;
	padding: 8px 13px;
	background: #fff;
	border: 1px solid #e0e0dc;
	font-size: 13px;
	font-weight: 600;
	color: #222;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.exq-archive .wp-pagenavi a:hover,
.exq-archive .wp-pagenavi a:focus,
.exq-archive .wp-pagenavi span.current {
	background: #222;
	border-color: #222;
	color: #fff;
}

.exq-archive .wp-pagenavi span.extend {
	background: none;
	border-color: transparent;
	color: #a0a0a0;
}

/*
 * "Pagina 1 de 20" en su propio renglon: pegado a los numeros se leia
 * como un solo chorro ("...de 2012345...").
 */
.exq-archive .wp-pagenavi span.pages {
	display: block;
	margin: 0 0 14px;
	padding: 0;
	background: none;
	border: 0;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #a0a0a0;
}

/* -------------------------------------------- Barra lateral pegajosa -- */

/*
 * Aplica en todo el sitio: categorias, posts, autor y busqueda, donde el
 * anuncio vertical vive en la columna derecha.
 *
 * El tema ya venia preparado para esto — la clase `fixed-me` en cada
 * `sidebar-*.php` y el plugin sticky-kit, que si carga — pero nunca llega a
 * inicializarse: no crea el espaciador y el elemento se queda en `static`.
 * Asi que la pegada se hace aqui, con CSS y sin JS.
 */

/*
 * Para que `position: sticky` funcione hubo que tocar `#wrapper`, que el
 * tema tiene en `overflow-x: hidden`. Cuando un eje no es `visible`, el
 * navegador convierte el `visible` del otro en `auto`: `#wrapper` pasaba a
 * ser contenedor de scroll, pero el que scrollea de verdad es el documento,
 * asi que nada pegaba nunca — ni con el JS del tema ni con CSS.
 *
 * `clip` recorta exactamente igual sin crear contenedor de scroll. Si un
 * navegador viejo no lo entiende, se queda con el `hidden` del tema y la
 * barra simplemente no se pega, que es lo que pasaba hasta ahora.
 *
 * `#wrapper.open-menu` sigue poniendo `overflow: hidden` en los dos ejes con
 * mas especificidad, asi que el menu lateral de movil no cambia.
 */
#wrapper {
	overflow-x: clip;
}

/*
 * 118px = los 98 que mide el header fijo mas 20 de aire. Es la misma cuenta
 * que hacia el JS del tema (`$('.header.fixed').outerHeight() + 20`).
 *
 * Por debajo de `medium` la barra se apila bajo el contenido: ahi su
 * contenedor mide lo mismo que ella y no hay recorrido que pegar, asi que
 * la regla no hace nada aunque entre.
 */
@media screen and (min-width: 40.0625em) {
	.sidebar_inner {
		position: sticky;
		top: 118px;
	}
}

/*
 * Seguro contra el `width: 100%` que fuerza el plugin de banners. Hoy no
 * cambia nada — el archivo de la barra lateral mide 260x650 y la columna
 * tambien 260 — pero una creatividad mas estrecha se estiraria al ancho de
 * la columna y se veria blanda. Con `width: auto` se queda a su tamano real
 * y centrada.
 *
 * Ojo con ese anuncio: el archivo mide 260x650, pero los metadatos que
 * guarda WordPress dicen 240x600, asi que el `srcset` lo anuncia como
 * "240w". Se arregla regenerando las miniaturas de ese adjunto.
 */
.sidebar_inner .banner_wrapper .banner > img {
	display: block;
	width: auto;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------- Footer -- */

/*
 * Para `inc/templates/footer/style1.php` del tema hijo. Fondo oscuro: cierra
 * la pagina y separa el pie del contenido, que en un blog de restaurantes va
 * casi todo sobre blanco.
 *
 * No hereda nada del tema: su `<footer>` llevaba `id="footer"` y las clases
 * `style1 light`, y el nuestro no, asi que las reglas del padre no le entran.
 */

.exq-footer {
	background: #1a1a1a;
	color: #8c8c8c;
	padding: 55px 0 0;
	margin-top: 70px;
	font-size: 14px;
	line-height: 1.6;
}

.exq-footer-col {
	margin-bottom: 40px;
}

/*
 * La marca del pie es el logo del sitio. Va dentro de un enlace a la portada,
 * asi que el bloque es el enlace y la imagen manda sobre su tamano.
 */
.exq-footer-marca {
	display: inline-block;
	margin: 0 0 16px;
	max-width: 150px;
	line-height: 1.1;
	color: #fff;
	transition: opacity 0.2s ease;
}

.exq-footer-marca:hover,
.exq-footer-marca:focus {
	opacity: 0.75;
}

.exq-footer-marca img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * El logo del sitio es casi negro sobre transparente y el pie es #1a1a1a.
 * `brightness(0)` lo deja todo negro puro e `invert(1)` lo pasa a blanco,
 * respetando el canal alfa: queda la marca en blanco sobre el fondo oscuro.
 * Solo se aplica cuando el logo que hay es el normal; si el tema tiene uno
 * claro de verdad (`logo_light`), la plantilla no pone esta clase.
 */
.exq-footer-marca--aclarar img {
	filter: brightness(0) invert(1);
}

/* Si no hay logo ninguno, se cae al nombre del sitio en texto. */
.exq-footer-marca-texto {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 26px;
	font-weight: 700;
	color: #fff;
}

.exq-footer-lema {
	margin: 0 0 20px;
	max-width: 260px;
	font-style: italic;
	color: #8c8c8c;
}

.exq-footer-titulo {
	margin: 0 0 18px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: #fff;
}

/* ----- Listas de enlaces (regiones y menu del sitio) ----- */

/*
 * `wp_nav_menu` imprime su propia `<ul class="exq-footer-lista">`, asi que
 * las dos columnas comparten estilo sin tocar el marcado del menu.
 */
.exq-footer-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.exq-footer-lista li {
	margin: 0 0 9px;
}

.exq-footer-lista a {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	color: #c7c7c7;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.exq-footer-lista a:hover,
.exq-footer-lista a:focus {
	color: #fff;
	border-bottom-color: #fff;
}

/* El contador de visitas de cada region, un paso por detras del nombre. */
.exq-footer-lista a span {
	font-size: 11px;
	font-weight: 700;
	color: #6b6b6b;
}

/* ----- Redes ----- */

.exq-footer-redes {
	list-style: none;
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.exq-footer-redes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid #3a3a3a;
	color: #c7c7c7;
	font-size: 16px;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.exq-footer-redes a:hover,
.exq-footer-redes a:focus {
	background: #fff;
	border-color: #fff;
	color: #1a1a1a;
}

/* ----- Suscripcion ----- */

.exq-footer-nota {
	margin: 0 0 16px;
	color: #8c8c8c;
}

/*
 * ----- El formulario de suscripcion (Mailster) -----
 *
 * Mailster trae su propio marcado, su hoja y, ademas, un bloque <style> que
 * imprime junto al formulario con los ajustes de "diseno del formulario"
 * guardados en el plugin. Ese bloque dice, hoy:
 *
 *   .mailster-form-1 .mailster-email-wrapper .input { height:28px;
 *     padding:8px 16px; color:#555!important; background:#fff; }
 *
 * Dos consecuencias para lo de aqui abajo:
 *
 *   1. Va impreso en el cuerpo, o sea despues de esta hoja. A igual
 *      especificidad gana el suyo, asi que los selectores llevan
 *      `.mailster-wrapper` de mas para subir un escalon (0,4,0) y poder
 *      cambiarle el alto y los margenes.
 *   2. El color del texto lleva `!important`. No se pelea: los campos se
 *      quedan blancos con el texto oscuro, que sobre un pie casi negro
 *      contrasta mejor que unos campos oscuros. Lo que si se arregla es el
 *      alto de 28px, que deja los campos aplastados.
 *
 * La rejilla pone nombre y apellido en el mismo renglon y deja el correo y
 * el boton a lo ancho. Si algun dia el formulario tuviera otros campos,
 * caerian en la rejilla de dos sin romperse.
 */
.exq-footer .mailster-form-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 10px;
}

.exq-footer .mailster-wrapper {
	min-width: 0; /* Sin esto un campo largo estira la columna de la rejilla. */
	margin: 0;
}

.exq-footer .mailster-email-wrapper,
.exq-footer .mailster-submit-wrapper,
.exq-footer .mailster-form-info,
.exq-footer .mailster-lists-wrapper {
	grid-column: 1 / -1;
}

.exq-footer .mailster-wrapper label {
	display: block;
	margin-bottom: 5px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #8c8c8c;
}

.exq-footer .mailster-wrapper .mailster-required {
	color: #8c8c8c;
}

/* 0,4,0: un escalon por encima del <style> que imprime el plugin. */
.exq-footer .mailster-form .mailster-wrapper .input {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 42px;
	margin: 0;
	padding: 11px 13px;
	border: 1px solid #3a3a3a;
	font-size: 14px;
	line-height: 1.4;
}

.exq-footer .mailster-form .mailster-wrapper input[type="submit"] {
	width: 100%;
	min-height: 42px;
	margin: 0;
	padding: 11px 18px;
	background: #fff;
	border: 1px solid #fff;
	color: #1a1a1a;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.exq-footer .mailster-form .mailster-wrapper input[type="submit"]:hover,
.exq-footer .mailster-form .mailster-wrapper input[type="submit"]:focus {
	background: transparent;
	color: #fff;
}

/* El aviso que saca Mailster al enviar, legible sobre el fondo oscuro. */
.exq-footer .mailster-form .mailster-form-info {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-left: 3px solid #4a4a4a;
	background: #242424;
	font-size: 13px;
	line-height: 1.5;
	color: #cfcfcf;
}

.exq-footer .mailster-form .mailster-form-info.success {
	border-left-color: #2e7d4f;
}

/* Solo se ve en staging, donde el plugin esta apagado. */
.exq-footer-nota--aviso {
	margin-bottom: 14px;
	font-size: 13px;
	font-style: italic;
	color: #6b6b6b;
}

.exq-footer-enlace {
	display: inline-block;
	padding: 11px 20px;
	border: 1px solid #fff;
	background: transparent;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	transition: background 0.2s ease, color 0.2s ease;
}

/*
 * SIN ESTO EL BOTON SE BORRA AL PASAR POR ENCIMA. El tema padre lleva un
 * `a:hover { color: #222 }` global en su `app.css`, y como aqui no habia
 * regla de hover, ganaba el suyo: texto #222 sobre un pie #1a1a1a, o sea
 * invisible. El resto de enlaces del pie ya tenian la suya; a este se le
 * habia escapado.
 *
 * Se invierte igual que el boton del formulario de Mailster, para que los
 * dos se comporten igual se vea el que se vea.
 */
.exq-footer-enlace:hover,
.exq-footer-enlace:focus {
	background: #fff;
	color: #1a1a1a;
}

/* ----- Linea legal ----- */

.exq-footer-legal {
	margin: 0;
	border-top: 1px solid #2e2e2e;
	padding: 22px 0 26px;
	font-size: 12px;
	color: #6b6b6b;
}

@media screen and (min-width: 40.0625em) {
	.exq-footer {
		padding-top: 65px;
	}

	.exq-footer-legal {
		text-align: center;
	}
}

/* ---------------------------------------------------- Pagina de Resenas -- */

/*
 * Para `page-resenas.php`. Reutiliza la cabecera de los archivos
 * (`.exq-archive-head`) para que Resenas y las categorias se lean como la
 * misma familia.
 */

.exq-resenas {
	padding-top: 30px;
	margin-bottom: 60px;
}

/* ----- Columna de filtros ----- */

/*
 * El panel es un `<details>`. En movil arranca cerrado y los filtros no
 * empujan los resultados fuera de pantalla; de `large` para arriba se abre
 * siempre y se esconde el resumen, asi que queda una barra lateral normal.
 * Un solo marcado para los dos casos, en vez de las dos filas duplicadas
 * que tenia la pagina vieja.
 */
.exq-filtros-panel {
	border: 1px solid #e3e3e3;
	padding: 0 18px 4px;
	margin-bottom: 35px;
}

.exq-filtros-boton {
	cursor: pointer;
	list-style: none;
	padding: 15px 0;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #222;
}

/* El triangulito por defecto, fuera: se sustituye por el signo de abajo. */
.exq-filtros-boton::-webkit-details-marker {
	display: none;
}

.exq-filtros-boton::after {
	content: "+";
	float: right;
	font-size: 16px;
	line-height: 1;
}

.exq-filtros-panel[open] .exq-filtros-boton::after {
	content: "\2212"; /* signo menos */
}

.exq-filtro {
	padding-bottom: 22px;
	margin-bottom: 22px;
	border-bottom: 1px solid #ededed;
}

.exq-filtro:last-child {
	border-bottom: 0;
	margin-bottom: 0;
}

.exq-filtro-titulo {
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #888;
}

@media screen and (min-width: 64.0625em) {
	.exq-filtros-panel {
		border: 0;
		padding: 0;
	}

	/* De large para arriba el panel esta siempre abierto: sobra el boton. */
	.exq-filtros-boton {
		display: none;
	}
}

/* ----- Facetas de FacetWP ----- */

/*
 * FacetWP trae su propia hoja, pensada para no estorbar. Aqui se le da el
 * tipo del resto del sitio sin rehacerla.
 */
.exq-filtro .facetwp-facet {
	margin-bottom: 0;
}

.exq-filtro .facetwp-checkbox {
	padding: 4px 0 4px 24px;
	margin-bottom: 2px;
	font-size: 14px;
	line-height: 1.45;
	background-size: 15px 15px;
	background-position: 0 7px;
}

.exq-filtro .facetwp-counter {
	font-size: 11px;
	font-weight: 700;
	color: #a0a0a0;
}

.exq-filtro .facetwp-depth {
	margin-left: 14px;
	border-left: 1px solid #ededed;
	padding-left: 10px;
}

.exq-filtro .facetwp-toggle,
.exq-filtro .facetwp-expand {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #222;
}

/*
 * `box-sizing: border-box` no es decorativo aqui: sin el, el campo se salia
 * 30px por la derecha de su columna. El sitio no fuerza `border-box` global
 * para los campos, asi que el input se quedaba en `content-box` y el
 * `width: 100%` contaba solo la caja de contenido — los 28px de relleno
 * lateral y los 2 del borde se sumaban por fuera. En la columna estrecha de
 * `large` eso se metia dentro de la rejilla de resultados.
 *
 * El envoltorio que pone FacetWP es un `<span>`, o sea en linea, y se
 * ajustaba al input desbordado en vez de a la columna: de ahi que haya que
 * pasarlo a bloque tambien.
 */
.exq-filtro .facetwp-search-wrap {
	display: flex;
	align-items: center;
	width: 100%;
}

/*
 * FacetWP clava la lupa con `top: 0`, asi que quedaba pegada al borde de
 * arriba: 9px por encima del centro en un campo de 40px. Se centra de
 * verdad, y se la separa un poco del borde derecho.
 *
 * El `display: flex` de arriba no es decorativo: con el envoltorio en
 * bloque le sobraban 20px por debajo (el hueco que deja la linea de texto
 * de un `inline-block`), y centrar sobre el envoltorio habria dejado la
 * lupa 10px por debajo del centro del campo. En flex el envoltorio mide
 * justo lo que el campo.
 */
.exq-filtro .facetwp-search-wrap .facetwp-btn {
	top: 50%;
	right: 12px;
	bottom: auto;
	margin: 0;
	transform: translateY(-50%);
}

.exq-filtro .facetwp-search,
.exq-filtro .facetwp-search-wrap input {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	/* El relleno de la derecha deja sitio a la lupa: sin el, lo que se
	   escribe pasa por debajo del icono. */
	padding: 11px 38px 11px 14px;
	/*
	 * FacetWP le pone 20px de margen abajo al campo. Dentro de un envoltorio
	 * flex ese margen cuenta para el alto, asi que el envoltorio medía 60 y
	 * no 40, y la lupa centrada sobre el quedaba 10px por debajo del centro
	 * del campo. Sobra, ademas: el aire de abajo ya lo pone `.exq-filtro`.
	 */
	margin: 0;
	border: 1px solid #e0e0dc;
	font-size: 14px;
}

/* ----- Barra de estado: lo que hay filtrado, y el orden ----- */

.exq-resenas-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	border-bottom: 1px solid #e3e3e3;
	padding-bottom: 14px;
	margin-bottom: 28px;
}

/*
 * Las etiquetas de seleccion de FacetWP salen como una lista con un aspa por
 * valor. Se les da el mismo aspecto que a los chips del home.
 */
.exq-resenas-barra .facetwp-selections ul,
.exq-resenas-barra .facetwp-selections li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.exq-resenas-barra .facetwp-selections > ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.exq-resenas-barra .facetwp-selections .facetwp-selection-value {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #e0e0dc;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	color: #222;
	cursor: pointer;
}

.exq-resenas-barra .facetwp-selections .facetwp-selection-value:hover {
	background: #222;
	border-color: #222;
	color: #fff;
}

.exq-resenas-orden {
	margin-left: auto;
}

.exq-resenas-orden select,
.exq-resenas-orden .facetwp-sort-select {
	border: 1px solid #e0e0dc;
	padding: 8px 12px;
	font-size: 13px;
	color: #222;
	background: #fff;
}

/* ----- Rejilla ----- */

/*
 * Como en las categorias: varias filas, asi que las fichas necesitan aire en
 * todos los anchos.
 */
.exq-resenas-grid .columns {
	margin-bottom: 40px;
}

.exq-resenas-vacio {
	padding: 40px 0;
	font-size: 16px;
	font-style: italic;
	color: #777;
}

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

/*
 * El paginador de FacetWP, con el mismo trato que el de WP-PageNavi en las
 * categorias.
 */
.exq-resenas .facetwp-pager {
	border-top: 1px solid #e3e3e3;
	padding-top: 25px;
	text-align: center;
}

.exq-resenas .facetwp-page {
	display: inline-block;
	margin: 0 3px 6px;
	padding: 8px 13px;
	background: #fff;
	border: 1px solid #e0e0dc;
	font-size: 13px;
	font-weight: 600;
	color: #222;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.exq-resenas .facetwp-page:hover,
.exq-resenas .facetwp-page.active {
	background: #222;
	border-color: #222;
	color: #fff;
}

.exq-resenas .facetwp-page.dots {
	background: none;
	border-color: transparent;
	color: #a0a0a0;
}

/*
 * El contador inicial sobra en cuanto FacetWP rellena el suyo, que es lo que
 * pasa al tocar cualquier filtro. Sin JS: `:not(:empty)` sobre el hermano
 * anterior basta.
 */
.exq-archive-count .facetwp-counts:not(:empty) ~ .exq-cuenta-inicial {
	display: none;
}

/*
 * Tope de altura en celular. Con los dos arboles de categorias desplegados
 * el panel medía 1.461 px y empujaba la primera ficha a casi 1.900: habia
 * que scrollear una pantalla larga antes de ver una sola resena.
 */
.exq-filtros-cuerpo {
	max-height: 55vh;
	overflow-y: auto;
	padding-bottom: 4px;
}

@media screen and (min-width: 64.0625em) {
	.exq-filtros-cuerpo {
		max-height: none;
		overflow-y: visible;
	}
}

/*
 * ----- La barra de filtros se queda arriba en celular y tableta -----
 *
 * Debajo de `large` los filtros van encima de los resultados, asi que en
 * cuanto bajas se pierden de vista: para cambiar de region habia que subir
 * del todo otra vez. Ahora la columna se queda pegada bajo el header fijo
 * del tema y acompana a la lista.
 *
 * **Por que se pega el `<aside>` entero y no solo el boton "Filtrar".** Un
 * elemento pegajoso solo recorre su bloque contenedor. El panel vive dentro
 * del `<aside>`, que mide exactamente lo que mide el panel: no hay por donde
 * deslizarse, no se pegaria nada. El `<aside>`, en cambio, es hijo del
 * `.row`, que abarca tambien la columna de resultados — casi 7.000px en la
 * primera pagina. Ahi si hay recorrido. Comprobado en el navegador: se clava
 * a 61px y sigue clavado hasta el final de la lista.
 *
 * **El `top`** es el alto del header fijo del tema, que reaparece en cuanto
 * se baja un poco y ya no se vuelve a esconder: 61px en celular, 71px de
 * `medium` para arriba. Sin eso la barra quedaria por debajo de el.
 *
 * **El `z-index`** va por debajo del 30 que usa ese header, a proposito: la
 * barra pasa por detras del header, no por delante.
 *
 * El tope de altura del cuerpo (55vh, mas arriba) ya estaba y aqui hace
 * ademas de freno: abierto, el panel nunca se come la pantalla entera.
 */
@media screen and (max-width: 64em) {
	.exq-resenas-filtros {
		position: sticky;
		top: 61px;
		z-index: 20;
	}

	.exq-resenas-filtros .exq-filtros-panel {
		background: #fff;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	}

	/* Sin esto el impulso del dedo dentro del panel arrastra la pagina. */
	.exq-filtros-cuerpo {
		overscroll-behavior: contain;
	}
}

@media screen and (min-width: 40.0625em) and (max-width: 64em) {
	.exq-resenas-filtros {
		top: 71px;
	}
}

/* --------------------------------------------------- Entrada individual -- */

/*
 * Para `inc/templates/single/style1.php` del tema hijo.
 */

/*
 * El cuerpo, un punto mas grande y con mas aire. Son resenas largas y el
 * tema las daba a 16px con interlineado 1,8 en una columna de 670: se lee
 * mejor a 17 y 1,75.
 */
.exq-post .post-content {
	font-size: 17px;
	line-height: 1.75;
}

.exq-post .post-content p {
	margin-bottom: 1.5em;
}

/* ----- Anterior / siguiente ----- */

.exq-post-nav {
	display: grid;
	gap: 1px;
	background: #e3e3e3;
	border: 1px solid #e3e3e3;
	margin: 50px 0;
}

.exq-post-nav-item {
	display: block;
	background: #fff;
	padding: 20px 22px;
	color: #222;
	transition: background 0.2s ease;
}

.exq-post-nav-item:hover,
.exq-post-nav-item:focus {
	background: #f6f6f4;
	color: #222;
}

.exq-post-nav-label {
	display: block;
	margin-bottom: 7px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #a0a0a0;
}

.exq-post-nav-titulo {
	display: block;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 17px;
	line-height: 1.3;
}

/* La flecha mira hacia donde lleva cada uno. */
.exq-post-nav-prev .exq-post-nav-label::before {
	content: "\2190";
	margin-right: 7px;
}

.exq-post-nav-next .exq-post-nav-label::after {
	content: "\2192";
	margin-left: 7px;
}

@media screen and (min-width: 40.0625em) {
	.exq-post-nav {
		grid-template-columns: 1fr 1fr;
	}

	/* Si solo hay siguiente, que se vaya a su lado en vez de quedar a la izquierda. */
	.exq-post-nav-next:only-child {
		grid-column: 2;
	}

	.exq-post-nav-next {
		text-align: right;
	}
}

/* ----- Relacionadas ----- */

.exq-relacionadas {
	margin: 55px 0 20px;
}

.exq-relacionadas-grid .columns {
	margin-bottom: 35px;
}

@media screen and (min-width: 40.0625em) {
	.exq-relacionadas-grid .columns {
		margin-bottom: 0;
	}
}

/* ----------------------------------------------------- Sobre el Autor -- */

/*
 * Para `page-sobre-el-autor.php` del tema hijo. Reaprovecha el lenguaje del
 * resto: el nombre en Playfair como los titulos de region, la tira de cifras
 * con el mismo truco de rejilla con lineas que el anterior/siguiente de la
 * entrada, y las regiones con las mismas fichas que las subcategorias.
 */

.exq-autor {
	padding-top: 30px;
}

.exq-autor-hero {
	margin-bottom: 50px;
}

/*
 * El original mide 350x467: con el tope no se estira en ningun ancho.
 *
 * En movil va centrada encima del texto, y mas pequena a proposito: a 350
 * son 467px de alto, que en una pantalla de telefono es todo lo que se ve
 * bajo la cabecera — el nombre quedaba fuera. A 240 entran el retrato, el
 * nombre y el principio de la biografia.
 */
.exq-autor-foto img {
	display: block;
	width: 100%;
	max-width: 240px;
	height: auto;
	margin: 0 auto 30px;
}

.exq-autor-kicker {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #a0a0a0;
}

.exq-autor-nombre {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.05;
	color: #222;
}

/* El filete grueso bajo el oficio es el mismo de las cabeceras de seccion. */
.exq-autor-oficio {
	margin: 14px 0 0;
	padding-bottom: 18px;
	border-bottom: 3px solid #222;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #888;
}

.exq-autor-bio {
	max-width: 620px;
	margin-top: 25px;
	font-size: 17px;
	line-height: 1.75;
	color: #444;
}

.exq-autor-bio p:last-child {
	margin-bottom: 0;
}

/* ----- Botones ----- */

.exq-autor-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 30px 0 0;
}

.exq-boton {
	display: inline-block;
	background: #222;
	border: 1px solid #222;
	padding: 14px 28px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #fff;
	transition: background 0.2s ease, color 0.2s ease;
}

.exq-boton:hover,
.exq-boton:focus {
	background: transparent;
	color: #222;
}

.exq-boton--fino {
	background: transparent;
	color: #222;
}

.exq-boton--fino:hover,
.exq-boton--fino:focus {
	background: #222;
	color: #fff;
}

/* ----- Tira de cifras ----- */

/*
 * Rejilla con fondo gris y celdas blancas: el hueco de 1px hace de linea,
 * asi no hay bordes dobles entre celdas. Dos columnas en movil, cuatro
 * arriba.
 */
.exq-cifras {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: #e3e3e3;
	border: 1px solid #e3e3e3;
	margin: 0 0 50px;
	padding: 0;
}

.exq-cifras li {
	background: #fff;
	margin: 0;
	padding: 28px 15px;
	text-align: center;
}

.exq-cifra {
	display: block;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	color: #222;
}

.exq-cifra-pie {
	display: block;
	margin-top: 10px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #a0a0a0;
}

/* ----- Lo ultimo ----- */

.exq-autor-ultimas .columns {
	margin-bottom: 30px;
}

@media screen and (min-width: 40.0625em) {
	.exq-autor-foto img {
		max-width: 350px;
		margin: 0;
	}

	.exq-autor-nombre {
		font-size: 46px;
	}

	.exq-cifras {
		grid-template-columns: repeat(4, 1fr);
	}

	.exq-cifra {
		font-size: 42px;
	}

	.exq-autor-ultimas .columns {
		margin-bottom: 0;
	}
}

/* --------------------------------------------------------- Contactenos -- */

/*
 * Para `page-contactenos.php` del tema hijo, y para el formulario de Contact
 * Form 7 que va dentro. Las clases `exq-campo`, `exq-form-fila` y
 * `exq-form-enviar` las pone la maqueta del formulario, que vive en el
 * plugin — ver el README.
 */

.exq-contacto {
	padding-top: 30px;
}

.exq-contacto-intro {
	max-width: 620px;
	margin: 0 0 45px;
	font-size: 17px;
	line-height: 1.6;
	color: #666;
}

/* ----- El formulario ----- */

.exq-form-fila {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 22px;
}

.exq-campo {
	margin-bottom: 22px;
}

/*
 * CF7 pasa la maqueta del formulario por su propio autop, que envuelve el
 * contenido de cada campo en un <p>. Es inofensivo salvo por el margen, que
 * se sumaria al del campo.
 */
.exq-campo > p,
.exq-form-enviar > p {
	margin: 0;
}

.exq-campo label {
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #888;
}

/* "opcional" no es una etiqueta mas: va en minuscula y sin peso. */
.exq-campo label .exq-opcional {
	margin-left: 6px;
	font-size: 11px;
	font-weight: 400;
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
	color: #b5b5b5;
}

.exq-contacto-form input[type="text"],
.exq-contacto-form input[type="email"],
.exq-contacto-form input[type="tel"],
.exq-contacto-form textarea {
	width: 100%;
	margin: 0;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 0;
	box-shadow: none;
	padding: 13px 15px;
	font-size: 15px;
	line-height: 1.4;
	color: #222;
	transition: border-color 0.2s ease;
}

.exq-contacto-form input[type="text"]:focus,
.exq-contacto-form input[type="email"]:focus,
.exq-contacto-form input[type="tel"]:focus,
.exq-contacto-form textarea:focus {
	border-color: #222;
	outline: none;
	box-shadow: none;
}

.exq-contacto-form textarea {
	min-height: 180px;
	resize: vertical;
}

.exq-form-enviar {
	margin-top: 10px;
}

.exq-contacto-form input[type="submit"] {
	width: auto;
	background: #222;
	border: 1px solid #222;
	border-radius: 0;
	padding: 16px 34px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.exq-contacto-form input[type="submit"]:hover,
.exq-contacto-form input[type="submit"]:focus {
	background: transparent;
	color: #222;
}

/* ----- Lo que contesta el plugin ----- */

/* El aviso de un campo mal puesto, debajo del propio campo. */
.exq-contacto-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 7px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	color: #c0392b;
}

.exq-contacto-form .wpcf7-not-valid {
	border-color: #c0392b;
}

/*
 * El mensaje final. CF7 lo trae con bordes de colores propios, y el tema
 * padre se lo pinta centrado y en mayusculas — que para una frase entera no
 * se lee, asi que se deshace.
 */
.exq-contacto-form .wpcf7-response-output {
	margin: 25px 0 0;
	border: 1px solid #ddd;
	border-left-width: 3px;
	padding: 15px 18px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	color: #444;
}

.exq-contacto-form .wpcf7-form.sent .wpcf7-response-output {
	border-left-color: #2e7d4f;
}

.exq-contacto-form .wpcf7-form.invalid .wpcf7-response-output,
.exq-contacto-form .wpcf7-form.failed .wpcf7-response-output,
.exq-contacto-form .wpcf7-form.spam .wpcf7-response-output {
	border-left-color: #c0392b;
}

.exq-contacto-sinform {
	font-size: 16px;
	color: #666;
}

/* ----- La columna de al lado ----- */

.exq-contacto-aside {
	margin-top: 45px;
}

.exq-contacto-bloque {
	background: #f6f6f4;
	padding: 28px 30px;
	margin-bottom: 15px;
}

.exq-contacto-bloque:last-child {
	margin-bottom: 0;
}

.exq-contacto-titulo {
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #888;
}

.exq-contacto-correo {
	font-size: 17px;
	font-weight: 600;
	color: #222;
	border-bottom: 1px solid #ccc;
	/* La direccion no cabe entera en las pantallas mas estrechas. */
	word-break: break-word;
}

.exq-contacto-correo:hover,
.exq-contacto-correo:focus {
	color: #222;
	border-bottom-color: #222;
}

/*
 * En fila, no en columna. Eran tres renglones para tres palabras: ocupaban
 * casi 70px de alto en una columna que ya tiene el correo y la ficha del
 * autor. En fila caben de sobra —"Facebook Instagram Twitter" son 23
 * caracteres— y la columna se acorta.
 *
 * `flex-wrap` por si algun dia se anade una cuarta red o el aside se queda
 * mas estrecho: en vez de desbordar, parten de linea.
 */
.exq-contacto-redes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.exq-contacto-redes li {
	margin: 0;
}

.exq-contacto-redes a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 600;
	color: #222;
}

.exq-contacto-redes a:hover,
.exq-contacto-redes a:focus {
	color: #222;
	opacity: 0.6;
}

.exq-contacto-redes .fa {
	font-size: 15px;
	color: #a0a0a0;
}

.exq-contacto-nota {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.6;
	color: #666;
}

/*
 * ----- "Quien escribe": la cara, el nombre y el oficio -----
 *
 * La version anterior era una linea suelta ("las resenas las firma una sola
 * persona"). En una pagina de contacto lo que decide a alguien a escribir es
 * saber a quien le escribe, asi que aqui va la misma cara y el mismo nombre
 * que en Sobre el Autor — los dos salen de `exq_autor_datos()`.
 */
.exq-quien {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}

.exq-quien-foto {
	flex: 0 0 64px;
}

/*
 * El retrato original es vertical (350x467). `cover` con el encuadre arriba
 * deja la cara dentro del circulo en vez de centrar el pecho.
 */
.exq-quien-foto img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
}

.exq-quien-quien {
	min-width: 0;
}

.exq-quien-nombre {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: #111;
}

.exq-quien-oficio {
	margin: 3px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: #888;
}

@media screen and (min-width: 40.0625em) {
	.exq-form-fila {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (min-width: 64.0625em) {
	/* Ya va al lado del formulario, no debajo. */
	.exq-contacto-aside {
		margin-top: 0;
	}
}