/*
Theme Name: César Sanz
Template: generatepress
Version: 1.0.0
*/

@font-face {
	font-family: "Marcellus";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/marcellus.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("assets/fonts/source-sans-3.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans";
	font-style: italic;
	font-weight: 400 600;
	font-display: swap;
	src: url("assets/fonts/source-sans-3-italic.woff2") format("woff2");
}

:root {
	--esp-1: 8px;
	--esp-2: 16px;
	--esp-3: 24px;
	--esp-4: 32px;
	--esp-5: 48px;
	--esp-6: 64px;
	--esp-7: 96px;
	--medida: 58ch;
	--borde: max(var(--esp-2), calc((100% - 1200px) / 2));
}

.full-width-content .entry-content > .alignfull {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	width: 100%;
}

.site-header {
	background: url("assets/img/cielo-denso.svg") center bottom / 1600px 1000px repeat, var(--noche);
}

.mobile-header-navigation {
	background: url("assets/img/cielo-denso.svg") center bottom / 1600px 1000px repeat, var(--noche);
}

.mobile-header-navigation .navigation-branding .main-title {
	font-size: 19px;
}

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

.mobile-header-navigation .menu-toggle {
	font-size: 22px;
	padding-inline: var(--esp-2);
}

@media (max-width: 359px) {
	.mobile-header-navigation .navigation-branding .main-title {
		font-size: 16px;
	}

	.main-title a {
		gap: 8px;
	}
}

.site-header .inside-header {
	align-items: center;
	max-width: none;
	padding: var(--esp-3) var(--esp-2);
	text-align: left;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.main-title a {
	align-items: center;
	display: inline-flex;
	gap: 12px;
	letter-spacing: 0.02em;
}

.main-title a::before {
	background-color: #14132b;
	border-radius: 50%;
	box-shadow: 0 0 0 1.5px #f6e7c8, 0 0 12px 3px rgb(255 228 186 / 0.55);
	content: "";
	flex: none;
	height: 18px;
	width: 18px;
}

.site-header .main-navigation {
	background-color: transparent;
}

.main-navigation .main-nav ul li a {
	font-size: 16px;
}

.main-navigation .main-nav ul li.cs-menu-reserva > a {
	border: 1px solid var(--ocaso);
	border-radius: 2px;
	color: var(--ocaso);
	font-weight: 600;
	line-height: 42px;
	margin: 9px 0 9px var(--esp-1);
	padding-inline: 20px;
}

.main-navigation .main-nav ul li.cs-menu-reserva:hover > a,
.main-navigation .main-nav ul li.cs-menu-reserva:focus-within > a {
	background-color: var(--ocaso);
	color: var(--noche);
}

.main-navigation.toggled .main-nav > ul {
	background-color: var(--noche-2);
	border-top: 1px solid var(--linea);
	padding-bottom: var(--esp-2);
}

.main-navigation.toggled .main-nav ul li.cs-menu-reserva > a {
	display: inline-block;
	margin: var(--esp-1) var(--esp-2) 0;
}

.entry-content h1,
.entry-content h2,
.cs-sobre__frase,
.cs-maxima__latin {
	text-wrap: balance;
}

.entry-content p,
.entry-content li {
	text-wrap: pretty;
}

.entry-content .wp-block-paragraph:not([class*="cs-"]) {
	margin-bottom: var(--esp-4);
}

.cs-seccion {
	padding: var(--esp-6) var(--esp-2);
}

.cs-cielo {
	background: url("assets/img/cielo-suave.svg") center / 1600px 1000px repeat, var(--noche);
}

.cs-entrada {
	color: var(--bruma);
	font-size: 20px;
}

.cs-etiqueta {
	color: var(--bruma);
	font-family: "Source Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
}

.cs-hero {
	--hueco-x: 50%;
	--hueco-abajo: 40px;
	--hueco-arriba: 600px;
	background: radial-gradient(ellipse 55% 45% at 50% 28%, rgb(92 72 170 / 0.35), transparent 70%), var(--noche);
	isolation: isolate;
	overflow: clip;
	padding: var(--esp-4) var(--esp-2) var(--esp-6);
	position: relative;
	text-align: center;
}

.cs-hero::before,
.cs-hero::after {
	content: "";
	inset: 0;
	mask-composite: exclude, intersect, add;
	mask-image: linear-gradient(#000 0 0), linear-gradient(to right, transparent calc(50% - var(--hueco-x) - 48px), #000 calc(50% - var(--hueco-x)), #000 calc(50% + var(--hueco-x)), transparent calc(50% + var(--hueco-x) + 48px)), linear-gradient(to top, transparent calc(var(--hueco-abajo) - 32px), #000 var(--hueco-abajo), #000 var(--hueco-arriba), transparent calc(var(--hueco-arriba) + 48px));
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.cs-hero::before {
	animation: cs-destello 7s ease-in-out infinite alternate;
	background: url("assets/img/destellos.svg") center / 1600px 1000px repeat;
}

.cs-hero::after {
	background: url("assets/img/cielo-denso.svg") center / 1600px 1000px repeat;
}

.cs-hero__astro {
	aspect-ratio: 1;
	margin: 0 calc(50% - 170px) var(--esp-5);
	position: relative;
	width: 340px;
}

.cs-zodiaco {
	animation: cs-giro 480s linear infinite;
	display: block;
	height: 100%;
	inset: 0;
	overflow: visible;
	position: absolute;
	width: 100%;
}

.cs-zodiaco__trazos circle,
.cs-zodiaco__trazos line {
	fill: none;
	stroke: var(--bruma);
	stroke-opacity: 0.45;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.cs-zodiaco__marcas line {
	stroke: var(--ocaso);
	stroke-opacity: 0.55;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.cs-zodiaco__aspectos line {
	stroke: var(--ocaso);
	stroke-opacity: 0.3;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.cs-zodiaco__planetas circle {
	fill: var(--ocaso);
	fill-opacity: 0.85;
}

.cs-zodiaco__nombres {
	dominant-baseline: middle;
	fill: var(--bruma);
	font-family: "Source Sans", sans-serif;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 1px;
	text-anchor: middle;
}

.cs-hero__eclipse {
	height: fit-content;
	inset: 0;
	margin: auto 0;
	pointer-events: none;
	position: absolute;
}

.cs-hero__eclipse img {
	display: block;
	height: auto;
	-webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent);
	mask-image: radial-gradient(closest-side, #000 60%, transparent);
	mix-blend-mode: lighten;
	width: 100%;
}

.cs-hero__eclipse::after {
	aspect-ratio: 1;
	background: radial-gradient(circle closest-side, #14132b 93%, transparent);
	content: "";
	left: 48.8%;
	position: absolute;
	top: 47.8%;
	transform: translate(-50%, -50%);
	width: 23%;
}

.cs-hero > :not(.cs-hero__astro) {
	margin-left: auto;
	margin-right: auto;
}

.cs-hero__titulo {
	font-size: 32px;
	letter-spacing: 0.08em;
	margin-bottom: var(--esp-2);
	text-transform: uppercase;
}

.cs-hero__lema {
	color: var(--ocaso);
	font-family: Marcellus, serif;
	font-size: 18px;
	letter-spacing: 0.14em;
	line-height: 1.4;
	margin-bottom: var(--esp-4);
	text-transform: uppercase;
}

.cs-hero__entrada {
	color: var(--bruma);
	font-size: 20px;
	margin-bottom: var(--esp-5);
	max-width: 46ch;
}

.cs-hero__acciones {
	justify-content: center;
	margin-bottom: var(--esp-3);
}

.cs-hero__prueba {
	color: var(--bruma);
	font-size: 16px;
	margin-bottom: 0;
}

@keyframes cs-destello {
	from {
		opacity: 0.3;
	}

	to {
		opacity: 1;
	}
}

@keyframes cs-giro {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cs-hero::before {
		animation: none;
		opacity: 0.8;
	}

	.cs-zodiaco {
		animation: none;
	}
}

.cs-franja {
	background-color: var(--noche-2);
	border-block: 1px solid var(--linea);
	padding: 0 var(--esp-2);
}

.cs-franja__lista {
	display: grid;
	list-style: none;
	margin: 0 auto;
	max-width: 1200px;
	padding: 0;
}

.cs-franja__lista li {
	color: var(--bruma);
	font-size: 16px;
	margin: 0;
	padding: var(--esp-3) 0;
	text-align: center;
}

.cs-franja__lista li + li {
	border-top: 1px solid var(--linea);
}

.cs-franja__lista strong {
	color: var(--luz);
	display: block;
	font-family: Marcellus, serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: var(--esp-1);
}

.cs-manifiesto {
	display: grid;
	grid-template-columns: minmax(0, 1fr) min(var(--medida), 100%) minmax(0, 1fr);
}

.cs-manifiesto > * {
	grid-column: 2;
}

.cs-manifiesto__texto > .wp-block-paragraph:last-child {
	margin-bottom: 0;
}

.cs-manifiesto > h2 {
	grid-column: 2 / -1;
	margin-bottom: var(--esp-6);
}

.cs-manifiesto__imagen {
	aspect-ratio: 4 / 3;
	margin: 0 0 var(--esp-4);
	position: relative;
}

.cs-manifiesto__planetas {
	aspect-ratio: 4 / 5;
	margin: var(--esp-5) auto 0;
	max-width: 280px;
	position: relative;
	width: 100%;
}

.cs-manifiesto__imagen img,
.cs-manifiesto__planetas img {
	height: 100%;
	inset: 0;
	--fundido: linear-gradient(transparent, #000 18%);
	mask-composite: intersect;
	mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), var(--fundido);
	mix-blend-mode: lighten;
	object-fit: cover;
	object-position: 50% 100%;
	position: absolute;
	width: 100%;
}

.cs-manifiesto__planetas img {
	--fundido: linear-gradient(transparent, #000 6%, #000 86%, transparent);
	object-position: 50% 30%;
}

.cs-manifiesto__texto:first-of-type > p:first-child::first-letter {
	color: var(--ocaso);
	float: left;
	font-family: Marcellus, serif;
	font-size: 4.6em;
	line-height: 0.8;
	margin: 0.06em 0.1em 0 0;
}

.cs-maxima {
	background: url("assets/img/rueda.svg") center / min(400px, 100%) no-repeat;
	grid-column: 1 / -1;
	margin: var(--esp-6) 0;
	padding: var(--esp-7) 0;
	text-align: center;
}

.cs-maxima__etiqueta {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.12em;
	margin-bottom: var(--esp-2);
	text-transform: uppercase;
}

.cs-maxima__latin {
	color: var(--ocaso);
	font-family: "Source Sans", sans-serif;
	font-size: 36px;
	font-style: italic;
	line-height: 1.15;
	margin-bottom: var(--esp-2);
}

.cs-maxima__traduccion {
	font-family: "Source Sans", sans-serif;
	font-size: 22px;
	font-style: italic;
	line-height: 1.15;
	margin-bottom: 0;
}

.cs-areas {
	background: linear-gradient(var(--noche), var(--noche-2) 160px, var(--noche-2) calc(100% - 160px), var(--noche));
}

.cs-areas__cabecera {
	margin-bottom: var(--esp-5);
}

.cs-areas__cabecera .cs-entrada {
	max-width: var(--medida);
}

.cs-areas__cabecera > :last-child {
	margin-bottom: 0;
}

.cs-areas__lista {
	border-bottom: 1px solid var(--linea);
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cs-areas__lista li {
	align-items: center;
	border-top: 1px solid var(--linea);
	column-gap: var(--esp-3);
	display: grid;
	font-size: 20px;
	grid-template-columns: 40px minmax(0, 1fr);
	margin: 0;
	padding: var(--esp-3) 0;
}

.cs-areas__lista li::before {
	background: center / contain no-repeat;
	content: "";
	height: 40px;
	width: 40px;
}

.cs-areas__lista li:nth-child(1)::before {
	background-image: url("assets/img/luna-1.svg");
}

.cs-areas__lista li:nth-child(2)::before {
	background-image: url("assets/img/luna-2.svg");
}

.cs-areas__lista li:nth-child(3)::before {
	background-image: url("assets/img/luna-3.svg");
}

.cs-areas__lista li:nth-child(4)::before {
	background-image: url("assets/img/luna-4.svg");
}

.cs-areas__lista li:nth-child(5)::before {
	background-image: url("assets/img/luna-5.svg");
}

.cs-areas__lista li:nth-child(6)::before {
	background-image: url("assets/img/luna-6.svg");
}

.cs-areas__lista li:nth-child(7)::before {
	background-image: url("assets/img/luna-7.svg");
}

.cs-pasos h2 {
	margin-bottom: var(--esp-5);
}

.cs-pasos__lista {
	counter-reset: paso;
	display: grid;
	gap: var(--esp-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cs-pasos__lista li {
	counter-increment: paso;
	font-size: 20px;
	margin: 0;
	max-width: 32ch;
	position: relative;
}

.cs-pasos__lista li::before {
	align-items: center;
	background-color: var(--noche);
	border: 1px solid var(--ocaso);
	border-radius: 50%;
	box-shadow: 0 0 0 8px var(--noche), 0 0 32px rgb(232 149 90 / 0.25);
	color: var(--ocaso);
	content: counter(paso);
	display: flex;
	font-family: Marcellus, serif;
	font-size: 28px;
	height: 64px;
	justify-content: center;
	line-height: 1;
	margin-bottom: var(--esp-3);
	width: 64px;
}

.cs-sobre {
	background: url("assets/img/cielo-suave.svg") center / 1600px 1000px repeat, linear-gradient(var(--noche), var(--noche-2) 200px);
	display: grid;
	gap: var(--esp-6);
	overflow: clip;
}

.cs-sobre__retrato {
	aspect-ratio: 1;
	margin: var(--esp-4) auto 0;
	position: relative;
	width: min(300px, 80%);
}

.cs-sobre__retrato::before {
	background: url("assets/img/orbitas.svg") center / contain no-repeat;
	content: "";
	inset: -22%;
	pointer-events: none;
	position: absolute;
}

.cs-sobre__retrato::after {
	border: 1px solid rgb(232 149 90 / 0.5);
	border-radius: 50%;
	content: "";
	inset: -14px;
	pointer-events: none;
	position: absolute;
}

.cs-sobre__retrato img {
	aspect-ratio: 1;
	border-radius: 50%;
	display: block;
	height: auto;
	object-fit: cover;
	object-position: 50% 22%;
	position: relative;
	width: 100%;
}

.cs-sobre__texto > :last-child {
	margin-bottom: 0;
}

.cs-sobre__frase {
	font-family: Marcellus, serif;
	font-size: 28px;
	line-height: 1.3;
	max-width: 22ch;
}

.cs-sobre__frase em {
	font-family: "Source Sans", sans-serif;
}

.cs-contacto {
	background: linear-gradient(var(--noche-2), var(--noche) 320px);
}

.cs-contacto__imagen {
	margin: 0;
}

.cs-contacto__imagen img {
	aspect-ratio: 3 / 2;
	display: block;
	height: auto;
	-webkit-mask-image: linear-gradient(transparent, #000 35%, #000 72%, transparent);
	mask-image: linear-gradient(transparent, #000 35%, #000 72%, transparent);
	object-fit: cover;
	object-position: 50% 100%;
	width: 100%;
}

.cs-contacto__cuerpo {
	background: url("assets/img/cielo-denso.svg") center top / 1600px 1000px repeat, var(--noche);
}

.cs-contacto__cuerpo .cs-entrada {
	margin-bottom: var(--esp-5);
}

.cs-datos {
	display: grid;
	gap: var(--esp-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cs-datos li {
	background: 0 2px / 24px 24px no-repeat;
	font-size: 20px;
	margin: 0;
	padding-left: 40px;
}

.cs-datos li:nth-child(1) {
	background-image: url("assets/img/icono-movil.svg");
}

.cs-datos li:nth-child(2) {
	background-image: url("assets/img/icono-correo.svg");
}

.cs-datos li:nth-child(3) {
	background-image: url("assets/img/icono-lugar.svg");
}

.cs-datos a {
	color: var(--luz);
	display: inline-block;
	overflow-wrap: anywhere;
	padding-block: var(--esp-1);
	text-decoration-color: var(--ocaso);
	text-underline-offset: 0.2em;
}

.cs-datos a:hover,
.cs-datos a:focus {
	color: var(--ocaso);
}

.cs-datos strong + br {
	display: none;
}

.cs-datos strong {
	color: var(--bruma);
	display: block;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.12em;
	margin-bottom: var(--esp-1);
	text-transform: uppercase;
}

.cs-boton .wp-block-button__link {
	background-color: var(--ocaso);
	border-radius: 2px;
	box-shadow: 0 0 32px rgb(232 149 90 / 0.3);
	color: var(--noche);
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: var(--esp-2) var(--esp-4);
	text-decoration: none;
}

.cs-boton .wp-block-button__link:hover,
.cs-boton .wp-block-button__link:focus {
	background-color: var(--luz);
	color: var(--noche);
}

@media (min-width: 769px) {
	.site-header .inside-header {
		padding-inline: var(--borde);
	}

	.cs-seccion {
		padding: var(--esp-7) var(--borde);
	}

	.cs-hero {
		padding: var(--esp-5) var(--borde) var(--esp-7);
	}

	.cs-hero {
		--hueco-x: 340px;
		--hueco-abajo: 72px;
		--hueco-arriba: 520px;
	}

	.cs-hero__astro {
		margin: 0 auto var(--esp-5);
		width: 340px;
	}

	.cs-hero__titulo {
		font-size: 48px;
	}

	.cs-hero__lema {
		font-size: 20px;
	}

	.cs-franja {
		padding-inline: var(--borde);
	}

	.cs-franja__lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cs-franja__lista li {
		padding: var(--esp-4) var(--esp-3);
	}

	.cs-franja__lista li + li {
		border-left: 1px solid var(--linea);
		border-top: 0;
	}

	.cs-maxima {
		margin: var(--esp-7) 0;
	}

	.cs-maxima__latin {
		font-size: 56px;
	}

	.cs-maxima__traduccion {
		font-size: 28px;
	}

	.cs-areas__lista {
		border-bottom: 0;
		column-gap: var(--esp-6);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cs-areas__lista li:nth-last-child(-n + 2) {
		border-bottom: 1px solid var(--linea);
	}

	.cs-pasos__lista {
		gap: var(--esp-6);
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cs-pasos__lista li {
		max-width: none;
	}

	.cs-pasos__lista li:not(:last-child)::after {
		border-top: 1px dashed var(--linea);
		content: "";
		left: 88px;
		position: absolute;
		right: calc(var(--esp-3) - var(--esp-6));
		top: 32px;
	}

	.cs-sobre {
		align-items: center;
		gap: var(--esp-7);
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.cs-sobre__retrato {
		margin: var(--esp-5) auto;
		width: min(400px, 100%);
	}

	.cs-sobre__frase {
		font-size: 40px;
	}

	.cs-contacto__imagen img {
		aspect-ratio: 5 / 2;
		max-height: 560px;
	}

	.cs-datos {
		column-gap: var(--esp-6);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.cs-hero__titulo {
		font-size: 64px;
	}

	.cs-hero {
		--hueco-x: 440px;
	}

	.cs-manifiesto {
		grid-template-columns: minmax(0, 6fr) minmax(0, 1fr) minmax(0, 3fr);
	}

	.cs-manifiesto__texto > .wp-block-paragraph {
		font-size: 20px;
	}

	.cs-manifiesto__texto {
		align-self: center;
	}

	.cs-manifiesto > * {
		grid-column: 1;
	}

	.cs-manifiesto > h2 {
		grid-column: 1 / -1;
		margin-bottom: calc(var(--esp-7) + var(--esp-4));
		text-align: center;
	}

	.cs-manifiesto > .cs-maxima {
		grid-column: 1 / -1;
	}

	.cs-manifiesto__imagen {
		aspect-ratio: 3 / 4;
		grid-column: 3;
		grid-row: 2;
		margin: 0;
	}

	.cs-manifiesto__imagen img {
		--fundido: linear-gradient(transparent, #000 8%, #000 94%, transparent);
	}

	.cs-manifiesto__planetas {
		aspect-ratio: 3 / 4;
		grid-column: 3;
		grid-row: 4;
		margin: 0;
		max-width: none;
	}
}

@media (min-width: 1200px) {
	.cs-datos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

a:focus-visible,
button:focus-visible,
.button:focus-visible {
	outline: 2px solid var(--ocaso);
	outline-offset: 2px;
}