/*
Theme Name: Minga Estudio
Author: Minga Estudio
Description: Tema de una página para Minga Estudio: presencia digital para microemprendedoras en Chile. Editorial, en gris claro y negro con un acento morado.
Version: 1.6.1
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: minga-estudio
*/

:root {
	--mg-niebla: var(--wp--preset--color--niebla, #d8d8d4);
	--mg-papel: var(--wp--preset--color--papel, #efefeb);
	--mg-tinta: var(--wp--preset--color--tinta, #0b0b0b);
	--mg-grafito: var(--wp--preset--color--grafito, #55554f);
	--mg-humo: var(--wp--preset--color--humo, #8c8c87);
	--mg-acento: var(--wp--preset--color--morado, #6a2bd9);
	--mg-acento-claro: var(--wp--preset--color--lila, #b79bf7);
	--mg-gutter: clamp(16px, 3.2vw, 48px);
	--mg-gap: clamp(16px, 1.7vw, 24px);
	--mg-section: clamp(64px, 7.5vw, 120px);
	--mg-header: 68px;
	--mg-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
	scroll-padding-top: var(--mg-header);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--mg-acento);
	color: var(--mg-papel);
}

a {
	text-underline-offset: 0.18em;
}

:where(a, button, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--mg-papel);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--mg-tinta);
}

/* ---------- Piezas comunes ---------- */

body .mg-wrap {
	max-width: 1680px;
	margin-inline: auto;
	padding-inline: var(--mg-gutter);
}

body .mg-display {
	font-stretch: 125%;
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

body .mg-dark {
	background: var(--mg-tinta);
	color: var(--mg-papel);
}

body .mg-h2 {
	font-size: clamp(2.1rem, 5.4vw, 5.75rem);
	text-wrap: balance;
}

/* Título a la izquierda y un texto corto a la derecha, alineado a la base. */
body .mg-section-head {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--mg-gap);
	align-items: end;
	margin-bottom: clamp(36px, 4.4vw, 68px);
}

body .mg-section-head .mg-h2 {
	grid-column: 1 / 9;
}

body .mg-section-head__text {
	grid-column: 9 / -1;
	padding-bottom: 0.5em;
	font-size: 1.0625rem;
	line-height: 1.45;
	color: var(--mg-grafito);
}

/* Filete superior de las filas. Se dibuja aparte para poder animarlo. */
body .mg-service,
body .mg-step,
body .mg-card,
body .mg-contact__foot {
	position: relative;
}

body .mg-service::before,
body .mg-step::before,
body .mg-card::before,
body .mg-contact__foot::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1.5px;
	background: currentColor;
	transform-origin: left;
}

body .wp-block-image {
	margin: 0;
	overflow: hidden;
}

body .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	filter: grayscale(1);
}

body .wp-block-button__link {
	transition: background-color 0.3s var(--mg-ease), color 0.3s var(--mg-ease), border-color 0.3s var(--mg-ease);
}

body .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--mg-tinta);
	color: var(--mg-papel);
}

body .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: currentColor;
	border: 1.5px solid currentColor;
	padding: calc(0.9em - 1.5px) calc(1.5em - 1.5px);
}

body .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--mg-tinta);
	border-color: var(--mg-tinta);
	color: var(--mg-papel);
}

body .wp-block-buttons {
	gap: 12px !important;
}

/* ---------- Cabecera ---------- */

body header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, #000 82%, transparent);
	color: var(--mg-papel);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.admin-bar header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

body .mg-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--mg-header);
	padding-inline: var(--mg-gutter);
}

body .mg-header__brand {
	font-size: 1.0625rem;
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.01em;
}

body .mg-header__id {
	display: flex;
	align-items: baseline;
	gap: 14px;
	min-width: 0;
}

body .mg-header__tag {
	font-size: 0.8125rem;
	white-space: nowrap;
	color: color-mix(in srgb, var(--mg-papel) 68%, transparent);
}

body .mg-header__brand a,
body .mg-header__nav a {
	text-decoration: none;
}

body .mg-header__nav {
	display: flex;
	gap: clamp(18px, 2.4vw, 40px);
	font-size: 0.875rem;
	font-weight: 500;
}

body .mg-header__nav a {
	padding-block: 6px;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
	transition: background-size 0.4s var(--mg-ease);
}

body .mg-header__nav a:hover {
	background-size: 100% 1.5px;
}

body .mg-header__cta .wp-block-button__link {
	background: var(--mg-papel);
	color: var(--mg-tinta);
	font-size: 0.875rem;
	padding: 0.86em 1.2em;
}

body .mg-header__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--mg-acento);
	color: var(--mg-papel);
}

/* ---------- Hero ---------- */

body .mg-hero {
	position: relative;
	overflow: hidden;
	background: #000;
	color: var(--mg-papel);
}

body .mg-hero__inner {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-height: min(calc(100svh - var(--mg-header)), 900px);
	padding-top: clamp(20px, 2.6vw, 40px);
	padding-bottom: clamp(24px, 3vw, 44px);
}

body .mg-hero__title {
	position: relative;
	z-index: 2;
	font-size: clamp(2.2rem, 5vw, 5.25rem);
	text-wrap: balance;
}

/* El fondo del video es negro puro, así que se funde con la sección. */
body .mg-hero__video {
	z-index: 1;
	margin: 0;
	pointer-events: none;
}

/* Escritorio y tablet: el video va detrás del texto, anclado al borde inferior.
   Lleva !important porque WordPress y los plugins de optimización traen reglas
   propias para el bloque de video que, si ganan, lo sacan de su lugar. */
@media (min-width: 721px) {
	body .mg-hero .mg-hero__video {
		position: absolute !important;
		top: auto !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		width: auto !important;
		height: 84% !important;
		margin: 0 !important;
	}

	body .mg-hero .mg-hero__video video {
		object-fit: contain !important;
		object-position: 50% 100% !important;
	}
}

/* Oscurece la base del video para que el texto de abajo se lea sobre los brazos. */
body .mg-hero__inner::after {
	content: "";
	position: absolute;
	z-index: 1;
	right: 0;
	bottom: 0;
	left: 0;
	height: 260px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0));
	pointer-events: none;
}

body .mg-hero__video video {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-position: 50% 100%;
}

body .mg-hero__foot {
	position: relative;
	z-index: 2;
	grid-row: 3;
	display: grid;
	grid-template-columns: minmax(0, 30ch) auto;
	align-items: end;
	justify-content: space-between;
	gap: 16px 40px;
}

body .mg-hero__lead {
	grid-row: span 2;
	font-size: clamp(1.125rem, 1.45vw, 1.375rem);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.005em;
}

body .mg-hero__foot .wp-block-buttons {
	justify-content: flex-end;
}

body .mg-hero__meta {
	font-size: 0.875rem;
	text-align: right;
	color: var(--mg-humo);
}

body .mg-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--mg-papel);
	color: var(--mg-tinta);
}

body .mg-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--mg-papel);
	border-color: var(--mg-papel);
	color: var(--mg-tinta);
}

/* ---------- Propósito ---------- */

body .mg-purpose {
	background: var(--mg-papel);
	padding-block: var(--mg-section);
}

body .mg-purpose__inner,
body .mg-reason {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--mg-gap);
}

/* Entrada de diccionario: la palabra que da nombre al estudio. */
body .mg-entry {
	grid-column: 1 / 5;
	display: grid;
	gap: 18px;
	align-content: start;
}

body .mg-entry__word {
	font-size: clamp(3.2rem, 6.4vw, 6rem);
	font-stretch: 125%;
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.035em;
	color: var(--mg-acento);
}

body .mg-entry__def {
	max-width: 30ch;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--mg-grafito);
}

body .mg-statement {
	grid-column: 6 / -1;
	font-size: clamp(1.6rem, 3.2vw, 3.3rem);
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: -0.02em;
	text-wrap: pretty;
}

body .mg-reason {
	position: relative;
	align-items: end;
	margin-top: clamp(64px, 7vw, 112px);
	padding-top: 28px;
}

body .mg-reason::before {
	content: "";
	position: absolute;
	top: 0;
	right: var(--mg-gutter);
	left: var(--mg-gutter);
	height: 1.5px;
	background: var(--mg-tinta);
}

body .mg-reason__facts {
	grid-column: 1 / 5;
	max-width: 34ch;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--mg-grafito);
}

body .mg-reason__note {
	grid-column: 6 / -1;
	max-width: 30ch;
	font-size: clamp(1.3rem, 2.3vw, 2.3rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

/* ---------- Para quién ---------- */

body .mg-who {
	background: var(--mg-niebla);
	padding-block: var(--mg-section);
}

body .mg-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mg-gap);
}

body .mg-card {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: var(--mg-gap);
	row-gap: 28px;
	align-items: start;
	padding-top: 20px;
}

body .mg-card .wp-block-image {
	grid-column: 1 / -1;
}

body .mg-card .wp-block-image img {
	aspect-ratio: 5 / 4;
	object-fit: cover;
	object-position: 50% 28%;
	filter: none;
	transition: transform 1.2s var(--mg-ease);
}

body .mg-card:hover .wp-block-image img {
	transform: scale(1.035);
}

body .mg-card h3 {
	font-size: clamp(1.5rem, 2.2vw, 2.1rem);
	font-stretch: 112%;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

body .mg-card p {
	line-height: 1.55;
	color: var(--mg-grafito);
}

/* ---------- Servicios ---------- */

body .mg-services {
	background: var(--mg-papel);
	padding-block: var(--mg-section);
}

body .mg-service {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: var(--mg-gap);
	row-gap: 12px;
	align-items: baseline;
	padding-block: clamp(22px, 2.5vw, 36px);
}

body .mg-service h3 {
	grid-column: 1;
	font-size: clamp(1.35rem, 2.4vw, 2.3rem);
	font-stretch: 112%;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

body .mg-service p:not(.mg-tag) {
	grid-column: 2;
	grid-row: 1 / span 2;
	max-width: 52ch;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--mg-grafito);
}

body .mg-service .mg-tag {
	grid-column: 1;
	grid-row: 2;
	justify-self: start;
	padding: 0.35em 0.9em;
	border-radius: 999px;
	background: var(--mg-acento);
	color: var(--mg-papel);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

body .mg-service:last-child {
	border-bottom: 1.5px solid currentColor;
}

/* ---------- Proceso ---------- */

body .mg-process {
	padding-block: var(--mg-section);
}

body .mg-process__inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: auto 1fr;
	column-gap: var(--mg-gap);
	row-gap: clamp(36px, 4.4vw, 68px);
}

body .mg-process__photo {
	grid-column: 1 / 6;
	grid-row: 1 / 3;
	align-self: stretch;
}

body .mg-process__photo img {
	height: 100%;
	min-height: 420px;
	object-fit: cover;
}

body .mg-process .mg-h2 {
	grid-column: 7 / -1;
	grid-row: 1;
	font-size: clamp(2.1rem, 4.1vw, 4.4rem);
}

body .mg-steps {
	grid-column: 7 / -1;
	grid-row: 2;
	align-self: end;
}

body .mg-step {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	column-gap: var(--mg-gap);
	row-gap: 10px;
	padding-block: clamp(22px, 2.5vw, 34px);
}

body .mg-step__n {
	grid-row: span 2;
	font-size: 0.875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--mg-acento-claro);
	padding-top: 0.75em;
}

body .mg-step h3 {
	font-size: clamp(1.35rem, 2.2vw, 2.1rem);
	font-stretch: 112%;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
}

body .mg-step p:not(.mg-step__n) {
	grid-column: 2;
	max-width: 46ch;
	line-height: 1.55;
	color: var(--mg-humo);
}

/* ---------- Hablemos ---------- */

body .mg-contact {
	background: var(--mg-acento);
	color: var(--mg-papel);
	padding-block: clamp(56px, 6.5vw, 104px);
	overflow: hidden;
}

body .mg-contact__title {
	font-size: clamp(2.8rem, 12.8vw, 13.5rem);
	line-height: 0.86;
	margin-left: -0.04em;
}

body .mg-contact__foot {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--mg-gap);
	align-items: start;
	margin-top: clamp(32px, 4.4vw, 64px);
	padding-top: 28px;
}

body .mg-contact__who {
	grid-column: 1 / 5;
	max-width: 34ch;
	font-size: 1.0625rem;
	line-height: 1.5;
}

body .mg-contact__action {
	grid-column: 6 / -1;
	display: grid;
	gap: 24px;
	justify-items: start;
}

body .mg-contact__lead {
	max-width: 30ch;
	font-size: clamp(1.3rem, 2.3vw, 2.3rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

/* Formulario de Fluent Forms dentro de "Hablemos". Los !important son necesarios:
   el plugin trae su propia hoja de estilos y la carga después de la del tema. */
body .mg-contact__action > .fluentform,
body .mg-contact__action .fluentform_wrapper {
	width: 100%;
	max-width: 560px;
}

body .mg-contact .fluentform .ff-el-group {
	margin-bottom: 22px !important;
}

body .mg-contact .fluentform .ff-el-input--label {
	margin-bottom: 8px !important;
}

body .mg-contact .fluentform .ff-el-input--label label {
	font-family: inherit !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mg-papel) !important;
}

/* Texto de ayuda fijo, entre la etiqueta y el campo. */
body .mg-contact .fluentform .ff-el-help-message {
	margin: -4px 0 8px !important;
	font-size: 0.9375rem !important;
	font-style: normal !important;
	line-height: 1.45;
	color: var(--mg-papel) !important;
}

body .mg-contact .fluentform .ff-el-form-control {
	width: 100%;
	padding: 10px 0 12px !important;
	border: 0 !important;
	border-bottom: 1.5px solid color-mix(in srgb, var(--mg-papel) 70%, transparent) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: inherit !important;
	font-size: 1.1875rem !important;
	font-weight: 500;
	line-height: 1.35 !important;
	color: var(--mg-papel) !important;
	caret-color: var(--mg-papel);
	transition: border-color 0.25s var(--mg-ease);
}

body .mg-contact .fluentform textarea.ff-el-form-control {
	min-height: 5.2em;
	resize: vertical;
}

/* Sin asterisco: los campos que se pueden dejar vacíos dicen "(opcional)". */
body .mg-contact .fluentform .ff-el-input--label.ff-el-is-required label::after,
body .mg-contact .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	content: none !important;
}

body .mg-contact .fluentform .ff-el-form-control::placeholder {
	color: color-mix(in srgb, var(--mg-papel) 84%, var(--mg-acento)) !important;
	opacity: 1;
}

body .mg-contact .fluentform .ff-el-form-control:hover {
	border-bottom-color: var(--mg-papel) !important;
}

body .mg-contact .fluentform .ff-el-form-control:focus {
	outline: 2px solid var(--mg-papel) !important;
	outline-offset: 4px;
	border-bottom-color: var(--mg-papel) !important;
}

/* Errores: van en caja clara con texto negro para que se lean sobre el morado. */
body .mg-contact .fluentform .ff-el-is-error .ff-el-form-control {
	border-bottom-color: var(--mg-papel) !important;
	border-bottom-width: 3px !important;
}

body .mg-contact .fluentform .error.text-danger,
body .mg-contact .fluentform .ff-errors-in-stack .error {
	display: inline-block;
	margin-top: 8px !important;
	padding: 3px 8px;
	background: var(--mg-papel);
	font-size: 0.9375rem !important;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mg-tinta) !important;
}

body .mg-contact .fluentform .ff_submit_btn_wrapper {
	margin: 30px 0 0 !important;
}

body .mg-contact .fluentform .ff-btn-submit {
	padding: 0.95em 1.6em !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--mg-papel) !important;
	font-family: inherit !important;
	font-size: 1.0625rem !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	color: var(--mg-tinta) !important;
	cursor: pointer;
	transition: background-color 0.3s var(--mg-ease), color 0.3s var(--mg-ease);
}

/* El plugin baja la opacidad del botón al tocarlo; solo debe verse apagado mientras envía. */
body .mg-contact .fluentform .ff-btn-submit:not(.ff-working):not(:disabled) {
	opacity: 1 !important;
}

body .mg-contact .fluentform .ff-btn-submit:hover,
body .mg-contact .fluentform .ff-btn-submit:focus-visible {
	background: var(--mg-tinta) !important;
	color: var(--mg-papel) !important;
}

body .mg-contact .ff-message-success {
	margin: 0 !important;
	padding: 22px 0 0 !important;
	border: 0 !important;
	border-top: 1.5px solid var(--mg-papel) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: clamp(1.2rem, 1.8vw, 1.6rem);
	font-weight: 500;
	line-height: 1.25;
	color: var(--mg-papel) !important;
}

body .mg-contact__mail {
	font-size: 0.9375rem;
	line-height: 1.5;
	word-break: break-word;
}

body .mg-contact .wp-block-button__link {
	background: var(--mg-papel);
	color: var(--mg-tinta);
	font-size: 1.0625rem;
}

body .mg-contact .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--mg-tinta);
	color: var(--mg-papel);
}

/* ---------- Pie ---------- */

body .mg-footer {
	background: var(--mg-tinta);
	color: var(--mg-papel);
	padding-block: clamp(40px, 5vw, 72px) 32px;
	overflow: hidden;
}

body .mg-footer__mark {
	font-size: clamp(1.6rem, 8.8vw, 9.25rem);
	font-stretch: 125%;
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	margin-left: -0.04em;
}

body .mg-footer__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--mg-gap);
	margin-top: clamp(28px, 4vw, 56px);
	border-top: 1.5px solid var(--mg-grafito);
	padding-top: 20px;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--mg-humo);
}

body .mg-footer__row p {
	max-width: 48ch;
}

body .mg-footer__row p:last-child {
	justify-self: end;
	white-space: nowrap;
}

body .mg-footer__cookies {
	appearance: none;
	background: none;
	border: 0;
	padding: 0.5em 0;
	margin-block: -0.5em;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	cursor: pointer;
	transition: color 0.3s var(--mg-ease);
}

body .mg-footer__cookies:hover {
	color: var(--mg-papel);
}

/* ---------- Aviso de cookies ----------
   Franja fija al pie. Los dos botones pesan lo mismo y ninguno usa el morado,
   que queda reservado para "Agendar asesoría gratis". */

body .mg-consent {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px var(--mg-gap);
	padding: 18px var(--mg-gutter) max(18px, env(safe-area-inset-bottom));
	background: var(--mg-papel);
	color: var(--mg-tinta);
	border-top: 1.5px solid var(--mg-tinta);
	transform: translateY(100%);
	transition: transform 0.7s var(--mg-ease);
}

body .mg-consent[hidden] {
	display: none;
}

body .mg-consent--open {
	transform: none;
}

body .mg-consent__text {
	max-width: 68ch;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--mg-grafito);
}

body .mg-consent__text strong {
	font-weight: 700;
	color: var(--mg-tinta);
}

body .mg-consent__link {
	color: var(--mg-tinta);
	white-space: nowrap;
}

body .mg-consent__actions {
	display: flex;
	flex: none;
	gap: 12px;
}

body .mg-consent__btn {
	appearance: none;
	min-height: 44px;
	padding: 0 1.5em;
	border: 1.5px solid var(--mg-tinta);
	border-radius: 999px;
	background: var(--mg-tinta);
	color: var(--mg-papel);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s var(--mg-ease), color 0.3s var(--mg-ease), border-color 0.3s var(--mg-ease);
}

body .mg-consent__btn:hover {
	background: var(--mg-acento);
	border-color: var(--mg-acento);
}

body .mg-consent__btn--outline {
	background: transparent;
	color: var(--mg-tinta);
}

body .mg-consent__btn--outline:hover {
	background: var(--mg-tinta);
	border-color: var(--mg-tinta);
	color: var(--mg-papel);
}

/* ---------- Páginas interiores ---------- */

body .mg-page {
	padding: clamp(40px, 6vw, 96px) var(--mg-gutter) var(--mg-section);
	min-height: 60vh;
}

body .mg-page__title {
	font-size: clamp(2rem, 5vw, 4.5rem);
	font-stretch: 125%;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin-bottom: 0.6em;
}

body .mg-page .wp-block-post-content > * + *,
body .mg-page > * + * {
	margin-block-start: 1.1em;
}

/* Texto largo: política de privacidad y otras páginas de lectura. */
body .mg-page__lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.35;
	color: var(--mg-grafito);
}

body .mg-page .wp-block-post-content h2 {
	font-size: 1.5rem;
	letter-spacing: -0.01em;
	margin-block-start: 2.2em;
}

body .mg-page .wp-block-post-content :is(ul, ol) {
	padding-left: 1.2em;
}

body .mg-page .wp-block-post-content li + li {
	margin-top: 0.5em;
}

body .mg-page .wp-block-post-content code {
	font-size: 0.9em;
	overflow-wrap: anywhere;
}

/* ---------- Movimiento ----------
   Todo lo de este bloque depende de .mg-js, que solo se agrega si el
   navegador no pide reducir movimiento. Sin esa clase, la página se ve
   completa y quieta. */

/* Palabras que suben desde una máscara: titulares. */
body .mg-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: 0.16em 0.03em 0.08em;
	margin: -0.16em -0.03em -0.08em;
}

body .mg-w__i {
	display: inline-block;
	transform: translateY(112%);
	transition: transform 1.1s var(--mg-ease);
	transition-delay: calc(var(--i, 0) * 55ms);
}

body .mg-ready .mg-w__i,
body .mg-in .mg-w__i {
	transform: none;
}

/* Entrada del hero: el titular sube, el video se enfoca y el pie aparece. */
.mg-js .mg-hero:not(.mg-split) .mg-hero__title {
	opacity: 0;
}

.mg-js .mg-hero__video {
	opacity: 0;
	filter: blur(14px);
	transform: scale(1.05);
	transform-origin: 50% 100%;
	transition: opacity 1.6s var(--mg-ease) 0.15s, filter 1.6s var(--mg-ease) 0.15s, transform 2s var(--mg-ease) 0.15s;
}

.mg-js .mg-ready .mg-hero__video {
	opacity: 1;
	filter: blur(0);
	transform: none;
}

.mg-js .mg-hero__foot > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.9s var(--mg-ease), transform 0.9s var(--mg-ease);
}

.mg-js .mg-ready .mg-hero__foot > * {
	opacity: 1;
	transform: none;
	transition-delay: 0.75s;
}

.mg-js .mg-ready .mg-hero__foot > :nth-child(2) {
	transition-delay: 0.87s;
}

.mg-js .mg-ready .mg-hero__foot > :nth-child(3) {
	transition-delay: 0.99s;
}

/* Filas: el filete se dibuja de izquierda a derecha y el contenido sube. */
.mg-js :is(.mg-service, .mg-step, .mg-card, .mg-contact__foot)::before {
	transform: scaleX(0);
	transition: transform 1.2s var(--mg-ease);
}

.mg-js :is(.mg-service, .mg-step, .mg-card, .mg-contact__foot).mg-in::before {
	transform: none;
}

.mg-js :is(.mg-service, .mg-step, .mg-contact__foot) > *,
.mg-js .mg-card > :not(.wp-block-image),
.mg-js .mg-rise {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.9s var(--mg-ease) 0.12s, transform 0.9s var(--mg-ease) 0.12s;
}

.mg-js :is(.mg-service, .mg-step, .mg-contact__foot).mg-in > *,
.mg-js .mg-card.mg-in > :not(.wp-block-image),
.mg-js .mg-rise.mg-in {
	opacity: 1;
	transform: none;
}

.mg-js .mg-card:nth-child(2)::before,
.mg-js .mg-card:nth-child(2) > * {
	transition-delay: 0.14s;
}

/* Fotos: se descubren de abajo hacia arriba mientras la imagen se asienta. */
.mg-js :is(.mg-card .wp-block-image, .mg-process__photo) {
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1.4s var(--mg-ease);
}

.mg-js :is(.mg-card .wp-block-image, .mg-process__photo) img {
	transform: scale(1.14);
	transition: transform 1.8s var(--mg-ease);
}

.mg-js .mg-card.mg-in .wp-block-image,
.mg-js .mg-process__photo.mg-in {
	clip-path: inset(0);
}

.mg-js .mg-card.mg-in .wp-block-image img,
.mg-js .mg-process__photo.mg-in img {
	transform: none;
}

.mg-js .mg-card.mg-in:hover .wp-block-image img {
	transform: scale(1.035);
}

/* Propósito: las palabras se encienden a medida que se baja. */
.mg-js .mg-statement mark {
	color: inherit;
}

body .mg-sw {
	opacity: var(--o, 1);
	transition: opacity 0.25s linear;
}

/* Con "reducir movimiento" tampoco quedan transiciones de hover ni el zoom de las fotos. */
@media (prefers-reduced-motion: reduce) {
	body *,
	body *::before,
	body *::after {
		transition-duration: 0.01ms !important;
	}

	body .mg-card:hover .wp-block-image img {
		transform: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	body .mg-header__tag {
		display: none;
	}

	body .mg-entry,
	body .mg-statement,
	body .mg-reason__facts,
	body .mg-reason__note,
	body .mg-contact__who,
	body .mg-contact__action {
		grid-column: 1 / -1;
	}

	body .mg-entry {
		margin-bottom: 36px;
	}

	/* En "Hablemos" va primero la invitación con el formulario y después quiénes somos. */
	body .mg-contact__who {
		order: 1;
	}

	/* Separación con row-gap: WordPress anula los márgenes entre bloques hermanos. */
	body .mg-contact__foot {
		row-gap: 48px;
	}

	body .mg-reason {
		row-gap: 24px;
	}

	body .mg-reason__note {
		order: -1;
	}

	body .mg-section-head .mg-h2,
	body .mg-section-head__text {
		grid-column: 1 / -1;
	}

	body .mg-section-head__text {
		max-width: 48ch;
		margin-top: 20px;
		padding-bottom: 0;
	}

	body .mg-card {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 16px;
	}

	body .mg-card .wp-block-image {
		margin-bottom: 8px;
	}

	body .mg-process__photo {
		grid-column: 1 / 5;
	}

	body .mg-process .mg-h2,
	body .mg-steps {
		grid-column: 5 / -1;
	}
}

/* ---------- Teléfono ---------- */

@media (max-width: 720px) {
	:root {
		--mg-header: 60px;
	}

	body .mg-header__nav {
		display: none;
	}

	body .mg-display {
		font-stretch: 110%;
		line-height: 1;
	}

	body .mg-hero__inner {
		display: flex;
		flex-direction: column;
		min-height: 0;
		padding-bottom: 0;
	}

	body .mg-hero__inner::after {
		display: none;
	}

	body .mg-hero__title {
		font-size: clamp(1.75rem, 9vw, 3rem);
	}

	body .mg-hero .mg-hero__video {
		position: relative;
		order: 3;
		height: 300px;
		margin: -24px calc(var(--mg-gutter) * -1) 0;
	}

	body .mg-header__brand {
		font-size: 1rem;
		white-space: nowrap;
	}

	body .mg-header {
		gap: 12px;
	}

	body .mg-header__cta .wp-block-button__link {
		font-size: 0.8125rem;
		padding: 1.05em 1.1em;
		white-space: nowrap;
	}

	body .mg-hero .mg-hero__video video {
		object-fit: cover !important;
	}

	body .mg-hero__foot {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 18px;
	}

	body .mg-hero__lead {
		grid-row: auto;
	}

	body .mg-hero__foot .wp-block-buttons {
		justify-content: flex-start;
	}

	body .mg-hero__meta {
		font-size: 0.9375rem;
		text-align: left;
	}

	body .mg-reason__note,
	body .mg-contact__lead {
		line-height: 1.3;
	}

	body .mg-cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	body .mg-service {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 10px;
	}

	body .mg-service p:not(.mg-tag) {
		grid-column: 1;
		grid-row: auto;
	}

	body .mg-service .mg-tag {
		grid-row: auto;
		order: -1;
	}

	body .mg-process__inner {
		grid-template-rows: none;
		row-gap: 32px;
	}

	body .mg-process__photo,
	body .mg-process .mg-h2,
	body .mg-steps {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	body .mg-process .mg-h2 {
		order: -1;
	}

	body .mg-process__photo img {
		min-height: 0;
		aspect-ratio: 4 / 4.2;
	}

	body .mg-step {
		grid-template-columns: 2.5rem minmax(0, 1fr);
	}

	body .mg-footer__row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 12px;
	}

	body .mg-footer__row p:last-child {
		justify-self: start;
	}

	body .mg-contact__foot {
		padding-top: 24px;
	}

	body .mg-contact .fluentform textarea.ff-el-form-control {
		resize: none;
	}

	body .mg-consent {
		flex-direction: column;
		align-items: stretch;
		padding-top: 16px;
	}

	body .mg-consent__btn {
		flex: 1;
	}
}