/* =========================================================================
   MG Digital Madrid, portada premium
   Paleta tomada del logo real: grafito + laton ambar con degradado.
   El ambar se usa como LUZ (resplandor, barridos, cantos iluminados),
   no como adorno plano.
   ========================================================================= */

:root {
	/* Fondo grafito, con una pizca de croma calido hacia el tono del logo */
	--g-0:      oklch(0.145 0.008 72);
	--g-1:      oklch(0.185 0.010 72);
	--g-2:      oklch(0.232 0.011 72);
	--g-linea:  oklch(0.315 0.013 72);

	--tinta:    oklch(0.972 0.004 80);
	--tinta-2:  oklch(0.752 0.013 78);   /* 7,5:1 sobre --g-0 */
	--tinta-3:  oklch(0.605 0.014 78);   /* solo rotulos cortos */

	/* Laton */
	--br:       oklch(0.775 0.152 76);   /* = #EDA50D */
	--br-alto:  oklch(0.885 0.108 88);
	--br-hondo: oklch(0.628 0.128 58);
	--br-humo:  oklch(0.775 0.152 76 / 0.10);

	--papel:      oklch(0.966 0.003 80);
	--papel-2:    oklch(0.918 0.004 80);
	--papel-tint: oklch(0.215 0.010 72);
	--papel-mute: oklch(0.455 0.012 72);

	/* Escala z semantica */
	--z-base: 1;
	--z-fijo: 100;
	--z-menu: 200;
	--z-salto: 300;

	--r-s: 8px;
	--r-m: 14px;
	--r-l: 22px;

	--anc: 1240px;
	--pad: clamp(1.15rem, 4.5vw, 3.25rem);
	/* Alto real de la cabecera fija, medido en el navegador: 77px en escritorio
	   y 72 en movil. Lo usa el hero para separarse lo justo y no mas. */
	--cab-alto: 77px;

	--sal: cubic-bezier(0.16, 1, 0.3, 1);       /* ease-out-expo */
	--sal-q: cubic-bezier(0.22, 1, 0.36, 1);    /* ease-out-quint */
}

/* ---------- Reinicio acotado ---------- */

.mghp-html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

.mghp-body {
	margin: 0;
	background: var(--g-0);
	color: var(--tinta);
	font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
	line-height: 1.62;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.mghp-body *,
.mghp-body *::before,
.mghp-body *::after { box-sizing: border-box; }

/* ESTE RESET SE ESTABA COMIENDO TODA LA PAGINA. Escrito como
   `.mghp-body h1, .mghp-body p, ...` pesa (0,1,1): clase + elemento. Cualquier
   regla de las de abajo (`.mghp-tra__n { margin-bottom: .5rem }`) pesa (0,1,0)
   y PIERDE. Resultado: todos los margenes verticales que hay declarados en esta
   hoja no se aplicaban nunca y el unico aire entre un titulo y su texto era el
   medio-interlineado. De ahi que todo se viera pegado, en todos los bloques.
   Con :where() el selector pasa a pesar (0,0,1) y cualquier clase lo gana, que
   es como tiene que comportarse un reset. */
:where(.mghp-body) :is(h1, h2, h3, p, ul, ol, figure) { margin: 0; padding: 0; }

.mghp-body ul, .mghp-body ol { list-style: none; }

.mghp-body img, .mghp-body svg { display: block; max-width: 100%; }

/* :where() vale cero en especificidad, asi que cualquier regla de color
   posterior gana sin pelear. Sin esto ".mghp-body a" (0,1,1) pisaba a
   ".mghp-btn--brass" (0,1,0) y salia texto casi blanco sobre el ambar. */
:where(.mghp-body a) { color: inherit; text-decoration: none; }
:where(.mghp-body button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.mghp-body :focus-visible {
	outline: 2px solid var(--br);
	outline-offset: 3px;
	border-radius: 3px;
}

.mghp-in {
	width: 100%;
	max-width: var(--anc);
	margin-inline: auto;
	padding-inline: var(--pad);
}

.mghp-saltar {
	position: fixed;
	top: 0; left: 0;
	z-index: var(--z-salto);
	transform: translateY(-120%);
	background: var(--br);
	color: oklch(0.18 0.02 60);
	font-weight: 700;
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--r-s) 0;
	transition: transform 0.2s var(--sal);
}
.mghp-saltar:focus { transform: translateY(0); }

/* ---------- Tipografia ---------- */

.mghp-h2 {
	font-size: clamp(1.9rem, 1.15rem + 3.1vw, 3.5rem);
	font-weight: 800;
	font-stretch: 108%;
	line-height: 1.04;
	letter-spacing: -0.032em;
	text-wrap: balance;
}
.mghp-h2--osc { color: var(--papel-tint); }

/* ---------- Botones ---------- */

.mghp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.72rem 1.3rem;
	border-radius: 999px;
	font-weight: 650;
	font-size: 0.95rem;
	letter-spacing: -0.008em;
	white-space: nowrap;
	position: relative;
	isolation: isolate;
	transition: transform 0.35s var(--sal), box-shadow 0.35s var(--sal),
	            background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.mghp-btn--g { padding: 0.95rem 1.75rem; font-size: 1.02rem; }

.mghp-btn--brass {
	background: var(--br);
	color: oklch(0.19 0.025 58);
	box-shadow: 0 1px 0 oklch(0.95 0.06 90 / 0.5) inset,
	            0 8px 26px oklch(0.775 0.152 76 / 0.24);
}
.mghp-btn--brass:hover {
	background: var(--br-alto);
	transform: translateY(-2px);
	box-shadow: 0 1px 0 oklch(0.98 0.05 90 / 0.6) inset,
	            0 14px 38px oklch(0.775 0.152 76 / 0.36);
}
.mghp-btn--brass:active { transform: translateY(0); }

.mghp-btn--fant {
	background: transparent;
	color: var(--tinta);
	border: 1px solid var(--g-linea);
}
.mghp-btn--fant:hover {
	border-color: var(--br);
	color: var(--br);
	transform: translateY(-2px);
}

.mghp-btn--osc {
	background: oklch(0.17 0.018 62);
	color: var(--br-alto);
}
.mghp-btn--osc:hover {
	background: oklch(0.12 0.014 62);
	transform: translateY(-2px);
	box-shadow: 0 14px 34px oklch(0.15 0.02 60 / 0.32);
}

/* =========================================================================
   Cabecera
   ========================================================================= */

.mghp-cab {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--z-fijo);
	background: oklch(0.145 0.008 72 / 0);
	transition: background-color 0.4s var(--sal), backdrop-filter 0.4s var(--sal);
}
.mghp-cab.es-pegada {
	background: oklch(0.145 0.008 72 / 0.86);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
}

.mghp-cab__in {
	max-width: var(--anc);
	margin-inline: auto;
	padding: 0.9rem var(--pad);
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.mghp-cab__linea {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--g-linea) 22%, var(--g-linea) 78%, transparent);
	opacity: 0;
	transition: opacity 0.4s var(--sal);
	position: relative;
}
.mghp-cab.es-pegada .mghp-cab__linea { opacity: 1; }

.mghp-cab__linea i {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--p, 0%);
	background: linear-gradient(90deg, var(--br-hondo), var(--br));
	box-shadow: 0 0 12px oklch(0.775 0.152 76 / 0.7);
}

.mghp-marca {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	margin-right: auto;
	flex-shrink: 0;
}
.mghp-marca img { width: 34px; height: 34px; object-fit: contain; }
.mghp-marca__t {
	font-size: 1.02rem;
	font-weight: 500;
	font-stretch: 96%;
	letter-spacing: -0.015em;
	color: var(--tinta-2);
}
.mghp-marca__t b { color: var(--tinta); font-weight: 800; }

.mghp-nav { display: flex; gap: 0.35rem; }
.mghp-nav a {
	padding: 0.5rem 0.85rem;
	border-radius: 999px;
	font-size: 0.95rem;
	color: var(--tinta-2);
	position: relative;
	transition: color 0.25s ease, background-color 0.25s ease;
}
.mghp-nav a:hover { color: var(--tinta); background: oklch(1 0 0 / 0.055); }

.mghp-cab__acc { display: flex; align-items: center; gap: 0.75rem; }

.mghp-burger {
	display: none;
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 1px solid var(--g-linea);
	position: relative;
}
.mghp-burger span {
	position: absolute;
	left: 12px;
	width: 18px; height: 1.5px;
	background: var(--tinta);
	border-radius: 2px;
	transition: transform 0.35s var(--sal), opacity 0.2s ease;
}
.mghp-burger span:nth-child(1) { top: 18px; }
.mghp-burger span:nth-child(2) { top: 24px; }
.mghp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.mghp-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.mghp-menu {
	position: fixed;
	/* Con "auto" abajo el panel solo medía lo que los enlaces y el hero se veía
	   por debajo. Cubre hasta el borde inferior y desplaza si no cabe. */
	inset: 64px 0 0 0;
	z-index: var(--z-menu);
	background: var(--g-0);
	border-bottom: 1px solid var(--g-linea);
	padding: 1rem var(--pad) 2.5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.mghp-menu[hidden] { display: none; }
.mghp-menu nav { display: flex; flex-direction: column; }
.mghp-menu a {
	padding: 0.95rem 0;
	font-size: 1.22rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	border-bottom: 1px solid oklch(1 0 0 / 0.07);
}
.mghp-menu__wa { color: var(--br); border-bottom: 0 !important; }

/* =========================================================================
   Hero
   ========================================================================= */

/* El hueco entre la cabecera fija y el "Navalcarnero, Madrid" dependia de la
   altura de la pantalla: con 100svh y el contenido centrado, todo lo que sobra
   se reparte arriba y abajo, asi que en un monitor de 1080 el hueco se iba a
   144px (a 900 eran 54). Se topa el min-height para que en pantallas altas el
   hero deje de estirarse, y el padding de arriba se calcula desde la altura real
   de la cabecera, no a ojo. */
.mghp-hero {
	position: relative;
	min-height: min(100svh, 54rem);
	display: flex;
	align-items: center;
	padding: calc(var(--cab-alto) + 1rem) 0 5rem;
	overflow: hidden;
	isolation: isolate;
}

/* La luz de laton. Sigue al puntero y respira sola. */
.mghp-hero__luz {
	position: absolute;
	inset: -30%;
	z-index: -2;
	background:
		radial-gradient(46% 42% at var(--mx, 62%) var(--my, 26%),
			oklch(0.775 0.152 76 / 0.30) 0%,
			oklch(0.70 0.14 68 / 0.13) 34%,
			transparent 68%),
		radial-gradient(58% 50% at 12% 88%,
			oklch(0.628 0.128 58 / 0.16) 0%,
			transparent 62%);
	filter: blur(28px);
	animation: mghp-respira 13s ease-in-out infinite alternate;
	transition: background-position 0.6s var(--sal);
}

@keyframes mghp-respira {
	from { transform: scale(1) translate3d(0, 0, 0); opacity: 0.88; }
	to   { transform: scale(1.13) translate3d(1.5%, -2%, 0); opacity: 1; }
}

.mghp-hero__rejilla {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(oklch(1 0 0 / 0.028) 1px, transparent 1px),
		linear-gradient(90deg, oklch(1 0 0 / 0.028) 1px, transparent 1px);
	background-size: 74px 74px;
	mask-image: radial-gradient(78% 68% at 50% 42%, #000 20%, transparent 82%);
	-webkit-mask-image: radial-gradient(78% 68% at 50% 42%, #000 20%, transparent 82%);
}

.mghp-hero__in {
	width: 100%;
	max-width: var(--anc);
	margin-inline: auto;
	padding-inline: var(--pad);
	display: grid;
	grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}

/* La pila de capturas reales. Tres webs en produccion, en perspectiva, con
   paralaje ligado al puntero. Es la prueba mas rapida de lo que hacemos. */
/* La proporcion se calcula, no se adivina: la tarjeta baja arranca al 40% de
   la altura y mide 0,3875 del ancho, asi que con 3/2 nunca se sale de la caja
   por mucho que cambie el viewport. Con min-height fija se desbordaba. */
.mghp-hero__vis {
	position: relative;
	perspective: 1400px;
	aspect-ratio: 3 / 2;
}

.mghp-pila {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform: rotateY(calc(var(--px, 0) * -7deg)) rotateX(calc(var(--py, 0) * 5deg));
	transition: transform 0.9s var(--sal);
}

.mghp-pila__c {
	position: absolute;
	border-radius: var(--r-m);
	overflow: hidden;
	border: 1px solid oklch(1 0 0 / 0.13);
	background: var(--g-1);
	box-shadow: 0 30px 70px oklch(0.06 0.01 70 / 0.62),
	            0 2px 0 oklch(1 0 0 / 0.06) inset;
	will-change: transform;
}
.mghp-pila__c img { width: 100%; height: auto; }

.mghp-pila__c--1 {
	width: 72%;
	left: 0;
	top: 12%;
	z-index: 3;
	transform: translate3d(0, calc(var(--py, 0) * 14px), 60px);
	transition: transform 0.9s var(--sal);
}
.mghp-pila__c--2 {
	width: 56%;
	right: 0;
	top: 45%;
	z-index: 2;
	transform: translate3d(0, calc(var(--py, 0) * -10px), 20px);
	transition: transform 0.9s var(--sal);
}
.mghp-pila__c--3 {
	width: 46%;
	right: 0;
	top: 0;
	z-index: 1;
	opacity: 0.82;
	transform: translate3d(0, calc(var(--py, 0) * -18px), -30px);
	transition: transform 0.9s var(--sal);
}

/* Un canto ambar por debajo de la pila: la luz de la marca tocando el producto */
.mghp-hero__vis::after {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: -6%;
	height: 140px;
	border-radius: 50%;
	background: radial-gradient(50% 50% at 50% 50%, oklch(0.775 0.152 76 / 0.30), transparent 70%);
	filter: blur(26px);
	z-index: -1;
}

.mghp-hero__sitio {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.88rem;
	color: var(--tinta-2);
	margin-bottom: 1.6rem;
	padding: 0.4rem 0.95rem 0.4rem 0.7rem;
	border: 1px solid var(--g-linea);
	border-radius: 999px;
	background: oklch(1 0 0 / 0.028);
}
.mghp-hero__sitio::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--br);
	box-shadow: 0 0 0 3px oklch(0.775 0.152 76 / 0.22);
	animation: mghp-pulso 2.6s ease-in-out infinite;
}
@keyframes mghp-pulso {
	0%, 100% { box-shadow: 0 0 0 3px oklch(0.775 0.152 76 / 0.22); }
	50%      { box-shadow: 0 0 0 7px oklch(0.775 0.152 76 / 0.03); }
}

.mghp-hero__t {
	font-size: clamp(2.45rem, 1.15rem + 5.2vw, 4.6rem);
	font-weight: 850;
	font-stretch: 112%;
	line-height: 0.98;
	letter-spacing: -0.038em;
	max-width: 17ch;
	margin-bottom: 1.9rem;
}
/* Sin esto la primera linea parte en "...la / web." y deja huerfana una palabra */
.mghp-l { display: block; text-wrap: balance; }
.mghp-l--2 { color: var(--br); }
.mghp-w { display: inline-block; }

.mghp-hero__d {
	max-width: 60ch;
	font-size: clamp(1.02rem, 0.97rem + 0.34vw, 1.19rem);
	color: var(--tinta-2);
	text-wrap: pretty;
	margin-bottom: 2.4rem;
}

.mghp-hero__acc {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-bottom: 1.5rem;
}

.mghp-hero__tel { font-size: 0.95rem; color: var(--tinta-3); }
.mghp-hero__tel a {
	color: var(--tinta-2);
	border-bottom: 1px solid var(--g-linea);
	padding-bottom: 1px;
	transition: color 0.25s ease, border-color 0.25s ease;
}
.mghp-hero__tel a:hover { color: var(--br); border-color: var(--br); }

.mghp-hero__baja {
	position: absolute;
	left: 50%;
	bottom: 2.1rem;
	translate: -50% 0;
	width: 26px; height: 42px;
	border: 1px solid var(--g-linea);
	border-radius: 999px;
	display: grid;
	place-items: start center;
	padding-top: 8px;
}
.mghp-hero__baja span {
	width: 3px; height: 8px;
	border-radius: 2px;
	background: var(--br);
	animation: mghp-baja 1.9s var(--sal) infinite;
}
@keyframes mghp-baja {
	0%   { transform: translateY(0);    opacity: 0; }
	22%  { opacity: 1; }
	72%  { transform: translateY(15px); opacity: 0; }
	100% { transform: translateY(15px); opacity: 0; }
}

/* =========================================================================
   Secciones genericas
   ========================================================================= */

.mghp-sec { padding: clamp(4.5rem, 9vw, 8.5rem) 0; }

.mghp-sec__cab { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.mghp-sec__d {
	margin-top: 1.45rem;
	font-size: 1.08rem;
	color: var(--tinta-2);
	max-width: 54ch;
	text-wrap: pretty;
}

/* Aviso de plazo de la cabecera de precios. El "48 h" grande a la izquierda hace
   de ancla visual: quien viene barriendo la pagina en vertical lo pilla sin leer
   la frase, que es justo lo que tiene que pasar con el mejor argumento que hay
   en la seccion. El filete de laton a la izquierda lo separa del parrafo gris de
   arriba sin necesidad de una caja completa, que pesaria demasiado. */
.mghp-plazo {
	display: flex;
	align-items: center;
	gap: clamp(0.85rem, 1.6vw, 1.15rem);
	width: fit-content;
	max-width: 100%;
	margin-top: 1.75rem;
	padding: 0.9rem 1.25rem 0.9rem 1.1rem;
	border: 1px solid oklch(0.775 0.152 76 / 0.3);
	border-left-width: 3px;
	border-radius: var(--r-m);
	background: var(--br-humo);
}
.mghp-plazo__f {
	flex: 0 0 auto;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 800;
	font-stretch: 104%;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--br);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.mghp-plazo__t {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--tinta-2);
	/* balance, no pretty: son dos lineas justas y pretty solo evita la viuda de
	   una palabra, dejando la segunda linea con "las fotos." suelto. */
	text-wrap: balance;
}
.mghp-plazo__t strong { color: var(--tinta); font-weight: 650; }

/* =========================================================================
   Servicios: indice desplegable, no rejilla de tarjetas.

   Cada fila es un BOTON que abre su ficha. Antes la fila era un <a href> al
   servicio y la ficha solo asomaba con el raton encima: al pulsar te sacaba
   de la pagina en vez de abrirse, y en tactil no habia gesto ninguno. El
   enlace al servicio vive ahora dentro de la ficha abierta, que es donde no
   compite con el gesto de desplegar.
   ========================================================================= */

.mghp-serv { border-top: 1px solid oklch(1 0 0 / 0.07); }

/* Un unico sitio para el ancho de la columna del numero y su separacion, que
   se usa dos veces: en la fila y en la sangria de la ficha, para que el texto
   del panel caiga exactamente bajo el nombre del servicio. */
.mghp-idx {
	--num: 2.2rem;
	--sep: clamp(0.85rem, 1.9vw, 1.6rem);
	border-top: 1px solid oklch(1 0 0 / 0.09);
}

.mghp-idx__f {
	position: relative;
	border-bottom: 1px solid oklch(1 0 0 / 0.09);
	transition: background-color 0.5s var(--sal);
}
/* Filete de luz que se dibuja de izquierda a derecha sobre la fila abierta.
   Marca cual esta activa sin meter un bloque de color que rompa la lista. */
.mghp-idx__f::before {
	content: "";
	position: absolute;
	left: 0; top: -1px;
	width: 0; height: 1px;
	background: linear-gradient(90deg, var(--br), transparent);
	transition: width 0.75s var(--sal);
}
.mghp-idx__f.es-abierto::before { width: 100%; }
.mghp-idx__f.es-abierto {
	background: linear-gradient(180deg, oklch(1 0 0 / 0.03), transparent 62%);
}

.mghp-idx__h { margin: 0; font: inherit; }

/* Reset a conciencia: los temas del sitio (Divi, Astra) ponen relleno, borde
   y radio sobre el elemento <button>, no sobre una clase, asi que un boton
   propio sin desarmar sale con la caja del tema. */
.mghp-idx__b {
	-webkit-appearance: none;
	appearance: none;
	display: grid;
	grid-template-columns: var(--num) minmax(0, 1fr) minmax(0, 0.9fr) auto;
	align-items: center;
	gap: var(--sep);
	width: 100%;
	margin: 0;
	padding: clamp(1.35rem, 2.3vw, 1.95rem) 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font: inherit;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	transition: padding-left 0.55s var(--sal);
}
.mghp-idx__b:focus-visible { outline: 2px solid var(--br); outline-offset: 3px; }

@media (hover: hover) and (min-width: 861px) {
	.mghp-idx__b:hover { padding-left: 1.1rem; }
}

.mghp-idx__num {
	font-size: 0.76rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.12em;
	color: var(--tinta-3);
	transition: color 0.35s ease;
}
.mghp-idx__b:hover .mghp-idx__num,
.mghp-idx__f.es-abierto .mghp-idx__num { color: var(--br); }

.mghp-idx__n {
	font-size: clamp(1.28rem, 0.95rem + 1.32vw, 1.95rem);
	font-weight: 750;
	font-stretch: 104%;
	letter-spacing: -0.026em;
	line-height: 1.12;
	transition: color 0.3s ease;
}
.mghp-idx__b:hover .mghp-idx__n,
.mghp-idx__f.es-abierto .mghp-idx__n { color: var(--br); }

.mghp-idx__d {
	color: var(--tinta-2);
	font-size: 0.99rem;
	line-height: 1.45;
	text-wrap: pretty;
	transition: opacity 0.45s ease;
}
/* Con la ficha abierta la frase corta ya la ha dicho el texto largo: se apaga
   en vez de desaparecer, para que la fila no cambie de alto al abrirse. */
.mghp-idx__f.es-abierto .mghp-idx__d { opacity: 0.4; }

/* Un mas que gira hasta quedarse en menos. La flecha diagonal de antes decia
   "te vas de aqui", que era justo la promesa equivocada. */
.mghp-idx__sig {
	position: relative;
	justify-self: end;
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 1px solid var(--g-linea);
	transition: border-color 0.35s ease, background-color 0.35s ease;
}
.mghp-idx__sig i {
	position: absolute;
	left: 50%; top: 50%;
	width: 14px; height: 1.6px;
	margin: -0.8px 0 0 -7px;
	border-radius: 2px;
	background: var(--tinta-2);
	transition: transform 0.6s var(--sal), background-color 0.35s ease;
}
.mghp-idx__sig i:last-child { transform: rotate(90deg); }
.mghp-idx__b:hover .mghp-idx__sig { border-color: var(--br); }
.mghp-idx__b:hover .mghp-idx__sig i { background: var(--br); }
.mghp-idx__f.es-abierto .mghp-idx__sig { background: var(--br); border-color: var(--br); }
.mghp-idx__f.es-abierto .mghp-idx__sig i {
	background: oklch(0.19 0.025 58);
	transform: rotate(180deg);
}
.mghp-idx__f.es-abierto .mghp-idx__sig i:last-child { transform: rotate(180deg); }

/* Despliegue sin animar un alto explicito: 0fr a 1fr sobre una rejilla.
   Un unico hijo (.mghp-idx__env) a proposito: con dos, el segundo cae en una
   fila implicita que no colapsa del todo y deja pixeles muertos por fila.

   Abierto por defecto: si el JS no corre, los cinco paneles se leen enteros.
   El plegado entero cuelga de .mghp-js. */
.mghp-idx__mas { display: grid; grid-template-rows: 1fr; }
.mghp-idx__env { display: block; overflow: hidden; min-height: 0; }

.mghp-js .mghp-idx__mas {
	grid-template-rows: 0fr;
	opacity: 0;
	/* visibility, no solo opacidad: dentro hay un enlace real y no debe poder
	   tabularse ni leerse mientras la ficha esta cerrada. */
	visibility: hidden;
	transition: grid-template-rows 0.6s var(--sal), opacity 0.3s ease,
	            visibility 0s linear 0.6s;
}
.mghp-js .mghp-idx__f.es-abierto .mghp-idx__mas {
	grid-template-rows: 1fr;
	opacity: 1;
	visibility: visible;
	transition: grid-template-rows 0.6s var(--sal), opacity 0.5s ease 0.12s,
	            visibility 0s;
}

/* Dos columnas de texto: el argumento a la izquierda, lo que entra en el
   servicio a la derecha. Aqui hubo una captura y era un error: eran las cinco
   mismas imagenes de la seccion de trabajos, dos pantallas mas arriba, y la
   pagina parecia repetirse. */
.mghp-idx__cu {
	display: grid;
	/* Mismas columnas que la fila de arriba (menos la del numero, que se salva
	   con la sangria): asi el texto cae bajo el nombre del servicio y "Que
	   incluye" bajo la frase corta. La seccion entera queda con un solo ritmo
	   vertical en vez de dos rejillas que casi coinciden. La tercera columna
	   esta vacia: reserva el hueco del boton de mas/menos. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) 42px;
	gap: var(--sep);
	align-items: start;
	/* El relleno va aqui dentro, nunca en el elemento que colapsa: si fuera
	   fuera, la fila cerrada seguiria midiendo esos pixeles. */
	padding: 0.25rem 0 clamp(1.9rem, 3vw, 2.75rem);
	padding-left: calc(var(--num) + var(--sep));
}

.mghp-idx__x {
	margin: 0;
	max-width: 52ch;
	color: var(--tinta-2);
	font-size: 1.06rem;
	line-height: 1.66;
	text-wrap: pretty;
}

/* Ficha tecnica, no pastillas de colores. Las pastillas hacen que cuatro
   entregables concretos parezcan etiquetas decorativas; en filas con filete
   se leen como lo que son: lo que entra en el precio. */
.mghp-idx__inc { border-top: 1px solid oklch(1 0 0 / 0.13); padding-top: 0.9rem; }
.mghp-idx__rot {
	margin: 0 0 0.35rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tinta-3);
}
.mghp-idx__et { display: block; }
.mghp-idx__et li {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	padding: 0.62rem 0;
	font-size: 0.95rem;
	line-height: 1.35;
	color: var(--tinta);
	border-bottom: 1px solid oklch(1 0 0 / 0.07);
}
.mghp-idx__et li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Guion de laton en vez de icono: la seccion entera esta hecha de filetes y
   un check redondo aqui seria un cuerpo extrano. */
.mghp-idx__et li::before {
	content: "";
	flex: 0 0 10px;
	height: 1px;
	background: var(--br);
	transform: translateY(-0.32em);
}

/* El precio estuvo aqui y se ha ido a su propia seccion. Dentro de un
   desplegable una tarifa no dice nada: para saber si 600 es mucho hay que
   cerrar esta ficha, abrir la siguiente y acordarse de la cifra anterior.
   Un precio solo significa algo al lado de los demas. */


/* =========================================================================
   Clientes: unica banda clara de la pagina.
   Los logos son de polaridad y calidad muy dispares (una placa institucional
   amarilla, escudos oscuros, monogramas, un trazo azul claro); sobre negro
   la mitad desapareceria, por eso la banda es de papel.
   Se unifican en monocromo A PLENA FUERZA. El gris al 62% de opacidad de
   antes los dejaba a todos en un borron y, peor, transmitia que la lista
   de clientes da apuro. El color vuelve al pasar el raton.
   ========================================================================= */

.mghp-cli {
	background: var(--papel);
	color: var(--papel-tint);
	overflow: hidden;
	padding: clamp(3rem, 5vw, 4.75rem) 0;
}
/* Rotulo de banda, no titular de seccion: los h2 de la pagina van a 3,5rem y
   aqui aplastarian una franja que solo tiene 300 px de alto. El nivel semantico
   se mantiene (la seccion necesitaba un encabezado: no tenia ninguno). */
.mghp-cli__cab { margin-bottom: clamp(1.6rem, 2.8vw, 2.4rem); }
.mghp-cli__t {
	font-size: clamp(1.02rem, 0.97rem + 0.24vw, 1.16rem);
	font-weight: 700;
	letter-spacing: -0.012em;
	line-height: 1.2;
	color: var(--papel-tint);
}
.mghp-cli__d {
	margin-top: 0.6rem;
	color: var(--papel-mute);
	font-size: clamp(0.98rem, 0.94rem + 0.24vw, 1.1rem);
	max-width: 64ch;
	text-wrap: pretty;
}

/* El filete va en el contenedor exterior y el desvanecido en el interior:
   asi las dos lineas cruzan la pagina enteras y solo se difuminan las marcas
   al llegar a los bordes. Con la mascara en el mismo elemento, las lineas se
   desvanecian tambien y la banda perdia el remate. */
.mghp-marq {
	/* Altura optica de referencia; cada marca la escala con su propio --e. */
	--h: clamp(37px, 3.95vw, 50px);
	/* Celda de ancho fijo: es lo que convierte la fila en un registro ordenado
	   en vez de logos flotando a distancias distintas. */
	--celda: clamp(160px, 16vw, 208px);
	position: relative;
	border-top: 1px solid var(--papel-2);
	border-bottom: 1px solid var(--papel-2);
}
.mghp-marq__v {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mghp-marq__p {
	display: flex;
	width: max-content;
	animation: mghp-desliza 72s linear infinite;
}
.mghp-marq:hover .mghp-marq__p { animation-play-state: paused; }
/* Un cuarto exacto: es el ancho de una copia entera de la lista, asi que el
   salto ocurre en un fotograma identico al de partida y no se ve la costura.
   Si se anaden o quitan clientes, el porcentaje NO cambia: lo que manda es el
   numero de copias del bucle de la plantilla. */
@keyframes mghp-desliza {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-25%, 0, 0); }
}

.mghp-marq__i {
	flex: 0 0 var(--celda);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	padding: clamp(1.5rem, 2.4vw, 2.1rem) 0.85rem;
	border-right: 1px solid var(--papel-2);
	transition: background-color 0.35s ease;
}
/* Caja de altura fija: todas las marcas comparten eje vertical sea cual sea
   su proporcion. La altura de dentro la pone --e, no una altura comun. */
.mghp-marq__m {
	display: grid;
	place-items: center;
	height: calc(var(--h) * 1.2);
}
.mghp-marq__m img {
	height: calc(var(--h) * var(--e, 1));
	width: auto;
	filter: grayscale(1) contrast(var(--k, 1)) brightness(var(--t, 1));
	transition: filter 0.45s ease;
}
.mghp-marq__n {
	font-size: clamp(0.71rem, 0.685rem + 0.11vw, 0.77rem);
	font-weight: 500;
	letter-spacing: 0.012em;
	line-height: 1.15;
	white-space: nowrap;
	color: var(--papel-mute);
	transition: color 0.3s ease;
}
/* Al pasar el raton se ilumina la celda entera y la marca recupera su color.
   Sin saltos ni escalados: la fila es un registro, no una galeria. */
.mghp-marq__i:hover { background-color: oklch(0.938 0.004 80); }
.mghp-marq__i:hover .mghp-marq__m img { filter: none; }
.mghp-marq__i:hover .mghp-marq__n { color: var(--papel-tint); }

/* =========================================================================
   Precios

   Tres tarjetas comparables y una banda para lo que no lleva tarifa.

   Lo que NO se hace aqui: levantar la tarjeta recomendada con transform. El
   sistema de aparicion de la pagina (.mghp-rev) ya escribe transform sobre
   estos mismos elementos y con mas peso de selector, asi que cualquier
   translate de hover o de destacado se lo comeria el reveal. La tarjeta
   destacada crece con margen negativo y relleno compensado: sube de verdad,
   sin pelearse con la animacion y sin desalinear su contenido respecto a las
   otras dos.
   ========================================================================= */

.mghp-tar { border-top: 1px solid oklch(1 0 0 / 0.07); }

.mghp-planes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.9rem, 1.5vw, 1.4rem);
}

.mghp-plan {
	--pad-v: clamp(1.6rem, 2.2vw, 2.15rem);
	--sube: 14px;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	padding: var(--pad-v) clamp(1.45rem, 2vw, 2rem);
	border: 1px solid oklch(1 0 0 / 0.10);
	border-radius: var(--r-l);
	background: var(--g-1);
	transition: border-color 0.4s var(--sal), background-color 0.4s var(--sal),
	            box-shadow 0.5s var(--sal);
}

/* Sube y engorda a la vez: el relleno extra devuelve el contenido a la misma
   altura que el de las tarjetas vecinas, asi que la fila de precios y la de
   botones siguen leyendose como una linea recta de lado a lado. */
.mghp-plan--dest {
	margin-block: calc(var(--sube) * -1);
	padding-block: calc(var(--pad-v) + var(--sube));
	border-color: oklch(0.775 0.152 76 / 0.45);
	background: oklch(0.208 0.026 68);
	box-shadow: 0 26px 64px -26px oklch(0.775 0.152 76 / 0.30);
}

@media (hover: hover) {
	.mghp-plan:hover { border-color: oklch(1 0 0 / 0.22); background: var(--g-2); }
	.mghp-plan--dest:hover {
		border-color: var(--br);
		background: oklch(0.228 0.032 68);
		box-shadow: 0 30px 72px -26px oklch(0.775 0.152 76 / 0.42);
	}
}

/* A caballo del filete superior. Absoluta a proposito: si ocupase una fila de
   la rejilla, esta tarjeta empezaria mas abajo que las otras dos. */
.mghp-plan__r {
	position: absolute;
	top: 0;
	left: clamp(1.45rem, 2vw, 2rem);
	transform: translateY(-50%);
	margin: 0;
	padding: 0.34rem 0.8rem;
	border-radius: 999px;
	background: var(--br);
	color: oklch(0.19 0.025 58);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.mghp-plan__n {
	margin: 0 0 0.45rem;
	font-size: clamp(1.18rem, 1.05rem + 0.4vw, 1.38rem);
	font-weight: 750;
	font-stretch: 104%;
	letter-spacing: -0.024em;
	line-height: 1.15;
}
/* Dos lineas reservadas: las frases miden distinto y sin esto cada precio
   caeria a una altura, que es justo lo que arruina un comparador. */
.mghp-plan__d {
	margin: 0 0 1.5rem;
	min-height: calc(2 * 1.55em);
	color: var(--tinta-2);
	font-size: 0.97rem;
	line-height: 1.55;
	text-wrap: pretty;
}

.mghp-plan__c {
	display: flex;
	align-items: baseline;
	gap: 0.3rem;
	margin: 0 0 0.95rem;
	font-variant-numeric: tabular-nums;
}
.mghp-plan__cn {
	font-size: clamp(2.7rem, 2.05rem + 2vw, 3.7rem);
	font-weight: 800;
	font-stretch: 106%;
	letter-spacing: -0.038em;
	line-height: 0.92;
	color: var(--tinta);
}
.mghp-plan__ce {
	font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem);
	font-weight: 650;
	color: var(--tinta-2);
}
.mghp-plan__ci {
	margin-left: 0.3rem;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--tinta-2);
	white-space: nowrap;
}
/* El laton se reserva para la recomendada. Si las tres cifras fueran de
   laton, el color dejaria de significar nada. */
.mghp-plan--dest .mghp-plan__cn,
.mghp-plan--dest .mghp-plan__ce { color: var(--br); }

/* Plazo de entrega, justo debajo de la cifra. Va en las tres tarjetas, asi que
   la fila de precios y la de botones se siguen leyendo como una linea recta.
   `width: fit-content` porque el padre es una rejilla de una columna y sin ello
   la pastilla se estiraria de lado a lado y dejaria de parecer una pastilla. */
.mghp-plan__p {
	display: inline-flex;
	align-items: center;
	gap: 0.44rem;
	width: fit-content;
	margin: 0 0 1.4rem;
	padding: 0.34rem 0.72rem 0.34rem 0.6rem;
	border: 1px solid oklch(0.775 0.152 76 / 0.28);
	border-radius: 999px;
	background: var(--br-humo);
	color: var(--br);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.004em;
	line-height: 1.2;
}
/* Medida explicita: el tema padre mete su propio dimensionado a los svg sueltos
   y sin esto el reloj sale de 4 px. */
.mghp-plan__pi {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	opacity: 0.85;
}
.mghp-plan--dest .mghp-plan__p {
	border-color: oklch(0.775 0.152 76 / 0.5);
	background: oklch(0.775 0.152 76 / 0.16);
}

/* El borde transparente iguala la altura con la del boton fantasma, que si lo
   lleva. Sin esto el boton de laton mide 2 px menos y la lista de la tarjeta
   destacada arranca 2 px por debajo de las otras dos: invisible de uno en uno,
   evidente cuando las tres estan al lado. */
.mghp-plan__b { width: 100%; margin-bottom: 1.6rem; }
.mghp-plan__b.mghp-btn--brass { border: 1px solid transparent; }

/* Mismo guion de laton que la ficha del servicio: las dos secciones hablan de
   lo mismo y tienen que sonar igual. */
.mghp-plan__e {
	display: block;
	margin: 0;
	padding: 0;
	border-top: 1px solid oklch(1 0 0 / 0.11);
}
.mghp-plan__e li {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	padding: 0.6rem 0;
	font-size: 0.93rem;
	line-height: 1.4;
	color: var(--tinta);
	border-bottom: 1px solid oklch(1 0 0 / 0.07);
}
.mghp-plan__e li:last-child { border-bottom: 0; padding-bottom: 0; }
.mghp-plan__e li::before {
	content: "";
	flex: 0 0 10px;
	height: 1px;
	background: var(--br);
	transform: translateY(-0.32em);
}

/* El plan sin cifra cambia de forma, no solo de contenido. */
.mghp-medida {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1.75rem, 3vw, 3.5rem);
	align-items: center;
	margin-top: clamp(1.75rem, 2.8vw, 2.5rem);
	padding: clamp(1.7rem, 2.6vw, 2.5rem);
	border: 1px solid oklch(1 0 0 / 0.09);
	border-radius: var(--r-l);
	background:
		radial-gradient(120% 200% at 92% 50%, oklch(0.775 0.152 76 / 0.08), transparent 62%),
		var(--g-1);
}
.mghp-medida__n {
	margin: 0 0 0.65rem;
	font-size: clamp(1.28rem, 1.05rem + 0.75vw, 1.65rem);
	font-weight: 750;
	font-stretch: 104%;
	letter-spacing: -0.026em;
	line-height: 1.14;
}
.mghp-medida__d {
	margin: 0;
	max-width: 64ch;
	color: var(--tinta-2);
	font-size: 1rem;
	line-height: 1.62;
	text-wrap: pretty;
}
.mghp-medida__e {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem 1.6rem;
	margin: 1.15rem 0 0;
	padding: 0;
}
.mghp-medida__e li {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	font-size: 0.9rem;
	color: var(--tinta);
}
.mghp-medida__e li::before {
	content: "";
	flex: 0 0 10px;
	height: 1px;
	background: var(--br);
	transform: translateY(-0.32em);
}
.mghp-medida__acc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}
.mghp-medida__c {
	margin: 0;
	font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.85rem);
	font-weight: 750;
	font-stretch: 104%;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--br);
}

/* Esto no es letra pequeña de las de esconder: que el alojamiento vaya aparte
   cambia la cuenta final y quien lo lee antes de escribir no se lleva despues
   una sorpresa. Va en el gris de leer, no en el de disimular. */
.mghp-tar__nota {
	margin: clamp(1.5rem, 2.5vw, 2.25rem) 0 0;
	max-width: 62ch;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--tinta-2);
}

/* =========================================================================
   Proceso
   ========================================================================= */

.mghp-proc { background: var(--g-1); }

.mghp-pasos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(1.75rem, 3vw, 2.75rem);
}

/* Columna flexible para poder anclar la etiqueta de compromiso abajo: los cuatro
   pasos tienen descripciones de distinto largo y, si la pastilla va justo detras
   del texto, las cuatro quedan a alturas distintas y la fila se ve descuadrada. */
.mghp-paso { position: relative; padding-top: 2.1rem; display: flex; flex-direction: column; }
.mghp-paso::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: var(--g-linea);
}
.mghp-paso::after {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	height: 1px;
	width: 0;
	background: var(--br);
	box-shadow: 0 0 10px oklch(0.775 0.152 76 / 0.6);
	transition: width 0.9s var(--sal);
	transition-delay: calc(var(--d, 0) * 110ms);
}
.mghp-paso.es-visible::after { width: 100%; }

.mghp-paso__n {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--br);
	margin-bottom: 0.85rem;
	letter-spacing: 0.02em;
}
.mghp-paso__t {
	font-size: 1.22rem;
	font-weight: 700;
	font-stretch: 102%;
	letter-spacing: -0.018em;
	margin-bottom: 0.6rem;
}
/* El auto se come el sobrante de la tarjeta, asi la pastilla baja al pie sin
   perder su margen minimo de 0.9rem cuando el texto ya llena la altura. */
.mghp-paso__d { color: var(--tinta-2); font-size: 0.99rem; text-wrap: pretty; margin-bottom: auto; }

/* =========================================================================
   Llamada final: el laton toma toda la superficie
   ========================================================================= */

/* Mismo respiro vertical que .mghp-sec (8.5rem, no 8rem). El degradado va a
   sangre y ya destaca solo; si ademas la seccion es 8 px mas baja que todas
   las demas, el final de la pagina se lee ligeramente apretado sin que se
   sepa por que. */
.mghp-cta {
	position: relative;
	background: linear-gradient(152deg, var(--br-alto) 0%, var(--br) 42%, var(--br-hondo) 100%);
	color: oklch(0.19 0.025 58);
	padding: clamp(4.5rem, 9vw, 8.5rem) 0;
	overflow: hidden;
	isolation: isolate;
}
.mghp-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(oklch(0.19 0.025 58 / 0.055) 1px, transparent 1px),
		linear-gradient(90deg, oklch(0.19 0.025 58 / 0.055) 1px, transparent 1px);
	background-size: 58px 58px;
	mask-image: radial-gradient(70% 80% at 78% 22%, #000, transparent 76%);
	-webkit-mask-image: radial-gradient(70% 80% at 78% 22%, #000, transparent 76%);
}
.mghp-cta__t {
	font-size: clamp(2rem, 1.15rem + 3.5vw, 3.7rem);
	font-weight: 850;
	font-stretch: 110%;
	line-height: 1.02;
	letter-spacing: -0.034em;
	text-wrap: balance;
	margin-bottom: 1.15rem;
}
.mghp-cta__d {
	font-size: clamp(1.03rem, 0.98rem + 0.32vw, 1.18rem);
	/* Medido contra la parada mas oscura del degradado ambar (el peor caso):
	   0.30 daba 3,77:1 y 0.245 se quedaba en 4,47:1. */
	color: oklch(0.215 0.034 55);
	max-width: 56ch;
	text-wrap: pretty;
	margin-bottom: 2.2rem;
}
.mghp-cta__acc { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.mghp-cta__tel {
	font-weight: 700;
	font-size: 1.05rem;
	color: oklch(0.215 0.032 56);
	border-bottom: 2px solid oklch(0.24 0.035 56 / 0.32);
	padding-bottom: 2px;
	transition: border-color 0.25s ease;
}
.mghp-cta__tel:hover { border-color: oklch(0.215 0.032 56); }

/* =========================================================================
   Pie
   ========================================================================= */

.mghp-pie {
	background: var(--g-0);
	padding: clamp(3.5rem, 6vw, 5.5rem) 0 2rem;
	border-top: 1px solid oklch(1 0 0 / 0.07);
}

.mghp-pie__rej {
	display: grid;
	grid-template-columns: 1.55fr repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.mghp-marca--pie { margin-right: 0; margin-bottom: 1.1rem; }
.mghp-marca--pie img { width: 38px; height: 38px; }
.mghp-pie__lema {
	color: var(--tinta-2);
	font-size: 0.99rem;
	max-width: 34ch;
	text-wrap: pretty;
}

.mghp-pie__t {
	font-size: 0.83rem;
	font-weight: 700;
	color: var(--tinta-3);
	margin-bottom: 1rem;
	letter-spacing: 0.01em;
}
.mghp-pie__col ul { display: grid; gap: 0.62rem; }
.mghp-pie__col a, .mghp-pie__loc {
	font-size: 0.97rem;
	color: var(--tinta-2);
	transition: color 0.25s ease;
}
.mghp-pie__col a:hover { color: var(--br); }

.mghp-pie__bajo {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.75rem;
	border-top: 1px solid oklch(1 0 0 / 0.07);
	font-size: 0.9rem;
	color: var(--tinta-3);
}
.mghp-pie__bajo a { transition: color 0.25s ease; }
.mghp-pie__bajo a:hover { color: var(--br); }

/* =========================================================================
   Situacion del visitante. Tres frases con las que llega el 90% de lo que
   entra. No son tarjetas con icono: son columnas de texto separadas por un
   filete que se enciende cuando la seccion aparece.
   ========================================================================= */

.mghp-dol__rej {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	grid-template-rows: auto auto;
	gap: clamp(1.75rem, 3.5vw, 3.25rem);
}

/* Los tres titulares no miden lo mismo: uno cae a dos lineas y los parrafos
   arrancaban a alturas distintas. Con subgrid las dos filas las marca la
   columna mas alta y los textos empiezan alineados. Si el navegador no
   entiende subgrid, cada columna cae a filas automaticas y se apila igual. */
.mghp-dol__c {
	position: relative;
	padding-top: 1.9rem;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	row-gap: 0.75rem;
	align-content: start;
}
.mghp-dol__c::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: var(--g-linea);
}
.mghp-dol__c::after {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	height: 1px;
	width: 0;
	background: linear-gradient(90deg, var(--br), transparent);
	transition: width 1s var(--sal);
	transition-delay: calc(var(--d, 0) * 130ms);
}
.mghp-dol__c.es-visible::after { width: 100%; }

.mghp-dol__t {
	font-size: clamp(1.18rem, 1rem + 0.7vw, 1.5rem);
	font-weight: 750;
	font-stretch: 104%;
	letter-spacing: -0.022em;
	line-height: 1.16;
	margin-bottom: 0;
	align-self: end;
}
.mghp-dol__x { color: var(--tinta-2); font-size: 1rem; text-wrap: pretty; }

/* =========================================================================
   Trabajos. Capturas reales de webs en produccion.
   El primero ocupa el ancho completo; los cinco siguientes van en dos
   columnas, para que la seccion no sea una rejilla de tarjetas iguales.
   ========================================================================= */

.mghp-tra { border-top: 1px solid oklch(1 0 0 / 0.07); }

.mghp-tra__foto {
	display: block;
	position: relative;
	border-radius: var(--r-m);
	overflow: hidden;
	border: 1px solid oklch(1 0 0 / 0.1);
	background: var(--g-1);
	box-shadow: 0 20px 50px oklch(0.06 0.01 70 / 0.5);
}
.mghp-tra__foto img {
	width: 100%;
	height: auto;
	transition: transform 0.9s var(--sal), filter 0.6s ease;
	filter: saturate(0.92);
}
.mghp-tra__c:hover .mghp-tra__foto img,
.mghp-tra__d:hover .mghp-tra__foto img {
	transform: scale(1.035);
	filter: saturate(1.06);
}
/* Barrido de laton al pasar por encima */
.mghp-tra__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 38%, oklch(0.885 0.108 88 / 0.16) 50%, transparent 62%);
	transform: translate3d(-120%, 0, 0);
	transition: transform 0.9s var(--sal);
}
.mghp-tra__c:hover .mghp-tra__foto::after,
.mghp-tra__d:hover .mghp-tra__foto::after { transform: translate3d(120%, 0, 0); }

.mghp-tra__d {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	margin-bottom: clamp(3rem, 6vw, 5rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
	border-bottom: 1px solid oklch(1 0 0 / 0.08);
}

/* Segundo destacado con la foto a la derecha. Se cambia el orden visual, no el
   del HTML, para que el lector de pantalla y el tabulador sigan leyendo foto y
   texto en el mismo orden en los dos bloques. */
.mghp-tra__d--inv { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.mghp-tra__d--inv .mghp-tra__foto--g { order: 2; }
.mghp-tra__d--inv .mghp-tra__cu { order: 1; }

.mghp-tra__rej {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(305px, 1fr));
	gap: clamp(2.25rem, 4.5vw, 3.75rem);
}

.mghp-tra__c { display: flex; flex-direction: column; gap: 1.35rem; }
/* La columna de texto crece y el enlace se va al fondo: asi los "Visitar" de
   la rejilla quedan a la misma altura aunque los parrafos midan distinto. */
.mghp-tra__c .mghp-tra__cu { display: flex; flex-direction: column; flex: 1; }
.mghp-tra__c .mghp-enl { margin-top: auto; align-self: flex-start; }

.mghp-tra__s {
	font-size: 0.86rem;
	color: var(--br);
	font-weight: 600;
	margin-bottom: 0.45rem;
}
.mghp-tra__n {
	font-size: clamp(1.35rem, 1rem + 1.3vw, 2.1rem);
	font-weight: 800;
	font-stretch: 106%;
	letter-spacing: -0.028em;
	line-height: 1.06;
	margin-bottom: 0.5rem;
}
.mghp-tra__r {
	font-size: clamp(1rem, 0.96rem + 0.24vw, 1.13rem);
	font-weight: 600;
	margin-bottom: 0.7rem;
	text-wrap: pretty;
}
.mghp-tra__x {
	color: var(--tinta-2);
	font-size: 0.99rem;
	max-width: 58ch;
	text-wrap: pretty;
	margin-bottom: 1.05rem;
}

.mghp-et { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.35rem; }
.mghp-et li {
	font-size: 0.81rem;
	color: var(--br);
	padding: 0.28rem 0.72rem;
	border-radius: 999px;
	background: var(--br-humo);
	border: 1px solid oklch(0.775 0.152 76 / 0.22);
}

.mghp-enl {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 650;
	font-size: 0.97rem;
	color: var(--tinta);
	border-bottom: 1px solid var(--g-linea);
	padding-bottom: 3px;
	transition: color 0.25s ease, border-color 0.25s ease, gap 0.35s var(--sal);
}
.mghp-enl svg { width: 15px; height: 15px; }
.mghp-enl:hover { color: var(--br); border-color: var(--br); gap: 0.7rem; }

/* =========================================================================
   Proceso: etiqueta de compromiso por paso
   ========================================================================= */

.mghp-paso__c {
	display: inline-block;
	align-self: flex-start;
	margin-top: 0.9rem;
	font-size: 0.81rem;
	font-weight: 600;
	color: var(--br);
	padding: 0.26rem 0.7rem;
	border-radius: 999px;
	background: var(--br-humo);
	border: 1px solid oklch(0.775 0.152 76 / 0.22);
}

/* =========================================================================
   Dudas. <details> nativo: funciona sin JS y es accesible de serie.
   ========================================================================= */

.mghp-dud { background: var(--g-1); border-top: 1px solid oklch(1 0 0 / 0.07); }

.mghp-dud__in {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2.25rem, 5vw, 4.5rem);
	align-items: start;
}
.mghp-dud__cab { position: sticky; top: 110px; }
.mghp-dud__cab .mghp-btn { margin-top: 1.8rem; }

.mghp-dud__lista { display: grid; }

.mghp-dud__it { border-bottom: 1px solid oklch(1 0 0 / 0.09); }
.mghp-dud__it:first-child { border-top: 1px solid oklch(1 0 0 / 0.09); }

.mghp-dud__it summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.3rem 0;
	cursor: pointer;
	list-style: none;
	font-size: clamp(1.02rem, 0.97rem + 0.35vw, 1.19rem);
	font-weight: 650;
	letter-spacing: -0.014em;
	transition: color 0.25s ease;
}
.mghp-dud__it summary::-webkit-details-marker { display: none; }
.mghp-dud__it summary:hover { color: var(--br); }

.mghp-dud__it summary i {
	position: relative;
	width: 30px; height: 30px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var(--g-linea);
	transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.4s var(--sal);
}
.mghp-dud__it summary i::before,
.mghp-dud__it summary i::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	background: var(--tinta-2);
	border-radius: 2px;
	transition: transform 0.4s var(--sal), background-color 0.3s ease;
}
.mghp-dud__it summary i::before { width: 12px; height: 1.6px; transform: translate(-50%, -50%); }
.mghp-dud__it summary i::after  { width: 1.6px; height: 12px; transform: translate(-50%, -50%); }
.mghp-dud__it[open] summary i { border-color: var(--br); background: var(--br); }
.mghp-dud__it[open] summary i::before,
.mghp-dud__it[open] summary i::after { background: oklch(0.19 0.025 58); }
.mghp-dud__it[open] summary i::after { transform: translate(-50%, -50%) scaleY(0); }

.mghp-dud__r { padding: 0 0 1.4rem; }
.mghp-dud__r p {
	color: var(--tinta-2);
	max-width: 62ch;
	font-size: 1rem;
	text-wrap: pretty;
}
.mghp-dud__it[open] .mghp-dud__r { animation: mghp-abre 0.45s var(--sal) both; }
@keyframes mghp-abre {
	from { opacity: 0; transform: translate3d(0, -8px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* =========================================================================
   Cierre del embudo: tres respuestas y WhatsApp con el mensaje escrito.
   La tarjeta es oscura sobre el laton, que resuelve el contraste de un
   formulario entero sin pelear con el degradado.
   ========================================================================= */

/* OJO: aqui habia un max-width:none que sacaba esta seccion del canal de la
   pagina. Toda la portada vive en una columna de 1240 px y el cierre se abria
   hasta el borde de la ventana: a 1600 px empezaba 180 px mas a la izquierda
   que el logo, los titulares y el pie. El fondo de laton SI va a sangre, que
   es lo que le da presencia; el contenido tiene que caer en la misma linea
   que el resto o la pagina parece que se descuadra justo al final. */
.mghp-cta__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	gap: clamp(2.25rem, 5vw, 4.5rem);
	align-items: center;
}
.mghp-cta__pie { font-size: 1rem; color: oklch(0.215 0.034 55); }

.mghp-form {
	background: oklch(0.155 0.012 68);
	color: var(--tinta);
	border-radius: var(--r-l);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid oklch(1 0 0 / 0.1);
	box-shadow: 0 30px 70px oklch(0.12 0.03 60 / 0.4);
	display: grid;
	gap: 1.5rem;
}

.mghp-campo { border: 0; margin: 0; padding: 0; min-width: 0; }
.mghp-campo legend,
.mghp-lab {
	font-size: 0.87rem;
	font-weight: 650;
	color: var(--tinta-2);
	margin-bottom: 0.75rem;
	padding: 0;
	display: block;
}

.mghp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mghp-chip { position: relative; }
.mghp-chip input {
	position: absolute;
	opacity: 0;
	width: 1px; height: 1px;
	margin: 0;
}
.mghp-chip span {
	display: block;
	padding: 0.48rem 0.95rem;
	border-radius: 999px;
	font-size: 0.93rem;
	color: var(--tinta-2);
	border: 1px solid var(--g-linea);
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease,
	            background-color 0.25s ease, transform 0.3s var(--sal);
}
.mghp-chip span:hover { color: var(--tinta); border-color: oklch(0.45 0.02 72); }
.mghp-chip input:checked + span {
	background: var(--br);
	border-color: var(--br);
	color: oklch(0.19 0.025 58);
	font-weight: 650;
	transform: translateY(-1px);
}
.mghp-chip input:focus-visible + span { outline: 2px solid var(--br); outline-offset: 3px; }

.mghp-inp {
	width: 100%;
	font: inherit;
	font-size: 1.02rem;
	color: var(--tinta);
	background: oklch(0.115 0.01 68);
	border: 1px solid var(--g-linea);
	border-radius: var(--r-s);
	padding: 0.8rem 1rem;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}
.mghp-inp::placeholder { color: oklch(0.62 0.014 78); }
.mghp-inp:focus { outline: 0; border-color: var(--br); background: oklch(0.135 0.012 68); }

.mghp-form__prev {
	font-size: 0.93rem;
	color: var(--tinta-2);
	background: oklch(0.115 0.01 68);
	border: 1px solid var(--g-linea);
	border-radius: var(--r-s);
	padding: 0.85rem 1rem;
	min-height: 3.2rem;
	text-wrap: pretty;
}
.mghp-form__b { width: 100%; }
.mghp-form__n { font-size: 0.86rem; color: var(--tinta-2); text-align: center; }

/* =========================================================================
   Movimiento. El contenido es visible por defecto; el JS solo lo mejora.
   Si el JS no corre, no se pierde nada.
   ========================================================================= */

.mghp-js .mghp-rev {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	transition: opacity 0.75s var(--sal-q), transform 0.75s var(--sal-q);
	transition-delay: calc(var(--d, 0) * 85ms);
}
.mghp-js .mghp-rev.es-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.mghp-js .mghp-w {
	opacity: 0;
	transform: translate3d(0, 0.72em, 0);
}
.mghp-js .mghp-hero.es-lista .mghp-w {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition: opacity 0.8s var(--sal-q), transform 0.9s var(--sal-q);
	transition-delay: calc(var(--i, 0) * 62ms + 120ms);
}

.mghp-js .mghp-hero__sitio,
.mghp-js .mghp-hero__d,
.mghp-js .mghp-hero__acc,
.mghp-js .mghp-hero__tel {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
}
.mghp-js .mghp-hero.es-lista .mghp-hero__sitio,
.mghp-js .mghp-hero.es-lista .mghp-hero__d,
.mghp-js .mghp-hero.es-lista .mghp-hero__acc,
.mghp-js .mghp-hero.es-lista .mghp-hero__tel {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition: opacity 0.8s var(--sal-q), transform 0.8s var(--sal-q);
}
.mghp-js .mghp-hero.es-lista .mghp-hero__sitio { transition-delay: 60ms; }
.mghp-js .mghp-hero.es-lista .mghp-hero__d    { transition-delay: 640ms; }
.mghp-js .mghp-hero.es-lista .mghp-hero__acc  { transition-delay: 740ms; }
.mghp-js .mghp-hero.es-lista .mghp-hero__tel  { transition-delay: 820ms; }

/* =========================================================================
   Adaptacion
   ========================================================================= */

@media (max-width: 1080px) {
	/* La frase corta baja bajo el nombre y el signo se centra sobre las dos
	   lineas: a este ancho, tres columnas de texto dejan el nombre partido. */
	.mghp-idx__b { grid-template-columns: var(--num) minmax(0, 1fr) auto; }
	.mghp-idx__num { grid-column: 1; grid-row: 1; }
	.mghp-idx__n   { grid-column: 2; grid-row: 1; }
	.mghp-idx__d   { grid-column: 2; grid-row: 2; margin-top: 0.4rem; }
	.mghp-idx__sig { grid-column: 3; grid-row: 1 / span 2; }

	/* Apilada: argumento y debajo lo que incluye. */
	.mghp-idx__cu { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.mghp-idx__x  { max-width: 60ch; }

	/* La pila en perspectiva necesita ancho real; por debajo de esto el hero
	   vuelve a una sola columna y la pila pasa a ser una tira horizontal. */
	.mghp-hero__in { grid-template-columns: 1fr; }
	.mghp-hero__vis { margin-top: 1.5rem; }
	.mghp-pila { transform: none; }

	.mghp-tra__d { grid-template-columns: 1fr; }
	/* En una sola columna la inversion sobra: el texto debe ir siempre debajo
	   de su foto, como en el otro destacado. */
	.mghp-tra__d--inv .mghp-tra__foto--g,
	.mghp-tra__d--inv .mghp-tra__cu { order: 0; }
	/* Apilada, la separacion entre el titular y las preguntas deja de ser un
	   hueco de rejilla y pasa a ser el mismo salto que hay en todas las demas
	   secciones entre .mghp-sec__cab y su contenido. Con el gap de columna se
	   quedaba en 36 px donde el resto de la pagina usa 40. */
	.mghp-dud__in { grid-template-columns: 1fr; row-gap: clamp(2.5rem, 5vw, 4rem); }
	.mghp-dud__cab { position: static; }
	.mghp-cta__in { grid-template-columns: 1fr; }
}

/* Tres columnas de precio dejan de compararse cuando cada una mide 250 px: la
   cifra pierde cuerpo y la lista se parte en dos lineas por linea. Apiladas y
   con la lista al lado, la tarjeta se lee de un vistazo y el numero conserva
   su tamano. */
@media (max-width: 1000px) {
	/* Con "Precios" el menu pasa a seis entradas y a este ancho se salia del
	   contenedor por detras del boton. Se retira el boton: el menu ya lleva
	   "Contacto" y la llamada vuelve a aparecer en cuanto hay sitio. */
	.mghp-cab__acc .mghp-btn--brass { display: none; }
	.mghp-nav a { padding-inline: 0.55rem; }

	.mghp-planes { grid-template-columns: minmax(0, 1fr); }

	.mghp-plan {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		column-gap: clamp(1.75rem, 4vw, 3rem);
		align-items: start;
	}
	/* Ya no hay tres precios que alinear entre si. */
	.mghp-plan__d { min-height: 0; margin-bottom: 1.25rem; }
	.mghp-plan__b { margin-bottom: 0; }
	/* La columna izquierda tiene cinco filas: nombre, descripcion, precio, plazo
	   y boton (el rotulo de "recomendada" es absoluto y no cuenta). Si aqui se
	   deja "span 4", la lista deja de cubrir el alto de la tarjeta y el boton se
	   queda flotando con un hueco en blanco al lado. */
	.mghp-plan__e {
		grid-column: 2;
		grid-row: 1 / span 5;
		border-top: 0;
	}
	/* Apilada ya no hay vecinas por encima de las que sobresalir. */
	.mghp-plan--dest {
		margin-block: 0;
		padding-block: var(--pad-v);
	}

	.mghp-medida { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.mghp-medida__acc { flex-direction: row; align-items: center; gap: 1.5rem; }
}

@media (max-width: 860px) {
	.mghp-nav { display: none; }
	.mghp-burger { display: block; }
	.mghp-cab__acc .mghp-btn--brass { display: none; }

	:root { --cab-alto: 72px; }
	.mghp-hero { min-height: auto; padding: calc(var(--cab-alto) + 0.85rem) 0 4.5rem; }
	/* El line-height 0.98 deja el parrafo pegado a la ultima linea del titular */
	.mghp-hero__t { max-width: 100%; margin-bottom: 2.5rem; }
	.mghp-hero__baja { display: none; }
	.mghp-hero__acc .mghp-btn { flex: 1 1 auto; }

	.mghp-pie__rej { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mghp-pie__col--m { grid-column: 1 / -1; }

	.mghp-tra__rej { grid-template-columns: 1fr; }
	.mghp-form { border-radius: var(--r-m); }

	/* Sin sitio para sangrar la ficha bajo el nombre: a este ancho la columna
	   del numero se come una linea de texto por parrafo. */
	.mghp-idx { --num: 1.9rem; }
	.mghp-idx__cu { padding-left: 0; }
	.mghp-idx__sig { width: 38px; height: 38px; }
}

@media (max-width: 660px) {
	/* Dos columnas dentro de la tarjeta dejan la lista en una tira de 150 px. */
	.mghp-plan { grid-template-columns: minmax(0, 1fr); }
	.mghp-plan__b { margin-bottom: 1.5rem; }
	.mghp-plan__e {
		grid-column: 1;
		grid-row: auto;
		border-top: 1px solid oklch(1 0 0 / 0.11);
	}
	.mghp-medida__acc { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

@media (max-width: 520px) {
	.mghp-pie__rej { grid-template-columns: 1fr; }
	.mghp-hero__acc { flex-direction: column; align-items: stretch; }
	.mghp-cta__acc { flex-direction: column; align-items: flex-start; }
	.mghp-marca__t { font-size: 0.95rem; }
}

/* =========================================================================
   Movimiento reducido: se cruza a fundido, nada se mueve.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.mghp-html { scroll-behavior: auto; }

	.mghp-body *,
	.mghp-body *::before,
	.mghp-body *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.15s !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}

	.mghp-js .mghp-rev,
	.mghp-js .mghp-w,
	.mghp-js .mghp-hero__sitio,
	.mghp-js .mghp-hero__d,
	.mghp-js .mghp-hero__acc,
	.mghp-js .mghp-hero__tel {
		transform: none !important;
	}

	/* Parar la animacion y punto dejaba una fila de ancho max-content: la mitad
	   de los clientes quedaban fuera de pantalla sin ninguna forma de llegar a
	   ellos. Se envuelve la fila y se ocultan las copias de relleno. Al envolver
	   se quitan los filetes verticales: en varias filas los cortes quedarian a
	   distinta altura y el registro dejaria de leerse como una rejilla. */
	.mghp-marq__v {
		mask-image: none;
		-webkit-mask-image: none;
	}
	.mghp-marq__p {
		animation: none;
		width: auto;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 0.5rem;
	}
	.mghp-marq__i {
		border-right: 0;
		flex-basis: clamp(120px, 12vw, 180px);
	}
	.mghp-marq__i:nth-child(n + 9) { display: none; }

	.mghp-hero__luz { animation: none; }
	.mghp-paso::after { transition: none; }
	.mghp-dol__c::after { transition: none; }

	/* La pila se queda quieta y plana, pero sigue viendose: la imagen es
	   informacion, no decoracion, asi que no se puede suprimir. */
	.mghp-pila,
	.mghp-pila__c--1,
	.mghp-pila__c--2,
	.mghp-pila__c--3 { transform: none !important; }
	.mghp-tra__foto::after { display: none; }

	/* El desplegable sigue funcionando, solo que abre y cierra de golpe. Quitar
	   la animacion NO puede dejar contenido inalcanzable. */
	.mghp-js .mghp-idx__mas,
	.mghp-js .mghp-idx__f.es-abierto .mghp-idx__mas { transition: none; }
	.mghp-idx__f::before,
	.mghp-idx__b,
	.mghp-idx__sig i { transition: none; }

	.mghp-dud__it[open] .mghp-dud__r { animation: none; }
}

/* =========================================================================
   Software propio (#software)

   Carrusel, no rejilla. Son veinte productos con foto: apilados en columna
   serian cuatro pantallas de scroll muerto entre "precios" y "como
   trabajamos", y el visitante abandonaria por el camino.

   La pista es un contenedor con overflow-x y scroll-snap, no un widget: se
   arrastra con el dedo y con el trackpad aunque el JavaScript no cargue. Las
   flechas son un extra que el script enciende, y por eso nacen con hidden.

   Las dos familias son las dos formas de cobro reales (licencia contra cuota
   mensual), no una simetria de maquetacion.

   La banda va en laton, el mismo degradado y la misma retícula que la llamada
   final: es lo unico de la portada que no vendemos como servicio sino como
   producto propio, y el cambio de fondo lo separa del resto sin escribirlo.
   Entre esta banda y la del final quedan dos secciones grafito, suficiente
   para que no se lean como la misma cosa repetida.

   Las tarjetas se quedan en grafito a proposito: las veinte portadas estan
   hechas sobre fondo negro y sobre ambar se disolverian. Grafito sobre laton
   ademas les da silueta, que es lo que hace que se lean como objetos.
   ========================================================================= */

/* Sin borde superior: una linea blanca al 7 % sobre ambar es una raya sucia,
   no una costura. El corte seco entre grafito y laton ya separa. */
.mghp-soft {
	position: relative;
	background: linear-gradient(152deg, var(--br-alto) 0%, var(--br) 42%, var(--br-hondo) 100%);
	color: oklch(0.19 0.025 58);
	overflow: hidden;
	isolation: isolate;
}

/* Reticula de 58 px difuminada en radial, igual que en la llamada final: da
   textura al plano sin dibujar nada que compita con las portadas. */
.mghp-soft::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(oklch(0.19 0.025 58 / 0.055) 1px, transparent 1px),
		linear-gradient(90deg, oklch(0.19 0.025 58 / 0.055) 1px, transparent 1px);
	background-size: 58px 58px;
	mask-image: radial-gradient(70% 80% at 78% 22%, #000, transparent 76%);
	-webkit-mask-image: radial-gradient(70% 80% at 78% 22%, #000, transparent 76%);
}

/* Tintas oscuras sobre el laton. Medidas contra el pixel mas oscuro de la
   banda (el pie, 215/141/45): titular 6,83  parrafo 6,50  nota 6,20  flecha
   6,41. El minimo legible es 4,5. */
.mghp-soft .mghp-h2 { color: oklch(0.19 0.025 58); }
.mghp-soft .mghp-sec__d { color: oklch(0.215 0.034 55); }

.mghp-soft__enl {
	color: oklch(0.2 0.03 56);
	text-decoration: underline;
	text-decoration-color: oklch(0.2 0.03 56 / 0.5);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color 0.2s var(--sal-q), text-decoration-color 0.2s var(--sal-q);
}

.mghp-soft__enl:hover {
	color: oklch(0.14 0.02 56);
	text-decoration-color: currentColor;
}

.mghp-soft__fam { margin-top: clamp(2.2rem, 4vw, 3.4rem); }

.mghp-soft__cab {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid oklch(0.24 0.035 56 / 0.24);
}

.mghp-soft__cabt { min-width: 0; }

.mghp-soft__fn {
	margin: 0;
	font-family: 'Archivo Expanded', 'Archivo', system-ui, sans-serif;
	font-size: clamp(1.35rem, 1.15rem + 0.85vw, 1.85rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: oklch(0.19 0.025 58);
}

.mghp-soft__fx {
	margin: 0.5rem 0 0;
	font-size: 0.96rem;
	line-height: 1.55;
	color: oklch(0.215 0.034 55);
	max-width: 46ch;
	text-wrap: pretty;
}

/* ---------- Flechas ---------- */

.mghp-soft__ctrl {
	display: flex;
	gap: 0.5rem;
	flex: 0 0 auto;
}

.mghp-soft__ctrl[hidden] { display: none; }

.mghp-soft__fl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid oklch(0.24 0.035 56 / 0.42);
	border-radius: 999px;
	background: transparent;
	color: oklch(0.22 0.03 56);
	cursor: pointer;
	transition: color 0.2s var(--sal-q), border-color 0.2s var(--sal-q), background-color 0.2s var(--sal-q), opacity 0.2s var(--sal-q);
}

.mghp-soft__fl svg { display: block; }

/* Se invierte al pasar: pastilla oscura con la flecha en laton claro. Es el
   mismo gesto que el boton .mghp-btn--osc del pie de cada familia, para que la
   banda tenga un unico lenguaje de "elemento activo". */
@media (hover: hover) {
	.mghp-soft__fl:hover {
		color: var(--br-alto);
		background: oklch(0.17 0.018 62);
		border-color: oklch(0.17 0.018 62);
	}
}

/* El foco en ambar tiene que ser oscuro: un contorno de laton sobre laton no
   se ve, y quien navega con teclado se queda sin saber donde esta. */
.mghp-soft__fl:focus-visible {
	outline: 2px solid oklch(0.19 0.025 58);
	outline-offset: 2px;
}

/* Al final de la pista la flecha se apaga pero NO desaparece: si se quita, la
   otra salta de sitio y el ojo pierde el punto de apoyo. */
.mghp-soft__fl[disabled] {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

/* ---------- Pista ---------- */

/* La pista vive dentro de .mghp-in y se sale de el justo el ancho del margen
   lateral para volver a meterlo como padding propio. Parece un rodeo y es lo
   contrario: asi la primera tarjeta cae EXACTA sobre el titular a cualquier
   ancho, sin una sola cuenta con vw (que en Windows incluye la barra de scroll
   y descuadra), y las de la derecha se cortan contra el borde, que es lo que
   le dice al ojo que esto se arrastra.
   scroll-padding repite el numero para el snap: sin el, la tarjeta a la que
   salta se pega al borde y pierde el margen. */
.mghp-soft__pista {
	display: flex;
	gap: clamp(0.85rem, 1.4vw, 1.25rem);
	margin: clamp(1.3rem, 2.2vw, 1.9rem) calc(var(--pad) * -1) 0;
	padding: 0.25rem var(--pad) 1rem;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--pad);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

/* La barra nativa de macOS/Windows parte la fila por abajo y el snap ya dice
   que esto se mueve. Fuera. */
.mghp-soft__pista::-webkit-scrollbar { display: none; }

.mghp-soft__pista:focus-visible {
	outline: 2px solid oklch(0.19 0.025 58);
	outline-offset: -2px;
	border-radius: var(--r-m);
}

.mghp-soft__t {
	flex: 0 0 auto;
	width: clamp(15.5rem, 22vw, 18.5rem);
	scroll-snap-align: start;
}

/* ---------- Tarjeta ---------- */

/* Borde y sombra en marron calido, no en negro: sobre laton una sombra neutra
   se ve gris y ensucia el ambar. */
.mghp-tarj {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid oklch(0.30 0.05 55 / 0.45);
	border-radius: var(--r-m);
	background: var(--g-1);
	box-shadow: 0 10px 26px oklch(0.30 0.07 52 / 0.22);
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.25s var(--sal-q), transform 0.25s var(--sal-q),
	            background-color 0.25s var(--sal-q), box-shadow 0.25s var(--sal-q);
}

@media (hover: hover) {
	.mghp-tarj:hover {
		border-color: oklch(0.24 0.045 55 / 0.65);
		background: var(--g-2);
		box-shadow: 0 18px 40px oklch(0.28 0.07 52 / 0.30);
		transform: translateY(-3px);
	}
	.mghp-tarj:hover .mghp-tarj__n { color: var(--br); }
	.mghp-tarj:hover .mghp-tarj__foto img { transform: scale(1.04); }

	/* Al aclarar el fondo de la tarjeta, --tinta-3 sobre --g-2 se queda en 4,33
	   y el minimo legible es 4,5. La frase sube un escalon de tinta: medido,
	   no estimado. */
	.mghp-tarj:hover .mghp-tarj__d,
	.mghp-tarj:hover .mghp-tarj__an { color: var(--tinta-2); }
}

.mghp-tarj:focus-visible {
	outline: 2px solid oklch(0.19 0.025 58);
	outline-offset: 3px;
}

/* La portada va metida hacia dentro, no a sangre. Las trece portadas de plugin
   llevan una franja blanca de iconos en el pie y a sangre esa franja choca de
   golpe con el grafito de la tarjeta. Metida y redondeada se lee como una
   miniatura de producto, y de paso las siete portadas de app (que son oscuras
   enteras) quedan igual de encajadas. */
.mghp-tarj__foto {
	position: relative;
	display: block;
	margin: 0.55rem 0.55rem 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 10px;
	background: var(--g-2);
}

.mghp-tarj__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s var(--sal-q);
}

/* La etiqueta de rebaja va sobre la foto y con fondo solido: las portadas son
   collages con mucho naranja y sin fondo propio el numero se perderia. */
.mghp-tarj__of {
	position: absolute;
	top: 0.55rem;
	right: 0.55rem;
	padding: 0.24rem 0.5rem;
	border-radius: var(--r-s);
	background: var(--br);
	color: var(--g-0);
	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mghp-tarj__cu {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 0.85rem 0.95rem 1rem;
}

.mghp-tarj__n {
	font-weight: 640;
	font-size: 1.01rem;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--tinta);
	transition: color 0.2s var(--sal-q);
}

/* La frase empuja al precio hasta abajo: los nombres ocupan una o dos lineas y
   sin esto los precios de la fila no quedarian a la misma altura. */
.mghp-tarj__d {
	flex: 1 1 auto;
	margin-top: 0.3rem;
	font-size: 0.855rem;
	line-height: 1.5;
	color: var(--tinta-3);
	text-wrap: pretty;
	transition: color 0.2s var(--sal-q);
}

.mghp-tarj__pr {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.05rem 0.4rem;
	margin-top: 0.9rem;
	padding-top: 0.75rem;
	border-top: 1px solid oklch(1 0 0 / 0.08);
}

.mghp-tarj__desde {
	font-size: 0.8rem;
	color: var(--tinta-3);
}

.mghp-tarj__ah {
	font-size: 1.16rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--br);
	font-variant-numeric: tabular-nums;
}

.mghp-tarj__an {
	font-size: 0.85rem;
	color: var(--tinta-3);
	text-decoration-thickness: 1px;
	font-variant-numeric: tabular-nums;
}

.mghp-tarj__pe {
	font-size: 0.82rem;
	color: var(--tinta-2);
	white-space: nowrap;
}

.mghp-soft__b { margin-top: clamp(0.6rem, 1.2vw, 1rem); }

.mghp-soft__nota {
	margin: clamp(2.2rem, 3.5vw, 3rem) 0 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: oklch(0.235 0.036 55);
	max-width: 64ch;
}

@media (max-width: 560px) {
	/* En el movil la tarjeta ocupa casi todo el ancho y deja asomar la
	   siguiente: ese trozo cortado es lo que dice que se puede arrastrar. */
	.mghp-soft__t { width: min(78vw, 17rem); }
	.mghp-soft__b { width: 100%; }
	.mghp-soft__cab { align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
	/* Chrome ignora el scroll suave con movimiento reducido, asi que el salto
	   de las flechas lo hace el script a pelo. Aqui solo se apagan las
	   transiciones para que no queden a medias. */
	.mghp-soft__pista { scroll-behavior: auto; }
	.mghp-tarj,
	.mghp-tarj__foto img,
	.mghp-tarj__n,
	.mghp-tarj__d,
	.mghp-soft__fl,
	.mghp-soft__enl { transition-duration: 0.01ms; }
	.mghp-tarj:hover { transform: none; }
	.mghp-tarj:hover .mghp-tarj__foto img { transform: none; }
}