/* =============================================================================
   ABOUT US · nodo 178:2 (archivo de Figma «CRO», sGI7xIfez43Q1ewDILgKOv)
   =============================================================================

   OJO: estas secciones NO tienen parte de plantilla en el theme, al reves que
   las de la portada. Ahi el marcado ya existia —lo compartian los bloques y
   WooCommerce— y por eso los widgets lo llaman en vez de escribirlo. Aqui no
   habia nada que compartir: el About es contenido nuevo y de una sola pagina,
   asi que marcado y estilos viven en el plugin y el theme no crece.

   Lo que si sale del theme son los TOKENS. Ni un color ni un tamaño literal:
   todo de tokens.css. La unica excepcion son los rgba() de los halos, que son
   paradas de degradado.
   ========================================================================== */

/* --- Piezas comunes --------------------------------------------------------- */

.wt-ab-eyebrow {
	margin: 0;
	color: var(--wt-purple);
	font-family: var(--wt-font-mono);
	font-size: 12px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: 2.2px;
	line-height: 1.5;
	text-transform: uppercase;
}

/* Cabecera de seccion del About. Es prima de .wt-shead pero NO la misma: aqui
   el titular es de 40 y el parrafo de la derecha se alinea abajo. Se escribe
   aparte para que el About no dependa de home.css. */
.wt-ab-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wt-space-5);
}

.wt-ab-head__text { max-width: 640px; }

.wt-ab-head__title {
	margin: 16px 0 0;
	font-size: 40px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: -1px;
	line-height: 1.14;
}

.wt-ab-head__lead {
	max-width: 560px;
	margin: 14px 0 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 15px;
	line-height: 1.6;
}

.wt-ab-head__aside {
	flex: 0 1 420px;
	max-width: 420px;
	margin: 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 15px;
	line-height: 1.7;
}

.wt-ab-head__cta { flex: 0 0 auto; }

/* --- 1 · Cabecera de pagina · nodo 178:58 ----------------------------------- */

.wt-ab-hero { padding-block: 44px 56px; }

.wt-ab-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 28px;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12px;
	line-height: 1.5;
}

.wt-ab-crumbs a {
	color: var(--wt-text-3);
	text-decoration: none;
}

.wt-ab-crumbs a:hover { color: var(--wt-text-2); }
.wt-ab-crumbs__sep { color: rgba(119, 119, 126, .5); }
.wt-ab-crumbs__current { color: var(--wt-text-2); }

.wt-ab-hero__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wt-space-6);
	flex-wrap: wrap;
}

.wt-ab-hero__text { flex: 1 1 620px; }

.wt-ab-hero__title {
	max-width: 700px;
	margin: 16px 0 0;
	font-size: 64px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: -2px;
	line-height: 1.04;
}

.wt-ab-hero__lead {
	max-width: 620px;
	margin: 16px 0 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 16px;
	line-height: 1.7;
}

/* Cifras. La primera no lleva raya; las demas se separan con una linea, no con
   un punto: en el nodo son cuatro columnas de una misma tabla. */
.wt-ab-stats {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wt-ab-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-inline: 24px;
	border-left: 1px solid var(--wt-border);
}

.wt-ab-stat:first-child {
	padding-left: 0;
	border-left: 0;
}

.wt-ab-stat__value {
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 34px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: -1px;
	line-height: 1.1;
}

.wt-ab-stat__label {
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12px;
	line-height: 1.5;
}

/* --- 2 · Foto de portada · nodo 178:59 -------------------------------------- */

.wt-ab-cover__figure {
	position: relative;
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
}

.wt-ab-cover__figure img {
	display: block;
	width: 100%;
	height: 600px;
	object-fit: cover;
}

/* El pie va DENTRO de la foto, sobre un velo: en el nodo es parte de la imagen,
   no una linea debajo. El velo es lo que hace que el texto se lea sobre
   cualquier foto, clara u oscura. */
.wt-ab-cover__caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 56px 32px 24px;
	background: linear-gradient(180deg, transparent 0%, rgba(15, 15, 15, .85) 100%);
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 13px;
	line-height: 1.5;
}

/* --- 3 · Origen · nodo 178:60 ----------------------------------------------- */

.wt-ab-origin { padding-block: 96px; }

.wt-ab-origin__inner {
	display: flex;
	align-items: flex-start;
	gap: 64px;
}

.wt-ab-origin__text { flex: 1 1 auto; min-width: 0; }

.wt-ab-origin__title {
	max-width: 600px;
	margin: 14px 0 0;
	font-size: 40px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: -1px;
	line-height: 1.14;
}

.wt-ab-origin__body {
	max-width: 600px;
	margin: 20px 0 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 16px;
	line-height: 1.7;
}

.wt-ab-origin__photo {
	flex: 0 0 560px;
	width: 560px;
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
}

.wt-ab-origin__photo img {
	display: block;
	width: 100%;
	height: 640px;
	object-fit: cover;
}

/* Linea de tiempo. Cada hito lleva raya ARRIBA y el ultimo tambien abajo, que
   es como se cierra una tabla sin dibujar una caja. */
.wt-ab-time {
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--wt-border);
}

.wt-ab-time__item {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding-block: 18px;
	border-top: 1px solid var(--wt-border);
}

.wt-ab-time__when {
	flex: 0 0 64px;
	width: 64px;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 13px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: 1px;
	line-height: 1.5;
}

/* El hito de hoy va en morado: es el unico que sigue abierto. */
.wt-ab-time__item.is-now .wt-ab-time__when { color: var(--wt-purple); }

.wt-ab-time__body { flex: 1 1 auto; min-width: 0; }

.wt-ab-time__title {
	margin: 0;
	font-family: var(--wt-font-display);
	font-size: 15px;
	font-weight: var(--wt-weight-semi);
	line-height: 1.4;
}

.wt-ab-time__note {
	margin: 4px 0 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 13.5px;
	line-height: 1.6;
}

/* --- 4 · Proceso · nodo 178:61 ---------------------------------------------- */

.wt-ab-process { padding-block: 32px 96px; }

.wt-ab-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.wt-ab-step {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1px solid var(--wt-border);
	border-radius: 18px;
	background: var(--wt-surface);
}

.wt-ab-step__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 72px;
}

.wt-ab-step__n {
	color: var(--wt-purple);
	font-family: var(--wt-font-display);
	font-size: 32px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: -1px;
	line-height: 1.1;
}

.wt-ab-step__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wt-purple);
	opacity: .5;
}

.wt-ab-step__title {
	margin: 0;
	font-size: 22px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: -.4px;
	line-height: 1.2;
}

.wt-ab-step__body {
	margin: 12px 0 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 14px;
	line-height: 1.65;
}

/* --- 5 · Manifiesto · nodo 178:62 ------------------------------------------- */

.wt-ab-manifesto { padding-block: 0 96px; }

.wt-ab-manifesto__box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 420px;
	padding: 72px 40px;
	border-radius: 24px;
	background: var(--wt-raised);
	overflow: hidden;
	text-align: center;
}

/* El halo del nodo es una elipse de 1100x700 desbordando por arriba. Aqui es un
   degradado radial en un pseudo: mismo efecto, un archivo menos y escala solo
   con la caja. */
.wt-ab-manifesto__box::before {
	content: "";
	position: absolute;
	top: -33%;
	left: 7%;
	width: 86%;
	height: 167%;
	background: radial-gradient(ellipse at center, rgba(95, 37, 159, .55) 0%, rgba(59, 3, 121, .22) 45%, transparent 70%);
	pointer-events: none;
}

.wt-ab-manifesto__box > * { position: relative; }

.wt-ab-manifesto__title {
	max-width: 900px;
	margin: 20px 0 0;
	font-size: 56px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: -1.8px;
	line-height: 1.06;
}

.wt-ab-manifesto__body {
	max-width: 640px;
	margin: 24px 0 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 16px;
	line-height: 1.7;
}

/* --- 6 · Dos casas · nodo 178:63 -------------------------------------------- */

.wt-ab-houses { padding-block: 0 96px; }

.wt-ab-houses__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.wt-ab-house {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--wt-border);
	border-radius: 18px;
	background: var(--wt-surface);
	overflow: hidden;
}

.wt-ab-house__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 32px 24px 32px 32px;
}

.wt-ab-house__title {
	margin: 14px 0 0;
	font-size: 24px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: -.5px;
	line-height: 1.2;
}

.wt-ab-house__body {
	margin: 12px 0 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 14px;
	line-height: 1.65;
}

.wt-ab-house__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 24px 0 0;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12.5px;
	line-height: 1.5;
}

.wt-ab-house__meta::before {
	content: "";
	flex: 0 0 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wt-purple);
}

/* margin-top auto: el boton se pega abajo aunque las dos tarjetas tengan
   distinta cantidad de texto, que es justo lo que pasa en el nodo. */
.wt-ab-house .wt-btn { margin-top: auto; }
.wt-ab-house__body + .wt-btn,
.wt-ab-house__meta + .wt-btn { margin-top: 24px; }

.wt-ab-house__media {
	flex: 0 0 220px;
	width: 220px;
}

.wt-ab-house__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 7 · Credenciales · nodo 178:64 ----------------------------------------- */

.wt-ab-proof { padding-block: 65px; }

.wt-ab-proof__inner {
	display: flex;
	align-items: flex-start;
	gap: 64px;
}

.wt-ab-proof__text { flex: 0 0 420px; max-width: 420px; }

.wt-ab-proof__title {
	margin: 16px 0 0;
	font-size: 32px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: -.8px;
	line-height: 1.15;
}

.wt-ab-proof__lead {
	margin: 14px 0 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 14px;
	line-height: 1.6;
}

/* Es una <dl>: etiqueta y valor son un par, no una lista de cosas sueltas. El
   navegador le mete 40px de sangria a cada <dd> por defecto, y dentro de un
   flex eso descoloca la columna entera. */
.wt-ab-proof__list {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.wt-ab-proof__list dt,
.wt-ab-proof__list dd {
	margin: 0;
}

.wt-ab-proof__row {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding-block: 16px;
	border-top: 1px solid var(--wt-border);
}

.wt-ab-proof__row:first-child { border-top: 0; }

.wt-ab-proof__label {
	flex: 0 0 220px;
	width: 220px;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12.5px;
	line-height: 1.5;
}

.wt-ab-proof__value {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--wt-text);
	font-family: var(--wt-font-mono);
	font-size: 13.5px;
	font-weight: var(--wt-weight-med);
	line-height: 1.5;
}

/* Sin valor, un guion. Ver el comentario del widget: aqui hay licencias y
   analisis de laboratorio, y un dato inventado no es un lorem ipsum. */
.wt-ab-proof__value.is-empty { color: var(--wt-text-3); }

/* --- 8 · Galeria · nodo 178:65 ---------------------------------------------- */

.wt-ab-gallery { padding-block: 96px; }

.wt-ab-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
	gap: 16px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.wt-ab-shot { margin: 0; }

.wt-ab-shot__media {
	border-radius: 14px;
	overflow: hidden;
}

.wt-ab-shot__media img {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
}

/* Las pares son mas bajas: en el nodo la fila va escalonada, 420 y 340. */
.wt-ab-shot:nth-child(even) .wt-ab-shot__media img { height: 340px; }

.wt-ab-shot__caption {
	margin: 10px 0 0;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 13px;
	line-height: 1.5;
}

/* --- 9 · CTA final · nodo 178:66 -------------------------------------------- */

.wt-ab-cta { padding-block: 0 96px; }

.wt-ab-cta__box {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wt-space-6);
	min-height: 360px;
	padding: 56px;
	border-radius: 24px;
	background: var(--wt-raised);
	overflow: hidden;
}

.wt-ab-cta__box::before {
	content: "";
	position: absolute;
	top: -33%;
	left: -16%;
	width: 70%;
	height: 167%;
	background: radial-gradient(ellipse at center, rgba(95, 37, 159, .5) 0%, rgba(59, 3, 121, .2) 45%, transparent 70%);
	pointer-events: none;
}

.wt-ab-cta__text,
.wt-ab-cta__actions,
.wt-ab-cta__art { position: relative; }

.wt-ab-cta__text { flex: 1 1 640px; max-width: 640px; }

.wt-ab-cta__title {
	margin: 16px 0 0;
	font-size: 44px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: -1.2px;
	line-height: 1.1;
}

.wt-ab-cta__lead {
	max-width: 520px;
	margin: 14px 0 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 15px;
	line-height: 1.6;
}

.wt-ab-cta__art {
	flex: 0 0 260px;
	width: 260px;
}

.wt-ab-cta__art img {
	display: block;
	width: 100%;
	height: auto;
}

.wt-ab-cta__actions {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wt-ab-cta__actions .wt-btn { width: 100%; }

/* --- Adaptacion ------------------------------------------------------------- */

@media (max-width: 1100px) {
	.wt-ab-hero__title { font-size: 48px; letter-spacing: -1.2px; }
	.wt-ab-origin__inner { flex-direction: column; }
	.wt-ab-origin__photo { flex-basis: auto; width: 100%; }
	.wt-ab-origin__photo img { height: 420px; }
	.wt-ab-proof__inner { flex-direction: column; gap: 32px; }
	.wt-ab-proof__text { flex-basis: auto; max-width: none; }
	.wt-ab-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wt-ab-manifesto__title { font-size: 42px; letter-spacing: -1.2px; }
	.wt-ab-cta__box { flex-wrap: wrap; }
	.wt-ab-cta__art { display: none; }
}

@media (max-width: 760px) {
	.wt-ab-hero { padding-block: 32px 40px; }
	.wt-ab-hero__title { font-size: 36px; letter-spacing: -.8px; }
	.wt-ab-hero__row { gap: var(--wt-space-4); }

	/* Con cuatro cifras en una fila de movil, las rayas verticales parten
	   palabras. Se apilan en dos columnas y la raya pasa a ser el hueco. */
	.wt-ab-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.wt-ab-stat { padding-inline: 0; border-left: 0; }

	.wt-ab-cover__figure img { height: 320px; }
	.wt-ab-origin { padding-block: 56px; }
	.wt-ab-origin__title,
	.wt-ab-head__title { font-size: 30px; letter-spacing: -.6px; }
	.wt-ab-head { flex-direction: column; align-items: flex-start; gap: var(--wt-space-3); }
	.wt-ab-process { padding-block: 24px 56px; }
	.wt-ab-steps { grid-template-columns: 1fr; }
	.wt-ab-step__top { margin-bottom: 32px; }
	.wt-ab-manifesto { padding-bottom: 56px; }
	.wt-ab-manifesto__box { padding: 48px 24px; min-height: 0; }
	.wt-ab-manifesto__title { font-size: 30px; letter-spacing: -.6px; }
	.wt-ab-houses__grid { grid-template-columns: 1fr; }
	.wt-ab-house { flex-direction: column-reverse; }
	.wt-ab-house__media { flex-basis: auto; width: 100%; }
	.wt-ab-house__media img { height: 220px; }
	.wt-ab-proof { padding-block: 48px; }
	.wt-ab-proof__row { flex-direction: column; gap: 4px; }
	.wt-ab-proof__label { flex-basis: auto; width: auto; }
	.wt-ab-gallery { padding-block: 56px; }
	.wt-ab-gallery__grid { grid-template-columns: 1fr; }
	.wt-ab-shot__media img,
	.wt-ab-shot:nth-child(even) .wt-ab-shot__media img { height: 280px; }
	.wt-ab-cta__box { padding: 32px 24px; }
	.wt-ab-cta__title { font-size: 28px; letter-spacing: -.5px; }
	.wt-ab-cta__actions { width: 100%; }
}