/* =========================================================
NOTA: COLORES CORPORATIVOS PERSONALIZADOS
========================================================= */
:root {
  --brand: #e4121c;   /* Color rojo principal */
  --brand-dark: #b20d15; /* Rojo más oscuro para hover/active */
  --dark: #212529;    /* Texto negro por defecto */
  --muted: #6c757d;

  /* Sobrescribir Bootstrap */
  --bs-primary: var(--brand);
  --bs-body-color: var(--dark);
}

html { scroll-behavior: smooth; }

body {
  color: var(--dark);
  padding-top: 80px; /* ajusta según la altura de tu navbar */
}
/* Ocultar inicialmente los elementos que deben revelarse */
.reveal-hidden {
  opacity: 0;
}

/* =========================================================
NOTA: LINKS
========================================================= */
a,
a:focus,
a:active {
  text-decoration: none !important;
}
a {
  color: var(--brand);
}
a:hover {
  color: var(--brand-dark);
}

/* =========================================================
NOTA: BOTONES
========================================================= */
.btn-primary {
  background-color: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
}
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle,
.btn-primary:focus {
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  box-shadow: 0 0 0 0.25rem rgba(228, 18, 28, 0.4);
}
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  opacity: 0.65;
}

.btn-outline-primary {
  color: var(--brand);
  border-color: var(--brand);
}
.btn-outline-primary:hover {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle,
.btn-outline-primary:focus {
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.25rem rgba(228, 18, 28, 0.4);
}

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

/* Textos destacados */
.text-primary {
  color: var(--brand) !important;
}

/* =========================================================
NOTA: SECCIONES
========================================================= */
.hero {
  min-height: 70vh;
  background-image: url("/assets/img/portada.jpg");
  background-size: cover;
  background-position: center;
  padding: 4rem 0;
}

.list-checked {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1rem 0;
}
.list-checked li {
  position: relative;
  padding-left: 28px;
  margin-bottom: .4rem;
}
.list-checked li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--brand);
  font-weight: 700;
}

.service-card .card-title {
  color: var(--dark);
}

.cta-box {
  background: #eef5ff;
  border: 1px solid rgba(13,110,253,.15);
}

.testimonial,
.counter {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
}

footer .nav-link {
  font-size: .95rem;
}

/* =========================================================
NOTA: ANIMACIONES (fadeIn en JS)
========================================================= */
/* Los elementos con .reveal-on-scroll se ocultan en JS y 
   aparecen con fadeIn al entrar en viewport */