/* ==========================================================================
   MarketinGeek — sistema visual
   Idea central: el logo es un triángulo imposible, tres lados que "no
   deberían" encajar y encajan: marca, marketing y tecnología. La paleta sale
   de su degradado (azul marino → azul → verde azulado → lima) y una sola
   familia tipográfica (Archivo) cambia de ancho según la voz: ancha para la
   marca, normal para leer. Todos los colores viven en los tokens --mg-*.
   ========================================================================== */

@font-face {
	font-family: "Archivo MG";
	src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"),
	     url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Archivo MG";
	src: url("../fonts/archivo-latin-wdth-italic.woff2") format("woff2-variations"),
	     url("../fonts/archivo-latin-wdth-italic.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: italic;
	font-display: swap;
}

:root {
	/* Colores */
	/* Paleta tomada del logo (triángulo imposible): azul marino → azul → verde azulado → lima */
	--mg-paper: #F4F6F2;
	--mg-white: #FFFFFF;
	--mg-ink: #1D2A4D;
	--mg-navy: #3B5385;
	--mg-graphite: #55607A;
	--mg-rule: #D6DBD3;
	--mg-blue: #2C69A1;
	--mg-blue-ink: #285F93;
	--mg-teal: #69B496;
	--mg-sage: #A8CA8C;
	--mg-lime: #CDD983;
	--mg-gradient: linear-gradient(120deg, #3B5385 0%, #2C69A1 30%, #69B496 62%, #CDD983 100%);

	/* Tipografía */
	--mg-font: "Archivo MG", "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mg-step--1: 0.875rem;
	--mg-step-0: 1.0625rem;
	--mg-step-1: 1.3125rem;
	--mg-step-2: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
	--mg-step-3: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	--mg-step-4: clamp(2.6rem, 1.5rem + 4.6vw, 5.4rem);

	/* Ritmo */
	--mg-gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
	--mg-section: clamp(4.5rem, 3rem + 7vw, 9.5rem);
	--mg-max: 1240px;
	--mg-measure: 64ch;
	--mg-radius: 3px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
	margin: 0;
	background: var(--mg-paper);
	color: var(--mg-ink);
	font-family: var(--mg-font);
	font-size: var(--mg-step-0);
	line-height: 1.6;
	font-stretch: 100%;
	font-weight: 400;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--mg-font);
	color: var(--mg-ink);
	margin: 0 0 0.5em;
	text-wrap: balance;
}
h1, .mg-h1 .elementor-heading-title { font-size: var(--mg-step-4); font-weight: 780; font-stretch: 118%; line-height: 0.98; letter-spacing: -0.025em; }
h2, .mg-h2 .elementor-heading-title { font-size: var(--mg-step-3); font-weight: 720; font-stretch: 112%; line-height: 1.04; letter-spacing: -0.018em; }
h3, .mg-h3 .elementor-heading-title { font-size: var(--mg-step-2); font-weight: 660; font-stretch: 106%; line-height: 1.15; letter-spacing: -0.01em; }
h4 { font-size: var(--mg-step-1); font-weight: 640; line-height: 1.3; }
p { margin: 0 0 1.1em; }
a { color: var(--mg-blue-ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--mg-ink); text-decoration-color: var(--mg-teal); }
img { max-width: 100%; height: auto; }
::selection { background: var(--mg-lime); color: var(--mg-ink); }
:focus-visible { outline: 2px solid var(--mg-blue); outline-offset: 3px; }
hr { border: 0; border-top: 1px solid var(--mg-rule); margin: 2.5rem 0; }

.mg-wrap { max-width: var(--mg-max); margin-inline: auto; padding-inline: var(--mg-gutter); }
.mg-lead, .mg-lead .elementor-widget-container p { font-size: var(--mg-step-1); line-height: 1.5; color: var(--mg-ink); max-width: 46ch; }
.mg-muted, .mg-muted p { color: var(--mg-graphite); }
.mg-measure p, .mg-measure li { max-width: var(--mg-measure); }

.screen-reader-text, .mg-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 999; background: var(--mg-ink); color: var(--mg-white); padding: 0.6rem 1rem; clip: auto; width: auto; height: auto; }

/* --------------------------------------------------------------------------
   Botones (nativos y de Elementor)
   -------------------------------------------------------------------------- */
.mg-btn,
.elementor-widget-button.mg-btn-primary .elementor-button,
.elementor-widget-button.mg-btn-ghost .elementor-button,
.mg-form button[type="submit"] {
	display: inline-flex; align-items: center; gap: 0.6em;
	font-family: var(--mg-font); font-size: 1rem; font-weight: 640; font-stretch: 108%;
	line-height: 1; letter-spacing: 0;
	padding: 1.05em 1.5em; border-radius: var(--mg-radius);
	border: 1.5px solid var(--mg-ink);
	background: var(--mg-ink); color: var(--mg-white);
	text-decoration: none; cursor: pointer;
	transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.mg-btn:hover,
.elementor-widget-button.mg-btn-primary .elementor-button:hover,
.mg-form button[type="submit"]:hover {
	background: var(--mg-ink); color: var(--mg-white);
	/* sombra desplazada en el color del logo */
	box-shadow: 3px 3px 0 var(--mg-teal);
}
.elementor-widget-button.mg-btn-ghost .elementor-button,
.mg-btn--ghost { background: transparent; color: var(--mg-ink); }
.elementor-widget-button.mg-btn-ghost .elementor-button:hover,
.mg-btn--ghost:hover { background: transparent; color: var(--mg-ink); box-shadow: 3px 3px 0 var(--mg-blue); }
.e-con.mg-btn-row { --width: auto; --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0; margin-top: 0.6rem; }
.e-con.mg-headrow > .elementor-widget-heading { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */
.mg-header {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--mg-paper) 92%, transparent);
	-webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}
.mg-header.is-scrolled { border-bottom-color: var(--mg-rule); }
.mg-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 4.5rem; }
.mg-brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--mg-ink); }
.mg-brand { gap: 0.6rem; }
.mg-brand img { max-height: 44px; width: auto; }
.mg-brand .mg-brand__mark { width: 34px; height: 34px; flex: none; }
.mg-wordmark { font-size: 1.35rem; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.mg-wordmark__a { font-weight: 800; font-stretch: 125%; }
.mg-wordmark__b { font-weight: 560; font-stretch: 70%; color: var(--mg-ink); position: relative; }
.mg-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1rem, 2vw, 2.1rem); align-items: center; }
.mg-nav a { color: var(--mg-ink); text-decoration: none; font-size: 0.98rem; font-weight: 500; padding: 0.4rem 0; position: relative; }
.mg-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--mg-blue); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.mg-nav a:hover::after, .mg-nav .current-menu-item > a::after, .mg-nav .current_page_parent > a::after { transform: scaleX(1); }
.mg-header__cta { padding: 0.8em 1.15em; font-size: 0.95rem; }
.mg-menu-toggle { display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer; color: var(--mg-ink); }
.mg-menu-toggle svg { display: block; }

@media (max-width: 920px) {
	.mg-menu-toggle { display: inline-flex; }
	.mg-header__cta { display: none; }
	.mg-nav { position: fixed; inset: 4.5rem 0 auto 0; background: var(--mg-paper); border-bottom: 1px solid var(--mg-rule); padding: 1rem var(--mg-gutter) 2rem; display: none; }
	.mg-nav.is-open { display: block; }
	.mg-nav ul { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
	.mg-nav a { font-size: 1.6rem; font-stretch: 112%; font-weight: 680; display: block; padding: 0.35rem 0; }
	.mg-nav .mg-nav__cta { display: inline-flex; margin-top: 1rem; }
}
@media (min-width: 921px) { .mg-nav .mg-nav__cta-item { display: none; } }

/* --------------------------------------------------------------------------
   Secciones construidas en Elementor (contenedores con clases mg-*)
   Se definen variables del contenedor para que el editor pueda sobrescribirlas.
   -------------------------------------------------------------------------- */
.e-con.mg-section { --padding-top: var(--mg-section); --padding-bottom: var(--mg-section); --padding-left: var(--mg-gutter); --padding-right: var(--mg-gutter); --content-width: var(--mg-max); }
.e-con.mg-section--tight { --padding-top: calc(var(--mg-section) * .55); --padding-bottom: calc(var(--mg-section) * .55); }
.e-con.mg-section--ink { background-color: var(--mg-ink); color: #E8E9EE; }
.e-con.mg-section--ink .elementor-heading-title, .e-con.mg-section--ink h2, .e-con.mg-section--ink h3 { color: var(--mg-white); }
.e-con.mg-section--ink a:not(.elementor-button) { color: #7FD3F7; }
.e-con.mg-section--ink .mg-muted, .e-con.mg-section--ink .mg-muted p { color: #A9ADBE; }
.e-con.mg-section--white { background-color: var(--mg-white); }
.e-con.mg-section--rule { border-top: 1px solid var(--mg-rule); }

/* Ficha: título a la izquierda, contenido a la derecha (12 columnas: 4 + 8) */
.e-con.mg-sheet { --flex-direction: row; --flex-wrap: wrap; --gap: 2rem var(--mg-gutter); --row-gap: 2rem; --column-gap: var(--mg-gutter); }
.e-con.mg-sheet > .e-con-inner > .mg-sheet__label, .e-con.mg-sheet > .mg-sheet__label { --width: calc(33.333% - var(--mg-gutter)); }
.e-con.mg-sheet > .e-con-inner > .mg-sheet__body,  .e-con.mg-sheet > .mg-sheet__body  { --width: 66.666%; }
@media (max-width: 880px) {
	.e-con.mg-sheet > .e-con-inner > .mg-sheet__label, .e-con.mg-sheet > .mg-sheet__label,
	.e-con.mg-sheet > .e-con-inner > .mg-sheet__body,  .e-con.mg-sheet > .mg-sheet__body { --width: 100%; }
}
.mg-kicker .elementor-heading-title, .mg-kicker { font-size: var(--mg-step--1); font-weight: 600; font-stretch: 100%; letter-spacing: 0; color: var(--mg-graphite); }
.mg-section--ink .mg-kicker .elementor-heading-title { color: #A9ADBE; }

/* --------------------------------------------------------------------------
   Hero con el triángulo del logo
   -------------------------------------------------------------------------- */
.e-con.mg-hero { --padding-top: clamp(3rem, 2rem + 5vw, 7rem); --padding-bottom: clamp(3.5rem, 2rem + 6vw, 8rem); --flex-direction: row; --flex-wrap: wrap; --align-items: center; --column-gap: var(--mg-gutter); --row-gap: 2.5rem; }
.e-con.mg-hero > .e-con-inner > .mg-hero__copy, .e-con.mg-hero > .mg-hero__copy { --width: calc(58% - var(--mg-gutter)); }
.e-con.mg-hero > .e-con-inner > .mg-hero__art,  .e-con.mg-hero > .mg-hero__art  { --width: 42%; }
@media (max-width: 960px) {
	.e-con.mg-hero > .e-con-inner > .mg-hero__copy, .e-con.mg-hero > .mg-hero__copy,
	.e-con.mg-hero > .e-con-inner > .mg-hero__art,  .e-con.mg-hero > .mg-hero__art { --width: 100%; }
	.mg-hero__art { order: -1; }
}
.mg-hero h1, .mg-hero .elementor-heading-title { max-width: 15ch; font-size: clamp(2.6rem, 1.4rem + 4.2vw, 5rem); }
.e-con.mg-hero--svc > .e-con-inner > .mg-hero__copy, .e-con.mg-hero--svc > .mg-hero__copy { --width: 100%; }
.mg-hero--svc h1, .mg-hero--svc .elementor-heading-title { max-width: 19ch; }
.mg-hero--svc .mg-lead p, .mg-hero--svc .mg-lead { max-width: 58ch; }

/* Fila de encabezado: título a la izquierda, enlace a la derecha */
.e-con.mg-headrow { --flex-direction: row; --flex-wrap: nowrap; --justify-content: space-between; --align-items: flex-end; --gap: 1rem; --row-gap: 1rem; --column-gap: 1rem; margin-bottom: 2.5rem; }
.e-con.mg-headrow .elementor-heading-title { margin: 0; }

.mg-emblem { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 520 / 420; }
.mg-emblem img { position: absolute; left: 16.92%; top: 9.52%; width: 66.15%; height: auto; }
.mg-emblem svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mg-emblem .lbl { font-family: var(--mg-font); font-size: 18px; font-weight: 680; font-stretch: 110%; fill: var(--mg-ink); }
.mg-emblem .sub { font-family: var(--mg-font); font-size: 13.5px; font-weight: 400; fill: var(--mg-graphite); }
.mg-emblem .lead { stroke: var(--mg-ink); stroke-width: 1; fill: none; }
.mg-emblem .dot { fill: var(--mg-ink); }

/* Momento único de movimiento: el triángulo "encaja" al cargar */
@media (prefers-reduced-motion: no-preference) {
	.mg-emblem.is-armed img { transform: rotate(-14deg) scale(.94); opacity: 0; }
	.mg-emblem.is-armed svg { opacity: 0; }
	.mg-emblem img { transition: transform 1.1s cubic-bezier(.2,.7,.1,1), opacity .6s ease; }
	.mg-emblem svg { transition: opacity .5s ease .8s; }
}

/* --------------------------------------------------------------------------
   Lista de servicios (filas, no tarjetas)
   -------------------------------------------------------------------------- */
.mg-services { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--mg-ink); }
.mg-services__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; gap: 1rem 2.5rem; padding: 2rem 0; border-bottom: 1px solid var(--mg-rule); align-items: start; }
.mg-services__name { margin: 0; font-size: var(--mg-step-2); font-weight: 700; font-stretch: 112%; line-height: 1.08; }
.mg-services__name a { color: inherit; text-decoration: none; }
.mg-services__name .ink { display: inline-block; width: 0.42em; height: 0.42em; border-radius: 50%; margin-right: 0.45em; vertical-align: 0.12em; mix-blend-mode: multiply; }
.mg-services__desc { margin: 0; color: var(--mg-graphite); max-width: 52ch; }
.mg-services__desc strong { color: var(--mg-ink); font-weight: 600; }
.mg-services__go { align-self: center; font-weight: 600; white-space: nowrap; }
@media (max-width: 820px) { .mg-services__row { grid-template-columns: 1fr; gap: 0.6rem; } }

/* --------------------------------------------------------------------------
   Proceso (secuencia real: numeración justificada)
   -------------------------------------------------------------------------- */
.mg-steps { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.mg-steps li { counter-increment: paso; padding: 1.4rem 1.6rem 0 0; border-top: 1.5px solid currentColor; position: relative; }
.mg-steps li::before { content: counter(paso); display: block; font-size: 2.6rem; font-weight: 300; font-stretch: 62%; line-height: 1; margin-bottom: 1rem; color: var(--mg-blue); }
.mg-section--ink .mg-steps li::before { color: var(--mg-lime); }
.mg-steps h3 { font-size: var(--mg-step-1); font-stretch: 106%; margin-bottom: 0.4rem; }
.mg-steps p { font-size: 0.98rem; color: inherit; opacity: 0.82; margin: 0; }
@media (max-width: 900px) { .mg-steps { grid-template-columns: 1fr 1fr; row-gap: 2rem; } }
@media (max-width: 560px) { .mg-steps { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Pruebas de imprenta (proyectos)
   -------------------------------------------------------------------------- */
.mg-proofs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3.5rem var(--mg-gutter); }
.mg-proof { grid-column: span 6; margin: 0; }
.mg-proofs--featured .mg-proof:nth-child(3n+1) { grid-column: span 7; }
.mg-proofs--featured .mg-proof:nth-child(3n+2) { grid-column: span 5; margin-top: 4.5rem; }
.mg-proofs--featured .mg-proof:nth-child(3n) { grid-column: 3 / span 8; }
.mg-proof a { color: inherit; text-decoration: none; display: block; }
.mg-proof__sheet { position: relative; padding: 14px; }
.mg-proof__sheet::before, .mg-proof__sheet::after { /* marcas de corte */
	content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
	border-color: var(--mg-ink); border-style: solid; opacity: .55;
}
.mg-proof__sheet::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
.mg-proof__sheet::after { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.mg-proof__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--mg-white); }
.mg-proof__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.mg-proof a:hover .mg-proof__img img { transform: scale(1.025); }
.mg-proof figcaption { padding: 1rem 14px 0; }
.mg-proof__title { font-size: var(--mg-step-1); font-weight: 680; font-stretch: 108%; line-height: 1.2; margin: 0 0 0.3rem; }
.mg-proof__meta { font-size: var(--mg-step--1); color: var(--mg-graphite); margin: 0; }
@media (max-width: 820px) {
	.mg-proof, .mg-proofs--featured .mg-proof:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
}

/* Filtro de proyectos */
.mg-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 3rem; padding: 0; list-style: none; }
.mg-filter a { display: inline-block; padding: 0.5em 0.95em; border: 1px solid var(--mg-rule); border-radius: 99px; color: var(--mg-ink); text-decoration: none; font-size: 0.95rem; }
.mg-filter a[aria-current="page"], .mg-filter a:hover { border-color: var(--mg-ink); background: var(--mg-ink); color: var(--mg-white); }

/* --------------------------------------------------------------------------
   Clientes (texto, sin logos prestados)
   -------------------------------------------------------------------------- */
.mg-clients { display: flex; flex-wrap: wrap; gap: 0.4rem 2.2rem; margin: 0; padding: 0; list-style: none; }
.mg-clients li { font-size: var(--mg-step-1); font-weight: 620; font-stretch: 112%; color: var(--mg-ink); }
.mg-clients li span { font-weight: 400; font-stretch: 100%; font-size: 0.9rem; color: var(--mg-graphite); margin-left: 0.4em; }

/* --------------------------------------------------------------------------
   Datos de la casa (frase + cifra, sin tarjetas)
   -------------------------------------------------------------------------- */
.mg-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem var(--mg-gutter); margin: 0; }
.mg-facts div { border-left: 3px solid var(--mg-blue); padding-left: 1.1rem; }
.mg-facts div:nth-child(2) { border-color: var(--mg-teal); }
.mg-facts div:nth-child(3) { border-color: var(--mg-lime); }
.mg-facts dt { font-size: var(--mg-step-3); font-weight: 300; font-stretch: 70%; line-height: 1; margin-bottom: 0.4rem; }
.mg-facts dd { margin: 0; color: var(--mg-graphite); font-size: 0.98rem; max-width: 30ch; }
@media (max-width: 760px) { .mg-facts { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Detalle de servicio
   -------------------------------------------------------------------------- */
.mg-deliverables { columns: 2; column-gap: 2.5rem; padding: 0; margin: 0; list-style: none; }
.mg-deliverables li { break-inside: avoid; padding: 0.55rem 0 0.55rem 1.4rem; border-bottom: 1px solid var(--mg-rule); position: relative; }
.mg-deliverables li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--mg-blue); mix-blend-mode: multiply; }
.mg-svc--m .mg-deliverables li::before { background: var(--mg-teal); }
.mg-svc--y .mg-deliverables li::before { background: var(--mg-lime); }
.mg-svc--k .mg-deliverables li::before { background: var(--mg-ink); }
@media (max-width: 700px) { .mg-deliverables { columns: 1; } }

.mg-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; line-height: 1.6; background: var(--mg-ink); color: #E6E8F0; padding: 1.4rem 1.6rem; border-radius: var(--mg-radius); overflow-x: auto; }
.mg-code .k { color: #7FD3F7; } .mg-code .s { color: #FFE47A; } .mg-code .c { color: #8C91A8; }

/* --------------------------------------------------------------------------
   FAQ (details nativos)
   -------------------------------------------------------------------------- */
.mg-faq { border-top: 1.5px solid var(--mg-ink); }
.mg-faq details { border-bottom: 1px solid var(--mg-rule); }
.mg-faq summary { list-style: none; cursor: pointer; padding: 1.3rem 2.5rem 1.3rem 0; position: relative; font-size: var(--mg-step-1); font-weight: 620; font-stretch: 104%; }
.mg-faq summary::-webkit-details-marker { display: none; }
.mg-faq summary::after { content: "+"; position: absolute; right: 0.2rem; top: 1.05rem; font-size: 1.6rem; font-weight: 300; transition: transform .2s ease; }
.mg-faq details[open] summary::after { transform: rotate(45deg); }
.mg-faq details > div { padding: 0 0 1.4rem; color: var(--mg-graphite); max-width: var(--mg-measure); }

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */
.mg-form { display: grid; gap: 1.1rem; max-width: 640px; }
.mg-form .mg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 600px) { .mg-form .mg-row { grid-template-columns: 1fr; } }
.mg-form label { display: block; font-size: 0.92rem; font-weight: 600; margin-bottom: 0.35rem; }
.mg-form .opt { font-weight: 400; color: var(--mg-graphite); }
.mg-form input[type="text"], .mg-form input[type="email"], .mg-form input[type="tel"], .mg-form select, .mg-form textarea {
	width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; color: var(--mg-ink);
	background: var(--mg-white); border: 1px solid #BFC1BA; border-radius: var(--mg-radius); padding: 0.85rem 0.95rem;
}
.mg-form textarea { min-height: 150px; resize: vertical; }
.mg-form input:focus, .mg-form select:focus, .mg-form textarea:focus { outline: none; border-color: var(--mg-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mg-blue) 30%, transparent); }
.mg-form .mg-check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; font-weight: 400; color: var(--mg-graphite); }
.mg-form .mg-check input { margin-top: 0.3rem; accent-color: var(--mg-ink); }
.mg-form .mg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mg-notice { padding: 0.95rem 1.1rem; border-left: 3px solid var(--mg-blue); background: var(--mg-white); margin-bottom: 1rem; }
.mg-notice--error { border-color: var(--mg-teal); }
.mg-newsletter .mg-form { grid-template-columns: 1fr auto; align-items: end; max-width: 560px; }
.mg-newsletter .mg-form > .mg-check, .mg-newsletter .mg-form > .mg-notice, .mg-newsletter .mg-form > .mg-full { grid-column: 1 / -1; }
@media (max-width: 560px) { .mg-newsletter .mg-form { grid-template-columns: 1fr; } }
.mg-section--ink .mg-form label, .mg-section--ink .mg-form .mg-check { color: #C9CCD8; }
.mg-section--ink .mg-form input[type="email"], .mg-section--ink .mg-form input[type="text"] { background: #222B4A; border-color: #3A4466; color: var(--mg-white); }
.mg-section--ink .mg-form button[type="submit"] { background: var(--mg-white); color: var(--mg-ink); border-color: var(--mg-white); }
.mg-section--ink .mg-notice { background: #222B4A; color: var(--mg-white); }

/* Canal directo */
.mg-direct { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.mg-direct dd { margin: 0; }
.mg-direct small { display: block; font-size: 0.95rem; font-weight: 400; color: var(--mg-graphite); margin-top: 0.2rem; }
.mg-direct dt, .mg-direct strong { display: block; font-size: var(--mg-step--1); color: var(--mg-graphite); font-weight: 500; margin-bottom: 0.15rem; }
.mg-direct a, .mg-direct span { font-size: var(--mg-step-1); font-weight: 600; font-stretch: 106%; color: var(--mg-ink); text-decoration: none; }
.mg-direct a:hover { text-decoration: underline; text-decoration-color: var(--mg-teal); }

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */
.mg-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem var(--mg-gutter); list-style: none; margin: 0; padding: 0; }
.mg-posts--list { grid-template-columns: 1fr; gap: 0; border-top: 1.5px solid var(--mg-ink); }
.mg-posts--list .mg-post { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem 2.5rem; padding: 2.2rem 0; border-bottom: 1px solid var(--mg-rule); }
.mg-post a { color: inherit; text-decoration: none; }
.mg-post__date { font-size: var(--mg-step--1); color: var(--mg-graphite); display: block; margin-bottom: 0.6rem; }
.mg-post__title { font-size: var(--mg-step-1); font-weight: 680; font-stretch: 106%; line-height: 1.22; margin: 0 0 0.6rem; }
.mg-posts--list .mg-post__title { font-size: var(--mg-step-2); }
.mg-post__title a:hover { text-decoration: underline; text-decoration-color: var(--mg-teal); text-decoration-thickness: 2px; }
.mg-post__excerpt { color: var(--mg-graphite); font-size: 0.98rem; margin: 0; max-width: 62ch; }
.mg-post__cat { display: inline-block; font-size: 0.82rem; font-weight: 600; color: var(--mg-ink); padding-top: 0.4rem; border-top: 3px solid var(--mg-blue); }
.mg-post__cat--m { border-color: var(--mg-teal); } .mg-post__cat--y { border-color: var(--mg-lime); }
@media (max-width: 900px) { .mg-posts { grid-template-columns: 1fr; } .mg-posts--list .mg-post { grid-template-columns: 1fr; } }

/* Artículo */
.mg-article { padding: clamp(3rem, 2rem + 4vw, 6rem) 0 var(--mg-section); }
.mg-article__head { max-width: 900px; margin-bottom: 3rem; }
.mg-article__head h1 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); max-width: 22ch; }
.mg-article__meta { color: var(--mg-graphite); font-size: 0.95rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.mg-article__dek { font-size: var(--mg-step-1); line-height: 1.5; max-width: 50ch; margin: 1.2rem 0 1.4rem; }
.mg-article__grid { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--mg-gutter); align-items: start; }
.mg-article__aside { position: sticky; top: 6rem; font-size: 0.95rem; }
.mg-toc { border-left: 1.5px solid var(--mg-ink); padding-left: 1rem; }
.mg-toc p { font-weight: 600; margin-bottom: 0.5rem; }
.mg-toc ol { margin: 0; padding-left: 1.1rem; }
.mg-toc li { margin-bottom: 0.4rem; }
.mg-toc a { color: var(--mg-graphite); text-decoration: none; }
.mg-toc a:hover { color: var(--mg-ink); }
@media (max-width: 980px) { .mg-article__grid { grid-template-columns: 1fr; } .mg-article__aside { position: static; order: -1; } }
.mg-prose { font-size: 1.125rem; line-height: 1.7; }
.mg-prose > * { max-width: 68ch; }
.mg-prose h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); margin-top: 2.6rem; }
.mg-prose h3 { font-size: 1.35rem; margin-top: 2rem; }
.mg-prose ul, .mg-prose ol { padding-left: 1.3rem; }
.mg-prose li { margin-bottom: 0.45rem; }
.mg-prose blockquote { margin: 2rem 0; padding: 0.2rem 0 0.2rem 1.4rem; border-left: 3px solid var(--mg-teal); font-size: 1.25rem; font-stretch: 104%; }
.mg-prose table { width: 100%; border-collapse: collapse; font-size: 0.98rem; margin: 1.6rem 0; display: block; overflow-x: auto; max-width: 100%; }
.mg-prose th, .mg-prose td { text-align: left; padding: 0.7rem 0.9rem 0.7rem 0; border-bottom: 1px solid var(--mg-rule); vertical-align: top; }
.mg-prose th { font-weight: 650; border-bottom: 1.5px solid var(--mg-ink); }
.mg-prose .mg-tldr { background: var(--mg-white); padding: 1.3rem 1.5rem; border-left: 3px solid var(--mg-blue); margin: 0 0 2rem; }
.mg-prose .mg-tldr p:last-child, .mg-prose .mg-tldr ul:last-child { margin-bottom: 0; }
.mg-prose .mg-sources { font-size: 0.95rem; color: var(--mg-graphite); border-top: 1px solid var(--mg-rule); padding-top: 1.2rem; margin-top: 3rem; }
.mg-article__end { margin-top: 4rem; padding-top: 2.5rem; border-top: 1.5px solid var(--mg-ink); display: grid; grid-template-columns: 1fr 1fr; gap: var(--mg-gutter); }
@media (max-width: 800px) { .mg-article__end { grid-template-columns: 1fr; } }

/* Página genérica / legal */
.mg-page { padding: clamp(3rem, 2rem + 4vw, 6rem) 0 var(--mg-section); }
.mg-page h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); max-width: 20ch; margin-bottom: 2rem; }

/* Archivo de proyecto: ficha */
.mg-case__head { padding: clamp(3rem, 2rem + 4vw, 6rem) 0 2.5rem; }
.mg-case__head h1 { font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem); max-width: 18ch; }
.mg-case__spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem var(--mg-gutter); border-top: 1.5px solid var(--mg-ink); padding-top: 1.2rem; margin: 2rem 0 0; }
.mg-case__spec dt { font-size: var(--mg-step--1); color: var(--mg-graphite); }
.mg-case__spec dd { margin: 0.15rem 0 0; font-weight: 600; }
@media (max-width: 760px) { .mg-case__spec { grid-template-columns: 1fr 1fr; } }
.mg-case__cover { margin: 0 0 4rem; }
.mg-case__body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--mg-gutter); padding-bottom: var(--mg-section); }
.mg-case__body h2 { font-size: var(--mg-step-2); }
@media (max-width: 860px) { .mg-case__body { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */
.mg-footer { background: var(--mg-ink); color: #C9CCD8; padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0 2rem; font-size: 0.98rem; }
.mg-footer a { color: var(--mg-white); text-decoration: none; }
.mg-footer a:hover { text-decoration: underline; text-decoration-color: var(--mg-lime); }
.mg-footer__top { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2.4fr)); gap: 2.5rem var(--mg-gutter); padding-bottom: 3rem; border-bottom: 1px solid #2F3858; }
.mg-footer__claim { font-size: var(--mg-step-2); font-weight: 650; font-stretch: 110%; line-height: 1.15; color: var(--mg-white); max-width: 18ch; margin: 1.1rem 0 1.4rem; }
.mg-footer h2 { font-size: 0.92rem; font-weight: 600; font-stretch: 100%; color: #8C91A8; margin: 0 0 0.9rem; letter-spacing: 0; }
.mg-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.mg-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; font-size: 0.88rem; color: #8C91A8; }
.mg-footer__bottom ul { display: flex; gap: 1.4rem; }
.mg-footer .mg-wordmark { color: var(--mg-white); font-size: 1.6rem; }
.mg-footer .mg-wordmark__b { color: var(--mg-white); }
.mg-footer__reg { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-right: 0.5rem; }
@media (max-width: 900px) { .mg-footer__top { grid-template-columns: 1fr 1fr; } .mg-footer__top > :first-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .mg-footer__top { grid-template-columns: 1fr; } }

/* WhatsApp flotante: discreto, sin animación */
.mg-wa { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60; display: inline-flex; align-items: center; gap: 0.5rem; background: var(--mg-white); color: var(--mg-ink); border: 1px solid var(--mg-rule); border-radius: 99px; padding: 0.6rem 1rem 0.6rem 0.75rem; font-size: 0.92rem; font-weight: 600; text-decoration: none; box-shadow: 0 6px 24px rgba(24,32,58,.12); }
.mg-wa:hover { color: var(--mg-ink); border-color: var(--mg-ink); }
.mg-wa svg { width: 22px; height: 22px; color: #1DA851; }
@media (max-width: 560px) { .mg-wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .mg-wa { padding: 0.7rem; } }

/* Ajustes Elementor */
.elementor-widget-text-editor { color: inherit; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-widget:not(:last-child) { margin-block-end: 0; }
.page-header .entry-title, .site-header + .page-header { display: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media print {
	.mg-header, .mg-footer, .mg-wa, .mg-article__aside { display: none !important; }
	body { background: #fff; }
}

/* Contenedores internos de Elementor: sin relleno extra (la retícula la marca la sección) */
.e-con.e-child { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; }
@media (max-width: 700px) { .e-con.mg-headrow { --flex-wrap: wrap; } }
@media (max-width: 960px) { .mg-hero__art .mg-emblem { max-width: 320px; } }

/* Galería del proyecto: piezas a ancho completo, como en una presentación impresa */
.mg-gallery { display: grid; gap: clamp(1rem, 0.5rem + 2vw, 2.5rem); padding-bottom: var(--mg-section); }
.mg-gallery__item { margin: 0; background: var(--mg-white); }
.mg-gallery__item img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) { .mg-gallery { grid-template-columns: 1fr 1fr; } .mg-gallery__item:nth-child(3n+1) { grid-column: 1 / -1; } }
