/* ============================================================
   PÁGINA NOSOTROS
   Tipografía: var(--font-serif) = var(--font-sans) = Aileron
   ============================================================ */

.nosotros-page {
  padding-top: 0;
  overflow-x: hidden;
}

/* ============================================================
   1. HERO — curado, no fullscreen, foto dominante
   ============================================================ */
.nos-hero {
  position: relative;
  background: var(--color-bg);
  /* No fullscreen: altura curada según contenido */
  height: clamp(600px, 88vh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* "Creativo" enorme como textura tipográfica — encima de la foto */
.nos-hero__bg-word {
  position: absolute;
  bottom: -0.1em;
  right: -0.04em;          /* anclado al lado de la foto */
  font-family: var(--font-serif);
  font-size: clamp(14rem, 26vw, 400px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: transparent;
  /* Stroke blanco: visible sobre la foto, sutil sobre el fondo crema */
  -webkit-text-stroke: 1px rgba(255,255,255,0.22);
  mix-blend-mode: overlay;  /* se integra naturalmente con la foto */
  pointer-events: none;
  user-select: none;
  z-index: 2;               /* encima de la foto */
}

/* Layout: texto estrecho izquierda (42%) + foto ancha derecha (58%) */
.nos-hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 0;
  align-items: center;        /* centrado vertical, no pegado al fondo */
  padding: 147px var(--gutter) 60px;
  flex: 1;
  min-height: 0;
}

.nos-hero__info {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-right: 60px;
}

.nos-hero__info .label {
  margin-bottom: 32px;
}

/* Heading principal */
.nos-hero__heading {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5.5vw, 80px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin-bottom: 0;
}

/* Divisor editorial: línea fina + número de sección */
.nos-hero__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  margin-bottom: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
}

.nos-hero__meta-index {
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.nos-hero__meta-rule {
  flex: 1;
  height: 1px;
  background: var(--color-border);
  max-width: 80px;
}

.nos-hero__intro {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--color-text-muted);
  max-width: 340px;
}

/* Foto: más ancha (58%), sigue sangrando al borde derecho */
.nos-hero__photo {
  position: absolute;
  top: var(--header-height);
  right: 0;
  width: 58%;
  height: calc(100% - var(--header-height));
  overflow: hidden;
}

/* Borde izquierdo sutil para separar foto del texto */
.nos-hero__photo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: rgba(26,25,22,0.08);
  z-index: 1;
}

.nos-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 1.2s var(--ease);
}

.nos-hero:hover .nos-hero__photo img {
  transform: scale(1.03);
}

.nos-hero__photo-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(26,25,22,0.06);
}

/* data-reveal maneja opacity/transform — ver main.js */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   4. EL ESTUDIO — foto sangra al borde izquierdo
   ============================================================ */

/* Ficha técnica rápida (specs) en columna de texto */
.nos-estudio__specs {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
  margin: 28px 0 36px;
}

.nos-estudio__spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(26,25,22,0.07);
  gap: 16px;
}

.nos-estudio__spec-k {
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.nos-estudio__spec-v {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 0.04em;
  text-align: right;
}


.nos-estudio {
  display: grid;
  grid-template-columns: 50% 1fr;
  min-height: 75vh;
  align-items: stretch;
}

.nos-estudio__foto-col {
  position: relative;
  overflow: hidden;
}

.nos-estudio__foto-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease);
}

.nos-estudio__foto-col:hover img {
  transform: scale(1.04);
}

.nos-estudio__placeholder {
  width: 100%;
  height: 100%;
  min-height: 600px;
  background: rgba(26,25,22,0.06);
}

.nos-estudio__text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 80px 80px 80px 80px;
}

.nos-estudio__titulo {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 3rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.nos-estudio__text-col p {
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--color-text-muted);
  max-width: 460px;
}

/* ============================================================
   5. METODOLOGÍA DE TRABAJO
   ============================================================ */
.nos-metodologia {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: 100px var(--gutter) 140px;
  overflow: hidden;
}

.nos-metodologia__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* ── Header editorial ── */
.nos-metodologia__header {
  margin-bottom: 80px;
}

/* Fila superior: label ─────────── 05 fases */
.nos-metodologia__eyebrow {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.nos-metodologia__eyebrow-rule {
  flex: 1;
  height: 1px;
  background: var(--color-border);
  display: block;
}

.nos-metodologia__badge {
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.nos-metodologia__badge b {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: rgba(26,25,22,0.2);
  font-style: normal;
  line-height: 1;
}

/* Título grande con segunda línea en itálica desplazada */
.nos-metodologia__titulo {
  font-family: var(--font-serif);
  font-size: clamp(3.75rem, 8vw, 9.5rem);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--color-text);
}

.nos-metodologia__titulo em {
  font-style: normal;
  display: block;
  margin-left: clamp(3rem, 10vw, 11rem); /* desplazamiento editorial */
  color: rgba(26,25,22,0.55);
}

/* ── Grid de pasos ── */
.nos-meto-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
  /* Track estático (siempre visible, fallback sin JS) */
  border-top: 2px solid rgba(26,25,22,0.12);
}

/* Línea oscura animada — dibuja encima del track */
.nos-meto-grid.has-js::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

.nos-meto-grid.is-animated::after { transform: scaleX(1); }

/* ── Paso individual ── */
.nos-meto-step {
  /* Padding simétrico izquierda/derecha — primero y último con ajuste */
  padding: 36px 28px 52px 28px;
  border-right: 1px solid var(--color-border);
  position: relative;
}

.nos-meto-step:first-child { padding-left: 0; }
.nos-meto-step:last-child  { border-right: none; padding-right: 0; }

/* ── Punto marcador sobre la línea ── */
.nos-meto-step::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 28px;         /* alineado con el padding izquierdo del paso */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-text);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 0 1.5px var(--color-text);
  z-index: 2;
  transform-origin: center;
}

.nos-meto-step:first-child::before { left: 0; }

/* Con JS: dots ocultos, aparecen con rebote exagerado */
.nos-meto-grid.has-js .nos-meto-step::before {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s ease,
              transform 0.55s cubic-bezier(0.34, 2.0, 0.64, 1); /* rebote fuerte */
}

.nos-meto-grid.is-animated .nos-meto-step::before { opacity: 1; transform: scale(1); }

/* Stagger de dots: timed con la velocidad de la línea (1.4s) */
.nos-meto-grid.is-animated .nos-meto-step:nth-child(1)::before { transition-delay: 0.05s; }
.nos-meto-grid.is-animated .nos-meto-step:nth-child(2)::before { transition-delay: 0.33s; }
.nos-meto-grid.is-animated .nos-meto-step:nth-child(3)::before { transition-delay: 0.61s; }
.nos-meto-grid.is-animated .nos-meto-step:nth-child(4)::before { transition-delay: 0.89s; }
.nos-meto-grid.is-animated .nos-meto-step:nth-child(5)::before { transition-delay: 1.17s; }

/* Con JS: pasos ocultos — entran con desplazamiento grande */
.nos-meto-grid.has-js .nos-meto-step {
  opacity: 0;
  transform: translateY(72px);
}

.nos-meto-grid.is-animated .nos-meto-step {
  animation: meto-step-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.nos-meto-grid.is-animated .nos-meto-step:nth-child(1) { animation-delay: 0.15s; }
.nos-meto-grid.is-animated .nos-meto-step:nth-child(2) { animation-delay: 0.32s; }
.nos-meto-grid.is-animated .nos-meto-step:nth-child(3) { animation-delay: 0.49s; }
.nos-meto-grid.is-animated .nos-meto-step:nth-child(4) { animation-delay: 0.66s; }
.nos-meto-grid.is-animated .nos-meto-step:nth-child(5) { animation-delay: 0.83s; }

@keyframes meto-step-in {
  from { opacity: 0; transform: translateY(72px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Número grande — contará con JS ── */
.nos-meto-step__num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 5vw, 80px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(26,25,22,0.1);
  margin-bottom: 22px;
}

/* ── Título del paso ── */
.nos-meto-step__title {
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(26,25,22,0.08);
  line-height: 1.5;
}

/* ── Lista de entregables ── */
.nos-meto-step__list { list-style: none; }

.nos-meto-step__list li {
  font-size: 0.75rem;
  line-height: 1.8;
  color: var(--color-text-muted);
  padding-left: 16px;
  position: relative;
  margin-bottom: 3px;
}

.nos-meto-step__list li::before {
  content: '—';
  position: absolute;
  left: 0;
  font-size: 0.6rem;
  color: rgba(26,25,22,0.22);
  line-height: 1.8;
}

/* ============================================================
   6. FUNDADOR — editorial 3 columnas
   ============================================================ */
.nos-fundador {
  background: var(--color-text);
  overflow: hidden;
}

/* Header: label + línea fina */
.nos-fundador__header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 80px var(--gutter) 52px;
  max-width: calc(var(--max-width) + 2 * var(--gutter));
  margin: 0 auto;
}

.nos-fundador__label {
  color: rgba(242,239,232,0.28);
  border-color: rgba(242,239,232,0.1);
  flex-shrink: 0;
}

.nos-fundador__header-line {
  flex: 1;
  height: 1px;
  background: rgba(242,239,232,0.1);
  display: block;
}

/* Grid principal: retrato | contenido | sidebar */
.nos-fundador__main {
  display: grid;
  grid-template-columns: 36% 1fr 230px;
  gap: 0 56px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) 100px;
  align-items: start;
}

/* ── Col 1: Retrato ── */
.nos-fundador__foto1 {
  height: clamp(520px, 70vh, 800px);
  overflow: hidden;
  margin-left: calc(-1 * var(--gutter)); /* sangra al borde del contenedor */
}

.nos-fundador__foto1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(25%);
  transition: filter 1.4s var(--ease);
}

.nos-fundador:hover .nos-fundador__foto1 img { filter: grayscale(0%); }

.nos-fundador__foto1-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(242,239,232,0.04);
}

/* ── Col 2: Quote + ID + Biografía ── */
.nos-fundador__content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 4px;
}

/* Pull-quote: protagonista */
.nos-fundador__cita {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.6vw, 2.625rem);
  font-weight: 300;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--color-bg);
  quotes: none;
  margin: 0;
}

/* ID: nombre · cargo en línea */
.nos-fundador__id {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 0;
  border-top: 1px solid rgba(242,239,232,0.1);
  border-bottom: 1px solid rgba(242,239,232,0.1);
}

.nos-fundador__nombre {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 400;
  color: rgba(242,239,232,0.9);
  letter-spacing: 0.02em;
  margin: 0;
}

.nos-fundador__cargo {
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242,239,232,0.28);
}

/* Biografía */
.nos-fundador__bio {
  font-size: 0.8125rem;
  line-height: 1.9;
  color: rgba(242,239,232,0.48);
}

.nos-fundador__bio p { margin-bottom: 0.8rem; }
.nos-fundador__bio p:last-child { margin-bottom: 0; }

/* ── Col 3: Foto 2 + Cronología ── */
.nos-fundador__sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 4px;
}

/* Foto secundaria */
.nos-fundador__foto2 {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.nos-fundador__foto2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(40%);
  opacity: 0.6;
  transition: opacity 0.5s var(--ease), filter 0.5s var(--ease);
}

.nos-fundador__foto2:hover img {
  opacity: 0.85;
  filter: grayscale(0%);
}

/* Cronología */
.nos-fundador__crono-label {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(242,239,232,0.55);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(242,239,232,0.15);
}

.nos-fundador__crono-item {
  padding: 8px 0;
  border-bottom: 1px solid rgba(242,239,232,0.1);
}

.nos-fundador__crono-year {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: rgba(242,239,232,0.75);
  font-weight: 500;
  margin-bottom: 1px;
}

.nos-fundador__crono-entity {
  display: block;
  font-size: 0.8rem;
  color: rgba(242,239,232,0.65);
  line-height: 1.45;
}

.nos-fundador__crono-role {
  display: block;
  font-size: 0.65rem;
  color: rgba(242,239,232,0.45);
  letter-spacing: 0.04em;
  margin-top: 1px;
}

/* ============================================================
   6. EQUIPO — foto full-bleed + palabra outline superpuesta
   ============================================================ */
.nos-equipo {
  position: relative;
  overflow: hidden;
  height: 72vh;
  min-height: 440px;
}

.nos-equipo__foto {
  width: 100%;
  height: 100%;
}

.nos-equipo__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transition: transform 1.2s var(--ease);
}

.nos-equipo:hover .nos-equipo__foto img {
  transform: scale(1.04);
}

/* "Equipo" como elemento gráfico sobre la foto */
.nos-equipo__overlay {
  position: absolute;
  bottom: -0.08em;
  left: -0.02em;
  pointer-events: none;
  z-index: 2;
}

.nos-equipo__word {
  font-family: var(--font-serif);
  font-size: clamp(8rem, 20vw, 300px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242,239,232,0.35);
  display: block;
  white-space: nowrap;
}

/* ============================================================
   7. FOTOS EQUIPO POR AÑO — galería discreta
   ============================================================ */
.nos-hist {
  background: var(--color-bg);
  padding: 72px var(--gutter) 80px;
  border-bottom: 1px solid var(--color-border);
}

.nos-hist__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Header: label + línea */
.nos-hist__header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

.nos-hist__rule {
  flex: 1;
  height: 1px;
  background: var(--color-border);
  display: block;
}

/* Grid: 4 columnas fijas */
.nos-hist__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 24px;
}

/* Cada item */
.nos-hist__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Foto */
.nos-hist__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(26,25,22,0.05);
}

.nos-hist__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(100%);
  opacity: 1;
  transition: filter 0.5s var(--ease);
}

.nos-hist__item:hover .nos-hist__photo img {
  filter: grayscale(30%);
}

/* Flechas de navegación móvil — ocultas en desktop */
.nos-hist__mob-arrows { display: none; }

/* Año */
.nos-hist__year {
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* ============================================================
   8. MARCAS — marquee de logos (infinito)
   ============================================================ */
.nos-marcas {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 60px var(--gutter);
  background: var(--color-bg);
  overflow: hidden;
}

.nos-marcas__header {
  max-width: var(--max-width);
  margin: 0 auto 40px;
}

.nos-marcas__track {
  overflow: hidden;
}

.nos-marcas__list {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: nos-marquee 28s linear infinite;
  will-change: transform;
}

.nos-marcas__track:hover .nos-marcas__list {
  animation-play-state: paused;
}

.nos-marcas__item {
  flex-shrink: 0;
  height: 80px;
  display: flex;
  align-items: center;
  padding-right: 72px;
}

.nos-marcas__item img {
  height: 100%;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: opacity 0.4s, filter 0.4s;
}

.nos-marcas__item img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

@keyframes nos-marquee {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

.nos-marcas__empty {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  max-width: var(--max-width);
  margin: 0 auto;
}

/* ── Brochure — botón en el hero ── */
.nos-hero__brochure {
  margin-top: 2rem;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 13px 24px;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}

.nos-hero__brochure:hover {
  border-color: var(--color-text);
  transform: translateY(-2px);
}

.nos-hero__brochure svg {
  transition: transform 0.3s var(--ease);
}

.nos-hero__brochure:hover svg {
  transform: translateY(3px);
}

/* ============================================================
   8. CTA PROYECTOS
   ============================================================ */
.nos-cta-proyectos {
  background: var(--color-bg);
}

.nos-cta-proyectos__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 100px var(--gutter) 80px;
}

.nos-cta-proyectos__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 48px;
  border-top: 1px solid var(--color-border);
  padding-top: 40px;
}

.nos-cta-proyectos__link {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  position: relative;
  padding-bottom: 2px;
  transition: opacity 0.2s;
}

.nos-cta-proyectos__link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--color-text);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}

.nos-cta-proyectos__link:hover::after { transform: scaleX(0); }

/* Heading enorme — el impacto visual */
.nos-cta-proyectos__heading {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7vw, 100px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

/* ============================================================
   9. CTA CONTACTO — oscuro, palabra gráfica de fondo
   ============================================================ */
.nos-cta-contacto {
  background: var(--color-text);
  position: relative;
  overflow: hidden;
  padding: 120px var(--gutter) 100px;
}

.nos-cta-contacto__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
}

.nos-cta-contacto__label {
  color: rgba(242,239,232,0.3);
  border-color: rgba(242,239,232,0.12);
  display: block;
  margin-bottom: 48px;
}

.nos-cta-contacto__heading {
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 8vw, 120px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--color-bg);
  margin-bottom: 64px;
}

.nos-cta-contacto__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-bg);
  padding: 16px 36px;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}

.nos-cta-contacto__btn:hover {
  background: transparent;
  color: var(--color-bg);
}

/* Botones en fila: Hablemos + Descargar brochure */
.nos-cta-contacto__btns {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* Botón outline brochure sobre fondo oscuro */
.nos-cta-contacto__brochure {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242,239,232,0.55);
  border: 1px solid rgba(242,239,232,0.2);
  padding: 16px 32px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.nos-cta-contacto__brochure:hover {
  color: var(--color-bg);
  border-color: rgba(242,239,232,0.7);
  transform: translateY(-2px);
}

.nos-cta-contacto__brochure svg {
  transition: transform 0.3s var(--ease);
}

.nos-cta-contacto__brochure:hover svg {
  transform: translateY(3px);
}

/* "Hablemos" como textura tipográfica de fondo */
.nos-cta-contacto__bg-word {
  position: absolute;
  bottom: -0.12em;
  right: -0.04em;
  font-family: var(--font-serif);
  font-size: clamp(10rem, 20vw, 320px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242,239,232,0.05);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  /* Metodología: 3 columnas en pantalla mediana */
  .nos-meto-grid { grid-template-columns: repeat(3, 1fr); }

  /* Paso 3: quitar borde derecho (último de la primera fila) */
  .nos-meto-step:nth-child(3) { border-right: none; padding-right: 0; }

  /* Pasos 4 y 5: segunda fila — borde superior */
  .nos-meto-step:nth-child(n+4) {
    border-top: 1px solid var(--color-border);
    padding-top: 32px;
  }
  .nos-meto-step:nth-child(n+4)::before { top: -4px; }
  .nos-meto-step:nth-child(5) { border-right: none; padding-right: 0; }

  /* Restaurar borde en paso 4 (1er elemento de la segunda fila) */
  .nos-meto-step:nth-child(4) { border-right: 1px solid var(--color-border); }
}

@media (max-width: 1100px) {
  .nos-estudio          { grid-template-columns: 45% 1fr; }
  .nos-estudio__text-col{ padding: 60px 48px; }
  /* 3 columnas → fundador sidebar se comprime */
  .nos-fundador__main   { grid-template-columns: 36% 1fr 200px; gap: 0 40px; }
}

@media (max-width: 900px) {
  .nos-hero             { height: auto; }
  .nos-hero__layout     { grid-template-columns: 1fr; padding: 100px var(--gutter) 0; align-items: start; }
  .nos-hero__photo      { position: relative; top: auto; right: auto; width: 100%; height: 55vw; margin-top: 48px; }
  .nos-hero__photo::before { display: none; }
  .nos-hero__info       { padding-right: 0; padding-bottom: 0; }
  .nos-hero__meta       { margin-top: 24px; margin-bottom: 18px; padding-top: 18px; }

  .nos-estudio          { grid-template-columns: 1fr; min-height: auto; }
  .nos-estudio__foto-col{ height: 100vw; }
  .nos-estudio__text-col{ padding: 60px var(--gutter); }

  /* Metodología: 2 columnas en tablet */
  .nos-metodologia { padding: 80px var(--gutter) 100px; }
  .nos-metodologia__header { grid-template-columns: 1fr; gap: 16px; }
  .nos-meto-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Reset reglas de 3 columnas */
  .nos-meto-step:nth-child(3) { border-right: 1px solid var(--color-border); padding-right: 28px; }
  .nos-meto-step:nth-child(n+4) { border-top: none; padding-top: 32px; }
  /* 2 columnas: paso derecho (even) sin borde derecho, con padding izquierdo */
  .nos-meto-step:nth-child(even) {
    border-right: none;
    padding-right: 0;
    padding-left: 28px;
    border-left: 1px solid var(--color-border);
  }
  .nos-meto-step:nth-child(even)::before { left: -4px; }
  /* Fila 2+ en 2 columnas: agregar borde superior */
  .nos-meto-step:nth-child(n+3) {
    border-top: 1px solid var(--color-border);
    padding-top: 32px;
  }
  .nos-meto-step:nth-child(n+3)::before { top: -4px; }

  /* Fundador: tablet — 2 columnas (foto | content+sidebar apilados) */
  .nos-fundador__main {
    grid-template-columns: 42% 1fr;
    grid-template-rows: auto auto;
  }
  .nos-fundador__foto1    { margin-left: 0; height: 60vw; }
  .nos-fundador__sidebar  { grid-column: 2; grid-row: 2; gap: 20px; padding-top: 24px; }
  .nos-fundador__content  { grid-column: 2; grid-row: 1; }

  .nos-equipo           { height: 56vw; min-height: 280px; }

  .nos-cta-proyectos__inner { padding: 80px var(--gutter) 60px; }
  .nos-cta-contacto     { padding: 80px var(--gutter); }
}

/* Pantallas de poca altura pero anchas (laptops landscape) */
@media (max-height: 800px) and (min-width: 601px) {
  .nos-fundador__foto1 {
    margin-left: 0;                        /* quita el sangrado izquierdo */
    height: clamp(640px, 95vh, 1000px);    /* fuerza una proporción claramente vertical */
  }
}

@media (max-width: 600px) {
  /* ── HERO MÓVIL: foto full-bleed, texto sobre gradiente ── */
  .nos-hero {
    margin-top: 103px;                   /* empuja el hero bajo el header fijo */
    height: calc(100vh - 103px);
    height: calc(100svh - 103px);
    min-height: 477px;                   /* 580 - 103 */
  }

  .nos-hero__bg-word { display: none; }

  /* Foto: absolute, cubre todo el hero (que ya arranca bajo el header) */
  .nos-hero__photo {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin-top: 0 !important;
  }

  .nos-hero__photo::before { display: none; }

  /* Gradiente oscuro de abajo hacia arriba para legibilidad del texto */
  .nos-hero__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(26,25,22,0.97) 0%,
      rgba(26,25,22,0.72) 50%,
      rgba(26,25,22,0.18) 100%
    );
    pointer-events: none;
  }

  .nos-hero__photo img { object-position: center 15%; }

  /* Layout: flex column con texto pegado al fondo */
  .nos-hero__layout {
    display: flex !important;
    grid-template-columns: unset;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 20px 44px;
    position: absolute;
    inset: 0;
    z-index: 2;
  }

  /* Info: visible sobre el gradiente */
  .nos-hero__info {
    padding-right: 0;
    position: relative;
    z-index: 1;
  }

  .nos-hero__info .label {
    color: rgba(242,239,232,0.5);
    border-color: rgba(242,239,232,0.15);
    margin-bottom: 10px;
  }

  .nos-hero__heading {
    font-size: clamp(3rem, 14vw, 5rem);
    color: rgba(242,239,232,0.95);
  }

  .nos-hero__meta {
    border-top-color: rgba(242,239,232,0.15);
    margin-top: 20px;
    margin-bottom: 14px;
    padding-top: 16px;
  }

  .nos-hero__meta-index { color: rgba(242,239,232,0.3); }
  .nos-hero__meta-rule  { background: rgba(242,239,232,0.12); }

  .nos-hero__intro {
    color: rgba(242,239,232,0.6);
    font-size: 0.95rem;
    max-width: none;
    line-height: 1.7;
  }

  .nos-hero__brochure {
    background: var(--color-white);
    color: var(--color-text);
    border-color: var(--color-white);
    margin-top: 1.25rem;
  }

  .nos-hero__brochure:hover {
    background: var(--color-white);
    border-color: var(--color-white);
    opacity: 0.88;
  }

  .nos-estudio__text-col { padding: 48px 20px; }
  .nos-estudio__spec-v   { font-size: 0.6875rem; }

  /* Metodología móvil: 1 columna, número + título inline */
  .nos-metodologia { padding: 64px 20px 80px; border-top: 1px solid var(--color-border); }
  .nos-meto-grid {
    grid-template-columns: 1fr;
    border-top: none;
  }

  /* Reset todas las reglas de columnas múltiples */
  .nos-meto-step,
  .nos-meto-step:nth-child(even),
  .nos-meto-step:nth-child(n+3),
  .nos-meto-step:nth-child(3),
  .nos-meto-step:nth-child(4),
  .nos-meto-step:nth-child(5) {
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto;
    gap: 0 16px;
    border-right: none;
    border-left: none;
    border-top: 1px solid var(--color-border);
    padding: 28px 0 28px 0;
  }

  .nos-meto-step::before { display: none; }

  .nos-meto-step__num {
    grid-column: 1;
    grid-row: 1 / 3;  /* número abarca título + lista */
    font-size: 2.25rem;
    margin-bottom: 0;
    align-self: start;
    padding-top: 3px;
    color: rgba(26,25,22,0.1);
  }

  .nos-meto-step__title {
    grid-column: 2;
    grid-row: 1;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 10px;
    font-size: 0.5625rem;
    align-self: center;
  }

  .nos-meto-step__list {
    grid-column: 2;
    grid-row: 2;
  }

  .nos-meto-step__list li { font-size: 0.7rem; }

  /* Título: tamaño móvil */
  .nos-metodologia__titulo { font-size: clamp(3rem, 14vw, 4.5rem); }
  .nos-metodologia__titulo em { margin-left: 2rem; }

  /* En móvil no hay línea horizontal — desactivar */
  .nos-meto-grid.has-js::after { display: none; }
  .nos-meto-grid.has-js .nos-meto-step::before,
  .nos-meto-grid.is-animated .nos-meto-step::before { display: none; }

  /* Las animaciones de pasos sí aplican en móvil (solo la de entrada) */
  .nos-meto-grid.has-js .nos-meto-step {
    opacity: 0;
    transform: translateY(40px);
  }

  /* Fundador: móvil — 1 columna */
  .nos-fundador__header { padding: 48px 20px 28px; }
  .nos-fundador__main   {
    grid-template-columns: 1fr;
    padding: 0 20px 64px;
    gap: 0;
  }
  /* CRÍTICO: resetear grid-column/row del breakpoint de 900px */
  .nos-fundador__content,
  .nos-fundador__sidebar { grid-column: auto; grid-row: auto; }

  /* Foto: con margen lateral, más alta */
  .nos-fundador__foto1  {
    height: 135vw;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  .nos-fundador__foto1 img {
    object-position: center 18%;
  }
  .nos-fundador__content { padding: 28px 20px 0; }
  .nos-fundador__sidebar { padding: 24px 20px 0; }

  .nos-fundador__cita    { font-size: clamp(1.35rem, 6vw, 2rem); line-height: 1.45; }
  .nos-fundador__id      { flex-direction: column; gap: 4px; }
  .nos-fundador__foto2   { aspect-ratio: 16 / 9; max-height: none; }

  /* Cronología: más compacta en móvil */
  .nos-fundador__crono-entity { font-size: 0.8rem; }
  .nos-fundador__crono-year   { font-size: 0.7rem; }

  .nos-equipo__word     { font-size: 28vw; }

  /* Hist móvil: scroll horizontal con snap */
  .nos-hist { padding: 56px 0 56px 20px; }
  .nos-hist__header { padding-right: 20px; }
  .nos-hist__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding-right: 20px;
    /* Ocultar scrollbar visualmente */
    scrollbar-width: none;
  }
  .nos-hist__grid::-webkit-scrollbar { display: none; }
  .nos-hist__item {
    flex-shrink: 0;
    width: 68vw;
    scroll-snap-align: start;
  }

  /* Colaboradores: marquee más compacto en móvil */
  .nos-marcas__item { height: 56px; padding-right: 48px; }

  /* Hist móvil: flechas de navegación */
  .nos-hist__mob-arrows {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-right: 20px;
    margin-top: 16px;
  }

  .nos-hist__arrow {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    color: var(--color-text);
  }

  .nos-cta-proyectos__heading { font-size: clamp(2.25rem, 10vw, 64px); }
  .nos-cta-proyectos__inner   { padding: 60px 20px; }

  .nos-cta-contacto     { padding: 64px 20px; }
  .nos-cta-contacto__heading  { font-size: clamp(2.75rem, 12vw, 80px); }
  .nos-cta-contacto__bg-word  { font-size: 30vw; }
}

/* ── Pantallas medianas 1200–1500px: textos grandes –20% ── */
@media (min-width: 1200px) and (max-width: 1500px) {
  .nos-hero__bg-word         { font-size: clamp(11.2rem, 20.8vw, 320px); }
  .nos-hero__heading         { font-size: clamp(2rem, 4.4vw, 64px); }
  .nos-estudio__titulo       { font-size: clamp(1.4rem, 2.4vw, 2.4rem); }
  .nos-metodologia__titulo   { font-size: clamp(3rem, 6.4vw, 7.6rem); }
  .nos-meto-step__num        { font-size: clamp(2.8rem, 4vw, 64px); }
  .nos-fundador__cita        { font-size: clamp(1.2rem, 2.08vw, 2.1rem); }
  .nos-equipo__word          { font-size: clamp(6.4rem, 16vw, 240px); }
  .nos-cta-proyectos__heading{ font-size: clamp(2.4rem, 5.6vw, 80px); }
  .nos-cta-contacto__heading { font-size: clamp(2.8rem, 6.4vw, 96px); }
  .nos-cta-contacto__bg-word { font-size: clamp(8rem, 16vw, 256px); }
}