/* Copia CONGELADA de styles/site-header.css antes de la base blanca (2026-10), para las páginas de IVAE Marketing. */
/* IVAE Studios — Canonical site header styles.
   Single source of truth for the site-wide header.
   Loaded by all 8 service pages + home + about. Mirrors index.html exactly.
   !important is used aggressively because each service page has its own
   page-scoped <style> block that previously redefined these classes. */

.site-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:9000 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:env(safe-area-inset-top,0px) clamp(20px,4vw,48px) 0 clamp(20px,4vw,48px) !important;
  padding-left:max(clamp(20px,4vw,48px), env(safe-area-inset-left,0px)) !important;
  padding-right:max(clamp(20px,4vw,48px), env(safe-area-inset-right,0px)) !important;
  height:calc(68px + env(safe-area-inset-top,0px)) !important;
  background:rgba(10,15,23,.85) !important;
  backdrop-filter:saturate(140%) blur(14px) !important;
  -webkit-backdrop-filter:saturate(140%) blur(14px) !important;
  border-bottom:1px solid rgba(201,165,78,.12) !important;
  transition:background .55s var(--ease, cubic-bezier(0.16,1,0.3,1)),backdrop-filter .55s var(--ease, cubic-bezier(0.16,1,0.3,1)),height .45s var(--ease, cubic-bezier(0.16,1,0.3,1)),border-color .55s var(--ease, cubic-bezier(0.16,1,0.3,1)) !important;
  gap:24px !important;
}
.site-header > a,
.site-header > nav,
.site-header > div,
.site-header > button{
  margin:0 !important;
}
.site-header nav,
.site-header > nav,
.site-header .h-nav{
  margin-left:0 !important;
  margin-right:0 !important;
}
.site-header.scrolled{
  background:rgba(10,15,23,.94) !important;
  backdrop-filter:saturate(160%) blur(20px) !important;
  -webkit-backdrop-filter:saturate(160%) blur(20px) !important;
  height:60px !important;
  border-bottom-color:var(--gold-line, rgba(201,165,78,.25)) !important;
}
.site-header .h-logo{
  font-family:var(--font-sans, 'Syne', system-ui, sans-serif) !important;
  font-weight:700 !important;
  letter-spacing:.32em !important;
  font-size:var(--fs-13, 13px) !important;
  text-transform:uppercase !important;
  color:var(--cream, #faf8f5) !important;
  display:inline-flex !important;
  align-items:baseline !important;
  gap:6px !important;
  position:relative !important;
  overflow:visible !important;
  text-decoration:none !important;
  flex-shrink:0 !important;
  white-space:nowrap !important;
}
@media (max-width:480px){
  body .site-header .h-logo{letter-spacing:.18em !important;font-size:12px !important;gap:4px !important}
  body .site-header .h-logo em{font-size:13px !important}
}
.site-header .h-logo em{
  font-style:normal !important;
  color:var(--gold, #c9a54e) !important;
  font-family:var(--font-serif, 'Cormorant Garamond', serif) !important;
  font-weight:300 !important;
  font-size:var(--fs-15, 15px) !important;
  letter-spacing:0 !important;
  font-variant:small-caps !important;
  display:inline-block !important;
  transition:transform .5s var(--ease, cubic-bezier(0.16,1,0.3,1)) !important;
}
.site-header .h-logo:hover em{transform:translateX(2px) !important}
.site-header .h-nav{
  display:flex !important;
  gap:36px !important;
  list-style:none !important;
  align-items:center !important;
  margin:0 !important;
  padding:0 !important;
}
.site-header .h-nav a{
  font-family:var(--font-sans, 'Syne', system-ui, sans-serif) !important;
  font-size:var(--fs-10, 10px) !important;
  font-weight:500 !important;
  letter-spacing:var(--tracking-eyebrow-base, .22em) !important;
  text-transform:uppercase !important;
  color:var(--text-on-dark-2, rgba(250,248,245,.7)) !important;
  position:relative !important;
  padding:6px 2px !important;
  min-height:var(--touch-target-min, 44px) !important;
  display:inline-flex !important;
  align-items:center !important;
  transition:color .35s var(--ease, cubic-bezier(0.16,1,0.3,1)),transform .45s var(--ease, cubic-bezier(0.16,1,0.3,1)) !important;
  text-decoration:none !important;
  background:transparent !important;
  border:0 !important;
}
.site-header .h-nav a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:8px;
  width:100%;
  height:1px;
  background:var(--gold, #c9a54e);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease, cubic-bezier(0.16,1,0.3,1));
}
.site-header .h-nav a:hover,
.site-header .h-nav a:focus-visible,
.site-header .h-nav a.is-active{
  color:var(--cream, #faf8f5) !important;
}
.site-header .h-nav a:hover{transform:translateY(-1px) !important}
.site-header .h-nav a:hover::after,
.site-header .h-nav a:focus-visible::after,
.site-header .h-nav a.is-active::after{
  transform:scaleX(1);
  transform-origin:left;
}
.site-header .lang-switch{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
}
.site-header .lang-switch a{
  font-family:var(--font-sans, 'Syne', system-ui, sans-serif) !important;
  font-size:var(--fs-10, 10px) !important;
  font-weight:500 !important;
  letter-spacing:.22em !important;
  text-transform:uppercase !important;
  color:var(--text-on-dark-2, rgba(250,248,245,.7)) !important;
  text-decoration:none !important;
  transition:color .3s ease !important;
}
.site-header .lang-switch a.is-active{color:var(--gold, #c9a54e) !important}
.site-header .lang-switch a:hover{color:var(--cream, #faf8f5) !important}
.site-header .lang-switch .lang-sep{
  color:var(--text-on-dark-2, rgba(250,248,245,.5)) !important;
  font-size:var(--fs-10, 10px) !important;
}
.site-header .h-cta{
  font-family:var(--font-sans, 'Syne', system-ui, sans-serif) !important;
  font-size:var(--fs-10, 10px) !important;
  font-weight:600 !important;
  letter-spacing:0.18em !important;
  text-transform:uppercase !important;
  color:var(--gold, #c9a54e) !important;
  border:1px solid var(--gold-line, rgba(201,165,78,.4)) !important;
  background:transparent !important;
  padding:14px 26px !important;
  min-height:var(--touch-target-min, 44px) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  white-space:nowrap !important;
  transition:background .35s var(--ease, cubic-bezier(0.16,1,0.3,1)),border-color .35s var(--ease, cubic-bezier(0.16,1,0.3,1)),color .35s var(--ease, cubic-bezier(0.16,1,0.3,1)),transform .35s var(--ease, cubic-bezier(0.16,1,0.3,1)) !important;
  position:relative !important;
  overflow:hidden !important;
  text-decoration:none !important;
}
.site-header .h-cta svg{flex-shrink:0 !important;width:14px !important;height:14px !important;transition:transform .4s var(--ease, cubic-bezier(0.16,1,0.3,1)) !important}
.site-header .h-cta::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(201,165,78,.18) 50%,transparent 70%);
  transform:translateX(-100%);
  transition:transform .8s var(--ease-out, cubic-bezier(0.22,1,0.36,1));
  pointer-events:none;
}
.site-header .h-cta:hover::before,
.site-header .h-cta:focus-visible::before{transform:translateX(100%)}
.site-header .h-cta:hover,
.site-header .h-cta:focus-visible{
  background:var(--gold-soft, rgba(201,165,78,.1)) !important;
  border-color:var(--gold, #c9a54e) !important;
  color:var(--cream, #faf8f5) !important;
}
/* Explicit focus ring for keyboard users — hover and focus shared
   the same visual treatment, leaving keyboard users without a
   distinct affordance (WCAG 2.4.7). */
.site-header .h-cta:focus-visible{
  outline:var(--focus-ring-on-dark, 2px solid var(--gold, #c9a54e)) !important;
  outline-offset:var(--focus-ring-offset, 3px) !important;
}
.site-header .h-cta:hover svg{transform:translateX(4px) !important}
.site-header .h-burger{
  display:none !important;
  width:44px !important;
  height:44px !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:column !important;
  gap:5px !important;
  background:transparent !important;
  border:0 !important;
  cursor:pointer !important;
  padding:0 !important;
}
.site-header .h-burger span{
  display:block !important;
  width:22px !important;
  height:1px !important;
  background:var(--cream, #faf8f5) !important;
  transition:transform .4s var(--ease, cubic-bezier(0.16,1,0.3,1)),opacity .3s ease !important;
}
.site-header .h-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg) !important}
.site-header .h-burger[aria-expanded="true"] span:nth-child(2){opacity:0 !important}
.site-header .h-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-3px) rotate(-45deg) !important}

/* Mobile slide-down nav */
.m-nav{
  position:fixed !important;
  top:68px !important;
  left:0 !important;
  right:0 !important;
  background:rgba(10,15,23,.97) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  display:none !important;
  flex-direction:column !important;
  padding:24px clamp(20px,5vw,48px) 36px !important;
  border-bottom:1px solid var(--gold-line, rgba(201,165,78,.25)) !important;
  z-index:8999 !important;
  margin:0 !important;
}
.m-nav.is-open,
.m-nav.open{display:flex !important}
.m-nav a{
  font-family:var(--font-sans, 'Syne', system-ui, sans-serif) !important;
  font-weight:500 !important;
  font-size:var(--fs-13, 13px) !important;
  letter-spacing:.22em !important;
  text-transform:uppercase !important;
  color:var(--text-on-dark-readable, rgba(250,248,245,.85)) !important;
  padding:18px 0 !important;
  border-bottom:1px solid var(--line-on-dark, rgba(250,248,245,.08)) !important;
  min-height:var(--touch-target-min, 44px) !important;
  display:flex !important;
  align-items:center !important;
  transition:color .3s ease,padding-left .3s ease !important;
  text-decoration:none !important;
  background:transparent !important;
}
.m-nav a:hover,
.m-nav a:focus-visible{
  color:var(--gold, #c9a54e) !important;
  padding-left:8px !important;
}
.m-nav a:last-child{border-bottom:0 !important}

/* Mobile breakpoint */
@media(max-width:768px){
  body .site-header .h-nav,
  body .site-header .h-cta{display:none !important}
  body .site-header .h-burger{display:flex !important}
}

/* Reduced-motion: kill non-essential transitions */
@media (prefers-reduced-motion: reduce){
  .site-header,
  body .site-header *,
  body .m-nav,
  body .m-nav *{
    transition:none !important;
    animation:none !important;
  }
}

/* Body padding to account for fixed header */
body{
  padding-top:0 !important;
}

/* Scroll padding for in-page anchors — accommodates fixed header height. */
html{
  scroll-padding-top:68px !important;
}
@media (max-width:768px){
  html{
    scroll-padding-top:60px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE LUXURY HEADER REDESIGN (≤768px)
   Editorial magazine masthead — logo centered, asymmetric mark for menu,
   dissolved background gradient (no hard rectangle), full-viewport drawer.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Header bar — soft halo, not a box */
  body .site-header {
    height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    padding: env(safe-area-inset-top, 0px) 18px 0 18px !important;
    background:
      linear-gradient(180deg,
        rgba(10,15,23,.86) 0%,
        rgba(10,15,23,.68) 55%,
        rgba(10,15,23,0) 100%) !important;
    backdrop-filter: saturate(140%) blur(16px) !important;
    -webkit-backdrop-filter: saturate(140%) blur(16px) !important;
    border-bottom: 0 !important;
    /* a single hair-line of gold at very bottom of the halo, fades on edges */
    box-shadow: none !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-rows: 1fr !important;
    grid-auto-rows: 0 !important;
    grid-auto-flow: dense !important;
    align-items: center !important;
    gap: 0 !important;
  }
  body .site-header.scrolled {
    height: calc(50px + env(safe-area-inset-top, 0px)) !important;
    background:
      linear-gradient(180deg,
        rgba(10,15,23,.94) 0%,
        rgba(10,15,23,.84) 70%,
        rgba(10,15,23,.40) 100%) !important;
    border-bottom: 0 !important;
  }

  /* LOGO — center column, editorial masthead */
  body .site-header .h-logo {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    font-size: 13px !important;
    letter-spacing: 0.32em !important;
    gap: 6px !important;
    position: relative !important;
    padding: 8px 4px !important;
  }
  body .site-header .h-logo em {
    font-size: 16px !important;
    letter-spacing: 0.01em !important;
  }
  /* Tiny gold dot under the logo as editorial accent */
  body .site-header .h-logo::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 3px;
    height: 3px;
    background: var(--gold, #c9a54e);
    border-radius: 50%;
    transform: translateX(-50%);
    opacity: .85;
  }

  /* BURGER — refined asymmetric two-line mark (NOT 3 stacked squares) */
  body .site-header .h-burger {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important; /* defensive vertical centering inside header */
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important; /* spans cluster at middle of button */
    flex-direction: column !important;
    gap: 7px !important;
    padding: 0 !important;
    position: relative !important;
  }
  /* Hide the 3rd line — only 2 lines for the editorial mark */
  body .site-header .h-burger span:nth-child(3) {
    display: none !important;
  }
  body .site-header .h-burger span {
    width: 22px !important;
    height: 1.2px !important;
    background: var(--cream, #faf8f5) !important;
    transition:
      width .4s var(--ease, cubic-bezier(0.16,1,0.3,1)),
      transform .4s var(--ease, cubic-bezier(0.16,1,0.3,1)),
      background-color .3s ease !important;
  }
  /* Bottom line is half-width, right-aligned — asymmetric editorial mark */
  body .site-header .h-burger span:nth-child(2) {
    width: 12px !important;
    align-self: flex-start !important;
    margin-left: 10px !important;
    background: var(--gold, #c9a54e) !important;
  }
  /* Open state — clean X morph */
  body .site-header .h-burger[aria-expanded="true"] span:nth-child(1) {
    width: 22px !important;
    transform: translateY(4px) rotate(45deg) !important;
  }
  body .site-header .h-burger[aria-expanded="true"] span:nth-child(2) {
    width: 22px !important;
    margin-left: 0 !important;
    background: var(--cream, #faf8f5) !important;
    transform: translateY(-4px) rotate(-45deg) !important;
  }

  /* LANG SWITCH — top-right, tiny, no separator pipe */
  body .site-header .lang-switch {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    gap: 8px !important;
  }
  body .site-header .lang-switch .lang-sep {
    display: none !important;
  }
  body .site-header .lang-switch a {
    font-size: 10px !important;
    letter-spacing: 0.26em !important;
    opacity: 0.78 !important;
    padding: 4px 2px !important;
  }
  body .site-header .lang-switch a.is-active {
    opacity: 1 !important;
  }

  /* Hide CTA from header bar on mobile (lives in drawer) */
  body .site-header .h-cta {
    display: none !important;
  }
  /* Hide the empty <nav> wrapper so it doesn't claim a grid cell */
  body .site-header > nav {
    display: none !important;
  }

  /* ──────────────────────────────────────────────────────────────────────
     MOBILE DRAWER — full viewport editorial overlay
     ────────────────────────────────────────────────────────────────────── */
  body .m-nav {
    top: 0 !important;
    height: 100svh !important;
    padding: 0 !important;
    background:
      radial-gradient(ellipse at 50% 18%, rgba(201,165,78,.06) 0%, transparent 60%),
      linear-gradient(180deg, #0a0f17 0%, #060a10 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    /* Must sit ABOVE the legacy scrim (#mNavScrim, z 8998); the full-screen
       drawer is its own opaque overlay, so the scrim no longer covers it. */
    z-index: 9001 !important;
    /* Center the menu list vertically; lang switch sits in own stack */
    display: none !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    opacity: 0;
    transition: opacity .4s var(--ease, cubic-bezier(0.16,1,0.3,1));
  }
  body .m-nav.is-open,
  body .m-nav.open {
    display: flex !important;
    opacity: 1;
    animation: ivmDrawerIn .6s var(--ease, cubic-bezier(0.16,1,0.3,1));
  }
  @keyframes ivmDrawerIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Subtle paper noise inside the drawer */
  body .m-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
    opacity: .04;
    mix-blend-mode: screen;
  }

  /* Drawer top eyebrow — magazine masthead repeated above menu */
  body .m-nav::after {
    content: none; /* removed: overlapped the menu */
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 88px);
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Syne', system-ui, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--gold, #c9a54e);
    opacity: .85;
    white-space: nowrap;
  }

  /* Lang switch inside drawer — top of overlay */
  body .m-nav .lang-switch {
    position: absolute !important;
    top: calc(env(safe-area-inset-top, 0px) + 18px);
    right: 24px !important;
    flex-direction: row !important;
    gap: 14px !important;
  }
  body .m-nav .lang-switch a {
    font-family: 'Syne', system-ui, sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    color: rgba(250,248,245,.55) !important;
    padding: 4px 2px !important;
    border-bottom: 0 !important;
    text-decoration: none !important;
    transition: color .3s ease !important;
  }
  body .m-nav .lang-switch a.is-active {
    color: var(--gold, #c9a54e) !important;
  }

  /* (experimental numbered menu removed — clean v2 .m-nav-link / .m-nav-sublink styles below take over) */


  /* Reduced motion respected by the drawer */
  @media (prefers-reduced-motion: reduce) {
    .m-nav a:not(.lang-switch a),
    .m-nav.is-open {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }
}

/* Very small phones — reduce menu font */


/* ═══════════════════════════════════════════════════════════
   Mobile nav v2 (May 2026) — drawer with services sub-section
   ═══════════════════════════════════════════════════════════ */
.m-nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 23, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 8998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.m-nav-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

.m-nav-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--gold-line, rgba(201, 165, 78, 0.28));
  border-radius: 50%;
  color: var(--cream, #faf8f5);
  cursor: pointer;
  z-index: 10;
  transition: border-color 0.2s, background 0.2s;
}
.m-nav-close:hover { border-color: var(--gold, #c9a54e); background: rgba(201, 165, 78, 0.08); }
.m-nav-close svg { width: 20px; height: 20px; }

.m-nav-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 360px;
  padding: 24px 0;
}

.m-nav-link {
  display: block;
  padding: 14px 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--cream, #faf8f5);
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 248, 245, 0.08);
  transition: color 0.2s;
  min-height: 56px;
}
.m-nav-link:hover, .m-nav-link:focus-visible { color: var(--gold, #c9a54e); }

.m-nav-section {
  padding: 8px 0 16px;
  border-bottom: 1px solid rgba(250, 248, 245, 0.08);
}
.m-nav-section-label {
  font-family: 'Syne', 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold, #c9a54e);
  padding: 12px 0 14px;
}

.m-nav-sublink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 14px 18px;
  font-family: 'Syne', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: rgba(250, 248, 245, 0.85);
  text-decoration: none;
  min-height: 48px;
  border-left: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.m-nav-sublink:hover, .m-nav-sublink:focus-visible {
  color: var(--cream, #faf8f5);
  border-left-color: var(--gold, #c9a54e);
  background: rgba(201, 165, 78, 0.04);
}

.m-nav-sublink--accent {
  color: var(--imkt-accent-text, #F5A8D3);
}
.m-nav-sublink--accent:hover, .m-nav-sublink--accent:focus-visible {
  color: #fff;
  border-left-color: var(--imkt-acento, #E96FB4);
  background: rgba(226, 77, 160, 0.08);
}

.m-nav-pill {
  display: inline-block;
  font-family: var(--imkt-font-display, 'Syne', sans-serif);
  /* Raised 9px → 10px to honor IVAE 14px-min for body text, with
     compact pill labels still permitted under 14px per WCAG (these
     are decorative labels, not body copy). 10px keeps the proportion. */
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  background: var(--imkt-gradient, linear-gradient(135deg, #E24DA0, #9D5BE0));
  color: #fff;
  padding: 3px 8px;
  border-radius: 100px;
  text-transform: uppercase;
  margin-left: auto;
}

.m-nav-lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 0 12px;
  font-family: 'Syne', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.m-nav-lang a {
  /* 0.5 → 0.62 for WCAG AA contrast on dark drawer background */
  color: rgba(250, 248, 245, 0.62);
  text-decoration: none;
  padding: 10px 12px;
  transition: color 0.2s, border-color 0.2s;
  /* Raised 36px → 44px (WCAG 2.5.5 touch target minimum) */
  min-height: var(--touch-target-min, 44px);
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid transparent;
}
.m-nav-lang a.is-active {
  color: var(--gold, #c9a54e);
  border-bottom-color: var(--gold, #c9a54e);
}
.m-nav-lang span { color: rgba(250, 248, 245, 0.3); }

.m-nav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding: 18px 24px;
  font-family: 'Syne', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-1, #1a2230);
  background: var(--gold, #c9a54e);
  border: 1px solid var(--gold, #c9a54e);
  text-decoration: none;
  min-height: 56px;
  transition: background 0.2s, border-color 0.2s;
}
.m-nav-cta:hover, .m-nav-cta:focus-visible {
  background: var(--gold-hover, #ceae64);
  border-color: var(--gold-hover, #ceae64);
  color: var(--ink-1, #1a2230);
}


/* ════════════════════════════════════════════════════════════════════
   MOBILE DRAWER — authoritative clean layout (overrides legacy .m-nav a)
   Single elegant column: serif main links, small indented service links,
   gold section label, EN/ES row, gold CTA button. No numerals, no wrap.
   ════════════════════════════════════════════════════════════════════ */
body .m-nav .m-nav-inner {
  gap: 0 !important;
  max-width: 320px !important;
  padding: 8px 0 !important;
}
body .m-nav .m-nav-link {
  display: block !important;
  text-align: left !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 30px !important;
  font-weight: 300 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--cream, #faf8f5) !important;
  padding: 14px 0 !important;
  min-height: 0 !important;
  border-bottom: 1px solid rgba(250, 248, 245, 0.08) !important;
}
body .m-nav .m-nav-link::before { content: none !important; }
body .m-nav .m-nav-link:hover { color: var(--gold, #c9a54e) !important; }

body .m-nav .m-nav-section {
  padding: 6px 0 12px !important;
  border-bottom: 1px solid rgba(250, 248, 245, 0.08) !important;
  margin: 0 !important;
}
body .m-nav .m-nav-section-label {
  display: block !important;
  font-family: 'Syne', system-ui, sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  color: var(--gold, #c9a54e) !important;
  opacity: 0.7 !important;
  padding: 14px 0 6px !important;
}
body .m-nav .m-nav-sublink {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'Syne', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: rgba(250, 248, 245, 0.82) !important;
  padding: 12px 0 12px 16px !important;
  min-height: 0 !important;
  border-bottom: 0 !important;
  border-left: 2px solid transparent !important;
}
body .m-nav .m-nav-sublink::before { content: none !important; }
body .m-nav .m-nav-sublink:hover {
  color: var(--cream, #faf8f5) !important;
  border-left-color: var(--gold, #c9a54e) !important;
}
body .m-nav .m-nav-sublink--accent { color: #F5A8D3 !important; }

body .m-nav .m-nav-lang {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 20px 0 10px !important;
}
body .m-nav .m-nav-lang a {
  font-family: 'Syne', system-ui, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(250, 248, 245, 0.6) !important;
  border-bottom: 0 !important;
  padding: 8px 10px !important;
  min-height: 0 !important;
}
body .m-nav .m-nav-lang a.is-active { color: var(--gold, #c9a54e) !important; }

body .m-nav .m-nav-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Syne', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--ink-1, #1a2230) !important;
  background: var(--gold, #c9a54e) !important;
  border: 0 !important;
  padding: 16px 24px !important;
  margin-top: 18px !important;
  min-height: 0 !important;
}
body .m-nav .m-nav-cta::before { content: none !important; }

/* ═══════════════════════════════════════════════════════════════
   WHITE-AT-TOP HEADER (2026-07-16)
   La barra comienza BLANCA con el logo azul marino y, al hacer
   scroll (.scrolled), transiciona al azul marino con logo crema.
   ═══════════════════════════════════════════════════════════════ */
.site-header:not(.scrolled){
  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid rgba(20,27,38,.10) !important;
}
.site-header:not(.scrolled) .h-nav a,
.site-header:not(.scrolled) .header-nav a,
.site-header:not(.scrolled) .lang-switch a,
.site-header:not(.scrolled) .h-lang a{ color:#141b26 !important; }
.site-header:not(.scrolled) .h-nav a.is-active{ color:#8a6d1f !important; }
.site-header:not(.scrolled) .h-cta,
.site-header:not(.scrolled) .header-cta{
  color:#141b26 !important;
  border-color:rgba(20,27,38,.45) !important;
}
.site-header:not(.scrolled) .h-burger span{ background:#141b26 !important; }

/* Logo dual: navy arriba (barra blanca) ⇄ crema al scrollear */
.site-header .h-logo,
.site-header .header-logo{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  overflow:visible !important;
}
.site-header .h-logo img,
.site-header .header-logo img{
  height:30px !important;
  width:auto !important;
  display:block !important;
  transition:opacity .45s ease !important;
}
.site-header .lg-cream{
  position:absolute !important;
  left:0 !important; top:50% !important;
  transform:translateY(-50%) !important;
  opacity:0 !important;
}
.site-header:not(.scrolled) .lg-navy{ opacity:1 !important; }
.site-header.scrolled .lg-navy{ opacity:0 !important; }
.site-header.scrolled .lg-cream{ opacity:1 !important; }

/* ═══════════════════════════════════════════════════════════════
   PULIDO EDITORIAL DEL ENCABEZADO EN TELÉFONO · 2026-09-05
   Tres cosas abarataban la marca en cada página:
   1) un punto dorado suelto que caía junto a "IVAE" y parecía
      un error de imprenta;
   2) el lockup demasiado ancho, que empujaba el EN/ES y hacía
      ver la barra amontonada;
   3) el selector de idioma con el mismo peso visual que el logo,
      cuando es una utilidad, no parte de la identidad.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  /* 1. Fuera el punto suelto: el lockup ya tiene su propia identidad */
  body .site-header .h-logo::after { display: none !important; }

  /* 2. El logo como cabecera de revista, con aire a los lados.
        El enlace medía 38px de alto (128x38): se toca sin problema por lo
        ancho, pero es el único objetivo del sitio que se quedaba corto del
        mínimo de 44px. La barra mide 56px, así que caben sin mover nada. */
  body .site-header .h-logo {
    padding: 8px 0 !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  body .site-header .h-logo img {
    max-width: 148px !important;
    width: auto !important;
    height: auto !important;
    max-height: 22px !important;
  }

  /* 3. El idioma se vuelve utilidad discreta: más chico, más tenue,
        y el activo en crema (el dorado se reserva para la marca) */
  body .site-header .lang-switch { gap: 10px !important; }
  body .site-header .lang-switch a {
    font-size: 9.5px !important;
    letter-spacing: 0.2em !important;
    opacity: .48 !important;
    /* El texto se ve chico y discreto, pero el área que se toca mide 44px
       de alto, que es el mínimo para que el dedo no falle. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    min-width: 34px !important;
    padding: 0 4px !important;
    box-shadow: inset 0 -1px 0 transparent !important;
    border-bottom: 0 !important;
    transition: opacity .3s ease, box-shadow .3s ease !important;
  }
  body .site-header .lang-switch a.is-active {
    opacity: 1 !important;
    color: var(--cream, #faf8f5) !important;
    /* el filete se pinta pegado al texto, no al borde del área tocable */
    box-shadow: inset 0 -14px 0 -13px var(--gold, #c9a54e) !important;
  }
  /* En la barra blanca del inicio, el idioma va en tinta */
  body .site-header:not(.scrolled) .lang-switch a { color: #141b26 !important; }
  body .site-header:not(.scrolled) .lang-switch a.is-active { color: #141b26 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   EL ENCABEZADO FLOTA SOBRE EL HERO · TELÉFONO · 2026-09-06
   La barra blanca de arriba funciona bien en páginas de texto, pero
   sobre un hero a sangre (foto de pared a pared o fondo tinta) partía
   la imagen en dos con una franja de aplicación, y era lo primero que
   veía el cliente. En esas 20 páginas el encabezado ahora FLOTA:
   un velo degradado en vez de una caja, el logo en crema y el idioma
   en claro. Al hacer scroll, .scrolled devuelve la barra sólida de
   siempre, así que el resto del sitio no cambia.
   El velo no es decorativo: sostiene el contraste del logo crema
   (≈5:1) incluso cuando la foto trae follaje claro arriba.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  body:has(.ivm-act-hero, .ivm-wd-hero, .ivm-st-hero) .site-header:not(.scrolled) {
    background: transparent !important;
    border-bottom-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* El velo se sale 46px por debajo de la barra: así el degradado se
     apaga FUERA del encabezado y no queda el escaloncito que delataba
     dónde terminaba la franja. */
  body:has(.ivm-act-hero, .ivm-wd-hero, .ivm-st-hero) .site-header:not(.scrolled)::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: -46px !important;
    background: linear-gradient(180deg,
      rgba(10,15,23,.74) 0%,
      rgba(10,15,23,.48) 44%,
      rgba(10,15,23,0) 100%) !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }
  body:has(.ivm-act-hero, .ivm-wd-hero, .ivm-st-hero) .site-header:not(.scrolled) .lg-navy { opacity: 0 !important; }
  body:has(.ivm-act-hero, .ivm-wd-hero, .ivm-st-hero) .site-header:not(.scrolled) .lg-cream { opacity: 1 !important; }
  body:has(.ivm-act-hero, .ivm-wd-hero, .ivm-st-hero) .site-header:not(.scrolled) .h-nav a,
  body:has(.ivm-act-hero, .ivm-wd-hero, .ivm-st-hero) .site-header:not(.scrolled) .header-nav a,
  body:has(.ivm-act-hero, .ivm-wd-hero, .ivm-st-hero) .site-header:not(.scrolled) .lang-switch a,
  body:has(.ivm-act-hero, .ivm-wd-hero, .ivm-st-hero) .site-header:not(.scrolled) .h-lang a { color: #faf8f5 !important; }
  body:has(.ivm-act-hero, .ivm-wd-hero, .ivm-st-hero) .site-header:not(.scrolled) .lang-sep { color: rgba(250,248,245,.34) !important; }
  body:has(.ivm-act-hero, .ivm-wd-hero, .ivm-st-hero) .site-header:not(.scrolled) .h-burger span { background: #faf8f5 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   EL CAJÓN DEL MENÚ · TELÉFONO · 2026-09-07
   Reportado por Vianey: "cuando vas a Diario y presionas el menú
   está terrible". Medido en WebKit a 402x874, y no era solo feo:

   1) NO SE PODÍA ALCANZAR EL PRINCIPIO DEL MENÚ. El cajón es un
      flex en columna con justify-content:center y sin desbordamiento.
      Con 23 elementos el contenido mide 1,051px dentro de 874px, y
      al centrar, lo que sobra se sale por ARRIBA y por ABAJO sin
      forma de desplazarlo: "Inicio" quedaba en top:-168px, fuera de
      la pantalla. El primer enlace del menú era inalcanzable.
      Arreglo: overflow-y auto + `margin:auto` en el interior, que
      centra cuando cabe y NO recorta cuando no cabe (a diferencia de
      justify-content:center, que recorta por los dos lados).
   2) Los once destinos ocupaban once renglones: eso es un directorio,
      no un menú. Van en dos columnas, que ahorra cinco renglones.
   3) La píldora "NEW" y el enlace "Marketing" iban en degradado
      ROSA/MORADO: ese es el color de IVAE Marketing, otra marca,
      metido dentro del menú del estudio de fotografía. Pasan al
      dorado de la casa y la píldora se va (grita, y un "NEW" que
      lleva meses puesto ya no es nuevo).
   4) El salto de 30px en Cormorant a 14px en Syne entre un nivel y
      otro era brusco; ahora los servicios también hablan Cormorant.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  body .m-nav {
    /* El cajón medía 100svh, o sea la altura MÍNIMA del viewport (la que
       queda con la barra de Safari desplegada). Al contraerse la barra el
       área visible CRECE y el cajón se quedaba corto: por debajo se asomaba
       la página, cazado en el simulador de iPhone. Headless no lo reproduce
       porque no tiene barra que se mueva. `dvh` sigue la altura real. */
    height: 100dvh !important;
    /* Centrado cuando cabe, desplazable cuando no. */
    justify-content: flex-start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding:
      calc(64px + env(safe-area-inset-top, 0px)) 24px
      calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body .m-nav .m-nav-inner {
    margin: auto !important;          /* la clave: centra sin recortar */
    width: 100% !important;
    max-width: 340px !important;
    padding: 0 !important;
  }

  /* Enlaces principales: la voz de la casa, con aire para el pulgar */
  body .m-nav .m-nav-link {
    font-size: 26px !important;
    padding: 13px 0 !important;
  }

  /* Servicios: mismo idioma tipográfico, un escalón por debajo */
  body .m-nav .m-nav-sublink {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: rgba(250, 248, 245, 0.88) !important;
    padding: 9px 0 9px 14px !important;
    min-height: 44px !important;
  }
  body .m-nav .m-nav-section-label {
    padding: 16px 0 4px !important;
  }

  /* Los once destinos, en dos columnas: de once renglones a seis */
  body .m-nav .m-nav-section + .m-nav-section {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 14px !important;
  }
  body .m-nav .m-nav-section + .m-nav-section .m-nav-section-label {
    grid-column: 1 / -1 !important;
  }
  body .m-nav .m-nav-section + .m-nav-section .m-nav-sublink {
    font-size: 15px !important;
    padding: 7px 0 7px 12px !important;
    /* 44px: el mínimo para que el dedo no falle entre dos columnas juntas */
    min-height: 44px !important;
    color: rgba(250, 248, 245, 0.72) !important;
  }

  /* Marketing es otra marca: se enlaza, no se anuncia con su color */
  body .m-nav .m-nav-sublink--accent {
    color: rgba(250, 248, 245, 0.88) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
  }
  body .m-nav .m-nav-pill { display: none !important; }

  /* EN/ES medían 34px de alto: por debajo del mínimo para el pulgar */
  body .m-nav .m-nav-lang a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* El botón de cerrar, despejado del área segura y del primer enlace */
  body .m-nav .m-nav-close {
    top: calc(14px + env(safe-area-inset-top, 0px)) !important;
    right: 18px !important;
    z-index: 2 !important;
  }
}