/* =====================================================
   dt-dba-nosotros.css — Página Nosotros · Deco en BSAS
   v6 — rewrite total con medidas exactas del Figma
   Mobile-first · Cormorant Garamond + Schibsted Grotesk
   ===================================================== */

/* ─── TOKENS ──────────────────────────────────────── */
:root {
  --dba-cream:  #F5F0E8;
  --dba-dark:   #1A1A18;
  --dba-title:  #2d2e0c;
  --dba-white:  #FFFFFF;
  --dba-gap:    3px;
}

/* ─── FIX SCROLL HORIZONTAL ───────────────────────── */
/* El contenedor del tema tiene overflow visible, lo contenemos acá */
.user-content {
  overflow-x: hidden !important;
}

/* ─── FULL-BLEED: escapar padding de Bootstrap ───── */
/* El .col-md-12 tiene padding 0 15px, lo compensamos */
.dt-ns-hero,
.dt-ns-intro,
.dt-ns-bio,
.dt-ns-quote,
.dt-ns-text-block,
.dt-ns-origin,
.dt-ns-split,
.dt-ns-services {
  position: relative;
  left: -15px;
  width: calc(100% + 30px) !important;
  max-width: none !important;
  box-sizing: border-box;
  overflow: hidden;
}



/* ─── RESET DE PÁRRAFOS DE TN ─────────────────────── */
/* TN aplica margin/padding a p dentro de .user-content */
.dt-ns-intro p,
.dt-ns-bio p,
.dt-ns-quote p,
.dt-ns-text-block p,
.dt-ns-origin p,
.dt-ns-services p {
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -5%;
}

/* ═══════════════════════════════════════════════════
   1. HERO
   Figma: 1920 × 930px
   ═══════════════════════════════════════════════════ */
.dt-ns-hero {
  background: var(--dba-dark);
  height: 56vw;
  max-height: 600px;
}

.dt-ns-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block !important;
}

@media (min-width: 768px) {
  .dt-ns-hero {
    height: 85vh;
    min-height: 580px;
    max-height: 930px;
  }
}

/* ═══════════════════════════════════════════════════
   2. INTRO
   Figma: título X=381, W=1177 sobre 1920px
   Título: Cormorant 60px, line-height 55, ls -5%
   Texto secundario: X=902 (alineado a la derecha del título)
   Padding top de la sección ≈ 160px sobre 1920
   ═══════════════════════════════════════════════════ */
.dt-ns-intro {
  background: var(--dba-cream);
  padding: 4rem 0 !important;
}

.dt-ns-intro__title {
  font-family: "Cormorant Garamond", serif !important;
  font-size: clamp(1.6rem, 3.15vw, 60px) !important;
  font-weight: 300 !important;
  line-height: 0.92 !important;
  color: var(--dba-title) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.05em !important;
  margin: 0 0 3rem !important;
  max-width: 100% !important;
}

.dt-ns-intro__title strong {
  font-weight: 700 !important;
}

.dt-ns-intro__right {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 3rem;
}

.dt-ns-intro__body {
  font-family: "Schibsted Grotesk", sans-serif !important;
  font-size: 0.8rem !important;
  line-height: 1.75 !important;
  color: #2D2F05 !important;
  max-width: 500px !important;
}

.dt-ns-intro__body strong {
  font-weight: 700 !important;
}

@media (min-width: 768px) {
  .dt-ns-intro {
    /* padding izq: 381/1920 = 19.8% */
    padding: 10% 0 !important;
  }

  .dt-ns-intro__title {
    /* ancho: 1177/1920 = 61.3% */
    margin-bottom: 4rem !important;
  }
}

@media (min-width: 1400px) {
  .dt-ns-intro {
    padding: 9rem 0 !important;
  }
}

/* ═══════════════════════════════════════════════════
   3. BIO — 2 columnas
   Figma: foto izq (X=306, W≈836), content der
   La foto no arranca en el borde — tiene margen izq
   Bowl centrado en la parte inferior de col der
   ═══════════════════════════════════════════════════ */
.dt-ns-bio {
  background: var(--dba-cream);
  display: flex !important;
  flex-direction: column !important;
}

.dt-ns-bio__portrait {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  padding: 4%;
}

.dt-ns-bio__portrait img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

.dt-ns-bio__content {
  background: var(--dba-cream);
  padding: 4% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}

.dt-ns-bio__content-top {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
      max-width: 50%;
    align-self: center;
}

.dt-ns-bio__monogram {
  width: 120px !important;
}

.dt-ns-bio__monogram img {
  width: 100% !important;
  display: block !important;
}

.dt-ns-bio__text {
  font-family: "Schibsted Grotesk", sans-serif !important;
  font-size: 0.88rem !important;
  line-height: 1.8 !important;
  color: #2D2F05 !important;
}

.dt-ns-link {
  font-family: "Cutive Mono", monospace !important;
  font-size: 0.78rem !important;
  color: var(--dba-dark) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  letter-spacing: 0.06em !important;
  display: inline-block !important;
}

.dt-ns-bio__detail-img {
  width: 55% !important;
  max-width: 300px !important;
}

.dt-ns-bio__detail-img img {
  width: 100% !important;
  display: block !important;
}

@media (min-width: 768px) {
  .dt-ns-bio {
    flex-direction: row !important;
    align-items: stretch !important;
    min-height: 700px !important;
  }

  /* Foto izq: margen izq = 306/1920 = 15.9% */
  .dt-ns-bio__portrait {
    flex: 0 0 44% !important;
    aspect-ratio: unset !important;
    height: auto !important;
  }

  .dt-ns-bio__content {
    flex: 1 !important;
    gap: 4rem !important;
  }

  .dt-ns-bio__content-top {
    gap: 1.75rem !important;
  }

  .dt-ns-bio__detail-img {
    align-self: end !important;
  }
}

/* ═══════════════════════════════════════════════════
   4. QUOTE FULL-WIDTH
   Figma: fondo oscuro con imagen, texto centrado
   ═══════════════════════════════════════════════════ */
.dt-ns-quote {
  position: relative !important;
  min-height: 480px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dt-ns-quote__bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  z-index: 0 !important;
}

.dt-ns-quote::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(14, 14, 12, 0.42) !important;
  z-index: 1 !important;
}

.dt-ns-quote__text {
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
  padding: 5rem 3rem !important;
  max-width: 820px !important;
}

.dt-ns-quote__text p {
  font-family: "Cormorant Garamond", serif !important;
  font-size: clamp(1.4rem, 3.2vw, 2.6rem) !important;
  font-style: normal !important;
  font-weight: 300 !important;
  color: var(--dba-white) !important;
  line-height: 1.1 !important;
}

.dt-ns-quote__text em {
  font-style: italic !important;
  font-weight: 600 !important;
}

@media (min-width: 768px) {
  .dt-ns-quote { min-height: 580px !important; }
}

/* ═══════════════════════════════════════════════════
   5. TEXT BLOCK
   ═══════════════════════════════════════════════════ */
.dt-ns-text-block {
  background: var(--dba-cream) !important;
  padding: 5rem 1.5rem !important;
}

.dt-ns-text-block__inner {
  max-width: 640px !important;
}

.dt-ns-text-block p {
  font-family: "Schibsted Grotesk", sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.85 !important;
  color: var(--dba-dark) !important;
  margin-bottom: 1.2rem !important;
}

.dt-ns-text-block p:last-child {
  margin-bottom: 0 !important;
}

@media (min-width: 768px) {
  .dt-ns-text-block { padding: 7rem 5rem !important; }
}

/* ═══════════════════════════════════════════════════
   6. ORIGIN — espejo del bio (foto der, texto izq)
   ═══════════════════════════════════════════════════ */
.dt-ns-origin {
  background: var(--dba-cream) !important;
  display: flex !important;
  flex-direction: column !important;
}

.dt-ns-origin__side {
  padding: 3rem 2rem 4rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important;
}

.dt-ns-origin__side-img {
  width: 65% !important;
  max-width: 400px !important;
  overflow: hidden !important;
}

.dt-ns-origin__side-img img {
  width: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

.dt-ns-origin__monogram {
  width: 120px !important;
}

.dt-ns-origin__monogram img {
  width: 100% !important;
  display: block !important;
}

.dt-ns-origin__side-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 3rem !important;
}

.dt-ns-origin__side-text p {
  font-family: "Schibsted Grotesk", sans-serif !important;
  font-size: 0.82rem !important;
  line-height: 1.78 !important;
  color: var(--dba-dark) !important;
  max-width: 320px !important;
}

.dt-ns-origin__side-text strong {
  font-weight: 700 !important;
}

.dt-ns-origin__main {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 3 / 4 !important;
}

.dt-ns-origin__main img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

@media (min-width: 768px) {
  .dt-ns-origin {
    flex-direction: row !important;
    align-items: stretch !important;
    min-height: 700px !important;
  }

  .dt-ns-origin__side {
    flex: 1 !important;
    padding: 5rem 4rem 5rem 5rem !important;
    gap: 0 !important;
    justify-content: flex-start !important;
  }

  .dt-ns-origin__side-img {
    width: 60% !important;
    max-width: 450px !important;
    margin-bottom: 3.5rem !important;
  }

  .dt-ns-origin__monogram {
    margin-bottom: 2.5rem !important;
  }

  .dt-ns-origin__side-text {
    gap: 3.5rem !important;
  }

  /* Foto der: espejo del bio — margen derecho = 16% */
  .dt-ns-origin__main {
    flex: 0 0 44% !important;
    aspect-ratio: unset !important;
    height: auto !important;
    align-self: stretch !important;
    margin-right: 16% !important;
  }
}

/* ═══════════════════════════════════════════════════
   7. SPLIT — dos fotos
   Figma: dos columnas iguales, fotos verticales,
   object-position center center
   ═══════════════════════════════════════════════════ */
.dt-ns-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--dba-gap) !important;
  background: var(--dba-dark) !important;
}

.dt-ns-split__img {
  overflow: hidden !important;
  /* vertical como en Figma */
  aspect-ratio: 3 / 4 !important;
}

.dt-ns-split__img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

@media (max-width: 767px) {
  .dt-ns-split {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 768px) {
  .dt-ns-split__img {
    aspect-ratio: unset !important;
  }
}

/* ═══════════════════════════════════════════════════
   8. SERVICIOS — mismo diseño que home
   Figma: imágenes verticales (3:4), título serif,
   descripción centrada, botón borde
   ═══════════════════════════════════════════════════ */
.dt-ns-services {
  background: var(--dba-cream) !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  padding: 4rem 1.5rem 5rem !important;
}

.dt-ns-service {
  background: var(--dba-cream) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 2rem !important;
}

/* Imágenes VERTICALES como en el home y en el Figma */
.dt-ns-service__img {
  width: 100% !important;
  overflow: hidden !important;
  margin-bottom: 1.75rem !important;
}

.dt-ns-service__img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}


.dt-ns-service__title {
  font-family: "Cormorant Garamond", serif !important;
  font-size: clamp(1rem, 2vw, 1.5rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--dba-title) !important;
  text-align: center !important;
  margin: 0 0 0.85rem !important;
}

.dt-ns-service__desc {
  font-family: "Schibsted Grotesk", sans-serif !important;
  font-size: 0.82rem !important;
  line-height: 1.72 !important;
  color: var(--dba-dark) !important;
  text-align: center !important;
  margin: 0 0 1.75rem !important;
}

.dt-ns-service__btn {
  display: inline-block !important;
  font-family: "Schibsted Grotesk", sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--dba-dark) !important;
  text-decoration: none !important;
  border: 1px solid var(--dba-dark) !important;
  padding: 0.65rem 1.75rem !important;
  transition: background 0.25s ease, color 0.25s ease !important;
}

.dt-ns-service__btn:hover {
  background: var(--dba-dark) !important;
  color: var(--dba-white) !important;
}

@media (max-width: 767px) {
  .dt-ns-services {
    grid-template-columns: 1fr !important;
    padding: 3rem 1.25rem 4rem !important;
    gap: 3rem !important;
  }

  .dt-ns-service { padding: 0 !important; }
}

@media (min-width: 768px) {
  .dt-ns-services {
    padding: 5rem 4rem 6rem !important;
  }

  .dt-ns-service {
    padding: 0 2.5rem !important;
  }
}

@media (min-width: 1200px) {
  .dt-ns-services {
    padding: 6rem 10% 7rem !important;
  }

  .dt-ns-service {
    padding: 0 3.5rem !important;
  }
}