/* ---------- Inicio: los nueve bloques ----------
 * Ningún valor literal de color ni de tipografía: todo sale de los tokens.
 * Cada bloque es una sección de ancho completo con su fondo propio; el
 * `.container` interno es el que limita la medida de lectura. */

/* La portada no necesita el relleno vertical del contenedor: cada bloque trae
 * el suyo, y sumados desplazaban el hero y engordaban el hueco final. */
.site-main {
	padding-block: 0;
}

/* `spacing.section` declara un rango, `clamp(64px, 10vw, 128px)`: en pantalla
 * ancha se va al techo y la portada queda con más aire del que necesita. Aquí
 * se ancla al piso de ese mismo rango — dentro del sistema, no fuera. */
.home-block {
	padding-block: var(--spacing-2xl);
}

.home-block + .home-block {
	padding-block-start: 0;
}

/* `.site-main > * + *` separa piezas sueltas con 24 px, pero estos bloques ya
 * traen su propia separación: sumadas daban 152 px entre secciones, por encima
 * de lo que `spacing.section` declara como separación entre secciones. */
.site-main > .home-block + .home-block {
	margin-top: 0;
}

/* Lo mismo con el pie: su margen se sumaba al relleno del último bloque y
 * dejaba 296 px de vacío. Esta hoja solo carga en la portada, así que el resto
 * de las plantillas conserva su separación. */
.site-footer {
	margin-top: 0;
}

/* Crema es el fondo por defecto del sitio: reconocimiento, ramas, prueba
 * social, quién-detrás y blog no necesitan declarar nada. Estas dos son las
 * únicas que se apartan de ese fondo sin llegar al énfasis. */
.home-pillars,
.home-closing {
	background: var(--color-surface-sunken);
}

/* La banda diagonal, no un rectángulo: el corte a 196° es la firma de la
 * identidad y `surface.diagonal` existe para eso. El contenido va encima. */
.home-hero {
	position: relative;
	background: var(--color-surface-base);
	isolation: isolate;
}

.home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		196deg,
		var(--color-surface-diagonal) 0%,
		var(--color-surface-diagonal) 44%,
		transparent 44%
	);
}

.home-hero__grid {
	display: grid;
	gap: var(--spacing-xl);
	align-items: center;
}

@media (min-width: 768px) {
	.home-hero__grid {
		grid-template-columns: 3fr 2fr;
	}
}

.home-hero__title {
	font-size: var(--font-size-display);
}

.home-hero__subtitle {
	margin-top: var(--spacing-md);
}

.home-hero__cta {
	margin-top: var(--spacing-lg);
}

.home-hero__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--rounded-lg);
}

/* Sin fotografía, el isotipo ocupa la columna. No se estira: es una marca, no
 * una ilustración de fondo. */
.home-hero__seal {
	display: block;
	width: min(190px, 60%);
	height: auto;
	margin-inline: auto;
}

.home-hero__eyebrow {
	margin-bottom: var(--spacing-xs);
	color: var(--color-branch-ink);
}

.home-hero__note {
	display: inline-block;
	margin-inline-start: var(--spacing-md);
	color: var(--color-ink-muted);
	font-size: var(--font-size-small);
}

.home-branches__subtitle,
.home-pillars__subtitle,
.home-social-proof__subtitle,
.home-blog__subtitle {
	margin-top: var(--spacing-sm);
}

.home-branches__title,
.home-pillars__heading,
.home-social-proof__title,
.home-blog__title {
	margin-bottom: 0;
}

.home-branches .catalog-grid,
.home-social-proof .catalog-grid {
	margin-top: var(--spacing-xl);
}

/* El tinte de la familia, solo en el inicio: el índice de servicios conserva su
 * tarjeta blanca. Los tokens los declara la identidad por familia. */
.catalog-card--tinted {
	background: var(--color-branch-tint);
}

.catalog-card__eyebrow {
	margin: 0;
	color: var(--color-branch-ink);
}

.catalog-card__from small {
	display: block;
	margin-top: calc(var(--spacing-unit) / 2);
	color: var(--color-ink-muted);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-regular);
}

/* La tarjeta que invita al cuestionario cierra la retícula: se distingue por el
 * borde discontinuo, no por otro color de acento. */
.catalog-card--invite {
	justify-content: center;
	text-align: center;
	background: var(--color-surface-base);
	border: 1px dashed var(--color-border-strong);
	box-shadow: none;
}

.catalog-card--invite::before {
	display: none;
}

.catalog-card__invite-action {
	margin-top: var(--spacing-sm);
}

.home-recognition__subtitle {
	margin-top: var(--spacing-sm);
}

.home-recognition__list {
	display: grid;
	gap: var(--spacing-md);
	margin: var(--spacing-lg) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.home-recognition__list {
		/* Hasta tres frases: tres columnas evita una fila a medias con la
		 * tercera sola. */
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
}

/* Fondo, sombra y relleno los pone `.petal`/`.petal--alt`/`.petal--alt2`
 * (`base.css`): redeclararlos aquí, cargado después, los pisaría. */
.home-recognition__quote {
	display: block;
	margin: 0;
	font-size: var(--font-size-body-lg);
	font-weight: var(--font-weight-bold);
}

.home-pillars__list {
	display: grid;
	gap: var(--spacing-lg);
	margin: var(--spacing-xl) 0 0;
	padding: 0;
	list-style: none;
}

/* Distintivo del pilar: el color va en la pieza decorativa, no en el texto.
 * La tinta del título se queda en la del cuerpo, cuyo contraste sí está medido
 * sobre esta superficie. */
.home-pillars__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--spacing-sm);
	border-radius: var(--rounded-md);
	background: var(--color-branch-tint);
}

.home-pillars__badge::before {
	content: "";
	width: var(--spacing-md);
	height: var(--spacing-md);
	border-radius: var(--rounded-sm);
	background: var(--color-branch);
	transform: rotate(45deg);
}

@media (min-width: 768px) {
	.home-pillars__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.home-about__grid {
	display: grid;
	gap: var(--spacing-xl);
	align-items: center;
}

@media (min-width: 768px) {
	.home-about__grid {
		grid-template-columns: 1fr 2fr;
	}
}

.home-about__image {
	width: 100%;
	height: auto;
	border-radius: var(--rounded-lg);
}

/* Retrato provisional: pétalo de marca sobre degradado de dos tintes. Se ve
 * deliberado, y desaparece en cuanto se cargue una fotografía. */
.home-about__portrait {
	display: block;
}

.home-about__portrait-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	background: linear-gradient(150deg, var(--color-branch-transform-tint), var(--color-branch-growth-tint));
	box-shadow: none;
}

.home-about__mark {
	width: 45%;
	height: auto;
	opacity: 0.65;
}

.home-about__eyebrow {
	margin-bottom: var(--spacing-xs);
	color: var(--color-branch-ink);
}

.home-diagnostic {
	position: relative;
	overflow: hidden;
}

.home-diagnostic__inner {
	position: relative;
	z-index: 1;
}

/* Opacidad de referencia del manual sobre azul profundo: por debajo de 0.45 los
 * pétalos se lavan, por encima de 0.9 compiten con el texto. */
.home-diagnostic__watermark {
	position: absolute;
	inset-inline-end: var(--spacing-2xl);
	inset-block-end: calc(var(--spacing-2xl) * -1);
	width: 210px;
	height: auto;
	opacity: 0.65;
}

.home-diagnostic__eyebrow {
	color: var(--color-border-focus-inverse);
}

.home-diagnostic__body {
	margin-top: var(--spacing-sm);
	margin-inline: auto;
	max-width: 50ch;
}

.home-diagnostic__steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-lg);
	margin: var(--spacing-lg) 0;
	padding: 0;
	list-style: none;
}

.home-diagnostic__step b {
	display: block;
}

.home-diagnostic__step span {
	font-size: var(--font-size-small);
}

.home-closing__body {
	margin-top: var(--spacing-sm);
	margin-inline: auto;
	max-width: 46ch;
}

.catalog-card__from {
	margin-top: auto;
	padding-top: var(--spacing-xs);
	font-weight: var(--font-weight-bold);
	color: var(--color-ink-secondary);
}

.catalog-card__placeholder {
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--rounded-md);
}

.home-blog__list {
	display: grid;
	gap: var(--spacing-lg);
	margin-top: var(--spacing-lg);
}

@media (min-width: 640px) {
	.home-blog__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.home-diagnostic,
.home-closing {
	text-align: center;
}

/* Todo párrafo lleva medida de lectura acotada; en un bloque centrado hay que
 * centrar además su caja, o el texto queda alineado a la izquierda del hueco. */
.home-diagnostic p,
.home-closing p {
	margin-inline: auto;
}

.home-diagnostic__note {
	margin-top: var(--spacing-sm);
}

.home-closing__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-md);
	margin-top: var(--spacing-lg);
}