/**
 * T-01 · Inicio — templates/home-page/styles.css
 *
 * Estilos propios de la portada de ocho bloques (fase 2, tanda 11, #113). Se
 * encolan con el handle `pf_pfuture_template_home_page` y solo en `/`.
 *
 * Hereda tokens (paleta clara/oscura, tipografía, espaciado) de style.css.
 * Aquí NO se redefinen tokens globales y no hay literales de color ni de
 * tamaño: los únicos `1px` son los filetes, y salen de `--pf-rule`.
 *
 * Bloques raíz, en el orden de la página:
 *   .pf-home             contenedor de la plantilla
 *   .pf-home__hero       clase extra que la plantilla pasa a common/hero (1)
 *   .pf-home__prueba     franja de prueba: hasta tres cifras con filete (2)
 *   .pf-home__problema   el problema del cliente en tres frases (3)
 *   .pf-home__pilares    puertas al hub de servicios (4)
 *   .pf-home__caso       caso destacado; la única banda de fondo (5)
 *   .pf-home__pasos      cómo trabajamos, en cuatro pasos (6)
 *   .pf-home__posts      tres artículos recientes (7)
 *   .pf-home__contacto   CTA final con el formulario, ancla del hero (8)
 *
 * Rejillas cerradas (decisión 1 de FASE-2-CONTENIDOS): 3 columnas desde 62rem,
 * 2 desde 40rem, 1 debajo. Los pasos van a 4 desde 62rem.
 *
 * @package pfuture
 */

.pf-home {
	display: block;
}

/* Canalón --------------------------------------------------------------------
 *
 * El canalón lo da la plantilla a sus hijos directos, con el idiom de
 * `.pf-container` —style.css sección 5—. Convención del tema desde el #78 y el
 * #84; aquí se adopta con el #90. Ver DEC-036 de `paginas` y DEC-027/DEC-028
 * de `portafolio`. El control es `.pf-header__inner`, que está en pantalla al
 * lado: 24/24/24/64/144 a 400/768/1024/1280/1440.
 *
 * Dos exclusiones, las dos a sangre a propósito:
 *   - `.pf-hero`, que pone el canalón dentro de su `__inner`.
 *   - `.pf-home__caso`, la banda de fondo: si la contuviera esta regla, el
 *     fondo y los filetes se cortarían en el borde del contenedor en vez de
 *     llegar al de la ventana. Pone el idiom en `.pf-home__caso-inner`.
 *
 * Tres cosas que no son opcionales, las tres medidas en el #78:
 *   - Va sobre el hijo directo y no sobre cada bloque, para no tocar la hoja de
 *     `common/cta-box`, que es de `shell` y la consumen seis plantillas.
 *   - Selector de dos clases (0,2,0), para ganar a `.pf-cta-box--section`
 *     (0,1,0) sin depender del orden de carga.
 *   - `.pf-home__inner` NO lleva `max-width` ni `padding-inline`: devolvérselos
 *     es exactamente como se reintroduce el defecto, dos canalones sumados.
 */
.pf-home > :not(.pf-hero):not(.pf-home__caso) {
	margin-inline: auto;
	max-width: var(--pf-container);
	padding-inline: var(--pf-gutter);
	width: 100%;
}

/* La medida estrecha del bloque del problema. Solo acota, no contiene: el
   canalón sigue viniendo de la regla de arriba. */
.pf-home__inner--narrow {
	max-width: var(--pf-container-narrow);
}

/* Secciones ------------------------------------------------------------------
 *
 * Espaciado vertical fluido de sección, el mismo que `.pf-section` de
 * style.css consume desde esta tanda (issue #119 de core): 48px en móvil y
 * 80px en escritorio. Las secciones se separan con espacio, no con fondos.
 */
.pf-home__section {
	padding-block: var(--pf-space-section);
}

.pf-home__section-title {
	margin: 0 0 var(--pf-space-md);
}

/* 1 · Hero de portada --------------------------------------------------------
 *
 * Regla «Hero de portada» de docs/DISENO-EXPEDIENTE.md: fondo blanco, sin
 * imagen ni velo, alineado a la izquierda sobre el contenedor estrecho, h1 en
 * 3xl navy y subtítulo en lg. El componente ya da el fondo, el alineado y el
 * color; aquí solo se acota el cuerpo y se baja el subtítulo. Es la única CSS
 * que esta hoja escribe sobre un elemento de `hero`, y va bajo la clase que la
 * propia plantilla le pasa por `attrs`.
 */
.pf-home__hero .pf-hero__body {
	max-width: var(--pf-container-narrow);
}

.pf-home__hero .pf-hero__lead {
	font-size: var(--pf-text-lg);
}

/* 2 · Franja de prueba -------------------------------------------------------
 *
 * Tres cifras en 2xl con etiqueta en text-muted, separadas por un filete y
 * la sección cerrada por otro arriba y otro abajo. En fila el filete va al
 * lado (border-inline-start); al apilar, encima (border-top). Conserva el
 * espaciado de sección: el aire entre el hero y la franja es el mismo que
 * entre cualquier otro par de bloques.
 */
.pf-home__prueba {
	border-block: var(--pf-rule);
}

.pf-home__cifras {
	display: grid;
	gap: var(--pf-space-md) 0;
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pf-home__cifra {
	display: flex;
	flex-direction: column;
	gap: var(--pf-space-3xs);
	padding-block: var(--pf-space-sm);
}

.pf-home__cifra + .pf-home__cifra {
	border-top: var(--pf-rule);
}

.pf-home__cifra-valor {
	color: var(--pf-color-heading);
	font-size: var(--pf-text-2xl);
	font-weight: var(--pf-weight-bold);
	letter-spacing: -0.01em;
	line-height: var(--pf-leading-tight);
}

.pf-home__cifra-etiqueta {
	color: var(--pf-color-text-muted);
}

@media (min-width: 40rem) {
	.pf-home__cifras {
		gap: 0 var(--pf-space-lg);
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pf-home__cifra {
		padding-block: var(--pf-space-2xs);
		padding-inline-start: var(--pf-space-lg);
	}

	.pf-home__cifra:first-child {
		padding-inline-start: 0;
	}

	.pf-home__cifra + .pf-home__cifra {
		border-inline-start: var(--pf-rule);
		border-top: 0;
	}
}

/* 3 · El problema ------------------------------------------------------------
 *
 * Numerales 01-03 sobre regla y tres columnas desde 62rem (tanda 14, S8 de la
 * propuesta visual). Tres párrafos sueltos se leían como un texto a medio
 * escribir; con el numeral y el filete encima son tres casos enumerados.
 *
 * El número lo pinta el contador de la lista, no el HTML: es decoración, y un
 * lector de pantalla ya anuncia «lista de 3 elementos». Por eso el marcado es
 * un `<ol>` limpio y el `::before` no lleva texto que haga falta oír.
 */
.pf-home__problema-list {
	counter-reset: pf-home-problema;
	display: grid;
	gap: var(--pf-space-md);
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pf-home__problema-item {
	border-top: var(--pf-rule);
	counter-increment: pf-home-problema;
	padding-top: var(--pf-space-sm);
}

.pf-home__problema-item::before {
	color: var(--pf-color-text-muted);
	content: counter(pf-home-problema, decimal-leading-zero);
	display: block;
	font-size: var(--pf-text-sm);
	font-variant-numeric: tabular-nums;
	font-weight: var(--pf-weight-bold);
	letter-spacing: 0.08em;
	margin-bottom: var(--pf-space-2xs);
}

.pf-home__problema-frase {
	font-size: var(--pf-text-md);
	line-height: var(--pf-leading-normal);
	margin: 0;
}

/* 4 · Pilares como puertas ---------------------------------------------------
 *
 * Una puerta es un enlace de bloque con el aspecto de tarjeta del sistema:
 * superficie, borde de un píxel, radio de tarjeta, sin sombra. Hover con una
 * sola señal, el borde a border-strong. Es una puerta a un archivo, no
 * `card-servicio`.
 */
.pf-home__pilares-grid,
.pf-home__posts-grid {
	display: grid;
	gap: var(--pf-space-md);
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pf-home__pilar {
	background: var(--pf-color-surface);
	border: var(--pf-rule);
	border-radius: var(--pf-radius-card);
	color: var(--pf-color-heading);
	display: flex;
	flex-direction: column;
	gap: var(--pf-space-2xs);
	height: 100%;
	padding: var(--pf-space-md);
	text-decoration: none;
	transition: border-color var(--pf-transition);
}

.pf-home__pilar:hover,
.pf-home__pilar:focus-visible {
	border-color: var(--pf-color-border-strong);
}

/* El icono de la puerta va a 40 px (`size => lg` del componente) y hereda el
   color de marca de `common/pictograma`. Es decorativo: el nombre accesible de
   la puerta es el `h3` que va debajo. */
.pf-home__pilar-icono {
	margin-bottom: var(--pf-space-2xs);
}

.pf-home__pilar-titulo {
	font-size: var(--pf-text-lg);
	margin: 0;
}

.pf-home__pilar:hover .pf-home__pilar-titulo {
	text-decoration: underline;
	text-underline-offset: var(--pf-underline-offset);
}

.pf-home__pilar-linea {
	color: var(--pf-color-text-muted);
	font-size: var(--pf-text-sm);
}

/* 5 · Caso destacado ---------------------------------------------------------
 *
 * La única banda de fondo de la portada: bg-alt cerrado por un filete arriba y
 * otro abajo, nunca dos bandas seguidas (regla «Separadores y bandas»). Va a
 * sangre, así que el contenedor lo pone su `__inner` con el idiom de
 * `.pf-container`, igual que hace el hero.
 */
.pf-home__caso {
	background: var(--pf-color-bg-alt);
	border-block: var(--pf-rule);
}

.pf-home__caso-inner {
	margin-inline: auto;
	max-width: var(--pf-container);
	padding-inline: var(--pf-gutter);
	width: 100%;
}

.pf-home__caso-layout {
	display: grid;
	gap: var(--pf-space-lg);
	grid-template-columns: minmax(0, 1fr);
}

.pf-home__caso-body {
	display: flex;
	flex-direction: column;
	gap: var(--pf-space-sm);
	justify-content: center;
}

.pf-home__caso-cifra {
	display: flex;
	flex-direction: column;
	gap: var(--pf-space-3xs);
	margin: 0;
}

.pf-home__caso-valor {
	color: var(--pf-color-heading);
	font-size: var(--pf-text-3xl);
	font-weight: var(--pf-weight-bold);
	letter-spacing: -0.01em;
	line-height: var(--pf-leading-tight);
}

.pf-home__caso-etiqueta {
	color: var(--pf-color-text-muted);
	max-width: 40ch;
}

.pf-home__caso-resumen {
	margin: 0;
	max-width: 60ch;
}

.pf-home__caso-enlaces {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pf-space-2xs) var(--pf-space-md);
	margin: 0;
}

@media (min-width: 62rem) {
	.pf-home__caso-layout {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pf-home__caso-body {
		grid-column: span 2;
	}
}

/* 6 · Cómo trabajamos --------------------------------------------------------
 *
 * Lista ordenada con el número en 2xl navy, generado por CSS a partir del
 * contador de la lista para que el marcado siga siendo un `<ol>` limpio.
 */
.pf-home__pasos-list {
	counter-reset: pf-home-paso;
	display: grid;
	gap: var(--pf-space-lg) var(--pf-space-md);
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* La regla continua bajo la que cuelgan los cuatro numerales (S8). Los números
   ya estaban; faltaba el hilo que dice que son un proceso y no cuatro cajas. Va
   en cada paso y no como una línea aparte, para que al apilarse en una columna
   siga habiendo una regla por paso y no una raya suelta en medio. */
.pf-home__paso {
	border-top: var(--pf-rule);
	counter-increment: pf-home-paso;
	display: flex;
	flex-direction: column;
	gap: var(--pf-space-2xs);
	padding-top: var(--pf-space-sm);
}

.pf-home__paso::before {
	color: var(--pf-color-heading);
	content: counter(pf-home-paso, decimal-leading-zero);
	font-size: var(--pf-text-2xl);
	font-weight: var(--pf-weight-bold);
	letter-spacing: -0.01em;
	line-height: var(--pf-leading-tight);
}

.pf-home__paso-titulo {
	font-size: var(--pf-text-lg);
	margin: 0;
}

.pf-home__paso-texto {
	margin: 0;
}

.pf-home__pasos-mas {
	margin: var(--pf-space-lg) 0 0;
}

/* Rejillas cerradas en 2 y 3 columnas; los pasos a 4 ----------------------- */

@media (min-width: 40rem) {
	.pf-home__pilares-grid,
	.pf-home__posts-grid,
	.pf-home__pasos-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62rem) {
	.pf-home__posts-grid,
	.pf-home__problema-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Los pilares son 4 hoy y 3 tras la poda de la tanda 12/13: la plantilla
	   pasa el recuento y la fila queda siempre llena. Sin la variable, 3. */
	.pf-home__pilares-grid {
		grid-template-columns: repeat(var(--pf-home-pilares-columnas, 3), minmax(0, 1fr));
	}

	.pf-home__pasos-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* 8 · CTA final con formulario -----------------------------------------------
 *
 * El `<section>` es el destino del botón del hero y recibe foco por programa:
 * sin esto el navegador mueve el scroll pero no el foco del teclado.
 *
 * La caja es hija de esta sección y no de `.pf-home`, así que la regla de
 * canalón contiene a la sección y no a la caja. `.pf-cta-box--section` sigue
 * poniendo su propio `padding-inline` de canalón, que aquí sumaría un segundo
 * canalón encima del de la sección: se anula. Es el mismo caso de la DEC-036
 * con la caja un nivel más adentro. Medido: sin esta regla el panel cae 24px
 * a la derecha de la cabecera en todos los anchos.
 */
.pf-home__contacto:focus {
	outline: none;
}

.pf-home__contacto > .pf-cta-box--section {
	padding-inline: 0;
}

/* La escala tipográfica y los colores siguen saliendo de los tokens de
   style.css, que publica el agente core. Esta hoja no redefine ninguno a
   propósito: duplicar un token aquí es como se desincronizan las paletas clara
   y oscura sin que nadie lo note. */