/* ============================================================
   INGELUX — Diseño definitivo: "Editorial, pero de ingeniería"
   Urbanist extremo + fotografía a sangre + firma "set de planos".
   Usa los tokens de theme.json (--wp--preset--color--*).
   ============================================================ */

:root {
	--ig-ink: var(--wp--preset--color--contrast, #19191E);
	--ig-muted: var(--wp--preset--color--accent-4, #56565C);
	--ig-teal: var(--wp--preset--color--accent-1, #00B6CE);
	--ig-teal-ink: var(--wp--preset--color--accent-2, #008EA1);
	--ig-surface: var(--wp--preset--color--accent-3, #E9E9EF);
	--ig-hairline: var(--wp--preset--color--accent-5, #CFCFD5);
	--ig-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	/* Ancho fluido: crece con el viewport (≈90% del ancho en escritorio normal)
	   y se detiene en 1800px para no alargar demasiado la línea de lectura
	   en monitores ultra-anchos (2560px+). */
	--ig-wrap: clamp(320px, 94vw, 1800px);
	--ig-gutter: clamp(1.25rem, 2.5vw, 2.5rem);

	/* Escala de espaciado fluida — un mismo rol usa siempre el mismo token,
	   en cualquier bloque o sección del sitio. Interpola con clamp() entre
	   móvil y escritorio en vez de saltar por breakpoints fijos. */
	--ig-space-3xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.65rem);  /* micro (rótulos, iconos) */
	--ig-space-2xs: clamp(0.75rem, 0.65rem + 0.5vw, 1rem);     /* párrafo → párrafo */
	--ig-space-xs:  clamp(1rem, 0.85rem + 0.75vw, 1.5rem);     /* ítem → ítem en una lista/tarjeta */
	--ig-space-sm:  clamp(1.5rem, 1.2rem + 1.5vw, 2rem);       /* título/rótulo → cuerpo de texto */
	--ig-space-md:  clamp(2rem, 1.5rem + 2.5vw, 3rem);         /* gap entre tarjetas/columnas de grilla */
	--ig-space-lg:  clamp(3rem, 2rem + 5vw, 5rem);             /* respiro de tope de página (hero) */
	--ig-space-xl:  clamp(4rem, 2.5rem + 7.5vw, 7.5rem);       /* separación entre secciones (una sola vez, en todo el sitio) */

	/* Escala tipográfica fluida — el ancla es el título del hero de Inicio
	   (--ig-text-hero) y la bajada del hero (--ig-text-base). El resto de
	   los tamaños se definieron en relación a esos dos, en vez de un
	   clamp() distinto por bloque como antes. Un mismo rol (rótulo, cuerpo
	   secundario, título de tarjeta, etc.) usa siempre el mismo token en
	   todo el sitio. */
	--ig-text-label: clamp(0.85rem, 0.8rem + 0.3vw, 0.95rem);  /* rótulos mono: topline, footer, fecha, rol */
	--ig-text-xs:    clamp(0.9rem, 0.85rem + 0.25vw, 1rem);    /* letra fina: viñetas "qué incluye", bio, excerpt */
	--ig-text-sm:    clamp(0.95rem, 0.88rem + 0.35vw, 1.1rem); /* cuerpo secundario: desc. de servicio, datos de contacto */
	--ig-text-base:  clamp(1.05rem, 2.2vw, 1.3rem);            /* cuerpo base: bajada del hero, prosa */
	--ig-text-md:    clamp(1.15rem, 2.4vw, 1.5rem);            /* cuerpo destacado: enfoque, nombre de equipo, tarjetas */
	--ig-text-lg:    clamp(1.4rem, 2.6vw, 2.4rem);             /* declaración editorial: introducción */
	--ig-text-xl:    clamp(1.6rem, 3.2vw, 3rem);               /* título de servicio/tarjeta */
	--ig-text-2xl:   clamp(2rem, 4vw, 4rem);                   /* título hero de subpáginas */
	--ig-text-3xl:   clamp(2.1rem, 4.1vw, 4.1rem);             /* título de CTA final */
	--ig-text-hero:  clamp(2.2rem, 4.2vw, 4.25rem);            /* título hero de Inicio — ancla del sistema, el más grande de todos */
}

/* Contenedor centrado con gutter (las imágenes a sangre van fuera de .ig-wrap) */
.ig-wrap { max-width: var(--ig-wrap); margin-inline: auto; padding-inline: var(--ig-gutter); }

/* Rótulo técnico tipo lámina/cota (la firma) */
.ig-label {
	font-family: var(--ig-mono);
	font-size: var(--ig-text-label);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ig-muted);
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
}
.ig-label--sheet { color: var(--ig-teal-ink); }

/* ---------- HEADER (fijo arriba al hacer scroll) ----------
   Se usa position:fixed en vez de sticky: fixed no depende de que ningún
   ancestro tenga overflow/scroll propio, así que es más robusto. Al sacar
   el header del flujo normal, .wp-site-blocks compensa con padding-top
   del mismo alto, para que el contenido no salte debajo. */
.ing-siteheader {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	background: var(--wp--preset--color--base, #fff);
}
.wp-site-blocks { padding-top: 6.5rem; }

/* Fila superior de sección: eyebrow izq. + rótulo de lámina der. */
.ig-topline {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 1rem; flex-wrap: wrap;
	padding-block: 1.25rem;
	border-top: 1px solid var(--ig-hairline);
}

/* ---------- HERO ---------- */
.ig-hero { padding-top: var(--ig-space-lg); padding-bottom: 0; }
.ig-hero__eyebrow {
	font-family: var(--ig-mono);
	font-size: var(--ig-text-label); letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--ig-teal-ink); margin: 0 0 var(--ig-space-sm);
}
.ig-hero__title {
	font-family: "Urbanist", sans-serif;
	font-weight: 300;
	font-size: var(--ig-text-hero);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--ig-ink);
	margin: 0;
}
.ig-hero__actions { margin-top: var(--ig-space-sm); }

/* Fila bajada + botón (título va arriba, a ancho completo, en una sola línea) */
.ig-hero__row {
	display: flex; flex-wrap: wrap; align-items: flex-end;
	justify-content: space-between; gap: var(--ig-space-xs) var(--ig-space-md);
	margin-top: var(--ig-space-sm);
}
.ig-hero__row .ig-hero__lead { flex: 1 1 320px; max-width: 46ch; margin: 0; }
.ig-hero__row .ig-hero__actions { margin: 0; flex: none; }

/* Placeholder de imagen a sangre (hasta tener la real) */
.ig-imgph {
	display: grid; place-items: center;
	background:
		repeating-linear-gradient(45deg, transparent 0 22px, rgba(0,182,206,0.04) 22px 23px),
		var(--ig-surface);
	color: var(--ig-muted);
	border-block: 1px solid var(--ig-hairline);
}
.ig-imgph--hero { aspect-ratio: 2 / 1; }
.ig-imgph--about { aspect-ratio: 4 / 3; }
.ig-imgph__tag { font-family: var(--ig-mono); font-size: var(--ig-text-label); letter-spacing: 0.14em; }

/* Fotos reales (reemplazan los placeholders .ig-imgph cuando ya hay imagen).
   Las clases van directo sobre el <img>, no sobre un contenedor: por eso
   width/object-fit se aplican al propio selector, no a un descendiente. */
.ig-photo--hero, .ig-photo--about {
	display: block; width: 100%; height: auto; object-fit: cover; margin: 0;
	min-width: 0; /* evita que el <img> como ítem de grid fuerce su tamaño intrínseco */
}
.ig-photo--hero { aspect-ratio: 2 / 1; }
.ig-photo--about { aspect-ratio: 4 / 3; }
/* Gap simétrico con el padding-top del hero (mismo token arriba y abajo) */
.ig-hero .ig-photo--hero { margin-top: var(--ig-space-lg); }

/* ---------- INTRO editorial ---------- */
/* Sin padding-top: .ig-topline ya aporta el respiro superior + hairline.
   Grid de 2 columnas (rótulo / texto) para que el espacio a la derecha del
   texto sea una columna intencional, no un vacío sin estructurar. */
.ig-intro { padding-top: 0; padding-bottom: var(--ig-space-xl); }
.ig-intro__grid { display: grid; grid-template-columns: 1fr; gap: var(--ig-space-sm); }
.ig-intro__grid .ig-topline { grid-column: 1 / -1; }
.ig-intro__text {
	font-family: "Urbanist", sans-serif; font-weight: 400;
	font-size: var(--ig-text-lg); line-height: 1.32;
	letter-spacing: -0.01em; color: var(--ig-ink);
	max-width: 38ch; margin: 0;
}
.ig-intro__text .t { color: var(--ig-muted); }

@media (min-width: 900px) {
	.ig-intro__grid { grid-template-columns: minmax(0, 260px) 1fr; gap: var(--ig-space-lg); }
	.ig-intro__grid .ig-intro__text,
	.ig-intro__grid .ig-prose__text { grid-column: 2; }
}

/* ---------- SERVICIOS editoriales ---------- */
.ig-services { padding-top: 0; padding-bottom: var(--ig-space-xl); }
.ig-serv {
	display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem 2rem;
	align-items: start;
	padding-block: var(--ig-space-md);
	border-top: 1px solid var(--ig-hairline);
	transition: background-color .25s ease;
	color: inherit; text-decoration: none;
	scroll-margin-top: 2rem;
}
a.ig-serv:hover { color: inherit; text-decoration: none; }
.ig-services .ig-serv:last-child { border-bottom: 1px solid var(--ig-hairline); }
.ig-serv__num {
	font-family: var(--ig-mono); font-size: var(--ig-text-label); letter-spacing: 0.1em;
	color: var(--ig-teal); padding-top: 0.5rem;
}
.ig-serv__title {
	font-family: "Urbanist", sans-serif; font-weight: 300;
	font-size: var(--ig-text-xl); line-height: 1.05; letter-spacing: -0.015em;
	color: var(--ig-ink); margin: 0;
}
.ig-serv__desc {
	font-family: "Urbanist", sans-serif; font-weight: 400; font-size: var(--ig-text-sm); line-height: 1.55;
	color: var(--ig-muted); margin: var(--ig-space-2xs) 0 0; max-width: 46ch;
}
.ig-serv__arrow { color: var(--ig-teal); font-size: 1.5rem; padding-top: 0.5rem; transition: transform .25s ease; }
.ig-serv:hover { background: rgba(0,182,206,0.03); }
.ig-serv:hover .ig-serv__arrow { transform: translateX(6px); }

/* ---------- ENFOQUE ---------- */
.ig-enfoque { padding-top: 0; padding-bottom: var(--ig-space-xl); }
.ig-enfoque__grid { display: grid; grid-template-columns: 1fr; gap: var(--ig-space-md); align-items: center; }
.ig-enfoque__text {
	font-family: "Urbanist", sans-serif; font-weight: 400;
	font-size: var(--ig-text-md); line-height: 1.5; color: var(--ig-ink);
	max-width: 52ch; margin: var(--ig-space-sm) 0 0;
}

/* ---------- CTA final ---------- */
.ig-cta { background: var(--ig-surface); padding-top: 0; padding-bottom: var(--ig-space-xl); }
.ig-cta__title {
	font-family: "Urbanist", sans-serif; font-weight: 200;
	font-size: var(--ig-text-3xl); line-height: 1.02; letter-spacing: -0.02em;
	color: var(--ig-ink); margin: var(--ig-space-sm) 0 var(--ig-space-md); max-width: 18ch;
}

/* ---------- Botones (definitivo) ---------- */
.ig-btn a, a.ig-btn {
	display: inline-flex; align-items: center; gap: 0.6rem;
	font-family: "Urbanist", sans-serif; font-weight: 600; font-size: 1rem;
	color: #fff; background: var(--ig-teal);
	padding: 1rem 1.9rem; border-radius: 2px; min-height: 3rem;
	text-decoration: none; transition: background-color .18s ease;
}
.ig-btn a:hover, a.ig-btn:hover { background: var(--ig-teal-ink); color:#fff; }

/* ---------- HERO — subpáginas (Servicios, Nosotros, Contacto) ---------- */
.ig-hero--sub { padding-top: var(--ig-space-lg); padding-bottom: var(--ig-space-xl); }
.ig-hero--sub .ig-hero__title { font-size: var(--ig-text-2xl); line-height: 1.05; max-width: 20ch; }
.ig-hero__lead {
	font-family: "Urbanist", sans-serif; font-weight: 400;
	font-size: var(--ig-text-base); line-height: 1.6;
	color: var(--ig-muted); max-width: 52ch; margin: var(--ig-space-sm) 0 0;
}

/* ---------- "Qué incluye" (listas dentro de un servicio) ---------- */
.ig-serv__includes { list-style: none; margin: var(--ig-space-2xs) 0 0; padding: 0; max-width: 46ch; }
.ig-serv__includes li {
	position: relative; padding-left: 1.25rem; margin: var(--ig-space-3xs) 0;
	font-family: "Urbanist", sans-serif; font-weight: 400; font-size: var(--ig-text-xs); line-height: 1.5;
	color: var(--ig-muted);
}
.ig-serv__includes li::before {
	content: ""; position: absolute; left: 0; top: 0.65em;
	width: 0.5rem; height: 1px; background: var(--ig-teal);
}

/* ---------- PROSA (Nosotros) ---------- */
.ig-prose { padding-top: 0; padding-bottom: var(--ig-space-xl); }
.ig-prose__text {
	font-family: "Urbanist", sans-serif; font-weight: 400;
	font-size: var(--ig-text-base); line-height: 1.65;
	color: var(--ig-ink); max-width: 62ch; margin: 0 0 calc(var(--ig-space-xs) / 2);
}
.ig-prose__text:last-child { margin-bottom: 0; }

/* ---------- EQUIPO (Nosotros) ---------- */
.ig-team { padding-top: 0; padding-bottom: var(--ig-space-xl); }
.ig-team__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ig-space-md); margin-top: var(--ig-space-sm); }
.ig-team__member {
	display: flex; flex-direction: column; gap: var(--ig-space-2xs);
	min-width: 0; /* evita que una palabra larga (rol, nombre) fuerce esa columna a crecer más que las demás */
}
.ig-team__member * { overflow-wrap: break-word; }
.ig-team__photo {
	aspect-ratio: 4 / 5;
	display: grid; place-items: center;
	background:
		repeating-linear-gradient(45deg, transparent 0 22px, rgba(0,182,206,0.04) 22px 23px),
		var(--ig-surface);
	border-block: 1px solid var(--ig-hairline);
	color: var(--ig-muted); font-family: var(--ig-mono); font-size: var(--ig-text-label); letter-spacing: 0.1em;
	text-align: center; padding: 1rem;
}
.ig-team__name { font-family: "Urbanist", sans-serif; font-weight: 600; font-size: var(--ig-text-md); margin: 0; color: var(--ig-ink); }
.ig-team__role {
	font-family: var(--ig-mono); font-size: var(--ig-text-label); letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--ig-teal-ink); margin: 0.25rem 0 0.75rem;
}
.ig-team__bio { font-family: "Urbanist", sans-serif; font-weight: 400; font-size: var(--ig-text-xs); line-height: 1.55; color: var(--ig-muted); margin: 0; }

/* ---------- CONTACTO ---------- */
.ig-contact { padding-top: 0; padding-bottom: var(--ig-space-xl); }
.ig-contact__grid { display: grid; grid-template-columns: 1fr; gap: var(--ig-space-md); }
.ig-contact__label {
	font-family: var(--ig-mono); font-size: var(--ig-text-label); letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ig-teal-ink); margin: 0 0 var(--ig-space-sm);
}
.ig-contact__item { padding: var(--ig-space-xs) 0; border-top: 1px solid var(--ig-hairline); }
.ig-contact__aside .ig-contact__item:last-child { border-bottom: 1px solid var(--ig-hairline); }
.ig-contact__item-title {
	font-family: "Urbanist", sans-serif; font-weight: 600; font-size: var(--ig-text-sm);
	color: var(--ig-ink); margin: 0 0 0.4rem;
}
.ig-contact__item-text { font-family: "Urbanist", sans-serif; font-weight: 400; font-size: var(--ig-text-sm); line-height: 1.5; color: var(--ig-muted); margin: 0; }
.ig-contact__item-text a { color: var(--ig-teal-ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .18s ease; }
.ig-contact__item-text a:hover { border-bottom-color: var(--ig-teal-ink); }
.ig-contact__map { margin-top: 0.5rem; border: 1px solid var(--ig-hairline); }
.ig-contact__map iframe { display: block; width: 100%; height: 260px; border: 0; filter: grayscale(0.15) contrast(1.05); }

/* ---------- RECURSOS (listado de artículos) ---------- */
.ig-resources { padding-top: 0; padding-bottom: var(--ig-space-xl); }
.ig-resources__grid { display: grid; grid-template-columns: 1fr; gap: var(--ig-space-md); margin-top: var(--ig-space-sm); }
.ig-resources__empty { font-family: "Urbanist", sans-serif; color: var(--ig-muted); font-size: var(--ig-text-base); }
.ig-resource-card__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ig-resource-card__date {
	display: block; font-family: var(--ig-mono); font-size: var(--ig-text-label); letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--ig-teal-ink); margin: 1rem 0 0.5rem;
}
.ig-resource-card__title { font-family: "Urbanist", sans-serif; font-weight: 600; font-size: var(--ig-text-md); margin: 0 0 0.5rem; }
.ig-resource-card__title a { color: var(--ig-ink); text-decoration: none; }
.ig-resource-card__title a:hover { color: var(--ig-teal-ink); }
.ig-resource-card__excerpt { font-family: "Urbanist", sans-serif; color: var(--ig-muted); font-size: var(--ig-text-xs); line-height: 1.55; margin: 0; }
.wp-block-query-pagination { margin-top: 1rem; font-family: var(--ig-mono); font-size: var(--ig-text-label); }

/* ---------- FORMULARIO (Gutena Forms — Solicitud de propuesta) ---------- */
.ig-form-section { padding-top: 0; padding-bottom: var(--ig-space-xl); }

.ig-form-section-title {
	font-family: "Urbanist", sans-serif; font-weight: 300; font-size: var(--ig-text-xl); line-height: 1.15;
	letter-spacing: -0.01em; color: var(--ig-ink); margin: 0;
	padding-top: var(--ig-space-sm); margin-top: var(--ig-space-lg);
	border-top: 1px solid var(--ig-hairline);
}
.ig-form-section-title:first-child { margin-top: 0; }

.ig-form-section-note {
	font-family: "Urbanist", sans-serif; font-weight: 400; font-size: var(--ig-text-sm);
	color: var(--ig-muted); margin: var(--ig-space-3xs) 0 0;
}

.ig-form-row { gap: var(--ig-space-md) !important; margin-top: var(--ig-space-md); }
.ig-form-row .ig-form-field { flex: 1 1 220px; margin-top: 0; }

.ig-form-field { display: flex; flex-direction: column; gap: var(--ig-space-3xs); margin-top: var(--ig-space-md); min-width: 0; }

.ig-form-field label {
	font-family: "Urbanist", sans-serif; font-weight: 600; font-size: var(--ig-text-xs);
	color: var(--ig-ink);
}

.ig-form-field input[type="text"],
.ig-form-field input[type="email"],
.ig-form-field input[type="number"],
.ig-form-field select,
.ig-form-field textarea {
	font-family: inherit; font-size: var(--ig-text-sm); color: var(--ig-ink);
	background: #fff; border: 1px solid var(--ig-hairline); border-radius: 2px;
	padding: 0.65rem 0.85rem; width: 100%; box-sizing: border-box;
	transition: border-color .18s ease;
}
.ig-form-field textarea { resize: vertical; }
.ig-form-field input:focus,
.ig-form-field select:focus,
.ig-form-field textarea:focus {
	outline: none; border-color: var(--ig-teal); box-shadow: 0 0 0 3px rgba(0,182,206,0.12);
}
.ig-form-field input::placeholder,
.ig-form-field textarea::placeholder { color: var(--ig-muted); opacity: 1; }

.gutena-forms-checkbox-field > div,
.gutena-forms-radio-field > div {
	display: flex; flex-direction: column; align-items: flex-start; gap: var(--ig-space-2xs);
}
.checkbox-container, .radio-container {
	display: inline-block; position: relative; padding-left: 1.75rem;
	font-family: "Urbanist", sans-serif; font-size: var(--ig-text-sm); color: var(--ig-ink);
	font-weight: 400; cursor: pointer;
}
.checkbox-container .checkmark, .radio-container .checkmark {
	left: 0;
}

/* Grilla "Portafolio de contratos": 6 campos pareados (gutena/form-field) que se
   ven como una sola tabla de 3 filas x 3 columnas (categoría + 2 campos), gracias
   a que category-label + los 2 .ig-form-field comparten un mismo grid-row en
   escritorio. En móvil se apila como una tarjeta por categoría, con las etiquetas
   de cada campo visibles otra vez (en escritorio quedan solo para lectores de
   pantalla, ya que la fila de encabezado ya nombra las columnas). */
.ig-form-portfolio-grid {
	margin-top: var(--ig-space-md); border: 1px solid var(--ig-hairline); border-radius: 4px;
	overflow: hidden;
}
.ig-form-portfolio-head { display: none; }
.ig-form-portfolio-row {
	display: flex; flex-direction: column; gap: var(--ig-space-sm);
	padding: var(--ig-space-md); border-top: 1px solid var(--ig-hairline);
}
.ig-form-portfolio-grid > .ig-form-portfolio-row:first-child { border-top: none; }
.ig-form-portfolio-row-label p {
	font-family: "Urbanist", sans-serif; font-weight: 600; font-size: var(--ig-text-sm);
	color: var(--ig-ink); margin: 0;
}
.ig-form-portfolio-row-label small {
	display: block; font-weight: 400; color: var(--ig-muted); font-size: var(--ig-text-xs);
}
.ig-form-portfolio-cell { margin-top: 0; }

@media (min-width: 700px) {
	.ig-form-portfolio-head,
	.ig-form-portfolio-row {
		display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--ig-space-md); align-items: center;
	}
	.ig-form-portfolio-head {
		padding: var(--ig-space-sm) var(--ig-space-md); background: var(--ig-surface);
		font-family: var(--ig-mono); font-size: var(--ig-text-label); text-transform: uppercase;
		letter-spacing: 0.1em; color: var(--ig-teal-ink); border-top: none;
	}
	.ig-form-portfolio-head p { margin: 0; }
	/* La fila de encabezado ya nombra "Cantidad de contratos" / "Nivel de servicio
	   deseado", así que ocultamos (visualmente, no de lectores de pantalla) la
	   etiqueta repetida de cada campo individual en escritorio. */
	.ig-form-portfolio-cell label {
		position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
	}
}
.ig-form-contract .ig-form-row:first-of-type,
.ig-form-contract > .ig-form-field:first-of-type { margin-top: 0; }

.ig-form-section .wp-block-buttons { margin-top: var(--ig-space-lg); }

/* ---------- Responsividad: tablet (retrato) ----------
   Tier intermedio entre móvil (1 columna) y escritorio (3 columnas),
   para que tablets (~600-899px, ej. iPad en vertical) no salten
   directo de 1 a 3 columnas. Equipo ya es 2 columnas desde móvil (2 y 2),
   así que aquí solo se ajusta Recursos. */
@media (min-width: 600px) {
	.ig-resources__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Responsividad: escritorio (≥900px, incluye HD 1366 y Full HD 1920+) ---------- */
@media (min-width: 900px) {
	.ig-enfoque__grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; }
	.ig-team__grid { grid-template-columns: repeat(4, 1fr); }
	.ig-contact__grid { grid-template-columns: 1.4fr 1fr; gap: 4rem; }
	.ig-resources__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Motion (fade/reveal), respeta reduce-motion ---------- */
@media (prefers-reduced-motion: no-preference) {
	.ig-reveal { opacity: 0; transform: translateY(14px); animation: ig-in .7s ease forwards; }
}
@keyframes ig-in { to { opacity: 1; transform: none; } }

/* ---------- FOOTER ---------- */
.ig-footer { border-top: 1px solid var(--ig-hairline); padding-block: var(--ig-space-lg) var(--ig-space-sm); }
.ig-footer__top { gap: var(--ig-space-md) var(--ig-space-lg); padding-bottom: var(--ig-space-md); }
.ig-footer__tag {
	font-family: var(--ig-mono); font-size: var(--ig-text-label); letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ig-muted); margin: 0.75rem 0 0;
}
.ig-footer__label {
	font-family: var(--ig-mono); font-size: var(--ig-text-label); letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ig-teal-ink); margin: 0 0 0.75rem;
}
.ig-footer .wp-block-navigation { font-size: var(--ig-text-sm); }
.ig-footer__bottom { border-top: 1px solid var(--ig-hairline); padding-top: var(--ig-space-sm); }
.ig-footer__bottom p { color: var(--ig-muted); margin: 0; font-size: var(--ig-text-label); }

/* Nav del header: reemplaza el preset "medium" de WordPress por el token propio */
.ing-siteheader .wp-block-navigation { font-size: var(--ig-text-sm); }
