/* ==========================================================================
   La Voz de Dios · PÁGINA NOSOTROS
   Solo el layout propio de /nosotros. Todo lo reutilizable vive en
   componentes.css; esta hoja se encola únicamente en esta página.
   ========================================================================== */

/* --- Hero (opción E: titular y cinta de valores, sin imagen) -------------- */
.ns-hero{padding-block:var(--e-4) 0;text-align:center}
.ns-hero .migas{justify-content:center;margin-bottom:var(--e-3)}
.ns-hero h1{max-width:18ch;margin:18px auto 0}
.ns-hero__sub{
  margin:20px auto 0;max-width:52ch;
  font-size:clamp(16px,1.5vw,20px);color:var(--c-tinta-70);
}
.ns-hero__cinta{margin-top:var(--e-4)}

/* --- Visión y propósito --------------------------------------------------- */
.ns-vp{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-3)}
.ns-vp__t{
  border:var(--borde);border-radius:var(--r-grande);
  padding:var(--e-4);display:grid;gap:16px;align-content:start;
}
.ns-vp__t:nth-child(1){background:var(--c-cielo-t)}
.ns-vp__t:nth-child(2){background:var(--c-lima-t)}
.ns-vp__t p{font-size:var(--fs-medio)}
.ns-vp__sep{height:1px;background:var(--c-tinta-14);margin-block:4px}
@media (max-width:860px){ .ns-vp{grid-template-columns:1fr} }

/* --- Historia ------------------------------------------------------------- */
.ns-historia{background:var(--c-superficie)}
.ns-historia__rej{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,4.4vw,68px);align-items:start;
}
.ns-historia__foto{
  border:var(--borde);border-radius:var(--r-grande);overflow:hidden;
  aspect-ratio:4/3.4;background:var(--c-amarillo-t);
  display:grid;place-items:center;position:sticky;top:96px;
}
/* Absoluta, no en flujo. Un alto en porcentaje NO se resuelve contra un
   contenedor cuya altura sale de aspect-ratio: cae a auto, la foto conserva
   su proporción natural, sobresale y el overflow la corta por donde caiga.
   Con inset:0 la caja es la del contenedor y object-fit sí tiene qué
   recortar. Medido en el DOM el 2026-09-05, con la banda del hero. */
.ns-historia__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .ns-historia__rej{grid-template-columns:1fr}
  /* relative y no static: quita el sticky igual, pero sigue siendo el bloque
     contenedor de la foto absoluta de arriba. Con static se escaparía. */
  .ns-historia__foto{position:relative;top:auto}
}

/* --- Pastores fundadores -------------------------------------------------- */
.ns-fund{background:var(--c-oscuro);color:var(--c-fondo)}
.ns-fund h2,.ns-fund h3{color:var(--c-fondo)}
.ns-fund__rej{
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(28px,4vw,64px);align-items:center;
}
.ns-fund__foto{
  border:2px solid var(--c-fondo);border-radius:var(--r-grande);overflow:hidden;
  aspect-ratio:4/4.6;background:var(--c-cielo-t);
  display:grid;place-items:center;position:relative;
}
/* Misma razón que en la foto de historia: absoluta para que object-fit
   recorte de verdad. El contenedor ya es relative. */
.ns-fund__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ns-fund__sello{
  position:absolute;right:-14px;bottom:22px;z-index:var(--z-flotante);
  display:grid;place-items:center;width:clamp(76px,8vw,108px);aspect-ratio:1;
  border-radius:50%;background:var(--c-accion);border:2px solid var(--c-fondo);
  color:var(--c-superficie);font-family:var(--f-texto);font-weight:var(--peso-fuerte);
  font-size:clamp(9px,.95vw,11px);text-transform:uppercase;text-align:center;
  letter-spacing:.04em;line-height:1.3;padding:8px;transform:rotate(-9deg);
}
.ns-fund__texto{color:var(--c-claro-75);font-size:var(--fs-medio);max-width:54ch}
.ns-fund__cita{
  font-family:var(--f-acento);font-style:normal;letter-spacing:0;
  font-size:var(--fs-lead);line-height:1.5;color:var(--c-lima);
  max-width:26ch;
}
.ns-fund__firma{
  display:flex;align-items:center;gap:14px;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--c-claro-24);
}
.ns-fund__firma b{
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:clamp(16px,1.6vw,20px);letter-spacing:var(--ls-titular);display:block;
}
.ns-fund__firma span{
  font-family:var(--f-texto);font-weight:var(--peso-fuerte);font-size:var(--fs-micro);
  text-transform:uppercase;letter-spacing:var(--ls-etiqueta);color:var(--c-claro-75);
}
@media (max-width:900px){ .ns-fund__rej{grid-template-columns:1fr} }

/* --- ADN ------------------------------------------------------------------ */
.ns-adn__intro{
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:var(--e-4);align-items:end;margin-bottom:var(--e-4);
}
.ns-adn__cita{
  border-left:3px solid var(--c-accion);
  padding-left:var(--e-2);
}
.ns-valores{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-2)}
@media (max-width:980px){
  .ns-adn__intro{grid-template-columns:1fr;align-items:start}
  .ns-valores{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){ .ns-valores{grid-template-columns:1fr} }

/* --- Creencias ------------------------------------------------------------ */
.ns-creo{background:var(--c-lima-t)}
.ns-creo__cabecera{
  text-align:center;max-width:60ch;margin-inline:auto;margin-bottom:var(--e-4);
}
.ns-creo__cabecera .versiculo{margin-inline:auto;margin-top:var(--e-2)}
.ns-actitudes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-2)}
.ns-actitud{
  border:var(--borde);border-radius:var(--r-medio);padding:var(--e-3);
  background:var(--c-superficie);display:grid;gap:12px;align-content:start;
}
.ns-actitud__n{
  font-family:var(--f-titular);font-weight:var(--peso-titular);font-size:var(--fs-h3);
  letter-spacing:var(--ls-titular);line-height:1.45;
}
.ns-actitud__n em{font-style:normal;color:var(--c-accion)}
.ns-actitud blockquote{
  margin:0;font-family:var(--f-acento);font-style:normal;
  font-size:var(--fs-medio);line-height:1.5;color:var(--c-tinta-70);
}
.ns-verdades{margin-top:var(--e-5)}
.ns-verdades__enc{text-align:center;max-width:56ch;margin-inline:auto;margin-bottom:var(--e-3)}
/* El acordeón hereda de .faq; sobre este fondo necesita superficie propia */
.ns-creo .faq{background:var(--c-superficie);border:var(--borde);border-radius:var(--r-medio);
  padding-inline:var(--e-3)}
.ns-creo .faq__it:last-child{border-bottom:0}
@media (max-width:860px){ .ns-actitudes{grid-template-columns:1fr} }

/* --- Equipo --------------------------------------------------------------- */
.ns-equipo__grupo+.ns-equipo__grupo{margin-top:var(--e-5)}
.ns-equipo__enc{margin-bottom:var(--e-3)}
.ns-equipo__enc p{color:var(--c-tinta-70);font-size:var(--fs-medio);margin-top:6px}
.ns-personas{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--e-2)}
.ns-personas--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){ .ns-personas,.ns-personas--4{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .ns-personas,.ns-personas--4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:420px){ .ns-personas,.ns-personas--4{grid-template-columns:1fr} }

/* --- CTA de cierre -------------------------------------------------------- */
.ns-cierre{
  background:var(--c-accion);color:var(--c-superficie);
  text-align:center;
}
.ns-cierre h2{color:var(--c-superficie);max-width:16ch;margin-inline:auto}
.ns-cierre p{
  color:var(--c-superficie-92);max-width:44ch;
  margin:16px auto 0;font-size:clamp(16px,1.5vw,20px);
}
.ns-cierre .acciones{justify-content:center;margin-top:var(--e-3)}

/* La referencia bíblica hereda la cursiva del blockquote; se endereza para
   que se lea como dato y no como parte de la cita. */
.ns-actitud blockquote cite{
  display:block;margin-top:10px;
  font-family:var(--f-texto);font-style:normal;
  color:var(--c-tinta-70);
}

/* Descripción pegada al titular, como en el resto del sitio */
.ns-hero__sub{margin-top:10px}