/**
 * MGAMES Widgets — estilos base.
 *
 * REGLA DE ESPECIFICIDAD: todo lo que el panel "Estilo" de Elementor controla
 * (tipografía, color, padding) se declara acá con UNA sola clase, porque
 * Elementor genera `.elementor-element-XXX .mg-algo` (2 clases) y así siempre
 * gana. La estructura/layout puede usar selectores más específicos sin riesgo.
 */

/* ============================================================
   Base común
   ============================================================ */
/* En telefono, al llegar al tope el rebote del scroll despega la pagina y deja
   ver el fondo del documento por encima de la primera seccion. Como el hero es
   negro y el fondo del sitio es #111820, ese hueco se veia como una banda
   azulada. Sin rebote no hay hueco que mostrar, y el color explicito evita que
   asome el blanco del navegador donde overscroll-behavior no exista. */
/* ============================================================
   LA LÍNEA DEL SITIO
   El repo pone el mismo contenedor en TODAS las secciones:
   max-w-[1440px] mx-auto px-5 md:px-8. Acá arrancaba cada widget con lo
   suyo — unos a 1440, otros a sangre, con el aire lateral repartido entre
   el envoltorio y el contenedor interno — y los bordes no coincidían: el
   rótulo del hero empezaba en 265 y el de la galería en 233, el pie en 52.
   Esta regla les da a todos el mismo contenedor. El ancho lo puede pisar el
   control de cada widget; el aire lateral, no.
   ============================================================ */
.mg-hero .mg-hero-inner,
.mg-gallery .mg-g-inner,
.mg-stats .mg-s-inner,
.mg-proc .mg-proc-inner,
.mg-acc .mg-acc-inner,
.mg-title .mg-t-inner,
.mg-st .mg-st-inner,
.mg-form .mg-form-inner,
.mg-vh .mg-vh-inner,
.mg-ab .mg-in, .mg-story .mg-in, .mg-values .mg-in,
.mg-team .mg-in, .mg-cta .mg-in, .mg-mani .mg-in,
.mg-ct, .mg-soc {
	max-width: 1440px;
	margin-left: auto; margin-right: auto;
	padding-left: 1.25rem; padding-right: 1.25rem;
	box-sizing: border-box;
}
@media (min-width: 768px) {
	.mg-hero .mg-hero-inner,
	.mg-gallery .mg-g-inner,
	.mg-stats .mg-s-inner,
	.mg-proc .mg-proc-inner,
	.mg-acc .mg-acc-inner,
	.mg-title .mg-t-inner,
	.mg-st .mg-st-inner,
	.mg-form .mg-form-inner,
	.mg-vh .mg-vh-inner,
	.mg-ab .mg-in, .mg-story .mg-in, .mg-values .mg-in,
	.mg-team .mg-in, .mg-cta .mg-in, .mg-mani .mg-in,
	.mg-ct, .mg-soc {
		padding-left: 2rem; padding-right: 2rem;
	}
	/* Dentro de un bloque que ya trae la linea, el contenedor de la seccion no
	   la repite. */
	.e-db1cd7a .mg-t-inner, .e-3a55cdf .mg-t-inner, .e-d983b76 .mg-t-inner,
	.e-db1cd7a .mg-acc-inner, .e-3a55cdf .mg-form-inner,
	.e-3a55cdf .mg-ct, .e-3a55cdf .mg-soc,
	.e-d983b76 .mg-t-inner,
	.e-5229d6b .mg-st-inner, .e-5229d6b .mg-t-inner,
	.e-5229d6b .mg-ct, .e-5229d6b .mg-soc {
		padding-left: 0; padding-right: 0;
	}
}

/* Bloques armados con contenedores de Elementor (el de FAQ, el de reseñas y
   formulario, y el pie) en vez de con un widget nuestro: el ancho de estos vive
   en las clases que genera Elementor V4, no en sus ajustes, asi que la linea se
   la damos aca. El padding calculado equivale a acotarlos a 1440 centrado, y en
   pantallas mas angostas se anula solo. */
/* Tres clases a proposito: Elementor trae `.elementor .e-flexbox-base{padding:10px}`,
   que empata en especificidad con dos y carga despues de nuestra hoja, asi que
   ganaba el empate. Con este nivel de mas queda del lado nuestro. */
/* Los contenedores de primer nivel no aportan aire lateral: cada seccion pone
   su propia linea y su fondo tiene que llegar hasta el borde de la pantalla.
   Elementor les mete 10px por defecto, que arriba de 1440 se los come el
   centrado y por debajo aparecen como un corrimiento de 10px por seccion.
   Va antes que las reglas de los bloques, que empatan en especificidad y por
   orden tienen que ganar ellas. */
.elementor > .elementor-element.e-con {
	padding-left: 0; padding-right: 0;
}

.elementor .e-con.e-db1cd7a,
.elementor .e-con.e-3a55cdf {
	/* El aire de la linea completo: 32px mas lo que sobre de los 1440. Antes el
	   piso era 10px y el resto lo ponia cada widget, asi que segun cuantos
	   niveles tuviera cada bloque el borde caia en un lugar distinto. */
	padding-left: max(2rem, calc((100% - 1440px) / 2 + 2rem));
	padding-right: max(2rem, calc((100% - 1440px) / 2 + 2rem));
}
/* Este ya venia acotado a 1280 y centrado: se lo lleva a ancho completo para
   que su propio aire caiga sobre la linea y no sobre una caja mas angosta. */
.elementor .e-con.e-d983b76 {
	width: 100%; max-width: none;
	padding-left: max(2rem, calc((100% - 1440px) / 2 + 2rem));
	padding-right: max(2rem, calc((100% - 1440px) / 2 + 2rem));
}

/* Adentro de esos bloques ningun nivel intermedio agrega aire lateral: ni los
   10px que Elementor le pone por defecto a cada contenedor ni los 24 de los
   envoltorios de widget. La linea ya la puso el bloque una sola vez; si cada
   nivel suma lo suyo, el borde termina en un lugar distinto en cada seccion. */
/* Con `.elementor` adelante para ganarle a las reglas propias de Elementor, que
   usan dos clases y cargan despues de nuestra hoja. */
.elementor .e-db1cd7a .e-con, .elementor .e-3a55cdf .e-con, .elementor .e-d983b76 .e-con,
.elementor .e-5229d6b .e-con,
.elementor .e-db1cd7a .elementor-widget,
.elementor .e-3a55cdf .elementor-widget,
.elementor .e-d983b76 .elementor-widget,
.elementor .e-5229d6b .elementor-widget {
	padding-left: 0; padding-right: 0;
}
/* La excepcion: el canal entre la columna de reseñas y la del formulario, que
   si es intencional. Solo en pantalla ancha: en telefono las dos columnas se
   apilan y ese canal se veia como un margen izquierdo de 4rem que dejaba el
   formulario angosto y corrido. */
@media (min-width: 768px) {
	.elementor .e-3a55cdf .e-con.e-a4a2b4e { padding-left: 4rem; }
}

/* El pie ademas suma el aire lateral: sus columnas no tienen padding propio,
   asi que sin esto el texto se apoyaba en el borde de la caja y no en la
   linea, 32px mas adentro. */
.elementor .e-con.e-5229d6b {
	padding-left: max(2rem, calc((100% - 1440px) / 2 + 2rem));
	padding-right: max(2rem, calc((100% - 1440px) / 2 + 2rem));
}

/* ============================================================
   LA MISMA LÍNEA, EN TELÉFONO
   Elementor guarda un relleno lateral propio para teléfono en cada contenedor
   (2rem), y arriba de eso cada widget nuestro sumaba el suyo (1.25rem). El
   resultado: las secciones a sangre arrancaban a 18px, el pie y el bloque del
   formulario a 29, y donde había las dos cosas —el rótulo "CONTACTO", el
   contacto, las redes— a 47. Encima la columna del formulario conservaba en
   teléfono el canal de 4rem que sólo tiene sentido al lado de las reseñas, y
   por eso el formulario se veía angosto y corrido.
   El JS marca cada contenedor de primer nivel con quién pone el aire; acá lo
   aplicamos. Sea cual sea el camino, todo termina en el mismo 1.25rem.
   `body` adelante para ganarle a las reglas por-elemento de Elementor, que
   usan tres clases y cargan después de esta hoja.
   ============================================================ */
@media (max-width: 767px) {
	/* Adentro no aporta aire lateral ningún nivel intermedio. */
	body .elementor .mg-linea-fuera .e-con,
	body .elementor .mg-linea-fuera .elementor-widget,
	body .elementor .mg-linea-dentro .e-con,
	body .elementor .mg-linea-dentro .elementor-widget {
		padding-left: 0; padding-right: 0;
	}

	/* Contenedor de sólo widgets nuestros: el aire lo pone cada sección, así su
	   fondo llega hasta el borde de la pantalla. */
	body .elementor > .elementor-element.e-con.mg-linea-fuera {
		padding-left: 0; padding-right: 0;
	}

	/* Contenedor armado con piezas de Elementor: el aire lo pone él, porque las
	   listas de enlaces y los títulos nativos no tienen envoltorio propio. */
	body .elementor > .elementor-element.e-con.mg-linea-dentro {
		padding-left: 1.25rem; padding-right: 1.25rem;
	}
	/* ...y entonces los inners nuestros que caigan adentro no lo repiten. */
	body .mg-linea-dentro .mg-st .mg-st-inner,
	body .mg-linea-dentro .mg-title .mg-t-inner,
	body .mg-linea-dentro .mg-form .mg-form-inner,
	body .mg-linea-dentro .mg-acc .mg-acc-inner,
	body .mg-linea-dentro .mg-ct,
	body .mg-linea-dentro .mg-soc {
		padding-left: 0; padding-right: 0;
	}

	/* Las reseñas van debajo del formulario. Viven en la columna de al lado, así
	   que esa columna deja de formar caja y sus piezas se ordenan en la misma
	   fila que el formulario. */
	/* Cuatro clases: `.elementor .e-flexbox-base{display:flex}` empata con dos y
	   carga despues de esta hoja. */
	body .elementor .e-con.mg-fila-form { flex-direction: column; }
	body .elementor .e-con.mg-fila-form > .e-con.mg-col-texto { display: contents; }
	/* El orden lo decide el widget del formulario, en su seccion "Orden en
	   telefono". Va por variables y no por reglas fijas porque en pantalla
	   ancha estas piezas viven en dos columnas y ahi el orden no significa lo
	   mismo: las variables solo se leen dentro de este @media. */
	body .elementor .mg-fila-form .elementor-widget-mgames_title {
		order: var(--mg-ord-titulo, 1);
	}
	body .elementor .mg-fila-form > .mg-col-form {
		order: var(--mg-ord-form, 2);
	}
	body .elementor .mg-fila-form .elementor-widget-mgames_reviews {
		order: var(--mg-ord-resenas, 3); margin-top: 2.5rem;
	}
	body .elementor .mg-fila-form .elementor-widget-mgames_contact {
		order: var(--mg-ord-contacto, 4); margin-top: 2.5rem;
	}
}

/* ============================================================
   APARICION AL ENTRAR EN PANTALLA
   Las piezas entran desde abajo, una detras de otra, como en el sitio de
   referencia. El estado inicial vive detras de `.mg-revelar`, clase que pone
   el JS: sin JS no se esconde nada, que es la unica manera de garantizar que
   esto no pueda dejar contenido invisible.
   La transicion se declara en el estado final y no en el inicial, asi la
   pieza no anima al aparecer en el DOM sino al recibir la clase.
   ============================================================ */
.mg-revelar .mg-aparece {
	opacity: 0;
	transform: translateY(30px);
	will-change: opacity, transform;
}
.mg-revelar .mg-aparece.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
	transition-delay: var(--mg-retraso, 0s);
	will-change: auto;
}
/* El numerote del paso ademas crece un poco, como en el repo. */
.mg-revelar .mg-aparece .mg-proc-bignum {
	opacity: 0; transform: scale(.7) translateY(10px);
}
.mg-revelar .mg-aparece.is-in .mg-proc-bignum {
	opacity: 1; transform: none;
	transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
	transition-delay: var(--mg-retraso, 0s);
}

/* Con "menos movimiento" no hay nada que animar. */
@media (prefers-reduced-motion: reduce) {
	.mg-revelar .mg-aparece,
	.mg-revelar .mg-aparece .mg-proc-bignum {
		opacity: 1; transform: none; transition: none;
	}
}

/* ============================================================
   FORMULARIO COMPACTO EN TELEFONO
   Entero medía 862px contra 777 útiles: había que scrollear para llegar al
   botón, con el formulario ya a la vista. Se recorta donde no cuesta nada:
   nombre y teléfono en la misma fila, menos aire entre filas y un mensaje más
   bajo. Los campos siguen por encima de los 44px de alto, que es el mínimo
   cómodo para el dedo.
   Lo que tiene control propio en el widget (el padding del campo y el de la
   tarjeta) NO se toca acá: esas reglas las emite Elementor con !important y
   siempre ganan, asi que van por el valor de teléfono del control.
   ============================================================ */
@media (max-width: 767px) {
	/* Nombre y teléfono comparten renglón: son cortos y solos desperdician
	   media pantalla. */
	.mg-form .forminator-row:has(> .forminator-col:nth-child(2):last-child) {
		display: flex; gap: .75rem;
	}
	.mg-form .forminator-row:has(> .forminator-col:nth-child(2):last-child) > .forminator-col {
		flex: 1 1 0; width: auto; min-width: 0;
	}

	.mg-form .forminator-row { margin-bottom: .875rem !important; }
	.mg-form .forminator-label { margin-bottom: .3125rem !important; }
	/* Forminator le pone un min-height propio al mensaje con su propia
	   especificidad, asi que hay que nombrarlo con su clase. */
	.mg-form textarea,
	.mg-form textarea.forminator-textarea,
	.mg-form .forminator-field textarea {
		min-height: 0 !important; height: 5.5rem !important;
	}
}

html {
	background-color: #111820;
	overscroll-behavior-y: none;
}
/* Elementor mete `@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}`
   en su CSS de frontend. Eso no afecta solo a los saltos con ancla: Chrome se
   lo aplica tambien al scroll de la rueda, asi que cada golpecito se anima en
   vez de moverse al instante y la pagina se siente trabada. Lo devolvemos a
   'auto'. Los desplazamientos que SI queremos suaves (volver arriba al cambiar
   de categoria, los enlaces internos) los pide el JS con
   scrollTo({behavior:'smooth'}), que manda sobre esta propiedad y sigue igual.
   html:root en vez de html: gana por especificidad sin depender del orden de
   carga de las hojas. */
@media (prefers-reduced-motion: no-preference) {
	html:root { scroll-behavior: auto; }
}
.mg-nav, .mg-hero, .mg-mq, .mg-stats, .mg-gallery, .mg-title, .mg-rev {
	font-family: 'Barlow Condensed', sans-serif;
	box-sizing: border-box;
}
.mg-nav *, .mg-hero *, .mg-mq *, .mg-stats *,
.mg-gallery *, .mg-title *, .mg-rev * {
	box-sizing: border-box;
}
.mg-nav a, .mg-hero a, .mg-gallery a { text-decoration: none; }

/* El azul de Astra en button:hover tambien alcanzaba a los demas botones
   nuestros que van sin fondo. Ninguno lo quiere. */
.mg-rev .mg-rev-nav button:hover,
.mg-rev .mg-rev-dots button:hover,
.mg-cs .mg-cs-close:hover,
.mg-acc .mg-acc-trigger:hover,
.mg-cs .mg-cs-tab:not(.is-active):hover,
.mg-hdr .mg-hdr-toggle:hover,
.mg-nav .mg-mega-trigger:hover {
	background-color: transparent;
}

/* Astra tambien pinta el BORDE (y el color de texto) de todo <button> al
   pasar el mouse o enfocarlo, con --ast-border-color: un gris que no tiene
   nada que ver con la categoria. En la flecha de reseñas (borde 1px +
   currentColor) eso se veia como una línea/color de mas apenas se acercaba
   el mouse. Se fija el borde y el color al acento en todos los estados. */
.mg-rev .mg-rev-nav button:hover,
.mg-rev .mg-rev-nav button:focus,
.mg-rev .mg-rev-nav button:active {
	border-color: var(--mg-accent);
	color: var(--mg-accent);
}
.mg-rev .mg-rev-dots button.is-active:hover { background-color: var(--mg-accent); }

/* Pestañas compartidas (Hero / Título / Galería) */
.mg-hero-tab, .mg-t-tab, .mg-g-tab {
	text-transform: uppercase;
	background: transparent;
	cursor: pointer;
	border-style: solid;
	border-width: 1px;
	transition: transform .15s ease;
	flex-shrink: 0;
}
/* Astra pinta TODO button:hover con su azul (--ast-global-color-1: #045cb4).
   La regla base de la pestaña ya ponía background transparent, pero con menos
   especificidad que la del tema, asi que al pasar el mouse se volvia azul.
   El hover de la pestaña es SOLO el zoom. */
.mg-hero-tab:hover, .mg-t-tab:hover, .mg-g-tab:hover,
.mg-hero-tab:focus, .mg-t-tab:focus, .mg-g-tab:focus {
	transform: scale(1.08);
	/* El fondo del hover es el color de la categoria. */
	background-color: var(--mg-accent);
	color: #111820;
	/* Astra pone border-top/right/bottom/left-width:0 en su regla base de
	   button, con la misma especificidad que la nuestra: se resolvia por orden
	   de hoja y en hover se perdian los bordes. Declarados aca no depende de eso. */
	border-style: solid;
	border-width: 1px;
	/* Anillo interior ademas del borde: con transform:scale un borde de 1px
	   puede caer entre pixeles del dispositivo y desvanecerse — pasaba con el
	   de arriba. El box-shadow inset se pinta siempre. */
	box-shadow: inset 0 0 0 1px var(--mg-tab-hover-line, rgba(255, 255, 255, .55));
	border-color: var(--mg-tab-hover-line, rgba(255, 255, 255, .55));
}
/* La activa conserva el acento tambien con el mouse encima. Va con mas peso
   que la regla de borde en :hover que emite el control, si no la pestaña
   activa tomaba el borde blanco al pasar el mouse. */
.mg-hero .mg-hero-tab.is-active:hover,
.mg-title .mg-t-tab.is-active:hover,
.mg-gallery .mg-g-tab.is-active:hover,
.mg-hero .mg-hero-tab.is-active:focus,
.mg-title .mg-t-tab.is-active:focus,
.mg-gallery .mg-g-tab.is-active:focus {
	background-color: #111820;
	color: #ffffff;
	border-color: var(--mg-accent);
	box-shadow: inset 0 0 0 1px var(--mg-accent);
}
.mg-hero-tabs, .mg-t-tabs, .mg-g-tabs { display: flex; flex-wrap: wrap; }
.mg-hero-tab, .mg-t-tab, .mg-g-tab { white-space: nowrap; }
/* Minuta 28/08: la activa va al reves de como estaba. Antes era fondo con el
   acento y letras oscuras; ahora fondo oscuro y letras blancas, y el acento
   pasa al borde para que se siga distinguiendo de las inactivas. */
.mg-hero .mg-hero-tab.is-active,
.mg-title .mg-t-tab.is-active,
.mg-gallery .mg-g-tab.is-active {
	background: #111820;
	border-color: var(--mg-accent);
	color: #ffffff;
}

/* ============================================================
   WIDGET: Menú
   ============================================================ */
.mg-nav ul.mg-nav-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; height: 100%;
}
.mg-nav li { position: relative; height: 100%; }
.mg-nav .mg-nav-list > li > a,
.mg-nav .mg-nav-list > li > button {
	display: flex; align-items: center; gap: 6px; height: 100%;
	background: none; border: none; cursor: pointer;
	position: relative; text-transform: uppercase;
}
.mg-nav .mg-nav-list > li > a::after,
.mg-nav .mg-nav-list > li > button::after {
	content: ""; position: absolute; left: 16px; right: 16px; bottom: 0;
	transform: scaleX(0); transform-origin: left;
	transition: transform .3s ease;
}
.mg-nav .mg-nav-list > li:hover > a::after,
.mg-nav .mg-nav-list > li:hover > button::after { transform: scaleX(1); }
.mg-nav .mg-chevron { width: 14px; height: 14px; transition: transform .25s ease; }
.mg-nav .mg-nav-list > li:hover .mg-chevron,
.mg-nav .mg-nav-list > li.mg-open .mg-chevron { transform: rotate(180deg); }

.mg-nav-toggle {
	display: none; width: 44px; height: 44px;
	align-items: center; justify-content: center;
	border: 1px solid; background: none; cursor: pointer;
}
.mg-nav-toggle svg { width: 20px; height: 20px; }
.mg-nav-toggle .mg-icon-close { display: none; }
.mg-nav.mg-open .mg-nav-toggle .mg-icon-open { display: none; }
.mg-nav.mg-open .mg-nav-toggle .mg-icon-close { display: block; }

/* El color del panel viaja en --mg-panel-bg. IMPORTANTE: no se lo aplicamos a
   .mg-nav-list, porque en escritorio esa lista es la barra horizontal del menú
   y quedaría pintada de fondo. Solo el panel y, más abajo, el menú mobile. */
.mg-nav .mg-mega {
	position: fixed; left: 0; top: 0; width: 100vw;
	background: var(--mg-panel-bg, #0D1B2A);
	overflow: hidden; max-height: 0; opacity: 0; visibility: hidden;
	transition: max-height .35s cubic-bezier(.22,1,.36,1), opacity .3s ease;
	z-index: 9999;
	/* Cierra el panel con una linea del color de la categoria que se esta
	   previsualizando, como el sitio. En 0 la linea no ocupa lugar. */
	border-bottom: var(--mg-mega-line, 1px) solid var(--mg-accent);
}
.mg-nav .mg-nav-list > li.mg-open .mg-mega {
	max-height: var(--mg-mega-h, 480px); opacity: 1; visibility: visible;
}
.mg-nav .mg-mega-inner {
	/* Mas aire abajo que arriba: el panel cierra mejor y la linea inferior no
	   queda pegada al contenido. */
	max-width: 1440px; margin: 0 auto; padding: 32px 32px 48px;
	display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px;
}
.mg-nav .mg-mega-col1 { grid-column: span 4; }
.mg-nav .mg-mega-col2 { grid-column: span 5; }
.mg-nav .mg-mega-col3 {
	/* Una fila por foto: con una sola ocupa todo el alto de la columna. */
	grid-column: span 3;
	display: grid; grid-auto-rows: 1fr; gap: 12px;
}
.mg-mega-eyebrow { text-transform: uppercase; margin: 0 0 16px; }
.mg-nav .mg-cat-list { list-style: none; margin: 0; padding: 0; }
.mg-nav .mg-cat-item { border-bottom: 1px solid rgba(255,255,255,.06); }
.mg-nav .mg-cat-item:last-child { border-bottom: none; }
.mg-cat-link {
	display: flex; align-items: center; gap: 12px; padding: 10px 0;
	text-transform: uppercase; color: #fff; line-height: 1;
	transition: color .2s ease;
}
/* Cada tipo de evento lleva SU color, no el de la categoria activa: la lista
   se lee como una paleta (empresas amarillo, neon violeta, etc). */
.mg-cat-tick {
	display: inline-block; height: 2px; flex-shrink: 0;
	background: var(--mg-item-accent, var(--mg-accent));
	transition: width .25s ease, background-color .2s ease;
}
.mg-nav .mg-cat-link:hover,
.mg-nav .mg-cat-item.mg-preview .mg-cat-link { color: var(--mg-item-accent, var(--mg-accent)); }
.mg-nav .mg-cat-link:hover .mg-cat-tick,
.mg-nav .mg-cat-item.mg-preview .mg-cat-tick {
	width: 24px; background: var(--mg-item-accent, var(--mg-accent));
}
.mg-preview-tag { text-transform: uppercase; margin: 0 0 12px; color: var(--mg-accent); }
.mg-preview-title { color: #fff; text-transform: uppercase; margin: 0; }
.mg-preview-link {
	display: inline-block; margin-top: 24px; padding-bottom: 4px;
	color: var(--mg-accent); border-bottom: 2px solid var(--mg-accent);
	text-transform: uppercase;
}
.mg-nav .mg-photo {
	position: relative; overflow: hidden;
	background: #1a2635; min-height: 150px;
}
.mg-nav .mg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-nav .mg-photo::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, transparent 50%, var(--mg-accent) 100%);
}

@media (max-width: 1200px) {
	.mg-nav .mg-mega-col1 { grid-column: span 5; }
	.mg-nav .mg-mega-col2 { grid-column: span 7; }
	.mg-nav .mg-mega-col3 { display: none; }
}
@media (max-width: 1024px) {
	.mg-nav-toggle { display: flex; }
	/* Recién acá la lista se vuelve panel desplegable y sí lleva fondo. */
	.mg-nav ul.mg-nav-list {
		display: none; flex-direction: column; align-items: stretch; height: auto;
		position: absolute; left: 0; right: 0; top: 100%; padding: 8px 0;
		background: var(--mg-panel-bg, #0D1B2A);
	}
	.mg-nav.mg-open > ul.mg-nav-list { display: flex; }
	.mg-nav .mg-nav-list > li { height: auto; }
	.mg-nav .mg-nav-list > li > a,
	.mg-nav .mg-nav-list > li > button {
		width: 100%; padding: 16px 24px; justify-content: space-between;
		border-bottom: 1px solid rgba(255,255,255,.08);
	}
	.mg-nav .mg-nav-list > li > a::after,
	.mg-nav .mg-nav-list > li > button::after { display: none; }
	.mg-nav .mg-mega {
		position: static; width: auto; max-height: 0;
		visibility: visible; transition: max-height .3s ease;
	}
	.mg-nav .mg-nav-list > li.mg-open .mg-mega { max-height: 600px; opacity: 1; }
	.mg-nav .mg-mega-inner { display: block; padding: 0 24px 16px; }
	.mg-nav .mg-mega-col2, .mg-nav .mg-mega-col3 { display: none; }
}

/* ============================================================
   WIDGET: Hero
   ============================================================ */
.mg-hero { position: relative; overflow: hidden; overflow: clip; }
/* Si el widget lleva un alto minimo (el hero de la home usa 92vh), la seccion
   tiene que ESTIRARSE hasta ahi. Sin esto la seccion medía lo que pedía su
   contenido y la diferencia quedaba como aire muerto debajo, entre el hero y
   el marquee: la marca de agua cortaba contra el borde de la seccion, que ya
   no coincidia con el borde visible. Y como el minimo va en vh, el hueco
   crecia con el alto de la pantalla — de ahi que se notara en monitores
   grandes. Con la cadena en flex el borde de la seccion vuelve a ser el
   limite real y la palabra corta contra la seccion siguiente. */
.elementor-widget-mgames_hero { display: flex; flex-direction: column; }
.elementor-widget-mgames_hero > .elementor-widget-container {
	flex: 1 1 auto; display: flex; flex-direction: column;
}
.elementor-widget-mgames_hero > .elementor-widget-container > .mg-hero {
	flex: 1 1 auto;
}
.mg-hero-watermark {
	/* width:max-content es lo que permite medirla: con left:0;right:0 la caja
	   medía el ancho del contenedor y scrollWidth nunca delataba el desborde,
	   asi que el ajuste automatico creia que ya entraba. */
	/* El sitio la empuja por DEBAJO del borde (bottom -40 / left -20) y deja
	   que la seccion la recorte: asi las letras cortan justo contra el
	   limite con la seccion siguiente. En bottom 0 quedaba el hueco del
	   descendente de la linea y terminaban antes. */
	position: absolute; bottom: var(--mg-wm-bottom, -40px); left: var(--mg-wm-left, -20px); right: auto;
	width: max-content; max-width: none;
	color: #fff; white-space: nowrap; text-align: left;
	margin: 0; pointer-events: none;
}
/* Línea horizontal que cruza la sección completa, por DETRÁS del contenido
   (el contenido va en .mg-hero-inner con z-index 2). */
.mg-hero-stripe {
	position: absolute; left: 0; right: 0; width: 100%;
	height: 4px; top: 62%; z-index: 1; pointer-events: none;
	background: var(--mg-accent);
}
.mg-hero .mg-hero-inner {
	position: relative; z-index: 2;
	max-width: 1440px; margin: 0 auto;
	/* El aire de abajo es el pb-16 del sitio (64px). La marca de agua va
	   anclada al borde inferior de la seccion con bottom negativo, asi que
	   crecer de alto no la despega: sigue cortando contra el limite. */
	padding: 24px 20px 64px;
}
/* overflow visible en escritorio, como el sitio (md:overflow-visible). Con
   overflow-x:auto el eje vertical pasa a 'auto' y recorta: las pestañas miden
   lo mismo que el contenedor, asi que el zoom del hover les comia los bordes
   de arriba y abajo. En telefono si scrollean, y ahi el aire lo da el padding. */
.mg-hero .mg-hero-tabs { gap: 8px; margin-bottom: 40px; overflow: visible; }
.mg-hero .mg-hero-grid {
	display: grid; grid-template-columns: repeat(12, 1fr);
	gap: 24px; align-items: center;
}
.mg-hero .mg-hero-left,
.mg-hero .mg-hero-right { grid-column: span 12; }
.mg-hero .mg-hero-eyebrow {
	display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
/* El repo eliminó el guión que iba antes del rótulo: queda solo el texto. */
.mg-hero .mg-hero-eyebrow span { display: none; }
.mg-hero-tag { color: var(--mg-accent); text-transform: uppercase; }
.mg-hero .mg-hero-title { margin: 0 0 32px; }
/* El titular es decorativo, no texto para copiar. Con el cursor de texto
   encima (el I-beam, que es la barrita vertical) parecia un campo
   editable: un cliente lo reporto como "me aparece una linea para editar".
   Con la flecha comun se lee como lo que es. Se copia igual si alguien lo
   selecciona a proposito: no se toca user-select. */
.mg-hero .mg-hero-title,
.mg-hero .mg-hero-title .mg-hero-line { cursor: default; }
.mg-hero-line { text-transform: uppercase; transition: opacity .3s ease; }
.mg-hero .mg-hero-line2 { color: var(--mg-accent); }
/* pre-line: el copy del sitio corta la descripción con saltos de línea propios. */
.mg-hero-sub { max-width: 560px; margin: 0 0 40px; transition: opacity .3s ease; white-space: pre-line; }
.mg-hero-cta {
	display: inline-flex; align-items: center; gap: 8px;
	text-transform: uppercase; text-decoration: none;
	background: var(--mg-accent); transition: opacity .2s ease;
}
.mg-hero-cta:hover { opacity: .9; }

.mg-hero .mg-hero-collage {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(6, 1fr);
	height: clamp(380px, 65vw, 580px);
}
.mg-hero .mg-hero-tile { position: relative; overflow: hidden; background: #1a2635; }
.mg-hero .mg-hero-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-hero .mg-hero-t1 { grid-column: 1 / span 4; grid-row: 1 / span 4; border: 1px solid var(--mg-accent); }
.mg-hero .mg-hero-t1::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .19;
	background: linear-gradient(180deg, transparent 50%, var(--mg-accent) 100%);
}
.mg-hero .mg-hero-t2 { grid-column: 5 / span 2; grid-row: 1 / span 3; }
.mg-hero .mg-hero-t3 { grid-column: 5 / span 2; grid-row: 4 / span 3; border: 1px solid var(--mg-accent); }
/* La leyenda va ENCIMA de la foto, no al lado. Con display:flex la imagen y
   el texto eran hermanos y se repartían el ancho: la foto se encogía y
   quedaba un hueco vacío al costado. Ahora la foto cubre todo el mosaico y
   la leyenda se superpone en la esquina inferior. */
.mg-hero .mg-hero-t4 { grid-column: 1 / span 4; grid-row: 5 / span 2; }
.mg-hero .mg-hero-t4::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .8;
	background: linear-gradient(0deg, var(--mg-accent) 0%, transparent 60%);
	z-index: 1;
}
.mg-hero-caption-text {
	position: absolute; right: 0; bottom: 0; z-index: 2;
	color: #0D1B2A; text-transform: uppercase; padding: 16px;
	text-align: right;
}

@media (min-width: 768px) {
	/* pt-10 arriba y pb-24 abajo, como el sitio. */
	.mg-hero .mg-hero-inner { padding: 40px 32px 96px; }
	.mg-hero .mg-hero-tabs { margin-bottom: 64px; }
	.mg-hero .mg-hero-grid { gap: 32px; }
}
@media (min-width: 1025px) {
	.mg-hero .mg-hero-left { grid-column: span 7; }
	.mg-hero .mg-hero-right { grid-column: span 5; }
}

/* ============================================================
   WIDGET: Marquee
   ============================================================ */
.mg-mq {
	overflow: hidden; overflow: clip;
	/* El sitio usa 1px del color de la categoria. En la cinta de logos ese
	   mismo color va al 25% (el sufijo 40 del hex en el React). */
	border-top: var(--mg-mq-bt, 1px) solid var(--mg-accent);
	border-bottom: var(--mg-mq-bb, 1px) solid var(--mg-accent);
	font-family: 'Oswald', sans-serif;
}
/* La cinta de logos lleva la linea del color de la categoria igual que la de
   palabras. Antes iba al 25% (copiado del sufijo 40 del hex del React) y sobre
   el fondo blanco casi no se veia. */
.mg-mq .mg-mq-track {
	/* flex + width:max-content en vez de inline-flex: como caja en linea se
	   apoyaba en la linea base y dejaba el hueco de los descendentes debajo,
	   descentrando la cinta. Asi el alto lo da solo el contenido. */
	display: flex; width: max-content; align-items: center;
	white-space: nowrap; will-change: transform;
	animation-name: mg-mq-scroll;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.mg-mq[data-direction="reverse"] .mg-mq-track { animation-direction: reverse; }
@keyframes mg-mq-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.mg-mq-item {
	color: var(--mg-mq-item, #ffffff);
	font-weight: 700; text-transform: uppercase;
	/* la mitad del gap de cada lado reproduce el gap-16 del sitio */
	padding: 0 calc(var(--mg-mq-gap, 4rem) / 2);
}
/* Logos: alto fijo y ancho automático, para que convivan con las palabras. */
.mg-mq .mg-mq-logo { display: inline-flex; align-items: center; }
.mg-mq .mg-mq-logo img {
	/* Caja con tope de alto Y de ancho: cada logo entra por su lado mas largo,
	   asi los apaisados no se estiran ni los cuadrados se agrandan de mas. */
	/* --mg-logo-scale compensa por logo: los que vienen en lienzo cuadrado con
	   margen transparente necesitan mas alto para verse del mismo tamaño que
	   los apaisados, que llenan su lienzo de borde a borde. */
	height: calc(var(--mg-mq-logo-h, 3rem) * var(--mg-logo-scale, 1)); width: auto;
	max-width: calc(var(--mg-mq-logo-maxw, 8rem) * var(--mg-logo-scale, 1));
	max-height: calc(var(--mg-mq-logo-h, 3rem) * var(--mg-logo-scale, 1));
	object-fit: contain; display: block;
	opacity: var(--mg-mq-logo-op, .9);
}
/* Logo cargado en version blanca: invertirlo lo devuelve a su negro original.
   Va con mas peso que el control de escala de grises, que apunta al mismo
   filtro sobre el mismo elemento. */
.mg-mq .mg-mq-logo.mg-mq-logo-invertido img { filter: invert(1); }
.mg-mq-sep {
	/* rombo de 10px al 60%, igual que el <span> rotado del sitio */
	display: inline-block; flex-shrink: 0;
	width: 10px; height: 10px;
	background: var(--mg-accent); transform: rotate(45deg);
	opacity: var(--mg-mq-sep-op, .6);
}

/* ============================================================
   WIDGET: Stats
   ============================================================ */
.mg-stats .mg-s-inner { max-width: 1440px; margin: 0 auto; }
.mg-stats .mg-s-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.mg-s-item { border-left: 1px solid; padding: 0 24px; }
.mg-stats .mg-s-item:first-child { border-left: none; padding-left: 0; }
.mg-s-index { display: block; color: var(--mg-accent); text-transform: uppercase; margin-bottom: 12px; }
.mg-s-num {
	display: block; margin-bottom: 8px;
	/* tabular-nums evita que el ancho "salte" mientras corre el conteo */
	font-variant-numeric: tabular-nums;
}
.mg-s-label { text-transform: uppercase; }
@media (min-width: 768px) {
	.mg-stats .mg-s-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   WIDGET: Galería "Postales"
   ============================================================ */
.mg-gallery .mg-g-inner { max-width: 1440px; margin: 0 auto; }
.mg-gallery .mg-g-tabs { gap: 8px; margin-bottom: 24px; }
.mg-gallery .mg-g-head {
	display: flex; align-items: flex-end; justify-content: space-between;
	flex-wrap: wrap; gap: 24px; margin-bottom: 48px;
}
.mg-g-h2 { text-transform: uppercase; margin: 0; }
.mg-gallery .mg-g-accent-word { color: var(--mg-accent); }
.mg-g-reel {
	color: var(--mg-accent); border-bottom: 2px solid var(--mg-accent);
	padding-bottom: 4px; text-transform: uppercase; text-decoration: none;
}
.mg-gallery .mg-g-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(2, 1fr);
}
.mg-gallery .mg-g-cell { position: relative; overflow: hidden; background: #1a2635; }
.mg-gallery .mg-g-cell img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .7s ease;
}
.mg-gallery .mg-g-c1 { grid-column: span 12; grid-row: span 2; }
.mg-gallery .mg-g-c2 { grid-column: span 4; grid-row: span 1; display: none; }
.mg-gallery .mg-g-c3 {
	grid-column: span 3; grid-row: span 1; display: none;
	flex-direction: column; justify-content: flex-start;
	/* Horizontal: el control decide (por defecto a la izquierda). */
	align-items: var(--mg-g-c3-align, flex-start);
	text-align: var(--mg-g-c3-text, left);
	background: var(--mg-accent); color: #0D1B2A;
}
.mg-gallery .mg-g-c3[style*="--mg-g-c3-align: center"] { text-align: center; }
.mg-gallery .mg-g-c3[style*="--mg-g-c3-align: flex-end"] { text-align: right; }
/* El rotulo se queda arriba; la frase toma el resto del alto y se centra
   verticalmente dentro de el. */
.mg-gallery .mg-g-c3-eyebrow { flex: 0 0 auto; }
.mg-gallery .mg-g-c3-line {
	/* display:block, NO flex: como flex, cada trozo de texto y el <span> del
	   resaltado se volvian items en fila y la frase no podia cortar en varias
	   lineas. Los margenes automaticos la centran en el espacio que sobra. */
	display: block; width: 100%;
	margin-top: auto; margin-bottom: auto;
	/* pre (no pre-line): la frase corta SOLO donde se la escribe. Si algun
	   renglon no entra, el JS baja el cuerpo hasta que entre, en vez de partirlo
	   en un renglon de mas. */
	white-space: pre;
}
/* Al pie del panel, la leyenda que avisa que abre los casos de exito. Se la
   pone el JS solo en las categorias que tienen casos cargados. La frase de
   arriba se centra con margenes automaticos, asi que aca hace falta anular el
   de abajo para que la leyenda quede pegada al piso. */
.mg-gallery .mg-g-c3:has(.mg-g-c3-cta) .mg-g-c3-line { margin-bottom: 1rem; }
.mg-gallery .mg-g-c3-cta {
	flex: 0 0 auto; margin-top: auto; align-self: inherit;
	font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
	font-size: .9375rem; letter-spacing: .14em; text-transform: uppercase;
	color: inherit; white-space: nowrap;
	border-bottom: 2px solid currentColor; padding-bottom: .25rem;
	transition: opacity .2s ease;
}
.mg-gallery .mg-g-c3.mg-cs-hot:hover .mg-g-c3-cta { opacity: .65; }

/* Boton de casos de exito para telefono.
   En pantalla ancha el disparador es el panel de color; en telefono ese panel
   no se muestra, asi que los casos quedaban sin puerta de entrada. Este boton
   toma prestado el aspecto del "Contanos tu evento": bloque a todo el ancho,
   fondo con el color de la categoria, texto oscuro en Oswald y la flecha. */
.mg-g-cta-movil { display: none; }

@media (max-width: 767px) {
	.mg-gallery .mg-g-cta-movil {
		display: flex; align-items: center; justify-content: center; gap: .5rem;
		width: 100%; margin-top: 1.5rem; padding: 1.0625rem 1.25rem;
		border: 0; border-radius: 0; cursor: pointer;
		background: var(--mg-accent); color: #0D1B2A;
		font-family: 'Oswald', sans-serif; font-weight: 700;
		font-size: .9375rem; letter-spacing: .14em; text-transform: uppercase;
		line-height: 1;
		transition: opacity .2s ease;
	}
	.mg-gallery .mg-g-cta-movil[hidden] { display: none; }
	.mg-gallery .mg-g-cta-movil:active { opacity: .85; }
	/* Cuando esta el boton, los puntitos del carril se le arriman. */
	.mg-gallery .mg-g-inner:has(> .mg-g-cta-movil:not([hidden])) .mg-g-dots {
		margin-top: 1rem;
	}
}

.mg-gallery .mg-g-c4 { grid-column: span 3; grid-row: span 1; display: none; }
.mg-gallery .mg-g-c5 { grid-column: span 4; grid-row: span 1; display: none; }
.mg-g-c3-eyebrow, .mg-g-c3-line { text-transform: uppercase; }
/* Sobre el color de la categoria, el resaltado va en blanco. */
.mg-gallery .mg-g-c3-hl { color: #fff; }
@media (min-width: 768px) {
	.mg-gallery .mg-g-c1 { grid-column: span 5; grid-row: span 2; }
	.mg-gallery .mg-g-c2 { display: block; grid-column: span 4; }
	.mg-gallery .mg-g-c3 { display: flex; }
	.mg-gallery .mg-g-c4 { display: block; }
	.mg-gallery .mg-g-c5 { display: block; }
}

/* ============================================================
   WIDGET: Título
   ============================================================ */
.mg-title .mg-t-inner { margin: 0 auto; }
/* Bloque ajustado al texto: se encoge al ancho de la linea mas larga (el
   titular) y se apoya del lado que diga la alineacion. Asi el rotulo arranca
   exactamente en la primera letra del titular, aunque el bloque vaya contra
   la derecha: los dos comparten el borde izquierdo del bloque. */
.mg-title[data-fit="1"] .mg-t-inner { width: max-content; max-width: 100%; }
.mg-title[data-fit="1"][data-align="right"] .mg-t-inner { margin-left: auto; margin-right: 0; }
.mg-title[data-fit="1"][data-align="left"] .mg-t-inner { margin-left: 0; margin-right: auto; }
/* La alineacion viaja por variable para que arrastre tambien las pestañas y la
   bajada, no solo el titular. */
.mg-title { text-align: var(--mg-t-align, left); }
.mg-title .mg-t-tabs { justify-content: var(--mg-t-align, left); }
.mg-title .mg-t-desc { margin-left: 0; margin-right: 0; }
.mg-title .mg-t-tabs { margin-bottom: 32px; }
/* Sin línea decorativa: la etiqueta va sola, en el color de la categoría. */
/* El rotulo es un contenedor flex, asi que NO obedece al text-align del padre:
   sin justify-content se queda pegado a la izquierda aunque el titular este
   centrado. Le pasamos la misma alineacion (left/center/right son validos
   como justify-content). */
.mg-title .mg-t-eyebrow {
	display: flex; align-items: center; margin-bottom: 16px;
	/* Si el rotulo tiene alineacion propia manda esa; si no, la del titular. */
	justify-content: var(--mg-t-eyebrow-align, var(--mg-t-align, left));
}
.mg-title .mg-t-label { color: var(--mg-accent); text-transform: uppercase; }
.mg-t-title { text-transform: uppercase; margin: 0 0 20px; }
.mg-t-desc { max-width: 640px; margin: 0; }
.mg-title .mg-t-title, .mg-title .mg-t-desc {
	transition: opacity .3s ease, transform .3s ease;
}
.mg-title .mg-t-fade { opacity: 0; transform: translateY(10px); }

/* Doble heading: una parte fija + una que cambia con la categoría.
   En modo "apilado" la parte dinámica pasa a su propia línea. */
.mg-t-title-fixed { color: #fff; }
.mg-t-title-dyn { color: var(--mg-accent); }
.mg-title[data-layout="stacked"] .mg-t-title-dyn { display: block; }

/* ============================================================
   WIDGET: Header (logo + menú de WordPress + botón)
   ============================================================ */
.mg-hdr {
	--mg-hdr-h: 112px;
	--mg-hdr-h-scrolled: 68px;
	--mg-logo-h: 84px;
	--mg-logo-h-scrolled: 44px;
	font-family: 'Barlow Condensed', sans-serif;
	box-sizing: border-box;
	width: 100%;
	/* Fondo de base: al ser fijo se superpone al contenido y sin esto se ve
	   todo por detras. El control del panel lo puede cambiar. */
	background-color: #111820;
	border-bottom: 1px solid rgba(229, 26, 46, .4);
}
.mg-hdr * { box-sizing: border-box; }
.mg-hdr a { text-decoration: none; }
/* Sticky se activa desde el panel. */
/* position:sticky no sirve dentro de Elementor: el header queda envuelto en
   contenedores que miden exactamente su alto, asi que no tiene recorrido y se
   va con el scroll. Lo fijamos y compensamos el hueco con un espaciador que
   el JS mantiene a la altura real del header. */
.mg-hdr[data-sticky="1"] {
	position: fixed; top: 0; left: 0; right: 0; z-index: 999;
}
/* Con sesion iniciada, WordPress corre TODO el documento hacia abajo con
   html{margin-top:32px} para dejar lugar a su barra. Un elemento fijo no se
   entera de ese corrimiento: el header quedaba pisando la barra y el
   espaciador (que si esta en el flujo) empezaba 32px mas abajo, dejando una
   franja del fondo entre el header y la primera seccion. Solo lo ve quien
   esta logueado. */
body.admin-bar .mg-hdr[data-sticky="1"] { top: 32px; }
/* WordPress agranda su barra a 46px por debajo de 782px. */
@media screen and (max-width: 782px) {
	body.admin-bar .mg-hdr[data-sticky="1"] { top: 46px; }
}
/* Por debajo de 600px la barra deja de ser fija y se va con el scroll, asi que
   el header vuelve al borde. */
@media screen and (max-width: 600px) {
	body.admin-bar .mg-hdr[data-sticky="1"] { top: 0; }
}
.mg-hdr-spacer { display: block; width: 100%; }

.mg-hdr .mg-hdr-bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; margin: 0 auto;
	height: var(--mg-hdr-h);
	transition: height .35s cubic-bezier(.22,1,.36,1);
}
.mg-hdr.is-scrolled .mg-hdr-bar { height: var(--mg-hdr-h-scrolled); }

.mg-hdr .mg-hdr-logo { display: flex; align-items: center; flex-shrink: 0; }
.mg-hdr .mg-hdr-logo img {
	display: block; width: auto;
	height: var(--mg-logo-h);
	transition: height .35s cubic-bezier(.22,1,.36,1);
}
.mg-hdr.is-scrolled .mg-hdr-logo img { height: var(--mg-logo-h-scrolled); }

/* --- Menú: reutiliza las clases del mega menú (.mg-nav) --- */
.mg-hdr .mg-hdr-nav { display: flex; align-items: center; height: 100%; }

/* Submenú desplegable de los ítems simples que vienen de WordPress. */
.mg-hdr .mg-nav-list .sub-menu {
	list-style: none; margin: 0;
	position: absolute; top: 100%; left: 0; min-width: 220px;
	background: #0D1B2A; padding: 8px 0; z-index: 50;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.mg-hdr .mg-nav-list > li:hover > .sub-menu,
.mg-hdr .mg-nav-list > li:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.mg-hdr .mg-nav-list .sub-menu a {
	display: block; padding: 12px 20px;
	color: #fff; text-transform: uppercase;
	transition: color .2s ease;
}
.mg-hdr .mg-nav-list .sub-menu a:hover { color: var(--mg-accent); }

/* --- Botón --- */
.mg-hdr-cta {
	display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
	text-transform: uppercase; color: #0D1B2A;
	background: #E51A2E;
	transition: opacity .2s ease, background-color .2s ease;
}
.mg-hdr-cta:hover { opacity: .9; }
/* Con el switch encendido sigue a la categoría; apagado manda el color fijo
   del panel. El !important es por el CSS que Elementor cachea por página: si
   esa página se guardó cuando el color fijo no tenía condición, el archivo
   viejo sigue pintando el botón hasta que se regenere. */
.mg-hdr[data-cta-accent="1"] .mg-hdr-cta {
	background: var(--mg-accent) !important;
	background-color: var(--mg-accent) !important;
}

.mg-hdr .mg-nav-cta-item { display: none; }

/* --- Toggle mobile --- */
.mg-hdr .mg-hdr-toggle {
	display: none; width: var(--mg-toggle-size, 2.75rem); height: var(--mg-toggle-size, 2.75rem); flex-shrink: 0;
	align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,.3); background: none;
	color: #fff; cursor: pointer;
}
/* Hamburguesa: una sola caja y las otras dos lineas con box-shadow. Sin
   elementos hijos ni pseudo-elementos, asi ninguna regla de terceros sobre
   <i> vacios o ::before puede hacerla desaparecer. */
.mg-hdr .mg-hdr-toggle .mg-burger {
	/* !important a proposito: ya descarte una por una las causas razonables de
	   que no se viera, asi que blindamos lo minimo indispensable. */
	display: block !important; width: 20px !important; height: 2px !important;
	border-radius: 1px; flex: 0 0 auto;
	background-color: var(--mg-burger, #fff) !important;
	box-shadow: 0 -6px 0 var(--mg-burger, #fff), 0 6px 0 var(--mg-burger, #fff) !important;
	transition: background-color .2s ease, box-shadow .2s ease, transform .25s ease;
}
/* Abierto: se apagan las dos lineas de box-shadow y la del medio gira 45º;
   el ::after aporta la otra diagonal. El !important acompaña al de la regla
   base, que si no le gana y las tres barras quedarian visibles. */
.mg-hdr .mg-hdr-toggle .mg-burger { position: relative; }
.mg-hdr.mg-open .mg-hdr-toggle .mg-burger {
	box-shadow: none !important; transform: rotate(45deg);
}
.mg-hdr.mg-open .mg-hdr-toggle .mg-burger::after {
	content: ""; position: absolute; left: 0; top: 0;
	width: 100%; height: 100%; border-radius: 1px;
	background-color: var(--mg-burger, #fff); transform: rotate(90deg);
}
.mg-hdr .mg-hdr-toggle { position: relative; }
@media (prefers-reduced-motion: reduce) {
	.mg-hdr .mg-hdr-toggle .mg-burger { transition: none; }
}

@media (max-width: 1024px) {
	.mg-hdr .mg-hdr-toggle { display: flex; }
	/* El desplegable mobile lo maneja .mg-nav (mismas reglas que el widget Menú);
	   acá solo posicionamos el contenedor respecto del header. */
	.mg-hdr .mg-hdr-nav { position: static; }
	.mg-hdr .mg-nav { position: static; }
	/* En mobile el submenú de WordPress se muestra desplegado, sin hover. */
	.mg-hdr .mg-nav-list .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		padding: 0 0 8px 16px; min-width: 0;
	}
	/* En mobile el boton vive dentro del menu, no en la barra. */
	.mg-hdr[data-hide-cta-mobile="1"] > .mg-hdr-bar > .mg-hdr-cta { display: none; }
	.mg-hdr .mg-nav-cta-item { display: block; padding: 1rem 0 .5rem; }
	.mg-hdr .mg-hdr-cta-inline { display: inline-flex; align-items: center; justify-content: center; width: 100%; }
}

/* ============================================================
   WIDGET: Hero con video
   ============================================================ */
.mg-vh {
	position: relative; overflow: hidden; overflow: clip;
	display: flex; align-items: center;
	font-family: 'Barlow Condensed', sans-serif;
	box-sizing: border-box;
	min-height: 92vh;
}
.mg-vh * { box-sizing: border-box; }
.mg-vh .mg-vh-media { position: absolute; inset: 0; overflow: hidden; }
.mg-vh .mg-vh-media video,
.mg-vh .mg-vh-media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
/* El iframe se agranda para tapar el alto completo sin barras negras.

   El 1920px no es capricho: YouTube elige la calidad segun el TAMAÑO del
   reproductor, y este video salta a 1080p recien pasados los ~1800px de
   ancho. Medido en el sitio: a 1600x900 servia 720p y a 1920x1080, 1080p.
   Como abajo de eso no hay 900p ni 480p, caia hasta 720p y se veia blando.

   aspect-ratio mantiene el 16/9 pase lo que pase con los maximos, que es
   lo que evita las barras negras que aparecerian si el alto y el ancho se
   resolvieran por separado. */
.mg-vh .mg-vh-media iframe {
	position: absolute; top: 50%; left: 50%;
	/* max-width:none es imprescindible: el tema pone iframe{max-width:100%}
	   y sin esto el ancho se recortaba al del contenedor, que es justo lo
	   que dejaba al reproductor por debajo del umbral de los 1080p. */
	width: max(100vw, 177.77vh, 1920px);
	max-width: none;
	height: auto;
	max-height: none;
	aspect-ratio: 16 / 9;
	transform: translate(-50%, -50%);
	border: 0; pointer-events: none;
}
/* Va dentro de .mg-vh-media, despues del iframe, asi lo tapa sin z-index. */
/* Fuera de sus categorias el video no existe, igual que en el sitio: alli el
   componente directamente no se renderiza si la categoria no tiene video. */
.mg-vh.mg-vh-off { display: none !important; }
.mg-vh .mg-vh-overlay {
	position: absolute; inset: 0; pointer-events: none;
	/* Igual que el sitio: funde el video con la pagina arriba y abajo y deja el
	   centro limpio. Antes era un plano al 50% que apagaba el video entero. */
	background-image: linear-gradient(180deg,
		rgba(17, 24, 32, .35) 0%,
		transparent 22%,
		transparent 62%,
		rgba(17, 24, 32, .95) 100%);
}

.mg-vh .mg-vh-inner {
	position: relative; z-index: 2;
	width: 100%; margin: 0 auto;
	padding: 24px 20px;
}
.mg-vh[data-align="center"] .mg-vh-inner { text-align: center; }
.mg-vh[data-align="center"] .mg-vh-eyebrow { justify-content: center; }
.mg-vh .mg-vh-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.mg-vh .mg-vh-eyebrow span { height: 2px; background: var(--mg-accent); }
.mg-vh-tag { color: var(--mg-accent); text-transform: uppercase; }
.mg-vh-title { margin: 0 0 20px; color: #fff; text-transform: uppercase; }
.mg-vh-sub { margin: 0 0 32px; max-width: 640px; }
.mg-vh[data-align="center"] .mg-vh-sub { margin-left: auto; margin-right: auto; }
.mg-vh-cta {
	display: inline-flex; align-items: center; gap: 8px;
	text-transform: uppercase; text-decoration: none;
	background: var(--mg-accent); color: #0D1B2A;
	transition: opacity .2s ease;
}
.mg-vh-cta:hover { opacity: .9; }

/* Indicador de scroll */
.mg-vh .mg-vh-scroll {
	position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
	z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
	color: var(--mg-accent); text-decoration: none;
}
.mg-vh .mg-vh-scroll svg { width: 20px; height: 20px; animation: mg-vh-bounce 1.8s ease-in-out infinite; }
/* Leyenda "Descubrí más". El tamaño y la fuente los define el control de
   tipografía del widget; acá solo queda el color base. */
.mg-vh .mg-vh-scroll-text { color: #fff; }
@keyframes mg-vh-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(6px); }
}
@media (min-width: 768px) {
	.mg-vh .mg-vh-inner { padding: 40px 32px; }
}
@media (prefers-reduced-motion: reduce) {
	.mg-vh .mg-vh-scroll svg { animation: none; }
	.mg-hdr .mg-hdr-bar, .mg-hdr .mg-hdr-logo img { transition: none; }
}

/* ============================================================
   WIDGET: Título simple
   ============================================================ */
.mg-st { font-family: 'Barlow Condensed', sans-serif; box-sizing: border-box; }
.mg-st * { box-sizing: border-box; }
.mg-st .mg-st-inner { margin: 0 auto; }
.mg-st .mg-st-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.mg-st .mg-st-eyebrow span { height: 2px; background: var(--mg-accent); }
.mg-st .mg-st-hl { color: var(--mg-accent); }
/* Palabra gigante detras del titulo, como el "FAQ" del repo: pegada al borde
   inferior izquierdo y recortada por la seccion. */
.mg-st { position: relative; overflow: hidden; overflow: clip; }
.mg-st .mg-st-watermark {
	/* Desplazamientos FIJOS, como el repo (bottom -40 / left -20). En em se
	   escalan con el cuerpo gigante y la palabra se hunde fuera de la seccion. */
	position: absolute; bottom: var(--mg-st-wm-y, -40px); left: var(--mg-st-wm-x, -20px); z-index: 0;
	pointer-events: none; user-select: none; white-space: nowrap;
	color: rgba(255, 255, 255, .05);
	font-family: 'Oswald', sans-serif; font-weight: 700;
	font-size: var(--mg-st-wm, 30rem); line-height: .78; letter-spacing: -.02em;
	text-transform: uppercase;
}
.mg-st .mg-st-inner { position: relative; z-index: 1; }
.mg-st .mg-st-intro {
	margin: 1.5rem 0 0; max-width: 36rem;
	/* El corrimiento va por transform y no por margen: no ocupa lugar, asi que
	   no estira la seccion ni arrastra la palabra de fondo, que esta anclada a
	   su borde de abajo. */
	transform: translate(var(--mg-st-intro-x, 0), var(--mg-st-intro-y, 0));
}
.mg-st[data-align="center"] .mg-st-intro { margin-left: auto; margin-right: auto; }
/* Titulo de seccion con el color de la categoria. */
.mg-acc[data-accent-title="1"] .mg-acc-title { color: var(--mg-accent); }
.mg-st-label { color: var(--mg-accent); text-transform: uppercase; }
/* pre-line: el titulo se corta donde lo corta quien lo escribe, como los
   <span className="block"> del repo. */
.mg-st-title { margin: 0; text-transform: uppercase; white-space: pre-line; }
.mg-st .mg-st-title { transition: opacity .3s ease, transform .3s ease; }
.mg-st .mg-st-fade { opacity: 0; transform: translateY(10px); }
/* Alineación elegida en el panel */
.mg-st[data-align="center"] .mg-st-inner { text-align: center; }
.mg-st[data-align="center"] .mg-st-eyebrow { justify-content: center; }
.mg-st[data-align="right"] .mg-st-inner { text-align: right; }
.mg-st[data-align="right"] .mg-st-eyebrow { justify-content: flex-end; }

/* ============================================================
   WIDGET: Proceso
   ============================================================ */
.mg-proc { font-family: 'Barlow Condensed', sans-serif; box-sizing: border-box; }
.mg-proc * { box-sizing: border-box; }
.mg-proc .mg-proc-inner { margin: 0 auto; }
.mg-proc .mg-proc-head { margin-bottom: 3rem; max-width: 40rem; }
.mg-proc .mg-proc-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.mg-proc .mg-proc-eyebrow span { height: 2px; background: var(--mg-accent); }
.mg-proc-label { color: var(--mg-accent); text-transform: uppercase; }
.mg-proc-title { margin: 0 0 1rem; text-transform: uppercase; }
.mg-proc-intro { margin: 0; }

/* Rejilla de bordes finos con el acento al 25%, como el sitio: la línea de
   arriba la pone el contenedor y cada tarjeta aporta su derecha y su abajo. */
.mg-proc .mg-proc-grid {
	display: grid; grid-template-columns: 1fr;
	border-top: 1px solid color-mix(in srgb, var(--mg-accent) 25%, transparent);
}
.mg-proc .mg-proc-step {
	position: relative; overflow: hidden;
	min-height: 16.25rem; /* 260px */
	border-right: 1px solid color-mix(in srgb, var(--mg-accent) 25%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--mg-accent) 25%, transparent);
	transition: background-color .3s ease;
}
/* Hover: un velo blanquísimo, igual que en el sitio. */
.mg-proc .mg-proc-step:hover { background-color: rgba(255,255,255,.02); }

/* Numeral gigante de fondo, decorativo. */
.mg-proc .mg-proc-bignum {
	position: absolute; top: -.5rem; right: .75rem;
	line-height: 1; pointer-events: none; user-select: none;
	color: var(--mg-accent); opacity: .19;
}
/* Arranca ARRIBA (justify-start, como el repo). Apoyado abajo, un cuerpo de
   dos lineas empujaba el guion y el titulo hacia arriba y las cuatro tarjetas
   quedaban desalineadas entre si. */
.mg-proc .mg-proc-content {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; justify-content: flex-start;
	height: 100%;
	/* El numeral es absoluto y decorativo: le reservamos su franja arriba para
	   que el texto arranque por debajo. Asi las cuatro tarjetas alinean Y ademas
	   nada se pisa, que es lo que pasaba al apoyar el contenido abajo. */
	padding-top: var(--mg-proc-offset, 6.25rem);
}
/* Línea corta sobre el título. */
.mg-proc-num {
	display: block; width: 1.75rem; height: 2px;
	background: var(--mg-accent); margin-bottom: 1.125rem;
	font-size: 0; /* el número va en el numeral gigante, este es solo la línea */
}
.mg-proc-step-title { margin: 0 0 1rem; text-transform: uppercase; }
.mg-proc-body { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.mg-proc .mg-proc-step { transition: none; }
}

@media (min-width: 600px) {
	.mg-proc .mg-proc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	.mg-proc[data-cols="4"] .mg-proc-grid { grid-template-columns: repeat(4, 1fr); }
	.mg-proc[data-cols="3"] .mg-proc-grid { grid-template-columns: repeat(3, 1fr); }
	.mg-proc[data-cols="2"] .mg-proc-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   SECCIÓN NOSOTROS — base común
   ============================================================ */
.mg-ab, .mg-story, .mg-values, .mg-team, .mg-cta {
	font-family: 'Barlow Condensed', sans-serif; box-sizing: border-box;
}
.mg-ab *, .mg-story *, .mg-values *, .mg-team *, .mg-cta * { box-sizing: border-box; }
.mg-ab .mg-in, .mg-story .mg-in, .mg-values .mg-in,
.mg-team .mg-in, .mg-cta .mg-in { max-width: 1440px; margin: 0 auto; }

/* Etiqueta con línea, repetida en las cinco secciones. */
.mg-ab-eyebrow { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.mg-ab-eyebrow span { height: 2px; background: var(--mg-accent); }
.mg-ab-label { color: var(--mg-accent); text-transform: uppercase; }
/* Palabra resaltada dentro de los títulos. */
.mg-hl { color: var(--mg-accent); }

/* ---------- Nosotros: portada ---------- */
.mg-ab { position: relative; overflow: hidden; overflow: clip; }
.mg-ab-watermark {
	/* En em y no en px: el corte tiene que ser el mismo trozo de letra sea cual
	   sea el cuerpo. 0.12em es lo que usa el hero de la home (-40px sobre 340). */
	position: absolute; bottom: var(--mg-wm-bottom, -0.12em); left: 0; right: 0;
	color: #fff; white-space: nowrap; text-align: left;
	margin: 0; pointer-events: none; user-select: none; opacity: .05;
	/* igual que el Hero: medible para que el ajuste automatico funcione */
	right: auto; width: max-content; max-width: none;
}
.mg-ab .mg-in { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; }
.mg-ab .mg-ab-text, .mg-ab .mg-ab-media { grid-column: span 12; }
.mg-ab-title { margin: 0; text-transform: uppercase; }
/* Un renglon por span: asi el JS puede medirlos y bajar el cuerpo si alguno no
   entra, en vez de dejar que el navegador lo parta y agregue una linea. */
.mg-ab-title .mg-ab-line { display: block; }
.mg-ab-sub { margin: 1.5rem 0 0; max-width: 36rem; }
.mg-ab .mg-ab-media { position: relative; height: 20rem; }
.mg-ab .mg-ab-frame {
	position: absolute; inset: 0; overflow: hidden;
	border: 1px solid var(--mg-accent);
}
.mg-ab .mg-ab-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-ab .mg-ab-frame::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, transparent 40%, var(--mg-accent));
	opacity: .19;
}
@media (min-width: 1024px) {
	/* La foto pasa de 5 a 6 columnas de 12 y el texto de 7 a 6: el cliente la
	   pidio mas grande y el titulo entra igual en esas seis. */
	.mg-ab .mg-ab-text { grid-column: span 6; }
	.mg-ab .mg-ab-media { grid-column: span 6; height: 34rem; }
}

/* ---------- Nosotros: historia ---------- */
.mg-story .mg-in { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; }
.mg-story .mg-story-aside, .mg-story .mg-story-body { grid-column: span 12; }
.mg-story-lead { margin: 0; }
/* El relato traia saltos de linea DENTRO de cada parrafo y una separacion
   entre parrafos parecida, asi que se leia como un muro parejo. Con mas aire
   entre parrafos se distingue donde termina uno y empieza el otro. */
.mg-story-p { margin: 2.25rem 0 0; }

/* ---------- Nosotros: la historia, con titular ----------
   Mismo armado que el resto de las secciones del sitio: rotulo y titular
   grande arriba, a todo el ancho de la linea, y debajo el texto completo.
   Antes iban en dos columnas, el titular a la izquierda y el relato a la
   derecha; eso dejaba el titular metido en media pagina y el relato colgado
   del costado, con un ritmo distinto al de "Como funciona" o "Lo que no
   negociamos". */
/* Rotulo chico, titulo grande de seccion, y debajo una LEYENDA entre comillas
   en cuerpo chico. Las comillas van por CSS para que el texto guardado quede
   limpio y se pueda editar sin acordarse de ponerlas. */
.mg-story[data-layout="titular"] .mg-story-headline { margin: .75rem 0 0; }
/* La palabra entre *asteriscos*, en el color de la categoria salvo que el
   control diga otro. */
.mg-story .mg-story-hl { color: var(--mg-accent); }
/* La bastardilla va aca y no en el control: el grupo de tipografia de Elementor
   emite `font-style: normal` con dos clases y le ganaba al default. Con el
   atributo del layout sumamos un nivel y queda del lado nuestro. */
.mg-story[data-layout="titular"] .mg-story-title {
	margin: .875rem 0 0; font-style: italic;
}
.mg-story[data-layout="titular"] .mg-story-title::before { content: '\201C'; }
.mg-story[data-layout="titular"] .mg-story-title::after { content: '\201D'; }
.mg-story[data-layout="titular"] .mg-story-lead { margin: 1.25rem 0 0; }
.mg-story[data-layout="titular"] .mg-story-body > .mg-story-p:first-child { margin-top: 0; }
@media (min-width: 768px) {
	.mg-story .mg-story-aside { grid-column: span 4; }
	.mg-story .mg-story-body { grid-column: span 8; }

	.mg-story[data-layout="titular"] .mg-story-aside { grid-column: 1 / span 12; }
	/* El relato va en una columna CENTRADA en la linea, y el ancho sale de
	   medir el texto: viene con los saltos de linea escritos a mano y esos
	   renglones tienen que entrar enteros. Medidos uno por uno piden 665, 789,
	   1348, 1390, 710 y 494px. Con 51rem (816px) entran cuatro de los seis
	   sin partirse; los dos largos de verdad envuelven, que es como se ven en
	   el diseño de referencia. A 40rem se partia hasta el primero. */
	.mg-story[data-layout="titular"] .mg-story-body {
		grid-column: 1 / span 12;
		margin: 2.5rem auto 0;
		max-width: 51rem;
	}
	/* La leyenda se corta antes que la linea: suelta, a lo ancho de 1376px,
	   un cuerpo de 24px daria mas de 120 caracteres por renglon. */
	.mg-story[data-layout="titular"] .mg-story-title { max-width: 62ch; }
}

/* El tope lo pone la caja, no cada parrafo: en rem y no en `ch`, porque `ch`
   se resuelve contra la tipografia del elemento donde se declara y la caja
   hereda 16px mientras los parrafos van a 21. 40rem = 640px ~ 68 caracteres. */
@media (min-width: 768px) {
	.mg-story[data-layout="titular"] .mg-story-body > * { max-width: none; }
}

/* ---------- Nosotros: principios ---------- */
.mg-values-title { margin: 0 0 3rem; text-transform: uppercase; }
.mg-values .mg-values-grid {
	display: grid; grid-template-columns: 1fr;
	border-top: 1px solid color-mix(in srgb, var(--mg-accent) 25%, transparent);
}
.mg-values .mg-value {
	position: relative; overflow: hidden; min-height: 13.75rem; /* 220px */
	border-right: 1px solid color-mix(in srgb, var(--mg-accent) 25%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--mg-accent) 25%, transparent);
	transition: background-color .3s ease;
}
.mg-values .mg-value:hover { background-color: rgba(255,255,255,.02); }
.mg-values .mg-value-num {
	position: absolute; top: -.25rem; right: .5rem;
	line-height: 1; pointer-events: none; user-select: none;
	color: var(--mg-accent); opacity: .15;
}
/* Minuta 28/08: el numero de 120px llegaba hasta debajo del titulo. Le
   reservamos su franja a la derecha para que no se pisen. */
.mg-values .mg-value-content { position: relative; z-index: 1; padding-right: 4.5rem; }
@media (max-width: 767px) {
	.mg-values .mg-value-content { padding-right: 3rem; }
}
.mg-value-tick { display: block; width: 1.75rem; height: 2px; background: var(--mg-accent); margin-bottom: 1rem; }
.mg-value-title { margin: 0 0 .75rem; text-transform: uppercase; }
.mg-value-body { margin: 0; }
@media (min-width: 768px) { .mg-values .mg-values-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Nosotros: equipo ---------- */
.mg-team-title { margin: 0 0 3rem; text-transform: uppercase; }
.mg-team .mg-team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.mg-team .mg-member-photo {
	position: relative; overflow: hidden; aspect-ratio: 3 / 4; margin-bottom: 1rem;
	background: #1a2635;
}
.mg-team .mg-member-photo img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	filter: grayscale(1); transition: filter .5s ease;
}
/* El color aparece al pasar el mouse y el velo se retira. */
.mg-team .mg-member:hover .mg-member-photo img { filter: grayscale(0); }
.mg-team .mg-member-photo::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, transparent 50%, var(--mg-accent));
	opacity: .25; transition: opacity .5s ease;
}
.mg-team .mg-member:hover .mg-member-photo::after { opacity: 0; }
.mg-member-name { display: block; color: #fff; text-transform: uppercase; }
.mg-member-role { display: block; color: var(--mg-accent); text-transform: uppercase; }
@media (min-width: 768px) {
	.mg-team .mg-team-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}

/* ---------- Nosotros: cierre con botón ---------- */
.mg-cta .mg-in { text-align: center; }
.mg-cta-title { margin: 0 auto 2rem; max-width: 56rem; text-transform: uppercase; }
.mg-cta-btn {
	display: inline-flex; align-items: center; gap: .75rem;
	text-transform: uppercase; text-decoration: none;
	background: var(--mg-accent); color: #0D1B2A;
	transition: transform .2s ease;
}
.mg-cta-btn:hover { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
	.mg-values .mg-value, .mg-team .mg-member-photo img,
	.mg-team .mg-member-photo::after, .mg-cta-btn { transition: none; }
	.mg-cta-btn:hover { transform: none; }
}

/* ============================================================
   WIDGET: Acordeón
   ============================================================ */
.mg-acc { font-family: 'Barlow Condensed', sans-serif; box-sizing: border-box; }
.mg-acc * { box-sizing: border-box; }
/* Sin max-width fijo: el ancho se define desde el panel (100% por defecto). */
.mg-acc .mg-acc-inner { margin: 0 auto; }
/* Dos columnas: encabezado a la izquierda, lista a la derecha. */
.mg-acc .mg-acc-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.mg-acc .mg-acc-head { align-self: start; }
.mg-acc .mg-acc-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.mg-acc .mg-acc-eyebrow span { height: 2px; background: var(--mg-accent); }
.mg-acc-label { color: var(--mg-accent); text-transform: uppercase; }
.mg-acc-title { margin: 0 0 16px; text-transform: uppercase; }

/* Los saltos de linea que se escriben en el panel salen marcados, para poder
   mostrarlos u ocultarlos por dispositivo desde el control de cada widget.
   Al ocultarlos el navegador deja el espacio del salto original, asi que las
   dos palabras no se pegan. */
.mg-salto { display: inline; }
.mg-acc-intro { margin: 0; }

.mg-acc .mg-acc-list {
	list-style: none; margin: 0; padding: 0;
	border-style: solid; border-width: 0; /* la caja se activa desde el panel */
}
.mg-acc .mg-acc-item {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-color: rgba(255,255,255,.12);
}
/* Con caja activada, la última no lleva línea (ya la da el borde del contenedor). */
.mg-acc .mg-acc-list[data-boxed="1"] .mg-acc-item:last-child { border-bottom-width: 0; }
.mg-acc .mg-acc-trigger {
	display: flex; align-items: center; justify-content: space-between; gap: 32px;
	width: 100%; background: none; border: none; cursor: pointer; text-align: left;
	color: #fff; text-transform: uppercase;
	transition: color .2s ease;
}
/* El texto ocupa el ancho disponible y el ícono nunca se comprime. */
.mg-acc .mg-acc-question { flex: 1 1 auto; min-width: 0; }
/* La pregunta abierta y la que tiene el mouse encima van con el color de la
   categoria. Con `.elementor` adelante a proposito: el control de color fijo
   sale como `.elementor-NNN .elementor-element-XXX .mg-acc-trigger`, empata
   en especificidad con estas y carga despues, asi que ganaba el empate y la
   pregunta se quedaba blanca. Un nivel mas y quedan del lado nuestro. */
.elementor .mg-acc .mg-acc-item.is-open .mg-acc-trigger,
.elementor .mg-acc .mg-acc-item.is-open .mg-acc-question { color: var(--mg-accent); }

/* Los tres switches del panel: texto, hover y bordes siguiendo la categoría.
   El selector con [data-*] pesa más que el del color picker de Elementor,
   así que cuando el switch está encendido gana la variable de acento. */
.elementor .mg-acc[data-accent-text="1"] .mg-acc-trigger,
.elementor .mg-acc[data-accent-text="1"] .mg-acc-question { color: var(--mg-accent); }
.elementor .mg-acc[data-accent-hover="1"] .mg-acc-trigger:hover,
.elementor .mg-acc[data-accent-hover="1"] .mg-acc-trigger:hover .mg-acc-question,
.elementor .mg-acc[data-accent-hover="1"] .mg-acc-trigger:focus-visible .mg-acc-question { color: var(--mg-accent); }
/* El sitio no usa el acento pleno en los separadores sino con alfa: 80 en hexa
   (50%) en la home y 50 (31%) en la pagina de FAQ. A pleno la linea se ve
   mucho mas gruesa de lo que es. */
.mg-acc[data-accent-border="1"] .mg-acc-item,
.mg-acc[data-accent-border="1"] .mg-acc-list { border-color: var(--mg-accent); }
@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.mg-acc[data-accent-border="1"] .mg-acc-item,
	.mg-acc[data-accent-border="1"] .mg-acc-list {
		border-color: color-mix(in srgb, var(--mg-accent) var(--mg-acc-line, 50%), transparent);
	}
}
/* El icono es una CAJA con borde y el "+" adentro, como el sitio (44px con
   "+" de 20 en la home, 36 con 16 en FAQ). Antes el "+" era el elemento
   entero, asi que agrandarlo daba un signo gigante sin recuadro. */
.mg-acc .mg-acc-icon {
	position: relative; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid var(--mg-accent);
	color: var(--mg-accent);
	transition: transform .3s ease;
}
/* Icono "+" hecho con dos barras: al abrir gira y se vuelve "−". */
.mg-acc .mg-acc-icon::before,
.mg-acc .mg-acc-icon::after {
	content: ""; position: absolute; background: currentColor;
	top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.mg-acc .mg-acc-icon::before { width: var(--mg-acc-glyph, 20px); height: 2px; }
.mg-acc .mg-acc-icon::after { width: 2px; height: var(--mg-acc-glyph, 20px); transition: opacity .3s ease; }
.mg-acc .mg-acc-item.is-open .mg-acc-icon { transform: rotate(180deg); }
.mg-acc .mg-acc-item.is-open .mg-acc-icon::after { opacity: 0; }

.mg-acc .mg-acc-panel {
	overflow: hidden; max-height: 0;
	transition: max-height .35s cubic-bezier(.22,1,.36,1);
}
.mg-acc-answer { margin: 0; }
/* Las 2 columnas solo cuando el encabezado existe: si está apagado, la lista es
   el único hijo y quedaría encerrada en la primera columna. */
@media (min-width: 900px) {
	.mg-acc[data-layout="split"][data-has-head="1"] .mg-acc-grid {
		grid-template-columns: 5fr 7fr;
		gap: 48px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.mg-acc .mg-acc-panel, .mg-acc .mg-acc-icon { transition: none; }
	.mg-st .mg-st-title { transition: none; }
}

/* ============================================================
   WIDGET: Formulario (envoltorio para shortcodes tipo Forminator)
   ============================================================

   NOTA SOBRE !important: Forminator (y otros plugins de formularios) cargan su
   propia hoja de estilos con selectores muy específicos y, según el "diseño"
   elegido, estilos en línea. Para imponer la estética MGAMES no alcanza con
   subir especificidad, así que acá se usa !important a propósito.
   Los controles del panel también lo emiten, y como llevan {{WRAPPER}} tienen
   más especificidad, siempre le ganan a esta base. */
.mg-form { font-family: 'Barlow Condensed', sans-serif; box-sizing: border-box; }
.mg-form * { box-sizing: border-box; }
.mg-form .mg-form-inner { margin: 0 auto; }

/* La tarjeta que envuelve al formulario, como en el sitio: fondo propio más
   oscuro que la sección y borde con el acento al 25%. */
.mg-form .mg-form-body {
	background: #0D1B2A;
	border-style: solid; border-width: 1px; border-color: #3A3A3A;
	padding: 2rem;
}
/* Con el switch activo, el borde toma el acento al 25%, como en el sitio. */
.mg-form[data-card-border-accent="1"] .mg-form-body {
	border-color: color-mix(in srgb, var(--mg-accent) 25%, transparent);
}
.mg-form .mg-form-head { margin-bottom: 2rem; }
.mg-form .mg-form-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.mg-form .mg-form-eyebrow span { height: 2px; background: var(--mg-accent); }
.mg-form-label-top { color: var(--mg-accent); text-transform: uppercase; }
.mg-form-title { margin: 0 0 .75rem; text-transform: uppercase; }
.mg-form-intro { margin: 0; }

/* --- Etiquetas de los campos --- */
/* En el sitio las etiquetas van con el color de la categoría, no en blanco. */
.mg-form .forminator-label,
.mg-form label {
	color: var(--mg-accent) !important;
	text-transform: uppercase;
	font-family: 'Barlow Condensed', sans-serif !important;
	font-weight: 700 !important;
	font-size: .75rem !important;      /* 12px, igual que el sitio */
	letter-spacing: .2em !important;
	margin-bottom: .625rem !important; /* 10px */
}

/* --- Campos --- */
.mg-form input[type="text"],
.mg-form input[type="email"],
.mg-form input[type="tel"],
.mg-form input[type="url"],
.mg-form input[type="number"],
.mg-form input[type="date"],
.mg-form textarea,
.mg-form select,
.mg-form .forminator-input,
.mg-form .forminator-textarea,
.mg-form .forminator-select,
.mg-form .forminator-select2 .selection .select2-selection {
	background-color: #0D1B2A !important;
	color: #ffffff !important;
	border: 1px solid #3A3A3A !important;
	border-radius: 0 !important;
	font-family: 'Barlow Condensed', sans-serif !important;
	font-weight: 500 !important;
	font-size: 1rem !important;   /* 16px, igual que el sitio */
	padding: 1rem !important;
	height: auto !important;
	box-shadow: none !important;
	transition: border-color .2s ease;
}
.mg-form textarea,
.mg-form .forminator-textarea { min-height: 8rem !important; }

/* --- Desplegables ---
   Las <option> heredan el tema del sistema operativo: sobre fondo oscuro salen
   con fondo blanco y texto negro si no se declaran a mano. */
.mg-form select option,
.mg-form .forminator-select option {
	background-color: #0D1B2A !important;
	color: #ffffff !important;
}
/* La flecha del select también, si el navegador la respeta. */
.mg-form select,
.mg-form .forminator-select { color-scheme: dark; }

/* Forminator monta la lista de select2 al FINAL DEL BODY, fuera del widget: por
   eso ningún selector scopeado a .mg-form la alcanza. El JS marca el body con
   .mg-has-form solo en páginas que usan este widget, y de ahí colgamos todo. */
body.mg-has-form .select2-dropdown,
body.mg-has-form .select2-container .select2-dropdown {
	background-color: #0D1B2A !important;
	border: 1px solid #3A3A3A !important;
	border-radius: 0 !important;
}
body.mg-has-form .select2-results,
body.mg-has-form .select2-results__options {
	background-color: #0D1B2A !important;
}
body.mg-has-form .select2-results__option {
	background-color: #0D1B2A !important;
	color: #ffffff !important;
	font-family: 'Barlow Condensed', sans-serif !important;
	font-size: 1rem !important;
}
body.mg-has-form .select2-results__option--highlighted,
body.mg-has-form .select2-results__option[aria-selected="true"],
body.mg-has-form .select2-results__option--selected {
	background-color: rgba(255,255,255,.08) !important;
	color: #ffffff !important;
}
/* Caja cerrada del select2 (la que reemplaza al <select> original). */
body.mg-has-form .select2-container .select2-selection {
	background-color: #0D1B2A !important;
	border: 1px solid #3A3A3A !important;
	border-radius: 0 !important;
	height: auto !important;
	padding: .5rem !important;
}
body.mg-has-form .select2-container .select2-selection__rendered {
	color: #ffffff !important;
	font-family: 'Barlow Condensed', sans-serif !important;
	font-size: 1rem !important;
	line-height: 1.5 !important;
}
body.mg-has-form .select2-container .select2-selection__placeholder { color: #ffffff !important; }
body.mg-has-form .select2-container .select2-selection__arrow b { border-top-color: #ffffff !important; }
/* Buscador interno del desplegable. */
body.mg-has-form .select2-search__field {
	background-color: #0D1B2A !important;
	color: #ffffff !important;
	border: 1px solid #3A3A3A !important;
}

/* Forminator también tiene su propio desplegable sin select2 en algunos diseños. */
body.mg-has-form .forminator-dropdown,
body.mg-has-form .forminator-select-dropdown {
	background-color: #0D1B2A !important;
	border-color: #3A3A3A !important;
}
body.mg-has-form .forminator-dropdown li,
body.mg-has-form .forminator-option {
	background-color: #0D1B2A !important;
	color: #ffffff !important;
}

.mg-form input:focus,
.mg-form textarea:focus,
.mg-form select:focus,
.mg-form .forminator-input:focus,
.mg-form .forminator-textarea:focus {
	border-color: var(--mg-accent) !important;
	outline: none !important;
}
/* Placeholders en blanco. opacity:1 es necesario: Firefox aplica una opacidad
   propia a los placeholders y sin esto se verían grisados igual. */
.mg-form input::placeholder,
.mg-form textarea::placeholder,
.mg-form input::-webkit-input-placeholder,
.mg-form textarea::-webkit-input-placeholder {
	color: #ffffff !important;
	opacity: 1 !important;
}

/* --- Botón de envío --- */
.mg-form button[type="submit"],
.mg-form .forminator-button,
.mg-form .forminator-button-submit {
	background: var(--mg-accent) !important;
	color: #0D1B2A !important;
	border: none !important;
	border-radius: 0 !important;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	letter-spacing: .12em !important;
	padding: 1.125rem 2.25rem !important;
	cursor: pointer;
	transition: opacity .2s ease;
}
.mg-form button[type="submit"]:hover,
.mg-form .forminator-button:hover,
.mg-form .forminator-button-submit:hover { opacity: .9 !important; }

/* --- Mensajes de error y de éxito --- */
.mg-form .forminator-error-message,
.mg-form .forminator-label--error { color: #ff6b6b !important; }
.mg-form .forminator-input--error,
.mg-form .forminator-textarea--error { border-color: #ff6b6b !important; }
.mg-form .forminator-response-message {
	font-family: 'Barlow Condensed', sans-serif !important;
	border-radius: 0 !important;
}

/* Forminator dibuja su propio contenedor con fondo y padding: lo neutralizamos
   para que mande el contenedor del widget. */
.mg-form .forminator-ui.forminator-custom-form {
	background: transparent !important;
	padding: 0 !important;
	border: none !important;
}

/* Switches del panel: borde de campos y fondo del botón siguiendo la categoría. */
.mg-form[data-field-border-accent="1"] :is(
	input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
	input[type="number"], textarea, select, .forminator-input, .forminator-textarea
) { border-color: var(--mg-accent) !important; }

.mg-form[data-btn-accent="1"] :is(
	button[type="submit"], .forminator-button, .forminator-button-submit
) { background: var(--mg-accent) !important; }

/* ============================================================
   WIDGET: Reseñas
   ============================================================ */
.mg-rev {
	/* En el sitio la tarjeta llena la columna que la contiene (col-span-5).
	   Sin width no lo hace: el contenedor de Elementor es flex y la caja se
	   encoge al contenido. */
	position: relative; display: block; width: 100%;
	/* border-style siempre presente para que el grosor del panel se dibuje en
	   los 4 lados. */
	border-style: solid; border-width: 1px; border-color: transparent;
}
/* El sitio usa el acento al 25% (accent + "40" en hexa), no el color pleno. */
.mg-rev[data-accent-border="1"] { border-color: var(--mg-accent); }
@supports (color: color-mix(in srgb, red 25%, transparent)) {
	.mg-rev[data-accent-border="1"] {
		border-color: color-mix(in srgb, var(--mg-accent) 25%, transparent);
	}
}
.mg-rev .mg-rev-head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 24px;
}
.mg-rev-label {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--mg-accent); text-transform: uppercase;
}
.mg-rev .mg-rev-label svg { width: 16px; height: 16px; flex-shrink: 0; }
.mg-rev .mg-rev-nav { display: flex; gap: 8px; }
.mg-rev .mg-rev-nav button {
	display: flex; align-items: center; justify-content: center;
	background: none; cursor: pointer;
	border: 1px solid var(--mg-accent); color: var(--mg-accent);
	transition: transform .2s ease;
	/* Medida de base: el control 'Tamaño botones flecha' la pisa, pero sin
	   esto el boton queda del porte de la flecha si el CSS de la pagina no
	   se regenero. */
	width: 32px; height: 32px; padding: 0; flex: 0 0 auto;
}
.mg-rev .mg-rev-nav button:hover { transform: scale(1.1); }
/* Flechas dibujadas con dos bordes rotados 45º: mismo criterio que la
   hamburguesa, para no depender de como se rendericen los SVG. */
.mg-rev .mg-rev-nav .mg-rev-arrow {
	display: block !important; width: 9px !important; height: 9px !important;
	border-style: solid !important; border-color: currentColor !important;
	border-width: 0 0 2px 2px !important;
}
.mg-rev .mg-rev-nav .mg-rev-arrow-prev { transform: rotate(45deg); margin-left: 3px; }
.mg-rev .mg-rev-nav .mg-rev-arrow-next { transform: rotate(-135deg); margin-right: 3px; }
/* Las slides se apilan en la MISMA celda de grilla. Antes eran absolutas dentro
   de un alto fijo: si la cita era larga, el texto se salía y se superponía con
   los puntos. Así el track toma el alto de la slide más alta. */
.mg-rev .mg-rev-track { display: grid; min-height: 200px; }
/* Astra le pone a TODO blockquote margin 1.5em/1em/1.5em/3em, padding 20px,
   un borde izquierdo de 5px y cursiva. En una columna angosta eso dejaba el
   texto metido hacia adentro y en italica, que no es lo del sitio. */
.mg-rev blockquote.mg-rev-slide {
	margin: 0; padding: 0; border: 0; quotes: none;
	font-size: inherit; font-style: normal; line-height: inherit;
}
.mg-rev blockquote.mg-rev-slide::before,
.mg-rev blockquote.mg-rev-slide::after { content: none; }
.mg-rev .mg-rev-slide {
	/* visibility ademas de opacity: con opacity sola el navegador puede dejar
	   un resto del texto anterior visible durante el fundido. */
	grid-area: 1 / 1; pointer-events: none;
	opacity: 0; visibility: hidden; transform: translateY(16px);
	transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
}
/* La reseña que se va sale hacia arriba mientras la nueva sube desde abajo. */
.mg-rev .mg-rev-slide.is-leaving {
	visibility: visible; transform: translateY(-16px);
	transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
}
.mg-rev .mg-rev-slide.is-active {
	opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
	transition: opacity .4s ease, transform .4s ease, visibility 0s;
}
.mg-rev-quote { margin: 0 0 24px; }
.mg-rev-name { margin: 0; text-transform: uppercase; color: var(--mg-accent); }
.mg-rev-role { margin: 8px 0 0; text-transform: uppercase; }
.mg-rev .mg-rev-dots { display: flex; gap: 6px; margin-top: 40px; }
.mg-rev .mg-rev-dots button {
	height: 3px; border: none; padding: 0; cursor: pointer;
	transition: all .15s cubic-bezier(.4,0,.2,1);
}
.mg-rev .mg-rev-dots button.is-active { background-color: var(--mg-accent); }

/* ============================================================
   Accesibilidad
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.mg-mq .mg-mq-track { animation: none; }
	.mg-hero-tab, .mg-t-tab, .mg-g-tab,
	.mg-gallery .mg-g-cell img,
	.mg-rev .mg-rev-nav button { transition: none; }
	.mg-hero-tab:hover, .mg-t-tab:hover, .mg-g-tab:hover { transform: none; }
}
.mg-nav :focus-visible,
.mg-hero :focus-visible,
.mg-gallery :focus-visible,
.mg-title :focus-visible,
.mg-rev :focus-visible {
	outline: 2px solid var(--mg-accent);
	outline-offset: 2px;
}

/* Los botones de flechas y puntitos de reseñas ya tienen su propio marco
   (el borde de las flechas, el color de los puntos): el recuadro de foco
   de arriba se les sumaba encima y en algunos navegadores quedaba una
   línea de mas alrededor del botón con solo tocarlo. */
.mg-rev .mg-rev-nav button:focus-visible,
.mg-rev .mg-rev-dots button:focus-visible {
	outline: none;
}

/* ============================================================
   Nosotros — columnas y opciones por atributo
   ============================================================ */
@media (min-width: 768px) {
	.mg-values[data-cols="1"] .mg-values-grid { grid-template-columns: 1fr; }
	.mg-values[data-cols="2"] .mg-values-grid { grid-template-columns: repeat(2, 1fr); }
	.mg-values[data-cols="3"] .mg-values-grid { grid-template-columns: repeat(3, 1fr); }
	.mg-values[data-cols="4"] .mg-values-grid { grid-template-columns: repeat(4, 1fr); }
	.mg-team[data-cols="2"] .mg-team-grid { grid-template-columns: repeat(2, 1fr); }
	.mg-team[data-cols="3"] .mg-team-grid { grid-template-columns: repeat(3, 1fr); }
	.mg-team[data-cols="4"] .mg-team-grid { grid-template-columns: repeat(4, 1fr); }
	.mg-team[data-cols="5"] .mg-team-grid { grid-template-columns: repeat(5, 1fr); }
}
/* Con el switch apagado las fotos van a color desde el principio. */
.mg-team[data-grayscale="0"] .mg-member-photo img { filter: none; }
.mg-team[data-grayscale="0"] .mg-member:hover .mg-member-photo img { filter: none; }

/* ---------- Fotos del equipo sin recortar ----------
   Las fotos vienen en orientaciones muy distintas (de 0,69 a 1,64 de
   relación). Metidas todas en un marco 3/4 con object-fit: cover, a las
   apaisadas les faltaba hasta la mitad del ancho. En modo "entera" cada foto
   conserva su proporción y la rejilla pasa a ser un mosaico por columnas:
   los anchos siguen parejos y no se pierde nada de ninguna imagen. */
.mg-team[data-fit="entera"] .mg-team-grid {
	display: block;
	columns: 2; column-gap: var(--mg-team-gap, .75rem);
}
/* Con `columns` el navegador reparte solo y cada columna termina donde le
   toca: se descuelgan hasta 160px entre la mas larga y la mas corta. Cuando
   el JS puede, arma las columnas a mano y recorta lo justo de la ultima foto
   de cada una para que todas cierren en la misma linea. */
.mg-team[data-fit="entera"] .mg-team-grid.mg-mosaico {
	display: flex; columns: auto;
	gap: var(--mg-team-gap, .75rem);
	align-items: flex-start;
}
.mg-team[data-fit="entera"] .mg-team-grid.mg-mosaico .mg-mosaico-col {
	flex: 1 1 0; min-width: 0;
	display: flex; flex-direction: column;
	gap: var(--mg-team-gap, .75rem);
}
.mg-team[data-fit="entera"] .mg-team-grid.mg-mosaico .mg-member { margin: 0; }
/* El recorte de ajuste: alto fijo y la foto lo cubre. */
.mg-team[data-fit="entera"] .mg-mosaico .mg-member-photo[style*="--mg-ajuste"] {
	aspect-ratio: auto; height: var(--mg-ajuste);
}
.mg-team[data-fit="entera"] .mg-mosaico .mg-member-photo[style*="--mg-ajuste"] img {
	height: 100%; object-fit: cover;
	object-position: center var(--mg-member-foco, center);
}
.mg-team[data-fit="entera"] .mg-member {
	break-inside: avoid; -webkit-column-break-inside: avoid;
	margin: 0 0 var(--mg-team-gap, .75rem);
}
.mg-team[data-fit="entera"] .mg-member-photo { aspect-ratio: auto; }
.mg-team[data-fit="entera"] .mg-member-photo img { height: auto; }
/* Excepción por persona: una foto suelta puede quedar tan alta que descuelgue
   su columna. Con el control de encuadre esa sola se recorta a la relación
   elegida, conservando la parte que se indique. El archivo no se toca. */
.mg-team .mg-member-recorte .mg-member-photo {
	aspect-ratio: var(--mg-member-ratio);
}
.mg-team .mg-member-recorte .mg-member-photo img {
	height: 100%; object-fit: cover;
	object-position: center var(--mg-member-foco, center);
}
@media (min-width: 600px) and (max-width: 1024px) {
	.mg-team[data-fit="entera"] .mg-team-grid { columns: 3; }
}
@media (min-width: 768px) {
	.mg-team[data-fit="entera"] .mg-team-grid { column-gap: var(--mg-team-gap, 1.5rem); }
	.mg-team[data-fit="entera"] .mg-member { margin-bottom: var(--mg-team-gap, 1.5rem); }
}
@media (min-width: 1025px) {
	.mg-team[data-fit="entera"] .mg-team-grid { columns: 4; }
	.mg-team[data-fit="entera"][data-cols="2"] .mg-team-grid { columns: 2; }
	.mg-team[data-fit="entera"][data-cols="3"] .mg-team-grid { columns: 3; }
	.mg-team[data-fit="entera"][data-cols="5"] .mg-team-grid { columns: 5; }
}

/* ---------- Portada de Nosotros sin recortar ----------
   El alto fijo del marco recortaba la foto a los costados. Con "entera" el
   marco toma el alto que le pide la imagen. El !important es a proposito: el
   control de alto genera su regla desde el post CSS, con mas peso que esta. */
.mg-ab[data-fit="entera"] .mg-ab-media { height: auto !important; }
.mg-ab[data-fit="entera"] .mg-ab-frame { position: relative; inset: auto; }
.mg-ab[data-fit="entera"] .mg-ab-frame img { height: auto; }

/* ------------------------------------------------------------
   DATOS DE CONTACTO
   Las líneas divisorias no son bordes: es 1px de gap dejando ver
   el fondo de la grilla, igual que en el sitio.
   ------------------------------------------------------------ */
.mg-ct .mg-ct-grid {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: 1px; background-color: #3A3A3A;
}
.mg-ct .mg-ct-cell {
	display: block; padding: 1rem; background-color: #0D1B2A;
	text-decoration: none; transition: background-color .2s ease;
}
/* El realce al pasar el mouse estaba solo en las celdas que son enlace, y
   Ubicacion no lo es: quedaba apagada al lado de las otras tres. */
.mg-ct .mg-ct-cell:hover { background-color: rgba(255, 255, 255, .03); }
.mg-ct .mg-ct-label { text-transform: uppercase; margin-bottom: .25rem; }
.mg-ct[data-accent-label="1"] .mg-ct-label { color: var(--mg-accent); }
.mg-ct .mg-ct-value { color: #fff; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
	.mg-ct .mg-ct-cell { transition: none; }
}

/* ------------------------------------------------------------
   REDES SOCIALES
   ------------------------------------------------------------ */
.mg-soc .mg-soc-list { display: flex; flex-wrap: wrap; gap: .75rem; }
.mg-soc[data-align="center"] .mg-soc-list { justify-content: center; }
.mg-soc[data-align="right"] .mg-soc-list { justify-content: flex-end; }

.mg-soc .mg-soc-link {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem; flex: 0 0 auto;
	border: 1px solid currentColor; border-radius: 0;
	text-decoration: none; transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
/* Con el switch activo, borde e ícono siguen a la categoría (como el footer). */
.mg-soc[data-accent="1"] .mg-soc-link { color: var(--mg-accent); border-color: var(--mg-accent); }
.mg-soc .mg-soc-link svg { width: 1.25rem; height: 1.25rem; stroke-width: 2; display: block; }
.mg-soc .mg-soc-link img { width: 1.25rem; height: 1.25rem; object-fit: contain; display: block; }

@media (prefers-reduced-motion: reduce) {
	.mg-soc .mg-soc-link { transition: none; }
	.mg-soc .mg-soc-link:hover { transform: none !important; }
}

/* ------------------------------------------------------------
   MANIFIESTO
   ------------------------------------------------------------ */
.mg-mani {
	position: relative; overflow: hidden; overflow: clip;
	border-top: 2px solid var(--mg-accent); border-bottom: 2px solid var(--mg-accent);
	border-left: 0; border-right: 0; border-style: solid;
}
/* Con el switch de bordes apagado manda el color fijo del control. */
.mg-mani[data-accent-borders="0"] { border-top-color: currentColor; border-bottom-color: currentColor; }

/* Textura de ruido: mismo SVG que el sitio, embebido para no pedir un archivo. */
.mg-mani .mg-mani-noise {
	position: absolute; inset: 0; pointer-events: none;
	background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/></svg>");
}

.mg-mani .mg-in { position: relative; }

/* La comilla se ancla al borde superior del contenido y se sube entera con
   translateY(-100%); la variable la vuelve a bajar el porcentaje elegido, así
   queda mordiendo el titular como en el sitio. En 0% queda del todo arriba. */
/* Ahora cuelga de la seccion, no del bloque de texto: arranca en el borde
   superior y el contenido empieza despues, asi no se pisan. */
.mg-mani .mg-mani-quotemark {
	position: absolute; z-index: 0;
	top: var(--mg-mani-qy, 10px);
	/* Sobre la linea del sitio, como el resto: 32px de aire mas lo que sobre de
	   los 1440. En el repo la comilla arranca 12px antes del texto, y eso se
	   respeta con el desplazamiento del control. */
	left: calc(max(2rem, (100% - 1440px) / 2 + 2rem) + var(--mg-mani-qx, -12px));
	pointer-events: none; user-select: none;
	color: var(--mg-accent); font-family: 'Oswald', sans-serif; font-weight: 700;
	line-height: .65; opacity: .65;
}
/* El texto siempre por encima de la comilla. */
.mg-mani .mg-mani-body { position: relative; z-index: 1; }

.mg-mani .mg-mani-line { margin: 0; overflow-wrap: break-word; }
.mg-mani .mg-mani-l2 { color: var(--mg-accent); }
.mg-mani[data-l2-align="center"] .mg-mani-l2 { text-align: center; }
.mg-mani[data-l2-align="right"] .mg-mani-l2 { text-align: right; }
.mg-mani[data-l2-align="left"] .mg-mani-l2 { text-align: left; }

/* Cita a la izquierda y firma a la derecha, alineadas por su base. */
.mg-mani .mg-mani-grid {
	display: grid; grid-template-columns: 7fr 5fr; gap: 1.5rem; align-items: end;
	margin-top: 4rem;
}
.mg-mani .mg-mani-q { overflow-wrap: break-word; }
.mg-mani .mg-mani-q2 { color: var(--mg-accent); }
.mg-mani .mg-mani-sign { text-align: right; }

@media (max-width: 767px) {
	/* En mobile la línea 2 va a la derecha (como el sitio) y la firma se apila. */
	.mg-mani[data-l2-align="center"] .mg-mani-l2 { text-align: right; }
	.mg-mani .mg-mani-grid { grid-template-columns: 1fr; gap: 2rem; margin-top: 2.5rem; }
	.mg-mani .mg-mani-sign { text-align: left; }
}

/* ============================================================
   AJUSTES DE MOBILE
   Revisados widget por widget sobre pantallas de 360–768px.
   ============================================================ */

/* Ninguna sección debe provocar scroll horizontal. Las palabras gigantes de
   fondo son nowrap y pueden exceder el ancho: se recortan contra su sección.

   RECORTE CON `clip`, NO CON `hidden`. Son dos cosas distintas: `hidden` (y
   `overflow-x: hidden`, que obliga al eje vertical a `auto`) convierte a la
   sección en una CAJA CON SCROLL PROPIO. Con una decena de secciones asi, el
   telefono termina con una decena de contenedores de scroll anidados dentro del
   de la pagina: el navegador tiene que decidir cual mover en cada gesto y se le
   va el repintado, que es por que los widgets a veces se veian y a veces no.
   `clip` recorta igual pero no crea contenedor de scroll. La linea `hidden` que
   va antes queda de respaldo para navegadores viejos. */
.mg-hero, .mg-ab, .mg-mq, .mg-gallery, .mg-proc, .mg-values, .mg-vh {
	max-width: 100%; overflow-x: hidden; overflow-x: clip;
}

/* --- Rejillas de una sola columna: el borde derecho quedaba colgando --- */
@media (max-width: 599px) {
	.mg-proc .mg-proc-step { border-right: 0; }
}
@media (max-width: 767px) {
	.mg-values .mg-value { border-right: 0; }
}

/* --- Stats: en 2 columnas la primera de cada fila no lleva divisor --- */
@media (max-width: 767px) {
	.mg-stats .mg-s-item:nth-child(2n+1) { border-left: 0; padding-left: 0; }
	/* Aire entre filas, que con el borde vertical solo no existía. */
	.mg-stats .mg-s-item { padding-top: 1.25rem; padding-bottom: 1.25rem; }
}

/* --- Header: la barra y el logo no pueden comerse la pantalla --- */
@media (max-width: 767px) {
	.mg-hdr { --mg-hdr-h: 4.5rem; --mg-hdr-h-scrolled: 3.75rem; }
	.mg-hdr .mg-hdr-logo img { height: 2.75rem; }
	.mg-hdr.is-scrolled .mg-hdr-logo img { height: 2.25rem; }
	.mg-hdr .mg-hdr-bar { gap: .75rem; }
}

/* --- Hero: las pestañas se deslizan en vez de amontonarse --- */
@media (max-width: 767px) {
	.mg-hero .mg-hero-tabs {
		flex-wrap: nowrap; overflow-x: auto;
		scrollbar-width: none; -webkit-overflow-scrolling: touch;
		/* Acá el desplazamiento horizontal si hace falta, y con el el recorte
		   vertical. El aire evita que se coma los bordes al hacer zoom (el
		   sitio usa pb-2 por lo mismo). */
		padding-top: 4px; padding-bottom: 8px;
	}
	.mg-hero .mg-hero-tabs::-webkit-scrollbar { display: none; }
	/* El collage y el texto no compiten por el alto. */
	.mg-hero .mg-hero-collage { height: clamp(15rem, 80vw, 24rem); }
	.mg-hero-sub { margin-bottom: 2rem; }
}

/* --- Nosotros: portada --- */
@media (max-width: 767px) {
	.mg-ab .mg-ab-media { height: 15rem; }
	.mg-ab-sub { margin-top: 1rem; }
}

/* --- Acordeón, Reseñas y Formulario: menos padding para ganar ancho útil --- */
@media (max-width: 599px) {
	.mg-acc .mg-acc-trigger { padding-left: 1.25rem; padding-right: 1.25rem; }
	.mg-acc-answer { padding-left: 1.25rem; padding-right: 1.25rem; }
	.mg-rev { padding: 1.5rem; }
	.mg-form .mg-form-body { padding: 1.25rem; }
	.mg-values .mg-value, .mg-proc .mg-proc-step { padding: 1.5rem; }
}

/* --- Galería: en mobile solo se ve la foto grande, que no quede aplastada --- */
@media (max-width: 767px) {
	.mg-gallery .mg-g-grid { height: clamp(18rem, 90vw, 28rem); }
	.mg-gallery .mg-g-head { margin-bottom: 2rem; }
}

/* --- Botones y áreas táctiles: mínimo 44px, recomendación de accesibilidad --- */
@media (max-width: 767px) {
	.mg-hero-cta, .mg-cta-btn, .mg-vh-cta,
	.mg-form button[type="submit"], .mg-form .forminator-button { min-height: 2.75rem; }
	/* El sitio las deja en 32px tambien en telefono; el area tocable la dan
	   los puntos, que si se agrandan. */
	.mg-rev .mg-rev-dots button { min-height: .75rem; } /* área tocable, la línea sigue fina */
	.mg-acc .mg-acc-trigger { min-height: 3.5rem; }
}

/* --- Pantallas táctiles: el hover no existe, así que lo que se revela con
       hover tiene que verse desde el principio --- */
@media (hover: none) {
	.mg-team .mg-member-photo img { filter: none; }
	.mg-team .mg-member-photo::after { opacity: .25; }
}

/* --- Marquee: en pantallas chicas conviene que corra un poco más rápido para
       que no se perciba estático --- */
@media (max-width: 599px) {
	/* el gap en mobile lo define el control responsive, no un valor fijo */
}

/* --- Video Hero: 100vh en mobile deja la barra del navegador tapando el CTA.
       dvh mide el alto realmente visible. --- */
@media (max-width: 767px) {
	.mg-vh { min-height: 80dvh; }
	.mg-vh .mg-vh-scroll { bottom: 1rem; }
}

/* ------------------------------------------------------------
   HOVER DE FOTOS (Hero y Galería)
   Dos capas apiladas: la segunda aparece con fundido al pasar el
   mouse. Sin segunda foto cargada, el mosaico se comporta igual
   que antes. En táctil no hay hover, así que nunca se muestra.
   ------------------------------------------------------------ */
.mg-hero-tile, .mg-g-cell { position: relative; overflow: hidden; }
.mg-hero-tile img, .mg-g-cell img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.mg-hero-tile .mg-img-hover, .mg-g-cell .mg-img-hover {
	position: absolute; inset: 0; opacity: 0;
	transition: opacity .45s ease;
}
.mg-hero-tile:hover .mg-img-hover, .mg-g-cell:hover .mg-img-hover { opacity: 1; }
/* La regla de arriba (`.mg-hero-tile img { display:block }`) tiene mas
   especificidad que el [hidden] de la plataforma y le ganaba: una foto de
   hover "apagada" (sin src, category sin esa foto) quedaba en
   display:block igual, y al pasar el mouse (opacity 1) se veia el 
   icono de imagen rota en vez de no mostrar nada. */
.mg-hero-tile img[hidden], .mg-g-cell img[hidden] { display: none; }
/* La base se mantiene debajo: evita el parpadeo si la 2ª tarda en cargar. */
.mg-hero-tile .mg-img-base, .mg-g-cell .mg-img-base { position: relative; z-index: 0; }

@media (prefers-reduced-motion: reduce) {
	.mg-hero-tile .mg-img-hover, .mg-g-cell .mg-img-hover { transition: none; }
}
@media (hover: none) {
	.mg-hero-tile .mg-img-hover, .mg-g-cell .mg-img-hover { display: none; }
}

/* Sin controles, el video es decoración: bloqueamos el clic para que YouTube
   no muestre su interfaz al tocarlo (el motivo real de que aparecieran). */
.mg-vh[data-controls="0"] .mg-vh-media iframe,
.mg-vh[data-controls="0"] .mg-vh-media video { pointer-events: none; }

/* ------------------------------------------------------------
   WHATSAPP FLOTANTE
   ------------------------------------------------------------ */
.mg-wa { position: fixed; bottom: 1.5rem; z-index: 9990; }
.mg-wa-right { inset-inline-end: 1.5rem; }
.mg-wa-left  { inset-inline-start: 1.5rem; inset-inline-end: auto; }
.mg-wa .mg-wa-btn {
	display: inline-flex; align-items: center; justify-content: center; position: relative;
	width: 3.5rem; height: 3.5rem; border-radius: 50%;
	background: #25D366; color: #fff; text-decoration: none;
	transition: transform .2s ease;
}
.mg-wa-shadow .mg-wa-btn { box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.mg-wa .mg-wa-btn:hover { transform: scale(1.08); }
.mg-wa .mg-wa-btn svg { width: 60%; height: 60%; display: block; }
.mg-wa .mg-wa-tip {
	position: absolute; inset-inline-end: calc(100% + .6rem); white-space: nowrap;
	background: #0D1B2A; color: #fff; padding: .4rem .7rem;
	font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: .875rem;
	opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.mg-wa-left .mg-wa-tip { inset-inline-end: auto; inset-inline-start: calc(100% + .6rem); }
.mg-wa .mg-wa-btn:hover .mg-wa-tip, .mg-wa .mg-wa-btn:focus-visible .mg-wa-tip { opacity: 1; }
@media (max-width: 767px) { .mg-wa-hide-mobile { display: none; } }
@media (prefers-reduced-motion: reduce) {
	.mg-wa .mg-wa-btn, .mg-wa .mg-wa-tip { transition: none; }
	.mg-wa .mg-wa-btn:hover { transform: none; }
}

/* ------------------------------------------------------------
   CASOS DE EXITO (popup con pestanas)
   ------------------------------------------------------------ */
/* Solo alinea el BOTON disparador. El popup va siempre a la izquierda, como
   el repo: centrado, los parrafos largos se leen mal y estiran el panel. */
.mg-cs[data-align="center"] > .mg-cs-trigger-wrap,
.mg-cs[data-align="center"] > .mg-cs-trigger { margin-inline: auto; }
.mg-cs[data-align="right"] > .mg-cs-trigger-wrap,
.mg-cs[data-align="right"] > .mg-cs-trigger { margin-inline-start: auto; }
.mg-cs .mg-cs-modal, .mg-cs .mg-cs-panel { text-align: left; }
.mg-cs .mg-cs-trigger {
	display: inline-flex; flex-direction: column; gap: .25rem; align-items: flex-start;
	background: var(--mg-accent); color: #0D1B2A; border: 0; cursor: pointer;
	padding: 1.125rem 2.25rem; text-align: left;
	transition: transform .2s ease;
}
.mg-cs .mg-cs-trigger:hover { transform: translateY(-2px); }
.mg-cs .mg-cs-trigger-eyebrow {
	font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
	font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; opacity: .75;
}

.mg-cs .mg-cs-modal {
	position: fixed; inset: 0; z-index: 9995;
	background: rgba(8,12,16,.9);
	display: flex; align-items: center; justify-content: center; padding: 1rem;
}
@media (min-width: 768px) {
	.mg-cs .mg-cs-modal { padding: 2rem; }
}
.mg-cs .mg-cs-modal[hidden] { display: none; }
.mg-cs .mg-cs-panel {
	/* max-w-[1040px] / max-h-[90vh] / #111820, como el repo. */
	position: relative; width: min(1040px, 100%); max-height: 90vh; overflow: auto;
	background: #111820; border: 1px solid var(--mg-accent);
}
.mg-cs .mg-cs-tabs {
	/* p-5 md:px-8 md:pt-8, con pr-16 para no quedar debajo del boton de cierre. */
	display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
	padding: 1.25rem 4rem 1.25rem 1.25rem;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	position: sticky; top: 0; background: inherit; z-index: 2;
}
@media (min-width: 768px) {
	.mg-cs .mg-cs-tabs { padding: 2rem 4rem 1.25rem 2rem; }
}
.mg-cs .mg-cs-tab {
	background: transparent; color: #fff; border: 1px solid var(--mg-accent);
	padding: .55rem 1rem; cursor: pointer;
	font-family: 'Oswald', sans-serif; font-weight: 700; font-size: .75rem;
	letter-spacing: .12em; text-transform: uppercase;
}
.mg-cs .mg-cs-tab.is-active { background: var(--mg-accent); color: #0D1B2A; }
.mg-cs .mg-cs-close {
	/* Absoluto arriba a la derecha (top-3 right-3), no dentro de la fila de
	   pestañas: asi no empuja el alto del panel.
	   flex + line-height:0 centra el glifo de verdad: con line-height normal
	   la X queda corrida hacia abajo por el espacio propio de la fuente. */
	position: absolute; top: .75rem; right: .75rem; z-index: 3;
	width: 2.5rem; height: 2.5rem; cursor: pointer;
	background: var(--mg-accent); color: #0D1B2A; border: 0; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: 'Barlow Condensed', sans-serif; font-size: 1.75rem; line-height: 0;
}
/* Sin boton propio, el panel de color de la Galeria es el disparador. */
.mg-cs[data-trigger="gallery"] { display: contents; }
.mg-gallery .mg-g-c3.mg-cs-hot { cursor: pointer; }
/* Una columna en telefono, dos de ahi para arriba (grid-cols-1 md:grid-cols-2). */
.mg-cs .mg-cs-case { display: none; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 768px) {
	.mg-cs .mg-cs-case.is-active { grid-template-columns: 1fr 1fr; }
}
/* Fuera de sus categorias el bloque no existe, igual que en el repo. */
.mg-cs.mg-cs-off { display: none !important; }
.mg-cs .mg-cs-case.is-active { display: grid; }
.mg-cs .mg-cs-media { position: relative; min-height: 13.75rem; }
.mg-cs .mg-cs-media img {
	width: 100%; height: 100%; display: block;
	/* `contain` por defecto: la foto entra entera y el fondo de la caja
	   rellena lo que sobra. El control del widget puede volver a `cover`. */
	object-fit: var(--mg-cs-fit, contain);
}
@media (min-width: 768px) {
	/* La foto se saca del flujo y rellena su celda. En el flujo, su alto natural
	   definia el alto de la fila: una foto vertical estiraba todo el popup y el
	   resultado dependia de que imagen estuviera cargada. Asi el alto lo manda
	   siempre la columna de texto. */
	/* La foto tiene alto propio y ya no lo hereda de la celda: la celda la
	   estiraba el texto de al lado, asi que la misma foto se veia de un tamaño
	   distinto en cada caso segun cuanto se hubiera escrito. `min()` con vh la
	   acota en pantallas bajas. */
	.mg-cs .mg-cs-media {
		min-height: 0; overflow: hidden;
		position: relative;
		height: min(var(--mg-cs-alto, 44rem), 62vh);
		align-self: start;
	}
	.mg-cs .mg-cs-media img {
		position: absolute; inset: 0; width: 100%; height: 100%;
		object-fit: var(--mg-cs-fit, contain);
	}
}
/* p-6 / md:p-10 con gap-5, como el repo: la separacion la da el gap y no los
   margenes sueltos de cada elemento. */
.mg-cs .mg-cs-body {
	/* Sin gap: la separacion la dan los margenes de cada bloque, que agrupan el
	   rotulo con SU parrafo. Con gap ademas de margen, el aire se duplicaba. */
	padding: 1.5rem;
	display: flex; flex-direction: column; gap: 0;
}
@media (min-width: 768px) {
	.mg-cs .mg-cs-body { padding: 2.5rem; }
}
.mg-cs .mg-cs-eyebrow {
	/* Guion corto delante, como el <span> de 24x2 del repo. */
	display: flex; align-items: center; gap: .75rem;
	color: var(--mg-accent); margin-bottom: .75rem;
	font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
	font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase;
}
.mg-cs .mg-cs-eyebrow::before {
	content: ""; flex: 0 0 auto; width: 1.5rem; height: 2px;
	background: var(--mg-accent);
}
.mg-cs .mg-cs-title { color: #fff; margin: 0 0 1.25rem; }
/* Fila que envuelve (gap-x-8 gap-y-3), como el repo. Las tarjetitas con borde
   y relleno que tenia antes sumaban alto y estiraban el popup. */
.mg-cs .mg-cs-data {
	display: flex; flex-wrap: wrap;
	column-gap: 2rem; row-gap: .75rem; margin-bottom: 0;
	align-items: flex-start;
}
.mg-cs .mg-cs-datum { display: flex; flex-direction: column; gap: .15rem; }
.mg-cs .mg-cs-datum-label {
	color: var(--mg-accent); font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
	font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
}
.mg-cs .mg-cs-datum-value {
	color: #fff; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.25rem;
}
.mg-cs .mg-cs-sub {
	display: block; color: var(--mg-accent); margin: 1.5rem 0 .4rem;
	font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
	font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
}
.mg-cs .mg-cs-body p { margin: 0; color: #ccc; }
@media (max-width: 767px) {
	.mg-cs .mg-cs-case.is-active { grid-template-columns: 1fr; }
	/* En telefono la foto ocupa el ancho completo, asi que con `contain` toma
	   su alto natural y no quedan franjas: el tope solo actua con fotos muy
	   verticales, para que no se coman la pantalla. */
	.mg-cs .mg-cs-media { max-height: 45vh; overflow: hidden; }
	.mg-cs .mg-cs-media img { height: auto; max-height: 45vh; }
	.mg-cs .mg-cs-body { padding: 1.25rem; }
}

/* Degradados de 120px en los bordes: la cinta se desvanece en vez de cortarse
   de golpe. En el sitio son dos divs; aca alcanzan los pseudo-elementos. */
.mg-mq[data-fade="1"]::before,
.mg-mq[data-fade="1"]::after {
	content: ""; position: absolute; top: 0; bottom: 0; width: var(--mg-mq-fade, 120px);
	z-index: 2; pointer-events: none;
}
.mg-mq[data-fade="1"] { position: relative; }
.mg-mq[data-fade="1"]::before {
	left: 0; background: linear-gradient(90deg, var(--mg-mq-bg, #111820) 0%, transparent 100%);
}
.mg-mq[data-fade="1"]::after {
	right: 0; background: linear-gradient(-90deg, var(--mg-mq-bg, #111820) 0%, transparent 100%);
}

/* ------------------------------------------------------------
   BARRA DE COLOR (separa el marquee del footer)
   ------------------------------------------------------------ */
.mg-bar {
	display: block; width: 100%; height: 4px;
	background: linear-gradient(90deg,
		var(--mg-accent) 0%,
		var(--mg-bar-center, #E51A2E) 50%,
		var(--mg-accent) 100%);
}
.mg-bar.mg-bar-solid { background: var(--mg-accent); }

/* ============================================================
   MOBILE Y TABLET — SEGUNDA PASADA
   Cubre los widgets agregados despues de la primera revision y
   los efectos del header fijo.
   ============================================================ */

/* --- Header fijo: el menu desplegado tiene que poder scrollearse y no
       taparse con la barra del navegador --- */
@media (max-width: 1024px) {
	/* Menu a pantalla completa, como el sitio: fixed inset-0 con el fondo del
	   footer y el alto del header como padding superior. */
	.mg-hdr.mg-open .mg-nav ul.mg-nav-list,
	.mg-hdr .mg-nav ul.mg-nav-list {
		position: fixed; inset: 0; top: 0; left: 0; right: 0; bottom: 0;
		max-height: none; width: 100%;
		padding: calc(var(--mg-hdr-h, 4.5rem) + 1.5rem) 1.25rem 2rem;
		background: #0D1B2A; z-index: 40;
		overflow-y: auto; -webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
	.mg-hdr.is-scrolled .mg-nav ul.mg-nav-list {
		padding-top: calc(var(--mg-hdr-h-scrolled, 3.75rem) + 1.5rem);
	}
	/* El boton de cerrar tiene que quedar por encima de la capa. */
	.mg-hdr .mg-hdr-toggle { position: relative; z-index: 50; }
	/* El panel de categorias no puede quedar en 3 columnas en una pantalla angosta. */
	.mg-nav .mg-mega { position: static; width: 100%; }
	.mg-nav .mg-mega-inner { grid-template-columns: 1fr; gap: 1rem; }
	/* La columna 3 es el panel de fotos del mega menu: en pantalla angosta
	   no entra y se oculta. (.mg-preview NO se toca: es la categoria activa.) */
	.mg-nav .mg-mega-col3 { display: none; }
}

/* --- Casos de exito: en telefono el popup ocupa toda la pantalla --- */
@media (max-width: 599px) {
	.mg-cs .mg-cs-modal { padding: 0; }
	.mg-cs .mg-cs-panel { width: 100%; max-height: 100dvh; height: 100dvh; border: 0; }
	.mg-cs .mg-cs-tabs { padding: .75rem; gap: .35rem; }
	.mg-cs .mg-cs-tab { font-size: .6875rem; padding: .45rem .7rem; }
	.mg-cs .mg-cs-close { width: 2.75rem; height: 2.75rem; }
	.mg-cs .mg-cs-title { font-size: 1.75rem; }
	.mg-cs .mg-cs-data { gap: 1rem; }
	.mg-cs .mg-cs-trigger { width: 100%; }
}

/* --- Datos de contacto: una columna y celdas comodas al tacto --- */
@media (max-width: 599px) {
	.mg-ct .mg-ct-grid { grid-template-columns: 1fr; }
	.mg-ct .mg-ct-cell { min-height: 3.5rem; }
	.mg-ct .mg-ct-value { font-size: 1rem; }
}

/* --- Redes: centradas y con area tactil suficiente --- */
@media (max-width: 767px) {
	.mg-soc .mg-soc-list { justify-content: center; gap: .75rem; }
	.mg-soc .mg-soc-link { width: 2.75rem; height: 2.75rem; }
}

/* --- WhatsApp: mas cerca del borde para no comer contenido --- */
@media (max-width: 599px) {
	.mg-wa { bottom: 1rem; }
	.mg-wa-right { inset-inline-end: 1rem; }
	.mg-wa-left { inset-inline-start: 1rem; }
	.mg-wa .mg-wa-btn { width: 3rem; height: 3rem; }
	.mg-wa .mg-wa-tip { display: none; }
}

/* --- Manifiesto: la comilla gigante no puede empujar el texto --- */
@media (max-width: 767px) {
	/* La separacion desde arriba la define el control responsive. */
	.mg-mani .mg-mani-grid { align-items: start; }
}

/* --- Marquee: los degradados de 120px se comen media pantalla --- */
@media (max-width: 599px) {
	.mg-mq[data-fade="1"]::before,
	.mg-mq[data-fade="1"]::after { width: 2.5rem; }
}

/* --- Hero: en telefono el texto va primero y el collage despues --- */
@media (max-width: 767px) {
	/* align-items:center viene de la regla base y en columna encoge cada hijo a
	   su ancho de contenido. Con el carril de fotos en posicion absoluta el
	   collage dejo de tener ancho propio y la columna derecha se venia a 60px:
	   en columna los hijos tienen que ocupar el ancho entero. */
	.mg-hero .mg-hero-grid {
		display: flex; flex-direction: column; gap: 1.5rem;
		align-items: stretch;
	}
	.mg-hero .mg-hero-left, .mg-hero .mg-hero-right { width: 100%; }
	.mg-hero .mg-hero-inner { padding: 1.5rem 1.25rem 4rem; }
	/* La palabra de fondo se achica sola por JS, pero ademas la bajamos de
	   opacidad para que no compita con el titulo en pantallas chicas. */
	.mg-hero-watermark { opacity: .04; }
}

/* --- Galeria y Nosotros: aire lateral parejo --- */
@media (max-width: 599px) {
	.mg-gallery .mg-g-inner, .mg-ab .mg-in, .mg-story .mg-in,
	.mg-values .mg-in, .mg-team .mg-in, .mg-cta .mg-in { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* --- Tablet: rejillas intermedias, ni 1 ni 4 columnas --- */
@media (min-width: 600px) and (max-width: 1024px) {
	.mg-team .mg-team-grid { grid-template-columns: repeat(3, 1fr); }
	.mg-values .mg-values-grid { grid-template-columns: repeat(2, 1fr); }
	.mg-ct .mg-ct-grid { grid-template-columns: repeat(2, 1fr); }
	.mg-cs .mg-cs-case.is-active { grid-template-columns: 1fr; }
	.mg-cs .mg-cs-media { max-height: 45vh; overflow: hidden; }
}

/* --- Nada puede desbordar a lo ancho ---
   .mg-ct y .mg-soc quedan afuera: son de los que toman la linea del sitio
   (1440 centrado) y esta regla, por venir despues, les pisaba el ancho. */
.mg-cs, .mg-bar, .mg-mani, .mg-rev, .mg-form, .mg-acc, .mg-stats {
	max-width: 100%;
}
.mg-mani, .mg-rev, .mg-acc { overflow-x: hidden; overflow-x: clip; }

/* ============================================================
   MENU MOBILE — replica del sitio
   Capa completa por debajo de la barra (que queda visible arriba),
   categorias en lista plana y bloque "Mas" con las paginas.
   ============================================================ */
.mg-hdr .mg-mobile { display: none; }

@media (max-width: 1024px) {
	/* La lista horizontal del escritorio no se usa en mobile. */
	.mg-hdr .mg-hdr-nav { display: none; }

	.mg-hdr .mg-mobile {
		display: block; position: fixed; inset: 0; z-index: 40;
		background: #0D1B2A; overflow-y: auto;
		-webkit-overflow-scrolling: touch; overscroll-behavior: contain;
		padding-top: var(--mg-hdr-h);
		opacity: 0; visibility: hidden; transition: opacity .25s ease;
	}
	.mg-hdr.is-scrolled .mg-mobile { padding-top: var(--mg-hdr-h-scrolled); }
	.mg-hdr.mg-open .mg-mobile { opacity: 1; visibility: visible; }
	/* La barra queda por encima de la capa, como en el sitio. */
	.mg-hdr .mg-hdr-bar { position: relative; z-index: 50; }

	.mg-hdr .mg-mobile-inner { padding: 1.5rem 1.25rem; }

	.mg-hdr .mg-mobile-eyebrow {
		margin: 0 0 1rem; color: #E51A2E; text-transform: uppercase;
		font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
		font-size: .75rem; letter-spacing: .22em;
	}
	.mg-hdr .mg-mobile-eyebrow-2 { margin-top: 2.5rem; }

	.mg-hdr .mg-mobile-list { display: flex; flex-direction: column; }
	.mg-hdr .mg-mobile-list a {
		display: flex; align-items: center; gap: .75rem;
		padding: 1rem 0; text-align: left; text-decoration: none;
		color: #fff; text-transform: uppercase;
		font-family: 'Oswald', sans-serif; font-weight: 700;
		font-size: 2rem; letter-spacing: .02em; line-height: 1;
		border-bottom: 1px solid rgba(255,255,255,.08);
	}
	/* El bloque "Mas" va un punto mas chico, igual que el sitio. */
	.mg-hdr .mg-mobile-pages a { font-size: 1.75rem; }

	/* Guion delante: corto por defecto, largo en la categoria activa. */
	.mg-hdr .mg-mobile-list a::before,
	.mg-hdr .mg-mobile-dash {
		content: ""; display: inline-block; flex: 0 0 auto;
		width: 10px; height: 2px; background: var(--mg-item-accent, #E51A2E);
		transition: width .25s ease;
	}
	.mg-hdr .mg-mobile-item .mg-mobile-dash { background: var(--mg-item-accent, #E51A2E); }
	.mg-hdr .mg-mobile-item.is-active { color: var(--mg-item-accent, #E51A2E); }
	.mg-hdr .mg-mobile-item.is-active .mg-mobile-dash { width: 28px; }
	.mg-hdr .mg-mobile-pages a.is-active { color: #E51A2E; }
	.mg-hdr .mg-mobile-pages a.is-active::before { width: 28px; }
	/* Los <a> del menu de WordPress no traen guion propio y por eso se lo pone
	   el ::before. Los de categoria SI traen su <span class="mg-mobile-dash">,
	   asi que ahi el ::before sobra: se veian dos rayitas por renglon. Va con
	   tres clases porque la regla de arriba usa dos y carga antes. */
	.mg-hdr .mg-mobile-list a.mg-mobile-item::before { content: none; }

	.mg-hdr .mg-mobile-cta {
		display: block; width: 100%; margin-top: 2.5rem; padding: 1rem;
		text-align: center; text-decoration: none; border-radius: 0;
		background: var(--mg-accent); color: #0D1B2A; text-transform: uppercase;
		font-family: 'Oswald', sans-serif; font-weight: 700;
		font-size: .9375rem; letter-spacing: .14em;
	}
	/* El submenu de WordPress se lista plano, sin niveles. */
	.mg-hdr .mg-mobile-pages .sub-menu {
		list-style: none; margin: 0; padding: 0;
	}
	.mg-hdr .mg-mobile-pages ul { list-style: none; margin: 0; padding: 0; }
	/* Los <li> tambien: quedaba la viñeta gris del tema al lado de la rayita
	   de color, o sea dos marcas por renglon. */
	.mg-hdr .mg-mobile-pages li { list-style: none; margin: 0; }
	.mg-hdr .mg-mobile-pages li::marker { content: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mg-hdr .mg-mobile { transition: none; }
	.mg-hdr .mg-mobile-dash { transition: none; }
}

/* El JS mide las dos alturas de la cabecera cambiandole la clase por un
   instante. Con esto ese ida y vuelta no se ve ni se anima. */
.mg-hdr.mg-hdr-quieto,
.mg-hdr.mg-hdr-quieto * { transition: none !important; }

/* ============================================================
   POSTALES EN TELEFONO: un solo carril con TODAS las fotos
   La grilla de escritorio esconde tres de sus cuatro cuadrantes en telefono, y
   del que queda solo se llegaba a la foto base, porque en tactil no hay hover:
   de ocho fotos se veia una. Aca la grilla ENTERA pasa a ser el carril y las
   celdas dejan de formar caja, asi que las ocho quedan en fila y en el orden
   natural del DOM: la 1, su hover, la 2, su hover, la 3, su hover, la 4 y la
   suya.
   Las fotos no se mueven de lugar en el DOM, solo se les saca la caja de
   alrededor; por eso todo lo que las busca por su celda (el cambio de
   categoria cambia el src de `.mg-g-c1 .mg-img-base`, por ejemplo) sigue
   funcionando, y en escritorio no cambia absolutamente nada.
   ============================================================ */
.mg-g-dots { display: none; }

@media (max-width: 767px) {
	.mg-gallery .mg-g-grid {
		display: flex; gap: 0;
		overflow-x: auto; overflow-y: hidden;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.mg-gallery .mg-g-grid::-webkit-scrollbar { display: none; }

	/* Las celdas dejan de existir como caja: sus fotos pasan a ser
	   diapositivas hermanas dentro del carril. Con tres clases para ganarle a
	   los `display:none` con que la grilla las escondia en telefono. */
	.mg-gallery .mg-g-grid > .mg-g-cell { display: contents; }
	/* El panel de color no entra al carril: en telefono sigue aparte. */
	.mg-gallery .mg-g-grid > .mg-g-c3 { display: none; }

	.mg-gallery .mg-g-grid img {
		position: static; inset: auto; opacity: 1; display: block;
		flex: 0 0 100%; scroll-snap-align: center;
		/* Frena en CADA foto. Con "mandatory" a secas, un envion fuerte recorre
		   varias y engancha en la que quede mas cerca al detenerse: se pasaban
		   dos o tres de un saque. Con esto el gesto avanza de a una. */
		scroll-snap-stop: always;
		width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
	}
	/* Si la categoria no trae la segunda foto de un cuadrante, el JS la deja
	   en hidden y no ocupa una diapositiva vacia. */
	.mg-gallery .mg-g-grid img[hidden] { display: none; }

	/* Puntitos debajo del carril: sin ellos no hay manera de saber que hay
	   ocho fotos y no una. Van afuera de la grilla porque la grilla es la que
	   se desplaza, y adentro se irian con el scroll. */
	.mg-g-dots {
		display: flex; gap: 6px; justify-content: center;
		margin-top: .875rem;
	}
	.mg-g-dots[hidden] { display: none; }
	.mg-g-dots button,
	.mg-g-dots button:hover {
		width: 7px; height: 7px; min-height: 0; padding: 0;
		border: none; border-radius: 50%;
		background-color: rgba(255, 255, 255, .28);
		transition: background-color .2s ease;
	}
	.mg-g-dots button.is-active { background-color: var(--mg-accent, #E51A2E); }
}

/* ============================================================
   IMAGENES EN TELEFONO: cada foto se desliza en su propio lugar
   En tactil no hay hover, asi que la segunda foto de cada cuadrante era
   inalcanzable. La grilla NO cambia: cada celda conserva su posicion y su
   tamaño; lo que cambia es que por dentro pasa a ser un carril con anclaje
   entre su foto base y la de hover. Cuatro fotos siguen siendo cuatro fotos,
   cada una con su propio desplazamiento.
   El carril lo arma el JS; en escritorio queda en display:contents, o sea que
   es como si no existiera y todo el hover de siempre sigue igual.
   ============================================================ */
.mg-tile-track { display: contents; }
.mg-tile-dots { display: none; }

@media (max-width: 767px) {
	.mg-hero .mg-hero-tile > .mg-tile-track {
		display: flex;
		position: absolute; inset: 0;
		overflow-x: auto; overflow-y: hidden;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.mg-hero .mg-hero-tile > .mg-tile-track::-webkit-scrollbar { display: none; }

	/* Las dos fotos dejan de estar superpuestas: pasan a ser diapositivas
	   hermanas, cada una del ancho completo de su celda. */
	.mg-hero .mg-hero-tile .mg-tile-track > img {
		position: static; inset: auto; opacity: 1; display: block;
		flex: 0 0 100%; scroll-snap-align: center;
		/* Igual que en postales: una foto por gesto. */
		scroll-snap-stop: always;
		width: 100%; height: 100%; object-fit: cover;
	}
	/* Si la categoria no trae segunda foto, el JS la deja en hidden. */
	.mg-hero .mg-hero-tile .mg-tile-track > img[hidden] { display: none; }

	/* Puntitos: sin ellos no hay manera de saber que la foto se desliza. */
	.mg-tile-dots {
		display: flex; gap: 5px;
		position: absolute; z-index: 3;
		left: 50%; transform: translateX(-50%); bottom: 8px;
	}
	.mg-tile-dots[hidden] { display: none; }
	.mg-tile-dots button,
	.mg-tile-dots button:hover {
		width: 6px; height: 6px; min-height: 0; padding: 0;
		border: none; border-radius: 50%;
		background-color: rgba(255, 255, 255, .5);
		box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
		cursor: pointer; transition: background-color .2s ease;
	}
	.mg-tile-dots button.is-active,
	.mg-tile-dots button.is-active:hover { background-color: #fff; }
}