/* ==========================================================================
   DURANDESIGNER STUDIO — CONTENIDO POST-HERO (dirección editorial brutalista)
   --------------------------------------------------------------------------
   Todo vive bajo .nd-site y usa variables propias con prefijo --nd-.
   No se declara NADA en :root ni se toca ninguna clase del header/hero,
   así que este archivo no puede alterar la cabecera ni la portada.
   ========================================================================== */

.nd-site {
  /* ---- Paleta: escandinavo cálido con acento mostaza ---- */
  --nd-paper: #F4F1EA;
  --nd-paper-soft: #FBF9F4;
  --nd-ink: #1B2430;
  --nd-ink-2: #10151D;
  --nd-mustard: #D9A441;
  --nd-mustard-deep: #B9812B;

  --nd-line: rgba(27, 36, 48, .18);
  --nd-line-strong: rgba(27, 36, 48, .82);
  --nd-line-invert: rgba(244, 241, 234, .24);
  --nd-muted: rgba(27, 36, 48, .60);
  --nd-muted-invert: rgba(244, 241, 234, .64);

  /* ---- Tipografía ---- */
  --nd-font-display: "Boldonse", "Archivo Black", "Arial Black", sans-serif;
  --nd-font-body: "Inter", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  /* ---- Ritmo ---- */
  --nd-gutter: clamp(20px, 4vw, 56px);
  --nd-rule: 2px;
  --nd-ease: cubic-bezier(.16, 1, .3, 1);

  position: relative;
  z-index: 1;
  background: var(--nd-paper);
  color: var(--nd-ink);
  font-family: var(--nd-font-body);
}

/* Normalización local: neutraliza los tamaños/pesos globales del sitio
   anterior sin modificarlos para el resto de la página. */
.nd-site * { box-sizing: border-box; }
.nd-site p { font-family: var(--nd-font-body); font-weight: 400; }
.nd-site img,
.nd-site video { display: block; max-width: 100%; }
.nd-site a { color: inherit; text-decoration: none; }
/* Ojo de especificidad: este reset vale (0,1,1), así que los componentes que
   deban ganarle se escriben como `.nd-site .nd-clase` (0,2,0). */
.nd-site button { background: none; border: none; cursor: pointer; }

.nd-display {
  font-family: var(--nd-font-display);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: .88;
  text-transform: uppercase;
}

.nd-container {
  width: min(100%, 1680px);
  margin: 0 auto;
  padding: 0 var(--nd-gutter);
}

/* ---------------------------------------------------------------------- */
/* Reveals y titulares scrollytelling                                     */
/* ---------------------------------------------------------------------- */
.nd-reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity .8s var(--nd-ease), transform .8s var(--nd-ease);
}
.nd-reveal.is-visible { opacity: 1; transform: none; }
.nd-reveal-delay-1.is-visible { transition-delay: .08s; }
.nd-reveal-delay-2.is-visible { transition-delay: .16s; }
.nd-reveal-delay-3.is-visible { transition-delay: .24s; }
.nd-reveal-delay-4.is-visible { transition-delay: .32s; }

/* Titulares: exactamente el mismo movimiento que HUMAN IDEA DESIGN del hero
   (desplazamiento 112% + skewY 2° + opacidad, 1.05s, mismo easing y escalonado
   de .12s por línea). En el hero corre por @keyframes al cargar; aquí por
   transición, disparada al entrar en pantalla. */
.nd-mask-title .nd-mask-line {
  display: block;
  margin-bottom: -.04em;
  padding-bottom: .08em;
  overflow: hidden;
}
.nd-mask-title .nd-mask-line > span {
  display: block;
  opacity: 0;
  transform: translate3d(0, 112%, 0) skewY(2deg);
  transform-origin: left bottom;
  transition:
    transform 1.05s cubic-bezier(.16, 1, .3, 1),
    opacity 1.05s cubic-bezier(.16, 1, .3, 1);
  will-change: transform, opacity;
}
.nd-mask-title.is-visible .nd-mask-line > span {
  opacity: 1;
  transform: translate3d(0, 0, 0) skewY(0);
}
.nd-mask-title .nd-mask-line:nth-child(1) > span { transition-delay: 0s; }
.nd-mask-title .nd-mask-line:nth-child(2) > span { transition-delay: .12s; }
.nd-mask-title .nd-mask-line:nth-child(3) > span { transition-delay: .24s; }
.nd-mask-title .nd-mask-line:nth-child(4) > span { transition-delay: .36s; }

/* ---------------------------------------------------------------------- */
/* Capítulos                                                              */
/* ---------------------------------------------------------------------- */
.nd-chapter {
  position: relative;
  padding: clamp(90px, 13vw, 160px) 0 clamp(70px, 10vw, 120px);
  border-top: var(--nd-rule) solid var(--nd-line-strong);
  background: var(--nd-paper);
  overflow: clip;
}
.nd-chapter--dark {
  background: var(--nd-ink);
  color: var(--nd-paper);
  border-top-color: var(--nd-line-invert);
}
.nd-chapter--soft { background: var(--nd-paper-soft); }
.nd-chapter--mustard {
  background: var(--nd-mustard);
  color: var(--nd-ink);
  border-top-color: rgba(27, 36, 48, .3);
}

/* Número gigante de fondo, marca de agua editorial. */
.nd-watermark {
  position: absolute;
  right: clamp(-40px, -2vw, 0px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--nd-font-display);
  font-size: clamp(9rem, 24vw, 30rem);
  line-height: .78;
  color: var(--nd-ink);
  opacity: .045;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.nd-chapter--dark .nd-watermark { color: var(--nd-paper); opacity: .07; }
.nd-chapter--mustard .nd-watermark { opacity: .09; }

.nd-chapter-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  margin-bottom: clamp(48px, 7vw, 88px);
}
.nd-chapter-num {
  font-family: var(--nd-font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.4;
  color: var(--nd-muted);
}
.nd-chapter--dark .nd-chapter-num { color: var(--nd-muted-invert); }
.nd-chapter--mustard .nd-chapter-num { color: rgba(27, 36, 48, .68); }

.nd-chapter-title {
  font-size: clamp(2.6rem, 7.4vw, 6.4rem);
  transform: translate3d(0, var(--nd-story-shift, 0px), 0);
  transition: transform .15s linear;
  will-change: transform;
}
.nd-chapter-intro {
  max-width: 46ch;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  color: var(--nd-muted);
  padding-top: clamp(6px, 1vw, 14px);
  border-top: 1px solid var(--nd-line);
}
.nd-chapter--dark .nd-chapter-intro { color: var(--nd-muted-invert); border-top-color: var(--nd-line-invert); }
.nd-chapter--mustard .nd-chapter-intro { color: rgba(27, 36, 48, .74); border-top-color: rgba(27, 36, 48, .28); }

/* ---------------------------------------------------------------------- */
/* GALERÍA MASONRY — dos columnas de ancho desigual, cada pieza en su      */
/* proporción original (sin recortes) y con mucho aire entre ellas.       */
/* El lado que "manda" alterna de sección en sección para dar ritmo.      */
/* ---------------------------------------------------------------------- */
.nd-gallery {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.14fr .86fr;
  column-gap: clamp(24px, 4.2vw, 88px);
  row-gap: clamp(36px, 6vw, 120px);
  align-items: start;
}
/* Columna estrecha a la derecha (por defecto) o a la izquierda. */
.nd-gallery--lead-right { grid-template-columns: .86fr 1.14fr; }
.nd-gallery--lead-right .nd-gallery__col--a { order: 2; }
.nd-gallery--lead-right .nd-gallery__col--b { order: 1; }

.nd-gallery__col {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 6vw, 120px);
  min-width: 0;
}
/* Desfase editorial: la columna secundaria arranca más abajo. */
.nd-gallery__col--b { padding-top: clamp(48px, 9vw, 180px); }

/* Pieza declarativa a todo lo ancho, centrada y con medida contenida para
   que domine sin aplastar al resto. */
.nd-piece--full {
  grid-column: 1 / -1;
  order: 3;
  width: min(100%, 1080px);
  margin-inline: auto;
  margin-top: clamp(12px, 2vw, 40px);
}

.nd-piece {
  position: relative;
  margin: 0;
  /* Micro-parallax de scroll, distinto por columna. */
  transform: translate3d(0, var(--nd-frame-drift, 0px), 0);
  will-change: transform;
}

/* Sin marcos, sin contornos, sin veladuras: la imagen va limpia. */
.nd-site .nd-piece,
.nd-site .nd-piece__media,
.nd-site .nd-piece img { border: 0; outline: 0; box-shadow: none; }

.nd-piece__media {
  display: block;
  position: relative;
  overflow: hidden;
  background: rgba(27, 36, 48, .05);
}
.nd-chapter--dark .nd-piece__media { background: rgba(244, 241, 234, .06); }

/* Cada imagen conserva su proporción original: el alto lo dicta el archivo.
   Los atributos width/height del HTML reservan el espacio exacto antes de
   descargar, así que la página no salta mientras carga. */
.nd-site .nd-piece img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* --- Animación de carga: telón que descubre la imagen de arriba abajo
   mientras ésta se asienta desde una escala mayor. Sólo se dispara cuando
   el archivo ya decodificó, para que nunca se revele un hueco vacío. --- */
.nd-piece__media img {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: scale(1.09);
  transition:
    clip-path 1.25s cubic-bezier(.16, 1, .3, 1) var(--nd-delay, 0s),
    transform 1.7s cubic-bezier(.16, 1, .3, 1) var(--nd-delay, 0s),
    opacity .5s ease var(--nd-delay, 0s);
}
.nd-piece.is-revealed .nd-piece__media img {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}
/* Acercamiento muy contenido al pasar el cursor. */
.nd-piece.is-revealed .nd-piece__media:hover img {
  transform: scale(1.035);
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

/* Pie de foto como línea de crédito editorial, debajo de la imagen. */
.nd-piece__caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: clamp(12px, 1.2vw, 18px);
  padding-top: 10px;
  border-top: 1px solid var(--nd-line);
  font-family: var(--nd-font-body);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nd-muted);
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity .8s ease .35s, transform .8s cubic-bezier(.16, 1, .3, 1) .35s;
}
.nd-chapter--dark .nd-piece__caption { color: var(--nd-muted-invert); border-top-color: var(--nd-line-invert); }
.nd-chapter--mustard .nd-piece__caption { color: rgba(27, 36, 48, .7); border-top-color: rgba(27, 36, 48, .3); }
.nd-piece.is-revealed .nd-piece__caption { opacity: 1; transform: none; }
.nd-piece__num { color: var(--nd-mustard-deep); }
.nd-chapter--dark .nd-piece__num { color: var(--nd-mustard); }

/* ---------------------------------------------------------------------- */
/* Masonry real — columnas de CSS puro, sin JavaScript                    */
/* ---------------------------------------------------------------------- */
/* Las piezas fluyen por columnas y se acomodan solas según su alto. Sólo
   produce el escalonado tipo Pinterest si las imágenes tienen proporciones
   distintas: aquí conviven horizontales de 1.2 con verticales de 0.48 y
   0.57, que es lo que da el ritmo. La especificidad lleva .nd-site para
   ganarle al salvavidas embebido en el <head>. */
.nd-site .nd-gallery--masonry {
  display: block;
  column-count: 2;
  column-gap: clamp(20px, 2.8vw, 52px);
}
.nd-site .nd-gallery--masonry .nd-piece {
  /* Ninguna pieza se parte entre dos columnas. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  width: 100%;
  margin: 0 0 clamp(20px, 2.8vw, 52px);
  /* El micro-parallax se desactiva aquí: una transformación dentro de un
     contenedor multicolumna puede alterar el reparto. */
  transform: none;
}

/* Se probó con tres columnas: los cuatro horizontales quedan alineados en una
   fila visible y sobra un hueco abajo, es decir, vuelve a leerse como
   cuadrícula. Con dos columnas el escalonado es real y las piezas se ven al
   doble de tamaño, que importa cuando lo que se muestra son sitios web. */
@media (max-width: 640px) {
  .nd-site .nd-gallery--masonry { column-count: 1; }
}

/* ---------------------------------------------------------------------- */
/* Marco de la ilustración animada "FocoHuman" (pendiente de pegar)       */
/* ---------------------------------------------------------------------- */
.nd-motion-frame {
  position: relative;
  z-index: 2;
  width: min(100%, 420px);
  aspect-ratio: 1 / 1;
  margin: clamp(40px, 6vw, 70px) 0;
  border: 1px dashed var(--nd-line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nd-motion-frame::before {
  content: "Ilustración FocoHuman — pendiente";
  font-family: var(--nd-font-body);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nd-muted);
  text-align: center;
  padding: 0 2em;
}
.nd-foco-stage { position: absolute; inset: 0; }
.nd-foco-stage svg { width: 100%; height: 100%; }
.nd-motion-frame:has(.nd-foco-stage svg) { border-style: none; }
.nd-motion-frame:has(.nd-foco-stage svg)::before { content: none; }

/* ---------------------------------------------------------------------- */
/* Cita editorial                                                         */
/* ---------------------------------------------------------------------- */
.nd-pull-quote {
  position: relative;
  z-index: 2;
  max-width: 22ch;
  margin: clamp(40px, 6vw, 70px) 0;
  padding-left: clamp(18px, 2.4vw, 30px);
  border-left: var(--nd-rule) solid var(--nd-mustard);
  font-family: var(--nd-font-display);
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--nd-ink);
}

/* ---------------------------------------------------------------------- */
/* Servicios — cuatro columnas, tratamiento sobrio                        */
/* ---------------------------------------------------------------------- */
/* Se abandona la lista apilada con folios y filetes por una retícula de
   cuatro columnas: un solo filete arriba, mucho aire y el nombre del
   servicio como etiqueta versalita en lugar de titular. Misma familia
   tipográfica y misma paleta, sólo baja el volumen. */
.nd-service-list {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(24px, 3.4vw, 62px);
  row-gap: clamp(40px, 5vw, 72px);
  padding-top: clamp(44px, 5.5vw, 86px);
  border-top: 1px solid var(--nd-line);
}
.nd-chapter--dark .nd-service-list { border-top-color: var(--nd-line-invert); }

.nd-service { display: block; }

.nd-service-name {
  margin: 0 0 clamp(14px, 1.5vw, 22px);
  font-family: var(--nd-font-body);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nd-ink);
}
.nd-chapter--dark .nd-service-name { color: var(--nd-paper); }

.nd-service-copy {
  margin: 0;
  font-size: clamp(.95rem, 1.05vw, 1.02rem);
  line-height: 1.62;
  color: var(--nd-muted);
  max-width: 34ch;
}
.nd-chapter--dark .nd-service-copy { color: var(--nd-muted-invert); }

/* ---------------------------------------------------------------------- */
/* Marcas creadas en el estudio                                           */
/* ---------------------------------------------------------------------- */
.nd-brand-strip {
  position: relative;
  z-index: 2;
  margin-top: clamp(56px, 8vw, 100px);
  padding-top: clamp(28px, 4vw, 44px);
  /* Aire generoso bajo el ticker para que no choque con el borde de sección. */
  padding-bottom: clamp(46px, 7vw, 96px);
  border-top: 1px solid var(--nd-line);
}
.nd-brand-strip__head { margin-bottom: clamp(26px, 3.6vw, 40px); }
.nd-brand-strip__title { font-size: clamp(1.6rem, 3.2vw, 2.6rem); }
.nd-brand-strip__note {
  margin-top: .5em;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--nd-muted);
  max-width: 46ch;
}

.nd-brand-strip__track {
  display: flex;
  align-items: center;
  gap: clamp(52px, 6vw, 88px);
  /* El overflow oculta el bucle horizontal, pero también recortaba el logo
     al crecer. Este padding le da el aire vertical que necesita el zoom. */
  padding-block: clamp(18px, 2vw, 32px);
  overflow: hidden;
}
.nd-brand-strip__inner {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(52px, 6vw, 88px);
  width: max-content;
  animation: ndTickerScroll 34s linear infinite;
}
.nd-brand-strip__track:hover .nd-brand-strip__inner { animation-play-state: paused; }
@keyframes ndTickerScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Las marcas se normalizan a un solo tono tinta con filtro, así que no hace
   falta reexportar los PNG aunque vengan en distintos colores. */
/* Sin filete bajo el logotipo: al pasar el cursor sólo se eleva y gana
   opacidad, que es un gesto más sobrio. */
.nd-brand-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Tamaño de logotipos (+15% respecto a la versión anterior, en todos los
   tamaños de pantalla porque el clamp escala los tres valores). */
.nd-brand-strip img {
  /* El mínimo del clamp manda en móvil y el máximo en escritorio, así que
     40px = +15% sobre los 35 anteriores y 59px = +12% sobre los 53. */
  height: clamp(40px, 5.15vw, 59px);
  width: auto;
  max-width: none;
  flex-shrink: 0;
  filter: brightness(0);
  opacity: .82;
  transform-origin: center center;
  transition: opacity .3s ease, transform .45s var(--nd-ease);
}
.nd-chapter--dark .nd-brand-strip img { filter: brightness(0) invert(1); }
/* El logo crece sobre su propio centro; el ticker además se detiene. */
.nd-brand-mark:hover img { opacity: 1; transform: scale(1.18); }

/* ---------------------------------------------------------------------- */
/* IA Experiment                                                          */
/* ---------------------------------------------------------------------- */
/* Composición editorial en dos columnas. La columna mayor recibe el video
   horizontal original y un tercer experimento temporal debajo; la menor
   recibe el video vertical. No hay recorte: cada MP4 conserva la proporción
   codificada en el archivo mediante width:100% + height:auto. */
.nd-ia-videos {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  column-gap: clamp(24px, 4.2vw, 88px);
  align-items: start;
}
.nd-ia-videos__col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4.2vw, 72px);
}
.nd-ia-videos__col--minor {
  padding-top: clamp(18px, 2.8vw, 56px);
}
.nd-ia-piece {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--nd-ink);
}
.nd-ia-piece video,
.nd-ia-piece img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  background: var(--nd-ink);
}
/* Las clases documentan la intención, pero deliberadamente no fuerzan
   aspect-ratio: el horizontal y el vertical respetan el formato real del MP4. */
.nd-ia-piece--horizontal,
.nd-ia-piece--vertical,
.nd-ia-piece--demo { aspect-ratio: auto; }
.nd-ia-piece figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1em;
  display: flex;
  gap: .8em;
  align-items: baseline;
  font-family: var(--nd-font-body);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nd-paper);
  background: linear-gradient(0deg, rgba(16,21,29,.85), transparent);
}
.nd-ia-piece figcaption .nd-num { color: var(--nd-mustard); font-weight: 600; }

/* ---------------------------------------------------------------------- */
/* Franja de descanso — video a todo el ancho, teñido de azul de marca     */
/* ---------------------------------------------------------------------- */
/* Corta el ritmo entre dos capítulos densos. El azul del logotipo va de
   fondo y el video se funde encima en modo luminosidad: el resultado toma
   la luz del video y el color del azul, es decir, un duotono limpio en vez
   de una imagen a color pegada sobre un fondo. */
.nd-break {
  position: relative;
  width: 100%;
  height: clamp(220px, 30vw, 420px);
  overflow: hidden;
  background: var(--nd-break-blue, #c62020);
  /* Aísla la fusión para que no afecte a nada fuera de la franja. */
  isolation: isolate;
}
.nd-break__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: .82;
}
/* Veladura: refuerza el azul en los cuatro bordes para que la franja se
   funda con los capítulos vecinos en lugar de quedar recortada. */
.nd-break::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(71,67,227,.6) 0%, rgba(71,67,227,0) 24%,
                           rgba(71,67,227,0) 76%, rgba(71,67,227,.6) 100%),
    linear-gradient(180deg, rgba(71,67,227,.5) 0%, rgba(71,67,227,0) 26%,
                            rgba(71,67,227,0) 74%, rgba(71,67,227,.5) 100%);
}

@media (max-width: 640px) {
  .nd-break { height: clamp(180px, 46vw, 260px); }
}

/* Sin movimiento: se queda el fotograma del poster, ya teñido. */
@media (prefers-reduced-motion: reduce) {
  .nd-break__media { animation: none; }
}

/* ---------------------------------------------------------------------- */
/* Contacto                                                               */
/* ---------------------------------------------------------------------- */
.nd-contact {
  position: relative;
  background: var(--nd-ink);
  color: var(--nd-paper);
  border-top: var(--nd-rule) solid var(--nd-line-invert);
  overflow: clip;
}
.nd-contact .nd-watermark { color: var(--nd-paper); opacity: .07; }
.nd-contact-grid {
  position: relative;
  z-index: 2;
  padding: clamp(80px, 12vw, 150px) 0 clamp(50px, 7vw, 80px);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(40px, 6vw, 90px);
}
/* Mismo respiro entre el número de sección y el titular que en los capítulos
   (allí lo da el `gap` de .nd-chapter-head). */
.nd-contact .nd-chapter-num {
  color: var(--nd-muted-invert);
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.nd-contact-title {
  font-size: clamp(2.8rem, 7.4vw, 6.8rem);
  max-width: 11ch;
  transform: translate3d(0, var(--nd-story-shift, 0px), 0);
  transition: transform .15s linear;
}
.nd-contact-lede {
  margin-top: clamp(18px, 2.4vw, 30px);
  max-width: 42ch;
  color: var(--nd-muted-invert);
  font-size: 1.05rem;
  line-height: 1.55;
}

.nd-field { position: relative; margin-bottom: clamp(18px, 2vw, 26px); }
.nd-field input,
.nd-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--nd-line-invert);
  border-radius: 0;
  color: var(--nd-paper);
  font-family: var(--nd-font-body);
  font-size: 1rem;
  font-weight: 400;
  padding: .8em 0;
  resize: none;
}
.nd-field input:focus,
.nd-field textarea:focus { outline: none; border-bottom-color: var(--nd-mustard); }
.nd-field label {
  position: absolute; left: 0; top: .8em;
  color: var(--nd-muted-invert);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: top .2s var(--nd-ease), font-size .2s var(--nd-ease), color .2s ease;
  pointer-events: none;
}
.nd-field input:focus + label,
.nd-field input:not(:placeholder-shown) + label,
.nd-field textarea:focus + label,
.nd-field textarea:not(:placeholder-shown) + label {
  top: -.4em;
  font-size: .64rem;
  color: var(--nd-mustard);
}
.nd-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 30px); }


/* Web3Forms / hCaptcha: integrado sin alterar la retícula del formulario. */
.nd-botcheck {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.nd-captcha {
  margin: clamp(8px, 1.5vw, 16px) 0 clamp(4px, 1vw, 10px);
  min-height: 78px;
}

.nd-form-actions {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 32px);
  flex-wrap: wrap;
  margin-top: clamp(14px, 2vw, 22px);
}
.nd-site .nd-btn-submit {
  padding: 1em 2em;
  background: var(--nd-mustard);
  color: var(--nd-ink);
  font-family: var(--nd-font-body);
  font-weight: 600;
  font-size: .78rem;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .2s ease, transform .2s var(--nd-ease);
}
.nd-site .nd-btn-submit:hover { background: var(--nd-paper); transform: translateY(-2px); }
.nd-site .nd-btn-submit[disabled] { opacity: .7; cursor: default; transform: none; }
.nd-site .nd-whatsapp-link {
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--nd-muted-invert);
  border-bottom: 1px solid var(--nd-line-invert);
  padding-bottom: 2px;
}
.nd-site .nd-whatsapp-link:hover { color: var(--nd-paper); border-color: var(--nd-paper); }

.nd-contact-meta {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 34px);
  padding-top: clamp(8px, 1vw, 14px);
  border-top: 1px solid var(--nd-line-invert);
}
.nd-contact-meta h3 {
  font-family: var(--nd-font-body);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nd-muted-invert);
  margin-bottom: .6em;
}
.nd-contact-meta p,
.nd-contact-meta a { font-size: 1rem; color: var(--nd-paper); }
.nd-contact-meta a { border-bottom: 1px solid var(--nd-line-invert); }
.nd-contact-meta a:hover { color: var(--nd-mustard); border-color: var(--nd-mustard); }

.nd-site-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--nd-line-invert);
  padding: clamp(20px, 3vw, 30px) 0 clamp(30px, 4vw, 50px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nd-muted-invert);
}
.nd-footer-social { display: flex; align-items: center; gap: 12px; }
.nd-site .nd-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--nd-line-invert);
  border-radius: 50%;
  color: var(--nd-muted-invert);
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s var(--nd-ease);
}
.nd-site .nd-footer-social a:hover {
  color: var(--nd-ink);
  border-color: var(--nd-mustard);
  background: var(--nd-mustard);
  transform: translateY(-2px);
}
.nd-footer-social svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------------- */
/* Cierre experimental — cartel + contador tipográfico                    */
/* ---------------------------------------------------------------------- */
/* Vive dentro de #contacto pero sale a sangre y cambia a fondo claro, así
   que se lee como sección independiente antes del pie. El blanco puro es
   deliberado: el cartel trae fondo blanco propio y de este modo su borde
   desaparece en lugar de recortarse contra el papel cálido. */
.nd-lab {
  position: relative;
  z-index: 2;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: clamp(56px, 7vw, 88px) var(--nd-gutter) clamp(52px, 6vw, 78px);
  background: #FFFFFF;
  color: var(--nd-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 3vw, 38px);
  text-align: center;
}

/* El cartel respira: medida contenida y mucho aire alrededor. */
.nd-lab__figure {
  margin: 0;
  width: min(100%, 400px);
}
.nd-site .nd-lab__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Contador -------------------------------------------------------- */
.nd-lab__meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.8vw, 24px);
}
.nd-lab__label {
  margin: 0;
  font-family: var(--nd-font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--nd-muted);
}
.nd-lab__count {
  margin: 0;
  padding: clamp(10px, 1.4vw, 20px) 0 0;
  border-top: 1px solid rgba(27, 36, 48, .16);
}
/* Cifras de ancho fijo: al ser tabulares, ninguna cifra empuja a la de al
   lado mientras el número corre, así que el contador no vibra. */
.nd-lab__digits {
  display: block;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--nd-ink);
}

@media (max-width: 640px) {
  .nd-lab { gap: 28px; padding-top: 52px; padding-bottom: 48px; }
  .nd-lab__figure { width: min(82vw, 400px); }
  .nd-lab__label { letter-spacing: .16em; font-size: .7rem; }
}

/* ---------------------------------------------------------------------- */
/* Indicador flotante de sección (columna de puntos, costado derecho)      */
/* ---------------------------------------------------------------------- */
.nd-rail {
  position: fixed;
  top: 50%;
  right: clamp(14px, 1.8vw, 30px);
  z-index: 60;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}
/* Sólo aparece una vez que se dejó atrás la portada. */
.nd-rail.is-visible { opacity: 1; visibility: visible; }

.nd-rail a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 10px;
  height: 10px;
}
.nd-rail a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .3;
  transition: opacity .3s ease, transform .3s var(--nd-ease);
}
.nd-rail a:hover::after { opacity: .65; }
.nd-rail a.is-active::after { opacity: 1; transform: scale(1.5); }

/* Etiqueta discreta, sólo al pasar el cursor. */
.nd-rail a span {
  position: absolute;
  right: calc(100% + 12px);
  white-space: nowrap;
  font-family: var(--nd-font-body);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s var(--nd-ease);
}
.nd-rail a:hover span { opacity: .85; transform: translateX(0); }

/* El color se adapta al fondo de la sección que se está leyendo: naranja
   sobre los fondos oscuros, tinta sobre el papel claro. */
.nd-rail[data-theme="light"] { color: var(--nd-ink); }
.nd-rail[data-theme="dark"] { color: var(--nd-mustard); }
.nd-rail[data-theme="mustard"] { color: var(--nd-ink-2); }

/* ---------------------------------------------------------------------- */
/* Responsive                                                             */
/* ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Cuatro columnas sólo tienen sentido en escritorio: aquí bajan a dos. */
  .nd-service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Se conserva la asimetría, con desfase y aire algo más contenidos. */
  .nd-gallery { grid-template-columns: 1.08fr .92fr; }
  .nd-gallery--lead-right { grid-template-columns: .92fr 1.08fr; }
  .nd-gallery__col--b { padding-top: clamp(36px, 7vw, 110px); }
}

@media (max-width: 860px) {
  /* En móvil manda la legibilidad: una sola columna, cada pieza a ancho
     completo y siempre en su proporción original. Se anula el desfase, el
     orden alterno y el parallax. */
  .nd-gallery,
  .nd-gallery--lead-right {
    grid-template-columns: 1fr;
    row-gap: clamp(28px, 8vw, 52px);
  }
  .nd-gallery__col { gap: clamp(28px, 8vw, 52px); }
  .nd-gallery__col--b { padding-top: clamp(28px, 8vw, 52px); }
  .nd-gallery--lead-right .nd-gallery__col--a,
  .nd-gallery--lead-right .nd-gallery__col--b { order: initial; }
  .nd-piece { transform: none; }
  .nd-piece--full { width: 100%; margin-top: 0; }
  .nd-rail { display: none; }
}

@media (max-width: 720px) {
  .nd-ia-videos {
    grid-template-columns: 1fr;
    row-gap: clamp(28px, 8vw, 52px);
  }
  .nd-ia-videos__col { gap: clamp(28px, 8vw, 52px); }
  .nd-ia-videos__col--minor { padding-top: 0; }
  /* En móvil se recupera el orden editorial 01 → 02 → 03. */
  .nd-ia-videos__col--major,
  .nd-ia-videos__col--minor { display: contents; }
  .nd-ia-piece--horizontal { order: 1; }
  .nd-ia-piece--vertical { order: 2; }
  .nd-ia-piece--demo { order: 3; }
}

@media (max-width: 640px) {
  /* En móvil el titular baja de tamaño pero conservaba el interlineado de .88,
     que a esa escala deja la línea más corta que la propia letra y hace que se
     encimen. A 1.1 el bloque respira y las mayúsculas no se tocan. */
  .nd-display { line-height: 1.1; }

  .nd-pull-quote { line-height: 1.3; }

  .nd-service-list { grid-template-columns: 1fr; row-gap: clamp(30px, 8vw, 46px); }
  .nd-field-row { grid-template-columns: 1fr; }
  .nd-contact-grid { grid-template-columns: 1fr; }
  .nd-contact-meta { border-top: none; padding-top: 0; }
  .nd-site-footer { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .nd-reveal { opacity: 1; transform: none; }
  .nd-mask-title .nd-mask-line > span { transform: none; }
  .nd-brand-strip__inner { animation: none; }
  .nd-chapter-title,
  .nd-contact-title { transform: none; }
}

/* ---------------------------------------------------------------------- */
/* BLINDAJE FRENTE A harmony-v17.css                                      */
/* --------------------------------------------------------------------- */
/* Esa hoja se escribió para la estructura anterior (.story) y quedó
   apuntando por ID a secciones que hoy son .nd-chapter, con !important:
   le quitaba a #branding todo el padding inferior y sustituía los filetes
   de separación entre capítulos. En el index ya viene desconectada, pero si
   alguien la reconectara, estas reglas recuperan el control por mayor
   especificidad (.nd-site #id gana a #id). */
.nd-site #branding {
  padding-top: clamp(90px, 13vw, 160px) !important;
  padding-bottom: clamp(70px, 10vw, 120px) !important;
}
.nd-site #branding + #packaging { border-top: var(--nd-rule) solid var(--nd-line-invert) !important; }
.nd-site #packaging + #digital  { border-top: var(--nd-rule) solid var(--nd-line-strong) !important; }
.nd-site #digital + #social     { border-top: var(--nd-rule) solid var(--nd-line-strong) !important; }
.nd-site #social + #ia          { border-top: var(--nd-rule) solid rgba(27, 36, 48, .3) !important; }

/* ======================================================================
   CURATED MASONRY v1 — 2026-08-08
   ----------------------------------------------------------------------
   Intervención exclusivamente post-HERO. No toca header, HERO ni menús.
   En vez de columnas CSS de ancho idéntico, cada galería se compone como
   dos columnas editoriales independientes, con jerarquía, desfase y piezas
   de ancho variable. Mantiene la proporción original de cada imagen.
   ====================================================================== */

.nd-site .nd-gallery--curated {
  --nd-gallery-major: 1.18fr;
  --nd-gallery-minor: .82fr;
  --nd-gallery-gap-x: clamp(30px, 5vw, 96px);
  --nd-gallery-gap-y: clamp(64px, 8vw, 138px);
  display: grid;
  grid-template-columns: minmax(0, var(--nd-gallery-major)) minmax(0, var(--nd-gallery-minor));
  column-gap: var(--nd-gallery-gap-x);
  align-items: start;
  width: 100%;
}

.nd-site .nd-gallery--curated.nd-gallery--lead-right {
  grid-template-columns: minmax(0, var(--nd-gallery-minor)) minmax(0, var(--nd-gallery-major));
}
.nd-site .nd-gallery--curated.nd-gallery--lead-right .nd-gallery__col--major { order: 2; }
.nd-site .nd-gallery--curated.nd-gallery--lead-right .nd-gallery__col--minor { order: 1; }

.nd-site .nd-gallery--curated .nd-gallery__col {
  display: flex;
  flex-direction: column;
  gap: var(--nd-gallery-gap-y);
  min-width: 0;
  padding-top: 0;
}

/* El desfase es deliberado: evita dos bordes superiores alineados y rompe
   la lectura de “cuadrícula”. */
.nd-site .nd-gallery--curated .nd-gallery__col--minor {
  padding-top: clamp(70px, 10vw, 190px);
}

.nd-site .nd-gallery--curated .nd-piece {
  width: 100%;
  max-width: 100%;
  margin: 0;
  align-self: flex-start;
  break-inside: auto;
  transform: translate3d(0, var(--nd-frame-drift, 0px), 0);
}

/* BRANDING — una vertical protagonista; paisaje y cuadrados como contrapunto. */
#branding .nd-gallery__col--major .nd-piece:nth-child(1) { width: 78%; }
#branding .nd-gallery__col--major .nd-piece:nth-child(2) { width: 96%; align-self: flex-end; }
#branding .nd-gallery__col--minor .nd-piece:nth-child(1) { width: 100%; }
#branding .nd-gallery__col--minor .nd-piece:nth-child(2) { width: 84%; align-self: flex-end; }

/* PACKAGING — columna protagonista a la derecha; los tres verticales dejan
   de leerse como una hilera repetitiva y el horizontal funciona como pausa. */
#packaging .nd-gallery__col--major .nd-piece:nth-child(1) { width: 82%; align-self: flex-end; }
#packaging .nd-gallery__col--major .nd-piece:nth-child(2) { width: 68%; align-self: flex-start; }
#packaging .nd-gallery__col--minor .nd-piece:nth-child(1) { width: 82%; }
#packaging .nd-gallery__col--minor .nd-piece:nth-child(2) { width: 100%; }

/* WEB / UX — aquí la mezcla de device-shots y panorámicas ya es potente.
   Se conserva el contraste de formato y se usa como caso más “masonry”. */
#digital .nd-gallery--curated {
  --nd-gallery-major: 1.24fr;
  --nd-gallery-minor: .76fr;
}
#digital .nd-gallery__col--major .nd-piece:nth-child(1) { width: 100%; }
#digital .nd-gallery__col--major .nd-piece:nth-child(2) { width: 57%; align-self: flex-end; }
#digital .nd-gallery__col--major .nd-piece:nth-child(3) { width: 94%; }
#digital .nd-gallery__col--minor .nd-piece:nth-child(1) { width: 78%; align-self: flex-end; }
#digital .nd-gallery__col--minor .nd-piece:nth-child(2) { width: 100%; }
#digital .nd-gallery__col--minor .nd-piece:nth-child(3) { width: 91%; align-self: flex-start; }

/* SOCIAL — tres piezas requieren una composición más gráfica. La vertical
   funciona como ancla y las dos piezas anchas construyen la columna larga. */
#social .nd-gallery--curated {
  --nd-gallery-major: 1.22fr;
  --nd-gallery-minor: .78fr;
}
#social .nd-gallery__col--major .nd-piece:nth-child(1) { width: 100%; }
#social .nd-gallery__col--major .nd-piece:nth-child(2) { width: 82%; align-self: flex-end; }
#social .nd-gallery__col--minor .nd-piece:nth-child(1) { width: 88%; align-self: flex-end; }

/* La leyenda final de Polar Bear queda en el mismo blanco puro del bloque. */
.nd-site .nd-lab__statement {
  width: min(100%, 760px);
  margin: calc(clamp(8px, 1.2vw, 18px) * -1) auto 0;
  padding-top: clamp(22px, 3vw, 38px);
  border-top: 1px solid rgba(27, 36, 48, .16);
  font-family: var(--nd-font-body);
  font-size: clamp(.78rem, .95vw, .92rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(27, 36, 48, .62);
}

@media (max-width: 1100px) {
  .nd-site .nd-gallery--curated {
    --nd-gallery-major: 1.1fr;
    --nd-gallery-minor: .9fr;
    --nd-gallery-gap-x: clamp(24px, 4vw, 54px);
    --nd-gallery-gap-y: clamp(50px, 7vw, 88px);
  }
  .nd-site .nd-gallery--curated .nd-gallery__col--minor {
    padding-top: clamp(52px, 8vw, 110px);
  }
}

/* Móvil: una sola columna y se recupera el orden editorial original 1,2,3…
   aunque en desktop cada pieza viva dentro de una columna distinta. */
@media (max-width: 760px) {
  .nd-site .nd-gallery--curated,
  .nd-site .nd-gallery--curated.nd-gallery--lead-right {
    display: flex;
    flex-direction: column;
    gap: clamp(34px, 10vw, 58px);
  }
  .nd-site .nd-gallery--curated .nd-gallery__col,
  .nd-site .nd-gallery--curated.nd-gallery--lead-right .nd-gallery__col {
    display: contents;
  }
  .nd-site .nd-gallery--curated .nd-piece {
    order: var(--nd-mobile-order, 0);
    width: 100% !important;
    max-width: none !important;
    align-self: auto !important;
    transform: none;
  }
  .nd-site .nd-gallery--curated .nd-piece__caption {
    margin-top: 10px;
  }
  .nd-site .nd-lab__statement {
    letter-spacing: .075em;
  }
}
/* 01 / 07 — ESTUDIO
   Contraste editorial respecto a Branding */
#estudio.nd-chapter {
  background-color: #E2E6E7;
}