@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Roboto:wght@300;400;500;700&display=swap');

/* ============================================================
   YANINA MENDOZA — DESIGN SYSTEM
   Brand Manual: Earth Light Neutrals
   ============================================================ */
:root {
  /* Primary palette */
  --graphite:   #292E30;
  --linen:      #F7F8F7;
  --sandstone:  #A3947D;
  --pebble:     #B7B5B2;
  --taupe:      #D9C8A9;
  --umber:      #645B4B;
  /* Secondary */
  --ivory:      #FBF7EE;
  --warm-oat:   #BDA164;
  --white:      #FFFFFF;
  /* Utility */
  --text-dark:  #292E30;
  --text-mid:   #645B4B;
  --text-light: #A3947D;
  --border:     rgba(163,148,125,.3);
  --max:        1200px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--linen);
  color: var(--graphite);
  font-family: 'Roboto', -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---- Layout ---- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 6vw; }
section { padding: 80px 0; }
section.tight { padding: 50px 0; }

/* ---- Typography ---- */
h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  margin: 0;
  line-height: 1.15;
  letter-spacing: .01em;
}
.script-label {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 28px;
  color: var(--sandstone);
  display: block;
  margin-bottom: 6px;
}
.eyebrow {
  font-family: 'Roboto', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--sandstone);
  display: block;
  margin-bottom: 10px;
}
.eyebrow.light { color: rgba(255,255,255,.7); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-header {
  z-index: 200;
}
/* LUXURY MINIMALIST HEADER — floats transparent over the Hero, then
   darkens and locks to the top once the person scrolls past it. */
.floating-header.luxury-menu {
  position: fixed !important; /* Fijo nativo desde el inicio: elimina el salto mecánico */
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  padding: 12px 0 !important; /* Aire superior inicial equilibrado */
  height: auto !important;
  background: rgba(26, 29, 30, 0.78) !important; /* Velo traslúcido */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background .5s cubic-bezier(.25,1,.5,1),
              padding .5s cubic-bezier(.25,1,.5,1),
              box-shadow .5s cubic-bezier(.25,1,.5,1) !important;
}
.floating-header.luxury-menu.scrolled {
  padding: 6px 0 !important;
  background: rgba(26, 29, 30, 0.92) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08) !important;
}
/* MENÚ FIJO PERMANENTE EN SCROLL (CAPA MÁXIMA Z-INDEX) */
header.floating-header.luxury-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important; /* Fuerza a que el menú NUNCA quede tapado por ninguna sección */
    background: rgba(26, 29, 30, 0.88) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: background 0.3s ease, padding 0.3s ease !important;
}
.nav-bar.menu-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 4vw;
  height: 50px !important; /* NUEVA ALTURA DE LUJO: +10px de aire */
  display: flex;
  align-items: center;
  justify-content: space-between; /* Logo al extremo izquierdo, main-nav al extremo derecho */
  transition: height .5s cubic-bezier(.25,1,.5,1) !important;
}
/* Compactación de la caja interna en scroll */
.floating-header.luxury-menu.scrolled .nav-bar.menu-container {
  height: 42px !important;
}
/* Logo — Playfair Display, stacked vertical lockup per brand manual */
.nav-logo {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  line-height: 0.82 !important;
  cursor: pointer !important;
  z-index: 210;
}
.nav-logo .logo-top {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  letter-spacing: .16em !important;
  color: var(--linen) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  display: block !important;
  opacity: 0.35 !important;
  transition: opacity 0.3s ease, letter-spacing 0.3s ease !important;
}
.nav-logo .logo-bottom {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .16em !important;
  color: var(--taupe) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin-top: 2px !important;
  display: block !important;
  opacity: 0.35 !important;
  transition: opacity 0.3s ease, letter-spacing 0.3s ease !important;
}
.nav-logo:hover .logo-top,
.nav-logo:hover .logo-bottom,
.nav-logo:focus .logo-top,
.nav-logo:focus .logo-bottom {
  opacity: 1 !important;
  letter-spacing: .20em !important;
}

/* Desktop links */
.nav-links {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}
.nav-links li { position: relative; }
.nav-links a,
.nav-dropdown a,
.lang-toggle a,
.nav-cta,
.hamburger,
.link-arrow,
.hero-actions a,
.eco-link,
.m-link,
.mobile-lang a {
  cursor: pointer !important;
}
.nav-links a {
  text-decoration: none;
  color: rgba(247,248,247,.75);
  position: relative;
  padding-bottom: 4px;
  transition: color .2s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--linen); }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--taupe);
  transition: width .3s ease, left .3s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
  left: 0;
}

/* Dropdown */
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100% !important;
  left: -14px;
  background: var(--graphite);
  border: 1px solid rgba(247,248,247,.12);
  min-width: 270px;
  padding: 12px 0;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
/* Invisible bridge patch: covers the pointer's transition gap so hovering
   from the trigger down into the menu never closes it. */
.nav-dropdown::before {
  content: '' !important;
  position: absolute !important;
  top: -24px !important;
  left: 0 !important;
  right: 0 !important;
  height: 24px !important;
  background: transparent !important;
}
.nav-links li:hover .nav-dropdown,
.nav-links li:focus-within .nav-dropdown,
.nav-links li.dropdown-open .nav-dropdown {
  display: block;
}
.nav-dropdown a {
  display: block;
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: none;
  color: rgba(247,248,247,.7);
}
.nav-dropdown a:hover { color: var(--linen); background: rgba(255,255,255,.05); }

/* Language toggle */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
}
.lang-toggle a { text-decoration: none; color: rgba(247,248,247,.5); transition: color .15s; cursor: pointer; }
.lang-toggle a:hover { color: var(--linen); }
.lang-toggle a.active { color: var(--linen); }
.lang-toggle span { color: rgba(247,248,247,.3); }

/* CTA button */
.nav-cta {
  border: 1px solid rgba(247,248,247,.5);
  padding: 8px 18px;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--linen);
  transition: .18s;
  white-space: nowrap;
}
.nav-cta { cursor: pointer; }
.nav-cta:hover { background: var(--linen); color: var(--graphite); }

/* Groups the page links + language switcher into a single block so the
   whole navigation sits flush against the far right, next to the logo
   on the far left (menu-container handles the space-between). */
.main-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

/* Right nav group (language switcher + hamburger) */
.nav-right { display: flex; align-items: center; gap: 20px; }

/* ---- Hamburger ---- */
#nav-toggle { display: none; }
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  z-index: 99991 !important; /* Debe quedar por encima del panel (99990) para poder cerrarlo */
}
.hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--linen);
  border-radius: 1px;
  transition: transform .25s, opacity .2s;
}

/* Panel del menú móvil — Cobertura total del Viewport, fondo sólido
   opaco (sin backdrop-filter propio) para eliminar cualquier
   dependencia del Containing Block del header */
.mobile-nav {
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 99990 !important;
  background: #1a1d1e !important; /* Grafito sólido 100% opaco */
  padding: 90px 8vw 40px 8vw !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.mobile-nav .m-link {
  display: block;
  color: var(--linen);
  text-decoration: none;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(247,248,247,.1);
}
.mobile-nav .m-link:hover { color: var(--taupe); }
.mobile-nav .m-sub { margin: 4px 0 4px 0; }
.mobile-nav .m-sub a {
  display: block;
  padding: 9px 0 9px 16px;
  font-family: 'Roboto', sans-serif;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(247,248,247,.6);
  text-decoration: none;
}
.mobile-nav .m-sub a:hover { color: var(--linen); }
.mobile-nav .m-section {
  font-family: 'Roboto', sans-serif;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sandstone);
  font-weight: 700;
  padding: 18px 0 2px;
}
.mobile-lang {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(247,248,247,.1);
}
.mobile-lang a {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(247,248,247,.5);
}
.mobile-lang a.active { color: var(--linen); }
.mobile-cta-wrap { margin-top: 20px; }
.mobile-cta-wrap .nav-cta { display: inline-block; }

/* Checkbox hack */
#nav-toggle:checked ~ .site-header .mobile-nav { display: flex !important; }
#nav-toggle:checked ~ .site-header .hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#nav-toggle:checked ~ .site-header .hamburger span:nth-child(2) { opacity: 0; }
#nav-toggle:checked ~ .site-header .hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* Anular backdrop-filter al abrir el menú para prevenir el bug de
   contención (containing block) de iOS Safari con position:fixed */
#nav-toggle:checked ~ .site-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  border-bottom: none !important;
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .hamburger { display: flex; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background-image: url('images/hero-extended.jpg') !important; /* pre-recortada 1920x1080 */
  background-repeat: no-repeat !important;
  background-size: cover !important; /* LÓGICA PURA: ya viene recortada, cover la muestra idéntica */
  background-position: center center !important;
  color: var(--linen) !important;
  overflow: hidden !important;
}
/* LÓGICA ESPEJO: la etiqueta <img> queda sincronizada con el mismo
   centrado natural, sin ningún zoom artificial. */
.hero-bg-image {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important; /* Centrado absoluto natural */
  z-index: 0 !important; /* Debajo del degradado (z-index:1) y del texto (z-index:2) */
}
/* Drastic cutoff gradient: dark only over the text zone, dissolves
   completely before reaching Yanina's face — full natural light on her. */
.hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg,
    rgba(20, 22, 23, 0.98) 0%,
    rgba(20, 22, 23, 0.85) 25%,
    rgba(20, 22, 23, 0.0) 45%,
    rgba(0, 0, 0, 0) 100%) !important;
  z-index: 1 !important;
}

@media (max-width: 640px) {
  .hero {
    background-position: 50% center !important;
    min-height: 82vh !important;
  }
  /* 1. Tercer ajuste: con 47% la nariz seguía corrida a la derecha
     del centro de pantalla; 50% la centra sobre el eje vertical
     medio del recorte de celular */
  .hero-bg-image {
    object-position: 50% center !important;
  }
  /* 2. Sustituye el velo negro pesado por un degradado ligero y
     luminoso, dejando pasar más luz natural sobre su rostro */
  .hero::before {
    background: linear-gradient(
      180deg,
      rgba(20, 22, 23, 0.45) 0%,
      rgba(20, 22, 23, 0.15) 50%,
      rgba(20, 22, 23, 0.70) 100%
    ) !important;
    z-index: 1 !important;
  }
  /* 3. Bloque de texto alineado hacia abajo del Hero (no empuja la
     altura de la sección, que es fija en 100vh vía la regla base).
     Esto evita que el título quede pegado a la cara sin romper el
     resto de las secciones */
  .hero {
    align-items: flex-end !important;
  }
  .hero-content {
    padding-top: 0 !important;
    padding-bottom: 64px !important;
  }
}

.hero-inner {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 !important;
  padding: 0 0 0 4vw !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
.hero-content {
  position: relative !important;
  z-index: 2 !important; /* Flota el texto por encima de la imagen, use o no <img> */
  max-width: 100% !important;
  width: 100%;
  text-align: center !important;
  padding-top: 70px !important; /* Ajuste para el nuevo menú de 50px */
}
.hero h1 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0.84 !important;
  margin-bottom: 20px !important;
}
.hero h1 .hero-top {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(44px, 7vw, 84px) !important;
  color: var(--linen) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}
.hero h1 .hero-bottom {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: clamp(44px, 7vw, 84px) !important;
  color: var(--linen) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  margin-top: 4px !important;
}
.hero-tagline {
  font-family: 'Playfair Display', serif !important;
  font-style: normal !important;
  font-size: clamp(18px, 2.2vw, 22px) !important;
  color: rgba(247, 248, 247, 0.95) !important;
  margin: 20px auto 0 !important;
  max-width: 580px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}
.hero-creds {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(247, 248, 247, 0.75) !important;
  margin-top: 24px !important;
}
.hero-creds .creds-divider {
  color: var(--taupe) !important;
  opacity: 0.5 !important;
}
.hero-actions {
  margin-top: 36px !important;
  display: flex !important;
  gap: 24px !important;
  justify-content: center !important;
  align-items: center !important;
}
/* NOTA: "Work with me →" y "Explore the ecosystem →" usan class="link-arrow
   hero-link". Antes existía aquí una regla .hero-actions .hero-link que
   fijaba estos mismos valores (12.5px / 500 / .08em / uppercase) — ahora
   que .link-arrow base quedó unificado a .08em, esa regla era 100%
   redundante y se eliminó. */
.hero-actions-divider {
  color: rgba(217,200,169,.4);
  font-size: 14px;
}
@media (max-width: 520px) {
  .hero-actions-divider { display: none; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 640px) {
  .hero-content { max-width: 100%; }
  .hero-tagline { max-width: 100%; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  padding: 13px 30px;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: .18s;
}
.btn-light { background: var(--linen); color: var(--graphite); }
.btn-light:hover { background: var(--taupe); }
.btn-outline-light { border: 1px solid rgba(247,248,247,.65); color: var(--linen); }
.btn-outline-light:hover { background: rgba(247,248,247,.1); }
.btn-dark { background: var(--graphite); color: var(--linen); }
.btn-dark:hover { background: var(--umber); }
.btn-outline-dark { border: 1px solid var(--graphite); color: var(--graphite); }
.btn-outline-dark:hover { background: var(--graphite); color: var(--linen); }

.link-arrow {
  font-family: 'Roboto', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .08em; /* unificado con el estándar de Nivel 1 del Hero */
  text-transform: uppercase;
  text-decoration: none;
  color: var(--linen);
  border-bottom: 1px solid rgba(217,200,169,.5);
  padding-bottom: 2px;
  transition: .15s;
}
.link-arrow:hover { border-color: var(--linen); }
.link-arrow.dark { color: var(--graphite); border-color: rgba(163,148,125,.5); }
.link-arrow.dark:hover { border-color: var(--graphite); }

/* ============================================================
   TRUSTED BY + ABOUT ME — Shared continuous stone wall
   ------------------------------------------------------------
   Both sections point at the exact same background-image, size,
   and position so they read as one unbroken surface, not two
   separate textures stitched together.
   ============================================================ */
.trusted-by,
.about-me {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-image: url('images/bg-texture.jpg') !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-size: 160% auto !important;
  background-position: left center !important;
  border: none !important;
  box-shadow: none !important;
}
.trusted-by {
  min-height: auto !important;
  padding: 65px 0 60px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 920px) {
  .trusted-by,
  .about-me {
    background-image: url('images/bg-texture-mobile.jpg') !important;
    background-size: cover !important;
    background-attachment: scroll !important;
    background-position: center !important;
  }
  .trusted-by { padding: 60px 0 !important; }
}

.trusted-container {
  width: 100% !important;
  max-width: 1300px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 25px !important; /* Espaciado ceñido y elegante */
}

/* NOTA: el h2 de "Trusted by" usa class="section-label" y hereda su tipografía
   de la regla .section-label (ver arriba). Antes existía aquí una regla
   .trusted-by h2 duplicada con valores idénticos — se eliminó por ser
   código muerto (nunca aportaba un valor distinto al ya heredado). */

/* FILA ELITE MONUMENTAL DE GRAN PRENSA (+35%) */
.elite-static-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 90px !important;
  margin: 0 !important; /* el aire simétrico ahora lo controla el whisper de abajo */
  width: 100% !important;
}
.elite-static-row .elite-brand {
  height: 135px !important; /* ESCALA MONUMENTAL MÁXIMA VISIBILIDAD */
  width: auto !important;
  filter: brightness(0) invert(1) !important; /* Blanco sólido nítido */
  opacity: 0.7 !important;
  transition: opacity 0.4s ease, transform 0.4s ease !important;
}
.elite-static-row .elite-brand:hover {
  opacity: 1 !important;
  transform: scale(1.03) !important;
}

/* TEXTO DE CONTEXTO SECUNDARIO SUTIL */
.carousel-context-whisper {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400 !important;
  font-size: 10.5px !important;
  color: var(--graphite) !important; /* Gris grafito: nítido sobre las manchas claras de la piedra */
  letter-spacing: 0.24em !important; /* Ultra espaciado editorial */
  text-transform: uppercase !important;
  margin: 35px 0 !important; /* aire simétrico calibrado entre corona y carrusel */
  text-align: center !important;
  opacity: 0.85 !important;
}

/* INGENIERÍA DEL DESFILE ESCÉNICO EXTRA GRANDE (+35%) */
.scenic-carousel-wrapper {
  width: 100vw !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 0 15px 0 !important; /* el aire superior ahora lo aporta el whisper simétrico */
  /* Difuminado sutil en los extremos de la pantalla */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%) !important;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%) !important;
}
.scenic-carousel-track {
  display: flex !important;
  align-items: center !important;
  gap: 130px !important; /* Espacio de aire holgado para marcas grandes */
  width: max-content !important;
  animation: slowScenicWalk 55s linear infinite !important; /* Ritmo contemplativo */
}
.scenic-carousel-track img {
  height: 105px !important; /* LOGOS REALMENTE GRANDES, EXPANDIDOS Y LEGIBLES */
  width: auto !important;
  flex-shrink: 0 !important; /* Prohíbe terminantemente que el navegador los comprima */
  filter: brightness(0) invert(1) !important;
  opacity: 0.7 !important;
  transition: opacity 0.4s ease, transform 0.4s ease !important;
}
.scenic-carousel-wrapper:hover .scenic-carousel-track {
  animation-play-state: paused !important;
  /* Se detiene al tacto */
}
.scenic-carousel-track img:hover {
  opacity: 1 !important;
  transform: scale(1.03) !important;
}
@keyframes slowScenicWalk {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 65px)); }
}

@media (max-width: 920px) {
  .trusted-container { gap: 18px !important; }
  .elite-static-row { gap: 56px !important; }
  .elite-static-row .elite-brand { height: 82px !important; }
  .scenic-carousel-track { gap: 84px !important; }
  .scenic-carousel-track img { height: 64px !important; }
}
@media (max-width: 560px) {
  .trusted-by h2 { font-size: 20px !important; }
  .elite-static-row { gap: 36px !important; }
  .elite-static-row .elite-brand { height: 58px !important; }
  .carousel-context-whisper { font-size: 9px !important; letter-spacing: 0.18em !important; }
  .scenic-carousel-track { gap: 56px !important; animation-duration: 40s !important; }
  .scenic-carousel-track img { height: 44px !important; }
}

/* ============================================================
   SECTION BACKGROUNDS
   ============================================================ */
.bg-linen { background: var(--linen); }
.bg-ivory { background: var(--ivory); }
.bg-graphite { background: var(--graphite); color: var(--linen); }
.bg-texture {
  background: url('images/bg-texture.jpg') center / cover;
  position: relative;
}
.bg-texture > * { position: relative; }

/* ============================================================
   ABOUT ME (home) — Organic photo-dictated height, funnel/diamond
   text silhouette, ultra-translucent mask on the shared stone wall
   ------------------------------------------------------------
   CONTRAST FLAG: the mask below is intentionally near-transparent
   (rgba .12) to let the golden stone show through behind the type,
   per spec. On desktop this is a much thinner safety margin than
   the previous gradient — if the white text loses legibility
   against the light stone in review, raise the rgba alpha value
   on .about-content-block and nothing else needs to change.
   ============================================================ */
.about-me {
  position: relative !important;
  width: 100% !important;
  min-height: auto !important; /* the photo's natural height drives the section */
  height: auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
}
.about-wrapper {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
}
/* ANCHOR CONTAINER: photo shows in full, no forced cropping */
.about-image-container {
  width: 100% !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
}
.about-profile-photo {
  width: 100% !important;
  height: auto !important; /* dictates the section's real visual proportion */
  display: block !important;
  object-fit: contain !important;
}
/* ULTRA-TRANSLUCENT DARK SCREEN (a whisper of contrast) */
.about-content-block {
  padding: 60px 5vw !important;
  background: rgba(41,46,48,.12) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important; /* centered for the diamond silhouette */
  text-align: center !important;
}
/* EDITORIAL FUNNEL/DIAMOND SCULPTING (progressive max-widths) */
.funnel-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3.5vw, 42px) !important;
  color: var(--linen) !important;
  line-height: 1.3 !important;
  max-width: 90% !important; /* funnel's upper base */
  margin: 0 auto 25px auto !important;
}
.funnel-p1 {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500 !important; /* Restaurado a Medium (Efecto Lead) */
  font-size: 16.5px !important;
  color: var(--linen) !important;
  line-height: 1.65 !important;
  max-width: 82% !important; /* intermediate narrowing */
  margin: 0 auto 20px auto !important;
}
.funnel-p2 {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400 !important; /* Restaurado a Regular con cuerpo (Legibilidad nítida) */
  font-size: 16.5px !important; /* Restaurado a 16.5px */
  color: var(--linen) !important; /* Corregido a lino nítido sobre piedra */
  line-height: 1.65 !important;
  max-width: 82% !important; /* Sincronizado el ancho visual con p1 */
  margin: 0 auto 30px auto !important;
}
.funnel-quote {
  border-left: none !important; /* dropped so it doesn't break the diamond's symmetry */
  border-top: 1px solid rgba(217,200,169,.3) !important;
  border-bottom: 1px solid rgba(217,200,169,.3) !important;
  padding: 18px 0 !important;
  max-width: 65% !important; /* the diamond's center */
  margin: 0 auto 35px auto !important;
  width: 100% !important;
}
.strategic-text {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  color: var(--taupe) !important; /* Golden Taupe, unified with .section-label */
  line-height: 1.5 !important; /* generous leading for the two-line break */
  margin: 0 !important;
}
.section-label {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important; /* the one authorized italic authorship accent */
  font-weight: 600 !important; /* Restaurado a Semi-Bold */
  font-size: 18px !important;
  color: var(--taupe) !important;
  letter-spacing: .1em !important;
  margin-bottom: 15px !important;
  display: block !important;
}
.luxury-action-link {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500 !important; /* unificado con Nivel 1 (antes 400) */
  font-size: 12.5px !important; /* unificado con Nivel 1 (antes 13px) */
  color: var(--linen) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important; /* unificado con Nivel 1 (antes .16em) */
  text-decoration: none !important;
  border-bottom: 1px solid rgba(247,248,247,.4) !important;
  padding-bottom: 4px !important;
  transition: all .3s ease !important;
  margin: 0 auto !important;
}
.luxury-action-link:hover {
  color: var(--taupe) !important;
  border-bottom: 1px solid var(--taupe) !important;
}

@media (max-width: 920px) {
  .about-wrapper { grid-template-columns: 1fr !important; }
  .about-content-block { padding: 40px 20px !important; background: rgba(41,46,48,.85) !important; }
  .funnel-title, .funnel-p1, .funnel-p2, .funnel-quote { max-width: 100% !important; }
}

/* ============================================================
   ABOUT PAGE — Split sticky layout
   ============================================================ */
/* CONTENEDOR SPLIT — LLEVA LA PIEDRA PARA LA TRANSPARENCIA DEL HEADER AL CARGAR */
.about-split {
    display: grid;
    grid-template-columns: 46% 1fr;
    background-image: linear-gradient(to bottom, rgba(26, 29, 30, 0.78) 0%, rgba(26, 29, 30, 0.78) 100%), url('images/bg-texture.jpg') !important;
    background-attachment: fixed !important;
    background-position: left center !important;
    background-size: 160% auto !important;
    background-repeat: no-repeat !important;
    padding-top: 74px; /* Empuja el contenido para liberar el espacio del header flotante */
}
@media (max-width: 920px) {
    .about-split {
        background-image: linear-gradient(to bottom, rgba(26, 29, 30, 0.78) 0%, rgba(26, 29, 30, 0.78) 100%), url('images/bg-texture-mobile.jpg') !important;
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center !important;
    }
}
@media (max-width: 840px) { .about-split { grid-template-columns: 1fr; } }
/* FOTO STICKY — FACE SAFETY ZONE (Se detiene justo debajo del header) */
.about-split-photo {
    position: sticky;
    top: 74px; /* Evita que el menú flote encima de la cara de Yanina al hacer scroll */
    height: calc(100vh - 74px);
    overflow: hidden;
}
@media (max-width: 840px) { .about-split-photo { position: relative; height: 60vh; top: 0 !important; } }
.about-split-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 840px) { .about-split { grid-template-columns: 1fr; } }
/* COLUMNA DE TEXTO — 100% SÓLIDA DEEP GRAPHITE (SIN TRANSPARENCIAS NI TEXTURA) */
.about-split-text {
    padding: 80px 6vw 80px !important; /* Ancho elegante original, libre de padding excesivo */
    background: #1a1d1e !important; /* Deep Graphite sólido mate */
    color: var(--linen) !important;
    box-sizing: border-box !important;
    background-image: none !important;
}
/* Reseteo de espaciados responsivos normales para el bloque de texto */
@media (max-width: 840px) {
    .about-split-text {
        padding: 60px 6vw !important;
    }
}
.about-split-text h1 {
    color: var(--linen) !important;
    font-size: clamp(26px, 3vw, 40px) !important;
    margin-bottom: 28px !important;
    letter-spacing: 0.02em !important; /* igualado a la regla del H1 de Home */
}
/* Las dos líneas del H1 replican el split de pesos del Home:
   línea superior más ligera, línea inferior en semibold */
.about-split-text h1 .hero-top {
    font-weight: 400 !important;
}
.about-split-text h1 .hero-bottom {
    font-weight: 600 !important;
    display: block !important;
    margin-top: 4px !important;
}
/* Tipografía impecable de lectura */
/* COLUMNA DE TEXTO — MAQUETACIÓN EDITORIAL REFINADA */
/* TEXTOS TIPOGRÁFICOS */
.about-split-text p {
    font-size: 16.5px !important;
    color: rgba(247, 248, 247, 0.85) !important;
    margin: 0 0 20px 0 !important;
    max-width: 600px !important;
    line-height: 1.8 !important;
}
/* ETIQUETAS DE ACTOS — igualadas a .kicker (mismo rol de eyebrow-kicker del Home) */
.act-label {
    font-family: 'Roboto', sans-serif !important;
    font-size: 0.75rem !important; /* antes 11px — igualado a .kicker (12px) */
    font-weight: 700 !important;
    letter-spacing: 0.22em !important; /* Ultra espaciado */
    text-transform: uppercase !important;
    color: var(--taupe) !important; /* antes --sandstone — igualado a .kicker */
    display: block !important;
    margin: 60px 0 16px 0 !important; /* Más aire arriba para separar los capítulos */
}
.about-split-text h3 {
    color: var(--linen) !important;
    font-size: 1.55rem !important; /* antes 22px — igualado a .pillar h3 del Home */
    margin-bottom: 12px !important;
}

/* ============================================================
   PILLARS / SERVICES
   ============================================================ */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  padding: 44px 36px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(41,46,48,.28);
  display: flex;
  flex-direction: column;
}
.pillar .p-num {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--sandstone);
  margin-bottom: 16px;
}
.pillar h3 { font-size: 23px; color: var(--linen); margin-bottom: 14px; }
.pillar p { font-size: 14.5px; color: rgba(217,200,169,.82); flex: 1; line-height: 1.7; }
.pillar-link {
  margin-top: 22px;
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: none;
  text-decoration: none;
  color: var(--linen);
  border-bottom: 1px solid var(--sandstone);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color .3s ease, border-color .3s ease;
}
.pillar-link:hover {
  color: var(--taupe);
  border-bottom-color: var(--taupe);
}

/* ============================================================
   SERVICE CARDS (brand-architecture etc.)
   ============================================================ */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(163,148,125,.25);
}
@media (max-width: 768px) { .service-grid { grid-template-columns: 1fr; } }
.service-card {
  background: var(--ivory);
  padding: 34px 28px;
}
.service-card .kicker {
  font-family: 'Roboto', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sandstone);
  margin-bottom: 12px;
  display: block;
}
.service-card h3 { font-size: 19px; color: var(--graphite); margin-bottom: 10px; }
.service-card p { font-size: 14px; color: var(--umber); line-height: 1.7; margin: 0; }

/* ============================================================
   PROCESS PHASES
   ============================================================ */
.phases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.1);
}
@media (max-width: 860px) { .phases { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .phases { grid-template-columns: 1fr; } }
.phase {
  background: rgba(41,46,48,.3);
  padding: 32px 24px;
}
.phase .p-n {
  font-family: 'Playfair Display', serif;
  font-size: 38px;
  color: var(--sandstone);
  margin-bottom: 12px;
  display: block;
}
.phase h4 { font-size: 16px; color: var(--linen); margin-bottom: 10px; font-family: 'Playfair Display', serif; }
.phase p { font-size: 13.5px; color: rgba(217,200,169,.8); line-height: 1.7; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  background: url('images/bg-texture.jpg') center / cover;
  position: relative;
  padding: 110px 0 80px;
  text-align: center;
  color: var(--linen);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(41,46,48,.55);
}
.page-hero > * { position: relative; }
.page-hero h1 {
    color: var(--linen) !important;
    font-size: clamp(28px, 4.5vw, 54px) !important;
    max-width: 1100px !important; /* Espacio horizontal amplio para evitar saltos prematuros */
    margin: 0 auto !important;
    line-height: 1.25 !important;
}
@media (max-width: 768px) {
    .page-hero h1 br {
        display: none !important; /* En móviles el texto fluye de forma natural */
    }
}
.page-hero .page-lede { color: rgba(217,200,169,.9); font-size: 17.5px; max-width: 660px; margin: 20px auto 0; font-family: 'Playfair Display', serif; font-style: italic; }

/* ============================================================
   SECTION HEAD
   ============================================================ */
.section-head { max-width: 700px; margin: 0 auto 48px; text-align: center; }
.section-head h2 { font-size: clamp(24px, 3.4vw, 38px); }
.section-head.left { text-align: left; margin-left: 0; max-width: 760px; }
.section-head p { margin: 14px 0 0; font-size: 16px; color: var(--umber); line-height: 1.75; }
.section-head.on-dark p { color: rgba(217,200,169,.8); }
/* On dark/textured backgrounds, the italic eyebrow reads in Sandstone Beige for maximum warmth against graphite */
.section-head.on-dark .section-label { color: var(--sandstone) !important; }

/* ============================================================
   WHAT I DO / SERVICES — adaptive balance, 100vh viewport-fit
   ============================================================ */
/* SECCIÓN SERVICIOS: ALINEACIÓN ADAPTATIVA DE ALTO ESTÁNDAR */
#what-i-do {
    position: relative !important;
    /* bg-texture.jpg es el archivo real en /images — stone-texture.jpg no existe en el proyecto */
    background-image: url('images/bg-texture.jpg') !important;
    background-attachment: fixed !important;
    /* Mismo encuadre que .trusted-by / .about-me (160% auto / left center) — cover/center center
       reintroduce la costura de piedra ya diagnosticada entre secciones */
    background-position: left center !important;
    background-size: 160% auto !important;
    background-repeat: no-repeat !important;

    /* Altura de pantalla y centrado */
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 80px 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
/* El markup real anida .services-overlay > .wrap (dos wrappers, no uno solo como
   asume ".container" en el literal). Aplanamos .services-overlay para que .wrap
   sea el hijo directo real de #what-i-do dentro del flex — si no, .services-overlay
   se encogería a su contenido y el ancho panorámico de 1600px dejaría de garantizarse */
#what-i-do .services-overlay {
    display: contents !important;
}
/* Contenedor interno real (selector real: .wrap, no .container — y anulamos su
   max-width:1200px heredado del sitio) */
#what-i-do .wrap {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
}
/* Velo continuo calibrado a 0.64 sobre la piedra */
#what-i-do::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(36, 40, 42, 0.64) !important;
    z-index: 1 !important;
    display: block !important;
}
@media (max-width: 920px) {
  #what-i-do {
    background-image: url('images/bg-texture-mobile.jpg') !important;
    background-size: cover !important;
    background-attachment: scroll !important; /* fixed causa jitter en iOS/Android */
    background-position: center !important;
  }
}

/* ============================================================
   THE ECOSYSTEM — COMPOSICIÓN DE LOGOS MONUMENTALES (100vh)
   (id real: #the-ecosystem, sobre <section class="bg-graphite">)
   ============================================================ */
#the-ecosystem {
    position: relative !important;
    background-image: url('images/bg-texture.jpg') !important;
    background-attachment: fixed !important;
    background-position: left center !important;
    background-size: 160% auto !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;

    /* Altura de visor y centrado vertical */
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 60px 0 !important;
    box-sizing: border-box !important;
}

/* Velo continuo calibrado a 0.34 */
#the-ecosystem::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(36, 40, 42, 0.34) !important;
    z-index: 1 !important;
    display: block !important;
}

#the-ecosystem .wrap,
#the-ecosystem .section-head,
#the-ecosystem h2,
#the-ecosystem p,
#the-ecosystem .eco-grid,
#the-ecosystem .eco-card {
    position: relative !important;
    z-index: 2 !important;
}

/* CONTENEDOR GENERAL: Espaciado lateral calibrado */
#the-ecosystem .wrap {
    display: block !important;
    width: 100% !important;
    max-width: 1600px !important; /* Espacio horizontal expandido para evitar que sature */
    margin: 0 auto !important;
    padding: 0 4% !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

#the-ecosystem .section-head {
    max-width: none !important;
    margin: 0 auto 12px auto !important;
    text-align: center !important;
}

#the-ecosystem .script-label {
    color: #c4b09c !important;
    display: block !important;
    text-align: center !important;
    margin-bottom: 30px !important;
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-weight: 600 !important; /* Restaurado a Semi-Bold */
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 1.3rem !important;
}

#the-ecosystem .single-line-title {
    color: #ffffff !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 45px !important;
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(1.3rem, 1.8vw, 1.65rem) !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    letter-spacing: -0.01em !important;
}

#the-ecosystem .eco-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Tarjetas: Separación interna para que el espacio de aire se distribuya homogéneo */
#the-ecosystem .eco-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 2% !important; /* Menos restricción lateral interna */
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    position: relative !important;
    box-sizing: border-box !important;
}
#the-ecosystem .eco-card::before {
    display: none !important;
}

/* Líneas divisorias sutiles */
#the-ecosystem .eco-grid > div:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 10% !important;
    height: 80% !important;
    width: 1px !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

#the-ecosystem .eco-logo-link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 240px !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    text-decoration: none !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#the-ecosystem .eco-logo-link:hover {
    transform: translateY(-12px) scale(1.06) !important;
}

#the-ecosystem .eco-card img.eco-logo {
    height: auto !important;
    max-height: 220px !important;
    width: auto !important;
    max-width: 95% !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
    transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#the-ecosystem .eco-logo-link:hover img.eco-logo {
    filter: brightness(0) invert(1) drop-shadow(0 12px 18px rgba(255, 255, 255, 0.18)) !important;
}

#the-ecosystem .eco-card .kicker {
    font-family: 'Roboto', sans-serif !important;
    font-size: 0.75rem !important; /* Sincronizado exacto con .p-num */
    font-weight: 700 !important;   /* Sincronizado exacto con .p-num (Bold) */
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--taupe) !important;
    margin-top: 15px !important;
    margin-bottom: 12px !important;
    display: block !important;
}

/* SINCRONIZACIÓN MÁXIMA Y BALANCE EN DOS LÍNEAS COMPLETAS */
#the-ecosystem .eco-card p {
    font-family: 'Roboto', sans-serif !important;
    font-size: 1.05rem !important; /* Igualado exacto a la escala de servicios */
    font-weight: 400 !important;   /* Igualado exacto al cuerpo de servicios */
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 460px !important;    /* Ajuste óptico exacto para albergar las frases enteras */
    text-align: center !important;
    text-wrap: balance !important; /* Distribuye el texto simétricamente en casi dos líneas iguales */
    hyphens: none !important;
    letter-spacing: normal !important;

    /* MANTIENE LIBERADO EL CONTENEDOR (TEXTO ENTERO SIN RECORTE) */
    display: block !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
}

#the-ecosystem .ecosystem-footer {
    text-align: center !important;
    margin-top: 45px !important;
    position: relative !important;
    z-index: 2 !important;
}

@media (max-width: 920px) {
    #the-ecosystem {
        background-image: url('images/bg-texture-mobile.jpg') !important;
        background-size: cover !important;
        background-attachment: scroll !important;
        background-position: center !important;
        min-height: auto !important;
        padding: 60px 0 !important;
    }
    #the-ecosystem .wrap {
        padding: 0 6vw !important;
    }
    #the-ecosystem .single-line-title {
        white-space: normal !important;
        padding: 0 15px !important;
        font-size: 2rem !important;
    }
    #the-ecosystem .eco-grid {
        grid-template-columns: 1fr !important;
        width: 85% !important;
        gap: 50px !important;
    }
    #the-ecosystem .eco-card {
        padding: 0 !important;
    }
    #the-ecosystem .eco-card p {
        width: 100% !important;
    }
    #the-ecosystem .eco-grid > div:not(:last-child)::after {
        display: none !important;
    }
    #the-ecosystem .eco-logo-link {
        height: 160px !important;
    }
    #the-ecosystem .eco-card img.eco-logo {
        max-height: 140px !important;
    }
}

/* ============================================================
   WHAT I'VE BUILT — dedicated page (ecosystem.html)
   Two compositions: #built-studio (single card, graphite bg)
   and #built-ventures (two cards, stone/texture bg).
   Scoped by ID so #the-ecosystem on the homepage is untouched.
   ============================================================ */
#built-studio .eco-grid,
#built-ventures .eco-grid {
  display: grid;
  gap: 0;
  align-items: stretch;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background: transparent;
}
#built-studio .eco-grid {
  grid-template-columns: minmax(0, 480px);
  justify-content: center;
}
#built-ventures .eco-grid {
  grid-template-columns: repeat(2, 1fr);
  max-width: 1000px;
}
#built-studio .eco-card,
#built-ventures .eco-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 10px 4%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}
#built-ventures .eco-grid > div:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: rgba(100, 91, 75, 0.18);
}
#built-studio .eco-card img.eco-logo,
#built-ventures .eco-card img.eco-logo {
  height: auto;
  max-height: 130px;
  width: auto;
  max-width: 80%;
  object-fit: contain;
  margin-bottom: 22px;
}
#built-studio .eco-card img.eco-logo {
  filter: brightness(0) invert(1);
}
#built-studio .eco-card .kicker,
#built-ventures .eco-card .kicker {
  font-family: 'Roboto', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 4px;
  margin-bottom: 10px;
  display: block;
}
#built-studio .eco-card .kicker { color: var(--taupe); }
#built-ventures .eco-card .kicker { color: var(--sandstone); }
#built-studio .eco-card h3 { color: var(--linen); font-size: 1.5rem; margin-bottom: 14px; }
#built-ventures .eco-card h3 { color: var(--graphite); font-size: 1.5rem; margin-bottom: 14px; }
#built-studio .eco-card p {
  font-family: 'Roboto', sans-serif;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(255,255,255,.65);
  max-width: 460px;
  margin: 0 auto;
}
#built-ventures .eco-card p {
  font-family: 'Roboto', sans-serif;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--umber);
  max-width: 420px;
  margin: 0 auto;
}
#built-studio .eco-link,
#built-ventures .eco-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(217,200,169,.5);
  padding-bottom: 2px;
  transition: .15s;
}
#built-studio .eco-link { color: var(--linen); }
#built-studio .eco-link:hover { border-color: var(--linen); }
#built-ventures .eco-link { color: var(--graphite); border-color: rgba(163,148,125,.5); }
#built-ventures .eco-link:hover { border-color: var(--graphite); }

@media (max-width: 920px) {
  #built-ventures .eco-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  #built-ventures .eco-grid > div:not(:last-child)::after { display: none; }
  #built-studio .eco-card img.eco-logo,
  #built-ventures .eco-card img.eco-logo { max-height: 100px; }
}

/* Cabecera con aire y contraste perfecto */
.services-header-block {
    text-align: center !important;
    position: relative !important;
    z-index: 2 !important;
}
.services-eyebrow {
    color: #c4b09c !important;
    display: block !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-weight: 600 !important; /* Restaurado a Semi-Bold */
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 1.3rem !important;
}
.services-title-diamond {
    font-family: 'Playfair Display', serif !important;
    line-height: 1.35 !important;
    max-width: 1050px !important;
    margin: 0 auto !important;
    text-wrap: balance !important;
}
#what-i-do h2 {
    color: #ffffff !important;
    text-align: center !important;
    margin-bottom: 60px !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 2.6rem !important;
    font-weight: 500 !important; /* Restaurado a Medium */
    position: relative !important;
    z-index: 2 !important;
}
@media (max-width: 991px) {
    #what-i-do h2 {
        font-size: 2rem !important;
        padding: 0 20px !important;
    }
}

/* GRILLA PANORÁMICA — align-items:stretch fuerza a que las tres columnas midan
   exactamente lo mismo de alto, lo cual alinea los enlaces inferiores sin trucos
   (selector real: .pillars, no .services-grid) */
#what-i-do .pillars {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    align-items: stretch !important; /* Fuerza a las tres columnas a medir exactamente lo mismo */
    position: relative !important;
    z-index: 2 !important;
    width: 90% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    background: transparent !important;
}
/* Columnas flotantes (selector real: .pillars > .pillar, no .service-card) */
#what-i-do .pillars > .pillar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 20px 50px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    position: relative !important;
}
/* Delicada línea divisoria vertical (solo escritorio) */
#what-i-do .pillars > .pillar:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 15% !important;
    height: 70% !important;
    width: 1px !important;
    background: rgba(255, 255, 255, 0.12) !important;
}
/* El micro-concepto superior (selector real: .p-num — la instrucción literal
   usaba .service-meta, que no existe en este proyecto) */
#what-i-do .pillars .p-num {
    color: #c4b09c !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 16px !important;
    display: block !important;
}
/* Títulos de pilares (alineación izquierda impecable) */
#what-i-do .pillar h3 {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.55rem !important; /* Restaurado a tamaño expandido */
    color: #ffffff !important;
    line-height: 1.25 !important;
    margin-bottom: 20px !important;
    font-weight: 500 !important; /* Restaurado a Medium */
    text-wrap: balance !important;
}
/* Párrafos: naturales, limpios y perfectamente legibles — se acabó la justificación
   con ríos de espacio; alineación izquierda con espaciado estándar de palabras */
#what-i-do .pillar p {
    font-size: 1.05rem !important; /* Restaurado a tamaño expandido */
    line-height: 1.75 !important;
    color: rgba(255, 255, 255, 0.7) !important; /* Tono tinta mate */
    margin-bottom: 35px !important;
    max-width: 380px !important; /* Columna estrecha súper estética */
    text-align: left !important; /* Alineación izquierda para espaciado natural de palabras */
    text-wrap: pretty !important;
    letter-spacing: normal !important; /* Restauramos espaciado estándar */
    word-spacing: normal !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400 !important; /* Restaurado a peso explícito 400 */
}
/* Control de saltos de línea solo para escritorio (ahora solo se usa en los títulos) */
.desktop-only {
    display: inline !important;
}
@media (max-width: 991px) {
    .desktop-only {
        display: none !important; /* En móviles el texto fluye natural */
    }
}
/* Enlaces inferiores: alineación horizontal perfecta mediante margin-top:auto,
   ahora reforzada por align-items:stretch en la grilla */
#what-i-do a.pillar-link {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    margin-top: auto !important; /* Empuja el enlace al final exacto de la tarjeta */
    border-bottom: 1px solid #c4b09c !important;
    padding-bottom: 2px !important;
    display: inline-block !important;
    align-self: flex-start !important;
    transition: opacity 0.3s ease !important;
}
#what-i-do a.pillar-link:hover {
    opacity: 0.8 !important;
}

/* COMPORTAMIENTO MÓVIL */
@media (max-width: 991px) {
    #what-i-do {
        min-height: auto !important;
        padding: 80px 0 !important;
    }
    #what-i-do .pillars {
        grid-template-columns: 1fr !important;
        width: 85% !important;
        gap: 50px !important;
    }
    #what-i-do .pillars > .pillar {
        padding: 0 !important;
    }
    #what-i-do .pillars > .pillar:not(:last-child)::after {
        display: none !important;
    }
}

/* ============================================================
   CTA SECTION — SECCIÓN DE CONVERSIÓN DE ALTA GAMA
   ============================================================ */
.cta-section {
    position: relative !important;
    background-image: url('images/bg-texture.jpg') !important;
    background-attachment: fixed !important;
    background-position: left center !important;
    background-size: 160% auto !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    padding: 100px 0 !important; /* Equilibrio vertical */
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Velo de transición calibrado a 0.68 */
.cta-section::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(28, 31, 32, 0.68) !important;
    z-index: 1 !important;
    display: block !important;
}

.cta-section .wrap,
.cta-section .script-label,
.cta-section .cta-title,
.cta-section .cta-actions-single {
    position: relative !important;
    z-index: 2 !important;
}

.cta-section .wrap {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 6vw !important;
    box-sizing: border-box !important;
}

/* SUBTÍTULO: Sincronizado milimétricamente con The Ecosystem */
.cta-section .script-label {
    color: #c4b09c !important;
    display: block !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important; /* Distancia aérea premium */
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-weight: 600 !important; /* Restaurado a Semi-Bold */
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 1.3rem !important;
}

/* TÍTULO PRINCIPAL: Expandido horizontalmente y con tipografía de sección */
.cta-title {
    color: #ffffff !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(1.6rem, 2.5vw, 2.6rem) !important;
    line-height: 1.3 !important; /* Ajustado para el salto de línea manual tras el signo de interrogación */
    max-width: 950px !important; /* Suficiente para evitar saltos involuntarios en escritorio */
    margin: 0 auto 30px auto !important;
    text-align: center !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    hyphens: none !important;
}

.cta-actions-single {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

.cta-btn-premium {
    display: inline-block !important;
    background: transparent !important;
    color: var(--linen) !important;
    border: 1px solid rgba(247, 248, 247, 0.25) !important;
    padding: 14px 40px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cta-btn-premium:hover {
    background: var(--linen) !important;
    color: var(--graphite) !important;
    border-color: var(--linen) !important;
}

@media (max-width: 920px) {
    .cta-section {
        background-image: url('images/bg-texture-mobile.jpg') !important;
        background-size: cover !important;
        background-attachment: scroll !important;
        background-position: center !important;
        padding: 80px 0 !important;
    }
    .cta-title {
        padding: 0 10px !important;
        font-size: 2rem !important;
    }
    .cta-btn-premium {
        width: 85% !important;
        text-align: center !important;
        padding: 14px 20px !important;
    }
}

/* ============================================================
   NEWSLETTER — The Global Concept
   ============================================================ */
.newsletter {
  background: #1e2123;
  padding: 80px 0;
  text-align: center;
}
.nl-eyebrow {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sandstone);
  display: block;
  margin-bottom: 10px;
}
.newsletter h2 { color: var(--linen); font-size: clamp(22px, 3vw, 34px); max-width: 640px; margin: 0 auto 12px; }
.newsletter .nl-sub { font-family: 'Roboto', sans-serif; color: rgba(217,200,169,.75); font-size: 15.5px; max-width: 520px; margin: 0 auto 32px; }
.nl-form { display: flex; max-width: 460px; margin: 0 auto; flex-wrap: wrap; gap: 0; }
.nl-form input[type="email"] {
  flex: 1;
  min-width: 200px;
  padding: 14px 18px;
  background: rgba(247,248,247,.06);
  border: 1px solid rgba(247,248,247,.18);
  border-right: none;
  color: var(--linen);
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}
.nl-form input[type="email"]::placeholder { color: rgba(247,248,247,.35); }
.nl-form button {
  padding: 14px 24px;
  background: var(--sandstone);
  color: var(--graphite);
  border: none;
  font-family: 'Roboto', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .18s;
  white-space: nowrap;
}
.nl-form button:hover { background: var(--taupe); }
.nl-note { font-family: 'Roboto', sans-serif; font-size: 11px; color: rgba(163,148,125,.6); margin-top: 14px; letter-spacing: .03em; }
@media (max-width: 520px) {
  .nl-form { flex-direction: column; }
  .nl-form input[type="email"] { border-right: 1px solid rgba(247,248,247,.18); border-bottom: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: #17191a; color: var(--pebble); padding: 64px 0 28px; }
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(247,248,247,.1);
}
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: var(--linen);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.foot-tagline { font-family: 'Roboto', sans-serif; font-size: 13px; color: var(--sandstone); line-height: 1.7; max-width: 260px; }
.foot-grid h5 {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--linen);
  margin: 0 0 16px;
}
.foot-grid a {
  display: block;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  color: var(--pebble);
  font-size: 13.5px;
  margin-bottom: 9px;
  transition: color .15s;
}
.foot-grid a:hover { color: var(--linen); }
.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: #5a5a5a;
  flex-wrap: wrap;
  gap: 12px;
}
.foot-socials { display: flex; gap: 16px; }
.foot-socials a { font-family: 'Roboto', sans-serif; color: #666; text-decoration: none; font-size: 12.5px; }
.foot-socials a:hover { color: var(--pebble); }

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: flex-start;
}
@media (max-width: 800px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-side h3 {
  font-size: 21px;
  color: var(--linen);
  margin: 0 0 14px;
}
.contact-side p { font-size: 15.5px; color: rgba(217,200,169,.78); margin: 0 0 22px; line-height: 1.75; }
.contact-side a { color: var(--sandstone); font-weight: 500; text-decoration: none; }
.contact-side a:hover { color: var(--linen); }
.form-wrap {
  border: 1px solid rgba(247,248,247,.12);
  background: rgba(247,248,247,.04);
  padding: 40px;
}
@media (max-width: 480px) { .form-wrap { padding: 24px 18px; } }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.form-wrap label {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pebble);
  margin-bottom: 7px;
}
.form-wrap input,
.form-wrap select,
.form-wrap textarea {
  width: 100%;
  background: rgba(247,248,247,.06);
  border: 1px solid rgba(247,248,247,.18);
  padding: 12px 14px;
  font-family: 'Roboto', sans-serif;
  font-size: 14.5px;
  color: var(--linen);
  border-radius: 0;
  transition: border-color .15s;
}
.form-wrap input:focus,
.form-wrap select:focus,
.form-wrap textarea:focus {
  outline: none;
  border-color: var(--sandstone);
}
.form-wrap select option { background: var(--graphite); }
.form-wrap textarea { min-height: 130px; resize: vertical; }
.form-submit {
  width: 100%;
  padding: 15px;
  background: var(--linen);
  color: var(--graphite);
  border: none;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .18s;
  margin-top: 4px;
}
.form-submit:hover { background: var(--taupe); }
.badge { display: inline-block; font-size: 11.5px; font-weight: 500; color: var(--linen); background: rgba(247,248,247,.08); border: 1px solid rgba(247,248,247,.16); padding: 5px 12px; margin-bottom: 18px; letter-spacing: .05em; }

/* CABECERA ESTÁTICA PREMIUM — TEXTURA DE PIEDRA FIJA EN ESCRITORIO */
.static-header {
    position: relative !important; /* Empuja el documento, no flota sobre el rostro */
    background-image: linear-gradient(to bottom, rgba(26, 29, 30, 0.78) 0%, rgba(26, 29, 30, 0.78) 100%), url('images/bg-texture.jpg') !important;
    background-attachment: fixed !important;
    background-position: left center !important;
    background-size: 160% auto !important;
    background-repeat: no-repeat !important;
    padding: 15px 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-sizing: border-box !important;
    z-index: 100 !important;
}
/* ADAPTACIÓN RESPONSIVA DEL HEADER (Evita deformaciones y tono lodo) */
@media (max-width: 920px) {
    .static-header {
        background-image: linear-gradient(to bottom, rgba(26, 29, 30, 0.78) 0%, rgba(26, 29, 30, 0.78) 100%), url('images/bg-texture-mobile.jpg') !important;
        background-attachment: scroll !important; /* Desactiva fixed en móviles para evitar saltos */
        background-size: cover !important; /* Ajuste nítido y perfecto al contenedor */
        background-position: center !important;
    }
}

/* PUENTE TEXTUAL AL ECOSISTEMA EN EL CTA */
.cta-bridge {
    color: rgba(247, 248, 247, 0.7) !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.7 !important;
    max-width: 640px !important;
    margin: 0 auto 30px auto !important;
    text-align: center !important;
}


/* ============================================================
   INTERIOR PAGES — INFINITE STONE CANVAS
   Aplica a páginas internas vía body.infinite-bg-page. Proyecta
   bg-texture.jpg fijo y continuo detrás de header, hero y secciones,
   igual que el muro Trusted By / About Me del home.
   ============================================================ */
/* Body ya no carga la piedra global — cada sección de la página maneja
   su propio fondo real (hero luminoso, bloque claro, grilla oscura),
   así que el body solo aporta el color base entre bloques. */
body.infinite-bg-page {
    background: var(--linen) !important;
    color: var(--graphite) !important;
}

/* PRIMERA PARTE (HERO) — VELO EN OPACIDAD 0.64 Y MAYOR ALTURA VERTICAL */
.infinite-bg-page .page-hero {
    position: relative !important;
    background-image: linear-gradient(to bottom, rgba(26, 29, 30, 0.64) 0%, rgba(26, 29, 30, 0.64) 100%), url('images/bg-texture.jpg') !important;
    background-attachment: fixed !important;
    background-position: left center !important;
    background-size: 160% auto !important;
    background-repeat: no-repeat !important;
    padding: 200px 0 120px !important; /* Mayor altura superior e inferior */
    color: var(--linen) !important;
}
.infinite-bg-page .page-hero::before { display: none !important; }
@media (max-width: 920px) {
    .infinite-bg-page .page-hero {
        background-image: linear-gradient(to bottom, rgba(26, 29, 30, 0.42) 0%, rgba(26, 29, 30, 0.42) 100%), url('images/bg-texture-mobile.jpg') !important;
        background-attachment: scroll !important;
        background-size: cover !important;
    }
}
/* Texto del hero — cursiva eliminada por completo; tono arena dorada
   para romper el blanco plano compartido con el H1 */
.infinite-bg-page .page-hero .page-lede {
    font-family: 'Roboto', sans-serif !important;
    font-style: normal !important;
    color: #c4b09c !important;
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    max-width: 680px !important;
    margin: 20px auto 0 auto !important;
    line-height: 1.6 !important;
}

/* SEGUNDA PARTE — bloque introductorio integrado al mismo lienzo oscuro
   de .services-dark-wrap (ya no es una sección propia; sin franja/velo
   intermedio, comparte fondo con "What it includes") */
/* BLOQUE INTRODUCTORIO (WHO THIS IS FOR) */
/* AJUSTE DE CONTENEDOR INTRO */
.services-dark-wrap .intro-lead-block {
    text-align: center !important;
    padding: 45px 0 40px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 40px !important;
}
/* 1. CLASE ÚNICA Y COMPARTIDA PARA ETIQUETAS EN ITÁLICA (WHO THIS IS FOR Y WHAT IT INCLUDES) */
.section-label-italic {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-style: italic !important;
    font-size: 1.3rem !important;
    color: #c4b09c !important; /* Taupe / Dorado */
    font-weight: 600 !important; /* SemiBold con firmeza visual idéntica a la Home */
    display: block !important;
    margin-bottom: 18px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    opacity: 1 !important; /* Elimina cualquier deslavado o transparencia */
    text-align: center !important;
}
/* KICKER DEL HERO (SANS-SERIF MAYÚSCULAS - BRAND ARCHITECTURE) */
.page-hero .eyebrow.light {
    font-family: 'Roboto', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-style: normal !important;
    display: block !important;
    margin-bottom: 14px !important;
    text-align: center !important;
}
/* PÁRRAFO DEL HERO (COLOR TAUPE #c4b09c CÁLIDO - NO BLANCO) */
.hero-lede-wide {
    font-family: 'Roboto', sans-serif !important;
    font-size: 1.15rem !important;
    line-height: 1.65 !important;
    font-weight: 300 !important;
    color: #c4b09c !important; /* Dorado Taupe / Sandstone cálido, idéntico a Brand Architecture */
    max-width: 860px !important; /* Ancho para fluir naturalmente en 2 líneas en escritorio */
    margin: 20px auto 0 auto !important;
    text-align: center !important;
}
/* 2. RESTAURACIÓN DE TAMAÑO ELEGANTE PARA PÁRRAFOS DESTACADOS */
.lead-text-dark {
    font-family: 'Roboto', sans-serif !important;
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
    font-weight: 300 !important;
    color: rgba(247, 248, 247, 0.90) !important;
    max-width: 1150px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Contenedor de servicios — ahora lleva su propia piedra fija (antes
   heredaba la del body); mismo encuadre que #what-i-do / .cta-section,
   así que la grilla oscura queda idéntica pese al cambio de fondo global */
/* VELO MÁS CLARO Y LUMINOSO SOBRE LA PIEDRA */
.services-dark-wrap {
    position: relative !important;
    background-image: linear-gradient(rgba(36, 40, 42, 0.38), rgba(36, 40, 42, 0.38)), url('images/bg-texture.jpg') !important;
    background-attachment: fixed !important;
    background-position: left center !important;
    background-size: 160% auto !important;
    background-repeat: no-repeat !important;
    padding: 60px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.services-dark-wrap .wrap {
    max-width: 1550px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}
@media (max-width: 920px) {
    .services-dark-wrap {
        background-image: linear-gradient(rgba(36, 40, 42, 0.38), rgba(36, 40, 42, 0.38)), url('images/bg-texture-mobile.jpg') !important;
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center !important;
    }
}

/* CONTRASTE Y COMPACTACIÓN DE TÍTULO PRINCIPAL — "What it includes" en 1 línea */
.services-dark-wrap .section-head.on-dark h2 {
    color: var(--linen, #f7f8f7) !important;
    font-size: 2.6rem !important; /* igualado al h2 de servicios de Home (antes 2rem) */
    font-weight: 500 !important; /* igualado al h2 de servicios de Home (antes 400) */
    max-width: 100% !important;
    margin: 0 auto 30px auto !important;
}
@media (max-width: 991px) {
    .services-dark-wrap .section-head.on-dark h2 {
        font-size: 2rem !important; /* mismo fallback mobile que usa #what-i-do h2 en Home */
    }
}

/* Rediseño de tarjeta — quiet-luxury, cristal traslúcido sobre la piedra
   de .services-dark-wrap; grid ultra compacta a 3 columnas para caber
   en una sola pantalla de escritorio sin scroll */
.infinite-bg-page .service-grid {
    background: rgba(255, 255, 255, 0.05) !important;
    gap: 1px !important;
}
.services-dark-wrap .service-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}
.services-dark-wrap .service-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 22px 24px !important;
    border-radius: 0px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
}
.services-dark-wrap .service-card:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(196, 176, 156, 0.35) !important;
}
/* TÍTULO DE TARJETA ESTRICTAMENTE EN 1 LÍNEA */
.services-dark-wrap .service-card h3 {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: #ffffff !important;
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    margin-bottom: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* PÁRRAFO DE TARJETA EN 2 LÍNEAS COMPACTAS */
.services-dark-wrap .service-card p {
    color: rgba(247, 248, 247, 0.78) !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400 !important;
    margin: 0 !important;
    text-wrap: pretty !important;
}
.services-dark-wrap .service-card .eyebrow {
    font-family: 'Roboto', sans-serif !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--taupe, #c4b09c) !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* ============================================================
   RESPONSIVO — WHAT IT INCLUDES (BRAND ARCHITECTURE / SERVICES)
   ============================================================ */
@media (max-width: 1024px) {
    .services-dark-wrap .wrap {
        padding: 0 30px !important;
    }
    .services-dark-wrap .service-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}
@media (max-width: 768px) {
    .services-dark-wrap .wrap {
        padding: 0 20px !important;
    }
    .services-dark-wrap .service-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    /* Permitir que los títulos fluyan naturalmente en móvil */
    .services-dark-wrap .service-card h3 {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* ============================================================
   REGLA MAESTRA DE GRILLA DE 4 FASES (PRODUCT DEVELOPMENT)
   Reutiliza el componente .service-card (mismo cristal traslúcido
   ya usado en el resto del sitio) — solo se sobreescribe el layout
   de grilla y la tipografía interna, para obedecer estrictamente
   la Matriz Maestra de Tipografía definida en Home
   (#what-i-do .pillar h3 / .pillar p / .p-num). No se toca la
   regla genérica .service-card para no afectar otras páginas.
   ============================================================ */
.services-dark-wrap .service-grid.phases-four-col {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    align-items: stretch !important; /* las 4 tarjetas siempre a la misma altura */
}
@media (max-width: 1024px) {
    .services-dark-wrap .service-grid.phases-four-col {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    .services-dark-wrap .service-grid.phases-four-col {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   TARJETA DE FASE — SISTEMA PROPIO Y AUTÓNOMO (.process-card)
   Desacoplado por completo de .service-card / .eyebrow genéricos
   para garantizar simetría absoluta entre las 4 tarjetas: mismo
   fondo de cristal, mismo padding, y el título reserva siempre el
   mismo alto (2 líneas), quepa en 1 o pase a 2 según el ancho real.
   ============================================================ */
.services-dark-wrap .phases-four-col .process-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 24px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.3s ease !important;
}
.services-dark-wrap .phases-four-col .process-card:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(196, 176, 156, 0.35) !important;
}
.services-dark-wrap .phases-four-col .process-number {
    font-family: 'Roboto', sans-serif !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    color: #c4b09c !important;
    font-weight: 400 !important;
    margin-bottom: 16px !important;
    display: block !important;
}
/* Título: cabe en 1 línea en escritorio (4 columnas); si el ancho se
   reduce, pasa a 2 líneas de forma idéntica en las 4 tarjetas gracias
   al min-height reservado — así ninguna queda "más alta" que las demás */
.services-dark-wrap .phases-four-col .process-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1.3rem !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    margin: 0 0 14px 0 !important;
    min-height: 2.6em !important; /* reserva el espacio de 2 líneas siempre */
    white-space: normal !important;
    overflow: visible !important;
    text-wrap: balance !important;
}
.services-dark-wrap .phases-four-col .process-desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 400 !important;
    margin: 0 !important;
    text-wrap: pretty !important;
}

/* ============================================================
   PROOF & EXECUTION — BALANCED EDITORIAL DUAL SECTION
   ============================================================ */
.proof-execution-section {
    position: relative !important;
    background-image: linear-gradient(90deg, rgba(26, 29, 30, 0.52) 0%, rgba(26, 29, 30, 0.32) 100%), url('images/bg-texture.jpg') !important;
    background-attachment: fixed !important;
    background-position: left center !important;
    background-size: 160% auto !important;
    background-repeat: no-repeat !important;
    padding: 65px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* CONTENEDOR AMPLIO PARA PERMITIR PÁRRAFOS DE 2 LÍNEAS */
.proof-exec-container {
    max-width: 1480px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    box-sizing: border-box !important;
}
/* PADDING COMPACTADO PARA DAR MÁS ANCHO ÚTIL DE TEXTO */
.proof-exec-col {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 30px !important; /* Más ancho para el texto */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}
.proof-col {
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
}
/* VARIANTE DE UNA SOLA COLUMNA (solo "Executed through") — el tamaño y
   fondo de .proof-execution-section no cambian, solo se centra el
   contenido restante dentro del mismo contenedor. */
.proof-exec-container.proof-exec-single {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
}
.proof-exec-container.proof-exec-single .proof-exec-col {
    border-right: none !important;
    max-width: 620px !important;
}
.brand-logo-link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 12px 0 20px 0 !important;
    text-decoration: none !important;
    transition: transform 0.4s ease !important;
}
.brand-logo-link:hover {
    transform: scale(1.03) !important;
}
.proof-exec-logo {
    height: auto !important;
    max-height: 125px !important;
    width: auto !important;
    max-width: 250px !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.92 !important;
    transition: opacity 0.3s ease, filter 0.3s ease !important;
}
.brand-logo-link:hover .proof-exec-logo {
    opacity: 1 !important;
    filter: brightness(0) invert(1) drop-shadow(0 6px 14px rgba(255, 255, 255, 0.2)) !important;
}
.proof-exec-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: #ffffff !important;
    font-size: clamp(1.15rem, 1.5vw, 1.35rem) !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
    margin-bottom: 10px !important;
    max-width: 600px !important;
    white-space: normal !important;
}
/* DESCRIPCIÓN AMPLIADA PARA FLUIR EN EXACTAMENTE 2 LÍNEAS */
.proof-exec-desc {
    color: rgba(247, 248, 247, 0.75) !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 0.90rem !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    margin: 0 !important;
    max-width: 580px !important; /* Espacio ideal para eliminar la palabra sola */
}
/* RESPONSIVO */
@media (max-width: 1024px) {
    .proof-exec-col {
        padding: 0 20px !important;
    }
    .proof-exec-desc {
        max-width: 100% !important;
    }
}
@media (max-width: 900px) {
    .proof-execution-section {
        background-image: linear-gradient(180deg, rgba(26, 29, 30, 0.52) 0%, rgba(26, 29, 30, 0.32) 100%), url('images/bg-texture-mobile.jpg') !important;
        background-attachment: scroll !important;
        background-size: cover !important;
        padding: 50px 0 !important;
    }
    .proof-exec-container {
        grid-template-columns: 1fr !important;
        padding: 0 20px !important;
    }
    .proof-exec-col {
        padding: 24px 0 !important;
    }
    .proof-col {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    }
    .proof-exec-logo {
        max-height: 100px !important;
    }
}

/* ============================================================
   NEXT STEP SECTION — EXPLICIT LINE BREAK
   ============================================================ */
/* .next-step-section / .next-step-container no existían en el markup —
   se agregó la clase next-step-section al <section> de esta instancia
   puntual para no alterar el .cta-section .wrap compartido con otras
   páginas (brand-architecture.html, executive-presence.html, etc.).
   El verdadero cuello de botella era el max-width del propio título. */
.next-step-section .wrap {
    max-width: 1200px !important; /* Caja con espacio horizontal amplio */
    padding: 80px 40px !important;
}
.next-step-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: #ffffff !important;
    font-size: clamp(1.6rem, 2.2vw, 2.2rem) !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    text-align: center !important;
    max-width: 1100px !important; /* Espacio suficiente para que la pregunta fluya entera en 1 línea */
    width: 100% !important;
    margin: 0 auto 24px auto !important;
}
/* RESPONSIVO: En pantallas pequeñas deja fluir el texto libremente */
@media (max-width: 768px) {
    .next-step-section .wrap {
        padding: 50px 20px !important;
    }
    .next-step-title br {
        display: none !important; /* Desactiva el <br> forzado en móvil para no apretar el texto */
    }
    .next-step-title {
        font-size: 1.45rem !important;
    }
}
/* ============================================================
   EXECUTIVE PRESENCE — LINE DIVIDED EDITORIAL GRID
   ============================================================ */
.services-dark-wrap .line-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 1550px !important;
    margin: 0 auto !important;
    background: transparent !important;
}
.services-dark-wrap .line-grid-3 .line-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 20px 45px !important; /* Espacio interno elegante */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    position: relative !important;
    box-sizing: border-box !important;
}
/* Línea divisoria vertical sutil entre columnas */
.services-dark-wrap .line-grid-3 .line-card:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 10% !important;
    height: 80% !important;
    width: 1px !important;
    background: rgba(255, 255, 255, 0.12) !important;
}
.services-dark-wrap .line-grid-3 .line-card .eyebrow {
    font-family: 'Roboto', sans-serif !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #c4b09c !important;
    font-weight: 500 !important;
    margin-bottom: 16px !important;
    display: block !important;
}
.services-dark-wrap .line-grid-3 .line-card h3 {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: #ffffff !important;
    font-size: 1.45rem !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
    margin-bottom: 14px !important;
    text-wrap: balance !important;
}
.services-dark-wrap .line-grid-3 .line-card p {
    font-family: 'Roboto', sans-serif !important;
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 400 !important;
    margin: 0 !important;
    text-wrap: pretty !important;
}
/* Adaptación móvil */
@media (max-width: 991px) {
    .services-dark-wrap .line-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    .services-dark-wrap .line-grid-3 .line-card {
        padding: 0 !important;
    }
    .services-dark-wrap .line-grid-3 .line-card:not(:last-child)::after {
        display: none !important;
    }
}

/* ============================================================
   EXECUTIVE PRESENCE — HARD OVERRIDE (WHITE TEXT + WIDE CONTAINER)
   Bloque consolidado — reemplaza todas las reglas previas de
   exec-presence-wrap para que exista una sola fuente de verdad.
   ============================================================ */
.services-dark-wrap.exec-presence-wrap {
    position: relative !important;
    background-image: linear-gradient(rgba(41, 46, 48, 0.38), rgba(41, 46, 48, 0.38)), url('images/bg-texture.jpg') !important;
    background-attachment: fixed !important;
    background-position: left center !important;
    background-size: 160% auto !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    padding: 90px 0 !important;
}
/* Capa superior con velo adicional 0.12 + blur(2px) */
.services-dark-wrap.exec-presence-wrap::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(41, 46, 48, 0.12) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}
.services-dark-wrap.exec-presence-wrap .wrap {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1550px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

/* CABECERAS — usa la misma estructura .section-head.on-dark que
   brand-architecture.html. La base .section-head trae max-width:700px
   en el contenedor (pensado para bloques de un párrafo corto) — se
   amplía aquí solo para exec-presence-wrap, sin tocar la regla genérica
   que usan brand-architecture.html y otras páginas. */
.services-dark-wrap.exec-presence-wrap .section-head.on-dark {
    max-width: 1350px !important;
    width: 100% !important;
    margin: 0 auto 30px auto !important;
    text-align: center !important;
}
.services-dark-wrap.exec-presence-wrap .section-head.on-dark .section-label-italic {
    display: block !important;
    text-align: center !important;
}

/* FORZADO ABSOLUTO DE BLANCO PURO + ANCHO PARA 1 SOLA LINEA
   (idéntico en valores a .services-dark-wrap .section-head.on-dark h2 de
   brand-architecture.html — 2.6rem/500/blanco — solo que aquí el
   max-width sube a 1350px porque este título es más largo) */
.services-dark-wrap.exec-presence-wrap .section-head.on-dark h2 {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: #ffffff !important;
    font-size: 2.6rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    max-width: 1350px !important; /* AMPLIADO PARA QUE "AUTHORITY" NO SE BAJE */
    width: 100% !important;
    margin: 0 auto 40px auto !important;
    text-align: center !important;
    opacity: 1 !important;
    background: none !important;
}
@media (max-width: 991px) {
    .services-dark-wrap.exec-presence-wrap .section-head.on-dark {
        max-width: 100% !important;
        padding: 0 20px !important;
    }
    .services-dark-wrap.exec-presence-wrap .section-head.on-dark h2 {
        font-size: 2rem !important;
        max-width: 100% !important;
    }
}

/* GRILLA DE TARJETAS DE CRISTAL — escopada a esta pagina, no toca
   .services-dark-wrap .service-card generica usada en otras paginas */
.services-dark-wrap.exec-presence-wrap .service-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
}
.services-dark-wrap.exec-presence-wrap .service-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 32px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    box-sizing: border-box !important;
    transition: background 0.3s ease, border-color 0.3s ease !important;
}
.services-dark-wrap.exec-presence-wrap .service-card:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(196, 176, 156, 0.35) !important;
}
.services-dark-wrap.exec-presence-wrap .service-card .eyebrow {
    font-family: 'Roboto', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #c4b09c !important;
    margin-bottom: 14px !important;
    display: block !important;
}
.services-dark-wrap.exec-presence-wrap .service-card h3 {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: #ffffff !important;
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
    white-space: normal !important;
}
.services-dark-wrap.exec-presence-wrap .service-card p {
    font-family: 'Roboto', sans-serif !important;
    color: rgba(255, 255, 255, 0.80) !important;
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

/* AJUSTE RESPONSIVO EN PANTALLAS PEQUENAS */
@media (max-width: 991px) {
    .services-dark-wrap.exec-presence-wrap .service-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .services-dark-wrap.exec-presence-wrap .service-card {
        padding: 24px 20px !important;
    }
}
@media (max-width: 920px) {
    .services-dark-wrap.exec-presence-wrap {
        background-image: linear-gradient(rgba(41, 46, 48, 0.38), rgba(41, 46, 48, 0.38)), url('images/bg-texture-mobile.jpg') !important;
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center !important;
    }
}