html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* El link "sms:" solo sirve en celular — una computadora con mouse no
   tiene ninguna app de mensajes a la que entregárselo. (hover: hover) y
   (pointer: fine) juntos identifican un dispositivo de mouse/trackpad en
   vez de pantalla táctil, sin depender de sniffing de user-agent. */
@media (hover: hover) and (pointer: fine) {
  .sms-link {
    display: none !important;
  }
}

/* ── Paleta de marca: misma paleta por defecto que usa office.documastersfl.com
   (Models/Appearance/ThemeSetting.cs) — navy oscuro + azul primario. ── */
:root {
  --dm-bg: #0a1120;
  --dm-card: #101a2e;
  --dm-surface: #16223b;
  --dm-border: #223252;
  --dm-text: #e7ecf5;
  --dm-muted: #93a2bf;
  --dm-navbar: #0d1526;
  --dm-primary: #3b6df0;
  --dm-primary-text: #ffffff;
}

body {
  margin-bottom: 0;
  background-color: var(--dm-bg);
  color: var(--dm-text);
}

.text-muted {
  color: var(--dm-muted) !important;
}

a {
  color: var(--dm-primary);
}

a:hover {
  color: #6c93f5;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--dm-text);
}

/* ── Header / navegación: fondo blanco, letras negras — el logo
   resalta sobre blanco en vez de necesitar su propio parche. ── */
header.sticky-top {
  background-color: #ffffff !important;
}

.navbar {
  background-color: #ffffff !important;
}

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

.navbar .nav-link:hover {
  color: var(--dm-primary) !important;
}

.navbar .nav-link.btn-primary {
  background-color: var(--dm-primary) !important;
  border-color: var(--dm-primary) !important;
  color: var(--dm-primary-text) !important;
}

/* Botón de Contacto: mismo tamaño de letra que los demás enlaces del
   menú, pero con menos relleno para que no se vea tan grande. */
.nav-contact-btn {
  padding: 0.25rem 0.85rem;
  font-size: inherit;
  line-height: inherit;
}

.navbar-toggler {
  border-color: var(--dm-border);
}

.dropdown-menu {
  background-color: var(--dm-card);
  border-color: var(--dm-border);
}

.dropdown-item {
  color: var(--dm-text);
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--dm-surface);
  color: var(--dm-text);
}

/* ── Botones ── */
.btn-primary {
  background-color: var(--dm-primary);
  border-color: var(--dm-primary);
  color: var(--dm-primary-text);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #2f5bd0;
  border-color: #2f5bd0;
}

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

.btn-outline-primary:hover {
  background-color: var(--dm-primary);
  border-color: var(--dm-primary);
  color: var(--dm-primary-text);
}

.btn-outline-secondary {
  color: var(--dm-muted);
  border-color: var(--dm-border);
}

.btn-outline-secondary:hover {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

/* ── Hero: la imagen de fondo no se desplaza con la página — se queda
   fija en pantalla mientras el contenido de abajo "sube" y la va
   tapando al hacer scroll (efecto parallax clásico). background-attachment:
   fixed no funciona bien en algunos navegadores móviles antiguos — ahí
   simplemente se comporta como una imagen normal que sí hace scroll,
   sin romper nada. */
.hero {
  position: relative;
  color: #fff;
  min-height: 480px;
  background-image: linear-gradient(rgba(10, 17, 32, 0.55), rgba(10, 17, 32, 0.55)), url('/images/hero.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.hero .hero-text {
  position: relative;
  width: 100%;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem;
  animation: hero-fade-in 1.1s ease-out;
}

@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Tarjetas de servicio ── */
.service-card {
  background-color: var(--dm-card);
  border: 1px solid var(--dm-border);
  border-radius: 0.5rem;
  padding: 1.5rem;
  height: 100%;
  transition: box-shadow 0.15s ease-in-out;
}

.service-card:hover {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
}

.service-card .text-muted {
  color: var(--dm-muted) !important;
}

/* ── Tablas (paquetes de Matrimonios) ── */
.table {
  color: var(--dm-text);
  border-color: var(--dm-border);
}

.table > :not(caption) > * > * {
  background-color: var(--dm-card);
  color: var(--dm-text);
  border-bottom-color: var(--dm-border);
  box-shadow: none;
}

.table thead th {
  background-color: var(--dm-surface);
  border-bottom-color: var(--dm-border);
}

/* ── Modales de detalle de paquete ── */
.modal-content {
  background-color: var(--dm-card);
  color: var(--dm-text);
  border: 1px solid var(--dm-border);
}

.modal-header, .modal-footer {
  border-color: var(--dm-border);
}

.modal .btn-close {
  filter: invert(1) grayscale(100%) brightness(2);
}

/* ── FAQ / listas de definición ── */
.faq dt {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--dm-text);
}

.faq dd {
  color: var(--dm-muted);
}

/* ── Citas (Política de SMS) ── */
blockquote {
  background-color: var(--dm-surface);
  border-left: 3px solid var(--dm-primary) !important;
}

/* ── Footer: mismo color que los cajones de servicio. ── */
.site-footer {
  background-color: var(--dm-card);
  border-color: var(--dm-border) !important;
  color: var(--dm-muted);
}

.site-footer h6 {
  color: var(--dm-text);
}

.site-footer a {
  color: var(--dm-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--dm-primary);
  text-decoration: underline;
}