/* ---------------------------------------------------------------------
 * Diagnóstico de servicios (/servicios/, debajo del mosaico) — módulo
 * autocontenido, pensado para registrarse después en la biblioteca APIS
 * (ver inc/diagnostico-servicios.php y assets/js/diagnostico-
 * servicios.js). Fondo blanco a propósito: el mosaico de arriba ya es
 * crema, blanco marca el cambio de zona sin salirse de la paleta.
 * ------------------------------------------------------------------- */

.diagnostico-servicios {
	background-color: var(--color-blanco);
	padding-block: var(--espacio-6);
}

.diagnostico-servicios > .contenedor {
	max-width: 1100px;
}

.diagnostico-servicios__encabezado {
	max-width: 62ch;
	margin-bottom: var(--espacio-4);
	position: relative;
	z-index: 1;
}

/* Ajuste 2026-10-23 (pedido explícito: "se ve muy plana... mejora
 * composición, jerarquía, espaciado, presencia general"): el formulario
 * de los 2 pasos pasa a vivir dentro de un panel propio en vez de flotar
 * directo sobre el fondo blanco de la sección — mismo lenguaje que el
 * resto de tarjetas premium del sitio (esquinas --radio-tarjeta, sombra
 * apenas perceptible), aquí en formato panel grande (no el cuadro-
 * editorial angosto de otras secciones, porque este contiene un
 * formulario completo de 2 columnas).
 *
 * Ajuste 2026-10-30 (pedido explícito: "fondo blanco... minimalista"):
 * de crema a blanco puro. Las tarjetas de necesidades (antes blancas
 * sobre este panel crema) ganan un poco más de borde para seguir
 * distinguiéndose sobre el panel ahora también blanco — ver
 * .diagnostico-servicios__opcion más abajo. */
.diagnostico-servicios__panel {
	position: relative;
	z-index: 1;
	background-color: var(--color-blanco);
	border-radius: var(--radio-tarjeta);
	padding: var(--espacio-4);
	box-shadow: 0 1px 2px rgba(20, 20, 20, 0.03), 0 12px 32px rgba(20, 20, 20, 0.06);
}

@media (max-width: 680px) {
	.diagnostico-servicios__panel {
		padding: var(--espacio-3);
	}
}

.diagnostico-servicios__titulo {
	margin: var(--espacio-1) 0 var(--espacio-2);
	font-size: clamp(1.875rem, 1.5rem + 1.8vw, 2.5rem);
	line-height: 1.2;
}

.diagnostico-servicios__resaltado {
	color: var(--color-ambar);
}

/* Rayas bajo el H2 (pedido explícito 2026-10-29) — mismo espaciado que
 * ilustrado-encabezado__rayas en el resto del sitio. */
.diagnostico-servicios__rayas {
	margin: 0 0 var(--espacio-3);
}

.diagnostico-servicios__subtitulo {
	color: var(--color-gris-calido);
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* --- Paso 1: necesidades ------------------------------------------------ */

.diagnostico-servicios__necesidades {
	border: 0;
	margin: 0 0 var(--espacio-3);
	padding: 0;
}

.diagnostico-servicios__leyenda {
	font-family: var(--font-titulos);
	font-weight: 600;
	font-size: var(--tamano-parrafo);
	margin-bottom: var(--espacio-2);
	padding: 0;
}

/* Rediseño 2026-10-29 (pedido explícito: "sustituye las filas... por seis
 * tarjetas de selección elegantes, compactas y simétricas, en una
 * cuadrícula de 2 columnas"): de lista editorial de renglones a grid de
 * tarjetas reales. counter-reset aquí, counter-increment en cada tarjeta
 * — la numeración 01-06 (pedido explícito) se pinta sola vía CSS
 * (decimal-leading-zero), nunca hay que tocar el PHP/JS si el catálogo
 * de necesidades cambia de orden. */
.diagnostico-servicios__opciones {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--espacio-3);
	counter-reset: diagnostico-necesidad;
}

/* Ajuste 2026-10-30 (pedido explícito: "fondo blanco... numeración
 * negra... estilo minimalista pero bueno"): con el panel ahora también
 * blanco (ver __panel arriba), el borde sube un poco (0.08→0.1) y suma
 * una sombra muy leve para que la tarjeta siga leyéndose sobre el panel
 * sin depender del contraste de color. */
.diagnostico-servicios__opcion {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--espacio-1);
	padding: var(--espacio-3);
	background-color: var(--color-blanco);
	border: 1px solid rgba(20, 20, 20, 0.1);
	border-radius: var(--radio-tarjeta);
	box-shadow: 0 1px 3px rgba(20, 20, 20, 0.04);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Numeración discreta 01-06 (pedido explícito) — counter, no texto fijo:
 * sigue el orden real del catálogo (inc/diagnostico-servicios.php) sin
 * depender de que sean exactamente 6. Color negra/carbón (pedido
 * explícito 2026-10-30, antes miel-oscura). */
.diagnostico-servicios__opcion::before {
	counter-increment: diagnostico-necesidad;
	content: counter(diagnostico-necesidad, decimal-leading-zero);
	font-family: var(--font-titulos);
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--color-carbon);
}

@media (hover: hover) {
	.diagnostico-servicios__opcion:hover {
		border-color: rgba(242, 169, 0, 0.35);
	}
}

/* Tarjeta seleccionada: borde ámbar + fondo apenas teñido (pedido
 * explícito "cambio de fondo muy ligero"). :has() ya se usa en este mismo
 * archivo (ver __orientacion-lista li:not(:has(a)) más abajo), no es una
 * técnica nueva en el proyecto. */
.diagnostico-servicios__opcion:has(input:checked) {
	border-color: var(--color-ambar);
	background-color: color-mix(in srgb, var(--color-ambar) 5%, var(--color-blanco));
}

/* Checkbox real pero visualmente oculto (nunca display:none — debe seguir
 * siendo enfocable por teclado): el indicador visible es el span de al
 * lado, que reacciona a :checked y :focus-visible del input hermano. */
.diagnostico-servicios__opcion input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Indicador de selección — mismo círculo de siempre, ahora en la esquina
 * superior derecha de la tarjeta (antes, al centro vertical de un
 * renglón). */
.diagnostico-servicios__opcion-marca {
	position: absolute;
	top: var(--espacio-2);
	right: var(--espacio-2);
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid rgba(20, 20, 20, 0.3);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.diagnostico-servicios__opcion-marca::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--color-blanco);
	transform: scale(0);
	transition: transform 0.2s ease;
}

.diagnostico-servicios__opcion input:checked + .diagnostico-servicios__opcion-marca {
	background-color: var(--color-ambar);
	border-color: var(--color-ambar);
}

.diagnostico-servicios__opcion input:checked + .diagnostico-servicios__opcion-marca::after {
	transform: scale(1);
}

.diagnostico-servicios__opcion input:focus-visible + .diagnostico-servicios__opcion-marca {
	outline: 2px solid var(--color-ambar);
	outline-offset: 2px;
}

/* Texto principal en ámbar (pedido explícito 2026-10-30, antes carbón) —
 * es el nombre de la necesidad, el elemento con más peso de la tarjeta. */
.diagnostico-servicios__opcion-texto {
	font-family: var(--font-titulos);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--color-ambar);
	padding-right: var(--espacio-4);
}

/* Reducción de movimiento (pedido explícito "transición 180-250ms" +
 * principio sitewide de respetar prefers-reduced-motion). */
.sin-animacion .diagnostico-servicios__opcion,
.sin-animacion .diagnostico-servicios__opcion-marca,
.sin-animacion .diagnostico-servicios__opcion-marca::after {
	transition: none;
}

/* Comentario (opcional) integrado como campo minimalista (pedido
 * explícito) — mismo recurso de subrayado ya usado en /contacto/ (ver
 * .institucional-contacto-hero__formulario .campo en components.css):
 * sin caja, sin fondo propio, solo una línea inferior tenue que pasa a
 * ámbar en foco. */
.diagnostico-servicios__comentario-campo {
	max-width: none;
	margin: var(--espacio-1) 0 var(--espacio-3);
}

.diagnostico-servicios__comentario-campo label {
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--color-carbon);
}

.diagnostico-servicios__comentario-campo textarea {
	border: none;
	border-bottom: 1px solid rgba(20, 20, 20, 0.16);
	border-radius: 0;
	padding: 10px 2px 9px;
	background-color: transparent;
	transition: border-color 0.2s ease;
}

@media (hover: hover) {
	.diagnostico-servicios__comentario-campo textarea:hover {
		border-bottom-color: rgba(20, 20, 20, 0.3);
	}
}

.diagnostico-servicios__comentario-campo textarea:focus {
	border-bottom-width: 2px;
	border-bottom-color: var(--color-ambar);
	padding-bottom: 8px;
	box-shadow: none;
}

.sin-animacion .diagnostico-servicios__comentario-campo textarea {
	transition: none;
}

.diagnostico-servicios__error-paso1 {
	color: #c0392b;
	font-size: var(--tamano-etiqueta);
	margin-bottom: var(--espacio-2);
}

/* Ajuste 2026-10-23 (pedido explícito, ritmo visual): más aire antes del
 * botón — antes quedaba pegado al campo de comentario, sin pausa entre
 * "llenar" y "continuar". */
.diagnostico-servicios__paso--1 [data-diagnostico-continuar] {
	margin-top: var(--espacio-2);
}

@media (max-width: 680px) {
	/* 1 columna en móvil (pedido explícito) — cada tarjeta ya trae su
	 * propio borde completo, no hace falta ningún ajuste de bordes de
	 * fila como en el diseño anterior. */
	.diagnostico-servicios__opciones {
		grid-template-columns: 1fr;
	}
}

/* --- Paso 2: orientación + contacto -------------------------------------
 * 40/60 en escritorio (pedido explícito), apiladas en móvil. */

.diagnostico-servicios__volver {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: var(--espacio-3);
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-gris-calido);
	font-family: var(--font-cuerpo);
	font-size: var(--tamano-etiqueta);
	cursor: pointer;
}

.diagnostico-servicios__volver:hover {
	color: var(--color-carbon);
}

.diagnostico-servicios__grid {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: var(--espacio-4);
	align-items: start;
}

/* Ajuste 2026-10-23 (pedido explícito: "más orden... ritmo visual"):
 * divisor fino entre orientación y contacto — antes las 2 columnas solo
 * se distinguían por el gap, sin ninguna separación visual propia. */
.diagnostico-servicios__contacto {
	padding-left: var(--espacio-4);
	border-left: 1px solid rgba(20, 20, 20, 0.08);
}

@media (max-width: 900px) {
	.diagnostico-servicios__contacto {
		padding-left: 0;
		border-left: none;
	}
}

.diagnostico-servicios__orientacion-bloque {
	padding-left: var(--espacio-2);
	border-left: 2px solid rgba(242, 169, 0, 0.4);
	margin-bottom: var(--espacio-3);
}

.diagnostico-servicios__orientacion-bloque:last-child {
	margin-bottom: 0;
}

.diagnostico-servicios__orientacion-bloque h4 {
	font-size: 1.0625rem;
	margin-bottom: 4px;
}

.diagnostico-servicios__orientacion-bloque p {
	color: var(--color-gris-calido);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin-bottom: var(--espacio-1);
}

.diagnostico-servicios__orientacion-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.diagnostico-servicios__orientacion-lista a {
	color: var(--color-miel-oscura);
	font-weight: 600;
	text-decoration: none;
}

.diagnostico-servicios__orientacion-lista a:hover {
	text-decoration: underline;
}

.diagnostico-servicios__orientacion-lista li:not(:has(a)) {
	color: var(--color-gris-calido);
}

.diagnostico-servicios__orientacion-generica {
	color: var(--color-gris-calido);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.diagnostico-servicios__contacto {
	display: flex;
	flex-direction: column;
	gap: var(--espacio-2);
	max-width: 520px;
}

.diagnostico-servicios__contacto-titulo {
	margin-bottom: 0;
	font-size: 1.1875rem;
}

.diagnostico-servicios__contacto-preferido {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--espacio-1);
}

.diagnostico-servicios__contacto-preferido legend {
	font-family: var(--font-cuerpo);
	font-weight: 600;
	font-size: var(--tamano-etiqueta);
	margin-bottom: var(--espacio-1);
	padding: 0;
}

.diagnostico-servicios__radio {
	display: flex;
	align-items: center;
	gap: var(--espacio-1);
	font-size: var(--tamano-parrafo);
	cursor: pointer;
}

.diagnostico-servicios__radio input {
	accent-color: var(--color-ambar);
	width: 18px;
	height: 18px;
}

.diagnostico-servicios__consentimiento {
	display: flex;
	align-items: flex-start;
	gap: var(--espacio-1);
	font-size: 0.875rem;
	color: var(--color-gris-calido);
	cursor: pointer;
}

.diagnostico-servicios__consentimiento input {
	accent-color: var(--color-ambar);
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 2px;
}

.diagnostico-servicios__consentimiento a {
	color: var(--color-carbon);
}

/* Bloque del Aviso de Privacidad Simplificado — misma tipografía pequeña
 * (0.875rem, gris cálido) que ya usan los checkboxes de consentimiento de
 * abajo, solo que en párrafos en vez de una sola línea, para que el texto
 * legal se lea cómodo sin desentonar con el resto del formulario. */
.diagnostico-servicios__privacidad {
	font-size: 0.875rem;
	color: var(--color-gris-calido);
	max-width: 62ch;
}

.diagnostico-servicios__privacidad p {
	margin: 0 0 var(--espacio-1);
}

.diagnostico-servicios__privacidad a {
	color: var(--color-carbon);
}

.diagnostico-servicios__consentimiento strong {
	display: block;
	color: var(--color-carbon);
	font-weight: 600;
}

@media (max-width: 900px) {
	.diagnostico-servicios__grid {
		grid-template-columns: 1fr;
	}
}