/*
 * Piezas que usan casi todos los bloques del catálogo: botones, enlaces con
 * flecha, distintivos y listas. Portadas de css/components.css de la web
 * estática.
 *
 * Viven aquí y no en cada bloque porque un botón aparece en la portada, en la
 * cabecera de página, en la llamada a la acción y en cada plan de precios: si
 * cada bloque trajera su copia, cambiar el radio de un botón obligaría a tocar
 * cinco ficheros y a cargar cinco veces lo mismo.
 *
 * El handle es «webcontigo-shared» y cada block.json lo declara como
 * dependencia de su propio style, así que solo se descarga en las páginas que
 * tienen algún bloque del catálogo.
 */

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	align-items: center;
}

.button {
	display: inline-flex;
	min-height: 3.25rem;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 0.82rem 1.35rem;
	color: white;
	background: var(--blue);
	border: 1px solid var(--blue);
	border-radius: 999px;
	font-size: 0.98rem;
	font-weight: 750;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 0.45rem 1rem rgba(1, 35, 78, 0.2);
	transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.button::after {
	display: none;
	content: none;
}

.button:hover {
	color: white;
	background: var(--blue-dark);
	border-color: var(--blue-dark);
	box-shadow: 0 0.75rem 1.6rem rgba(1, 35, 78, 0.25);
	transform: translateY(-1px);
}

.button:hover::after {
	transform: translate(0.15rem, -0.12rem);
}

.button--secondary {
	color: var(--ink);
	background: rgba(255, 255, 255, 0.72);
	border-color: var(--line-dark);
	box-shadow: none;
}

.button--secondary:hover {
	color: var(--blue-dark);
	background: var(--surface);
	border-color: var(--blue);
	box-shadow: none;
}

.button--light {
	color: var(--ink);
	background: white;
	border-color: white;
	box-shadow: none;
}

.button--light:hover {
	color: var(--blue-dark);
	background: var(--sky);
	border-color: var(--sky);
}

.button--small {
	min-height: 2.75rem;
	padding: 0.65rem 0.95rem;
	font-size: 0.9rem;
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--blue-dark);
	font-weight: 740;
	text-decoration: none;
}

.text-link::after {
	display: none;
	content: none;
}

.text-link:hover::after {
	transform: translateX(0.25rem);
}

.chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
}

.chip {
	display: inline-flex;
	min-height: 2rem;
	align-items: center;
	padding: 0.35rem 0.72rem;
	color: var(--ink-soft);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: var(--step--1);
	font-weight: 700;
}

.chip--blue { background: var(--sky); border-color: rgba(1, 35, 78, 0.18); }
.chip--peach { background: var(--peach); border-color: rgba(255, 107, 74, 0.28); }
.chip--lime { background: var(--lime); border-color: rgba(23, 32, 51, 0.14); }

.tag {
	display: inline-flex;
	width: fit-content;
	padding: 0.28rem 0.55rem;
	color: var(--ink);
	background: var(--peach);
	border-radius: 0.35rem;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.check-list,
.plain-list {
	display: grid;
	gap: 0.7rem;
	padding: 0;
	list-style: none;
}

/* Registrada para que el cálculo con lh se resuelva en el li (su altura de línea)
   y llegue al ::before como longitud absoluta; el ::before tiene otro font-size. */
@property --wc-check-top {
	syntax: "<length>";
	inherits: true;
	initial-value: 4px;
}

.check-list li {
	position: relative;
	padding-left: 1.75rem;
	/* Centra el icono sobre la primera línea de texto. */
	--wc-check-top: calc((1lh - 1.2rem) / 2);
}

.check-list li::before {
	position: absolute;
	top: var(--wc-check-top);
	left: 0;
	display: grid;
	width: 1.2rem;
	height: 1.2rem;
	place-items: center;
	color: white;
	background: var(--blue);
	border-radius: 50%;
	font-size: 0.7rem;
	font-weight: 900;
	content: "✓";
}

@media (max-width: 38rem) {
	.button-row {
		align-items: stretch;
	}

	.button-row .button {
		width: 100%;
	}
}

/*
 * La marca. Sale en la cabecera y en el pie, así que vive aquí y no en
 * ninguno de los dos bloques.
 *
 * El logotipo es shared/logo.svg, en línea. Solo se fija la altura: el ancho
 * sale de la proporción del dibujo. Su tinta la decide quien lo envuelve a
 * través de --logo-ink y --logo-dot; sin ellas sale en azul marino, que es lo
 * que toca sobre fondo claro.
 */

.brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.brand__logo {
	display: block;
	width: auto;
	height: 2.4rem;
}

@media (max-width: 38rem) {
	.brand__logo {
		height: 2.1rem;
	}
}

/*
 * La rejilla de tres columnas. La comparten las tarjetas, los proyectos y el
 * listado del blog: en la web estática las cuatro clases tenían exactamente la
 * misma definición, así que aquí se declaran una vez y cada bloque elige con
 * qué nombre la pide.
 */

.service-grid,
.feature-grid,
.project-grid,
.article-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

@media (max-width: 64rem) {
	.service-grid,
	.feature-grid,
	.project-grid,
	.article-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 38rem) {
	.service-grid,
	.feature-grid,
	.project-grid,
	.article-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * La caja de tarjeta. La comparten las tarjetas de servicio, las de
 * característica y las del blog: en la web estática las tres clases tenían la
 * misma definición, y separarlas obligaría a cargar la hoja del bloque de
 * tarjetas en el listado del blog solo para que las entradas tuvieran borde.
 */

.service-card,
.feature-card,
.article-card {
	position: relative;
	display: grid;
	min-height: 100%;
	gap: 1rem;
	align-content: start;
	padding: clamp(1.35rem, 3vw, 2rem);
	background: var(--surface);
	border: 1px solid rgba(228, 231, 236, 0.9);
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
	transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.service-card:hover,
.feature-card:hover,
.article-card:hover {
	border-color: rgba(1, 35, 78, 0.3);
	box-shadow: 0 1rem 2.5rem rgba(16, 24, 40, 0.09);
	transform: translateY(-3px);
}

.service-card p,
.feature-card p,
.article-card p {
	color: var(--muted);
}

/* El enlace se pega al fondo: en una fila de tarjetas con textos de distinto
   largo, todas las flechas quedan a la misma altura. */
.service-card .text-link,
.article-card .text-link {
	align-self: end;
	margin-top: auto;
}

.card-number {
	color: var(--blue);
	font-size: var(--step--1);
	font-weight: 800;
	letter-spacing: 0.1em;
}