/* ============================================================
   BL CONSULTORES SpA — Hoja de estilos
   Paleta principal: Prussian Blue #0A3656 · Acento dorado #C9A97C
   ============================================================ */

:root {
  --azul:          #0A3656;  /* color principal */
  --azul-profundo: #072840;  /* profundidad / footer */
  --azul-borde:    #14496f;  /* bordes sutiles sobre azul */
  --dorado:        #C9A97C;  /* títulos y acentos */
  --dorado-claro:  #E0CBAA;  /* hover / hairlines */
  --blanco:        #FFFFFF;  /* texto principal */
  --gris-claro:    #C7D0D8;  /* texto secundario */
  --gris-suave:    #EEF1F4;  /* fondos claros secundarios */
  --nav-h:         76px;     /* alto de la barra fija */
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h); /* compensa la navbar fija al saltar a secciones */
}

body {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  color: var(--blanco);
  background-color: var(--azul);
  line-height: 1.7;
  letter-spacing: .2px;
  overflow-x: hidden;
}

/* ---------- Tipografía de títulos ---------- */
.titulo-display {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .5px;
}
.titulo-seccion {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  color: var(--dorado);
  font-size: clamp(2rem, 4vw, 2.9rem);
  letter-spacing: .5px;
  margin-bottom: .25rem;
}
.eyebrow {
  font-size: .82rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dorado);
  font-weight: 400;
}
/* Filete dorado decorativo bajo los encabezados de sección */
.filete {
  width: 64px;
  height: 2px;
  background: var(--dorado);
  border: 0;
  opacity: 1;
  margin: 1rem 0 1.75rem;
}
.filete.centrado { margin-left: auto; margin-right: auto; }

.texto-secundario { color: var(--gris-claro); }

/* Ritmo vertical uniforme de las secciones */
.seccion { padding: clamp(4.5rem, 9vh, 7rem) 0; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  min-height: var(--nav-h);
  background: rgba(7, 40, 64, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(201, 169, 124, .18);
  transition: background .35s ease, box-shadow .35s ease;
}
.navbar.scrolled {
  background: rgba(7, 40, 64, .98);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
/* Logo levemente separado del borde izquierdo (aprox. inset solicitado) */
.navbar .navbar-brand { margin-left: clamp(0px, 4vw, 60px); }
.navbar-brand { display: flex; align-items: center; gap: .7rem; }
/* Cuadro con las iniciales 'BL' en blanco y borde dorado */
.logo-cuadro {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 44px;
  border: 1.5px solid var(--dorado);
  border-radius: 9px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600; font-size: 1.35rem; letter-spacing: .5px;
  color: var(--blanco);
}
.navbar-brand .marca {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--dorado);
  line-height: 1;
}
.navbar-brand .rubro {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: .62rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gris-claro);
  margin-top: 2px;
}

.navbar .nav-link {
  color: var(--gris-claro);
  font-size: .82rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 400;
  padding: .5rem 0;
  margin: 0 1.1rem;
  position: relative;
  transition: color .25s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: var(--blanco); }

/* Indicador dorado bajo la opción activa */
.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--dorado);
  transition: width .3s ease;
}
.navbar .nav-link:hover::after { width: 100%; }
.navbar .nav-link.active { color: var(--blanco); }
.navbar .nav-link.active::after { width: 100%; }

.navbar-toggler {
  border-color: rgba(201, 169, 124, .5);
  padding: .35rem .55rem;
}
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(201, 169, 124, .35); }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23C9A97C' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============================================================
   HERO / HOME
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
/* Imagen de fondo (placeholder SVG). Para foto real, reemplazar el
   bloque .hero__bg por:  background:url('assets/hero.jpg') center/cover; */
.hero__bg {
  position: absolute; inset: -4%;
  z-index: 0;
  filter: blur(4px);          /* efecto difuminado solicitado */
  transform: scale(1.06);     /* evita bordes visibles por el blur */
}
.hero__bg svg { width: 100%; height: 100%; display: block; }
/* Overlay semitransparente en color corporativo #0A3656 */
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(7,40,64,.55) 0%, rgba(10,54,86,.82) 60%, rgba(7,40,64,.94) 100%);
}
.hero__contenido { position: relative; z-index: 2; padding: 2rem 1.25rem; }
.hero .bienvenida {
  color: var(--dorado);
  font-size: clamp(3rem, 8vw, 6rem);
  margin-bottom: .5rem;
}
.hero .empresa {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  color: var(--blanco);
  font-size: clamp(1.1rem, 3vw, 1.9rem);
  letter-spacing: clamp(2px, 1.2vw, 8px);
  text-transform: uppercase;
}
.hero .lema {
  color: var(--gris-claro);
  max-width: 46ch;
  margin: 1.5rem auto 2rem;
  font-size: 1.02rem;
}
.hero .btn-hero {
  --bs-btn-padding-y: .8rem; --bs-btn-padding-x: 2.2rem;
}
/* Indicador de scroll */
.hero__scroll {
  position: absolute; bottom: 26px; left: 50%; z-index: 2;
  transform: translateX(-50%);
  color: var(--dorado);
  font-size: 1.4rem;
  animation: flotar 2s ease-in-out infinite;
}
@keyframes flotar { 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

/* ============================================================
   BOTONES
   ============================================================ */
.btn-dorado {
  --bs-btn-color: var(--azul-profundo);
  --bs-btn-bg: var(--dorado);
  --bs-btn-border-color: var(--dorado);
  --bs-btn-hover-color: var(--azul-profundo);
  --bs-btn-hover-bg: var(--dorado-claro);
  --bs-btn-hover-border-color: var(--dorado-claro);
  --bs-btn-active-bg: var(--dorado-claro);
  --bs-btn-focus-shadow-rgb: 201,169,124;
  font-weight: 500; letter-spacing: 1px;
  border-radius: 2px;
}
.btn-contorno-dorado {
  --bs-btn-color: var(--dorado);
  --bs-btn-border-color: var(--dorado);
  --bs-btn-hover-color: var(--azul-profundo);
  --bs-btn-hover-bg: var(--dorado);
  --bs-btn-hover-border-color: var(--dorado);
  --bs-btn-focus-shadow-rgb: 201,169,124;
  letter-spacing: 1px;
  border-radius: 2px;
}

/* ============================================================
   CONÓCENOS
   ============================================================ */
#conocenos { background: var(--azul); }
.conocenos__texto p { color: var(--gris-claro); }
.conocenos__destacado {
  color: var(--blanco);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 400;
  font-style: italic;
}
.conocenos__stats { gap: 2.5rem; margin-top: 2.25rem; }
.stat .numero {
  font-family: 'Cormorant Garamond', serif;
  color: var(--dorado);
  font-size: 2.6rem; font-weight: 600; line-height: 1;
}
.stat .etiqueta {
  font-size: .78rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gris-claro);
}

/* Dos imágenes superpuestas — la altura sigue a la columna de texto */
.composicion {
  position: relative;
  height: 100%;            /* iguala la altura de la columna de texto (fila con align-items-stretch) */
  min-height: 380px;       /* piso cuando el texto es corto o en móvil */
}
.composicion__img {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 28px 60px rgba(0, 0, 0, .45);
  border: 1px solid rgba(201, 169, 124, .25);
}
/* object-fit: cover recorta el retrato al marco en vez de estirarlo a lo alto */
.composicion__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.composicion__img--principal {
  position: relative; z-index: 2;
  width: 80%; height: 100%;
  margin-left: auto;       /* alinea la imagen grande a la derecha */
}
.composicion__img--secundaria {
  position: absolute; z-index: 3;
  width: 46%; height: 55%;
  left: 0; bottom: 26px;   /* superpuesta abajo a la izquierda */
}
/* Desenfoque decorativo detrás de la composición */
.composicion::before {
  content: "";
  position: absolute; z-index: 1;
  width: 220px; height: 220px;
  right: -10px; top: -28px;
  background: radial-gradient(circle, rgba(201,169,124,.35), transparent 70%);
  filter: blur(30px);
}

/* ============================================================
   SERVICIOS
   ============================================================ */
#servicios { background: var(--azul-profundo); }
.servicio {
  height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border: 1px solid rgba(201, 169, 124, .18);
  border-radius: 6px;
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
/* Acento dorado superior que crece en hover */
.servicio::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--dorado);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease;
}
.servicio:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 169, 124, .5);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .35);
}
.servicio:hover::before { transform: scaleX(1); }
.servicio__icono {
  font-size: 2.6rem;
  color: var(--dorado);          /* íconos en dorado */
  margin-bottom: 1.1rem;
  display: inline-block;
}
.servicio__titulo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem; font-weight: 500;
  color: var(--blanco);
  margin-bottom: .75rem;
}
.servicio p { color: var(--gris-claro); margin-bottom: 0; font-size: .96rem; }

/* ============================================================
   CONTACTO
   ============================================================ */
#contacto { background: var(--azul); }
.form-contacto {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(201, 169, 124, .18);
  border-radius: 8px;
  padding: clamp(1.75rem, 4vw, 3rem);
}
.form-contacto .form-label {
  color: var(--gris-claro);
  font-size: .82rem; letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: .4rem;
}
.form-contacto .form-control {
  background: rgba(7, 40, 64, .6);
  border: 1px solid var(--azul-borde);
  color: var(--blanco);
  border-radius: 3px;
  padding: .7rem .9rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.form-contacto .form-control::placeholder { color: rgba(199, 208, 216, .5); }
.form-contacto .form-control:focus {
  background: rgba(7, 40, 64, .85);
  border-color: var(--dorado);
  box-shadow: 0 0 0 .18rem rgba(201, 169, 124, .22);
  color: var(--blanco);
}
.form-contacto textarea.form-control { resize: vertical; min-height: 130px; }
.contador {
  font-size: .8rem; color: var(--gris-claro); margin-top: .35rem;
  text-align: right;
}
.contador.alerta { color: #f0b37e; }
/* Colores de validación de Bootstrap adaptados al fondo oscuro */
.form-contacto .invalid-feedback { color: #f2a08a; font-size: .8rem; }
.form-contacto .form-control.is-valid { border-color: rgba(201,169,124,.7); background-image:none; }
.form-contacto .form-control.is-invalid { border-color: #d9765a; background-image:none; }

/* Aviso de respuesta del formulario */
.aviso-form {
  border-radius: 4px; padding: .9rem 1.1rem; font-size: .95rem;
  display: none; align-items: center; gap: .6rem;
}
.aviso-form.ok { display:flex; background: rgba(201,169,124,.15); border:1px solid var(--dorado); color: var(--dorado-claro); }
.aviso-form.error { display:flex; background: rgba(217,118,90,.14); border:1px solid #d9765a; color:#f2a08a; }

.contacto__dato { color: var(--gris-claro); }
.contacto__dato i { color: var(--dorado); width: 1.6rem; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--azul-profundo);
  border-top: 1px solid rgba(201, 169, 124, .18);
  padding: 2rem 0;
  color: var(--gris-claro);
  font-size: .9rem;
}
footer .marca-footer { font-family:'Cormorant Garamond',serif; color:var(--blanco); font-size:1.2rem; }
footer .marca-footer span { color: var(--dorado); }

/* ============================================================
   BOTÓN VOLVER ARRIBA
   ============================================================ */
.volver-arriba {
  position: fixed; right: 24px; bottom: 24px; z-index: 1030;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--dorado); color: var(--azul-profundo);
  border: 0; border-radius: 50%;
  font-size: 1.3rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background .25s ease;
}
.volver-arriba.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.volver-arriba:hover { background: var(--dorado-claro); }
.volver-arriba:focus-visible { outline: 3px solid rgba(201,169,124,.5); outline-offset: 2px; }

/* ============================================================
   ANIMACIONES (Fade In / Fade Up)  ·  Scroll Reveal
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.fade-in { transform: translateY(0); } /* solo opacidad */
.reveal.is-visible { opacity: 1; transform: translateY(0); }
/* Retardos escalonados */
.delay-1 { transition-delay: .12s; }
.delay-2 { transition-delay: .24s; }
.delay-3 { transition-delay: .36s; }

/* Entrada del hero al cargar */
.hero .anim { opacity: 0; transform: translateY(24px); }
.hero.cargado .anim { opacity: 1; transform: translateY(0); transition: opacity 1s ease, transform 1s ease; }
.hero.cargado .d1 { transition-delay: .2s; }
.hero.cargado .d2 { transition-delay: .5s; }
.hero.cargado .d3 { transition-delay: .8s; }
.hero.cargado .d4 { transition-delay: 1.15s; }

/* Foco visible accesible en enlaces */
a:focus-visible, .btn:focus-visible { outline: 3px solid rgba(201,169,124,.5); outline-offset: 2px; }

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .hero .anim, .hero__scroll, .servicio, .volver-arriba { transition: none !important; animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero .anim { opacity: 1 !important; transform: none !important; }
}

/* ---------- Ajustes responsive ---------- */
@media (max-width: 991.98px) {
  .navbar { background: rgba(7,40,64,.98); }
  .navbar-collapse { padding-top: .75rem; }
  .navbar .nav-link { margin: .25rem 0; }
  .navbar .nav-link::after { display: none; }
  .navbar .nav-link.active { color: var(--dorado); }
}
@media (max-width: 767.98px) {
  /* En móvil se muestra UNA sola imagen (sin superposición) */
  .composicion { min-height: 0; margin-top: 1rem; }
  .composicion__img--principal { position: static; width: 100%; height: auto; margin: 0; }
  .composicion__img--principal img { height: auto; aspect-ratio: 4 / 3; }
  .composicion__img--secundaria { display: none; }
  .conocenos__stats { gap: 1.75rem; }
}