/* =====================================================
   B&P CONSULTORES
   Identidad visual institucional
   Territorio | Datos | Gestión
===================================================== */

/* -------------------------
   VARIABLES
------------------------- */

:root {
  --azul-profundo: #0a253e;
  --azul-institucional: #1b3851;

  --verde-territorial: #5a8152;
  --verde-bosque: #2c563e;
  --verde-oliva: #6a893b;

  --gris-texto: #495869;
  --gris-claro: #dee2e0;

  --fondo: #f7f8f5;
  --blanco: #ffffff;
}

/* -------------------------
   RESET GENERAL
------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", sans-serif;
  color: var(--gris-texto);
  background: var(--fondo);
  line-height: 1.6;
}

h1,
h2 {
  font-family: "Libre Baskerville", serif;
  color: var(--azul-profundo);
}

h2 {
  font-size: 2.2rem;
  margin-bottom: 30px;
}

p {
  font-size: 1rem;
}

/* -------------------------
   HERO
------------------------- */

.hero {
  min-height: 90vh;
  position: relative;
  overflow: hidden;

  background: linear-gradient(
    120deg,
    rgba(10, 37, 62, 0.96),
    rgba(27, 56, 81, 0.9)
  );

  color: white;
}

.topographic {
  position: absolute;
  inset: 0;

  opacity: 0.12;

  background-image: repeating-radial-gradient(
    circle at 30% 40%,
    transparent 0,
    transparent 45px,
    rgba(255, 255, 255, 0.5) 47px,
    transparent 50px
  );
}

/* NAV */

.navbar {
  width: 90%;
  max-width: 1200px;

  margin: auto;

  padding: 40px 0;

  position: relative;
  z-index: 2;
}

.logo {
  width: 280px;
  max-width: 80%;
}

/* CONTENIDO HERO */

.hero-content {
  position: relative;

  z-index: 2;

  width: 90%;
  max-width: 1200px;

  margin: auto;

  padding-top: 50px;
}

.hero h1 {
  color: white;

  font-size: 3.1rem;

  line-height: 1.25;

  max-width: 850px;
}

.hero p {
  margin-top: 30px;

  max-width: 720px;

  font-size: 1.15rem;

  font-weight: 300;

  color: #f1f4f2;
}

/* BOTONES */

.buttons {
  display: flex;

  gap: 20px;

  margin-top: 40px;
}

.btn {
  padding: 14px 32px;

  border-radius: 40px;

  text-decoration: none;

  font-weight: 600;

  transition: 0.3s;
}

.primary {
  background: var(--verde-territorial);

  color: white;
}

.primary:hover {
  background: var(--verde-bosque);
}

.secondary {
  border: 1px solid rgba(255, 255, 255, 0.5);

  color: white;
}

.secondary:hover {
  background: white;

  color: var(--azul-profundo);
}

/* -------------------------
   ABOUT
------------------------- */

.about {
  max-width: 1000px;

  margin: auto;

  padding: 90px 20px;

  text-align: center;
}

.about h2 {
  color: var(--azul-profundo);
}

.about p {
  font-size: 1.15rem;
}

/* -------------------------
   SERVICIOS
------------------------- */

.services {
  padding: 90px 5%;

  background: white;

  text-align: center;
}

.cards {
  max-width: 1200px;

  margin: auto;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 25px;
}

.card {
  background: var(--fondo);

  border-radius: 18px;

  padding: 35px 25px;

  text-align: left;

  border-top: 4px solid var(--verde-territorial);

  transition: 0.3s;
}

.card:hover {
  transform: translateY(-8px);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.card h3 {
  color: var(--azul-profundo);

  margin-bottom: 15px;

  font-size: 1.3rem;
}

.card p {
  font-size: 0.95rem;
}

/* -------------------------
   CONSTRUCCION
------------------------- */

.construction {
  padding: 90px 20px;

  background: linear-gradient(135deg, #eef2ee, #ffffff);

  text-align: center;
}

.construction-box {
  max-width: 700px;

  margin: auto;

  padding: 45px;

  background: white;

  border-radius: 20px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.construction-box h2 {
  margin-bottom: 20px;
}

.construction-box a {
  display: inline-block;

  margin-top: 20px;

  color: var(--verde-bosque);

  font-weight: 600;

  text-decoration: none;
}

/* -------------------------
   FOOTER
------------------------- */

footer {
  background: var(--azul-profundo);

  color: white;

  padding: 35px;

  text-align: center;

  font-size: 0.9rem;
}

footer p {
  margin: 5px;
}

/* -------------------------
   RESPONSIVE
------------------------- */

@media (max-width: 900px) {
  .hero h1 {
    font-size: 2.2rem;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .buttons {
    flex-direction: column;
  }

  .btn {
    text-align: center;
  }

  .logo {
    width: 220px;
  }
}

@media (max-width: 500px) {
  .hero-content {
    padding-top: 20px;
  }

  .hero p {
    font-size: 1rem;
  }
}