/*
 * Páginas de servicio: maqueta básica de las plantillas del plugin.
 * Todo va en la capa "paginas-servicio": cualquier estilo del tema (fuera de capas) tiene prioridad.
 * Los colores y medidas se pueden cambiar desde el tema con estas variables.
 */

@layer paginas-servicio {
	:root {
		--ps-ancho: 72rem;
		--ps-margen: clamp(1rem, 4vw, 2rem);
		--ps-espacio: clamp(3rem, 7vw, 5.5rem);
		--ps-hueco: clamp(1.5rem, 4vw, 3rem);
		--ps-borde: rgba(0, 0, 0, 0.12);
		--ps-fondo-suave: rgba(0, 0, 0, 0.035);
		--ps-radio: 4px;
	}

	.ps-seccion {
		padding-block: var(--ps-espacio);
	}

	.ps-seccion:nth-of-type(even) {
		background: var(--ps-fondo-suave);
	}

	.ps-contenedor {
		width: min(100% - 2 * var(--ps-margen), var(--ps-ancho));
		margin-inline: auto;
	}

	.ps-titulo {
		margin-top: 0;
	}

	.ps-etiqueta {
		margin: 0 0 0.75rem;
		font-size: 0.85em;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	/* Botones (CTAs del tema LGD2) */
	.ps-botones {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
		margin-top: 1.5rem;
	}

	.ps-boton {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 2.9rem;
		padding: 0.7rem 1.4rem;
		border: 2px solid currentColor;
		border-radius: var(--ps-radio);
		font-weight: 700;
		text-decoration: none;
	}

	/* Hero */
	.ps-hero__inner,
	.ps-dos-columnas {
		display: grid;
		align-items: center;
		gap: var(--ps-hueco);
	}

	@media (min-width: 52em) {
		.ps-hero__inner:has(.ps-hero__imagen),
		.ps-dos-columnas:has(> :nth-child(2)) {
			grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		}
	}

	.ps-hero__titulo {
		margin: 0 0 1rem;
	}

	.ps-hero__intro {
		margin: 0;
		font-size: 1.125em;
	}

	/* Imagen o vídeo de la cabecera y de "Sobre nosotros" */
	.ps-hero__imagen,
	.ps-equipo__imagen {
		margin: 0;
	}

	.ps-hero__imagen > img,
	.ps-equipo__imagen > img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: var(--ps-radio);
	}

	.ps-hero__imagen .ps-media,
	.ps-equipo__imagen .ps-media {
		border-radius: var(--ps-radio);
	}

	.ps-hero__pie,
	.ps-equipo__pie {
		margin-top: 0.5rem;
		font-size: 0.85em;
		opacity: 0.75;
	}

	/* Zonas */
	.ps-zonas__lista {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin: 1.5rem 0 0;
		padding: 0;
		list-style: none;
	}

	.ps-zonas__lista li {
		padding: 0.35rem 0.8rem;
		border: 1px solid var(--ps-borde);
		border-radius: var(--ps-radio);
	}

	/* Cabecera de las secciones (etiqueta, título y texto) */
	.ps-cabecera {
		max-width: 46rem;
		margin-bottom: 2rem;
	}

	.ps-cabecera__texto {
		margin: 0;
		font-size: 1.05em;
	}

	.ps-servicios .ps-cabecera,
	.ps-por-que .ps-cabecera,
	.ps-como-trabajamos .ps-cabecera {
		margin-inline: auto;
		text-align: center;
	}

	/* Puntos destacados (hero y "Sobre nosotros") */
	.ps-puntos {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1.25rem;
		margin: 1.5rem 0 0;
		padding: 0;
		list-style: none;
		font-weight: 600;
	}

	.ps-puntos li {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
	}

	.ps-puntos:not(.ps-puntos--con-icono) li::before {
		content: "✓";
	}

	/* Listas de motivos y de pasos */
	.ps-lista {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
		gap: var(--ps-hueco);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.ps-lista__elemento {
		padding: 1.5rem;
		border: 1px solid var(--ps-borde);
		border-radius: var(--ps-radio);
	}

	.ps-lista__destacado {
		margin: 0 0 0.75rem;
		font-size: 2em;
		font-weight: 700;
		line-height: 1;
	}

	.ps-lista__icono {
		display: block;
		margin: 0 0 0.75rem;
	}

	.ps-icono,
	.ps-lista__icono svg {
		display: block;
		width: 2.5rem;
		height: 2.5rem;
		object-fit: contain;
	}

	.ps-puntos .ps-icono,
	.ps-puntos svg {
		width: 1.25rem;
		height: 1.25rem;
	}

	.ps-lista__titulo {
		margin: 0 0 0.5rem;
		font-size: 1.15em;
	}

	.ps-lista__texto {
		margin: 0;
	}

	.ps-pasos__numero {
		display: block;
		margin-bottom: 0.5rem;
		font-weight: 700;
		opacity: 0.6;
	}

	/* Texto SEO */
	.ps-texto__contenido {
		max-width: 48rem;
	}

	.ps-texto__aviso {
		margin: 0 0 1.5rem;
		font-size: 0.8125rem;
		line-height: 1.5;
		opacity: 0.7;
	}

	/* Preguntas frecuentes */
	.ps-faq__lista {
		display: grid;
		gap: 0.75rem;
		max-width: 52rem;
	}

	.ps-faq__item {
		border: 1px solid var(--ps-borde);
		border-radius: var(--ps-radio);
		background: #fff;
	}

	.ps-faq__pregunta {
		padding: 1rem 1.25rem;
		font-weight: 700;
		cursor: pointer;
	}

	.ps-faq__respuesta {
		padding: 0 1.25rem 0.25rem;
	}

	/* CTA final */
	.ps-cta__inner {
		text-align: center;
	}

	.ps-cta .ps-botones {
		justify-content: center;
	}

	/* Listado */
	.ps-listado__lista {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
		gap: 1.25rem;
		margin: 2rem 0 0;
		padding: 0;
		list-style: none;
	}

	.ps-tarjeta {
		position: relative;
		padding: 1.5rem;
		border: 1px solid var(--ps-borde);
		border-radius: var(--ps-radio);
	}

	.ps-tarjeta__titulo {
		margin: 0 0 0.5rem;
		font-size: 1.2em;
	}

	/* Toda la tarjeta enlaza al servicio. */
	.ps-tarjeta__titulo a::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.ps-tarjeta__texto {
		margin: 0;
	}
}