@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;
  right: -14px;
  left: auto;
  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: 64px;
}

/* Right nav group (language switcher + hamburger) — separated from the
   page-links group with extra spacing (see .main-nav gap above) plus a
   subtle vertical divider, so "EN | ES" reads as a distinct language
   control and not as another item of the "What I Do" menu. */
.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-left: 24px;
  border-left: 1px solid rgba(247,248,247,.15);
}
@media (max-width: 900px) {
  /* On mobile the page links are hidden, so nav-right is the only
     visible child of .main-nav — drop the divider so it doesn't float
     with nothing to its left. */
  .nav-right {
    padding-left: 0;
    border-left: none;
  }
}

/* ---- 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: 210;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--linen);
  border-radius: 1px;
  transition: transform .25s, opacity .2s;
}

/* Mobile nav panel */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(41,46,48,.98);
  padding: 86px 6vw 40px;
  flex-direction: column;
  overflow-y: auto;
}
.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; }
#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); }

@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: 78% center !important;
    min-height: 82vh !important;
  }
  .hero::before {
    background:
      linear-gradient(180deg,
        rgba(24,27,28,.35) 0%,
        rgba(24,27,28,.55) 45%,
        rgba(24,27,28,.9) 100%),
      linear-gradient(90deg,
        rgba(24,27,28,.85) 0%,
        rgba(24,27,28,.45) 60%,
        rgba(24,27,28,.15) 100%) !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;
    }
}

/* ============================================================
   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.35rem !important;
    line-height: 1.25 !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: 1rem !important;
    line-height: 1.55 !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.75rem !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.45rem !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;
}
/* En la grilla de 4 columnas (escritorio ancho), el título más largo
   ("Development & Production") se partía en 2 líneas mientras los
   otros tres quedaban en 1, rompiendo la alineación visual. Se reduce
   el tamaño solo en este layout específico para que las 4 fases
   queden siempre en una sola línea; en 2 o 1 columna (donde cada
   tarjeta es más ancha) se conserva el tamaño grande de arriba. */
@media (min-width: 1025px) {
    .services-dark-wrap .phases-four-col .process-title {
        font-size: 1.22rem !important;
    }
}
.services-dark-wrap .phases-four-col .process-desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !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.3rem, 1.8vw, 1.6rem) !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: 1.03rem !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;
    }
}

/* SEPARACION ENTRE BLOQUES — el segundo section-head.on-dark (el que
   sigue justo a la primera grilla de tarjetas, ej. "Leadership
   Communication") necesita aire respecto a las tarjetas de arriba.
   El !important del margin-top:0 general anulaba el margin-top:90px
   inline del HTML, así que se restaura aquí con un selector más
   específico (adyacente a .service-grid) sin tocar el primer
   section-head ni ninguna otra página que use .section-head.on-dark. */
.services-dark-wrap.exec-presence-wrap .service-grid + .section-head.on-dark {
    margin-top: 90px !important;
}
@media (max-width: 991px) {
    .services-dark-wrap.exec-presence-wrap .service-grid + .section-head.on-dark {
        margin-top: 60px !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.5rem !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: 1.05rem !important;
    line-height: 1.6 !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;
    }
}

/* ============================================================
   AJUSTES DE UNA SOLA LÍNEA (agosto 2026)
   Brand Architecture H1 · Product Development "Ejecutado a través de" ·
   Executive Presence lede del hero.
   Clases scopeadas con selector propio para no afectar otras páginas
   que comparten .page-hero h1 / .proof-exec-title / .hero-lede-wide.
   ============================================================ */
.page-hero h1.ba-hero-oneline {
    max-width: 1450px !important;
}

.proof-exec-container.pd-proof-oneline .proof-exec-col {
    max-width: 900px !important;
}
.proof-exec-container.pd-proof-oneline .proof-exec-title {
    max-width: 900px !important;
}

.hero-lede-wide.ep-lede-oneline {
    max-width: 1150px !important;
}

/* Executive Presence: caja del hero más ancha para que el H1 y el lede
   fluyan en menos líneas (sin afectar otras páginas que comparten .wrap /
   .page-hero h1, gracias a las clases scopeadas .ep-hero-wrap / .ep-hero-oneline). */
.page-hero .wrap.ep-hero-wrap {
    max-width: 1400px !important;
}

.page-hero h1.ep-hero-oneline {
    max-width: 1300px !important;
}