/*
 * brand.css — MZ PREVENCIÓN
 * Cargar DESPUÉS de material-kit-pro.min.css
 * No modificar material-kit-pro.min.css directamente.
 */

/* =============================================
   1. CUSTOM PROPERTIES (tokens de marca)
   ============================================= */
:root {
  --mz-primary:           #1C2B8C;
  --mz-primary-dark:      #121B5C;
  --mz-primary-mid:       #3D52C8;
  --mz-primary-light:     #6B80D4;
  --mz-secondary:         #8090C8;
  --mz-light-bg:          #F0F3FF;
  --mz-text-dark:         #0F1A5C;
  --mz-gradient:          linear-gradient(195deg, #3D52C8 0%, #1C2B8C 100%);
  --mz-gradient-shadow:   rgba(28, 43, 140, 0.4);

  /* Sobrescribir variables de Bootstrap 5 / MK Pro 3 */
  --bs-primary:           #1C2B8C;
  --bs-primary-rgb:       28, 43, 140;
  --bs-primary-text-emphasis: #0F1A5C;
  --bs-primary-bg-subtle: #D6DBFF;
  --bs-primary-border-subtle: #9AAFF0;
}

/* =============================================
   2. GRADIENTE PRINCIPAL (hero, navbar, cards)
   ============================================= */
.bg-gradient-primary {
  background-image: var(--mz-gradient) !important;
  box-shadow:
    0 2px 2px 0   rgba(28, 43, 140, .10),
    0 3px 1px -2px rgba(28, 43, 140, .18),
    0 1px 5px 0   rgba(28, 43, 140, .15);
}

.bg-gradient-primary:hover {
  background-color: var(--mz-primary) !important;
  border-color:     var(--mz-primary) !important;
  box-shadow:
    0 8px 14px -8px rgba(28, 43, 140, .30),
    0 3px 18px 0    rgba(28, 43, 140, .10),
    0 7px 8px -4px  rgba(28, 43, 140, .18);
}

/* =============================================
   3. BOTONES
   ============================================= */
.btn-primary,
.btn.bg-gradient-primary {
  background-image: var(--mz-gradient);
  background-color: var(--mz-primary);
  border-color:     var(--mz-primary);
  box-shadow:
    0 4px 7px -1px rgba(28, 43, 140, .11),
    0 2px 4px -1px  rgba(28, 43, 140, .07);
}

.btn-primary:hover,
.btn.bg-gradient-primary:hover {
  background-color: var(--mz-primary-mid);
  border-color:     var(--mz-primary-mid);
  box-shadow:
    0 8px 14px -8px rgba(28, 43, 140, .30),
    0 3px 18px 0    rgba(28, 43, 140, .10);
}

.btn-primary:focus,
.btn.bg-gradient-primary:focus,
.btn-primary:active,
.btn.bg-gradient-primary:active {
  background-color: var(--mz-primary-dark) !important;
  border-color:     var(--mz-primary-dark) !important;
}

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

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

/* Botones CTA (Contactanos / Solicitar información) — más grandes y con efecto de despegue (prueba) */
.btn-cta {
  padding: 0.9rem 2.2rem;
  font-size: 1.05rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-cta:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 32px -10px rgba(0, 0, 0, .4);
}

/* =============================================
   4. LINKS Y TEXTO
   ============================================= */
a {
  color: var(--mz-primary);
}
a:hover {
  color: var(--mz-primary-mid);
}

.text-primary {
  color: var(--mz-primary) !important;
}

.text-gradient.text-primary,
.text-gradient {
  background-image: var(--mz-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =============================================
   5. NAVBAR
   ============================================= */
.navbar.bg-gradient-primary,
.navbar-main.bg-gradient-primary {
  background-image: var(--mz-gradient) !important;
}

/* Navbar blur / transparente que se vuelve de color al hacer scroll */
.navbar.navbar-scroll.headroom--not-top,
.navbar.navbar-scroll.headroom--pinned {
  background-color: var(--mz-primary) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--mz-primary-light) !important;
}

/* Hamburguesa mobile — barras blancas */
.navbar-toggler-bar {
  background-color: #fff !important;
}

/* Dropdown activo */
.navbar .nav-item.active > .nav-link,
.navbar .nav-link.active {
  color: var(--mz-primary-light) !important;
}

/* =============================================
   6. FOOTER
   ============================================= */
footer.bg-gradient-dark,
.footer.bg-gradient-dark,
footer.bg-dark,
.footer.bg-dark {
  background-image: linear-gradient(195deg, #1C2B8C 0%, #0F1A5C 100%) !important;
}

/* =============================================
   7. CARDS
   ============================================= */
.card .card-header.bg-gradient-primary {
  background-image: var(--mz-gradient) !important;
}

/* Card hover border */
.card:hover {
  border-color: var(--mz-primary-light);
}

/* Icon boxes */
.icon-shape.bg-gradient-primary,
.icon.bg-gradient-primary {
  background-image: var(--mz-gradient) !important;
}

/* =============================================
   8. BADGES
   ============================================= */
.badge.bg-primary,
.badge.bg-gradient-primary {
  background-image: var(--mz-gradient) !important;
  background-color: var(--mz-primary) !important;
}

/* =============================================
   9. FORMULARIOS
   ============================================= */
.form-control:focus,
.form-select:focus {
  border-color:  var(--mz-primary-light);
  box-shadow:    0 0 0 0.2rem rgba(28, 43, 140, .15);
}

/* =============================================
   10. SECCIONES ALTERNAS (fondo claro de marca)
   ============================================= */
.section-mz-light {
  background-color: var(--mz-light-bg);
}

/* =============================================
   11. SCROLLBAR Y UTILIDADES
   ============================================= */
::selection {
  background-color: var(--mz-primary-light);
  color: #fff;
}

/* WhatsApp floating button */
.float-whatsapp {
  position: fixed;
  width: 52px;
  height: 52px;
  bottom: 30px;
  right: 30px;
  background-color: #25d366;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  z-index: 9998;
  transition: background-color 0.2s ease;
}

.float-whatsapp:hover {
  background-color: #1ab152;
  color: #ffffff;
  text-decoration: none;
  animation: washake 0.8s infinite;
}

.float-whatsapp i {
  font-size: 26px;
  color: #ffffff;
  line-height: 1;
}

@keyframes washake {
  0%, 100% { transform: rotate(0deg); }
  20%       { transform: rotate(-12deg); }
  40%       { transform: rotate(12deg); }
  60%       { transform: rotate(-8deg); }
  80%       { transform: rotate(8deg); }
}

/* =============================================
   12. FOOTER — ICONOS REDES SOCIALES
   ============================================= */
footer .btn-icon {
  width: 2.75rem !important;
  height: 2.75rem !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

footer .btn-icon i {
  font-size: 1.6rem !important;
  line-height: 1;
}

/* =============================================
   13. NAVBAR — BOTONES EMAIL / TELÉFONO
   ============================================= */
.navbar .btn-outline-white i {
  font-size: 0.85rem;
}

/* =============================================
   14. NAVBAR — DROPDOWN MOBILE (texto blanco)
   ============================================= */
@media (max-width: 991.98px) {
  .navbar .dropdown-menu .dropdown-item {
    color: #fff !important;
  }
}

/* =============================================
   15. NUESTROS SERVICIOS — 5 CARDS POR FILA (desktop)
   ============================================= */
@media (min-width: 992px) {
  .servicios-grid-5 > .servicios-grid-5-col {
    flex: 0 0 20%;
    max-width: 20%;
  }

  /* Achicar título para que palabras largas (ej. "Autoprotección") no se corten */
  .servicios-grid-5-col .card h3 {
    font-size: 1.25rem;
    line-height: 1.3;
  }
}

/* Si aun así el título necesita partirse, que sea por sílaba y no a mitad de letra */
.servicios-grid-5-col .card h3 {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

/* =============================================
   16. HERO — OVERLAY OSCURO (prueba)
   Referencia: overlay neutro oscuro (no azul de marca),
   más opaco para dar contraste al texto blanco.
   Ajustar aquí el tono/opacidad para todas las heros que lo usen.
   ============================================= */
.mask-hero-dark {
  background-color: #0A0A0A;
  opacity: .6;
}

/* =============================================
   16b. HERO — RESPIRO EN PANTALLAS GRANDES (prueba)
   En resoluciones anchas el título/texto queda muy pegado
   al navbar y al borde inferior del hero. El page-header
   centra verticalmente (align-items: center), así que un
   padding simétrico arriba/abajo del container agranda el
   "aire" sin romper el centrado.
   ============================================= */
@media (min-width: 1400px) {
  .page-header .container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1800px) {
  .page-header .container {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* Scroll to top */
.scroll-to-top {
  position: fixed;
  bottom: 5.5rem;
  right: 2rem;
  z-index: 9998;
  background-image: var(--mz-gradient);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(28,43,140,.3);
  transition: transform .2s;
}
.scroll-to-top.visible {
  display: flex;
}
.scroll-to-top:hover {
  transform: scale(1.1);
}