/* ==========================================================================
   NOGAL TH: paneles
   ========================================================================== */

:root {
	--nogal-bg: #efefef;
	--nogal-line: #000;
	--nogal-gap: 2px;
	--nogal-tab: 32px;
	--nogal-radius: 16px;
	--nogal-tab-font: 20px;
	--nogal-tab-pad: 20px;

	/* Cabecera con blur al hacer scroll */
	--nogal-blur: 14px;
	--nogal-fade: 110px; /* largo total del degradado */
	--nogal-bar-bg: transparent;

	/* --nogal-left y --nogal-right los define el <style id="nogal-vars"> de PHP.
	   NO se declaran aquí: este archivo se carga después y pisaría su valor.
	   El 0 de respaldo solo se usa en páginas que no están en el menú. */

	/* Espacio que ocupan las pestañas a cada lado */
	--nogal-inset-left:  calc(var(--nogal-left, 0)  * (var(--nogal-tab) + var(--nogal-gap)) + var(--nogal-gap));
	--nogal-inset-right: calc(var(--nogal-right, 0) * (var(--nogal-tab) + var(--nogal-gap)) + var(--nogal-gap));

	/* Posición del título de página respecto al logo */
	/* (valores de respaldo: el JS los recalcula a partir del logo) */
	--nogal-label-x: 180px;
	--nogal-label-y: 35px;
}

/* ==========================================================================
   Maquetación: todo el sitio se calcula sobre el hueco, no sobre la ventana
   ========================================================================== */

/* El body no reserva espacio: lo hace el contenedor de Salient */
body {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Salient envuelve todo (cabecera, contenido, footer) en .ocm-effect-wrap */
.ocm-effect-wrap {
	margin-left:  var(--nogal-inset-left)  !important;
	margin-right: var(--nogal-inset-right) !important;
	overflow-x: clip;
}

/* La cabecera es position: fixed e ignora los márgenes: se encaja a mano */
#header-outer,
#header-secondary-outer {
	left:  var(--nogal-inset-left)  !important;
	right: var(--nogal-inset-right) !important;
	width: auto !important;
}

/* Filas que Salient/WPBakery estiran por JS al ancho de la ventana */
.vc_row[data-vc-full-width],
.full-width-section,
.full-width-content {
	left: 0 !important;
	width: auto !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ==========================================================================
   Cabecera con fondo translúcido y blur al hacer scroll
   (la clase nogal-scrolled la pone el JS en el <body>)
   ========================================================================== */
/* El blur vive en una capa interna, detrás del logo: así la máscara de
   degradado difumina solo el fondo y no el logo ni el menú. */
#header-outer::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	/* Sobresale un 60 % del degradado por debajo de la cabecera;
	   el 40 % restante empieza ya dentro de ella. */
	height: calc(100% + var(--nogal-fade) * .6);
	background: var(--nogal-bar-bg);
	-webkit-backdrop-filter: blur(var(--nogal-blur));
	backdrop-filter: blur(var(--nogal-blur));
	/* Degradado con varios tramos: transición suave, sin corte perceptible */
	--nogal-mask: linear-gradient(to bottom,
		#000 calc(100% - var(--nogal-fade)),
		rgba(0, 0, 0, .92) calc(100% - var(--nogal-fade) * .82),
		rgba(0, 0, 0, .70) calc(100% - var(--nogal-fade) * .60),
		rgba(0, 0, 0, .42) calc(100% - var(--nogal-fade) * .40),
		rgba(0, 0, 0, .18) calc(100% - var(--nogal-fade) * .20),
		transparent 100%);
	-webkit-mask-image: var(--nogal-mask);
	mask-image: var(--nogal-mask);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}
body.nogal-scrolled #header-outer::before { opacity: 1; }

/* La cabecera (logo) también queda por debajo de las pestañas durante la animación */
#header-outer,
#header-secondary-outer {
	z-index: 9988 !important;
}
/* Navegadores sin backdrop-filter: fondo casi opaco */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	#header-outer::before { background: rgba(239, 239, 239, .92); }
}

/* ==========================================================================
   Marco y pestañas
   ========================================================================== */

/* Capa fija con marco y pestañas */
.nogal-rails {
	position: fixed;
	inset: 0;
	z-index: 9990;
	overflow: hidden;
	pointer-events: none;
}
body.admin-bar .nogal-rails { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .nogal-rails { top: 46px; }
}

.nogal-rails__list {
	display: flex;
	gap: var(--nogal-gap);
	height: 100%;
	margin: 0;
	padding: var(--nogal-gap);
	list-style: none;
}

.nogal-rails__list > li {
	position: relative;
	z-index: 2;
	flex: 0 0 var(--nogal-tab);
	min-width: 0;
	margin: 0;
	list-style: none;
	background: var(--nogal-bg);
	border-radius: var(--nogal-radius);
}

/* Panel activo: hueco transparente con marco negro alrededor */
.nogal-rails__list > li.current-menu-item {
	z-index: 1;
	flex: 1 1 auto;
	background: transparent;
	box-shadow: 0 0 0 100vmax var(--nogal-line);
}

/* Pestañas: toda la superficie clicable, texto vertical arriba y centrado */
.nogal-rails__list > li:not(.current-menu-item) > a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	height: 100%;
	padding-top: var(--nogal-tab-pad);
	writing-mode: vertical-rl;
	font-size: var(--nogal-tab-font);
	line-height: 1;
	color: #000;
	text-decoration: none;
	pointer-events: auto;
}
.nogal-rails__list > li:not(.current-menu-item) > a::before { content: "("; content: "(" / ""; }
.nogal-rails__list > li:not(.current-menu-item) > a::after  { content: ")"; content: ")" / ""; }
.nogal-rails__list a:focus-visible { outline: 2px solid #000; outline-offset: -6px; }

.nogal-rails__list > li > a,
.nogal-current,
a.nogal-contact {
	font-family: var(--font-serif, "Spectral", Georgia, serif);
}

/* Enlace de la página activa: invisible, pero accesible para lectores de pantalla */
.nogal-rails__list > li.current-menu-item > a {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	pointer-events: none;
}

/* Título de la página activa, junto al logo (el JS lo alinea con el logo) */
.nogal-current {
	position: fixed;
	z-index: 9989; /* igual que el botón: por debajo de las pestañas */
	top: var(--nogal-label-y);
	left: calc(var(--nogal-inset-left) + var(--nogal-label-x));
	font-size: 22px;
	line-height: 1;
	color: #000;
	white-space: nowrap;
	pointer-events: none;
}
.nogal-current::before { content: "("; }
.nogal-current::after  { content: ")"; }

/* Sobre una franja oscura, el título se aclara (igual que el logo) */
.nogal-current { transition: color .25s ease; }
body.nogal-on-dark .nogal-current { color: var(--nogal-label-on-dark, #FFFFFF); }
body.admin-bar .nogal-current { margin-top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .nogal-current { margin-top: 46px; }
}

/* ==========================================================================
   Botón Contact: fijo arriba a la derecha del hueco, también al hacer scroll
   ========================================================================== */
a.nogal-contact {
	position: fixed;
	z-index: 9989; /* por debajo de las pestañas (9990): el panel en movimiento lo tapa */
	top: 36px;
	right: calc(var(--nogal-inset-right) + 40px);
	display: inline-block;
	padding: 10px 12px;
	font-size: 18px;
	line-height: 1;
	color: #FFFFFF;
	background-color: #6B7A87;
	border-radius: 30px;
	text-decoration: none;
	white-space: nowrap;
	pointer-events: auto;
	transition: opacity .2s ease;
}
a.nogal-contact::before { content: "("; content: "(" / ""; }
a.nogal-contact::after  { content: ")"; content: ")" / ""; }
a.nogal-contact:visited,
a.nogal-contact:hover,
a.nogal-contact:focus { color: #FFFFFF; text-decoration: none; }
a.nogal-contact:hover { opacity: .85; }
a.nogal-contact:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
body.admin-bar a.nogal-contact { top: calc(36px + 32px); }
@media (max-width: 782px) {
	body.admin-bar a.nogal-contact { top: calc(36px + 46px); }
}

/* ==========================================================================
   Our story: dos vetas que se separan hacia los lados con el scroll
   En WPBakery: clase "s-story" en la sección y "s-story__text" en el texto.
   El JS (nogal-panels.js) va moviendo --p de 0 a 1 con el scroll.
   ========================================================================== */
.s-story {
	--p: 0;        /* 0 = vetas juntas, 1 = separadas del todo (lo mueve el JS) */
	--s-in: 28%;   /* posición al llegar: más bajo = más pegadas al texto */
	--s-out: 60%;  /* posición final: más alto = más separadas */
	--s-vein: url("https://nogalth.com/wp-content/uploads/2026/10/recurso-home-nogal-th.webp");
	position: relative;
	min-height: 100svh;
	overflow: visible !important;  /* que las vetas lleguen hasta el marco */
}

/* Salient usa estos pseudo-elementos para limpiar flotados: hay que forzarlos */
.s-story::before,
.s-story::after {
	content: "";
	display: block !important;
	position: absolute;
	top: 0;
	height: 100% !important;
	width: 60%;
	z-index: 2;
	background: var(--s-vein) no-repeat right center / contain;
	pointer-events: none;
	will-change: transform;
}
.s-story::before {
	left: 0;
	transform: translateX(calc(-1 * (var(--s-in) + (var(--s-out) - var(--s-in)) * var(--p))));
}
.s-story::after {
	right: 0;
	transform: translateX(calc(var(--s-in) + (var(--s-out) - var(--s-in)) * var(--p))) scaleX(-1);
}

/* El texto, por encima de las vetas */
.s-story .s-story__text {
	position: relative;
	z-index: 3;
}

@media (max-width: 999px) {
	.s-story::before,
	.s-story::after { width: 80%; opacity: .5; }
}


/* ---- Home · Pasos: fila recta que se desplaza en horizontal con el scroll ---- */
.s-steps,
.s-steps.nectar-overflow-hidden { overflow: visible !important; }

.s-steps {
	--ay: 52svh;                                  /* altura de la línea y del centro de las fotos */
	--w: min(calc(26 * var(--u, 1vw)), 360px);    /* ancho de cada paso */
	--pitch: calc(36 * var(--u, 1vw));            /* distancia entre pasos */
}

.s-steps > .row_col_wrap_12 > .wpb_column { position: relative; }
.s-steps > .row_col_wrap_12 > .wpb_column > .vc_column-inner {
	width: 100% !important;
	justify-content: flex-start !important;
}
.s-steps .s-step .img-with-aniamtion-wrap { margin-bottom: 26px !important; }

/* Escenario: lo coloca el JS (absolute arriba, fixed durante el recorrido, absolute abajo) */
.s-steps > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100svh;
	min-height: 100svh !important;
	max-height: 100svh;
	overflow: hidden;
}

.s-steps {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.s-steps > .row_col_wrap_12 > .wpb_column > .vc_column-inner {
	padding: 0 !important;
}

/* Tramo de línea que une cada paso con el siguiente (sin cruzar las fotos) */
.s-steps .s-step { overflow: visible !important; }
.s-steps .s-step::after {
	content: "";
	display: block !important;
	position: absolute;
	top: var(--cy, 140px);
	left: calc(100%);
	width: calc(var(--pitch) - var(--w) - 0px);
	height: 0 !important;
	border-top: 1px dotted #555;
	pointer-events: none;
}
.s-steps .s-step:last-child::after { display: none !important; }

/* Título */
.s-steps > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper > *:not(.s-step) {
	position: absolute;
	z-index: 2;
	top: 12svh;
	left: 0;
	width: 100%;
}

/* Cada paso se desplaza en horizontal; --cy (lo mide el JS) es la distancia
   del borde superior del paso al centro de su foto */
.s-steps .s-step {
	position: absolute !important;
	z-index: 1;
	top: calc(var(--ay) - var(--cy, 140px));
	left: 50%;
	width: var(--w);
	margin: 0 0 0 calc(var(--w) / -2) !important;
	transform: translate3d(calc(var(--t, 0) * var(--pitch)), 0, 0);
	opacity: var(--o, 0);
	will-change: transform, opacity;
}

/* Fotos cuadradas */
.s-steps .s-step img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}



/* Móvil: pasos más grandes y más juntos, el mismo efecto */
@media (max-width: 999px) {
	.s-steps {
		--ay: 42svh;
		--w: calc(56 * var(--u, 1vw));
		--pitch: calc(64 * var(--u, 1vw));
	}
}

/* Movimiento reducido: lista normal */
@media (prefers-reduced-motion: reduce) {
	.s-steps > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper {
		position: static;
		height: auto;
		overflow: visible;
	}
	.s-steps > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper::before { display: none !important; }
	.s-steps > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper > *:not(.s-step),
	.s-steps .s-step {
		position: static !important;
		width: auto;
		margin: 0 0 48px !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

/* ---- Home · Proyectos: carrusel de 3 fotos con texto sincronizado ---- */
.s-proj__media img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }

.s-proj__ctrl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 14px;
	font-family: var(--font-sans, "Inter Tight", sans-serif);
	font-size: 14px;
}
.s-proj__ctrl button {
	padding: 0;
	font: inherit;
	font-size: 22px;
	line-height: 1;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

@keyframes s-proj-fade { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 1000px) {
	.s-proj--on .s-proj__media > .vc_column-inner > .wpb_wrapper > *:not(.s-proj__ctrl):not(.is-active),
	.s-proj--on .s-proj__text > .vc_column-inner > .wpb_wrapper > *:not(.is-active) { display: none; }

	.s-proj--on .s-proj__media > .vc_column-inner > .wpb_wrapper > .is-active,
	.s-proj--on .s-proj__text > .vc_column-inner > .wpb_wrapper > .is-active { animation: s-proj-fade .4s ease; }

	.s-proj--on .s-proj__media > .vc_column-inner > .wpb_wrapper > .img-with-aniamtion-wrap { cursor: pointer; }
}
@media (max-width: 999px) { .s-proj__ctrl { display: none; } }
@media (prefers-reduced-motion: reduce) {
	.s-proj--on .is-active { animation: none !important; }
}

/* Archive · mini carrusel */
.arc-car .arc-car__stage {
	position: relative;
	aspect-ratio: 4 / 5;           /* cambia a 1 / 1 si quieres cuadradas */
	overflow: hidden;
	cursor: none;                  /* el cursor lo hace la etiqueta "Drag" */
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	margin-bottom: 26px;
}
.arc-car .arc-car__stage .img-with-aniamtion-wrap {
	position: absolute !important;
	inset: 0;
	margin: 0 !important;
	transition: transform .55s cubic-bezier(.65, 0, .35, 1);
	will-change: transform;
}
.arc-car .arc-car__stage.is-drag .img-with-aniamtion-wrap { transition: none; }
.arc-car .arc-car__stage .img-with-aniamtion-wrap .inner,
.arc-car .arc-car__stage .img-with-aniamtion-wrap .hover-wrap { height: 100%; }
.arc-car .arc-car__stage img {
	width: 100%; height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	pointer-events: none;
}

.arc-car__dots {
	position: absolute; left: 0; right: 0; bottom: 14px;
	z-index: 3;
	display: flex; justify-content: center; gap: 8px;
	cursor: default;
}
.arc-car__dots button {
	width: 9px; height: 9px; padding: 0;
	border-radius: 50%;
	border: 1px solid #fff;
	background: transparent;
	cursor: pointer;
	transition: background .25s;
}
.arc-car__dots button.is-active { background: #fff; }

/* Etiqueta que hace de cursor */
.arc-drag {
	position: fixed; top: 0; left: 0; z-index: 9999;
	translate: -50% -50%;
	padding: 5px 11px;
	background: #1a2340;           /* ajusta al azul/color de la web */
	color: #fff;
	border-radius:20px;
	font-size: 12px; letter-spacing: .04em;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease;
}
.arc-drag.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.arc-car .arc-car__stage .img-with-aniamtion-wrap { transition: none; }
}

/* Archive · pestañas nativas de Salient (estilo material) */
body .tabbed[data-style*="material"] .wpb_tabs_nav {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 18px;
	margin: 0 0 56px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}
body .tabbed[data-style*="material"] .wpb_tabs_nav::before,
body .tabbed[data-style*="material"] .wpb_tabs_nav::after { display: none !important; }
body .tabbed[data-style*="material"]::before,
body .tabbed[data-style*="material"]::after { border: 0 !important; background: none !important; }

body .tabbed[data-style*="material"] .wpb_tabs_nav li,
body .tabbed[data-style*="material"] .wpb_tabs_nav li:hover,
body .tabbed[data-style*="material"] .wpb_tabs_nav li.active-tab {
	float: none !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

body .tabbed[data-style*="material"] .wpb_tabs_nav li > a {
	display: inline-block !important;
	padding: 4px 11px !important;
	border: 0 !important;
	border-radius: 20px !important;
	background: transparent !important;
	color: #000 !important;
	font-size: 13px !important;
	line-height: 1.25 !important;
	font-family: 'Inter Tight' !important;
	font-weight: 500 !important;	
	letter-spacing: 0;
	text-transform: uppercase;
	box-shadow: none !important;
	transition: background .25s ease, color .25s ease, opacity .25s ease;
	
}
body .tabbed[data-style*="material"] .wpb_tabs_nav li > a::before,
body .tabbed[data-style*="material"] .wpb_tabs_nav li > a::after { display: none !important; }
body .tabbed[data-style*="material"] .wpb_tabs_nav li:hover > a { opacity: .55; }

body .tabbed[data-style*="material"] .wpb_tabs_nav li.active-tab > a,
body .tabbed[data-style*="material"] .wpb_tabs_nav li > a.active-tab {
	background: transparent;   /* color del botón Contact */
	color: #000000 !important;
	border-radius: 0px !important;
	opacity: 1 !important;
}

body .tabbed[data-style*="material"] .wpb_tabs_nav li > a.active-tab::before,
body .tabbed[data-style*="material"] .wpb_tabs_nav li > a.active-tab::after {
	display: inline !important;
	position: static !important;
	width: auto !important; height: auto !important;
	background: none !important;
	transform: none !important; opacity: 1 !important;
}
body .tabbed[data-style*="material"] .wpb_tabs_nav li > a.active-tab::before { content: "(" !important; }
body .tabbed[data-style*="material"] .wpb_tabs_nav li > a.active-tab::after  { content: ")" !important; }

@media (max-width: 599px) {
	body .tabbed[data-style*="material"] .wpb_tabs_nav { gap: 6px 10px; margin-bottom: 36px !important; }
	body .tabbed[data-style*="material"] .wpb_tabs_nav li > a { font-size: 12px !important; padding: 4px 9px !important; }
}
	
/* ==========================================================================
   Services
   ========================================================================== */

/* Filas a pantalla completa, sin márgenes laterales */
.s-svc3.wpb_row,
.s-svc3-d.wpb_row {
	margin-left: -30px !important;
	margin-right: -30px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Estados */
html.svc3-js .s-svc3-d:not(.is-open) { display: none !important; }
.s-svc3.is-hidden { display: none !important; }
.s-svc3 .wpb_column[role="button"] { cursor: pointer; }
.s-svc3 .wpb_column:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

/* Columna de miniaturas: alineada abajo, con "Back to services" encima de la primera */
.svc-thumbs {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 24px;
	width: 100%;
	max-width: 170px;
	min-height: 100svh;
	margin: 0 32px 0 auto;      /* margen derecho */
	padding-bottom: 32px;       /* alinea la base con la del texto; ajusta este valor */
}
.svc-back {
	align-self: flex-start;
	margin-bottom: -10px;       /* lo acerca a la primera miniatura */
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: #000 !important;
	font-family: 'Inter Tight';
	font-weight: 500;
	font-size: 13px !important;
	letter-spacing: 0;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity .25s;
}
.svc-back:hover { opacity: .55; }

.svc-thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: 0;
	background-color: #ccc;
	background-size: cover;
	background-position: center;
	cursor: pointer;
	overflow: hidden;
}
.svc-thumb::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.35), transparent 55%);
}
.svc-thumb span {
	position: absolute; left: 10px; bottom: 10px; z-index: 1;
	display: block;
	color: #fff;
	font-size: 13px;
	line-height: 1.2;
	text-align: left;
}
.svc-thumb:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* Pastillas (bloque de texto con una lista y la clase svc-pills) */
.svc-pills ul {
	list-style: none !important;
	margin: 0 !important; padding: 0 !important;
	display: flex; flex-wrap: wrap; gap: 8px;
}
.svc-thumb {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}

.svc-pills li {
	list-style: none !important;
	margin: 0 !important;
	padding: 5px 12px;
	border-radius: 999px;
	background: #d6d6d0;
	font-size: 12px;
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* Transición de la foto */
::view-transition-group(svc-img) {
	animation-duration: .6s;
	animation-timing-function: cubic-bezier(.65, 0, .35, 1);
}
::view-transition-old(svc-img),
::view-transition-new(svc-img) {
	height: 100%;
	object-fit: cover;
	overflow: clip;
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .35s; }

/* Móvil */
@media (max-width: 999px) {
	.svc-thumbs {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		min-height: 0;
		max-width: none;
		margin: 24px 0 0;
		padding-bottom: 0;
	}
	.svc-thumb { flex: 1 1 0; min-width: 0; }
	.svc-back { order: -1; flex-basis: 100%; margin-bottom: 0; }
}

/* ==========================================================================
   WhatsApp / Instagram (junto a Contact) y menú móvil
   ========================================================================== */
.nogal-social {
	position: fixed;
	z-index: 9989;
	display: flex;
	gap: 12px;
	transform: translateY(-50%);
	font-size: 15px;
	line-height: 1;
	opacity: 0;
	transition: opacity .2s ease, color .25s ease;
}
.nogal-social.is-ready { opacity: 1; }
.nogal-social a {
	color: #000;
	letter-spacing: .04em;
	text-decoration: none;
	pointer-events: auto;
}
.nogal-social a:hover { text-decoration: underline; text-underline-offset: 3px; }
body.nogal-on-dark .nogal-social a { color: #fff; }

/* El botón del menú solo existe en móvil */
.nogal-menu-btn { display: none; }

@media (max-width: 782px) {
	:root {
		--nogal-bar-h: 46px;
		--nogal-inset-left: var(--nogal-gap);
		--nogal-inset-right: var(--nogal-gap);
	}

	/* Cerrado: solo el panel activo, con el hueco por encima de la barra */
	.nogal-rails__list {
		padding-bottom: calc(var(--nogal-bar-h) + var(--nogal-gap) * 2);
	}
	.nogal-rails__list > li:not(.current-menu-item) { display: none; }
	.ocm-effect-wrap {
		margin-bottom: calc(var(--nogal-bar-h) + var(--nogal-gap) * 2) !important;
	}

	/* Cabecera: sin título de página (el menú ya dice dónde estás) */
	.nogal-current { display: none; }
	a.nogal-contact {
		top: 26px;
		right: 14px;
		padding: 8px 11px;
		font-size: 16px;
	}
	.nogal-social { font-size: 14px; }

	/* Barra inferior (MENU) / (CLOSE) */
	.nogal-menu-btn {
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
		position: fixed;
		z-index: 9992;
		left: var(--nogal-gap);
		right: var(--nogal-gap);
		bottom: var(--nogal-gap);
		height: var(--nogal-bar-h);
		padding: 0 !important;
		border: 0 !important;
		border-radius: var(--nogal-radius) !important;
		background: var(--nogal-bg) !important;
		box-shadow: none !important;
		color: #000 !important;
		font: inherit;
		font-size: 20px;
		line-height: 1;
		text-transform: uppercase;
		letter-spacing: .02em;
		cursor: pointer;
	}
	.nogal-menu-btn__t::before { content: "("; }
	.nogal-menu-btn__t::after  { content: ")"; }
	.nogal-menu-btn svg { width: 22px; height: 14px; }
	.nogal-menu-btn .i-close { display: none; width: 18px; height: 18px; }
	body.nogal-menu-open .nogal-menu-btn .i-menu  { display: none; }
	body.nogal-menu-open .nogal-menu-btn .i-close { display: block; }

	/* Abierto: los paneles se apilan a pantalla completa */
	body.nogal-menu-open { overflow: hidden; }
	body.nogal-menu-open .nogal-rails { pointer-events: auto; background: var(--nogal-line); }
	body.nogal-menu-open .nogal-rails__list { flex-direction: column; }
	body.nogal-menu-open .nogal-rails__list > li {
		display: block !important;
		flex: 1 1 0;
		box-shadow: none;
		background: var(--nogal-bg);
	}
	body.nogal-menu-open .nogal-rails__list > li > a {
		position: static !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding: 0 !important;
		overflow: visible !important;
		clip-path: none !important;
		writing-mode: horizontal-tb !important;
		font-size: 17px;
		letter-spacing: .04em;
		text-transform: uppercase;
		white-space: nowrap;
		color: #000;
		pointer-events: auto !important;
	}
	body.nogal-menu-open .nogal-rails__list > li > a::before { content: "("; }
	body.nogal-menu-open .nogal-rails__list > li > a::after  { content: ")"; }
}

/* ==========================================================================
   Acordeón horizontal (fila con clase s-acc; la activa el JS)
   ========================================================================== */
.s-acc--on > .row_col_wrap_12 {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	align-items: stretch;
}
.s-acc--on > .row_col_wrap_12 > .wpb_column {
	position: relative;
	flex: 1 1 0;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
	float: none !important;
	overflow: hidden;
	cursor: pointer;
	transition: flex-grow .65s cubic-bezier(.65, 0, .35, 1);
}
.s-acc--on > .row_col_wrap_12 > .wpb_column.is-open { flex-grow: 5; cursor: default; }
.s-acc--on > .row_col_wrap_12 > .wpb_column + .wpb_column {
	border-left: 1px solid rgba(0, 0, 0, .45);
}
.s-acc--on .wpb_column:focus-visible { outline: 2px solid #000; outline-offset: -4px; }

.s-acc--on .wpb_column > .vc_column-inner { height: 100%; padding: 0 !important; }
.s-acc--on .wpb_column > .vc_column-inner > .wpb_wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	gap: 18px;
	height: clamp(420px, 60svh, 640px);      /* alto fijo: no crece al abrir */
	min-height: 0 !important;
	padding: 64px 0 20px;
	overflow: hidden;
}
.s-acc--on .wpb_column.is-open > .vc_column-inner > .wpb_wrapper {
	align-items: flex-start;
	padding: 64px 40px 20px;
}

/* Número, título y descripción */
.s-acc__n, .s-acc__t, .s-acc__d { margin: 0 !important; }
.s-acc__t { order: 1; }
.s-acc__d { order: 2; display: none; }
.s-acc__n { order: 3; }

.s-acc__n, .s-acc__t {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
}
.s-acc__n, .s-acc__n * { font-size: 12px !important; line-height: 1 !important; }
.s-acc__t, .s-acc__t * {
	font-family: "Inter Tight", var(--font-sans, system-ui), sans-serif !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
}
.s-acc .is-open .s-acc__t { writing-mode: horizontal-tb; transform: none; }

/* Texto de ancho fijo: no se recoloca mientras la columna se abre, la columna lo va revelando */
.s-acc .is-open .s-acc__d {
	display: block;
	flex: none;
	width: var(--acc-w, 520px);
	max-width: none;
	animation: accIn .45s ease .2s both;
}
.s-acc__d, .s-acc__d * {
	font-family: var(--font-serif, "Spectral", Georgia, serif);
	font-size: clamp(20px, 1.5vw, 30px) !important;
	line-height: 1.22 !important;
}
@keyframes accIn { from { opacity: 0; } to { opacity: 1; } }

/* El "+" de arriba */
.s-acc__plus {
	position: absolute;
	top: 28px; left: 50%;
	width: 20px; height: 20px;
	margin-left: -10px;
	color: #000000;
	opacity: .8;
	transition: opacity .3s ease, transform .3s ease;
	pointer-events: none;
}
.s-acc__plus::before, .s-acc__plus::after {
	content: "";
	position: absolute;
	background: currentColor;
}
.s-acc__plus::before { left: 0; right: 0; top: 50%; height: 1px; }
.s-acc__plus::after  { top: 0; bottom: 0; left: 50%; width: 1px; }
.s-acc .is-open .s-acc__plus { opacity: 0; }
@media (hover: hover) {
	.s-acc--on .wpb_column:not(.is-open):hover .s-acc__plus { opacity: 1; transform: rotate(90deg); }
}

/* Tablet y móvil: acordeón vertical */
@media (max-width: 999px) {
	.s-acc--on > .row_col_wrap_12 { flex-direction: column !important; }
	.s-acc--on > .row_col_wrap_12 > .wpb_column {
		flex: none;
		transition: none;
	}
	.s-acc--on > .row_col_wrap_12 > .wpb_column + .wpb_column {
		border-left: 0;
		border-top: 1px solid rgba(0, 0, 0, .45);
	}
	.s-acc--on .wpb_column > .vc_column-inner > .wpb_wrapper,
	.s-acc--on .wpb_column.is-open > .vc_column-inner > .wpb_wrapper {
		display: grid;
		grid-template-columns: 44px 1fr 24px;
		align-items: center;
		gap: 0 12px;
		height: auto;
		min-height: 0 !important;
		padding: 18px 0;
		overflow: visible;
	}
	.s-acc__n { grid-column: 1; grid-row: 1; writing-mode: horizontal-tb; transform: none; }
	.s-acc__t { grid-column: 2; grid-row: 1; writing-mode: horizontal-tb; transform: none; white-space: normal; }
	.s-acc__d { grid-column: 2 / 4; grid-row: 2; }
	.s-acc .is-open .s-acc__d { width: auto; padding-top: 12px; }
	.s-acc__plus {
		position: static;
		grid-column: 3; grid-row: 1;
		margin: 0;
	}
	.s-acc .is-open .s-acc__plus { opacity: .8; transform: rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
	.s-acc--on > .row_col_wrap_12 > .wpb_column { transition: none; }
	.s-acc .is-open .s-acc__d { animation: none; }
}

/* Sin animación mientras el JS mide */
.s-acc--still .wpb_column { transition: none !important; }

/* --------------------------------------------------------------------------
   11. Ad hoc: imagen fija + pasos
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
	.s-adhoc--on .row_col_wrap_12 { align-items: stretch !important; }

	/* La columna de imágenes se queda fija */
	.s-adhoc--on .adhoc-media > .vc_column-inner {
		position: sticky;
		top: 96px;
	}

	/* Las 3 imágenes ocupan el mismo sitio y se cruzan en fundido */
	.s-adhoc--on .adhoc-media > .vc_column-inner > .wpb_wrapper { display: grid; }
	.s-adhoc--on .adhoc-media > .vc_column-inner > .wpb_wrapper > .wpb_row {
		grid-area: 1 / 1;
		opacity: 0;
		pointer-events: none;
		transition: opacity .6s ease;
	}
	.s-adhoc--on .adhoc-media > .vc_column-inner > .wpb_wrapper > .wpb_row.is-active {
		opacity: 1;
		pointer-events: auto;
	}

	/* La imagen cabe siempre en pantalla */
	.s-adhoc--on .adhoc-media .img-with-aniamtion-wrap { display: block; }
	.s-adhoc--on .adhoc-media img {
		width: 100%;
		aspect-ratio: 4 / 5;
		max-height: calc(100svh - 200px);
		object-fit: cover;
	}

	/* Cada paso tiene recorrido para que se note el cambio */
	.s-adhoc--on .adhoc-step {
		padding: 20svh 0;
		opacity: .3;
		transition: opacity .5s ease;
	}
	.s-adhoc--on .adhoc-step.is-active { opacity: 1; }
}