/* ============================================================
   MAZA ENTERPRISE HOLDINGS — Site styles (shared)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.62;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--ink);
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, canvas, svg { display: block; max-width: 100%; }
::selection { background: rgba(29,78,216,.16); }

/* ---- Layout ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: var(--maxw-narrow); }
.section { padding-block: var(--section); position: relative; }
.center { text-align: center; }

/* ---- Eyebrow / label ---- */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--smoke);
  display: inline-flex; align-items: center; gap: .6em;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--gold); display: inline-block;
}

/* ---- Texto ---- */
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--slate); font-weight: 400; }
.muted { color: var(--slate); }
.fine  { color: var(--smoke); font-size: var(--t-small); }
.display-h1 { font-size: var(--t-h1); }
.display-h2 { font-size: var(--t-h2); }
.balance { text-wrap: balance; }

/* ---- Botones / pills (redondeados) ---- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-body); font-weight: 500; font-size: var(--t-small);
  letter-spacing: -0.01em;
  padding: .95em 1.7em; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--t-med) var(--ease), background var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease), color var(--t-med) var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--ink   { background: var(--ink); color: var(--chalk); box-shadow: var(--shadow-soft); }
.btn--ink:hover { background: #000; box-shadow: var(--shadow-float); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn--ghost:hover { background: var(--paper); border-color: var(--ink); }
.btn--light { background: var(--chalk); color: var(--ink); box-shadow: var(--shadow-soft); }
.btn .arrow { transition: transform var(--t-med) var(--ease-cinema); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---- Nav ---- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1rem,2.4vw,1.6rem) var(--gutter);
  transition: background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease),
              backdrop-filter var(--t-med) var(--ease), padding var(--t-med) var(--ease);
}
.nav.is-stuck {
  background: rgba(246,243,236,.72);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  box-shadow: 0 1px 0 var(--hairline);
  padding-block: clamp(.7rem,1.6vw,1.1rem);
}
.brand {
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: .55rem;
  color: var(--ink); white-space: nowrap;
}
.brand .mark { display: none; } /* sin logo de momento — reactivar cuando haya marca definitiva */
.nav-links { display: flex; align-items: center; gap: clamp(1.1rem,2.4vw,2.2rem); }
.nav-links a {
  font-size: var(--t-small); font-weight: 500; color: var(--slate);
  transition: color var(--t-fast) var(--ease); position: relative;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.cta {
  color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: .55em 1.1em; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-links a.cta:hover { border-color: var(--ink); background: var(--paper); }
@media (max-width: 600px) {
  .nav { padding-inline: 1rem; gap: .5rem; }
  .nav-links { gap: .65rem; flex-shrink: 0; }
  .nav-links a.plain { font-size: .72rem; }
  .nav-links a.cta { padding: .45em .8em; font-size: .72rem; }
  .brand { font-size: .76rem; gap: .4rem; }
  .brand .mark { width: 22px; height: 22px; }
}

/* ---- Footer ---- */
.foot {
  border-top: 1px solid var(--hairline);
  padding-block: clamp(3.5rem,8vh,6rem) 2.2rem;
  background: var(--veil); overflow: hidden;
}
.foot-grid {
  display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: clamp(2rem,4vw,3.5rem);
}
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 440px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand .fine { max-width: 40ch; margin-top: 1rem; color: var(--slate); }
.foot-cta {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem;
  font-family: var(--font-display); font-weight: 500; font-size: var(--t-small); color: var(--ink);
  border-bottom: 1px solid var(--ink); padding-bottom: .15rem;
  transition: gap var(--t-med) var(--ease);
}
.foot-cta:hover { gap: .85rem; }
.foot h4 { font-family: var(--font-body); font-size: var(--t-micro); letter-spacing:.18em;
  text-transform: uppercase; color: var(--smoke); font-weight: 600; margin-bottom: 1rem; }
.foot .fl { display: block; color: var(--slate); font-size: var(--t-small); padding: .25rem 0;
  transition: color var(--t-fast) var(--ease); }
.foot a.fl:hover { color: var(--ink); }
.foot .fl.as-text { color: var(--smoke); }
.foot-sign-row { margin-top: clamp(3rem,7vh,5rem); }
.foot-sign-big {
  display: block; font-family: var(--font-display); font-weight: 600;
  letter-spacing: -0.045em; line-height: .82; white-space: nowrap; user-select: none;
  font-size: clamp(3.4rem, 15vw, 13rem); color: rgba(22,21,15,.07);
}
.foot-bottom { margin-top: clamp(2rem,5vh,3.2rem); padding-top: 1.6rem; border-top: 1px solid var(--hairline);
  display:flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: var(--smoke); font-size: var(--t-micro); letter-spacing: .04em; }
.foot-bottom .lema { font-style: italic; }

/* ============================================================
   REVEAL — coreografía cinematográfica (IntersectionObserver + CSS)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(34px); will-change: transform, opacity;
  transition: opacity var(--t-cine) var(--ease-cinema), transform var(--t-cine) var(--ease-cinema); }
.reveal.in { opacity: 1; transform: none; }

.reveal-soft { opacity: 0; transform: translateY(18px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal-soft.in { opacity: 1; transform: none; }

.reveal-scale { opacity: 0; transform: scale(.965); transform-origin: center;
  transition: opacity var(--t-cine) var(--ease-cinema), transform var(--t-cine) var(--ease-cinema); }
.reveal-scale.in { opacity: 1; transform: none; }

/* clip-mask reveal para titulares (línea que se descubre) */
.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: block; transform: translateY(105%);
  transition: transform var(--t-cine) var(--ease-cinema); }
.line-mask.in > span { transform: none; }

/* stagger por --i */
[data-stagger] { transition-delay: calc(var(--i, 0) * 90ms); }

/* ---- Util ---- */
.stack > * + * { margin-top: var(--gap, 1.25rem); }
.divider { height: 1px; background: var(--hairline); border: 0; margin: 0; }
.kicker-num { font-family: var(--font-display); color: var(--gold); font-weight: 500;
  font-variant-numeric: tabular-nums; }