/* =========================================================
   CTejidas · Acerca de nosotros + CTejedoras dinámicas
   ========================================================= */

.ctejidas-about-page {
	--ct-pink: var(--ctejidas-brand);
	--ct-pink-dark: var(--ctejidas-brand);
	--ct-soft: var(--ctejidas-soft);
	--ct-line: var(--ctejidas-line);
	--ct-ink: #29272a;
	--ct-muted: #696469;
	box-sizing: border-box;
	margin-left: 50% !important;
	margin-right: 0 !important;
	max-width: 1170px !important;
	transform: translateX(-50%);
	width: min(1170px, calc(100vw - 40px)) !important;
}

/* Gutenberg aplica max-width a cada grupo constrained. En esta página
   queremos el mismo ancho útil de Inicio y las colecciones. */
.ctejidas-about-page.is-layout-constrained > *,
.ctejidas-about-page .is-layout-constrained > *,
.ctejidas-about-page .wp-block-group__inner-container,
.ctejidas-about-page .ct-about-section,
.ctejidas-about-page .ct-about-callout {
	box-sizing: border-box;
	max-width: none !important;
	width: 100% !important;
}

.ctejidas-about-page .ct-about-intro {
	font-size: 1.08em;
	line-height: 1.75;
	margin-bottom: 28px;
}

.ctejidas-about-page .ct-about-intro a {
	font-weight: 800;
}

.ctejidas-about-page .ct-about-callout {
	background: var(--ct-soft);
	border: 1px solid var(--ct-line);
	border-radius: 18px;
	margin: 26px 0 36px;
	padding: 20px 22px;
}

.ctejidas-about-page .ct-about-callout p:last-child {
	margin-bottom: 0;
}

.ctejidas-about-page .ct-about-section {
	margin: 42px 0;
}

.ctejidas-about-page .ct-about-section > h2 {
	font-size: clamp(1.45rem, 2.3vw, 2rem);
	margin-bottom: 10px;
}

.ctejidas-about-page .ct-about-lead {
	color: var(--ct-muted);
	font-size: 1.03em;
	line-height: 1.7;
	margin-bottom: 24px;
	max-width: 850px;
}

.ctejidas-about-page .ct-about-team-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 22px;
}

.ctejidas-about-page .ct-about-team-grid figure {
	margin: 0;
}

.ctejidas-about-page .ct-about-team-grid img {
	aspect-ratio: auto !important;
	border-radius: 20px;
	display: block;
	height: auto !important;
	max-width: none !important;
	object-fit: contain !important;
	object-position: center !important;
	width: 100% !important;
}

.ctejidas-ctejedoras {
	margin-top: 22px;
}

.ctejidas-ctejedoras__grid {
	display: grid;
	gap: 18px 12px;
	grid-template-columns: repeat(10, minmax(0, 1fr));
}

.ctejidas-ctejedoras__item {
	align-items: center;
	color: var(--ct-ink, #29272a) !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	text-align: center;
	text-decoration: none !important;
}

.ctejidas-ctejedoras__avatar {
	align-items: center;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 50%;
	box-shadow: 0 5px 14px rgba(0, 0, 0, .08);
	display: flex;
	height: 70px;
	justify-content: center;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	width: 70px;
}

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

.ctejidas-ctejedoras__initial {
	align-items: center;
	background: var(--ct-soft, var(--ctejidas-soft));
	color: var(--ct-pink-dark, var(--ctejidas-brand));
	display: flex;
	font-size: 24px;
	font-weight: 900;
	height: 100%;
	justify-content: center;
	width: 100%;
}

.ctejidas-ctejedoras__name {
	display: -webkit-box;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.25;
	max-width: 100px;
	min-height: 2.5em;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ctejidas-ctejedoras__item:hover .ctejidas-ctejedoras__avatar,
.ctejidas-ctejedoras__item:focus-visible .ctejidas-ctejedoras__avatar {
	border-color: var(--ct-pink, var(--ctejidas-line));
	box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
	transform: translateY(-3px);
}

.ctejidas-ctejedoras__item:focus-visible {
	border-radius: 12px;
	outline: 3px solid var(--ctejidas-brand);
	outline-offset: 4px;
}

.ctejidas-ctejedoras-empty {
	background: var(--ct-soft, var(--ctejidas-soft));
	border: 1px solid var(--ct-line, var(--ctejidas-line));
	border-radius: 14px;
	padding: 18px;
	text-align: center;
}

.ctejidas-about-page .ct-about-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

.ctejidas-about-page .ct-about-socials a {
	background: #fff;
	border: 1px solid var(--ct-line);
	border-radius: 999px;
	color: var(--ct-ink);
	font-weight: 850;
	padding: 9px 15px;
	text-decoration: none;
	transition: background .17s ease, border-color .17s ease, color .17s ease, transform .17s ease;
}

.ctejidas-about-page .ct-about-socials a:hover,
.ctejidas-about-page .ct-about-socials a:focus-visible {
	background: var(--ct-pink);
	border-color: var(--ct-pink);
	color: #fff;
	transform: translateY(-1px);
}

@media (max-width: 1100px) {
	.ctejidas-ctejedoras__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.ctejidas-about-page .ct-about-team-grid {
		grid-template-columns: 1fr;
	}

	.ctejidas-ctejedoras__grid {
		gap: 16px 8px;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ctejidas-ctejedoras__avatar {
		height: 64px;
		width: 64px;
	}

	.ctejidas-ctejedoras__name {
		font-size: 10.5px;
	}

	.ctejidas-about-page .ct-about-callout {
		padding: 17px;
	}
}

/* =========================================================
   v11.3 · Móvil a ancho real de CTejidas
   ========================================================= */

/* Ambos gráficos del equipo siempre ocupan exactamente el mismo ancho. */
.ctejidas-about-page .ct-about-team-grid {
	align-items: start;
	width: 100% !important;
}

.ctejidas-about-page .ct-about-team-grid > figure,
.ctejidas-about-page .ct-about-team-grid > .wp-block-image {
	box-sizing: border-box;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

.ctejidas-about-page .ct-about-team-grid > figure img,
.ctejidas-about-page .ct-about-team-grid > .wp-block-image img,
.ctejidas-about-page .ct-about-team-grid picture,
.ctejidas-about-page .ct-about-team-grid picture img {
	aspect-ratio: auto !important;
	display: block !important;
	height: auto !important;
	max-height: none !important;
	max-width: 100% !important;
	object-fit: contain !important;
	object-position: center !important;
	width: 100% !important;
}

@media (max-width: 700px) {
	/*
	 * Gutenberg centra esta página dentro de un contenedor mucho más angosto.
	 * Esta fórmula rompe solo ese límite y deja exactamente 15px por lado,
	 * igual que la portada de CTejidas en móvil.
	 */
	.ctejidas-about-page {
		box-sizing: border-box !important;
		margin-left: calc(50% - 50vw + 15px) !important;
		margin-right: calc(50% - 50vw + 15px) !important;
		max-width: none !important;
		transform: none !important;
		width: calc(100vw - 30px) !important;
	}

	/* Gutenberg vuelve a restringir cada Group interior. */
	.ctejidas-about-page.is-layout-constrained > *,
	.ctejidas-about-page .is-layout-constrained > *,
	.ctejidas-about-page .wp-block-group__inner-container,
	.ctejidas-about-page .ct-about-section,
	.ctejidas-about-page .ct-about-section > *,
	.ctejidas-about-page .ct-about-callout,
	.ctejidas-about-page .ct-about-callout > *,
	.ctejidas-about-page .ct-about-intro,
	.ctejidas-about-page .ct-about-lead,
	.ctejidas-about-page .ctejidas-ctejedoras {
		box-sizing: border-box !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}

	.ctejidas-about-page .ct-about-section {
		margin-bottom: 34px !important;
		margin-top: 34px !important;
	}

	.ctejidas-about-page .ct-about-team-grid {
		display: grid !important;
		gap: 16px !important;
		grid-template-columns: minmax(0, 1fr) !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}

	.ctejidas-about-page .ct-about-team-grid > figure,
	.ctejidas-about-page .ct-about-team-grid > .wp-block-image,
	.ctejidas-about-page .ct-about-team-grid img {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	/* El directorio aprovecha el mismo ancho móvil. */
	.ctejidas-about-page .ctejidas-ctejedoras__grid {
		column-gap: 9px !important;
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		row-gap: 17px !important;
		width: 100% !important;
	}

	.ctejidas-about-page .ctejidas-ctejedoras__avatar {
		height: clamp(64px, 19vw, 76px);
		width: clamp(64px, 19vw, 76px);
	}

	.ctejidas-about-page .ctejidas-ctejedoras__name {
		font-size: 10.5px;
		max-width: 100%;
	}
}

@media (max-width: 360px) {
	.ctejidas-about-page {
		margin-left: calc(50% - 50vw + 12px) !important;
		margin-right: calc(50% - 50vw + 12px) !important;
		width: calc(100vw - 24px) !important;
	}
}


/* =========================================================
   v11.4 · Página Acerca de CTejidas al ancho de la barra lateral
   ========================================================= */

@media (max-width: 768px) {
	/*
	 * Esta página es un PAGE de GeneratePress, no un single-post.
	 * Eliminamos el ancho/margen de la columna principal solo cuando
	 * body_class confirma que contiene el directorio de CTejedoras.
	 */
	body.ctejidas-about-page-view #page,
	body.ctejidas-about-page-view .site,
	body.ctejidas-about-page-view .grid-container,
	body.ctejidas-about-page-view #content,
	body.ctejidas-about-page-view .site-content,
	body.ctejidas-about-page-view #primary,
	body.ctejidas-about-page-view .content-area,
	body.ctejidas-about-page-view #main,
	body.ctejidas-about-page-view .site-main,
	body.ctejidas-about-page-view #main > article,
	body.ctejidas-about-page-view .inside-article,
	body.ctejidas-about-page-view .entry-content {
		box-sizing: border-box !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	body.ctejidas-about-page-view #content,
	body.ctejidas-about-page-view .site-content,
	body.ctejidas-about-page-view #primary,
	body.ctejidas-about-page-view #main,
	body.ctejidas-about-page-view .site-main {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* El mismo margen cómodo que conserva la barra lateral: 20 px. */
	body.ctejidas-about-page-view #primary .inside-article {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Ya no necesitamos el breakout con vw de v11.3. */
	body.ctejidas-about-page-view .ctejidas-about-page {
		box-sizing: border-box !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		width: 100% !important;
	}

	/* Gutenberg restringe cada Group con is-layout-constrained. */
	body.ctejidas-about-page-view .ctejidas-about-page.is-layout-constrained > *,
	body.ctejidas-about-page-view .ctejidas-about-page .is-layout-constrained > *,
	body.ctejidas-about-page-view .ctejidas-about-page .wp-block-group__inner-container,
	body.ctejidas-about-page-view .ctejidas-about-page .ct-about-section,
	body.ctejidas-about-page-view .ctejidas-about-page .ct-about-section > *,
	body.ctejidas-about-page-view .ctejidas-about-page .ct-about-intro,
	body.ctejidas-about-page-view .ctejidas-about-page .ct-about-lead,
	body.ctejidas-about-page-view .ctejidas-about-page .ct-about-callout,
	body.ctejidas-about-page-view .ctejidas-about-page .ctejidas-ctejedoras {
		box-sizing: border-box !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}

	/* Las dos imágenes/placas del equipo: exactamente el mismo ancho. */
	body.ctejidas-about-page-view .ct-about-team-grid {
		display: grid !important;
		gap: 18px !important;
		grid-template-columns: 1fr !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}

	body.ctejidas-about-page-view .ct-about-team-grid > figure,
	body.ctejidas-about-page-view .ct-about-team-grid > .wp-block-image,
	body.ctejidas-about-page-view .ct-about-team-grid > figure > a,
	body.ctejidas-about-page-view .ct-about-team-grid picture {
		display: block !important;
		margin: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}

	body.ctejidas-about-page-view .ct-about-team-grid img {
		display: block !important;
		height: auto !important;
		margin: 0 !important;
		max-width: none !important;
		object-fit: contain !important;
		width: 100% !important;
	}

	/*
	 * CTejedoras: 4 por fila, pero NO estiramos las celdas.
	 * Los 4 círculos tienen ancho fijo y el espacio libre se reparte
	 * entre ellos, creando separación visual real.
	 */
	body.ctejidas-about-page-view .ctejidas-ctejedoras__grid {
		column-gap: 0 !important;
		display: grid !important;
		grid-template-columns: repeat(4, 64px) !important;
		justify-content: space-between !important;
		margin: 0 !important;
		max-width: none !important;
		row-gap: 24px !important;
		width: 100% !important;
	}

	body.ctejidas-about-page-view .ctejidas-ctejedoras__item {
		gap: 8px !important;
		max-width: 64px !important;
		width: 64px !important;
	}

	body.ctejidas-about-page-view .ctejidas-ctejedoras__avatar {
		height: 64px !important;
		min-height: 64px !important;
		min-width: 64px !important;
		width: 64px !important;
	}

	body.ctejidas-about-page-view .ctejidas-ctejedoras__name {
		font-size: 10.5px !important;
		line-height: 1.2 !important;
		max-width: 64px !important;
		min-height: 2.4em !important;
		width: 64px !important;
	}
}

@media (max-width: 360px) {
	body.ctejidas-about-page-view #primary .inside-article {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	body.ctejidas-about-page-view .ctejidas-ctejedoras__grid {
		grid-template-columns: repeat(4, 60px) !important;
	}

	body.ctejidas-about-page-view .ctejidas-ctejedoras__item,
	body.ctejidas-about-page-view .ctejidas-ctejedoras__avatar {
		max-width: 60px !important;
		width: 60px !important;
	}

	body.ctejidas-about-page-view .ctejidas-ctejedoras__avatar {
		height: 60px !important;
		min-height: 60px !important;
		min-width: 60px !important;
	}

	body.ctejidas-about-page-view .ctejidas-ctejedoras__name {
		max-width: 60px !important;
		width: 60px !important;
	}
}

/* =========================================================
   v11.6 · Móvil: mismo ancho útil que barra lateral/directorio
   ========================================================= */
@media (max-width: 768px) {

	/*
	 * La página "Bienvenido CTejidas" debe ocupar todo el ancho disponible.
	 * Replicamos la misma estrategia que ya funciona en el directorio:
	 * rompemos los límites de GeneratePress antes de tocar el contenido.
	 */
	body.ctejidas-about-page-view .site-content,
	body.ctejidas-about-page-view .content-area,
	body.ctejidas-about-page-view .site-main,
	body.ctejidas-about-page-view .inside-article,
	body.ctejidas-about-page-view .entry-content {
		box-sizing: border-box !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}

	body.ctejidas-about-page-view .site-content {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/*
	 * 20 px por lado: el mismo margen móvil que usamos en otras
	 * páginas/directorios de CTejidas.
	 */
	body.ctejidas-about-page-view .inside-article {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	body.ctejidas-about-page-view .entry-content {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/*
	 * Gutenberg constrained: anulamos todos los max-width internos.
	 * Ya no usamos calc(100vw), porque el contenedor exterior ahora sí
	 * tiene el ancho correcto.
	 */
	body.ctejidas-about-page-view .ctejidas-about-page,
	body.ctejidas-about-page-view .ctejidas-about-page > *,
	body.ctejidas-about-page-view .ctejidas-about-page .wp-block-group,
	body.ctejidas-about-page-view .ctejidas-about-page .wp-block-group__inner-container,
	body.ctejidas-about-page-view .ctejidas-about-page .ct-about-section,
	body.ctejidas-about-page-view .ctejidas-about-page .ct-about-section > *,
	body.ctejidas-about-page-view .ctejidas-about-page .ct-about-intro,
	body.ctejidas-about-page-view .ctejidas-about-page .ct-about-lead,
	body.ctejidas-about-page-view .ctejidas-about-page .ct-about-callout,
	body.ctejidas-about-page-view .ctejidas-about-page .ctejidas-ctejedoras {
		box-sizing: border-box !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
		padding-left: 0;
		padding-right: 0;
		width: 100% !important;
	}

	/* El callout conserva su relleno interno propio. */
	body.ctejidas-about-page-view .ctejidas-about-page .ct-about-callout {
		padding: 17px !important;
	}

	/* Texto realmente a todo el ancho útil. */
	body.ctejidas-about-page-view .ctejidas-about-page p,
	body.ctejidas-about-page-view .ctejidas-about-page h1,
	body.ctejidas-about-page-view .ctejidas-about-page h2,
	body.ctejidas-about-page-view .ctejidas-about-page h3,
	body.ctejidas-about-page-view .ctejidas-about-page h4 {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}

	/* Las dos imágenes del equipo: mismo ancho, altura natural, sin recorte. */
	body.ctejidas-about-page-view .ct-about-team-grid {
		display: grid !important;
		gap: 18px !important;
		grid-template-columns: 1fr !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}

	body.ctejidas-about-page-view .ct-about-team-grid > figure,
	body.ctejidas-about-page-view .ct-about-team-grid > .wp-block-image,
	body.ctejidas-about-page-view .ct-about-team-grid > figure > a,
	body.ctejidas-about-page-view .ct-about-team-grid picture,
	body.ctejidas-about-page-view .ct-about-team-grid img {
		box-sizing: border-box !important;
		display: block !important;
		height: auto !important;
		margin: 0 !important;
		max-width: none !important;
		object-fit: contain !important;
		width: 100% !important;
	}

	/*
	 * Directorio flexible: ninguna cantidad fija de columnas.
	 * El navegador decide según el ancho real disponible.
	 */
	body.ctejidas-about-page-view .ctejidas-ctejedoras__grid {
		align-items: start !important;
		column-gap: 18px !important;
		display: grid !important;
		grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
		justify-content: stretch !important;
		justify-items: center !important;
		margin: 0 !important;
		max-width: none !important;
		row-gap: 30px !important;
		width: 100% !important;
	}

	body.ctejidas-about-page-view .ctejidas-ctejedoras__item {
		align-items: center !important;
		display: flex !important;
		gap: 9px !important;
		max-width: 118px !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	body.ctejidas-about-page-view .ctejidas-ctejedoras__avatar {
		flex: 0 0 74px !important;
		height: 74px !important;
		min-height: 74px !important;
		min-width: 74px !important;
		width: 74px !important;
	}

	body.ctejidas-about-page-view .ctejidas-ctejedoras__name {
		font-size: 11px !important;
		line-height: 1.23 !important;
		max-width: 118px !important;
		min-height: 2.46em !important;
		width: 100% !important;
	}
}

@media (max-width: 380px) {
	body.ctejidas-about-page-view .inside-article {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	body.ctejidas-about-page-view .ctejidas-ctejedoras__grid {
		column-gap: 14px !important;
		grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)) !important;
		row-gap: 26px !important;
	}

	body.ctejidas-about-page-view .ctejidas-ctejedoras__avatar {
		flex-basis: 70px !important;
		height: 70px !important;
		min-height: 70px !important;
		min-width: 70px !important;
		width: 70px !important;
	}
}


/* =========================================================
   v11.7 · Más CTejedoras por fila en móvil
   ========================================================= */
@media (max-width: 768px) {

	body.ctejidas-about-page-view .ctejidas-ctejedoras__grid {
		column-gap: 12px !important;
		grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)) !important;
		row-gap: 24px !important;
	}

	body.ctejidas-about-page-view .ctejidas-ctejedoras__item {
		gap: 7px !important;
		max-width: 94px !important;
	}

	body.ctejidas-about-page-view .ctejidas-ctejedoras__avatar {
		flex: 0 0 66px !important;
		height: 66px !important;
		min-height: 66px !important;
		min-width: 66px !important;
		width: 66px !important;
	}

	body.ctejidas-about-page-view .ctejidas-ctejedoras__name {
		font-size: 10px !important;
		line-height: 1.18 !important;
		max-width: 94px !important;
		min-height: 2.36em !important;
	}
}

/* En móviles muy estrechos seguimos dejando que el navegador decida. */
@media (max-width: 380px) {
	body.ctejidas-about-page-view .ctejidas-ctejedoras__grid {
		column-gap: 10px !important;
		grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)) !important;
		row-gap: 22px !important;
	}

	body.ctejidas-about-page-view .ctejidas-ctejedoras__avatar {
		flex-basis: 62px !important;
		height: 62px !important;
		min-height: 62px !important;
		min-width: 62px !important;
		width: 62px !important;
	}
}