/* Nosotros page (Pablo, 8 Nov 2026; built from diseno/nosotros/round2/nosotros-v04.html).
   Made from the site's own pieces: left-aligned headings, the two-tone run-on of the brands heading, rounded photo blocks
   at the 1160 px width, the documentary seal, and the contact block and footer as they are.
   References (diseno/nosotros/round1): A Grand Seiko (the place first), B Herman Miller (archive), D Everlane (the plant
   as a captioned grid). */

/* 1 · the place first (A): the orchard fills the screen, the title sits bottom-left like the huerto section */
.nos-hero { position: relative; height: 100svh; min-height: 640px; overflow: clip; color: #fff; background: #23361a; }
.nos-hero video, .nos-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }   /* the homepage's orchard film, full screen */
.nos-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(14deg, rgba(14,22,10,.7) 0%, rgba(14,22,10,.22) 44%, rgba(14,22,10,0) 66%), linear-gradient(180deg, rgba(14,22,10,.35) 0%, rgba(14,22,10,0) 18%); }
.nos-hero .contenido { position: absolute; z-index: 1; left: max(24px, (100% - 1160px) / 2); right: 24px; bottom: clamp(40px, 7vh, 88px); }
.nos-hero h1 { margin: 0; font-weight: 900; font-size: clamp(56px, 7.6vw, 116px); line-height: .94; letter-spacing: -.035em; }
.nos-hero video { object-position: 100% 50%; }   /* the worker on the right, the title on the left (Pablo, 8 Nov 2026) */
.nos-hero .kicker { color: #fff; font-weight: 700; font-size: clamp(15px, 1.25vw, 18px); margin: 16px 0 0; }

.pagina .nos { padding: clamp(72px, 10vw, 150px) 24px 0; }

/* the lead: the brands heading's two-tone run-on, ink running into grey at one size */
.nos-lead { margin: 0; font-weight: 700; font-size: clamp(28px, 3.3vw, 48px); line-height: 1.14; letter-spacing: -.028em; max-width: 26ch; text-wrap: pretty; }
.nos-lead span { color: #a39a90; }

/* 2 · what we make: four product lines in a row, the same captioned tiles as the plant grid */
.nos-grid--4 { grid-template-columns: repeat(4, 1fr) !important; }
.pagina .nos h2.titulo { font-size: clamp(38px, 5.2vw, 72px); line-height: 1; letter-spacing: -.032em; text-wrap: initial; }
.pagina .nos .cuerpo { margin: clamp(20px, 2.2vw, 30px) 0 0; max-width: 34ch; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; text-wrap: pretty; }
.nos figcaption { margin-top: 12px; font-size: 15px; line-height: 1.4; color: var(--gris); }

/* 3 · the plant (D): heading left, its paragraph in the right-hand column on the same line, then the captioned grid */
.nos-cabeza { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(36px, 4.4vw, 64px); }
.nos-cabeza .cuerpo { margin: 0 !important; max-width: 40ch !important; }
.nos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 44px) clamp(14px, 1.6vw, 22px); }
.nos-grid figure { margin: 0; }
.nos-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); }   /* stills from the graded final film: no extra grade */
.nos-grid figcaption { margin-top: 14px; }
.nos-grid figcaption b { display: block; color: var(--tinta); font-size: clamp(17px, 1.3vw, 19px); font-weight: 700; margin-bottom: 4px; }

/* 4 · the film: heading left, then the old documentary block with its turning seal */
.pagina .nos-film h2.titulo { text-wrap: nowrap; }   /* text-wrap, not white-space: the site rule sets text-wrap: initial */
.nos-film .documental { width: 100%; }
.pagina .nos-film + .contacto { padding-top: clamp(96px, 11vw, 170px); }

/* tablet: the two-column blocks stack, the grid goes to two; phone: one column, the history text no longer holds */
@media (max-width: 900px) {
  .nos-cabeza { grid-template-columns: 1fr; gap: 28px; }
  .nos-grid, .nos-grid--4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .nos-hero { min-height: 560px; height: 88svh; }
  .nos-grid, .nos-grid--4 { grid-template-columns: 1fr !important; }
  .pagina .nos-film h2.titulo { text-wrap: balance; }
}
