/*
 * RAS · Header
 *
 * Tokens tomados del sitio en produccion (variables globales de Elementor):
 * fondo #171719, texto #A7A7A7, blanco #FFFFFF, dorado #E1B261 / #CBA058,
 * hairlines #FFFFFF14. Tipografia Archivo, con el interletrado 0.14em que el
 * sitio ya usa en sus textos de acento.
 *
 * POR QUE TODOS LOS SELECTORES VAN PREFIJADOS
 *
 * El kit de Elementor del sitio (post-8.css) declara:
 *
 *     .elementor-kit-8 a            { color: #E1B261 }
 *     .elementor-kit-8 button:hover { background: #E1B261; border-radius: 50% }
 *
 * Esos selectores pesan (0,1,1) y le ganan a un `.ras-nav__link` pelado, que
 * pesa (0,1,0): el menu salia dorado en vez de blanco y la hamburguesa se
 * convertia en un ovalo dorado al pasarle el mouse. Prefijando con `.ras-header`
 * o `.ras-overlay` cada regla pasa a (0,2,0) y gana sin necesidad de un solo
 * !important. Regla para el que edite esto: ningun selector de este archivo
 * arranca con una clase suelta.
 */

.ras-header,
.ras-overlay {
	--ras-negro: #171719;
	--ras-negro-hondo: #141416;
	--ras-carbon: #1a1a1c;
	--ras-blanco: #ffffff;
	--ras-texto: #a7a7a7;
	--ras-oro: #e1b261;
	--ras-oro-hondo: #cba058;
	--ras-linea: rgba(255, 255, 255, 0.08);
	--ras-linea-viva: rgba(255, 255, 255, 0.24);

	--ras-alto: 88px;
	--ras-alto-min: 66px;
	--ras-ancho: 1140px;
	--ras-borde: 20px;
	--ras-boton: 46px;

	--ras-fuente: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ras-curva: cubic-bezier(0.22, 1, 0.36, 1);
	--ras-curva-corta: cubic-bezier(0.4, 0, 0.2, 1);

	font-family: var(--ras-fuente);
	box-sizing: border-box;
}

.ras-header *,
.ras-header *::before,
.ras-header *::after,
.ras-overlay *,
.ras-overlay *::before,
.ras-overlay *::after {
	box-sizing: border-box;
}

/* El header de Hello Elementor deja de dibujarse: lo reemplaza este. */
body #site-header.site-header {
	display: none !important;
}

/* ---------------------------------------------------------------- barra --- */

.ras-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	height: var(--ras-alto);
	background: transparent;
	border-bottom: 1px solid transparent;
	transition:
		height 0.45s var(--ras-curva),
		transform 0.45s var(--ras-curva),
		background-color 0.35s var(--ras-curva-corta),
		border-color 0.35s var(--ras-curva-corta),
		backdrop-filter 0.35s var(--ras-curva-corta);
}

/* Ya scrolleado: la barra se compacta y aparece el vidrio esmerilado. */
.ras-header.is-scrolled {
	height: var(--ras-alto-min);
	background-color: rgba(20, 20, 22, 0.72);
	border-bottom-color: var(--ras-linea);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
}

/* Bajando la pagina la barra se va; subiendo vuelve. */
.ras-header.is-oculto {
	transform: translateY(-101%);
}

/* Con el menu abierto nunca se esconde ni se pinta: el velo ya es el fondo. */
.ras-header.is-abierto {
	transform: none;
	background-color: transparent;
	border-bottom-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.ras-header .ras-header__inner {
	width: 100%;
	max-width: calc(var(--ras-ancho) + var(--ras-borde) * 2);
	margin: 0 auto;
	padding: 0 var(--ras-borde);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* --------------------------------------------------------------- marca --- */

.ras-header .ras-header__brand {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	text-decoration: none;
	border: 0;
	box-shadow: none;
	transition: opacity 0.35s var(--ras-curva-corta);
}

.ras-header .ras-header__brand img {
	display: block;
	width: auto;
	height: 46px;
	max-width: none;
	border-radius: 0;
	transition: height 0.45s var(--ras-curva), opacity 0.35s var(--ras-curva-corta);
}

.ras-header.is-scrolled .ras-header__brand img {
	height: 34px;
}

.ras-header .ras-header__brand:hover img,
.ras-header .ras-header__brand:focus-visible img {
	opacity: 0.72;
}

.ras-header .ras-header__brand:focus-visible {
	outline: 1px solid var(--ras-oro);
	outline-offset: 8px;
}

/* ------------------------------------------------------------ hamburguesa - */

/*
 * Cuadrado con las esquinas apenas redondeadas, fondo oscuro sutil y las tres
 * lineas blancas centradas. Los cuatro estados van en la misma regla porque el
 * kit de Elementor pinta `button:hover` de dorado y con border-radius 50%: hay
 * que ganarle en hover, focus y active, no solo en reposo.
 */
.ras-header .ras-burger,
.ras-header .ras-burger:hover,
.ras-header .ras-burger:focus,
.ras-header .ras-burger:focus-visible,
.ras-header .ras-burger:active {
	appearance: none;
	-webkit-appearance: none;
	display: grid;
	place-items: center;
	flex: none;
	width: var(--ras-boton);
	height: var(--ras-boton);
	margin: 0;
	padding: 0;
	border: 1px solid var(--ras-linea);
	border-radius: 7px;
	color: var(--ras-blanco);
	font-family: var(--ras-fuente);
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition:
		background-color 0.3s var(--ras-curva-corta),
		border-color 0.3s var(--ras-curva-corta);
}

.ras-header .ras-burger {
	background-color: rgba(255, 255, 255, 0.05);
}

.ras-header .ras-burger:hover,
.ras-header .ras-burger:focus-visible,
.ras-header .ras-burger:active {
	background-color: rgba(255, 255, 255, 0.11);
	border-color: rgba(255, 255, 255, 0.2);
}

.ras-header .ras-burger:focus-visible {
	outline: 1px solid var(--ras-oro);
	outline-offset: 3px;
}

.ras-header .ras-burger__caja {
	position: relative;
	display: block;
	width: 20px;
	height: 13.5px;
	flex: none;
	pointer-events: none;
}

.ras-header .ras-burger__linea {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background-color: var(--ras-blanco);
	border-radius: 1px;
	transition:
		transform 0.5s var(--ras-curva),
		opacity 0.2s linear;
}

.ras-header .ras-burger__linea:nth-child(1) {
	top: 0;
}

.ras-header .ras-burger__linea:nth-child(2) {
	top: 6px;
}

.ras-header .ras-burger__linea:nth-child(3) {
	top: 12px;
}

/* En hover las lineas se abren un pelo, sin romper la simetria. */
.ras-header .ras-burger:hover .ras-burger__linea:nth-child(1),
.ras-header .ras-burger:focus-visible .ras-burger__linea:nth-child(1) {
	transform: translateY(-1.5px);
}

.ras-header .ras-burger:hover .ras-burger__linea:nth-child(3),
.ras-header .ras-burger:focus-visible .ras-burger__linea:nth-child(3) {
	transform: translateY(1.5px);
}

/* Abierto: las tres lineas se cierran en cruz. */
.ras-header .ras-burger[aria-expanded="true"] .ras-burger__linea:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.ras-header .ras-burger[aria-expanded="true"] .ras-burger__linea:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.2);
}

.ras-header .ras-burger[aria-expanded="true"] .ras-burger__linea:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* ------------------------------------------------------------- overlay --- */

.ras-overlay {
	position: fixed;
	inset: 0;
	z-index: 9980;
	visibility: hidden;
	transition: visibility 0s linear 0.65s;
}

.ras-overlay.is-abierto {
	visibility: visible;
	transition-delay: 0s;
}

/*
 * El velo baja como un telon en vez de aparecer de golpe: el clip-path recorta
 * desde abajo, asi el borde inferior viaja hasta el pie de la pantalla.
 */
.ras-overlay .ras-overlay__velo {
	position: absolute;
	inset: 0;
	background-color: var(--ras-negro-hondo);
	background-image:
		repeating-linear-gradient(
			118deg,
			rgba(255, 255, 255, 0.022) 0 1px,
			transparent 1px 13px
		),
		repeating-linear-gradient(
			62deg,
			rgba(255, 255, 255, 0.016) 0 1px,
			transparent 1px 19px
		),
		radial-gradient(120% 90% at 82% 0%, rgba(225, 178, 97, 0.09), transparent 62%);
	clip-path: inset(0 0 100% 0);
	transition: clip-path 0.65s var(--ras-curva);
}

.ras-overlay.is-abierto .ras-overlay__velo {
	clip-path: inset(0 0 0 0);
}

.ras-overlay .ras-overlay__scroll {
	position: relative;
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.ras-overlay .ras-overlay__inner {
	min-height: 100%;
	width: 100%;
	max-width: calc(var(--ras-ancho) + var(--ras-borde) * 2);
	margin: 0 auto;
	padding: calc(var(--ras-alto) + 40px) var(--ras-borde) 56px;
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
	align-items: center;
	gap: 48px 64px;
}

/* ------------------------------------------------------------------ nav --- */

.ras-overlay .ras-nav__lista,
.ras-overlay .ras-nav__sub,
.ras-overlay .ras-aside__contacto,
.ras-overlay .ras-aside__redes {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ras-overlay .ras-nav__item {
	margin: 0;
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity 0.5s var(--ras-curva-corta),
		transform 0.6s var(--ras-curva);
}

.ras-overlay.is-abierto .ras-nav__item {
	opacity: 1;
	transform: none;
	/* La cascada arranca cuando el telon ya cubrio media pantalla. */
	transition-delay: calc(180ms + var(--i) * 55ms);
}

.ras-overlay .ras-nav__link {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: clamp(14px, 2vw, 26px);
	padding: clamp(10px, 1.4vw, 16px) 0;
	color: var(--ras-blanco);
	text-decoration: none;
	border: 0;
	box-shadow: none;
	transition: color 0.3s var(--ras-curva-corta);
}

.ras-overlay .ras-nav__link:hover,
.ras-overlay .ras-nav__link:focus-visible {
	color: var(--ras-oro);
	text-decoration: none;
}

.ras-overlay .ras-nav__link:focus-visible {
	outline: 1px solid var(--ras-oro);
	outline-offset: 6px;
}

.ras-overlay .ras-nav__num {
	flex: none;
	width: 2.4em;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	color: var(--ras-oro-hondo);
	opacity: 0.55;
	transition: opacity 0.3s var(--ras-curva-corta), transform 0.45s var(--ras-curva);
}

.ras-overlay .ras-nav__link:hover .ras-nav__num,
.ras-overlay .ras-nav__link:focus-visible .ras-nav__num {
	opacity: 1;
	transform: translateX(4px);
}

.ras-overlay .ras-nav__palabra {
	font-size: clamp(2rem, 5.4vw, 3.9rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.015em;
	transition: transform 0.5s var(--ras-curva);
}

.ras-overlay .ras-nav__link:hover .ras-nav__palabra,
.ras-overlay .ras-nav__link:focus-visible .ras-nav__palabra {
	transform: translateX(10px);
}

.ras-overlay .ras-nav__flecha {
	display: inline-flex;
	align-items: center;
	align-self: center;
	width: clamp(20px, 2.4vw, 30px);
	opacity: 0;
	transform: translateX(-14px);
	transition:
		opacity 0.35s var(--ras-curva-corta),
		transform 0.5s var(--ras-curva);
}

.ras-overlay .ras-nav__flecha svg {
	width: 100%;
	height: auto;
	display: block;
}

.ras-overlay .ras-nav__link:hover .ras-nav__flecha,
.ras-overlay .ras-nav__link:focus-visible .ras-nav__flecha {
	opacity: 1;
	transform: translateX(0);
}

/* La regla se dibuja de izquierda a derecha, como una linea de plano. */
.ras-overlay .ras-nav__regla {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--ras-linea);
}

.ras-overlay .ras-nav__regla::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ras-oro);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.55s var(--ras-curva);
}

.ras-overlay .ras-nav__link:hover .ras-nav__regla::after,
.ras-overlay .ras-nav__link:focus-visible .ras-nav__regla::after {
	transform: scaleX(1);
}

/* Pagina actual: el numero queda encendido y la regla, medio dibujada. */
.ras-overlay .ras-nav__item.is-actual .ras-nav__num {
	opacity: 1;
	color: var(--ras-oro);
}

.ras-overlay .ras-nav__item.is-actual .ras-nav__regla::after {
	transform: scaleX(0.14);
}

.ras-overlay .ras-nav__sub {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	padding: 4px 0 12px calc(2.4em + clamp(14px, 2vw, 26px));
}

.ras-overlay .ras-nav__sub a {
	color: var(--ras-texto);
	font-size: 15px;
	text-decoration: none;
	transition: color 0.25s var(--ras-curva-corta);
}

.ras-overlay .ras-nav__sub a:hover,
.ras-overlay .ras-nav__sub a:focus-visible {
	color: var(--ras-blanco);
}

/* ---------------------------------------------------------------- aside --- */

/*
 * La columna derecha se estira contra el menu: el claim arriba, el contacto
 * abajo. Centrada dejaba el cuarto superior derecho vacio.
 */
.ras-overlay .ras-aside {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-left: clamp(0px, 2vw, 32px);
	padding-block: clamp(10px, 1.4vw, 16px);
	border-left: 1px solid var(--ras-linea);
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.6s var(--ras-curva-corta),
		transform 0.7s var(--ras-curva);
}

.ras-overlay.is-abierto .ras-aside {
	opacity: 1;
	transform: none;
	transition-delay: 480ms;
}

.ras-overlay .ras-aside__claim {
	margin: 0 0 28px;
	max-width: 12ch;
	font-size: clamp(1.15rem, 2vw, 1.75rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ras-blanco);
}

.ras-overlay .ras-aside__contacto li + li {
	margin-top: 18px;
}

.ras-overlay .ras-aside__etiqueta {
	display: block;
	margin-bottom: 4px;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ras-oro-hondo);
}

.ras-overlay .ras-aside__contacto a,
.ras-overlay .ras-aside__contacto span:not(.ras-aside__etiqueta) {
	display: inline-block;
	font-size: 16px;
	color: var(--ras-texto);
	text-decoration: none;
	transition: color 0.25s var(--ras-curva-corta);
}

.ras-overlay .ras-aside__contacto a:hover,
.ras-overlay .ras-aside__contacto a:focus-visible {
	color: var(--ras-blanco);
}

.ras-overlay .ras-aside__redes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--ras-linea);
}

.ras-overlay .ras-aside__redes a {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ras-texto);
	text-decoration: none;
	transition: color 0.25s var(--ras-curva-corta);
}

.ras-overlay .ras-aside__redes a:hover,
.ras-overlay .ras-aside__redes a:focus-visible {
	color: var(--ras-oro);
}

/* --------------------------------------------------------------- estado --- */

/* Bloqueo del scroll de fondo mientras el overlay esta abierto. */
body.ras-sin-scroll {
	overflow: hidden;
	padding-right: var(--ras-scrollbar, 0px);
}

/*
 * Los dos elementos fijos siguen midiendo el viewport completo, asi que hay
 * que descontarles la barra de scroll a mano o el logo se corre al abrir.
 */
body.ras-sin-scroll .ras-header,
body.ras-sin-scroll .ras-overlay__scroll {
	padding-right: var(--ras-scrollbar, 0px);
}

/* La barra de admin no puede quedar tapada por el header. */
body.admin-bar .ras-header,
body.admin-bar .ras-overlay {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .ras-header,
	body.admin-bar .ras-overlay {
		top: 46px;
	}
}

/* --------------------------------------------------------------- mobile --- */

@media (max-width: 1024px) {
	.ras-overlay .ras-overlay__inner {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 40px;
	}

	.ras-overlay .ras-aside {
		padding-left: 0;
		padding-block: 28px 0;
		border-left: 0;
		border-top: 1px solid var(--ras-linea);
	}
}

@media (max-width: 767px) {
	.ras-header,
	.ras-overlay {
		--ras-alto: 68px;
		--ras-alto-min: 58px;
		--ras-borde: 18px;
		--ras-boton: 42px;
	}

	.ras-header .ras-header__brand img {
		height: 34px;
	}

	.ras-header.is-scrolled .ras-header__brand img {
		height: 28px;
	}

	.ras-header .ras-burger__caja {
		width: 18px;
	}

	.ras-overlay .ras-overlay__inner {
		padding-top: calc(var(--ras-alto) + 28px);
		padding-bottom: 44px;
	}

	/* "Obras & Servicios" es el item mas largo: manda el techo del clamp. */
	.ras-overlay .ras-nav__palabra {
		font-size: clamp(1.5rem, 7.6vw, 2.4rem);
	}

	.ras-overlay .ras-nav__flecha {
		display: none;
	}

	.ras-overlay .ras-aside__claim {
		font-size: 1.05rem;
	}
}

/* ------------------------------------------------------ menos movimiento --- */

@media (prefers-reduced-motion: reduce) {
	.ras-header,
	.ras-header .ras-header__brand img,
	.ras-header .ras-burger,
	.ras-header .ras-burger__linea,
	.ras-overlay,
	.ras-overlay .ras-overlay__velo,
	.ras-overlay .ras-nav__item,
	.ras-overlay .ras-nav__palabra,
	.ras-overlay .ras-nav__num,
	.ras-overlay .ras-nav__flecha,
	.ras-overlay .ras-nav__regla::after,
	.ras-overlay .ras-aside {
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
	}

	.ras-overlay .ras-overlay__velo {
		clip-path: none;
		opacity: 0;
	}

	.ras-overlay.is-abierto .ras-overlay__velo {
		opacity: 1;
	}
}