/*
Theme Name: Uxmalia
Description: Tema a medida para uxmalia.com — sitio de ventas de servicios de property management en Mérida, Yucatán, con portal de propietarios (plugin uxm-portal).
Author: Uxmalia
Version: 1.0.0
Text Domain: uxmalia
*/

/* ==========================================================================
   Tokens de marca. Verde y terracota extraídos directamente de
   logo/trace.svg (el vectorizado del logo definitivo que entregó el
   usuario): #1c3c2c y #c47b45. Se conservan los mismos nombres de variable
   (--uxm-*) para no tener que tocar cada plantilla que ya las usa, solo
   cambian los valores.
   ========================================================================== */
:root {
	--uxm-ink: #17251d;
	--uxm-ink-soft: #5b6b62;
	--uxm-olive: #2c5a41;
	--uxm-olive-deep: #1c3c2c;
	--uxm-sand: #f6f3ec;
	--uxm-paper: #fdfdfd;
	--uxm-line: #e1e5e0;
	--uxm-henequen: #c47b45;
	--uxm-henequen-deep: #9c5f34;
	--uxm-shadow: 0 1px 2px rgba( 23, 37, 29, 0.06 ), 0 8px 24px -12px rgba( 23, 37, 29, 0.18 );

	--uxm-font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
	--uxm-font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var( --uxm-font-body );
	color: var( --uxm-ink );
	background: var( --uxm-paper );
	line-height: 1.6;
}

/* Oculta visualmente sin quitarlo del árbol de accesibilidad -- ej. el <h1>
   real de la portada, que el carrusel decorativo del hero no provee (sus
   títulos rotan como texto de mercadeo, no como encabezado del documento). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Scroll-reveal: fade-in direccional al entrar en pantalla (JS en
   assets/js/scroll-reveal.js agrega .is-visible vía IntersectionObserver
   la primera vez que el elemento es visible). El delay de cada elemento se
   fija inline con --uxm-reveal-delay para escalonar grupos (tarjetas,
   íconos) sin necesitar una clase numerada por posición. */
[data-reveal] {
	opacity: 0;
	transition: opacity 0.7s ease, transform 0.7s ease;
	transition-delay: var( --uxm-reveal-delay, 0ms );
}

[data-reveal="up"] {
	transform: translateY( 28px );
}

[data-reveal="down"] {
	transform: translateY( -28px );
}

[data-reveal="left"] {
	transform: translateX( 28px );
}

[data-reveal="right"] {
	transform: translateX( -28px );
}

[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {
	[data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Promo blocks: tarjetas con foto de fondo que revelan su texto al pasar
   el mouse (o enfocar por teclado) -- usadas en la galería y en las
   tarjetas de las otras líneas de negocio de la portada. */
.uxm-promo-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 1.5em;
}

.uxm-promo-block {
	position: relative;
	display: block;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	text-decoration: none;
	color: #fff;
	box-shadow: var( --uxm-shadow );
}

.uxm-promo-block img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.uxm-promo-block-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 23, 37, 29, 0 ) 40%, rgba( 23, 37, 29, 0.92 ) 100% );
	display: flex;
	align-items: flex-end;
	padding: 1.4em;
}

.uxm-promo-block-caption {
	transform: translateY( 10px );
	transition: transform 0.4s ease;
}

.uxm-promo-block-caption strong {
	display: block;
	font-family: var( --uxm-font-display );
	font-size: 1.15em;
}

.uxm-promo-block-caption span {
	display: block;
	font-size: 0.8em;
	color: var( --uxm-henequen );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 0.3em;
}

.uxm-promo-block:hover img,
.uxm-promo-block:focus-visible img {
	transform: scale( 1.06 );
}

.uxm-promo-block:hover .uxm-promo-block-caption,
.uxm-promo-block:focus-visible .uxm-promo-block-caption {
	transform: translateY( 0 );
}

a {
	color: var( --uxm-olive-deep );
}

/* Escala tipográfica real: cada nivel crece ~1.3x sobre el siguiente, para
   que haya jerarquía visible de verdad (antes h1-h4 compartían el mismo
   tamaño del body, 16px, detectado por el escáner de diseño como
   "jerarquía plana"). */
h1, h2, h3, h4 {
	font-family: var( --uxm-font-display );
	line-height: 1.2;
	margin: 0 0 0.5em;
}

h1 {
	font-size: 2.8em;
}

h2 {
	font-size: 2.2em;
}

h3 {
	font-size: 1.7em;
}

h4 {
	font-size: 1.3em;
}

.uxm-container {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Header / navegación --------------------------------------------------- */
.uxm-site-header {
	position: sticky;
	top: 0;
	background: var( --uxm-paper );
	border-bottom: 1px solid var( --uxm-line );
	z-index: 100;
}

.uxm-site-header .uxm-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 12px;
	padding-bottom: 12px;
	gap: 1em;
	flex-wrap: wrap;
}

.uxm-logo {
	display: flex;
	align-items: center;
	gap: 0.6em;
	text-decoration: none;
	color: var( --uxm-ink );
	font-family: var( --uxm-font-display );
	font-weight: 700;
	font-size: 1.2em;
}

.uxm-logo img {
	height: 44px;
	width: auto;
}

.uxm-primary-nav ul {
	list-style: none;
	display: flex;
	gap: 1.5em;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.uxm-primary-nav a {
	text-decoration: none;
	color: var( --uxm-ink );
	font-weight: 600;
}

.uxm-primary-nav a:hover {
	color: var( --uxm-olive );
}

.uxm-nav-cta {
	background: var( --uxm-olive );
	color: #fff !important;
	padding: 0.6em 1.2em;
	border-radius: 999px;
}

/* Botones ----------------------------------------------------------------- */
.uxm-btn {
	display: inline-block;
	padding: 0.85em 1.6em;
	border-radius: 999px;
	background: var( --uxm-olive );
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	border: none;
	cursor: pointer;
}

.uxm-btn:hover {
	background: var( --uxm-olive-deep );
	color: #fff;
}

.uxm-btn-outline {
	background: transparent;
	color: var( --uxm-ink );
	border: 2px solid var( --uxm-ink );
}

.uxm-btn-outline:hover {
	background: var( --uxm-ink );
	color: #fff;
}

/* Hero --------------------------------------------------------------------*/
.uxm-hero {
	background: linear-gradient( 180deg, var( --uxm-sand ), var( --uxm-paper ) );
	padding: 5em 0 4em;
}

.uxm-eyebrow {
	color: var( --uxm-olive-deep );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.85em;
}

.uxm-hero h1 {
	font-size: clamp( 2em, 4vw, 3em );
}

.uxm-hero-actions {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
	margin-top: 1.5em;
}

/* Hero con carrusel de fotos de fondo (portada) -----------------------------*/
.uxm-hero-photo {
	position: relative;
	overflow: hidden;
	min-height: 640px;
	padding: 6em 0;
	background: var( --uxm-ink ); /* se ve una fracción de segundo mientras carga la 1a foto */
}

.uxm-hero-carousel {
	position: absolute;
	inset: 0;
}

/* Cada slide es una unidad completa (foto + overlay + texto propio) que
   aparece/desaparece junta -- así el texto siempre corresponde a su foto. */
.uxm-hero-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	transition: opacity 1.4s ease;
}

.uxm-hero-slide.is-active {
	opacity: 1;
}

.uxm-hero-slide-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.uxm-hero-slide-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.uxm-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient( 100deg, rgba( 23, 37, 29, 0.86 ) 0%, rgba( 23, 37, 29, 0.55 ) 55%, rgba( 23, 37, 29, 0.35 ) 100% );
}

.uxm-hero-slide > .uxm-container {
	position: relative;
	z-index: 2;
	width: 100%;
}

.uxm-hero-content {
	max-width: 640px;
	color: #fff;
}

.uxm-hero-slide-title {
	font-family: var( --uxm-font-display );
	line-height: 1.2;
	margin: 0 0 0.5em;
	font-size: clamp( 2em, 4vw, 3em );
	font-weight: 800;
}

.uxm-hero-photo .uxm-eyebrow {
	color: var( --uxm-henequen );
}

.uxm-hero-photo p,
.uxm-hero-photo .uxm-portal-help {
	color: rgba( 255, 255, 255, 0.88 );
}

.uxm-hero-photo .uxm-portal-help a {
	color: #fff;
	text-decoration: underline;
}

/* Secciones genéricas ------------------------------------------------------*/
.uxm-section {
	padding: 4em 0;
}

.uxm-section-alt {
	background: var( --uxm-sand );
}

.uxm-section-header {
	max-width: 640px;
	margin: 0 auto 2.5em;
	text-align: center;
}

/* Grid de servicios / valor agregado --------------------------------------*/
.uxm-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 1.5em;
}

.uxm-card {
	background: var( --uxm-paper );
	border: 1px solid var( --uxm-line );
	border-radius: 14px;
	padding: 1.8em;
	box-shadow: var( --uxm-shadow );
}

.uxm-card-icon {
	font-size: 1.8em;
	margin-bottom: 0.5em;
}

/* Alcance numerado (página Servicios) --------------------------------------*/
.uxm-scope-list {
	counter-reset: uxm-scope;
	display: grid;
	gap: 1.2em;
}

.uxm-scope-item {
	display: flex;
	gap: 1em;
	align-items: flex-start;
	background: var( --uxm-paper );
	border: 1px solid var( --uxm-line );
	border-radius: 14px;
	padding: 1.4em 1.6em;
}

.uxm-scope-item::before {
	counter-increment: uxm-scope;
	content: counter( uxm-scope );
	flex: none;
	width: 2.2em;
	height: 2.2em;
	border-radius: 50%;
	background: var( --uxm-olive );
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

/* CTA final -----------------------------------------------------------------*/
.uxm-cta {
	background: var( --uxm-ink );
	color: #fff;
	text-align: center;
	padding: 4em 0;
}

.uxm-cta h2 {
	color: #fff;
}

/* Footer --------------------------------------------------------------------*/
.uxm-site-footer {
	background: var( --uxm-ink );
	color: rgba( 255, 255, 255, 0.75 );
	padding: 4.5em 0 2em;
	font-size: 0.95em;
}

.uxm-site-footer a {
	color: rgba( 255, 255, 255, 0.85 );
	text-decoration: none;
}

.uxm-site-footer a:hover {
	color: #fff;
}

.uxm-footer-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 2.5em;
	padding-bottom: 2.5em;
	margin-bottom: 2em;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.12 );
}

/* Solo texto, sin el isotipo: el SVG del logo trae fondo blanco opaco (no
   transparente), así que sobre este fondo oscuro se vería como una caja
   blanca -- el acento henequen hace las veces de marca aquí. */
.uxm-footer-brand {
	color: var( --uxm-henequen );
	font-family: var( --uxm-font-display );
	font-weight: 800;
	font-size: 1.3em;
	margin-bottom: 0.5em;
}

.uxm-footer-col h4 {
	color: #fff;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 1em;
}

.uxm-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.7em;
}

.uxm-footer-bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1em;
	font-size: 0.85em;
	color: rgba( 255, 255, 255, 0.5 );
}

/* FAQ (accordion sin JS, &lt;details&gt;/&lt;summary&gt;) -------------------------------*/
.uxm-faq {
	display: grid;
	gap: 0.8em;
	margin-top: 1.5em;
}

.uxm-faq-item {
	background: var( --uxm-paper );
	border: 1px solid var( --uxm-line );
	border-radius: 14px;
	padding: 1.1em 1.4em;
}

.uxm-faq-item summary {
	cursor: pointer;
	font-weight: 700;
	font-family: var( --uxm-font-display );
	list-style: none;
}

.uxm-faq-item summary::-webkit-details-marker {
	display: none;
}

.uxm-faq-item summary::after {
	content: "+";
	float: right;
	color: var( --uxm-henequen );
	font-weight: 800;
}

.uxm-faq-item[open] summary::after {
	content: "–";
}

.uxm-faq-item div {
	margin-top: 0.8em;
	color: var( --uxm-ink-soft );
}

.uxm-faq-item div p:last-child {
	margin-bottom: 0;
}

/* Blog -------------------------------------------------------------------*/
.uxm-blog-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
	gap: 2em;
}

.uxm-blog-card {
	display: block;
	text-decoration: none;
	color: var( --uxm-ink );
	background: var( --uxm-paper );
	border: 1px solid var( --uxm-line );
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var( --uxm-shadow );
}

.uxm-blog-card img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
}

.uxm-blog-card-body {
	padding: 1.4em;
}

.uxm-blog-card-body span {
	display: block;
	font-size: 0.8em;
	color: var( --uxm-henequen-deep );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.5em;
}

.uxm-blog-card-body h3 {
	font-size: 1.3em;
	margin-bottom: 0.4em;
}

.uxm-blog-card-body p {
	color: var( --uxm-ink-soft );
	margin: 0;
}

.uxm-article {
	max-width: 760px;
	margin: 0 auto;
}

.uxm-article-meta {
	color: var( --uxm-ink-soft );
	font-size: 0.9em;
	margin-bottom: 2em;
}

.uxm-article h2 {
	font-size: 1.8em;
	margin-top: 1.4em;
}

.uxm-article h3 {
	font-size: 1.4em;
}

.uxm-article img {
	border-radius: 14px;
	margin: 1.5em 0;
}

.uxm-article-cta {
	background: var( --uxm-sand );
	border: 1px solid var( --uxm-line );
	border-radius: 14px;
	padding: 1.6em;
	margin: 2.5em 0;
}

.uxm-breadcrumb {
	font-size: 0.85em;
	color: var( --uxm-ink-soft );
	margin-bottom: 1.5em;
}

.uxm-breadcrumb a {
	color: var( --uxm-ink-soft );
}

/* Switcher de idioma -------------------------------------------------------*/
.uxm-lang-switch a {
	color: var( --uxm-ink-soft );
	font-weight: 600;
	font-size: 0.85em;
	text-decoration: none;
	padding: 0.3em 0.6em;
	border: 1px solid var( --uxm-line );
	border-radius: 999px;
}

.uxm-lang-switch a:hover {
	color: var( --uxm-olive );
	border-color: var( --uxm-olive );
}

/* Formularios genéricos (contacto, portal) -----------------------------------*/
.uxm-form input, .uxm-form textarea, .uxm-form select {
	font-family: inherit;
	font-size: 1em;
}

/* Responsive ------------------------------------------------------------------*/
@media ( max-width: 780px ) {
	.uxm-hero-photo {
		min-height: 480px;
		padding: 4em 0;
	}

	.uxm-footer-grid {
		grid-template-columns: 1fr;
		gap: 2em;
	}
}