/* ==========================================================================
   Asesoría Legal NP — Estilos personalizados
   Tipografía elegante (Playfair Display + Poppins) y paleta azul marino / dorado
   ========================================================================== */

:root {
  --np-navy: #16233f;
  --np-navy-dark: #0d1626;
  --np-gold: #b08d57;
}

/* ---- Tipografía ---- */
body {
  font-family: 'Poppins', Arial, sans-serif;
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5,
.big, .big-2,
.slider-text h1 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  letter-spacing: .3px;
}

.subheading {
  font-family: 'Poppins', Arial, sans-serif;
  letter-spacing: 3px;
}

.resume-wrap h2,
.services-1 h3,
.ftco-heading-2 {
  font-family: 'Playfair Display', Georgia, serif;
}

/* ---- Marca / Logo en texto ---- */
/* El navbar de esta plantilla nunca tiene fondo claro: es transparente
   sobre la foto del hero, o gris oscuro (#363435) en mobile y al hacer
   scroll. Por eso el logo va siempre en blanco (con sombra para que se
   lea también sobre la foto), nunca en navy. */
.brand-text {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  letter-spacing: .5px;
  display: flex;
  align-items: baseline;
}

.brand-text span {
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 600;
  color: var(--np-gold);
  font-size: 15px;
  letter-spacing: 2px;
  margin-left: 8px;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

/* ---- Hero ---- */
.hero-wrap .text h1 {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

.hero-wrap .slider-text .subheading {
  color: var(--np-gold);
}

.hero-wrap .txt-rotate {
  color: #fff;
}

/* FIX: la plantilla original pinta cualquier <span> dentro de un <h2>
   con el azul de marca (antes celeste, ahora navy). Como el texto
   animado (txt-rotate) también es un <span>, quedaba escrito en
   navy sobre un fondo navy = ilegible. Forzamos blanco y sin subrayado. */
.slider-text h2 .txt-rotate,
.slider-text h2 .txt-rotate .wrap,
.slider-text h2 span.wrap {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Tarjeta translúcida para que el texto del hero se lea siempre,
   sin importar la zona de la foto que quede detrás */
.hero-card {
  background: rgba(13, 22, 41, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: 40px 45px;
  border-radius: 4px;
  border-left: 3px solid var(--np-gold);
}

/* En mobile el recorte "cover" con la imagen alineada a la derecha
   (pensado para el layout de escritorio) deja a Nair fuera de cuadro
   y solo se ve el fondo de la oficina. La reencuadramos para que su
   figura quede visible también en pantallas angostas. */
@media (max-width: 767.98px) {
  .hero-wrap {
    background-position-x: 30% !important;
  }
}
.justice-watermark {
  position: absolute;
  opacity: .10;
  pointer-events: none;
  z-index: 0;
}

.hero-wrap .justice-watermark {
  left: 4%;
  bottom: 6%;
  width: 260px;
}

#bio-section .justice-watermark {
  right: 4%;
  bottom: 2%;
  width: 140px;
  opacity: .08;
}

.hero-wrap .container,
.hero-wrap .text {
  position: relative;
  z-index: 1;
}

/* ---- Botones secundarios con acento dorado ---- */
.btn.btn-primary.btn-outline-primary {
  border: 2px solid var(--np-navy) !important;
  color: var(--np-navy) !important;
}
.btn.btn-primary.btn-outline-primary:hover {
  background: var(--np-navy) !important;
  color: #fff !important;
}