/*
 * Estilos globales de R1 (spec §2): página, botón, etiqueta, titulares, ritmo de sección,
 * marco de foto y foco. Portado del prototipo v22 con los tokens del tema; lo de cada
 * bloque va en su style.css.
 */

:root {
	--vs-margen: clamp(16px, 5.5vw, 80px);

	@media (max-width: 900px) {
		--vs-margen: 2em;
	}
}

html {
	scroll-behavior: smooth;

	@media (prefers-reduced-motion: reduce) {
		scroll-behavior: auto;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	background: var(--wp--preset--color--crema);
	color: var(--wp--preset--color--tinta);
	-webkit-font-smoothing: antialiased;
	font-size: var(--wp--preset--font-size--cuerpo-apoyo);
	line-height: var(--wp--custom--tipo--cuerpo--line-height);
	overflow-x: hidden;

	@media (max-width: 900px) {
		font-size: var(--wp--preset--font-size--boton);
	}
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--azul);
	outline-offset: 3px;
	border-radius: 4px;
}

.wrap {
	padding-inline: var(--vs-margen);
}

.sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Etiqueta con punto: la onda se repite tres veces. */
.eyebrow {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: var(--wp--preset--font-size--etiqueta);
	letter-spacing: var(--wp--custom--tipo--etiqueta--letter-spacing);
	text-transform: var(--wp--custom--tipo--etiqueta--text-transform);
	font-weight: var(--wp--custom--tipo--etiqueta--font-weight);
	color: var(--wp--preset--color--verde-texto);
}

.eyebrow::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: var(--wp--preset--border-radius--radius-circle);
	background: var(--wp--preset--color--verde);
	flex-shrink: 0;
}

.eyebrow::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-radius: var(--wp--preset--border-radius--radius-circle);
	border: 1px solid var(--wp--preset--color--verde);
	opacity: 0;
	animation: onda 2.6s var(--vs-curva-ease) 3;

	@media (prefers-reduced-motion: reduce) {
		animation: none;
	}
}

.eyebrow-claro {
	color: var(--wp--preset--color--etiqueta-oscuro);
}

.eyebrow-claro::before {
	background: var(--wp--preset--color--verde-claro);
}

.eyebrow-claro::after {
	border-color: var(--wp--preset--color--verde-claro);
}

@keyframes onda {
	0% {
		transform: scale(1);
		opacity: 0.9;
	}

	100% {
		transform: scale(3.2);
		opacity: 0;
	}
}

/* Titulares: la parte destacada (em) sube a 300 y va en azul. */
.h1 {
	margin: 0;
	max-width: var(--wp--preset--dimension--ancho-titular);
	font-size: var(--wp--preset--font-size--display);
	line-height: var(--wp--custom--tipo--display--line-height);
	font-weight: var(--wp--custom--tipo--display--font-weight);
	letter-spacing: var(--wp--custom--tipo--display--letter-spacing);
}

.h1i {
	margin: 0;
	font-size: clamp(44px, 6.4vw, 96px);
	line-height: 1;
	font-weight: var(--wp--custom--tipo--display--font-weight);
	letter-spacing: var(--wp--custom--tipo--display--letter-spacing);
}

.h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-2);
	line-height: var(--wp--custom--tipo--h-2--line-height);
	font-weight: var(--wp--custom--tipo--h-2--font-weight);
	letter-spacing: var(--wp--custom--tipo--h-2--letter-spacing);
}

.h2s {
	margin: 0;
	font-size: var(--wp--preset--font-size--titulo-contacto);
	line-height: var(--wp--custom--tipo--titulo-contacto--line-height);
	font-weight: var(--wp--custom--tipo--titulo-contacto--font-weight);
	letter-spacing: var(--wp--custom--tipo--titulo-contacto--letter-spacing);
}

.h1 em,
.h1i em,
.h2 em,
.h2s em {
	font-style: normal;
	font-weight: 300;
	color: var(--wp--preset--color--azul);
}

.lead {
	margin: 0;
	max-width: var(--wp--preset--dimension--ancho-entradilla);
	padding-top: 22px;
	border-top: 1px solid var(--wp--preset--color--linea-fuerte);
	font-size: var(--wp--preset--font-size--cuerpo-apoyo);
	line-height: var(--wp--custom--tipo--cuerpo-apoyo--line-height);
	color: var(--wp--preset--color--gris);
}

.prosa {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 640px;
	font-size: var(--wp--preset--font-size--cuerpo);
	color: var(--wp--preset--color--gris);
}

.prosa p,
.prosa ul {
	margin: 0;
}

.prosa ul {
	padding-left: 1.1em;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.prosa li::marker {
	color: var(--wp--preset--color--verde);
}

.prosa b {
	color: var(--wp--preset--color--tinta);
	font-weight: 500;
}

.prosa a:not(.btn) {
	color: var(--wp--preset--color--azul);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * Cuerpo de artículo (prototipo L328-336 y L565-587), común a la entrada (bloque «Artículo») y al texto legal (bloque
 * «Texto legal»): 12 columnas con el texto a la derecha, sus H2, negritas y listas numeradas. Lo propio de cada uno
 * (márgenes, índice, H3) va en el style.css de su bloque.
 */
.art-cuerpo {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--space-3);

	@media (max-width: 900px) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.art-cuerpo .art-texto {
	grid-column: 5 / span 7;
	max-width: 720px;
	min-width: 0;

	@media (max-width: 900px) {
		grid-column: 1 / -1;
	}
}

.art-texto h2 {
	margin: 28px 0 0;
	font-size: clamp(28px, 2.6vw, 38px);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--tinta);
}

.art-texto strong {
	font-weight: 500;
	color: var(--wp--preset--color--tinta);
}

.art-texto ol {
	margin: 0;
	padding-left: 1.1em;
}

/* Botones: dos estilos, claro y azul. */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	height: var(--wp--preset--dimension--alto-boton);
	padding: 0 6px 0 var(--wp--preset--spacing--space-3);
	border: 0;
	border-radius: var(--wp--preset--border-radius--radius-pill);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--boton);
	font-weight: var(--wp--custom--tipo--boton--font-weight);
	line-height: var(--wp--custom--tipo--boton--line-height);
	white-space: nowrap;
	cursor: pointer;
	transition:
		background var(--vs-dur-interaccion) var(--vs-curva-ease),
		color var(--vs-dur-interaccion) var(--vs-curva-ease),
		transform var(--vs-dur-interaccion) var(--vs-curva-ease),
		box-shadow var(--vs-dur-interaccion) var(--vs-curva-ease);
}

.btn .arr {
	width: var(--wp--preset--dimension--circulo-flecha);
	height: var(--wp--preset--dimension--circulo-flecha);
	border-radius: var(--wp--preset--border-radius--radius-circle);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
	transition:
		background var(--vs-dur-interaccion) var(--vs-curva-ease),
		color var(--vs-dur-interaccion) var(--vs-curva-ease);
}

.btn:hover,
.btn:focus-visible {
	transform: translateY(-2px);
}

.btn:hover .arr svg,
.btn:focus-visible .arr svg {
	animation: flecha 0.55s var(--vs-curva-ease);

	@media (prefers-reduced-motion: reduce) {
		animation: none;
	}
}

@keyframes flecha {
	0% {
		transform: translateX(0);
	}

	45% {
		transform: translateX(160%);
	}

	46% {
		transform: translateX(-160%);
	}

	100% {
		transform: translateX(0);
	}
}

.btn-claro {
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--tinta);
}

.btn-claro .arr {
	background: var(--wp--preset--color--azul);
	color: var(--wp--preset--color--blanco);
}

.btn-azul {
	background: var(--wp--preset--color--azul);
	color: var(--wp--preset--color--blanco);
}

.btn-azul .arr {
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--azul);
}

.btn-claro:hover .arr,
.btn-claro:focus-visible .arr {
	background: var(--wp--preset--color--verde);
}

.btn-claro:hover,
.btn-claro:focus-visible {
	box-shadow: var(--wp--preset--shadow--sombra-boton-claro);
}

.btn-azul:hover,
.btn-azul:focus-visible {
	background: var(--wp--preset--color--verde-texto);
	box-shadow: var(--wp--preset--shadow--sombra-boton-azul);
}

.btn-azul:hover .arr,
.btn-azul:focus-visible .arr {
	color: var(--wp--preset--color--verde-texto);
}

.enlace {
	font-size: var(--wp--preset--font-size--boton);
	font-weight: 500;
	color: var(--wp--preset--color--azul);
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

.enlace:hover {
	color: var(--wp--preset--color--verde-texto);
}

.enlace-claro {
	color: var(--wp--preset--color--blanco);
}

.enlace-claro:hover {
	color: var(--wp--preset--color--etiqueta-oscuro);
}

/* Círculo de la flecha de filas y tarjetas (prototipo L177); cada bloque pone su hover. */
.circ {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: var(--wp--preset--border-radius--radius-circle);
	border: 1px solid var(--wp--preset--color--linea-fuerte);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition:
		background var(--vs-dur-interaccion) var(--vs-curva-ease),
		color var(--vs-dur-interaccion) var(--vs-curva-ease),
		border-color var(--vs-dur-interaccion) var(--vs-curva-ease),
		transform var(--vs-dur-estado) var(--vs-curva-ease);
}

/* Marco de foto: blanco y negro de respaldo (las fotos ya se guardan en B/N al subir). */
.marco {
	position: relative;
	overflow: hidden;
	transition: clip-path var(--vs-dur-foto) var(--vs-curva-ease);
}

.marco img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transform: scale(1);
	transition: transform 1.6s var(--vs-curva-ease);
}

/* Secciones y su cabecera. */
.sec {
	position: relative;
	padding-block: 112px;

	@media (max-width: 900px) {
		padding-block: 3.2em;
	}
}

.sec-blanco {
	background: var(--wp--preset--color--blanco);
}

/* Dentro de una sección, la entradilla va sin raya (prototipo L367). */
.sec .lead {
	padding-top: 0;
	border-top: 0;
}

.cab-sec {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-3);
	max-width: 820px;
	margin-bottom: var(--wp--preset--spacing--space-7);

	@media (max-width: 900px) {
		margin-bottom: 2em;
	}
}

.cab-sec .lead {
	max-width: 600px;
}

.cab-sec-s {
	margin-bottom: 0;
}

.cab-sec-fila {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--space-4) var(--wp--preset--spacing--space-6);
	max-width: none;

	@media (max-width: 900px) {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
}

.cab-sec-fila > div {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-3);
	max-width: var(--wp--preset--dimension--ancho-texto);
}

.cab-sec-fila .lead {
	max-width: 420px;
}

/* Dos columnas (prototipo L156-160, L565-572): pasos verticales, lista sin foto y dos columnas. La izquierda puede ir fija (.pegado). */
.dos {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--space-3);
	row-gap: var(--wp--preset--spacing--space-5);
	align-items: start;

	@media (max-width: 900px) {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2em;
	}
}

.dos-izq {
	grid-column: 1 / span 5;
	display: flex;
	flex-direction: column;
	gap: 26px;
	min-width: 0;

	@media (max-width: 900px) {
		grid-column: 1 / -1;
	}
}

.dos-der {
	grid-column: 7 / span 6;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-4);
	min-width: 0;

	@media (max-width: 900px) {
		grid-column: 1 / -1;
	}
}

.pegado {
	position: sticky;
	top: 120px;

	@media (max-width: 900px) {
		position: static;
	}
}

/*
 * Filas de enlace sobre fondo claro (prototipo L165-178): las de «Relacionados» en lista y las de la página no
 * encontrada. Al pasar o con foco, barrido azul de izquierda a derecha, el texto se desplaza y la flecha gira; con
 * movimiento reducido solo cambian los colores. La lista de servicios, la lista con foto y las filas claras tienen
 * las suyas en su bloque.
 */
.filas {
	border-top: 1px solid var(--wp--preset--color--linea);
}

.filas .fila {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: var(--wp--preset--spacing--space-3)
		var(--wp--preset--spacing--space-2) var(--wp--preset--spacing--space-3)
		0;
	border-bottom: 1px solid var(--wp--preset--color--linea);
	position: relative;
	isolation: isolate;
	transition:
		color var(--vs-dur-interaccion) var(--vs-curva-ease),
		opacity var(--vs-dur-revelado) var(--vs-curva-ease),
		transform var(--vs-dur-revelado) var(--vs-curva-ease);
}

.filas .fila::before {
	content: "";
	position: absolute;
	inset: -1px calc(-1 * var(--wp--preset--spacing--space-2));
	background: var(--wp--preset--color--azul);
	z-index: -1;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--vs-dur-estado) var(--vs-curva-ease);
}

.filas .fila:hover,
.filas .fila:focus-visible {
	color: var(--wp--preset--color--blanco);
}

.filas .fila:hover::before,
.filas .fila:focus-visible::before {
	transform: scaleX(1);
}

.filas .fila-t {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	transition: transform var(--vs-dur-estado) var(--vs-curva-ease);
}

.filas .fila:hover .fila-t,
.filas .fila:focus-visible .fila-t {
	/* Con movimiento reducido el texto no se desplaza. */
	@media (prefers-reduced-motion: no-preference) {
		transform: translateX(var(--wp--preset--spacing--space-2));
	}
}

.filas .fila-n {
	font-size: var(--wp--preset--font-size--lista-servicio);
	font-weight: var(--wp--custom--tipo--lista-servicio--font-weight);
	letter-spacing: var(--wp--custom--tipo--lista-servicio--letter-spacing);
	line-height: var(--wp--custom--tipo--lista-servicio--line-height);
}

.filas .fila-d {
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--gris-2);
	transition: color var(--vs-dur-interaccion) var(--vs-curva-ease);
}

.filas .fila:hover .fila-d,
.filas .fila:focus-visible .fila-d {
	color: var(--wp--preset--color--blanco);
}

.filas .fila:hover .circ,
.filas .fila:focus-visible .circ {
	background: var(--wp--preset--color--blanco);
	border-color: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--azul);

	@media (prefers-reduced-motion: no-preference) {
		transform: rotate(-45deg);
	}
}