/* ==========================================================================
   Reformas Gasa · estilos del child theme
   Prefijo de clases: g-  ·  Tokens en :root
   ========================================================================== */

:root {
	--g-navy: #0e162c;
	--g-navy-2: #16223f;
	--g-navy-3: #1b2a4d;
	--g-navy-line: #22315a;
	--g-gold: #f2b134;
	--g-gold-soft: #f6c766;
	--g-gold-deep: #a86f0c;
	--g-gold-ink: #8c5a0b;
	--g-cream: #f6f2ea;
	--g-sand: #efe8db;
	--g-sand-2: #e6dfd1;
	--g-line: #ece6da;
	--g-line-2: #ddd5c5;
	--g-ink: #0e162c;
	--g-ink-2: #3a4155;
	--g-muted: #555a66;
	--g-white: #fff;

	--g-sans: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--g-serif: "Instrument Serif", Georgia, serif;

	--g-max: 1320px;
	--g-gutter: 32px;
	--g-radius: 24px;
	--g-header-h: 80px;
}

/* --------------------------------------------------------------------------
   Base y neutralización de GeneratePress
   ----------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--g-header-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.gasa {
	margin: 0;
	background: var(--g-cream);
	color: var(--g-ink);
	font-family: var(--g-sans);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
body.gasa a { color: var(--g-ink); }
body.gasa a:hover { color: var(--g-gold-ink); }
:where(body.gasa) :is(h1, h2, h3) { font-family: var(--g-sans); color: inherit; margin: 0; }
:where(body.gasa) p { margin: 0; }
:where(body.gasa) img { max-width: 100%; height: auto; }

/* Contenedor de GP a ancho completo en la home */
.gasa-front .site.grid-container,
.gasa-front #page { max-width: none; padding: 0; background: transparent; }
.gasa-front .site-content { display: block; padding: 0; }

.g-serif { font-family: var(--g-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
h1 .g-serif, h2 .g-serif, h3 .g-serif { color: var(--g-gold-deep); }

.g-skip {
	position: absolute; left: 12px; top: -100px; z-index: 1000;
	background: var(--g-navy); color: #fff !important; padding: 12px 18px; border-radius: 10px;
}
.g-skip:focus { top: 12px; }

:where(.gasa) :focus-visible { outline: 3px solid var(--g-gold); outline-offset: 3px; border-radius: 6px; }

/* Hueco de imagen pendiente */
.gasa-ph {
	display: flex; align-items: center; justify-content: center; text-align: center;
	background: repeating-linear-gradient(135deg, var(--g-sand-2) 0 14px, #ece5d7 14px 28px);
	color: #6b6352; font-size: 14px; padding: 16px; box-sizing: border-box;
}
.gasa-ph span { background: rgba(246,242,234,.9); padding: 6px 10px; border-radius: 8px; }

/* --------------------------------------------------------------------------
   Botones y enlaces
   ----------------------------------------------------------------------- */
.g-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	font: 600 17px/1.2 var(--g-sans);
	padding: 16px 24px; min-height: 52px; box-sizing: border-box;
	border-radius: 12px; border: 1.5px solid transparent;
	text-decoration: none; cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.g-btn svg { flex: none; transition: transform .2s ease; }
.g-btn:hover svg { transform: translateX(3px); }
.g-btn:active { transform: translateY(1px); }
.g-btn--sm { font-size: 16px; padding: 12px 20px; min-height: 46px; }
.g-btn--lg { font-size: 18px; padding: 18px 28px; min-height: 58px; }
.g-btn--block { width: 100%; }

body.gasa .g-btn--gold { background: var(--g-gold); color: var(--g-navy); }
body.gasa .g-btn--gold:hover { background: var(--g-gold-soft); color: var(--g-navy); }
body.gasa .g-btn--navy { background: var(--g-navy); color: #fff; }
body.gasa .g-btn--navy:hover { background: var(--g-navy-3); color: #fff; }
body.gasa .g-btn--ghost-light { color: #fff; border-color: rgba(255,255,255,.55); background: transparent; }
body.gasa .g-btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
body.gasa .g-btn--ghost-dark { color: var(--g-navy); border-color: var(--g-navy); background: transparent; }
body.gasa .g-btn--ghost-dark:hover { background: var(--g-navy); color: #fff; }

body.gasa button.g-btn { font-family: var(--g-sans); }

.g-link { font-weight: 600; text-underline-offset: 3px; }
body.gasa .g-link--light { color: #fff; }
body.gasa .g-link--light:hover { color: var(--g-gold-soft); }

/* --------------------------------------------------------------------------
   Tipografía de secciones
   ----------------------------------------------------------------------- */
.g-section { max-width: var(--g-max); margin: 0 auto; padding: 96px var(--g-gutter); box-sizing: border-box; }

.g-h2 { font-size: clamp(40px, 5vw, 68px); line-height: 1; letter-spacing: -0.04em; font-weight: 600; }
.g-h2--xl { font-size: clamp(42px, 5.4vw, 76px); letter-spacing: -0.045em; }
.g-h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 600; }

.g-eyebrow { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--g-gold-ink); margin-bottom: 14px !important; }
.g-eyebrow--light { color: var(--g-gold-soft); }

.g-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.g-head__aside { max-width: 520px; font-size: 18px; color: var(--g-muted); }

/* --------------------------------------------------------------------------
   Header
   ----------------------------------------------------------------------- */
.g-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--g-cream);
	transition: box-shadow .25s ease, background-color .25s ease;
}
.admin-bar .g-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .g-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .g-header { top: 0; } }
.g-header.is-scrolled { background: rgba(246,242,234,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(14,22,44,.08); }

.g-header__inner {
	max-width: 1400px; margin: 0 auto; padding: 14px var(--g-gutter); min-height: var(--g-header-h); box-sizing: border-box;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.g-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
body.gasa .g-logo, body.gasa .g-logo:hover { color: var(--g-ink); }
.g-logo__mark { width: 30px; height: 30px; border-radius: 8px; background: var(--g-navy); color: var(--g-gold); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.g-logo--sm { font-size: 20px; }
.g-logo--sm .g-logo__mark { width: 28px; height: 28px; }

.g-nav { display: flex; align-items: center; gap: 28px; }
.g-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 28px; }
.g-nav__list a { position: relative; text-decoration: none; font-size: 16px; padding: 6px 0; }
body.gasa .g-nav__list a { color: var(--g-ink-2); }
body.gasa .g-nav__list a:hover, body.gasa .g-nav__list a.is-active { color: var(--g-ink); }
.g-nav__list a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--g-gold);
	transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.g-nav__list a:hover::after, .g-nav__list a.is-active::after { transform: scaleX(1); }

body.gasa .g-burger {
	display: none; background: transparent; border: 0; padding: 10px; margin-right: -10px;
	color: var(--g-ink); cursor: pointer; line-height: 0;
}
.g-burger__close { display: none; }

@media (max-width: 960px) {
	body.gasa .g-burger { display: inline-flex; }
	.g-nav {
		position: fixed; inset: var(--g-header-h) 12px auto 12px; z-index: 99;
		flex-direction: column; align-items: stretch; gap: 8px;
		background: #fff; border-radius: 20px; padding: 12px; box-shadow: 0 24px 60px rgba(14,22,44,.18);
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	}
	.admin-bar .g-nav { top: calc(var(--g-header-h) + 46px); }
	.g-header.is-open .g-nav { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
	.g-header.is-open .g-burger__open { display: none; }
	.g-header.is-open .g-burger__close { display: inline; }
	.g-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.g-nav__list a { display: flex; align-items: center; min-height: 52px; padding: 0 14px; font-size: 18px; border-radius: 12px; }
	.g-nav__list a::after { display: none; }
	.g-nav__list a:hover { background: var(--g-cream); }
	.g-nav .g-btn { width: 100%; min-height: 54px; }
}

/* --------------------------------------------------------------------------
   Hero
   ----------------------------------------------------------------------- */
.g-hero { padding: 0 12px; }
.g-hero__frame {
	position: relative; overflow: hidden; border-radius: var(--g-radius);
	min-height: 640px; background: var(--g-navy); display: flex; align-items: flex-end;
}
.g-hero__img, .g-hero__frame > .gasa-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 55%; }
.g-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,22,44,.92) 0%, rgba(14,22,44,.78) 42%, rgba(14,22,44,.15) 75%, rgba(14,22,44,.05) 100%); }
.g-hero__inner { position: relative; width: 100%; max-width: 1400px; margin: 0 auto; padding: 120px 52px 56px; box-sizing: border-box; }
.g-hero__copy { max-width: 760px; color: #fff; }
.g-hero__title { font-size: clamp(46px, 7vw, 100px); line-height: .98; letter-spacing: -0.045em; font-weight: 600; color: #fff; }
.g-hero__title .g-serif { color: var(--g-gold-soft); }
.g-hero__lead { margin-top: 28px !important; font-size: 20px; line-height: 1.6; color: rgba(255,255,255,.88); max-width: 640px; }
.g-hero__lead b { font-weight: 600; color: #fff; }

.g-checks { list-style: none; margin: 26px 0 0; padding: 0; max-width: 600px; display: flex; flex-direction: column; gap: 12px; font-size: 18px; }
.g-checks li { display: flex; align-items: flex-start; gap: 12px; margin: 0; }
.g-checks b { font-weight: 600; }
.g-checks__dot { flex: none; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; background: var(--g-gold); color: var(--g-navy); display: inline-flex; align-items: center; justify-content: center; }
.g-checks__sub { color: rgba(255,255,255,.78); }

.g-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.g-hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 36px; }
.g-rating-pill {
	display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
	background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 10px 16px; font-size: 15px;
}
body.gasa .g-rating-pill, body.gasa .g-rating-pill:hover { color: rgba(255,255,255,.9); }
.g-rating-pill:hover { background: rgba(255,255,255,.16); }
.g-rating-pill__brand { font-weight: 700; color: #fff; }
.g-stars { display: inline-flex; gap: 2px; color: var(--g-gold-soft); }

@media (max-width: 760px) {
	.g-hero { padding: 0 8px; }
	.g-hero__frame { min-height: 0; border-radius: 20px; }
	.g-hero__shade { background: linear-gradient(180deg, rgba(14,22,44,.55) 0%, rgba(14,22,44,.88) 45%, rgba(14,22,44,.95) 100%); }
	.g-hero__inner { padding: 96px 20px 32px; }
	.g-hero__lead { font-size: 18px; }
	.g-checks { font-size: 16px; }
	.g-hero__ctas .g-btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Pain points
   ----------------------------------------------------------------------- */
.g-pains { padding-bottom: 0; }
.g-pains__grid { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.g-pain { position: relative; background: #fff; border-radius: 20px; padding: 30px 28px 28px; display: flex; flex-direction: column; gap: 18px; }
.g-pain__quote { position: absolute; top: 14px; right: 20px; font: italic 48px/1 var(--g-serif); color: #ecd9ae; }
.g-pain__text { padding-right: 28px; font-size: 21px; line-height: 1.28; font-weight: 500; letter-spacing: -0.02em; }
.g-pain__fix { margin-top: auto !important; padding-top: 18px; border-top: 1px solid var(--g-line); font-size: 16px; color: var(--g-ink-2); }
.g-pain__fix b { font-weight: 600; color: var(--g-gold-ink); }

.g-pains__bridge { margin-top: 56px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.g-pains__bridge p { font-size: clamp(26px, 3vw, 40px); line-height: 1.15; color: var(--g-ink); }
.g-pains__line { width: 2px; height: 56px; background: var(--g-gold); }

/* --------------------------------------------------------------------------
   Nosotros
   ----------------------------------------------------------------------- */
.g-about { padding-top: 48px; }
.g-about__wrap { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.g-about__media { flex: 1 1 380px; height: 560px; border-radius: var(--g-radius); overflow: hidden; }
.g-about__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-about__ph {
	height: 100%; box-sizing: border-box; padding: 24px; border-radius: var(--g-radius);
	background: var(--g-sand-2); border: 2px dashed #c9bfa9; color: #6b6352;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
}
.g-about__ph span { font-size: 14px; }
.g-about__body { flex: 999 1 480px; min-width: 0; }
.g-about__body > p { margin-top: 16px; font-size: 19px; color: var(--g-ink-2); }
.g-about__body > p.g-about__lead { margin-top: 28px; font-size: 21px; line-height: 1.5; color: var(--g-ink); font-weight: 500; letter-spacing: -0.01em; }
.g-about__body > p.g-about__sign { margin-top: 22px; font-size: 34px; line-height: 1; color: var(--g-ink); }
.g-about__body > p.g-about__role { margin-top: 6px; font-size: 15px; color: var(--g-muted); }
.g-about__facts { margin: 32px 0 0; padding-top: 28px; border-top: 1px solid var(--g-line-2); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.g-about__facts dt { font-size: 14px; font-weight: 600; color: var(--g-gold-ink); }
.g-about__facts dd { margin: 6px 0 0; font-size: 16px; }
.g-about__ctas { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }

@media (max-width: 760px) { .g-about__media { height: 420px; } }

/* --------------------------------------------------------------------------
   Statement + cifras
   ----------------------------------------------------------------------- */
.g-stats { background: var(--g-navy); color: #fff; }
.g-stats__inner { max-width: var(--g-max); margin: 0 auto; padding: 80px var(--g-gutter); box-sizing: border-box; }
.g-stats__statement { max-width: 1080px; font-size: clamp(28px, 3.6vw, 50px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 500; }
.g-stats__statement .g-serif { color: var(--g-gold-soft); }
.g-stats__grid { margin-top: 64px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,.15); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.g-stats__grid p:not(.g-stat) { margin-top: 12px; color: rgba(255,255,255,.75); font-size: 16px; }
.g-stat { font-size: 64px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.g-stat span { font-size: 26px; color: var(--g-gold-soft); }

/* --------------------------------------------------------------------------
   Servicios (tarjetas apiladas)
   ----------------------------------------------------------------------- */
.g-stack { margin-top: 48px; display: flex; flex-direction: column; gap: 28px; }
.g-svc {
	position: sticky; top: calc(var(--g-header-h) + 16px + var(--i) * 24px);
	border-radius: 28px; overflow: hidden; display: flex; flex-wrap: wrap; min-height: 500px;
	box-shadow: 0 -12px 40px rgba(14,22,44,.10);
}
.admin-bar .g-svc { top: calc(var(--g-header-h) + 48px + var(--i) * 24px); }
.g-svc__media { flex: 1 1 380px; min-height: 320px; position: relative; }
.g-svc__img, .g-svc__media > .gasa-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.g-svc__badge { position: absolute; top: 18px; left: 18px; background: var(--g-gold); color: var(--g-navy); font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; }
.g-svc__body { flex: 1 1 420px; padding: 48px; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; }
.g-svc__kicker { display: flex; align-items: baseline; gap: 14px; font-size: 15px; font-weight: 600; }
.g-svc__kicker .g-serif { font-style: normal; font-size: 44px; line-height: 1; }
.g-svc__title { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; }
.g-svc__text { font-size: 18px; line-height: 1.6; max-width: 520px; }
.g-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.g-tags li { margin: 0; border-radius: 999px; padding: 8px 14px; font-size: 15px; }
.g-svc__foot { margin-top: auto; padding-top: 22px; border-top: 1px solid; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.g-svc__label { font-size: 14px; }
.g-svc__price { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; }

.g-svc--light { background: #fff; color: var(--g-ink); }
.g-svc--light .g-svc__kicker { color: var(--g-gold-ink); }
.g-svc--light .g-svc__text, .g-svc--light .g-svc__label { color: var(--g-ink-2); }
.g-svc--light .g-tags li { background: var(--g-cream); }
.g-svc--light .g-svc__foot { border-color: var(--g-line); }

.g-svc--dark { background: var(--g-navy); color: #fff; }
.g-svc--dark .g-svc__kicker { color: var(--g-gold-soft); }
.g-svc--dark .g-svc__text, .g-svc--dark .g-svc__label { color: rgba(255,255,255,.78); }
.g-svc--dark .g-tags li { background: var(--g-navy-2); }
.g-svc--dark .g-svc__foot { border-color: rgba(255,255,255,.15); }

.g-svc--sand { background: var(--g-sand); color: var(--g-ink); }
.g-svc--sand .g-svc__kicker { color: var(--g-gold-ink); }
.g-svc--sand .g-svc__text, .g-svc--sand .g-svc__label { color: var(--g-ink-2); }
.g-svc--sand .g-tags li { background: var(--g-cream); }
.g-svc--sand .g-svc__foot { border-color: var(--g-line-2); }

.g-svc--gold { background: var(--g-gold); color: var(--g-ink); }
.g-svc--gold .g-svc__kicker { color: var(--g-ink); }
.g-svc--gold .g-svc__text, .g-svc--gold .g-svc__label { color: #2a2f3d; }
.g-svc--gold .g-tags li { background: var(--g-gold-soft); }
.g-svc--gold .g-svc__foot { border-color: rgba(14,22,44,.2); }

@media (max-width: 900px) {
	.g-svc, .admin-bar .g-svc { position: relative; top: auto; min-height: 0; }
	.g-svc__media { min-height: 260px; }
	.g-svc__body { padding: 28px 24px; }
	.g-svc__foot .g-btn { flex: 1 1 100%; }
}

.g-unsure { margin-top: 56px; background: #fff; border-radius: var(--g-radius); padding: 40px 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.g-unsure > div:first-child { max-width: 640px; }
.g-unsure p { margin-top: 10px; font-size: 18px; color: var(--g-ink-2); }
.g-unsure__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 760px) { .g-unsure { padding: 28px 24px; } .g-unsure__ctas .g-btn { flex: 1 1 100%; } }

/* --------------------------------------------------------------------------
   Proceso
   ----------------------------------------------------------------------- */
.g-process { padding: 0 12px; }
.g-process__panel { max-width: 1376px; margin: 0 auto; background: var(--g-navy); color: #fff; border-radius: var(--g-radius); padding: 88px 52px; box-sizing: border-box; }
.g-process .g-h2 .g-serif { color: var(--g-gold-soft); }
.g-process .g-head__aside { max-width: 420px; color: rgba(255,255,255,.75); }
.g-process__body { margin-top: 64px; display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; }

.g-process__media { flex: 1 1 340px; max-width: 460px; margin: 0; position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--g-navy-2); }
.g-process__slide { position: absolute; inset: 0; }
.g-process__slide[hidden] { display: none; }
.g-process__slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.g-process__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; text-align: center; color: rgba(255,255,255,.75); border: 2px dashed var(--g-navy-line); border-radius: 20px; box-sizing: border-box; }
.g-process__ph b { color: #fff; }
.g-process__ph span { font-size: 14px; }
.g-process__cap { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; background: #fff; color: var(--g-ink); border-radius: 999px; padding: 10px 16px; font-size: 15px; font-weight: 600; }
.g-process__live { width: 8px; height: 8px; border-radius: 50%; background: #2fa36b; }

.g-steps { flex: 999 1 460px; min-width: 0; list-style: none; margin: 0; padding: 0; }
.g-step { display: flex; gap: 24px; margin: 0; }
.g-step__rail { flex: none; width: 52px; display: flex; flex-direction: column; align-items: center; }
.g-step__dot {
	width: 52px; height: 52px; border-radius: 50%; box-sizing: border-box; font-style: normal; font-size: 24px;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid rgba(255,255,255,.25); color: rgba(255,255,255,.6); background: transparent;
	transition: all .25s ease;
}
.g-step__line { flex: 1; width: 2px; min-height: 28px; margin: 8px 0; background: rgba(255,255,255,.18); transition: background .25s ease; }
.g-step.is-done .g-step__dot { border-color: var(--g-gold); color: var(--g-gold-soft); }
.g-step.is-done .g-step__line { background: var(--g-gold); }
.g-step.is-active .g-step__dot { border-color: var(--g-gold); background: var(--g-gold); color: var(--g-navy); }

.g-step__main { flex: 1; min-width: 0; padding-bottom: 32px; }
body.gasa .g-step__btn {
	font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; width: 100%;
	min-height: 52px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
}
body.gasa .g-step__btn:hover, body.gasa .g-step__btn:focus { background: none; color: inherit; }
.g-step__title { font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.025em; color: rgba(255,255,255,.6); transition: color .2s ease; }
.g-step__when { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.5); }
.g-step__btn:hover .g-step__title { color: #fff; }
.g-step.is-active .g-step__title { color: #fff; }
.g-step.is-active .g-step__when { color: var(--g-gold-soft); }
.g-step__panel { margin-top: 14px; }
.g-step__panel > p { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 560px; }
.g-chips { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.g-chips li { margin: 0; display: flex; align-items: center; gap: 8px; background: var(--g-navy-2); border: 1px solid var(--g-navy-line); border-radius: 999px; padding: 9px 16px; font-size: 15px; }
.g-chips svg { color: var(--g-gold-soft); flex: none; }
.g-steps__cta { padding-left: 76px; margin: 0; }

@media (max-width: 760px) {
	.g-process { padding: 0 8px; }
	.g-process__panel { padding: 56px 20px; border-radius: 20px; }
	.g-process__body { margin-top: 40px; gap: 40px; }
	.g-process__media { max-width: none; aspect-ratio: 4 / 5; }
	.g-step { gap: 16px; }
	.g-step__rail { width: 44px; }
	.g-step__dot { width: 44px; height: 44px; font-size: 20px; }
	.g-steps__cta { padding-left: 0; }
	.g-steps__cta .g-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Proyectos
   ----------------------------------------------------------------------- */
.g-projects { padding-bottom: 88px; }
.g-filter { display: flex; flex-wrap: wrap; gap: 8px; }
body.gasa .g-filter__btn {
	font: 500 15px/1 var(--g-sans); padding: 10px 18px; min-height: 44px; border-radius: 999px;
	border: 1px solid #d9d3c6; background: transparent; color: var(--g-ink); cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
body.gasa .g-filter__btn:hover { border-color: var(--g-navy); background: transparent; color: var(--g-ink); }
body.gasa .g-filter__btn[aria-pressed="true"] { background: var(--g-navy); border-color: var(--g-navy); color: #fff; font-weight: 600; }

.g-projects__grid { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.g-project { margin: 0; position: relative; border-radius: 18px; overflow: hidden; height: 420px; background: var(--g-sand-2); }
.g-project[hidden] { display: none; }
.g-project__img, .g-project > .gasa-ph { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.g-project:hover .g-project__img { transform: scale(1.04); }
.g-project__cap { position: absolute; left: 14px; bottom: 14px; right: 14px; background: #fff; border-radius: 12px; padding: 12px 16px; }
.g-project__cap b { display: block; font-weight: 600; font-size: 16px; }
.g-project__cap span { font-size: 14px; color: var(--g-muted); }
.g-projects__cta { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; text-align: center; }
.g-projects__cta p { font-size: 19px; color: var(--g-ink-2); }
@media (max-width: 760px) { .g-project { height: 360px; } }

/* --------------------------------------------------------------------------
   Opiniones
   ----------------------------------------------------------------------- */
.g-reviews { background: var(--g-navy); color: #fff; overflow: hidden; }
.g-reviews .g-h2 .g-serif { color: var(--g-gold-soft); }
.g-reviews__head { max-width: var(--g-max); margin: 0 auto; padding: 88px var(--g-gutter) 40px; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.g-reviews__score { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.g-score { display: flex; align-items: center; gap: 14px; background: #fff; color: var(--g-ink); border-radius: 14px; padding: 12px 18px; }
.g-score__num { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; }
.g-score .g-stars { color: #e09a12; }
.g-score small { display: block; font-size: 13px; color: var(--g-muted); }

.g-marquee { padding: 8px 0 88px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.g-marquee__track { display: flex; gap: 20px; width: max-content; padding: 0 10px; animation: g-marquee 60s linear infinite; }
.g-marquee:hover .g-marquee__track, .g-marquee:focus-within .g-marquee__track { animation-play-state: paused; }
@keyframes g-marquee { to { transform: translateX(calc(-50% - 10px)); } }
@media (prefers-reduced-motion: reduce) { .g-marquee { overflow-x: auto; } .g-marquee__track { animation: none; } }

.g-review {
	margin: 0; width: 380px; flex: none; box-sizing: border-box;
	background: var(--g-navy-2); border: 1px solid var(--g-navy-line); border-radius: 20px; padding: 28px;
	display: flex; flex-direction: column; gap: 16px;
	transition: transform .35s ease, border-color .35s ease, background-color .35s ease;
}
.g-review:hover { transform: translateY(-8px) rotate(-0.6deg); border-color: var(--g-gold); background: var(--g-navy-3); }
.g-review__top { display: flex; align-items: center; justify-content: space-between; }
.g-review__svc { font-size: 13px; font-weight: 600; color: var(--g-gold-soft); }
body.gasa .g-review blockquote { margin: 0; padding: 0; border: 0; font-size: 18px; line-height: 1.5; font-style: normal; color: #fff; }
.g-review figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.g-review figcaption b { display: block; font-weight: 600; font-size: 15px; }
.g-review figcaption small { display: block; font-size: 13px; color: rgba(255,255,255,.65); }
.g-review__avatar { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--g-gold); color: var(--g-navy); font-weight: 700; display: flex; align-items: center; justify-content: center; }
@media (max-width: 760px) { .g-review { width: 300px; } }

/* --------------------------------------------------------------------------
   FAQ
   ----------------------------------------------------------------------- */
.g-faq { background: var(--g-sand); }
.g-faq__inner { max-width: var(--g-max); margin: 0 auto; padding: 88px var(--g-gutter); box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 56px; }
.g-faq__side { flex: 1 1 320px; max-width: 400px; position: sticky; top: calc(var(--g-header-h) + 24px); align-self: flex-start; }
.g-faq__side p { margin-top: 24px; font-size: 18px; color: var(--g-muted); }
.g-faq__list { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.g-faq__item { background: var(--g-cream); border-radius: 16px; padding: 0 26px; }
.g-faq__item summary {
	list-style: none; cursor: pointer; padding: 22px 0; font-size: 20px; font-weight: 600;
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.g-faq__item summary::-webkit-details-marker { display: none; }
.g-faq__sign { position: relative; flex: none; width: 16px; height: 16px; }
.g-faq__sign::before, .g-faq__sign::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--g-gold-ink); border-radius: 2px; transition: transform .25s ease; }
.g-faq__sign::after { transform: rotate(90deg); }
.g-faq__item[open] .g-faq__sign::after { transform: rotate(0deg); }
.g-faq__item > p { padding-bottom: 22px; font-size: 17px; color: var(--g-ink-2); }
@media (max-width: 900px) { .g-faq__side { position: relative; top: auto; max-width: none; } }
@media (max-width: 760px) { .g-faq__item summary { font-size: 18px; } .g-faq__item { padding: 0 20px; } }

/* --------------------------------------------------------------------------
   Contacto
   ----------------------------------------------------------------------- */
.g-contact { padding: 88px 12px; }
.g-contact__panel { max-width: 1376px; margin: 0 auto; background: var(--g-navy); color: #fff; border-radius: var(--g-radius); padding: 72px 52px; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.g-contact .g-h2 .g-serif { color: var(--g-gold-soft); }
.g-contact__copy { flex: 1 1 400px; }
.g-contact__copy > p { margin-top: 24px; font-size: 19px; color: rgba(255,255,255,.8); max-width: 480px; }
.g-contact__ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }

.g-form { flex: 1 1 420px; background: #fff; color: var(--g-ink); border-radius: 20px; padding: 32px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; }
.g-form__row { display: flex; flex-wrap: wrap; gap: 16px; }
.g-form__row .g-field { flex: 1 1 180px; }
.g-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; margin: 0; }
body.gasa .g-field input, body.gasa .g-field select, body.gasa .g-field textarea {
	font: 400 16px/1.4 var(--g-sans); color: var(--g-ink); width: 100%; box-sizing: border-box;
	padding: 14px; border-radius: 10px; border: 1px solid #d9d3c6; background: #faf6ef;
}
body.gasa .g-field textarea { resize: vertical; }
body.gasa .g-field :is(input, select, textarea):focus { border-color: var(--g-navy); background: #fff; outline: 2px solid var(--g-gold); outline-offset: 1px; }
.g-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--g-muted); margin: 0; }
.g-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--g-navy); }
.g-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.g-form__notice { border-radius: 10px; padding: 12px 14px; font-size: 15px; font-weight: 600; }
.g-form__notice--ok { background: #e3f4ea; color: #1d6b45; }
.g-form__notice--warn { background: #fdf0d6; color: var(--g-gold-ink); }
body.gasa .g-form .g-btn--gold { font-size: 18px; padding: 17px; border: 0; }

@media (max-width: 760px) {
	.g-contact { padding: 56px 8px; }
	.g-contact__panel { padding: 48px 20px; border-radius: 20px; gap: 36px; }
	.g-form { padding: 22px; }
	.g-contact__ctas .g-btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Footer
   ----------------------------------------------------------------------- */
.g-footer { max-width: var(--g-max); margin: 0 auto; padding: 20px var(--g-gutter) 48px; box-sizing: border-box; }
.g-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--g-line-2); }
.g-footer__brand { max-width: 320px; }
.g-footer__brand p { margin-top: 14px; font-size: 15px; color: var(--g-muted); }
.g-footer__cols { display: flex; flex-wrap: wrap; gap: 56px; font-size: 15px; }
.g-footer__col { display: flex; flex-direction: column; gap: 10px; }
.g-footer__h { font-weight: 600; }
.g-footer__col a { text-decoration: none; }
body.gasa .g-footer__col a, .g-footer__col span { color: var(--g-ink-2); }
body.gasa .g-footer__col a:hover { color: var(--g-gold-ink); }
.g-footer__bottom { padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--g-muted); }
.g-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
body.gasa .g-footer__legal a { color: var(--g-muted); }

/* Ocultar el "volver arriba" de GP si lo activáis y choca con el diseño
.generate-back-to-top { display: none !important; }
*/

/* --------------------------------------------------------------------------
   Gutters móviles
   ----------------------------------------------------------------------- */
@media (max-width: 760px) {
	:root { --g-gutter: 16px; --g-header-h: 68px; }
	.g-section { padding-top: 72px; padding-bottom: 72px; }
	.g-head__aside { font-size: 17px; }
	.g-logo { font-size: 20px; }
}

/* --------------------------------------------------------------------------
   WPForms dentro de la tarjeta de contacto (.g-wpf)
   En WPForms › Ajustes › General › "Estilo del formulario" elegir "Sin estilos"
   (o "Solo base"). Estas reglas replican el formulario del diseño.
   ----------------------------------------------------------------------- */
.g-wpf { display: block; }
.g-wpf .wpforms-container { margin: 0 !important; padding: 0; max-width: none; }
.g-wpf .wpforms-form { margin: 0; }
.g-wpf .wpforms-field-container { display: flex; flex-wrap: wrap; gap: 16px; }
.g-wpf .wpforms-field { flex: 1 1 100%; padding: 0 !important; margin: 0 !important; float: none !important; width: auto !important; }
.g-wpf .wpforms-field.g-half { flex: 1 1 180px; }
.g-wpf .wpforms-field-hp { display: none !important; }

.g-wpf .wpforms-field-label,
.g-wpf .wpforms-field-sublabel { font: 600 14px/1.3 var(--g-sans) !important; color: var(--g-ink) !important; margin: 0 0 6px !important; padding: 0; }
.g-wpf .wpforms-required-label { color: var(--g-gold-ink) !important; }
.g-wpf .wpforms-field-description { font-size: 13px; color: var(--g-muted); margin-top: 6px; }

body.gasa .g-wpf input[type="text"],
body.gasa .g-wpf input[type="tel"],
body.gasa .g-wpf input[type="email"],
body.gasa .g-wpf select,
body.gasa .g-wpf textarea {
	font: 400 16px/1.4 var(--g-sans) !important; color: var(--g-ink) !important;
	width: 100% !important; max-width: none !important; height: auto !important; box-sizing: border-box;
	padding: 14px !important; border-radius: 10px !important; border: 1px solid #d9d3c6 !important;
	background: #faf6ef !important; box-shadow: none !important;
}
body.gasa .g-wpf textarea { min-height: 96px; resize: vertical; }
body.gasa .g-wpf :is(input, select, textarea):focus { border-color: var(--g-navy) !important; background: #fff !important; outline: 2px solid var(--g-gold) !important; outline-offset: 1px; }

/* Casilla de privacidad (campo "Acuerdo RGPD" o "Casillas") */
.g-wpf .wpforms-field-gdpr-checkbox ul,
.g-wpf .wpforms-field-checkbox ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.g-wpf .wpforms-field-gdpr-checkbox li,
.g-wpf .wpforms-field-checkbox li { display: flex; gap: 10px; align-items: flex-start; margin: 0 !important; padding: 0 !important; }
.g-wpf .wpforms-field-gdpr-checkbox input,
.g-wpf .wpforms-field-checkbox input { margin: 3px 0 0 !important; width: 18px; height: 18px; flex: none; accent-color: var(--g-navy); }
.g-wpf .wpforms-field-gdpr-checkbox label,
.g-wpf .wpforms-field-checkbox li label { font: 400 14px/1.45 var(--g-sans) !important; color: var(--g-muted) !important; }
.g-wpf .wpforms-field-gdpr-checkbox .wpforms-field-label { display: none !important; }

/* Botón */
.g-wpf .wpforms-submit-container { margin: 16px 0 0 !important; padding: 0 !important; }
body.gasa .g-wpf button.wpforms-submit {
	width: 100% !important; min-height: 56px; padding: 17px !important; border: 0 !important; border-radius: 12px !important;
	font: 600 18px/1.2 var(--g-sans) !important; background: var(--g-gold) !important; color: var(--g-navy) !important;
	cursor: pointer; box-shadow: none !important; transition: background-color .2s ease;
}
body.gasa .g-wpf button.wpforms-submit:hover { background: var(--g-gold-soft) !important; }
.g-wpf .wpforms-submit-spinner { margin: 10px auto 0; display: block; }

/* Errores y confirmación */
.g-wpf label.wpforms-error, .g-wpf em.wpforms-error { display: block; margin-top: 6px; font: 600 13px/1.3 var(--g-sans) !important; color: #b3261e !important; }
body.gasa .g-wpf .wpforms-has-error :is(input, select, textarea) { border-color: #b3261e !important; }
.g-wpf .wpforms-confirmation-container-full,
.g-wpf .wpforms-confirmation-container {
	margin: 0 !important; padding: 20px !important; border: 0 !important; border-radius: 12px;
	background: #e3f4ea !important; color: #1d6b45 !important; font: 600 17px/1.5 var(--g-sans) !important;
}
.g-wpf .wpforms-confirmation-container-full p { margin: 0; }
