/* ============================================================================
   NM Visual Studio — theme stylesheet
   VERBATIM PORT of the 5 .dc.html templates. The page markup carries the whole
   design via inline styles; this file provides ONLY:
     1. the design tokens those inline `var(--…)` references resolve to (:root),
     2. a thin global reset,
     3. the per-page <helmet> <style> rules, unioned & deduped
        (.nm-* hover/keyframe/field states + responsive @media),
     4. the style-hover="" → :hover conversions (spec §4).
   Do not "translate" inline styles into classes here — keep them in the markup.
   ============================================================================ */

/* ===========================================================================
   1. TOKENS  (verbatim from NMStudio/tokens/{colors,typography,spacing,effects})
   =========================================================================== */
:root {
  /* --- Brand base scale --- */
  --nm-navy-900: #0F1D2B;
  --nm-navy-700: #1D3557;
  --nm-navy-500: #2E4A6B;
  --nm-gold-600: #A9824F;
  --nm-gold-500: #C19A62;
  --nm-gold-400: #D2B488;
  --nm-gold-200: #E7D8C2;
  --nm-beige-100: #F3EFEA;
  --nm-beige-50:  #F9F6F2;
  --nm-stone-300: #D8D4CF;
  --nm-stone-400: #BDB7B0;
  --nm-white: #FFFFFF;

  /* --- Semantic surfaces --- */
  --surface-canvas: var(--nm-beige-100);
  --surface-raised: var(--nm-white);
  --surface-soft: var(--nm-beige-50);
  --surface-dark: var(--nm-navy-900);
  --surface-dark-alt: var(--nm-navy-700);

  /* --- Semantic text --- */
  --text-strong: var(--nm-navy-900);
  --text-body: #33414F;
  /* a11y (WCAG 2.1 AA): estos tokens SEMÁNTICOS de texto se oscurecieron lo justo
     para alcanzar 4.5:1 (texto normal) / 3:1 (texto grande) sobre los lienzos
     claros (beige #F3EFEA/#F9F6F2 y blanco). Los tonos de MARCA --nm-gold-* NO se
     tocan: siguen brillantes para rellenos, bordes, iconos, botones y texto sobre
     navy, donde ya tienen contraste de sobra y son la firma visual del estudio. */
  --text-muted: #5B646F;            /* era #6B7682 (4.04:1) → 5.2:1 sobre beige */
  --text-accent: #876634;           /* dorado texto pequeño: era gold-600 (3.06:1) → 4.6:1 */
  --text-accent-lg: #9E7534;        /* dorado texto grande (titulares/números): ≥3.6:1 sobre claro */
  --text-on-dark: var(--nm-beige-100);
  --text-on-dark-strong: var(--nm-white);
  --text-on-dark-muted: #A9B4C0;

  /* --- Borders & lines --- */
  --border-soft: var(--nm-stone-300);
  --border-faint: rgba(15, 29, 43, 0.08);
  --border-gold: var(--nm-gold-400);
  --border-on-dark: rgba(255, 255, 255, 0.12);

  /* --- Accent / focus --- */
  --accent: var(--nm-gold-500);
  --accent-strong: var(--nm-gold-600);
  --focus-ring: rgba(193, 154, 98, 0.45);

  /* --- Families --- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* --- Weights --- */
  --fw-display: 600;
  --fw-display-reg: 500;
  --fw-body-light: 300;
  --fw-body: 400;
  --fw-body-medium: 500;
  --fw-body-semibold: 600;
  --fw-body-bold: 700;

  /* --- Display / heading scale (serif) --- */
  --fs-display-xl: clamp(3.25rem, 6vw, 5rem);
  --fs-display-lg: clamp(2.5rem, 4.5vw, 3.5rem);
  --fs-display-md: clamp(2rem, 3vw, 2.5rem);
  --fs-display-sm: 1.5rem;
  --lh-display: 1.08;
  --ls-display: -0.01em;

  /* --- Body scale (sans) --- */
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-caption: 0.8125rem;
  --lh-body: 1.7;
  --lh-body-tight: 1.5;

  /* --- Eyebrow / section label --- */
  --fs-eyebrow: 0.75rem;
  --ls-eyebrow: 0.22em;
  --fw-eyebrow: 600;

  /* --- Misc tracking --- */
  --ls-button: 0.04em;
  --ls-wide: 0.08em;

  /* --- Spacing (4px base) --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --section-y: clamp(64px, 9vw, 128px);
  --section-x: clamp(20px, 6vw, 96px);
  --container-max: 1280px;
  --container-narrow: 760px;
  --gap-card: 24px;
  --gap-grid: 32px;

  /* --- Radii --- */
  --radius-xs: 4px;  --radius-sm: 8px;  --radius-md: 12px; --radius-lg: 20px;
  --radius-xl: 32px; --radius-2xl: 48px; --radius-pill: 999px;
  --radius-image-mask: 0 0 0 96px;

  /* --- Shadows (ultra-diffuse, navy-tinted) --- */
  --shadow-xs: 0 1px 2px rgba(15, 29, 43, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 29, 43, 0.05);
  --shadow-md: 0 10px 30px -12px rgba(15, 29, 43, 0.12);
  --shadow-lg: 0 24px 60px -20px rgba(15, 29, 43, 0.18);
  --shadow-card: 0 14px 40px -18px rgba(15, 29, 43, 0.14);
  --shadow-gold: 0 12px 30px -14px rgba(193, 154, 98, 0.4);

  /* --- Borders / motion --- */
  --border-width: 1px;
  --hairline: 1px solid var(--border-soft);
  --hairline-faint: 1px solid var(--border-faint);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-slow: 0.6s;
  --transition-base: all var(--dur) var(--ease-out);
}

/* ===========================================================================
   2. GLOBAL RESET  (from each helmet's html,body + body rules)
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--nm-beige-100);
  font-family: var(--font-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* The design markup is self-contained: strip FSE flow spacing/constraints so
   the full-bleed sections, fixed header and waves render exactly as source. */
.nm-page { display: block; }
img { max-width: 100%; }
a { color: inherit; }

/* IMPORTANT: the verbatim page wrapper carries an inline `overflow-x: hidden`,
   which — per the CSS spec — forces its `overflow-y` to compute to `auto`. That
   silently turns `.nm-page` (a `min-height:100vh` element holding the whole page)
   into a NESTED scroll container in some browsers, so the page looks vertically
   clipped/"cut" and the fixed header detaches. Neutralise it here and clip any
   horizontal overflow at the document root instead (the window keeps scrolling). */
html { overflow-x: hidden; }
.nm-page { overflow: visible !important; }

/* Remove WordPress's block-gap margins between the top-level template blocks
   (header part / main / footer part). WP inserts `margin-block-start:24px` above
   <main>, which left a 24px beige strip above the hero — the page must sit flush
   at the top so the fixed header overlaps the hero exactly as in the source. */
.wp-site-blocks { margin: 0; padding: 0; }
.wp-site-blocks > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/* ===========================================================================
   3. HELMET RULES — union of the 5 templates' <helmet> <style> blocks
   =========================================================================== */

/* --- Header / footer nav link hovers (all pages) --- */
.nm-navlink:hover   { color: var(--text-strong) !important; }
.nm-navlink-d:hover { color: var(--nm-white) !important; }
.nm-foot-link:hover { color: var(--nm-white) !important; }

/* --- Home: editorial service rows + project tiles --- */
.nm-proj:hover .nm-proj-img   { transform: scale(1.045); }
.nm-proj:hover .nm-proj-arrow { transform: translate(4px, -4px); }
.nm-srow:hover .nm-srow-img   { transform: scale(1.07); }
.nm-srow:hover .nm-srow-arrow { transform: translateX(6px); }

/* --- Marquee (clients) --- */
@keyframes nm-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .nm-marqtrack { animation: none !important; } }

/* --- Services: pricing cards --- */
.nm-pcard:hover               { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.nm-pcard--featwrap:hover     { transform: translateY(-18px); }
.nm-pcard--feat:hover         { transform: none; }
.nm-pcard:hover .nm-pcard-img { transform: scale(1.05); }

/* --- Recurring CTA button + arrow link (services/projects/estudio/contacto) --- */
.nm-ctabtn:hover { transform: translateY(-2px); }
.nm-link:hover   { gap: 16px !important; }

/* --- Projects: filter chips --- */
.nm-chip {
  font-family: var(--font-body); font-size: 13.5px; color: var(--text-body);
  background: transparent; border: 1px solid var(--border-soft);
  padding: 11px 22px; border-radius: 999px; cursor: pointer;
  letter-spacing: .01em; white-space: nowrap;
  transition: background .3s cubic-bezier(.16,1,.3,1), border-color .3s, color .3s;
}
.nm-chip:hover     { border-color: var(--nm-gold-400); color: var(--text-strong); }
.nm-chip--active   { background: var(--nm-navy-900) !important; border-color: var(--nm-navy-900) !important; color: var(--nm-white) !important; }

/* --- Projects: portfolio cards --- */
.nm-pcard2 h3 { line-height: 1.16; }
.nm-pcard2:hover .nm-pcard2-img   { transform: scale(1.05); }
.nm-pcard2:hover .nm-pcard2-arrow { transform: translateX(6px); color: var(--nm-gold-600); }

/* --- Contacto: contact tiles --- */
.nm-cc:hover .nm-cc-tile { background: var(--nm-navy-700); }

/* --- Contacto: form fields --- */
.nm-field {
  width: 100%; font-family: var(--font-body); font-size: 14px; color: var(--text-strong);
  background: var(--nm-white); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 14px 16px; box-sizing: border-box; transition: border-color .25s, box-shadow .25s;
}
.nm-field::placeholder { color: var(--text-muted); }
.nm-field:focus { outline: none; border-color: var(--nm-gold-400); box-shadow: 0 0 0 3px var(--focus-ring); }
textarea.nm-field { min-height: 124px; resize: vertical; line-height: 1.5; }
select.nm-field { appearance: none; -webkit-appearance: none; cursor: pointer; }

/* --- Contacto: submit button --- */
.nm-submit:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.nm-submit:hover .nm-submit-ar { transform: translateX(5px); }

/* ===========================================================================
   4. style-hover="" → :hover conversions (spec §4)
   Class names are assigned deterministically by the build compiler.
   =========================================================================== */
.nm-hv-liftlg:hover  { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.nm-hv-lift:hover    { transform: translateY(-2px); }
.nm-hv-gap15:hover   { gap: 15px; }
.nm-hv-gap16:hover   { gap: 16px; }
.nm-hv-soft:hover    { background: var(--surface-soft); }
.nm-hv-navy500:hover { background: var(--nm-navy-500); }

/* ===========================================================================
   5. Mobile menu (shared header chrome — WP-only affordance)
   =========================================================================== */
.nm-burger { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: none; border: 0; cursor: pointer; color: var(--text-strong); padding: 6px; line-height: 0; }
.nm-mobile-nav { display: none; flex-direction: column; gap: 4px; padding: 14px clamp(20px,5vw,72px) 22px; background: color-mix(in srgb, var(--nm-beige-100) 96%, transparent); border-bottom: 1px solid var(--border-faint); }
.nm-mobile-nav.is-open { display: flex; }
.nm-mobile-nav a { font-size: 15px; color: var(--text-strong); text-decoration: none; padding: 12px 0; }
.nm-skiplink { position: absolute; left: -9999px; top: 0; z-index: 100000; background: var(--nm-navy-900); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0; }
.nm-skiplink:focus { left: 0; }

/* ===========================================================================
   6. RESPONSIVE — union of the per-page <helmet> @media blocks
   =========================================================================== */

/* Process steps: when stacked (breakpoints below switch the step to display:grid),
   lay each step out horizontally — icon + number form a left rail, title + text fill
   the right. These placement rules are inert while the step is a desktop flex column
   (grid-column/row are ignored on flex items); arrows are excluded so they stay hidden. */
.nm-process > div:not(.nm-proc-arrow) > i,    .nm-proc-cols > div:not(.nm-proc-arrow) > i    { grid-column: 1; grid-row: 1; align-self: start; }
.nm-process > div:not(.nm-proc-arrow) > span, .nm-proc-cols > div:not(.nm-proc-arrow) > span { grid-column: 1; grid-row: 2; }
.nm-process > div:not(.nm-proc-arrow) > h3,   .nm-proc-cols > div:not(.nm-proc-arrow) > h3   { grid-column: 2; grid-row: 1; }
.nm-process > div:not(.nm-proc-arrow) > p,    .nm-proc-cols > div:not(.nm-proc-arrow) > p    { grid-column: 2; grid-row: 2; }

@media (max-width: 1180px) {
  /* Keep the decorative isometric wireframe visible (with prominence) on tablet/mobile,
     but in normal flow: a centered, scaled illustration instead of the desktop side art. */
  .nm-procwire { display: block !important; position: static !important; width: 100% !important; max-width: 340px !important; margin: 6px auto 10px !important; inset: auto !important; transform: none !important; height: auto !important; opacity: 0.72 !important; }
  .nm-procwire svg { height: auto !important; }
  .nm-procwire + div { padding-right: clamp(20px,5vw,72px) !important; }
  .nm-proccontent { padding-right: clamp(20px,5vw,72px) !important; }
}
@media (max-width: 1080px) {
  .nm-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 1000px) {
  .nm-nav { display: none !important; }
  .nm-burger { display: inline-flex; }
  /* Touch zone: project filter chips need a ≥44px tap target (verbatim 11/22 padding renders ~38px). */
  .nm-chip { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 980px) {
  .nm-pricegrid { grid-template-columns: 1fr !important; max-width: 460px; margin-inline: auto; }
  .nm-pcard--featwrap { transform: none !important; }
  .nm-proc-cols { grid-template-columns: 1fr !important; gap: 30px !important; }
  .nm-proc-cols > div:not(.nm-proc-arrow) { display: grid !important; grid-template-columns: 44px 1fr !important; column-gap: 16px !important; row-gap: 4px !important; align-items: start !important; text-align: left !important; }
  .nm-proc-cols > div:not(.nm-proc-arrow) > h3 { margin-top: 0 !important; }
  .nm-proc-arrow { display: none !important; }
  .nm-footgrid { grid-template-columns: 1fr !important; }
  .nm-foot-img { display: none !important; }
}
@media (max-width: 920px) {
  .nm-cgrid { grid-template-columns: 1fr !important; }
  .nm-cmedia { display: none !important; }
  .nm-guarantees { grid-template-columns: 1fr 1fr !important; row-gap: 32px !important; }
}
@media (max-width: 900px) {
  .nm-hero-grid { grid-template-columns: 1fr !important; }
  /* Image-first hero on tablet/mobile (match the Proyectos hero order). The media is an
     absolutely-positioned direct child of the hero <section> (outside the grid), so we
     turn that section into a flex column and let order:-1 lift the media above the text. */
  section:has(> .nm-hero-media) { display: flex !important; flex-direction: column !important; padding-top: clamp(96px, 14vw, 112px) !important; }
  /* The image now sits at the top, so the text grid no longer needs to clear the fixed
     header — drop its tall header padding and min-height so it hugs the image. */
  section:has(> .nm-hero-media) .nm-hero-grid { padding-top: clamp(24px, 5vw, 40px) !important; min-height: 0 !important; }
  .nm-hero-media { position: relative !important; width: 100% !important; height: 320px !important; order: -1 !important; margin-top: 0 !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .nm-values { grid-template-columns: 1fr !important; }
  .nm-stats { grid-template-columns: 1fr 1fr !important; row-gap: 28px !important; }
  .nm-proc-cols { grid-template-columns: 1fr !important; gap: 30px !important; }
  .nm-proc-arrow { display: none !important; }
  .nm-mani-top { grid-template-columns: 1fr !important; }
  .nm-footgrid { grid-template-columns: 1fr !important; }
  /* Home footer uses .nm-foot-top (4 cols) — collapse it too (was never reflowed → mobile overflow). */
  .nm-foot-top { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
  .nm-foot-img { display: none !important; }
}
@media (max-width: 860px) {
  .nm-hero-grid { grid-template-columns: 1fr !important; }
  .nm-hero-media { position: relative !important; width: 100% !important; height: 360px !important; margin-top: 24px; -webkit-mask-image: none !important; mask-image: none !important; }
  .nm-reelcard, .nm-vlabel { display: none !important; }
  .nm-secthead2 { grid-template-columns: 1fr !important; }
  .nm-srow { grid-template-columns: auto 1fr auto !important; }
  .nm-srow-thumb { display: none !important; }
  .nm-values, .nm-gal1, .nm-gal2 { grid-template-columns: 1fr !important; grid-template-rows: none !important; }
  .nm-gal1 > *, .nm-gal2 > * { grid-column: auto !important; grid-row: auto !important; min-height: 300px !important; }
  .nm-process { grid-template-columns: 1fr !important; gap: 34px !important; }
  .nm-process > div:not(.nm-proc-arrow) { display: grid !important; grid-template-columns: 44px 1fr !important; column-gap: 16px !important; row-gap: 4px !important; align-items: start !important; text-align: left !important; }
  .nm-process > div:not(.nm-proc-arrow) > h3 { margin-top: 0 !important; }
  .nm-procwrap { grid-template-columns: 1fr !important; gap: 36px !important; }
  .nm-enfoque-logo { display: none !important; }
  .nm-enfoque-top { grid-template-columns: 1fr !important; }
  .nm-enfoque-wire { max-width: 360px !important; margin-top: 8px; }
  .nm-proc-arrow { display: none !important; }
}
@media (max-width: 820px) {
  .nm-hero-grid { grid-template-columns: 1fr !important; }
  .nm-hero-wire { order: -1; max-width: 520px; margin-inline: auto; }
  .nm-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .nm-footgrid { grid-template-columns: 1fr !important; }
  .nm-foot-img { display: none !important; }
}
@media (max-width: 560px) {
  .nm-form2 { grid-template-columns: 1fr !important; }
  .nm-guarantees { grid-template-columns: 1fr !important; }
  .nm-foot-top { grid-template-columns: 1fr !important; }
  /* 3 hero features: keep 3-up on tablet, stack to 1 on phones (was an orphaned 2+1). */
  .nm-herofeat { grid-template-columns: 1fr !important; }
  .nm-meet { flex-direction: column !important; align-items: flex-start !important; }
}
@media (max-width: 520px) {
  .nm-grid { grid-template-columns: 1fr !important; }
  /* Home service rows: tighten gap, let the 1fr text column shrink/wrap and the
     number scale down so the row fits a 320px viewport (was ~26px over). */
  .nm-srow { gap: 16px !important; }
  .nm-srow > div { min-width: 0; }
  .nm-srow h3 { overflow-wrap: anywhere; }
  .nm-srow-num { font-size: 2rem !important; }
}