/*
Theme Name: Sivalglass
Theme URI: https://sivalglass.com
Description: Tema hijo de Hello Elementor para la web corporativa de Sivalglass. Paleta blanco/negro + turquesa Tahitian Tide; tipografia SFT Schrifted Sans (variable).
Author: Alberto Moreno Murillo
Author URI: https://albertomoreno.dev
Template: hello-elementor
Version: 1.8.10
Text Domain: sivalglass
*/

:root {
  --sg-black: #000000;
  --sg-white: #ffffff;
  --sg-tahitian: #00677f; /* acento turquesa - Pantone 18-4630 TCX */
}

/* ---------- Tipografia de marca: SFT Schrifted Sans (cortes estáticos) ----------
   OJO: NO usar la versión variable — su eje 'slnt' hace que Safari/iOS
   renderice todo inclinado (mismo bug conocido de Inter var). Los cortes
   estáticos no tienen ejes y se ven rectos en todos los navegadores.
   El navegador solo descarga los pesos que la página usa. */
@font-face { font-family: 'Schrifted Sans'; src: url('assets/fonts/SchriftedSans-200.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Schrifted Sans'; src: url('assets/fonts/SchriftedSans-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Schrifted Sans'; src: url('assets/fonts/SchriftedSans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Schrifted Sans'; src: url('assets/fonts/SchriftedSans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Schrifted Sans'; src: url('assets/fonts/SchriftedSans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Schrifted Sans'; src: url('assets/fonts/SchriftedSans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Schrifted Sans'; src: url('assets/fonts/SchriftedSans-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* Sustituye a las familias del kit de Elementor (Montserrat/Inter) sin tocar los iconos */
body,
h1, h2, h3, h4, h5, h6,
p, a, li, blockquote, figcaption, label,
input, textarea, select, button {
  font-family: 'Schrifted Sans', sans-serif !important;
}

/* ---------- Contact Form 7 con estilo de marca ----------
   El formulario 'sg_cf7_id' replica el markup del formulario visual
   .sg-con-form (filas, select, botón); aquí solo va lo específico de CF7:
   los campos llegan envueltos en spans .wpcf7-form-control-wrap. */
.sg-con-form .wpcf7-form-control-wrap { display: block; min-width: 0; }
/* El spinner solo ocupa sitio mientras se envía (si no, deja un hueco de 24px) */
.sg-con-form .wpcf7-spinner { display: none; }
.sg-con-form.submitting .wpcf7-spinner { display: block; margin: 0 auto; }
.sg-con-form input:not([type="submit"]),
.sg-con-form select,
.sg-con-form textarea { width: 100%; box-sizing: border-box; }
/* Label accesible visualmente oculto (no ocupa sitio en el grid de filas) */
.sg-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wpcf7-response-output {
  margin: 16px 0 0 !important;
  padding: 13px 16px !important;
  font: 400 14px 'Schrifted Sans', sans-serif;
  border-radius: 0 !important;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: #00677f !important; color: #00677f; }
.wpcf7-not-valid-tip { font: 400 12px 'Schrifted Sans', sans-serif; color: #d33; margin-top: 5px; }
.wpcf7 .wpcf7-spinner { margin-left: 10px; }

/* ---------- Cabecera "Proyectos / Ver todos" de la home (sobre blanco) ----------
   Antes era la etiqueta sticky del scroll stack; el stack se sustituyó por el
   flujo .sg-pflow (build-home-projects.php) y queda como cabecera normal. */
.sg-pflow-head { background-color: #fff !important; }
.sg-pflow-head h2.elementor-heading-title,
.sg-pflow-head a { color: #000 !important; }
.sg-pflow-head h5.elementor-heading-title,
.sg-pflow-head h6.elementor-heading-title { color: var(--sg-tahitian) !important; }

/* ---------- Página Proyectos: título integrado + meta de las tarjetas ---------- */
.sg-projsel { padding: 176px 52px 84px; }
.sg-projsel__title {
	font: 400 clamp(44px, 7.2vw, 102px)/1.04 'Schrifted Sans', sans-serif;
	text-transform: uppercase;
	letter-spacing: -1px;
	color: #111;
	margin: 0;
}
@media (max-width: 1024px) {
	.sg-projsel { padding: 120px 24px 48px; }
}
/* En escritorio el título es sticky sobre el stack (ref. Halston): las fotos
   pasan por debajo y el texto queda sobre la imagen con el color invertido por
   mix-blend-mode difference (texto blanco XOR fondo → negro sobre el blanco
   inicial, claro sobre las fotos). top -60px: sube un poco antes de fijarse.
   Vive DENTRO de la sección .sg-pstack: se suelta solo al acabar las fotos. */
@media (min-width: 1025px) {
	.elementor-widget.sg-projsel-stick {
		position: sticky !important;
		top: -60px;
		z-index: 10; /* por encima de las tarjetas (z 1-6) */
		pointer-events: none;
		mix-blend-mode: difference;
	}
	@supports (mix-blend-mode: difference) {
		.sg-projsel-stick .sg-projsel__title { color: #fff; }
	}
}
/* Proyectos en FLUJO (ref. Halston, petición cliente): uno debajo del otro,
   sin sticky. El wrapper .sg-pflow sustituye aquí a .sg-pstack, que queda
   solo para la home. Imagen a sangre + chip claro + descripción + metadatos. */
.sg-pflow { background: transparent; }
.sg-pflow > .elementor-container { max-width: 100% !important; padding: 0 !important; }
.sg-pflow > .elementor-container > .elementor-column > .elementor-widget-wrap { padding: 0 !important; }
/* Altura de cada proyecto: el min_height de la sección Elementor legacy es
   inerte — se fuerza aquí sobre el container (mismo patrón que las tarjetas
   de la home en móvil). */
.sg-pflow-card > .elementor-container { max-width: 100% !important; min-height: 74vh; align-items: flex-end; }
@media (max-width: 1024px) {
	.sg-pflow-card > .elementor-container { min-height: 480px; }
}
.sg-pflow-card__body { padding: 0 52px 9vh; }
.sg-pflow-card__chip {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	background: #EFEDEA;
	color: #111;
	font: 500 clamp(18px, 1.8vw, 24px)/1.1 'Schrifted Sans', sans-serif;
	padding: 13px 18px;
}
.sg-pflow-card__chip i { font-style: normal; font-weight: 300; font-size: 1.15em; line-height: 1; }
.sg-pflow-card__desc {
	margin: 24px 0 0;
	font: 400 clamp(19px, 1.9vw, 27px)/1.35 'Schrifted Sans', sans-serif;
	color: #fff;
	max-width: 640px;
}
.sg-pflow-card__meta {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	max-width: 640px;
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .35);
	font: 600 12px/1 'Schrifted Sans', sans-serif;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .8);
}
@media (max-width: 760px) {
	.sg-pflow-card__body { padding: 0 20px 44px; }
}

/* ============================================================
   Secciones al 80% del ancho (petición cliente): clase genérica
   sg-w80 sobre la sección Elementor. La usan la gama de productos
   y las capacidades técnicas de Servicios (build-servicios.php).
   ============================================================ */
@media (min-width: 1025px) {
	.sg-w80 > .elementor-container { max-width: 80vw !important; }
}

/* ============================================================
   FICHA DE PROYECTO (/proyectos/<slug>) — ref. wireframe cliente:
   hero estilo kononenkogroup (nombre grande abajo-izq), datos estilo
   acsono (lista izq + descripción dcha), galería masonry y "siguiente
   proyecto". Generada por _tools/build-proyectos-fichas.php.
   ============================================================ */
/* 1. Hero: imagen de portada + nombre abajo-izquierda */
.sg-pj-hero > .elementor-container { min-height: 88vh; align-items: flex-end; max-width: 100% !important; }
.sg-pj-hero__body { padding: 0 52px 7vh; }
.sg-pj-hero__title {
	font: 300 clamp(44px, 6.5vw, 96px)/1.02 'Schrifted Sans', sans-serif;
	letter-spacing: -2px;
	color: #fff;
	margin: 0;
	max-width: 900px;
}
@media (max-width: 760px) {
	.sg-pj-hero > .elementor-container { min-height: 66vh; }
	.sg-pj-hero__body { padding: 0 20px 44px; }
}

/* 2. Datos: lista etiqueta/valor a la izquierda + descripción a la derecha */
.sg-pj-data {
	display: grid;
	grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
	gap: 48px clamp(48px, 8vw, 140px);
	padding: 84px 52px 72px;
	max-width: 1400px;
	margin: 0 auto;
	box-sizing: border-box;
}
.sg-pj-data__row { display: grid; grid-template-columns: 92px 1fr; gap: 18px; padding: 14px 0; border-top: 1px solid #e6e6e6; }
.sg-pj-data__row:last-child { border-bottom: 1px solid #e6e6e6; }
.sg-pj-data__label { font: 600 11px/1.6 'Schrifted Sans', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #9a9a9a; padding-top: 3px; }
.sg-pj-data__value { font: 400 15px/1.55 'Schrifted Sans', sans-serif; color: #111; }
.sg-pj-data__desc { font: 400 clamp(17px, 1.5vw, 21px)/1.65 'Schrifted Sans', sans-serif; color: #333; max-width: 760px; }
.sg-pj-data__desc p { margin: 0 0 1em; }
.sg-pj-data__desc p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
	.sg-pj-data { grid-template-columns: 1fr; gap: 36px; padding: 56px 20px 44px; }
}

/* 3. Galería masonry: main.js empaqueta cada foto en la columna más corta
   (orden visual izq→dcha, sin huecos). Las columnas CSS quedan solo como
   fallback sin JavaScript; las alturas las fijan los aspect-ratio. */
.sg-pj-gallery { columns: 3 340px; column-gap: 18px; padding: 0 52px 72px; max-width: 1400px; margin: 0 auto; box-sizing: border-box; }
.sg-pj-gallery.is-packed { columns: auto !important; position: relative; }
.sg-pj-gallery figure { margin: 0 0 18px; break-inside: avoid; }
.sg-pj-gallery img { display: block; width: 100%; height: auto; object-fit: cover; }
/* ciclo de 6 proporciones afinado para que el packing equilibre columnas */
.sg-pj-gallery figure:nth-child(6n+1) img { aspect-ratio: 4 / 5; }
.sg-pj-gallery figure:nth-child(6n+2) img { aspect-ratio: 3 / 2; }
.sg-pj-gallery figure:nth-child(6n+3) img { aspect-ratio: 1 / 1; }
.sg-pj-gallery figure:nth-child(6n+4) img { aspect-ratio: 1 / 1; }
.sg-pj-gallery figure:nth-child(6n+5) img { aspect-ratio: 16 / 10; }
.sg-pj-gallery figure:nth-child(6n) img { aspect-ratio: 3 / 2; }
@media (max-width: 760px) {
	.sg-pj-gallery { padding: 0 20px 48px; }
}

/* 4. Siguiente proyecto (ref. kononenko "Next work": miniatura + nombre grande) */
.sg-pj-next { padding: 64px 52px 96px; max-width: 1400px; margin: 0 auto; box-sizing: border-box; border-top: 1px solid #e6e6e6; }
.sg-pj-next__label { font: 600 11px/1 'Schrifted Sans', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #9a9a9a; margin: 0 0 26px; }
.sg-pj-next__link { display: inline-flex; align-items: center; gap: 34px; text-decoration: none; }
.sg-pj-next__thumb { width: 170px; aspect-ratio: 16 / 11; object-fit: cover; display: block; }
.sg-pj-next__name {
	font: 300 clamp(34px, 4.4vw, 62px)/1.05 'Schrifted Sans', sans-serif;
	letter-spacing: -1.5px;
	color: #111;
	transition: color .2s;
}
.sg-pj-next__link:hover .sg-pj-next__name { color: var(--sg-tahitian); }
@media (max-width: 760px) {
	.sg-pj-next { padding: 44px 20px 64px; }
	.sg-pj-next__link { gap: 20px; }
	.sg-pj-next__thumb { width: 110px; }
}

/* El chip del slider ahora enlaza a la ficha */
a.sg-pflow-card__chip { text-decoration: none; transition: background .2s; }
a.sg-pflow-card__chip:hover { background: #fff; }

/* Parallax "ventana" (ref. Halston): la foto queda FIJA a pantalla completa
   (background-attachment fixed = el área de posicionamiento pasa a ser el
   viewport) y la tarjeta es una ventana que se desliza por encima — el punto
   de corte entre imágenes viaja sobre las fotos quietas, igual que el pin de
   su .parallax-wrap. Solo escritorio: iOS no soporta attachment fixed. */
@media (min-width: 1025px) {
	.sg-pflow-card {
		background-attachment: fixed !important;
		background-size: cover !important;
		background-position: center center !important;
	}
}

/* Entrada en cascada del contenido (chip → descripción → metadatos): el
   widget .sg-reveal padre no se anima, animan sus hijos con stagger. */
.sg-pflow-card .sg-reveal { opacity: 1; transform: none; }
.sg-pflow-card .sg-reveal .sg-pflow-card__chip,
.sg-pflow-card .sg-reveal .sg-pflow-card__desc,
.sg-pflow-card .sg-reveal .sg-pflow-card__meta {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.sg-pflow-card .sg-reveal .sg-pflow-card__desc { transition-delay: .12s; }
.sg-pflow-card .sg-reveal .sg-pflow-card__meta { transition-delay: .24s; }
.sg-pflow-card .sg-reveal.sg-in .sg-pflow-card__chip,
.sg-pflow-card .sg-reveal.sg-in .sg-pflow-card__desc,
.sg-pflow-card .sg-reveal.sg-in .sg-pflow-card__meta { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.sg-pflow-card .sg-reveal .sg-pflow-card__chip,
	.sg-pflow-card .sg-reveal .sg-pflow-card__desc,
	.sg-pflow-card .sg-reveal .sg-pflow-card__meta { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Stats: grid 2×2 editorial (estilo berch.ch) ---------- */
@media (min-width: 1025px) {
	.elementor-element-3984139 {
		border-top: 1px solid #e0e0e0;
		border-bottom: 1px solid #e0e0e0;
		padding: 0 !important;
	}
	/* Quitar el container boxed: full width */
	.elementor-element-3984139 > .elementor-container {
		max-width: 100% !important;
		padding: 0 !important;
		flex-wrap: wrap !important;
		gap: 0 !important;
		column-gap: 0 !important;
	}
	/* 4 cols → 2×2 */
	.elementor-element-3984139 .elementor-top-column {
		width: 50% !important;
		flex: 0 0 50% !important;
		max-width: 50% !important;
		padding: 0 !important;
	}
	/* Líneas entre celdas */
	.elementor-element-3984139 .elementor-top-column {
		border-top: 1px solid #e0e0e0;
		border-right: 1px solid #e0e0e0;
		box-sizing: border-box;
	}
	/* Fila superior: sin border-top */
	.elementor-element-3984139 .elementor-top-column:nth-child(1),
	.elementor-element-3984139 .elementor-top-column:nth-child(2) { border-top: none; }
	/* Columna derecha: sin border-right */
	.elementor-element-3984139 .elementor-top-column:nth-child(2),
	.elementor-element-3984139 .elementor-top-column:nth-child(4) { border-right: none; }

	/* Cell: columna flex para separar label y número */
	.elementor-element-3984139 .elementor-widget-wrap {
		padding: 56px 72px 52px !important;
		display: flex !important;
		flex-direction: column !important;
		min-height: 280px;
	}
	.elementor-element-3984139 .elementor-widget-counter { flex: 1; }
	.elementor-element-3984139 .elementor-counter {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	/* Label: arriba, pequeño */
	.elementor-element-3984139 .elementor-counter-title {
		order: 1;
		font: 400 15px/1.4 'Schrifted Sans', sans-serif !important;
		color: #888 !important;
		text-align: left !important;
		margin: 0 0 auto !important;
		padding-bottom: 40px;
	}

	/* Número: abajo, enorme, ligero */
	.elementor-element-3984139 .elementor-counter-number-wrapper {
		order: 2;
		text-align: left !important;
	}
	.elementor-element-3984139 .elementor-counter-number,
	.elementor-element-3984139 .elementor-counter-number-prefix,
	.elementor-element-3984139 .elementor-counter-number-suffix {
		font: 300 clamp(72px, 7.5vw, 112px)/1 'Schrifted Sans', sans-serif !important;
		color: #000 !important;
		letter-spacing: -3px;
	}
}

/* ---------- Sección "Sobre nosotros" ---------- */
/* Eyebrow centrado, uppercase, discreto */
.elementor-element-b963e74 .elementor-element-aa48ea4 .elementor-heading-title {
	font: 500 11px/1 'Schrifted Sans', sans-serif !important;
	color: #999 !important;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	text-align: center !important;
}
/* H2: grande, en Medium (feedback cliente: mas espesor) */
.elementor-element-b963e74 .elementor-element-0fe14ed .elementor-heading-title {
	font: 500 clamp(38px, 3.8vw, 58px)/1.2 'Schrifted Sans', sans-serif !important;
	color: #111 !important;
	letter-spacing: -1px;
	text-align: center !important;
	max-width: 1160px;
	margin: 0 auto !important;
}
/* Botón centrado, coherente */
.elementor-element-b963e74 .elementor-element-7b65107 { text-align: center !important; }

/* ---------- Reveal por líneas al hacer scroll (ref: fluid.glass/about, MANIFESTO) ----------
   El JS parte el texto en líneas: cada una va en una máscara con overflow clip
   y sube desde abajo (translateY 115% → 0) de forma escalonada. */
.sg-line-mask { display: block; overflow: visible clip; }
.sg-line {
	display: block;
	/* nowrap: la línea reconstruida puede medir 1-2px más que al partirla y
	   re-envolvería a mitad de frase; el desborde horizontal es invisible */
	white-space: nowrap;
	transform: translateY(115%);
	transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
.sg-lines-in .sg-line { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.sg-line { transform: none !important; transition: none !important; }
}

/* ---------- Coherencia tipográfica global: pesos Schrifted Sans ---------- */
/* H1 hero: mantiene 800 (es el protagonista) */
/* H2 de secciones: 300-400, editorial */
.elementor-heading-title { font-family: 'Schrifted Sans', sans-serif !important; }
h1.elementor-heading-title { font-weight: 800 !important; }
h2.elementor-heading-title { font-weight: 300 !important; letter-spacing: -1px; }
h3.elementor-heading-title { font-weight: 600 !important; }
/* Eyebrows (h5/h6): uppercase */
h5.elementor-heading-title,
h6.elementor-heading-title {
	font-family: 'Schrifted Sans', sans-serif !important;
	font-weight: 500 !important;
	font-size: 11px !important;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #999 !important;
}

/* ---------- Reveal sutil al hacer scroll ---------- */
.sg-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.sg-reveal.sg-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sg-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---------- Menú lateral off-canvas (móvil) ---------- */
.sg-burger { display: none; }
.sg-offcanvas { position: fixed; inset: 0; z-index: 99990; visibility: hidden; }
.sg-offcanvas__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .4s ease; }
.sg-offcanvas__panel {
	position: absolute; top: 0; right: 0; height: 100%; width: min(86%, 380px);
	background: #fff; padding: 92px 34px 34px; box-sizing: border-box;
	display: flex; flex-direction: column;
	box-shadow: -16px 0 50px rgba(0,0,0,.12);
	transform: translateX(100%); transition: transform .42s cubic-bezier(.2,.7,.2,1);
}
body.sg-nav-open { overflow: hidden; }
body.sg-nav-open .sg-offcanvas { visibility: visible; }
body.sg-nav-open .sg-offcanvas__overlay { opacity: 1; }
body.sg-nav-open .sg-offcanvas__panel { transform: translateX(0); }
.sg-offcanvas .sg-offcanvas__close { position: absolute; top: 20px; right: 24px; background: none !important; border: 0 !important; box-shadow: none !important; color: #111 !important; font: 300 42px/1 'Schrifted Sans', sans-serif; cursor: pointer; padding: 0; width: 46px; height: 46px; z-index: 2; }
.sg-offcanvas .sg-offcanvas__close:hover { color: #00677f !important; }
.sg-offcanvas__menu { list-style: none; margin: 0; padding: 0; }
.sg-offcanvas__menu li { margin: 0; }
.sg-offcanvas__menu a {
	display: block; color: #111; text-decoration: none; padding: 14px 0;
	font: 600 24px/1.2 'Schrifted Sans', sans-serif; letter-spacing: -.5px;
	border-bottom: 1px solid #ececec; transition: color .2s ease;
}
.sg-offcanvas__menu a:hover, .sg-offcanvas__menu .current-menu-item > a { color: #00677f; }
.sg-offcanvas__cta { margin-top: auto; background: #00677f; color: #fff; text-align: center; padding: 16px; font: 600 15px 'Schrifted Sans', sans-serif; text-decoration: none; }

/* ---------- Sección testimonios: blanco, minimalista (estilo fluid.glass) ---------- */
.elementor-element-ced7d90 {
	background: #fff !important;
	/* Sin borde superior: el build le ponía 1px #1d1d1d (la "línea negra"). El bloque de
	   proyectos (negro) ya separa visualmente y la sombra hace de transición. */
	border-top: none !important;
	/* El build daba 110px de padding-top → hueco blanco enorme. El container ya aporta 72px,
	   así que aquí lo anulamos y el espacio sobre "OPINIONES" queda ajustado. */
	padding-top: 0 !important;
	/* Efecto "carta encima del footer": sombra proyectada hacia abajo */
	position: relative !important;
	z-index: 2 !important;
	box-shadow: 0 40px 80px rgba(0,0,0,.45) !important;
}
/* El footer se solapa con los testimonios para el efecto "debajo y saliendo":
   su margin-top negativo (definido en el bloque FOOTER, más abajo) cierra el
   hueco y lo mete 200px bajo el borde inferior de los testimonios. */
.footer-width-fixer { margin: 0 !important; padding: 0 !important; }
.elementor-element-ced7d90 > .elementor-container {
	max-width: 1200px !important;
	padding: 72px 52px 80px !important;
}

/* Label "OPINIONES" arriba-izquierda via pseudo */
.sg-testi { position: relative !important; padding-top: 0 !important; }
.sg-testi::before {
	content: 'OPINIONES';
	display: block;
	font: 500 11px/1 'Schrifted Sans', sans-serif;
	color: #999;
	letter-spacing: 3.5px;
	margin-bottom: 52px;
}

/* Controles: contador + flechas → arriba derecha absoluto */
.sg-testi__controls {
	position: absolute !important;
	top: -4px !important;
	right: 0 !important;
	margin-top: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}
.sg-testi__count {
	font: 400 13px/1 'Schrifted Sans', sans-serif !important;
	color: #999 !important;
	letter-spacing: 1px;
	margin-left: 0 !important;
}
.sg-testi__count b { color: #555 !important; }
.sg-testi__btn {
	width: 38px !important;
	height: 38px !important;
	border: 1px solid #ddd !important;
	background: transparent !important;
	color: #000 !important;
	font-size: 15px !important;
	border-radius: 50% !important;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.sg-testi__btn:hover {
	background: #000 !important;
	color: #fff !important;
	border-color: #000 !important;
}

/* Comilla decorativa: grande, gris muy suave */
.sg-testi__mark {
	font: 200 160px/0.7 'Schrifted Sans', sans-serif !important;
	color: #e8e8e8 !important;
	margin: 0 0 12px -8px !important;
}

/* Slides: sólo el activo es visible */
.sg-testi__slide {
	position: absolute !important;
	inset: 0 !important;
	margin: 0 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity .5s ease !important;
}
.sg-testi__slide.is-active {
	position: relative !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Texto de la cita: negro, ligero, grande */
.sg-testi__slide p {
	font: 300 clamp(22px, 2.6vw, 38px)/1.4 'Schrifted Sans', sans-serif !important;
	color: #111 !important;
	letter-spacing: -0.5px;
	margin: 0 0 44px !important;
}

/* Autor */
.sg-testi__avatar {
	display: flex !important;
	width: 64px !important;
	height: 64px !important;
	border-radius: 50% !important;
	background: #e0e0e0 !important;
	overflow: hidden !important;
	position: relative !important;
	font-size: 0 !important;
	flex-shrink: 0 !important;
}
.sg-testi__avatar::before {
	content: '' !important;
	position: absolute !important;
	top: 13px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: 22px !important;
	height: 22px !important;
	background: #adadad !important;
	border-radius: 50% !important;
}
.sg-testi__avatar::after {
	content: '' !important;
	position: absolute !important;
	bottom: -4px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: 46px !important;
	height: 38px !important;
	background: #adadad !important;
	border-radius: 50% 50% 0 0 !important;
}
.sg-testi__author {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 18px !important;
}
.sg-testi__author strong {
	display: block; /* la localización va debajo del nombre, no pegada */
	font: 600 14px/1.4 'Schrifted Sans', sans-serif !important;
	color: #111 !important;
}
.sg-testi__author span {
	font: 400 13px/1.4 'Schrifted Sans', sans-serif !important;
	color: #999 !important;
	margin-top: 2px;
}


/* ---------- Hero inmersiva: header camuflado sobre el vídeo (solo escritorio) ---------- */
@media (min-width: 1025px) {
	/* Header transparente superpuesto: el vídeo se ve por detrás */
	#masthead {
		position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
		z-index: 100 !important;
		background: transparent !important;
		transition: background .38s ease, box-shadow .38s ease !important;
	}
	#masthead .elementor-element-580d64b {
		background: transparent !important;
		border: 0 !important;
		transition: background .38s ease !important;
	}
	/* Logo y menú en blanco para integrarse sobre el vídeo */
	#masthead .elementor-element-5c1019d img {
		filter: brightness(0) invert(1);
		transition: filter .38s ease;
	}
	#masthead .hfe-nav-menu a.hfe-menu-item {
		color: #fff !important;
		transition: color .38s ease !important;
	}
	#masthead .hfe-nav-menu a.hfe-menu-item:hover,
	#masthead .hfe-nav-menu .current-menu-item > a.hfe-menu-item { color: var(--sg-tahitian) !important; }
	/* CTA "Contacto" como píldora blanca discreta (estilo "Get in touch") */
	#masthead a.elementor-button {
		background: transparent !important;
		border: 1.5px solid rgba(255,255,255,.85) !important;
		color: #fff !important;
		border-radius: 40px !important;
		padding: 9px 24px !important;
		transition: background .2s ease, color .2s ease, border-color .38s ease !important;
	}
	#masthead a.elementor-button:hover {
		background: #fff !important;
		color: #000 !important;
	}

	/* Header sólido al hacer scroll */
	#masthead.sg-scrolled {
		background: #fff !important;
		box-shadow: 0 1px 14px rgba(0,0,0,.10) !important;
	}
	#masthead.sg-scrolled .elementor-element-5c1019d img { filter: none !important; }
	#masthead.sg-scrolled .hfe-nav-menu a.hfe-menu-item { color: #1a1a1a !important; }
	#masthead.sg-scrolled .hfe-nav-menu a.hfe-menu-item:hover,
	#masthead.sg-scrolled .hfe-nav-menu .current-menu-item > a.hfe-menu-item { color: var(--sg-tahitian) !important; }
	#masthead.sg-scrolled a.elementor-button {
		border-color: var(--sg-tahitian) !important;
		color: var(--sg-tahitian) !important;
	}
	#masthead.sg-scrolled a.elementor-button:hover {
		background: var(--sg-tahitian) !important;
		color: #fff !important;
	}

	/* Hero: exactamente 100vh — el header es absolute, se superpone sin sumar altura */
	.elementor-element-265e3de {
		height: 100vh !important;
		min-height: unset !important;
	}
	.elementor-element-265e3de > .elementor-container {
		align-items: flex-end !important;
		height: 100% !important;
		min-height: unset !important;
		padding: 0 40px 7vh;
	}
	/* Degradados: inferior para el titular, superior sutil para el header */
	.elementor-element-265e3de .elementor-background-overlay {
		background:
			linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,0) 62%),
			linear-gradient(to bottom, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 16%) !important;
		opacity: 1 !important;
	}
	/* Párrafo de la hero legible sobre el vídeo */
	.elementor-element-265e3de .elementor-widget-text-editor,
	.elementor-element-265e3de .elementor-widget-text-editor p { color: rgba(255,255,255,.92) !important; }
	/* Sin botones en la hero: el vídeo manda (los CTAs van en un widget HTML) */
	.elementor-element-265e3de .elementor-element-e1936ac,
	.elementor-element-265e3de .elementor-widget-button,
	.elementor-element-265e3de .elementor-widget-buttons { display: none !important; }
}

@media (max-width: 1024px) {
	/* en móvil ocultamos el menú horizontal de HFE y el botón Contacto del header */
	.elementor-widget-navigation-menu,
	.sg-only-desktop { display: none !important; }

	/* Header fijo: transparente sobre el hero (logo en blanco) y barra blanca
	   compacta con logo negro al hacer scroll; la hamburguesa queda integrada */
	#masthead {
		position: fixed !important; top: 0; left: 0; width: 100%;
		z-index: 99980; background: transparent;
		transition: background .25s ease, box-shadow .25s ease;
	}
	/* la sección interna del template HFE trae fondo blanco y borde inferior propios */
	#masthead .elementor-section { background: transparent !important; border-bottom: 0 !important; padding-top: 14px !important; padding-bottom: 14px !important; }
	/* en móvil las columnas se apilan: las del menú y el botón (ocultos) añadían 40px */
	#masthead .elementor-top-column:not(:first-child) { display: none !important; }
	#masthead .elementor-element-5c1019d img { width: 128px; filter: brightness(0) invert(1); transition: filter .2s ease; }
	#masthead.sg-scrolled { background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.07); }
	#masthead.sg-scrolled .elementor-element-5c1019d img { filter: none; }
	/* hamburguesa sin fondo: líneas blancas sobre el hero, negras sobre la barra blanca */
	body:has(#masthead.sg-scrolled) .sg-burger {
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="14" viewBox="0 0 20 14"><path d="M0 1h20M0 7h20M0 13h20" stroke="%23111111" stroke-width="2"/></svg>') !important;
	}
	.sg-burger {
		display: block;
		position: fixed; top: 18px; right: 16px; z-index: 99991;
		width: 46px; height: 46px;
		/* icono como imagen (SVG data-URI): nítido a cualquier DPR/zoom */
		background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="14" viewBox="0 0 20 14"><path d="M0 1h20M0 7h20M0 13h20" stroke="%23ffffff" stroke-width="2"/></svg>') center / 20px 14px no-repeat !important;
		border: 0; box-shadow: none; cursor: pointer; padding: 0; border-radius: 0;
	}
	body.sg-nav-open .sg-burger { display: none !important; }
}

/* ============================================================
   FOOTER — foto de fachada a sangre + SIVALGLASS gigante
   Inspiración: mino.works (wordmark grande, columnas centradas)
   ============================================================ */

/* Foto de fachada como fondo CONTINUO de todo el footer */
#colophon {
	position: relative;
	z-index: 1;
	margin-top: 0;
	background: #000 url('/wp-content/uploads/2026/06/pexels-photo-34369594.jpeg') center 35% / cover no-repeat;
	overflow: hidden;
}
/* El reveal (footer metiéndose bajo los testimonios) SOLO en el home; en páginas interiores
   ese -200px solapaba el footer sobre el contenido (se comía el final del formulario). */
.home #colophon { margin-top: -200px; }
/* Degradado progresivo: suave arriba (wordmark), muy oscuro abajo (columnas) */
#colophon::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,.30) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.90) 100%);
	z-index: 0;
	pointer-events: none;
}
/* Todas las secciones transparentes y por encima del degradado */
#colophon .elementor-top-section {
	background-color: transparent !important;
	position: relative;
	z-index: 1;
}

/* Sección 1 (059b03c): zona alta de foto que aloja el wordmark.
   min-height con suelo en px: el footer sube -200px bajo los testimonios,
   así garantizamos que el wordmark quede SIEMPRE por debajo de esa franja
   solapada (si no, la tarjeta de testimonios le recorta la parte superior). */
.elementor-element-059b03c {
	position: relative !important;
	min-height: max(460px, 46vh) !important;
	background-image: none !important;
	padding: 0 !important;
}
/* En páginas interiores no hay reveal, así que la franja de foto del footer es más baja
   (si no queda demasiado hueco de foto sobre el logo). */
body:not(.home) .elementor-element-059b03c { min-height: 300px !important; }
.elementor-element-059b03c .elementor-background-overlay { display: none !important; }
/* Ocultar widget HFE (logo/nav) que hay dentro */
.elementor-element-707ec65 { display: none !important; }

/* LOGO (imagen) en grande y CENTRADO, en la zona baja de la foto.
   Antes era el texto "SIVALGLASS"; ahora el logotipo real blanqueado. */
.elementor-element-059b03c::after {
	content: '' !important;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 7% !important;
	height: clamp(70px, 12vw, 150px) !important;
	background: url('/wp-content/uploads/2026/06/sivalglass-logo-scaled.png') center / contain no-repeat !important;
	filter: brightness(0) invert(1) !important; /* logo en blanco sobre la foto oscura */
	z-index: 5 !important;
	pointer-events: none !important;
}

/* Sección 2 (55b6833): ocultar — el texto SIVALGLASS viene del ::after anterior */
.elementor-element-55b6833 { display: none !important; }

/* Sección 3 (9c3c803): CONTACTO + NUESTRA VOZ — columnas centradas */
.elementor-element-9c3c803 {
	padding-top: 56px !important;
	padding-bottom: 64px !important;
	border-top: 1px solid rgba(255,255,255,.14) !important;
}
.elementor-element-9c3c803 > .elementor-container {
	max-width: 1200px !important;
	padding: 0 52px !important;
	justify-content: center !important;
	gap: clamp(48px, 9vw, 150px) !important;
}
/* Las dos columnas no se estiran: se agrupan al centro en vez de a los lados */
.elementor-element-b1be019,
.elementor-element-568df38 {
	width: auto !important;
	flex: 0 0 auto !important;
}

/* Etiquetas de columna (CONTACTO / NUESTRA VOZ): gris claro, pequeñas */
.elementor-element-3aa3198 [style*="2.5px"],
.elementor-element-61cfed2 [style*="2.5px"] {
	color: rgba(255,255,255,.45) !important;
	letter-spacing: 3px !important;
}
/* Renombrar "Comunicación" → "Nuestra voz" sin tocar la BD de Elementor */
.elementor-element-61cfed2 [style*="2.5px"] { font-size: 0 !important; }
.elementor-element-61cfed2 [style*="2.5px"]::before {
	content: 'Nuestra voz';
	font: 600 13px/1 'Schrifted Sans', sans-serif;
	letter-spacing: 3px;
	text-transform: uppercase;
}
/* Texto de las columnas, legible sobre la foto */
.elementor-element-3aa3198 [style*="9A9A9A"],
.elementor-element-61cfed2 [style*="9A9A9A"] {
	color: rgba(255,255,255,.82) !important;
}
/* Feedback cliente: texto del footer alineado a la izquierda.
   Son widgets HTML con text-align:center inline → hace falta !important en descendientes. */
.elementor-element-3aa3198,
.elementor-element-61cfed2,
.elementor-element-3aa3198 div,
.elementor-element-61cfed2 div,
.elementor-element-3aa3198 p,
.elementor-element-61cfed2 p {
	text-align: left !important;
}

/* Barra copyright — centrada */
.elementor-element-bf3f8fb {
	padding: 18px 0 !important;
	border-top: 1px solid rgba(255,255,255,.10) !important;
}
.elementor-element-bf3f8fb > .elementor-container {
	max-width: 1200px !important;
	padding: 0 52px !important;
}
.elementor-element-c75076d .elementor-text-editor,
.elementor-element-c75076d p {
	font: 400 12px/1.5 'Schrifted Sans', sans-serif !important;
	color: rgba(255,255,255,.42) !important;
	text-align: center !important;
}

/* Franja de la subvención INPYME (Generalitat Valenciana), al final del footer.
   Réplica a escala del cartel A3 del cliente (A3_PUBLICIDAD_.docx, Aptos 28pt):
   todo en em respecto al cuerpo del texto para conservar sus proporciones —
   ancho del texto 37.45em, "Con la subvención de:" a 26/28, logo visible 10.79em.
   Peso 500 en negro = el gris visual de Aptos Regular. Fondo blanco para el azul del logo. */
#colophon .elementor-top-section.sg-ayuda {
	background-color: #fff !important;
	padding: 40px 0 !important;
}
.sg-ayuda__inner {
	font: 500 18px/1.41 'Schrifted Sans', sans-serif;
	color: #000;
	max-width: calc(37.45em + 44px);
	margin: 0 auto;
	padding: 0 22px;
	box-sizing: border-box;
}
.sg-ayuda__text { margin: 0; font: inherit; color: inherit; text-align: justify; }
.sg-ayuda__lead { margin: .4615em 0 0; font: inherit; font-size: .929em; color: inherit; text-align: center; }
.sg-ayuda__logo { width: 10.79em; height: auto; display: block; margin: 3.13em auto 0; }
@media (max-width: 767px) {
	#colophon .elementor-top-section.sg-ayuda { padding: 28px 0 !important; }
	.sg-ayuda__inner { font-size: 16px; }
	.sg-ayuda__text { text-align: left; } /* justificado a este ancho abre huecos enormes */
}

/* Footer en móvil: el logo cabe entero y centrado */
@media (max-width: 600px) {
	.elementor-element-059b03c { min-height: max(300px, 34vh) !important; }
	.elementor-element-059b03c::after {
		height: 15vw !important;
		bottom: 8% !important;
	}
}

/* ============================================================
   NOSOTROS — rediseño según brief (8 secciones).
   Cada sección es un widget HTML con clases .sg-nos-* / .sg-acc / .sg-team
   (sin depender de IDs autogenerados por Elementor).
   ============================================================ */
.sg-nos-hero__inner, .sg-nos-stats, .sg-nos-manifesto, .sg-nos-keywords,
.sg-acc, .sg-team__head, .sg-nos-contact {
	max-width: 1200px; margin-left: auto; margin-right: auto; box-sizing: border-box; width: 100%;
}
/* eyebrows */
.sg-nos-hero__eyebrow, .sg-team .sg-eyebrow, .sg-nos-contact .sg-eyebrow, .sg-nos-manifesto .sg-eyebrow {
	font: 600 13px/1 'Schrifted Sans', sans-serif; letter-spacing: 3px; text-transform: uppercase;
	color: var(--sg-tahitian); margin: 0 0 22px;
}
.sg-eyebrow-c {
	font: 600 13px/1 'Schrifted Sans', sans-serif; letter-spacing: 3px; text-transform: uppercase;
	color: var(--sg-tahitian); margin: 0 0 16px; text-align: center;
}

/* 1. HERO (fondo negro web, texto centrado, vídeo a sangre) */
.sg-nos-hero__inner { padding: 150px 52px 0; color: #fff; text-align: center; }
.sg-nos-hero__title {
	font: 600 clamp(40px, 6vw, 86px)/1.05 'Schrifted Sans', sans-serif; /* semibold (feedback) */
	letter-spacing: -2px; margin: 0 auto; max-width: 20ch;
}
.sg-nos-hero__title span { display: inline-block; opacity: 0; transform: translateY(40px);
	animation: sgWordUp .8s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i) * .09s + .15s); }
.sg-nos-hero__lead { font: 400 clamp(16px,1.5vw,20px)/1.6 'Schrifted Sans', sans-serif; color: rgba(255,255,255,.72);
	max-width: 540px; margin: 26px auto 0; opacity: 0; animation: sgWordUp .8s ease forwards; animation-delay: 1s; }
@keyframes sgWordUp { to { opacity: 1; transform: none; } }
/* Vídeo a ancho completo de pantalla (feedback: width 100%) */
.sg-nos-hero__video { position: relative; width: 100vw; margin: 56px 0 0 calc(50% - 50vw); aspect-ratio: 16 / 9;
	background: #161616 center / cover no-repeat; overflow: hidden;
	opacity: 0; animation: sgWordUp .9s ease forwards; animation-delay: 1.15s; }
/* evita la franja de scroll horizontal que provoca el 100vw con scrollbar clásica */
body:has(.sg-nos-hero__video) { overflow-x: clip; }
.sg-nos-hero__video::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.sg-nos-hero__play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.55); cursor: pointer;
	display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; }
.sg-nos-hero__play::before { content: ''; border-style: solid; border-width: 11px 0 11px 19px;
	border-color: transparent transparent transparent #fff; margin-left: 5px; }
.sg-nos-hero__play:hover { background: rgba(255,255,255,.26); transform: scale(1.06); }
.sg-nos-hero__videolabel { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
	color: rgba(255,255,255,.72); font: 600 11px/1 'Schrifted Sans', sans-serif; letter-spacing: 2.5px; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
	.sg-nos-hero__title span, .sg-nos-hero__lead, .sg-nos-hero__video { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* Líneas modernas DIAGONALES (estilo fluid.glass) detrás del texto en las secciones oscuras */
.sg-nos-lines { position: relative; }
.sg-nos-lines > * { position: relative; z-index: 1; }
.sg-nos-lines::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image:
		linear-gradient(116deg, transparent calc(38% - 0.6px), rgba(255,255,255,.07) 38%, transparent calc(38% + 0.6px)),
		linear-gradient(116deg, transparent calc(53% - 0.6px), rgba(255,255,255,.05) 53%, transparent calc(53% + 0.6px)),
		linear-gradient(107deg, transparent calc(71% - 0.6px), rgba(255,255,255,.05) 71%, transparent calc(71% + 0.6px));
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.3) 78%, transparent 100%);
	        mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.3) 78%, transparent 100%); }

/* 2. CONTADOR (a todo el ancho — feedback: width 100%) */
.sg-nos-stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 84px 52px; gap: 0; text-align: center; max-width: none; }
.sg-stat { border-left: 1px solid rgba(255,255,255,.12); padding: 6px 24px; }
.sg-stat:first-child { border-left: 0; }
.sg-stat__num { display: flex; align-items: flex-start; justify-content: center; color: #fff;
	font: 300 clamp(48px,5.4vw,84px)/1 'Schrifted Sans', sans-serif; letter-spacing: -2px; }
.sg-stat__affix { color: var(--sg-tahitian); font-size: .5em; font-weight: 400; margin-top: .2em; }
.sg-stat__affix--suf { margin-left: 3px; }
.sg-stat__label { font: 400 15px/1.4 'Schrifted Sans', sans-serif; color: rgba(255,255,255,.6); margin-top: 16px; }
@media (max-width: 900px) { .sg-nos-stats { grid-template-columns: repeat(2, 1fr); gap: 44px 0; }
	.sg-stat:nth-child(3) { border-left: 0; } }

/* 3. MANIFIESTO (estructura editorial fluid.glass: eyebrow izq + intro der + titular grande izq + botón)
   Feedback: a todo el ancho, titular más grande y en Medium, reveal por líneas (JS) */
.sg-nos-manifesto { padding: 100px 52px 104px; max-width: none; }
.sg-nos-manifesto__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-bottom: 54px; }
.sg-nos-manifesto__top .sg-eyebrow { margin: 0; white-space: nowrap; }
.sg-nos-manifesto__intro { max-width: 380px; font: 400 15px/1.7 'Schrifted Sans', sans-serif; color: rgba(255,255,255,.6); margin: 0; text-align: right; }
.sg-nos-manifesto__big { font: 500 clamp(30px,4vw,58px)/1.18 'Schrifted Sans', sans-serif;
	letter-spacing: -1px; color: #fff; margin: 0; max-width: 30ch; }
.sg-nos-manifesto__btn { display: inline-block; margin-top: 44px; padding: 14px 28px; border-radius: 40px;
	border: 1px solid rgba(255,255,255,.28); color: #fff; text-decoration: none;
	font: 600 12px/1 'Schrifted Sans', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; transition: background .2s, color .2s; }
.sg-nos-manifesto__btn:hover { background: #fff; color: #0C0C0C; border-color: #fff; }
@media (max-width: 700px) { .sg-nos-manifesto__top { flex-direction: column; gap: 16px; } .sg-nos-manifesto__intro { text-align: left; } }

/* 4. PALABRAS CLAVE (feedback: semibold, sin puntos —los quita el JS—, boceto:
   Técnica centrada / Moderna izquierda en turquesa / Cercana derecha) */
.sg-nos-keywords { padding: 110px 52px; display: flex; flex-direction: column; }
.sg-nos-keywords > span { font: 600 clamp(56px,11vw,170px)/1.04 'Schrifted Sans', sans-serif; letter-spacing: -2px; color: #111; }
.sg-nos-keywords > span:nth-child(1) { align-self: center; }
.sg-nos-keywords > span:nth-child(2) { color: var(--sg-tahitian); align-self: flex-start; }
.sg-nos-keywords > span:nth-child(3) { align-self: flex-end; }

/* 5. VALORES (acordeón a todo el ancho — feedback: width 100%) */
.sg-acc { padding: 100px 52px; max-width: none; }
.sg-acc__head { text-align: center; margin-bottom: 40px; }
.sg-acc__head h2 { font: 300 clamp(30px,3.6vw,46px)/1.1 'Schrifted Sans', sans-serif; letter-spacing: -1px; color: #111; margin: 0; }
.sg-acc__item { border-top: 1px solid #e4e4e4; }
.sg-acc__item:last-child { border-bottom: 1px solid #e4e4e4; }
.sg-acc__trigger { width: 100%; border: 0; cursor: pointer; padding: 26px 4px;
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	-webkit-appearance: none; appearance: none; }
/* Sin fondo en ningún estado (evita la barra de color por defecto del <button> al pulsar) */
.sg-acc__trigger, .sg-acc__trigger:hover, .sg-acc__trigger:focus, .sg-acc__trigger:active {
	background: transparent !important; box-shadow: none !important; outline: none; }
/* El reset de <button> del tema padre mete white-space:nowrap → en móvil las
   preguntas largas no envolvían y desbordaban la pantalla */
.sg-acc__trigger { white-space: normal; text-align: left; }
.sg-acc__trigger:focus-visible { outline: 2px solid var(--sg-tahitian); outline-offset: 3px; }
.sg-acc__title { font: 400 clamp(22px,2.4vw,32px)/1.2 'Schrifted Sans', sans-serif; color: #111; transition: color .2s; }
.sg-acc__trigger:hover .sg-acc__title, .sg-acc__item.is-open .sg-acc__title { color: var(--sg-tahitian); }
.sg-acc__icon { position: relative; width: 22px; height: 22px; flex-shrink: 0; }
.sg-acc__icon::before, .sg-acc__icon::after { content: ''; position: absolute; background: #111; transition: transform .3s, background .2s; }
.sg-acc__icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.sg-acc__icon::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.sg-acc__item.is-open .sg-acc__icon::after { transform: translateX(-50%) scaleY(0); }
.sg-acc__item.is-open .sg-acc__icon::before { background: var(--sg-tahitian); }
.sg-acc__panel { overflow: hidden; max-height: 0; transition: max-height .4s ease; }
.sg-acc__panel-inner { padding: 0 4px 30px; }
.sg-acc__panel p { font: 400 17px/1.7 'Schrifted Sans', sans-serif; color: #6b6b6b; margin: 0; max-width: 900px; text-align: left; }

/* 7. EQUIPO (scroll horizontal, tarjetas mismo tamaño) */
.sg-team { padding: 96px 0; }
.sg-team__head { margin-bottom: 40px; padding: 0 52px; position: relative; }
.sg-team__head h2 { font: 300 clamp(28px,3.4vw,46px)/1.1 'Schrifted Sans', sans-serif; letter-spacing: -1px; color: #fff; margin: 0; }
.sg-team__hint { position: absolute; right: 52px; bottom: 4px; font: 500 13px/1 'Schrifted Sans', sans-serif; letter-spacing: 1px; color: rgba(255,255,255,.5); }
.sg-team__track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
	padding: 4px max(52px, calc((100% - 1200px)/2 + 52px)) 26px; -ms-overflow-style: none; scrollbar-width: none; cursor: grab; }
.sg-team__track::-webkit-scrollbar { display: none; }
.sg-team__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.sg-team__card { flex: 0 0 300px; scroll-snap-align: start; user-select: none; }
.sg-team__photo { position: relative; width: 300px; height: 380px; background: linear-gradient(160deg,#191919,#2a2a2a); overflow: hidden; }
/* Silueta placeholder (cabeza + hombros) hasta tener fotos reales */
.sg-team__photo::before { content: ''; position: absolute; left: 50%; top: 24%; width: 64px; height: 64px;
	border-radius: 50%; background: rgba(255,255,255,.1); transform: translateX(-50%); }
.sg-team__photo::after { content: ''; position: absolute; left: 50%; bottom: -36px; width: 134px; height: 134px;
	border-radius: 50%; background: rgba(255,255,255,.1); transform: translateX(-50%); }
.sg-team__name { font: 600 18px/1.3 'Schrifted Sans', sans-serif; color: #fff; margin: 20px 0 2px; }
.sg-team__role { font: 400 14px/1.4 'Schrifted Sans', sans-serif; color: rgba(255,255,255,.55); margin: 0; }
@media (max-width: 600px) { .sg-team__card { flex-basis: 240px; } .sg-team__photo { width: 240px; height: 310px; } }

/* 8. CONTACTO (formulario oscuro) */
.sg-nos-contact { padding: 96px 52px; max-width: 820px; }
.sg-nos-contact__head { text-align: center; margin-bottom: 38px; }
.sg-nos-contact__head h2 { font: 300 clamp(30px,3.6vw,48px)/1.1 'Schrifted Sans', sans-serif; letter-spacing: -1px; color: #fff; margin: 0; }
.sg-nos-contact__lead { font: 400 17px/1.6 'Schrifted Sans', sans-serif; color: rgba(255,255,255,.6); margin: 16px auto 0; max-width: 480px; }
.sg-nos-form { display: flex; flex-direction: column; gap: 14px; }
.sg-nos-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sg-nos-form input, .sg-nos-form textarea { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.16);
	color: #fff; padding: 16px 18px; font: 400 15px 'Schrifted Sans', sans-serif; outline: none; transition: border-color .2s; border-radius: 0; }
.sg-nos-form input::placeholder, .sg-nos-form textarea::placeholder { color: rgba(255,255,255,.4); }
.sg-nos-form input:focus, .sg-nos-form textarea:focus { border-color: var(--sg-tahitian); }
.sg-nos-form textarea { resize: vertical; }
.sg-nos-form__btn { background: var(--sg-tahitian); color: #fff; border: 0; padding: 17px; cursor: pointer;
	font: 600 15px 'Schrifted Sans', sans-serif; letter-spacing: .3px; transition: background .2s; }
.sg-nos-form__btn:hover { background: #00505f; }
.sg-nos-form__note { font: 400 12px 'Schrifted Sans', sans-serif; color: rgba(255,255,255,.4); margin: 4px 0 0; text-align: center; }
@media (max-width: 600px) { .sg-nos-form__row { grid-template-columns: 1fr; } }

/* ============================================================
   RESPONSIVE — ajustes móvil/tablet detectados en QA visual
   ============================================================ */
@media (max-width: 1024px) {
	/* Hero home: más aire arriba para que el eyebrow no quede pegado
	   al borde claro de la foto */
	.elementor-element-265e3de { padding-top: 130px !important; }
	/* El overlay horizontal (oscuro izq → claro der) es para el layout de
	   escritorio; en móvil el texto ocupa todo el ancho → degradado vertical */
	.elementor-element-265e3de .elementor-background-overlay {
		background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.5) 100%) !important;
		opacity: 1 !important;
	}
	/* Eyebrow del hero: el #999 global es para fondos claros; sobre la foto no se lee */
	.elementor-element-265e3de h5.elementor-heading-title,
	.elementor-element-265e3de h6.elementor-heading-title { color: rgba(255,255,255,.85) !important; }

}

/* Stats de la home en tablet: 2×2 con las mismas líneas divisorias que en
   escritorio (Elementor dejaba las 4 columnas apretadas en una fila) */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-element-3984139 > .elementor-container { flex-wrap: wrap !important; }
	.elementor-element-3984139 .elementor-top-column {
		width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important;
		border-top: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; box-sizing: border-box;
	}
	.elementor-element-3984139 .elementor-top-column:nth-child(1),
	.elementor-element-3984139 .elementor-top-column:nth-child(2) { border-top: none; }
	.elementor-element-3984139 .elementor-top-column:nth-child(2),
	.elementor-element-3984139 .elementor-top-column:nth-child(4) { border-right: none; }
}

/* Acordeones en móvil: gutter de 52px dejaba el contenido en 266px */
@media (max-width: 760px) {
	.sg-acc { padding-left: 24px; padding-right: 24px; }
}

/* Formulario de Nosotros en móvil: mismo caso que el de Contacto */
@media (max-width: 760px) {
	.sg-nos-contact { padding-left: 20px; padding-right: 20px; }
}

/* Testimonios en móvil: el padding de escritorio del container (72/52px) se
   sumaba al de la sección y dejaba el bloque en 222px — "OPINIONES" quedaba
   debajo de las flechas */
@media (max-width: 1024px) {
	.elementor-element-ced7d90 > .elementor-container {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}

/* ============================================================
   CONTACTO — rediseño según brief (claro). Reutiliza .sg-acc para los FAQ.
   ============================================================ */
.sg-con-eyebrow { font: 600 13px/1 'Schrifted Sans', sans-serif; letter-spacing: 3px; text-transform: uppercase;
	color: var(--sg-tahitian); margin: 0 0 18px; }

/* 1. HERO con foto (texto blanco) + CONTACTO DIRECTO (blanco) */
.sg-con-hero { max-width: 820px; margin: 0 auto; padding: 170px 52px 120px; text-align: center; box-sizing: border-box; position: relative; z-index: 1; }
.sg-con-hero .sg-con-eyebrow { color: #fff; opacity: .9; }
.sg-con-title { font: 300 clamp(40px,5.2vw,72px)/1.04 'Schrifted Sans', sans-serif; letter-spacing: -2px; color: #fff; margin: 0; }
.sg-con-lead { font: 400 clamp(16px,1.6vw,19px)/1.6 'Schrifted Sans', sans-serif; color: rgba(255,255,255,.82); margin: 22px auto 0; max-width: 560px; }
/* Feedback: el texto del hero al 80% del ancho en escritorio */
@media (min-width: 1025px) {
	.sg-con-hero { max-width: 80vw; }
	.sg-con-hero .sg-con-lead { max-width: none; }
}
.sg-con-top { max-width: 1100px; margin: 0 auto; padding: 84px 52px 96px; box-sizing: border-box; }
.sg-con-info { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; margin-bottom: 52px; }
.sg-con-line { padding: 28px 8px; }
.sg-con-line + .sg-con-line { border-left: 1px solid #e6e6e6; padding-left: 40px; }
.sg-con-line__label { display: block; font: 600 12px/1 'Schrifted Sans', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #9a9a9a; margin-bottom: 12px; }
.sg-con-line__val { font: 300 clamp(22px,2.4vw,32px)/1.2 'Schrifted Sans', sans-serif; color: #111; text-decoration: none; letter-spacing: -.5px; transition: color .2s; }
.sg-con-line__val:hover { color: var(--sg-tahitian); }
.sg-con-people { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sg-person { display: flex; gap: 20px; align-items: center; padding: 22px 24px; border: 1px solid #ececec; }
.sg-person__photo { position: relative; width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
	background: linear-gradient(160deg,#ececec,#d6d6d6); }
.sg-person__photo::before { content: ''; position: absolute; left: 50%; top: 30%; width: 26px; height: 26px;
	border-radius: 50%; background: rgba(0,0,0,.16); transform: translateX(-50%); }
.sg-person__photo::after { content: ''; position: absolute; left: 50%; bottom: -12px; width: 48px; height: 48px;
	border-radius: 50%; background: rgba(0,0,0,.16); transform: translateX(-50%); }
.sg-person__name { font: 600 17px/1.2 'Schrifted Sans', sans-serif; color: #111; margin: 0; }
.sg-person__role { font: 400 14px/1.3 'Schrifted Sans', sans-serif; color: #9a9a9a; margin: 3px 0 9px; }
.sg-person__links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 500 13px/1 'Schrifted Sans', sans-serif; }
.sg-person__name + .sg-person__links { margin-top: 9px; } /* tarjeta sin cargo (Administración) */
.sg-person__links a { color: var(--sg-tahitian); text-decoration: none; }
.sg-person__links a:hover { text-decoration: underline; }
.sg-person__sep { color: #ccc; }
@media (max-width: 760px) {
	.sg-con-info, .sg-con-people { grid-template-columns: 1fr; }
	.sg-con-line + .sg-con-line { border-left: 0; border-top: 1px solid #e6e6e6; padding-left: 8px; }
	/* Los emails largos (administracion@…) no cabían en la tarjeta */
	.sg-con-top { padding-left: 22px; padding-right: 22px; }
	.sg-person { gap: 14px; padding: 18px; }
	.sg-person__photo { width: 56px; height: 56px; }
	.sg-person__photo::before { width: 20px; height: 20px; }
	.sg-person__photo::after { width: 38px; height: 38px; bottom: -10px; }
	.sg-person__body { min-width: 0; }
	.sg-person__links a { overflow-wrap: anywhere; }
	.sg-person__sep { display: none; }
}

/* Feedback: formulario a la DERECHA de la info de contacto (solo escritorio).
   El bloque es compartido (Contacto y Proyectos): las dos secciones llevan las
   clases sg-con-duo-info / sg-con-duo-form (sg-helpers.php) y el wrapper de la
   página que las contiene pasa a grid; el resto de secciones siguen ocupando
   el ancho completo. */
@media (min-width: 1025px) {
	.elementor:has(> .sg-con-duo-info) { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
	.elementor:has(> .sg-con-duo-info) > .elementor-section { grid-column: 1 / -1; }
	.elementor:has(> .sg-con-duo-info) > .sg-con-duo-info { grid-column: 1; }
	.elementor:has(> .sg-con-duo-info) > .sg-con-duo-form { grid-column: 2; }
	/* La info (izquierda) va CENTRADA verticalmente respecto al formulario
	   (feedback cliente): hay que propagar la altura de la celda del grid por
	   toda la cadena de contenedores de Elementor hasta .sg-con-top. */
	.sg-con-duo-info > .elementor-container,
	.sg-con-duo-info .elementor-column,
	.sg-con-duo-info .elementor-widget-wrap,
	.sg-con-duo-info .elementor-widget-html,
	.sg-con-duo-info .elementor-widget-html > .elementor-widget-container { height: 100%; }
	.sg-con-top {
		max-width: none;
		margin: 0;
		padding: 84px 44px 84px 52px;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.sg-con-form-wrap { max-width: 640px; padding: 72px 52px; }
}
/* Con el formulario al lado, las 3 tarjetas van apiladas (en 2 columnas quedaban
   apretadas y la tercera huérfana) */
@media (min-width: 1025px) {
	.sg-con-people { grid-template-columns: 1fr; }
}

/* 2. FORMULARIO (claro) */
.sg-con-form-wrap { max-width: 720px; margin: 0 auto; padding: 90px 52px; box-sizing: border-box; }
/* En móvil el gutter de 52px dejaba el formulario en 266px */
@media (max-width: 760px) {
	.sg-con-form-wrap { padding: 56px 20px; }
}
.sg-con-form-head { text-align: center; margin-bottom: 38px; }
.sg-con-form-head h2 { font: 300 clamp(26px,3vw,40px)/1.15 'Schrifted Sans', sans-serif; letter-spacing: -1px; color: #111; margin: 8px 0 0; }
.sg-con-form { display: flex; flex-direction: column; gap: 14px; }
.sg-con-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sg-con-form input:not([type="submit"]), .sg-con-form select, .sg-con-form textarea { background: #fff; border: 1px solid #dcdcdc;
	padding: 16px 18px; font: 400 15px 'Schrifted Sans', sans-serif; color: #111; outline: none; border-radius: 0;
	transition: border-color .2s; -webkit-appearance: none; appearance: none; }
.sg-con-form input::placeholder, .sg-con-form textarea::placeholder { color: #9a9a9a; }
.sg-con-form input:not([type="submit"]):focus, .sg-con-form select:focus, .sg-con-form textarea:focus { border-color: var(--sg-tahitian); }
.sg-con-form textarea { resize: vertical; }
.sg-con-form__select { color: #111; padding-right: 44px; cursor: pointer;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" stroke="%23111" stroke-width="1.4" fill="none"/></svg>');
	background-repeat: no-repeat; background-position: right 18px center; }
.sg-con-form__btn { background: var(--sg-tahitian); color: #fff; border: 0; padding: 17px; cursor: pointer;
	font: 600 15px 'Schrifted Sans', sans-serif; letter-spacing: .3px; transition: background .2s; }
.sg-con-form__btn:hover { background: #00505f; }
.sg-con-form__note { font: 400 12px 'Schrifted Sans', sans-serif; color: #9a9a9a; margin: 4px 0 0; text-align: center; }
@media (max-width: 600px) { .sg-con-form__row { grid-template-columns: 1fr; } }

/* 3. FAQ (reutiliza .sg-acc; preguntas más cortas de fuente porque son largas) */
/* Feedback: el bloque FAQ al 70% del ancho */
@media (min-width: 761px) { .sg-faq { max-width: 70%; } }
.sg-faq__sub { font: 400 16px/1.6 'Schrifted Sans', sans-serif; color: #6b6b6b; text-align: center; margin: 14px auto 0; max-width: 500px; }
.sg-faq .sg-acc__title { font: 400 clamp(17px,1.9vw,23px)/1.35 'Schrifted Sans', sans-serif; }
.sg-faq .sg-acc__trigger { gap: 28px; }

/* 4. DIRECCIÓN (banda turquesa, todo el bloque enlaza a Google Maps) */
.sg-con-address { display: block; text-align: center; text-decoration: none; padding: 84px 40px; }
.sg-con-address__label { display: block; font: 600 13px/1 'Schrifted Sans', sans-serif; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: 18px; }
.sg-con-address__big { display: block; font: 300 clamp(22px,3vw,34px)/1.3 'Schrifted Sans', sans-serif; color: #fff; max-width: 820px; margin: 0 auto; letter-spacing: -.5px; }
.sg-con-address__meta { display: block; font: 500 15px/1.4 'Schrifted Sans', sans-serif; color: rgba(255,255,255,.9); margin-top: 18px; }
.sg-con-address__cta { display: inline-block; font: 600 14px/1 'Schrifted Sans', sans-serif; color: #fff; margin-top: 24px; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 4px; transition: border-color .2s; }
.sg-con-address:hover .sg-con-address__cta { border-color: #fff; }
/* Feedback: en escritorio la franja pasa a horizontal y full width:
   logo | Dónde estamos + dirección | email·tel | CTA Maps */
@media (min-width: 901px) {
	.sg-con-address {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto auto;
		grid-template-areas:
			'logo label meta cta'
			'logo big   meta cta';
		column-gap: clamp(32px, 4.5vw, 72px);
		row-gap: 6px;
		align-items: center;
		padding: 44px 52px;
		text-align: left;
	}
	.sg-con-address::before { content: ''; grid-area: logo; width: 148px; height: 40px;
		background: url('/wp-content/uploads/2026/06/sivalglass-logo-scaled.png') left center / contain no-repeat;
		filter: brightness(0) invert(1); }
	.sg-con-address__label { grid-area: label; align-self: end; margin: 0; }
	.sg-con-address__big { grid-area: big; align-self: start; margin: 0; max-width: none;
		font: 400 clamp(17px, 1.5vw, 22px)/1.45 'Schrifted Sans', sans-serif; letter-spacing: 0; }
	.sg-con-address__meta { grid-area: meta; margin: 0; }
	.sg-con-address__cta { grid-area: cta; margin: 0; justify-self: end; }
}