/*
Theme Name:  Marymed Real Estate - Hello Child
Theme URI:   https://marymed.pe
Description: Tema hijo de Hello Elementor para Marymed Real Estate. Registra los CPT "propiedades" y "vehiculos" con sus campos ACF, plantillas PHP nativas (single/archive), esquemas JSON-LD GEO/SEO, mapa gratuito Leaflet y utilidades (WhatsApp, TikTok, compartir). Stack 100% gratuito.
Author:      Marymed Real Estate - Jose Luis Perez Villalta
Author URI:  https://marymed.pe
Template:    hello-elementor
Version:     1.1.0
Text Domain: marymed
Requires at least: 6.0
Tested up to: 6.6
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: real-estate, vehicles, acf, seo, leaflet
*/

/* ==========================================================
   1) Layout general Marymed
   ========================================================== */
.mm-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 16px;
}
.mm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 22px;
}

/* ==========================================================
   2) Tarjetas de listado (archive)
   ========================================================== */
.mm-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e7e7e7;
	border-radius: 12px;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
.mm-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}
.mm-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #f0f1f4;
}
.mm-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mm-card__price {
	position: absolute;
	left: 10px;
	bottom: 10px;
	background: rgba(17, 24, 39, .85);
	color: #fff;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 14px;
}
.mm-card__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
.mm-card__title {
	font-size: 18px;
	margin: 0;
}
.mm-card__title a {
	color: inherit;
	text-decoration: none;
}
.mm-card__meta {
	color: #555;
	font-size: 14px;
}
.mm-card__cta {
	margin-top: auto;
}

/* ==========================================================
   3) Badges y precios (fichas)
   ========================================================== */
.mm-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}
.mm-badge {
	background: #eef2ff;
	color: #3730a3;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	padding: 5px 10px;
	border-radius: 999px;
}
.mm-badge--op { background: #ecfdf5; color: #047857; }

.mm-ficha-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 30px;
	align-items: start;
}
@media (max-width: 900px) {
	.mm-ficha-grid { grid-template-columns: 1fr; }
}

.mm-side-card {
	background: #fafafa;
	border: 1px solid #e7e7e7;
	border-radius: 12px;
	padding: 22px;
	position: sticky;
	top: 20px;
}
.mm-precio {
	font-size: 28px;
	font-weight: 800;
	color: #111827;
}
.mm-precio span { font-size: 15px; font-weight: 600; color: #4b5563; }
.mm-precio-pen { font-size: 15px; color: #6b7280; margin-bottom: 12px; }
.mm-spec {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin: 14px 0;
}
.mm-spec__item {
	background: #fff;
	border: 1px solid #e7e7e7;
	border-radius: 8px;
	padding: 10px 12px;
}
.mm-spec__item strong { display: block; font-size: 16px; }
.mm-spec__item small { color: #6b7280; text-transform: uppercase; letter-spacing: .4px; font-size: 11px; }

/* ==========================================================
   4) Botones
   ========================================================== */
.mm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #111827;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	padding: 12px 20px;
	border-radius: 8px;
	transition: opacity .2s ease;
}
.mm-btn:hover { color: #fff; opacity: .9; }
.mm-btn--wa { background: #25d366; }
.mm-btn--block { width: 100%; }
.marymed-wa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: 8px;
	background: #25d366;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	padding: 12px 20px;
	border-radius: 8px;
}
.marymed-wa-btn:hover { color: #fff; opacity: .9; }

/* ==========================================================
   5) Mapa Leaflet + contenedores embebidos
   ========================================================== */
.mm-leaflet {
	width: 100%;
	height: 420px;
	border-radius: 12px;
	z-index: 1;
}
.mm-3d,
.mm-tiktok-embed {
	margin-top: 24px;
}

/* ==========================================================
   6) Boton flotante WhatsApp + compartir (se mantienen)
   ========================================================== */
.marymed-wa-float {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #25d366;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	padding: 12px 18px;
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(37, 211, 102, .35);
	transition: transform .2s ease;
}
.marymed-wa-float:hover { color: #fff; transform: translateY(-2px); }

.marymed-share {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}
.marymed-share a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	padding: 7px 12px;
	border-radius: 999px;
}
.marymed-share .ms-wa { background: #25d366; }
.marymed-share .ms-fb { background: #1877f2; }
.marymed-share .ms-tg { background: #229ed9; }

/* ==========================================================
   7) Filtros de archivo
   ========================================================== */
.mm-filters {
	background: #f6f6f6;
	border-radius: 12px;
	padding: 18px;
	margin-bottom: 26px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: end;
}
.mm-filters label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
}
.mm-filters select,
.mm-filters input {
	min-width: 170px;
	padding: 8px 10px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	background: #fff;
}
.mm-pagination {
	margin-top: 30px;
	display: flex;
	gap: 6px;
	justify-content: center;
	flex-wrap: wrap;
}
.mm-pagination .page-numbers {
	padding: 6px 12px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	text-decoration: none;
}
.mm-pagination .current { background: #111827; color: #fff; border-color: #111827; }

/* ==========================================================
   8) Portada (front-page.php)
   ========================================================== */
.mm-hero {
	background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
	color: #fff;
	padding: 72px 0;
	text-align: center;
}
.mm-hero__title {
	font-size: clamp(28px, 5vw, 46px);
	margin: 0 0 12px;
	line-height: 1.15;
}
.mm-hero__sub {
	font-size: 17px;
	opacity: .85;
	max-width: 640px;
	margin: 0 auto 26px;
}
.mm-hero__cta {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
.mm-hero__cta .mm-btn--wa { background: #25d366; }

.mm-home-section { padding: 48px 0; }
.mm-home-section--alt { background: #f6f7f9; }
.mm-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}
.mm-section-head h2 { margin: 0; }

.mm-btn--ghost {
	background: transparent;
	color: #111827;
	border: 1px solid #d1d5db;
}
.mm-btn--ghost:hover { border-color: #111827; color: #111827; }

.mm-cta {
	background: #ecfdf5;
	text-align: center;
	padding: 48px 0;
}
.mm-cta h2 { margin: 0 0 8px; }
.mm-cta p { margin: 0 0 20px; color: #374151; }

/* ==========================================================
   9) Galeria + Lightbox
   ========================================================== */
.mm-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
	margin: 0 0 24px;
}
.mm-gallery__item {
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.mm-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .25s ease;
}
.mm-gallery__item:hover img { transform: scale(1.05); }

.mm-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(2, 6, 23, .94);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 20px;
}
.mm-lightbox.is-open { display: flex; }
.mm-lightbox img {
	max-width: 92vw;
	max-height: 82vh;
	border-radius: 6px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.mm-lightbox__caption {
	position: absolute;
	bottom: 22px;
	left: 0;
	right: 0;
	text-align: center;
	color: #e5e7eb;
	font-size: 14px;
}
.mm-lightbox__btn {
	position: absolute;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	border: 0;
	font-size: 30px;
	line-height: 1;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	cursor: pointer;
	top: 50%;
	transform: translateY(-50%);
	transition: background .2s ease;
}
.mm-lightbox__btn:hover { background: rgba(255, 255, 255, .3); }
.mm-lightbox__prev { left: 18px; }
.mm-lightbox__next { right: 18px; }
.mm-lightbox__close {
	top: 18px;
	right: 18px;
	transform: none;
	font-size: 26px;
}

/* ==========================================================
   10) TikTok feed (home)
   ========================================================== */
.mm-tiktok-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px;
	justify-items: center;
}
.mm-tiktok-item { width: 100%; }
.mm-tiktok-more { text-align: center; margin-top: 18px; }

/* ==========================================================
   11) Refinamiento visual final (cards, fichas, responsive)
   ========================================================== */
/* Tarjetas: fondo de respaldo cuando no hay imagen */
.mm-card__media {
	background: linear-gradient(150deg, #1e3a8a 0%, #0f172a 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}
.mm-card__media img { position: relative; z-index: 1; }
.mm-card__price { z-index: 2; }
.mm-card__media:not(:has(img))::after {
	content: 'MARYMED';
	color: rgba(255, 255, 255, .30);
	font-weight: 800;
	letter-spacing: 4px;
	font-size: 13px;
}
.mm-card:hover {
	box-shadow: 0 18px 34px rgba(2, 6, 23, .12);
}
.mm-card__title a:hover { color: #1d4ed8; }
.mm-card__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; }

/* Fichas single */
.mm-ficha-head {
	border-bottom: 1px solid #e7e7e7;
	padding-bottom: 18px;
	margin-bottom: 24px;
}
.mm-title {
	font-size: clamp(26px, 4vw, 38px);
	line-height: 1.1;
	margin: 0 0 8px;
}
.mm-ubi { color: #4b5563; margin: 0; }
.mm-content { font-size: 16px; line-height: 1.7; color: #1f2937; }
.mm-content p { margin: 0 0 1.2em; }
.mm-content img { border-radius: 10px; height: auto; }
.mm-side-card {
	box-shadow: 0 12px 32px rgba(2, 6, 23, .07);
}
.mm-side-card .marymed-wa-btn { margin-top: 14px; }
.mm-spec__item { background: #fff; }
.mm-hero__title { text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.mm-archive-head h1 { margin-bottom: 24px; }
.mm-btn { border: none; }

/* Accesibilidad: foco visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* Responsive fino */
@media (max-width: 600px) {
	.mm-container { padding: 18px 12px; }
	.mm-grid { grid-template-columns: 1fr; }
	.mm-gallery { grid-template-columns: repeat(2, 1fr); }
	.mm-filters label { width: 100%; }
	.mm-filters select,
	.mm-filters input { width: 100%; min-width: 0; }
	.mm-hero { padding: 48px 0; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
	html { scroll-behavior: auto !important; }
}

/* ==========================================================
   12) Identidad visual Marymed (paleta + tipografia)
   ========================================================== */
:root {
	--mm-navy: #0e2a47;
	--mm-navy-900: #081d33;
	--mm-navy-700: #14406b;
	--mm-gold: #c9a24b;
	--mm-ink: #16232f;
	--mm-muted: #5c6b7a;
	--mm-bg: #ffffff;
	--mm-bg-soft: #f4f7fa;
	--mm-line: #e3e9ef;
	--mm-wa: #22c55e;
	--mm-wa-dark: #16a34a;
	--mm-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--mm-font-head: 'Sora', var(--mm-font-body);
	--mm-radius: 14px;
	--mm-shadow: 0 14px 40px rgba(14, 42, 71, .10);
}

body,
.mm-container,
.mm-content {
	font-family: var(--mm-font-body);
	color: var(--mm-ink);
}

h1, h2, h3, h4, h5, h6,
.mm-title, .mm-card__title,
.mm-hero__title, .mm-section-head h2,
.mm-cta h2 {
	font-family: var(--mm-font-head);
	color: var(--mm-navy);
	letter-spacing: -.02em;
}

::selection { background: var(--mm-navy); color: #fff; }

/* Enlaces de contenido */
.mm-content a, .entry-content a { color: var(--mm-navy-700); text-decoration: underline; text-underline-offset: 3px; }
.mm-content a:hover { color: var(--mm-navy); }

/* Botones */
.mm-btn {
	border: none;
	border-radius: 10px;
	font-weight: 700;
	letter-spacing: .2px;
	box-shadow: 0 6px 18px rgba(14, 42, 71, .14);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.mm-btn:hover { transform: translateY(-2px); }
.mm-btn:not(.mm-btn--wa):not(.mm-btn--ghost) { background: var(--mm-navy); }
.mm-btn:not(.mm-btn--wa):not(.mm-btn--ghost):hover { background: var(--mm-navy-700); }
.mm-btn--ghost { background: #fff; border: 1.5px solid var(--mm-line); color: var(--mm-navy); box-shadow: none; }
.mm-btn--ghost:hover { border-color: var(--mm-navy); color: var(--mm-navy); }
.mm-btn--wa,
.marymed-wa-btn { background: var(--mm-wa); }
.mm-btn--wa:hover,
.marymed-wa-btn:hover { background: var(--mm-wa-dark); }
.mm-hero__cta .mm-btn--wa { background: var(--mm-wa); }
.mm-hero__cta .mm-btn--wa:hover { background: var(--mm-wa-dark); }

/* Badges */
.mm-badge { background: #e7eef6; color: var(--mm-navy); }
.mm-badge--op { background: #e5f6ec; color: #157347; }

/* Hero */
.mm-hero {
	background:
		radial-gradient(1100px 500px at 85% -10%, rgba(201, 162, 75, .18), transparent 60%),
		linear-gradient(135deg, var(--mm-navy-900) 0%, var(--mm-navy) 55%, var(--mm-navy-700) 100%);
}

/* Tarjetas */
.mm-card {
	border-radius: var(--mm-radius);
	border: 1px solid var(--mm-line);
}
.mm-card:hover {
	box-shadow: var(--mm-shadow);
	border-color: #cbd8e5;
	transform: translateY(-4px);
}
.mm-card__media { border-radius: var(--mm-radius) var(--mm-radius) 0 0; }
.mm-card__price {
	background: rgba(8, 29, 51, .88);
	backdrop-filter: blur(2px);
	font-family: var(--mm-font-head);
	letter-spacing: .3px;
}

/* Fichas */
.mm-title { color: var(--mm-navy); }
.mm-precio { color: var(--mm-navy); }
.mm-precio span { color: var(--mm-gold); font-family: var(--mm-font-head); }
.mm-side-card {
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-radius);
	box-shadow: var(--mm-shadow);
}
.mm-spec__item {
	border: 1px solid var(--mm-line);
	border-radius: 10px;
}
.mm-spec__item small { color: var(--mm-gold); font-weight: 700; }

/* Fondos suaves */
.mm-home-section--alt,
.mm-filters { background: var(--mm-bg-soft); }
.mm-filters { border: 1px solid var(--mm-line); }
.mm-cta { background: linear-gradient(180deg, #ecfdf5, #f0fdf4); }

/* Paginacion y detalles */
.mm-pagination .current { background: var(--mm-navy); border-color: var(--mm-navy); }
.mm-pagination .page-numbers { border-radius: 8px; color: var(--mm-navy); }

/* Galeria */
.mm-gallery__item { border-radius: 10px; }
.mm-lightbox__btn:hover { background: var(--mm-gold); color: var(--mm-navy-900); }

/* ==========================================================
   13) Logo del header + hero con imagen de fondo
   ========================================================== */
#site-header .custom-logo,
.site-branding .custom-logo {
	height: 52px;
	width: auto;
	max-width: none;
	object-fit: contain;
}
@media (max-width: 600px) {
	#site-header .custom-logo,
	.site-branding .custom-logo { height: 44px; }
}

/* Hero con imagen (capa oscura automatica, moderada para que la imagen luzca) */
.mm-hero { position: relative; }.mm-hero.has-image {
	background-size: cover;
	background-position: center center;
}
.mm-hero.has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* Patron comun en portales: imagen clara arriba, vineta suave hacia abajo
	   para anclar el texto y los botones sin tapar la foto. */
	background:
		linear-gradient(180deg, rgba(9, 28, 53, .15) 0%, rgba(9, 28, 53, .38) 55%, rgba(9, 28, 53, .66) 100%);
}
.mm-hero.has-image > .mm-container { position: relative; z-index: 1; }
.mm-hero.has-image .mm-hero__title {
	text-shadow: 0 3px 18px rgba(0, 0, 0, .55), 0 1px 4px rgba(0, 0, 0, .4);
}
.mm-hero.has-image .mm-hero__sub {
	text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
/* Texto claro siempre dentro del hero (aplica con o sin imagen de fondo) */
.mm-hero .mm-hero__title { color: #ffffff; text-transform: uppercase; letter-spacing: .015em; }
.mm-hero .mm-hero__sub { color: rgba(255, 255, 255, .92); }
/* Kicker (linea corta superior, estilo demo) */
.mm-hero .mm-kicker {
	color: var(--mm-gold);
	text-transform: uppercase;
	letter-spacing: 4px;
	font-weight: 700;
	font-size: 13px;
	margin: 0 0 16px;
}
/* Boton solido (primario) y contorno (secundario) dentro del hero */
.mm-hero .mm-btn--solid {
	background: var(--mm-gold);
	color: #0a1a2e;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}
.mm-hero .mm-btn--solid:hover { background: #ffffff; color: var(--mm-navy-900); }
.mm-hero .mm-btn--ghost {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, .85);
	color: #ffffff;
	box-shadow: none;
}
.mm-hero .mm-btn--ghost:hover { background: #ffffff; border-color: #ffffff; color: var(--mm-navy-900); }

/* ==========================================================
   15) Home: header transparente superpuesto + hero full-bleed
   ========================================================== */
body.marymed-front #site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1001;
	/* Velo blanco sutil de superior a inferior sobre el hero */
	background: linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, 0) 100%);
	border-bottom: none; /* anula la linea (base y la blanca) para que el hero suba limpio */
	box-shadow: none;
	backdrop-filter: none;
}
body.marymed-front #site-header .menu > li > a { color: var(--mm-navy); }
body.marymed-front #site-header .menu > li > a:hover { color: var(--mm-navy-700); border-bottom-color: var(--mm-gold); }
body.marymed-front #site-header .menu > .current-menu-item > a,
body.marymed-front #site-header .menu > .current_page_item > a { color: var(--mm-navy-700); border-bottom-color: var(--mm-gold); }
body.marymed-front #site-header .site-title a,
body.marymed-front #site-header .site-title { color: var(--mm-navy); }

/* Hero sube hasta el tope y deja aire para el header transparente */
body.marymed-front .mm-home,
body.marymed-front .mm-hero { margin-top: 0; }
body.marymed-front .mm-hero { padding-top: clamp(150px, 18vh, 230px); }
body.marymed-front .mm-hero.has-image {
	background-size: cover;
	background-position: center top;
}

/* ==========================================================
   14) Estilo "Constructions": header sticky, menú mayusculas,
       hero alto, ventajas y banda de contacto oscura
   ========================================================== */
#site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--mm-line);
	box-shadow: 0 2px 14px rgba(14, 42, 71, .06);
}
#site-header .site-branding { padding: 14px 0; }
#site-header .site-navigation .menu { display: flex; gap: 4px; flex-wrap: wrap; }
#site-header .menu > li { margin: 0; }
#site-header .menu > li > a {
	text-transform: uppercase;
	letter-spacing: 1.1px;
	font-weight: 700;
	font-size: 12px;
	color: var(--mm-navy);
	padding: 10px 13px;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
#site-header .menu > li > a:hover { color: var(--mm-navy-700); border-bottom-color: var(--mm-gold); }
#site-header .menu > .current-menu-item > a,
#site-header .menu > .current_page_item > a { color: var(--mm-navy-700); border-bottom-color: var(--mm-gold); }

/* Hero mas alto y con mas presencia (tipo one-page demo) */
.mm-hero { padding: min(13vh, 128px) 0 min(11vh, 108px); }
.mm-hero__title { font-size: clamp(30px, 6vw, 62px); font-weight: 800; }

/* Banda de ventajas (equivalentes a "A few things we're great at") */
.mm-feats { background: var(--mm-bg-soft); padding: 60px 0; }
.mm-feats__title {
	text-align: center;
	margin: 0 0 38px;
	font-size: clamp(24px, 3.4vw, 34px);
	text-transform: uppercase;
	letter-spacing: .5px;
}
.mm-feats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 22px;
}
.mm-feat {
	background: #ffffff;
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-radius);
	padding: 28px 20px;
	text-align: center;
	transition: transform .2s ease, box-shadow .2s ease;
}
.mm-feat:hover { transform: translateY(-4px); box-shadow: var(--mm-shadow); }.mm-feat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: rgba(201, 162, 75, .16);
	color: var(--mm-gold);
	margin-bottom: 16px;
}
.mm-feat h4 { margin: 0 0 8px; font-size: 17px; }
.mm-feat p { color: var(--mm-muted); font-size: 14px; line-height: 1.6; margin: 0; }

/* Banda de contacto oscura (tipo demo) */
.mm-cta {
	background: linear-gradient(135deg, var(--mm-navy-900) 0%, var(--mm-navy) 100%);
	color: #ffffff;
	padding: 60px 0;
}
.mm-cta h2 { color: #ffffff; }
.mm-cta p { color: rgba(255, 255, 255, .86); }
.mm-cta .mm-btn--wa { font-size: 16px; padding: 15px 30px; }

@media (max-width: 700px) {
	.mm-feats__grid { grid-template-columns: 1fr; }
	.mm-feat { padding: 22px 16px; }
}