/* =========================================================================
   Manitas Efectivas – CSS principal del child theme
   -------------------------------------------------------------------------
   Base mínima, limpia y profesional. Pensada para complementar Flatsome,
   no para sobrescribirlo. Se amplía a medida que maquetemos con UX Builder.

   Convención de clases: prefijo .me- (Manitas Efectivas) para evitar
   colisiones con Flatsome y con plugins.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Variables (Custom Properties)
   ------------------------------------------------------------------------- */
:root {
	/* Colores de marca: confianza, cercanía y profesionalidad. */
	--me-color-primary: #1f6feb;        /* Azul confianza (acciones) */
	--me-color-primary-dark: #1857c2;   /* Hover / estados activos */
	--me-color-secondary: #0f2742;      /* Azul oscuro (titulares) */
	--me-color-accent: #ff8a3d;         /* Naranja cálido (CTA puntual) */

	--me-color-text: #2b2f36;           /* Texto base */
	--me-color-muted: #6b7280;          /* Texto secundario */
	--me-color-bg: #ffffff;             /* Fondo base */
	--me-color-bg-soft: #f5f7fa;        /* Secciones alternas */
	--me-color-border: #e4e8ee;         /* Bordes suaves */
	--me-color-success: #1f9d57;        /* Bloques de confianza */

	/* Tipografía y ritmo vertical. */
	--me-font-base: inherit;            /* Hereda la fuente de Flatsome */
	--me-line-height: 1.6;

	/* Espaciado. */
	--me-space-sm: 0.75rem;
	--me-space-md: 1.5rem;
	--me-space-lg: 3rem;
	--me-section-py: 4rem;              /* Padding vertical de secciones */

	/* Bordes y sombras (suaves, nada agresivo). */
	--me-radius: 10px;
	--me-radius-sm: 6px;
	--me-shadow: 0 4px 18px rgba(15, 39, 66, 0.08);
	--me-shadow-hover: 0 8px 26px rgba(15, 39, 66, 0.14);
	--me-transition: 0.25s ease;
}

/* -------------------------------------------------------------------------
   2. Utilidades de sección
   ------------------------------------------------------------------------- */
.me-section {
	padding-top: var(--me-section-py);
	padding-bottom: var(--me-section-py);
}

.me-section--soft {
	background-color: var(--me-color-bg-soft);
}

.me-section__title {
	color: var(--me-color-secondary);
	font-weight: 700;
	margin-bottom: var(--me-space-sm);
}

.me-section__lead {
	color: var(--me-color-muted);
	max-width: 42rem;
	line-height: var(--me-line-height);
	margin-bottom: var(--me-space-md);
}

/* -------------------------------------------------------------------------
   3. Botones reutilizables
   ------------------------------------------------------------------------- */
.me-btn {
	display: inline-block;
	padding: 0.75rem 1.6rem;
	border-radius: var(--me-radius-sm);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background-color var(--me-transition),
		color var(--me-transition),
		border-color var(--me-transition),
		transform var(--me-transition);
}

.me-btn:hover,
.me-btn:focus-visible {
	transform: translateY(-1px);
}

.me-btn--primary {
	background-color: var(--me-color-primary);
	color: #fff;
}

.me-btn--primary:hover,
.me-btn--primary:focus-visible {
	background-color: var(--me-color-primary-dark);
	color: #fff;
}

.me-btn--outline {
	background-color: transparent;
	color: var(--me-color-primary);
	border-color: var(--me-color-primary);
}

.me-btn--outline:hover,
.me-btn--outline:focus-visible {
	background-color: var(--me-color-primary);
	color: #fff;
}

.me-btn--accent {
	background-color: var(--me-color-accent);
	color: #fff;
}

.me-btn--accent:hover,
.me-btn--accent:focus-visible {
	filter: brightness(0.95);
	color: #fff;
}

/* -------------------------------------------------------------------------
   4. Tarjetas de servicio
   ------------------------------------------------------------------------- */
.me-services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--me-space-md);
}

.me-service-card {
	background-color: var(--me-color-bg);
	border: 1px solid var(--me-color-border);
	border-radius: var(--me-radius);
	padding: var(--me-space-md);
	box-shadow: var(--me-shadow);
	transition: box-shadow var(--me-transition), transform var(--me-transition);
}

.me-service-card:hover {
	box-shadow: var(--me-shadow-hover);
	transform: translateY(-3px);
}

.me-service-card__icon {
	color: var(--me-color-primary);
	font-size: 2rem;
	margin-bottom: var(--me-space-sm);
}

.me-service-card__title {
	color: var(--me-color-secondary);
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.me-service-card__text {
	color: var(--me-color-muted);
	line-height: var(--me-line-height);
	margin: 0;
}

/* -------------------------------------------------------------------------
   5. Bloques de confianza
   ------------------------------------------------------------------------- */
.me-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--me-space-md);
	align-items: stretch;
}

.me-trust__item {
	flex: 1 1 200px;
	display: flex;
	align-items: flex-start;
	gap: var(--me-space-sm);
	padding: var(--me-space-sm) var(--me-space-md);
	background-color: var(--me-color-bg-soft);
	border-radius: var(--me-radius);
	border-left: 4px solid var(--me-color-success);
}

.me-trust__icon {
	color: var(--me-color-success);
	font-size: 1.4rem;
	line-height: 1;
	flex: 0 0 auto;
}

.me-trust__label {
	color: var(--me-color-secondary);
	font-weight: 600;
	margin: 0;
}

.me-trust__desc {
	color: var(--me-color-muted);
	font-size: 0.9rem;
	margin: 0.15rem 0 0;
}

/* -------------------------------------------------------------------------
   6. Ajustes responsive
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 48em) {
	:root {
		--me-section-py: 2.5rem;
	}

	.me-btn {
		display: block;
		width: 100%;
	}
}

/* =========================================================================
   7. HOME – Manitas Efectivas
   -------------------------------------------------------------------------
   Maquetación de la home, toda bajo el wrapper .me-home.
   La paleta de marca (amarillo técnico + carbón) se define como variables
   con ÁMBITO LOCAL en .me-home: así los componentes que ya existen
   (.me-btn, .me-service-card, .me-trust…) adoptan la identidad de la home
   sin tocar sus reglas base ni afectar a otras páginas.
   Nota: .me-confianza, .me-confianza__text y .me-business__content son
   contenedores estructurales (hijos de grid) sin estilo propio.
   ========================================================================= */
.me-home {
	/* Paleta de marca (ámbito local) */
	--me-color-primary: #F7C600;                 /* Amarillo técnico (acento premium) */
	--me-color-primary-dark: #D9AD00;            /* Hover */
	--me-color-secondary: #111111;               /* Negro carbón (titulares) */
	--me-color-accent: var(--me-color-primary);  /* Neutraliza el naranja de la base */
	--me-color-text: #2B2B2B;                    /* Gris oscuro (texto) */
	--me-color-muted: #6B6B6B;                   /* Gris texto secundario */
	--me-color-bg: #FFFFFF;
	--me-color-bg-soft: #F5F5F2;                 /* Gris claro de fondo */
	--me-color-border: #E7E7E1;

	/* Sombras con tinte carbón (anulan el azul de la paleta anterior) */
	--me-shadow: 0 4px 18px rgba(17, 17, 17, 0.08);
	--me-shadow-hover: 0 10px 28px rgba(17, 17, 17, 0.14);

	/* Ritmo vertical propio (auto-contenido, no depende del :root global) */
	--me-section-py: 4rem;

	/* Tonos para fondos oscuros */
	--me-ink: #111111;
	--me-ink-2: #2B2B2B;
	--me-on-dark: #FFFFFF;
	--me-on-dark-soft: #C9C9C4;

	color: var(--me-color-text);
}

/* Contenedor interno reutilizable */
.me-home .me-container {
	width: 100%;
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;          /* fallback de centrado */
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* Etiqueta superior (eyebrow) */
.me-home .me-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.75rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--me-color-text);
}
.me-home .me-eyebrow::before {
	content: "";
	width: 26px;
	height: 3px;
	border-radius: 3px;
	background: var(--me-color-primary);
}

/* Resaltado de marca en titulares */
.me-home .me-hl { color: var(--me-color-primary); }

/* Fila de botones */
.me-home .me-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 1.5rem;
}

/* Botón primario: amarillo con texto carbón (contraste alto) */
.me-home .me-btn--primary { color: #111111; }
.me-home .me-btn--primary:hover,
.me-home .me-btn--primary:focus-visible {
	color: #111111;
	background-color: var(--me-color-primary-dark);
}

/* Botón "ghost" para fondos oscuros (autosuficiente, no depende de la base) */
.me-home .me-btn--ghost {
	background-color: transparent;
	color: #FFFFFF;
	border: 2px solid rgba(255, 255, 255, 0.5);
}
.me-home .me-btn--ghost:hover,
.me-home .me-btn--ghost:focus-visible {
	background-color: #FFFFFF;
	color: #111111;
	border-color: #FFFFFF;
}

/* Foco visible accesible (WCAG 2.4.7), por clase (sin tocar a/button) */
.me-home .me-btn:focus-visible {
	outline: 3px solid var(--me-color-primary);
	outline-offset: 2px;
}
.me-home .me-btn--primary:focus-visible { outline-color: #111111; }

/* Barra lateral amarilla en los items de confianza (acento de marca) */
.me-home .me-trust__item { border-left-color: var(--me-color-primary); }

/* ---- 1. Hero ---- */
.me-home .me-hero {
	background-color: var(--me-ink);
	color: var(--me-on-dark);
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
	background-image: radial-gradient(circle at 85% 15%, rgba(247, 198, 0, 0.10), transparent 45%);
}
.me-home .me-hero__inner { text-align: center; }
.me-home .me-hero .me-eyebrow { color: var(--me-color-primary); }
.me-home .me-hero__title {
	color: #FFFFFF;
	font-size: clamp(1.9rem, 4.5vw, 3.1rem);
	font-weight: 800;
	line-height: 1.12;
	margin: 0 auto 1rem;
	max-width: 18ch;
}
.me-home .me-hero__subtitle {
	color: var(--me-on-dark-soft);
	font-size: clamp(1rem, 1.6vw, 1.18rem);
	line-height: 1.6;
	max-width: 46rem;
	margin: 0 auto;
}
.me-home .me-hero .me-actions { justify-content: center; }
.me-home .me-hero__trust { justify-content: center; margin-top: 2.25rem; }
.me-home .me-hero__trust .me-trust__item {
	flex: 0 1 auto;
	background-color: rgba(255, 255, 255, 0.06);
}
.me-home .me-hero__trust .me-trust__label { color: #FFFFFF; }
.me-home .me-hero__trust .me-trust__icon { color: var(--me-color-primary); }

/* ---- 2. Servicios ---- */
.me-home .me-services-section { background-color: var(--me-color-bg); }
.me-home .me-services { margin-top: 2rem; }
.me-home .me-service-card { border-top: 3px solid var(--me-color-primary); } /* acento superior */
.me-home .me-service-card__icon { color: #111111; line-height: 0; }
.me-home .me-service-card__icon svg { width: 30px; height: 30px; }

/* ---- 3. Confianza ---- */
.me-home .me-confianza__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
.me-home .me-confianza__pillars { flex-direction: column; }
.me-home .me-confianza__pillars .me-trust__item { flex: 0 0 auto; }
.me-home .me-confianza__pillars .me-trust__icon { color: var(--me-color-secondary); }

/* ---- 4. Proceso ---- */
.me-home .me-process { background-color: var(--me-color-bg); }
.me-home .me-process__list {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.25rem;
}
.me-home .me-process__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.75rem;
}
.me-home .me-process__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: var(--me-color-primary);
	color: #111111;
	font-weight: 800;
	font-size: 1.1rem;
	flex: 0 0 auto;
}
.me-home .me-process__label {
	color: var(--me-color-secondary);
	font-weight: 600;
	line-height: 1.4;
	max-width: 16ch;
}

/* ---- 5. Empresas / Comunidades ---- */
.me-home .me-business {
	background-color: var(--me-ink-2);
	color: var(--me-on-dark);
}
.me-home .me-business__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}
.me-home .me-business .me-eyebrow { color: var(--me-color-primary); }
.me-home .me-business .me-section__title { color: #FFFFFF; }
.me-home .me-business .me-section__lead { color: var(--me-on-dark-soft); }
.me-home .me-business__list { flex-direction: column; }
.me-home .me-business__list .me-trust__item {
	flex: 0 0 auto;
	background-color: rgba(255, 255, 255, 0.06);
}
.me-home .me-business__list .me-trust__label { color: #FFFFFF; }
.me-home .me-business__list .me-trust__desc { color: var(--me-on-dark-soft); }
.me-home .me-business__list .me-trust__icon { color: var(--me-color-primary); }

/* ---- 6. CTA final ---- */
.me-home .me-cta-section { background-color: var(--me-color-bg-soft); }
.me-home .me-cta {
	background-color: var(--me-ink);
	color: var(--me-on-dark);
	border-radius: 16px;
	padding: clamp(2.25rem, 5vw, 3.75rem);
	text-align: center;
	background-image: radial-gradient(circle at 50% 0%, rgba(247, 198, 0, 0.12), transparent 55%);
}
.me-home .me-cta .me-eyebrow { color: var(--me-color-primary); }
.me-home .me-cta__title {
	color: #FFFFFF;
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	font-weight: 800;
	margin: 0 0 0.75rem;
}
.me-home .me-cta__text {
	color: var(--me-on-dark-soft);
	max-width: 40rem;
	margin: 0 auto;
	line-height: 1.6;
}
.me-home .me-cta__actions { justify-content: center; }

/* ---- Responsive ---- */
@media only screen and (max-width: 64em) {
	.me-home .me-process__list { grid-template-columns: repeat(3, 1fr); }
	.me-home .me-confianza__inner,
	.me-home .me-business__grid { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 48em) {
	.me-home { --me-section-py: 2.5rem; }
	.me-home .me-process__list { grid-template-columns: 1fr; }
	.me-home .me-process__step {
		flex-direction: row;
		text-align: left;
		justify-content: flex-start;
	}
	.me-home .me-process__label { max-width: none; }
	.me-home .me-hero__title { max-width: none; }
	.me-home .me-hero__trust { flex-direction: column; align-items: center; }
}

/* -------------------------------------------------------------------------
   8. HOME – Full-bleed (fondo a sangre completa)
   -------------------------------------------------------------------------
   Saca las secciones del contenedor de Flatsome (~1080px) para que el fondo
   llegue de borde a borde del viewport. El contenido sigue centrado por
   .me-container (max-width 1140px). Sin scroll horizontal: el tema padre ya
   aplica html { overflow-x: hidden }. Solo afecta a .me-home.
   ------------------------------------------------------------------------- */
.me-home .me-hero,
.me-home .me-services-section,
.me-home .me-confianza,
.me-home .me-process,
.me-home .me-business,
.me-home .me-cta-section {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* =========================================================================
   9. Formulario de presupuesto (.me-form)
   -------------------------------------------------------------------------
   Vive fuera de .me-home (página propia), así que redefine aquí la paleta
   de marca con ámbito local para que botones y acentos salgan en amarillo.
   ========================================================================= */
.me-form {
	--me-color-primary: #F7C600;
	--me-color-primary-dark: #D9AD00;
	--me-color-secondary: #111111;
	--me-color-text: #2B2B2B;
	--me-color-muted: #6B6B6B;
	--me-color-bg: #FFFFFF;
	--me-color-bg-soft: #F5F5F2;
	--me-color-border: #E7E7E1;

	color: var(--me-color-text);
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* Honeypot anti-spam: fuera de pantalla, no visible. */
.me-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.me-form__group {
	border: 1px solid var(--me-color-border);
	border-radius: 12px;
	padding: 1.25rem 1.25rem 1.4rem;
	margin: 0 0 1.25rem;
}
.me-form__legend {
	color: var(--me-color-secondary);
	font-weight: 700;
	padding: 0 0.5rem;
}
.me-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.me-form__row--3 { grid-template-columns: 1fr 1fr 1fr; }
.me-form__field { display: block; margin-bottom: 1rem; }
.me-form__label {
	display: block;
	font-weight: 600;
	color: var(--me-color-secondary);
	margin-bottom: 0.35rem;
	font-size: 0.95rem;
}
.me-form input[type="text"],
.me-form input[type="tel"],
.me-form input[type="email"],
.me-form select,
.me-form textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--me-color-border);
	border-radius: 8px;
	background: #fff;
	color: var(--me-color-text);
	font: inherit;
	line-height: 1.5;   /* evita que el texto del desplegable se corte */
	height: auto;
}
.me-form input:focus,
.me-form select:focus,
.me-form textarea:focus {
	outline: 2px solid var(--me-color-primary);
	outline-offset: 1px;
	border-color: var(--me-color-primary);
}
.me-form__options { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; }
.me-form__services {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem 1.25rem;
}
.me-form__opt {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	cursor: pointer;
	line-height: 1.35;
}
.me-form__opt input { margin-top: 0.2rem; accent-color: var(--me-color-primary); }
.me-form__sub {
	margin: 0.5rem 0 0.25rem 1.6rem;
	padding: 0.6rem 0.85rem;
	background: var(--me-color-bg-soft);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.me-form__opt--sm { font-size: 0.92rem; color: var(--me-color-muted); }
.me-form__hint { font-size: 0.9rem; color: var(--me-color-muted); margin: 0.5rem 0 0; }
.me-form input[type="file"] {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px dashed var(--me-color-border);
	border-radius: 8px;
	background: var(--me-color-bg-soft);
	color: var(--me-color-text);
	font: inherit;
	cursor: pointer;
}

/* Autocompletado de dirección (OpenStreetMap) */
.me-form__field--search { position: relative; }
.me-addr-suggest {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 30;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--me-color-border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(17, 17, 17, 0.12);
	max-height: 260px;
	overflow-y: auto;
}
.me-addr-suggest__item {
	padding: 0.6rem 0.85rem;
	cursor: pointer;
	line-height: 1.3;
}
.me-addr-suggest__item:hover,
.me-addr-suggest__item.is-active { background: var(--me-color-bg-soft); }
.me-addr-suggest__credit {
	padding: 0.4rem 0.85rem;
	font-size: 0.72rem;
	color: var(--me-color-muted);
	border-top: 1px solid var(--me-color-border);
	cursor: default;
}
.me-form__consent { font-size: 0.92rem; }
.me-form__submit { margin-top: 0.5rem; }
.me-form .me-btn--primary { color: #111111; }
.me-form .me-btn:focus-visible { outline: 3px solid #111111; outline-offset: 2px; }

.me-form__alert { border-radius: 10px; padding: 1rem 1.2rem; line-height: 1.5; }
.me-form__alert--ok { background: #eef7f0; border-left: 4px solid #1f9d57; color: #14532d; }
.me-form__alert--err { background: #fdecec; border-left: 4px solid #d33; color: #7f1d1d; }

@media only screen and (max-width: 48em) {
	.me-form__row,
	.me-form__row--3,
	.me-form__services { grid-template-columns: 1fr; }
}

/* =========================================================================
   10. Header – logo de tamaño estable
   -------------------------------------------------------------------------
   Flatsome encoge el logo al hacer scroll (90px arriba → 70px "pegado") y lo
   agranda al volver arriba: ese es el "salto" raro. Fijamos un alto único en
   ambos estados para que no se mueva. Cambia 70px por el alto que prefieras.
   Afecta al header del tema (#logo), no a .me-home, porque es donde vive el
   logo (lo pediste tú expresamente).
   ========================================================================= */
#logo img,
.stuck #logo img {
	max-height: 70px !important;
}

/* =========================================================================
   11. Formulario interactivo (wizard) .me-wz
   ========================================================================= */
.me-wz {
	--me-color-primary: #F7C600;
	--me-color-primary-dark: #D9AD00;
	--me-color-secondary: #111111;
	--me-color-text: #2B2B2B;
	--me-color-muted: #6B6B6B;
	--me-color-bg: #FFFFFF;
	--me-color-bg-soft: #F5F5F2;
	--me-color-border: #E7E7E1;

	color: var(--me-color-text);
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* Campos (mismo look que .me-form, re-declarado para el ámbito .me-wz) */
.me-wz input[type="text"],
.me-wz input[type="tel"],
.me-wz input[type="email"],
.me-wz select,
.me-wz textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--me-color-border);
	border-radius: 8px;
	background: #fff;
	color: var(--me-color-text);
	font: inherit;
	line-height: 1.5;
	height: auto;
}
.me-wz input:focus,
.me-wz select:focus,
.me-wz textarea:focus {
	outline: 2px solid var(--me-color-primary);
	outline-offset: 1px;
	border-color: var(--me-color-primary);
}
.me-wz input[type="file"] {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px dashed var(--me-color-border);
	border-radius: 8px;
	background: var(--me-color-bg-soft);
	color: var(--me-color-text);
	font: inherit;
	cursor: pointer;
}

.me-wz__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.me-wz__progress {
	height: 6px;
	background: var(--me-color-bg-soft);
	border-radius: 99px;
	overflow: hidden;
}
.me-wz__progress-fill {
	display: block;
	height: 100%;
	width: 16.6%;
	background: var(--me-color-primary);
	transition: width 0.3s ease;
}
.me-wz__count { text-align: right; font-size: 0.85rem; color: var(--me-color-muted); margin: 0.4rem 0 1.25rem; }

.me-wz__title { color: var(--me-color-secondary); font-weight: 700; margin: 0 0 0.4rem; }
.me-wz__phrase { text-align: center; color: var(--me-color-muted); font-size: 0.95rem; margin: 0 auto 1.5rem; max-width: 34rem; }

.me-wz__step { animation: meWzFade 0.3s ease; }
@keyframes meWzFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.me-wz__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.8rem;
}
.me-wz__cards--4 { grid-template-columns: repeat(4, 1fr); }
.me-wz__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: 1.1rem 0.8rem;
	text-align: center;
	cursor: pointer;
	border: 2px solid var(--me-color-border);
	border-radius: 12px;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.me-wz__card:hover { border-color: #cfcfca; transform: translateY(-2px); }
.me-wz__card input { position: absolute; opacity: 0; pointer-events: none; }
.me-wz__card-icon { color: var(--me-color-secondary); line-height: 0; }
.me-wz__card-icon svg { width: 34px; height: 34px; }
.me-wz__card-label { font-weight: 600; color: var(--me-color-secondary); font-size: 0.95rem; line-height: 1.25; }
.me-wz__card.is-selected { border-color: var(--me-color-primary); box-shadow: 0 0 0 3px rgba(247, 198, 0, 0.25); }
.me-wz__card.is-selected .me-wz__card-icon { color: var(--me-color-primary-dark); }
/* Foco visible accesible al navegar con teclado */
.me-wz__card input:focus-visible + .me-wz__card-icon { outline: 3px solid var(--me-color-primary); outline-offset: 4px; border-radius: 6px; }

.me-wz__subs { margin-top: 1rem; }
.me-wz__sub-title { font-weight: 600; color: var(--me-color-secondary); margin: 0 0 0.35rem; font-size: 0.9rem; }
.me-wz__field--search { position: relative; }

.me-wz__nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; }
.me-wz__next, .me-wz__submit { margin-left: auto; }
.me-wz__back { background: transparent; color: var(--me-color-secondary); border-color: var(--me-color-border); }
.me-wz__back:hover { border-color: #cfcfca; }
.me-wz .me-btn--primary { color: #111111; }
.me-wz .me-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.me-wz .me-btn:focus-visible { outline: 3px solid #111111; outline-offset: 2px; }

.me-wz__error { color: #7f1d1d; background: #fdecec; border-left: 4px solid #d33; padding: 0.8rem 1rem; border-radius: 8px; margin-top: 1rem; }

/* Foco de teclado sobre TODA la tarjeta (robusto frente a reordenar markup) */
.me-wz__card:has(input:focus-visible) {
	outline: 3px solid var(--me-color-primary);
	outline-offset: 2px;
}
/* Señal NO cromática de selección (WCAG 1.4.1) */
.me-wz__card.is-selected::after {
	content: "✓";
	position: absolute;
	top: 0.5rem;
	right: 0.6rem;
	color: var(--me-color-primary-dark);
	font-weight: 800;
	line-height: 1;
}
/* Pulidos de reutilización en el wizard */
.me-wz .me-form__sub { margin-left: 0; }
.me-wz__card-label { overflow-wrap: anywhere; }
.me-wz select { padding-right: 2.2rem; }

@media only screen and (max-width: 48em) {
	.me-wz__cards--4 { grid-template-columns: 1fr 1fr; }
	.me-wz__card { padding: 1rem 0.5rem; }
	.me-wz__nav { flex-wrap: wrap; }
	.me-wz__back, .me-wz__next, .me-wz__submit { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.me-wz__step { animation: none; }
	.me-wz__progress-fill,
	.me-wz__card { transition: none; }
}

/* Fix: respetar el atributo [hidden] aunque la clase fije display.
   (Hace que se oculten de verdad los botones del wizard y las sub-opciones.) */
.me-form__sub[hidden] { display: none; }
.me-wz .me-btn[hidden] { display: none; }

/* Paso 2: las 9 tarjetas quedan FIJAS (no se reordenan al elegir).
   En pantallas anchas el panel de detalles "salta" al margen derecho, fuera
   del bloque, sin mover las tarjetas. Si no cabe, aparece debajo.
   Mientras no haya nada seleccionado, el panel se colapsa (:has). */
.me-wz__step2 { position: relative; }
.me-wz__subs {
	margin-top: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.me-wz__subs:not(:has(.me-form__sub:not([hidden]))) { display: none; }

@media (min-width: 1300px) {
	.me-wz__subs {
		position: absolute;
		top: 0;
		left: calc(100% + 1.25rem);
		width: 250px;
		margin-top: 0;
		/* No pasar de la altura de las tarjetas: si hay más detalles, scroll
		   interno. Así el panel nunca se monta sobre el footer ni lo estira. */
		max-height: 100%;
		overflow-y: auto;
	}
}

/* =========================================================================
   12. Galería de proyectos (.me-galeria) — tarjetas redondeadas y modernas
   ========================================================================= */
.me-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}
.me-galeria__card {
	display: block;
	border-radius: 16px;
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid #E7E7E1;
	box-shadow: 0 4px 18px rgba(17, 17, 17, 0.08);
	text-decoration: none;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.me-galeria__card:hover {
	box-shadow: 0 10px 28px rgba(17, 17, 17, 0.14);
	transform: translateY(-4px);
}
.me-galeria__card:focus-visible {
	outline: 3px solid #F7C600;
	outline-offset: 2px;
}
.me-galeria__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #F5F5F2;
}
.me-galeria__media img,
.me-galeria__media .me-galeria__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.me-galeria__card:hover .me-galeria__media img { transform: scale(1.05); }
.me-galeria__ph { display: block; width: 100%; height: 100%; }
.me-galeria__title {
	display: block;
	padding: 1rem 1.15rem;
	font-weight: 700;
	color: #111111;
	line-height: 1.3;
}
.me-galeria__empty { text-align: center; color: #6B6B6B; }

@media (prefers-reduced-motion: reduce) {
	.me-galeria__card,
	.me-galeria__media img { transition: none; }
}