/* ============================================================================
   MEVAK UI — Sistema de diseño compartido (WordPress + Drupal)
   Marca Mevak Real Estate. Sin dependencias externas ni CDN: todo local.
   Tokens vía CSS custom properties -> personalizable desde cada CMS.
   ============================================================================ */

/* ---- Tipografías corporativas (self-host) -------------------------------- */
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("../fonts/Supreme-Variable.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}

/* ---- Tokens de marca (sobre-escribibles por el CMS) ---------------------- */
:root {
  --mv-forest:      #253A20;
  --mv-operational: #102818;
  --mv-lime:        #D3DA1F;
  --mv-cream:       #F4F0E6;
  --mv-palegreen:   #E5EDC8;
  --mv-olive:       #87915A;
  --mv-charcoal:    #1E261B;
  --mv-muted:       #6A7164;
  --mv-white:       #ffffff;

  /* Roles semánticos (los CMS personalizan estos) */
  --mv-bg:          var(--mv-cream);
  --mv-surface:     #ffffff;
  --mv-ink:         var(--mv-charcoal);
  --mv-ink-soft:    var(--mv-muted);
  --mv-brand:       var(--mv-forest);
  --mv-accent:      var(--mv-lime);
  --mv-on-brand:    var(--mv-lime);

  /* Tipografía */
  --mv-font-sans:    "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mv-font-display: "Supreme", ui-sans-serif, system-ui, sans-serif;

  /* Escala fluida */
  --mv-step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --mv-step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
  --mv-step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --mv-step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --mv-step-3:  clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --mv-step-4:  clamp(2.4rem, 1.8rem + 3.2vw, 4.4rem);
  --mv-step-5:  clamp(3rem, 2rem + 5vw, 6rem);

  /* Espaciado / formas */
  --mv-radius:    14px;
  --mv-radius-sm: 8px;
  --mv-radius-pill: 999px;
  --mv-gap:       clamp(1rem, 0.6rem + 2vw, 2rem);
  --mv-section:   clamp(3.5rem, 2rem + 7vw, 7rem);
  --mv-container: 1200px;
  --mv-container-wide: 1360px;

  /* Sombras y transiciones */
  --mv-shadow-sm: 0 1px 2px rgba(16,40,24,.06), 0 2px 8px rgba(16,40,24,.05);
  --mv-shadow:    0 10px 30px -12px rgba(16,40,24,.25);
  --mv-shadow-lg: 0 30px 60px -20px rgba(16,40,24,.35);
  --mv-ring:      0 0 0 3px rgba(211,218,31,.45);
  --mv-ease:      cubic-bezier(.22,.61,.36,1);
  --mv-dur:       .5s;
}

/* ---- Base ---------------------------------------------------------------- */
.mv-scope, .mv-scope * { box-sizing: border-box; }
.mv-scope {
  margin: 0;
  background: var(--mv-bg);
  color: var(--mv-ink);
  font-family: var(--mv-font-sans);
  font-size: var(--mv-step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mv-scope h1, .mv-scope h2, .mv-scope h3, .mv-scope h4, .mv-scope .mv-display {
  font-family: var(--mv-font-display);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--mv-brand);
  margin: 0 0 .5em;
  font-weight: 700;
}
.mv-scope h1 { font-size: var(--mv-step-4); }
.mv-scope h2 { font-size: var(--mv-step-3); }
.mv-scope h3 { font-size: var(--mv-step-2); }
.mv-scope p  { margin: 0 0 1.1em; }
.mv-scope a  { color: var(--mv-brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mv-scope a:hover { color: var(--mv-olive); }
.mv-scope img { max-width: 100%; height: auto; display: block; }
.mv-scope :focus-visible { outline: none; box-shadow: var(--mv-ring); border-radius: var(--mv-radius-sm); }

/* ---- Layout -------------------------------------------------------------- */
.mv-container { width: min(100% - 2.5rem, var(--mv-container)); margin-inline: auto; }
.mv-container--wide { width: min(100% - 2.5rem, var(--mv-container-wide)); }
.mv-section { padding-block: var(--mv-section); }
.mv-section--tight { padding-block: clamp(2rem, 1rem + 4vw, 4rem); }
.mv-grid { display: grid; gap: var(--mv-gap); }
.mv-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mv-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mv-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .mv-grid--3, .mv-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mv-grid--2, .mv-grid--3, .mv-grid--4 { grid-template-columns: 1fr; } }

/* Eyebrow / section heading */
.mv-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mv-font-sans); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; font-size: .72rem;
  color: var(--mv-olive); margin-bottom: 1rem;
}
.mv-eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: var(--mv-accent); }
.mv-lede { font-size: var(--mv-step-1); color: var(--mv-ink-soft); max-width: 60ch; }

/* ---- Botones ------------------------------------------------------------- */
.mv-btn {
  --_bg: var(--mv-brand); --_fg: var(--mv-on-brand);
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.6rem; border: 1px solid var(--_bg); border-radius: var(--mv-radius-pill);
  background: var(--_bg); color: var(--_fg); cursor: pointer;
  font-family: var(--mv-font-sans); font-weight: 600; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .07em; text-decoration: none;
  transition: transform var(--mv-dur) var(--mv-ease), box-shadow var(--mv-dur) var(--mv-ease), background .3s;
}
.mv-btn:hover { transform: translateY(-2px); box-shadow: var(--mv-shadow); color: var(--_fg); }
.mv-btn--accent { --_bg: var(--mv-accent); --_fg: var(--mv-operational); border-color: var(--mv-accent); }
.mv-btn--ghost  { --_bg: transparent; --_fg: var(--mv-brand); border-color: color-mix(in srgb, var(--mv-brand) 30%, transparent); }
.mv-btn--ghost:hover { background: var(--mv-brand); color: var(--mv-on-brand); }

/* ---- Header / navegación ------------------------------------------------- */
.mv-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--mv-cream) 86%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s, border-color .3s, background .3s;
}
.mv-header.is-stuck { box-shadow: var(--mv-shadow-sm); border-color: color-mix(in srgb, var(--mv-olive) 25%, transparent); }
.mv-nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1rem; }
.mv-brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--mv-font-display); font-weight: 700; font-size: 1.4rem; color: var(--mv-brand); text-decoration: none; letter-spacing: -.02em; }
.mv-brand img, .mv-brand svg { height: 34px; width: auto; }
.mv-menu { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.mv-menu a { color: var(--mv-ink); text-decoration: none; font-weight: 500; font-size: .95rem; position: relative; padding-block: .4rem; }
.mv-menu a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--mv-accent); transition: width .3s var(--mv-ease); }
.mv-menu a:hover::after, .mv-menu a.is-active::after { width: 100%; }
.mv-nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; }
.mv-nav-toggle span { display: block; width: 24px; height: 2px; background: var(--mv-brand); margin: 5px 0; transition: transform .3s, opacity .3s; }
@media (max-width: 820px) {
  .mv-nav-toggle { display: block; }
  .mv-menu {
    position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: flex-start;
    gap: .25rem; background: var(--mv-cream); padding: 1rem 1.25rem 1.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--mv-olive) 30%, transparent);
    box-shadow: var(--mv-shadow); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: .3s var(--mv-ease);
  }
  .mv-menu.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .mv-menu a { display: block; width: 100%; padding: .6rem 0; }
  .mv-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mv-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .mv-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---- Hero ---------------------------------------------------------------- */
.mv-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--mv-palegreen) 70%, transparent) 0%, transparent 55%),
    linear-gradient(160deg, var(--mv-forest) 0%, var(--mv-operational) 70%);
  color: var(--mv-cream);
  padding-block: clamp(4rem, 2rem + 10vw, 9rem);
}
.mv-hero h1 { color: var(--mv-cream); max-width: 16ch; }
.mv-hero .mv-eyebrow { color: var(--mv-accent); }
.mv-hero .mv-eyebrow::before { background: var(--mv-accent); }
.mv-hero p { color: color-mix(in srgb, var(--mv-cream) 85%, transparent); max-width: 56ch; font-size: var(--mv-step-1); }
.mv-hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.mv-hero__glow { position: absolute; right: -10%; top: -20%; width: 50vw; height: 50vw; max-width: 620px; max-height: 620px;
  background: radial-gradient(circle, color-mix(in srgb, var(--mv-lime) 40%, transparent), transparent 60%); filter: blur(8px); pointer-events: none; }

/* ---- Tarjetas / superficies ---------------------------------------------- */
.mv-card {
  background: var(--mv-surface); border: 1px solid color-mix(in srgb, var(--mv-olive) 18%, transparent);
  border-radius: var(--mv-radius); padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  box-shadow: var(--mv-shadow-sm); transition: transform var(--mv-dur) var(--mv-ease), box-shadow var(--mv-dur) var(--mv-ease), border-color .3s;
}
.mv-card:hover { transform: translateY(-4px); box-shadow: var(--mv-shadow); border-color: color-mix(in srgb, var(--mv-lime) 50%, transparent); }
.mv-card__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px;
  background: var(--mv-palegreen); color: var(--mv-forest); margin-bottom: 1rem; font-size: 1.3rem; }
.mv-card h3 { font-size: var(--mv-step-1); }
.mv-card p { color: var(--mv-ink-soft); margin: 0; }

/* ---- Métricas / contadores ----------------------------------------------- */
.mv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--mv-gap); }
.mv-stat { padding: 1.5rem; border-left: 3px solid var(--mv-accent); }
.mv-stat__num { font-family: var(--mv-font-display); font-size: var(--mv-step-3); color: var(--mv-brand); line-height: 1; }
.mv-stat__label { color: var(--mv-ink-soft); font-size: .9rem; margin-top: .4rem; }

/* ---- Banda CTA ----------------------------------------------------------- */
.mv-cta {
  background: linear-gradient(135deg, var(--mv-forest), var(--mv-operational));
  color: var(--mv-cream); border-radius: var(--mv-radius); padding: clamp(2rem, 1rem + 5vw, 4rem);
  text-align: center;
}
.mv-cta h2 { color: var(--mv-cream); }
.mv-cta p { color: color-mix(in srgb, var(--mv-cream) 85%, transparent); }

/* ---- Footer -------------------------------------------------------------- */
.mv-footer { background: var(--mv-operational); color: color-mix(in srgb, var(--mv-cream) 80%, transparent); padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem); }
.mv-footer a { color: color-mix(in srgb, var(--mv-cream) 80%, transparent); text-decoration: none; }
.mv-footer a:hover { color: var(--mv-lime); }
.mv-footer h4 { color: var(--mv-cream); font-family: var(--mv-font-sans); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; }
.mv-footer__bottom { border-top: 1px solid color-mix(in srgb, var(--mv-cream) 15%, transparent); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .85rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }

/* ---- Acordeón (FAQ) ------------------------------------------------------ */
.mv-accordion { border-top: 1px solid color-mix(in srgb, var(--mv-olive) 25%, transparent); }
.mv-accordion__item { border-bottom: 1px solid color-mix(in srgb, var(--mv-olive) 25%, transparent); }
.mv-accordion__btn { width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 1.1rem 0; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  font-family: var(--mv-font-display); font-size: var(--mv-step-1); color: var(--mv-brand); }
.mv-accordion__btn::after { content: "+"; font-size: 1.4rem; color: var(--mv-olive); transition: transform .3s; }
.mv-accordion__btn[aria-expanded="true"]::after { transform: rotate(45deg); }
.mv-accordion__panel { overflow: hidden; max-height: 0; transition: max-height .4s var(--mv-ease); }
.mv-accordion__panel > div { padding-bottom: 1.2rem; color: var(--mv-ink-soft); }

/* ---- Galería / lightbox -------------------------------------------------- */
.mv-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.mv-gallery img { border-radius: var(--mv-radius-sm); cursor: zoom-in; aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: filter .3s, transform .5s var(--mv-ease); }
.mv-gallery img:hover { filter: saturate(108%); transform: scale(1.02); }
.mv-lightbox { position: fixed; inset: 0; z-index: 999; display: none; place-items: center; padding: 5vw;
  background: color-mix(in srgb, var(--mv-operational) 88%, transparent); backdrop-filter: blur(6px); }
.mv-lightbox.is-open { display: grid; }
.mv-lightbox img { max-width: 100%; max-height: 86vh; border-radius: var(--mv-radius); box-shadow: var(--mv-shadow-lg); }
.mv-lightbox__close { position: absolute; top: 1.2rem; right: 1.5rem; background: none; border: 0; color: var(--mv-cream); font-size: 2rem; cursor: pointer; }

/* ---- Pill / badges ------------------------------------------------------- */
.mv-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .85rem; border-radius: var(--mv-radius-pill);
  background: var(--mv-palegreen); color: var(--mv-forest); font-size: .78rem; font-weight: 600; }

/* ---- Reveal on scroll ----------------------------------------------------
   Gated en html.js: SIN JavaScript el contenido es visible por defecto
   (progressive enhancement; nada queda oculto si el JS falla). */
html.js [data-mv-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--mv-ease), transform .7s var(--mv-ease); }
html.js [data-mv-reveal].is-in { opacity: 1; transform: none; }
[data-mv-reveal][data-mv-delay="1"] { transition-delay: .08s; }
[data-mv-reveal][data-mv-delay="2"] { transition-delay: .16s; }
[data-mv-reveal][data-mv-delay="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .mv-scope *, [data-mv-reveal] { transition: none !important; animation: none !important; }
  [data-mv-reveal] { opacity: 1; transform: none; }
}