/* ==========================================================================
   Guinew — estilos auxiliares del tema (complementan theme.json)
   ========================================================================== */

/* ---- Botón píldora con icono circular -------------------------------- */
.gn-btn {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	background: var(--wp--preset--color--contrast);
	border-radius: 999px;
	padding: 3px 3px 3px 26px;
	transition: background 0.2s ease;
}
.gn-btn a {
	color: var(--wp--preset--color--base) !important;
	font-weight: 600;
	letter-spacing: -0.04em;
	text-decoration: none;
}
.gn-btn:hover { background: var(--wp--preset--color--accent); }
.gn-btn .gn-btn-circle {
	width: 45px;
	height: 45px;
	flex: 0 0 45px;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
.gn-btn .gn-btn-circle img { width: 23px; height: 25px; object-fit: contain; }

/* Variante clara (sobre fotos / fondos oscuros) */
.gn-btn.is-light { background: var(--wp--preset--color--base); }
.gn-btn.is-light a { color: var(--wp--preset--color--contrast) !important; }
.gn-btn.is-light .gn-btn-circle { background: var(--wp--preset--color--contrast); }
.gn-btn.is-light:hover { background: var(--wp--preset--color--white); }

/* ---- Cabecera --------------------------------------------------------- */
.gn-header-bar {
	border-radius: 999px;
	background: var(--wp--preset--color--tint);
}
.gn-header-logo-text p { margin: 0; line-height: 1.05; }
.gn-nav a {
	font-weight: 600;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--contrast);
}
.gn-nav a:hover { color: var(--wp--preset--color--accent); }
/* Móvil: la barra se compacta para que el botón Contacto quepa */
@media (max-width: 600px) {
	.gn-header-bar { padding-left: 16px !important; padding-right: 8px !important; }
	.gn-header-bar .gn-btn { padding-left: 16px; gap: 10px; }
	.gn-header-logo-text p:first-child { font-size: 26px !important; }
	.gn-header-logo-text p:last-child { font-size: 10px !important; }
}

/* Mismo hueco entre el navbar y el contenido que el que hay sobre el navbar */
.entry-content.wp-block-post-content { margin-top: var(--gn-nav-gap); }

/* ---- Hero -------------------------------------------------------------- */
.gn-hero {
	border-radius: 30px;
	overflow: hidden;
}
.gn-hero .wp-block-cover__inner-container { position: relative; z-index: 2; }

/* ---- Tarjetas de métricas --------------------------------------------- */
.gn-stat {
	position: relative;
	border-radius: 30px;
	min-height: 142px;
	overflow: hidden;
}
.gn-stat .gn-stat-icon {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 48px;
	height: 48px;
	margin: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	display: flex;
	align-items: center;
	justify-content: center;
}
.gn-stat .gn-stat-icon img { width: 25px; height: 25px; object-fit: contain; }

/* ---- Franja de logos --------------------------------------------------- */
.gn-logos { position: relative; }
.gn-logos::before,
.gn-logos::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 122px;
	z-index: 2;
	pointer-events: none;
}
.gn-logos::before { left: -2px; background: linear-gradient(90deg, var(--wp--preset--color--base), rgba(248,248,248,0)); }
.gn-logos::after { right: -2px; background: linear-gradient(270deg, var(--wp--preset--color--base), rgba(248,248,248,0)); }
.gn-logos .gn-logo-cell {
	min-height: 135px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
}
.gn-logos .gn-logo-cell img { width: auto; object-fit: contain; }

/* ---- Tarjetas de servicios -------------------------------------------- */
.gn-card {
	border-radius: 30px;
	overflow: hidden;
	min-height: 425px;
}
.gn-card .wp-block-cover__inner-container { z-index: 2; }
.gn-icon-circle {
	width: 53px;
	height: 53px;
	/* Dentro de una fila flex el círculo se encogía cuando el texto de al
	   lado no cabía (pantallas estrechas) y dejaba de ser redondo. */
	flex: none;
	margin: 0 0 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	display: flex;
	align-items: center;
	justify-content: center;
}
.gn-icon-circle img { width: 26px; height: 26px; object-fit: contain; }
.gn-icon-circle.is-big { width: 54px; height: 54px; margin-bottom: 0; }
.gn-icon-circle.is-big img { width: 36px; height: 36px; }

/* ---- Sección fotografía / eventos -------------------------------------- */
.gn-event-card {
	background: var(--wp--preset--color--tint);
	border-radius: 30px;
	text-align: center;
}
.gn-event-card .gn-event-logo img { max-height: 75px; width: auto; object-fit: contain; }
.gn-link-underline a {
	color: var(--wp--preset--color--accent) !important;
	text-decoration: underline;
	text-underline-offset: 4px;
	font-weight: 500;
}

/* ---- Tarjetas de proyectos --------------------------------------------- */
.gn-project {
	border-radius: 16px;
	overflow: hidden;
	min-height: 486px;
	position: relative;
}
.gn-project .gn-notch,
.gn-project2 .gn-notch {
	position: absolute;
	/* 1px hacia fuera: el overflow:hidden de la tarjeta lo recorta limpio
	   y nunca asoma la rendija de subpíxel de Chrome */
	right: 0;
	bottom: 0;
	z-index: 3;
	background: var(--wp--preset--color--base);
	/* 1px de pintura alrededor (siguiendo el redondeo): tapa las rendijas de
	   subpíxel sin comerse la curva de la esquina. */
	box-shadow: 0 0 0 1px var(--wp--preset--color--base);
	border-top-left-radius: 20px;
	padding: 11px 1px 12px 16px;
	display: flex;
	gap: 9px;
	margin: 0;
}

/* Curva cóncava a la izquierda del notch (como en Figma): un cuadrado
   absoluto cuyo fondo es blanco salvo un cuarto de círculo transparente,
   que funde la pestaña con el borde inferior de la tarjeta. */
.gn-project .gn-notch::before,
.gn-project2 .gn-notch::before,
.gn-project .gn-notch::after,
.gn-project2 .gn-notch::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	background: radial-gradient(circle 20px at 0 0, rgba(248, 248, 248, 0) 19px, var(--wp--preset--color--base) 20px);
	pointer-events: none;
}
/* Curva de la izquierda: funde la pestaña con el borde inferior */
.gn-project .gn-notch::before,
.gn-project2 .gn-notch::before { left: -19px; bottom: 0; }
/* Curva de arriba a la derecha: funde la pestaña con el borde derecho */
.gn-project .gn-notch::after,
.gn-project2 .gn-notch::after { right: 0; top: -19px; }
.gn-tag {
	display: inline-block;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

/* ---- Testimonios -------------------------------------------------------- */
.gn-testimonial-media {
	position: relative;
	margin-bottom: 0;
}
.gn-testimonial-media img { border-radius: 16px; width: 100%; aspect-ratio: 1; object-fit: cover; }
.gn-testimonial-media .gn-badge {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 68px;
	margin: 0;
}
.gn-carousel-nav { align-items: center; }
.gn-carousel-nav .gn-arrow {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
.gn-carousel-nav .gn-arrow img { width: 22px; height: 22px; }
.gn-carousel-nav .gn-arrow.is-prev img { transform: rotate(180deg); }
.gn-carousel-nav .gn-dots {
	background: var(--wp--preset--color--contrast);
	border-radius: 999px;
	padding: 12px 13px;
	display: flex;
	gap: 10px;
	margin: 0;
}
.gn-carousel-nav .gn-dots span {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--gray);
	display: block;
}
.gn-carousel-nav .gn-dots span:first-child { background: var(--wp--preset--color--base); }

/* ---- CTA final ----------------------------------------------------------- */
.gn-cta {
	position: relative;
	background: var(--wp--preset--color--tint);
	border-radius: 30px;
	overflow: visible;
}
/* (posicionamiento del logo 3D: ver reglas de img.gn-cta-3d en la sección CTA) */

/* ---- Footer --------------------------------------------------------------- */
/* Enlaces y redes centrados verticalmente entre sí */
.gn-footer-top { align-items: center; }
.gn-footer-nav a {
	font-family: var(--wp--preset--font-family--bai-jamjuree);
	font-weight: 700;
	font-size: 28px;
	line-height: 1.25;
	color: var(--wp--preset--color--contrast);
}
.gn-footer-nav a:hover { color: var(--wp--preset--color--accent); }
.gn-social-box {
	background: var(--wp--preset--color--tint);
	border-radius: 16px;
	width: 252px;
	max-width: 100%;
	min-height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gn-social-box img { width: 47px; height: 47px; }
.gn-social-box:hover { background: rgba(37, 64, 103, 0.12); }
/* Tablet y móvil: cajas a la mitad y apiladas */
@media (max-width: 900px) {
	.gn-footer-social { flex-direction: column; gap: 12px; }
	.gn-social-box { width: 126px; min-height: 80px; }
	.gn-social-box img { width: 28px; height: 28px; }
}
.gn-footer-meta p, .gn-footer-meta a { color: var(--wp--preset--color--gray); }
.gn-footer-meta a:hover { color: var(--wp--preset--color--accent); }

/* ---- Utilidades ------------------------------------------------------------ */
.gn-eyebrow {
	font-family: var(--wp--preset--font-family--bai-jamjuree);
	font-weight: 700;
	color: var(--wp--preset--color--accent);
	letter-spacing: 0;
}
.gn-radius-16 { border-radius: 16px; overflow: hidden; }
.gn-radius-20 { border-radius: 20px; overflow: hidden; }
.gn-radius-30 { border-radius: 30px; overflow: hidden; }

/* Títulos con la fuente Inter (intro de servicios, títulos de proyecto) */
.gn-inter-title {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1.15;
}

/* Anchos máximos de texto (fieles al diseño) */
.gn-w-357 { max-width: 357px; }
.gn-w-466 { max-width: 466px; }
.gn-w-520 { max-width: 520px; }
.gn-w-737 { max-width: 737px; }
.gn-w-841 { max-width: 841px; }

/* Altura fluida del hero */
.gn-hero { min-height: clamp(480px, 56vw, 859px) !important; }
@media (max-width: 781px) {
	.gn-hero { min-height: clamp(420px, 90vw, 640px) !important; }
}

/* Ajustes responsive generales */
@media (max-width: 781px) {
	.gn-stat .gn-stat-icon { top: 14px; right: 14px; }
	.gn-project { min-height: 380px; }
	.gn-card { min-height: 340px; }
	.gn-logos::before, .gn-logos::after { width: 48px; }
	.gn-footer-nav a { font-size: 22px; }
}

/* ==========================================================================
   Bloques nativos Guinew (guinew/*)
   ========================================================================== */

/* El padding cuenta HACIA DENTRO del max-width (sin esto, las secciones
   con padding propio —hero, CTA— rebasaban el ancho de contenido de 1140px). */
[class*="gn-"], [class*="gn-"]::before, [class*="gn-"]::after { box-sizing: border-box; }

/* Texto de párrafo con el preset "medium": 18px en vez de los 22 del preset.
   Los <h3> que comparten ese preset se quedan como están (son títulos). */
p.has-medium-font-size { font-size: clamp(15px, 1.35vw, 18px) !important; } /* !important: WP marca los presets con !important */


/* -- Cover genérico: imagen de fondo + overlay -------------------------- */
.gn-cover { position: relative; overflow: hidden; display: flex; }
.gn-cover > .gn-bg, .gn-cover > .gn-media.gn-bg { position: absolute; inset: 0; z-index: 0; }
.gn-cover > img.gn-bg, .gn-cover > .gn-media.gn-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gn-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.gn-cover.is-soft::after { background: linear-gradient(180deg, rgba(37,64,103,0) 35%, rgba(37,64,103,0.7) 100%); }
.gn-cover.is-strong::after { background: linear-gradient(180deg, rgba(37,64,103,0) 50%, rgba(37,64,103,0.85) 100%); }
.gn-cover.is-solid::after { background: linear-gradient(180deg, rgba(37,64,103,0) 50%, #254067 100%); }
.gn-cover.is-flat::after { background: rgba(37,64,103,0.2); }
.gn-cover > .gn-cover-content { position: relative; z-index: 2; }

/* -- Rejillas y utilidades ---------------------------------------------- */
/* Separación entre secciones, por tamaño de pantalla. Tres tramos en todo
   el tema: escritorio (>1024), tablet (≤1024) y móvil (≤600). */
.gn-section { margin-top: 145px; }
@media (max-width: 1024px) {
	.gn-section { margin-top: 110px; }
}
@media (max-width: 600px) {
	.gn-section { margin-top: 85px; }
}
/* Logos y servicios van más pegados: 90px en escritorio, 60 en tablet y
   móvil (el clamp hace la transición, sin saltos entre breakpoints). */
.gn-b-logos, .gn-b-services { margin-top: var(--gn-gap-arriba, clamp(60px, 7vw, 90px)); }
.gn-grid { display: grid; gap: 28px; }
.gn-grid > * { min-width: 0; }
.gn-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.gn-grid.cols-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gn-grid.cols-4 { grid-template-columns: repeat(var(--gn-cols, 4), 1fr); gap: 22px; }
.gn-row { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; }
.gn-row.space-between { justify-content: space-between; }
@media (max-width: 900px) {
	.gn-grid.cols-3, .gn-grid.cols-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.gn-grid.cols-2, .gn-grid.cols-3, .gn-grid.cols-4 { grid-template-columns: 1fr; }
}

/* Torneos en móvil: carrusel de dos en dos ---------------------------------
   En vez de apilarlos en una columna (con 8 torneos la página se hacía
   eterna), se deslizan en horizontal. Es scroll nativo con puntos de anclaje:
   arrastre con inercia en el móvil y sin una línea de JavaScript. */
@media (max-width: 900px) {
	.gn-torneos-grid {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Se sale hasta el borde de la pantalla y el primer/último quedan
		   alineados con el resto del contenido. */
		margin-inline: calc(var(--wp--style--root--padding-left, 24px) * -1);
		padding-inline: var(--wp--style--root--padding-left, 24px);
		scroll-padding-inline: var(--wp--style--root--padding-left, 24px);
	}
	.gn-torneos-grid::-webkit-scrollbar { display: none; }
	.gn-torneos-grid > * {
		flex: 0 0 calc((100% - 14px) / 2);
		scroll-snap-align: start;
	}
}

/* -- Botón píldora (versión enlace) ------------------------------------- */
.gn-btn2 { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 18px; background: var(--wp--preset--color--contrast); border-radius: 999px; padding: 3px 3px 3px 26px; color: var(--wp--preset--color--base); font-weight: 600; letter-spacing: -0.04em; text-decoration: none; transition: color 0.35s ease, background 0.2s ease; }
.gn-btn2 > * { position: relative; z-index: 1; }
.gn-btn2 .c { width: 45px; height: 45px; border-radius: 999px; background: var(--wp--preset--color--base); display: inline-flex; align-items: center; justify-content: center; }
.gn-btn2 .c img { width: 23px; height: 25px; object-fit: contain; }
/* Botón con flecha diagonal (p. ej. «Ver todos»): icono cuadrado */
.gn-b-projects .gn-btn2 .c img { width: 18px; height: 18px; }
.gn-btn2.is-light { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
.gn-btn2.is-light .c { background: var(--wp--preset--color--contrast); }
.gn-btn2.is-plain { padding: 16px 32px 16px 28px; gap: 14px; }
.gn-btn2.is-plain img { width: 22px; }
.gn-btn2.is-simple { padding: 14px 26px; }

/* Hover: el círculo del logo se expande hacia la izquierda como píldora,
   respetando el aro de 3px del botón (no llega a los bordes). */
.gn-btn2:has(.c)::before { content: ""; position: absolute; top: 3px; bottom: 3px; right: 3px; left: calc(100% - 48px); border-radius: 999px; background: var(--wp--preset--color--base); transition: left 0.45s cubic-bezier(0.4, 0, 0.2, 1); z-index: 0; }
.gn-btn2:has(.c):hover::before { left: 3px; }
.gn-btn2:has(.c):hover { color: var(--wp--preset--color--contrast); }
.gn-btn2.is-light:has(.c)::before { background: var(--wp--preset--color--contrast); }
.gn-btn2.is-light:has(.c):hover { color: var(--wp--preset--color--base); }
/* Botones sin círculo: hover simple */
.gn-btn2:not(:has(.c)):hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); }
/* En táctil no hay hover real: el relleno se quedaba "pegado" tras tocar
   y el botón parecía translúcido */
@media (hover: none) {
	.gn-btn2:has(.c):hover::before { left: calc(100% - 48px); }
	.gn-btn2:has(.c):hover { color: var(--wp--preset--color--base); }
	.gn-btn2.is-light:has(.c):hover { color: var(--wp--preset--color--contrast); }
}

/* -- Hero ---------------------------------------------------------------- */
/* Sin radio en las esquinas recortadas (superior-izq. e inferior-dcha.):
   el radio dejaba un filo de 1px asomando tras la franja del recorte. */
.gn-b-hero { border-radius: 0 30px 0 30px; min-height: clamp(480px, 56vw, 859px); align-items: flex-end; padding: 45px; }
.gn-b-hero h1, .gn-b-hero p { margin: 0; }
.gn-b-hero p { margin-top: 14px; }
.gn-b-hero .gn-cover-content { z-index: 3; }

/* Solo en la home: al entrar se ven la barra y la foto enteras. La altura
   que sobra tras la barra y sus huecos, menos 20px de respiro abajo.
   svh = alto de pantalla CON las barras del navegador visibles: así nunca
   desborda ni salta al hacer scroll (vh no las cuenta, dvh va cambiando).
   La foto se recorta centrada arriba y abajo (object-fit: cover). */
body.home .gn-b-hero {
	min-height: calc(100vh - var(--gn-nav-h) - (var(--gn-nav-gap) * 2) - 20px);
	min-height: calc(100svh - var(--gn-nav-h) - (var(--gn-nav-gap) * 2) - 20px);
}
/* El titular del hero: 58px en vez de los 70 del preset (WP marca los
   presets con !important, por eso hace falta aquí también). */
.gn-b-hero h1 { font-size: clamp(40px, 1.4vw + 35.5px, 58px) !important; }

/* Recortes diagonales de las esquinas superior izquierda e inferior derecha
   (como en Figma). Se recorta la propia caja con clip-path: el corte es
   transparente de verdad, no una franja pintada del color del fondo.
   En las tarjetas apilables eso deja ver por el hueco la tarjeta anterior,
   por eso al plegarse se desvanece del todo (ver stack-cards/view.js). */
.gn-b-hero,
.gn-stack-card {
	--gn-chaflan: 150px;
	clip-path: polygon(
		var(--gn-chaflan) 0,
		100% 0,
		100% calc(100% - var(--gn-chaflan)),
		calc(100% - var(--gn-chaflan)) 100%,
		0 100%,
		0 var(--gn-chaflan)
	);
}
/* Restos del sistema anterior (por si queda markup antiguo cacheado) */
.gn-crop { display: none; }

@media (max-width: 781px) {
	.gn-b-hero { padding: 24px; min-height: clamp(420px, 90vw, 640px); }
	/* Mismo corte que las tarjetas de Proyectos en móvil */
	.gn-b-hero { --gn-chaflan: clamp(42px, 14vw, 96px); }
	/* Corte de móvil: 52px en un teléfono de 375, a medio camino entre los
	   60 de las tarjetas de Servicios y los 45 que probamos. */
	.gn-stack-card { --gn-chaflan: clamp(42px, 14vw, 96px); }
}

/* -- Métricas: slider automático tarjeta a tarjeta ------------------------ */
/* El espacio se puede fijar por bloque desde el editor (el mismo bloque
   está en la home y en Nosotros). Las variables las imprime el render;
   si no hay valor, mandan estos. El móvil cae en el valor de escritorio
   cuando no se rellena. */
.gn-b-stats { margin-top: var(--gn-stats-mt, 50px); margin-bottom: var(--gn-stats-mb, 0px); }
.gn-marquee { overflow: hidden; }
/* Cinta a todo el ancho de la pantalla (el envoltorio interior: WP fija los
   márgenes del bloque raíz con !important). Los degradados van pegados al
   borde real, sin los -2px que ahí crearían scroll horizontal. */
.gn-fullbleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.gn-fullbleed::before { left: 0; }
.gn-fullbleed::after { right: 0; }

/* Degradados laterales genéricos (métricas, logos…) */
.gn-fade-x { position: relative; }
.gn-fade-x::before,
.gn-fade-x::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 122px;
	z-index: 2;
	pointer-events: none;
}
.gn-fade-x::before { left: -2px; background: linear-gradient(90deg, var(--wp--preset--color--base), rgba(248,248,248,0)); }
.gn-fade-x::after { right: -2px; background: linear-gradient(270deg, var(--wp--preset--color--base), rgba(248,248,248,0)); }
@media (max-width: 781px) {
	.gn-fade-x::before, .gn-fade-x::after { width: 48px; }
}
.gn-marquee-track { display: flex; gap: 30px; width: max-content; animation: gn-marquee var(--gn-dur, 30s) linear infinite; }
.gn-marquee:hover .gn-marquee-track { animation-play-state: paused; }
@keyframes gn-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-1 * var(--gn-set, 1312px))); }
}
@media (prefers-reduced-motion: reduce) {
	.gn-marquee-track { animation: none; }
}
.gn-marquee .gn-stat2 { width: 298px; flex: 0 0 298px; }

.gn-stat2 { border-radius: 30px; height: 142px; background: var(--wp--preset--color--contrast); padding: 20px 24px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.gn-stat2.is-accent { background: var(--wp--preset--color--accent); }
.gn-stat2 h3 { color: var(--wp--preset--color--white); font-family: var(--wp--preset--font-family--bai-jamjuree); font-weight: 700; font-size: clamp(28px, 3vw, 40px); line-height: 1; margin: 0; }
.gn-stat2 p { color: var(--wp--preset--color--gray-light); margin: 10px 0 0; line-height: 1.25; }
.gn-stat2.is-accent p { color: var(--wp--preset--color--base); }
/* El icono va en la misma fila que la cifra, alineado con ella */
.gn-stat2-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gn-stat2-icon { flex: none; width: 48px; height: 48px; border-radius: 999px; background: var(--wp--preset--color--white); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gn-stat2-icon img { width: 25px; height: 25px; object-fit: contain; }

/* -- Claim ---------------------------------------------------------------- */
.gn-b-claim h2 { margin: 0 auto; }

/* -- Logos: carrusel infinito por sets ------------------------------------ */
/* Alto y hueco de los logos, configurables por tamaño desde el editor: el
   bloque imprime las tres parejas y aquí se decide cuál manda. */
.gn-b-logos { --gn-gap: var(--gn-gap-d, 160px); --gn-logo-h: var(--gn-logo-h-d, 54px); }
@media (max-width: 1024px) {
	.gn-b-logos { --gn-gap: var(--gn-gap-t, 120px); --gn-logo-h: var(--gn-logo-h-t, 54px); }
}
@media (max-width: 600px) {
	.gn-b-logos { --gn-gap: var(--gn-gap-m, 60px); --gn-logo-h: var(--gn-logo-h-m, 54px); }
}
/* Desplazar (-100% - gap)/copias equivale exactamente a un set,
   así el bucle no tiene costura aunque los logos tengan anchos distintos. */
.gn-marquee-track.is-sets { display: flex; gap: var(--gn-gap, 100px); width: max-content; animation: gn-marquee-set var(--gn-dur, 30s) linear infinite; }
.gn-marquee-set { display: flex; gap: var(--gn-gap, 100px); align-items: center; flex: none; }
.gn-marquee-set img { display: block; max-width: none; }
@keyframes gn-marquee-set {
	from { transform: translateX(0); }
	to { transform: translateX(calc((-100% - var(--gn-gap, 100px)) / var(--gn-copies, 2))); }
}
.gn-marquee:hover .gn-marquee-track.is-sets { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.gn-marquee-track.is-sets { animation: none; }
}

/* Vista del editor (rejilla estática) */
.gn-logos-row { display: flex; gap: 60px; align-items: center; flex-wrap: wrap; }
.gn-logos-row .gn-logo-cell { flex: none; }
.gn-logos-row .gn-media img { height: var(--gn-logo-h, 60px); width: auto; max-width: none; }

/* -- Servicios ------------------------------------------------------------ */
.gn-b-services .gn-eyebrow { margin: 0 0 20px; }
.gn-b-services > h2 { margin: 0; }
.gn-cover.gn-card2 { align-items: flex-end; }
.gn-card2 { border-radius: 30px; min-height: 425px; padding: 38px; }
.gn-card2 h3 { margin: 0; }
.gn-featured { background: var(--wp--preset--color--contrast); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 26px; padding: 44px 47px 38px; }
.gn-featured p { margin: 0; }
/* width:100% + align-self:stretch — el revés alinea a la izquierda y el
   contenedor se encogía al contenido; con etiquetas cortas quedaba más
   estrecho que el flex-basis de los ítems y el tercero saltaba de fila.
   flex:1 1 0 reparte el ancho a partes iguales sin depender del texto. */
.gn-featured-items { display: flex; gap: 24px; flex-wrap: nowrap; width: 100%; align-self: stretch; }
.gn-featured-items > div { flex: 1 1 0; min-width: 0; }
.gn-featured-items .gn-icon-circle { margin-bottom: 12px; }
@media (max-width: 781px) {
	.gn-card2 { min-height: 340px; }
}

/* -- Servicios: tarjetas reversibles (flip 3D) ---------------------------- */
.gn-flip-grid { perspective: 1600px; }
.gn-flip { position: relative; display: grid; min-height: 425px; perspective: 1400px; outline: none; }
.gn-flip-inner { position: relative; min-height: 425px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.35, 0.1, 0.25, 1); }
/* Hover solo en dispositivos con hover real (en táctil el toque ya voltea
   y el hover fantasma de iOS provocaba doble giro) */
@media (hover: hover) {
	.gn-flip:hover .gn-flip-inner { transform: rotateY(180deg); }
}
.gn-flip.is-flipped .gn-flip-inner { transform: rotateY(180deg); }
@media (hover: hover) {
	.gn-flip:hover .gn-flip-front { opacity: 0; }
	.gn-flip:hover .gn-flip-back { opacity: 1; }
}
.gn-flip.is-flipped .gn-flip-front { opacity: 0; }
.gn-flip.is-flipped .gn-flip-back { opacity: 1; }
/* En Safari de iOS backface-visibility falla cuando la cara además recorta
   contenido (overflow + border-radius): se colaba el título del anverso al
   revés por encima del reverso. Refuerzos:
   1) las caras se separan en Z, para que no compartan plano;
   2) se relevan con opacidad justo cuando la tarjeta está de canto (~0,23s
      de los 0,7s de giro, por la curva de la transición). El cambio es
      instantáneo (0s) y a esa altura la tarjeta es una línea: no se ve. */
.gn-flip-front, .gn-flip-back {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: 30px;
	overflow: hidden;
	transition: opacity 0s linear 0.23s;
}
.gn-flip-front { -webkit-transform: translateZ(1px); transform: translateZ(1px); display: flex; align-items: flex-end; padding: 38px; }
.gn-flip-front h3 { margin: 0; }
/* overflow: auto convertía la cara en contenedor de scroll y Safari la
   compone aparte, perdiendo el backface-visibility. El texto ya está
   limitado a 4 líneas, así que no hace falta que pueda deslizarse. */
.gn-flip-back { -webkit-transform: rotateY(180deg) translateZ(1px); transform: rotateY(180deg) translateZ(1px); background: var(--wp--preset--color--contrast); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 22px; padding: 38px 42px 32px; overflow: hidden; opacity: 0; }
.gn-flip-back p, .gn-flip-back h3 { margin: 0; }
/* La descripción no puede desbordar: máx. 4 líneas; el título nunca se encoge */
.gn-flip-back > p.has-medium-font-size { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.gn-flip-back > h3 { flex-shrink: 0; }
/* En anchos medios el reverso se compacta para que el título quepa siempre:
   características en columna con el icono al lado */
@media (max-width: 1100px) {
	.gn-flip-back { gap: 14px; padding: 24px 26px 20px; }
	.gn-flip-back p.has-medium-font-size { font-size: 14px; }
	.gn-flip-back h3 { font-size: 18px; }
	.gn-flip-back .gn-featured-items { flex-direction: column; gap: 8px; }
	.gn-flip-back .gn-featured-items > div { display: flex; align-items: center; gap: 10px; flex: none; }
	.gn-flip-back .gn-icon-circle { width: 32px; height: 32px; margin-bottom: 0; flex: none; }
	.gn-flip-back .gn-icon-circle img { width: 16px; height: 16px; }
	.gn-flip-back .gn-featured-items p { font-size: 13px; }
}
@media (max-width: 781px) {
	.gn-flip, .gn-flip-inner { min-height: 440px; }
}

/* Entrada al hacer scroll: se despliegan escalonadas. Va sobre el
   CONTENEDOR (no sobre .gn-flip-inner) para no interferir nunca con el
   giro — antes, si la transición de entrada se interrumpía, los flips
   quedaban rotos hasta recargar. */
.gn-flip.gn-reveal { opacity: 0; transform: rotateY(55deg); }
.gn-flip.gn-reveal.is-in {
	opacity: 1;
	transform: none;
	transition:
		transform 0.8s cubic-bezier(0.3, 0.7, 0.3, 1) calc(var(--gn-i, 0) * 0.12s),
		opacity 0.45s ease calc(var(--gn-i, 0) * 0.12s);
}
@media (prefers-reduced-motion: reduce) {
	.gn-flip.gn-reveal { transform: none; opacity: 1; transition: none; }
}

/* Edición de tarjetas reversibles */
.gn-edit-back { border: 1px dashed rgba(37, 64, 103, 0.35); border-radius: 12px; padding: 14px; margin-top: 10px; background: rgba(37, 64, 103, 0.04); }
.gn-edit-back .gn-edit-backtext { font-size: 14px; margin: 0 0 10px; }
.gn-edit-features { display: flex; gap: 12px; flex-wrap: wrap; }
.gn-edit-feature { flex: 1 1 110px; }
.gn-edit-feature p { font-size: 12px; margin: 4px 0 0; }

/* -- Slider genérico (proyectos, testimonios) ----------------------------- */
.gn-slider { overflow: hidden; cursor: grab; }
.gn-slider.is-dragging { cursor: grabbing; }
.gn-slider-track { display: flex; gap: 20px; touch-action: pan-y; will-change: transform; }
.gn-slider-track > * { flex: none; }
.gn-slider-track a { -webkit-user-drag: none; }

.gn-arrow-btn { width: 44px; height: 44px; border-radius: 999px; border: none; background: var(--wp--preset--color--contrast); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background 0.2s ease; }
.gn-arrow-btn:hover { background: var(--wp--preset--color--accent); }
.gn-arrow-btn img { width: 22px; height: 22px; }
.gn-arrow-btn.is-prev img { transform: rotate(180deg); }
.gn-arrow-btn.is-sm { width: 34px; height: 34px; }
.gn-slider-arrows { display: inline-flex; gap: 8px; }

/* Proyectos: el slider se sale del contenedor (hasta 1920px).
   (body overflow-x clip: el 100vw incluye la barra de scroll y sin esto
   asoman ~8px de desbordamiento horizontal) */
/* El 100vw de las cintas a sangre incluye el ancho de la barra de scroll, así
   que asoman ~8px por cada lado. Se recortan en el contenedor del sitio, que
   sí mide el ancho visible: el «clip» de body no siempre llega al viewport
   (depende de la propagación) y dejaba scroll horizontal en Servicios.
   clip (no hidden) para no crear un contenedor de scroll y no romper el
   header sticky. */
body,
.wp-site-blocks { overflow-x: clip; }
.gn-projects-strip { margin-left: calc(50% - min(50vw, 960px)); margin-right: calc(50% - min(50vw, 960px)); }
.gn-b-projects .gn-slider-track > * { width: min(632px, 85vw); }
/* El titular deja sitio al botón «Ver todos», que va a su derecha. En
   móvil el botón baja debajo del slider y el título se lleva todo. */
.gn-projects-head { row-gap: 16px; }
.gn-projects-head > h2 { max-width: 70%; }
.gn-projects-cta { display: flex; align-items: center; gap: 14px; }

/* Móvil: el botón «Ver todos» baja centrado debajo del slider.
   La cabecera pasa a display:contents para que el título y el botón sean
   hijos directos de la sección y se puedan reordenar con «order». */
@media (max-width: 781px) {
	.gn-b-projects { display: flex; flex-direction: column; }
	.gn-projects-head { display: contents; }
	.gn-projects-head > h2 { max-width: 100%; }
	.gn-b-projects > .gn-projects-strip { order: 2; }
	.gn-projects-cta { order: 3; align-self: center; margin-top: 36px; }
}

/* Testimonios: slider con controles abajo */
.gn-b-testimonials .gn-slider-track > * { width: calc((100% - 40px) / 3); }
@media (max-width: 900px) {
	.gn-b-testimonials .gn-slider-track > * { width: calc((100% - 20px) / 2); }
}
@media (max-width: 600px) {
	.gn-b-testimonials .gn-slider-track > * { width: 100%; }
}
.gn-dots { background: var(--wp--preset--color--contrast); border-radius: 999px; padding: 12px 13px; display: flex; gap: 10px; }
.gn-dots button { width: 10px; height: 10px; border-radius: 999px; border: none; background: var(--wp--preset--color--gray); padding: 0; cursor: pointer; }
.gn-dots button.is-active { background: var(--wp--preset--color--base); }

/* -- Fotografía ------------------------------------------------------------ */
.gn-b-photo > h2, .gn-b-photo > p { margin: 0; }
.gn-b-photo > p { margin-top: 36px; }
.gn-format { display: flex; gap: 22px; align-items: center; margin-bottom: 10px; }
.gn-format h3, .gn-format p { margin: 0; }
.gn-format p { margin-top: 6px; }
/* El botón va centrado en la foto, como en Figma (antes colgaba abajo) */
.gn-photo-big { border-radius: 30px; min-height: clamp(420px, 45vw, 700px); align-items: center; justify-content: center; padding: 24px; overflow: hidden; }
.gn-photo-big > video.gn-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }
.gn-photo-play { border: none; cursor: pointer; font: inherit; }
/* El triángulo del SVG apunta hacia arriba: aquí se gira, igual que en .gn-play-tri */
.gn-photo-big .gn-btn2 img { width: 19px; height: 19px; object-fit: contain; transform: rotate(90deg); }
.gn-photo-big.is-playing .gn-cover-content,
.gn-photo-big.is-playing::after { opacity: 0; pointer-events: none; }
.gn-photo-big .gn-cover-content { transition: opacity 0.25s ease; }
.gn-event2 { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 30px; padding: 38px 28px; }
.gn-event2 h3, .gn-event2 p { margin: 0; }
/* Sobre el gap de 30px: la fecha sube hasta quedar a 18px del nombre y el
   enlace baja hasta 50px, como en el diseño. */
.gn-event2 p:not(.gn-link-underline) { margin-top: -12px; }
.gn-event2 .gn-link-underline { margin-top: 20px; }
.gn-event2 .gn-event-logo { max-width: 100%; }
.gn-event2 .gn-event-logo img { max-height: 75px; max-width: 100%; width: auto; height: auto; object-fit: contain; }

/* -- Proyectos ------------------------------------------------------------- */
.gn-b-projects h2 { margin: 0; }
.gn-project2 { border-radius: 16px; border-bottom-right-radius: 0; min-height: 486px; align-items: flex-end; padding: 36px 38px; }

/* El título vive fuera de la tarjeta (así en móvil puede caer debajo de la
   foto). En escritorio se superpone sobre ella, abajo a la izquierda. */
.gn-project-slide { position: relative; }
.gn-project-title {
	position: absolute;
	left: 38px;
	bottom: 36px;
	z-index: 3;
	max-width: 357px;
	margin: 0;
	color: var(--wp--preset--color--base);
	/* Mismo tamaño que antes con la clase «has-large-font-size» (L · 32) */
	font-size: var(--wp--preset--font-size--large);
}
/* El título sube cuando pisaría el notch de etiquetas (clase puesta por JS) */
.gn-project2.has-notch-clash + .gn-project-title { bottom: 76px; }

@media (max-width: 781px) {
	.gn-project2 { min-height: 380px; }
	/* Móvil: el título sale de la foto y se lee en azul debajo. */
	.gn-project-title {
		position: static;
		max-width: none;
		margin-top: 16px;
		color: var(--wp--preset--color--contrast);
		font-size: 18px;
	}
	/* Sin el velo azul: la foto queda limpia */
	.gn-project2.is-solid::after { background: none; }
}

/* -- Testimonios ------------------------------------------------------------ */
.gn-b-testimonials > h2 { margin: 0; }
.gn-testimonial-media img.gn-badge { width: 68px; height: 68px; border-radius: 0; }

/* -- CTA --------------------------------------------------------------------- */
/* !important: el layout de WP mete margin-block-end:0 con la misma
   especificidad y ganaba por orden de carga */
.gn-b-cta { padding: 64px 52px; margin-top: 230px; margin-bottom: 40px !important; }
.gn-b-cta h2, .gn-b-cta p { margin: 0; }
/* Titular a 58px, bajando de forma fluida hasta 32 en pantallas pequeñas.
   !important porque WordPress declara así las clases de tamaño de fuente
   (.has-giant-font-size) y si no, gana el preset de 64px. */
.gn-b-cta h2 { font-size: clamp(32px, 4.4vw, 56px) !important; }
.gn-b-cta p { margin-top: 26px; margin-bottom: 10px; }
/* Botón abajo a la derecha y logo 3D flotando: sobresale por arriba
   de la caja (como en Figma) */
.gn-b-cta .gn-btn2 { position: absolute; right: 52px; bottom: 56px; z-index: 2; }
/* Anchos calculados para que el logo ocupe el mismo alto que la versión
   anterior del render, que era más ancha y menos alta (502×518 → 502×559). */
img.gn-cta-3d { position: absolute; right: 220px; top: -120px; width: min(450px, 37%); z-index: 1; pointer-events: none; animation: gn-float 3.3s ease-in-out infinite; }
@keyframes gn-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-19px); }
}
@media (prefers-reduced-motion: reduce) {
	img.gn-cta-3d { animation: none; }
}
/* Hasta 1100px el logo no cabe flotando a la derecha: rozaba el bloque de
   arriba y su punta llegaba al botón. Se pasa a la misma composición que en
   móvil: logo grande y centrado encima de la caja, y el texto debajo.
   El orden del DOM se cambia con «order» porque la imagen va la última. */
@media (max-width: 1100px) {
	.gn-b-cta {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		/* hueco para la parte del logo que sobresale por encima */
		margin-top: 290px;
		margin-bottom: 0 !important;
	}
	.gn-b-cta h2,
	.gn-b-cta p { align-self: stretch; }
	img.gn-cta-3d {
		order: -1;
		position: static;
		align-self: center;
		width: min(300px, 80%);
		/* el margen negativo lo saca por encima del borde de la caja: queda
		   fuera ~3/4 del logo y el resto pisa la caja.
		   Abajo poco margen: la imagen ya trae su sombra debajo. */
		margin: -300px 0 4px;
		right: auto;
		top: auto;
	}
	/* relative (no static): el ::before del hover es absoluto y necesita
	   que el botón siga siendo su ancla */
	.gn-b-cta .gn-btn2 { position: relative; right: auto; bottom: auto; }
}
/* Móvil: mismo esquema con el logo y los márgenes más contenidos */
@media (max-width: 600px) {
	.gn-b-cta { padding: 40px 28px; margin-top: 260px; }
	img.gn-cta-3d { width: min(260px, 80%); margin: -229px 0 4px; }
	.gn-featured { padding: 32px 28px; }
	.gn-card2 { padding: 28px; }
	.gn-project2 { padding: 28px; }
}

/* ==========================================================================
   Controles del editor (repetidores, imágenes clicables)
   ========================================================================== */
.gn-media { position: relative; display: block; cursor: pointer; }
.gn-media img { display: block; max-width: 100%; }
/* Cuando el selector de imagen envuelve elementos posicionados, debe
   respetar su colocación y centrado (el editor los pisaba). */
.gn-media.gn-stat2-icon { display: flex; }
.gn-media.gn-icon-circle { display: flex; }
.gn-media.gn-cta-3d { position: absolute; right: 48px; top: -120px; width: min(450px, 37%); }
.gn-media:hover::after { content: "Cambiar imagen"; position: absolute; right: 8px; bottom: 8px; background: #254067; color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 99px; z-index: 5; }
.gn-media-empty { display: flex; align-items: center; justify-content: center; background: rgba(37,64,103,0.07); border: 1px dashed #4a82c6; border-radius: 8px; min-height: 80px; min-width: 120px; font-size: 13px; color: #254067; padding: 10px; text-align: center; }
.gn-cover .gn-media.gn-bg .gn-media-empty { min-height: 100%; }
.gn-item { position: relative; }
.gn-itembar { position: absolute; top: 6px; right: 6px; z-index: 9; display: flex; gap: 4px; }
.gn-itembar button { width: 26px; height: 26px; border-radius: 99px; border: none; background: #254067; color: #fff; cursor: pointer; line-height: 1; font-size: 13px; padding: 0; }
.gn-itembar button.is-del { background: #c00000; }
.gn-itembar button:hover { opacity: 0.85; }
.gn-addbtn.components-button { margin-top: 12px; }
.gn-hint { font-size: 12px; font-style: italic; color: #757575; margin: 8px 0 0; }
/* En el editor: lo que sale de otro sitio (torneos) se ve pero no se toca. */
.gn-solo-lectura { pointer-events: none; user-select: none; }
.gn-colorbtn { position: absolute; top: 6px; left: 6px; z-index: 9; width: 26px; height: 26px; border-radius: 99px; border: 2px solid #fff; background: var(--wp--preset--color--contrast); cursor: pointer; padding: 0; }
.gn-colorbtn.is-on { background: var(--wp--preset--color--accent); }
/* Herramientas por tarjeta en el editor de servicios partidos */
.gn-split-tools { position: absolute; top: 6px; left: 6px; z-index: 9; display: flex; gap: 6px; }
.gn-split-tools .gn-colorbtn,
.gn-split-tools .gn-swapbtn { position: static; }
.gn-split-tools .gn-colorbtn.is-light { background: var(--wp--preset--color--tint); }
.gn-swapbtn { width: 26px; height: 26px; border-radius: 99px; border: 2px solid #fff; background: var(--wp--preset--color--accent); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; }

/* ==========================================================================
   Cabecera de página interior (guinew/page-header)
   ========================================================================== */
.gn-b-pagehead { position: relative; margin-top: 90px !important; }
.gn-ph-eyebrow { margin: 0 0 44px; font-size: 16px; }
/* align-items: stretch para que la columna del título tenga el alto de la de
   la derecha y el enlace pueda caer abajo del todo */
.gn-ph-grid { display: flex; justify-content: space-between; align-items: stretch; gap: 48px; }
.gn-ph-left { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-width: 0; }
.gn-ph-title { margin: 0; font-family: var(--wp--preset--font-family--bai-jamjuree); font-weight: 700; font-size: clamp(34px, 4.3vw, 60px); line-height: 0.97; letter-spacing: -0.01em; color: var(--wp--preset--color--contrast); max-width: 660px; }
.gn-ph-right { flex: none; width: min(384px, 38%); display: flex; flex-direction: column; gap: 28px; }
.gn-ph-watermark { width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, 0) 95%); mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, 0) 95%); }
.gn-ph-text { margin: 0; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.1; letter-spacing: -0.04em; color: var(--wp--preset--color--contrast); font-weight: 500; }
/* align-self: flex-start para que el subrayado mida lo que el texto y no toda
   la columna */
.gn-ph-link { display: inline-flex; align-self: flex-start; align-items: center; gap: 12px; margin-top: 0; color: var(--wp--preset--color--accent); font-weight: 500; font-size: 16px; letter-spacing: -0.04em; text-decoration: none; border-bottom: 1.5px solid var(--wp--preset--color--accent); padding-bottom: 9px; transition: gap 0.25s ease; }
.gn-ph-link:hover { gap: 20px; color: var(--wp--preset--color--accent); }
.gn-ph-link img { width: 12px; height: 12px; }
.gn-ph-divider { border: none; border-top: 1px solid rgba(37, 64, 103, 0.18); margin: 112px 0 0; }
@media (max-width: 781px) {
	.gn-b-pagehead { margin-top: 56px !important; }
	.gn-ph-divider { margin-top: 68px; }
	.gn-ph-eyebrow { margin-bottom: 24px; }
	.gn-ph-grid { flex-direction: column; gap: 62px; }
	/* display: contents — el título y el enlace pasan a ser hijos de la
	   rejilla para poder reordenarlos: título, marca de agua y el enlace al
	   final, como estaba antes de meterlo dentro de la columna. */
	.gn-ph-left { display: contents; }
	.gn-ph-right { width: 100%; order: 2; }
	.gn-ph-watermark { max-width: 240px; align-self: center; }
	.gn-ph-wm-text { text-align: left; }
	/* -24px: el hueco de la rejilla es de 48 y aquí queremos los 24 de antes */
	.gn-ph-link { order: 3; margin-top: -24px; font-size: 15px; }
}

/* ==========================================================================
   Tarjetas apilables al scroll (guinew/stack-cards)
   ========================================================================== */
.gn-b-stack { margin-top: clamp(40px, 6vw, 80px); padding-bottom: 0; }
/* La tarjeta ocupa toda la pantalla por debajo del punto donde se queda
   pegada, menos un poco de aire abajo: así se ve entera mientras se apila.
   svh = alto de pantalla CON las barras del navegador visibles; vh se calcula
   sin ellas y en móvil la tarjeta se salía por abajo. vh queda de respaldo. */
/* Las tarjetas se clavan 21px por debajo de la barra: si la barra cambia
   de altura, esto la sigue solo. */
:root { --gn-stack-top: calc(var(--gn-nav-gap) + var(--gn-nav-h) + 21px); --gn-stack-aire: 28px; }
.gn-stack-card {
	position: sticky;
	top: var(--gn-stack-top);
	height: calc(100vh - var(--gn-stack-top) - var(--gn-stack-aire));
	height: calc(100svh - var(--gn-stack-top) - var(--gn-stack-aire));
	min-height: 360px;
	border-radius: 0 30px 0 30px;
	align-items: flex-end;
	padding: 40px;
	margin-bottom: clamp(44px, 6.5vw, 95px);
	transform-origin: center top;
	will-change: transform, opacity, filter;
}
.gn-stack-card:last-of-type { margin-bottom: 0; }
.gn-stack-body { max-width: 780px; }
.gn-stack-body h2 { margin: 0; line-height: 0.95; }
.gn-stack-body p { margin: 18px 0 0; color: var(--wp--preset--color--white); font-weight: 600; font-size: clamp(15px, 1.4vw, 18px); letter-spacing: -0.04em; max-width: 716px; }
.gn-stack-plus { position: absolute; top: 31px; right: 35px; z-index: 3; width: 42px; height: 42px; border-radius: 999px; background: var(--wp--preset--color--white); display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease; }
.gn-stack-plus img { width: 14px; height: 14px; }
/* La tarjeta entera es clicable: el enlace se estira por encima de todo.
   La flecha va dentro, así que el hover se activa desde cualquier punto. */
.gn-stack-link { position: absolute; inset: 0; z-index: 4; display: block; }
.gn-stack-link:hover .gn-stack-plus { transform: scale(1.15); }
/* En el editor no interesa que ocupen la pantalla entera */
.gn-stack-card.is-editor { position: relative; top: auto; height: auto; min-height: 420px; margin-bottom: 24px; }
/* Entre el móvil y los 900px la tarjeta se estrecha pero el chaflán sigue
   siendo el de escritorio (150px): la primera línea del párrafo se metía
   ~17px en la diagonal. */
@media (min-width: 782px) and (max-width: 900px) {
	.gn-stack-body { padding-right: 50px; }
}
@media (max-width: 781px) {
	.gn-stack-card { top: 125px; }
	.gn-stack-plus { top: 18px; right: 18px; }
	/* El chaflán de abajo a la derecha (90px) se comía la última línea: a la
	   altura del padding de abajo el borde útil llega 50px antes que el de la
	   tarjeta, y el texto llegaba hasta 40. Con esto se queda a 14px de la
	   diagonal. */
	.gn-stack-body { padding-right: 24px; }
}

/* ==========================================================================
   Marca de agua de texto en cabecera de página (ej. "06")
   ========================================================================== */
/* El número escala con el ancho de su columna (como en Figma, donde ocupa
   lo mismo que el logo). cqw = % del ancho del contenedor. */
.gn-ph-right { container-type: inline-size; }
/* padding/margin a la derecha: el letter-spacing negativo dejaba el último
   dígito fuera de la caja y la máscara del degradado se lo comía */
/* La caja se estira hacia la izquierda (margin-left negativo) para que quepan
   textos de más de dos caracteres como «+10»: va alineada a la derecha, y el
   mask-image del degradado recorta todo lo que sobresalga de la caja. */
.gn-ph-wm-text { display: block; font-family: var(--wp--preset--font-family--bai-jamjuree); font-weight: 700; font-size: clamp(130px, 18vw, 300px); font-size: min(82cqw, 315px); line-height: 0.75; letter-spacing: -0.05em; padding-right: 14px; margin-right: -14px; margin-left: -60%; color: rgba(163, 163, 163, 0.15); text-align: right; white-space: nowrap; -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, 0) 95%); mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, 0) 95%); }
/* En móvil la marca de agua (número o logo) va pegada a la izquierda y
   algo menor: sin el margen negativo, que es lo que la sacaba de la caja. */
@media (max-width: 781px) {
	.gn-ph-wm-text { text-align: left; font-size: min(58cqw, 230px); margin-left: 0; }
}

/* ==========================================================================
   Servicios partidos (guinew/split-services)
   ========================================================================== */
.gn-b-split { margin-top: clamp(40px, 5vw, 84px); }

/* Desplazamiento suave al pulsar los chips (y cualquier ancla del sitio) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Chips índice */
.gn-split-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* Chip en columna flex: fila superior (número + botón) y título abajo */
.gn-chip { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; background: var(--wp--preset--color--tint); border-radius: 15px; min-height: clamp(150px, 14vw, 203px); padding: 24px; text-decoration: none; transition: background 0.25s ease; }
.gn-chip:hover { background: rgba(37, 64, 103, 0.12); }
.gn-chip-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.gn-chip-num { display: block; font-family: var(--wp--preset--font-family--bai-jamjuree); font-weight: 700; font-size: 16px; color: var(--wp--preset--color--accent); }
.gn-chip-title { width: 100%; margin: 0; font-family: var(--wp--preset--font-family--bai-jamjuree); font-weight: 700; font-size: clamp(20px, 1.9vw, 32px); line-height: 0.95; color: var(--wp--preset--color--contrast); }
.gn-chip-btn { flex: none; width: 41px; height: 41px; border-radius: 999px; background: var(--wp--preset--color--contrast); display: flex; align-items: center; justify-content: center; transition: background 0.25s ease, transform 0.25s ease; }
/* La flecha del tema apunta arriba-derecha: girarla para que señale abajo */
.gn-chip-btn img { width: 16px; height: 16px; transform: rotate(135deg); }
.gn-chip:hover .gn-chip-btn { background: var(--wp--preset--color--accent); transform: translateY(3px); }
.gn-split-divider { margin: clamp(48px, 6vw, 85px) 0 0; }
@media (max-width: 900px) { .gn-split-index { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .gn-split-index { grid-template-columns: 1fr; } .gn-chip { min-height: 130px; } }

/* Tarjetas partidas */
/* Alto y márgenes calcados de las tarjetas apilables de Proyectos: la
   pantalla menos lo que tapa la barra (--gn-stack-top) y un poco de aire
   abajo (--gn-stack-aire), así se ve la tarjeta entera de un vistazo.
   svh = alto CON las barras del navegador visibles; vh queda de respaldo. */
.gn-split-card {
	display: flex;
	margin-top: clamp(64px, 8vw, 120px);
	scroll-margin-top: 130px;
	height: calc(100vh - var(--gn-stack-top) - var(--gn-stack-aire) - 40px);
	height: calc(100svh - var(--gn-stack-top) - var(--gn-stack-aire) - 40px);
	min-height: 360px;
}
.gn-split-card.is-photo-right { flex-direction: row-reverse; }
/* Mismo ancho exacto ambas piezas; sin ningún border-radius (como el Figma) */
.gn-split-piece { position: relative; overflow: hidden; border-radius: 0; min-height: 0; flex: 1 1 50%; min-width: 0; will-change: transform, opacity; }
/* La pieza de la izquierda invade 1px la junta: sin esto asoma una línea
   fina cuando el ancho del contenedor cae en medio píxel */
.gn-split-piece.is-left { margin-right: -1px; }

/* Cortes de esquina con clip-path (un solo borde antialiasado: nunca deja
   la línea fina que sí dejaban las bandas superpuestas).
   Izquierda corta arriba-dcha y abajo-izq; derecha, arriba-izq y abajo-dcha. */
.gn-b-split { --gn-cut: clamp(70px, 9.2vw, 127px); --gn-pad: clamp(28px, 4.2vw, 61px); }
/* Radio de 32px solo en la esquina superior exterior de cada pieza
   (las de la junta y las cortadas van rectas, como en Figma) */
.gn-split-piece.is-left { border-radius: 32px 0 0 0; }
.gn-split-piece.is-right { border-radius: 0 32px 0 0; }
.gn-split-piece.is-left {
	clip-path: polygon(
		0 0,
		calc(100% - var(--gn-cut)) 0,
		100% var(--gn-cut),
		100% 100%,
		var(--gn-cut) 100%,
		0 calc(100% - var(--gn-cut))
	);
}
.gn-split-piece.is-right {
	clip-path: polygon(
		var(--gn-cut) 0,
		100% 0,
		100% calc(100% - var(--gn-cut)),
		calc(100% - var(--gn-cut)) 100%,
		0 100%,
		0 var(--gn-cut)
	);
}
.gn-split-piece.is-photo img.gn-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gn-split-piece.is-content { background: var(--wp--preset--color--tint); padding: var(--gn-pad, 61px); display: flex; flex-direction: column; }
.gn-split-piece.is-content.is-navy { background: var(--wp--preset--color--contrast); }

.gn-split-piece .gn-chip-num { margin-bottom: 22px; }
.is-photo-left .gn-split-piece.is-content .gn-chip-num,
.is-photo-left .gn-split-piece.is-content .gn-split-title { text-align: right; }
.gn-split-title { margin: 0 0 34px; font-family: var(--wp--preset--font-family--bai-jamjuree); font-weight: 700; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; color: var(--wp--preset--color--contrast); }
.is-navy .gn-split-title { color: var(--wp--preset--color--base); }
.gn-split-text { margin: 0; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.5; letter-spacing: -0.02em; color: #8f8f8f; text-align: justify; font-weight: 500; }
.is-navy .gn-split-text { color: rgba(248, 248, 248, 0.85); }

.gn-split-features { display: flex; gap: clamp(20px, 3vw, 38px); margin-top: auto; padding-top: 30px; }
/* Las características se alinean hacia el centro de la composición
   (depende del lado del texto, no del color) */
.is-photo-right .gn-split-piece.is-content .gn-split-features { justify-content: flex-end; }
.gn-split-features > div { max-width: 110px; }
.gn-split-features .gn-icon-circle { margin-bottom: 14px; }
.gn-split-features p { margin: 0; font-size: 13px; line-height: 1.15; letter-spacing: -0.04em; color: #8f8f8f; }
.is-navy .gn-split-features p { color: var(--wp--preset--color--white); }

.gn-split-link { margin-top: auto; align-self: flex-end; }

/* Zona segura: la fila inferior nunca entra en la diagonal del recorte.
   A la altura de esa fila el corte se come (corte − padding); se reserva
   ese ancho más un respiro de 10px en el lado cortado. */
.gn-split-piece.is-left .gn-split-features { padding-left: max(0px, calc(var(--gn-cut) - var(--gn-pad) + 10px)); }
.gn-split-piece.is-right .gn-split-features { padding-right: max(0px, calc(var(--gn-cut) - var(--gn-pad) + 10px)); }
.gn-split-piece.is-right .gn-split-link { margin-right: max(0px, calc(var(--gn-cut) - var(--gn-pad) + 10px)); }
.is-navy .gn-split-link { color: var(--wp--preset--color--base); border-bottom-color: var(--wp--preset--color--base); }

/* Chaflanes: bandas del color de fondo rotadas 45º sobre dos esquinas opuestas */
/* (Los chaflanes se hacen ahora con clip-path — ver arriba) */

/* Editor y móvil */
.gn-split-card.is-editor .gn-split-piece { min-height: 420px; }
/* Móvil y tablet: imagen arriba y texto debajo, con los chaflanes del Figma */
@media (max-width: 900px) {
	.gn-split-card,
	.gn-split-card.is-photo-right { flex-direction: column; }
	/* Apiladas la tarjeta llega casi al borde de abajo: con más aire se veía
	   asomar la siguiente. Es mínimo, no fijo, para que crezca antes que
	   recortar el texto en pantallas cortas. */
	.gn-split-card {
		height: auto;
		min-height: calc(100vh - var(--gn-stack-top) - 20px);
		min-height: calc(100svh - var(--gn-stack-top) - 20px);
	}
	/* Misma especificidad que las reglas de clip-path de escritorio; ganan
	   estas por ir después */
	.gn-split-piece,
	.gn-split-piece.is-left,
	.gn-split-piece.is-right { min-height: 0; margin-right: 0; transform: none !important; opacity: 1 !important; clip-path: none; border-radius: 0; }

	/* Chaflán medido en el Figma móvil: 107px sobre una tarjeta de 645 (16,6%
	   del ancho); las esquinas de fuera llevan radio y las de la junta van a
	   escuadra. La foto corta arriba-izquierda y abajo-derecha, y el texto
	   arriba-derecha y abajo-izquierda: los dos cortes de la junta forman el
	   rombo del diseño. */
	.gn-b-split { --gn-cut: clamp(48px, 16vw, 110px); --gn-pad: 28px; }
	.gn-split-piece.is-photo {
		border-radius: 0 20px 0 0;
		clip-path: polygon(
			var(--gn-cut) 0,
			100% 0,
			100% calc(100% - var(--gn-cut)),
			calc(100% - var(--gn-cut)) 100%,
			0 100%,
			0 var(--gn-cut)
		);
	}
	.gn-split-piece.is-content {
		border-radius: 0 0 20px 0;
		clip-path: polygon(
			0 0,
			calc(100% - var(--gn-cut)) 0,
			100% var(--gn-cut),
			100% 100%,
			var(--gn-cut) 100%,
			0 calc(100% - var(--gn-cut))
		);
	}
	/* La foto casi tan alta como el bloque de texto, como en el Figma. No se
	   usa la proporción del mock (645×504) porque a estos anchos el texto
	   ocupa bastante más y la foto quedaba en un tercio. */
	/* flex:none — con el flex-basis del 50% heredado, la altura no se aplica
	   (la foto no tiene contenido en flujo y se quedaba en 0) */
	/* Apiladas, el texto manda: ocupa lo que necesite y la foto se queda con
	   el resto hasta completar la pantalla. Antes la foto tenía alto fijo
	   (hasta 450px) y entre las dos se pasaban ~165px de la pantalla. */
	.gn-split-piece.is-content { flex: none; padding: 32px 28px 36px; }
	.gn-split-piece.is-photo { flex: 1 1 auto; height: auto; min-height: 200px; max-height: none; }
	/* Textos seguidos, sin huecos vacíos */
	.gn-split-piece.is-content .gn-chip-num { margin-bottom: 14px; }
	.gn-split-title { margin-bottom: 18px; }
	/* Zona segura del chaflán de abajo a la izquierda: sin esto el primer
	   icono queda cortado (en el Figma la fila también arranca más a la
	   derecha) */
	.gn-split-piece.is-left .gn-split-features,
	.gn-split-piece.is-right .gn-split-features { padding-left: 0; padding-right: 0; }
	.gn-split-piece.is-right .gn-split-link { margin-right: 0; }
	.gn-split-piece.is-content .gn-split-features { padding-left: max(0px, calc(var(--gn-cut) - var(--gn-pad) + 10px)); }
	.gn-split-features { margin-top: 40px; padding-top: 0; gap: 14px; }
	.gn-split-features > div { max-width: none; flex: 1 1 0; min-width: 0; }
	/* Rodonas e iconos más pequeños que en escritorio */
	.gn-split-features .gn-icon-circle { width: 43px; height: 43px; margin-bottom: 12px; }
	.gn-split-features .gn-icon-circle img { width: 21px; height: 21px; }
	.is-photo-right .gn-split-piece.is-content .gn-split-features { justify-content: flex-start; }
	/* Pegado a la derecha, sin padding y con aire por encima */
	/* padding: 0 a los lados, pero abajo se deja aire: el borde inferior es
	   el subrayado y pegado al texto queda apretado. */
	.gn-split-link { margin-top: 40px; align-self: flex-end; padding: 0 0 5px; }
	.is-photo-left .gn-split-piece.is-content .gn-chip-num,
	.is-photo-left .gn-split-piece.is-content .gn-split-title { text-align: left; }
	.gn-split-text { text-align: left; }
}

/* ==========================================================================
   Navbar (guinew/navbar) — píldora fija arriba, hamburguesa en móvil
   ========================================================================== */
/* El hueco de arriba, el offset al fijarse y el hueco hasta el contenido
   salen de la MISMA variable: así no hay salto al empezar a hacer scroll. */
/* La altura de la barra la marca el botón de contacto: botón + padding. */
:root { --gn-nav-gap: 20px; --gn-nav-btn: 51px; --gn-nav-h: calc(var(--gn-nav-btn) + 20px); }
body { padding-top: var(--gn-nav-gap); }
header.wp-block-template-part:has(.gn-b-navbar) { position: sticky; top: var(--gn-nav-gap); z-index: 100; }
/* Ancho del contenido, con el mismo margen lateral que el resto de la página */
.gn-b-navbar { position: relative; width: min(1140px, calc(100% - 48px)); margin: 0 auto; }

.gn-navbar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 10px 10px 10px 20px;
	border-radius: 999px;
	/* Efecto vidrio: fondo translúcido + desenfoque y saturación de lo que
	   pasa por debajo. El borde va con box-shadow interior para no alterar
	   la altura de la píldora. */
	/* Base en el gris azulado de la marca (no en blanco): sobre el fondo
	   claro de la página la píldora sigue distinguiéndose arriba del todo. */
	background: rgba(232, 236, 241, 0.76);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.45),
		0 4px 20px rgba(37, 64, 103, 0.06);
	transition: background 0.3s ease, box-shadow 0.3s ease;
}
.is-scrolled .gn-navbar {
	background: rgba(232, 236, 241, 0.88);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.5),
		0 10px 34px rgba(37, 64, 103, 0.12);
}
/* Si el navegador no admite el desenfoque, se compensa con más opacidad */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.gn-navbar { background: rgba(240, 242, 246, 0.95); }
}

/* Marca */
.gn-navbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
/* Como mucho, tan alto como el botón: es el botón quien manda. */
.gn-navbar-brand img { height: min(38px, var(--gn-nav-btn)); width: auto; }
.gn-navbar-brand { max-height: var(--gn-nav-btn); }
.gn-navbar-brand-text { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.gn-navbar-brand-text strong { font-family: var(--wp--preset--font-family--bai-jamjuree); font-weight: 700; font-size: 33px; line-height: 1; color: var(--wp--preset--color--contrast); }
.gn-navbar-brand-text small { font-family: var(--wp--preset--font-family--bai-jamjuree); font-weight: 500; font-size: 12px; letter-spacing: -0.03em; color: var(--wp--preset--color--accent); }

/* Enlaces (alineados a la derecha, junto al botón de contacto) */
.gn-navbar-links { display: flex; align-items: center; gap: 38px; margin-left: auto; }
.gn-navbar-links a { font-weight: 600; font-size: 16px; letter-spacing: -0.04em; color: var(--wp--preset--color--contrast); text-decoration: none; transition: color 0.2s ease; }
.gn-navbar-links a:hover { color: var(--wp--preset--color--accent); }
/* Página en la que estamos: el mismo azul que el hover */
.gn-navbar-links a.is-current,
.gn-navbar-item.is-current > a { color: var(--wp--preset--color--accent); }
.gn-navbar-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.gn-navbar-cta-mobile { display: none; }

/* Hamburguesa (solo móvil) */
.gn-burger { display: none; width: 51px; height: 51px; border: none; border-radius: 999px; background: var(--wp--preset--color--contrast); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.gn-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--wp--preset--color--base); transition: transform 0.3s ease, opacity 0.2s ease; }
.is-open .gn-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.is-open .gn-burger span:nth-child(2) { opacity: 0; }
.is-open .gn-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1100px) {
	.gn-navbar { padding-left: 28px; gap: 18px; }
	.gn-navbar-links { gap: 26px; }
	.gn-navbar-links a { font-size: 16px; }
}

/* Móvil y tablet: panel desplegable bajo la píldora */
@media (max-width: 900px) {
	:root { --gn-nav-gap: 14px; }
	.gn-navbar { padding: 10px 10px 10px 20px; }
	.gn-navbar-brand img { height: min(40px, var(--gn-nav-btn)); width: auto; }
	.gn-navbar-brand-text strong { font-size: 26px; }
	.gn-navbar-brand-text small { font-size: 10px; }
	.gn-burger { display: flex; }
	.gn-navbar-cta { display: none; }
	.gn-navbar-cta-mobile { display: inline-flex; margin-top: 10px; }

	.gn-navbar-links {
		position: absolute;
		top: calc(100% + 12px);
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		padding: 18px 22px 22px;
		border-radius: 26px;
		background: var(--wp--preset--color--base);
		box-shadow: 0 18px 44px rgba(37, 64, 103, 0.16);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.3, 0.7, 0.3, 1), visibility 0.25s;
	}
	.is-open .gn-navbar-links { opacity: 1; visibility: visible; transform: translateY(0); }
	/* :not(.gn-btn2) — si no, el botón heredaba padding y color de los
	   enlaces del panel y se veía apagado */
	.gn-navbar-links a:not(.gn-btn2) { padding: 12px 4px; font-size: 16px; border-bottom: 1px solid rgba(37, 64, 103, 0.08); }
	.gn-navbar-links a:not(.gn-btn2):last-of-type { border-bottom: none; }
	.gn-navbar-links .gn-btn2 {
		padding: 3px 3px 3px 26px;
		margin-top: 16px;
		border-bottom: none;
		align-self: flex-start;
		color: var(--wp--preset--color--base);
		font-size: 16px;
	}
}

/* Vista del editor: sin fijar ni ocultar nada */
.gn-b-navbar.is-editor { position: static; margin-top: 0; }
.gn-b-navbar.is-editor .gn-navbar-links span { font-weight: 600; font-size: 16px; color: var(--wp--preset--color--contrast); }

/* ---- Submenús del navbar ------------------------------------------------ */
.gn-navbar-item { position: relative; display: flex; align-items: center; }
.gn-navbar-item > a { display: inline-flex; align-items: center; gap: 8px; }
.gn-chevron { width: 12px; height: 12px; transition: transform 0.25s ease; }
.gn-navbar-item.has-sub:hover .gn-chevron { transform: rotate(180deg); }
.gn-sub-toggle { display: none; width: 34px; height: 34px; border: none; background: none; cursor: pointer; padding: 0; align-items: center; justify-content: center; }
.gn-sub-toggle img { width: 14px; height: 14px; transition: transform 0.25s ease; }

/* Puente invisible: el desplegable no se cierra al cruzar el hueco */
.gn-navbar-item.has-sub::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }

.gn-subnav {
	position: absolute;
	top: calc(100% + 16px);
	left: 50%;
	min-width: 250px;
	padding: 12px;
	border-radius: 20px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 18px 44px rgba(37, 64, 103, 0.16);
	display: flex;
	flex-direction: column;
	gap: 2px;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-8px);
	transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.3, 0.7, 0.3, 1), visibility 0.22s;
	z-index: 5;
}
.gn-navbar-item.has-sub:hover .gn-subnav,
.gn-navbar-item.has-sub:focus-within .gn-subnav { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.gn-subnav a { font-size: 15px; font-weight: 600; padding: 11px 16px; border-radius: 12px; white-space: nowrap; transition: background 0.18s ease, color 0.18s ease; }
.gn-subnav a:hover { background: var(--wp--preset--color--tint); color: var(--wp--preset--color--accent); }

@media (max-width: 900px) {
	/* En el panel, el submenú se despliega en vertical bajo su enlace */
	.gn-navbar-item { flex-wrap: wrap; border-bottom: 1px solid rgba(37, 64, 103, 0.08); }
	.gn-navbar-item > a { flex: 1; border-bottom: none !important; }
	.gn-chevron { display: none; }
	.gn-sub-toggle { display: flex; }
	.gn-navbar-item.is-sub-open .gn-sub-toggle img { transform: rotate(180deg); }
	.gn-navbar-item.has-sub::after { display: none; }
	.gn-subnav {
		position: static;
		width: 100%;
		min-width: 0;
		transform: none;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
		background: none;
		border-radius: 0;
		padding: 0 0 0 14px;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease, padding 0.3s ease;
	}
	/* Anular el desplazamiento del desplegable de escritorio: sus reglas de
	   :hover/:focus-within son más específicas y desplazaban los enlaces
	   fuera del panel */
	.gn-navbar-item.has-sub:hover .gn-subnav,
	.gn-navbar-item.has-sub:focus-within .gn-subnav { transform: none; }
	.gn-navbar-item.is-sub-open .gn-subnav { max-height: 260px; padding-bottom: 12px; }
	/* border-radius: 0 — en escritorio el enlace lleva 12px para la píldora
	   de hover, y aquí ese radio curvaba las puntas de la línea de abajo. */
	.gn-subnav a { font-size: 15px; padding: 9px 8px; color: var(--wp--preset--color--accent); white-space: normal; border-radius: 0; }
}

/* ==========================================================================
   Móvil: alturas más contenidas para que las fotos no se recorten tanto
   (las imágenes son apaisadas 3:2; con tarjetas muy altas se veía una
   franja mínima del centro)
   ========================================================================== */
@media (max-width: 781px) {
	/* Servicios (tarjetas reversibles): cuadradas. El reverso necesita
	   ~267px, así que caben de sobra */
	.gn-flip,
	.gn-flip-inner { min-height: 300px; aspect-ratio: 1 / 1; }
	.gn-flip-front { padding: 26px; }

	/* Proyectos (slider) */
	.gn-project2 { min-height: 340px; }

	/* Proyectos apilables (página Proyectos) */
	.gn-stack-card { min-height: 360px; }

	/* Fotografía de torneos: imágenes grandes */
	.gn-photo-big { min-height: 320px; padding: 18px; }

	/* Servicios partidos: la altura de la foto la fija la regla del bloque de
	   900px, que ya es fluida */
}

/* ==========================================================================
   Pie de página (guinew/footer)
   ========================================================================== */
.gn-b-footer { width: min(1140px, calc(100% - 48px)); margin: clamp(90px, 9vw, 130px) auto 28px; }
.gn-b-footer .gn-footer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 28px; }
.gn-b-footer .gn-footer-social { display: flex; gap: 14px; flex-wrap: wrap; }
.gn-b-footer .gn-footer-nav { display: flex; flex-direction: column; gap: 8px; }
.gn-b-footer .gn-footer-nav p { margin: 0; }
.gn-b-footer .gn-social-box { text-decoration: none; }
.gn-footer-line { border: none; border-top: 1px solid var(--wp--preset--color--gray-light); margin: 40px 0 18px; }
.gn-b-footer .gn-footer-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.gn-b-footer .gn-footer-meta p { margin: 0; color: var(--wp--preset--color--gray); font-size: 14px; font-weight: 400; letter-spacing: -0.04em; }
.gn-footer-logo { width: 34px; height: auto; }
.gn-footer-legal { display: flex; gap: 24px; flex-wrap: wrap; }
.gn-footer-legal a { color: var(--wp--preset--color--gray); font-size: 14px; font-weight: 400; letter-spacing: -0.04em; text-decoration: none; }
.gn-footer-legal a:hover { color: var(--wp--preset--color--accent); }
@media (max-width: 781px) {
	.gn-footer-legal { gap: 16px; }
}
/* Móvil: en la línea de abajo solo quedan los enlaces legales */
@media (max-width: 600px) {
	.gn-b-footer .gn-footer-meta > p,
	.gn-b-footer .gn-footer-logo { display: none; }
}
/* Vista del editor */
.gn-b-footer.is-editor { width: auto; margin: 0; }
.gn-b-footer.is-editor .gn-footer-legal span { color: var(--wp--preset--color--gray); }

/* ---- Testimonios en vídeo ---------------------------------------------- */
.gn-testimonial-media.has-video { overflow: hidden; border-radius: 16px; }
.gn-testimonial-video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; background: var(--wp--preset--color--contrast); }
.gn-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 68px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	z-index: 2;
	transition: transform 0.25s ease, opacity 0.2s ease;
}
.gn-play img { width: 100%; height: 100%; display: block; pointer-events: none; }
.gn-play:hover { transform: translate(-50%, -50%) scale(1.12); }
/* Mientras se reproduce: fuera el botón, entran los controles nativos */
.gn-testimonial-media.is-playing .gn-play { opacity: 0; pointer-events: none; }
.gn-testimonial-media.has-video::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 16px;
	background: rgba(37, 64, 103, 0.18);
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.gn-testimonial-media.is-playing::after { opacity: 0; }
/* Selector de vídeo en el editor */
.gn-video-pick { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

/* ==========================================================================
   Página Nosotros
   ========================================================================== */

/* ---- Cabecera de sección (título a la izquierda, texto a la derecha) ----- */
.gn-sec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; }
.gn-sec-title {
	margin: 0;
	max-width: 660px;
	font-family: var(--wp--preset--font-family--bai-jamjuree);
	font-weight: 700;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
}
.gn-sec-text {
	margin: 0;
	flex: none;
	width: min(415px, 34%);
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}
.gn-sec-line { border: none; border-top: 1px solid rgba(37, 64, 103, 0.18); margin: 44px 0 0; }
/* Lo que va justo debajo de una cabecera es parte de la misma sección: se le
   quita el margen grande de separación entre bloques. El hueco lo fija el
   margen inferior de la cabecera. */
.gn-b-sechead { margin-bottom: var(--gn-gap-abajo, 90px); }
.gn-b-sechead + .gn-section { margin-top: var(--gn-gap-arriba, 0px); }

/* ---- Métricas en fila quieta (variante de guinew/stats) ----------------- */
.gn-b-stats.is-row { margin-top: var(--gn-stats-mt, clamp(48px, 6vw, 90px)); }
@media (max-width: 781px) {
	.gn-b-stats { margin-top: var(--gn-stats-mt-m, var(--gn-stats-mt, 50px)); margin-bottom: var(--gn-stats-mb-m, var(--gn-stats-mb, 0px)); }
	.gn-b-stats.is-row { margin-top: var(--gn-stats-mt-m, var(--gn-stats-mt, clamp(48px, 6vw, 90px))); }
}
.gn-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.gn-stats-row .gn-stat2 { width: auto; flex: none; }

/* ---- Vídeo destacado ---------------------------------------------------- */
.gn-b-video { margin-top: 87px; }
.gn-video-frame {
	--gn-chaflan: 150px;
	position: relative;
	overflow: hidden;
	/* Llena la pantalla igual que las tarjetas de Proyectos: lo que queda
	   por debajo de la barra menos un poco de aire. Sustituye a la
	   proporción fija de antes (1288/938). */
	height: calc(100vh - var(--gn-stack-top) - var(--gn-stack-aire));
	height: calc(100svh - var(--gn-stack-top) - var(--gn-stack-aire));
	min-height: 360px;
	background: var(--wp--preset--color--contrast);
	/* Las dos esquinas sin chaflán van redondeadas. El clip-path y el
	   border-radius se aplican los dos: lo que se ve es la intersección. */
	border-radius: 0 30px 0 30px;
	clip-path: polygon(
		var(--gn-chaflan) 0,
		100% 0,
		100% calc(100% - var(--gn-chaflan)),
		calc(100% - var(--gn-chaflan)) 100%,
		0 100%,
		0 var(--gn-chaflan)
	);
}
.gn-video-frame .gn-video-media,
.gn-video-frame .gn-media.gn-video-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gn-play-pill {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	/* auto: .gn-play (testimonios) fija 68×68 y aquí manda el contenido */
	width: auto;
	height: auto;
	display: inline-flex;
	align-items: center;
	gap: 22px;
	padding: 18px 34px 18px 26px;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 500;
	font-size: clamp(16px, 1.5vw, 20px);
	letter-spacing: -0.04em;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	transition: transform 0.25s ease, opacity 0.2s ease;
}
.gn-play-pill:hover { transform: translate(-50%, -50%) scale(1.06); }
/* El triángulo del icono apunta hacia arriba: se gira para que mire a la derecha */
.gn-play-tri { display: flex; width: 26px; height: 26px; }
.gn-play-tri img { width: 100%; height: 100%; transform: rotate(90deg); }
/* Mientras se reproduce, el marco es un rectángulo redondeado: los
   chaflanes recortarían parte de la imagen del vídeo. Y el vídeo se ve
   entero (contain) en vez de recortado (cover): ocupa todo el alto del
   marco y lo que sobra queda de margen sobre el fondo azul. */
.gn-video-frame.is-playing { clip-path: none; border-radius: 30px; }
.gn-video-frame.is-playing .gn-video-media { object-fit: contain; }
.gn-video-frame.is-playing .gn-play-pill { opacity: 0; pointer-events: none; }

/* ---- Equipo ------------------------------------------------------------- */
.gn-b-team .gn-sec-line { margin-bottom: 46px; }
.gn-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 47px 28px; }
.gn-team-item { margin: 0; }
.gn-team-media {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	aspect-ratio: 309 / 313;
	background: var(--wp--preset--color--accent);
}
.gn-team-media img,
.gn-team-media video,
.gn-team-media .gn-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* En el editor la foto va dentro del selector de mediateca (.gn-media): hay
   que estirarlo, porque su imagen es absoluta y el envoltorio se quedaba con
   altura 0 y no se veía nada. */
.gn-team-media .gn-media { position: absolute; inset: 0; }
.gn-team-media .gn-media-empty { min-height: 100%; }
.gn-play-sm { width: 56px; height: 56px; }
.gn-team-media.is-playing .gn-play { opacity: 0; pointer-events: none; }
.gn-team-name {
	margin: 20px 0 0;
	font-family: var(--wp--preset--font-family--bai-jamjuree);
	font-weight: 700;
	font-size: clamp(18px, 1.7vw, 22px);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
}
.gn-team-role {
	margin: 6px 0 0;
	font-size: clamp(15px, 1.3vw, 18px);
	line-height: 1.2;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--accent);
	font-weight: 500;
}

@media (max-width: 1024px) {
	.gn-team-grid { grid-template-columns: repeat(3, 1fr); }
	.gn-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 781px) {
	/* Titulares de sección: 32px en móvil (el preset los deja en ~35 y en
	   pantallas estrechas se comen demasiada altura). WP marca los presets
	   con !important, por eso hace falta aquí también. */
	.has-huge-font-size { font-size: 32px !important; }
	.gn-b-sechead { margin-bottom: var(--gn-gap-abajo-m, var(--gn-gap-abajo, 60px)); }
	.gn-b-logos { margin-top: var(--gn-gap-arriba-m, var(--gn-gap-arriba, clamp(60px, 7vw, 90px))); }
	.gn-b-sechead + .gn-section { margin-top: var(--gn-gap-arriba-m, var(--gn-gap-arriba, 0px)); }
	.gn-sec-head { flex-direction: column; gap: 24px; }
	.gn-sec-text { width: 100%; }
	.gn-sec-line { margin-top: 32px; }
	.gn-b-team .gn-sec-line { margin-bottom: 32px; }
	.gn-team-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 18px; }
	.gn-b-video { margin-top: 77px; }
	.gn-video-frame { --gn-chaflan: 90px; border-radius: 0 20px 0 20px; }
	.gn-video-frame.is-playing { border-radius: 20px; }
	.gn-play-pill { gap: 14px; padding: 14px 24px 14px 18px; }
	.gn-play-tri { width: 20px; height: 20px; }
	.gn-play-sm { width: 44px; height: 44px; }
}
@media (max-width: 600px) {
	.gn-stats-row { grid-template-columns: 1fr; gap: 16px; }
}

/* ==========================================================================
   Página Contacto
   ========================================================================== */

/* ---- Tarjetas de contacto ---------------------------------------------- */
.gn-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 84px; align-items: start; }
.gn-b-contact.is-solo .gn-contact-grid { grid-template-columns: 1fr; }
.gn-contact-card {
	/* Chaflán medido en el Figma: 121px sobre una tarjeta de 609 (20%) */
	--gn-chaflan: clamp(70px, 10vw, 121px);
	padding: clamp(28px, 3.4vw, 49px);
	border-radius: 18px;
	background: var(--wp--preset--color--tint);
	clip-path: polygon(
		0 0,
		calc(100% - var(--gn-chaflan)) 0,
		100% var(--gn-chaflan),
		100% 100%,
		0 100%
	);
}
.gn-contact-card.is-navy { background: var(--wp--preset--color--contrast); }
.gn-contact-eyebrow { margin: 0 0 22px; }
.gn-contact-card.is-navy .gn-contact-eyebrow { color: var(--wp--preset--color--accent); }
.gn-contact-title {
	margin: 0;
	/* 660px, como los titulares de sección: con 420 (medida del tamaño
	   anterior) el título se partía en tres líneas. */
	max-width: 660px;
	font-family: var(--wp--preset--font-family--bai-jamjuree);
	font-weight: 700;
	/* El mismo tamaño que los titulares de sección del resto del sitio
	   (preset «huge»); en móvil, los mismos 32px que ellos. */
	font-size: var(--wp--preset--font-size--huge);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
}
@media (max-width: 781px) {
	.gn-contact-title { font-size: 32px; }
}
.gn-contact-card.is-navy .gn-contact-title { color: var(--wp--preset--color--base); }
.gn-contact-text { margin: 22px 0 0; max-width: 520px; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.4; letter-spacing: -0.02em; color: #8f8f8f; font-weight: 500; }
.gn-contact-card.is-navy .gn-contact-text { color: rgba(248, 248, 248, 0.85); }
/* Recuadro donde irá el calendario de reservas */
.gn-contact-embed { margin-top: 34px; background: var(--wp--preset--color--base); border-radius: 16px; min-height: 420px; padding: 18px; }
.gn-contact-embed-placeholder { margin: 0; font-size: 14px; color: #8f8f8f; }

/* ---- Formulario (lo pinta el plugin Guinew Leads) ----------------------- */
.gn-form { margin-top: 34px; }
.gn-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 25px; }
.gn-field { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gn-field.is-wide { grid-column: 1 / -1; }
.gn-label { font-family: var(--wp--preset--font-family--bai-jamjuree); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--wp--preset--color--contrast); }
.gn-input {
	width: 100%;
	padding: 14px 17px;
	border: 1px solid rgba(37, 64, 103, 0.12);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gn-input::placeholder { color: #a9b0ba; }
.gn-input:focus { outline: none; border-color: var(--wp--preset--color--accent); box-shadow: 0 0 0 3px rgba(74, 130, 198, 0.15); }
.gn-textarea { min-height: 195px; resize: vertical; line-height: 1.45; }
.gn-field.has-error .gn-input { border-color: #c0392b; }
.gn-field-error { font-size: 12px; color: #c0392b; }

.gn-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 26px; }
.gn-check { display: flex; align-items: center; gap: 11px; font-size: 15px; letter-spacing: -0.02em; color: var(--wp--preset--color--contrast); cursor: pointer; }
.gn-check input { width: 17px; height: 17px; accent-color: var(--wp--preset--color--accent); flex: none; }
.gn-check a { color: var(--wp--preset--color--contrast); text-decoration: underline; }
.gn-check a:hover { color: var(--wp--preset--color--accent); }
/* El botón reutiliza .gn-btn2 pero sin el círculo del logo */
.gn-form-send { flex: none; border: none; cursor: pointer; padding: 15px 26px; font-family: var(--wp--preset--font-family--inter); font-size: 15px; }
.gn-form-send[disabled] { opacity: 0.6; cursor: default; }
/* Trampa antibots: fuera de la vista pero no display:none (algunos la detectan) */
.gn-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gn-form-msg { margin: 18px 0 0; font-size: 14px; letter-spacing: -0.02em; }
.gn-form-msg.is-ok { color: #1e7a45; font-weight: 600; }
.gn-form-msg.is-error { color: #c0392b; font-weight: 600; }

/* ---- Pasos -------------------------------------------------------------- */
/* align-items: stretch (por defecto) para que la foto llegue exactamente
   hasta donde acaban los pasos: antes la proporción fija la dejaba un
   pelín más alta. */
.gn-steps-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 487px); gap: 60px; }
.gn-steps-list { display: flex; flex-direction: column; align-items: flex-start; }
.gn-step {
	--gn-chaflan: 55px;
	/* En escalera: cada paso entra un escalón más que el anterior, y todos
	   miden lo mismo (por eso se descuenta el desplazamiento total).
	   El escalón vale lo que el chaflán + 3px: así el corte de una tarjeta
	   cae justo donde arranca la siguiente y la junta se lee continua. Si
	   cambia el chaflán, el escalón lo sigue solo. */
	--gn-paso: calc(var(--gn-chaflan) + 3px);
	width: calc(100% - var(--gn-paso) * 2);
	margin-left: calc(var(--gn-step, 0) * var(--gn-paso));
	padding: 34px 40px 34px 38px;
	display: flex;
	gap: 22px;
	background: var(--wp--preset--color--tint);
	clip-path: polygon(
		0 0,
		calc(100% - var(--gn-chaflan)) 0,
		100% var(--gn-chaflan),
		100% 100%,
		var(--gn-chaflan) 100%,
		0 calc(100% - var(--gn-chaflan))
	);
}
/* Solo se redondean los dos extremos de la escalera: arriba-izquierda de
   la primera y abajo-derecha de la última. Las esquinas de en medio
   enlazan con la tarjeta de al lado. */
.gn-step:first-child { border-top-left-radius: 16px; }
.gn-step:last-child { border-bottom-right-radius: 16px; }
.gn-step.is-navy { background: var(--wp--preset--color--contrast); }
.gn-step-num { flex: none; font-family: var(--wp--preset--font-family--bai-jamjuree); font-weight: 700; font-size: 13px; line-height: 1.4; color: var(--wp--preset--color--accent); }
.gn-step-body { min-width: 0; }
.gn-step-title { margin: 0; font-family: var(--wp--preset--font-family--bai-jamjuree); font-weight: 700; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.15; letter-spacing: -0.01em; color: var(--wp--preset--color--contrast); }
.gn-step.is-navy .gn-step-title { color: var(--wp--preset--color--base); }
.gn-step-text { margin: 12px 0 0; font-size: clamp(13px, 1.1vw, 15px); line-height: 1.35; letter-spacing: -0.02em; color: #8f8f8f; font-weight: 500; }
.gn-step.is-navy .gn-step-text { color: rgba(248, 248, 248, 0.85); }
/* Los cortes van en la esquina de arriba-izquierda y la de abajo-derecha
   (al revés que las tarjetas de al lado), y el redondeo en las otras dos.
   Sin aspect-ratio: el alto lo marca la columna de los pasos. */
.gn-steps-photo { --gn-chaflan: 55px; overflow: hidden; position: relative; border-radius: 0 16px 0 16px; clip-path: polygon(
		var(--gn-chaflan) 0,
		100% 0,
		100% calc(100% - var(--gn-chaflan)),
		calc(100% - var(--gn-chaflan)) 100%,
		0 100%,
		0 var(--gn-chaflan)
	); }
/* En posición absoluta la foto no cuenta para el alto de la fila: manda la
   columna de los pasos y la imagen se recorta para llenarla. */
.gn-steps-photo img,
.gn-steps-photo .gn-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gn-steps-photo .gn-media { position: absolute; inset: 0; display: block; }

@media (max-width: 1024px) {
	.gn-contact-grid { grid-template-columns: 1fr; gap: 40px; }
	.gn-steps-grid { grid-template-columns: 1fr; gap: 40px; }
	.gn-step { --gn-chaflan: 45px; }
}
@media (max-width: 781px) {
	.gn-form-grid { grid-template-columns: 1fr; gap: 18px; }
	.gn-form-foot { flex-direction: column; align-items: flex-start; gap: 18px; }
	.gn-contact-card { --gn-chaflan: 70px; }
	/* Móvil: sin escalera. Las tres a todo el ancho, una debajo de otra y
	   pegadas, con el corte solo en la izquierda y el redondeo en los dos
	   extremos de la lista. */
	.gn-step {
		width: 100%;
		margin-left: 0;
		padding: 24px 22px;
		gap: 14px;
		--gn-chaflan: 42px;
		/* Apiladas y a todo el ancho, el corte va solo abajo a la izquierda:
		   el lado derecho queda recto de arriba abajo. */
		clip-path: polygon(
			0 0,
			100% 0,
			100% 100%,
			var(--gn-chaflan) 100%,
			0 calc(100% - var(--gn-chaflan))
		);
	}
	.gn-steps-photo { aspect-ratio: 4 / 3; height: auto; --gn-chaflan: 42px; }
	.gn-contact-embed { min-height: 320px; }
}

/* ==========================================================================
   Móvil: margen lateral de la página a 18px (en escritorio son 24px).
   Se cambian las variables de WordPress para que lo hereden todos los
   bloques, y el ancho propio del navbar y el pie para que sigan alineados.
   ========================================================================== */
@media (max-width: 781px) {
	/* WordPress declara estas variables en «body», y las variables se heredan
	   del ancestro más cercano: hay que redefinirlas ahí, no solo en :root. */
	:root,
	body {
		--wp--style--root--padding-left: 18px;
		--wp--style--root--padding-right: 18px;
	}
	.gn-b-navbar,
	.gn-b-footer { width: min(1140px, calc(100% - 36px)); }
}

/* ---- Espaciado editable desde el bloque ---------------------------------
   Cada bloque imprime sus variables (ver guinew_espaciado() en functions.php)
   con el valor del panel o, si está vacío, el que trae el tema. Al ir en el
   atributo style del propio elemento, gana siempre: no hay reglas escondidas
   peleándose por especificidad.
   !important, y al final de la hoja, porque varios bloques fijan su margen
   con selectores más específicos o con !important (.gn-b-pagehead,
   .gn-b-sechead + .gn-section…) y a igual peso gana el último. */
.gn-espaciado { margin-top: var(--gn-mt-d) !important; }
.gn-espaciado.gn-espaciado-pad { padding: var(--gn-pad-d) !important; }
@media (max-width: 1024px) {
	.gn-espaciado { margin-top: var(--gn-mt-t) !important; }
	.gn-espaciado.gn-espaciado-pad { padding: var(--gn-pad-t) !important; }
}
@media (max-width: 600px) {
	.gn-espaciado { margin-top: var(--gn-mt-m) !important; }
	.gn-espaciado.gn-espaciado-pad { padding: var(--gn-pad-m) !important; }
}

/* ==========================================================================
   Páginas legales (aviso legal, privacidad, cookies)
   Texto largo: ancho de lectura corto y aire entre apartados. La plantilla
   de página no imprime el titular, así que el h1 va dentro del contenido.
   ========================================================================== */
/* Clase repetida a propósito: WordPress pone «margin-block-start: 0» al
   primer hijo del contenido con «:root :where(...) > :first-child», que
   pesa más que una sola clase. */
.gn-legal.gn-legal { margin-top: 90px; margin-bottom: 130px; }
.gn-legal > * { max-width: 760px; }
.gn-legal h1 { font-size: clamp(32px, 4vw, 52px); line-height: 1.05; margin: 0 0 12px; }
.gn-legal h2 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; margin: 52px 0 14px; }
.gn-legal p, .gn-legal li { line-height: 1.6; }
.gn-legal p { margin: 0 0 16px; }
.gn-legal ul { margin: 0 0 16px; padding-left: 20px; }
.gn-legal li { margin-bottom: 8px; }
.gn-legal a { color: var(--wp--preset--color--accent); text-decoration: underline; }
.gn-legal code { font-size: 0.92em; background: var(--wp--preset--color--tint); padding: 2px 6px; border-radius: 5px; }
@media (max-width: 781px) {
	.gn-legal.gn-legal { margin-top: 56px; margin-bottom: 90px; }
	.gn-legal h2 { margin-top: 40px; }
}