/* MENU MOVIL — panel negro con acentos dorados (legible sobre la variante clara del sitio)
   Se carga DESPUES de main.css y variant.css, por eso usa !important. */
@media (max-width: 960px) {
  .site-header .nav-menu {
    top: 84px !important;
    height: calc(100vh - 84px) !important;
    height: calc(100dvh - 84px) !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 1.25rem 1.75rem 2rem !important;
    background: linear-gradient(180deg, #0b0809 0%, #130d10 100%) !important;
    border-top: 1px solid #c8a45c !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    overflow-y: auto;
  }
  .site-header .nav-menu li {
    width: 100%;
    border-bottom: 1px solid rgba(200, 164, 92, 0.28);
  }
  .site-header .nav-menu li:last-child { border-bottom: 0; }
  .site-header .nav-menu .nav-link {
    display: block;
    width: 100%;
    padding: 1.15rem 0.25rem !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.16em !important;
    color: #f4ecda !important;
    -webkit-text-fill-color: #f4ecda;
    opacity: 1 !important;
    text-shadow: none;
  }
  .site-header .nav-menu .nav-link:hover,
  .site-header .nav-menu .nav-link:focus-visible,
  .site-header .nav-menu .nav-link.active {
    color: #e3c47e !important;
    -webkit-text-fill-color: #e3c47e;
    text-shadow: 0 0 14px rgba(227, 196, 126, 0.35);
  }
  .site-header .nav-menu .nav-link.active { font-weight: 700 !important; }
  .site-header .nav-menu .nav-link.active::after {
    left: 0.25rem; transform: none;
    bottom: 0.55rem; width: 28px; height: 2px;
    background: linear-gradient(90deg, #e3c47e, #a67c2e) !important;
  }
}
@media (max-width: 700px) {
  .site-header .nav-menu {
    top: 76px !important;
    height: calc(100vh - 76px) !important;
    height: calc(100dvh - 76px) !important;
  }
}

/* PILARES (Nuestra Firma): mismo tamano y tipografia de texto en las 6 tarjetas.
   Se define aqui (despues de variant.css) para que ningun otro estilo lo cambie. */
.mejor-opcion-grid .opcion-card .content { padding: 1.5rem 1.75rem !important; }
.mejor-opcion-grid .opcion-card h4 {
  font-size: 1.3rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  margin: 0 0 0.45rem !important;
}
.mejor-opcion-grid .opcion-card p {
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
@media (max-width: 600px) {
  .mejor-opcion-grid .opcion-card .content { padding: 1.25rem 1.4rem !important; }
  .mejor-opcion-grid .opcion-card h4 { font-size: 1.2rem !important; }
  .mejor-opcion-grid .opcion-card p { font-size: 0.88rem !important; }
}
.mejor-opcion-grid .opcion-card::after {
  background: linear-gradient(180deg, transparent 36%, rgba(10, 6, 8, 0.70) 64%, rgba(10, 6, 8, 0.95) 100%) !important;
}