/* ===========================
   Securclass - custom.css
   Marrón oscuro + Arena
   =========================== */

/* ====== PALETA ====== */
:root{
  --body-bg: #2c1e16;          /* fondo marrón oscuro */
  --card-bg: #cbb79c;          /* arena claro */
  --card-bg-soft: #d8c7af;     /* arena un poco más claro */
  --text: #f4ede6;             /* texto crema */
  --text-dark: #2c1e16;        /* texto dentro de tarjetas */
  --muted: #e6d8c7;

  --primary: #a68a64;          /* acento marrón elegante */
  --primary-dark: #8f744f;
  --border-soft: rgba(0,0,0,.15);
  --shadow: 0 15px 35px rgba(0,0,0,.25);
}

/* ====== FONDO GLOBAL ====== */
html, body{
  background: var(--body-bg) !important;
  color: var(--text) !important;
}

/* Evita fondos blancos heredados */
.container,
.container-fluid{
  background: transparent !important;
}

/* ====== TIPOGRAFÍA ====== */
p{ color: var(--text); }
.text-muted{ color: var(--muted) !important; }

/* Eliminar naranja completamente */
.text-primary{
  color: inherit !important;
}

/* ====== NAVBAR ====== */
.navbar.bg-dark{
  background-color: #1f140f !important;
}

.navbar-dark .navbar-nav .nav-link{
  color: #e6d8c7 !important;
}

.navbar-dark .navbar-nav .nav-link.active{
  color: #ffffff !important;
}

/* ====== TARJETAS PRINCIPALES ====== */
#about .container,
#service .container,
#team .container,
#contact .container{
  background: var(--card-bg) !important;
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 50px 40px;
  color: var(--text-dark) !important;
}

/* Textos dentro de tarjetas */
#about h1, #about h2, #about h3,
#service h1, #service h2, #service h3,
#team h1, #team h2, #team h3,
#contact h1, #contact h2, #contact h3{
  color: var(--text-dark) !important;
}

#about p,
#service p,
#team p,
#contact p{
  color: #3d2b20 !important;
}

/* ====== BLOQUES INTERNOS ====== */
.bg-secondary{
  background: var(--card-bg-soft) !important;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  color: var(--text-dark) !important;
}

/* ====== BOTONES ====== */
.btn-primary{
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.btn-primary:hover{
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

.btn-outline-primary{
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-outline-primary:hover{
  background-color: var(--primary) !important;
  color: #fff !important;
}

/* Flechas carrusel */
.bg-primary{
  background-color: var(--primary) !important;
}

/* ====== FOOTER ====== */
.container-fluid.bg-dark{
  background-color: #1a120d !important;
}

.container-fluid.bg-dark a{
  color: #d8c7af !important;
}

.container-fluid.bg-dark a:hover{
  color: #ffffff !important;
}

/* ====== SCROLL ICON ====== */
.scroll-to-bottom{
  opacity: .9;
}