:root{
  --color-primario:#0a7d67;
  --color-secundario:#0c4a43;
  --color-gris:#373a3b;

  --bs-primary: var(--color-primario);
  --bs-success: var(--color-primario);
  --bs-secondary: var(--color-secundario);
  --bs-dark: var(--color-gris);
  --bs-body-color: var(--color-gris);
  --bs-link-color: var(--color-primario);
  --bs-link-hover-color:#075e50;
}

.btn-success{
  --bs-btn-bg: var(--color-primario);
  --bs-btn-border-color: var(--color-primario);
  --bs-btn-hover-bg:#086c58;
  --bs-btn-hover-border-color:#086c58;
}

/*.navbar-brand img{height:48px}*/
.nav-link{font-weight:500}

/* ======= NAV / HEADER ======= */
:root{
  --nav-bg:#f2f6fa;              /* tono claro del header de tu mockup */
  --nav-text:#223644;            /* azul grisáceo del menú */
  --btn-ghost:#789a8a;           /* verde gris del botón "CONTACTO" */
  --btn-ghost-hover:#6b8c7d;
}

.navbar{
  background:var(--nav-bg) !important;
  padding-top:.85rem;
  padding-bottom:.85rem;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.navbar-brand img{
  height:96px !important;        /* tamaño de logo como en principal.jpg */
}
.navbar-nav .nav-link{
  text-transform:uppercase;
  letter-spacing:.12em;          /* tracking del mockup */
  color:var(--nav-text);
  font-weight:600;
  opacity:.9;
  padding:.75rem 1.25rem;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{
  opacity:1;
  color:var(--nav-text);
}

/* ======= HERO ======= */
.hero{
  /* si quitaste el overlay: deja solo la imagen */
  background:url('/assets/hero.jpg') center/cover no-repeat !important;
  min-height:90vh;               /* proporcional al mockup */
  display:flex;
  align-items:center;
  padding-top:1rem;
  padding-bottom:3rem;
}
.hero .title{
  font-weight:800;
  text-transform:uppercase;
  /*line-height:1.1;*/
  letter-spacing:.02em;
  color:#fff;
  text-shadow:0 4px 18px rgba(0,0,0,.35); /* legibilidad sin oscurecer imagen */
  font-size: clamp(28px, 4vw, 40px); /* antes era muy grande */
  line-height: 1.12;
}

.hero .sub{
  text-transform:uppercase;
  font-weight:800;
  font-style:italic;             /* el mockup se siente en itálica */
  color:#eaf3f0;
  text-shadow:0 3px 12px rgba(0,0,0,.35);
}

/* Botones tipo pastilla como en la imagen */
.btn-pill{
  border-radius:999px;
  padding:.8rem 1.4rem;
  font-weight:800;
  letter-spacing:.06em;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}

/* Izquierdo: fondo blanco, texto oscuro */
.btn-cta{
  background:#fff;
  color:#21413b;
  border:0;
}
.btn-cta:hover{ filter:brightness(.96); }

/* Derecho: fondo verde-gris */
.btn-ghost{
  background:var(--btn-ghost);
  color:#fff;
  border:0;
}
.btn-ghost:hover{ background:var(--btn-ghost-hover); }

/* Alineación del bloque del hero a la derecha en pantallas grandes */
@media (min-width: 992px){
  .hero .hero-col{
    margin-left:auto;            /* empuja a la derecha */
    text-align:right;
    padding-right:3.5rem;        /* respiro del borde */
    max-width:52rem;             /* ancho cómodo del copy */
  }
}

/* Footer consistente y texto en blanco */
footer{ background:#0d1f1e; color:#fff; }
footer a{ color:#d6fff5; }
footer .text-muted{ color:#fff !important; }

.navbar-nav .nav-link.active{
  opacity:1;
  position:relative;
}
.navbar-nav .nav-link.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:3px;
  background:var(--color-primario);
  border-radius:2px;
  margin:0 auto;
  width: 80%;
}