/* ============================================================
   Página Nuestra historia (/nosotros/). Portada con foto y después
   un texto largo de lectura: gris, chico y con mucho aire.
   ============================================================ */
.nos{--pad:6vw}

/* ---- portada con foto ---- */
.nos-hero{position:relative;min-height:clamp(340px,52vh,520px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--dark)}
.nos-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nos-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(18,13,9,.9) 0%,rgba(18,13,9,.3) 55%,rgba(18,13,9,.4) 100%)}
.nos-hero .in{position:relative;z-index:2;padding:0 var(--pad) clamp(38px,6vh,72px);max-width:900px}
.nos-hero .k{font:500 11px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:#e7a878}
.nos-hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(38px,5.6vw,78px);line-height:1.02;
  letter-spacing:-.02em;margin:16px 0 0;color:#faf5ec}
.nos-hero h1 em{font-style:italic}

/* ---- el relato ---- */
.nos-cuerpo{max-width:640px;margin:0 auto;padding:clamp(44px,6vw,86px) clamp(16px,4vw,24px) clamp(56px,8vw,110px)}

/* los tres datos, adentro de la columna de texto */
.nos-dat{list-style:none;display:flex;flex-wrap:wrap;gap:20px 46px;margin:0 0 clamp(38px,5vw,58px);padding:0 0 clamp(30px,4vw,44px);
  border-bottom:1px solid var(--line-soft)}
.nos-dat b{display:block;font:300 clamp(28px,3.2vw,42px)/1 var(--serif);color:var(--ink)}
.nos-dat span{display:block;font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-top:8px}

/* texto gris y chico: tiene que leerse tranquilo, no como un documento */
.nos-cuerpo p{font-family:var(--serif);font-weight:300;font-size:16.5px;line-height:1.95;color:var(--muted);
  margin:0 0 24px;letter-spacing:.004em}
.nos-cuerpo p.uno::first-letter{float:left;font-size:52px;line-height:.9;padding:5px 11px 0 0;
  color:var(--terra-deep);font-weight:400}
.nos-cuerpo h2{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.1vw,26px);line-height:1.2;
  color:var(--ink);margin:clamp(38px,4.6vw,58px) 0 16px;padding-top:clamp(26px,3.2vw,40px);
  border-top:1px solid var(--line-soft)}

/* huecos de las fotos que faltan */
.nos-foto{margin:clamp(34px,4.4vw,54px) 0;position:relative}
.nos-foto .hueco{aspect-ratio:3/2;background:var(--greige);border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center}
.nos-foto .hueco span{font:500 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.nos-foto figcaption{font-size:12.5px;color:var(--faint);margin-top:10px;font-family:var(--sans)}

/* la cita: centrada y destacada, entre dos capítulos */
.nos-cita{margin:clamp(44px,5.6vw,72px) 0;padding:clamp(28px,3.4vw,42px) 0;text-align:center;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(23px,2.8vw,34px);line-height:1.3;color:var(--ink);text-wrap:balance}
.nos-cita cite{display:block;font:500 10.5px var(--mono);font-style:normal;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);margin-top:18px}
/* la cita va pegada al título que sigue, no separada de él */
.nos-cita + h2{border-top:0;padding-top:0;margin-top:0}

@media(max-width:560px){
  .nos-cuerpo p{font-size:16px}
  .nos-cuerpo p.uno::first-letter{font-size:44px}
  .nos-dat{gap:16px 30px}
}