/* ==========================================================================
   CENTO — sistema visual
   Paleta oficial: naranja #FD6C01, celeste #BFECFF, gris #343433, blanco.
   Regla: el naranja es el punto (gráfica y campos grandes), nunca texto chico.
   ========================================================================== */

:root {
	--naranja: #FD6C01;
	--celeste: #BFECFF;
	--gris: #343433;
	--blanco: #FFFFFF;

	/* Derivados para texto secundario y líneas (contraste AA sobre blanco y celeste). */
	--gris-suave: #5D5D5C;
	--linea: rgba(52, 52, 51, 0.18);
	--linea-clara: rgba(255, 255, 255, 0.22);
	--blanco-suave: rgba(255, 255, 255, 0.74);

	--f-display: 'Stack Sans Headline', 'Nimbus Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--f-texto: 'Nimbus Sans', 'Nimbus Sans L', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	--margen: clamp(1.25rem, 5vw, 4rem);
	--ancho: 88rem;
	--gutter: clamp(1.25rem, 2.5vw, 2.5rem);
	--seccion: clamp(5rem, 3rem + 7vw, 10rem);
	--alto-cabecera: 4.5rem;
	--horizonte: clamp(2.5rem, 7vw, 7rem);

	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ease-salida: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base ------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--alto-cabecera) + 1rem);
}

body {
	margin: 0;
	background: var(--blanco);
	color: var(--gris);
	font-family: var(--f-texto);
	font-size: 1.0625rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

body:has(dialog[open]) {
	overflow: hidden;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--f-display);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

p,
ul,
ol,
dl,
dd,
figure {
	margin: 0;
}

p {
	text-wrap: pretty;
}

::selection {
	background: var(--celeste);
	color: var(--gris);
}

:focus-visible {
	outline: 3px solid var(--gris);
	outline-offset: 3px;
	border-radius: 2px;
}

.pie :focus-visible,
.proceso :focus-visible,
.menu-movil :focus-visible,
.is-style-gris :focus-visible {
	outline-color: var(--celeste);
}

.principal:focus {
	outline: none;
}

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

.saltar {
	position: absolute;
	top: -5rem;
	left: 1rem;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	border-radius: 999px;
	background: var(--gris);
	color: var(--blanco);
	font-weight: 600;
	text-decoration: none;
}

.saltar:focus {
	top: 1rem;
}

.titulo-2 {
	font-size: clamp(2.25rem, 1.25rem + 3.6vw, 4.75rem);
	line-height: 1;
	letter-spacing: -0.04em;
}

.titulo-3 {
	font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
	letter-spacing: -0.03em;
}

/* El punto ---------------------------------------------------------------- */

.punto {
	display: inline-block;
	flex: none;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--naranja);
}

.punto-final {
	display: inline-block;
	width: 0.19em;
	height: 0.19em;
	margin-left: 0.05em;
	border-radius: 50%;
	background: var(--naranja);
}

/* Botones y enlaces ------------------------------------------------------- */

.boton {
	--bg: var(--gris);
	--fg: var(--blanco);
	--borde: var(--gris);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: 3.25rem;
	padding: 0.85rem 1.35rem 0.85rem 1.6rem;
	border: 1.5px solid var(--borde);
	border-radius: 999px;
	background: var(--bg);
	color: var(--fg);
	font: 600 1rem/1.2 var(--f-texto);
	text-decoration: none;
	cursor: pointer;
	translate: var(--mx, 0px) var(--my, 0px);
	transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.12s var(--ease), translate 0.4s var(--ease-salida);
}

.boton__punto {
	translate: calc(var(--mx, 0px) * 0.7) calc(var(--my, 0px) * 0.7);
	transition: transform 0.22s var(--ease), translate 0.4s var(--ease-salida);
}

.boton:hover .boton__punto,
.boton:focus-visible .boton__punto {
	transform: scale(1.7);
}

.boton:active {
	transform: scale(0.98);
}

.boton--lleno:hover {
	--bg: #000;
	--borde: #000;
}

.boton--linea {
	--bg: transparent;
	--fg: var(--gris);
}

.boton--linea:hover {
	--bg: var(--gris);
	--fg: var(--blanco);
}

.boton--claro {
	--bg: var(--blanco);
	--fg: var(--gris);
	--borde: var(--blanco);
}

.boton--claro:hover {
	--bg: var(--celeste);
	--borde: var(--celeste);
}

.boton--chico {
	min-height: 2.5rem;
	padding: 0.45rem 0.95rem 0.45rem 1.15rem;
	font-size: 0.9375rem;
	gap: 0.6rem;
}

.boton.is-enviando {
	opacity: 0.7;
	cursor: progress;
}

.enlace {
	display: inline-block;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.32em;
	transition: text-decoration-color 0.18s var(--ease), text-underline-offset 0.18s var(--ease);
}

a.enlace:hover,
a:hover > .enlace,
.unidad:hover .enlace {
	text-decoration-color: var(--naranja);
	text-underline-offset: 0.45em;
}

/* Cabecera --------------------------------------------------------------- */

.cabecera {
	position: sticky;
	top: 0;
	z-index: 50;
	height: var(--alto-cabecera);
	transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

/* Barra de administración de WordPress (solo usuarios con sesión). */
.admin-bar .cabecera {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .cabecera {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .cabecera {
		top: 0;
	}
}

.cabecera.is-scrolled {
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1px 0 var(--linea);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.cabecera__in {
	display: flex;
	align-items: center;
	gap: 2rem;
	height: 100%;
}

.cabecera .marca {
	view-transition-name: marca;
}

.marca {
	display: inline-flex;
	flex: none;
	border-radius: 4px;
}

.marca__img {
	width: auto;
	height: 1.4rem;
}

.marca--claro .marca__img {
	filter: brightness(0) invert(1);
}

.nav,
.cabecera__cta {
	display: none;
}

.nav__lista {
	display: flex;
	gap: clamp(1.25rem, 2.2vw, 2.25rem);
	padding: 0;
	list-style: none;
}

.nav__lista a {
	position: relative;
	display: block;
	padding: 0.5rem 0;
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
}

.nav__lista a::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -0.1rem;
	width: 0.4rem;
	height: 0.4rem;
	margin-left: -0.2rem;
	border-radius: 50%;
	background: var(--naranja);
	transform: scale(0);
	transition: transform 0.2s var(--ease);
}

.nav__lista a:hover::after,
.nav__lista .current-menu-item > a::after,
.nav__lista .current-menu-ancestor > a::after {
	transform: scale(1);
}

.cabecera__menu {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-left: auto;
	min-height: 2.75rem;
	padding: 0.45rem 1rem 0.45rem 1.15rem;
	border: 1.5px solid var(--gris);
	border-radius: 999px;
	background: var(--blanco);
	color: var(--gris);
	font: 600 0.9375rem/1 var(--f-texto);
	cursor: pointer;
}

@media (min-width: 64rem) {
	.marca__img {
		height: 1.6rem;
	}

	.nav {
		display: block;
		margin-left: auto;
	}

	.cabecera__cta {
		display: inline-flex;
	}

	.cabecera__menu {
		display: none;
	}
}

/* Menú móvil (dialog nativo: foco y Escape resueltos por el navegador). */

.menu-movil {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0 var(--margen) 2rem;
	border: 0;
	background: var(--gris);
	color: var(--blanco);
}

.menu-movil[open] {
	display: flex;
	flex-direction: column;
}

.menu-movil::backdrop {
	background: transparent;
}

.menu-movil__cabeza {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--alto-cabecera);
}

.menu-movil__cerrar {
	min-height: 2.75rem;
	padding: 0.45rem 1.15rem;
	border: 1.5px solid var(--blanco);
	border-radius: 999px;
	background: transparent;
	color: var(--blanco);
	font: 600 0.9375rem/1 var(--f-texto);
	cursor: pointer;
}

.menu-movil__lista {
	margin-top: clamp(1.5rem, 6vh, 3rem);
	padding: 0;
	list-style: none;
}

.menu-movil__lista a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--linea-clara);
	font: 600 clamp(2.25rem, 10vw, 3.5rem)/1.1 var(--f-display);
	letter-spacing: -0.04em;
	text-decoration: none;
}

.menu-movil__lista .current-menu-item > a::after {
	content: '';
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--naranja);
}

.menu-movil__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 2rem;
	color: var(--blanco-suave);
}

/* Hero ------------------------------------------------------------------- */

.hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 3rem;
	min-height: min(100svh, 54rem);
	margin-top: calc(-1 * var(--alto-cabecera));
	padding-top: calc(var(--alto-cabecera) + clamp(3rem, 10vh, 7rem));
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
	overflow: clip;
}

.hero__circulo {
	position: absolute;
	z-index: -2;
	top: clamp(5rem, 14vh, 9rem);
	right: -48vw;
	width: 108vw;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--celeste);
}

.hero__campo {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
	mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

.hero__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
}

.hero__titulo {
	max-width: 7.4em;
	font-size: clamp(3.25rem, 0.9rem + 10.4vw, 11.5rem);
	font-weight: 600;
	line-height: 0.9;
	letter-spacing: -0.05em;
	word-spacing: 0.06em;
}

.hero__pie {
	display: grid;
	gap: 2rem;
}

.hero__bajada {
	max-width: 30ch;
	font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);
	line-height: 1.4;
}

.hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.hero__indice {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--linea);
	font-size: 0.9375rem;
}

.hero__lugar {
	font-weight: 600;
}

.hero__indice ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
	padding: 0;
	list-style: none;
	color: var(--gris-suave);
}

.hero__indice a {
	text-decoration: none;
	transition: color 0.18s var(--ease);
}

.hero__indice a:hover {
	color: var(--gris);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

@media (min-width: 48rem) {
	.hero__circulo {
		top: -8vw;
		right: -16vw;
		width: min(74vw, 62rem);
	}
}

@media (min-width: 64rem) {
	.hero__pie {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--gutter);
	}

	.hero__bajada,
	.hero__acciones {
		grid-column: 7 / -1;
	}

	.hero__indice ul {
		margin-left: auto;
	}
}

/* Coreografía de entrada: un solo momento, el punto aparece al final. */
@media (prefers-reduced-motion: no-preference) {
	.hero__circulo {
		animation: circulo-entra 1.1s var(--ease-salida) both;
	}

	.hero__titulo {
		animation: subir 0.7s var(--ease-salida) 0.15s both;
	}

	.hero__titulo .punto-final {
		animation: punto-entra 0.45s var(--ease-salida) 0.85s both;
	}

	.hero__pie,
	.hero__indice {
		animation: aparecer 0.6s var(--ease) 0.45s both;
	}

	@supports (animation-timeline: view()) {
		.hero__circulo {
			animation: circulo-entra 1.1s var(--ease-salida) both, circulo-scroll linear both;
			animation-timeline: auto, view();
			animation-range: normal, exit 0% exit 100%;
		}
	}
}

@keyframes circulo-entra {
	from {
		scale: 0.06;
	}
}

@keyframes circulo-scroll {
	to {
		translate: -6% 22%;
	}
}

@keyframes subir {
	from {
		opacity: 0;
		transform: translateY(0.12em);
	}
}

@keyframes aparecer {
	from {
		opacity: 0;
	}
}

@keyframes punto-entra {
	from {
		scale: 0;
	}
}

/* Red: equipo base + colaboradores ---------------------------------------- */

.red {
	padding-block: var(--seccion);
	overflow-x: clip;
}

.red__grid {
	display: grid;
	gap: 3.5rem;
	align-items: center;
}

.red__texto {
	display: grid;
	gap: 1.5rem;
	justify-items: start;
}

.red__parrafo {
	max-width: 38rem;
	color: var(--gris-suave);
	font-size: 1.1875rem;
}

.red__diagrama {
	width: min(100%, 30rem);
	justify-self: center;
}

.orbita {
	fill: none;
	stroke: var(--gris);
	stroke-width: 1.25;
	opacity: 0.32;
}

.orbita--interna {
	stroke-dasharray: 3 7;
	opacity: 0.55;
}

.nodos--red circle {
	fill: var(--gris);
}

.nodos--equipo circle {
	fill: var(--celeste);
	stroke: var(--gris);
	stroke-width: 1.5;
}

.nucleo {
	fill: var(--naranja);
}

.red__leyenda {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	margin-top: 1.5rem;
	color: var(--gris-suave);
	font-size: 0.9375rem;
}

.red__leyenda span {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.leyenda--equipo {
	background: var(--celeste);
	box-shadow: inset 0 0 0 1.5px var(--gris);
}

.leyenda--red {
	width: 0.4rem;
	height: 0.4rem;
	background: var(--gris);
}

@media (min-width: 64rem) {
	.red__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--gutter);
	}

	.red__texto {
		grid-column: 1 / 7;
	}

	.red__diagrama {
		grid-column: 8 / -1;
		justify-self: end;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.js .red__diagrama circle {
		transform-box: fill-box;
		transform-origin: center;
		transition: scale 0.5s var(--ease-salida), opacity 0.5s var(--ease);
	}

	.js .red__diagrama:not(.is-visible) .nodos circle,
	.js .red__diagrama:not(.is-visible) .nucleo {
		scale: 0;
	}

	.js .red__diagrama:not(.is-visible) .orbita {
		opacity: 0;
		scale: 0.85;
	}

	.js .red__diagrama .orbita--interna { transition-delay: 0.1s; }
	.js .red__diagrama .nodos--equipo circle { transition-delay: 0.35s; }
	.js .red__diagrama .nodos--red circle { transition-delay: 0.5s; }
	.js .red__diagrama .nucleo { transition-delay: 0.15s; }
}

/* Servicios: índice editorial sobre campo celeste -------------------------- */

.servicios {
	padding-block: var(--seccion);
	--curva: var(--horizonte);
	border-radius: 50% 50% 0 0 / var(--curva) var(--curva) 0 0;
	background: var(--celeste);
}

.servicios__grid {
	display: grid;
	gap: 3rem;
}

.servicios__cabeza {
	display: grid;
	gap: 1.25rem;
	align-content: start;
	justify-items: start;
}

.servicios__cabeza p {
	max-width: 28rem;
	font-size: 1.1875rem;
}

@media (min-width: 64rem) {
	.servicios__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--gutter);
	}

	.servicios__cabeza {
		position: sticky;
		top: calc(var(--alto-cabecera) + 2rem);
		grid-column: 1 / 5;
		align-self: start;
	}

	.servicios__grid > .indice,
	.servicios__grid > .vacio {
		grid-column: 6 / -1;
	}
}

.indice {
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--linea);
}

.indice__item {
	border-top: 1px solid var(--linea);
}

.indice__enlace {
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	column-gap: 0.5rem;
	row-gap: 0.5rem;
	padding-block: clamp(1.25rem, 2.5vw, 2rem);
	text-decoration: none;
}

.indice__punto {
	grid-row: 1;
	align-self: center;
	width: 0.75rem;
	height: 0.75rem;
	transform: scale(0.45);
	background: var(--gris);
	transition: transform 0.22s var(--ease), background-color 0.22s var(--ease);
}

.indice__nombre {
	grid-column: 2;
	font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.035em;
	transition: translate 0.22s var(--ease);
}

.indice__desc {
	grid-column: 2;
	max-width: 46ch;
	color: var(--gris);
	opacity: 0.82;
}

.indice__ver {
	display: none;
}

.indice__enlace:hover .indice__punto,
.indice__enlace:focus-visible .indice__punto {
	transform: scale(1);
	background: var(--naranja);
}

.indice__enlace:hover .indice__nombre,
.indice__enlace:focus-visible .indice__nombre {
	translate: 0.35rem 0;
}

@media (min-width: 48rem) {
	.indice__enlace {
		grid-template-columns: 1.75rem minmax(0, 1fr) auto;
	}

	.indice__ver {
		display: block;
		grid-column: 3;
		grid-row: 1;
		align-self: center;
		font-size: 0.9375rem;
		font-weight: 600;
		opacity: 0;
		translate: -0.5rem 0;
		transition: opacity 0.2s var(--ease), translate 0.2s var(--ease);
	}

	.indice__enlace:hover .indice__ver,
	.indice__enlace:focus-visible .indice__ver {
		opacity: 1;
		translate: 0 0;
	}
}

.servicios--pagina .indice__nombre {
	font-size: clamp(1.75rem, 1rem + 3vw, 3.75rem);
}

/* Proceso ---------------------------------------------------------------- */

.proceso {
	padding-block: var(--seccion);
	background: var(--gris);
	color: var(--blanco);
}

.proceso__cabeza {
	display: grid;
	gap: 1.25rem;
	margin-bottom: clamp(3rem, 6vw, 5.5rem);
}

.proceso__bajada {
	max-width: 32rem;
	color: var(--blanco-suave);
	font-size: 1.1875rem;
}

.proceso__pasos {
	display: grid;
	gap: 2.5rem;
	padding: 0;
	list-style: none;
}

.paso {
	position: relative;
	display: grid;
	gap: 0.75rem;
	align-content: start;
	padding-left: 4rem;
}

.paso__numero {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1.5px solid var(--blanco-suave);
	border-radius: 50%;
	font: 600 1rem/1 var(--f-display);
}

.paso:first-child .paso__numero {
	border-color: var(--naranja);
	background: var(--naranja);
	color: var(--gris);
}

.paso:not(:last-child)::before {
	content: '';
	position: absolute;
	top: 3.25rem;
	bottom: -2rem;
	left: 1.375rem;
	width: 1px;
	background: var(--linea-clara);
}

.paso__titulo {
	font-size: 1.5rem;
	letter-spacing: -0.025em;
}

.paso__texto {
	color: var(--blanco-suave);
}

@media (min-width: 64rem) {
	.proceso__cabeza {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--gutter);
		align-items: end;
	}

	.proceso__cabeza .titulo-2 {
		grid-column: 1 / 7;
	}

	.proceso__bajada {
		grid-column: 8 / -1;
	}

	.proceso__pasos {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: var(--gutter);
	}

	.paso {
		padding-left: 0;
		padding-top: 4.5rem;
	}

	.paso:not(:last-child)::before {
		top: 1.375rem;
		bottom: auto;
		left: 3.75rem;
		right: calc(-1 * var(--gutter) + 1rem);
		width: auto;
		height: 1px;
	}
}

/* Soluciones y unidades -------------------------------------------------- */

.soluciones {
	padding-block: var(--seccion);
	overflow-x: clip;
}

.soluciones__cabeza {
	display: grid;
	gap: 1.25rem;
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.soluciones__cabeza p {
	max-width: 34rem;
	color: var(--gris-suave);
	font-size: 1.1875rem;
}

@media (min-width: 64rem) {
	.soluciones__cabeza {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--gutter);
		align-items: end;
	}

	.soluciones__cabeza .titulo-2 {
		grid-column: 1 / 7;
	}

	.soluciones__cabeza > p,
	.soluciones__cabeza > .enlace {
		grid-column: 8 / -1;
		justify-self: start;
	}
}

.soluciones--pagina {
	padding-top: 0;
}

.unidades {
	display: grid;
	gap: clamp(3rem, 6vw, 5rem);
}

.unidad {
	position: relative;
}

.unidad__nombre a {
	text-decoration: none;
}

.unidad__nombre a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.unidad--destacada {
	display: grid;
	gap: 2rem;
	align-items: center;
}

.unidad__circulo {
	position: relative;
	width: min(100%, 28rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--celeste);
	transition: scale 0.35s var(--ease-salida);
}

.unidad__circulo img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

/* El punto que toca el círculo, como en el logotipo. Orbita hasta su lugar al hacer scroll. */
.unidad__orbita {
	position: absolute;
	inset: 0;
	rotate: 225deg;
	pointer-events: none;
}

.unidad__satelite {
	position: absolute;
	top: -3%;
	left: 50%;
	width: 17%;
	aspect-ratio: 1;
	border: 0.6rem solid var(--blanco);
	border-radius: 50%;
	background: var(--gris);
	translate: -50% -50%;
}

.unidad--naranja .unidad__circulo { background: var(--naranja); }
.unidad--gris .unidad__circulo { background: var(--gris); }
.unidad--gris .unidad__satelite { background: var(--naranja); }

.unidad--destacada:hover .unidad__circulo {
	scale: 1.02;
}

.unidad__texto {
	display: grid;
	gap: 1rem;
	justify-items: start;
}

.unidad--destacada .unidad__nombre {
	font-size: clamp(2.25rem, 1.25rem + 4vw, 5rem);
	letter-spacing: -0.045em;
	line-height: 0.95;
}

.unidad__desc {
	max-width: 32rem;
	font-size: 1.1875rem;
}

@media (min-width: 48rem) {
	.unidad--destacada {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		column-gap: var(--gutter);
	}
}

.unidades__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	column-gap: var(--gutter);
	padding: 0;
	list-style: none;
}

.unidades__lista .unidad {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 1rem;
	row-gap: 0.35rem;
	padding-block: 1.5rem;
	border-top: 1px solid var(--linea);
}

.unidad__marca {
	grid-row: span 2;
	width: 2.75rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--celeste);
	transition: scale 0.22s var(--ease);
}

.unidades__lista .unidad--naranja .unidad__marca { background: var(--naranja); }
.unidades__lista .unidad--gris .unidad__marca { background: var(--gris); }

.unidades__lista .unidad:hover .unidad__marca {
	scale: 1.15;
}

.unidades__lista .unidad__nombre {
	font-size: 1.375rem;
	letter-spacing: -0.025em;
}

.estado {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--gris-suave);
	font-size: 0.875rem;
	font-weight: 600;
}

.estado::before {
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	border: 1.5px solid currentColor;
	border-radius: 50%;
}

.estado--activa {
	color: var(--gris);
}

.estado--activa::before {
	border-color: var(--naranja);
	background: var(--naranja);
}

/* Proyectos -------------------------------------------------------------- */

.proyectos-home {
	padding-bottom: var(--seccion);
}

.proyectos-archivo {
	padding-bottom: var(--seccion);
}

.proyectos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: 3rem var(--gutter);
}

.proyecto__enlace {
	display: grid;
	gap: 0.75rem;
	text-decoration: none;
}

.proyecto__imagen {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 1.25rem;
	background: var(--celeste);
}

.proyecto__imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.5s var(--ease-salida);
}

.proyecto__enlace:hover img {
	scale: 1.03;
}

.proyecto__punto {
	width: 3rem;
	height: 3rem;
}

.proyecto__titulo {
	margin-top: 0.5rem;
	font-size: 1.5rem;
	letter-spacing: -0.025em;
}

.proyecto__meta {
	color: var(--gris-suave);
	font-size: 0.9375rem;
}

/* Audiencias ------------------------------------------------------------- */

.audiencias {
	padding-bottom: var(--seccion);
}

.audiencias__grid {
	display: grid;
	gap: 2.5rem;
}

.audiencias__lista {
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--linea);
}

.audiencias__lista li {
	padding-block: 1.25rem;
	border-top: 1px solid var(--linea);
	color: var(--gris-suave);
	font-size: clamp(1.1875rem, 1rem + 0.8vw, 1.625rem);
	line-height: 1.3;
}

.audiencias__lista strong {
	color: var(--gris);
	font-family: var(--f-display);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.audiencias__nota {
	max-width: 34rem;
	color: var(--gris-suave);
}

@media (min-width: 64rem) {
	.audiencias__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--gutter);
	}

	.audiencias__grid .titulo-2 {
		grid-column: 1 / 5;
	}

	.audiencias__lista {
		grid-column: 6 / -1;
	}
}

/* Cierre sobre campo naranja ---------------------------------------------- */

.cierre {
	padding-block: clamp(5rem, 3rem + 7vw, 9rem);
	--curva: var(--horizonte);
	border-radius: 50% 50% 0 0 / var(--curva) var(--curva) 0 0;
	background: var(--naranja);
	color: var(--gris);
}

.cierre__in {
	display: grid;
	gap: 2.5rem;
	justify-items: start;
}

.cierre__titulo {
	max-width: 16em;
	font-size: clamp(2.25rem, 1rem + 4.4vw, 5.5rem);
	line-height: 1;
	letter-spacing: -0.045em;
}

/* Pie -------------------------------------------------------------------- */

.pie {
	padding-top: clamp(4rem, 8vw, 6.5rem);
	padding-bottom: 2rem;
	background: var(--gris);
	color: var(--blanco);
}

.pie__grid {
	display: grid;
	gap: 3rem;
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.pie__marca .marca__img {
	height: 2rem;
}

.pie__lema {
	margin-top: 1rem;
	color: var(--blanco-suave);
}

.pie__lista {
	display: grid;
	gap: 0.6rem;
	padding: 0;
	list-style: none;
}

.pie__lista a,
.pie__canales a {
	color: var(--blanco-suave);
	text-decoration: none;
	transition: color 0.18s var(--ease);
}

.pie__lista a:hover,
.pie__canales a:hover {
	color: var(--blanco);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.pie__contacto {
	display: grid;
	gap: 1.25rem;
	align-content: start;
}

.pie__cta {
	font: 600 clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem)/1.1 var(--f-display);
	letter-spacing: -0.03em;
	text-decoration: underline;
	text-decoration-color: var(--naranja);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.pie__canales {
	display: grid;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}

.pie__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--linea-clara);
	color: var(--blanco-suave);
	font-size: 0.875rem;
}

@media (min-width: 48rem) {
	.pie__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--gutter);
	}

	.pie__marca { grid-column: 1 / 6; }
	.pie__nav { grid-column: 6 / 9; }
	.pie__contacto { grid-column: 9 / -1; }
}

/* Cabeza de páginas interiores --------------------------------------------- */

.cabeza {
	position: relative;
	isolation: isolate;
	margin-top: calc(-1 * var(--alto-cabecera));
	padding-top: calc(var(--alto-cabecera) + clamp(3.5rem, 9vw, 8rem));
	padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
	overflow: clip;
}

.cabeza__circulo {
	position: absolute;
	z-index: -1;
	top: -32vw;
	right: -30vw;
	width: 72vw;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--celeste);
}

.cabeza__grid {
	display: grid;
	gap: 1.5rem;
}

.cabeza__volver {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	justify-self: start;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.cabeza__volver::before {
	content: '';
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--naranja);
}

.cabeza__volver:hover {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.cabeza__titulo {
	max-width: 11em;
	font-size: clamp(2.75rem, 1rem + 6.6vw, 7.5rem);
	line-height: 0.95;
	letter-spacing: -0.05em;
}

.cabeza__bajada {
	max-width: 36ch;
	font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);
	line-height: 1.4;
}

.cabeza__datos {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 3rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--linea);
}

.cabeza__datos dt {
	color: var(--gris-suave);
	font-size: 0.875rem;
}

.cabeza__datos dd {
	font-weight: 600;
}

@media (min-width: 64rem) {
	.cabeza__circulo {
		top: -18vw;
		right: -10vw;
		width: min(46vw, 44rem);
	}

	.cabeza__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--gutter);
	}

	.cabeza__grid > * {
		grid-column: 1 / -1;
	}

	.cabeza__grid > .cabeza__bajada,
	.cabeza__grid > .cabeza__datos {
		grid-column: 7 / -1;
		margin-top: 1rem;
	}
}

/* Contenido de páginas (bloques del editor) -------------------------------- */

.contenido-pagina {
	--texto: 44rem;
	display: grid;
	grid-template-columns:
		[full-start] var(--margen)
		[wide-start texto-start] minmax(0, 1fr)
		[texto-end wide-end] var(--margen) [full-end];
	padding-bottom: var(--seccion);
}

/* En pantallas amplias, el texto se corre a la derecha y los titulares cuelgan a la izquierda. */
@media (min-width: 64rem) {
	.contenido-pagina {
		--interior: min(100vw - 2 * var(--margen), var(--ancho));
		grid-template-columns:
			[full-start] 1fr
			[wide-start] calc(var(--interior) * 0.25)
			[texto-start] min(calc(var(--interior) * 0.55), var(--texto))
			[texto-end] calc(var(--interior) * 0.75 - min(calc(var(--interior) * 0.55), var(--texto)))
			[wide-end] 1fr [full-end];
	}
}

.contenido-pagina > *,
.contenido-pagina .is-style-celeste > *,
.contenido-pagina .is-style-gris > * {
	grid-column: texto;
}

.contenido-pagina p,
.contenido-pagina li {
	font-size: 1.125rem;
	line-height: 1.65;
}

.contenido-pagina > * + *,
.contenido-pagina .wp-block-group > * + * {
	margin-top: 1.25rem;
}

.contenido-pagina h2 {
	grid-column: wide-start / texto-end;
	margin-top: clamp(3.5rem, 7vw, 6.5rem);
	margin-bottom: 0.5rem;
	font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3.25rem);
	letter-spacing: -0.035em;
}

.contenido-pagina h3 {
	margin-top: 2rem;
	font-size: 1.5rem;
	letter-spacing: -0.025em;
}

.contenido-pagina .is-style-manifiesto,
.contenido-pagina .wp-block-columns,
.contenido-pagina .alignwide {
	grid-column: wide;
}

.contenido-pagina .alignfull {
	grid-column: full;
}

.contenido-pagina .is-style-manifiesto {
	max-width: 24em;
	margin-block: clamp(2rem, 5vw, 4.5rem);
	font-family: var(--f-display);
	font-size: clamp(1.75rem, 1rem + 2.8vw, 3.5rem);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.03em;
}

.contenido-pagina > .is-style-manifiesto:first-child {
	margin-top: 0;
}

.contenido-pagina .is-style-celeste,
.contenido-pagina .is-style-gris {
	grid-column: full;
	display: grid;
	grid-template-columns: subgrid;
	margin-block: clamp(3.5rem, 7vw, 6.5rem);
	padding-block: clamp(4rem, 8vw, 7.5rem);
	--curva: var(--horizonte);
	border-radius: 50% 50% 0 0 / var(--curva) var(--curva) 0 0;
}

.contenido-pagina .is-style-celeste {
	background: var(--celeste);
}

.contenido-pagina .is-style-gris {
	background: var(--gris);
	color: var(--blanco);
}

.contenido-pagina .is-style-gris p {
	color: var(--blanco-suave);
}

.contenido-pagina .wp-block-group > h2 {
	grid-column: wide-start / texto-end;
}

.contenido-pagina .wp-block-group > h2:first-child {
	margin-top: 0;
}

.contenido-pagina .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 2.5rem var(--gutter);
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

.contenido-pagina .wp-block-column > * + * {
	margin-top: 0.75rem;
}

.contenido-pagina .wp-block-column h3 {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0;
	padding-top: 1.25rem;
	border-top: 1px solid currentColor;
}

.contenido-pagina .wp-block-column h3::before {
	content: '';
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--naranja);
}

.contenido-pagina .wp-block-column p {
	font-size: 1.0625rem;
}

.is-style-puntos,
.lista-puntos {
	padding: 0;
	list-style: none;
}

.is-style-puntos li,
.lista-puntos li {
	position: relative;
	padding-left: 1.5rem;
}

.is-style-puntos li + li,
.lista-puntos li + li {
	margin-top: 0.6rem;
}

.is-style-puntos li::before,
.lista-puntos li::before {
	content: '';
	position: absolute;
	top: 0.62em;
	left: 0;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--naranja);
}

.is-style-display {
	font-size: clamp(2.5rem, 1rem + 5vw, 6rem) !important;
	line-height: 0.95;
	letter-spacing: -0.05em;
}

.is-style-circulo img {
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
}

.contenido-pagina .wp-block-image img,
.prosa .wp-block-image img,
.detalle__imagen img,
.caso__portada img {
	border-radius: 1.25rem;
}

.caso__portada {
	margin-bottom: var(--seccion);
}

.caso__portada img {
	width: 100%;
}

/* Detalle de servicio y unidad -------------------------------------------- */

.detalle {
	display: grid;
	gap: 3rem;
	padding-bottom: var(--seccion);
}

.prosa > * + * {
	margin-top: 1.25rem;
}

.prosa p,
.prosa li {
	font-size: 1.1875rem;
	line-height: 1.65;
}

.prosa > p:first-of-type {
	font-family: var(--f-display);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.025em;
}

.prosa h2 {
	margin-top: 3rem;
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
	letter-spacing: -0.035em;
}

.prosa h3 {
	margin-top: 2rem;
	font-size: 1.5rem;
}

.detalle__lateral {
	display: grid;
	gap: 1.5rem;
	align-content: start;
	justify-items: start;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border-radius: 1.5rem;
	background: var(--celeste);
}

.detalle__subtitulo {
	font-size: 1.5rem;
	letter-spacing: -0.025em;
}

@media (min-width: 64rem) {
	.detalle {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--gutter);
	}

	.detalle__cuerpo {
		grid-column: 1 / 8;
	}

	.detalle__lateral {
		position: sticky;
		top: calc(var(--alto-cabecera) + 2rem);
		grid-column: 9 / -1;
		align-self: start;
	}
}

/* Contacto --------------------------------------------------------------- */

.contacto {
	position: relative;
	isolation: isolate;
	margin-top: calc(-1 * var(--alto-cabecera));
	padding-top: calc(var(--alto-cabecera) + clamp(3rem, 8vw, 7rem));
	padding-bottom: var(--seccion);
	overflow: clip;
}

.contacto__circulo {
	position: absolute;
	z-index: -1;
	bottom: -20vw;
	left: -36vw;
	width: 80vw;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--celeste);
}

.contacto__grid {
	display: grid;
	gap: 3.5rem;
}

.contacto__texto {
	display: grid;
	gap: 1.5rem;
	align-content: start;
}

.contacto__cuerpo p {
	max-width: 34rem;
	color: var(--gris-suave);
}

.contacto__subtitulo {
	margin-top: 1rem;
	font-size: 1.125rem;
	letter-spacing: 0;
}

.contacto__canales {
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--linea);
}

.contacto__canales li {
	display: grid;
	gap: 0.15rem;
	padding-block: 0.9rem;
	border-top: 1px solid var(--linea);
}

.contacto__canales span {
	color: var(--gris-suave);
	font-size: 0.875rem;
}

.contacto__canales a {
	font-size: 1.25rem;
	font-weight: 600;
	text-underline-offset: 0.3em;
	overflow-wrap: anywhere;
}

.contacto__lugar {
	font-weight: 600;
}

@media (min-width: 64rem) {
	.contacto__circulo {
		bottom: -14vw;
		left: -14vw;
		width: min(44vw, 40rem);
	}

	.contacto__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--gutter);
	}

	.contacto__texto {
		grid-column: 1 / 6;
	}

	.contacto__formulario {
		grid-column: 7 / -1;
	}
}

/* Formulario ------------------------------------------------------------- */

.formulario {
	display: grid;
	gap: 1.5rem;
	padding: clamp(1.5rem, 4vw, 3rem);
	border: 1px solid var(--linea);
	border-radius: 1.75rem;
	background: var(--blanco);
}

.campo {
	display: grid;
	gap: 0.5rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.campo label,
.campo legend {
	padding: 0;
	font-size: 0.9375rem;
	font-weight: 600;
}

.campo__opcional {
	color: var(--gris-suave);
	font-weight: 400;
}

.campo input,
.campo textarea {
	width: 100%;
	min-height: 3.25rem;
	padding: 0.85rem 1rem;
	border: 1.5px solid rgba(52, 52, 51, 0.38);
	border-radius: 0.875rem;
	background: var(--blanco);
	color: var(--gris);
	font: inherit;
	transition: border-color 0.18s var(--ease);
}

.campo textarea {
	min-height: 9rem;
	resize: vertical;
}

.campo input:hover,
.campo textarea:hover {
	border-color: var(--gris);
}

.campo input:focus-visible,
.campo textarea:focus-visible {
	border-color: var(--gris);
	outline-offset: 2px;
}

.campo input:user-invalid,
.campo textarea:user-invalid {
	border-color: var(--naranja);
	box-shadow: inset 4px 0 0 var(--naranja);
}

.campo__ayuda {
	color: var(--gris-suave);
	font-size: 0.875rem;
}

.campo--oculto {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.opciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.opcion {
	position: relative;
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
}

.opcion input {
	position: absolute;
	inset: 0;
	width: 100%;
	min-height: 0;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.opcion span {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.5rem;
	padding: 0.45rem 1rem;
	border: 1.5px solid rgba(52, 52, 51, 0.38);
	border-radius: 999px;
	transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.opcion span::before {
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.opcion:hover span {
	border-color: var(--gris);
}

.opcion input:checked + span {
	border-color: var(--gris);
	background: var(--gris);
	color: var(--blanco);
}

.opcion input:checked + span::before {
	border-color: var(--naranja);
	background: var(--naranja);
}

.opcion input:focus-visible + span {
	outline: 3px solid var(--gris);
	outline-offset: 2px;
}

.formulario__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}

.formulario__privacidad {
	color: var(--gris-suave);
	font-size: 0.875rem;
}

.formulario__aviso {
	padding: 1rem 1.25rem;
	border-radius: 0.875rem;
	font-weight: 600;
}

.formulario__aviso--ok {
	background: var(--celeste);
}

.formulario__aviso--error {
	border: 1.5px solid var(--naranja);
	background: #FFF3EA;
}

/* Estados vacíos y avisos -------------------------------------------------- */

.vacio {
	color: var(--gris-suave);
}

.vacio-bloque {
	display: grid;
	gap: 1.25rem;
	justify-items: start;
	max-width: 40rem;
	padding-block: clamp(1rem, 3vw, 2rem) var(--seccion);
}

.vacio-bloque p {
	color: var(--gris-suave);
	font-size: 1.1875rem;
}

.vacio-bloque__punto {
	width: 3rem;
	height: 3rem;
}

.vacio-bloque__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.aviso-admin {
	padding: 0.75rem 1rem;
	border: 1.5px dashed var(--gris-suave);
	border-radius: 0.75rem;
	color: var(--gris);
	font-size: 0.875rem;
}

.listado {
	padding-bottom: var(--seccion);
}

.listado__items {
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--linea);
}

.listado__item a {
	display: grid;
	gap: 0.5rem;
	padding-block: 1.75rem;
	border-top: 1px solid var(--linea);
	text-decoration: none;
}

.listado__item time {
	color: var(--gris-suave);
	font-size: 0.875rem;
}

.error404__in {
	display: grid;
	gap: 1.5rem;
	justify-items: start;
	padding-block: clamp(4rem, 12vw, 10rem);
}

.error404__punto {
	width: clamp(4rem, 10vw, 7rem);
	height: clamp(4rem, 10vw, 7rem);
}

.nav-links {
	display: flex;
	gap: 1rem;
	margin-top: 3rem;
}

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

/* Lugares para imagen ------------------------------------------------------
   Sin foto, se ve una composición de marca: campo, trama de puntos y el punto. */

.slot {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 1.25rem;
	background: var(--celeste);
}

.slot--rect { aspect-ratio: 4 / 3; }
.slot--retrato { aspect-ratio: 4 / 5; }
.slot--apaisado { aspect-ratio: 16 / 10; }

.slot--circulo {
	aspect-ratio: 1;
	border-radius: 50%;
}

.slot__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slot--vacio {
	background-color: var(--celeste);
	background-image: radial-gradient(circle, rgba(52, 52, 51, 0.24) 1.2px, transparent 1.7px);
	background-size: 22px 22px;
}

.slot__punto {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14%;
	max-width: 4rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--naranja);
	translate: -50% -50%;
}

.slot__aviso {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	left: 0.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: 0.6rem;
	background: rgba(255, 255, 255, 0.9);
	color: var(--gris);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
}

.slot--circulo .slot__aviso {
	right: 18%;
	bottom: 18%;
	left: 18%;
	text-align: center;
}

/* Galería de inicio: tres imágenes en composición asimétrica. */
.galeria {
	padding-bottom: var(--seccion);
	overflow-x: clip;
}

.galeria__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gutter);
	align-items: center;
}

.galeria__uno,
.galeria__tres {
	grid-column: 1 / -1;
}

.galeria__frase {
	font: 500 clamp(1.25rem, 1rem + 1.2vw, 2rem)/1.2 var(--f-display);
	letter-spacing: -0.02em;
}

.galeria__dos.slot--vacio {
	background-color: var(--naranja);
	background-image: radial-gradient(circle, rgba(52, 52, 51, 0.28) 1.2px, transparent 1.7px);
}

.galeria__dos .slot__punto {
	background: var(--gris);
}

.galeria__tres.slot--vacio {
	background-color: var(--gris);
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.22) 1.2px, transparent 1.7px);
}

@media (min-width: 64rem) {
	.galeria__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.galeria__uno {
		grid-column: 1 / 6;
		grid-row: 1 / 3;
	}

	.galeria__dos {
		grid-column: 7 / 10;
		grid-row: 1;
	}

	.galeria__frase {
		grid-column: 10 / -1;
		grid-row: 1;
	}

	.galeria__tres {
		grid-column: 7 / -1;
		grid-row: 2;
	}
}

.banda {
	margin-bottom: clamp(3rem, 6vw, 5.5rem);
}

.banda .slot {
	aspect-ratio: 4 / 3;
}

@media (min-width: 48rem) {
	.banda .slot {
		aspect-ratio: 21 / 9;
	}
}

/* Red: titular, frase destacada y una línea de apoyo. */
.red__destacado {
	max-width: 20ch;
	font: 500 clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem)/1.15 var(--f-display);
	letter-spacing: -0.03em;
}

/* Audiencias como etiquetas. */
.audiencias__cuerpo {
	display: grid;
	gap: 1.5rem;
	align-content: start;
}

.audiencias__etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 0;
	list-style: none;
}

.audiencias__etiquetas li {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1.25rem;
	border: 1.5px solid var(--gris);
	border-radius: 999px;
	font: 600 clamp(1.0625rem, 1rem + 0.5vw, 1.375rem)/1 var(--f-display);
	letter-spacing: -0.02em;
}

.audiencias__etiquetas li::before {
	content: '';
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--naranja);
}

@media (min-width: 64rem) {
	.audiencias__cuerpo {
		grid-column: 6 / -1;
	}
}

/* Botones de redes. */
.redes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}

.redes__boton {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.5rem;
	padding: 0.45rem 1rem;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.redes__punto {
	width: 0.45rem;
	height: 0.45rem;
	transition: transform 0.22s var(--ease);
}

.redes__boton:hover {
	border-color: var(--gris);
	background: var(--gris);
	color: var(--blanco);
}

.redes__boton:hover .redes__punto {
	transform: scale(1.6);
}

.redes--claro .redes__boton {
	border-color: var(--linea-clara);
	color: var(--blanco);
}

.redes--claro .redes__boton:hover {
	border-color: var(--blanco);
	background: var(--blanco);
	color: var(--gris);
}

.cierre__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* WhatsApp flotante. */
.whatsapp {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	height: 3.5rem;
	padding: 0 1.25rem 0 1rem;
	border-radius: 999px;
	background: var(--gris);
	box-shadow: 0 12px 30px -14px rgba(52, 52, 51, 0.6);
	color: var(--blanco);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.18s var(--ease), translate 0.3s var(--ease-salida);
}

.whatsapp::after {
	content: '';
	position: absolute;
	top: 0.5rem;
	right: 0.55rem;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--naranja);
	box-shadow: 0 0 0 2px var(--gris);
}

.whatsapp:hover {
	background: #000;
	translate: 0 -2px;
}

.whatsapp__icono {
	width: 1.5rem;
	height: 1.5rem;
}

@media (max-width: 47.99rem) {
	.whatsapp {
		justify-content: center;
		width: 3.5rem;
		padding: 0;
	}

	.whatsapp__texto {
		display: none;
	}
}

/* Contacto y pie. */
.contacto__directo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}

.contacto__email {
	font-size: 1.125rem;
	font-weight: 600;
	text-underline-offset: 0.3em;
	overflow-wrap: anywhere;
}

.pie__email {
	color: var(--blanco-suave);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.pie__email:hover {
	color: var(--blanco);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.aviso-admin--claro {
	border-color: var(--blanco-suave);
	color: var(--blanco-suave);
}

/* Proyectos: ejemplos para editores y relato del caso. */
.proyectos-ejemplo {
	display: grid;
	gap: 1.5rem;
}

.proyectos-ejemplo .aviso-admin a {
	margin-left: 0.25rem;
	font-weight: 700;
}

.proyecto--ejemplo {
	display: grid;
	gap: 0.75rem;
}

.caso__relato {
	display: grid;
	gap: 2rem var(--gutter);
	margin-bottom: var(--seccion);
}

.caso__subtitulo {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.75rem;
	font-size: 1.5rem;
	letter-spacing: -0.025em;
}

.caso__subtitulo::before {
	content: '';
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--naranja);
}

.caso__relato p {
	max-width: 40ch;
	font-size: 1.1875rem;
}

@media (min-width: 48rem) {
	.caso__relato {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Cursor con imagen sobre servicios que la tengan. */
.cursor__imagen {
	position: absolute;
	top: 0;
	left: 0;
	width: 11rem;
	height: 11rem;
	border-radius: 50%;
	background: center / cover no-repeat var(--celeste);
	scale: 0;
	translate: -50% -50%;
	transition: scale 0.35s var(--ease-salida);
}

.cursor.is-imagen .cursor__imagen {
	scale: 1;
}

.cursor.is-imagen .cursor__texto {
	color: var(--blanco);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.galeria__uno,
		.galeria__tres {
			animation: deriva linear both;
			animation-timeline: view();
		}

		.galeria__dos {
			animation: deriva-inversa linear both;
			animation-timeline: view();
		}
	}
}

@keyframes deriva {
	from { translate: 0 2.5rem; }
	to { translate: 0 -2.5rem; }
}

@keyframes deriva-inversa {
	from { translate: 0 -2rem; }
	to { translate: 0 2rem; }
}

/* ==========================================================================
   Movimiento
   Todo parte del punto: el cursor es un punto, los botones lo atraen,
   las secciones se abren como horizontes y el cierre nace de un punto.
   Lo que depende del scroll solo corre en navegadores compatibles y
   nunca con "reducir movimiento".
   ========================================================================== */

@property --curva {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}

/* Cursor punto (lo crea motion.js solo con mouse). */
.cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 300;
	width: 0;
	height: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s var(--ease);
}

.cursor.is-visible {
	opacity: 1;
}

.cursor::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0.625rem;
	height: 0.625rem;
	border: 1.5px solid var(--naranja);
	border-radius: 50%;
	background: var(--naranja);
	translate: -50% -50%;
	transition: width 0.35s var(--ease-salida), height 0.35s var(--ease-salida), background-color 0.2s var(--ease), border-color 0.2s var(--ease), scale 0.15s var(--ease);
}

.cursor.is-enlace::before {
	width: 2.75rem;
	height: 2.75rem;
	background: rgba(253, 108, 1, 0.12);
}

.cursor.is-etiqueta::before {
	width: 5.25rem;
	height: 5.25rem;
	background: var(--naranja);
}

.cursor.is-campo::before {
	width: 0.25rem;
	height: 0.25rem;
}

.cursor.is-presion::before {
	scale: 0.8;
}

.cursor.is-oscuro::before {
	border-color: var(--gris);
	background: var(--gris);
}

.cursor.is-oscuro.is-enlace::before {
	background: rgba(52, 52, 51, 0.14);
}

.cursor__texto {
	position: absolute;
	top: 0;
	left: 0;
	color: var(--gris);
	font: 600 0.875rem/1 var(--f-texto);
	white-space: nowrap;
	opacity: 0;
	translate: -50% -50%;
	transition: opacity 0.2s var(--ease);
}

.cursor.is-etiqueta .cursor__texto {
	opacity: 1;
}

.cursor.is-oscuro .cursor__texto {
	color: var(--blanco);
}

/* Servicios: al pasar, la fila se abre como un círculo desde su punto. */
.indice__enlace {
	--borde-fila: clamp(0.75rem, 1.5vw, 1.5rem);
	position: relative;
	isolation: isolate;
}

.indice__enlace::before {
	content: '';
	position: absolute;
	inset: 0 calc(-1 * var(--borde-fila));
	z-index: -1;
	border-radius: 1rem;
	background: var(--blanco);
	clip-path: circle(0 at calc(var(--borde-fila) + 0.375rem) 50%);
	transition: clip-path 0.6s var(--ease-salida);
}

.indice__enlace:hover::before,
.indice__enlace:focus-visible::before {
	clip-path: circle(140% at calc(var(--borde-fila) + 0.375rem) 50%);
}

/* Progreso de lectura: un punto que recorre la cabecera. */
.cabecera__progreso {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	pointer-events: none;
	opacity: 0;
}

@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.cabecera__progreso {
			background: linear-gradient(var(--naranja), var(--naranja)) 0 0 / 0% 100% no-repeat;
			animation: progreso linear both;
			animation-timeline: scroll(root);
		}

		.cabecera__progreso::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 0;
			width: 0.5rem;
			height: 0.5rem;
			margin: -0.25rem 0 0 -0.25rem;
			border-radius: 50%;
			background: var(--naranja);
			animation: progreso-punto linear both;
			animation-timeline: scroll(root);
		}
	}
}

@keyframes progreso {
	0% {
		opacity: 0;
		background-size: 0% 100%;
	}
	3% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		background-size: 100% 100%;
	}
}

@keyframes progreso-punto {
	to {
		left: calc(100% - 0.25rem);
	}
}

/* Coreografía ligada al scroll. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* Los horizontes se aplanan a medida que la sección llega. */
		.servicios,
		.contenido-pagina .is-style-celeste,
		.contenido-pagina .is-style-gris {
			animation: horizonte linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 100%;
		}

		/* El cierre nace de un punto y se vuelve campo. */
		.cierre {
			border-radius: 0;
			animation: cierre-punto linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 50%;
		}

		/* La red gira: el equipo en un sentido, los colaboradores en otro. */
		.red__diagrama {
			view-timeline: --red block;
		}

		.giro {
			transform-box: view-box;
			transform-origin: 50% 50%;
			animation: linear both;
			animation-timeline: --red;
		}

		.giro--interno {
			animation-name: girar-interno;
		}

		.giro--externo {
			animation-name: girar-externo;
		}

		/* El punto de cada unidad orbita hasta su lugar, como en el logotipo. */
		.unidad--destacada {
			view-timeline: --unidad block;
		}

		.unidad__orbita {
			animation: orbitar linear both;
			animation-timeline: --unidad;
			animation-range: entry 0% cover 55%;
		}

		/* El método se enciende paso a paso. */
		.paso {
			view-timeline: --paso block;
		}

		.paso__numero {
			animation: paso-luz linear both;
			animation-timeline: --paso;
			animation-range: entry 100% cover 40%;
		}

		.paso:not(:last-child)::after {
			content: '';
			position: absolute;
			top: 3.25rem;
			bottom: -2rem;
			left: 1.375rem;
			width: 1px;
			background: var(--naranja);
			transform-origin: top;
			animation: trazo-y linear both;
			animation-timeline: --paso;
			animation-range: cover 40% cover 75%;
		}
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) and (min-width: 64rem) {
		.proceso__pasos {
			view-timeline: --pasos block;
		}

		.paso__numero,
		.paso:not(:last-child)::after {
			animation-timeline: --pasos;
		}

		.paso:not(:last-child)::after {
			top: 1.375rem;
			right: calc(-1 * var(--gutter) + 1rem);
			bottom: auto;
			left: 3.75rem;
			width: auto;
			height: 1px;
			transform-origin: left;
			animation-name: trazo-x;
		}

		.paso:nth-child(1) .paso__numero { animation-range: cover 12% cover 18%; }
		.paso:nth-child(1)::after { animation-range: cover 18% cover 26%; }
		.paso:nth-child(2) .paso__numero { animation-range: cover 26% cover 31%; }
		.paso:nth-child(2)::after { animation-range: cover 31% cover 39%; }
		.paso:nth-child(3) .paso__numero { animation-range: cover 39% cover 44%; }
		.paso:nth-child(3)::after { animation-range: cover 44% cover 52%; }
		.paso:nth-child(4) .paso__numero { animation-range: cover 52% cover 57%; }
	}
}

@keyframes horizonte {
	from {
		--curva: 18vw;
	}
	to {
		--curva: 2vw;
	}
}

@keyframes cierre-punto {
	from {
		clip-path: circle(3.5rem at 16% 38%);
	}
	to {
		clip-path: circle(150% at 16% 38%);
	}
}

@keyframes girar-interno {
	from {
		rotate: -60deg;
	}
	to {
		rotate: 60deg;
	}
}

@keyframes girar-externo {
	from {
		rotate: 35deg;
	}
	to {
		rotate: -35deg;
	}
}

@keyframes orbitar {
	from {
		rotate: 100deg;
	}
	to {
		rotate: 225deg;
	}
}

@keyframes paso-luz {
	from {
		border-color: var(--blanco-suave);
		background-color: transparent;
		color: var(--blanco);
	}
	to {
		border-color: var(--naranja);
		background-color: var(--naranja);
		color: var(--gris);
	}
}

@keyframes trazo-x {
	from {
		scale: 0 1;
	}
	to {
		scale: 1 1;
	}
}

@keyframes trazo-y {
	from {
		scale: 1 0;
	}
	to {
		scale: 1 1;
	}
}

/* Transiciones entre páginas (navegadores compatibles) --------------------- */

@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: none;
}

::view-transition-new(root) {
	animation: pagina-entra 0.7s var(--ease-salida) both;
}

@keyframes pagina-entra {
	from {
		clip-path: circle(0.5rem at var(--vt-x, 50%) var(--vt-y, 50%));
	}
	to {
		clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 50%));
	}
}

@media (prefers-reduced-motion: no-preference) {
	.menu-movil[open] {
		animation: menu-entra 0.28s var(--ease-salida);
	}
}

@keyframes menu-entra {
	from {
		opacity: 0;
		transform: translateY(-1rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}